WEB-661 Fix currency multiples fields sending empty strings to API and add optional checkbox controls (#3085)

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

@@ -32,14 +32,20 @@
       </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" matInput formControlName="inMultiplesOf" />
-      <mat-error>
-        {{ 'labels.inputs.Currency in multiples of' | translate }} {{ 'labels.commons.is' | translate }}
-        <strong>{{ 'labels.commons.required' | translate }}</strong>
-      </mat-error>
-    </mat-form-field>
+    <mat-checkbox labelPosition="before" formControlName="setMultiples" class="flex-98 margin-t checkbox-align-center">
+      {{ 'labels.inputs.Set the fixed deposit installment in multiples of' | translate }}
+    </mat-checkbox>
+
+    @if (fixedDepositProductCurrencyForm.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 formControlName="inMultiplesOf" />
+        <mat-error>
+          {{ 'labels.inputs.Currency in multiples of' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
+        </mat-error>
+      </mat-form-field>
+    }
   </div>
 
   <div class="layout-row align-center gap-2percent margin-t responsive-column">

src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-currency-step/fixed-deposit-product-currency-step.component.scss

@@ -9,3 +9,7 @@
 .margin-t {
   margin-top: 1em;
 }
+
+.checkbox-align-center {
+  align-items: center;
+}

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

@@ -6,9 +6,12 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Component, OnInit, Input, inject } from '@angular/core';
+import { Component, OnInit, Input, inject, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { startWith } from 'rxjs/operators';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { MatStepperPrevious, MatStepperNext } from '@angular/material/stepper';
+import { MatCheckbox } from '@angular/material/checkbox';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
@@ -20,11 +23,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
     ...STANDALONE_SHARED_IMPORTS,
     MatStepperPrevious,
     FaIconComponent,
-    MatStepperNext
+    MatStepperNext,
+    MatCheckbox
   ]
 })
 export class FixedDepositProductCurrencyStepComponent implements OnInit {
   private formBuilder = inject(UntypedFormBuilder);
+  private destroyRef = inject(DestroyRef);
 
   @Input() fixedDepositProductsTemplate: any;
 
@@ -39,18 +44,14 @@ export class FixedDepositProductCurrencyStepComponent implements OnInit {
   ngOnInit() {
     this.currencyData = this.fixedDepositProductsTemplate.currencyOptions;
 
-    if (!(this.fixedDepositProductsTemplate === undefined) && this.fixedDepositProductsTemplate.id) {
-      this.fixedDepositProductCurrencyForm.patchValue({
-        currencyCode: this.fixedDepositProductsTemplate.currency.code,
-        digitsAfterDecimal: this.fixedDepositProductsTemplate.currency.decimalPlaces,
-        inMultiplesOf: this.fixedDepositProductsTemplate.currency.inMultiplesOf
-      });
-    } else {
-      this.fixedDepositProductCurrencyForm.patchValue({
-        currencyCode: this.currencyData[0].code,
-        digitsAfterDecimal: 2
-      });
-    }
+    this.fixedDepositProductCurrencyForm.patchValue({
+      currencyCode: this.fixedDepositProductsTemplate.currency?.code || this.currencyData[0].code,
+      digitsAfterDecimal: this.fixedDepositProductsTemplate.digitsAfterDecimal ?? '',
+      setMultiples: !!this.fixedDepositProductsTemplate.inMultiplesOf,
+      inMultiplesOf: this.fixedDepositProductsTemplate.inMultiplesOf ?? ''
+    });
+
+    this.setupConditionalValidation();
   }
 
   createFixedDepositProductCurrencyForm() {
@@ -61,13 +62,47 @@ export class FixedDepositProductCurrencyStepComponent implements OnInit {
       ],
       digitsAfterDecimal: [
         '',
-        Validators.required
+        [
+          Validators.required,
+          Validators.min(0)
+        ]
       ],
+      setMultiples: [false],
       inMultiplesOf: ['']
     });
   }
 
