feat: account charges UI — current account, FD, RD stepper redesign

Redesigned create-account stepper UI for current accounts, fixed deposits, and recurring deposits: updated layout, preview steps, interest rate chart step, currency step, and detail step components. Savings preview styling and currency step also updated. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-22 12:47:25 +05:30
parent 64c76a9806
commit 3370a95235
34 changed files with 1154 additions and 452 deletions
@@ -71,6 +71,13 @@ export class RecurringDepositsAccountCurrencyStepComponent implements OnChanges
      this.nomineeError = 'This person is already added as a nominee.';
      return;
    }
+    const relationshipLower = data.relationshipName?.toLowerCase();
+    if (relationshipLower === 'father' || relationshipLower === 'mother' || relationshipLower === 'wife') {
+      if (this.nominees.some((n) => n.relationshipName?.toLowerCase() === relationshipLower)) {
+        this.nomineeError = `Only one ${data.relationshipName} can be added as a nominee.`;
+        return;
+      }
+    }
    const newTotal = this.totalShare + (+data.percentageShare || 0);
    if (newTotal > 100) {
      this.nomineeError = `Total share cannot exceed 100%. Remaining: ${this.remainingShare}%`;
@@ -22,6 +22,10 @@
        </div>
      </div>
      <div class="fdrc-header-card__meta">
+        <span class="fdrc-pill" [class.fdrc-pill--active]="isActive" [class.fdrc-pill--inactive]="!isActive">
+          <i class="fas" [class.fa-check-circle]="isActive" [class.fa-times-circle]="!isActive"></i>
+          {{ isActive ? 'Active' : 'Inactive' }}
+        </span>
        <div class="fdrc-header-card__dates">
          <span class="fdrc-meta-item">
            <i class="fas fa-calendar-check"></i>
@@ -143,6 +143,18 @@ $red-light: #fee2e2;
    background: $blue-light;
    color: $blue;
  }
+
+  &--active {
+    background: $green-light;
+    color: $green;
+    border: 1px solid rgba($green, 0.3);
+  }
+
+  &--inactive {
+    background: $red-light;
+    color: $red;
+    border: 1px solid rgba($red, 0.3);
+  }
 }

 // ── Calculator Card ────────────────────────────────────────────────────────
@@ -98,10 +98,13 @@ export class RecurringDepositsAccountInterestRateChartStepComponent implements O
    isSeniorCitizen?: boolean;
  }>();

+  get activeBase(): any {
+    return (this.cbsBaseRates || []).find((r) => r.fdType === 'DOUBLE' && r.isActive);
+  }
+
  get interestRateChartData(): any[] {
-    const activeBase = (this.cbsBaseRates || []).find((r) => r.fdType === 'DOUBLE' && r.isActive);
-    if (activeBase?.slabs?.length) {
-      return this.normalizeCbsSlabs(activeBase.slabs);
+    if (this.activeBase?.slabs?.length) {
+      return this.normalizeCbsSlabs(this.activeBase.slabs);
    }
    const template = this.recurringDepositsAccountProductTemplate || this.recurringDepositsAccountTemplate;
    if (!template) return [];
@@ -336,6 +339,9 @@ export class RecurringDepositsAccountInterestRateChartStepComponent implements O
  // ── Header Getters ──────────────────────────────────────────────────────

  get chartName(): string {
+    if (this.activeBase) {
+      return this.activeBase.versionLabel || 'CBS Base Interest Rate';
+    }
    const template = this.recurringDepositsAccountProductTemplate || this.recurringDepositsAccountTemplate;
    return (
      template?.accountChart?.name ||
@@ -348,6 +354,9 @@ export class RecurringDepositsAccountInterestRateChartStepComponent implements O
  }

  get chartFromDate(): any {
+    if (this.activeBase) {
+      return this.activeBase.effectiveFromDate;
+    }
    const template = this.recurringDepositsAccountProductTemplate || this.recurringDepositsAccountTemplate;
    return (
      template?.accountChart?.fromDate ||
@@ -359,6 +368,9 @@ export class RecurringDepositsAccountInterestRateChartStepComponent implements O
  }

  get chartEndDate(): any {
+    if (this.activeBase) {
+      return null;
+    }
    const template = this.recurringDepositsAccountProductTemplate || this.recurringDepositsAccountTemplate;
    return (
      template?.accountChart?.endDate ||
@@ -370,6 +382,9 @@ export class RecurringDepositsAccountInterestRateChartStepComponent implements O
  }

  get chartDescription(): string {
+    if (this.activeBase) {
+      return this.activeBase.remarks || '';
+    }
    const template = this.recurringDepositsAccountProductTemplate || this.recurringDepositsAccountTemplate;
    return (
      template?.accountChart?.description ||
@@ -381,6 +396,20 @@ export class RecurringDepositsAccountInterestRateChartStepComponent implements O
    );
  }

+  get isActive(): boolean {
+    if (this.activeBase) {
+      return this.activeBase.isActive;
+    }
+    const template = this.recurringDepositsAccountProductTemplate || this.recurringDepositsAccountTemplate;
+    return (
+      template?.accountChart?.isActive ??
+      template?.activeChart?.isActive ??
+      template?.interestRateCharts?.[0]?.isActive ??
+      template?.interestRateChart?.isActive ??
+      true
+    );
+  }
+
  get isPrimaryGroupingByAmount(): boolean {
    const template = this.recurringDepositsAccountProductTemplate || this.recurringDepositsAccountTemplate;
    return !!(
@@ -853,15 +853,18 @@
  }
 </div>

-<div class="layout-row responsive-column align-center gap-2px margin-t">
-  <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 [routerLink]="['../..']">
-    {{ 'labels.buttons.Cancel' | translate }}
-  </button>
-  <button mat-raised-button color="primary" (click)="submitEvent.emit()">
-    {{ 'labels.buttons.Submit' | translate }}
-  </button>
-</div>
+@if (!hideButtons) {
+  <div class="layout-row responsive-column align-center gap-2px margin-t">
+    <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 [routerLink]="['../..']">
+      {{ 'labels.buttons.Cancel' | translate }}
+    </button>
+    <button mat-raised-button color="primary" class="preview-submit-row__primary" (click)="submitEvent.emit()">
+      <fa-icon icon="check" class="m-r-10"></fa-icon>
+      {{ 'labels.buttons.Submit' | translate }}
+    </button>
+  </div>
+}
@@ -630,3 +630,15 @@
    }
  }
 }
+
+button.preview-submit-row__primary,
+.mat-mdc-raised-button.mat-primary.preview-submit-row__primary,
+.preview-submit-row__primary {
+  background: linear-gradient(135deg, #10b981 0%, #047857 100%) !important;
+
+  --mdc-protected-button-container-color: transparent !important;
+  --mdc-filled-button-container-color: transparent !important;
+
+  color: #fff !important;
+  box-shadow: 0 4px 12px -2px rgb(4 120 87 / 35%) !important;
+}
@@ -71,6 +71,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 export class RecurringDepositsAccountPreviewStepComponent implements OnChanges {
  /** Input Data */
  @Input() recurringDepositsAccountTemplate: any;
+  @Input() hideButtons = false;
  @Input() recurringDepositsAccountProductTemplate: any;
  @Input() recurringDepositAccountData: any;
  @Input() rdNominees: any[] = [];