simpo-component-library 3.6.316 → 3.6.317
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/ecommerce/sections/scheme-details/scheme-details.component.mjs +15 -3
- package/esm2022/lib/ecommerce/sections/user-profile/user-profile.component.mjs +2 -1
- package/fesm2022/simpo-component-library.mjs +15 -2
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/lib/ecommerce/sections/scheme-details/scheme-details.component.d.ts +2 -0
- package/package.json +1 -1
- package/simpo-component-library-3.6.317.tgz +0 -0
- package/simpo-component-library-3.6.316.tgz +0 -0
|
@@ -18290,6 +18290,7 @@ class SchemeDetailsComponent {
|
|
|
18290
18290
|
this.gotoSchemeOverview = new EventEmitter();
|
|
18291
18291
|
this.redeemRequestLoader = false;
|
|
18292
18292
|
this.paidMonth = 0;
|
|
18293
|
+
this.goldDeducted = 0;
|
|
18293
18294
|
this.paymentData = [];
|
|
18294
18295
|
this.paymentLoader = false;
|
|
18295
18296
|
this.confirmBtnLoader = false;
|
|
@@ -18457,19 +18458,30 @@ class SchemeDetailsComponent {
|
|
|
18457
18458
|
goBack() {
|
|
18458
18459
|
this.gotoSchemeOverview.emit();
|
|
18459
18460
|
}
|
|
18461
|
+
calculateGoldDeduction() {
|
|
18462
|
+
this.goldDeducted = Number((this.schemeDetails?.earlyRedemptionCharge / this.metalPrice?.price).toFixed(2));
|
|
18463
|
+
}
|
|
18460
18464
|
calculateEnrollmentFee() {
|
|
18465
|
+
let lastPaid;
|
|
18461
18466
|
for (let payment of this.schemeDetails?.schemePayments ?? []) {
|
|
18462
18467
|
if (payment.paymentStatus === 'PAID') {
|
|
18463
18468
|
this.paidMonth++;
|
|
18469
|
+
lastPaid = payment;
|
|
18464
18470
|
}
|
|
18465
18471
|
}
|
|
18472
|
+
let todayDate = new Date();
|
|
18473
|
+
let lastPaidDate = new Date(lastPaid.paidDate);
|
|
18474
|
+
let enrollmentDate = new Date(this.schemeDetails.enrollmentDate);
|
|
18475
|
+
if (lastPaidDate.getMonth() == todayDate.getMonth() && todayDate.getDate() < enrollmentDate.getDate()) {
|
|
18476
|
+
lastPaid--;
|
|
18477
|
+
}
|
|
18466
18478
|
}
|
|
18467
18479
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemeDetailsComponent, deps: [{ token: StorageServiceService }, { token: RestService }, { token: i1$1.MatDialog }, { token: EventsService }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18468
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SchemeDetailsComponent, isStandalone: true, selector: "simpo-scheme-details", inputs: { schemeDetails: "schemeDetails", data: "data", metalPrice: "metalPrice" }, outputs: { gotoSchemeOverview: "gotoSchemeOverview" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }, { propertyName: "slabListTemplate", first: true, predicate: ["showSlab"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"w-100 h-100\">\r\n <!-- Header -->\r\n <div class=\"header\">\r\n <div class=\"header_left d-flex justify-content-between align-items-center\">\r\n <div class=\"back-btn d-flex align-items-center\" (click)=\"goBack()\"><mat-icon>keyboard_backspace</mat-icon>\r\n </div>\r\n <h1>Passbook Details</h1>\r\n </div>\r\n <div class=\"redeem_request cursor-pointer\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"showBenefitSlab()\"\r\n *ngIf=\"schemeDetails?.passBookStatus != 'REDEEM_REQUESTED'\">Raise Redeem Request</div>\r\n </div>\r\n\r\n <!-- Amount Card -->\r\n <div class=\"d-flex justify-content-between amount-card-section\">\r\n <div class=\"w-100\">\r\n <div class=\"amount-card\">\r\n <div class=\"top-dashboard\">\r\n <div class=\"amount-info\">\r\n <div class=\"coin-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\r\n </div>\r\n <div class=\"amount-details\">\r\n <h2>\u20B9{{schemeDetails?.totalPaidAmount ? schemeDetails?.totalPaidAmount : 'N/A'}}</h2>\r\n <p>{{schemeDetails.schemeType === 'GOLD_PROTECTION' ? 'Deposited Amount' : 'Total Available Scheme Amount'}}</p>\r\n </div>\r\n </div>\r\n <div class=\"amount-info\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"coin-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\r\n </div>\r\n <div class=\"amount-details\">\r\n <h2>{{schemeDetails?.totalInvestedMetal}} gms</h2>\r\n <p>Accumulated Gold</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-start justify-content-around scheme-section\">\r\n <div class=\"details_tab\">\r\n <div class=\"section-header\">\r\n <h3>Passbook Details</h3>\r\n <span class=\"redeem-requested\">{{schemeDetails?.passBookStatus ?\r\n schemeDetails?.passBookStatus?.replaceAll('_', ' ') : 'N/A'}}</span>\r\n </div>\r\n\r\n <div class=\"scheme-info\">\r\n <div class=\"scheme-name\">\r\n <span class=\"label\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :\r\n 'N/A'}}</span>\r\n </div>\r\n <div class=\"scheme-id\">\u20B9{{schemeDetails?.installmentAmount ? schemeDetails?.installmentAmount :\r\n 'N/A'}}\r\n Monthly</div>\r\n </div>\r\n\r\n <div class=\"dates-grid\">\r\n <div class=\"date-item\">\r\n <div class=\"date-icon\">\uD83D\uDCC5</div>\r\n <div class=\"date-info\">\r\n <span class=\"date-label\">Scheme started on</span>\r\n <span class=\"date-value\">{{schemeDetails?.createdTimestamp ?\r\n (schemeDetails?.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\r\n </div>\r\n </div>\r\n <div class=\"date-item\">\r\n <div class=\"date-icon\">\uD83D\uDCC5</div>\r\n <div class=\"date-info\">\r\n <span class=\"date-label\">Scheme Matured at</span>\r\n <span class=\"date-value\">{{schemeDetails?.maturityDate ?\r\n (schemeDetails?.maturityDate | date:'mediumDate') : 'N/A' }}</span>\r\n </div>\r\n </div>\r\n <div class=\"completion-info\">\r\n <span class=\"completion-label\">Completed EMIs</span>\r\n <span class=\"completion-value\">{{schemeDetails.dueMonths ?\r\n (schemeDetails?.schemePayments?.length-schemeDetails.dueMonths) :\r\n 0}} out\r\n of {{schemeDetails?.schemePayments?.length}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"enrollment-card\">\r\n <div class=\"enrollment-row\">\r\n <span class=\"enrollment-label\">Group Name</span>\r\n <span class=\"enrollment-value\">{{schemeDetails?.schemeName ?\r\n schemeDetails?.schemeName :'N/A' }}</span>\r\n </div>\r\n\r\n <div class=\"enrollment-row\">\r\n <span class=\"enrollment-label\">Group Code</span>\r\n <span class=\"enrollment-value\">{{schemeDetails.enrollmentGroup?.pwcGroupId ?\r\n schemeDetails.enrollmentGroup.pwcGroupId : 'N/A' }}</span>\r\n </div>\r\n\r\n <div class=\"enrollment-row\">\r\n <span class=\"enrollment-label\">Maturity Date</span>\r\n <span class=\"enrollment-value\">{{schemeDetails.maturityDate ? (schemeDetails.maturityDate | date\r\n : 'dd-MM-yyyy') : 'N/A'}}</span>\r\n </div>\r\n <div class=\"enrollment-row\">\r\n <span class=\"enrollment-label\">Enrollment Id</span>\r\n <span class=\"enrollment-value\">{{schemeDetails.enrollmentId ? schemeDetails.enrollmentId : 'N/A'}}</span>\r\n </div>\r\n </div> -->\r\n </div>\r\n </div>\r\n <!-- <div class=\"quick-actions\">\r\n <h3>Quick Actions</h3>\r\n <div class=\"actions d-flex flex-column justify-content-evenly\">\r\n <div class=\"action-item d-flex align-items-center mb-2\">Make Due Payments\r\n </div>\r\n <div class=\"action-item d-flex align-items-center\">Add Nominee</div>\r\n <div class=\"action-item d-flex align-items-center\">Download SOA</div>\r\n </div>\r\n\r\n <button class=\"enroll-btn\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/782673c1753434311903SVG (1).png\"> Enroll\r\n New Scheme</button>\r\n </div> -->\r\n </div>\r\n\r\n <!-- Scheme Details Section -->\r\n <div class=\"scheme-details\">\r\n <div class=\"section d-flex-flex-column gap-2\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Installments</h2>\r\n </div>\r\n <div class=\"payment-list d-flex flex-column gap-2\">\r\n <ng-container *ngIf=\"paymentData.length;else noPayments\">\r\n <ng-container *ngFor=\"let payment of paymentData;let i = index\">\r\n <div class=\"payment-item\">\r\n <div class=\"payment-info\">\r\n <div class=\"payment-icon upcoming\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\">\r\n </div>\r\n <div class=\"payment-details\">\r\n <h4>{{schemeDetails?.schemeName ? schemeDetails?.schemeName : 'N/A'}}</h4>\r\n <p>Due Date : {{payment?.dueDate ? (payment?.dueDate | date : 'dd-MM-yyyy') :\r\n 'N/A'}}</p>\r\n <p *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && payment.paymentStatus === 'PAID'\">Gold Allocated : {{payment?.totalInvestedMetal}} gms</p>\r\n <p *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && paymentData[i-1]?.paymentStatus === 'PAID' && payment?.paymentStatus === 'DUE'\">Gold Allocate today : {{payment?.dueAmount / metalPrice?.price}} gms</p>\r\n <!-- |\r\n Due by: {{getDueDate(payment?.dueDate)}} days</p> -->\r\n </div>\r\n </div>\r\n <div class=\"payment-amount\">\r\n <div class=\"amount-value\" *ngIf=\"payment?.dueAmount\">\u20B9{{payment?.dueAmount ?\r\n payment.dueAmount :\r\n 'N/A'}}</div>\r\n <div class=\"paid-btn payment-status d-flex align-items-center justify-content-center\"\r\n *ngIf=\"payment?.paymentStatus != 'DUE'\">\r\n Paid\r\n </div>\r\n <div class=\"payment-status pay-now-btn cursor-pointer\"\r\n *ngIf=\"paymentData[i-1]?.paymentStatus === 'PAID' && payment?.paymentStatus === 'DUE'\" (click)=\"payDuePayment(payment)\">\r\n <ng-container *ngIf=\"!paymentLoader\">Pay Now</ng-container>\r\n <ng-container *ngIf=\"paymentLoader\">Loading...</ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Gold Allocate:</span>\r\n <span class=\"amount\">{{storeCharges?.breakdown?.installmentAmount / metalPrice?.price}} gms</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template #showSlab>\r\n <div class=\"main_section\">\r\n <div class=\"slab_header d-flex justify-content-between align-items-center\">\r\n Confirm Redeem Request\r\n <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n </div>\r\n <div class=\"main_body\">\r\n <div class=\"container\">\r\n <div class=\"card\">\r\n <div class=\"card-title\">Jewellers Gold Savings Plan</div>\r\n <div class=\"info-row\">\r\n <span>Plan started on</span>\r\n <span class=\"value\">{{schemeDetails.createdTimestamp ?\r\n (schemeDetails.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Monthly Amount Paid</span>\r\n <span class=\"value\">\u20B9{{schemeDetails?.installmentAmount ?\r\n schemeDetails?.installmentAmount : 'N/A'}}</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Total Amount Paid</span>\r\n <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount ?\r\n schemeDetails?.totalPaidAmount : 'N/A' }}</span>\r\n </div>\r\n <div class=\"info-row\" *ngIf=\"paidMonth < schemeDetails?.minRedemptionMonth\">\r\n <span>Enrollment Fee</span>\r\n <span class=\"value\">\u20B9{{schemeDetails?.earlyRedemptionCharge ?\r\n schemeDetails?.totalPaidAmount : 'N/A' }}</span>\r\n </div>\r\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\r\n <span>Accumulated gold</span>\r\n <span class=\"value\">{{schemeDetails?.totalInvestedMetal}} gms</span>\r\n </div>\r\n <!-- <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\r\n <span>Gold Deducted</span>\r\n <span class=\"value\">\u20B90</span>\r\n </div>\r\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\r\n <span>Accumulated gold after Deduction</span>\r\n <span class=\"value\">\u20B9{{schemeDetails?.enrollmentFee ?\r\n schemeDetails?.enrollmentFee : 'N/A' }}</span>\r\n </div> -->\r\n <div class=\"info-row\">\r\n <span>Total Redeem Amount</span>\r\n <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount - (paidMonth < schemeDetails?.minRedemptionMonth ? schemeDetails?.earlyRedemptionCharge ?? 0 : 0)}}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"card\" *ngIf=\"slabDetails && slabDetails.length > 0\">\r\n <div class=\"card-title center\">Benefits You Will Get</div>\r\n <div class=\"info-row\">\r\n <span>Installments Paid:</span>\r\n <span class=\"value\">{{ schemeDetails?.schemePayments?.length ?\r\n (schemeDetails?.schemePayments?.length -\r\n schemeDetails?.dueMonths) : 'N/A'}}</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Benefit Slab:</span>\r\n <span class=\"value\">{{slabDetails[0]?.minMonths >= 0 ? slabDetails[0]?.minMonths\r\n :\r\n 'N/A'}} - {{slabDetails[0]?.maxMonths ? slabDetails[0]?.maxMonths : 'N/A'}}\r\n months</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Benefit Percentage:</span>\r\n <span class=\"value\">{{slabDetails[0].benefitPercentage >= 0 ?\r\n slabDetails[0].benefitPercentage : 'N/A'}}%</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Benefit Amount:</span>\r\n <span class=\"value highlight\">\u20B9{{slabDetails[0]?.benefitAmount >= 0 ?\r\n slabDetails[0]?.benefitAmount : 'N/A'}}</span>\r\n </div>\r\n </div>\r\n\r\n <button class=\"confirm-btn\" (click)=\"confirmRequest()\"\r\n *ngIf=\"!redeemRequestLoader\">Confirm Request</button>\r\n <button class=\"confirm-btn redeem-request-btn\" *ngIf=\"redeemRequestLoader\">\r\n <mat-spinner></mat-spinner>\r\n Requesting..\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template #noPayments>\r\n <div class=\"d-flex justify-content-center align-items-center w-100 h-100\">\r\n <span>No Upcoming Payments</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n <div class=\"tabs\">\r\n <button class=\"tab d-flex justify-content-center align-items-center active\">Transactions</button>\r\n </div>\r\n <div class=\"transactions\">\r\n <ng-container *ngFor=\"let transaction of schemeDetails.schemePayments\">\r\n <div class=\"transaction-item\" *ngIf=\"transaction.paymentStatus === 'PAID'\">\r\n <div class=\"transaction-status paid\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/484102c1753446573473Group 1707484906.png\">\r\n </div>\r\n <div class=\"transaction-details\">\r\n <h4>{{transaction.emiMonthCount ? transaction.emiMonthCount : 'N/A' }}st Instalment Paid\r\n </h4>\r\n <p>Payment Date : {{transaction.paidDate ? (transaction.paidDate | date : 'dd-MM-yyyy') :\r\n 'N/A'}}\r\n </p>\r\n </div>\r\n <div class=\"transaction-amount\">\r\n {{transaction.paidAmount ? ('\u20B9'+transaction.paidAmount) : 'N/A' }}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f5f5f5;color:#333}.header{display:flex;align-items:center;justify-content:space-between;padding:20px 16px;background-color:#fff;border-bottom:1px solid #e0e0e0}.back-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:7px}.header_left h1{font-size:18px;font-weight:600;flex-grow:1;text-align:center;margin:0 16px}.header-actions{display:flex;gap:8px}.share-btn,.download-btn{font-size:16px;cursor:pointer;padding:9px;border:1px solid lightgrey;border-radius:5px}.details_tab{border:1px solid lightgrey;padding:3%;border-radius:7px;width:62%}.amount-card{background:linear-gradient(90deg,#fffbeb,#fff7ed);margin:16px;padding:20px;border-radius:12px}.amount-info{display:flex;align-items:center;gap:16px}.coin-icon{font-size:32px}.amount-details h2{font-size:24px;font-weight:700;color:#333;margin-bottom:4px}.amount-details p{font-size:14px;color:#666}.scheme-details{padding:0 16px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-title{font-size:18px;font-weight:600}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;margin:12px 0}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.pay-now-btn{background:#10f464}.paid-btn{color:#10f464}.payment-status{font-size:12px;padding:6px;border-radius:4px}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.section-header h3{font-size:18px;font-weight:600}.redeem-requested{background-color:#fff3e0;color:#e65100;padding:4px 12px;border-radius:16px;font-size:12px;font-weight:500}.scheme-info{margin-bottom:24px}.scheme-name{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.scheme-name .label{font-size:16px;font-weight:600}.scheme-name .redeem-status{background-color:#e8f5e8;color:#2e7d32;padding:4px 12px;border-radius:16px;font-size:12px}.scheme-id{color:#666;font-size:14px}.dates-grid{display:flex;gap:16px;border-top:1px solid lightgrey;justify-content:space-between;padding-top:11px}.date-item{display:flex;align-items:center;gap:8px}.date-icon{font-size:16px}.date-info{display:flex;flex-direction:column}.date-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.date-value{font-size:11px;font-weight:500}.completion-info{display:flex;flex-direction:column;align-items:flex-start;grid-column:span 2}.completion-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.completion-value{font-size:11px;font-weight:500}.tabs{display:flex;border-bottom:1px solid #e0e0e0;margin:20px 0;height:5vh;background:#d3d3d3;align-items:center;padding:0 1%;width:fit-content;border-radius:30px}.tab{background:none;border:none;font-size:10px!important;cursor:pointer;border-bottom:2px solid transparent;color:#666;width:6vw!important;height:80%!important}.tab.active{color:#333;border-radius:30px;font-weight:500;background-color:#fff}.transactions{display:flex;flex-direction:column;gap:16px;padding-bottom:20px}.transaction-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid lightgrey;border-radius:8px}.transaction-status{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}.underline{text-decoration:underline}.transaction-status img{width:100%}.transaction-status.paid{background-color:#4caf50;color:#fff}.transaction-status.due{background-color:#e0e0e0;border:2px solid #bdbdbd}.transaction-details{flex-grow:1}.transaction-details h4{font-size:14px;font-weight:500;margin-bottom:2px}.transaction-details p{font-size:12px;color:#666}.transaction-amount{font-size:16px;font-weight:600}@media (max-width: 480px){.dates-grid{grid-template-columns:1fr}.completion-info{grid-column:span 1;align-items:flex-start}.header{padding:20px 0}.redeem_request{white-space:nowrap}.header_left h1{white-space:nowrap;margin:0 6px}}.scheme-section{flex-direction:column;gap:1rem}.details_tab{width:100%;border-radius:12px}.redeem_request{padding:.3rem .6rem;border-radius:4px;font-weight:700;font-size:14px;border:2px solid}.section{padding:12px!important;max-height:75vh;overflow-y:scroll}.upcoming-status{display:flex;justify-content:center;align-items:center;height:35px;white-space:nowrap}.payment-details p{font-size:12px}.tab{width:22vw!important}.scheme-details{padding:0}.enrollment-card{width:100%!important}.amount-card{margin:0 0 12px}.amount-card-section{flex-direction:column}.actions{height:70%}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.enrollment-card{background:#fff;border-radius:12px;padding:0 24px;border:1px solid lightgrey;width:30%}.section{background:#fff;border-radius:12px;padding:24px;margin:24px 0;border:1px solid #e9ecef}.enrollment-row{display:flex;justify-content:space-between;align-items:center;padding:10.5px 0;border-bottom:1px solid #f0f0f0}.enrollment-row:last-child{border-bottom:none}.enrollment-label{color:#666;font-size:14px;font-weight:500}.enrollment-value{color:#333;font-size:14px;font-weight:600}.enrollment-value.zero{color:#ef4444}.container{max-width:400px;margin:32px auto;padding:0 16px}.card{background:#fff;border-radius:16px;box-shadow:0 2px 10px #00000012;padding:22px 18px 14px;margin-bottom:18px}.card-title{font-weight:600;color:#222;font-size:1.18rem;margin-bottom:10px}.card-title.center{text-align:center;font-size:1.09rem;margin-bottom:16px}.info-row{display:flex;justify-content:space-between;align-items:center;font-size:.99rem;margin-top:7px;margin-bottom:0}.info-row .value{font-weight:500;color:#212121}.main_section{min-width:35vw}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.slab_header{padding:2% 3%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:700;font-size:19px;border-bottom:1px solid lightgrey}.info-row .highlight{border-radius:3px;padding:2px 7px;font-weight:600}.confirm-btn{width:100%;display:block;background:#e22d2f;color:#fff;border:none;outline:none;font-size:1.04rem;font-weight:600;padding:8px 0;border-radius:8px;box-shadow:0 1px 4px #e22d2f33;cursor:pointer;margin-top:18px;letter-spacing:.03em;transition:background .2s}.confirm-btn:hover{background:#c31113}.redeem-request-btn{justify-content:center;display:flex;align-items:center;gap:10px}.redeem-request-btn mat-spinner{height:25px!important;width:25px!important}.top-dashboard{display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }] }); }
|
|
18480
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SchemeDetailsComponent, isStandalone: true, selector: "simpo-scheme-details", inputs: { schemeDetails: "schemeDetails", data: "data", metalPrice: "metalPrice" }, outputs: { gotoSchemeOverview: "gotoSchemeOverview" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }, { propertyName: "slabListTemplate", first: true, predicate: ["showSlab"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"w-100 h-100\">\r\n <!-- Header -->\r\n <div class=\"header\">\r\n <div class=\"header_left d-flex justify-content-between align-items-center\">\r\n <div class=\"back-btn d-flex align-items-center\" (click)=\"goBack()\"><mat-icon>keyboard_backspace</mat-icon>\r\n </div>\r\n <h1>Passbook Details</h1>\r\n </div>\r\n <div class=\"redeem_request cursor-pointer\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"showBenefitSlab()\"\r\n *ngIf=\"schemeDetails?.passBookStatus != 'REDEEM_REQUESTED'\">Raise Redeem Request</div>\r\n </div>\r\n\r\n <!-- Amount Card -->\r\n <div class=\"d-flex justify-content-between amount-card-section\">\r\n <div class=\"w-100\">\r\n <div class=\"amount-card\">\r\n <div class=\"top-dashboard\">\r\n <div class=\"amount-info\">\r\n <div class=\"coin-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\r\n </div>\r\n <div class=\"amount-details\">\r\n <h2>\u20B9{{schemeDetails?.totalPaidAmount ? schemeDetails?.totalPaidAmount : 'N/A'}}</h2>\r\n <p>{{schemeDetails.schemeType === 'GOLD_PROTECTION' ? 'Deposited Amount' : 'Total Available Scheme Amount'}}</p>\r\n </div>\r\n </div>\r\n <div class=\"amount-info\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"coin-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\r\n </div>\r\n <div class=\"amount-details\">\r\n <h2>{{schemeDetails?.totalInvestedMetal}} gms</h2>\r\n <p>Accumulated Gold</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-start justify-content-around scheme-section\">\r\n <div class=\"details_tab\">\r\n <div class=\"section-header\">\r\n <h3>Passbook Details</h3>\r\n <span class=\"redeem-requested\">{{schemeDetails?.passBookStatus ?\r\n schemeDetails?.passBookStatus?.replaceAll('_', ' ') : 'N/A'}}</span>\r\n </div>\r\n\r\n <div class=\"scheme-info\">\r\n <div class=\"scheme-name\">\r\n <span class=\"label\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :\r\n 'N/A'}}</span>\r\n </div>\r\n <div class=\"scheme-id\">\u20B9{{schemeDetails?.installmentAmount ? schemeDetails?.installmentAmount :\r\n 'N/A'}}\r\n Monthly</div>\r\n </div>\r\n\r\n <div class=\"dates-grid\">\r\n <div class=\"date-item\">\r\n <div class=\"date-icon\">\uD83D\uDCC5</div>\r\n <div class=\"date-info\">\r\n <span class=\"date-label\">Scheme started on</span>\r\n <span class=\"date-value\">{{schemeDetails?.createdTimestamp ?\r\n (schemeDetails?.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\r\n </div>\r\n </div>\r\n <div class=\"date-item\">\r\n <div class=\"date-icon\">\uD83D\uDCC5</div>\r\n <div class=\"date-info\">\r\n <span class=\"date-label\">Scheme Matured at</span>\r\n <span class=\"date-value\">{{schemeDetails?.maturityDate ?\r\n (schemeDetails?.maturityDate | date:'mediumDate') : 'N/A' }}</span>\r\n </div>\r\n </div>\r\n <div class=\"completion-info\">\r\n <span class=\"completion-label\">Completed EMIs</span>\r\n <span class=\"completion-value\">{{schemeDetails.dueMonths ?\r\n (schemeDetails?.schemePayments?.length-schemeDetails.dueMonths) :\r\n 0}} out\r\n of {{schemeDetails?.schemePayments?.length}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"enrollment-card\">\r\n <div class=\"enrollment-row\">\r\n <span class=\"enrollment-label\">Group Name</span>\r\n <span class=\"enrollment-value\">{{schemeDetails?.schemeName ?\r\n schemeDetails?.schemeName :'N/A' }}</span>\r\n </div>\r\n\r\n <div class=\"enrollment-row\">\r\n <span class=\"enrollment-label\">Group Code</span>\r\n <span class=\"enrollment-value\">{{schemeDetails.enrollmentGroup?.pwcGroupId ?\r\n schemeDetails.enrollmentGroup.pwcGroupId : 'N/A' }}</span>\r\n </div>\r\n\r\n <div class=\"enrollment-row\">\r\n <span class=\"enrollment-label\">Maturity Date</span>\r\n <span class=\"enrollment-value\">{{schemeDetails.maturityDate ? (schemeDetails.maturityDate | date\r\n : 'dd-MM-yyyy') : 'N/A'}}</span>\r\n </div>\r\n <div class=\"enrollment-row\">\r\n <span class=\"enrollment-label\">Enrollment Id</span>\r\n <span class=\"enrollment-value\">{{schemeDetails.enrollmentId ? schemeDetails.enrollmentId : 'N/A'}}</span>\r\n </div>\r\n </div> -->\r\n </div>\r\n </div>\r\n <!-- <div class=\"quick-actions\">\r\n <h3>Quick Actions</h3>\r\n <div class=\"actions d-flex flex-column justify-content-evenly\">\r\n <div class=\"action-item d-flex align-items-center mb-2\">Make Due Payments\r\n </div>\r\n <div class=\"action-item d-flex align-items-center\">Add Nominee</div>\r\n <div class=\"action-item d-flex align-items-center\">Download SOA</div>\r\n </div>\r\n\r\n <button class=\"enroll-btn\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/782673c1753434311903SVG (1).png\"> Enroll\r\n New Scheme</button>\r\n </div> -->\r\n </div>\r\n\r\n <!-- Scheme Details Section -->\r\n <div class=\"scheme-details\">\r\n <div class=\"section d-flex-flex-column gap-2\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Installments</h2>\r\n </div>\r\n <div class=\"payment-list d-flex flex-column gap-2\">\r\n <ng-container *ngIf=\"paymentData.length;else noPayments\">\r\n <ng-container *ngFor=\"let payment of paymentData;let i = index\">\r\n <div class=\"payment-item\">\r\n <div class=\"payment-info\">\r\n <div class=\"payment-icon upcoming\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\">\r\n </div>\r\n <div class=\"payment-details\">\r\n <h4>{{schemeDetails?.schemeName ? schemeDetails?.schemeName : 'N/A'}}</h4>\r\n <p>Due Date : {{payment?.dueDate ? (payment?.dueDate | date : 'dd-MM-yyyy') :\r\n 'N/A'}}</p>\r\n <p *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && payment.paymentStatus === 'PAID'\">Gold Allocated : {{payment?.totalInvestedMetal}} gms</p>\r\n <p *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && paymentData[i-1]?.paymentStatus === 'PAID' && payment?.paymentStatus === 'DUE'\">Gold Allocate today : {{payment?.dueAmount / metalPrice?.price}} gms</p>\r\n <!-- |\r\n Due by: {{getDueDate(payment?.dueDate)}} days</p> -->\r\n </div>\r\n </div>\r\n <div class=\"payment-amount\">\r\n <div class=\"amount-value\" *ngIf=\"payment?.dueAmount\">\u20B9{{payment?.dueAmount ?\r\n payment.dueAmount :\r\n 'N/A'}}</div>\r\n <div class=\"paid-btn payment-status d-flex align-items-center justify-content-center\"\r\n *ngIf=\"payment?.paymentStatus != 'DUE'\">\r\n Paid\r\n </div>\r\n <div class=\"payment-status pay-now-btn cursor-pointer\"\r\n *ngIf=\"paymentData[i-1]?.paymentStatus === 'PAID' && payment?.paymentStatus === 'DUE'\" (click)=\"payDuePayment(payment)\">\r\n <ng-container *ngIf=\"!paymentLoader\">Pay Now</ng-container>\r\n <ng-container *ngIf=\"paymentLoader\">Loading...</ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Gold Allocate:</span>\r\n <span class=\"amount\">{{storeCharges?.breakdown?.installmentAmount / metalPrice?.price}} gms</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template #showSlab>\r\n <div class=\"main_section\">\r\n <div class=\"slab_header d-flex justify-content-between align-items-center\">\r\n Confirm Redeem Request\r\n <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n </div>\r\n <div class=\"main_body\">\r\n <div class=\"container\">\r\n <div class=\"card\">\r\n <div class=\"card-title\">Jewellers Gold Savings Plan</div>\r\n <div class=\"info-row\">\r\n <span>Plan started on</span>\r\n <span class=\"value\">{{schemeDetails.createdTimestamp ?\r\n (schemeDetails.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Monthly Amount Paid</span>\r\n <span class=\"value\">\u20B9{{schemeDetails?.installmentAmount ?\r\n schemeDetails?.installmentAmount : 'N/A'}}</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Total Amount Paid</span>\r\n <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount ?\r\n schemeDetails?.totalPaidAmount : 'N/A' }}</span>\r\n </div>\r\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType !== 'GOLD_PROTECTION' && paidMonth < schemeDetails?.minRedemptionMonth && schemeDetails?.earlyRedemptionCharge\">\r\n <span>Enrollment Fee</span>\r\n <span class=\"value\">\u20B9{{schemeDetails?.earlyRedemptionCharge}}</span>\r\n </div>\r\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\r\n <span>Accumulated gold</span>\r\n <span class=\"value\">{{schemeDetails?.totalInvestedMetal}} gms</span>\r\n </div>\r\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && paidMonth < schemeDetails?.minRedemptionMonth && schemeDetails?.earlyRedemptionCharge\">\r\n <span>Gold Deducted</span>\r\n <span class=\"value\">{{goldDeducted}} gms</span>\r\n </div>\r\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\r\n <span>Accumulated gold after Deduction</span>\r\n <span class=\"value\">{{schemeDetails?.totalInvestedMetal - (paidMonth < schemeDetails?.minRedemptionMonth ? goldDeducted : 0)}} gms</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Total Redeem Amount</span>\r\n <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount - (paidMonth < schemeDetails?.minRedemptionMonth ? schemeDetails?.earlyRedemptionCharge ?? 0 : 0)}}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"card\" *ngIf=\"slabDetails && slabDetails.length > 0\">\r\n <div class=\"card-title center\">Benefits You Will Get</div>\r\n <div class=\"info-row\">\r\n <span>Installments Paid:</span>\r\n <span class=\"value\">{{ schemeDetails?.schemePayments?.length ?\r\n (schemeDetails?.schemePayments?.length -\r\n schemeDetails?.dueMonths) : 'N/A'}}</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Benefit Slab:</span>\r\n <span class=\"value\">{{slabDetails[0]?.minMonths >= 0 ? slabDetails[0]?.minMonths\r\n :\r\n 'N/A'}} - {{slabDetails[0]?.maxMonths ? slabDetails[0]?.maxMonths : 'N/A'}}\r\n months</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Benefit Percentage:</span>\r\n <span class=\"value\">{{slabDetails[0].benefitPercentage >= 0 ?\r\n slabDetails[0].benefitPercentage : 'N/A'}}%</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Benefit Amount:</span>\r\n <span class=\"value highlight\">\u20B9{{slabDetails[0]?.benefitAmount >= 0 ?\r\n slabDetails[0]?.benefitAmount : 'N/A'}}</span>\r\n </div>\r\n </div>\r\n\r\n <button class=\"confirm-btn\" (click)=\"confirmRequest()\"\r\n *ngIf=\"!redeemRequestLoader\">Confirm Request</button>\r\n <button class=\"confirm-btn redeem-request-btn\" *ngIf=\"redeemRequestLoader\">\r\n <mat-spinner></mat-spinner>\r\n Requesting..\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template #noPayments>\r\n <div class=\"d-flex justify-content-center align-items-center w-100 h-100\">\r\n <span>No Upcoming Payments</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n <div class=\"tabs\">\r\n <button class=\"tab d-flex justify-content-center align-items-center active\">Transactions</button>\r\n </div>\r\n <div class=\"transactions\">\r\n <ng-container *ngFor=\"let transaction of schemeDetails.schemePayments\">\r\n <div class=\"transaction-item\" *ngIf=\"transaction.paymentStatus === 'PAID'\">\r\n <div class=\"transaction-status paid\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/484102c1753446573473Group 1707484906.png\">\r\n </div>\r\n <div class=\"transaction-details\">\r\n <h4>{{transaction.emiMonthCount ? transaction.emiMonthCount : 'N/A' }}st Instalment Paid\r\n </h4>\r\n <p>Payment Date : {{transaction.paidDate ? (transaction.paidDate | date : 'dd-MM-yyyy') :\r\n 'N/A'}}\r\n </p>\r\n </div>\r\n <div class=\"transaction-amount\">\r\n {{transaction.paidAmount ? ('\u20B9'+transaction.paidAmount) : 'N/A' }}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f5f5f5;color:#333}.header{display:flex;align-items:center;justify-content:space-between;padding:20px 16px;background-color:#fff;border-bottom:1px solid #e0e0e0}.back-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:7px}.header_left h1{font-size:18px;font-weight:600;flex-grow:1;text-align:center;margin:0 16px}.header-actions{display:flex;gap:8px}.share-btn,.download-btn{font-size:16px;cursor:pointer;padding:9px;border:1px solid lightgrey;border-radius:5px}.details_tab{border:1px solid lightgrey;padding:3%;border-radius:7px;width:62%}.amount-card{background:linear-gradient(90deg,#fffbeb,#fff7ed);margin:16px;padding:20px;border-radius:12px}.amount-info{display:flex;align-items:center;gap:16px}.coin-icon{font-size:32px}.amount-details h2{font-size:24px;font-weight:700;color:#333;margin-bottom:4px}.amount-details p{font-size:14px;color:#666}.scheme-details{padding:0 16px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-title{font-size:18px;font-weight:600}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;margin:12px 0}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.pay-now-btn{background:#10f464}.paid-btn{color:#10f464}.payment-status{font-size:12px;padding:6px;border-radius:4px}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.section-header h3{font-size:18px;font-weight:600}.redeem-requested{background-color:#fff3e0;color:#e65100;padding:4px 12px;border-radius:16px;font-size:12px;font-weight:500}.scheme-info{margin-bottom:24px}.scheme-name{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.scheme-name .label{font-size:16px;font-weight:600}.scheme-name .redeem-status{background-color:#e8f5e8;color:#2e7d32;padding:4px 12px;border-radius:16px;font-size:12px}.scheme-id{color:#666;font-size:14px}.dates-grid{display:flex;gap:16px;border-top:1px solid lightgrey;justify-content:space-between;padding-top:11px}.date-item{display:flex;align-items:center;gap:8px}.date-icon{font-size:16px}.date-info{display:flex;flex-direction:column}.date-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.date-value{font-size:11px;font-weight:500}.completion-info{display:flex;flex-direction:column;align-items:flex-start;grid-column:span 2}.completion-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.completion-value{font-size:11px;font-weight:500}.tabs{display:flex;border-bottom:1px solid #e0e0e0;margin:20px 0;height:5vh;background:#d3d3d3;align-items:center;padding:0 1%;width:fit-content;border-radius:30px}.tab{background:none;border:none;font-size:10px!important;cursor:pointer;border-bottom:2px solid transparent;color:#666;width:6vw!important;height:80%!important}.tab.active{color:#333;border-radius:30px;font-weight:500;background-color:#fff}.transactions{display:flex;flex-direction:column;gap:16px;padding-bottom:20px}.transaction-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid lightgrey;border-radius:8px}.transaction-status{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}.underline{text-decoration:underline}.transaction-status img{width:100%}.transaction-status.paid{background-color:#4caf50;color:#fff}.transaction-status.due{background-color:#e0e0e0;border:2px solid #bdbdbd}.transaction-details{flex-grow:1}.transaction-details h4{font-size:14px;font-weight:500;margin-bottom:2px}.transaction-details p{font-size:12px;color:#666}.transaction-amount{font-size:16px;font-weight:600}@media (max-width: 480px){.dates-grid{grid-template-columns:1fr}.completion-info{grid-column:span 1;align-items:flex-start}.header{padding:20px 0}.redeem_request{white-space:nowrap}.header_left h1{white-space:nowrap;margin:0 6px}}.scheme-section{flex-direction:column;gap:1rem}.details_tab{width:100%;border-radius:12px}.redeem_request{padding:.3rem .6rem;border-radius:4px;font-weight:700;font-size:14px;border:2px solid}.section{padding:12px!important;max-height:75vh;overflow-y:scroll}.upcoming-status{display:flex;justify-content:center;align-items:center;height:35px;white-space:nowrap}.payment-details p{font-size:12px}.tab{width:22vw!important}.scheme-details{padding:0}.enrollment-card{width:100%!important}.amount-card{margin:0 0 12px}.amount-card-section{flex-direction:column}.actions{height:70%}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.enrollment-card{background:#fff;border-radius:12px;padding:0 24px;border:1px solid lightgrey;width:30%}.section{background:#fff;border-radius:12px;padding:24px;margin:24px 0;border:1px solid #e9ecef}.enrollment-row{display:flex;justify-content:space-between;align-items:center;padding:10.5px 0;border-bottom:1px solid #f0f0f0}.enrollment-row:last-child{border-bottom:none}.enrollment-label{color:#666;font-size:14px;font-weight:500}.enrollment-value{color:#333;font-size:14px;font-weight:600}.enrollment-value.zero{color:#ef4444}.container{max-width:400px;margin:32px auto;padding:0 16px}.card{background:#fff;border-radius:16px;box-shadow:0 2px 10px #00000012;padding:22px 18px 14px;margin-bottom:18px}.card-title{font-weight:600;color:#222;font-size:1.18rem;margin-bottom:10px}.card-title.center{text-align:center;font-size:1.09rem;margin-bottom:16px}.info-row{display:flex;justify-content:space-between;align-items:center;font-size:.99rem;margin-top:7px;margin-bottom:0}.info-row .value{font-weight:500;color:#212121}.main_section{min-width:35vw}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.slab_header{padding:2% 3%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:700;font-size:19px;border-bottom:1px solid lightgrey}.info-row .highlight{border-radius:3px;padding:2px 7px;font-weight:600}.confirm-btn{width:100%;display:block;background:#e22d2f;color:#fff;border:none;outline:none;font-size:1.04rem;font-weight:600;padding:8px 0;border-radius:8px;box-shadow:0 1px 4px #e22d2f33;cursor:pointer;margin-top:18px;letter-spacing:.03em;transition:background .2s}.confirm-btn:hover{background:#c31113}.redeem-request-btn{justify-content:center;display:flex;align-items:center;gap:10px}.redeem-request-btn mat-spinner{height:25px!important;width:25px!important}.top-dashboard{display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }] }); }
|
|
18469
18481
|
}
|
|
18470
18482
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemeDetailsComponent, decorators: [{
|
|
18471
18483
|
type: Component,
|
|
18472
|
-
args: [{ selector: 'simpo-scheme-details', standalone: true, imports: [MatIcon, CommonModule, MatProgressSpinner, MatProgressSpinnerModule], template: "<div class=\"w-100 h-100\">\r\n <!-- Header -->\r\n <div class=\"header\">\r\n <div class=\"header_left d-flex justify-content-between align-items-center\">\r\n <div class=\"back-btn d-flex align-items-center\" (click)=\"goBack()\"><mat-icon>keyboard_backspace</mat-icon>\r\n </div>\r\n <h1>Passbook Details</h1>\r\n </div>\r\n <div class=\"redeem_request cursor-pointer\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"showBenefitSlab()\"\r\n *ngIf=\"schemeDetails?.passBookStatus != 'REDEEM_REQUESTED'\">Raise Redeem Request</div>\r\n </div>\r\n\r\n <!-- Amount Card -->\r\n <div class=\"d-flex justify-content-between amount-card-section\">\r\n <div class=\"w-100\">\r\n <div class=\"amount-card\">\r\n <div class=\"top-dashboard\">\r\n <div class=\"amount-info\">\r\n <div class=\"coin-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\r\n </div>\r\n <div class=\"amount-details\">\r\n <h2>\u20B9{{schemeDetails?.totalPaidAmount ? schemeDetails?.totalPaidAmount : 'N/A'}}</h2>\r\n <p>{{schemeDetails.schemeType === 'GOLD_PROTECTION' ? 'Deposited Amount' : 'Total Available Scheme Amount'}}</p>\r\n </div>\r\n </div>\r\n <div class=\"amount-info\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"coin-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\r\n </div>\r\n <div class=\"amount-details\">\r\n <h2>{{schemeDetails?.totalInvestedMetal}} gms</h2>\r\n <p>Accumulated Gold</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-start justify-content-around scheme-section\">\r\n <div class=\"details_tab\">\r\n <div class=\"section-header\">\r\n <h3>Passbook Details</h3>\r\n <span class=\"redeem-requested\">{{schemeDetails?.passBookStatus ?\r\n schemeDetails?.passBookStatus?.replaceAll('_', ' ') : 'N/A'}}</span>\r\n </div>\r\n\r\n <div class=\"scheme-info\">\r\n <div class=\"scheme-name\">\r\n <span class=\"label\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :\r\n 'N/A'}}</span>\r\n </div>\r\n <div class=\"scheme-id\">\u20B9{{schemeDetails?.installmentAmount ? schemeDetails?.installmentAmount :\r\n 'N/A'}}\r\n Monthly</div>\r\n </div>\r\n\r\n <div class=\"dates-grid\">\r\n <div class=\"date-item\">\r\n <div class=\"date-icon\">\uD83D\uDCC5</div>\r\n <div class=\"date-info\">\r\n <span class=\"date-label\">Scheme started on</span>\r\n <span class=\"date-value\">{{schemeDetails?.createdTimestamp ?\r\n (schemeDetails?.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\r\n </div>\r\n </div>\r\n <div class=\"date-item\">\r\n <div class=\"date-icon\">\uD83D\uDCC5</div>\r\n <div class=\"date-info\">\r\n <span class=\"date-label\">Scheme Matured at</span>\r\n <span class=\"date-value\">{{schemeDetails?.maturityDate ?\r\n (schemeDetails?.maturityDate | date:'mediumDate') : 'N/A' }}</span>\r\n </div>\r\n </div>\r\n <div class=\"completion-info\">\r\n <span class=\"completion-label\">Completed EMIs</span>\r\n <span class=\"completion-value\">{{schemeDetails.dueMonths ?\r\n (schemeDetails?.schemePayments?.length-schemeDetails.dueMonths) :\r\n 0}} out\r\n of {{schemeDetails?.schemePayments?.length}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"enrollment-card\">\r\n <div class=\"enrollment-row\">\r\n <span class=\"enrollment-label\">Group Name</span>\r\n <span class=\"enrollment-value\">{{schemeDetails?.schemeName ?\r\n schemeDetails?.schemeName :'N/A' }}</span>\r\n </div>\r\n\r\n <div class=\"enrollment-row\">\r\n <span class=\"enrollment-label\">Group Code</span>\r\n <span class=\"enrollment-value\">{{schemeDetails.enrollmentGroup?.pwcGroupId ?\r\n schemeDetails.enrollmentGroup.pwcGroupId : 'N/A' }}</span>\r\n </div>\r\n\r\n <div class=\"enrollment-row\">\r\n <span class=\"enrollment-label\">Maturity Date</span>\r\n <span class=\"enrollment-value\">{{schemeDetails.maturityDate ? (schemeDetails.maturityDate | date\r\n : 'dd-MM-yyyy') : 'N/A'}}</span>\r\n </div>\r\n <div class=\"enrollment-row\">\r\n <span class=\"enrollment-label\">Enrollment Id</span>\r\n <span class=\"enrollment-value\">{{schemeDetails.enrollmentId ? schemeDetails.enrollmentId : 'N/A'}}</span>\r\n </div>\r\n </div> -->\r\n </div>\r\n </div>\r\n <!-- <div class=\"quick-actions\">\r\n <h3>Quick Actions</h3>\r\n <div class=\"actions d-flex flex-column justify-content-evenly\">\r\n <div class=\"action-item d-flex align-items-center mb-2\">Make Due Payments\r\n </div>\r\n <div class=\"action-item d-flex align-items-center\">Add Nominee</div>\r\n <div class=\"action-item d-flex align-items-center\">Download SOA</div>\r\n </div>\r\n\r\n <button class=\"enroll-btn\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/782673c1753434311903SVG (1).png\"> Enroll\r\n New Scheme</button>\r\n </div> -->\r\n </div>\r\n\r\n <!-- Scheme Details Section -->\r\n <div class=\"scheme-details\">\r\n <div class=\"section d-flex-flex-column gap-2\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Installments</h2>\r\n </div>\r\n <div class=\"payment-list d-flex flex-column gap-2\">\r\n <ng-container *ngIf=\"paymentData.length;else noPayments\">\r\n <ng-container *ngFor=\"let payment of paymentData;let i = index\">\r\n <div class=\"payment-item\">\r\n <div class=\"payment-info\">\r\n <div class=\"payment-icon upcoming\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\">\r\n </div>\r\n <div class=\"payment-details\">\r\n <h4>{{schemeDetails?.schemeName ? schemeDetails?.schemeName : 'N/A'}}</h4>\r\n <p>Due Date : {{payment?.dueDate ? (payment?.dueDate | date : 'dd-MM-yyyy') :\r\n 'N/A'}}</p>\r\n <p *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && payment.paymentStatus === 'PAID'\">Gold Allocated : {{payment?.totalInvestedMetal}} gms</p>\r\n <p *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && paymentData[i-1]?.paymentStatus === 'PAID' && payment?.paymentStatus === 'DUE'\">Gold Allocate today : {{payment?.dueAmount / metalPrice?.price}} gms</p>\r\n <!-- |\r\n Due by: {{getDueDate(payment?.dueDate)}} days</p> -->\r\n </div>\r\n </div>\r\n <div class=\"payment-amount\">\r\n <div class=\"amount-value\" *ngIf=\"payment?.dueAmount\">\u20B9{{payment?.dueAmount ?\r\n payment.dueAmount :\r\n 'N/A'}}</div>\r\n <div class=\"paid-btn payment-status d-flex align-items-center justify-content-center\"\r\n *ngIf=\"payment?.paymentStatus != 'DUE'\">\r\n Paid\r\n </div>\r\n <div class=\"payment-status pay-now-btn cursor-pointer\"\r\n *ngIf=\"paymentData[i-1]?.paymentStatus === 'PAID' && payment?.paymentStatus === 'DUE'\" (click)=\"payDuePayment(payment)\">\r\n <ng-container *ngIf=\"!paymentLoader\">Pay Now</ng-container>\r\n <ng-container *ngIf=\"paymentLoader\">Loading...</ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Gold Allocate:</span>\r\n <span class=\"amount\">{{storeCharges?.breakdown?.installmentAmount / metalPrice?.price}} gms</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template #showSlab>\r\n <div class=\"main_section\">\r\n <div class=\"slab_header d-flex justify-content-between align-items-center\">\r\n Confirm Redeem Request\r\n <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n </div>\r\n <div class=\"main_body\">\r\n <div class=\"container\">\r\n <div class=\"card\">\r\n <div class=\"card-title\">Jewellers Gold Savings Plan</div>\r\n <div class=\"info-row\">\r\n <span>Plan started on</span>\r\n <span class=\"value\">{{schemeDetails.createdTimestamp ?\r\n (schemeDetails.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Monthly Amount Paid</span>\r\n <span class=\"value\">\u20B9{{schemeDetails?.installmentAmount ?\r\n schemeDetails?.installmentAmount : 'N/A'}}</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Total Amount Paid</span>\r\n <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount ?\r\n schemeDetails?.totalPaidAmount : 'N/A' }}</span>\r\n </div>\r\n <div class=\"info-row\" *ngIf=\"paidMonth < schemeDetails?.minRedemptionMonth\">\r\n <span>Enrollment Fee</span>\r\n <span class=\"value\">\u20B9{{schemeDetails?.earlyRedemptionCharge ?\r\n schemeDetails?.totalPaidAmount : 'N/A' }}</span>\r\n </div>\r\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\r\n <span>Accumulated gold</span>\r\n <span class=\"value\">{{schemeDetails?.totalInvestedMetal}} gms</span>\r\n </div>\r\n <!-- <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\r\n <span>Gold Deducted</span>\r\n <span class=\"value\">\u20B90</span>\r\n </div>\r\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\r\n <span>Accumulated gold after Deduction</span>\r\n <span class=\"value\">\u20B9{{schemeDetails?.enrollmentFee ?\r\n schemeDetails?.enrollmentFee : 'N/A' }}</span>\r\n </div> -->\r\n <div class=\"info-row\">\r\n <span>Total Redeem Amount</span>\r\n <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount - (paidMonth < schemeDetails?.minRedemptionMonth ? schemeDetails?.earlyRedemptionCharge ?? 0 : 0)}}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"card\" *ngIf=\"slabDetails && slabDetails.length > 0\">\r\n <div class=\"card-title center\">Benefits You Will Get</div>\r\n <div class=\"info-row\">\r\n <span>Installments Paid:</span>\r\n <span class=\"value\">{{ schemeDetails?.schemePayments?.length ?\r\n (schemeDetails?.schemePayments?.length -\r\n schemeDetails?.dueMonths) : 'N/A'}}</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Benefit Slab:</span>\r\n <span class=\"value\">{{slabDetails[0]?.minMonths >= 0 ? slabDetails[0]?.minMonths\r\n :\r\n 'N/A'}} - {{slabDetails[0]?.maxMonths ? slabDetails[0]?.maxMonths : 'N/A'}}\r\n months</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Benefit Percentage:</span>\r\n <span class=\"value\">{{slabDetails[0].benefitPercentage >= 0 ?\r\n slabDetails[0].benefitPercentage : 'N/A'}}%</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Benefit Amount:</span>\r\n <span class=\"value highlight\">\u20B9{{slabDetails[0]?.benefitAmount >= 0 ?\r\n slabDetails[0]?.benefitAmount : 'N/A'}}</span>\r\n </div>\r\n </div>\r\n\r\n <button class=\"confirm-btn\" (click)=\"confirmRequest()\"\r\n *ngIf=\"!redeemRequestLoader\">Confirm Request</button>\r\n <button class=\"confirm-btn redeem-request-btn\" *ngIf=\"redeemRequestLoader\">\r\n <mat-spinner></mat-spinner>\r\n Requesting..\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template #noPayments>\r\n <div class=\"d-flex justify-content-center align-items-center w-100 h-100\">\r\n <span>No Upcoming Payments</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n <div class=\"tabs\">\r\n <button class=\"tab d-flex justify-content-center align-items-center active\">Transactions</button>\r\n </div>\r\n <div class=\"transactions\">\r\n <ng-container *ngFor=\"let transaction of schemeDetails.schemePayments\">\r\n <div class=\"transaction-item\" *ngIf=\"transaction.paymentStatus === 'PAID'\">\r\n <div class=\"transaction-status paid\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/484102c1753446573473Group 1707484906.png\">\r\n </div>\r\n <div class=\"transaction-details\">\r\n <h4>{{transaction.emiMonthCount ? transaction.emiMonthCount : 'N/A' }}st Instalment Paid\r\n </h4>\r\n <p>Payment Date : {{transaction.paidDate ? (transaction.paidDate | date : 'dd-MM-yyyy') :\r\n 'N/A'}}\r\n </p>\r\n </div>\r\n <div class=\"transaction-amount\">\r\n {{transaction.paidAmount ? ('\u20B9'+transaction.paidAmount) : 'N/A' }}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f5f5f5;color:#333}.header{display:flex;align-items:center;justify-content:space-between;padding:20px 16px;background-color:#fff;border-bottom:1px solid #e0e0e0}.back-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:7px}.header_left h1{font-size:18px;font-weight:600;flex-grow:1;text-align:center;margin:0 16px}.header-actions{display:flex;gap:8px}.share-btn,.download-btn{font-size:16px;cursor:pointer;padding:9px;border:1px solid lightgrey;border-radius:5px}.details_tab{border:1px solid lightgrey;padding:3%;border-radius:7px;width:62%}.amount-card{background:linear-gradient(90deg,#fffbeb,#fff7ed);margin:16px;padding:20px;border-radius:12px}.amount-info{display:flex;align-items:center;gap:16px}.coin-icon{font-size:32px}.amount-details h2{font-size:24px;font-weight:700;color:#333;margin-bottom:4px}.amount-details p{font-size:14px;color:#666}.scheme-details{padding:0 16px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-title{font-size:18px;font-weight:600}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;margin:12px 0}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.pay-now-btn{background:#10f464}.paid-btn{color:#10f464}.payment-status{font-size:12px;padding:6px;border-radius:4px}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.section-header h3{font-size:18px;font-weight:600}.redeem-requested{background-color:#fff3e0;color:#e65100;padding:4px 12px;border-radius:16px;font-size:12px;font-weight:500}.scheme-info{margin-bottom:24px}.scheme-name{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.scheme-name .label{font-size:16px;font-weight:600}.scheme-name .redeem-status{background-color:#e8f5e8;color:#2e7d32;padding:4px 12px;border-radius:16px;font-size:12px}.scheme-id{color:#666;font-size:14px}.dates-grid{display:flex;gap:16px;border-top:1px solid lightgrey;justify-content:space-between;padding-top:11px}.date-item{display:flex;align-items:center;gap:8px}.date-icon{font-size:16px}.date-info{display:flex;flex-direction:column}.date-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.date-value{font-size:11px;font-weight:500}.completion-info{display:flex;flex-direction:column;align-items:flex-start;grid-column:span 2}.completion-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.completion-value{font-size:11px;font-weight:500}.tabs{display:flex;border-bottom:1px solid #e0e0e0;margin:20px 0;height:5vh;background:#d3d3d3;align-items:center;padding:0 1%;width:fit-content;border-radius:30px}.tab{background:none;border:none;font-size:10px!important;cursor:pointer;border-bottom:2px solid transparent;color:#666;width:6vw!important;height:80%!important}.tab.active{color:#333;border-radius:30px;font-weight:500;background-color:#fff}.transactions{display:flex;flex-direction:column;gap:16px;padding-bottom:20px}.transaction-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid lightgrey;border-radius:8px}.transaction-status{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}.underline{text-decoration:underline}.transaction-status img{width:100%}.transaction-status.paid{background-color:#4caf50;color:#fff}.transaction-status.due{background-color:#e0e0e0;border:2px solid #bdbdbd}.transaction-details{flex-grow:1}.transaction-details h4{font-size:14px;font-weight:500;margin-bottom:2px}.transaction-details p{font-size:12px;color:#666}.transaction-amount{font-size:16px;font-weight:600}@media (max-width: 480px){.dates-grid{grid-template-columns:1fr}.completion-info{grid-column:span 1;align-items:flex-start}.header{padding:20px 0}.redeem_request{white-space:nowrap}.header_left h1{white-space:nowrap;margin:0 6px}}.scheme-section{flex-direction:column;gap:1rem}.details_tab{width:100%;border-radius:12px}.redeem_request{padding:.3rem .6rem;border-radius:4px;font-weight:700;font-size:14px;border:2px solid}.section{padding:12px!important;max-height:75vh;overflow-y:scroll}.upcoming-status{display:flex;justify-content:center;align-items:center;height:35px;white-space:nowrap}.payment-details p{font-size:12px}.tab{width:22vw!important}.scheme-details{padding:0}.enrollment-card{width:100%!important}.amount-card{margin:0 0 12px}.amount-card-section{flex-direction:column}.actions{height:70%}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.enrollment-card{background:#fff;border-radius:12px;padding:0 24px;border:1px solid lightgrey;width:30%}.section{background:#fff;border-radius:12px;padding:24px;margin:24px 0;border:1px solid #e9ecef}.enrollment-row{display:flex;justify-content:space-between;align-items:center;padding:10.5px 0;border-bottom:1px solid #f0f0f0}.enrollment-row:last-child{border-bottom:none}.enrollment-label{color:#666;font-size:14px;font-weight:500}.enrollment-value{color:#333;font-size:14px;font-weight:600}.enrollment-value.zero{color:#ef4444}.container{max-width:400px;margin:32px auto;padding:0 16px}.card{background:#fff;border-radius:16px;box-shadow:0 2px 10px #00000012;padding:22px 18px 14px;margin-bottom:18px}.card-title{font-weight:600;color:#222;font-size:1.18rem;margin-bottom:10px}.card-title.center{text-align:center;font-size:1.09rem;margin-bottom:16px}.info-row{display:flex;justify-content:space-between;align-items:center;font-size:.99rem;margin-top:7px;margin-bottom:0}.info-row .value{font-weight:500;color:#212121}.main_section{min-width:35vw}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.slab_header{padding:2% 3%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:700;font-size:19px;border-bottom:1px solid lightgrey}.info-row .highlight{border-radius:3px;padding:2px 7px;font-weight:600}.confirm-btn{width:100%;display:block;background:#e22d2f;color:#fff;border:none;outline:none;font-size:1.04rem;font-weight:600;padding:8px 0;border-radius:8px;box-shadow:0 1px 4px #e22d2f33;cursor:pointer;margin-top:18px;letter-spacing:.03em;transition:background .2s}.confirm-btn:hover{background:#c31113}.redeem-request-btn{justify-content:center;display:flex;align-items:center;gap:10px}.redeem-request-btn mat-spinner{height:25px!important;width:25px!important}.top-dashboard{display:flex;justify-content:space-between}\n"] }]
|
|
18484
|
+
args: [{ selector: 'simpo-scheme-details', standalone: true, imports: [MatIcon, CommonModule, MatProgressSpinner, MatProgressSpinnerModule], template: "<div class=\"w-100 h-100\">\r\n <!-- Header -->\r\n <div class=\"header\">\r\n <div class=\"header_left d-flex justify-content-between align-items-center\">\r\n <div class=\"back-btn d-flex align-items-center\" (click)=\"goBack()\"><mat-icon>keyboard_backspace</mat-icon>\r\n </div>\r\n <h1>Passbook Details</h1>\r\n </div>\r\n <div class=\"redeem_request cursor-pointer\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"showBenefitSlab()\"\r\n *ngIf=\"schemeDetails?.passBookStatus != 'REDEEM_REQUESTED'\">Raise Redeem Request</div>\r\n </div>\r\n\r\n <!-- Amount Card -->\r\n <div class=\"d-flex justify-content-between amount-card-section\">\r\n <div class=\"w-100\">\r\n <div class=\"amount-card\">\r\n <div class=\"top-dashboard\">\r\n <div class=\"amount-info\">\r\n <div class=\"coin-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\r\n </div>\r\n <div class=\"amount-details\">\r\n <h2>\u20B9{{schemeDetails?.totalPaidAmount ? schemeDetails?.totalPaidAmount : 'N/A'}}</h2>\r\n <p>{{schemeDetails.schemeType === 'GOLD_PROTECTION' ? 'Deposited Amount' : 'Total Available Scheme Amount'}}</p>\r\n </div>\r\n </div>\r\n <div class=\"amount-info\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"coin-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\r\n </div>\r\n <div class=\"amount-details\">\r\n <h2>{{schemeDetails?.totalInvestedMetal}} gms</h2>\r\n <p>Accumulated Gold</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-start justify-content-around scheme-section\">\r\n <div class=\"details_tab\">\r\n <div class=\"section-header\">\r\n <h3>Passbook Details</h3>\r\n <span class=\"redeem-requested\">{{schemeDetails?.passBookStatus ?\r\n schemeDetails?.passBookStatus?.replaceAll('_', ' ') : 'N/A'}}</span>\r\n </div>\r\n\r\n <div class=\"scheme-info\">\r\n <div class=\"scheme-name\">\r\n <span class=\"label\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :\r\n 'N/A'}}</span>\r\n </div>\r\n <div class=\"scheme-id\">\u20B9{{schemeDetails?.installmentAmount ? schemeDetails?.installmentAmount :\r\n 'N/A'}}\r\n Monthly</div>\r\n </div>\r\n\r\n <div class=\"dates-grid\">\r\n <div class=\"date-item\">\r\n <div class=\"date-icon\">\uD83D\uDCC5</div>\r\n <div class=\"date-info\">\r\n <span class=\"date-label\">Scheme started on</span>\r\n <span class=\"date-value\">{{schemeDetails?.createdTimestamp ?\r\n (schemeDetails?.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\r\n </div>\r\n </div>\r\n <div class=\"date-item\">\r\n <div class=\"date-icon\">\uD83D\uDCC5</div>\r\n <div class=\"date-info\">\r\n <span class=\"date-label\">Scheme Matured at</span>\r\n <span class=\"date-value\">{{schemeDetails?.maturityDate ?\r\n (schemeDetails?.maturityDate | date:'mediumDate') : 'N/A' }}</span>\r\n </div>\r\n </div>\r\n <div class=\"completion-info\">\r\n <span class=\"completion-label\">Completed EMIs</span>\r\n <span class=\"completion-value\">{{schemeDetails.dueMonths ?\r\n (schemeDetails?.schemePayments?.length-schemeDetails.dueMonths) :\r\n 0}} out\r\n of {{schemeDetails?.schemePayments?.length}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"enrollment-card\">\r\n <div class=\"enrollment-row\">\r\n <span class=\"enrollment-label\">Group Name</span>\r\n <span class=\"enrollment-value\">{{schemeDetails?.schemeName ?\r\n schemeDetails?.schemeName :'N/A' }}</span>\r\n </div>\r\n\r\n <div class=\"enrollment-row\">\r\n <span class=\"enrollment-label\">Group Code</span>\r\n <span class=\"enrollment-value\">{{schemeDetails.enrollmentGroup?.pwcGroupId ?\r\n schemeDetails.enrollmentGroup.pwcGroupId : 'N/A' }}</span>\r\n </div>\r\n\r\n <div class=\"enrollment-row\">\r\n <span class=\"enrollment-label\">Maturity Date</span>\r\n <span class=\"enrollment-value\">{{schemeDetails.maturityDate ? (schemeDetails.maturityDate | date\r\n : 'dd-MM-yyyy') : 'N/A'}}</span>\r\n </div>\r\n <div class=\"enrollment-row\">\r\n <span class=\"enrollment-label\">Enrollment Id</span>\r\n <span class=\"enrollment-value\">{{schemeDetails.enrollmentId ? schemeDetails.enrollmentId : 'N/A'}}</span>\r\n </div>\r\n </div> -->\r\n </div>\r\n </div>\r\n <!-- <div class=\"quick-actions\">\r\n <h3>Quick Actions</h3>\r\n <div class=\"actions d-flex flex-column justify-content-evenly\">\r\n <div class=\"action-item d-flex align-items-center mb-2\">Make Due Payments\r\n </div>\r\n <div class=\"action-item d-flex align-items-center\">Add Nominee</div>\r\n <div class=\"action-item d-flex align-items-center\">Download SOA</div>\r\n </div>\r\n\r\n <button class=\"enroll-btn\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/782673c1753434311903SVG (1).png\"> Enroll\r\n New Scheme</button>\r\n </div> -->\r\n </div>\r\n\r\n <!-- Scheme Details Section -->\r\n <div class=\"scheme-details\">\r\n <div class=\"section d-flex-flex-column gap-2\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Installments</h2>\r\n </div>\r\n <div class=\"payment-list d-flex flex-column gap-2\">\r\n <ng-container *ngIf=\"paymentData.length;else noPayments\">\r\n <ng-container *ngFor=\"let payment of paymentData;let i = index\">\r\n <div class=\"payment-item\">\r\n <div class=\"payment-info\">\r\n <div class=\"payment-icon upcoming\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\">\r\n </div>\r\n <div class=\"payment-details\">\r\n <h4>{{schemeDetails?.schemeName ? schemeDetails?.schemeName : 'N/A'}}</h4>\r\n <p>Due Date : {{payment?.dueDate ? (payment?.dueDate | date : 'dd-MM-yyyy') :\r\n 'N/A'}}</p>\r\n <p *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && payment.paymentStatus === 'PAID'\">Gold Allocated : {{payment?.totalInvestedMetal}} gms</p>\r\n <p *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && paymentData[i-1]?.paymentStatus === 'PAID' && payment?.paymentStatus === 'DUE'\">Gold Allocate today : {{payment?.dueAmount / metalPrice?.price}} gms</p>\r\n <!-- |\r\n Due by: {{getDueDate(payment?.dueDate)}} days</p> -->\r\n </div>\r\n </div>\r\n <div class=\"payment-amount\">\r\n <div class=\"amount-value\" *ngIf=\"payment?.dueAmount\">\u20B9{{payment?.dueAmount ?\r\n payment.dueAmount :\r\n 'N/A'}}</div>\r\n <div class=\"paid-btn payment-status d-flex align-items-center justify-content-center\"\r\n *ngIf=\"payment?.paymentStatus != 'DUE'\">\r\n Paid\r\n </div>\r\n <div class=\"payment-status pay-now-btn cursor-pointer\"\r\n *ngIf=\"paymentData[i-1]?.paymentStatus === 'PAID' && payment?.paymentStatus === 'DUE'\" (click)=\"payDuePayment(payment)\">\r\n <ng-container *ngIf=\"!paymentLoader\">Pay Now</ng-container>\r\n <ng-container *ngIf=\"paymentLoader\">Loading...</ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Gold Allocate:</span>\r\n <span class=\"amount\">{{storeCharges?.breakdown?.installmentAmount / metalPrice?.price}} gms</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template #showSlab>\r\n <div class=\"main_section\">\r\n <div class=\"slab_header d-flex justify-content-between align-items-center\">\r\n Confirm Redeem Request\r\n <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n </div>\r\n <div class=\"main_body\">\r\n <div class=\"container\">\r\n <div class=\"card\">\r\n <div class=\"card-title\">Jewellers Gold Savings Plan</div>\r\n <div class=\"info-row\">\r\n <span>Plan started on</span>\r\n <span class=\"value\">{{schemeDetails.createdTimestamp ?\r\n (schemeDetails.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Monthly Amount Paid</span>\r\n <span class=\"value\">\u20B9{{schemeDetails?.installmentAmount ?\r\n schemeDetails?.installmentAmount : 'N/A'}}</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Total Amount Paid</span>\r\n <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount ?\r\n schemeDetails?.totalPaidAmount : 'N/A' }}</span>\r\n </div>\r\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType !== 'GOLD_PROTECTION' && paidMonth < schemeDetails?.minRedemptionMonth && schemeDetails?.earlyRedemptionCharge\">\r\n <span>Enrollment Fee</span>\r\n <span class=\"value\">\u20B9{{schemeDetails?.earlyRedemptionCharge}}</span>\r\n </div>\r\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\r\n <span>Accumulated gold</span>\r\n <span class=\"value\">{{schemeDetails?.totalInvestedMetal}} gms</span>\r\n </div>\r\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && paidMonth < schemeDetails?.minRedemptionMonth && schemeDetails?.earlyRedemptionCharge\">\r\n <span>Gold Deducted</span>\r\n <span class=\"value\">{{goldDeducted}} gms</span>\r\n </div>\r\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\r\n <span>Accumulated gold after Deduction</span>\r\n <span class=\"value\">{{schemeDetails?.totalInvestedMetal - (paidMonth < schemeDetails?.minRedemptionMonth ? goldDeducted : 0)}} gms</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Total Redeem Amount</span>\r\n <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount - (paidMonth < schemeDetails?.minRedemptionMonth ? schemeDetails?.earlyRedemptionCharge ?? 0 : 0)}}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"card\" *ngIf=\"slabDetails && slabDetails.length > 0\">\r\n <div class=\"card-title center\">Benefits You Will Get</div>\r\n <div class=\"info-row\">\r\n <span>Installments Paid:</span>\r\n <span class=\"value\">{{ schemeDetails?.schemePayments?.length ?\r\n (schemeDetails?.schemePayments?.length -\r\n schemeDetails?.dueMonths) : 'N/A'}}</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Benefit Slab:</span>\r\n <span class=\"value\">{{slabDetails[0]?.minMonths >= 0 ? slabDetails[0]?.minMonths\r\n :\r\n 'N/A'}} - {{slabDetails[0]?.maxMonths ? slabDetails[0]?.maxMonths : 'N/A'}}\r\n months</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Benefit Percentage:</span>\r\n <span class=\"value\">{{slabDetails[0].benefitPercentage >= 0 ?\r\n slabDetails[0].benefitPercentage : 'N/A'}}%</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Benefit Amount:</span>\r\n <span class=\"value highlight\">\u20B9{{slabDetails[0]?.benefitAmount >= 0 ?\r\n slabDetails[0]?.benefitAmount : 'N/A'}}</span>\r\n </div>\r\n </div>\r\n\r\n <button class=\"confirm-btn\" (click)=\"confirmRequest()\"\r\n *ngIf=\"!redeemRequestLoader\">Confirm Request</button>\r\n <button class=\"confirm-btn redeem-request-btn\" *ngIf=\"redeemRequestLoader\">\r\n <mat-spinner></mat-spinner>\r\n Requesting..\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template #noPayments>\r\n <div class=\"d-flex justify-content-center align-items-center w-100 h-100\">\r\n <span>No Upcoming Payments</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n <div class=\"tabs\">\r\n <button class=\"tab d-flex justify-content-center align-items-center active\">Transactions</button>\r\n </div>\r\n <div class=\"transactions\">\r\n <ng-container *ngFor=\"let transaction of schemeDetails.schemePayments\">\r\n <div class=\"transaction-item\" *ngIf=\"transaction.paymentStatus === 'PAID'\">\r\n <div class=\"transaction-status paid\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/484102c1753446573473Group 1707484906.png\">\r\n </div>\r\n <div class=\"transaction-details\">\r\n <h4>{{transaction.emiMonthCount ? transaction.emiMonthCount : 'N/A' }}st Instalment Paid\r\n </h4>\r\n <p>Payment Date : {{transaction.paidDate ? (transaction.paidDate | date : 'dd-MM-yyyy') :\r\n 'N/A'}}\r\n </p>\r\n </div>\r\n <div class=\"transaction-amount\">\r\n {{transaction.paidAmount ? ('\u20B9'+transaction.paidAmount) : 'N/A' }}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f5f5f5;color:#333}.header{display:flex;align-items:center;justify-content:space-between;padding:20px 16px;background-color:#fff;border-bottom:1px solid #e0e0e0}.back-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:7px}.header_left h1{font-size:18px;font-weight:600;flex-grow:1;text-align:center;margin:0 16px}.header-actions{display:flex;gap:8px}.share-btn,.download-btn{font-size:16px;cursor:pointer;padding:9px;border:1px solid lightgrey;border-radius:5px}.details_tab{border:1px solid lightgrey;padding:3%;border-radius:7px;width:62%}.amount-card{background:linear-gradient(90deg,#fffbeb,#fff7ed);margin:16px;padding:20px;border-radius:12px}.amount-info{display:flex;align-items:center;gap:16px}.coin-icon{font-size:32px}.amount-details h2{font-size:24px;font-weight:700;color:#333;margin-bottom:4px}.amount-details p{font-size:14px;color:#666}.scheme-details{padding:0 16px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-title{font-size:18px;font-weight:600}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;margin:12px 0}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.pay-now-btn{background:#10f464}.paid-btn{color:#10f464}.payment-status{font-size:12px;padding:6px;border-radius:4px}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.section-header h3{font-size:18px;font-weight:600}.redeem-requested{background-color:#fff3e0;color:#e65100;padding:4px 12px;border-radius:16px;font-size:12px;font-weight:500}.scheme-info{margin-bottom:24px}.scheme-name{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.scheme-name .label{font-size:16px;font-weight:600}.scheme-name .redeem-status{background-color:#e8f5e8;color:#2e7d32;padding:4px 12px;border-radius:16px;font-size:12px}.scheme-id{color:#666;font-size:14px}.dates-grid{display:flex;gap:16px;border-top:1px solid lightgrey;justify-content:space-between;padding-top:11px}.date-item{display:flex;align-items:center;gap:8px}.date-icon{font-size:16px}.date-info{display:flex;flex-direction:column}.date-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.date-value{font-size:11px;font-weight:500}.completion-info{display:flex;flex-direction:column;align-items:flex-start;grid-column:span 2}.completion-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.completion-value{font-size:11px;font-weight:500}.tabs{display:flex;border-bottom:1px solid #e0e0e0;margin:20px 0;height:5vh;background:#d3d3d3;align-items:center;padding:0 1%;width:fit-content;border-radius:30px}.tab{background:none;border:none;font-size:10px!important;cursor:pointer;border-bottom:2px solid transparent;color:#666;width:6vw!important;height:80%!important}.tab.active{color:#333;border-radius:30px;font-weight:500;background-color:#fff}.transactions{display:flex;flex-direction:column;gap:16px;padding-bottom:20px}.transaction-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid lightgrey;border-radius:8px}.transaction-status{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}.underline{text-decoration:underline}.transaction-status img{width:100%}.transaction-status.paid{background-color:#4caf50;color:#fff}.transaction-status.due{background-color:#e0e0e0;border:2px solid #bdbdbd}.transaction-details{flex-grow:1}.transaction-details h4{font-size:14px;font-weight:500;margin-bottom:2px}.transaction-details p{font-size:12px;color:#666}.transaction-amount{font-size:16px;font-weight:600}@media (max-width: 480px){.dates-grid{grid-template-columns:1fr}.completion-info{grid-column:span 1;align-items:flex-start}.header{padding:20px 0}.redeem_request{white-space:nowrap}.header_left h1{white-space:nowrap;margin:0 6px}}.scheme-section{flex-direction:column;gap:1rem}.details_tab{width:100%;border-radius:12px}.redeem_request{padding:.3rem .6rem;border-radius:4px;font-weight:700;font-size:14px;border:2px solid}.section{padding:12px!important;max-height:75vh;overflow-y:scroll}.upcoming-status{display:flex;justify-content:center;align-items:center;height:35px;white-space:nowrap}.payment-details p{font-size:12px}.tab{width:22vw!important}.scheme-details{padding:0}.enrollment-card{width:100%!important}.amount-card{margin:0 0 12px}.amount-card-section{flex-direction:column}.actions{height:70%}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.enrollment-card{background:#fff;border-radius:12px;padding:0 24px;border:1px solid lightgrey;width:30%}.section{background:#fff;border-radius:12px;padding:24px;margin:24px 0;border:1px solid #e9ecef}.enrollment-row{display:flex;justify-content:space-between;align-items:center;padding:10.5px 0;border-bottom:1px solid #f0f0f0}.enrollment-row:last-child{border-bottom:none}.enrollment-label{color:#666;font-size:14px;font-weight:500}.enrollment-value{color:#333;font-size:14px;font-weight:600}.enrollment-value.zero{color:#ef4444}.container{max-width:400px;margin:32px auto;padding:0 16px}.card{background:#fff;border-radius:16px;box-shadow:0 2px 10px #00000012;padding:22px 18px 14px;margin-bottom:18px}.card-title{font-weight:600;color:#222;font-size:1.18rem;margin-bottom:10px}.card-title.center{text-align:center;font-size:1.09rem;margin-bottom:16px}.info-row{display:flex;justify-content:space-between;align-items:center;font-size:.99rem;margin-top:7px;margin-bottom:0}.info-row .value{font-weight:500;color:#212121}.main_section{min-width:35vw}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.slab_header{padding:2% 3%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:700;font-size:19px;border-bottom:1px solid lightgrey}.info-row .highlight{border-radius:3px;padding:2px 7px;font-weight:600}.confirm-btn{width:100%;display:block;background:#e22d2f;color:#fff;border:none;outline:none;font-size:1.04rem;font-weight:600;padding:8px 0;border-radius:8px;box-shadow:0 1px 4px #e22d2f33;cursor:pointer;margin-top:18px;letter-spacing:.03em;transition:background .2s}.confirm-btn:hover{background:#c31113}.redeem-request-btn{justify-content:center;display:flex;align-items:center;gap:10px}.redeem-request-btn mat-spinner{height:25px!important;width:25px!important}.top-dashboard{display:flex;justify-content:space-between}\n"] }]
|
|
18473
18485
|
}], ctorParameters: () => [{ type: StorageServiceService }, { type: RestService }, { type: i1$1.MatDialog }, { type: EventsService }, { type: i2$2.Router }], propDecorators: { schemeDetails: [{
|
|
18474
18486
|
type: Input,
|
|
18475
18487
|
args: ["schemeDetails"]
|
|
@@ -19145,6 +19157,7 @@ class UserProfileComponent extends BaseSection {
|
|
|
19145
19157
|
changeStore(ev) {
|
|
19146
19158
|
this.storeId = ev.target.value;
|
|
19147
19159
|
this.totalSavings = 0;
|
|
19160
|
+
this.totalAccumulatedGold = 0;
|
|
19148
19161
|
this.getAllSchemes();
|
|
19149
19162
|
}
|
|
19150
19163
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserProfileComponent, deps: [{ token: i2$2.Router }, { token: EventsService }, { token: RestService }, { token: StorageServiceService }, { token: CartService }, { token: i1$1.MatDialog }, { token: i8$3.MatBottomSheet }, { token: i2$3.CookieService }, { token: i6$1.MessageService }, { token: i2$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
|