diff --git a/src/app/current-accounts/create-current-account/create-current-account.component.html b/src/app/current-accounts/create-current-account/create-current-account.component.html index e27c865f4..11e38e4bf 100644 --- a/src/app/current-accounts/create-current-account/create-current-account.component.html +++ b/src/app/current-accounts/create-current-account/create-current-account.component.html @@ -6,104 +6,143 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/. --> -
- + +
+ +
+

Create Current Account

+
+ Pick a product, confirm currency, set digital channels and review before submit. +
+
+
+ + + - - - - - - - - - - - - - - - - - - - - - - - {{ 'labels.inputs.DETAILS' | translate }} - - - - - - @if (currentAccountProductTemplate) { - - - CURRENCY - - - -
- - -
- - - - - DIGITAL - - - -
- - -
- - - - - {{ 'labels.inputs.PREVIEW' | translate }} - + + + + Product + +
+ - - - } - + + +
+ + +
+
+ + + + + + + Currency + +
+ @if (currentAccountProductTemplate) { + + } + +
+ + + +
+
+ + + + + + + Digital + +
+ @if (currentAccountProductTemplate) { + + } + +
+ + + +
+
+ + + + + + + {{ 'labels.inputs.PREVIEW' | translate }} + +
+ @if (currentAccountProductTemplate) { + + + } + +
+ + + + +
+
+ +
diff --git a/src/app/current-accounts/create-current-account/create-current-account.component.scss b/src/app/current-accounts/create-current-account/create-current-account.component.scss index 94c2d9d26..f7842d64d 100644 --- a/src/app/current-accounts/create-current-account/create-current-account.component.scss +++ b/src/app/current-accounts/create-current-account/create-current-account.component.scss @@ -6,75 +6,165 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -// Container styling with proper spacing and margins -.container { - margin: 1.5rem auto; - max-width: 75rem; - width: 100%; - padding: 0 1.5rem; - box-sizing: border-box; +$navy: #0d1b2a; +$blue: #1e88e5; +$blue-d: #1e40af; +$indigo: #4f46e5; +$border: #e2e8f0; + +.cca-container { + max-width: 1180px; + margin: 0 auto; + padding: 20px 24px; } -// Material Stepper styling with proper spacing -:host ::ng-deep mat-stepper { - background: transparent; +/* ─── Hero header (matches Nexora pages) ────────────────────────────── */ +.cca-header { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 16px; - .mat-step-header { - padding: 1rem 1.5rem; - margin-bottom: 0.5rem; + &__icon { + width: 44px; + height: 44px; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 12px; + background: linear-gradient(135deg, $blue 0%, $indigo 100%); + color: #fff; + font-size: 18px; + box-shadow: 0 2px 8px rgb(29 78 216 / 25%); + flex-shrink: 0; } - .mat-step-content { - padding: 1.5rem; - margin: 1rem 0; - overflow: visible !important; + &__title { + margin: 0; + font-size: 20px; + font-weight: 800; + color: $navy; + line-height: 1.1; + letter-spacing: 0.02em; + } + + &__sub { + margin-top: 2px; + font-size: 12.5px; + color: #64748b; } } -// Form field spacing within steps -:host ::ng-deep mat-step-content { - overflow: visible !important; +/* ─── Wizard tab strip ──────────────────────────────────────────────── */ +.cca-tabs { + background: #fff; + border: 1px solid $border; + border-radius: 14px; + box-shadow: 0 1px 3px rgb(15 23 42 / 4%); + overflow: hidden; - mat-form-field { - margin-bottom: 1rem; - width: 100%; - } - - .layout-row-wrap { - gap: 1rem; - margin-bottom: 1rem; - } -} - -// Responsive design -@media (width <= 768px) { - .container { - padding: 0 1rem; - margin: 1rem auto; - } - - :host ::ng-deep mat-stepper { - .mat-step-content { - padding: 1rem; - margin: 0.75rem 0; + ::ng-deep { + .mat-mdc-tab-header { + background: #f8fafc; + border-bottom: 1px solid $border; } - .mat-step-header { - padding: 0.75rem 1rem; + .mat-mdc-tab { + min-width: 140px; + height: 50px; + padding: 0 22px; + font-size: 13px !important; + font-weight: 600 !important; + letter-spacing: 0.01em; + color: #475569 !important; + opacity: 1 !important; + } + + .mat-mdc-tab:hover:not(.mdc-tab--active, .mat-mdc-tab-disabled) { + background: rgb(30 64 175 / 5%); + color: $navy !important; + } + + .mat-mdc-tab.mdc-tab--active { + .mdc-tab__text-label { + color: $blue-d !important; + font-weight: 700 !important; + } + } + + /* Active-tab underline indicator — slightly bolder than Material's default. */ + .mdc-tab-indicator__content--underline { + border-color: $blue-d !important; + border-top-width: 3px !important; + } + + .mat-mdc-tab.mat-mdc-tab-disabled { + opacity: 0.45 !important; + cursor: not-allowed; + } + + .mat-mdc-tab-body-wrapper { + min-height: 320px; + } + + .mat-mdc-tab-body, + .mat-mdc-tab-body-content { + overflow: visible !important; } } } -@media (width <= 480px) { - .container { - padding: 0 0.75rem; - margin: 0.75rem auto; - } +.cca-tab__icon { + margin-right: 8px; + font-size: 13px; +} - :host ::ng-deep mat-stepper { - .mat-step-content { - padding: 0.75rem; - margin: 0.5rem 0; - } +/* ─── Tab body + action bar ─────────────────────────────────────────── */ +.cca-tab-body { + padding: 24px; + + @media (width <= 768px) { + padding: 16px; } } + +.cca-actions { + display: flex; + align-items: center; + gap: 12px; + margin-top: 24px; + padding-top: 16px; + border-top: 1px solid #f1f5f9; + + &__spacer { + flex: 1; + } + + button { + height: 40px !important; + border-radius: 10px !important; + font-weight: 600 !important; + padding: 0 18px !important; + } +} + +/* Utility helpers preserved from the prior stepper template. */ +.m-l-10 { + margin-left: 8px; +} + +.m-r-10 { + margin-right: 8px; +} + +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; +} diff --git a/src/app/current-accounts/create-current-account/create-current-account.component.ts b/src/app/current-accounts/create-current-account/create-current-account.component.ts index d6ae2b86e..5b46c6192 100644 --- a/src/app/current-accounts/create-current-account/create-current-account.component.ts +++ b/src/app/current-accounts/create-current-account/create-current-account.component.ts @@ -20,14 +20,7 @@ import { CurrentAccountsService } from '../current-accounts.service'; import { SettingsService } from 'app/settings/settings.service'; import { Dates } from 'app/core/utils/dates'; import { AlertService } from 'app/core/alert/alert.service'; -import { - MatStepper, - MatStepperIcon, - MatStep, - MatStepLabel, - MatStepperNext, - MatStepperPrevious -} from '@angular/material/stepper'; +import { MatTabsModule } from '@angular/material/tabs'; import { FaIconComponent } from '@fortawesome/angular-fontawesome'; import { CurrentAccountPreviewStepComponent } from '../current-account-stepper/current-account-preview-step/current-account-preview-step.component'; import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module'; @@ -42,13 +35,8 @@ import { FormGroup } from '@angular/forms'; styleUrls: ['./create-current-account.component.scss'], imports: [ ...STANDALONE_SHARED_IMPORTS, - MatStepper, - MatStepperIcon, - MatStepperNext, - MatStepperPrevious, + MatTabsModule, FaIconComponent, - MatStep, - MatStepLabel, CurrentAccountDetailsStepComponent, CurrentAccountCurrencyStepComponent, CurrentAccountDigitalStepComponent, @@ -67,6 +55,10 @@ export class CreateCurrentAccountComponent { currentAccountTemplate: any; /** Current Account Product Template */ currentAccountProductTemplate: any; + /** Currently visible wizard tab (0-indexed). */ + selectedTabIndex = 0; + /** Total wizard tabs — Product, Currency, Digital, Preview. */ + private readonly totalTabs = 4; @ViewChild(CurrentAccountDetailsStepComponent, { static: true }) currentAccountDetailsStep: CurrentAccountDetailsStepComponent; @@ -90,6 +82,18 @@ export class CreateCurrentAccountComponent { this.currentAccountProductTemplate = $event; } + next(): void { + if (this.selectedTabIndex < this.totalTabs - 1) { + this.selectedTabIndex += 1; + } + } + + prev(): void { + if (this.selectedTabIndex > 0) { + this.selectedTabIndex -= 1; + } + } + /** * Retrieves current account details form. */ diff --git a/src/app/current-accounts/current-account-stepper/current-account-currency-step/current-account-currency-step.component.ts b/src/app/current-accounts/current-account-stepper/current-account-currency-step/current-account-currency-step.component.ts index 8a8d97c2e..6c1ee80de 100644 --- a/src/app/current-accounts/current-account-stepper/current-account-currency-step/current-account-currency-step.component.ts +++ b/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}%`; diff --git a/src/app/current-accounts/current-account-stepper/current-account-details-step/current-account-details-step.component.html b/src/app/current-accounts/current-account-stepper/current-account-details-step/current-account-details-step.component.html index e99add781..284d49784 100644 --- a/src/app/current-accounts/current-account-stepper/current-account-details-step/current-account-details-step.component.html +++ b/src/app/current-accounts/current-account-stepper/current-account-details-step/current-account-details-step.component.html @@ -933,14 +933,16 @@ } -
- - -
+ @if (!hideButtons) { +
+ + +
+ } diff --git a/src/app/current-accounts/current-account-stepper/current-account-details-step/current-account-details-step.component.ts b/src/app/current-accounts/current-account-stepper/current-account-details-step/current-account-details-step.component.ts index 08ff06782..6a8787230 100644 --- a/src/app/current-accounts/current-account-stepper/current-account-details-step/current-account-details-step.component.ts +++ b/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(); diff --git a/src/app/current-accounts/current-account-stepper/current-account-preview-step/current-account-preview-step.component.html b/src/app/current-accounts/current-account-stepper/current-account-preview-step/current-account-preview-step.component.html index fb65ed15d..12a853a84 100644 --- a/src/app/current-accounts/current-account-stepper/current-account-preview-step/current-account-preview-step.component.html +++ b/src/app/current-accounts/current-account-stepper/current-account-preview-step/current-account-preview-step.component.html @@ -643,15 +643,18 @@ } -
- - - -
+@if (!hideButtons) { +
+ + + +
+} diff --git a/src/app/current-accounts/current-account-stepper/current-account-preview-step/current-account-preview-step.component.scss b/src/app/current-accounts/current-account-stepper/current-account-preview-step/current-account-preview-step.component.scss index b65af385a..166f70fc2 100644 --- a/src/app/current-accounts/current-account-stepper/current-account-preview-step/current-account-preview-step.component.scss +++ b/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; +} diff --git a/src/app/current-accounts/current-account-stepper/current-account-preview-step/current-account-preview-step.component.ts b/src/app/current-accounts/current-account-stepper/current-account-preview-step/current-account-preview-step.component.ts index 3568d01aa..d5d718959 100644 --- a/src/app/current-accounts/current-account-stepper/current-account-preview-step/current-account-preview-step.component.ts +++ b/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; diff --git a/src/app/deposits/fixed-deposits/create-fixed-deposit-account/create-fixed-deposit-account.component.html b/src/app/deposits/fixed-deposits/create-fixed-deposit-account/create-fixed-deposit-account.component.html index a505a994f..7d09064d1 100644 --- a/src/app/deposits/fixed-deposits/create-fixed-deposit-account/create-fixed-deposit-account.component.html +++ b/src/app/deposits/fixed-deposits/create-fixed-deposit-account/create-fixed-deposit-account.component.html @@ -6,103 +6,140 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/. --> -
- + +
+ +
+

