feat: add nominee, auto-debit, charges UI for SB/CA/FD/RD accounts; enforce required fields

- SB/CA/FD/RD Currency Step: add Nomination Facility toggle with multi-nominee form
  (NomineeFormComponent), auto-debit facility toggle, dormancy alert panel
- SB/CA/FD/RD Preview Step: display nominees list, auto-debit status, dormancy info
- FD/RD create component: validate Deposit Tenure, Monthly Installment (RD), and
  Customer Segment are filled before submit; show clear alert messages on missing fields
- FD account details step: remove duplicate Currency section (already shown in
  Currency & Account Status Configuration step)
- CA/SB create component: handle duplicate externalId API error with user-friendly alert
  instead of raw error display

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Nitesh Yadav
2026-05-20 08:08:08 +05:30
co-authored by Claude Sonnet 4.6
parent 37ac15f42c
commit 3df7d100df
29 changed files with 1658 additions and 443 deletions
@@ -98,7 +98,7 @@
[currentAccountTermsForm]="currentAccountTermsForm" [currentAccountTermsForm]="currentAccountTermsForm"
[currentAccount]="currentAccount" [currentAccount]="currentAccount"
[currentAccountDigital]="currentAccountDigital" [currentAccountDigital]="currentAccountDigital"
[currentAccountNominee]="currentAccountNominee" [currentAccountNominees]="currentAccountCurrencyStep?.nominees ?? []"
[currentAccountCurrencyFlags]="currentAccountCurrencyFlags" [currentAccountCurrencyFlags]="currentAccountCurrencyFlags"
(submitEvent)="submit()" (submitEvent)="submit()"
> >
@@ -118,10 +118,6 @@ export class CreateCurrentAccountComponent {
return this.currentAccountDigitalStep?.currentAccountDigital ?? null; return this.currentAccountDigitalStep?.currentAccountDigital ?? null;
} }
get currentAccountNominee() {
return this.currentAccountCurrencyStep?.liveNomineeData ?? null;
}
get currentAccountCurrencyFlags() { get currentAccountCurrencyFlags() {
return { return {
balanceSwapOption: this.currentAccountCurrencyStep?.balanceSwapOption ?? false, balanceSwapOption: this.currentAccountCurrencyStep?.balanceSwapOption ?? false,
@@ -142,6 +138,23 @@ export class CreateCurrentAccountComponent {
}); });
return; return;
} }
if (
this.currentAccountProductTemplate?.nominationFacility &&
(this.currentAccountCurrencyStep?.nominees ?? []).length === 0
) {
this.alertService.alert({
type: 'Error',
message: 'Nomination Facility is enabled for this product. Please add at least one nominee before submitting.'
});
return;
}
if (this.currentAccountProductTemplate?.introducerRequired && !this.currentAccountDetailsStep.introducerId) {
this.alertService.alert({
type: 'Error',
message: 'Introducer is required for this product. Please select an introducer before submitting.'
});
return;
}
const locale = this.settingsService.language.code; const locale = this.settingsService.language.code;
const dateFormat = this.settingsService.dateFormat; const dateFormat = this.settingsService.dateFormat;
const monthDayFormat = 'dd MMMM'; const monthDayFormat = 'dd MMMM';
@@ -185,27 +198,45 @@ export class CreateCurrentAccountComponent {
currentAccount.groupId = this.currentAccountTemplate.groupId; currentAccount.groupId = this.currentAccountTemplate.groupId;
} }
const nominee = this.currentAccountNominee; const nominees = this.currentAccountCurrencyStep?.nominees ?? [];
if (nominee) { if (nominees.length > 0) {
currentAccount.nominee = { currentAccount.nominees = nominees.map((n: any) => ({
nomineeClientId: nominee.nomineeClientId, nomineeClientId: n.nomineeClientId,
nominationType: nominee.nominationType, nominationType: n.nominationType,
relationshipId: nominee.relationshipId, relationshipId: n.relationshipId,
percentageShare: nominee.percentageShare, percentageShare: n.percentageShare,
nomineeIsMinor: nominee.nomineeIsMinor, nomineeIsMinor: n.nomineeIsMinor,
...(nominee.guardianClientId ? { guardianClientId: nominee.guardianClientId } : {}), ...(n.guardianClientId ? { guardianClientId: n.guardianClientId } : {}),
remarks: nominee.remarks remarks: n.remarks
}; }));
} }
this.currentAccountsService.createCurrentAccount(currentAccount).subscribe((response: any) => { this.currentAccountsService.createCurrentAccount(currentAccount).subscribe({
this.router.navigate( next: (response: any) => {
[ this.router.navigate(
'../', [
response.resourceId '../',
], response.resourceId
{ relativeTo: this.route } ],
); { relativeTo: this.route }
);
},
error: (error: any) => {
const errorCode =
error?.error?.errors?.[0]?.userMessageGlobalisationCode ?? error?.error?.userMessageGlobalisationCode;
if (errorCode === 'error.msg.savings.account.duplicate.product.for.client') {
this.alertService.alert({
type: 'Error',
message:
'This client already has an active Current account with the selected product. Please choose a different product.'
});
} else if (errorCode === 'error.msg.savings.account.duplicate.externalid') {
this.alertService.alert({
type: 'Error',
message: 'An account with this External ID already exists. Please use a unique External ID.'
});
}
}
}); });
} }
} }
@@ -73,11 +73,63 @@
</span> </span>
</div> </div>
@if (currentAccountProductTemplate?.nominationFacility) { @if (currentAccountProductTemplate?.nominationFacility) {
<mifosx-nominee-form <div class="nom-section">
[primaryClientId]="primaryClientId" <div class="nom-header">
[showActions]="false" <div class="nom-header__left"><i class="fas fa-user-friends"></i><span>Nominees</span></div>
(nomineeChange)="onNomineeChange($event)" <span class="nom-share-badge" [class.nom-share-badge--full]="totalShare === 100"
></mifosx-nominee-form> >{{ totalShare }}% / 100%</span
>
</div>
@if (nominees.length > 0) {
<div class="nom-list">
@for (nom of nominees; track nom.nomineeClientId; let i = $index) {
<div class="nom-item">
<div class="nom-item__info">
<span class="nom-item__name">{{ nom.nomineeDisplayName }}</span>
<span class="nom-item__meta">{{ nom.relationshipName }} &bull; {{ nom.percentageShare }}% share</span>
@if (nom.nomineeIsMinor) {
<span class="nom-item__minor">Minor — Guardian: {{ nom.guardianDisplayName }}</span>
}
</div>
<button type="button" class="nom-remove-btn" (click)="removeNominee(i)">
<i class="fas fa-times"></i>
</button>
</div>
}
</div>
}
@if (canAddMore && !showNomineeForm) {
<button type="button" class="nom-add-btn" (click)="showNomineeForm = true">
<i class="fas fa-plus"></i> Add Nominee
@if (nominees.length > 0) {
<span class="nom-add-btn__hint">({{ remainingShare }}% remaining)</span>
}
</button>
}
@if (totalShare === 100) {
<div class="nom-complete"><i class="fas fa-check-circle"></i> Nominee allocation complete (100%)</div>
}
@if (showNomineeForm) {
<div class="nom-form-wrap">
@if (nomineeError) {
<div class="nom-error"><i class="fas fa-exclamation-triangle"></i> {{ nomineeError }}</div>
}
<mifosx-nominee-form
[primaryClientId]="primaryClientId"
[showActions]="false"
(nomineeChange)="onNomineeChange($event)"
></mifosx-nominee-form>
<div class="nom-form-actions">
<button type="button" class="nom-cancel-btn" (click)="showNomineeForm = false; nomineeError = ''">
Cancel
</button>
<button type="button" class="nom-confirm-btn" (click)="addNominee()">
<i class="fas fa-plus"></i> Add
</button>
</div>
</div>
}
</div>
} }
</div> </div>
</div> </div>
@@ -128,3 +128,215 @@ $gray-900: #202124;
color: #0369a1; color: #0369a1;
} }
} }
/* ── Nominees ── */
.nom-section {
margin-top: 16px;
border: 1px solid #e2e8f0;
border-radius: 10px;
overflow: hidden;
}
.nom-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
&__left {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 700;
color: #334155;
i {
color: #1d4ed8;
font-size: 12px;
}
}
}
.nom-share-badge {
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 999px;
background: #e0e7ff;
color: #3730a3;
border: 1px solid #c7d2fe;
&--full {
background: #dcfce7;
color: #15803d;
border-color: #bbf7d0;
}
}
.nom-list {
display: flex;
flex-direction: column;
}
.nom-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
border-bottom: 1px dashed #e2e8f0;
&__info {
display: flex;
flex-direction: column;
gap: 2px;
}
&__name {
font-size: 13px;
font-weight: 600;
color: #0f172a;
}
&__meta {
font-size: 11px;
color: #64748b;
}
&__minor {
font-size: 11px;
color: #b45309;
}
}
.nom-remove-btn {
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid #fecaca;
background: #fee2e2;
color: #b91c1c;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
flex-shrink: 0;
transition: background 0.15s;
&:hover {
background: #fecaca;
}
}
.nom-add-btn {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 10px 16px;
background: #fff;
border: none;
border-top: 1px dashed #e2e8f0;
color: #1d4ed8;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s;
i {
font-size: 11px;
}
&__hint {
font-size: 11px;
color: #64748b;
margin-left: 4px;
}
&:hover {
background: #eff6ff;
}
}
.nom-complete {
padding: 10px 16px;
font-size: 12px;
font-weight: 600;
color: #15803d;
background: #f0fdf4;
border-top: 1px solid #bbf7d0;
i {
margin-right: 6px;
}
}
.nom-form-wrap {
padding: 16px;
background: #f8fafc;
border-top: 1px solid #e2e8f0;
}
.nom-error {
padding: 8px 12px;
margin-bottom: 12px;
background: #fee2e2;
border: 1px solid #fecaca;
border-radius: 6px;
color: #b91c1c;
font-size: 12px;
font-weight: 600;
i {
margin-right: 6px;
}
}
.nom-form-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
margin-top: 14px;
}
.nom-cancel-btn {
padding: 7px 18px;
border-radius: 7px;
border: 1px solid #e2e8f0;
background: #fff;
color: #64748b;
font-size: 13px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
&:hover {
background: #f1f5f9;
}
}
.nom-confirm-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 7px 18px;
border-radius: 7px;
border: none;
background: #1d4ed8;
color: #fff;
font-size: 13px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
i {
font-size: 11px;
}
&:hover {
background: #1e40af;
}
}
@@ -30,7 +30,10 @@ export class CurrentAccountCurrencyStepComponent implements OnChanges {
@Input() primaryClientId: number | null = null; @Input() primaryClientId: number | null = null;
@ViewChild(NomineeFormComponent) nomineeFormComp: NomineeFormComponent; @ViewChild(NomineeFormComponent) nomineeFormComp: NomineeFormComponent;
nomineeData: any = null; nominees: any[] = [];
pendingNominee: any = null;
showNomineeForm = false;
nomineeError = '';
// Editable feature toggles (pre-filled from product, overridable by user) // Editable feature toggles (pre-filled from product, overridable by user)
balanceSwapOption = false; balanceSwapOption = false;
@@ -46,21 +49,53 @@ export class CurrentAccountCurrencyStepComponent implements OnChanges {
} }
} }
get totalShare(): number {
return this.nominees.reduce((sum, n) => sum + (+n.percentageShare || 0), 0);
}
get remainingShare(): number {
return 100 - this.totalShare;
}
get canAddMore(): boolean {
return this.totalShare < 100;
}
onNomineeChange(event: any): void { onNomineeChange(event: any): void {
this.nomineeData = event; this.pendingNominee = event;
this.nomineeError = '';
} }
get liveNomineeData(): any { addNominee(): void {
return this.nomineeFormComp?.currentNomineeData ?? this.nomineeData; const data = this.nomineeFormComp?.currentNomineeData ?? this.pendingNominee;
if (!data?.nomineeClientId) {
this.nomineeError = 'Please select a nominee before adding.';
return;
}
if (this.nominees.some((n) => n.nomineeClientId === data.nomineeClientId)) {
this.nomineeError = 'This person is already 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}%`;
return;
}
this.nominees.push({ ...data });
this.pendingNominee = null;
this.showNomineeForm = false;
this.nomineeError = '';
}
removeNominee(index: number): void {
this.nominees.splice(index, 1);
} }
/** Called by parent to collect currency step values */
get currencyStepData() { get currencyStepData() {
return { return {
balanceSwapOption: this.balanceSwapOption, balanceSwapOption: this.balanceSwapOption,
msme: this.msme, msme: this.msme,
autoDebitFacility: this.autoDebitFacility, autoDebitFacility: this.autoDebitFacility
...(this.nomineeData ? { nominee: this.nomineeData } : {})
}; };
} }
} }
@@ -565,78 +565,53 @@
} }
<!-- ══ 6. Nominee Details (if filled) ═══════════════════════════ --> <!-- ══ 6. Nominee Details (if filled) ═══════════════════════════ -->
@if (currentAccountNominee) { @if (currentAccountNominees?.length > 0) {
<div class="preview-section"> <div class="preview-section">
<div class="preview-section__header"> <div class="preview-section__header">
<i class="fas fa-user-shield preview-section__icon"></i> <i class="fas fa-user-shield preview-section__icon"></i>
<span class="preview-section__title">Nominee Details</span> <span class="preview-section__title">Nominee Details</span>
<span class="preview-section__badge">{{ currentAccountNominee?.nominationType || 'DA1' }}</span> <span class="preview-section__badge">{{ currentAccountNominees.length }} Nominee(s)</span>
</div> </div>
<div class="preview-body"> <div class="preview-body">
<div class="preview-grid preview-grid--three"> @for (nom of currentAccountNominees; track nom.nomineeClientId; let i = $index) {
<div class="preview-field"> @if (i > 0) {
<span class="preview-label">Name</span> <hr class="preview-nom-divider" />
<span class="preview-value">{{ currentAccountNominee?.nomineeDisplayName || '—' }}</span> }
<div class="preview-grid preview-grid--three">
<div class="preview-field">
<span class="preview-label">Name</span>
<span class="preview-value">{{ nom.nomineeDisplayName || '—' }}</span>
</div>
<div class="preview-field">
<span class="preview-label">Client ID</span>
<span class="preview-value preview-mono">{{ nom.nomineeClientId || '—' }}</span>
</div>
<div class="preview-field">
<span class="preview-label">Relationship</span>
<span class="preview-value">{{ nom.relationshipName || '—' }}</span>
</div>
<div class="preview-field">
<span class="preview-label">Share %</span>
<span class="preview-value">{{ nom.percentageShare ?? '—' }}%</span>
</div>
<div class="preview-field">
<span class="preview-label">Minor</span>
<span class="preview-value">{{ nom.nomineeIsMinor ? 'Yes' : 'No' }}</span>
</div>
@if (nom.guardianDisplayName) {
<div class="preview-field">
<span class="preview-label">Guardian</span>
<span class="preview-value">{{ nom.guardianDisplayName }}</span>
</div>
}
@if (nom.remarks) {
<div class="preview-field">
<span class="preview-label">Remarks</span>
<span class="preview-value">{{ nom.remarks }}</span>
</div>
}
</div> </div>
<div class="preview-field"> }
<span class="preview-label">Client ID</span>
<span class="preview-value preview-mono">{{ currentAccountNominee?.nomineeClientId || '—' }}</span>
</div>
<div class="preview-field">
<span class="preview-label">Relationship</span>
<span class="preview-value">{{ currentAccountNominee?.relationshipName || '—' }}</span>
</div>
<div class="preview-field">
<span class="preview-label">Share %</span>
<span class="preview-value">{{ currentAccountNominee?.percentageShare ?? '—' }}%</span>
</div>
<div class="preview-field">
<span class="preview-label">Minor</span>
<span class="preview-value">{{ currentAccountNominee?.nomineeIsMinor ? 'Yes' : 'No' }}</span>
</div>
@if (currentAccountNominee?.nomineeDateOfBirth) {
<div class="preview-field">
<span class="preview-label">Date of Birth</span>
<span class="preview-value">{{ currentAccountNominee?.nomineeDateOfBirth | dateFormat }}</span>
</div>
}
@if (currentAccountNominee?.nomineeMobileNo) {
<div class="preview-field">
<span class="preview-label">Mobile No</span>
<span class="preview-value preview-mono">{{ currentAccountNominee?.nomineeMobileNo }}</span>
</div>
}
@if (currentAccountNominee?.nomineeAadhaar) {
<div class="preview-field">
<span class="preview-label">Aadhaar</span>
<span class="preview-value preview-mono">{{ currentAccountNominee?.nomineeAadhaar }}</span>
</div>
}
@if (currentAccountNominee?.nomineePan) {
<div class="preview-field">
<span class="preview-label">PAN</span>
<span class="preview-value preview-mono">{{ currentAccountNominee?.nomineePan }}</span>
</div>
}
@if (currentAccountNominee?.guardianDisplayName) {
<div class="preview-field">
<span class="preview-label">Guardian</span>
<span class="preview-value">{{ currentAccountNominee?.guardianDisplayName }}</span>
</div>
}
@if (currentAccountNominee?.guardianClientId) {
<div class="preview-field">
<span class="preview-label">Guardian Client ID</span>
<span class="preview-value preview-mono">{{ currentAccountNominee?.guardianClientId }}</span>
</div>
}
@if (currentAccountNominee?.remarks) {
<div class="preview-field">
<span class="preview-label">Remarks</span>
<span class="preview-value">{{ currentAccountNominee?.remarks }}</span>
</div>
}
</div>
</div> </div>
</div> </div>
} }
@@ -90,7 +90,7 @@ export class CurrentAccountPreviewStepComponent implements OnChanges {
@Input() currentAccountSettingsForm: any; @Input() currentAccountSettingsForm: any;
@Input() currentAccount: any; @Input() currentAccount: any;
@Input() currentAccountDigital: any; @Input() currentAccountDigital: any;
@Input() currentAccountNominee: any; @Input() currentAccountNominees: any[] = [];
@Input() currentAccountCurrencyFlags: any; @Input() currentAccountCurrencyFlags: any;
@Input() activeClientMembers?: any; @Input() activeClientMembers?: any;
@@ -98,7 +98,7 @@
[fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate" [fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate"
[fixedDepositAccountData]="fixedDepositAccount" [fixedDepositAccountData]="fixedDepositAccount"
[selectedTenure]="selectedTenure" [selectedTenure]="selectedTenure"
[fdNominee]="fdNominee" [fdNominees]="fixedDepositAccountCurrencyStep?.nominees ?? []"
(submitEvent)="submit()" (submitEvent)="submit()"
></mifosx-fixed-deposit-account-preview-step> ></mifosx-fixed-deposit-account-preview-step>
</mat-step> </mat-step>
@@ -138,10 +138,6 @@ export class CreateFixedDepositAccountComponent {
}; };
} }
get fdNominee() {
return this.fixedDepositAccountCurrencyStep?.liveNomineeData ?? null;
}
/** /**
* Submits the fixed deposit form and creates a new fixed deposit account * Submits the fixed deposit form and creates a new fixed deposit account
*/ */
@@ -154,6 +150,27 @@ export class CreateFixedDepositAccountComponent {
}); });
return; return;
} }
if (
this.fixedDepositsAccountProductTemplate?.nominationFacility &&
(this.fixedDepositAccountCurrencyStep?.nominees ?? []).length === 0
) {
this.alertService.alert({
type: 'Error',
message: 'Nomination Facility is enabled for this product. Please add at least one nominee before submitting.'
});
return;
}
if (!this.selectedTenure || !this.selectedTenure.depositPeriod) {
this.alertService.alert({
type: 'Error',
message: 'Please enter the Deposit Tenure and click "Find Rate" before submitting.'
});
return;
}
if (!detailsStep?.selectedCustomerSegment) {
this.alertService.alert({ type: 'Error', message: 'Please select a Customer Segment before submitting.' });
return;
}
const locale = this.settingsService.language.code; const locale = this.settingsService.language.code;
const dateFormat = this.settingsService.dateFormat; const dateFormat = this.settingsService.dateFormat;
const monthDayFormat = 'dd MMMM'; const monthDayFormat = 'dd MMMM';
@@ -227,27 +244,45 @@ export class CreateFixedDepositAccountComponent {
monthDayFormat, monthDayFormat,
locale locale
}; };
const nominee = this.fdNominee; const nominees = this.fixedDepositAccountCurrencyStep?.nominees ?? [];
if (nominee) { if (nominees.length > 0) {
fixedDepositAccount.nominee = { fixedDepositAccount.nominees = nominees.map((n: any) => ({
nomineeClientId: nominee.nomineeClientId, nomineeClientId: n.nomineeClientId,
nominationType: nominee.nominationType, nominationType: n.nominationType,
relationshipId: nominee.relationshipId, relationshipId: n.relationshipId,
percentageShare: nominee.percentageShare, percentageShare: n.percentageShare,
nomineeIsMinor: nominee.nomineeIsMinor, nomineeIsMinor: n.nomineeIsMinor,
...(nominee.guardianClientId ? { guardianClientId: nominee.guardianClientId } : {}), ...(n.guardianClientId ? { guardianClientId: n.guardianClientId } : {}),
remarks: nominee.remarks remarks: n.remarks
}; }));
} }
this.fixedDepositsService.createFixedDepositAccount(fixedDepositAccount).subscribe((response: any) => { this.fixedDepositsService.createFixedDepositAccount(fixedDepositAccount).subscribe({
this.router.navigate( next: (response: any) => {
[ this.router.navigate(
'../', [
response.resourceId '../',
], response.resourceId
{ relativeTo: this.route } ],
); { relativeTo: this.route }
);
},
error: (error: any) => {
const errorCode =
error?.error?.errors?.[0]?.userMessageGlobalisationCode ?? error?.error?.userMessageGlobalisationCode;
if (errorCode === 'error.msg.savings.account.duplicate.product.for.client') {
this.alertService.alert({
type: 'Error',
message:
'This client already has an active Fixed Deposit account with the selected product. Please choose a different product.'
});
} else if (errorCode === 'error.msg.savingsaccount.duplicate.externalId') {
this.alertService.alert({
type: 'Error',
message: 'An account with this External ID already exists. Please use a unique External ID.'
});
}
}
}); });
} }
} }
@@ -58,11 +58,63 @@
<mat-slide-toggle [(ngModel)]="nominationFacility" color="primary"></mat-slide-toggle> <mat-slide-toggle [(ngModel)]="nominationFacility" color="primary"></mat-slide-toggle>
</div> </div>
@if (nominationFacility) { @if (nominationFacility) {
<mifosx-nominee-form <div class="nom-section">
[primaryClientId]="primaryClientId" <div class="nom-header">
[showActions]="false" <div class="nom-header__left"><i class="fas fa-user-friends"></i><span>Nominees</span></div>
(nomineeChange)="onNomineeChange($event)" <span class="nom-share-badge" [class.nom-share-badge--full]="totalShare === 100"
></mifosx-nominee-form> >{{ totalShare }}% / 100%</span
>
</div>
@if (nominees.length > 0) {
<div class="nom-list">
@for (nom of nominees; track nom.nomineeClientId; let i = $index) {
<div class="nom-item">
<div class="nom-item__info">
<span class="nom-item__name">{{ nom.nomineeDisplayName }}</span>
<span class="nom-item__meta">{{ nom.relationshipName }} &bull; {{ nom.percentageShare }}% share</span>
@if (nom.nomineeIsMinor) {
<span class="nom-item__minor">Minor — Guardian: {{ nom.guardianDisplayName }}</span>
}
</div>
<button type="button" class="nom-remove-btn" (click)="removeNominee(i)">
<i class="fas fa-times"></i>
</button>
</div>
}
</div>
}
@if (canAddMore && !showNomineeForm) {
<button type="button" class="nom-add-btn" (click)="showNomineeForm = true">
<i class="fas fa-plus"></i> Add Nominee
@if (nominees.length > 0) {
<span class="nom-add-btn__hint">({{ remainingShare }}% remaining)</span>
}
</button>
}
@if (totalShare === 100) {
<div class="nom-complete"><i class="fas fa-check-circle"></i> Nominee allocation complete (100%)</div>
}
@if (showNomineeForm) {
<div class="nom-form-wrap">
@if (nomineeError) {
<div class="nom-error"><i class="fas fa-exclamation-triangle"></i> {{ nomineeError }}</div>
}
<mifosx-nominee-form
[primaryClientId]="primaryClientId"
[showActions]="false"
(nomineeChange)="onNomineeChange($event)"
></mifosx-nominee-form>
<div class="nom-form-actions">
<button type="button" class="nom-cancel-btn" (click)="showNomineeForm = false; nomineeError = ''">
Cancel
</button>
<button type="button" class="nom-confirm-btn" (click)="addNominee()">
<i class="fas fa-plus"></i> Add
</button>
</div>
</div>
}
</div>
} }
</div> </div>
</div> </div>
@@ -122,3 +122,215 @@
font-size: 0.75rem; font-size: 0.75rem;
} }
} }
/* ── Nominees ── */
.nom-section {
margin-top: 16px;
border: 1px solid #e2e8f0;
border-radius: 10px;
overflow: hidden;
}
.nom-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
&__left {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 700;
color: #334155;
i {
color: #1d4ed8;
font-size: 12px;
}
}
}
.nom-share-badge {
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 999px;
background: #e0e7ff;
color: #3730a3;
border: 1px solid #c7d2fe;
&--full {
background: #dcfce7;
color: #15803d;
border-color: #bbf7d0;
}
}
.nom-list {
display: flex;
flex-direction: column;
}
.nom-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
border-bottom: 1px dashed #e2e8f0;
&__info {
display: flex;
flex-direction: column;
gap: 2px;
}
&__name {
font-size: 13px;
font-weight: 600;
color: #0f172a;
}
&__meta {
font-size: 11px;
color: #64748b;
}
&__minor {
font-size: 11px;
color: #b45309;
}
}
.nom-remove-btn {
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid #fecaca;
background: #fee2e2;
color: #b91c1c;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
flex-shrink: 0;
transition: background 0.15s;
&:hover {
background: #fecaca;
}
}
.nom-add-btn {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 10px 16px;
background: #fff;
border: none;
border-top: 1px dashed #e2e8f0;
color: #1d4ed8;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s;
i {
font-size: 11px;
}
&__hint {
font-size: 11px;
color: #64748b;
margin-left: 4px;
}
&:hover {
background: #eff6ff;
}
}
.nom-complete {
padding: 10px 16px;
font-size: 12px;
font-weight: 600;
color: #15803d;
background: #f0fdf4;
border-top: 1px solid #bbf7d0;
i {
margin-right: 6px;
}
}
.nom-form-wrap {
padding: 16px;
background: #f8fafc;
border-top: 1px solid #e2e8f0;
}
.nom-error {
padding: 8px 12px;
margin-bottom: 12px;
background: #fee2e2;
border: 1px solid #fecaca;
border-radius: 6px;
color: #b91c1c;
font-size: 12px;
font-weight: 600;
i {
margin-right: 6px;
}
}
.nom-form-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
margin-top: 14px;
}
.nom-cancel-btn {
padding: 7px 18px;
border-radius: 7px;
border: 1px solid #e2e8f0;
background: #fff;
color: #64748b;
font-size: 13px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
&:hover {
background: #f1f5f9;
}
}
.nom-confirm-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 7px 18px;
border-radius: 7px;
border: none;
background: #1d4ed8;
color: #fff;
font-size: 13px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
i {
font-size: 11px;
}
&:hover {
background: #1e40af;
}
}
@@ -30,13 +30,14 @@ export class FixedDepositAccountCurrencyStepComponent implements OnChanges {
@Input() primaryClientId: number | null = null; @Input() primaryClientId: number | null = null;
@ViewChild(NomineeFormComponent) nomineeFormComp: NomineeFormComponent; @ViewChild(NomineeFormComponent) nomineeFormComp: NomineeFormComponent;
nomineeData: any = null; nominees: any[] = [];
pendingNominee: any = null;
showNomineeForm = false;
nomineeError = '';
autoDebitFacility = false; autoDebitFacility = false;
nominationFacility = false; nominationFacility = false;
// Editable feature toggles (pre-filled from product, overridable by user)
ngOnChanges(changes: SimpleChanges): void { ngOnChanges(changes: SimpleChanges): void {
if (changes['fixedDepositsAccountProductTemplate']?.currentValue) { if (changes['fixedDepositsAccountProductTemplate']?.currentValue) {
const pt = changes['fixedDepositsAccountProductTemplate'].currentValue; const pt = changes['fixedDepositsAccountProductTemplate'].currentValue;
@@ -45,20 +46,52 @@ export class FixedDepositAccountCurrencyStepComponent implements OnChanges {
} }
} }
get totalShare(): number {
return this.nominees.reduce((sum, n) => sum + (+n.percentageShare || 0), 0);
}
get remainingShare(): number {
return 100 - this.totalShare;
}
get canAddMore(): boolean {
return this.totalShare < 100;
}
onNomineeChange(event: any): void { onNomineeChange(event: any): void {
this.nomineeData = event; this.pendingNominee = event;
this.nomineeError = '';
} }
get liveNomineeData(): any { addNominee(): void {
return this.nomineeFormComp?.currentNomineeData ?? this.nomineeData; const data = this.nomineeFormComp?.currentNomineeData ?? this.pendingNominee;
if (!data?.nomineeClientId) {
this.nomineeError = 'Please select a nominee before adding.';
return;
}
if (this.nominees.some((n) => n.nomineeClientId === data.nomineeClientId)) {
this.nomineeError = 'This person is already 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}%`;
return;
}
this.nominees.push({ ...data });
this.pendingNominee = null;
this.showNomineeForm = false;
this.nomineeError = '';
}
removeNominee(index: number): void {
this.nominees.splice(index, 1);
} }
/** Called by parent to collect currency step values */
get currencyStepData() { get currencyStepData() {
return { return {
autoDebitFacility: this.autoDebitFacility, autoDebitFacility: this.autoDebitFacility,
nominationFacility: this.nominationFacility, nominationFacility: this.nominationFacility
...(this.nomineeData ? { nominee: this.nomineeData } : {})
}; };
} }
} }
@@ -129,31 +129,6 @@
</div> </div>
</div> </div>
<!-- ══ Currency (read-only) ════════════════════════════════════ -->
<div class="rad-section rad-section--mt">
<div class="rad-section__header">
<i class="fas fa-coins"></i>
<h3>Currency</h3>
<span class="rad-badge">From Product</span>
</div>
<div class="rad-grid rad-grid--classification">
<mat-form-field appearance="outline" class="rad-field">
<mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
<input matInput [value]="currencyName" readonly />
</mat-form-field>
<mat-form-field appearance="outline" class="rad-field">
<mat-label>{{ 'labels.inputs.Decimal Places' | translate }}</mat-label>
<input matInput [value]="decimalPlaces" readonly />
</mat-form-field>
<mat-form-field appearance="outline" class="rad-field">
<mat-label>{{ 'labels.inputs.Currency In Multiples Of' | translate }}</mat-label>
<input matInput [value]="inMultiplesOf" readonly />
</mat-form-field>
</div>
</div>
<!-- ══ Deposit Account Link ══════════════════════════════════════════ --> <!-- ══ Deposit Account Link ══════════════════════════════════════════ -->
@if (productTemplate?.shareLinkingEnabled) { @if (productTemplate?.shareLinkingEnabled) {
<div class="dal-card"> <div class="dal-card">
@@ -384,78 +384,53 @@
} }
<!-- ══ 2c. Nominee Details ══════════════════════════════════════ --> <!-- ══ 2c. Nominee Details ══════════════════════════════════════ -->
@if (fdNominee) { @if (fdNominees?.length > 0) {
<div class="preview-section"> <div class="preview-section">
<div class="preview-section__header"> <div class="preview-section__header">
<i class="fas fa-user-shield preview-section__icon"></i> <i class="fas fa-user-shield preview-section__icon"></i>
<span class="preview-section__title">Nominee Details</span> <span class="preview-section__title">Nominee Details</span>
<span class="preview-section__badge">{{ fdNominee?.nominationType || 'DA1' }}</span> <span class="preview-section__badge">{{ fdNominees.length }} Nominee(s)</span>
</div> </div>
<div class="preview-body"> <div class="preview-body">
<div class="preview-grid preview-grid--three"> @for (nom of fdNominees; track nom.nomineeClientId; let i = $index) {
<div class="preview-field"> @if (i > 0) {
<span class="preview-label">Name</span> <hr class="preview-nom-divider" />
<span class="preview-value">{{ fdNominee?.nomineeDisplayName || '—' }}</span> }
<div class="preview-grid preview-grid--three">
<div class="preview-field">
<span class="preview-label">Name</span>
<span class="preview-value">{{ nom.nomineeDisplayName || '—' }}</span>
</div>
<div class="preview-field">
<span class="preview-label">Client ID</span>
<span class="preview-value preview-mono">{{ nom.nomineeClientId || '—' }}</span>
</div>
<div class="preview-field">
<span class="preview-label">Relationship</span>
<span class="preview-value">{{ nom.relationshipName || '—' }}</span>
</div>
<div class="preview-field">
<span class="preview-label">Share %</span>
<span class="preview-value">{{ nom.percentageShare ?? '—' }}%</span>
</div>
<div class="preview-field">
<span class="preview-label">Minor</span>
<span class="preview-value">{{ nom.nomineeIsMinor ? 'Yes' : 'No' }}</span>
</div>
@if (nom.guardianDisplayName) {
<div class="preview-field">
<span class="preview-label">Guardian</span>
<span class="preview-value">{{ nom.guardianDisplayName }}</span>
</div>
}
@if (nom.remarks) {
<div class="preview-field">
<span class="preview-label">Remarks</span>
<span class="preview-value">{{ nom.remarks }}</span>
</div>
}
</div> </div>
<div class="preview-field"> }
<span class="preview-label">Client ID</span>
<span class="preview-value preview-mono">{{ fdNominee?.nomineeClientId || '—' }}</span>
</div>
<div class="preview-field">
<span class="preview-label">Relationship</span>
<span class="preview-value">{{ fdNominee?.relationshipName || '—' }}</span>
</div>
<div class="preview-field">
<span class="preview-label">Share %</span>
<span class="preview-value">{{ fdNominee?.percentageShare ?? '—' }}%</span>
</div>
<div class="preview-field">
<span class="preview-label">Minor</span>
<span class="preview-value">{{ fdNominee?.nomineeIsMinor ? 'Yes' : 'No' }}</span>
</div>
@if (fdNominee?.nomineeDateOfBirth) {
<div class="preview-field">
<span class="preview-label">Date of Birth</span>
<span class="preview-value">{{ fdNominee?.nomineeDateOfBirth | dateFormat }}</span>
</div>
}
@if (fdNominee?.nomineeMobileNo) {
<div class="preview-field">
<span class="preview-label">Mobile No</span>
<span class="preview-value preview-mono">{{ fdNominee?.nomineeMobileNo }}</span>
</div>
}
@if (fdNominee?.nomineeAadhaar) {
<div class="preview-field">
<span class="preview-label">Aadhaar</span>
<span class="preview-value preview-mono">{{ fdNominee?.nomineeAadhaar }}</span>
</div>
}
@if (fdNominee?.nomineePan) {
<div class="preview-field">
<span class="preview-label">PAN</span>
<span class="preview-value preview-mono">{{ fdNominee?.nomineePan }}</span>
</div>
}
@if (fdNominee?.guardianDisplayName) {
<div class="preview-field">
<span class="preview-label">Guardian</span>
<span class="preview-value">{{ fdNominee?.guardianDisplayName }}</span>
</div>
}
@if (fdNominee?.guardianClientId) {
<div class="preview-field">
<span class="preview-label">Guardian Client ID</span>
<span class="preview-value preview-mono">{{ fdNominee?.guardianClientId }}</span>
</div>
}
@if (fdNominee?.remarks) {
<div class="preview-field">
<span class="preview-label">Remarks</span>
<span class="preview-value">{{ fdNominee?.remarks }}</span>
</div>
}
</div>
</div> </div>
</div> </div>
} }
@@ -76,7 +76,7 @@ export class FixedDepositAccountPreviewStepComponent implements OnChanges {
@Input() fixedDepositsAccountProductTemplate: any; @Input() fixedDepositsAccountProductTemplate: any;
/** Fixed Deposits Account Data */ /** Fixed Deposits Account Data */
@Input() fixedDepositAccountData: any; @Input() fixedDepositAccountData: any;
@Input() fdNominee: any = null; @Input() fdNominees: any[] = [];
/** Tenure selected from the interest rate chart step (includes pre-calculated maturity if user used calculator) */ /** Tenure selected from the interest rate chart step (includes pre-calculated maturity if user used calculator) */
@Input() selectedTenure: { @Input() selectedTenure: {
depositPeriod: number; depositPeriod: number;
@@ -98,7 +98,7 @@
[recurringDepositsAccountTemplate]="recurringDepositsAccountTemplate" [recurringDepositsAccountTemplate]="recurringDepositsAccountTemplate"
[recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate" [recurringDepositsAccountProductTemplate]="recurringDepositsAccountProductTemplate"
[recurringDepositAccountData]="recurringDepositAccountData" [recurringDepositAccountData]="recurringDepositAccountData"
[rdNominee]="rdNominee" [rdNominees]="recurringDepositsAccountCurrencyStep?.nominees ?? []"
[rdCurrencyFlags]="rdCurrencyFlags" [rdCurrencyFlags]="rdCurrencyFlags"
[rdTenureDays]="rdTenureDays" [rdTenureDays]="rdTenureDays"
[rdApplicableSlab]="rdApplicableSlab" [rdApplicableSlab]="rdApplicableSlab"
@@ -121,10 +121,6 @@ export class CreateRecurringDepositsAccountComponent {
}; };
} }
get rdNominee() {
return this.recurringDepositsAccountCurrencyStep?.liveNomineeData ?? null;
}
get rdTenureDays(): number | null { get rdTenureDays(): number | null {
return this.recurringDepositsAccountChartStep?.matchResult?.tenureDays ?? null; return this.recurringDepositsAccountChartStep?.matchResult?.tenureDays ?? null;
} }
@@ -167,6 +163,34 @@ export class CreateRecurringDepositsAccountComponent {
}); });
return; return;
} }
if (
this.recurringDepositsAccountProductTemplate?.nominationFacility &&
(this.recurringDepositsAccountCurrencyStep?.nominees ?? []).length === 0
) {
this.alertService.alert({
type: 'Error',
message: 'Nomination Facility is enabled for this product. Please add at least one nominee before submitting.'
});
return;
}
if (!this.selectedTenureValue || this.selectedTenureFrequencyId === null) {
this.alertService.alert({
type: 'Error',
message: 'Please enter the Deposit Tenure and click "Find Rate" before submitting.'
});
return;
}
if (!this.selectedDepositAmount || this.selectedDepositAmount <= 0) {
this.alertService.alert({
type: 'Error',
message: 'Please enter the Monthly Installment amount and click "Find Rate" before submitting.'
});
return;
}
if (!detailsStep?.selectedCustomerSegment) {
this.alertService.alert({ type: 'Error', message: 'Please select a Customer Segment before submitting.' });
return;
}
const locale = this.settingsService.language.code; const locale = this.settingsService.language.code;
const dateFormat = this.settingsService.dateFormat; const dateFormat = this.settingsService.dateFormat;
const monthDayFormat = 'dd MMMM'; const monthDayFormat = 'dd MMMM';
@@ -259,27 +283,45 @@ export class CreateRecurringDepositsAccountComponent {
recurringDepositAccount.mandatoryRecommendedDepositAmount = this.selectedDepositAmount; recurringDepositAccount.mandatoryRecommendedDepositAmount = this.selectedDepositAmount;
} }
const nominee = this.rdNominee; const nominees = this.recurringDepositsAccountCurrencyStep?.nominees ?? [];
if (nominee) { if (nominees.length > 0) {
recurringDepositAccount.nominee = { recurringDepositAccount.nominees = nominees.map((n: any) => ({
nomineeClientId: nominee.nomineeClientId, nomineeClientId: n.nomineeClientId,
nominationType: nominee.nominationType, nominationType: n.nominationType,
relationshipId: nominee.relationshipId, relationshipId: n.relationshipId,
percentageShare: nominee.percentageShare, percentageShare: n.percentageShare,
nomineeIsMinor: nominee.nomineeIsMinor, nomineeIsMinor: n.nomineeIsMinor,
...(nominee.guardianClientId ? { guardianClientId: nominee.guardianClientId } : {}), ...(n.guardianClientId ? { guardianClientId: n.guardianClientId } : {}),
remarks: nominee.remarks remarks: n.remarks
}; }));
} }
this.recurringDepositsService.createRecurringDepositAccount(recurringDepositAccount).subscribe((response: any) => { this.recurringDepositsService.createRecurringDepositAccount(recurringDepositAccount).subscribe({
this.router.navigate( next: (response: any) => {
[ this.router.navigate(
'../', [
response.resourceId '../',
], response.resourceId
{ relativeTo: this.route } ],
); { relativeTo: this.route }
);
},
error: (error: any) => {
const errorCode =
error?.error?.errors?.[0]?.userMessageGlobalisationCode ?? error?.error?.userMessageGlobalisationCode;
if (errorCode === 'error.msg.savings.account.duplicate.product.for.client') {
this.alertService.alert({
type: 'Error',
message:
'This client already has an active Recurring Deposit account with the selected product. Please choose a different product.'
});
} else if (errorCode === 'error.msg.savingsaccount.duplicate.externalId') {
this.alertService.alert({
type: 'Error',
message: 'An account with this External ID already exists. Please use a unique External ID.'
});
}
}
}); });
} }
} }
@@ -60,11 +60,63 @@
</span> </span>
</div> </div>
@if (recurringDepositsAccountProductTemplate?.nominationFacility) { @if (recurringDepositsAccountProductTemplate?.nominationFacility) {
<mifosx-nominee-form <div class="nom-section">
[primaryClientId]="primaryClientId" <div class="nom-header">
[showActions]="false" <div class="nom-header__left"><i class="fas fa-user-friends"></i><span>Nominees</span></div>
(nomineeChange)="onNomineeChange($event)" <span class="nom-share-badge" [class.nom-share-badge--full]="totalShare === 100"
></mifosx-nominee-form> >{{ totalShare }}% / 100%</span
>
</div>
@if (nominees.length > 0) {
<div class="nom-list">
@for (nom of nominees; track nom.nomineeClientId; let i = $index) {
<div class="nom-item">
<div class="nom-item__info">
<span class="nom-item__name">{{ nom.nomineeDisplayName }}</span>
<span class="nom-item__meta">{{ nom.relationshipName }} &bull; {{ nom.percentageShare }}% share</span>
@if (nom.nomineeIsMinor) {
<span class="nom-item__minor">Minor — Guardian: {{ nom.guardianDisplayName }}</span>
}
</div>
<button type="button" class="nom-remove-btn" (click)="removeNominee(i)">
<i class="fas fa-times"></i>
</button>
</div>
}
</div>
}
@if (canAddMore && !showNomineeForm) {
<button type="button" class="nom-add-btn" (click)="showNomineeForm = true">
<i class="fas fa-plus"></i> Add Nominee
@if (nominees.length > 0) {
<span class="nom-add-btn__hint">({{ remainingShare }}% remaining)</span>
}
</button>
}
@if (totalShare === 100) {
<div class="nom-complete"><i class="fas fa-check-circle"></i> Nominee allocation complete (100%)</div>
}
@if (showNomineeForm) {
<div class="nom-form-wrap">
@if (nomineeError) {
<div class="nom-error"><i class="fas fa-exclamation-triangle"></i> {{ nomineeError }}</div>
}
<mifosx-nominee-form
[primaryClientId]="primaryClientId"
[showActions]="false"
(nomineeChange)="onNomineeChange($event)"
></mifosx-nominee-form>
<div class="nom-form-actions">
<button type="button" class="nom-cancel-btn" (click)="showNomineeForm = false; nomineeError = ''">
Cancel
</button>
<button type="button" class="nom-confirm-btn" (click)="addNominee()">
<i class="fas fa-plus"></i> Add
</button>
</div>
</div>
}
</div>
} }
</div> </div>
</div> </div>
@@ -139,3 +139,215 @@ $gray-900: #202124;
color: #0369a1; color: #0369a1;
} }
} }
/* ── Nominees ── */
.nom-section {
margin-top: 16px;
border: 1px solid #e2e8f0;
border-radius: 10px;
overflow: hidden;
}
.nom-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
&__left {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 700;
color: #334155;
i {
color: #1d4ed8;
font-size: 12px;
}
}
}
.nom-share-badge {
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 999px;
background: #e0e7ff;
color: #3730a3;
border: 1px solid #c7d2fe;
&--full {
background: #dcfce7;
color: #15803d;
border-color: #bbf7d0;
}
}
.nom-list {
display: flex;
flex-direction: column;
}
.nom-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
border-bottom: 1px dashed #e2e8f0;
&__info {
display: flex;
flex-direction: column;
gap: 2px;
}
&__name {
font-size: 13px;
font-weight: 600;
color: #0f172a;
}
&__meta {
font-size: 11px;
color: #64748b;
}
&__minor {
font-size: 11px;
color: #b45309;
}
}
.nom-remove-btn {
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid #fecaca;
background: #fee2e2;
color: #b91c1c;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
flex-shrink: 0;
transition: background 0.15s;
&:hover {
background: #fecaca;
}
}
.nom-add-btn {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 10px 16px;
background: #fff;
border: none;
border-top: 1px dashed #e2e8f0;
color: #1d4ed8;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s;
i {
font-size: 11px;
}
&__hint {
font-size: 11px;
color: #64748b;
margin-left: 4px;
}
&:hover {
background: #eff6ff;
}
}
.nom-complete {
padding: 10px 16px;
font-size: 12px;
font-weight: 600;
color: #15803d;
background: #f0fdf4;
border-top: 1px solid #bbf7d0;
i {
margin-right: 6px;
}
}
.nom-form-wrap {
padding: 16px;
background: #f8fafc;
border-top: 1px solid #e2e8f0;
}
.nom-error {
padding: 8px 12px;
margin-bottom: 12px;
background: #fee2e2;
border: 1px solid #fecaca;
border-radius: 6px;
color: #b91c1c;
font-size: 12px;
font-weight: 600;
i {
margin-right: 6px;
}
}
.nom-form-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
margin-top: 14px;
}
.nom-cancel-btn {
padding: 7px 18px;
border-radius: 7px;
border: 1px solid #e2e8f0;
background: #fff;
color: #64748b;
font-size: 13px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
&:hover {
background: #f1f5f9;
}
}
.nom-confirm-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 7px 18px;
border-radius: 7px;
border: none;
background: #1d4ed8;
color: #fff;
font-size: 13px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
i {
font-size: 11px;
}
&:hover {
background: #1e40af;
}
}
@@ -30,9 +30,11 @@ export class RecurringDepositsAccountCurrencyStepComponent implements OnChanges
@Input() primaryClientId: number | null = null; @Input() primaryClientId: number | null = null;
@ViewChild(NomineeFormComponent) nomineeFormComp: NomineeFormComponent; @ViewChild(NomineeFormComponent) nomineeFormComp: NomineeFormComponent;
nomineeData: any = null; nominees: any[] = [];
pendingNominee: any = null;
showNomineeForm = false;
nomineeError = '';
// Editable feature toggles (pre-filled from product, overridable by user)
autoDebitFacility = false; autoDebitFacility = false;
ngOnChanges(changes: SimpleChanges): void { ngOnChanges(changes: SimpleChanges): void {
@@ -42,19 +44,51 @@ export class RecurringDepositsAccountCurrencyStepComponent implements OnChanges
} }
} }
get totalShare(): number {
return this.nominees.reduce((sum, n) => sum + (+n.percentageShare || 0), 0);
}
get remainingShare(): number {
return 100 - this.totalShare;
}
get canAddMore(): boolean {
return this.totalShare < 100;
}
onNomineeChange(event: any): void { onNomineeChange(event: any): void {
this.nomineeData = event; this.pendingNominee = event;
this.nomineeError = '';
} }
get liveNomineeData(): any { addNominee(): void {
return this.nomineeFormComp?.currentNomineeData ?? this.nomineeData; const data = this.nomineeFormComp?.currentNomineeData ?? this.pendingNominee;
if (!data?.nomineeClientId) {
this.nomineeError = 'Please select a nominee before adding.';
return;
}
if (this.nominees.some((n) => n.nomineeClientId === data.nomineeClientId)) {
this.nomineeError = 'This person is already 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}%`;
return;
}
this.nominees.push({ ...data });
this.pendingNominee = null;
this.showNomineeForm = false;
this.nomineeError = '';
}
removeNominee(index: number): void {
this.nominees.splice(index, 1);
} }
/** Called by parent to collect currency step values */
get currencyStepData() { get currencyStepData() {
return { return {
autoDebitFacility: this.autoDebitFacility, autoDebitFacility: this.autoDebitFacility
...(this.nomineeData ? { nominee: this.nomineeData } : {})
}; };
} }
} }
@@ -541,78 +541,53 @@
} }
<!-- ══ 6. Nominee Details (if filled) ═══════════════════════════ --> <!-- ══ 6. Nominee Details (if filled) ═══════════════════════════ -->
@if (rdNominee) { @if (rdNominees?.length > 0) {
<div class="preview-section"> <div class="preview-section">
<div class="preview-section__header"> <div class="preview-section__header">
<i class="fas fa-user-shield preview-section__icon"></i> <i class="fas fa-user-shield preview-section__icon"></i>
<span class="preview-section__title">Nominee Details</span> <span class="preview-section__title">Nominee Details</span>
<span class="preview-section__badge">{{ rdNominee?.nominationType || 'DA1' }}</span> <span class="preview-section__badge">{{ rdNominees.length }} Nominee(s)</span>
</div> </div>
<div class="preview-body"> <div class="preview-body">
<div class="preview-grid preview-grid--three"> @for (nom of rdNominees; track nom.nomineeClientId; let i = $index) {
<div class="preview-field"> @if (i > 0) {
<span class="preview-label">Name</span> <hr class="preview-nom-divider" />
<span class="preview-value">{{ rdNominee?.nomineeDisplayName || '—' }}</span> }
<div class="preview-grid preview-grid--three">
<div class="preview-field">
<span class="preview-label">Name</span>
<span class="preview-value">{{ nom.nomineeDisplayName || '—' }}</span>
</div>
<div class="preview-field">
<span class="preview-label">Client ID</span>
<span class="preview-value preview-mono">{{ nom.nomineeClientId || '—' }}</span>
</div>
<div class="preview-field">
<span class="preview-label">Relationship</span>
<span class="preview-value">{{ nom.relationshipName || '—' }}</span>
</div>
<div class="preview-field">
<span class="preview-label">Share %</span>
<span class="preview-value">{{ nom.percentageShare ?? '—' }}%</span>
</div>
<div class="preview-field">
<span class="preview-label">Minor</span>
<span class="preview-value">{{ nom.nomineeIsMinor ? 'Yes' : 'No' }}</span>
</div>
@if (nom.guardianDisplayName) {
<div class="preview-field">
<span class="preview-label">Guardian</span>
<span class="preview-value">{{ nom.guardianDisplayName }}</span>
</div>
}
@if (nom.remarks) {
<div class="preview-field">
<span class="preview-label">Remarks</span>
<span class="preview-value">{{ nom.remarks }}</span>
</div>
}
</div> </div>
<div class="preview-field"> }
<span class="preview-label">Client ID</span>
<span class="preview-value preview-mono">{{ rdNominee?.nomineeClientId || '—' }}</span>
</div>
<div class="preview-field">
<span class="preview-label">Relationship</span>
<span class="preview-value">{{ rdNominee?.relationshipName || '—' }}</span>
</div>
<div class="preview-field">
<span class="preview-label">Share %</span>
<span class="preview-value">{{ rdNominee?.percentageShare ?? '—' }}%</span>
</div>
<div class="preview-field">
<span class="preview-label">Minor</span>
<span class="preview-value">{{ rdNominee?.nomineeIsMinor ? 'Yes' : 'No' }}</span>
</div>
@if (rdNominee?.nomineeDateOfBirth) {
<div class="preview-field">
<span class="preview-label">Date of Birth</span>
<span class="preview-value">{{ rdNominee?.nomineeDateOfBirth | dateFormat }}</span>
</div>
}
@if (rdNominee?.nomineeMobileNo) {
<div class="preview-field">
<span class="preview-label">Mobile No</span>
<span class="preview-value preview-mono">{{ rdNominee?.nomineeMobileNo }}</span>
</div>
}
@if (rdNominee?.nomineeAadhaar) {
<div class="preview-field">
<span class="preview-label">Aadhaar</span>
<span class="preview-value preview-mono">{{ rdNominee?.nomineeAadhaar }}</span>
</div>
}
@if (rdNominee?.nomineePan) {
<div class="preview-field">
<span class="preview-label">PAN</span>
<span class="preview-value preview-mono">{{ rdNominee?.nomineePan }}</span>
</div>
}
@if (rdNominee?.guardianDisplayName) {
<div class="preview-field">
<span class="preview-label">Guardian</span>
<span class="preview-value">{{ rdNominee?.guardianDisplayName }}</span>
</div>
}
@if (rdNominee?.guardianClientId) {
<div class="preview-field">
<span class="preview-label">Guardian Client ID</span>
<span class="preview-value preview-mono">{{ rdNominee?.guardianClientId }}</span>
</div>
}
@if (rdNominee?.remarks) {
<div class="preview-field">
<span class="preview-label">Remarks</span>
<span class="preview-value">{{ rdNominee?.remarks }}</span>
</div>
}
</div>
</div> </div>
</div> </div>
} }
@@ -73,7 +73,7 @@ export class RecurringDepositsAccountPreviewStepComponent implements OnChanges {
@Input() recurringDepositsAccountTemplate: any; @Input() recurringDepositsAccountTemplate: any;
@Input() recurringDepositsAccountProductTemplate: any; @Input() recurringDepositsAccountProductTemplate: any;
@Input() recurringDepositAccountData: any; @Input() recurringDepositAccountData: any;
@Input() rdNominee: any = null; @Input() rdNominees: any[] = [];
@Input() rdCurrencyFlags: any = null; @Input() rdCurrencyFlags: any = null;
@Input() rdTenureDays: number | null = null; @Input() rdTenureDays: number | null = null;
@Input() rdApplicableSlab: any = null; @Input() rdApplicableSlab: any = null;
@@ -95,7 +95,7 @@
[savingsAccountTermsForm]="savingsAccountTermsForm" [savingsAccountTermsForm]="savingsAccountTermsForm"
[savingsAccount]="savingsAccount" [savingsAccount]="savingsAccount"
[savingsAccountDigital]="savingsAccountDigital" [savingsAccountDigital]="savingsAccountDigital"
[savingsAccountNominee]="savingsAccountNominee" [savingsAccountNominees]="savingsAccountCurrencyStep?.nominees ?? []"
(submitEvent)="submit()" (submitEvent)="submit()"
> >
</mifosx-savings-account-preview-step> </mifosx-savings-account-preview-step>
@@ -107,10 +107,6 @@ export class CreateSavingsAccountComponent {
return this.savingsAccountDigitalStep?.savingsAccountDigital ?? null; return this.savingsAccountDigitalStep?.savingsAccountDigital ?? null;
} }
get savingsAccountNominee() {
return this.savingsAccountCurrencyStep?.liveNomineeData ?? null;
}
submit() { submit() {
const detailsStep = this.savingsAccountDetailsStep; const detailsStep = this.savingsAccountDetailsStep;
if (detailsStep.selectedAccountStatus === 'JOINT' && detailsStep.totalJointSharePercentage !== 100) { if (detailsStep.selectedAccountStatus === 'JOINT' && detailsStep.totalJointSharePercentage !== 100) {
@@ -120,6 +116,23 @@ export class CreateSavingsAccountComponent {
}); });
return; return;
} }
if (
this.savingsAccountProductTemplate?.nominationFacility &&
(this.savingsAccountCurrencyStep?.nominees ?? []).length === 0
) {
this.alertService.alert({
type: 'Error',
message: 'Nomination Facility is enabled for this product. Please add at least one nominee before submitting.'
});
return;
}
if (this.savingsAccountProductTemplate?.introducerRequired && !this.savingsAccountDetailsStep.introducerId) {
this.alertService.alert({
type: 'Error',
message: 'Introducer is required for this product. Please select an introducer before submitting.'
});
return;
}
const locale = this.settingsService.language.code; const locale = this.settingsService.language.code;
const dateFormat = this.settingsService.dateFormat; const dateFormat = this.settingsService.dateFormat;
const monthDayFormat = 'dd MMMM'; const monthDayFormat = 'dd MMMM';
@@ -143,27 +156,45 @@ export class CreateSavingsAccountComponent {
savingsAccount.groupId = this.savingsAccountTemplate.groupId; savingsAccount.groupId = this.savingsAccountTemplate.groupId;
} }
const nominee = this.savingsAccountNominee; const nominees = this.savingsAccountCurrencyStep?.nominees ?? [];
if (nominee) { if (nominees.length > 0) {
savingsAccount.nominee = { savingsAccount.nominees = nominees.map((n: any) => ({
nomineeClientId: nominee.nomineeClientId, nomineeClientId: n.nomineeClientId,
nominationType: nominee.nominationType, nominationType: n.nominationType,
relationshipId: nominee.relationshipId, relationshipId: n.relationshipId,
percentageShare: nominee.percentageShare, percentageShare: n.percentageShare,
nomineeIsMinor: nominee.nomineeIsMinor, nomineeIsMinor: n.nomineeIsMinor,
...(nominee.guardianClientId ? { guardianClientId: nominee.guardianClientId } : {}), ...(n.guardianClientId ? { guardianClientId: n.guardianClientId } : {}),
remarks: nominee.remarks remarks: n.remarks
}; }));
} }
this.savingsService.createSavingsAccount(savingsAccount).subscribe((response: any) => { this.savingsService.createSavingsAccount(savingsAccount).subscribe({
this.router.navigate( next: (response: any) => {
[ this.router.navigate(
'../', [
response.resourceId '../',
], response.resourceId
{ relativeTo: this.route } ],
); { relativeTo: this.route }
);
},
error: (error: any) => {
const errorCode =
error?.error?.errors?.[0]?.userMessageGlobalisationCode ?? error?.error?.userMessageGlobalisationCode;
if (errorCode === 'error.msg.savings.account.duplicate.product.for.client') {
this.alertService.alert({
type: 'Error',
message:
'This client already has an active account with the selected product. Please choose a different product.'
});
} else if (errorCode === 'error.msg.savingsaccount.duplicate.externalId') {
this.alertService.alert({
type: 'Error',
message: 'An account with this External ID already exists. Please use a unique External ID.'
});
}
}
}); });
} }
} }
@@ -39,21 +39,78 @@
<mifosx-dormancy-alert-panel [productTemplate]="savingsAccountProductTemplate"></mifosx-dormancy-alert-panel> <mifosx-dormancy-alert-panel [productTemplate]="savingsAccountProductTemplate"></mifosx-dormancy-alert-panel>
} }
<div class="sac-alert"> <!-- ── NOMINEES ── -->
<div class="sac-alert__content">
<h4>Nomination Facility</h4>
<p>Allow account holders to designate individuals to receive funds in the event of account holder's death.</p>
</div>
<span class="sac-badge" [class.sac-badge--yes]="savingsAccountProductTemplate?.nominationFacility">
{{ savingsAccountProductTemplate?.nominationFacility ? 'Yes' : 'No' }}
</span>
</div>
@if (savingsAccountProductTemplate?.nominationFacility) { @if (savingsAccountProductTemplate?.nominationFacility) {
<mifosx-nominee-form <div class="nom-section">
[primaryClientId]="primaryClientId" <div class="nom-header">
[showActions]="false" <div class="nom-header__left">
(nomineeChange)="onNomineeChange($event)" <i class="fas fa-user-friends"></i>
></mifosx-nominee-form> <span>Nominees</span>
</div>
<div class="nom-header__right">
<span class="nom-share-badge" [class.nom-share-badge--full]="totalShare === 100">
{{ totalShare }}% / 100%
</span>
</div>
</div>
<!-- Nominees added so far -->
@if (nominees.length > 0) {
<div class="nom-list">
@for (nom of nominees; track nom.nomineeClientId; let i = $index) {
<div class="nom-item">
<div class="nom-item__info">
<span class="nom-item__name">{{ nom.nomineeDisplayName }}</span>
<span class="nom-item__meta">{{ nom.relationshipName }} &bull; {{ nom.percentageShare }}% share</span>
@if (nom.nomineeIsMinor) {
<span class="nom-item__minor">Minor — Guardian: {{ nom.guardianDisplayName }}</span>
}
</div>
<button type="button" class="nom-remove-btn" (click)="removeNominee(i)">
<i class="fas fa-times"></i>
</button>
</div>
}
</div>
}
<!-- Add nominee button -->
@if (canAddMore && !showNomineeForm) {
<button type="button" class="nom-add-btn" (click)="showNomineeForm = true">
<i class="fas fa-plus"></i>
Add Nominee
@if (nominees.length > 0) {
<span class="nom-add-btn__hint">({{ remainingShare }}% remaining)</span>
}
</button>
}
@if (totalShare === 100) {
<div class="nom-complete"><i class="fas fa-check-circle"></i> Nominee allocation complete (100%)</div>
}
<!-- Nominee form -->
@if (showNomineeForm) {
<div class="nom-form-wrap">
@if (nomineeError) {
<div class="nom-error"><i class="fas fa-exclamation-triangle"></i> {{ nomineeError }}</div>
}
<mifosx-nominee-form
[primaryClientId]="primaryClientId"
[showActions]="false"
(nomineeChange)="onNomineeChange($event)"
></mifosx-nominee-form>
<div class="nom-form-actions">
<button type="button" class="nom-cancel-btn" (click)="showNomineeForm = false; nomineeError = ''">
Cancel
</button>
<button type="button" class="nom-confirm-btn" (click)="addNominee()">
<i class="fas fa-plus"></i> Add
</button>
</div>
</div>
}
</div>
} }
</div> </div>
</div> </div>
@@ -114,3 +114,216 @@ $gray-900: #202124;
border-color: #bbf7d0; border-color: #bbf7d0;
} }
} }
/* ── Nominees ── */
.nom-section {
margin-top: 16px;
border: 1px solid #e2e8f0;
border-radius: 10px;
overflow: hidden;
}
.nom-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
&__left {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 700;
color: #334155;
i {
color: #1d4ed8;
font-size: 12px;
}
}
}
.nom-share-badge {
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 999px;
background: #e0e7ff;
color: #3730a3;
border: 1px solid #c7d2fe;
&--full {
background: #dcfce7;
color: #15803d;
border-color: #bbf7d0;
}
}
.nom-list {
display: flex;
flex-direction: column;
gap: 0;
}
.nom-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
border-bottom: 1px dashed #e2e8f0;
&__info {
display: flex;
flex-direction: column;
gap: 2px;
}
&__name {
font-size: 13px;
font-weight: 600;
color: #0f172a;
}
&__meta {
font-size: 11px;
color: #64748b;
}
&__minor {
font-size: 11px;
color: #b45309;
}
}
.nom-remove-btn {
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid #fecaca;
background: #fee2e2;
color: #b91c1c;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
flex-shrink: 0;
transition: background 0.15s;
&:hover {
background: #fecaca;
}
}
.nom-add-btn {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 10px 16px;
background: #fff;
border: none;
border-top: 1px dashed #e2e8f0;
color: #1d4ed8;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s;
i {
font-size: 11px;
}
&__hint {
font-size: 11px;
color: #64748b;
margin-left: 4px;
}
&:hover {
background: #eff6ff;
}
}
.nom-complete {
padding: 10px 16px;
font-size: 12px;
font-weight: 600;
color: #15803d;
background: #f0fdf4;
border-top: 1px solid #bbf7d0;
i {
margin-right: 6px;
}
}
.nom-form-wrap {
padding: 16px;
background: #f8fafc;
border-top: 1px solid #e2e8f0;
}
.nom-error {
padding: 8px 12px;
margin-bottom: 12px;
background: #fee2e2;
border: 1px solid #fecaca;
border-radius: 6px;
color: #b91c1c;
font-size: 12px;
font-weight: 600;
i {
margin-right: 6px;
}
}
.nom-form-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
margin-top: 14px;
}
.nom-cancel-btn {
padding: 7px 18px;
border-radius: 7px;
border: 1px solid #e2e8f0;
background: #fff;
color: #64748b;
font-size: 13px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
&:hover {
background: #f1f5f9;
}
}
.nom-confirm-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 7px 18px;
border-radius: 7px;
border: none;
background: #1d4ed8;
color: #fff;
font-size: 13px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
i {
font-size: 11px;
}
&:hover {
background: #1e40af;
}
}
@@ -26,13 +26,50 @@ export class SavingsAccountCurrencyStepComponent {
@Input() primaryClientId: number | null = null; @Input() primaryClientId: number | null = null;
@ViewChild(NomineeFormComponent) nomineeFormComp: NomineeFormComponent; @ViewChild(NomineeFormComponent) nomineeFormComp: NomineeFormComponent;
nomineeData: any = null; nominees: any[] = [];
pendingNominee: any = null;
showNomineeForm = false;
nomineeError = '';
get totalShare(): number {
return this.nominees.reduce((sum, n) => sum + (+n.percentageShare || 0), 0);
}
get remainingShare(): number {
return 100 - this.totalShare;
}
get canAddMore(): boolean {
return this.totalShare < 100;
}
onNomineeChange(event: any): void { onNomineeChange(event: any): void {
this.nomineeData = event; this.pendingNominee = event;
this.nomineeError = '';
} }
get liveNomineeData(): any { addNominee(): void {
return this.nomineeFormComp?.currentNomineeData ?? this.nomineeData; const data = this.nomineeFormComp?.currentNomineeData ?? this.pendingNominee;
if (!data?.nomineeClientId) {
this.nomineeError = 'Please select a nominee before adding.';
return;
}
if (this.nominees.some((n) => n.nomineeClientId === data.nomineeClientId)) {
this.nomineeError = 'This person is already 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}%`;
return;
}
this.nominees.push({ ...data });
this.pendingNominee = null;
this.showNomineeForm = false;
this.nomineeError = '';
}
removeNominee(index: number): void {
this.nominees.splice(index, 1);
} }
} }
@@ -473,78 +473,53 @@
} }
<!-- ══ 7. Nominee Details (if filled) ═══════════════════════════ --> <!-- ══ 7. Nominee Details (if filled) ═══════════════════════════ -->
@if (savingsAccountNominee) { @if (savingsAccountNominees?.length > 0) {
<div class="preview-section"> <div class="preview-section">
<div class="preview-section__header"> <div class="preview-section__header">
<i class="fas fa-user-shield preview-section__icon"></i> <i class="fas fa-user-shield preview-section__icon"></i>
<span class="preview-section__title">Nominee Details</span> <span class="preview-section__title">Nominee Details</span>
<span class="preview-section__badge">{{ savingsAccountNominee?.nominationType || 'DA1' }}</span> <span class="preview-section__badge">{{ savingsAccountNominees.length }} Nominee(s)</span>
</div> </div>
<div class="preview-body"> <div class="preview-body">
<div class="preview-grid preview-grid--three"> @for (nom of savingsAccountNominees; track nom.nomineeClientId; let i = $index) {
<div class="preview-field"> @if (i > 0) {
<span class="preview-label">Name</span> <hr class="preview-nom-divider" />
<span class="preview-value">{{ savingsAccountNominee?.nomineeDisplayName || '—' }}</span> }
<div class="preview-grid preview-grid--three">
<div class="preview-field">
<span class="preview-label">Name</span>
<span class="preview-value">{{ nom.nomineeDisplayName || '—' }}</span>
</div>
<div class="preview-field">
<span class="preview-label">Client ID</span>
<span class="preview-value preview-mono">{{ nom.nomineeClientId || '—' }}</span>
</div>
<div class="preview-field">
<span class="preview-label">Relationship</span>
<span class="preview-value">{{ nom.relationshipName || '—' }}</span>
</div>
<div class="preview-field">
<span class="preview-label">Share %</span>
<span class="preview-value">{{ nom.percentageShare ?? '—' }}%</span>
</div>
<div class="preview-field">
<span class="preview-label">Minor</span>
<span class="preview-value">{{ nom.nomineeIsMinor ? 'Yes' : 'No' }}</span>
</div>
@if (nom.guardianDisplayName) {
<div class="preview-field">
<span class="preview-label">Guardian</span>
<span class="preview-value">{{ nom.guardianDisplayName }}</span>
</div>
}
@if (nom.remarks) {
<div class="preview-field">
<span class="preview-label">Remarks</span>
<span class="preview-value">{{ nom.remarks }}</span>
</div>
}
</div> </div>
<div class="preview-field"> }
<span class="preview-label">Client ID</span>
<span class="preview-value preview-mono">{{ savingsAccountNominee?.nomineeClientId || '—' }}</span>
</div>
<div class="preview-field">
<span class="preview-label">Relationship</span>
<span class="preview-value">{{ savingsAccountNominee?.relationshipName || '—' }}</span>
</div>
<div class="preview-field">
<span class="preview-label">Share %</span>
<span class="preview-value">{{ savingsAccountNominee?.percentageShare ?? '—' }}%</span>
</div>
<div class="preview-field">
<span class="preview-label">Minor</span>
<span class="preview-value">{{ savingsAccountNominee?.nomineeIsMinor ? 'Yes' : 'No' }}</span>
</div>
@if (savingsAccountNominee?.nomineeDateOfBirth) {
<div class="preview-field">
<span class="preview-label">Date of Birth</span>
<span class="preview-value">{{ savingsAccountNominee?.nomineeDateOfBirth | dateFormat }}</span>
</div>
}
@if (savingsAccountNominee?.nomineeMobileNo) {
<div class="preview-field">
<span class="preview-label">Mobile No</span>
<span class="preview-value preview-mono">{{ savingsAccountNominee?.nomineeMobileNo }}</span>
</div>
}
@if (savingsAccountNominee?.nomineeAadhaar) {
<div class="preview-field">
<span class="preview-label">Aadhaar</span>
<span class="preview-value preview-mono">{{ savingsAccountNominee?.nomineeAadhaar }}</span>
</div>
}
@if (savingsAccountNominee?.nomineePan) {
<div class="preview-field">
<span class="preview-label">PAN</span>
<span class="preview-value preview-mono">{{ savingsAccountNominee?.nomineePan }}</span>
</div>
}
@if (savingsAccountNominee?.guardianDisplayName) {
<div class="preview-field">
<span class="preview-label">Guardian</span>
<span class="preview-value">{{ savingsAccountNominee?.guardianDisplayName }}</span>
</div>
}
@if (savingsAccountNominee?.guardianClientId) {
<div class="preview-field">
<span class="preview-label">Guardian Client ID</span>
<span class="preview-value preview-mono">{{ savingsAccountNominee?.guardianClientId }}</span>
</div>
}
@if (savingsAccountNominee?.remarks) {
<div class="preview-field">
<span class="preview-label">Remarks</span>
<span class="preview-value">{{ savingsAccountNominee?.remarks }}</span>
</div>
}
</div>
</div> </div>
</div> </div>
} }
@@ -90,8 +90,8 @@ export class SavingsAccountPreviewStepComponent implements OnChanges {
@Input() savingsAccount: any; @Input() savingsAccount: any;
/** Digital facilities — user-modified values from digital step */ /** Digital facilities — user-modified values from digital step */
@Input() savingsAccountDigital: any; @Input() savingsAccountDigital: any;
/** Nominee data from currency step */ /** Nominees list from currency step */
@Input() savingsAccountNominee: any; @Input() savingsAccountNominees: any[] = [];
/** active Client Members in case of GSIM Account */ /** active Client Members in case of GSIM Account */
@Input() activeClientMembers?: any; @Input() activeClientMembers?: any;