feat: create fixed deposit account page (#1001)

Fixes: #226

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

@@ -0,0 +1,110 @@
+<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+  <mat-form-field fxFlex="48%">
+    <mat-label>Charge</mat-label>
+    <mat-select #charge>
+      <mat-option *ngFor="let charge of chargeData | chargesFilter:chargesDataSource:currencyCode.value"
+        [value]="charge">
+        {{ charge.name }}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+
+  <div fxFlex="48%" fxFlexAlign="center">
+    <button type="button" mat-raised-button color="primary" (click)="addCharge(charge)" [disabled]="!charge.value">
+      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      Add
+    </button>
+  </div>
+
+  <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="chargesDataSource" [hidden]="chargesDataSource.length === 0">
+
+    <ng-container matColumnDef="name">
+      <th mat-header-cell *matHeaderCellDef> Name </th>
+      <td mat-cell *matCellDef="let charge">
+        {{ charge.name + ', ' + charge.currency.displaySymbol }}
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="chargeCalculationType">
+      <th mat-header-cell *matHeaderCellDef> Type </th>
+      <td mat-cell *matCellDef="let charge">
+        {{ charge.chargeCalculationType.value }}
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="amount">
+      <th mat-header-cell *matHeaderCellDef> Amount </th>
+      <td mat-cell *matCellDef="let charge">
+        {{ charge.amount }}
+        <button mat-icon-button color="primary" (click)="editChargeAmount(charge)">
+          <fa-icon icon="pen"></fa-icon>
+        </button>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="chargeTimeType">
+      <th mat-header-cell *matHeaderCellDef> Collected On </th>
+      <td mat-cell *matCellDef="let charge">
+        {{ charge.chargeTimeType.value }}
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="date">
+      <th mat-header-cell *matHeaderCellDef> Date </th>
+      <td mat-cell *matCellDef="let charge">
+        <span *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'">
+          {{(charge.dueDate | date) || 'Unassigned'}}
+        </span>
+        <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
+          {{charge.feeOnMonthDay ? ([2000].concat(charge.feeOnMonthDay) | date: 'dd MMMM') : 'Unassigned'}}
+        </span>
+        <span *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'
+                || charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee')">
+          N/A
+        </span>
+        <button mat-icon-button color="primary" *ngIf="charge.chargeTimeType.value === 'Weekly Fee' || charge.chargeTimeType.value === 'Annual Fee'
+                      || charge.chargeTimeType.value === 'Specified due date'" (click)="editChargeDate(charge)">
+          <fa-icon icon="pen"></fa-icon>
+        </button>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="repaymentsEvery">
+      <th mat-header-cell *matHeaderCellDef> Repayments Every </th>
+      <td mat-cell *matCellDef="let charge">
+        {{ charge.feeInterval || 'Not Provided' }}
+        <button mat-icon-button color="primary"
+          *ngIf="charge.chargeTimeType.value === 'Weekly Fee' || charge.chargeTimeType.value === 'Monthly Fee'"
+          (click)="editChargeFeeInterval(charge)">
+          <fa-icon icon="pen"></fa-icon>
+        </button>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="action">
+      <th mat-header-cell *matHeaderCellDef> Actions </th>
+      <td mat-cell *matCellDef="let charge">
+        <button mat-icon-button color="warn" (click)="deleteCharge(charge)">
+          <fa-icon icon="trash"></fa-icon>
+        </button>
+      </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+  </table>
+
+</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 [disabled]="!fixedDepositAccountFormValid">
+    Next&nbsp;&nbsp;
+    <fa-icon icon="arrow-right"></fa-icon>
+  </button>
+</div>

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-charges-step/fixed-deposit-account-charges-step.component.scss

@@ -0,0 +1,11 @@
+table {
+  width: 100%;
+}
+
+.mat-elevation-z1 {
+  margin: 1em 0 1.5em 0;
+}
+
+.margin-t {
+  margin-top: 1em;
+}

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-charges-step/fixed-deposit-account-charges-step.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FixedDepositAccountChargesStepComponent } from './fixed-deposit-account-charges-step.component';
+
+describe('FixedDepositAccountChargesStepComponent', () => {
+  let component: FixedDepositAccountChargesStepComponent;
+  let fixture: ComponentFixture<FixedDepositAccountChargesStepComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FixedDepositAccountChargesStepComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FixedDepositAccountChargesStepComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-charges-step/fixed-deposit-account-charges-step.component.ts

@@ -0,0 +1,181 @@
+/** Angular Imports */
+import { Component, OnInit, Input } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { MatDialog } from '@angular/material';
+
+/** Dialog Components */
+import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
+
+/** Custom Services */
+import { DatePipe } from '@angular/common';
+import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
+import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
+import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
+
+/**
+ * Fixed Deposit Account Charges Step
+ */
+@Component({
+  selector: 'mifosx-fixed-deposit-account-charges-step',
+  templateUrl: './fixed-deposit-account-charges-step.component.html',
+  styleUrls: ['./fixed-deposit-account-charges-step.component.scss']
+})
+export class FixedDepositAccountChargesStepComponent implements OnInit {
+
+  /** Fixed deposits account template */
+  @Input() fixedDepositsAccountTemplate: any;
+  /** Fixed deposits account and product template */
+  @Input() fixedDepositsAccountProductTemplate: any;
+  /** Validity of fixed depsits account form */
+  @Input() fixedDepositAccountFormValid: boolean;
+  /** Currency Code */
+  @Input() currencyCode: FormControl;
+
+  /** Charges Data */
+  chargeData: any;
+  /** Charges Data Source */
+  chargesDataSource: {}[];
+  /** Charges table columns */
+  displayedColumns: string[] = ['name', 'chargeCalculationType', 'amount', 'chargeTimeType', 'date', 'repaymentsEvery', 'action'];
+  /** Component is pristine if there has been no changes by user interaction */
+  pristine = true;
+
+  /**
+   * @param {MatDialog} dialog Mat Dialog
+   * @param {DatePipe} datePipe Date Pipe
+   */
+  constructor(public dialog: MatDialog,
+              private datePipe: DatePipe) { }
+
+  ngOnInit() {
+    this.chargeData = this.fixedDepositsAccountTemplate.chargeOptions;
+    this.chargesDataSource = [];
+    this.currencyCode.valueChanges.subscribe(() => this.chargesDataSource = []);
+  }
+
+  /**
+   * Add a charge
+   */
+  addCharge(charge: any) {
+    this.chargesDataSource = this.chargesDataSource.concat([charge.value]);
+    charge.value = '';
+  }
+
+  /**
+   * Edits the Charge Amount
+   * @param {any} charge Charge
+   */
+  editChargeAmount(charge: any) {
+    const formfields: FormfieldBase[] = [
+      new InputBase({
+        controlName: 'amount',
+        label: 'Amount',
+        value: charge.amount,
+        type: 'number',
+        required: false
+      }),
+    ];
+    const data = {
+      title: 'Edit Charge Amount',
+      layout: { addButtonText: 'Confirm' },
+      formfields: formfields
+    };
+    const editChargeAmountDialogRef = this.dialog.open(FormDialogComponent, { data });
+    editChargeAmountDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.data) {
+        const newCharge = { ...charge, amount: response.data.value.amount };
+        this.chargesDataSource.splice(this.chargesDataSource.indexOf(charge), 1, newCharge);
+        this.chargesDataSource = this.chargesDataSource.concat([]);
+      }
+    });
+    this.pristine = false;
+  }
+
+  /**
+   * Edits the Charge Date
+   * @param {any} charge Charge
+   */
+  editChargeDate(charge: any) {
+    const formfields: FormfieldBase[] = [
+      new DatepickerBase({
+        controlName: 'date',
+        label: 'Date',
+        value: charge.dueDate || charge.feeOnMonthDay || '',
+        type: 'datetime-local',
+        required: false
+      }),
+    ];
+    const data = {
+      title: 'Edit Charge Date',
+      layout: { addButtonText: 'Confirm' },
+      formfields: formfields
+    };
+    const editChargeDateDialogRef = this.dialog.open(FormDialogComponent, { data });
+    editChargeDateDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.data) {
+        let newCharge: any;
+        const dateFormat = 'dd MMMM yyyy';
+        const date = this.datePipe.transform(response.data.value.date, dateFormat);
+        switch (charge.chargeTimeType.value) {
+          case 'Specified due date':
+          case 'Weekly Fee':
+            newCharge = { ...charge, dueDate: date };
+            break;
+          case 'Annual Fee':
+            newCharge = { ...charge, feeOnMonthDay: date };
+            break;
+        }
+        this.chargesDataSource.splice(this.chargesDataSource.indexOf(charge), 1, newCharge);
+        this.chargesDataSource = this.chargesDataSource.concat([]);
+      }
+    });
+    this.pristine = false;
+  }
+
+  /**
+   * Edits the Charge Fee Interval
+   * @param {any} charge Charge
+   */
+  editChargeFeeInterval(charge: any) {
+    const formfields: FormfieldBase[] = [
+      new InputBase({
+        controlName: 'feeInterval',
+        label: 'Fee Interval',
+        value: charge.feeInterval,
+        type: 'text',
+        required: false
+      }),
+    ];
+    const data = {
+      title: 'Edit Charge Fee Interval',
+      layout: { addButtonText: 'Confirm' },
+      formfields: formfields
+    };
+    const editChargeFeeIntervalDialogRef = this.dialog.open(FormDialogComponent, { data });
+    editChargeFeeIntervalDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.data) {
+        const newCharge = { ...charge, feeInterval: response.data.value.feeInterval };
+        this.chargesDataSource.splice(this.chargesDataSource.indexOf(charge), 1, newCharge);
+        this.chargesDataSource = this.chargesDataSource.concat([]);
+      }
+    });
+    this.pristine = false;
+  }
+
+  /**
+   * Delete a particular charge
+   * @param charge Charge
+   */
+  deleteCharge(charge: any) {
+    this.chargesDataSource.splice(this.chargesDataSource.indexOf(charge), 1);
+    this.chargesDataSource = this.chargesDataSource.concat([]);
+  }
+
+  /**
+   * Returns Fixed Deposits Account Charges Form
+   */
+  get fixedDepositAccountCharges() {
+    return { charges: this.chargesDataSource };
+  }
+
+}

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

