Charges with translations

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

@@ -47,7 +47,7 @@
     <ng-container matColumnDef="chargeTimeType">
       <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Collected On' | translate }} </th>
       <td mat-cell *matCellDef="let charge">
-        {{ charge.chargeTimeType.value }}
+        {{ charge.chargeTimeType.value | translateCatalog }}
       </td>
     </ng-container>
 
@@ -65,7 +65,7 @@
             || charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee')">
           N/A
         </span>
-        <button mat-icon-button color="primary" *ngIf="charge.chargeTimeType.value === 'Weekly Fee' || charge.chargeTimeType.value === 'Annual Fee'
+        <button mat-icon-button color="primary" *ngIf="charge.chargeTimeType.value === 'Weekly Fee' || charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'
                   || charge.chargeTimeType.value === 'Specified due date'" (click)="editChargeDate(charge)">
           <fa-icon icon="pen"></fa-icon>
         </button>

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

@@ -12,6 +12,7 @@ import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
 import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
 import { Dates } from 'app/core/utils/dates';
 import { MatTableDataSource } from '@angular/material/table';
+import { TranslateService } from '@ngx-translate/core';
 
 /**
  * Savings Account Charges Step
@@ -55,8 +56,9 @@ export class SavingsAccountChargesStepComponent implements OnInit, OnChanges {
   /**
    * @param {MatDialog} dialog Mat Dialog
    */
-  constructor(public dialog: MatDialog,
-              private dateUtils: Dates) {}
+  constructor(private dialog: MatDialog,
+              private dateUtils: Dates,
+            private translateService: TranslateService) {}
 
    ngOnInit() {
     if (this.savingsAccountTemplate) {
@@ -95,14 +97,14 @@ export class SavingsAccountChargesStepComponent implements OnInit, OnChanges {
     const formfields: FormfieldBase[] = [
       new InputBase({
         controlName: 'amount',
-        label: 'Amount',
+        label: this.translateService.instant('labels.inputs.Amount'),
         value: charge.amount,
         type: 'number',
         required: false
       }),
     ];
     const data = {
-      title: 'Edit Charge Amount',
+      title: this.translateService.instant('labels.heading.Edit Charge Amount'),
       layout: { addButtonText: 'Confirm' },
       formfields: formfields
     };
@@ -125,14 +127,14 @@ export class SavingsAccountChargesStepComponent implements OnInit, OnChanges {
     const formfields: FormfieldBase[] = [
       new DatepickerBase({
         controlName: 'date',
-        label: 'Date',
+        label: this.translateService.instant('labels.inputs.Date'),
         value: charge.dueDate || charge.feeOnMonthDay || '',
         type: 'datetime-local',
         required: false
       }),
     ];
     const data = {
-      title: 'Edit Charge Date',
+      title: this.translateService.instant('labels.heading.Edit Charge Date'),
       layout: { addButtonText: 'Confirm' },
       formfields: formfields
     };
@@ -145,12 +147,15 @@ export class SavingsAccountChargesStepComponent implements OnInit, OnChanges {
         switch (charge.chargeTimeType.value) {
           case 'Specified due date':
           case 'Weekly Fee':
-          newCharge = { ...charge, dueDate: date };
+            newCharge = { ...charge, dueDate: date };
           break;
           case 'Annual Fee':
-          newCharge = { ...charge, feeOnMonthDay: date };
+          case 'Monthly Fee':
+            const dateMonthDay = this.dateUtils.formatDate(response.data.value.date, 'dd MMMM');
+            newCharge = { ...charge, feeOnMonthDay: dateMonthDay };
           break;
         }
+        console.log(newCharge);
         this.chargesDataSource.splice(this.chargesDataSource.indexOf(charge), 1, newCharge);
         this.chargesDataSource = this.chargesDataSource.concat([]);
       }

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

@@ -51,26 +51,26 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">{{'labels.inputs.Interest Compounding Period' | translate}}:</span>
-    <span fxFlex="60%">{{ savingsAccount.interestCompoundingPeriodType |
-      find:savingsAccountProductTemplate.interestCompoundingPeriodTypeOptions:'id':'value' }}</span>
+    <span fxFlex="60%">{{ getCatalogTranslation(savingsAccount.interestCompoundingPeriodType |
+      find:savingsAccountProductTemplate.interestCompoundingPeriodTypeOptions:'id':'value') }}</span>
   </div>
 
   <div fxFlexFill>
     <span fxFlex="40%">{{'labels.inputs.Interest Posting Period' | translate}}:</span>
-    <span fxFlex="60%">{{ savingsAccount.interestPostingPeriodType |
-      find:savingsAccountProductTemplate.interestPostingPeriodTypeOptions:'id':'value' }}</span>
+    <span fxFlex="60%">{{ getCatalogTranslation(savingsAccount.interestPostingPeriodType |
+      find:savingsAccountProductTemplate.interestPostingPeriodTypeOptions:'id':'value') }}</span>
   </div>
 
   <div fxFlexFill>
     <span fxFlex="40%">{{'labels.inputs.Interest Calculated using' | translate}}:</span>
-    <span fxFlex="60%">{{ savingsAccount.interestCalculationType |
-      find:savingsAccountProductTemplate.interestCalculationTypeOptions:'id':'value' }}</span>
+    <span fxFlex="60%">{{ getCatalogTranslation(savingsAccount.interestCalculationType |
+      find:savingsAccountProductTemplate.interestCalculationTypeOptions:'id':'value') }}</span>
   </div>
 
   <div fxFlexFill>
     <span fxFlex="40%">{{'labels.inputs.Days in Year' | translate}}:</span>
-    <span fxFlex="60%">{{ savingsAccount.interestCalculationDaysInYearType |
-      find:savingsAccountProductTemplate.interestCalculationDaysInYearTypeOptions:'id':'value' }}</span>
+    <span fxFlex="60%">{{ getCatalogTranslation(savingsAccount.interestCalculationDaysInYearType |
+      find:savingsAccountProductTemplate.interestCalculationDaysInYearTypeOptions:'id':'value') }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingsAccount.minRequiredOpeningBalance">
@@ -85,8 +85,8 @@
 
   <div fxFlexFill *ngIf="savingsAccount.lockinPeriodFrequency">
     <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%">{{ getCatalogTranslation(savingsAccount.lockinPeriodFrequency + ' ' + (savingsAccount.lockinPeriodFrequencyType |
+      find:savingsAccountProductTemplate.lockinPeriodFrequencyTypeOptions:'id':'value')) }}</span>
   </div>
 
   <div fxFlexFill>
@@ -137,7 +137,7 @@
       <ng-container matColumnDef="chargeCalculationType">
         <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Type' | translate}} </th>
         <td mat-cell *matCellDef="let charge">
-          {{ charge.chargeCalculationType.value }}
+          {{ charge.chargeCalculationType.value | translateCatalog }}
         </td>
       </ng-container>
 

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

@@ -1,5 +1,6 @@
 /** Angular Imports */
 import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
 
 /**
  * Savings account preview step
@@ -26,6 +27,9 @@ export class SavingsAccountPreviewStepComponent {
   /** Form submission event */
   @Output() submit = new EventEmitter();
 
-  constructor() { }
+  constructor(private translateService: TranslateService) { }
 
+  getCatalogTranslation(text: string): string {
+    return this.translateService.instant('labels.catalogs.' + text);
+  }
 }

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