+  setupConditionalValidation() {
+    const inMultiplesOfControl = this.fixedDepositProductCurrencyForm.get('inMultiplesOf');
+    const setMultiplesControl = this.fixedDepositProductCurrencyForm.get('setMultiples');
+
+    setMultiplesControl?.valueChanges
+      .pipe(startWith(setMultiplesControl.value), takeUntilDestroyed(this.destroyRef))
+      .subscribe((checked) => {
+        if (checked) {
+          inMultiplesOfControl?.setValidators([
+            Validators.required,
+            Validators.min(1)
+          ]);
+        } else {
+          inMultiplesOfControl?.clearValidators();
+          inMultiplesOfControl?.setValue('');
+        }
+        inMultiplesOfControl?.updateValueAndValidity();
+      });
+  }
+
   get fixedDepositProductCurrency() {
-    return this.fixedDepositProductCurrencyForm.value;
+    const formValue = this.fixedDepositProductCurrencyForm.value;
+    const result: any = {
+      currencyCode: formValue.currencyCode,
+      digitsAfterDecimal: formValue.digitsAfterDecimal
+    };
+
+    if (formValue.inMultiplesOf !== '' && formValue.inMultiplesOf !== null && formValue.inMultiplesOf !== undefined) {
+      result.inMultiplesOf = formValue.inMultiplesOf;
+    }
+
+    return result;
   }
 }

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

@@ -37,13 +37,17 @@
 
   <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Decimal Places' | translate }}:</span>
-    <span class="flex-60">{{ fixedDepositProduct.digitsAfterDecimal }}</span>
+    <span class="flex-60">{{
+      fixedDepositProduct.digitsAfterDecimal ?? fixedDepositProduct.currency?.decimalPlaces
+    }}</span>
   </div>
 
-  <div class="layout-row flex-100">
-    <span class="flex-40">{{ 'labels.inputs.Currency in multiples of' | translate }}:</span>
-    <span class="flex-60">{{ fixedDepositProduct.inMultiplesOf }}</span>
-  </div>
+  @if (fixedDepositProduct.inMultiplesOf) {
+    <div class="layout-row flex-100">
+      <span class="flex-40">{{ 'labels.inputs.Currency in multiples of' | translate }}:</span>
+      <span class="flex-60">{{ fixedDepositProduct.inMultiplesOf }}</span>
+    </div>
+  }
 
   <h3 class="mat-h3 flex-100">{{ 'labels.heading.Terms' | translate }}</h3>
 

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

@@ -47,7 +47,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-checkbox labelPosition="before" formControlName="setMultiples" class="flex-98 margin-t">
+    <mat-checkbox labelPosition="before" formControlName="setMultiples" class="flex-98 margin-t align-center">
       {{ 'labels.inputs.Set the multiples of the loan and its installment' | translate }}
     </mat-checkbox>
 

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

@@ -9,3 +9,7 @@
 .margin-t {
   margin-top: 1em;
 }
+
+.align-center {
+  align-items: center;
+}

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

@@ -42,19 +42,26 @@
       </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"
