Fixed Deposit account view update (#1881)

Co-authored-by: Jose Alberto Hernandez <alberto@blue-daemon.local>

docker-compose.yml

@@ -21,4 +21,4 @@ services:
       - FINERACT_API_VERSION=/v1
       - FINERACT_PLATFORM_TENANT_IDENTIFIER=default
       - MIFOS_DEFAULT_LANGUAGE=en-US
-      - MIFOS_SUPPORTED_LANGUAGES=en-US,fr-FR
+      - MIFOS_SUPPORTED_LANGUAGES=cs-CS,de-DE,en-US,es-MX,fr-FR,it-IT,ko-KO,lt-LT,lv-LV,ne-NE,pt-PT

env.sample

@@ -15,7 +15,7 @@ FINERACT_PLATFORM_TENANTS_IDENTIFIER=default
 
 MIFOS_DEFAULT_LANGUAGE=en-US
 
-MIFOS_SUPPORTED_LANGUAGES=en-US,fr-FR
+MIFOS_SUPPORTED_LANGUAGES=cs-CS,de-DE,en-US,es-MX,fr-FR,it-IT,ko-KO,lt-LT,lv-LV,ne-NE,pt-PT
 
 MIFOS_PRELOAD_CLIENTS=true
 

src/app/account-transfers/list-transactions/list-transactions.component.html

@@ -59,7 +59,7 @@
 
     <ng-container matColumnDef="reversed">
       <th mat-header-cell *matHeaderCellDef> {{ "labels.inputs.Reversed"| translate}} </th>
-      <td mat-cell *matCellDef="let transaction"> {{ transaction.reversed ? 'Yes' : 'No'}}</td>
+      <td mat-cell *matCellDef="let transaction"> {{ transaction.reversed | yesNo}}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

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

@@ -84,7 +84,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ glAccount.manualEntriesAllowed ? 'Yes' : 'No' }}
+          {{ glAccount.manualEntriesAllowed | yesNo }}
         </div>
 
         <div fxFlex="50%" class="header" *ngIf="glAccount.description">

src/app/clients/client-stepper/client-preview-step/client-preview-step.component.html

@@ -69,7 +69,7 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">{{ "labels.inputs.Active" |translate}}?</span>
-    <span fxFlex="60%">{{ client.active ? 'Yes' : 'No' }}</span>
+    <span fxFlex="60%">{{ client.active | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="client.activationDate">
@@ -86,7 +86,7 @@
 
     <div fxFlexFill>
       <span fxFlex="40%">{{ "labels.inputs.Is Staff" |translate}}?</span>
-      <span fxFlex="60%">{{ client.isStaff ? 'Yes' : 'No' }}</span>
+      <span fxFlex="60%">{{ client.isStaff | yesNo }}</span>
     </div>
 
   </ng-container>

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

@@ -22,7 +22,7 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">Primary Grouping by Amount:</span>
-    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount ? 'Yes' : 'No' }}</span>
+    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount | yesNo }}</span>
   </div>
 
   <table class="mat-elevation-z1" mat-table [dataSource]="interestRateChartData" #chartsTable multiTemplateDataRows>

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

@@ -98,7 +98,7 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">Transfer Interest to Savings Account?</span>
-    <span fxFlex="60%">{{ fixedDepositAccountData.transferInterestToSavings ? 'Yes' : 'No' }}</span>
+    <span fxFlex="60%">{{ fixedDepositAccountData.transferInterestToSavings | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="fixedDepositAccountData.transferInterestToSavings">
@@ -108,7 +108,7 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">Apply Penal Interest (less):</span>
-    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate.preClosurePenalApplicable ? 'Yes' : 'No' }}</span>
+    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate.preClosurePenalApplicable | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate.preClosurePenalApplicable">
@@ -118,7 +118,7 @@
 
   <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate.withHoldTax">
     <span fxFlex="40%">Withhold Tax is Applicable:</span>
-    <span fxFlex="60%">{{ fixedDepositAccountData.withHoldTax ? 'Yes' : 'No' }}</span>
+    <span fxFlex="60%">{{ fixedDepositAccountData.withHoldTax | yesNo }}</span>
   </div>
 
   <h3 class="mat-h3" fxFlexFill>Interest Rate Chart</h3>
@@ -149,7 +149,7 @@
 
     <div fxFlexFill>
       <span fxFlex="40%">Primary Grouping by Amount:</span>
-      <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount ? 'Yes' : 'No' }}</span>
+      <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount | yesNo }}</span>
     </div>
 
     <table class="mat-elevation-z1 irc-table" mat-table [dataSource]="interestRateChartData" multiTemplateDataRows>

src/app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposit-account-view.component.html

@@ -6,49 +6,60 @@
 
       <div class="profile-image-container">
         <div>
-          <img mat-card-md-image class="profile-image"
+          <img mat-card-md-image class="profile-image" matTooltip="Fixed Deposits Account"
-            matTooltip="Fixed Deposits Account"
             [src]="'assets/images/fd_account_placeholder.png'">
         </div>
       </div>
 
       <div class="mat-typography account-card-title">
         <mat-card-title>
-          <h3>
+          <h3 fxFlex="95%">
-            <i class="fa fa-stop" [ngClass]="fixedDepositsAccountData.status.code | statusLookup" [matTooltip]="fixedDepositsAccountData.status.value"></i>
+            <i class="fa fa-stop" [ngClass]="fixedDepositsAccountData.status.code | statusLookup"
-              Account Name : {{fixedDepositsAccountData.depositProductName}}
+              [matTooltip]="fixedDepositsAccountData.status.value"></i>
+            Fixed Deposit Product : {{fixedDepositsAccountData.fixedDepositsAccountData}}<span class="m-l-10">
+              <mifosx-account-number accountNo="{{fixedDepositsAccountData.accountNo}}"></mifosx-account-number></span>
           </h3>
+          <div fxFlex="5%">
+            <button mat-icon-button [matMenuTriggerFor]="accountMenu" aria-label="Loan account actions"
+              yPosition="below">
+              <mat-icon matListIcon class="actions-menu">
+                <fa-icon icon="bars" size="sm"></fa-icon>
+              </mat-icon>
+            </button>
+          </div>
         </mat-card-title>
         <mat-card-subtitle>
           <p>
