Fix issues in account actions (#1599)

Co-authored-by: Jose Alberto Hernandez <alberto@MacBook-Pro.local>

src/app/savings/saving-account-actions/activate-savings-account/activate-savings-account.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 

src/app/savings/saving-account-actions/add-charge-savings-account/add-charge-savings-account.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 

src/app/savings/saving-account-actions/apply-annual-fees-savings-account/apply-annual-fees-savings-account.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 

src/app/savings/saving-account-actions/approve-savings-account/approve-savings-account.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 

src/app/savings/saving-account-actions/close-savings-account/close-savings-account.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 

src/app/savings/saving-account-actions/post-interest-as-on-savings-account/post-interest-as-on-savings-account.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 

src/app/savings/saving-account-actions/reject-savings-account/reject-savings-account.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 

src/app/savings/saving-account-actions/savings-account-assign-staff/savings-account-assign-staff.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 

src/app/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 
@@ -80,10 +80,9 @@
         </mat-card-actions>
 
       </mat-card-content>
-      
+
     </form>
 
   </mat-card>
 
 </div>
-  

src/app/savings/saving-account-actions/savings-account-unassign-staff/savings-account-unassign-staff.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 

src/app/savings/saving-account-actions/undo-approval-savings-account/undo-approval-savings-account.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 

src/app/savings/saving-account-actions/withdraw-by-client-savings-account/withdraw-by-client-savings-account.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 

src/app/savings/savings-account-stepper/savings-account-details-step/savings-account-details-step.component.html

@@ -14,9 +14,9 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%" (click)="submittedOnDatePicker.open()">
+    <mat-form-field fxFlex="48%" (click)="submittedOnDatePicker.open()" *ngIf="savingsProductSelected">
       <mat-label>Submitted On</mat-label>
-      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submittedOnDatePicker" 
+      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submittedOnDatePicker"
         formControlName="submittedOnDate" required>
       <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #submittedOnDatePicker></mat-datepicker>
@@ -25,7 +25,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field fxFlex="48%" *ngIf="savingsProductSelected">
       <mat-label>Field Officer</mat-label>
       <mat-select formControlName="fieldOfficerId">
         <mat-option *ngFor="let officer of fieldOfficerData" [value]="officer.id">
@@ -34,7 +34,7 @@
       </mat-select>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field fxFlex="48%" *ngIf="savingsProductSelected">
       <mat-label>External ID</mat-label>
       <input matInput formControlName="externalId">
     </mat-form-field>

src/app/savings/savings-account-stepper/savings-account-details-step/savings-account-details-step.component.ts

@@ -32,6 +32,8 @@ export class SavingsAccountDetailsStepComponent implements OnInit {
   /** Savings Account Details Form */
   savingsAccountDetailsForm: FormGroup;
 
+  savingsProductSelected = false;
+
   /** Savings Account Template with product data  */
   @Output() savingsAccountProductTemplate = new EventEmitter();
 
@@ -88,6 +90,7 @@ export class SavingsAccountDetailsStepComponent implements OnInit {
       .subscribe((response: any) => {
         this.savingsAccountProductTemplate.emit(response);
         this.fieldOfficerData = response.fieldOfficerOptions;
+        this.savingsProductSelected = true;
         if (!this.isFieldOfficerPatched && this.savingsAccountTemplate.fieldOfficerId) {
           this.savingsAccountDetailsForm.get('fieldOfficerId').patchValue(this.savingsAccountTemplate.fieldOfficerId);
           this.isFieldOfficerPatched = true;