feat: add create shares account page (#877)

Fixes: #223

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

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

src/app/shared/icons.module.ts

@@ -88,7 +88,8 @@ import {
   faLaptop,
   faDonate,
   faMoneyBill,
-  faChartLine
+  faChartLine,
+  faPen
 } from '@fortawesome/free-solid-svg-icons';
 
 /** Add icons to the library for convenient access in other components. */
@@ -176,7 +177,8 @@ library.add(
   faLaptop,
   faDonate,
   faMoneyBill,
-  faChartLine
+  faChartLine,
+  faPen
 );
 
 /**

src/app/shares/common-resolvers/shares-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 { SharesService } from '../shares.service';
+
+/**
+ * Shares Account Template resolver.
+ */
+@Injectable()
+export class SharesAccountTemplateResolver implements Resolve<Object> {
+
+  /**
+   * @param {SharesService} SharesService Shares service.
+   */
+  constructor(private sharesService: SharesService) { }
+
+  /**
+   * 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.sharesService.getSharesAccountTemplate(clientId);
+  }
+
+}

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

@@ -0,0 +1,75 @@
+<div class="container">
+
+  <mat-horizontal-stepper class="mat-elevation-z8" labelPosition="bottom" #shareProductStepper>
+
+    <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]="sharesAccountDetailsForm">
+
+      <ng-template matStepLabel>DETAILS</ng-template>
+
+      <mifosx-shares-account-details-step
+        [sharesAccountTemplate]="sharesAccountTemplate" 
+        (sharesAccountProductTemplate)="setTemplate($event)"
+      >
+      </mifosx-shares-account-details-step>
+
+    </mat-step>
+
+    <mat-step [stepControl]="sharesAccountTermsForm">
+
+      <ng-template matStepLabel>TERMS</ng-template>
+
+      <mifosx-shares-account-terms-step [sharesAccountProductTemplate]="sharesAccountProductTemplate"></mifosx-shares-account-terms-step>
+
+    </mat-step>
+
+    <mat-step>
+
+      <ng-template matStepLabel>CHARGES</ng-template>
+
+      <mifosx-shares-account-charges-step
+        [sharesAccountProductTemplate]="sharesAccountProductTemplate"
+        [sharesAccountTemplate]="sharesAccountTemplate" 
+        [currencyCode]="sharesAccountTermsForm.get('currencyCode')"
+      >
+      </mifosx-shares-account-charges-step>
+
+    </mat-step>
+
+    <mat-step *ngIf="sharesAccountFormValid" completed>
+
+      <ng-template matStepLabel>PREVIEW</ng-template>
+
+      <mifosx-shares-account-preview-step
+        [sharesAccountProductTemplate]="sharesAccountProductTemplate"
+        [sharesAccountTemplate]="sharesAccountTemplate"
+        [sharesAccountTermsForm]="sharesAccountTermsForm"
+        [sharesAccount]="sharesAccount"
+        (submit)="submit()"
+      >
+      </mifosx-shares-account-preview-step>
+
+    </mat-step>
+
+  </mat-horizontal-stepper>
+
+</div>

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

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

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

@@ -0,0 +1,117 @@
+/** Angular Imports */
+import { Component, ViewChild } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { DatePipe } from '@angular/common';
+
+/** Custom Components */
+import { SharesAccountDetailsStepComponent } from '../shares-account-stepper/shares-account-details-step/shares-account-details-step.component';
+import { SharesAccountTermsStepComponent } from '../shares-account-stepper/shares-account-terms-step/shares-account-terms-step.component';
+import { SharesAccountChargesStepComponent } from '../shares-account-stepper/shares-account-charges-step/shares-account-charges-step.component';
+
+/** Custom Services */
+import { SharesService } from '../shares.service';
+
+/**
+ * Create Shares Account Component
+ */
+@Component({
+  selector: 'mifosx-create-shares-account',
+  templateUrl: './create-shares-account.component.html',
+  styleUrls: ['./create-shares-account.component.scss']
+})
+export class CreateSharesAccountComponent {
+
+  /** Shares Account Template */
+  sharesAccountTemplate: any;
+  /** Shares Account Product Template */
+  sharesAccountProductTemplate: any;
+
+  /** Shares Account Details Step */
+  @ViewChild(SharesAccountDetailsStepComponent) sharesAccountDetailsStep: SharesAccountDetailsStepComponent;
+  /** Shares Account Terms Step */
+  @ViewChild(SharesAccountTermsStepComponent) sharesAccountTermsStep: SharesAccountTermsStepComponent;
+  /** Shares Account Charges Step */
+  @ViewChild(SharesAccountChargesStepComponent) sharesAccountChargesStep: SharesAccountChargesStepComponent;
+
+  /**
+   * Fetches shares account template from `resolve`
+   * @param {ActivatedRoute} route Activated Route
+   * @param {Router} router Router
+   * @param {DatePipe} datePipe Date Pipe
+   * @param {SharesService} sharesService Shares Service
+   */
+  constructor(private route: ActivatedRoute,
+              private router: Router,
+              private datePipe: DatePipe,
+              private sharesService: SharesService) {
+    this.route.data.subscribe((data: { sharesAccountTemplate: any }) => {
+      this.sharesAccountTemplate = data.sharesAccountTemplate;
+    });
+  }
+
+  /**
+   * Sets shares account product template.
+   * @param {any} $event API response
+   */
+  setTemplate($event: any) {
+    this.sharesAccountProductTemplate = $event;
+  }
+
+  /**
+   * Retrieves shares account details form.
+   */
+  get sharesAccountDetailsForm() {
+    return this.sharesAccountDetailsStep.sharesAccountDetailsForm;
+  }
+
+  /**
+   * Retrieves shares account terms form.
+   */
+  get sharesAccountTermsForm() {
+    return this.sharesAccountTermsStep.sharesAccountTermsForm;
+  }
+
+  /**
+   * Checks validity of overall shares account form.
+   */
+  get sharesAccountFormValid() {
+    return (
+      this.sharesAccountDetailsForm.valid &&
+      this.sharesAccountTermsForm.valid
+    );
+  }
+
+  /**
+   * Retrieves shares account object.
+   */
+  get sharesAccount() {
+    return {
+      ...this.sharesAccountDetailsStep.sharesAccountDetails,
+      ...this.sharesAccountTermsStep.sharesAccountTerms,
+      ...this.sharesAccountChargesStep.sharesAccountCharges
+    };
+  }
+
+  /**
+   * Creates a new share account.
+   */
+  submit() {
+    // TODO: Update once language and date settings are setup
+    const locale = 'en';
+    const dateFormat = 'dd MMMM yyyy';
+    const sharesAccount = {
+      ...this.sharesAccount,
+      clientId: this.sharesAccountTemplate.clientId,
+      charges: this.sharesAccount.charges.map((charge: any) => ({ chargeId: charge.chargeId, amount: charge.amount })),
+      applicationDate: this.datePipe.transform(this.sharesAccount.applicationDate, dateFormat),
+      submittedDate: this.datePipe.transform(this.sharesAccount.submittedDate, dateFormat),
+      unitPrice: this.sharesAccountTermsForm.get('unitPrice').value,
+      dateFormat,
+      locale
+    };
+    this.sharesService.createSharesAccount(sharesAccount).subscribe((response: any) => {
+      this.router.navigate(['../', response.resourceId], { relativeTo: this.route });
+    });
+  }
+
+}

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

@@ -0,0 +1,77 @@
+<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)="editCharge(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="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/shares/shares-account-stepper/shares-account-charges-step/shares-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/shares/shares-account-stepper/shares-account-charges-step/shares-account-charges-step.component.spec.ts

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

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

@@ -0,0 +1,117 @@
+/** Angular Imports */
+import { Component, OnInit, OnChanges, Input } from '@angular/core';
+import { MatDialog } from '@angular/material';
+import { FormControl } from '@angular/forms';
+
+/** 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';
+
+/**
+ * Shares Account Charges Step
+ */
+@Component({
+  selector: 'mifosx-shares-account-charges-step',
+  templateUrl: './shares-account-charges-step.component.html',
+  styleUrls: ['./shares-account-charges-step.component.scss']
+})
+export class SharesAccountChargesStepComponent implements OnInit, OnChanges {
+
+  /** Shares Account Product Template */
+  @Input() sharesAccountProductTemplate: any;
+  /** Shares Account Template */
+  @Input() sharesAccountTemplate: any;
+  /** Currency Code */
+  @Input() currencyCode: FormControl;
+
+  /** Charge Data */
+  chargeData: any;
+  /** Charges Data Source */
+  chargesDataSource: {}[];
+  /** Display columns for charges table */
+  displayedColumns: string[] = ['name', 'chargeCalculationType', 'amount', 'chargeTimeType', 'action'];
+
+  /**
+   * @param {MatDialog} dialog Mat Dialog
+   */
+  constructor(public dialog: MatDialog) {}
+
+  ngOnInit() {
+    this.chargeData = this.sharesAccountTemplate.chargeOptions.map((charge: any) => {
+      charge.chargeId = charge.id;
+      delete charge.id;
+      return charge;
+    });
+    this.currencyCode.valueChanges.subscribe(() => this.chargesDataSource = []);
+  }
+
+  ngOnChanges() {
+    this.chargesDataSource = this.sharesAccountProductTemplate ? (this.sharesAccountProductTemplate.charges || []) : [];
+  }
+
+  /**
+   * Adds the charge to charges table
+   * @param {any} charge Charge
+   */
+  addCharge(charge: any) {
+    this.chargesDataSource = this.chargesDataSource.concat([charge.value]);
+    charge.value = '';
+  }
+
+  /**
+   * Edits Charge Amount
+   * @param {any} charge Charge
+   */
+  editCharge(charge: any) {
+    const formfields: FormfieldBase[] = [
+      new InputBase({
+        controlName: 'amount',
+        label: 'Amount',
+        value: charge.amount,
+        type: 'text',
+        required: true,
+      }),
+    ];
+    const data = {
+      title: 'Edit Charge',
+      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([]);
+      }
+    });
+  }
+
+  /**
+   * 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([]);
+      }
+    });
+  }
+
+  /**
+   * Returns shares account charges
+   */
+  get sharesAccountCharges() {
+    return { charges: this.chargesDataSource };
+  }
+
+}

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

