WEB-632-loan-product-default-empty-multiples-fields (#3084)

src/app/products/loan-products/common/loan-product-summary/loan-product-summary.component.html

@@ -61,16 +61,20 @@
     </div>
     <div class="flex-fill layout-row">
       <span class="flex-40">{{ 'labels.inputs.Decimal Places' | translate }}:</span>
-      <span class="flex-60">{{ loanProduct.currency.decimalPlaces }}</span>
-    </div>
-    <div class="flex-fill layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Currency in multiples of' | translate }}:</span>
-      <span class="flex-60">{{ loanProduct.currency.inMultiplesOf }}</span>
-    </div>
-    <div class="flex-fill layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Installment in multiples of' | translate }}:</span>
-      <span class="flex-60">{{ loanProduct.installmentAmountInMultiplesOf }}</span>
+      <span class="flex-60">{{ loanProduct.digitsAfterDecimal ?? loanProduct.currency.decimalPlaces }}</span>
     </div>
+    @if (loanProduct.inMultiplesOf || loanProduct.currency?.inMultiplesOf) {
+      <div class="flex-fill layout-row">
+        <span class="flex-40">{{ 'labels.inputs.Currency in multiples of' | translate }}:</span>
+        <span class="flex-60">{{ loanProduct.inMultiplesOf ?? loanProduct.currency.inMultiplesOf }}</span>
+      </div>
+    }
+    @if (loanProduct.installmentAmountInMultiplesOf) {
+      <div class="flex-fill layout-row">
+        <span class="flex-40">{{ 'labels.inputs.Installment in multiples of' | translate }}:</span>
+        <span class="flex-60">{{ loanProduct.installmentAmountInMultiplesOf }}</span>
+      </div>
+    }
     <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Terms' | translate }}</h3>
     <mat-divider [inset]="true"></mat-divider>
     <div class="flex-fill layout-row">

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

@@ -47,38 +47,44 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field class="flex-48">
-      <mat-label>{{ 'labels.inputs.Currency in multiples of' | translate }}</mat-label>
-      <input
-        type="number"
-        min="1"
-        matInput
-        matTooltip="{{ 'tooltips.Enter multiples of currency value' | translate }}"
-        formControlName="inMultiplesOf"
-        required
-      />
-      <mat-error *ngIf="loanProductCurrencyForm.get('inMultiplesOf')?.hasError('required')">
-        {{ 'labels.inputs.Currency in multiples of' | translate }} {{ 'labels.commons.is' | translate }}
-        <strong>{{ 'labels.commons.required' | translate }}</strong>
-      </mat-error>
-      <mat-error *ngIf="loanProductCurrencyForm.get('inMultiplesOf')?.hasError('min')">
-        {{ 'labels.inputs.Currency in multiples of' | translate }}
-        {{ 'labels.commons.Minimum Value must be' | translate }} <strong>1</strong>
-      </mat-error>
-    </mat-form-field>
+    <mat-checkbox labelPosition="before" formControlName="setMultiples" class="flex-98 margin-t">
+      {{ 'labels.inputs.Set the multiples of the loan and its installment' | translate }}
+    </mat-checkbox>
 
-    <mat-form-field class="flex-48">
-      <mat-label>{{ 'labels.inputs.Installment in multiples of' | translate }}</mat-label>
-      <input type="number" min="1" matInput formControlName="installmentAmountInMultiplesOf" required />
-      <mat-error *ngIf="loanProductCurrencyForm.get('installmentAmountInMultiplesOf')?.hasError('required')">
-        {{ 'labels.inputs.Installment in multiples of' | translate }} {{ 'labels.commons.is' | translate }}
-        <strong>{{ 'labels.commons.required' | translate }}</strong>
-      </mat-error>
-      <mat-error *ngIf="loanProductCurrencyForm.get('installmentAmountInMultiplesOf')?.hasError('min')">
-        {{ 'labels.inputs.Installment in multiples of' | translate }}
-        {{ 'labels.commons.Minimum Value must be' | translate }} <strong>1</strong>
-      </mat-error>
-    </mat-form-field>
+    @if (loanProductCurrencyForm.value.setMultiples) {
+      <mat-form-field class="flex-48">
+        <mat-label>{{ 'labels.inputs.Currency in multiples of' | translate }}</mat-label>
+        <input
+          type="number"
+          min="1"
+          matInput
+          matTooltip="{{ 'tooltips.Enter multiples of currency value' | translate }}"
+          formControlName="inMultiplesOf"
+          required
+        />
+        <mat-error *ngIf="loanProductCurrencyForm.get('inMultiplesOf')?.hasError('required')">
+          {{ 'labels.inputs.Currency in multiples of' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
+        </mat-error>
+        <mat-error *ngIf="loanProductCurrencyForm.get('inMultiplesOf')?.hasError('min')">
+          {{ 'labels.inputs.Currency in multiples of' | translate }}
+          {{ 'labels.commons.Minimum Value must be' | translate }} <strong>1</strong>
+        </mat-error>
+      </mat-form-field>
+
+      <mat-form-field class="flex-48">
+        <mat-label>{{ 'labels.inputs.Installment in multiples of' | translate }}</mat-label>
+        <input type="number" min="1" matInput formControlName="installmentAmountInMultiplesOf" required />
+        <mat-error *ngIf="loanProductCurrencyForm.get('installmentAmountInMultiplesOf')?.hasError('required')">
+          {{ 'labels.inputs.Installment in multiples of' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
+        </mat-error>
+        <mat-error *ngIf="loanProductCurrencyForm.get('installmentAmountInMultiplesOf')?.hasError('min')">
+          {{ 'labels.inputs.Installment in multiples of' | translate }}
+          {{ 'labels.commons.Minimum Value must be' | translate }} <strong>1</strong>
+        </mat-error>
+      </mat-form-field>
+    }
   </div>
 
   <div class="layout-row align-center gap-2percent margin-t responsive-column">

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

@@ -9,6 +9,7 @@
 import { Component, OnInit, Input, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { MatTooltip } from '@angular/material/tooltip';
+import { MatCheckbox } from '@angular/material/checkbox';
 import { MatStepperPrevious, MatStepperNext } from '@angular/material/stepper';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
@@ -20,6 +21,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   imports: [
     ...STANDALONE_SHARED_IMPORTS,
     MatTooltip,
+    MatCheckbox,
     MatStepperPrevious,
     FaIconComponent,
     MatStepperNext
@@ -48,6 +50,11 @@ export class LoanProductCurrencyStepComponent implements OnInit {
         this.loanProductsTemplate.currency.decimalPlaces === null
           ? ''
           : this.loanProductsTemplate.currency.decimalPlaces,
+      setMultiples: !!(
+        (this.loanProductsTemplate.currency.inMultiplesOf && this.loanProductsTemplate.currency.inMultiplesOf !== 0) ||
+        (this.loanProductsTemplate.installmentAmountInMultiplesOf &&
+          this.loanProductsTemplate.installmentAmountInMultiplesOf !== 0)
+      ),
       inMultiplesOf:
         this.loanProductsTemplate.currency.inMultiplesOf === 0 ||
         this.loanProductsTemplate.currency.inMultiplesOf === undefined ||
@@ -61,6 +68,50 @@ export class LoanProductCurrencyStepComponent implements OnInit {
           ? ''
           : this.loanProductsTemplate.installmentAmountInMultiplesOf
     });
+
+    this.setupConditionalValidation();
+  }
+
+  setupConditionalValidation() {
+    this.loanProductCurrencyForm.get('setMultiples')?.valueChanges.subscribe((setMultiples: boolean) => {
+      const inMultiplesOfControl = this.loanProductCurrencyForm.get('inMultiplesOf');
+      const installmentControl = this.loanProductCurrencyForm.get('installmentAmountInMultiplesOf');
+
+      if (setMultiples) {
+        inMultiplesOfControl?.setValidators([
+          Validators.required,
+          Validators.min(1)
+        ]);
+        installmentControl?.setValidators([
+          Validators.required,
+          Validators.min(1)
+        ]);
+      } else {
+        inMultiplesOfControl?.clearValidators();
+        installmentControl?.clearValidators();
+        inMultiplesOfControl?.setValue('');
+        installmentControl?.setValue('');
+      }
+
+      inMultiplesOfControl?.updateValueAndValidity();
+      installmentControl?.updateValueAndValidity();
+    });
+
+    const initialSetMultiples = this.loanProductCurrencyForm.get('setMultiples')?.value;
+    if (initialSetMultiples) {
+      const inMultiplesOfControl = this.loanProductCurrencyForm.get('inMultiplesOf');
+      const installmentControl = this.loanProductCurrencyForm.get('installmentAmountInMultiplesOf');
+      inMultiplesOfControl?.setValidators([
+        Validators.required,
+        Validators.min(1)
+      ]);
+      installmentControl?.setValidators([
+        Validators.required,
+        Validators.min(1)
+      ]);
+      inMultiplesOfControl?.updateValueAndValidity();
+      installmentControl?.updateValueAndValidity();
+    }
   }
 
   createLoanProductCurrencyForm() {
@@ -76,24 +127,33 @@ export class LoanProductCurrencyStepComponent implements OnInit {
           Validators.min(0)
         ]
       ],
-      inMultiplesOf: [
-        '',
-        [
-          Validators.required,
-          Validators.min(1)
-        ]
-      ],
-      installmentAmountInMultiplesOf: [
-        '',
-        [
-          Validators.required,
-          Validators.min(1)
-        ]
-      ]
+      setMultiples: [false],
+      inMultiplesOf: [''],
+      installmentAmountInMultiplesOf: ['']
     });
   }
 
   get loanProductCurrency() {
-    return this.loanProductCurrencyForm.value;
+    const formValue = this.loanProductCurrencyForm.value;
+    const result: any = {
+      currencyCode: formValue.currencyCode,
+      digitsAfterDecimal: formValue.digitsAfterDecimal
+    };
+
+    if (formValue.setMultiples) {
+      if (formValue.inMultiplesOf !== '' && formValue.inMultiplesOf !== null && formValue.inMultiplesOf !== undefined) {
+        result.inMultiplesOf = formValue.inMultiplesOf;
+      }
+
+      if (
+        formValue.installmentAmountInMultiplesOf !== '' &&
+        formValue.installmentAmountInMultiplesOf !== null &&
+        formValue.installmentAmountInMultiplesOf !== undefined
+      ) {
+        result.installmentAmountInMultiplesOf = formValue.installmentAmountInMultiplesOf;
+      }
+    }
+
+    return result;
   }
 }