fix: Recurring Deposit accounts issues

src/app/deposits/fixed-deposits/common-resolvers/fixed-deposit-account-actions.resolver.ts

@@ -35,6 +35,8 @@ export class FixedDepositsAccountActionsResolver implements Resolve<Object> {
         return this.savingsService.getSavingsChargeTemplateResource(fixedDepositAccountId);
       case 'Close':
         return this.fixedDepositsService.getFixedDepositsAccountClosureTemplate(fixedDepositAccountId);
+      case 'Withdrawal':
+        return this.fixedDepositsService.getFixedDepositsAccountTransactionTemplate(fixedDepositAccountId);
       default:
         return undefined;
     }

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/fixed-deposits-account-actions.component.html

@@ -6,3 +6,4 @@
 <mifosx-add-charge-fixed-deposits-account *ngIf="actions['Add Charge']"></mifosx-add-charge-fixed-deposits-account>
 <mifosx-premature-close-fixed-deposits-account *ngIf="actions['Premature Close']"></mifosx-premature-close-fixed-deposits-account>
 <mifosx-close-fixed-deposits-account *ngIf="actions['Close']"></mifosx-close-fixed-deposits-account>
+<mifosx-fixed-deposits-cash-transaction *ngIf="actions['Withdrawal']"></mifosx-fixed-deposits-cash-transaction>

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/fixed-deposits-account-actions.component.ts

@@ -23,6 +23,7 @@ export class FixedDepositsAccountActionsComponent {
     'Add Charge': boolean
     'Premature Close': boolean
     'Withdrawn by Client': boolean
+    'Withdrawal': boolean
   } = {
     'Approve': false,
     'Reject': false,
@@ -32,7 +33,8 @@ export class FixedDepositsAccountActionsComponent {
     'Undo Activation': false,
     'Add Charge': false,
     'Premature Close': false,
-    'Withdrawn by Client': false
+    'Withdrawn by Client': false,
+    'Withdrawal': false
   };
 
   /**

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/fixed-deposits-cash-transaction/fixed-deposits-cash-transaction.component.html

@@ -0,0 +1,88 @@
+<div class="container mat-elevation-z8">
+
+    <mat-card>
+  
+      <h2 mat-title *ngIf="transactionType.withdrawal">{{'labels.menus.' + actionName | translate }} {{'labels.heading.Fixed Deposit Transactions' | translate}}</h2>
+  
+      <form [formGroup]="accountTransactionForm" (ngSubmit)="submit()">
+  
+        <mat-card-content fxLayout="column">
+  
+          <mat-form-field (click)="dueDatePicker.open()">
+            <mat-label>{{'labels.inputs.Transaction Date' | translate}}</mat-label>
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker"
+              formControlName="transactionDate" required>
+            <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
+            <mat-datepicker #dueDatePicker></mat-datepicker>
+            <mat-error *ngIf="accountTransactionForm.controls.transactionDate.hasError('required')">
+              {{'labels.inputs.Transaction Date' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mifosx-input-amount [currency]="currency" [isRequired]="true"
+            [inputFormControl]="accountTransactionForm.controls.transactionAmount"
+            [inputLabel]="'Transaction Amount'">
+          </mifosx-input-amount>
+  
+          <mat-form-field>
+            <mat-label>{{'labels.inputs.Payment Type' | translate}}</mat-label>
+            <mat-select required formControlName="paymentTypeId">
+              <mat-option *ngFor="let paymentType of paymentTypeOptions" [value]="paymentType.id">
+                {{ paymentType.name }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+  
+          <div fxFlexFill>
+            <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
+              <mat-slide-toggle>
+                <div [className]="addPaymentDetailsFlag ? 'enabled' : 'disabled'">
+                  <span class="m-l-10">{{'labels.inputs.Show Payment Details' | translate}}</span>
+                </div>
+              </mat-slide-toggle>
+            </span>
+          </div>
+  
+          <mat-form-field *ngIf="addPaymentDetailsFlag">
+            <mat-label>{{'labels.inputs.Account Number' | translate}}</mat-label>
+            <input type="number" formControlName="accountNumber" matInput />
+          </mat-form-field>
+  
+          <mat-form-field *ngIf="addPaymentDetailsFlag">
+            <mat-label>{{'labels.inputs.Cheque' | translate}}</mat-label>
+            <input type="number" formControlName="checkNumber" matInput />
+          </mat-form-field>
+  
+          <mat-form-field *ngIf="addPaymentDetailsFlag">
+            <mat-label>{{'labels.inputs.Routing Code' | translate}}</mat-label>
+            <input formControlName="routingCode" matInput />
+          </mat-form-field>
+  
+          <mat-form-field *ngIf="addPaymentDetailsFlag">
+            <mat-label>{{'labels.inputs.Receipt Number' | translate}}</mat-label>
+            <input formControlName="receiptNumber" matInput />
+          </mat-form-field>
+  
+          <mat-form-field *ngIf="addPaymentDetailsFlag">
+            <mat-label>{{'labels.inputs.Bank' | translate}}</mat-label>
+            <input formControlName="bankNumber" matInput />
+          </mat-form-field>
+  
+          <mat-form-field>
+            <mat-label>{{'labels.inputs.Notes' | translate}}</mat-label>
+            <textarea formControlName="note" matInput cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
+          </mat-form-field>
+  
+          <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
+            <button type="button" mat-raised-button [routerLink]="['../../transactions']">{{'labels.buttons.Cancel' | translate}}</button>
+            <button mat-raised-button color="primary" [disabled]="!accountTransactionForm.valid">{{'labels.buttons.Submit' | translate}}</button>
+          </mat-card-actions>
+  
+        </mat-card-content>
+  
+      </form>
+  
+    </mat-card>
+  
+  </div>
+  

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/fixed-deposits-cash-transaction/fixed-deposits-cash-transaction.component.scss

@@ -0,0 +1,15 @@
+.expandcollapsebutton {
+    margin-top: -7px;
+}
+
+.container {
+    max-width: 37rem;
+}
+
+.right-input {
+    text-align: right;
+}
+
+.right-label {
+    padding-right: 25px !important;
+}

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/fixed-deposits-cash-transaction/fixed-deposits-cash-transaction.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FixedDepositsCashTransactionComponent } from './fixed-deposits-cash-transaction.component';
+
+describe('FixedDepositsCashTransactionComponent', () => {
+  let component: FixedDepositsCashTransactionComponent;
+  let fixture: ComponentFixture<FixedDepositsCashTransactionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FixedDepositsCashTransactionComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FixedDepositsCashTransactionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/fixed-deposits-cash-transaction/fixed-deposits-cash-transaction.component.ts

@@ -0,0 +1,123 @@
+import { Component, OnInit } from '@angular/core';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
+import { FixedDepositsService } from '../../fixed-deposits.service';
+import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Currency, PaymentType } from 'app/shared/models/general.model';
+
+@Component({
+  selector: 'mifosx-fixed-deposits-cash-transaction',
+  templateUrl: './fixed-deposits-cash-transaction.component.html',
+  styleUrls: ['./fixed-deposits-cash-transaction.component.scss']
+})
+export class FixedDepositsCashTransactionComponent implements OnInit {
+
+  /** Minimum Due Date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum Due Date allowed. */
+  maxDate = new Date();
+  /** Savings account transaction form. */
+  accountTransactionForm: UntypedFormGroup;
+  /** savings account transaction payment options. */
+  paymentTypeOptions: PaymentType[] = [];
+  /** Flag to enable payment details fields. */
+  addPaymentDetailsFlag: Boolean = false;
+  /** transaction type flag to render required UI */
+  transactionType: { deposit: boolean, withdrawal: boolean } = { deposit: false, withdrawal: false };
+  /** transaction command for submit request */
+  transactionCommand: string;
+  actionName: string;
+  /** saving account's Id */
+  accountId: string;
+  currency: Currency;
+
+  /**
+   * Retrieves the Saving Account transaction template data from `resolve`.
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {FixedDepositsService} fixedDepositsService Fixed Deposit Service.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Dates} dateUtils Date Utils.
+   * @param {Router} router Router for navigation.
+   * @param {SettingsService} settingsService Settings Service
+   */
+  constructor(private formBuilder: UntypedFormBuilder,
+              private route: ActivatedRoute,
+              private router: Router,
+              private dateUtils: Dates,
+              private fixedDepositsService: FixedDepositsService,
+              private settingsService: SettingsService) {
+    this.route.data.subscribe((data: { fixedDepositsAccountActionData: any }) => {
+      this.currency = data.fixedDepositsAccountActionData.currency;
+      this.paymentTypeOptions = data.fixedDepositsAccountActionData.paymentTypeOptions;
+    });
+    this.actionName = this.route.snapshot.params['name'];
+    this.transactionCommand = this.actionName.toLowerCase();
+    this.transactionType[this.transactionCommand] = true;
+    this.accountId = this.route.parent.snapshot.params['fixedDepositAccountId'];
+  }
+
+  /**
+   * Creates the Saving account transaction form when component loads.
+   */
+  ngOnInit() {
+    this.maxDate = this.settingsService.businessDate;
+    this.createSavingAccountTransactionForm();
+  }
+
+  /**
+   * Method to create the Saving Account Transaction Form.
+   */
+  createSavingAccountTransactionForm() {
+    this.accountTransactionForm = this.formBuilder.group({
+      'transactionDate': [this.settingsService.businessDate, Validators.required],
+      'transactionAmount': [0, Validators.required],
+      'paymentTypeId': [''],
+      'note': ['']
+    });
+  }
+
+  /**
+   * Method to add payment detail fields to the UI.
+   */
+  addPaymentDetails() {
+    this.addPaymentDetailsFlag = !this.addPaymentDetailsFlag;
+    if (this.addPaymentDetailsFlag) {
+      this.accountTransactionForm.addControl('accountNumber', new UntypedFormControl(''));
+      this.accountTransactionForm.addControl('checkNumber', new UntypedFormControl(''));
+      this.accountTransactionForm.addControl('routingCode', new UntypedFormControl(''));
+      this.accountTransactionForm.addControl('receiptNumber', new UntypedFormControl(''));
+      this.accountTransactionForm.addControl('bankNumber', new UntypedFormControl(''));
+    } else {
+      this.accountTransactionForm.removeControl('accountNumber');
+      this.accountTransactionForm.removeControl('checkNumber');
+      this.accountTransactionForm.removeControl('routingCode');
+      this.accountTransactionForm.removeControl('receiptNumber');
+      this.accountTransactionForm.removeControl('bankNumber');
+    }
+  }
+
+  /**
+   * Method to submit the transaction details.
+   */
+  submit() {
+    const savingAccountTransactionFormData = this.accountTransactionForm.value;
+    const locale = this.settingsService.language.code;
+    const dateFormat = this.settingsService.dateFormat;
+    const prevTransactionDate: Date = this.accountTransactionForm.value.transactionDate;
+    if (savingAccountTransactionFormData.transactionDate instanceof Date) {
+      savingAccountTransactionFormData.transactionDate = this.dateUtils.formatDate(prevTransactionDate, dateFormat);
+    }
+    const data = {
+      ...savingAccountTransactionFormData,
+      dateFormat,
+      locale
+    };
+    delete data.note;
+    data['transactionAmount'] = data['transactionAmount'] * 1;
+    this.fixedDepositsService.executeFixedDepositsAccountTransactionsCommand(this.accountId, this.transactionCommand, data).subscribe(res => {
+      this.router.navigate(['../../transactions'], { relativeTo: this.route });
+    });
+  }
+
+}

