From a27169d8fea85b978beb740b8f54b129d5a0f1b1 Mon Sep 17 00:00:00 2001
From: Muskan Khedia <36980003+muskankhedia@users.noreply.github.com>
Date: Sun, 9 Aug 2020 18:44:05 +0530
Subject: [PATCH] feat: add view incentives (recurring deposits account)
 (#1187)

Fixes: #1186
---
 ...nt-interest-rate-chart-step.component.html | 191 +++++++++++++-----
 ...nt-interest-rate-chart-step.component.scss |  29 ++-
 ...ount-interest-rate-chart-step.component.ts |  28 ++-
 ...posits-account-preview-step.component.html | 121 +++++++++--
 ...posits-account-preview-step.component.scss |  29 +++
 ...deposits-account-preview-step.component.ts |  31 ++-
 .../interest-rate-chart-tab.component.html    | 110 ++++++++--
 .../interest-rate-chart-tab.component.scss    |  16 ++
 .../interest-rate-chart-tab.component.ts      |  31 ++-
 9 files changed, 461 insertions(+), 125 deletions(-)

diff --git a/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 b/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
index 481b89413..c8f876699 100644
--- a/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
+++ b/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
@@ -1,69 +1,154 @@
-<!-- <div class="mat-elevation-z1 m-b-25"> -->
-<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+<div fxLayout="column" fxLayoutGap="2%">
 
-  <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
-    <div fxFlexFill>
-      <span fxFlex="40%">Name:</span>
-      <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.name | date }}</span>
-    </div>
+  <div fxFlexFill *ngIf="recurringDepositsAccountProductTemplate?.accountChart.name">
+    <span fxFlex="40%">Name:</span>
+    <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate.accountChart.name }}</span>
+  </div>
 
-    <div fxFlexFill>
-      <span fxFlex="40%">Valid from Date:</span>
-      <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.fromDate | date }}</span>
-    </div>
+  <div fxFlexFill>
+    <span fxFlex="40%">Valid from Date:</span>
+    <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.fromDate | date }}</span>
+  </div>
 
-    <div fxFlexFill *ngIf="recurringDepositsAccountProductTemplate?.accountChart.endDate">
-      <span fxFlex="40%">End Date:</span>
-      <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.endDate | date }}</span>
-    </div>
+  <div fxFlexFill *ngIf="recurringDepositsAccountProductTemplate?.accountChart.endDate">
+    <span fxFlex="40%">End Date:</span>
+    <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.endDate | date }}</span>
+  </div>
 
-    <div fxFlexFill *ngIf="recurringDepositsAccountProductTemplate?.accountChart.description">
-      <span fxFlex="40%">Description:</span>
-      <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.description }}</span>
-    </div>
+  <div fxFlexFill *ngIf="recurringDepositsAccountProductTemplate?.accountChart.description">
+    <span fxFlex="40%">Description:</span>
+    <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.description }}</span>
+  </div>
 
-    <div fxFlexFill>
-      <span fxFlex="40%">Primary Grouping by Amount:</span>
-      <span
-        fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount ? 'Yes' : 'No' }}</span>
-    </div>
+  <div fxFlexFill>
+    <span fxFlex="40%">Primary Grouping by Amount:</span>
+    <span
+      fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount ? 'Yes' : 'No' }}</span>
+  </div>
 
-    <table mat-table [dataSource]="interestRateChartData">
+  <table class="mat-elevation-z1" mat-table [dataSource]="interestRateChartData" #chartsTable multiTemplateDataRows>
 
-      <ng-container matColumnDef="period">
-        <th mat-header-cell *matHeaderCellDef> Period </th>
-        <td mat-cell *matCellDef="let rateChart">
-          {{rateChart.fromPeriod}}-{{rateChart.toPeriod}}&nbsp;{{rateChart.periodType.value}}</td>
-      </ng-container>
+    <ng-container matColumnDef="period">
+      <th mat-header-cell *matHeaderCellDef> Period </th>
+      <td mat-cell *matCellDef="let chartSlab">
+        {{chartSlab.fromPeriod}}-{{chartSlab.toPeriod}}&nbsp;{{chartSlab.periodType.value}}</td>
+    </ng-container>
 
