Multi-dlnqcy - Configuration of Installment level delinquency

src/app/loans/loans-view/account-details/account-details.component.html

@@ -23,7 +23,7 @@
 
         <div fxFlexFill>
             <span fxFlex="50%"> Equal Amortization </span>
-            <span fxFlex="50%"> {{loanDetails.isEqualAmortization}} </span>
+            <span fxFlex="50%"> {{loanDetails.isEqualAmortization | yesNo}} </span>
         </div>
 
         <div fxFlexFill>
@@ -46,6 +46,11 @@
             <span fxFlex="50%"> {{loanDetails.graceOnArrearsAgeing}} </span>
         </div>
 
+        <div fxFlexFill>
+          <span fxFlex="50%"> Enable Installment Level Delinquency </span>
+          <span fxFlex="50%"> {{loanDetails.enableInstallmentLevelDelinquency | yesNo}} </span>
+        </div>
+
         <div fxFlexFill>
             <span fxFlex="50%"> Fund Source</span>
             <span fxFlex="50%"> {{loanDetails.fundName}} </span>
@@ -98,7 +103,7 @@
 
         <div fxFlexFill *ngIf="loanDetails.isTopup">
             <span fxFlex="50%"> Is Topup Loan?</span>
-            <span fxFlex="50%"> {{loanDetails.isTopup}} </span>
+            <span fxFlex="50%"> {{loanDetails.isTopup | yesNo}} </span>
         </div>
 
         <div fxFlexFill *ngIf="loanDetails.isTopup">
@@ -113,7 +118,7 @@
 
         <div fxFlexFill>
             <span fxFlex="50%"> Recalculate Interest based on new terms</span>
-            <span fxFlex="50%">  {{loanDetails.isInterestRecalculationEnabled ? 'Yes' : 'No'  }} </span>
+            <span fxFlex="50%">  {{loanDetails.isInterestRecalculationEnabled | yesNo}} </span>
         </div>
 
         <div fxFlexFill>
@@ -148,7 +153,7 @@
 
         <div fxFlexFill *ngIf="loanDetails.isVariableInstallmentsAllowed">
             <span fxFlex="50%"> Variable Installments Allowed</span>
-            <span fxFlex="50%"> {{loanDetails.isVariableInstallmentsAllowed}} </span>
+            <span fxFlex="50%"> {{loanDetails.isVariableInstallmentsAllowed | yesNo}} </span>
         </div>
 
         <div fxFlexFill *ngIf="loanDetails.isVariableInstallmentsAllowed">

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

@@ -389,7 +389,12 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">Delinquency Bucket:</span>
-    <span fxFlex="60%">{{ loanProduct.delinquencyBucketId | yesNo }}</span>
+    <span fxFlex="60%">{{ loanProduct.delinquencyBucketId }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Enable installment level Delinquency:</span>
+    <span fxFlex="60%">{{ loanProduct.enableInstallmentLevelDelinquency | yesNo }}</span>
   </div>
 
   <div fxFlexFill>

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

@@ -21,8 +21,16 @@ mat-divider {
   margin: 0 0 0.5em 0;
 }
 
-.margin-t {
+.mat-h3 {
-  margin-top: 1em;
+  margin-top: 10px !important;
+  font-weight: 300;
+  color: $status-approved;
+}
+
+.mat-h4 {
+  margin-top: 10px !important;
+  font-weight: 200;
+  color: $status-approved;
 }
 
 .repayment-strategy {

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

@@ -76,6 +76,8 @@
       <input type="number" matInput formControlName="graceOnInterestPayment">
     </mat-form-field>
 
+    <mat-divider fxFlex="98%"></mat-divider>
+
     <mat-form-field fxFlex="48%">
       <mat-label>Delinquency Bucket</mat-label>
       <mat-select formControlName="delinquencyBucketId" required>
@@ -85,6 +87,10 @@
       </mat-select>
     </mat-form-field>
 
+    <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="enableInstallmentLevelDelinquency" class="margin-v">
+      Enable installment level Delinquency
+    </mat-checkbox>
+
     <mat-divider fxFlex="98%"></mat-divider>
 
     <mat-form-field fxFlex="48%">

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

@@ -93,7 +93,8 @@ export class LoanProductSettingsStepComponent implements OnInit {
       'outstandingLoanBalance': this.loanProductsTemplate.outstandingLoanBalance,
       'dueDaysForRepaymentEvent': this.loanProductsTemplate.dueDaysForRepaymentEvent,
       'overDueDaysForRepaymentEvent': this.loanProductsTemplate.overDueDaysForRepaymentEvent,
-      'enableDownPayment': this.loanProductsTemplate.enableDownPayment
+      'enableDownPayment': this.loanProductsTemplate.enableDownPayment,
+      'enableInstallmentLevelDelinquency': this.loanProductsTemplate.enableInstallmentLevelDelinquency
     });
 
     if (this.loanProductsTemplate.delinquencyBucket) {
@@ -199,7 +200,8 @@ export class LoanProductSettingsStepComponent implements OnInit {
       'delinquencyBucketId': ['', Validators.required],
       'dueDaysForRepaymentEvent': [''],
       'overDueDaysForRepaymentEvent': [''],
-      'enableDownPayment': [false]
+      'enableDownPayment': [false],
+      'enableInstallmentLevelDelinquency': [false]
     });
   }
 

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

@@ -343,6 +343,16 @@
     </span>
   </div>
 
+  <div fxFlexFill>
+    <span fxFlex="40%">Delinquency Bucket:</span>
+    <span fxFlex="60%">{{ loanProduct.delinquencyBucket.name }}</span>
+  </div>
+
+  <div fxFlexFill>
+    <span fxFlex="40%">Enable installment level Delinquency:</span>
+    <span fxFlex="60%">{{ loanProduct.enableInstallmentLevelDelinquency | yesNo }}</span>
+  </div>
+
   <div fxFlexFill *ngIf="loanProduct.graceOnPrincipalPayment">
     <span fxFlex="40%">Grace on principal payment:</span>
     <span fxFlex="60%">{{ loanProduct.graceOnPrincipalPayment }}</span>
@@ -587,8 +597,6 @@
     <span fxFlex="60%">{{ loanProduct.allowAttributeOverrides.graceOnPrincipalAndInterestPayment | yesNo }}</span>
     <span fxFlex="40%">Number of days a loan may be overdue before moving into arrears:</span>
     <span fxFlex="60%">{{ loanProduct.allowAttributeOverrides.graceOnArrearsAgeing | yesNo }}</span>
-    <span fxFlex="40%">Delinquency Bucket:</span>
-    <span fxFlex="60%">{{ loanProduct.delinquencyBucket.id }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loanProduct.charges.length" fxLayout="row wrap" fxLayout.lt-md="column">