Recurring Deposit products with i18n

src/app/accounting/chart-of-accounts/chart-of-accounts.component.html

@@ -44,7 +44,7 @@
 
       <ng-container matColumnDef="glAccountType">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Type" | translate}} </th>
-        <td mat-cell *matCellDef="let glAccount"> {{ glAccount.type.value }} </td>
+        <td mat-cell *matCellDef="let glAccount"> {{ 'labels.inputs.accounting.' + glAccount.type.value | translate }} </td>
       </ng-container>
 
       <ng-container matColumnDef="disabled">
@@ -104,7 +104,7 @@
           <li class="mat-tree-node">
             <button mat-icon-button disabled></button>
             <span (click)="viewGLAccountNode(node)">
-              <span *ngIf="node.glCode">{{ '(' + node.glCode + ')' }}</span>&nbsp;&nbsp;
+              <span *ngIf="node.glCode" class="m-r-10">{{ '(' + node.glCode + ')' }}</span>
               {{ node.name }}
             </span>
           </li>
@@ -117,7 +117,7 @@
                 <fa-icon class="mat-icon-rtl-mirror" icon="{{ nestedTreeControl.isExpanded(node) ? 'chevron-down' : 'chevron-right' }}"></fa-icon>
               </button>
               <span (click)="viewGLAccountNode(node)">
-                <span *ngIf="node.glCode">{{ '(' + node.glCode + ')' }}</span>&nbsp;&nbsp;
+                <span *ngIf="node.glCode" class="m-r-10">{{ '(' + node.glCode + ')' }}</span>
                 {{ node.name }}
               </span>
             </div>
@@ -160,7 +160,7 @@
             </div>
 
             <div fxFlex="50%">
-              {{ glAccount.type }}
+              {{ 'labels.inputs.accounting.' + glAccount.type | translate }}
             </div>
 
             <div fxFlex="50%" class="header">

src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.html

@@ -12,7 +12,7 @@
             <mat-label>{{"labels.inputs.Account Type" | translate}}</mat-label>
             <mat-select required formControlName="type">
               <mat-option *ngFor="let accountType of accountTypeData" [value]="accountType.id">