-      <ng-container matColumnDef="amountRange">
-        <th mat-header-cell *matHeaderCellDef> Amount Range </th>
-        <td mat-cell *matCellDef="let rateChart">{{rateChart.amountRangeFrom}}-{{rateChart.amountRangeTo}}</td>
-      </ng-container>
+    <ng-container matColumnDef="amountRange">
+      <th mat-header-cell *matHeaderCellDef> Amount Range </th>
+      <td mat-cell *matCellDef="let chartSlab">{{chartSlab.amountRangeFrom}}-{{chartSlab.amountRangeTo}}</td>
+    </ng-container>
 
-      <ng-container matColumnDef="interest">
-        <th mat-header-cell *matHeaderCellDef> Interest </th>
-        <td mat-cell *matCellDef="let rateChart"> {{ rateChart.annualInterestRate }} </td>
-      </ng-container>
+    <ng-container matColumnDef="interest">
+      <th mat-header-cell *matHeaderCellDef> Interest </th>
+      <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.annualInterestRate }} </td>
+    </ng-container>
 
-      <ng-container matColumnDef="description">
-        <th mat-header-cell *matHeaderCellDef> Description </th>
-        <td mat-cell *matCellDef="let rateChart"> {{ rateChart.description }} </td>
-      </ng-container>
+    <ng-container matColumnDef="description">
+      <th mat-header-cell *matHeaderCellDef> Description </th>
+      <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.description }} </td>
+    </ng-container>
 
-      <ng-container matColumnDef="incentives">
-        <th mat-header-cell *matHeaderCellDef> Incentives </th>
-        <td mat-cell *matCellDef="let rateChart">
-          <button mat-button color="primary">
+    <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">
+          <span *ngIf="expandChartSlabIndex !== chartSlabIndex">
             <fa-icon icon="eye"></fa-icon>&nbsp;&nbsp;
             View Incentives
-          </button>
-        </td>
-      </ng-container>
+          </span>
+          <span *ngIf="expandChartSlabIndex === chartSlabIndex">
+            <fa-icon icon="eye-slash"></fa-icon>&nbsp;&nbsp;
+            Hide Incentives
+          </span>
+        </button>
+      </td>
+    </ng-container>
 
