Fixed Deposit products with i18n

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

@@ -349,7 +349,7 @@
     <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     {{"labels.buttons.Previous" | translate }}
   </button>
-  <button mat-raised-button [routerLink]="['../']">
+  <button mat-raised-button [routerLink]="['../..']">
     {{"labels.buttons.Cancel" | translate }}
   </button>
   <button mat-raised-button color="primary" (click)="submit.emit()">

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

@@ -349,7 +349,7 @@
     <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     {{"labels.buttons.Previous" | translate }}
   </button>
-  <button mat-raised-button [routerLink]="['../']">
+  <button mat-raised-button [routerLink]="['../..']">
     {{"labels.buttons.Cancel" | translate }}
   </button>
   <button mat-raised-button color="primary" (click)="submit.emit()">

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

@@ -59,15 +59,6 @@
     <h4 class="table-headers">{{"labels.heading.Performance History" | translate }}</h4>
     <table>
       <tbody>
-        <tr>
-          <td>{{"labels.inputs.External Id" | translate }}</td>
-          <td>
-            <span *ngIf="recurringDepositsAccountData.externalId">
-              <mifosx-external-identifier externalId="{{recurringDepositsAccountData.externalId}}" completed="true"></mifosx-external-identifier>
-            </span>
-            <span *ngIf="!recurringDepositsAccountData.externalId"> {{"labels.inputs.Not Available" | translate}} </span>
-          </td>
-        </tr>
         <tr>
           <td>{{"labels.inputs.Principal Amount" | translate }}</td>
           <td class="r-amount">

src/app/loans/loans-account-stepper/loans-account-preview-step/loans-account-preview-step.component.html

@@ -267,7 +267,7 @@
     <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     {{"labels.buttons.Previous" | translate}}
   </button>
-  <button mat-raised-button [routerLink]="['../']">
+  <button mat-raised-button [routerLink]="['../..']">
     {{"labels.buttons.Cancel" | translate}}
   </button>
   <button mat-raised-button color="primary" (click)="submit.emit()">

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

@@ -24,7 +24,7 @@
 
     <mat-step [stepControl]="fixedDepositProductDetailsForm">
 
-      <ng-template matStepLabel>DETAILS</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.DETAILS' | translate}}</ng-template>
 
       <mifosx-fixed-deposit-product-details-step></mifosx-fixed-deposit-product-details-step>
 
@@ -32,7 +32,7 @@
 
     <mat-step [stepControl]="fixedDepositProductCurrencyForm">
 
-      <ng-template matStepLabel>CURRENCY</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.CURRENCY' | translate}}</ng-template>
 
       <mifosx-fixed-deposit-product-currency-step [fixedDepositProductsTemplate]="fixedDepositProductsTemplate"></mifosx-fixed-deposit-product-currency-step>
 
@@ -40,7 +40,7 @@
 
     <mat-step [stepControl]="fixedDepositProductTermsForm">
 
-      <ng-template matStepLabel>TERMS</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.TERMS' | translate}}</ng-template>
 
       <mifosx-fixed-deposit-product-terms-step [fixedDepositProductsTemplate]="fixedDepositProductsTemplate"></mifosx-fixed-deposit-product-terms-step>
 
@@ -48,7 +48,7 @@
 
     <mat-step [stepControl]="fixedDepositProductSettingsForm">
 
-      <ng-template matStepLabel>SETTINGS</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.SETTINGS' | translate}}</ng-template>
 
       <mifosx-fixed-deposit-product-settings-step [fixedDepositProductsTemplate]="fixedDepositProductsTemplate"></mifosx-fixed-deposit-product-settings-step>
 
@@ -56,7 +56,7 @@
 
     <mat-step [stepControl]="fixedDepositProductInterestRateChartForm">
 
-      <ng-template matStepLabel>INTEREST RATE CHART</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.INTEREST RATE CHART' | translate}}</ng-template>
 
       <mifosx-fixed-deposit-product-interest-rate-chart-step [fixedDepositProductsTemplate]="fixedDepositProductsTemplate"></mifosx-fixed-deposit-product-interest-rate-chart-step>
 
@@ -64,7 +64,7 @@
 
     <mat-step>
 
-      <ng-template matStepLabel>CHARGES</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.CHARGES' | translate}}</ng-template>
 
       <mifosx-fixed-deposit-product-charges-step
         [fixedDepositProductsTemplate]="fixedDepositProductsTemplate"
@@ -76,7 +76,7 @@
 
     <mat-step [stepControl]="fixedDepositProductAccountingForm">
 
-      <ng-template matStepLabel>ACCOUNTING</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.ACCOUNTING' | translate}}</ng-template>
 
       <mifosx-fixed-deposit-product-accounting-step
         [fixedDepositProductsTemplate]="fixedDepositProductsTemplate"
@@ -89,7 +89,7 @@
 
     <mat-step state="preview" *ngIf="fixedDepositProductFormValid" completed>
 
-      <ng-template matStepLabel>PREVIEW</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.PREVIEW' | translate}}</ng-template>
 
       <mifosx-fixed-deposit-product-preview-step
         [fixedDepositProductsTemplate]="fixedDepositProductsTemplate"

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

@@ -24,7 +24,7 @@
 
     <mat-step [stepControl]="fixedDepositProductDetailsForm">
 
-      <ng-template matStepLabel>DETAILS</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.DETAILS' | translate}}</ng-template>
 
       <mifosx-fixed-deposit-product-details-step
         [fixedDepositProductsTemplate]="fixedDepositProductsTemplate">
@@ -34,7 +34,7 @@
 
     <mat-step [stepControl]="fixedDepositProductCurrencyForm">
 
-      <ng-template matStepLabel>CURRENCY</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.CURRENCY' | translate}}</ng-template>
 
       <mifosx-fixed-deposit-product-currency-step
         [fixedDepositProductsTemplate]="fixedDepositProductsTemplate">
@@ -44,7 +44,7 @@
 
     <mat-step [stepControl]="fixedDepositProductTermsForm">
 
-      <ng-template matStepLabel>TERMS</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.TERMS' | translate}}</ng-template>
 
       <mifosx-fixed-deposit-product-terms-step
         [fixedDepositProductsTemplate]="fixedDepositProductsTemplate">
@@ -54,7 +54,7 @@
 
     <mat-step [stepControl]="fixedDepositProductSettingsForm">
 
-      <ng-template matStepLabel>SETTINGS</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.SETTINGS' | translate}}</ng-template>
 
       <mifosx-fixed-deposit-product-settings-step
         [fixedDepositProductsTemplate]="fixedDepositProductsTemplate">
@@ -64,7 +64,7 @@
 
     <mat-step [stepControl]="fixedDepositProductInterestRateChartForm">
 
-      <ng-template matStepLabel>INTEREST RATE CHART</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.INTEREST RATE CHART' | translate}}</ng-template>
 
       <mifosx-fixed-deposit-product-interest-rate-chart-step
         [fixedDepositProductsTemplate]="fixedDepositProductsTemplate">
@@ -74,7 +74,7 @@
 
     <mat-step>
 
-      <ng-template matStepLabel>CHARGES</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.CHARGES' | translate}}</ng-template>
 
       <mifosx-fixed-deposit-product-charges-step
         [fixedDepositProductsTemplate]="fixedDepositProductsTemplate"
@@ -85,7 +85,7 @@
 
     <mat-step [stepControl]="fixedDepositProductAccountingForm">
 
-      <ng-template matStepLabel>ACCOUNTING</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.ACCOUNTING' | translate}}</ng-template>
 
       <mifosx-fixed-deposit-product-accounting-step
         [fixedDepositProductsTemplate]="fixedDepositProductsTemplate" [accountingRuleData]="accountingRuleData"
@@ -96,7 +96,7 @@
 
     <mat-step state="preview" *ngIf="fixedDepositProductFormValidAndNotPrinstine" completed>
 
-      <ng-template matStepLabel>PREVIEW</ng-template>
+      <ng-template matStepLabel>{{'labels.inputs.PREVIEW' | translate}}</ng-template>
 
       <mifosx-fixed-deposit-product-preview-step
         [fixedDepositProductsTemplate]="fixedDepositProductsTemplate"

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

@@ -2,9 +2,10 @@
 
   <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">