@@ -24,7 +24,7 @@
       <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 }}
+          {{ interestCompoundingPeriodType.value | translateCatalog }}
         </mat-option>
       </mat-select>
       <mat-error>
@@ -36,7 +36,7 @@
       <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 }}
+          {{ interestPostingPeriodType.value | translateCatalog }}
         </mat-option>
       </mat-select>
       <mat-error>
@@ -48,7 +48,7 @@
       <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 }}
+          {{ interestCalculationType.value | translateCatalog }}
         </mat-option>
       </mat-select>
       <mat-error>
@@ -60,7 +60,7 @@
       <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 }}
+          {{ interestCalculationDaysInYearType.value | translateCatalog }}
         </mat-option>
       </mat-select>
       <mat-error>
@@ -88,7 +88,7 @@
       <mat-label>{{'labels.inputs.Type' | translate}}</mat-label>
       <mat-select formControlName="lockinPeriodFrequencyType">
         <mat-option *ngFor="let lockinPeriodFrequencyType of lockinPeriodFrequencyTypeData" [value]="lockinPeriodFrequencyType.id">
-          {{ lockinPeriodFrequencyType.value }}
+          {{ lockinPeriodFrequencyType.value | translateCatalog }}
         </mat-option>
       </mat-select>
     </mat-form-field>

src/app/savings/savings-account-view/charges-tab/charges-tab.component.html

@@ -2,11 +2,11 @@
 
   <div fxLayout="row" fxLayoutAlign="start">
     <div class="m-b-10">
-      <h3>All Charges</h3>
+      <h3>{{ 'labels.inputs.Charges' | translate }}</h3>
     </div>
     <div class="action-button m-b-20" *ngIf="this.chargesData">
       <button mat-raised-button color="primary" (click)="toggleCharges()">