-      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    <ng-container matColumnDef="incentives">
+      <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex"
+        [attr.colspan]="chartSlabsDisplayedColumns.length">
+
+        <div fxLayout="row wrap" fxFlexFill class="incentives"
+          [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex ? 'expanded' : 'collapsed'">
+
+          <mat-card fxLayout="row wrap" fxFlexFill>
+
+            <h4 class="m-b-10" fxFlex="13%">
+              Incentives
+            </h4>
+
+            <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>
+                <td mat-cell *matCellDef="let incentive">
+                  {{ incentive.entityType.value }}
+                </td>
+              </ng-container>
+
+              <ng-container matColumnDef="attributeName">
+                <th mat-header-cell *matHeaderCellDef> Attribute Name </th>
+                <td mat-cell *matCellDef="let incentive">
+                  {{ incentive.attributeName.value }}
+                </td>
+              </ng-container>
+
+              <ng-container matColumnDef="conditionType">
+                <th mat-header-cell *matHeaderCellDef> Condition Type </th>
+                <td mat-cell *matCellDef="let incentive">
+                  {{ incentive.conditionType.value | titlecase }}
+                </td>
+              </ng-container>
+
+              <ng-container matColumnDef="attributeValue">
+                <th mat-header-cell *matHeaderCellDef> Attribute Value </th>
+                <td mat-cell *matCellDef="let incentive" [ngSwitch]="incentive.attributeName">
+                  {{ incentive.attributeValueDesc }}
+                </td>
+              </ng-container>
+
+              <ng-container matColumnDef="incentiveType">
+                <th mat-header-cell *matHeaderCellDef> Incentive Type </th>
+                <td mat-cell *matCellDef="let incentive">
+                  {{ incentive.incentiveType.value }}
+                </td>
+              </ng-container>
+
+              <ng-container matColumnDef="amount">
+                <th mat-header-cell *matHeaderCellDef> Interest </th>
+                <td mat-cell *matCellDef="let incentive">
+                  {{ incentive.amount }}
+                </td>
+              </ng-container>
+
+              <tr mat-header-row *matHeaderRowDef="incentivesDisplayedColumns"></tr>
+              <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns;"></tr>
+
+            </table>
+
+          </mat-card>
+        </div>
+      </td>
+    </ng-container>
+
+    <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>
+
+  </table>
 
-    </table>
-  </div>
+</div>
+
+<div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+  <button mat-raised-button matStepperPrevious>
+    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    Previous
+  </button>
+  <button mat-raised-button matStepperNext>
+    Next&nbsp;&nbsp;
+    <fa-icon icon="arrow-right"></fa-icon>
+  </button>
 </div>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-interest-rate-chart-step/recurring-deposits-account-interest-rate-chart-step.component.scss b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-interest-rate-chart-step/recurring-deposits-account-interest-rate-chart-step.component.scss
index be9328c80..bc815c2d2 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-interest-rate-chart-step/recurring-deposits-account-interest-rate-chart-step.component.scss
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-interest-rate-chart-step/recurring-deposits-account-interest-rate-chart-step.component.scss
@@ -1,10 +1,23 @@
-.tab-container {
-  padding: 1%;
-  margin: 1%;
-  h3 {
-    margin:1% auto;
-  }
-  table {
-    width: 100%;
+.margin-t {
+  margin-top: 2em;
+}
+
+table {
+  width: 100%;
+
+  tr.incentives-row {
+    height: 0;
+
+    > td {
+      padding: 0;
+    }
+
+    .incentives {
+      overflow: hidden;
+    }
+
+    .mat-card {
+      border-radius: 0;
+    }
   }
 }
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-interest-rate-chart-step/recurring-deposits-account-interest-rate-chart-step.component.ts b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-interest-rate-chart-step/recurring-deposits-account-interest-rate-chart-step.component.ts
index 57acf98e7..2d03243bd 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-interest-rate-chart-step/recurring-deposits-account-interest-rate-chart-step.component.ts
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-interest-rate-chart-step/recurring-deposits-account-interest-rate-chart-step.component.ts
@@ -1,6 +1,7 @@
 /** Angular Imports */
-import { Component, OnInit, Input, OnChanges } from '@angular/core';
-import { MatTableDataSource } from '@angular/material';
+import { Component, OnInit, Input, OnChanges, ViewChild } from '@angular/core';
+import { MatTable } from '@angular/material';
+import { trigger, state, style, transition, animate } from '@angular/animations';
 
 /**
  * Recurring Deposits Account Interest Rate Chart Step
@@ -8,7 +9,14 @@ import { MatTableDataSource } from '@angular/material';
 @Component({
   selector: 'mifosx-recurring-deposits-account-interest-rate-chart-step',
   templateUrl: './recurring-deposits-account-interest-rate-chart-step.component.html',
-  styleUrls: ['./recurring-deposits-account-interest-rate-chart-step.component.scss']
+  styleUrls: ['./recurring-deposits-account-interest-rate-chart-step.component.scss'],
+  animations: [
+    trigger('expandChartSlab', [
+      state('collapsed', style({ height: '0px', minHeight: '0' })),
+      state('expanded', style({ height: '*' })),
+      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
+    ])
+  ]
 })
 export class RecurringDepositsAccountInterestRateChartStepComponent implements OnInit, OnChanges {
 
@@ -16,11 +24,17 @@ export class RecurringDepositsAccountInterestRateChartStepComponent implements O
   @Input() recurringDepositsAccountProductTemplate: any;
 
   /** Interest Rate Chart Data */
-  interestRateChartData: any;
+  interestRateChartData: any = [];
   /** Columns to be displayed in interest rate chart table. */
-  displayedColumns: string[] = ['period', 'amountRange', 'interest', 'description', 'incentives'];
-  /** Data source for interest rate chart table. */
-  dataSource: MatTableDataSource<any>;
+  chartSlabsDisplayedColumns: any[] = ['period', 'amountRange', 'interest', 'description', 'actions'];
+  /** Columns to be displayed in incentives sub-table. */
+  incentivesDisplayedColumns: string[] = ['entityType', 'attributeName', 'conditionType', 'attributeValue', 'incentiveType', 'amount'];
+  /** Additional Column to disblac incentives table  */
+  chartSlabsIncentivesDisplayedColumns: string[] = ['incentives'];
+  /** Expand Chart Slab Index used in the view */
+  expandChartSlabIndex: number;
+
+  @ViewChild('chartsTable') chartsTableRef: MatTable<Element>;
 
   constructor() {
   }
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.html
index 805c9caac..d697ce2ae 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.html
@@ -35,10 +35,10 @@
     <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate.currency.decimalPlaces }}</span>
   </div>
 
-    <div fxFlexFill>
-      <span fxFlex="40%">Currency In Multiples Of</span>
-      <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate.currency.inMultiplesOf }}</span>
-    </div>
+  <div fxFlexFill>
+    <span fxFlex="40%">Currency In Multiples Of</span>
+    <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate.currency.inMultiplesOf }}</span>
+  </div>
 
   <h3 class="mat-h3" fxFlexFill>Terms</h3>
   <mat-divider fxFlexFill></mat-divider>
