WEB-524 Remove the lock in period (#2930)

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

@@ -16,40 +16,62 @@
       </mat-error>
     </mat-form-field>
 
-    <span class="flex-48 hide-lt-md"></span>
+    <mat-divider class="flex-98"></mat-divider>
 
-    <mat-form-field class="flex-48">
-      <mat-label>{{ 'labels.inputs.Lock-in Period' | translate }}</mat-label>
-      <input
-        type="number"
-        matInput
-        matTooltip="{{ 'tooltips.Used to indicate the length of time' | translate }}"
-        formControlName="lockinPeriodFrequency"
-        min="1"
-        step="1"
-        required
-      />
-      <mat-error *ngIf="savingProductSettingsForm.get('lockinPeriodFrequency').hasError('required')">
-        {{ 'labels.inputs.Frequency' | translate }} {{ 'labels.commons.is' | translate }}
-        <strong>{{ 'labels.commons.required' | translate }}</strong>
-      </mat-error>
-      <mat-error *ngIf="savingProductSettingsForm.get('lockinPeriodFrequency').hasError('min')">
-        {{ 'tooltips.Frequency must be greater than zero' | translate }}
-      </mat-error>
-      <mat-error *ngIf="savingProductSettingsForm.get('lockinPeriodFrequency').hasError('pattern')">
-        {{ 'tooltips.Frequency must be a positive integer' | translate }}
-      </mat-error>
-    </mat-form-field>
+    <h3 class="mat-h3 flex-23">{{ 'labels.inputs.Lock-in Period' | translate }}</h3>
 
-    <mat-form-field class="flex-48">
-      <mat-select formControlName="lockinPeriodFrequencyType">
-        @for (lockinPeriodFrequencyType of lockinPeriodFrequencyTypeData; track lockinPeriodFrequencyType) {
-          <mat-option [value]="lockinPeriodFrequencyType.id">
-            {{ lockinPeriodFrequencyType.value | translateKey: 'catalogs' }}
-          </mat-option>
-        }
-      </mat-select>
-    </mat-form-field>
+    <mat-checkbox
+      class="flex-73 margin-b"
+      labelPosition="before"
+      matTooltip="{{ 'tooltips.Used to indicate the length of time' | translate }}"
+      formControlName="enableLockinPeriod"
+    >
+      {{ 'labels.inputs.Enable Lock-in Period' | translate }}
+    </mat-checkbox>
+
+    @if (savingProductSettingsForm.value.enableLockinPeriod) {
+      <div class="flex-fill layout-row-wrap gap-2percent responsive-column">
+        <mat-form-field class="flex-48">
+          <mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
+          <input
+            type="number"
+            matInput
+            matTooltip="{{ 'tooltips.The number at which lock in period occurs' | translate }}"
+            formControlName="lockinPeriodFrequency"
+            min="1"
+            step="1"
+            required
+          />
+          <mat-error *ngIf="savingProductSettingsForm.get('lockinPeriodFrequency')?.hasError('required')">
+            {{ 'labels.inputs.Frequency' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
+          </mat-error>
+          <mat-error *ngIf="savingProductSettingsForm.get('lockinPeriodFrequency')?.hasError('min')">
+            {{ 'tooltips.Frequency must be greater than zero' | translate }}
+          </mat-error>
+          <mat-error *ngIf="savingProductSettingsForm.get('lockinPeriodFrequency')?.hasError('pattern')">
+            {{ 'tooltips.Frequency must be a positive integer' | translate }}
+          </mat-error>
+        </mat-form-field>
+
+        <mat-form-field class="flex-48">
+          <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
+          <mat-select formControlName="lockinPeriodFrequencyType" required>
+            @for (lockinPeriodFrequencyType of lockinPeriodFrequencyTypeData; track lockinPeriodFrequencyType) {
+              <mat-option [value]="lockinPeriodFrequencyType.id">
+                {{ lockinPeriodFrequencyType.value | translateKey: 'catalogs' }}
+              </mat-option>
+            }
+          </mat-select>
+          <mat-error *ngIf="savingProductSettingsForm.get('lockinPeriodFrequencyType')?.hasError('required')">
+            {{ 'labels.inputs.Type' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
+          </mat-error>
+        </mat-form-field>
+      </div>
+    }
+
+    <mat-divider class="flex-98"></mat-divider>
 
     <mat-checkbox
       class="flex-48 margin-v"

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

@@ -46,12 +46,12 @@ export class SavingProductSettingsStepComponent implements OnInit {
     this.lockinPeriodFrequencyTypeData = this.savingProductsTemplate.lockinPeriodFrequencyTypeOptions;
     this.taxGroupData = this.savingProductsTemplate.taxGroupOptions;
 
+    const hasLockinPeriod =
+      this.savingProductsTemplate.lockinPeriodFrequency && this.savingProductsTemplate.lockinPeriodFrequency > 0;
+
     this.savingProductSettingsForm.patchValue({
       minRequiredOpeningBalance: this.savingProductsTemplate.minRequiredOpeningBalance,
-      lockinPeriodFrequency: this.savingProductsTemplate.lockinPeriodFrequency,
-      lockinPeriodFrequencyType:
-        this.savingProductsTemplate.lockinPeriodFrequencyType &&
-        this.savingProductsTemplate.lockinPeriodFrequencyType.id,
+      enableLockinPeriod: hasLockinPeriod,
       withdrawalFeeForTransfers: this.savingProductsTemplate.withdrawalFeeForTransfers,
       minBalanceForInterestCalculation: this.savingProductsTemplate.minBalanceForInterestCalculation,
       enforceMinRequiredBalance: this.savingProductsTemplate.enforceMinRequiredBalance,
@@ -67,6 +67,15 @@ export class SavingProductSettingsStepComponent implements OnInit {
       daysToDormancy: this.savingProductsTemplate.daysToDormancy,
       daysToEscheat: this.savingProductsTemplate.daysToEscheat
     });
+
+    if (hasLockinPeriod) {
+      this.savingProductSettingsForm.patchValue({
+        lockinPeriodFrequency: this.savingProductsTemplate.lockinPeriodFrequency,
+        lockinPeriodFrequencyType:
+          this.savingProductsTemplate.lockinPeriodFrequencyType &&
+          this.savingProductsTemplate.lockinPeriodFrequencyType.id
+      });
+    }
   }
 
   createSavingProductSettingsForm() {
@@ -75,15 +84,7 @@ export class SavingProductSettingsStepComponent implements OnInit {
         '',
         [Validators.min(0)]
       ],
-      lockinPeriodFrequency: [
-        '',
-        [
-          Validators.required,
-          Validators.min(1),
-          Validators.pattern('^[1-9]\\d*$')
-        ]
-      ],
-      lockinPeriodFrequencyType: [''],
+      enableLockinPeriod: [false],
       withdrawalFeeForTransfers: [false],
       minBalanceForInterestCalculation: [''],
       enforceMinRequiredBalance: [false],
@@ -95,6 +96,26 @@ export class SavingProductSettingsStepComponent implements OnInit {
   }
 
   setConditionalControls() {
+    this.savingProductSettingsForm.get('enableLockinPeriod').valueChanges.subscribe((enableLockinPeriod: any) => {
+      if (enableLockinPeriod) {
+        this.savingProductSettingsForm.addControl(
+          'lockinPeriodFrequency',
+          new UntypedFormControl('', [
+            Validators.required,
+            Validators.min(1),
+            Validators.pattern('^[1-9]\\d*$')
+          ])
+        );
+        this.savingProductSettingsForm.addControl(
+          'lockinPeriodFrequencyType',
+          new UntypedFormControl('', Validators.required)
+        );
+      } else {
+        this.savingProductSettingsForm.removeControl('lockinPeriodFrequency');
+        this.savingProductSettingsForm.removeControl('lockinPeriodFrequencyType');
+      }
+    });
+
     this.savingProductSettingsForm.get('allowOverdraft').valueChanges.subscribe((allowOverdraft: any) => {
       if (allowOverdraft) {
         this.savingProductSettingsForm.addControl('minOverdraftForInterestCalculation', new UntypedFormControl(''));
@@ -131,6 +152,8 @@ export class SavingProductSettingsStepComponent implements OnInit {
   }
 
   get savingProductSettings() {
-    return this.savingProductSettingsForm.value;
+    const formValue = { ...this.savingProductSettingsForm.value };
+    delete formValue.enableLockinPeriod;
+    return formValue;
   }
 }