update code account saving,current,RD
This commit is contained in:
Nitesh Yadav
+40
-56
@@ -35,7 +35,7 @@
|
||||
</ng-template>
|
||||
|
||||
<!-- Step 1: Details -->
|
||||
<mat-step [stepControl]="currentAccountDetailsForm">
|
||||
<mat-step>
|
||||
<ng-template matStepLabel>{{ 'labels.inputs.DETAILS' | translate }}</ng-template>
|
||||
|
||||
<mifosx-current-account-details-step
|
||||
@@ -45,64 +45,48 @@
|
||||
</mifosx-current-account-details-step>
|
||||
</mat-step>
|
||||
|
||||
<!-- Step 2: Currency -->
|
||||
<mat-step>
|
||||
<ng-template matStepLabel>CURRENCY</ng-template>
|
||||
@if (currentAccountProductTemplate) {
|
||||
<!-- Step 2: Currency -->
|
||||
<mat-step>
|
||||
<ng-template matStepLabel>CURRENCY</ng-template>
|
||||
|
||||
<mifosx-current-account-currency-step
|
||||
[currentAccountProductTemplate]="currentAccountProductTemplate"
|
||||
></mifosx-current-account-currency-step>
|
||||
</mat-step>
|
||||
|
||||
<!-- Step 3: Term (Interest Rate) -->
|
||||
<mat-step [stepControl]="currentAccountTermForm">
|
||||
<ng-template matStepLabel>{{ 'labels.inputs.TERMS' | translate }}</ng-template>
|
||||
|
||||
<mifosx-current-account-term-step
|
||||
[currentAccountProductTemplate]="currentAccountProductTemplate"
|
||||
></mifosx-current-account-term-step>
|
||||
</mat-step>
|
||||
|
||||
<!-- Step 4: Settings -->
|
||||
<mat-step>
|
||||
<ng-template matStepLabel>SETTINGS</ng-template>
|
||||
|
||||
<mifosx-current-account-settings-step
|
||||
[currentAccountProductTemplate]="currentAccountProductTemplate"
|
||||
></mifosx-current-account-settings-step>
|
||||
</mat-step>
|
||||
|
||||
<!-- Step 5: Digital -->
|
||||
<mat-step>
|
||||
<ng-template matStepLabel>DIGITAL</ng-template>
|
||||
|
||||
<mifosx-current-account-digital-step
|
||||
[currentAccountProductTemplate]="currentAccountProductTemplate"
|
||||
></mifosx-current-account-digital-step>
|
||||
</mat-step>
|
||||
|
||||
<!-- Step 6: Charges -->
|
||||
<mat-step>
|
||||
<ng-template matStepLabel>{{ 'labels.inputs.CHARGES' | translate }}</ng-template>
|
||||
|
||||
<mifosx-current-account-charges-step
|
||||
[currentAccountProductTemplate]="currentAccountProductTemplate"
|
||||
[currentAccountTemplate]="currentAccountTemplate"
|
||||
[currencyCode]="currentAccountTermsForm.get('currencyCode')"
|
||||
>
|
||||
</mifosx-current-account-charges-step>
|
||||
|
||||
<!-- Hidden terms step to keep currencyCode form populated -->
|
||||
<div style="display: none">
|
||||
<mifosx-current-account-terms-step
|
||||
<mifosx-current-account-currency-step
|
||||
[currentAccountProductTemplate]="currentAccountProductTemplate"
|
||||
[currentAccountTemplate]="currentAccountTemplate"
|
||||
></mifosx-current-account-terms-step>
|
||||
</div>
|
||||
</mat-step>
|
||||
></mifosx-current-account-currency-step>
|
||||
|
||||
<!-- Step 7: Preview -->
|
||||
@if (currentAccountFormValid) {
|
||||
<div class="layout-row align-center gap-2percent margin-t responsive-column">
|
||||
<button mat-raised-button matStepperPrevious>
|
||||
<fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Previous' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button matStepperNext>
|
||||
{{ 'labels.buttons.Next' | translate }}
|
||||
<fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
</mat-step>
|
||||
|
||||
<!-- Step 3: Digital -->
|
||||
<mat-step>
|
||||
<ng-template matStepLabel>DIGITAL</ng-template>
|
||||
|
||||
<mifosx-current-account-digital-step
|
||||
[currentAccountProductTemplate]="currentAccountProductTemplate"
|
||||
></mifosx-current-account-digital-step>
|
||||
|
||||
<div class="layout-row align-center gap-2percent margin-t responsive-column">
|
||||
<button mat-raised-button matStepperPrevious>
|
||||
<fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Previous' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button matStepperNext>
|
||||
{{ 'labels.buttons.Next' | translate }}
|
||||
<fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
</mat-step>
|
||||
|
||||
<!-- Step 4: Preview -->
|
||||
<mat-step completed>
|
||||
<ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
|
||||
<mifosx-current-account-preview-step
|
||||
|
||||
@@ -27,11 +27,14 @@
|
||||
.mat-step-content {
|
||||
padding: 1.5rem;
|
||||
margin: 1rem 0;
|
||||
overflow: visible !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Form field spacing within steps
|
||||
:host ::ng-deep mat-step-content {
|
||||
overflow: visible !important;
|
||||
|
||||
mat-form-field {
|
||||
margin-bottom: 1rem;
|
||||
width: 100%;
|
||||
|
||||
+25
-56
@@ -12,10 +12,6 @@ import { Router, ActivatedRoute } from '@angular/router';
|
||||
|
||||
/** Custom Components */
|
||||
import { CurrentAccountDetailsStepComponent } from '../current-account-stepper/current-account-details-step/current-account-details-step.component';
|
||||
import { CurrentAccountTermsStepComponent } from '../current-account-stepper/current-account-terms-step/current-account-terms-step.component';
|
||||
import { CurrentAccountTermStepComponent } from '../current-account-stepper/current-account-term-step/current-account-term-step.component';
|
||||
import { CurrentAccountSettingsStepComponent } from '../current-account-stepper/current-account-settings-step/current-account-settings-step.component';
|
||||
import { CurrentAccountChargesStepComponent } from '../current-account-stepper/current-account-charges-step/current-account-charges-step.component';
|
||||
import { CurrentAccountCurrencyStepComponent } from '../current-account-stepper/current-account-currency-step/current-account-currency-step.component';
|
||||
import { CurrentAccountDigitalStepComponent } from '../current-account-stepper/current-account-digital-step/current-account-digital-step.component';
|
||||
|
||||
@@ -23,10 +19,18 @@ import { CurrentAccountDigitalStepComponent } from '../current-account-stepper/c
|
||||
import { CurrentAccountsService } from '../current-accounts.service';
|
||||
import { SettingsService } from 'app/settings/settings.service';
|
||||
import { Dates } from 'app/core/utils/dates';
|
||||
import { MatStepper, MatStepperIcon, MatStep, MatStepLabel } from '@angular/material/stepper';
|
||||
import {
|
||||
MatStepper,
|
||||
MatStepperIcon,
|
||||
MatStep,
|
||||
MatStepLabel,
|
||||
MatStepperNext,
|
||||
MatStepperPrevious
|
||||
} from '@angular/material/stepper';
|
||||
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';
|
||||
import { FormGroup } from '@angular/forms';
|
||||
|
||||
/**
|
||||
* Create Current Account Component
|
||||
@@ -39,16 +43,14 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
...STANDALONE_SHARED_IMPORTS,
|
||||
MatStepper,
|
||||
MatStepperIcon,
|
||||
MatStepperNext,
|
||||
MatStepperPrevious,
|
||||
FaIconComponent,
|
||||
MatStep,
|
||||
MatStepLabel,
|
||||
CurrentAccountDetailsStepComponent,
|
||||
CurrentAccountCurrencyStepComponent,
|
||||
CurrentAccountTermStepComponent,
|
||||
CurrentAccountSettingsStepComponent,
|
||||
CurrentAccountDigitalStepComponent,
|
||||
CurrentAccountTermsStepComponent,
|
||||
CurrentAccountChargesStepComponent,
|
||||
CurrentAccountPreviewStepComponent
|
||||
]
|
||||
})
|
||||
@@ -67,18 +69,10 @@ export class CreateCurrentAccountComponent {
|
||||
/** Current Account Details Step */
|
||||
@ViewChild(CurrentAccountDetailsStepComponent, { static: true })
|
||||
currentAccountDetailsStep: CurrentAccountDetailsStepComponent;
|
||||
/** Current Account Term Step (new) */
|
||||
@ViewChild(CurrentAccountTermStepComponent, { static: true })
|
||||
currentAccountTermStep: CurrentAccountTermStepComponent;
|
||||
/** Current Account Settings Step */
|
||||
@ViewChild(CurrentAccountSettingsStepComponent, { static: true })
|
||||
currentAccountSettingsStep: CurrentAccountSettingsStepComponent;
|
||||
/** Current Account Terms Step (old — kept for currencyCode access) */
|
||||
@ViewChild(CurrentAccountTermsStepComponent, { static: true })
|
||||
currentAccountTermsStep: CurrentAccountTermsStepComponent;
|
||||
/** Current Account Charges Step */
|
||||
@ViewChild(CurrentAccountChargesStepComponent, { static: true })
|
||||
currentAccountChargesStep: CurrentAccountChargesStepComponent;
|
||||
|
||||
/** Current Account Currency Step */
|
||||
@ViewChild(CurrentAccountCurrencyStepComponent, { static: true })
|
||||
currentAccountCurrencyStep: CurrentAccountCurrencyStepComponent;
|
||||
|
||||
constructor() {
|
||||
this.route.data.subscribe((data: { currentAccountTemplate: any }) => {
|
||||
@@ -100,32 +94,17 @@ export class CreateCurrentAccountComponent {
|
||||
return this.currentAccountDetailsStep.currentAccountDetailsForm;
|
||||
}
|
||||
|
||||
/**
|
||||
* Retrieves new term form (interest rate).
|
||||
*/
|
||||
get currentAccountTermForm() {
|
||||
return this.currentAccountTermStep.currentAccountTermForm;
|
||||
/** Stub forms needed by preview step inputs */
|
||||
get currentAccountTermForm(): FormGroup {
|
||||
return new FormGroup({});
|
||||
}
|
||||
|
||||
/**
|
||||
* Retrieves settings form.
|
||||
*/
|
||||
get currentAccountSettingsForm() {
|
||||
return this.currentAccountSettingsStep.currentAccountSettingsForm;
|
||||
get currentAccountSettingsForm(): FormGroup {
|
||||
return new FormGroup({});
|
||||
}
|
||||
|
||||
/**
|
||||
* Retrieves old terms form — still used for currencyCode by charges step.
|
||||
*/
|
||||
get currentAccountTermsForm() {
|
||||
return this.currentAccountTermsStep.currentAccountTermsForm;
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks validity of overall current account form.
|
||||
*/
|
||||
get currentAccountFormValid() {
|
||||
return this.currentAccountDetailsForm.valid && this.currentAccountTermForm.valid;
|
||||
get currentAccountTermsForm(): FormGroup {
|
||||
return new FormGroup({});
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -133,10 +112,7 @@ export class CreateCurrentAccountComponent {
|
||||
*/
|
||||
get currentAccount() {
|
||||
return {
|
||||
...this.currentAccountDetailsStep.currentAccountDetails,
|
||||
...this.currentAccountTermStep.currentAccountTerms,
|
||||
...this.currentAccountSettingsStep.currentAccountSettings,
|
||||
...this.currentAccountChargesStep.currentAccountCharges
|
||||
...this.currentAccountDetailsStep.currentAccountDetails
|
||||
};
|
||||
}
|
||||
|
||||
@@ -149,15 +125,8 @@ export class CreateCurrentAccountComponent {
|
||||
const monthDayFormat = 'dd MMMM';
|
||||
const currentAccount = {
|
||||
...this.currentAccount,
|
||||
charges: this.currentAccount.charges.map((charge: any) => ({
|
||||
chargeId: charge.id,
|
||||
amount: charge.amount,
|
||||
dueDate: charge.dueDate ? this.dateUtils.formatDate(charge.dueDate, dateFormat) : charge.dueDate,
|
||||
feeOnMonthDay: charge.feeOnMonthDay
|
||||
? this.dateUtils.formatDate(charge.feeOnMonthDay, monthDayFormat)
|
||||
: charge.feeOnMonthDay,
|
||||
feeInterval: charge.feeInterval
|
||||
})),
|
||||
...this.currentAccountCurrencyStep.currencyStepData,
|
||||
charges: [],
|
||||
submittedOnDate: this.dateUtils.formatDate(this.currentAccount.submittedOnDate, dateFormat),
|
||||
dateFormat,
|
||||
monthDayFormat,
|
||||
|
||||
+28
-28
@@ -26,6 +26,30 @@
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="sac-alert sac-alert--editable">
|
||||
<div class="sac-alert__content">
|
||||
<h4>Balance Swap Option</h4>
|
||||
<p>Allows balance to be swapped or transferred between linked accounts as per product configuration.</p>
|
||||
</div>
|
||||
<mat-slide-toggle [(ngModel)]="balanceSwapOption" color="primary"></mat-slide-toggle>
|
||||
</div>
|
||||
|
||||
<div class="sac-alert sac-alert--editable">
|
||||
<div class="sac-alert__content">
|
||||
<h4>MSME</h4>
|
||||
<p>Account is categorized under the Micro, Small and Medium Enterprises segment.</p>
|
||||
</div>
|
||||
<mat-slide-toggle [(ngModel)]="msme" color="primary"></mat-slide-toggle>
|
||||
</div>
|
||||
|
||||
<div class="sac-alert sac-alert--editable">
|
||||
<div class="sac-alert__content">
|
||||
<h4>Auto Debit Facility</h4>
|
||||
<p>Enable automatic debit instructions for recurring payments linked to this account.</p>
|
||||
</div>
|
||||
<mat-slide-toggle [(ngModel)]="autoDebitFacility" color="primary"></mat-slide-toggle>
|
||||
</div>
|
||||
|
||||
<div class="sac-alert">
|
||||
<div class="sac-alert__content">
|
||||
<h4>Dormancy Alert</h4>
|
||||
@@ -36,25 +60,7 @@
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="sac-alert">
|
||||
<div class="sac-alert__content">
|
||||
<h4>Balance Swap Option</h4>
|
||||
<p>Allows balance to be swapped or transferred between linked accounts as per product configuration.</p>
|
||||
</div>
|
||||
<span class="sac-badge" [class.sac-badge--yes]="currentAccountProductTemplate?.balanceSwapOption">
|
||||
{{ currentAccountProductTemplate?.balanceSwapOption ? 'Yes' : 'No' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="sac-alert">
|
||||
<div class="sac-alert__content">
|
||||
<h4>MSME</h4>
|
||||
<p>Account is categorized under the Micro, Small and Medium Enterprises segment.</p>
|
||||
</div>
|
||||
<span class="sac-badge" [class.sac-badge--yes]="currentAccountProductTemplate?.msme">
|
||||
{{ currentAccountProductTemplate?.msme ? 'Yes' : 'No' }}
|
||||
</span>
|
||||
</div>
|
||||
<mifosx-dormancy-alert-panel [productTemplate]="currentAccountProductTemplate"></mifosx-dormancy-alert-panel>
|
||||
|
||||
<div class="sac-alert">
|
||||
<div class="sac-alert__content">
|
||||
@@ -66,14 +72,8 @@
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="sac-alert">
|
||||
<div class="sac-alert__content">
|
||||
<h4>Auto Debit Facility</h4>
|
||||
<p>Enable automatic debit instructions for recurring payments linked to this account.</p>
|
||||
</div>
|
||||
<span class="sac-badge" [class.sac-badge--yes]="currentAccountProductTemplate?.autoDebitFacility">
|
||||
{{ currentAccountProductTemplate?.autoDebitFacility ? 'Yes' : 'No' }}
|
||||
</span>
|
||||
</div>
|
||||
@if (currentAccountProductTemplate?.nominationFacility) {
|
||||
<mifosx-nominee-form (nomineeChange)="onNomineeChange($event)"></mifosx-nominee-form>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+14
@@ -114,3 +114,17 @@ $gray-900: #202124;
|
||||
border-color: #bbf7d0;
|
||||
}
|
||||
}
|
||||
|
||||
.sac-alert--editable {
|
||||
border-color: #bae6fd;
|
||||
background: #f0f9ff;
|
||||
|
||||
&:hover {
|
||||
border-color: #7dd3fc;
|
||||
box-shadow: 0 2px 8px rgb(2 132 199 / 10%);
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: #0369a1;
|
||||
}
|
||||
}
|
||||
|
||||
+43
-3
@@ -6,15 +6,55 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
import { Component, Input } from '@angular/core';
|
||||
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
import { NomineeFormComponent } from 'app/shared/nominee-form/nominee-form.component';
|
||||
import { DormancyAlertPanelComponent } from 'app/shared/dormancy-alert-panel/dormancy-alert-panel.component';
|
||||
import { MatSlideToggle } from '@angular/material/slide-toggle';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
@Component({
|
||||
selector: 'mifosx-current-account-currency-step',
|
||||
templateUrl: './current-account-currency-step.component.html',
|
||||
styleUrls: ['./current-account-currency-step.component.scss'],
|
||||
imports: [...STANDALONE_SHARED_IMPORTS]
|
||||
imports: [
|
||||
...STANDALONE_SHARED_IMPORTS,
|
||||
NomineeFormComponent,
|
||||
DormancyAlertPanelComponent,
|
||||
MatSlideToggle,
|
||||
FormsModule
|
||||
]
|
||||
})
|
||||
export class CurrentAccountCurrencyStepComponent {
|
||||
export class CurrentAccountCurrencyStepComponent implements OnChanges {
|
||||
@Input() currentAccountProductTemplate: any;
|
||||
|
||||
nomineeData: any = null;
|
||||
|
||||
// Editable feature toggles (pre-filled from product, overridable by user)
|
||||
balanceSwapOption = false;
|
||||
msme = false;
|
||||
autoDebitFacility = false;
|
||||
|
||||
ngOnChanges(changes: SimpleChanges): void {
|
||||
if (changes['currentAccountProductTemplate']?.currentValue) {
|
||||
const pt = changes['currentAccountProductTemplate'].currentValue;
|
||||
this.balanceSwapOption = !!pt.balanceSwapOption;
|
||||
this.msme = !!pt.msme;
|
||||
this.autoDebitFacility = !!pt.autoDebitFacility;
|
||||
}
|
||||
}
|
||||
|
||||
onNomineeChange(event: any): void {
|
||||
this.nomineeData = event;
|
||||
}
|
||||
|
||||
/** Called by parent to collect currency step values */
|
||||
get currencyStepData() {
|
||||
return {
|
||||
balanceSwapOption: this.balanceSwapOption,
|
||||
msme: this.msme,
|
||||
autoDebitFacility: this.autoDebitFacility,
|
||||
...(this.nomineeData ? { nominee: this.nomineeData } : {})
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
+6
-6
@@ -7,7 +7,7 @@
|
||||
-->
|
||||
|
||||
<form [formGroup]="currentAccountDetailsForm">
|
||||
<!-- Account Details -->
|
||||
<!-- ══ Account Details ══════════════════════════════════════════ -->
|
||||
<div class="sad-section">
|
||||
<div class="sad-section__header">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
@@ -45,9 +45,7 @@
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
}
|
||||
|
||||
@if (currentAccountProductSelected) {
|
||||
<mat-form-field appearance="outline" class="sad-field">
|
||||
<mat-label>{{ 'labels.inputs.Field Officer' | translate }}</mat-label>
|
||||
<mat-select formControlName="fieldOfficerId">
|
||||
@@ -56,9 +54,7 @@
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
}
|
||||
|
||||
@if (currentAccountProductSelected) {
|
||||
<mat-form-field appearance="outline" class="sad-field">
|
||||
<mat-label>{{ 'labels.inputs.External ID' | translate }}</mat-label>
|
||||
<input matInput formControlName="externalId" />
|
||||
@@ -67,8 +63,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Product Classification (read-only, shown after product is selected) -->
|
||||
@if (currentAccountProductSelected && productTemplate) {
|
||||
<!-- ══ Product Classification (read-only) ══════════════════════ -->
|
||||
<div class="sad-section sad-section--mt">
|
||||
<div class="sad-section__header">
|
||||
<i class="fas fa-tags"></i>
|
||||
@@ -125,6 +121,10 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (productTemplate?.introducerRequired) {
|
||||
<mifosx-introducer-search (introducerChange)="onIntroducerChange($event)"></mifosx-introducer-search>
|
||||
}
|
||||
}
|
||||
|
||||
<div class="layout-row align-center gap-2percent margin-t responsive-column">
|
||||
|
||||
+59
-1
@@ -15,7 +15,7 @@ $gray-900: #202124;
|
||||
.sad-section {
|
||||
border: 1px solid $border;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
overflow: visible;
|
||||
background: #fff;
|
||||
|
||||
&--mt {
|
||||
@@ -103,3 +103,61 @@ $gray-900: #202124;
|
||||
border-color: #bbf7d0;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Account Feature Toggles ────────────────────────────────────────────────
|
||||
.sad-toggles {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.sad-toggle-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 18px;
|
||||
border: 1.5px solid #e2e8f0;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
transition:
|
||||
border-color 0.2s,
|
||||
box-shadow 0.2s;
|
||||
|
||||
&:hover {
|
||||
border-color: #93c5fd;
|
||||
box-shadow: 0 1px 6px rgb(59 130 246 / 10%);
|
||||
}
|
||||
|
||||
&__left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
> i {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
background: #f0f9ff;
|
||||
border: 1px solid #bae6fd;
|
||||
color: #0284c7;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 15px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: 13.5px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
&__hint {
|
||||
font-size: 11.5px;
|
||||
color: #64748b;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
+23
-3
@@ -17,6 +17,7 @@ import { SettingsService } from 'app/settings/settings.service';
|
||||
import { MatStepperPrevious, MatStepperNext } from '@angular/material/stepper';
|
||||
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
import { IntroducerSearchComponent } from 'app/shared/introducer-search/introducer-search.component';
|
||||
|
||||
/**
|
||||
* Current Account Details Step
|
||||
@@ -29,7 +30,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
...STANDALONE_SHARED_IMPORTS,
|
||||
MatStepperPrevious,
|
||||
FaIconComponent,
|
||||
MatStepperNext
|
||||
MatStepperNext,
|
||||
IntroducerSearchComponent
|
||||
]
|
||||
})
|
||||
export class CurrentAccountDetailsStepComponent implements OnInit {
|
||||
@@ -56,6 +58,7 @@ export class CurrentAccountDetailsStepComponent implements OnInit {
|
||||
currentAccountDetailsForm: UntypedFormGroup;
|
||||
|
||||
currentAccountProductSelected = false;
|
||||
introducerId: number | null = null;
|
||||
|
||||
/** Current Account Template with product data */
|
||||
@Output() currentAccountProductTemplate = new EventEmitter();
|
||||
@@ -102,7 +105,10 @@ export class CurrentAccountDetailsStepComponent implements OnInit {
|
||||
Validators.required
|
||||
],
|
||||
fieldOfficerId: [''],
|
||||
externalId: ['']
|
||||
externalId: [''],
|
||||
balanceSwapOption: [false],
|
||||
msme: [false],
|
||||
autoDebitFacility: [false]
|
||||
});
|
||||
}
|
||||
|
||||
@@ -131,6 +137,12 @@ export class CurrentAccountDetailsStepComponent implements OnInit {
|
||||
this.currentAccountProductTemplate.emit(response);
|
||||
this.fieldOfficerData = response.fieldOfficerOptions;
|
||||
this.currentAccountProductSelected = true;
|
||||
// Pre-populate toggles from product defaults (user can override)
|
||||
this.currentAccountDetailsForm.patchValue({
|
||||
balanceSwapOption: !!response.balanceSwapOption,
|
||||
msme: !!response.msme,
|
||||
autoDebitFacility: !!response.autoDebitFacility
|
||||
});
|
||||
this.cdr.detectChanges();
|
||||
if (!this.isFieldOfficerPatched && this.currentAccountTemplate.fieldOfficerId) {
|
||||
this.currentAccountDetailsForm.get('fieldOfficerId').patchValue(this.currentAccountTemplate.fieldOfficerId);
|
||||
@@ -166,7 +178,15 @@ export class CurrentAccountDetailsStepComponent implements OnInit {
|
||||
/**
|
||||
* Returns current account form value.
|
||||
*/
|
||||
onIntroducerChange(event: { clientId: number; displayName: string } | null): void {
|
||||
this.introducerId = event?.clientId ?? null;
|
||||
}
|
||||
|
||||
get currentAccountDetails() {
|
||||
return this.currentAccountDetailsForm.getRawValue();
|
||||
const value = this.currentAccountDetailsForm.getRawValue();
|
||||
if (this.introducerId) {
|
||||
value.introducerId = this.introducerId;
|
||||
}
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
+194
-214
@@ -6,229 +6,209 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="spl-section">
|
||||
<div class="spl-section__header">
|
||||
<span class="spl-section__icon">
|
||||
<i class="fas fa-chart-bar"></i>
|
||||
</span>
|
||||
<div class="spl-section__title">Transaction & Product Limits</div>
|
||||
<div class="spl-section__badge">FROM PRODUCT</div>
|
||||
<div class="dig-wrapper">
|
||||
<div class="dig-header">
|
||||
<div class="dig-header__icon">
|
||||
<i class="fas fa-mobile-alt"></i>
|
||||
</div>
|
||||
<div class="dig-header__text">
|
||||
<h3 class="dig-header__title">Digital & Account Features</h3>
|
||||
<p class="dig-header__sub">Toggle the facilities available for this account (as per RBI guidelines)</p>
|
||||
</div>
|
||||
<span class="dig-header__badge">FROM PRODUCT</span>
|
||||
</div>
|
||||
|
||||
<div class="spl-section__body">
|
||||
<div class="spl-features">
|
||||
<div class="spl-features__header">Account Features (as per RBI guidelines)</div>
|
||||
|
||||
<div class="spl-features__grid">
|
||||
<label class="spl-feature">
|
||||
<span class="spl-feature__label"><i class="fas fa-credit-card"></i> ATM Facility</span>
|
||||
<select class="spl-select" [ngModel]="accountFacilityConfig.atmFacility" disabled>
|
||||
<option [ngValue]="false">No</option>
|
||||
<option [ngValue]="true">Yes</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label class="spl-feature">
|
||||
<span class="spl-feature__label"><i class="fas fa-wallet"></i> ATM Withdrawal</span>
|
||||
<select class="spl-select" [ngModel]="accountFacilityConfig.atmWithdrawalFacility" disabled>
|
||||
<option [ngValue]="false">No</option>
|
||||
<option [ngValue]="true">Yes</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label class="spl-feature">
|
||||
<span class="spl-feature__label"><i class="fas fa-mobile-alt"></i> UPI Facility</span>
|
||||
<select class="spl-select" [ngModel]="accountFacilityConfig.upiFacility" disabled>
|
||||
<option [ngValue]="false">No</option>
|
||||
<option [ngValue]="true">Yes</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label class="spl-feature">
|
||||
<span class="spl-feature__label"><i class="fas fa-exchange-alt"></i> POS Transactions</span>
|
||||
<select class="spl-select" [ngModel]="accountFacilityConfig.posTransactionsFacility" disabled>
|
||||
<option [ngValue]="false">No</option>
|
||||
<option [ngValue]="true">Yes</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label class="spl-feature">
|
||||
<span class="spl-feature__label"><i class="fas fa-book"></i> Cheque Book</span>
|
||||
<select class="spl-select" [ngModel]="accountFacilityConfig.chequeBook" disabled>
|
||||
<option [ngValue]="false">No</option>
|
||||
<option [ngValue]="true">Yes</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label class="spl-feature">
|
||||
<span class="spl-feature__label"><i class="fas fa-bolt"></i> IMPS Facility</span>
|
||||
<select class="spl-select" [ngModel]="accountFacilityConfig.impsFacility" disabled>
|
||||
<option [ngValue]="false">No</option>
|
||||
<option [ngValue]="true">Yes</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label class="spl-feature">
|
||||
<span class="spl-feature__label"><i class="fas fa-sms"></i> SMS Alerts</span>
|
||||
<select class="spl-select" [ngModel]="accountFacilityConfig.smsAlerts" disabled>
|
||||
<option [ngValue]="false">No</option>
|
||||
<option [ngValue]="true">Yes</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label class="spl-feature">
|
||||
<span class="spl-feature__label"><i class="fas fa-bell"></i> BBPS Facility</span>
|
||||
<select class="spl-select" [ngModel]="accountFacilityConfig.bbpsFacility" disabled>
|
||||
<option [ngValue]="false">No</option>
|
||||
<option [ngValue]="true">Yes</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label class="spl-feature">
|
||||
<span class="spl-feature__label"><i class="fas fa-shield-alt"></i> Insurance Cover</span>
|
||||
<select class="spl-select" [ngModel]="accountFacilityConfig.insuranceCover" disabled>
|
||||
<option [ngValue]="false">No</option>
|
||||
<option [ngValue]="true">Yes</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label class="spl-feature">
|
||||
<span class="spl-feature__label"><i class="fas fa-bolt"></i> BEPG Facility</span>
|
||||
<select class="spl-select" [ngModel]="accountFacilityConfig.bepgFacility" disabled>
|
||||
<option [ngValue]="false">No</option>
|
||||
<option [ngValue]="true">Yes</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label class="spl-feature">
|
||||
<span class="spl-feature__label"><i class="fas fa-money-check-alt"></i> NEFT Facility</span>
|
||||
<select class="spl-select" [ngModel]="accountFacilityConfig.neftFacility" disabled>
|
||||
<option [ngValue]="false">No</option>
|
||||
<option [ngValue]="true">Yes</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label class="spl-feature">
|
||||
<span class="spl-feature__label"><i class="fas fa-money-check"></i> RTGS Facility</span>
|
||||
<select class="spl-select" [ngModel]="accountFacilityConfig.rtgsFacility" disabled>
|
||||
<option [ngValue]="false">No</option>
|
||||
<option [ngValue]="true">Yes</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label class="spl-feature">
|
||||
<span class="spl-feature__label"><i class="fas fa-balance-scale"></i> Inter-Bank Total Cap</span>
|
||||
<select class="spl-select" [ngModel]="accountFacilityConfig.interBankTotalCapFacility" disabled>
|
||||
<option [ngValue]="false">No</option>
|
||||
<option [ngValue]="true">Yes</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label class="spl-feature">
|
||||
<span class="spl-feature__label"><i class="fas fa-arrow-right-arrow-left"></i> Withdrawal Facility</span>
|
||||
<select class="spl-select" [ngModel]="accountFacilityConfig.withdrawalFacility" disabled>
|
||||
<option [ngValue]="false">No</option>
|
||||
<option [ngValue]="true">Yes</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label class="spl-feature">
|
||||
<span class="spl-feature__label"><i class="fas fa-id-card"></i> Deposit Facility (KYC)</span>
|
||||
<select class="spl-select" [ngModel]="accountFacilityConfig.depositFacilityKyc" disabled>
|
||||
<option [ngValue]="false">No</option>
|
||||
<option [ngValue]="true">Yes</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label class="spl-feature">
|
||||
<span class="spl-feature__label"><i class="fas fa-credit-card"></i> Virtual Debit Card</span>
|
||||
<select class="spl-select" [ngModel]="accountFacilityConfig.virtualDebitCard" disabled>
|
||||
<option [ngValue]="false">No</option>
|
||||
<option [ngValue]="true">Yes</option>
|
||||
</select>
|
||||
</label>
|
||||
<div class="dig-grid">
|
||||
<div class="dig-card" [class.dig-card--on]="facilityConfig.atmFacility">
|
||||
<div class="dig-card__icon"><i class="fas fa-credit-card"></i></div>
|
||||
<div class="dig-card__body">
|
||||
<span class="dig-card__label">ATM Facility</span>
|
||||
<span class="dig-card__status">{{ facilityConfig.atmFacility ? 'Enabled' : 'Disabled' }}</span>
|
||||
</div>
|
||||
<label class="dig-toggle">
|
||||
<input type="checkbox" [(ngModel)]="facilityConfig.atmFacility" />
|
||||
<span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@if (accountFacilityLimits.length > 0) {
|
||||
<div class="spl-table-wrap">
|
||||
<table class="spl-table">
|
||||
<colgroup>
|
||||
<col class="spl-table__col--label" />
|
||||
<col class="spl-table__col--value" />
|
||||
<col class="spl-table__col--value" />
|
||||
<col class="spl-table__col--value" />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Limit Type</th>
|
||||
<th>General Limit (Daily)</th>
|
||||
<th>Minor Account Limit</th>
|
||||
<th>Small Saving Limit</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (row of accountFacilityLimits; track row.limitType) {
|
||||
<tr>
|
||||
<td>{{ row.limitType }}</td>
|
||||
<td><input type="text" class="spl-input" [value]="row.generalLimit" disabled /></td>
|
||||
<td><input type="text" class="spl-input" [value]="row.minorAccountLimit" disabled /></td>
|
||||
<td><input type="text" class="spl-input" [value]="row.smallSavingLimit" disabled /></td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="dig-card" [class.dig-card--on]="facilityConfig.atmWithdrawalFacility">
|
||||
<div class="dig-card__icon"><i class="fas fa-wallet"></i></div>
|
||||
<div class="dig-card__body">
|
||||
<span class="dig-card__label">ATM Withdrawal</span>
|
||||
<span class="dig-card__status">{{ facilityConfig.atmWithdrawalFacility ? 'Enabled' : 'Disabled' }}</span>
|
||||
</div>
|
||||
}
|
||||
<label class="dig-toggle">
|
||||
<input type="checkbox" [(ngModel)]="facilityConfig.atmWithdrawalFacility" />
|
||||
<span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@if (depositLimitKyc?.general) {
|
||||
<div class="spl-table-wrap spl-table-wrap--kyc">
|
||||
<h4 class="mat-h4">Deposit Limit (KYC)</h4>
|
||||
<table class="spl-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Account Type</th>
|
||||
<th>KYC Type</th>
|
||||
<th>Limit</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>General</td>
|
||||
<td>
|
||||
<select class="spl-select" [ngModel]="depositLimitKyc.general.kycType" disabled>
|
||||
<option>{{ depositLimitKyc.general.kycType }}</option>
|
||||
</select>
|
||||
</td>
|
||||
<td><input type="text" class="spl-input" [value]="depositLimitKyc.general.limit" disabled /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Minor</td>
|
||||
<td>
|
||||
<select class="spl-select" [ngModel]="depositLimitKyc.minor.kycType" disabled>
|
||||
<option>{{ depositLimitKyc.minor.kycType }}</option>
|
||||
</select>
|
||||
</td>
|
||||
<td><input type="number" class="spl-input" [value]="depositLimitKyc.minor.limit" disabled /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Small Saving</td>
|
||||
<td>
|
||||
<select class="spl-select" [ngModel]="depositLimitKyc.smallSaving.kycType" disabled>
|
||||
<option>{{ depositLimitKyc.smallSaving.kycType }}</option>
|
||||
</select>
|
||||
</td>
|
||||
<td><input type="number" class="spl-input" [value]="depositLimitKyc.smallSaving.limit" disabled /></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="dig-card" [class.dig-card--on]="facilityConfig.upiFacility">
|
||||
<div class="dig-card__icon"><i class="fas fa-mobile-alt"></i></div>
|
||||
<div class="dig-card__body">
|
||||
<span class="dig-card__label">UPI Facility</span>
|
||||
<span class="dig-card__status">{{ facilityConfig.upiFacility ? 'Enabled' : 'Disabled' }}</span>
|
||||
</div>
|
||||
}
|
||||
<label class="dig-toggle">
|
||||
<input type="checkbox" [(ngModel)]="facilityConfig.upiFacility" />
|
||||
<span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="spl-note">
|
||||
<strong>Note:</strong>
|
||||
These facilities are defined at product level and applied to this account. Small Saving Account limits are
|
||||
strictly capped at Rs.1,00,000 maximum balance per RBI Master Circular.
|
||||
<div class="dig-card" [class.dig-card--on]="facilityConfig.posTransactionsFacility">
|
||||
<div class="dig-card__icon"><i class="fas fa-exchange-alt"></i></div>
|
||||
<div class="dig-card__body">
|
||||
<span class="dig-card__label">POS Transactions</span>
|
||||
<span class="dig-card__status">{{ facilityConfig.posTransactionsFacility ? 'Enabled' : 'Disabled' }}</span>
|
||||
</div>
|
||||
<label class="dig-toggle">
|
||||
<input type="checkbox" [(ngModel)]="facilityConfig.posTransactionsFacility" />
|
||||
<span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="dig-card" [class.dig-card--on]="facilityConfig.chequeBook">
|
||||
<div class="dig-card__icon"><i class="fas fa-book"></i></div>
|
||||
<div class="dig-card__body">
|
||||
<span class="dig-card__label">Cheque Book</span>
|
||||
<span class="dig-card__status">{{ facilityConfig.chequeBook ? 'Enabled' : 'Disabled' }}</span>
|
||||
</div>
|
||||
<label class="dig-toggle">
|
||||
<input type="checkbox" [(ngModel)]="facilityConfig.chequeBook" />
|
||||
<span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="dig-card" [class.dig-card--on]="facilityConfig.impsFacility">
|
||||
<div class="dig-card__icon"><i class="fas fa-bolt"></i></div>
|
||||
<div class="dig-card__body">
|
||||
<span class="dig-card__label">IMPS Facility</span>
|
||||
<span class="dig-card__status">{{ facilityConfig.impsFacility ? 'Enabled' : 'Disabled' }}</span>
|
||||
</div>
|
||||
<label class="dig-toggle">
|
||||
<input type="checkbox" [(ngModel)]="facilityConfig.impsFacility" />
|
||||
<span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="dig-card" [class.dig-card--on]="facilityConfig.smsAlerts">
|
||||
<div class="dig-card__icon"><i class="fas fa-sms"></i></div>
|
||||
<div class="dig-card__body">
|
||||
<span class="dig-card__label">SMS Alerts</span>
|
||||
<span class="dig-card__status">{{ facilityConfig.smsAlerts ? 'Enabled' : 'Disabled' }}</span>
|
||||
</div>
|
||||
<label class="dig-toggle">
|
||||
<input type="checkbox" [(ngModel)]="facilityConfig.smsAlerts" />
|
||||
<span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="dig-card" [class.dig-card--on]="facilityConfig.bbpsFacility">
|
||||
<div class="dig-card__icon"><i class="fas fa-bell"></i></div>
|
||||
<div class="dig-card__body">
|
||||
<span class="dig-card__label">BBPS Facility</span>
|
||||
<span class="dig-card__status">{{ facilityConfig.bbpsFacility ? 'Enabled' : 'Disabled' }}</span>
|
||||
</div>
|
||||
<label class="dig-toggle">
|
||||
<input type="checkbox" [(ngModel)]="facilityConfig.bbpsFacility" />
|
||||
<span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="dig-card" [class.dig-card--on]="facilityConfig.insuranceCover">
|
||||
<div class="dig-card__icon"><i class="fas fa-shield-alt"></i></div>
|
||||
<div class="dig-card__body">
|
||||
<span class="dig-card__label">Insurance Cover</span>
|
||||
<span class="dig-card__status">{{ facilityConfig.insuranceCover ? 'Enabled' : 'Disabled' }}</span>
|
||||
</div>
|
||||
<label class="dig-toggle">
|
||||
<input type="checkbox" [(ngModel)]="facilityConfig.insuranceCover" />
|
||||
<span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="dig-card" [class.dig-card--on]="facilityConfig.bepgFacility">
|
||||
<div class="dig-card__icon"><i class="fas fa-plug"></i></div>
|
||||
<div class="dig-card__body">
|
||||
<span class="dig-card__label">BEPG Facility</span>
|
||||
<span class="dig-card__status">{{ facilityConfig.bepgFacility ? 'Enabled' : 'Disabled' }}</span>
|
||||
</div>
|
||||
<label class="dig-toggle">
|
||||
<input type="checkbox" [(ngModel)]="facilityConfig.bepgFacility" />
|
||||
<span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="dig-card" [class.dig-card--on]="facilityConfig.neftFacility">
|
||||
<div class="dig-card__icon"><i class="fas fa-money-check-alt"></i></div>
|
||||
<div class="dig-card__body">
|
||||
<span class="dig-card__label">NEFT Facility</span>
|
||||
<span class="dig-card__status">{{ facilityConfig.neftFacility ? 'Enabled' : 'Disabled' }}</span>
|
||||
</div>
|
||||
<label class="dig-toggle">
|
||||
<input type="checkbox" [(ngModel)]="facilityConfig.neftFacility" />
|
||||
<span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="dig-card" [class.dig-card--on]="facilityConfig.rtgsFacility">
|
||||
<div class="dig-card__icon"><i class="fas fa-money-check"></i></div>
|
||||
<div class="dig-card__body">
|
||||
<span class="dig-card__label">RTGS Facility</span>
|
||||
<span class="dig-card__status">{{ facilityConfig.rtgsFacility ? 'Enabled' : 'Disabled' }}</span>
|
||||
</div>
|
||||
<label class="dig-toggle">
|
||||
<input type="checkbox" [(ngModel)]="facilityConfig.rtgsFacility" />
|
||||
<span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="dig-card" [class.dig-card--on]="facilityConfig.interBankTotalCapFacility">
|
||||
<div class="dig-card__icon"><i class="fas fa-balance-scale"></i></div>
|
||||
<div class="dig-card__body">
|
||||
<span class="dig-card__label">Inter-Bank Total Cap</span>
|
||||
<span class="dig-card__status">{{ facilityConfig.interBankTotalCapFacility ? 'Enabled' : 'Disabled' }}</span>
|
||||
</div>
|
||||
<label class="dig-toggle">
|
||||
<input type="checkbox" [(ngModel)]="facilityConfig.interBankTotalCapFacility" />
|
||||
<span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="dig-card" [class.dig-card--on]="facilityConfig.withdrawalFacility">
|
||||
<div class="dig-card__icon"><i class="fas fa-arrow-right-arrow-left"></i></div>
|
||||
<div class="dig-card__body">
|
||||
<span class="dig-card__label">Withdrawal Facility</span>
|
||||
<span class="dig-card__status">{{ facilityConfig.withdrawalFacility ? 'Enabled' : 'Disabled' }}</span>
|
||||
</div>
|
||||
<label class="dig-toggle">
|
||||
<input type="checkbox" [(ngModel)]="facilityConfig.withdrawalFacility" />
|
||||
<span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="dig-card" [class.dig-card--on]="facilityConfig.depositFacilityKyc">
|
||||
<div class="dig-card__icon"><i class="fas fa-id-card"></i></div>
|
||||
<div class="dig-card__body">
|
||||
<span class="dig-card__label">Deposit Facility (KYC)</span>
|
||||
<span class="dig-card__status">{{ facilityConfig.depositFacilityKyc ? 'Enabled' : 'Disabled' }}</span>
|
||||
</div>
|
||||
<label class="dig-toggle">
|
||||
<input type="checkbox" [(ngModel)]="facilityConfig.depositFacilityKyc" />
|
||||
<span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="dig-card" [class.dig-card--on]="facilityConfig.virtualDebitCard">
|
||||
<div class="dig-card__icon"><i class="fas fa-credit-card"></i></div>
|
||||
<div class="dig-card__body">
|
||||
<span class="dig-card__label">Virtual Debit Card</span>
|
||||
<span class="dig-card__status">{{ facilityConfig.virtualDebitCard ? 'Enabled' : 'Disabled' }}</span>
|
||||
</div>
|
||||
<label class="dig-toggle">
|
||||
<input type="checkbox" [(ngModel)]="facilityConfig.virtualDebitCard" />
|
||||
<span class="dig-toggle__track"><span class="dig-toggle__thumb"></span></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+165
-154
@@ -6,194 +6,205 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
$border: #d9e2ec;
|
||||
$border-strong: #c7d2de;
|
||||
$text: #24364b;
|
||||
$blue: #2563eb;
|
||||
$blue-light: #eff6ff;
|
||||
$green: #16a34a;
|
||||
$green-light: #f0fdf4;
|
||||
$green-border: #bbf7d0;
|
||||
$border: #e2e8f0;
|
||||
$text: #1e293b;
|
||||
$muted: #64748b;
|
||||
$header-bg: #f8fafc;
|
||||
$gray-bg: #f8fafc;
|
||||
|
||||
.spl-section {
|
||||
// ── Wrapper ──────────────────────────────────────────────
|
||||
.dig-wrapper {
|
||||
border: 1px solid $border;
|
||||
border-radius: 12px;
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 4px rgb(0 0 0 / 6%);
|
||||
}
|
||||
|
||||
.spl-section__header {
|
||||
// ── Header ───────────────────────────────────────────────
|
||||
.dig-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px 20px;
|
||||
background: $header-bg;
|
||||
gap: 14px;
|
||||
padding: 18px 24px;
|
||||
background: $gray-bg;
|
||||
border-bottom: 1px solid $border;
|
||||
}
|
||||
|
||||
.spl-section__icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 8px;
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
font-size: 14px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.spl-section__title {
|
||||
flex: 1 1 auto;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.spl-section__badge {
|
||||
flex: 0 0 auto;
|
||||
padding: 5px 10px;
|
||||
border-radius: 999px;
|
||||
background: #dbeafe;
|
||||
color: #1d4ed8;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.spl-section__body {
|
||||
padding: 18px 20px 20px;
|
||||
}
|
||||
|
||||
.spl-table-wrap {
|
||||
overflow-x: auto;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.spl-table {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
border: 1px solid $border;
|
||||
|
||||
col.spl-table__col--label {
|
||||
width: 22%;
|
||||
&__icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
background: $blue-light;
|
||||
color: $blue;
|
||||
font-size: 16px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
col.spl-table__col--value {
|
||||
width: 26%;
|
||||
&__text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
border: 1px solid $border;
|
||||
padding: 6px 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
th {
|
||||
background: #f8fafc;
|
||||
color: #64748b;
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
&__title {
|
||||
margin: 0 0 2px;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
td:first-child {
|
||||
background: #f8fafc;
|
||||
font-weight: 600;
|
||||
color: $text;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
td {
|
||||
font-size: 13px;
|
||||
overflow: hidden;
|
||||
&__sub {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: $muted;
|
||||
}
|
||||
|
||||
&__badge {
|
||||
flex: 0 0 auto;
|
||||
padding: 4px 12px;
|
||||
border-radius: 999px;
|
||||
background: #dbeafe;
|
||||
color: $blue;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
}
|
||||
|
||||
.spl-input,
|
||||
.spl-select {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.spl-input {
|
||||
height: 30px;
|
||||
border: 1px solid $border-strong;
|
||||
border-radius: 2px;
|
||||
padding: 0 8px;
|
||||
background: #f8fafc;
|
||||
color: $muted;
|
||||
}
|
||||
|
||||
.spl-select {
|
||||
height: 30px;
|
||||
border: 1px solid $border-strong;
|
||||
border-radius: 2px;
|
||||
padding: 0 6px;
|
||||
background: #f8fafc;
|
||||
color: $muted;
|
||||
}
|
||||
|
||||
.spl-features {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.spl-features__header {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: $muted;
|
||||
margin-bottom: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.spl-features__grid {
|
||||
// ── Grid ─────────────────────────────────────────────────
|
||||
.dig-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 12px 16px;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 0;
|
||||
|
||||
@media (width <= 900px) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
@media (width <= 960px) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
@media (width <= 640px) {
|
||||
@media (width <= 580px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.spl-feature {
|
||||
// ── Card ─────────────────────────────────────────────────
|
||||
.dig-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.spl-feature__label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 600;
|
||||
color: #334155;
|
||||
gap: 12px;
|
||||
padding: 14px 18px;
|
||||
border-right: 1px solid $border;
|
||||
border-bottom: 1px solid $border;
|
||||
background: #fff;
|
||||
transition: background 0.18s ease;
|
||||
cursor: pointer;
|
||||
|
||||
i {
|
||||
color: #2563eb;
|
||||
font-size: 12px;
|
||||
width: 14px;
|
||||
text-align: center;
|
||||
&:nth-child(3n) {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&--on {
|
||||
background: $green-light;
|
||||
|
||||
.dig-card__icon {
|
||||
background: $green-border;
|
||||
color: $green;
|
||||
}
|
||||
|
||||
.dig-card__status {
|
||||
color: $green;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 9px;
|
||||
background: $blue-light;
|
||||
color: $blue;
|
||||
font-size: 14px;
|
||||
flex: 0 0 auto;
|
||||
transition:
|
||||
background 0.18s,
|
||||
color 0.18s;
|
||||
}
|
||||
|
||||
&__body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: $text;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&__status {
|
||||
font-size: 11px;
|
||||
color: $muted;
|
||||
transition: color 0.18s;
|
||||
}
|
||||
}
|
||||
|
||||
.spl-note {
|
||||
margin-top: 16px;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid $border;
|
||||
border-radius: 8px;
|
||||
background: #f8fafc;
|
||||
color: $muted;
|
||||
font-size: 11px;
|
||||
line-height: 1.6;
|
||||
// ── Toggle Switch ─────────────────────────────────────────
|
||||
.dig-toggle {
|
||||
position: relative;
|
||||
flex: 0 0 auto;
|
||||
cursor: pointer;
|
||||
|
||||
input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
&:checked + .dig-toggle__track {
|
||||
background: $green;
|
||||
border-color: $green;
|
||||
}
|
||||
|
||||
&:checked + .dig-toggle__track .dig-toggle__thumb {
|
||||
transform: translateX(18px);
|
||||
}
|
||||
}
|
||||
|
||||
&__track {
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 22px;
|
||||
border-radius: 999px;
|
||||
background: #cbd5e1;
|
||||
border: 1.5px solid #94a3b8;
|
||||
position: relative;
|
||||
transition:
|
||||
background 0.2s,
|
||||
border-color 0.2s;
|
||||
}
|
||||
|
||||
&__thumb {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
}
|
||||
|
||||
+6
-21
@@ -39,31 +39,16 @@ const DEFAULT_FACILITY_CONFIG = {
|
||||
]
|
||||
})
|
||||
export class CurrentAccountDigitalStepComponent {
|
||||
private _currentAccountProductTemplate: any;
|
||||
facilityConfig = { ...DEFAULT_FACILITY_CONFIG };
|
||||
|
||||
@Input()
|
||||
set currentAccountProductTemplate(value: any) {
|
||||
this._currentAccountProductTemplate = value;
|
||||
}
|
||||
get currentAccountProductTemplate(): any {
|
||||
return this._currentAccountProductTemplate;
|
||||
if (value?.accountFacilityConfig) {
|
||||
this.facilityConfig = { ...DEFAULT_FACILITY_CONFIG, ...value.accountFacilityConfig };
|
||||
}
|
||||
}
|
||||
|
||||
get accountFacilityConfig() {
|
||||
return this._currentAccountProductTemplate?.accountFacilityConfig || DEFAULT_FACILITY_CONFIG;
|
||||
}
|
||||
|
||||
get accountFacilityLimits(): any[] {
|
||||
return this._currentAccountProductTemplate?.accountFacilityLimits || [];
|
||||
}
|
||||
|
||||
get depositLimitKyc() {
|
||||
return (
|
||||
this._currentAccountProductTemplate?.depositLimitKyc || {
|
||||
general: { kycType: '', limit: '' },
|
||||
minor: { kycType: '', limit: '' },
|
||||
smallSaving: { kycType: '', limit: '' }
|
||||
}
|
||||
);
|
||||
get currentAccountDigital() {
|
||||
return { accountFacilityConfig: { ...this.facilityConfig } };
|
||||
}
|
||||
}
|
||||
|
||||
-273
@@ -218,174 +218,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Terms -->
|
||||
<div class="preview-section">
|
||||
<div class="preview-section__header">
|
||||
<span class="preview-section__title">{{ 'labels.heading.Terms' | translate }}</span>
|
||||
</div>
|
||||
<div class="preview-body">
|
||||
<div class="preview-grid preview-grid--three">
|
||||
<div class="preview-field">
|
||||
<span class="preview-label">Interest Posting Frequency</span>
|
||||
<span class="preview-value">{{
|
||||
termPreview?.interestPostingPeriodType
|
||||
| find: currentAccountProductTemplate?.interestPostingPeriodTypeOptions : 'id' : 'value'
|
||||
| translateKey: 'catalogs'
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="preview-field">
|
||||
<span class="preview-label">Auto Interest Post</span>
|
||||
<span class="preview-value preview-badge" [class.preview-badge--yes]="termPreview?.autoPost">
|
||||
{{ termPreview?.autoPost | yesNo }}
|
||||
</span>
|
||||
</div>
|
||||
@if (termPreview?.frequencyFixDay !== undefined && termPreview?.frequencyFixDay !== null) {
|
||||
<div class="preview-field">
|
||||
<span class="preview-label">Frequency Fix Day</span>
|
||||
<span class="preview-value">{{ termPreview?.frequencyFixDay }} Days</span>
|
||||
</div>
|
||||
}
|
||||
@if (termPreview?.lastInterestDate) {
|
||||
<div class="preview-field">
|
||||
<span class="preview-label">Last Interest Date</span>
|
||||
<span class="preview-value">{{ termPreview?.lastInterestDate | dateFormat }}</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Settings -->
|
||||
<div class="preview-section">
|
||||
<div class="preview-section__header">
|
||||
<span class="preview-section__title">{{ 'labels.heading.Settings' | translate }}</span>
|
||||
</div>
|
||||
<div class="preview-body">
|
||||
<div class="preview-grid preview-grid--three">
|
||||
@if (
|
||||
settingsPreview?.minRequiredOpeningBalance !== undefined &&
|
||||
settingsPreview?.minRequiredOpeningBalance !== null &&
|
||||
settingsPreview?.minRequiredOpeningBalance !== ''
|
||||
) {
|
||||
<div class="preview-field">
|
||||
<span class="preview-label">{{ 'labels.inputs.Minimum Opening Balance' | translate }}</span>
|
||||
<span class="preview-value">{{ settingsPreview?.minRequiredOpeningBalance | formatNumber }}</span>
|
||||
</div>
|
||||
}
|
||||
<div class="preview-field">
|
||||
<span class="preview-label">{{ 'labels.inputs.Enforce Minimum Balance' | translate }}</span>
|
||||
<span
|
||||
class="preview-value preview-badge"
|
||||
[class.preview-badge--yes]="settingsPreview?.enforceMinRequiredBalance"
|
||||
>
|
||||
{{ settingsPreview?.enforceMinRequiredBalance | yesNo }}
|
||||
</span>
|
||||
</div>
|
||||
@if (
|
||||
settingsPreview?.minRequiredBalance !== undefined &&
|
||||
settingsPreview?.minRequiredBalance !== null &&
|
||||
settingsPreview?.minRequiredBalance !== ''
|
||||
) {
|
||||
<div class="preview-field">
|
||||
<span class="preview-label">{{ 'labels.inputs.Minimum Balance' | translate }}</span>
|
||||
<span class="preview-value">{{ settingsPreview?.minRequiredBalance | formatNumber }}</span>
|
||||
</div>
|
||||
}
|
||||
<div class="preview-field">
|
||||
<span class="preview-label">Balance Frequency</span>
|
||||
<span class="preview-value">{{ settingsPreview?.balanceFrequency || 'Unassigned' }}</span>
|
||||
</div>
|
||||
<div class="preview-field">
|
||||
<span class="preview-label">{{ 'labels.inputs.Apply Withdrawal Fee for Transfers' | translate }}</span>
|
||||
<span
|
||||
class="preview-value preview-badge"
|
||||
[class.preview-badge--yes]="settingsPreview?.withdrawalFeeForTransfers"
|
||||
>
|
||||
{{ settingsPreview?.withdrawalFeeForTransfers | yesNo }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="preview-field">
|
||||
<span class="preview-label">Enable Lock-in Period</span>
|
||||
<span
|
||||
class="preview-value preview-badge"
|
||||
[class.preview-badge--yes]="settingsPreview?.enableLockinPeriod || !!settingsPreview?.lockinPeriodFrequency"
|
||||
>
|
||||
{{ settingsPreview?.enableLockinPeriod || !!settingsPreview?.lockinPeriodFrequency | yesNo }}
|
||||
</span>
|
||||
</div>
|
||||
@if (settingsPreview?.lockinPeriodFrequency) {
|
||||
<div class="preview-field">
|
||||
<span class="preview-label">{{ 'labels.inputs.Lock-in Period' | translate }}</span>
|
||||
<span class="preview-value">
|
||||
{{ settingsPreview?.lockinPeriodFrequency }}
|
||||
{{
|
||||
settingsPreview?.lockinPeriodFrequencyType
|
||||
| find: currentAccountProductTemplate?.lockinPeriodFrequencyTypeOptions : 'id' : 'value'
|
||||
| translateKey: 'catalogs'
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
<div class="preview-field">
|
||||
<span class="preview-label">Account Closed Zero Balance In Day Closing</span>
|
||||
<span
|
||||
class="preview-value preview-badge"
|
||||
[class.preview-badge--yes]="settingsPreview?.accountClosedZeroBalanceInDayClosing"
|
||||
>
|
||||
{{ settingsPreview?.accountClosedZeroBalanceInDayClosing | yesNo }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="preview-field">
|
||||
<span class="preview-label">{{ 'labels.inputs.Is Overdraft Allowed' | translate }}</span>
|
||||
<span class="preview-value preview-badge" [class.preview-badge--yes]="settingsPreview?.allowOverdraft">
|
||||
{{ settingsPreview?.allowOverdraft | yesNo }}
|
||||
</span>
|
||||
</div>
|
||||
@if (settingsPreview?.allowOverdraft) {
|
||||
<div class="preview-field">
|
||||
<span class="preview-label">Avg Balance Calc Period</span>
|
||||
<span class="preview-value">{{ settingsPreview?.avgBalanceCalcPeriod || 'Unassigned' }}</span>
|
||||
</div>
|
||||
<div class="preview-field">
|
||||
<span class="preview-label">Valid For Period</span>
|
||||
<span class="preview-value">{{ settingsPreview?.validForPeriod || 'Unassigned' }}</span>
|
||||
</div>
|
||||
@if (
|
||||
settingsPreview?.overdraftLimit !== undefined &&
|
||||
settingsPreview?.overdraftLimit !== null &&
|
||||
settingsPreview?.overdraftLimit !== ''
|
||||
) {
|
||||
<div class="preview-field">
|
||||
<span class="preview-label">OD Limit %</span>
|
||||
<span class="preview-value">{{ settingsPreview?.overdraftLimit | formatNumber }}</span>
|
||||
</div>
|
||||
}
|
||||
@if (
|
||||
settingsPreview?.nominalAnnualInterestRateOverdraft !== undefined &&
|
||||
settingsPreview?.nominalAnnualInterestRateOverdraft !== null &&
|
||||
settingsPreview?.nominalAnnualInterestRateOverdraft !== ''
|
||||
) {
|
||||
<div class="preview-field">
|
||||
<span class="preview-label">Interest on OD %</span>
|
||||
<span class="preview-value">{{
|
||||
settingsPreview?.nominalAnnualInterestRateOverdraft | formatNumber
|
||||
}}</span>
|
||||
</div>
|
||||
}
|
||||
<div class="preview-field">
|
||||
<span class="preview-label">OD Account Closed Zero Balance In Day Closing</span>
|
||||
<span
|
||||
class="preview-value preview-badge"
|
||||
[class.preview-badge--yes]="settingsPreview?.odAccountClosedZeroBalanceInDayClosing"
|
||||
>
|
||||
{{ settingsPreview?.odAccountClosedZeroBalanceInDayClosing | yesNo }}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (hasDigitalSection) {
|
||||
<div class="preview-section">
|
||||
<div class="preview-section__header">
|
||||
@@ -405,111 +237,6 @@
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@if (digitalPreview?.accountFacilityLimits?.length) {
|
||||
<table class="mat-elevation-z1 preview-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Limit Type</th>
|
||||
<th>General Limit</th>
|
||||
<th>Minor Account Limit</th>
|
||||
<th>Small Saving Limit</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (row of digitalPreview.accountFacilityLimits; track row.limitType) {
|
||||
<tr>
|
||||
<td>{{ row.limitType }}</td>
|
||||
<td>{{ row.generalLimit || 'Unassigned' }}</td>
|
||||
<td>{{ row.minorAccountLimit || 'Unassigned' }}</td>
|
||||
<td>{{ row.smallSavingLimit || 'Unassigned' }}</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
}
|
||||
|
||||
@if (digitalPreview?.depositLimitKyc?.general) {
|
||||
<table class="mat-elevation-z1 preview-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Account Type</th>
|
||||
<th>KYC Type</th>
|
||||
<th>Limit</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>General</td>
|
||||
<td>{{ digitalPreview.depositLimitKyc.general.kycType || 'Unassigned' }}</td>
|
||||
<td>{{ digitalPreview.depositLimitKyc.general.limit || 'Unassigned' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Minor</td>
|
||||
<td>{{ digitalPreview.depositLimitKyc.minor?.kycType || 'Unassigned' }}</td>
|
||||
<td>{{ digitalPreview.depositLimitKyc.minor?.limit || 'Unassigned' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Small Saving</td>
|
||||
<td>{{ digitalPreview.depositLimitKyc.smallSaving?.kycType || 'Unassigned' }}</td>
|
||||
<td>{{ digitalPreview.depositLimitKyc.smallSaving?.limit || 'Unassigned' }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Charges -->
|
||||
@if (currentAccount?.charges?.length) {
|
||||
<div class="preview-section">
|
||||
<div class="preview-section__header">
|
||||
<span class="preview-section__title">{{ 'labels.inputs.Charges' | translate }}</span>
|
||||
</div>
|
||||
<div class="preview-body">
|
||||
<table class="mat-elevation-z1 preview-table" mat-table [dataSource]="currentAccount.charges">
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Name' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let charge">{{ charge.name + ', ' + charge.currency?.displaySymbol }}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="chargeCalculationType">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let charge">
|
||||
{{ charge.chargeCalculationType?.value | translateKey: 'catalogs' }}
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="amount">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let charge">{{ charge.amount | formatNumber }}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="chargeTimeType">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let charge">{{ charge.chargeTimeType?.value }}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="date">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Date' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let charge">
|
||||
@if (
|
||||
charge.chargeTimeType?.value === 'Specified due date' || charge.chargeTimeType?.value === 'Weekly Fee'
|
||||
) {
|
||||
<span>{{ (charge.dueDate | dateFormat) || 'Unassigned' }}</span>
|
||||
} @else if (
|
||||
charge.chargeTimeType?.value === 'Monthly Fee' || charge.chargeTimeType?.value === 'Annual Fee'
|
||||
) {
|
||||
<span>{{ (charge.feeOnMonthDay | dateFormat) || 'Unassigned' }}</span>
|
||||
} @else {
|
||||
<span>N/A</span>
|
||||
}
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="repaymentsEvery">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Repayments Every' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let charge">{{ charge.feeInterval || 'Not Provided' }}</td>
|
||||
</ng-container>
|
||||
<tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns"></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
+1
-7
@@ -49,13 +49,7 @@
|
||||
|
||||
<mat-form-field appearance="outline" class="sat-field" (click)="lastInterestDatePicker.open()">
|
||||
<mat-label>Last Interest Date</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[matDatepicker]="lastInterestDatePicker"
|
||||
formControlName="lastInterestDate"
|
||||
[min]="minDate"
|
||||
[max]="maxDate"
|
||||
/>
|
||||
<input matInput [matDatepicker]="lastInterestDatePicker" formControlName="lastInterestDate" />
|
||||
<mat-datepicker-toggle matSuffix [for]="lastInterestDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #lastInterestDatePicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
Reference in New Issue
Block a user