-            Account #: {{fixedDepositsAccountData.accountNo}} | Client Name: {{fixedDepositsAccountData.clientName}}<br/>
+            {{entityType}} Name: {{fixedDepositsAccountData.clientName || fixedDepositsAccountData.groupName}}
-            <span *ngIf="!fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval">
+            <span class="m-l-10" *ngIf="fixedDepositsAccountData.clientAccountNo">({{fixedDepositsAccountData.clientAccountNo}})</span><br />
-              Current Balance: {{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.summary.accountBalance}}<br/>
+            <span
-              Deposit Amount: {{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.depositAmount}}<br/>
+              *ngIf="!fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval">
+              Current Balance:
+              {{fixedDepositsAccountData.summary.accountBalance | currency:currencyCode:'symbol-narrow':'1.2-2'}}<br />
+              Deposit Amount:
+              {{fixedDepositsAccountData.depositAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}<br />
             </span>
           </p>
         </mat-card-subtitle>
       </div>
 
-    </mat-card-title-group>
+      <mat-menu #accountMenu="matMenu">
-
-    <mat-card-actions class="account-actions">
-
         <ng-container *ngFor="let button of buttonConfig.singleButtons">
-        <button mat-raised-button (click)="doAction(button.name)">
+          <button mat-menu-item (click)="doAction(button.name)">
-          <i class="{{button.icon}}"></i> {{button.name}}</button>
+            <i ngClass="{{button.icon}}"></i> {{button.name}}</button>
         </ng-container>
 
         <ng-container *ngIf="buttonConfig.options.length">
-        <button mat-raised-button [matMenuTriggerFor]="More">More</button>
+          <button mat-menu-item [matMenuTriggerFor]="More">More</button>
           <mat-menu #More="matMenu">
             <span *ngFor="let option of buttonConfig.options">
               <button mat-menu-item (click)="doAction(option.name)">{{option.name}}</button>
             </span>
           </mat-menu>
         </ng-container>
+      </mat-menu>
 
-    </mat-card-actions>
+    </mat-card-title-group>
 
   </mat-card-header>
 
@@ -64,7 +75,8 @@
             <tbody>
               <tr>
                 <td>Activated On</td>
-                <td>{{fixedDepositsAccountData.timeline.activatedOnDate ? (fixedDepositsAccountData.timeline.activatedOnDate  | dateFormat) : 'Not Activated'}}</td>
+                <td>{{fixedDepositsAccountData.timeline.activatedOnDate ?
+                  (fixedDepositsAccountData.timeline.activatedOnDate | dateFormat) : 'Not Activated'}}</td>
               </tr>
               <tr *ngIf="fixedDepositsAccountData.timeline.closedOnDate">
                 <td>Closed On</td>
@@ -72,15 +84,19 @@
               </tr>
               <tr>
                 <td>Field Officer</td>
-                <td>{{fixedDepositsAccountData.fieldOfficerName ? fixedDepositsAccountData.fieldOfficerName : 'Unassigned'}}</td>
+                <td>{{fixedDepositsAccountData.fieldOfficerName ? fixedDepositsAccountData.fieldOfficerName :
+                  'Unassigned'}}</td>
               </tr>
               <tr>
                 <td>Maturity Date</td>
-                <td>{{fixedDepositsAccountData.maturityDate ? (fixedDepositsAccountData.maturityDate  | dateFormat) : 'N/A'}}</td>
+                <td>{{fixedDepositsAccountData.maturityDate ? (fixedDepositsAccountData.maturityDate | dateFormat) :
+                  'N/A'}}</td>
               </tr>
               <tr>
                 <td>Deposit Period</td>
-                <td>{{fixedDepositsAccountData.depositPeriod}}&nbsp;{{fixedDepositsAccountData.depositPeriodFrequency.value}}</td>
+                <td>
+                  {{fixedDepositsAccountData.depositPeriod}}&nbsp;{{fixedDepositsAccountData.depositPeriodFrequency.value}}
+                </td>
               </tr>
               <tr *ngIf="fixedDepositsAccountData.withHoldTax">
                 <td>Tax Group</td>
@@ -116,8 +132,10 @@
               </tr>
               <tr *ngIf="fixedDepositsAccountData.preClosurePenalApplicable">
                 <td>Pre-cloure Penal</td>
-                <td>{{fixedDepositsAccountData.preClosurePenalInterest}} % on {{fixedDepositsAccountData.preClosurePenalInterestOnType.value}}</td>
+                <td>{{fixedDepositsAccountData.preClosurePenalInterest}} % on
+                  {{fixedDepositsAccountData.preClosurePenalInterestOnType.value}}</td>
               </tr>
+            </tbody>
           </table>
         </div>
 
@@ -125,30 +143,40 @@
 
       <div fxFlex="49%">
 
-        <div *ngIf="!fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval; else otherDetails">
+        <div
+          *ngIf="!fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval; else otherDetails">
           <h4 class="table-headers">Performance History</h4>
           <table>
             <tbody>
               <tr>
                 <td>Principal Amount</td>
-                <td>{{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.depositAmount}}</td>
+                <td class="r-amount">{{fixedDepositsAccountData.depositAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}
+                </td>
               </tr>
               <tr>
                 <td>Maturity Amount</td>
-                <td>{{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.maturityAmount}}</td>
+                <td class="r-amount">{{fixedDepositsAccountData.maturityAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}
+                </td>
               </tr>
               <tr *ngIf="fixedDepositsAccountData.summary.totalDeposits">
                 <td>Total Deposits</td>
-                <td>{{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.summary.totalDeposits}}</td>
+                <td class="r-amount">
+                  {{fixedDepositsAccountData.summary.totalDeposits | currency:currencyCode:'symbol-narrow':'1.2-2'}}
+                </td>
               </tr>
               <tr *ngIf="fixedDepositsAccountData.summary.totalWithdrawals">
                 <td>Total Withdrawals</td>
-                <td>{{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.summary.totalWithdrawals}}</td>
+                <td class="r-amount">
+                  {{fixedDepositsAccountData.summary.totalWithdrawals | currency:currencyCode:'symbol-narrow':'1.2-2'}}
+                </td>
               </tr>
               <tr *ngIf="fixedDepositsAccountData.summary.totalInterestEarned >= 0">
                 <td>Total Interest Earned</td>
-                <td>{{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.summary.totalInterestEarned}}</td>
+                <td class="r-amount">
+                  {{fixedDepositsAccountData.summary.totalInterestEarned | currency:currencyCode:'symbol-narrow':'1.2-2'}}
+                </td>
               </tr>
+            </tbody>
           </table>
         </div>
 
@@ -159,11 +187,15 @@
               <tbody>
                 <tr>
                   <td>Principal Amount</td>
-                  <td>{{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.depositAmount}}</td>
+                  <td>
+                    {{fixedDepositsAccountData.depositAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}
+                  </td>
                 </tr>
                 <tr>
                   <td>Maturity Amount</td>
-                  <td>{{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.maturityAmount}}</td>
+                  <td>
+                    {{fixedDepositsAccountData.maturityAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}
+                  </td>
                 </tr>
               </tbody>
             </table>
@@ -187,14 +219,15 @@
         [active]="charges.isActive">
         Charges
       </a>
-      <a mat-tab-link [routerLink]="['./standing-instructions']" routerLinkActive #standingInstructions="routerLinkActive"
+      <a mat-tab-link [routerLink]="['./standing-instructions']" routerLinkActive
-        [active]="standingInstructions.isActive" *ngIf="fixedDepositsAccountData.clientId">
+        #standingInstructions="routerLinkActive" [active]="standingInstructions.isActive"
+        *ngIf="fixedDepositsAccountData.clientId">
         Standing Instructions
       </a>
       <ng-container *ngFor="let savingsDatatable of savingsDatatables">
         <a mat-tab-link *mifosxHasPermission="'READ_' + savingsDatatable.registeredTableName"
-          [routerLink]="['./datatables',savingsDatatable.registeredTableName]"
+          [routerLink]="['./datatables',savingsDatatable.registeredTableName]" routerLinkActive
-          routerLinkActive #datatable="routerLinkActive" [active]="datatable.isActive">
+          #datatable="routerLinkActive" [active]="datatable.isActive">
           {{savingsDatatable.registeredTableName}}
         </a>
       </ng-container>

src/app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposit-account-view.component.ts

@@ -32,6 +32,9 @@ export class FixedDepositAccountViewComponent implements OnInit {
   savingsDatatables: any;
   /** Button Configurations */
   buttonConfig: FixedDepositsButtonsConfiguration;
+  /** Entity Type */
+  entityType: string;
+  currencyCode: string;
 
   /**
    * Fetches fixed deposits account data from `resolve`
@@ -49,7 +52,15 @@ export class FixedDepositAccountViewComponent implements OnInit {
     this.route.data.subscribe((data: { fixedDepositsAccountData: any, savingsDatatables: any  }) => {
       this.fixedDepositsAccountData = data.fixedDepositsAccountData;
       this.savingsDatatables = data.savingsDatatables;
+      this.currencyCode = this.fixedDepositsAccountData.currency.code;
     });
+    if (this.router.url.includes('clients')) {
+      this.entityType = 'Client';
+    } else if (this.router.url.includes('groups')) {
+      this.entityType = 'Group';
+    } else if (this.router.url.includes('centers')) {
+      this.entityType = 'Center';
+    }
   }
 
   ngOnInit() {
@@ -97,6 +108,7 @@ export class FixedDepositAccountViewComponent implements OnInit {
       case 'Activate':
       case 'Close':
       case 'Undo Approval':
+      case 'Undo Activation':
       case 'Add Charge':
       case 'Withdraw By Client':
       case 'Premature Close':

src/app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposits-buttons.config.ts

@@ -34,6 +34,10 @@ export class FixedDepositsButtonsConfiguration {
           {
             name: 'Calculate Interest',
             icon: 'fa fa-table'
+          },
+          {
+            name: 'Undo Activation',
+            icon: 'fa fa-undo'
           }
         ];
         break;

src/app/deposits/fixed-deposits/fixed-deposit-account-view/transactions-tab/transactions-tab.component.html

@@ -1,4 +1,4 @@
-<div class="tab-container mat-typography">
+<div class="tab-container mat-typography" *ngIf="showTransactionsData">
 
   <div fxLayoutAlign="start">
     <div class="m-b-20">
@@ -12,32 +12,43 @@
 
       <ng-container matColumnDef="id">
         <th mat-header-cell *matHeaderCellDef> ID </th>
-        <td mat-cell *matCellDef="let transaction"> {{ transaction.id }} </td>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="transactionColor(transaction)"> {{ transaction.id }} </td>
       </ng-container>
 
       <ng-container matColumnDef="transactionDate">
         <th mat-header-cell *matHeaderCellDef> Transaction Date </th>
-        <td mat-cell *matCellDef="let transaction"> {{ transaction.date  | dateFormat }} </td>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="transactionColor(transaction)"> {{ transaction.date | dateFormat }} </td>
       </ng-container>
 
       <ng-container matColumnDef="transactionType">
         <th mat-header-cell *matHeaderCellDef> Transaction Type </th>
-        <td mat-cell *matCellDef="let transaction"> {{ transaction.transactionType.value  }} </td>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="transactionColor(transaction)"> {{ transaction.transactionType.value }} </td>
       </ng-container>
 
       <ng-container matColumnDef="debit">
         <th mat-header-cell *matHeaderCellDef> Debit </th>
-        <td mat-cell *matCellDef="let transaction"> {{ isDebit(transaction.transactionType) ? transaction.amount : 'N/A'}} </td>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="transactionColor(transaction)"> {{ isDebit(transaction.transactionType) ? transaction.amount : 'N/A'}} </td>
       </ng-container>
 
       <ng-container matColumnDef="credit">
         <th mat-header-cell *matHeaderCellDef> Credit </th>
-        <td mat-cell *matCellDef="let transaction"> {{ !isDebit(transaction.transactionType) ? transaction.amount : 'N/A' }} </td>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="transactionColor(transaction)"> {{ !isDebit(transaction.transactionType) ? transaction.amount : 'N/A' }} </td>
       </ng-container>
 
       <ng-container matColumnDef="balance">
         <th mat-header-cell *matHeaderCellDef> Balance </th>
-        <td mat-cell *matCellDef="let transaction"> {{ transaction.runningBalance }} </td>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="transactionColor(transaction)"> {{ transaction.runningBalance | number }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="actions">
+        <th mat-header-cell *matHeaderCellDef> Actions </th>
+        <td mat-cell *matCellDef="let transaction">
+          <button class="account-action-button" mat-raised-button color="primary" matTooltip="View Journal Entries"
+          matTooltipPosition="left" (click)="routeEdit($event)"
+          [routerLink]="['/','journal-entry', 'view', 'S'+transaction.id ]">
+          <i class="fa fa-arrow-circle-right"></i>
+        </button>
+        </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

src/app/deposits/fixed-deposits/fixed-deposit-account-view/transactions-tab/transactions-tab.component.scss

@@ -1,3 +1,5 @@
+@import "assets/styles/helper";
+
 .tab-container {
   padding: 1%;
   margin: 1%;
@@ -6,8 +8,40 @@
   }
   table {
     width: 100%;
+    color: $black;
+    .account-action-button{
+      min-width: 26px;
+      padding: 0 0 3px 0;
+      margin: 0 2%;
+      line-height: 25px;
+    }
     .select-row:hover {
       cursor: pointer;
     }
+    .strike {
+      text-decoration: line-through;
+      color: $status-active-overdue;
+    }
+    .linked {
+      color: $status-approved;
+    }
+    .accrual {
+      color: $msg-default;
     }
   }
+}
+
+.active {
+  background-color: $status-active;
+  height: 4px;
+}
+
+.linked {
+  background-color: $status-approved;
+  height: 4px;
+}
+
+.undo {
+  background-color: $status-active-overdue;
+  height: 4px;
+}

src/app/deposits/fixed-deposits/fixed-deposit-account-view/transactions-tab/transactions-tab.component.ts

@@ -14,11 +14,12 @@ import { ActivatedRoute, Router } from '@angular/router';
 export class TransactionsTabComponent implements OnInit {
 
   /** Fixed Deposits Account Status */
-  status: any;
+  status: string;
+  showTransactionsData = false;
   /** Transactions Data */
   transactionsData: any;
   /** Columns to be displayed in transactions table. */
-  displayedColumns: string[] = ['id', 'transactionDate', 'transactionType', 'debit', 'credit', 'balance'];
+  displayedColumns: string[] = ['id', 'transactionDate', 'transactionType', 'debit', 'credit', 'balance', 'actions'];
   /** Data source for transactions table. */
   dataSource: MatTableDataSource<any>;
 
@@ -32,6 +33,7 @@ export class TransactionsTabComponent implements OnInit {
     this.route.parent.data.subscribe((data: { fixedDepositsAccountData: any }) => {
       this.transactionsData = data.fixedDepositsAccountData.transactions;
       this.status = data.fixedDepositsAccountData.status.value;
+      this.showTransactionsData = (this.status === 'Active');
     });
   }
 
@@ -60,4 +62,26 @@ export class TransactionsTabComponent implements OnInit {
     }
   }
 
+  transactionColor(transaction: any): string {
+    if (transaction.reversed) {
+      return 'strike';
+    }
+    if (this.isAccrual(transaction.transactionType)) {
+      return 'accrual';
+    }
+    return '';
+  }
+
+  private isAccrual(transactionType: any): boolean  {
+    return (transactionType.accrual);
+  }
+
+  /**
+   * Stops the propagation to view pages.
+   * @param $event Mouse Event
+   */
+  routeEdit($event: MouseEvent) {
+    $event.stopPropagation();
+  }
+
 }

src/app/deposits/fixed-deposits/fixed-deposit-account-view/view-transaction/view-transaction.component.html

@@ -5,6 +5,8 @@
     <mat-card-content>
 
       <div fxLayout="row wrap" class="content">
+        <div fxFlex="100%" [ngClass]="transactionColor()">
+        </div>
 
         <div fxFlex="50%" class="mat-body-strong">
           Transaction Id
@@ -43,7 +45,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ transactionData.amount }}
+          {{ transactionData.amount | currency:transactionData.currency.code:'symbol-narrow':'1.2-2' }}
         </div>
 
         <div fxFlex="50%" *ngIf="transactionData.note" class="mat-body-strong">
@@ -108,6 +110,9 @@
 
       </div>
 
+      <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">
+        <button type="button" mat-raised-button color="primary" [routerLink]="['../']">{{ 'Back' | translate }}</button>
+      </div>
     </mat-card-content>
 
   </mat-card>

src/app/deposits/fixed-deposits/fixed-deposit-account-view/view-transaction/view-transaction.component.scss

@@ -1,3 +1,5 @@
+@import "assets/styles/helper";
+
 .container {
   max-width: 37rem;
 
@@ -8,3 +10,26 @@
     }
   }
 }
+
+.transaction-buttons {
+  margin-top: 3%;
+}
+
+.transaction-relation {
+  background-color: $mid-grey;
+}
+
+.active {
+  background-color: $status-active;
+  height: 4px;
+}
+
+.linked {
+  background-color: $status-approved;
+  height: 4px;
+}
+
+.undo {
+  background-color: $status-active-overdue;
+  height: 4px;
+}

src/app/deposits/fixed-deposits/fixed-deposit-account-view/view-transaction/view-transaction.component.ts

@@ -28,4 +28,11 @@ export class ViewTransactionComponent {
     });
   }
 
+  transactionColor(): string {
+    if (this.transactionData.manuallyReversed) {
+      return 'undo';
+    }
+    return 'active';
+  }
+
 }

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

@@ -1,7 +1,7 @@
 <mifosx-approve-fixed-deposits-account *ngIf="actions['Approve']"></mifosx-approve-fixed-deposits-account>
 <mifosx-reject-fixed-deposits-account *ngIf="actions['Reject']"></mifosx-reject-fixed-deposits-account>
 <mifosx-activate-fixed-deposits-account *ngIf="actions['Activate']"></mifosx-activate-fixed-deposits-account>
-<mifosx-undo-approval-fixed-deposits-account *ngIf="actions['Undo Approval']"></mifosx-undo-approval-fixed-deposits-account>
+<mifosx-undo-approval-fixed-deposits-account *ngIf="actions['Undo Approval'] || actions['Undo Activation']"></mifosx-undo-approval-fixed-deposits-account>
 <mifosx-withdraw-by-client-fixed-deposits-account *ngIf="actions['Withdraw By Client']"></mifosx-withdraw-by-client-fixed-deposits-account>
 <mifosx-add-charge-fixed-deposits-account *ngIf="actions['Add Charge']"></mifosx-add-charge-fixed-deposits-account>
 <mifosx-premature-close-fixed-deposits-account *ngIf="actions['Premature Close']"></mifosx-premature-close-fixed-deposits-account>

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

