saving , current and RD account code update

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

@@ -6,336 +6,558 @@
   file, You can obtain one at http://mozilla.org/MPL/2.0/.
 -->
 
-<div class="responsive-column">
-  <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Details' | translate }}</h3>
-
-  <mat-divider class="flex-fill"></mat-divider>
-  <div class="flex-fill layout-row">
-    <span class="flex-40">{{ 'labels.inputs.Product' | translate }}</span>
-    <span class="flex-60">{{
-      savingsAccount.productId | find: savingsAccountTemplate.productOptions : 'id' : 'name'
-    }}</span>
+<div class="preview-wrapper">
+  <div class="preview-section">
+    <div class="preview-section__header">
+      <span class="preview-section__title">{{ 'labels.heading.Details' | translate }}</span>
+    </div>
+    <div class="preview-body">
+      <div class="preview-grid preview-grid--three">
+        <div class="preview-field">
+          <span class="preview-label">{{ 'labels.inputs.Product' | translate }}</span>
+          <span class="preview-value">{{
+            savingsAccount?.productId | find: savingsAccountTemplate?.productOptions : 'id' : 'name'
+          }}</span>
+        </div>
+        <div class="preview-field">
+          <span class="preview-label">{{ 'labels.inputs.Submitted On' | translate }}</span>
+          <span class="preview-value">{{ savingsAccount?.submittedOnDate | dateFormat }}</span>
+        </div>
+        <div class="preview-field">
+          <span class="preview-label">{{ 'labels.inputs.Field Officer' | translate }}</span>
+          <span class="preview-value">{{
+            savingsAccount?.fieldOfficerId
+              | find: savingsAccountProductTemplate?.fieldOfficerOptions : 'id' : 'displayName'
+          }}</span>
+        </div>
+        <div class="preview-field">
+          <span class="preview-label">{{ 'labels.inputs.External Id' | translate }}</span>
+          @if (savingsAccount?.externalId) {
+            <span class="preview-value">
+              <mifosx-external-identifier externalId="{{ savingsAccount.externalId }}"></mifosx-external-identifier>
+            </span>
+          } @else {
+            <span class="preview-value">{{ 'labels.inputs.Unassigned' | translate }}</span>
+          }
+        </div>
+      </div>
+    </div>
   </div>
 