-        {{showInactiveCharges?'View Active Charges':'View Inactive Charges'}}</button>
+        {{showInactiveCharges ? viewAllChargeButtons('View Active Charges') : viewAllChargeButtons('View Inactive Charges')}}</button>
     </div>
   </div>
 
@@ -15,57 +15,57 @@
     <table mat-table #chargesTable [dataSource]="dataSource" >
 
       <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="feeOrPenalty">
-        <th mat-header-cell *matHeaderCellDef> Fee/Penalty </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.penalty === true ? 'Penalty' : 'Fee' }} </td>
+        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Charge Type' | translate}} </th>
+        <td mat-cell *matCellDef="let charge"> {{ charge.penalty ? 'Penalty' : 'Fee' | translateCatalog }} </td>
       </ng-container>
 
       <ng-container matColumnDef="paymentDueAt">
-        <th mat-header-cell *matHeaderCellDef> Payment Due At </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.chargeTimeType.value }} </td>
+        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Payment Due At' | translate}} </th>
+        <td mat-cell *matCellDef="let charge"> {{ charge.chargeTimeType.value | translateCatalog }} </td>
       </ng-container>
 
       <ng-container matColumnDef="dueAsOf">
-        <th mat-header-cell *matHeaderCellDef> Due As Of </th>
+        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Due As Of' | translate}} </th>
         <td mat-cell *matCellDef="let charge"> {{ charge.dueDate | dateFormat }} </td>
       </ng-container>
 
       <ng-container matColumnDef="repeatsOn">
-        <th mat-header-cell *matHeaderCellDef> Repeats On (M/d) </th>
+        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Repeats On (M/d)' | translate}} </th>
         <td mat-cell *matCellDef="let charge"> {{ charge.feeOnMonthDay ? charge.feeOnMonthDay.join('/') : '' }} </td>
       </ng-container>
 
       <ng-container matColumnDef="calculationType">
-        <th mat-header-cell *matHeaderCellDef> Calculation Type </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.chargeCalculationType.value}} </td>
+        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Calculation Type' | translate}} </th>
+        <td mat-cell *matCellDef="let charge"> {{ charge.chargeCalculationType.value | translateCatalog }} </td>
       </ng-container>
 
       <ng-container matColumnDef="due">
-        <th mat-header-cell *matHeaderCellDef> Due </th>
+        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Due' | translate}} </th>
         <td mat-cell *matCellDef="let charge"> {{charge.amount | currency:charge.currency.code:'symbol-narrow':'1.2-2'}} </td>
       </ng-container>
 
       <ng-container matColumnDef="paid">
-        <th mat-header-cell *matHeaderCellDef> Paid </th>
+        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Paid' | translate}} </th>
         <td mat-cell *matCellDef="let charge"> {{charge.amountPaid | currency:charge.currency.code:'symbol-narrow':'1.2-2'}} </td>
       </ng-container>
 
       <ng-container matColumnDef="waived">
-        <th mat-header-cell *matHeaderCellDef> Waived </th>
+        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Waived' | translate}} </th>
         <td mat-cell *matCellDef="let charge"> {{charge.amountWaived | currency:charge.currency.code:'symbol-narrow':'1.2-2'}} </td>
       </ng-container>
 
       <ng-container matColumnDef="outstanding">
-        <th mat-header-cell *matHeaderCellDef> Outstanding </th>
+        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Outstanding' | translate}} </th>
         <td mat-cell *matCellDef="let charge"> {{charge.amountOutstanding | currency:charge.currency.code:'symbol-narrow':'1.2-2'}} </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 charge">
           <span *ngIf="savingsAccountData.status.value === 'Submitted and pending approval'">
             <button class="account-action-button" mat-raised-button color="primary" matTooltip="Edit Charge"

src/app/savings/savings-account-view/charges-tab/charges-tab.component.ts

@@ -19,6 +19,7 @@ import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-
 import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
 import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
 import { Dates } from 'app/core/utils/dates';