-        matInput
-        formControlName="inMultiplesOf"
-        matTooltip="{{ 'tooltips.Enter multiples of currency value' | translate }}"
-      />
-      <mat-error>
-        {{ 'labels.inputs.Currency in multiples of' | translate }} {{ 'labels.commons.is' | translate }}
-        <strong>{{ 'labels.commons.required' | translate }}</strong>
-      </mat-error>
-    </mat-form-field>
+    <mat-checkbox labelPosition="before" formControlName="setMultiples" class="flex-98 margin-t align-items-center">
+      {{ 'labels.inputs.Set the recurring deposit installment in multiples of' | translate }}
+    </mat-checkbox>
+
+    @if (recurringDepositProductCurrencyForm.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
+          formControlName="inMultiplesOf"
+          matTooltip="{{ 'tooltips.Enter multiples of currency value' | translate }}"
+        />
+        <mat-error>
+          {{ 'labels.inputs.Currency in multiples of' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
+        </mat-error>
+      </mat-form-field>
+    }
   </div>
 
   <div class="layout-row align-center gap-2percent margin-t responsive-column">

src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-currency-step/recurring-deposit-product-currency-step.component.scss

@@ -9,3 +9,7 @@
 .margin-t {
   margin-top: 1em;
 }
+
+.align-items-center {
+  align-items: center;
+}

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

@@ -6,12 +6,14 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Component, OnInit, Input, inject } from '@angular/core';
+import { Component, OnInit, Input, inject, DestroyRef } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { MatTooltip } from '@angular/material/tooltip';
 import { MatStepperPrevious, MatStepperNext } from '@angular/material/stepper';
+import { MatCheckbox } from '@angular/material/checkbox';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'mifosx-recurring-deposit-product-currency-step',
@@ -22,11 +24,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
     MatTooltip,
     MatStepperPrevious,
     FaIconComponent,
-    MatStepperNext
+    MatStepperNext,
+    MatCheckbox
   ]
 })
 export class RecurringDepositProductCurrencyStepComponent implements OnInit {
   private formBuilder = inject(UntypedFormBuilder);
+  private destroyRef = inject(DestroyRef);
 
   @Input() recurringDepositProductsTemplate: any;
 
@@ -40,17 +44,25 @@ export class RecurringDepositProductCurrencyStepComponent implements OnInit {
 
   ngOnInit() {
     this.currencyData = this.recurringDepositProductsTemplate.currencyOptions;
-    if (!(this.recurringDepositProductsTemplate === undefined) && this.recurringDepositProductsTemplate.id) {
-      this.recurringDepositProductCurrencyForm.patchValue({
-        currencyCode: this.recurringDepositProductsTemplate.currency.code,
-        digitsAfterDecimal: this.recurringDepositProductsTemplate.currency.decimalPlaces,
-        inMultiplesOf: this.recurringDepositProductsTemplate.currency.inMultiplesOf
-      });
-    } else {
-      this.recurringDepositProductCurrencyForm.patchValue({
-        currencyCode: this.currencyData[0].code,
-        digitsAfterDecimal: 2
-      });
+
+    this.recurringDepositProductCurrencyForm.patchValue({
+      currencyCode: this.recurringDepositProductsTemplate.currency?.code || this.currencyData[0].code,
+      digitsAfterDecimal: this.recurringDepositProductsTemplate.digitsAfterDecimal ?? '',
+      setMultiples: !!this.recurringDepositProductsTemplate.inMultiplesOf,
+      inMultiplesOf: this.recurringDepositProductsTemplate.inMultiplesOf ?? ''
+    });
+
+    this.setupConditionalValidation();
+
+    // Apply initial validators based on the patched setMultiples value
+    const inMultiplesOfControl = this.recurringDepositProductCurrencyForm.get('inMultiplesOf');
+    const setMultiplesControl = this.recurringDepositProductCurrencyForm.get('setMultiples');
+    if (setMultiplesControl?.value) {
+      inMultiplesOfControl?.setValidators([
+        Validators.required,
+        Validators.min(1)
+      ]);
+      inMultiplesOfControl?.updateValueAndValidity();
     }
   }
 
@@ -62,13 +74,45 @@ export class RecurringDepositProductCurrencyStepComponent implements OnInit {
       ],
       digitsAfterDecimal: [
         '',
-        Validators.required
+        [
+          Validators.required,
+          Validators.min(0)
+        ]
       ],
+      setMultiples: [false],
       inMultiplesOf: ['']
     });
   }
 
+  setupConditionalValidation() {
+    const inMultiplesOfControl = this.recurringDepositProductCurrencyForm.get('inMultiplesOf');
+    const setMultiplesControl = this.recurringDepositProductCurrencyForm.get('setMultiples');
+
+    setMultiplesControl?.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((checked) => {
+      if (checked) {
+        inMultiplesOfControl?.setValidators([
+          Validators.required,
+          Validators.min(1)
+        ]);
+      } else {
+        inMultiplesOfControl?.clearValidators();
+        inMultiplesOfControl?.setValue('');
+      }
+      inMultiplesOfControl?.updateValueAndValidity();
+    });
+  }
+
   get recurringDepositProductCurrency() {
-    return this.recurringDepositProductCurrencyForm.value;
+    const formValue = this.recurringDepositProductCurrencyForm.value;
+    const result: any = {
+      currencyCode: formValue.currencyCode,
+      digitsAfterDecimal: formValue.digitsAfterDecimal
+    };
+
+    if (formValue.inMultiplesOf !== '' && formValue.inMultiplesOf !== null && formValue.inMultiplesOf !== undefined) {
+      result.inMultiplesOf = formValue.inMultiplesOf;
+    }
+
+    return result;
   }
 }

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

@@ -37,13 +37,17 @@
 
   <div class="layout-row flex-100">
     <span class="flex-40">{{ 'labels.inputs.Decimal Places' | translate }}:</span>