@@ -0,0 +1,33 @@
+<form [formGroup]="fixedDepositAccountCurrencyForm">
+
+  <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Currency</mat-label>
+      <input type="text" matInput formControlName="currencyCode">
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Decimal Places</mat-label>
+      <input type="number" matInput formControlName="decimalPlaces">
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Currency Multiple</mat-label>
+      <input type="number" matInput formControlName="currencyMultiple">
+    </mat-form-field>
+
+  </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>
+
+</form>

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-currency-step/fixed-deposit-account-currency-step.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FixedDepositAccountCurrencyStepComponent } from './fixed-deposit-account-currency-step.component';
+
+describe('FixedDepositAccountCurrencyStepComponent', () => {
+  let component: FixedDepositAccountCurrencyStepComponent;
+  let fixture: ComponentFixture<FixedDepositAccountCurrencyStepComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FixedDepositAccountCurrencyStepComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FixedDepositAccountCurrencyStepComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-currency-step/fixed-deposit-account-currency-step.component.ts

@@ -0,0 +1,47 @@
+/** Angular Imports */
+import { Component, OnChanges, Input } from '@angular/core';
+import { FormGroup, FormBuilder } from '@angular/forms';
+
+/**
+ * Fixed Deposit Account Currency Step
+ */
+@Component({
+  selector: 'mifosx-fixed-deposit-account-currency-step',
+  templateUrl: './fixed-deposit-account-currency-step.component.html',
+  styleUrls: ['./fixed-deposit-account-currency-step.component.scss']
+})
+export class FixedDepositAccountCurrencyStepComponent implements OnChanges {
+
+  /** Fixed deposits account template */
+  @Input() fixedDepositsAccountTemplate: any;
+  /** Fixed deposits account and product template */
+  @Input() fixedDepositsAccountProductTemplate: any;
+
+  /** Fixed Deposit Account Currency Form */
+  fixedDepositAccountCurrencyForm: FormGroup;
+  /** Currency Data */
+  currencyData: any;
+
+  constructor(private formBuilder: FormBuilder) {
+    this.createFixedDepositAccountCurrencyForm();
+  }
+
+  ngOnChanges() {
+    if (this.fixedDepositsAccountProductTemplate) {
+      this.fixedDepositAccountCurrencyForm.patchValue({
+        'currencyCode': this.fixedDepositsAccountProductTemplate.currency.code,
+        'decimalPlaces': this.fixedDepositsAccountProductTemplate.currency.decimalPlaces,
+        'currencyMultiple': this.fixedDepositsAccountProductTemplate.currency.inMultiplesOf
+      });
+    }
+  }
+
+  createFixedDepositAccountCurrencyForm() {
+    this.fixedDepositAccountCurrencyForm = this.formBuilder.group({
+      'currencyCode': [{ value: '', disabled: true}],
+      'decimalPlaces': [{ value: '', disabled: true }],
+      'currencyMultiple': [{ value: '', disabled: true }]
+    });
+  }
+
+}

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

@@ -0,0 +1,50 @@
+<form [formGroup]="fixedDepositAccountDetailsForm">
+
+  <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Product Name</mat-label>
+      <mat-select formControlName="productId" required>
+        <mat-option *ngFor="let product of productData" [value]="product.id">
+          {{ product.name }}
+        </mat-option>
+      </mat-select>
+      <mat-error>
+        Product Name is <strong>required</strong>
+      </mat-error>
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Submitted On</mat-label>
+      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submittedOnDatePicker"
+        formControlName="submittedOnDate" required>
+      <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
+      <mat-datepicker #submittedOnDatePicker></mat-datepicker>
+      <mat-error>
+        Submission Date is <strong>required</strong>
+      </mat-error>
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Field Officer</mat-label>
+      <mat-select formControlName="fieldOfficerId">
+        <mat-option *ngFor="let officer of fieldOfficerData" [value]="officer.id">
+          {{ officer.displayName }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+
+  </div>
+
+  <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+    <button mat-raised-button matStepperPrevious disabled>
+      <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>
+
+</form>

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-details-step/fixed-deposit-account-details-step.component.scss

@@ -0,0 +1,3 @@
+.margin-t {
+  margin-top: 1em;
+}

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-details-step/fixed-deposit-account-details-step.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FixedDepositAccountDetailsStepComponent } from './fixed-deposit-account-details-step.component';
+
+describe('FixedDepositAccountDetailsStepComponent', () => {
+  let component: FixedDepositAccountDetailsStepComponent;
+  let fixture: ComponentFixture<FixedDepositAccountDetailsStepComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FixedDepositAccountDetailsStepComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FixedDepositAccountDetailsStepComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-details-step/fixed-deposit-account-details-step.component.ts

@@ -0,0 +1,90 @@
+/** Angular Imports */
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+
+/** Custom Services */
+import { FixedDepositsService } from '../../fixed-deposits.service';
+
+/**
+ * Fixed Deposits Account Details Step
+ */
+@Component({
+  selector: 'mifosx-fixed-deposit-account-details-step',
+  templateUrl: './fixed-deposit-account-details-step.component.html',
+  styleUrls: ['./fixed-deposit-account-details-step.component.scss']
+})
+export class FixedDepositAccountDetailsStepComponent implements OnInit {
+
+  /** Fixed Deposits Account Template */
+  @Input() fixedDepositsAccountTemplate: any;
+
+  /** Minimum date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum date allowed. */
+  maxDate = new Date();
+  /** Product Data */
+  productData: any;
+  /** Field Officer Data */
+  fieldOfficerData: any;
+  /** Fixed Deposits Account Details Form */
+  fixedDepositAccountDetailsForm: FormGroup;
+
+  /** Fixed Deposits Account Template with product data  */
+  @Output() fixedDepositsAccountProductTemplate = new EventEmitter();
+
+  /**
+   * Sets fixed deposits account details form.
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {FixedDepositsService} fixedDepositsService Fixed Deposits Service.
+   */
+  constructor(private formBuilder: FormBuilder,
+              private fixedDepositsService: FixedDepositsService) {
+    this.createFixedDepositsAccountDetailsForm();
+  }
+
+  ngOnInit() {
+    this.buildDependencies();
+    if (this.fixedDepositsAccountTemplate) {
+      this.productData = this.fixedDepositsAccountTemplate.productOptions;
+    }
+  }
+
+  /**
+   * Creates fixed deposits account details form.
+   */
+  createFixedDepositsAccountDetailsForm() {
+    this.fixedDepositAccountDetailsForm = this.formBuilder.group({
+      'productId': ['', Validators.required],
+      'submittedOnDate': ['', Validators.required],
+      'fieldOfficerId': ['']
+    });
+  }
+
+  /**
+   * Fetches fixed deposits account product template on productId value changes
+   */
+  buildDependencies() {
+    const clientId = this.fixedDepositsAccountTemplate.clientId;
+    this.fixedDepositAccountDetailsForm.get('productId').valueChanges.subscribe((productId: string) => {
+      this.fixedDepositsService.getFixedDepositsAccountTemplate(clientId, productId).subscribe((response: any) => {
+        this.fixedDepositsAccountProductTemplate.emit(response);
+        this.fieldOfficerData = response.fieldOfficerOptions;
+        this.fixedDepositAccountDetailsForm.get('fieldOfficerId').patchValue('');
+      });
+    });
+  }
+
+  /**
+   * Returns fixed deposits account details form value.
+   */
+  get fixedDepositAccountDetails() {
+    const fixedDepositAccountDetails = this.fixedDepositAccountDetailsForm.value;
+    for (const key in fixedDepositAccountDetails) {
+      if (fixedDepositAccountDetails[key] === '') {
+        delete fixedDepositAccountDetails[key];
+      }
+    }
+    return fixedDepositAccountDetails;
+  }
+
+}

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

@@ -0,0 +1,149 @@
+<div fxLayout="column" fxLayoutGap="2%">
+
+  <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate?.accountChart.name">
+    <span fxFlex="40%">Name:</span>
+    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate.accountChart.name }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Valid from Date:</span>
+    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.fromDate | date }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate?.accountChart.endDate">
+    <span fxFlex="40%">End Date:</span>
+    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.endDate | date }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate?.accountChart.description">
+    <span fxFlex="40%">Description:</span>
+    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.description }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Primary Grouping by Amount:</span>
+    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount ? 'Yes' : 'No' }}</span>
+  </div>
+
+  <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 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 chartSlab">{{chartSlab.amountRangeFrom}}-{{chartSlab.amountRangeTo}}</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 chartSlab"> {{ chartSlab.description }} </td>
+    </ng-container>
+
+    <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>
+
+    <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 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>

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