+import { TranslateService } from '@ngx-translate/core';
 
 /**
  * Charges Tab Component
@@ -69,8 +70,9 @@ export class ChargesTabComponent implements OnInit {
               private route: ActivatedRoute,
               private dateUtils: Dates,
               private router: Router,
-              public dialog: MatDialog,
-              private settingsService: SettingsService) {
+              private dialog: MatDialog,
+              private settingsService: SettingsService,
+            private translateService: TranslateService) {
     this.route.parent.data.subscribe((data: { savingsAccountData: any }) => {
       this.savingsAccountData = data.savingsAccountData;
       this.chargesData = this.savingsAccountData.charges;
@@ -257,4 +259,8 @@ export class ChargesTabComponent implements OnInit {
       .then(() => this.router.navigate([url]));
   }
 
+  viewAllChargeButtons(text: string): string {
+    return this.translateService.instant('labels.buttons.' + text);
+  }
+
 }

src/app/savings/savings-account-view/general-tab/general-tab.component.html

@@ -9,6 +9,13 @@
       <h4 class="table-headers">{{'labels.heading.Savings Details' | translate}}</h4>
       <table>
         <tbody>
+          <tr>
+            <td>{{'labels.inputs.External Id' | translate}}</td>
+            <td *ngIf="savingsAccountData.externalId">
+              <mifosx-external-identifier externalId="{{savingsAccountData.externalId}}"></mifosx-external-identifier>
+            </td>
+            <td *ngIf="!savingsAccountData.externalId">{{'labels.inputs.Not Provided' | translate}}</td>              
+          </tr>
           <tr>
             <td>{{'labels.inputs.Activated On' | translate}}</td>
             <td>{{savingsAccountData.timeline.activatedOnDate ? (savingsAccountData.timeline.activatedOnDate |
@@ -18,19 +25,16 @@
             <td>{{'labels.inputs.Field Officer' | translate}}</td>
             <td>{{savingsAccountData.fieldOfficerName ? savingsAccountData.fieldOfficerName : 'Unassigned'}}</td>
           </tr>
-          <tr>
-            <td>{{'labels.inputs.External Id' | translate}}</td>
-            <td *ngIf="savingsAccountData.externalId">
-              <mifosx-external-identifier externalId="{{savingsAccountData.externalId}}"></mifosx-external-identifier>
-            </td>
-            <td *ngIf="!savingsAccountData.externalId">{{'labels.inputs.Not Provided' | translate}}</td>              </tr>
           <tr>
             <td>{{'labels.inputs.Currency' | translate}}</td>
             <td>{{savingsAccountData.currency.name}} [{{savingsAccountData.currency.code}}]</td>
           </tr>
           <tr>
             <td>{{'labels.inputs.Nominal Interest Rate' | translate}}</td>
-            <td class="r-amount">{{savingsAccountData.nominalAnnualInterestRate | formatNumber}} %</td>
+            <td class="r-amount">
+              <span *ngIf="savingsAccountData.nominalAnnualInterestRate">{{savingsAccountData.nominalAnnualInterestRate | formatNumber}} %</span>
+              <span *ngIf="!savingsAccountData.nominalAnnualInterestRate">0 %</span>
+            </td>
           </tr>
         </tbody>
       </table>
@@ -115,19 +119,19 @@
         </tr>
         <tr>
           <td>{{'labels.inputs.Interest Compounding Period' | translate}}</td>
-          <td>{{savingsAccountData.interestCompoundingPeriodType.value}}</td>
+          <td>{{savingsAccountData.interestCompoundingPeriodType.value | translateCatalog}}</td>
         </tr>
         <tr>
           <td>{{'labels.inputs.Interest Posting Period' | translate}}</td>
-          <td>{{savingsAccountData.interestPostingPeriodType.value}}</td>
+          <td>{{savingsAccountData.interestPostingPeriodType.value | translateCatalog}}</td>
         </tr>
         <tr>
           <td>{{'labels.inputs.Interest Calculated Using' | translate}}</td>
-          <td>{{savingsAccountData.interestCalculationType.value}}</td>
+          <td>{{savingsAccountData.interestCalculationType.value | translateCatalog}}</td>
         </tr>
         <tr>
           <td>{{'labels.inputs.Days in Year' | translate}}</td>
-          <td>{{savingsAccountData.interestCalculationDaysInYearType.value}}</td>
+          <td>{{savingsAccountData.interestCalculationDaysInYearType.value | translateCatalog}}</td>
         </tr>
         <tr *ngIf="savingsAccountData.withdrawalFee">
           <td>{{'labels.inputs.Withdrawal Fee' | translate}}</td>
@@ -200,6 +204,13 @@
       <h4 class="table-headers">{{'labels.heading.Account Summary' | translate}}</h4>
       <table>
         <tbody>
+          <tr>
+            <td>{{'labels.inputs.External Id' | translate}}</td>
+            <td *ngIf="savingsAccountData.externalId">
+              <mifosx-external-identifier externalId="{{savingsAccountData.externalId}}"></mifosx-external-identifier>
+            </td>
+            <td *ngIf="!savingsAccountData.externalId">{{'labels.inputs.Not Provided' | translate}}</td>
+          </tr>
           <tr>
             <td>{{'labels.inputs.Activated On' | translate}}</td>
             <td>{{savingsAccountData.timeline.activatedOnDate ? (savingsAccountData.timeline.activatedOnDate |
@@ -209,13 +220,6 @@
             <td>{{'labels.inputs.Currency' | translate}}</td>
             <td>{{savingsAccountData.currency.name}} [{{savingsAccountData.currency.code}}]</td>
           </tr>
-          <tr>
-            <td>{{'labels.inputs.External Id' | translate}}</td>
-            <td *ngIf="savingsAccountData.externalId">
-              <mifosx-external-identifier externalId="{{savingsAccountData.externalId}}"></mifosx-external-identifier>
-            </td>
-            <td *ngIf="!savingsAccountData.externalId">{{'labels.inputs.Not Provided' | translate}}</td>
-          </tr>
         </tbody>
       </table>
     </div>

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

@@ -102,7 +102,7 @@
       </a>
       <a mat-tab-link [routerLink]="['./documents']" routerLinkActive #savingsDocuments="routerLinkActive"
         [active]="savingsDocuments.isActive">
-        {{'labels.inputs.Savings Documents' | translate}}
+        {{'labels.inputs.Documents' | translate}}
       </a>
       <a mat-tab-link *mifosxHasPermission="'READ_SAVINGSNOTE'" [routerLink]="['./notes']" routerLinkActive #notes="routerLinkActive"
         [active]="notes.isActive">

src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.html

@@ -34,9 +34,16 @@
         <td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)"> {{ transaction.date | dateFormat }} </td>
       </ng-container>
 
+      <ng-container matColumnDef="externalId">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.External Id" | translate}} </th>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)"> 
+          <mifosx-external-identifier externalId="{{transaction.externalId}}"></mifosx-external-identifier>
+        </td>
+      </ng-container>
+
       <ng-container matColumnDef="transactionType">
         <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Transaction Type" | translate}} </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)"> {{ transaction.transactionType.value  }} </td>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)"> {{ transaction.transactionType.value | translateCatalog }} </td>
       </ng-container>
 
       <ng-container matColumnDef="debit">

src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.ts

@@ -30,7 +30,7 @@ export class TransactionsTabComponent implements OnInit {
   hideAccrualsParam: UntypedFormControl;
   hideReversedParam: UntypedFormControl;
   /** Columns to be displayed in transactions table. */