-    <span class="flex-60">{{ recurringDepositProduct.digitsAfterDecimal }}</span>
+    <span class="flex-60">{{
+      recurringDepositProduct.digitsAfterDecimal ?? recurringDepositProduct.currency?.decimalPlaces
+    }}</span>
   </div>
 
-  <div class="layout-row flex-100">
-    <span class="flex-40">{{ 'labels.inputs.Currency in multiples of' | translate }}:</span>
-    <span class="flex-60">{{ recurringDepositProduct.inMultiplesOf }}</span>
-  </div>
+  @if (recurringDepositProduct.inMultiplesOf) {
+    <div class="layout-row flex-100">
+      <span class="flex-40">{{ 'labels.inputs.Currency in multiples of' | translate }}:</span>
+      <span class="flex-60">{{ recurringDepositProduct.inMultiplesOf }}</span>
+    </div>
+  }
 
   <h3 class="mat-h3 flex-100">{{ 'labels.heading.Terms' | translate }}</h3>
 

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

@@ -43,21 +43,26 @@
       </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.Amount to be rounded off' | translate }}"
-        formControlName="inMultiplesOf"
-        required
-      />
-      <mat-error>
-        {{ 'labels.inputs.Currency in multiples of' | translate }} {{ 'labels.commons.is' | translate }}
-        <strong>{{ 'labels.commons.required' | translate }}</strong>
-      </mat-error>
-    </mat-form-field>
+    <mat-checkbox labelPosition="before" formControlName="setMultiples" class="flex-98 margin-t checkbox-align-center">
+      {{ 'labels.inputs.Set the saving installment in multiples of' | translate }}
+    </mat-checkbox>
+
+    @if (savingProductCurrencyForm.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.Amount to be rounded off' | translate }}"
+          formControlName="inMultiplesOf"
+        />
+        <mat-error>
+          {{ 'labels.inputs.Currency in multiples of' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
+        </mat-error>
+      </mat-form-field>
+    }
   </div>
 
   <div class="layout-row align-center gap-2percent margin-t responsive-column">

src/app/products/saving-products/saving-product-stepper/saving-product-currency-step/saving-product-currency-step.component.scss

@@ -9,3 +9,7 @@
 .margin-t {
   margin-top: 1em;
 }
+
+.checkbox-align-center {
+  align-items: center;
+}

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

@@ -6,10 +6,12 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Component, OnInit, Input, inject } from '@angular/core';
+import { Component, OnInit, Input, inject, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { MatTooltip } from '@angular/material/tooltip';
 import { MatStepperPrevious, MatStepperNext } from '@angular/material/stepper';
+import { MatCheckbox } from '@angular/material/checkbox';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
@@ -22,11 +24,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
     MatTooltip,
     MatStepperPrevious,
     FaIconComponent,
-    MatStepperNext
+    MatStepperNext,
+    MatCheckbox
   ]
 })
 export class SavingProductCurrencyStepComponent implements OnInit {
   private formBuilder = inject(UntypedFormBuilder);
+  private destroyRef = inject(DestroyRef);
 
   @Input() savingProductsTemplate: any;
 
@@ -43,11 +47,12 @@ export class SavingProductCurrencyStepComponent implements OnInit {
 
     this.savingProductCurrencyForm.patchValue({
       currencyCode: this.savingProductsTemplate.currency.code || this.currencyData[0].code,
-      digitsAfterDecimal: this.savingProductsTemplate.currency.code
-        ? this.savingProductsTemplate.currency.decimalPlaces
-        : 2,
-      inMultiplesOf: this.savingProductsTemplate.currency.inMultiplesOf || ''
+      digitsAfterDecimal: this.savingProductsTemplate.digitsAfterDecimal ?? '',
+      setMultiples: !!this.savingProductsTemplate.inMultiplesOf,
+      inMultiplesOf: this.savingProductsTemplate.inMultiplesOf ?? ''
     });
+
+    this.setupConditionalValidation();
   }
 
   createSavingProductCurrencyForm() {
@@ -63,17 +68,47 @@ export class SavingProductCurrencyStepComponent implements OnInit {
           Validators.min(0)
         ]
       ],
-      inMultiplesOf: [
-        '',
-        [
+      setMultiples: [false],
+      inMultiplesOf: ['']
+    });
+  }
+
+  setupConditionalValidation() {
+    const inMultiplesOfControl = this.savingProductCurrencyForm.get('inMultiplesOf');
+    const setMultiplesControl = this.savingProductCurrencyForm.get('setMultiples');
+    if (setMultiplesControl?.value) {
+      inMultiplesOfControl?.setValidators([
+        Validators.required,
+        Validators.min(1)
+      ]);
+      inMultiplesOfControl?.updateValueAndValidity();
+    }
+
+    setMultiplesControl?.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((checked) => {
+      if (checked) {
+        inMultiplesOfControl?.setValidators([
           Validators.required,
           Validators.min(1)
-        ]
-      ]
+        ]);
+      } else {
+        inMultiplesOfControl?.clearValidators();
+        inMultiplesOfControl?.setValue('');
+      }
+      inMultiplesOfControl?.updateValueAndValidity();
     });
   }
 
   get savingProductCurrency() {
-    return this.savingProductCurrencyForm.value;
+    const formValue = this.savingProductCurrencyForm.value;
+    const result: any = {
+      currencyCode: formValue.currencyCode,
+      digitsAfterDecimal: formValue.digitsAfterDecimal
+    };
+
+    if (formValue.inMultiplesOf !== '' && formValue.inMultiplesOf !== null && formValue.inMultiplesOf !== undefined) {
+      result.inMultiplesOf = formValue.inMultiplesOf;
+    }
+
+    return result;
   }
 }

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