@@ -127,12 +127,14 @@
 
 
   <h3 class="mat-h3" fxFlexFill>Interest Rate Chart</h3>
+
   <mat-divider fxFlexFill></mat-divider>
 
-  <div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
-    <div fxFlexFill>
+  <div class="margin-b" fxFlexFill fxLayout="column">
+
+    <div fxFlexFill *ngIf="recurringDepositsAccountProductTemplate?.accountChart.name">
       <span fxFlex="40%">Name:</span>
-      <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.name | date }}</span>
+      <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.name }}</span>
     </div>
 
     <div fxFlexFill>
@@ -156,43 +158,120 @@
         fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount ? 'Yes' : 'No' }}</span>
     </div>
 
-    <table mat-table [dataSource]="interestRateChartData">
+    <table class="mat-elevation-z1 irc-table" mat-table [dataSource]="interestRateChartData" multiTemplateDataRows>
 
       <ng-container matColumnDef="period">
         <th mat-header-cell *matHeaderCellDef> Period </th>
-        <td mat-cell *matCellDef="let rateChart">
-          {{rateChart.fromPeriod}}-{{rateChart.toPeriod}}&nbsp;{{rateChart.periodType.value}}</td>
+        <td mat-cell *matCellDef="let chartSlab">
+          {{chartSlab.fromPeriod}}-{{chartSlab.toPeriod}}&nbsp;{{chartSlab.periodType.value}}</td>
       </ng-container>
 
       <ng-container matColumnDef="amountRange">
         <th mat-header-cell *matHeaderCellDef> Amount Range </th>
-        <td mat-cell *matCellDef="let rateChart">{{rateChart.amountRangeFrom}}-{{rateChart.amountRangeTo}}</td>
+        <td mat-cell *matCellDef="let chartSlab">{{chartSlab.amountRangeFrom}}-{{chartSlab.amountRangeTo}}</td>
       </ng-container>
 
       <ng-container matColumnDef="interest">
         <th mat-header-cell *matHeaderCellDef> Interest </th>
-        <td mat-cell *matCellDef="let rateChart"> {{ rateChart.annualInterestRate }} </td>
+        <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.annualInterestRate }} </td>
       </ng-container>
 
       <ng-container matColumnDef="description">
         <th mat-header-cell *matHeaderCellDef> Description </th>
-        <td mat-cell *matCellDef="let rateChart"> {{ rateChart.description }} </td>
+        <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.description }} </td>
       </ng-container>
 
-      <ng-container matColumnDef="incentives">
-        <th mat-header-cell *matHeaderCellDef> Incentives </th>
-        <td mat-cell *matCellDef="let rateChart">
-          <button mat-button color="primary">
-            <fa-icon icon="eye"></fa-icon>&nbsp;&nbsp;
-            View Incentives
+      <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">
+            <span *ngIf="expandChartSlabIndex !== chartSlabIndex">
+              <fa-icon icon="eye"></fa-icon>&nbsp;&nbsp;
+              View Incentives
+            </span>
+            <span *ngIf="expandChartSlabIndex === chartSlabIndex">
+              <fa-icon icon="eye-slash"></fa-icon>&nbsp;&nbsp;
+              Hide Incentives
+            </span>
           </button>
         </td>
       </ng-container>
 