-  <div class="flex-fill layout-row">
-    <span class="flex-40">{{ 'labels.inputs.Submitted On' | translate }}</span>
-    <span class="flex-60">{{ savingsAccount.submittedOnDate | dateFormat }}</span>
-  </div>
-
-  @if (savingsAccountProductTemplate?.effectiveDate) {
-    <div class="flex-fill layout-row">
-      <span class="flex-40">Effective Date</span>
-      <span class="flex-60">{{ savingsAccountProductTemplate.effectiveDate | dateFormat }}</span>
+  @if (
+    savingsAccountProductTemplate?.accountType ||
+    savingsAccountProductTemplate?.customerSegment ||
+    savingsAccountProductTemplate?.productCode ||
+    savingsAccountProductTemplate?.effectiveDate ||
+    savingsAccountProductTemplate?.endDate ||
+    savingsAccountProductTemplate?.introducerRequired !== undefined ||
+    savingsAccountProductTemplate?.shareLinkingEnabled !== undefined
+  ) {
+    <div class="preview-section">
+      <div class="preview-section__header">
+        <span class="preview-section__title">Product Classification</span>
+      </div>
+      <div class="preview-body">
+        <div class="preview-grid preview-grid--three">
+          @if (savingsAccountProductTemplate?.accountType) {
+            <div class="preview-field">
+              <span class="preview-label">Account Type</span>
+              <span class="preview-value">{{ savingsAccountProductTemplate?.accountType }}</span>
+            </div>
+          }
+          @if (savingsAccountProductTemplate?.customerSegment) {
+            <div class="preview-field">
+              <span class="preview-label">Customer Segment</span>
+              <span class="preview-value">{{ savingsAccountProductTemplate?.customerSegment }}</span>
+            </div>
+          }
+          @if (savingsAccountProductTemplate?.productCode) {
+            <div class="preview-field">
+              <span class="preview-label">Product Code</span>
+              <span class="preview-value">{{ savingsAccountProductTemplate?.productCode }}</span>
+            </div>
+          }
+          @if (savingsAccountProductTemplate?.effectiveDate) {
+            <div class="preview-field">
+              <span class="preview-label">Effective Date</span>
+              <span class="preview-value">{{ savingsAccountProductTemplate?.effectiveDate | dateFormat }}</span>
+            </div>
+          }
+          @if (savingsAccountProductTemplate?.endDate) {
+            <div class="preview-field">
+              <span class="preview-label">End Date</span>
+              <span class="preview-value">{{ savingsAccountProductTemplate?.endDate | dateFormat }}</span>
+            </div>
+          }
+          @if (
+            savingsAccountProductTemplate?.introducerRequired !== undefined &&
+            savingsAccountProductTemplate?.introducerRequired !== null
+          ) {
+            <div class="preview-field">
+              <span class="preview-label">Introducer Required</span>
+              <span
+                class="preview-value preview-badge"
+                [class.preview-badge--yes]="savingsAccountProductTemplate?.introducerRequired"
+              >
+                {{ savingsAccountProductTemplate?.introducerRequired | yesNo }}
+              </span>
+            </div>
+          }
+          @if (
+            savingsAccountProductTemplate?.shareLinkingEnabled !== undefined &&
+            savingsAccountProductTemplate?.shareLinkingEnabled !== null
+          ) {
+            <div class="preview-field">
+              <span class="preview-label">Share Linking Enabled</span>
+              <span
+                class="preview-value preview-badge"
+                [class.preview-badge--yes]="savingsAccountProductTemplate?.shareLinkingEnabled"
+              >
+                {{ savingsAccountProductTemplate?.shareLinkingEnabled | yesNo }}
+              </span>
+            </div>
+          }
+        </div>
+      </div>
     </div>
   }
 
-  @if (savingsAccountProductTemplate?.effectiveTo) {
-    <div class="flex-fill layout-row">
-      <span class="flex-40">Effective To</span>
-      <span class="flex-60">{{ savingsAccountProductTemplate.effectiveTo | dateFormat }}</span>
+  <div class="preview-section">
+    <div class="preview-section__header">
+      <span class="preview-section__title">{{ 'labels.heading.Currency' | translate }}</span>
     </div>
-  }
+    <div class="preview-body">
+      <div class="preview-grid preview-grid--three">
+        <div class="preview-field">
+          <span class="preview-label">{{ 'labels.inputs.Currency' | translate }}</span>
+          <span class="preview-value">{{ savingsAccountTermsForm?.get('currencyCode')?.value }}</span>
+        </div>
+        <div class="preview-field">
+          <span class="preview-label">{{ 'labels.inputs.Decimal Places' | translate }}</span>
+          <span class="preview-value">{{ savingsAccountProductTemplate?.currency?.decimalPlaces }}</span>
+        </div>
+        <div class="preview-field">
+          <span class="preview-label">{{ 'labels.inputs.Currency In Multiples Of' | translate }}</span>
+          <span class="preview-value">{{ savingsAccountProductTemplate?.currency?.inMultiplesOf }}</span>
+        </div>
 
-  @if (savingsAccountProductTemplate?.endDate) {
-    <div class="flex-fill layout-row">
-      <span class="flex-40">End Date</span>
-      <span class="flex-60">{{ savingsAccountProductTemplate.endDate | dateFormat }}</span>
+        @if (
+          savingsAccountProductTemplate?.dormancyAlert !== undefined &&
+          savingsAccountProductTemplate?.dormancyAlert !== null
+        ) {
+          <div class="preview-field">
+            <span class="preview-label">Dormancy Alert</span>
+            <span
+              class="preview-value preview-badge"
+              [class.preview-badge--yes]="savingsAccountProductTemplate?.dormancyAlert"
+            >
+              {{ savingsAccountProductTemplate?.dormancyAlert | yesNo }}
+            </span>
+          </div>
+        }
+
+        @if (
+          savingsAccountProductTemplate?.balanceSwapOption !== undefined &&
+          savingsAccountProductTemplate?.balanceSwapOption !== null
+        ) {
+          <div class="preview-field">
+            <span class="preview-label">Balance Swap Option</span>
+            <span
+              class="preview-value preview-badge"
+              [class.preview-badge--yes]="savingsAccountProductTemplate?.balanceSwapOption"
+            >
+              {{ savingsAccountProductTemplate?.balanceSwapOption | yesNo }}
+            </span>
+          </div>
+        }
+
+        @if (savingsAccountProductTemplate?.msme !== undefined && savingsAccountProductTemplate?.msme !== null) {
+          <div class="preview-field">
+            <span class="preview-label">MSME</span>
+            <span class="preview-value preview-badge" [class.preview-badge--yes]="savingsAccountProductTemplate?.msme">
+              {{ savingsAccountProductTemplate?.msme | yesNo }}
+            </span>
+          </div>
+        }
+
+        @if (
+          savingsAccountProductTemplate?.nominationFacility !== undefined &&
+          savingsAccountProductTemplate?.nominationFacility !== null
+        ) {
+          <div class="preview-field">
+            <span class="preview-label">Nomination Facility</span>
+            <span
+              class="preview-value preview-badge"
+              [class.preview-badge--yes]="savingsAccountProductTemplate?.nominationFacility"
+            >
+              {{ savingsAccountProductTemplate?.nominationFacility | yesNo }}
+            </span>
+          </div>
+        }
+
+        @if (
+          savingsAccountProductTemplate?.autoDebitFacility !== undefined &&
+          savingsAccountProductTemplate?.autoDebitFacility !== null
+        ) {
+          <div class="preview-field">
+            <span class="preview-label">Auto Debit Facility</span>
+            <span
+              class="preview-value preview-badge"
+              [class.preview-badge--yes]="savingsAccountProductTemplate?.autoDebitFacility"
+            >
+              {{ savingsAccountProductTemplate?.autoDebitFacility | yesNo }}
+            </span>
+          </div>
+        }
+      </div>
     </div>
-  }
-
-  <div class="flex-fill layout-row">
-    <span class="flex-40">{{ 'labels.inputs.External Id' | translate }}</span>
-    @if (savingsAccount.externalId) {
-      <span class="flex-60">
-        <mifosx-external-identifier externalId="{{ savingsAccount.externalId }}"></mifosx-external-identifier>
-      </span>
-    }
-    @if (!savingsAccount.externalId) {
-      <span class="flex-60">
-        {{ 'labels.inputs.Unassigned' | translate }}
-      </span>
-    }
   </div>
 
-  <div class="flex-fill layout-row">
-    <span class="flex-40">{{ 'labels.inputs.Field Officer' | translate }}</span>
-    <span class="flex-60">{{
-      savingsAccount.fieldOfficerId | find: savingsAccountProductTemplate.fieldOfficerOptions : 'id' : 'displayName'
-    }}</span>
+  <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">
+        <span class="preview-section__title">Digital</span>
+      </div>
+      <div class="preview-body">
+        <div class="preview-grid preview-grid--three">
+          @for (facility of digitalFacilityLabels; track facility.key) {
+            <div class="preview-field">
+              <span class="preview-label">{{ facility.label }}</span>
+              <span
+                class="preview-value preview-badge"
+                [class.preview-badge--yes]="digitalPreview?.accountFacilityConfig?.[facility.key]"
+              >
+                {{ digitalPreview?.accountFacilityConfig?.[facility.key] | yesNo }}
+              </span>
+            </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>
+  }
+
   @if (activeClientMembers) {
-    <h3 class="mat-h3 margin-t flex-fill">{{ 'labels.heading.Client Members' | translate }}</h3>
-    <mat-divider class="flex-fill"></mat-divider>
-    <div class="flex-60">
-      <table mat-table #membersTable [dataSource]="dataSource">
-        <!-- ID Column -->
-        <ng-container matColumnDef="id">
-          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client ID' | translate }}</th>
-          <td mat-cell *matCellDef="let element">{{ element.id }}</td>
-        </ng-container>
-        <!-- Name Column -->
-        <ng-container matColumnDef="name">
-          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client Name' | translate }}</th>
-          <td mat-cell *matCellDef="let element">{{ element.displayName }}</td>
-        </ng-container>
-        <tr mat-header-row *matHeaderRowDef="membersDisplayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: membersDisplayedColumns"></tr>
-      </table>
+    <div class="preview-section">
+      <div class="preview-section__header">
+        <span class="preview-section__title">{{ 'labels.heading.Client Members' | translate }}</span>
+      </div>
+      <div class="preview-body">
+        <table class="mat-elevation-z1 preview-table" mat-table #membersTable [dataSource]="dataSource">
+          <ng-container matColumnDef="id">
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client ID' | translate }}</th>
+            <td mat-cell *matCellDef="let element">{{ element.id }}</td>
+          </ng-container>
+          <ng-container matColumnDef="name">
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client Name' | translate }}</th>
+            <td mat-cell *matCellDef="let element">{{ element.displayName }}</td>
+          </ng-container>
+          <tr mat-header-row *matHeaderRowDef="membersDisplayedColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: membersDisplayedColumns"></tr>
+        </table>
+      </div>
     </div>
   }
 
-  <h3 class="mat-h3 margin-t flex-fill">{{ 'labels.heading.Terms' | translate }}</h3>
-
-  <mat-divider class="flex-fill"></mat-divider>
-  <div class="flex-fill layout-row">
-    <span class="flex-40">{{ 'labels.inputs.Currency' | translate }}</span>
-    <span class="flex-60">{{ savingsAccountTermsForm.get('currencyCode').value }}</span>
-  </div>
-
-  <div class="flex-fill layout-row">
-    <span class="flex-40">{{ 'labels.inputs.Decimal Places' | translate }}</span>
-    <span class="flex-60">{{ savingsAccountProductTemplate?.currency?.decimalPlaces }}</span>
-  </div>
-
-  <div class="flex-fill layout-row">
-    <span class="flex-40">{{ 'labels.inputs.Nominal Annual Interest' | translate }}:</span>
-    <span class="flex-60">{{ savingsAccount.nominalAnnualInterestRate | formatNumber }} %</span>
-  </div>
-
-  @if (savingsAccountProductTemplate?.interestCalculationTypeName) {
-    <div class="flex-fill layout-row">
-      <span class="flex-40">Interest Calculation Mode</span>
-      <span class="flex-60">{{ savingsAccountProductTemplate.interestCalculationTypeName }}</span>
-    </div>
-  }
-
-  @if (savingsAccountProductTemplate?.lastInterestDate) {
-    <div class="flex-fill layout-row">
-      <span class="flex-40">Last Interest Date</span>
-      <span class="flex-60">{{ savingsAccountProductTemplate.lastInterestDate | dateFormat }}</span>
-    </div>
-  }
-
-  <div class="flex-fill layout-row">
-    <span class="flex-40">Interest Calculation Selector</span>
-    <span class="flex-60">{{
-      getCatalogTranslation(
-        savingsAccount.interestCalculateSelector
-          | find: savingsAccountProductTemplate.interestCalculationTypeOption : 'id' : 'value'
-      )
-    }}</span>
-  </div>
-
-  @if (savingsAccount.averagePeriod) {
-    <div class="flex-fill layout-row">
-      <span class="flex-40">Average Period</span>
-      <span class="flex-60">{{ savingsAccount.averagePeriod }}</span>
-    </div>
-  }
-
-  <div class="flex-fill layout-row">
-    <span class="flex-40">Auto Post</span>
-    <span class="flex-60">{{ savingsAccount.autoPost | yesNo }}</span>
-  </div>
-
-  @if (savingsAccount.frequencyFixDay !== undefined && savingsAccount.frequencyFixDay !== null) {
-    <div class="flex-fill layout-row">
-      <span class="flex-40">Frequency Fix Day</span>
-      <span class="flex-60">{{ savingsAccount.frequencyFixDay }}</span>
-    </div>
-  }
-
-  <div class="flex-fill layout-row">
-    <span class="flex-40">{{ 'labels.inputs.Interest Compounding Period' | translate }}:</span>
-    <span class="flex-60">{{
-      getCatalogTranslation(
-        savingsAccount.interestCompoundingPeriodType
-          | find: savingsAccountProductTemplate.interestCompoundingPeriodTypeOptions : 'id' : 'value'
-      )
-    }}</span>
-  </div>
-
-  <div class="flex-fill layout-row">
-    <span class="flex-40">{{ 'labels.inputs.Interest Posting Period' | translate }}:</span>
-    <span class="flex-60">{{
-      getCatalogTranslation(
-        savingsAccount.interestPostingPeriodType
-          | find: savingsAccountProductTemplate.interestPostingPeriodTypeOptions : 'id' : 'value'
-      )
-    }}</span>
-  </div>
-
-  <div class="flex-fill layout-row">
-    <span class="flex-40">{{ 'labels.inputs.Interest Calculated using' | translate }}:</span>
-    <span class="flex-60">{{
-      getCatalogTranslation(
-        savingsAccount.interestCalculationType
-          | find: savingsAccountProductTemplate.interestCalculationTypeOptions : 'id' : 'value'
-      )
-    }}</span>
-  </div>
-
-  <div class="flex-fill layout-row">
-    <span class="flex-40">{{ 'labels.inputs.Days in Year' | translate }}:</span>
-    <span class="flex-60">{{
-      getCatalogTranslation(
-        savingsAccount.interestCalculationDaysInYearType
-          | find: savingsAccountProductTemplate.interestCalculationDaysInYearTypeOptions : 'id' : 'value'
-      )
-    }}</span>
-  </div>
-
-  @if (savingsAccount.minRequiredOpeningBalance) {
-    <div class="flex-fill layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Minimum Opening Balance' | translate }}:</span>
-      <span class="flex-60">{{ savingsAccount.minRequiredOpeningBalance | formatNumber }}</span>
-    </div>
-  }
-
-  <div class="flex-fill layout-row">
-    <span class="flex-40">{{ 'labels.inputs.Apply Withdrawal Fee for Transfers' | translate }}:</span>
-    <span class="flex-60">{{ savingsAccount.withdrawalFeeForTransfers | yesNo }}</span>
-  </div>
-
-  @if (savingsAccount.lockinPeriodFrequency) {
-    <div class="flex-fill layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Lock-in Period' | translate }}:</span>
-      <span class="flex-60">{{
-        getCatalogTranslation(
-          savingsAccount.lockinPeriodFrequency +
-            ' ' +
-            (savingsAccount.lockinPeriodFrequencyType
-              | find: savingsAccountProductTemplate.lockinPeriodFrequencyTypeOptions : 'id' : 'value')
-        )
-      }}</span>
-    </div>
-  }
-
-  <div class="flex-fill layout-row">
-    <span class="flex-40">{{ 'labels.inputs.Is Overdraft Allowed' | translate }}:</span>
-    <span class="flex-60">{{ savingsAccount.allowOverdraft | yesNo }}</span>
-  </div>
-
-  @if (savingsAccount.minOverdraftForInterestCalculation) {
-    <div class="flex-fill layout-row">
-      <span class="flex-40"
-        >{{ 'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate }}:</span
-      >
-      <span class="flex-60">{{ savingsAccount.minOverdraftForInterestCalculation | formatNumber }}</span>
-    </div>
-  }
-
-  @if (savingsAccount.nominalAnnualInterestRateOverdraft) {
-    <div class="flex-fill layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Nominal Annual Interest for Overdraft' | translate }}:</span>
-      <span class="flex-60">{{ savingsAccount.nominalAnnualInterestRateOverdraft | formatNumber }} %</span>
-    </div>
-  }
-
-  @if (savingsAccount.overdraftLimit) {
-    <div class="flex-fill layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Maximum Overdraft Amount Limit' | translate }}:</span>
-      <span class="flex-60">{{ savingsAccount.overdraftLimit | formatNumber }}</span>
-    </div>
-  }
-
-  <div class="flex-fill layout-row">
-    <span class="flex-40">{{ 'labels.inputs.Enforce Minimum Balance' | translate }}:</span>
-    <span class="flex-60">{{ savingsAccount.enforceMinRequiredBalance | yesNo }}</span>
-  </div>
-
-  @if (savingsAccountProductTemplate?.enableLockinPeriod !== undefined) {
-    <div class="flex-fill layout-row">
-      <span class="flex-40">Enable Lock-in Period</span>
-      <span class="flex-60">{{ savingsAccountProductTemplate.enableLockinPeriod | yesNo }}</span>
-    </div>
-  }
-
-  @if (savingsAccountProductTemplate?.balanceFrequency) {
-    <div class="flex-fill layout-row">
-      <span class="flex-40">Balance Frequency</span>
-      <span class="flex-60">{{ savingsAccountProductTemplate.balanceFrequency }}</span>
-    </div>
-  }
-
-  @if (savingsAccountProductTemplate?.accountClosedZeroBalanceInDayClosing !== undefined) {
-    <div class="flex-fill layout-row">
-      <span class="flex-40">Account Closed Zero Balance In Day Closing</span>
-      <span class="flex-60">{{ savingsAccountProductTemplate.accountClosedZeroBalanceInDayClosing | yesNo }}</span>
-    </div>
-  }
-
-  @if (savingsAccount.minRequiredBalance) {
-    <div class="flex-fill layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Minimum Balance' | translate }}:</span>
-      <span class="flex-60">{{ savingsAccount.minRequiredBalance }}</span>
-    </div>
-  }
-
-  @if (savingsAccount.charges.length) {
-    <div class="layout-row-wrap responsive-column flex-fill">
-      <h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Charges' | translate }}</h3>
-      <mat-divider class="flex-fill"></mat-divider>
-      <table class="flex-fill mat-elevation-z1" 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>
+  @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>

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

@@ -6,27 +6,95 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-table {
-  width: 100%;
+.preview-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  padding: 0.5rem 0;
 }
 
-.mat-elevation-z1 {
-  margin: 1em 0 1.5em;
+.preview-section {
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #fff;
+  box-shadow: 0 1px 3px rgb(0 0 0 / 6%);
+
+  &__header {
+    background: #f5f5f5;
+    border-bottom: 1px solid #e0e0e0;
+    padding: 0.6rem 1rem;
+  }
+
+  &__title {
+    font-size: 0.95rem;
+    font-weight: 600;
+    color: #333;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
 }
 
-h2,
-h3,
-h4 {
-  margin: 0;
+.preview-body {
+  padding: 1rem 1.25rem;
+}
+
+.preview-grid {
+  display: grid;
+  gap: 0.75rem 1.5rem;
+
+  &--three {
+    grid-template-columns: repeat(3, 1fr);
+
+    @media (width <= 768px) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media (width <= 480px) {
+      grid-template-columns: 1fr;
+    }
+  }
+}
+
+.preview-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.preview-label {
+  font-size: 0.72rem;
+  color: #888;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.preview-value {
+  font-size: 0.92rem;
+  color: #222;
   font-weight: 500;
 }
 
-span {
-  margin: 0.5em 0;
+.preview-badge {
+  display: inline-block;
+  padding: 0.1rem 0.55rem;
+  border-radius: 12px;
+  font-size: 0.78rem;
+  font-weight: 600;
+  background: #ffebee;
+  color: #c62828;
+  width: fit-content;
+
+  &--yes {
+    background: #e8f5e9;
+    color: #2e7d32;
+  }
 }
 
-mat-divider {
-  margin: 0 0 0.5em;
+.preview-table {
+  width: 100%;
+  margin-top: 1rem;
 }
 
 .margin-t {

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

@@ -7,8 +7,7 @@
  */
 
 /** Angular Imports */
-import { Component, Input, Output, EventEmitter, OnChanges, inject } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
+import { Component, Input, Output, EventEmitter, OnChanges } from '@angular/core';
 import {
   MatTableDataSource,
   MatTable,
@@ -62,7 +61,24 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class SavingsAccountPreviewStepComponent implements OnChanges {
-  private translateService = inject(TranslateService);
+  readonly digitalFacilityLabels = [
+    { key: 'atmFacility', label: 'ATM Facility' },
+    { key: 'atmWithdrawalFacility', label: 'ATM Withdrawal' },
+    { key: 'upiFacility', label: 'UPI Facility' },
+    { key: 'posTransactionsFacility', label: 'POS Transactions' },
+    { key: 'chequeBook', label: 'Cheque Book' },
+    { key: 'impsFacility', label: 'IMPS Facility' },
+    { key: 'smsAlerts', label: 'SMS Alerts' },
+    { key: 'bbpsFacility', label: 'BBPS Facility' },
+    { key: 'insuranceCover', label: 'Insurance Cover' },
+    { key: 'bepgFacility', label: 'BEPG Facility' },
+    { key: 'neftFacility', label: 'NEFT Facility' },
+    { key: 'rtgsFacility', label: 'RTGS Facility' },
+    { key: 'interBankTotalCapFacility', label: 'Inter-Bank Total Cap' },
+    { key: 'withdrawalFacility', label: 'Withdrawal Facility' },
+    { key: 'depositFacilityKyc', label: 'Deposit Facility (KYC)' },
+    { key: 'virtualDebitCard', label: 'Virtual Debit Card' }
+  ];
 
   /** Savings Account Product Template */
   @Input() savingsAccountProductTemplate: any;
@@ -102,7 +118,15 @@ export class SavingsAccountPreviewStepComponent implements OnChanges {
     }
   }
 
-  getCatalogTranslation(text: string): string {
-    return this.translateService.instant('labels.catalogs.' + text);
+  get digitalPreview(): any {
+    return this.savingsAccountProductTemplate || {};
+  }
+
+  get hasDigitalSection(): boolean {
+    return !!(
+      this.digitalPreview?.accountFacilityConfig ||
+      this.digitalPreview?.accountFacilityLimits?.length ||
+      this.digitalPreview?.depositLimitKyc
+    );
   }
 }