@@ -19,6 +19,7 @@ export class FixedDepositsAccountActionsComponent {
     'Activate': boolean
     'Close': boolean
     'Undo Approval': boolean
+    'Undo Activation': boolean
     'Add Charge': boolean
     'Premature Close': boolean
     'Withdraw By Client': boolean
@@ -28,6 +29,7 @@ export class FixedDepositsAccountActionsComponent {
     'Activate': false,
     'Close': false,
     'Undo Approval': false,
+    'Undo Activation': false,
     'Add Charge': false,
     'Premature Close': false,
     'Withdraw By Client': false

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

@@ -5,6 +5,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
 import { SavingsService } from 'app/savings/savings.service';
+import { FixedDepositsService } from '../../fixed-deposits.service';
 
 /**
  * Undo Approval Fixed Deposits Account Component
@@ -20,6 +21,9 @@ export class UndoApprovalFixedDepositsAccountComponent implements OnInit {
   undoApprovalFixedDepositsAccountForm: UntypedFormGroup;
   /** Fixed Deposits Account Id */
   accountId: any;
+  /** Action to be Undo */
+  undoAction: string;
+  undoCommand: string;
 
   /**
    * Fixed deposits endpoint is not supported so using Savings endpoint.
@@ -30,8 +34,14 @@ export class UndoApprovalFixedDepositsAccountComponent implements OnInit {
    */
   constructor(private formBuilder: UntypedFormBuilder,
               private savingsService: SavingsService,
+              private fixedDepositsService: FixedDepositsService,
               private route: ActivatedRoute,
               private router: Router) {
+    this.undoCommand = 'undoapproval'; // Default command
+    this.undoAction = this.route.snapshot.params['name'];
+    if (this.undoAction === 'Undo Activation') {
+      this.undoCommand = 'undoactivate';
+    }
     this.accountId = this.route.parent.snapshot.params['fixedDepositAccountId'];
   }
 
@@ -59,9 +69,15 @@ export class UndoApprovalFixedDepositsAccountComponent implements OnInit {
     const data = {
       ...this.undoApprovalFixedDepositsAccountForm.value,
     };
-    this.savingsService.executeSavingsAccountCommand(this.accountId, 'undoapproval', data).subscribe(() => {
+    if (this.undoAction === 'Undo Activation') {
+      this.fixedDepositsService.executeFixedDepositsAccountCommand(this.accountId, this.undoCommand, data).subscribe(() => {
+        this.router.navigate(['../../'], { relativeTo: this.route });
+      });
+    } else {
+      this.savingsService.executeSavingsAccountCommand(this.accountId, this.undoCommand, data).subscribe(() => {
         this.router.navigate(['../../'], { relativeTo: this.route });
       });
     }
+  }
 
 }

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

@@ -54,6 +54,11 @@ const routes: Routes = [
               savingsDatatables: SavingsDatatablesResolver
             },
             children: [
+              {
+                path: '',
+                redirectTo: 'transactions',
+                pathMatch: 'full'
+              },
               {
                 path: 'interest-rate-chart',
                 component: InterestRateChartTabComponent,

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

@@ -23,7 +23,7 @@
   <div fxFlexFill>
     <span fxFlex="40%">Primary Grouping by Amount:</span>
     <span
-      fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount ? 'Yes' : 'No' }}</span>
+      fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount | yesNo }}</span>
   </div>
 
   <table class="mat-elevation-z1" mat-table [dataSource]="interestRateChartData" #chartsTable multiTemplateDataRows>

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

@@ -90,7 +90,7 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">Deposit Frequency Same as Group/Center meeting:</span>
-    <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate.isCalendarInherited === true ? 'Yes' : 'No'  }}</span>
+    <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate.isCalendarInherited === true | yesNo  }}</span>
   </div>
 
   <ng-container *ngIf="!recurringDepositsAccountProductTemplate.isCalendarInherited">
@@ -155,7 +155,7 @@
     <div fxFlexFill>
       <span fxFlex="40%">Primary Grouping by Amount:</span>
       <span
-        fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount ? 'Yes' : 'No' }}</span>
+        fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount | yesNo }}</span>
     </div>
 
     <table class="mat-elevation-z1 irc-table" mat-table [dataSource]="interestRateChartData" multiTemplateDataRows>

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

@@ -1,4 +1,4 @@
-<mat-card class="recurringDeposits-account-card">
+<mat-card class="recurring-deposits-account-card">
 
   <mat-card-header fxLayout="column" class="header">
 
@@ -13,11 +13,19 @@
 
       <div class="mat-typography account-card-title">
         <mat-card-title>
-          <h3>
+          <h3 fxFlex="95%">
             <i class="fa fa-stop" [ngClass]="recurringDepositsAccountData.status.code | statusLookup"
               [matTooltip]="recurringDepositsAccountData.status.value"></i>
             Account Name : {{recurringDepositsAccountData.depositProductName}}
           </h3>
+          <div fxFlex="5%">
+            <button mat-icon-button [matMenuTriggerFor]="accountMenu" aria-label="Loan account actions"
+              yPosition="below">
+              <mat-icon matListIcon class="actions-menu">
+                <fa-icon icon="bars" size="sm"></fa-icon>
+              </mat-icon>
+            </button>
+          </div>
         </mat-card-title>
         <mat-card-subtitle>
           <p>
@@ -26,21 +34,18 @@
             <span
               *ngIf="!recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval">
               Current Balance:
-              {{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.summary.accountBalance}}<br />
+              {{recurringDepositsAccountData.summary.accountBalance | currency:currencyCode:'symbol-narrow':'1.2-2'}}<br />
               Available Balance:
-              {{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.summary.availableBalance}}<br />
+              {{recurringDepositsAccountData.summary.availableBalance | currency:currencyCode:'symbol-narrow':'1.2-2'}}<br />
             </span>
           </p>
         </mat-card-subtitle>
       </div>
 
-    </mat-card-title-group>
+      <mat-menu #accountMenu="matMenu">
-
-    <mat-card-actions class="account-actions">
-
         <ng-container *ngFor="let button of buttonConfig.singleButtons">
           <button mat-raised-button (click)="doAction(button.name)">
-          <i class="{{button.icon}}"></i> {{button.name}}</button>
+            <i ngClass="{{button.icon}}"></i> {{button.name}}</button>
         </ng-container>
 
         <ng-container *ngIf="buttonConfig.options.length">
@@ -52,13 +57,15 @@
           </mat-menu>
         </ng-container>
 
-    </mat-card-actions>
+      </mat-menu>
+
+    </mat-card-title-group>
 
   </mat-card-header>
 
   <mat-card-content class="content">
 
-    <div class="recurringDeposits-account-tables" fxLayout="row" fxLayoutGap="2%">
+    <div class="recurring-deposits-account-tables" fxLayout="row" fxLayoutGap="2%">
 
       <div fxFlex="49%"
         *ngIf="!recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval">
@@ -98,7 +105,7 @@
             </tr>
             <tr *ngIf="recurringDepositsAccountData.minBalanceForInterestCalculation">
               <td> Balance Required For Interest Calculation</td>
-              <td><span>{{recurringDepositsAccountData.minBalanceForInterestCalculation}}</span></td>
+              <td><span>{{recurringDepositsAccountData.minBalanceForInterestCalculation | number }}</span></td>
             </tr>
             <tr *ngIf="recurringDepositsAccountData.witdHoldTax">
               <td> Witdhold Tax Group </td>
@@ -116,41 +123,41 @@
             <tr>
               <td>Principal Amount</td>
               <td>
-                <span>{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.depositAmount}}</span>
+                <span>{{recurringDepositsAccountData.depositAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}}</span>
               </td>
             </tr>
             <tr>
               <td>Maturity Amount</td>
               <td>
-                <span>{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.maturityAmount | formatNumber}}</span>
+                <span>{{recurringDepositsAccountData.maturityAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}}</span>
               </td>
             </tr>
             <tr>
               <td>Recurring Deposit Amount</td>
               <td>