-      <tr mat-header-row *matHeaderRowDef="interestRateChartDisplayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: interestRateChartDisplayedColumns"></tr>
+      <ng-container matColumnDef="incentives">
+        <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex"
+          [attr.colspan]="chartSlabsDisplayedColumns.length">
+
+          <div fxLayout="row wrap" fxFlexFill class="incentives"
+            [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex ? 'expanded' : 'collapsed'">
+
+            <mat-card fxLayout="row wrap" fxFlexFill>
+
+              <h4 class="m-b-10" fxFlex="13%">
+                Incentives
+              </h4>
+
+              <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>
+                  <td mat-cell *matCellDef="let incentive">
+                    {{ incentive.entityType.value }}
+                  </td>
+                </ng-container>
+
+                <ng-container matColumnDef="attributeName">
+                  <th mat-header-cell *matHeaderCellDef> Attribute Name </th>
+                  <td mat-cell *matCellDef="let incentive">
+                    {{ incentive.attributeName.value }}
+                  </td>
+                </ng-container>
+
+                <ng-container matColumnDef="conditionType">
+                  <th mat-header-cell *matHeaderCellDef> Condition Type </th>
+                  <td mat-cell *matCellDef="let incentive">
+                    {{ incentive.conditionType.value | titlecase }}
+                  </td>
+                </ng-container>
+
+                <ng-container matColumnDef="attributeValue">
+                  <th mat-header-cell *matHeaderCellDef> Attribute Value </th>
+                  <td mat-cell *matCellDef="let incentive" [ngSwitch]="incentive.attributeName">
+                    {{ incentive.attributeValueDesc }}
+                  </td>
+                </ng-container>
+
+                <ng-container matColumnDef="incentiveType">
+                  <th mat-header-cell *matHeaderCellDef> Incentive Type </th>
+                  <td mat-cell *matCellDef="let incentive">
+                    {{ incentive.incentiveType.value }}
+                  </td>
+                </ng-container>
+
+                <ng-container matColumnDef="amount">
+                  <th mat-header-cell *matHeaderCellDef> Interest </th>
+                  <td mat-cell *matCellDef="let incentive">
+                    {{ incentive.amount }}
+                  </td>
+                </ng-container>
+
+                <tr mat-header-row *matHeaderRowDef="incentivesDisplayedColumns"></tr>
+                <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns;"></tr>
+
+              </table>
+
+            </mat-card>
+          </div>
+        </td>
+      </ng-container>
+
+      <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>
 
     </table>
+
   </div>
 
   <div fxFlexFill *ngIf="recurringDepositAccountData.charges.length" fxLayout="row wrap" fxLayout.lt-md="column">
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.scss b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.scss
index 87258dacb..6161bd600 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.scss
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.scss
@@ -22,3 +22,32 @@ mat-divider {
 .margin-t {
   margin-top: 1em;
 }
+
+.margin-t {
+  margin-top: 1em;
+}
+
+.margin-b {
+  margin-bottom: 0.25em;
+}
+
+.irc-table {
+  width: 100%;
+
+  tr.incentives-row {
+    height: 0;
+
+    > td {
+      padding: 0;
+    }
+
+    .incentives {
+      overflow: hidden;
+    }
+
+    .mat-card {
+      border-radius: 0;
+    }
+  }
+}
+
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.ts b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.ts
index 915da3d59..a3ce0ae92 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.ts
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.ts
@@ -1,5 +1,6 @@
 /** Angular Imports */
-import { Component, OnInit, Input, Output, EventEmitter, OnChanges } from '@angular/core';
+import { Component, Input, Output, EventEmitter, OnChanges } from '@angular/core';
+import { animate, state, style, transition, trigger } from '@angular/animations';
 
 /**
  * Recurring Deposit Preview Step
@@ -7,9 +8,16 @@ import { Component, OnInit, Input, Output, EventEmitter, OnChanges } from '@angu
 @Component({
   selector: 'mifosx-recurring-deposits-account-preview-step',
   templateUrl: './recurring-deposits-account-preview-step.component.html',
-  styleUrls: ['./recurring-deposits-account-preview-step.component.scss']
+  styleUrls: ['./recurring-deposits-account-preview-step.component.scss'],
+  animations: [
+    trigger('expandChartSlab', [
+      state('collapsed', style({ height: '0px', minHeight: '0' })),
+      state('expanded', style({ height: '*' })),
+      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
+    ])
+  ]
 })
-export class RecurringDepositsAccountPreviewStepComponent implements OnInit, OnChanges {
+export class RecurringDepositsAccountPreviewStepComponent implements OnChanges {
 
   /** Input Data */
   @Input() recurringDepositsAccountTemplate: any;
@@ -20,10 +28,16 @@ export class RecurringDepositsAccountPreviewStepComponent implements OnInit, OnC
 
   /** Charges Displayed Columns */
   chargesDisplayedColumns: string[] = ['name', 'chargeCalculationType', 'amount', 'chargeTimeType', 'date', 'repaymentsEvery'];
-  /** Interest Rate Chart Displayed Columns */
-  interestRateChartDisplayedColumns: string[] = ['period', 'amountRange', 'interest', 'description', 'incentives'];
   /** Interest Rate Chart Data */
-  interestRateChartData: any;
+  interestRateChartData: any = [];
+  /** Columns to be displayed in interest rate chart table. */
+  chartSlabsDisplayedColumns: any[] = ['period', 'amountRange', 'interest', 'description', 'actions'];
+  /** Columns to be displayed in incentives sub-table. */
+  incentivesDisplayedColumns: string[] = ['entityType', 'attributeName', 'conditionType', 'attributeValue', 'incentiveType', 'amount'];
+  /** Additional Column to disblac incentives table  */
+  chartSlabsIncentivesDisplayedColumns: string[] = ['incentives'];
+  /** Expand Chart Slab Index used in the view */
+  expandChartSlabIndex: number;
 
   constructor() { }
 
@@ -33,9 +47,4 @@ export class RecurringDepositsAccountPreviewStepComponent implements OnInit, OnC
     }
   }
 