@@ -0,0 +1,46 @@
+<form [formGroup]="sharesAccountDetailsForm">
+
+  <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="submittedDate" 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>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/shares/shares-account-stepper/shares-account-details-step/shares-account-details-step.component.spec.ts

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

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

@@ -0,0 +1,78 @@
+/** Angular Imports */
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+
+/** Custom Services */
+import { SharesService } from 'app/shares/shares.service';
+
+/**
+ * Shares Account Details Step
+ */
+@Component({
+  selector: 'mifosx-shares-account-details-step',
+  templateUrl: './shares-account-details-step.component.html',
+  styleUrls: ['./shares-account-details-step.component.scss']
+})
+export class SharesAccountDetailsStepComponent implements OnInit {
+
+  /** Shares Account Template */
+  @Input() sharesAccountTemplate: any;
+
+  /** Minimum date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum date allowed. */
+  maxDate = new Date();
+  /** Product Data */
+  productData: any;
+  /** Shares Account Details Form */
+  sharesAccountDetailsForm: FormGroup;
+
+  /** Shares Account Template with product data  */
+  @Output() sharesAccountProductTemplate = new EventEmitter();
+
+  /**
+   * Sets share account details form.
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {SharesService} sharesService Shares Service.
+   */
+  constructor(private formBuilder: FormBuilder,
+              private sharesService: SharesService) {
+    this.createSharesAccountDetailsForm();
+  }
+
+  ngOnInit() {
+    this.productData = this.sharesAccountTemplate.productOptions;
+    this.buildDependencies();
+  }
+
+  /**
+   * Creates shares account details form.
+   */
+  createSharesAccountDetailsForm() {
+    this.sharesAccountDetailsForm = this.formBuilder.group({
+      'productId': ['', Validators.required],
+      'submittedDate': ['', Validators.required],
+      'externalId': ['']
+    });
+  }
+
+  /**
+   * Fetches shares account product template on productId value changes
+   */
+  buildDependencies() {
+    const clientId = this.sharesAccountTemplate.clientId;
+    this.sharesAccountDetailsForm.get('productId').valueChanges.subscribe((productId: string) => {
+      this.sharesService.getSharesAccountTemplate(clientId, productId).subscribe((response: any) => {
+        this.sharesAccountProductTemplate.emit(response);
+      });
+    });
+  }
+
+  /**
+   * Returns shares account form value.
+   */
+  get sharesAccountDetails() {
+    return this.sharesAccountDetailsForm.value;
+  }
+
+}

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

