Add Repayment Info as part of the Loan Account request

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

@@ -14,7 +14,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field fxFlex="48%" *ngIf="loanProductSelected">
       <mat-label>Loan officer</mat-label>
       <mat-select formControlName="loanOfficerId">
         <mat-option *ngFor="let loanOfficer of loanOfficerOptions" [value]="loanOfficer.id">
@@ -22,6 +22,9 @@
         </mat-option>
       </mat-select>
     </mat-form-field>
+  </div>
+
+  <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" *ngIf="loanProductSelected">
 
     <mat-form-field fxFlex="48%">
       <mat-label>Loan purpose</mat-label>
@@ -84,7 +87,6 @@
     <mat-checkbox fxFlex="48%" formControlName="createStandingInstructionAtDisbursement">
       <p>Create standing instructions at disbursement</p>
     </mat-checkbox>
-
   </div>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">

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

@@ -41,6 +41,8 @@ export class LoansAccountDetailsStepComponent implements OnInit {
 
   loanId: any = null;
 
+  loanProductSelected = false;
+
   /** Loans Account Template with product data  */
   @Output() loansAccountProductTemplate = new EventEmitter();
   /**
@@ -106,6 +108,7 @@ export class LoansAccountDetailsStepComponent implements OnInit {
         this.loanPurposeOptions = response.loanPurposeOptions;
         this.fundOptions = response.fundOptions;
         this.accountLinkingOptions = response.accountLinkingOptions;
+        this.loanProductSelected = true;
         if (response.createStandingInstructionAtDisbursement) {
           this.loansAccountDetailsForm.get('createStandingInstructionAtDisbursement').patchValue(response.createStandingInstructionAtDisbursement);
         }

src/app/loans/loans-account-stepper/loans-account-schedule-step/loans-account-schedule-step.component.html

@@ -0,0 +1,23 @@
+<div fxLayout="row wrap" fxLayout.lt-md="column">
+
+  <a mat-button (click)="showRepaymentInfo()">
+    Repayment Info
+  </a>
+
+  <mifosx-repayment-schedule-tab fxFlex="100%" [repaymentScheduleDetails]="repaymentScheduleDetails"></mifosx-repayment-schedule-tab>
+
+</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>
+  <button mat-raised-button *ngIf="loanId" [routerLink]="['../', 'general']">
+    Cancel
+  </button>
+</div>

src/app/loans/loans-account-stepper/loans-account-schedule-step/loans-account-schedule-step.component.spec.ts

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

src/app/loans/loans-account-stepper/loans-account-schedule-step/loans-account-schedule-step.component.ts

@@ -0,0 +1,47 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { LoansService } from 'app/loans/loans.service';
+import { SettingsService } from 'app/settings/settings.service';
+
+@Component({
+  selector: 'mifosx-loans-account-schedule-step',
+  templateUrl: './loans-account-schedule-step.component.html',
+  styleUrls: ['./loans-account-schedule-step.component.scss']
+})
+export class LoansAccountScheduleStepComponent implements OnInit {
+
+  /** Loans Account Template */
+  @Input() loansAccountTemplate: any;
+  /** Loans Account Product Template */
+  @Input() loansAccountProductTemplate: any;
+  /** Loans Account Data */
+  @Input() loansAccount: any;
+
+  showRepayment = false;
+  repaymentScheduleDetails: any = {periods: []};
+
+  loanId: any = null;
+
+  constructor(private loansService: LoansService,
+    private settingsService: SettingsService,
+    private route: ActivatedRoute) {
+      this.loanId = this.route.snapshot.params['loanId'];
+  }
+
+  ngOnInit(): void { }
+
+  showRepaymentInfo(): void {
+    this.repaymentScheduleDetails = {periods: []};
+    this.showRepayment = !this.showRepayment;
+    if (this.showRepayment) {
+      const locale = this.settingsService.language.code;
+      const dateFormat = this.settingsService.dateFormat;
+      const payload = this.loansService.buildLoanRequestPayload(this.loansAccount, this.loansAccountTemplate,
+        this.loansAccountProductTemplate.calendarOptions, locale, dateFormat);
+
+      this.loansService.calculateLoanSchedule(payload).subscribe((response: any) => {
+        this.repaymentScheduleDetails = response;
+      });
+    }
+  }
+}

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

@@ -163,7 +163,6 @@
       </mat-select>
     </mat-form-field>
 
-    <!-- <mat-checkbox *ngIf="interestCalculationPeriodType != 0" fxFlex="48%" -->
     <mat-checkbox fxFlex="48%" formControlName="allowPartialPeriodInterestCalcualtion">
       <p>Calculate interest for exact days in partial period</p>
     </mat-checkbox>
@@ -192,19 +191,20 @@
 
     <h4 fxFlex="98%" class="mat-h4">Moratorium</h4>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field fxFlex="23%">
       <mat-label>Grace on principal payment</mat-label>
       <input type="number" matInput formControlName="graceOnPrincipalPayment">
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field fxFlex="23%">
       <mat-label>Grace on interest payment</mat-label>
       <input type="number" matInput formControlName="graceOnInterestPayment">
     </mat-form-field>
 
-    <mat-checkbox fxFlex="23%" labelPosition="before" formControlName="graceOnArrearsAgeing" class="margin-v">
-      On Arreas Aging
-    </mat-checkbox>
+    <mat-form-field fxFlex="48%">
+      <mat-label>On arrears ageing</mat-label>
+      <input type="number" matInput formControlName="graceOnArrearsAgeing">
+    </mat-form-field>
 
     <mat-form-field fxFlex="48%" *ngIf="loansAccountTemplate?.canDefineInstallmentAmount">
       <mat-label>Installment Amount</mat-label>
@@ -360,7 +360,6 @@
           </span>
         </span>
       </div>
-
     </ng-container>
 
     <div fxFlexFill
@@ -419,8 +418,8 @@
       <tr mat-header-row *matHeaderRowDef="loanCollateralDisplayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: loanCollateralDisplayedColumns;"></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;

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

@@ -10,7 +10,6 @@ import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.componen
 import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
 import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
 import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
-import { any } from 'cypress/types/bluebird';
 
 /**
  * Create Loans Account Terms Step