From 06fd5e793c07dc820f13cdcec93ada20c4f669dc Mon Sep 17 00:00:00 2001
From: Muskan Khedia <36980003+muskankhedia@users.noreply.github.com>
Date: Sat, 13 Jun 2020 17:54:26 +0530
Subject: [PATCH] feat: add loan action button (#874)

- add prepay loan action
- add repayment loan action

Fixes: #243
Fixes: #242
---
 ...lver.ts => loan-action-button.resolver.ts} |   8 +-
 src/app/loans/loans-routing.module.ts         |   4 +-
 .../foreclosure/foreclosure.component.html    |  17 +--
 .../foreclosure/foreclosure.component.ts      |  10 +-
 .../loan-account-actions.component.html       |   2 +
 .../loan-account-actions.component.ts         |   8 +-
 .../loans-account-close.component.ts          |   2 +-
 .../make-repayment.component.html             |  91 +++++++++++++++
 .../make-repayment.component.scss             |   3 +
 .../make-repayment.component.spec.ts          |  25 ++++
 .../make-repayment.component.ts               | 106 +++++++++++++++++
 .../prepay-loan/prepay-loan.component.html    | 104 +++++++++++++++++
 .../prepay-loan/prepay-loan.component.scss    |   3 +
 .../prepay-loan/prepay-loan.component.spec.ts |  25 ++++
 .../prepay-loan/prepay-loan.component.ts      | 109 ++++++++++++++++++
 src/app/loans/loans.module.ts                 |   4 +
 src/app/loans/loans.service.ts                |  15 ++-
 17 files changed, 504 insertions(+), 32 deletions(-)
 rename src/app/loans/common-resolvers/{loan-action-button-resolver.ts => loan-action-button.resolver.ts} (73%)
 create mode 100644 src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.html
 create mode 100644 src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.scss
 create mode 100644 src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.spec.ts
 create mode 100644 src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.ts
 create mode 100644 src/app/loans/loans-view/loan-account-actions/prepay-loan/prepay-loan.component.html
 create mode 100644 src/app/loans/loans-view/loan-account-actions/prepay-loan/prepay-loan.component.scss
 create mode 100644 src/app/loans/loans-view/loan-account-actions/prepay-loan/prepay-loan.component.spec.ts
 create mode 100644 src/app/loans/loans-view/loan-account-actions/prepay-loan/prepay-loan.component.ts

diff --git a/src/app/loans/common-resolvers/loan-action-button-resolver.ts b/src/app/loans/common-resolvers/loan-action-button.resolver.ts
similarity index 73%
rename from src/app/loans/common-resolvers/loan-action-button-resolver.ts
rename to src/app/loans/common-resolvers/loan-action-button.resolver.ts
index bec514d1f..982d883c8 100644
--- a/src/app/loans/common-resolvers/loan-action-button-resolver.ts
+++ b/src/app/loans/common-resolvers/loan-action-button.resolver.ts
@@ -26,9 +26,13 @@ export class LoanActionButtonResolver implements Resolve<Object> {
     resolve(route: ActivatedRouteSnapshot): Observable<any> {
         const loanId = route.parent.paramMap.get('loanId');
         const loanActionButton = route.paramMap.get('action');
-        // if (loanActionButton === 'assign-loan-officer') {
+        if (loanActionButton === 'assign-loan-officer') {
             return this.loansService.getLoanTemplate(loanId);
-        // }
+        // } else if (loanActionButton === 'make-repayment') {
+        //     return this.loansService.getLoanActionTemplate(loanId, 'repayment');
+        } else {
+            return this.loansService.getLoanActionTemplate(loanId, 'prepayLoan');
+        }
     }
 
 }
diff --git a/src/app/loans/loans-routing.module.ts b/src/app/loans/loans-routing.module.ts
index e7c6eaaa4..562bc29a1 100644
--- a/src/app/loans/loans-routing.module.ts
+++ b/src/app/loans/loans-routing.module.ts
@@ -17,6 +17,7 @@ import { OriginalScheduleTabComponent } from './loans-view/original-schedule-tab
 import { OverdueChargesTabComponent } from './loans-view/overdue-charges-tab/overdue-charges-tab.component';
 import { ChargesTabComponent } from './loans-view/charges-tab/charges-tab.component';
 import { DatatableTabComponent } from './loans-view/datatable-tab/datatable-tab.component';