@@ -0,0 +1,23 @@
+.margin-t {
+  margin-top: 2em;
+}
+
+table {
+  width: 100%;
+
+  tr.incentives-row {
+    height: 0;
+
+    > td {
+      padding: 0;
+    }
+
+    .incentives {
+      overflow: hidden;
+    }
+
+    .mat-card {
+      border-radius: 0;
+    }
+  }
+}

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FixedDepositAccountInterestRateChartStepComponent } from './fixed-deposit-account-interest-rate-chart-step.component';
+
+describe('FixedDepositAccountInterestRateChartStepComponent', () => {
+  let component: FixedDepositAccountInterestRateChartStepComponent;
+  let fixture: ComponentFixture<FixedDepositAccountInterestRateChartStepComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FixedDepositAccountInterestRateChartStepComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FixedDepositAccountInterestRateChartStepComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,50 @@
+/** Angular Imports */
+import { Component, Input, OnChanges, ViewChild } from '@angular/core';
+import { MatTableDataSource, MatTable } from '@angular/material';
+import { animate, state, style, transition, trigger } from '@angular/animations';
+
+/**
+ * Fixed Deposits Account Interest Rate Chart Step
+ */
+@Component({
+  selector: 'mifosx-fixed-deposit-account-interest-rate-chart-step',
+  templateUrl: './fixed-deposit-account-interest-rate-chart-step.component.html',
+  styleUrls: ['./fixed-deposit-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 FixedDepositAccountInterestRateChartStepComponent implements OnChanges {
+
+  /** Fixed deposits account template */
+  @Input() fixedDepositsAccountTemplate: any;
+  /** Fixed deposits account and product template */
+  @Input() fixedDepositsAccountProductTemplate: any;
+
+  /** Interest Rate Chart Data */
+  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;
+
+  @ViewChild('chartsTable') chartsTableRef: MatTable<Element>;
+
+  constructor() { }
+
+  ngOnChanges() {
+    if (this.fixedDepositsAccountProductTemplate) {
+      this.interestRateChartData = this.fixedDepositsAccountProductTemplate.accountChart.chartSlabs;
+      this.chartsTableRef.renderRows();
+    }
+  }
+
+}

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

@@ -0,0 +1,344 @@
+<div fxLayout="row wrap" fxLayout.lt-md="column">
+
+  <h3 class="mat-h3" fxFlexFill>Details</h3>
+
+  <mat-divider fxFlexFill></mat-divider>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Product</span>
+    <span fxFlex="60%">{{ fixedDepositAccountData.productId | find:fixedDepositsAccountTemplate.productOptions:'id':'name' }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Submitted On</span>
+    <span fxFlex="60%">{{ fixedDepositAccountData.submittedOnDate | date }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Field Officer</span>
+    <span fxFlex="60%">{{ (fixedDepositAccountData.fieldOfficerId | find:fixedDepositsAccountProductTemplate.fieldOfficerOptions:'id':'displayName') || 'Unassigned' }}</span>
+  </div>
+
+  <h3 class="mat-h3" fxFlexFill>Terms</h3>
+
+  <mat-divider fxFlexFill></mat-divider>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Fixed Deposit Amount:</span>
+    <span fxFlex="60%">{{ fixedDepositAccountData.depositAmount }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Deposit Period:</span>
+    <span fxFlex="60%">{{ fixedDepositAccountData.depositPeriod + ' ' + (fixedDepositAccountData.depositPeriodFrequencyId | find:fixedDepositsAccountProductTemplate.periodFrequencyTypeOptions:'id':'value') }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Currency</span>
+    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate.currency.code }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Currency Multiple</span>
+    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate.currency.inMultiplesOf }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Decimal Places</span>
+    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate.currency.decimalPlaces }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Interest Compounding Period:</span>
+    <span fxFlex="60%">{{ fixedDepositAccountData.interestCompoundingPeriodType | find:fixedDepositsAccountProductTemplate.interestCompoundingPeriodTypeOptions:'id':'value' }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Interest Posting Period:</span>
+    <span fxFlex="60%">{{ fixedDepositAccountData.interestPostingPeriodType | find:fixedDepositsAccountProductTemplate.interestPostingPeriodTypeOptions:'id':'value' }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Interest Calculated using:</span>
+    <span fxFlex="60%">{{ fixedDepositAccountData.interestCalculationType | find:fixedDepositsAccountProductTemplate.interestCalculationTypeOptions:'id':'value' }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Days in Year:</span>
+    <span fxFlex="60%">{{ fixedDepositAccountData.interestCalculationDaysInYearType | find:fixedDepositsAccountProductTemplate.interestCalculationDaysInYearTypeOptions:'id':'value' }}</span>
+  </div>
+
+  <h3 class="mat-h3" fxFlexFill>Settings</h3>
+
+  <mat-divider fxFlexFill></mat-divider>
+
+  <div fxFlexFill *ngIf="fixedDepositAccountData.lockinPeriodFrequency">
+    <span fxFlex="40%">Lock-in Period:</span>
+    <span fxFlex="60%">{{ fixedDepositAccountData.lockinPeriodFrequency + ' ' + (fixedDepositAccountData.lockinPeriodFrequencyType | find:fixedDepositsAccountProductTemplate.lockinPeriodFrequencyTypeOptions:'id':'value') }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate.minDepositTerm">
+    <span fxFlex="40%">Minimum Deposit Term:</span>
+    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate.minDepositTerm + ' ' + (fixedDepositsAccountProductTemplate.minDepositTermType?.value || '') }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate.inMultiplesOfDepositTerm">
+    <span fxFlex="40%">In Multiples Of:</span>
+    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate.inMultiplesOfDepositTerm + ' ' + (fixedDepositsAccountProductTemplate.inMultiplesOfDepositTermType?.value || '') }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate.maxDepositTerm">
+    <span fxFlex="40%">Maximum Deposit Term</span>
+    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate.maxDepositTerm + ' ' + (fixedDepositsAccountProductTemplate.maxDepositTermType?.value || '') }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Transfer Interest to Savings Account?</span>
+    <span fxFlex="60%">{{ fixedDepositAccountData.transferInterestToSavings ? 'Yes' : 'No' }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="fixedDepositAccountData.transferInterestToSavings">
+    <span fxFlex="40%">Linked Savings Account</span>
+    <span fxFlex="60%">{{ fixedDepositAccountData.linkAccountId | find:fixedDepositsAccountProductTemplate.savingsAccounts:'id':'accountNo' }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Apply Penal Interest (less):</span>
+    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate.preClosurePenalApplicable ? 'Yes' : 'No' }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate.preClosurePenalApplicable">
+    <span fxFlex="40%">Penal Interest (%):</span>
+    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate.preClosurePenalInterest + '% (' + (fixedDepositsAccountProductTemplate.preClosurePenalInterestOnType?.id) + ')' }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate.withHoldTax">
+    <span fxFlex="40%">Withhold Tax is Applicable:</span>
+    <span fxFlex="60%">{{ fixedDepositAccountData.withHoldTax ? 'Yes' : 'No' }}</span>
+  </div>
+
+  <h3 class="mat-h3" fxFlexFill>Interest Rate Chart</h3>
+
+  <mat-divider fxFlexFill></mat-divider>
+
+  <div class="margin-b" fxFlexFill fxLayout="column">
+
+    <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate?.accountChart.name">
+      <span fxFlex="40%">Name:</span>
+      <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.name }}</span>
+    </div>
+
+    <div fxFlexFill>
+      <span fxFlex="40%">Valid from Date:</span>
+      <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.fromDate | date }}</span>
+    </div>
+
+    <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate?.accountChart.endDate">
+      <span fxFlex="40%">End Date:</span>
+      <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.endDate | date }}</span>
+    </div>
+
+    <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate?.accountChart.description">
+      <span fxFlex="40%">Description:</span>
+      <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.description }}</span>
+    </div>
+
+    <div fxFlexFill>
+      <span fxFlex="40%">Primary Grouping by Amount:</span>
+      <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount ? 'Yes' : 'No' }}</span>
+    </div>
+
+    <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 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 chartSlab">{{chartSlab.amountRangeFrom}}-{{chartSlab.amountRangeTo}}</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 chartSlab"> {{ chartSlab.description }} </td>
+      </ng-container>
+  
+      <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>
+  
+      <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="fixedDepositAccountData.charges.length" fxLayout="row wrap" fxLayout.lt-md="column">
+
+    <h3 class="mat-h3" fxFlexFill>Charges</h3>
+
+    <mat-divider fxFlexFill></mat-divider>
+
+    <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="fixedDepositAccountData.charges">
+
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef> Name </th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.name + ', ' + charge.currency.displaySymbol }}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="chargeCalculationType">
+        <th mat-header-cell *matHeaderCellDef> Type </th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.chargeCalculationType.value }}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="amount">
+        <th mat-header-cell *matHeaderCellDef> Amount </th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.amount }}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="date">
+        <th mat-header-cell *matHeaderCellDef> Date </th>
+        <td mat-cell *matCellDef="let charge">
+          <span
+            *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'">
+            {{(charge.dueDate | date) || 'Unassigned'}}
+          </span>
+          <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
+            {{charge.feeOnMonthDay ? ([2000].concat(charge.feeOnMonthDay) | date: 'dd MMMM') : 'Unassigned'}}
+          </span>
+          <span
+            *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'
+              || charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee')">
+            N/A
+          </span>
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="repaymentsEvery">
+        <th mat-header-cell *matHeaderCellDef> Repayments Every </th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.feeInterval || 'Not Provided' }}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="chargeTimeType">
+        <th mat-header-cell *matHeaderCellDef> Collected On </th>
+        <td mat-cell *matCellDef="let charge">
+          {{ charge.chargeTimeType.value }}
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns;"></tr>
+
+    </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 [routerLink]="['../']">
+    Cancel
+  </button>
+  <button mat-raised-button color="primary" (click)="submit.emit()">
+    Submit
+  </button>
+</div>

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