-  ngOnInit() {
-    this.interestRateChartData = [];
-  }
-
-
 }
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.html
index 4ee13c170..3df305050 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.html
@@ -1,42 +1,124 @@
 <div class="tab-container mat-typography">
 
+  <div fxLayoutAlign="start">
+    <div class="m-b-20">
+      <h3>All Interest Rates</h3>
+    </div>
+  </div>
+
   <div class="mat-elevation-z1 m-b-25">
 
-    <table mat-table [dataSource]="interestRateChartData">
+    <table mat-table [dataSource]="interestRateChartData" #chartsTable multiTemplateDataRows>
 
       <ng-container matColumnDef="period">
         <th mat-header-cell *matHeaderCellDef> Period </th>
-        <td mat-cell *matCellDef="let rateChart">
-          {{rateChart.fromPeriod}}-{{rateChart.toPeriod}}&nbsp;{{rateChart.periodType.value}}</td>
+        <td mat-cell *matCellDef="let chartSlab">
+          {{chartSlab.fromPeriod}}-{{chartSlab.toPeriod}}&nbsp;{{chartSlab.periodType.value}}</td>
       </ng-container>
 
       <ng-container matColumnDef="amountRange">
         <th mat-header-cell *matHeaderCellDef> Amount Range </th>
-        <td mat-cell *matCellDef="let rateChart">{{rateChart.amountRangeFrom}}-{{rateChart.amountRangeTo}}</td>
+        <td mat-cell *matCellDef="let chartSlab">{{chartSlab.amountRangeFrom}}-{{chartSlab.amountRangeTo}}</td>
       </ng-container>
 
       <ng-container matColumnDef="interest">
         <th mat-header-cell *matHeaderCellDef> Interest </th>
-        <td mat-cell *matCellDef="let rateChart"> {{ rateChart.annualInterestRate }} </td>
+        <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.annualInterestRate }} </td>
       </ng-container>
 
       <ng-container matColumnDef="description">
         <th mat-header-cell *matHeaderCellDef> Description </th>
-        <td mat-cell *matCellDef="let rateChart"> {{ rateChart.description }} </td>
+        <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.description }} </td>
       </ng-container>
 
-      <ng-container matColumnDef="incentives">
-        <th mat-header-cell *matHeaderCellDef> Incentives </th>
-        <td mat-cell *matCellDef="let rateChart">
-          <button mat-button color="primary">
-            <fa-icon icon="eye"></fa-icon>&nbsp;&nbsp;
-            View Incentives
+      <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">
+            <span *ngIf="expandChartSlabIndex !== chartSlabIndex">
+              <fa-icon icon="eye"></fa-icon>&nbsp;&nbsp;
+              View Incentives
+            </span>
+            <span *ngIf="expandChartSlabIndex === chartSlabIndex">
+              <fa-icon icon="eye-slash"></fa-icon>&nbsp;&nbsp;
+              Hide Incentives
+            </span>
           </button>
         </td>
       </ng-container>
 
