From fc2b352311862204fee5ce4bfe1245116e48974c Mon Sep 17 00:00:00 2001
From: Muskan Khedia <36980003+muskankhedia@users.noreply.github.com>
Date: Wed, 8 Jul 2020 12:57:21 +0530
Subject: [PATCH] feat: add edit recurring deposit account (#1023)

Fixes: #1017
---
 ...g-deposit-account-and-template.resolver.ts |  32 ++++
 ...te-recurring-deposits-account.component.ts |   3 +-
 ...t-recurring-deposit-account.component.html | 106 +++++++++++++
 ...t-recurring-deposit-account.component.scss |   0
 ...ecurring-deposit-account.component.spec.ts |  25 +++
 ...dit-recurring-deposit-account.component.ts | 146 ++++++++++++++++++
 ...deposits-account-charges-step.component.ts |  28 +++-
 ...deposits-account-details-step.component.ts |   9 +-
 ...posits-account-preview-step.component.html |   5 +
 ...osits-account-settings-step.component.html |  26 +++-
 ...eposits-account-settings-step.component.ts |  31 +++-
 .../charges-tab/charges-tab.component.html    |   5 +-
 ...curring-deposits-account-view.component.ts |   3 +
 .../recurring-deposits-routing.module.ts      |  13 +-
 .../recurring-deposits.module.ts              |   4 +-
 .../recurring-deposits.service.ts             |  20 +++
 16 files changed, 438 insertions(+), 18 deletions(-)
 create mode 100644 src/app/deposits/recurring-deposits/common-resolvers/recurring-deposit-account-and-template.resolver.ts
 create mode 100644 src/app/deposits/recurring-deposits/edit-recurring-deposit-account/edit-recurring-deposit-account.component.html
 create mode 100644 src/app/deposits/recurring-deposits/edit-recurring-deposit-account/edit-recurring-deposit-account.component.scss
 create mode 100644 src/app/deposits/recurring-deposits/edit-recurring-deposit-account/edit-recurring-deposit-account.component.spec.ts
 create mode 100644 src/app/deposits/recurring-deposits/edit-recurring-deposit-account/edit-recurring-deposit-account.component.ts

diff --git a/src/app/deposits/recurring-deposits/common-resolvers/recurring-deposit-account-and-template.resolver.ts b/src/app/deposits/recurring-deposits/common-resolvers/recurring-deposit-account-and-template.resolver.ts
new file mode 100644
index 000000000..6e42f6895
--- /dev/null
+++ b/src/app/deposits/recurring-deposits/common-resolvers/recurring-deposit-account-and-template.resolver.ts
@@ -0,0 +1,32 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { RecurringDepositsService } from '../recurring-deposits.service';
+
+/**
+ * Recurring Deposits Account Template resolver.
+ */
+@Injectable()
+export class RecurringDepositsAccountAndTemplateResolver implements Resolve<Object> {
+
+    /**
+     * @param {RecurringDepositsService} recurringDepositsService Recurring Deposits service.
+     */
+    constructor(private recurringDepositsService: RecurringDepositsService) { }
+
+    /**
+     * Returns the Recurring Deposits Account Template.
+     * @param {ActivatedRouteSnapshot} route Route Snapshot
+     * @returns {Observable<any>}
+     */
+    resolve(route: ActivatedRouteSnapshot): Observable<any> {
+        const recurringDepositAccountId = route.paramMap.get('recurringDepositAccountId');
+        return this.recurringDepositsService.getRecurringDepositsAccountAndTemplate(recurringDepositAccountId);
+    }
+
+}
diff --git a/src/app/deposits/recurring-deposits/create-recurring-deposits-account/create-recurring-deposits-account.component.ts b/src/app/deposits/recurring-deposits/create-recurring-deposits-account/create-recurring-deposits-account.component.ts
index a0fc40b4c..f81d04497 100644
--- a/src/app/deposits/recurring-deposits/create-recurring-deposits-account/create-recurring-deposits-account.component.ts
+++ b/src/app/deposits/recurring-deposits/create-recurring-deposits-account/create-recurring-deposits-account.component.ts
@@ -120,7 +120,7 @@ export class CreateRecurringDepositsAccountComponent implements OnInit {
       charges: this.recurringDepositAccount.charges.map((charge: any) => ({
         chargeId: charge.id,
         amount: charge.amount,
-        dueDate: charge.dueDate,
+        dueDate: charge.dueDate && this.datePipe.transform(charge.dueDate, dateFormat),
         feeOnMonthDay: charge.feeOnMonthDay,
         feeInterval: charge.feeInterval
       })),
@@ -131,7 +131,6 @@ export class CreateRecurringDepositsAccountComponent implements OnInit {
       monthDayFormat,
       locale
     };
-    console.log('daaa: ', recurringDepositAccount);
 
     this.recurringDepositsService.createRecurringDepositAccount(recurringDepositAccount).subscribe((response: any) => {
       this.router.navigate(['../', response.resourceId], { relativeTo: this.route });
diff --git a/src/app/deposits/recurring-deposits/edit-recurring-deposit-account/edit-recurring-deposit-account.component.html b/src/app/deposits/recurring-deposits/edit-recurring-deposit-account/edit-recurring-deposit-account.component.html
new file mode 100644
index 000000000..0ee3cade5
--- /dev/null
+++ b/src/app/deposits/recurring-deposits/edit-recurring-deposit-account/edit-recurring-deposit-account.component.html
@@ -0,0 +1,106 @@
+<div class="container">
+
+  <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #recurringDepositAccountStepper>
+    <ng-template matStepperIcon="number">
+      <fa-icon icon="pencil-alt" size="sm"></fa-icon>
+    </ng-template>
+
+    <ng-template matStepperIcon="edit">
+      <fa-icon icon="pencil-alt" size="sm"></fa-icon>
+    </ng-template>
+
+    <ng-template matStepperIcon="done">
+      <fa-icon icon="check" size="sm"></fa-icon>
+    </ng-template>
+
+    <ng-template matStepperIcon="error">
+      <fa-icon icon="exclamation-triangle" size="lg"></fa-icon>
+    </ng-template>
+
+    <ng-template matStepperIcon="preview">
+      <fa-icon icon="eye" size="sm"></fa-icon>
+    </ng-template>
+
+    <mat-step [stepControl]="recurringDepositAccountDetailsForm">
+
+      <ng-template matStepLabel>DETAILS</ng-template>
+
+      <mifosx-recurring-deposits-account-details-step
+        [recurringDepositsAccountTemplate]="recurringDepositsAccountAndTemplate"
+        (recurringDepositsAccountProductTemplate)="setTemplate($event)">
+      </mifosx-recurring-deposits-account-details-step>
+
+    </mat-step>
+
+    <mat-step [stepControl]="recurringDepositAccountCurrencyForm">
+
+      <ng-template matStepLabel>CURRENCY</ng-template>
+
+      <mifosx-recurring-deposits-account-currency-step
+        [recurringDepositsAccountTemplate]="recurringDepositsAccountAndTemplate"
+        [recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate">
+      </mifosx-recurring-deposits-account-currency-step>
+
+    </mat-step>
+
+    <mat-step [stepControl]="recurringDepositAccountTermsForm">
+
+      <ng-template matStepLabel>TERMS</ng-template>
+
+      <mifosx-recurring-deposits-account-terms-step
+        [recurringDepositsAccountTemplate]="recurringDepositsAccountAndTemplate"
+        [recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate">
+      </mifosx-recurring-deposits-account-terms-step>
+
+    </mat-step>
+
+    <mat-step [stepControl]="recurringDepositAccountSettingsForm">
+
+      <ng-template matStepLabel>SETTINGS</ng-template>
+
+      <mifosx-recurring-deposits-account-settings-step
+        [recurringDepositsAccountTemplate]="recurringDepositsAccountAndTemplate"
+        [recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate">
+      </mifosx-recurring-deposits-account-settings-step>
+
+    </mat-step>
+
+    <mat-step>
+
+      <ng-template matStepLabel>INTEREST RATE CHART</ng-template>
+
+      <mifosx-recurring-deposits-account-interest-rate-chart-step
+        [recurringDepositsAccountTemplate]="recurringDepositsAccountAndTemplate"
+        [recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate">
+      </mifosx-recurring-deposits-account-interest-rate-chart-step>
+
+    </mat-step>
+
+    <mat-step>
+
+      <ng-template matStepLabel>CHARGES</ng-template>
+
+      <mifosx-recurring-deposits-account-charges-step
+        [recurringDepositsAccountTemplate]="recurringDepositsAccountAndTemplate"
+        [recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate"
+        [recurringDepositAccountFormValid]="recurringDepositAccountFormValidAndNotPristine"
+        [currencyCode]="recurringDepositAccountCurrencyForm.get('currencyCode')">
+      </mifosx-recurring-deposits-account-charges-step>
+
+    </mat-step>
+
+    <mat-step state="preview" *ngIf="recurringDepositAccountFormValidAndNotPristine" completed>
+
+      <ng-template matStepLabel>PREVIEW</ng-template>
+
+      <mifosx-recurring-deposits-account-preview-step
+        [recurringDepositsAccountTemplate]="recurringDepositsAccountAndTemplate"
+        [recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate"
+        [recurringDepositAccountData]="recurringDepositAccountData" (submit)="submit()">
+      </mifosx-recurring-deposits-account-preview-step>
+
+    </mat-step>
+
+  </mat-horizontal-stepper>
+
+</div>
diff --git a/src/app/deposits/recurring-deposits/edit-recurring-deposit-account/edit-recurring-deposit-account.component.scss b/src/app/deposits/recurring-deposits/edit-recurring-deposit-account/edit-recurring-deposit-account.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/deposits/recurring-deposits/edit-recurring-deposit-account/edit-recurring-deposit-account.component.spec.ts b/src/app/deposits/recurring-deposits/edit-recurring-deposit-account/edit-recurring-deposit-account.component.spec.ts
new file mode 100644
index 000000000..459a54b3c
--- /dev/null
+++ b/src/app/deposits/recurring-deposits/edit-recurring-deposit-account/edit-recurring-deposit-account.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditRecurringDepositAccountComponent } from './edit-recurring-deposit-account.component';
+
+describe('EditRecurringDepositAccountComponent', () => {
+  let component: EditRecurringDepositAccountComponent;
+  let fixture: ComponentFixture<EditRecurringDepositAccountComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EditRecurringDepositAccountComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditRecurringDepositAccountComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/deposits/recurring-deposits/edit-recurring-deposit-account/edit-recurring-deposit-account.component.ts b/src/app/deposits/recurring-deposits/edit-recurring-deposit-account/edit-recurring-deposit-account.component.ts
new file mode 100644
index 000000000..004fd6a1a
--- /dev/null
+++ b/src/app/deposits/recurring-deposits/edit-recurring-deposit-account/edit-recurring-deposit-account.component.ts
@@ -0,0 +1,146 @@
+/** Angular Imports */
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { DatePipe } from '@angular/common';
+
+/** Custom Services */
+import { RecurringDepositsService } from '../recurring-deposits.service';
+
+/** Step Components */
+import { RecurringDepositsAccountDetailsStepComponent } from '../recurring-deposits-account-stepper/recurring-deposits-account-details-step/recurring-deposits-account-details-step.component';
+import { RecurringDepositsAccountTermsStepComponent } from '../recurring-deposits-account-stepper/recurring-deposits-account-terms-step/recurring-deposits-account-terms-step.component';
+import { RecurringDepositsAccountCurrencyStepComponent } from '../recurring-deposits-account-stepper/recurring-deposits-account-currency-step/recurring-deposits-account-currency-step.component';
+import { RecurringDepositsAccountSettingsStepComponent } from '../recurring-deposits-account-stepper/recurring-deposits-account-settings-step/recurring-deposits-account-settings-step.component';
+import { RecurringDepositsAccountChargesStepComponent } from '../recurring-deposits-account-stepper/recurring-deposits-account-charges-step/recurring-deposits-account-charges-step.component';
+
+/**
+ * Edit new recurring deposit account
+ */
+@Component({
+  selector: 'mifosx-edit-recurring-deposit-account',
+  templateUrl: './edit-recurring-deposit-account.component.html',
+  styleUrls: ['./edit-recurring-deposit-account.component.scss']
+})
+export class EditRecurringDepositAccountComponent implements OnInit {
+
+  /** Imports all the step component */
+  @ViewChild(RecurringDepositsAccountDetailsStepComponent) recurringDepositsAccountDetailsStep: RecurringDepositsAccountDetailsStepComponent;
+  @ViewChild(RecurringDepositsAccountCurrencyStepComponent) recurringDepositAccountCurrencyStep: RecurringDepositsAccountCurrencyStepComponent;
+  @ViewChild(RecurringDepositsAccountTermsStepComponent) recurringDepositAccountTermsStep: RecurringDepositsAccountTermsStepComponent;
+  @ViewChild(RecurringDepositsAccountSettingsStepComponent) recurringDepositAccountSettingsStep: RecurringDepositsAccountSettingsStepComponent;
+  @ViewChild(RecurringDepositsAccountChargesStepComponent) recurringDepositAccountChargesStep: RecurringDepositsAccountChargesStepComponent;
+
+  /** Recurring Deposits Account And Template */
+  recurringDepositsAccountAndTemplate: any;
+  /** Recurring Deposit Account Product Template */
+  recurringDepositsAccountProductTemplate: any;
+
+  constructor(private route: ActivatedRoute,
+    private router: Router,
+    private datePipe: DatePipe,
+    private recurringDepositsService: RecurringDepositsService
+  ) {
+    this.route.data.subscribe((data: { recurringDepositsAccountAndTemplate: any }) => {
+      this.recurringDepositsAccountAndTemplate = data.recurringDepositsAccountAndTemplate;
+    });
+  }
+
+  /**
+   * Sets recurring deposits account product template.
+   * @param {any} $event API response
+   */
+  setTemplate($event: any) {
+    this.recurringDepositsAccountProductTemplate = $event;
+  }
+
+  ngOnInit() {
+  }
+
+  /** Get Recurring Deposit Account Details Form Data */
+  get recurringDepositAccountDetailsForm() {
+    return this.recurringDepositsAccountDetailsStep.recurringDepositAccountDetailsForm;
+  }
+
+  /** Get Recurring Deposit Account Currency Form Data */
+  get recurringDepositAccountCurrencyForm() {
+    return this.recurringDepositAccountCurrencyStep.recurringDepositAccountCurrencyForm;
+  }
+
+  /** Get Recurring Deposit Account Terms Form Data */
+  get recurringDepositAccountTermsForm() {
+    return this.recurringDepositAccountTermsStep.recurringDepositAccountTermsForm;
+  }
+
+  /** Get Recurring Deposit Account Settings Form Data */
+  get recurringDepositAccountSettingsForm() {
+    return this.recurringDepositAccountSettingsStep.recurringDepositAccountSettingsForm;
+  }
+
+  // Checks if stepper is valid and not pristine.
+  get recurringDepositAccountFormValidAndNotPristine() {
+    return (
+      this.recurringDepositAccountDetailsForm.valid &&
+      this.recurringDepositAccountTermsForm.valid &&
+      this.recurringDepositAccountSettingsForm.valid &&
+      (
+        !this.recurringDepositAccountDetailsForm.pristine ||
+        !this.recurringDepositAccountTermsForm.pristine ||
+        !this.recurringDepositAccountSettingsForm.pristine ||
+        !this.recurringDepositAccountChargesStep.pristine
+      )
+    );
+  }
+
+  /** Retrieves Data of all the forms */
+  get recurringDepositAccountData() {
+    return {
+      ...this.recurringDepositsAccountDetailsStep.recurringDepositAccountDetails,
+      ...this.recurringDepositAccountCurrencyStep.recurringDepositAccountCurrency,
+      ...this.recurringDepositAccountTermsStep.recurringDepositAccountTerms,
+      ...this.recurringDepositAccountSettingsStep.recurringDepositAccountSettings,
+      ...this.recurringDepositAccountChargesStep.recurringDepositAccountCharges,
+    };
+  }
+
+
+  /** Retrieves Data of all forms except Currency to submit the data */
+  get recurringDepositAccount() {
+    return {
+      ...this.recurringDepositsAccountDetailsStep.recurringDepositAccountDetails,
+      ...this.recurringDepositAccountTermsStep.recurringDepositAccountTerms,
+      ...this.recurringDepositAccountSettingsStep.recurringDepositAccountSettings,
+      ...this.recurringDepositAccountChargesStep.recurringDepositAccountCharges,
+    };
+  }
+
+  /**
+   * Submits the recurring deposit form to create a new recurring deposit account
+   */
+  submit() {
+    const locale = 'en';
+    const dateFormat = 'dd MMMM yyyy';
+    const monthDayFormat = 'dd MMMM';
+    const recurringDepositAccount = {
+      ...this.recurringDepositAccount,
+      clientId: this.recurringDepositsAccountAndTemplate.clientId,
+      charges: this.recurringDepositAccount.charges.map((charge: any) => ({
+        chargeId: charge.id,
+        amount: charge.amount,
+        dueDate: charge.dueDate && this.datePipe.transform(charge.dueDate, dateFormat),
+        feeOnMonthDay: charge.feeOnMonthDay,
+        feeInterval: charge.feeInterval
+      })),
+      isCalendarInherited: this.recurringDepositAccount.recurringDepositAccount ? this.recurringDepositAccount.recurringDepositAccount : false,
+      submittedOnDate: this.datePipe.transform(this.recurringDepositAccount.submittedOnDate, dateFormat),
+      expectedFirstDepositOnDate: this.datePipe.transform(this.recurringDepositAccount.expectedFirstDepositOnDate, dateFormat),
+      dateFormat,
+      monthDayFormat,
+      locale
+    };
+
+    this.recurringDepositsService.updateRecurringDepositAccount(this.recurringDepositsAccountAndTemplate.id, recurringDepositAccount).subscribe((response: any) => {
+      this.router.navigate(['../'], { relativeTo: this.route });
+    });
+  }
+
+}
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-charges-step/recurring-deposits-account-charges-step.component.ts b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-charges-step/recurring-deposits-account-charges-step.component.ts
index 5e87ce3b2..40061cb0a 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-charges-step/recurring-deposits-account-charges-step.component.ts
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-charges-step/recurring-deposits-account-charges-step.component.ts
@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, OnChanges } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { MatDialog } from '@angular/material';
 
@@ -21,7 +21,7 @@ import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
   templateUrl: './recurring-deposits-account-charges-step.component.html',
   styleUrls: ['./recurring-deposits-account-charges-step.component.scss']
 })
-export class RecurringDepositsAccountChargesStepComponent implements OnInit {
+export class RecurringDepositsAccountChargesStepComponent implements OnInit, OnChanges {
 
   @Input() recurringDepositsAccountTemplate: any;
   @Input() recurringDepositsAccountProductTemplate: any;
@@ -31,28 +31,43 @@ export class RecurringDepositsAccountChargesStepComponent implements OnInit {
   /** Charges Data */
   chargeData: any;
   /** Charges Data Source */
-  chargesDataSource: {}[];
+  chargesDataSource: {}[] = [];
   /** Charges table columns */
   displayedColumns: string[] = ['name', 'chargeCalculationType', 'amount', 'chargeTimeType', 'date', 'repaymentsEvery', 'action'];
   /** Component is pristine if there has been no changes by user interaction */
   pristine = true;
+  /** For Edit Recurring Deposits Account Form */
+  isChargesPatched = false;
 
   constructor(public dialog: MatDialog,
     private datePipe: DatePipe) {
   }
 
   ngOnInit() {
-    this.chargeData = this.recurringDepositsAccountTemplate.chargeOptions;
-    this.chargesDataSource = [];
-    this.currencyCode.valueChanges.subscribe(() => this.chargesDataSource = []);
+    this.currencyCode.valueChanges.subscribe(() => {
+      if (!this.isChargesPatched && this.recurringDepositsAccountTemplate.charges) {
+        this.chargesDataSource = this.recurringDepositsAccountTemplate.charges.map((charge: any) => ({ ...charge, id: charge.chargeId })) || [];
+        this.isChargesPatched = true;
+      } else {
+        this.chargesDataSource = [];
+      }
+    });
   }
 
+  ngOnChanges() {
+    if (this.recurringDepositsAccountProductTemplate) {
+      this.chargeData = this.recurringDepositsAccountProductTemplate.chargeOptions;
+    }
+  }
+
+
   /**
    * Add a charge
    */
   addCharge(charge: any) {
     this.chargesDataSource = this.chargesDataSource.concat([charge.value]);
     charge.value = '';
+    this.pristine = false;
   }
 
   /**
@@ -168,6 +183,7 @@ export class RecurringDepositsAccountChargesStepComponent implements OnInit {
       if (response.delete) {
         this.chargesDataSource.splice(this.chargesDataSource.indexOf(charge), 1);
         this.chargesDataSource = this.chargesDataSource.concat([]);
+        this.pristine = false;
       }
     });
   }
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-details-step/recurring-deposits-account-details-step.component.ts b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-details-step/recurring-deposits-account-details-step.component.ts
index 5ebf4129e..45e88d345 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-details-step/recurring-deposits-account-details-step.component.ts
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-details-step/recurring-deposits-account-details-step.component.ts
@@ -27,6 +27,8 @@ export class RecurringDepositsAccountDetailsStepComponent implements OnInit {
   productData: any;
   /** Field Officer Data */
   fieldOfficerData: any;
+  /** For edit recurring deposits form */
+  isFieldOfficerPatched = false;
   /** Recurring Deposits Account Details Form */
   recurringDepositAccountDetailsForm: FormGroup;
 
@@ -77,7 +79,12 @@ export class RecurringDepositsAccountDetailsStepComponent implements OnInit {
       this.recurringDepositsService.getRecurringDepositsAccountTemplate(clientId, productId).subscribe((response: any) => {
         this.recurringDepositsAccountProductTemplate.emit(response);
         this.fieldOfficerData = response.fieldOfficerOptions;
-        this.recurringDepositAccountDetailsForm.get('fieldOfficerId').patchValue('');
+        if (!this.isFieldOfficerPatched && this.recurringDepositsAccountTemplate.fieldOfficerId) {
+          this.recurringDepositAccountDetailsForm.get('fieldOfficerId').patchValue(this.recurringDepositsAccountTemplate.fieldOfficerId);
+          this.isFieldOfficerPatched = true;
+        } else {
+          this.recurringDepositAccountDetailsForm.get('fieldOfficerId').patchValue('');
+        }
       });
     });
   }
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.html
index ea80ac1ab..c404f9fd4 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.html
@@ -35,6 +35,11 @@
     <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate.currency.decimalPlaces }}</span>
   </div>
 
+    <div fxFlexFill>
+      <span fxFlex="40%">Currency In Multiples Of</span>
+      <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate.currency.inMultiplesOf }}</span>
+    </div>
+
   <h3 class="mat-h3" fxFlexFill>Terms</h3>
   <mat-divider fxFlexFill></mat-divider>
 
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-settings-step/recurring-deposits-account-settings-step.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-settings-step/recurring-deposits-account-settings-step.component.html
index 7be8b48cb..850d297b1 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-settings-step/recurring-deposits-account-settings-step.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-settings-step/recurring-deposits-account-settings-step.component.html
@@ -151,9 +151,9 @@
       </mat-select>
     </mat-form-field>
 
-    <!-- <mat-divider fxFlex="98%"></mat-divider> -->
+    <mat-divider fxFlex="98%"></mat-divider>
 
-    <!-- <h4 fxFlex="23%" class="mat-h4">For Pre-mature closure</h4>
+    <h4 fxFlex="98%" class="mat-h4">For Pre-mature closure</h4>
 
     <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="preClosurePenalApplicable" class="margin-v">
       Apply Penal Interest (less)
@@ -172,9 +172,27 @@
           {{ preClosurePenalInterestOnType.value }}
         </mat-option>
       </mat-select>
-    </mat-form-field> -->
+    </mat-form-field> 
 
-    <mat-divider fxFlex="98%"></mat-divider>
+    <!-- <mat-divider fxFlex="98%"></mat-divider> -->
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Minimum Balance For Interest Calculation</mat-label>
+      <input type="number" matInput formControlName="minBalanceForInterestCalculation">
+    </mat-form-field>
+
+    <ng-container *ngIf="taxGroup">
+      <h4 fxFlex="98%" class="mat-h4">Tax Group</h4>
+
+      <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="withHoldTax" class="margin-v">
+        Is Withhold Tax Applicable?
+      </mat-checkbox>
+    
+      <mat-form-field fxFlex="48%" *ngIf="recurringDepositAccountSettingsForm.controls.taxGroupId">
+        <mat-label>Tax Group</mat-label>
+        <input type="text" matInput formControlName="taxGroupId">
+      </mat-form-field>
+    </ng-container>
 
   </div>
 
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-settings-step/recurring-deposits-account-settings-step.component.ts b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-settings-step/recurring-deposits-account-settings-step.component.ts
index e21f12697..cdb3214f0 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-settings-step/recurring-deposits-account-settings-step.component.ts
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-settings-step/recurring-deposits-account-settings-step.component.ts
@@ -28,6 +28,10 @@ export class RecurringDepositsAccountSettingsStepComponent implements OnInit, On
   lockinPeriodFrequencyTypeData: any;
   /** Period Frequency Type Data */
   periodFrequencyTypeData: any;
+  /** Preclosure Penal Interest Type on Data */
+  preClosurePenalInterestOnTypeData: any;
+  /** Tax Group */
+  taxGroup: any;
 
   /**
    * @param {FormBuilder} formBuilder Form Builder
@@ -52,7 +56,26 @@ export class RecurringDepositsAccountSettingsStepComponent implements OnInit, On
         'inMultiplesOfDepositTermTypeId': this.recurringDepositsAccountProductTemplate.inMultiplesOfDepositTermType ? this.recurringDepositsAccountProductTemplate.inMultiplesOfDepositTermType.id : '',
         'maxDepositTerm': this.recurringDepositsAccountProductTemplate.maxDepositTerm,
         'maxDepositTermTypeId': this.recurringDepositsAccountProductTemplate.maxDepositTermType ? this.recurringDepositsAccountProductTemplate.maxDepositTermType.id : '',
+        'preClosurePenalApplicable': this.recurringDepositsAccountProductTemplate.preClosurePenalApplicable,
+        'preClosurePenalInterest': this.recurringDepositsAccountProductTemplate.preClosurePenalInterest,
+        'preClosurePenalInterestOnTypeId': this.recurringDepositsAccountProductTemplate.preClosurePenalInterestOnType ? this.recurringDepositsAccountProductTemplate.preClosurePenalInterestOnType.id : '',
+        'minBalanceForInterestCalculation': this.recurringDepositsAccountProductTemplate.minBalanceForInterestCalculation,
       });
+      if (this.recurringDepositsAccountProductTemplate.withHoldTax) {
+        this.recurringDepositAccountSettingsForm.addControl('withHoldTax', new FormControl(false));
+        this.recurringDepositAccountSettingsForm.get('withHoldTax').valueChanges.subscribe((value: boolean) => {
+          if (value) {
+            this.recurringDepositAccountSettingsForm.addControl('taxGroupId', new FormControl({ value: '', disabled: true }));
+            this.recurringDepositAccountSettingsForm.get('taxGroupId').patchValue(this.recurringDepositsAccountProductTemplate.taxGroup && this.recurringDepositsAccountProductTemplate.taxGroup.name);
+          } else {
+            this.recurringDepositAccountSettingsForm.removeControl('taxGroupId');
+          }
+        });
+        this.recurringDepositAccountSettingsForm.get('withHoldTax').patchValue(this.recurringDepositsAccountTemplate.withHoldTax);
+      } else {
+        this.recurringDepositAccountSettingsForm.removeControl('withHoldTax');
+      }
+      this.taxGroup = this.recurringDepositsAccountProductTemplate.taxGroup;
       this.setOptions();
     }
   }
@@ -62,6 +85,7 @@ export class RecurringDepositsAccountSettingsStepComponent implements OnInit, On
       this.recurringDepositAccountSettingsForm.patchValue({
         'lockinPeriodFrequency': this.recurringDepositsAccountTemplate.lockinPeriodFrequency,
         'lockinPeriodFrequencyType': this.recurringDepositsAccountTemplate.lockinPeriodFrequencyType && this.recurringDepositsAccountTemplate.lockinPeriodFrequencyType.id,
+        'mandatoryRecommendedDepositAmount': this.recurringDepositsAccountProductTemplate.mandatoryRecommendedDepositAmount,
       });
     }
   }
@@ -88,7 +112,11 @@ export class RecurringDepositsAccountSettingsStepComponent implements OnInit, On
       'inMultiplesOfDepositTerm': [{ value: '', disabled: true }],
       'inMultiplesOfDepositTermTypeId': [{ value: '', disabled: true }],
       'maxDepositTerm': [{ value: '', disabled: true }],
-      'maxDepositTermTypeId': [{ value: '', disabled: true }]
+      'maxDepositTermTypeId': [{ value: '', disabled: true }],
+      'preClosurePenalApplicable': [{ value: '', disabled: true }],
+      'preClosurePenalInterest': [{ value: '', disabled: true }],
+      'preClosurePenalInterestOnTypeId': [{ value: '', disabled: true }],
+      'minBalanceForInterestCalculation': [{ value: '', disabled: true }]
     });
   }
 
@@ -98,6 +126,7 @@ export class RecurringDepositsAccountSettingsStepComponent implements OnInit, On
   setOptions() {
     this.lockinPeriodFrequencyTypeData = this.recurringDepositsAccountProductTemplate.lockinPeriodFrequencyTypeOptions;
     this.periodFrequencyTypeData = this.recurringDepositsAccountProductTemplate.periodFrequencyTypeOptions;
+    this.preClosurePenalInterestOnTypeData = this.recurringDepositsAccountProductTemplate.preClosurePenalInterestOnTypeOptions;
   }
 
   /**
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/charges-tab/charges-tab.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/charges-tab/charges-tab.component.html
index dac44911c..2b5607f02 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/charges-tab/charges-tab.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/charges-tab/charges-tab.component.html
@@ -35,8 +35,9 @@
       </ng-container>
 
       <ng-container matColumnDef="repeatsOn">
-        <th mat-header-cell *matHeaderCellDef> Repeats On (M/d) </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.feeOnMonthDay ? charge.feeOnMonthDay.join('/') : '' }} </td>
+        <th mat-header-cell *matHeaderCellDef> Repeats On </th>
+        <td mat-cell *matCellDef="let charge">
+          {{charge.feeOnMonthDay ? ([2000].concat(charge.feeOnMonthDay) | date: 'dd MMMM') : 'Unassigned'}} </td>
       </ng-container>
 
       <ng-container matColumnDef="calculationType">
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component.ts b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component.ts
index 6d8a52e8f..168288056 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component.ts
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component.ts
@@ -147,6 +147,9 @@ export class RecurringDepositsAccountViewComponent implements OnInit {
       case 'Withdraw By Client':
         this.router.navigate([`actions/${name}`], { relativeTo: this.route });
         break;
+      case 'Modify Application':
+        this.router.navigate(['edit-recurring-deposit-account'], { relativeTo: this.route });
+        break;
       case 'Delete':
         this.deleteRecurringDepositsAccount();
         break;
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-routing.module.ts b/src/app/deposits/recurring-deposits/recurring-deposits-routing.module.ts
index 78c8fb900..096b48fef 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-routing.module.ts
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-routing.module.ts
@@ -22,6 +22,8 @@ import { SavingsDatatableResolver } from 'app/savings/common-resolvers/savings-d
 import { SavingsDatatablesResolver } from 'app/savings/common-resolvers/savings-datatables.resolver';
 import { RecurringDepositsAccountTemplateResolver } from './common-resolvers/recurring-deposits-account-template.resolver';
 import { RecurringDepositsAccountActionsResolver } from './common-resolvers/recurring-deposit-account-actions.resolver';
+import { EditRecurringDepositAccountComponent } from './edit-recurring-deposit-account/edit-recurring-deposit-account.component';
+import { RecurringDepositsAccountAndTemplateResolver } from './common-resolvers/recurring-deposit-account-and-template.resolver';
 
 const routes: Routes = [
   {
@@ -92,6 +94,14 @@ const routes: Routes = [
               },
             ]
           },
+          {
+            path: 'edit-recurring-deposit-account',
+            data: { title: extract('Edit Recurring Deposit Account'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+            component: EditRecurringDepositAccountComponent,
+            resolve: {
+              recurringDepositsAccountAndTemplate: RecurringDepositsAccountAndTemplateResolver
+            }
+          },
           {
             path: 'actions/:name',
             data: { title: extract('Recurring Deposits Account Actions'), routeParamBreadcrumb: 'name' },
@@ -115,7 +125,8 @@ const routes: Routes = [
     SavingsDatatableResolver,
     SavingsDatatablesResolver,
     RecurringDepositsAccountTemplateResolver,
-    RecurringDepositsAccountActionsResolver
+    RecurringDepositsAccountActionsResolver,
+    RecurringDepositsAccountAndTemplateResolver
   ]
 })
 export class RecurringDepositsRoutingModule {}
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits.module.ts b/src/app/deposits/recurring-deposits/recurring-deposits.module.ts
index 957177667..79f234d2b 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits.module.ts
+++ b/src/app/deposits/recurring-deposits/recurring-deposits.module.ts
@@ -35,6 +35,7 @@ import { AddChargeRecurringDepositsAccountComponent } from './recurring-deposits
 
 /* Dialog Components */
 import { RecurringDepositConfirmationDialogComponent } from './recurring-deposits-account-view/custom-dialogs/recurring-deposit-confirmation-dialog/recurring-deposit-confirmation-dialog.component';
+import { EditRecurringDepositAccountComponent } from './edit-recurring-deposit-account/edit-recurring-deposit-account.component';
 
 
 /**
@@ -73,7 +74,8 @@ import { RecurringDepositConfirmationDialogComponent } from './recurring-deposit
     RejectRecurringDepositsAccountComponent,
     WithdrawByClientRecurringDepositsAccountComponent,
     AddChargeRecurringDepositsAccountComponent,
-    RecurringDepositConfirmationDialogComponent
+    RecurringDepositConfirmationDialogComponent,
+    EditRecurringDepositAccountComponent
   ],
   entryComponents: [
     RecurringDepositConfirmationDialogComponent
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits.service.ts b/src/app/deposits/recurring-deposits/recurring-deposits.service.ts
index 973b4c965..db455180a 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits.service.ts
+++ b/src/app/deposits/recurring-deposits/recurring-deposits.service.ts
@@ -83,4 +83,24 @@ export class RecurringDepositsService {
   deleteRecurringDepositsAccount(accountId: string): Observable<any> {
     return this.http.delete(`/recurringdepositaccounts/${accountId}`);
   }
+
+  /**
+   * Get Recurring Deposits Account and Template Data
+   * @param accountId Account ID
+   */
+  getRecurringDepositsAccountAndTemplate(accountId: any) {
+    const httpParams = new HttpParams().set('associations', 'charges')
+      .set('template', 'true');
+    return this.http.get(`/recurringdepositaccounts/${accountId}`, { params: httpParams });
+  }
+
+  /**
+   * @param {any} accountId Account Id
+   * @param {any} fixedDepositAccountData Recurring Deposit Account Data
+   * @returns {Observable<any>}
+   */
+  updateRecurringDepositAccount(accountId: any, recurringDepositAccountData: any): Observable<any> {
+    return this.http.put(`/recurringdepositaccounts/${accountId}`, recurringDepositAccountData);
+  }
+
 }