-        {{ accountingRule }}
+        {{ 'labels.accounting.' + accountingRule | translate }}
       </mat-radio-button>
     </mat-radio-group>
 
@@ -16,26 +17,17 @@
 
       <mifosx-gl-account-selector fxFlex="48%"
         [inputFormControl]="fixedDepositProductAccountingForm.controls.savingsReferenceAccountId"
-        [glAccountList]="assetAccountData"
+        [glAccountList]="assetAccountData" [required]="true" [inputLabel]="'Saving reference'">
-        [required]="true"
-        [inputLabel]="'Saving reference'"
-      >
       </mifosx-gl-account-selector>
 
       <mifosx-gl-account-selector fxFlex="48%" *ngIf="isAccrualAccounting()"
         [inputFormControl]="fixedDepositProductAccountingForm.controls.feesReceivableAccountId"
-        [glAccountList]="assetAccountData"
+        [glAccountList]="assetAccountData" [required]="true" [inputLabel]="'Fees Receivable'">
-        [required]="true"
-        [inputLabel]="'Fees Receivable'"
-      >
       </mifosx-gl-account-selector>
 
       <mifosx-gl-account-selector fxFlex="48%" *ngIf="isAccrualAccounting()"
         [inputFormControl]="fixedDepositProductAccountingForm.controls.penaltiesReceivableAccountId"
-        [glAccountList]="assetAccountData"
+        [glAccountList]="assetAccountData" [required]="true" [inputLabel]="'Penalties Receivable'">
-        [required]="true"
-        [inputLabel]="'Penalties Receivable'"
-      >
       </mifosx-gl-account-selector>
 
       <mat-divider fxFlex="98%"></mat-divider>
@@ -44,26 +36,17 @@
 
       <mifosx-gl-account-selector fxFlex="48%"
         [inputFormControl]="fixedDepositProductAccountingForm.controls.savingsControlAccountId"
-        [glAccountList]="liabilityAccountData"
+        [glAccountList]="liabilityAccountData" [required]="true" [inputLabel]="'Saving control'">
-        [required]="true"
-        [inputLabel]="'Saving control'"
-      >
       </mifosx-gl-account-selector>
 
       <mifosx-gl-account-selector fxFlex="48%"
         [inputFormControl]="fixedDepositProductAccountingForm.controls.transfersInSuspenseAccountId"
-        [glAccountList]="liabilityAccountData"
+        [glAccountList]="liabilityAccountData" [required]="true" [inputLabel]="'Savings transfers in suspense'">
-        [required]="true"
-        [inputLabel]="'Savings transfers in suspense'"
-      >
       </mifosx-gl-account-selector>
 
       <mifosx-gl-account-selector fxFlex="48%" *ngIf="isAccrualAccounting()"
         [inputFormControl]="fixedDepositProductAccountingForm.controls.interestPayableAccountId"
-        [glAccountList]="liabilityAccountData"
+        [glAccountList]="liabilityAccountData" [required]="true" [inputLabel]="'Interest Payable'">
-        [required]="true"
-        [inputLabel]="'Interest Payable'"
-      >
       </mifosx-gl-account-selector>
 
       <mat-divider fxFlex="98%"></mat-divider>
@@ -72,10 +55,7 @@
 
       <mifosx-gl-account-selector fxFlex="48%"
         [inputFormControl]="fixedDepositProductAccountingForm.controls.interestOnSavingsAccountId"
-        [glAccountList]="expenseAccountData"
+        [glAccountList]="expenseAccountData" [required]="true" [inputLabel]="'Interest on savings'">
-        [required]="true"
-        [inputLabel]="'Interest on savings'"
-      >
       </mifosx-gl-account-selector>
 
       <mat-divider fxFlex="98%"></mat-divider>
@@ -84,168 +64,180 @@
 
       <mifosx-gl-account-selector fxFlex="48%"
         [inputFormControl]="fixedDepositProductAccountingForm.controls.incomeFromFeeAccountId"
-        [glAccountList]="incomeAccountData"
+        [glAccountList]="incomeAccountData" [required]="true" [inputLabel]="'Income from fees'">
-        [required]="true"
-        [inputLabel]="'Income from fees'"
-      >
       </mifosx-gl-account-selector>
 
       <mifosx-gl-account-selector fxFlex="48%"
         [inputFormControl]="fixedDepositProductAccountingForm.controls.incomeFromPenaltyAccountId"
-        [glAccountList]="incomeAccountData"
+        [glAccountList]="incomeAccountData" [required]="true" [inputLabel]="'Income from penalties'">
-        [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="fixedDepositProductAccountingForm.value.advancedAccountingRules" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+      <div *ngIf="fixedDepositProductAccountingForm.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%">
+          <div fxFlex="33%">
-          <button type="button" mat-raised-button color="primary" (click)="add('PaymentFundSource', paymentChannelToFundSourceMappings)">
+            <button type="button" mat-raised-button color="primary"
-            <fa-icon icon="plus" class="m-r-10"></fa-icon>
+              (click)="add('PaymentFundSource', paymentChannelToFundSourceMappings)">
-            Add
+              <fa-icon icon="plus" class="m-r-10"></fa-icon>
-          </button>
+              {{'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> Payment Type </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> Fund Source </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> 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>
+
+            <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> 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>
         </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">
+          <h4 fxFlex="63%" class="mat-h4">{{'labels.heading.Map Penalties to Specific Income Accounts' | translate}}
-            <th mat-header-cell *matHeaderCellDef> Payment Type </th>
+          </h4>
-            <td mat-cell *matCellDef="let paymentFundSource">
-              {{ paymentFundSource.paymentTypeId | find:paymentTypeData:'id':'name' }}
-            </td>
-          </ng-container>
 
-          <ng-container matColumnDef="fundSourceAccountId">
+          <div fxFlex="33%">
-            <th mat-header-cell *matHeaderCellDef> Fund Source </th>
+            <button type="button" mat-raised-button color="primary"
-            <td mat-cell *matCellDef="let paymentFundSource">
+              (click)="add('PenaltyIncome', penaltyToIncomeAccountMappings)">
-              {{ paymentFundSource.fundSourceAccountId | find:assetAccountData:'id':'name' }}
+              <fa-icon icon="plus" class="m-r-10"></fa-icon>
-            </td>
+              {{'labels.buttons.Add' | translate}}
-          </ng-container>
+            </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>
 
-          <tr mat-header-row *matHeaderRowDef="paymentFundSourceDisplayedColumns"></tr>
+          <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="penaltyToIncomeAccountMappings.value"
-          <tr mat-row *matRowDef="let row; columns: paymentFundSourceDisplayedColumns;"></tr>
+            *ngIf="penaltyToIncomeAccountMappings.value.length !== 0">
 
-        </table>
+            <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>
 
-        <h4 fxFlex="33%" class="mat-h4">Map Fees to Specific Income Accounts</h4>
+            <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 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>
         </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>
-
   </div>
 
   <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]="!fixedDepositProductFormValid">
-      Next
+      {{'labels.buttons.Next' | translate}}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>

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

@@ -119,6 +119,10 @@ export class FixedDepositProductAccountingStepComponent implements OnInit {
     });
   }
 
