feat: add create recurring deposit account (#999)

Fixes: #998

src/app/clients/clients-view/clients-view.component.html

@@ -38,6 +38,7 @@
       <button mat-raised-button [matMenuTriggerFor]="More">More</button>
       <mat-menu #More="matMenu">
         <button mat-menu-item [routerLink]="['sharesaccounts', 'create-shares-account']">New Share Account</button>
+        <button mat-menu-item [routerLink]="['recurringdeposits', 'create-recurring-deposits-account']">New Recurring Deposit Account</button>
         <button mat-menu-item>Item 2</button>
       </mat-menu>
     </mat-card-actions>

src/app/deposits/recurring-deposits/common-resolvers/recurring-deposits-account-template.resolver.ts

@@ -0,0 +1,32 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { RecurringDepositsService } from '../recurring-deposits.service';
+
+/**
+ * Savings Account Template resolver.
+ */
+@Injectable()
+export class RecurringDepositsAccountTemplateResolver implements Resolve<Object> {
+
+  /**
+   * @param {recurringDepositsService} RecurringDepositsService Savings service.
+   */
+  constructor(private recurringDepositsService: RecurringDepositsService) { }
+
+  /**
+   * Returns the Shares Account Template.
+   * @param {ActivatedRouteSnapshot} route Route Snapshot
+   * @returns {Observable<any>}
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const clientId = route.parent.parent.paramMap.get('clientId');
+    return this.recurringDepositsService.getRecurringDepositsAccountTemplate(clientId);
+  }
+
+}

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

@@ -0,0 +1,106 @@
+<div class="container">
+
+  <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #recurringDepositAccountStepper>
+    <ng-template matStepperIcon="number">
+      <fa-icon icon="pencil-alt" size="sm"></fa-icon>
+    </ng-template>
+
+    <ng-template matStepperIcon="edit">
+      <fa-icon icon="pencil-alt" size="sm"></fa-icon>
+    </ng-template>
+
+    <ng-template matStepperIcon="done">
+      <fa-icon icon="check" size="sm"></fa-icon>
+    </ng-template>
+
+    <ng-template matStepperIcon="error">
+      <fa-icon icon="exclamation-triangle" size="lg"></fa-icon>
+    </ng-template>
+
+    <ng-template matStepperIcon="preview">
+      <fa-icon icon="eye" size="sm"></fa-icon>
+    </ng-template>
+
+    <mat-step [stepControl]="recurringDepositAccountDetailsForm">
+
+      <ng-template matStepLabel>DETAILS</ng-template>
+
+      <mifosx-recurring-deposits-account-details-step
+        [recurringDepositsAccountTemplate]="recurringDepositsAccountTemplate"
+        (recurringDepositsAccountProductTemplate)="setTemplate($event)">
+      </mifosx-recurring-deposits-account-details-step>
+
+    </mat-step>
+
+    <mat-step [stepControl]="recurringDepositAccountCurrencyForm">
+
+      <ng-template matStepLabel>CURRENCY</ng-template>
+
+      <mifosx-recurring-deposits-account-currency-step
+        [recurringDepositsAccountTemplate]="recurringDepositsAccountTemplate"
+        [recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate">
+      </mifosx-recurring-deposits-account-currency-step>
+
+    </mat-step>
+
+    <mat-step [stepControl]="recurringDepositAccountTermsForm">
+
+      <ng-template matStepLabel>TERMS</ng-template>
+
+      <mifosx-recurring-deposits-account-terms-step
+        [recurringDepositsAccountTemplate]="recurringDepositsAccountTemplate"
+        [recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate">
+      </mifosx-recurring-deposits-account-terms-step>
+
+    </mat-step>
+
+    <mat-step [stepControl]="recurringDepositAccountSettingsForm">
+
+      <ng-template matStepLabel>SETTINGS</ng-template>
+
+      <mifosx-recurring-deposits-account-settings-step
+        [recurringDepositsAccountTemplate]="recurringDepositsAccountTemplate"
+        [recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate">
+      </mifosx-recurring-deposits-account-settings-step>
+
+    </mat-step>
+
+    <mat-step>
+
+      <ng-template matStepLabel>INTEREST RATE CHART</ng-template>
+
+      <mifosx-recurring-deposits-account-interest-rate-chart-step
+        [recurringDepositsAccountTemplate]="recurringDepositsAccountTemplate"
+        [recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate">
+      </mifosx-recurring-deposits-account-interest-rate-chart-step>
+
+    </mat-step>
+
+    <mat-step>
+
+      <ng-template matStepLabel>CHARGES</ng-template>
+
+      <mifosx-recurring-deposits-account-charges-step
+        [recurringDepositsAccountTemplate]="recurringDepositsAccountTemplate"
+        [recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate"
+        [recurringDepositAccountFormValid]="recurringDepositAccountFormValid"
+        [currencyCode]="recurringDepositAccountCurrencyForm.get('currencyCode')">
+      </mifosx-recurring-deposits-account-charges-step>
+
+    </mat-step>
+
+    <mat-step state="preview" *ngIf="recurringDepositAccountFormValid" completed>
+
+      <ng-template matStepLabel>PREVIEW</ng-template>
+
+      <mifosx-recurring-deposits-account-preview-step
+        [recurringDepositsAccountTemplate]="recurringDepositsAccountTemplate"
+        [recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate"
+        [recurringDepositAccountData]="recurringDepositAccountData" (submit)="submit()">
+      </mifosx-recurring-deposits-account-preview-step>
+
+    </mat-step>
+
+  </mat-horizontal-stepper>
+
+</div>

src/app/deposits/recurring-deposits/create-recurring-deposits-account/create-recurring-deposits-account.component.spec.ts

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

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

@@ -0,0 +1,140 @@
+/** Angular Imports */
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { DatePipe } from '@angular/common';
+
+/** Custom Services */
+import { RecurringDepositsService } from '../recurring-deposits.service';
+
+/** Step Components */
+import { RecurringDepositsAccountDetailsStepComponent } from '../recurring-deposits-account-stepper/recurring-deposits-account-details-step/recurring-deposits-account-details-step.component';
+import { RecurringDepositsAccountTermsStepComponent } from '../recurring-deposits-account-stepper/recurring-deposits-account-terms-step/recurring-deposits-account-terms-step.component';
+import { RecurringDepositsAccountCurrencyStepComponent } from '../recurring-deposits-account-stepper/recurring-deposits-account-currency-step/recurring-deposits-account-currency-step.component';
+import { RecurringDepositsAccountSettingsStepComponent } from '../recurring-deposits-account-stepper/recurring-deposits-account-settings-step/recurring-deposits-account-settings-step.component';
+import { RecurringDepositsAccountChargesStepComponent } from '../recurring-deposits-account-stepper/recurring-deposits-account-charges-step/recurring-deposits-account-charges-step.component';
+
+/**
+ * Create new recurring deposit account
+ */
+@Component({
+  selector: 'mifosx-create-recurring-deposits-account',
+  templateUrl: './create-recurring-deposits-account.component.html',
+  styleUrls: ['./create-recurring-deposits-account.component.scss']
+})
+export class CreateRecurringDepositsAccountComponent implements OnInit {
+
+  /** Imports all the step component */
+  @ViewChild(RecurringDepositsAccountDetailsStepComponent) recurringDepositsAccountDetailsStep: RecurringDepositsAccountDetailsStepComponent;
+  @ViewChild(RecurringDepositsAccountCurrencyStepComponent) recurringDepositAccountCurrencyStep: RecurringDepositsAccountCurrencyStepComponent;
+  @ViewChild(RecurringDepositsAccountTermsStepComponent) recurringDepositAccountTermsStep: RecurringDepositsAccountTermsStepComponent;
+  @ViewChild(RecurringDepositsAccountSettingsStepComponent) recurringDepositAccountSettingsStep: RecurringDepositsAccountSettingsStepComponent;
+  @ViewChild(RecurringDepositsAccountChargesStepComponent) recurringDepositAccountChargesStep: RecurringDepositsAccountChargesStepComponent;
+
+  /** Recurring Deposits Account Template */
+  recurringDepositsAccountTemplate: any;
+  /** Recurring Deposit Account Product Template */
+  recurringDepositsAccountProductTemplate: any;
+
+  constructor(private route: ActivatedRoute,
+    private router: Router,
+    private datePipe: DatePipe,
+    private recurringDepositsService: RecurringDepositsService
+  ) {
+    this.route.data.subscribe((data: { recurringDepositsAccountTemplate: any }) => {
+      this.recurringDepositsAccountTemplate = data.recurringDepositsAccountTemplate;
+    });
+  }
+
+  /**
+   * Sets recurring deposits account product template.
+   * @param {any} $event API response
+   */
+  setTemplate($event: any) {
+    this.recurringDepositsAccountProductTemplate = $event;
+  }
+
+  ngOnInit() {
+  }
+
+  /** Get Recurring Deposit Account Details Form Data */
+  get recurringDepositAccountDetailsForm() {
+    return this.recurringDepositsAccountDetailsStep.recurringDepositAccountDetailsForm;
+  }
+
+  /** Get Recurring Deposit Account Currency Form Data */
+  get recurringDepositAccountCurrencyForm() {
+    return this.recurringDepositAccountCurrencyStep.recurringDepositAccountCurrencyForm;
+  }
+
+  /** Get Recurring Deposit Account Terms Form Data */
+  get recurringDepositAccountTermsForm() {
+    return this.recurringDepositAccountTermsStep.recurringDepositAccountTermsForm;
+  }
+
+  /** Get Recurring Deposit Account Settings Form Data */
+  get recurringDepositAccountSettingsForm() {
+    return this.recurringDepositAccountSettingsStep.recurringDepositAccountSettingsForm;
+  }
+
+  /** Checks wheter all the forms in different steps are valid or not */
+  get recurringDepositAccountFormValid() {
+    return (
+      this.recurringDepositAccountDetailsForm.valid &&
+      this.recurringDepositAccountTermsForm.valid &&
+      this.recurringDepositAccountSettingsForm.valid
+    );
+  }
+
+  /** Retrieves Data of all the forms */
+  get recurringDepositAccountData() {
+    return {
+      ...this.recurringDepositsAccountDetailsStep.recurringDepositAccountDetails,
+      ...this.recurringDepositAccountCurrencyStep.recurringDepositAccountCurrency,
+      ...this.recurringDepositAccountTermsStep.recurringDepositAccountTerms,
+      ...this.recurringDepositAccountSettingsStep.recurringDepositAccountSettings,
+      ...this.recurringDepositAccountChargesStep.recurringDepositAccountCharges,
+    };
+  }
+
+
+  /** Retrieves Data of all forms except Currency to submit the data */
+  get recurringDepositAccount() {
+    return {
+      ...this.recurringDepositsAccountDetailsStep.recurringDepositAccountDetails,
+      ...this.recurringDepositAccountTermsStep.recurringDepositAccountTerms,
+      ...this.recurringDepositAccountSettingsStep.recurringDepositAccountSettings,
+      ...this.recurringDepositAccountChargesStep.recurringDepositAccountCharges,
+    };
+  }
+
+  /**
+   * Submits the recurring deposit form to create a new recurring deposit account
+   */
+  submit() {
+    const locale = 'en';
+    const dateFormat = 'dd MMMM yyyy';
+    const monthDayFormat = 'dd MMMM';
+    const recurringDepositAccount = {
+      ...this.recurringDepositAccount,
+      clientId: this.recurringDepositsAccountTemplate.clientId,
+      charges: this.recurringDepositAccount.charges.map((charge: any) => ({
+        chargeId: charge.id,
+        amount: charge.amount,
+        dueDate: charge.dueDate,
+        feeOnMonthDay: charge.feeOnMonthDay,
+        feeInterval: charge.feeInterval
+      })),
+      isCalendarInherited: this.recurringDepositAccount.recurringDepositAccount ? this.recurringDepositAccount.recurringDepositAccount : false,
+      submittedOnDate: this.datePipe.transform(this.recurringDepositAccount.submittedOnDate, dateFormat),
+      expectedFirstDepositOnDate: this.datePipe.transform(this.recurringDepositAccount.expectedFirstDepositOnDate, dateFormat),
+      dateFormat,
+      monthDayFormat,
+      locale
+    };
+    console.log('daaa: ', recurringDepositAccount);
+
+    this.recurringDepositsService.createRecurringDepositAccount(recurringDepositAccount).subscribe((response: any) => {
+      this.router.navigate(['../', response.resourceId], { relativeTo: this.route });
+    });
+  }
+}

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

@@ -0,0 +1,111 @@
+<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 | date) || '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]="!recurringDepositAccountFormValid">
+    Next&nbsp;&nbsp;
+    <fa-icon icon="arrow-right"></fa-icon>
+  </button>
+</div>

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-charges-step/recurring-deposits-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/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-charges-step/recurring-deposits-account-charges-step.component.spec.ts

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

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

@@ -0,0 +1,184 @@
+/** Angular Imports */
+import { Component, OnInit, Input } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { MatDialog } from '@angular/material';
+
+/** Dialog Components */
+import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
+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';
+
+/**
+ * Recurring Deposit Account Charges Step
+ */
+@Component({
+  selector: 'mifosx-recurring-deposits-account-charges-step',
+  templateUrl: './recurring-deposits-account-charges-step.component.html',
+  styleUrls: ['./recurring-deposits-account-charges-step.component.scss']
+})
+export class RecurringDepositsAccountChargesStepComponent implements OnInit {
+
+  @Input() recurringDepositsAccountTemplate: any;
+  @Input() recurringDepositsAccountProductTemplate: any;
+  @Input() currencyCode: FormControl;
+  @Input() recurringDepositAccountFormValid: boolean;
+
+  /** 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;
+
+  constructor(public dialog: MatDialog,
+    private datePipe: DatePipe) {
+  }
+
+  ngOnInit() {
+    this.chargeData = this.recurringDepositsAccountTemplate.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 editNoteDialogRef = this.dialog.open(FormDialogComponent, { data });
+    editNoteDialogRef.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 editNoteDialogRef = this.dialog.open(FormDialogComponent, { data });
+    editNoteDialogRef.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 editNoteDialogRef = this.dialog.open(FormDialogComponent, { data });
+    editNoteDialogRef.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) {
+    const deleteChargeDialogRef = this.dialog.open(DeleteDialogComponent, {
+      data: { deleteContext: `charge ${charge.name}` }
+    });
+    deleteChargeDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.delete) {
+        this.chargesDataSource.splice(this.chargesDataSource.indexOf(charge), 1);
+        this.chargesDataSource = this.chargesDataSource.concat([]);
+      }
+    });
+  }
+
+  /**
+   * Returns Recurring Deposits Account Charges Form
+   */
+  get recurringDepositAccountCharges() {
+    return {
+      charges: this.chargesDataSource
+    };
+  }
+
+}

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

@@ -0,0 +1,29 @@
+<form [formGroup]="recurringDepositAccountCurrencyForm">
+
+  <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" required>
+
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Decimal Places</mat-label>
+      <input type="number" matInput formControlName="decimalPlaces" required>
+    </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/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-currency-step/recurring-deposits-account-currency-step.component.spec.ts

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

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

@@ -0,0 +1,58 @@
+/** Angular Imports */
+import { Component, OnInit, Input, OnChanges } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+
+/**
+ * Recurring Deposit Account Currency Step
+ */
+@Component({
+  selector: 'mifosx-recurring-deposits-account-currency-step',
+  templateUrl: './recurring-deposits-account-currency-step.component.html',
+  styleUrls: ['./recurring-deposits-account-currency-step.component.scss']
+})
+export class RecurringDepositsAccountCurrencyStepComponent implements OnInit, OnChanges {
+
+
+  @Input() recurringDepositsAccountTemplate: any;
+  @Input() recurringDepositsAccountProductTemplate: any;
+
+  /** Recurring Deposit Account Currency Form */
+  recurringDepositAccountCurrencyForm: FormGroup;
+  /** Currency Data */
+  currencyData: any;
+
+  constructor(private formBuilder: FormBuilder) {
+    this.createRecurringDepositAccountCurrencyForm();
+  }
+
+  ngOnInit() {
+  }
+
+  ngOnChanges() {
+    console.log('out here');
+
+    if (this.recurringDepositsAccountProductTemplate) {
+      console.log('here');
+
+      this.recurringDepositAccountCurrencyForm.patchValue({
+        'currencyCode': this.recurringDepositsAccountProductTemplate.currency.code,
+        'decimalPlaces': this.recurringDepositsAccountProductTemplate.currency.decimalPlaces
+      });
+    }
+  }
+
+  createRecurringDepositAccountCurrencyForm() {
+    this.recurringDepositAccountCurrencyForm = this.formBuilder.group({
+      'currencyCode': [{ value: '', disabled: true }],
+      'decimalPlaces': [{ value: '', disabled: true }]
+    });
+  }
+
+  /**
+   * Returns Recurring Deposits Account Currency Form
+   */
+  get recurringDepositAccountCurrency() {
+    return this.recurringDepositAccountCurrencyForm.value;
+  }
+
+}

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

@@ -0,0 +1,50 @@
+<form [formGroup]="recurringDepositAccountDetailsForm">
+
+  <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/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-details-step/recurring-deposits-account-details-step.component.scss

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

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

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

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

@@ -0,0 +1,91 @@
+/** Angular Imports */
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+
+/** Custom Services */
+import { RecurringDepositsService } from '../../recurring-deposits.service';
+import { DatePipe } from '@angular/common';
+
+/**
+ * Recurring Deposits Account Details Step
+ */
+@Component({
+  selector: 'mifosx-recurring-deposits-account-details-step',
+  templateUrl: './recurring-deposits-account-details-step.component.html',
+  styleUrls: ['./recurring-deposits-account-details-step.component.scss']
+})
+export class RecurringDepositsAccountDetailsStepComponent implements OnInit {
+
+  /** Recurring Deposits Account Template */
+  @Input() recurringDepositsAccountTemplate: 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;
+  /** Recurring Deposits Account Details Form */
+  recurringDepositAccountDetailsForm: FormGroup;
+
+  /** Recurring Deposits Account Template with product data  */
+  @Output() recurringDepositsAccountProductTemplate = new EventEmitter();
+
+  /**
+   * Sets recurring deposits account details form.
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {RecurringDepositsService} recurringDepositsService Recurring Deposits Service.
+   */
+  constructor(private formBuilder: FormBuilder,
+    private recurringDepositsService: RecurringDepositsService,
+    private datePipe: DatePipe) {
+    this.createRecurringDepositsAccountDetailsForm();
+  }
+
+  ngOnInit() {
+    this.buildDependencies();
+    if (this.recurringDepositsAccountTemplate) {
+      this.productData = this.recurringDepositsAccountTemplate.productOptions;
+      if (this.recurringDepositsAccountTemplate.depositProductId) {
+        this.recurringDepositAccountDetailsForm.patchValue({
+          'productId': this.recurringDepositsAccountTemplate.depositProductId,
+          'submittedOnDate': this.recurringDepositsAccountTemplate.timeline.submittedOnDate && new Date(this.recurringDepositsAccountTemplate.timeline.submittedOnDate),
+        });
+      }
+    }
+  }
+
+  /**
+   * Creates recurring deposits account details form.
+   */
+  createRecurringDepositsAccountDetailsForm() {
+    this.recurringDepositAccountDetailsForm = this.formBuilder.group({
+      'productId': ['', Validators.required],
+      'submittedOnDate': ['', Validators.required],
+      'fieldOfficerId': ['']
+    });
+  }
+
+  /**
+   * Fetches recurring deposits account product template on productId value changes
+   */
+  buildDependencies() {
+    const clientId = this.recurringDepositsAccountTemplate.clientId;
+    this.recurringDepositAccountDetailsForm.get('productId').valueChanges.subscribe((productId: string) => {
+      this.recurringDepositsService.getRecurringDepositsAccountTemplate(clientId, productId).subscribe((response: any) => {
+        this.recurringDepositsAccountProductTemplate.emit(response);
+        this.fieldOfficerData = response.fieldOfficerOptions;
+        this.recurringDepositAccountDetailsForm.get('fieldOfficerId').patchValue('');
+      });
+    });
+  }
+
+  /**
+   * Returns recurring deposits account details form value.
+   */
+  get recurringDepositAccountDetails() {
+    return this.recurringDepositAccountDetailsForm.value;
+  }
+}

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

@@ -0,0 +1,69 @@
+<!-- <div class="mat-elevation-z1 m-b-25"> -->
+<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+  <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>
+      <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.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>
+
+    <table mat-table [dataSource]="interestRateChartData">
+
+      <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="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="interest">
+        <th mat-header-cell *matHeaderCellDef> Interest </th>
+        <td mat-cell *matCellDef="let rateChart"> {{ rateChart.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="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
+          </button>
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+    </table>
+  </div>
+</div>

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

@@ -0,0 +1,10 @@
+.tab-container {
+  padding: 1%;
+  margin: 1%;
+  h3 {
+    margin:1% auto;
+  }
+  table {
+    width: 100%;
+  }
+}

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

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

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

@@ -0,0 +1,38 @@
+/** Angular Imports */
+import { Component, OnInit, Input, OnChanges } from '@angular/core';
+import { MatTableDataSource } from '@angular/material';
+
+/**
+ * Recurring Deposits Account Interest Rate Chart Step
+ */
+@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']
+})
+export class RecurringDepositsAccountInterestRateChartStepComponent implements OnInit, OnChanges {
+
+  @Input() recurringDepositsAccountTemplate: any;
+  @Input() recurringDepositsAccountProductTemplate: any;
+
+  /** Interest Rate Chart Data */
+  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>;
+
+  constructor() {
+  }
+
+  ngOnChanges() {
+    if (this.recurringDepositsAccountProductTemplate) {
+      this.interestRateChartData = this.recurringDepositsAccountProductTemplate.accountChart.chartSlabs;
+    }
+  }
+
+  ngOnInit() {
+    this.interestRateChartData = [];
+  }
+
+}

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

@@ -0,0 +1,274 @@
+<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%">{{ recurringDepositAccountData.productId | find:recurringDepositsAccountTemplate.productOptions:'id':'name' }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Submitted On</span>
+    <span fxFlex="60%">{{ recurringDepositAccountData.submittedOnDate | date }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Field Officer</span>
+    <span
+      fxFlex="60%">{{ recurringDepositAccountData.fieldOfficerId | find:recurringDepositsAccountProductTemplate.fieldOfficerOptions:'id':'displayName' }}</span>
+  </div>
+
+  <h3 class="mat-h3" fxFlexFill>Currency</h3>
+
+  <mat-divider fxFlexFill></mat-divider>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Currency</span>
+    <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate.currency.code  }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Decimal Places</span>
+    <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate.currency.decimalPlaces }}</span>
+  </div>
+
+  <h3 class="mat-h3" fxFlexFill>Terms</h3>
+  <mat-divider fxFlexFill></mat-divider>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Interest Compounding Period:</span>
+    <span
+      fxFlex="60%">{{ recurringDepositAccountData.interestCompoundingPeriodType | find:recurringDepositsAccountProductTemplate.interestCompoundingPeriodTypeOptions:'id':'value' }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Interest Posting Period:</span>
+    <span
+      fxFlex="60%">{{ recurringDepositAccountData.interestPostingPeriodType | find:recurringDepositsAccountProductTemplate.interestPostingPeriodTypeOptions:'id':'value' }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Interest Calculated using:</span>
+    <span
+      fxFlex="60%">{{ recurringDepositAccountData.interestCalculationType | find:recurringDepositsAccountProductTemplate.interestCalculationTypeOptions:'id':'value' }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Days in Year:</span>
+    <span
+      fxFlex="60%">{{ recurringDepositAccountData.interestCalculationDaysInYearType | find:recurringDepositsAccountProductTemplate.interestCalculationDaysInYearTypeOptions:'id':'value' }}</span>
+  </div>
+
+  <h3 class="mat-h3" fxFlexFill>Settings</h3>
+
+  <mat-divider fxFlexFill></mat-divider>
+
+  <div fxFlexFill *ngIf="recurringDepositAccountData.lockinPeriodFrequency">
+    <span fxFlex="40%">Lock-in Period:</span>
+    <span
+      fxFlex="60%">{{ recurringDepositAccountData.lockinPeriodFrequency + ' ' + (recurringDepositAccountData.lockinPeriodFrequencyType | find:recurringDepositsAccountProductTemplate.lockinPeriodFrequencyTypeOptions:'id':'value') }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Recurring Deposit Amount:</span>
+    <span fxFlex="60%">{{ recurringDepositAccountData.mandatoryRecommendedDepositAmount}}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Deposit Period:</span>
+    <span
+      fxFlex="60%">{{ recurringDepositAccountData.depositPeriod + ' ' + (recurringDepositAccountData.depositPeriodFrequencyId | find:recurringDepositsAccountProductTemplate.periodFrequencyTypeData:'id':'value') }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Deposit Frequency Same as Group/Center meeting:</span>
+    <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate.isCalendarInherited === true ? 'Yes' : 'No'  }}</span>
+  </div>
+
+  <ng-container *ngIf="!recurringDepositsAccountProductTemplate.isCalendarInherited">
+    <div fxFlexFill>
+      <span fxFlex="40%">Deposit Start Date:</span>
+      <span fxFlex="60%">{{ recurringDepositAccountData.expectedFirstDepositOnDate | date}}</span>
+    </div>
+
+    <div fxFlexFill>
+      <span fxFlex="40%">Deposit Frequency:</span>
+      <span *ngIf="recurringDepositAccountData.recurringFrequency"
+        fxFlex="60%">{{ recurringDepositAccountData.recurringFrequency + ' ' + (recurringDepositAccountData.recurringFrequencyType | find:recurringDepositsAccountProductTemplate.periodFrequencyTypeData:'id':'value')}}</span>
+    </div>
+  </ng-container>
+
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Minimum Deposit Term:</span>
+    <span
+      fxFlex="60%">{{ (recurringDepositsAccountProductTemplate.minDepositTerm ? recurringDepositsAccountProductTemplate.minDepositTerm: '') + ' ' + (this.recurringDepositsAccountProductTemplate.minDepositTermType ? this.recurringDepositsAccountProductTemplate.minDepositTermType.value: '') }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">In Multiples Of:</span>
+    <span
+      fxFlex="60%">{{ (recurringDepositsAccountProductTemplate.inMultiplesOfDepositTerm ? recurringDepositsAccountProductTemplate.inMultiplesOfDepositTerm: '') + ' ' + (this.recurringDepositsAccountProductTemplate.inMultiplesOfDepositTermType ? this.recurringDepositsAccountProductTemplate.inMultiplesOfDepositTermType.value: '') }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Maximum Deposit Term</span>
+    <span
+      fxFlex="60%">{{ (recurringDepositsAccountProductTemplate.maxDepositTerm ? recurringDepositsAccountProductTemplate.maxDepositTerm: '') + ' ' + (this.recurringDepositsAccountProductTemplate.maxDepositTermType ? this.recurringDepositsAccountProductTemplate.maxDepositTermType.value: '') }}</span>
+  </div>
+
+
+  <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>
+      <span fxFlex="40%">Name:</span>
+      <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.name | 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.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>
+
+    <table mat-table [dataSource]="interestRateChartData">
+
+      <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="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="interest">
+        <th mat-header-cell *matHeaderCellDef> Interest </th>
+        <td mat-cell *matCellDef="let rateChart"> {{ rateChart.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="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
+          </button>
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="interestRateChartDisplayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: interestRateChartDisplayedColumns"></tr>
+
+    </table>
+  </div>
+
+  <div fxFlexFill *ngIf="recurringDepositAccountData.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]="recurringDepositAccountData.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 | date) || '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/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.scss

@@ -0,0 +1,24 @@
+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;
+}

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

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

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

@@ -0,0 +1,41 @@
+/** Angular Imports */
+import { Component, OnInit, Input, Output, EventEmitter, OnChanges } from '@angular/core';
+
+/**
+ * Recurring Deposit Preview Step
+ */
+@Component({
+  selector: 'mifosx-recurring-deposits-account-preview-step',
+  templateUrl: './recurring-deposits-account-preview-step.component.html',
+  styleUrls: ['./recurring-deposits-account-preview-step.component.scss']
+})
+export class RecurringDepositsAccountPreviewStepComponent implements OnInit, OnChanges {
+
+  /** Input Data */
+  @Input() recurringDepositsAccountTemplate: any;
+  @Input() recurringDepositsAccountProductTemplate: any;
+  @Input() recurringDepositAccountData: any;
+  /** Output the submit action */
+  @Output() submit = new EventEmitter();
+
+  /** 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;
+
+  constructor() { }
+
+  ngOnChanges() {
+    if (this.recurringDepositsAccountProductTemplate) {
+      this.interestRateChartData = this.recurringDepositsAccountProductTemplate.accountChart.chartSlabs;
+    }
+  }
+
+  ngOnInit() {
+    this.interestRateChartData = [];
+  }
+
+
+}

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

@@ -0,0 +1,192 @@
+<form [formGroup]="recurringDepositAccountSettingsForm">
+
+  <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+    <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="isMandatoryDeposit" class="margin-v">
+      Is Mandatory Deposit?
+    </mat-checkbox>
+
+    <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="adjustAdvanceTowardsFuturePayments"
+      class="margin-v">
+      Adjust advance payments toward future installments?
+    </mat-checkbox>
+
+    <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="allowWithdrawal" class="margin-v">
+      Allow Withdrawals?
+    </mat-checkbox>
+
+    <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">Recurring Deposit Details</h4>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Recurring Deposit Amount</mat-label>
+      <input type="number" matInput formControlName="mandatoryRecommendedDepositAmount" required>
+      <mat-error>
+        Recurring Deposit Amount is <strong>required</strong>
+      </mat-error>
+    </mat-form-field>
+
+    <h4 fxFlex="98%" class="mat-h4">Deposit Period</h4>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Deposit Period</mat-label>
+      <input type="number" matInput formControlName="depositPeriod" required>
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>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-form-field>
+
+    <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="isCalendarInherited" class="margin-v">
+      Deposit Frequency Same as Group/Center meeting
+    </mat-checkbox>
+
+    <ng-container *ngIf="!recurringDepositAccountSettingsForm.value.isCalendarInherited">
+      <mat-form-field fxFlex="48%">
+        <mat-label>Deposit Start Date</mat-label>
+        <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="expectedFirstDepositOnDatePicker"
+          formControlName="expectedFirstDepositOnDate" required>
+        <mat-datepicker-toggle matSuffix [for]="expectedFirstDepositOnDatePicker"></mat-datepicker-toggle>
+        <mat-datepicker #expectedFirstDepositOnDatePicker></mat-datepicker>
+      </mat-form-field>
+
+      <h4 fxFlex="98%" class="mat-h4">Deposit Frequency</h4>
+
+      <mat-form-field fxFlex="48%">
+        <mat-label>Deposit Frequency</mat-label>
+        <input type="number" matInput formControlName="recurringFrequency" required>
+        <mat-error>
+          Deposit Frequency is <strong>required</strong>
+        </mat-error>
+      </mat-form-field>
+
+      <mat-form-field fxFlex="48%">
+        <mat-label>Type</mat-label>
+        <mat-select formControlName="recurringFrequencyType" required>
+          <mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
+            {{ periodFrequencyType.value }}
+          </mat-option>
+        </mat-select>
+        <mat-error>
+          Deposit Frequency Type is <strong>required</strong>
+        </mat-error>
+      </mat-form-field>
+    </ng-container>
+
+
+    <mat-divider fxFlex="98%"></mat-divider>
+
+    <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> -->
+
+    <!-- <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> -->
+
+    <mat-divider fxFlex="98%"></mat-divider>
+
+  </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/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-settings-step/recurring-deposits-account-settings-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/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-settings-step/recurring-deposits-account-settings-step.component.spec.ts

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

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

@@ -0,0 +1,127 @@
+/** Angular Imports */
+import { Component, OnInit, Input, OnChanges } from '@angular/core';
+import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
+
+/** Custom Services */
+import { DatePipe } from '@angular/common';
+
+/**
+ * Recurring Deposits Account Settings Step
+ */
+@Component({
+  selector: 'mifosx-recurring-deposits-account-settings-step',
+  templateUrl: './recurring-deposits-account-settings-step.component.html',
+  styleUrls: ['./recurring-deposits-account-settings-step.component.scss']
+})
+export class RecurringDepositsAccountSettingsStepComponent implements OnInit, OnChanges {
+
+  @Input() recurringDepositsAccountTemplate: any;
+  @Input() recurringDepositsAccountProductTemplate: any;
+
+  /** Recurring Deposits Account Settings Form */
+  recurringDepositAccountSettingsForm: FormGroup;
+  /** Minimum date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum date allowed. */
+  maxDate = new Date();
+  /** Lockin Period Frequency Type Data */
+  lockinPeriodFrequencyTypeData: any;
+  /** Period Frequency Type Data */
+  periodFrequencyTypeData: any;
+
+  /**
+   * @param {FormBuilder} formBuilder Form Builder
+   */
+  constructor(private formBuilder: FormBuilder,
+    private datePipe: DatePipe) {
+    this.createRecurringDepositAccountSettingsForm();
+    this.buildDependencies();
+  }
+
+  ngOnChanges() {
+    if (this.recurringDepositsAccountProductTemplate) {
+      this.recurringDepositAccountSettingsForm.patchValue({
+        'isMandatoryDeposit': this.recurringDepositsAccountProductTemplate.isMandatoryDeposit,
+        'adjustAdvanceTowardsFuturePayments': this.recurringDepositsAccountProductTemplate.adjustAdvanceTowardsFuturePayments,
+        'allowWithdrawal': this.recurringDepositsAccountProductTemplate.allowWithdrawal,
+        'lockinPeriodFrequency': this.recurringDepositsAccountProductTemplate.lockinPeriodFrequency,
+        'lockinPeriodFrequencyType': this.recurringDepositsAccountProductTemplate.lockinPeriodFrequencyType ? this.recurringDepositsAccountProductTemplate.lockinPeriodFrequencyType.id : '',
+        'minDepositTerm': this.recurringDepositsAccountProductTemplate.minDepositTerm,
+        'minDepositTermTypeId': this.recurringDepositsAccountProductTemplate.minDepositTermType ? this.recurringDepositsAccountProductTemplate.minDepositTermType.id : '',
+        'inMultiplesOfDepositTerm': this.recurringDepositsAccountProductTemplate.inMultiplesOfDepositTerm,
+        'inMultiplesOfDepositTermTypeId': this.recurringDepositsAccountProductTemplate.inMultiplesOfDepositTermType ? this.recurringDepositsAccountProductTemplate.inMultiplesOfDepositTermType.id : '',
+        'maxDepositTerm': this.recurringDepositsAccountProductTemplate.maxDepositTerm,
+        'maxDepositTermTypeId': this.recurringDepositsAccountProductTemplate.maxDepositTermType ? this.recurringDepositsAccountProductTemplate.maxDepositTermType.id : '',
+      });
+      this.setOptions();
+    }
+  }
+
+  ngOnInit() {
+    if (this.recurringDepositsAccountTemplate) {
+      this.recurringDepositAccountSettingsForm.patchValue({
+        'lockinPeriodFrequency': this.recurringDepositsAccountTemplate.lockinPeriodFrequency,
+        'lockinPeriodFrequencyType': this.recurringDepositsAccountTemplate.lockinPeriodFrequencyType && this.recurringDepositsAccountTemplate.lockinPeriodFrequencyType.id,
+      });
+    }
+  }
+
+  /**
+   * Creates recurring deposits account terms form.
+   */
+  createRecurringDepositAccountSettingsForm() {
+    this.recurringDepositAccountSettingsForm = this.formBuilder.group({
+      'isMandatoryDeposit': [''],
+      'adjustAdvanceTowardsFuturePayments': [''],
+      'allowWithdrawal': [''],
+      'lockinPeriodFrequency': [''],
+      'lockinPeriodFrequencyType': [''],
+      'mandatoryRecommendedDepositAmount': ['', Validators.required],
+      'depositPeriod': ['', Validators.required],
+      'depositPeriodFrequencyId': ['', Validators.required],
+      'isCalendarInherited': [''],
+      'expectedFirstDepositOnDate': [''],
+      'recurringFrequency': ['', Validators.required],
+      'recurringFrequencyType': ['', Validators.required],
+      'minDepositTerm': [{value: '', disabled: true}],
+      'minDepositTermTypeId': [{ value: '', disabled: true }],
+      'inMultiplesOfDepositTerm': [{ value: '', disabled: true }],
+      'inMultiplesOfDepositTermTypeId': [{ value: '', disabled: true }],
+      'maxDepositTerm': [{ value: '', disabled: true }],
+      'maxDepositTermTypeId': [{ value: '', disabled: true }]
+    });
+  }
+
+  /**
+   * Sets all select dropdown options.
+   */
+  setOptions() {
+    this.lockinPeriodFrequencyTypeData = this.recurringDepositsAccountProductTemplate.lockinPeriodFrequencyTypeOptions;
+    this.periodFrequencyTypeData = this.recurringDepositsAccountProductTemplate.periodFrequencyTypeOptions;
+  }
+
+  /**
+   * Subscribes to value changes and sets new form controls accordingly.
+   */
+  buildDependencies() {
+    this.recurringDepositAccountSettingsForm.get('isCalendarInherited').valueChanges.subscribe((isCalendarInherited: any) => {
+      if (isCalendarInherited) {
+        this.recurringDepositAccountSettingsForm.removeControl('expectedFirstDepositOnDate');
+        this.recurringDepositAccountSettingsForm.removeControl('recurringFrequency');
+        this.recurringDepositAccountSettingsForm.removeControl('recurringFrequencyType');
+      } else {
+        this.recurringDepositAccountSettingsForm.addControl('expectedFirstDepositOnDate', new FormControl());
+        this.recurringDepositAccountSettingsForm.addControl('recurringFrequency', new FormControl(''));
+        this.recurringDepositAccountSettingsForm.addControl('recurringFrequencyType', new FormControl(''));
+      }
+    });
+  }
+
+  /**
+   * Returns recurring deposits account settings form value.
+   */
+  get recurringDepositAccountSettings() {
+    return this.recurringDepositAccountSettingsForm.value;
+  }
+
+}

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

@@ -0,0 +1,70 @@
+<form [formGroup]="recurringDepositAccountTermsForm">
+
+  <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+    <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/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-terms-step/recurring-deposits-account-terms-step.component.spec.ts

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

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

@@ -0,0 +1,86 @@
+/** Angular Imports */
+import { Component, OnInit, Input, OnChanges } from '@angular/core';
+import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
+
+/**
+ * Recurring Deposits Terms Step
+ */
+@Component({
+  selector: 'mifosx-recurring-deposits-account-terms-step',
+  templateUrl: './recurring-deposits-account-terms-step.component.html',
+  styleUrls: ['./recurring-deposits-account-terms-step.component.scss']
+})
+export class RecurringDepositsAccountTermsStepComponent implements OnInit, OnChanges {
+
+  @Input() recurringDepositsAccountTemplate: any;
+  @Input() recurringDepositsAccountProductTemplate: any;
+
+  /** Minimum date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum date allowed. */
+  maxDate = new Date();
+  /** Recurring Deposits Account Terms Form */
+  recurringDepositAccountTermsForm: 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;
+
+  /**
+   * @param {FormBuilder} formBuilder Form Builder
+   */
+  constructor(private formBuilder: FormBuilder) {
+    this.createRecurringDepositsAccountTermsForm();
+  }
+
+  ngOnChanges() {
+    if (this.recurringDepositsAccountProductTemplate) {
+      this.setOptions();
+    }
+  }
+
+  ngOnInit() {
+    if (this.recurringDepositsAccountTemplate.interestCompoundingPeriodType) {
+      this.recurringDepositAccountTermsForm.patchValue({
+        'interestCompoundingPeriodType': this.recurringDepositsAccountTemplate.interestCompoundingPeriodType.id,
+        'interestPostingPeriodType': this.recurringDepositsAccountTemplate.interestPostingPeriodType.id,
+        'interestCalculationType': this.recurringDepositsAccountTemplate.interestCalculationType.id,
+        'interestCalculationDaysInYearType': this.recurringDepositsAccountTemplate.interestCalculationDaysInYearType.id,
+      });
+    }
+  }
+
+  /**
+   * Creates recurring deposits account terms form.
+   */
+  createRecurringDepositsAccountTermsForm() {
+    this.recurringDepositAccountTermsForm = this.formBuilder.group({
+      'interestCompoundingPeriodType': ['', Validators.required],
+      'interestPostingPeriodType': ['', Validators.required],
+      'interestCalculationType': ['', Validators.required],
+      'interestCalculationDaysInYearType': ['', Validators.required],
+    });
+  }
+
+  /**
+   * Sets all select dropdown options.
+   */
+  setOptions() {
+    this.interestCompoundingPeriodTypeData = this.recurringDepositsAccountProductTemplate.interestCompoundingPeriodTypeOptions;
+    this.interestPostingPeriodTypeData = this.recurringDepositsAccountProductTemplate.interestPostingPeriodTypeOptions;
+    this.interestCalculationTypeData = this.recurringDepositsAccountProductTemplate.interestCalculationTypeOptions;
+    this.interestCalculationDaysInYearTypeData = this.recurringDepositsAccountProductTemplate.interestCalculationDaysInYearTypeOptions;
+  }
+
+  /**
+   * Returns recurring deposits account terms form value.
+   */
+  get recurringDepositAccountTerms() {
+    return this.recurringDepositAccountTermsForm.value;
+  }
+
+}

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

@@ -18,12 +18,22 @@ import { ChargesTabComponent } from './recurring-deposits-account-view/charges-t
 import { DatatableTabsComponent } from './recurring-deposits-account-view/datatable-tabs/datatable-tabs.component';
 import { SavingsDatatableResolver } from 'app/savings/common-resolvers/savings-datatable.resolver';
 import { SavingsDatatablesResolver } from 'app/savings/common-resolvers/savings-datatables.resolver';
+import { CreateRecurringDepositsAccountComponent } from './create-recurring-deposits-account/create-recurring-deposits-account.component';
+import { RecurringDepositsAccountTemplateResolver } from './common-resolvers/recurring-deposits-account-template.resolver';
 
 const routes: Routes = [
   {
     path: '',
     data: { title: extract('All RecurringDeposits'), breadcrumb: 'RecurringDeposits', routeParamBreadcrumb: false },
     children: [
+      {
+        path: 'create-recurring-deposits-account',
+        data: { title: extract('Create Recurring Deposits Account'), breadcrumb: 'Create Recurring Deposits Account' },
+        component: CreateRecurringDepositsAccountComponent,
+        resolve: {
+          recurringDepositsAccountTemplate: RecurringDepositsAccountTemplateResolver
+        }
+      },
       {
         path: ':recurringDepositAccountId',
         data: { title: extract('RecurringDeposit Account View'), routeParamBreadcrumb: 'recurringDepositAccountId' },
@@ -88,7 +98,8 @@ const routes: Routes = [
     RecurringDepositsAccountViewResolver,
     RecurringDepositsAccountDataResolver,
     SavingsDatatableResolver,
-    SavingsDatatablesResolver
+    SavingsDatatablesResolver,
+    RecurringDepositsAccountTemplateResolver
   ]
 })
 export class RecurringDepositsRoutingModule {}

src/app/deposits/recurring-deposits/recurring-deposits.module.ts

@@ -17,6 +17,14 @@ import { ChargesTabComponent } from './recurring-deposits-account-view/charges-t
 import { DatatableTabsComponent } from './recurring-deposits-account-view/datatable-tabs/datatable-tabs.component';
 import { MultiRowComponent } from './recurring-deposits-account-view/datatable-tabs/multi-row/multi-row.component';
 import { SingleRowComponent } from './recurring-deposits-account-view/datatable-tabs/single-row/single-row.component';
+import { CreateRecurringDepositsAccountComponent } from './create-recurring-deposits-account/create-recurring-deposits-account.component';
+import { RecurringDepositsAccountDetailsStepComponent } from './recurring-deposits-account-stepper/recurring-deposits-account-details-step/recurring-deposits-account-details-step.component';
+import { RecurringDepositsAccountTermsStepComponent } from './recurring-deposits-account-stepper/recurring-deposits-account-terms-step/recurring-deposits-account-terms-step.component';
+import { RecurringDepositsAccountCurrencyStepComponent } from './recurring-deposits-account-stepper/recurring-deposits-account-currency-step/recurring-deposits-account-currency-step.component';
+import { RecurringDepositsAccountSettingsStepComponent } from './recurring-deposits-account-stepper/recurring-deposits-account-settings-step/recurring-deposits-account-settings-step.component';
+import { RecurringDepositsAccountInterestRateChartStepComponent } from './recurring-deposits-account-stepper/recurring-deposits-account-interest-rate-chart-step/recurring-deposits-account-interest-rate-chart-step.component';
+import { RecurringDepositsAccountChargesStepComponent } from './recurring-deposits-account-stepper/recurring-deposits-account-charges-step/recurring-deposits-account-charges-step.component';
+import { RecurringDepositsAccountPreviewStepComponent } from './recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component';
 
 /**
  * RecurringDeposits Module
@@ -38,7 +46,15 @@ import { SingleRowComponent } from './recurring-deposits-account-view/datatable-
     ChargesTabComponent,
     DatatableTabsComponent,
     MultiRowComponent,
-    SingleRowComponent
+    SingleRowComponent,
+    CreateRecurringDepositsAccountComponent,
+    RecurringDepositsAccountDetailsStepComponent,
+    RecurringDepositsAccountTermsStepComponent,
+    RecurringDepositsAccountCurrencyStepComponent,
+    RecurringDepositsAccountSettingsStepComponent,
+    RecurringDepositsAccountInterestRateChartStepComponent,
+    RecurringDepositsAccountChargesStepComponent,
+    RecurringDepositsAccountPreviewStepComponent
   ],
   providers: [DatePipe]
 })

src/app/deposits/recurring-deposits/recurring-deposits.service.ts

@@ -13,9 +13,13 @@ import { Observable } from 'rxjs';
 })
 export class RecurringDepositsService {
 
-  constructor(private http: HttpClient) {}
+  constructor(private http: HttpClient) { }
 
-  getRecurringDepositsAccountData(recurringDepositAccountId: any) {
+  /**
+   * @params recurringDepositAccountId
+   * Returns the details of a particular Recurring Deposit Account
+   */
+  getRecurringDepositsAccountData(recurringDepositAccountId: any): Observable<any> {
     const httpParams = new HttpParams()
       .set('associations', 'all');
     return this.http.get(`/recurringdepositaccounts/${recurringDepositAccountId}`, { params: httpParams });
@@ -42,4 +46,22 @@ export class RecurringDepositsService {
     return this.http.get(`/standinginstructions`, { params: httpParams });
   }
 
+  /**
+   * Returns Recurring Deposit Account Template Data
+   * @param clientId Client ID
+   * @param productId Product ID
+   */
+  getRecurringDepositsAccountTemplate(clientId: any, productId?: any): Observable<any> {
+    let httpParams = new HttpParams().set('clientId', clientId);
+    httpParams = productId ? httpParams.set('productId', productId) : httpParams;
+    return this.http.get(`/recurringdepositaccounts/template`, { params: httpParams });
+  }
+
+  /**
+   * Post Request to create a recurring deposit account
+   * @param recurringAccountData Recurring Deposit Account Data
+   */
+  createRecurringDepositAccount(recurringAccountData: any): Observable<any> {
+    return this.http.post(`/recurringdepositaccounts`, recurringAccountData);
+  }
 }