@@ -37,13 +37,15 @@
 
   <div class="flex-100 layout-row">
     <span class="flex-40">{{ 'labels.inputs.Decimal Places' | translate }}:</span>
-    <span class="flex-60">{{ savingProduct.digitsAfterDecimal }}</span>
+    <span class="flex-60">{{ savingProduct.digitsAfterDecimal ?? savingProduct.currency?.decimalPlaces }}</span>
   </div>
 
-  <div class="flex-100 layout-row">
-    <span class="flex-40">{{ 'labels.inputs.Currency in multiples of' | translate }}:</span>
-    <span class="flex-60">{{ savingProduct.inMultiplesOf }}</span>
-  </div>
+  @if (savingProduct.inMultiplesOf) {
+    <div class="flex-100 layout-row">
+      <span class="flex-40">{{ 'labels.inputs.Currency in multiples of' | translate }}:</span>
+      <span class="flex-60">{{ savingProduct.inMultiplesOf }}</span>
+    </div>
+  }
 
   <h3 class="mat-h3 flex-100">{{ 'labels.inputs.Terms' | translate }}</h3>
 

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

@@ -43,21 +43,26 @@
       </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.Amount to be rounded off' | translate }}"
-        formControlName="inMultiplesOf"
-        required
-      />
-      <mat-error>
-        {{ 'labels.inputs.Currency in multiples of' | translate }} {{ 'labels.commons.is' | translate }}
-        <strong>{{ 'labels.commons.required' | translate }}</strong>
-      </mat-error>
-    </mat-form-field>
+    <mat-checkbox labelPosition="before" formControlName="setMultiples" class="flex-98 margin-t align-items-center">
+      {{ 'labels.inputs.Set the share installment in multiples of' | translate }}
+    </mat-checkbox>
+
+    @if (shareProductCurrencyForm.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.Amount to be rounded off' | translate }}"
+          formControlName="inMultiplesOf"
+        />
+        <mat-error>
+          {{ 'labels.inputs.Currency in multiples of' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
+        </mat-error>
+      </mat-form-field>
+    }
   </div>
 
   <div class="layout-row align-center gap-2percent margin-t responsive-column">

src/app/products/share-products/share-product-stepper/share-product-currency-step/share-product-currency-step.component.scss

@@ -9,3 +9,7 @@
 .margin-t {
   margin-top: 1em;
 }
+
+.align-items-center {
+  align-items: center;
+}

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

@@ -6,10 +6,12 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Component, OnInit, Input, inject } from '@angular/core';
+import { Component, OnInit, Input, inject, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { MatTooltip } from '@angular/material/tooltip';
 import { MatStepperPrevious, MatStepperNext } from '@angular/material/stepper';
+import { MatCheckbox } from '@angular/material/checkbox';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
@@ -22,11 +24,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
     MatTooltip,
     MatStepperPrevious,
     FaIconComponent,
-    MatStepperNext
+    MatStepperNext,
+    MatCheckbox
   ]
 })
 export class ShareProductCurrencyStepComponent implements OnInit {
   private formBuilder = inject(UntypedFormBuilder);
+  private destroyRef = inject(DestroyRef);
 
   @Input() shareProductsTemplate: any;
 
@@ -41,18 +45,14 @@ export class ShareProductCurrencyStepComponent implements OnInit {
   ngOnInit() {
     this.currencyData = this.shareProductsTemplate.currencyOptions;
 
-    if (this.shareProductsTemplate.currency) {
-      this.shareProductCurrencyForm.patchValue({
-        currencyCode: this.shareProductsTemplate.currency.code,
-        digitsAfterDecimal: this.shareProductsTemplate.currency.decimalPlaces,
-        inMultiplesOf: this.shareProductsTemplate.currency.inMultiplesOf
-      });
-    } else {
-      this.shareProductCurrencyForm.patchValue({
-        currencyCode: this.currencyData[0].code,
-        digitsAfterDecimal: 2
-      });
-    }
+    this.shareProductCurrencyForm.patchValue({
+      currencyCode: this.shareProductsTemplate.currency?.code || this.currencyData[0].code,
+      digitsAfterDecimal: this.shareProductsTemplate.digitsAfterDecimal ?? '',
+      setMultiples: !!this.shareProductsTemplate.inMultiplesOf,
+      inMultiplesOf: this.shareProductsTemplate.inMultiplesOf ?? ''
+    });
+
+    this.setupConditionalValidation();
   }
 
   createShareProductCurrencyForm() {
@@ -68,17 +68,48 @@ export class ShareProductCurrencyStepComponent implements OnInit {
           Validators.min(0)
         ]
       ],
-      inMultiplesOf: [
-        '',
-        [
+      setMultiples: [false],
+      inMultiplesOf: ['']
+    });
+  }
+
+  setupConditionalValidation() {
+    const inMultiplesOfControl = this.shareProductCurrencyForm.get('inMultiplesOf');
+    const setMultiplesControl = this.shareProductCurrencyForm.get('setMultiples');
+
+    const applyInMultiplesValidators = (checked: boolean) => {
+      if (checked) {
+        inMultiplesOfControl?.setValidators([
           Validators.required,
           Validators.min(1)
-        ]
-      ]
+        ]);
+      } else {
+        inMultiplesOfControl?.clearValidators();
+        inMultiplesOfControl?.setValue('');
+      }
+      inMultiplesOfControl?.updateValueAndValidity();
+    };
+
+    // Apply validators based on initial value
+    applyInMultiplesValidators(setMultiplesControl?.value);
+
+    // Listen for changes
+    setMultiplesControl?.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((checked) => {
+      applyInMultiplesValidators(checked);
     });
   }
 
   get shareProductCurrency() {
-    return this.shareProductCurrencyForm.value;
+    const formValue = this.shareProductCurrencyForm.value;
+    const result: any = {
+      currencyCode: formValue.currencyCode,
+      digitsAfterDecimal: formValue.digitsAfterDecimal
+    };
+
+    if (formValue.inMultiplesOf !== '' && formValue.inMultiplesOf !== null && formValue.inMultiplesOf !== undefined) {
+      result.inMultiplesOf = formValue.inMultiplesOf;
+    }
+
+    return result;
   }
 }

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

@@ -37,13 +37,15 @@
 
   <div class="flex-fill layout-row">
     <span class="flex-40">{{ 'labels.inputs.Decimal Places' | translate }}:</span>
-    <span class="flex-60">{{ shareProduct.digitsAfterDecimal }}</span>
+    <span class="flex-60">{{ shareProduct.digitsAfterDecimal ?? shareProduct.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">{{ shareProduct.inMultiplesOf }}</span>
-  </div>
+  @if (shareProduct.inMultiplesOf) {
+    <div class="flex-fill layout-row">
+      <span class="flex-40">{{ 'labels.inputs.Currency in multiples of' | translate }}:</span>
+      <span class="flex-60">{{ shareProduct.inMultiplesOf }}</span>
+    </div>
+  }
 
   <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Terms' | translate }}</h3>