+  existCharges(): boolean {
+    return (this.chargeData.length > 0);
+  }
+
   setConditionalControls() {
     this.fixedDepositProductAccountingForm.get('accountingRule').valueChanges
       .subscribe((accountingRule: any) => {

src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-charges-step/fixed-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">
         {{ charge.name }}
@@ -12,42 +12,42 @@
   <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>
 
   <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="chargesDataSource" [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 }}
+        {{ charge.amount | formatNumber }}
       </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>
@@ -65,10 +65,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/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-currency-step/fixed-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" 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" 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">
       <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/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-details-step/fixed-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" required>
       <mat-error *ngIf="fixedDepositProductDetailsForm.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" required>
       <mat-error *ngIf="fixedDepositProductDetailsForm.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" required></textarea>
       <mat-error *ngIf="fixedDepositProductDetailsForm.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/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-interest-rate-chart-step/fixed-deposit-product-interest-rate-chart-step.component.html

@@ -2,14 +2,14 @@
 
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
-    <h4 fxFlex="13%" class="mat-h3">Interest Rate Chart<i class='fas fa-question'
+    <h4 fxFlex="83%" class="mat-h3">{{ 'labels.inputs.Interest Rate Chart' | translate}} <i class='fas fa-question'
         matTooltip="The interest rate chart provides the information required to calculate the interest payable on a fixed deposit account based on the fixed deposit product."></i>
     </h4>
 
-    <div fxFlex="83%" fxLayout="row" fxLayoutAlign="start center">
+    <div fxFlex="13%" 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>
 
@@ -28,52 +28,55 @@
         </div>
 
         <mat-form-field fxFlex="32%">
-          <mat-label>Name</mat-label>
+          <mat-label>{{ 'labels.inputs.Name' | translate}}</mat-label>
           <input matInput formControlName="name" required>
         </mat-form-field>
 
         <mat-form-field fxFlex="31%" (click)="validFromDatePicker.open()">
-          <mat-label>Valid from Date</mat-label>
+          <mat-label>{{ 'labels.inputs.From 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>
+            Valid from Date {{'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>
+          <mat-label>{{ 'labels.inputs.Description' | translate}}</mat-label>
           <textarea matInput formControlName="description" required></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 is 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>
 
           <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') }}
@@ -81,28 +84,28 @@
           </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)">
@@ -115,11 +118,11 @@
                 (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>
@@ -134,15 +137,15 @@
 
                 <mat-card fxLayout="row wrap" fxFlexFill>
 
-                  <h4 class="mat-h4" fxFlex="13%">
+                  <h4 class="mat-h4" fxFlex="63%">
-                    Incentives
+                    {{ 'labels.heading.Incentives' | translate}}
                   </h4>
 
-                  <div fxFlex="83%">
+                  <div fxFlex="13%">
                     <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>
 
@@ -150,28 +153,28 @@
                     *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>
@@ -182,21 +185,21 @@
                     </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)">
@@ -234,10 +237,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/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-interest-rate-chart-step/fixed-deposit-product-interest-rate-chart-step.component.ts

@@ -18,6 +18,7 @@ import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
 /** Custom Services */
 import { SettingsService } from 'app/settings/settings.service';
 import { Dates } from 'app/core/utils/dates';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'mifosx-fixed-deposit-product-interest-rate-chart-step',
@@ -67,7 +68,8 @@ export class FixedDepositProductInterestRateChartStepComponent implements OnInit
   constructor(private formBuilder: UntypedFormBuilder,
               public dialog: MatDialog,
               private dateUtils: Dates,
-              private settingsService: SettingsService) {
+              private settingsService: SettingsService,
+            private translateService: TranslateService) {
     this.createFixedDepositProductInterestRateChartForm();
   }
 
@@ -314,7 +316,7 @@ export class FixedDepositProductInterestRateChartStepComponent implements OnInit
 
   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.fixedDepositProductsTemplate.chartTemplate };
     }
   }
@@ -323,7 +325,7 @@ export class FixedDepositProductInterestRateChartStepComponent implements OnInit
     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,
@@ -331,7 +333,7 @@ export class FixedDepositProductInterestRateChartStepComponent implements OnInit
       }),
       new InputBase({
         controlName: 'fromPeriod',
-        label: 'Period From',
+        label: this.translateService.instant('labels.inputs.Period From'),
         value: values ? values.fromPeriod : undefined,
         type: 'number',
         required: true,
@@ -339,28 +341,28 @@ export class FixedDepositProductInterestRateChartStepComponent implements OnInit
       }),
       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,
@@ -368,7 +370,7 @@ export class FixedDepositProductInterestRateChartStepComponent implements OnInit
       }),
       new InputBase({
         controlName: 'description',
-        label: 'Description',
+        label: this.translateService.instant('labels.inputs.Description'),
         value: values ? values.description : undefined,
         required: true,
         order: 7
@@ -380,13 +382,19 @@ export class FixedDepositProductInterestRateChartStepComponent implements OnInit
   get fixedDepositProductInterestRateChart() {
     // TODO: Update once language and date settings are setup
     const locale = this.settingsService.language.code;
-    const dateFormat = this.settingsService.dateFormat;
+    const dateFormat = 'YYYY-MM-DD';
     const fixedDepositProductInterestRateChart = this.fixedDepositProductInterestRateChartForm.value;
     for (const chart of fixedDepositProductInterestRateChart.charts) {
-      chart.dateFormat = dateFormat;
       chart.locale = locale;
-      chart.fromDate = this.dateUtils.formatDate(chart.fromDate, dateFormat) || '';
+      chart.dateFormat = 'yyyy-MM-dd';
-      chart.endDate = this.dateUtils.formatDate(chart.endDate, dateFormat) || '';
+      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/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-preview-step/fixed-deposit-product-preview-step.component.html

@@ -4,46 +4,46 @@
 
   <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%">{{ fixedDepositProduct.shortName }}</span>
   </div>
 
   <div fxFlexFill *ngIf="fixedDepositProduct.description">
-    <span fxFlex="40%">Description:</span>
+    <span fxFlex="40%">{{'labels.inputs.Description' | translate}}:</span>
     <span fxFlex="60%">{{ fixedDepositProduct.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%">{{ fixedDepositProduct.currencyCode |
       find:fixedDepositProductsTemplate.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%">{{ fixedDepositProduct.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%">{{ fixedDepositProduct.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%">{{ fixedDepositProduct.depositAmount + ' (Min: ' + (fixedDepositProduct.minDepositAmount ?
       fixedDepositProduct.minDepositAmount : fixedDepositProduct.depositAmount) + ', Max: ' +
       (fixedDepositProduct.maxDepositAmount ? fixedDepositProduct.maxDepositAmount : fixedDepositProduct.depositAmount)
@@ -51,85 +51,85 @@
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Interest Compounding Period:</span>
+    <span fxFlex="40%">{{'labels.inputs.Interest Compounding Period' | translate}}:</span>
     <span fxFlex="60%">{{ fixedDepositProduct.interestCompoundingPeriodType |
       find:fixedDepositProductsTemplate.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%">{{ fixedDepositProduct.interestPostingPeriodType |
       find:fixedDepositProductsTemplate.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%">{{ fixedDepositProduct.interestCalculationType |
       find:fixedDepositProductsTemplate.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%">{{ fixedDepositProduct.interestCalculationDaysInYearType |
       find:fixedDepositProductsTemplate.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="fixedDepositProduct.lockinPeriodFrequency">
-    <span fxFlex="40%">Lock-in Period:</span>
+    <span fxFlex="40%">{{'labels.inputs.Lock-in Period' | translate}}:</span>
     <span fxFlex="60%">{{ fixedDepositProduct.lockinPeriodFrequency + ' ' +
       (fixedDepositProduct.lockinPeriodFrequencyType |
       find:fixedDepositProductsTemplate.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%">{{ fixedDepositProduct.minDepositTerm + ' ' + (fixedDepositProduct.minDepositTermTypeId |
       find:fixedDepositProductsTemplate.periodFrequencyTypeOptions:'id':'value') }}</span>
   </div>
 
   <div fxFlexFill *ngIf="fixedDepositProduct.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%">{{ fixedDepositProduct.inMultiplesOfDepositTerm + ' ' +
       (fixedDepositProduct.inMultiplesOfDepositTermTypeId |
       find:fixedDepositProductsTemplate.periodFrequencyTypeOptions:'id':'value') }}</span>
   </div>
 
   <div fxFlexFill *ngIf="fixedDepositProduct.maxDepositTerm">
-    <span fxFlex="40%">Maximum Deposit Term:</span>
+    <span fxFlex="40%">{{'labels.inputs.Maximum Deposit Term' | translate}}:</span>
     <span fxFlex="60%">{{ fixedDepositProduct.maxDepositTerm + ' ' + (fixedDepositProduct.maxDepositTermTypeId |
       find:fixedDepositProductsTemplate.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%">{{ fixedDepositProduct.preClosurePenalApplicable | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="fixedDepositProduct.preClosurePenalApplicable">
-    <span fxFlex="40%">Penal Interest (%):</span>
+    <span fxFlex="40%">{{'labels.inputs.Penal Interest' | translate}} (%):</span>
     <span fxFlex="60%">{{ fixedDepositProduct.preClosurePenalInterest + '% (' +
       (fixedDepositProduct.preClosurePenalInterestOnTypeId |
       find:fixedDepositProductsTemplate.preClosurePenalInterestOnTypeOptions:'id':'value') + ')' }}</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%">{{ fixedDepositProduct.withHoldTax | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="fixedDepositProduct.withHoldTax">
-    <span fxFlex="40%">Tax Group:</span>
+    <span fxFlex="40%">{{'labels.inputs.Tax Group' | translate}}:</span>
     <span fxFlex="60%">{{ fixedDepositProduct.taxGroupId | find:fixedDepositProductsTemplate.taxGroupOptions:'id':'name'
       }}</span>
   </div>
 
   <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column" *ngIf="fixedDepositProduct.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>
 
@@ -137,27 +137,27 @@
       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 *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%">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>
-        <span fxFlex="40%">Primary Grouping by Amount:</span>
+        <span fxFlex="40%">{{'labels.inputs.Primary Grouping by Amount' | translate}}:</span>
         <span fxFlex="60%">{{ fixedDepositProduct.isPrimaryGroupingByAmount | yesNo }}</span>
       </div>
 
@@ -165,7 +165,7 @@
         *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:fixedDepositProductsTemplate.chartTemplate.periodTypes:'id':'value') }}
@@ -173,39 +173,39 @@
         </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-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>
@@ -219,13 +219,13 @@
               <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:fixedDepositProductsTemplate.chartTemplate.entityTypeOptions:'id':'value' }}
@@ -233,7 +233,7 @@
                   </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:fixedDepositProductsTemplate.chartTemplate.attributeNameOptions:'id':'value' }}
@@ -241,7 +241,7 @@
                   </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:fixedDepositProductsTemplate.chartTemplate.conditionTypeOptions:'id':'value' }}
@@ -249,7 +249,7 @@
                   </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:fixedDepositProductsTemplate.chartTemplate.genderOptions:'id':'name' }}</span>
@@ -263,7 +263,7 @@
                   </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:fixedDepositProductsTemplate.chartTemplate.incentiveTypeOptions:'id':'value'}}