-                {{ accountType.value }}
+                {{ 'labels.inputs.accounting.' + accountType.value | translate }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="glAccountForm.controls.type.hasError('required')">

src/app/accounting/chart-of-accounts/gl-account-tree.service.ts

@@ -6,6 +6,8 @@ import { BehaviorSubject } from 'rxjs';
 
 /** Custom Components */
 import { GLAccountNode } from './gl-account-node.model';
+import { TranslateService } from '@ngx-translate/core';
+import { GLAccount } from 'app/shared/models/general.model';
 
 /**
  * GL Account tree service.
@@ -25,7 +27,8 @@ export class GlAccountTreeService {
    */
   get treeData(): GLAccountNode[] { return this.treeDataChange.value; }
 
-  constructor() {  }
+  constructor(
+    private translateService: TranslateService) {  }
 
   /**
    * Builds the chart of accounts tree and emits the value.
@@ -41,19 +44,22 @@ export class GlAccountTreeService {
    * @param {any} glAccountData Chart of accounts data.
    * @returns {GLAccountNode[]} Chart of accounts tree nodes.
    */
-  buildGLAccountTree(glAccountData: any): GLAccountNode[] {
+  buildGLAccountTree(glAccountData: GLAccount[]): GLAccountNode[] {
     const glAccountTree: GLAccountNode[] = [];
 
     // Header nodes
-    glAccountTree.push(new GLAccountNode('GL ACCOUNTS'));
-    glAccountTree[0].children.push(new GLAccountNode('ASSET'));
-    glAccountTree[0].children.push(new GLAccountNode('EQUITY'));
-    glAccountTree[0].children.push(new GLAccountNode('EXPENSE'));
-    glAccountTree[0].children.push(new GLAccountNode('INCOME'));
-    glAccountTree[0].children.push(new GLAccountNode('LIABILITY'));
+    glAccountTree.push(new GLAccountNode('ACCOUNTS'));
+    glAccountTree[0].children.push(new GLAccountNode(this.translateService.instant('labels.inputs.accounting.ASSET')));
+    glAccountTree[0].children.push(new GLAccountNode(this.translateService.instant('labels.inputs.accounting.EQUITY')));
+    glAccountTree[0].children.push(new GLAccountNode(this.translateService.instant('labels.inputs.accounting.EXPENSE')));
+    glAccountTree[0].children.push(new GLAccountNode(this.translateService.instant('labels.inputs.accounting.INCOME')));
+    glAccountTree[0].children.push(new GLAccountNode(this.translateService.instant('labels.inputs.accounting.LIABILITY')));
 
     // Sort by parent id (so that child nodes can be added properly)
-    glAccountData.sort((glAccountOne: any, glAccountTwo: any) => {
+    if (!glAccountData[0].parentId) {
+      glAccountData[0].parentId = 0;
+    }
+    glAccountData.sort((glAccountOne: GLAccount, glAccountTwo: GLAccount) => {
       if (!glAccountOne.parentId) {
         glAccountOne.parentId = 0;
       }
@@ -72,6 +78,7 @@ export class GlAccountTreeService {
     // and rest as children to respective parent nodes.
     for (const glAccount of glAccountData) {
       if (glAccount.parentId === 0) {
+        console.log(glAccount.type.value);
         if (glAccount.type.value === 'ASSET') {
           glAccountTree[0].children[0].children.push(glAccounts[glAccount.id]);
         } else if (glAccount.type.value === 'EQUITY') {

src/app/accounting/chart-of-accounts/view-gl-account/view-gl-account.component.html

@@ -42,7 +42,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ glAccount.type?.value }}
+          {{ 'labels.inputs.accounting.' + glAccount.type?.value | translate }}
         </div>
 
         <div fxFlex="50%" class="header">
@@ -99,6 +99,9 @@
 
     </mat-card-content>
 
+    <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <button type="button" color="primary" mat-raised-button (click)="goBack()">{{  "labels.buttons.Back" | translate}}</button>
+    </mat-card-actions>
   </mat-card>
 
 </div>

src/app/accounting/chart-of-accounts/view-gl-account/view-gl-account.component.ts

@@ -8,6 +8,7 @@ import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dial
 
 /** Custom Services */
 import { AccountingService } from '../../accounting.service';
+import { Location } from '@angular/common';
 
 /**
  * View gl account component.
@@ -32,7 +33,8 @@ export class ViewGlAccountComponent implements OnInit {
   constructor(private accountingService: AccountingService,
               private route: ActivatedRoute,
               private router: Router,
-              public dialog: MatDialog) {
+              private dialog: MatDialog,
+              private location: Location) {
     this.route.data.subscribe((data: { glAccountAndChartOfAccountsTemplate: any }) => {
       this.glAccount = data.glAccountAndChartOfAccountsTemplate;
     });
@@ -68,4 +70,8 @@ export class ViewGlAccountComponent implements OnInit {
       });
   }
 
+  goBack(): void {
+    this.location.back();
+  }
+
 }

src/app/core/utils/dates.ts

@@ -21,6 +21,10 @@ export class Dates {
     return datePipe.transform(timestamp, dateFormat);
   }
 
+  public formatDateAsString(value: Date, dateFormat: string): string {
+    return moment(value).format(dateFormat);
+  }
+
   public parseDate(value: any): Date {
     if (value instanceof Array) {
       return moment(value.join('-'), 'YYYY-MM-DD').toDate();

src/app/products/deposit-product-incentive-form-dialog/deposit-product-incentive-form-dialog.component.html

@@ -3,31 +3,31 @@
 <div mat-dialog-content [formGroup]="depositProductIncentiveForm" fxLayout="column">
 
   <mat-form-field>
-    <mat-label>Attribute</mat-label>
+    <mat-label>{{'labels.inputs.Attribute' | translate}}</mat-label>
     <mat-select formControlName="attributeName" required>
       <mat-option *ngFor="let attributeName of attributeNameData" [value]="attributeName.id">
         {{ attributeName.value }}
       </mat-option>
     </mat-select>
     <mat-error>
-      Attribute is <strong>required</strong>
+      {{'labels.inputs.Attribute' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
     </mat-error>
   </mat-form-field>
 
   <mat-form-field>
-    <mat-label>Condition</mat-label>
+    <mat-label>{{'labels.inputs.Condition' | translate}}</mat-label>
     <mat-select formControlName="conditionType" required>
       <mat-option *ngFor="let conditionType of conditionTypeData" [value]="conditionType.id">
         {{ conditionType.value }}
       </mat-option>
     </mat-select>
     <mat-error>
-      Condition is <strong>required</strong>
+      {{'labels.inputs.Condition' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
     </mat-error>
   </mat-form-field>
 
   <mat-form-field *ngIf="depositProductIncentiveForm.value.attributeName">
-    <mat-label>Value</mat-label>
+    <mat-label>{{'labels.inputs.Value' | translate}}</mat-label>
     <mat-select formControlName="attributeValue" *ngIf="depositProductIncentiveForm.value.attributeName !== 3" required>
       <mat-option *ngFor="let attributeValue of attributeValueData" [value]="attributeValue.id">
         {{ attributeValue.name }}
@@ -35,33 +35,35 @@
     </mat-select>
     <input type="number" matInput formControlName="attributeValue" *ngIf="depositProductIncentiveForm.value.attributeName === 3" required>
     <mat-error>
-      Value is <strong>required</strong>
+      {{'labels.inputs.Value' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
     </mat-error>
   </mat-form-field>
 
   <mat-form-field>
-    <mat-label>Type</mat-label>
+    <mat-label>{{'labels.inputs.Type' | translate}}</mat-label>
     <mat-select formControlName="incentiveType" required>
       <mat-option *ngFor="let incentiveType of incentiveTypeData" [value]="incentiveType.id">
         {{ incentiveType.value }}
       </mat-option>
     </mat-select>
     <mat-error>
-      Type is <strong>required</strong>
+      {{'labels.inputs.Type' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
     </mat-error>
   </mat-form-field>
 
   <mat-form-field>
-    <mat-label>Interest</mat-label>
+    <mat-label>{{'labels.inputs.Interest' | translate}}</mat-label>
     <input type="number" matInput formControlName="amount" required>
     <mat-error>
-      Interest is <strong>required</strong>
+      {{'labels.inputs.Interest' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
     </mat-error>
   </mat-form-field>
 
 </div>
 
 <mat-dialog-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
-  <button mat-raised-button mat-dialog-close> Cancel </button>
-  <button mat-raised-button color="primary" [mat-dialog-close]="{ data: depositProductIncentiveForm }" [disabled]="!depositProductIncentiveForm.valid || depositProductIncentiveForm.pristine">{{ layout.addButtonText }}</button>
+  <button mat-raised-button mat-dialog-close> {{'labels.buttons.Cancel' | translate}} </button>
+  <button mat-raised-button color="primary" [mat-dialog-close]="{ data: depositProductIncentiveForm }" [disabled]="!depositProductIncentiveForm.valid || depositProductIncentiveForm.pristine">
+    {{'labels.buttons.' + layout.addButtonText | translate }}
+  </button>
 </mat-dialog-actions>

src/app/products/deposit-product-incentive-form-dialog/deposit-product-incentive-form-dialog.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit, Inject } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'mifosx-deposit-product-incentive-form-dialog',
@@ -27,7 +28,8 @@ export class DepositProductIncentiveFormDialogComponent implements OnInit {
 
   constructor(public dialogRef: MatDialogRef<DepositProductIncentiveFormDialogComponent>,
               @Inject(MAT_DIALOG_DATA) public data: any,
-              private formBuilder: UntypedFormBuilder) {
+              private formBuilder: UntypedFormBuilder,
+            private translateService: TranslateService) {
     this.createDepositProductIncentiveForm();
     this.setConditionalControls();
     this.layout = { ...this.layout, ...data.layout };
@@ -56,8 +58,7 @@ export class DepositProductIncentiveFormDialogComponent implements OnInit {
         'entityType': this.data.entityType
       });
     }
-
-    this.title = `Incentives: ${this.entityTypeData.find((entityType: any) => this.depositProductIncentiveForm.get('entityType').value === entityType.id).value} Attributes`;
+    this.title = this.translateService.instant('labels.heading.Incentives');
   }
 
   setConditionalControls() {

src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-interest-rate-chart-step/fixed-deposit-product-interest-rate-chart-step.component.html

@@ -66,7 +66,7 @@
         </div>
 
         <div fxFlex="100%" *ngIf="chart.value.chartSlabs.length === 0">
-          <h3 class="mat-h3">It's required to add at least one Slab</h3>
+          <h3 class="mat-h3">It is required to add at least one Slab</h3>
         </div>
 
         <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="chart.value.chartSlabs"

src/app/products/products.component.html

@@ -13,8 +13,8 @@
             <mat-icon matListIcon>
               <fa-icon icon="briefcase" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Loan Products</h4>
-            <p matLine>Add new loan product or modify or inactivate loan product</p>
+            <h4 matLine>{{'labels.heading.Loan Products' | translate}}</h4>
+            <p matLine>{{'labels.text.Add new loan product or modify or inactivate loan product' | translate}}</p>
           </mat-list-item>
         </div>
 
@@ -23,8 +23,8 @@
             <mat-icon matListIcon>
               <fa-icon icon="briefcase" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Savings Products</h4>
-            <p matLine>Add new savings product or modify or inactivate savings product</p>
+            <h4 matLine>{{'labels.heading.Savings Products' | translate}}</h4>
+            <p matLine>{{'labels.text.Add new savings product or modify or inactivate savings product' | translate}}</p>
           </mat-list-item>
         </div>
 
@@ -33,8 +33,8 @@
             <mat-icon matListIcon>
               <fa-icon icon="briefcase" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Share Products</h4>
-            <p matLine>Add new share product or modify or inactivate share product</p>
+            <h4 matLine>{{'labels.heading.Share Products' | translate}}</h4>
+            <p matLine>{{'labels.text.Add new share product or modify or inactivate share product' | translate}}</p>
           </mat-list-item>
         </div>
 
@@ -43,8 +43,8 @@
             <mat-icon matListIcon>
               <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Charges</h4>
-            <p matLine>Define charges/penalties for loan products, savings and deposit products</p>
+            <h4 matLine>{{'labels.heading.Charges' | translate}}</h4>
+            <p matLine>{{'labels.text.Define charges/penalties for loan products, savings and deposit products' | translate}}</p>
           </mat-list-item>
         </div>
 
@@ -52,16 +52,16 @@
             <mat-icon matListIcon>
               <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Collateral Management</h4>
-            <p matLine>Define collaterals for Collateral Management</p>
+            <h4 matLine>{{'labels.heading.Collateral Management' | translate}}</h4>
+            <p matLine>{{'labels.text.Define collaterals for Collateral Management' | translate}}</p>
           </mat-list-item>
 
           <mat-list-item [routerLink]="['delinquency-bucket-configurations']" *mifosxHasPermission="'READ_DELINQUENCY_BUCKET'">
             <mat-icon matListIcon>
               <fa-icon icon="briefcase" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Delinquency Buckets</h4>
-            <p matLine>Define delinquency day ranges and bucket set for loan products</p>
+            <h4 matLine>{{'labels.heading.Delinquency Buckets' | translate}}</h4>
+            <p matLine>{{'labels.text.Define delinquency day ranges and bucket set for loan products' | translate}}</p>
           </mat-list-item>
 
         </mat-nav-list>
@@ -76,8 +76,8 @@
             <mat-icon matListIcon>
               <fa-icon icon="random" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Products Mix</h4>
-            <p matLine>Defines rules for taking multiple rules</p>
+            <h4 matLine>{{'labels.heading.Products Mix' | translate}}</h4>
+            <p matLine>{{'labels.text.Defines rules for taking multiple rules' | translate}}</p>
           </mat-list-item>
 
         <div #fixedDepositProducts>
@@ -85,8 +85,8 @@
             <mat-icon matListIcon>
               <fa-icon icon="briefcase" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Fixed Deposit Products</h4>
-            <p matLine>Add, modify or inactivate a Fixed deposit product</p>
+            <h4 matLine>{{'labels.heading.Fixed Deposit Products' | translate}}</h4>
+            <p matLine>{{'labels.text.Add, modify or inactivate a Fixed deposit product' | translate}}</p>
           </mat-list-item>
         </div>
 
@@ -95,8 +95,8 @@
             <mat-icon matListIcon>
               <fa-icon icon="briefcase" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Recurring Deposit Products</h4>
-            <p matLine>Add, modify or inactivate a Recurring Deposit product</p>
+            <h4 matLine>{{'labels.heading.Recurring Deposit Products' | translate}}</h4>
+            <p matLine>{{'labels.text.Add, modify or inactivate a Recurring Deposit product' | translate}}</p>
           </mat-list-item>
         </div>
 
@@ -104,16 +104,16 @@
             <mat-icon matListIcon>
               <fa-icon icon="cogs" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Manage Tax Configurations</h4>
-            <p matLine>Define Tax components and Tax groups</p>
+            <h4 matLine>{{'labels.heading.Manage Tax Configurations' | translate}}</h4>
+            <p matLine>{{'labels.text.Define Tax components and Tax groups' | translate}}</p>
           </mat-list-item>
 
           <mat-list-item [routerLink]="['floating-rates']" *mifosxHasPermission="'READ_FLOATINGRATE'">
             <mat-icon matListIcon>
               <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Floating Rates</h4>
-            <p matLine>Define floating rates for loan products</p>
+            <h4 matLine>{{'labels.heading.Floating Rates' | translate}}</h4>
+            <p matLine>{{'labels.text.Define floating rates for loan products' | translate}}</p>
           </mat-list-item>
 
         </mat-nav-list>

src/app/products/recurring-deposit-products/create-recurring-deposit-product/create-recurring-deposit-product.component.html

@@ -24,7 +24,7 @@
 
     <mat-step [stepControl]="recurringDepositProductDetailsForm">
 
-      <ng-template matStepLabel>DETAILS</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.DETAILS' | translate}}</ng-template>
 
       <mifosx-recurring-deposit-product-details-step  [recurringDepositProductsTemplate]="recurringDepositProductsTemplate">
         
@@ -34,7 +34,7 @@
 
     <mat-step [stepControl]="recurringDepositProductCurrencyForm">
 
-      <ng-template matStepLabel>CURRENCY</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.CURRENCY' | translate}}</ng-template>
 
       <mifosx-recurring-deposit-product-currency-step
         [recurringDepositProductsTemplate]="recurringDepositProductsTemplate">
@@ -44,7 +44,7 @@
 
     <mat-step [stepControl]="recurringDepositProductTermsForm">
 
-      <ng-template matStepLabel>TERMS</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.TERMS' | translate}}</ng-template>
 
       <mifosx-recurring-deposit-product-terms-step
         [recurringDepositProductsTemplate]="recurringDepositProductsTemplate">
@@ -54,7 +54,7 @@
 
     <mat-step [stepControl]="recurringDepositProductSettingsForm">
 
-      <ng-template matStepLabel>SETTINGS</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.SETTINGS' | translate}}</ng-template>
 
       <mifosx-recurring-deposit-product-settings-step
         [recurringDepositProductsTemplate]="recurringDepositProductsTemplate">
@@ -64,7 +64,7 @@
 
     <mat-step [stepControl]="recurringDepositProductInterestRateChartForm">
 
-      <ng-template matStepLabel>INTEREST RATE CHART</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.INTEREST RATE CHART' | translate}}</ng-template>
 
       <mifosx-recurring-deposit-product-interest-rate-chart-step
         [recurringDepositProductsTemplate]="recurringDepositProductsTemplate">
@@ -74,7 +74,7 @@
 
     <mat-step>
 
-      <ng-template matStepLabel>CHARGES</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.CHARGES' | translate}}</ng-template>
 
       <mifosx-recurring-deposit-product-charges-step
         [recurringDepositProductsTemplate]="recurringDepositProductsTemplate"
@@ -85,7 +85,7 @@
 
     <mat-step [stepControl]="recurringDepositProductAccountingForm">
 
-      <ng-template matStepLabel>ACCOUNTING</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.ACCOUNTING' | translate}}</ng-template>
 
       <mifosx-recurring-deposit-product-accounting-step
         [recurringDepositProductsTemplate]="recurringDepositProductsTemplate" [accountingRuleData]="accountingRuleData"
@@ -96,7 +96,7 @@
 
     <mat-step state="preview" *ngIf="recurringDepositProductFormValid" completed>
 
-      <ng-template matStepLabel>PREVIEW</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.PREVIEW' | translate}}</ng-template>
 
       <mifosx-recurring-deposit-product-preview-step
         [recurringDepositProductsTemplate]="recurringDepositProductsTemplate"

src/app/products/recurring-deposit-products/edit-recurring-deposit-product/edit-recurring-deposit-product.component.html

@@ -24,7 +24,7 @@
 
     <mat-step [stepControl]="recurringDepositProductDetailsForm">
 
-      <ng-template matStepLabel>DETAILS</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.DETAILS' | translate}}</ng-template>
 
       <mifosx-recurring-deposit-product-details-step
       [recurringDepositProductsTemplate]="recurringDepositProductsTemplate">
@@ -34,7 +34,7 @@
 
     <mat-step [stepControl]="recurringDepositProductCurrencyForm">
 
-      <ng-template matStepLabel>CURRENCY</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.CURRENCY' | translate}}</ng-template>
 
       <mifosx-recurring-deposit-product-currency-step
         [recurringDepositProductsTemplate]="recurringDepositProductsTemplate">
@@ -44,7 +44,7 @@
 
     <mat-step [stepControl]="recurringDepositProductTermsForm">
 
-      <ng-template matStepLabel>TERMS</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.TERMS' | translate}}</ng-template>
 
       <mifosx-recurring-deposit-product-terms-step
         [recurringDepositProductsTemplate]="recurringDepositProductsTemplate">
@@ -54,7 +54,7 @@
 
     <mat-step [stepControl]="recurringDepositProductSettingsForm">
 
-      <ng-template matStepLabel>SETTINGS</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.SETTINGS' | translate}}</ng-template>
 
       <mifosx-recurring-deposit-product-settings-step
         [recurringDepositProductsTemplate]="recurringDepositProductsTemplate">
@@ -64,7 +64,7 @@
 
     <mat-step [stepControl]="recurringDepositProductInterestRateChartForm">
 
-      <ng-template matStepLabel>INTEREST RATE CHART</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.INTEREST RATE CHART' | translate}}</ng-template>
 
       <mifosx-recurring-deposit-product-interest-rate-chart-step
         [recurringDepositProductsTemplate]="recurringDepositProductsTemplate">
@@ -74,7 +74,7 @@
 
     <mat-step>
 
-      <ng-template matStepLabel>CHARGES</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.CHARGES' | translate}}</ng-template>
 
       <mifosx-recurring-deposit-product-charges-step
         [recurringDepositProductsTemplate]="recurringDepositProductsTemplate"
@@ -85,7 +85,7 @@
 
     <mat-step [stepControl]="recurringDepositProductAccountingForm">
 
-      <ng-template matStepLabel>ACCOUNTING</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.ACCOUNTING' | translate}}</ng-template>
 
       <mifosx-recurring-deposit-product-accounting-step
         [recurringDepositProductsTemplate]="recurringDepositProductsTemplate" [accountingRuleData]="accountingRuleData"
@@ -96,7 +96,7 @@
 
     <mat-step state="preview" *ngIf="recurringDepositProductFormValidAndNotPrinstine" completed>
 
-      <ng-template matStepLabel>PREVIEW</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.PREVIEW' | translate}}</ng-template>
 
       <mifosx-recurring-deposit-product-preview-step
         [recurringDepositProductsTemplate]="recurringDepositProductsTemplate"

src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-accounting-step/recurring-deposit-product-accounting-step.component.html

@@ -5,7 +5,7 @@
     <mat-radio-group fxFlex="98%" fxLayout="row" fxLayoutGap="5%" fxLayout.lt-md="column"
       formControlName="accountingRule">
       <mat-radio-button *ngFor="let accountingRule of accountingRuleData; let i =  index" [value]="i+1">
-        {{ accountingRule }}
+        {{ 'labels.accounting.' + accountingRule | translate }}
       </mat-radio-button>
     </mat-radio-group>
 
@@ -17,26 +17,17 @@
 
       <mifosx-gl-account-selector fxFlex="48%"
         [inputFormControl]="recurringDepositProductAccountingForm.controls.savingsReferenceAccountId"
-        [glAccountList]="assetAccountData"
-        [required]="true"
-        [inputLabel]="'Saving reference'"
-      >
+        [glAccountList]="assetAccountData" [required]="true" [inputLabel]="'Saving reference'">
       </mifosx-gl-account-selector>
 
-      <mifosx-gl-account-selector fxFlex="48%" *ngIf="isAccrualAccounting()" 
+      <mifosx-gl-account-selector fxFlex="48%" *ngIf="isAccrualAccounting()"
         [inputFormControl]="recurringDepositProductAccountingForm.controls.feesReceivableAccountId"
-        [glAccountList]="assetAccountData"
-        [required]="true"
-        [inputLabel]="'Fees Receivable'"
-      >
+        [glAccountList]="assetAccountData" [required]="true" [inputLabel]="'Fees Receivable'">
       </mifosx-gl-account-selector>
 
-      <mifosx-gl-account-selector fxFlex="48%" *ngIf="isAccrualAccounting()" 
+      <mifosx-gl-account-selector fxFlex="48%" *ngIf="isAccrualAccounting()"
         [inputFormControl]="recurringDepositProductAccountingForm.controls.penaltiesReceivableAccountId"
-        [glAccountList]="assetAccountData"
-        [required]="true"
-        [inputLabel]="'Penalties Receivable'"
-      >
+        [glAccountList]="assetAccountData" [required]="true" [inputLabel]="'Penalties Receivable'">
       </mifosx-gl-account-selector>
 
       <mat-divider fxFlex="98%"></mat-divider>
@@ -45,26 +36,17 @@
 
       <mifosx-gl-account-selector fxFlex="48%"
         [inputFormControl]="recurringDepositProductAccountingForm.controls.savingsControlAccountId"
-        [glAccountList]="liabilityAccountData"
-        [required]="true"
-        [inputLabel]="'Saving control'"
-      >
+        [glAccountList]="liabilityAccountData" [required]="true" [inputLabel]="'Saving control'">
       </mifosx-gl-account-selector>
 
       <mifosx-gl-account-selector fxFlex="48%"
         [inputFormControl]="recurringDepositProductAccountingForm.controls.transfersInSuspenseAccountId"
-        [glAccountList]="liabilityAccountData"
-        [required]="true"
-        [inputLabel]="'Savings transfers in suspense'"
-      >
+        [glAccountList]="liabilityAccountData" [required]="true" [inputLabel]="'Savings transfers in suspense'">
       </mifosx-gl-account-selector>
 
       <mifosx-gl-account-selector fxFlex="48%" *ngIf="isAccrualAccounting()"
         [inputFormControl]="recurringDepositProductAccountingForm.controls.interestPayableAccountId"
-        [glAccountList]="liabilityAccountData"
-        [required]="true"
-        [inputLabel]="'Interest Payable'"
-      >
+        [glAccountList]="liabilityAccountData" [required]="true" [inputLabel]="'Interest Payable'">
       </mifosx-gl-account-selector>
 
       <mat-divider fxFlex="98%"></mat-divider>
@@ -73,10 +55,7 @@
 
       <mifosx-gl-account-selector fxFlex="48%"
         [inputFormControl]="recurringDepositProductAccountingForm.controls.interestOnSavingsAccountId"
-        [glAccountList]="expenseAccountData"
-        [required]="true"
-        [inputLabel]="'Interest on savings'"
-      >
+        [glAccountList]="expenseAccountData" [required]="true" [inputLabel]="'Interest on savings'">
       </mifosx-gl-account-selector>
 
       <mat-divider fxFlex="98%"></mat-divider>
@@ -85,164 +64,165 @@
 
       <mifosx-gl-account-selector fxFlex="48%"
         [inputFormControl]="recurringDepositProductAccountingForm.controls.incomeFromFeeAccountId"
-        [glAccountList]="incomeAccountData"
-        [required]="true"
-        [inputLabel]="'Income from fees'"
-      >
+        [glAccountList]="incomeAccountData" [required]="true" [inputLabel]="'Income from fees'">
       </mifosx-gl-account-selector>
 
       <mifosx-gl-account-selector fxFlex="48%"
         [inputFormControl]="recurringDepositProductAccountingForm.controls.incomeFromPenaltyAccountId"
-        [glAccountList]="incomeAccountData"
-        [required]="true"
-        [inputLabel]="'Income from penalties'"
-      >
+        [glAccountList]="incomeAccountData" [required]="true" [inputLabel]="'Income from penalties'">
       </mifosx-gl-account-selector>
 
       <mat-divider fxFlex="98%"></mat-divider>
 
-      <h3 fxFlex="23%" class="mat-h3">Advanced Accounting Rules</h3>
+      <h3 fxFlex="23%" class="mat-h3">{{'labels.heading.Advanced Accounting Rules' | translate}}</h3>
 
       <mat-checkbox fxFlex="73%" formControlName="advancedAccountingRules"></mat-checkbox>
 
       <div *ngIf="recurringDepositProductAccountingForm.value.advancedAccountingRules" fxFlexFill fxLayout="row wrap"
         fxLayoutGap="2%" fxLayout.lt-md="column">
 
-        <h4 fxFlex="33%" class="mat-h4">Configure Fund Sources for Payment Channels</h4>
+        <div fxFlex="100%" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+          <h4 fxFlex="63%" class="mat-h4">{{'labels.heading.Configure Fund Sources for Payment Channels' | translate}}
+          </h4>
 
-        <div fxFlex="63%">
-          <button type="button" mat-raised-button color="primary"
-            (click)="add('PaymentFundSource', paymentChannelToFundSourceMappings)">
-            <fa-icon icon="plus" class="m-r-10"></fa-icon>
-            Add
-          </button>
+          <div fxFlex="33%">
+            <button type="button" mat-raised-button color="primary"
+              (click)="add('PaymentFundSource', paymentChannelToFundSourceMappings)">
+              <fa-icon icon="plus" class="m-r-10"></fa-icon>
+              {{'labels.buttons.Add' | translate}}
+            </button>
+          </div>
+
+          <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="paymentChannelToFundSourceMappings.value"
+            *ngIf="paymentChannelToFundSourceMappings.value.length !== 0">
+
+            <ng-container matColumnDef="paymentTypeId">
+              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Payment Type' | translate}} </th>
+              <td mat-cell *matCellDef="let paymentFundSource">
+                {{ paymentFundSource.paymentTypeId | find:paymentTypeData:'id':'name' }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="fundSourceAccountId">
+              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Fund Source' | translate}} </th>
+              <td mat-cell *matCellDef="let paymentFundSource">
+                {{ paymentFundSource.fundSourceAccountId | find:assetAccountData:'id':'name' }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="actions">
+              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </th>
+              <td mat-cell *matCellDef="let paymentFundSource; let i = index">
+                <button mat-icon-button color="primary"
+                  (click)="edit('PaymentFundSource', paymentChannelToFundSourceMappings, i)">
+                  <fa-icon icon="edit"></fa-icon>
+                </button>
+                <button mat-icon-button color="warn" (click)="delete(paymentChannelToFundSourceMappings, i)">
+                  <fa-icon icon="trash"></fa-icon>
+                </button>
+              </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="paymentFundSourceDisplayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: paymentFundSourceDisplayedColumns;"></tr>
+
+          </table>
+        </div>
+        <div fxFlex="100%" *ngIf="existCharges()">
+
+          <h4 fxFlex="63%" class="mat-h4">{{'labels.heading.Map Fees to Specific Income Accounts' | translate}}</h4>
+
+          <div fxFlex="33%">
+            <button type="button" mat-raised-button color="primary"
+              (click)="add('FeesIncome', feeToIncomeAccountMappings)">
+              <fa-icon icon="plus" class="m-r-10"></fa-icon>
+              {{'labels.buttons.Add' | translate}}
+            </button>
+          </div>
+
+          <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="feeToIncomeAccountMappings.value"
+            *ngIf="feeToIncomeAccountMappings.value.length !== 0">
+
+            <ng-container matColumnDef="chargeId">
+              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Fees' | translate}} </th>
+              <td mat-cell *matCellDef="let feesIncome">
+                {{ feesIncome.chargeId | find:chargeData:'id':'name' }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="incomeAccountId">
+              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Income Account' | translate}} </th>
+              <td mat-cell *matCellDef="let feesIncome">
+                {{ feesIncome.incomeAccountId | find:incomeAccountData:'id':'name' }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="actions">
+              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </th>
+              <td mat-cell *matCellDef="let feesIncome; let i = index">
+                <button mat-icon-button color="primary" (click)="edit('FeesIncome', feeToIncomeAccountMappings, i)">
+                  <fa-icon icon="edit"></fa-icon>
+                </button>
+                <button mat-icon-button color="warn" (click)="delete(feeToIncomeAccountMappings, i)">
+                  <fa-icon icon="trash"></fa-icon>
+                </button>
+              </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns;"></tr>
+
+          </table>
         </div>
 
-        <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="paymentChannelToFundSourceMappings.value"
-          *ngIf="paymentChannelToFundSourceMappings.value.length !== 0">
+        <div fxFlex="100%" *ngIf="existCharges()">
 
-          <ng-container matColumnDef="paymentTypeId">
-            <th mat-header-cell *matHeaderCellDef> Payment Type </th>
-            <td mat-cell *matCellDef="let paymentFundSource">
-              {{ paymentFundSource.paymentTypeId | find:paymentTypeData:'id':'name' }}
-            </td>
-          </ng-container>
+          <h4 fxFlex="63%" class="mat-h4">{{'labels.heading.Map Penalties to Specific Income Accounts' | translate}}
+          </h4>
 
-          <ng-container matColumnDef="fundSourceAccountId">
-            <th mat-header-cell *matHeaderCellDef> Fund Source </th>
-            <td mat-cell *matCellDef="let paymentFundSource">
-              {{ paymentFundSource.fundSourceAccountId | find:assetAccountData:'id':'name' }}
-            </td>
-          </ng-container>
+          <div fxFlex="33%">
+            <button type="button" mat-raised-button color="primary"
+              (click)="add('PenaltyIncome', penaltyToIncomeAccountMappings)">
+              <fa-icon icon="plus" class="m-r-10"></fa-icon>
+              {{'labels.buttons.Add' | translate}}
+            </button>
+          </div>
 
-          <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef> Actions </th>
-            <td mat-cell *matCellDef="let paymentFundSource; let i = index">
-              <button mat-icon-button color="primary"
-                (click)="edit('PaymentFundSource', paymentChannelToFundSourceMappings, i)">
-                <fa-icon icon="edit"></fa-icon>
-              </button>
-              <button mat-icon-button color="warn" (click)="delete(paymentChannelToFundSourceMappings, i)">
-                <fa-icon icon="trash"></fa-icon>
-              </button>
-            </td>
-          </ng-container>
+          <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="penaltyToIncomeAccountMappings.value"
+            *ngIf="penaltyToIncomeAccountMappings.value.length !== 0">
 
-          <tr mat-header-row *matHeaderRowDef="paymentFundSourceDisplayedColumns"></tr>
-          <tr mat-row *matRowDef="let row; columns: paymentFundSourceDisplayedColumns;"></tr>
+            <ng-container matColumnDef="chargeId">
+              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Penalty' | translate}} </th>
+              <td mat-cell *matCellDef="let penaltyIncome">
+                {{ penaltyIncome.chargeId | find:penaltyData:'id':'name' }}
+              </td>
+            </ng-container>
 
-        </table>
+            <ng-container matColumnDef="incomeAccountId">
+              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Income Account' | translate}} </th>
+              <td mat-cell *matCellDef="let penaltyIncome">
+                {{ penaltyIncome.incomeAccountId | find:incomeAccountData:'id':'name' }}
+              </td>
+            </ng-container>
 
-        <h4 fxFlex="33%" class="mat-h4">Map Fees to Specific Income Accounts</h4>
+            <ng-container matColumnDef="actions">
+              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </th>
+              <td mat-cell *matCellDef="let penaltyIncome; let i = index">
+                <button mat-icon-button color="primary"
+                  (click)="edit('PenaltyIncome', penaltyToIncomeAccountMappings, i)">
+                  <fa-icon icon="edit"></fa-icon>
+                </button>
+                <button mat-icon-button color="warn" (click)="delete(penaltyToIncomeAccountMappings, i)">
+                  <fa-icon icon="trash"></fa-icon>
+                </button>
+              </td>
+            </ng-container>
 
-        <div fxFlex="63%">
-          <button type="button" mat-raised-button color="primary"
-            (click)="add('FeesIncome', feeToIncomeAccountMappings)">
-            <fa-icon icon="plus" class="m-r-10"></fa-icon>
-            Add
-          </button>
+            <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns;"></tr>
+
+          </table>
         </div>
-
-        <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="feeToIncomeAccountMappings.value"
-          *ngIf="feeToIncomeAccountMappings.value.length !== 0">
-
-          <ng-container matColumnDef="chargeId">
-            <th mat-header-cell *matHeaderCellDef> Fees </th>
-            <td mat-cell *matCellDef="let feesIncome">
-              {{ feesIncome.chargeId | find:chargeData:'id':'name' }}
-            </td>
-          </ng-container>
-
-          <ng-container matColumnDef="incomeAccountId">
-            <th mat-header-cell *matHeaderCellDef> Income Account </th>
-            <td mat-cell *matCellDef="let feesIncome">
-              {{ feesIncome.incomeAccountId | find:incomeAccountData:'id':'name' }}
-            </td>
-          </ng-container>
-
-          <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef> Actions </th>
-            <td mat-cell *matCellDef="let feesIncome; let i = index">
-              <button mat-icon-button color="primary" (click)="edit('FeesIncome', feeToIncomeAccountMappings, i)">
-                <fa-icon icon="edit"></fa-icon>
-              </button>
-              <button mat-icon-button color="warn" (click)="delete(feeToIncomeAccountMappings, i)">
-                <fa-icon icon="trash"></fa-icon>
-              </button>
-            </td>
-          </ng-container>
-
-          <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
-          <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns;"></tr>
-
-        </table>
-
-        <h4 fxFlex="33%" class="mat-h4">Map Penalties to Specific Income Accounts</h4>
-
-        <div fxFlex="63%">
-          <button type="button" mat-raised-button color="primary"
-            (click)="add('PenaltyIncome', penaltyToIncomeAccountMappings)">
-            <fa-icon icon="plus" class="m-r-10"></fa-icon>
-            Add
-          </button>
-        </div>
-
-
-        <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="penaltyToIncomeAccountMappings.value"
-          *ngIf="penaltyToIncomeAccountMappings.value.length !== 0">
-
-          <ng-container matColumnDef="chargeId">
-            <th mat-header-cell *matHeaderCellDef> Penalty </th>
-            <td mat-cell *matCellDef="let penaltyIncome">
-              {{ penaltyIncome.chargeId | find:penaltyData:'id':'name' }}
-            </td>
-          </ng-container>
-
-          <ng-container matColumnDef="incomeAccountId">
-            <th mat-header-cell *matHeaderCellDef> Income Account </th>
-            <td mat-cell *matCellDef="let penaltyIncome">
-              {{ penaltyIncome.incomeAccountId | find:incomeAccountData:'id':'name' }}
-            </td>
-          </ng-container>
-
-          <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef> Actions </th>
-            <td mat-cell *matCellDef="let penaltyIncome; let i = index">
-              <button mat-icon-button color="primary"
-                (click)="edit('PenaltyIncome', penaltyToIncomeAccountMappings, i)">
-                <fa-icon icon="edit"></fa-icon>
-              </button>
-              <button mat-icon-button color="warn" (click)="delete(penaltyToIncomeAccountMappings, i)">
-                <fa-icon icon="trash"></fa-icon>
-              </button>
-            </td>
-          </ng-container>
-
-          <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
-          <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns;"></tr>
-
-        </table>
-
       </div>
 
     </div>
@@ -252,12 +232,12 @@
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-      Previous
+      {{'labels.buttons.Previous' | translate}}
     </button>
     <button mat-raised-button matStepperNext [disabled]="!recurringDepositProductFormValid">
-      Next
+      {{'labels.buttons.Next' | translate}}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
 
-</form>
+</form>

src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-accounting-step/recurring-deposit-product-accounting-step.component.ts

@@ -8,6 +8,7 @@ import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.co
 import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
 import { SelectBase } from 'app/shared/form-dialog/formfield/model/select-base';
 import { Accounting } from 'app/core/utils/accounting';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'mifosx-recurring-deposit-product-accounting-step',
@@ -34,8 +35,9 @@ export class RecurringDepositProductAccountingStepComponent implements OnInit {
   feesPenaltyIncomeDisplayedColumns: string[] = ['chargeId', 'incomeAccountId', 'actions'];
 
   constructor(private formBuilder: UntypedFormBuilder,
-              public dialog: MatDialog,
-              private accounting: Accounting) {
+              private dialog: MatDialog,
+              private accounting: Accounting,
+            private translateService: TranslateService) {
     this.createrecurringDepositProductAccountingForm();
     this.setConditionalControls();
   }
@@ -120,6 +122,10 @@ export class RecurringDepositProductAccountingStepComponent implements OnInit {
     });
   }
 
+  existCharges(): boolean {
+    return (this.chargeData.length > 0);
+  }
+
   setConditionalControls() {
     this.recurringDepositProductAccountingForm.get('accountingRule').valueChanges
       .subscribe((accountingRule: any) => {
@@ -214,9 +220,12 @@ export class RecurringDepositProductAccountingStepComponent implements OnInit {
 
   getData(formType: string, values?: any) {
     switch (formType) {
-      case 'PaymentFundSource': return { title: 'Configure Fund Sources for Payment Channels', formfields: this.getPaymentFundSourceFormfields(values) };
-      case 'FeesIncome': return { title: 'Map Fees to Income Accounts', formfields: this.getFeesIncomeFormfields(values) };
-      case 'PenaltyIncome': return { title: 'Map Penalties to Specific Income Accounts', formfields: this.getPenaltyIncomeFormfields(values) };
+      case 'PaymentFundSource': return { title: this.translateService.instant('labels.heading.Configure Fund Sources for Payment Channels'),
+        formfields: this.getPaymentFundSourceFormfields(values) };
+      case 'FeesIncome': return { title: this.translateService.instant('labels.heading.Map Fees to Specific Income Accounts'),
+        formfields: this.getFeesIncomeFormfields(values) };
+      case 'PenaltyIncome': return { title: this.translateService.instant('labels.heading.Map Penalties to Specific Income Accounts'),
+        formfields: this.getPenaltyIncomeFormfields(values) };
     }
   }
 
@@ -224,7 +233,7 @@ export class RecurringDepositProductAccountingStepComponent implements OnInit {
     const formfields: FormfieldBase[] = [
       new SelectBase({
         controlName: 'paymentTypeId',
-        label: 'Payment Type',
+        label: this.translateService.instant('labels.inputs.Payment Type'),
         value: values ? values.paymentTypeId : this.paymentTypeData[0].id,
         options: { label: 'name', value: 'id', data: this.paymentTypeData },
         required: true,
@@ -232,7 +241,7 @@ export class RecurringDepositProductAccountingStepComponent implements OnInit {
       }),
       new SelectBase({
         controlName: 'fundSourceAccountId',
-        label: 'Fund Source',
+        label: this.translateService.instant('labels.inputs.Fund Source'),
         value: values ? values.fundSourceAccountId : this.assetAccountData[0].id,
         options: { label: 'name', value: 'id', data: this.assetAccountData },
         required: true,
@@ -246,7 +255,7 @@ export class RecurringDepositProductAccountingStepComponent implements OnInit {
     const formfields: FormfieldBase[] = [
       new SelectBase({
         controlName: 'chargeId',
-        label: 'Fees',
+        label: this.translateService.instant('labels.inputs.Fees'),
         value: values ? values.chargeId : this.chargeData[0].id,
         options: { label: 'name', value: 'id', data: this.chargeData },
         required: true,
@@ -254,7 +263,7 @@ export class RecurringDepositProductAccountingStepComponent implements OnInit {
       }),
       new SelectBase({
         controlName: 'incomeAccountId',
-        label: 'Income Account',
+        label: this.translateService.instant('labels.inputs.Income Account'),
         value: values ? values.incomeAccountId : this.incomeAccountData[0].id,
         options: { label: 'name', value: 'id', data: this.incomeAccountData },
         required: true,

src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-charges-step/recurring-deposit-product-charges-step.component.html

@@ -1,7 +1,7 @@
 <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
   <mat-form-field fxFlex="48%">
-    <mat-label>Charge</mat-label>
+    <mat-label>{{'labels.inputs.Charge' | translate}}</mat-label>
     <mat-select #charge>
       <mat-option *ngFor="let charge of chargeData | chargesFilter:chargesDataSource:currencyCode.value"
         [value]="charge">
@@ -13,7 +13,7 @@
   <div fxFlex="48%" fxFlexAlign="center">
     <button type="button" mat-raised-button color="primary" (click)="addCharge(charge)" [disabled]="!charge.value">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      Add
+      {{'labels.buttons.Add' | translate}}
     </button>
   </div>
 
@@ -21,35 +21,35 @@
     [hidden]="chargesDataSource.length === 0">
 
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef> Name </th>
+      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Name' | translate}} </th>
       <td mat-cell *matCellDef="let charge">
         {{ charge.name + ', ' + charge.currency.displaySymbol }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="chargeCalculationType">
-      <th mat-header-cell *matHeaderCellDef> Type </th>
+      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Type' | translate}} </th>
       <td mat-cell *matCellDef="let charge">
         {{ charge.chargeCalculationType.value }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="amount">
-      <th mat-header-cell *matHeaderCellDef> Amount </th>
+      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Amount' | translate}} </th>
       <td mat-cell *matCellDef="let charge">
         {{ charge.amount }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="chargeTimeType">
-      <th mat-header-cell *matHeaderCellDef> Collected On </th>
+      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Collected On' | translate}} </th>
       <td mat-cell *matCellDef="let charge">
         {{ charge.chargeTimeType.value }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="action">
-      <th mat-header-cell *matHeaderCellDef> Actions </th>
+      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </th>
       <td mat-cell *matCellDef="let charge">
         <button mat-icon-button color="warn" (click)="deleteCharge(charge)">
           <fa-icon icon="trash"></fa-icon>
@@ -67,10 +67,10 @@
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
     <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-    Previous
+    {{'labels.buttons.Previous' | translate}}
   </button>
   <button mat-raised-button matStepperNext>
-    Next
+    {{'labels.buttons.Next' | translate}}
     <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
   </button>
 </div>

src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-currency-step/recurring-deposit-product-currency-step.component.html

@@ -3,30 +3,30 @@
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Currency</mat-label>
+      <mat-label>{{'labels.inputs.Currency' | translate}}</mat-label>
       <mat-select formControlName="currencyCode" matTooltip = "The currency in which the deposit will be disbursed." required>
         <mat-option *ngFor="let currency of currencyData" [value]="currency.code">
           {{ currency.name }}
         </mat-option>
       </mat-select>
       <mat-error>
-        Currency is <strong>required</strong>
+        {{'labels.inputs.Currency' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Decimal Places</mat-label>
+      <mat-label>{{'labels.inputs.Decimal Places' | translate}}</mat-label>
       <input type="number" matInput formControlName="digitsAfterDecimal" matTooltip = "The number of decimal places to be used to track and report on deposits." required>
       <mat-error>
-        Decimal Places is <strong>required</strong>
+        {{'labels.inputs.Decimal Places' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Currency in multiples of</mat-label>
+      <mat-label>{{'labels.inputs.Currency in multiples of' | translate}}</mat-label>
       <input type="number" matInput formControlName="inMultiplesOf" matTooltip = "You can enter multiples of currency value. For example, if you put multiples of 100, the currency value will be rounded off to 200, 300, 400, etc.">
       <mat-error>
-        Currency in multiples of is <strong>required</strong>
+        {{'labels.inputs.Currency in multiples of' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
@@ -35,10 +35,10 @@
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-      Previous
+      {{'labels.buttons.Previous' | translate}}
     </button>
     <button mat-raised-button matStepperNext>
-      Next
+      {{'labels.buttons.Next' | translate}}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>

src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-details-step/recurring-deposit-product-details-step.component.html

@@ -3,26 +3,26 @@
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Product Name </mat-label>
+      <mat-label>{{'labels.inputs.Product Name' | translate}} </mat-label>
       <input matInput formControlName="name" matTooltip="The product name is a unique identifier for the lending product." required>
       <mat-error *ngIf="recurringDepositProductDetailsForm.controls.name.hasError('required')">
-        Product Name is <strong>required</strong>
+        {{'labels.inputs.Product Name' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Short Name</mat-label>
+      <mat-label>{{'labels.inputs.Short Name' | translate}}</mat-label>
       <input matInput formControlName="shortName" maxlength="4"  matTooltip="The short name is a unique identifier for the lending product." required>
       <mat-error *ngIf="recurringDepositProductDetailsForm.controls.shortName.hasError('required')">
-        Short Name is <strong>required</strong>
+        {{'labels.inputs.Short Name' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="98%">
-      <mat-label>Description</mat-label>
+      <mat-label>{{'labels.inputs.Description' | translate}}</mat-label>
       <textarea matInput formControlName="description" matTooltip="The description is used to provide additional information regarding the purpose and characteristics of the recurring deposit product."  cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
       <mat-error *ngIf="recurringDepositProductDetailsForm.controls.description.hasError('required')">
-        Description is <strong>required</strong>
+        {{'labels.inputs.Description' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
@@ -31,10 +31,10 @@
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-      Previous
+      {{'labels.buttons.Previous' | translate}}
     </button>
     <button mat-raised-button matStepperNext>
-      Next
+      {{'labels.buttons.Next' | translate}}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>

src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-interest-rate-chart-step/recurring-deposit-product-interest-rate-chart-step.component.html

@@ -2,192 +2,211 @@
 
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
-    <h3 fxFlex="13%" class="mat-h3">Interest Rate Charts</h3>
+    <h3 fxFlex="63%" class="mat-h3">{{ 'labels.heading.Interest Rate Charts' | translate}}</h3>
 
-    <div fxFlex="83%" fxLayout="row" fxLayoutAlign="start center">
+    <div fxFlex="33%" fxLayout="row" fxLayoutAlign="start center">
       <button type="button" mat-raised-button color="primary" (click)="addChart()">
         <fa-icon icon="plus" class="m-r-10"></fa-icon>
-        Add
+        {{ 'labels.buttons.Add' | translate}}
       </button>
     </div>
 
-    <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column" formArrayName="charts" *ngFor="let chart of charts.controls; let chartIndex = index">
+    <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column" formArrayName="charts"
+      *ngFor="let chart of charts.controls; let chartIndex = index">
 
       <mat-divider fxFlex="98%"></mat-divider>
 
       <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="chartIndex">
 
         <div fxFlex="98%" fxLayout="row" fxLayoutAlign="end center">
-          <button type="button" mat-icon-button color="warn" (click)="delete(charts, chartIndex)" matTooltip="Delete Interest Rate Chart" matTooltipPosition="left">
+          <button type="button" mat-icon-button color="warn" (click)="delete(charts, chartIndex)"
+            matTooltip="Delete Interest Rate Chart" matTooltipPosition="left">
             <fa-icon icon="trash"></fa-icon>
           </button>
         </div>
 
         <mat-form-field fxFlex="32%">
-          <mat-label >Name</mat-label>
-          <input matInput formControlName="name"  matTooltip="The name is a unique identifier for the chart." required>
+          <mat-label>{{ 'labels.inputs.Name' | translate}}</mat-label>
+          <input matInput formControlName="name" matTooltip="The name is a unique identifier for the chart." required>
         </mat-form-field>
 
         <mat-form-field fxFlex="31%" (click)="validFromDatePicker.open()">
-          <mat-label>Valid from Date</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="validFromDatePicker" formControlName="fromDate" required>
+          <mat-label>{{ 'labels.inputs.Start Date' | translate}}</mat-label>
+          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="validFromDatePicker"
+            formControlName="fromDate" required>
           <mat-datepicker-toggle matSuffix [for]="validFromDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #validFromDatePicker></mat-datepicker>
           <mat-error>
-            Valid from Date is <strong>required</strong>
+            {{ 'labels.inputs.Start Date' | translate}} {{'labels.commons.is' | translate}}
+            <strong>{{'labels.commons.required' | translate}}</strong>
           </mat-error>
         </mat-form-field>
 
         <mat-form-field fxFlex="31%" (click)="endDatePicker.open()">
-          <mat-label>End Date</mat-label>
+          <mat-label>{{ 'labels.inputs.End Date' | translate}}</mat-label>
           <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="endDatePicker" formControlName="endDate">
           <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #endDatePicker></mat-datepicker>
         </mat-form-field>
 
         <mat-form-field fxFlex="65%">
-          <mat-label >Description</mat-label>
-          <textarea matInput formControlName="description"  matTooltip="The description is used to provide additional information regarding the purpose and characteristics of the chart."></textarea>
+          <mat-label>{{ 'labels.inputs.Description' | translate}}</mat-label>
+          <textarea matInput formControlName="description"
+            matTooltip="The description is used to provide additional information regarding the purpose and characteristics of the chart."></textarea>
         </mat-form-field>
 
         <div fxFlex="31%" fxLayout="row" fxLayoutAlign="space-between center">
           <mat-checkbox labelPosition="before" formControlName="isPrimaryGroupingByAmount">
-            Is primary grouping by amount?
+            {{ 'labels.inputs.Is primary grouping by amount?' | translate}}
           </mat-checkbox>
+
+        </div>
+        <div fxFlex="100%" class="center">
           <button type="button" mat-raised-button color="primary" (click)="addChartSlab(chart.controls.chartSlabs)">
             <fa-icon icon="plus" class="m-r-10"></fa-icon>
-            Add Slab
+            {{ 'labels.buttons.Add Slab' | translate}}
           </button>
         </div>
 
         <div fxFlex="100%" *ngIf="chart.value.chartSlabs.length === 0">
-          <h3 class="mat-h3">It's required to add at least one Slab</h3>
+          <h3 class="mat-h3">{{ "labels.heading.It is required to add at least one Slab" | translate}}</h3>
         </div>
 
-        <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="chart.value.chartSlabs" *ngIf="chart.value.chartSlabs.length !== 0" multiTemplateDataRows>
+        <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="chart.value.chartSlabs"
+          *ngIf="chart.value.chartSlabs.length !== 0" multiTemplateDataRows>
 
           <ng-container matColumnDef="period">
-            <th mat-header-cell *matHeaderCellDef> Period </th>
+            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Period' | translate}} </th>
             <td mat-cell *matCellDef="let chartSlab">
-              {{ chartSlab.fromPeriod + ' - ' + chartSlab.toPeriod + ' ' + (chartSlab.periodType | find:periodTypeData:'id':'value') }}
+              {{ chartSlab.fromPeriod + ' - ' + chartSlab.toPeriod + ' ' + (chartSlab.periodType |
+              find:periodTypeData:'id':'value') }}
             </td>
           </ng-container>
 
           <ng-container matColumnDef="amountRange">
-            <th mat-header-cell *matHeaderCellDef> Amount Range </th>
+            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Amount Range' | translate}} </th>
             <td mat-cell *matCellDef="let chartSlab">
               {{ chartSlab.amountRangeFrom + ' - ' + chartSlab.amountRangeTo }}
             </td>
           </ng-container>
 
           <ng-container matColumnDef="annualInterestRate">
-            <th mat-header-cell *matHeaderCellDef> Interest </th>
+            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Interest' | translate}} </th>
             <td mat-cell *matCellDef="let chartSlab">
               {{ chartSlab.annualInterestRate }}
             </td>
           </ng-container>
 
           <ng-container matColumnDef="description">
-            <th mat-header-cell *matHeaderCellDef> Description </th>
+            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Description' | translate}} </th>
             <td mat-cell *matCellDef="let chartSlab">
               {{ chartSlab.description }}
             </td>
           </ng-container>
 
           <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef> Actions </th>
+            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Actions' | translate}} </th>
             <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
-              <button mat-icon-button color="primary" (click)="editChartSlab(chart.controls.chartSlabs, chartSlabIndex)">
+              <button mat-icon-button color="primary"
+                (click)="editChartSlab(chart.controls.chartSlabs, chartSlabIndex)">
                 <fa-icon icon="edit"></fa-icon>
               </button>
               <button mat-icon-button color="warn" (click)="delete(chart.controls.chartSlabs, chartSlabIndex)">
                 <fa-icon icon="trash"></fa-icon>
               </button>
-              <button mat-button color="primary" (click)="expandChartSlabIndex[chartIndex] = expandChartSlabIndex[chartIndex] === chartSlabIndex ? null : chartSlabIndex">
+              <button mat-button color="primary"
+                (click)="expandChartSlabIndex[chartIndex] = expandChartSlabIndex[chartIndex] === chartSlabIndex ? null : chartSlabIndex">
                 <span *ngIf="expandChartSlabIndex[chartIndex] !== chartSlabIndex">
                   <fa-icon icon="eye" class="m-r-10"></fa-icon>
-                  View Incentives
+                  {{ 'labels.buttons.View Incentives' | translate}}
                 </span>
                 <span *ngIf="expandChartSlabIndex[chartIndex] === chartSlabIndex">
                   <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
-                  Hide Incentives
+                  {{ 'labels.buttons.Hide Incentives' | translate}}
                 </span>
               </button>
             </td>
           </ng-container>
 
           <ng-container matColumnDef="incentives">
-            <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex" [attr.colspan]="chartSlabsDisplayedColumns[chartIndex].length">
+            <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex"
+              [attr.colspan]="chartSlabsDisplayedColumns[chartIndex].length">
 
-              <div fxLayout="row wrap" fxFlexFill class="incentives" [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex[chartIndex] ? 'expanded' : 'collapsed'">
+              <div fxLayout="row wrap" fxFlexFill class="incentives"
+                [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex[chartIndex] ? 'expanded' : 'collapsed'">
 
                 <mat-card fxLayout="row wrap" fxFlexFill>
 
-                  <h4 class="mat-h4" fxFlex="13%">
-                    Incentives
+                  <h4 class="mat-h4" fxFlex="63%">
+                    {{ 'labels.heading.Incentives' | translate}}
                   </h4>
 
-                  <div fxFlex="83%">
-                    <button mat-raised-button color="primary" (click)="addIncentive(getIncentives(chart.controls.chartSlabs, chartSlabIndex))">
+                  <div fxFlex="33%">
+                    <button mat-raised-button color="primary"
+                      (click)="addIncentive(getIncentives(chart.controls.chartSlabs, chartSlabIndex))">
                       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-                      Add
+                      {{ 'labels.buttons.Add' | translate}}
                     </button>
                   </div>
 
-                  <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="chartSlab.incentives" *ngIf="chartSlab.incentives.length">
+                  <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="chartSlab.incentives"
+                    *ngIf="chartSlab.incentives.length">
 
                     <ng-container matColumnDef="entityType">
-                      <th mat-header-cell *matHeaderCellDef> Entity Type </th>
+                      <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Entity Type' | translate}} </th>
                       <td mat-cell *matCellDef="let incentive">
                         {{ incentive.entityType | find:entityTypeData:'id':'value' }}
                       </td>
                     </ng-container>
 
                     <ng-container matColumnDef="attributeName">
-                      <th mat-header-cell *matHeaderCellDef> Attribute Name </th>
+                      <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Attribute Name' | translate}} </th>
                       <td mat-cell *matCellDef="let incentive">
                         {{ incentive.attributeName | find:attributeNameData:'id':'value' }}
                       </td>
                     </ng-container>
 
                     <ng-container matColumnDef="conditionType">
-                      <th mat-header-cell *matHeaderCellDef> Condition Type </th>
+                      <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Condition Type' | translate}} </th>
                       <td mat-cell *matCellDef="let incentive">
                         {{ incentive.conditionType | find:conditionTypeData:'id':'value' }}
                       </td>
                     </ng-container>
 
                     <ng-container matColumnDef="attributeValue">
-                      <th mat-header-cell *matHeaderCellDef> Attribute Value </th>
+                      <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Attribute Value' | translate}} </th>
                       <td mat-cell *matCellDef="let incentive" [ngSwitch]="incentive.attributeName">
                         <span *ngSwitchCase="2">{{ incentive.attributeValue | find:genderData:'id':'name' }}</span>
                         <span *ngSwitchCase="3">{{ incentive.attributeValue }}</span>
                         <span *ngSwitchCase="4">{{ incentive.attributeValue | find:clientTypeData:'id':'name' }}</span>
-                        <span *ngSwitchCase="5">{{ incentive.attributeValue | find:clientClassificationData:'id':'name' }}</span>
+                        <span *ngSwitchCase="5">{{ incentive.attributeValue | find:clientClassificationData:'id':'name'
+                          }}</span>
                       </td>
                     </ng-container>
 
                     <ng-container matColumnDef="incentiveType">
-                      <th mat-header-cell *matHeaderCellDef> Incentive Type </th>
+                      <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Incentive Type' | translate}} </th>
                       <td mat-cell *matCellDef="let incentive">
                         {{ incentive.incentiveType | find:incentiveTypeData:'id':'value'}}
                       </td>
                     </ng-container>
 
                     <ng-container matColumnDef="amount">
-                      <th mat-header-cell *matHeaderCellDef> Interest </th>
+                      <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Interest' | translate}} </th>
                       <td mat-cell *matCellDef="let incentive">
                         {{ incentive.amount }}
                       </td>
                     </ng-container>
 
                     <ng-container matColumnDef="actions">
-                      <th mat-header-cell *matHeaderCellDef> Actions </th>
+                      <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Actions' | translate}} </th>
                       <td mat-cell *matCellDef="let incentive; let incentiveIndex = index">
-                        <button mat-icon-button color="primary" (click)="editIncentive(getIncentives(chart.controls.chartSlabs, chartSlabIndex), incentiveIndex)">
+                        <button mat-icon-button color="primary"
+                          (click)="editIncentive(getIncentives(chart.controls.chartSlabs, chartSlabIndex), incentiveIndex)">
                           <fa-icon icon="edit"></fa-icon>
                         </button>
-                        <button mat-icon-button color="warn" (click)="delete(getIncentives(chart.controls.chartSlabs, chartSlabIndex), incentiveIndex)">
+                        <button mat-icon-button color="warn"
+                          (click)="delete(getIncentives(chart.controls.chartSlabs, chartSlabIndex), incentiveIndex)">
                           <fa-icon icon="trash"></fa-icon>
                         </button>
                       </td>
@@ -218,12 +237,12 @@
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-      Previous
+      {{'labels.buttons.Previous' | translate}}
     </button>
     <button mat-raised-button matStepperNext>
-      Next
+      {{'labels.buttons.Next' | translate}}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
 
-</form>
+</form>

src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-interest-rate-chart-step/recurring-deposit-product-interest-rate-chart-step.component.ts

@@ -17,6 +17,7 @@ import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
 
 import { SettingsService } from 'app/settings/settings.service';
 import { Dates } from 'app/core/utils/dates';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'mifosx-recurring-deposit-product-interest-rate-chart-step',
@@ -66,7 +67,8 @@ export class RecurringDepositProductInterestRateChartStepComponent implements On
   constructor(private formBuilder: UntypedFormBuilder,
               public dialog: MatDialog,
               private dateUtils: Dates,
-              private settingsService: SettingsService) {
+              private settingsService: SettingsService,
+              private translateService: TranslateService) {
     this.createrecurringDepositProductInterestRateChartForm();
   }
 
@@ -313,7 +315,7 @@ export class RecurringDepositProductInterestRateChartStepComponent implements On
 
   getData(formType: string, values?: any) {
     switch (formType) {
-      case 'Slab': return { title: 'Slab', formfields: this.getSlabFormfields(values) };
+      case 'Slab': return { title: this.translateService.instant('labels.inputs.Slab'), formfields: this.getSlabFormfields(values) };
       case 'Incentive': return { values, chartTemplate: this.recurringDepositProductsTemplate.chartTemplate };
     }
   }
@@ -322,7 +324,7 @@ export class RecurringDepositProductInterestRateChartStepComponent implements On
     const formfields: FormfieldBase[] = [
       new SelectBase({
         controlName: 'periodType',
-        label: 'Period Type',
+        label: this.translateService.instant('labels.inputs.Period Type'),
         value: values ? values.periodType : this.periodTypeData[0].id,
         options: { label: 'value', value: 'id', data: this.periodTypeData },
         required: true,
@@ -330,7 +332,7 @@ export class RecurringDepositProductInterestRateChartStepComponent implements On
       }),
       new InputBase({
         controlName: 'fromPeriod',
-        label: 'Period From',
+        label: this.translateService.instant('labels.inputs.Period From'),
         value: values ? values.fromPeriod : undefined,
         type: 'number',
         required: true,
@@ -338,28 +340,28 @@ export class RecurringDepositProductInterestRateChartStepComponent implements On
       }),
       new InputBase({
         controlName: 'toPeriod',
-        label: 'Period To',
+        label: this.translateService.instant('labels.inputs.Period To'),
         value: values ? values.toPeriod : undefined,
         type: 'number',
         order: 3
       }),
       new InputBase({
         controlName: 'amountRangeFrom',
-        label: 'Amount Range From',
+        label: this.translateService.instant('labels.inputs.Amount Range From'),
         value: values ? values.amountRangeFrom : undefined,
         type: 'number',
         order: 4
       }),
       new InputBase({
         controlName: 'amountRangeTo',
-        label: 'Amount Range To',
+        label: this.translateService.instant('labels.inputs.Amount Range To'),
         value: values ? values.amountRangeTo : undefined,
         type: 'number',
         order: 5
       }),
       new InputBase({
         controlName: 'annualInterestRate',
-        label: 'Interest',
+        label: this.translateService.instant('labels.inputs.Interest'),
         value: values ? values.annualInterestRate : undefined,
         type: 'number',
         required: true,
@@ -367,7 +369,7 @@ export class RecurringDepositProductInterestRateChartStepComponent implements On
       }),
       new InputBase({
         controlName: 'description',
-        label: 'Description',
+        label: this.translateService.instant('labels.inputs.Description'),
         value: values ? values.description : undefined,
         required: true,
         order: 7
@@ -378,14 +380,20 @@ export class RecurringDepositProductInterestRateChartStepComponent implements On
 
   get recurringDepositProductInterestRateChart() {
     // TODO: Update once language and date settings are setup
-    const dateFormat = this.settingsService.dateFormat;
+    const dateFormat = 'YYYY-MM-DD';
     const locale = this.settingsService.language.code;
     const recurringDepositProductInterestRateChart = this.recurringDepositProductInterestRateChartForm.value;
     for (const chart of recurringDepositProductInterestRateChart.charts) {
-      chart.dateFormat = dateFormat;
       chart.locale = locale;
-      chart.fromDate = this.dateUtils.formatDate(chart.fromDate, dateFormat);
-      chart.endDate = this.dateUtils.formatDate(chart.endDate, dateFormat) || '';
+      chart.dateFormat = 'yyyy-MM-dd';
+      if (chart.fromDate instanceof Date) {
+        chart.fromDate = this.dateUtils.formatDateAsString(chart.fromDate, dateFormat);
+      }
+      if (chart.endDate) {
+        if (chart.endDate instanceof Date) {
+          chart.endDate = this.dateUtils.formatDateAsString(chart.endDate, dateFormat);
+        }
+      }
       if (chart.endDate === '') {
         delete chart.endDate;
       }

src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-preview-step/recurring-deposit-product-preview-step.component.html

@@ -4,192 +4,192 @@
 
   <mat-divider fxFlexFill></mat-divider>
 
-  <h3 class="mat-h3" fxFlexFill>Details</h3>
+  <h3 class="mat-h3" fxFlexFill>{{'labels.inputs.Details' | translate}}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Short Name:</span>
+    <span fxFlex="40%">{{'labels.inputs.Short Name' | translate}}:</span>
     <span fxFlex="60%">{{ recurringDepositProduct.shortName }}</span>
   </div>
 
   <div fxFlexFill *ngIf="recurringDepositProduct.description">
-    <span fxFlex="40%">Description:</span>
+    <span fxFlex="40%">{{'labels.inputs.Description' | translate}}:</span>
     <span fxFlex="60%">{{ recurringDepositProduct.description }}</span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>Currency</h3>
+  <h3 class="mat-h3" fxFlexFill>{{'labels.inputs.Currency' | translate}}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Currency:</span>
+    <span fxFlex="40%">{{'labels.inputs.Currency' | translate}}:</span>
     <span fxFlex="60%">{{ recurringDepositProduct.currencyCode | find:recurringDepositProductsTemplate.currencyOptions:'code':'name' }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Decimal Places:</span>
+    <span fxFlex="40%">{{'labels.inputs.Decimal Places' | translate}}:</span>
     <span fxFlex="60%">{{ recurringDepositProduct.digitsAfterDecimal }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Currency in multiples of:</span>
+    <span fxFlex="40%">{{'labels.inputs.Currency in multiples of' | translate}}:</span>
     <span fxFlex="60%">{{ recurringDepositProduct.inMultiplesOf }}</span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>Terms</h3>
+  <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Terms' | translate}}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Deposit Amount:</span>
+    <span fxFlex="40%">{{'labels.inputs.Deposit Amount' | translate}}:</span>
     <span fxFlex="60%">{{ recurringDepositProduct.depositAmount + ' (Min: ' + (recurringDepositProduct.minDepositAmount ? recurringDepositProduct.minDepositAmount : recurringDepositProduct.depositAmount) + ', Max: ' + (recurringDepositProduct.maxDepositAmount ? recurringDepositProduct.maxDepositAmount : recurringDepositProduct.depositAmount) + ')' }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Interest Compounding Period:</span>
+    <span fxFlex="40%">{{'labels.inputs.Interest Compounding Period' | translate}}:</span>
     <span fxFlex="60%">{{ recurringDepositProduct.interestCompoundingPeriodType | find:recurringDepositProductsTemplate.interestCompoundingPeriodTypeOptions:'id':'value' }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Interest Posting Period:</span>
+    <span fxFlex="40%">{{'labels.inputs.Interest Posting Period' | translate}}:</span>
     <span fxFlex="60%">{{ recurringDepositProduct.interestPostingPeriodType | find:recurringDepositProductsTemplate.interestPostingPeriodTypeOptions:'id':'value' }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Interest Calculated using:</span>
+    <span fxFlex="40%">{{'labels.inputs.Interest Calculated using' | translate}}:</span>
     <span fxFlex="60%">{{ recurringDepositProduct.interestCalculationType | find:recurringDepositProductsTemplate.interestCalculationTypeOptions:'id':'value' }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Days in Year:</span>
+    <span fxFlex="40%">{{'labels.inputs.Days in Year' | translate}}:</span>
     <span fxFlex="60%">{{ recurringDepositProduct.interestCalculationDaysInYearType | find:recurringDepositProductsTemplate.interestCalculationDaysInYearTypeOptions:'id':'value' }}</span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>Settings</h3>
+  <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Settings' | translate}}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill *ngIf="recurringDepositProduct.lockinPeriodFrequency">
-    <span fxFlex="40%">Lock-in Period:</span>
+    <span fxFlex="40%">{{'labels.inputs.Lock-in Period' | translate}}:</span>
     <span fxFlex="60%">{{ recurringDepositProduct.lockinPeriodFrequency + ' ' + (recurringDepositProduct.lockinPeriodFrequencyType | find:recurringDepositProductsTemplate.lockinPeriodFrequencyTypeOptions:'id':'value') }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Minimum Deposit Term:</span>
+    <span fxFlex="40%">{{'labels.inputs.Minimum Deposit Term' | translate}}:</span>
     <span fxFlex="60%">{{ recurringDepositProduct.minDepositTerm + ' ' + (recurringDepositProduct.minDepositTermTypeId | find:recurringDepositProductsTemplate.periodFrequencyTypeOptions:'id':'value') }}</span>
   </div>
 
   <div fxFlexFill *ngIf="recurringDepositProduct.inMultiplesOfDepositTerm">
-    <span fxFlex="40%">And thereafter, in Multiples of:</span>
+    <span fxFlex="40%">{{'labels.inputs.And thereafter, in Multiples of' | translate}}:</span>
     <span fxFlex="60%">{{ recurringDepositProduct.inMultiplesOfDepositTerm + ' ' + (recurringDepositProduct.inMultiplesOfDepositTermTypeId | find:recurringDepositProductsTemplate.periodFrequencyTypeOptions:'id':'value') }}</span>
   </div>
 
   <div fxFlexFill *ngIf="recurringDepositProduct.maxDepositTerm">
-    <span fxFlex="40%">Minimum Deposit Term:</span>
+    <span fxFlex="40%">{{'labels.inputs.Minimum Deposit Term' | translate}}:</span>
     <span fxFlex="60%">{{ recurringDepositProduct.maxDepositTerm + ' ' + (recurringDepositProduct.maxDepositTermTypeId | find:recurringDepositProductsTemplate.periodFrequencyTypeOptions:'id':'value') }}</span>
   </div>
   <!-- For Pre-mature closure -->
   <div fxFlexFill>
-    <span fxFlex="40%">Apply Penal Interest (less):</span>
+    <span fxFlex="40%">{{'labels.inputs.Apply Penal Interest (less)' | translate}}:</span>
     <span fxFlex="60%">{{ recurringDepositProduct.preClosurePenalApplicable | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="recurringDepositProduct.preClosurePenalApplicable">
-    <span fxFlex="40%">Penal Interest (%):</span>
+    <span fxFlex="40%">{{'labels.inputs.Penal Interest' | translate}} (%):</span>
     <span fxFlex="60%">{{ recurringDepositProduct.preClosurePenalInterest + '% (' + (recurringDepositProduct.preClosurePenalInterestOnTypeId | find:recurringDepositProductsTemplate.preClosurePenalInterestOnTypeOptions:'id':'value') + ')' }}</span>
   </div>
 
   <div fxFlexFill *ngIf="recurringDepositProduct.isMandatoryDeposit !== undefined">
-    <span fxFlex="40%">Recurring Deposit Type:</span>
-    <span fxFlex="60%" *ngIf="recurringDepositProduct.isMandatoryDeposit"> Mandatory </span>
-    <span fxFlex="60%" *ngIf="!recurringDepositProduct.isMandatoryDeposit"> Voluntary </span>
+    <span fxFlex="40%">{{'labels.inputs.Recurring Deposit Type' | translate}}:</span>
+    <span fxFlex="60%" *ngIf="recurringDepositProduct.isMandatoryDeposit"> {{'labels.text.Mandatory' | translate}} </span>
+    <span fxFlex="60%" *ngIf="!recurringDepositProduct.isMandatoryDeposit"> {{'labels.text.Voluntary' | translate}} </span>
   </div>
   <!--  -->
   <div fxFlexFill>
-    <span fxFlex="40%">Withhold Tax is Applicable:</span>
+    <span fxFlex="40%">{{'labels.inputs.Withhold Tax is Applicable' | translate}}:</span>
     <span fxFlex="60%">{{ recurringDepositProduct.withHoldTax | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="recurringDepositProduct.withHoldTax">
-    <span fxFlex="40%">Tax Group:</span>
+    <span fxFlex="40%">{{'labels.inputs.Tax Group' | translate}}:</span>
     <span fxFlex="60%">{{ recurringDepositProduct.taxGroupId | find:recurringDepositProductsTemplate.taxGroupOptions:'id':'name' }}</span>
   </div>
 
   <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column" *ngIf="recurringDepositProduct.charts.length !== 0">
 
-    <h3 class="mat-h3" fxFlexFill>Interest Rate Charts</h3>
+    <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Interest Rate Charts' | translate}}</h3>
 
     <mat-divider fxFlexFill></mat-divider>
 
     <div fxFlexFill *ngFor="let chart of recurringDepositProduct.charts; let chartIndex = index" fxLayout="row wrap" fxLayout.lt-md="column">
 
       <div fxFlexFill *ngIf="chart.name">
-        <span fxFlex="40%">Name:</span>
+        <span fxFlex="40%">{{'labels.inputs.Name' | translate}}:</span>
         <span fxFlex="60%">{{ chart.name }}</span>
       </div>
 
       <div fxFlexFill>
-        <span fxFlex="40%">Valid from Date:</span>
+        <span fxFlex="40%">{{'labels.inputs.From Date' | translate}}:</span>
         <span fxFlex="60%">{{ chart.fromDate | dateFormat }}</span>
       </div>
 
       <div fxFlexFill *ngIf="chart.endDate">
-        <span fxFlex="40%">End Date:</span>
+        <span fxFlex="40%">{{'labels.inputs.End Date' | translate}}:</span>
         <span fxFlex="60%">{{ chart.endDate | dateFormat }}</span>
       </div>
 
       <div fxFlexFill *ngIf="chart.description">
-        <span fxFlex="40%">Description:</span>
+        <span fxFlex="40%">{{'labels.inputs.Description' | translate}}:</span>
         <span fxFlex="60%">{{ chart.description }}</span>
       </div>
 
       <div fxFlexFill>
-        <span fxFlex="40%">Primary Grouping by Amount:</span>
+        <span fxFlex="40%">{{'labels.inputs.Primary Grouping by Amount' | translate}}:</span>
         <span fxFlex="60%">{{ recurringDepositProduct.isPrimaryGroupingByAmount | yesNo }}</span>
       </div>
 
       <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="chart.chartSlabs" *ngIf="chart.chartSlabs.length !== 0" multiTemplateDataRows>
 
         <ng-container matColumnDef="period">
-          <th mat-header-cell *matHeaderCellDef> Period </th>
+          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Period' | translate}} </th>
           <td mat-cell *matCellDef="let chartSlab">
             {{ chartSlab.fromPeriod + ' - ' + chartSlab.toPeriod + ' ' + (chartSlab.periodType | find:recurringDepositProductsTemplate.chartTemplate.periodTypes:'id':'value') }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="amountRange">
-          <th mat-header-cell *matHeaderCellDef> Amount Range </th>
+          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Amount Range' | translate}} </th>
           <td mat-cell *matCellDef="let chartSlab">
             {{ chartSlab.amountRangeFrom + ' - ' + chartSlab.amountRangeTo }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="annualInterestRate">
-          <th mat-header-cell *matHeaderCellDef> Interest </th>
+          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Interest' | translate}} </th>
           <td mat-cell *matCellDef="let chartSlab">
-            {{ chartSlab.annualInterestRate }}
+            {{ chartSlab.annualInterestRate | formatNumber }} %
           </td>
         </ng-container>
 
         <ng-container matColumnDef="description">
-          <th mat-header-cell *matHeaderCellDef> Description </th>
+          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Description' | translate}} </th>
           <td mat-cell *matCellDef="let chartSlab">
             {{ chartSlab.description }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="actions">
-          <th mat-header-cell *matHeaderCellDef> Actions </th>
+          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </th>
           <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
             <button mat-button color="primary" (click)="expandChartSlabIndex[chartIndex] = expandChartSlabIndex[chartIndex] === chartSlabIndex ? null : chartSlabIndex" [disabled]="chartSlab.incentives.length === 0">
               <span *ngIf="expandChartSlabIndex[chartIndex] !== chartSlabIndex">
                 <fa-icon icon="eye" class="m-r-10"></fa-icon>
-                View Incentives
+                {{'labels.buttons.View Incentives' | translate}}
               </span>
               <span *ngIf="expandChartSlabIndex[chartIndex] === chartSlabIndex">
                 <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
-                Hide Incentives
+                {{'labels.buttons.Hide Incentives' | translate}}
               </span>
             </button>
           </td>
@@ -201,34 +201,34 @@
               <mat-card fxLayout="row wrap" fxFlexFill>
 
                 <h4 class="mat-h4" fxFlex="23%">
-                  Incentives
+                  {{'labels.heading.Incentives' | translate}}
                 </h4>
 
                 <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="chartSlab.incentives">
 
                   <ng-container matColumnDef="entityType">
-                    <th mat-header-cell *matHeaderCellDef> Entity Type </th>
+                    <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Entity Type' | translate}} </th>
                     <td mat-cell *matCellDef="let incentive">
                       {{ incentive.entityType | find:recurringDepositProductsTemplate.chartTemplate.entityTypeOptions:'id':'value' }}
                     </td>
                   </ng-container>
 
                   <ng-container matColumnDef="attributeName">
-                    <th mat-header-cell *matHeaderCellDef> Attribute Name </th>
+                    <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Attribute Name' | translate}} </th>
                     <td mat-cell *matCellDef="let incentive">
                       {{ incentive.attributeName | find:recurringDepositProductsTemplate.chartTemplate.attributeNameOptions:'id':'value' }}
                     </td>
                   </ng-container>
 
                   <ng-container matColumnDef="conditionType">
-                    <th mat-header-cell *matHeaderCellDef> Condition Type </th>
+                    <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Condition Type' | translate}} </th>
                     <td mat-cell *matCellDef="let incentive">
                       {{ incentive.conditionType | find:recurringDepositProductsTemplate.chartTemplate.conditionTypeOptions:'id':'value' }}
                     </td>
                   </ng-container>
 
                   <ng-container matColumnDef="attributeValue">
-                    <th mat-header-cell *matHeaderCellDef> Attribute Value </th>
+                    <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Attribute Value' | translate}} </th>
                     <td mat-cell *matCellDef="let incentive" [ngSwitch]="incentive.attributeName">
                       <span *ngSwitchCase="2">{{ incentive.attributeValue | find:recurringDepositProductsTemplate.chartTemplate.genderOptions:'id':'name' }}</span>
                       <span *ngSwitchCase="3">{{ incentive.attributeValue }}</span>
@@ -238,16 +238,16 @@
                   </ng-container>
 
                   <ng-container matColumnDef="incentiveType">
-                    <th mat-header-cell *matHeaderCellDef> Incentive Type </th>
+                    <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Incentive Type' | translate}} </th>
                     <td mat-cell *matCellDef="let incentive">
                       {{ incentive.incentiveType | find:recurringDepositProductsTemplate.chartTemplate.incentiveTypeOptions:'id':'value'}}
                     </td>
                   </ng-container>
 
                   <ng-container matColumnDef="amount">
-                    <th mat-header-cell *matHeaderCellDef> Amount </th>
+                    <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Amount' | translate}} </th>
                     <td mat-cell *matCellDef="let incentive">
-                      {{ incentive.amount }}
+                      {{ incentive.amount | formatNumber }}
                     </td>
                   </ng-container>
 
@@ -275,35 +275,35 @@
 
   <div fxFlexFill *ngIf="recurringDepositProduct.charges.length" fxLayout="row wrap" fxLayout.lt-md="column">
 
-    <h3 class="mat-h3" fxFlexFill>Charges</h3>
+    <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Charges' | translate}}</h3>
 
     <mat-divider fxFlexFill></mat-divider>
 
     <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="recurringDepositProduct.charges">
 
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> Name </th>
+        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Name' | translate}} </th>
         <td mat-cell *matCellDef="let charge">
           {{ charge.name + ', ' + charge.currency.displaySymbol }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="chargeCalculationType">
-        <th mat-header-cell *matHeaderCellDef> Type </th>
+        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Type' | translate}} </th>
         <td mat-cell *matCellDef="let charge">
           {{ charge.chargeCalculationType.value }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="amount">
-        <th mat-header-cell *matHeaderCellDef> Amount </th>
+        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Amount' | translate}} </th>
         <td mat-cell *matCellDef="let charge">
           {{ charge.amount  }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="chargeTimeType">
-        <th mat-header-cell *matHeaderCellDef> Collected On </th>
+        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Collected On' | translate}} </th>
         <td mat-cell *matCellDef="let charge">
           {{ charge.chargeTimeType.value }}
         </td>
@@ -316,7 +316,7 @@
 
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>Accounting</h3>
+  <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Accounting' | translate}}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
@@ -328,25 +328,25 @@
 
   <div *ngIf="recurringDepositProduct.advancedAccountingRules && (recurringDepositProduct.paymentChannelToFundSourceMappings?.length || recurringDepositProduct.feeToIncomeAccountMappings?.length || recurringDepositProduct.penaltyToIncomeAccountMappings?.length)" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
 
-    <h3 class="mat-h3" fxFlexFill>Advanced Accounting Rules</h3>
+    <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Advanced Accounting Rules' | translate}}</h3>
 
     <mat-divider fxFlexFill></mat-divider>
 
     <div *ngIf="recurringDepositProduct.paymentChannelToFundSourceMappings?.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
 
-      <h4 class="mat-h4" fxFlexFill>Fund Sources for Payment Channels</h4>
+      <h4 class="mat-h4" fxFlexFill>{{'labels.heading.Fund Sources for Payment Channels' | translate}}</h4>
 
       <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="recurringDepositProduct.paymentChannelToFundSourceMappings">
 
         <ng-container matColumnDef="paymentTypeId">
-          <th mat-header-cell *matHeaderCellDef> Payment Type </th>
+          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Payment Type' | translate}} </th>
           <td mat-cell *matCellDef="let paymentFundSource">
             {{ paymentFundSource.paymentTypeId | find:recurringDepositProductsTemplate.paymentTypeOptions:'id':'name' }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="fundSourceAccountId">
-          <th mat-header-cell *matHeaderCellDef> Fund Source </th>
+          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Fund Source' | translate}} </th>
           <td mat-cell *matCellDef="let paymentFundSource">
             {{ paymentFundSource.fundSourceAccountId | find:recurringDepositProductsTemplate.accountingMappingOptions.assetAccountOptions:'id':'name' }}
           </td>
@@ -361,19 +361,19 @@
 
     <div *ngIf="recurringDepositProduct.feeToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
 
-      <h4 class="mat-h4" fxFlexFill>Fees to Specific Income Accounts</h4>
+      <h4 class="mat-h4" fxFlexFill>{{'labels.heading.Fees to Specific Income Accounts' | translate}}</h4>
 
       <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="recurringDepositProduct.feeToIncomeAccountMappings">
 
         <ng-container matColumnDef="chargeId">
-          <th mat-header-cell *matHeaderCellDef> Fees </th>
+          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Fees' | translate}} </th>
           <td mat-cell *matCellDef="let feesIncome">
             {{ feesIncome.chargeId | find:recurringDepositProductsTemplate.chargeOptions:'id':'name' }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="incomeAccountId">
-          <th mat-header-cell *matHeaderCellDef> Income Account </th>
+          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Income Account' | translate}} </th>
           <td mat-cell *matCellDef="let feesIncome">
             {{ feesIncome.incomeAccountId | find:recurringDepositProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}
           </td>
@@ -388,19 +388,19 @@
 
     <div *ngIf="recurringDepositProduct.penaltyToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
 
-      <h4 class="mat-h4" fxFlexFill>Penalties to Specific Income Accounts</h4>
+      <h4 class="mat-h4" fxFlexFill>{{'labels.heading.Penalties to Specific Income Accounts' | translate}}</h4>
 
       <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="recurringDepositProduct.penaltyToIncomeAccountMappings">
 
         <ng-container matColumnDef="chargeId">
-          <th mat-header-cell *matHeaderCellDef> Penalty </th>
+          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Penalty' | translate}} </th>
           <td mat-cell *matCellDef="let penaltyIncome">
             {{ penaltyIncome.chargeId  | find:recurringDepositProductsTemplate.penaltyOptions:'id':'name' }}
           </td>
         </ng-container>
 
         <ng-container matColumnDef="incomeAccountId">
-          <th mat-header-cell *matHeaderCellDef> Income Account </th>
+          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Income Account' | translate}} </th>
           <td mat-cell *matCellDef="let penaltyIncome">
             {{ penaltyIncome.incomeAccountId | find:recurringDepositProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}
           </td>
@@ -420,12 +420,12 @@
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
     <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-    Previous
+    {{'labels.buttons.Previous' | translate}}
   </button>
   <button mat-raised-button [routerLink]="['../']">
-    Cancel
+    {{'labels.buttons.Cancel' | translate}}
   </button>
   <button mat-raised-button color="primary" (click)="submit.emit()">
-    Submit
+    {{'labels.buttons.Submit' | translate}}    
   </button>
 </div>

src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-settings-step/recurring-deposit-product-settings-step.component.html

@@ -3,26 +3,26 @@
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
     <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="isMandatoryDeposit" class="margin-v">
-      Is Mandatory Deposit?
+      {{'labels.inputs.Is Mandatory Deposit' | translate}}
     </mat-checkbox>
 
     <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="adjustAdvanceTowardsFuturePayments" class="margin-v">
-      Adjust advance payments toward future installments?
+      {{'labels.inputs.Adjust advance payments toward future installments' | translate}}
     </mat-checkbox>
 
     <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="allowWithdrawal" class="margin-v">
-      Allow Withdrawals?
+      {{'labels.inputs.Allow Withdrawals' | translate}}
     </mat-checkbox>
 
-    <h4 fxFlex="98%" class="mat-h4">Lock-in Period</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{'labels.inputs.Lock-in Period' | translate}}</h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Frequency</mat-label>
+      <mat-label>{{'labels.inputs.Frequency' | translate}}</mat-label>
       <input type="number" matInput formControlName="lockinPeriodFrequency" matTooltip="The number at which lock in period occurs." >
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Type</mat-label>
+      <mat-label>{{'labels.inputs.Type' | translate}}</mat-label>
       <mat-select formControlName="lockinPeriodFrequencyType">
         <mat-option *ngFor="let lockinPeriodFrequencyType of lockinPeriodFrequencyTypeData"
           [value]="lockinPeriodFrequencyType.id">
@@ -31,37 +31,37 @@
       </mat-select>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">Minimum Deposit Term</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{'labels.inputs.Minimum Deposit Term' | translate}}</h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Frequency</mat-label>
+      <mat-label>{{'labels.inputs.Frequency' | translate}}</mat-label>
       <input type="number" matInput formControlName="minDepositTerm" matTooltip="The number at which minimum deposit occurs." required>
       <mat-error>
-        Minimum Deposit Term Frequency is <strong>required</strong>
+        {{'labels.inputs.Minimum Deposit Term Frequency' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Frequency Type</mat-label>
+      <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 }}
         </mat-option>
       </mat-select>
       <mat-error>
-        Minimum Deposit Term Frequency Type is <strong>required</strong>
+        {{'labels.inputs.Minimum Deposit Term Frequency Type' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">And thereafter, in Multiples of</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.And thereafter, in Multiples of' | translate}}</h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Frequency</mat-label>
+      <mat-label>{{'labels.inputs.Frequency' | translate}}</mat-label>
       <input type="number" matInput formControlName="inMultiplesOfDepositTerm" matTooltip="The number at which multiple deposits occurs.">
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Type</mat-label>
+      <mat-label>{{'labels.inputs.Type' | translate}}</mat-label>
       <mat-select formControlName="inMultiplesOfDepositTermTypeId">
         <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
           {{ periodFrequencyType.value }}
@@ -69,15 +69,15 @@
       </mat-select>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">Maximum Deposit Term</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{'labels.inputs.Maximum Deposit Term' | translate}}</h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Frequency</mat-label>
+      <mat-label>{{'labels.inputs.Frequency' | translate}}</mat-label>
       <input type="number" matInput formControlName="maxDepositTerm" matTooltip="The number at which minimum deposit occurs.">
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Type</mat-label>
+      <mat-label>{{'labels.inputs.Type' | translate}}</mat-label>
       <mat-select formControlName="maxDepositTermTypeId">
         <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
           {{ periodFrequencyType.value }}
@@ -87,19 +87,19 @@
 
     <mat-divider fxFlex="98%"></mat-divider>
 
-    <h4 fxFlex="23%" class="mat-h4">For Pre-mature closure</h4>
+    <h4 fxFlex="23%" class="mat-h4">{{'labels.heading.For Pre-mature closure' | translate}}</h4>
 
     <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="preClosurePenalApplicable" class="margin-v">
-      Apply Penal Interest (less)
+      {{'labels.inputs.Apply Penal Interest (less)' | translate}}
     </mat-checkbox>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Penal Interest (%)</mat-label>
+      <mat-label>{{'labels.inputs.Penal Interest' | translate}} (%)</mat-label>
       <input type="number" matInput formControlName="preClosurePenalInterest">
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Period</mat-label>
+      <mat-label>{{'labels.inputs.Period' | translate}}</mat-label>
       <mat-select formControlName="preClosurePenalInterestOnTypeId">
         <mat-option *ngFor="let preClosurePenalInterestOnType of preClosurePenalInterestOnTypeData"
           [value]="preClosurePenalInterestOnType.id">
@@ -111,18 +111,18 @@
     <mat-divider fxFlex="98%"></mat-divider>
 
     <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="withHoldTax" class="margin-v">
-      Is Withhold Tax Applicable?
+      {{'labels.inputs.Is Withhold Tax Applicable' | translate}}
     </mat-checkbox>
 
     <mat-form-field fxFlex="48%" *ngIf="recurringDepositProductSettingsForm.value.withHoldTax">
-      <mat-label>Tax Group</mat-label>
+      <mat-label>{{'labels.inputs.Tax Group' | translate}}</mat-label>
       <mat-select formControlName="taxGroupId" required>
         <mat-option *ngFor="let taxGroup of taxGroupData" [value]="taxGroup.id">
           {{ taxGroup.name }}
         </mat-option>
       </mat-select>
       <mat-error>
-        Tax Group is <strong>required</strong>
+        {{'labels.inputs.Tax Group' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
@@ -131,10 +131,10 @@
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-      Previous
+      {{'labels.buttons.Previous' | translate}}
     </button>
     <button mat-raised-button matStepperNext>
-      Next
+      {{'labels.buttons.Next' | translate}}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>

src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-terms-step/recurring-deposit-product-terms-step.component.html

@@ -2,73 +2,73 @@
 
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
-    <h4 fxFlex="98%" class="mat-h4">Deposit Amount</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{'labels.inputs.Deposit Amount' | translate}}</h4>
 
     <mat-form-field fxFlex="31%">
-      <mat-label>Minimum</mat-label>
+      <mat-label>{{'labels.inputs.Minimum' | translate}}</mat-label>
       <input type="number" matInput formControlName="minDepositAmount">
     </mat-form-field>
 
     <mat-form-field fxFlex="31%">
-      <mat-label>Default</mat-label>
+      <mat-label>{{'labels.inputs.Default' | translate}}</mat-label>
       <input type="number" matInput formControlName="depositAmount" required>
       <mat-error>
-        Default Deposit Amount is <strong>required</strong>
+        {{'labels.inputs.Default' | translate}} {{'labels.inputs.Deposit Amount' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="31%">
-      <mat-label>Maximum</mat-label>
+      <mat-label>{{'labels.inputs.Maximum' | translate}}</mat-label>
       <input type="number" matInput formControlName="maxDepositAmount">
     </mat-form-field>
 
     <mat-divider fxFlex="98%"></mat-divider>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Interest Compounding Period</mat-label>
+      <mat-label>{{'labels.inputs.Interest Compounding Period' | translate}}</mat-label>
       <mat-select formControlName="interestCompoundingPeriodType" required>
         <mat-option *ngFor="let interestCompoundingPeriodType of interestCompoundingPeriodTypeData" [value]="interestCompoundingPeriodType.id">
           {{ interestCompoundingPeriodType.value }}
         </mat-option>
       </mat-select>
       <mat-error>
-        Interest Compounding Period is <strong>required</strong>
+        {{'labels.inputs.Interest Compounding Period' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Interest Posting Period</mat-label>
+      <mat-label>{{'labels.inputs.Interest Posting Period' | translate}}</mat-label>
       <mat-select formControlName="interestPostingPeriodType" required>
         <mat-option *ngFor="let interestPostingPeriodType of interestPostingPeriodTypeData" [value]="interestPostingPeriodType.id">
           {{ interestPostingPeriodType.value }}
         </mat-option>
       </mat-select>
       <mat-error>
-        Interest Posting Period is <strong>required</strong>
+        {{'labels.inputs.Interest Posting Period' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Interest Calculated using</mat-label>
+      <mat-label>{{'labels.inputs.Interest Calculated using' | translate}}</mat-label>
       <mat-select formControlName="interestCalculationType" required>
         <mat-option *ngFor="let interestCalculationType of interestCalculationTypeData" [value]="interestCalculationType.id">
           {{ interestCalculationType.value }}
         </mat-option>
       </mat-select>
       <mat-error>
-        Interest Calculated using is <strong>required</strong>
+        {{'labels.inputs.Interest Calculated using' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Days in Year</mat-label>
+      <mat-label>{{'labels.inputs.Days in Year' | translate}}</mat-label>
       <mat-select formControlName="interestCalculationDaysInYearType" required>
         <mat-option *ngFor="let interestCalculationDaysInYearType of interestCalculationDaysInYearTypeData" [value]="interestCalculationDaysInYearType.id">
           {{ interestCalculationDaysInYearType.value }}
         </mat-option>
       </mat-select>
       <mat-error>
-        Days in Year is <strong>required</strong>
+        {{'labels.inputs.Days in Year' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
@@ -77,10 +77,10 @@
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-      Previous
+      {{'labels.buttons.Previous' | translate}}
     </button>
     <button mat-raised-button matStepperNext>
-      Next
+      {{'labels.buttons.Next' | translate}}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>

src/app/products/recurring-deposit-products/recurring-deposit-products.component.html

@@ -3,7 +3,7 @@
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission='"CREATE_RECURRINGDEPOSITPRODUCT"'
   matTooltip="Create Recurring Deposit Product" matTooltipPosition="above">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    Create Recurring Deposit Product
+    {{'labels.buttons.Create Recurring Deposit Product' | translate}}
   </button>
 </div>
 </div>
@@ -22,12 +22,12 @@
     <table mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Name' | translate}} </th>
         <td mat-cell *matCellDef="let recurringDepositProduct"> {{ recurringDepositProduct.name }} </td>
       </ng-container>
 
       <ng-container matColumnDef="shortName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Short Name </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Short Name' | translate}} </th>
         <td mat-cell *matCellDef="let recurringDepositProduct"> {{ recurringDepositProduct.shortName }} </td>
       </ng-container>
 
@@ -46,26 +46,26 @@
   <h2>Create recurring deposit product</h2>
   <p class="mw300">This option allows you to create new recurring product.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true)">Next</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{'labels.buttons.Back' | translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true)">{{'labels.buttons.Next' | translate}}</button>
   </div>
 </ng-template>
 
 <ng-template #templateFilter let-popover="popover">
   <h4>Search bar to filter recurring deposit products.</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateRecurringProduct,buttonCreateRecurringProduct , 'bottom', true)">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateRecurringProductsTable,recurringProductsTable, 'top', true)">Next</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateRecurringProduct,buttonCreateRecurringProduct , 'bottom', true)">{{'labels.buttons.Back' | translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateRecurringProductsTable,recurringProductsTable, 'top', true)">{{'labels.buttons.Next' | translate}}</button>
   </div>
 </ng-template>
 
 <ng-template #templateRecurringProductsTable let-popover="popover">
-  <h4 class="mw300">List of recurring deposit products in the organization. For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/102629552/Recurring+Deposit" target="_blank">Recurring Deposit Products</a></h4>
+  <h4 class="mw300">List of recurring deposit products in the organization. For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/102629552/Recurring+Deposit" target="_blank">{{'labels.heading.Recurring Deposit Products' | translate}}</a></h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true)">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true)">{{'labels.buttons.Back' | translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next' | translate}}</button>
   </div>
 </ng-template>

src/app/products/recurring-deposit-products/view-recurring-deposit-product/recurring-deposit-general-tab/recurring-deposit-general-tab.component.html

@@ -1,7 +1,7 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['../edit']">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    Edit
+    {{'labels.buttons.Edit' | translate}}
   </button>
 </div>
 
@@ -17,81 +17,81 @@
 
         <mat-divider [inset]="true"></mat-divider>
 
-        <h3 class="mat-h3" fxFlexFill>Details</h3>
+        <h3 class="mat-h3" fxFlexFill>{{'labels.inputs.Details' | translate}}</h3>
 
         <mat-divider [inset]="true"></mat-divider>
 
         <div fxFlexFill>
-          <span fxFlex="40%">Short Name:</span>
+          <span fxFlex="40%">{{'labels.inputs.Short Name' | translate}}:</span>
           <span fxFlex="60%">{{ recurringDepositProduct.shortName }}</span>
         </div>
 
         <div fxFlexFill *ngIf="recurringDepositProduct.description">
-          <span fxFlex="40%">Description:</span>
+          <span fxFlex="40%">{{'labels.inputs.Description' | translate}}:</span>
           <span fxFlex="60%">{{ recurringDepositProduct.description }}</span>
         </div>
 
-        <h3 class="mat-h3" fxFlexFill>Currency Details</h3>
+        <h3 class="mat-h3" fxFlexFill>{{'labels.inputs.Currency' | translate}}</h3>
 
         <mat-divider [inset]="true"></mat-divider>
 
         <div fxFlexFill>
-          <span fxFlex="40%">Currency:</span>
-          <span fxFlex="60%">{{ recurringDepositProduct.currency.name }}</span>
+          <span fxFlex="40%">{{'labels.heading.Currency' | translate}}:</span>
+          <span fxFlex="60%">({{ recurringDepositProduct.currency.code }}) {{ recurringDepositProduct.currency.name }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">Decimal Places:</span>
+          <span fxFlex="40%">{{'labels.inputs.Decimal Places' | translate}}:</span>
           <span fxFlex="60%">{{ recurringDepositProduct.currency.decimalPlaces }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">Currency in Multiples Of:</span>
+          <span fxFlex="40%">{{'labels.inputs.Currency in multiples of' | translate}}:</span>
           <span fxFlex="60%">{{ recurringDepositProduct.currency.inMultiplesOf | formatNumber}}</span>
         </div>
 
-        <h3 class="mat-h3" fxFlexFill>Terms</h3>
+        <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Terms' | translate}}</h3>
 
         <mat-divider [inset]="true"></mat-divider>
 
         <div fxFlexFill>
-          <span fxFlex="40%">Deposit Amount:</span>
+          <span fxFlex="40%">{{'labels.inputs.Deposit Amount' | translate}}:</span>
           <span fxFlex="60%">{{ recurringDepositProduct.depositAmount + ' (Min: ' + (recurringDepositProduct.minDepositAmount ? recurringDepositProduct.minDepositAmount : recurringDepositProduct.depositAmount) + ', Max: ' + (recurringDepositProduct.maxDepositAmount ? recurringDepositProduct.maxDepositAmount : recurringDepositProduct.depositAmount) + ')' }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">Interest Compounding Period:</span>
+          <span fxFlex="40%">{{'labels.inputs.Interest Compounding Period' | translate}}:</span>
           <span fxFlex="60%">{{ recurringDepositProduct.interestCompoundingPeriodType.value }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">Interest Posting Period:</span>
+          <span fxFlex="40%">{{'labels.inputs.Interest Posting Period' | translate}}:</span>
           <span fxFlex="60%">{{ recurringDepositProduct.interestPostingPeriodType.value }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">Interested Calculated Using:</span>
+          <span fxFlex="40%">{{'labels.inputs.Interest Calculated using' | translate}}:</span>
           <span fxFlex="60%">{{ recurringDepositProduct.interestCalculationType.value }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">Days in Years:</span>
+          <span fxFlex="40%">{{'labels.inputs.Days in Year' | translate}}:</span>
           <span fxFlex="60%">{{ recurringDepositProduct.interestCalculationDaysInYearType.value }}</span>
         </div>
 
-        <h3 class="mat-h3" fxFlexFill>Settings</h3>
+        <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Settings' | translate}}</h3>
 
         <mat-divider [inset]="true"></mat-divider>
 
         <div fxFlexFill *ngIf="recurringDepositProduct.lockinPeriodFrequency">
-          <span fxFlex="40%">Lock-in Period:</span>
+          <span fxFlex="40%">{{'labels.inputs.Lock-in Period' | translate}}:</span>
           <span fxFlex="60%" *ngIf="recurringDepositProduct.lockinPeriodFrequency !== undefined">
             {{ recurringDepositProduct.lockinPeriodFrequency }}
             {{ recurringDepositProduct.lockinPeriodFrequencyType.value }}</span>
         </div>
 
         <div fxFlexFill *ngIf="recurringDepositProduct.minDepositTerm">
-          <span fxFlex="40%">Minimum Deposit Term:</span>
+          <span fxFlex="40%">{{'labels.inputs.Minimum Deposit Term' | translate}}:</span>
           <span fxFlex="60%"
             *ngIf="recurringDepositProduct.minDepositTerm !== undefined">{{ recurringDepositProduct.minDepositTerm }}
             &nbsp;
@@ -99,7 +99,7 @@
         </div>
 
         <div fxFlexFill *ngIf="recurringDepositProduct.maxDepositTerm">
-          <span fxFlex="40%">Maximum Deposit Term:</span>
+          <span fxFlex="40%">{{'labels.inputs.Maximum Deposit Term' | translate}}:</span>
           <span fxFlex="60%"
             *ngIf="recurringDepositProduct.maxDepositTerm !== undefined">{{ recurringDepositProduct.maxDepositTerm }}
             &nbsp;
@@ -107,7 +107,7 @@
         </div>
 
         <div fxFlexFill *ngIf="recurringDepositProduct.inMultipleOfDepositTerm">
-          <span fxFlex="40%">Deposit Term In multiple of:</span>
+          <span fxFlex="40%">{{'labels.inputs.Deposit Term In multiple of' | translate}}:</span>
           <span fxFlex="60%"
             *ngIf="recurringDepositProduct.inMultipleOfDepositTerm !== undefined">{{ recurringDepositProduct.inMultipleOfDepositTerm }}
             -
@@ -115,65 +115,65 @@
         </div>
 
         <div fxFlexFill *ngIf="recurringDepositProduct.isMandatoryDeposit !== undefined">
-          <span fxFlex="40%">Recurring Deposit Type:</span>
-          <span fxFlex="60%" *ngIf="recurringDepositProduct.isMandatoryDeposit"> Mandatory </span>
-          <span fxFlex="60%" *ngIf="!recurringDepositProduct.isMandatoryDeposit"> Voluntary </span>
+          <span fxFlex="40%">{{'labels.inputs.Recurring Deposit Type' | translate}}:</span>
+          <span fxFlex="60%" *ngIf="recurringDepositProduct.isMandatoryDeposit"> {{'labels.text.Mandatory' | translate}} </span>
+          <span fxFlex="60%" *ngIf="!recurringDepositProduct.isMandatoryDeposit"> {{'labels.text.Voluntary' | translate}} </span>
         </div>
 
         <div fxFlexFill *ngIf="recurringDepositProduct.preClosurePenalInterest">
-          <span fxFlex="40%">Apply penal interest (less):</span>
-          <span fxFlex="60%">{{recurringDepositProduct.preClosurePenalInterest}} &nbsp; &nbsp; % &nbsp; &nbsp; On
-            &nbsp;&nbsp;
-            {{recurringDepositProduct.preClosurePenalInterestOnType.value}}</span>
+          <span fxFlex="40%">{{'labels.inputs.Apply penal interest (less)' | translate}}:</span>
+          <span fxFlex="60%"><span class="m-r-5">{{recurringDepositProduct.preClosurePenalInterest}}</span>%<span class="m-r-5">On</span>
+            {{recurringDepositProduct.preClosurePenalInterestOnType.value}}
+          </span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">Is withhold tax Applicable:</span>
-          <span fxFlex="60%">{{ recurringDepositProduct.withHoldTax }}</span>
+          <span fxFlex="40%">{{'labels.inputs.Withhold Tax is Applicable' | translate}}:</span>
+          <span fxFlex="60%">{{ recurringDepositProduct.withHoldTax | yesNo }}</span>
         </div>
 
         <div fxFlexFill *ngIf="recurringDepositProduct.withHoldTax">
-          <span fxFlex="40%">Withhold Tax group:</span>
+          <span fxFlex="40%">{{'labels.inputs.Withhold Tax group' | translate}}:</span>
           <span fxFlex="60%">{{ recurringDepositProduct.taxGroup.name }}</span>
         </div>
 
         <div *ngIf="recurringDepositProduct.activeChart" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column" >
 
-          <h3 class="mat-h3" fxFlexFill>Interest Rate Charts</h3>
+          <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Interest Rate Charts' | translate}}</h3>
 
           <mat-divider [inset]="true"></mat-divider>
 
           <div fxFlexFill  fxLayout="row wrap" fxLayout.lt-md="column">
 
             <div fxFlexFill *ngIf="recurringDepositProduct.activeChart.name">
-              <span fxFlex="40%">Name:</span>
+              <span fxFlex="40%">{{'labels.inputs.Name' | translate}}:</span>
               <span fxFlex="60%">{{ recurringDepositProduct.activeChart.name }}</span>
             </div>
 
             <div fxFlexFill>
-              <span fxFlex="40%">Valid from Date:</span>
+              <span fxFlex="40%">{{'labels.inputs.Valid from Date' | translate}}:</span>
               <span fxFlex="60%">{{ recurringDepositProduct.activeChart.fromDate | dateFormat }}</span>
             </div>
 
             <div fxFlexFill *ngIf="recurringDepositProduct.activeChart.endDate">
-              <span fxFlex="40%">End Date:</span>
+              <span fxFlex="40%">{{'labels.inputs.End Date' | translate}}:</span>
               <span fxFlex="60%">{{ recurringDepositProduct.activeChart.endDate | dateFormat }}</span>
             </div>
 
             <div fxFlexFill *ngIf="recurringDepositProduct.activeChart.description">
-              <span fxFlex="40%">Description:</span>
+              <span fxFlex="40%">{{'labels.inputs.Description' | translate}}:</span>
               <span fxFlex="60%">{{ recurringDepositProduct.activeChart.description }}</span>
             </div>
 
             <div fxFlexFill>
-              <span fxFlex="40%">Primary Grouping by Amount:</span>
+              <span fxFlex="40%">{{'labels.inputs.Primary Grouping by Amount' | translate}}:</span>
               <span fxFlex="60%">{{ recurringDepositProduct.activeChart.isPrimaryGroupingByAmount | yesNo }}</span>
             </div>
 
             <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="recurringDepositProduct.activeChart.chartSlabs" multiTemplateDataRows>
 
               <ng-container matColumnDef="period">
-                <th mat-header-cell *matHeaderCellDef> Period </th>
+                <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Period' | translate}} </th>
                 <td mat-cell *matCellDef="let chartSlab">
                   <div *ngIf="chartSlab.fromPeriod !== undefined">
                     {{ chartSlab.fromPeriod }} - {{ chartSlab.toPeriod }} {{ chartSlab.periodType.value }}
@@ -185,7 +185,7 @@
               </ng-container>
 
               <ng-container matColumnDef="amountRange">
-                <th mat-header-cell *matHeaderCellDef> Amount Range </th>
+                <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Amount Range' | translate}} </th>
                 <td mat-cell *matCellDef="let chartSlab">
                   <div *ngIf="chartSlab.amountRangeFrom !== undefined">
                     {{ chartSlab.amountRangeFrom }} - {{ chartSlab.amountRangeTo }}
@@ -198,30 +198,30 @@
               </ng-container>
 
               <ng-container matColumnDef="annualInterestRate">
-                <th mat-header-cell *matHeaderCellDef> Interest </th>
+                <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Interest' | translate}} </th>
                 <td mat-cell *matCellDef="let chartSlab">
                   {{ chartSlab.annualInterestRate }}
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="description">
-                <th mat-header-cell *matHeaderCellDef> Description </th>
+                <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Description' | translate}} </th>
                 <td mat-cell *matCellDef="let chartSlab">
                   {{ chartSlab.description }}
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="actions">
-                <th mat-header-cell *matHeaderCellDef> Actions </th>
+                <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </th>
                 <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
                   <button mat-button color="primary" (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex">
                     <span *ngIf="expandChartSlabIndex !== chartSlabIndex">
                       <fa-icon icon="eye" class="m-r-10"></fa-icon>
-                      View Incentives
+                      {{'labels.buttons.View Incentives' | translate}}
                     </span>
                     <span *ngIf="expandChartSlabIndex === chartSlabIndex">
                       <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
-                      Hide Incentives
+                      {{'labels.buttons.Hide Incentives' | translate}}
                     </span>
                   </button>
                 </td>
@@ -233,34 +233,34 @@
                     <mat-card fxLayout="row wrap" fxFlexFill>
 
                       <h4 class="mat-h4" fxFlex="23%">
-                        Incentives
+                        {{'labels.heading.Incentives' | translate}}
                       </h4>
 
                       <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="chartSlab.incentives">
 
                         <ng-container matColumnDef="entityType">
-                          <th mat-header-cell *matHeaderCellDef> Entity Type </th>
+                          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Entity Type' | translate}} </th>
                           <td mat-cell *matCellDef="let incentive">
                             {{ incentive.entityType | find:recurringDepositProductTemplate.chartTemplate.entityTypeOptions:'id':'value' }}
                           </td>
                         </ng-container>
 
                         <ng-container matColumnDef="attributeName">
-                          <th mat-header-cell *matHeaderCellDef> Attribute Name </th>
+                          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Attribute Name' | translate}} </th>
                           <td mat-cell *matCellDef="let incentive">
                             {{ incentive.attributeName | find:recurringDepositProductTemplate.chartTemplate.attributeNameOptions:'id':'value' }}
                           </td>
                         </ng-container>
 
                         <ng-container matColumnDef="conditionType">
-                          <th mat-header-cell *matHeaderCellDef> Condition Type </th>
+                          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Condition Type' | translate}} </th>
                           <td mat-cell *matCellDef="let incentive">
                             {{ incentive.conditionType | find:recurringDepositProductTemplate.chartTemplate.conditionTypeOptions:'id':'value' }}
                           </td>
                         </ng-container>
 
                         <ng-container matColumnDef="attributeValue">
-                          <th mat-header-cell *matHeaderCellDef> Attribute Value </th>
+                          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Attribute Value' | translate}} </th>
                           <td mat-cell *matCellDef="let incentive" [ngSwitch]="incentive.attributeName">
                             <span *ngSwitchCase="2">{{ incentive.attributeValue | find:recurringDepositProductTemplate.chartTemplate.genderOptions:'id':'name' }}</span>
                             <span *ngSwitchCase="3">{{ incentive.attributeValue }}</span>
@@ -270,14 +270,14 @@
                         </ng-container>
 
                         <ng-container matColumnDef="incentiveType">
-                          <th mat-header-cell *matHeaderCellDef> Incentive Type </th>
+                          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Incentive Type' | translate}} </th>
                           <td mat-cell *matCellDef="let incentive">
                             {{ incentive.incentiveType | find:recurringDepositProductTemplate.chartTemplate.incentiveTypeOptions:'id':'value'}}
                           </td>
                         </ng-container>
 
                         <ng-container matColumnDef="amount">
-                          <th mat-header-cell *matHeaderCellDef> Amount </th>
+                          <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Amount' | translate}} </th>
                           <td mat-cell *matCellDef="let incentive">
                             {{ incentive.amount }}
                           </td>
@@ -307,35 +307,35 @@
 
         <div *ngIf="recurringDepositProduct.charges.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
 
-          <h3 class="mat-h3" fxFlexFill>Charges</h3>
+          <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Charges' | translate}}</h3>
 
           <mat-divider [inset]="true"></mat-divider>
 
           <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="recurringDepositProduct.charges">
 
             <ng-container matColumnDef="name">
-              <th mat-header-cell *matHeaderCellDef> Name </th>
+              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Name' | translate}} </th>
               <td mat-cell *matCellDef="let charge">
                 {{ charge.name }}
               </td>
             </ng-container>
 
             <ng-container matColumnDef="type">
-              <th mat-header-cell *matHeaderCellDef> Type </th>
+              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Type' | translate}} </th>
               <td mat-cell *matCellDef="let charge">
                 {{ charge.chargeCalculationType.value }}
               </td>
             </ng-container>
 
             <ng-container matColumnDef="amount">
-              <th mat-header-cell *matHeaderCellDef> Amount </th>
+              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Amount' | translate}} </th>
               <td mat-cell *matCellDef="let charge">
                 {{ charge.amount | formatNumber }}
               </td>
             </ng-container>
 
             <ng-container matColumnDef="collectedon">
-              <th mat-header-cell *matHeaderCellDef> Collected On </th>
+              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Collected On' | translate}} </th>
               <td mat-cell *matCellDef="let charge">
                 {{ charge.chargeTimeType.value }}
               </td>
@@ -348,7 +348,7 @@
 
         </div>
 
-        <h3 class="mat-h3" fxFlexFill>Accounting</h3>
+        <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Accounting' | translate}}</h3>
 
         <mat-divider [inset]="true"></mat-divider>
 
@@ -360,26 +360,26 @@
 
         <div fxFlexFill *ngIf="recurringDepositProduct.paymentChannelToFundSourceMappings?.length || recurringDepositProduct.feeToIncomeAccountMappings?.length || recurringDepositProduct.penaltyToIncomeAccountMappings?.length " fxLayout="row wrap" fxLayout.lt-md="column">
 
-          <h3 class="mat-h3" fxFlexFill>Advanced Accounting Rules</h3>
+          <h3 class="mat-h3" fxFlexFill>{{'labels.inputs.Advanced Accounting Rules' | translate}}</h3>
 
           <mat-divider [inset]="true"></mat-divider>
 
           <div *ngIf="recurringDepositProduct.paymentChannelToFundSourceMappings?.length" fxFlexFill fxLayout="row wrap"
             fxLayout.lt-md="column">
-            <h4 class="mat-h4" fxFlexFill>Configure Fund Sources for Payment Channels</h4>
+            <h4 class="mat-h4" fxFlexFill>{{'labels.inputs.Configure Fund Sources for Payment Channels' | translate}}</h4>
 
             <table fxFlexFill class="mat-elevation-z1" mat-table
               [dataSource]="recurringDepositProduct.paymentChannelToFundSourceMappings">
 
               <ng-container matColumnDef="paymentTypeId">
-                <th mat-header-cell *matHeaderCellDef> Payment Type </th>
+                <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Payment Type' | translate}} </th>
                 <td mat-cell *matCellDef="let paymentFundSource">
                   {{ paymentFundSource.paymentType.name }}
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="fundSourceAccountId">
-                <th mat-header-cell *matHeaderCellDef> Fund Source </th>
+                <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Fund Source' | translate}} </th>
                 <td mat-cell *matCellDef="let paymentFundSource">
                   {{ paymentFundSource.fundSourceAccount.name }}
                 </td>
@@ -396,20 +396,20 @@
             fxLayout.lt-md="column">
 
 
-            <h4 class="mat-h4" fxFlexFill>Fees to Specific Income Accounts</h4>
+            <h4 class="mat-h4" fxFlexFill>{{'labels.inputs.Fees to Specific Income Accounts' | translate}}</h4>
 
             <table fxFlexFill class="mat-elevation-z1" mat-table
               [dataSource]="recurringDepositProduct.feeToIncomeAccountMappings">
 
               <ng-container matColumnDef="chargeId">
-                <th mat-header-cell *matHeaderCellDef> Fees </th>
+                <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Fees' | translate}} </th>
                 <td mat-cell *matCellDef="let feesIncome">
                   {{ feesIncome.charge.name }}
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="incomeAccountId">
-                <th mat-header-cell *matHeaderCellDef> Income Account </th>
+                <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Income Account' | translate}} </th>
                 <td mat-cell *matCellDef="let feesIncome">
                   {{ feesIncome.incomeAccount.name }}
                 </td>
@@ -425,20 +425,20 @@
           <div *ngIf="recurringDepositProduct.penaltyToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap"
             fxLayout.lt-md="column">
 
-            <h4 class="mat-h4" fxFlexFill>Penalties to Specific Income Accounts</h4>
+            <h4 class="mat-h4" fxFlexFill>{{'labels.inputs.Penalties to Specific Income Accounts' | translate}}</h4>
 
             <table fxFlexFill class="mat-elevation-z1" mat-table
               [dataSource]="recurringDepositProduct.penaltyToIncomeAccountMappings">
 
               <ng-container matColumnDef="chargeId">
-                <th mat-header-cell *matHeaderCellDef> Penalty </th>
+                <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Penalty' | translate}} </th>
                 <td mat-cell *matCellDef="let penaltyIncome">
                   {{ penaltyIncome.charge.name }}
                 </td>
               </ng-container>
 
               <ng-container matColumnDef="incomeAccountId">
-                <th mat-header-cell *matHeaderCellDef> Income Account </th>
+                <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Income Account' | translate}} </th>
                 <td mat-cell *matCellDef="let penaltyIncome">
                   {{ penaltyIncome.incomeAccount.name }}
                 </td>

src/app/products/recurring-deposit-products/view-recurring-deposit-product/view-recurring-deposit-product.component.html

@@ -5,7 +5,7 @@
     <nav mat-tab-nav-bar class="navigation-tabs">
       <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive"
         [active]="general.isActive">
-        General
+        {{'labels.heading.General' | translate}}
       </a>
       <ng-container *ngFor="let recurringDepositDatatable of recurringDepositDatatables">
         <a mat-tab-link [routerLink]="['./datatables',recurringDepositDatatable.registeredTableName]" routerLinkActive

src/app/products/saving-products/create-saving-product/create-saving-product.component.html

@@ -24,7 +24,7 @@
 
     <mat-step [stepControl]="savingProductDetailsForm">
 
-      <ng-template matStepLabel>{{'labels.inputs.Details' | translate}}</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.DETAILS' | translate}}</ng-template>
 
       <mifosx-saving-product-details-step></mifosx-saving-product-details-step>
 
@@ -32,7 +32,7 @@
 
     <mat-step [stepControl]="savingProductCurrencyForm">
 
-      <ng-template matStepLabel>{{'labels.inputs.Currency' | translate}}</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.CURRENCY' | translate}}</ng-template>
 
       <mifosx-saving-product-currency-step [savingProductsTemplate]="savingProductsTemplate"></mifosx-saving-product-currency-step>
 

src/app/products/saving-products/saving-product-stepper/saving-product-accounting-step/saving-product-accounting-step.component.html

@@ -2,7 +2,8 @@
 
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
-    <mat-radio-group fxFlex="98%" fxLayout="row" fxLayoutGap="5%" fxLayout.lt-md="column" formControlName="accountingRule">
+    <mat-radio-group fxFlex="98%" fxLayout="row" fxLayoutGap="5%" fxLayout.lt-md="column"
+      formControlName="accountingRule">
       <mat-radio-button *ngFor="let accountingRule of accountingRuleData; let i =  index" [value]="i+1">
         {{ 'labels.accounting.' + accountingRule | translate }}
       </mat-radio-button>
@@ -16,34 +17,22 @@
 
       <mifosx-gl-account-selector fxFlex="48%"
         [inputFormControl]="savingProductAccountingForm.controls.savingsReferenceAccountId"
-        [glAccountList]="assetAccountData"
-        [required]="true"
-        [inputLabel]="'Saving reference'"
-      >
+        [glAccountList]="assetAccountData" [required]="true" [inputLabel]="'Saving reference'">
       </mifosx-gl-account-selector>
 
       <mifosx-gl-account-selector fxFlex="48%"
         [inputFormControl]="savingProductAccountingForm.controls.overdraftPortfolioControlId"
-        [glAccountList]="assetAccountData"
-        [required]="true"
-        [inputLabel]="'Overdraft portfolio'"
-      >
+        [glAccountList]="assetAccountData" [required]="true" [inputLabel]="'Overdraft portfolio'">
       </mifosx-gl-account-selector>
 
-      <mifosx-gl-account-selector fxFlex="48%" *ngIf="isAccrualAccounting()" 
+      <mifosx-gl-account-selector fxFlex="48%" *ngIf="isAccrualAccounting()"
         [inputFormControl]="savingProductAccountingForm.controls.feesReceivableAccountId"
-        [glAccountList]="assetAccountData"
-        [required]="true"
-        [inputLabel]="'Fees Receivable'"
-      >
+        [glAccountList]="assetAccountData" [required]="true" [inputLabel]="'Fees Receivable'">
       </mifosx-gl-account-selector>
 
-      <mifosx-gl-account-selector fxFlex="48%" *ngIf="isAccrualAccounting()" 
+      <mifosx-gl-account-selector fxFlex="48%" *ngIf="isAccrualAccounting()"
         [inputFormControl]="savingProductAccountingForm.controls.penaltiesReceivableAccountId"
-        [glAccountList]="assetAccountData"
-        [required]="true"
-        [inputLabel]="'Penalties Receivable'"
-      >
+        [glAccountList]="assetAccountData" [required]="true" [inputLabel]="'Penalties Receivable'">
       </mifosx-gl-account-selector>
 
       <mat-divider fxFlex="98%"></mat-divider>
@@ -52,52 +41,34 @@
 
       <mifosx-gl-account-selector fxFlex="48%"
         [inputFormControl]="savingProductAccountingForm.controls.savingsControlAccountId"
-        [glAccountList]="liabilityAccountData"
-        [required]="true"
-        [inputLabel]="'Saving control'"
-      >
+        [glAccountList]="liabilityAccountData" [required]="true" [inputLabel]="'Saving control'">
       </mifosx-gl-account-selector>
 
       <mifosx-gl-account-selector fxFlex="48%"
         [inputFormControl]="savingProductAccountingForm.controls.transfersInSuspenseAccountId"
-        [glAccountList]="liabilityAccountData"
-        [required]="true"
-        [inputLabel]="'Savings transfers in suspense'"
-      >
+        [glAccountList]="liabilityAccountData" [required]="true" [inputLabel]="'Savings transfers in suspense'">
       </mifosx-gl-account-selector>
 
       <mifosx-gl-account-selector fxFlex="48%" *ngIf="isAccrualAccounting()"
         [inputFormControl]="savingProductAccountingForm.controls.interestPayableAccountId"
-        [glAccountList]="liabilityAccountData"
-        [required]="true"
-        [inputLabel]="'Interest Payable'"
-      >
+        [glAccountList]="liabilityAccountData" [required]="true" [inputLabel]="'Interest Payable'">
       </mifosx-gl-account-selector>
 
       <mifosx-gl-account-selector fxFlex="48%" *ngIf="isDormancyTrackingActive.value"
         [inputFormControl]="savingProductAccountingForm.controls.escheatLiabilityId"
-        [glAccountList]="liabilityAccountData"
-        [required]="true"
-        [inputLabel]="'Escheat liability'"
-      >
+        [glAccountList]="liabilityAccountData" [required]="true" [inputLabel]="'Escheat liability'">
       </mifosx-gl-account-selector>
 
       <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Expenses' | translate}}</h4>
 
       <mifosx-gl-account-selector fxFlex="48%"
         [inputFormControl]="savingProductAccountingForm.controls.interestOnSavingsAccountId"
-        [glAccountList]="expenseAccountData"
-        [required]="true"
-        [inputLabel]="'Interest on savings'"
-      >
+        [glAccountList]="expenseAccountData" [required]="true" [inputLabel]="'Interest on savings'">
       </mifosx-gl-account-selector>
 
       <mifosx-gl-account-selector fxFlex="48%"
-        [inputFormControl]="savingProductAccountingForm.controls.writeOffAccountId"
-        [glAccountList]="expenseAccountData"
-        [required]="true"
-        [inputLabel]="'Write-off'"
-      >
+        [inputFormControl]="savingProductAccountingForm.controls.writeOffAccountId" [glAccountList]="expenseAccountData"
+        [required]="true" [inputLabel]="'Write-off'">
       </mifosx-gl-account-selector>
 
       <mat-divider fxFlex="98%"></mat-divider>
@@ -106,44 +77,42 @@
 
       <mifosx-gl-account-selector fxFlex="48%"
         [inputFormControl]="savingProductAccountingForm.controls.incomeFromFeeAccountId"
-        [glAccountList]="incomeAccountData"
-        [required]="true"
-        [inputLabel]="'Income from fees'"
-      >
+        [glAccountList]="incomeAccountData" [required]="true" [inputLabel]="'Income from fees'">
       </mifosx-gl-account-selector>
 
       <mifosx-gl-account-selector fxFlex="48%"
         [inputFormControl]="savingProductAccountingForm.controls.incomeFromPenaltyAccountId"
-        [glAccountList]="incomeAccountData"
-        [required]="true"
-        [inputLabel]="'Income from penalties'"
-      >
+        [glAccountList]="incomeAccountData" [required]="true" [inputLabel]="'Income from penalties'">
       </mifosx-gl-account-selector>
 
       <mifosx-gl-account-selector fxFlex="48%"
         [inputFormControl]="savingProductAccountingForm.controls.incomeFromInterestId"
-        [glAccountList]="incomeAccountData"
-        [required]="true"
-        [inputLabel]="'Overdraft Interest Income'"
-      >
+        [glAccountList]="incomeAccountData" [required]="true" [inputLabel]="'Overdraft Interest Income'">
       </mifosx-gl-account-selector>
 
       <mat-divider fxFlex="98%"></mat-divider>
 
-      <mat-checkbox fxFlex="73%" formControlName="advancedAccountingRules">{{'labels.heading.Advanced Accounting Rules' | translate}}</mat-checkbox>
+      <mat-checkbox fxFlex="73%" formControlName="advancedAccountingRules">{{'labels.heading.Advanced Accounting Rules'
+        | translate}}</mat-checkbox>
 
-      <div *ngIf="savingProductAccountingForm.value.advancedAccountingRules" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+      <div *ngIf="savingProductAccountingForm.value.advancedAccountingRules" fxFlexFill fxLayout="row wrap"
+        fxLayoutGap="2%" fxLayout.lt-md="column">
 
-        <h4 fxFlex="33%" class="mat-h4">{{'labels.heading.Configure Fund Sources for Payment Channels' | translate}}</h4>
+        <div fxFlex="100%">
 
-        <div fxFlex="63%">
-          <button type="button" mat-raised-button color="primary" (click)="add('PaymentFundSource', paymentChannelToFundSourceMappings)">
+        <h4 fxFlex="63%" class="mat-h4">{{'labels.heading.Configure Fund Sources for Payment Channels' | translate}}
+        </h4>
+
+        <div fxFlex="33%">
+          <button type="button" mat-raised-button color="primary"
+            (click)="add('PaymentFundSource', paymentChannelToFundSourceMappings)">
             <fa-icon icon="plus" class="m-r-10"></fa-icon>
             {{'labels.buttons.Add' | translate}}
           </button>
         </div>
 
-        <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="paymentChannelToFundSourceMappings.value" *ngIf="paymentChannelToFundSourceMappings.value.length !== 0">
+        <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="paymentChannelToFundSourceMappings.value"
+          *ngIf="paymentChannelToFundSourceMappings.value.length !== 0">
 
           <ng-container matColumnDef="paymentTypeId">
             <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Payment Type' | translate}} </th>
@@ -160,9 +129,10 @@
           </ng-container>
 
           <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef>  {{'labels.inputs.Actions' | translate}} </th>
+            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </th>
             <td mat-cell *matCellDef="let paymentFundSource; let i = index">
-              <button mat-icon-button color="primary" (click)="edit('PaymentFundSource', paymentChannelToFundSourceMappings, i)">
+              <button mat-icon-button color="primary"
+                (click)="edit('PaymentFundSource', paymentChannelToFundSourceMappings, i)">
                 <fa-icon icon="edit"></fa-icon>
               </button>
               <button mat-icon-button color="warn" (click)="delete(paymentChannelToFundSourceMappings, i)">
@@ -175,91 +145,103 @@
           <tr mat-row *matRowDef="let row; columns: paymentFundSourceDisplayedColumns;"></tr>
 
         </table>
-
-        <h4 fxFlex="33%" class="mat-h4">{{'labels.heading.Map Fees to Specific Income Accounts' | translate}}</h4>
-
-        <div fxFlex="63%" *ngIf="existCharges()">
-          <button type="button" mat-raised-button color="primary" (click)="add('FeesIncome', feeToIncomeAccountMappings)">
-            <fa-icon icon="plus" class="m-r-10"></fa-icon>
-            {{'labels.buttons.Add' | translate}}
-          </button>
         </div>
 
-        <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="feeToIncomeAccountMappings.value" *ngIf="feeToIncomeAccountMappings.value.length !== 0">
+        <div fxFlex="100%" *ngIf="existCharges()">
 
-          <ng-container matColumnDef="chargeId">
-            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Fees' | translate}} </th>
-            <td mat-cell *matCellDef="let feesIncome">
-              {{ feesIncome.chargeId | find:chargeData:'id':'name' }}
-            </td>
-          </ng-container>
+          <h4 fxFlex="63%" class="mat-h4">{{'labels.heading.Map Fees to Specific Income Accounts' | translate}}</h4>
 
-          <ng-container matColumnDef="incomeAccountId">
-            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Income Account' | translate}} </th>
-            <td mat-cell *matCellDef="let feesIncome">
-              {{ feesIncome.incomeAccountId | find:incomeAccountData:'id':'name' }}
-            </td>
-          </ng-container>
+          <div fxFlex="33%" *ngIf="existCharges()">
+            <button type="button" mat-raised-button color="primary"
+              (click)="add('FeesIncome', feeToIncomeAccountMappings)">
+              <fa-icon icon="plus" class="m-r-10"></fa-icon>
+              {{'labels.buttons.Add' | translate}}
+            </button>
+          </div>
 
-          <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </th>
-            <td mat-cell *matCellDef="let feesIncome; let i = index">
-              <button mat-icon-button color="primary" (click)="edit('FeesIncome', feeToIncomeAccountMappings, i)">
-                <fa-icon icon="edit"></fa-icon>
-              </button>
-              <button mat-icon-button color="warn" (click)="delete(feeToIncomeAccountMappings, i)">
-                <fa-icon icon="trash"></fa-icon>
-              </button>
-            </td>
-          </ng-container>
+          <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="feeToIncomeAccountMappings.value"
+            *ngIf="feeToIncomeAccountMappings.value.length !== 0">
 
-          <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
-          <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns;"></tr>
+            <ng-container matColumnDef="chargeId">
+              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Fees' | translate}} </th>
+              <td mat-cell *matCellDef="let feesIncome">
+                {{ feesIncome.chargeId | find:chargeData:'id':'name' }}
+              </td>
+            </ng-container>
 
-        </table>
+            <ng-container matColumnDef="incomeAccountId">
+              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Income Account' | translate}} </th>
+              <td mat-cell *matCellDef="let feesIncome">
+                {{ feesIncome.incomeAccountId | find:incomeAccountData:'id':'name' }}
+              </td>
+            </ng-container>
 
-        <h4 fxFlex="33%" class="mat-h4">{{'labels.heading.Map Penalties to Specific Income Accounts' | translate}}</h4>
+            <ng-container matColumnDef="actions">
+              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </th>
+              <td mat-cell *matCellDef="let feesIncome; let i = index">
+                <button mat-icon-button color="primary" (click)="edit('FeesIncome', feeToIncomeAccountMappings, i)">
+                  <fa-icon icon="edit"></fa-icon>
+                </button>
+                <button mat-icon-button color="warn" (click)="delete(feeToIncomeAccountMappings, i)">
+                  <fa-icon icon="trash"></fa-icon>
+                </button>
+              </td>
+            </ng-container>
 
-        <div fxFlex="63%" *ngIf="existCharges()">
-          <button type="button" mat-raised-button color="primary" (click)="add('PenaltyIncome', penaltyToIncomeAccountMappings)">
-            <fa-icon icon="plus" class="m-r-10"></fa-icon>
-            {{'labels.buttons.Add' | translate}}
-          </button>
+            <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns;"></tr>
+
+          </table>
         </div>
 
+        <div fxFlex="100%" *ngIf="existCharges()">
 
-        <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="penaltyToIncomeAccountMappings.value" *ngIf="penaltyToIncomeAccountMappings.value.length !== 0">
+          <h4 fxFlex="63%" class="mat-h4">{{'labels.heading.Map Penalties to Specific Income Accounts' | translate}}
+          </h4>
 
-          <ng-container matColumnDef="chargeId">
-            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Penalty' | translate}} </th>
-            <td mat-cell *matCellDef="let penaltyIncome">
-              {{ penaltyIncome.chargeId | find:penaltyData:'id':'name' }}
-            </td>
-          </ng-container>
+          <div fxFlex="33%">
+            <button type="button" mat-raised-button color="primary"
+              (click)="add('PenaltyIncome', penaltyToIncomeAccountMappings)">
+              <fa-icon icon="plus" class="m-r-10"></fa-icon>
+              {{'labels.buttons.Add' | translate}}
+            </button>
+          </div>
 
-          <ng-container matColumnDef="incomeAccountId">
-            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Income Account' | translate}} </th>
-            <td mat-cell *matCellDef="let penaltyIncome">
-              {{ penaltyIncome.incomeAccountId | find:incomeAccountData:'id':'name' }}
-            </td>
-          </ng-container>
+          <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="penaltyToIncomeAccountMappings.value"
+            *ngIf="penaltyToIncomeAccountMappings.value.length !== 0">
 
-          <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions </th>
-            <td mat-cell *matCellDef="let penaltyIncome; let i = index">
-              <button mat-icon-button color="primary" (click)="edit('PenaltyIncome', penaltyToIncomeAccountMappings, i)">
-                <fa-icon icon="edit"></fa-icon>
-              </button>
-              <button mat-icon-button color="warn" (click)="delete(penaltyToIncomeAccountMappings, i)">
-                <fa-icon icon="trash"></fa-icon>
-              </button>
-            </td>
-          </ng-container>
+            <ng-container matColumnDef="chargeId">
+              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Penalty' | translate}} </th>
+              <td mat-cell *matCellDef="let penaltyIncome">
+                {{ penaltyIncome.chargeId | find:penaltyData:'id':'name' }}
+              </td>
+            </ng-container>
 
-          <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
-          <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns;"></tr>
+            <ng-container matColumnDef="incomeAccountId">
+              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Income Account' | translate}} </th>
+              <td mat-cell *matCellDef="let penaltyIncome">
+                {{ penaltyIncome.incomeAccountId | find:incomeAccountData:'id':'name' }}
+              </td>
+            </ng-container>
 
-        </table>
+            <ng-container matColumnDef="actions">
+              <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </th>
+              <td mat-cell *matCellDef="let penaltyIncome; let i = index">
+                <button mat-icon-button color="primary"
+                  (click)="edit('PenaltyIncome', penaltyToIncomeAccountMappings, i)">
+                  <fa-icon icon="edit"></fa-icon>
+                </button>
+                <button mat-icon-button color="warn" (click)="delete(penaltyToIncomeAccountMappings, i)">
+                  <fa-icon icon="trash"></fa-icon>
+                </button>
+              </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns;"></tr>
+
+          </table>
+        </div>
 
       </div>
 
@@ -278,4 +260,4 @@
     </button>
   </div>
 
-</form>
+</form>

src/app/products/saving-products/saving-product-stepper/saving-product-accounting-step/saving-product-accounting-step.component.ts

@@ -7,6 +7,7 @@ import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.co
 
 import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
 import { SelectBase } from 'app/shared/form-dialog/formfield/model/select-base';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'mifosx-saving-product-accounting-step',
@@ -36,7 +37,8 @@ export class SavingProductAccountingStepComponent implements OnInit {
   feesPenaltyIncomeDisplayedColumns: string[] = ['chargeId', 'incomeAccountId', 'actions'];
 
   constructor(private formBuilder: UntypedFormBuilder,
-    public dialog: MatDialog) {
+    private dialog: MatDialog,
+    private translateService: TranslateService) {
     this.createsavingProductAccountingForm();
     this.setConditionalControls();
   }
@@ -240,9 +242,12 @@ export class SavingProductAccountingStepComponent implements OnInit {
 
   getData(formType: string, values?: any) {
     switch (formType) {
-      case 'PaymentFundSource': return { title: 'Configure Fund Sources for Payment Channels', formfields: this.getPaymentFundSourceFormfields(values) };
-      case 'FeesIncome': return { title: 'Map Fees to Income Accounts', formfields: this.getFeesIncomeFormfields(values) };
-      case 'PenaltyIncome': return { title: 'Map Penalties to Specific Income Accounts', formfields: this.getPenaltyIncomeFormfields(values) };
+      case 'PaymentFundSource': return { title: this.translateService.instant('labels.heading.Configure Fund Sources for Payment Channels'),
+        formfields: this.getPaymentFundSourceFormfields(values) };
+      case 'FeesIncome': return { title: this.translateService.instant('labels.heading.Map Fees to Specific Income Accounts'),
+        formfields: this.getFeesIncomeFormfields(values) };
+      case 'PenaltyIncome': return { title: this.translateService.instant('labels.heading.Map Penalties to Specific Income Accounts'),
+        formfields: this.getPenaltyIncomeFormfields(values) };
     }
   }
 
@@ -250,7 +255,7 @@ export class SavingProductAccountingStepComponent implements OnInit {
     const formfields: FormfieldBase[] = [
       new SelectBase({
         controlName: 'paymentTypeId',
-        label: 'Payment Type',
+        label: this.translateService.instant('labels.inputs.Payment Type'),
         value: values ? values.paymentTypeId : this.paymentTypeData[0].id,
         options: { label: 'name', value: 'id', data: this.paymentTypeData },
         required: true,
@@ -258,7 +263,7 @@ export class SavingProductAccountingStepComponent implements OnInit {
       }),
       new SelectBase({
         controlName: 'fundSourceAccountId',
-        label: 'Fund Source',
+        label: this.translateService.instant('labels.inputs.Fund Source'),
         value: values ? values.fundSourceAccountId : this.combinedAccountData[0].id,
         options: { label: 'name', value: 'id', data: this.combinedAccountData },
         required: true,
@@ -272,7 +277,7 @@ export class SavingProductAccountingStepComponent implements OnInit {
     const formfields: FormfieldBase[] = [
       new SelectBase({
         controlName: 'chargeId',
-        label: 'Fees',
+        label: this.translateService.instant('labels.inputs.Fees'),
         value: values ? values.chargeId : this.chargeData[0].id,
         options: { label: 'name', value: 'id', data: this.chargeData },
         required: true,
@@ -280,7 +285,7 @@ export class SavingProductAccountingStepComponent implements OnInit {
       }),
       new SelectBase({
         controlName: 'incomeAccountId',
-        label: 'Income Account',
+        label: this.translateService.instant('labels.inputs.Income Account'),
         value: values ? values.incomeAccountId : this.incomeAccountData[0].id,
         options: { label: 'name', value: 'id', data: this.incomeAccountData },
         required: true,
@@ -294,7 +299,7 @@ export class SavingProductAccountingStepComponent implements OnInit {
     const formfields: FormfieldBase[] = [
       new SelectBase({
         controlName: 'chargeId',
-        label: 'Penalty',
+        label: this.translateService.instant('labels.inputs.Penalty'),
         value: values ? values.chargeId : this.penaltyData[0].id,
         options: { label: 'name', value: 'id', data: this.penaltyData },
         required: true,
@@ -302,7 +307,7 @@ export class SavingProductAccountingStepComponent implements OnInit {
       }),
       new SelectBase({
         controlName: 'incomeAccountId',
-        label: 'Income Account',
+        label: this.translateService.instant('labels.inputs.Income Account'),
         value: values ? values.incomeAccountId : this.incomeAccountData[0].id,
         options: { label: 'name', value: 'id', data: this.incomeAccountData },
         required: true,

src/app/products/saving-products/saving-product-stepper/saving-product-currency-step/saving-product-currency-step.component.html

@@ -24,7 +24,7 @@
 
     <mat-form-field fxFlex="48%">
       <mat-label>{{'labels.inputs.Currency in multiples of' | translate}}</mat-label>
-      <input type="number" matInput matTooltip="The amount to be rounded off (example: 100 rounds off to 200, 300, 400, etc)" formControlName="inMultiplesOf" required>
+      <input type="number" matInput matTooltip="The amount to be rounded off (example: 100 rounds off to 200, 300, 400, etc)" formControlName="inMultiplesOf">
       <mat-error>
         {{'labels.inputs.Currency in multiples of' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
       </mat-error>

src/app/products/saving-products/saving-product-stepper/saving-product-currency-step/saving-product-currency-step.component.ts

@@ -25,7 +25,7 @@ export class SavingProductCurrencyStepComponent implements OnInit {
     this.savingProductCurrencyForm.patchValue({
       'currencyCode': this.savingProductsTemplate.currency.code || this.currencyData[0].code,
       'digitsAfterDecimal': this.savingProductsTemplate.currency.code ? this.savingProductsTemplate.currency.decimalPlaces : 2,
-      'inMultiplesOf': this.savingProductsTemplate.currency.inMultiplesOf || 1
+      'inMultiplesOf': this.savingProductsTemplate.currency.inMultiplesOf || ''
     });
   }
 
@@ -33,7 +33,7 @@ export class SavingProductCurrencyStepComponent implements OnInit {
     this.savingProductCurrencyForm = this.formBuilder.group({
       'currencyCode': ['', Validators.required],
       'digitsAfterDecimal': ['', Validators.required],
-      'inMultiplesOf': ['', Validators.required]
+      'inMultiplesOf': ['']
     });
   }
 

src/app/products/saving-products/saving-product-stepper/saving-product-settings-step/saving-product-settings-step.component.html

@@ -41,7 +41,7 @@
     </mat-form-field>
 
     <mat-checkbox fxFlex="48%" labelPosition="before" matTooltip="An boolean flag to attach  taxes to interest posting" formControlName="withHoldTax" class="margin-v">
-      {{'labels.inputs.Is Withhold Tax Applicable' | translate}}?
+      {{'labels.inputs.Is Withhold Tax Applicable' | translate}}
     </mat-checkbox>
 
     <mat-form-field fxFlex="48%" *ngIf="savingProductSettingsForm.value.withHoldTax">
@@ -61,7 +61,7 @@
     <h3 fxFlex="23%" class="mat-h3">{{'labels.inputs.Overdraft' | translate}}</h3>
 
     <mat-checkbox fxFlex="73%" labelPosition="before" matTooltip="Indicates whether saving accounts based on this saving product may have an overdraft" formControlName="allowOverdraft" class="margin-b">
-      {{'labels.inputs.Is Overdraft Allowed' | translate}}?
+      {{'labels.inputs.Is Overdraft Allowed' | translate}}
     </mat-checkbox>
 
     <div *ngIf="savingProductSettingsForm.value.allowOverdraft" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">

src/app/savings/create-savings-account/create-savings-account.component.html

@@ -24,7 +24,7 @@
 
     <mat-step [stepControl]="savingsAccountDetailsForm">
 
-      <ng-template matStepLabel>DETAILS</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.DETAILS' | translate}}</ng-template>
 
       <mifosx-savings-account-details-step
         [savingsAccountTemplate]="savingsAccountTemplate" 
@@ -36,7 +36,7 @@
 
     <mat-step [stepControl]="savingsAccountTermsForm">
 
-      <ng-template matStepLabel>TERMS</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.TERMS' | translate}}</ng-template>
 
       <mifosx-savings-account-terms-step 
         [savingsAccountProductTemplate]="savingsAccountProductTemplate"
@@ -46,7 +46,7 @@
 
     <mat-step>
 
-      <ng-template matStepLabel>CHARGES</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.CHARGES' | translate}}</ng-template>
 
       <mifosx-savings-account-charges-step
         [savingsAccountProductTemplate]="savingsAccountProductTemplate"
@@ -59,7 +59,7 @@
 
     <mat-step *ngIf="savingsAccountFormValid" completed>
 
-      <ng-template matStepLabel>PREVIEW</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.PREVIEW' | translate}}</ng-template>
 
       <mifosx-savings-account-preview-step
         [savingsAccountProductTemplate]="savingsAccountProductTemplate"

src/app/savings/edit-savings-account/edit-savings-account.component.html

@@ -24,7 +24,7 @@
 
     <mat-step [stepControl]="savingsAccountDetailsForm">
 
-      <ng-template matStepLabel>DETAILS</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.DETAILS' | translate}}</ng-template>
 
       <mifosx-savings-account-details-step
         [savingsAccountTemplate]="savingsAccountAndTemplate" 
@@ -36,7 +36,7 @@
 
     <mat-step [stepControl]="savingsAccountTermsForm">
 
-      <ng-template matStepLabel>TERMS</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.TERMS' | translate}}</ng-template>
 
       <mifosx-savings-account-terms-step 
         [savingsAccountProductTemplate]="savingsAccountProductTemplate"
@@ -47,7 +47,7 @@
 
     <mat-step>
 
-      <ng-template matStepLabel>CHARGES</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.CHARGES' | translate}}</ng-template>
 
       <mifosx-savings-account-charges-step
         [savingsAccountProductTemplate]="savingsAccountProductTemplate"
@@ -60,7 +60,7 @@
 
     <mat-step *ngIf="savingsAccountFormValidAndNotPristine" completed>
 
-      <ng-template matStepLabel>PREVIEW</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.PREVIEW' | translate}}</ng-template>
 
       <mifosx-savings-account-preview-step
         [savingsAccountProductTemplate]="savingsAccountProductTemplate"

src/app/settings/settings.service.ts

@@ -121,6 +121,17 @@ export class SettingsService {
     return JSON.parse(localStorage.getItem('mifosXLanguage'));
   }
 
+  get languageCode() {
+    const currentLanguage = this.language.code;
+    if (currentLanguage === 'es') {
+      return 'es-MX';
+    }
+    if (currentLanguage === 'en') {
+      return 'en-US';
+    }
+    return currentLanguage + '-' + currentLanguage.toUpperCase();
+  }
+
   /**
    * Returns Decimals to Display setting
    */
@@ -236,4 +247,13 @@ export class SettingsService {
       }
     });
   }
+
+  setThemeDarkEnabled(enabled: string) {
+    localStorage.setItem('mifosXThemeDarkEnabled', enabled);
+  }
+
+  get themeDarkEnabled() {
+    return JSON.parse(localStorage.getItem('mifosXThemeDarkEnabled'));
+  }
+
 }

src/app/shared/models/general.model.ts

@@ -20,6 +20,7 @@ export interface GLAccount {
   manualEntriesAllowed:   boolean;
   type:                   OptionData;
   usage:                  OptionData;
+  parentId?:              number;
 }
 
 export interface AccountingMapping {

src/app/shared/theme-toggle/theme-toggle.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { ThemingService } from './theming.service';
+import { SettingsService } from 'app/settings/settings.service';
 
 @Component({
   selector: 'mifosx-theme-toggle',
@@ -10,20 +11,20 @@ export class ThemeToggleComponent implements OnInit, OnChanges {
 
   darkModeOn: boolean;
 
-  constructor(private themingService: ThemingService) {
-    this.darkModeOn = this.themingService.isDarkMode();
-  }
+  constructor(private themingService: ThemingService,
+    private settingsService: SettingsService) { }
 
   ngOnInit(): void {
-    this.darkModeOn = this.themingService.isDarkMode();
+    this.darkModeOn = (this.settingsService.themeDarkEnabled === 'true');
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    this.darkModeOn = this.themingService.isDarkMode();
+    this.darkModeOn = (this.settingsService.themeDarkEnabled === 'true');
   }
 
   toggleTheme() {
     this.darkModeOn = !this.darkModeOn;
+    this.settingsService.setThemeDarkEnabled(this.darkModeOn ? 'true' : 'false');
     this.themingService.setDarkMode(this.darkModeOn);
   }
 

src/app/web-app.component.ts

@@ -126,15 +126,14 @@ export class WebAppComponent implements OnInit {
    *
    * 3) Page Title
    *
-   * 4) Theme
-   *
-   * 5) Alerts
+   * 4) Alerts
    */
   ngOnInit() {
     this.themingService.theme.subscribe((value: string) => {
       this.cssClass = value;
     });
     this.themingService.setInitialDarkMode();
+    this.themingService.setDarkMode((this.settingsService.themeDarkEnabled === 'true'));
 
     // Setup logger
     if (environment.production) {
@@ -144,7 +143,11 @@ export class WebAppComponent implements OnInit {
 
     // Setup translations
     this.translateService.addLangs(environment.supportedLanguages.split(','));
-    this.translateService.use(environment.defaultLanguage);
+    if (this.settingsService.language) {
+      this.translateService.use(this.settingsService.languageCode);
+    } else {
+      this.translateService.use(environment.defaultLanguage);
+    }
 
     this.i18nService = new I18nService(this.translateService);
 
@@ -185,12 +188,6 @@ export class WebAppComponent implements OnInit {
       localStorage.setItem('mifosXLocation', JSON.stringify(activities));
     });
 
-    // Setup theme
-    const theme = this.themeStorageService.getTheme();
-    if (theme) {
-      this.themeStorageService.installTheme(theme);
-    }
-
     // Setup alerts
     this.alertService.alertEvent.subscribe((alertEvent: Alert) => {
       this.snackBar.open(`${alertEvent.message}`, 'Close', {