feat: add create shares account page (#877)

Fixes: #223

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;
+  }
+
+}