@@ -271,9 +271,9 @@
                   </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>
 
@@ -301,35 +301,35 @@
 
   <div fxFlexFill *ngIf="fixedDepositProduct.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]="fixedDepositProduct.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>
@@ -342,41 +342,39 @@
 
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>Accounting</h3>
+  <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Accounting' | translate}}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
-  <mifosx-view-savings-accounting-details *ngIf="!isNoneAccounting()"
+  <mifosx-view-savings-accounting-details *ngIf="!isNoneAccounting()" [accountingRule]="accountingRule"
-  [accountingRule]="accountingRule"
+    [accountingMappings]="accountingMappings">
-  [accountingMappings]="accountingMappings"
-  >
   </mifosx-view-savings-accounting-details>
 
   <div
     *ngIf="fixedDepositProduct.advancedAccountingRules && (fixedDepositProduct.paymentChannelToFundSourceMappings?.length || fixedDepositProduct.feeToIncomeAccountMappings?.length || fixedDepositProduct.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="fixedDepositProduct.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]="fixedDepositProduct.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:fixedDepositProductsTemplate.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:fixedDepositProductsTemplate.accountingMappingOptions.assetAccountOptions:'id':'name' }}
@@ -393,20 +391,20 @@
     <div *ngIf="fixedDepositProduct.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]="fixedDepositProduct.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:fixedDepositProductsTemplate.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:fixedDepositProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}
@@ -423,20 +421,20 @@
     <div *ngIf="fixedDepositProduct.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]="fixedDepositProduct.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:fixedDepositProductsTemplate.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:fixedDepositProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}
@@ -457,12 +455,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/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-settings-step/fixed-deposit-product-settings-step.component.html

@@ -2,15 +2,15 @@
 
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
-    <h4 fxFlex="98%" class="mat-h4">Lock-in Period <i class='fas fa-question' matTooltip="A period of time during which a fixed deposit account based on this fixed deposit product will be locked-in after it is opened."></i></h4>
+    <h4 fxFlex="98%" class="mat-h4">{{'labels.inputs.Lock-in Period' | translate}} <i class='fas fa-question' matTooltip="A period of time during which a fixed deposit account based on this fixed deposit product will be locked-in after it is opened."></i></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">
     </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">
           {{ lockinPeriodFrequencyType.value }}
@@ -18,37 +18,37 @@
       </mat-select>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">Minimum Deposit Term<i class='fas fa-question' matTooltip="The minimum length of time the funds must remain in the fixed deposit account to earn the full interest income."></i></h4>
+    <h4 fxFlex="98%" class="mat-h4">{{'labels.inputs.Minimum Deposit Term' | translate}} <i class='fas fa-question' matTooltip="The minimum length of time the funds must remain in the fixed deposit account to earn the full interest income."></i></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" 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 <i class='fas fa-question-circle' matTooltip="After the minimum deposit term has passed, additional deposit durations may be specified."></i></h4>
+    <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.And thereafter, in Multiples of' | translate}} <i class='fas fa-question-circle' matTooltip="After the minimum deposit term has passed, additional deposit durations may be specified."></i></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">
     </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 }}
@@ -56,15 +56,15 @@
       </mat-select>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">Maximum Deposit Term <i class='fas fa-question-circle' matTooltip="The maximum length of time funds may be deposited in a fixed deposit account based on this fixed deposit product."></i></h4>
+    <h4 fxFlex="98%" class="mat-h4">{{'labels.inputs.Maximum Deposit Term' | translate}} <i class='fas fa-question-circle' matTooltip="The maximum length of time funds may be deposited in a fixed deposit account based on this fixed deposit product."></i></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">
     </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 }}
@@ -74,19 +74,19 @@
 
     <mat-divider fxFlex="98%"></mat-divider>
 
-    <h4 fxFlex="23%" class="mat-h4">For Pre-mature closure <i class='fas fa-question-circle' matTooltip="This sections defines an interest penalty for pre-mature closure."></i></h4>
+    <h4 fxFlex="23%" class="mat-h4">{{'labels.heading.For Pre-mature closure' | translate}} <i class='fas fa-question-circle' matTooltip="This sections defines an interest penalty for pre-mature closure."></i></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">
           {{ preClosurePenalInterestOnType.value }}
@@ -97,18 +97,18 @@
     <mat-divider fxFlex="98%"></mat-divider>
 
     <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="withHoldTax" class="margin-v" matTooltip="An boolean flag to attach  taxes to interest posting">
-      Is Withhold Tax Applicable?
+      {{'labels.inputs.Is Withhold Tax Applicable' | translate}}
     </mat-checkbox>
 
     <mat-form-field fxFlex="48%" *ngIf="fixedDepositProductSettingsForm.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>
 
@@ -117,10 +117,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/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-terms-step/fixed-deposit-product-terms-step.component.html

@@ -2,23 +2,23 @@
 
   <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" matTooltip="The minimum deposit amount required to open a fixed deposit account based on this fixed deposit product.">
     </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" matTooltip="The default deposit amount expected when a fixed deposit account based on this fixed deposit product is opened." required>
       <mat-error>
-        Default Deposit Amount is <strong>required</strong>
+        {{'labels.inputs.Default 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" matTooltip="The maximum deposit amount allowed when a fixed deposit account based on this fixed deposit product is opened.">
     </mat-form-field>
@@ -26,50 +26,50 @@
     <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" matTooltip="The period at which interest rate is compounded." 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" matTooltip="The period at which interest rate is posted or credited to a fixed deposit account based on this fixed deposit product." 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" matTooltip="The method used to calculate interest." 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" matTooltip="The setting for number of days in year to use to calculate interest." 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>
 
@@ -78,10 +78,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/fixed-deposit-products/fixed-deposit-products.component.html

@@ -2,7 +2,7 @@
 <div #buttonCreateFixedProduct class="in-block">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_FIXEDDEPOSITPRODUCT'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    Create Fixed Deposit Product
+    {{'labels.buttons.Create Fixed Deposit Product' | translate}}
   </button>
 </div>
 </div>
@@ -21,12 +21,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 fixedDepositProduct"> {{ fixedDepositProduct.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 fixedDepositProduct"> {{ fixedDepositProduct.shortName }} </td>
       </ng-container>
 
@@ -45,26 +45,26 @@
   <h2>Create fixed deposit product</h2>
   <p class="mw300">This option allows you to create new fixed deposit 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="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</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)">Next</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 fixed 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="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateFixedProduct,buttonCreateFixedProduct , 'bottom', true)">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateFixedProduct,buttonCreateFixedProduct , 'bottom', true)">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFixedProductsTable,fixedProductsTable, 'top', true)">Next</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFixedProductsTable,fixedProductsTable, 'top', true)">{{'labels.buttons.Next' | translate}}</button>
   </div>
 </ng-template>
 
 <ng-template #templateFixedProductsTable let-popover="popover">
