simpo-component-library 3.6.836 → 3.6.838

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.
Files changed (14) hide show
  1. package/esm2022/lib/ecommerce/sections/cart/cart.component.mjs +27 -4
  2. package/esm2022/lib/elements/schedule-video-call/schedule-video-call.component.mjs +42 -40
  3. package/fesm2022/simpo-component-library.mjs +67 -42
  4. package/fesm2022/simpo-component-library.mjs.map +1 -1
  5. package/lib/components/input-fields/input-fields.component.d.ts +1 -1
  6. package/lib/ecommerce/sections/cart/cart.component.d.ts +1 -0
  7. package/lib/ecommerce/sections/featured-category/featured-category.component.d.ts +1 -1
  8. package/lib/ecommerce/sections/featured-category/featured-collection.component.d.ts +1 -1
  9. package/lib/ecommerce/sections/new-collection/new-collection.component.d.ts +1 -1
  10. package/lib/sections/image-grid-hotspot/image-grid-hotspot.component.d.ts +1 -1
  11. package/lib/sections/image-grid-section/image-grid-section.component.d.ts +1 -1
  12. package/package.json +1 -1
  13. package/simpo-component-library-3.6.838.tgz +0 -0
  14. package/simpo-component-library-3.6.836.tgz +0 -0
package/fesm2022/simpo-component-library.mjs CHANGED
@@ -8581,9 +8581,9 @@ class ScheduleVideoCallComponent {
8581
8581
  this.videoCallPayload = {
8582
8582
  businessId: localStorage.getItem('businessId') ?? "",
8583
8583
  mobileNumber: "",
8584
- pincode: "",
8584
+ // pincode: "",
8585
8585
  username: "",
8586
- email: "",
8586
+ // email: "",
8587
8587
  message: ``,
8588
8588
  };
8589
8589
  this.scheduled = false;
@@ -8628,7 +8628,7 @@ class ScheduleVideoCallComponent {
8628
8628
  this.validationErrors = {
8629
8629
  username: false,
8630
8630
  mobileNumber: false,
8631
- pincode: false
8631
+ // pincode: false
8632
8632
  };
8633
8633
  }
8634
8634
  scheduleVideoCall() {
@@ -8649,24 +8649,22 @@ class ScheduleVideoCallComponent {
8649
8649
  this.validationErrors.mobileNumber = true;
8650
8650
  hasErrors = true;
8651
8651
  }
8652
- if (!this.videoCallPayload.pincode) {
8653
- this.validationErrors.pincode = true;
8654
- hasErrors = true;
8655
- }
8656
- else if (this.videoCallPayload.pincode.toString().length !== 6) {
8657
- this.validationErrors.pincode = true;
8658
- hasErrors = true;
8659
- }
8660
- if (!this.videoCallPayload.email?.trim()) {
8661
- this.validationErrors.email = true;
8662
- hasErrors = true;
8663
- }
8664
- else if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(this.videoCallPayload.email)) {
8665
- this.validationErrors.email = true;
8666
- hasErrors = true;
8667
- }
8652
+ // if (!this.videoCallPayload.pincode) {
8653
+ // this.validationErrors.pincode = true;
8654
+ // hasErrors = true;
8655
+ // } else if (this.videoCallPayload.pincode.toString().length !== 6) {
8656
+ // this.validationErrors.pincode = true;
8657
+ // hasErrors = true;
8658
+ // }
8659
+ // if (!this.videoCallPayload.email?.trim()) {
8660
+ // this.validationErrors.email = true;
8661
+ // hasErrors = true;
8662
+ // } else if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(this.videoCallPayload.email)) {
8663
+ // this.validationErrors.email = true;
8664
+ // hasErrors = true;
8665
+ // }
8668
8666
  if (hasErrors) {
8669
- if (!this.videoCallPayload.username?.trim() || !this.videoCallPayload.mobileNumber || !this.videoCallPayload.pincode) {
8667
+ if (!this.videoCallPayload.username?.trim() || !this.videoCallPayload.mobileNumber) {
8670
8668
  this.messageService.add({
8671
8669
  severity: 'warn',
8672
8670
  summary: 'Video Call Schedule',
@@ -8681,27 +8679,31 @@ class ScheduleVideoCallComponent {
8681
8679
  detail: 'Please enter a valid 10-digit mobile number',
8682
8680
  key: 'Video Call Schedule'
8683
8681
  });
8684
- }
8685
- else if (this.videoCallPayload.pincode.toString().length !== 6) {
8686
- this.messageService.add({
8687
- severity: 'warn',
8688
- summary: 'Video Call Schedule',
8689
- detail: 'Please enter a valid 6-digit pincode',
8690
- key: 'Video Call Schedule'
8691
- });
8692
- }
8693
- else if (!this.videoCallPayload.email?.trim() || !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(this.videoCallPayload.email)) {
8694
- this.messageService.add({
8695
- severity: 'warn',
8696
- summary: 'Video Call Schedule',
8697
- detail: 'Please enter a valid email address',
8698
- key: 'Video Call Schedule'
8699
- });
8682
+ // } else if (this.videoCallPayload.pincode.toString().length !== 6) {
8683
+ // this.messageService.add({
8684
+ // severity: 'warn',
8685
+ // summary: 'Video Call Schedule',
8686
+ // detail: 'Please enter a valid 6-digit pincode',
8687
+ // key: 'Video Call Schedule'
8688
+ // });
8689
+ // }
8690
+ // else if (!this.videoCallPayload.email?.trim() || !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(this.videoCallPayload.email)) {
8691
+ // this.messageService.add({
8692
+ // severity: 'warn',
8693
+ // summary: 'Video Call Schedule',
8694
+ // detail: 'Please enter a valid email address',
8695
+ // key: 'Video Call Schedule'
8696
+ // });
8697
+ // }
8700
8698
  }
8701
8699
  return;
8702
8700
  }
8701
+ let prdNames = "";
8702
+ for (let i = 0; i < this.selectedProducts.length; i++) {
8703
+ prdNames += this.selectedProducts[i].itemName + ", ";
8704
+ }
8703
8705
  this.isSubmitting = true;
8704
- this.videoCallPayload.message = this.videoCallPayload.message + `Hi, I've just scheduled a video call with you for this product ${this.selectedProducts}. It's important and I'd appreciate your time — looking forward to connecting as soon as possible in ${this.selectedLang == 'Others' ? this.otherLanguage : this.selectedLang} language`;
8706
+ this.videoCallPayload.message = this.videoCallPayload.message + `Hi, I've just scheduled a video call with you for this product ${prdNames}. It's important and I'd appreciate your time — looking forward to connecting as soon as possible in ${this.selectedLang == 'Others' ? this.otherLanguage : this.selectedLang} language`;
8705
8707
  this.restService.postVideoCallDetails(this.videoCallPayload).subscribe((res) => {
8706
8708
  this.messageService.add({
8707
8709
  severity: 'success',
@@ -8731,11 +8733,11 @@ class ScheduleVideoCallComponent {
8731
8733
  }
8732
8734
  }
8733
8735
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ScheduleVideoCallComponent, deps: [{ token: i1$1.MatDialogRef }, { token: i1$1.MatDialog }, { token: i6.MessageService }, { token: RestService }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
8734
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ScheduleVideoCallComponent, isStandalone: true, selector: "simpo-schedule-video-call", providers: [MessageService], ngImport: i0, template: "<section class=\"main-section\">\r\n <p-toast key=\"Video Call Schedule\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\" class=\"bottom-right\" />\r\n <div class=\"header\">\r\n <div class=\"header-text\">See it Live on Video Call</div>\r\n <mat-icon (click)=\"goBack()\">close</mat-icon>\r\n </div>\r\n <div class=\"content\">\r\n <div class=\"selection-header\">\r\n <h2 class=\"selection-title\">Choose Designs for Live Video Call</h2>\r\n <span class=\"selection-counter\">{{selectedProducts.length}}/{{responseData?.orderItems?.length ?\r\n responseData.orderItems.length : 0}}</span>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"product-card col-md-6 col-12\" *ngFor=\"let data of orderedItems; let i = index\">\r\n <img [src]=\"data?.imgUrl\" alt=\"product_img\">\r\n <input type=\"checkbox\" [checked]=\"data.selected\" (click)=\"selectedItems(data)\">\r\n <div class=\"product-price\">\u20B9{{data?.discountedPrice ? data?.discountedPrice : 'N/A'}}</div>\r\n <div class=\"product-name\">{{data?.itemName ? data?.itemName : 'N/A'}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"footer\">\r\n <button (click)=\"openScheduleCall(dialogBox)\">Schedule video call</button>\r\n </div>\r\n <ng-template #dialogBox>\r\n <div class=\"modal-content\">\r\n <div class=\"schedule-header w-100 d-flex align-items-center justify-content-end p-2\">\r\n <mat-icon (click)=\"closeDialog()\"\r\n class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n </div>\r\n <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n <div class=\"modal-body h-100 p-0\">\r\n <div class=\"row h-100 w-100 mt-3 video-call-container\">\r\n <div class=\"col-6\" *ngIf=\"!isMobile\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/897651c1751980487170Vdo Call.gif\" alt=\"\"\r\n class=\"w-100\">\r\n </div>\r\n <div class=\"col-6 position-relative h-100 call-details width-100\">\r\n <!-- Name Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\r\n <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\r\n (input)=\"onInputChange('username')\">\r\n </div>\r\n\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\r\n <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\r\n (input)=\"onInputChange('email')\">\r\n </div>\r\n\r\n <!-- Mobile Number Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\r\n <div class=\"sub-text-call\">IN +91</div>\r\n <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\r\n (input)=\"onInputChange('mobileNumber')\" (keydown.arrowUp)=\"$event.preventDefault()\"\r\n (keydown.arrowDown)=\"$event.preventDefault()\" (wheel)=\"$event.preventDefault()\">\r\n </div>\r\n\r\n\r\n <!-- Pincode Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\r\n <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\r\n <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n </div>\r\n <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\r\n (input)=\"onInputChange('pincode')\">\r\n </div>\r\n <div class=\"language my-3\">\r\n <div class=\"mini-text mb-2\">Language Preference</div>\r\n <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\r\n <ng-container *ngFor=\"let lang of languages\">\r\n <div class=\"lang px-2 py-1 rounded cursor-pointer\"\r\n [style.background]=\"lang == selectedLang ? responseData.data?.styles?.background?.accentColor : ''\"\r\n (click)=\"selectedLang = lang\" [simpoColor]=\"responseData.data?.styles?.background?.accentColor\">\r\n {{lang}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"selectedLang == 'Others'\">\r\n <div class=\"input-field my-3\">\r\n <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\r\n </div>\r\n </ng-container>\r\n <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\"\r\n (click)=\"scheduleVideoCall()\" [disabled]=\"isSubmitting\">\r\n <ng-container *ngIf=\"isSubmitting\">\r\n <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\r\n <span class=\"visually-hidden\">Loading...</span>\r\n </div>\r\n SCHEDULING...\r\n </ng-container>\r\n <ng-container *ngIf=\"!isSubmitting && !scheduled\">\r\n <mat-icon>video_call</mat-icon>&nbsp;\r\n SCHEDULE A VIDEO CALL\r\n </ng-container>\r\n <ng-container *ngIf=\"scheduled\">\r\n <mat-icon>check_circle</mat-icon>&nbsp;\r\n SCHEDULED SUCCESSFULLY\r\n </ng-container>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}.main-section{width:30vw;position:relative;height:100%}@media screen and (max-width:475px){.main-section{width:100vw!important}}.header{display:flex;justify-content:space-between;padding:0 15px;height:45px;align-items:center;border-bottom:1px solid #a8aaab}.content{height:calc(100vh - 90px);overflow:scroll;padding:15px}.footer{position:absolute;bottom:0;width:100%;height:45px;align-items:center;display:flex;padding:0 25px}.footer button{background:linear-gradient(90deg,#8c6,#26b324);border:none;font-size:1rem!important;color:#fff;padding-top:7px;padding-bottom:7px;border-radius:5px;font-weight:600}.selection-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.selection-title{font-size:16px;color:#495057;font-weight:400}.selection-counter{font-size:16px;color:#6c757d;font-weight:500}.product-card{position:relative}.product-card img{width:100%;height:29vh}.product-card input{position:absolute;top:10px;right:20px}.product-price{font-size:16px;font-weight:600;color:#000;margin-bottom:4px;margin-top:10px}.product-original-price{font-size:12px;color:#6c757d;text-decoration:line-through;margin-left:8px}.product-name{font-size:14px;color:#6c757d;line-height:1.3}.row{row-gap:15px}.header-text{font-size:1rem;font-weight:700}.modal-content{height:100%;border:none;border-radius:0!important}.schedule-header{border-radius:18px 18px 0 0}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9}.video-call-container{margin:0!important}.call-details{padding:3%!important}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:20px;height:20px;border:2px solid #ccc;border-radius:4px;outline:none;cursor:pointer;position:relative;background-color:#fff;transition:all .3s ease}input[type=checkbox]:checked{background-color:#007bff;border-color:#007bff}input[type=checkbox]:checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:14px;font-weight:700}input[type=checkbox]:hover{border-color:#007bff;box-shadow:0 0 5px #007bff4d}.error-border{border:2px solid red!important}@media screen and (max-width:475px){.width-100{width:100%!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.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: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i8$4.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
8736
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ScheduleVideoCallComponent, isStandalone: true, selector: "simpo-schedule-video-call", providers: [MessageService], ngImport: i0, template: "<section class=\"main-section\">\r\n <p-toast key=\"Video Call Schedule\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\" class=\"bottom-right\" />\r\n <div class=\"header\">\r\n <div class=\"header-text\">See it Live on Video Call</div>\r\n <mat-icon (click)=\"goBack()\">close</mat-icon>\r\n </div>\r\n <div class=\"content\">\r\n <div class=\"selection-header\">\r\n <h2 class=\"selection-title\">Choose Designs for Live Video Call</h2>\r\n <span class=\"selection-counter\">{{selectedProducts.length}}/{{responseData?.orderItems?.length ?\r\n responseData.orderItems.length : 0}}</span>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"product-card col-md-6 col-12\" *ngFor=\"let data of orderedItems; let i = index\">\r\n <img [src]=\"data?.imgUrl\" alt=\"product_img\">\r\n <input type=\"checkbox\" [checked]=\"data.selected\" (click)=\"selectedItems(data)\">\r\n <div class=\"product-price\">\u20B9{{data?.discountedPrice ? data?.discountedPrice : 'N/A'}}</div>\r\n <div class=\"product-name\">{{data?.itemName ? data?.itemName : 'N/A'}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"footer\">\r\n <button (click)=\"openScheduleCall(dialogBox)\">Schedule video call</button>\r\n </div>\r\n <ng-template #dialogBox>\r\n <div class=\"modal-content\">\r\n <div class=\"schedule-header w-100 d-flex align-items-center justify-content-end p-2\">\r\n <mat-icon (click)=\"closeDialog()\"\r\n class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n </div>\r\n <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n <div class=\"modal-body h-100 p-0\">\r\n <div class=\"row h-100 w-100 mt-3 video-call-container\">\r\n <div class=\"col-6\" *ngIf=\"!isMobile\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/897651c1751980487170Vdo Call.gif\" alt=\"\"\r\n class=\"w-100\">\r\n </div>\r\n <div class=\"col-6 position-relative h-100 call-details width-100\">\r\n <!-- Name Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\r\n <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\r\n (input)=\"onInputChange('username')\">\r\n </div>\r\n\r\n <!-- <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\r\n <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\r\n (input)=\"onInputChange('email')\">\r\n </div> -->\r\n\r\n <!-- Mobile Number Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\r\n <div class=\"sub-text-call\">IN +91</div>\r\n <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\r\n (input)=\"onInputChange('mobileNumber')\" (keydown.arrowUp)=\"$event.preventDefault()\"\r\n (keydown.arrowDown)=\"$event.preventDefault()\" (wheel)=\"$event.preventDefault()\">\r\n </div>\r\n\r\n\r\n <!-- Pincode Input with Validation -->\r\n <!-- <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\r\n <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\r\n <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n </div>\r\n <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\r\n (input)=\"onInputChange('pincode')\">\r\n </div> -->\r\n <div class=\"language my-3\">\r\n <div class=\"mini-text mb-2\">Language Preference</div>\r\n <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\r\n <ng-container *ngFor=\"let lang of languages\">\r\n <div class=\"lang px-2 py-1 rounded cursor-pointer\"\r\n [style.background]=\"lang == selectedLang ? responseData.data?.styles?.background?.accentColor : ''\"\r\n (click)=\"selectedLang = lang\" [simpoColor]=\"responseData.data?.styles?.background?.accentColor\">\r\n {{lang}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"selectedLang == 'Others'\">\r\n <div class=\"input-field my-3\">\r\n <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\r\n </div>\r\n </ng-container>\r\n <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\"\r\n (click)=\"scheduleVideoCall()\" [disabled]=\"isSubmitting\">\r\n <ng-container *ngIf=\"isSubmitting\">\r\n <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\r\n <span class=\"visually-hidden\">Loading...</span>\r\n </div>\r\n SCHEDULING...\r\n </ng-container>\r\n <ng-container *ngIf=\"!isSubmitting && !scheduled\">\r\n <mat-icon>video_call</mat-icon>&nbsp;\r\n SCHEDULE A VIDEO CALL\r\n </ng-container>\r\n <ng-container *ngIf=\"scheduled\">\r\n <mat-icon>check_circle</mat-icon>&nbsp;\r\n SCHEDULED SUCCESSFULLY\r\n </ng-container>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}.main-section{width:30vw;position:relative;height:100%}@media screen and (max-width:475px){.main-section{width:100vw!important}}.header{display:flex;justify-content:space-between;padding:0 15px;height:45px;align-items:center;border-bottom:1px solid #a8aaab}.content{height:calc(100vh - 90px);overflow:scroll;padding:15px}.footer{position:absolute;bottom:0;width:100%;height:45px;align-items:center;display:flex;padding:0 25px}.footer button{background:linear-gradient(90deg,#8c6,#26b324);border:none;font-size:1rem!important;color:#fff;padding-top:7px;padding-bottom:7px;border-radius:5px;font-weight:600}.selection-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.selection-title{font-size:16px;color:#495057;font-weight:400}.selection-counter{font-size:16px;color:#6c757d;font-weight:500}.product-card{position:relative}.product-card img{width:100%;height:29vh}.product-card input{position:absolute;top:10px;right:20px}.product-price{font-size:16px;font-weight:600;color:#000;margin-bottom:4px;margin-top:10px}.product-original-price{font-size:12px;color:#6c757d;text-decoration:line-through;margin-left:8px}.product-name{font-size:14px;color:#6c757d;line-height:1.3}.row{row-gap:15px}.header-text{font-size:1rem;font-weight:700}.modal-content{height:100%;border:none;border-radius:0!important}.schedule-header{border-radius:18px 18px 0 0}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9}.video-call-container{margin:0!important}.call-details{padding:3%!important}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:20px;height:20px;border:2px solid #ccc;border-radius:4px;outline:none;cursor:pointer;position:relative;background-color:#fff;transition:all .3s ease}input[type=checkbox]:checked{background-color:#007bff;border-color:#007bff}input[type=checkbox]:checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:14px;font-weight:700}input[type=checkbox]:hover{border-color:#007bff;box-shadow:0 0 5px #007bff4d}.error-border{border:2px solid red!important}@media screen and (max-width:475px){.width-100{width:100%!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.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: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i8$4.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
8735
8737
  }
8736
8738
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ScheduleVideoCallComponent, decorators: [{
8737
8739
  type: Component,
8738
- args: [{ selector: 'simpo-schedule-video-call', standalone: true, imports: [CommonModule, MatIconModule, FormsModule, ColorDirective, ToastModule], providers: [MessageService], template: "<section class=\"main-section\">\r\n <p-toast key=\"Video Call Schedule\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\" class=\"bottom-right\" />\r\n <div class=\"header\">\r\n <div class=\"header-text\">See it Live on Video Call</div>\r\n <mat-icon (click)=\"goBack()\">close</mat-icon>\r\n </div>\r\n <div class=\"content\">\r\n <div class=\"selection-header\">\r\n <h2 class=\"selection-title\">Choose Designs for Live Video Call</h2>\r\n <span class=\"selection-counter\">{{selectedProducts.length}}/{{responseData?.orderItems?.length ?\r\n responseData.orderItems.length : 0}}</span>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"product-card col-md-6 col-12\" *ngFor=\"let data of orderedItems; let i = index\">\r\n <img [src]=\"data?.imgUrl\" alt=\"product_img\">\r\n <input type=\"checkbox\" [checked]=\"data.selected\" (click)=\"selectedItems(data)\">\r\n <div class=\"product-price\">\u20B9{{data?.discountedPrice ? data?.discountedPrice : 'N/A'}}</div>\r\n <div class=\"product-name\">{{data?.itemName ? data?.itemName : 'N/A'}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"footer\">\r\n <button (click)=\"openScheduleCall(dialogBox)\">Schedule video call</button>\r\n </div>\r\n <ng-template #dialogBox>\r\n <div class=\"modal-content\">\r\n <div class=\"schedule-header w-100 d-flex align-items-center justify-content-end p-2\">\r\n <mat-icon (click)=\"closeDialog()\"\r\n class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n </div>\r\n <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n <div class=\"modal-body h-100 p-0\">\r\n <div class=\"row h-100 w-100 mt-3 video-call-container\">\r\n <div class=\"col-6\" *ngIf=\"!isMobile\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/897651c1751980487170Vdo Call.gif\" alt=\"\"\r\n class=\"w-100\">\r\n </div>\r\n <div class=\"col-6 position-relative h-100 call-details width-100\">\r\n <!-- Name Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\r\n <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\r\n (input)=\"onInputChange('username')\">\r\n </div>\r\n\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\r\n <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\r\n (input)=\"onInputChange('email')\">\r\n </div>\r\n\r\n <!-- Mobile Number Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\r\n <div class=\"sub-text-call\">IN +91</div>\r\n <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\r\n (input)=\"onInputChange('mobileNumber')\" (keydown.arrowUp)=\"$event.preventDefault()\"\r\n (keydown.arrowDown)=\"$event.preventDefault()\" (wheel)=\"$event.preventDefault()\">\r\n </div>\r\n\r\n\r\n <!-- Pincode Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\r\n <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\r\n <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n </div>\r\n <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\r\n (input)=\"onInputChange('pincode')\">\r\n </div>\r\n <div class=\"language my-3\">\r\n <div class=\"mini-text mb-2\">Language Preference</div>\r\n <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\r\n <ng-container *ngFor=\"let lang of languages\">\r\n <div class=\"lang px-2 py-1 rounded cursor-pointer\"\r\n [style.background]=\"lang == selectedLang ? responseData.data?.styles?.background?.accentColor : ''\"\r\n (click)=\"selectedLang = lang\" [simpoColor]=\"responseData.data?.styles?.background?.accentColor\">\r\n {{lang}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"selectedLang == 'Others'\">\r\n <div class=\"input-field my-3\">\r\n <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\r\n </div>\r\n </ng-container>\r\n <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\"\r\n (click)=\"scheduleVideoCall()\" [disabled]=\"isSubmitting\">\r\n <ng-container *ngIf=\"isSubmitting\">\r\n <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\r\n <span class=\"visually-hidden\">Loading...</span>\r\n </div>\r\n SCHEDULING...\r\n </ng-container>\r\n <ng-container *ngIf=\"!isSubmitting && !scheduled\">\r\n <mat-icon>video_call</mat-icon>&nbsp;\r\n SCHEDULE A VIDEO CALL\r\n </ng-container>\r\n <ng-container *ngIf=\"scheduled\">\r\n <mat-icon>check_circle</mat-icon>&nbsp;\r\n SCHEDULED SUCCESSFULLY\r\n </ng-container>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}.main-section{width:30vw;position:relative;height:100%}@media screen and (max-width:475px){.main-section{width:100vw!important}}.header{display:flex;justify-content:space-between;padding:0 15px;height:45px;align-items:center;border-bottom:1px solid #a8aaab}.content{height:calc(100vh - 90px);overflow:scroll;padding:15px}.footer{position:absolute;bottom:0;width:100%;height:45px;align-items:center;display:flex;padding:0 25px}.footer button{background:linear-gradient(90deg,#8c6,#26b324);border:none;font-size:1rem!important;color:#fff;padding-top:7px;padding-bottom:7px;border-radius:5px;font-weight:600}.selection-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.selection-title{font-size:16px;color:#495057;font-weight:400}.selection-counter{font-size:16px;color:#6c757d;font-weight:500}.product-card{position:relative}.product-card img{width:100%;height:29vh}.product-card input{position:absolute;top:10px;right:20px}.product-price{font-size:16px;font-weight:600;color:#000;margin-bottom:4px;margin-top:10px}.product-original-price{font-size:12px;color:#6c757d;text-decoration:line-through;margin-left:8px}.product-name{font-size:14px;color:#6c757d;line-height:1.3}.row{row-gap:15px}.header-text{font-size:1rem;font-weight:700}.modal-content{height:100%;border:none;border-radius:0!important}.schedule-header{border-radius:18px 18px 0 0}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9}.video-call-container{margin:0!important}.call-details{padding:3%!important}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:20px;height:20px;border:2px solid #ccc;border-radius:4px;outline:none;cursor:pointer;position:relative;background-color:#fff;transition:all .3s ease}input[type=checkbox]:checked{background-color:#007bff;border-color:#007bff}input[type=checkbox]:checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:14px;font-weight:700}input[type=checkbox]:hover{border-color:#007bff;box-shadow:0 0 5px #007bff4d}.error-border{border:2px solid red!important}@media screen and (max-width:475px){.width-100{width:100%!important}}\n"] }]
8740
+ args: [{ selector: 'simpo-schedule-video-call', standalone: true, imports: [CommonModule, MatIconModule, FormsModule, ColorDirective, ToastModule], providers: [MessageService], template: "<section class=\"main-section\">\r\n <p-toast key=\"Video Call Schedule\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\" class=\"bottom-right\" />\r\n <div class=\"header\">\r\n <div class=\"header-text\">See it Live on Video Call</div>\r\n <mat-icon (click)=\"goBack()\">close</mat-icon>\r\n </div>\r\n <div class=\"content\">\r\n <div class=\"selection-header\">\r\n <h2 class=\"selection-title\">Choose Designs for Live Video Call</h2>\r\n <span class=\"selection-counter\">{{selectedProducts.length}}/{{responseData?.orderItems?.length ?\r\n responseData.orderItems.length : 0}}</span>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"product-card col-md-6 col-12\" *ngFor=\"let data of orderedItems; let i = index\">\r\n <img [src]=\"data?.imgUrl\" alt=\"product_img\">\r\n <input type=\"checkbox\" [checked]=\"data.selected\" (click)=\"selectedItems(data)\">\r\n <div class=\"product-price\">\u20B9{{data?.discountedPrice ? data?.discountedPrice : 'N/A'}}</div>\r\n <div class=\"product-name\">{{data?.itemName ? data?.itemName : 'N/A'}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"footer\">\r\n <button (click)=\"openScheduleCall(dialogBox)\">Schedule video call</button>\r\n </div>\r\n <ng-template #dialogBox>\r\n <div class=\"modal-content\">\r\n <div class=\"schedule-header w-100 d-flex align-items-center justify-content-end p-2\">\r\n <mat-icon (click)=\"closeDialog()\"\r\n class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n </div>\r\n <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n <div class=\"modal-body h-100 p-0\">\r\n <div class=\"row h-100 w-100 mt-3 video-call-container\">\r\n <div class=\"col-6\" *ngIf=\"!isMobile\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/897651c1751980487170Vdo Call.gif\" alt=\"\"\r\n class=\"w-100\">\r\n </div>\r\n <div class=\"col-6 position-relative h-100 call-details width-100\">\r\n <!-- Name Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\r\n <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\r\n (input)=\"onInputChange('username')\">\r\n </div>\r\n\r\n <!-- <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\r\n <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\r\n (input)=\"onInputChange('email')\">\r\n </div> -->\r\n\r\n <!-- Mobile Number Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\r\n <div class=\"sub-text-call\">IN +91</div>\r\n <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\r\n (input)=\"onInputChange('mobileNumber')\" (keydown.arrowUp)=\"$event.preventDefault()\"\r\n (keydown.arrowDown)=\"$event.preventDefault()\" (wheel)=\"$event.preventDefault()\">\r\n </div>\r\n\r\n\r\n <!-- Pincode Input with Validation -->\r\n <!-- <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\r\n <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\r\n <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n </div>\r\n <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\r\n (input)=\"onInputChange('pincode')\">\r\n </div> -->\r\n <div class=\"language my-3\">\r\n <div class=\"mini-text mb-2\">Language Preference</div>\r\n <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\r\n <ng-container *ngFor=\"let lang of languages\">\r\n <div class=\"lang px-2 py-1 rounded cursor-pointer\"\r\n [style.background]=\"lang == selectedLang ? responseData.data?.styles?.background?.accentColor : ''\"\r\n (click)=\"selectedLang = lang\" [simpoColor]=\"responseData.data?.styles?.background?.accentColor\">\r\n {{lang}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"selectedLang == 'Others'\">\r\n <div class=\"input-field my-3\">\r\n <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\r\n </div>\r\n </ng-container>\r\n <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\"\r\n (click)=\"scheduleVideoCall()\" [disabled]=\"isSubmitting\">\r\n <ng-container *ngIf=\"isSubmitting\">\r\n <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\r\n <span class=\"visually-hidden\">Loading...</span>\r\n </div>\r\n SCHEDULING...\r\n </ng-container>\r\n <ng-container *ngIf=\"!isSubmitting && !scheduled\">\r\n <mat-icon>video_call</mat-icon>&nbsp;\r\n SCHEDULE A VIDEO CALL\r\n </ng-container>\r\n <ng-container *ngIf=\"scheduled\">\r\n <mat-icon>check_circle</mat-icon>&nbsp;\r\n SCHEDULED SUCCESSFULLY\r\n </ng-container>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}.main-section{width:30vw;position:relative;height:100%}@media screen and (max-width:475px){.main-section{width:100vw!important}}.header{display:flex;justify-content:space-between;padding:0 15px;height:45px;align-items:center;border-bottom:1px solid #a8aaab}.content{height:calc(100vh - 90px);overflow:scroll;padding:15px}.footer{position:absolute;bottom:0;width:100%;height:45px;align-items:center;display:flex;padding:0 25px}.footer button{background:linear-gradient(90deg,#8c6,#26b324);border:none;font-size:1rem!important;color:#fff;padding-top:7px;padding-bottom:7px;border-radius:5px;font-weight:600}.selection-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.selection-title{font-size:16px;color:#495057;font-weight:400}.selection-counter{font-size:16px;color:#6c757d;font-weight:500}.product-card{position:relative}.product-card img{width:100%;height:29vh}.product-card input{position:absolute;top:10px;right:20px}.product-price{font-size:16px;font-weight:600;color:#000;margin-bottom:4px;margin-top:10px}.product-original-price{font-size:12px;color:#6c757d;text-decoration:line-through;margin-left:8px}.product-name{font-size:14px;color:#6c757d;line-height:1.3}.row{row-gap:15px}.header-text{font-size:1rem;font-weight:700}.modal-content{height:100%;border:none;border-radius:0!important}.schedule-header{border-radius:18px 18px 0 0}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9}.video-call-container{margin:0!important}.call-details{padding:3%!important}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:20px;height:20px;border:2px solid #ccc;border-radius:4px;outline:none;cursor:pointer;position:relative;background-color:#fff;transition:all .3s ease}input[type=checkbox]:checked{background-color:#007bff;border-color:#007bff}input[type=checkbox]:checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:14px;font-weight:700}input[type=checkbox]:hover{border-color:#007bff;box-shadow:0 0 5px #007bff4d}.error-border{border:2px solid red!important}@media screen and (max-width:475px){.width-100{width:100%!important}}\n"] }]
8739
8741
  }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: i1$1.MatDialog }, { type: i6.MessageService }, { type: RestService }, { type: undefined, decorators: [{
8740
8742
  type: Inject,
8741
8743
  args: [MAT_DIALOG_DATA]
@@ -9047,6 +9049,7 @@ class CartComponent extends BaseSection {
9047
9049
  this.schemeList = [];
9048
9050
  this.placeOrderLoader = false;
9049
9051
  this.couponDialogRef = null;
9052
+ this.isCouponDialogOpening = false;
9050
9053
  this.redemptionType = "COUPONS";
9051
9054
  this.redemptionCouponType = "REWARDS";
9052
9055
  this.couponValueType = '';
@@ -9372,6 +9375,12 @@ class CartComponent extends BaseSection {
9372
9375
  this.cartInfo.billdetails.totalTax = 0;
9373
9376
  this.cartInfo.billdetails.totalTaxAfterDiscount = response?.data?.billdetails?.totalTaxAfterDiscount ?? 0;
9374
9377
  this.cartInfo.billdetails.discountAmount = response?.data?.billdetails?.discountAmount ?? 0;
9378
+ if (this.cartInfo.billdetails.discountAmount <= 0) {
9379
+ this.responseData.billdetails.couponCode = null;
9380
+ this.responseData.billdetails.couponId = null;
9381
+ localStorage.removeItem("couponCode");
9382
+ localStorage.removeItem("couponId");
9383
+ }
9375
9384
  this.cartInfo.billdetails.totalNetValue = 0;
9376
9385
  this.cartInfo.totalAmount = 0;
9377
9386
  this.cartInfo.billdetails.deliveryCharges = 0;
@@ -9406,6 +9415,12 @@ class CartComponent extends BaseSection {
9406
9415
  this.cartInfo.totalAmount = 0;
9407
9416
  this.cartInfo.billdetails.deliveryCharges = 0;
9408
9417
  this.cartInfo.billdetails.discountAmount = response?.data?.billdetails?.discountAmount ?? 0;
9418
+ if (this.cartInfo.billdetails.discountAmount <= 0) {
9419
+ this.responseData.billdetails.couponCode = null;
9420
+ this.responseData.billdetails.couponId = null;
9421
+ localStorage.removeItem("couponCode");
9422
+ localStorage.removeItem("couponId");
9423
+ }
9409
9424
  response?.data?.orderedItems.forEach((item) => {
9410
9425
  this.cartInfo.billdetails.totalNetValue += (item.discountedPrice * (item.quantity ?? 1));
9411
9426
  this.cartInfo.billdetails.totalTax += (item.quantity * (item.itemTax ?? 0));
@@ -9566,6 +9581,10 @@ class CartComponent extends BaseSection {
9566
9581
  this.dialogRef.close();
9567
9582
  }
9568
9583
  openDialog(container) {
9584
+ if (this.couponDialogRef || this.isCouponDialogOpening) {
9585
+ return;
9586
+ }
9587
+ this.isCouponDialogOpening = true;
9569
9588
  if (this.cartInfo?.billdetails?.couponId)
9570
9589
  return;
9571
9590
  if (!this.cartInfo.cartId && !(localStorage.getItem("cartId") == "undefined" || localStorage.getItem("cartId") == "null"))
@@ -9588,10 +9607,16 @@ class CartComponent extends BaseSection {
9588
9607
  validFrom: coupon.validFrom
9589
9608
  };
9590
9609
  });
9591
- if (this.storageService.getUser())
9610
+ if (this.storageService.getUser()) {
9592
9611
  this.couponDialogRef = this.matDialog.open(container, { panelClass: 'sidepanel-class' });
9612
+ this.couponDialogRef.afterClosed().subscribe(() => {
9613
+ this.couponDialogRef = null;
9614
+ this.isCouponDialogOpening = false;
9615
+ });
9616
+ }
9593
9617
  else {
9594
9618
  this.messageService.add({ severity: 'info', summary: 'Login', detail: 'Please login with mobile number to apply coupon' });
9619
+ this.isCouponDialogOpening = false;
9595
9620
  }
9596
9621
  });
9597
9622
  }
@@ -9945,7 +9970,7 @@ class CartComponent extends BaseSection {
9945
9970
  });
9946
9971
  }
9947
9972
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CartComponent, deps: [{ token: EventsService }, { token: CartService }, { token: i2$2.Router }, { token: RestService }, { token: i1$1.MatDialog }, { token: StorageServiceService }, { token: i6.MessageService }, { token: i8$3.MatBottomSheet }, { token: i2$2.ActivatedRoute }, { token: MAT_DIALOG_DATA, optional: true }, { token: i1$1.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
9948
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CartComponent, isStandalone: true, selector: "simpo-cart", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, providers: [MessageService], viewQueries: [{ propertyName: "d2", first: true, predicate: ["d2"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n <ng-container *ngIf=\"data\">\r\n <section [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\"\r\n [attr.class]=\"isMobile ? 'py-5 position-relative' : 'position-relative'\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\"\r\n [ngClass]=\"!responseData?.orderedItems?.length ? 'no-items' : ''\">\r\n <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\"\r\n [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\"\r\n *ngIf=\"responseData?.orderedItems?.length && currentTab === 'ADDRESS'\">\r\n <span class=\"timeline\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline isActive\">Address</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline\" style=\"cursor: auto;\">Payment</span>\r\n </div>\r\n <div class=\"cart-tab-parent w-100\" *ngIf=\"currentTab == 'BAG' && ecomConfigs?.appointmentBookingEnabled\">\r\n <!-- && ecomConfigs?.appointmentBookingEnabled\" -->\r\n <div class=\"cart-tabs\" [id]=\"data?.id\">\r\n <div class=\"selected-cart-tab\" [ngClass]=\"{'selected-cart-tab': cartType==='SHOPPING'}\"\r\n (click)=\"cartType='SHOPPING'\">Shopping Cart ({{responseData?.orderedItems?.length ?? 0}})</div>\r\n <div [ngClass]=\"{'selected-cart-tab': cartType==='TRIAL'}\" (click)=\"cartType='TRIAL'\">Trial Cart\r\n ({{trialCartItem?.length ?? 0}})</div>\r\n </div>\r\n </div>\r\n <div class=\"cart-parent\" [spacingHorizontal]=\"stylesLayout\" *ngIf=\"currentTab === 'BAG'\" [id]=\"data?.id\"\r\n [simpoAnimation]=\"styles?.animation\">\r\n <ng-container>\r\n <ng-container *ngIf=\"cartType === 'SHOPPING'\">\r\n <ng-container\r\n *ngTemplateOutlet=\"(responseData?.orderedItems?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"cartType === 'TRIAL'\">\r\n <ng-container *ngTemplateOutlet=\"(trialCartItem?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex checkoutPage\"\r\n *ngIf=\"(responseData?.orderedItems?.length || 0) > 0 && currentTab === 'ADDRESS'\">\r\n <ng-container *ngTemplateOutlet=\"CHECKOUTPAGE\">\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [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\r\n </section>\r\n </ng-container>\r\n <ng-container *ngIf=\"!data\">\r\n <section class=\"cart-window\">\r\n <div class=\"heading-large lh-2 mb-3 header-sec\">\r\n <div class=\"d-flex align-items-center\">\r\n <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\r\n <span>Your Cart</span>\r\n </div>\r\n <div class=\"saving\"></div>\r\n </div>\r\n <div class=\"offers\">\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\r\n <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\r\n <span>Avail Offers / Coupons</span>\r\n </div>\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n <div class=\"small-items\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems\">\r\n <div class=\"small-item\">\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"small-product-img\"\r\n [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n (click)=\"goToProductDetails(item)\">\r\n </div>\r\n <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\r\n <div class=\"small-item-quantity\">\r\n <span class=\"cursor\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\">+</span>\r\n </div>\r\n <div class=\"small-item-price\">\r\n <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.sellingPrice) | number: '1.0-2'}}\r\n </div>\r\n <!-- <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"fotter-sec\">\r\n <div class=\"delivery-add d-flex\">\r\n <mat-icon>home</mat-icon>\r\n <div class=\"address\">Tetsting</div>\r\n </div>\r\n <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span\r\n style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span>\r\n {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\r\n </div>\r\n </section>\r\n </ng-container>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n<ng-template #CouponList>\r\n <section class=\"coupons-listing-section\">\r\n <div class=\"coupon-heading\">\r\n <div class=\"back-btn\" (click)=\"closeDialogRef()\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"header-text\">Apply Coupon</div>\r\n </div>\r\n <!-- <div class=\"coupon-search-sec\">\r\n <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\r\n <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\r\n </div> -->\r\n <div class=\"coupon-listing\">\r\n <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\r\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\r\n <div class=\"coupon-details\"\r\n [ngStyle]=\"{'background-color': !couponDetails.applicable ? '#FFF2F4' : '#EDFFFA'}\"\r\n *ngIf=\"couponDetails?.status\">\r\n <div class=\"details__coupon-heading\">\r\n <div class=\"coupon-brief\">\r\n <div class=\"coupon-brief__left-sec\">\r\n <div class=\"coupon-name\" [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\r\n {{ couponDetails.couponCode | uppercase }}</div>\r\n <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\r\n </div>\r\n <div class=\"coupon-brief__right-sec\">\r\n <div class=\"apply-offer-btn\" [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\r\n [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : ''}\"\r\n (click)=\"applyCoupon(couponDetails)\">Apply</div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\r\n <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\r\n <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\r\n </div> -->\r\n </div>\r\n <ng-container>\r\n <!-- *ngIf=\"couponDetails.status\" -->\r\n <div class=\"details-divider\"></div>\r\n <ul class=\"details__coupon-terms\">\r\n <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\r\n </ul>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #showEmptyScreen>\r\n <div class=\"empty-screen-container\">\r\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n <div class=\"empty-screen__primary-text\">No Coupon Available</div>\r\n <div class=\"empty-screen__secondary-text\">\r\n Looks like there are no coupons at the moment\r\n </div>\r\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\r\n </div>\r\n </ng-template>\r\n </div>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #RedemptionVouchers>\r\n <section class=\"vouchers-listing-section d-flex flex-column\">\r\n <div class=\"coupon-heading d-flex align-items-center gap-2 p-3 fs-18 fw-600 border-bottom\">\r\n <div class=\"back-btn cursor-pointer d-flex align-items-center\" (click)=\"closeDialogRef()\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"header-text\">Coupons & Vouchers</div>\r\n </div>\r\n\r\n <!-- <div class=\"d-flex align-items-center tab-container justify-content-between gap-2 p-3\">\r\n <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'COUPONS'}\"\r\n (click)=\"redemptionType = 'COUPONS'\">\r\n Coupons\r\n </div>\r\n <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'VOUCHERS'}\"\r\n (click)=\"redemptionType = 'VOUCHERS'\">\r\n Vouchers\r\n </div>\r\n </div> -->\r\n\r\n <div class=\"coupon-listing d-flex flex-column gap-3 pt-3\" *ngIf=\"redemptionType === 'COUPONS'\">\r\n <div class=\"d-flex align-items-center tab-container gap-3\">\r\n <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\r\n [ngClass]=\"{'active-coupon': redemptionCouponType === 'REWARDS'}\" (click)=\"redemptionCouponType = 'REWARDS'\">\r\n Rewards\r\n </div>\r\n <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\r\n [ngClass]=\"{'active-coupon': redemptionCouponType === 'DISCOUNTS'}\"\r\n (click)=\"redemptionCouponType = 'DISCOUNTS'\">\r\n Discounts\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"redemptionCouponType === 'REWARDS'\">\r\n <ng-container *ngIf=\"(listRedemptionCoupons?.vouchers?.length > 0) ; else showEmptyScreen\">\r\n <ng-container *ngFor=\"let voucher of listRedemptionCoupons?.vouchers; let idx = index\">\r\n <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\r\n\r\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\r\n <div class=\"coupon-brief__left-sec\">\r\n <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\r\n <div class=\"coupon-desc fs-12 text-secondary\">\r\n Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%'\r\n }}\r\n off on your payment\r\n </div>\r\n </div>\r\n <div class=\"coupon-brief__right-sec\">\r\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">\r\n Apply</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\r\n <div class=\"code-label\">Code</div>\r\n <div class=\"code-value\">{{ voucher.voucherCode }}</div>\r\n </div>\r\n\r\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\r\n <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\r\n <span class=\"separator text-secondary\">|</span>\r\n <span class=\"validity\">\r\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\r\n Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\r\n </span>\r\n <span class=\"separator text-secondary\" *ngIf=\"voucher.maxRedeemableAmount\">|</span>\r\n <span class=\"min-order\" *ngIf=\"voucher.maxRedeemableAmount\">Max Redeemable Amount: \u20B9{{\r\n voucher.maxRedeemableAmount | number }}</span>\r\n </div>\r\n\r\n <!-- <div class=\"terms-link\">View terms & conditions</div> -->\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"redemptionCouponType === 'DISCOUNTS'\">\r\n <ng-container *ngIf=\"(couponList.length > 0); else showEmptyDiscounts\">\r\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\r\n <div class=\"voucher-details\" *ngIf=\"couponDetails?.status\">\r\n\r\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\r\n <div class=\"coupon-brief__left-sec\">\r\n <div class=\"coupon-name fs-16 fw-600 mb-1\"\r\n [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\r\n {{ couponDetails.couponCode | uppercase }}\r\n </div>\r\n <div class=\"coupon-desc fs-12 text-secondary\">\r\n {{ couponDetails.discountDescription | titlecase }}\r\n </div>\r\n </div>\r\n <div class=\"coupon-brief__right-sec\">\r\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\"\r\n [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\r\n [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : 'not-allowed'}\"\r\n (click)=\"applyCoupon(couponDetails)\">\r\n Apply\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\r\n <div class=\"code-label\">Code</div>\r\n <div class=\"code-value\">{{ couponDetails.couponCode | uppercase }}</div>\r\n </div>\r\n\r\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\r\n <span class=\"validity\">\r\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\r\n {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}\r\n </span>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #showEmptyDiscounts>\r\n <div class=\"empty-screen-container\">\r\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n <div class=\"empty-screen__primary-text\">No Discount Coupons Available</div>\r\n <div class=\"empty-screen__secondary-text\">\r\n Looks like there are no discount coupons at the moment\r\n </div>\r\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #showEmptyScreen>\r\n <div class=\"empty-screen-container\">\r\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n <div class=\"empty-screen__primary-text\">No Coupons Available</div>\r\n <div class=\"empty-screen__secondary-text\">Looks like there are no coupons</div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n <div class=\"coupon-listing d-flex flex-column gap-3\" *ngIf=\"redemptionType === 'VOUCHERS'\">\r\n <ng-container *ngIf=\"listRedemptionVouchers?.vouchers?.length > 0; else showEmptyScreen\">\r\n <ng-container *ngFor=\"let voucher of listRedemptionVouchers?.vouchers; let idx = index\">\r\n <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\r\n\r\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\r\n <div class=\"coupon-brief__left-sec\">\r\n <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\r\n <div class=\"coupon-desc fs-12 text-secondary\">\r\n Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%' }}\r\n off on your payment\r\n </div>\r\n </div>\r\n <div class=\"coupon-brief__right-sec\">\r\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">Apply\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\r\n <div class=\"code-label\">Code</div>\r\n <div class=\"code-value\">{{ voucher.voucherCode }}</div>\r\n </div>\r\n\r\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\r\n <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\r\n <span class=\"separator text-secondary\">|</span>\r\n <span class=\"validity\">\r\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\r\n Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\r\n </span>\r\n </div>\r\n\r\n <!-- <div class=\"terms-link\">View terms & conditions</div> -->\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #showEmptyScreen>\r\n <div class=\"empty-screen-container\">\r\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n <div class=\"empty-screen__primary-text\">No Vouchers Available</div>\r\n <div class=\"empty-screen__secondary-text\">Looks like there are no vouchers</div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #CARTPAGE>\r\n <div class=\"container\">\r\n <div class=\"main-content\">\r\n <div class=\"promo-banner mb-3\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && ecomConfigs?.videoCallEnabled\">\r\n <!-- && ecomConfigs?.videoCallEnabled\" -->\r\n <div class=\"promo-text\">\r\n <h3>See It Before You Buy It</h3>\r\n <p>Experience our designs in detail via video call</p>\r\n </div>\r\n <button class=\"see-live-btn\" (click)=\"scheduleVideoCall(responseData?.orderedItems)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-video\">\r\n <path d=\"m22 8-6 4 6 4V8Z\" />\r\n <rect width=\"14\" height=\"12\" x=\"2\" y=\"6\" rx=\"2\" ry=\"2\" />\r\n </svg>\r\n SEE IT LIVE\r\n </button>\r\n </div>\r\n\r\n <div class=\"cart-items\">\r\n <div class=\"cart-header\">\r\n <h2>Your Cart</h2>\r\n </div>\r\n <ng-container\r\n *ngTemplateOutlet=\"CARTITEM;context:{data: cartType === 'SHOPPING' ? responseData?.orderedItems : trialCartItem}\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"sidebar\">\r\n <div class=\"reedem-section d-flex flex-column align-items-center\" *ngIf=\"cartType != 'TRIAL' && getUrl()\">\r\n <div class=\"justify-content-between d-flex align-items-center w-100 redeem-section-text\">Redeem Section Amount\r\n <div class=\"toogle-switch\">\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" role=\"switch\" id=\"flexSwitchCheckChecked\"\r\n [checked]=\"selectMatureScheme\" (change)=\"onToggleChange()\">\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"select_matured_text w-100 text-start cursor-pointer\"\r\n *ngIf=\"selectMatureScheme && !selectedRedemption\" (click)=\"selectScheme()\">\r\n Select Matured Scheme\r\n </div> -->\r\n <!-- <div class=\"select_matured_text d-flex flex-column gap-2 w-100 text-start cursor-pointer\"\r\n *ngIf=\"selectedRedemption\">\r\n Selected Scheme\r\n <div class=\"d-flex w-100 justify-content-between align-items-center group_invest\">Group Investment\r\n scheme-5000/M <span>Change</span></div>\r\n <div class=\"d-flex justify-content-between align-items-center w-100 redeem_amount\">Redeemable Amount\r\n <span>\u20B9{{selectedRedmpationData.selectedAmount}}</span>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div class=\"scheme-section\" *ngIf=\"selectMatureScheme\">\r\n <ng-container *ngTemplateOutlet=\"SCHEME_REDEMPTION\"></ng-container>\r\n </div>\r\n <div class=\"coupon-section\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && !referEarnExist\"\r\n (click)=\"openDialog(CouponList)\">\r\n <div class=\"coupon-left\">\r\n <div class=\"coupon-icon\"><mat-icon>percent</mat-icon></div>\r\n <span class=\"coupon-text\" *ngIf=\"!responseData.billdetails?.couponId\">Apply\r\n Coupon</span>\r\n <span class=\"coupon-text\" *ngIf=\"responseData.billdetails?.couponId\">Coupon\r\n Applied</span>\r\n </div>\r\n <svg *ngIf=\"!responseData.billdetails?.couponId\" xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\"\r\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" class=\"chevron-icon\">\r\n <path d=\"m9 18 6-6-6-6\" />\r\n </svg>\r\n <span *ngIf=\"responseData.billdetails?.couponId\"\r\n (click)=\"removeCoupon($event)\"><mat-icon>close</mat-icon></span>\r\n </div>\r\n\r\n <div class=\"plan-details-container p-3 rounded-4 bg-white text-dark voucher-details\"\r\n *ngIf=\"referEarnExist && this?.redemptionPoints?.availablePoints > 0\">\r\n <div class=\"fs-14 fw-500\">\r\n Rewards Available\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-start border-bottom pb-2\">\r\n <div class=\"avb_pts mt-2 mb-2\">\r\n <span class=\"fs-16 fw-500 total_points text-secondary\">\r\n <span class=\" fs-18 fw-600 text-dark\">{{(this?.redemptionPoints?.availablePoints || 0).toFixed(2)}}</span>\r\n pts\r\n </span>\r\n <div class=\"total_value fs-12 text-secondary\">\r\n = max \u20B9{{(this?.redemptionPoints?.pointsConvertedRupees || 0).toFixed(2)}} discount\r\n </div>\r\n </div>\r\n <div class=\"wallte_icon\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/777779c1775200561187wallet_(1).png\" alt=\"\">\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center mt-3\">\r\n <div class=\"redemable_text\">\r\n <div class=\"title_text\">\r\n <div class=\"fs-14 fw-500\">\r\n Redeem Points\r\n </div>\r\n <div class=\"fs-13 fs-400\">\r\n Use your points for discount\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"toggle_btn\">\r\n <label class=\"switch\">\r\n <input type=\"checkbox\" id=\"toggleSwitch\" [checked]=\"isPointsRedeeming\"\r\n (click)=\"onPointsRedeemingChange($event)\" />\r\n <span class=\"slider\"></span>\r\n </label>\r\n </div>\r\n </div>\r\n <div class=\"mt-3 success_selected w-100 applied-coupon-card\" *ngIf=\"isPointsRedeeming\">\r\n <div class=\"d-flex align-items-start gap-2\">\r\n <div class=\"success_icon\">\r\n <mat-icon class=\"d-flex justify-content-center align-items-center text-success\">check_circle</mat-icon>\r\n </div>\r\n <div class=\"success_text\">\r\n <div class=\"fs-13 fw-500\">\r\n You're saving \u20B9\r\n {{totalSavingAmt || 0}}\r\n </div>\r\n <div class=\"fs-12 fs-400 text-success\">\r\n {{totalSavingPoints}} points remaining after redemption\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Existing coupon row (keep as-is) -->\r\n <div class=\"coupon-section d-flex flex-column voucher-details\" [id]=\"data?.id\"\r\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist\">\r\n <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n <div class=\"coupon-left\">\r\n Apply Coupon\r\n </div>\r\n <div (click)=\"addRedemptionCoupon(RedemptionVouchers)\">View All</div>\r\n </div>\r\n\r\n <!-- Applied Coupon Success Banner -->\r\n <div class=\"applied-coupon-card w-100 mt-3 d-flex align-items-center justify-content-between\"\r\n *ngIf=\"selectedVoucherId\">\r\n <div class=\"applied-coupon-left d-flex align-items-center gap-3\">\r\n <mat-icon class=\"success-check\">check_circle</mat-icon>\r\n <div class=\"applied-coupon-info\">\r\n <div class=\"applied-coupon-code\">Coupon {{ selectedVoucherCode }} applied!</div>\r\n <div class=\"applied-coupon-saving\">You're saving\r\n <span *ngIf=\"this.couponValueType === 'AMOUNT'\">\u20B9 {{selectedVoucherAmount || 0}}</span>\r\n <span *ngIf=\"this.couponValueType === 'PERCENTAGE'\"> {{selectedVoucherPercentage || 0}}%</span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <div class=\"remove-coupon-btn fs-14 fw-500 text-secondary cursor-pointer\"\r\n (click)=\"removeRedemptionCoupon($event)\">Remove</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"delivery-section\" *ngIf=\"getUrl()\">\r\n <div class=\"delivery-header\">\r\n <mat-icon>gps_fixed</mat-icon>\r\n <span *ngIf=\"cartType === 'SHOPPING'\">Delivering to</span>\r\n <span *ngIf=\"cartType === 'TRIAL'\">Trial Location at</span>\r\n <span class=\"pincode\">{{pincode}}</span>\r\n <!-- <a class=\"change-link\">Change Pincode</a> -->\r\n </div>\r\n </div>\r\n\r\n <div class=\"summary-section\">\r\n <div class=\"summary-title\">Summary</div>\r\n\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span class=\"summary-label\">Subtotal</span>\r\n <span class=\"summary-value\">\u20B9{{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</span>\r\n </div>\r\n\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && referEarnExist && isPointsRedeeming\">\r\n <span class=\"summary-label\">Points Redeemed</span>\r\n <span class=\"summary-value\">- \u20B9{{ totalSavingAmt || 0 }}</span>\r\n </div>\r\n\r\n <div class=\"summary-row\"\r\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'AMOUNT' && appliedVoucher)\">\r\n <span class=\"summary-label\">Voucher Applied</span>\r\n <span class=\"summary-value\">- \u20B9{{ selectedVoucherAmount || 0 }}</span>\r\n </div>\r\n\r\n <div class=\"summary-row\"\r\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'PERCENTAGE' && appliedVoucher)\">\r\n <span class=\"summary-label\">Voucher Applied</span>\r\n <span class=\"summary-value\">- \u20B9{{ percentageReduced || 0 }}</span>\r\n </div>\r\n\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.discountAmount\">\r\n <span class=\"summary-label\">Discount Amount</span>\r\n <span class=\"summary-value\">\r\n {{('\u20B9' + (responseData?.billdetails?.discountAmount | number: '1.0-2')) }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span class=\"summary-label\">Shipping</span>\r\n <span class=\"summary-value\"\r\n [ngClass]=\"{'savings': !responseData?.billdetails?.deliveryCharges || responseData.billdetails.deliveryCharges <= 0}\">\r\n {{ (responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0) ? ('\u20B9' +\r\n (responseData.billdetails.deliveryCharges | number: '1.0-2')) : 'Free' }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span class=\"summary-label\">Estimated Tax</span>\r\n <span class=\"summary-value\">\u20B9{{((!responseData.billdetails?.couponId ?\r\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\r\n number: '1.0-2'}}</span>\r\n </div>\r\n\r\n <div class=\"summary-row total-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span class=\"summary-label\">Total</span>\r\n <!-- <span class=\"summary-value\">\u20B9{{ responseData?.totalAmount | number: '1.0-2' }}</span> -->\r\n <span class=\"total-value\" *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{ responseData?.totalAmount |\r\n number: '1.0-2' }}</span>\r\n\r\n <span class=\"total-value\" *ngIf=\"isPointsRedeeming\">\u20B9{{ (responseData?.totalAmount - (totalSavingAmt || 0)) |\r\n number: '1.0-2' }}</span>\r\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\r\n (selectedVoucherAmount || 0)) | number:\r\n '1.0-2'}}</span>\r\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\r\n (percentageReduced || 0)) | number:\r\n '1.0-2' }}</span>\r\n </div>\r\n\r\n <!-- Trial Cart Summary -->\r\n <ng-container *ngIf=\"cartType === 'TRIAL'\">\r\n <div class=\"summary-row\">\r\n <span class=\"summary-label\">Free Trial</span>\r\n <span class=\"summary-value\">\u20B90</span>\r\n </div>\r\n <div class=\"summary-row\">\r\n <span class=\"summary-label\">Service Charge</span>\r\n <span class=\"summary-value savings\">Free</span>\r\n </div>\r\n <div class=\"summary-divider\"></div>\r\n <div class=\"summary-row total-row\">\r\n <span class=\"summary-label\">Total</span>\r\n <span class=\"summary-value\">\u20B90</span>\r\n </div>\r\n <!-- <span class=\"total-value\" *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{ responseData?.totalAmount |\r\n number: '1.0-2' }}</span>\r\n\r\n <span class=\"total-value\" *ngIf=\"isPointsRedeeming\">\u20B9{{ (responseData?.totalAmount - (totalSavingAmt || 0)) |\r\n number: '1.0-2' }}</span>\r\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\r\n (selectedVoucherAmount || 0)) | number:\r\n '1.0-2'}}</span>\r\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\r\n (percentageReduced || 0)) | number:\r\n '1.0-2' }}</span> -->\r\n </ng-container>\r\n </div>\r\n <button class=\"place-order-btn\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\r\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n *ngIf=\"cartType === 'SHOPPING'\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\r\n Shopping'}}</button>\r\n <button class=\"place-order-btn mt-0\" (click)=\"edit ? '' : proceedToCheckout()\" simpoButtonDirective\r\n *ngIf=\"cartType === 'SHOPPING'\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout\r\n Cart'}}</button>\r\n <button class=\"place-order-btn mt-0\" simpoButtonDirective *ngIf=\"cartType === 'TRIAL'\"\r\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\" (click)=\"bookAppointment()\">BOOK\r\n APPOINTMENT</button>\r\n\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #CHECKOUTPAGE>\r\n <div class=\"checkout-left-panel\">\r\n <div class=\"checkout-main-content\">\r\n <!-- <div class=\"delivery-options\">\r\n <div class=\"delivery-option active\">\r\n <div class=\"delivery-icon\"></div>\r\n HOME DELIVERY\r\n </div>\r\n <div class=\"delivery-option\">\r\n <div class=\"delivery-icon\"></div>\r\n STORE PICK-UP\r\n </div>\r\n </div> -->\r\n\r\n <div class=\"section-title\">Shipping Address</div>\r\n\r\n <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\r\n <div class=\"address-info\">\r\n <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\r\n <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\r\n {{defaultAddress?.stateName}}</div>\r\n <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"addLinks h-100\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\r\n <mat-icon>add</mat-icon>\r\n </div>\r\n\r\n <button class=\"change-address-btn\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">CHANGE OR ADD ADDRESS</button>\r\n\r\n <button class=\"btn w-100 mt-1 payment-btn\" (click)=\"proceedToPayment()\" simpoButtonDirective\r\n *ngIf=\"defaultAddress && !placeOrderLoader\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\">\r\n Place Order\r\n </button>\r\n <button class=\"btn w-100 mt-1 payment-btn\" simpoButtonDirective *ngIf=\"defaultAddress && placeOrderLoader\"\r\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\">\r\n Loading...\r\n </button>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"checkout-right-panel\">\r\n <div class=\"order-summary\">\r\n <div class=\"summary-title\">Order Summary</div>\r\n\r\n <div class=\"checkout-product\">\r\n <div class=\"product-item\" *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n <img [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-image\"\r\n alt=\"\">\r\n <div class=\"product-details\">\r\n <div class=\"product-name\">{{item.itemName}}</div>\r\n <div class=\"product-quantity\">Quantity: {{item.quantity}}</div>\r\n <div class=\"product-price\">\u20B9{{(item.sellingPrice * item.quantity) | number: '1.0-2'}}</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"price-breakdown\">\r\n <div class=\"price-row\">\r\n <span>Total Price</span>\r\n <span>\u20B9{{(responseData?.billdetails?.totalNetValue\r\n ?? 0) | number: '1.0-2'}}</span>\r\n </div>\r\n <div class=\"price-row\">\r\n <span>Total Tax</span>\r\n <span>\u20B9{{((!responseData.billdetails?.couponId ?\r\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\r\n number:\r\n '1.0-2'}}</span>\r\n </div>\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && cartInfo?.billdetails?.orraSchemeRedeemedAmount\">\r\n <span class=\"summary-label\">Redeem Amount</span>\r\n <span class=\"summary-value\">\u20B9{{(cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\r\n '1.0-2'}}</span>\r\n </div>\r\n\r\n <div class=\"price-row discount\"\r\n *ngIf=\"responseData?.billdetails?.discountAmount && subIndustryName != 'Ecommerce Jewellery'\">\r\n <span>Coupon Discount</span>\r\n <span>- \u20B9{{responseData?.billdetails?.discountAmount\r\n | number: '1.0-2'}}</span>\r\n </div>\r\n <div class=\"price-row\"\r\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n <span>Delivery Charge</span>\r\n <span>{{responseData.billdetails.deliveryCharges\r\n |\r\n number: '1.0-2'}}</span>\r\n </div>\r\n <div class=\"price-row total\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span>TOTAL AMOUNT</span>\r\n <span *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{(responseData?.totalAmount ?? 0) | number:\r\n '1.0-2'}}</span>\r\n <span *ngIf=\"isPointsRedeeming\">\u20B9{{(responseData?.totalAmount - (totalSavingAmt || 0)) | number:\r\n '1.0-2'}}</span>\r\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\r\n (selectedVoucherAmount || 0)) | number:\r\n '1.0-2'}}</span>\r\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\r\n (responseData?.totalAmount * (selectedVoucherPercentage / 100) || 0)) | number:\r\n '1.0-2' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #CARTITEM let-products=\"data\">\r\n <div class=\"cart-item\" *ngFor=\"let item of products\" [style.color]=\"fontColor\">\r\n <div class=\"item-left\">\r\n <div class=\"item-image\">\r\n <img class=\"item-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n (click)=\"goToProductDetails(item)\" style=\"cursor: pointer;\">\r\n </div>\r\n <div class=\"item-details\">\r\n <h3 class=\"item-title\">{{item.itemName}}</h3>\r\n <div class=\"item-subtitle\" *ngIf=\"item.itemVariant\">\r\n <span *ngFor=\"let varient of getKeys(item.itemVariant.properties); let last = last\">\r\n {{ item.itemVariant.properties[varient] | titlecase }}<span *ngIf=\"!last\">, </span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"item-right\">\r\n <div class=\"quantity-control\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <button class=\"qty-btn px-2\" (click)=\"decreaseQty(item)\" [disabled]=\"item.quantity === 1\">\r\n <mat-icon>remove</mat-icon>\r\n </button>\r\n <span class=\"qty-value px-3\">{{item.quantity}}</span>\r\n <button class=\"qty-btn px-2\" (click)=\"increaseQty(item)\">\r\n <mat-icon>add</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"item-price\">\r\n \u20B9{{item.sellingPrice | number: '1.0-2'}}\r\n </div>\r\n\r\n <div class=\"delete-btn-circle\" (click)=\"removeItem(item)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trash-2\">\r\n <path d=\"M3 6h18\" />\r\n <path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\" />\r\n <path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\" />\r\n <line x1=\"10\" x2=\"10\" y1=\"11\" y2=\"17\" />\r\n <line x1=\"14\" x2=\"14\" y1=\"11\" y2=\"17\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #EMPTYITEM>\r\n <section class=\"empty-cart w-100 d-flex align-items-center justify-content-center\">\r\n <div class=\"empty-cart-container d-flex flex-column\">\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"data?.content?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <div class=\"cart-text content-side\">\r\n <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"d-flex justify-content-center\"\r\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <button class=\"place-order-btn mx-auto w-fit\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\r\n [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\r\n Shopping'}}</button>\r\n </div>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #SCHEME_REDEMPTION>\r\n <div class=\"modal-body\">\r\n <div class=\"scheme-option\" *ngFor=\"let scheme of schemeList\" (click)=\"redeemScheme(scheme, false)\"\r\n [style.borderColor]=\"cartInfo.billdetails.orraSchemeCode ? styles?.background?.color : ''\">\r\n <label for=\"individual\" class=\"scheme-card\">\r\n <div class=\"scheme-info d-flex gap-1\">\r\n <div class=\"form-check-radio\">\r\n <input class=\"form-check-input-radio\" type=\"radio\" name=\"flexRadioDefault\" id=\"flexRadioDefault2\">\r\n </div>\r\n <div class=\"right-side\">\r\n <div class=\"scheme-name\">\r\n <div class=\"scheme-title\">Individual Investment Scheme</div>\r\n <div class=\"scheme-monthly\">\u20B98000/M</div>\r\n </div>\r\n <div class=\"scheme-details\">\r\n <span class=\"scheme-id\">GPP Id: {{scheme.GPPId}}</span>\r\n <!-- <span class=\"scheme-maturity\">Maturity Date: 12 April 2024</span> -->\r\n </div>\r\n <div class=\"scheme-amount\">\u20B9{{scheme.amount}}</div>\r\n </div>\r\n </div>\r\n </label>\r\n </div>\r\n <div class=\"reedem_error d-flex justify-content-center align-items-center\" *ngIf=\"showReedemError\">\r\n Please add more \u20B9{{vaildAmount}} to reedem this scheme\r\n </div>\r\n </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.reedem-section{padding:10px 15px;border-radius:15px;background:#f6f3f9;box-shadow:#b2b2ca80 2px 2px 6px;font-weight:700;font-size:13px}.redeem-section-text{font-size:.9rem;font-weight:700}.form-check-input:checked{background-color:#28a745!important;border-color:#28a745!important}.form-check-input:focus{border-color:#28a745!important;outline:0;box-shadow:none!important}.close-btn{background:none;border:none;font-size:24px;color:#6b7280;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.close-btn:hover{color:#374151}.select_matured_text{font-size:.8rem!important;margin-top:10px;color:#05aacf}.position-relative{position:relative}.cart-parent{display:flex;margin-top:15px}.left-panel{width:65%;padding-right:5rem;border-right:1px solid #E9E9E9}.timeline{cursor:pointer}.cart-items{background:#fff;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.cart-header{padding:16px 24px;border-bottom:1px solid #e2e8f0;background:#f8fafc}.cart-header h2{margin:0;font-size:18px;font-weight:500;color:#0f172a}.cart-item{display:flex!important;align-items:center;justify-content:space-between;border-bottom:1px solid #e2e8f0;gap:20px;padding:0 8px;transition:background .2s}.cart-item:hover{background:#fbfcfe}.item-left{display:flex;align-items:center;flex:1}.item-right{display:flex;align-items:center;padding:15px;gap:32px}.item-image img{width:64px;height:64px;border-radius:12px;object-fit:cover;border:1px solid #f1f5f9}.item-details{display:flex;flex-direction:column;gap:4px}.item-title{margin:0;font-size:15px;font-weight:600;color:#0f172a;line-height:1.4}.item-subtitle{font-size:13px;color:#64748b;font-weight:400}.quantity-control{display:flex;align-items:center;border:1.5px solid #e2e8f0;border-radius:7px;overflow:hidden;height:38px;background:#fff;width:fit-content}.qty-btn{width:38px;height:100%;border:none;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#475569;transition:all .2s ease}.qty-btn:hover{background:#f8fafc;color:#0f172a}.qty-btn mat-icon{font-size:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center}.qty-value{width:32px;height:100%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;color:#0f172a;border-left:1.5px solid #e2e8f0;border-right:1.5px solid #e2e8f0}.item-price{font-size:18px;font-weight:700;color:#0f172a;min-width:60px;text-align:right;letter-spacing:-.01em}.delete-btn-circle{width:36px;height:36px;border-radius:50%;border:1px solid #fee2e2;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#ef4444;transition:all .2s ease}.delete-btn-circle:hover{background:#fef2f2;border-color:#fecaca;transform:scale(1.05);color:#dc2626}.delete-btn-circle svg{width:18px;height:18px}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%;padding-left:5rem}.my-bag{font-size:16px;font-weight:600;color:#000;margin-left:8px}.my-bag span{color:#939393}.coupons{display:flex;justify-content:space-between;padding:10px;border-radius:4px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px;margin-top:10px;cursor:pointer}.coupon-list-section{padding:15px;width:400px;z-index:10000001!important}.coupon-list-section .search{padding:8px;border:1px solid lightgray;border-radius:20px;display:flex;justify-content:space-between}.coupon-list-section input{border:none;outline:none;width:90%}.coupon-list-section .coupon-list{height:60vh;width:100%}.item-parent{margin:10px 0;min-height:120px}.lh-23{line-height:23px;margin-left:10px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0;cursor:pointer}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer;font-size:18px}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important;height:calc(100vh - 170px)}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;width:100%;text-align:center}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff;cursor:pointer}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.see-live-btn{white-space:nowrap!important}.left-panel{width:100%;padding-right:0rem}.right-panel{width:100%;z-index:1000;padding-left:0rem}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap;display:none}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}.empty-cart-container{height:calc(100vh - 130px)}.coupons-listing-section{width:100vw!important}.checkoutPage{flex-direction:column}.checkout-left-panel,.checkout-right-panel{width:100%!important}}.mobile-fixed{color:#fff}.coupons-listing-section{height:100vh;padding-top:0;position:relative;width:390px;z-index:100;background:#d3d3d354}.coupons-listing-section .coupon-heading{display:flex;align-items:center;background-color:#fff;padding:15px 20px;width:100%;box-sizing:border-box}.coupons-listing-section .coupon-heading img{height:15px;width:15px;position:relative;top:2px;cursor:pointer}.coupons-listing-section .coupon-heading .header-text{font-size:16px;color:#000;font-weight:600;margin-left:15px;position:relative;top:-3px;right:15px;cursor:pointer}.coupons-listing-section .coupon-search-sec{width:90%;box-sizing:border-box;margin:10px auto;border:1px solid lightgray;padding:10px;border-radius:10px;background-color:#fff;display:flex;font-size:16px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec input{border:none;outline:none;background-color:transparent;width:95%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-search-sec input:focus{font-size:14px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec .back-btn{position:relative;top:3px;cursor:pointer}.coupons-listing-section .coupon-search-sec .apply-btn-search{font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing{height:72%;overflow-y:auto;width:90%;margin:20px auto}.coupons-listing-section .coupon-listing .coupon-details{padding:15px;margin-bottom:15px;background-color:#edfffa;border-radius:10px;border:1px solid lightgray}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading{display:flex;flex-direction:column;gap:25px}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief{display:flex;justify-content:space-between;width:100%}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-name{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-desc{padding:5px 0;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .show-details-btn{cursor:pointer}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec{display:flex;justify-content:flex-end}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec .apply-offer-btn{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-toggle-details-btn{text-align:left;text-decoration:underline;width:100%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details-divider{border-top:2px solid lightgray;opacity:.3;margin:15px 0}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-terms{font-size:14px;color:#000;font-weight:400}.empty-screen-container{height:100%;width:85%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-screen-container .empty-screen__primary-text{font-size:22px;color:#000;font-weight:400}.empty-screen-container .empty-screen__secondary-text{text-align:center;padding:10px 0;font-size:16px;color:#000;font-weight:400}.empty-screen-container .empty-screen__button{width:90%;background-color:#fff;border-radius:8px;text-align:center;padding:10px;margin:10px auto 0;cursor:pointer;font-size:18px;color:#000;font-weight:400}.box-shadow{box-shadow:#00000029 0 1px 4px}.main-content{border-radius:12px;padding:0 30px 30px;width:100%;overflow:scroll;height:calc(100vh - 150px)}.delivery-options{display:flex;gap:20px;margin-bottom:30px}.delivery-option{padding:12px 24px;border:2px solid #e0e0e0;border-radius:25px;background:#fff;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:500;transition:all .2s}.delivery-option.active{background:#f0e6ff;border-color:#8b5cf6;color:#7c3aed}.delivery-option:hover{border-color:silver}.delivery-icon{width:16px;height:16px;background:#8b5cf6;border-radius:3px}.section-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.shipping-info{border-radius:10px;padding:20px;margin-bottom:20px;border:1px solid rgb(238,232,255);box-shadow:#0000000a 0 4px 8px}.delivery-date{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.delivery-date-text{color:#666;font-weight:500}.change-date-btn{color:#e91e63;background:none;border:none;font-weight:600;cursor:pointer;text-transform:uppercase;font-size:12px;letter-spacing:.5px}.address-info{margin-bottom:15px}.address-name{font-weight:700;margin-bottom:8px;color:#000}.address-details{color:#666;margin-bottom:8px}.mobile-number{font-weight:700;color:#000;font-size:15px}.change-address-btn{font-size:1rem!important;font-weight:700!important;padding:6px;background:#fff;border:1px solid rgb(229,221,255);border-radius:8px;color:#000;cursor:pointer;transition:all .2s;box-shadow:#0000000a 0 4px 8px}.change-address-btn:hover{border-color:#8b5cf6;color:#8b5cf6}.billing-section{margin-top:40px}.billing-options{display:flex;flex-direction:column;gap:15px;margin-top:20px}.billing-option{display:flex;align-items:center;gap:12px;padding:15px;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .2s}.billing-option.active{background:#f0e6ff;border-color:#8b5cf6}.radio-btn{width:20px;height:20px;border:2px solid #e0e0e0;border-radius:50%;position:relative}.billing-option.active .radio-btn{border-color:#8b5cf6}.billing-option.active .radio-btn:after{content:\"\";width:10px;height:10px;background:#8b5cf6;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.order-summary{border-radius:12px;padding:25px;width:75%}.summary-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.product-item{display:flex;gap:15px;margin-bottom:20px;border-bottom:1px solid #f0f0f0;border-radius:7px;background:#fff;padding:15px}.product-item:last-of-type{border-bottom:none;margin-bottom:30px;padding-bottom:0}.product-image{max-width:110px;width:100%;height:100%;border-radius:8px}.product-details{flex:1}.product-name{font-weight:500;margin-bottom:4px;color:#2d3748;font-size:14px}.product-quantity{color:#666;font-size:12px;margin-bottom:8px}.product-price{font-weight:600;color:#2d3748}.delivery-info{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:#8b5cf6}.delivery-icon-small{width:12px;height:12px;background:#8b5cf6;border-radius:2px}.price-breakdown{border-top:1px solid #f0f0f0;padding-top:20px}.price-row{display:flex;justify-content:space-between;margin-bottom:12px;color:#666}.price-row.total{font-weight:600;color:#2d3748;font-size:16px;margin-top:15px;padding-top:15px;border-top:1px solid #f0f0f0}.discount{color:#22c55e!important}@media (max-width: 768px){.container{grid-template-columns:1fr;padding:15px;gap:20px}.main-content,.order-summary{padding:20px;width:100%}.delivery-options{flex-direction:column;gap:10px}}.checkout-left-panel{width:65%;display:flex;justify-content:center}.checkout-right-panel{width:35%;display:flex;justify-content:center;background-color:#f9f9fa}.checkout-product{max-height:50vh;overflow:scroll}.mt-1{margin-top:1rem!important}.payment-btn{box-shadow:#0000000a 0 4px 8px}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px;height:25vh!important;margin-bottom:20px}.addLinks mat-icon{border:1px solid rgb(219,223,225);display:flex;border-radius:100%;align-items:center;justify-content:center;font-size:16px;color:#dbdfe1}.change-pincode{display:flex;gap:10px}.change-pincode mat-icon{font-size:18px;align-items:center;justify-content:center;display:flex}.change-pincode span{font-size:14px}.fs-13{font-size:13px}.fs-12{font-size:12px}.fs-18{font-size:18px}.b-1-b{border-width:0px 1px;border-style:solid;border-color:#000}.container{max-width:unset;padding:24px;display:flex;gap:24px;width:100%!important}.main-content{background:#fff;border-radius:12px;width:70%}.promo-banner{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;border-radius:8px;border:1px solid #e2e8f0}.promo-text h3{font-size:16px!important;font-weight:500;margin-bottom:4px}.promo-text p{font-size:.9rem!important;margin-bottom:0!important;color:#64748b}.see-live-btn{background:#fff;border:1px solid #e2e8f0;font-weight:600;color:#000;padding:8px 16px;border-radius:8px;font-size:12px!important;cursor:pointer;display:flex;align-items:center;gap:8px;width:max-content!important;transition:all .2s ease;box-shadow:0 1px 2px #0000000d}.see-live-btn:hover{background:#f8fafc;border-color:#cbd5e1;transform:translateY(-1px)}.see-live-btn svg{color:#6366f1}.cart-item{display:flex;gap:16px;position:relative}.cart-item:last-child{border-bottom:none}.item-image{width:15%;height:100px;border-radius:8px;object-fit:cover;display:flex;align-items:center;justify-content:center}.item-details{flex:1}.item-title{font-weight:500;margin-bottom:8px}.item-price{display:flex;align-items:center;gap:8px}.current-price{font-size:1rem;font-weight:600}.original-price{font-size:1rem;text-decoration:line-through}.discount{background:#fef3c7;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:500}.item-code{font-size:12px;color:#9ca3af;margin-bottom:8px}.item-options{display:flex;gap:16px;font-size:14px;color:#6b7280;margin-bottom:12px}.delivery-info{font-size:12px;color:#8b5cf6}.pickup-info{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:5px 15px;margin-top:12px;display:flex;align-items:center;cursor:pointer;width:max-content;gap:20px}.pickup-text{font-size:.9rem;color:#374151}.remove-btn{position:absolute;top:16px;right:0;width:20px!important;height:20px;background:#000;color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px!important}.sidebar{display:flex;flex-direction:column;gap:16px;width:32%}.coupon-section{border-radius:8px;padding:10px 15px;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .2s ease}.coupon-section:hover{border-color:#cbd5e1;background-color:#f8fafc}.chevron-icon{color:#94a3b8;transition:transform .2s ease}.coupon-section:hover .chevron-icon{transform:translate(2px);color:#64748b}.scheme-section{border-radius:12px;padding:10px 15px;cursor:pointer}.coupon-left{display:flex;align-items:center;gap:12px}.coupon-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center}.coupon-icon mat-icon{font-size:17px;width:17px!important;height:19px!important}.coupon-text{font-weight:700;font-size:.9rem}.delivery-section{background:#fff;border-radius:12px;padding:10px 15px;box-shadow:#b2b2ca80 2px 2px 6px;background:#f6f3f9}.delivery-header{display:flex;align-items:center;gap:12px;margin-bottom:4px}.delivery-header span{font-size:.9rem;font-weight:700}.delivery-header mat-icon{width:20px;height:20px;font-size:17px;position:relative;top:2px}.delivery-icon{width:20px;height:20px;background:#8b5cf6;border-radius:50%}.pincode{font-weight:600;color:#111827}.change-link{color:#ec4899;font-size:.9rem;text-decoration:none;margin-left:auto}.summary-section{background:#fff;border-radius:8px;padding:20px;border:1px solid #e2e8f0}.summary-title{font-size:16px;font-weight:700;color:#0f172a;margin-bottom:20px;letter-spacing:-.01em}.summary-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.summary-row:last-child{margin-bottom:0}.summary-label{font-size:14px;font-weight:400;color:#64748b}.summary-value{font-size:14px;font-weight:500;color:#0f172a}.summary-divider{height:1px;background:#f1f5f9;margin:16px 0;width:100%}.total-row .summary-label{font-size:16px;font-weight:600;color:#0f172a}.total-row .summary-value{font-size:16px;font-weight:700;color:#0f172a}.total-row{border-top:1px solid #e2e8f0;padding-top:15px;margin-top:15px}.total-label{font-weight:600;font-size:16px}.total-value{font-weight:700;font-size:18px}.place-order-btn{background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;border:none;border-radius:12px;padding:9px 10px;font-size:.9rem!important;font-weight:600;cursor:pointer;margin-top:10px;text-transform:uppercase}.place-order-btn:hover{opacity:.9}.chain-icon,.earring-icon{width:60px;height:60px;filter:sepia(1) hue-rotate(30deg) saturate(2)}.item-img{width:100%;height:100%;object-fit:cover}.mt-0{margin-top:0!important}select{outline:none;border-radius:5px;padding:2px;width:20%;border:none;box-shadow:#9999994d 2px 2px 6px;cursor:pointer}.cart-tab-parent{display:flex;justify-content:center}.cart-tabs{gap:10px;display:flex;justify-content:center;align-items:center;width:max-content;border-radius:8px;border:1px solid #e2e8f0}.cart-tabs div{padding:7px 10px;cursor:pointer;font-size:14px}.selected-cart-tab{margin:6px;background:#f1f5f9;border-radius:5px;color:#000!important;font-weight:500}.checkout-main-content{width:50%;padding:30px;border-radius:12px}@media screen and (max-width: 475px){.main-content{padding:0;height:auto!important}.cart-item{flex-direction:column!important;align-items:flex-start!important;padding:16px 12px!important;gap:16px!important}.item-left{width:100%!important;gap:16px!important;align-items:flex-start!important}.item-image{width:86px!important;height:86px!important;flex-shrink:0!important}.item-right{width:100%!important;justify-content:space-between!important;padding:0!important;gap:12px!important;margin-top:4px!important}.item-price{flex:1!important;text-align:right!important;margin-right:8px!important;font-size:16px!important}.item-title{font-size:14px!important;-webkit-line-clamp:2!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important}.quantity-control{height:34px!important}.qty-btn{width:34px!important}.qty-value{width:28px!important;font-size:13px!important}.no-items{height:86vh;overflow:hidden;margin:0}.checkout-main-content{width:100%}.container{padding:0!important}.pickup-info{display:none}.container{display:flex;flex-direction:column}.promo-banner{gap:10px}select{width:50%}.main-content,.sidebar{width:100%}.vouchers-listing-section{min-width:unset!important;width:100vw!important}.separator{display:none!important}.coupon-meta{display:grid!important;grid-template-columns:1fr 1fr!important}}.group_invest{color:#000;font-size:.8rem}.reedem_error{color:red}.group_invest span{color:#05aacf}.redeem_amount{padding:2%;border-radius:4px;background:#fff;margin-top:2%;color:#000;font-size:.8rem}.redeem_amount span{color:#0dc577}.w-fit{width:fit-content!important}.modal-body{padding-bottom:0;overflow-y:scroll;max-height:300px;padding:0!important}.scheme-option{margin-bottom:16px}.scheme-option input[type=radio]:checked+.scheme-card{border-color:#06b6d4;background:#f0f9ff;position:relative}.scheme-option input[type=radio]:checked+.scheme-card:before{content:\"\";position:absolute;top:20px;left:20px;width:20px;height:20px;border:2px solid #06b6d4;border-radius:50%;background:#fff}.scheme-option input[type=radio]:checked+.scheme-card:after{content:\"\";position:absolute;top:26px;left:26px;width:8px;height:8px;background:#06b6d4;border-radius:50%}.scheme-card{justify-content:space-between;padding:10px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff;width:100%}.scheme-card:hover{border-color:#d1d5db;background:#f9fafb}.form-check-radio{width:10%}.scheme-title{font-size:12px;font-weight:600;color:#111827;margin-bottom:8px}.scheme-details{display:flex;gap:25px;margin-bottom:20px}.scheme-name{display:flex;justify-content:space-between}.scheme-details span{font-size:12px;color:#0000004d}.scheme-monthly{font-size:14px;font-weight:600;color:#111827;min-width:100px;text-align:right}.right-side{width:90%}.scheme-amount{font-weight:700}@media screen and (min-width: 700px){.cart-items{max-height:500px;overflow:scroll}}.add-to-cart-parent{width:max-content;border:1px solid #000000;border-radius:8px}.cursor{cursor:pointer}.cart-text{max-width:600px;margin:0 auto;text-align:center}.cart-text div{word-break:break-word;overflow-wrap:break-word;white-space:normal}.switch{position:relative;display:inline-block;width:45px;height:20px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:34px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:3px;bottom:2px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#4caf50}input:checked+.slider:before{transform:translate(24px)}.vouchers-listing-section{position:relative;width:fit-content;min-width:500px;z-index:100;background:#fff;height:100vh}.vouchers-listing-section .coupon-heading{border-bottom:1px solid #eee}.vouchers-listing-section .coupon-listing{padding:12px 16px;overflow-y:auto;height:calc(97vh - 100px)}.voucher-details{background:#fff;border-radius:12px;padding:14px;box-shadow:0 1px 4px #00000042}.voucher-details .coupon-brief .apply-offer-btn{background:#111;color:#fff;border-radius:10px;padding:6px 16px}.voucher-details .coupon-code-box{border:1.5px dashed #bbb;border-radius:8px;padding:8px 12px;margin-bottom:10px}.voucher-details .coupon-code-box .code-label{font-size:11px;color:#888;margin-bottom:2px}.voucher-details .coupon-code-box .code-row .code-value{font-weight:700;font-size:15px;letter-spacing:1px}.voucher-details .coupon-meta .clock-icon{font-size:14px;height:14px;width:14px;vertical-align:middle}.applied-coupon-card{background:#f0fff8;border-radius:12px;padding:12px 16px}.applied-coupon-card .applied-coupon-left .success-check{color:#22c55e;font-size:22px}.applied-coupon-card .applied-coupon-left .applied-coupon-code{font-weight:700;font-size:14px}.applied-coupon-card .applied-coupon-left .applied-coupon-saving{font-size:13px;color:#097d5f;margin-top:2px}.active-type{background:#111!important;color:#fff!important}.redemption-type{text-align:center;border-radius:10px;padding:6px 16px;background:#d3d3d36b;width:-webkit-fill-available!important}.wallte_icon{background:#000;border-radius:50px;padding:5px 9px 7px}.wallte_icon img{width:18px;height:18px}.fw-600{font-weight:600}.coupon-type{width:fit-content!important;border-radius:26px!important;background:transparent!important;border:1px solid #afafaf;color:#393838;text-align:center;padding:6px 16px}.active-coupon{background:transparent!important;border:2px solid black!important;color:#000!important}.my-close-btn{position:absolute!important;top:10px!important;right:10px!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { 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: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "directive", type:
9973
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CartComponent, isStandalone: true, selector: "simpo-cart", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, providers: [MessageService], viewQueries: [{ propertyName: "d2", first: true, predicate: ["d2"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n <ng-container *ngIf=\"data\">\r\n <section [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\"\r\n [attr.class]=\"isMobile ? 'py-5 position-relative' : 'position-relative'\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\"\r\n [ngClass]=\"!responseData?.orderedItems?.length ? 'no-items' : ''\">\r\n <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\"\r\n [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\"\r\n *ngIf=\"responseData?.orderedItems?.length && currentTab === 'ADDRESS'\">\r\n <span class=\"timeline\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline isActive\">Address</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline\" style=\"cursor: auto;\">Payment</span>\r\n </div>\r\n <div class=\"cart-tab-parent w-100\" *ngIf=\"currentTab == 'BAG' && ecomConfigs?.appointmentBookingEnabled\">\r\n <!-- && ecomConfigs?.appointmentBookingEnabled\" -->\r\n <div class=\"cart-tabs\" [id]=\"data?.id\">\r\n <div class=\"selected-cart-tab\" [ngClass]=\"{'selected-cart-tab': cartType==='SHOPPING'}\"\r\n (click)=\"cartType='SHOPPING'\">Shopping Cart ({{responseData?.orderedItems?.length ?? 0}})</div>\r\n <div [ngClass]=\"{'selected-cart-tab': cartType==='TRIAL'}\" (click)=\"cartType='TRIAL'\">Trial Cart\r\n ({{trialCartItem?.length ?? 0}})</div>\r\n </div>\r\n </div>\r\n <div class=\"cart-parent\" [spacingHorizontal]=\"stylesLayout\" *ngIf=\"currentTab === 'BAG'\" [id]=\"data?.id\"\r\n [simpoAnimation]=\"styles?.animation\">\r\n <ng-container>\r\n <ng-container *ngIf=\"cartType === 'SHOPPING'\">\r\n <ng-container\r\n *ngTemplateOutlet=\"(responseData?.orderedItems?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"cartType === 'TRIAL'\">\r\n <ng-container *ngTemplateOutlet=\"(trialCartItem?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex checkoutPage\"\r\n *ngIf=\"(responseData?.orderedItems?.length || 0) > 0 && currentTab === 'ADDRESS'\">\r\n <ng-container *ngTemplateOutlet=\"CHECKOUTPAGE\">\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [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\r\n </section>\r\n </ng-container>\r\n <ng-container *ngIf=\"!data\">\r\n <section class=\"cart-window\">\r\n <div class=\"heading-large lh-2 mb-3 header-sec\">\r\n <div class=\"d-flex align-items-center\">\r\n <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\r\n <span>Your Cart</span>\r\n </div>\r\n <div class=\"saving\"></div>\r\n </div>\r\n <div class=\"offers\">\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\r\n <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\r\n <span>Avail Offers / Coupons</span>\r\n </div>\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n <div class=\"small-items\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems\">\r\n <div class=\"small-item\">\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"small-product-img\"\r\n [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n (click)=\"goToProductDetails(item)\">\r\n </div>\r\n <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\r\n <div class=\"small-item-quantity\">\r\n <span class=\"cursor\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\">+</span>\r\n </div>\r\n <div class=\"small-item-price\">\r\n <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.sellingPrice) | number: '1.0-2'}}\r\n </div>\r\n <!-- <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"fotter-sec\">\r\n <div class=\"delivery-add d-flex\">\r\n <mat-icon>home</mat-icon>\r\n <div class=\"address\">Tetsting</div>\r\n </div>\r\n <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span\r\n style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span>\r\n {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\r\n </div>\r\n </section>\r\n </ng-container>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n<ng-template #CouponList>\r\n <section class=\"coupons-listing-section\">\r\n <div class=\"coupon-heading\">\r\n <div class=\"back-btn\" (click)=\"closeDialogRef()\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"header-text\">Apply Coupon</div>\r\n </div>\r\n <!-- <div class=\"coupon-search-sec\">\r\n <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\r\n <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\r\n </div> -->\r\n <div class=\"coupon-listing\">\r\n <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\r\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\r\n <div class=\"coupon-details\"\r\n [ngStyle]=\"{'background-color': !couponDetails.applicable ? '#FFF2F4' : '#EDFFFA'}\"\r\n *ngIf=\"couponDetails?.status\">\r\n <div class=\"details__coupon-heading\">\r\n <div class=\"coupon-brief\">\r\n <div class=\"coupon-brief__left-sec\">\r\n <div class=\"coupon-name\" [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\r\n {{ couponDetails.couponCode | uppercase }}</div>\r\n <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\r\n </div>\r\n <div class=\"coupon-brief__right-sec\">\r\n <div class=\"apply-offer-btn\" [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\r\n [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : ''}\"\r\n (click)=\"applyCoupon(couponDetails)\">Apply</div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\r\n <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\r\n <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\r\n </div> -->\r\n </div>\r\n <ng-container>\r\n <!-- *ngIf=\"couponDetails.status\" -->\r\n <div class=\"details-divider\"></div>\r\n <ul class=\"details__coupon-terms\">\r\n <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\r\n </ul>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #showEmptyScreen>\r\n <div class=\"empty-screen-container\">\r\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n <div class=\"empty-screen__primary-text\">No Coupon Available</div>\r\n <div class=\"empty-screen__secondary-text\">\r\n Looks like there are no coupons at the moment\r\n </div>\r\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\r\n </div>\r\n </ng-template>\r\n </div>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #RedemptionVouchers>\r\n <section class=\"vouchers-listing-section d-flex flex-column\">\r\n <div class=\"coupon-heading d-flex align-items-center gap-2 p-3 fs-18 fw-600 border-bottom\">\r\n <div class=\"back-btn cursor-pointer d-flex align-items-center\" (click)=\"closeDialogRef()\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"header-text\">Coupons & Vouchers</div>\r\n </div>\r\n\r\n <!-- <div class=\"d-flex align-items-center tab-container justify-content-between gap-2 p-3\">\r\n <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'COUPONS'}\"\r\n (click)=\"redemptionType = 'COUPONS'\">\r\n Coupons\r\n </div>\r\n <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'VOUCHERS'}\"\r\n (click)=\"redemptionType = 'VOUCHERS'\">\r\n Vouchers\r\n </div>\r\n </div> -->\r\n\r\n <div class=\"coupon-listing d-flex flex-column gap-3 pt-3\" *ngIf=\"redemptionType === 'COUPONS'\">\r\n <div class=\"d-flex align-items-center tab-container gap-3\">\r\n <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\r\n [ngClass]=\"{'active-coupon': redemptionCouponType === 'REWARDS'}\" (click)=\"redemptionCouponType = 'REWARDS'\">\r\n Rewards\r\n </div>\r\n <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\r\n [ngClass]=\"{'active-coupon': redemptionCouponType === 'DISCOUNTS'}\"\r\n (click)=\"redemptionCouponType = 'DISCOUNTS'\">\r\n Discounts\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"redemptionCouponType === 'REWARDS'\">\r\n <ng-container *ngIf=\"(listRedemptionCoupons?.vouchers?.length > 0) ; else showEmptyScreen\">\r\n <ng-container *ngFor=\"let voucher of listRedemptionCoupons?.vouchers; let idx = index\">\r\n <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\r\n\r\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\r\n <div class=\"coupon-brief__left-sec\">\r\n <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\r\n <div class=\"coupon-desc fs-12 text-secondary\">\r\n Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%'\r\n }}\r\n off on your payment\r\n </div>\r\n </div>\r\n <div class=\"coupon-brief__right-sec\">\r\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">\r\n Apply</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\r\n <div class=\"code-label\">Code</div>\r\n <div class=\"code-value\">{{ voucher.voucherCode }}</div>\r\n </div>\r\n\r\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\r\n <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\r\n <span class=\"separator text-secondary\">|</span>\r\n <span class=\"validity\">\r\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\r\n Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\r\n </span>\r\n <span class=\"separator text-secondary\" *ngIf=\"voucher.maxRedeemableAmount\">|</span>\r\n <span class=\"min-order\" *ngIf=\"voucher.maxRedeemableAmount\">Max Redeemable Amount: \u20B9{{\r\n voucher.maxRedeemableAmount | number }}</span>\r\n </div>\r\n\r\n <!-- <div class=\"terms-link\">View terms & conditions</div> -->\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"redemptionCouponType === 'DISCOUNTS'\">\r\n <ng-container *ngIf=\"(couponList.length > 0); else showEmptyDiscounts\">\r\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\r\n <div class=\"voucher-details\" *ngIf=\"couponDetails?.status\">\r\n\r\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\r\n <div class=\"coupon-brief__left-sec\">\r\n <div class=\"coupon-name fs-16 fw-600 mb-1\"\r\n [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\r\n {{ couponDetails.couponCode | uppercase }}\r\n </div>\r\n <div class=\"coupon-desc fs-12 text-secondary\">\r\n {{ couponDetails.discountDescription | titlecase }}\r\n </div>\r\n </div>\r\n <div class=\"coupon-brief__right-sec\">\r\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\"\r\n [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\r\n [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : 'not-allowed'}\"\r\n (click)=\"applyCoupon(couponDetails)\">\r\n Apply\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\r\n <div class=\"code-label\">Code</div>\r\n <div class=\"code-value\">{{ couponDetails.couponCode | uppercase }}</div>\r\n </div>\r\n\r\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\r\n <span class=\"validity\">\r\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\r\n {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}\r\n </span>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #showEmptyDiscounts>\r\n <div class=\"empty-screen-container\">\r\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n <div class=\"empty-screen__primary-text\">No Discount Coupons Available</div>\r\n <div class=\"empty-screen__secondary-text\">\r\n Looks like there are no discount coupons at the moment\r\n </div>\r\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #showEmptyScreen>\r\n <div class=\"empty-screen-container\">\r\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n <div class=\"empty-screen__primary-text\">No Coupons Available</div>\r\n <div class=\"empty-screen__secondary-text\">Looks like there are no coupons</div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n <div class=\"coupon-listing d-flex flex-column gap-3\" *ngIf=\"redemptionType === 'VOUCHERS'\">\r\n <ng-container *ngIf=\"listRedemptionVouchers?.vouchers?.length > 0; else showEmptyScreen\">\r\n <ng-container *ngFor=\"let voucher of listRedemptionVouchers?.vouchers; let idx = index\">\r\n <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\r\n\r\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\r\n <div class=\"coupon-brief__left-sec\">\r\n <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\r\n <div class=\"coupon-desc fs-12 text-secondary\">\r\n Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%' }}\r\n off on your payment\r\n </div>\r\n </div>\r\n <div class=\"coupon-brief__right-sec\">\r\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">Apply\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\r\n <div class=\"code-label\">Code</div>\r\n <div class=\"code-value\">{{ voucher.voucherCode }}</div>\r\n </div>\r\n\r\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\r\n <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\r\n <span class=\"separator text-secondary\">|</span>\r\n <span class=\"validity\">\r\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\r\n Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\r\n </span>\r\n </div>\r\n\r\n <!-- <div class=\"terms-link\">View terms & conditions</div> -->\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #showEmptyScreen>\r\n <div class=\"empty-screen-container\">\r\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n <div class=\"empty-screen__primary-text\">No Vouchers Available</div>\r\n <div class=\"empty-screen__secondary-text\">Looks like there are no vouchers</div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #CARTPAGE>\r\n <div class=\"container\">\r\n <div class=\"main-content\">\r\n <div class=\"promo-banner mb-3\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && ecomConfigs?.videoCallEnabled\">\r\n <!-- && ecomConfigs?.videoCallEnabled\" -->\r\n <div class=\"promo-text\">\r\n <h3>See It Before You Buy It</h3>\r\n <p>Experience our designs in detail via video call</p>\r\n </div>\r\n <button class=\"see-live-btn\" (click)=\"scheduleVideoCall(responseData?.orderedItems)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-video\">\r\n <path d=\"m22 8-6 4 6 4V8Z\" />\r\n <rect width=\"14\" height=\"12\" x=\"2\" y=\"6\" rx=\"2\" ry=\"2\" />\r\n </svg>\r\n SEE IT LIVE\r\n </button>\r\n </div>\r\n\r\n <div class=\"cart-items\">\r\n <div class=\"cart-header\">\r\n <h2>Your Cart</h2>\r\n </div>\r\n <ng-container\r\n *ngTemplateOutlet=\"CARTITEM;context:{data: cartType === 'SHOPPING' ? responseData?.orderedItems : trialCartItem}\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"sidebar\">\r\n <div class=\"reedem-section d-flex flex-column align-items-center\" *ngIf=\"cartType != 'TRIAL' && getUrl()\">\r\n <div class=\"justify-content-between d-flex align-items-center w-100 redeem-section-text\">Redeem Section Amount\r\n <div class=\"toogle-switch\">\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" role=\"switch\" id=\"flexSwitchCheckChecked\"\r\n [checked]=\"selectMatureScheme\" (change)=\"onToggleChange()\">\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"select_matured_text w-100 text-start cursor-pointer\"\r\n *ngIf=\"selectMatureScheme && !selectedRedemption\" (click)=\"selectScheme()\">\r\n Select Matured Scheme\r\n </div> -->\r\n <!-- <div class=\"select_matured_text d-flex flex-column gap-2 w-100 text-start cursor-pointer\"\r\n *ngIf=\"selectedRedemption\">\r\n Selected Scheme\r\n <div class=\"d-flex w-100 justify-content-between align-items-center group_invest\">Group Investment\r\n scheme-5000/M <span>Change</span></div>\r\n <div class=\"d-flex justify-content-between align-items-center w-100 redeem_amount\">Redeemable Amount\r\n <span>\u20B9{{selectedRedmpationData.selectedAmount}}</span>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div class=\"scheme-section\" *ngIf=\"selectMatureScheme\">\r\n <ng-container *ngTemplateOutlet=\"SCHEME_REDEMPTION\"></ng-container>\r\n </div>\r\n <div class=\"coupon-section\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && !referEarnExist\">\r\n <div class=\"coupon-left\">\r\n <div class=\"coupon-icon\"><mat-icon>percent</mat-icon></div>\r\n <span class=\"coupon-text\" *ngIf=\"!responseData.billdetails?.couponId\">Apply\r\n Coupon</span>\r\n <span class=\"coupon-text\" *ngIf=\"responseData.billdetails?.couponId\">Coupon\r\n Applied</span>\r\n </div>\r\n <svg *ngIf=\"!responseData.billdetails?.couponId\" xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\"\r\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" class=\"chevron-icon\" (click)=\"openDialog(CouponList)\">\r\n <path d=\"m9 18 6-6-6-6\" />\r\n </svg>\r\n <span *ngIf=\"responseData.billdetails?.couponId\"\r\n (click)=\"removeCoupon($event)\"><mat-icon>close</mat-icon></span>\r\n </div>\r\n\r\n <div class=\"plan-details-container p-3 rounded-4 bg-white text-dark voucher-details\"\r\n *ngIf=\"referEarnExist && this?.redemptionPoints?.availablePoints > 0\">\r\n <div class=\"fs-14 fw-500\">\r\n Rewards Available\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-start border-bottom pb-2\">\r\n <div class=\"avb_pts mt-2 mb-2\">\r\n <span class=\"fs-16 fw-500 total_points text-secondary\">\r\n <span class=\" fs-18 fw-600 text-dark\">{{(this?.redemptionPoints?.availablePoints || 0).toFixed(2)}}</span>\r\n pts\r\n </span>\r\n <div class=\"total_value fs-12 text-secondary\">\r\n = max \u20B9{{(this?.redemptionPoints?.pointsConvertedRupees || 0).toFixed(2)}} discount\r\n </div>\r\n </div>\r\n <div class=\"wallte_icon\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/777779c1775200561187wallet_(1).png\" alt=\"\">\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center mt-3\">\r\n <div class=\"redemable_text\">\r\n <div class=\"title_text\">\r\n <div class=\"fs-14 fw-500\">\r\n Redeem Points\r\n </div>\r\n <div class=\"fs-13 fs-400\">\r\n Use your points for discount\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"toggle_btn\">\r\n <label class=\"switch\">\r\n <input type=\"checkbox\" id=\"toggleSwitch\" [checked]=\"isPointsRedeeming\"\r\n (click)=\"onPointsRedeemingChange($event)\" />\r\n <span class=\"slider\"></span>\r\n </label>\r\n </div>\r\n </div>\r\n <div class=\"mt-3 success_selected w-100 applied-coupon-card\" *ngIf=\"isPointsRedeeming\">\r\n <div class=\"d-flex align-items-start gap-2\">\r\n <div class=\"success_icon\">\r\n <mat-icon class=\"d-flex justify-content-center align-items-center text-success\">check_circle</mat-icon>\r\n </div>\r\n <div class=\"success_text\">\r\n <div class=\"fs-13 fw-500\">\r\n You're saving \u20B9\r\n {{totalSavingAmt || 0}}\r\n </div>\r\n <div class=\"fs-12 fs-400 text-success\">\r\n {{totalSavingPoints}} points remaining after redemption\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Existing coupon row (keep as-is) -->\r\n <div class=\"coupon-section d-flex flex-column voucher-details\" [id]=\"data?.id\"\r\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist\">\r\n <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n <div class=\"coupon-left\">\r\n Apply Coupon\r\n </div>\r\n <div (click)=\"addRedemptionCoupon(RedemptionVouchers)\">View All</div>\r\n </div>\r\n\r\n <!-- Applied Coupon Success Banner -->\r\n <div class=\"applied-coupon-card w-100 mt-3 d-flex align-items-center justify-content-between\"\r\n *ngIf=\"selectedVoucherId\">\r\n <div class=\"applied-coupon-left d-flex align-items-center gap-3\">\r\n <mat-icon class=\"success-check\">check_circle</mat-icon>\r\n <div class=\"applied-coupon-info\">\r\n <div class=\"applied-coupon-code\">Coupon {{ selectedVoucherCode }} applied!</div>\r\n <div class=\"applied-coupon-saving\">You're saving\r\n <span *ngIf=\"this.couponValueType === 'AMOUNT'\">\u20B9 {{selectedVoucherAmount || 0}}</span>\r\n <span *ngIf=\"this.couponValueType === 'PERCENTAGE'\"> {{selectedVoucherPercentage || 0}}%</span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <div class=\"remove-coupon-btn fs-14 fw-500 text-secondary cursor-pointer\"\r\n (click)=\"removeRedemptionCoupon($event)\">Remove</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"delivery-section\" *ngIf=\"getUrl()\">\r\n <div class=\"delivery-header\">\r\n <mat-icon>gps_fixed</mat-icon>\r\n <span *ngIf=\"cartType === 'SHOPPING'\">Delivering to</span>\r\n <span *ngIf=\"cartType === 'TRIAL'\">Trial Location at</span>\r\n <span class=\"pincode\">{{pincode}}</span>\r\n <!-- <a class=\"change-link\">Change Pincode</a> -->\r\n </div>\r\n </div>\r\n\r\n <div class=\"summary-section\">\r\n <div class=\"summary-title\">Summary</div>\r\n\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span class=\"summary-label\">Subtotal</span>\r\n <span class=\"summary-value\">\u20B9{{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</span>\r\n </div>\r\n\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && referEarnExist && isPointsRedeeming\">\r\n <span class=\"summary-label\">Points Redeemed</span>\r\n <span class=\"summary-value\">- \u20B9{{ totalSavingAmt || 0 }}</span>\r\n </div>\r\n\r\n <div class=\"summary-row\"\r\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'AMOUNT' && appliedVoucher)\">\r\n <span class=\"summary-label\">Voucher Applied</span>\r\n <span class=\"summary-value\">- \u20B9{{ selectedVoucherAmount || 0 }}</span>\r\n </div>\r\n\r\n <div class=\"summary-row\"\r\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'PERCENTAGE' && appliedVoucher)\">\r\n <span class=\"summary-label\">Voucher Applied</span>\r\n <span class=\"summary-value\">- \u20B9{{ percentageReduced || 0 }}</span>\r\n </div>\r\n\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.discountAmount\">\r\n <span class=\"summary-label\">Discount Amount</span>\r\n <span class=\"summary-value\">\r\n {{('\u20B9' + (responseData?.billdetails?.discountAmount | number: '1.0-2')) }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span class=\"summary-label\">Shipping</span>\r\n <span class=\"summary-value\"\r\n [ngClass]=\"{'savings': !responseData?.billdetails?.deliveryCharges || responseData.billdetails.deliveryCharges <= 0}\">\r\n {{ (responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0) ? ('\u20B9' +\r\n (responseData.billdetails.deliveryCharges | number: '1.0-2')) : 'Free' }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span class=\"summary-label\">Estimated Tax</span>\r\n <span class=\"summary-value\">\u20B9{{((!responseData.billdetails?.couponId ?\r\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\r\n number: '1.0-2'}}</span>\r\n </div>\r\n\r\n <div class=\"summary-row total-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span class=\"summary-label\">Total</span>\r\n <!-- <span class=\"summary-value\">\u20B9{{ responseData?.totalAmount | number: '1.0-2' }}</span> -->\r\n <span class=\"total-value\" *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{ responseData?.totalAmount |\r\n number: '1.0-2' }}</span>\r\n\r\n <span class=\"total-value\" *ngIf=\"isPointsRedeeming\">\u20B9{{ (responseData?.totalAmount - (totalSavingAmt || 0)) |\r\n number: '1.0-2' }}</span>\r\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\r\n (selectedVoucherAmount || 0)) | number:\r\n '1.0-2'}}</span>\r\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\r\n (percentageReduced || 0)) | number:\r\n '1.0-2' }}</span>\r\n </div>\r\n\r\n <!-- Trial Cart Summary -->\r\n <ng-container *ngIf=\"cartType === 'TRIAL'\">\r\n <div class=\"summary-row\">\r\n <span class=\"summary-label\">Free Trial</span>\r\n <span class=\"summary-value\">\u20B90</span>\r\n </div>\r\n <div class=\"summary-row\">\r\n <span class=\"summary-label\">Service Charge</span>\r\n <span class=\"summary-value savings\">Free</span>\r\n </div>\r\n <div class=\"summary-divider\"></div>\r\n <div class=\"summary-row total-row\">\r\n <span class=\"summary-label\">Total</span>\r\n <span class=\"summary-value\">\u20B90</span>\r\n </div>\r\n <!-- <span class=\"total-value\" *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{ responseData?.totalAmount |\r\n number: '1.0-2' }}</span>\r\n\r\n <span class=\"total-value\" *ngIf=\"isPointsRedeeming\">\u20B9{{ (responseData?.totalAmount - (totalSavingAmt || 0)) |\r\n number: '1.0-2' }}</span>\r\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\r\n (selectedVoucherAmount || 0)) | number:\r\n '1.0-2'}}</span>\r\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\r\n (percentageReduced || 0)) | number:\r\n '1.0-2' }}</span> -->\r\n </ng-container>\r\n </div>\r\n <button class=\"place-order-btn\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\r\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n *ngIf=\"cartType === 'SHOPPING'\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\r\n Shopping'}}</button>\r\n <button class=\"place-order-btn mt-0\" (click)=\"edit ? '' : proceedToCheckout()\" simpoButtonDirective\r\n *ngIf=\"cartType === 'SHOPPING'\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout\r\n Cart'}}</button>\r\n <button class=\"place-order-btn mt-0\" simpoButtonDirective *ngIf=\"cartType === 'TRIAL'\"\r\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\" (click)=\"bookAppointment()\">BOOK\r\n APPOINTMENT</button>\r\n\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #CHECKOUTPAGE>\r\n <div class=\"checkout-left-panel\">\r\n <div class=\"checkout-main-content\">\r\n <!-- <div class=\"delivery-options\">\r\n <div class=\"delivery-option active\">\r\n <div class=\"delivery-icon\"></div>\r\n HOME DELIVERY\r\n </div>\r\n <div class=\"delivery-option\">\r\n <div class=\"delivery-icon\"></div>\r\n STORE PICK-UP\r\n </div>\r\n </div> -->\r\n\r\n <div class=\"section-title\">Shipping Address</div>\r\n\r\n <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\r\n <div class=\"address-info\">\r\n <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\r\n <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\r\n {{defaultAddress?.stateName}}</div>\r\n <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"addLinks h-100\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\r\n <mat-icon>add</mat-icon>\r\n </div>\r\n\r\n <button class=\"change-address-btn\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">CHANGE OR ADD ADDRESS</button>\r\n\r\n <button class=\"btn w-100 mt-1 payment-btn\" (click)=\"proceedToPayment()\" simpoButtonDirective\r\n *ngIf=\"defaultAddress && !placeOrderLoader\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\">\r\n Place Order\r\n </button>\r\n <button class=\"btn w-100 mt-1 payment-btn\" simpoButtonDirective *ngIf=\"defaultAddress && placeOrderLoader\"\r\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\">\r\n Loading...\r\n </button>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"checkout-right-panel\">\r\n <div class=\"order-summary\">\r\n <div class=\"summary-title\">Order Summary</div>\r\n\r\n <div class=\"checkout-product\">\r\n <div class=\"product-item\" *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n <img [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-image\"\r\n alt=\"\">\r\n <div class=\"product-details\">\r\n <div class=\"product-name\">{{item.itemName}}</div>\r\n <div class=\"product-quantity\">Quantity: {{item.quantity}}</div>\r\n <div class=\"product-price\">\u20B9{{(item.sellingPrice * item.quantity) | number: '1.0-2'}}</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"price-breakdown\">\r\n <div class=\"price-row\">\r\n <span>Total Price</span>\r\n <span>\u20B9{{(responseData?.billdetails?.totalNetValue\r\n ?? 0) | number: '1.0-2'}}</span>\r\n </div>\r\n <div class=\"price-row\">\r\n <span>Total Tax</span>\r\n <span>\u20B9{{((!responseData.billdetails?.couponId ?\r\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\r\n number:\r\n '1.0-2'}}</span>\r\n </div>\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && cartInfo?.billdetails?.orraSchemeRedeemedAmount\">\r\n <span class=\"summary-label\">Redeem Amount</span>\r\n <span class=\"summary-value\">\u20B9{{(cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\r\n '1.0-2'}}</span>\r\n </div>\r\n\r\n <div class=\"price-row discount\"\r\n *ngIf=\"responseData?.billdetails?.discountAmount && subIndustryName != 'Ecommerce Jewellery'\">\r\n <span>Coupon Discount</span>\r\n <span>- \u20B9{{responseData?.billdetails?.discountAmount\r\n | number: '1.0-2'}}</span>\r\n </div>\r\n <div class=\"price-row\"\r\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n <span>Delivery Charge</span>\r\n <span>{{responseData.billdetails.deliveryCharges\r\n |\r\n number: '1.0-2'}}</span>\r\n </div>\r\n <div class=\"price-row total\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span>TOTAL AMOUNT</span>\r\n <span *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{(responseData?.totalAmount ?? 0) | number:\r\n '1.0-2'}}</span>\r\n <span *ngIf=\"isPointsRedeeming\">\u20B9{{(responseData?.totalAmount - (totalSavingAmt || 0)) | number:\r\n '1.0-2'}}</span>\r\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\r\n (selectedVoucherAmount || 0)) | number:\r\n '1.0-2'}}</span>\r\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\r\n (responseData?.totalAmount * (selectedVoucherPercentage / 100) || 0)) | number:\r\n '1.0-2' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #CARTITEM let-products=\"data\">\r\n <div class=\"cart-item\" *ngFor=\"let item of products\" [style.color]=\"fontColor\">\r\n <div class=\"item-left\">\r\n <div class=\"item-image\">\r\n <img class=\"item-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n (click)=\"goToProductDetails(item)\" style=\"cursor: pointer;\">\r\n </div>\r\n <div class=\"item-details\">\r\n <h3 class=\"item-title\">{{item.itemName}}</h3>\r\n <div class=\"item-subtitle\" *ngIf=\"item.itemVariant\">\r\n <span *ngFor=\"let varient of getKeys(item.itemVariant.properties); let last = last\">\r\n {{ item.itemVariant.properties[varient] | titlecase }}<span *ngIf=\"!last\">, </span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"item-right\">\r\n <div class=\"quantity-control\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <button class=\"qty-btn px-2\" (click)=\"decreaseQty(item)\" [disabled]=\"item.quantity === 1\">\r\n <mat-icon>remove</mat-icon>\r\n </button>\r\n <span class=\"qty-value px-3\">{{item.quantity}}</span>\r\n <button class=\"qty-btn px-2\" (click)=\"increaseQty(item)\">\r\n <mat-icon>add</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"item-price\">\r\n \u20B9{{item.sellingPrice | number: '1.0-2'}}\r\n </div>\r\n\r\n <div class=\"delete-btn-circle\" (click)=\"removeItem(item)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trash-2\">\r\n <path d=\"M3 6h18\" />\r\n <path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\" />\r\n <path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\" />\r\n <line x1=\"10\" x2=\"10\" y1=\"11\" y2=\"17\" />\r\n <line x1=\"14\" x2=\"14\" y1=\"11\" y2=\"17\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #EMPTYITEM>\r\n <section class=\"empty-cart w-100 d-flex align-items-center justify-content-center\">\r\n <div class=\"empty-cart-container d-flex flex-column\">\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"data?.content?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <div class=\"cart-text content-side\">\r\n <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"d-flex justify-content-center\"\r\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <button class=\"place-order-btn mx-auto w-fit\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\r\n [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\r\n Shopping'}}</button>\r\n </div>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #SCHEME_REDEMPTION>\r\n <div class=\"modal-body\">\r\n <div class=\"scheme-option\" *ngFor=\"let scheme of schemeList\" (click)=\"redeemScheme(scheme, false)\"\r\n [style.borderColor]=\"cartInfo.billdetails.orraSchemeCode ? styles?.background?.color : ''\">\r\n <label for=\"individual\" class=\"scheme-card\">\r\n <div class=\"scheme-info d-flex gap-1\">\r\n <div class=\"form-check-radio\">\r\n <input class=\"form-check-input-radio\" type=\"radio\" name=\"flexRadioDefault\" id=\"flexRadioDefault2\">\r\n </div>\r\n <div class=\"right-side\">\r\n <div class=\"scheme-name\">\r\n <div class=\"scheme-title\">Individual Investment Scheme</div>\r\n <div class=\"scheme-monthly\">\u20B98000/M</div>\r\n </div>\r\n <div class=\"scheme-details\">\r\n <span class=\"scheme-id\">GPP Id: {{scheme.GPPId}}</span>\r\n <!-- <span class=\"scheme-maturity\">Maturity Date: 12 April 2024</span> -->\r\n </div>\r\n <div class=\"scheme-amount\">\u20B9{{scheme.amount}}</div>\r\n </div>\r\n </div>\r\n </label>\r\n </div>\r\n <div class=\"reedem_error d-flex justify-content-center align-items-center\" *ngIf=\"showReedemError\">\r\n Please add more \u20B9{{vaildAmount}} to reedem this scheme\r\n </div>\r\n </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.reedem-section{padding:10px 15px;border-radius:15px;background:#f6f3f9;box-shadow:#b2b2ca80 2px 2px 6px;font-weight:700;font-size:13px}.redeem-section-text{font-size:.9rem;font-weight:700}.form-check-input:checked{background-color:#28a745!important;border-color:#28a745!important}.form-check-input:focus{border-color:#28a745!important;outline:0;box-shadow:none!important}.close-btn{background:none;border:none;font-size:24px;color:#6b7280;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.close-btn:hover{color:#374151}.select_matured_text{font-size:.8rem!important;margin-top:10px;color:#05aacf}.position-relative{position:relative}.cart-parent{display:flex;margin-top:15px}.left-panel{width:65%;padding-right:5rem;border-right:1px solid #E9E9E9}.timeline{cursor:pointer}.cart-items{background:#fff;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.cart-header{padding:16px 24px;border-bottom:1px solid #e2e8f0;background:#f8fafc}.cart-header h2{margin:0;font-size:18px;font-weight:500;color:#0f172a}.cart-item{display:flex!important;align-items:center;justify-content:space-between;border-bottom:1px solid #e2e8f0;gap:20px;padding:0 8px;transition:background .2s}.cart-item:hover{background:#fbfcfe}.item-left{display:flex;align-items:center;flex:1}.item-right{display:flex;align-items:center;padding:15px;gap:32px}.item-image img{width:64px;height:64px;border-radius:12px;object-fit:cover;border:1px solid #f1f5f9}.item-details{display:flex;flex-direction:column;gap:4px}.item-title{margin:0;font-size:15px;font-weight:600;color:#0f172a;line-height:1.4}.item-subtitle{font-size:13px;color:#64748b;font-weight:400}.quantity-control{display:flex;align-items:center;border:1.5px solid #e2e8f0;border-radius:7px;overflow:hidden;height:38px;background:#fff;width:fit-content}.qty-btn{width:38px;height:100%;border:none;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#475569;transition:all .2s ease}.qty-btn:hover{background:#f8fafc;color:#0f172a}.qty-btn mat-icon{font-size:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center}.qty-value{width:32px;height:100%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;color:#0f172a;border-left:1.5px solid #e2e8f0;border-right:1.5px solid #e2e8f0}.item-price{font-size:18px;font-weight:700;color:#0f172a;min-width:60px;text-align:right;letter-spacing:-.01em}.delete-btn-circle{width:36px;height:36px;border-radius:50%;border:1px solid #fee2e2;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#ef4444;transition:all .2s ease}.delete-btn-circle:hover{background:#fef2f2;border-color:#fecaca;transform:scale(1.05);color:#dc2626}.delete-btn-circle svg{width:18px;height:18px}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%;padding-left:5rem}.my-bag{font-size:16px;font-weight:600;color:#000;margin-left:8px}.my-bag span{color:#939393}.coupons{display:flex;justify-content:space-between;padding:10px;border-radius:4px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px;margin-top:10px;cursor:pointer}.coupon-list-section{padding:15px;width:400px;z-index:10000001!important}.coupon-list-section .search{padding:8px;border:1px solid lightgray;border-radius:20px;display:flex;justify-content:space-between}.coupon-list-section input{border:none;outline:none;width:90%}.coupon-list-section .coupon-list{height:60vh;width:100%}.item-parent{margin:10px 0;min-height:120px}.lh-23{line-height:23px;margin-left:10px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0;cursor:pointer}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer;font-size:18px}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important;height:calc(100vh - 170px)}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;width:100%;text-align:center}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff;cursor:pointer}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.see-live-btn{white-space:nowrap!important}.left-panel{width:100%;padding-right:0rem}.right-panel{width:100%;z-index:1000;padding-left:0rem}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap;display:none}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}.empty-cart-container{height:calc(100vh - 130px)}.coupons-listing-section{width:100vw!important}.checkoutPage{flex-direction:column}.checkout-left-panel,.checkout-right-panel{width:100%!important}}.mobile-fixed{color:#fff}.coupons-listing-section{height:100vh;padding-top:0;position:relative;width:390px;z-index:100;background:#d3d3d354}.coupons-listing-section .coupon-heading{display:flex;align-items:center;background-color:#fff;padding:15px 20px;width:100%;box-sizing:border-box}.coupons-listing-section .coupon-heading img{height:15px;width:15px;position:relative;top:2px;cursor:pointer}.coupons-listing-section .coupon-heading .header-text{font-size:16px;color:#000;font-weight:600;margin-left:15px;position:relative;top:-3px;right:15px;cursor:pointer}.coupons-listing-section .coupon-search-sec{width:90%;box-sizing:border-box;margin:10px auto;border:1px solid lightgray;padding:10px;border-radius:10px;background-color:#fff;display:flex;font-size:16px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec input{border:none;outline:none;background-color:transparent;width:95%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-search-sec input:focus{font-size:14px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec .back-btn{position:relative;top:3px;cursor:pointer}.coupons-listing-section .coupon-search-sec .apply-btn-search{font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing{height:72%;overflow-y:auto;width:90%;margin:20px auto}.coupons-listing-section .coupon-listing .coupon-details{padding:15px;margin-bottom:15px;background-color:#edfffa;border-radius:10px;border:1px solid lightgray}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading{display:flex;flex-direction:column;gap:25px}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief{display:flex;justify-content:space-between;width:100%}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-name{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-desc{padding:5px 0;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .show-details-btn{cursor:pointer}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec{display:flex;justify-content:flex-end}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec .apply-offer-btn{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-toggle-details-btn{text-align:left;text-decoration:underline;width:100%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details-divider{border-top:2px solid lightgray;opacity:.3;margin:15px 0}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-terms{font-size:14px;color:#000;font-weight:400}.empty-screen-container{height:100%;width:85%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-screen-container .empty-screen__primary-text{font-size:22px;color:#000;font-weight:400}.empty-screen-container .empty-screen__secondary-text{text-align:center;padding:10px 0;font-size:16px;color:#000;font-weight:400}.empty-screen-container .empty-screen__button{width:90%;background-color:#fff;border-radius:8px;text-align:center;padding:10px;margin:10px auto 0;cursor:pointer;font-size:18px;color:#000;font-weight:400}.box-shadow{box-shadow:#00000029 0 1px 4px}.main-content{border-radius:12px;padding:0 30px 30px;width:100%;overflow:scroll;height:calc(100vh - 150px)}.delivery-options{display:flex;gap:20px;margin-bottom:30px}.delivery-option{padding:12px 24px;border:2px solid #e0e0e0;border-radius:25px;background:#fff;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:500;transition:all .2s}.delivery-option.active{background:#f0e6ff;border-color:#8b5cf6;color:#7c3aed}.delivery-option:hover{border-color:silver}.delivery-icon{width:16px;height:16px;background:#8b5cf6;border-radius:3px}.section-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.shipping-info{border-radius:10px;padding:20px;margin-bottom:20px;border:1px solid rgb(238,232,255);box-shadow:#0000000a 0 4px 8px}.delivery-date{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.delivery-date-text{color:#666;font-weight:500}.change-date-btn{color:#e91e63;background:none;border:none;font-weight:600;cursor:pointer;text-transform:uppercase;font-size:12px;letter-spacing:.5px}.address-info{margin-bottom:15px}.address-name{font-weight:700;margin-bottom:8px;color:#000}.address-details{color:#666;margin-bottom:8px}.mobile-number{font-weight:700;color:#000;font-size:15px}.change-address-btn{font-size:1rem!important;font-weight:700!important;padding:6px;background:#fff;border:1px solid rgb(229,221,255);border-radius:8px;color:#000;cursor:pointer;transition:all .2s;box-shadow:#0000000a 0 4px 8px}.change-address-btn:hover{border-color:#8b5cf6;color:#8b5cf6}.billing-section{margin-top:40px}.billing-options{display:flex;flex-direction:column;gap:15px;margin-top:20px}.billing-option{display:flex;align-items:center;gap:12px;padding:15px;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .2s}.billing-option.active{background:#f0e6ff;border-color:#8b5cf6}.radio-btn{width:20px;height:20px;border:2px solid #e0e0e0;border-radius:50%;position:relative}.billing-option.active .radio-btn{border-color:#8b5cf6}.billing-option.active .radio-btn:after{content:\"\";width:10px;height:10px;background:#8b5cf6;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.order-summary{border-radius:12px;padding:25px;width:75%}.summary-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.product-item{display:flex;gap:15px;margin-bottom:20px;border-bottom:1px solid #f0f0f0;border-radius:7px;background:#fff;padding:15px}.product-item:last-of-type{border-bottom:none;margin-bottom:30px;padding-bottom:0}.product-image{max-width:110px;width:100%;height:100%;border-radius:8px}.product-details{flex:1}.product-name{font-weight:500;margin-bottom:4px;color:#2d3748;font-size:14px}.product-quantity{color:#666;font-size:12px;margin-bottom:8px}.product-price{font-weight:600;color:#2d3748}.delivery-info{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:#8b5cf6}.delivery-icon-small{width:12px;height:12px;background:#8b5cf6;border-radius:2px}.price-breakdown{border-top:1px solid #f0f0f0;padding-top:20px}.price-row{display:flex;justify-content:space-between;margin-bottom:12px;color:#666}.price-row.total{font-weight:600;color:#2d3748;font-size:16px;margin-top:15px;padding-top:15px;border-top:1px solid #f0f0f0}.discount{color:#22c55e!important}@media (max-width: 768px){.container{grid-template-columns:1fr;padding:15px;gap:20px}.main-content,.order-summary{padding:20px;width:100%}.delivery-options{flex-direction:column;gap:10px}}.checkout-left-panel{width:65%;display:flex;justify-content:center}.checkout-right-panel{width:35%;display:flex;justify-content:center;background-color:#f9f9fa}.checkout-product{max-height:50vh;overflow:scroll}.mt-1{margin-top:1rem!important}.payment-btn{box-shadow:#0000000a 0 4px 8px}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px;height:25vh!important;margin-bottom:20px}.addLinks mat-icon{border:1px solid rgb(219,223,225);display:flex;border-radius:100%;align-items:center;justify-content:center;font-size:16px;color:#dbdfe1}.change-pincode{display:flex;gap:10px}.change-pincode mat-icon{font-size:18px;align-items:center;justify-content:center;display:flex}.change-pincode span{font-size:14px}.fs-13{font-size:13px}.fs-12{font-size:12px}.fs-18{font-size:18px}.b-1-b{border-width:0px 1px;border-style:solid;border-color:#000}.container{max-width:unset;padding:24px;display:flex;gap:24px;width:100%!important}.main-content{background:#fff;border-radius:12px;width:70%}.promo-banner{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;border-radius:8px;border:1px solid #e2e8f0}.promo-text h3{font-size:16px!important;font-weight:500;margin-bottom:4px}.promo-text p{font-size:.9rem!important;margin-bottom:0!important;color:#64748b}.see-live-btn{background:#fff;border:1px solid #e2e8f0;font-weight:600;color:#000;padding:8px 16px;border-radius:8px;font-size:12px!important;cursor:pointer;display:flex;align-items:center;gap:8px;width:max-content!important;transition:all .2s ease;box-shadow:0 1px 2px #0000000d}.see-live-btn:hover{background:#f8fafc;border-color:#cbd5e1;transform:translateY(-1px)}.see-live-btn svg{color:#6366f1}.cart-item{display:flex;gap:16px;position:relative}.cart-item:last-child{border-bottom:none}.item-image{width:15%;height:100px;border-radius:8px;object-fit:cover;display:flex;align-items:center;justify-content:center}.item-details{flex:1}.item-title{font-weight:500;margin-bottom:8px}.item-price{display:flex;align-items:center;gap:8px}.current-price{font-size:1rem;font-weight:600}.original-price{font-size:1rem;text-decoration:line-through}.discount{background:#fef3c7;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:500}.item-code{font-size:12px;color:#9ca3af;margin-bottom:8px}.item-options{display:flex;gap:16px;font-size:14px;color:#6b7280;margin-bottom:12px}.delivery-info{font-size:12px;color:#8b5cf6}.pickup-info{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:5px 15px;margin-top:12px;display:flex;align-items:center;cursor:pointer;width:max-content;gap:20px}.pickup-text{font-size:.9rem;color:#374151}.remove-btn{position:absolute;top:16px;right:0;width:20px!important;height:20px;background:#000;color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px!important}.sidebar{display:flex;flex-direction:column;gap:16px;width:32%}.coupon-section{border-radius:8px;padding:10px 15px;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .2s ease}.coupon-section:hover{border-color:#cbd5e1;background-color:#f8fafc}.chevron-icon{color:#94a3b8;transition:transform .2s ease}.coupon-section:hover .chevron-icon{transform:translate(2px);color:#64748b}.scheme-section{border-radius:12px;padding:10px 15px;cursor:pointer}.coupon-left{display:flex;align-items:center;gap:12px}.coupon-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center}.coupon-icon mat-icon{font-size:17px;width:17px!important;height:19px!important}.coupon-text{font-weight:700;font-size:.9rem}.delivery-section{background:#fff;border-radius:12px;padding:10px 15px;box-shadow:#b2b2ca80 2px 2px 6px;background:#f6f3f9}.delivery-header{display:flex;align-items:center;gap:12px;margin-bottom:4px}.delivery-header span{font-size:.9rem;font-weight:700}.delivery-header mat-icon{width:20px;height:20px;font-size:17px;position:relative;top:2px}.delivery-icon{width:20px;height:20px;background:#8b5cf6;border-radius:50%}.pincode{font-weight:600;color:#111827}.change-link{color:#ec4899;font-size:.9rem;text-decoration:none;margin-left:auto}.summary-section{background:#fff;border-radius:8px;padding:20px;border:1px solid #e2e8f0}.summary-title{font-size:16px;font-weight:700;color:#0f172a;margin-bottom:20px;letter-spacing:-.01em}.summary-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.summary-row:last-child{margin-bottom:0}.summary-label{font-size:14px;font-weight:400;color:#64748b}.summary-value{font-size:14px;font-weight:500;color:#0f172a}.summary-divider{height:1px;background:#f1f5f9;margin:16px 0;width:100%}.total-row .summary-label{font-size:16px;font-weight:600;color:#0f172a}.total-row .summary-value{font-size:16px;font-weight:700;color:#0f172a}.total-row{border-top:1px solid #e2e8f0;padding-top:15px;margin-top:15px}.total-label{font-weight:600;font-size:16px}.total-value{font-weight:700;font-size:18px}.place-order-btn{background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;border:none;border-radius:12px;padding:9px 10px;font-size:.9rem!important;font-weight:600;cursor:pointer;margin-top:10px;text-transform:uppercase}.place-order-btn:hover{opacity:.9}.chain-icon,.earring-icon{width:60px;height:60px;filter:sepia(1) hue-rotate(30deg) saturate(2)}.item-img{width:100%;height:100%;object-fit:cover}.mt-0{margin-top:0!important}select{outline:none;border-radius:5px;padding:2px;width:20%;border:none;box-shadow:#9999994d 2px 2px 6px;cursor:pointer}.cart-tab-parent{display:flex;justify-content:center}.cart-tabs{gap:10px;display:flex;justify-content:center;align-items:center;width:max-content;border-radius:8px;border:1px solid #e2e8f0}.cart-tabs div{padding:7px 10px;cursor:pointer;font-size:14px}.selected-cart-tab{margin:6px;background:#f1f5f9;border-radius:5px;color:#000!important;font-weight:500}.checkout-main-content{width:50%;padding:30px;border-radius:12px}@media screen and (max-width: 475px){.main-content{padding:0;height:auto!important}.cart-item{flex-direction:column!important;align-items:flex-start!important;padding:16px 12px!important;gap:16px!important}.item-left{width:100%!important;gap:16px!important;align-items:flex-start!important}.item-image{width:86px!important;height:86px!important;flex-shrink:0!important}.item-right{width:100%!important;justify-content:space-between!important;padding:0!important;gap:12px!important;margin-top:4px!important}.item-price{flex:1!important;text-align:right!important;margin-right:8px!important;font-size:16px!important}.item-title{font-size:14px!important;-webkit-line-clamp:2!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important}.quantity-control{height:34px!important}.qty-btn{width:34px!important}.qty-value{width:28px!important;font-size:13px!important}.no-items{height:86vh;overflow:hidden;margin:0}.checkout-main-content{width:100%}.container{padding:0!important}.pickup-info{display:none}.container{display:flex;flex-direction:column}.promo-banner{gap:10px}select{width:50%}.main-content,.sidebar{width:100%}.vouchers-listing-section{min-width:unset!important;width:100vw!important}.separator{display:none!important}.coupon-meta{display:grid!important;grid-template-columns:1fr 1fr!important}}.group_invest{color:#000;font-size:.8rem}.reedem_error{color:red}.group_invest span{color:#05aacf}.redeem_amount{padding:2%;border-radius:4px;background:#fff;margin-top:2%;color:#000;font-size:.8rem}.redeem_amount span{color:#0dc577}.w-fit{width:fit-content!important}.modal-body{padding-bottom:0;overflow-y:scroll;max-height:300px;padding:0!important}.scheme-option{margin-bottom:16px}.scheme-option input[type=radio]:checked+.scheme-card{border-color:#06b6d4;background:#f0f9ff;position:relative}.scheme-option input[type=radio]:checked+.scheme-card:before{content:\"\";position:absolute;top:20px;left:20px;width:20px;height:20px;border:2px solid #06b6d4;border-radius:50%;background:#fff}.scheme-option input[type=radio]:checked+.scheme-card:after{content:\"\";position:absolute;top:26px;left:26px;width:8px;height:8px;background:#06b6d4;border-radius:50%}.scheme-card{justify-content:space-between;padding:10px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff;width:100%}.scheme-card:hover{border-color:#d1d5db;background:#f9fafb}.form-check-radio{width:10%}.scheme-title{font-size:12px;font-weight:600;color:#111827;margin-bottom:8px}.scheme-details{display:flex;gap:25px;margin-bottom:20px}.scheme-name{display:flex;justify-content:space-between}.scheme-details span{font-size:12px;color:#0000004d}.scheme-monthly{font-size:14px;font-weight:600;color:#111827;min-width:100px;text-align:right}.right-side{width:90%}.scheme-amount{font-weight:700}@media screen and (min-width: 700px){.cart-items{max-height:500px;overflow:scroll}}.add-to-cart-parent{width:max-content;border:1px solid #000000;border-radius:8px}.cursor{cursor:pointer}.cart-text{max-width:600px;margin:0 auto;text-align:center}.cart-text div{word-break:break-word;overflow-wrap:break-word;white-space:normal}.switch{position:relative;display:inline-block;width:45px;height:20px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:34px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:3px;bottom:2px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#4caf50}input:checked+.slider:before{transform:translate(24px)}.vouchers-listing-section{position:relative;width:fit-content;min-width:500px;z-index:100;background:#fff;height:100vh}.vouchers-listing-section .coupon-heading{border-bottom:1px solid #eee}.vouchers-listing-section .coupon-listing{padding:12px 16px;overflow-y:auto;height:calc(97vh - 100px)}.voucher-details{background:#fff;border-radius:12px;padding:14px;box-shadow:0 1px 4px #00000042}.voucher-details .coupon-brief .apply-offer-btn{background:#111;color:#fff;border-radius:10px;padding:6px 16px}.voucher-details .coupon-code-box{border:1.5px dashed #bbb;border-radius:8px;padding:8px 12px;margin-bottom:10px}.voucher-details .coupon-code-box .code-label{font-size:11px;color:#888;margin-bottom:2px}.voucher-details .coupon-code-box .code-row .code-value{font-weight:700;font-size:15px;letter-spacing:1px}.voucher-details .coupon-meta .clock-icon{font-size:14px;height:14px;width:14px;vertical-align:middle}.applied-coupon-card{background:#f0fff8;border-radius:12px;padding:12px 16px}.applied-coupon-card .applied-coupon-left .success-check{color:#22c55e;font-size:22px}.applied-coupon-card .applied-coupon-left .applied-coupon-code{font-weight:700;font-size:14px}.applied-coupon-card .applied-coupon-left .applied-coupon-saving{font-size:13px;color:#097d5f;margin-top:2px}.active-type{background:#111!important;color:#fff!important}.redemption-type{text-align:center;border-radius:10px;padding:6px 16px;background:#d3d3d36b;width:-webkit-fill-available!important}.wallte_icon{background:#000;border-radius:50px;padding:5px 9px 7px}.wallte_icon img{width:18px;height:18px}.fw-600{font-weight:600}.coupon-type{width:fit-content!important;border-radius:26px!important;background:transparent!important;border:1px solid #afafaf;color:#393838;text-align:center;padding:6px 16px}.active-coupon{background:transparent!important;border:2px solid black!important;color:#000!important}.my-close-btn{position:absolute!important;top:10px!important;right:10px!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { 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: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "directive", type:
9949
9974
  //DIRECTIVE
9950
9975
  ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i8$4.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }] }); }
9951
9976
  }
@@ -9974,7 +9999,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
9974
9999
  ButtonEditorDirective,
9975
10000
  ColorDirective,
9976
10001
  MatSpinner
9977
- ], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n <ng-container *ngIf=\"data\">\r\n <section [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\"\r\n [attr.class]=\"isMobile ? 'py-5 position-relative' : 'position-relative'\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\"\r\n [ngClass]=\"!responseData?.orderedItems?.length ? 'no-items' : ''\">\r\n <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\"\r\n [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\"\r\n *ngIf=\"responseData?.orderedItems?.length && currentTab === 'ADDRESS'\">\r\n <span class=\"timeline\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline isActive\">Address</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline\" style=\"cursor: auto;\">Payment</span>\r\n </div>\r\n <div class=\"cart-tab-parent w-100\" *ngIf=\"currentTab == 'BAG' && ecomConfigs?.appointmentBookingEnabled\">\r\n <!-- && ecomConfigs?.appointmentBookingEnabled\" -->\r\n <div class=\"cart-tabs\" [id]=\"data?.id\">\r\n <div class=\"selected-cart-tab\" [ngClass]=\"{'selected-cart-tab': cartType==='SHOPPING'}\"\r\n (click)=\"cartType='SHOPPING'\">Shopping Cart ({{responseData?.orderedItems?.length ?? 0}})</div>\r\n <div [ngClass]=\"{'selected-cart-tab': cartType==='TRIAL'}\" (click)=\"cartType='TRIAL'\">Trial Cart\r\n ({{trialCartItem?.length ?? 0}})</div>\r\n </div>\r\n </div>\r\n <div class=\"cart-parent\" [spacingHorizontal]=\"stylesLayout\" *ngIf=\"currentTab === 'BAG'\" [id]=\"data?.id\"\r\n [simpoAnimation]=\"styles?.animation\">\r\n <ng-container>\r\n <ng-container *ngIf=\"cartType === 'SHOPPING'\">\r\n <ng-container\r\n *ngTemplateOutlet=\"(responseData?.orderedItems?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"cartType === 'TRIAL'\">\r\n <ng-container *ngTemplateOutlet=\"(trialCartItem?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex checkoutPage\"\r\n *ngIf=\"(responseData?.orderedItems?.length || 0) > 0 && currentTab === 'ADDRESS'\">\r\n <ng-container *ngTemplateOutlet=\"CHECKOUTPAGE\">\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [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\r\n </section>\r\n </ng-container>\r\n <ng-container *ngIf=\"!data\">\r\n <section class=\"cart-window\">\r\n <div class=\"heading-large lh-2 mb-3 header-sec\">\r\n <div class=\"d-flex align-items-center\">\r\n <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\r\n <span>Your Cart</span>\r\n </div>\r\n <div class=\"saving\"></div>\r\n </div>\r\n <div class=\"offers\">\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\r\n <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\r\n <span>Avail Offers / Coupons</span>\r\n </div>\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n <div class=\"small-items\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems\">\r\n <div class=\"small-item\">\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"small-product-img\"\r\n [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n (click)=\"goToProductDetails(item)\">\r\n </div>\r\n <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\r\n <div class=\"small-item-quantity\">\r\n <span class=\"cursor\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\">+</span>\r\n </div>\r\n <div class=\"small-item-price\">\r\n <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.sellingPrice) | number: '1.0-2'}}\r\n </div>\r\n <!-- <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"fotter-sec\">\r\n <div class=\"delivery-add d-flex\">\r\n <mat-icon>home</mat-icon>\r\n <div class=\"address\">Tetsting</div>\r\n </div>\r\n <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span\r\n style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span>\r\n {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\r\n </div>\r\n </section>\r\n </ng-container>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n<ng-template #CouponList>\r\n <section class=\"coupons-listing-section\">\r\n <div class=\"coupon-heading\">\r\n <div class=\"back-btn\" (click)=\"closeDialogRef()\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"header-text\">Apply Coupon</div>\r\n </div>\r\n <!-- <div class=\"coupon-search-sec\">\r\n <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\r\n <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\r\n </div> -->\r\n <div class=\"coupon-listing\">\r\n <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\r\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\r\n <div class=\"coupon-details\"\r\n [ngStyle]=\"{'background-color': !couponDetails.applicable ? '#FFF2F4' : '#EDFFFA'}\"\r\n *ngIf=\"couponDetails?.status\">\r\n <div class=\"details__coupon-heading\">\r\n <div class=\"coupon-brief\">\r\n <div class=\"coupon-brief__left-sec\">\r\n <div class=\"coupon-name\" [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\r\n {{ couponDetails.couponCode | uppercase }}</div>\r\n <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\r\n </div>\r\n <div class=\"coupon-brief__right-sec\">\r\n <div class=\"apply-offer-btn\" [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\r\n [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : ''}\"\r\n (click)=\"applyCoupon(couponDetails)\">Apply</div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\r\n <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\r\n <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\r\n </div> -->\r\n </div>\r\n <ng-container>\r\n <!-- *ngIf=\"couponDetails.status\" -->\r\n <div class=\"details-divider\"></div>\r\n <ul class=\"details__coupon-terms\">\r\n <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\r\n </ul>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #showEmptyScreen>\r\n <div class=\"empty-screen-container\">\r\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n <div class=\"empty-screen__primary-text\">No Coupon Available</div>\r\n <div class=\"empty-screen__secondary-text\">\r\n Looks like there are no coupons at the moment\r\n </div>\r\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\r\n </div>\r\n </ng-template>\r\n </div>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #RedemptionVouchers>\r\n <section class=\"vouchers-listing-section d-flex flex-column\">\r\n <div class=\"coupon-heading d-flex align-items-center gap-2 p-3 fs-18 fw-600 border-bottom\">\r\n <div class=\"back-btn cursor-pointer d-flex align-items-center\" (click)=\"closeDialogRef()\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"header-text\">Coupons & Vouchers</div>\r\n </div>\r\n\r\n <!-- <div class=\"d-flex align-items-center tab-container justify-content-between gap-2 p-3\">\r\n <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'COUPONS'}\"\r\n (click)=\"redemptionType = 'COUPONS'\">\r\n Coupons\r\n </div>\r\n <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'VOUCHERS'}\"\r\n (click)=\"redemptionType = 'VOUCHERS'\">\r\n Vouchers\r\n </div>\r\n </div> -->\r\n\r\n <div class=\"coupon-listing d-flex flex-column gap-3 pt-3\" *ngIf=\"redemptionType === 'COUPONS'\">\r\n <div class=\"d-flex align-items-center tab-container gap-3\">\r\n <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\r\n [ngClass]=\"{'active-coupon': redemptionCouponType === 'REWARDS'}\" (click)=\"redemptionCouponType = 'REWARDS'\">\r\n Rewards\r\n </div>\r\n <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\r\n [ngClass]=\"{'active-coupon': redemptionCouponType === 'DISCOUNTS'}\"\r\n (click)=\"redemptionCouponType = 'DISCOUNTS'\">\r\n Discounts\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"redemptionCouponType === 'REWARDS'\">\r\n <ng-container *ngIf=\"(listRedemptionCoupons?.vouchers?.length > 0) ; else showEmptyScreen\">\r\n <ng-container *ngFor=\"let voucher of listRedemptionCoupons?.vouchers; let idx = index\">\r\n <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\r\n\r\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\r\n <div class=\"coupon-brief__left-sec\">\r\n <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\r\n <div class=\"coupon-desc fs-12 text-secondary\">\r\n Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%'\r\n }}\r\n off on your payment\r\n </div>\r\n </div>\r\n <div class=\"coupon-brief__right-sec\">\r\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">\r\n Apply</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\r\n <div class=\"code-label\">Code</div>\r\n <div class=\"code-value\">{{ voucher.voucherCode }}</div>\r\n </div>\r\n\r\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\r\n <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\r\n <span class=\"separator text-secondary\">|</span>\r\n <span class=\"validity\">\r\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\r\n Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\r\n </span>\r\n <span class=\"separator text-secondary\" *ngIf=\"voucher.maxRedeemableAmount\">|</span>\r\n <span class=\"min-order\" *ngIf=\"voucher.maxRedeemableAmount\">Max Redeemable Amount: \u20B9{{\r\n voucher.maxRedeemableAmount | number }}</span>\r\n </div>\r\n\r\n <!-- <div class=\"terms-link\">View terms & conditions</div> -->\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"redemptionCouponType === 'DISCOUNTS'\">\r\n <ng-container *ngIf=\"(couponList.length > 0); else showEmptyDiscounts\">\r\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\r\n <div class=\"voucher-details\" *ngIf=\"couponDetails?.status\">\r\n\r\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\r\n <div class=\"coupon-brief__left-sec\">\r\n <div class=\"coupon-name fs-16 fw-600 mb-1\"\r\n [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\r\n {{ couponDetails.couponCode | uppercase }}\r\n </div>\r\n <div class=\"coupon-desc fs-12 text-secondary\">\r\n {{ couponDetails.discountDescription | titlecase }}\r\n </div>\r\n </div>\r\n <div class=\"coupon-brief__right-sec\">\r\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\"\r\n [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\r\n [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : 'not-allowed'}\"\r\n (click)=\"applyCoupon(couponDetails)\">\r\n Apply\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\r\n <div class=\"code-label\">Code</div>\r\n <div class=\"code-value\">{{ couponDetails.couponCode | uppercase }}</div>\r\n </div>\r\n\r\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\r\n <span class=\"validity\">\r\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\r\n {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}\r\n </span>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #showEmptyDiscounts>\r\n <div class=\"empty-screen-container\">\r\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n <div class=\"empty-screen__primary-text\">No Discount Coupons Available</div>\r\n <div class=\"empty-screen__secondary-text\">\r\n Looks like there are no discount coupons at the moment\r\n </div>\r\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #showEmptyScreen>\r\n <div class=\"empty-screen-container\">\r\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n <div class=\"empty-screen__primary-text\">No Coupons Available</div>\r\n <div class=\"empty-screen__secondary-text\">Looks like there are no coupons</div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n <div class=\"coupon-listing d-flex flex-column gap-3\" *ngIf=\"redemptionType === 'VOUCHERS'\">\r\n <ng-container *ngIf=\"listRedemptionVouchers?.vouchers?.length > 0; else showEmptyScreen\">\r\n <ng-container *ngFor=\"let voucher of listRedemptionVouchers?.vouchers; let idx = index\">\r\n <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\r\n\r\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\r\n <div class=\"coupon-brief__left-sec\">\r\n <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\r\n <div class=\"coupon-desc fs-12 text-secondary\">\r\n Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%' }}\r\n off on your payment\r\n </div>\r\n </div>\r\n <div class=\"coupon-brief__right-sec\">\r\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">Apply\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\r\n <div class=\"code-label\">Code</div>\r\n <div class=\"code-value\">{{ voucher.voucherCode }}</div>\r\n </div>\r\n\r\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\r\n <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\r\n <span class=\"separator text-secondary\">|</span>\r\n <span class=\"validity\">\r\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\r\n Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\r\n </span>\r\n </div>\r\n\r\n <!-- <div class=\"terms-link\">View terms & conditions</div> -->\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #showEmptyScreen>\r\n <div class=\"empty-screen-container\">\r\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n <div class=\"empty-screen__primary-text\">No Vouchers Available</div>\r\n <div class=\"empty-screen__secondary-text\">Looks like there are no vouchers</div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #CARTPAGE>\r\n <div class=\"container\">\r\n <div class=\"main-content\">\r\n <div class=\"promo-banner mb-3\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && ecomConfigs?.videoCallEnabled\">\r\n <!-- && ecomConfigs?.videoCallEnabled\" -->\r\n <div class=\"promo-text\">\r\n <h3>See It Before You Buy It</h3>\r\n <p>Experience our designs in detail via video call</p>\r\n </div>\r\n <button class=\"see-live-btn\" (click)=\"scheduleVideoCall(responseData?.orderedItems)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-video\">\r\n <path d=\"m22 8-6 4 6 4V8Z\" />\r\n <rect width=\"14\" height=\"12\" x=\"2\" y=\"6\" rx=\"2\" ry=\"2\" />\r\n </svg>\r\n SEE IT LIVE\r\n </button>\r\n </div>\r\n\r\n <div class=\"cart-items\">\r\n <div class=\"cart-header\">\r\n <h2>Your Cart</h2>\r\n </div>\r\n <ng-container\r\n *ngTemplateOutlet=\"CARTITEM;context:{data: cartType === 'SHOPPING' ? responseData?.orderedItems : trialCartItem}\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"sidebar\">\r\n <div class=\"reedem-section d-flex flex-column align-items-center\" *ngIf=\"cartType != 'TRIAL' && getUrl()\">\r\n <div class=\"justify-content-between d-flex align-items-center w-100 redeem-section-text\">Redeem Section Amount\r\n <div class=\"toogle-switch\">\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" role=\"switch\" id=\"flexSwitchCheckChecked\"\r\n [checked]=\"selectMatureScheme\" (change)=\"onToggleChange()\">\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"select_matured_text w-100 text-start cursor-pointer\"\r\n *ngIf=\"selectMatureScheme && !selectedRedemption\" (click)=\"selectScheme()\">\r\n Select Matured Scheme\r\n </div> -->\r\n <!-- <div class=\"select_matured_text d-flex flex-column gap-2 w-100 text-start cursor-pointer\"\r\n *ngIf=\"selectedRedemption\">\r\n Selected Scheme\r\n <div class=\"d-flex w-100 justify-content-between align-items-center group_invest\">Group Investment\r\n scheme-5000/M <span>Change</span></div>\r\n <div class=\"d-flex justify-content-between align-items-center w-100 redeem_amount\">Redeemable Amount\r\n <span>\u20B9{{selectedRedmpationData.selectedAmount}}</span>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div class=\"scheme-section\" *ngIf=\"selectMatureScheme\">\r\n <ng-container *ngTemplateOutlet=\"SCHEME_REDEMPTION\"></ng-container>\r\n </div>\r\n <div class=\"coupon-section\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && !referEarnExist\"\r\n (click)=\"openDialog(CouponList)\">\r\n <div class=\"coupon-left\">\r\n <div class=\"coupon-icon\"><mat-icon>percent</mat-icon></div>\r\n <span class=\"coupon-text\" *ngIf=\"!responseData.billdetails?.couponId\">Apply\r\n Coupon</span>\r\n <span class=\"coupon-text\" *ngIf=\"responseData.billdetails?.couponId\">Coupon\r\n Applied</span>\r\n </div>\r\n <svg *ngIf=\"!responseData.billdetails?.couponId\" xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\"\r\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" class=\"chevron-icon\">\r\n <path d=\"m9 18 6-6-6-6\" />\r\n </svg>\r\n <span *ngIf=\"responseData.billdetails?.couponId\"\r\n (click)=\"removeCoupon($event)\"><mat-icon>close</mat-icon></span>\r\n </div>\r\n\r\n <div class=\"plan-details-container p-3 rounded-4 bg-white text-dark voucher-details\"\r\n *ngIf=\"referEarnExist && this?.redemptionPoints?.availablePoints > 0\">\r\n <div class=\"fs-14 fw-500\">\r\n Rewards Available\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-start border-bottom pb-2\">\r\n <div class=\"avb_pts mt-2 mb-2\">\r\n <span class=\"fs-16 fw-500 total_points text-secondary\">\r\n <span class=\" fs-18 fw-600 text-dark\">{{(this?.redemptionPoints?.availablePoints || 0).toFixed(2)}}</span>\r\n pts\r\n </span>\r\n <div class=\"total_value fs-12 text-secondary\">\r\n = max \u20B9{{(this?.redemptionPoints?.pointsConvertedRupees || 0).toFixed(2)}} discount\r\n </div>\r\n </div>\r\n <div class=\"wallte_icon\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/777779c1775200561187wallet_(1).png\" alt=\"\">\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center mt-3\">\r\n <div class=\"redemable_text\">\r\n <div class=\"title_text\">\r\n <div class=\"fs-14 fw-500\">\r\n Redeem Points\r\n </div>\r\n <div class=\"fs-13 fs-400\">\r\n Use your points for discount\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"toggle_btn\">\r\n <label class=\"switch\">\r\n <input type=\"checkbox\" id=\"toggleSwitch\" [checked]=\"isPointsRedeeming\"\r\n (click)=\"onPointsRedeemingChange($event)\" />\r\n <span class=\"slider\"></span>\r\n </label>\r\n </div>\r\n </div>\r\n <div class=\"mt-3 success_selected w-100 applied-coupon-card\" *ngIf=\"isPointsRedeeming\">\r\n <div class=\"d-flex align-items-start gap-2\">\r\n <div class=\"success_icon\">\r\n <mat-icon class=\"d-flex justify-content-center align-items-center text-success\">check_circle</mat-icon>\r\n </div>\r\n <div class=\"success_text\">\r\n <div class=\"fs-13 fw-500\">\r\n You're saving \u20B9\r\n {{totalSavingAmt || 0}}\r\n </div>\r\n <div class=\"fs-12 fs-400 text-success\">\r\n {{totalSavingPoints}} points remaining after redemption\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Existing coupon row (keep as-is) -->\r\n <div class=\"coupon-section d-flex flex-column voucher-details\" [id]=\"data?.id\"\r\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist\">\r\n <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n <div class=\"coupon-left\">\r\n Apply Coupon\r\n </div>\r\n <div (click)=\"addRedemptionCoupon(RedemptionVouchers)\">View All</div>\r\n </div>\r\n\r\n <!-- Applied Coupon Success Banner -->\r\n <div class=\"applied-coupon-card w-100 mt-3 d-flex align-items-center justify-content-between\"\r\n *ngIf=\"selectedVoucherId\">\r\n <div class=\"applied-coupon-left d-flex align-items-center gap-3\">\r\n <mat-icon class=\"success-check\">check_circle</mat-icon>\r\n <div class=\"applied-coupon-info\">\r\n <div class=\"applied-coupon-code\">Coupon {{ selectedVoucherCode }} applied!</div>\r\n <div class=\"applied-coupon-saving\">You're saving\r\n <span *ngIf=\"this.couponValueType === 'AMOUNT'\">\u20B9 {{selectedVoucherAmount || 0}}</span>\r\n <span *ngIf=\"this.couponValueType === 'PERCENTAGE'\"> {{selectedVoucherPercentage || 0}}%</span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <div class=\"remove-coupon-btn fs-14 fw-500 text-secondary cursor-pointer\"\r\n (click)=\"removeRedemptionCoupon($event)\">Remove</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"delivery-section\" *ngIf=\"getUrl()\">\r\n <div class=\"delivery-header\">\r\n <mat-icon>gps_fixed</mat-icon>\r\n <span *ngIf=\"cartType === 'SHOPPING'\">Delivering to</span>\r\n <span *ngIf=\"cartType === 'TRIAL'\">Trial Location at</span>\r\n <span class=\"pincode\">{{pincode}}</span>\r\n <!-- <a class=\"change-link\">Change Pincode</a> -->\r\n </div>\r\n </div>\r\n\r\n <div class=\"summary-section\">\r\n <div class=\"summary-title\">Summary</div>\r\n\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span class=\"summary-label\">Subtotal</span>\r\n <span class=\"summary-value\">\u20B9{{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</span>\r\n </div>\r\n\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && referEarnExist && isPointsRedeeming\">\r\n <span class=\"summary-label\">Points Redeemed</span>\r\n <span class=\"summary-value\">- \u20B9{{ totalSavingAmt || 0 }}</span>\r\n </div>\r\n\r\n <div class=\"summary-row\"\r\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'AMOUNT' && appliedVoucher)\">\r\n <span class=\"summary-label\">Voucher Applied</span>\r\n <span class=\"summary-value\">- \u20B9{{ selectedVoucherAmount || 0 }}</span>\r\n </div>\r\n\r\n <div class=\"summary-row\"\r\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'PERCENTAGE' && appliedVoucher)\">\r\n <span class=\"summary-label\">Voucher Applied</span>\r\n <span class=\"summary-value\">- \u20B9{{ percentageReduced || 0 }}</span>\r\n </div>\r\n\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.discountAmount\">\r\n <span class=\"summary-label\">Discount Amount</span>\r\n <span class=\"summary-value\">\r\n {{('\u20B9' + (responseData?.billdetails?.discountAmount | number: '1.0-2')) }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span class=\"summary-label\">Shipping</span>\r\n <span class=\"summary-value\"\r\n [ngClass]=\"{'savings': !responseData?.billdetails?.deliveryCharges || responseData.billdetails.deliveryCharges <= 0}\">\r\n {{ (responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0) ? ('\u20B9' +\r\n (responseData.billdetails.deliveryCharges | number: '1.0-2')) : 'Free' }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span class=\"summary-label\">Estimated Tax</span>\r\n <span class=\"summary-value\">\u20B9{{((!responseData.billdetails?.couponId ?\r\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\r\n number: '1.0-2'}}</span>\r\n </div>\r\n\r\n <div class=\"summary-row total-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span class=\"summary-label\">Total</span>\r\n <!-- <span class=\"summary-value\">\u20B9{{ responseData?.totalAmount | number: '1.0-2' }}</span> -->\r\n <span class=\"total-value\" *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{ responseData?.totalAmount |\r\n number: '1.0-2' }}</span>\r\n\r\n <span class=\"total-value\" *ngIf=\"isPointsRedeeming\">\u20B9{{ (responseData?.totalAmount - (totalSavingAmt || 0)) |\r\n number: '1.0-2' }}</span>\r\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\r\n (selectedVoucherAmount || 0)) | number:\r\n '1.0-2'}}</span>\r\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\r\n (percentageReduced || 0)) | number:\r\n '1.0-2' }}</span>\r\n </div>\r\n\r\n <!-- Trial Cart Summary -->\r\n <ng-container *ngIf=\"cartType === 'TRIAL'\">\r\n <div class=\"summary-row\">\r\n <span class=\"summary-label\">Free Trial</span>\r\n <span class=\"summary-value\">\u20B90</span>\r\n </div>\r\n <div class=\"summary-row\">\r\n <span class=\"summary-label\">Service Charge</span>\r\n <span class=\"summary-value savings\">Free</span>\r\n </div>\r\n <div class=\"summary-divider\"></div>\r\n <div class=\"summary-row total-row\">\r\n <span class=\"summary-label\">Total</span>\r\n <span class=\"summary-value\">\u20B90</span>\r\n </div>\r\n <!-- <span class=\"total-value\" *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{ responseData?.totalAmount |\r\n number: '1.0-2' }}</span>\r\n\r\n <span class=\"total-value\" *ngIf=\"isPointsRedeeming\">\u20B9{{ (responseData?.totalAmount - (totalSavingAmt || 0)) |\r\n number: '1.0-2' }}</span>\r\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\r\n (selectedVoucherAmount || 0)) | number:\r\n '1.0-2'}}</span>\r\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\r\n (percentageReduced || 0)) | number:\r\n '1.0-2' }}</span> -->\r\n </ng-container>\r\n </div>\r\n <button class=\"place-order-btn\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\r\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n *ngIf=\"cartType === 'SHOPPING'\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\r\n Shopping'}}</button>\r\n <button class=\"place-order-btn mt-0\" (click)=\"edit ? '' : proceedToCheckout()\" simpoButtonDirective\r\n *ngIf=\"cartType === 'SHOPPING'\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout\r\n Cart'}}</button>\r\n <button class=\"place-order-btn mt-0\" simpoButtonDirective *ngIf=\"cartType === 'TRIAL'\"\r\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\" (click)=\"bookAppointment()\">BOOK\r\n APPOINTMENT</button>\r\n\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #CHECKOUTPAGE>\r\n <div class=\"checkout-left-panel\">\r\n <div class=\"checkout-main-content\">\r\n <!-- <div class=\"delivery-options\">\r\n <div class=\"delivery-option active\">\r\n <div class=\"delivery-icon\"></div>\r\n HOME DELIVERY\r\n </div>\r\n <div class=\"delivery-option\">\r\n <div class=\"delivery-icon\"></div>\r\n STORE PICK-UP\r\n </div>\r\n </div> -->\r\n\r\n <div class=\"section-title\">Shipping Address</div>\r\n\r\n <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\r\n <div class=\"address-info\">\r\n <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\r\n <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\r\n {{defaultAddress?.stateName}}</div>\r\n <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"addLinks h-100\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\r\n <mat-icon>add</mat-icon>\r\n </div>\r\n\r\n <button class=\"change-address-btn\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">CHANGE OR ADD ADDRESS</button>\r\n\r\n <button class=\"btn w-100 mt-1 payment-btn\" (click)=\"proceedToPayment()\" simpoButtonDirective\r\n *ngIf=\"defaultAddress && !placeOrderLoader\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\">\r\n Place Order\r\n </button>\r\n <button class=\"btn w-100 mt-1 payment-btn\" simpoButtonDirective *ngIf=\"defaultAddress && placeOrderLoader\"\r\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\">\r\n Loading...\r\n </button>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"checkout-right-panel\">\r\n <div class=\"order-summary\">\r\n <div class=\"summary-title\">Order Summary</div>\r\n\r\n <div class=\"checkout-product\">\r\n <div class=\"product-item\" *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n <img [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-image\"\r\n alt=\"\">\r\n <div class=\"product-details\">\r\n <div class=\"product-name\">{{item.itemName}}</div>\r\n <div class=\"product-quantity\">Quantity: {{item.quantity}}</div>\r\n <div class=\"product-price\">\u20B9{{(item.sellingPrice * item.quantity) | number: '1.0-2'}}</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"price-breakdown\">\r\n <div class=\"price-row\">\r\n <span>Total Price</span>\r\n <span>\u20B9{{(responseData?.billdetails?.totalNetValue\r\n ?? 0) | number: '1.0-2'}}</span>\r\n </div>\r\n <div class=\"price-row\">\r\n <span>Total Tax</span>\r\n <span>\u20B9{{((!responseData.billdetails?.couponId ?\r\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\r\n number:\r\n '1.0-2'}}</span>\r\n </div>\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && cartInfo?.billdetails?.orraSchemeRedeemedAmount\">\r\n <span class=\"summary-label\">Redeem Amount</span>\r\n <span class=\"summary-value\">\u20B9{{(cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\r\n '1.0-2'}}</span>\r\n </div>\r\n\r\n <div class=\"price-row discount\"\r\n *ngIf=\"responseData?.billdetails?.discountAmount && subIndustryName != 'Ecommerce Jewellery'\">\r\n <span>Coupon Discount</span>\r\n <span>- \u20B9{{responseData?.billdetails?.discountAmount\r\n | number: '1.0-2'}}</span>\r\n </div>\r\n <div class=\"price-row\"\r\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n <span>Delivery Charge</span>\r\n <span>{{responseData.billdetails.deliveryCharges\r\n |\r\n number: '1.0-2'}}</span>\r\n </div>\r\n <div class=\"price-row total\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span>TOTAL AMOUNT</span>\r\n <span *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{(responseData?.totalAmount ?? 0) | number:\r\n '1.0-2'}}</span>\r\n <span *ngIf=\"isPointsRedeeming\">\u20B9{{(responseData?.totalAmount - (totalSavingAmt || 0)) | number:\r\n '1.0-2'}}</span>\r\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\r\n (selectedVoucherAmount || 0)) | number:\r\n '1.0-2'}}</span>\r\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\r\n (responseData?.totalAmount * (selectedVoucherPercentage / 100) || 0)) | number:\r\n '1.0-2' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #CARTITEM let-products=\"data\">\r\n <div class=\"cart-item\" *ngFor=\"let item of products\" [style.color]=\"fontColor\">\r\n <div class=\"item-left\">\r\n <div class=\"item-image\">\r\n <img class=\"item-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n (click)=\"goToProductDetails(item)\" style=\"cursor: pointer;\">\r\n </div>\r\n <div class=\"item-details\">\r\n <h3 class=\"item-title\">{{item.itemName}}</h3>\r\n <div class=\"item-subtitle\" *ngIf=\"item.itemVariant\">\r\n <span *ngFor=\"let varient of getKeys(item.itemVariant.properties); let last = last\">\r\n {{ item.itemVariant.properties[varient] | titlecase }}<span *ngIf=\"!last\">, </span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"item-right\">\r\n <div class=\"quantity-control\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <button class=\"qty-btn px-2\" (click)=\"decreaseQty(item)\" [disabled]=\"item.quantity === 1\">\r\n <mat-icon>remove</mat-icon>\r\n </button>\r\n <span class=\"qty-value px-3\">{{item.quantity}}</span>\r\n <button class=\"qty-btn px-2\" (click)=\"increaseQty(item)\">\r\n <mat-icon>add</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"item-price\">\r\n \u20B9{{item.sellingPrice | number: '1.0-2'}}\r\n </div>\r\n\r\n <div class=\"delete-btn-circle\" (click)=\"removeItem(item)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trash-2\">\r\n <path d=\"M3 6h18\" />\r\n <path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\" />\r\n <path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\" />\r\n <line x1=\"10\" x2=\"10\" y1=\"11\" y2=\"17\" />\r\n <line x1=\"14\" x2=\"14\" y1=\"11\" y2=\"17\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #EMPTYITEM>\r\n <section class=\"empty-cart w-100 d-flex align-items-center justify-content-center\">\r\n <div class=\"empty-cart-container d-flex flex-column\">\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"data?.content?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <div class=\"cart-text content-side\">\r\n <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"d-flex justify-content-center\"\r\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <button class=\"place-order-btn mx-auto w-fit\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\r\n [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\r\n Shopping'}}</button>\r\n </div>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #SCHEME_REDEMPTION>\r\n <div class=\"modal-body\">\r\n <div class=\"scheme-option\" *ngFor=\"let scheme of schemeList\" (click)=\"redeemScheme(scheme, false)\"\r\n [style.borderColor]=\"cartInfo.billdetails.orraSchemeCode ? styles?.background?.color : ''\">\r\n <label for=\"individual\" class=\"scheme-card\">\r\n <div class=\"scheme-info d-flex gap-1\">\r\n <div class=\"form-check-radio\">\r\n <input class=\"form-check-input-radio\" type=\"radio\" name=\"flexRadioDefault\" id=\"flexRadioDefault2\">\r\n </div>\r\n <div class=\"right-side\">\r\n <div class=\"scheme-name\">\r\n <div class=\"scheme-title\">Individual Investment Scheme</div>\r\n <div class=\"scheme-monthly\">\u20B98000/M</div>\r\n </div>\r\n <div class=\"scheme-details\">\r\n <span class=\"scheme-id\">GPP Id: {{scheme.GPPId}}</span>\r\n <!-- <span class=\"scheme-maturity\">Maturity Date: 12 April 2024</span> -->\r\n </div>\r\n <div class=\"scheme-amount\">\u20B9{{scheme.amount}}</div>\r\n </div>\r\n </div>\r\n </label>\r\n </div>\r\n <div class=\"reedem_error d-flex justify-content-center align-items-center\" *ngIf=\"showReedemError\">\r\n Please add more \u20B9{{vaildAmount}} to reedem this scheme\r\n </div>\r\n </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.reedem-section{padding:10px 15px;border-radius:15px;background:#f6f3f9;box-shadow:#b2b2ca80 2px 2px 6px;font-weight:700;font-size:13px}.redeem-section-text{font-size:.9rem;font-weight:700}.form-check-input:checked{background-color:#28a745!important;border-color:#28a745!important}.form-check-input:focus{border-color:#28a745!important;outline:0;box-shadow:none!important}.close-btn{background:none;border:none;font-size:24px;color:#6b7280;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.close-btn:hover{color:#374151}.select_matured_text{font-size:.8rem!important;margin-top:10px;color:#05aacf}.position-relative{position:relative}.cart-parent{display:flex;margin-top:15px}.left-panel{width:65%;padding-right:5rem;border-right:1px solid #E9E9E9}.timeline{cursor:pointer}.cart-items{background:#fff;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.cart-header{padding:16px 24px;border-bottom:1px solid #e2e8f0;background:#f8fafc}.cart-header h2{margin:0;font-size:18px;font-weight:500;color:#0f172a}.cart-item{display:flex!important;align-items:center;justify-content:space-between;border-bottom:1px solid #e2e8f0;gap:20px;padding:0 8px;transition:background .2s}.cart-item:hover{background:#fbfcfe}.item-left{display:flex;align-items:center;flex:1}.item-right{display:flex;align-items:center;padding:15px;gap:32px}.item-image img{width:64px;height:64px;border-radius:12px;object-fit:cover;border:1px solid #f1f5f9}.item-details{display:flex;flex-direction:column;gap:4px}.item-title{margin:0;font-size:15px;font-weight:600;color:#0f172a;line-height:1.4}.item-subtitle{font-size:13px;color:#64748b;font-weight:400}.quantity-control{display:flex;align-items:center;border:1.5px solid #e2e8f0;border-radius:7px;overflow:hidden;height:38px;background:#fff;width:fit-content}.qty-btn{width:38px;height:100%;border:none;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#475569;transition:all .2s ease}.qty-btn:hover{background:#f8fafc;color:#0f172a}.qty-btn mat-icon{font-size:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center}.qty-value{width:32px;height:100%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;color:#0f172a;border-left:1.5px solid #e2e8f0;border-right:1.5px solid #e2e8f0}.item-price{font-size:18px;font-weight:700;color:#0f172a;min-width:60px;text-align:right;letter-spacing:-.01em}.delete-btn-circle{width:36px;height:36px;border-radius:50%;border:1px solid #fee2e2;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#ef4444;transition:all .2s ease}.delete-btn-circle:hover{background:#fef2f2;border-color:#fecaca;transform:scale(1.05);color:#dc2626}.delete-btn-circle svg{width:18px;height:18px}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%;padding-left:5rem}.my-bag{font-size:16px;font-weight:600;color:#000;margin-left:8px}.my-bag span{color:#939393}.coupons{display:flex;justify-content:space-between;padding:10px;border-radius:4px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px;margin-top:10px;cursor:pointer}.coupon-list-section{padding:15px;width:400px;z-index:10000001!important}.coupon-list-section .search{padding:8px;border:1px solid lightgray;border-radius:20px;display:flex;justify-content:space-between}.coupon-list-section input{border:none;outline:none;width:90%}.coupon-list-section .coupon-list{height:60vh;width:100%}.item-parent{margin:10px 0;min-height:120px}.lh-23{line-height:23px;margin-left:10px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0;cursor:pointer}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer;font-size:18px}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important;height:calc(100vh - 170px)}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;width:100%;text-align:center}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff;cursor:pointer}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.see-live-btn{white-space:nowrap!important}.left-panel{width:100%;padding-right:0rem}.right-panel{width:100%;z-index:1000;padding-left:0rem}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap;display:none}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}.empty-cart-container{height:calc(100vh - 130px)}.coupons-listing-section{width:100vw!important}.checkoutPage{flex-direction:column}.checkout-left-panel,.checkout-right-panel{width:100%!important}}.mobile-fixed{color:#fff}.coupons-listing-section{height:100vh;padding-top:0;position:relative;width:390px;z-index:100;background:#d3d3d354}.coupons-listing-section .coupon-heading{display:flex;align-items:center;background-color:#fff;padding:15px 20px;width:100%;box-sizing:border-box}.coupons-listing-section .coupon-heading img{height:15px;width:15px;position:relative;top:2px;cursor:pointer}.coupons-listing-section .coupon-heading .header-text{font-size:16px;color:#000;font-weight:600;margin-left:15px;position:relative;top:-3px;right:15px;cursor:pointer}.coupons-listing-section .coupon-search-sec{width:90%;box-sizing:border-box;margin:10px auto;border:1px solid lightgray;padding:10px;border-radius:10px;background-color:#fff;display:flex;font-size:16px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec input{border:none;outline:none;background-color:transparent;width:95%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-search-sec input:focus{font-size:14px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec .back-btn{position:relative;top:3px;cursor:pointer}.coupons-listing-section .coupon-search-sec .apply-btn-search{font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing{height:72%;overflow-y:auto;width:90%;margin:20px auto}.coupons-listing-section .coupon-listing .coupon-details{padding:15px;margin-bottom:15px;background-color:#edfffa;border-radius:10px;border:1px solid lightgray}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading{display:flex;flex-direction:column;gap:25px}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief{display:flex;justify-content:space-between;width:100%}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-name{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-desc{padding:5px 0;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .show-details-btn{cursor:pointer}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec{display:flex;justify-content:flex-end}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec .apply-offer-btn{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-toggle-details-btn{text-align:left;text-decoration:underline;width:100%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details-divider{border-top:2px solid lightgray;opacity:.3;margin:15px 0}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-terms{font-size:14px;color:#000;font-weight:400}.empty-screen-container{height:100%;width:85%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-screen-container .empty-screen__primary-text{font-size:22px;color:#000;font-weight:400}.empty-screen-container .empty-screen__secondary-text{text-align:center;padding:10px 0;font-size:16px;color:#000;font-weight:400}.empty-screen-container .empty-screen__button{width:90%;background-color:#fff;border-radius:8px;text-align:center;padding:10px;margin:10px auto 0;cursor:pointer;font-size:18px;color:#000;font-weight:400}.box-shadow{box-shadow:#00000029 0 1px 4px}.main-content{border-radius:12px;padding:0 30px 30px;width:100%;overflow:scroll;height:calc(100vh - 150px)}.delivery-options{display:flex;gap:20px;margin-bottom:30px}.delivery-option{padding:12px 24px;border:2px solid #e0e0e0;border-radius:25px;background:#fff;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:500;transition:all .2s}.delivery-option.active{background:#f0e6ff;border-color:#8b5cf6;color:#7c3aed}.delivery-option:hover{border-color:silver}.delivery-icon{width:16px;height:16px;background:#8b5cf6;border-radius:3px}.section-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.shipping-info{border-radius:10px;padding:20px;margin-bottom:20px;border:1px solid rgb(238,232,255);box-shadow:#0000000a 0 4px 8px}.delivery-date{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.delivery-date-text{color:#666;font-weight:500}.change-date-btn{color:#e91e63;background:none;border:none;font-weight:600;cursor:pointer;text-transform:uppercase;font-size:12px;letter-spacing:.5px}.address-info{margin-bottom:15px}.address-name{font-weight:700;margin-bottom:8px;color:#000}.address-details{color:#666;margin-bottom:8px}.mobile-number{font-weight:700;color:#000;font-size:15px}.change-address-btn{font-size:1rem!important;font-weight:700!important;padding:6px;background:#fff;border:1px solid rgb(229,221,255);border-radius:8px;color:#000;cursor:pointer;transition:all .2s;box-shadow:#0000000a 0 4px 8px}.change-address-btn:hover{border-color:#8b5cf6;color:#8b5cf6}.billing-section{margin-top:40px}.billing-options{display:flex;flex-direction:column;gap:15px;margin-top:20px}.billing-option{display:flex;align-items:center;gap:12px;padding:15px;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .2s}.billing-option.active{background:#f0e6ff;border-color:#8b5cf6}.radio-btn{width:20px;height:20px;border:2px solid #e0e0e0;border-radius:50%;position:relative}.billing-option.active .radio-btn{border-color:#8b5cf6}.billing-option.active .radio-btn:after{content:\"\";width:10px;height:10px;background:#8b5cf6;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.order-summary{border-radius:12px;padding:25px;width:75%}.summary-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.product-item{display:flex;gap:15px;margin-bottom:20px;border-bottom:1px solid #f0f0f0;border-radius:7px;background:#fff;padding:15px}.product-item:last-of-type{border-bottom:none;margin-bottom:30px;padding-bottom:0}.product-image{max-width:110px;width:100%;height:100%;border-radius:8px}.product-details{flex:1}.product-name{font-weight:500;margin-bottom:4px;color:#2d3748;font-size:14px}.product-quantity{color:#666;font-size:12px;margin-bottom:8px}.product-price{font-weight:600;color:#2d3748}.delivery-info{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:#8b5cf6}.delivery-icon-small{width:12px;height:12px;background:#8b5cf6;border-radius:2px}.price-breakdown{border-top:1px solid #f0f0f0;padding-top:20px}.price-row{display:flex;justify-content:space-between;margin-bottom:12px;color:#666}.price-row.total{font-weight:600;color:#2d3748;font-size:16px;margin-top:15px;padding-top:15px;border-top:1px solid #f0f0f0}.discount{color:#22c55e!important}@media (max-width: 768px){.container{grid-template-columns:1fr;padding:15px;gap:20px}.main-content,.order-summary{padding:20px;width:100%}.delivery-options{flex-direction:column;gap:10px}}.checkout-left-panel{width:65%;display:flex;justify-content:center}.checkout-right-panel{width:35%;display:flex;justify-content:center;background-color:#f9f9fa}.checkout-product{max-height:50vh;overflow:scroll}.mt-1{margin-top:1rem!important}.payment-btn{box-shadow:#0000000a 0 4px 8px}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px;height:25vh!important;margin-bottom:20px}.addLinks mat-icon{border:1px solid rgb(219,223,225);display:flex;border-radius:100%;align-items:center;justify-content:center;font-size:16px;color:#dbdfe1}.change-pincode{display:flex;gap:10px}.change-pincode mat-icon{font-size:18px;align-items:center;justify-content:center;display:flex}.change-pincode span{font-size:14px}.fs-13{font-size:13px}.fs-12{font-size:12px}.fs-18{font-size:18px}.b-1-b{border-width:0px 1px;border-style:solid;border-color:#000}.container{max-width:unset;padding:24px;display:flex;gap:24px;width:100%!important}.main-content{background:#fff;border-radius:12px;width:70%}.promo-banner{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;border-radius:8px;border:1px solid #e2e8f0}.promo-text h3{font-size:16px!important;font-weight:500;margin-bottom:4px}.promo-text p{font-size:.9rem!important;margin-bottom:0!important;color:#64748b}.see-live-btn{background:#fff;border:1px solid #e2e8f0;font-weight:600;color:#000;padding:8px 16px;border-radius:8px;font-size:12px!important;cursor:pointer;display:flex;align-items:center;gap:8px;width:max-content!important;transition:all .2s ease;box-shadow:0 1px 2px #0000000d}.see-live-btn:hover{background:#f8fafc;border-color:#cbd5e1;transform:translateY(-1px)}.see-live-btn svg{color:#6366f1}.cart-item{display:flex;gap:16px;position:relative}.cart-item:last-child{border-bottom:none}.item-image{width:15%;height:100px;border-radius:8px;object-fit:cover;display:flex;align-items:center;justify-content:center}.item-details{flex:1}.item-title{font-weight:500;margin-bottom:8px}.item-price{display:flex;align-items:center;gap:8px}.current-price{font-size:1rem;font-weight:600}.original-price{font-size:1rem;text-decoration:line-through}.discount{background:#fef3c7;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:500}.item-code{font-size:12px;color:#9ca3af;margin-bottom:8px}.item-options{display:flex;gap:16px;font-size:14px;color:#6b7280;margin-bottom:12px}.delivery-info{font-size:12px;color:#8b5cf6}.pickup-info{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:5px 15px;margin-top:12px;display:flex;align-items:center;cursor:pointer;width:max-content;gap:20px}.pickup-text{font-size:.9rem;color:#374151}.remove-btn{position:absolute;top:16px;right:0;width:20px!important;height:20px;background:#000;color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px!important}.sidebar{display:flex;flex-direction:column;gap:16px;width:32%}.coupon-section{border-radius:8px;padding:10px 15px;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .2s ease}.coupon-section:hover{border-color:#cbd5e1;background-color:#f8fafc}.chevron-icon{color:#94a3b8;transition:transform .2s ease}.coupon-section:hover .chevron-icon{transform:translate(2px);color:#64748b}.scheme-section{border-radius:12px;padding:10px 15px;cursor:pointer}.coupon-left{display:flex;align-items:center;gap:12px}.coupon-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center}.coupon-icon mat-icon{font-size:17px;width:17px!important;height:19px!important}.coupon-text{font-weight:700;font-size:.9rem}.delivery-section{background:#fff;border-radius:12px;padding:10px 15px;box-shadow:#b2b2ca80 2px 2px 6px;background:#f6f3f9}.delivery-header{display:flex;align-items:center;gap:12px;margin-bottom:4px}.delivery-header span{font-size:.9rem;font-weight:700}.delivery-header mat-icon{width:20px;height:20px;font-size:17px;position:relative;top:2px}.delivery-icon{width:20px;height:20px;background:#8b5cf6;border-radius:50%}.pincode{font-weight:600;color:#111827}.change-link{color:#ec4899;font-size:.9rem;text-decoration:none;margin-left:auto}.summary-section{background:#fff;border-radius:8px;padding:20px;border:1px solid #e2e8f0}.summary-title{font-size:16px;font-weight:700;color:#0f172a;margin-bottom:20px;letter-spacing:-.01em}.summary-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.summary-row:last-child{margin-bottom:0}.summary-label{font-size:14px;font-weight:400;color:#64748b}.summary-value{font-size:14px;font-weight:500;color:#0f172a}.summary-divider{height:1px;background:#f1f5f9;margin:16px 0;width:100%}.total-row .summary-label{font-size:16px;font-weight:600;color:#0f172a}.total-row .summary-value{font-size:16px;font-weight:700;color:#0f172a}.total-row{border-top:1px solid #e2e8f0;padding-top:15px;margin-top:15px}.total-label{font-weight:600;font-size:16px}.total-value{font-weight:700;font-size:18px}.place-order-btn{background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;border:none;border-radius:12px;padding:9px 10px;font-size:.9rem!important;font-weight:600;cursor:pointer;margin-top:10px;text-transform:uppercase}.place-order-btn:hover{opacity:.9}.chain-icon,.earring-icon{width:60px;height:60px;filter:sepia(1) hue-rotate(30deg) saturate(2)}.item-img{width:100%;height:100%;object-fit:cover}.mt-0{margin-top:0!important}select{outline:none;border-radius:5px;padding:2px;width:20%;border:none;box-shadow:#9999994d 2px 2px 6px;cursor:pointer}.cart-tab-parent{display:flex;justify-content:center}.cart-tabs{gap:10px;display:flex;justify-content:center;align-items:center;width:max-content;border-radius:8px;border:1px solid #e2e8f0}.cart-tabs div{padding:7px 10px;cursor:pointer;font-size:14px}.selected-cart-tab{margin:6px;background:#f1f5f9;border-radius:5px;color:#000!important;font-weight:500}.checkout-main-content{width:50%;padding:30px;border-radius:12px}@media screen and (max-width: 475px){.main-content{padding:0;height:auto!important}.cart-item{flex-direction:column!important;align-items:flex-start!important;padding:16px 12px!important;gap:16px!important}.item-left{width:100%!important;gap:16px!important;align-items:flex-start!important}.item-image{width:86px!important;height:86px!important;flex-shrink:0!important}.item-right{width:100%!important;justify-content:space-between!important;padding:0!important;gap:12px!important;margin-top:4px!important}.item-price{flex:1!important;text-align:right!important;margin-right:8px!important;font-size:16px!important}.item-title{font-size:14px!important;-webkit-line-clamp:2!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important}.quantity-control{height:34px!important}.qty-btn{width:34px!important}.qty-value{width:28px!important;font-size:13px!important}.no-items{height:86vh;overflow:hidden;margin:0}.checkout-main-content{width:100%}.container{padding:0!important}.pickup-info{display:none}.container{display:flex;flex-direction:column}.promo-banner{gap:10px}select{width:50%}.main-content,.sidebar{width:100%}.vouchers-listing-section{min-width:unset!important;width:100vw!important}.separator{display:none!important}.coupon-meta{display:grid!important;grid-template-columns:1fr 1fr!important}}.group_invest{color:#000;font-size:.8rem}.reedem_error{color:red}.group_invest span{color:#05aacf}.redeem_amount{padding:2%;border-radius:4px;background:#fff;margin-top:2%;color:#000;font-size:.8rem}.redeem_amount span{color:#0dc577}.w-fit{width:fit-content!important}.modal-body{padding-bottom:0;overflow-y:scroll;max-height:300px;padding:0!important}.scheme-option{margin-bottom:16px}.scheme-option input[type=radio]:checked+.scheme-card{border-color:#06b6d4;background:#f0f9ff;position:relative}.scheme-option input[type=radio]:checked+.scheme-card:before{content:\"\";position:absolute;top:20px;left:20px;width:20px;height:20px;border:2px solid #06b6d4;border-radius:50%;background:#fff}.scheme-option input[type=radio]:checked+.scheme-card:after{content:\"\";position:absolute;top:26px;left:26px;width:8px;height:8px;background:#06b6d4;border-radius:50%}.scheme-card{justify-content:space-between;padding:10px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff;width:100%}.scheme-card:hover{border-color:#d1d5db;background:#f9fafb}.form-check-radio{width:10%}.scheme-title{font-size:12px;font-weight:600;color:#111827;margin-bottom:8px}.scheme-details{display:flex;gap:25px;margin-bottom:20px}.scheme-name{display:flex;justify-content:space-between}.scheme-details span{font-size:12px;color:#0000004d}.scheme-monthly{font-size:14px;font-weight:600;color:#111827;min-width:100px;text-align:right}.right-side{width:90%}.scheme-amount{font-weight:700}@media screen and (min-width: 700px){.cart-items{max-height:500px;overflow:scroll}}.add-to-cart-parent{width:max-content;border:1px solid #000000;border-radius:8px}.cursor{cursor:pointer}.cart-text{max-width:600px;margin:0 auto;text-align:center}.cart-text div{word-break:break-word;overflow-wrap:break-word;white-space:normal}.switch{position:relative;display:inline-block;width:45px;height:20px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:34px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:3px;bottom:2px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#4caf50}input:checked+.slider:before{transform:translate(24px)}.vouchers-listing-section{position:relative;width:fit-content;min-width:500px;z-index:100;background:#fff;height:100vh}.vouchers-listing-section .coupon-heading{border-bottom:1px solid #eee}.vouchers-listing-section .coupon-listing{padding:12px 16px;overflow-y:auto;height:calc(97vh - 100px)}.voucher-details{background:#fff;border-radius:12px;padding:14px;box-shadow:0 1px 4px #00000042}.voucher-details .coupon-brief .apply-offer-btn{background:#111;color:#fff;border-radius:10px;padding:6px 16px}.voucher-details .coupon-code-box{border:1.5px dashed #bbb;border-radius:8px;padding:8px 12px;margin-bottom:10px}.voucher-details .coupon-code-box .code-label{font-size:11px;color:#888;margin-bottom:2px}.voucher-details .coupon-code-box .code-row .code-value{font-weight:700;font-size:15px;letter-spacing:1px}.voucher-details .coupon-meta .clock-icon{font-size:14px;height:14px;width:14px;vertical-align:middle}.applied-coupon-card{background:#f0fff8;border-radius:12px;padding:12px 16px}.applied-coupon-card .applied-coupon-left .success-check{color:#22c55e;font-size:22px}.applied-coupon-card .applied-coupon-left .applied-coupon-code{font-weight:700;font-size:14px}.applied-coupon-card .applied-coupon-left .applied-coupon-saving{font-size:13px;color:#097d5f;margin-top:2px}.active-type{background:#111!important;color:#fff!important}.redemption-type{text-align:center;border-radius:10px;padding:6px 16px;background:#d3d3d36b;width:-webkit-fill-available!important}.wallte_icon{background:#000;border-radius:50px;padding:5px 9px 7px}.wallte_icon img{width:18px;height:18px}.fw-600{font-weight:600}.coupon-type{width:fit-content!important;border-radius:26px!important;background:transparent!important;border:1px solid #afafaf;color:#393838;text-align:center;padding:6px 16px}.active-coupon{background:transparent!important;border:2px solid black!important;color:#000!important}.my-close-btn{position:absolute!important;top:10px!important;right:10px!important}\n"] }]
10002
+ ], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n <ng-container *ngIf=\"data\">\r\n <section [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\"\r\n [attr.class]=\"isMobile ? 'py-5 position-relative' : 'position-relative'\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\"\r\n [ngClass]=\"!responseData?.orderedItems?.length ? 'no-items' : ''\">\r\n <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\"\r\n [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\"\r\n *ngIf=\"responseData?.orderedItems?.length && currentTab === 'ADDRESS'\">\r\n <span class=\"timeline\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline isActive\">Address</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline\" style=\"cursor: auto;\">Payment</span>\r\n </div>\r\n <div class=\"cart-tab-parent w-100\" *ngIf=\"currentTab == 'BAG' && ecomConfigs?.appointmentBookingEnabled\">\r\n <!-- && ecomConfigs?.appointmentBookingEnabled\" -->\r\n <div class=\"cart-tabs\" [id]=\"data?.id\">\r\n <div class=\"selected-cart-tab\" [ngClass]=\"{'selected-cart-tab': cartType==='SHOPPING'}\"\r\n (click)=\"cartType='SHOPPING'\">Shopping Cart ({{responseData?.orderedItems?.length ?? 0}})</div>\r\n <div [ngClass]=\"{'selected-cart-tab': cartType==='TRIAL'}\" (click)=\"cartType='TRIAL'\">Trial Cart\r\n ({{trialCartItem?.length ?? 0}})</div>\r\n </div>\r\n </div>\r\n <div class=\"cart-parent\" [spacingHorizontal]=\"stylesLayout\" *ngIf=\"currentTab === 'BAG'\" [id]=\"data?.id\"\r\n [simpoAnimation]=\"styles?.animation\">\r\n <ng-container>\r\n <ng-container *ngIf=\"cartType === 'SHOPPING'\">\r\n <ng-container\r\n *ngTemplateOutlet=\"(responseData?.orderedItems?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"cartType === 'TRIAL'\">\r\n <ng-container *ngTemplateOutlet=\"(trialCartItem?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex checkoutPage\"\r\n *ngIf=\"(responseData?.orderedItems?.length || 0) > 0 && currentTab === 'ADDRESS'\">\r\n <ng-container *ngTemplateOutlet=\"CHECKOUTPAGE\">\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [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\r\n </section>\r\n </ng-container>\r\n <ng-container *ngIf=\"!data\">\r\n <section class=\"cart-window\">\r\n <div class=\"heading-large lh-2 mb-3 header-sec\">\r\n <div class=\"d-flex align-items-center\">\r\n <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\r\n <span>Your Cart</span>\r\n </div>\r\n <div class=\"saving\"></div>\r\n </div>\r\n <div class=\"offers\">\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\r\n <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\r\n <span>Avail Offers / Coupons</span>\r\n </div>\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n <div class=\"small-items\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems\">\r\n <div class=\"small-item\">\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"small-product-img\"\r\n [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n (click)=\"goToProductDetails(item)\">\r\n </div>\r\n <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\r\n <div class=\"small-item-quantity\">\r\n <span class=\"cursor\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\">+</span>\r\n </div>\r\n <div class=\"small-item-price\">\r\n <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.sellingPrice) | number: '1.0-2'}}\r\n </div>\r\n <!-- <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"fotter-sec\">\r\n <div class=\"delivery-add d-flex\">\r\n <mat-icon>home</mat-icon>\r\n <div class=\"address\">Tetsting</div>\r\n </div>\r\n <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span\r\n style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span>\r\n {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\r\n </div>\r\n </section>\r\n </ng-container>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n<ng-template #CouponList>\r\n <section class=\"coupons-listing-section\">\r\n <div class=\"coupon-heading\">\r\n <div class=\"back-btn\" (click)=\"closeDialogRef()\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"header-text\">Apply Coupon</div>\r\n </div>\r\n <!-- <div class=\"coupon-search-sec\">\r\n <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\r\n <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\r\n </div> -->\r\n <div class=\"coupon-listing\">\r\n <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\r\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\r\n <div class=\"coupon-details\"\r\n [ngStyle]=\"{'background-color': !couponDetails.applicable ? '#FFF2F4' : '#EDFFFA'}\"\r\n *ngIf=\"couponDetails?.status\">\r\n <div class=\"details__coupon-heading\">\r\n <div class=\"coupon-brief\">\r\n <div class=\"coupon-brief__left-sec\">\r\n <div class=\"coupon-name\" [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\r\n {{ couponDetails.couponCode | uppercase }}</div>\r\n <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\r\n </div>\r\n <div class=\"coupon-brief__right-sec\">\r\n <div class=\"apply-offer-btn\" [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\r\n [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : ''}\"\r\n (click)=\"applyCoupon(couponDetails)\">Apply</div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\r\n <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\r\n <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\r\n </div> -->\r\n </div>\r\n <ng-container>\r\n <!-- *ngIf=\"couponDetails.status\" -->\r\n <div class=\"details-divider\"></div>\r\n <ul class=\"details__coupon-terms\">\r\n <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\r\n </ul>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #showEmptyScreen>\r\n <div class=\"empty-screen-container\">\r\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n <div class=\"empty-screen__primary-text\">No Coupon Available</div>\r\n <div class=\"empty-screen__secondary-text\">\r\n Looks like there are no coupons at the moment\r\n </div>\r\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\r\n </div>\r\n </ng-template>\r\n </div>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #RedemptionVouchers>\r\n <section class=\"vouchers-listing-section d-flex flex-column\">\r\n <div class=\"coupon-heading d-flex align-items-center gap-2 p-3 fs-18 fw-600 border-bottom\">\r\n <div class=\"back-btn cursor-pointer d-flex align-items-center\" (click)=\"closeDialogRef()\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"header-text\">Coupons & Vouchers</div>\r\n </div>\r\n\r\n <!-- <div class=\"d-flex align-items-center tab-container justify-content-between gap-2 p-3\">\r\n <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'COUPONS'}\"\r\n (click)=\"redemptionType = 'COUPONS'\">\r\n Coupons\r\n </div>\r\n <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'VOUCHERS'}\"\r\n (click)=\"redemptionType = 'VOUCHERS'\">\r\n Vouchers\r\n </div>\r\n </div> -->\r\n\r\n <div class=\"coupon-listing d-flex flex-column gap-3 pt-3\" *ngIf=\"redemptionType === 'COUPONS'\">\r\n <div class=\"d-flex align-items-center tab-container gap-3\">\r\n <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\r\n [ngClass]=\"{'active-coupon': redemptionCouponType === 'REWARDS'}\" (click)=\"redemptionCouponType = 'REWARDS'\">\r\n Rewards\r\n </div>\r\n <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\r\n [ngClass]=\"{'active-coupon': redemptionCouponType === 'DISCOUNTS'}\"\r\n (click)=\"redemptionCouponType = 'DISCOUNTS'\">\r\n Discounts\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"redemptionCouponType === 'REWARDS'\">\r\n <ng-container *ngIf=\"(listRedemptionCoupons?.vouchers?.length > 0) ; else showEmptyScreen\">\r\n <ng-container *ngFor=\"let voucher of listRedemptionCoupons?.vouchers; let idx = index\">\r\n <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\r\n\r\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\r\n <div class=\"coupon-brief__left-sec\">\r\n <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\r\n <div class=\"coupon-desc fs-12 text-secondary\">\r\n Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%'\r\n }}\r\n off on your payment\r\n </div>\r\n </div>\r\n <div class=\"coupon-brief__right-sec\">\r\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">\r\n Apply</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\r\n <div class=\"code-label\">Code</div>\r\n <div class=\"code-value\">{{ voucher.voucherCode }}</div>\r\n </div>\r\n\r\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\r\n <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\r\n <span class=\"separator text-secondary\">|</span>\r\n <span class=\"validity\">\r\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\r\n Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\r\n </span>\r\n <span class=\"separator text-secondary\" *ngIf=\"voucher.maxRedeemableAmount\">|</span>\r\n <span class=\"min-order\" *ngIf=\"voucher.maxRedeemableAmount\">Max Redeemable Amount: \u20B9{{\r\n voucher.maxRedeemableAmount | number }}</span>\r\n </div>\r\n\r\n <!-- <div class=\"terms-link\">View terms & conditions</div> -->\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"redemptionCouponType === 'DISCOUNTS'\">\r\n <ng-container *ngIf=\"(couponList.length > 0); else showEmptyDiscounts\">\r\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\r\n <div class=\"voucher-details\" *ngIf=\"couponDetails?.status\">\r\n\r\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\r\n <div class=\"coupon-brief__left-sec\">\r\n <div class=\"coupon-name fs-16 fw-600 mb-1\"\r\n [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\r\n {{ couponDetails.couponCode | uppercase }}\r\n </div>\r\n <div class=\"coupon-desc fs-12 text-secondary\">\r\n {{ couponDetails.discountDescription | titlecase }}\r\n </div>\r\n </div>\r\n <div class=\"coupon-brief__right-sec\">\r\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\"\r\n [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\r\n [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : 'not-allowed'}\"\r\n (click)=\"applyCoupon(couponDetails)\">\r\n Apply\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\r\n <div class=\"code-label\">Code</div>\r\n <div class=\"code-value\">{{ couponDetails.couponCode | uppercase }}</div>\r\n </div>\r\n\r\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\r\n <span class=\"validity\">\r\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\r\n {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}\r\n </span>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #showEmptyDiscounts>\r\n <div class=\"empty-screen-container\">\r\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n <div class=\"empty-screen__primary-text\">No Discount Coupons Available</div>\r\n <div class=\"empty-screen__secondary-text\">\r\n Looks like there are no discount coupons at the moment\r\n </div>\r\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #showEmptyScreen>\r\n <div class=\"empty-screen-container\">\r\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n <div class=\"empty-screen__primary-text\">No Coupons Available</div>\r\n <div class=\"empty-screen__secondary-text\">Looks like there are no coupons</div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n <div class=\"coupon-listing d-flex flex-column gap-3\" *ngIf=\"redemptionType === 'VOUCHERS'\">\r\n <ng-container *ngIf=\"listRedemptionVouchers?.vouchers?.length > 0; else showEmptyScreen\">\r\n <ng-container *ngFor=\"let voucher of listRedemptionVouchers?.vouchers; let idx = index\">\r\n <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\r\n\r\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\r\n <div class=\"coupon-brief__left-sec\">\r\n <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\r\n <div class=\"coupon-desc fs-12 text-secondary\">\r\n Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%' }}\r\n off on your payment\r\n </div>\r\n </div>\r\n <div class=\"coupon-brief__right-sec\">\r\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">Apply\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\r\n <div class=\"code-label\">Code</div>\r\n <div class=\"code-value\">{{ voucher.voucherCode }}</div>\r\n </div>\r\n\r\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\r\n <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\r\n <span class=\"separator text-secondary\">|</span>\r\n <span class=\"validity\">\r\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\r\n Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\r\n </span>\r\n </div>\r\n\r\n <!-- <div class=\"terms-link\">View terms & conditions</div> -->\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #showEmptyScreen>\r\n <div class=\"empty-screen-container\">\r\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n <div class=\"empty-screen__primary-text\">No Vouchers Available</div>\r\n <div class=\"empty-screen__secondary-text\">Looks like there are no vouchers</div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #CARTPAGE>\r\n <div class=\"container\">\r\n <div class=\"main-content\">\r\n <div class=\"promo-banner mb-3\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && ecomConfigs?.videoCallEnabled\">\r\n <!-- && ecomConfigs?.videoCallEnabled\" -->\r\n <div class=\"promo-text\">\r\n <h3>See It Before You Buy It</h3>\r\n <p>Experience our designs in detail via video call</p>\r\n </div>\r\n <button class=\"see-live-btn\" (click)=\"scheduleVideoCall(responseData?.orderedItems)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-video\">\r\n <path d=\"m22 8-6 4 6 4V8Z\" />\r\n <rect width=\"14\" height=\"12\" x=\"2\" y=\"6\" rx=\"2\" ry=\"2\" />\r\n </svg>\r\n SEE IT LIVE\r\n </button>\r\n </div>\r\n\r\n <div class=\"cart-items\">\r\n <div class=\"cart-header\">\r\n <h2>Your Cart</h2>\r\n </div>\r\n <ng-container\r\n *ngTemplateOutlet=\"CARTITEM;context:{data: cartType === 'SHOPPING' ? responseData?.orderedItems : trialCartItem}\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"sidebar\">\r\n <div class=\"reedem-section d-flex flex-column align-items-center\" *ngIf=\"cartType != 'TRIAL' && getUrl()\">\r\n <div class=\"justify-content-between d-flex align-items-center w-100 redeem-section-text\">Redeem Section Amount\r\n <div class=\"toogle-switch\">\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" role=\"switch\" id=\"flexSwitchCheckChecked\"\r\n [checked]=\"selectMatureScheme\" (change)=\"onToggleChange()\">\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"select_matured_text w-100 text-start cursor-pointer\"\r\n *ngIf=\"selectMatureScheme && !selectedRedemption\" (click)=\"selectScheme()\">\r\n Select Matured Scheme\r\n </div> -->\r\n <!-- <div class=\"select_matured_text d-flex flex-column gap-2 w-100 text-start cursor-pointer\"\r\n *ngIf=\"selectedRedemption\">\r\n Selected Scheme\r\n <div class=\"d-flex w-100 justify-content-between align-items-center group_invest\">Group Investment\r\n scheme-5000/M <span>Change</span></div>\r\n <div class=\"d-flex justify-content-between align-items-center w-100 redeem_amount\">Redeemable Amount\r\n <span>\u20B9{{selectedRedmpationData.selectedAmount}}</span>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div class=\"scheme-section\" *ngIf=\"selectMatureScheme\">\r\n <ng-container *ngTemplateOutlet=\"SCHEME_REDEMPTION\"></ng-container>\r\n </div>\r\n <div class=\"coupon-section\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && !referEarnExist\">\r\n <div class=\"coupon-left\">\r\n <div class=\"coupon-icon\"><mat-icon>percent</mat-icon></div>\r\n <span class=\"coupon-text\" *ngIf=\"!responseData.billdetails?.couponId\">Apply\r\n Coupon</span>\r\n <span class=\"coupon-text\" *ngIf=\"responseData.billdetails?.couponId\">Coupon\r\n Applied</span>\r\n </div>\r\n <svg *ngIf=\"!responseData.billdetails?.couponId\" xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\"\r\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" class=\"chevron-icon\" (click)=\"openDialog(CouponList)\">\r\n <path d=\"m9 18 6-6-6-6\" />\r\n </svg>\r\n <span *ngIf=\"responseData.billdetails?.couponId\"\r\n (click)=\"removeCoupon($event)\"><mat-icon>close</mat-icon></span>\r\n </div>\r\n\r\n <div class=\"plan-details-container p-3 rounded-4 bg-white text-dark voucher-details\"\r\n *ngIf=\"referEarnExist && this?.redemptionPoints?.availablePoints > 0\">\r\n <div class=\"fs-14 fw-500\">\r\n Rewards Available\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-start border-bottom pb-2\">\r\n <div class=\"avb_pts mt-2 mb-2\">\r\n <span class=\"fs-16 fw-500 total_points text-secondary\">\r\n <span class=\" fs-18 fw-600 text-dark\">{{(this?.redemptionPoints?.availablePoints || 0).toFixed(2)}}</span>\r\n pts\r\n </span>\r\n <div class=\"total_value fs-12 text-secondary\">\r\n = max \u20B9{{(this?.redemptionPoints?.pointsConvertedRupees || 0).toFixed(2)}} discount\r\n </div>\r\n </div>\r\n <div class=\"wallte_icon\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/777779c1775200561187wallet_(1).png\" alt=\"\">\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center mt-3\">\r\n <div class=\"redemable_text\">\r\n <div class=\"title_text\">\r\n <div class=\"fs-14 fw-500\">\r\n Redeem Points\r\n </div>\r\n <div class=\"fs-13 fs-400\">\r\n Use your points for discount\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"toggle_btn\">\r\n <label class=\"switch\">\r\n <input type=\"checkbox\" id=\"toggleSwitch\" [checked]=\"isPointsRedeeming\"\r\n (click)=\"onPointsRedeemingChange($event)\" />\r\n <span class=\"slider\"></span>\r\n </label>\r\n </div>\r\n </div>\r\n <div class=\"mt-3 success_selected w-100 applied-coupon-card\" *ngIf=\"isPointsRedeeming\">\r\n <div class=\"d-flex align-items-start gap-2\">\r\n <div class=\"success_icon\">\r\n <mat-icon class=\"d-flex justify-content-center align-items-center text-success\">check_circle</mat-icon>\r\n </div>\r\n <div class=\"success_text\">\r\n <div class=\"fs-13 fw-500\">\r\n You're saving \u20B9\r\n {{totalSavingAmt || 0}}\r\n </div>\r\n <div class=\"fs-12 fs-400 text-success\">\r\n {{totalSavingPoints}} points remaining after redemption\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Existing coupon row (keep as-is) -->\r\n <div class=\"coupon-section d-flex flex-column voucher-details\" [id]=\"data?.id\"\r\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist\">\r\n <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n <div class=\"coupon-left\">\r\n Apply Coupon\r\n </div>\r\n <div (click)=\"addRedemptionCoupon(RedemptionVouchers)\">View All</div>\r\n </div>\r\n\r\n <!-- Applied Coupon Success Banner -->\r\n <div class=\"applied-coupon-card w-100 mt-3 d-flex align-items-center justify-content-between\"\r\n *ngIf=\"selectedVoucherId\">\r\n <div class=\"applied-coupon-left d-flex align-items-center gap-3\">\r\n <mat-icon class=\"success-check\">check_circle</mat-icon>\r\n <div class=\"applied-coupon-info\">\r\n <div class=\"applied-coupon-code\">Coupon {{ selectedVoucherCode }} applied!</div>\r\n <div class=\"applied-coupon-saving\">You're saving\r\n <span *ngIf=\"this.couponValueType === 'AMOUNT'\">\u20B9 {{selectedVoucherAmount || 0}}</span>\r\n <span *ngIf=\"this.couponValueType === 'PERCENTAGE'\"> {{selectedVoucherPercentage || 0}}%</span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <div class=\"remove-coupon-btn fs-14 fw-500 text-secondary cursor-pointer\"\r\n (click)=\"removeRedemptionCoupon($event)\">Remove</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"delivery-section\" *ngIf=\"getUrl()\">\r\n <div class=\"delivery-header\">\r\n <mat-icon>gps_fixed</mat-icon>\r\n <span *ngIf=\"cartType === 'SHOPPING'\">Delivering to</span>\r\n <span *ngIf=\"cartType === 'TRIAL'\">Trial Location at</span>\r\n <span class=\"pincode\">{{pincode}}</span>\r\n <!-- <a class=\"change-link\">Change Pincode</a> -->\r\n </div>\r\n </div>\r\n\r\n <div class=\"summary-section\">\r\n <div class=\"summary-title\">Summary</div>\r\n\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span class=\"summary-label\">Subtotal</span>\r\n <span class=\"summary-value\">\u20B9{{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</span>\r\n </div>\r\n\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && referEarnExist && isPointsRedeeming\">\r\n <span class=\"summary-label\">Points Redeemed</span>\r\n <span class=\"summary-value\">- \u20B9{{ totalSavingAmt || 0 }}</span>\r\n </div>\r\n\r\n <div class=\"summary-row\"\r\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'AMOUNT' && appliedVoucher)\">\r\n <span class=\"summary-label\">Voucher Applied</span>\r\n <span class=\"summary-value\">- \u20B9{{ selectedVoucherAmount || 0 }}</span>\r\n </div>\r\n\r\n <div class=\"summary-row\"\r\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'PERCENTAGE' && appliedVoucher)\">\r\n <span class=\"summary-label\">Voucher Applied</span>\r\n <span class=\"summary-value\">- \u20B9{{ percentageReduced || 0 }}</span>\r\n </div>\r\n\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.discountAmount\">\r\n <span class=\"summary-label\">Discount Amount</span>\r\n <span class=\"summary-value\">\r\n {{('\u20B9' + (responseData?.billdetails?.discountAmount | number: '1.0-2')) }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span class=\"summary-label\">Shipping</span>\r\n <span class=\"summary-value\"\r\n [ngClass]=\"{'savings': !responseData?.billdetails?.deliveryCharges || responseData.billdetails.deliveryCharges <= 0}\">\r\n {{ (responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0) ? ('\u20B9' +\r\n (responseData.billdetails.deliveryCharges | number: '1.0-2')) : 'Free' }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span class=\"summary-label\">Estimated Tax</span>\r\n <span class=\"summary-value\">\u20B9{{((!responseData.billdetails?.couponId ?\r\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\r\n number: '1.0-2'}}</span>\r\n </div>\r\n\r\n <div class=\"summary-row total-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span class=\"summary-label\">Total</span>\r\n <!-- <span class=\"summary-value\">\u20B9{{ responseData?.totalAmount | number: '1.0-2' }}</span> -->\r\n <span class=\"total-value\" *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{ responseData?.totalAmount |\r\n number: '1.0-2' }}</span>\r\n\r\n <span class=\"total-value\" *ngIf=\"isPointsRedeeming\">\u20B9{{ (responseData?.totalAmount - (totalSavingAmt || 0)) |\r\n number: '1.0-2' }}</span>\r\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\r\n (selectedVoucherAmount || 0)) | number:\r\n '1.0-2'}}</span>\r\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\r\n (percentageReduced || 0)) | number:\r\n '1.0-2' }}</span>\r\n </div>\r\n\r\n <!-- Trial Cart Summary -->\r\n <ng-container *ngIf=\"cartType === 'TRIAL'\">\r\n <div class=\"summary-row\">\r\n <span class=\"summary-label\">Free Trial</span>\r\n <span class=\"summary-value\">\u20B90</span>\r\n </div>\r\n <div class=\"summary-row\">\r\n <span class=\"summary-label\">Service Charge</span>\r\n <span class=\"summary-value savings\">Free</span>\r\n </div>\r\n <div class=\"summary-divider\"></div>\r\n <div class=\"summary-row total-row\">\r\n <span class=\"summary-label\">Total</span>\r\n <span class=\"summary-value\">\u20B90</span>\r\n </div>\r\n <!-- <span class=\"total-value\" *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{ responseData?.totalAmount |\r\n number: '1.0-2' }}</span>\r\n\r\n <span class=\"total-value\" *ngIf=\"isPointsRedeeming\">\u20B9{{ (responseData?.totalAmount - (totalSavingAmt || 0)) |\r\n number: '1.0-2' }}</span>\r\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\r\n (selectedVoucherAmount || 0)) | number:\r\n '1.0-2'}}</span>\r\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\r\n (percentageReduced || 0)) | number:\r\n '1.0-2' }}</span> -->\r\n </ng-container>\r\n </div>\r\n <button class=\"place-order-btn\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\r\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n *ngIf=\"cartType === 'SHOPPING'\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\r\n Shopping'}}</button>\r\n <button class=\"place-order-btn mt-0\" (click)=\"edit ? '' : proceedToCheckout()\" simpoButtonDirective\r\n *ngIf=\"cartType === 'SHOPPING'\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout\r\n Cart'}}</button>\r\n <button class=\"place-order-btn mt-0\" simpoButtonDirective *ngIf=\"cartType === 'TRIAL'\"\r\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\" (click)=\"bookAppointment()\">BOOK\r\n APPOINTMENT</button>\r\n\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #CHECKOUTPAGE>\r\n <div class=\"checkout-left-panel\">\r\n <div class=\"checkout-main-content\">\r\n <!-- <div class=\"delivery-options\">\r\n <div class=\"delivery-option active\">\r\n <div class=\"delivery-icon\"></div>\r\n HOME DELIVERY\r\n </div>\r\n <div class=\"delivery-option\">\r\n <div class=\"delivery-icon\"></div>\r\n STORE PICK-UP\r\n </div>\r\n </div> -->\r\n\r\n <div class=\"section-title\">Shipping Address</div>\r\n\r\n <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\r\n <div class=\"address-info\">\r\n <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\r\n <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\r\n {{defaultAddress?.stateName}}</div>\r\n <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"addLinks h-100\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\r\n <mat-icon>add</mat-icon>\r\n </div>\r\n\r\n <button class=\"change-address-btn\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">CHANGE OR ADD ADDRESS</button>\r\n\r\n <button class=\"btn w-100 mt-1 payment-btn\" (click)=\"proceedToPayment()\" simpoButtonDirective\r\n *ngIf=\"defaultAddress && !placeOrderLoader\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\">\r\n Place Order\r\n </button>\r\n <button class=\"btn w-100 mt-1 payment-btn\" simpoButtonDirective *ngIf=\"defaultAddress && placeOrderLoader\"\r\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\">\r\n Loading...\r\n </button>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"checkout-right-panel\">\r\n <div class=\"order-summary\">\r\n <div class=\"summary-title\">Order Summary</div>\r\n\r\n <div class=\"checkout-product\">\r\n <div class=\"product-item\" *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n <img [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-image\"\r\n alt=\"\">\r\n <div class=\"product-details\">\r\n <div class=\"product-name\">{{item.itemName}}</div>\r\n <div class=\"product-quantity\">Quantity: {{item.quantity}}</div>\r\n <div class=\"product-price\">\u20B9{{(item.sellingPrice * item.quantity) | number: '1.0-2'}}</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"price-breakdown\">\r\n <div class=\"price-row\">\r\n <span>Total Price</span>\r\n <span>\u20B9{{(responseData?.billdetails?.totalNetValue\r\n ?? 0) | number: '1.0-2'}}</span>\r\n </div>\r\n <div class=\"price-row\">\r\n <span>Total Tax</span>\r\n <span>\u20B9{{((!responseData.billdetails?.couponId ?\r\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\r\n number:\r\n '1.0-2'}}</span>\r\n </div>\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && cartInfo?.billdetails?.orraSchemeRedeemedAmount\">\r\n <span class=\"summary-label\">Redeem Amount</span>\r\n <span class=\"summary-value\">\u20B9{{(cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\r\n '1.0-2'}}</span>\r\n </div>\r\n\r\n <div class=\"price-row discount\"\r\n *ngIf=\"responseData?.billdetails?.discountAmount && subIndustryName != 'Ecommerce Jewellery'\">\r\n <span>Coupon Discount</span>\r\n <span>- \u20B9{{responseData?.billdetails?.discountAmount\r\n | number: '1.0-2'}}</span>\r\n </div>\r\n <div class=\"price-row\"\r\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n <span>Delivery Charge</span>\r\n <span>{{responseData.billdetails.deliveryCharges\r\n |\r\n number: '1.0-2'}}</span>\r\n </div>\r\n <div class=\"price-row total\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span>TOTAL AMOUNT</span>\r\n <span *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{(responseData?.totalAmount ?? 0) | number:\r\n '1.0-2'}}</span>\r\n <span *ngIf=\"isPointsRedeeming\">\u20B9{{(responseData?.totalAmount - (totalSavingAmt || 0)) | number:\r\n '1.0-2'}}</span>\r\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\r\n (selectedVoucherAmount || 0)) | number:\r\n '1.0-2'}}</span>\r\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\r\n (responseData?.totalAmount * (selectedVoucherPercentage / 100) || 0)) | number:\r\n '1.0-2' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #CARTITEM let-products=\"data\">\r\n <div class=\"cart-item\" *ngFor=\"let item of products\" [style.color]=\"fontColor\">\r\n <div class=\"item-left\">\r\n <div class=\"item-image\">\r\n <img class=\"item-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n (click)=\"goToProductDetails(item)\" style=\"cursor: pointer;\">\r\n </div>\r\n <div class=\"item-details\">\r\n <h3 class=\"item-title\">{{item.itemName}}</h3>\r\n <div class=\"item-subtitle\" *ngIf=\"item.itemVariant\">\r\n <span *ngFor=\"let varient of getKeys(item.itemVariant.properties); let last = last\">\r\n {{ item.itemVariant.properties[varient] | titlecase }}<span *ngIf=\"!last\">, </span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"item-right\">\r\n <div class=\"quantity-control\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <button class=\"qty-btn px-2\" (click)=\"decreaseQty(item)\" [disabled]=\"item.quantity === 1\">\r\n <mat-icon>remove</mat-icon>\r\n </button>\r\n <span class=\"qty-value px-3\">{{item.quantity}}</span>\r\n <button class=\"qty-btn px-2\" (click)=\"increaseQty(item)\">\r\n <mat-icon>add</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"item-price\">\r\n \u20B9{{item.sellingPrice | number: '1.0-2'}}\r\n </div>\r\n\r\n <div class=\"delete-btn-circle\" (click)=\"removeItem(item)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trash-2\">\r\n <path d=\"M3 6h18\" />\r\n <path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\" />\r\n <path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\" />\r\n <line x1=\"10\" x2=\"10\" y1=\"11\" y2=\"17\" />\r\n <line x1=\"14\" x2=\"14\" y1=\"11\" y2=\"17\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #EMPTYITEM>\r\n <section class=\"empty-cart w-100 d-flex align-items-center justify-content-center\">\r\n <div class=\"empty-cart-container d-flex flex-column\">\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"data?.content?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <div class=\"cart-text content-side\">\r\n <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"d-flex justify-content-center\"\r\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <button class=\"place-order-btn mx-auto w-fit\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\r\n [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\r\n Shopping'}}</button>\r\n </div>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #SCHEME_REDEMPTION>\r\n <div class=\"modal-body\">\r\n <div class=\"scheme-option\" *ngFor=\"let scheme of schemeList\" (click)=\"redeemScheme(scheme, false)\"\r\n [style.borderColor]=\"cartInfo.billdetails.orraSchemeCode ? styles?.background?.color : ''\">\r\n <label for=\"individual\" class=\"scheme-card\">\r\n <div class=\"scheme-info d-flex gap-1\">\r\n <div class=\"form-check-radio\">\r\n <input class=\"form-check-input-radio\" type=\"radio\" name=\"flexRadioDefault\" id=\"flexRadioDefault2\">\r\n </div>\r\n <div class=\"right-side\">\r\n <div class=\"scheme-name\">\r\n <div class=\"scheme-title\">Individual Investment Scheme</div>\r\n <div class=\"scheme-monthly\">\u20B98000/M</div>\r\n </div>\r\n <div class=\"scheme-details\">\r\n <span class=\"scheme-id\">GPP Id: {{scheme.GPPId}}</span>\r\n <!-- <span class=\"scheme-maturity\">Maturity Date: 12 April 2024</span> -->\r\n </div>\r\n <div class=\"scheme-amount\">\u20B9{{scheme.amount}}</div>\r\n </div>\r\n </div>\r\n </label>\r\n </div>\r\n <div class=\"reedem_error d-flex justify-content-center align-items-center\" *ngIf=\"showReedemError\">\r\n Please add more \u20B9{{vaildAmount}} to reedem this scheme\r\n </div>\r\n </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.reedem-section{padding:10px 15px;border-radius:15px;background:#f6f3f9;box-shadow:#b2b2ca80 2px 2px 6px;font-weight:700;font-size:13px}.redeem-section-text{font-size:.9rem;font-weight:700}.form-check-input:checked{background-color:#28a745!important;border-color:#28a745!important}.form-check-input:focus{border-color:#28a745!important;outline:0;box-shadow:none!important}.close-btn{background:none;border:none;font-size:24px;color:#6b7280;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.close-btn:hover{color:#374151}.select_matured_text{font-size:.8rem!important;margin-top:10px;color:#05aacf}.position-relative{position:relative}.cart-parent{display:flex;margin-top:15px}.left-panel{width:65%;padding-right:5rem;border-right:1px solid #E9E9E9}.timeline{cursor:pointer}.cart-items{background:#fff;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.cart-header{padding:16px 24px;border-bottom:1px solid #e2e8f0;background:#f8fafc}.cart-header h2{margin:0;font-size:18px;font-weight:500;color:#0f172a}.cart-item{display:flex!important;align-items:center;justify-content:space-between;border-bottom:1px solid #e2e8f0;gap:20px;padding:0 8px;transition:background .2s}.cart-item:hover{background:#fbfcfe}.item-left{display:flex;align-items:center;flex:1}.item-right{display:flex;align-items:center;padding:15px;gap:32px}.item-image img{width:64px;height:64px;border-radius:12px;object-fit:cover;border:1px solid #f1f5f9}.item-details{display:flex;flex-direction:column;gap:4px}.item-title{margin:0;font-size:15px;font-weight:600;color:#0f172a;line-height:1.4}.item-subtitle{font-size:13px;color:#64748b;font-weight:400}.quantity-control{display:flex;align-items:center;border:1.5px solid #e2e8f0;border-radius:7px;overflow:hidden;height:38px;background:#fff;width:fit-content}.qty-btn{width:38px;height:100%;border:none;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#475569;transition:all .2s ease}.qty-btn:hover{background:#f8fafc;color:#0f172a}.qty-btn mat-icon{font-size:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center}.qty-value{width:32px;height:100%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;color:#0f172a;border-left:1.5px solid #e2e8f0;border-right:1.5px solid #e2e8f0}.item-price{font-size:18px;font-weight:700;color:#0f172a;min-width:60px;text-align:right;letter-spacing:-.01em}.delete-btn-circle{width:36px;height:36px;border-radius:50%;border:1px solid #fee2e2;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#ef4444;transition:all .2s ease}.delete-btn-circle:hover{background:#fef2f2;border-color:#fecaca;transform:scale(1.05);color:#dc2626}.delete-btn-circle svg{width:18px;height:18px}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%;padding-left:5rem}.my-bag{font-size:16px;font-weight:600;color:#000;margin-left:8px}.my-bag span{color:#939393}.coupons{display:flex;justify-content:space-between;padding:10px;border-radius:4px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px;margin-top:10px;cursor:pointer}.coupon-list-section{padding:15px;width:400px;z-index:10000001!important}.coupon-list-section .search{padding:8px;border:1px solid lightgray;border-radius:20px;display:flex;justify-content:space-between}.coupon-list-section input{border:none;outline:none;width:90%}.coupon-list-section .coupon-list{height:60vh;width:100%}.item-parent{margin:10px 0;min-height:120px}.lh-23{line-height:23px;margin-left:10px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0;cursor:pointer}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer;font-size:18px}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important;height:calc(100vh - 170px)}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;width:100%;text-align:center}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff;cursor:pointer}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.see-live-btn{white-space:nowrap!important}.left-panel{width:100%;padding-right:0rem}.right-panel{width:100%;z-index:1000;padding-left:0rem}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap;display:none}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}.empty-cart-container{height:calc(100vh - 130px)}.coupons-listing-section{width:100vw!important}.checkoutPage{flex-direction:column}.checkout-left-panel,.checkout-right-panel{width:100%!important}}.mobile-fixed{color:#fff}.coupons-listing-section{height:100vh;padding-top:0;position:relative;width:390px;z-index:100;background:#d3d3d354}.coupons-listing-section .coupon-heading{display:flex;align-items:center;background-color:#fff;padding:15px 20px;width:100%;box-sizing:border-box}.coupons-listing-section .coupon-heading img{height:15px;width:15px;position:relative;top:2px;cursor:pointer}.coupons-listing-section .coupon-heading .header-text{font-size:16px;color:#000;font-weight:600;margin-left:15px;position:relative;top:-3px;right:15px;cursor:pointer}.coupons-listing-section .coupon-search-sec{width:90%;box-sizing:border-box;margin:10px auto;border:1px solid lightgray;padding:10px;border-radius:10px;background-color:#fff;display:flex;font-size:16px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec input{border:none;outline:none;background-color:transparent;width:95%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-search-sec input:focus{font-size:14px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec .back-btn{position:relative;top:3px;cursor:pointer}.coupons-listing-section .coupon-search-sec .apply-btn-search{font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing{height:72%;overflow-y:auto;width:90%;margin:20px auto}.coupons-listing-section .coupon-listing .coupon-details{padding:15px;margin-bottom:15px;background-color:#edfffa;border-radius:10px;border:1px solid lightgray}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading{display:flex;flex-direction:column;gap:25px}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief{display:flex;justify-content:space-between;width:100%}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-name{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-desc{padding:5px 0;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .show-details-btn{cursor:pointer}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec{display:flex;justify-content:flex-end}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec .apply-offer-btn{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-toggle-details-btn{text-align:left;text-decoration:underline;width:100%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details-divider{border-top:2px solid lightgray;opacity:.3;margin:15px 0}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-terms{font-size:14px;color:#000;font-weight:400}.empty-screen-container{height:100%;width:85%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-screen-container .empty-screen__primary-text{font-size:22px;color:#000;font-weight:400}.empty-screen-container .empty-screen__secondary-text{text-align:center;padding:10px 0;font-size:16px;color:#000;font-weight:400}.empty-screen-container .empty-screen__button{width:90%;background-color:#fff;border-radius:8px;text-align:center;padding:10px;margin:10px auto 0;cursor:pointer;font-size:18px;color:#000;font-weight:400}.box-shadow{box-shadow:#00000029 0 1px 4px}.main-content{border-radius:12px;padding:0 30px 30px;width:100%;overflow:scroll;height:calc(100vh - 150px)}.delivery-options{display:flex;gap:20px;margin-bottom:30px}.delivery-option{padding:12px 24px;border:2px solid #e0e0e0;border-radius:25px;background:#fff;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:500;transition:all .2s}.delivery-option.active{background:#f0e6ff;border-color:#8b5cf6;color:#7c3aed}.delivery-option:hover{border-color:silver}.delivery-icon{width:16px;height:16px;background:#8b5cf6;border-radius:3px}.section-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.shipping-info{border-radius:10px;padding:20px;margin-bottom:20px;border:1px solid rgb(238,232,255);box-shadow:#0000000a 0 4px 8px}.delivery-date{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.delivery-date-text{color:#666;font-weight:500}.change-date-btn{color:#e91e63;background:none;border:none;font-weight:600;cursor:pointer;text-transform:uppercase;font-size:12px;letter-spacing:.5px}.address-info{margin-bottom:15px}.address-name{font-weight:700;margin-bottom:8px;color:#000}.address-details{color:#666;margin-bottom:8px}.mobile-number{font-weight:700;color:#000;font-size:15px}.change-address-btn{font-size:1rem!important;font-weight:700!important;padding:6px;background:#fff;border:1px solid rgb(229,221,255);border-radius:8px;color:#000;cursor:pointer;transition:all .2s;box-shadow:#0000000a 0 4px 8px}.change-address-btn:hover{border-color:#8b5cf6;color:#8b5cf6}.billing-section{margin-top:40px}.billing-options{display:flex;flex-direction:column;gap:15px;margin-top:20px}.billing-option{display:flex;align-items:center;gap:12px;padding:15px;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .2s}.billing-option.active{background:#f0e6ff;border-color:#8b5cf6}.radio-btn{width:20px;height:20px;border:2px solid #e0e0e0;border-radius:50%;position:relative}.billing-option.active .radio-btn{border-color:#8b5cf6}.billing-option.active .radio-btn:after{content:\"\";width:10px;height:10px;background:#8b5cf6;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.order-summary{border-radius:12px;padding:25px;width:75%}.summary-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.product-item{display:flex;gap:15px;margin-bottom:20px;border-bottom:1px solid #f0f0f0;border-radius:7px;background:#fff;padding:15px}.product-item:last-of-type{border-bottom:none;margin-bottom:30px;padding-bottom:0}.product-image{max-width:110px;width:100%;height:100%;border-radius:8px}.product-details{flex:1}.product-name{font-weight:500;margin-bottom:4px;color:#2d3748;font-size:14px}.product-quantity{color:#666;font-size:12px;margin-bottom:8px}.product-price{font-weight:600;color:#2d3748}.delivery-info{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:#8b5cf6}.delivery-icon-small{width:12px;height:12px;background:#8b5cf6;border-radius:2px}.price-breakdown{border-top:1px solid #f0f0f0;padding-top:20px}.price-row{display:flex;justify-content:space-between;margin-bottom:12px;color:#666}.price-row.total{font-weight:600;color:#2d3748;font-size:16px;margin-top:15px;padding-top:15px;border-top:1px solid #f0f0f0}.discount{color:#22c55e!important}@media (max-width: 768px){.container{grid-template-columns:1fr;padding:15px;gap:20px}.main-content,.order-summary{padding:20px;width:100%}.delivery-options{flex-direction:column;gap:10px}}.checkout-left-panel{width:65%;display:flex;justify-content:center}.checkout-right-panel{width:35%;display:flex;justify-content:center;background-color:#f9f9fa}.checkout-product{max-height:50vh;overflow:scroll}.mt-1{margin-top:1rem!important}.payment-btn{box-shadow:#0000000a 0 4px 8px}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px;height:25vh!important;margin-bottom:20px}.addLinks mat-icon{border:1px solid rgb(219,223,225);display:flex;border-radius:100%;align-items:center;justify-content:center;font-size:16px;color:#dbdfe1}.change-pincode{display:flex;gap:10px}.change-pincode mat-icon{font-size:18px;align-items:center;justify-content:center;display:flex}.change-pincode span{font-size:14px}.fs-13{font-size:13px}.fs-12{font-size:12px}.fs-18{font-size:18px}.b-1-b{border-width:0px 1px;border-style:solid;border-color:#000}.container{max-width:unset;padding:24px;display:flex;gap:24px;width:100%!important}.main-content{background:#fff;border-radius:12px;width:70%}.promo-banner{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;border-radius:8px;border:1px solid #e2e8f0}.promo-text h3{font-size:16px!important;font-weight:500;margin-bottom:4px}.promo-text p{font-size:.9rem!important;margin-bottom:0!important;color:#64748b}.see-live-btn{background:#fff;border:1px solid #e2e8f0;font-weight:600;color:#000;padding:8px 16px;border-radius:8px;font-size:12px!important;cursor:pointer;display:flex;align-items:center;gap:8px;width:max-content!important;transition:all .2s ease;box-shadow:0 1px 2px #0000000d}.see-live-btn:hover{background:#f8fafc;border-color:#cbd5e1;transform:translateY(-1px)}.see-live-btn svg{color:#6366f1}.cart-item{display:flex;gap:16px;position:relative}.cart-item:last-child{border-bottom:none}.item-image{width:15%;height:100px;border-radius:8px;object-fit:cover;display:flex;align-items:center;justify-content:center}.item-details{flex:1}.item-title{font-weight:500;margin-bottom:8px}.item-price{display:flex;align-items:center;gap:8px}.current-price{font-size:1rem;font-weight:600}.original-price{font-size:1rem;text-decoration:line-through}.discount{background:#fef3c7;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:500}.item-code{font-size:12px;color:#9ca3af;margin-bottom:8px}.item-options{display:flex;gap:16px;font-size:14px;color:#6b7280;margin-bottom:12px}.delivery-info{font-size:12px;color:#8b5cf6}.pickup-info{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:5px 15px;margin-top:12px;display:flex;align-items:center;cursor:pointer;width:max-content;gap:20px}.pickup-text{font-size:.9rem;color:#374151}.remove-btn{position:absolute;top:16px;right:0;width:20px!important;height:20px;background:#000;color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px!important}.sidebar{display:flex;flex-direction:column;gap:16px;width:32%}.coupon-section{border-radius:8px;padding:10px 15px;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .2s ease}.coupon-section:hover{border-color:#cbd5e1;background-color:#f8fafc}.chevron-icon{color:#94a3b8;transition:transform .2s ease}.coupon-section:hover .chevron-icon{transform:translate(2px);color:#64748b}.scheme-section{border-radius:12px;padding:10px 15px;cursor:pointer}.coupon-left{display:flex;align-items:center;gap:12px}.coupon-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center}.coupon-icon mat-icon{font-size:17px;width:17px!important;height:19px!important}.coupon-text{font-weight:700;font-size:.9rem}.delivery-section{background:#fff;border-radius:12px;padding:10px 15px;box-shadow:#b2b2ca80 2px 2px 6px;background:#f6f3f9}.delivery-header{display:flex;align-items:center;gap:12px;margin-bottom:4px}.delivery-header span{font-size:.9rem;font-weight:700}.delivery-header mat-icon{width:20px;height:20px;font-size:17px;position:relative;top:2px}.delivery-icon{width:20px;height:20px;background:#8b5cf6;border-radius:50%}.pincode{font-weight:600;color:#111827}.change-link{color:#ec4899;font-size:.9rem;text-decoration:none;margin-left:auto}.summary-section{background:#fff;border-radius:8px;padding:20px;border:1px solid #e2e8f0}.summary-title{font-size:16px;font-weight:700;color:#0f172a;margin-bottom:20px;letter-spacing:-.01em}.summary-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.summary-row:last-child{margin-bottom:0}.summary-label{font-size:14px;font-weight:400;color:#64748b}.summary-value{font-size:14px;font-weight:500;color:#0f172a}.summary-divider{height:1px;background:#f1f5f9;margin:16px 0;width:100%}.total-row .summary-label{font-size:16px;font-weight:600;color:#0f172a}.total-row .summary-value{font-size:16px;font-weight:700;color:#0f172a}.total-row{border-top:1px solid #e2e8f0;padding-top:15px;margin-top:15px}.total-label{font-weight:600;font-size:16px}.total-value{font-weight:700;font-size:18px}.place-order-btn{background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;border:none;border-radius:12px;padding:9px 10px;font-size:.9rem!important;font-weight:600;cursor:pointer;margin-top:10px;text-transform:uppercase}.place-order-btn:hover{opacity:.9}.chain-icon,.earring-icon{width:60px;height:60px;filter:sepia(1) hue-rotate(30deg) saturate(2)}.item-img{width:100%;height:100%;object-fit:cover}.mt-0{margin-top:0!important}select{outline:none;border-radius:5px;padding:2px;width:20%;border:none;box-shadow:#9999994d 2px 2px 6px;cursor:pointer}.cart-tab-parent{display:flex;justify-content:center}.cart-tabs{gap:10px;display:flex;justify-content:center;align-items:center;width:max-content;border-radius:8px;border:1px solid #e2e8f0}.cart-tabs div{padding:7px 10px;cursor:pointer;font-size:14px}.selected-cart-tab{margin:6px;background:#f1f5f9;border-radius:5px;color:#000!important;font-weight:500}.checkout-main-content{width:50%;padding:30px;border-radius:12px}@media screen and (max-width: 475px){.main-content{padding:0;height:auto!important}.cart-item{flex-direction:column!important;align-items:flex-start!important;padding:16px 12px!important;gap:16px!important}.item-left{width:100%!important;gap:16px!important;align-items:flex-start!important}.item-image{width:86px!important;height:86px!important;flex-shrink:0!important}.item-right{width:100%!important;justify-content:space-between!important;padding:0!important;gap:12px!important;margin-top:4px!important}.item-price{flex:1!important;text-align:right!important;margin-right:8px!important;font-size:16px!important}.item-title{font-size:14px!important;-webkit-line-clamp:2!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important}.quantity-control{height:34px!important}.qty-btn{width:34px!important}.qty-value{width:28px!important;font-size:13px!important}.no-items{height:86vh;overflow:hidden;margin:0}.checkout-main-content{width:100%}.container{padding:0!important}.pickup-info{display:none}.container{display:flex;flex-direction:column}.promo-banner{gap:10px}select{width:50%}.main-content,.sidebar{width:100%}.vouchers-listing-section{min-width:unset!important;width:100vw!important}.separator{display:none!important}.coupon-meta{display:grid!important;grid-template-columns:1fr 1fr!important}}.group_invest{color:#000;font-size:.8rem}.reedem_error{color:red}.group_invest span{color:#05aacf}.redeem_amount{padding:2%;border-radius:4px;background:#fff;margin-top:2%;color:#000;font-size:.8rem}.redeem_amount span{color:#0dc577}.w-fit{width:fit-content!important}.modal-body{padding-bottom:0;overflow-y:scroll;max-height:300px;padding:0!important}.scheme-option{margin-bottom:16px}.scheme-option input[type=radio]:checked+.scheme-card{border-color:#06b6d4;background:#f0f9ff;position:relative}.scheme-option input[type=radio]:checked+.scheme-card:before{content:\"\";position:absolute;top:20px;left:20px;width:20px;height:20px;border:2px solid #06b6d4;border-radius:50%;background:#fff}.scheme-option input[type=radio]:checked+.scheme-card:after{content:\"\";position:absolute;top:26px;left:26px;width:8px;height:8px;background:#06b6d4;border-radius:50%}.scheme-card{justify-content:space-between;padding:10px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff;width:100%}.scheme-card:hover{border-color:#d1d5db;background:#f9fafb}.form-check-radio{width:10%}.scheme-title{font-size:12px;font-weight:600;color:#111827;margin-bottom:8px}.scheme-details{display:flex;gap:25px;margin-bottom:20px}.scheme-name{display:flex;justify-content:space-between}.scheme-details span{font-size:12px;color:#0000004d}.scheme-monthly{font-size:14px;font-weight:600;color:#111827;min-width:100px;text-align:right}.right-side{width:90%}.scheme-amount{font-weight:700}@media screen and (min-width: 700px){.cart-items{max-height:500px;overflow:scroll}}.add-to-cart-parent{width:max-content;border:1px solid #000000;border-radius:8px}.cursor{cursor:pointer}.cart-text{max-width:600px;margin:0 auto;text-align:center}.cart-text div{word-break:break-word;overflow-wrap:break-word;white-space:normal}.switch{position:relative;display:inline-block;width:45px;height:20px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:34px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:3px;bottom:2px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#4caf50}input:checked+.slider:before{transform:translate(24px)}.vouchers-listing-section{position:relative;width:fit-content;min-width:500px;z-index:100;background:#fff;height:100vh}.vouchers-listing-section .coupon-heading{border-bottom:1px solid #eee}.vouchers-listing-section .coupon-listing{padding:12px 16px;overflow-y:auto;height:calc(97vh - 100px)}.voucher-details{background:#fff;border-radius:12px;padding:14px;box-shadow:0 1px 4px #00000042}.voucher-details .coupon-brief .apply-offer-btn{background:#111;color:#fff;border-radius:10px;padding:6px 16px}.voucher-details .coupon-code-box{border:1.5px dashed #bbb;border-radius:8px;padding:8px 12px;margin-bottom:10px}.voucher-details .coupon-code-box .code-label{font-size:11px;color:#888;margin-bottom:2px}.voucher-details .coupon-code-box .code-row .code-value{font-weight:700;font-size:15px;letter-spacing:1px}.voucher-details .coupon-meta .clock-icon{font-size:14px;height:14px;width:14px;vertical-align:middle}.applied-coupon-card{background:#f0fff8;border-radius:12px;padding:12px 16px}.applied-coupon-card .applied-coupon-left .success-check{color:#22c55e;font-size:22px}.applied-coupon-card .applied-coupon-left .applied-coupon-code{font-weight:700;font-size:14px}.applied-coupon-card .applied-coupon-left .applied-coupon-saving{font-size:13px;color:#097d5f;margin-top:2px}.active-type{background:#111!important;color:#fff!important}.redemption-type{text-align:center;border-radius:10px;padding:6px 16px;background:#d3d3d36b;width:-webkit-fill-available!important}.wallte_icon{background:#000;border-radius:50px;padding:5px 9px 7px}.wallte_icon img{width:18px;height:18px}.fw-600{font-weight:600}.coupon-type{width:fit-content!important;border-radius:26px!important;background:transparent!important;border:1px solid #afafaf;color:#393838;text-align:center;padding:6px 16px}.active-coupon{background:transparent!important;border:2px solid black!important;color:#000!important}.my-close-btn{position:absolute!important;top:10px!important;right:10px!important}\n"] }]
9978
10003
  }], ctorParameters: () => [{ type: EventsService }, { type: CartService }, { type: i2$2.Router }, { type: RestService }, { type: i1$1.MatDialog }, { type: StorageServiceService }, { type: i6.MessageService }, { type: i8$3.MatBottomSheet }, { type: i2$2.ActivatedRoute }, { type: undefined, decorators: [{
9979
10004
  type: Optional
9980
10005
  }, {