Create Fixed Deposit Account

+
Pick a product, confirm currency, set terms and review before submit.
+
+
+ + + - - - - - - - - - - - - - - - - - - - - - - - {{ 'labels.inputs.DETAILS' | translate }} - - - - - - - @if (fixedDepositsAccountProductTemplate) { - - Currency - - - -
- - -
- - - - - {{ 'labels.inputs.INTEREST RATE CHART' | translate }} - - + + + + Product + +
+ - + -
- -
- +
+ - - - {{ 'labels.inputs.PREVIEW' | translate }} - - - } - + + + + + Currency + +
+ @if (fixedDepositsAccountProductTemplate) { + + } + +
+ + + +
+
+ + + + + + + Interest Rate Chart + +
+ @if (fixedDepositsAccountProductTemplate) { + + + } + +
+ + + +
+
+ + + + + + + {{ 'labels.inputs.PREVIEW' | translate }} + +
+ @if (fixedDepositsAccountProductTemplate) { + + } + +
+ + + + +
+
+ +
diff --git a/src/app/deposits/fixed-deposits/create-fixed-deposit-account/create-fixed-deposit-account.component.scss b/src/app/deposits/fixed-deposits/create-fixed-deposit-account/create-fixed-deposit-account.component.scss index af9f4c075..45c7c9a1c 100644 --- a/src/app/deposits/fixed-deposits/create-fixed-deposit-account/create-fixed-deposit-account.component.scss +++ b/src/app/deposits/fixed-deposits/create-fixed-deposit-account/create-fixed-deposit-account.component.scss @@ -5,3 +5,166 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +$navy: #0d1b2a; +$blue: #1e88e5; +$blue-d: #1e40af; +$indigo: #4f46e5; +$border: #e2e8f0; + +.cfa-container { + max-width: 1180px; + margin: 0 auto; + padding: 20px 24px; +} + +/* ─── Hero header (matches Nexora pages) ────────────────────────────── */ +.cfa-header { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 16px; + + &__icon { + width: 44px; + height: 44px; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 12px; + background: linear-gradient(135deg, $blue 0%, $indigo 100%); + color: #fff; + font-size: 18px; + box-shadow: 0 2px 8px rgb(29 78 216 / 25%); + flex-shrink: 0; + } + + &__title { + margin: 0; + font-size: 20px; + font-weight: 800; + color: $navy; + line-height: 1.1; + letter-spacing: 0.02em; + } + + &__sub { + margin-top: 2px; + font-size: 12.5px; + color: #64748b; + } +} + +/* ─── Wizard tab strip ──────────────────────────────────────────────── */ +.cfa-tabs { + background: #fff; + border: 1px solid $border; + border-radius: 14px; + box-shadow: 0 1px 3px rgb(15 23 42 / 4%); + overflow: hidden; + + ::ng-deep { + .mat-mdc-tab-header { + background: #f8fafc; + border-bottom: 1px solid $border; + } + + .mat-mdc-tab { + min-width: 140px; + height: 50px; + padding: 0 22px; + font-size: 13px !important; + font-weight: 600 !important; + letter-spacing: 0.01em; + color: #475569 !important; + opacity: 1 !important; + } + + .mat-mdc-tab:hover:not(.mdc-tab--active, .mat-mdc-tab-disabled) { + background: rgb(30 64 175 / 5%); + color: $navy !important; + } + + .mat-mdc-tab.mdc-tab--active { + .mdc-tab__text-label { + color: $blue-d !important; + font-weight: 700 !important; + } + } + + /* Active-tab underline indicator */ + .mdc-tab-indicator__content--underline { + border-color: $blue-d !important; + border-top-width: 3px !important; + } + + .mat-mdc-tab.mat-mdc-tab-disabled { + opacity: 0.45 !important; + cursor: not-allowed; + } + + .mat-mdc-tab-body-wrapper { + min-height: 320px; + } + + .mat-mdc-tab-body, + .mat-mdc-tab-body-content { + overflow: visible !important; + } + } +} + +.cfa-tab__icon { + margin-right: 8px; + font-size: 13px; +} + +/* ─── Tab body + action bar ─────────────────────────────────────────── */ +.cfa-tab-body { + padding: 24px; + + @media (width <= 768px) { + padding: 16px; + } +} + +.cfa-actions { + display: flex; + align-items: center; + gap: 12px; + margin-top: 24px; + padding-top: 16px; + border-top: 1px solid #f1f5f9; + + &__spacer { + flex: 1; + } + + button { + height: 40px !important; + border-radius: 10px !important; + font-weight: 600 !important; + padding: 0 18px !important; + } +} + +/* Utility helpers */ +.m-l-10 { + margin-left: 8px; +} + +.m-r-10 { + margin-right: 8px; +} + +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; +} diff --git a/src/app/deposits/fixed-deposits/create-fixed-deposit-account/create-fixed-deposit-account.component.ts b/src/app/deposits/fixed-deposits/create-fixed-deposit-account/create-fixed-deposit-account.component.ts index 3f32de9ea..1d47b3e8d 100644 --- a/src/app/deposits/fixed-deposits/create-fixed-deposit-account/create-fixed-deposit-account.component.ts +++ b/src/app/deposits/fixed-deposits/create-fixed-deposit-account/create-fixed-deposit-account.component.ts @@ -20,14 +20,7 @@ import { ProductsService } from 'app/products/products.service'; import { FixedDepositAccountDetailsStepComponent } from '../fixed-deposit-account-stepper/fixed-deposit-account-details-step/fixed-deposit-account-details-step.component'; import { FixedDepositAccountCurrencyStepComponent } from '../fixed-deposit-account-stepper/fixed-deposit-account-currency-step/fixed-deposit-account-currency-step.component'; import { Dates } from 'app/core/utils/dates'; -import { - MatStepper, - MatStepperIcon, - MatStep, - MatStepLabel, - MatStepperNext, - MatStepperPrevious -} from '@angular/material/stepper'; +import { MatTabsModule } from '@angular/material/tabs'; import { FaIconComponent } from '@fortawesome/angular-fontawesome'; import { FixedDepositAccountInterestRateChartStepComponent } from '../fixed-deposit-account-stepper/fixed-deposit-account-interest-rate-chart-step/fixed-deposit-account-interest-rate-chart-step.component'; import { FixedDepositAccountPreviewStepComponent } from '../fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component'; @@ -42,13 +35,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module'; styleUrls: ['./create-fixed-deposit-account.component.scss'], imports: [ ...STANDALONE_SHARED_IMPORTS, - MatStepper, - MatStepperIcon, - MatStepperNext, - MatStepperPrevious, + MatTabsModule, FaIconComponent, - MatStep, - MatStepLabel, FixedDepositAccountDetailsStepComponent, FixedDepositAccountInterestRateChartStepComponent, FixedDepositAccountCurrencyStepComponent, @@ -73,6 +61,10 @@ export class CreateFixedDepositAccountComponent { fixedDepositsAccountTemplate: any; /** Fixed Deposit Account Product Template */ fixedDepositsAccountProductTemplate: any; + /** Currently visible wizard tab (0-indexed). */ + selectedTabIndex = 0; + /** Total wizard tabs — Product, Currency, Chart, Preview. */ + private readonly totalTabs = 4; /** Active CBS base interest rate versions for the selected product's FD type */ cbsBaseRates: any[] = []; /** Tenure selected from the interest rate chart step */ @@ -100,6 +92,18 @@ export class CreateFixedDepositAccountComponent { }); } + next(): void { + if (this.selectedTabIndex < this.totalTabs - 1) { + this.selectedTabIndex += 1; + } + } + + prev(): void { + if (this.selectedTabIndex > 0) { + this.selectedTabIndex -= 1; + } + } + /** * Sets fixed deposits account product template. * @param {any} $event API response diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-currency-step/fixed-deposit-account-currency-step.component.ts b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-currency-step/fixed-deposit-account-currency-step.component.ts index 4e7054a35..3c7fbb142 100644 --- a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-currency-step/fixed-deposit-account-currency-step.component.ts +++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-currency-step/fixed-deposit-account-currency-step.component.ts @@ -73,6 +73,13 @@ export class FixedDepositAccountCurrencyStepComponent 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}%`; diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-details-step/fixed-deposit-account-details-step.component.html b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-details-step/fixed-deposit-account-details-step.component.html index 8e6b1e498..be608125a 100644 --- a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-details-step/fixed-deposit-account-details-step.component.html +++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-details-step/fixed-deposit-account-details-step.component.html @@ -867,21 +867,23 @@ } -
- - -
+ @if (!hideButtons) { +
+ + +
+ } diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-details-step/fixed-deposit-account-details-step.component.ts b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-details-step/fixed-deposit-account-details-step.component.ts index d2562d4de..c6e23c9f4 100644 --- a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-details-step/fixed-deposit-account-details-step.component.ts +++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-details-step/fixed-deposit-account-details-step.component.ts @@ -55,6 +55,7 @@ export class FixedDepositAccountDetailsStepComponent implements OnInit { /** Fixed Deposits Account Template */ @Input() fixedDepositsAccountTemplate: any; + @Input() hideButtons = false; /** Minimum date allowed. */ minDate = new Date(2000, 0, 1); diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-interest-rate-chart-step/fixed-deposit-account-interest-rate-chart-step.component.html b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-interest-rate-chart-step/fixed-deposit-account-interest-rate-chart-step.component.html index add375f1d..51bf1b47f 100644 --- a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-interest-rate-chart-step/fixed-deposit-account-interest-rate-chart-step.component.html +++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-interest-rate-chart-step/fixed-deposit-account-interest-rate-chart-step.component.html @@ -22,6 +22,10 @@
+ + + {{ isActive ? 'Active' : 'Inactive' }} + @if (fdType) { r.fdType === fdType && r.isActive); - this.interestRateChartData = activeBase?.slabs - ? this.normalizeCbsSlabs(activeBase.slabs) + this.activeBase = (this.cbsBaseRates || []).find((r) => r.fdType === fdType && r.isActive); + this.interestRateChartData = this.activeBase?.slabs + ? this.normalizeCbsSlabs(this.activeBase.slabs) : (this.fixedDepositsAccountProductTemplate.accountChart?.chartSlabs ?? []); if (this.chartsTableRef) { this.chartsTableRef.renderRows(); @@ -326,21 +328,41 @@ export class FixedDepositAccountInterestRateChartStepComponent implements OnChan } get chartName(): string { + if (this.activeBase) { + return this.activeBase.versionLabel || 'CBS Base Interest Rate'; + } return this.fixedDepositsAccountProductTemplate?.accountChart?.name || 'CBS Base Interest Rate'; } get chartFromDate(): any { + if (this.activeBase) { + return this.activeBase.effectiveFromDate; + } return this.fixedDepositsAccountProductTemplate?.accountChart?.fromDate; } get chartEndDate(): any { + if (this.activeBase) { + return null; + } return this.fixedDepositsAccountProductTemplate?.accountChart?.endDate; } get chartDescription(): string { + if (this.activeBase) { + return this.activeBase.remarks || ''; + } return this.fixedDepositsAccountProductTemplate?.accountChart?.description || ''; } + get isActive(): boolean { + if (this.activeBase) { + return this.activeBase.isActive; + } + const template = this.fixedDepositsAccountProductTemplate || this.fixedDepositsAccountTemplate; + return template?.accountChart?.isActive ?? true; + } + get isPrimaryGroupingByAmount(): boolean { return !!this.fixedDepositsAccountProductTemplate?.accountChart?.isPrimaryGroupingByAmount; } diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component.html b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component.html index bf8f2fbb8..7abd9466a 100644 --- a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component.html +++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component.html @@ -683,15 +683,18 @@
-
- - - -
+@if (!hideButtons) { +
+ + + +
+} diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component.scss b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component.scss index 1635f11d9..a4cb31a5e 100644 --- a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component.scss +++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component.scss @@ -588,3 +588,15 @@ border-color: #bbf7d0; } } + +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; +} diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component.ts b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component.ts index c3a4c361e..fb950b0b1 100644 --- a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component.ts +++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component.ts @@ -72,6 +72,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module'; export class FixedDepositAccountPreviewStepComponent implements OnChanges { /** Fixed Deposits Account Template */ @Input() fixedDepositsAccountTemplate: any; + @Input() hideButtons = false; /** Fixed Deposits Account Product Template */ @Input() fixedDepositsAccountProductTemplate: any; /** Fixed Deposits Account Data */ diff --git a/src/app/deposits/recurring-deposits/create-recurring-deposits-account/create-recurring-deposits-account.component.html b/src/app/deposits/recurring-deposits/create-recurring-deposits-account/create-recurring-deposits-account.component.html index d530af03f..d4f2d0b6c 100644 --- a/src/app/deposits/recurring-deposits/create-recurring-deposits-account/create-recurring-deposits-account.component.html +++ b/src/app/deposits/recurring-deposits/create-recurring-deposits-account/create-recurring-deposits-account.component.html @@ -6,112 +6,153 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/. --> -
- + +
+ +
+

Create Recurring Deposit Account

+
Pick a product, confirm currency, set terms and review before submit.
+
+
+ + + - - - + + + + + Product + +
+ + - - - - - - - - - - - - - - - - - - - {{ 'labels.inputs.DETAILS' | translate }} - - - - - - - @if (recurringDepositsAccountProductTemplate) { - - Currency - - - -
- -
- +
+ - - - {{ 'labels.inputs.INTEREST RATE CHART' | translate }} + + + + + Currency + +
+ @if (recurringDepositsAccountProductTemplate) { + + } - - - -
- -
- +
+ - - - {{ 'labels.inputs.PREVIEW' | translate }} - - - - } - + + + + + Interest Rate Chart + +
+ @if (recurringDepositsAccountProductTemplate) { + + + } + +
+ + + +
+
+ + + + + + + {{ 'labels.inputs.PREVIEW' | translate }} + +
+ @if (recurringDepositsAccountProductTemplate) { + + + } + +
+ + + + +
+
+ +
diff --git a/src/app/deposits/recurring-deposits/create-recurring-deposits-account/create-recurring-deposits-account.component.scss b/src/app/deposits/recurring-deposits/create-recurring-deposits-account/create-recurring-deposits-account.component.scss index 684642c73..65ad11f5c 100644 --- a/src/app/deposits/recurring-deposits/create-recurring-deposits-account/create-recurring-deposits-account.component.scss +++ b/src/app/deposits/recurring-deposits/create-recurring-deposits-account/create-recurring-deposits-account.component.scss @@ -6,14 +6,165 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -:host ::ng-deep mat-stepper { - background: transparent; +$navy: #0d1b2a; +$blue: #1e88e5; +$blue-d: #1e40af; +$indigo: #4f46e5; +$border: #e2e8f0; - .mat-step-content { - overflow: visible !important; +.cra-container { + max-width: 1180px; + margin: 0 auto; + padding: 20px 24px; +} + +/* ─── Hero header (matches Nexora pages) ────────────────────────────── */ +.cra-header { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 16px; + + &__icon { + width: 44px; + height: 44px; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 12px; + background: linear-gradient(135deg, $blue 0%, $indigo 100%); + color: #fff; + font-size: 18px; + box-shadow: 0 2px 8px rgb(29 78 216 / 25%); + flex-shrink: 0; + } + + &__title { + margin: 0; + font-size: 20px; + font-weight: 800; + color: $navy; + line-height: 1.1; + letter-spacing: 0.02em; + } + + &__sub { + margin-top: 2px; + font-size: 12.5px; + color: #64748b; } } -:host ::ng-deep mat-step-content { - overflow: visible !important; +/* ─── Wizard tab strip ──────────────────────────────────────────────── */ +.cra-tabs { + background: #fff; + border: 1px solid $border; + border-radius: 14px; + box-shadow: 0 1px 3px rgb(15 23 42 / 4%); + overflow: hidden; + + ::ng-deep { + .mat-mdc-tab-header { + background: #f8fafc; + border-bottom: 1px solid $border; + } + + .mat-mdc-tab { + min-width: 140px; + height: 50px; + padding: 0 22px; + font-size: 13px !important; + font-weight: 600 !important; + letter-spacing: 0.01em; + color: #475569 !important; + opacity: 1 !important; + } + + .mat-mdc-tab:hover:not(.mdc-tab--active, .mat-mdc-tab-disabled) { + background: rgb(30 64 175 / 5%); + color: $navy !important; + } + + .mat-mdc-tab.mdc-tab--active { + .mdc-tab__text-label { + color: $blue-d !important; + font-weight: 700 !important; + } + } + + /* Active-tab underline indicator */ + .mdc-tab-indicator__content--underline { + border-color: $blue-d !important; + border-top-width: 3px !important; + } + + .mat-mdc-tab.mat-mdc-tab-disabled { + opacity: 0.45 !important; + cursor: not-allowed; + } + + .mat-mdc-tab-body-wrapper { + min-height: 320px; + } + + .mat-mdc-tab-body, + .mat-mdc-tab-body-content { + overflow: visible !important; + } + } +} + +.cra-tab__icon { + margin-right: 8px; + font-size: 13px; +} + +/* ─── Tab body + action bar ─────────────────────────────────────────── */ +.cra-tab-body { + padding: 24px; + + @media (width <= 768px) { + padding: 16px; + } +} + +.cra-actions { + display: flex; + align-items: center; + gap: 12px; + margin-top: 24px; + padding-top: 16px; + border-top: 1px solid #f1f5f9; + + &__spacer { + flex: 1; + } + + button { + height: 40px !important; + border-radius: 10px !important; + font-weight: 600 !important; + padding: 0 18px !important; + } +} + +/* Utility helpers */ +.m-l-10 { + margin-left: 8px; +} + +.m-r-10 { + margin-right: 8px; +} + +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; } diff --git a/src/app/deposits/recurring-deposits/create-recurring-deposits-account/create-recurring-deposits-account.component.ts b/src/app/deposits/recurring-deposits/create-recurring-deposits-account/create-recurring-deposits-account.component.ts index 9596b2925..8ab2a000c 100644 --- a/src/app/deposits/recurring-deposits/create-recurring-deposits-account/create-recurring-deposits-account.component.ts +++ b/src/app/deposits/recurring-deposits/create-recurring-deposits-account/create-recurring-deposits-account.component.ts @@ -19,14 +19,7 @@ import { AlertService } from 'app/core/alert/alert.service'; /** Step Components */ import { RecurringDepositsAccountDetailsStepComponent } from '../recurring-deposits-account-stepper/recurring-deposits-account-details-step/recurring-deposits-account-details-step.component'; import { Dates } from 'app/core/utils/dates'; -import { - MatStepper, - MatStepperIcon, - MatStep, - MatStepLabel, - MatStepperNext, - MatStepperPrevious -} from '@angular/material/stepper'; +import { MatTabsModule } from '@angular/material/tabs'; import { FaIconComponent } from '@fortawesome/angular-fontawesome'; import { RecurringDepositsAccountCurrencyStepComponent } from '../recurring-deposits-account-stepper/recurring-deposits-account-currency-step/recurring-deposits-account-currency-step.component'; import { RecurringDepositsAccountInterestRateChartStepComponent } from '../recurring-deposits-account-stepper/recurring-deposits-account-interest-rate-chart-step/recurring-deposits-account-interest-rate-chart-step.component'; @@ -42,13 +35,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module'; styleUrls: ['./create-recurring-deposits-account.component.scss'], imports: [ ...STANDALONE_SHARED_IMPORTS, - MatStepper, - MatStepperIcon, - MatStepperNext, - MatStepperPrevious, + MatTabsModule, FaIconComponent, - MatStep, - MatStepLabel, RecurringDepositsAccountDetailsStepComponent, RecurringDepositsAccountCurrencyStepComponent, RecurringDepositsAccountInterestRateChartStepComponent, @@ -77,6 +65,10 @@ export class CreateRecurringDepositsAccountComponent { recurringDepositsAccountTemplate: any; /** Recurring Deposit Account Product Template */ recurringDepositsAccountProductTemplate: any; + /** Currently visible wizard tab (0-indexed). */ + selectedTabIndex = 0; + /** Total wizard tabs — Product, Currency, Chart, Preview. */ + private readonly totalTabs = 4; /** Active CBS base interest rate versions */ cbsBaseRates: any[] = []; /** Selected tenure value and frequency from calculator */ @@ -92,6 +84,18 @@ export class CreateRecurringDepositsAccountComponent { }); } + next(): void { + if (this.selectedTabIndex < this.totalTabs - 1) { + this.selectedTabIndex += 1; + } + } + + prev(): void { + if (this.selectedTabIndex > 0) { + this.selectedTabIndex -= 1; + } + } + /** * Sets recurring deposits account product template. * Also fetches the active CBS base interest rate chart. diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-currency-step/recurring-deposits-account-currency-step.component.ts b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-currency-step/recurring-deposits-account-currency-step.component.ts index 7a8c05a53..7efb8a4af 100644 --- a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-currency-step/recurring-deposits-account-currency-step.component.ts +++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-currency-step/recurring-deposits-account-currency-step.component.ts @@ -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}%`; diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-interest-rate-chart-step/recurring-deposits-account-interest-rate-chart-step.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-interest-rate-chart-step/recurring-deposits-account-interest-rate-chart-step.component.html index dcc43e9b7..7fa51c3e8 100644 --- a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-interest-rate-chart-step/recurring-deposits-account-interest-rate-chart-step.component.html +++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-interest-rate-chart-step/recurring-deposits-account-interest-rate-chart-step.component.html @@ -22,6 +22,10 @@
+ + + {{ isActive ? 'Active' : 'Inactive' }} +
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-interest-rate-chart-step/recurring-deposits-account-interest-rate-chart-step.component.scss b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-interest-rate-chart-step/recurring-deposits-account-interest-rate-chart-step.component.scss index eef3b5fea..17f2808e8 100644 --- a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-interest-rate-chart-step/recurring-deposits-account-interest-rate-chart-step.component.scss +++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-interest-rate-chart-step/recurring-deposits-account-interest-rate-chart-step.component.scss @@ -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 ──────────────────────────────────────────────────────── diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-interest-rate-chart-step/recurring-deposits-account-interest-rate-chart-step.component.ts b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-interest-rate-chart-step/recurring-deposits-account-interest-rate-chart-step.component.ts index 06b42e2eb..55678ab38 100644 --- a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-interest-rate-chart-step/recurring-deposits-account-interest-rate-chart-step.component.ts +++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-interest-rate-chart-step/recurring-deposits-account-interest-rate-chart-step.component.ts @@ -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 !!( diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.html index 43caebeae..2ff42a561 100644 --- a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.html +++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.html @@ -853,15 +853,18 @@ }
-
- - - -
+@if (!hideButtons) { +
+ + + +
+} diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.scss b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.scss index ffddf77b4..ccc6b6f26 100644 --- a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.scss +++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.scss @@ -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; +} diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.ts b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.ts index 4b6e03013..ba4387795 100644 --- a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.ts +++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.ts @@ -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[] = []; diff --git a/src/app/savings/savings-account-stepper/savings-account-currency-step/savings-account-currency-step.component.ts b/src/app/savings/savings-account-stepper/savings-account-currency-step/savings-account-currency-step.component.ts index 85161bf35..0b6005861 100644 --- a/src/app/savings/savings-account-stepper/savings-account-currency-step/savings-account-currency-step.component.ts +++ b/src/app/savings/savings-account-stepper/savings-account-currency-step/savings-account-currency-step.component.ts @@ -58,6 +58,13 @@ export class SavingsAccountCurrencyStepComponent { 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}%`; diff --git a/src/app/savings/savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component.scss b/src/app/savings/savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component.scss index a52f1780f..cffbf47eb 100644 --- a/src/app/savings/savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component.scss +++ b/src/app/savings/savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component.scss @@ -33,6 +33,10 @@ &__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; } diff --git a/src/environments/.env.ts b/src/environments/.env.ts index c8f9fe9b3..d1e461b73 100644 --- a/src/environments/.env.ts +++ b/src/environments/.env.ts @@ -9,8 +9,8 @@ /* tslint:disable */ export default { 'mifos_x': { - 'version': '260521', - 'hash': '846b2484' + 'version': '260522', + 'hash': '64c76a98' }, 'allow_switching_backend_instance': true };