update code account saving,current,RD

src/app/savings/create-savings-account/create-savings-account.component.html

@@ -35,7 +35,7 @@
     </ng-template>
 
     <!-- Step 1: Product Classification + Details -->
-    <mat-step [stepControl]="savingsAccountDetailsForm">
+    <mat-step>
       <ng-template matStepLabel>Product Classification</ng-template>
 
       <mifosx-savings-account-details-step
@@ -45,96 +45,46 @@
       </mifosx-savings-account-details-step>
     </mat-step>
 
-    <!-- Step 2: Currency -->
-    <mat-step>
-      <ng-template matStepLabel>Currency</ng-template>
+    @if (savingsAccountProductTemplate) {
+      <!-- Step 2: Currency -->
+      <mat-step>
+        <ng-template matStepLabel>Currency</ng-template>
 
-      <mifosx-savings-account-currency-step [savingsAccountProductTemplate]="savingsAccountProductTemplate">
-      </mifosx-savings-account-currency-step>
+        <mifosx-savings-account-currency-step [savingsAccountProductTemplate]="savingsAccountProductTemplate">
+        </mifosx-savings-account-currency-step>
 
-      <div class="layout-row align-center gap-2percent margin-t responsive-column">
-        <button mat-raised-button matStepperPrevious>
-          <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-          {{ 'labels.buttons.Previous' | translate }}
-        </button>
-        <button mat-raised-button matStepperNext>
-          {{ 'labels.buttons.Next' | translate }}
-          <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
-        </button>
-      </div>
-    </mat-step>
+        <div class="layout-row align-center gap-2percent margin-t responsive-column">
+          <button mat-raised-button matStepperPrevious>
+            <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
+            {{ 'labels.buttons.Previous' | translate }}
+          </button>
+          <button mat-raised-button matStepperNext>
+            {{ 'labels.buttons.Next' | translate }}
+            <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
+          </button>
+        </div>
+      </mat-step>
 
-    <!-- Step 3: Term -->
-    <mat-step [stepControl]="savingsAccountTermsForm">
-      <ng-template matStepLabel>Term</ng-template>
+      <!-- Step 3: Digital -->
+      <mat-step>
+        <ng-template matStepLabel>Digital</ng-template>
 
-      <mifosx-savings-account-term-step [savingsAccountProductTemplate]="savingsAccountProductTemplate">
-      </mifosx-savings-account-term-step>
+        <mifosx-savings-account-digital-step [savingsAccountProductTemplate]="savingsAccountProductTemplate">
+        </mifosx-savings-account-digital-step>
 
-      <div class="layout-row align-center gap-2percent margin-t responsive-column">
-        <button mat-raised-button matStepperPrevious>
-          <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-          {{ 'labels.buttons.Previous' | translate }}
-        </button>
-        <button mat-raised-button matStepperNext [disabled]="savingsAccountTermsForm.invalid">
-          {{ 'labels.buttons.Next' | translate }}
-          <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
-        </button>
-      </div>
-    </mat-step>
+        <div class="layout-row align-center gap-2percent margin-t responsive-column">
+          <button mat-raised-button matStepperPrevious>
+            <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
+            {{ 'labels.buttons.Previous' | translate }}
+          </button>
+          <button mat-raised-button matStepperNext>
+            {{ 'labels.buttons.Next' | translate }}
+            <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
+          </button>
+        </div>
+      </mat-step>
 
-    <!-- Step 4: Settings -->
-    <mat-step [stepControl]="savingsAccountSettingsForm">
-      <ng-template matStepLabel>{{ 'labels.inputs.SETTINGS' | translate }}</ng-template>
-
-      <mifosx-savings-account-settings-step [savingsAccountProductTemplate]="savingsAccountProductTemplate">
-      </mifosx-savings-account-settings-step>
-
-      <div class="layout-row align-center gap-2percent margin-t responsive-column">
-        <button mat-raised-button matStepperPrevious>
-          <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-          {{ 'labels.buttons.Previous' | translate }}
-        </button>
-        <button mat-raised-button matStepperNext>
-          {{ 'labels.buttons.Next' | translate }}
-          <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
-        </button>
-      </div>
-    </mat-step>
-
-    <!-- Step 5: Digital -->
-    <mat-step>
-      <ng-template matStepLabel>Digital</ng-template>
-
-      <mifosx-savings-account-digital-step [savingsAccountProductTemplate]="savingsAccountProductTemplate">
-      </mifosx-savings-account-digital-step>
-
-      <div class="layout-row align-center gap-2percent margin-t responsive-column">
-        <button mat-raised-button matStepperPrevious>
-          <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-          {{ 'labels.buttons.Previous' | translate }}
-        </button>
-        <button mat-raised-button matStepperNext>
-          {{ 'labels.buttons.Next' | translate }}
-          <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
-        </button>
-      </div>
-    </mat-step>
-
-    <!-- Step 6: Charges -->
-    <mat-step>
-      <ng-template matStepLabel>{{ 'labels.inputs.CHARGES' | translate }}</ng-template>
-
-      <mifosx-savings-account-charges-step
-        [savingsAccountProductTemplate]="savingsAccountProductTemplate"
-        [savingsAccountTemplate]="savingsAccountTemplate"
-        [currencyCode]="savingsAccountTermsForm.get('currencyCode')"
-      >
-      </mifosx-savings-account-charges-step>
-    </mat-step>
-
-    <!-- Step 7: Preview -->
-    @if (savingsAccountFormValid) {
+      <!-- Step 4: Preview -->
       <mat-step completed>
         <ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
         <mifosx-savings-account-preview-step

src/app/savings/create-savings-account/create-savings-account.component.scss

@@ -27,11 +27,14 @@
   .mat-step-content {
     padding: 1.5rem;
     margin: 1rem 0;
+    overflow: visible !important;
   }
 }
 
 // Form field spacing within steps
 :host ::ng-deep mat-step-content {
+  overflow: visible !important;
+
   mat-form-field {
     margin-bottom: 1rem;
     width: 100%;

src/app/savings/create-savings-account/create-savings-account.component.ts

@@ -9,12 +9,10 @@
 /** Angular Imports */
 import { Component, ViewChild, inject } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
+import { FormGroup } from '@angular/forms';
 
 /** Custom Components */
 import { SavingsAccountDetailsStepComponent } from '../savings-account-stepper/savings-account-details-step/savings-account-details-step.component';
-import { SavingsAccountTermStepComponent } from '../savings-account-stepper/savings-account-term-step/savings-account-term-step.component';
-import { SavingsAccountSettingsStepComponent } from '../savings-account-stepper/savings-account-settings-step/savings-account-settings-step.component';
-import { SavingsAccountChargesStepComponent } from '../savings-account-stepper/savings-account-charges-step/savings-account-charges-step.component';
 import { SavingsAccountCurrencyStepComponent } from '../savings-account-stepper/savings-account-currency-step/savings-account-currency-step.component';
 import { SavingsAccountDigitalStepComponent } from '../savings-account-stepper/savings-account-digital-step/savings-account-digital-step.component';
 
@@ -22,7 +20,14 @@ import { SavingsAccountDigitalStepComponent } from '../savings-account-stepper/s
 import { SavingsService } from '../savings.service';
 import { SettingsService } from 'app/settings/settings.service';
 import { Dates } from 'app/core/utils/dates';
-import { MatStepper, MatStepperIcon, MatStep, MatStepLabel } from '@angular/material/stepper';
+import {
+  MatStepper,
+  MatStepperIcon,
+  MatStep,
+  MatStepLabel,
+  MatStepperNext,
+  MatStepperPrevious
+} from '@angular/material/stepper';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { SavingsAccountPreviewStepComponent } from '../savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
@@ -38,14 +43,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
     ...STANDALONE_SHARED_IMPORTS,
     MatStepper,
     MatStepperIcon,
+    MatStepperNext,
+    MatStepperPrevious,
     FaIconComponent,
     MatStep,
     MatStepLabel,
     SavingsAccountDetailsStepComponent,
     SavingsAccountCurrencyStepComponent,
-    SavingsAccountTermStepComponent,
-    SavingsAccountSettingsStepComponent,
-    SavingsAccountChargesStepComponent,
     SavingsAccountDigitalStepComponent,
     SavingsAccountPreviewStepComponent
   ]
@@ -65,15 +69,6 @@ export class CreateSavingsAccountComponent {
   @ViewChild(SavingsAccountDetailsStepComponent, { static: true })
   savingsAccountDetailsStep: SavingsAccountDetailsStepComponent;
 
-  @ViewChild(SavingsAccountTermStepComponent, { static: true })
-  savingsAccountTermStep: SavingsAccountTermStepComponent;
-
-  @ViewChild(SavingsAccountSettingsStepComponent, { static: true })
-  savingsAccountSettingsStep: SavingsAccountSettingsStepComponent;
-
-  @ViewChild(SavingsAccountChargesStepComponent, { static: true })
-  savingsAccountChargesStep: SavingsAccountChargesStepComponent;
-
   constructor() {
     this.route.data.subscribe((data: { savingsAccountTemplate: any }) => {
       this.savingsAccountTemplate = data.savingsAccountTemplate;
@@ -88,28 +83,14 @@ export class CreateSavingsAccountComponent {
     return this.savingsAccountDetailsStep.savingsAccountDetailsForm;
   }
 
-  get savingsAccountTermsForm() {
-    return this.savingsAccountTermStep.savingsAccountTermForm;
-  }
-
-  get savingsAccountSettingsForm() {
-    return this.savingsAccountSettingsStep.savingsAccountSettingsForm;
-  }
-
-  get savingsAccountFormValid() {
-    return (
-      this.savingsAccountDetailsForm.valid &&
-      this.savingsAccountTermsForm.valid &&
-      this.savingsAccountSettingsForm.valid
-    );
+  /** Stub — no term step in this flow */
+  get savingsAccountTermsForm(): FormGroup {
+    return new FormGroup({});
   }
 
   get savingsAccount() {
     return {
-      ...this.savingsAccountDetailsStep.savingsAccountDetails,
-      ...this.savingsAccountTermStep.savingsAccountTerms,
-      ...this.savingsAccountSettingsStep.savingsAccountSettings,
-      ...this.savingsAccountChargesStep.savingsAccountCharges
+      ...this.savingsAccountDetailsStep.savingsAccountDetails
     };
   }
 
@@ -119,15 +100,7 @@ export class CreateSavingsAccountComponent {
     const monthDayFormat = 'dd MMMM';
     const savingsAccount = {
       ...this.savingsAccount,
-      charges: this.savingsAccount.charges.map((charge: any) => ({
-        chargeId: charge.id,
-        amount: charge.amount,
-        dueDate: charge.dueDate ? this.dateUtils.formatDate(charge.dueDate, dateFormat) : charge.dueDate,
-        feeOnMonthDay: charge.feeOnMonthDay
-          ? this.dateUtils.formatDate(charge.feeOnMonthDay, monthDayFormat)
-          : charge.feeOnMonthDay,
-        feeInterval: charge.feeInterval
-      })),
+      charges: [],
       submittedOnDate: this.dateUtils.formatDate(this.savingsAccount.submittedOnDate, dateFormat),
       dateFormat,
       monthDayFormat,

src/app/savings/savings-account-stepper/savings-account-currency-step/savings-account-currency-step.component.html

@@ -36,6 +36,8 @@
       </span>
     </div>
 
+    <mifosx-dormancy-alert-panel [productTemplate]="savingsAccountProductTemplate"></mifosx-dormancy-alert-panel>
+
     <div class="sac-alert">
       <div class="sac-alert__content">
         <h4>Nomination Facility</h4>
@@ -45,5 +47,9 @@
         {{ savingsAccountProductTemplate?.nominationFacility ? 'Yes' : 'No' }}
       </span>
     </div>
+
+    @if (savingsAccountProductTemplate?.nominationFacility) {
+      <mifosx-nominee-form (nomineeChange)="onNomineeChange($event)"></mifosx-nominee-form>
+    }
   </div>
 </div>

src/app/savings/savings-account-stepper/savings-account-currency-step/savings-account-currency-step.component.ts

@@ -8,13 +8,25 @@
 
 import { Component, Input } from '@angular/core';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+import { NomineeFormComponent } from 'app/shared/nominee-form/nominee-form.component';
+import { DormancyAlertPanelComponent } from 'app/shared/dormancy-alert-panel/dormancy-alert-panel.component';
 
 @Component({
   selector: 'mifosx-savings-account-currency-step',
   templateUrl: './savings-account-currency-step.component.html',
   styleUrls: ['./savings-account-currency-step.component.scss'],
-  imports: [...STANDALONE_SHARED_IMPORTS]
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    NomineeFormComponent,
+    DormancyAlertPanelComponent
+  ]
 })
 export class SavingsAccountCurrencyStepComponent {
   @Input() savingsAccountProductTemplate: any;
+
+  nomineeData: any = null;
+
+  onNomineeChange(event: any): void {
+    this.nomineeData = event;
+  }
 }

src/app/savings/savings-account-stepper/savings-account-details-step/savings-account-details-step.component.html

@@ -67,7 +67,7 @@
     </div>
   </div>
 
-  <!-- Product Classification (read-only, shown after product is selected) -->
+  <!-- Product Classification + Introducer (shown after product is selected) -->
   @if (savingsProductSelected) {
     <div class="sad-section sad-section--mt">
       <div class="sad-section__header">
@@ -118,16 +118,9 @@
         </div>
       </div>
     </div>
-  }
 
-  <div class="layout-row align-center gap-2percent margin-t responsive-column">
-    <button mat-raised-button matStepperPrevious disabled>
-      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-      {{ 'labels.buttons.Previous' | translate }}
-    </button>
-    <button mat-raised-button matStepperNext [disabled]="savingsAccountDetailsForm.invalid">
-      {{ 'labels.buttons.Next' | translate }}
-      <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
-    </button>
-  </div>
+    @if (productTemplate?.introducerRequired) {
+      <mifosx-introducer-search (introducerChange)="onIntroducerChange($event)"></mifosx-introducer-search>
+    }
+  }
 </form>

src/app/savings/savings-account-stepper/savings-account-details-step/savings-account-details-step.component.scss

@@ -15,7 +15,7 @@ $gray-900: #202124;
 .sad-section {
   border: 1px solid $border;
   border-radius: 10px;
-  overflow: hidden;
+  overflow: visible;
   background: #fff;
 
   &--mt {

src/app/savings/savings-account-stepper/savings-account-details-step/savings-account-details-step.component.ts

@@ -17,6 +17,7 @@ import { SavingsService } from 'app/savings/savings.service';
 import { MatStepperPrevious, MatStepperNext } from '@angular/material/stepper';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+import { IntroducerSearchComponent } from 'app/shared/introducer-search/introducer-search.component';
 
 /**
  * Savings Account Details Step
@@ -29,7 +30,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
     ...STANDALONE_SHARED_IMPORTS,
     MatStepperPrevious,
     FaIconComponent,
-    MatStepperNext
+    MatStepperNext,
+    IntroducerSearchComponent
   ]
 })
 export class SavingsAccountDetailsStepComponent implements OnInit {
@@ -56,6 +58,7 @@ export class SavingsAccountDetailsStepComponent implements OnInit {
   savingsAccountDetailsForm: UntypedFormGroup;
 
   savingsProductSelected = false;
+  introducerId: number | null = null;
 
   /** Savings Account Template with product data  */
   @Output() savingsAccountProductTemplate = new EventEmitter();
@@ -165,7 +168,15 @@ export class SavingsAccountDetailsStepComponent implements OnInit {
   /**
    * Returns savings account form value.
    */
+  onIntroducerChange(event: { clientId: number; displayName: string } | null): void {
+    this.introducerId = event?.clientId ?? null;
+  }
+
   get savingsAccountDetails() {
-    return this.savingsAccountDetailsForm.getRawValue();
+    const value = this.savingsAccountDetailsForm.getRawValue();
+    if (this.introducerId) {
+      value.introducerId = this.introducerId;
+    }
+    return value;
   }
 }

src/app/savings/savings-account-stepper/savings-account-digital-step/savings-account-digital-step.component.html

@@ -6,229 +6,209 @@
   file, You can obtain one at http://mozilla.org/MPL/2.0/.
 -->
 
-<div class="spl-section">
-  <div class="spl-section__header">
-    <span class="spl-section__icon">
-      <i class="fas fa-chart-bar"></i>
-    </span>
-    <div class="spl-section__title">Transaction &amp; Product Limits</div>
-    <div class="spl-section__badge">FROM PRODUCT</div>
+<div class="dig-wrapper">
+  <div class="dig-header">
+    <div class="dig-header__icon">
+      <i class="fas fa-mobile-alt"></i>
+    </div>
+    <div class="dig-header__text">
+      <h3 class="dig-header__title">Digital &amp; Account Features</h3>
+      <p class="dig-header__sub">Toggle the facilities available for this account (as per RBI guidelines)</p>
+    </div>
+    <span class="dig-header__badge">FROM PRODUCT</span>
   </div>
 
-  <div class="spl-section__body">
-    <div class="spl-features">
-      <div class="spl-features__header">Account Features (as per RBI guidelines)</div>
-
-      <div class="spl-features__grid">
-        <label class="spl-feature">
-          <span class="spl-feature__label"><i class="fas fa-automobile"></i> ATM Facility</span>
-          <select class="spl-select" [ngModel]="accountFacilityConfig.atmFacility" disabled>
-            <option [ngValue]="false">No</option>
-            <option [ngValue]="true">Yes</option>
-          </select>
-        </label>
-
-        <label class="spl-feature">
-          <span class="spl-feature__label"><i class="fas fa-wallet"></i> ATM Withdrawal</span>
-          <select class="spl-select" [ngModel]="accountFacilityConfig.atmWithdrawalFacility" disabled>
-            <option [ngValue]="false">No</option>
-            <option [ngValue]="true">Yes</option>
-          </select>
-        </label>
-
-        <label class="spl-feature">
-          <span class="spl-feature__label"><i class="fas fa-mobile-alt"></i> UPI Facility</span>
-          <select class="spl-select" [ngModel]="accountFacilityConfig.upiFacility" disabled>
-            <option [ngValue]="false">No</option>
-            <option [ngValue]="true">Yes</option>
-          </select>
-        </label>
-
-        <label class="spl-feature">
-          <span class="spl-feature__label"><i class="fas fa-exchange-alt"></i> POS Transactions</span>
-          <select class="spl-select" [ngModel]="accountFacilityConfig.posTransactionsFacility" disabled>
-            <option [ngValue]="false">No</option>
-            <option [ngValue]="true">Yes</option>
-          </select>
-        </label>
-
-        <label class="spl-feature">
-          <span class="spl-feature__label"><i class="fas fa-book"></i> Cheque Book</span>
-          <select class="spl-select" [ngModel]="accountFacilityConfig.chequeBook" disabled>
-            <option [ngValue]="false">No</option>
-            <option [ngValue]="true">Yes</option>
-          </select>
-        </label>
-
-        <label class="spl-feature">
-          <span class="spl-feature__label"><i class="fas fa-bolt"></i> IMPS Facility</span>
-          <select class="spl-select" [ngModel]="accountFacilityConfig.impsFacility" disabled>
-            <option [ngValue]="false">No</option>
-            <option [ngValue]="true">Yes</option>
-          </select>
-        </label>
-
-        <label class="spl-feature">
-          <span class="spl-feature__label"><i class="fas fa-sms"></i> SMS Alerts</span>
-          <select class="spl-select" [ngModel]="accountFacilityConfig.smsAlerts" disabled>
-            <option [ngValue]="false">No</option>
-            <option [ngValue]="true">Yes</option>
-          </select>
-        </label>
-
-        <label class="spl-feature">
-          <span class="spl-feature__label"><i class="fas fa-bell"></i> BBPS Facility</span>
-          <select class="spl-select" [ngModel]="accountFacilityConfig.bbpsFacility" disabled>
-            <option [ngValue]="false">No</option>
-            <option [ngValue]="true">Yes</option>
-          </select>
-        </label>
-
-        <label class="spl-feature">
-          <span class="spl-feature__label"><i class="fas fa-shield-alt"></i> Insurance Cover</span>
-          <select class="spl-select" [ngModel]="accountFacilityConfig.insuranceCover" disabled>
-            <option [ngValue]="false">No</option>
-            <option [ngValue]="true">Yes</option>
-          </select>
-        </label>
-
-        <label class="spl-feature">
-          <span class="spl-feature__label"><i class="fas fa-bolt"></i> BEPG Facility</span>
-          <select class="spl-select" [ngModel]="accountFacilityConfig.bepgFacility" disabled>
-            <option [ngValue]="false">No</option>
-            <option [ngValue]="true">Yes</option>
-          </select>
-        </label>
-
-        <label class="spl-feature">
-          <span class="spl-feature__label"><i class="fas fa-money-check-alt"></i> NEFT Facility</span>
-          <select class="spl-select" [ngModel]="accountFacilityConfig.neftFacility" disabled>
-            <option [ngValue]="false">No</option>
-            <option [ngValue]="true">Yes</option>
-          </select>
-        </label>
-
-        <label class="spl-feature">
-          <span class="spl-feature__label"><i class="fas fa-money-check"></i> RTGS Facility</span>
-          <select class="spl-select" [ngModel]="accountFacilityConfig.rtgsFacility" disabled>
-            <option [ngValue]="false">No</option>
-            <option [ngValue]="true">Yes</option>
-          </select>
-        </label>
-
-        <label class="spl-feature">
-          <span class="spl-feature__label"><i class="fas fa-balance-scale"></i> Inter-Bank Total Cap</span>
-          <select class="spl-select" [ngModel]="accountFacilityConfig.interBankTotalCapFacility" disabled>
-            <option [ngValue]="false">No</option>
-            <option [ngValue]="true">Yes</option>
-          </select>
-        </label>
-
-        <label class="spl-feature">
-          <span class="spl-feature__label"><i class="fas fa-arrow-right-arrow-left"></i> Withdrawal Facility</span>
-          <select class="spl-select" [ngModel]="accountFacilityConfig.withdrawalFacility" disabled>
-            <option [ngValue]="false">No</option>
-            <option [ngValue]="true">Yes</option>
-          </select>
-        </label>
-
-        <label class="spl-feature">
-          <span class="spl-feature__label"><i class="fas fa-id-card"></i> Deposit Facility (KYC)</span>
-          <select class="spl-select" [ngModel]="accountFacilityConfig.depositFacilityKyc" disabled>
-            <option [ngValue]="false">No</option>
-            <option [ngValue]="true">Yes</option>
-          </select>
-        </label>
-
-        <label class="spl-feature">
-          <span class="spl-feature__label"><i class="fas fa-credit-card"></i> Virtual Debit Card</span>
-          <select class="spl-select" [ngModel]="accountFacilityConfig.virtualDebitCard" disabled>
-            <option [ngValue]="false">No</option>
-            <option [ngValue]="true">Yes</option>
-          </select>
-        </label>
+  <div class="dig-grid">
+    <div class="dig-card" [class.dig-card--on]="facilityConfig.atmFacility">
+      <div class="dig-card__icon"><i class="fas fa-credit-card"></i></div>
+      <div class="dig-card__body">
+        <span class="dig-card__label">ATM Facility</span>
+        <span class="dig-card__status">{{ facilityConfig.atmFacility ? 'Enabled' : 'Disabled' }}</span>
       </div>
+      <label class="dig-toggle">
+        <input type="checkbox" [(ngModel)]="facilityConfig.atmFacility" />
+        <span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
+      </label>
     </div>
 
-    @if (accountFacilityLimits.length > 0) {
-      <div class="spl-table-wrap">
-        <table class="spl-table">
-          <colgroup>
-            <col class="spl-table__col--label" />
-            <col class="spl-table__col--value" />
-            <col class="spl-table__col--value" />
-            <col class="spl-table__col--value" />
-          </colgroup>
-          <thead>
-            <tr>
-              <th>Limit Type</th>
-              <th>General Limit (Daily)</th>
-              <th>Minor Account Limit</th>
-              <th>Small Saving Limit</th>
-            </tr>
-          </thead>
-          <tbody>
-            @for (row of accountFacilityLimits; track row.limitType) {
-              <tr>
-                <td>{{ row.limitType }}</td>
-                <td><input type="text" class="spl-input" [value]="row.generalLimit" disabled /></td>
-                <td><input type="text" class="spl-input" [value]="row.minorAccountLimit" disabled /></td>
-                <td><input type="text" class="spl-input" [value]="row.smallSavingLimit" disabled /></td>
-              </tr>
-            }
-          </tbody>
-        </table>
+    <div class="dig-card" [class.dig-card--on]="facilityConfig.atmWithdrawalFacility">
+      <div class="dig-card__icon"><i class="fas fa-wallet"></i></div>
+      <div class="dig-card__body">
+        <span class="dig-card__label">ATM Withdrawal</span>
+        <span class="dig-card__status">{{ facilityConfig.atmWithdrawalFacility ? 'Enabled' : 'Disabled' }}</span>
       </div>
-    }
+      <label class="dig-toggle">
+        <input type="checkbox" [(ngModel)]="facilityConfig.atmWithdrawalFacility" />
+        <span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
+      </label>
+    </div>
 
-    @if (depositLimitKyc?.general) {
-      <div class="spl-table-wrap spl-table-wrap--kyc">
-        <h4 class="mat-h4">Deposit Limit (KYC)</h4>
-        <table class="spl-table">
-          <thead>
-            <tr>
-              <th>Account Type</th>
-              <th>KYC Type</th>
-              <th>Limit</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>General</td>
-              <td>
-                <select class="spl-select" [ngModel]="depositLimitKyc.general.kycType" disabled>
-                  <option>{{ depositLimitKyc.general.kycType }}</option>
-                </select>
-              </td>
-              <td><input type="text" class="spl-input" [value]="depositLimitKyc.general.limit" disabled /></td>
-            </tr>
-            <tr>
-              <td>Minor</td>
-              <td>
-                <select class="spl-select" [ngModel]="depositLimitKyc.minor.kycType" disabled>
-                  <option>{{ depositLimitKyc.minor.kycType }}</option>
-                </select>
-              </td>
-              <td><input type="number" class="spl-input" [value]="depositLimitKyc.minor.limit" disabled /></td>
-            </tr>
-            <tr>
-              <td>Small Saving</td>
-              <td>
-                <select class="spl-select" [ngModel]="depositLimitKyc.smallSaving.kycType" disabled>
-                  <option>{{ depositLimitKyc.smallSaving.kycType }}</option>
-                </select>
-              </td>
-              <td><input type="number" class="spl-input" [value]="depositLimitKyc.smallSaving.limit" disabled /></td>
-            </tr>
-          </tbody>
-        </table>
+    <div class="dig-card" [class.dig-card--on]="facilityConfig.upiFacility">
+      <div class="dig-card__icon"><i class="fas fa-mobile-alt"></i></div>
+      <div class="dig-card__body">
+        <span class="dig-card__label">UPI Facility</span>
+        <span class="dig-card__status">{{ facilityConfig.upiFacility ? 'Enabled' : 'Disabled' }}</span>
       </div>
-    }
+      <label class="dig-toggle">
+        <input type="checkbox" [(ngModel)]="facilityConfig.upiFacility" />
+        <span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
+      </label>
+    </div>
 
-    <div class="spl-note">
-      <strong>Note:</strong>
-      These facilities are defined at product level and applied to this account. Small Saving Account limits are
-      strictly capped at Rs.1,00,000 maximum balance per RBI Master Circular.
+    <div class="dig-card" [class.dig-card--on]="facilityConfig.posTransactionsFacility">
+      <div class="dig-card__icon"><i class="fas fa-exchange-alt"></i></div>
+      <div class="dig-card__body">
+        <span class="dig-card__label">POS Transactions</span>
+        <span class="dig-card__status">{{ facilityConfig.posTransactionsFacility ? 'Enabled' : 'Disabled' }}</span>
+      </div>
+      <label class="dig-toggle">
+        <input type="checkbox" [(ngModel)]="facilityConfig.posTransactionsFacility" />
+        <span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
+      </label>
+    </div>
+
+    <div class="dig-card" [class.dig-card--on]="facilityConfig.chequeBook">
+      <div class="dig-card__icon"><i class="fas fa-book"></i></div>
+      <div class="dig-card__body">
+        <span class="dig-card__label">Cheque Book</span>
+        <span class="dig-card__status">{{ facilityConfig.chequeBook ? 'Enabled' : 'Disabled' }}</span>
+      </div>
+      <label class="dig-toggle">
+        <input type="checkbox" [(ngModel)]="facilityConfig.chequeBook" />
+        <span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
+      </label>
+    </div>
+
+    <div class="dig-card" [class.dig-card--on]="facilityConfig.impsFacility">
+      <div class="dig-card__icon"><i class="fas fa-bolt"></i></div>
+      <div class="dig-card__body">
+        <span class="dig-card__label">IMPS Facility</span>
+        <span class="dig-card__status">{{ facilityConfig.impsFacility ? 'Enabled' : 'Disabled' }}</span>
+      </div>
+      <label class="dig-toggle">
+        <input type="checkbox" [(ngModel)]="facilityConfig.impsFacility" />
+        <span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
+      </label>
+    </div>
+
+    <div class="dig-card" [class.dig-card--on]="facilityConfig.smsAlerts">
+      <div class="dig-card__icon"><i class="fas fa-sms"></i></div>
+      <div class="dig-card__body">
+        <span class="dig-card__label">SMS Alerts</span>
+        <span class="dig-card__status">{{ facilityConfig.smsAlerts ? 'Enabled' : 'Disabled' }}</span>
+      </div>
+      <label class="dig-toggle">
+        <input type="checkbox" [(ngModel)]="facilityConfig.smsAlerts" />
+        <span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
+      </label>
+    </div>
+
+    <div class="dig-card" [class.dig-card--on]="facilityConfig.bbpsFacility">
+      <div class="dig-card__icon"><i class="fas fa-bell"></i></div>
+      <div class="dig-card__body">
+        <span class="dig-card__label">BBPS Facility</span>
+        <span class="dig-card__status">{{ facilityConfig.bbpsFacility ? 'Enabled' : 'Disabled' }}</span>
+      </div>
+      <label class="dig-toggle">
+        <input type="checkbox" [(ngModel)]="facilityConfig.bbpsFacility" />
+        <span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
+      </label>
+    </div>
+
+    <div class="dig-card" [class.dig-card--on]="facilityConfig.insuranceCover">
+      <div class="dig-card__icon"><i class="fas fa-shield-alt"></i></div>
+      <div class="dig-card__body">
+        <span class="dig-card__label">Insurance Cover</span>
+        <span class="dig-card__status">{{ facilityConfig.insuranceCover ? 'Enabled' : 'Disabled' }}</span>
+      </div>
+      <label class="dig-toggle">
+        <input type="checkbox" [(ngModel)]="facilityConfig.insuranceCover" />
+        <span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
+      </label>
+    </div>
+
+    <div class="dig-card" [class.dig-card--on]="facilityConfig.bepgFacility">
+      <div class="dig-card__icon"><i class="fas fa-plug"></i></div>
+      <div class="dig-card__body">
+        <span class="dig-card__label">BEPG Facility</span>
+        <span class="dig-card__status">{{ facilityConfig.bepgFacility ? 'Enabled' : 'Disabled' }}</span>
+      </div>
+      <label class="dig-toggle">
+        <input type="checkbox" [(ngModel)]="facilityConfig.bepgFacility" />
+        <span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
+      </label>
+    </div>
+
+    <div class="dig-card" [class.dig-card--on]="facilityConfig.neftFacility">
+      <div class="dig-card__icon"><i class="fas fa-money-check-alt"></i></div>
+      <div class="dig-card__body">
+        <span class="dig-card__label">NEFT Facility</span>
+        <span class="dig-card__status">{{ facilityConfig.neftFacility ? 'Enabled' : 'Disabled' }}</span>
+      </div>
+      <label class="dig-toggle">
+        <input type="checkbox" [(ngModel)]="facilityConfig.neftFacility" />
+        <span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
+      </label>
+    </div>
+
+    <div class="dig-card" [class.dig-card--on]="facilityConfig.rtgsFacility">
+      <div class="dig-card__icon"><i class="fas fa-money-check"></i></div>
+      <div class="dig-card__body">
+        <span class="dig-card__label">RTGS Facility</span>
+        <span class="dig-card__status">{{ facilityConfig.rtgsFacility ? 'Enabled' : 'Disabled' }}</span>
+      </div>
+      <label class="dig-toggle">
+        <input type="checkbox" [(ngModel)]="facilityConfig.rtgsFacility" />
+        <span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
+      </label>
+    </div>
+
+    <div class="dig-card" [class.dig-card--on]="facilityConfig.interBankTotalCapFacility">
+      <div class="dig-card__icon"><i class="fas fa-balance-scale"></i></div>
+      <div class="dig-card__body">
+        <span class="dig-card__label">Inter-Bank Total Cap</span>
+        <span class="dig-card__status">{{ facilityConfig.interBankTotalCapFacility ? 'Enabled' : 'Disabled' }}</span>
+      </div>
+      <label class="dig-toggle">
+        <input type="checkbox" [(ngModel)]="facilityConfig.interBankTotalCapFacility" />
+        <span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
+      </label>
+    </div>
+
+    <div class="dig-card" [class.dig-card--on]="facilityConfig.withdrawalFacility">
+      <div class="dig-card__icon"><i class="fas fa-arrow-right-arrow-left"></i></div>
+      <div class="dig-card__body">
+        <span class="dig-card__label">Withdrawal Facility</span>
+        <span class="dig-card__status">{{ facilityConfig.withdrawalFacility ? 'Enabled' : 'Disabled' }}</span>
+      </div>
+      <label class="dig-toggle">
+        <input type="checkbox" [(ngModel)]="facilityConfig.withdrawalFacility" />
+        <span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
+      </label>
+    </div>
+
+    <div class="dig-card" [class.dig-card--on]="facilityConfig.depositFacilityKyc">
+      <div class="dig-card__icon"><i class="fas fa-id-card"></i></div>
+      <div class="dig-card__body">
+        <span class="dig-card__label">Deposit Facility (KYC)</span>
+        <span class="dig-card__status">{{ facilityConfig.depositFacilityKyc ? 'Enabled' : 'Disabled' }}</span>
+      </div>
+      <label class="dig-toggle">
+        <input type="checkbox" [(ngModel)]="facilityConfig.depositFacilityKyc" />
+        <span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
+      </label>
+    </div>
+
+    <div class="dig-card" [class.dig-card--on]="facilityConfig.virtualDebitCard">
+      <div class="dig-card__icon"><i class="fas fa-credit-card"></i></div>
+      <div class="dig-card__body">
+        <span class="dig-card__label">Virtual Debit Card</span>
+        <span class="dig-card__status">{{ facilityConfig.virtualDebitCard ? 'Enabled' : 'Disabled' }}</span>
+      </div>
+      <label class="dig-toggle">
+        <input type="checkbox" [(ngModel)]="facilityConfig.virtualDebitCard" />
+        <span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
+      </label>
     </div>
   </div>
 </div>

src/app/savings/savings-account-stepper/savings-account-digital-step/savings-account-digital-step.component.scss

@@ -6,194 +6,205 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-$border: #d9e2ec;
-$border-strong: #c7d2de;
-$text: #24364b;
+$blue: #2563eb;
+$blue-light: #eff6ff;
+$green: #16a34a;
+$green-light: #f0fdf4;
+$green-border: #bbf7d0;
+$border: #e2e8f0;
+$text: #1e293b;
 $muted: #64748b;
-$header-bg: #f8fafc;
+$gray-bg: #f8fafc;
 
-.spl-section {
+// ── Wrapper ──────────────────────────────────────────────
+.dig-wrapper {
   border: 1px solid $border;
-  border-radius: 12px;
+  border-radius: 14px;
   overflow: hidden;
   background: #fff;
+  box-shadow: 0 1px 4px rgb(0 0 0 / 6%);
 }
 
-.spl-section__header {
+// ── Header ───────────────────────────────────────────────
+.dig-header {
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 16px 20px;
-  background: $header-bg;
+  gap: 14px;
+  padding: 18px 24px;
+  background: $gray-bg;
   border-bottom: 1px solid $border;
-}
 
-.spl-section__icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border-radius: 8px;
-  background: #eff6ff;
-  color: #2563eb;
-  font-size: 14px;
-  flex: 0 0 auto;
-}
-
-.spl-section__title {
-  flex: 1 1 auto;
-  font-size: 16px;
-  font-weight: 600;
-  color: $text;
-}
-
-.spl-section__badge {
-  flex: 0 0 auto;
-  padding: 5px 10px;
-  border-radius: 999px;
-  background: #dbeafe;
-  color: #1d4ed8;
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.05em;
-  white-space: nowrap;
-}
-
-.spl-section__body {
-  padding: 18px 20px 20px;
-}
-
-.spl-table-wrap {
-  overflow-x: auto;
-  margin-top: 16px;
-}
-
-.spl-table {
-  width: 100%;
-  min-width: 0;
-  table-layout: fixed;
-  border-collapse: collapse;
-  border: 1px solid $border;
-
-  col.spl-table__col--label {
-    width: 22%;
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 10px;
+    background: $blue-light;
+    color: $blue;
+    font-size: 16px;
+    flex: 0 0 auto;
   }
 
-  col.spl-table__col--value {
-    width: 26%;
+  &__text {
+    flex: 1;
   }
 
-  th,
-  td {
-    border: 1px solid $border;
-    padding: 6px 8px;
-    vertical-align: middle;
-  }
-
-  th {
-    background: #f8fafc;
-    color: #64748b;
-    text-align: center;
-    font-size: 11px;
+  &__title {
+    margin: 0 0 2px;
+    font-size: 15px;
     font-weight: 700;
-  }
-
-  td:first-child {
-    background: #f8fafc;
-    font-weight: 600;
     color: $text;
-    white-space: nowrap;
   }
 
-  td {
-    font-size: 13px;
-    overflow: hidden;
+  &__sub {
+    margin: 0;
+    font-size: 12px;
+    color: $muted;
+  }
+
+  &__badge {
+    flex: 0 0 auto;
+    padding: 4px 12px;
+    border-radius: 999px;
+    background: #dbeafe;
+    color: $blue;
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.06em;
   }
 }
 
-.spl-input,
-.spl-select {
-  width: 100%;
-  box-sizing: border-box;
-  font: inherit;
-}
-
-.spl-input {
-  height: 30px;
-  border: 1px solid $border-strong;
-  border-radius: 2px;
-  padding: 0 8px;
-  background: #f8fafc;
-  color: $muted;
-}
-
-.spl-select {
-  height: 30px;
-  border: 1px solid $border-strong;
-  border-radius: 2px;
-  padding: 0 6px;
-  background: #f8fafc;
-  color: $muted;
-}
-
-.spl-features {
-  margin-bottom: 16px;
-}
-
-.spl-features__header {
-  font-size: 13px;
-  font-weight: 600;
-  color: $muted;
-  margin-bottom: 12px;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-.spl-features__grid {
+// ── Grid ─────────────────────────────────────────────────
+.dig-grid {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 12px 16px;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0;
 
-  @media (width <= 900px) {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+  @media (width <= 960px) {
+    grid-template-columns: repeat(2, 1fr);
   }
 
-  @media (width <= 640px) {
+  @media (width <= 580px) {
     grid-template-columns: 1fr;
   }
 }
 
-.spl-feature {
+// ── Card ─────────────────────────────────────────────────
+.dig-card {
   display: flex;
-  flex-direction: column;
-  gap: 6px;
-  font-size: 13px;
-  color: $text;
-}
-
-.spl-feature__label {
-  display: inline-flex;
   align-items: center;
-  gap: 8px;
-  font-weight: 600;
-  color: #334155;
+  gap: 12px;
+  padding: 14px 18px;
+  border-right: 1px solid $border;
+  border-bottom: 1px solid $border;
+  background: #fff;
+  transition: background 0.18s ease;
+  cursor: pointer;
 
-  i {
-    color: #2563eb;
-    font-size: 12px;
-    width: 14px;
-    text-align: center;
+  &:nth-child(3n) {
+    border-right: none;
+  }
+
+  &--on {
+    background: $green-light;
+
+    .dig-card__icon {
+      background: $green-border;
+      color: $green;
+    }
+
+    .dig-card__status {
+      color: $green;
+      font-weight: 600;
+    }
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border-radius: 9px;
+    background: $blue-light;
+    color: $blue;
+    font-size: 14px;
+    flex: 0 0 auto;
+    transition:
+      background 0.18s,
+      color 0.18s;
+  }
+
+  &__body {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  &__label {
+    font-size: 13px;
+    font-weight: 600;
+    color: $text;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__status {
+    font-size: 11px;
+    color: $muted;
+    transition: color 0.18s;
   }
 }
 
-.spl-note {
-  margin-top: 16px;
-  padding: 12px 14px;
-  border: 1px solid $border;
-  border-radius: 8px;
-  background: #f8fafc;
-  color: $muted;
-  font-size: 11px;
-  line-height: 1.6;
+// ── Toggle Switch ─────────────────────────────────────────
+.dig-toggle {
+  position: relative;
+  flex: 0 0 auto;
+  cursor: pointer;
+
+  input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+
+    &:checked + .dig-toggle__track {
+      background: $green;
+      border-color: $green;
+    }
+
+    &:checked + .dig-toggle__track .dig-toggle__thumb {
+      transform: translateX(18px);
+    }
+  }
+
+  &__track {
+    display: block;
+    width: 40px;
+    height: 22px;
+    border-radius: 999px;
+    background: #cbd5e1;
+    border: 1.5px solid #94a3b8;
+    position: relative;
+    transition:
+      background 0.2s,
+      border-color 0.2s;
+  }
+
+  &__thumb {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: #fff;
+    box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
+    transition: transform 0.2s ease;
+  }
 }

src/app/savings/savings-account-stepper/savings-account-digital-step/savings-account-digital-step.component.ts

@@ -39,31 +39,16 @@ const DEFAULT_FACILITY_CONFIG = {
   ]
 })
 export class SavingsAccountDigitalStepComponent {
-  private _savingsAccountProductTemplate: any;
+  facilityConfig = { ...DEFAULT_FACILITY_CONFIG };
 
   @Input()
   set savingsAccountProductTemplate(value: any) {
-    this._savingsAccountProductTemplate = value;
-  }
-  get savingsAccountProductTemplate(): any {
-    return this._savingsAccountProductTemplate;
+    if (value?.accountFacilityConfig) {
+      this.facilityConfig = { ...DEFAULT_FACILITY_CONFIG, ...value.accountFacilityConfig };
+    }
   }
 
-  get accountFacilityConfig() {
-    return this._savingsAccountProductTemplate?.accountFacilityConfig || DEFAULT_FACILITY_CONFIG;
-  }
-
-  get accountFacilityLimits(): any[] {
-    return this._savingsAccountProductTemplate?.accountFacilityLimits || [];
-  }
-
-  get depositLimitKyc() {
-    return (
-      this._savingsAccountProductTemplate?.depositLimitKyc || {
-        general: { kycType: '', limit: '' },
-        minor: { kycType: '', limit: '' },
-        smallSaving: { kycType: '', limit: '' }
-      }
-    );
+  get savingsAccountDigital() {
+    return { accountFacilityConfig: { ...this.facilityConfig } };
   }
 }

src/app/savings/savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component.html

@@ -213,198 +213,6 @@
     </div>
   </div>
 
-  <div class="preview-section">
-    <div class="preview-section__header">
-      <span class="preview-section__title">{{ 'labels.heading.Terms' | translate }}</span>
-    </div>
-    <div class="preview-body">
-      <div class="preview-grid preview-grid--three">
-        <div class="preview-field">
-          <span class="preview-label">{{ 'labels.inputs.Nominal Annual Interest' | translate }}</span>
-          <span class="preview-value">{{ savingsAccount?.nominalAnnualInterestRate | formatNumber }} %</span>
-        </div>
-        @if (savingsAccountProductTemplate?.interestCalculationTypeName) {
-          <div class="preview-field">
-            <span class="preview-label">Interest Calculation Mode</span>
-            <span class="preview-value">{{ savingsAccountProductTemplate?.interestCalculationTypeName }}</span>
-          </div>
-        }
-        <div class="preview-field">
-          <span class="preview-label">{{ 'labels.inputs.Interest Compounding Period' | translate }}</span>
-          <span class="preview-value">{{
-            savingsAccount?.interestCompoundingPeriodType
-              | find: savingsAccountProductTemplate?.interestCompoundingPeriodTypeOptions : 'id' : 'value'
-              | translateKey: 'catalogs'
-          }}</span>
-        </div>
-        <div class="preview-field">
-          <span class="preview-label">{{ 'labels.inputs.Interest Posting Period' | translate }}</span>
-          <span class="preview-value">{{
-            savingsAccount?.interestPostingPeriodType
-              | find: savingsAccountProductTemplate?.interestPostingPeriodTypeOptions : 'id' : 'value'
-              | translateKey: 'catalogs'
-          }}</span>
-        </div>
-        <div class="preview-field">
-          <span class="preview-label">{{ 'labels.inputs.Interest Calculated using' | translate }}</span>
-          <span class="preview-value">{{
-            savingsAccount?.interestCalculationType
-              | find: savingsAccountProductTemplate?.interestCalculationTypeOptions : 'id' : 'value'
-              | translateKey: 'catalogs'
-          }}</span>
-        </div>
-        <div class="preview-field">
-          <span class="preview-label">{{ 'labels.inputs.Days in Year' | translate }}</span>
-          <span class="preview-value">{{
-            savingsAccount?.interestCalculationDaysInYearType
-              | find: savingsAccountProductTemplate?.interestCalculationDaysInYearTypeOptions : 'id' : 'value'
-              | translateKey: 'catalogs'
-          }}</span>
-        </div>
-
-        <div class="preview-field">
-          <span class="preview-label">Interest Calculation Selector</span>
-          <span class="preview-value">{{
-            savingsAccount?.interestCalculateSelector
-              | find: savingsAccountProductTemplate?.interestCalculationTypeOption : 'id' : 'value'
-              | translateKey: 'catalogs'
-          }}</span>
-        </div>
-        @if (savingsAccount?.averagePeriod) {
-          <div class="preview-field">
-            <span class="preview-label">Average Period</span>
-            <span class="preview-value">{{ savingsAccount?.averagePeriod }}</span>
-          </div>
-        }
-        <div class="preview-field">
-          <span class="preview-label">Auto Post</span>
-          <span class="preview-value preview-badge" [class.preview-badge--yes]="savingsAccount?.autoPost">
-            {{ savingsAccount?.autoPost | yesNo }}
-          </span>
-        </div>
-        @if (savingsAccountProductTemplate?.lastInterestDate) {
-          <div class="preview-field">
-            <span class="preview-label">Last Interest Date</span>
-            <span class="preview-value">{{ savingsAccountProductTemplate?.lastInterestDate | dateFormat }}</span>
-          </div>
-        }
-        @if (savingsAccount?.frequencyFixDay !== undefined && savingsAccount?.frequencyFixDay !== null) {
-          <div class="preview-field">
-            <span class="preview-label">Frequency Fix Day</span>
-            <span class="preview-value">{{ savingsAccount?.frequencyFixDay }}</span>
-          </div>
-        }
-      </div>
-    </div>
-  </div>
-
-  <div class="preview-section">
-    <div class="preview-section__header">
-      <span class="preview-section__title">{{ 'labels.heading.Settings' | translate }}</span>
-    </div>
-    <div class="preview-body">
-      <div class="preview-grid preview-grid--three">
-        @if (savingsAccount?.minRequiredOpeningBalance) {
-          <div class="preview-field">
-            <span class="preview-label">{{ 'labels.inputs.Minimum Opening Balance' | translate }}</span>
-            <span class="preview-value">{{ savingsAccount?.minRequiredOpeningBalance | formatNumber }}</span>
-          </div>
-        }
-        <div class="preview-field">
-          <span class="preview-label">{{ 'labels.inputs.Apply Withdrawal Fee for Transfers' | translate }}</span>
-          <span
-            class="preview-value preview-badge"
-            [class.preview-badge--yes]="savingsAccount?.withdrawalFeeForTransfers"
-          >
-            {{ savingsAccount?.withdrawalFeeForTransfers | yesNo }}
-          </span>
-        </div>
-        @if (savingsAccount?.lockinPeriodFrequency) {
-          <div class="preview-field">
-            <span class="preview-label">{{ 'labels.inputs.Lock-in Period' | translate }}</span>
-            <span class="preview-value">
-              {{ savingsAccount?.lockinPeriodFrequency }}
-              {{
-                savingsAccount?.lockinPeriodFrequencyType
-                  | find: savingsAccountProductTemplate?.lockinPeriodFrequencyTypeOptions : 'id' : 'value'
-                  | translateKey: 'catalogs'
-              }}
-            </span>
-          </div>
-        }
-        <div class="preview-field">
-          <span class="preview-label">{{ 'labels.inputs.Is Overdraft Allowed' | translate }}</span>
-          <span class="preview-value preview-badge" [class.preview-badge--yes]="savingsAccount?.allowOverdraft">
-            {{ savingsAccount?.allowOverdraft | yesNo }}
-          </span>
-        </div>
-        @if (savingsAccount?.minOverdraftForInterestCalculation) {
-          <div class="preview-field">
-            <span class="preview-label">{{
-              'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate
-            }}</span>
-            <span class="preview-value">{{ savingsAccount?.minOverdraftForInterestCalculation | formatNumber }}</span>
-          </div>
-        }
-        @if (savingsAccount?.nominalAnnualInterestRateOverdraft) {
-          <div class="preview-field">
-            <span class="preview-label">{{ 'labels.inputs.Nominal Annual Interest for Overdraft' | translate }}</span>
-            <span class="preview-value">{{ savingsAccount?.nominalAnnualInterestRateOverdraft | formatNumber }} %</span>
-          </div>
-        }
-        @if (savingsAccount?.overdraftLimit) {
-          <div class="preview-field">
-            <span class="preview-label">{{ 'labels.inputs.Maximum Overdraft Amount Limit' | translate }}</span>
-            <span class="preview-value">{{ savingsAccount?.overdraftLimit | formatNumber }}</span>
-          </div>
-        }
-        <div class="preview-field">
-          <span class="preview-label">{{ 'labels.inputs.Enforce Minimum Balance' | translate }}</span>
-          <span
-            class="preview-value preview-badge"
-            [class.preview-badge--yes]="savingsAccount?.enforceMinRequiredBalance"
-          >
-            {{ savingsAccount?.enforceMinRequiredBalance | yesNo }}
-          </span>
-        </div>
-        @if (savingsAccountProductTemplate?.enableLockinPeriod !== undefined) {
-          <div class="preview-field">
-            <span class="preview-label">Enable Lock-in Period</span>
-            <span
-              class="preview-value preview-badge"
-              [class.preview-badge--yes]="savingsAccountProductTemplate?.enableLockinPeriod"
-            >
-              {{ savingsAccountProductTemplate?.enableLockinPeriod | yesNo }}
-            </span>
-          </div>
-        }
-        @if (savingsAccountProductTemplate?.balanceFrequency) {
-          <div class="preview-field">
-            <span class="preview-label">Balance Frequency</span>
-            <span class="preview-value">{{ savingsAccountProductTemplate?.balanceFrequency }}</span>
-          </div>
-        }
-        @if (savingsAccountProductTemplate?.accountClosedZeroBalanceInDayClosing !== undefined) {
-          <div class="preview-field">
-            <span class="preview-label">Account Closed Zero Balance In Day Closing</span>
-            <span
-              class="preview-value preview-badge"
-              [class.preview-badge--yes]="savingsAccountProductTemplate?.accountClosedZeroBalanceInDayClosing"
-            >
-              {{ savingsAccountProductTemplate?.accountClosedZeroBalanceInDayClosing | yesNo }}
-            </span>
-          </div>
-        }
-        @if (savingsAccount?.minRequiredBalance) {
-          <div class="preview-field">
-            <span class="preview-label">{{ 'labels.inputs.Minimum Balance' | translate }}</span>
-            <span class="preview-value">{{ savingsAccount?.minRequiredBalance }}</span>
-          </div>
-        }
-      </div>
-    </div>
-  </div>
-
   @if (hasDigitalSection) {
     <div class="preview-section">
       <div class="preview-section__header">
@@ -424,58 +232,6 @@
             </div>
           }
         </div>
-
-        @if (digitalPreview?.accountFacilityLimits?.length) {
-          <table class="mat-elevation-z1 preview-table">
-            <thead>
-              <tr>
-                <th>Limit Type</th>
-                <th>General Limit</th>
-                <th>Minor Account Limit</th>
-                <th>Small Saving Limit</th>
-              </tr>
-            </thead>
-            <tbody>
-              @for (row of digitalPreview.accountFacilityLimits; track row.limitType) {
-                <tr>
-                  <td>{{ row.limitType }}</td>
-                  <td>{{ row.generalLimit || 'Unassigned' }}</td>
-                  <td>{{ row.minorAccountLimit || 'Unassigned' }}</td>
-                  <td>{{ row.smallSavingLimit || 'Unassigned' }}</td>
-                </tr>
-              }
-            </tbody>
-          </table>
-        }
-
-        @if (digitalPreview?.depositLimitKyc?.general) {
-          <table class="mat-elevation-z1 preview-table">
-            <thead>
-              <tr>
-                <th>Account Type</th>
-                <th>KYC Type</th>
-                <th>Limit</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>General</td>
-                <td>{{ digitalPreview.depositLimitKyc.general.kycType || 'Unassigned' }}</td>
-                <td>{{ digitalPreview.depositLimitKyc.general.limit || 'Unassigned' }}</td>
-              </tr>
-              <tr>
-                <td>Minor</td>
-                <td>{{ digitalPreview.depositLimitKyc.minor?.kycType || 'Unassigned' }}</td>
-                <td>{{ digitalPreview.depositLimitKyc.minor?.limit || 'Unassigned' }}</td>
-              </tr>
-              <tr>
-                <td>Small Saving</td>
-                <td>{{ digitalPreview.depositLimitKyc.smallSaving?.kycType || 'Unassigned' }}</td>
-                <td>{{ digitalPreview.depositLimitKyc.smallSaving?.limit || 'Unassigned' }}</td>
-              </tr>
-            </tbody>
-          </table>
-        }
       </div>
     </div>
   }
@@ -501,65 +257,6 @@
       </div>
     </div>
   }
-
-  @if (savingsAccount?.charges?.length) {
-    <div class="preview-section">
-      <div class="preview-section__header">
-        <span class="preview-section__title">{{ 'labels.inputs.Charges' | translate }}</span>
-      </div>
-      <div class="preview-body">
-        <table class="mat-elevation-z1 preview-table" mat-table [dataSource]="savingsAccount.charges">
-          <ng-container matColumnDef="name">
-            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Name' | translate }}</th>
-            <td mat-cell *matCellDef="let charge">{{ charge.name + ', ' + charge.currency.displaySymbol }}</td>
-          </ng-container>
-          <ng-container matColumnDef="chargeCalculationType">
-            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
-            <td mat-cell *matCellDef="let charge">
-              {{ charge.chargeCalculationType.value | translateKey: 'catalogs' }}
-            </td>
-          </ng-container>
-          <ng-container matColumnDef="amount">
-            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
-            <td mat-cell *matCellDef="let charge">{{ charge.amount | formatNumber }}</td>
-          </ng-container>
-          <ng-container matColumnDef="date">
-            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Date' | translate }}</th>
-            <td mat-cell *matCellDef="let charge">
-              @if (
-                charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'
-              ) {
-                <span>{{ (charge.dueDate | dateFormat) || 'Unassigned' }}</span>
-              }
-              @if (charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee') {
-                <span>{{ (charge.feeOnMonthDay | dateFormat) || 'Unassigned' }}</span>
-              }
-              @if (
-                !(
-                  charge.chargeTimeType.value === 'Monthly Fee' ||
-                  charge.chargeTimeType.value === 'Annual Fee' ||
-                  charge.chargeTimeType.value === 'Specified due date' ||
-                  charge.chargeTimeType.value === 'Weekly Fee'
-                )
-              ) {
-                <span>N/A</span>
-              }
-            </td>
-          </ng-container>
-          <ng-container matColumnDef="repaymentsEvery">
-            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Repayments Every' | translate }}</th>
-            <td mat-cell *matCellDef="let charge">{{ charge.feeInterval || 'Not Provided' }}</td>
-          </ng-container>
-          <ng-container matColumnDef="chargeTimeType">
-            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
-            <td mat-cell *matCellDef="let charge">{{ charge.chargeTimeType.value }}</td>
-          </ng-container>
-          <tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
-          <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns"></tr>
-        </table>
-      </div>
-    </div>
-  }
 </div>
 
 <div class="layout-row responsive-column align-center gap-2px margin-t">

src/app/savings/savings-account-stepper/savings-account-term-step/savings-account-term-step.component.html

@@ -144,13 +144,7 @@
 
           <mat-form-field appearance="outline" class="sat-field" (click)="lastInterestDatePicker.open()">
             <mat-label>Last Interest Date</mat-label>
-            <input
-              matInput
-              [matDatepicker]="lastInterestDatePicker"
-              formControlName="lastInterestDate"
-              [min]="minDate"
-              [max]="maxDate"
-            />
+            <input matInput [matDatepicker]="lastInterestDatePicker" formControlName="lastInterestDate" />
             <mat-datepicker-toggle matSuffix [for]="lastInterestDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #lastInterestDatePicker></mat-datepicker>
           </mat-form-field>