-  <h4 class="mw300">List of fixed deposit products in the organization. For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/102629544/Fixed+Deposit+Products" target="_blank">Fixed Deposit Products</a></h4>
+  <h4 class="mw300">List of fixed deposit products in the organization. For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/102629544/Fixed+Deposit+Products" target="_blank">{{'labels.inputs.Fixed 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="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)">Back</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()">Next</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next' | translate}}</button>
   </div>
 </ng-template>

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

@@ -1,6 +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']" *mifosxHasPermission="'UPDATE_SAVINGSPRODUCT'">
-    <fa-icon icon="edit" class="m-r-10"></fa-icon>Edit
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
+    {{'labels.buttons.Edit' | translate}}
   </button>
 </div>
 <div class="container">
@@ -15,45 +16,45 @@
 
         <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%">{{ fixedDepositProductData.shortName }}</span>
         </div>
 
         <div fxFlexFill *ngIf="fixedDepositProductData.description">
-          <span fxFlex="40%">Description:</span>
+          <span fxFlex="40%">{{'labels.inputs.Description' | translate}}:</span>
           <span fxFlex="60%">{{ fixedDepositProductData.description }}</span>
         </div>
 
-        <h3 class="mat-h3" fxFlexFill>Currency</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="40%">{{'labels.heading.Currency' | translate}}:</span>
-          <span fxFlex="60%">{{ fixedDepositProductData.currency.name }}</span>
+          <span fxFlex="60%">({{ fixedDepositProductData.currency.code }}) {{ fixedDepositProductData.currency.name }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">Decimal Places:</span>
+          <span fxFlex="40%">{{'labels.inputs.Decimal Places' | translate}}:</span>
           <span fxFlex="60%">{{ fixedDepositProductData.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%">{{ fixedDepositProductData.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%">{{ fixedDepositProductData.depositAmount + ' (Min: ' +
             (fixedDepositProductData.minDepositAmount ? fixedDepositProductData.minDepositAmount :
             fixedDepositProductData.depositAmount) + ', Max: ' + (fixedDepositProductData.maxDepositAmount ?
@@ -61,38 +62,38 @@
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">Interest Compounding Period:</span>
+          <span fxFlex="40%">{{'labels.inputs.Interest Compounding Period' | translate}}:</span>
           <span fxFlex="60%">{{ fixedDepositProductData.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%">{{ fixedDepositProductData.interestPostingPeriodType.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%">{{ fixedDepositProductData.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%">{{ fixedDepositProductData.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="fixedDepositProductData.lockinPeriodFrequency">
-          <span fxFlex="40%">Lock-in Period:</span>
+          <span fxFlex="40%">{{'labels.inputs.Lock-in Period' | translate}}:</span>
           <span fxFlex="60%">
             {{ fixedDepositProductData.lockinPeriodFrequency }} {{
             fixedDepositProductData.lockinPeriodFrequencyType.value }}</span>
         </div>
 
         <div fxFlexFill *ngIf="fixedDepositProductData.minDepositTerm">
-          <span fxFlex="40%">Minimum Deposit Term:</span>
+          <span fxFlex="40%">{{'labels.inputs.Minimum Deposit Term' | translate}}:</span>
           <span fxFlex="60%" *ngIf="fixedDepositProductData.minDepositTerm !== undefined">{{
             fixedDepositProductData.minDepositTerm }}
             &nbsp;
@@ -100,7 +101,7 @@
         </div>
 
         <div fxFlexFill *ngIf="fixedDepositProductData.maxDepositTerm">
-          <span fxFlex="40%">Maximum Deposit Term:</span>
+          <span fxFlex="40%">{{'labels.inputs.Maximum Deposit Term' | translate}}:</span>
           <span fxFlex="60%" *ngIf="fixedDepositProductData.maxDepositTerm !== undefined">{{
             fixedDepositProductData.maxDepositTerm }}
             &nbsp;
@@ -108,69 +109,69 @@
         </div>
 
         <div fxFlexFill *ngIf="fixedDepositProductData.inMultiplesOfDepositTerm">
-          <span fxFlex="40%">Deposit Term In multiple of:</span>
+          <span fxFlex="40%">{{'labels.inputs.Deposit Term In multiple of' | translate}}:</span>
           <span fxFlex="60%">{{ fixedDepositProductData.inMultiplesOfDepositTerm }}
             -
             {{ fixedDepositProductData.inMultiplesOfDepositTermType.value }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">Apply Penal Interest (less):</span>
+          <span fxFlex="40%">{{'labels.inputs.Apply Penal Interest (less)' | translate}}:</span>
           <span fxFlex="60%">{{ fixedDepositProductData.preClosurePenalApplicable | yesNo }}</span>
         </div>
 
         <div fxFlexFill *ngIf="fixedDepositProductData.preClosurePenalApplicable">
-          <span fxFlex="40%">Penal Interest (%):</span>
+          <span fxFlex="40%">{{'labels.inputs.Penal Interest' | translate}} (%):</span>
           <span fxFlex="60%">{{fixedDepositProductData.preClosurePenalInterest}} &nbsp; &nbsp; % &nbsp; &nbsp; On
             &nbsp;&nbsp;
             {{fixedDepositProductData.preClosurePenalInterestOnType.value}}</span>
         </div>
 
         <div fxFlexFill *ngIf="fixedDepositProductData.minBalanceForInterestCalculation">
-          <span fxFlex="40%">Balance Required For Interest Calculation:</span>
+          <span fxFlex="40%">{{'labels.inputs.Balance Required For Interest Calculation' | translate}}:</span>
           <span fxFlex="60%">{{ fixedDepositProductData.minBalanceForInterestCalculation | formatNumber }}</span>
         </div>
 
         <div fxFlexFill>
-          <span fxFlex="40%">Is withhold tax Applicable:</span>
+          <span fxFlex="40%">{{'labels.inputs.Withhold Tax is Applicable' | translate}}:</span>
           <span fxFlex="60%">{{ fixedDepositProductData.withHoldTax | yesNo }}</span>
         </div>
 
         <div fxFlexFill *ngIf="fixedDepositProductData.withHoldTax">
-          <span fxFlex="40%">Withhold Tax group:</span>
+          <span fxFlex="40%">{{'labels.inputs.Withhold Tax group' | translate}}:</span>
           <span fxFlex="60%">{{ fixedDepositProductData.taxGroup.name }}</span>
         </div>
 
         <div *ngIf="fixedDepositProductData.activeChart" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
 
-          <h3 class="mat-h3" fxFlexFill>Interest Rate Chart</h3>
+          <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Interest Rate Chart' | translate}}</h3>
 
           <mat-divider [inset]="true"></mat-divider>
 
           <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
 
             <div fxFlexFill *ngIf="fixedDepositProductData.activeChart.name">
-              <span fxFlex="40%">Name:</span>
+              <span fxFlex="40%">{{'labels.inputs.Name' | translate}}:</span>
               <span fxFlex="60%">{{ fixedDepositProductData.activeChart.name }}</span>
             </div>
 
             <div fxFlexFill *ngIf="fixedDepositProductData.activeChart.description">
-              <span fxFlex="40%">Description:</span>
+              <span fxFlex="40%">{{'labels.inputs.Description' | translate}}:</span>
               <span fxFlex="60%">{{ fixedDepositProductData.activeChart.description }}</span>
             </div>
 
             <div fxFlexFill>
-              <span fxFlex="40%">Valid from Date:</span>
+              <span fxFlex="40%">{{'labels.inputs.From Date' | translate}}:</span>
               <span fxFlex="60%">{{ fixedDepositProductData.activeChart.fromDate | dateFormat }}</span>
             </div>
 
             <div fxFlexFill *ngIf="fixedDepositProductData.activeChart.endDate">
-              <span fxFlex="40%">End Date:</span>
+              <span fxFlex="40%">{{'labels.inputs.End Date' | translate}}:</span>
               <span fxFlex="60%">{{ fixedDepositProductData.activeChart.endDate | dateFormat }}</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%">{{ fixedDepositProductData.activeChart.isPrimaryGroupingByAmount | yesNo }}</span>
             </div>
 
@@ -178,7 +179,7 @@
               [dataSource]="fixedDepositProductData.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 }}
@@ -190,7 +191,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 }}
@@ -203,31 +204,31 @@
               </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>
@@ -241,13 +242,13 @@
                     <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:fixedDepositProductsTemplate.chartTemplate.entityTypeOptions:'id':'value' }}
@@ -255,7 +256,7 @@
                         </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:fixedDepositProductsTemplate.chartTemplate.attributeNameOptions:'id':'value' }}
@@ -263,7 +264,7 @@
                         </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:fixedDepositProductsTemplate.chartTemplate.conditionTypeOptions:'id':'value' }}
@@ -271,7 +272,7 @@
                         </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:fixedDepositProductsTemplate.chartTemplate.genderOptions:'id':'name' }}</span>
@@ -285,7 +286,7 @@
                         </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:fixedDepositProductsTemplate.chartTemplate.incentiveTypeOptions:'id':'value'}}