src/app/deposits/fixed-deposits/fixed-deposits.module.ts

@@ -38,6 +38,7 @@ import { FixedDepositAccountInterestRateChartStepComponent } from './fixed-depos
 import { FixedDepositAccountPreviewStepComponent } from './fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component';
 import { EditFixedDepositAccountComponent } from './edit-fixed-deposit-account/edit-fixed-deposit-account.component';
 import { GeneralTabComponent } from './fixed-deposit-account-view/general-tab/general-tab.component';
+import { FixedDepositsCashTransactionComponent } from './fixed-deposits-account-actions/fixed-deposits-cash-transaction/fixed-deposits-cash-transaction.component';
 
 /**
  * Fixed Deposits Module
@@ -75,7 +76,8 @@ import { GeneralTabComponent } from './fixed-deposit-account-view/general-tab/ge
     FixedDepositAccountInterestRateChartStepComponent,
     FixedDepositAccountPreviewStepComponent,
     EditFixedDepositAccountComponent,
-    GeneralTabComponent
+    GeneralTabComponent,
+    FixedDepositsCashTransactionComponent
   ],
   imports: [
     SharedModule,

src/app/deposits/fixed-deposits/fixed-deposits.service.ts

@@ -76,6 +76,14 @@ export class FixedDepositsService {
     return this.http.get(`/fixeddepositaccounts/${accountId}/template`, { params: httpParams });
   }
 
+  /**
+   * @param {string} accountId Fixed Deposits Account Id
+   * @returns {Observable<any>}
+   */
+  getFixedDepositsAccountTransactionTemplate(accountId: string): Observable<any> {
+    return this.http.get(`/fixeddepositaccounts/${accountId}/transactions/template`);
+  }
+
   /**
    * @param clientId Client Id assosciated with fixed deposits account.
    * @returns {Observable<any>} Fixed Deposits account template.

src/app/deposits/recurring-deposits/edit-recurring-deposit-account/edit-recurring-deposit-account.component.html

@@ -47,7 +47,7 @@
 
       <ng-template matStepLabel>{{"labels.inputs.SETTINGS" | translate }}</ng-template>
 
-      <mifosx-recurring-deposits-account-settings-step
+      <mifosx-recurring-deposits-account-settings-step [isNew]="false"
         [recurringDepositsAccountTemplate]="recurringDepositsAccountAndTemplate"
         [recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate">
       </mifosx-recurring-deposits-account-settings-step>

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/deposit-recurring-deposits-account/deposit-recurring-deposits-account.component.html

@@ -1,6 +1,7 @@
 <div class="container">
 
   <mat-card>
+    <h2 mat-title *ngIf="transactionType.withdrawal">{{'labels.menus.' + actionName | translate }} {{'labels.heading.Recurring Deposit Transactions' | translate}}</h2>
 
     <form [formGroup]="depositRecurringDepositForm" (ngSubmit)="submit()">
 
@@ -19,15 +20,10 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field appearance="fill">
-            <mat-label>{{"labels.inputs.Transaction Amount" | translate}}</mat-label>
-            <span matTextSuffix class="m-l-10">{{ currency.code }}</span>
-            <span fxFlex="auto"></span>
-            <input type="number" matInput required class="right-input" formControlName="transactionAmount">
-            <mat-error *ngIf="depositRecurringDepositForm.controls.transactionAmount.hasError('required')">
-              {{"labels.inputs.Transaction Amount" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
-            </mat-error>
-          </mat-form-field>
+          <mifosx-input-amount [currency]="currency" [isRequired]="true"
+            [inputFormControl]="depositRecurringDepositForm.controls.transactionAmount"
+            [inputLabel]="'Transaction Amount'">
+          </mifosx-input-amount>
 
           <mat-form-field>
             <mat-label>{{"labels.inputs.Payment Type Id" | translate }}</mat-label>

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/deposit-recurring-deposits-account/deposit-recurring-deposits-account.component.ts

@@ -39,6 +39,9 @@ export class DepositRecurringDepositsAccountComponent implements OnInit {
   depositRecurringDepositForm: UntypedFormGroup;
 
   action: string;
+  actionName: string;
+  transactionCommand: string;
+  transactionType: { deposit: boolean, withdrawal: boolean } = { deposit: false, withdrawal: false };
 
   /**
    * Retrieves action details transactions template data from `resolve`
@@ -64,8 +67,10 @@ export class DepositRecurringDepositsAccountComponent implements OnInit {
         this.transactionAmount = this.transactionAmount + this.outstandingChargeAmount;
       }
     });
-    const name: string = this.route.snapshot.params['name'];
-    this.action = name.toLowerCase();
+    this.actionName = this.route.snapshot.params['name'];
+    this.action = this.actionName.toLowerCase();
+    this.transactionCommand = this.action.toLowerCase();
+    this.transactionType[this.transactionCommand] = true;
     this.accountId = this.route.parent.snapshot.params['recurringDepositAccountId'];
   }
 
@@ -80,7 +85,7 @@ export class DepositRecurringDepositsAccountComponent implements OnInit {
   createdepositRecurringDepositForm() {
     this.depositRecurringDepositForm = this.formBuilder.group({
       'transactionDate': [new Date(), Validators.required],
-      'transactionAmount': [this.transactionAmount, Validators.required],
+      'transactionAmount': [0.0, Validators.required],
       'paymentTypeId': ['', Validators.required],
       'note': ''
     });
@@ -131,6 +136,7 @@ export class DepositRecurringDepositsAccountComponent implements OnInit {
     };
 
     delete data['note'];
+    data['transactionAmount'] = data['transactionAmount'] * 1;
     this.recurringDepositsService.executeRecurringDepositsAccountCommand(this.accountId, this.action, data).subscribe(() => {
       this.router.navigate(['../../'], { relativeTo: this.route });
     });

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-charges-step/recurring-deposits-account-charges-step.component.html

@@ -29,14 +29,14 @@
     <ng-container matColumnDef="chargeCalculationType">
       <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Type" | translate }} </th>
       <td mat-cell *matCellDef="let charge">
-        {{ charge.chargeCalculationType.value }}
+        {{ charge.chargeCalculationType.value | translateKey:'catalogs' }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="amount">
       <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount" | translate }} </th>
       <td mat-cell *matCellDef="let charge">
-        {{ charge.amount }}
+        {{ charge.amount | formatNumber }}
         <button mat-icon-button color="primary" (click)="editChargeAmount(charge)">
           <fa-icon icon="pen"></fa-icon>
         </button>
@@ -46,7 +46,7 @@
     <ng-container matColumnDef="chargeTimeType">
       <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Collected On" | translate }} </th>
       <td mat-cell *matCellDef="let charge">
-        {{ charge.chargeTimeType.value }}
+        {{ charge.chargeTimeType.value | translateKey:'catalogs' }}
       </td>
     </ng-container>
 

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-interest-rate-chart-step/recurring-deposits-account-interest-rate-chart-step.component.html

@@ -31,17 +31,17 @@
     <ng-container matColumnDef="period">
       <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Period" | translate }} </th>
       <td mat-cell *matCellDef="let chartSlab">
-        {{chartSlab.fromPeriod}}-{{chartSlab.toPeriod}}&nbsp;{{chartSlab.periodType.value}}</td>
+        {{chartSlab.fromPeriod}} - {{chartSlab.toPeriod}}&nbsp;{{chartSlab.periodType.value | translateKey:'catalogs'}}</td>
     </ng-container>
 
     <ng-container matColumnDef="amountRange">
       <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount Range" | translate }} </th>
-      <td mat-cell *matCellDef="let chartSlab">{{chartSlab.amountRangeFrom}}-{{chartSlab.amountRangeTo}}</td>
+      <td mat-cell *matCellDef="let chartSlab">{{chartSlab.amountRangeFrom | formatNumber}} - {{chartSlab.amountRangeTo | formatNumber }}</td>
     </ng-container>
 
     <ng-container matColumnDef="interest">
       <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Interest" | translate }} </th>
-      <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.annualInterestRate }} </td>
+      <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.annualInterestRate | formatNumber }} %</td>
     </ng-container>
 
     <ng-container matColumnDef="description">
@@ -120,7 +120,7 @@
               <ng-container matColumnDef="amount">
                 <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Interest" | translate }} </th>
                 <td mat-cell *matCellDef="let incentive">
-                  {{ incentive.amount }}
+                  {{ incentive.amount | formatNumber }}
                 </td>
               </ng-container>
 

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.html

@@ -46,25 +46,25 @@
   <div fxFlexFill>
     <span fxFlex="40%">{{"labels.inputs.Interest Compounding Period" | translate }}:</span>
     <span
-      fxFlex="60%">{{ recurringDepositAccountData.interestCompoundingPeriodType | find:recurringDepositsAccountProductTemplate.interestCompoundingPeriodTypeOptions:'id':'value' }}</span>
+      fxFlex="60%">{{ recurringDepositAccountData.interestCompoundingPeriodType | find:recurringDepositsAccountProductTemplate.interestCompoundingPeriodTypeOptions:'id':'value' | translateKey:'catalogs' }}</span>
   </div>
 
   <div fxFlexFill>
     <span fxFlex="40%">{{"labels.inputs.Interest Posting Period" | translate }}:</span>
     <span
-      fxFlex="60%">{{ recurringDepositAccountData.interestPostingPeriodType | find:recurringDepositsAccountProductTemplate.interestPostingPeriodTypeOptions:'id':'value' }}</span>
+      fxFlex="60%">{{ recurringDepositAccountData.interestPostingPeriodType | find:recurringDepositsAccountProductTemplate.interestPostingPeriodTypeOptions:'id':'value' | translateKey:'catalogs' }}</span>
   </div>
 
   <div fxFlexFill>
     <span fxFlex="40%">{{"labels.inputs.Interest Calculated using" | translate }}:</span>
     <span
-      fxFlex="60%">{{ recurringDepositAccountData.interestCalculationType | find:recurringDepositsAccountProductTemplate.interestCalculationTypeOptions:'id':'value' }}</span>
+      fxFlex="60%">{{ recurringDepositAccountData.interestCalculationType | find:recurringDepositsAccountProductTemplate.interestCalculationTypeOptions:'id':'value' | translateKey:'catalogs' }}</span>
   </div>
 
   <div fxFlexFill>
     <span fxFlex="40%">{{"labels.inputs.Days in Year" | translate }}:</span>
     <span
-      fxFlex="60%">{{ recurringDepositAccountData.interestCalculationDaysInYearType | find:recurringDepositsAccountProductTemplate.interestCalculationDaysInYearTypeOptions:'id':'value' }}</span>
+      fxFlex="60%">{{ recurringDepositAccountData.interestCalculationDaysInYearType | find:recurringDepositsAccountProductTemplate.interestCalculationDaysInYearTypeOptions:'id':'value' | translateKey:'catalogs' }}</span>
   </div>
 
   <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Settings" | translate }}</h3>
@@ -74,7 +74,7 @@
   <div fxFlexFill *ngIf="recurringDepositAccountData.lockinPeriodFrequency">
     <span fxFlex="40%">{{"labels.inputs.Lock-in Period" | translate }}:</span>
     <span
-      fxFlex="60%">{{ recurringDepositAccountData.lockinPeriodFrequency + ' ' + (recurringDepositAccountData.lockinPeriodFrequencyType | find:recurringDepositsAccountProductTemplate.lockinPeriodFrequencyTypeOptions:'id':'value') }}</span>
+      fxFlex="60%">{{ recurringDepositAccountData.lockinPeriodFrequency}} {{(recurringDepositAccountData.lockinPeriodFrequencyType | find:recurringDepositsAccountProductTemplate.lockinPeriodFrequencyTypeOptions:'id':'value') | translateKey:'catalogs'}}</span>
   </div>
 
   <div fxFlexFill *ngIf="recurringDepositAccountData.mandatoryRecommendedDepositAmount">
@@ -85,12 +85,12 @@
   <div fxFlexFill>
     <span fxFlex="40%">{{"labels.inputs.Deposit Period" | translate }}:</span>
     <span
-      fxFlex="60%">{{ recurringDepositAccountData.depositPeriod + ' ' + (recurringDepositAccountData.depositPeriodFrequencyId | find:recurringDepositsAccountProductTemplate.periodFrequencyTypeData:'id':'value') }}</span>
+      fxFlex="60%">{{ recurringDepositAccountData.depositPeriod}} {{recurringDepositAccountData.depositPeriodFrequencyId | find:recurringDepositsAccountProductTemplate.periodFrequencyTypeOptions:'id':'value' | translateKey:'catalogs'}}</span>
   </div>
 
   <div fxFlexFill>
     <span fxFlex="40%">{{"labels.inputs.Deposit Frequency Same as Group/Center meeting" | translate }}:</span>
-    <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate.isCalendarInherited === true ? 'Yes' : 'No'  }}</span>
+    <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate.isCalendarInherited | yesNo }}</span>
   </div>
 
   <ng-container *ngIf="!recurringDepositsAccountProductTemplate.isCalendarInherited">
@@ -102,7 +102,7 @@
     <div fxFlexFill>
       <span fxFlex="40%">{{"labels.inputs.Deposit Frequency" | translate }}:</span>
       <span *ngIf="recurringDepositAccountData.recurringFrequency"
-        fxFlex="60%">{{ recurringDepositAccountData.recurringFrequency + ' ' + (recurringDepositAccountData.recurringFrequencyType | find:recurringDepositsAccountProductTemplate.periodFrequencyTypeData:'id':'value')}}</span>
+        fxFlex="60%">{{ recurringDepositAccountData.recurringFrequency}} {{(recurringDepositAccountData.recurringFrequencyType | find:recurringDepositsAccountProductTemplate.periodFrequencyTypeOptions:'id':'value') | translateKey:'catalogs'}}</span>
     </div>
   </ng-container>
 
@@ -110,19 +110,19 @@
   <div fxFlexFill>
     <span fxFlex="40%">{{"labels.inputs.Minimum Deposit Term" | translate }}:</span>
     <span
-      fxFlex="60%">{{ (recurringDepositsAccountProductTemplate.minDepositTerm ? recurringDepositsAccountProductTemplate.minDepositTerm: '') + ' ' + (this.recurringDepositsAccountProductTemplate.minDepositTermType ? this.recurringDepositsAccountProductTemplate.minDepositTermType.value: '') }}</span>
+      fxFlex="60%">{{ (recurringDepositsAccountProductTemplate.minDepositTerm ? recurringDepositsAccountProductTemplate.minDepositTerm: '')}} {{(this.recurringDepositsAccountProductTemplate.minDepositTermType ? this.recurringDepositsAccountProductTemplate.minDepositTermType.value: '') | translateKey:'catalogs'}}</span>
   </div>
 
   <div fxFlexFill>
     <span fxFlex="40%">{{"labels.inputs.In Multiples Of" | translate }}:</span>
     <span
-      fxFlex="60%">{{ (recurringDepositsAccountProductTemplate.inMultiplesOfDepositTerm ? recurringDepositsAccountProductTemplate.inMultiplesOfDepositTerm: '') + ' ' + (this.recurringDepositsAccountProductTemplate.inMultiplesOfDepositTermType ? this.recurringDepositsAccountProductTemplate.inMultiplesOfDepositTermType.value: '') }}</span>
+      fxFlex="60%">{{ (recurringDepositsAccountProductTemplate.inMultiplesOfDepositTerm ? recurringDepositsAccountProductTemplate.inMultiplesOfDepositTerm: '')}} {{(this.recurringDepositsAccountProductTemplate.inMultiplesOfDepositTermType ? this.recurringDepositsAccountProductTemplate.inMultiplesOfDepositTermType.value: '') | translateKey:'catalogs'}}</span>
   </div>
 
   <div fxFlexFill>
     <span fxFlex="40%">{{"labels.inputs.Maximum Deposit Term" | translate }}</span>
     <span
-      fxFlex="60%">{{ (recurringDepositsAccountProductTemplate.maxDepositTerm ? recurringDepositsAccountProductTemplate.maxDepositTerm: '') + ' ' + (this.recurringDepositsAccountProductTemplate.maxDepositTermType ? this.recurringDepositsAccountProductTemplate.maxDepositTermType.value: '') }}</span>
+      fxFlex="60%">{{ (recurringDepositsAccountProductTemplate.maxDepositTerm ? recurringDepositsAccountProductTemplate.maxDepositTerm: '')}} {{(this.recurringDepositsAccountProductTemplate.maxDepositTermType ? this.recurringDepositsAccountProductTemplate.maxDepositTermType.value: '') | translateKey:'catalogs'}}</span>
   </div>
 
 
@@ -163,17 +163,17 @@
       <ng-container matColumnDef="period">
         <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Period" | translate }} </th>
         <td mat-cell *matCellDef="let chartSlab">
-          {{chartSlab.fromPeriod}}-{{chartSlab.toPeriod}}&nbsp;{{chartSlab.periodType.value}}</td>
+          {{chartSlab.fromPeriod}} - {{chartSlab.toPeriod}}&nbsp;{{chartSlab.periodType.value | translateKey:'catalogs'}}</td>
       </ng-container>
 
       <ng-container matColumnDef="amountRange">
         <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount Range" | translate }} </th>
-        <td mat-cell *matCellDef="let chartSlab">{{chartSlab.amountRangeFrom}}-{{chartSlab.amountRangeTo}}</td>
+        <td mat-cell *matCellDef="let chartSlab">{{chartSlab.amountRangeFrom | formatNumber}} - {{chartSlab.amountRangeTo | formatNumber}}</td>
       </ng-container>
 
       <ng-container matColumnDef="interest">
         <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Interest" | translate }} </th>
-        <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.annualInterestRate }} </td>
+        <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.annualInterestRate | formatNumber }} %</td>
       </ng-container>
 
       <ng-container matColumnDef="description">
@@ -292,14 +292,14 @@
       <ng-container matColumnDef="chargeCalculationType">
         <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Type" | translate }} </th>
         <td mat-cell *matCellDef="let charge">
-          {{ charge.chargeCalculationType.value }}
+          {{ charge.chargeCalculationType.value | translateKey:'catalogs' }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="amount">
         <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount" | translate }} </th>
         <td mat-cell *matCellDef="let charge">
-          {{ charge.amount }}
+          {{ charge.amount | formatNumber }}
         </td>
       </ng-container>
 

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-settings-step/recurring-deposits-account-settings-step.component.html

@@ -27,7 +27,7 @@
       <mat-select formControlName="lockinPeriodFrequencyType">
         <mat-option *ngFor="let lockinPeriodFrequencyType of lockinPeriodFrequencyTypeData"
           [value]="lockinPeriodFrequencyType.id">
-          {{ lockinPeriodFrequencyType.value }}
+          {{ lockinPeriodFrequencyType.value | translateKey:'catalogs' }}
         </mat-option>
       </mat-select>
     </mat-form-field>
@@ -53,7 +53,7 @@
       <mat-label>{{"labels.inputs.Type" | translate }}</mat-label>
       <mat-select formControlName="depositPeriodFrequencyId" required>
         <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
-          {{ periodFrequencyType.value }}
+          {{ periodFrequencyType.value | translateKey:'catalogs' }}
         </mat-option>
       </mat-select>
     </mat-form-field>
@@ -85,7 +85,7 @@
         <mat-label>{{"labels.inputs.Type" | translate }}</mat-label>
         <mat-select formControlName="recurringFrequencyType" required>
           <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
-            {{ periodFrequencyType.value }}
+            {{ periodFrequencyType.value | translateKey:'catalogs' }}
           </mat-option>
         </mat-select>
         <mat-error>
@@ -94,7 +94,6 @@
       </mat-form-field>
     </ng-container>
 
-
     <mat-divider fxFlex="98%"></mat-divider>
 
     <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Minimum Deposit Term" | translate }}</h4>
@@ -111,7 +110,7 @@
       <mat-label>{{"labels.inputs.Frequency Type" | translate }}</mat-label>
       <mat-select formControlName="minDepositTermTypeId" required>
         <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
-          {{ periodFrequencyType.value }}
+          {{ periodFrequencyType.value | translateKey:'catalogs' }}
         </mat-option>
       </mat-select>
       <mat-error>
@@ -130,7 +129,7 @@
       <mat-label>{{"labels.inputs.Type" | translate }}</mat-label>
       <mat-select formControlName="inMultiplesOfDepositTermTypeId">
         <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
-          {{ periodFrequencyType.value }}
+          {{ periodFrequencyType.value | translateKey:'catalogs' }}
         </mat-option>
       </mat-select>
     </mat-form-field>
@@ -146,7 +145,7 @@
       <mat-label>{{"labels.inputs.Type" | translate }}</mat-label>
       <mat-select formControlName="maxDepositTermTypeId">
         <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
-          {{ periodFrequencyType.value }}
+          {{ periodFrequencyType.value | translateKey:'catalogs' }}
         </mat-option>
       </mat-select>
     </mat-form-field>
@@ -169,7 +168,7 @@
       <mat-select formControlName="preClosurePenalInterestOnTypeId">
         <mat-option *ngFor="let preClosurePenalInterestOnType of preClosurePenalInterestOnTypeData"
           [value]="preClosurePenalInterestOnType.id">
-          {{ preClosurePenalInterestOnType.value }}
+          {{ preClosurePenalInterestOnType.value | translateKey:'catalogs' }}
         </mat-option>
       </mat-select>
     </mat-form-field>

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-settings-step/recurring-deposits-account-settings-step.component.ts

@@ -15,6 +15,7 @@ import { SettingsService } from 'app/settings/settings.service';
 })
 export class RecurringDepositsAccountSettingsStepComponent implements OnInit, OnChanges {
 
+  @Input() isNew = true;
   @Input() recurringDepositsAccountTemplate: any;
   @Input() recurringDepositsAccountProductTemplate: any;
 
@@ -44,32 +45,36 @@ export class RecurringDepositsAccountSettingsStepComponent implements OnInit, On
   }
 
   ngOnChanges() {
-    if (this.recurringDepositsAccountProductTemplate) {
+    const recurringDepositsAccount: any = this.isNew ? this.recurringDepositsAccountProductTemplate : this.recurringDepositsAccountTemplate;
+    if (recurringDepositsAccount) {
       this.recurringDepositAccountSettingsForm.patchValue({
-        'isMandatoryDeposit': this.recurringDepositsAccountProductTemplate.isMandatoryDeposit,
-        'adjustAdvanceTowardsFuturePayments': this.recurringDepositsAccountProductTemplate.adjustAdvanceTowardsFuturePayments,
-        'allowWithdrawal': this.recurringDepositsAccountProductTemplate.allowWithdrawal,
-        'lockinPeriodFrequency': this.recurringDepositsAccountProductTemplate.lockinPeriodFrequency,
-        'lockinPeriodFrequencyType': this.recurringDepositsAccountProductTemplate.lockinPeriodFrequencyType ? this.recurringDepositsAccountProductTemplate.lockinPeriodFrequencyType.id : '',
-        'minDepositTerm': this.recurringDepositsAccountProductTemplate.minDepositTerm,
-        'minDepositTermTypeId': this.recurringDepositsAccountProductTemplate.minDepositTermType ? this.recurringDepositsAccountProductTemplate.minDepositTermType.id : '',
-        'inMultiplesOfDepositTerm': this.recurringDepositsAccountProductTemplate.inMultiplesOfDepositTerm,
-        '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,
-        'depositPeriod': this.recurringDepositsAccountProductTemplate.minDepositTerm,
-        'depositPeriodFrequencyId': this.recurringDepositsAccountProductTemplate.minDepositTermType.id
+        'isMandatoryDeposit': recurringDepositsAccount.isMandatoryDeposit,
+        'adjustAdvanceTowardsFuturePayments': recurringDepositsAccount.adjustAdvanceTowardsFuturePayments,
+        'allowWithdrawal': recurringDepositsAccount.allowWithdrawal,
+        'lockinPeriodFrequency': recurringDepositsAccount.lockinPeriodFrequency,
+        'lockinPeriodFrequencyType': recurringDepositsAccount.lockinPeriodFrequencyType ? recurringDepositsAccount.lockinPeriodFrequencyType.id : '',
+        'minDepositTerm': recurringDepositsAccount.minDepositTerm,
+        'minDepositTermTypeId': recurringDepositsAccount.minDepositTermType ? recurringDepositsAccount.minDepositTermType.id : '',
+        'inMultiplesOfDepositTerm': recurringDepositsAccount.inMultiplesOfDepositTerm,
+        'inMultiplesOfDepositTermTypeId': recurringDepositsAccount.inMultiplesOfDepositTermType ? recurringDepositsAccount.inMultiplesOfDepositTermType.id : '',
+        'maxDepositTerm': recurringDepositsAccount.maxDepositTerm,
+        'maxDepositTermTypeId': recurringDepositsAccount.maxDepositTermType ? recurringDepositsAccount.maxDepositTermType.id : '',
+        'preClosurePenalApplicable': recurringDepositsAccount.preClosurePenalApplicable,
+        'preClosurePenalInterest': recurringDepositsAccount.preClosurePenalInterest,
+        'preClosurePenalInterestOnTypeId': recurringDepositsAccount.preClosurePenalInterestOnType ? recurringDepositsAccount.preClosurePenalInterestOnType.id : '',
+        'minBalanceForInterestCalculation': recurringDepositsAccount.minBalanceForInterestCalculation,
+        'depositPeriod': recurringDepositsAccount.minDepositTerm,
+        'depositPeriodFrequencyId': recurringDepositsAccount.minDepositTermType.id,
+        'expectedFirstDepositOnDate': recurringDepositsAccount.expectedFirstDepositOnDate && new Date(recurringDepositsAccount.expectedFirstDepositOnDate),
+        'recurringFrequency': recurringDepositsAccount.recurringFrequency,
+        'recurringFrequencyType': recurringDepositsAccount.recurringFrequencyType ? recurringDepositsAccount.recurringFrequencyType.id : ''
       });
-      if (this.recurringDepositsAccountProductTemplate.withHoldTax) {
+      if (recurringDepositsAccount.withHoldTax) {
         this.recurringDepositAccountSettingsForm.addControl('withHoldTax', new UntypedFormControl(false));
         this.recurringDepositAccountSettingsForm.get('withHoldTax').valueChanges.subscribe((value: boolean) => {
           if (value) {
             this.recurringDepositAccountSettingsForm.addControl('taxGroupId', new UntypedFormControl({ value: '', disabled: true }));
-            this.recurringDepositAccountSettingsForm.get('taxGroupId').patchValue(this.recurringDepositsAccountProductTemplate.taxGroup && this.recurringDepositsAccountProductTemplate.taxGroup.name);
+            this.recurringDepositAccountSettingsForm.get('taxGroupId').patchValue(recurringDepositsAccount.taxGroup && recurringDepositsAccount.taxGroup.name);
           } else {
             this.recurringDepositAccountSettingsForm.removeControl('taxGroupId');
           }
@@ -78,8 +83,8 @@ export class RecurringDepositsAccountSettingsStepComponent implements OnInit, On
       } else {
         this.recurringDepositAccountSettingsForm.removeControl('withHoldTax');
       }
-      this.taxGroup = this.recurringDepositsAccountProductTemplate.taxGroup;
-      this.setOptions();
+      this.taxGroup = recurringDepositsAccount.taxGroup;
+      this.setOptions(recurringDepositsAccount);
     }
   }
 
@@ -127,10 +132,10 @@ export class RecurringDepositsAccountSettingsStepComponent implements OnInit, On
   /**
    * Sets all select dropdown options.
    */
