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>

src/app/current-accounts/current-account-stepper/current-account-currency-step/current-account-currency-step.component.ts

@@ -76,6 +76,13 @@ export class CurrentAccountCurrencyStepComponent 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}%`;

src/app/current-accounts/current-account-stepper/current-account-details-step/current-account-details-step.component.html

@@ -933,14 +933,16 @@
     </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]="currentAccountDetailsForm.invalid">
-      {{ 'labels.buttons.Next' | translate }}
-      <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
-    </button>
-  </div>
+  @if (!hideButtons) {
+    <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]="currentAccountDetailsForm.invalid">
+        {{ 'labels.buttons.Next' | translate }}
+        <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
+      </button>
+    </div>
+  }
 </form>

src/app/current-accounts/current-account-stepper/current-account-details-step/current-account-details-step.component.ts

@@ -52,6 +52,7 @@ export class CurrentAccountDetailsStepComponent implements OnInit {
   private cdr = inject(ChangeDetectorRef);
 
   @Input() currentAccountTemplate: any;
+  @Input() hideButtons = false;
 
   minDate = new Date(2000, 0, 1);
   maxDate = new Date();

src/app/current-accounts/current-account-stepper/current-account-preview-step/current-account-preview-step.component.html

@@ -643,15 +643,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>
+}

src/app/current-accounts/current-account-stepper/current-account-preview-step/current-account-preview-step.component.scss

@@ -459,3 +459,15 @@
   font-style: italic;
   margin: 0;
 }
+
+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;
+}

src/app/current-accounts/current-account-stepper/current-account-preview-step/current-account-preview-step.component.ts

@@ -85,6 +85,7 @@ export class CurrentAccountPreviewStepComponent implements OnChanges {
 
   @Input() currentAccountProductTemplate: any;
   @Input() currentAccountTemplate: any;
+  @Input() hideButtons = false;
   @Input() currentAccountTermsForm: any;
   @Input() currentAccountTermForm: any;
   @Input() currentAccountSettingsForm: any;