@@ -293,9 +294,9 @@
                         </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>
 
@@ -322,35 +323,35 @@
 
         <div *ngIf="fixedDepositProductData.charges.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
 
-          <h3 class="mat-h3" fxFlexFill>Charges</h3>
+          <h3 class="mat-h3" fxFlexFill>{{'labels.inputs.Charges' | translate}}</h3>
 
           <mat-divider fxFlexFill></mat-divider>
 
           <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="fixedDepositProductData.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>
@@ -363,42 +364,42 @@
 
         </div>
 
-        <h3 class="mat-h3" fxFlexFill>Accounting</h3>
+        <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Accounting' | translate}}</h3>
 
         <mat-divider [inset]="true"></mat-divider>
 
         <mifosx-view-savings-accounting-details class="container"
-        [accountingRule]="fixedDepositProductData.accountingRule"
+          [accountingRule]="fixedDepositProductData.accountingRule"
-        [accountingMappings]="fixedDepositProductData.accountingMappings"
+          [accountingMappings]="fixedDepositProductData.accountingMappings">
-        >
         </mifosx-view-savings-accounting-details>
 
         <div fxFlexFill
           *ngIf="fixedDepositProductData.advancedAccountingRules && (fixedDepositProductData.paymentChannelToFundSourceMappings?.length || fixedDepositProductData.feeToIncomeAccountMappings?.length || fixedDepositProductData.penaltyToIncomeAccountMappings?.length)"
           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 [inset]="true"></mat-divider>
 
           <hr>
 
-          <div *ngIf="fixedDepositProductData.paymentChannelToFundSourceMappings?.length" fxFlexFill
+          <div *ngIf="fixedDepositProductData.paymentChannelToFundSourceMappings?.length" fxFlexFill fxLayout="row wrap"
-            fxLayout="row wrap" fxLayout.lt-md="column">
+            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]="fixedDepositProductData.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>
@@ -414,20 +415,20 @@
           <div *ngIf="fixedDepositProductData.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.inputs.Fees to Specific Income Accounts' | translate}}</h4>
 
             <table fxFlexFill class="mat-elevation-z1" mat-table
               [dataSource]="fixedDepositProductData.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>
@@ -443,20 +444,20 @@
           <div *ngIf="fixedDepositProductData.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]="fixedDepositProductData.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/fixed-deposit-products/view-fixed-deposit-product/view-fixed-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 fixedDepositDatatable of fixedDepositDatatables">
         <a mat-tab-link [routerLink]="['./datatables',fixedDepositDatatable.registeredTableName]" routerLinkActive

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,9 +2,9 @@
 
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
-    <h3 fxFlex="63%" class="mat-h3">{{ 'labels.heading.Interest Rate Charts' | translate}}</h3>
+    <h3 fxFlex="83%" class="mat-h3">{{ 'labels.heading.Interest Rate Charts' | translate}}</h3>
 
-    <div fxFlex="33%" fxLayout="row" fxLayoutAlign="start center">
+    <div fxFlex="13%" 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>
         {{ 'labels.buttons.Add' | translate}}
@@ -137,11 +137,11 @@
 
                 <mat-card fxLayout="row wrap" fxFlexFill>
 
-                  <h4 class="mat-h4" fxFlex="63%">
+                  <h4 class="mat-h4" fxFlex="83%">
                     {{ 'labels.heading.Incentives' | translate}}
                   </h4>
 
-                  <div fxFlex="33%">
+                  <div fxFlex="13%">
                     <button mat-raised-button color="primary"
                       (click)="addIncentive(getIncentives(chart.controls.chartSlabs, chartSlabIndex))">
                       <fa-icon icon="plus" class="m-r-10"></fa-icon>

src/app/savings/savings-account-stepper/savings-account-charges-step/savings-account-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,23 +21,23 @@
     *ngIf="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 }}
+        {{ charge.amount | formatNumber }}
         <button mat-icon-button color="primary" (click)="editChargeAmount(charge)">
           <fa-icon icon="pen"></fa-icon>
         </button>
@@ -45,14 +45,14 @@
     </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="date">
-      <th mat-header-cell *matHeaderCellDef> Date </th>
+      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Date' | translate }} </th>
       <td mat-cell *matCellDef="let charge">
         <span
           *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'">
@@ -73,9 +73,10 @@
     </ng-container>
 
     <ng-container matColumnDef="repaymentsEvery">
-      <th mat-header-cell *matHeaderCellDef> Repayments Every </th>
+      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Repayments Every' | translate }} </th>
       <td mat-cell *matCellDef="let charge">
-        {{ charge.feeInterval || 'Not Provided' }}
+        <span *ngIf="charge.feeInterval">{{ charge.feeInterval}}</span>
+        <span *ngIf="!charge.feeInterval">{{'labels.inputs.Not Provided' | translate }}</span>
         <button mat-icon-button color="primary"
           *ngIf="charge.chargeTimeType.value === 'Weekly Fee' || charge.chargeTimeType.value === 'Monthly Fee'"
           (click)="editChargeFeeInterval(charge)">
@@ -85,7 +86,7 @@
     </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>
@@ -103,23 +104,23 @@
 
       <!-- Check Column -->
       <ng-container matColumnDef="check">
-          <th mat-header-cell *matHeaderCellDef>
+        <th mat-header-cell *matHeaderCellDef>
-              <mat-checkbox (change)="toggleSelects()" [(ngModel)]="selectAllItems"></mat-checkbox>
+          <mat-checkbox (change)="toggleSelects()" [(ngModel)]="selectAllItems"></mat-checkbox>
-          </th>
+        </th>
-          <td mat-cell *matCellDef="let element">
+        <td mat-cell *matCellDef="let element">
-              <mat-checkbox (change)="toggleSelect()" [(ngModel)]="element.selected"></mat-checkbox>
+          <mat-checkbox (change)="toggleSelect()" [(ngModel)]="element.selected"></mat-checkbox>
-          </td>
+        </td>
       </ng-container>
 
       <!-- Position Column -->
       <ng-container matColumnDef="id">
-        <th mat-header-cell *matHeaderCellDef> Client ID </th>
+        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Client ID' | translate }} </th>
         <td mat-cell *matCellDef="let element"> {{element.id}} </td>
       </ng-container>
 
       <!-- Name Column -->
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> Client Name </th>
+        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Client Name' | translate }} </th>
         <td mat-cell *matCellDef="let element"> {{element.displayName}} </td>
       </ng-container>
 
@@ -135,10 +136,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/savings/savings-account-stepper/savings-account-details-step/savings-account-details-step.component.html

@@ -3,30 +3,30 @@
   <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>
       <mat-select formControlName="productId" required>
         <mat-option *ngFor="let product of productData" [value]="product.id">
           {{ product.name }}
         </mat-option>
       </mat-select>
       <mat-error>
-        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%" (click)="submittedOnDatePicker.open()" *ngIf="savingsProductSelected">
-      <mat-label>Submitted On</mat-label>
+      <mat-label>{{'labels.inputs.Submitted On' | translate}}</mat-label>
       <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submittedOnDatePicker"
         formControlName="submittedOnDate" required>
       <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #submittedOnDatePicker></mat-datepicker>
       <mat-error>