-  setOptions() {
-    this.lockinPeriodFrequencyTypeData = this.recurringDepositsAccountProductTemplate.lockinPeriodFrequencyTypeOptions;
-    this.periodFrequencyTypeData = this.recurringDepositsAccountProductTemplate.periodFrequencyTypeOptions;
-    this.preClosurePenalInterestOnTypeData = this.recurringDepositsAccountProductTemplate.preClosurePenalInterestOnTypeOptions;
+  setOptions(recurringDepositsAccount: any) {
+    this.lockinPeriodFrequencyTypeData = recurringDepositsAccount.lockinPeriodFrequencyTypeOptions;
+    this.periodFrequencyTypeData = recurringDepositsAccount.periodFrequencyTypeOptions;
+    this.preClosurePenalInterestOnTypeData = recurringDepositsAccount.preClosurePenalInterestOnTypeOptions;
   }
 
   /**

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-terms-step/recurring-deposits-account-terms-step.component.html

@@ -7,7 +7,7 @@
       <mat-select formControlName="interestCompoundingPeriodType" required>
         <mat-option *ngFor="let interestCompoundingPeriodType of interestCompoundingPeriodTypeData"
           [value]="interestCompoundingPeriodType.id">
-          {{ interestCompoundingPeriodType.value }}
+          {{ interestCompoundingPeriodType.value | translateKey:'catalogs' }}
         </mat-option>
       </mat-select>
       <mat-error>
@@ -20,7 +20,7 @@
       <mat-select formControlName="interestPostingPeriodType" required>
         <mat-option *ngFor="let interestPostingPeriodType of interestPostingPeriodTypeData"
           [value]="interestPostingPeriodType.id">
-          {{ interestPostingPeriodType.value }}
+          {{ interestPostingPeriodType.value | translateKey:'catalogs' }}
         </mat-option>
       </mat-select>
       <mat-error>
@@ -33,7 +33,7 @@
       <mat-select formControlName="interestCalculationType" required>
         <mat-option *ngFor="let interestCalculationType of interestCalculationTypeData"
           [value]="interestCalculationType.id">
-          {{ interestCalculationType.value }}
+          {{ interestCalculationType.value | translateKey:'catalogs' }}
         </mat-option>
       </mat-select>
       <mat-error>
@@ -46,7 +46,7 @@
       <mat-select formControlName="interestCalculationDaysInYearType" required>
         <mat-option *ngFor="let interestCalculationDaysInYearType of interestCalculationDaysInYearTypeData"
           [value]="interestCalculationDaysInYearType.id">
-          {{ interestCalculationDaysInYearType.value }}
+          {{ interestCalculationDaysInYearType.value | translateKey:'catalogs' }}
         </mat-option>
       </mat-select>
       <mat-error>

src/app/deposits/recurring-deposits/recurring-deposits-account-view/general-tab/general-tab.component.html

@@ -38,9 +38,9 @@
         </tr>
         <tr>
           <td>{{"labels.inputs.Deposit Frequency" | translate }}</td>
-          <td><span>{{recurringDepositsAccountData.recurringFrequency}}
-              &nbsp;{{recurringDepositsAccountData.recurringFrequencyType.value}}
-            </span></td>
+          <td><span class="m-r-5">{{recurringDepositsAccountData.recurringFrequency}}</span>
+            {{recurringDepositsAccountData.recurringFrequencyType.value | translateKey:'catalogs'}}
+          </td>
         </tr>
         <tr *ngIf="recurringDepositsAccountData.minBalanceForInterestCalculation">
           <td> {{"labels.inputs.Balance Required for Interest Calculation" | translate }}</td>
@@ -189,13 +189,13 @@
         </tr>
         <tr>
           <td>{{"labels.inputs.Rate of Interest" | translate }}</td>
-          <td>
-            <span>{{recurringDepositsAccountData.nominalAnnualInterestRate}}</span>
+          <td class="r-amount">
+            <span>{{recurringDepositsAccountData.nominalAnnualInterestRate | formatNumber}} %</span>
           </td>
         </tr>
         <tr *ngIf="recurringDepositsAccountData.maturityDate">
           <td>{{"labels.inputs.Maturity Amount" | translate }}</td>
-          <td>
+          <td class="r-amount">
             <span>{{ recurringDepositsAccountData.maturityAmount | currency:currency.code:'symbol-narrow':'1.2-2'}}</span>
           </td>
         </tr>
@@ -217,7 +217,7 @@
         <tr>
           <td> {{"labels.inputs.Deposits Frequency" | translate }} </td>
           <td>
-            {{ recurringDepositsAccountData.recurringFrequency }}&nbsp;{{ recurringDepositsAccountData.recurringFrequencyType.value }}
+            {{ recurringDepositsAccountData.recurringFrequency }}&nbsp;{{ recurringDepositsAccountData.recurringFrequencyType.value | translateKey:'catalogs' }}
           </td>
         </tr>
         <tr *ngIf="recurringDepositsAccountData.summary.totalInterestEarned">
@@ -242,28 +242,28 @@
       <tbody>
         <tr>
           <td>{{"labels.inputs.Interest Rate" | translate }}</td>
-          <td class="r-amount">{{recurringDepositsAccountData.nominalAnnualInterestRate}}%</td>
+          <td class="r-amount">{{recurringDepositsAccountData.nominalAnnualInterestRate | formatNumber}} %</td>
         </tr>
         <tr>
           <td>{{"labels.inputs.Interest Compounding Period" | translate }}</td>
-          <td><span>{{recurringDepositsAccountData.interestCompoundingPeriodType.value}}</span></td>
+          <td><span>{{recurringDepositsAccountData.interestCompoundingPeriodType.value | translateKey:'catalogs'}}</span></td>
         </tr>
         <tr>
           <td>{{"labels.inputs.Interest Posting Period" | translate }}</td>
-          <td><span>{{recurringDepositsAccountData.interestPostingPeriodType.value}}</span></td>
+          <td><span>{{recurringDepositsAccountData.interestPostingPeriodType.value | translateKey:'catalogs'}}</span></td>
         </tr>
         <tr>
           <td>{{"labels.inputs.Interest calculated using" | translate }}</td>
-          <td><span>{{recurringDepositsAccountData.interestCalculationType.value}}</span></td>
+          <td><span>{{recurringDepositsAccountData.interestCalculationType.value | translateKey:'catalogs'}}</span></td>
         </tr>
         <tr>
           <td>{{"labels.inputs.Days in Year" | translate }}</td>
-          <td><span>{{recurringDepositsAccountData.interestCalculationDaysInYearType.value}}</span></td>
+          <td><span>{{recurringDepositsAccountData.interestCalculationDaysInYearType.value | translateKey:'catalogs'}}</span></td>
         </tr>
         <tr *ngIf="recurringDepositsAccountData.preClosurePenalApplicable">
           <td>{{"labels.inputs.Pre-closure penal Interest (less)" | translate }}</td>
           <td><span>{{recurringDepositsAccountData.preClosurePenalInterest}} % on
-              {{recurringDepositsAccountData.preClosurePenalInterestOnType.value}}</span></td>
+              {{recurringDepositsAccountData.preClosurePenalInterestOnType.value | translateKey:'catalogs'}}</span></td>
         </tr>
       </tbody>
     </table>
@@ -275,24 +275,24 @@
       <tbody>
         <tr>
           <td>{{"labels.inputs.Interest Compounding Period" | translate }}</td>
-          <td><span>{{recurringDepositsAccountData.interestCompoundingPeriodType.value}}</span></td>
+          <td><span>{{recurringDepositsAccountData.interestCompoundingPeriodType.value | translateKey:'catalogs'}}</span></td>
         </tr>
         <tr>
           <td>{{"labels.inputs.Interest Posting Period" | translate }}</td>
-          <td><span>{{recurringDepositsAccountData.interestPostingPeriodType.value}}</span></td>
+          <td><span>{{recurringDepositsAccountData.interestPostingPeriodType.value | translateKey:'catalogs'}}</span></td>
         </tr>
         <tr>
           <td>{{"labels.inputs.Interest calculated using" | translate }}</td>
-          <td><span>{{recurringDepositsAccountData.interestCalculationType.value}}</span></td>
+          <td><span>{{recurringDepositsAccountData.interestCalculationType.value | translateKey:'catalogs'}}</span></td>
         </tr>
         <tr>
           <td>{{"labels.inputs.Days in Year" | translate }}</td>
-          <td><span>{{recurringDepositsAccountData.interestCalculationDaysInYearType.value}}</span></td>
+          <td><span>{{recurringDepositsAccountData.interestCalculationDaysInYearType.value | translateKey:'catalogs'}}</span></td>
         </tr>
         <tr *ngIf="recurringDepositsAccountData.preClosurePenalApplicable">
           <td>{{"labels.inputs.Pre-closure penal Interest (less)" | translate }}</td>
           <td><span>{{recurringDepositsAccountData.preClosurePenalInterest}} % on
-              {{recurringDepositsAccountData.preClosurePenalInterestOnType.value}}</span></td>
+              {{recurringDepositsAccountData.preClosurePenalInterestOnType.value | translateKey:'catalogs'}}</span></td>
         </tr>
         <tr *ngIf="recurringDepositsAccountData.witdHoldTax">
           <td> {{"labels.inputs.Witdhold Tax Group" | translate }} </td>

src/app/deposits/recurring-deposits/recurring-deposits-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.html

@@ -13,17 +13,17 @@
       <ng-container matColumnDef="period">
         <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Period" | translate }} </th>
         <td mat-cell *matCellDef="let chartSlab">
-          {{chartSlab.fromPeriod}}-{{chartSlab.toPeriod}}&nbsp;{{chartSlab.periodType.value}}</td>
+          {{chartSlab.fromPeriod}} - {{chartSlab.toPeriod}}&nbsp;{{chartSlab.periodType.value  | translateKey:'catalogs'}}</td>
       </ng-container>
 
       <ng-container matColumnDef="amountRange">
         <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount Range" | translate }} </th>
-        <td mat-cell *matCellDef="let chartSlab">{{chartSlab.amountRangeFrom}}-{{chartSlab.amountRangeTo}}</td>
+        <td mat-cell *matCellDef="let chartSlab">{{chartSlab.amountRangeFrom | formatNumber}} - {{chartSlab.amountRangeTo | formatNumber}}</td>
       </ng-container>
 
       <ng-container matColumnDef="interest">
         <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Interest" | translate }} </th>
-        <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.annualInterestRate }} </td>
+        <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.annualInterestRate | formatNumber }} %</td>
       </ng-container>
 
       <ng-container matColumnDef="description">
@@ -102,7 +102,7 @@
                 <ng-container matColumnDef="amount">
                   <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Interest" | translate }} </th>
                   <td mat-cell *matCellDef="let incentive">
-                    {{ incentive.amount }}
+                    {{ incentive.amount | formatNumber}}
                   </td>
                 </ng-container>
 

src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-buttons.config.ts

@@ -32,17 +32,22 @@ export class RecurringDepositsButtonsConfiguration {
         this.buttonsArray = [
           {
             name: 'Deposit',
-            icon: 'arrow-up',
+            icon: 'fa fa-arrow-up',
             taskPermissionName: 'DEPOSIT_RECURRINGDEPOSITACCOUNT'
           },
+          {
+            name: 'Withdrawal',
+            icon: 'fa fa-arrow-down',
+            taskPermissionName: 'WITHDRAWAL_RECURRINGDEPOSITACCOUNT'
+          },
           {
             name: 'Premature Close',
-            icon: 'arrow-left',
+            icon: 'fa fa-arrow-left',
             taskPermissionName: 'PREMATURECLOSE_RECURRINGDEPOSITACCOUNT'
           },
           {
             name: 'Calculate Interest',
-            icon: 'calculator',
+            icon: 'fa fa-calculator',
             taskPermissionName: 'CALCULATEINTEREST_RECURRINGDEPOSITACCOUNT'
           },
           {
@@ -56,12 +61,12 @@ export class RecurringDepositsButtonsConfiguration {
         this.buttonsArray = [
           {
             name: 'Modify Application',
-            icon: 'edit',
+            icon: 'fa fa-edit',
             taskPermissionName: 'UPDATE_RECURRINGDEPOSITACCOUNT'
           },
           {
             name: 'Approve',
-            icon: 'check',
+            icon: 'fa fa-check',
             taskPermissionName: 'APPROVE_RECURRINGDEPOSITACCOUNT'
           }
         ];
@@ -70,12 +75,12 @@ export class RecurringDepositsButtonsConfiguration {
         this.buttonsArray = [
           {
             name: 'Undo Approval',
-            icon: 'undo',
+            icon: 'fa fa-undo',
             taskPermissionName: 'APPROVALUNDO_RECURRINGDEPOSITACCOUNT'
           },
           {
             name: 'Activate',
-            icon: 'check',
+            icon: 'fa fa-check',
             taskPermissionName: 'ACTIVATE_RECURRINGDEPOSITACCOUNT'
           }
         ];
@@ -84,17 +89,17 @@ export class RecurringDepositsButtonsConfiguration {
         this.buttonsArray = [
           {
             name: 'Close',
-            icon: 'arrow-right',
+            icon: 'fa fa-arrow-right',
             taskPermissionName: 'CLOSE_RECURRINGDEPOSITACCOUNT'
           },
           {
             name: 'Calculate Interest',
-            icon: 'calculator',
+            icon: 'fa fa-calculator',
             taskPermissionName: 'CALCULATEINTEREST_RECURRINGDEPOSITACCOUNT'
           },
           {
             name: 'Post Interest',
-            icon: 'money',
+            icon: 'fa fa-money',
             taskPermissionName: 'POSTINTEREST_RECURRINGDEPOSITACCOUNT'
           }
         ];

src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/edit-transaction/edit-transaction.component.html

@@ -17,13 +17,10 @@
           </mat-error>
         </mat-form-field>
 
-        <mat-form-field>
-          <mat-label>{{"labels.inputs.Transaction Amount" | translate }}</mat-label>
-          <input type="number" formControlName="transactionAmount" required matInput />
-          <mat-error *ngIf="editTransactionForm.controls.transactionAmount.hasError('required')">
-            {{"labels.inputs.Transaction Amount" | translate }} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
-          </mat-error>
-        </mat-form-field>
+        <mifosx-input-amount [currency]="currency" [isRequired]="true"
+          [inputFormControl]="editTransactionForm.controls.transactionAmount"
+          [inputLabel]="'Transaction Amount'">
+        </mifosx-input-amount>
 
         <mat-form-field>
           <mat-label>{{"labels.inputs.Payment Type" | translate }}</mat-label>
@@ -33,12 +30,15 @@
             </mat-option>
           </mat-select>
         </mat-form-field>
-
-        <div fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column">
-          <mat-label fxFlexAlign="center">{{"labels.inputs.Show Payment Details" | translate }}</mat-label>
-          <button type="button" mat-mini-fab color="primary" (click)="addPaymentDetails()">
-            <fa-icon [icon]="!addPaymentDetailsFlag ? 'plus-circle' : 'minus-circle'" size="lg"></fa-icon>
-          </button>
+  
+        <div fxFlexFill>
+          <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
+            <mat-slide-toggle>
+              <div [className]="addPaymentDetailsFlag ? 'enabled' : 'disabled'">
+                <span class="m-l-10">{{'labels.inputs.Show Payment Details' | translate}}</span>
+              </div>
+            </mat-slide-toggle>
+          </span>
         </div>
 
         <mat-form-field *ngIf="editTransactionForm.controls['accountNumber']">

src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/edit-transaction/edit-transaction.component.ts

@@ -7,6 +7,7 @@ import { Dates } from 'app/core/utils/dates';
 /** Custom Services */
 import { RecurringDepositsService } from 'app/deposits/recurring-deposits/recurring-deposits.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Currency } from 'app/shared/models/general.model';
 
 /**
  * Edit Transaction component.
@@ -38,6 +39,7 @@ export class EditTransactionComponent implements OnInit {
   recurringDepositAccountId: string;
   /** Transaction Template */
   transactionTemplateData: any;
+  currency: Currency | null = null;
 
   /**
    * Retrieves the Recurring Deposit Account transaction template data from `resolve`.
@@ -56,6 +58,9 @@ export class EditTransactionComponent implements OnInit {
     private settingsService: SettingsService, ) {
     this.route.data.subscribe((data: { recurringDepositsAccountTransactionTemplate: any }) => {
       this.transactionTemplateData = data.recurringDepositsAccountTransactionTemplate;
+      if (this.transactionTemplateData.currency) {
+        this.currency = this.transactionTemplateData.currency;
+      }
       this.paymentTypeOptions = this.transactionTemplateData.paymentTypeOptions;
     });
     this.recurringDepositAccountId = this.route.parent.parent.snapshot.params['recurringDepositAccountId'];
@@ -121,6 +126,7 @@ export class EditTransactionComponent implements OnInit {
       dateFormat,
       locale
     };
+    data['transactionAmount'] = data['transactionAmount'] * 1;
     this.recurringDepositsService.executeRecurringDepositsAccountTransactionsCommand(this.recurringDepositAccountId, 'modify', data, this.transactionTemplateData.id)
       .subscribe(res => {
         this.router.navigate(['../'], { relativeTo: this.route });