From 6b688b98dc02882b3fb8f06df7613ede1d857cc9 Mon Sep 17 00:00:00 2001
From: Muskan Khedia <36980003+muskankhedia@users.noreply.github.com>
Date: Sat, 11 Jul 2020 10:34:02 +0530
Subject: [PATCH] feat: add loan button (recovery-repayment) (#1058)

Fixes: #1057
---
 .../general-tab/general-tab.component.html    |   5 +-
 .../loan-action-button.resolver.ts            |   6 +-
 .../create-loans-account.component.ts         |   4 +-
 .../loans-account-details-step.component.ts   |   1 -
 .../loan-account-actions.component.html       |   1 +
 .../loan-account-actions.component.ts         |   6 +-
 .../make-repayment.component.html             |   4 +-
 .../make-repayment.component.ts               |  85 +++++++------
 .../prepay-loan/prepay-loan.component.html    |   4 +-
 .../prepay-loan/prepay-loan.component.ts      |  88 +++++++------
 .../recovery-repayment.component.html         |  93 ++++++++++++++
 .../recovery-repayment.component.scss         |   3 +
 .../recovery-repayment.component.spec.ts      |  25 ++++
 .../recovery-repayment.component.ts           | 116 ++++++++++++++++++
 src/app/loans/loans.module.ts                 |   2 +
 15 files changed, 358 insertions(+), 85 deletions(-)
 create mode 100644 src/app/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.html
 create mode 100644 src/app/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.scss
 create mode 100644 src/app/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.spec.ts
 create mode 100644 src/app/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.ts

diff --git a/src/app/clients/clients-view/general-tab/general-tab.component.html b/src/app/clients/clients-view/general-tab/general-tab.component.html
index d266d1489..eb3d33141 100644
--- a/src/app/clients/clients-view/general-tab/general-tab.component.html
+++ b/src/app/clients/clients-view/general-tab/general-tab.component.html
@@ -156,7 +156,7 @@
 
     <tr mat-header-row *matHeaderRowDef="openLoansColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: openLoansColumns;"
-      [routerLink]="['/clients', clientid, 'loans', row.id, 'general']" class="select-row"></tr>
+      [routerLink]="['../', 'loans', row.id, 'general']" class="select-row"></tr>
   </table>
 
   <!-- Closed Loan Accounts -->
@@ -204,7 +204,8 @@
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="closedLoansColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: closedLoansColumns;"></tr>
+    <tr mat-row *matRowDef="let row; columns: closedLoansColumns;"
+    [routerLink]="['../', 'loans', row.id, 'general']" class="select-row"></tr>
   </table>
 
 
diff --git a/src/app/loans/common-resolvers/loan-action-button.resolver.ts b/src/app/loans/common-resolvers/loan-action-button.resolver.ts
index 92c7d048a..c1e161a45 100644
--- a/src/app/loans/common-resolvers/loan-action-button.resolver.ts
+++ b/src/app/loans/common-resolvers/loan-action-button.resolver.ts
@@ -40,8 +40,12 @@ export class LoanActionButtonResolver implements Resolve<Object> {
             return this.loansService.getLoanActionTemplate(loanId, 'close-rescheduled');
         } else if (loanActionButton === 'reschedule') {
             return this.loansService.rescheduleLoanTemplate();
-        } else {
+        } else if (loanActionButton === 'prepay-loan') {
             return this.loansService.getLoanActionTemplate(loanId, 'prepayLoan');
+        } else if (loanActionButton === 'recovery-payment') {
+            return this.loansService.getLoanActionTemplate(loanId, 'recoverypayment');
+        } else {
+            return undefined;
         }
     }
 