-        Submission Date is <strong>required</strong>
+        {{'labels.inputs.Submitted On' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" *ngIf="savingsProductSelected">
-      <mat-label>Field Officer</mat-label>
+      <mat-label>{{'labels.inputs.Field Officer' | translate}}</mat-label>
       <mat-select formControlName="fieldOfficerId">
         <mat-option *ngFor="let officer of fieldOfficerData" [value]="officer.id">
           {{ officer.displayName }}
@@ -35,7 +35,7 @@
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" *ngIf="savingsProductSelected">
-      <mat-label>External ID</mat-label>
+      <mat-label>{{'labels.inputs.External ID' | translate}}</mat-label>
       <input matInput formControlName="externalId">
     </mat-form-field>
 
@@ -44,10 +44,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/savings/savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component.html

@@ -1,151 +1,158 @@
 <div fxLayout="row wrap" fxLayout.lt-md="column">
 
-  <h3 class="mat-h3" fxFlexFill>Details</h3>
+  <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Details' | translate}}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Product</span>
+    <span fxFlex="40%">{{'labels.inputs.Product' | translate}}</span>
     <span fxFlex="60%">{{ savingsAccount.productId | find:savingsAccountTemplate.productOptions:'id':'name' }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Submitted On</span>
+    <span fxFlex="40%">{{'labels.inputs.Submitted On' | translate}}</span>
     <span fxFlex="60%">{{ savingsAccount.submittedOnDate | dateFormat }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">External Id</span>
+    <span fxFlex="40%">{{'labels.inputs.External Id' | translate}}</span>
     <span fxFlex="60%" *ngIf="savingsAccount.externalId">
       <mifosx-external-identifier externalId="{{savingsAccount.externalId}}"></mifosx-external-identifier>
     </span>
     <span fxFlex="60%" *ngIf="!savingsAccount.externalId">
-      Unassigned
+      {{'labels.inputs.Unassigned' | translate}}
     </span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Field Officer</span>
+    <span fxFlex="40%">{{'labels.inputs.Field Officer' | translate}}</span>
-    <span fxFlex="60%">{{ savingsAccount.fieldOfficerId | find:savingsAccountProductTemplate.fieldOfficerOptions:'id':'displayName' }}</span>
+    <span fxFlex="60%">{{ savingsAccount.fieldOfficerId |
+      find:savingsAccountProductTemplate.fieldOfficerOptions:'id':'displayName' }}</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%">Currency</span>
+    <span fxFlex="40%">{{'labels.inputs.Currency' | translate}}</span>
-    <span fxFlex="60%">{{ savingsAccountTermsForm.get('currencyCode').value  }}</span>
+    <span fxFlex="60%">{{ savingsAccountTermsForm.get('currencyCode').value }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Decimal Places</span>
+    <span fxFlex="40%">{{'labels.inputs.Decimal Places' | translate}}</span>
     <span fxFlex="60%">{{ savingsAccountTermsForm.get('decimal').value }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Nominal Annual Interest Rate:</span>
+    <span fxFlex="40%">{{'labels.inputs.Nominal Annual Interest' | translate}}:</span>
-    <span fxFlex="60%">{{ savingsAccount.nominalAnnualInterestRate }}</span>
+    <span fxFlex="60%">{{ savingsAccount.nominalAnnualInterestRate | formatNumber }} %</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Interest Compounding Period:</span>
+    <span fxFlex="40%">{{'labels.inputs.Interest Compounding Period' | translate}}:</span>
-    <span fxFlex="60%">{{ savingsAccount.interestCompoundingPeriodType | find:savingsAccountProductTemplate.interestCompoundingPeriodTypeOptions:'id':'value' }}</span>
+    <span fxFlex="60%">{{ savingsAccount.interestCompoundingPeriodType |
+      find:savingsAccountProductTemplate.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%">{{ savingsAccount.interestPostingPeriodType | find:savingsAccountProductTemplate.interestPostingPeriodTypeOptions:'id':'value' }}</span>
+    <span fxFlex="60%">{{ savingsAccount.interestPostingPeriodType |
+      find:savingsAccountProductTemplate.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%">{{ savingsAccount.interestCalculationType | find:savingsAccountProductTemplate.interestCalculationTypeOptions:'id':'value' }}</span>
+    <span fxFlex="60%">{{ savingsAccount.interestCalculationType |
+      find:savingsAccountProductTemplate.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%">{{ savingsAccount.interestCalculationDaysInYearType | find:savingsAccountProductTemplate.interestCalculationDaysInYearTypeOptions:'id':'value' }}</span>
+    <span fxFlex="60%">{{ savingsAccount.interestCalculationDaysInYearType |
+      find:savingsAccountProductTemplate.interestCalculationDaysInYearTypeOptions:'id':'value' }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingsAccount.minRequiredOpeningBalance">
-    <span fxFlex="40%">Minimum Opening Balance:</span>
+    <span fxFlex="40%">{{'labels.inputs.Minimum Opening Balance' | translate}}:</span>
-    <span fxFlex="60%">{{ savingsAccount.minRequiredOpeningBalance }}</span>
+    <span fxFlex="60%">{{ savingsAccount.minRequiredOpeningBalance | formatNumber }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Apply Withdrawal Fee for Transfers:</span>
+    <span fxFlex="40%">{{'labels.inputs.Apply Withdrawal Fee for Transfers' | translate}}:</span>
     <span fxFlex="60%">{{ savingsAccount.withdrawalFeeForTransfers | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingsAccount.lockinPeriodFrequency">
-    <span fxFlex="40%">Lock-in Period:</span>
+    <span fxFlex="40%">{{'labels.inputs.Lock-in Period' | translate}}:</span>
-    <span fxFlex="60%">{{ savingsAccount.lockinPeriodFrequency + ' ' + (savingsAccount.lockinPeriodFrequencyType | find:savingsAccountProductTemplate.lockinPeriodFrequencyTypeOptions:'id':'value') }}</span>
+    <span fxFlex="60%">{{ savingsAccount.lockinPeriodFrequency + ' ' + (savingsAccount.lockinPeriodFrequencyType |
+      find:savingsAccountProductTemplate.lockinPeriodFrequencyTypeOptions:'id':'value') }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Is Overdraft Allowed:</span>
+    <span fxFlex="40%">{{'labels.inputs.Is Overdraft Allowed' | translate}}:</span>
     <span fxFlex="60%">{{ savingsAccount.allowOverdraft | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingsAccount.minOverdraftForInterestCalculation">
-    <span fxFlex="40%">Minimum Overdraft Required for Interest Calculation:</span>
+    <span fxFlex="40%">{{'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate}}:</span>
-    <span fxFlex="60%">{{ savingsAccount.minOverdraftForInterestCalculation }}</span>
+    <span fxFlex="60%">{{ savingsAccount.minOverdraftForInterestCalculation | formatNumber }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingsAccount.nominalAnnualInterestRateOverdraft">
-    <span fxFlex="40%">Nominal Annual Interest for Overdraft:</span>
+    <span fxFlex="40%">{{'labels.inputs.Nominal Annual Interest for Overdraft' | translate}}:</span>
-    <span fxFlex="60%">{{ savingsAccount.nominalAnnualInterestRateOverdraft }}</span>
+    <span fxFlex="60%">{{ savingsAccount.nominalAnnualInterestRateOverdraft | formatNumber }} %</span>
   </div>
 
   <div fxFlexFill *ngIf="savingsAccount.overdraftLimit">
-    <span fxFlex="40%">Maximum Overdraft Amount Limit:</span>
+    <span fxFlex="40%">{{'labels.inputs.Maximum Overdraft Amount Limit' | translate}}:</span>
-    <span fxFlex="60%">{{ savingsAccount.overdraftLimit }}</span>
+    <span fxFlex="60%">{{ savingsAccount.overdraftLimit | formatNumber }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Enforce Minimum Balance:</span>
+    <span fxFlex="40%">{{'labels.inputs.Enforce Minimum Balance' | translate}}:</span>
     <span fxFlex="60%">{{ savingsAccount.enforceMinRequiredBalance | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingsAccount.minRequiredBalance">
-    <span fxFlex="40%">Minimum Balance:</span>
+    <span fxFlex="40%">{{'labels.inputs.Minimum Balance' | translate}}:</span>
     <span fxFlex="60%">{{ savingsAccount.minRequiredBalance }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingsAccount.charges.length" fxLayout="row wrap" fxLayout.lt-md="column">
 
-    <h3 class="mat-h3" fxFlexFill>Charges</h3>
+    <h3 class="mat-h3" fxFlexFill>{{'labels.inputs.Charges' | translate}}</h3>
 
     <mat-divider fxFlexFill></mat-divider>
 
     <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="savingsAccount.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 }}
+          {{ charge.amount | formatNumber }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="date">
-        <th mat-header-cell *matHeaderCellDef> Date </th>
+        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Date' | translate}} </th>
         <td mat-cell *matCellDef="let charge">
-          <span *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'">
+          <span
+            *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'">
             {{(charge.dueDate | dateFormat) || 'Unassigned'}}
           </span>
           <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
@@ -160,14 +167,14 @@
       </ng-container>
 
       <ng-container matColumnDef="repaymentsEvery">
-        <th mat-header-cell *matHeaderCellDef> Repayments Every </th>
+        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Repayments Every' | translate}} </th>
         <td mat-cell *matCellDef="let charge">
           {{ charge.feeInterval || 'Not Provided' }}
         </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>
@@ -185,12 +192,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]="['../']">
+  <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/savings/savings-account-stepper/savings-account-terms-step/savings-account-terms-step.component.html

@@ -3,89 +3,89 @@
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" fxLayoutAlign.gt-sm="start center">
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Currency</mat-label>
+      <mat-label>{{'labels.inputs.Currency' | translate}}</mat-label>
       <input matInput formControlName="currencyCode">
     </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="decimal">
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Nominal Annual Interest Rate</mat-label>
+      <mat-label>{{'labels.inputs.Nominal Annual Interest' | translate}}</mat-label>
       <input type="number" matInput formControlName="nominalAnnualInterestRate" required>
       <mat-error>
-        Nominal Annual Interest is <strong>required</strong>
+        {{'labels.inputs.Nominal Annual Interest' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <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>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Minimum Opening Balance</mat-label>
+      <mat-label>{{'labels.inputs.Minimum Opening Balance' | translate}}</mat-label>
       <input type="number" matInput formControlName="minRequiredOpeningBalance">
     </mat-form-field>
 
     <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="withdrawalFeeForTransfers" class="margin-v">
-      Apply Withdrawal Fee for Transfers
+      {{'labels.inputs.Apply Withdrawal Fee for Transfers' | 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">
     </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">
           {{ lockinPeriodFrequencyType.value }}
@@ -95,26 +95,26 @@
 
     <mat-divider fxFlex="98%"></mat-divider>
 
-    <h3 fxFlex="23%" class="mat-h3">Overdraft</h3>
+    <h3 fxFlex="23%" class="mat-h3">{{'labels.inputs.Overdraft' | translate}}</h3>
 
     <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="allowOverdraft" class="margin-b">
-      Is Overdraft Allowed?
+      {{'labels.inputs.Is Overdraft Allowed' | translate}}
     </mat-checkbox>
 
     <div *ngIf="savingsAccountTermsForm.value.allowOverdraft" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
       <mat-form-field fxFlex="31%">
-        <mat-label>Minimum Overdraft Required for Interest Calculation</mat-label>
+        <mat-label>{{'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate}}</mat-label>
         <input type="number" matInput formControlName="minOverdraftForInterestCalculation">
       </mat-form-field>
 
       <mat-form-field fxFlex="31%">
-        <mat-label>Nominal Annual Interest for Overdraft</mat-label>
+        <mat-label>{{'labels.inputs.Nominal Annual Interest for Overdraft' | translate}}</mat-label>
         <input type="number" matInput formControlName="nominalAnnualInterestRateOverdraft">
       </mat-form-field>
 
       <mat-form-field fxFlex="31%">
-        <mat-label>Maximum Overdraft Amount Limit</mat-label>
+        <mat-label>{{'labels.inputs.Maximum Overdraft Amount Limit' | translate}}</mat-label>
         <input type="number" matInput formControlName="overdraftLimit">
       </mat-form-field>
 
@@ -123,16 +123,16 @@
     <mat-divider fxFlex="98%"></mat-divider>
 
     <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="enforceMinRequiredBalance" class="margin-v">
-      Enforce Minimum Balance
+      {{'labels.inputs.Enforce Minimum Balance' | translate}}
     </mat-checkbox>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Minimum Balance</mat-label>
+      <mat-label>{{'labels.inputs.Minimum Balance' | translate}}</mat-label>
       <input type="number" matInput formControlName="minRequiredBalance">
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" *ngIf="savingsAccountTermsForm.controls.minBalanceForInterestCalculation.value">
-      <mat-label>Balance Required for Interest Calculation</mat-label>
+      <mat-label>{{'labels.inputs.Balance Required for Interest Calculation' | translate}}</mat-label>
       <input type="number" matInput formControlName="minBalanceForInterestCalculation">
     </mat-form-field>
 
@@ -141,10 +141,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/assets/translations/es-MX.json

@@ -1358,11 +1358,11 @@
             "Follow": "Seguir",
             "Frequency": "Frecuencia",
             "Frequency Interval": "Intervalo de frecuencia",
-            "Frequency Interval for compounding": "Intervalo de frecuencia para la capitalización",
+            "Frequency Interval for compounding": "Intervalo de frecuencia para la contabilización",
             "Frequency Interval for recalculation": "Intervalo de frecuencia para recálculo",
             "Frequency Number": "Número de frecuencia",
             "Frequency Type": "Tipo de frecuencia",
-            "Frequency for compounding": "Frecuencia de capitalización",
+            "Frequency for compounding": "Frecuencia de contabilización",
             "Frequency for recalculate Outstanding Principal": "Frecuencia para recalcular el capital pendiente",
             "Friday": "Viernes",
             "From": "De",
@@ -1451,7 +1451,7 @@
             "Interest Calculated Using": "Interés calculado usando",
             "Interest Calculated using": "Interés calculado usando",
             "Interest Calculation Period": "Período de cálculo de intereses",
-            "Interest Compounding Period": "Período de capitalización de intereses",
+            "Interest Compounding Period": "Período de contabilización de intereses",
             "Interest Date": "Fecha de interés",
             "Interest Earned": "Interés obtenido",
             "Interest Earned Not Posted": "Intereses ganados no contabilizados",
@@ -1461,8 +1461,8 @@
             "Interest Outstanding": "Interés pendiente",
             "Interest Payable": "Intereses a pagar",
             "Interest Posted": "Interés publicado",
-            "Interest Posting Period": "Período de contabilización de intereses",
+            "Interest Posting Period": "Período de capitalización de intereses",
-            "Interest Posting period": "Periodo de contabilización de intereses",
+            "Interest Posting period": "Periodo de capitalización de intereses",
             "Interest Rate": "Tasa de interés",
             "Interest Rates": "Tasas de interés",
             "Interest Rate Chart": "Gráfico de tasas de interés",
@@ -1658,8 +1658,8 @@
             "No. of Active Loans": "No. de Créditos Activos",
             "No. of Active Savings": "No. de Ahorros Activos",
             "No. of Days in Year": "No. de días en el año",
-            "Nominal Annual Interest": "Interés nominal anual",
+            "Nominal Annual Interest": "Tasa de Interés Nominal Anual",
-            "Nominal Annual Interest for Overdraft": "Interés Nominal Anual por Sobregiro",
+            "Nominal Annual Interest for Overdraft": "Tasa de Interés Nominal Anual por Sobregiro",
             "Nominal Interest Rate": "Tasa de interés nominal",
             "Nominal interest rate by loan cycle": "Tasa de interés nominal por ciclo de préstamo",
             "Nominal Price": "Precio nominal",
@@ -1982,7 +1982,7 @@
             "String Value": "Valor de cadena",
             "Sub Type": "Subtipo",
             "Submission Date": "Día de entrega",
-            "Submitted On": "Enviado el",
+            "Submitted On": "Registrado el día",
             "Submitted On Date": "Registrado el día",
             "Submitted on": "Registrado el",
             "Submitted on Date From": "Registrado en fecha de",