Update Loan account view to use Delinquency installment

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

@@ -37,6 +37,7 @@ export class LoansAccountScheduleStepComponent implements OnInit {
     const dateFormat = this.settingsService.dateFormat;
     const payload = this.loansService.buildLoanRequestPayload(this.loansAccount, this.loansAccountTemplate,
       this.loansAccountProductTemplate.calendarOptions, locale, dateFormat);
+    delete payload['enableInstallmentLevelDelinquency'];
 
     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

@@ -25,7 +25,7 @@ <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Term Options" | translate}} <i
       <mat-label>{{"labels.inputs.Frequency" | translate}}</mat-label>
       <mat-select required formControlName="loanTermFrequencyType">
         <mat-option *ngFor="let type of termFrequencyTypeData" [value]="type.id">
-          {{ type.value }}
+          {{ type.value | translateCatalog }}
         </mat-option>
       </mat-select>
       <mat-error *ngIf="loansAccountTermsForm.controls.loanTermFrequencyType.hasError('required')">
@@ -81,7 +81,7 @@ <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Repaid Every" | translate}} <i
       <mat-label>{{"labels.inputs.Frequency" | translate}}</mat-label>
       <mat-select formControlName="repaymentFrequencyType" disabled required>
         <mat-option *ngFor="let repaymentFrequencyType of termFrequencyTypeData" [value]="repaymentFrequencyType.id">
-          {{ repaymentFrequencyType.value }}
+          {{ repaymentFrequencyType.value | translateCatalog }}
         </mat-option>
       </mat-select>
     </mat-form-field>
@@ -91,7 +91,7 @@ <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Repaid Every" | translate}} <i
       <mat-select formControlName="repaymentFrequencyNthDayType">
         <mat-option *ngFor="let repaymentFrequencyNthDayType of repaymentFrequencyNthDayTypeData"
           [value]="repaymentFrequencyNthDayType.id">
-          {{ repaymentFrequencyNthDayType.value }}
+          {{ repaymentFrequencyNthDayType.value | translateCatalog }}
         </mat-option>
       </mat-select>
     </mat-form-field>
@@ -101,7 +101,7 @@ <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Repaid Every" | translate}} <i
       <mat-select formControlName="repaymentFrequencyDayOfWeekType">
         <mat-option *ngFor="let repaymentFrequencyDayOfWeekType of repaymentFrequencyDaysOfWeekTypeData"
           [value]="repaymentFrequencyDayOfWeekType.id">
-          {{ repaymentFrequencyDayOfWeekType.value }}
+          {{ repaymentFrequencyDayOfWeekType.value | translateCatalog }}
         </mat-option>
       </mat-select>
     </mat-form-field>
@@ -111,52 +111,63 @@ <h4 fxFlex="98%" class="mat-h4">{{"labels.inputs.Nominal interest rate" | transl
     <ng-container *ngIf="!loansAccountTermsData?.isLoanProductLinkedToFloatingRate">
 
       <mat-form-field fxFlex="23%">
-        <mat-label>{{"labels.inputs.Nominal interest rate" | translate}}</mat-label>
+        <mat-label>{{"labels.inputs.Nominal interest rate" | translate}} %</mat-label>
         <input type="number" matInput formControlName="interestRatePerPeriod">
       </mat-form-field>
 
+      <mat-form-field fxFlex="23%">
+        <mat-label>{{'labels.inputs.Frequency' | translate}}</mat-label>
+        <mat-select formControlName="interestRateFrequencyType">
+          <mat-option *ngFor="let interestRateFrequencyType of interestRateFrequencyTypeData" [value]="interestRateFrequencyType.id">
+            {{ interestRateFrequencyType.value | translateCatalog }}
+          </mat-option>
+        </mat-select>
+        <mat-error>
+          {{'labels.inputs.Nominal interest rate frequency' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        </mat-error>
+      </mat-form-field>
+
       <mat-form-field fxFlex="23%">
         <mat-label>{{"labels.inputs.Interest method" | translate}}</mat-label>
         <mat-select formControlName="interestType" matTooltip="{{ 'tooltips.The Interest method value' | translate}}">
           <mat-option *ngFor="let interestType of interestTypeData" [value]="interestType.id">
-            {{ interestType.value }}
+            {{ interestType.value | translateCatalog }}
           </mat-option>
         </mat-select>
       </mat-form-field>
 
-      <mat-form-field fxFlex="14%">
+      <mat-form-field fxFlex="23%">
         <mat-label>{{"labels.inputs.Amortization" | translate}}</mat-label>
         <mat-select required matTooltip="{{ 'tooltips.The Amortization value' | translate}}" formControlName="amortizationType">
           <mat-option *ngFor="let amortizationType of amortizationTypeData" [value]="amortizationType.id">
-            {{ amortizationType.value }}
+            {{ amortizationType.value | translateCatalog }}
           </mat-option>
         </mat-select>
         <mat-error *ngIf="loansAccountTermsForm.controls.amortizationType.hasError('required')">
           {{"labels.inputs.Amortization Type" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
-      <mat-form-field fxFlex="14%" *ngIf="isEqualPrincipalPayments()">
+      <mat-form-field fxFlex="23%" *ngIf="isEqualPrincipalPayments()">
         <mat-label>{{"labels.inputs.Principal Percentage Per Installment" | translate}}</mat-label>
         <input type="number" matInput formControlName="fixedPrincipalPercentagePerInstallment">
       </mat-form-field>
 
-      <mat-checkbox fxFlex="14%" formControlName="isEqualAmortization"
+      <mat-checkbox fxFlex="23%" formControlName="isEqualAmortization"
         [checked]="loansAccountTermsData?.isEqualAmortization">
         <p>{{"labels.inputs.Is Equal Amortization" | translate}}</p>
       </mat-checkbox>
 
     </ng-container>
 
     <ng-container *ngIf="loansAccountTermsData?.isLoanProductLinkedToFloatingRate">
-
       <div fxFlex="48%" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
         <mat-form-field fxFlex="48%">
           <mat-label>{{"labels.inputs.Interest Method" | translate}}</mat-label>
           <mat-select formControlName="interestType">
             <mat-option *ngFor="let interestType of interestTypeData" [value]="interestType.id">
-              {{ interestType.value }}
+              {{ interestType.value | translateCatalog }}
             </mat-option>
           </mat-select>
         </mat-form-field>
@@ -165,7 +176,7 @@ <h4 fxFlex="98%" class="mat-h4">{{"labels.inputs.Nominal interest rate" | transl
           <mat-label>{{"labels.inputs.Amortization" | translate}}</mat-label>
           <mat-select required matTooltip="{{ 'tooltips.The Amortization value' | translate}}" formControlName="amortizationType">
             <mat-option *ngFor="let amortizationType of amortizationTypeData" [value]="amortizationType.id">
-              {{ amortizationType.value }}
+              {{ amortizationType.value | translateCatalog }}
             </mat-option>
           </mat-select>
           <mat-error *ngIf="loansAccountTermsForm.controls.amortizationType.hasError('required')">
@@ -176,22 +187,21 @@ <h4 fxFlex="98%" class="mat-h4">{{"labels.inputs.Nominal interest rate" | transl
         <mat-checkbox fxFlex="48%" formControlName="isFloatingInterestRate">
           <p>{{"labels.inputs.Is Floating Rate" | translate}}?</p>
         </mat-checkbox>
-
       </div>
-
     </ng-container>
+
     <h4 fxFlex="98%" class="mat-h4">{{"labels.inputs.Loan Schedule" | translate}}</h4>
 
     <div fxFlex="48%" *ngIf="loanScheduleType">
       <span fxFlex="40%"><p>{{"labels.inputs.Loan Schedule Type" | translate}}</p></span>
-      <span fxFlex="60%"><p>{{ loanScheduleType.value }}</p></span>
+      <span fxFlex="60%"><p>{{ loanScheduleType.value | translateCatalog }}</p></span>
     </div>
 
     <mat-form-field fxFlex="48%">
       <mat-label>{{"labels.inputs.Repayment Strategy" | translate}}</mat-label>
       <mat-select formControlName="transactionProcessingStrategyCode" matTooltip="{{ 'tooltips.The repayment strategy' | translate}}" [disabled]="repaymentStrategyDisabled">
         <mat-option *ngFor="let transactionProcessingStrategy of transactionProcessingStrategyOptions" [value]="transactionProcessingStrategy.code">
-          {{ transactionProcessingStrategy.name }}
+          {{ transactionProcessingStrategy.name | translateCatalog }}
         </mat-option>
       </mat-select>
       <mat-error *ngIf="loansAccountTermsForm.controls.transactionProcessingStrategyCode.hasError('required')">
@@ -206,7 +216,7 @@ <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Interest Calculations" | trans
       <mat-select formControlName="interestCalculationPeriodType" matTooltip="{{ 'tooltips.Daily - Will Calculate the interest' | translate}}">
         <mat-option *ngFor="let interestCalculationPeriodType of interestCalculationPeriodTypeData"
           [value]="interestCalculationPeriodType.id">
-          {{ interestCalculationPeriodType.value }}
+          {{ interestCalculationPeriodType.value | translateCatalog }}
         </mat-option>
       </mat-select>
     </mat-form-field>
@@ -242,18 +252,18 @@ <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Moratorium" | translate}} <i c
       <input type="number" matInput formControlName="graceOnArrearsAgeing">
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%" *ngIf="loansAccountTermsData?.canDefineInstallmentAmount">
-      <mat-label>{{"labels.inputs.Installment Amount" | translate}}</mat-label>
-      <input type="number" matInput formControlName="fixedEmiAmount">
-    </mat-form-field>
+    <div fxFlexFill fxFlex="48%" *ngIf="isDelinquencyEnabled()">
+      <p><span fxFlex="53%"><b>{{"labels.inputs.Delinquency Bucket" | translate}}</b></span>
+      <span fxFlex="48%">{{ loanProduct?.delinquencyBucket.name }}</span></p>
+    </div>
 
-    <ng-container *ngIf="isDelinquencyEnabled()">
-      <mat-checkbox fxFlex="48%" formControlName="enableInstallmentLevelDelinquency">
+    <ng-container fxFlex="48%" *ngIf="isDelinquencyEnabled()">
+      <mat-checkbox formControlName="enableInstallmentLevelDelinquency">
         <p>{{'labels.inputs.Enable installment level Delinquency' | translate}}</p>
       </mat-checkbox>
     </ng-container>
 
-    <ng-container *ngIf="loansAccountTermsData?.isTopup">
+    <ng-container fxFlex="48%" *ngIf="loansAccountTermsData?.isTopup">
 
       <mat-checkbox fxFlex="20%" formControlName="isTopup">
         <p>{{"labels.inputs.Is Topup Loan" | translate}}?</p>
@@ -270,16 +280,21 @@ <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Moratorium" | translate}} <i c
 
     </ng-container>
 
+    <mat-form-field fxFlex="48%" *ngIf="loansAccountTermsData?.canDefineInstallmentAmount">
+      <mat-label>{{"labels.inputs.Installment Amount" | translate}}</mat-label>
+      <input type="number" matInput formControlName="fixedEmiAmount">
+    </mat-form-field>
+
     <mat-divider fxFlex="98%"></mat-divider>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{"labels.inputs.Recalculate Interest" | translate}}</span>
+      <span fxFlex="40%"><b>{{"labels.inputs.Recalculate Interest" | translate}}</b></span>
       <span fxFlex="60%">{{ loansAccountTermsData?.isInterestRecalculationEnabled| yesNo }}</span>
     </div>
 
     <div fxFlexFill *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">
       <span fxFlex="40%">{{"labels.inputs.Days in year" | translate}}</span>
-      <span fxFlex="60%">{{ loansAccountTermsData.daysInYearType.value}}</span>
+      <span fxFlex="60%">{{ loansAccountTermsData.daysInYearType.value | translateCatalog }}</span>
     </div>
 
     <ng-container *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">
@@ -291,7 +306,7 @@ <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Moratorium" | translate}} <i c
 
       <div fxFlexFill *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">
         <span fxFlex="40%">{{"labels.inputs.Days in month" | translate}}</span>
-        <span fxFlex="60%">{{ loansAccountTermsData.daysInMonthType.value }}</span>
+        <span fxFlex="60%">{{ loansAccountTermsData.daysInMonthType.value | translateCatalog }}</span>
       </div>
 
     </ng-container>
@@ -300,8 +315,7 @@ <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Moratorium" | translate}} <i c
 
       <div fxFlexFill>
         <span fxFlex="40%">{{"labels.inputs.Interest recalculation compounding on" | translate}}</span>
-        <span fxFlex="60%">{{ loansAccountTermsData.interestRecalculationData.interestRecalculationCompoundingType.value
-          }}</span>
+        <span fxFlex="60%">{{ loansAccountTermsData.interestRecalculationData.interestRecalculationCompoundingType.value | translateCatalog }}</span>
       </div>
 
       <div fxFlexFill>

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

@@ -89,6 +89,8 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
   loanScheduleType: OptionData | null = null;
   loanProduct: LoanProduct | null = null;
 
+  interestRateFrequencyTypeData: any[] = [];
+
   /**
    * Create Loans Account Terms Form
    * @param formBuilder FormBuilder
@@ -116,6 +118,10 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
         this.loanProduct = this.loansAccountTermsData.product;
       }
 
+      this.interestRateFrequencyTypeData = this.loansAccountTermsData.interestRateFrequencyTypeOptions;
+      console.log(this.loansAccountTermsData);
+      console.log(this.loanProduct);
+
       this.loansAccountTermsForm.patchValue({
         'principalAmount': this.loansAccountTermsData.principal,
         'loanTermFrequency': this.loansAccountTermsData.termFrequency,
@@ -138,7 +144,8 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
         'maxOutstandingLoanBalance': this.loansAccountTermsData.maxOutstandingLoanBalance,
         'transactionProcessingStrategyCode': this.loansAccountTermsData.transactionProcessingStrategyCode,
         'interestRateDifferential': this.loansAccountTermsData.interestRateDifferential,
-        'multiDisburseLoan': this.loansAccountTermsData.multiDisburseLoan
+        'multiDisburseLoan': this.loansAccountTermsData.multiDisburseLoan,
+        'interestRateFrequencyType': this.loansAccountTermsData.interestRateFrequencyType.id
       });
 
       this.setAdvancedPaymentStrategyControls();
@@ -156,7 +163,6 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
         });
       }
       if (this.isDelinquencyEnabled()) {
-        console.log("TEST " + this.loansAccountTermsData.enableInstallmentLevelDelinquency);
         this.loansAccountTermsForm.addControl('enableInstallmentLevelDelinquency', new UntypedFormControl(this.loansAccountTermsData.enableInstallmentLevelDelinquency || this.loanProduct.enableInstallmentLevelDelinquency));
       }
       this.collateralDataSource = this.loansAccountTermsData.collateral || [];
@@ -230,7 +236,8 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
         'maxOutstandingLoanBalance': this.loansAccountTermsData.maxOutstandingLoanBalance,
         'transactionProcessingStrategyCode': this.loansAccountTermsData.transactionProcessingStrategyCode,
         'interestRateDifferential': this.loansAccountTermsData.interestRateDifferential,
-        'multiDisburseLoan': this.loansAccountTermsData.multiDisburseLoan
+        'multiDisburseLoan': this.loansAccountTermsData.multiDisburseLoan,
+        'interestRateFrequencyType': this.loansAccountTermsData.interestRateFrequencyType.id
       });
     }
     this.createloansAccountTermsForm();
@@ -349,7 +356,8 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
       'maxOutstandingLoanBalance': [''],
       'interestRateDifferential': [''],
       'transactionProcessingStrategyCode': ['', Validators.required],
-      'multiDisburseLoan': [false]
+      'multiDisburseLoan': [false],
+      'interestRateFrequencyType': ['']
     });
   }