feat: add create savings account page (#883)

Fixes: #882

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