@@ -0,0 +1,48 @@
+table {
+  width: 100%;
+}
+
+.mat-elevation-z1 {
+  margin: 1em 0 1.5em 0;
+}
+
+h2, h3, h4 {
+  margin: 0;
+  font-weight: 500;
+}
+
+span {
+  margin: 0.5em 0;
+}
+
+mat-divider {
+  margin: 0 0 0.5em 0;
+}
+
+.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;
+    }
+  }
+}

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FixedDepositAccountPreviewStepComponent } from './fixed-deposit-account-preview-step.component';
+
+describe('FixedDepositAccountPreviewStepComponent', () => {
+  let component: FixedDepositAccountPreviewStepComponent;
+  let fixture: ComponentFixture<FixedDepositAccountPreviewStepComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FixedDepositAccountPreviewStepComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FixedDepositAccountPreviewStepComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,53 @@
+/** Angular Imports */
+import { Component, OnInit, Input, Output, EventEmitter, OnChanges } from '@angular/core';
+import { animate, state, style, transition, trigger } from '@angular/animations';
+
+/**
+ * Fixed Deposit Preview Step
+ */
+@Component({
+  selector: 'mifosx-fixed-deposit-account-preview-step',
+  templateUrl: './fixed-deposit-account-preview-step.component.html',
+  styleUrls: ['./fixed-deposit-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 FixedDepositAccountPreviewStepComponent implements OnChanges {
+
+  /** Fixed Deposits Account Template */
+  @Input() fixedDepositsAccountTemplate: any;
+  /** Fixed Deposits Account Product Template */
+  @Input() fixedDepositsAccountProductTemplate: any;
+  /** Fixed Deposits Account Data */
+  @Input() fixedDepositAccountData: any;
+
+  /** Charges Displayed Columns */
+  chargesDisplayedColumns: string[] = ['name', 'chargeCalculationType', 'amount', 'chargeTimeType', 'date', 'repaymentsEvery'];
+  /** Interest Rate Chart Data */
+  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;
+
+  /** Form submission event */
+  @Output() submit = new EventEmitter();
+
+  constructor() { }
+
+  ngOnChanges() {
+    if (this.fixedDepositsAccountProductTemplate) {
+      this.interestRateChartData = this.fixedDepositsAccountProductTemplate.accountChart.chartSlabs;
+    }
+  }
+
+}

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

@@ -0,0 +1,147 @@
+<form [formGroup]="fixedDepositAccountSettingsForm">
+
+  <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+    <h4 fxFlex="98%" class="mat-h4">Lock-in Period</h4>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Frequency</mat-label>
+      <input type="number" matInput formControlName="lockinPeriodFrequency">
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Type</mat-label>
+      <mat-select formControlName="lockinPeriodFrequencyType">
+        <mat-option *ngFor="let lockinPeriodFrequencyType of lockinPeriodFrequencyTypeData"
+          [value]="lockinPeriodFrequencyType.id">
+          {{ lockinPeriodFrequencyType.value }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    <h4 fxFlex="98%" class="mat-h4">Minimum Deposit Term</h4>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Frequency</mat-label>
+      <input type="number" matInput formControlName="minDepositTerm" required>
+      <mat-error>
+        Minimum Deposit Term Frequency is <strong>required</strong>
+      </mat-error>
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Frequency Type</mat-label>
+      <mat-select formControlName="minDepositTermTypeId" required>
+        <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
+          {{ periodFrequencyType.value }}
+        </mat-option>
+      </mat-select>
+      <mat-error>
+        Minimum Deposit Term Frequency Type is <strong>required</strong>
+      </mat-error>
+    </mat-form-field>
+
+    <h4 fxFlex="98%" class="mat-h4">And thereafter, in Multiples of</h4>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Frequency</mat-label>
+      <input type="number" matInput formControlName="inMultiplesOfDepositTerm">
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Type</mat-label>
+      <mat-select formControlName="inMultiplesOfDepositTermTypeId">
+        <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
+          {{ periodFrequencyType.value }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    <h4 fxFlex="98%" class="mat-h4">Maximum Deposit Term</h4>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Frequency</mat-label>
+      <input type="number" matInput formControlName="maxDepositTerm">
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Type</mat-label>
+      <mat-select formControlName="maxDepositTermTypeId">
+        <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
+          {{ periodFrequencyType.value }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    <mat-divider fxFlex="98%"></mat-divider>
+
+    <h3 fxFlex="23%" class="mat-h3">Interest Transfer</h3>
+
+    <mat-checkbox fxFlex="32%" labelPosition="before" formControlName="transferInterestToSavings" class="margin-b">
+      Transfer Interest to Linked Savings Account?
+    </mat-checkbox>
+
+    <mat-form-field fxFlex="48%" *ngIf="fixedDepositAccountSettingsForm.contains('linkAccountId')" class="margin-b">
+      <mat-label>Link Savings Account</mat-label>
+      <mat-select formControlName="linkAccountId" required>
+        <mat-option *ngFor="let account of savingsAccountsData" [value]="account.id">
+          {{ account.accountNo }}
+        </mat-option>
+      </mat-select>
+      <mat-error>
+        Linked Savings Account is <strong>required</strong>
+      </mat-error>
+    </mat-form-field>
+
+    <mat-divider fxFlex="98%"></mat-divider>
+
+    <h4 fxFlex="23%" class="mat-h4">For Pre-mature closure</h4>
+
+    <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="preClosurePenalApplicable" class="margin-v">
+      Apply Penal Interest (less)
+    </mat-checkbox>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Penal Interest (%)</mat-label>
+      <input type="number" matInput formControlName="preClosurePenalInterest">
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Period</mat-label>
+      <mat-select formControlName="preClosurePenalInterestOnTypeId">
+        <mat-option *ngFor="let preClosurePenalInterestOnType of preClosurePenalInterestOnTypeData"
+          [value]="preClosurePenalInterestOnType.id">
+          {{ preClosurePenalInterestOnType.value }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    <ng-container *ngIf="fixedDepositAccountSettingsForm.controls.withHoldTax">
+
+      <mat-divider fxFlex="98%"></mat-divider>
+
+      <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="withHoldTax" class="margin-p">
+        Is Withhold Tax Applicable?
+      </mat-checkbox>
+  
+      <mat-form-field fxFlex="48%" *ngIf="fixedDepositAccountSettingsForm.value.withHoldTax" class="p-b-25">
+        <mat-label>Tax Group</mat-label>
+        <input matInput formControlName="taxGroupId">
+      </mat-form-field>
+
+    </ng-container>
+   
+  </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>
+
+</form>

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-settings-step/fixed-deposit-account-settings-step.component.scss

@@ -0,0 +1,28 @@
+h4 {
+  font-weight: 500;
+  margin: 1em 0;
+}
+
+h3 {
+  font-weight: 500;
+}
+
+mat-divider {
+  margin: 1em 0 2em 0;
+}
+
+.margin-v {
+  margin: 1em 0;
+}
+
+.margin-b {
+  margin: 0 0 1em 0;
+}
+
+.margin-t {
+  margin-top: 1em;
+}
+
+.margin-p {
+  margin-top: 1.7em;
+}

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-settings-step/fixed-deposit-account-settings-step.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FixedDepositAccountSettingsStepComponent } from './fixed-deposit-account-settings-step.component';
+
+describe('FixedDepositAccountSettingsStepComponent', () => {
+  let component: FixedDepositAccountSettingsStepComponent;
+  let fixture: ComponentFixture<FixedDepositAccountSettingsStepComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FixedDepositAccountSettingsStepComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FixedDepositAccountSettingsStepComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-settings-step/fixed-deposit-account-settings-step.component.ts

@@ -0,0 +1,131 @@
+/** Angular Imports */
+import { Component, OnInit, Input, OnChanges } from '@angular/core';
+import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
+
+/**
+ * Fixed Deposits Account Settings Step
+ */
+@Component({
+  selector: 'mifosx-fixed-deposit-account-settings-step',
+  templateUrl: './fixed-deposit-account-settings-step.component.html',
+  styleUrls: ['./fixed-deposit-account-settings-step.component.scss']
+})
+export class FixedDepositAccountSettingsStepComponent implements OnInit, OnChanges {
+
+  /** Fixed deposits account template */
+  @Input() fixedDepositsAccountTemplate: any;
+  /** Fixed deposits account and product template */
+  @Input() fixedDepositsAccountProductTemplate: any;
+
+  /** Minimum date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum date allowed. */
+  maxDate = new Date();
+  /** Fixed Deposits Account Settings Form */
+  fixedDepositAccountSettingsForm: FormGroup;
+  /** Lockin Period Frequency Type Data */
+  lockinPeriodFrequencyTypeData: any;
+  /** Period Frequency Type Data */
+  periodFrequencyTypeData: any;
+  /** Pre Closure Penal Data */
+  preClosurePenalInterestOnTypeData: any;
+  /** Savings Accounts Data */
+  savingsAccountsData: any;
+
+  /**
+   * @param {FormBuilder} formBuilder Form Builder
+   */
+  constructor(private formBuilder: FormBuilder) {
+    this.createFixedDepositAccountSettingsForm();
+    this.buildDependencies();
+  }
+
+  ngOnChanges() {
+    if (this.fixedDepositsAccountProductTemplate) {
+      this.fixedDepositAccountSettingsForm.patchValue({
+        'minDepositTerm': this.fixedDepositsAccountProductTemplate.minDepositTerm,
+        'minDepositTermTypeId': this.fixedDepositsAccountProductTemplate.minDepositTermType ? this.fixedDepositsAccountProductTemplate.minDepositTermType.id : '',
+        'inMultiplesOfDepositTerm': this.fixedDepositsAccountProductTemplate.inMultiplesOfDepositTerm,
+        'inMultiplesOfDepositTermTypeId': this.fixedDepositsAccountProductTemplate.inMultiplesOfDepositTermType ? this.fixedDepositsAccountProductTemplate.inMultiplesOfDepositTermType.id : '',
+        'maxDepositTerm': this.fixedDepositsAccountProductTemplate.maxDepositTerm,
+        'maxDepositTermTypeId': this.fixedDepositsAccountProductTemplate.maxDepositTermType ? this.fixedDepositsAccountProductTemplate.maxDepositTermType.id : '',
+        'preClosurePenalApplicable': this.fixedDepositsAccountProductTemplate.preClosurePenalApplicable,
+        'preClosurePenalInterest': this.fixedDepositsAccountProductTemplate.preClosurePenalInterest,
+        'preClosurePenalInterestOnTypeId': this.fixedDepositsAccountProductTemplate.preClosurePenalInterestOnType ? this.fixedDepositsAccountProductTemplate.preClosurePenalInterestOnType.id : ''
+      });
+      if (this.fixedDepositsAccountProductTemplate.withHoldTax) {
+        this.fixedDepositAccountSettingsForm.addControl('withHoldTax', new FormControl(false));
+        this.fixedDepositAccountSettingsForm.get('withHoldTax').valueChanges.subscribe((value: boolean) => {
+          if (value) {
+            this.fixedDepositAccountSettingsForm.addControl('taxGroupId', new FormControl({ value: '', disabled: true }));
+            this.fixedDepositAccountSettingsForm.get('taxGroupId').patchValue(this.fixedDepositsAccountProductTemplate.taxGroup && this.fixedDepositsAccountProductTemplate.taxGroup.name);
+          } else {
+            this.fixedDepositAccountSettingsForm.removeControl('taxGroupId');
+          }
+        });
+      } else {
+        this.fixedDepositAccountSettingsForm.removeControl('withHoldTax');
+      }
+      this.setOptions();
+    }
+  }
+
+  ngOnInit() { }
+
+  /**
+   * Creates fixed deposits account terms form.
+   */
+  createFixedDepositAccountSettingsForm() {
+    this.fixedDepositAccountSettingsForm = this.formBuilder.group({
+      'lockinPeriodFrequency': [''],
+      'lockinPeriodFrequencyType': [''],
+      'minDepositTerm': [{value: '', disabled: true}],
+      'minDepositTermTypeId': [{ value: '', disabled: true }],
+      'inMultiplesOfDepositTerm': [{ value: '', disabled: true }],
+      'inMultiplesOfDepositTermTypeId': [{ value: '', disabled: true }],
+      'maxDepositTerm': [{ value: '', disabled: true }],
+      'maxDepositTermTypeId': [{ value: '', disabled: true }],
+      'transferInterestToSavings': [false],
+      'preClosurePenalApplicable': [{ value: '', disabled: true }],
+      'preClosurePenalInterest': [{ value: '', disabled: true }],
+      'preClosurePenalInterestOnTypeId': [{ value: '', disabled: true }]
+    });
+  }
+
+  /**
+   * Subscribes to value changes and sets new form controls accordingly.
+   */
+  buildDependencies() {
+    this.fixedDepositAccountSettingsForm.get('transferInterestToSavings').valueChanges.subscribe((value: boolean) => {
+      if (value) {
+        this.fixedDepositAccountSettingsForm.addControl('linkAccountId', new FormControl('', Validators.required));
+      } else {
+        this.fixedDepositAccountSettingsForm.removeControl('linkAccountId');
+      }
+    });
+  }
+
+  /**
+   * Sets all select dropdown options.
+   */
+  setOptions() {
+    this.lockinPeriodFrequencyTypeData = this.fixedDepositsAccountProductTemplate.lockinPeriodFrequencyTypeOptions;
+    this.periodFrequencyTypeData = this.fixedDepositsAccountProductTemplate.periodFrequencyTypeOptions;
+    this.savingsAccountsData = this.fixedDepositsAccountProductTemplate.savingsAccounts;
+    this.preClosurePenalInterestOnTypeData = this.fixedDepositsAccountProductTemplate.preClosurePenalInterestOnTypeOptions;
+  }
+
+  /**
+   * Returns fixed deposits account settings form value.
+   */
+  get fixedDepositAccountSettings() {
+    const fixedDepositAccountSettings = this.fixedDepositAccountSettingsForm.getRawValue();
+    for (const key in fixedDepositAccountSettings) {
+      if (fixedDepositAccountSettings[key] === '' || key === 'taxGroupId') {
+        delete fixedDepositAccountSettings[key];
+      }
+    }
+    return fixedDepositAccountSettings;
+  }
+
+}

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

@@ -0,0 +1,102 @@
+<form [formGroup]="fixedDepositAccountTermsForm">
+
+  <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Deposit Amount</mat-label>
+      <input type="number" matInput formControlName="depositAmount" required>
+      <mat-error>
+        Fixed Deposit Amount is <strong>required</strong>
+      </mat-error>
+    </mat-form-field>
+
+    <span fxFlex="48%" fxHide.lt-md></span>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Deposit Period Frequency</mat-label>
+      <input type="number" matInput formControlName="depositPeriod" required>
+      <mat-error>
+        Deposit Period Frequency is <strong>required</strong>
+      </mat-error>
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Deposit Period Type</mat-label>
+      <mat-select formControlName="depositPeriodFrequencyId" required>
+        <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
+          {{ periodFrequencyType.value }}
+        </mat-option>
+      </mat-select>
+      <mat-error>
+        Deposit Period Type is <strong>required</strong>
+      </mat-error>
+    </mat-form-field>
+
+    <mat-divider fxFlex="98%"></mat-divider>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Interest Compounding Period</mat-label>
+      <mat-select formControlName="interestCompoundingPeriodType" required>
+        <mat-option *ngFor="let interestCompoundingPeriodType of interestCompoundingPeriodTypeData"
+          [value]="interestCompoundingPeriodType.id">
+          {{ interestCompoundingPeriodType.value }}
+        </mat-option>
+      </mat-select>
+      <mat-error>
+        Interest Compounding Period is <strong>required</strong>
+      </mat-error>
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Interest Posting Period</mat-label>
+      <mat-select formControlName="interestPostingPeriodType" required>
+        <mat-option *ngFor="let interestPostingPeriodType of interestPostingPeriodTypeData"
+          [value]="interestPostingPeriodType.id">
+          {{ interestPostingPeriodType.value }}
+        </mat-option>
+      </mat-select>
+      <mat-error>
+        Interest Posting Period is <strong>required</strong>
+      </mat-error>
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Interest Calculated using</mat-label>
+      <mat-select formControlName="interestCalculationType" required>
+        <mat-option *ngFor="let interestCalculationType of interestCalculationTypeData"
+          [value]="interestCalculationType.id">
+          {{ interestCalculationType.value }}
+        </mat-option>
+      </mat-select>
+      <mat-error>
+        Interest Calculated using is <strong>required</strong>
+      </mat-error>
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Days in Year</mat-label>
+      <mat-select formControlName="interestCalculationDaysInYearType" required>
+        <mat-option *ngFor="let interestCalculationDaysInYearType of interestCalculationDaysInYearTypeData"
+          [value]="interestCalculationDaysInYearType.id">
+          {{ interestCalculationDaysInYearType.value }}
+        </mat-option>
+      </mat-select>
+      <mat-error>
+        Days in Year is <strong>required</strong>
+      </mat-error>
+    </mat-form-field>
+
+  </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>
+
+</form>

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-terms-step/fixed-deposit-account-terms-step.component.scss

@@ -0,0 +1,24 @@
+h4 {
+  font-weight: 500;
+  margin: 1em 0;
+}
+
+h3 {
+  font-weight: 500;
+}
+
+mat-divider {
+  margin: 1em 0 2em 0;
+}
+
+.margin-v {
+  margin: 1em 0;
+}
+
+.margin-b {
+  margin: 0 0 1em 0;
+}
+
+.margin-t {
+  margin-top: 1em;
+}

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-terms-step/fixed-deposit-account-terms-step.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FixedDepositAccountTermsStepComponent } from './fixed-deposit-account-terms-step.component';
+
+describe('FixedDepositAccountTermsStepComponent', () => {
+  let component: FixedDepositAccountTermsStepComponent;
+  let fixture: ComponentFixture<FixedDepositAccountTermsStepComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FixedDepositAccountTermsStepComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FixedDepositAccountTermsStepComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-terms-step/fixed-deposit-account-terms-step.component.ts

@@ -0,0 +1,91 @@
+/** Angular Imports */
+import { Component, OnInit, Input, OnChanges } from '@angular/core';
+import { FormGroup, FormBuilder, Validators} from '@angular/forms';
+
+/**
+ * Fixed Deposits Terms Step
+ */
+@Component({
+  selector: 'mifosx-fixed-deposit-account-terms-step',
+  templateUrl: './fixed-deposit-account-terms-step.component.html',
+  styleUrls: ['./fixed-deposit-account-terms-step.component.scss']
+})
+export class FixedDepositAccountTermsStepComponent implements OnInit, OnChanges {
+
+  /** Fixed deposits account template */
+  @Input() fixedDepositsAccountTemplate: any;
+  /** Fixed deposits account and product template */
+  @Input() fixedDepositsAccountProductTemplate: any;
+
+  /** Minimum date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum date allowed. */
+  maxDate = new Date();
+  /** Fixed Deposits Account Terms Form */
+  fixedDepositAccountTermsForm: FormGroup;
+  /** Interest Compounding Period Type Data */
+  interestCompoundingPeriodTypeData: any;
+  /** Interest Posting Period Type Data */
+  interestPostingPeriodTypeData: any;
+  /** Interest Calculation Type Data */
+  interestCalculationTypeData: any;
+  /** Interest Calculation Days in Year Data */
+  interestCalculationDaysInYearTypeData: any;
+   /** Period Frequency Type Data */
+  periodFrequencyTypeData: any;
+
+  /**
+   * @param {FormBuilder} formBuilder Form Builder
+   */
+  constructor(private formBuilder: FormBuilder) {
+    this.createFixedDepositsAccountTermsForm();
+  }
+
+  ngOnChanges() {
+    if (this.fixedDepositsAccountProductTemplate) {
+      this.setOptions();
+    }
+  }
+
+  ngOnInit() { }
+
+  /**
+   * Creates fixed deposits account terms form.
+   */
+  createFixedDepositsAccountTermsForm() {
+    this.fixedDepositAccountTermsForm = this.formBuilder.group({
+      'interestCompoundingPeriodType': ['', Validators.required],
+      'interestPostingPeriodType': ['', Validators.required],
+      'interestCalculationType': ['', Validators.required],
+      'interestCalculationDaysInYearType': ['', Validators.required],
+      'depositAmount': ['', Validators.required],
+      'depositPeriod': ['', Validators.required],
+      'depositPeriodFrequencyId': ['', Validators.required]
+    });
+  }
+
+  /**
+   * Sets all select dropdown options.
+   */
+  setOptions() {
+    this.interestCompoundingPeriodTypeData = this.fixedDepositsAccountProductTemplate.interestCompoundingPeriodTypeOptions;
+    this.interestPostingPeriodTypeData = this.fixedDepositsAccountProductTemplate.interestPostingPeriodTypeOptions;
+    this.interestCalculationTypeData = this.fixedDepositsAccountProductTemplate.interestCalculationTypeOptions;
+    this.interestCalculationDaysInYearTypeData = this.fixedDepositsAccountProductTemplate.interestCalculationDaysInYearTypeOptions;
+    this.periodFrequencyTypeData = this.fixedDepositsAccountProductTemplate.periodFrequencyTypeOptions;
+  }
+
+  /**
+   * Returns fixed deposits account terms form value.
+   */
+  get fixedDepositAccountTerms() {
+    const fixedDepositAccountTerms = this.fixedDepositAccountTermsForm.value;
+    for (const key in fixedDepositAccountTerms) {
+      if (fixedDepositAccountTerms[key] === '') {
+        delete fixedDepositAccountTerms[key];
+      }
+    }
+    return fixedDepositAccountTerms;
+  }
+
+}