simpo-component-library 3.6.297 → 3.6.299
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/authentication-required/authentication-required.component.mjs +3 -3
- package/esm2022/lib/ecommerce/sections/user-profile/user-profile.component.mjs +10 -1
- package/esm2022/lib/ecommerce/sections/verify-payment/verify-payment.component.mjs +75 -57
- package/esm2022/lib/sections/scheme-detail/scheme-detail.component.mjs +3 -4
- package/fesm2022/simpo-component-library.mjs +84 -58
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/lib/ecommerce/sections/verify-payment/verify-payment.component.d.ts +1 -0
- package/package.json +1 -1
- package/simpo-component-library-3.6.299.tgz +0 -0
- package/simpo-component-library-3.6.297.tgz +0 -0
|
@@ -9152,7 +9152,7 @@ class AuthenticationRequiredComponent extends BaseSection {
|
|
|
9152
9152
|
});
|
|
9153
9153
|
}
|
|
9154
9154
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthenticationRequiredComponent, deps: [{ token: RestService }, { token: i2$2.Router }, { token: i4$1.MessageService }, { token: StorageServiceService }, { token: i1$1.MatDialog }, { token: i2$2.ActivatedRoute }, { token: i0.ElementRef }, { token: i1$1.MatDialogRef, optional: true }, { token: i8$2.MatBottomSheetRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9155
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AuthenticationRequiredComponent, isStandalone: true, selector: "simpo-authentication-required", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section [id]=\"data?.id\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"area w-100\">\r\n <ul class=\"circles\">\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n </ul>\r\n </div>\r\n <div [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\" class=\"main-panel d-flex gap-2\">\r\n <div class=\"panel w-100\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container *ngTemplateOutlet=\"currentPage === 'LOGIN' ? loginTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"currentPage === 'SIGNUP' ? signInTemplate : null\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\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 <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\r\n</section>\r\n\r\n<ng-template #loginTemplate>\r\n <div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Email</label>\r\n <input type=\"email\" [(ngModel)]=\"email\" required=\"\" placeholder=\"janedoe@gmail.com\"\r\n (ngModelChange)=\"onEmailChange()\" [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid Email*</span>\r\n </div>\r\n <div class=\"input-box\">\r\n <div class=\"w-100\">\r\n <label for=\"\">Password</label>\r\n <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\"\r\n (ngModelChange)=\"onPasswordChange()\" class=\"w-90\" placeholder=\"Janedoe@1234\"\r\n [style.borderColor]=\"!passwordCheck ? '' : 'red'\">\r\n <span class=\"eye\" (click)=\"showPassword = !showPassword\" style=\"cursor: pointer;\">\r\n <i class=\"fa\" [ngClass]=\"showPassword ? 'fa-eye-slash' : 'fa-eye'\"></i>\r\n </span>\r\n </div>\r\n <span *ngIf=\"passwordCheck && currentPage === 'SIGNUP'\" class=\"f-12\" [style.color]=\"'red'\">Your password must contain 1 Uppercase , 1\r\n Lowercase , 1 Special\r\n Character , 1 Digit and Minimum 8 Characters*</span>\r\n </div>\r\n <!-- <div class=\"forgot-pwd\" [style.color]=\"accentColor\">Forgot Password?</div> -->\r\n <!-- <button class=\"button\" *ngIf=\"!buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n (click)=\"login()\">Login</button> -->\r\n <button class=\"send-btn p-2\" *ngIf=\"!buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"login()\">Login</button>\r\n <!-- <button class=\"button\" *ngIf=\"buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\"\r\n [color]=\"styles?.background?.accentColor\">Loading...</button> -->\r\n <button class=\"send-btn p-2\" *ngIf=\"buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"login()\">Loading...</button>\r\n\r\n\r\n <div class=\"sign-up mt-2\" *ngIf=\"signUpEnabled\">Don't have an account? <span [style.color]=\"accentColor\"\r\n (click)=\"currentPage = 'SIGNUP'\">Sign\r\n Up</span></div>\r\n\r\n <!-- <div class=\"text-center mt-20\">\r\n <div class=\"or-divider\">\r\n <span class=\"or-text\">or</span>\r\n </div>\r\n <div class=\"sign-up\">Login with <span [style.color]=\"accentColor\">OTP</span></div>\r\n </div> -->\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #signInTemplate>\r\n <div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Name</label>\r\n <input type=\"text\" [(ngModel)]=\"userName\" placeholder=\"Jane Doe\">\r\n </div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Email</label>\r\n <input type=\"email\" [(ngModel)]=\"email\" placeholder=\"janedoe@gmail.com\" (ngModelChange)=\"onEmailChange()\"\r\n [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid email*</span>\r\n </div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Phone Number</label>\r\n <input type=\"number\" [(ngModel)]=\"mobile\" (ngModelChange)=\"onMobileChange()\" placeholder=\"9876543219\"\r\n [style.borderColor]=\"!mobileCheck ? '' : 'red'\" class=\"no-arrows\">\r\n <span class=\"f-12\" *ngIf=\"mobileCheck\" [style.color]=\"'red'\">Please Enter valid Mobile number*</span>\r\n </div>\r\n <div class=\" input-box position-relative\">\r\n <label for=\"\">Password</label>\r\n <div class=\"w-100 d-flex align-items-center\">\r\n <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\" class=\"w-90\"\r\n placeholder=\"Janedoe@1234\" [style.borderColor]=\"!passwordCheck ? '' : 'red'\"\r\n (ngModelChange)=\"onPasswordChange()\">\r\n <span class=\"eye\" (click)=\"showPassword = !showPassword\" style=\"cursor: pointer;\">\r\n <i class=\"fa\" [ngClass]=\"showPassword ? 'fa-eye-slash' : 'fa-eye'\"></i>\r\n </span>\r\n </div>\r\n <span *ngIf=\"passwordCheck\" class=\"f-12\" [style.color]=\"'red'\">Your password must contain 1 Uppercase , 1\r\n Lowercase , 1 Special\r\n Character , 1 Digit and Minimum 8 Characters*</span>\r\n <!-- <div class=\"strength-bar-container\">\r\n <div *ngFor=\"let strength of passwordStrength; let idx = index\" class=\"strength-bar\"\r\n [style.backgroundColor]=\"getStrengthColor(idx)\"></div>\r\n </div> -->\r\n </div>\r\n <button class=\"button\" *ngIf=\"!buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n (click)=\"createAccount()\" [disabled]=\"!isEmailValid || !isPasswordValid || !userName\">Create Account</button>\r\n <button class=\"button\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n *ngIf=\"buttonLoading\">Loading...</button>\r\n\r\n\r\n <div class=\"sign-up mt-2\">Already have an account? <span [style.color]=\"accentColor\"\r\n (click)=\"currentPage = 'LOGIN'\">Login</span></div>\r\n </div>\r\n</ng-template>", styles: [".total-container{position:relative;height:auto;perspective:1200px;overflow:hidden}label,.sign-up,.eye{color:#000}.eye{padding:6px;font-size:16px}.w-90{width:90%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-panel{max-width:450px;margin:2rem auto;background:#ffffff26;border-radius:20px;box-shadow:0 25px 50px -12px #00000040;overflow:hidden;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;transform-style:preserve-3d;will-change:transform;perspective:1200px;backface-visibility:hidden}.main-panel:hover{transform:rotateY(3deg) rotateX(2deg) scale(1.02);box-shadow:0 35px 60px -10px #0000004d}.panel{background:#fffffff2;padding:3rem;position:relative;transform-style:preserve-3d;transition:all .4s ease;margin:unset!important}.panel:before{content:\"\";position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(255,255,255,.15) 50%,transparent);opacity:0;transition:opacity .4s ease;pointer-events:none}.panel:hover:before{opacity:1}.input-box{display:flex;flex-direction:column;gap:8px;margin-bottom:1.5rem;position:relative;transform-style:preserve-3d}.input-box label{transform:translateZ(20px)}.input-box input{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;border:2px solid rgba(0,0,0,.08);padding:.75rem 1rem;border-radius:12px;appearance:none;outline:none}.input-box input:focus{border-color:var(--accent-color, #667eea);box-shadow:0 8px 25px -5px #667eea4d;transform:translateY(-3px) translateZ(25px);background:#fff}.input-box input:hover{transform:translateY(-2px) translateZ(15px);box-shadow:0 5px 15px #00000014}.button{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;overflow:hidden;border:none;padding:.5rem 2rem;font-weight:600}.button:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .7s ease}.button:hover{transform:translateY(-3px) translateZ(35px);box-shadow:0 15px 30px -5px var(--accent-shadow, rgba(102, 126, 234, .5))}.button:hover:before{left:100%}.button:active{transform:translateY(-1px) translateZ(25px)}.circles{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.circles li{position:absolute;display:block;list-style:none;width:20px;height:20px;background:#ffffff1a;box-shadow:0 8px 32px #1f268733;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:80px;border:1px solid rgba(255,255,255,.18);animation:animate 25s linear infinite;bottom:-150px}.circles li:nth-child(1){left:25%;width:80px;height:80px;animation-delay:0s}.circles li:nth-child(2){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}.circles li:nth-child(3){left:70%;width:20px;height:20px;animation-delay:4s}.circles li:nth-child(4){left:40%;width:60px;height:60px;animation-delay:0s;animation-duration:18s}.circles li:nth-child(5){left:65%;width:20px;height:20px;animation-delay:0s}.circles li:nth-child(6){left:75%;width:110px;height:110px;animation-delay:3s}.circles li:nth-child(7){left:35%;width:150px;height:150px;animation-delay:7s}.circles li:nth-child(8){left:50%;width:25px;height:25px;animation-delay:15s;animation-duration:45s}.circles li:nth-child(9){left:20%;width:15px;height:15px;animation-delay:2s;animation-duration:35s}.circles li:nth-child(15){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}@keyframes animate{0%{transform:translateY(0) rotate(0);opacity:1;border-radius:0}to{transform:translateY(-1000px) rotate(720deg);opacity:0;border-radius:50%}}.f-12{font-size:12px}@media screen and (max-width : 475px){.w-90{width:87%}}.no-arrows::-webkit-outer-spin-button,.no-arrows::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { 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: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }] }); }
|
|
9155
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AuthenticationRequiredComponent, isStandalone: true, selector: "simpo-authentication-required", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section [id]=\"data?.id\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"area w-100\">\r\n <ul class=\"circles\">\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n </ul>\r\n </div>\r\n <div [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\" class=\"main-panel d-flex gap-2\">\r\n <div class=\"panel w-100\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container *ngTemplateOutlet=\"currentPage === 'LOGIN' ? loginTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"currentPage === 'SIGNUP' ? signInTemplate : null\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\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 <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\r\n</section>\r\n\r\n<ng-template #loginTemplate>\r\n <div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Email or Phone number</label>\r\n <input type=\"email\" [(ngModel)]=\"email\" required=\"\" placeholder=\"janedoe@gmail.com\"\r\n (ngModelChange)=\"onEmailChange()\" [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n <!-- <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid Email*</span> -->\r\n </div>\r\n <div class=\"input-box\">\r\n <div class=\"w-100\">\r\n <label for=\"\">Password</label>\r\n <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\"\r\n (ngModelChange)=\"onPasswordChange()\" class=\"w-90\" placeholder=\"Janedoe@1234\"\r\n [style.borderColor]=\"!passwordCheck ? '' : 'red'\">\r\n <span class=\"eye\" (click)=\"showPassword = !showPassword\" style=\"cursor: pointer;\">\r\n <i class=\"fa\" [ngClass]=\"showPassword ? 'fa-eye-slash' : 'fa-eye'\"></i>\r\n </span>\r\n </div>\r\n <span *ngIf=\"passwordCheck && currentPage === 'SIGNUP'\" class=\"f-12\" [style.color]=\"'red'\">Your password must contain 1 Uppercase , 1\r\n Lowercase , 1 Special\r\n Character , 1 Digit and Minimum 8 Characters*</span>\r\n </div>\r\n <!-- <div class=\"forgot-pwd\" [style.color]=\"accentColor\">Forgot Password?</div> -->\r\n <!-- <button class=\"button\" *ngIf=\"!buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n (click)=\"login()\">Login</button> -->\r\n <button class=\"send-btn p-2\" *ngIf=\"!buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"login()\">Login</button>\r\n <!-- <button class=\"button\" *ngIf=\"buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\"\r\n [color]=\"styles?.background?.accentColor\">Loading...</button> -->\r\n <button class=\"send-btn p-2\" *ngIf=\"buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"login()\">Loading...</button>\r\n\r\n\r\n <div class=\"sign-up mt-2\" *ngIf=\"signUpEnabled\">Don't have an account? <span [style.color]=\"accentColor\"\r\n (click)=\"currentPage = 'SIGNUP'\">Sign\r\n Up</span></div>\r\n\r\n <!-- <div class=\"text-center mt-20\">\r\n <div class=\"or-divider\">\r\n <span class=\"or-text\">or</span>\r\n </div>\r\n <div class=\"sign-up\">Login with <span [style.color]=\"accentColor\">OTP</span></div>\r\n </div> -->\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #signInTemplate>\r\n <div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Name</label>\r\n <input type=\"text\" [(ngModel)]=\"userName\" placeholder=\"Jane Doe\">\r\n </div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Email</label>\r\n <input type=\"email\" [(ngModel)]=\"email\" placeholder=\"janedoe@gmail.com\" (ngModelChange)=\"onEmailChange()\"\r\n [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid email*</span>\r\n </div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Phone Number</label>\r\n <input type=\"number\" [(ngModel)]=\"mobile\" (ngModelChange)=\"onMobileChange()\" placeholder=\"9876543219\"\r\n [style.borderColor]=\"!mobileCheck ? '' : 'red'\" class=\"no-arrows\">\r\n <span class=\"f-12\" *ngIf=\"mobileCheck\" [style.color]=\"'red'\">Please Enter valid Mobile number*</span>\r\n </div>\r\n <div class=\" input-box position-relative\">\r\n <label for=\"\">Password</label>\r\n <div class=\"w-100 d-flex align-items-center\">\r\n <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\" class=\"w-90\"\r\n placeholder=\"Janedoe@1234\" [style.borderColor]=\"!passwordCheck ? '' : 'red'\"\r\n (ngModelChange)=\"onPasswordChange()\">\r\n <span class=\"eye\" (click)=\"showPassword = !showPassword\" style=\"cursor: pointer;\">\r\n <i class=\"fa\" [ngClass]=\"showPassword ? 'fa-eye-slash' : 'fa-eye'\"></i>\r\n </span>\r\n </div>\r\n <span *ngIf=\"passwordCheck\" class=\"f-12\" [style.color]=\"'red'\">Your password must contain 1 Uppercase , 1\r\n Lowercase , 1 Special\r\n Character , 1 Digit and Minimum 8 Characters*</span>\r\n <!-- <div class=\"strength-bar-container\">\r\n <div *ngFor=\"let strength of passwordStrength; let idx = index\" class=\"strength-bar\"\r\n [style.backgroundColor]=\"getStrengthColor(idx)\"></div>\r\n </div> -->\r\n </div>\r\n <button class=\"button\" *ngIf=\"!buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n (click)=\"createAccount()\" [disabled]=\"!isEmailValid || !isPasswordValid || !userName\">Create Account</button>\r\n <button class=\"button\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n *ngIf=\"buttonLoading\">Loading...</button>\r\n\r\n\r\n <div class=\"sign-up mt-2\">Already have an account? <span [style.color]=\"accentColor\"\r\n (click)=\"currentPage = 'LOGIN'\">Login</span></div>\r\n </div>\r\n</ng-template>\r\n", styles: [".total-container{position:relative;height:auto;perspective:1200px;overflow:hidden}label,.sign-up,.eye{color:#000}.eye{padding:6px;font-size:16px}.w-90{width:90%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-panel{max-width:450px;margin:2rem auto;background:#ffffff26;border-radius:20px;box-shadow:0 25px 50px -12px #00000040;overflow:hidden;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;transform-style:preserve-3d;will-change:transform;perspective:1200px;backface-visibility:hidden}.main-panel:hover{transform:rotateY(3deg) rotateX(2deg) scale(1.02);box-shadow:0 35px 60px -10px #0000004d}.panel{background:#fffffff2;padding:3rem;position:relative;transform-style:preserve-3d;transition:all .4s ease;margin:unset!important}.panel:before{content:\"\";position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(255,255,255,.15) 50%,transparent);opacity:0;transition:opacity .4s ease;pointer-events:none}.panel:hover:before{opacity:1}.input-box{display:flex;flex-direction:column;gap:8px;margin-bottom:1.5rem;position:relative;transform-style:preserve-3d}.input-box label{transform:translateZ(20px)}.input-box input{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;border:2px solid rgba(0,0,0,.08);padding:.75rem 1rem;border-radius:12px;appearance:none;outline:none}.input-box input:focus{border-color:var(--accent-color, #667eea);box-shadow:0 8px 25px -5px #667eea4d;transform:translateY(-3px) translateZ(25px);background:#fff}.input-box input:hover{transform:translateY(-2px) translateZ(15px);box-shadow:0 5px 15px #00000014}.button{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;overflow:hidden;border:none;padding:.5rem 2rem;font-weight:600}.button:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .7s ease}.button:hover{transform:translateY(-3px) translateZ(35px);box-shadow:0 15px 30px -5px var(--accent-shadow, rgba(102, 126, 234, .5))}.button:hover:before{left:100%}.button:active{transform:translateY(-1px) translateZ(25px)}.circles{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.circles li{position:absolute;display:block;list-style:none;width:20px;height:20px;background:#ffffff1a;box-shadow:0 8px 32px #1f268733;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:80px;border:1px solid rgba(255,255,255,.18);animation:animate 25s linear infinite;bottom:-150px}.circles li:nth-child(1){left:25%;width:80px;height:80px;animation-delay:0s}.circles li:nth-child(2){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}.circles li:nth-child(3){left:70%;width:20px;height:20px;animation-delay:4s}.circles li:nth-child(4){left:40%;width:60px;height:60px;animation-delay:0s;animation-duration:18s}.circles li:nth-child(5){left:65%;width:20px;height:20px;animation-delay:0s}.circles li:nth-child(6){left:75%;width:110px;height:110px;animation-delay:3s}.circles li:nth-child(7){left:35%;width:150px;height:150px;animation-delay:7s}.circles li:nth-child(8){left:50%;width:25px;height:25px;animation-delay:15s;animation-duration:45s}.circles li:nth-child(9){left:20%;width:15px;height:15px;animation-delay:2s;animation-duration:35s}.circles li:nth-child(15){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}@keyframes animate{0%{transform:translateY(0) rotate(0);opacity:1;border-radius:0}to{transform:translateY(-1000px) rotate(720deg);opacity:0;border-radius:50%}}.f-12{font-size:12px}@media screen and (max-width : 475px){.w-90{width:87%}}.no-arrows::-webkit-outer-spin-button,.no-arrows::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { 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: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }] }); }
|
|
9156
9156
|
}
|
|
9157
9157
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthenticationRequiredComponent, decorators: [{
|
|
9158
9158
|
type: Component,
|
|
@@ -9172,7 +9172,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
9172
9172
|
OverlayDirective,
|
|
9173
9173
|
SpacingAroundDirective,
|
|
9174
9174
|
ButtonEditorDirective
|
|
9175
|
-
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section [id]=\"data?.id\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"area w-100\">\r\n <ul class=\"circles\">\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n </ul>\r\n </div>\r\n <div [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\" class=\"main-panel d-flex gap-2\">\r\n <div class=\"panel w-100\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container *ngTemplateOutlet=\"currentPage === 'LOGIN' ? loginTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"currentPage === 'SIGNUP' ? signInTemplate : null\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\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 <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\r\n</section>\r\n\r\n<ng-template #loginTemplate>\r\n <div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Email</label>\r\n <input type=\"email\" [(ngModel)]=\"email\" required=\"\" placeholder=\"janedoe@gmail.com\"\r\n (ngModelChange)=\"onEmailChange()\" [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid Email*</span>\r\n </div>\r\n <div class=\"input-box\">\r\n <div class=\"w-100\">\r\n <label for=\"\">Password</label>\r\n <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\"\r\n (ngModelChange)=\"onPasswordChange()\" class=\"w-90\" placeholder=\"Janedoe@1234\"\r\n [style.borderColor]=\"!passwordCheck ? '' : 'red'\">\r\n <span class=\"eye\" (click)=\"showPassword = !showPassword\" style=\"cursor: pointer;\">\r\n <i class=\"fa\" [ngClass]=\"showPassword ? 'fa-eye-slash' : 'fa-eye'\"></i>\r\n </span>\r\n </div>\r\n <span *ngIf=\"passwordCheck && currentPage === 'SIGNUP'\" class=\"f-12\" [style.color]=\"'red'\">Your password must contain 1 Uppercase , 1\r\n Lowercase , 1 Special\r\n Character , 1 Digit and Minimum 8 Characters*</span>\r\n </div>\r\n <!-- <div class=\"forgot-pwd\" [style.color]=\"accentColor\">Forgot Password?</div> -->\r\n <!-- <button class=\"button\" *ngIf=\"!buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n (click)=\"login()\">Login</button> -->\r\n <button class=\"send-btn p-2\" *ngIf=\"!buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"login()\">Login</button>\r\n <!-- <button class=\"button\" *ngIf=\"buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\"\r\n [color]=\"styles?.background?.accentColor\">Loading...</button> -->\r\n <button class=\"send-btn p-2\" *ngIf=\"buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"login()\">Loading...</button>\r\n\r\n\r\n <div class=\"sign-up mt-2\" *ngIf=\"signUpEnabled\">Don't have an account? <span [style.color]=\"accentColor\"\r\n (click)=\"currentPage = 'SIGNUP'\">Sign\r\n Up</span></div>\r\n\r\n <!-- <div class=\"text-center mt-20\">\r\n <div class=\"or-divider\">\r\n <span class=\"or-text\">or</span>\r\n </div>\r\n <div class=\"sign-up\">Login with <span [style.color]=\"accentColor\">OTP</span></div>\r\n </div> -->\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #signInTemplate>\r\n <div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Name</label>\r\n <input type=\"text\" [(ngModel)]=\"userName\" placeholder=\"Jane Doe\">\r\n </div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Email</label>\r\n <input type=\"email\" [(ngModel)]=\"email\" placeholder=\"janedoe@gmail.com\" (ngModelChange)=\"onEmailChange()\"\r\n [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid email*</span>\r\n </div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Phone Number</label>\r\n <input type=\"number\" [(ngModel)]=\"mobile\" (ngModelChange)=\"onMobileChange()\" placeholder=\"9876543219\"\r\n [style.borderColor]=\"!mobileCheck ? '' : 'red'\" class=\"no-arrows\">\r\n <span class=\"f-12\" *ngIf=\"mobileCheck\" [style.color]=\"'red'\">Please Enter valid Mobile number*</span>\r\n </div>\r\n <div class=\" input-box position-relative\">\r\n <label for=\"\">Password</label>\r\n <div class=\"w-100 d-flex align-items-center\">\r\n <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\" class=\"w-90\"\r\n placeholder=\"Janedoe@1234\" [style.borderColor]=\"!passwordCheck ? '' : 'red'\"\r\n (ngModelChange)=\"onPasswordChange()\">\r\n <span class=\"eye\" (click)=\"showPassword = !showPassword\" style=\"cursor: pointer;\">\r\n <i class=\"fa\" [ngClass]=\"showPassword ? 'fa-eye-slash' : 'fa-eye'\"></i>\r\n </span>\r\n </div>\r\n <span *ngIf=\"passwordCheck\" class=\"f-12\" [style.color]=\"'red'\">Your password must contain 1 Uppercase , 1\r\n Lowercase , 1 Special\r\n Character , 1 Digit and Minimum 8 Characters*</span>\r\n <!-- <div class=\"strength-bar-container\">\r\n <div *ngFor=\"let strength of passwordStrength; let idx = index\" class=\"strength-bar\"\r\n [style.backgroundColor]=\"getStrengthColor(idx)\"></div>\r\n </div> -->\r\n </div>\r\n <button class=\"button\" *ngIf=\"!buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n (click)=\"createAccount()\" [disabled]=\"!isEmailValid || !isPasswordValid || !userName\">Create Account</button>\r\n <button class=\"button\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n *ngIf=\"buttonLoading\">Loading...</button>\r\n\r\n\r\n <div class=\"sign-up mt-2\">Already have an account? <span [style.color]=\"accentColor\"\r\n (click)=\"currentPage = 'LOGIN'\">Login</span></div>\r\n </div>\r\n</ng-template>", styles: [".total-container{position:relative;height:auto;perspective:1200px;overflow:hidden}label,.sign-up,.eye{color:#000}.eye{padding:6px;font-size:16px}.w-90{width:90%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-panel{max-width:450px;margin:2rem auto;background:#ffffff26;border-radius:20px;box-shadow:0 25px 50px -12px #00000040;overflow:hidden;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;transform-style:preserve-3d;will-change:transform;perspective:1200px;backface-visibility:hidden}.main-panel:hover{transform:rotateY(3deg) rotateX(2deg) scale(1.02);box-shadow:0 35px 60px -10px #0000004d}.panel{background:#fffffff2;padding:3rem;position:relative;transform-style:preserve-3d;transition:all .4s ease;margin:unset!important}.panel:before{content:\"\";position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(255,255,255,.15) 50%,transparent);opacity:0;transition:opacity .4s ease;pointer-events:none}.panel:hover:before{opacity:1}.input-box{display:flex;flex-direction:column;gap:8px;margin-bottom:1.5rem;position:relative;transform-style:preserve-3d}.input-box label{transform:translateZ(20px)}.input-box input{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;border:2px solid rgba(0,0,0,.08);padding:.75rem 1rem;border-radius:12px;appearance:none;outline:none}.input-box input:focus{border-color:var(--accent-color, #667eea);box-shadow:0 8px 25px -5px #667eea4d;transform:translateY(-3px) translateZ(25px);background:#fff}.input-box input:hover{transform:translateY(-2px) translateZ(15px);box-shadow:0 5px 15px #00000014}.button{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;overflow:hidden;border:none;padding:.5rem 2rem;font-weight:600}.button:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .7s ease}.button:hover{transform:translateY(-3px) translateZ(35px);box-shadow:0 15px 30px -5px var(--accent-shadow, rgba(102, 126, 234, .5))}.button:hover:before{left:100%}.button:active{transform:translateY(-1px) translateZ(25px)}.circles{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.circles li{position:absolute;display:block;list-style:none;width:20px;height:20px;background:#ffffff1a;box-shadow:0 8px 32px #1f268733;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:80px;border:1px solid rgba(255,255,255,.18);animation:animate 25s linear infinite;bottom:-150px}.circles li:nth-child(1){left:25%;width:80px;height:80px;animation-delay:0s}.circles li:nth-child(2){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}.circles li:nth-child(3){left:70%;width:20px;height:20px;animation-delay:4s}.circles li:nth-child(4){left:40%;width:60px;height:60px;animation-delay:0s;animation-duration:18s}.circles li:nth-child(5){left:65%;width:20px;height:20px;animation-delay:0s}.circles li:nth-child(6){left:75%;width:110px;height:110px;animation-delay:3s}.circles li:nth-child(7){left:35%;width:150px;height:150px;animation-delay:7s}.circles li:nth-child(8){left:50%;width:25px;height:25px;animation-delay:15s;animation-duration:45s}.circles li:nth-child(9){left:20%;width:15px;height:15px;animation-delay:2s;animation-duration:35s}.circles li:nth-child(15){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}@keyframes animate{0%{transform:translateY(0) rotate(0);opacity:1;border-radius:0}to{transform:translateY(-1000px) rotate(720deg);opacity:0;border-radius:50%}}.f-12{font-size:12px}@media screen and (max-width : 475px){.w-90{width:87%}}.no-arrows::-webkit-outer-spin-button,.no-arrows::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
|
|
9175
|
+
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section [id]=\"data?.id\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"area w-100\">\r\n <ul class=\"circles\">\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n </ul>\r\n </div>\r\n <div [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\" class=\"main-panel d-flex gap-2\">\r\n <div class=\"panel w-100\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container *ngTemplateOutlet=\"currentPage === 'LOGIN' ? loginTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"currentPage === 'SIGNUP' ? signInTemplate : null\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\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 <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\r\n</section>\r\n\r\n<ng-template #loginTemplate>\r\n <div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Email or Phone number</label>\r\n <input type=\"email\" [(ngModel)]=\"email\" required=\"\" placeholder=\"janedoe@gmail.com\"\r\n (ngModelChange)=\"onEmailChange()\" [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n <!-- <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid Email*</span> -->\r\n </div>\r\n <div class=\"input-box\">\r\n <div class=\"w-100\">\r\n <label for=\"\">Password</label>\r\n <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\"\r\n (ngModelChange)=\"onPasswordChange()\" class=\"w-90\" placeholder=\"Janedoe@1234\"\r\n [style.borderColor]=\"!passwordCheck ? '' : 'red'\">\r\n <span class=\"eye\" (click)=\"showPassword = !showPassword\" style=\"cursor: pointer;\">\r\n <i class=\"fa\" [ngClass]=\"showPassword ? 'fa-eye-slash' : 'fa-eye'\"></i>\r\n </span>\r\n </div>\r\n <span *ngIf=\"passwordCheck && currentPage === 'SIGNUP'\" class=\"f-12\" [style.color]=\"'red'\">Your password must contain 1 Uppercase , 1\r\n Lowercase , 1 Special\r\n Character , 1 Digit and Minimum 8 Characters*</span>\r\n </div>\r\n <!-- <div class=\"forgot-pwd\" [style.color]=\"accentColor\">Forgot Password?</div> -->\r\n <!-- <button class=\"button\" *ngIf=\"!buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n (click)=\"login()\">Login</button> -->\r\n <button class=\"send-btn p-2\" *ngIf=\"!buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"login()\">Login</button>\r\n <!-- <button class=\"button\" *ngIf=\"buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\"\r\n [color]=\"styles?.background?.accentColor\">Loading...</button> -->\r\n <button class=\"send-btn p-2\" *ngIf=\"buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"login()\">Loading...</button>\r\n\r\n\r\n <div class=\"sign-up mt-2\" *ngIf=\"signUpEnabled\">Don't have an account? <span [style.color]=\"accentColor\"\r\n (click)=\"currentPage = 'SIGNUP'\">Sign\r\n Up</span></div>\r\n\r\n <!-- <div class=\"text-center mt-20\">\r\n <div class=\"or-divider\">\r\n <span class=\"or-text\">or</span>\r\n </div>\r\n <div class=\"sign-up\">Login with <span [style.color]=\"accentColor\">OTP</span></div>\r\n </div> -->\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #signInTemplate>\r\n <div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Name</label>\r\n <input type=\"text\" [(ngModel)]=\"userName\" placeholder=\"Jane Doe\">\r\n </div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Email</label>\r\n <input type=\"email\" [(ngModel)]=\"email\" placeholder=\"janedoe@gmail.com\" (ngModelChange)=\"onEmailChange()\"\r\n [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid email*</span>\r\n </div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Phone Number</label>\r\n <input type=\"number\" [(ngModel)]=\"mobile\" (ngModelChange)=\"onMobileChange()\" placeholder=\"9876543219\"\r\n [style.borderColor]=\"!mobileCheck ? '' : 'red'\" class=\"no-arrows\">\r\n <span class=\"f-12\" *ngIf=\"mobileCheck\" [style.color]=\"'red'\">Please Enter valid Mobile number*</span>\r\n </div>\r\n <div class=\" input-box position-relative\">\r\n <label for=\"\">Password</label>\r\n <div class=\"w-100 d-flex align-items-center\">\r\n <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\" class=\"w-90\"\r\n placeholder=\"Janedoe@1234\" [style.borderColor]=\"!passwordCheck ? '' : 'red'\"\r\n (ngModelChange)=\"onPasswordChange()\">\r\n <span class=\"eye\" (click)=\"showPassword = !showPassword\" style=\"cursor: pointer;\">\r\n <i class=\"fa\" [ngClass]=\"showPassword ? 'fa-eye-slash' : 'fa-eye'\"></i>\r\n </span>\r\n </div>\r\n <span *ngIf=\"passwordCheck\" class=\"f-12\" [style.color]=\"'red'\">Your password must contain 1 Uppercase , 1\r\n Lowercase , 1 Special\r\n Character , 1 Digit and Minimum 8 Characters*</span>\r\n <!-- <div class=\"strength-bar-container\">\r\n <div *ngFor=\"let strength of passwordStrength; let idx = index\" class=\"strength-bar\"\r\n [style.backgroundColor]=\"getStrengthColor(idx)\"></div>\r\n </div> -->\r\n </div>\r\n <button class=\"button\" *ngIf=\"!buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n (click)=\"createAccount()\" [disabled]=\"!isEmailValid || !isPasswordValid || !userName\">Create Account</button>\r\n <button class=\"button\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n *ngIf=\"buttonLoading\">Loading...</button>\r\n\r\n\r\n <div class=\"sign-up mt-2\">Already have an account? <span [style.color]=\"accentColor\"\r\n (click)=\"currentPage = 'LOGIN'\">Login</span></div>\r\n </div>\r\n</ng-template>\r\n", styles: [".total-container{position:relative;height:auto;perspective:1200px;overflow:hidden}label,.sign-up,.eye{color:#000}.eye{padding:6px;font-size:16px}.w-90{width:90%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-panel{max-width:450px;margin:2rem auto;background:#ffffff26;border-radius:20px;box-shadow:0 25px 50px -12px #00000040;overflow:hidden;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;transform-style:preserve-3d;will-change:transform;perspective:1200px;backface-visibility:hidden}.main-panel:hover{transform:rotateY(3deg) rotateX(2deg) scale(1.02);box-shadow:0 35px 60px -10px #0000004d}.panel{background:#fffffff2;padding:3rem;position:relative;transform-style:preserve-3d;transition:all .4s ease;margin:unset!important}.panel:before{content:\"\";position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(255,255,255,.15) 50%,transparent);opacity:0;transition:opacity .4s ease;pointer-events:none}.panel:hover:before{opacity:1}.input-box{display:flex;flex-direction:column;gap:8px;margin-bottom:1.5rem;position:relative;transform-style:preserve-3d}.input-box label{transform:translateZ(20px)}.input-box input{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;border:2px solid rgba(0,0,0,.08);padding:.75rem 1rem;border-radius:12px;appearance:none;outline:none}.input-box input:focus{border-color:var(--accent-color, #667eea);box-shadow:0 8px 25px -5px #667eea4d;transform:translateY(-3px) translateZ(25px);background:#fff}.input-box input:hover{transform:translateY(-2px) translateZ(15px);box-shadow:0 5px 15px #00000014}.button{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;overflow:hidden;border:none;padding:.5rem 2rem;font-weight:600}.button:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .7s ease}.button:hover{transform:translateY(-3px) translateZ(35px);box-shadow:0 15px 30px -5px var(--accent-shadow, rgba(102, 126, 234, .5))}.button:hover:before{left:100%}.button:active{transform:translateY(-1px) translateZ(25px)}.circles{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.circles li{position:absolute;display:block;list-style:none;width:20px;height:20px;background:#ffffff1a;box-shadow:0 8px 32px #1f268733;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:80px;border:1px solid rgba(255,255,255,.18);animation:animate 25s linear infinite;bottom:-150px}.circles li:nth-child(1){left:25%;width:80px;height:80px;animation-delay:0s}.circles li:nth-child(2){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}.circles li:nth-child(3){left:70%;width:20px;height:20px;animation-delay:4s}.circles li:nth-child(4){left:40%;width:60px;height:60px;animation-delay:0s;animation-duration:18s}.circles li:nth-child(5){left:65%;width:20px;height:20px;animation-delay:0s}.circles li:nth-child(6){left:75%;width:110px;height:110px;animation-delay:3s}.circles li:nth-child(7){left:35%;width:150px;height:150px;animation-delay:7s}.circles li:nth-child(8){left:50%;width:25px;height:25px;animation-delay:15s;animation-duration:45s}.circles li:nth-child(9){left:20%;width:15px;height:15px;animation-delay:2s;animation-duration:35s}.circles li:nth-child(15){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}@keyframes animate{0%{transform:translateY(0) rotate(0);opacity:1;border-radius:0}to{transform:translateY(-1000px) rotate(720deg);opacity:0;border-radius:50%}}.f-12{font-size:12px}@media screen and (max-width : 475px){.w-90{width:87%}}.no-arrows::-webkit-outer-spin-button,.no-arrows::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
|
|
9176
9176
|
}], ctorParameters: () => [{ type: RestService }, { type: i2$2.Router }, { type: i4$1.MessageService }, { type: StorageServiceService }, { type: i1$1.MatDialog }, { type: i2$2.ActivatedRoute }, { type: i0.ElementRef }, { type: i1$1.MatDialogRef, decorators: [{
|
|
9177
9177
|
type: Optional
|
|
9178
9178
|
}] }, { type: i8$2.MatBottomSheetRef, decorators: [{
|
|
@@ -14863,7 +14863,6 @@ class SchemeDetailComponent {
|
|
|
14863
14863
|
this.getSchemeDetails(params['shchemeId']);
|
|
14864
14864
|
}
|
|
14865
14865
|
});
|
|
14866
|
-
this.getSchemeDetails("fa45e5a2-7c2a-11f0-b405-1b88b1a2e561");
|
|
14867
14866
|
}
|
|
14868
14867
|
getKeys(obj) {
|
|
14869
14868
|
return Object.keys(obj ?? {});
|
|
@@ -15005,11 +15004,11 @@ class SchemeDetailComponent {
|
|
|
15005
15004
|
this._eventService.cashFreeEvent.emit({ data: { orderSignature: sessionId } });
|
|
15006
15005
|
}
|
|
15007
15006
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemeDetailComponent, deps: [{ token: i2$2.ActivatedRoute }, { token: RestService }, { token: StorageServiceService }, { token: i1$1.MatDialog }, { token: i2$2.Router }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15008
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SchemeDetailComponent, isStandalone: true, selector: "simpo-scheme-detail", inputs: { data: "data", index: "index", edit: "edit" }, providers: [MatDialog], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }], ngImport: i0, template: "<section class=\"main_section w-100\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\">\r\n <div class=\"about_plan_section p-5 d-flex flex-column align-items-center justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"aboutUsTemplate\"></ng-container>\r\n </div>\r\n <div class=\"scheme_calculator_section p-5 d-flex flex-column align-items-center justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"schemeCalculator\"></ng-container>\r\n </div>\r\n <div class=\"faq_section p-5\" *ngIf=\"faqList.length > 0\">\r\n <ng-container *ngTemplateOutlet=\"faqTemplate\"></ng-container>\r\n </div>\r\n <div class=\"terms_condition_section p-5\" *ngIf=\"!getKeys(schemeDetails?.termsAndConditions)\">\r\n <ng-container *ngTemplateOutlet=\"termsAndConditions\"></ng-container>\r\n </div>\r\n</section>\r\n<ng-template #aboutUsTemplate>\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"text_header d-flex align-items-center justify-content-center\">\r\n <simpo-text-editor [(value)]=\"getInputText\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"desc_text\">\r\n Our Dream Savings Jewelry Plan is designed to make luxury jewelry accessible to everyone. Save at your own pace and turn your jewelry dreams into reality\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #schemeCalculator>\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <div class=\"calc_header d-flex flex-column align-items-center justify-content-center\">\r\n <span>Calculate Your Returns</span>\r\n <div class=\"calc_desc\">\r\n See how your savings grow with our smart investment schemes. choose your preferred scheme and discover\r\n your potential returns.\r\n </div>\r\n </div>\r\n <div class=\"calculator_section\">\r\n <div class=\"sub-header mb-3 px-3\">\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\">\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]=\"schemeDetails?.valueStep\" [(ngModel)]=\"monthlyAmount\"\r\n (ngModelChange)=\"onAmountChange()\">\r\n <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n <span class=\"fw-bold\">\u20B9{{minAmount | number}}</span>\r\n <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n <span class=\"fw-bold\">\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 \u20B9 {{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 class=\"scheme-results\">\r\n <div class=\"d-flex align-items-center justify-content-between calcultaion_container mb-3\">\r\n <div class=\" installment_amount w-15\">\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=\"add_icon\">\r\n +\r\n </div>\r\n <div class=\"benefit _amount w-15\">\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=\"total_icon\">\r\n =\r\n </div>\r\n <div class=\"total_amount w-15\">\r\n <div class=\"result-card result-card-highlight text-center p-3 border rounded\" [style.background]=\"styles?.background?.accentColor\">\r\n <div class=\"result-amount fw-bold fs-5\">\r\n <div class=\"result-amount fw-bold fs-5\"\r\n *ngIf=\"schemeDetails?.benefitType != 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n maturityCount)+benefitAmount) | number}}</div>\r\n <div class=\"result-amount fw-bold fs-5\"\r\n *ngIf=\"schemeDetails?.benefitType === 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n maturityCount)) | number}}</div>\r\n </div>\r\n <!-- <div class=\"result-amount fw-bold fs-5\" *ngIf=\"enrolledScheme?.benefitType === 'DISCOUNT'\">\r\n \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=\"schemeDetails?.storeList?.length >=2 || staffMembers.length >= 2 \">\r\n <div class=\"store_selection w-50 align-items-center gap-1\"\r\n *ngIf=\"schemeDetails?.storeList?.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(schemeDetails)\" [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\r\n</ng-template>\r\n<ng-template #faqTemplate>\r\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\r\n <div class=\"faq-container\">\r\n <h1 class=\"faq-title\">Frequently Asked Questions</h1>\r\n <p class=\"faq-subtitle\">Everything you need to know about our Group Investment Scheme</p>\r\n\r\n <div class=\"faq-list\">\r\n <div class=\"faq-item\" *ngFor=\"let faq of faqList\" (click)=\"faq.showAnswer = !faq.showAnswer\">\r\n <div class=\"faq-question\">\r\n <span>{{faq?.question ? faq?.question : 'N/A'}}</span>\r\n <mat-icon *ngIf=\"faq.showAnswer\">keyboard_arrow_up</mat-icon>\r\n <mat-icon *ngIf=\"!faq.showAnswer\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n <div class=\"faq-answer\" *ngIf=\"faq.showAnswer\">\r\n <p>{{faq?.answer ? faq?.answer :'N/A' }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #termsAndConditions>\r\n <section class=\"terms-section d-flex align-items-center justify-content-center\">\r\n <div class=\"terms-container\">\r\n <h1 class=\"terms-title\">Terms and Conditions</h1>\r\n\r\n <div class=\"terms-content\">\r\n <div class=\"term-item d-flex\"\r\n *ngFor=\"let key of getKeys(schemeDetails?.termsAndConditions); let i = index\">\r\n <div class=\"terms_count\">\r\n <h3 class=\"term-heading\">{{ key }}.</h3>\r\n </div>\r\n <div>\r\n <p class=\"term-text\">\r\n {{ schemeDetails?.termsAndConditions?.[key]?.replaceAll('\\n',' ') || 'N/A' }}\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <!-- <div class=\"important-note\">\r\n <p><strong>Important:</strong> These terms and conditions are subject to change with prior notice.\r\n Participants will be notified of any changes via registered email or SMS. Continued\r\n participation after notification constitutes acceptance of revised terms.</p>\r\n </div> -->\r\n\r\n <div class=\"footer-note\">\r\n <p>Last updated: 8/22/2025 | Version 3.1</p>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\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>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.p-5{padding:2% 5%!important}.text_header{font-size:50px;font-weight:bolder;color:orange}.calc_header{gap:1rem;padding-bottom:4%}.calc_header span{font-size:23px;font-weight:700}.calc_desc{font-size:17px;text-align:center;padding:0% 23%}.desc_text{font-size:15px;padding:0% 20%;text-align:center}.sub-header-text{font-weight:500}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.random_opitons{padding:1%}.option{padding:.5% 2%;border:1px solid rgba(227,66,255,.1);border-radius:50px;background:#3a00441a}.calculator_section{padding:2%;width:65vw;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;border-radius:16px}.scheme-results{background:#fff9e9;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.add_icon,.total_icon{padding:.3% 1%;background:#fff;border-radius:50px}.w-15{width:15vw}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{color:#fff}.result-card-group{background:#d63384;color:#fff}.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}.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}.enroll-btn{font-size:16px;border:1px solid}.faq-section{padding:60px 20px}.faq-container{background:#fff;border-radius:16px;padding:40px;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;width:65vw}.faq-title{font-size:2.5rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:12px}.faq-subtitle{font-size:1.1rem;color:#718096;text-align:center;margin-bottom:40px;font-weight:400}.faq-list{display:flex;flex-direction:column;gap:12px}.faq-item{border:1px solid #e2e8f0;border-radius:12px;background:#fff;overflow:hidden;transition:all .3s ease}.faq-item:hover{border-color:#cbd5e0;box-shadow:0 2px 4px #0000000d}.faq-question{padding:20px 24px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:500;font-size:1.05rem;color:#2d3748;transition:color .2s ease}.faq-item:hover{box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014}.faq-question:hover span{color:#d4a574;text-decoration:underline}.faq-icon{width:20px;height:20px;color:#718096;transition:transform .3s ease;flex-shrink:0}.faq-item.active .faq-icon{transform:rotate(180deg)}.faq-answer{transition:.3s ease,padding .3s ease;padding:0% 2%}.faq-item.active .faq-answer{max-height:200px;padding:0 24px 20px}.faq-answer p{color:#4a5568;font-size:.95rem;line-height:1.6;margin-top:0}.terms-container{background:#fff;border-radius:16px;padding:50px 40px;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;width:65vw}.terms-title{font-size:2.2rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:40px;letter-spacing:-.02em}.terms-content{display:flex;flex-direction:column;gap:32px}.term-item{padding-bottom:20px;border-bottom:1px solid #e2e8f0;gap:10px}.terms_count{padding-top:.2%}.term-item:last-of-type{border-bottom:none;margin-bottom:20px}.term-heading{font-size:1.15rem;font-weight:600;color:#1a202c;margin-bottom:12px;letter-spacing:-.01em}.term-text{font-size:.95rem;color:#4a5568}.important-note{background:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;padding:20px;margin-top:16px}.important-note p{font-size:.9rem;color:#2d3748;line-height:1.6;margin:0}.important-note strong{color:#1a202c;font-weight:600}.footer-note{text-align:center;margin-top:24px;padding-top:16px}.footer-note p{font-size:.85rem;color:#718096;font-style:italic}.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}.payment-row:last-child{margin-bottom:0}.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}@media (max-width: 768px){.terms-section{padding:20px 16px}.terms-container{padding:30px 24px}.terms-title{font-size:1.8rem;margin-bottom:30px}.terms-content{gap:24px}.term-heading{font-size:1.1rem}.term-text{font-size:.9rem;text-align:left}.important-note{padding:16px}}.custom-range{-webkit-appearance:none;appearance:none;width:100%;height:10px;border-radius:999px;outline:none;margin:10px 0}.custom-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;background:#fff4d0;border:3px solid #F4C24B;cursor:pointer;box-shadow:0 2px 4px #0000001a}.custom-range::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff4d0;border:3px solid #F4C24B;cursor:pointer;box-shadow:0 2px 4px #0000001a}.custom-range::-moz-range-track{height:10px;border-radius:999px}\n"], dependencies: [{ 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: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { 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: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }] }); }
|
|
15007
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SchemeDetailComponent, isStandalone: true, selector: "simpo-scheme-detail", inputs: { data: "data", index: "index", edit: "edit" }, providers: [MatDialog], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }], ngImport: i0, template: "<section class=\"main_section w-100\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\">\r\n <div class=\"about_plan_section p-5 d-flex flex-column align-items-center justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"aboutUsTemplate\"></ng-container>\r\n </div>\r\n <div class=\"scheme_calculator_section p-5 d-flex flex-column align-items-center justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"schemeCalculator\"></ng-container>\r\n </div>\r\n <div class=\"faq_section p-5\" *ngIf=\"faqList.length > 0\">\r\n <ng-container *ngTemplateOutlet=\"faqTemplate\"></ng-container>\r\n </div>\r\n <div class=\"terms_condition_section p-5\" *ngIf=\"!getKeys(schemeDetails?.termsAndConditions)\">\r\n <ng-container *ngTemplateOutlet=\"termsAndConditions\"></ng-container>\r\n </div>\r\n</section>\r\n<ng-template #aboutUsTemplate>\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"text_header d-flex align-items-center justify-content-center\">\r\n <simpo-text-editor [(value)]=\"getInputText\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"desc_text\">\r\n Our Dream Savings Jewelry Plan is designed to make luxury jewelry accessible to everyone. Save at your own pace and turn your jewelry dreams into reality\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #schemeCalculator>\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <div class=\"calc_header d-flex flex-column align-items-center justify-content-center\">\r\n <span>Calculate Your Returns</span>\r\n <div class=\"calc_desc\">\r\n See how your savings grow with our smart investment schemes. choose your preferred scheme and discover\r\n your potential returns.\r\n </div>\r\n </div>\r\n <div class=\"calculator_section\">\r\n <div class=\"sub-header mb-3 px-3\">\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\">\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]=\"schemeDetails?.valueStep\" [(ngModel)]=\"monthlyAmount\"\r\n (ngModelChange)=\"onAmountChange()\">\r\n <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n <span class=\"fw-bold\">\u20B9{{minAmount | number}}</span>\r\n <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n <span class=\"fw-bold\">\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 \u20B9 {{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 class=\"scheme-results\">\r\n <div class=\"d-flex align-items-center justify-content-between calcultaion_container mb-3\">\r\n <div class=\" installment_amount w-15\">\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=\"add_icon\">\r\n +\r\n </div>\r\n <div class=\"benefit _amount w-15\">\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=\"total_icon\">\r\n =\r\n </div>\r\n <div class=\"total_amount w-15\">\r\n <div class=\"result-card result-card-highlight text-center p-3 border rounded\" [style.background]=\"styles?.background?.accentColor\">\r\n <div class=\"result-amount fw-bold fs-5\">\r\n <div class=\"result-amount fw-bold fs-5\"\r\n *ngIf=\"schemeDetails?.benefitType != 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n maturityCount)+benefitAmount) | number}}</div>\r\n <div class=\"result-amount fw-bold fs-5\"\r\n *ngIf=\"schemeDetails?.benefitType === 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n maturityCount)) | number}}</div>\r\n </div>\r\n <!-- <div class=\"result-amount fw-bold fs-5\" *ngIf=\"enrolledScheme?.benefitType === 'DISCOUNT'\">\r\n \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=\"schemeDetails?.storeList?.length >=2 || staffMembers.length >= 2 \">\r\n <div class=\"store_selection w-50 align-items-center gap-1\"\r\n *ngIf=\"schemeDetails?.storeList?.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(schemeDetails)\" [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\r\n</ng-template>\r\n<ng-template #faqTemplate>\r\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\r\n <div class=\"faq-container\">\r\n <h1 class=\"faq-title\">Frequently Asked Questions</h1>\r\n <p class=\"faq-subtitle\">Everything you need to know about our Group Investment Scheme</p>\r\n\r\n <div class=\"faq-list\">\r\n <div class=\"faq-item\" *ngFor=\"let faq of faqList ?? []\" (click)=\"faq.showAnswer = !faq.showAnswer\">\r\n <div class=\"faq-question\">\r\n <span>{{faq?.question ? faq?.question : 'N/A'}}</span>\r\n <mat-icon *ngIf=\"faq.showAnswer\">keyboard_arrow_up</mat-icon>\r\n <mat-icon *ngIf=\"!faq.showAnswer\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n <div class=\"faq-answer\" *ngIf=\"faq.showAnswer\">\r\n <p>{{faq?.answer ? faq?.answer :'N/A' }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #termsAndConditions>\r\n <section class=\"terms-section d-flex align-items-center justify-content-center\">\r\n <div class=\"terms-container\">\r\n <h1 class=\"terms-title\">Terms and Conditions</h1>\r\n\r\n <div class=\"terms-content\">\r\n <div class=\"term-item d-flex\"\r\n *ngFor=\"let key of getKeys(schemeDetails?.termsAndConditions); let i = index\">\r\n <div class=\"terms_count\">\r\n <h3 class=\"term-heading\">{{ key }}.</h3>\r\n </div>\r\n <div>\r\n <p class=\"term-text\">\r\n {{ schemeDetails?.termsAndConditions?.[key]?.replaceAll('\\n',' ') || 'N/A' }}\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <!-- <div class=\"important-note\">\r\n <p><strong>Important:</strong> These terms and conditions are subject to change with prior notice.\r\n Participants will be notified of any changes via registered email or SMS. Continued\r\n participation after notification constitutes acceptance of revised terms.</p>\r\n </div> -->\r\n\r\n <div class=\"footer-note\">\r\n <p>Last updated: 8/22/2025 | Version 3.1</p>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\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", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.p-5{padding:2% 5%!important}.text_header{font-size:50px;font-weight:bolder;color:orange}.calc_header{gap:1rem;padding-bottom:4%}.calc_header span{font-size:23px;font-weight:700}.calc_desc{font-size:17px;text-align:center;padding:0% 23%}.desc_text{font-size:15px;padding:0% 20%;text-align:center}.sub-header-text{font-weight:500}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.random_opitons{padding:1%}.option{padding:.5% 2%;border:1px solid rgba(227,66,255,.1);border-radius:50px;background:#3a00441a}.calculator_section{padding:2%;width:65vw;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;border-radius:16px}.scheme-results{background:#fff9e9;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.add_icon,.total_icon{padding:.3% 1%;background:#fff;border-radius:50px}.w-15{width:15vw}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{color:#fff}.result-card-group{background:#d63384;color:#fff}.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}.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}.enroll-btn{font-size:16px;border:1px solid}.faq-section{padding:60px 20px}.faq-container{background:#fff;border-radius:16px;padding:40px;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;width:65vw}.faq-title{font-size:2.5rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:12px}.faq-subtitle{font-size:1.1rem;color:#718096;text-align:center;margin-bottom:40px;font-weight:400}.faq-list{display:flex;flex-direction:column;gap:12px}.faq-item{border:1px solid #e2e8f0;border-radius:12px;background:#fff;overflow:hidden;transition:all .3s ease}.faq-item:hover{border-color:#cbd5e0;box-shadow:0 2px 4px #0000000d}.faq-question{padding:20px 24px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:500;font-size:1.05rem;color:#2d3748;transition:color .2s ease}.faq-item:hover{box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014}.faq-question:hover span{color:#d4a574;text-decoration:underline}.faq-icon{width:20px;height:20px;color:#718096;transition:transform .3s ease;flex-shrink:0}.faq-item.active .faq-icon{transform:rotate(180deg)}.faq-answer{transition:.3s ease,padding .3s ease;padding:0% 2%}.faq-item.active .faq-answer{max-height:200px;padding:0 24px 20px}.faq-answer p{color:#4a5568;font-size:.95rem;line-height:1.6;margin-top:0}.terms-container{background:#fff;border-radius:16px;padding:50px 40px;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;width:65vw}.terms-title{font-size:2.2rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:40px;letter-spacing:-.02em}.terms-content{display:flex;flex-direction:column;gap:32px}.term-item{padding-bottom:20px;border-bottom:1px solid #e2e8f0;gap:10px}.terms_count{padding-top:.2%}.term-item:last-of-type{border-bottom:none;margin-bottom:20px}.term-heading{font-size:1.15rem;font-weight:600;color:#1a202c;margin-bottom:12px;letter-spacing:-.01em}.term-text{font-size:.95rem;color:#4a5568}.important-note{background:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;padding:20px;margin-top:16px}.important-note p{font-size:.9rem;color:#2d3748;line-height:1.6;margin:0}.important-note strong{color:#1a202c;font-weight:600}.footer-note{text-align:center;margin-top:24px;padding-top:16px}.footer-note p{font-size:.85rem;color:#718096;font-style:italic}.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}.payment-row:last-child{margin-bottom:0}.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}@media (max-width: 768px){.terms-section{padding:20px 16px}.terms-container{padding:30px 24px}.terms-title{font-size:1.8rem;margin-bottom:30px}.terms-content{gap:24px}.term-heading{font-size:1.1rem}.term-text{font-size:.9rem;text-align:left}.important-note{padding:16px}}.custom-range{-webkit-appearance:none;appearance:none;width:100%;height:10px;border-radius:999px;outline:none;margin:10px 0}.custom-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;background:#fff4d0;border:3px solid #F4C24B;cursor:pointer;box-shadow:0 2px 4px #0000001a}.custom-range::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff4d0;border:3px solid #F4C24B;cursor:pointer;box-shadow:0 2px 4px #0000001a}.custom-range::-moz-range-track{height:10px;border-radius:999px}\n"], dependencies: [{ 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: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { 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: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }] }); }
|
|
15009
15008
|
}
|
|
15010
15009
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemeDetailComponent, decorators: [{
|
|
15011
15010
|
type: Component,
|
|
15012
|
-
args: [{ selector: 'simpo-scheme-detail', standalone: true, imports: [CdkDragPlaceholder, CommonModule, MatDialogModule, SpacingHorizontalDirective, FormsModule, TextEditorComponent, MatIcon, ButtonEditorDirective], providers: [MatDialog], template: "<section class=\"main_section w-100\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\">\r\n <div class=\"about_plan_section p-5 d-flex flex-column align-items-center justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"aboutUsTemplate\"></ng-container>\r\n </div>\r\n <div class=\"scheme_calculator_section p-5 d-flex flex-column align-items-center justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"schemeCalculator\"></ng-container>\r\n </div>\r\n <div class=\"faq_section p-5\" *ngIf=\"faqList.length > 0\">\r\n <ng-container *ngTemplateOutlet=\"faqTemplate\"></ng-container>\r\n </div>\r\n <div class=\"terms_condition_section p-5\" *ngIf=\"!getKeys(schemeDetails?.termsAndConditions)\">\r\n <ng-container *ngTemplateOutlet=\"termsAndConditions\"></ng-container>\r\n </div>\r\n</section>\r\n<ng-template #aboutUsTemplate>\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"text_header d-flex align-items-center justify-content-center\">\r\n <simpo-text-editor [(value)]=\"getInputText\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"desc_text\">\r\n Our Dream Savings Jewelry Plan is designed to make luxury jewelry accessible to everyone. Save at your own pace and turn your jewelry dreams into reality\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #schemeCalculator>\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <div class=\"calc_header d-flex flex-column align-items-center justify-content-center\">\r\n <span>Calculate Your Returns</span>\r\n <div class=\"calc_desc\">\r\n See how your savings grow with our smart investment schemes. choose your preferred scheme and discover\r\n your potential returns.\r\n </div>\r\n </div>\r\n <div class=\"calculator_section\">\r\n <div class=\"sub-header mb-3 px-3\">\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\">\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]=\"schemeDetails?.valueStep\" [(ngModel)]=\"monthlyAmount\"\r\n (ngModelChange)=\"onAmountChange()\">\r\n <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n <span class=\"fw-bold\">\u20B9{{minAmount | number}}</span>\r\n <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n <span class=\"fw-bold\">\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 \u20B9 {{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 class=\"scheme-results\">\r\n <div class=\"d-flex align-items-center justify-content-between calcultaion_container mb-3\">\r\n <div class=\" installment_amount w-15\">\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=\"add_icon\">\r\n +\r\n </div>\r\n <div class=\"benefit _amount w-15\">\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=\"total_icon\">\r\n =\r\n </div>\r\n <div class=\"total_amount w-15\">\r\n <div class=\"result-card result-card-highlight text-center p-3 border rounded\" [style.background]=\"styles?.background?.accentColor\">\r\n <div class=\"result-amount fw-bold fs-5\">\r\n <div class=\"result-amount fw-bold fs-5\"\r\n *ngIf=\"schemeDetails?.benefitType != 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n maturityCount)+benefitAmount) | number}}</div>\r\n <div class=\"result-amount fw-bold fs-5\"\r\n *ngIf=\"schemeDetails?.benefitType === 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n maturityCount)) | number}}</div>\r\n </div>\r\n <!-- <div class=\"result-amount fw-bold fs-5\" *ngIf=\"enrolledScheme?.benefitType === 'DISCOUNT'\">\r\n \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=\"schemeDetails?.storeList?.length >=2 || staffMembers.length >= 2 \">\r\n <div class=\"store_selection w-50 align-items-center gap-1\"\r\n *ngIf=\"schemeDetails?.storeList?.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(schemeDetails)\" [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\r\n</ng-template>\r\n<ng-template #faqTemplate>\r\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\r\n <div class=\"faq-container\">\r\n <h1 class=\"faq-title\">Frequently Asked Questions</h1>\r\n <p class=\"faq-subtitle\">Everything you need to know about our Group Investment Scheme</p>\r\n\r\n <div class=\"faq-list\">\r\n <div class=\"faq-item\" *ngFor=\"let faq of faqList\" (click)=\"faq.showAnswer = !faq.showAnswer\">\r\n <div class=\"faq-question\">\r\n <span>{{faq?.question ? faq?.question : 'N/A'}}</span>\r\n <mat-icon *ngIf=\"faq.showAnswer\">keyboard_arrow_up</mat-icon>\r\n <mat-icon *ngIf=\"!faq.showAnswer\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n <div class=\"faq-answer\" *ngIf=\"faq.showAnswer\">\r\n <p>{{faq?.answer ? faq?.answer :'N/A' }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #termsAndConditions>\r\n <section class=\"terms-section d-flex align-items-center justify-content-center\">\r\n <div class=\"terms-container\">\r\n <h1 class=\"terms-title\">Terms and Conditions</h1>\r\n\r\n <div class=\"terms-content\">\r\n <div class=\"term-item d-flex\"\r\n *ngFor=\"let key of getKeys(schemeDetails?.termsAndConditions); let i = index\">\r\n <div class=\"terms_count\">\r\n <h3 class=\"term-heading\">{{ key }}.</h3>\r\n </div>\r\n <div>\r\n <p class=\"term-text\">\r\n {{ schemeDetails?.termsAndConditions?.[key]?.replaceAll('\\n',' ') || 'N/A' }}\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <!-- <div class=\"important-note\">\r\n <p><strong>Important:</strong> These terms and conditions are subject to change with prior notice.\r\n Participants will be notified of any changes via registered email or SMS. Continued\r\n participation after notification constitutes acceptance of revised terms.</p>\r\n </div> -->\r\n\r\n <div class=\"footer-note\">\r\n <p>Last updated: 8/22/2025 | Version 3.1</p>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\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>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.p-5{padding:2% 5%!important}.text_header{font-size:50px;font-weight:bolder;color:orange}.calc_header{gap:1rem;padding-bottom:4%}.calc_header span{font-size:23px;font-weight:700}.calc_desc{font-size:17px;text-align:center;padding:0% 23%}.desc_text{font-size:15px;padding:0% 20%;text-align:center}.sub-header-text{font-weight:500}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.random_opitons{padding:1%}.option{padding:.5% 2%;border:1px solid rgba(227,66,255,.1);border-radius:50px;background:#3a00441a}.calculator_section{padding:2%;width:65vw;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;border-radius:16px}.scheme-results{background:#fff9e9;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.add_icon,.total_icon{padding:.3% 1%;background:#fff;border-radius:50px}.w-15{width:15vw}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{color:#fff}.result-card-group{background:#d63384;color:#fff}.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}.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}.enroll-btn{font-size:16px;border:1px solid}.faq-section{padding:60px 20px}.faq-container{background:#fff;border-radius:16px;padding:40px;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;width:65vw}.faq-title{font-size:2.5rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:12px}.faq-subtitle{font-size:1.1rem;color:#718096;text-align:center;margin-bottom:40px;font-weight:400}.faq-list{display:flex;flex-direction:column;gap:12px}.faq-item{border:1px solid #e2e8f0;border-radius:12px;background:#fff;overflow:hidden;transition:all .3s ease}.faq-item:hover{border-color:#cbd5e0;box-shadow:0 2px 4px #0000000d}.faq-question{padding:20px 24px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:500;font-size:1.05rem;color:#2d3748;transition:color .2s ease}.faq-item:hover{box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014}.faq-question:hover span{color:#d4a574;text-decoration:underline}.faq-icon{width:20px;height:20px;color:#718096;transition:transform .3s ease;flex-shrink:0}.faq-item.active .faq-icon{transform:rotate(180deg)}.faq-answer{transition:.3s ease,padding .3s ease;padding:0% 2%}.faq-item.active .faq-answer{max-height:200px;padding:0 24px 20px}.faq-answer p{color:#4a5568;font-size:.95rem;line-height:1.6;margin-top:0}.terms-container{background:#fff;border-radius:16px;padding:50px 40px;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;width:65vw}.terms-title{font-size:2.2rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:40px;letter-spacing:-.02em}.terms-content{display:flex;flex-direction:column;gap:32px}.term-item{padding-bottom:20px;border-bottom:1px solid #e2e8f0;gap:10px}.terms_count{padding-top:.2%}.term-item:last-of-type{border-bottom:none;margin-bottom:20px}.term-heading{font-size:1.15rem;font-weight:600;color:#1a202c;margin-bottom:12px;letter-spacing:-.01em}.term-text{font-size:.95rem;color:#4a5568}.important-note{background:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;padding:20px;margin-top:16px}.important-note p{font-size:.9rem;color:#2d3748;line-height:1.6;margin:0}.important-note strong{color:#1a202c;font-weight:600}.footer-note{text-align:center;margin-top:24px;padding-top:16px}.footer-note p{font-size:.85rem;color:#718096;font-style:italic}.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}.payment-row:last-child{margin-bottom:0}.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}@media (max-width: 768px){.terms-section{padding:20px 16px}.terms-container{padding:30px 24px}.terms-title{font-size:1.8rem;margin-bottom:30px}.terms-content{gap:24px}.term-heading{font-size:1.1rem}.term-text{font-size:.9rem;text-align:left}.important-note{padding:16px}}.custom-range{-webkit-appearance:none;appearance:none;width:100%;height:10px;border-radius:999px;outline:none;margin:10px 0}.custom-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;background:#fff4d0;border:3px solid #F4C24B;cursor:pointer;box-shadow:0 2px 4px #0000001a}.custom-range::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff4d0;border:3px solid #F4C24B;cursor:pointer;box-shadow:0 2px 4px #0000001a}.custom-range::-moz-range-track{height:10px;border-radius:999px}\n"] }]
|
|
15011
|
+
args: [{ selector: 'simpo-scheme-detail', standalone: true, imports: [CdkDragPlaceholder, CommonModule, MatDialogModule, SpacingHorizontalDirective, FormsModule, TextEditorComponent, MatIcon, ButtonEditorDirective], providers: [MatDialog], template: "<section class=\"main_section w-100\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\">\r\n <div class=\"about_plan_section p-5 d-flex flex-column align-items-center justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"aboutUsTemplate\"></ng-container>\r\n </div>\r\n <div class=\"scheme_calculator_section p-5 d-flex flex-column align-items-center justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"schemeCalculator\"></ng-container>\r\n </div>\r\n <div class=\"faq_section p-5\" *ngIf=\"faqList.length > 0\">\r\n <ng-container *ngTemplateOutlet=\"faqTemplate\"></ng-container>\r\n </div>\r\n <div class=\"terms_condition_section p-5\" *ngIf=\"!getKeys(schemeDetails?.termsAndConditions)\">\r\n <ng-container *ngTemplateOutlet=\"termsAndConditions\"></ng-container>\r\n </div>\r\n</section>\r\n<ng-template #aboutUsTemplate>\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"text_header d-flex align-items-center justify-content-center\">\r\n <simpo-text-editor [(value)]=\"getInputText\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"desc_text\">\r\n Our Dream Savings Jewelry Plan is designed to make luxury jewelry accessible to everyone. Save at your own pace and turn your jewelry dreams into reality\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #schemeCalculator>\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <div class=\"calc_header d-flex flex-column align-items-center justify-content-center\">\r\n <span>Calculate Your Returns</span>\r\n <div class=\"calc_desc\">\r\n See how your savings grow with our smart investment schemes. choose your preferred scheme and discover\r\n your potential returns.\r\n </div>\r\n </div>\r\n <div class=\"calculator_section\">\r\n <div class=\"sub-header mb-3 px-3\">\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\">\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]=\"schemeDetails?.valueStep\" [(ngModel)]=\"monthlyAmount\"\r\n (ngModelChange)=\"onAmountChange()\">\r\n <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n <span class=\"fw-bold\">\u20B9{{minAmount | number}}</span>\r\n <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n <span class=\"fw-bold\">\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 \u20B9 {{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 class=\"scheme-results\">\r\n <div class=\"d-flex align-items-center justify-content-between calcultaion_container mb-3\">\r\n <div class=\" installment_amount w-15\">\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=\"add_icon\">\r\n +\r\n </div>\r\n <div class=\"benefit _amount w-15\">\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=\"total_icon\">\r\n =\r\n </div>\r\n <div class=\"total_amount w-15\">\r\n <div class=\"result-card result-card-highlight text-center p-3 border rounded\" [style.background]=\"styles?.background?.accentColor\">\r\n <div class=\"result-amount fw-bold fs-5\">\r\n <div class=\"result-amount fw-bold fs-5\"\r\n *ngIf=\"schemeDetails?.benefitType != 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n maturityCount)+benefitAmount) | number}}</div>\r\n <div class=\"result-amount fw-bold fs-5\"\r\n *ngIf=\"schemeDetails?.benefitType === 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n maturityCount)) | number}}</div>\r\n </div>\r\n <!-- <div class=\"result-amount fw-bold fs-5\" *ngIf=\"enrolledScheme?.benefitType === 'DISCOUNT'\">\r\n \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=\"schemeDetails?.storeList?.length >=2 || staffMembers.length >= 2 \">\r\n <div class=\"store_selection w-50 align-items-center gap-1\"\r\n *ngIf=\"schemeDetails?.storeList?.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(schemeDetails)\" [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\r\n</ng-template>\r\n<ng-template #faqTemplate>\r\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\r\n <div class=\"faq-container\">\r\n <h1 class=\"faq-title\">Frequently Asked Questions</h1>\r\n <p class=\"faq-subtitle\">Everything you need to know about our Group Investment Scheme</p>\r\n\r\n <div class=\"faq-list\">\r\n <div class=\"faq-item\" *ngFor=\"let faq of faqList ?? []\" (click)=\"faq.showAnswer = !faq.showAnswer\">\r\n <div class=\"faq-question\">\r\n <span>{{faq?.question ? faq?.question : 'N/A'}}</span>\r\n <mat-icon *ngIf=\"faq.showAnswer\">keyboard_arrow_up</mat-icon>\r\n <mat-icon *ngIf=\"!faq.showAnswer\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n <div class=\"faq-answer\" *ngIf=\"faq.showAnswer\">\r\n <p>{{faq?.answer ? faq?.answer :'N/A' }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #termsAndConditions>\r\n <section class=\"terms-section d-flex align-items-center justify-content-center\">\r\n <div class=\"terms-container\">\r\n <h1 class=\"terms-title\">Terms and Conditions</h1>\r\n\r\n <div class=\"terms-content\">\r\n <div class=\"term-item d-flex\"\r\n *ngFor=\"let key of getKeys(schemeDetails?.termsAndConditions); let i = index\">\r\n <div class=\"terms_count\">\r\n <h3 class=\"term-heading\">{{ key }}.</h3>\r\n </div>\r\n <div>\r\n <p class=\"term-text\">\r\n {{ schemeDetails?.termsAndConditions?.[key]?.replaceAll('\\n',' ') || 'N/A' }}\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <!-- <div class=\"important-note\">\r\n <p><strong>Important:</strong> These terms and conditions are subject to change with prior notice.\r\n Participants will be notified of any changes via registered email or SMS. Continued\r\n participation after notification constitutes acceptance of revised terms.</p>\r\n </div> -->\r\n\r\n <div class=\"footer-note\">\r\n <p>Last updated: 8/22/2025 | Version 3.1</p>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\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", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.p-5{padding:2% 5%!important}.text_header{font-size:50px;font-weight:bolder;color:orange}.calc_header{gap:1rem;padding-bottom:4%}.calc_header span{font-size:23px;font-weight:700}.calc_desc{font-size:17px;text-align:center;padding:0% 23%}.desc_text{font-size:15px;padding:0% 20%;text-align:center}.sub-header-text{font-weight:500}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.random_opitons{padding:1%}.option{padding:.5% 2%;border:1px solid rgba(227,66,255,.1);border-radius:50px;background:#3a00441a}.calculator_section{padding:2%;width:65vw;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;border-radius:16px}.scheme-results{background:#fff9e9;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.add_icon,.total_icon{padding:.3% 1%;background:#fff;border-radius:50px}.w-15{width:15vw}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{color:#fff}.result-card-group{background:#d63384;color:#fff}.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}.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}.enroll-btn{font-size:16px;border:1px solid}.faq-section{padding:60px 20px}.faq-container{background:#fff;border-radius:16px;padding:40px;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;width:65vw}.faq-title{font-size:2.5rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:12px}.faq-subtitle{font-size:1.1rem;color:#718096;text-align:center;margin-bottom:40px;font-weight:400}.faq-list{display:flex;flex-direction:column;gap:12px}.faq-item{border:1px solid #e2e8f0;border-radius:12px;background:#fff;overflow:hidden;transition:all .3s ease}.faq-item:hover{border-color:#cbd5e0;box-shadow:0 2px 4px #0000000d}.faq-question{padding:20px 24px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:500;font-size:1.05rem;color:#2d3748;transition:color .2s ease}.faq-item:hover{box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014}.faq-question:hover span{color:#d4a574;text-decoration:underline}.faq-icon{width:20px;height:20px;color:#718096;transition:transform .3s ease;flex-shrink:0}.faq-item.active .faq-icon{transform:rotate(180deg)}.faq-answer{transition:.3s ease,padding .3s ease;padding:0% 2%}.faq-item.active .faq-answer{max-height:200px;padding:0 24px 20px}.faq-answer p{color:#4a5568;font-size:.95rem;line-height:1.6;margin-top:0}.terms-container{background:#fff;border-radius:16px;padding:50px 40px;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;width:65vw}.terms-title{font-size:2.2rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:40px;letter-spacing:-.02em}.terms-content{display:flex;flex-direction:column;gap:32px}.term-item{padding-bottom:20px;border-bottom:1px solid #e2e8f0;gap:10px}.terms_count{padding-top:.2%}.term-item:last-of-type{border-bottom:none;margin-bottom:20px}.term-heading{font-size:1.15rem;font-weight:600;color:#1a202c;margin-bottom:12px;letter-spacing:-.01em}.term-text{font-size:.95rem;color:#4a5568}.important-note{background:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;padding:20px;margin-top:16px}.important-note p{font-size:.9rem;color:#2d3748;line-height:1.6;margin:0}.important-note strong{color:#1a202c;font-weight:600}.footer-note{text-align:center;margin-top:24px;padding-top:16px}.footer-note p{font-size:.85rem;color:#718096;font-style:italic}.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}.payment-row:last-child{margin-bottom:0}.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}@media (max-width: 768px){.terms-section{padding:20px 16px}.terms-container{padding:30px 24px}.terms-title{font-size:1.8rem;margin-bottom:30px}.terms-content{gap:24px}.term-heading{font-size:1.1rem}.term-text{font-size:.9rem;text-align:left}.important-note{padding:16px}}.custom-range{-webkit-appearance:none;appearance:none;width:100%;height:10px;border-radius:999px;outline:none;margin:10px 0}.custom-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;background:#fff4d0;border:3px solid #F4C24B;cursor:pointer;box-shadow:0 2px 4px #0000001a}.custom-range::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff4d0;border:3px solid #F4C24B;cursor:pointer;box-shadow:0 2px 4px #0000001a}.custom-range::-moz-range-track{height:10px;border-radius:999px}\n"] }]
|
|
15013
15012
|
}], ctorParameters: () => [{ type: i2$2.ActivatedRoute }, { type: RestService }, { type: StorageServiceService }, { type: i1$1.MatDialog }, { type: i2$2.Router }, { type: EventsService }], propDecorators: { data: [{
|
|
15014
15013
|
type: Input
|
|
15015
15014
|
}], index: [{
|
|
@@ -18588,7 +18587,16 @@ class UserProfileComponent extends BaseSection {
|
|
|
18588
18587
|
return item;
|
|
18589
18588
|
}
|
|
18590
18589
|
});
|
|
18590
|
+
this.selectedSidePanelTab = 'Scheme Passbook';
|
|
18591
18591
|
}
|
|
18592
|
+
this.sidePanelList?.forEach(item => {
|
|
18593
|
+
if (item.value === this.selectedSidePanelTab) {
|
|
18594
|
+
item.status = true;
|
|
18595
|
+
}
|
|
18596
|
+
else {
|
|
18597
|
+
item.status = false;
|
|
18598
|
+
}
|
|
18599
|
+
});
|
|
18592
18600
|
this.getAllSchemes();
|
|
18593
18601
|
this.getAllPassbookDues();
|
|
18594
18602
|
}
|
|
@@ -19473,6 +19481,7 @@ class VerifyComponent extends BaseSection {
|
|
|
19473
19481
|
this.messageService = messageService;
|
|
19474
19482
|
this._eventService = _eventService;
|
|
19475
19483
|
this.userDetails = null;
|
|
19484
|
+
this.paymentStatus = 'ONGOING';
|
|
19476
19485
|
this.loadingText = "Please wait...";
|
|
19477
19486
|
this.API_COUNT = 0;
|
|
19478
19487
|
this.MAX_API_COUNT = 20;
|
|
@@ -19490,21 +19499,21 @@ class VerifyComponent extends BaseSection {
|
|
|
19490
19499
|
if (localStorage.getItem("REQUEST_FROM") == "ECOMMERCE")
|
|
19491
19500
|
return;
|
|
19492
19501
|
setTimeout(() => {
|
|
19493
|
-
this.loadingText =
|
|
19502
|
+
this.loadingText = 'Thanks for choosing us';
|
|
19494
19503
|
setTimeout(() => {
|
|
19495
|
-
this.loadingText =
|
|
19504
|
+
this.loadingText = 'We are processing your payments';
|
|
19496
19505
|
setTimeout(() => {
|
|
19497
|
-
this.loadingText =
|
|
19498
|
-
const passBookOrderId = localStorage.getItem("passbookOrderId");
|
|
19499
|
-
if (passBookOrderId) {
|
|
19500
|
-
this.checkPassbookPaymentStatus();
|
|
19501
|
-
}
|
|
19502
|
-
else {
|
|
19503
|
-
this.checkPaymentStatus();
|
|
19504
|
-
}
|
|
19506
|
+
// this.loadingText = 'Hold On...';
|
|
19505
19507
|
}, 3000);
|
|
19506
19508
|
}, 3000);
|
|
19507
19509
|
}, 3000);
|
|
19510
|
+
const passBookOrderId = localStorage.getItem("passbookOrderId");
|
|
19511
|
+
if (passBookOrderId) {
|
|
19512
|
+
this.checkPassbookPaymentStatus();
|
|
19513
|
+
}
|
|
19514
|
+
else {
|
|
19515
|
+
this.checkPaymentStatus();
|
|
19516
|
+
}
|
|
19508
19517
|
}
|
|
19509
19518
|
get getImageUrl() {
|
|
19510
19519
|
return this.content?.image?.url;
|
|
@@ -19522,28 +19531,36 @@ class VerifyComponent extends BaseSection {
|
|
|
19522
19531
|
localStorage.removeItem("cartId");
|
|
19523
19532
|
localStorage.removeItem("paymentFor");
|
|
19524
19533
|
this.storageService.clearUserCart();
|
|
19525
|
-
|
|
19526
|
-
|
|
19527
|
-
|
|
19528
|
-
|
|
19529
|
-
|
|
19530
|
-
|
|
19531
|
-
|
|
19532
|
-
|
|
19533
|
-
|
|
19534
|
-
})
|
|
19534
|
+
this.paymentStatus = 'SUCCESS';
|
|
19535
|
+
setTimeout(() => {
|
|
19536
|
+
this.router.navigate(['/profile']);
|
|
19537
|
+
}, 3000);
|
|
19538
|
+
// Swal.fire({
|
|
19539
|
+
// icon: "success",
|
|
19540
|
+
// title: "Hurray",
|
|
19541
|
+
// text: "Order placed successfully",
|
|
19542
|
+
// confirmButtonText: "See Details"
|
|
19543
|
+
// }).then((response) => {
|
|
19544
|
+
// if (response.isConfirmed) {
|
|
19545
|
+
// this.router.navigate(['/profile']);
|
|
19546
|
+
// }
|
|
19547
|
+
// })
|
|
19535
19548
|
}, (error) => {
|
|
19536
19549
|
if (this.API_COUNT >= this.MAX_API_COUNT) {
|
|
19537
|
-
|
|
19538
|
-
|
|
19539
|
-
|
|
19540
|
-
|
|
19541
|
-
|
|
19542
|
-
|
|
19543
|
-
|
|
19544
|
-
|
|
19545
|
-
|
|
19546
|
-
})
|
|
19550
|
+
this.paymentStatus = 'FAILED';
|
|
19551
|
+
setTimeout(() => {
|
|
19552
|
+
this.router.navigate(['/']);
|
|
19553
|
+
}, 3000);
|
|
19554
|
+
// Swal.fire({
|
|
19555
|
+
// icon: "error",
|
|
19556
|
+
// title: "Sorry",
|
|
19557
|
+
// text: "We encountered some issue while placing your order",
|
|
19558
|
+
// confirmButtonText: "Go To Home"
|
|
19559
|
+
// }).then((response) => {
|
|
19560
|
+
// if (response.isConfirmed) {
|
|
19561
|
+
// this.router.navigate(['/']);
|
|
19562
|
+
// }
|
|
19563
|
+
// })
|
|
19547
19564
|
}
|
|
19548
19565
|
else {
|
|
19549
19566
|
this.checkPaymentStatus();
|
|
@@ -19555,28 +19572,36 @@ class VerifyComponent extends BaseSection {
|
|
|
19555
19572
|
this.PASSBOOK_API_COUNT++;
|
|
19556
19573
|
this.restService.getPassbookOrderStatus(orderId).subscribe((response) => {
|
|
19557
19574
|
localStorage.removeItem("passbookOrderId");
|
|
19558
|
-
|
|
19559
|
-
|
|
19560
|
-
|
|
19561
|
-
|
|
19562
|
-
|
|
19563
|
-
|
|
19564
|
-
|
|
19565
|
-
|
|
19566
|
-
|
|
19567
|
-
})
|
|
19575
|
+
this.paymentStatus = 'SUCCESS';
|
|
19576
|
+
setTimeout(() => {
|
|
19577
|
+
this.router.navigate(['/profile']);
|
|
19578
|
+
}, 3000);
|
|
19579
|
+
// Swal.fire({
|
|
19580
|
+
// icon: "success",
|
|
19581
|
+
// title: "Hurray",
|
|
19582
|
+
// text: "Payment Successful",
|
|
19583
|
+
// confirmButtonText: "See Details"
|
|
19584
|
+
// }).then((response) => {
|
|
19585
|
+
// if (response.isConfirmed) {
|
|
19586
|
+
// this.router.navigate(['/profile'], {queryParams: {tab: 'Scheme Passbook'}});
|
|
19587
|
+
// }
|
|
19588
|
+
// })
|
|
19568
19589
|
}, (error) => {
|
|
19569
19590
|
if (this.PASSBOOK_API_COUNT >= this.MAX_PASSBOOK_API_COUNT) {
|
|
19570
|
-
Swal.fire({
|
|
19571
|
-
|
|
19572
|
-
|
|
19573
|
-
|
|
19574
|
-
|
|
19575
|
-
}).then((response) => {
|
|
19576
|
-
|
|
19577
|
-
|
|
19578
|
-
|
|
19579
|
-
})
|
|
19591
|
+
// Swal.fire({
|
|
19592
|
+
// icon: "error",
|
|
19593
|
+
// title: "Sorry",
|
|
19594
|
+
// text: "We encountered some issue while placing your order",
|
|
19595
|
+
// confirmButtonText: "Go To Home"
|
|
19596
|
+
// }).then((response) => {
|
|
19597
|
+
// if (response.isConfirmed) {
|
|
19598
|
+
// this.router.navigate(['/']);
|
|
19599
|
+
// }
|
|
19600
|
+
// })
|
|
19601
|
+
this.paymentStatus = 'FAILED';
|
|
19602
|
+
setTimeout(() => {
|
|
19603
|
+
this.router.navigate(['/']);
|
|
19604
|
+
}, 3000);
|
|
19580
19605
|
}
|
|
19581
19606
|
else {
|
|
19582
19607
|
this.checkPassbookPaymentStatus();
|
|
@@ -19592,7 +19617,7 @@ class VerifyComponent extends BaseSection {
|
|
|
19592
19617
|
}, 100);
|
|
19593
19618
|
}
|
|
19594
19619
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: VerifyComponent, deps: [{ token: RestService }, { token: i2$2.Router }, { token: StorageServiceService }, { token: i4$1.MessageService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
19595
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: VerifyComponent, isStandalone: true, selector: "simpo-verify-payment", inputs: { data: "data", responseData: "responseData", edit: "edit", index: "index", delete: "delete", customClass: "customClass" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<section class=\"d-flex flex-column align-items-center justify-content-center total-container\" style=\"height: 100vh;\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"getImageUrl\" style=\"height: 200px; width: 200px;\" [alt]=\"content?.image?.altText\">\r\n <span class=\"font-bold\">{{loadingText}}</span>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></simpo-hover-elements>\r\n </div>\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</section>\r\n"
|
|
19620
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: VerifyComponent, isStandalone: true, selector: "simpo-verify-payment", inputs: { data: "data", responseData: "responseData", edit: "edit", index: "index", delete: "delete", customClass: "customClass" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<!-- <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<section class=\"d-flex flex-column align-items-center justify-content-center total-container\" style=\"height: 100vh;\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"getImageUrl\" style=\"height: 200px; width: 200px;\" [alt]=\"content?.image?.altText\">\r\n <span class=\"font-bold\">{{loadingText}}</span>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></simpo-hover-elements>\r\n </div>\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</section> -->\r\n<section *ngIf=\"paymentStatus === 'SUCCESS'\" class=\"main_section\">\r\n <div class=\"image_section\">\r\n <img alt=\"loader\" src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/688996c175593490852796237-success.gif\">\r\n </div>\r\n <div class=\"success_heading heading\">\r\n Payment Successfull\r\n </div>\r\n <div class=\"payment_sub_text\">\r\n Your payment has been successfully processed.\r\n </div>\r\n <!-- <div class=\"plan_description\">\r\n <div class=\"title_value\">\r\n <div class=\"plan_title\">\r\n Subscribed Plan\r\n </div>\r\n <div class=\"plan_value\">\r\n {{ planName | titlecase }}\r\n </div>\r\n </div>\r\n <div class=\"title_value\">\r\n <div class=\"plan_title\">\r\n Amount Paid\r\n </div>\r\n <div class=\"plan_value\">\r\n <span>\u20B9</span><span>{{ planAmount }}</span>\r\n </div>\r\n </div>\r\n <div class=\"title_value\">\r\n <div class=\"plan_title\">\r\n Valid till\r\n </div>\r\n <div class=\"plan_value\">\r\n {{ validity | date }}\r\n </div>\r\n </div>\r\n </div> -->\r\n</section>\r\n<section *ngIf=\"paymentStatus === 'FAILED'\" class=\"main_section\">\r\n <div class=\"image_section\">\r\n <img alt=\"loader\" src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/663878c1755934932573paymentfailed.gif\">\r\n </div>\r\n <div class=\"success_heading heading\">\r\n Payment Failed\r\n </div>\r\n <div class=\"payment_sub_text\">\r\n Unfortunately Payment was rejected\r\n </div>\r\n <div class=\"payment_minimal_text\">\r\n Page will be automatically redirect to homepage\r\n </div>\r\n <!-- <div class=\"plan_description\">\r\n <button (click)=\"done()\">Done</button>\r\n </div> -->\r\n</section>\r\n\r\n<section *ngIf=\"paymentStatus === 'ONGOING'\" class=\"main_section spinner\">\r\n <div class=\"payment-ongoing\">\r\n <mat-spinner style=\"width: 100%;\"></mat-spinner>\r\n <p>{{loadingText}}</p>\r\n </div>\r\n</section>\r\n", styles: ["*{font-family:var(--website-font-family)}.main_section{background-color:#fff;height:calc(90vh + -0px);overflow-y:scroll;display:flex;justify-content:center;align-items:center;flex-direction:column}.image_section img{width:100px}.success_heading{color:#000;margin-top:10px}.payment_sub_text{margin-top:10px;width:35%;text-align:center;line-height:32px}.plan_description{margin-top:10px!important;box-shadow:0 0 1px #28293d14,0 .5px 2px #60617029;background-color:#fff;border-radius:10px;width:30%;margin:0 auto;padding:40px}.title_value{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px}@media only screen and (max-width: 475px){.payment_sub_text{width:80%}.plan_description{width:80%;height:auto}}.spinner{display:flex;align-items:center;justify-content:center}.spinner p{margin-top:22px;font-size:18px;font-weight:500}.payment-ongoing mat-spinner{width:100%!important}.heading{font-size:18px;font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: ToastModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i10$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
|
|
19596
19621
|
}
|
|
19597
19622
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: VerifyComponent, decorators: [{
|
|
19598
19623
|
type: Component,
|
|
@@ -19602,8 +19627,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
19602
19627
|
ToastModule,
|
|
19603
19628
|
CommonModule,
|
|
19604
19629
|
HoverElementsComponent,
|
|
19605
|
-
DeleteHoverElementComponent
|
|
19606
|
-
|
|
19630
|
+
DeleteHoverElementComponent,
|
|
19631
|
+
MatProgressSpinnerModule
|
|
19632
|
+
], providers: [MessageService], template: "<!-- <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<section class=\"d-flex flex-column align-items-center justify-content-center total-container\" style=\"height: 100vh;\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"getImageUrl\" style=\"height: 200px; width: 200px;\" [alt]=\"content?.image?.altText\">\r\n <span class=\"font-bold\">{{loadingText}}</span>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></simpo-hover-elements>\r\n </div>\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</section> -->\r\n<section *ngIf=\"paymentStatus === 'SUCCESS'\" class=\"main_section\">\r\n <div class=\"image_section\">\r\n <img alt=\"loader\" src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/688996c175593490852796237-success.gif\">\r\n </div>\r\n <div class=\"success_heading heading\">\r\n Payment Successfull\r\n </div>\r\n <div class=\"payment_sub_text\">\r\n Your payment has been successfully processed.\r\n </div>\r\n <!-- <div class=\"plan_description\">\r\n <div class=\"title_value\">\r\n <div class=\"plan_title\">\r\n Subscribed Plan\r\n </div>\r\n <div class=\"plan_value\">\r\n {{ planName | titlecase }}\r\n </div>\r\n </div>\r\n <div class=\"title_value\">\r\n <div class=\"plan_title\">\r\n Amount Paid\r\n </div>\r\n <div class=\"plan_value\">\r\n <span>\u20B9</span><span>{{ planAmount }}</span>\r\n </div>\r\n </div>\r\n <div class=\"title_value\">\r\n <div class=\"plan_title\">\r\n Valid till\r\n </div>\r\n <div class=\"plan_value\">\r\n {{ validity | date }}\r\n </div>\r\n </div>\r\n </div> -->\r\n</section>\r\n<section *ngIf=\"paymentStatus === 'FAILED'\" class=\"main_section\">\r\n <div class=\"image_section\">\r\n <img alt=\"loader\" src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/663878c1755934932573paymentfailed.gif\">\r\n </div>\r\n <div class=\"success_heading heading\">\r\n Payment Failed\r\n </div>\r\n <div class=\"payment_sub_text\">\r\n Unfortunately Payment was rejected\r\n </div>\r\n <div class=\"payment_minimal_text\">\r\n Page will be automatically redirect to homepage\r\n </div>\r\n <!-- <div class=\"plan_description\">\r\n <button (click)=\"done()\">Done</button>\r\n </div> -->\r\n</section>\r\n\r\n<section *ngIf=\"paymentStatus === 'ONGOING'\" class=\"main_section spinner\">\r\n <div class=\"payment-ongoing\">\r\n <mat-spinner style=\"width: 100%;\"></mat-spinner>\r\n <p>{{loadingText}}</p>\r\n </div>\r\n</section>\r\n", styles: ["*{font-family:var(--website-font-family)}.main_section{background-color:#fff;height:calc(90vh + -0px);overflow-y:scroll;display:flex;justify-content:center;align-items:center;flex-direction:column}.image_section img{width:100px}.success_heading{color:#000;margin-top:10px}.payment_sub_text{margin-top:10px;width:35%;text-align:center;line-height:32px}.plan_description{margin-top:10px!important;box-shadow:0 0 1px #28293d14,0 .5px 2px #60617029;background-color:#fff;border-radius:10px;width:30%;margin:0 auto;padding:40px}.title_value{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px}@media only screen and (max-width: 475px){.payment_sub_text{width:80%}.plan_description{width:80%;height:auto}}.spinner{display:flex;align-items:center;justify-content:center}.spinner p{margin-top:22px;font-size:18px;font-weight:500}.payment-ongoing mat-spinner{width:100%!important}.heading{font-size:18px;font-weight:700}\n"] }]
|
|
19607
19633
|
}], ctorParameters: () => [{ type: RestService }, { type: i2$2.Router }, { type: StorageServiceService }, { type: i4$1.MessageService }, { type: EventsService }], propDecorators: { data: [{
|
|
19608
19634
|
type: Input
|
|
19609
19635
|
}], responseData: [{
|