feat: merge updates - current account, savings, recurring deposits and shared components

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

@@ -63,16 +63,20 @@
       </div>
       <div class="preview-body">
         <div class="preview-grid preview-grid--three">
-          @if (savingsAccountProductTemplate?.accountType) {
+          @if (savingsAccount?.accountType || savingsAccountProductTemplate?.accountType) {
             <div class="preview-field">
               <span class="preview-label">Account Type</span>
-              <span class="preview-value">{{ savingsAccountProductTemplate?.accountType }}</span>
+              <span class="preview-value">{{
+                savingsAccount?.accountType || savingsAccountProductTemplate?.accountType
+              }}</span>
             </div>
           }
-          @if (savingsAccountProductTemplate?.customerSegment) {
+          @if (savingsAccount?.customerSegment || savingsAccountProductTemplate?.customerSegment) {
             <div class="preview-field">
               <span class="preview-label">Customer Segment</span>
-              <span class="preview-value">{{ savingsAccountProductTemplate?.customerSegment }}</span>
+              <span class="preview-value">{{
+                savingsAccount?.customerSegment || savingsAccountProductTemplate?.customerSegment
+              }}</span>
             </div>
           }
           @if (savingsAccountProductTemplate?.productCode) {
@@ -135,10 +139,10 @@
             <span class="preview-label">Name</span>
             <span class="preview-value">{{ savingsAccount?.introducerName || '—' }}</span>
           </div>
-          @if (savingsAccount?.introducerCif) {
+          @if (savingsAccount?.introducerCifNumber) {
             <div class="preview-field">
               <span class="preview-label">CIF No</span>
-              <span class="preview-value preview-mono">{{ savingsAccount.introducerCif }}</span>
+              <span class="preview-value preview-mono">{{ savingsAccount.introducerCifNumber }}</span>
             </div>
           }
           <div class="preview-field">
@@ -150,7 +154,207 @@
     </div>
   }
 
-  <!-- ══ 4. Currency & Account Flags ══════════════════════════════ -->
+  <!-- ══ 4. Status of Account ════════════════════════════════════ -->
+  @if (savingsAccount?.accountStatus) {
+    <div class="preview-section">
+      <div class="preview-section__header">
+        <i class="fas fa-id-card preview-section__icon"></i>
+        <span class="preview-section__title">Status of Account</span>
+        <span class="preview-section__badge">RBI Guidelines</span>
+      </div>
+      <div class="preview-body">
+        <!-- Status Tile -->
+        <div class="preview-soa-status-row">
+          <span class="preview-soa-tile">
+            @switch (savingsAccount.accountStatus) {
+              @case ('INDIVIDUAL_MALE') {
+                <i class="fas fa-male"></i> Individual (Male)
+              }
+              @case ('INDIVIDUAL_FEMALE') {
+                <i class="fas fa-female"></i> Individual (Female)
+              }
+              @case ('SINGLE') {
+                <i class="fas fa-user-circle"></i> Single Account
+              }
+              @case ('JOINT') {
+                <i class="fas fa-users"></i> Joint Account
+              }
+              @case ('MINOR') {
+                <i class="fas fa-child"></i> Minor Account
+              }
+              @case ('SENIOR_CITIZEN') {
+                <i class="fas fa-user-clock"></i> Senior Citizen
+              }
+              @default {
+                {{ savingsAccount.accountStatus }}
+              }
+            }
+          </span>
+        </div>
+
+        <!-- JOINT: Mode of Operation + Holders Table -->
+        @if (savingsAccount.accountStatus === 'JOINT') {
+          <div class="preview-grid preview-grid--three" style="margin-top: 12px">
+            <div class="preview-field">
+              <span class="preview-label">Mode of Operation</span>
+              <span class="preview-value">
+                @switch (savingsAccount.modeOfOperation) {
+                  @case ('EITHER_OR_SURVIVOR') {
+                    Either or Survivor
+                  }
+                  @case ('FORMER_OR_SURVIVOR') {
+                    Former or Survivor
+                  }
+                  @case ('JOINTLY') {
+                    Jointly
+                  }
+                  @case ('ANYONE_OR_SURVIVOR') {
+                    Anyone or Survivor
+                  }
+                  @default {
+                    {{ savingsAccount.modeOfOperation || '—' }}
+                  }
+                }
+              </span>
+            </div>
+          </div>
+          @if (savingsAccount.jointHolders?.length) {
+            <div class="preview-soa-table-wrap">
+              <table class="preview-soa-tbl">
+                <thead>
+                  <tr>
+                    <th class="preview-soa-th">Sr.</th>
+                    <th class="preview-soa-th">Holder Name</th>
+                    <th class="preview-soa-th">CIF No.</th>
+                    <th class="preview-soa-th">Ownership %</th>
+                    <th class="preview-soa-th">Signing</th>
+                    <th class="preview-soa-th">Role</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  @for (holder of savingsAccount.jointHolders; track holder.clientId; let i = $index) {
+                    <tr [class.preview-soa-tr--primary]="holder.isPrimary">
+                      <td class="preview-soa-td">{{ i + 1 }}</td>
+                      <td class="preview-soa-td">
+                        {{ holder.displayName || '—' }}
+                        @if (holder.isPrimary) {
+                          <span class="preview-soa-primary-tag">Primary</span>
+                        }
+                      </td>
+                      <td class="preview-soa-td preview-mono">{{ holder.cifNumber || '—' }}</td>
+                      <td class="preview-soa-td">{{ holder.sharePercentage ?? '—' }}%</td>
+                      <td class="preview-soa-td">{{ holder.isMandatory ? 'Mandatory' : 'Optional' }}</td>
+                      <td class="preview-soa-td">{{ holder.isPrimary ? 'Primary Account Holder' : 'Co-Holder' }}</td>
+                    </tr>
+                  }
+                </tbody>
+              </table>
+            </div>
+          }
+        }
+
+        <!-- INDIVIDUAL_MALE: Special Category -->
+        @if (savingsAccount.accountStatus === 'INDIVIDUAL_MALE' && savingsAccount.specialCategory) {
+          <div class="preview-grid preview-grid--three" style="margin-top: 12px">
+            <div class="preview-field">
+              <span class="preview-label">Special Category</span>
+              <span class="preview-value">
+                @switch (savingsAccount.specialCategory) {
+                  @case ('DEFENCE') {
+                    Defence Personnel
+                  }
+                  @case ('EX_SERVICEMAN') {
+                    Ex-Serviceman
+                  }
+                  @case ('GOVT_EMPLOYEE') {
+                    Government Employee
+                  }
+                  @case ('PHYSICALLY_CHALLENGED') {
+                    Physically Challenged
+                  }
+                  @case ('NRI') {
+                    NRI (Non-Resident Indian)
+                  }
+                  @case ('NONE') {
+                    None / General
+                  }
+                  @default {
+                    {{ savingsAccount.specialCategory }}
+                  }
+                }
+              </span>
+            </div>
+          </div>
+        }
+
+        <!-- INDIVIDUAL_FEMALE: Weaker Section -->
+        @if (savingsAccount.accountStatus === 'INDIVIDUAL_FEMALE' && savingsAccount.weakerSection) {
+          <div class="preview-grid preview-grid--three" style="margin-top: 12px">
+            <div class="preview-field">
+              <span class="preview-label">Weaker Section</span>
+              <span class="preview-value">
+                @switch (savingsAccount.weakerSection) {
+                  @case ('BPL') {
+                    BPL (Below Poverty Line)
+                  }
+                  @case ('SC_ST') {
+                    SC / ST Category
+                  }
+                  @case ('MINORITY') {
+                    Minority Community
+                  }
+                  @case ('SHG') {
+                    Self Help Group Member
+                  }
+                  @case ('PMJDY') {
+                    PMJDY Beneficiary
+                  }
+                  @case ('NONE') {
+                    None / General
+                  }
+                  @default {
+                    {{ savingsAccount.weakerSection }}
+                  }
+                }
+              </span>
+            </div>
+          </div>
+        }
+
+        <!-- MINOR: Guardian Details -->
+        @if (savingsAccount.accountStatus === 'MINOR') {
+          <div class="preview-grid preview-grid--three" style="margin-top: 12px">
+            @if (savingsAccount.guardianName) {
+              <div class="preview-field">
+                <span class="preview-label">Guardian Name</span>
+                <span class="preview-value">{{ savingsAccount.guardianName }}</span>
+              </div>
+            }
+            @if (savingsAccount.guardianCifNumber) {
+              <div class="preview-field">
+                <span class="preview-label">Guardian CIF</span>
+                <span class="preview-value preview-mono">{{ savingsAccount.guardianCifNumber }}</span>
+              </div>
+            }
+            @if (savingsAccount.guardianRelationship) {
+              <div class="preview-field">
+                <span class="preview-label">Relationship</span>
+                <span class="preview-value">{{ savingsAccount.guardianRelationship }}</span>
+              </div>
+            }
+            @if (savingsAccount.minorDateOfBirth) {
+              <div class="preview-field">
+                <span class="preview-label">Minor DOB</span>
+                <span class="preview-value">{{ savingsAccount.minorDateOfBirth }}</span>
+              </div>
+            }
+          </div>
+        }
+      </div>
+    </div>
+  }
+
+  <!-- ══ 5. Currency & Account Flags ══════════════════════════════ -->
   <div class="preview-section">
     <div class="preview-section__header">
       <i class="fas fa-coins preview-section__icon"></i>

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

@@ -323,3 +323,79 @@
 .margin-t {
   margin-top: 1em;
 }
+
+// ── Status of Account preview ─────────────────────────────────────────────
+
+.preview-soa-status-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.preview-soa-tile {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 20px;
+  border-radius: 999px;
+  font-size: 14px;
+  font-weight: 700;
+  background: #eff6ff;
+  color: #1d4ed8;
+  border: 2px solid #bfdbfe;
+
+  i {
+    font-size: 16px;
+  }
+}
+
+.preview-soa-table-wrap {
+  margin-top: 14px;
+  overflow-x: auto;
+  border-radius: 8px;
+  border: 1px solid #e2e8f0;
+}
+
+.preview-soa-tbl {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+.preview-soa-th {
+  background: #f8fafc;
+  padding: 8px 12px;
+  text-align: left;
+  font-weight: 600;
+  color: #475569;
+  border-bottom: 1px solid #e2e8f0;
+  white-space: nowrap;
+}
+
+.preview-soa-td {
+  padding: 10px 12px;
+  border-bottom: 1px solid #f1f5f9;
+  color: #0f172a;
+  vertical-align: middle;
+}
+
+.preview-soa-tr--primary {
+  background: #f0f9ff;
+
+  .preview-soa-td {
+    font-weight: 600;
+  }
+}
+
+.preview-soa-primary-tag {
+  display: inline-block;
+  margin-left: 6px;
+  padding: 1px 8px;
+  border-radius: 999px;
+  font-size: 10px;
+  font-weight: 700;
+  background: #dbeafe;
+  color: #1d4ed8;
+  border: 1px solid #bfdbfe;
+  vertical-align: middle;
+}