Down payment configuration for Loan Products (#1836)

Co-authored-by: Jose Alberto Hernandez <alberto@blue-daemon.local>

src/app/products/loan-products/loan-product-stepper/loan-product-preview-step/loan-product-preview-step.component.html

@@ -473,6 +473,20 @@
     <span fxFlex="60%">{{ loanProduct.disallowExpectedDisbursements ? 'Yes' : 'No' }}</span>
   </div>
 
+  <h3 class="mat-h3" fxFlexFill>Down Payments</h3>
+
+  <mat-divider [inset]="true"></mat-divider>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Enable Down Payments:</span>
+    <span fxFlex="60%">{{ loanProduct.enableDownPayment ? 'Yes' : 'No' }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="loanProduct.enableDownPayment" fxLayout="row wrap" fxLayout.lt-md="column">
+    <span fxFlex="40%">Disbursed Amount Percentage Down Payment (%):</span>
+    <span fxFlex="60%">{{ loanProduct.disbursedAmountPercentageForDownPayment }} %</span>
+  </div>
+
   <h3 class="mat-h3" fxFlexFill>Event Settings</h3>
 
   <div fxFlexFill>

src/app/products/loan-products/loan-product-stepper/loan-product-settings-step/loan-product-settings-step.component.html

@@ -399,7 +399,7 @@
       <mat-form-field fxFlex="48%">
         <mat-label>Maximum Tranche count</mat-label>
         <input type="number" matInput matTooltip="The maximum number of disbursements allowed for a loan account." formControlName="maxTrancheCount" required>
-        <mat-error>
+        <mat-error *ngIf="loanProductSettingsForm.controls.maxTrancheCount.hasError('required')">
           Maximum Tranche count is <strong>required</strong>
         </mat-error>
       </mat-form-field>
@@ -416,6 +416,28 @@
 
     <mat-divider fxFlex="98%"></mat-divider>
 
+    <h3 fxFlex="23%" class="mat-h3">Down Payment</h3>
+
+    <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="enableDownPayment" matTooltip="Leave this checkbox checked if the loan has Down Payment, A Down Payment is
+    a sum a buyer pays upfront when purchasing a good. It represents a percentage of the total purchase price, and the balance is usually financed" class="margin-b">
+      Enable Down Payment
+    </mat-checkbox>
+
+    <div *ngIf="loanProductSettingsForm.value.enableDownPayment" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+      <mat-form-field fxFlex="48%">
+        <mat-label>Disbursed Amount Percentage Down Payment (%)</mat-label>
+        <input type="number" matInput matTooltip="The percentage of disbursements amount for Down Payment" formControlName="disbursedAmountPercentageForDownPayment" required [min]="0" [max]="100">
+        <mat-error *ngIf="loanProductSettingsForm.controls.disbursedAmountPercentageForDownPayment.hasError('required')">
+          Disbursed Amount Percentage Down Payment is <strong>required</strong>
+        </mat-error>
+        <mat-error *ngIf="loanProductSettingsForm.controls.disbursedAmountPercentageForDownPayment.errors?.range">
+          Disbursed Amount Percentage Down Payment is out <strong>percentage range</strong>
+        </mat-error>
+      </mat-form-field>
+    </div>
+
+    <mat-divider fxFlex="98%"></mat-divider>
+
     <h3 fxFlex="23%" class="mat-h3">Event Settings <i class="fas fa-question"
       matTooltip="Setting for event notifications to be sent before or after repayments. Blue color means default value from global configurations."></i></h3>
     <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">

src/app/products/loan-products/loan-product-stepper/loan-product-settings-step/loan-product-settings-step.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
 import { LoanProducts } from '../../loan-products';
+import { rangeValidator } from 'app/shared/validators/percentage.validator';
 
 @Component({
   selector: 'mifosx-loan-product-settings-step',
@@ -89,10 +90,17 @@ export class LoanProductSettingsStepComponent implements OnInit {
       'maxTrancheCount': this.loanProductsTemplate.maxTrancheCount,
       'outstandingLoanBalance': this.loanProductsTemplate.outstandingLoanBalance,
       'dueDaysForRepaymentEvent': this.loanProductsTemplate.dueDaysForRepaymentEvent,
-      'overDueDaysForRepaymentEvent': this.loanProductsTemplate.overDueDaysForRepaymentEvent
+      'overDueDaysForRepaymentEvent': this.loanProductsTemplate.overDueDaysForRepaymentEvent,
+      'enableDownPayment': this.loanProductsTemplate.enableDownPayment
     });
 
     if (this.loanProductsTemplate.delinquencyBucket) {
+      this.loanProductSettingsForm.patchValue({
+        'disbursedAmountPercentageForDownPayment': this.loanProductsTemplate.disbursedAmountPercentageForDownPayment || 0
+      });
+    }
+
+    if (this.loanProductsTemplate.enableDownPayment) {
       this.loanProductSettingsForm.patchValue({
         'delinquencyBucketId': this.loanProductsTemplate.delinquencyBucket.id
       });
@@ -187,7 +195,8 @@ export class LoanProductSettingsStepComponent implements OnInit {
       }),
       'delinquencyBucketId': ['', Validators.required],
       'dueDaysForRepaymentEvent': [''],
-      'overDueDaysForRepaymentEvent': ['']
+      'overDueDaysForRepaymentEvent': [''],
+      'enableDownPayment': [false]
     });
   }
 
@@ -332,6 +341,15 @@ export class LoanProductSettingsStepComponent implements OnInit {
         }
       });
 
+      this.loanProductSettingsForm.get('enableDownPayment').valueChanges
+      .subscribe(enableDownPayment => {
+        if (enableDownPayment) {
+          this.loanProductSettingsForm.addControl('disbursedAmountPercentageForDownPayment', new FormControl(0, [Validators.required, rangeValidator(0, 100) ]));
+        } else {
+          this.loanProductSettingsForm.removeControl('disbursedAmountPercentageForDownPayment');
+        }
+      });
+
     this.loanProductSettingsForm.get('allowAttributeConfiguration').valueChanges
       .subscribe((allowAttributeConfiguration: any) => {
         if (allowAttributeConfiguration) {

src/app/products/loan-products/view-loan-product/general-tab/general-tab.component.html

@@ -506,6 +506,20 @@
     </div>
   </div>
 
+  <h3 class="mat-h3" fxFlexFill>Down Payments</h3>
+
+  <mat-divider [inset]="true"></mat-divider>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Enable Down Payments:</span>
+    <span fxFlex="60%">{{ loanProduct.enableDownPayment ? 'Yes' : 'No' }}</span>
+  </div>
+
+  <div fxFlexFill *ngIf="loanProduct.enableDownPayment" fxLayout="row wrap" fxLayout.lt-md="column">
+    <span fxFlex="40%">Disbursed Amount Percentage Down Payment (%):</span>
+    <span fxFlex="60%">{{ loanProduct.disbursedAmountPercentageForDownPayment }} %</span>
+  </div>
+
   <h3 class="mat-h3" fxFlexFill>Event Settings</h3>
 
   <div fxFlexFill>