+import { LoanAccountActionsComponent } from './loans-view/loan-account-actions/loan-account-actions.component';
 
 /** Custom Resolvers */
 import { LoanChargeTemplateResolver } from './common-resolvers/loan-charge-template.resolver';
@@ -24,10 +25,9 @@ import { LoanDetailsResolver } from './common-resolvers/loan-details.resolver';
 import { LoanDetailsGeneralResolver } from './common-resolvers/loan-details-general.resolver';
 import { LoanNotesResolver } from './common-resolvers/loan-notes-resolver';
 import { LoanDetailsChargesResolver } from './common-resolvers/loan-details-charges.resolver';
-import { LoanAccountActionsComponent } from './loans-view/loan-account-actions/loan-account-actions.component';
 import { LoanDatatablesResolver } from './common-resolvers/loan-datatables.resolver';
 import { LoanDatatableResolver } from './common-resolvers/loan-datatable.resolver';
-import { LoanActionButtonResolver } from './common-resolvers/loan-action-button-resolver';
+import { LoanActionButtonResolver } from './common-resolvers/loan-action-button.resolver';
 
 const routes: Routes = [
   {
diff --git a/src/app/loans/loans-view/loan-account-actions/foreclosure/foreclosure.component.html b/src/app/loans/loans-view/loan-account-actions/foreclosure/foreclosure.component.html
index 17a0e3525..525b80205 100644
--- a/src/app/loans/loans-view/loan-account-actions/foreclosure/foreclosure.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/foreclosure/foreclosure.component.html
@@ -19,41 +19,26 @@
         <mat-form-field>
           <mat-label>Principal</mat-label>
           <input matInput required formControlName="outstandingPrincipalPortion">
-          <mat-error *ngIf="foreclosureForm.controls.outstandingPrincipalPortion.hasError('required')">
-            Loan Officer is <strong>required</strong>
-          </mat-error>
         </mat-form-field>
-        
+
         <mat-form-field>
           <mat-label>Interest</mat-label>
           <input matInput required formControlName="outstandingInterestPortion">
-          <mat-error *ngIf="foreclosureForm.controls.outstandingInterestPortion.hasError('required')">
-            Loan Officer is <strong>required</strong>
-          </mat-error>
         </mat-form-field>
 
         <mat-form-field>
           <mat-label>Fee Amount</mat-label>
           <input matInput required formControlName="outstandingFeeChargesPortion">
-          <mat-error *ngIf="foreclosureForm.controls.outstandingFeeChargesPortion.hasError('required')">
-            Loan Officer is <strong>required</strong>
-          </mat-error>
         </mat-form-field>
 
         <mat-form-field>
           <mat-label>Penalty Amount</mat-label>
           <input matInput required formControlName="outstandingPenaltyChargesPortion">
-          <mat-error *ngIf="foreclosureForm.controls.outstandingPenaltyChargesPortion.hasError('required')">
-            Loan Officer is <strong>required</strong>
-          </mat-error>
         </mat-form-field>
 
         <mat-form-field>
           <mat-label>Transaction Amount</mat-label>
           <input matInput required formControlName="transactionAmount">
-          <mat-error *ngIf="foreclosureForm.controls.transactionAmount.hasError('required')">
-            Loan Officer is <strong>required</strong>
-          </mat-error>
         </mat-form-field>
 
         <mat-form-field>
diff --git a/src/app/loans/loans-view/loan-account-actions/foreclosure/foreclosure.component.ts b/src/app/loans/loans-view/loan-account-actions/foreclosure/foreclosure.component.ts
index a37c5d016..d8b83e2ec 100644
--- a/src/app/loans/loans-view/loan-account-actions/foreclosure/foreclosure.component.ts
+++ b/src/app/loans/loans-view/loan-account-actions/foreclosure/foreclosure.component.ts
@@ -44,11 +44,11 @@ export class ForeclosureComponent implements OnInit {
   createforeclosureForm() {
     this.foreclosureForm = this.formBuilder.group({
       'transactionDate': [new Date(), Validators.required],
-      'outstandingPrincipalPortion': [{value: '', disabled: true}, Validators.required],
-      'outstandingInterestPortion': [{value: '', disabled: true}, Validators.required],
-      'outstandingFeeChargesPortion': [{value: '', disabled: true}, Validators.required],
-      'outstandingPenaltyChargesPortion': [{value: '', disabled: true}, Validators.required],
-      'transactionAmount': [{value: '', disabled: true}, Validators.required],
+      'outstandingPrincipalPortion': [{value: '', disabled: true}],
+      'outstandingInterestPortion': [{value: '', disabled: true}],
+      'outstandingFeeChargesPortion': [{value: '', disabled: true}],
+      'outstandingPenaltyChargesPortion': [{value: '', disabled: true}],
+      'transactionAmount': [{value: '', disabled: true}],
       'interestAccruedAfterDeath': '',
       'note': ''
     });
diff --git a/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.html b/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.html
index c5255e17c..494f69dd2 100644
--- a/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.html
@@ -4,5 +4,7 @@
     <mifosx-undo-approval *ngIf="actions.undo_approval"></mifosx-undo-approval>
     <mifosx-assign-loan-officer *ngIf="actions.assign_loan_officer" [dataObject]="actionButtonData" ></mifosx-assign-loan-officer>
     <mifosx-foreclosure *ngIf="actions.foreclosure"></mifosx-foreclosure>
+    <mifosx-prepay-loan [dataObject]="actionButtonData" *ngIf="actions.prepay_loan"></mifosx-prepay-loan>
+    <mifosx-make-repayment [dataObject]="actionButtonData" *ngIf="actions.make_repayment"></mifosx-make-repayment>
   </mat-card>
 </div>
diff --git a/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.ts b/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.ts
index 9e09ebe9d..4d096e31b 100644
--- a/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.ts
+++ b/src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.ts
@@ -16,11 +16,15 @@ export class LoanAccountActionsComponent {
   actions: { close: boolean,
             undo_approval: boolean,
             assign_loan_officer: boolean,
-            foreclosure: boolean } = {
+            foreclosure: boolean,
+            prepay_loan: boolean,
+            make_repayment: boolean } = {
               close: false,
               undo_approval: false,
               assign_loan_officer: false,
-              foreclosure: false };
+              foreclosure: false,
+              prepay_loan: false,
+              make_repayment: false };
   actionButtonData: any;
   actionName: any;
 
diff --git a/src/app/loans/loans-view/loan-account-actions/loans-account-close/loans-account-close.component.ts b/src/app/loans/loans-view/loan-account-actions/loans-account-close/loans-account-close.component.ts
index c05aa888d..2335d44b5 100644
--- a/src/app/loans/loans-view/loan-account-actions/loans-account-close/loans-account-close.component.ts
+++ b/src/app/loans/loans-view/loan-account-actions/loans-account-close/loans-account-close.component.ts
@@ -65,7 +65,7 @@ export class LoansAccountCloseComponent implements OnInit {
     const closeForm = this.closeLoanForm.value;
     closeForm.locale = 'en';
     closeForm.dateFormat = dateFormat;
-    this.loanService.closeAccount(this.loanId, closeForm)
+    this.loanService.submitLoanActionButton(this.loanId, closeForm, 'close')
       .subscribe((response: any) => {
         this.router.navigate(['../general'], { relativeTo: this.route });
     });
diff --git a/src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.html b/src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.html
new file mode 100644
index 000000000..8af888c80
--- /dev/null
+++ b/src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.html
@@ -0,0 +1,91 @@
+<div class="container">
+
+  <form [formGroup]="repaymentLoanForm" (ngSubmit)="submit()">
+
+    <mat-card-content>
+
+      <div fxLayout="column">
+
+        <mat-form-field>
+          <mat-label>Transaction Date</mat-label>
+          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required formControlName="transactionDate">
+          <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
+          <mat-datepicker #transactionDatePicker></mat-datepicker>
+          <mat-error *ngIf="repaymentLoanForm.controls.transactionDate.hasError('required')">
+            Transaction Date <strong>is required</strong>
+          </mat-error>
+        </mat-form-field>
+
+        <mat-form-field>
+          <mat-label>Transaction Amount</mat-label>
+          <input matInput required formControlName="transactionAmount">
+          <mat-error *ngIf="repaymentLoanForm.controls.transactionAmount.hasError('required')">
+            Transaction Amount <strong>is required</strong>
+          </mat-error>
+        </mat-form-field>
+
+        <mat-form-field>
+          <mat-label>Payment Type</mat-label>
+          <mat-select formControlName="paymentTypeId">
+            <mat-option *ngFor="let paymentType of paymentTypes" [value]="paymentType.id">
+              {{ paymentType.name }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+
+        <div fxFlexFill>
+          <span fxFlex="25%">Show Payment Details</span>
+          <span fxFlex="75%" class="expandCollapsebutton" (click)="toggleDisplay()">
+            <button mat-raised-button color="primary" *ngIf="showPaymentDetails">
+              <i class="fa fa-minus"></i>
+            </button>
+            <button mat-raised-button color="primary" *ngIf="!showPaymentDetails">
+              <i class="fa fa-plus"></i>
+            </button>
+          </span>
+        </div>
+
+        <ng-container *ngIf="showPaymentDetails">
+          <mat-form-field>
+            <mat-label> Account #</mat-label>
+            <input matInput formControlName="accountNumber">
+          </mat-form-field>
+  
+          <mat-form-field>
+            <mat-label>Cheque #</mat-label>
+            <input matInput formControlName="chequeNumber">
+          </mat-form-field>
+  
+          <mat-form-field>
+            <mat-label>Routing Code</mat-label>
+            <input matInput formControlName="routingCode">
+          </mat-form-field>
+  
+          <mat-form-field>
+            <mat-label>Reciept #</mat-label>
+            <input matInput formControlName="receiptNumber">
+          </mat-form-field>
+  
+          <mat-form-field>
+            <mat-label>Bank #</mat-label>
+            <input matInput formControlName="bankNumber">
+          </mat-form-field>
+        </ng-container>
+
+        <mat-form-field>
+          <mat-label>Note</mat-label>
+          <textarea matInput formControlName="note"></textarea>
+        </mat-form-field>
+
+      </div>
+
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['../general']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="!repaymentLoanForm.valid" *mifosxHasPermission="'REPAYMENT_LOAN'">Submit</button>
+      </mat-card-actions>
+
+    </mat-card-content>
+
+  </form>
+
+</div>
diff --git a/src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.scss b/src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.scss
new file mode 100644
index 000000000..cd2e90d69
--- /dev/null
+++ b/src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.scss
@@ -0,0 +1,3 @@
+.expandCollapsebutton {
+    margin-top: -7px;
+}
diff --git a/src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.spec.ts b/src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.spec.ts
new file mode 100644
index 000000000..cf871ec74
--- /dev/null
+++ b/src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MakeRepaymentComponent } from './make-repayment.component';
+
+describe('MakeRepaymentComponent', () => {
+  let component: MakeRepaymentComponent;
+  let fixture: ComponentFixture<MakeRepaymentComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MakeRepaymentComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MakeRepaymentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.ts b/src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.ts
new file mode 100644
index 000000000..981200035
--- /dev/null
+++ b/src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.ts
@@ -0,0 +1,106 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { LoansService } from 'app/loans/loans.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { DatePipe } from '@angular/common';
+
+@Component({
+  selector: 'mifosx-make-repayment',
+  templateUrl: './make-repayment.component.html',
+  styleUrls: ['./make-repayment.component.scss']
+})
+export class MakeRepaymentComponent implements OnInit {
+
+  @Input() dataObject: any;
+  /** Loan Id */
+  loanId: string;
+  paymentTypes: any;
+  showPenaltyPortionDisplay: boolean;
+  principalPortion: any;
+  interestPortion: any;
+  feeChargesPortion: any;
+  processDate: boolean;
+  showPaymentDetails = false;
+  /** Minimum Date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum Date allowed. */
+  maxDate = new Date();
+  /** Assign loan Officer form. */
+  repaymentLoanForm: FormGroup;
+
+  /**
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {LoansService} systemService Loan Service.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   */
+  constructor(private formBuilder: FormBuilder,
+    private loanService: LoansService,
+    private route: ActivatedRoute,
+    private router: Router,
+    private datePipe: DatePipe) {
+      this.loanId = this.route.parent.snapshot.params['loanId'];
+    }
+
+  /**
+   * Creates the assign officer form.
+   */
+  ngOnInit() {
+    this.createprepayLoanForm();
+    // this.setPrepayLoanDetails();
+  }
+
+  /**
+   * Creates the create close form.
+   */
+  createprepayLoanForm() {
+    this.repaymentLoanForm = this.formBuilder.group({
+      'transactionDate': [new Date(), Validators.required],
+      'transactionAmount': ['', Validators.required],
+      'paymentTypeId': '',
+      'accountNumber': '',
+      'chequeNumber': '',
+      'routingCode': '',
+      'receiptNumber': '',
+      'bankNumber': '',
+      'note': ''
+    });
+  }
+
+  setPrepayLoanDetails() {
+    this.paymentTypes = this.dataObject.paymentTypeOptions;
+    this.repaymentLoanForm.patchValue({
+      transactionAmount: this.dataObject.amount,
+      transactionDate: new Date(this.dataObject.date)
+    });
+    if (this.dataObject.penaltyChargesPortion > 0) {
+        this.showPenaltyPortionDisplay = true;
+    }
+    this.feeChargesPortion = this.dataObject.feeChargesPortion;
+    this.processDate = true;
+  }
+
+  toggleDisplay() {
+    this.showPaymentDetails = !(this.showPaymentDetails);
+  }
+
+  submit() {
+    const transactionDate = this.repaymentLoanForm.value.transactionDate;
+    const dateFormat = 'yyyy-MM-dd';
+    this.repaymentLoanForm.patchValue({
+      transactionDate: this.datePipe.transform(transactionDate, dateFormat)
+    });
+    const repaymentForm = {
+      locale: 'en',
+      dateFormat: dateFormat,
+      paymentTypeId: this.repaymentLoanForm.value.paymentTypeId,
+      transactionDate: this.repaymentLoanForm.value.transactionDate,
+      transactionAmount: this.repaymentLoanForm.value.transactionAmount
+    };
+    this.loanService.submitLoanActionButton(this.loanId, repaymentForm, 'repayment')
+      .subscribe((response: any) => {
+        this.router.navigate(['../general'], { relativeTo: this.route });
+    });
+  }
+
+}
diff --git a/src/app/loans/loans-view/loan-account-actions/prepay-loan/prepay-loan.component.html b/src/app/loans/loans-view/loan-account-actions/prepay-loan/prepay-loan.component.html
new file mode 100644
index 000000000..819456dd6
--- /dev/null
+++ b/src/app/loans/loans-view/loan-account-actions/prepay-loan/prepay-loan.component.html
@@ -0,0 +1,104 @@
+<div class="container">
+
+  <form [formGroup]="prepayLoanForm" (ngSubmit)="submit()">
+
+    <mat-card-content>
+
+      <div fxLayout="column">
+
+        <mat-form-field>
+          <mat-label>Transaction Date</mat-label>
+          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required formControlName="transactionDate">
+          <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
+          <mat-datepicker #transactionDatePicker></mat-datepicker>
+          <mat-error *ngIf="prepayLoanForm.controls.transactionDate.hasError('required')">
+            Transaction Date <strong>is required</strong>
+          </mat-error>
+        </mat-form-field>
+
+        <mat-form-field>
+          <mat-label>Transaction Amount</mat-label>
+          <input matInput required formControlName="transactionAmount">
+          <mat-error *ngIf="prepayLoanForm.controls.transactionAmount.hasError('required')">
+            Transaction Amount <strong>is required</strong>
+          </mat-error>
+        </mat-form-field>
+
+        <mat-form-field>
+          <mat-label>Principal</mat-label>
+          <input matInput formControlName="principal">
+        </mat-form-field>
+
+        <mat-form-field>
+          <mat-label>Interest Amount</mat-label>
+          <input matInput required formControlName="interestAmount">
+          <mat-error *ngIf="prepayLoanForm.controls.interestAmount.hasError('required')">
+            Interest Amount <strong>is required</strong>
+          </mat-error>
+        </mat-form-field>
+
+        <mat-form-field>
+          <mat-label>Payment Type</mat-label>
+          <mat-select formControlName="paymentTypeId">
+            <mat-option *ngFor="let paymentType of paymentTypes" [value]="paymentType.id">
+              {{ paymentType.name }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+
+        <div fxFlexFill>
+          <span fxFlex="25%">Show Payment Details</span>
+          <span fxFlex="75%" class="expandCollapsebutton" (click)="toggleDisplay()">
+            <button mat-raised-button color="primary" *ngIf="showPaymentDetails">
+              <i class="fa fa-minus"></i>
+            </button>
+            <button mat-raised-button color="primary" *ngIf="!showPaymentDetails">
+              <i class="fa fa-plus"></i>
+            </button>
+          </span>
+        </div>
+
+        <ng-container *ngIf="showPaymentDetails">
+          <mat-form-field>
+            <mat-label> Account #</mat-label>
+            <input matInput formControlName="accountNumber">
+          </mat-form-field>
+  
+          <mat-form-field>
+            <mat-label>Cheque #</mat-label>
+            <input matInput formControlName="chequeNumber">
+          </mat-form-field>
+  
+          <mat-form-field>
+            <mat-label>Routing Code</mat-label>
+            <input matInput formControlName="routingCode">
+          </mat-form-field>
+  
+          <mat-form-field>
+            <mat-label>Reciept #</mat-label>
+            <input matInput formControlName="receiptNumber">
+          </mat-form-field>
+  
+          <mat-form-field>
+            <mat-label>Bank #</mat-label>
+            <input matInput formControlName="bankNumber">
+          </mat-form-field>
+        </ng-container>
+
+        <mat-form-field>
+          <mat-label>Note</mat-label>
+          <textarea matInput formControlName="note"></textarea>
+        </mat-form-field>
+
+      </div>
+
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['../general']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="!prepayLoanForm.valid" *mifosxHasPermission="'REPAYMENT_LOAN'">Submit</button>
+      </mat-card-actions>
+
+    </mat-card-content>
+
+  </form>
+
+</div>
diff --git a/src/app/loans/loans-view/loan-account-actions/prepay-loan/prepay-loan.component.scss b/src/app/loans/loans-view/loan-account-actions/prepay-loan/prepay-loan.component.scss
new file mode 100644
index 000000000..cd2e90d69
--- /dev/null
+++ b/src/app/loans/loans-view/loan-account-actions/prepay-loan/prepay-loan.component.scss
@@ -0,0 +1,3 @@
+.expandCollapsebutton {
+    margin-top: -7px;
+}
diff --git a/src/app/loans/loans-view/loan-account-actions/prepay-loan/prepay-loan.component.spec.ts b/src/app/loans/loans-view/loan-account-actions/prepay-loan/prepay-loan.component.spec.ts
new file mode 100644
index 000000000..52d286722
--- /dev/null
+++ b/src/app/loans/loans-view/loan-account-actions/prepay-loan/prepay-loan.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PrepayLoanComponent } from './prepay-loan.component';
+
+describe('PrepayLoanComponent', () => {
+  let component: PrepayLoanComponent;
+  let fixture: ComponentFixture<PrepayLoanComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PrepayLoanComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PrepayLoanComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/loans/loans-view/loan-account-actions/prepay-loan/prepay-loan.component.ts b/src/app/loans/loans-view/loan-account-actions/prepay-loan/prepay-loan.component.ts
new file mode 100644
index 000000000..eadeea889
--- /dev/null
+++ b/src/app/loans/loans-view/loan-account-actions/prepay-loan/prepay-loan.component.ts
@@ -0,0 +1,109 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { LoansService } from 'app/loans/loans.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { DatePipe } from '@angular/common';
+
+@Component({
+  selector: 'mifosx-prepay-loan',
+  templateUrl: './prepay-loan.component.html',
+  styleUrls: ['./prepay-loan.component.scss']
+})
+export class PrepayLoanComponent implements OnInit {
+
+  @Input() dataObject: any;
+  /** Loan Id */
+  loanId: string;
+  paymentTypes: any;
+  showPenaltyPortionDisplay: boolean;
+  principalPortion: any;
+  interestPortion: any;
+  feeChargesPortion: any;
+  processDate: boolean;
+  showPaymentDetails = false;
+  /** Minimum Date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum Date allowed. */
+  maxDate = new Date();
+  /** Assign loan Officer form. */
+  prepayLoanForm: FormGroup;
+
+  /**
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {LoansService} systemService Loan Service.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   */
+  constructor(private formBuilder: FormBuilder,
+    private loanService: LoansService,
+    private route: ActivatedRoute,
+    private router: Router,
+    private datePipe: DatePipe) {
+      this.loanId = this.route.parent.snapshot.params['loanId'];
+    }
+
+  /**
+   * Creates the assign officer form.
+   */
+  ngOnInit() {
+    this.createprepayLoanForm();
+    this.setPrepayLoanDetails();
+  }
+
+  /**
+   * Creates the create close form.
+   */
+  createprepayLoanForm() {
+    this.prepayLoanForm = this.formBuilder.group({
+      'transactionDate': [new Date(), Validators.required],
+      'transactionAmount': ['', Validators.required],
+      'principal': [{value: '', disabled: true}],
+      'interestAmount': [{value: '', disabled: true}, Validators.required],
+      'paymentTypeId': '',
+      'accountNumber': '',
+      'chequeNumber': '',
+      'routingCode': '',
+      'receiptNumber': '',
+      'bankNumber': '',
+      'note': ''
+    });
+  }
+
+  setPrepayLoanDetails() {
+    this.paymentTypes = this.dataObject.paymentTypeOptions;
+    this.prepayLoanForm.patchValue({
+      transactionAmount: this.dataObject.amount,
+      principal: this.dataObject.principalPortion,
+      interestAmount: this.dataObject.interestPortion,
+    });
+    if (this.dataObject.penaltyChargesPortion > 0) {
+        this.showPenaltyPortionDisplay = true;
+    }
+    this.feeChargesPortion = this.dataObject.feeChargesPortion;
+    this.processDate = true;
+  }
+
+  toggleDisplay() {
+    this.showPaymentDetails = !(this.showPaymentDetails);
+  }
+
+  submit() {
+    const transactionDate = this.prepayLoanForm.value.transactionDate;
+    const dateFormat = 'yyyy-MM-dd';
+    this.prepayLoanForm.patchValue({
+      transactionDate: this.datePipe.transform(transactionDate, dateFormat)
+    });
+    const prepayForm = {
+      locale: 'en',
+      dateFormat: dateFormat,
+      paymentTypeId: this.prepayLoanForm.value.paymentTypeId,
+      transactionDate: this.prepayLoanForm.value.transactionDate,
+      transactionAmount: this.prepayLoanForm.value.transactionAmount
+    };
+    this.loanService.submitLoanActionButton(this.loanId, prepayForm, 'repayment')
+      .subscribe((response: any) => {
+        this.router.navigate(['../general'], { relativeTo: this.route });
+    });
+  }
+
+}
diff --git a/src/app/loans/loans.module.ts b/src/app/loans/loans.module.ts
index 2524f8db8..f66eddd45 100644
--- a/src/app/loans/loans.module.ts
+++ b/src/app/loans/loans.module.ts
@@ -27,6 +27,8 @@ import { SingleRowComponent } from './loans-view/datatable-tab/single-row/single
 import { UndoApprovalComponent } from './loans-view/loan-account-actions/undo-approval/undo-approval.component';
 import { AssignLoanOfficerComponent } from './loans-view/loan-account-actions/assign-loan-officer/assign-loan-officer.component';
 import { ForeclosureComponent } from './loans-view/loan-account-actions/foreclosure/foreclosure.component';
+import { PrepayLoanComponent } from './loans-view/loan-account-actions/prepay-loan/prepay-loan.component';
+import { MakeRepaymentComponent } from './loans-view/loan-account-actions/make-repayment/make-repayment.component';
 
 /**
  * Loans Module
@@ -54,6 +56,8 @@ import { ForeclosureComponent } from './loans-view/loan-account-actions/foreclos
     UndoApprovalComponent,
     AssignLoanOfficerComponent,
     ForeclosureComponent,
+    PrepayLoanComponent,
+    MakeRepaymentComponent,
   ],
   providers: [DatePipe],
 })
diff --git a/src/app/loans/loans.service.ts b/src/app/loans/loans.service.ts
index 1bbfdc5f4..86479df05 100644
--- a/src/app/loans/loans.service.ts
+++ b/src/app/loans/loans.service.ts
@@ -21,7 +21,7 @@ export class LoansService {
     return this.http.get(`/loans/${loanId}/charges/template`);
   }
 
-  getLoanChargeTemplate(loanId: string, command: string): Observable<any> {
+  getLoanActionTemplate(loanId: string, command: string): Observable<any> {
     const httpParams = new HttpParams().set('command', command);
     return this.http.get(`/loans/${loanId}/transactions/template`, { params: httpParams });
   }
@@ -102,9 +102,16 @@ export class LoansService {
     return this.http.delete(`/loans/${loanId}/notes/${noteId}`);
   }
 
-  closeAccount(loanId: string, closeData: any) {
-    const httpParams = new HttpParams().set('command', 'close');
-    return this.http.post(`/loans/${loanId}/transactions`, closeData, {params: httpParams});
+  /**
+   * Used For: Close Action, Prepay Loan Action
+   * Returns the response of the action
+   * @param loanId Loan Id
+   * @param data Data
+   * @param command Command
+   */
+  submitLoanActionButton(loanId: string, data: any, command: any) {
+    const httpParams = new HttpParams().set('command', command);
+    return this.http.post(`/loans/${loanId}/transactions`, data, {params: httpParams});
   }
 
   /**