-      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+      <ng-container matColumnDef="incentives">
+        <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex"
+          [attr.colspan]="chartSlabsDisplayedColumns.length">
+
+          <div fxLayout="row wrap" fxFlexFill class="incentives"
+            [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex ? 'expanded' : 'collapsed'">
+
+            <mat-card fxLayout="row wrap" fxFlexFill>
+
+              <h4 class="m-b-10" fxFlex="13%">
+                Incentives
+              </h4>
+
+              <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>
+                  <td mat-cell *matCellDef="let incentive">
+                    {{ incentive.entityType.value }}
+                  </td>
+                </ng-container>
+
+                <ng-container matColumnDef="attributeName">
+                  <th mat-header-cell *matHeaderCellDef> Attribute Name </th>
+                  <td mat-cell *matCellDef="let incentive">
+                    {{ incentive.attributeName.value }}
+                  </td>
+                </ng-container>
+
+                <ng-container matColumnDef="conditionType">
+                  <th mat-header-cell *matHeaderCellDef> Condition Type </th>
+                  <td mat-cell *matCellDef="let incentive">
+                    {{ incentive.conditionType.value | titlecase }}
+                  </td>
+                </ng-container>
+
+                <ng-container matColumnDef="attributeValue">
+                  <th mat-header-cell *matHeaderCellDef> Attribute Value </th>
+                  <td mat-cell *matCellDef="let incentive" [ngSwitch]="incentive.attributeName">
+                    {{ incentive.attributeValueDesc }}
+                  </td>
+                </ng-container>
+
+                <ng-container matColumnDef="incentiveType">
+                  <th mat-header-cell *matHeaderCellDef> Incentive Type </th>
+                  <td mat-cell *matCellDef="let incentive">
+                    {{ incentive.incentiveType.value }}
+                  </td>
+                </ng-container>
+
+                <ng-container matColumnDef="amount">
+                  <th mat-header-cell *matHeaderCellDef> Interest </th>
+                  <td mat-cell *matCellDef="let incentive">
+                    {{ incentive.amount }}
+                  </td>
+                </ng-container>
+
+                <tr mat-header-row *matHeaderRowDef="incentivesDisplayedColumns"></tr>
+                <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns;"></tr>
+
+              </table>
+
+            </mat-card>
+          </div>
+        </td>
+      </ng-container>
+
+      <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>
 
     </table>
 
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.scss b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.scss
index be9328c80..21f16ed44 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.scss
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.scss
@@ -6,5 +6,21 @@
   }
   table {
     width: 100%;
+
+    tr.incentives-row {
+      height: 0;
+
+      > td {
+        padding: 0;
+      }
+
+      .incentives {
+        overflow: hidden;
+      }
+
+      .mat-card {
+        border-radius: 0;
+      }
+    }
   }
 }
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.ts b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.ts
index cac0d811e..b096ce3c8 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.ts
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.ts
@@ -1,7 +1,7 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
-import { MatTableDataSource } from '@angular/material';
+import { Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { animate, state, style, transition, trigger } from '@angular/animations';
 
 /**
  * Interest Rate Chart Tab Component.
@@ -9,16 +9,28 @@ import { ActivatedRoute } from '@angular/router';
 @Component({
   selector: 'mifosx-interest-rate-chart-tab',
   templateUrl: './interest-rate-chart-tab.component.html',
-  styleUrls: ['./interest-rate-chart-tab.component.scss']
+  styleUrls: ['./interest-rate-chart-tab.component.scss'],
+  animations: [
+    trigger('expandChartSlab', [
+      state('collapsed', style({ height: '0px', minHeight: '0' })),
+      state('expanded', style({ height: '*' })),
+      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
+    ])
+  ]
 })
-export class InterestRateChartTabComponent implements OnInit {
+export class InterestRateChartTabComponent {
 
   /** Interest Rate Chart Data */
-  interestRateChartData: any;
+  interestRateChartData: any = [];
   /** Columns to be displayed in interest rate chart table. */
-  displayedColumns: string[] = ['period', 'amountRange', 'interest', 'description', 'incentives'];
-  /** Data source for interest rate chart table. */
-  dataSource: MatTableDataSource<any>;
+  chartSlabsDisplayedColumns: any[] = ['period', 'amountRange', 'interest', 'description', 'actions'];
+  /** Columns to be displayed in incentives sub-table. */
+  incentivesDisplayedColumns: string[] = ['entityType', 'attributeName', 'conditionType', 'attributeValue', 'incentiveType', 'amount'];
+  /** Additional Column to display in incentives table  */
+  chartSlabsIncentivesDisplayedColumns: string[] = ['incentives'];
+  /** Expand Chart Slab Index used in the view */
+  expandChartSlabIndex: number;
+
 
   /**
    * Retrieves recurring deposits account data from `resolve`.
@@ -30,7 +42,4 @@ export class InterestRateChartTabComponent implements OnInit {
     });
   }
 
-  ngOnInit() {
-  }
-
 }