simpo-component-library 3.6.267 → 3.6.268
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/passbook-transactions/passbook-transactions.component.mjs +3 -3
- package/esm2022/lib/ecommerce/sections/returns-calculator/returns-calculator.component.mjs +4 -3
- package/fesm2022/simpo-component-library.mjs +5 -4
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/lib/ecommerce/sections/authentication-required/authentication-required.component.d.ts +1 -1
- package/lib/ecommerce/sections/product-desc/product-desc.component.d.ts +1 -1
- package/lib/elements/link-editor/link-editor.component.d.ts +1 -1
- package/lib/elements/pricing-s1/pricing-s1.component.d.ts +1 -1
- package/lib/sections/pricing-section/pricing-section.component.d.ts +1 -1
- package/package.json +1 -1
- package/simpo-component-library-3.6.268.tgz +0 -0
- package/simpo-component-library-3.6.267.tgz +0 -0
|
@@ -18215,11 +18215,11 @@ class PassbookTransactionsComponent {
|
|
|
18215
18215
|
});
|
|
18216
18216
|
}
|
|
18217
18217
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PassbookTransactionsComponent, deps: [{ token: StorageServiceService }, { token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18218
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PassbookTransactionsComponent, isStandalone: true, selector: "simpo-passbook-transactions", ngImport: i0, template: "<section class=\"total-container p-2 h-100\">\r\n <div class=\"d-flex text-start fs-20 lh-28 fw-bold clr-primary mb-3 p-1\">\r\n
|
|
18218
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PassbookTransactionsComponent, isStandalone: true, selector: "simpo-passbook-transactions", ngImport: i0, template: "<section class=\"total-container p-2 h-100\">\r\n <div class=\"d-flex text-start fs-20 lh-28 fw-bold clr-primary mb-3 p-1\">\r\n Transactions\r\n </div>\r\n <div class=\"transactions h-100 overflow-scroll p-1\">\r\n <div class=\"transaction w-100 p-3 d-flex justify-content-between align-items-center bx-shd mb-3\"\r\n *ngFor=\"let transaction of allTransactions\">\r\n <div class=\"left d-flex align-items-center gap-3\">\r\n <div class=\"d-flex\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/558782c1755619706471Group 1707484906.png\"\r\n alt=\"load\">\r\n </div>\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"top lh-20 fw-bold clr-primary\">{{transaction?.emiMonthCount ? transaction?.emiMonthCount\r\n : 'N/A' }} Instalment Paid</div>\r\n <div class=\"bottom d-flex gap-2\">\r\n <div class=\"fs-14 lh-20 clr-secondary fw-bold\">{{transaction?.paidDate ? (transaction?.paidDate\r\n | date : 'dd-MM-yyy') : 'N/A'}}</div>\r\n <div class=\"fs-14 lh-20 clr-secondary fw-bold\"> \r\n • {{transaction?.planName ? transaction?.planName : 'N/A'}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex text-end\">\r\n <div class=\"fs-18 lh-28 fw-bold clr-primary\">\u20B9 {{transaction?.paidAmount ? transaction?.paidAmount :\r\n 'N/A'}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n</section>", styles: ["*{font-family:var(--website-font-family)}.fs-20{font-size:20px}.fs-18{font-size:18px}.fs-14{font-size:14px}.lh-28{line-height:28px}.lh-20{line-height:20px}.clr-primary{color:#020817}.clr-secondary{color:#0006}.bx-shd{box-shadow:#63636333 0 2px 8px;border-radius:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }] }); }
|
|
18219
18219
|
}
|
|
18220
18220
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PassbookTransactionsComponent, decorators: [{
|
|
18221
18221
|
type: Component,
|
|
18222
|
-
args: [{ selector: 'simpo-passbook-transactions', standalone: true, imports: [CommonModule], template: "<section class=\"total-container p-2 h-100\">\r\n <div class=\"d-flex text-start fs-20 lh-28 fw-bold clr-primary mb-3 p-1\">\r\n
|
|
18222
|
+
args: [{ selector: 'simpo-passbook-transactions', standalone: true, imports: [CommonModule], template: "<section class=\"total-container p-2 h-100\">\r\n <div class=\"d-flex text-start fs-20 lh-28 fw-bold clr-primary mb-3 p-1\">\r\n Transactions\r\n </div>\r\n <div class=\"transactions h-100 overflow-scroll p-1\">\r\n <div class=\"transaction w-100 p-3 d-flex justify-content-between align-items-center bx-shd mb-3\"\r\n *ngFor=\"let transaction of allTransactions\">\r\n <div class=\"left d-flex align-items-center gap-3\">\r\n <div class=\"d-flex\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/558782c1755619706471Group 1707484906.png\"\r\n alt=\"load\">\r\n </div>\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"top lh-20 fw-bold clr-primary\">{{transaction?.emiMonthCount ? transaction?.emiMonthCount\r\n : 'N/A' }} Instalment Paid</div>\r\n <div class=\"bottom d-flex gap-2\">\r\n <div class=\"fs-14 lh-20 clr-secondary fw-bold\">{{transaction?.paidDate ? (transaction?.paidDate\r\n | date : 'dd-MM-yyy') : 'N/A'}}</div>\r\n <div class=\"fs-14 lh-20 clr-secondary fw-bold\"> \r\n • {{transaction?.planName ? transaction?.planName : 'N/A'}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex text-end\">\r\n <div class=\"fs-18 lh-28 fw-bold clr-primary\">\u20B9 {{transaction?.paidAmount ? transaction?.paidAmount :\r\n 'N/A'}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n</section>", styles: ["*{font-family:var(--website-font-family)}.fs-20{font-size:20px}.fs-18{font-size:18px}.fs-14{font-size:14px}.lh-28{line-height:28px}.lh-20{line-height:20px}.clr-primary{color:#020817}.clr-secondary{color:#0006}.bx-shd{box-shadow:#63636333 0 2px 8px;border-radius:8px}\n"] }]
|
|
18223
18223
|
}], ctorParameters: () => [{ type: StorageServiceService }, { type: RestService }] });
|
|
18224
18224
|
|
|
18225
18225
|
class UserProfileComponent extends BaseSection {
|
|
@@ -20567,6 +20567,7 @@ class ReturnsCalculatorComponent extends BaseSection {
|
|
|
20567
20567
|
}
|
|
20568
20568
|
ngOnInit() {
|
|
20569
20569
|
this.styles = this.data?.styles;
|
|
20570
|
+
console.log(this.styles);
|
|
20570
20571
|
this.getEnrolledSchemes();
|
|
20571
20572
|
}
|
|
20572
20573
|
onSchemeChange(scheme) {
|
|
@@ -20746,7 +20747,7 @@ class ReturnsCalculatorComponent extends BaseSection {
|
|
|
20746
20747
|
this._eventService.cashFreeEvent.emit({ data: { orderSignature: sessionId } });
|
|
20747
20748
|
}
|
|
20748
20749
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ReturnsCalculatorComponent, deps: [{ token: EventsService }, { token: RestService }, { token: i1$1.MatDialog }, { token: StorageServiceService }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
20749
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ReturnsCalculatorComponent, isStandalone: true, selector: "simpo-returns-calculator", inputs: { data: "data", edit: "edit", customClass: "customClass", delete: "delete", index: "index" }, viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n <div class=\"main-section\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoLayout]=\"stylesLayout\">\r\n <div class=\"headers w-100\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <ng-container *ngFor=\"let item of data?.content?.inputText\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <div class=\"calculator bx-shd w-75 mx-auto my-3\">\r\n <div class=\"calculator-header text-center mb-4 w-100\">\r\n <h3 class=\"mb-0 calculator-title\">Interactive Returns Calculator</h3>\r\n </div>\r\n <div class=\"sub-header mb-3 p-3\">\r\n <h6 class=\"mb-0 sub-header-text\">Select Your Preferred Scheme</h6>\r\n </div>\r\n <div class=\"calculator-body-top d-flex mb-4 px-3\">\r\n <ng-container *ngFor=\"let scheme of allSchemes\">\r\n <div class=\"form-check scheme-option p-3 border rounded border-primary ind-border\"\r\n (click)=\"onSchemeChange(scheme)\">\r\n <input class=\"form-check-input cursor-pointer\" type=\"radio\" name=\"scheme\" id=\"individual\"\r\n (change)=\"onSchemeChange(scheme)\" [checked]=\"scheme.selected\">\r\n <div class=\"form-check-label ms-2\">\r\n <div class=\"d-flex align-items-center mb-2\">\r\n \uD83D\uDC64\r\n <div class=\"scheme-header fw-bold\">{{scheme?.schemeName ? scheme.schemeName :\r\n 'N/A'}}</div>\r\n </div>\r\n <div class=\"scheme-description text-muted small\">Pay 10 months, get 11th month FREE\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"sub-header mb-3 px-3\" *ngIf=\"minAmount && maxAmount\">\r\n <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\r\n </div>\r\n\r\n <div class=\"calculate-slider mb-4 px-3\" *ngIf=\"minAmount && maxAmount\">\r\n <div class=\"slider-container position-relative\">\r\n <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\r\n [step]=\"enrolledScheme?.valueStep\" [(ngModel)]=\"monthlyAmount\"\r\n (ngModelChange)=\"onAmountChange()\">\r\n <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n <span class=\"text-muted\">\u20B9{{minAmount | number}}</span>\r\n <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n <span class=\"text-muted\">\u20B9{{maxAmount | number}}</span>\r\n </div>\r\n <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\r\n </div>\r\n <div class=\"random_opitons d-flex justify-content-center gap-3 align-items-center\"\r\n *ngIf=\"installmentOptions && installmentOptions.length > 0\">\r\n <div class=\"option cursor-pointer\" *ngFor=\"let option of installmentOptions\"\r\n (click)=\"setMonthlyAmount(option)\">\r\n {{option}}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"calculator-bottom px-3 mb-5\">\r\n <div *ngIf=\"selectedScheme === 'individual'\" class=\"scheme-results\">\r\n <div class=\"d-flex align-items-center mb-3\">\r\n \u2B50 <h6 class=\"mb-0 individual-results-title\">Individual Scheme Results</h6>\r\n </div>\r\n\r\n <div class=\"row mb-3\">\r\n <div class=\"col-4\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * maturityCount) |\r\n number}}</div>\r\n <div class=\"result-label text-muted small\">Your {{maturityCount}}-Month Contribution\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{benefitAmount | number}}</div>\r\n <div class=\"result-label text-muted small\">Scheme Benefit</div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"result-card result-card-highlight text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\"\r\n *ngIf=\"enrolledScheme?.benefitType != 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n maturityCount)+benefitAmount) | number}}</div>\r\n <div class=\"result-amount fw-bold fs-5\"\r\n *ngIf=\"enrolledScheme?.benefitType === 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n maturityCount)) | number}}</div>\r\n <div class=\"result-label small opacity-75\">Total Redemption Value</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\r\n *ngIf=\"enrolledScheme && (stores.length >= 2 || staffMembers.length >= 2) \">\r\n <div class=\"store_selection w-50 align-items-center gap-1\" *ngIf=\"stores.length >= 2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\r\n Store : </span></div>\r\n <div class=\"store-selector\">\r\n <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\">\r\n <option [ngValue]=\"null\" disabled>Choose a store...</option>\r\n <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\r\n {{store.name}} - {{store.storeRefId}}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class=\"staff-selector w-50 align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\r\n Staff Member : </span></div>\r\n <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\r\n <option value=\"\" disabled>Choose a staff member...</option>\r\n <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\r\n {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\r\n </option>\r\n </select>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\"\r\n (click)=\"enrollScheme(enrolledScheme)\">\r\n <span *ngIf=\"!enrollButtonLoader\">Enroll in Scheme</span>\r\n <ng-container *ngIf=\"enrollButtonLoader\">\r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\r\n ...Loading\r\n </div>\r\n </ng-container>\r\n </button>\r\n </div>\r\n <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\r\n <div class=\"d-flex align-items-center mb-3\">\r\n \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\r\n </div>\r\n\r\n <div class=\"row mb-3\">\r\n <div class=\"col-6\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"result-card result-card-group text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\r\n Enroll in Scheme\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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 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 <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.bx-shd{box-shadow:#ffffff1a 0 1px 1px inset,#32325d40 0 50px 100px -20px,#0000004d 0 30px 60px -30px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.calculator{border-radius:12px;box-shadow:0 4px 6px #0000001a}.calculator-header{background:linear-gradient(145deg,#f2e8cb,#d1c29e);color:#fff;padding:15px;border-radius:8px 8px 0 0}.calculator-title{color:#000;font-weight:600}.sub-header-text{color:#666;font-weight:500}.w-48{width:48%!important}.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}.random_opitons{padding:1%}.option{padding:1% 2%;border:1px solid lightgrey;border-radius:50px}.payment-row:last-child{margin-bottom:0}.label{color:#666;font-size:14px;font-weight:400}.amount{color:#333;font-size:14px;font-weight:500}.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}.continue-btn:hover{background-color:#c82333}.continue-btn:active{background-color:#bd2130}.mat-dialog-container{padding:0!important;border-radius:12px!important}.scheme-option{cursor:pointer;transition:all .3s ease;min-width:22vw}.form-check-input:checked{background-color:#d63384;border-color:#d63384}.form-check-input:focus{box-shadow:0 0 0 .25rem #d6338440}.scheme-header{font-size:16px;margin-bottom:5px;color:#333}.scheme-description{font-size:13px;line-height:1.4}.custom-range{height:8px;border-radius:5px;outline:none}.custom-range::-webkit-slider-thumb{appearance:none;width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0003}.custom-range::-moz-range-thumb{width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px #0003}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.monthly-amount{color:#d4a574}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{background:#d4a574;color:#fff}.result-card-group{background:#d63384;color:#fff}.ind-border{border:2px solid rgb(201,176,130)!important}.grp-border{border:2px solid rgb(214,51,132)!important}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.bonus-message{border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0;gap:25px}.spinner{width:30px;height:30px}.store_selection span{color:#d4a574;font-weight:700}.store-selector{width:100%;margin:5px 0}.store-selector label{display:block;font-weight:600;margin-bottom:8px}.store-selector .form-select{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease;min-width:315px}.store-selector .form-select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.store-selector .form-select:hover{border-color:#bbb}.store-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #007bff}.store-selector .selected-info p{margin:0;font-size:14px;color:#495057}.staff-selector label{display:block;color:#333;white-space:nowrap}.staff-selector span{color:#d4a574;font-weight:700}.staff-selector .form-select{margin:5px 0;width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease}.staff-selector .form-select:focus{outline:none;border-color:#28a745;box-shadow:0 0 0 3px #28a7451a}.staff-selector .form-select:hover{border-color:#bbb}.staff-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #28a745}.staff-selector .selected-info p{margin:0;font-size:14px;color:#495057}.bonus-text{color:#d4a574;font-weight:500}.scheme-results{background:#fff;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.group-results-title{color:#d63384;font-weight:600}.enroll-btn{font-size:16px}.calculator-body-top{overflow-y:scroll;gap:2rem}@media (max-width: 768px){.calculator{width:95%!important}.scheme-results .row{flex-direction:column}.scheme-results :is(.col-4,.col-6){width:100%!important}.calculator-body-top{flex-direction:column!important}.w-48{width:100%!important;margin-bottom:15px}.row .col-4,.row .col-6,.scheme-option{margin-bottom:15px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
|
|
20750
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ReturnsCalculatorComponent, isStandalone: true, selector: "simpo-returns-calculator", inputs: { data: "data", edit: "edit", customClass: "customClass", delete: "delete", index: "index" }, viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n <div class=\"main-section\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoLayout]=\"stylesLayout\">\r\n <div class=\"headers w-100\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <ng-container *ngFor=\"let item of data?.content?.inputText\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <div class=\"calculator bx-shd w-75 mx-auto my-3\">\r\n <div class=\"calculator-header text-center mb-4 w-100\">\r\n <h3 class=\"mb-0 calculator-title\">Interactive Returns Calculator</h3>\r\n </div>\r\n <div class=\"sub-header mb-3 p-3\">\r\n <h6 class=\"mb-0 sub-header-text\">Select Your Preferred Scheme</h6>\r\n </div>\r\n <div class=\"calculator-body-top d-flex mb-4 px-3\">\r\n <ng-container *ngFor=\"let scheme of allSchemes\">\r\n <div class=\"form-check scheme-option p-3 border rounded border-primary ind-border\"\r\n (click)=\"onSchemeChange(scheme)\">\r\n <input class=\"form-check-input cursor-pointer\" type=\"radio\" name=\"scheme\" id=\"individual\"\r\n (change)=\"onSchemeChange(scheme)\" [checked]=\"scheme.selected\">\r\n <div class=\"form-check-label ms-2\">\r\n <div class=\"d-flex align-items-center mb-2\">\r\n \uD83D\uDC64\r\n <div class=\"scheme-header fw-bold\">{{scheme?.schemeName ? scheme.schemeName :\r\n 'N/A'}}</div>\r\n </div>\r\n <div class=\"scheme-description text-muted small\">Pay 10 months, get 11th month FREE\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"sub-header mb-3 px-3\" *ngIf=\"minAmount && maxAmount\">\r\n <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\r\n </div>\r\n\r\n <div class=\"calculate-slider mb-4 px-3\" *ngIf=\"minAmount && maxAmount\">\r\n <div class=\"slider-container position-relative\">\r\n <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\r\n [step]=\"enrolledScheme?.valueStep\" [(ngModel)]=\"monthlyAmount\"\r\n (ngModelChange)=\"onAmountChange()\">\r\n <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n <span class=\"text-muted\">\u20B9{{minAmount | number}}</span>\r\n <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n <span class=\"text-muted\">\u20B9{{maxAmount | number}}</span>\r\n </div>\r\n <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\r\n </div>\r\n <div class=\"random_opitons d-flex justify-content-center gap-3 align-items-center\"\r\n *ngIf=\"installmentOptions && installmentOptions.length > 0\">\r\n <div class=\"option cursor-pointer\" *ngFor=\"let option of installmentOptions\"\r\n (click)=\"setMonthlyAmount(option)\">\r\n {{option}}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"calculator-bottom px-3 mb-5\">\r\n <div *ngIf=\"selectedScheme === 'individual'\" class=\"scheme-results\">\r\n <div class=\"d-flex align-items-center mb-3\">\r\n \u2B50 <h6 class=\"mb-0 individual-results-title\">Individual Scheme Results</h6>\r\n </div>\r\n\r\n <div class=\"row mb-3\">\r\n <div class=\"col-4\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * maturityCount) |\r\n number}}</div>\r\n <div class=\"result-label text-muted small\">Your {{maturityCount}}-Month Contribution\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{benefitAmount | number}}</div>\r\n <div class=\"result-label text-muted small\">Scheme Benefit</div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"result-card result-card-highlight text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\"\r\n *ngIf=\"enrolledScheme?.benefitType != 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n maturityCount)+benefitAmount) | number}}</div>\r\n <div class=\"result-amount fw-bold fs-5\"\r\n *ngIf=\"enrolledScheme?.benefitType === 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n maturityCount)) | number}}</div>\r\n <div class=\"result-label small opacity-75\">Total Redemption Value</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\r\n *ngIf=\"enrolledScheme && (stores.length >= 2 || staffMembers.length >= 2) \">\r\n <div class=\"store_selection w-50 align-items-center gap-1\" *ngIf=\"stores.length >= 2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\r\n Store : </span></div>\r\n <div class=\"store-selector\">\r\n <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\">\r\n <option [ngValue]=\"null\" disabled>Choose a store...</option>\r\n <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\r\n {{store.name}} - {{store.storeRefId}}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class=\"staff-selector w-50 align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\r\n Staff Member : </span></div>\r\n <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\r\n <option value=\"\" disabled>Choose a staff member...</option>\r\n <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\r\n {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\r\n </option>\r\n </select>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\"\r\n (click)=\"enrollScheme(enrolledScheme)\" [style.borderColor]=\"styles?.background?.accentColor\">\r\n <span *ngIf=\"!enrollButtonLoader\">Enroll in Scheme</span>\r\n <ng-container *ngIf=\"enrollButtonLoader\">\r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\r\n ...Loading\r\n </div>\r\n </ng-container>\r\n </button>\r\n </div>\r\n <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\r\n <div class=\"d-flex align-items-center mb-3\">\r\n \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\r\n </div>\r\n\r\n <div class=\"row mb-3\">\r\n <div class=\"col-6\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"result-card result-card-group text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\r\n Enroll in Scheme\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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 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 <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.bx-shd{box-shadow:#ffffff1a 0 1px 1px inset,#32325d40 0 50px 100px -20px,#0000004d 0 30px 60px -30px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.calculator{border-radius:12px;box-shadow:0 4px 6px #0000001a}.calculator-header{background:linear-gradient(145deg,#f2e8cb,#d1c29e);color:#fff;padding:15px;border-radius:8px 8px 0 0}.calculator-title{color:#000;font-weight:600}.sub-header-text{color:#666;font-weight:500}.w-48{width:48%!important}.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}.random_opitons{padding:1%}.option{padding:1% 2%;border:1px solid lightgrey;border-radius:50px}.payment-row:last-child{margin-bottom:0}.label{color:#666;font-size:14px;font-weight:400}.amount{color:#333;font-size:14px;font-weight:500}.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}.continue-btn:hover{background-color:#c82333}.continue-btn:active{background-color:#bd2130}.mat-dialog-container{padding:0!important;border-radius:12px!important}.scheme-option{cursor:pointer;transition:all .3s ease;min-width:22vw}.form-check-input:checked{background-color:#d63384;border-color:#d63384}.form-check-input:focus{box-shadow:0 0 0 .25rem #d6338440}.scheme-header{font-size:16px;margin-bottom:5px;color:#333}.scheme-description{font-size:13px;line-height:1.4}.custom-range{height:8px;border-radius:5px;outline:none}.custom-range::-webkit-slider-thumb{appearance:none;width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0003}.custom-range::-moz-range-thumb{width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px #0003}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.monthly-amount{color:#d4a574}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{background:#d4a574;color:#fff}.result-card-group{background:#d63384;color:#fff}.ind-border{border:2px solid rgb(201,176,130)!important}.grp-border{border:2px solid rgb(214,51,132)!important}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.bonus-message{border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0;gap:25px}.spinner{width:30px;height:30px}.store_selection span{color:#d4a574;font-weight:700}.store-selector{width:100%;margin:5px 0}.store-selector label{display:block;font-weight:600;margin-bottom:8px}.store-selector .form-select{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease;min-width:315px}.store-selector .form-select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.store-selector .form-select:hover{border-color:#bbb}.store-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #007bff}.store-selector .selected-info p{margin:0;font-size:14px;color:#495057}.staff-selector label{display:block;color:#333;white-space:nowrap}.staff-selector span{color:#d4a574;font-weight:700}.staff-selector .form-select{margin:5px 0;width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease}.staff-selector .form-select:focus{outline:none;border-color:#28a745;box-shadow:0 0 0 3px #28a7451a}.staff-selector .form-select:hover{border-color:#bbb}.staff-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #28a745}.staff-selector .selected-info p{margin:0;font-size:14px;color:#495057}.bonus-text{color:#d4a574;font-weight:500}.scheme-results{background:#fff;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.group-results-title{color:#d63384;font-weight:600}.enroll-btn{font-size:16px;border:1px solid}.calculator-body-top{overflow-y:scroll;gap:2rem}@media (max-width: 768px){.calculator{width:95%!important}.scheme-results .row{flex-direction:column}.scheme-results :is(.col-4,.col-6){width:100%!important}.calculator-body-top{flex-direction:column!important}.w-48{width:100%!important;margin-bottom:15px}.row .col-4,.row .col-6,.scheme-option{margin-bottom:15px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
|
|
20750
20751
|
}
|
|
20751
20752
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ReturnsCalculatorComponent, decorators: [{
|
|
20752
20753
|
type: Component,
|
|
@@ -20766,7 +20767,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
20766
20767
|
TextEditorComponent,
|
|
20767
20768
|
ButtonEditorDirective,
|
|
20768
20769
|
MatProgressSpinner
|
|
20769
|
-
], template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n <div class=\"main-section\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoLayout]=\"stylesLayout\">\r\n <div class=\"headers w-100\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <ng-container *ngFor=\"let item of data?.content?.inputText\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <div class=\"calculator bx-shd w-75 mx-auto my-3\">\r\n <div class=\"calculator-header text-center mb-4 w-100\">\r\n <h3 class=\"mb-0 calculator-title\">Interactive Returns Calculator</h3>\r\n </div>\r\n <div class=\"sub-header mb-3 p-3\">\r\n <h6 class=\"mb-0 sub-header-text\">Select Your Preferred Scheme</h6>\r\n </div>\r\n <div class=\"calculator-body-top d-flex mb-4 px-3\">\r\n <ng-container *ngFor=\"let scheme of allSchemes\">\r\n <div class=\"form-check scheme-option p-3 border rounded border-primary ind-border\"\r\n (click)=\"onSchemeChange(scheme)\">\r\n <input class=\"form-check-input cursor-pointer\" type=\"radio\" name=\"scheme\" id=\"individual\"\r\n (change)=\"onSchemeChange(scheme)\" [checked]=\"scheme.selected\">\r\n <div class=\"form-check-label ms-2\">\r\n <div class=\"d-flex align-items-center mb-2\">\r\n \uD83D\uDC64\r\n <div class=\"scheme-header fw-bold\">{{scheme?.schemeName ? scheme.schemeName :\r\n 'N/A'}}</div>\r\n </div>\r\n <div class=\"scheme-description text-muted small\">Pay 10 months, get 11th month FREE\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"sub-header mb-3 px-3\" *ngIf=\"minAmount && maxAmount\">\r\n <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\r\n </div>\r\n\r\n <div class=\"calculate-slider mb-4 px-3\" *ngIf=\"minAmount && maxAmount\">\r\n <div class=\"slider-container position-relative\">\r\n <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\r\n [step]=\"enrolledScheme?.valueStep\" [(ngModel)]=\"monthlyAmount\"\r\n (ngModelChange)=\"onAmountChange()\">\r\n <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n <span class=\"text-muted\">\u20B9{{minAmount | number}}</span>\r\n <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n <span class=\"text-muted\">\u20B9{{maxAmount | number}}</span>\r\n </div>\r\n <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\r\n </div>\r\n <div class=\"random_opitons d-flex justify-content-center gap-3 align-items-center\"\r\n *ngIf=\"installmentOptions && installmentOptions.length > 0\">\r\n <div class=\"option cursor-pointer\" *ngFor=\"let option of installmentOptions\"\r\n (click)=\"setMonthlyAmount(option)\">\r\n {{option}}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"calculator-bottom px-3 mb-5\">\r\n <div *ngIf=\"selectedScheme === 'individual'\" class=\"scheme-results\">\r\n <div class=\"d-flex align-items-center mb-3\">\r\n \u2B50 <h6 class=\"mb-0 individual-results-title\">Individual Scheme Results</h6>\r\n </div>\r\n\r\n <div class=\"row mb-3\">\r\n <div class=\"col-4\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * maturityCount) |\r\n number}}</div>\r\n <div class=\"result-label text-muted small\">Your {{maturityCount}}-Month Contribution\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{benefitAmount | number}}</div>\r\n <div class=\"result-label text-muted small\">Scheme Benefit</div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"result-card result-card-highlight text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\"\r\n *ngIf=\"enrolledScheme?.benefitType != 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n maturityCount)+benefitAmount) | number}}</div>\r\n <div class=\"result-amount fw-bold fs-5\"\r\n *ngIf=\"enrolledScheme?.benefitType === 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n maturityCount)) | number}}</div>\r\n <div class=\"result-label small opacity-75\">Total Redemption Value</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\r\n *ngIf=\"enrolledScheme && (stores.length >= 2 || staffMembers.length >= 2) \">\r\n <div class=\"store_selection w-50 align-items-center gap-1\" *ngIf=\"stores.length >= 2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\r\n Store : </span></div>\r\n <div class=\"store-selector\">\r\n <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\">\r\n <option [ngValue]=\"null\" disabled>Choose a store...</option>\r\n <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\r\n {{store.name}} - {{store.storeRefId}}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class=\"staff-selector w-50 align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\r\n Staff Member : </span></div>\r\n <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\r\n <option value=\"\" disabled>Choose a staff member...</option>\r\n <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\r\n {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\r\n </option>\r\n </select>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\"\r\n (click)=\"enrollScheme(enrolledScheme)\">\r\n <span *ngIf=\"!enrollButtonLoader\">Enroll in Scheme</span>\r\n <ng-container *ngIf=\"enrollButtonLoader\">\r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\r\n ...Loading\r\n </div>\r\n </ng-container>\r\n </button>\r\n </div>\r\n <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\r\n <div class=\"d-flex align-items-center mb-3\">\r\n \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\r\n </div>\r\n\r\n <div class=\"row mb-3\">\r\n <div class=\"col-6\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"result-card result-card-group text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\r\n Enroll in Scheme\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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 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 <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.bx-shd{box-shadow:#ffffff1a 0 1px 1px inset,#32325d40 0 50px 100px -20px,#0000004d 0 30px 60px -30px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.calculator{border-radius:12px;box-shadow:0 4px 6px #0000001a}.calculator-header{background:linear-gradient(145deg,#f2e8cb,#d1c29e);color:#fff;padding:15px;border-radius:8px 8px 0 0}.calculator-title{color:#000;font-weight:600}.sub-header-text{color:#666;font-weight:500}.w-48{width:48%!important}.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}.random_opitons{padding:1%}.option{padding:1% 2%;border:1px solid lightgrey;border-radius:50px}.payment-row:last-child{margin-bottom:0}.label{color:#666;font-size:14px;font-weight:400}.amount{color:#333;font-size:14px;font-weight:500}.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}.continue-btn:hover{background-color:#c82333}.continue-btn:active{background-color:#bd2130}.mat-dialog-container{padding:0!important;border-radius:12px!important}.scheme-option{cursor:pointer;transition:all .3s ease;min-width:22vw}.form-check-input:checked{background-color:#d63384;border-color:#d63384}.form-check-input:focus{box-shadow:0 0 0 .25rem #d6338440}.scheme-header{font-size:16px;margin-bottom:5px;color:#333}.scheme-description{font-size:13px;line-height:1.4}.custom-range{height:8px;border-radius:5px;outline:none}.custom-range::-webkit-slider-thumb{appearance:none;width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0003}.custom-range::-moz-range-thumb{width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px #0003}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.monthly-amount{color:#d4a574}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{background:#d4a574;color:#fff}.result-card-group{background:#d63384;color:#fff}.ind-border{border:2px solid rgb(201,176,130)!important}.grp-border{border:2px solid rgb(214,51,132)!important}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.bonus-message{border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0;gap:25px}.spinner{width:30px;height:30px}.store_selection span{color:#d4a574;font-weight:700}.store-selector{width:100%;margin:5px 0}.store-selector label{display:block;font-weight:600;margin-bottom:8px}.store-selector .form-select{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease;min-width:315px}.store-selector .form-select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.store-selector .form-select:hover{border-color:#bbb}.store-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #007bff}.store-selector .selected-info p{margin:0;font-size:14px;color:#495057}.staff-selector label{display:block;color:#333;white-space:nowrap}.staff-selector span{color:#d4a574;font-weight:700}.staff-selector .form-select{margin:5px 0;width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease}.staff-selector .form-select:focus{outline:none;border-color:#28a745;box-shadow:0 0 0 3px #28a7451a}.staff-selector .form-select:hover{border-color:#bbb}.staff-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #28a745}.staff-selector .selected-info p{margin:0;font-size:14px;color:#495057}.bonus-text{color:#d4a574;font-weight:500}.scheme-results{background:#fff;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.group-results-title{color:#d63384;font-weight:600}.enroll-btn{font-size:16px}.calculator-body-top{overflow-y:scroll;gap:2rem}@media (max-width: 768px){.calculator{width:95%!important}.scheme-results .row{flex-direction:column}.scheme-results :is(.col-4,.col-6){width:100%!important}.calculator-body-top{flex-direction:column!important}.w-48{width:100%!important;margin-bottom:15px}.row .col-4,.row .col-6,.scheme-option{margin-bottom:15px}}\n"] }]
|
|
20770
|
+
], template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n <div class=\"main-section\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoLayout]=\"stylesLayout\">\r\n <div class=\"headers w-100\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <ng-container *ngFor=\"let item of data?.content?.inputText\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <div class=\"calculator bx-shd w-75 mx-auto my-3\">\r\n <div class=\"calculator-header text-center mb-4 w-100\">\r\n <h3 class=\"mb-0 calculator-title\">Interactive Returns Calculator</h3>\r\n </div>\r\n <div class=\"sub-header mb-3 p-3\">\r\n <h6 class=\"mb-0 sub-header-text\">Select Your Preferred Scheme</h6>\r\n </div>\r\n <div class=\"calculator-body-top d-flex mb-4 px-3\">\r\n <ng-container *ngFor=\"let scheme of allSchemes\">\r\n <div class=\"form-check scheme-option p-3 border rounded border-primary ind-border\"\r\n (click)=\"onSchemeChange(scheme)\">\r\n <input class=\"form-check-input cursor-pointer\" type=\"radio\" name=\"scheme\" id=\"individual\"\r\n (change)=\"onSchemeChange(scheme)\" [checked]=\"scheme.selected\">\r\n <div class=\"form-check-label ms-2\">\r\n <div class=\"d-flex align-items-center mb-2\">\r\n \uD83D\uDC64\r\n <div class=\"scheme-header fw-bold\">{{scheme?.schemeName ? scheme.schemeName :\r\n 'N/A'}}</div>\r\n </div>\r\n <div class=\"scheme-description text-muted small\">Pay 10 months, get 11th month FREE\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"sub-header mb-3 px-3\" *ngIf=\"minAmount && maxAmount\">\r\n <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\r\n </div>\r\n\r\n <div class=\"calculate-slider mb-4 px-3\" *ngIf=\"minAmount && maxAmount\">\r\n <div class=\"slider-container position-relative\">\r\n <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\r\n [step]=\"enrolledScheme?.valueStep\" [(ngModel)]=\"monthlyAmount\"\r\n (ngModelChange)=\"onAmountChange()\">\r\n <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n <span class=\"text-muted\">\u20B9{{minAmount | number}}</span>\r\n <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n <span class=\"text-muted\">\u20B9{{maxAmount | number}}</span>\r\n </div>\r\n <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\r\n </div>\r\n <div class=\"random_opitons d-flex justify-content-center gap-3 align-items-center\"\r\n *ngIf=\"installmentOptions && installmentOptions.length > 0\">\r\n <div class=\"option cursor-pointer\" *ngFor=\"let option of installmentOptions\"\r\n (click)=\"setMonthlyAmount(option)\">\r\n {{option}}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"calculator-bottom px-3 mb-5\">\r\n <div *ngIf=\"selectedScheme === 'individual'\" class=\"scheme-results\">\r\n <div class=\"d-flex align-items-center mb-3\">\r\n \u2B50 <h6 class=\"mb-0 individual-results-title\">Individual Scheme Results</h6>\r\n </div>\r\n\r\n <div class=\"row mb-3\">\r\n <div class=\"col-4\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * maturityCount) |\r\n number}}</div>\r\n <div class=\"result-label text-muted small\">Your {{maturityCount}}-Month Contribution\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{benefitAmount | number}}</div>\r\n <div class=\"result-label text-muted small\">Scheme Benefit</div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"result-card result-card-highlight text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\"\r\n *ngIf=\"enrolledScheme?.benefitType != 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n maturityCount)+benefitAmount) | number}}</div>\r\n <div class=\"result-amount fw-bold fs-5\"\r\n *ngIf=\"enrolledScheme?.benefitType === 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n maturityCount)) | number}}</div>\r\n <div class=\"result-label small opacity-75\">Total Redemption Value</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\r\n *ngIf=\"enrolledScheme && (stores.length >= 2 || staffMembers.length >= 2) \">\r\n <div class=\"store_selection w-50 align-items-center gap-1\" *ngIf=\"stores.length >= 2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\r\n Store : </span></div>\r\n <div class=\"store-selector\">\r\n <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\">\r\n <option [ngValue]=\"null\" disabled>Choose a store...</option>\r\n <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\r\n {{store.name}} - {{store.storeRefId}}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class=\"staff-selector w-50 align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\r\n Staff Member : </span></div>\r\n <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\r\n <option value=\"\" disabled>Choose a staff member...</option>\r\n <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\r\n {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\r\n </option>\r\n </select>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\"\r\n (click)=\"enrollScheme(enrolledScheme)\" [style.borderColor]=\"styles?.background?.accentColor\">\r\n <span *ngIf=\"!enrollButtonLoader\">Enroll in Scheme</span>\r\n <ng-container *ngIf=\"enrollButtonLoader\">\r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\r\n ...Loading\r\n </div>\r\n </ng-container>\r\n </button>\r\n </div>\r\n <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\r\n <div class=\"d-flex align-items-center mb-3\">\r\n \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\r\n </div>\r\n\r\n <div class=\"row mb-3\">\r\n <div class=\"col-6\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"result-card result-card-group text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\r\n Enroll in Scheme\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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 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 <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.bx-shd{box-shadow:#ffffff1a 0 1px 1px inset,#32325d40 0 50px 100px -20px,#0000004d 0 30px 60px -30px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.calculator{border-radius:12px;box-shadow:0 4px 6px #0000001a}.calculator-header{background:linear-gradient(145deg,#f2e8cb,#d1c29e);color:#fff;padding:15px;border-radius:8px 8px 0 0}.calculator-title{color:#000;font-weight:600}.sub-header-text{color:#666;font-weight:500}.w-48{width:48%!important}.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}.random_opitons{padding:1%}.option{padding:1% 2%;border:1px solid lightgrey;border-radius:50px}.payment-row:last-child{margin-bottom:0}.label{color:#666;font-size:14px;font-weight:400}.amount{color:#333;font-size:14px;font-weight:500}.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}.continue-btn:hover{background-color:#c82333}.continue-btn:active{background-color:#bd2130}.mat-dialog-container{padding:0!important;border-radius:12px!important}.scheme-option{cursor:pointer;transition:all .3s ease;min-width:22vw}.form-check-input:checked{background-color:#d63384;border-color:#d63384}.form-check-input:focus{box-shadow:0 0 0 .25rem #d6338440}.scheme-header{font-size:16px;margin-bottom:5px;color:#333}.scheme-description{font-size:13px;line-height:1.4}.custom-range{height:8px;border-radius:5px;outline:none}.custom-range::-webkit-slider-thumb{appearance:none;width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0003}.custom-range::-moz-range-thumb{width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px #0003}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.monthly-amount{color:#d4a574}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{background:#d4a574;color:#fff}.result-card-group{background:#d63384;color:#fff}.ind-border{border:2px solid rgb(201,176,130)!important}.grp-border{border:2px solid rgb(214,51,132)!important}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.bonus-message{border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0;gap:25px}.spinner{width:30px;height:30px}.store_selection span{color:#d4a574;font-weight:700}.store-selector{width:100%;margin:5px 0}.store-selector label{display:block;font-weight:600;margin-bottom:8px}.store-selector .form-select{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease;min-width:315px}.store-selector .form-select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.store-selector .form-select:hover{border-color:#bbb}.store-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #007bff}.store-selector .selected-info p{margin:0;font-size:14px;color:#495057}.staff-selector label{display:block;color:#333;white-space:nowrap}.staff-selector span{color:#d4a574;font-weight:700}.staff-selector .form-select{margin:5px 0;width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease}.staff-selector .form-select:focus{outline:none;border-color:#28a745;box-shadow:0 0 0 3px #28a7451a}.staff-selector .form-select:hover{border-color:#bbb}.staff-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #28a745}.staff-selector .selected-info p{margin:0;font-size:14px;color:#495057}.bonus-text{color:#d4a574;font-weight:500}.scheme-results{background:#fff;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.group-results-title{color:#d63384;font-weight:600}.enroll-btn{font-size:16px;border:1px solid}.calculator-body-top{overflow-y:scroll;gap:2rem}@media (max-width: 768px){.calculator{width:95%!important}.scheme-results .row{flex-direction:column}.scheme-results :is(.col-4,.col-6){width:100%!important}.calculator-body-top{flex-direction:column!important}.w-48{width:100%!important;margin-bottom:15px}.row .col-4,.row .col-6,.scheme-option{margin-bottom:15px}}\n"] }]
|
|
20770
20771
|
}], ctorParameters: () => [{ type: EventsService }, { type: RestService }, { type: i1$1.MatDialog }, { type: StorageServiceService }, { type: i2$2.Router }], propDecorators: { showChargesTemplate: [{
|
|
20771
20772
|
type: ViewChild,
|
|
20772
20773
|
args: ['showCharges', { static: true }]
|