diff --git a/src/app/loans/create-loans-account/create-loans-account.component.ts b/src/app/loans/create-loans-account/create-loans-account.component.ts
index 0cced6711..cd5a3108f 100644
--- a/src/app/loans/create-loans-account/create-loans-account.component.ts
+++ b/src/app/loans/create-loans-account/create-loans-account.component.ts
@@ -98,7 +98,7 @@ export class CreateLoansAccountComponent implements OnInit {
     const locale = 'en';
     const dateFormat = 'dd MMMM yyyy';
     const loanType = 'individual';
-    let loansAccountData = {
+    const loansAccountData = {
       ...this.loansAccount,
       clientId: this.loansAccountTemplate.clientId,
       charges: this.loansAccount.charges.map((charge: any) => ({
@@ -136,7 +136,7 @@ export class CreateLoansAccountComponent implements OnInit {
     if (loansAccountData.interestCalculationPeriodType === 0) {
       loansAccountData.allowPartialPeriodInterestCalcualtion = false;
     }
-    if (!(loansAccountData.isFloatingInterestRate === false)){
+    if (!(loansAccountData.isFloatingInterestRate === false)) {
       delete loansAccountData.isFloatingInterestRate;
     }
 
diff --git a/src/app/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.ts b/src/app/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.ts
index db5fdd5d8..4bf9d8846 100644
--- a/src/app/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.ts
+++ b/src/app/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.ts
@@ -5,7 +5,6 @@ import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 /** Custom Services */
 import { LoansService } from '../../loans.service';
 import { DatePipe } from '@angular/common';
-import { ReportsRoutingModule } from 'app/reports/reports-routing.module';
 
 /**
  * Loans Account Details Step
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 1b5c7aa9c..ecdc63a73 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
@@ -10,5 +10,6 @@
     <mifosx-write-off-page [dataObject]="actionButtonData" *ngIf="actions.write_off"></mifosx-write-off-page>
     <mifosx-close-as-rescheduled [dataObject]="actionButtonData" *ngIf="actions.close_as_rescheduled"></mifosx-close-as-rescheduled>
     <mifosx-loan-reschedule [dataObject]="actionButtonData" *ngIf="actions.reschedule"></mifosx-loan-reschedule>
+    <mifosx-recovery-repayment [dataObject]="actionButtonData" *ngIf="actions.recovery_payment"></mifosx-recovery-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 a0b279450..014e19a02 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
@@ -22,7 +22,8 @@ export class LoanAccountActionsComponent {
             make_repayment: boolean,
             waive_interest: boolean,
             close_as_rescheduled: boolean,
-            reschedule: boolean } = {
+            reschedule: boolean,
+            recovery_payment: boolean } = {
               close: false,
               undo_approval: false,
               write_off: false,
@@ -32,7 +33,8 @@ export class LoanAccountActionsComponent {
               make_repayment: false,
               waive_interest: false,
               close_as_rescheduled: false,
-              reschedule: false };
+              reschedule: false,
+              recovery_payment: false };
 
   actionButtonData: any;
   actionName: any;
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
index 8af888c80..8c8d971da 100644
--- 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
@@ -35,7 +35,7 @@
 
         <div fxFlexFill>
           <span fxFlex="25%">Show Payment Details</span>
-          <span fxFlex="75%" class="expandCollapsebutton" (click)="toggleDisplay()">
+          <span fxFlex="75%" class="expandCollapsebutton" (click)="addPaymentDetails()">
             <button mat-raised-button color="primary" *ngIf="showPaymentDetails">
               <i class="fa fa-minus"></i>
             </button>
@@ -53,7 +53,7 @@
   
           <mat-form-field>
             <mat-label>Cheque #</mat-label>
-            <input matInput formControlName="chequeNumber">
+            <input matInput formControlName="checkNumber">
           </mat-form-field>
   
           <mat-form-field>
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
index 981200035..885b78738 100644
--- 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
@@ -1,9 +1,15 @@
+/** Angular Imports */
 import { Component, OnInit, Input } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { LoansService } from 'app/loans/loans.service';
+import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
+
+/** Custom Services */
+import { LoansService } from 'app/loans/loans.service';
 import { DatePipe } from '@angular/common';
 
+/**
+ * Loan Make Repayment Component
+ */
 @Component({
   selector: 'mifosx-make-repayment',
   templateUrl: './make-repayment.component.html',
@@ -14,25 +20,23 @@ export class MakeRepaymentComponent implements OnInit {
   @Input() dataObject: any;
   /** Loan Id */
   loanId: string;
+  /** Payment Type Options */
   paymentTypes: any;
-  showPenaltyPortionDisplay: boolean;
-  principalPortion: any;
-  interestPortion: any;
-  feeChargesPortion: any;
-  processDate: boolean;
+  /** Show payment details */
   showPaymentDetails = false;
   /** Minimum Date allowed. */
   minDate = new Date(2000, 0, 1);
   /** Maximum Date allowed. */
   maxDate = new Date();
-  /** Assign loan Officer form. */
+  /** Repayment Loan Form */
   repaymentLoanForm: FormGroup;
 
   /**
    * @param {FormBuilder} formBuilder Form Builder.
-   * @param {LoansService} systemService Loan Service.
+   * @param {LoansService} loanService Loan Service.
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
+   * @param {DatePipe} datePipe Date Pipe.
    */
   constructor(private formBuilder: FormBuilder,
     private loanService: LoansService,
@@ -43,61 +47,66 @@ export class MakeRepaymentComponent implements OnInit {
     }
 
   /**
-   * Creates the assign officer form.
+   * Creates the repayment loan form
+   * and initialize with the required values
    */
   ngOnInit() {
-    this.createprepayLoanForm();
-    // this.setPrepayLoanDetails();
+    this.createRepaymentLoanForm();
+    // this.setRepaymentLoanDetails();
   }
 
   /**
    * Creates the create close form.
    */
-  createprepayLoanForm() {
+  createRepaymentLoanForm() {
     this.repaymentLoanForm = this.formBuilder.group({
       'transactionDate': [new Date(), Validators.required],
       'transactionAmount': ['', Validators.required],
       'paymentTypeId': '',
-      'accountNumber': '',
-      'chequeNumber': '',
-      'routingCode': '',
-      'receiptNumber': '',
-      'bankNumber': '',
       'note': ''
     });
   }
 
-  setPrepayLoanDetails() {
+  setRepaymentLoanDetails() {
     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;
+  }
+
+  /**
+   * Add payment detail fields to the UI.
+   */
+  addPaymentDetails() {
+    this.showPaymentDetails = !this.showPaymentDetails;
+    if (this.showPaymentDetails) {
+      this.repaymentLoanForm.addControl('accountNumber', new FormControl(''));
+      this.repaymentLoanForm.addControl('checkNumber', new FormControl(''));
+      this.repaymentLoanForm.addControl('routingCode', new FormControl(''));
+      this.repaymentLoanForm.addControl('receiptNumber', new FormControl(''));
+      this.repaymentLoanForm.addControl('bankNumber', new FormControl(''));
+    } else {
+      this.repaymentLoanForm.removeControl('accountNumber');
+      this.repaymentLoanForm.removeControl('checkNumber');
+      this.repaymentLoanForm.removeControl('routingCode');
+      this.repaymentLoanForm.removeControl('receiptNumber');
+      this.repaymentLoanForm.removeControl('bankNumber');
     }
-    this.feeChargesPortion = this.dataObject.feeChargesPortion;
-    this.processDate = true;
-  }
-
-  toggleDisplay() {
-    this.showPaymentDetails = !(this.showPaymentDetails);
   }
 
+  /** Submits the repayment form */
   submit() {
-    const transactionDate = this.repaymentLoanForm.value.transactionDate;
-    const dateFormat = 'yyyy-MM-dd';
+    const prevTransactionDate: Date = this.repaymentLoanForm.value.transactionDate;
+    // TODO: Update once language and date settings are setup
+    const dateFormat = 'dd-MM-yyyy';
     this.repaymentLoanForm.patchValue({
-      transactionDate: this.datePipe.transform(transactionDate, dateFormat)
+      transactionDate: this.datePipe.transform(prevTransactionDate, 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')
+    const repaymentLoanData = this.repaymentLoanForm.value;
+    repaymentLoanData.locale = 'en';
+    repaymentLoanData.dateFormat = dateFormat;
+    this.loanService.submitLoanActionButton(this.loanId, repaymentLoanData, '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
index 819456dd6..509b3d89b 100644
--- 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
@@ -48,7 +48,7 @@
 
         <div fxFlexFill>
           <span fxFlex="25%">Show Payment Details</span>
-          <span fxFlex="75%" class="expandCollapsebutton" (click)="toggleDisplay()">
+          <span fxFlex="75%" class="expandCollapsebutton" (click)="addPaymentDetails()">
             <button mat-raised-button color="primary" *ngIf="showPaymentDetails">
               <i class="fa fa-minus"></i>
             </button>
@@ -66,7 +66,7 @@
   
           <mat-form-field>
             <mat-label>Cheque #</mat-label>
-            <input matInput formControlName="chequeNumber">
+            <input matInput formControlName="checkNumber">
           </mat-form-field>
   
           <mat-form-field>
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
index eadeea889..6ccf2394c 100644
--- 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
@@ -1,9 +1,15 @@
+/** Angular Imports */
 import { Component, OnInit, Input } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { LoansService } from 'app/loans/loans.service';
+import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
+
+/** Custom Services */
+import { LoansService } from 'app/loans/loans.service';
 import { DatePipe } from '@angular/common';
 
+/**
+ * Loan Prepay Loan Option
+ */
 @Component({
   selector: 'mifosx-prepay-loan',
   templateUrl: './prepay-loan.component.html',
@@ -14,25 +20,27 @@ export class PrepayLoanComponent implements OnInit {
   @Input() dataObject: any;
   /** Loan Id */
   loanId: string;
+  /** Payment Types */
   paymentTypes: any;
-  showPenaltyPortionDisplay: boolean;
+  /** Principal Portion */
   principalPortion: any;
+  /** Interest Portion */
   interestPortion: any;
-  feeChargesPortion: any;
-  processDate: boolean;
+  /** Show Payment Details */
   showPaymentDetails = false;
   /** Minimum Date allowed. */
   minDate = new Date(2000, 0, 1);
   /** Maximum Date allowed. */
   maxDate = new Date();
-  /** Assign loan Officer form. */
+  /** Prepay Loan form. */
   prepayLoanForm: FormGroup;
 
   /**
    * @param {FormBuilder} formBuilder Form Builder.
-   * @param {LoansService} systemService Loan Service.
+   * @param {LoansService} loanService Loan Service.
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
+   * @param {DatePipe} datePipe Date Pipe.
    */
   constructor(private formBuilder: FormBuilder,
     private loanService: LoansService,
@@ -43,7 +51,8 @@ export class PrepayLoanComponent implements OnInit {
     }
 
   /**
-   * Creates the assign officer form.
+   * Creates the prepay loan form
+   * and initialize with the required values
    */
   ngOnInit() {
     this.createprepayLoanForm();
@@ -51,7 +60,7 @@ export class PrepayLoanComponent implements OnInit {
   }
 
   /**
-   * Creates the create close form.
+   * Creates the prepay loan form.
    */
   createprepayLoanForm() {
     this.prepayLoanForm = this.formBuilder.group({
@@ -59,16 +68,14 @@ export class PrepayLoanComponent implements OnInit {
       'transactionAmount': ['', Validators.required],
       'principal': [{value: '', disabled: true}],
       'interestAmount': [{value: '', disabled: true}, Validators.required],
-      'paymentTypeId': '',
-      'accountNumber': '',
-      'chequeNumber': '',
-      'routingCode': '',
-      'receiptNumber': '',
-      'bankNumber': '',
-      'note': ''
+      'paymentTypeId': [''],
+      'note': ['']
     });
   }
 
+  /**
+   * Sets the value in the prepay loan form
+   */
   setPrepayLoanDetails() {
     this.paymentTypes = this.dataObject.paymentTypeOptions;
     this.prepayLoanForm.patchValue({
@@ -76,31 +83,42 @@ export class PrepayLoanComponent implements OnInit {
       principal: this.dataObject.principalPortion,
       interestAmount: this.dataObject.interestPortion,
     });
-    if (this.dataObject.penaltyChargesPortion > 0) {
-        this.showPenaltyPortionDisplay = true;
+  }
+
+  /**
+   * Add payment detail fields to the UI.
+   */
+  addPaymentDetails() {
+    this.showPaymentDetails = !this.showPaymentDetails;
+    if (this.showPaymentDetails) {
+      this.prepayLoanForm.addControl('accountNumber', new FormControl(''));
+      this.prepayLoanForm.addControl('checkNumber', new FormControl(''));
+      this.prepayLoanForm.addControl('routingCode', new FormControl(''));
+      this.prepayLoanForm.addControl('receiptNumber', new FormControl(''));
+      this.prepayLoanForm.addControl('bankNumber', new FormControl(''));
+    } else {
+      this.prepayLoanForm.removeControl('accountNumber');
+      this.prepayLoanForm.removeControl('checkNumber');
+      this.prepayLoanForm.removeControl('routingCode');
+      this.prepayLoanForm.removeControl('receiptNumber');
+      this.prepayLoanForm.removeControl('bankNumber');
     }
-    this.feeChargesPortion = this.dataObject.feeChargesPortion;
-    this.processDate = true;
-  }
-
-  toggleDisplay() {
-    this.showPaymentDetails = !(this.showPaymentDetails);
   }
 
+  /**
+   * Submits the prepay loan form
+   */
   submit() {
-    const transactionDate = this.prepayLoanForm.value.transactionDate;
-    const dateFormat = 'yyyy-MM-dd';
+    const prevTransactionDate: Date = this.prepayLoanForm.value.transactionDate;
+    // TODO: Update once language and date settings are setup
+    const dateFormat = 'dd-MM-yyyy';
     this.prepayLoanForm.patchValue({
-      transactionDate: this.datePipe.transform(transactionDate, dateFormat)
+      transactionDate: this.datePipe.transform(prevTransactionDate, 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')
+    const prepayLoanData = this.prepayLoanForm.value;
+    prepayLoanData.locale = 'en';
+    prepayLoanData.dateFormat = dateFormat;
+    this.loanService.submitLoanActionButton(this.loanId, prepayLoanData, 'repayment')
       .subscribe((response: any) => {
         this.router.navigate(['../general'], { relativeTo: this.route });
     });
diff --git a/src/app/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.html b/src/app/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.html
new file mode 100644
index 000000000..632c2de22
--- /dev/null
+++ b/src/app/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.html
@@ -0,0 +1,93 @@
+<div class="container">
+
+  <form [formGroup]="recoveryRepaymentLoanForm" (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="recoveryRepaymentLoanForm.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="recoveryRepaymentLoanForm.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)="addPaymentDetails()">
+            <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="checkNumber">
+          </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]="!recoveryRepaymentLoanForm.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/recovery-repayment/recovery-repayment.component.scss b/src/app/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.scss
new file mode 100644
index 000000000..cd2e90d69
--- /dev/null
+++ b/src/app/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.scss
@@ -0,0 +1,3 @@
+.expandCollapsebutton {
+    margin-top: -7px;
+}
diff --git a/src/app/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.spec.ts b/src/app/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.spec.ts
new file mode 100644
index 000000000..1bc6af53d
--- /dev/null
+++ b/src/app/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RecoveryRepaymentComponent } from './recovery-repayment.component';
+
+describe('RecoveryRepaymentComponent', () => {
+  let component: RecoveryRepaymentComponent;
+  let fixture: ComponentFixture<RecoveryRepaymentComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RecoveryRepaymentComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RecoveryRepaymentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.ts b/src/app/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.ts
new file mode 100644
index 000000000..54d1cb42b
--- /dev/null
+++ b/src/app/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.ts
@@ -0,0 +1,116 @@
+/** Angular Imports */
+import { Component, OnInit, Input } from '@angular/core';
+import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+
+/** Custom Services */
+import { LoansService } from 'app/loans/loans.service';
+import { DatePipe } from '@angular/common';
+
+/**
+ * Loan Recovery Repayment Action
+ */
+@Component({
+  selector: 'mifosx-recovery-repayment',
+  templateUrl: './recovery-repayment.component.html',
+  styleUrls: ['./recovery-repayment.component.scss']
+})
+export class RecoveryRepaymentComponent implements OnInit {
+
+  @Input() dataObject: any;
+  /** Loan Id */
+  loanId: string;
+  /** Payment Type Options */
+  paymentTypes: any;
+  /** Show payment details */
+  showPaymentDetails = false;
+  /** Minimum Date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum Date allowed. */
+  maxDate = new Date();
+  /** Recovery Repayment Loan Form */
+  recoveryRepaymentLoanForm: FormGroup;
+
+  /**
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {LoansService} loanService Loan Service.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   * @param {DatePipe} datePipe Date Pipe.
+   */
+  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 recovery repayment loan form
+   * and initialize with the required values
+   */
+  ngOnInit() {
+    this.createRecoveryRepaymentLoanForm();
+    this.setRecoveryRepaymentLoanDetails();
+  }
+
+  /**
+   * Creates the recovery repayment loan form
+   */
+  createRecoveryRepaymentLoanForm() {
+    this.recoveryRepaymentLoanForm = this.formBuilder.group({
+      'transactionDate': [new Date(), Validators.required],
+      'transactionAmount': ['', Validators.required],
+      'paymentTypeId': [''],
+      'note': ['']
+    });
+  }
+
+  /** Sets Recovery Payment Loan Details */
+  setRecoveryRepaymentLoanDetails() {
+    this.paymentTypes = this.dataObject.paymentTypeOptions;
+    this.recoveryRepaymentLoanForm.patchValue({
+      transactionAmount: this.dataObject.amount,
+      transactionDate: new Date(this.dataObject.date)
+    });
+  }
+
+  /**
+   * Add payment detail fields to the UI.
+   */
+  addPaymentDetails() {
+    this.showPaymentDetails = !this.showPaymentDetails;
+    if (this.showPaymentDetails) {
+      this.recoveryRepaymentLoanForm.addControl('accountNumber', new FormControl(''));
+      this.recoveryRepaymentLoanForm.addControl('checkNumber', new FormControl(''));
+      this.recoveryRepaymentLoanForm.addControl('routingCode', new FormControl(''));
+      this.recoveryRepaymentLoanForm.addControl('receiptNumber', new FormControl(''));
+      this.recoveryRepaymentLoanForm.addControl('bankNumber', new FormControl(''));
+    } else {
+      this.recoveryRepaymentLoanForm.removeControl('accountNumber');
+      this.recoveryRepaymentLoanForm.removeControl('checkNumber');
+      this.recoveryRepaymentLoanForm.removeControl('routingCode');
+      this.recoveryRepaymentLoanForm.removeControl('receiptNumber');
+      this.recoveryRepaymentLoanForm.removeControl('bankNumber');
+    }
+  }
+
+  /** Submits the recovery payment form */
+  submit() {
+    const prevTransactionDate: Date = this.recoveryRepaymentLoanForm.value.transactionDate;
+    // TODO: Update once language and date settings are setup
+    const dateFormat = 'dd-MM-yyyy';
+    this.recoveryRepaymentLoanForm.patchValue({
+      transactionDate: this.datePipe.transform(prevTransactionDate, dateFormat)
+    });
+    const recoveryRepaymentLoanData = this.recoveryRepaymentLoanForm.value;
+    recoveryRepaymentLoanData.locale = 'en';
+    recoveryRepaymentLoanData.dateFormat = dateFormat;
+    this.loanService.submitLoanActionButton(this.loanId, recoveryRepaymentLoanData, 'recoverypayment')
+      .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 05517868b..69eb3fa5a 100644
--- a/src/app/loans/loans.module.ts
+++ b/src/app/loans/loans.module.ts
@@ -42,6 +42,7 @@ import { LoansAccountTermsStepComponent } from './loans-account-stepper/loans-ac
 import { LoansAccountChargesStepComponent } from './loans-account-stepper/loans-account-charges-step/loans-account-charges-step.component';
 import { LoansAccountPreviewStepComponent } from './loans-account-stepper/loans-account-preview-step/loans-account-preview-step.component';
 import { LoansAccountAddCollateralDialogComponent } from './loans-account-add-collateral-dialog/loans-account-add-collateral-dialog.component';
+import { RecoveryRepaymentComponent } from './loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component';
 
 /**
  * Loans Module
@@ -84,6 +85,7 @@ import { LoansAccountAddCollateralDialogComponent } from './loans-account-add-co
     LoansAccountChargesStepComponent,
     LoansAccountPreviewStepComponent,
     LoansAccountAddCollateralDialogComponent,
+    RecoveryRepaymentComponent,
   ],
   entryComponents: [
     LoansAccountAddCollateralDialogComponent