-                <span>{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData?.mandatoryRecommendedDepositAmount | formatNumber}}</span>
+                <span>{{recurringDepositsAccountData?.mandatoryRecommendedDepositAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
               </td>
             </tr>
             <tr>
               <td>Deposits till Date</td>
               <td><span
-                  *ngIf="recurringDepositsAccountData.summary.totalDeposits">{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.summary.totalDeposits | formatNumber}}</span>
+                  *ngIf="recurringDepositsAccountData.summary.totalDeposits">{{recurringDepositsAccountData.summary.totalDeposits | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
                 <span
-                  *ngIf="!recurringDepositsAccountData.summary.totalDeposits">{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;0</span>
+                  *ngIf="!recurringDepositsAccountData.summary.totalDeposits">{{ 0 | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
               </td>
             </tr>
             <tr>
               <td>Withdrwals till Date</td>
               <td><span
-                  *ngIf="recurringDepositsAccountData.summary.totalWithdrawals">{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.summary.totalWithdrawals | formatNumber}}</span>
+                  *ngIf="recurringDepositsAccountData.summary.totalWithdrawals">{{recurringDepositsAccountData.summary.totalWithdrawals | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
                 <span
-                  *ngIf="!recurringDepositsAccountData.summary.totalWithdrawals">{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;0</span>
+                  *ngIf="!recurringDepositsAccountData.summary.totalWithdrawals">{{ 0 | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
               </td>
             </tr>
 
             <tr *ngIf="recurringDepositsAccountData.summary.totalInterestEarned >= 0">
               <td >Interest Earned</td>
-              <td><span>{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.summary.totalInterestEarned| formatNumber}}</span>
+              <td><span>{{recurringDepositsAccountData.summary.totalInterestEarned | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
               </td>
             </tr>
 
@@ -186,33 +193,34 @@
             <tr>
               <td>Total Deposits </td>
               <td>
-                <span *ngIf="recurringDepositsAccountData.summary.totalDeposits">{{ recurringDepositsAccountData.currency.displaySymbol }}&nbsp;{{ recurringDepositsAccountData.summary.totalDeposits }}</span>
+                <span *ngIf="recurringDepositsAccountData.summary.totalDeposits">{{ recurringDepositsAccountData.summary.totalDeposits | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
-                <span *ngIf="!recurringDepositsAccountData.summary.totalDeposits">{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;0</span>
+                <span *ngIf="!recurringDepositsAccountData.summary.totalDeposits">{{ 0 | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
               </td>
             </tr>
             <tr >
               <td> Actual Available Balance</td>
-              <td>{{ recurringDepositsAccountData.currency.displaySymbol }}&nbsp;{{ recurringDepositsAccountData.summary.accountBalance }}
+              <td>{{ recurringDepositsAccountData.summary.accountBalance | currency:currencyCode:'symbol-narrow':'1.2-2'}}</td>
             </tr>
             <tr>
               <td> Recurring Deposits Amount</td>
               <td>
-                {{ recurringDepositsAccountData.currency.displaySymbol }}&nbsp;{{ recurringDepositsAccountData.mandatoryRecommendedDepositAmount }}
+                {{ recurringDepositsAccountData.mandatoryRecommendedDepositAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}
+              </td>
             </tr>
             <tr *ngIf="recurringDepositsAccountData.summary.totalInterestEarned">
               <td> Interests Earned </td>
-              <td><span>{{ recurringDepositsAccountData.currency.displaySymbol }}&nbsp;{{ recurringDepositsAccountData.summary.totalInterestEarned }}</span></td>
+              <td><span>{{ recurringDepositsAccountData.summary.totalInterestEarned | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span></td>
             </tr>
             <tr *ngIf="recurringDepositsAccountData.summary.totalWithdrawals">
               <td> Total Withdrawls </td>
               <td>
-                <span>{{ recurringDepositsAccountData.currency.displaySymbol }}&nbsp;{{ recurringDepositsAccountData.summary.totalWithdrawals }}</span>
+                <span>{{ recurringDepositsAccountData.summary.totalWithdrawals | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
               </td>
             </tr>
             <tr *ngIf="recurringDepositsAccountData.minBalanceForInterestCalculation">
               <td> Balance Required For Interest Calculation </td>
               <td>
-                <span>{{ recurringDepositsAccountData.minBalanceForInterestCalculation }}</span>
+                <span>{{ recurringDepositsAccountData.minBalanceForInterestCalculation | number  }}</span>
               </td>
             </tr>
           </tbody>
@@ -226,9 +234,9 @@
             <tr>
               <td>Principal Amount</td>
               <td><span
-                  *ngIf="recurringDepositsAccountData.depositAmount">{{ recurringDepositsAccountData.currency.displaySymbol }}&nbsp;{{ recurringDepositsAccountData.depositAmount }}</span>
+                  *ngIf="recurringDepositsAccountData.depositAmount">{{ recurringDepositsAccountData.depositAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
                 <span
-                  *ngIf="!recurringDepositsAccountData.depositAmount">{{ recurringDepositsAccountData.currency.displaySymbol }}&nbsp;0</span>
+                  *ngIf="!recurringDepositsAccountData.depositAmount">{{ 0 | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
               </td>
             </tr>
             <tr>
@@ -240,35 +248,37 @@
             <tr *ngIf="recurringDepositsAccountData.maturityDate">
               <td>Maturity Amount</td>
               <td>
-                <span>{{ recurringDepositsAccountData.currency.displaySymbol }}&nbsp;{{ recurringDepositsAccountData.maturityAmount }}</span>
+                <span>{{ recurringDepositsAccountData.maturityAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
               </td>
             </tr>
             <tr>
               <td>Total Withdrawls </td>
               <td>
                 <span
-                  *ngIf="recurringDepositsAccountData.summary.totalWithdrawals">{{ recurringDepositsAccountData.currency.displaySymbol }}&nbsp;{{ recurringDepositsAccountData.summary.totalWithdrawals }}</span>
+                  *ngIf="recurringDepositsAccountData.summary.totalWithdrawals">{{ recurringDepositsAccountData.summary.totalWithdrawals | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
                 <span
-                  *ngIf="!recurringDepositsAccountData.summary.totalWithdrawals">{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;0</span>
+                  *ngIf="!recurringDepositsAccountData.summary.totalWithdrawals">{{ 0 | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
               </td>
             </tr>
             <tr *ngIf="recurringDepositsAccountData.timeline.closedOnDate">
               <td> Closed on Date </td>
               <td>
                 {{ recurringDepositsAccountData.timeline.closedOnDate  | dateFormat }}
+              </td>
             </tr>
             <tr>
               <td> Deposits Frequency </td>
               <td>
                 {{ recurringDepositsAccountData.recurringFrequency }}&nbsp;{{ recurringDepositsAccountData.recurringFrequencyType.value }}
+              </td>
             </tr>
             <tr *ngIf="recurringDepositsAccountData.summary.totalInterestEarned">
               <td> Interests Posted </td>
               <td>
                 <span
-                  *ngIf="recurringDepositsAccountData.summary.totalInterestPosted">{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;{{recurringDepositsAccountData.summary.totalInterestPosted}}</span>
+                  *ngIf="recurringDepositsAccountData.summary.totalInterestPosted">{{recurringDepositsAccountData.summary.totalInterestPosted | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
                 <span
-                  *ngIf="!recurringDepositsAccountData.summary.totalInterestPosted">{{recurringDepositsAccountData.currency.displaySymbol}}&nbsp;0</span>
+                  *ngIf="!recurringDepositsAccountData.summary.totalInterestPosted">{{ 0 | currency:currencyCode:'symbol-narrow':'1.2-2'}}</span>
               </td>
             </tr>
           </tbody>
@@ -276,7 +286,7 @@
       </div>
     </div>
 
-    <div class="recurringDeposits-account-tables" fxLayout="row" fxLayoutGap="2%">
+    <div class="recurring-deposits-account-tables" fxLayout="row" fxLayoutGap="2%">
       <div fxFlex="49%"
         *ngIf="!recurringDepositsAccountData.status.rejected && !recurringDepositsAccountData.status.submittedAndPendingApproval">
         <h4 class="table-headers">Interest Details</h4>

src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component.scss

@@ -1,4 +1,4 @@
-.recurringDeposits-account-card {
+.recurring-deposits-account-card {
   margin: 0 auto;
   max-width: 80rem;
   width: 90%;

src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component.ts

@@ -35,6 +35,7 @@ export class RecurringDepositsAccountViewComponent implements OnInit {
   savingsDatatables: any;
   /** Is Prematured Allowed */
   isprematureAllowed: any;
+  currencyCode: string;
   /**
    * Fetches recurringDeposits account data from `resolve`
    * @param {ActivatedRoute} route Activated Route
@@ -50,6 +51,7 @@ export class RecurringDepositsAccountViewComponent implements OnInit {
       this.recurringDepositsAccountData = data.recurringDepositsAccountData;
       this.charges = this.recurringDepositsAccountData.charges;
       this.savingsDatatables = data.savingsDatatables;
+      this.currencyCode = this.recurringDepositsAccountData.currency.code;
       this.isprematureAllowed = data.recurringDepositsAccountData.maturityDate != null;
     });
   }

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

@@ -157,7 +157,7 @@
 
     <div fxFlexFill>
       <span fxFlex="40%">{{"labels.inputs.Recalculate Interest" | translate }}: </span>
-      <span fxFlex="60%">{{ loansAccountProductTemplate?.isInterestRecalculationEnabled? 'Yes' : 'No' }}</span>
+      <span fxFlex="60%">{{ loansAccountProductTemplate?.isInterestRecalculationEnabled| yesNo }}</span>
     </div>
 
     <div fxFlexFill *ngIf="loansAccountProductTemplate?.daysInMonthType">

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

@@ -158,7 +158,7 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">{{"labels.inputs.Recalculate Interest" | translate }}: </span>
-    <span fxFlex="60%">{{ loansAccountProductTemplate?.isInterestRecalculationEnabled? 'Yes' : 'No' }}</span>
+    <span fxFlex="60%">{{ loansAccountProductTemplate?.isInterestRecalculationEnabled| yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccountProductTemplate?.daysInMonthType">

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

@@ -237,7 +237,7 @@
 
     <div fxFlexFill>
       <span fxFlex="40%">{{"labels.inputs.Recalculate Interest" | translate }}</span>
-      <span fxFlex="60%">{{ loansAccountTermsData?.isInterestRecalculationEnabled? 'Yes' : 'No' }}</span>
+      <span fxFlex="60%">{{ loansAccountTermsData?.isInterestRecalculationEnabled| yesNo }}</span>
     </div>
 
     <div fxFlexFill *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">

src/app/navigation/staff-navigation/staff-navigation.component.html

@@ -35,7 +35,7 @@
     </div>
 
     <div fxFlex="50%">
-      {{ employeeData.isLoanOfficer ? 'Yes' : 'No' }}
+      {{ employeeData.isLoanOfficer | yesNo }}
     </div>
 
     <div fxFlex="50%" class="mat-body-strong" *ngIf="employeeData.mobileNo">

src/app/organization/employees/view-employee/view-employee.component.html

@@ -42,7 +42,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ employeeData.isLoanOfficer === true ? 'Yes' : 'No' }}
+          {{ employeeData.isLoanOfficer === true | yesNo }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="employeeData.mobileNo">

src/app/organization/tellers/cashiers/cashiers.component.html

@@ -32,7 +32,7 @@
 
       <ng-container matColumnDef="isFullDay">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Full Day/Time </th>
-        <td mat-cell *matCellDef="let cashier"> {{ cashier.isFullDay ? 'Yes' : 'No' }} </td>
+        <td mat-cell *matCellDef="let cashier"> {{ cashier.isFullDay | yesNo }} </td>
       </ng-container>
 
       <ng-container matColumnDef="vaultActions">

src/app/products/charges/view-charge/view-charge.component.html

@@ -86,7 +86,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ chargeData.active === true ? 'Yes' : 'No' }}
+          {{ chargeData.active === true | yesNo }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="chargeData.chargeTimeType.id == 9 && chargeData.feeFrequency">

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

@@ -108,7 +108,6 @@ export class EditFixedDepositProductComponent implements OnInit {
   }
 
   submit() {
-    // TODO: Update once language and date settings are setup
     const fixedDepositProduct = {
       ...this.fixedDepositProduct,
       charges: this.fixedDepositProduct.charges.map((charge: any) => ({ id: charge.id })),
@@ -117,6 +116,18 @@ export class EditFixedDepositProductComponent implements OnInit {
     if (!fixedDepositProduct.description) {
       fixedDepositProduct.description = '';
     }
+    const charts: any[] = [];
+    fixedDepositProduct.charts.forEach((chart: any) => {
+      if (chart['amountRangeFrom'] === '') {
+        delete chart['amountRangeFrom'];
+      }
+      if (chart['amountRangeTo'] === '') {
+        delete chart['amountRangeTo'];
+      }
+      charts.push(chart);
+    });
+    fixedDepositProduct.charts = charts;
+
     delete fixedDepositProduct.advancedAccountingRules;
     this.productsService.updateFixedDepositProduct(this.fixedDepositProductsTemplate.id, fixedDepositProduct)
       .subscribe((response: any) => {

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

@@ -24,7 +24,7 @@
 
     <mat-form-field fxFlex="48%">
       <mat-label>Currency in multiples of</mat-label>
-      <input type="number" matInput formControlName="inMultiplesOf" required>
+      <input type="number" matInput formControlName="inMultiplesOf">
       <mat-error>
         Currency in multiples of is <strong>required</strong>
       </mat-error>

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

@@ -39,7 +39,7 @@ export class FixedDepositProductCurrencyStepComponent implements OnInit {
     this.fixedDepositProductCurrencyForm = this.formBuilder.group({
       'currencyCode': ['', Validators.required],
       'digitsAfterDecimal': ['', Validators.required],
-      'inMultiplesOf': ['', Validators.required]
+      'inMultiplesOf': ['']
     });
   }
 

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,7 +2,9 @@
 
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
-    <h4 fxFlex="13%" class="mat-h3">Interest Rate Chart<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>
+    <h4 fxFlex="13%" class="mat-h3">Interest Rate Chart<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">
       <button type="button" mat-raised-button color="primary" (click)="addChart()">
@@ -11,14 +13,16 @@
       </button>
     </div>
 
-    <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column" formArrayName="charts" *ngFor="let chart of charts.controls; let chartIndex = index">
+    <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column" formArrayName="charts"
+      *ngFor="let chart of charts.controls; let chartIndex = index">
 
       <mat-divider fxFlex="98%"></mat-divider>
 
       <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="chartIndex">
 
         <div fxFlex="98%" fxLayout="row" fxLayoutAlign="end center">
-          <button type="button" mat-icon-button color="warn" (click)="delete(charts, chartIndex)" matTooltip="Delete Interest Rate Chart" matTooltipPosition="left">
+          <button type="button" mat-icon-button color="warn" (click)="delete(charts, chartIndex)"
+            matTooltip="Delete Interest Rate Chart" matTooltipPosition="left">
             <fa-icon icon="trash"></fa-icon>
           </button>
         </div>
@@ -30,7 +34,8 @@
 
         <mat-form-field fxFlex="31%" (click)="validFromDatePicker.open()">
           <mat-label>Valid from Date</mat-label>
-          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="validFromDatePicker" formControlName="fromDate" required>
+          <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>
@@ -64,12 +69,14 @@
           <h3 class="mat-h3">It's required to add at least one Slab</h3>
         </div>
 
-        <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="chart.value.chartSlabs" *ngIf="chart.value.chartSlabs.length !== 0" multiTemplateDataRows>
+        <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="chart.value.chartSlabs"
+          *ngIf="chart.value.chartSlabs.length !== 0" multiTemplateDataRows>
 
           <ng-container matColumnDef="period">
             <th mat-header-cell *matHeaderCellDef> Period </th>
             <td mat-cell *matCellDef="let chartSlab">
-              {{ chartSlab.fromPeriod + ' - ' + chartSlab.toPeriod + ' ' + (chartSlab.periodType | find:periodTypeData:'id':'value') }}
+              {{ chartSlab.fromPeriod + ' - ' + chartSlab.toPeriod + ' ' + (chartSlab.periodType |
+              find:periodTypeData:'id':'value') }}
             </td>
           </ng-container>
 
@@ -83,7 +90,7 @@
           <ng-container matColumnDef="annualInterestRate">
             <th mat-header-cell *matHeaderCellDef> Interest </th>
             <td mat-cell *matCellDef="let chartSlab">
-              {{ chartSlab.annualInterestRate }}
+              {{ chartSlab.annualInterestRate }} %
             </td>
           </ng-container>
 
@@ -97,13 +104,15 @@
           <ng-container matColumnDef="actions">
             <th mat-header-cell *matHeaderCellDef> Actions </th>
             <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
-              <button mat-icon-button color="primary" (click)="editChartSlab(chart.controls.chartSlabs, chartSlabIndex)">
+              <button mat-icon-button color="primary"
+                (click)="editChartSlab(chart.controls.chartSlabs, chartSlabIndex)">
                 <fa-icon icon="edit"></fa-icon>
               </button>
               <button mat-icon-button color="warn" (click)="delete(chart.controls.chartSlabs, chartSlabIndex)">
                 <fa-icon icon="trash"></fa-icon>
               </button>
-              <button mat-button color="primary" (click)="expandChartSlabIndex[chartIndex] = expandChartSlabIndex[chartIndex] === chartSlabIndex ? null : chartSlabIndex">
+              <button mat-button color="primary"
+                (click)="expandChartSlabIndex[chartIndex] = expandChartSlabIndex[chartIndex] === chartSlabIndex ? null : chartSlabIndex">
                 <span *ngIf="expandChartSlabIndex[chartIndex] !== chartSlabIndex">
                   <fa-icon icon="eye" class="m-r-10"></fa-icon>
                   View Incentives
@@ -117,9 +126,11 @@
           </ng-container>
 
           <ng-container matColumnDef="incentives">
-            <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex" [attr.colspan]="chartSlabsDisplayedColumns[chartIndex].length">
+            <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex"
+              [attr.colspan]="chartSlabsDisplayedColumns[chartIndex].length">
 
-              <div fxLayout="row wrap" fxFlexFill class="incentives" [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex[chartIndex] ? 'expanded' : 'collapsed'">
+              <div fxLayout="row wrap" fxFlexFill class="incentives"
+                [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex[chartIndex] ? 'expanded' : 'collapsed'">
 
                 <mat-card fxLayout="row wrap" fxFlexFill>
 
@@ -128,13 +139,15 @@
                   </h4>
 
                   <div fxFlex="83%">
-                    <button mat-raised-button color="primary" (click)="addIncentive(getIncentives(chart.controls.chartSlabs, chartSlabIndex))">
+                    <button mat-raised-button color="primary"
+                      (click)="addIncentive(getIncentives(chart.controls.chartSlabs, chartSlabIndex))">
                       <fa-icon icon="plus" class="m-r-10"></fa-icon>
                       Add
                     </button>
                   </div>
 
-                  <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="chartSlab.incentives" *ngIf="chartSlab.incentives.length">
+                  <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="chartSlab.incentives"
+                    *ngIf="chartSlab.incentives.length">
 
                     <ng-container matColumnDef="entityType">
                       <th mat-header-cell *matHeaderCellDef> Entity Type </th>
@@ -163,7 +176,8 @@
                         <span *ngSwitchCase="2">{{ incentive.attributeValue | find:genderData:'id':'name' }}</span>
                         <span *ngSwitchCase="3">{{ incentive.attributeValue }}</span>
                         <span *ngSwitchCase="4">{{ incentive.attributeValue | find:clientTypeData:'id':'name' }}</span>
-                        <span *ngSwitchCase="5">{{ incentive.attributeValue | find:clientClassificationData:'id':'name' }}</span>
+                        <span *ngSwitchCase="5">{{ incentive.attributeValue | find:clientClassificationData:'id':'name'
+                          }}</span>
                       </td>
                     </ng-container>
 
@@ -184,10 +198,12 @@
                     <ng-container matColumnDef="actions">
                       <th mat-header-cell *matHeaderCellDef> Actions </th>
                       <td mat-cell *matCellDef="let incentive; let incentiveIndex = index">
-                        <button mat-icon-button color="primary" (click)="editIncentive(getIncentives(chart.controls.chartSlabs, chartSlabIndex), incentiveIndex)">
+                        <button mat-icon-button color="primary"
+                          (click)="editIncentive(getIncentives(chart.controls.chartSlabs, chartSlabIndex), incentiveIndex)">
                           <fa-icon icon="edit"></fa-icon>
                         </button>
-                        <button mat-icon-button color="warn" (click)="delete(getIncentives(chart.controls.chartSlabs, chartSlabIndex), incentiveIndex)">
+                        <button mat-icon-button color="warn"
+                          (click)="delete(getIncentives(chart.controls.chartSlabs, chartSlabIndex), incentiveIndex)">
                           <fa-icon icon="trash"></fa-icon>
                         </button>
                       </td>

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

@@ -111,12 +111,12 @@ export class FixedDepositProductInterestRateChartStepComponent implements OnInit
       this.chartsDetail[i].chartSlabs.forEach((chartSlabDetail: any, j: number) => {
 
         const chartSlabInfo = this.formBuilder.group({
-          amountRangeFrom: [chartSlabDetail.amountRangeFrom],
+          amountRangeFrom: [chartSlabDetail.amountRangeFrom || ''],
-          amountRangeTo: [chartSlabDetail.amountRangeTo],
+          amountRangeTo: [chartSlabDetail.amountRangeTo || ''],
           annualInterestRate: [chartSlabDetail.annualInterestRate, Validators.required],
           description: [chartSlabDetail.description, Validators.required],
           fromPeriod: [chartSlabDetail.fromPeriod, Validators.required],
-          toPeriod: [chartSlabDetail.toPeriod],
+          toPeriod: [chartSlabDetail.toPeriod || ''],
           periodType: [chartSlabDetail.periodType, Validators.required],
           incentives: this.formBuilder.array([])
         });

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

@@ -24,7 +24,8 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">Currency:</span>
-    <span fxFlex="60%">{{ fixedDepositProduct.currencyCode | find:fixedDepositProductsTemplate.currencyOptions:'code':'name' }}</span>
+    <span fxFlex="60%">{{ fixedDepositProduct.currencyCode |
+      find:fixedDepositProductsTemplate.currencyOptions:'code':'name' }}</span>
   </div>
 
   <div fxFlexFill>
@@ -43,27 +44,34 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">Deposit Amount:</span>
-    <span fxFlex="60%">{{ fixedDepositProduct.depositAmount + ' (Min: ' + (fixedDepositProduct.minDepositAmount ? fixedDepositProduct.minDepositAmount : fixedDepositProduct.depositAmount) + ', Max: ' + (fixedDepositProduct.maxDepositAmount ? fixedDepositProduct.maxDepositAmount : fixedDepositProduct.depositAmount) + ')' }}</span>
+    <span fxFlex="60%">{{ fixedDepositProduct.depositAmount + ' (Min: ' + (fixedDepositProduct.minDepositAmount ?
+      fixedDepositProduct.minDepositAmount : fixedDepositProduct.depositAmount) + ', Max: ' +
+      (fixedDepositProduct.maxDepositAmount ? fixedDepositProduct.maxDepositAmount : fixedDepositProduct.depositAmount)
+      + ')' }}</span>
   </div>
 
   <div fxFlexFill>
     <span fxFlex="40%">Interest Compounding Period:</span>
-    <span fxFlex="60%">{{ fixedDepositProduct.interestCompoundingPeriodType | find:fixedDepositProductsTemplate.interestCompoundingPeriodTypeOptions:'id':'value' }}</span>
+    <span fxFlex="60%">{{ fixedDepositProduct.interestCompoundingPeriodType |
+      find:fixedDepositProductsTemplate.interestCompoundingPeriodTypeOptions:'id':'value' }}</span>
   </div>
 
   <div fxFlexFill>
     <span fxFlex="40%">Interest Posting Period:</span>
-    <span fxFlex="60%">{{ fixedDepositProduct.interestPostingPeriodType | find:fixedDepositProductsTemplate.interestPostingPeriodTypeOptions:'id':'value' }}</span>
+    <span fxFlex="60%">{{ fixedDepositProduct.interestPostingPeriodType |
+      find:fixedDepositProductsTemplate.interestPostingPeriodTypeOptions:'id':'value' }}</span>
   </div>
 
   <div fxFlexFill>
     <span fxFlex="40%">Interest Calculated using:</span>
-    <span fxFlex="60%">{{ fixedDepositProduct.interestCalculationType | find:fixedDepositProductsTemplate.interestCalculationTypeOptions:'id':'value' }}</span>
+    <span fxFlex="60%">{{ fixedDepositProduct.interestCalculationType |
+      find:fixedDepositProductsTemplate.interestCalculationTypeOptions:'id':'value' }}</span>
   </div>
 
   <div fxFlexFill>
     <span fxFlex="40%">Days in Year:</span>
-    <span fxFlex="60%">{{ fixedDepositProduct.interestCalculationDaysInYearType | find:fixedDepositProductsTemplate.interestCalculationDaysInYearTypeOptions:'id':'value' }}</span>
+    <span fxFlex="60%">{{ fixedDepositProduct.interestCalculationDaysInYearType |
+      find:fixedDepositProductsTemplate.interestCalculationDaysInYearTypeOptions:'id':'value' }}</span>
   </div>
 
   <h3 class="mat-h3" fxFlexFill>Settings</h3>
@@ -72,42 +80,51 @@
 
   <div fxFlexFill *ngIf="fixedDepositProduct.lockinPeriodFrequency">
     <span fxFlex="40%">Lock-in Period:</span>
-    <span fxFlex="60%">{{ fixedDepositProduct.lockinPeriodFrequency + ' ' + (fixedDepositProduct.lockinPeriodFrequencyType | find:fixedDepositProductsTemplate.lockinPeriodFrequencyTypeOptions:'id':'value') }}</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="60%">{{ fixedDepositProduct.minDepositTerm + ' ' + (fixedDepositProduct.minDepositTermTypeId | find:fixedDepositProductsTemplate.periodFrequencyTypeOptions:'id':'value') }}</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="60%">{{ fixedDepositProduct.inMultiplesOfDepositTerm + ' ' + (fixedDepositProduct.inMultiplesOfDepositTermTypeId | find:fixedDepositProductsTemplate.periodFrequencyTypeOptions:'id':'value') }}</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="60%">{{ fixedDepositProduct.maxDepositTerm + ' ' + (fixedDepositProduct.maxDepositTermTypeId | find:fixedDepositProductsTemplate.periodFrequencyTypeOptions:'id':'value') }}</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="60%">{{ fixedDepositProduct.preClosurePenalApplicable ? 'Yes' : 'No' }}</span>
+    <span fxFlex="60%">{{ fixedDepositProduct.preClosurePenalApplicable | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="fixedDepositProduct.preClosurePenalApplicable">
     <span fxFlex="40%">Penal Interest (%):</span>
-    <span fxFlex="60%">{{ fixedDepositProduct.preClosurePenalInterest + '% (' + (fixedDepositProduct.preClosurePenalInterestOnTypeId | find:fixedDepositProductsTemplate.preClosurePenalInterestOnTypeOptions:'id':'value') + ')' }}</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="60%">{{ fixedDepositProduct.withHoldTax ? 'Yes' : 'No' }}</span>
+    <span fxFlex="60%">{{ fixedDepositProduct.withHoldTax | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="fixedDepositProduct.withHoldTax">
     <span fxFlex="40%">Tax Group:</span>
-    <span fxFlex="60%">{{ fixedDepositProduct.taxGroupId | find:fixedDepositProductsTemplate.taxGroupOptions:'id':'name' }}</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">
@@ -116,13 +133,19 @@
 
     <mat-divider fxFlexFill></mat-divider>
 
-    <div fxFlexFill *ngFor="let chart of fixedDepositProduct.charts; let chartIndex = index" fxLayout="row wrap" fxLayout.lt-md="column">
+    <div fxFlexFill *ngFor="let chart of fixedDepositProduct.charts; let chartIndex = index" fxLayout="row wrap"
+      fxLayout.lt-md="column">
 
       <div fxFlexFill *ngIf="chart.name">
         <span fxFlex="40%">Name:</span>
         <span fxFlex="60%">{{ chart.name }}</span>
       </div>
 
+      <div fxFlexFill *ngIf="chart.description">
+        <span fxFlex="40%">Description:</span>
+        <span fxFlex="60%">{{ chart.description }}</span>
+      </div>
+
       <div fxFlexFill>
         <span fxFlex="40%">Valid from Date:</span>
         <span fxFlex="60%">{{ chart.fromDate | dateFormat }}</span>
@@ -133,22 +156,19 @@
         <span fxFlex="60%">{{ chart.endDate | dateFormat }}</span>
       </div>
 
-      <div fxFlexFill *ngIf="chart.description">
-        <span fxFlex="40%">Description:</span>
-        <span fxFlex="60%">{{ chart.description }}</span>
-      </div>
-
       <div fxFlexFill>
         <span fxFlex="40%">Primary Grouping by Amount:</span>
-        <span fxFlex="60%">{{ fixedDepositProduct.isPrimaryGroupingByAmount ? 'Yes' : 'No' }}</span>
+        <span fxFlex="60%">{{ fixedDepositProduct.isPrimaryGroupingByAmount | yesNo }}</span>
       </div>
 
-      <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="chart.chartSlabs" *ngIf="chart.chartSlabs.length !== 0" multiTemplateDataRows>
+      <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="chart.chartSlabs"
+        *ngIf="chart.chartSlabs.length !== 0" multiTemplateDataRows>
 
         <ng-container matColumnDef="period">
           <th mat-header-cell *matHeaderCellDef> Period </th>
           <td mat-cell *matCellDef="let chartSlab">
-            {{ chartSlab.fromPeriod + ' - ' + chartSlab.toPeriod + ' ' + (chartSlab.periodType | find:fixedDepositProductsTemplate.chartTemplate.periodTypes:'id':'value') }}
+            {{ chartSlab.fromPeriod + ' - ' + chartSlab.toPeriod + ' ' + (chartSlab.periodType |
+            find:fixedDepositProductsTemplate.chartTemplate.periodTypes:'id':'value') }}
           </td>
         </ng-container>
 
@@ -176,7 +196,9 @@
         <ng-container matColumnDef="actions">
           <th mat-header-cell *matHeaderCellDef> Actions </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">
+            <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
@@ -190,8 +212,10 @@
         </ng-container>
 
         <ng-container matColumnDef="incentives">
-          <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex" [attr.colspan]="chartSlabsDisplayedColumns[chartIndex].length">
+          <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex"
-            <div fxLayout="row wrap" fxFlexFill class="incentives" [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex[chartIndex] ? 'expanded' : 'collapsed'">
+            [attr.colspan]="chartSlabsDisplayedColumns[chartIndex].length">
+            <div fxLayout="row wrap" fxFlexFill class="incentives"
+              [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex[chartIndex] ? 'expanded' : 'collapsed'">
               <mat-card fxLayout="row wrap" fxFlexFill>
 
                 <h4 class="mat-h4" fxFlex="23%">
@@ -203,38 +227,46 @@
                   <ng-container matColumnDef="entityType">
                     <th mat-header-cell *matHeaderCellDef> Entity Type </th>
                     <td mat-cell *matCellDef="let incentive">
-                      {{ incentive.entityType | find:fixedDepositProductsTemplate.chartTemplate.entityTypeOptions:'id':'value' }}
+                      {{ incentive.entityType |
+                      find:fixedDepositProductsTemplate.chartTemplate.entityTypeOptions:'id':'value' }}
                     </td>
                   </ng-container>
 
                   <ng-container matColumnDef="attributeName">
                     <th mat-header-cell *matHeaderCellDef> Attribute Name </th>
                     <td mat-cell *matCellDef="let incentive">
-                      {{ incentive.attributeName | find:fixedDepositProductsTemplate.chartTemplate.attributeNameOptions:'id':'value' }}
+                      {{ incentive.attributeName |
+                      find:fixedDepositProductsTemplate.chartTemplate.attributeNameOptions:'id':'value' }}
                     </td>
                   </ng-container>
 
                   <ng-container matColumnDef="conditionType">
                     <th mat-header-cell *matHeaderCellDef> Condition Type </th>
                     <td mat-cell *matCellDef="let incentive">
-                      {{ incentive.conditionType | find:fixedDepositProductsTemplate.chartTemplate.conditionTypeOptions:'id':'value' }}
+                      {{ incentive.conditionType |
+                      find:fixedDepositProductsTemplate.chartTemplate.conditionTypeOptions:'id':'value' }}
                     </td>
                   </ng-container>
 
                   <ng-container matColumnDef="attributeValue">
                     <th mat-header-cell *matHeaderCellDef> Attribute Value </th>
                     <td mat-cell *matCellDef="let incentive" [ngSwitch]="incentive.attributeName">
-                      <span *ngSwitchCase="2">{{ incentive.attributeValue | find:fixedDepositProductsTemplate.chartTemplate.genderOptions:'id':'name' }}</span>
+                      <span *ngSwitchCase="2">{{ incentive.attributeValue |
+                        find:fixedDepositProductsTemplate.chartTemplate.genderOptions:'id':'name' }}</span>
                       <span *ngSwitchCase="3">{{ incentive.attributeValue }}</span>
-                      <span *ngSwitchCase="4">{{ incentive.attributeValue | find:fixedDepositProductsTemplate.chartTemplate.clientTypeOptions:'id':'name' }}</span>
+                      <span *ngSwitchCase="4">{{ incentive.attributeValue |
-                      <span *ngSwitchCase="5">{{ incentive.attributeValue | find:fixedDepositProductsTemplate.chartTemplate.clientClassificationOptions:'id':'name' }}</span>
+                        find:fixedDepositProductsTemplate.chartTemplate.clientTypeOptions:'id':'name' }}</span>
+                      <span *ngSwitchCase="5">{{ incentive.attributeValue |
+                        find:fixedDepositProductsTemplate.chartTemplate.clientClassificationOptions:'id':'name'
+                        }}</span>
                     </td>
                   </ng-container>
 
                   <ng-container matColumnDef="incentiveType">
                     <th mat-header-cell *matHeaderCellDef> Incentive Type </th>
                     <td mat-cell *matCellDef="let incentive">
-                      {{ incentive.incentiveType | find:fixedDepositProductsTemplate.chartTemplate.incentiveTypeOptions:'id':'value'}}
+                      {{ incentive.incentiveType |
+                      find:fixedDepositProductsTemplate.chartTemplate.incentiveTypeOptions:'id':'value'}}
                     </td>
                   </ng-container>
 
@@ -325,45 +357,55 @@
 
     <div fxFlexFill>
       <span fxFlex="40%">Saving reference:</span>
-      <span fxFlex="60%">{{ fixedDepositProduct.savingsReferenceAccountId | find:fixedDepositProductsTemplate.accountingMappingOptions.assetAccountOptions:'id':'name' }}</span>
+      <span fxFlex="60%">{{ fixedDepositProduct.savingsReferenceAccountId |
+        find:fixedDepositProductsTemplate.accountingMappingOptions.assetAccountOptions:'id':'name' }}</span>
     </div>
 
     <h4 fxFlexFill class="mat-h4">Liabilities</h4>
 
     <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
       <span fxFlex="40%">Saving control:</span>
-      <span fxFlex="60%">{{ fixedDepositProduct.savingsControlAccountId | find:fixedDepositProductsTemplate.accountingMappingOptions.liabilityAccountOptions:'id':'name' }}</span>
+      <span fxFlex="60%">{{ fixedDepositProduct.savingsControlAccountId |
+        find:fixedDepositProductsTemplate.accountingMappingOptions.liabilityAccountOptions:'id':'name' }}</span>
       <span fxFlex="40%">Savings transfers in suspense:</span>
-      <span fxFlex="60%">{{ fixedDepositProduct.transfersInSuspenseAccountId | find:fixedDepositProductsTemplate.accountingMappingOptions.liabilityAccountOptions:'id':'name' }}</span>
+      <span fxFlex="60%">{{ fixedDepositProduct.transfersInSuspenseAccountId |
+        find:fixedDepositProductsTemplate.accountingMappingOptions.liabilityAccountOptions:'id':'name' }}</span>
     </div>
 
     <h4 fxFlexFill class="mat-h4">Expenses</h4>
 
     <div fxFlexFill>
       <span fxFlex="40%">Interest on savings:</span>
-      <span fxFlex="60%">{{ fixedDepositProduct.interestOnSavingsAccountId | find:fixedDepositProductsTemplate.accountingMappingOptions.expenseAccountOptions:'id':'name' }}</span>
+      <span fxFlex="60%">{{ fixedDepositProduct.interestOnSavingsAccountId |
+        find:fixedDepositProductsTemplate.accountingMappingOptions.expenseAccountOptions:'id':'name' }}</span>
     </div>
 
     <h4 fxFlexFill class="mat-h4">Income</h4>
 
     <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
       <span fxFlex="40%">Income from fees:</span>
-      <span fxFlex="60%">{{ fixedDepositProduct.incomeFromFeeAccountId | find:fixedDepositProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}</span>
+      <span fxFlex="60%">{{ fixedDepositProduct.incomeFromFeeAccountId |
+        find:fixedDepositProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}</span>
       <span fxFlex="40%">Income from penalties:</span>
-      <span fxFlex="60%">{{ fixedDepositProduct.incomeFromPenaltyAccountId | find:fixedDepositProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}</span>
+      <span fxFlex="60%">{{ fixedDepositProduct.incomeFromPenaltyAccountId |
+        find:fixedDepositProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}</span>
     </div>
 
-    <div *ngIf="fixedDepositProduct.advancedAccountingRules && (fixedDepositProduct.paymentChannelToFundSourceMappings?.length || fixedDepositProduct.feeToIncomeAccountMappings?.length || fixedDepositProduct.penaltyToIncomeAccountMappings?.length)" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
+    <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>
 
       <mat-divider fxFlexFill></mat-divider>
 
-      <div *ngIf="fixedDepositProduct.paymentChannelToFundSourceMappings?.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
+      <div *ngIf="fixedDepositProduct.paymentChannelToFundSourceMappings?.length" fxFlexFill fxLayout="row wrap"
+        fxLayout.lt-md="column">
 
         <h4 class="mat-h4" fxFlexFill>Fund Sources for Payment Channels</h4>
 
-        <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="fixedDepositProduct.paymentChannelToFundSourceMappings">
+        <table fxFlexFill class="mat-elevation-z1" mat-table
+          [dataSource]="fixedDepositProduct.paymentChannelToFundSourceMappings">
 
           <ng-container matColumnDef="paymentTypeId">
             <th mat-header-cell *matHeaderCellDef> Payment Type </th>
@@ -375,7 +417,8 @@
           <ng-container matColumnDef="fundSourceAccountId">
             <th mat-header-cell *matHeaderCellDef> Fund Source </th>
             <td mat-cell *matCellDef="let paymentFundSource">
-              {{ paymentFundSource.fundSourceAccountId | find:fixedDepositProductsTemplate.accountingMappingOptions.assetAccountOptions:'id':'name' }}
+              {{ paymentFundSource.fundSourceAccountId |
+              find:fixedDepositProductsTemplate.accountingMappingOptions.assetAccountOptions:'id':'name' }}
             </td>
           </ng-container>
 
@@ -386,11 +429,13 @@
 
       </div>
 
-      <div *ngIf="fixedDepositProduct.feeToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
+      <div *ngIf="fixedDepositProduct.feeToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap"
+        fxLayout.lt-md="column">
 
         <h4 class="mat-h4" fxFlexFill>Fees to Specific Income Accounts</h4>
 
-        <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="fixedDepositProduct.feeToIncomeAccountMappings">
+        <table fxFlexFill class="mat-elevation-z1" mat-table
+          [dataSource]="fixedDepositProduct.feeToIncomeAccountMappings">
 
           <ng-container matColumnDef="chargeId">
             <th mat-header-cell *matHeaderCellDef> Fees </th>
@@ -402,7 +447,8 @@
           <ng-container matColumnDef="incomeAccountId">
             <th mat-header-cell *matHeaderCellDef> Income Account </th>
             <td mat-cell *matCellDef="let feesIncome">
-              {{ feesIncome.incomeAccountId | find:fixedDepositProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}
+              {{ feesIncome.incomeAccountId |
+              find:fixedDepositProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}
             </td>
           </ng-container>
 
@@ -413,11 +459,13 @@
 
       </div>
 
-      <div *ngIf="fixedDepositProduct.penaltyToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
+      <div *ngIf="fixedDepositProduct.penaltyToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap"
+        fxLayout.lt-md="column">
 
         <h4 class="mat-h4" fxFlexFill>Penalties to Specific Income Accounts</h4>
 
-        <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="fixedDepositProduct.penaltyToIncomeAccountMappings">
+        <table fxFlexFill class="mat-elevation-z1" mat-table
+          [dataSource]="fixedDepositProduct.penaltyToIncomeAccountMappings">
 
           <ng-container matColumnDef="chargeId">
             <th mat-header-cell *matHeaderCellDef> Penalty </th>
@@ -429,7 +477,8 @@
           <ng-container matColumnDef="incomeAccountId">
             <th mat-header-cell *matHeaderCellDef> Income Account </th>
             <td mat-cell *matCellDef="let penaltyIncome">
-              {{ penaltyIncome.incomeAccountId | find:fixedDepositProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}
+              {{ penaltyIncome.incomeAccountId |
+              find:fixedDepositProductsTemplate.accountingMappingOptions.incomeAccountOptions:'id':'name' }}
             </td>
           </ng-container>
 

src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-preview-step/fixed-deposit-product-preview-step.component.scss

@@ -1,3 +1,5 @@
+@import "assets/styles/helper";
+
 table {
   width: 100%;
 
@@ -23,6 +25,12 @@ table {
   }
 }
 
+.mat-h3 {
+  margin-top: 10px !important;
+  font-weight: 300;
+  color: $status-approved;
+}
+
 .mat-elevation-z1 {
   margin: 1em 0 1.5em 0;
 }

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

@@ -1,4 +1,3 @@
-
 <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
@@ -55,7 +54,10 @@
 
         <div fxFlexFill>
           <span fxFlex="40%">Deposit Amount:</span>
-          <span fxFlex="60%">{{ fixedDepositProductData.depositAmount + ' (Min: ' + (fixedDepositProductData.minDepositAmount ? fixedDepositProductData.minDepositAmount : fixedDepositProductData.depositAmount) + ', Max: ' + (fixedDepositProductData.maxDepositAmount ? fixedDepositProductData.maxDepositAmount : fixedDepositProductData.depositAmount) + ')' }}</span>
+          <span fxFlex="60%">{{ fixedDepositProductData.depositAmount + ' (Min: ' +
+            (fixedDepositProductData.minDepositAmount ? fixedDepositProductData.minDepositAmount :
+            fixedDepositProductData.depositAmount) + ', Max: ' + (fixedDepositProductData.maxDepositAmount ?
+            fixedDepositProductData.maxDepositAmount : fixedDepositProductData.depositAmount) + ')' }}</span>
         </div>
 
         <div fxFlexFill>
@@ -85,21 +87,22 @@
         <div fxFlexFill *ngIf="fixedDepositProductData.lockinPeriodFrequency">
           <span fxFlex="40%">Lock-in Period:</span>
           <span fxFlex="60%">
-            {{ fixedDepositProductData.lockinPeriodFrequency }} {{ fixedDepositProductData.lockinPeriodFrequencyType.value }}</span>
+            {{ fixedDepositProductData.lockinPeriodFrequency }} {{
+            fixedDepositProductData.lockinPeriodFrequencyType.value }}</span>
         </div>
 
         <div fxFlexFill *ngIf="fixedDepositProductData.minDepositTerm">
           <span fxFlex="40%">Minimum Deposit Term:</span>
-          <span fxFlex="60%"
+          <span fxFlex="60%" *ngIf="fixedDepositProductData.minDepositTerm !== undefined">{{
-            *ngIf="fixedDepositProductData.minDepositTerm !== undefined">{{ fixedDepositProductData.minDepositTerm }}
+            fixedDepositProductData.minDepositTerm }}
             &nbsp;
             {{ fixedDepositProductData.minDepositTermType.value }}</span>
         </div>
 
         <div fxFlexFill *ngIf="fixedDepositProductData.maxDepositTerm">
           <span fxFlex="40%">Maximum Deposit Term:</span>
-          <span fxFlex="60%"
+          <span fxFlex="60%" *ngIf="fixedDepositProductData.maxDepositTerm !== undefined">{{
-            *ngIf="fixedDepositProductData.maxDepositTerm !== undefined">{{ fixedDepositProductData.maxDepositTerm }}
+            fixedDepositProductData.maxDepositTerm }}
             &nbsp;
             {{ fixedDepositProductData.maxDepositTermType.value }}</span>
         </div>
@@ -113,7 +116,7 @@
 
         <div fxFlexFill>
           <span fxFlex="40%">Apply Penal Interest (less):</span>
-		  <span fxFlex="60%">{{ fixedDepositProductData.preClosurePenalApplicable ? 'Yes' : 'No' }}</span>
+          <span fxFlex="60%">{{ fixedDepositProductData.preClosurePenalApplicable | yesNo }}</span>
         </div>
 
         <div fxFlexFill *ngIf="fixedDepositProductData.preClosurePenalApplicable">
@@ -130,7 +133,7 @@
 
         <div fxFlexFill>
           <span fxFlex="40%">Is withhold tax Applicable:</span>
-          <span fxFlex="60%">{{ fixedDepositProductData.withHoldTax ? 'Yes' : 'No' }}</span>
+          <span fxFlex="60%">{{ fixedDepositProductData.withHoldTax | yesNo }}</span>
         </div>
 
         <div fxFlexFill *ngIf="fixedDepositProductData.withHoldTax">
@@ -151,6 +154,11 @@
               <span fxFlex="60%">{{ fixedDepositProductData.activeChart.name }}</span>
             </div>
 
+            <div fxFlexFill *ngIf="fixedDepositProductData.activeChart.description">
+              <span fxFlex="40%">Description:</span>
+              <span fxFlex="60%">{{ fixedDepositProductData.activeChart.description }}</span>
+            </div>
+
             <div fxFlexFill>
               <span fxFlex="40%">Valid from Date:</span>
               <span fxFlex="60%">{{ fixedDepositProductData.activeChart.fromDate | dateFormat }}</span>
@@ -161,17 +169,13 @@
               <span fxFlex="60%">{{ fixedDepositProductData.activeChart.endDate | dateFormat }}</span>
             </div>
 
-            <div fxFlexFill *ngIf="fixedDepositProductData.activeChart.description">
-              <span fxFlex="40%">Description:</span>
-              <span fxFlex="60%">{{ fixedDepositProductData.activeChart.description }}</span>
-            </div>
-
             <div fxFlexFill>
               <span fxFlex="40%">Primary Grouping by Amount:</span>
-              <span fxFlex="60%">{{ fixedDepositProductData.activeChart.isPrimaryGroupingByAmount ? 'Yes' : 'No' }}</span>
+              <span fxFlex="60%">{{ fixedDepositProductData.activeChart.isPrimaryGroupingByAmount | yesNo }}</span>
             </div>
 
-            <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="fixedDepositProductData.activeChart.chartSlabs" multiTemplateDataRows>
+            <table fxFlexFill class="mat-elevation-z1" mat-table
+              [dataSource]="fixedDepositProductData.activeChart.chartSlabs" multiTemplateDataRows>
 
               <ng-container matColumnDef="period">
                 <th mat-header-cell *matHeaderCellDef> Period </th>
@@ -201,7 +205,7 @@
               <ng-container matColumnDef="annualInterestRate">
                 <th mat-header-cell *matHeaderCellDef> Interest </th>
                 <td mat-cell *matCellDef="let chartSlab">
-                  {{ chartSlab.annualInterestRate }}
+                  {{ chartSlab.annualInterestRate }} %
                 </td>
               </ng-container>
 
@@ -215,7 +219,8 @@
               <ng-container matColumnDef="actions">
                 <th mat-header-cell *matHeaderCellDef> Actions </th>
                 <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
-                  <button mat-button color="primary" (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex">
+                  <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
@@ -229,8 +234,10 @@
               </ng-container>
 
               <ng-container matColumnDef="incentives">
-                <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex" [attr.colspan]="chartSlabsDisplayedColumns.length">
+                <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex"
-                  <div fxLayout="row wrap" fxFlexFill class="incentives" [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex? 'expanded' : 'collapsed'">
+                  [attr.colspan]="chartSlabsDisplayedColumns.length">
+                  <div fxLayout="row wrap" fxFlexFill class="incentives"
+                    [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex? 'expanded' : 'collapsed'">
                     <mat-card fxLayout="row wrap" fxFlexFill>
 
                       <h4 class="mat-h4" fxFlex="23%">
@@ -242,38 +249,46 @@
                         <ng-container matColumnDef="entityType">
                           <th mat-header-cell *matHeaderCellDef> Entity Type </th>
                           <td mat-cell *matCellDef="let incentive">
-                            {{ incentive.entityType | find:fixedDepositProductsTemplate.chartTemplate.entityTypeOptions:'id':'value' }}
+                            {{ incentive.entityType |
+                            find:fixedDepositProductsTemplate.chartTemplate.entityTypeOptions:'id':'value' }}
                           </td>
                         </ng-container>
 
                         <ng-container matColumnDef="attributeName">
                           <th mat-header-cell *matHeaderCellDef> Attribute Name </th>
                           <td mat-cell *matCellDef="let incentive">
-                            {{ incentive.attributeName | find:fixedDepositProductsTemplate.chartTemplate.attributeNameOptions:'id':'value' }}
+                            {{ incentive.attributeName |
+                            find:fixedDepositProductsTemplate.chartTemplate.attributeNameOptions:'id':'value' }}
                           </td>
                         </ng-container>
 
                         <ng-container matColumnDef="conditionType">
                           <th mat-header-cell *matHeaderCellDef> Condition Type </th>
                           <td mat-cell *matCellDef="let incentive">
-                            {{ incentive.conditionType | find:fixedDepositProductsTemplate.chartTemplate.conditionTypeOptions:'id':'value' }}
+                            {{ incentive.conditionType |
+                            find:fixedDepositProductsTemplate.chartTemplate.conditionTypeOptions:'id':'value' }}
                           </td>
                         </ng-container>
 
                         <ng-container matColumnDef="attributeValue">
                           <th mat-header-cell *matHeaderCellDef> Attribute Value </th>
                           <td mat-cell *matCellDef="let incentive" [ngSwitch]="incentive.attributeName">
-                            <span *ngSwitchCase="2">{{ incentive.attributeValue | find:fixedDepositProductsTemplate.chartTemplate.genderOptions:'id':'name' }}</span>
+                            <span *ngSwitchCase="2">{{ incentive.attributeValue |
+                              find:fixedDepositProductsTemplate.chartTemplate.genderOptions:'id':'name' }}</span>
                             <span *ngSwitchCase="3">{{ incentive.attributeValue }}</span>
-                            <span *ngSwitchCase="4">{{ incentive.attributeValue | find:fixedDepositProductsTemplate.chartTemplate.clientTypeOptions:'id':'name' }}</span>
+                            <span *ngSwitchCase="4">{{ incentive.attributeValue |
-                            <span *ngSwitchCase="5">{{ incentive.attributeValue | find:fixedDepositProductsTemplate.chartTemplate.clientClassificationOptions:'id':'name' }}</span>
+                              find:fixedDepositProductsTemplate.chartTemplate.clientTypeOptions:'id':'name' }}</span>
+                            <span *ngSwitchCase="5">{{ incentive.attributeValue |
+                              find:fixedDepositProductsTemplate.chartTemplate.clientClassificationOptions:'id':'name'
+                              }}</span>
                           </td>
                         </ng-container>
 
                         <ng-container matColumnDef="incentiveType">
                           <th mat-header-cell *matHeaderCellDef> Incentive Type </th>
                           <td mat-cell *matCellDef="let incentive">
-                            {{ incentive.incentiveType | find:fixedDepositProductsTemplate.chartTemplate.incentiveTypeOptions:'id':'value'}}
+                            {{ incentive.incentiveType |
+                            find:fixedDepositProductsTemplate.chartTemplate.incentiveTypeOptions:'id':'value'}}
                           </td>
                         </ng-container>
 
@@ -296,7 +311,8 @@
 
               <tr mat-header-row *matHeaderRowDef="chartSlabsDisplayedColumns"></tr>
               <tr mat-row *matRowDef="let row; columns: chartSlabsDisplayedColumns"></tr>
-              <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns;" class="incentives-row"></tr>
+              <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns;" class="incentives-row">
+              </tr>
 
             </table>
 
@@ -356,7 +372,8 @@
           <span fxFlex="60%">{{ fixedDepositProductData.accountingRule.value }}</span>
         </div>
 
-        <div fxFlexFill *ngIf="fixedDepositProductData.accountingRule.id === 2" fxLayout="row wrap" fxLayout.lt-md="column">
+        <div fxFlexFill *ngIf="fixedDepositProductData.accountingRule.id === 2" fxLayout="row wrap"
+          fxLayout.lt-md="column">
 
           <h4 fxFlexFill class="mat-h4">Assets</h4>
 
@@ -390,7 +407,9 @@
             <span fxFlex="60%">{{ fixedDepositProductData.accountingMappings.incomeFromPenaltyAccount.name }}</span>
           </div>
 
-        <div fxFlexFill *ngIf="fixedDepositProductData.advancedAccountingRules && (fixedDepositProductData.paymentChannelToFundSourceMappings?.length || fixedDepositProductData.feeToIncomeAccountMappings?.length || fixedDepositProductData.penaltyToIncomeAccountMappings?.length)" fxLayout="row wrap" fxLayout.lt-md="column">
+          <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>
 
@@ -398,7 +417,8 @@
 
             <hr>
 
-          <div *ngIf="fixedDepositProductData.paymentChannelToFundSourceMappings?.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
+            <div *ngIf="fixedDepositProductData.paymentChannelToFundSourceMappings?.length" fxFlexFill
+              fxLayout="row wrap" fxLayout.lt-md="column">
               <h4 class="mat-h4" fxFlexFill>Configure Fund Sources for Payment Channels</h4>
 
               <table fxFlexFill class="mat-elevation-z1" mat-table
@@ -425,7 +445,8 @@
 
             </div>
 
-          <div *ngIf="fixedDepositProductData.feeToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
+            <div *ngIf="fixedDepositProductData.feeToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap"
+              fxLayout.lt-md="column">
 
               <h4 class="mat-h4" fxFlexFill>Fees to Specific Income Accounts</h4>
 
@@ -453,7 +474,8 @@
 
             </div>
 
-          <div *ngIf="fixedDepositProductData.penaltyToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
+            <div *ngIf="fixedDepositProductData.penaltyToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap"
+              fxLayout.lt-md="column">
 
               <h4 class="mat-h4" fxFlexFill>Penalties to Specific Income Accounts</h4>
 

src/app/products/fixed-deposit-products/view-fixed-deposit-product/view-fixed-deposit-product.component.scss

@@ -11,3 +11,7 @@
     cursor: pointer;
   }
 }
+
+mat-card-content {
+  padding-bottom: 40px;
+}

src/app/products/floating-rates/view-floating-rate/view-floating-rate.component.html

@@ -28,7 +28,7 @@
         </div>
 
         <div fxFlex="10%">
-          {{ floatingRateData.isBaseLendingRate ? 'Yes' : 'No' }}
+          {{ floatingRateData.isBaseLendingRate | yesNo }}
         </div>
 
         <div fxFlex="14%" class="mat-body-strong">
@@ -36,7 +36,7 @@
         </div>
 
         <div fxFlex="10%">
-          {{ floatingRateData.isActive ? 'Yes' : 'No' }}
+          {{ floatingRateData.isActive | yesNo }}
         </div>
 
       </div>

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

@@ -601,7 +601,7 @@
     <span fxFlex="40%">Repaid every:</span>
     <span fxFlex="60%">{{ loanProduct.allowAttributeOverrides.repaymentEvery | yesNo }}</span>
     <span fxFlex="40%">Moratorium:</span>
-    <span fxFlex="60%">{{ loanProduct.allowAttributeOverrides.graceOnPrincipalAndInterestPayment ? 'Yes' : 'No'
+    <span fxFlex="60%">{{ loanProduct.allowAttributeOverrides.graceOnPrincipalAndInterestPayment | yesNo
       }}</span>
     <span fxFlex="40%">Number of days a loan may be overdue before moving into arrears:</span>
     <span fxFlex="60%">{{ loanProduct.allowAttributeOverrides.graceOnArrearsAgeing | yesNo }}</span>

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

@@ -92,7 +92,7 @@
   <!-- For Pre-mature closure -->
   <div fxFlexFill>
     <span fxFlex="40%">Apply Penal Interest (less):</span>
-    <span fxFlex="60%">{{ recurringDepositProduct.preClosurePenalApplicable ? 'Yes' : 'No' }}</span>
+    <span fxFlex="60%">{{ recurringDepositProduct.preClosurePenalApplicable | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="recurringDepositProduct.preClosurePenalApplicable">
@@ -108,7 +108,7 @@
   <!--  -->
   <div fxFlexFill>
     <span fxFlex="40%">Withhold Tax is Applicable:</span>
-    <span fxFlex="60%">{{ recurringDepositProduct.withHoldTax ? 'Yes' : 'No' }}</span>
+    <span fxFlex="60%">{{ recurringDepositProduct.withHoldTax | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="recurringDepositProduct.withHoldTax">
@@ -146,7 +146,7 @@
 
       <div fxFlexFill>
         <span fxFlex="40%">Primary Grouping by Amount:</span>
-        <span fxFlex="60%">{{ recurringDepositProduct.isPrimaryGroupingByAmount ? 'Yes' : 'No' }}</span>
+        <span fxFlex="60%">{{ recurringDepositProduct.isPrimaryGroupingByAmount | yesNo }}</span>
       </div>
 
       <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="chart.chartSlabs" *ngIf="chart.chartSlabs.length !== 0" multiTemplateDataRows>

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

@@ -167,7 +167,7 @@
 
             <div fxFlexFill>
               <span fxFlex="40%">Primary Grouping by Amount:</span>
-              <span fxFlex="60%">{{ recurringDepositProduct.activeChart.isPrimaryGroupingByAmount ? 'Yes' : 'No' }}</span>
+              <span fxFlex="60%">{{ recurringDepositProduct.activeChart.isPrimaryGroupingByAmount | yesNo }}</span>
             </div>
 
             <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="recurringDepositProduct.activeChart.chartSlabs" multiTemplateDataRows>

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

@@ -82,7 +82,7 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">Apply Withdrawal Fee for Transfers:</span>
-    <span fxFlex="60%">{{ savingProduct.withdrawalFeeForTransfers ? 'Yes' : 'No' }}</span>
+    <span fxFlex="60%">{{ savingProduct.withdrawalFeeForTransfers | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingProduct.minBalanceForInterestCalculation">
@@ -92,7 +92,7 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">Enforce Minimum Balance:</span>
-    <span fxFlex="60%">{{ savingProduct.enforceMinRequiredBalance ? 'Yes' : 'No' }}</span>
+    <span fxFlex="60%">{{ savingProduct.enforceMinRequiredBalance | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingProduct.minRequiredBalance">
@@ -102,7 +102,7 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">Withhold Tax is Applicable:</span>
-    <span fxFlex="60%">{{ savingProduct.withHoldTax ? 'Yes' : 'No' }}</span>
+    <span fxFlex="60%">{{ savingProduct.withHoldTax | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingProduct.withHoldTax">
@@ -112,7 +112,7 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">Is Overdraft Allowed:</span>
-    <span fxFlex="60%">{{ savingProduct.allowOverdraft ? 'Yes' : 'No' }}</span>
+    <span fxFlex="60%">{{ savingProduct.allowOverdraft | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingProduct.minOverdraftForInterestCalculation">
@@ -132,7 +132,7 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">Enable Dormancy Tracking:</span>
-    <span fxFlex="60%">{{ savingProduct.isDormancyTrackingActive ? 'Yes' : 'No' }}</span>
+    <span fxFlex="60%">{{ savingProduct.isDormancyTrackingActive | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingProduct.isDormancyTrackingActive" fxLayout="row wrap" fxLayout.lt-md="column">

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

@@ -92,7 +92,7 @@
 
     <div fxFlexFill>
       <span fxFlex="40%">Apply Withdrawal Fee for Transfers:</span>
-      <span fxFlex="60%">{{ savingProduct.withdrawalFeeForTransfers ? 'Yes' : 'No' }}</span>
+      <span fxFlex="60%">{{ savingProduct.withdrawalFeeForTransfers | yesNo }}</span>
     </div>
 
     <div fxFlexFill *ngIf="savingProduct.minBalanceForInterestCalculation">
@@ -102,7 +102,7 @@
 
     <div fxFlexFill>
       <span fxFlex="40%">Enforce Minimum Balance:</span>
-      <span fxFlex="60%">{{ savingProduct.enforceMinRequiredBalance ? 'Yes' : 'No' }}</span>
+      <span fxFlex="60%">{{ savingProduct.enforceMinRequiredBalance | yesNo }}</span>
     </div>
 
     <div fxFlexFill *ngIf="savingProduct.minRequiredBalance">
@@ -112,7 +112,7 @@
 
     <div fxFlexFill>
       <span fxFlex="40%">Withhold Tax is Applicable:</span>
-      <span fxFlex="60%">{{ savingProduct.withHoldTax ? 'Yes' : 'No' }}</span>
+      <span fxFlex="60%">{{ savingProduct.withHoldTax | yesNo }}</span>
     </div>
 
     <div fxFlexFill *ngIf="savingProduct.withHoldTax">
@@ -122,7 +122,7 @@
 
     <div fxFlexFill>
       <span fxFlex="40%">Is Overdraft Allowed:</span>
-      <span fxFlex="60%">{{ savingProduct.allowOverdraft ? 'Yes' : 'No' }}</span>
+      <span fxFlex="60%">{{ savingProduct.allowOverdraft | yesNo }}</span>
     </div>
 
     <div fxFlexFill *ngIf="savingProduct.minOverdraftForInterestCalculation">
@@ -142,7 +142,7 @@
 
     <div fxFlexFill>
       <span fxFlex="40%">Enable Dormancy Tracking:</span>
-      <span fxFlex="60%">{{ savingProduct.isDormancyTrackingActive ? 'Yes' : 'No' }}</span>
+      <span fxFlex="60%">{{ savingProduct.isDormancyTrackingActive | yesNo }}</span>
     </div>
 
     <div fxFlexFill *ngIf="savingProduct.isDormancyTrackingActive" fxLayout="row wrap" fxLayout.lt-md="column">

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

@@ -82,7 +82,7 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">Allow dividends for inactive clients:</span>
-    <span fxFlex="60%">{{ shareProduct.allowDividendCalculationForInactiveClients ? 'Yes' : 'No' }}</span>
+    <span fxFlex="60%">{{ shareProduct.allowDividendCalculationForInactiveClients | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="shareProduct.marketPricePeriods.length" fxLayout="row wrap" fxLayout.lt-md="column">

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

@@ -99,7 +99,7 @@
 
         <div fxFlexFill>
           <span fxFlex="40%">Allow dividends for inactive clients:</span>
-          <span fxFlex="60%">{{ shareProduct.allowDividendCalculationForInactiveClients ? 'Yes' : 'No' }}</span>
+          <span fxFlex="60%">{{ shareProduct.allowDividendCalculationForInactiveClients | yesNo }}</span>
         </div>
 
         <div fxFlexFill *ngIf="shareProduct.marketPrice?.length" fxLayout="row wrap" fxLayout.lt-md="column">

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

@@ -75,7 +75,7 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">Apply Withdrawal Fee for Transfers:</span>
-    <span fxFlex="60%">{{ savingsAccount.withdrawalFeeForTransfers ? 'Yes' : 'No' }}</span>
+    <span fxFlex="60%">{{ savingsAccount.withdrawalFeeForTransfers | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingsAccount.lockinPeriodFrequency">
@@ -85,7 +85,7 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">Is Overdraft Allowed:</span>
-    <span fxFlex="60%">{{ savingsAccount.allowOverdraft ? 'Yes' : 'No' }}</span>
+    <span fxFlex="60%">{{ savingsAccount.allowOverdraft | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingsAccount.minOverdraftForInterestCalculation">
@@ -105,7 +105,7 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">Enforce Minimum Balance:</span>
-    <span fxFlex="60%">{{ savingsAccount.enforceMinRequiredBalance ? 'Yes' : 'No' }}</span>
+    <span fxFlex="60%">{{ savingsAccount.enforceMinRequiredBalance | yesNo }}</span>
   </div>
 
   <div fxFlexFill *ngIf="savingsAccount.minRequiredBalance">

src/app/system/manage-jobs/scheduler-jobs/manage-scheduler-jobs.component.html

@@ -61,7 +61,7 @@
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Active ? </th>
         <td mat-cell *matCellDef="let job" class="center">
           <div [className]="job.active === true ? 'currently-running' : 'not-currently-running'">
-            <fa-icon matTooltip="{{ job.active === true ? 'Yes' : 'No' }}" matTooltipPosition="right" icon="circle"
+            <fa-icon matTooltip="{{ job.active === true | yesNo }}" matTooltipPosition="right" icon="circle"
               size="lg"></fa-icon>
           </div>
         </td>
@@ -94,7 +94,7 @@
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Currently Running </th>
         <td mat-cell *matCellDef="let job" class="center">
           <div [className]="job.currentlyRunning === true ? 'currently-running' : 'not-currently-running'">
-            <fa-icon matTooltip="{{ job.currentlyRunning === true ? 'Yes' : 'No' }}" matTooltipPosition="right"
+            <fa-icon matTooltip="{{ job.currentlyRunning === true | yesNo }}" matTooltipPosition="right"
               icon="circle" size="lg"></fa-icon>
           </div>
         </td>

src/app/system/manage-reports/view-report/view-report.component.html

@@ -53,7 +53,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ reportData.coreReport ? 'Yes' : 'No' }}
+          {{ reportData.coreReport | yesNo }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
@@ -61,7 +61,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ reportData.useReport ? 'Yes' : 'No' }}
+          {{ reportData.useReport | yesNo }}
         </div>
 
       </div>

src/assets/translations/en-US.json

@@ -4,9 +4,17 @@
   "Remember me": "Remember me",
   "not_found_subtitle": "Oops.. Looks like this page doesn't exist.",
   "languages": {
+    "cs-CS": "Czech",
     "en-US": "English",
     "fr-FR": "French",
-    "es-MX": "Spanish"
+    "es-MX": "Spanish",
+    "de-DE": "German",
+    "ko-KO": "Korean",
+    "it-IT": "Italian",
+    "lt-LT": "Lithuanian",
+    "lv-LV": "Latvian",
+    "ne-NE": "Nepali",
+    "pt-PT": "Portuguese"
   },
   "labels": {
     "breadcrumbs": {

src/environments/environment.prod.ts

@@ -22,7 +22,7 @@ export const environment = {
     serverUrl: ''
   },
   defaultLanguage: window['env']['defaultLanguage'] || 'en-US',
-  supportedLanguages: window['env']['supportedLanguages'] || 'en-US,es-MX,fr-FR',
+  supportedLanguages: window['env']['supportedLanguages'] || 'cs-CS,de-DE,en-US,es-MX,fr-FR,it-IT,ko-KO,lt-LT,lv-LV,ne-NE,pt-PT',
   preloadClients: window['env']['preloadClients'] || true,
 
   defaultCharDelimiter: window['env']['defaultCharDelimiter'] || ',',

src/environments/environment.ts

@@ -27,7 +27,7 @@ export const environment = {
     serverUrl: ''
   },
   defaultLanguage: window['env']['defaultLanguage'] || 'en-US',
-  supportedLanguages: window['env']['supportedLanguages'] || 'en-US,es-MX,fr-FR',
+  supportedLanguages: window['env']['supportedLanguages'] || 'cs-CS,de-DE,en-US,es-MX,fr-FR,it-IT,ko-KO,lt-LT,lv-LV,ne-NE,pt-PT',
   preloadClients: window['env']['preloadClients'] || true,
 
   defaultCharDelimiter: window['env']['defaultCharDelimiter'] || ',',