feat: add create savings account page (#883)

Fixes: #882

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

@@ -33,7 +33,7 @@
     <mat-card-actions class="client-actions">
       <button mat-raised-button>Edit</button>
       <button mat-raised-button>+ New Loan</button>
-      <button mat-raised-button>+ New Savings</button>
+      <button mat-raised-button [routerLink]="['savingsaccounts', 'create-savings-account']">+ New Savings</button>
       <button mat-raised-button>+ Deposit</button>
       <button mat-raised-button [matMenuTriggerFor]="More">More</button>
       <mat-menu #More="matMenu">

src/app/savings/common-resolvers/savings-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 { SavingsService } from '../savings.service';
+
+/**
+ * Savings Account Template resolver.
+ */
+@Injectable()
+export class SavingsAccountTemplateResolver implements Resolve<Object> {
+
+  /**
+   * @param {savingsService} SavingsService Savings service.
+   */
+  constructor(private savingsService: SavingsService) { }
+
+  /**
+   * 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.savingsService.getSavingsAccountTemplate(clientId);
+  }
+
+}

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

@@ -0,0 +1,77 @@
+<div class="container">
+
+  <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #savingProductStepper>
+
+    <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]="savingsAccountDetailsForm">
+
+      <ng-template matStepLabel>DETAILS</ng-template>
+
+      <mifosx-savings-account-details-step
+        [savingsAccountTemplate]="savingsAccountTemplate" 
+        (savingsAccountProductTemplate)="setTemplate($event)"
+      >
+      </mifosx-savings-account-details-step>
+
+    </mat-step>
+
+    <mat-step [stepControl]="savingsAccountTermsForm">
+
+      <ng-template matStepLabel>TERMS</ng-template>
+
+      <mifosx-savings-account-terms-step 
+        [savingsAccountProductTemplate]="savingsAccountProductTemplate"
+      ></mifosx-savings-account-terms-step>
+
+    </mat-step>
+
+    <mat-step>
+
+      <ng-template matStepLabel>CHARGES</ng-template>
+
+      <mifosx-savings-account-charges-step
+        [savingsAccountProductTemplate]="savingsAccountProductTemplate"
+        [savingsAccountTemplate]="savingsAccountTemplate"
+        [currencyCode]="savingsAccountTermsForm.get('currencyCode')"
+      >
+      </mifosx-savings-account-charges-step>
+
+    </mat-step>
+
+    <mat-step *ngIf="savingsAccountFormValid" completed>
+
+      <ng-template matStepLabel>PREVIEW</ng-template>
+
+      <mifosx-savings-account-preview-step
+        [savingsAccountProductTemplate]="savingsAccountProductTemplate"
+        [savingsAccountTemplate]="savingsAccountTemplate"
+        [savingsAccountTermsForm]="savingsAccountTermsForm"
+        [savingsAccount]="savingsAccount"
+        (submit)="submit()"
+      >
+      </mifosx-savings-account-preview-step>
+
+    </mat-step>
+
+  </mat-horizontal-stepper>
+
+</div>

src/app/savings/create-savings-account/create-savings-account.component.spec.ts

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

src/app/savings/create-savings-account/create-savings-account.component.ts

@@ -0,0 +1,124 @@
+/** Angular Imports */
+import { Component, ViewChild } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { DatePipe } from '@angular/common';
+
+/** Custom Components */
+import { SavingsAccountDetailsStepComponent } from '../savings-account-stepper/savings-account-details-step/savings-account-details-step.component';
+import { SavingsAccountTermsStepComponent } from '../savings-account-stepper/savings-account-terms-step/savings-account-terms-step.component';
+import { SavingsAccountChargesStepComponent } from '../savings-account-stepper/savings-account-charges-step/savings-account-charges-step.component';
+
+/** Custom Services */
+import { SavingsService } from '../savings.service';
+
+/**
+ * Create Savings Account Component
+ */
+@Component({
+  selector: 'mifosx-create-savings-account',
+  templateUrl: './create-savings-account.component.html',
+  styleUrls: ['./create-savings-account.component.scss']
+})
+export class CreateSavingsAccountComponent {
+
+  /** Savings Account Template */
+  savingsAccountTemplate: any;
+  /** Savings Account Product Template */
+  savingsAccountProductTemplate: any;
+
+  /** Savings Account Details Step */
+  @ViewChild(SavingsAccountDetailsStepComponent) savingsAccountDetailsStep: SavingsAccountDetailsStepComponent;
+  /** Savings Account Terms Step */
+  @ViewChild(SavingsAccountTermsStepComponent) savingsAccountTermsStep: SavingsAccountTermsStepComponent;
+  /** Savings Account Charges Step */
+  @ViewChild(SavingsAccountChargesStepComponent) savingsAccountChargesStep: SavingsAccountChargesStepComponent;
+
+  /**
+   * Fetches savings account template from `resolve`
+   * @param {ActivatedRoute} route Activated Route
+   * @param {Router} router Router
+   * @param {DatePipe} datePipe Date Pipe
+   * @param {SavingsService} savingsService Savings Service
+   */
+  constructor(private route: ActivatedRoute,
+              private router: Router,
+              private datePipe: DatePipe,
+              private savingsService: SavingsService
+              ) {
+    this.route.data.subscribe((data: { savingsAccountTemplate: any }) => {
+      this.savingsAccountTemplate = data.savingsAccountTemplate;
+    });
+  }
+
+  /**
+   * Sets savings account product template.
+   * @param {any} $event API response
+   */
+  setTemplate($event: any) {
+    this.savingsAccountProductTemplate = $event;
+  }
+
+  /**
+   * Retrieves savings account details form.
+   */
+  get savingsAccountDetailsForm() {
+    return this.savingsAccountDetailsStep.savingsAccountDetailsForm;
+  }
+
+  /**
+   * Retrieves savings account terms form.
+   */
+  get savingsAccountTermsForm() {
+    return this.savingsAccountTermsStep.savingsAccountTermsForm;
+  }
+
+  /**
+   * Checks validity of overall savings account form.
+   */
+  get savingsAccountFormValid() {
+    return (
+      this.savingsAccountDetailsForm.valid &&
+      this.savingsAccountTermsForm.valid
+    );
+  }
+
+  /**
+   * Retrieves savings account object.
+   */
+  get savingsAccount() {
+    return {
+      ...this.savingsAccountDetailsStep.savingsAccountDetails,
+      ...this.savingsAccountTermsStep.savingsAccountTerms,
+      ...this.savingsAccountChargesStep.savingsAccountCharges
+    };
+  }
+
+  /**
+   * Creates a new share account.
+   */
+  submit() {
+    // TODO: Update once language and date settings are setup
+    const locale = 'en';
+    const dateFormat = 'dd MMMM yyyy';
+    const monthDayFormat = 'dd MMMM';
+    const savingsAccount = {
+      ...this.savingsAccount,
+      clientId: this.savingsAccountTemplate.clientId,
+      charges: this.savingsAccount.charges.map((charge: any) => ({
+        chargeId: charge.id,
+        amount: charge.amount,
+        dueDate: charge.dueDate,
+        feeOnMonthDay: charge.feeOnMonthDay,
+        feeInterval: charge.feeInterval
+      })),
+      submittedOnDate: this.datePipe.transform(this.savingsAccount.submittedOnDate, dateFormat),
+      dateFormat,
+      monthDayFormat,
+      locale
+    };
+    this.savingsService.createSavingsAccount(savingsAccount).subscribe((response: any) => {
+      this.router.navigate(['../', response.resourceId], { relativeTo: this.route });
+    });
+  }
+
+}

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

@@ -0,0 +1,112 @@
+<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 || 'Unassigned'}}
+        </span>
+        <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
+          {{charge.feeOnMonthDay || '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>
+    Next&nbsp;&nbsp;
+    <fa-icon icon="arrow-right"></fa-icon>
+  </button>
+</div>

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

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

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

@@ -0,0 +1,202 @@
+/** Angular Imports */
+import { Component, OnInit, OnChanges, Input } from '@angular/core';
+import { MatDialog } from '@angular/material';
+import { FormControl } from '@angular/forms';
+import { DatePipe } from '@angular/common';
+
+/** Custom Dialogs */
+import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
+import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
+
+/** Custom Models */
+import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
+import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
+import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
+
+/**
+ * Savings Account Charges Step
+ */
+@Component({
+  selector: 'mifosx-savings-account-charges-step',
+  templateUrl: './savings-account-charges-step.component.html',
+  styleUrls: ['./savings-account-charges-step.component.scss']
+})
+export class SavingsAccountChargesStepComponent implements OnInit, OnChanges {
+
+  /** Savings Account Product Template */
+  @Input() savingsAccountProductTemplate: any;
+  /** Savings Account Template */
+  @Input() savingsAccountTemplate: any;
+  /** Currency Code */
+  @Input() currencyCode: FormControl;
+
+  /** Charge Data */
+  chargeData: any = [];
+  /** Charges Data Source */
+  chargesDataSource: {}[] = [];
+  /** Component is pristine if there has been no changes by user interaction */
+  pristine = true;
+  /** For Edit Savings Account Form */
+  isChargesPatched = false;
+  /** Display columns for charges table */
+  displayedColumns: string[] = ['name', 'chargeCalculationType', 'amount', 'chargeTimeType', 'date', 'repaymentsEvery', 'action'];
+
+  /**
+   * @param {MatDialog} dialog Mat Dialog
+   */
+  constructor(public dialog: MatDialog,
+              private datePipe: DatePipe) {}
+
+   ngOnInit() {
+    this.currencyCode.valueChanges.subscribe(() => {
+      if (!this.isChargesPatched && this.savingsAccountTemplate.charges) {
+        this.chargesDataSource = this.savingsAccountTemplate.charges || [];
+        this.isChargesPatched = true;
+      } else {
+        this.chargesDataSource = [];
+      }
+    });
+   }
+
+   ngOnChanges() {
+    if (this.savingsAccountProductTemplate) {
+      this.chargeData = this.savingsAccountProductTemplate.chargeOptions;
+    }
+   }
+
+  /**
+   * Adds the charge to charges table
+   * @param {any} charge Charge
+   */
+  addCharge(charge: any) {
+    this.chargesDataSource = this.chargesDataSource.concat([charge.value]);
+    charge.value = '';
+    this.pristine = false;
+  }
+
+  /**
+   * Edits the Charge Amount
+   * @param {any} charge Charge
+   */
+  editChargeAmount(charge: any) {
+    const formfields: FormfieldBase[] = [
+      new InputBase({
+        controlName: 'amount',
+        label: 'Amount',
+        value: charge.amount,
+        type: 'text',
+        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;
+  }
+
+  /**
+   * Removes the charge from charges table
+   * @param {any} 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([]);
+      }
+    });
+    this.pristine = false;
+  }
+
+  /**
+   * Returns savings account charges
+   */
+  get savingsAccountCharges() {
+    return { charges: this.chargesDataSource };
+  }
+
+}

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

@@ -0,0 +1,55 @@
+<form [formGroup]="savingsAccountDetailsForm">
+
+  <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>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>External ID</mat-label>
+      <input matInput formControlName="externalId">
+    </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/savings/savings-account-stepper/savings-account-details-step/savings-account-details-step.component.spec.ts

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

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

@@ -0,0 +1,85 @@
+/** Angular Imports */
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+
+/** Custom Services */
+import { SavingsService } from 'app/savings/savings.service';
+
+/**
+ * Savings Account Details Step
+ */
+@Component({
+  selector: 'mifosx-savings-account-details-step',
+  templateUrl: './savings-account-details-step.component.html',
+  styleUrls: ['./savings-account-details-step.component.scss']
+})
+export class SavingsAccountDetailsStepComponent implements OnInit {
+
+  /** Savings Account Template */
+  @Input() savingsAccountTemplate: 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;
+  /** Savings Account Details Form */
+  savingsAccountDetailsForm: FormGroup;
+
+  /** Savings Account Template with product data  */
+  @Output() savingsAccountProductTemplate = new EventEmitter();
+
+  /**
+   * Sets share account details form.
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {SavingsService} savingsService Savings Service.
+   */
+  constructor(private formBuilder: FormBuilder,
+              private savingsService: SavingsService) {
+    this.createSavingsAccountDetailsForm();
+  }
+
+  ngOnInit() {
+    this.buildDependencies();
+    if (this.savingsAccountTemplate) {
+      this.productData = this.savingsAccountTemplate.productOptions;
+    }
+  }
+
+  /**
+   * Creates savings account details form.
+   */
+  createSavingsAccountDetailsForm() {
+    this.savingsAccountDetailsForm = this.formBuilder.group({
+      'productId': ['', Validators.required],
+      'submittedOnDate': ['', Validators.required],
+      'fieldOfficerId': [''],
+      'externalId': ['']
+    });
+  }
+
+  /**
+   * Fetches savings account product template on productId value changes
+   */
+  buildDependencies() {
+    const clientId = this.savingsAccountTemplate.clientId;
+    this.savingsAccountDetailsForm.get('productId').valueChanges.subscribe((productId: string) => {
+      this.savingsService.getSavingsAccountTemplate(clientId, productId).subscribe((response: any) => {
+        this.savingsAccountProductTemplate.emit(response);
+        this.savingsAccountDetailsForm.get('fieldOfficerId').patchValue('');
+        this.fieldOfficerData = response.fieldOfficerOptions;
+      });
+    });
+  }
+
+  /**
+   * Returns savings account form value.
+   */
+  get savingsAccountDetails() {
+    return this.savingsAccountDetailsForm.value;
+  }
+
+}

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

@@ -0,0 +1,196 @@
+<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%">{{ savingsAccount.productId | find:savingsAccountTemplate.productOptions:'id':'name' }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Submitted On</span>
+    <span fxFlex="60%">{{ savingsAccount.submittedOnDate | date }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">External Id</span>
+    <span fxFlex="60%">{{ savingsAccount.externalId || 'Unassigned' }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Field Officer</span>
+    <span fxFlex="60%">{{ savingsAccount.fieldOfficerId | find:savingsAccountProductTemplate.fieldOfficerOptions:'id':'displayName' }}</span>
+  </div>
+
+  <h3 class="mat-h3" fxFlexFill>Terms</h3>
+
+  <mat-divider fxFlexFill></mat-divider>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Currency</span>
+    <span fxFlex="60%">{{ savingsAccountTermsForm.get('currencyCode').value  }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Decimal Places</span>
+    <span fxFlex="60%">{{ savingsAccountTermsForm.get('decimal').value }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Nominal Annual Interest Rate:</span>
+    <span fxFlex="60%">{{ savingsAccount.nominalAnnualInterestRate }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Interest Compounding Period:</span>
+    <span fxFlex="60%">{{ savingsAccount.interestCompoundingPeriodType | find:savingsAccountProductTemplate.interestCompoundingPeriodTypeOptions:'id':'value' }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Currency in multiples of</span>
+    <span fxFlex="60%">{{ savingsAccountTermsForm.get('currencyMultiple').value }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Interest Posting Period:</span>
+    <span fxFlex="60%">{{ savingsAccount.interestPostingPeriodType | find:savingsAccountProductTemplate.interestPostingPeriodTypeOptions:'id':'value' }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Interest Calculated using:</span>
+    <span fxFlex="60%">{{ savingsAccount.interestCalculationType | find:savingsAccountProductTemplate.interestCalculationTypeOptions:'id':'value' }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Days in Year:</span>
+    <span fxFlex="60%">{{ savingsAccount.interestCalculationDaysInYearType | find:savingsAccountProductTemplate.interestCalculationDaysInYearTypeOptions:'id':'value' }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="savingsAccount.minRequiredOpeningBalance">
+    <span fxFlex="40%">Minimum Opening Balance:</span>
+    <span fxFlex="60%">{{ savingsAccount.minRequiredOpeningBalance }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Apply Withdrawal Fee for Transfers:</span>
+    <span fxFlex="60%">{{ savingsAccount.withdrawalFeeForTransfers ? 'Yes' : 'No' }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="savingsAccount.lockinPeriodFrequency">
+    <span fxFlex="40%">Lock-in Period:</span>
+    <span fxFlex="60%">{{ savingsAccount.lockinPeriodFrequency + ' ' + (savingsAccount.lockinPeriodFrequencyType | find:savingsAccountProductTemplate.lockinPeriodFrequencyTypeOptions:'id':'value') }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Is Overdraft Allowed:</span>
+    <span fxFlex="60%">{{ savingsAccount.allowOverdraft ? 'Yes' : 'No' }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="savingsAccount.minOverdraftForInterestCalculation">
+    <span fxFlex="40%">Minimum Overdraft Required for Interest Calculation:</span>
+    <span fxFlex="60%">{{ savingsAccount.minOverdraftForInterestCalculation }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="savingsAccount.nominalAnnualInterestRateOverdraft">
+    <span fxFlex="40%">Nominal Annual Interest for Overdraft:</span>
+    <span fxFlex="60%">{{ savingsAccount.nominalAnnualInterestRateOverdraft }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="savingsAccount.overdraftLimit">
+    <span fxFlex="40%">Maximum Overdraft Amount Limit:</span>
+    <span fxFlex="60%">{{ savingsAccount.overdraftLimit }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Enforce Minimum Balance:</span>
+    <span fxFlex="60%">{{ savingsAccount.enforceMinRequiredBalance ? 'Yes' : 'No' }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="savingsAccount.minRequiredBalance">
+    <span fxFlex="40%">Minimum Balance:</span>
+    <span fxFlex="60%">{{ savingsAccount.minRequiredBalance }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="savingsAccount.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]="savingsAccount.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 || 'Unassigned'}}
+          </span>
+          <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
+            {{charge.feeOnMonthDay || '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/savings/savings-account-stepper/savings-account-preview-step/savings-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/savings/savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component.spec.ts

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

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

@@ -0,0 +1,31 @@
+/** Angular Imports */
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+/**
+ * Savings account preview step
+ */
+@Component({
+  selector: 'mifosx-savings-account-preview-step',
+  templateUrl: './savings-account-preview-step.component.html',
+  styleUrls: ['./savings-account-preview-step.component.scss']
+})
+export class SavingsAccountPreviewStepComponent {
+
+  /** Savings Account Product Template */
+  @Input() savingsAccountProductTemplate: any;
+  /** Savings Account Template */
+  @Input() savingsAccountTemplate: any;
+  /** Savings Account Terms Form */
+  @Input() savingsAccountTermsForm: any;
+  /** Savings Account */
+  @Input() savingsAccount: any;
+
+  /** Display columns for charges table */
+  chargesDisplayedColumns: string[] = ['name', 'chargeCalculationType', 'amount', 'chargeTimeType', 'date', 'repaymentsEvery'];
+
+  /** Form submission event */
+  @Output() submit = new EventEmitter();
+
+  constructor() { }
+
+}

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

@@ -0,0 +1,157 @@
+<form [formGroup]="savingsAccountTermsForm">
+
+  <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" fxLayoutAlign.gt-sm="start center">
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Currency</mat-label>
+      <input matInput formControlName="currencyCode">
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Decimal Places</mat-label>
+      <input type="number" matInput formControlName="decimal">
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Nominal Annual Interest Rate</mat-label>
+      <input type="number" matInput formControlName="nominalAnnualInterestRate" required>
+      <mat-error>
+        Nominal Annual Interest is <strong>required</strong>
+      </mat-error>
+    </mat-form-field>
+
+    <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>Currency in multiples of</mat-label>
+      <input type="number" matInput formControlName="currencyMultiple" >
+    </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>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Minimum Opening Balance</mat-label>
+      <input type="number" matInput formControlName="minRequiredOpeningBalance">
+    </mat-form-field>
+
+    <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="withdrawalFeeForTransfers" class="margin-v">
+      Apply Withdrawal Fee for Transfers
+    </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>
+
+    <mat-divider fxFlex="98%"></mat-divider>
+
+    <h3 fxFlex="23%" class="mat-h3">Overdraft</h3>
+
+    <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="allowOverdraft" class="margin-b">
+      Is Overdraft Allowed?
+    </mat-checkbox>
+
+    <div *ngIf="savingsAccountTermsForm.value.allowOverdraft" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+      <mat-form-field fxFlex="31%">
+        <mat-label>Minimum Overdraft Required for Interest Calculation</mat-label>
+        <input type="number" matInput formControlName="minOverdraftForInterestCalculation">
+      </mat-form-field>
+
+      <mat-form-field fxFlex="31%">
+        <mat-label>Nominal Annual Interest for Overdraft</mat-label>
+        <input type="number" matInput formControlName="nominalAnnualInterestRateOverdraft">
+      </mat-form-field>
+
+      <mat-form-field fxFlex="31%">
+        <mat-label>Maximum Overdraft Amount Limit</mat-label>
+        <input type="number" matInput formControlName="overdraftLimit">
+      </mat-form-field>
+
+    </div>
+
+    <mat-divider fxFlex="98%"></mat-divider>
+
+    <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="enforceMinRequiredBalance" class="margin-v">
+      Enforce Minimum Balance
+    </mat-checkbox>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Minimum Balance</mat-label>
+      <input type="number" matInput formControlName="minRequiredBalance">
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%" *ngIf="savingsAccountTermsForm.controls.minBalanceForInterestCalculation.value">
+      <mat-label>Balance Required for Interest Calculation</mat-label>
+      <input type="number" matInput formControlName="minBalanceForInterestCalculation">
+    </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/savings/savings-account-stepper/savings-account-terms-step/savings-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/savings/savings-account-stepper/savings-account-terms-step/savings-account-terms-step.component.spec.ts

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

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

@@ -0,0 +1,114 @@
+/** Angular Imports */
+import { Component, OnChanges, Input } from '@angular/core';
+import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
+
+/**
+ * Savings Account Terms Step
+ */
+@Component({
+  selector: 'mifosx-savings-account-terms-step',
+  templateUrl: './savings-account-terms-step.component.html',
+  styleUrls: ['./savings-account-terms-step.component.scss']
+})
+export class SavingsAccountTermsStepComponent implements OnChanges {
+
+  /** Savings Account and Product Template */
+  @Input() savingsAccountProductTemplate: any;
+
+  /** Minimum date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum date allowed. */
+  maxDate = new Date();
+  /** Savings Account Terms Form */
+  savingsAccountTermsForm: FormGroup;
+  /** Lockin Period Frequency Type Data */
+  lockinPeriodFrequencyTypeData: any;
+  /** 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.createSavingsAccountTermsForm();
+    this.buildDependencies();
+  }
+
+  ngOnChanges() {
+    if (this.savingsAccountProductTemplate) {
+      this.savingsAccountTermsForm.patchValue({
+        'currencyCode': this.savingsAccountProductTemplate.currency.code,
+        'decimal': this.savingsAccountProductTemplate.currency.decimalPlaces,
+        'currencyMultiple': this.savingsAccountProductTemplate.currency.inMultiplesOf,
+        'minBalanceForInterestCalculation': this.savingsAccountProductTemplate.minBalanceForInterestCalculation
+      });
+      this.setOptions();
+    }
+  }
+
+  /**
+   * Creates savings account terms form.
+   */
+  createSavingsAccountTermsForm() {
+    this.savingsAccountTermsForm = this.formBuilder.group({
+      'currencyCode': [{value: '', disabled: true}],
+      'decimal': [{value: '',  disabled: true}],
+      'nominalAnnualInterestRate': ['', Validators.required],
+      'interestCompoundingPeriodType': ['', Validators.required],
+      'currencyMultiple': [{value: '', disabled: true}],
+      'interestPostingPeriodType': ['', Validators.required],
+      'interestCalculationType': ['', Validators.required],
+      'interestCalculationDaysInYearType': ['', Validators.required],
+      'minRequiredOpeningBalance': [''],
+      'withdrawalFeeForTransfers': [false],
+      'lockinPeriodFrequency': [''],
+      'lockinPeriodFrequencyType': [''],
+      'allowOverdraft': [false],
+      'enforceMinRequiredBalance': [false],
+      'minRequiredBalance': [''],
+      'minBalanceForInterestCalculation': [{value: '', disabled: true}]
+    });
+  }
+
+  /**
+   * Sets all select dropdown options.
+   */
+  setOptions() {
+    this.lockinPeriodFrequencyTypeData = this.savingsAccountProductTemplate.lockinPeriodFrequencyTypeOptions;
+    this.interestCompoundingPeriodTypeData = this.savingsAccountProductTemplate.interestCompoundingPeriodTypeOptions;
+    this.interestPostingPeriodTypeData = this.savingsAccountProductTemplate.interestPostingPeriodTypeOptions;
+    this.interestCalculationTypeData = this.savingsAccountProductTemplate.interestCalculationTypeOptions;
+    this.interestCalculationDaysInYearTypeData = this.savingsAccountProductTemplate.interestCalculationDaysInYearTypeOptions;
+  }
+
+  /**
+   * Subscribes to value changes and sets new form controls accordingly.
+   */
+  buildDependencies() {
+    this.savingsAccountTermsForm.get('allowOverdraft').valueChanges.subscribe((allowOverdraft: any) => {
+      if (allowOverdraft) {
+        this.savingsAccountTermsForm.addControl('minOverdraftForInterestCalculation', new FormControl(''));
+        this.savingsAccountTermsForm.addControl('nominalAnnualInterestRateOverdraft', new FormControl(''));
+        this.savingsAccountTermsForm.addControl('overdraftLimit', new FormControl(''));
+      } else {
+        this.savingsAccountTermsForm.removeControl('minOverdraftForInterestCalculation');
+        this.savingsAccountTermsForm.removeControl('nominalAnnualInterestRateOverdraft');
+        this.savingsAccountTermsForm.removeControl('overdraftLimit');
+      }
+    });
+  }
+
+  /**
+   * Returns savings account terms form value.
+   */
+  get savingsAccountTerms() {
+    return this.savingsAccountTermsForm.value;
+  }
+
+}

src/app/savings/savings-routing.module.ts

@@ -13,6 +13,7 @@ import { AddSavingsChargeComponent } from './add-savings-charge/add-savings-char
 import { ChargesTabComponent } from './savings-account-view/charges-tab/charges-tab.component';
 import { StandingInstructionsTabComponent } from './savings-account-view/standing-instructions-tab/standing-instructions-tab.component';
 import { DatatableTabsComponent } from './savings-account-view/datatable-tabs/datatable-tabs.component';
+import { CreateSavingsAccountComponent } from './create-savings-account/create-savings-account.component';
 
 /** Custom Resolvers */
 import { SavingAccountTransactionTemplateResolver } from './common-resolvers/saving-transaction-template.resolver';
@@ -20,12 +21,21 @@ import { SavingsChargeTemplateResolver } from './common-resolvers/savings-charge
 import { SavingsAccountViewResolver } from './common-resolvers/savings-account-view.resolver';
 import { SavingsDatatableResolver } from './common-resolvers/savings-datatable.resolver';
 import { SavingsDatatablesResolver } from './common-resolvers/savings-datatables.resolver';
+import { SavingsAccountTemplateResolver } from './common-resolvers/savings-account-template.resolver';
 
 const routes: Routes = [
   {
     path: '',
     data: { title: extract('All Savings'), breadcrumb: 'Savings', routeParamBreadcrumb: false },
     children: [
+      {
+        path: 'create-savings-account',
+        data: { title: extract('Create Savings Account'), breadcrumb: 'Create Savings Account' },
+        component: CreateSavingsAccountComponent,
+        resolve: {
+          savingsAccountTemplate: SavingsAccountTemplateResolver
+        }
+      },
       {
         path: ':savingAccountId',
         data: { title: extract('Saving Account View'), routeParamBreadcrumb: 'savingAccountId' },
@@ -92,6 +102,7 @@ const routes: Routes = [
               SavingsChargeTemplateResolver,
               SavingsAccountViewResolver,
               SavingsDatatablesResolver,
-              SavingsDatatableResolver]
+              SavingsDatatableResolver,
+              SavingsAccountTemplateResolver]
 })
 export class SavingsRoutingModule {}

src/app/savings/savings.module.ts

@@ -19,6 +19,11 @@ import { StandingInstructionsTabComponent } from './savings-account-view/standin
 import { DatatableTabsComponent } from './savings-account-view/datatable-tabs/datatable-tabs.component';
 import { MultiRowComponent } from './savings-account-view/datatable-tabs/multi-row/multi-row.component';
 import { SingleRowComponent } from './savings-account-view/datatable-tabs/single-row/single-row.component';
+import { CreateSavingsAccountComponent } from './create-savings-account/create-savings-account.component';
+import { SavingsAccountDetailsStepComponent } from './savings-account-stepper/savings-account-details-step/savings-account-details-step.component';
+import { SavingsAccountChargesStepComponent } from './savings-account-stepper/savings-account-charges-step/savings-account-charges-step.component';
+import { SavingsAccountTermsStepComponent } from './savings-account-stepper/savings-account-terms-step/savings-account-terms-step.component';
+import { SavingsAccountPreviewStepComponent } from './savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component';
 
 /**
  * Savings Module
@@ -42,7 +47,12 @@ import { SingleRowComponent } from './savings-account-view/datatable-tabs/single
     StandingInstructionsTabComponent,
     DatatableTabsComponent,
     MultiRowComponent,
-    SingleRowComponent
+    SingleRowComponent,
+    CreateSavingsAccountComponent,
+    SavingsAccountDetailsStepComponent,
+    SavingsAccountChargesStepComponent,
+    SavingsAccountTermsStepComponent,
+    SavingsAccountPreviewStepComponent
   ],
   providers: [DatePipe]
 })

src/app/savings/savings.service.ts

@@ -138,4 +138,22 @@ export class SavingsService {
     return this.http.delete(`/datatables/${datatableName}/${accountId}`, { params: httpParams });
   }
 
+  /**
+   * @param clientId Client Id assosciated with savings account.
+   * @returns {Observable<any>} Savings account template.
+   */
+  getSavingsAccountTemplate(clientId: string, productId?: string): Observable<any> {
+    let httpParams = new HttpParams().set('clientId', clientId);
+    httpParams = productId ? httpParams.set('productId', productId) : httpParams;
+    return this.http.get('/savingsaccounts/template', { params: httpParams });
+  }
+
+  /**
+   * @param {any} savingsAccount Savings Account
+   * @returns {Observable<any>}
+   */
+  createSavingsAccount(savingsAccount: any): Observable<any> {
+    return this.http.post('/savingsaccounts', savingsAccount);
+  }
+
 }

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

@@ -35,7 +35,7 @@
     <ng-container matColumnDef="amount">
       <th mat-header-cell *matHeaderCellDef> Amount </th>
       <td mat-cell *matCellDef="let charge">
-        {{ charge.amount }} 
+        {{ charge.amount || charge.amountOrPercentage }} 
         <button mat-icon-button color="primary" (click)="editCharge(charge)">
           <fa-icon icon="pen"></fa-icon>
         </button>

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

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, OnChanges, Input } from '@angular/core';
 import { MatDialog } from '@angular/material';
 import { FormControl } from '@angular/forms';
 
@@ -19,7 +19,7 @@ import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
   templateUrl: './shares-account-charges-step.component.html',
   styleUrls: ['./shares-account-charges-step.component.scss']
 })
-export class SharesAccountChargesStepComponent implements OnInit {
+export class SharesAccountChargesStepComponent implements OnInit, OnChanges {
 
   /** Shares Account Product Template */
   @Input() sharesAccountProductTemplate: any;
@@ -29,9 +29,9 @@ export class SharesAccountChargesStepComponent implements OnInit {
   @Input() currencyCode: FormControl;
 
   /** Charge Data */
-  chargeData: any;
+  chargeData: any = [];
   /** Charges Data Source */
-  chargesDataSource: {}[];
+  chargesDataSource: {}[] = [];
   /** Component is pristine if there has been no changes by user interaction */
   pristine = true;
   /** For Edit Shares Account Form */
@@ -45,12 +45,6 @@ export class SharesAccountChargesStepComponent implements OnInit {
   constructor(public dialog: MatDialog) {}
 
   ngOnInit() {
-    this.chargesDataSource = [];
-    this.chargeData = this.sharesAccountTemplate.chargeOptions.map((charge: any) => {
-      charge.chargeId = charge.id;
-      delete charge.id;
-      return charge;
-    });
     this.currencyCode.valueChanges.subscribe(() => {
       if (!this.isChargesPatched && this.sharesAccountTemplate.charges) {
         this.chargesDataSource = this.sharesAccountTemplate.charges;
@@ -61,6 +55,12 @@ export class SharesAccountChargesStepComponent implements OnInit {
     });
   }
 
+  ngOnChanges() {
+    if (this.sharesAccountProductTemplate) {
+      this.chargeData = this.sharesAccountProductTemplate.charges;
+    }
+  }
+
   /**
    * Adds the charge to charges table
    * @param {any} charge Charge
@@ -80,7 +80,7 @@ export class SharesAccountChargesStepComponent implements OnInit {
       new InputBase({
         controlName: 'amount',
         label: 'Amount',
-        value: charge.amount,
+        value: charge.amount || charge.amountOrPercentage,
         type: 'text',
         required: true,
       }),

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

@@ -98,7 +98,7 @@
       <ng-container matColumnDef="amount">
         <th mat-header-cell *matHeaderCellDef> Amount </th>
         <td mat-cell *matCellDef="let charge">
-          {{ charge.amount }}
+          {{ charge.amount || charge.amountOrPercentage }}
         </td>
       </ng-container>