-  displayedColumns: string[] = ['row', 'id', 'date', 'transactionType', 'debit', 'credit', 'balance', 'actions'];
+  displayedColumns: string[] = ['row', 'id', 'date', 'externalId', 'transactionType', 'debit', 'credit', 'balance', 'actions'];
   /** Data source for transactions table. */
   dataSource: MatTableDataSource<any>;
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;

src/app/savings/savings-account-view/view-charge/view-charge.component.html

@@ -39,7 +39,7 @@
       <div fxLayout="row wrap" class="content">
 
         <div fxFlex="50%" class="mat-body-strong">
-          Name
+          {{ 'labels.inputs.Name' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -47,15 +47,15 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Charge Type
+          {{ 'labels.inputs.Charge Type' | translate }}
         </div>
 
         <div fxFlex="50%">
-          {{ chargeData.penalty ? 'Penalty' : 'Fees' }}
+          {{ chargeData.penalty ? 'Penalty' : 'Fee' | translateCatalog }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Currency
+          {{ 'labels.inputs.Currency' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -63,15 +63,15 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Payment due at
+          {{ 'labels.inputs.Payment due at' | translate }}
         </div>
 
         <div fxFlex="50%">
-          {{ chargeData.chargeTimeType.value }}
+          {{ chargeData.chargeTimeType.value | translateCatalog }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Payment due as of
+          {{ 'labels.inputs.Payment due as of' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -79,15 +79,15 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Calculation Type
+          {{ 'labels.inputs.Calculation Type' | translate }}
         </div>
 
         <div fxFlex="50%">
-          {{ chargeData.chargeCalculationType.value }}
+          {{ chargeData.chargeCalculationType.value | translateCatalog }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Due
+          {{ 'labels.inputs.Due' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -95,7 +95,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Paid
+          {{ 'labels.inputs.Paid' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -103,7 +103,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Waived
+          {{ 'labels.inputs.Waived' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -111,7 +111,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Outstanding
+          {{ 'labels.inputs.Outstanding' | translate }}
         </div>
 
         <div fxFlex="50%">