@@ -0,0 +1,132 @@
+<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%">{{ sharesAccount.productId | find:sharesAccountTemplate.productOptions:'id':'name' }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Submitted On</span>
+    <span fxFlex="60%">{{ sharesAccount.submittedDate | date }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">External Id</span>
+    <span fxFlex="60%">{{ sharesAccount.externalId || 'Unassigned' }}</span>
+  </div>
+
+  <h3 class="mat-h3" fxFlexFill>Terms</h3>
+
+  <mat-divider fxFlexFill></mat-divider>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Currency</span>
+    <span fxFlex="60%">{{ sharesAccountTermsForm.get('currencyCode').value | find:[sharesAccountProductTemplate.currency]:'code':'displayLabel' }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Decimal Places</span>
+    <span fxFlex="60%">{{ sharesAccountTermsForm.get('decimal').value }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Total Number of Shares</span>
+    <span fxFlex="60%">{{ sharesAccount.requestedShares }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Today's Price</span>
+    <span fxFlex="60%">{{ sharesAccountTermsForm.get('unitPrice').value }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Currency in multiples of</span>
+    <span fxFlex="60%">{{ sharesAccountTermsForm.get('currencyMultiple').value }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Default Savings Account</span>
+    <span fxFlex="60%">{{ sharesAccount.savingsAccountId | find:sharesAccountProductTemplate.clientSavingsAccounts:'id':'accountNo' }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="sharesAccount.minimumActivePeriod">
+    <span fxFlex="40%">Minimum Active Period</span>
+    <span fxFlex="60%">{{sharesAccount.minimumActivePeriod}}&nbsp;{{sharesAccount.minimumActivePeriodFrequencyType | find:sharesAccountProductTemplate.minimumActivePeriodFrequencyTypeOptions:'id':'value'}}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="sharesAccount.lockinPeriodFrequency">
+    <span fxFlex="40%">Lock-in Period</span>
+    <span fxFlex="60%">{{sharesAccount.lockinPeriodFrequency}}&nbsp;{{sharesAccount.lockinPeriodFrequencyType | find:sharesAccountProductTemplate.lockinPeriodFrequencyTypeOptions:'id':'value'}}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Application Date</span>
+    <span fxFlex="60%">{{ sharesAccount.applicationDate | date }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Allow dividends for inactive clients</span>
+    <span fxFlex="60%">{{ sharesAccount.allowDividendCalculationForInactiveClients }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="sharesAccount.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]="sharesAccount.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="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/shares/shares-account-stepper/shares-account-preview-step/shares-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/shares/shares-account-stepper/shares-account-preview-step/shares-account-preview-step.component.spec.ts

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

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

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

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

@@ -0,0 +1,105 @@
+<form [formGroup]="sharesAccountTermsForm">
+
+  <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>Total Number of Shares</mat-label>
+      <input type="number" matInput formControlName="requestedShares" required>
+      <mat-error>
+        Total Number of Shares is <strong>required</strong>
+      </mat-error>
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Today's Price</mat-label>
+      <input type="number" matInput formControlName="unitPrice">
+    </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>Default Savings Account</mat-label>
+      <mat-select formControlName="savingsAccountId" required>
+        <mat-option *ngFor="let account of savingsAccountsData" [value]="account.id">
+          {{ account.accountNo }}
+        </mat-option>
+      </mat-select>
+      <mat-error>
+        Default Savings Account is <strong>required</strong>
+      </mat-error>
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Application Date</mat-label>
+      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="applicationDatePicker" 
+        formControlName="applicationDate" required>
+      <mat-datepicker-toggle matSuffix [for]="applicationDatePicker"></mat-datepicker-toggle>
+      <mat-datepicker #applicationDatePicker></mat-datepicker>
+      <mat-error>
+        Application Date is <strong>required</strong>
+      </mat-error>
+    </mat-form-field>
+
+    <mat-checkbox labelPosition="before" formControlName="allowDividendCalculationForInactiveClients" fxFlex="48%">
+      Allow dividends for inactive clients
+    </mat-checkbox>
+
+    <h4 fxFlex="98%" class="mat-h4">Minimum Active Period</h4>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Frequency</mat-label>
+      <input type="number" matInput formControlName="minimumActivePeriod">
+    </mat-form-field>
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>Type</mat-label>
+      <mat-select formControlName="minimumActivePeriodFrequencyType">
+        <mat-option *ngFor="let minimumActivePeriodFrequencyType of minimumActivePeriodFrequencyTypeData" [value]="minimumActivePeriodFrequencyType.id">
+          {{ minimumActivePeriodFrequencyType.value }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    <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>
+
+  </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/shares/shares-account-stepper/shares-account-terms-step/shares-account-terms-step.component.scss

@@ -0,0 +1,8 @@
+h4 {
+  font-weight: 500;
+  margin: 1em 0;
+}
+
+.margin-t {
+  margin-top: 1em;
+}

src/app/shares/shares-account-stepper/shares-account-terms-step/shares-account-terms-step.component.spec.ts

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

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

@@ -0,0 +1,79 @@
+/** Angular Imports */
+import { Component, OnChanges, Input } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+
+/**
+ * Shares Account Terms Step
+ */
+@Component({
+  selector: 'mifosx-shares-account-terms-step',
+  templateUrl: './shares-account-terms-step.component.html',
+  styleUrls: ['./shares-account-terms-step.component.scss']
+})
+export class SharesAccountTermsStepComponent implements OnChanges {
+
+  /** Shares Account and Product Template */
+  @Input() sharesAccountProductTemplate: any;
+
+  /** Minimum date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum date allowed. */
+  maxDate = new Date();
+  /** Shares Account Terms Form */
+  sharesAccountTermsForm: FormGroup;
+  /** Minimum Active Period Frequency Type Data */
+  minimumActivePeriodFrequencyTypeData: any;
+  /** Lockin Period Frequency Type Data */
+  lockinPeriodFrequencyTypeData: any;
+  /** Savings Accounts Data */
+  savingsAccountsData: any;
+
+  /**
+   * @param {FormBuilder} formBuilder Form Builder
+   */
+  constructor(private formBuilder: FormBuilder) {
+    this.createSharesAccountTermsForm();
+  }
+
+  ngOnChanges() {
+    if (this.sharesAccountProductTemplate) {
+      this.sharesAccountTermsForm.patchValue({
+        'currencyCode': this.sharesAccountProductTemplate.currency.code,
+        'decimal': this.sharesAccountProductTemplate.currency.decimalPlaces,
+        'currencyMultiple': this.sharesAccountProductTemplate.currency.inMultiplesOf,
+        'unitPrice': this.sharesAccountProductTemplate.currentMarketPrice
+      });
+      this.minimumActivePeriodFrequencyTypeData = this.sharesAccountProductTemplate.minimumActivePeriodFrequencyTypeOptions;
+      this.lockinPeriodFrequencyTypeData = this.sharesAccountProductTemplate.lockinPeriodFrequencyTypeOptions;
+      this.savingsAccountsData = this.sharesAccountProductTemplate.clientSavingsAccounts;
+    }
+  }
+
+  /**
+   * Creates shares account terms form.
+   */
+  createSharesAccountTermsForm() {
+    this.sharesAccountTermsForm = this.formBuilder.group({
+      'currencyCode': [{value: '', disabled: true}],
+      'decimal': [{value: '',  disabled: true}],
+      'requestedShares': ['', Validators.required],
+      'unitPrice': [{value: '',  disabled: true}],
+      'currencyMultiple': [{value: '', disabled: true}],
+      'savingsAccountId': ['', Validators.required],
+      'minimumActivePeriod': [''],
+      'minimumActivePeriodFrequencyType': [''],
+      'lockinPeriodFrequency': [''],
+      'lockinPeriodFrequencyType': [''],
+      'applicationDate': ['', Validators.required],
+      'allowDividendCalculationForInactiveClients': [false],
+    });
+  }
+
+  /**
+   * Returns shares account terms form value.
+   */
+  get sharesAccountTerms() {
+    return this.sharesAccountTermsForm.value;
+  }
+
+}

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

@@ -10,15 +10,25 @@ import { SharesAccountViewComponent } from './shares-account-view/shares-account
 import { TransactionsTabComponent } from './shares-account-view/transactions-tab/transactions-tab.component';
 import { ChargesTabComponent } from './shares-account-view/charges-tab/charges-tab.component';
 import { DividendsTabComponent } from './shares-account-view/dividends-tab/dividends-tab.component';
+import { CreateSharesAccountComponent } from './create-shares-account/create-shares-account.component';
 
 /** Custom Resolvers */
 import { SharesAccountViewResolver } from './common-resolvers/share-account-view.resolver';
+import { SharesAccountTemplateResolver } from './common-resolvers/shares-account-template.resolver';
 
 const routes: Routes = [
   {
     path: '',
     data: { title: extract('Shares'), breadcrumb: 'Shares', routeParamBreadcrumb: false },
     children: [
+      {
+        path: 'create-shares-account',
+        data: { title: extract('Create Shares Account'), breadcrumb: 'Create Shares Account' },
+        component: CreateSharesAccountComponent,
+        resolve: {
+          sharesAccountTemplate: SharesAccountTemplateResolver
+        }
+      },
       {
         path: ':shareAccountId',
         data: { title: extract('Shares Account View'), routeParamBreadcrumb: 'shareAccountId' },
@@ -52,7 +62,8 @@ const routes: Routes = [
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule],
   providers: [
-    SharesAccountViewResolver
+    SharesAccountViewResolver,
+    SharesAccountTemplateResolver
   ]
 })
 export class SharesRoutingModule { }

src/app/shares/shares.module.ts

@@ -11,6 +11,11 @@ import { SharesAccountViewComponent } from './shares-account-view/shares-account
 import { TransactionsTabComponent } from './shares-account-view/transactions-tab/transactions-tab.component';
 import { DividendsTabComponent } from './shares-account-view/dividends-tab/dividends-tab.component';
 import { ChargesTabComponent } from './shares-account-view/charges-tab/charges-tab.component';
+import { CreateSharesAccountComponent } from './create-shares-account/create-shares-account.component';
+import { SharesAccountDetailsStepComponent } from './shares-account-stepper/shares-account-details-step/shares-account-details-step.component';
+import { SharesAccountTermsStepComponent } from './shares-account-stepper/shares-account-terms-step/shares-account-terms-step.component';
+import { SharesAccountChargesStepComponent } from './shares-account-stepper/shares-account-charges-step/shares-account-charges-step.component';
+import { SharesAccountPreviewStepComponent } from './shares-account-stepper/shares-account-preview-step/shares-account-preview-step.component';
 
 /**
  * Shares Module
@@ -28,7 +33,12 @@ import { ChargesTabComponent } from './shares-account-view/charges-tab/charges-t
     SharesAccountViewComponent,
     TransactionsTabComponent,
     DividendsTabComponent,
-    ChargesTabComponent
+    ChargesTabComponent,
+    CreateSharesAccountComponent,
+    SharesAccountDetailsStepComponent,
+    SharesAccountTermsStepComponent,
+    SharesAccountChargesStepComponent,
+    SharesAccountPreviewStepComponent
   ],
   providers: [DatePipe]
 })

src/app/shares/shares.service.ts

@@ -23,4 +23,22 @@ export class SharesService {
     return this.http.get(`/accounts/share/${accountId}`);
   }
 
+  /**
+   * @param clientId Client Id assosciated with shares account.
+   * @returns {Observable<any>} Shares account template.
+   */
+  getSharesAccountTemplate(clientId: string, productId?: string): Observable<any> {
+    let httpParams = new HttpParams().set('clientId', clientId);
+    httpParams = productId ? httpParams.set('productId', productId) : httpParams;
+    return this.http.get('/accounts/share/template', { params: httpParams });
+  }
+
+  /**
+   * @param {any} sharesAccount Shares Account
+   * @returns {Observable<any>}
+   */
+  createSharesAccount(sharesAccount: any): Observable<any> {
+    return this.http.post('/accounts/share', sharesAccount);
+  }
+
 }