simpo-component-library 3.6.994 → 3.6.996
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/ecommerce/sections/book-appointment/book-appointment.component.mjs +3 -3
- package/esm2022/lib/ecommerce/sections/cart/cart.component.mjs +3 -3
- package/esm2022/lib/ecommerce/sections/user-profile/user-profile.component.mjs +3 -3
- package/esm2022/lib/elements/my-bookings/my-bookings.component.mjs +140 -5
- package/esm2022/lib/sections/appointment-form/appointment-booking/appointment-booking/appointment-booking.component.mjs +20 -5
- package/esm2022/lib/services/rest.service.mjs +7 -1
- package/fesm2022/simpo-component-library.mjs +169 -13
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/lib/elements/my-bookings/my-bookings.component.d.ts +44 -2
- package/lib/services/rest.service.d.ts +2 -0
- package/package.json +1 -1
- package/simpo-component-library-3.6.996.tgz +0 -0
- package/simpo-component-library-3.6.994.tgz +0 -0
|
@@ -3277,6 +3277,12 @@ class RestService {
|
|
|
3277
3277
|
return this.http.get(this.APPOINTMENT_URL +
|
|
3278
3278
|
`policy-masters/${businessId}?policyType=CANCELLATION`);
|
|
3279
3279
|
}
|
|
3280
|
+
getRescheduleSlots(groupId, date) {
|
|
3281
|
+
return this.http.put(this.APPOINTMENT_URL + `booking/group/${groupId}/reschedule-slots`, { date });
|
|
3282
|
+
}
|
|
3283
|
+
rescheduleBooking(groupId, newDate, newStartTime) {
|
|
3284
|
+
return this.http.put(this.APPOINTMENT_URL + `booking/group/${groupId}/reschedule`, { newDate, newStartTime, rescheduledBy: 'CUSTOMER' });
|
|
3285
|
+
}
|
|
3280
3286
|
generateToken(bId, userId) {
|
|
3281
3287
|
return this.http.post(this.PASSBOOK_URL +
|
|
3282
3288
|
`ext/connect/simpo/token?businessId=${bId}&userId=${userId}&userType=EXTERNAL_USER`, {});
|
|
@@ -10942,7 +10948,7 @@ class CartComponent extends BaseSection {
|
|
|
10942
10948
|
});
|
|
10943
10949
|
}
|
|
10944
10950
|
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: i3$2.MatDialog }, { token: StorageServiceService }, { token: i6$1.MessageService }, { token: i8$1.MatBottomSheet }, { token: i2$2.ActivatedRoute }, { token: BookingProductCartService }, { token: MAT_DIALOG_DATA, optional: true }, { token: i3$2.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10945
|
-
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\">\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n <ng-container *ngIf=\"data\">\n <section [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\"\n [attr.class]=\"isMobile ? 'py-5 position-relative' : 'position-relative'\" simpoHover\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\"\n [ngClass]=\"!responseData?.orderedItems?.length ? 'no-items' : ''\">\n <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\"\n [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\"\n *ngIf=\"responseData?.orderedItems?.length && currentTab === 'ADDRESS'\">\n <span class=\"timeline\" (click)=\"currentTab = 'BAG'\">Bag</span>\n <div class=\"bar\"></div>\n <span class=\"timeline isActive\">Address</span>\n <div class=\"bar\"></div>\n <span class=\"timeline\" style=\"cursor: auto;\">Payment</span>\n </div>\n <div class=\"cart-tab-parent w-100\" *ngIf=\"currentTab == 'BAG' && (appointmentSettings?.homeVisitProductsEnabled || appointmentSettings?.videoCallProductsEnabled)\">\n <!-- && appointmentSettings?.homeVisitProductsEnabled\" -->\n <div class=\"cart-tabs\" [id]=\"data?.id\">\n <div class=\"selected-cart-tab\" [ngClass]=\"{'selected-cart-tab': cartType==='SHOPPING'}\"\n (click)=\"cartType='SHOPPING'\">Shopping Cart ({{responseData?.orderedItems?.length ?? 0}})</div>\n <div [ngClass]=\"{'selected-cart-tab': cartType==='BOOKING'}\" (click)=\"cartType='BOOKING'\">Booking Cart\n ({{getTotalBookingItems}})</div>\n </div>\n </div>\n <div class=\"cart-parent\" [spacingHorizontal]=\"stylesLayout\" *ngIf=\"currentTab === 'BAG'\" [id]=\"data?.id\"\n [simpoAnimation]=\"styles?.animation\">\n <ng-container>\n <ng-container *ngIf=\"cartType === 'SHOPPING'\">\n <ng-container\n *ngTemplateOutlet=\"(responseData?.orderedItems?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"cartType === 'BOOKING'\">\n <div class=\"w-100\">\n <simpo-booking-cart-groups></simpo-booking-cart-groups>\n </div>\n </ng-container>\n </ng-container>\n </div>\n <div class=\"d-flex checkoutPage\"\n *ngIf=\"(responseData?.orderedItems?.length || 0) > 0 && currentTab === 'ADDRESS'\">\n <ng-container *ngTemplateOutlet=\"CHECKOUTPAGE\">\n </ng-container>\n </div>\n\n\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\n [isEcommerce]=\"true\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n\n </section>\n\n <div class=\"schedule-panel-overlay\" *ngIf=\"schedulePanelOpen\">\n <button type=\"button\" class=\"schedule-panel-backdrop\" (click)=\"closeSchedulePanel()\"></button>\n <div class=\"schedule-panel\">\n <div class=\"schedule-panel-header\">\n <div class=\"schedule-panel-heading\">\n <div class=\"schedule-panel-title\">Schedule a Video Call</div>\n <div class=\"schedule-panel-subtitle\">Choose which pieces to include</div>\n </div>\n <button type=\"button\" class=\"schedule-panel-close\" (click)=\"closeSchedulePanel()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n <div class=\"schedule-panel-body\">\n <button type=\"button\" class=\"schedule-panel-row\" *ngFor=\"let item of responseData?.orderedItems\"\n [class.selected]=\"isPanelSelected(item)\" (click)=\"togglePanelSelection(item)\">\n <div class=\"schedule-panel-checkbox\" [class.checked]=\"isPanelSelected(item)\">\n <mat-icon *ngIf=\"isPanelSelected(item)\">check</mat-icon>\n </div>\n <img class=\"schedule-panel-thumb\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\">\n <div class=\"schedule-panel-info\">\n <div class=\"schedule-panel-name\">{{item.itemName}}</div>\n </div>\n </button>\n </div>\n <div class=\"schedule-panel-footer\">\n <div class=\"schedule-panel-selection-line\">{{panelSelectionLine}}</div>\n <button type=\"button\" class=\"schedule-panel-cta\" [disabled]=\"panelInvalid\" (click)=\"confirmSchedulePanel()\">Continue</button>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!data\">\n <section class=\"cart-window\">\n <div class=\"heading-large lh-2 mb-3 header-sec\">\n <div class=\"d-flex align-items-center\">\n <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\n <span>Your Cart</span>\n </div>\n <div class=\"saving\"></div>\n </div>\n <div class=\"offers\">\n <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\n <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\n <span>Avail Offers / Coupons</span>\n </div>\n <mat-icon>keyboard_arrow_right</mat-icon>\n </div>\n <div class=\"small-items\">\n <ng-container *ngFor=\"let item of responseData?.orderedItems\">\n <div class=\"small-item\">\n <div class=\"d-flex\" style=\"gap: 5px;\">\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n class=\"small-product-img\"\n [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\n (click)=\"goToProductDetails(item)\">\n </div>\n <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\n <div class=\"small-item-quantity\">\n <span class=\"cursor\">-</span>\n <span>{{item.quantity}}</span>\n <span class=\"cursor\">+</span>\n </div>\n <div class=\"small-item-price\">\n <div class=\"price-with-tax\">\n <span [innerHTML]='currency'></span> {{(item.sellingPrice) | number: '1.0-2'}}\n </div>\n <!-- <div class=\"price-with-tax\">\n <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\n </div> -->\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"fotter-sec\">\n <div class=\"delivery-add d-flex\">\n <mat-icon>home</mat-icon>\n <div class=\"address\">Tetsting</div>\n </div>\n <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span\n style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span>\n {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\n </div>\n </section>\n </ng-container>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '40vh',\n 'border-radius': '10px',\n 'position': 'relative',\n 'right': '5px'\n}\">\n</ngx-skeleton-loader>\n\n<ng-template #CouponList>\n <section class=\"coupons-listing-section\">\n <div class=\"coupon-heading\">\n <div class=\"back-btn\" (click)=\"closeDialogRef()\">\n <mat-icon>keyboard_arrow_left</mat-icon>\n </div>\n <div class=\"header-text\">Apply Coupon</div>\n </div>\n <!-- <div class=\"coupon-search-sec\">\n <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\n <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\n </div> -->\n <div class=\"coupon-listing\">\n <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\n <div class=\"coupon-details\"\n [ngStyle]=\"{'background-color': !couponDetails.applicable ? '#FFF2F4' : '#EDFFFA'}\"\n *ngIf=\"couponDetails?.status\">\n <div class=\"details__coupon-heading\">\n <div class=\"coupon-brief\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name\" [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\n {{ couponDetails.couponCode | uppercase }}</div>\n <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn\" [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\n [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : ''}\"\n (click)=\"applyCoupon(couponDetails)\">Apply</div>\n </div>\n </div>\n <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\n <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\n <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\n </div> -->\n </div>\n <ng-container>\n <!-- *ngIf=\"couponDetails.status\" -->\n <div class=\"details-divider\"></div>\n <ul class=\"details__coupon-terms\">\n <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\n </ul>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n <ng-template #showEmptyScreen>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Coupon Available</div>\n <div class=\"empty-screen__secondary-text\">\n Looks like there are no coupons at the moment\n </div>\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\n </div>\n </ng-template>\n </div>\n </section>\n</ng-template>\n\n<ng-template #RedemptionVouchers>\n <section class=\"vouchers-listing-section d-flex flex-column\">\n <div class=\"coupon-heading d-flex align-items-center gap-2 p-3 fs-18 fw-600 border-bottom\">\n <div class=\"back-btn cursor-pointer d-flex align-items-center\" (click)=\"closeDialogRef()\">\n <mat-icon>keyboard_arrow_left</mat-icon>\n </div>\n <div class=\"header-text\">Coupons & Vouchers</div>\n </div>\n\n <!-- <div class=\"d-flex align-items-center tab-container justify-content-between gap-2 p-3\">\n <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'COUPONS'}\"\n (click)=\"redemptionType = 'COUPONS'\">\n Coupons\n </div>\n <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'VOUCHERS'}\"\n (click)=\"redemptionType = 'VOUCHERS'\">\n Vouchers\n </div>\n </div> -->\n\n <div class=\"coupon-listing d-flex flex-column gap-3 pt-3\" *ngIf=\"redemptionType === 'COUPONS'\">\n <div class=\"d-flex align-items-center tab-container gap-3\">\n <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\n [ngClass]=\"{'active-coupon': redemptionCouponType === 'REWARDS'}\" (click)=\"redemptionCouponType = 'REWARDS'\">\n Rewards\n </div>\n <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\n [ngClass]=\"{'active-coupon': redemptionCouponType === 'DISCOUNTS'}\"\n (click)=\"redemptionCouponType = 'DISCOUNTS'\">\n Discounts\n </div>\n </div>\n <ng-container *ngIf=\"redemptionCouponType === 'REWARDS'\">\n <ng-container *ngIf=\"(listRedemptionCoupons?.vouchers?.length > 0) ; else showEmptyScreen\">\n <ng-container *ngFor=\"let voucher of listRedemptionCoupons?.vouchers; let idx = index\">\n <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\n\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\n <div class=\"coupon-desc fs-12 text-secondary\">\n Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%'\n }}\n off on your payment\n </div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">\n Apply</div>\n </div>\n </div>\n\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n <div class=\"code-label\">Code</div>\n <div class=\"code-value\">{{ voucher.voucherCode }}</div>\n </div>\n\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\n <span class=\"separator text-secondary\">|</span>\n <span class=\"validity\">\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\n Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\n </span>\n <span class=\"separator text-secondary\" *ngIf=\"voucher.maxRedeemableAmount\">|</span>\n <span class=\"min-order\" *ngIf=\"voucher.maxRedeemableAmount\">Max Redeemable Amount: \u20B9{{\n voucher.maxRedeemableAmount | number }}</span>\n </div>\n\n <!-- <div class=\"terms-link\">View terms & conditions</div> -->\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"redemptionCouponType === 'DISCOUNTS'\">\n <ng-container *ngIf=\"(couponList.length > 0); else showEmptyDiscounts\">\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\n <div class=\"voucher-details\" *ngIf=\"couponDetails?.status\">\n\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name fs-16 fw-600 mb-1\"\n [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\n {{ couponDetails.couponCode | uppercase }}\n </div>\n <div class=\"coupon-desc fs-12 text-secondary\">\n {{ couponDetails.discountDescription | titlecase }}\n </div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\"\n [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\n [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : 'not-allowed'}\"\n (click)=\"applyCoupon(couponDetails)\">\n Apply\n </div>\n </div>\n </div>\n\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n <div class=\"code-label\">Code</div>\n <div class=\"code-value\">{{ couponDetails.couponCode | uppercase }}</div>\n </div>\n\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n <span class=\"validity\">\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\n {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}\n </span>\n </div>\n\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-template #showEmptyDiscounts>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Discount Coupons Available</div>\n <div class=\"empty-screen__secondary-text\">\n Looks like there are no discount coupons at the moment\n </div>\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\n </div>\n </ng-template>\n\n <ng-template #showEmptyScreen>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Coupons Available</div>\n <div class=\"empty-screen__secondary-text\">Looks like there are no coupons</div>\n </div>\n </ng-template>\n </div>\n\n <div class=\"coupon-listing d-flex flex-column gap-3\" *ngIf=\"redemptionType === 'VOUCHERS'\">\n <ng-container *ngIf=\"listRedemptionVouchers?.vouchers?.length > 0; else showEmptyScreen\">\n <ng-container *ngFor=\"let voucher of listRedemptionVouchers?.vouchers; let idx = index\">\n <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\n\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\n <div class=\"coupon-desc fs-12 text-secondary\">\n Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%' }}\n off on your payment\n </div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">Apply\n </div>\n </div>\n </div>\n\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n <div class=\"code-label\">Code</div>\n <div class=\"code-value\">{{ voucher.voucherCode }}</div>\n </div>\n\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\n <span class=\"separator text-secondary\">|</span>\n <span class=\"validity\">\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\n Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\n </span>\n </div>\n\n <!-- <div class=\"terms-link\">View terms & conditions</div> -->\n </div>\n </ng-container>\n </ng-container>\n\n <ng-template #showEmptyScreen>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Vouchers Available</div>\n <div class=\"empty-screen__secondary-text\">Looks like there are no vouchers</div>\n </div>\n </ng-template>\n </div>\n </section>\n</ng-template>\n\n<ng-template #CARTPAGE>\n <div class=\"container\">\n <div class=\"main-content\">\n <div class=\"cart-items\">\n <div class=\"cart-header\">\n <h2>Your Cart</h2>\n </div>\n <ng-container\n *ngTemplateOutlet=\"CARTITEM;context:{data: responseData?.orderedItems}\"></ng-container>\n </div>\n </div>\n\n <div class=\"sidebar\">\n <div class=\"reedem-section d-flex flex-column align-items-center\" *ngIf=\"getUrl()\">\n <div class=\"justify-content-between d-flex align-items-center w-100 redeem-section-text\">Redeem Section Amount\n <div class=\"toogle-switch\">\n <div class=\"form-check form-switch\">\n <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" role=\"switch\" id=\"flexSwitchCheckChecked\"\n [checked]=\"selectMatureScheme\" (change)=\"onToggleChange()\">\n </div>\n </div>\n </div>\n <!-- <div class=\"select_matured_text w-100 text-start cursor-pointer\"\n *ngIf=\"selectMatureScheme && !selectedRedemption\" (click)=\"selectScheme()\">\n Select Matured Scheme\n </div> -->\n <!-- <div class=\"select_matured_text d-flex flex-column gap-2 w-100 text-start cursor-pointer\"\n *ngIf=\"selectedRedemption\">\n Selected Scheme\n <div class=\"d-flex w-100 justify-content-between align-items-center group_invest\">Group Investment\n scheme-5000/M <span>Change</span></div>\n <div class=\"d-flex justify-content-between align-items-center w-100 redeem_amount\">Redeemable Amount\n <span>\u20B9{{selectedRedmpationData.selectedAmount}}</span>\n </div>\n </div> -->\n </div>\n <div class=\"scheme-section\" *ngIf=\"selectMatureScheme\">\n <ng-container *ngTemplateOutlet=\"SCHEME_REDEMPTION\"></ng-container>\n </div>\n <div class=\"coupon-section\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && !referEarnExist\">\n <div class=\"coupon-left\">\n <div class=\"coupon-icon\"><mat-icon>percent</mat-icon></div>\n <span class=\"coupon-text\" *ngIf=\"!responseData.billdetails?.couponId\">Apply\n Coupon</span>\n <span class=\"coupon-text\" *ngIf=\"responseData.billdetails?.couponId\">Coupon\n Applied</span>\n </div>\n <svg *ngIf=\"!responseData.billdetails?.couponId\" xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\"\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" class=\"chevron-icon\" (click)=\"openDialog(CouponList)\">\n <path d=\"m9 18 6-6-6-6\" />\n </svg>\n <span *ngIf=\"responseData.billdetails?.couponId\"\n (click)=\"removeCoupon($event)\"><mat-icon>close</mat-icon></span>\n </div>\n\n <div class=\"promo-banner mb-3\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && appointmentSettings?.videoCallProductsEnabled\">\n <div class=\"promo-banner-row\">\n <div class=\"promo-text\">\n <h3>See It Before You Buy It</h3>\n <p>Experience our designs in detail via video call</p>\n </div>\n <button class=\"see-live-btn\" [disabled]=\"!hasCartItems\" (click)=\"openSchedulePanel()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"lucide lucide-video\">\n <path d=\"m22 8-6 4 6 4V8Z\" />\n <rect width=\"14\" height=\"12\" x=\"2\" y=\"6\" rx=\"2\" ry=\"2\" />\n </svg>\n CONTINUE TO SCHEDULE\n </button>\n </div>\n <div class=\"video-selection-line\">{{videoSelectionLine}}</div>\n <a class=\"video-cart-hint\" *ngIf=\"videoCartCount > 0\" (click)=\"viewPendingVideoCart()\">{{videoCartCount}}\n item{{videoCartCount === 1 ? '' : 's'}} waiting in your Video Call cart \u2014 view it</a>\n </div>\n\n <div class=\"plan-details-container p-3 rounded-4 bg-white text-dark voucher-details\"\n *ngIf=\"referEarnExist && this?.redemptionPoints?.availablePoints > 0\">\n <div class=\"fs-14 fw-500\">\n Rewards Available\n </div>\n <div class=\"d-flex justify-content-between align-items-start border-bottom pb-2\">\n <div class=\"avb_pts mt-2 mb-2\">\n <span class=\"fs-16 fw-500 total_points text-secondary\">\n <span class=\" fs-18 fw-600 text-dark\">{{(this?.redemptionPoints?.availablePoints || 0).toFixed(2)}}</span>\n pts\n </span>\n <div class=\"total_value fs-12 text-secondary\">\n = max \u20B9{{(this?.redemptionPoints?.pointsConvertedRupees || 0).toFixed(2)}} discount\n </div>\n </div>\n <div class=\"wallte_icon\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/777779c1775200561187wallet_(1).png\" alt=\"\">\n </div>\n </div>\n <div class=\"d-flex justify-content-between align-items-center mt-3\">\n <div class=\"redemable_text\">\n <div class=\"title_text\">\n <div class=\"fs-14 fw-500\">\n Redeem Points\n </div>\n <div class=\"fs-13 fs-400\">\n Use your points for discount\n </div>\n </div>\n </div>\n <div class=\"toggle_btn\">\n <label class=\"switch\">\n <input type=\"checkbox\" id=\"toggleSwitch\" [checked]=\"isPointsRedeeming\"\n (click)=\"onPointsRedeemingChange($event)\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n </div>\n <div class=\"mt-3 success_selected w-100 applied-coupon-card\" *ngIf=\"isPointsRedeeming\">\n <div class=\"d-flex align-items-start gap-2\">\n <div class=\"success_icon\">\n <mat-icon class=\"d-flex justify-content-center align-items-center text-success\">check_circle</mat-icon>\n </div>\n <div class=\"success_text\">\n <div class=\"fs-13 fw-500\">\n You're saving \u20B9\n {{totalSavingAmt || 0}}\n </div>\n <div class=\"fs-12 fs-400 text-success\">\n {{totalSavingPoints}} points remaining after redemption\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Existing coupon row (keep as-is) -->\n <div class=\"coupon-section d-flex flex-column voucher-details\" [id]=\"data?.id\"\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist\">\n <div class=\"d-flex justify-content-between align-items-center w-100\">\n <div class=\"coupon-left\">\n Apply Coupon\n </div>\n <div (click)=\"addRedemptionCoupon(RedemptionVouchers)\">View All</div>\n </div>\n\n <!-- Applied Coupon Success Banner -->\n <div class=\"applied-coupon-card w-100 mt-3 d-flex align-items-center justify-content-between\"\n *ngIf=\"selectedVoucherId\">\n <div class=\"applied-coupon-left d-flex align-items-center gap-3\">\n <mat-icon class=\"success-check\">check_circle</mat-icon>\n <div class=\"applied-coupon-info\">\n <div class=\"applied-coupon-code\">Coupon {{ selectedVoucherCode }} applied!</div>\n <div class=\"applied-coupon-saving\">You're saving\n <span *ngIf=\"this.couponValueType === 'AMOUNT'\">\u20B9 {{selectedVoucherAmount || 0}}</span>\n <span *ngIf=\"this.couponValueType === 'PERCENTAGE'\"> {{selectedVoucherPercentage || 0}}%</span>\n </div>\n\n </div>\n </div>\n <div class=\"remove-coupon-btn fs-14 fw-500 text-secondary cursor-pointer\"\n (click)=\"removeRedemptionCoupon($event)\">Remove</div>\n </div>\n </div>\n\n <div class=\"delivery-section\" *ngIf=\"getUrl()\">\n <div class=\"delivery-header\">\n <mat-icon>gps_fixed</mat-icon>\n <span>Delivering to</span>\n <span class=\"pincode\">{{pincode}}</span>\n <!-- <a class=\"change-link\">Change Pincode</a> -->\n </div>\n </div>\n\n <div class=\"summary-section\">\n <div class=\"summary-title\">Summary</div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Subtotal</span>\n <span class=\"summary-value\">\u20B9{{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && referEarnExist && isPointsRedeeming\">\n <span class=\"summary-label\">Points Redeemed</span>\n <span class=\"summary-value\">- \u20B9{{ totalSavingAmt || 0 }}</span>\n </div>\n\n <div class=\"summary-row\"\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'AMOUNT' && appliedVoucher)\">\n <span class=\"summary-label\">Voucher Applied</span>\n <span class=\"summary-value\">- \u20B9{{ selectedVoucherAmount || 0 }}</span>\n </div>\n\n <div class=\"summary-row\"\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'PERCENTAGE' && appliedVoucher)\">\n <span class=\"summary-label\">Voucher Applied</span>\n <span class=\"summary-value\">- \u20B9{{ percentageReduced || 0 }}</span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.discountAmount\">\n <span class=\"summary-label\">Discount Amount</span>\n <span class=\"summary-value\">\n {{('\u20B9' + (responseData?.billdetails?.discountAmount | number: '1.0-2')) }}\n </span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Shipping</span>\n <span class=\"summary-value\"\n [ngClass]=\"{'savings': !responseData?.billdetails?.deliveryCharges || responseData.billdetails.deliveryCharges <= 0}\">\n {{ (responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0) ? ('\u20B9' +\n (responseData.billdetails.deliveryCharges | number: '1.0-2')) : 'Free' }}\n </span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Estimated Tax</span>\n <span class=\"summary-value\">\u20B9{{((!responseData.billdetails?.couponId ?\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\n number: '1.0-2'}}</span>\n </div>\n\n <div class=\"summary-row total-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Total</span>\n <!-- <span class=\"summary-value\">\u20B9{{ responseData?.totalAmount | number: '1.0-2' }}</span> -->\n <span class=\"total-value\" *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{ responseData?.totalAmount |\n number: '1.0-2' }}</span>\n\n <span class=\"total-value\" *ngIf=\"isPointsRedeeming\">\u20B9{{ (responseData?.totalAmount - (totalSavingAmt || 0)) |\n number: '1.0-2' }}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\n (selectedVoucherAmount || 0)) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\n (percentageReduced || 0)) | number:\n '1.0-2' }}</span>\n </div>\n </div>\n <button class=\"place-order-btn\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n *ngIf=\"cartType === 'SHOPPING'\" [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\n Shopping'}}</button>\n <button class=\"place-order-btn mt-0\" (click)=\"edit ? '' : proceedToCheckout()\" simpoButtonDirective\n *ngIf=\"cartType === 'SHOPPING'\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout\n Cart'}}</button>\n\n </div>\n </div>\n <!-- <ng-container *ngIf=\"recommededData?.length\">\n <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\"\n [responseData]=\"recommededData\"></simpo-featured-products>\n </ng-container> -->\n</ng-template>\n<ng-template #CHECKOUTPAGE>\n <div class=\"checkout-left-panel\">\n <div class=\"checkout-main-content\">\n <!-- <div class=\"delivery-options\">\n <div class=\"delivery-option active\">\n <div class=\"delivery-icon\"></div>\n HOME DELIVERY\n </div>\n <div class=\"delivery-option\">\n <div class=\"delivery-icon\"></div>\n STORE PICK-UP\n </div>\n </div> -->\n\n <div class=\"section-title\">Shipping Address</div>\n\n <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\n <div class=\"address-info\">\n <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\n <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\n {{defaultAddress?.stateName}}</div>\n <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\n </div>\n </div>\n\n <div class=\"addLinks h-100\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\n <mat-icon>add</mat-icon>\n </div>\n\n <button class=\"change-address-btn\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">CHANGE OR ADD ADDRESS</button>\n\n <button class=\"btn w-100 mt-1 payment-btn\" (click)=\"proceedToPayment()\" simpoButtonDirective\n *ngIf=\"defaultAddress && !placeOrderLoader\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">\n Place Order\n </button>\n <button class=\"btn w-100 mt-1 payment-btn\" simpoButtonDirective *ngIf=\"defaultAddress && placeOrderLoader\"\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\">\n Loading...\n </button>\n\n </div>\n </div>\n\n <div class=\"checkout-right-panel\">\n <div class=\"order-summary\">\n <div class=\"summary-title\">Order Summary</div>\n\n <div class=\"checkout-product\">\n <div class=\"product-item\" *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\n <img [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-image\"\n alt=\"\">\n <div class=\"product-details\">\n <div class=\"product-name\">{{item.itemName}}</div>\n <div class=\"product-quantity\">Quantity: {{item.quantity}}</div>\n <div class=\"product-price\">\u20B9{{(item.sellingPrice * item.quantity) | number: '1.0-2'}}</div>\n </div>\n </div>\n\n </div>\n\n <div class=\"price-breakdown\">\n <div class=\"price-row\">\n <span>Total Price</span>\n <span>\u20B9{{(responseData?.billdetails?.totalNetValue\n ?? 0) | number: '1.0-2'}}</span>\n </div>\n <div class=\"price-row\">\n <span>Total Tax</span>\n <span>\u20B9{{((!responseData.billdetails?.couponId ?\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\n number:\n '1.0-2'}}</span>\n </div>\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && cartInfo?.billdetails?.orraSchemeRedeemedAmount\">\n <span class=\"summary-label\">Redeem Amount</span>\n <span class=\"summary-value\">\u20B9{{(cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\n '1.0-2'}}</span>\n </div>\n\n <div class=\"price-row discount\" *ngIf=\"responseData?.billdetails?.discountAmount && !isJewellery\">\n <span>Coupon Discount</span>\n <span>- \u20B9{{responseData?.billdetails?.discountAmount\n | number: '1.0-2'}}</span>\n </div>\n <div class=\"price-row\"\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\n <span>Delivery Charge</span>\n <span>{{responseData.billdetails.deliveryCharges\n |\n number: '1.0-2'}}</span>\n </div>\n <div class=\"price-row total\" *ngIf=\"cartType === 'SHOPPING'\">\n <span>TOTAL AMOUNT</span>\n <span *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{(responseData?.totalAmount ?? 0) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"isPointsRedeeming\">\u20B9{{(responseData?.totalAmount - (totalSavingAmt || 0)) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\n (selectedVoucherAmount || 0)) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\n (responseData?.totalAmount * (selectedVoucherPercentage / 100) || 0)) | number:\n '1.0-2' }}</span>\n </div>\n </div>\n </div>\n\n </div>\n</ng-template>\n\n<ng-template #CARTITEM let-products=\"data\">\n <div class=\"cart-item\" *ngFor=\"let item of products\" [style.color]=\"fontColor\">\n <div class=\"item-left\">\n <div class=\"item-image\">\n <img class=\"item-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\n (click)=\"goToProductDetails(item)\" style=\"cursor: pointer;\">\n </div>\n <div class=\"item-details\">\n <h3 class=\"item-title\">{{item.itemName}}</h3>\n <div class=\"item-subtitle\" *ngIf=\"item.itemVariant\">\n <span *ngFor=\"let varient of getKeys(item.itemVariant.properties); let last = last\">\n {{ item.itemVariant.properties[varient] | titlecase }}<span *ngIf=\"!last\">, </span>\n </span>\n </div>\n </div>\n </div>\n\n <div class=\"item-right\">\n <div class=\"quantity-control\" *ngIf=\"cartType === 'SHOPPING'\">\n <button class=\"qty-btn px-2\" (click)=\"decreaseQty(item)\" [disabled]=\"item.quantity === 1\">\n <mat-icon>remove</mat-icon>\n </button>\n <span class=\"qty-value px-3\">{{item.quantity}}</span>\n <button class=\"qty-btn px-2\" (click)=\"increaseQty(item)\">\n <mat-icon>add</mat-icon>\n </button>\n </div>\n\n <div class=\"item-price\">\n \u20B9{{item.sellingPrice | number: '1.0-2'}}\n </div>\n\n <div class=\"delete-btn-circle\" (click)=\"removeItem(item)\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trash-2\">\n <path d=\"M3 6h18\" />\n <path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\" />\n <path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\" />\n <line x1=\"10\" x2=\"10\" y1=\"11\" y2=\"17\" />\n <line x1=\"14\" x2=\"14\" y1=\"11\" y2=\"17\" />\n </svg>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #EMPTYITEM>\n <section class=\"empty-cart w-100 d-flex align-items-center justify-content-center\">\n <div class=\"empty-cart-container d-flex flex-column\">\n <div class=\"cart-image\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\" [appImageEditor]=\"edit || false\"\n [imageData]=\"data?.content?.image\" [sectionId]=\"data?.id\">\n </div>\n <div class=\"cart-text content-side\">\n <ng-container *ngFor=\"let text of data?.content?.inputText\">\n <div class=\"d-flex justify-content-center\"\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\" [isRTE]=\"text.isRTE\"></simpo-text-editor>\n </div>\n </ng-container>\n </div>\n <button class=\"place-order-btn mx-auto w-fit\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\n [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\n Shopping'}}</button>\n </div>\n </section>\n</ng-template>\n\n<ng-template #SCHEME_REDEMPTION>\n <div class=\"modal-body\">\n <div class=\"scheme-option\" *ngFor=\"let scheme of schemeList\" (click)=\"redeemScheme(scheme, false)\"\n [style.borderColor]=\"cartInfo.billdetails.orraSchemeCode ? styles?.background?.color : ''\">\n <label for=\"individual\" class=\"scheme-card\">\n <div class=\"scheme-info d-flex gap-1\">\n <div class=\"form-check-radio\">\n <input class=\"form-check-input-radio\" type=\"radio\" name=\"flexRadioDefault\" id=\"flexRadioDefault2\">\n </div>\n <div class=\"right-side\">\n <div class=\"scheme-name\">\n <div class=\"scheme-title\">Individual Investment Scheme</div>\n <div class=\"scheme-monthly\">\u20B98000/M</div>\n </div>\n <div class=\"scheme-details\">\n <span class=\"scheme-id\">GPP Id: {{scheme.GPPId}}</span>\n <!-- <span class=\"scheme-maturity\">Maturity Date: 12 April 2024</span> -->\n </div>\n <div class=\"scheme-amount\">\u20B9{{scheme.amount}}</div>\n </div>\n </div>\n </label>\n </div>\n <div class=\"reedem_error d-flex justify-content-center align-items-center\" *ngIf=\"showReedemError\">\n Please add more \u20B9{{vaildAmount}} to reedem this scheme\n </div>\n </div>\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;flex-direction:column;gap:10px;border-radius:8px;border:1px solid #e2e8f0}.promo-banner-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.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:disabled{color:#94a3b8;cursor:not-allowed;box-shadow:none}.see-live-btn:disabled:hover{background:#fff;border-color:#e2e8f0;transform:none}.see-live-btn svg{color:#6366f1}.video-selection-line{font-size:.8rem;color:#64748b}.video-cart-hint{font-size:.8rem;color:#6366f1;cursor:pointer;text-decoration:underline;width:max-content}.schedule-panel-overlay{position:fixed;inset:0;background:#141a2666;z-index:1200}.schedule-panel-backdrop{position:absolute;inset:0;border:none;background:none;cursor:default;padding:0}.schedule-panel{position:absolute;top:0;right:0;bottom:0;width:400px;max-width:92vw;background:#fff;box-shadow:-20px 0 50px -20px #141a2659;display:flex;flex-direction:column}.schedule-panel-header{flex:none;padding:20px 22px;border-bottom:1px solid #e2e8f0;display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.schedule-panel-heading{min-width:0}.schedule-panel-title{font-size:17px;font-weight:600;color:#1b2436;line-height:1.3;margin-bottom:2px}.schedule-panel-subtitle{font-size:12.5px;color:#64748b;line-height:1.3}.schedule-panel-close{flex:none;border:none;background:none;cursor:pointer;color:#64748b;line-height:0;padding:3px;width:max-content}.schedule-panel-body{flex:1;min-height:0;overflow-y:auto;padding:16px 22px;display:flex;flex-direction:column;gap:10px}.schedule-panel-row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:8px;cursor:pointer;width:100%;background:#fff;border:1px solid #e2e8f0;text-align:left}.schedule-panel-row.selected{background:#f5f3ff;border-color:#c7d2fe}.schedule-panel-checkbox{width:18px;height:18px;flex:none;border:1.5px solid #cbd5e1;border-radius:4px;background:#fff;display:grid;place-items:center}.schedule-panel-checkbox.checked{background:#6366f1;border-color:#6366f1}.schedule-panel-checkbox mat-icon{color:#fff!important;font-size:13px!important;height:13px!important;width:13px!important}.schedule-panel-thumb{width:46px;height:46px;border-radius:6px;object-fit:cover;flex:none;background:#f3efe9}.schedule-panel-info{flex:1}.schedule-panel-name{font-size:13.5px;color:#1b2436}.schedule-panel-footer{flex:none;padding:16px 22px;border-top:1px solid #e2e8f0;display:flex;flex-direction:column;gap:10px}.schedule-panel-selection-line{font-size:11.5px;color:#64748b}.schedule-panel-cta{width:100%;height:48px;border:none;border-radius:8px;background:#7c3a11;color:#fff;font-size:14px;font-weight:600;cursor:pointer}.schedule-panel-cta:disabled{background:#cbd5e1;cursor:not-allowed}.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.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "directive", type:
|
|
10951
|
+
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\">\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n <ng-container *ngIf=\"data\">\n <section [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\"\n [attr.class]=\"isMobile ? 'py-5 position-relative' : 'position-relative'\" simpoHover\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\"\n [ngClass]=\"!responseData?.orderedItems?.length ? 'no-items' : ''\">\n <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\"\n [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\"\n *ngIf=\"responseData?.orderedItems?.length && currentTab === 'ADDRESS'\">\n <span class=\"timeline\" (click)=\"currentTab = 'BAG'\">Bag</span>\n <div class=\"bar\"></div>\n <span class=\"timeline isActive\">Address</span>\n <div class=\"bar\"></div>\n <span class=\"timeline\" style=\"cursor: auto;\">Payment</span>\n </div>\n <div class=\"cart-tab-parent w-100\" *ngIf=\"currentTab == 'BAG' && (appointmentSettings?.homeVisitProductsEnabled || appointmentSettings?.videoCallProductsEnabled)\">\n <!-- && appointmentSettings?.homeVisitProductsEnabled\" -->\n <div class=\"cart-tabs\" [id]=\"data?.id\">\n <div class=\"selected-cart-tab\" [ngClass]=\"{'selected-cart-tab': cartType==='SHOPPING'}\"\n (click)=\"cartType='SHOPPING'\">Shopping Cart ({{responseData?.orderedItems?.length ?? 0}})</div>\n <div [ngClass]=\"{'selected-cart-tab': cartType==='BOOKING'}\" (click)=\"cartType='BOOKING'\">Booking Cart\n ({{getTotalBookingItems}})</div>\n </div>\n </div>\n <div class=\"cart-parent\" [spacingHorizontal]=\"stylesLayout\" *ngIf=\"currentTab === 'BAG'\" [id]=\"data?.id\"\n [simpoAnimation]=\"styles?.animation\">\n <ng-container>\n <ng-container *ngIf=\"cartType === 'SHOPPING'\">\n <ng-container\n *ngTemplateOutlet=\"(responseData?.orderedItems?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"cartType === 'BOOKING'\">\n <div class=\"w-100\">\n <simpo-booking-cart-groups></simpo-booking-cart-groups>\n </div>\n </ng-container>\n </ng-container>\n </div>\n <div class=\"d-flex checkoutPage\"\n *ngIf=\"(responseData?.orderedItems?.length || 0) > 0 && currentTab === 'ADDRESS'\">\n <ng-container *ngTemplateOutlet=\"CHECKOUTPAGE\">\n </ng-container>\n </div>\n\n\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\n [isEcommerce]=\"true\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n\n </section>\n\n <div class=\"schedule-panel-overlay\" *ngIf=\"schedulePanelOpen\">\n <button type=\"button\" class=\"schedule-panel-backdrop\" (click)=\"closeSchedulePanel()\"></button>\n <div class=\"schedule-panel\">\n <div class=\"schedule-panel-header\">\n <div class=\"schedule-panel-heading\">\n <div class=\"schedule-panel-title\">Schedule a Video Call</div>\n <div class=\"schedule-panel-subtitle\">Choose which pieces to include</div>\n </div>\n <button type=\"button\" class=\"schedule-panel-close\" (click)=\"closeSchedulePanel()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n <div class=\"schedule-panel-body\">\n <button type=\"button\" class=\"schedule-panel-row\" *ngFor=\"let item of responseData?.orderedItems\"\n [class.selected]=\"isPanelSelected(item)\" (click)=\"togglePanelSelection(item)\">\n <div class=\"schedule-panel-checkbox\" [class.checked]=\"isPanelSelected(item)\">\n <mat-icon *ngIf=\"isPanelSelected(item)\">check</mat-icon>\n </div>\n <img class=\"schedule-panel-thumb\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\">\n <div class=\"schedule-panel-info\">\n <div class=\"schedule-panel-name\">{{item.itemName}}</div>\n </div>\n </button>\n </div>\n <div class=\"schedule-panel-footer\">\n <div class=\"schedule-panel-selection-line\">{{panelSelectionLine}}</div>\n <button type=\"button\" class=\"schedule-panel-cta\" [disabled]=\"panelInvalid\" (click)=\"confirmSchedulePanel()\">Continue</button>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!data\">\n <section class=\"cart-window\">\n <div class=\"heading-large lh-2 mb-3 header-sec\">\n <div class=\"d-flex align-items-center\">\n <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\n <span>Your Cart</span>\n </div>\n <div class=\"saving\"></div>\n </div>\n <div class=\"offers\">\n <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\n <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\n <span>Avail Offers / Coupons</span>\n </div>\n <mat-icon>keyboard_arrow_right</mat-icon>\n </div>\n <div class=\"small-items\">\n <ng-container *ngFor=\"let item of responseData?.orderedItems\">\n <div class=\"small-item\">\n <div class=\"d-flex\" style=\"gap: 5px;\">\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n class=\"small-product-img\"\n [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\n (click)=\"goToProductDetails(item)\">\n </div>\n <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\n <div class=\"small-item-quantity\">\n <span class=\"cursor\">-</span>\n <span>{{item.quantity}}</span>\n <span class=\"cursor\">+</span>\n </div>\n <div class=\"small-item-price\">\n <div class=\"price-with-tax\">\n <span [innerHTML]='currency'></span> {{(item.sellingPrice) | number: '1.0-2'}}\n </div>\n <!-- <div class=\"price-with-tax\">\n <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\n </div> -->\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"fotter-sec\">\n <div class=\"delivery-add d-flex\">\n <mat-icon>home</mat-icon>\n <div class=\"address\">Tetsting</div>\n </div>\n <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span\n style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span>\n {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\n </div>\n </section>\n </ng-container>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '40vh',\n 'border-radius': '10px',\n 'position': 'relative',\n 'right': '5px'\n}\">\n</ngx-skeleton-loader>\n\n<ng-template #CouponList>\n <section class=\"coupons-listing-section\">\n <div class=\"coupon-heading\">\n <div class=\"back-btn\" (click)=\"closeDialogRef()\">\n <mat-icon>keyboard_arrow_left</mat-icon>\n </div>\n <div class=\"header-text\">Apply Coupon</div>\n </div>\n <!-- <div class=\"coupon-search-sec\">\n <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\n <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\n </div> -->\n <div class=\"coupon-listing\">\n <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\n <div class=\"coupon-details\"\n [ngStyle]=\"{'background-color': !couponDetails.applicable ? '#FFF2F4' : '#EDFFFA'}\"\n *ngIf=\"couponDetails?.status\">\n <div class=\"details__coupon-heading\">\n <div class=\"coupon-brief\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name\" [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\n {{ couponDetails.couponCode | uppercase }}</div>\n <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn\" [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\n [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : ''}\"\n (click)=\"applyCoupon(couponDetails)\">Apply</div>\n </div>\n </div>\n <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\n <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\n <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\n </div> -->\n </div>\n <ng-container>\n <!-- *ngIf=\"couponDetails.status\" -->\n <div class=\"details-divider\"></div>\n <ul class=\"details__coupon-terms\">\n <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\n </ul>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n <ng-template #showEmptyScreen>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Coupon Available</div>\n <div class=\"empty-screen__secondary-text\">\n Looks like there are no coupons at the moment\n </div>\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\n </div>\n </ng-template>\n </div>\n </section>\n</ng-template>\n\n<ng-template #RedemptionVouchers>\n <section class=\"vouchers-listing-section d-flex flex-column\">\n <div class=\"coupon-heading d-flex align-items-center gap-2 p-3 fs-18 fw-600 border-bottom\">\n <div class=\"back-btn cursor-pointer d-flex align-items-center\" (click)=\"closeDialogRef()\">\n <mat-icon>keyboard_arrow_left</mat-icon>\n </div>\n <div class=\"header-text\">Coupons & Vouchers</div>\n </div>\n\n <!-- <div class=\"d-flex align-items-center tab-container justify-content-between gap-2 p-3\">\n <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'COUPONS'}\"\n (click)=\"redemptionType = 'COUPONS'\">\n Coupons\n </div>\n <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'VOUCHERS'}\"\n (click)=\"redemptionType = 'VOUCHERS'\">\n Vouchers\n </div>\n </div> -->\n\n <div class=\"coupon-listing d-flex flex-column gap-3 pt-3\" *ngIf=\"redemptionType === 'COUPONS'\">\n <div class=\"d-flex align-items-center tab-container gap-3\">\n <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\n [ngClass]=\"{'active-coupon': redemptionCouponType === 'REWARDS'}\" (click)=\"redemptionCouponType = 'REWARDS'\">\n Rewards\n </div>\n <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\n [ngClass]=\"{'active-coupon': redemptionCouponType === 'DISCOUNTS'}\"\n (click)=\"redemptionCouponType = 'DISCOUNTS'\">\n Discounts\n </div>\n </div>\n <ng-container *ngIf=\"redemptionCouponType === 'REWARDS'\">\n <ng-container *ngIf=\"(listRedemptionCoupons?.vouchers?.length > 0) ; else showEmptyScreen\">\n <ng-container *ngFor=\"let voucher of listRedemptionCoupons?.vouchers; let idx = index\">\n <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\n\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\n <div class=\"coupon-desc fs-12 text-secondary\">\n Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%'\n }}\n off on your payment\n </div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">\n Apply</div>\n </div>\n </div>\n\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n <div class=\"code-label\">Code</div>\n <div class=\"code-value\">{{ voucher.voucherCode }}</div>\n </div>\n\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\n <span class=\"separator text-secondary\">|</span>\n <span class=\"validity\">\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\n Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\n </span>\n <span class=\"separator text-secondary\" *ngIf=\"voucher.maxRedeemableAmount\">|</span>\n <span class=\"min-order\" *ngIf=\"voucher.maxRedeemableAmount\">Max Redeemable Amount: \u20B9{{\n voucher.maxRedeemableAmount | number }}</span>\n </div>\n\n <!-- <div class=\"terms-link\">View terms & conditions</div> -->\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"redemptionCouponType === 'DISCOUNTS'\">\n <ng-container *ngIf=\"(couponList.length > 0); else showEmptyDiscounts\">\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\n <div class=\"voucher-details\" *ngIf=\"couponDetails?.status\">\n\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name fs-16 fw-600 mb-1\"\n [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\n {{ couponDetails.couponCode | uppercase }}\n </div>\n <div class=\"coupon-desc fs-12 text-secondary\">\n {{ couponDetails.discountDescription | titlecase }}\n </div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\"\n [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\n [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : 'not-allowed'}\"\n (click)=\"applyCoupon(couponDetails)\">\n Apply\n </div>\n </div>\n </div>\n\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n <div class=\"code-label\">Code</div>\n <div class=\"code-value\">{{ couponDetails.couponCode | uppercase }}</div>\n </div>\n\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n <span class=\"validity\">\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\n {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}\n </span>\n </div>\n\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-template #showEmptyDiscounts>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Discount Coupons Available</div>\n <div class=\"empty-screen__secondary-text\">\n Looks like there are no discount coupons at the moment\n </div>\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\n </div>\n </ng-template>\n\n <ng-template #showEmptyScreen>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Coupons Available</div>\n <div class=\"empty-screen__secondary-text\">Looks like there are no coupons</div>\n </div>\n </ng-template>\n </div>\n\n <div class=\"coupon-listing d-flex flex-column gap-3\" *ngIf=\"redemptionType === 'VOUCHERS'\">\n <ng-container *ngIf=\"listRedemptionVouchers?.vouchers?.length > 0; else showEmptyScreen\">\n <ng-container *ngFor=\"let voucher of listRedemptionVouchers?.vouchers; let idx = index\">\n <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\n\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\n <div class=\"coupon-desc fs-12 text-secondary\">\n Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%' }}\n off on your payment\n </div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">Apply\n </div>\n </div>\n </div>\n\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n <div class=\"code-label\">Code</div>\n <div class=\"code-value\">{{ voucher.voucherCode }}</div>\n </div>\n\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\n <span class=\"separator text-secondary\">|</span>\n <span class=\"validity\">\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\n Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\n </span>\n </div>\n\n <!-- <div class=\"terms-link\">View terms & conditions</div> -->\n </div>\n </ng-container>\n </ng-container>\n\n <ng-template #showEmptyScreen>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Vouchers Available</div>\n <div class=\"empty-screen__secondary-text\">Looks like there are no vouchers</div>\n </div>\n </ng-template>\n </div>\n </section>\n</ng-template>\n\n<ng-template #CARTPAGE>\n <div class=\"container\">\n <div class=\"main-content\">\n <div class=\"cart-items\">\n <div class=\"cart-header\">\n <h2>Your Cart</h2>\n </div>\n <ng-container\n *ngTemplateOutlet=\"CARTITEM;context:{data: responseData?.orderedItems}\"></ng-container>\n </div>\n </div>\n\n <div class=\"sidebar\">\n <div class=\"reedem-section d-flex flex-column align-items-center\" *ngIf=\"getUrl()\">\n <div class=\"justify-content-between d-flex align-items-center w-100 redeem-section-text\">Redeem Section Amount\n <div class=\"toogle-switch\">\n <div class=\"form-check form-switch\">\n <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" role=\"switch\" id=\"flexSwitchCheckChecked\"\n [checked]=\"selectMatureScheme\" (change)=\"onToggleChange()\">\n </div>\n </div>\n </div>\n <!-- <div class=\"select_matured_text w-100 text-start cursor-pointer\"\n *ngIf=\"selectMatureScheme && !selectedRedemption\" (click)=\"selectScheme()\">\n Select Matured Scheme\n </div> -->\n <!-- <div class=\"select_matured_text d-flex flex-column gap-2 w-100 text-start cursor-pointer\"\n *ngIf=\"selectedRedemption\">\n Selected Scheme\n <div class=\"d-flex w-100 justify-content-between align-items-center group_invest\">Group Investment\n scheme-5000/M <span>Change</span></div>\n <div class=\"d-flex justify-content-between align-items-center w-100 redeem_amount\">Redeemable Amount\n <span>\u20B9{{selectedRedmpationData.selectedAmount}}</span>\n </div>\n </div> -->\n </div>\n <div class=\"scheme-section\" *ngIf=\"selectMatureScheme\">\n <ng-container *ngTemplateOutlet=\"SCHEME_REDEMPTION\"></ng-container>\n </div>\n <div class=\"coupon-section\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && !referEarnExist\">\n <div class=\"coupon-left\">\n <div class=\"coupon-icon\"><mat-icon>percent</mat-icon></div>\n <span class=\"coupon-text\" *ngIf=\"!responseData.billdetails?.couponId\">Apply\n Coupon</span>\n <span class=\"coupon-text\" *ngIf=\"responseData.billdetails?.couponId\">Coupon\n Applied</span>\n </div>\n <svg *ngIf=\"!responseData.billdetails?.couponId\" xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\"\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" class=\"chevron-icon\" (click)=\"openDialog(CouponList)\">\n <path d=\"m9 18 6-6-6-6\" />\n </svg>\n <span *ngIf=\"responseData.billdetails?.couponId\"\n (click)=\"removeCoupon($event)\"><mat-icon>close</mat-icon></span>\n </div>\n\n <div class=\"promo-banner mb-3\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && appointmentSettings?.videoCallProductsEnabled\">\n <div class=\"promo-banner-row\">\n <div class=\"promo-text\">\n <h3>See It Before You Buy It</h3>\n <p>Experience our designs in detail via video call</p>\n </div>\n <button class=\"see-live-btn\" [disabled]=\"!hasCartItems\" (click)=\"openSchedulePanel()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"lucide lucide-video\">\n <path d=\"m22 8-6 4 6 4V8Z\" />\n <rect width=\"14\" height=\"12\" x=\"2\" y=\"6\" rx=\"2\" ry=\"2\" />\n </svg>\n CONTINUE TO SCHEDULE\n </button>\n </div>\n <div class=\"video-selection-line\">{{videoSelectionLine}}</div>\n <a class=\"video-cart-hint\" *ngIf=\"videoCartCount > 0\" (click)=\"viewPendingVideoCart()\">{{videoCartCount}}\n item{{videoCartCount === 1 ? '' : 's'}} waiting in your Video Call cart \u2014 view it</a>\n </div>\n\n <div class=\"plan-details-container p-3 rounded-4 bg-white text-dark voucher-details\"\n *ngIf=\"referEarnExist && this?.redemptionPoints?.availablePoints > 0\">\n <div class=\"fs-14 fw-500\">\n Rewards Available\n </div>\n <div class=\"d-flex justify-content-between align-items-start border-bottom pb-2\">\n <div class=\"avb_pts mt-2 mb-2\">\n <span class=\"fs-16 fw-500 total_points text-secondary\">\n <span class=\" fs-18 fw-600 text-dark\">{{(this?.redemptionPoints?.availablePoints || 0).toFixed(2)}}</span>\n pts\n </span>\n <div class=\"total_value fs-12 text-secondary\">\n = max \u20B9{{(this?.redemptionPoints?.pointsConvertedRupees || 0).toFixed(2)}} discount\n </div>\n </div>\n <div class=\"wallte_icon\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/777779c1775200561187wallet_(1).png\" alt=\"\">\n </div>\n </div>\n <div class=\"d-flex justify-content-between align-items-center mt-3\">\n <div class=\"redemable_text\">\n <div class=\"title_text\">\n <div class=\"fs-14 fw-500\">\n Redeem Points\n </div>\n <div class=\"fs-13 fs-400\">\n Use your points for discount\n </div>\n </div>\n </div>\n <div class=\"toggle_btn\">\n <label class=\"switch\">\n <input type=\"checkbox\" id=\"toggleSwitch\" [checked]=\"isPointsRedeeming\"\n (click)=\"onPointsRedeemingChange($event)\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n </div>\n <div class=\"mt-3 success_selected w-100 applied-coupon-card\" *ngIf=\"isPointsRedeeming\">\n <div class=\"d-flex align-items-start gap-2\">\n <div class=\"success_icon\">\n <mat-icon class=\"d-flex justify-content-center align-items-center text-success\">check_circle</mat-icon>\n </div>\n <div class=\"success_text\">\n <div class=\"fs-13 fw-500\">\n You're saving \u20B9\n {{totalSavingAmt || 0}}\n </div>\n <div class=\"fs-12 fs-400 text-success\">\n {{totalSavingPoints}} points remaining after redemption\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Existing coupon row (keep as-is) -->\n <div class=\"coupon-section d-flex flex-column voucher-details\" [id]=\"data?.id\"\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist\">\n <div class=\"d-flex justify-content-between align-items-center w-100\">\n <div class=\"coupon-left\">\n Apply Coupon\n </div>\n <div (click)=\"addRedemptionCoupon(RedemptionVouchers)\">View All</div>\n </div>\n\n <!-- Applied Coupon Success Banner -->\n <div class=\"applied-coupon-card w-100 mt-3 d-flex align-items-center justify-content-between\"\n *ngIf=\"selectedVoucherId\">\n <div class=\"applied-coupon-left d-flex align-items-center gap-3\">\n <mat-icon class=\"success-check\">check_circle</mat-icon>\n <div class=\"applied-coupon-info\">\n <div class=\"applied-coupon-code\">Coupon {{ selectedVoucherCode }} applied!</div>\n <div class=\"applied-coupon-saving\">You're saving\n <span *ngIf=\"this.couponValueType === 'AMOUNT'\">\u20B9 {{selectedVoucherAmount || 0}}</span>\n <span *ngIf=\"this.couponValueType === 'PERCENTAGE'\"> {{selectedVoucherPercentage || 0}}%</span>\n </div>\n\n </div>\n </div>\n <div class=\"remove-coupon-btn fs-14 fw-500 text-secondary cursor-pointer\"\n (click)=\"removeRedemptionCoupon($event)\">Remove</div>\n </div>\n </div>\n\n <div class=\"delivery-section\" *ngIf=\"getUrl()\">\n <div class=\"delivery-header\">\n <mat-icon>gps_fixed</mat-icon>\n <span>Delivering to</span>\n <span class=\"pincode\">{{pincode}}</span>\n <!-- <a class=\"change-link\">Change Pincode</a> -->\n </div>\n </div>\n\n <div class=\"summary-section\">\n <div class=\"summary-title\">Summary</div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Subtotal</span>\n <span class=\"summary-value\">\u20B9{{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && referEarnExist && isPointsRedeeming\">\n <span class=\"summary-label\">Points Redeemed</span>\n <span class=\"summary-value\">- \u20B9{{ totalSavingAmt || 0 }}</span>\n </div>\n\n <div class=\"summary-row\"\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'AMOUNT' && appliedVoucher)\">\n <span class=\"summary-label\">Voucher Applied</span>\n <span class=\"summary-value\">- \u20B9{{ selectedVoucherAmount || 0 }}</span>\n </div>\n\n <div class=\"summary-row\"\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'PERCENTAGE' && appliedVoucher)\">\n <span class=\"summary-label\">Voucher Applied</span>\n <span class=\"summary-value\">- \u20B9{{ percentageReduced || 0 }}</span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.discountAmount\">\n <span class=\"summary-label\">Discount Amount</span>\n <span class=\"summary-value\">\n {{('\u20B9' + (responseData?.billdetails?.discountAmount | number: '1.0-2')) }}\n </span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Shipping</span>\n <span class=\"summary-value\"\n [ngClass]=\"{'savings': !responseData?.billdetails?.deliveryCharges || responseData.billdetails.deliveryCharges <= 0}\">\n {{ (responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0) ? ('\u20B9' +\n (responseData.billdetails.deliveryCharges | number: '1.0-2')) : 'Free' }}\n </span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Estimated Tax</span>\n <span class=\"summary-value\">\u20B9{{((!responseData.billdetails?.couponId ?\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\n number: '1.0-2'}}</span>\n </div>\n\n <div class=\"summary-row total-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Total</span>\n <!-- <span class=\"summary-value\">\u20B9{{ responseData?.totalAmount | number: '1.0-2' }}</span> -->\n <span class=\"total-value\" *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{ responseData?.totalAmount |\n number: '1.0-2' }}</span>\n\n <span class=\"total-value\" *ngIf=\"isPointsRedeeming\">\u20B9{{ (responseData?.totalAmount - (totalSavingAmt || 0)) |\n number: '1.0-2' }}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\n (selectedVoucherAmount || 0)) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\n (percentageReduced || 0)) | number:\n '1.0-2' }}</span>\n </div>\n </div>\n <button class=\"place-order-btn\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n *ngIf=\"cartType === 'SHOPPING'\" [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\n Shopping'}}</button>\n <button class=\"place-order-btn mt-0\" (click)=\"edit ? '' : proceedToCheckout()\" simpoButtonDirective\n *ngIf=\"cartType === 'SHOPPING'\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout\n Cart'}}</button>\n\n </div>\n </div>\n <!-- <ng-container *ngIf=\"recommededData?.length\">\n <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\"\n [responseData]=\"recommededData\"></simpo-featured-products>\n </ng-container> -->\n</ng-template>\n<ng-template #CHECKOUTPAGE>\n <div class=\"checkout-left-panel\">\n <div class=\"checkout-main-content\">\n <!-- <div class=\"delivery-options\">\n <div class=\"delivery-option active\">\n <div class=\"delivery-icon\"></div>\n HOME DELIVERY\n </div>\n <div class=\"delivery-option\">\n <div class=\"delivery-icon\"></div>\n STORE PICK-UP\n </div>\n </div> -->\n\n <div class=\"section-title\">Shipping Address</div>\n\n <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\n <div class=\"address-info\">\n <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\n <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\n {{defaultAddress?.stateName}}</div>\n <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\n </div>\n </div>\n\n <div class=\"addLinks h-100\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\n <mat-icon>add</mat-icon>\n </div>\n\n <button class=\"change-address-btn\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">CHANGE OR ADD ADDRESS</button>\n\n <button class=\"btn w-100 mt-1 payment-btn\" (click)=\"proceedToPayment()\" simpoButtonDirective\n *ngIf=\"defaultAddress && !placeOrderLoader\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">\n Place Order\n </button>\n <button class=\"btn w-100 mt-1 payment-btn\" simpoButtonDirective *ngIf=\"defaultAddress && placeOrderLoader\"\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\">\n Loading...\n </button>\n\n </div>\n </div>\n\n <div class=\"checkout-right-panel\">\n <div class=\"order-summary\">\n <div class=\"summary-title\">Order Summary</div>\n\n <div class=\"checkout-product\">\n <div class=\"product-item\" *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\n <img [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-image\"\n alt=\"\">\n <div class=\"product-details\">\n <div class=\"product-name\">{{item.itemName}}</div>\n <div class=\"product-quantity\">Quantity: {{item.quantity}}</div>\n <div class=\"product-price\">\u20B9{{(item.sellingPrice * item.quantity) | number: '1.0-2'}}</div>\n </div>\n </div>\n\n </div>\n\n <div class=\"price-breakdown\">\n <div class=\"price-row\">\n <span>Total Price</span>\n <span>\u20B9{{(responseData?.billdetails?.totalNetValue\n ?? 0) | number: '1.0-2'}}</span>\n </div>\n <div class=\"price-row\">\n <span>Total Tax</span>\n <span>\u20B9{{((!responseData.billdetails?.couponId ?\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\n number:\n '1.0-2'}}</span>\n </div>\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && cartInfo?.billdetails?.orraSchemeRedeemedAmount\">\n <span class=\"summary-label\">Redeem Amount</span>\n <span class=\"summary-value\">\u20B9{{(cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\n '1.0-2'}}</span>\n </div>\n\n <div class=\"price-row discount\" *ngIf=\"responseData?.billdetails?.discountAmount && !isJewellery\">\n <span>Coupon Discount</span>\n <span>- \u20B9{{responseData?.billdetails?.discountAmount\n | number: '1.0-2'}}</span>\n </div>\n <div class=\"price-row\"\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\n <span>Delivery Charge</span>\n <span>{{responseData.billdetails.deliveryCharges\n |\n number: '1.0-2'}}</span>\n </div>\n <div class=\"price-row total\" *ngIf=\"cartType === 'SHOPPING'\">\n <span>TOTAL AMOUNT</span>\n <span *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{(responseData?.totalAmount ?? 0) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"isPointsRedeeming\">\u20B9{{(responseData?.totalAmount - (totalSavingAmt || 0)) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\n (selectedVoucherAmount || 0)) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\n (responseData?.totalAmount * (selectedVoucherPercentage / 100) || 0)) | number:\n '1.0-2' }}</span>\n </div>\n </div>\n </div>\n\n </div>\n</ng-template>\n\n<ng-template #CARTITEM let-products=\"data\">\n <div class=\"cart-item\" *ngFor=\"let item of products\" [style.color]=\"fontColor\">\n <div class=\"item-left\">\n <div class=\"item-image\">\n <img class=\"item-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\n (click)=\"goToProductDetails(item)\" style=\"cursor: pointer;\">\n </div>\n <div class=\"item-details\">\n <h3 class=\"item-title\">{{item.itemName}}</h3>\n <div class=\"item-subtitle\" *ngIf=\"item.itemVariant\">\n <span *ngFor=\"let varient of getKeys(item.itemVariant.properties); let last = last\">\n {{ item.itemVariant.properties[varient] | titlecase }}<span *ngIf=\"!last\">, </span>\n </span>\n </div>\n </div>\n </div>\n\n <div class=\"item-right\">\n <div class=\"quantity-control\" *ngIf=\"cartType === 'SHOPPING'\">\n <button class=\"qty-btn px-2\" (click)=\"decreaseQty(item)\" [disabled]=\"item.quantity === 1\">\n <mat-icon>remove</mat-icon>\n </button>\n <span class=\"qty-value px-3\">{{item.quantity}}</span>\n <button class=\"qty-btn px-2\" (click)=\"increaseQty(item)\">\n <mat-icon>add</mat-icon>\n </button>\n </div>\n\n <div class=\"item-price\">\n \u20B9{{item.sellingPrice | number: '1.0-2'}}\n </div>\n\n <div class=\"delete-btn-circle\" (click)=\"removeItem(item)\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trash-2\">\n <path d=\"M3 6h18\" />\n <path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\" />\n <path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\" />\n <line x1=\"10\" x2=\"10\" y1=\"11\" y2=\"17\" />\n <line x1=\"14\" x2=\"14\" y1=\"11\" y2=\"17\" />\n </svg>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #EMPTYITEM>\n <section class=\"empty-cart w-100 d-flex align-items-center justify-content-center\">\n <div class=\"empty-cart-container d-flex flex-column\">\n <div class=\"cart-image\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\" [appImageEditor]=\"edit || false\"\n [imageData]=\"data?.content?.image\" [sectionId]=\"data?.id\">\n </div>\n <div class=\"cart-text content-side\">\n <ng-container *ngFor=\"let text of data?.content?.inputText\">\n <div class=\"d-flex justify-content-center\"\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\" [isRTE]=\"text.isRTE\"></simpo-text-editor>\n </div>\n </ng-container>\n </div>\n <button class=\"place-order-btn mx-auto w-fit\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\n [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\n Shopping'}}</button>\n </div>\n </section>\n</ng-template>\n\n<ng-template #SCHEME_REDEMPTION>\n <div class=\"modal-body\">\n <div class=\"scheme-option\" *ngFor=\"let scheme of schemeList\" (click)=\"redeemScheme(scheme, false)\"\n [style.borderColor]=\"cartInfo.billdetails.orraSchemeCode ? styles?.background?.color : ''\">\n <label for=\"individual\" class=\"scheme-card\">\n <div class=\"scheme-info d-flex gap-1\">\n <div class=\"form-check-radio\">\n <input class=\"form-check-input-radio\" type=\"radio\" name=\"flexRadioDefault\" id=\"flexRadioDefault2\">\n </div>\n <div class=\"right-side\">\n <div class=\"scheme-name\">\n <div class=\"scheme-title\">Individual Investment Scheme</div>\n <div class=\"scheme-monthly\">\u20B98000/M</div>\n </div>\n <div class=\"scheme-details\">\n <span class=\"scheme-id\">GPP Id: {{scheme.GPPId}}</span>\n <!-- <span class=\"scheme-maturity\">Maturity Date: 12 April 2024</span> -->\n </div>\n <div class=\"scheme-amount\">\u20B9{{scheme.amount}}</div>\n </div>\n </div>\n </label>\n </div>\n <div class=\"reedem_error d-flex justify-content-center align-items-center\" *ngIf=\"showReedemError\">\n Please add more \u20B9{{vaildAmount}} to reedem this scheme\n </div>\n </div>\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;flex-direction:column;gap:10px;border-radius:8px;border:1px solid #e2e8f0}.promo-banner-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.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:disabled{color:#94a3b8;cursor:not-allowed;box-shadow:none}.see-live-btn:disabled:hover{background:#fff;border-color:#e2e8f0;transform:none}.see-live-btn svg{color:#6366f1}.video-selection-line{font-size:.8rem;color:#64748b}.video-cart-hint{font-size:.8rem;color:#6366f1;cursor:pointer;text-decoration:underline;width:max-content}.schedule-panel-overlay{position:fixed;inset:0;background:#141a2666;z-index:1200}.schedule-panel-backdrop{position:absolute;inset:0;border:none;background:none;cursor:default;padding:0}.schedule-panel{position:absolute;top:0;right:0;bottom:0;width:400px;max-width:92vw;background:#fff;box-shadow:-20px 0 50px -20px #141a2659;display:flex;flex-direction:column}.schedule-panel-header{flex:none;padding:20px 22px;border-bottom:1px solid #e2e8f0;display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.schedule-panel-heading{min-width:0}.schedule-panel-title{font-size:17px;font-weight:600;color:#1b2436;line-height:1.3;margin-bottom:2px}.schedule-panel-subtitle{font-size:12.5px;color:#64748b;line-height:1.3}.schedule-panel-close{flex:none;border:none;background:none;cursor:pointer;color:#64748b;line-height:0;padding:3px;width:max-content}.schedule-panel-body{flex:1;min-height:0;overflow-y:auto;padding:16px 22px;display:flex;flex-direction:column;gap:10px}.schedule-panel-row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:8px;cursor:pointer;width:100%;background:#fff;border:1px solid #e2e8f0;text-align:left}.schedule-panel-checkbox{width:18px;height:18px;flex:none;border:1.5px solid #cbd5e1;border-radius:4px;background:#fff;display:grid;place-items:center}.schedule-panel-checkbox.checked{background:#6366f1;border-color:#6366f1}.schedule-panel-checkbox mat-icon{color:#fff!important;font-size:13px!important;height:13px!important;width:13px!important}.schedule-panel-thumb{width:46px;height:46px;border-radius:6px;object-fit:cover;flex:none;background:#f3efe9}.schedule-panel-info{flex:1}.schedule-panel-name{font-size:13.5px;color:#1b2436}.schedule-panel-footer{flex:none;padding:16px 22px;border-top:1px solid #e2e8f0;display:flex;flex-direction:column;gap:10px}.schedule-panel-selection-line{font-size:11.5px;color:#64748b}.schedule-panel-cta{width:100%;height:48px;border:none;border-radius:8px;background:#7c3a11;color:#fff;font-size:14px;font-weight:600;cursor:pointer}.schedule-panel-cta:disabled{background:#cbd5e1;cursor:not-allowed}.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.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "directive", type:
|
|
10946
10952
|
//DIRECTIVE
|
|
10947
10953
|
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: i11.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", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData", "itemIndex"] }, { 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", "itemIndex"] }, { kind: "component", type: BookingCartGroupsComponent, selector: "simpo-booking-cart-groups" }] }); }
|
|
10948
10954
|
}
|
|
@@ -10973,7 +10979,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
10973
10979
|
FeaturedProductsComponent,
|
|
10974
10980
|
MatSpinner,
|
|
10975
10981
|
BookingCartGroupsComponent
|
|
10976
|
-
], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n <ng-container *ngIf=\"data\">\n <section [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\"\n [attr.class]=\"isMobile ? 'py-5 position-relative' : 'position-relative'\" simpoHover\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\"\n [ngClass]=\"!responseData?.orderedItems?.length ? 'no-items' : ''\">\n <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\"\n [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\"\n *ngIf=\"responseData?.orderedItems?.length && currentTab === 'ADDRESS'\">\n <span class=\"timeline\" (click)=\"currentTab = 'BAG'\">Bag</span>\n <div class=\"bar\"></div>\n <span class=\"timeline isActive\">Address</span>\n <div class=\"bar\"></div>\n <span class=\"timeline\" style=\"cursor: auto;\">Payment</span>\n </div>\n <div class=\"cart-tab-parent w-100\" *ngIf=\"currentTab == 'BAG' && (appointmentSettings?.homeVisitProductsEnabled || appointmentSettings?.videoCallProductsEnabled)\">\n <!-- && appointmentSettings?.homeVisitProductsEnabled\" -->\n <div class=\"cart-tabs\" [id]=\"data?.id\">\n <div class=\"selected-cart-tab\" [ngClass]=\"{'selected-cart-tab': cartType==='SHOPPING'}\"\n (click)=\"cartType='SHOPPING'\">Shopping Cart ({{responseData?.orderedItems?.length ?? 0}})</div>\n <div [ngClass]=\"{'selected-cart-tab': cartType==='BOOKING'}\" (click)=\"cartType='BOOKING'\">Booking Cart\n ({{getTotalBookingItems}})</div>\n </div>\n </div>\n <div class=\"cart-parent\" [spacingHorizontal]=\"stylesLayout\" *ngIf=\"currentTab === 'BAG'\" [id]=\"data?.id\"\n [simpoAnimation]=\"styles?.animation\">\n <ng-container>\n <ng-container *ngIf=\"cartType === 'SHOPPING'\">\n <ng-container\n *ngTemplateOutlet=\"(responseData?.orderedItems?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"cartType === 'BOOKING'\">\n <div class=\"w-100\">\n <simpo-booking-cart-groups></simpo-booking-cart-groups>\n </div>\n </ng-container>\n </ng-container>\n </div>\n <div class=\"d-flex checkoutPage\"\n *ngIf=\"(responseData?.orderedItems?.length || 0) > 0 && currentTab === 'ADDRESS'\">\n <ng-container *ngTemplateOutlet=\"CHECKOUTPAGE\">\n </ng-container>\n </div>\n\n\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\n [isEcommerce]=\"true\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n\n </section>\n\n <div class=\"schedule-panel-overlay\" *ngIf=\"schedulePanelOpen\">\n <button type=\"button\" class=\"schedule-panel-backdrop\" (click)=\"closeSchedulePanel()\"></button>\n <div class=\"schedule-panel\">\n <div class=\"schedule-panel-header\">\n <div class=\"schedule-panel-heading\">\n <div class=\"schedule-panel-title\">Schedule a Video Call</div>\n <div class=\"schedule-panel-subtitle\">Choose which pieces to include</div>\n </div>\n <button type=\"button\" class=\"schedule-panel-close\" (click)=\"closeSchedulePanel()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n <div class=\"schedule-panel-body\">\n <button type=\"button\" class=\"schedule-panel-row\" *ngFor=\"let item of responseData?.orderedItems\"\n [class.selected]=\"isPanelSelected(item)\" (click)=\"togglePanelSelection(item)\">\n <div class=\"schedule-panel-checkbox\" [class.checked]=\"isPanelSelected(item)\">\n <mat-icon *ngIf=\"isPanelSelected(item)\">check</mat-icon>\n </div>\n <img class=\"schedule-panel-thumb\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\">\n <div class=\"schedule-panel-info\">\n <div class=\"schedule-panel-name\">{{item.itemName}}</div>\n </div>\n </button>\n </div>\n <div class=\"schedule-panel-footer\">\n <div class=\"schedule-panel-selection-line\">{{panelSelectionLine}}</div>\n <button type=\"button\" class=\"schedule-panel-cta\" [disabled]=\"panelInvalid\" (click)=\"confirmSchedulePanel()\">Continue</button>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!data\">\n <section class=\"cart-window\">\n <div class=\"heading-large lh-2 mb-3 header-sec\">\n <div class=\"d-flex align-items-center\">\n <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\n <span>Your Cart</span>\n </div>\n <div class=\"saving\"></div>\n </div>\n <div class=\"offers\">\n <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\n <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\n <span>Avail Offers / Coupons</span>\n </div>\n <mat-icon>keyboard_arrow_right</mat-icon>\n </div>\n <div class=\"small-items\">\n <ng-container *ngFor=\"let item of responseData?.orderedItems\">\n <div class=\"small-item\">\n <div class=\"d-flex\" style=\"gap: 5px;\">\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n class=\"small-product-img\"\n [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\n (click)=\"goToProductDetails(item)\">\n </div>\n <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\n <div class=\"small-item-quantity\">\n <span class=\"cursor\">-</span>\n <span>{{item.quantity}}</span>\n <span class=\"cursor\">+</span>\n </div>\n <div class=\"small-item-price\">\n <div class=\"price-with-tax\">\n <span [innerHTML]='currency'></span> {{(item.sellingPrice) | number: '1.0-2'}}\n </div>\n <!-- <div class=\"price-with-tax\">\n <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\n </div> -->\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"fotter-sec\">\n <div class=\"delivery-add d-flex\">\n <mat-icon>home</mat-icon>\n <div class=\"address\">Tetsting</div>\n </div>\n <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span\n style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span>\n {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\n </div>\n </section>\n </ng-container>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '40vh',\n 'border-radius': '10px',\n 'position': 'relative',\n 'right': '5px'\n}\">\n</ngx-skeleton-loader>\n\n<ng-template #CouponList>\n <section class=\"coupons-listing-section\">\n <div class=\"coupon-heading\">\n <div class=\"back-btn\" (click)=\"closeDialogRef()\">\n <mat-icon>keyboard_arrow_left</mat-icon>\n </div>\n <div class=\"header-text\">Apply Coupon</div>\n </div>\n <!-- <div class=\"coupon-search-sec\">\n <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\n <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\n </div> -->\n <div class=\"coupon-listing\">\n <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\n <div class=\"coupon-details\"\n [ngStyle]=\"{'background-color': !couponDetails.applicable ? '#FFF2F4' : '#EDFFFA'}\"\n *ngIf=\"couponDetails?.status\">\n <div class=\"details__coupon-heading\">\n <div class=\"coupon-brief\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name\" [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\n {{ couponDetails.couponCode | uppercase }}</div>\n <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn\" [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\n [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : ''}\"\n (click)=\"applyCoupon(couponDetails)\">Apply</div>\n </div>\n </div>\n <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\n <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\n <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\n </div> -->\n </div>\n <ng-container>\n <!-- *ngIf=\"couponDetails.status\" -->\n <div class=\"details-divider\"></div>\n <ul class=\"details__coupon-terms\">\n <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\n </ul>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n <ng-template #showEmptyScreen>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Coupon Available</div>\n <div class=\"empty-screen__secondary-text\">\n Looks like there are no coupons at the moment\n </div>\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\n </div>\n </ng-template>\n </div>\n </section>\n</ng-template>\n\n<ng-template #RedemptionVouchers>\n <section class=\"vouchers-listing-section d-flex flex-column\">\n <div class=\"coupon-heading d-flex align-items-center gap-2 p-3 fs-18 fw-600 border-bottom\">\n <div class=\"back-btn cursor-pointer d-flex align-items-center\" (click)=\"closeDialogRef()\">\n <mat-icon>keyboard_arrow_left</mat-icon>\n </div>\n <div class=\"header-text\">Coupons & Vouchers</div>\n </div>\n\n <!-- <div class=\"d-flex align-items-center tab-container justify-content-between gap-2 p-3\">\n <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'COUPONS'}\"\n (click)=\"redemptionType = 'COUPONS'\">\n Coupons\n </div>\n <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'VOUCHERS'}\"\n (click)=\"redemptionType = 'VOUCHERS'\">\n Vouchers\n </div>\n </div> -->\n\n <div class=\"coupon-listing d-flex flex-column gap-3 pt-3\" *ngIf=\"redemptionType === 'COUPONS'\">\n <div class=\"d-flex align-items-center tab-container gap-3\">\n <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\n [ngClass]=\"{'active-coupon': redemptionCouponType === 'REWARDS'}\" (click)=\"redemptionCouponType = 'REWARDS'\">\n Rewards\n </div>\n <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\n [ngClass]=\"{'active-coupon': redemptionCouponType === 'DISCOUNTS'}\"\n (click)=\"redemptionCouponType = 'DISCOUNTS'\">\n Discounts\n </div>\n </div>\n <ng-container *ngIf=\"redemptionCouponType === 'REWARDS'\">\n <ng-container *ngIf=\"(listRedemptionCoupons?.vouchers?.length > 0) ; else showEmptyScreen\">\n <ng-container *ngFor=\"let voucher of listRedemptionCoupons?.vouchers; let idx = index\">\n <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\n\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\n <div class=\"coupon-desc fs-12 text-secondary\">\n Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%'\n }}\n off on your payment\n </div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">\n Apply</div>\n </div>\n </div>\n\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n <div class=\"code-label\">Code</div>\n <div class=\"code-value\">{{ voucher.voucherCode }}</div>\n </div>\n\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\n <span class=\"separator text-secondary\">|</span>\n <span class=\"validity\">\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\n Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\n </span>\n <span class=\"separator text-secondary\" *ngIf=\"voucher.maxRedeemableAmount\">|</span>\n <span class=\"min-order\" *ngIf=\"voucher.maxRedeemableAmount\">Max Redeemable Amount: \u20B9{{\n voucher.maxRedeemableAmount | number }}</span>\n </div>\n\n <!-- <div class=\"terms-link\">View terms & conditions</div> -->\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"redemptionCouponType === 'DISCOUNTS'\">\n <ng-container *ngIf=\"(couponList.length > 0); else showEmptyDiscounts\">\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\n <div class=\"voucher-details\" *ngIf=\"couponDetails?.status\">\n\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name fs-16 fw-600 mb-1\"\n [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\n {{ couponDetails.couponCode | uppercase }}\n </div>\n <div class=\"coupon-desc fs-12 text-secondary\">\n {{ couponDetails.discountDescription | titlecase }}\n </div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\"\n [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\n [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : 'not-allowed'}\"\n (click)=\"applyCoupon(couponDetails)\">\n Apply\n </div>\n </div>\n </div>\n\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n <div class=\"code-label\">Code</div>\n <div class=\"code-value\">{{ couponDetails.couponCode | uppercase }}</div>\n </div>\n\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n <span class=\"validity\">\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\n {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}\n </span>\n </div>\n\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-template #showEmptyDiscounts>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Discount Coupons Available</div>\n <div class=\"empty-screen__secondary-text\">\n Looks like there are no discount coupons at the moment\n </div>\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\n </div>\n </ng-template>\n\n <ng-template #showEmptyScreen>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Coupons Available</div>\n <div class=\"empty-screen__secondary-text\">Looks like there are no coupons</div>\n </div>\n </ng-template>\n </div>\n\n <div class=\"coupon-listing d-flex flex-column gap-3\" *ngIf=\"redemptionType === 'VOUCHERS'\">\n <ng-container *ngIf=\"listRedemptionVouchers?.vouchers?.length > 0; else showEmptyScreen\">\n <ng-container *ngFor=\"let voucher of listRedemptionVouchers?.vouchers; let idx = index\">\n <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\n\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\n <div class=\"coupon-desc fs-12 text-secondary\">\n Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%' }}\n off on your payment\n </div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">Apply\n </div>\n </div>\n </div>\n\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n <div class=\"code-label\">Code</div>\n <div class=\"code-value\">{{ voucher.voucherCode }}</div>\n </div>\n\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\n <span class=\"separator text-secondary\">|</span>\n <span class=\"validity\">\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\n Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\n </span>\n </div>\n\n <!-- <div class=\"terms-link\">View terms & conditions</div> -->\n </div>\n </ng-container>\n </ng-container>\n\n <ng-template #showEmptyScreen>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Vouchers Available</div>\n <div class=\"empty-screen__secondary-text\">Looks like there are no vouchers</div>\n </div>\n </ng-template>\n </div>\n </section>\n</ng-template>\n\n<ng-template #CARTPAGE>\n <div class=\"container\">\n <div class=\"main-content\">\n <div class=\"cart-items\">\n <div class=\"cart-header\">\n <h2>Your Cart</h2>\n </div>\n <ng-container\n *ngTemplateOutlet=\"CARTITEM;context:{data: responseData?.orderedItems}\"></ng-container>\n </div>\n </div>\n\n <div class=\"sidebar\">\n <div class=\"reedem-section d-flex flex-column align-items-center\" *ngIf=\"getUrl()\">\n <div class=\"justify-content-between d-flex align-items-center w-100 redeem-section-text\">Redeem Section Amount\n <div class=\"toogle-switch\">\n <div class=\"form-check form-switch\">\n <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" role=\"switch\" id=\"flexSwitchCheckChecked\"\n [checked]=\"selectMatureScheme\" (change)=\"onToggleChange()\">\n </div>\n </div>\n </div>\n <!-- <div class=\"select_matured_text w-100 text-start cursor-pointer\"\n *ngIf=\"selectMatureScheme && !selectedRedemption\" (click)=\"selectScheme()\">\n Select Matured Scheme\n </div> -->\n <!-- <div class=\"select_matured_text d-flex flex-column gap-2 w-100 text-start cursor-pointer\"\n *ngIf=\"selectedRedemption\">\n Selected Scheme\n <div class=\"d-flex w-100 justify-content-between align-items-center group_invest\">Group Investment\n scheme-5000/M <span>Change</span></div>\n <div class=\"d-flex justify-content-between align-items-center w-100 redeem_amount\">Redeemable Amount\n <span>\u20B9{{selectedRedmpationData.selectedAmount}}</span>\n </div>\n </div> -->\n </div>\n <div class=\"scheme-section\" *ngIf=\"selectMatureScheme\">\n <ng-container *ngTemplateOutlet=\"SCHEME_REDEMPTION\"></ng-container>\n </div>\n <div class=\"coupon-section\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && !referEarnExist\">\n <div class=\"coupon-left\">\n <div class=\"coupon-icon\"><mat-icon>percent</mat-icon></div>\n <span class=\"coupon-text\" *ngIf=\"!responseData.billdetails?.couponId\">Apply\n Coupon</span>\n <span class=\"coupon-text\" *ngIf=\"responseData.billdetails?.couponId\">Coupon\n Applied</span>\n </div>\n <svg *ngIf=\"!responseData.billdetails?.couponId\" xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\"\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" class=\"chevron-icon\" (click)=\"openDialog(CouponList)\">\n <path d=\"m9 18 6-6-6-6\" />\n </svg>\n <span *ngIf=\"responseData.billdetails?.couponId\"\n (click)=\"removeCoupon($event)\"><mat-icon>close</mat-icon></span>\n </div>\n\n <div class=\"promo-banner mb-3\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && appointmentSettings?.videoCallProductsEnabled\">\n <div class=\"promo-banner-row\">\n <div class=\"promo-text\">\n <h3>See It Before You Buy It</h3>\n <p>Experience our designs in detail via video call</p>\n </div>\n <button class=\"see-live-btn\" [disabled]=\"!hasCartItems\" (click)=\"openSchedulePanel()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"lucide lucide-video\">\n <path d=\"m22 8-6 4 6 4V8Z\" />\n <rect width=\"14\" height=\"12\" x=\"2\" y=\"6\" rx=\"2\" ry=\"2\" />\n </svg>\n CONTINUE TO SCHEDULE\n </button>\n </div>\n <div class=\"video-selection-line\">{{videoSelectionLine}}</div>\n <a class=\"video-cart-hint\" *ngIf=\"videoCartCount > 0\" (click)=\"viewPendingVideoCart()\">{{videoCartCount}}\n item{{videoCartCount === 1 ? '' : 's'}} waiting in your Video Call cart \u2014 view it</a>\n </div>\n\n <div class=\"plan-details-container p-3 rounded-4 bg-white text-dark voucher-details\"\n *ngIf=\"referEarnExist && this?.redemptionPoints?.availablePoints > 0\">\n <div class=\"fs-14 fw-500\">\n Rewards Available\n </div>\n <div class=\"d-flex justify-content-between align-items-start border-bottom pb-2\">\n <div class=\"avb_pts mt-2 mb-2\">\n <span class=\"fs-16 fw-500 total_points text-secondary\">\n <span class=\" fs-18 fw-600 text-dark\">{{(this?.redemptionPoints?.availablePoints || 0).toFixed(2)}}</span>\n pts\n </span>\n <div class=\"total_value fs-12 text-secondary\">\n = max \u20B9{{(this?.redemptionPoints?.pointsConvertedRupees || 0).toFixed(2)}} discount\n </div>\n </div>\n <div class=\"wallte_icon\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/777779c1775200561187wallet_(1).png\" alt=\"\">\n </div>\n </div>\n <div class=\"d-flex justify-content-between align-items-center mt-3\">\n <div class=\"redemable_text\">\n <div class=\"title_text\">\n <div class=\"fs-14 fw-500\">\n Redeem Points\n </div>\n <div class=\"fs-13 fs-400\">\n Use your points for discount\n </div>\n </div>\n </div>\n <div class=\"toggle_btn\">\n <label class=\"switch\">\n <input type=\"checkbox\" id=\"toggleSwitch\" [checked]=\"isPointsRedeeming\"\n (click)=\"onPointsRedeemingChange($event)\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n </div>\n <div class=\"mt-3 success_selected w-100 applied-coupon-card\" *ngIf=\"isPointsRedeeming\">\n <div class=\"d-flex align-items-start gap-2\">\n <div class=\"success_icon\">\n <mat-icon class=\"d-flex justify-content-center align-items-center text-success\">check_circle</mat-icon>\n </div>\n <div class=\"success_text\">\n <div class=\"fs-13 fw-500\">\n You're saving \u20B9\n {{totalSavingAmt || 0}}\n </div>\n <div class=\"fs-12 fs-400 text-success\">\n {{totalSavingPoints}} points remaining after redemption\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Existing coupon row (keep as-is) -->\n <div class=\"coupon-section d-flex flex-column voucher-details\" [id]=\"data?.id\"\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist\">\n <div class=\"d-flex justify-content-between align-items-center w-100\">\n <div class=\"coupon-left\">\n Apply Coupon\n </div>\n <div (click)=\"addRedemptionCoupon(RedemptionVouchers)\">View All</div>\n </div>\n\n <!-- Applied Coupon Success Banner -->\n <div class=\"applied-coupon-card w-100 mt-3 d-flex align-items-center justify-content-between\"\n *ngIf=\"selectedVoucherId\">\n <div class=\"applied-coupon-left d-flex align-items-center gap-3\">\n <mat-icon class=\"success-check\">check_circle</mat-icon>\n <div class=\"applied-coupon-info\">\n <div class=\"applied-coupon-code\">Coupon {{ selectedVoucherCode }} applied!</div>\n <div class=\"applied-coupon-saving\">You're saving\n <span *ngIf=\"this.couponValueType === 'AMOUNT'\">\u20B9 {{selectedVoucherAmount || 0}}</span>\n <span *ngIf=\"this.couponValueType === 'PERCENTAGE'\"> {{selectedVoucherPercentage || 0}}%</span>\n </div>\n\n </div>\n </div>\n <div class=\"remove-coupon-btn fs-14 fw-500 text-secondary cursor-pointer\"\n (click)=\"removeRedemptionCoupon($event)\">Remove</div>\n </div>\n </div>\n\n <div class=\"delivery-section\" *ngIf=\"getUrl()\">\n <div class=\"delivery-header\">\n <mat-icon>gps_fixed</mat-icon>\n <span>Delivering to</span>\n <span class=\"pincode\">{{pincode}}</span>\n <!-- <a class=\"change-link\">Change Pincode</a> -->\n </div>\n </div>\n\n <div class=\"summary-section\">\n <div class=\"summary-title\">Summary</div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Subtotal</span>\n <span class=\"summary-value\">\u20B9{{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && referEarnExist && isPointsRedeeming\">\n <span class=\"summary-label\">Points Redeemed</span>\n <span class=\"summary-value\">- \u20B9{{ totalSavingAmt || 0 }}</span>\n </div>\n\n <div class=\"summary-row\"\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'AMOUNT' && appliedVoucher)\">\n <span class=\"summary-label\">Voucher Applied</span>\n <span class=\"summary-value\">- \u20B9{{ selectedVoucherAmount || 0 }}</span>\n </div>\n\n <div class=\"summary-row\"\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'PERCENTAGE' && appliedVoucher)\">\n <span class=\"summary-label\">Voucher Applied</span>\n <span class=\"summary-value\">- \u20B9{{ percentageReduced || 0 }}</span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.discountAmount\">\n <span class=\"summary-label\">Discount Amount</span>\n <span class=\"summary-value\">\n {{('\u20B9' + (responseData?.billdetails?.discountAmount | number: '1.0-2')) }}\n </span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Shipping</span>\n <span class=\"summary-value\"\n [ngClass]=\"{'savings': !responseData?.billdetails?.deliveryCharges || responseData.billdetails.deliveryCharges <= 0}\">\n {{ (responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0) ? ('\u20B9' +\n (responseData.billdetails.deliveryCharges | number: '1.0-2')) : 'Free' }}\n </span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Estimated Tax</span>\n <span class=\"summary-value\">\u20B9{{((!responseData.billdetails?.couponId ?\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\n number: '1.0-2'}}</span>\n </div>\n\n <div class=\"summary-row total-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Total</span>\n <!-- <span class=\"summary-value\">\u20B9{{ responseData?.totalAmount | number: '1.0-2' }}</span> -->\n <span class=\"total-value\" *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{ responseData?.totalAmount |\n number: '1.0-2' }}</span>\n\n <span class=\"total-value\" *ngIf=\"isPointsRedeeming\">\u20B9{{ (responseData?.totalAmount - (totalSavingAmt || 0)) |\n number: '1.0-2' }}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\n (selectedVoucherAmount || 0)) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\n (percentageReduced || 0)) | number:\n '1.0-2' }}</span>\n </div>\n </div>\n <button class=\"place-order-btn\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n *ngIf=\"cartType === 'SHOPPING'\" [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\n Shopping'}}</button>\n <button class=\"place-order-btn mt-0\" (click)=\"edit ? '' : proceedToCheckout()\" simpoButtonDirective\n *ngIf=\"cartType === 'SHOPPING'\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout\n Cart'}}</button>\n\n </div>\n </div>\n <!-- <ng-container *ngIf=\"recommededData?.length\">\n <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\"\n [responseData]=\"recommededData\"></simpo-featured-products>\n </ng-container> -->\n</ng-template>\n<ng-template #CHECKOUTPAGE>\n <div class=\"checkout-left-panel\">\n <div class=\"checkout-main-content\">\n <!-- <div class=\"delivery-options\">\n <div class=\"delivery-option active\">\n <div class=\"delivery-icon\"></div>\n HOME DELIVERY\n </div>\n <div class=\"delivery-option\">\n <div class=\"delivery-icon\"></div>\n STORE PICK-UP\n </div>\n </div> -->\n\n <div class=\"section-title\">Shipping Address</div>\n\n <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\n <div class=\"address-info\">\n <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\n <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\n {{defaultAddress?.stateName}}</div>\n <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\n </div>\n </div>\n\n <div class=\"addLinks h-100\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\n <mat-icon>add</mat-icon>\n </div>\n\n <button class=\"change-address-btn\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">CHANGE OR ADD ADDRESS</button>\n\n <button class=\"btn w-100 mt-1 payment-btn\" (click)=\"proceedToPayment()\" simpoButtonDirective\n *ngIf=\"defaultAddress && !placeOrderLoader\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">\n Place Order\n </button>\n <button class=\"btn w-100 mt-1 payment-btn\" simpoButtonDirective *ngIf=\"defaultAddress && placeOrderLoader\"\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\">\n Loading...\n </button>\n\n </div>\n </div>\n\n <div class=\"checkout-right-panel\">\n <div class=\"order-summary\">\n <div class=\"summary-title\">Order Summary</div>\n\n <div class=\"checkout-product\">\n <div class=\"product-item\" *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\n <img [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-image\"\n alt=\"\">\n <div class=\"product-details\">\n <div class=\"product-name\">{{item.itemName}}</div>\n <div class=\"product-quantity\">Quantity: {{item.quantity}}</div>\n <div class=\"product-price\">\u20B9{{(item.sellingPrice * item.quantity) | number: '1.0-2'}}</div>\n </div>\n </div>\n\n </div>\n\n <div class=\"price-breakdown\">\n <div class=\"price-row\">\n <span>Total Price</span>\n <span>\u20B9{{(responseData?.billdetails?.totalNetValue\n ?? 0) | number: '1.0-2'}}</span>\n </div>\n <div class=\"price-row\">\n <span>Total Tax</span>\n <span>\u20B9{{((!responseData.billdetails?.couponId ?\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\n number:\n '1.0-2'}}</span>\n </div>\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && cartInfo?.billdetails?.orraSchemeRedeemedAmount\">\n <span class=\"summary-label\">Redeem Amount</span>\n <span class=\"summary-value\">\u20B9{{(cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\n '1.0-2'}}</span>\n </div>\n\n <div class=\"price-row discount\" *ngIf=\"responseData?.billdetails?.discountAmount && !isJewellery\">\n <span>Coupon Discount</span>\n <span>- \u20B9{{responseData?.billdetails?.discountAmount\n | number: '1.0-2'}}</span>\n </div>\n <div class=\"price-row\"\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\n <span>Delivery Charge</span>\n <span>{{responseData.billdetails.deliveryCharges\n |\n number: '1.0-2'}}</span>\n </div>\n <div class=\"price-row total\" *ngIf=\"cartType === 'SHOPPING'\">\n <span>TOTAL AMOUNT</span>\n <span *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{(responseData?.totalAmount ?? 0) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"isPointsRedeeming\">\u20B9{{(responseData?.totalAmount - (totalSavingAmt || 0)) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\n (selectedVoucherAmount || 0)) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\n (responseData?.totalAmount * (selectedVoucherPercentage / 100) || 0)) | number:\n '1.0-2' }}</span>\n </div>\n </div>\n </div>\n\n </div>\n</ng-template>\n\n<ng-template #CARTITEM let-products=\"data\">\n <div class=\"cart-item\" *ngFor=\"let item of products\" [style.color]=\"fontColor\">\n <div class=\"item-left\">\n <div class=\"item-image\">\n <img class=\"item-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\n (click)=\"goToProductDetails(item)\" style=\"cursor: pointer;\">\n </div>\n <div class=\"item-details\">\n <h3 class=\"item-title\">{{item.itemName}}</h3>\n <div class=\"item-subtitle\" *ngIf=\"item.itemVariant\">\n <span *ngFor=\"let varient of getKeys(item.itemVariant.properties); let last = last\">\n {{ item.itemVariant.properties[varient] | titlecase }}<span *ngIf=\"!last\">, </span>\n </span>\n </div>\n </div>\n </div>\n\n <div class=\"item-right\">\n <div class=\"quantity-control\" *ngIf=\"cartType === 'SHOPPING'\">\n <button class=\"qty-btn px-2\" (click)=\"decreaseQty(item)\" [disabled]=\"item.quantity === 1\">\n <mat-icon>remove</mat-icon>\n </button>\n <span class=\"qty-value px-3\">{{item.quantity}}</span>\n <button class=\"qty-btn px-2\" (click)=\"increaseQty(item)\">\n <mat-icon>add</mat-icon>\n </button>\n </div>\n\n <div class=\"item-price\">\n \u20B9{{item.sellingPrice | number: '1.0-2'}}\n </div>\n\n <div class=\"delete-btn-circle\" (click)=\"removeItem(item)\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trash-2\">\n <path d=\"M3 6h18\" />\n <path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\" />\n <path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\" />\n <line x1=\"10\" x2=\"10\" y1=\"11\" y2=\"17\" />\n <line x1=\"14\" x2=\"14\" y1=\"11\" y2=\"17\" />\n </svg>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #EMPTYITEM>\n <section class=\"empty-cart w-100 d-flex align-items-center justify-content-center\">\n <div class=\"empty-cart-container d-flex flex-column\">\n <div class=\"cart-image\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\" [appImageEditor]=\"edit || false\"\n [imageData]=\"data?.content?.image\" [sectionId]=\"data?.id\">\n </div>\n <div class=\"cart-text content-side\">\n <ng-container *ngFor=\"let text of data?.content?.inputText\">\n <div class=\"d-flex justify-content-center\"\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\" [isRTE]=\"text.isRTE\"></simpo-text-editor>\n </div>\n </ng-container>\n </div>\n <button class=\"place-order-btn mx-auto w-fit\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\n [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\n Shopping'}}</button>\n </div>\n </section>\n</ng-template>\n\n<ng-template #SCHEME_REDEMPTION>\n <div class=\"modal-body\">\n <div class=\"scheme-option\" *ngFor=\"let scheme of schemeList\" (click)=\"redeemScheme(scheme, false)\"\n [style.borderColor]=\"cartInfo.billdetails.orraSchemeCode ? styles?.background?.color : ''\">\n <label for=\"individual\" class=\"scheme-card\">\n <div class=\"scheme-info d-flex gap-1\">\n <div class=\"form-check-radio\">\n <input class=\"form-check-input-radio\" type=\"radio\" name=\"flexRadioDefault\" id=\"flexRadioDefault2\">\n </div>\n <div class=\"right-side\">\n <div class=\"scheme-name\">\n <div class=\"scheme-title\">Individual Investment Scheme</div>\n <div class=\"scheme-monthly\">\u20B98000/M</div>\n </div>\n <div class=\"scheme-details\">\n <span class=\"scheme-id\">GPP Id: {{scheme.GPPId}}</span>\n <!-- <span class=\"scheme-maturity\">Maturity Date: 12 April 2024</span> -->\n </div>\n <div class=\"scheme-amount\">\u20B9{{scheme.amount}}</div>\n </div>\n </div>\n </label>\n </div>\n <div class=\"reedem_error d-flex justify-content-center align-items-center\" *ngIf=\"showReedemError\">\n Please add more \u20B9{{vaildAmount}} to reedem this scheme\n </div>\n </div>\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;flex-direction:column;gap:10px;border-radius:8px;border:1px solid #e2e8f0}.promo-banner-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.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:disabled{color:#94a3b8;cursor:not-allowed;box-shadow:none}.see-live-btn:disabled:hover{background:#fff;border-color:#e2e8f0;transform:none}.see-live-btn svg{color:#6366f1}.video-selection-line{font-size:.8rem;color:#64748b}.video-cart-hint{font-size:.8rem;color:#6366f1;cursor:pointer;text-decoration:underline;width:max-content}.schedule-panel-overlay{position:fixed;inset:0;background:#141a2666;z-index:1200}.schedule-panel-backdrop{position:absolute;inset:0;border:none;background:none;cursor:default;padding:0}.schedule-panel{position:absolute;top:0;right:0;bottom:0;width:400px;max-width:92vw;background:#fff;box-shadow:-20px 0 50px -20px #141a2659;display:flex;flex-direction:column}.schedule-panel-header{flex:none;padding:20px 22px;border-bottom:1px solid #e2e8f0;display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.schedule-panel-heading{min-width:0}.schedule-panel-title{font-size:17px;font-weight:600;color:#1b2436;line-height:1.3;margin-bottom:2px}.schedule-panel-subtitle{font-size:12.5px;color:#64748b;line-height:1.3}.schedule-panel-close{flex:none;border:none;background:none;cursor:pointer;color:#64748b;line-height:0;padding:3px;width:max-content}.schedule-panel-body{flex:1;min-height:0;overflow-y:auto;padding:16px 22px;display:flex;flex-direction:column;gap:10px}.schedule-panel-row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:8px;cursor:pointer;width:100%;background:#fff;border:1px solid #e2e8f0;text-align:left}.schedule-panel-row.selected{background:#f5f3ff;border-color:#c7d2fe}.schedule-panel-checkbox{width:18px;height:18px;flex:none;border:1.5px solid #cbd5e1;border-radius:4px;background:#fff;display:grid;place-items:center}.schedule-panel-checkbox.checked{background:#6366f1;border-color:#6366f1}.schedule-panel-checkbox mat-icon{color:#fff!important;font-size:13px!important;height:13px!important;width:13px!important}.schedule-panel-thumb{width:46px;height:46px;border-radius:6px;object-fit:cover;flex:none;background:#f3efe9}.schedule-panel-info{flex:1}.schedule-panel-name{font-size:13.5px;color:#1b2436}.schedule-panel-footer{flex:none;padding:16px 22px;border-top:1px solid #e2e8f0;display:flex;flex-direction:column;gap:10px}.schedule-panel-selection-line{font-size:11.5px;color:#64748b}.schedule-panel-cta{width:100%;height:48px;border:none;border-radius:8px;background:#7c3a11;color:#fff;font-size:14px;font-weight:600;cursor:pointer}.schedule-panel-cta:disabled{background:#cbd5e1;cursor:not-allowed}.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"] }]
|
|
10982
|
+
], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n <ng-container *ngIf=\"data\">\n <section [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\"\n [attr.class]=\"isMobile ? 'py-5 position-relative' : 'position-relative'\" simpoHover\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\"\n [ngClass]=\"!responseData?.orderedItems?.length ? 'no-items' : ''\">\n <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\"\n [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\"\n *ngIf=\"responseData?.orderedItems?.length && currentTab === 'ADDRESS'\">\n <span class=\"timeline\" (click)=\"currentTab = 'BAG'\">Bag</span>\n <div class=\"bar\"></div>\n <span class=\"timeline isActive\">Address</span>\n <div class=\"bar\"></div>\n <span class=\"timeline\" style=\"cursor: auto;\">Payment</span>\n </div>\n <div class=\"cart-tab-parent w-100\" *ngIf=\"currentTab == 'BAG' && (appointmentSettings?.homeVisitProductsEnabled || appointmentSettings?.videoCallProductsEnabled)\">\n <!-- && appointmentSettings?.homeVisitProductsEnabled\" -->\n <div class=\"cart-tabs\" [id]=\"data?.id\">\n <div class=\"selected-cart-tab\" [ngClass]=\"{'selected-cart-tab': cartType==='SHOPPING'}\"\n (click)=\"cartType='SHOPPING'\">Shopping Cart ({{responseData?.orderedItems?.length ?? 0}})</div>\n <div [ngClass]=\"{'selected-cart-tab': cartType==='BOOKING'}\" (click)=\"cartType='BOOKING'\">Booking Cart\n ({{getTotalBookingItems}})</div>\n </div>\n </div>\n <div class=\"cart-parent\" [spacingHorizontal]=\"stylesLayout\" *ngIf=\"currentTab === 'BAG'\" [id]=\"data?.id\"\n [simpoAnimation]=\"styles?.animation\">\n <ng-container>\n <ng-container *ngIf=\"cartType === 'SHOPPING'\">\n <ng-container\n *ngTemplateOutlet=\"(responseData?.orderedItems?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"cartType === 'BOOKING'\">\n <div class=\"w-100\">\n <simpo-booking-cart-groups></simpo-booking-cart-groups>\n </div>\n </ng-container>\n </ng-container>\n </div>\n <div class=\"d-flex checkoutPage\"\n *ngIf=\"(responseData?.orderedItems?.length || 0) > 0 && currentTab === 'ADDRESS'\">\n <ng-container *ngTemplateOutlet=\"CHECKOUTPAGE\">\n </ng-container>\n </div>\n\n\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\n [isEcommerce]=\"true\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n\n </section>\n\n <div class=\"schedule-panel-overlay\" *ngIf=\"schedulePanelOpen\">\n <button type=\"button\" class=\"schedule-panel-backdrop\" (click)=\"closeSchedulePanel()\"></button>\n <div class=\"schedule-panel\">\n <div class=\"schedule-panel-header\">\n <div class=\"schedule-panel-heading\">\n <div class=\"schedule-panel-title\">Schedule a Video Call</div>\n <div class=\"schedule-panel-subtitle\">Choose which pieces to include</div>\n </div>\n <button type=\"button\" class=\"schedule-panel-close\" (click)=\"closeSchedulePanel()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n <div class=\"schedule-panel-body\">\n <button type=\"button\" class=\"schedule-panel-row\" *ngFor=\"let item of responseData?.orderedItems\"\n [class.selected]=\"isPanelSelected(item)\" (click)=\"togglePanelSelection(item)\">\n <div class=\"schedule-panel-checkbox\" [class.checked]=\"isPanelSelected(item)\">\n <mat-icon *ngIf=\"isPanelSelected(item)\">check</mat-icon>\n </div>\n <img class=\"schedule-panel-thumb\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\">\n <div class=\"schedule-panel-info\">\n <div class=\"schedule-panel-name\">{{item.itemName}}</div>\n </div>\n </button>\n </div>\n <div class=\"schedule-panel-footer\">\n <div class=\"schedule-panel-selection-line\">{{panelSelectionLine}}</div>\n <button type=\"button\" class=\"schedule-panel-cta\" [disabled]=\"panelInvalid\" (click)=\"confirmSchedulePanel()\">Continue</button>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!data\">\n <section class=\"cart-window\">\n <div class=\"heading-large lh-2 mb-3 header-sec\">\n <div class=\"d-flex align-items-center\">\n <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\n <span>Your Cart</span>\n </div>\n <div class=\"saving\"></div>\n </div>\n <div class=\"offers\">\n <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\n <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\n <span>Avail Offers / Coupons</span>\n </div>\n <mat-icon>keyboard_arrow_right</mat-icon>\n </div>\n <div class=\"small-items\">\n <ng-container *ngFor=\"let item of responseData?.orderedItems\">\n <div class=\"small-item\">\n <div class=\"d-flex\" style=\"gap: 5px;\">\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n class=\"small-product-img\"\n [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\n (click)=\"goToProductDetails(item)\">\n </div>\n <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\n <div class=\"small-item-quantity\">\n <span class=\"cursor\">-</span>\n <span>{{item.quantity}}</span>\n <span class=\"cursor\">+</span>\n </div>\n <div class=\"small-item-price\">\n <div class=\"price-with-tax\">\n <span [innerHTML]='currency'></span> {{(item.sellingPrice) | number: '1.0-2'}}\n </div>\n <!-- <div class=\"price-with-tax\">\n <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\n </div> -->\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"fotter-sec\">\n <div class=\"delivery-add d-flex\">\n <mat-icon>home</mat-icon>\n <div class=\"address\">Tetsting</div>\n </div>\n <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span\n style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span>\n {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\n </div>\n </section>\n </ng-container>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '40vh',\n 'border-radius': '10px',\n 'position': 'relative',\n 'right': '5px'\n}\">\n</ngx-skeleton-loader>\n\n<ng-template #CouponList>\n <section class=\"coupons-listing-section\">\n <div class=\"coupon-heading\">\n <div class=\"back-btn\" (click)=\"closeDialogRef()\">\n <mat-icon>keyboard_arrow_left</mat-icon>\n </div>\n <div class=\"header-text\">Apply Coupon</div>\n </div>\n <!-- <div class=\"coupon-search-sec\">\n <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\n <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\n </div> -->\n <div class=\"coupon-listing\">\n <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\n <div class=\"coupon-details\"\n [ngStyle]=\"{'background-color': !couponDetails.applicable ? '#FFF2F4' : '#EDFFFA'}\"\n *ngIf=\"couponDetails?.status\">\n <div class=\"details__coupon-heading\">\n <div class=\"coupon-brief\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name\" [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\n {{ couponDetails.couponCode | uppercase }}</div>\n <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn\" [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\n [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : ''}\"\n (click)=\"applyCoupon(couponDetails)\">Apply</div>\n </div>\n </div>\n <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\n <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\n <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\n </div> -->\n </div>\n <ng-container>\n <!-- *ngIf=\"couponDetails.status\" -->\n <div class=\"details-divider\"></div>\n <ul class=\"details__coupon-terms\">\n <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\n </ul>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n <ng-template #showEmptyScreen>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Coupon Available</div>\n <div class=\"empty-screen__secondary-text\">\n Looks like there are no coupons at the moment\n </div>\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\n </div>\n </ng-template>\n </div>\n </section>\n</ng-template>\n\n<ng-template #RedemptionVouchers>\n <section class=\"vouchers-listing-section d-flex flex-column\">\n <div class=\"coupon-heading d-flex align-items-center gap-2 p-3 fs-18 fw-600 border-bottom\">\n <div class=\"back-btn cursor-pointer d-flex align-items-center\" (click)=\"closeDialogRef()\">\n <mat-icon>keyboard_arrow_left</mat-icon>\n </div>\n <div class=\"header-text\">Coupons & Vouchers</div>\n </div>\n\n <!-- <div class=\"d-flex align-items-center tab-container justify-content-between gap-2 p-3\">\n <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'COUPONS'}\"\n (click)=\"redemptionType = 'COUPONS'\">\n Coupons\n </div>\n <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'VOUCHERS'}\"\n (click)=\"redemptionType = 'VOUCHERS'\">\n Vouchers\n </div>\n </div> -->\n\n <div class=\"coupon-listing d-flex flex-column gap-3 pt-3\" *ngIf=\"redemptionType === 'COUPONS'\">\n <div class=\"d-flex align-items-center tab-container gap-3\">\n <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\n [ngClass]=\"{'active-coupon': redemptionCouponType === 'REWARDS'}\" (click)=\"redemptionCouponType = 'REWARDS'\">\n Rewards\n </div>\n <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\n [ngClass]=\"{'active-coupon': redemptionCouponType === 'DISCOUNTS'}\"\n (click)=\"redemptionCouponType = 'DISCOUNTS'\">\n Discounts\n </div>\n </div>\n <ng-container *ngIf=\"redemptionCouponType === 'REWARDS'\">\n <ng-container *ngIf=\"(listRedemptionCoupons?.vouchers?.length > 0) ; else showEmptyScreen\">\n <ng-container *ngFor=\"let voucher of listRedemptionCoupons?.vouchers; let idx = index\">\n <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\n\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\n <div class=\"coupon-desc fs-12 text-secondary\">\n Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%'\n }}\n off on your payment\n </div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">\n Apply</div>\n </div>\n </div>\n\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n <div class=\"code-label\">Code</div>\n <div class=\"code-value\">{{ voucher.voucherCode }}</div>\n </div>\n\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\n <span class=\"separator text-secondary\">|</span>\n <span class=\"validity\">\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\n Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\n </span>\n <span class=\"separator text-secondary\" *ngIf=\"voucher.maxRedeemableAmount\">|</span>\n <span class=\"min-order\" *ngIf=\"voucher.maxRedeemableAmount\">Max Redeemable Amount: \u20B9{{\n voucher.maxRedeemableAmount | number }}</span>\n </div>\n\n <!-- <div class=\"terms-link\">View terms & conditions</div> -->\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"redemptionCouponType === 'DISCOUNTS'\">\n <ng-container *ngIf=\"(couponList.length > 0); else showEmptyDiscounts\">\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\n <div class=\"voucher-details\" *ngIf=\"couponDetails?.status\">\n\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name fs-16 fw-600 mb-1\"\n [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\n {{ couponDetails.couponCode | uppercase }}\n </div>\n <div class=\"coupon-desc fs-12 text-secondary\">\n {{ couponDetails.discountDescription | titlecase }}\n </div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\"\n [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\n [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : 'not-allowed'}\"\n (click)=\"applyCoupon(couponDetails)\">\n Apply\n </div>\n </div>\n </div>\n\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n <div class=\"code-label\">Code</div>\n <div class=\"code-value\">{{ couponDetails.couponCode | uppercase }}</div>\n </div>\n\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n <span class=\"validity\">\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\n {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}\n </span>\n </div>\n\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-template #showEmptyDiscounts>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Discount Coupons Available</div>\n <div class=\"empty-screen__secondary-text\">\n Looks like there are no discount coupons at the moment\n </div>\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\n </div>\n </ng-template>\n\n <ng-template #showEmptyScreen>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Coupons Available</div>\n <div class=\"empty-screen__secondary-text\">Looks like there are no coupons</div>\n </div>\n </ng-template>\n </div>\n\n <div class=\"coupon-listing d-flex flex-column gap-3\" *ngIf=\"redemptionType === 'VOUCHERS'\">\n <ng-container *ngIf=\"listRedemptionVouchers?.vouchers?.length > 0; else showEmptyScreen\">\n <ng-container *ngFor=\"let voucher of listRedemptionVouchers?.vouchers; let idx = index\">\n <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\n\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\n <div class=\"coupon-desc fs-12 text-secondary\">\n Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%' }}\n off on your payment\n </div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">Apply\n </div>\n </div>\n </div>\n\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n <div class=\"code-label\">Code</div>\n <div class=\"code-value\">{{ voucher.voucherCode }}</div>\n </div>\n\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\n <span class=\"separator text-secondary\">|</span>\n <span class=\"validity\">\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\n Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\n </span>\n </div>\n\n <!-- <div class=\"terms-link\">View terms & conditions</div> -->\n </div>\n </ng-container>\n </ng-container>\n\n <ng-template #showEmptyScreen>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Vouchers Available</div>\n <div class=\"empty-screen__secondary-text\">Looks like there are no vouchers</div>\n </div>\n </ng-template>\n </div>\n </section>\n</ng-template>\n\n<ng-template #CARTPAGE>\n <div class=\"container\">\n <div class=\"main-content\">\n <div class=\"cart-items\">\n <div class=\"cart-header\">\n <h2>Your Cart</h2>\n </div>\n <ng-container\n *ngTemplateOutlet=\"CARTITEM;context:{data: responseData?.orderedItems}\"></ng-container>\n </div>\n </div>\n\n <div class=\"sidebar\">\n <div class=\"reedem-section d-flex flex-column align-items-center\" *ngIf=\"getUrl()\">\n <div class=\"justify-content-between d-flex align-items-center w-100 redeem-section-text\">Redeem Section Amount\n <div class=\"toogle-switch\">\n <div class=\"form-check form-switch\">\n <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" role=\"switch\" id=\"flexSwitchCheckChecked\"\n [checked]=\"selectMatureScheme\" (change)=\"onToggleChange()\">\n </div>\n </div>\n </div>\n <!-- <div class=\"select_matured_text w-100 text-start cursor-pointer\"\n *ngIf=\"selectMatureScheme && !selectedRedemption\" (click)=\"selectScheme()\">\n Select Matured Scheme\n </div> -->\n <!-- <div class=\"select_matured_text d-flex flex-column gap-2 w-100 text-start cursor-pointer\"\n *ngIf=\"selectedRedemption\">\n Selected Scheme\n <div class=\"d-flex w-100 justify-content-between align-items-center group_invest\">Group Investment\n scheme-5000/M <span>Change</span></div>\n <div class=\"d-flex justify-content-between align-items-center w-100 redeem_amount\">Redeemable Amount\n <span>\u20B9{{selectedRedmpationData.selectedAmount}}</span>\n </div>\n </div> -->\n </div>\n <div class=\"scheme-section\" *ngIf=\"selectMatureScheme\">\n <ng-container *ngTemplateOutlet=\"SCHEME_REDEMPTION\"></ng-container>\n </div>\n <div class=\"coupon-section\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && !referEarnExist\">\n <div class=\"coupon-left\">\n <div class=\"coupon-icon\"><mat-icon>percent</mat-icon></div>\n <span class=\"coupon-text\" *ngIf=\"!responseData.billdetails?.couponId\">Apply\n Coupon</span>\n <span class=\"coupon-text\" *ngIf=\"responseData.billdetails?.couponId\">Coupon\n Applied</span>\n </div>\n <svg *ngIf=\"!responseData.billdetails?.couponId\" xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\"\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" class=\"chevron-icon\" (click)=\"openDialog(CouponList)\">\n <path d=\"m9 18 6-6-6-6\" />\n </svg>\n <span *ngIf=\"responseData.billdetails?.couponId\"\n (click)=\"removeCoupon($event)\"><mat-icon>close</mat-icon></span>\n </div>\n\n <div class=\"promo-banner mb-3\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && appointmentSettings?.videoCallProductsEnabled\">\n <div class=\"promo-banner-row\">\n <div class=\"promo-text\">\n <h3>See It Before You Buy It</h3>\n <p>Experience our designs in detail via video call</p>\n </div>\n <button class=\"see-live-btn\" [disabled]=\"!hasCartItems\" (click)=\"openSchedulePanel()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"lucide lucide-video\">\n <path d=\"m22 8-6 4 6 4V8Z\" />\n <rect width=\"14\" height=\"12\" x=\"2\" y=\"6\" rx=\"2\" ry=\"2\" />\n </svg>\n CONTINUE TO SCHEDULE\n </button>\n </div>\n <div class=\"video-selection-line\">{{videoSelectionLine}}</div>\n <a class=\"video-cart-hint\" *ngIf=\"videoCartCount > 0\" (click)=\"viewPendingVideoCart()\">{{videoCartCount}}\n item{{videoCartCount === 1 ? '' : 's'}} waiting in your Video Call cart \u2014 view it</a>\n </div>\n\n <div class=\"plan-details-container p-3 rounded-4 bg-white text-dark voucher-details\"\n *ngIf=\"referEarnExist && this?.redemptionPoints?.availablePoints > 0\">\n <div class=\"fs-14 fw-500\">\n Rewards Available\n </div>\n <div class=\"d-flex justify-content-between align-items-start border-bottom pb-2\">\n <div class=\"avb_pts mt-2 mb-2\">\n <span class=\"fs-16 fw-500 total_points text-secondary\">\n <span class=\" fs-18 fw-600 text-dark\">{{(this?.redemptionPoints?.availablePoints || 0).toFixed(2)}}</span>\n pts\n </span>\n <div class=\"total_value fs-12 text-secondary\">\n = max \u20B9{{(this?.redemptionPoints?.pointsConvertedRupees || 0).toFixed(2)}} discount\n </div>\n </div>\n <div class=\"wallte_icon\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/777779c1775200561187wallet_(1).png\" alt=\"\">\n </div>\n </div>\n <div class=\"d-flex justify-content-between align-items-center mt-3\">\n <div class=\"redemable_text\">\n <div class=\"title_text\">\n <div class=\"fs-14 fw-500\">\n Redeem Points\n </div>\n <div class=\"fs-13 fs-400\">\n Use your points for discount\n </div>\n </div>\n </div>\n <div class=\"toggle_btn\">\n <label class=\"switch\">\n <input type=\"checkbox\" id=\"toggleSwitch\" [checked]=\"isPointsRedeeming\"\n (click)=\"onPointsRedeemingChange($event)\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n </div>\n <div class=\"mt-3 success_selected w-100 applied-coupon-card\" *ngIf=\"isPointsRedeeming\">\n <div class=\"d-flex align-items-start gap-2\">\n <div class=\"success_icon\">\n <mat-icon class=\"d-flex justify-content-center align-items-center text-success\">check_circle</mat-icon>\n </div>\n <div class=\"success_text\">\n <div class=\"fs-13 fw-500\">\n You're saving \u20B9\n {{totalSavingAmt || 0}}\n </div>\n <div class=\"fs-12 fs-400 text-success\">\n {{totalSavingPoints}} points remaining after redemption\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Existing coupon row (keep as-is) -->\n <div class=\"coupon-section d-flex flex-column voucher-details\" [id]=\"data?.id\"\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist\">\n <div class=\"d-flex justify-content-between align-items-center w-100\">\n <div class=\"coupon-left\">\n Apply Coupon\n </div>\n <div (click)=\"addRedemptionCoupon(RedemptionVouchers)\">View All</div>\n </div>\n\n <!-- Applied Coupon Success Banner -->\n <div class=\"applied-coupon-card w-100 mt-3 d-flex align-items-center justify-content-between\"\n *ngIf=\"selectedVoucherId\">\n <div class=\"applied-coupon-left d-flex align-items-center gap-3\">\n <mat-icon class=\"success-check\">check_circle</mat-icon>\n <div class=\"applied-coupon-info\">\n <div class=\"applied-coupon-code\">Coupon {{ selectedVoucherCode }} applied!</div>\n <div class=\"applied-coupon-saving\">You're saving\n <span *ngIf=\"this.couponValueType === 'AMOUNT'\">\u20B9 {{selectedVoucherAmount || 0}}</span>\n <span *ngIf=\"this.couponValueType === 'PERCENTAGE'\"> {{selectedVoucherPercentage || 0}}%</span>\n </div>\n\n </div>\n </div>\n <div class=\"remove-coupon-btn fs-14 fw-500 text-secondary cursor-pointer\"\n (click)=\"removeRedemptionCoupon($event)\">Remove</div>\n </div>\n </div>\n\n <div class=\"delivery-section\" *ngIf=\"getUrl()\">\n <div class=\"delivery-header\">\n <mat-icon>gps_fixed</mat-icon>\n <span>Delivering to</span>\n <span class=\"pincode\">{{pincode}}</span>\n <!-- <a class=\"change-link\">Change Pincode</a> -->\n </div>\n </div>\n\n <div class=\"summary-section\">\n <div class=\"summary-title\">Summary</div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Subtotal</span>\n <span class=\"summary-value\">\u20B9{{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && referEarnExist && isPointsRedeeming\">\n <span class=\"summary-label\">Points Redeemed</span>\n <span class=\"summary-value\">- \u20B9{{ totalSavingAmt || 0 }}</span>\n </div>\n\n <div class=\"summary-row\"\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'AMOUNT' && appliedVoucher)\">\n <span class=\"summary-label\">Voucher Applied</span>\n <span class=\"summary-value\">- \u20B9{{ selectedVoucherAmount || 0 }}</span>\n </div>\n\n <div class=\"summary-row\"\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'PERCENTAGE' && appliedVoucher)\">\n <span class=\"summary-label\">Voucher Applied</span>\n <span class=\"summary-value\">- \u20B9{{ percentageReduced || 0 }}</span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.discountAmount\">\n <span class=\"summary-label\">Discount Amount</span>\n <span class=\"summary-value\">\n {{('\u20B9' + (responseData?.billdetails?.discountAmount | number: '1.0-2')) }}\n </span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Shipping</span>\n <span class=\"summary-value\"\n [ngClass]=\"{'savings': !responseData?.billdetails?.deliveryCharges || responseData.billdetails.deliveryCharges <= 0}\">\n {{ (responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0) ? ('\u20B9' +\n (responseData.billdetails.deliveryCharges | number: '1.0-2')) : 'Free' }}\n </span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Estimated Tax</span>\n <span class=\"summary-value\">\u20B9{{((!responseData.billdetails?.couponId ?\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\n number: '1.0-2'}}</span>\n </div>\n\n <div class=\"summary-row total-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Total</span>\n <!-- <span class=\"summary-value\">\u20B9{{ responseData?.totalAmount | number: '1.0-2' }}</span> -->\n <span class=\"total-value\" *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{ responseData?.totalAmount |\n number: '1.0-2' }}</span>\n\n <span class=\"total-value\" *ngIf=\"isPointsRedeeming\">\u20B9{{ (responseData?.totalAmount - (totalSavingAmt || 0)) |\n number: '1.0-2' }}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\n (selectedVoucherAmount || 0)) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\n (percentageReduced || 0)) | number:\n '1.0-2' }}</span>\n </div>\n </div>\n <button class=\"place-order-btn\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n *ngIf=\"cartType === 'SHOPPING'\" [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\n Shopping'}}</button>\n <button class=\"place-order-btn mt-0\" (click)=\"edit ? '' : proceedToCheckout()\" simpoButtonDirective\n *ngIf=\"cartType === 'SHOPPING'\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout\n Cart'}}</button>\n\n </div>\n </div>\n <!-- <ng-container *ngIf=\"recommededData?.length\">\n <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\"\n [responseData]=\"recommededData\"></simpo-featured-products>\n </ng-container> -->\n</ng-template>\n<ng-template #CHECKOUTPAGE>\n <div class=\"checkout-left-panel\">\n <div class=\"checkout-main-content\">\n <!-- <div class=\"delivery-options\">\n <div class=\"delivery-option active\">\n <div class=\"delivery-icon\"></div>\n HOME DELIVERY\n </div>\n <div class=\"delivery-option\">\n <div class=\"delivery-icon\"></div>\n STORE PICK-UP\n </div>\n </div> -->\n\n <div class=\"section-title\">Shipping Address</div>\n\n <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\n <div class=\"address-info\">\n <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\n <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\n {{defaultAddress?.stateName}}</div>\n <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\n </div>\n </div>\n\n <div class=\"addLinks h-100\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\n <mat-icon>add</mat-icon>\n </div>\n\n <button class=\"change-address-btn\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">CHANGE OR ADD ADDRESS</button>\n\n <button class=\"btn w-100 mt-1 payment-btn\" (click)=\"proceedToPayment()\" simpoButtonDirective\n *ngIf=\"defaultAddress && !placeOrderLoader\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">\n Place Order\n </button>\n <button class=\"btn w-100 mt-1 payment-btn\" simpoButtonDirective *ngIf=\"defaultAddress && placeOrderLoader\"\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\">\n Loading...\n </button>\n\n </div>\n </div>\n\n <div class=\"checkout-right-panel\">\n <div class=\"order-summary\">\n <div class=\"summary-title\">Order Summary</div>\n\n <div class=\"checkout-product\">\n <div class=\"product-item\" *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\n <img [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-image\"\n alt=\"\">\n <div class=\"product-details\">\n <div class=\"product-name\">{{item.itemName}}</div>\n <div class=\"product-quantity\">Quantity: {{item.quantity}}</div>\n <div class=\"product-price\">\u20B9{{(item.sellingPrice * item.quantity) | number: '1.0-2'}}</div>\n </div>\n </div>\n\n </div>\n\n <div class=\"price-breakdown\">\n <div class=\"price-row\">\n <span>Total Price</span>\n <span>\u20B9{{(responseData?.billdetails?.totalNetValue\n ?? 0) | number: '1.0-2'}}</span>\n </div>\n <div class=\"price-row\">\n <span>Total Tax</span>\n <span>\u20B9{{((!responseData.billdetails?.couponId ?\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\n number:\n '1.0-2'}}</span>\n </div>\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && cartInfo?.billdetails?.orraSchemeRedeemedAmount\">\n <span class=\"summary-label\">Redeem Amount</span>\n <span class=\"summary-value\">\u20B9{{(cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\n '1.0-2'}}</span>\n </div>\n\n <div class=\"price-row discount\" *ngIf=\"responseData?.billdetails?.discountAmount && !isJewellery\">\n <span>Coupon Discount</span>\n <span>- \u20B9{{responseData?.billdetails?.discountAmount\n | number: '1.0-2'}}</span>\n </div>\n <div class=\"price-row\"\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\n <span>Delivery Charge</span>\n <span>{{responseData.billdetails.deliveryCharges\n |\n number: '1.0-2'}}</span>\n </div>\n <div class=\"price-row total\" *ngIf=\"cartType === 'SHOPPING'\">\n <span>TOTAL AMOUNT</span>\n <span *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{(responseData?.totalAmount ?? 0) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"isPointsRedeeming\">\u20B9{{(responseData?.totalAmount - (totalSavingAmt || 0)) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\n (selectedVoucherAmount || 0)) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\n (responseData?.totalAmount * (selectedVoucherPercentage / 100) || 0)) | number:\n '1.0-2' }}</span>\n </div>\n </div>\n </div>\n\n </div>\n</ng-template>\n\n<ng-template #CARTITEM let-products=\"data\">\n <div class=\"cart-item\" *ngFor=\"let item of products\" [style.color]=\"fontColor\">\n <div class=\"item-left\">\n <div class=\"item-image\">\n <img class=\"item-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\n (click)=\"goToProductDetails(item)\" style=\"cursor: pointer;\">\n </div>\n <div class=\"item-details\">\n <h3 class=\"item-title\">{{item.itemName}}</h3>\n <div class=\"item-subtitle\" *ngIf=\"item.itemVariant\">\n <span *ngFor=\"let varient of getKeys(item.itemVariant.properties); let last = last\">\n {{ item.itemVariant.properties[varient] | titlecase }}<span *ngIf=\"!last\">, </span>\n </span>\n </div>\n </div>\n </div>\n\n <div class=\"item-right\">\n <div class=\"quantity-control\" *ngIf=\"cartType === 'SHOPPING'\">\n <button class=\"qty-btn px-2\" (click)=\"decreaseQty(item)\" [disabled]=\"item.quantity === 1\">\n <mat-icon>remove</mat-icon>\n </button>\n <span class=\"qty-value px-3\">{{item.quantity}}</span>\n <button class=\"qty-btn px-2\" (click)=\"increaseQty(item)\">\n <mat-icon>add</mat-icon>\n </button>\n </div>\n\n <div class=\"item-price\">\n \u20B9{{item.sellingPrice | number: '1.0-2'}}\n </div>\n\n <div class=\"delete-btn-circle\" (click)=\"removeItem(item)\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trash-2\">\n <path d=\"M3 6h18\" />\n <path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\" />\n <path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\" />\n <line x1=\"10\" x2=\"10\" y1=\"11\" y2=\"17\" />\n <line x1=\"14\" x2=\"14\" y1=\"11\" y2=\"17\" />\n </svg>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #EMPTYITEM>\n <section class=\"empty-cart w-100 d-flex align-items-center justify-content-center\">\n <div class=\"empty-cart-container d-flex flex-column\">\n <div class=\"cart-image\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\" [appImageEditor]=\"edit || false\"\n [imageData]=\"data?.content?.image\" [sectionId]=\"data?.id\">\n </div>\n <div class=\"cart-text content-side\">\n <ng-container *ngFor=\"let text of data?.content?.inputText\">\n <div class=\"d-flex justify-content-center\"\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\" [isRTE]=\"text.isRTE\"></simpo-text-editor>\n </div>\n </ng-container>\n </div>\n <button class=\"place-order-btn mx-auto w-fit\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\n [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\n Shopping'}}</button>\n </div>\n </section>\n</ng-template>\n\n<ng-template #SCHEME_REDEMPTION>\n <div class=\"modal-body\">\n <div class=\"scheme-option\" *ngFor=\"let scheme of schemeList\" (click)=\"redeemScheme(scheme, false)\"\n [style.borderColor]=\"cartInfo.billdetails.orraSchemeCode ? styles?.background?.color : ''\">\n <label for=\"individual\" class=\"scheme-card\">\n <div class=\"scheme-info d-flex gap-1\">\n <div class=\"form-check-radio\">\n <input class=\"form-check-input-radio\" type=\"radio\" name=\"flexRadioDefault\" id=\"flexRadioDefault2\">\n </div>\n <div class=\"right-side\">\n <div class=\"scheme-name\">\n <div class=\"scheme-title\">Individual Investment Scheme</div>\n <div class=\"scheme-monthly\">\u20B98000/M</div>\n </div>\n <div class=\"scheme-details\">\n <span class=\"scheme-id\">GPP Id: {{scheme.GPPId}}</span>\n <!-- <span class=\"scheme-maturity\">Maturity Date: 12 April 2024</span> -->\n </div>\n <div class=\"scheme-amount\">\u20B9{{scheme.amount}}</div>\n </div>\n </div>\n </label>\n </div>\n <div class=\"reedem_error d-flex justify-content-center align-items-center\" *ngIf=\"showReedemError\">\n Please add more \u20B9{{vaildAmount}} to reedem this scheme\n </div>\n </div>\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;flex-direction:column;gap:10px;border-radius:8px;border:1px solid #e2e8f0}.promo-banner-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.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:disabled{color:#94a3b8;cursor:not-allowed;box-shadow:none}.see-live-btn:disabled:hover{background:#fff;border-color:#e2e8f0;transform:none}.see-live-btn svg{color:#6366f1}.video-selection-line{font-size:.8rem;color:#64748b}.video-cart-hint{font-size:.8rem;color:#6366f1;cursor:pointer;text-decoration:underline;width:max-content}.schedule-panel-overlay{position:fixed;inset:0;background:#141a2666;z-index:1200}.schedule-panel-backdrop{position:absolute;inset:0;border:none;background:none;cursor:default;padding:0}.schedule-panel{position:absolute;top:0;right:0;bottom:0;width:400px;max-width:92vw;background:#fff;box-shadow:-20px 0 50px -20px #141a2659;display:flex;flex-direction:column}.schedule-panel-header{flex:none;padding:20px 22px;border-bottom:1px solid #e2e8f0;display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.schedule-panel-heading{min-width:0}.schedule-panel-title{font-size:17px;font-weight:600;color:#1b2436;line-height:1.3;margin-bottom:2px}.schedule-panel-subtitle{font-size:12.5px;color:#64748b;line-height:1.3}.schedule-panel-close{flex:none;border:none;background:none;cursor:pointer;color:#64748b;line-height:0;padding:3px;width:max-content}.schedule-panel-body{flex:1;min-height:0;overflow-y:auto;padding:16px 22px;display:flex;flex-direction:column;gap:10px}.schedule-panel-row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:8px;cursor:pointer;width:100%;background:#fff;border:1px solid #e2e8f0;text-align:left}.schedule-panel-checkbox{width:18px;height:18px;flex:none;border:1.5px solid #cbd5e1;border-radius:4px;background:#fff;display:grid;place-items:center}.schedule-panel-checkbox.checked{background:#6366f1;border-color:#6366f1}.schedule-panel-checkbox mat-icon{color:#fff!important;font-size:13px!important;height:13px!important;width:13px!important}.schedule-panel-thumb{width:46px;height:46px;border-radius:6px;object-fit:cover;flex:none;background:#f3efe9}.schedule-panel-info{flex:1}.schedule-panel-name{font-size:13.5px;color:#1b2436}.schedule-panel-footer{flex:none;padding:16px 22px;border-top:1px solid #e2e8f0;display:flex;flex-direction:column;gap:10px}.schedule-panel-selection-line{font-size:11.5px;color:#64748b}.schedule-panel-cta{width:100%;height:48px;border:none;border-radius:8px;background:#7c3a11;color:#fff;font-size:14px;font-weight:600;cursor:pointer}.schedule-panel-cta:disabled{background:#cbd5e1;cursor:not-allowed}.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"] }]
|
|
10977
10983
|
}], ctorParameters: () => [{ type: EventsService }, { type: CartService }, { type: i2$2.Router }, { type: RestService }, { type: i3$2.MatDialog }, { type: StorageServiceService }, { type: i6$1.MessageService }, { type: i8$1.MatBottomSheet }, { type: i2$2.ActivatedRoute }, { type: BookingProductCartService }, { type: undefined, decorators: [{
|
|
10978
10984
|
type: Optional
|
|
10979
10985
|
}, {
|
|
@@ -22444,8 +22450,41 @@ class MyBookingsComponent {
|
|
|
22444
22450
|
this.past = [];
|
|
22445
22451
|
this.selected = null;
|
|
22446
22452
|
this.cancellationPolicy = null;
|
|
22453
|
+
this.rescheduleCutoffHours = 24;
|
|
22454
|
+
this.reschedulePanelOpen = false;
|
|
22455
|
+
this.reschDays = [];
|
|
22456
|
+
this.reschSelectedIso = '';
|
|
22457
|
+
this.reschSelectedTime = '';
|
|
22458
|
+
this.reschSlots = [];
|
|
22459
|
+
this.reschLoadingSlots = false;
|
|
22460
|
+
this.reschConfirming = false;
|
|
22461
|
+
this.reschError = '';
|
|
22462
|
+
this.reschNoSlots = false;
|
|
22463
|
+
}
|
|
22464
|
+
/** Same contrast algorithm as ColorDirective (directive/color.directive.ts) - reimplemented as
|
|
22465
|
+
* a pure getter rather than reusing that directive directly, since its [simpoColor] only ever
|
|
22466
|
+
* *sets* a computed color and never clears it, which would leave a stale color stuck on a
|
|
22467
|
+
* chip after it toggles from active back to inactive. Every accent-colored element here is
|
|
22468
|
+
* either always-on (never toggles) or driven by this same getter, so there's exactly one
|
|
22469
|
+
* definition of "what text color goes on the accent color" in this file. */
|
|
22470
|
+
get contrastColor() {
|
|
22471
|
+
let hex = this.styles?.background?.accentColor;
|
|
22472
|
+
if (!hex)
|
|
22473
|
+
return '#ffffff';
|
|
22474
|
+
if (hex.length < 6) {
|
|
22475
|
+
let expanded = '#';
|
|
22476
|
+
for (let i = 1; i < hex.length; i++)
|
|
22477
|
+
expanded += hex[i] + hex[i];
|
|
22478
|
+
hex = expanded;
|
|
22479
|
+
}
|
|
22480
|
+
const r = parseInt(hex.slice(1, 3), 16);
|
|
22481
|
+
const g = parseInt(hex.slice(3, 5), 16);
|
|
22482
|
+
const b = parseInt(hex.slice(5, 7), 16);
|
|
22483
|
+
const brightness = (r * 299 + g * 587 + b * 114) / 1000;
|
|
22484
|
+
return brightness > 130 ? '#000000' : '#ffffff';
|
|
22447
22485
|
}
|
|
22448
22486
|
ngOnInit() {
|
|
22487
|
+
this.styles = this.data?.styles;
|
|
22449
22488
|
this.load();
|
|
22450
22489
|
}
|
|
22451
22490
|
load() {
|
|
@@ -22469,6 +22508,12 @@ class MyBookingsComponent {
|
|
|
22469
22508
|
}, () => {
|
|
22470
22509
|
// Non-fatal - the detail view just won't show a policy note.
|
|
22471
22510
|
});
|
|
22511
|
+
this.restService.getBusinessAppointmentSettings(businessId).subscribe((res) => {
|
|
22512
|
+
this.rescheduleCutoffHours = res?.rescheduleCutoffHours ?? 24;
|
|
22513
|
+
}, () => {
|
|
22514
|
+
// Non-fatal - falls back to the default cutoff used for display only; the backend is the
|
|
22515
|
+
// real source of truth and enforces its own actual configured value regardless.
|
|
22516
|
+
});
|
|
22472
22517
|
}
|
|
22473
22518
|
isUpcoming(b) {
|
|
22474
22519
|
const today = new Date();
|
|
@@ -22558,13 +22603,104 @@ class MyBookingsComponent {
|
|
|
22558
22603
|
get canCancelSelected() {
|
|
22559
22604
|
return !!this.selected && (this.selected.status === 'HOLD' || this.selected.status === 'BOOKED' || this.selected.status === 'PENDING');
|
|
22560
22605
|
}
|
|
22606
|
+
get canRescheduleSelected() {
|
|
22607
|
+
return !!this.selected && this.selected.status === 'BOOKED' && !!this.selected.canReschedule;
|
|
22608
|
+
}
|
|
22561
22609
|
viewBookingDetail(b) {
|
|
22562
22610
|
this.selected = b;
|
|
22563
22611
|
this.currentTab = 'DETAIL';
|
|
22612
|
+
this.reschedulePanelOpen = false;
|
|
22564
22613
|
}
|
|
22565
22614
|
backToList() {
|
|
22566
22615
|
this.currentTab = 'LIST';
|
|
22567
22616
|
this.selected = null;
|
|
22617
|
+
this.reschedulePanelOpen = false;
|
|
22618
|
+
}
|
|
22619
|
+
// ------------------------------------------------------------------------------ Reschedule
|
|
22620
|
+
openReschedulePanel() {
|
|
22621
|
+
if (!this.selected)
|
|
22622
|
+
return;
|
|
22623
|
+
this.reschedulePanelOpen = true;
|
|
22624
|
+
this.reschSelectedTime = '';
|
|
22625
|
+
this.reschError = '';
|
|
22626
|
+
this.buildReschDayStrip();
|
|
22627
|
+
if (this.reschDays.length)
|
|
22628
|
+
this.selectReschDay(this.reschDays[0]);
|
|
22629
|
+
}
|
|
22630
|
+
closeReschedulePanel() {
|
|
22631
|
+
this.reschedulePanelOpen = false;
|
|
22632
|
+
}
|
|
22633
|
+
buildReschDayStrip() {
|
|
22634
|
+
const today = new Date();
|
|
22635
|
+
today.setHours(0, 0, 0, 0);
|
|
22636
|
+
this.reschDays = [];
|
|
22637
|
+
for (let i = 0; i < 14; i++) {
|
|
22638
|
+
const d = new Date(today);
|
|
22639
|
+
d.setDate(d.getDate() + i);
|
|
22640
|
+
this.reschDays.push({
|
|
22641
|
+
iso: d.toISOString(),
|
|
22642
|
+
dow: d.toLocaleDateString('en-IN', { weekday: 'short' }),
|
|
22643
|
+
num: d.toLocaleDateString('en-IN', { day: 'numeric' }),
|
|
22644
|
+
});
|
|
22645
|
+
}
|
|
22646
|
+
}
|
|
22647
|
+
/** Mouse users have no swipe/trackpad gesture for the horizontally-scrolling day strip - give
|
|
22648
|
+
* them explicit prev/next arrows instead of relying on shift+wheel (matches the admin side's
|
|
22649
|
+
* RescheduleAppointmentComponent#scrollDays). */
|
|
22650
|
+
scrollReschDays(direction) {
|
|
22651
|
+
const el = this.reschDayStripRef?.nativeElement;
|
|
22652
|
+
if (!el)
|
|
22653
|
+
return;
|
|
22654
|
+
el.scrollBy({ left: direction * 160, behavior: 'smooth' });
|
|
22655
|
+
}
|
|
22656
|
+
selectReschDay(day) {
|
|
22657
|
+
this.reschSelectedIso = day.iso;
|
|
22658
|
+
this.reschSelectedTime = '';
|
|
22659
|
+
this.reschError = '';
|
|
22660
|
+
this.fetchReschSlots();
|
|
22661
|
+
}
|
|
22662
|
+
fetchReschSlots() {
|
|
22663
|
+
if (!this.selected)
|
|
22664
|
+
return;
|
|
22665
|
+
this.reschLoadingSlots = true;
|
|
22666
|
+
this.reschNoSlots = false;
|
|
22667
|
+
this.reschSlots = [];
|
|
22668
|
+
this.restService.getRescheduleSlots(this.selected.groupId, this.reschSelectedIso).subscribe((res) => {
|
|
22669
|
+
this.reschLoadingSlots = false;
|
|
22670
|
+
this.reschSlots = res ?? [];
|
|
22671
|
+
this.reschNoSlots = this.reschSlots.length === 0;
|
|
22672
|
+
}, () => {
|
|
22673
|
+
this.reschLoadingSlots = false;
|
|
22674
|
+
this.reschNoSlots = true;
|
|
22675
|
+
});
|
|
22676
|
+
}
|
|
22677
|
+
selectReschTime(time) {
|
|
22678
|
+
this.reschSelectedTime = time;
|
|
22679
|
+
}
|
|
22680
|
+
get reschInvalid() {
|
|
22681
|
+
return !this.reschSelectedIso || !this.reschSelectedTime || this.reschConfirming;
|
|
22682
|
+
}
|
|
22683
|
+
confirmReschedule() {
|
|
22684
|
+
if (!this.selected || this.reschInvalid)
|
|
22685
|
+
return;
|
|
22686
|
+
this.reschConfirming = true;
|
|
22687
|
+
this.reschError = '';
|
|
22688
|
+
this.restService.rescheduleBooking(this.selected.groupId, this.reschSelectedIso, this.reschSelectedTime).subscribe((group) => {
|
|
22689
|
+
this.reschConfirming = false;
|
|
22690
|
+
this.reschedulePanelOpen = false;
|
|
22691
|
+
if (this.selected) {
|
|
22692
|
+
this.selected.bookingDate = group?.bookingDate ?? this.reschSelectedIso;
|
|
22693
|
+
this.selected.startTime = group?.startTime ?? this.selected.startTime;
|
|
22694
|
+
this.selected.endTime = group?.endTime ?? this.selected.endTime;
|
|
22695
|
+
this.selected.canReschedule = group?.canReschedule ?? false;
|
|
22696
|
+
this.selected.rescheduleBlockedReason = group?.rescheduleBlockedReason ?? '';
|
|
22697
|
+
}
|
|
22698
|
+
this.splitBookings();
|
|
22699
|
+
this.messageService.add({ severity: 'success', summary: 'Booking rescheduled' });
|
|
22700
|
+
}, (error) => {
|
|
22701
|
+
this.reschConfirming = false;
|
|
22702
|
+
this.reschError = error?.error?.message || error?.error?.detail || 'Unable to reschedule this booking';
|
|
22703
|
+
});
|
|
22568
22704
|
}
|
|
22569
22705
|
cancelBooking() {
|
|
22570
22706
|
if (!this.selected || this.cancelling)
|
|
@@ -22582,12 +22718,17 @@ class MyBookingsComponent {
|
|
|
22582
22718
|
});
|
|
22583
22719
|
}
|
|
22584
22720
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MyBookingsComponent, deps: [{ token: RestService }, { token: StorageServiceService }, { token: i6$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
22585
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MyBookingsComponent, isStandalone: true, selector: "simpo-my-bookings", providers: [MessageService], ngImport: i0, template: "<p-toast position=\"bottom-right\"></p-toast>\n\n<div class=\"mb-root\">\n <ng-container *ngIf=\"currentTab === 'LIST'\">\n <div class=\"mb-title\">My Bookings</div>\n\n <div class=\"mb-tabs\">\n <button type=\"button\" class=\"mb-tab\" [class.active]=\"profTab === 'upcoming'\" (click)=\"setProfTab('upcoming')\">Upcoming</button>\n <button type=\"button\" class=\"mb-tab\" [class.active]=\"profTab === 'past'\" (click)=\"setProfTab('past')\">Past</button>\n </div>\n\n <div class=\"mb-loading\" *ngIf=\"loading\">Loading your bookings\u2026</div>\n\n <div class=\"mb-rows\" *ngIf=\"!loading && !isEmpty\">\n <button type=\"button\" class=\"mb-row\" *ngFor=\"let b of rows\" (click)=\"viewBookingDetail(b)\">\n <div class=\"mb-row-stripe\" [ngClass]=\"b.mode === 'HOME_VISIT' ? 'stripe-home' : b.mode === 'VIDEO_CALL' ? 'stripe-video' : 'stripe-store'\"></div>\n <div class=\"mb-row-info\">\n <div class=\"mb-row-top\">\n <div class=\"mb-row-title\">{{title(b)}}</div>\n </div>\n <div class=\"mb-row-when\">{{when(b)}}</div>\n <div class=\"mb-row-detail\">{{detail(b)}}</div>\n </div>\n <div class=\"mb-row-end\">\n <span class=\"mb-status\" [ngClass]=\"statusClass(b.status)\">{{statusLabel(b.status)}}</span>\n </div>\n </button>\n </div>\n\n <div class=\"mb-empty\" *ngIf=\"isEmpty\">\n <mat-icon class=\"mb-empty-icon\">event_busy</mat-icon>\n <div class=\"mb-empty-title\">No {{profTab}} bookings yet.</div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"currentTab === 'DETAIL' && selected\">\n <button type=\"button\" class=\"mb-back\" (click)=\"backToList()\">\n <mat-icon>arrow_back</mat-icon> Back to My Bookings\n </button>\n\n <div class=\"mb-detail-card\">\n <div class=\"mb-detail-header\">\n <div class=\"mb-detail-title-row\">\n <div class=\"mb-detail-title\">{{title(selected)}}</div>\n <span class=\"mb-status\" [ngClass]=\"statusClass(selected.status)\">{{statusLabel(selected.status)}}</span>\n </div>\n <div class=\"mb-detail-when\">{{when(selected)}}</div>\n </div>\n\n <div class=\"mb-detail-rows\">\n <div class=\"mb-detail-row\" *ngIf=\"selected.services?.length\">\n <div class=\"mb-detail-k\">Services</div>\n <div class=\"mb-detail-v\">{{serviceNames(selected)}}</div>\n </div>\n <div class=\"mb-detail-row\" *ngIf=\"selected.productLines?.length\">\n <div class=\"mb-detail-k\">Products</div>\n <div class=\"mb-detail-v\">{{productNames(selected)}}</div>\n </div>\n <div class=\"mb-detail-row\" *ngIf=\"selected.customerDetail\">\n <div class=\"mb-detail-k\">Contact</div>\n <div class=\"mb-detail-v\">{{selected.customerDetail?.name}} \u00B7 {{selected.customerDetail?.phoneNumber}} \u00B7 {{selected.customerDetail?.email}}</div>\n </div>\n <div class=\"mb-detail-row\" *ngIf=\"selected.mode === 'HOME_VISIT' && selected.addressDetails\">\n <div class=\"mb-detail-k\">Address</div>\n <div class=\"mb-detail-v\">{{selected.addressDetails?.addressLine1}}, {{selected.addressDetails?.city}}, {{selected.addressDetails?.state}} {{selected.addressDetails?.zipCode}}</div>\n </div>\n <div class=\"mb-detail-row\" *ngIf=\"servicePriceTotal(selected) > 0\">\n <div class=\"mb-detail-k\">Service price</div>\n <div class=\"mb-detail-v\">\u20B9{{servicePriceTotal(selected)}}</div>\n </div>\n <div class=\"mb-detail-row\" *ngIf=\"selected.homeVisitCharge\">\n <div class=\"mb-detail-k\">Home visit charge</div>\n <div class=\"mb-detail-v\">\u20B9{{selected.homeVisitCharge}}</div>\n </div>\n <div class=\"mb-detail-row\">\n <div class=\"mb-detail-k\">Total</div>\n <div class=\"mb-detail-v\">\u20B9{{totalDue(selected)}}</div>\n </div>\n <div class=\"mb-detail-row\">\n <div class=\"mb-detail-k\">Paid</div>\n <div class=\"mb-detail-v\">{{paidLabel(selected)}}</div>\n </div>\n <div class=\"mb-detail-row\" *ngIf=\"pendingAmount(selected) > 0\">\n <div class=\"mb-detail-k\">Pending at appointment</div>\n <div class=\"mb-detail-v\">\u20B9{{pendingAmount(selected)}}</div>\n </div>\n </div>\n\n <div class=\"mb-video-link\" *ngIf=\"selected.mode === 'VIDEO_CALL' && selected.videoCallLink && selected.status !== 'CANCELLED'\">\n <mat-icon>videocam</mat-icon>\n <a [href]=\"selected.videoCallLink\" target=\"_blank\">{{selected.videoCallLink}}</a>\n </div>\n\n <ng-container *ngIf=\"canCancelSelected\">\n <div class=\"mb-policy\" *ngIf=\"cancellationPolicy\">\n <div class=\"mb-policy-title\">{{cancellationPolicy.title}}</div>\n <div class=\"mb-policy-text\">{{cancellationPolicy.policyDetails}}</div>\n </div>\n <button type=\"button\" class=\"mb-cancel-btn\" [disabled]=\"cancelling\" (click)=\"cancelBooking()\">\n {{cancelling ? 'Cancelling\u2026' : 'Cancel booking'}}\n </button>\n </ng-container>\n\n <div class=\"mb-cancelled-note\" *ngIf=\"selected.status === 'CANCELLED'\">This booking has been cancelled.</div>\n </div>\n </ng-container>\n</div>\n", styles: [".mb-root{display:flex;flex-direction:column;gap:16px;padding:4px 0 24px}.mb-title{font-size:20px;font-weight:600;color:#1b2436}.mb-tabs{display:flex;background:#f5f2ee;border-radius:8px;padding:4px;gap:4px;width:fit-content}.mb-tab{border:none;background:transparent;border-radius:6px;padding:8px 18px;font-size:13.5px;font-weight:500;color:#8a94a3;cursor:pointer}.mb-tab.active{background:#fff;color:#1b2436;font-weight:600;box-shadow:0 1px 3px #00000012}.mb-loading{font-size:13.5px;color:#8a94a3;padding:20px 0}.mb-rows{display:flex;flex-direction:column;gap:12px}.mb-row{border:1px solid #EEE9E3;border-radius:10px;padding:16px 18px;display:flex;align-items:flex-start;gap:14px;background:#fff;cursor:pointer;text-align:left;width:100%}.mb-row-stripe{width:3px;align-self:stretch;border-radius:999px;flex:none}.stripe-home{background:#16233a}.stripe-video{background:#7c3a11}.stripe-store{background:#8a94a3}.mb-row-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.mb-row-title{font-size:14.5px;font-weight:600;color:#1b2436}.mb-row-when{font-size:12.5px;color:#6b7688}.mb-row-detail{font-size:12px;color:#8a94a3}.mb-row-end{flex:none}.mb-status{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;border-radius:999px;padding:4px 9px;white-space:nowrap}.status-confirmed{background:#e8f4ee;color:#1e7a4b}.status-completed{background:#f2eee9;color:#8a7c6c}.status-cancelled{background:#fbedec;color:#b4432e}.status-pending{background:#fdf3e3;color:#b36b00}.mb-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:50px 20px;text-align:center}.mb-empty-icon{font-size:40px!important;height:40px!important;width:40px!important;color:#c9b7a2!important}.mb-empty-title{font-size:14.5px;color:#8a94a3}.mb-back{display:flex;align-items:center;gap:6px;border:none;background:none;padding:0;cursor:pointer;font-size:12.5px;color:#7c3a11;margin-bottom:6px;width:fit-content}.mb-back mat-icon{font-size:16px!important;height:16px!important;width:16px!important}.mb-detail-card{border:1px solid #EEE9E3;border-radius:12px;padding:20px 22px;display:flex;flex-direction:column;gap:16px;background:#fff}.mb-detail-header{display:flex;flex-direction:column;gap:6px;padding-bottom:14px;border-bottom:1px solid #F0ECE7}.mb-detail-title-row{display:flex;align-items:center;gap:10px}.mb-detail-title{font-size:17px;font-weight:600;color:#1b2436}.mb-detail-when{font-size:13px;color:#6b7688}.mb-detail-rows{display:flex;flex-direction:column;gap:12px}.mb-detail-row{display:flex;justify-content:space-between;gap:16px;font-size:13px}.mb-detail-k{color:#8a94a3;flex:none}.mb-detail-v{color:#1b2436;font-weight:500;text-align:right}.mb-video-link{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#f2f9f5;border-radius:8px;font-size:13px;color:#2c6a4b}.mb-video-link mat-icon{color:#1e7a4b!important;flex:none}.mb-policy{background:#fbfaf8;border:1px solid #EDE8E2;border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}.mb-policy-title{font-size:12px;font-weight:600;color:#a08b72;text-transform:uppercase;letter-spacing:.06em}.mb-policy-text{font-size:12.5px;line-height:1.6;color:#5f6b7c}.mb-cancel-btn{height:46px;border:1.5px solid #E3CFC9;border-radius:8px;background:#fff;color:#b4432e;font-size:13.5px;font-weight:600;cursor:pointer}.mb-cancel-btn:disabled{opacity:.6;cursor:not-allowed}.mb-cancelled-note{font-size:13px;color:#b4432e;font-weight:600}\n"], dependencies: [{ 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: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
|
|
22721
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MyBookingsComponent, isStandalone: true, selector: "simpo-my-bookings", inputs: { data: "data" }, providers: [MessageService], viewQueries: [{ propertyName: "reschDayStripRef", first: true, predicate: ["reschDayStrip"], descendants: true }], ngImport: i0, template: "<p-toast position=\"bottom-right\"></p-toast>\n\n<div class=\"mb-root\">\n <ng-container *ngIf=\"currentTab === 'LIST'\">\n <div class=\"mb-title\">My Bookings</div>\n\n <div class=\"mb-tabs\">\n <button type=\"button\" class=\"mb-tab\" [class.active]=\"profTab === 'upcoming'\" (click)=\"setProfTab('upcoming')\">Upcoming</button>\n <button type=\"button\" class=\"mb-tab\" [class.active]=\"profTab === 'past'\" (click)=\"setProfTab('past')\">Past</button>\n </div>\n\n <div class=\"mb-loading\" *ngIf=\"loading\">Loading your bookings\u2026</div>\n\n <div class=\"mb-rows\" *ngIf=\"!loading && !isEmpty\">\n <button type=\"button\" class=\"mb-row\" *ngFor=\"let b of rows\" (click)=\"viewBookingDetail(b)\">\n <div class=\"mb-row-stripe\" [ngClass]=\"b.mode === 'HOME_VISIT' ? 'stripe-home' : b.mode === 'VIDEO_CALL' ? 'stripe-video' : 'stripe-store'\"></div>\n <div class=\"mb-row-info\">\n <div class=\"mb-row-top\">\n <div class=\"mb-row-title\">{{title(b)}}</div>\n </div>\n <div class=\"mb-row-when\">{{when(b)}}</div>\n <div class=\"mb-row-detail\">{{detail(b)}}</div>\n </div>\n <div class=\"mb-row-end\">\n <span class=\"mb-status\" [ngClass]=\"statusClass(b.status)\">{{statusLabel(b.status)}}</span>\n </div>\n </button>\n </div>\n\n <div class=\"mb-empty\" *ngIf=\"isEmpty\">\n <mat-icon class=\"mb-empty-icon\">event_busy</mat-icon>\n <div class=\"mb-empty-title\">No {{profTab}} bookings yet.</div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"currentTab === 'DETAIL' && selected\">\n <button type=\"button\" class=\"mb-back\" (click)=\"backToList()\">\n <mat-icon>arrow_back</mat-icon> Back to My Bookings\n </button>\n\n <div class=\"mb-detail-card\">\n <div class=\"mb-detail-header\">\n <div class=\"mb-detail-title-row\">\n <div class=\"mb-detail-title\">{{title(selected)}}</div>\n <span class=\"mb-status\" [ngClass]=\"statusClass(selected.status)\">{{statusLabel(selected.status)}}</span>\n </div>\n <div class=\"mb-detail-when\">{{when(selected)}}</div>\n </div>\n\n <div class=\"mb-detail-rows\">\n <div class=\"mb-detail-row\" *ngIf=\"selected.services?.length\">\n <div class=\"mb-detail-k\">Services</div>\n <div class=\"mb-detail-v\">{{serviceNames(selected)}}</div>\n </div>\n <div class=\"mb-detail-row\" *ngIf=\"selected.productLines?.length\">\n <div class=\"mb-detail-k\">Products</div>\n <div class=\"mb-detail-v\">{{productNames(selected)}}</div>\n </div>\n <div class=\"mb-detail-row\" *ngIf=\"selected.customerDetail\">\n <div class=\"mb-detail-k\">Contact</div>\n <div class=\"mb-detail-v\">{{selected.customerDetail?.name}} \u00B7 {{selected.customerDetail?.phoneNumber}} \u00B7 {{selected.customerDetail?.email}}</div>\n </div>\n <div class=\"mb-detail-row\" *ngIf=\"selected.mode === 'HOME_VISIT' && selected.addressDetails\">\n <div class=\"mb-detail-k\">Address</div>\n <div class=\"mb-detail-v\">{{selected.addressDetails?.addressLine1}}, {{selected.addressDetails?.city}}, {{selected.addressDetails?.state}} {{selected.addressDetails?.zipCode}}</div>\n </div>\n <div class=\"mb-detail-row\" *ngIf=\"servicePriceTotal(selected) > 0\">\n <div class=\"mb-detail-k\">Service price</div>\n <div class=\"mb-detail-v\">\u20B9{{servicePriceTotal(selected)}}</div>\n </div>\n <div class=\"mb-detail-row\" *ngIf=\"selected.homeVisitCharge\">\n <div class=\"mb-detail-k\">Home visit charge</div>\n <div class=\"mb-detail-v\">\u20B9{{selected.homeVisitCharge}}</div>\n </div>\n <div class=\"mb-detail-row\">\n <div class=\"mb-detail-k\">Total</div>\n <div class=\"mb-detail-v\">\u20B9{{totalDue(selected)}}</div>\n </div>\n <div class=\"mb-detail-row\">\n <div class=\"mb-detail-k\">Paid</div>\n <div class=\"mb-detail-v\">{{paidLabel(selected)}}</div>\n </div>\n <div class=\"mb-detail-row\" *ngIf=\"pendingAmount(selected) > 0\">\n <div class=\"mb-detail-k\">Pending at appointment</div>\n <div class=\"mb-detail-v\">\u20B9{{pendingAmount(selected)}}</div>\n </div>\n </div>\n\n <div class=\"mb-video-link\" *ngIf=\"selected.mode === 'VIDEO_CALL' && selected.videoCallLink && selected.status !== 'CANCELLED'\">\n <mat-icon>videocam</mat-icon>\n <a [href]=\"selected.videoCallLink\" target=\"_blank\">{{selected.videoCallLink}}</a>\n </div>\n\n <div class=\"mb-policy\" *ngIf=\"canRescheduleSelected\">\n <div class=\"mb-policy-title\">Reschedule policy</div>\n <div class=\"mb-policy-text\">You can reschedule this booking up to {{rescheduleCutoffHours}} hour{{rescheduleCutoffHours === 1 ? '' : 's'}} before the appointment time.</div>\n </div>\n <div class=\"mb-policy\" *ngIf=\"canCancelSelected && cancellationPolicy\">\n <div class=\"mb-policy-title\">{{cancellationPolicy.title}}</div>\n <div class=\"mb-policy-text\">{{cancellationPolicy.policyDetails}}</div>\n </div>\n\n <div class=\"mb-actions-row\" *ngIf=\"selected.status === 'BOOKED' || canCancelSelected\">\n <button\n type=\"button\"\n class=\"mb-reschedule-btn\"\n *ngIf=\"selected.status === 'BOOKED'\"\n [disabled]=\"!canRescheduleSelected\"\n [title]=\"!canRescheduleSelected ? selected.rescheduleBlockedReason : ''\"\n [style.borderColor]=\"styles?.background?.accentColor\"\n [style.color]=\"styles?.background?.accentColor\"\n (click)=\"openReschedulePanel()\"\n >Reschedule booking</button>\n <button\n type=\"button\"\n class=\"mb-cancel-btn\"\n *ngIf=\"canCancelSelected\"\n [disabled]=\"cancelling\"\n [style.borderColor]=\"styles?.background?.accentColor\"\n [style.color]=\"styles?.background?.accentColor\"\n (click)=\"cancelBooking()\"\n >\n {{cancelling ? 'Cancelling\u2026' : 'Cancel booking'}}\n </button>\n </div>\n\n <div class=\"mb-cancelled-note\" *ngIf=\"selected.status === 'CANCELLED'\">This booking has been cancelled.</div>\n </div>\n </ng-container>\n\n <div class=\"mb-resch-backdrop\" *ngIf=\"reschedulePanelOpen\" (click)=\"closeReschedulePanel()\">\n <div class=\"mb-resch-panel\" (click)=\"$event.stopPropagation()\">\n <div class=\"mb-resch-header\">\n <div class=\"mb-resch-title\">Choose a new date & time</div>\n <button type=\"button\" class=\"mb-resch-close\" (click)=\"closeReschedulePanel()\">×</button>\n </div>\n\n <div class=\"mb-resch-body\">\n <div class=\"mb-resch-daystrip-row\">\n <button type=\"button\" class=\"mb-resch-nav\" (click)=\"scrollReschDays(-1)\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 18l-6-6 6-6\"></path></svg>\n </button>\n <div class=\"mb-resch-daystrip\" #reschDayStrip>\n <button\n type=\"button\"\n class=\"mb-resch-day\"\n *ngFor=\"let day of reschDays\"\n [class.active]=\"day.iso === reschSelectedIso\"\n [style.background]=\"day.iso === reschSelectedIso ? styles?.background?.accentColor : null\"\n [style.borderColor]=\"day.iso === reschSelectedIso ? styles?.background?.accentColor : null\"\n (click)=\"selectReschDay(day)\"\n >\n <span class=\"mb-resch-day-dow\" [style.color]=\"day.iso === reschSelectedIso ? contrastColor : null\">{{day.dow}}</span>\n <span class=\"mb-resch-day-num\" [style.color]=\"day.iso === reschSelectedIso ? contrastColor : null\">{{day.num}}</span>\n </button>\n </div>\n <button type=\"button\" class=\"mb-resch-nav\" (click)=\"scrollReschDays(1)\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 18l6-6-6-6\"></path></svg>\n </button>\n </div>\n\n <div class=\"mb-resch-slots-loading\" *ngIf=\"reschLoadingSlots\">Loading available times\u2026</div>\n <div class=\"mb-resch-slots-empty\" *ngIf=\"!reschLoadingSlots && reschNoSlots\">No slots available on this date. Try another date.</div>\n <div class=\"mb-resch-slots\" *ngIf=\"!reschLoadingSlots && reschSlots.length\">\n <button\n type=\"button\"\n class=\"mb-resch-slot\"\n *ngFor=\"let slot of reschSlots\"\n [class.active]=\"slot === reschSelectedTime\"\n [style.background]=\"slot === reschSelectedTime ? styles?.background?.accentColor : null\"\n [style.borderColor]=\"slot === reschSelectedTime ? styles?.background?.accentColor : null\"\n [style.color]=\"slot === reschSelectedTime ? contrastColor : null\"\n (click)=\"selectReschTime(slot)\"\n >{{slot}}</button>\n </div>\n\n <div class=\"mb-resch-error\" *ngIf=\"reschError\">{{reschError}}</div>\n </div>\n\n <div class=\"mb-resch-footer\">\n <button type=\"button\" class=\"mb-resch-cancel\" (click)=\"closeReschedulePanel()\">Cancel</button>\n <button\n type=\"button\"\n class=\"mb-resch-confirm\"\n [disabled]=\"reschInvalid\"\n [style.background]=\"reschInvalid ? null : styles?.background?.accentColor\"\n [style.color]=\"reschInvalid ? null : contrastColor\"\n (click)=\"confirmReschedule()\"\n >\n {{reschConfirming ? 'Confirming\u2026' : 'Confirm new slot'}}\n </button>\n </div>\n </div>\n </div>\n</div>\n", styles: [".mb-root{display:flex;flex-direction:column;gap:16px;padding:4px 0 24px}.mb-title{font-size:20px;font-weight:600;color:#1b2436}.mb-tabs{display:flex;background:#f5f2ee;border-radius:8px;padding:4px;gap:4px;width:fit-content}.mb-tab{border:none;background:transparent;border-radius:6px;padding:8px 18px;font-size:13.5px;font-weight:500;color:#8a94a3;cursor:pointer}.mb-tab.active{background:#fff;color:#1b2436;font-weight:600;box-shadow:0 1px 3px #00000012}.mb-loading{font-size:13.5px;color:#8a94a3;padding:20px 0}.mb-rows{display:flex;flex-direction:column;gap:12px}.mb-row{border:1px solid #EEE9E3;border-radius:10px;padding:16px 18px;display:flex;align-items:flex-start;gap:14px;background:#fff;cursor:pointer;text-align:left;width:100%}.mb-row-stripe{width:3px;align-self:stretch;border-radius:999px;flex:none}.stripe-home{background:#16233a}.stripe-video{background:#7c3a11}.stripe-store{background:#8a94a3}.mb-row-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.mb-row-title{font-size:14.5px;font-weight:600;color:#1b2436}.mb-row-when{font-size:12.5px;color:#6b7688}.mb-row-detail{font-size:12px;color:#8a94a3}.mb-row-end{flex:none}.mb-status{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;border-radius:999px;padding:4px 9px;white-space:nowrap}.status-confirmed{background:#e8f4ee;color:#1e7a4b}.status-completed{background:#f2eee9;color:#8a7c6c}.status-cancelled{background:#fbedec;color:#b4432e}.status-pending{background:#fdf3e3;color:#b36b00}.mb-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:50px 20px;text-align:center}.mb-empty-icon{font-size:40px!important;height:40px!important;width:40px!important;color:#c9b7a2!important}.mb-empty-title{font-size:14.5px;color:#8a94a3}.mb-back{display:flex;align-items:center;gap:6px;border:none;background:none;padding:0;cursor:pointer;font-size:12.5px;color:#7c3a11;margin-bottom:6px;width:fit-content}.mb-back mat-icon{font-size:16px!important;height:16px!important;width:16px!important}.mb-detail-card{border:1px solid #EEE9E3;border-radius:12px;padding:20px 22px;display:flex;flex-direction:column;gap:16px;background:#fff}.mb-detail-header{display:flex;flex-direction:column;gap:6px;padding-bottom:14px;border-bottom:1px solid #F0ECE7}.mb-detail-title-row{display:flex;align-items:center;gap:10px}.mb-detail-title{font-size:17px;font-weight:600;color:#1b2436}.mb-detail-when{font-size:13px;color:#6b7688}.mb-detail-rows{display:flex;flex-direction:column;gap:12px}.mb-detail-row{display:flex;justify-content:space-between;gap:16px;font-size:13px}.mb-detail-k{color:#8a94a3;flex:none}.mb-detail-v{color:#1b2436;font-weight:500;text-align:right}.mb-video-link{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#f2f9f5;border-radius:8px;font-size:13px;color:#2c6a4b}.mb-video-link mat-icon{color:#1e7a4b!important;flex:none}.mb-policy{background:#fbfaf8;border:1px solid #EDE8E2;border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}.mb-policy-title{font-size:12px;font-weight:600;color:#a08b72;text-transform:uppercase;letter-spacing:.06em}.mb-policy-text{font-size:12.5px;line-height:1.6;color:#5f6b7c}.mb-cancel-btn{height:46px;border:1.5px solid;border-radius:8px;background:#fff;font-size:13.5px;font-weight:600;cursor:pointer}.mb-cancel-btn:disabled{opacity:.6;cursor:not-allowed}.mb-cancelled-note{font-size:13px;color:#b4432e;font-weight:600}.mb-actions-row{display:flex;gap:12px}.mb-actions-row .mb-reschedule-btn,.mb-actions-row .mb-cancel-btn{flex:1}.mb-reschedule-btn{height:46px;border:1.5px solid;border-radius:8px;background:#fff;font-size:13.5px;font-weight:600;cursor:pointer}.mb-reschedule-btn:disabled{opacity:.5;cursor:not-allowed}.mb-resch-backdrop{position:fixed;inset:0;background:#1b243673;display:flex;align-items:center;justify-content:center;padding:16px;z-index:1000}.mb-resch-panel{width:100%;max-width:440px;max-height:85vh;border-radius:14px;background:#fff;box-shadow:0 20px 50px #14141e40;display:flex;flex-direction:column;overflow:hidden}.mb-resch-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid #F0ECE7;flex:none}.mb-resch-body{padding:18px 20px;overflow-y:auto}.mb-resch-footer{display:flex;gap:10px;padding:14px 20px;border-top:1px solid #F0ECE7;flex:none}.mb-resch-footer .mb-resch-cancel,.mb-resch-footer .mb-resch-confirm{flex:1}.mb-resch-cancel{height:46px;border:1.5px solid #E2E2E9;border-radius:8px;background:#fff;color:#5f6b7c;font-size:13.5px;font-weight:600;cursor:pointer}.mb-resch-title{font-size:14px;font-weight:600;color:#1b2436}.mb-resch-close{border:none;background:none;font-size:18px;color:#8a94a3;cursor:pointer;line-height:1}.mb-resch-daystrip-row{display:flex;align-items:center;gap:4px;margin-bottom:14px}.mb-resch-daystrip{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scroll-behavior:smooth}.mb-resch-daystrip::-webkit-scrollbar{height:5px}.mb-resch-daystrip::-webkit-scrollbar-thumb{background:#eee9e3;border-radius:999px}.mb-resch-nav{flex:none;width:26px!important;height:26px;border:1px solid #EEE9E3;border-radius:999px;background:#fff;color:#8a94a3;cursor:pointer;display:flex;align-items:center;justify-content:center}.mb-resch-nav:hover{border-color:#7c3a11;color:#7c3a11}.mb-resch-day{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;width:50px!important;padding:8px 0;border:1px solid #EEE9E3;border-radius:10px;background:#fff;cursor:pointer}.mb-resch-day:hover{border-color:#7c3a11}.mb-resch-day-dow{font-size:10.5px;color:#8a94a3;text-transform:uppercase}.mb-resch-day-num{font-size:13.5px;font-weight:600;color:#1b2436}.mb-resch-slots-loading,.mb-resch-slots-empty{font-size:12.5px;color:#8a94a3;margin-bottom:14px}.mb-resch-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.mb-resch-slot{padding:9px 6px;border:1px solid #EEE9E3;border-radius:8px;background:#fff;font-size:12.5px!important;color:#1b2436;cursor:pointer}.mb-resch-error{margin-top:14px;font-size:12.5px;color:#b4432e}.mb-resch-confirm{height:46px;border:none;border-radius:8px;background:#94a3b8;color:#fff;font-size:13.5px;font-weight:600;cursor:pointer}.mb-resch-confirm:disabled{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ 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: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
|
|
22586
22722
|
}
|
|
22587
22723
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MyBookingsComponent, decorators: [{
|
|
22588
22724
|
type: Component,
|
|
22589
|
-
args: [{ selector: 'simpo-my-bookings', standalone: true, imports: [CommonModule, MatIconModule, ToastModule], providers: [MessageService], template: "<p-toast position=\"bottom-right\"></p-toast>\n\n<div class=\"mb-root\">\n <ng-container *ngIf=\"currentTab === 'LIST'\">\n <div class=\"mb-title\">My Bookings</div>\n\n <div class=\"mb-tabs\">\n <button type=\"button\" class=\"mb-tab\" [class.active]=\"profTab === 'upcoming'\" (click)=\"setProfTab('upcoming')\">Upcoming</button>\n <button type=\"button\" class=\"mb-tab\" [class.active]=\"profTab === 'past'\" (click)=\"setProfTab('past')\">Past</button>\n </div>\n\n <div class=\"mb-loading\" *ngIf=\"loading\">Loading your bookings\u2026</div>\n\n <div class=\"mb-rows\" *ngIf=\"!loading && !isEmpty\">\n <button type=\"button\" class=\"mb-row\" *ngFor=\"let b of rows\" (click)=\"viewBookingDetail(b)\">\n <div class=\"mb-row-stripe\" [ngClass]=\"b.mode === 'HOME_VISIT' ? 'stripe-home' : b.mode === 'VIDEO_CALL' ? 'stripe-video' : 'stripe-store'\"></div>\n <div class=\"mb-row-info\">\n <div class=\"mb-row-top\">\n <div class=\"mb-row-title\">{{title(b)}}</div>\n </div>\n <div class=\"mb-row-when\">{{when(b)}}</div>\n <div class=\"mb-row-detail\">{{detail(b)}}</div>\n </div>\n <div class=\"mb-row-end\">\n <span class=\"mb-status\" [ngClass]=\"statusClass(b.status)\">{{statusLabel(b.status)}}</span>\n </div>\n </button>\n </div>\n\n <div class=\"mb-empty\" *ngIf=\"isEmpty\">\n <mat-icon class=\"mb-empty-icon\">event_busy</mat-icon>\n <div class=\"mb-empty-title\">No {{profTab}} bookings yet.</div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"currentTab === 'DETAIL' && selected\">\n <button type=\"button\" class=\"mb-back\" (click)=\"backToList()\">\n <mat-icon>arrow_back</mat-icon> Back to My Bookings\n </button>\n\n <div class=\"mb-detail-card\">\n <div class=\"mb-detail-header\">\n <div class=\"mb-detail-title-row\">\n <div class=\"mb-detail-title\">{{title(selected)}}</div>\n <span class=\"mb-status\" [ngClass]=\"statusClass(selected.status)\">{{statusLabel(selected.status)}}</span>\n </div>\n <div class=\"mb-detail-when\">{{when(selected)}}</div>\n </div>\n\n <div class=\"mb-detail-rows\">\n <div class=\"mb-detail-row\" *ngIf=\"selected.services?.length\">\n <div class=\"mb-detail-k\">Services</div>\n <div class=\"mb-detail-v\">{{serviceNames(selected)}}</div>\n </div>\n <div class=\"mb-detail-row\" *ngIf=\"selected.productLines?.length\">\n <div class=\"mb-detail-k\">Products</div>\n <div class=\"mb-detail-v\">{{productNames(selected)}}</div>\n </div>\n <div class=\"mb-detail-row\" *ngIf=\"selected.customerDetail\">\n <div class=\"mb-detail-k\">Contact</div>\n <div class=\"mb-detail-v\">{{selected.customerDetail?.name}} \u00B7 {{selected.customerDetail?.phoneNumber}} \u00B7 {{selected.customerDetail?.email}}</div>\n </div>\n <div class=\"mb-detail-row\" *ngIf=\"selected.mode === 'HOME_VISIT' && selected.addressDetails\">\n <div class=\"mb-detail-k\">Address</div>\n <div class=\"mb-detail-v\">{{selected.addressDetails?.addressLine1}}, {{selected.addressDetails?.city}}, {{selected.addressDetails?.state}} {{selected.addressDetails?.zipCode}}</div>\n </div>\n <div class=\"mb-detail-row\" *ngIf=\"servicePriceTotal(selected) > 0\">\n <div class=\"mb-detail-k\">Service price</div>\n <div class=\"mb-detail-v\">\u20B9{{servicePriceTotal(selected)}}</div>\n </div>\n <div class=\"mb-detail-row\" *ngIf=\"selected.homeVisitCharge\">\n <div class=\"mb-detail-k\">Home visit charge</div>\n <div class=\"mb-detail-v\">\u20B9{{selected.homeVisitCharge}}</div>\n </div>\n <div class=\"mb-detail-row\">\n <div class=\"mb-detail-k\">Total</div>\n <div class=\"mb-detail-v\">\u20B9{{totalDue(selected)}}</div>\n </div>\n <div class=\"mb-detail-row\">\n <div class=\"mb-detail-k\">Paid</div>\n <div class=\"mb-detail-v\">{{paidLabel(selected)}}</div>\n </div>\n <div class=\"mb-detail-row\" *ngIf=\"pendingAmount(selected) > 0\">\n <div class=\"mb-detail-k\">Pending at appointment</div>\n <div class=\"mb-detail-v\">\u20B9{{pendingAmount(selected)}}</div>\n </div>\n </div>\n\n <div class=\"mb-video-link\" *ngIf=\"selected.mode === 'VIDEO_CALL' && selected.videoCallLink && selected.status !== 'CANCELLED'\">\n <mat-icon>videocam</mat-icon>\n <a [href]=\"selected.videoCallLink\" target=\"_blank\">{{selected.videoCallLink}}</a>\n </div>\n\n <ng-container *ngIf=\"canCancelSelected\">\n <div class=\"mb-policy\" *ngIf=\"cancellationPolicy\">\n <div class=\"mb-policy-title\">{{cancellationPolicy.title}}</div>\n <div class=\"mb-policy-text\">{{cancellationPolicy.policyDetails}}</div>\n </div>\n <button type=\"button\" class=\"mb-cancel-btn\" [disabled]=\"cancelling\" (click)=\"cancelBooking()\">\n {{cancelling ? 'Cancelling\u2026' : 'Cancel booking'}}\n </button>\n </ng-container>\n\n <div class=\"mb-cancelled-note\" *ngIf=\"selected.status === 'CANCELLED'\">This booking has been cancelled.</div>\n </div>\n </ng-container>\n</div>\n", styles: [".mb-root{display:flex;flex-direction:column;gap:16px;padding:4px 0 24px}.mb-title{font-size:20px;font-weight:600;color:#1b2436}.mb-tabs{display:flex;background:#f5f2ee;border-radius:8px;padding:4px;gap:4px;width:fit-content}.mb-tab{border:none;background:transparent;border-radius:6px;padding:8px 18px;font-size:13.5px;font-weight:500;color:#8a94a3;cursor:pointer}.mb-tab.active{background:#fff;color:#1b2436;font-weight:600;box-shadow:0 1px 3px #00000012}.mb-loading{font-size:13.5px;color:#8a94a3;padding:20px 0}.mb-rows{display:flex;flex-direction:column;gap:12px}.mb-row{border:1px solid #EEE9E3;border-radius:10px;padding:16px 18px;display:flex;align-items:flex-start;gap:14px;background:#fff;cursor:pointer;text-align:left;width:100%}.mb-row-stripe{width:3px;align-self:stretch;border-radius:999px;flex:none}.stripe-home{background:#16233a}.stripe-video{background:#7c3a11}.stripe-store{background:#8a94a3}.mb-row-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.mb-row-title{font-size:14.5px;font-weight:600;color:#1b2436}.mb-row-when{font-size:12.5px;color:#6b7688}.mb-row-detail{font-size:12px;color:#8a94a3}.mb-row-end{flex:none}.mb-status{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;border-radius:999px;padding:4px 9px;white-space:nowrap}.status-confirmed{background:#e8f4ee;color:#1e7a4b}.status-completed{background:#f2eee9;color:#8a7c6c}.status-cancelled{background:#fbedec;color:#b4432e}.status-pending{background:#fdf3e3;color:#b36b00}.mb-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:50px 20px;text-align:center}.mb-empty-icon{font-size:40px!important;height:40px!important;width:40px!important;color:#c9b7a2!important}.mb-empty-title{font-size:14.5px;color:#8a94a3}.mb-back{display:flex;align-items:center;gap:6px;border:none;background:none;padding:0;cursor:pointer;font-size:12.5px;color:#7c3a11;margin-bottom:6px;width:fit-content}.mb-back mat-icon{font-size:16px!important;height:16px!important;width:16px!important}.mb-detail-card{border:1px solid #EEE9E3;border-radius:12px;padding:20px 22px;display:flex;flex-direction:column;gap:16px;background:#fff}.mb-detail-header{display:flex;flex-direction:column;gap:6px;padding-bottom:14px;border-bottom:1px solid #F0ECE7}.mb-detail-title-row{display:flex;align-items:center;gap:10px}.mb-detail-title{font-size:17px;font-weight:600;color:#1b2436}.mb-detail-when{font-size:13px;color:#6b7688}.mb-detail-rows{display:flex;flex-direction:column;gap:12px}.mb-detail-row{display:flex;justify-content:space-between;gap:16px;font-size:13px}.mb-detail-k{color:#8a94a3;flex:none}.mb-detail-v{color:#1b2436;font-weight:500;text-align:right}.mb-video-link{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#f2f9f5;border-radius:8px;font-size:13px;color:#2c6a4b}.mb-video-link mat-icon{color:#1e7a4b!important;flex:none}.mb-policy{background:#fbfaf8;border:1px solid #EDE8E2;border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}.mb-policy-title{font-size:12px;font-weight:600;color:#a08b72;text-transform:uppercase;letter-spacing:.06em}.mb-policy-text{font-size:12.5px;line-height:1.6;color:#5f6b7c}.mb-cancel-btn{height:46px;border:1.5px solid #E3CFC9;border-radius:8px;background:#fff;color:#b4432e;font-size:13.5px;font-weight:600;cursor:pointer}.mb-cancel-btn:disabled{opacity:.6;cursor:not-allowed}.mb-cancelled-note{font-size:13px;color:#b4432e;font-weight:600}\n"] }]
|
|
22590
|
-
}], ctorParameters: () => [{ type: RestService }, { type: StorageServiceService }, { type: i6$1.MessageService }]
|
|
22725
|
+
args: [{ selector: 'simpo-my-bookings', standalone: true, imports: [CommonModule, MatIconModule, ToastModule], providers: [MessageService], template: "<p-toast position=\"bottom-right\"></p-toast>\n\n<div class=\"mb-root\">\n <ng-container *ngIf=\"currentTab === 'LIST'\">\n <div class=\"mb-title\">My Bookings</div>\n\n <div class=\"mb-tabs\">\n <button type=\"button\" class=\"mb-tab\" [class.active]=\"profTab === 'upcoming'\" (click)=\"setProfTab('upcoming')\">Upcoming</button>\n <button type=\"button\" class=\"mb-tab\" [class.active]=\"profTab === 'past'\" (click)=\"setProfTab('past')\">Past</button>\n </div>\n\n <div class=\"mb-loading\" *ngIf=\"loading\">Loading your bookings\u2026</div>\n\n <div class=\"mb-rows\" *ngIf=\"!loading && !isEmpty\">\n <button type=\"button\" class=\"mb-row\" *ngFor=\"let b of rows\" (click)=\"viewBookingDetail(b)\">\n <div class=\"mb-row-stripe\" [ngClass]=\"b.mode === 'HOME_VISIT' ? 'stripe-home' : b.mode === 'VIDEO_CALL' ? 'stripe-video' : 'stripe-store'\"></div>\n <div class=\"mb-row-info\">\n <div class=\"mb-row-top\">\n <div class=\"mb-row-title\">{{title(b)}}</div>\n </div>\n <div class=\"mb-row-when\">{{when(b)}}</div>\n <div class=\"mb-row-detail\">{{detail(b)}}</div>\n </div>\n <div class=\"mb-row-end\">\n <span class=\"mb-status\" [ngClass]=\"statusClass(b.status)\">{{statusLabel(b.status)}}</span>\n </div>\n </button>\n </div>\n\n <div class=\"mb-empty\" *ngIf=\"isEmpty\">\n <mat-icon class=\"mb-empty-icon\">event_busy</mat-icon>\n <div class=\"mb-empty-title\">No {{profTab}} bookings yet.</div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"currentTab === 'DETAIL' && selected\">\n <button type=\"button\" class=\"mb-back\" (click)=\"backToList()\">\n <mat-icon>arrow_back</mat-icon> Back to My Bookings\n </button>\n\n <div class=\"mb-detail-card\">\n <div class=\"mb-detail-header\">\n <div class=\"mb-detail-title-row\">\n <div class=\"mb-detail-title\">{{title(selected)}}</div>\n <span class=\"mb-status\" [ngClass]=\"statusClass(selected.status)\">{{statusLabel(selected.status)}}</span>\n </div>\n <div class=\"mb-detail-when\">{{when(selected)}}</div>\n </div>\n\n <div class=\"mb-detail-rows\">\n <div class=\"mb-detail-row\" *ngIf=\"selected.services?.length\">\n <div class=\"mb-detail-k\">Services</div>\n <div class=\"mb-detail-v\">{{serviceNames(selected)}}</div>\n </div>\n <div class=\"mb-detail-row\" *ngIf=\"selected.productLines?.length\">\n <div class=\"mb-detail-k\">Products</div>\n <div class=\"mb-detail-v\">{{productNames(selected)}}</div>\n </div>\n <div class=\"mb-detail-row\" *ngIf=\"selected.customerDetail\">\n <div class=\"mb-detail-k\">Contact</div>\n <div class=\"mb-detail-v\">{{selected.customerDetail?.name}} \u00B7 {{selected.customerDetail?.phoneNumber}} \u00B7 {{selected.customerDetail?.email}}</div>\n </div>\n <div class=\"mb-detail-row\" *ngIf=\"selected.mode === 'HOME_VISIT' && selected.addressDetails\">\n <div class=\"mb-detail-k\">Address</div>\n <div class=\"mb-detail-v\">{{selected.addressDetails?.addressLine1}}, {{selected.addressDetails?.city}}, {{selected.addressDetails?.state}} {{selected.addressDetails?.zipCode}}</div>\n </div>\n <div class=\"mb-detail-row\" *ngIf=\"servicePriceTotal(selected) > 0\">\n <div class=\"mb-detail-k\">Service price</div>\n <div class=\"mb-detail-v\">\u20B9{{servicePriceTotal(selected)}}</div>\n </div>\n <div class=\"mb-detail-row\" *ngIf=\"selected.homeVisitCharge\">\n <div class=\"mb-detail-k\">Home visit charge</div>\n <div class=\"mb-detail-v\">\u20B9{{selected.homeVisitCharge}}</div>\n </div>\n <div class=\"mb-detail-row\">\n <div class=\"mb-detail-k\">Total</div>\n <div class=\"mb-detail-v\">\u20B9{{totalDue(selected)}}</div>\n </div>\n <div class=\"mb-detail-row\">\n <div class=\"mb-detail-k\">Paid</div>\n <div class=\"mb-detail-v\">{{paidLabel(selected)}}</div>\n </div>\n <div class=\"mb-detail-row\" *ngIf=\"pendingAmount(selected) > 0\">\n <div class=\"mb-detail-k\">Pending at appointment</div>\n <div class=\"mb-detail-v\">\u20B9{{pendingAmount(selected)}}</div>\n </div>\n </div>\n\n <div class=\"mb-video-link\" *ngIf=\"selected.mode === 'VIDEO_CALL' && selected.videoCallLink && selected.status !== 'CANCELLED'\">\n <mat-icon>videocam</mat-icon>\n <a [href]=\"selected.videoCallLink\" target=\"_blank\">{{selected.videoCallLink}}</a>\n </div>\n\n <div class=\"mb-policy\" *ngIf=\"canRescheduleSelected\">\n <div class=\"mb-policy-title\">Reschedule policy</div>\n <div class=\"mb-policy-text\">You can reschedule this booking up to {{rescheduleCutoffHours}} hour{{rescheduleCutoffHours === 1 ? '' : 's'}} before the appointment time.</div>\n </div>\n <div class=\"mb-policy\" *ngIf=\"canCancelSelected && cancellationPolicy\">\n <div class=\"mb-policy-title\">{{cancellationPolicy.title}}</div>\n <div class=\"mb-policy-text\">{{cancellationPolicy.policyDetails}}</div>\n </div>\n\n <div class=\"mb-actions-row\" *ngIf=\"selected.status === 'BOOKED' || canCancelSelected\">\n <button\n type=\"button\"\n class=\"mb-reschedule-btn\"\n *ngIf=\"selected.status === 'BOOKED'\"\n [disabled]=\"!canRescheduleSelected\"\n [title]=\"!canRescheduleSelected ? selected.rescheduleBlockedReason : ''\"\n [style.borderColor]=\"styles?.background?.accentColor\"\n [style.color]=\"styles?.background?.accentColor\"\n (click)=\"openReschedulePanel()\"\n >Reschedule booking</button>\n <button\n type=\"button\"\n class=\"mb-cancel-btn\"\n *ngIf=\"canCancelSelected\"\n [disabled]=\"cancelling\"\n [style.borderColor]=\"styles?.background?.accentColor\"\n [style.color]=\"styles?.background?.accentColor\"\n (click)=\"cancelBooking()\"\n >\n {{cancelling ? 'Cancelling\u2026' : 'Cancel booking'}}\n </button>\n </div>\n\n <div class=\"mb-cancelled-note\" *ngIf=\"selected.status === 'CANCELLED'\">This booking has been cancelled.</div>\n </div>\n </ng-container>\n\n <div class=\"mb-resch-backdrop\" *ngIf=\"reschedulePanelOpen\" (click)=\"closeReschedulePanel()\">\n <div class=\"mb-resch-panel\" (click)=\"$event.stopPropagation()\">\n <div class=\"mb-resch-header\">\n <div class=\"mb-resch-title\">Choose a new date & time</div>\n <button type=\"button\" class=\"mb-resch-close\" (click)=\"closeReschedulePanel()\">×</button>\n </div>\n\n <div class=\"mb-resch-body\">\n <div class=\"mb-resch-daystrip-row\">\n <button type=\"button\" class=\"mb-resch-nav\" (click)=\"scrollReschDays(-1)\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 18l-6-6 6-6\"></path></svg>\n </button>\n <div class=\"mb-resch-daystrip\" #reschDayStrip>\n <button\n type=\"button\"\n class=\"mb-resch-day\"\n *ngFor=\"let day of reschDays\"\n [class.active]=\"day.iso === reschSelectedIso\"\n [style.background]=\"day.iso === reschSelectedIso ? styles?.background?.accentColor : null\"\n [style.borderColor]=\"day.iso === reschSelectedIso ? styles?.background?.accentColor : null\"\n (click)=\"selectReschDay(day)\"\n >\n <span class=\"mb-resch-day-dow\" [style.color]=\"day.iso === reschSelectedIso ? contrastColor : null\">{{day.dow}}</span>\n <span class=\"mb-resch-day-num\" [style.color]=\"day.iso === reschSelectedIso ? contrastColor : null\">{{day.num}}</span>\n </button>\n </div>\n <button type=\"button\" class=\"mb-resch-nav\" (click)=\"scrollReschDays(1)\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 18l6-6-6-6\"></path></svg>\n </button>\n </div>\n\n <div class=\"mb-resch-slots-loading\" *ngIf=\"reschLoadingSlots\">Loading available times\u2026</div>\n <div class=\"mb-resch-slots-empty\" *ngIf=\"!reschLoadingSlots && reschNoSlots\">No slots available on this date. Try another date.</div>\n <div class=\"mb-resch-slots\" *ngIf=\"!reschLoadingSlots && reschSlots.length\">\n <button\n type=\"button\"\n class=\"mb-resch-slot\"\n *ngFor=\"let slot of reschSlots\"\n [class.active]=\"slot === reschSelectedTime\"\n [style.background]=\"slot === reschSelectedTime ? styles?.background?.accentColor : null\"\n [style.borderColor]=\"slot === reschSelectedTime ? styles?.background?.accentColor : null\"\n [style.color]=\"slot === reschSelectedTime ? contrastColor : null\"\n (click)=\"selectReschTime(slot)\"\n >{{slot}}</button>\n </div>\n\n <div class=\"mb-resch-error\" *ngIf=\"reschError\">{{reschError}}</div>\n </div>\n\n <div class=\"mb-resch-footer\">\n <button type=\"button\" class=\"mb-resch-cancel\" (click)=\"closeReschedulePanel()\">Cancel</button>\n <button\n type=\"button\"\n class=\"mb-resch-confirm\"\n [disabled]=\"reschInvalid\"\n [style.background]=\"reschInvalid ? null : styles?.background?.accentColor\"\n [style.color]=\"reschInvalid ? null : contrastColor\"\n (click)=\"confirmReschedule()\"\n >\n {{reschConfirming ? 'Confirming\u2026' : 'Confirm new slot'}}\n </button>\n </div>\n </div>\n </div>\n</div>\n", styles: [".mb-root{display:flex;flex-direction:column;gap:16px;padding:4px 0 24px}.mb-title{font-size:20px;font-weight:600;color:#1b2436}.mb-tabs{display:flex;background:#f5f2ee;border-radius:8px;padding:4px;gap:4px;width:fit-content}.mb-tab{border:none;background:transparent;border-radius:6px;padding:8px 18px;font-size:13.5px;font-weight:500;color:#8a94a3;cursor:pointer}.mb-tab.active{background:#fff;color:#1b2436;font-weight:600;box-shadow:0 1px 3px #00000012}.mb-loading{font-size:13.5px;color:#8a94a3;padding:20px 0}.mb-rows{display:flex;flex-direction:column;gap:12px}.mb-row{border:1px solid #EEE9E3;border-radius:10px;padding:16px 18px;display:flex;align-items:flex-start;gap:14px;background:#fff;cursor:pointer;text-align:left;width:100%}.mb-row-stripe{width:3px;align-self:stretch;border-radius:999px;flex:none}.stripe-home{background:#16233a}.stripe-video{background:#7c3a11}.stripe-store{background:#8a94a3}.mb-row-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.mb-row-title{font-size:14.5px;font-weight:600;color:#1b2436}.mb-row-when{font-size:12.5px;color:#6b7688}.mb-row-detail{font-size:12px;color:#8a94a3}.mb-row-end{flex:none}.mb-status{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;border-radius:999px;padding:4px 9px;white-space:nowrap}.status-confirmed{background:#e8f4ee;color:#1e7a4b}.status-completed{background:#f2eee9;color:#8a7c6c}.status-cancelled{background:#fbedec;color:#b4432e}.status-pending{background:#fdf3e3;color:#b36b00}.mb-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:50px 20px;text-align:center}.mb-empty-icon{font-size:40px!important;height:40px!important;width:40px!important;color:#c9b7a2!important}.mb-empty-title{font-size:14.5px;color:#8a94a3}.mb-back{display:flex;align-items:center;gap:6px;border:none;background:none;padding:0;cursor:pointer;font-size:12.5px;color:#7c3a11;margin-bottom:6px;width:fit-content}.mb-back mat-icon{font-size:16px!important;height:16px!important;width:16px!important}.mb-detail-card{border:1px solid #EEE9E3;border-radius:12px;padding:20px 22px;display:flex;flex-direction:column;gap:16px;background:#fff}.mb-detail-header{display:flex;flex-direction:column;gap:6px;padding-bottom:14px;border-bottom:1px solid #F0ECE7}.mb-detail-title-row{display:flex;align-items:center;gap:10px}.mb-detail-title{font-size:17px;font-weight:600;color:#1b2436}.mb-detail-when{font-size:13px;color:#6b7688}.mb-detail-rows{display:flex;flex-direction:column;gap:12px}.mb-detail-row{display:flex;justify-content:space-between;gap:16px;font-size:13px}.mb-detail-k{color:#8a94a3;flex:none}.mb-detail-v{color:#1b2436;font-weight:500;text-align:right}.mb-video-link{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#f2f9f5;border-radius:8px;font-size:13px;color:#2c6a4b}.mb-video-link mat-icon{color:#1e7a4b!important;flex:none}.mb-policy{background:#fbfaf8;border:1px solid #EDE8E2;border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}.mb-policy-title{font-size:12px;font-weight:600;color:#a08b72;text-transform:uppercase;letter-spacing:.06em}.mb-policy-text{font-size:12.5px;line-height:1.6;color:#5f6b7c}.mb-cancel-btn{height:46px;border:1.5px solid;border-radius:8px;background:#fff;font-size:13.5px;font-weight:600;cursor:pointer}.mb-cancel-btn:disabled{opacity:.6;cursor:not-allowed}.mb-cancelled-note{font-size:13px;color:#b4432e;font-weight:600}.mb-actions-row{display:flex;gap:12px}.mb-actions-row .mb-reschedule-btn,.mb-actions-row .mb-cancel-btn{flex:1}.mb-reschedule-btn{height:46px;border:1.5px solid;border-radius:8px;background:#fff;font-size:13.5px;font-weight:600;cursor:pointer}.mb-reschedule-btn:disabled{opacity:.5;cursor:not-allowed}.mb-resch-backdrop{position:fixed;inset:0;background:#1b243673;display:flex;align-items:center;justify-content:center;padding:16px;z-index:1000}.mb-resch-panel{width:100%;max-width:440px;max-height:85vh;border-radius:14px;background:#fff;box-shadow:0 20px 50px #14141e40;display:flex;flex-direction:column;overflow:hidden}.mb-resch-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid #F0ECE7;flex:none}.mb-resch-body{padding:18px 20px;overflow-y:auto}.mb-resch-footer{display:flex;gap:10px;padding:14px 20px;border-top:1px solid #F0ECE7;flex:none}.mb-resch-footer .mb-resch-cancel,.mb-resch-footer .mb-resch-confirm{flex:1}.mb-resch-cancel{height:46px;border:1.5px solid #E2E2E9;border-radius:8px;background:#fff;color:#5f6b7c;font-size:13.5px;font-weight:600;cursor:pointer}.mb-resch-title{font-size:14px;font-weight:600;color:#1b2436}.mb-resch-close{border:none;background:none;font-size:18px;color:#8a94a3;cursor:pointer;line-height:1}.mb-resch-daystrip-row{display:flex;align-items:center;gap:4px;margin-bottom:14px}.mb-resch-daystrip{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scroll-behavior:smooth}.mb-resch-daystrip::-webkit-scrollbar{height:5px}.mb-resch-daystrip::-webkit-scrollbar-thumb{background:#eee9e3;border-radius:999px}.mb-resch-nav{flex:none;width:26px!important;height:26px;border:1px solid #EEE9E3;border-radius:999px;background:#fff;color:#8a94a3;cursor:pointer;display:flex;align-items:center;justify-content:center}.mb-resch-nav:hover{border-color:#7c3a11;color:#7c3a11}.mb-resch-day{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;width:50px!important;padding:8px 0;border:1px solid #EEE9E3;border-radius:10px;background:#fff;cursor:pointer}.mb-resch-day:hover{border-color:#7c3a11}.mb-resch-day-dow{font-size:10.5px;color:#8a94a3;text-transform:uppercase}.mb-resch-day-num{font-size:13.5px;font-weight:600;color:#1b2436}.mb-resch-slots-loading,.mb-resch-slots-empty{font-size:12.5px;color:#8a94a3;margin-bottom:14px}.mb-resch-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.mb-resch-slot{padding:9px 6px;border:1px solid #EEE9E3;border-radius:8px;background:#fff;font-size:12.5px!important;color:#1b2436;cursor:pointer}.mb-resch-error{margin-top:14px;font-size:12.5px;color:#b4432e}.mb-resch-confirm{height:46px;border:none;border-radius:8px;background:#94a3b8;color:#fff;font-size:13.5px;font-weight:600;cursor:pointer}.mb-resch-confirm:disabled{opacity:.5;cursor:not-allowed}\n"] }]
|
|
22726
|
+
}], ctorParameters: () => [{ type: RestService }, { type: StorageServiceService }, { type: i6$1.MessageService }], propDecorators: { data: [{
|
|
22727
|
+
type: Input
|
|
22728
|
+
}], reschDayStripRef: [{
|
|
22729
|
+
type: ViewChild,
|
|
22730
|
+
args: ['reschDayStrip']
|
|
22731
|
+
}] } });
|
|
22591
22732
|
|
|
22592
22733
|
class PassbookTransactionsComponent {
|
|
22593
22734
|
constructor(storageService, restService) {
|
|
@@ -23185,7 +23326,7 @@ class UserProfileComponent extends BaseSection {
|
|
|
23185
23326
|
this.getAllSchemes();
|
|
23186
23327
|
}
|
|
23187
23328
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserProfileComponent, deps: [{ token: i2$2.Router }, { token: EventsService }, { token: RestService }, { token: StorageServiceService }, { token: CartService }, { token: i3$2.MatDialog }, { token: i8$1.MatBottomSheet }, { token: i2$1.CookieService }, { token: i6$1.MessageService }, { token: i1.DomSanitizer }, { token: i2$2.ActivatedRoute }, { token: LOCAL_STORAGE }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
23188
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }, { propertyName: "logoutDialogTemplate", first: true, predicate: ["logoutDialog"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [spacingHorizontal]=\"styles?.layout\" [ngStyle]=\"{'max-height': '100vh', 'z-index': isMobile ? '100000000' : ''}\"\r\n [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"p-4 profile-box\" style=\"width: 25%; border-radius: 20px; height: fit-content\"\r\n [style.order]=\"styles?.swap ? '1' : '0'\">\r\n\r\n <!-- Profile Header Section -->\r\n <div class=\"d-flex align-items-center profile-header\"\r\n style=\"gap: 15px; height: 80px; margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 15px; backdrop-filter: blur(10px);\">\r\n <div class=\"profile-image-wrapper\" style=\"position: relative;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100 profile-icon\"\r\n style=\"border: 3px solid #e3f2fd; transition: all 0.3s ease;\">\r\n <div class=\"online-indicator\"\r\n style=\"position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4caf50; border: 2px solid white; border-radius: 50%;\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"profile-details flex-grow-1\">\r\n <h4 class=\"font-weight-bold mb-2\" style=\"color: #2c3e50; font-size: 1.1rem; margin-bottom: 8px;\">\r\n {{getUserDetails?.contact?.name}}</h4>\r\n\r\n <div class=\"contact-info\" style=\"display: flex; flex-direction: column; gap: 6px;\">\r\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n *ngIf=\"getUserDetails?.contact?.mobile?.length\"\r\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">stay_primary_portrait</mat-icon>\r\n <span>{{getUserDetails?.contact?.mobile}}</span>\r\n </h6>\r\n\r\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n *ngIf=\"getUserDetails?.contact?.email?.length\"\r\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">mail_outline</mat-icon>\r\n <span class=\"w-100 text-overflow\">{{getUserDetails?.contact?.email}}</span>\r\n </h6>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Navigation Tabs Section -->\r\n <div class=\"tabs-container\" style=\"margin-bottom: 20px;\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center tab-item\"\r\n style=\"gap: 12px; cursor: pointer; padding: 16px 12px; margin: 2px 0; border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden;\"\r\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '1px solid rgba(0,0,0,0.06)' : ''\"\r\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\"\r\n [style.backgroundColor]=\"tab.status ? styles?.background?.color : 'transparent'\"\r\n [style.borderColor]=\"tab.status ? styles?.background?.accentColor : 'transparent'\">\r\n <div class=\"tab-icon-wrapper\"\r\n style=\"width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\">\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n style=\"height: 20px; width: 20px; object-fit: contain; transition: transform 0.3s ease;\">\r\n </div>\r\n\r\n <div class=\"tab-label font-weight-normal\" style=\"font-size: 0.9rem; transition: all 0.3s ease;\">\r\n {{tab.value}}</div>\r\n\r\n <!-- Hover effect background -->\r\n <div class=\"tab-hover-bg\"\r\n style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,123,255,0.05) 0%, rgba(0,123,255,0.02) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1;\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- Action Buttons Section -->\r\n <div class=\"d-flex action-buttons\"\r\n style=\"gap: 10px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.06);\">\r\n <button class=\"edit-btn flex-grow-1\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\"\r\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; background: transparent; border: 2px solid; transition: all 0.3s ease; position: relative; overflow: hidden;\">\r\n Edit Profile\r\n </button>\r\n\r\n <button class=\"logout-btn flex-grow-1\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\"\r\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; border: none; color: white; transition: all 0.3s ease;\">\r\n Logout\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"orders-sec\" [style.order]=\"styles?.swap ? '0' : '1'\">\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Details'\">\r\n <ng-container *ngTemplateOutlet=\"SchemeDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Transactions'\">\r\n <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n <simpo-list-home-appointment></simpo-list-home-appointment>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Bookings'\">\r\n <simpo-my-bookings></simpo-my-bookings>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Referrals'\">\r\n <ng-container *ngTemplateOutlet=\"Referrals\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Rewards'\">\r\n <ng-container *ngTemplateOutlet=\"Rewards\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <div class=\"w-100 position-relative mobile-height\" style=\"height: 80vh;\">\r\n <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\"\r\n *ngIf=\"selectedSidePanelTab != 'Scheme_Details'\">\r\n <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\"\r\n (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n </div>\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"''\">\r\n <section class=\"top-sec\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\"\r\n style=\"width: 50px; height: 50px;\">\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\">\r\n <mat-icon>stay_primary_portrait</mat-icon>\r\n <span>{{getUserDetails?.contact?.mobile}}</span>\r\n </h6>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\"\r\n *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon>\r\n <span>{{getUserDetails?.contact?.email}}</span>\r\n </h6>\r\n </div>\r\n </section>\r\n <section class=\"list-sec\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\"\r\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\"\r\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n [style.color]=\"styles?.background?.accentColor\">\r\n <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">\r\n {{tab.value}}</div>\r\n </div>\r\n\r\n </ng-container>\r\n </section>\r\n <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\r\n <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\">Logout</button>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Transactions'\">\r\n <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n <simpo-list-home-appointment></simpo-list-home-appointment>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Bookings'\">\r\n <simpo-my-bookings></simpo-my-bookings>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Referrals'\">\r\n <ng-container *ngTemplateOutlet=\"Referrals\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Rewards'\">\r\n <ng-container *ngTemplateOutlet=\"Rewards\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\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\r\n<ng-template #Referrals>\r\n <iframe [src]=\"getMyReferralsUrl\" frameborder=\"0\" width=\"100%\" height=\"100%\"></iframe>\r\n</ng-template>\r\n<ng-template #Rewards>\r\n <iframe [src]=\"getRewardsUrl\" frameborder=\"0\" width=\"100%\" height=\"100%\"></iframe>\r\n</ng-template>\r\n<ng-template #OrderSection>\r\n <h3 class=\"onlyDesktop mb-3\">My Orders</h3>\r\n <!-- <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n <ng-container *ngFor=\"let tab of tabs\">\r\n <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">\r\n {{tab.value}}</div>\r\n </ng-container>\r\n </div> -->\r\n <div class=\"order-list\">\r\n <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #showEmptyScreen>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\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]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <div class=\"cart-text \">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <div class=\"heading-medium d-flex justify-content-center content-side\"\r\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n <simpo-text-editor [(value)]=\"text.value\"\r\n [editable]=\"edit || false\" [isRTE]=\"text.isRTE\"></simpo-text-editor>\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\"\r\n (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n <div class=\"d-flex justify-content-between mb-2\">\r\n <h3 class=\"title-text\">My Address</h3>\r\n <button class=\"address-btn\" (click)=\"addNewAddress()\"\r\n [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n <div class=\"address-list\">\r\n <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\r\n <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n <div class=\"card border-0 mb-2 cursor-pointer order-card \" [style.width]=\"getProductWidth\">\r\n <div class=\"card-body p-3\">\r\n <!-- Header Section -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n <div class=\"address-info d-flex align-items-center justify-content-between w-100\">\r\n <h4 class=\"mb-0 fw-semibold\">{{address.receiverName}}</h4>\r\n <div class=\"icon-grp d-flex\">\r\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n (click)=\"editAddress(idx)\">edit</mat-icon>\r\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"address-content mb-3\">\r\n <div class=\"address-line mb-2\">\r\n <span class=\"text-muted small d-block\">Address</span>\r\n <span class=\"address-text\">{{address.addressLine1}}</span>\r\n </div>\r\n <div class=\"phone-info\">\r\n <span class=\"text-muted small d-block\">Phone</span>\r\n <span class=\"phone-number fw-bold\">{{address.receiverPhone}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-template #showEmptyAddress>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\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=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\r\n <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery\r\n </div>\r\n <!-- </ng-container> -->\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n <h3 class=\"onlyDesktop\">My Accounts</h3>\r\n</ng-template>\r\n<ng-template #logoutDialog>\r\n <div class=\"logout-dialog-card\">\r\n <!-- Decorative blobs -->\r\n <div class=\"logout-blob logout-blob-1\"></div>\r\n <div class=\"logout-blob logout-blob-2\"></div>\r\n\r\n <!-- Close Button -->\r\n <button class=\"logout-close-btn\" (click)=\"closeDialog()\" aria-label=\"Close\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n\r\n <!-- Wave icon -->\r\n <div class=\"logout-icon-ring\">\r\n <span class=\"logout-wave\">\uD83D\uDC4B</span>\r\n </div>\r\n\r\n <!-- Copy -->\r\n <h2 class=\"logout-title\">See you soon, {{getUserDetails?.contact?.name?.split(' ')?.[0] || 'Friend'}}!</h2>\r\n <p class=\"logout-subtitle\">\r\n We'll keep everything safe while you're away.<br>\r\n Come back anytime \u2014 we'll be right here. \uD83D\uDE0A\r\n </p>\r\n\r\n <!-- Actions -->\r\n <div class=\"logout-actions\">\r\n <button class=\"logout-action-btn btn-stay\" (click)=\"closeDialog()\">\r\n <mat-icon class=\"logout-btn-icon\">arrow_back</mat-icon>\r\n Stay\r\n </button>\r\n <button class=\"logout-action-btn btn-confirm\"\r\n [style.background]=\"styles?.background?.accentColor\"\r\n (click)=\"closeDialog(); _doLogout()\">\r\n <mat-icon class=\"logout-btn-icon\">logout</mat-icon>\r\n Yes, Logout\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n <ng-container *ngTemplateOutlet=\"logoutDialog\"></ng-container>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n <div (click)=\"goToOrderDetails(order)\" class=\"card border-0 mb-2 cursor-pointer order-card\">\r\n <div class=\"card-body p-3\" [style.--background-color]=\"styles?.background?.color\">\r\n <!-- Header Section -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n <div class=\"order-number\">\r\n <h4 class=\"mb-0 fw-semibold\">{{\"Order\" + \" \" + order.orderNum}}</h4>\r\n </div>\r\n <div class=\"arrow-icon\">\r\n <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"ordered-item row mb-2\">\r\n <ng-container *ngFor=\"let item of getOrderedItems(order)\">\r\n <div class=\"item-card col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img [src]=\"item?.imgUrl\" alt=\"Product Image\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"item-img w-50\">\r\n <div class=\"cart-item-name\">{{item?.itemName}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <!-- Middle Section -->\r\n <div class=\"order-details\">\r\n <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-1\">\r\n <span class=\"text-muted small mb-3 mb-sm-0\">\r\n {{order.createdTimeStamp | date: 'dd MMMM yyyy'}}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"amount-section\">\r\n <span class=\"h5 mb-0 text-success fw-bold\">\r\n <span [innerHTML]=\"currency\"></span>\r\n <!-- {{(order.billDetails.discountAmount ?\r\n (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +\r\n order?.billDetails?.totalTaxAfterDiscount) :\r\n order.billDetails.totalGrossValue) | number:'1.0-2'}} -->\r\n {{getTotalAmtPaid(order) | number:'1.0-2'}}\r\n </span>\r\n </div>\r\n <div class=\"status-section\">\r\n <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">\r\n {{order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | titlecase}}\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mt-1\" *ngIf=\"order.rewardUsed === 'REWARD_POINTS'\">\r\n <div class=\"fs-14 text-secondary\">\r\n Amount Paid -\r\n <span class=\"text-success fw-bold\">\u20B9 {{ getTotalAmtPaid(order) === order.pointsConvertedINR ? '0' :\r\n (getTotalAmtPaid(order) - order.pointsConvertedINR) }}</span>\r\n </div>\r\n <div class=\"fs-14 text-secondary\">\r\n Rewarded Amount - <span class=\"text-success fw-bold\">\u20B9 {{order.pointsConvertedINR}}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mt-1\" *ngIf=\"order.rewardUsed === 'VOUCHER'\">\r\n <div class=\"fs-14 text-secondary\">\r\n Amount Paid -\r\n <span class=\"text-success fw-bold\">\u20B9 {{ getTotalAmtPaid(order) === order.voucherValue ? '0' :\r\n (getTotalAmtPaid(order) - order.voucherValue) }}</span>\r\n </div>\r\n <div class=\"fs-14 text-secondary\">\r\n Rewarded Amount - <span class=\"text-success fw-bold\">\u20B9 {{order.voucherValue}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #WishlistDetails>\r\n <h3 class=\"onlyDesktop\">My Wishlist</h3>\r\n <div class=\"wishlist-list\" *ngIf=\"wishlistData?.length; else showEmptyWishlistScreen\">\r\n <div class=\"d-flex flex-wrap\" style=\"gap: 10px;\">\r\n <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n <div class=\"address-card mb-2\">\r\n <div class=\"card-body p-4\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-auto\">\r\n <div class=\"product-image-wrapper\">\r\n <img loading=\"lazy\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"product-img rounded\" [src]=\"item.imgUrl\" alt=\"Product Image\">\r\n </div>\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"product-details\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div\r\n class=\"col-auto text-end d-flex justify-content-between align-items-center w-100\">\r\n <h6 class=\"product-name mb-2 fw-semibold text-dark\">\r\n {{item.itemName}}\r\n </h6>\r\n <div class=\"delete-action\" *ngIf=\"!isMobile\">\r\n <button class=\"btn btn-sm delete-btn\" (click)=\"deleteFromWhislist(item)\"\r\n title=\"Remove from wishlist\">\r\n <mat-icon class=\"small-icon\">delete</mat-icon>\r\n </button>\r\n </div>\r\n <div class=\"delete-action mt-2\" *ngIf=\"isMobile\">\r\n <button class=\"btn btn-sm w-100\" (click)=\"deleteFromWhislist(item)\">\r\n <mat-icon class=\"small-icon me-1\">delete</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"product-price mb-3\">\r\n <span class=\"h5 text-success fw-bold mb-0\">\r\n <span [innerHTML]='currency'></span>{{item.discountedPrice}}\r\n </span>\r\n <span class=\"text-muted small ms-2\" *ngIf=\"item.quantity\">\r\n ({{item.quantity}} items)\r\n </span>\r\n </div>\r\n <div class=\"action-buttons d-flex gap-2\">\r\n <div class=\"quantity-controls d-flex align-items-center w-50 justify-content-center\"\r\n *ngIf=\"item.quantity\">\r\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n (click)=\"addToFav(item, 'SUBSTRACT')\">\r\n -\r\n </button>\r\n <span class=\"quantity-display px-3 py-1 bg-light rounded mx-1\">\r\n {{item.quantity}}\r\n </span>\r\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n (click)=\"addToFav(item, 'ADD')\"> +\r\n </button>\r\n </div>\r\n <button class=\"btn btn-sm w-50\" *ngIf=\"!item.quantity\"\r\n (click)=\"addToFav(item, 'ADD')\">\r\n + Add Quantity\r\n </button>\r\n <button class=\"btn btn-sm w-50\" (click)=\"moveToCart(item)\">\r\n Move to Cart\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n <ng-template #showEmptyWishlistScreen>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\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]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container>\r\n <div class=\"heading-medium d-flex justify-content-center\">\r\n Your Wishlist is Empty</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #SchemeDetails>\r\n <div class=\"header mb-3 f-18 fw-600\">Current Scheme Enrollments - 4</div>\r\n <div class=\"row gap-2\">\r\n <ng-container *ngFor=\"let scheme of [1,1,1,1]\">\r\n <div class=\"cards d-flex flex-column w-32 mb-2 p-0 \">\r\n <div class=\"card-header row gap-2\">\r\n <div class=\"card-head-left col-7\">\r\n <div class=\"scheme-type fs-15 fw-600\">Group Investment Scheme</div>\r\n <div class=\"scheme-id fw-600\">GIS6K_000231004</div>\r\n </div>\r\n <div class=\"card-head-right col-4 text-center align-content-center\">\r\n <div class=\"scheme-amount fw-600\">\u20B96,000/M</div>\r\n </div>\r\n </div>\r\n <div class=\"card-body d-flex p-0 mb-3\">\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/425719c1752566628577star.png\" alt=\"\"\r\n class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">\u20B913,800</div>\r\n <div class=\"card-sub-text text-center\">Total Acheived</div>\r\n </div>\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/229997c1752567131192brand_7959220.png\"\r\n alt=\"\" class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">\u20B91,000</div>\r\n <div class=\"card-sub-text text-center\">Rewards</div>\r\n </div>\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/760761c1752567279970calendar (1).png\"\r\n alt=\"\" class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">8</div>\r\n <div class=\"card-sub-text text-center\">Due Months</div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer row\">\r\n <div class=\"col-6 d-flex gap-2 p-0\">\r\n <span class=\"footer-text text-nowrap\">Start On :</span><span class=\"date-text text-nowrap\">30\r\n may 2025</span>\r\n </div>\r\n <div class=\"col-6 d-flex gap-2 p-0\">\r\n <span class=\"footer-text text-nowrap\">Maturity On :</span><span class=\"date-text text-nowrap\">25\r\n may 2026</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n<ng-template #SchemePassbook>\r\n <div class=\"w-100 h-100 overflow-scroll passbook_container\">\r\n <div class=\"header d-flex flex-column\">\r\n <div class=\"d-flex align-items-center justify-content-end mb-3\" *ngIf=\"storeListing.length >= 2\"><select\r\n class=\"store-listing\" (change)=\"changeStore($event)\">\r\n <option value=\"\">Select Store</option>\r\n <option [value]=\"store.id\" *ngFor=\"let store of storeListing\">{{store.storeName}}</option>\r\n </select></div>\r\n <div class=\"scheme-overview d-flex flex-column\">\r\n <div class=\"d-flex gap-2\">\r\n <div class=\"available-savings\">\r\n <div class=\"d-flex align-items-center gap-1 w-100 justify-content-between\">\r\n <h3>Available Savings</h3>\r\n <span class=\"amount_logo\">\uD83D\uDCB0</span>\r\n </div>\r\n\r\n <div class=\"amount\">{{totalSavings ? totalSavings :\r\n '0'}}</div>\r\n </div>\r\n <div class=\"active-schemes\">\r\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n <h3>Active Passbooks</h3>\r\n <div class=\"auto-pay-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\r\n </div>\r\n </div>\r\n <div class=\"scheme-count\">{{totalSchemes?.length ?\r\n totalSchemes.length : '0'}}</div>\r\n <div class=\"subtitle\">On Track</div>\r\n </div>\r\n <div class=\"active-schemes\" *ngIf=\"totalAccumulatedGold > 0\">\r\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n <h3>Accumulated Gold </h3>\r\n <div class=\"auto-pay-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/153448c1756808418216accumulated_icon.png\">\r\n </div>\r\n </div>\r\n <div class=\"scheme-count\">{{totalAccumulatedGold}} gms</div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"overAllDues?.length\">\r\n <div class=\"section d-flex-flex-column gap-2\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Due Payments</h2>\r\n </div>\r\n <div class=\"payment-list d-flex flex-column gap-2\">\r\n <ng-container *ngIf=\"overAllDues?.length; else showEmptyPayment\">\r\n <div class=\"payment-item overdue\" *ngFor=\"let payment of overAllDues\">\r\n <div class=\"payment-info\">\r\n <div class=\"payment-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/403142c1753435378127Background.svg\">\r\n <!-- <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\"\r\n *ngIf=\"!payment.overdueStatus && payment.paymentStatus === 'PAID'\"> -->\r\n </div>\r\n <div class=\"payment-details\">\r\n <h4>{{payment.schemeName}} - {{payment.emiMonthCount}}rd EMI</h4>\r\n <span>Date {{payment.dueDate ? (payment.dueDate | date:'dd-MM-yyyy') :\r\n 'N/A'}}\r\n <!-- <span *ngIf=\"payment.overdueStatus\">| Due by: {{payment.daysOverdue\r\n ? payment.daysOverdue : 0}}</span> --></span>\r\n </div>\r\n </div>\r\n <div class=\"payment-amount\">\r\n <div class=\"amount-value\">\u20B9{{payment.dueAmount ? payment.dueAmount :\r\n '0'}}\r\n </div>\r\n <div class=\"payment-status overdue-status cursor-pointer\"\r\n (click)=\"payDue(payment)\">\r\n <ng-container *ngIf=\"!payDueLoader\">Pay Now</ng-container>\r\n <ng-container *ngIf=\"payDueLoader\">Loading...</ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #showEmptyPayment>\r\n <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n <span>No Due Payments</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"section mt-3\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Your Active Passbooks</h2>\r\n </div>\r\n\r\n <div class=\"schemes-grid\">\r\n <ng-container *ngIf=\"totalSchemes && totalSchemes.length > 0; else showActiveScheme\">\r\n <div class=\"scheme-card d-flex flex-column gap-2 cursor-pointer\"\r\n *ngFor=\"let scheme of totalSchemes; let i = index\" (click)=\"viewSchemeDetails(scheme)\">\r\n <div class=\"scheme-header\">\r\n <div>\r\n <div class=\"scheme-title\">{{ scheme?.schemeName || 'N/A' }}</div>\r\n <div class=\"scheme-amount\">\u20B9{{ scheme?.installmentAmount || '0' }}/Monthly</div>\r\n </div>\r\n <div class=\"scheme-date\">\r\n <span>Enrolled: {{ scheme?.createdTimestamp ? (scheme?.createdTimestamp |\r\n date:'dd-MM-yyyy') :\r\n 'N/A' }}</span>\r\n <!-- <span>Maturity: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n 'N/A' }}</span> -->\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-status d-flex justify-content-center align-items-center\"\r\n [ngClass]=\"scheme?.passBookStatus === 'REDEEM_REQUESTED' ? 'redeem_status' : (scheme?.passBookStatus === 'ACTIVE' ? 'active-status' : 'redeem_status')\">\r\n {{\r\n scheme.passBookStatus ? scheme.passBookStatus.replaceAll('_', ' ') : 'N/A'\r\n }}\r\n </div>\r\n\r\n <div class=\"scheme-stats\">\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">{{ scheme?.totalPaidAmount || '0' }}</div>\r\n <div class=\"stat-label\">Deposited Amount</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">\r\n {{\r\n scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n (scheme?.schemePayments?.length -\r\n scheme.dueMonths) : 'N/A'\r\n }}\r\n </div>\r\n <div class=\"stat-label\">Paid Months</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">{{scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n scheme?.dueMonths : 'N/A' }}</div>\r\n <div class=\"stat-label\">Due Months</div>\r\n </div>\r\n <div class=\"stat\" *ngIf=\"scheme?.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"stat-value\">{{ scheme?.totalInvestedMetal || '0' }} gms</div>\r\n <div class=\"stat-label\">Accumulated Gold</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-footer\">\r\n <span>Maturity Date: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n 'N/A' }}</span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #showActiveScheme>\r\n <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n <span>No Active Scheme</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n <!-- <div class=\"auto-pay\">\r\n <div class=\"auto-pay-icon mobile-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/966462c1753439662355Background.png\"></div>\r\n <div class=\"auto-pay-content\">\r\n <div class=\"auto-pay-title\">Manage Auto-pay</div>\r\n <div class=\"auto-pay-desc\">Pause, resume or cancel auto payment subscription</div>\r\n </div>\r\n <button class=\"manage-btn\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/409230c1753439564830SVG.png\"> Manage</button>\r\n </div> -->\r\n </div>\r\n</ng-template>\r\n<ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #Scheme_Details>\r\n <simpo-scheme-details [schemeDetails]=\"schemeDetails\" [data]=\"data\" [metalPrice]=\"metalPrice\"\r\n (gotoSchemeOverview)=\"selectedSidePanelTab = 'Scheme Passbook'\"></simpo-scheme-details>\r\n</ng-template>\r\n<ng-template #Transactions>\r\n <simpo-passbook-transactions></simpo-passbook-transactions>\r\n</ng-template>\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>", styles: [".total-container{position:relative;height:auto;overflow:scroll;background:#fff!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;padding:15px;overflow-y:auto;overflow-x:hidden;max-height:80vh}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}h1{font-weight:600}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.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:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.amount_logo{font-size:27px}@media screen and (max-width: 475px){.store-listing{width:35%!important}.total-container{height:100%!important}.amount_logo{font-size:27px}.amount,.scheme-count{font-size:20px!important}.title-text{font-size:24px}.schemes-grid{flex-wrap:wrap;overflow-y:scroll;height:95%}.section{height:auto}.scheme-status{white-space:nowrap}.scheme-card{width:100%}.header{flex-direction:column-reverse}.scheme-overview{width:100%!important}.scheme-overview div{flex-wrap:wrap}.available-savings h3{font-size:17px!important}.quick-actions{width:100%}.active-schemes h3{font-size:17px!important}.auto-pay-icon{width:55px!important;height:50px!important}.mobile-icon{width:30px!important}.manage-btn{width:25%!important}.tab-selected div{font-weight:600!important}.mobile-height{height:100%!important}.passbook_container{height:90%!important;overflow-x:scroll!important}.passbook_container .section{max-height:unset!important;padding:10px!important}.section-header{margin-bottom:2px!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;border:none;padding:10px 5px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.list-sec .tab-selected{border-top-left-radius:10px!important;border-bottom-left-radius:10px;border:none}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:0 10px;width:100vw;margin-bottom:20px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.profile-icon{width:70px}.text-overflow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width:1200px) and (max-width: 1330px){.profile-details{width:75%!important}}@media screen and (min-width:1200px){.manage-btn{width:10%!important}}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}.cards{box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;border-radius:12px}.cards .card-header{padding:8px}.cards .card-header .card-head .scheme-type{font-size:15px}.cards .card-body .col-4 .card-sub-text{font-size:14px}.cards .card-footer{border-top:2px dashed!important;margin:0 5px;padding:10px}.cards .card-footer span{font-size:13px}.cards .card-footer .date-text{font-weight:600}.cards .card-footer div{font-size:15px}.fs-15{font-size:14px}.w-32{width:32.5%!important}.w-40{width:40px!important}.f-18{font-size:18px}.fw-600{font-weight:600}.scheme-id{font-size:13px}.order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.cart-item-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa);width:49%}.address-card .card-body{position:relative;overflow:hidden}.address-text{color:#495057;line-height:1.4}.btn-sm{transition:all .3s ease}.small-icon{font-size:16px!important}.badge.bg-light{color:#495057!important;background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;border:1px solid #dee2e6}@media (max-width: 576px){.address-card .card-body{padding:1rem!important}.address-card{width:100%!important}.btn-sm{display:flex;justify-content:center;align-items:center;color:red!important}.btn-sm mat-icon{font-size:13px}.btn-sm{width:100%;margin-bottom:.25rem}}.profile-box{transition:all .3s ease;position:relative}.tab-item:hover img{transform:scale(1.1)}.tab-selected{border-left:4px solid;font-weight:600!important;border-bottom:unset!important}.tab-selected .tab-label{font-weight:600!important}.tabs-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.tabs-container::-webkit-scrollbar{width:4px}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-box{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.profile-box{width:100%!important}.profile-header{flex-direction:column;height:auto!important;text-align:center}.action-buttons{flex-direction:column}}.scheme-overview{gap:20px;width:100%}.available-savings{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:20px;border-radius:12px;position:relative;flex:1}.available-savings .amount{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.available-savings h3{font-size:14px;color:#856404;margin-bottom:8px;font-weight:500}.subtitle{font-size:12px;color:#666}.active-schemes{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;position:relative;flex:1}.active-schemes h3{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.scheme-count{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e9ecef;max-height:40vh;overflow-x:scroll}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:18px;font-weight:600}.view-all{color:#6c5ce7;font-size:16px}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.overdue{background:#fef2f2;border:1px solid #FECACA}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.upcoming{background:#f8f9fa;color:#666}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.payment-status{font-size:12px;padding:4px 8px;border-radius:4px;color:#fff;white-space:nowrap}.overdue-status{background:#dc3545}.upcoming-status{background:#6c757d}.schemes-grid{display:flex;gap:10px;overflow-x:scroll}.scheme-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e9ecef;position:relative;min-width:34vw}.scheme-header{display:flex;justify-content:space-between;align-items:flex-start}.scheme-title{font-size:16px;font-weight:600;margin-bottom:4px}.scheme-amount{font-size:12px;color:#666}.scheme-date{font-size:12px;color:#666;display:flex;flex-direction:column;gap:10px}.scheme-status{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;text-transform:uppercase;min-width:15%;max-width:fit-content}.redeem_status{background:orange;color:#fff}.active-status{background:#22c55e;color:#fff}.scheme-stats{display:flex;justify-content:space-between}.stat{text-align:center}.stat-value{font-size:20px;font-weight:700;color:#333}.stat-label{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px}.scheme-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.price-notice{background:#fce7f3;color:#be185d;padding:8px 12px;border-radius:6px;font-size:11px}.auto-pay{background:#fff3cd;padding:16px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-top:20px}.auto-pay-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.auto-pay-icon img{width:100%}.auto-pay-content{flex:1}.auto-pay-title{font-size:14px;font-weight:600;margin-bottom:4px}.auto-pay-desc{font-size:12px;color:#666}.manage-btn{background:none;border:1px solid #dee2e6;padding:6px 0;border-radius:4px;font-size:13px!important;cursor:pointer;display:flex;justify-content:space-evenly}.store-listing{font-size:14px;width:20%;height:30px;margin-bottom:13px;border:1px solid #e9ecef;border-radius:5px;outline:none;padding-left:5px;cursor:pointer}.fs-14{font-size:14px}.fs-12{font-size:12px}.logout-dialog-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;width:440px;max-width:90vw;padding:40px 32px 32px;border-radius:28px;box-shadow:0 25px 60px -15px #00000040,0 0 0 1px #0000000d;overflow:hidden;text-align:center;animation:modalPopIn .35s cubic-bezier(.16,1,.3,1) both}@keyframes modalPopIn{0%{opacity:0;transform:scale(.92) translateY(16px)}to{opacity:1;transform:scale(1) translateY(0)}}.logout-close-btn{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;border:none;background:#0000000d;color:#64748b;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;z-index:2}.logout-close-btn mat-icon{font-size:20px!important;height:20px!important;width:20px!important;line-height:20px!important}.logout-close-btn:hover{background:#0000001a;color:#0f172a;transform:rotate(90deg)}.logout-blob{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:0}.logout-blob-1{width:240px;height:240px;background:radial-gradient(circle,rgba(255,99,102,.18) 0%,transparent 70%);top:-60px;right:-60px;animation:blobFloat1 8s ease-in-out infinite}.logout-blob-2{width:200px;height:200px;background:radial-gradient(circle,rgba(255,165,80,.14) 0%,transparent 70%);bottom:-40px;left:-40px;animation:blobFloat2 10s ease-in-out infinite}@keyframes blobFloat1{0%,to{transform:translate(0) scale(1)}50%{transform:translate(-12px,16px) scale(1.06)}}@keyframes blobFloat2{0%,to{transform:translate(0) scale(1)}50%{transform:translate(10px,-14px) scale(1.04)}}.logout-icon-ring{position:relative;z-index:1;width:90px;height:90px;border-radius:50%;background:linear-gradient(135deg,#fff4e5,#ffe0e0);box-shadow:0 8px 30px #ff64642e,0 0 0 10px #ff646412;display:flex;align-items:center;justify-content:center;margin-bottom:24px}.logout-wave{font-size:42px;line-height:1;display:inline-block;animation:waveHand 1.6s ease-in-out infinite;transform-origin:70% 80%}@keyframes waveHand{0%,60%,to{transform:rotate(0)}10%,30%{transform:rotate(-14deg)}20%,40%{transform:rotate(10deg)}}.logout-title{position:relative;z-index:1;font-size:1.55rem;font-weight:700;color:#1a1a2e;margin:0 0 10px;letter-spacing:-.3px}.logout-subtitle{position:relative;z-index:1;font-size:.92rem;color:#64748b;line-height:1.6;margin:0 0 32px;max-width:320px}.logout-actions{position:relative;z-index:1;display:flex;gap:12px;width:100%;justify-content:center}.logout-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:1;padding:13px 20px;border-radius:12px;font-size:.95rem;font-weight:600;border:none;cursor:pointer;transition:all .25s cubic-bezier(.34,1.56,.64,1);letter-spacing:.2px}.logout-action-btn .logout-btn-icon{font-size:18px!important;height:18px!important;width:18px!important;line-height:18px!important}.logout-action-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #0000001f}.logout-action-btn:active{transform:translateY(0)}.btn-stay{background:#f1f5f9;color:#334155;border:1px solid #e2e8f0}.btn-stay:hover{background:#e2e8f0;border-color:#cbd5e1}.btn-confirm{color:#fff;border:1px solid transparent;box-shadow:0 4px 18px #0000002e}.btn-confirm:hover{filter:brightness(1.1);box-shadow:0 8px 24px #0000003d}\n"], dependencies: [{ 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: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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: 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.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: OrderDetailsComponent, selector: "simpo-order-details", inputs: ["responseData", "data", "index", "edit", "delete", "customClass", "orderDetailData"], outputs: ["goBackEmitter", "downloadReceiptEmitter"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData", "itemIndex"] }, { kind: "component", type: SchemeDetailsComponent, selector: "simpo-scheme-details", inputs: ["schemeDetails", "data", "metalPrice"], outputs: ["gotoSchemeOverview"] }, { kind: "component", type: ListHomeAppointmentComponent, selector: "simpo-list-home-appointment" }, { kind: "component", type: MyBookingsComponent, selector: "simpo-my-bookings" }, { kind: "component", type: PassbookTransactionsComponent, selector: "simpo-passbook-transactions" }] }); }
|
|
23329
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }, { propertyName: "logoutDialogTemplate", first: true, predicate: ["logoutDialog"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [spacingHorizontal]=\"styles?.layout\" [ngStyle]=\"{'max-height': '100vh', 'z-index': isMobile ? '100000000' : ''}\"\r\n [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"p-4 profile-box\" style=\"width: 25%; border-radius: 20px; height: fit-content\"\r\n [style.order]=\"styles?.swap ? '1' : '0'\">\r\n\r\n <!-- Profile Header Section -->\r\n <div class=\"d-flex align-items-center profile-header\"\r\n style=\"gap: 15px; height: 80px; margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 15px; backdrop-filter: blur(10px);\">\r\n <div class=\"profile-image-wrapper\" style=\"position: relative;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100 profile-icon\"\r\n style=\"border: 3px solid #e3f2fd; transition: all 0.3s ease;\">\r\n <div class=\"online-indicator\"\r\n style=\"position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4caf50; border: 2px solid white; border-radius: 50%;\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"profile-details flex-grow-1\">\r\n <h4 class=\"font-weight-bold mb-2\" style=\"color: #2c3e50; font-size: 1.1rem; margin-bottom: 8px;\">\r\n {{getUserDetails?.contact?.name}}</h4>\r\n\r\n <div class=\"contact-info\" style=\"display: flex; flex-direction: column; gap: 6px;\">\r\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n *ngIf=\"getUserDetails?.contact?.mobile?.length\"\r\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">stay_primary_portrait</mat-icon>\r\n <span>{{getUserDetails?.contact?.mobile}}</span>\r\n </h6>\r\n\r\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n *ngIf=\"getUserDetails?.contact?.email?.length\"\r\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">mail_outline</mat-icon>\r\n <span class=\"w-100 text-overflow\">{{getUserDetails?.contact?.email}}</span>\r\n </h6>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Navigation Tabs Section -->\r\n <div class=\"tabs-container\" style=\"margin-bottom: 20px;\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center tab-item\"\r\n style=\"gap: 12px; cursor: pointer; padding: 16px 12px; margin: 2px 0; border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden;\"\r\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '1px solid rgba(0,0,0,0.06)' : ''\"\r\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\"\r\n [style.backgroundColor]=\"tab.status ? styles?.background?.color : 'transparent'\"\r\n [style.borderColor]=\"tab.status ? styles?.background?.accentColor : 'transparent'\">\r\n <div class=\"tab-icon-wrapper\"\r\n style=\"width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\">\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n style=\"height: 20px; width: 20px; object-fit: contain; transition: transform 0.3s ease;\">\r\n </div>\r\n\r\n <div class=\"tab-label font-weight-normal\" style=\"font-size: 0.9rem; transition: all 0.3s ease;\">\r\n {{tab.value}}</div>\r\n\r\n <!-- Hover effect background -->\r\n <div class=\"tab-hover-bg\"\r\n style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,123,255,0.05) 0%, rgba(0,123,255,0.02) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1;\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- Action Buttons Section -->\r\n <div class=\"d-flex action-buttons\"\r\n style=\"gap: 10px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.06);\">\r\n <button class=\"edit-btn flex-grow-1\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\"\r\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; background: transparent; border: 2px solid; transition: all 0.3s ease; position: relative; overflow: hidden;\">\r\n Edit Profile\r\n </button>\r\n\r\n <button class=\"logout-btn flex-grow-1\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\"\r\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; border: none; color: white; transition: all 0.3s ease;\">\r\n Logout\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"orders-sec\" [style.order]=\"styles?.swap ? '0' : '1'\">\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Details'\">\r\n <ng-container *ngTemplateOutlet=\"SchemeDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Transactions'\">\r\n <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n <simpo-list-home-appointment></simpo-list-home-appointment>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Bookings'\">\r\n <simpo-my-bookings [data]=\"data\"></simpo-my-bookings>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Referrals'\">\r\n <ng-container *ngTemplateOutlet=\"Referrals\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Rewards'\">\r\n <ng-container *ngTemplateOutlet=\"Rewards\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <div class=\"w-100 position-relative mobile-height\" style=\"height: 80vh;\">\r\n <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\"\r\n *ngIf=\"selectedSidePanelTab != 'Scheme_Details'\">\r\n <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\"\r\n (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n </div>\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"''\">\r\n <section class=\"top-sec\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\"\r\n style=\"width: 50px; height: 50px;\">\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\">\r\n <mat-icon>stay_primary_portrait</mat-icon>\r\n <span>{{getUserDetails?.contact?.mobile}}</span>\r\n </h6>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\"\r\n *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon>\r\n <span>{{getUserDetails?.contact?.email}}</span>\r\n </h6>\r\n </div>\r\n </section>\r\n <section class=\"list-sec\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\"\r\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\"\r\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n [style.color]=\"styles?.background?.accentColor\">\r\n <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">\r\n {{tab.value}}</div>\r\n </div>\r\n\r\n </ng-container>\r\n </section>\r\n <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\r\n <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\">Logout</button>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Transactions'\">\r\n <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n <simpo-list-home-appointment></simpo-list-home-appointment>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Bookings'\">\r\n <simpo-my-bookings [data]=\"data\"></simpo-my-bookings>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Referrals'\">\r\n <ng-container *ngTemplateOutlet=\"Referrals\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Rewards'\">\r\n <ng-container *ngTemplateOutlet=\"Rewards\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\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\r\n<ng-template #Referrals>\r\n <iframe [src]=\"getMyReferralsUrl\" frameborder=\"0\" width=\"100%\" height=\"100%\"></iframe>\r\n</ng-template>\r\n<ng-template #Rewards>\r\n <iframe [src]=\"getRewardsUrl\" frameborder=\"0\" width=\"100%\" height=\"100%\"></iframe>\r\n</ng-template>\r\n<ng-template #OrderSection>\r\n <h3 class=\"onlyDesktop mb-3\">My Orders</h3>\r\n <!-- <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n <ng-container *ngFor=\"let tab of tabs\">\r\n <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">\r\n {{tab.value}}</div>\r\n </ng-container>\r\n </div> -->\r\n <div class=\"order-list\">\r\n <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #showEmptyScreen>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\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]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <div class=\"cart-text \">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <div class=\"heading-medium d-flex justify-content-center content-side\"\r\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n <simpo-text-editor [(value)]=\"text.value\"\r\n [editable]=\"edit || false\" [isRTE]=\"text.isRTE\"></simpo-text-editor>\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\"\r\n (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n <div class=\"d-flex justify-content-between mb-2\">\r\n <h3 class=\"title-text\">My Address</h3>\r\n <button class=\"address-btn\" (click)=\"addNewAddress()\"\r\n [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n <div class=\"address-list\">\r\n <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\r\n <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n <div class=\"card border-0 mb-2 cursor-pointer order-card \" [style.width]=\"getProductWidth\">\r\n <div class=\"card-body p-3\">\r\n <!-- Header Section -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n <div class=\"address-info d-flex align-items-center justify-content-between w-100\">\r\n <h4 class=\"mb-0 fw-semibold\">{{address.receiverName}}</h4>\r\n <div class=\"icon-grp d-flex\">\r\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n (click)=\"editAddress(idx)\">edit</mat-icon>\r\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"address-content mb-3\">\r\n <div class=\"address-line mb-2\">\r\n <span class=\"text-muted small d-block\">Address</span>\r\n <span class=\"address-text\">{{address.addressLine1}}</span>\r\n </div>\r\n <div class=\"phone-info\">\r\n <span class=\"text-muted small d-block\">Phone</span>\r\n <span class=\"phone-number fw-bold\">{{address.receiverPhone}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-template #showEmptyAddress>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\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=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\r\n <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery\r\n </div>\r\n <!-- </ng-container> -->\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n <h3 class=\"onlyDesktop\">My Accounts</h3>\r\n</ng-template>\r\n<ng-template #logoutDialog>\r\n <div class=\"logout-dialog-card\">\r\n <!-- Decorative blobs -->\r\n <div class=\"logout-blob logout-blob-1\"></div>\r\n <div class=\"logout-blob logout-blob-2\"></div>\r\n\r\n <!-- Close Button -->\r\n <button class=\"logout-close-btn\" (click)=\"closeDialog()\" aria-label=\"Close\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n\r\n <!-- Wave icon -->\r\n <div class=\"logout-icon-ring\">\r\n <span class=\"logout-wave\">\uD83D\uDC4B</span>\r\n </div>\r\n\r\n <!-- Copy -->\r\n <h2 class=\"logout-title\">See you soon, {{getUserDetails?.contact?.name?.split(' ')?.[0] || 'Friend'}}!</h2>\r\n <p class=\"logout-subtitle\">\r\n We'll keep everything safe while you're away.<br>\r\n Come back anytime \u2014 we'll be right here. \uD83D\uDE0A\r\n </p>\r\n\r\n <!-- Actions -->\r\n <div class=\"logout-actions\">\r\n <button class=\"logout-action-btn btn-stay\" (click)=\"closeDialog()\">\r\n <mat-icon class=\"logout-btn-icon\">arrow_back</mat-icon>\r\n Stay\r\n </button>\r\n <button class=\"logout-action-btn btn-confirm\"\r\n [style.background]=\"styles?.background?.accentColor\"\r\n (click)=\"closeDialog(); _doLogout()\">\r\n <mat-icon class=\"logout-btn-icon\">logout</mat-icon>\r\n Yes, Logout\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n <ng-container *ngTemplateOutlet=\"logoutDialog\"></ng-container>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n <div (click)=\"goToOrderDetails(order)\" class=\"card border-0 mb-2 cursor-pointer order-card\">\r\n <div class=\"card-body p-3\" [style.--background-color]=\"styles?.background?.color\">\r\n <!-- Header Section -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n <div class=\"order-number\">\r\n <h4 class=\"mb-0 fw-semibold\">{{\"Order\" + \" \" + order.orderNum}}</h4>\r\n </div>\r\n <div class=\"arrow-icon\">\r\n <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"ordered-item row mb-2\">\r\n <ng-container *ngFor=\"let item of getOrderedItems(order)\">\r\n <div class=\"item-card col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img [src]=\"item?.imgUrl\" alt=\"Product Image\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"item-img w-50\">\r\n <div class=\"cart-item-name\">{{item?.itemName}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <!-- Middle Section -->\r\n <div class=\"order-details\">\r\n <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-1\">\r\n <span class=\"text-muted small mb-3 mb-sm-0\">\r\n {{order.createdTimeStamp | date: 'dd MMMM yyyy'}}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"amount-section\">\r\n <span class=\"h5 mb-0 text-success fw-bold\">\r\n <span [innerHTML]=\"currency\"></span>\r\n <!-- {{(order.billDetails.discountAmount ?\r\n (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +\r\n order?.billDetails?.totalTaxAfterDiscount) :\r\n order.billDetails.totalGrossValue) | number:'1.0-2'}} -->\r\n {{getTotalAmtPaid(order) | number:'1.0-2'}}\r\n </span>\r\n </div>\r\n <div class=\"status-section\">\r\n <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">\r\n {{order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | titlecase}}\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mt-1\" *ngIf=\"order.rewardUsed === 'REWARD_POINTS'\">\r\n <div class=\"fs-14 text-secondary\">\r\n Amount Paid -\r\n <span class=\"text-success fw-bold\">\u20B9 {{ getTotalAmtPaid(order) === order.pointsConvertedINR ? '0' :\r\n (getTotalAmtPaid(order) - order.pointsConvertedINR) }}</span>\r\n </div>\r\n <div class=\"fs-14 text-secondary\">\r\n Rewarded Amount - <span class=\"text-success fw-bold\">\u20B9 {{order.pointsConvertedINR}}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mt-1\" *ngIf=\"order.rewardUsed === 'VOUCHER'\">\r\n <div class=\"fs-14 text-secondary\">\r\n Amount Paid -\r\n <span class=\"text-success fw-bold\">\u20B9 {{ getTotalAmtPaid(order) === order.voucherValue ? '0' :\r\n (getTotalAmtPaid(order) - order.voucherValue) }}</span>\r\n </div>\r\n <div class=\"fs-14 text-secondary\">\r\n Rewarded Amount - <span class=\"text-success fw-bold\">\u20B9 {{order.voucherValue}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #WishlistDetails>\r\n <h3 class=\"onlyDesktop\">My Wishlist</h3>\r\n <div class=\"wishlist-list\" *ngIf=\"wishlistData?.length; else showEmptyWishlistScreen\">\r\n <div class=\"d-flex flex-wrap\" style=\"gap: 10px;\">\r\n <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n <div class=\"address-card mb-2\">\r\n <div class=\"card-body p-4\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-auto\">\r\n <div class=\"product-image-wrapper\">\r\n <img loading=\"lazy\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"product-img rounded\" [src]=\"item.imgUrl\" alt=\"Product Image\">\r\n </div>\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"product-details\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div\r\n class=\"col-auto text-end d-flex justify-content-between align-items-center w-100\">\r\n <h6 class=\"product-name mb-2 fw-semibold text-dark\">\r\n {{item.itemName}}\r\n </h6>\r\n <div class=\"delete-action\" *ngIf=\"!isMobile\">\r\n <button class=\"btn btn-sm delete-btn\" (click)=\"deleteFromWhislist(item)\"\r\n title=\"Remove from wishlist\">\r\n <mat-icon class=\"small-icon\">delete</mat-icon>\r\n </button>\r\n </div>\r\n <div class=\"delete-action mt-2\" *ngIf=\"isMobile\">\r\n <button class=\"btn btn-sm w-100\" (click)=\"deleteFromWhislist(item)\">\r\n <mat-icon class=\"small-icon me-1\">delete</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"product-price mb-3\">\r\n <span class=\"h5 text-success fw-bold mb-0\">\r\n <span [innerHTML]='currency'></span>{{item.discountedPrice}}\r\n </span>\r\n <span class=\"text-muted small ms-2\" *ngIf=\"item.quantity\">\r\n ({{item.quantity}} items)\r\n </span>\r\n </div>\r\n <div class=\"action-buttons d-flex gap-2\">\r\n <div class=\"quantity-controls d-flex align-items-center w-50 justify-content-center\"\r\n *ngIf=\"item.quantity\">\r\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n (click)=\"addToFav(item, 'SUBSTRACT')\">\r\n -\r\n </button>\r\n <span class=\"quantity-display px-3 py-1 bg-light rounded mx-1\">\r\n {{item.quantity}}\r\n </span>\r\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n (click)=\"addToFav(item, 'ADD')\"> +\r\n </button>\r\n </div>\r\n <button class=\"btn btn-sm w-50\" *ngIf=\"!item.quantity\"\r\n (click)=\"addToFav(item, 'ADD')\">\r\n + Add Quantity\r\n </button>\r\n <button class=\"btn btn-sm w-50\" (click)=\"moveToCart(item)\">\r\n Move to Cart\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n <ng-template #showEmptyWishlistScreen>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\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]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container>\r\n <div class=\"heading-medium d-flex justify-content-center\">\r\n Your Wishlist is Empty</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #SchemeDetails>\r\n <div class=\"header mb-3 f-18 fw-600\">Current Scheme Enrollments - 4</div>\r\n <div class=\"row gap-2\">\r\n <ng-container *ngFor=\"let scheme of [1,1,1,1]\">\r\n <div class=\"cards d-flex flex-column w-32 mb-2 p-0 \">\r\n <div class=\"card-header row gap-2\">\r\n <div class=\"card-head-left col-7\">\r\n <div class=\"scheme-type fs-15 fw-600\">Group Investment Scheme</div>\r\n <div class=\"scheme-id fw-600\">GIS6K_000231004</div>\r\n </div>\r\n <div class=\"card-head-right col-4 text-center align-content-center\">\r\n <div class=\"scheme-amount fw-600\">\u20B96,000/M</div>\r\n </div>\r\n </div>\r\n <div class=\"card-body d-flex p-0 mb-3\">\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/425719c1752566628577star.png\" alt=\"\"\r\n class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">\u20B913,800</div>\r\n <div class=\"card-sub-text text-center\">Total Acheived</div>\r\n </div>\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/229997c1752567131192brand_7959220.png\"\r\n alt=\"\" class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">\u20B91,000</div>\r\n <div class=\"card-sub-text text-center\">Rewards</div>\r\n </div>\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/760761c1752567279970calendar (1).png\"\r\n alt=\"\" class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">8</div>\r\n <div class=\"card-sub-text text-center\">Due Months</div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer row\">\r\n <div class=\"col-6 d-flex gap-2 p-0\">\r\n <span class=\"footer-text text-nowrap\">Start On :</span><span class=\"date-text text-nowrap\">30\r\n may 2025</span>\r\n </div>\r\n <div class=\"col-6 d-flex gap-2 p-0\">\r\n <span class=\"footer-text text-nowrap\">Maturity On :</span><span class=\"date-text text-nowrap\">25\r\n may 2026</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n<ng-template #SchemePassbook>\r\n <div class=\"w-100 h-100 overflow-scroll passbook_container\">\r\n <div class=\"header d-flex flex-column\">\r\n <div class=\"d-flex align-items-center justify-content-end mb-3\" *ngIf=\"storeListing.length >= 2\"><select\r\n class=\"store-listing\" (change)=\"changeStore($event)\">\r\n <option value=\"\">Select Store</option>\r\n <option [value]=\"store.id\" *ngFor=\"let store of storeListing\">{{store.storeName}}</option>\r\n </select></div>\r\n <div class=\"scheme-overview d-flex flex-column\">\r\n <div class=\"d-flex gap-2\">\r\n <div class=\"available-savings\">\r\n <div class=\"d-flex align-items-center gap-1 w-100 justify-content-between\">\r\n <h3>Available Savings</h3>\r\n <span class=\"amount_logo\">\uD83D\uDCB0</span>\r\n </div>\r\n\r\n <div class=\"amount\">{{totalSavings ? totalSavings :\r\n '0'}}</div>\r\n </div>\r\n <div class=\"active-schemes\">\r\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n <h3>Active Passbooks</h3>\r\n <div class=\"auto-pay-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\r\n </div>\r\n </div>\r\n <div class=\"scheme-count\">{{totalSchemes?.length ?\r\n totalSchemes.length : '0'}}</div>\r\n <div class=\"subtitle\">On Track</div>\r\n </div>\r\n <div class=\"active-schemes\" *ngIf=\"totalAccumulatedGold > 0\">\r\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n <h3>Accumulated Gold </h3>\r\n <div class=\"auto-pay-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/153448c1756808418216accumulated_icon.png\">\r\n </div>\r\n </div>\r\n <div class=\"scheme-count\">{{totalAccumulatedGold}} gms</div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"overAllDues?.length\">\r\n <div class=\"section d-flex-flex-column gap-2\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Due Payments</h2>\r\n </div>\r\n <div class=\"payment-list d-flex flex-column gap-2\">\r\n <ng-container *ngIf=\"overAllDues?.length; else showEmptyPayment\">\r\n <div class=\"payment-item overdue\" *ngFor=\"let payment of overAllDues\">\r\n <div class=\"payment-info\">\r\n <div class=\"payment-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/403142c1753435378127Background.svg\">\r\n <!-- <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\"\r\n *ngIf=\"!payment.overdueStatus && payment.paymentStatus === 'PAID'\"> -->\r\n </div>\r\n <div class=\"payment-details\">\r\n <h4>{{payment.schemeName}} - {{payment.emiMonthCount}}rd EMI</h4>\r\n <span>Date {{payment.dueDate ? (payment.dueDate | date:'dd-MM-yyyy') :\r\n 'N/A'}}\r\n <!-- <span *ngIf=\"payment.overdueStatus\">| Due by: {{payment.daysOverdue\r\n ? payment.daysOverdue : 0}}</span> --></span>\r\n </div>\r\n </div>\r\n <div class=\"payment-amount\">\r\n <div class=\"amount-value\">\u20B9{{payment.dueAmount ? payment.dueAmount :\r\n '0'}}\r\n </div>\r\n <div class=\"payment-status overdue-status cursor-pointer\"\r\n (click)=\"payDue(payment)\">\r\n <ng-container *ngIf=\"!payDueLoader\">Pay Now</ng-container>\r\n <ng-container *ngIf=\"payDueLoader\">Loading...</ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #showEmptyPayment>\r\n <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n <span>No Due Payments</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"section mt-3\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Your Active Passbooks</h2>\r\n </div>\r\n\r\n <div class=\"schemes-grid\">\r\n <ng-container *ngIf=\"totalSchemes && totalSchemes.length > 0; else showActiveScheme\">\r\n <div class=\"scheme-card d-flex flex-column gap-2 cursor-pointer\"\r\n *ngFor=\"let scheme of totalSchemes; let i = index\" (click)=\"viewSchemeDetails(scheme)\">\r\n <div class=\"scheme-header\">\r\n <div>\r\n <div class=\"scheme-title\">{{ scheme?.schemeName || 'N/A' }}</div>\r\n <div class=\"scheme-amount\">\u20B9{{ scheme?.installmentAmount || '0' }}/Monthly</div>\r\n </div>\r\n <div class=\"scheme-date\">\r\n <span>Enrolled: {{ scheme?.createdTimestamp ? (scheme?.createdTimestamp |\r\n date:'dd-MM-yyyy') :\r\n 'N/A' }}</span>\r\n <!-- <span>Maturity: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n 'N/A' }}</span> -->\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-status d-flex justify-content-center align-items-center\"\r\n [ngClass]=\"scheme?.passBookStatus === 'REDEEM_REQUESTED' ? 'redeem_status' : (scheme?.passBookStatus === 'ACTIVE' ? 'active-status' : 'redeem_status')\">\r\n {{\r\n scheme.passBookStatus ? scheme.passBookStatus.replaceAll('_', ' ') : 'N/A'\r\n }}\r\n </div>\r\n\r\n <div class=\"scheme-stats\">\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">{{ scheme?.totalPaidAmount || '0' }}</div>\r\n <div class=\"stat-label\">Deposited Amount</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">\r\n {{\r\n scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n (scheme?.schemePayments?.length -\r\n scheme.dueMonths) : 'N/A'\r\n }}\r\n </div>\r\n <div class=\"stat-label\">Paid Months</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">{{scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n scheme?.dueMonths : 'N/A' }}</div>\r\n <div class=\"stat-label\">Due Months</div>\r\n </div>\r\n <div class=\"stat\" *ngIf=\"scheme?.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"stat-value\">{{ scheme?.totalInvestedMetal || '0' }} gms</div>\r\n <div class=\"stat-label\">Accumulated Gold</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-footer\">\r\n <span>Maturity Date: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n 'N/A' }}</span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #showActiveScheme>\r\n <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n <span>No Active Scheme</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n <!-- <div class=\"auto-pay\">\r\n <div class=\"auto-pay-icon mobile-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/966462c1753439662355Background.png\"></div>\r\n <div class=\"auto-pay-content\">\r\n <div class=\"auto-pay-title\">Manage Auto-pay</div>\r\n <div class=\"auto-pay-desc\">Pause, resume or cancel auto payment subscription</div>\r\n </div>\r\n <button class=\"manage-btn\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/409230c1753439564830SVG.png\"> Manage</button>\r\n </div> -->\r\n </div>\r\n</ng-template>\r\n<ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #Scheme_Details>\r\n <simpo-scheme-details [schemeDetails]=\"schemeDetails\" [data]=\"data\" [metalPrice]=\"metalPrice\"\r\n (gotoSchemeOverview)=\"selectedSidePanelTab = 'Scheme Passbook'\"></simpo-scheme-details>\r\n</ng-template>\r\n<ng-template #Transactions>\r\n <simpo-passbook-transactions></simpo-passbook-transactions>\r\n</ng-template>\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>", styles: [".total-container{position:relative;height:auto;overflow:scroll;background:#fff!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;padding:15px;overflow-y:auto;overflow-x:hidden;max-height:80vh}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}h1{font-weight:600}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.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:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.amount_logo{font-size:27px}@media screen and (max-width: 475px){.store-listing{width:35%!important}.total-container{height:100%!important}.amount_logo{font-size:27px}.amount,.scheme-count{font-size:20px!important}.title-text{font-size:24px}.schemes-grid{flex-wrap:wrap;overflow-y:scroll;height:95%}.section{height:auto}.scheme-status{white-space:nowrap}.scheme-card{width:100%}.header{flex-direction:column-reverse}.scheme-overview{width:100%!important}.scheme-overview div{flex-wrap:wrap}.available-savings h3{font-size:17px!important}.quick-actions{width:100%}.active-schemes h3{font-size:17px!important}.auto-pay-icon{width:55px!important;height:50px!important}.mobile-icon{width:30px!important}.manage-btn{width:25%!important}.tab-selected div{font-weight:600!important}.mobile-height{height:100%!important}.passbook_container{height:90%!important;overflow-x:scroll!important}.passbook_container .section{max-height:unset!important;padding:10px!important}.section-header{margin-bottom:2px!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;border:none;padding:10px 5px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.list-sec .tab-selected{border-top-left-radius:10px!important;border-bottom-left-radius:10px;border:none}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:0 10px;width:100vw;margin-bottom:20px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.profile-icon{width:70px}.text-overflow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width:1200px) and (max-width: 1330px){.profile-details{width:75%!important}}@media screen and (min-width:1200px){.manage-btn{width:10%!important}}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}.cards{box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;border-radius:12px}.cards .card-header{padding:8px}.cards .card-header .card-head .scheme-type{font-size:15px}.cards .card-body .col-4 .card-sub-text{font-size:14px}.cards .card-footer{border-top:2px dashed!important;margin:0 5px;padding:10px}.cards .card-footer span{font-size:13px}.cards .card-footer .date-text{font-weight:600}.cards .card-footer div{font-size:15px}.fs-15{font-size:14px}.w-32{width:32.5%!important}.w-40{width:40px!important}.f-18{font-size:18px}.fw-600{font-weight:600}.scheme-id{font-size:13px}.order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.cart-item-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa);width:49%}.address-card .card-body{position:relative;overflow:hidden}.address-text{color:#495057;line-height:1.4}.btn-sm{transition:all .3s ease}.small-icon{font-size:16px!important}.badge.bg-light{color:#495057!important;background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;border:1px solid #dee2e6}@media (max-width: 576px){.address-card .card-body{padding:1rem!important}.address-card{width:100%!important}.btn-sm{display:flex;justify-content:center;align-items:center;color:red!important}.btn-sm mat-icon{font-size:13px}.btn-sm{width:100%;margin-bottom:.25rem}}.profile-box{transition:all .3s ease;position:relative}.tab-item:hover img{transform:scale(1.1)}.tab-selected{border-left:4px solid;font-weight:600!important;border-bottom:unset!important}.tab-selected .tab-label{font-weight:600!important}.tabs-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.tabs-container::-webkit-scrollbar{width:4px}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-box{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.profile-box{width:100%!important}.profile-header{flex-direction:column;height:auto!important;text-align:center}.action-buttons{flex-direction:column}}.scheme-overview{gap:20px;width:100%}.available-savings{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:20px;border-radius:12px;position:relative;flex:1}.available-savings .amount{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.available-savings h3{font-size:14px;color:#856404;margin-bottom:8px;font-weight:500}.subtitle{font-size:12px;color:#666}.active-schemes{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;position:relative;flex:1}.active-schemes h3{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.scheme-count{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e9ecef;max-height:40vh;overflow-x:scroll}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:18px;font-weight:600}.view-all{color:#6c5ce7;font-size:16px}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.overdue{background:#fef2f2;border:1px solid #FECACA}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.upcoming{background:#f8f9fa;color:#666}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.payment-status{font-size:12px;padding:4px 8px;border-radius:4px;color:#fff;white-space:nowrap}.overdue-status{background:#dc3545}.upcoming-status{background:#6c757d}.schemes-grid{display:flex;gap:10px;overflow-x:scroll}.scheme-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e9ecef;position:relative;min-width:34vw}.scheme-header{display:flex;justify-content:space-between;align-items:flex-start}.scheme-title{font-size:16px;font-weight:600;margin-bottom:4px}.scheme-amount{font-size:12px;color:#666}.scheme-date{font-size:12px;color:#666;display:flex;flex-direction:column;gap:10px}.scheme-status{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;text-transform:uppercase;min-width:15%;max-width:fit-content}.redeem_status{background:orange;color:#fff}.active-status{background:#22c55e;color:#fff}.scheme-stats{display:flex;justify-content:space-between}.stat{text-align:center}.stat-value{font-size:20px;font-weight:700;color:#333}.stat-label{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px}.scheme-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.price-notice{background:#fce7f3;color:#be185d;padding:8px 12px;border-radius:6px;font-size:11px}.auto-pay{background:#fff3cd;padding:16px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-top:20px}.auto-pay-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.auto-pay-icon img{width:100%}.auto-pay-content{flex:1}.auto-pay-title{font-size:14px;font-weight:600;margin-bottom:4px}.auto-pay-desc{font-size:12px;color:#666}.manage-btn{background:none;border:1px solid #dee2e6;padding:6px 0;border-radius:4px;font-size:13px!important;cursor:pointer;display:flex;justify-content:space-evenly}.store-listing{font-size:14px;width:20%;height:30px;margin-bottom:13px;border:1px solid #e9ecef;border-radius:5px;outline:none;padding-left:5px;cursor:pointer}.fs-14{font-size:14px}.fs-12{font-size:12px}.logout-dialog-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;width:440px;max-width:90vw;padding:40px 32px 32px;border-radius:28px;box-shadow:0 25px 60px -15px #00000040,0 0 0 1px #0000000d;overflow:hidden;text-align:center;animation:modalPopIn .35s cubic-bezier(.16,1,.3,1) both}@keyframes modalPopIn{0%{opacity:0;transform:scale(.92) translateY(16px)}to{opacity:1;transform:scale(1) translateY(0)}}.logout-close-btn{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;border:none;background:#0000000d;color:#64748b;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;z-index:2}.logout-close-btn mat-icon{font-size:20px!important;height:20px!important;width:20px!important;line-height:20px!important}.logout-close-btn:hover{background:#0000001a;color:#0f172a;transform:rotate(90deg)}.logout-blob{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:0}.logout-blob-1{width:240px;height:240px;background:radial-gradient(circle,rgba(255,99,102,.18) 0%,transparent 70%);top:-60px;right:-60px;animation:blobFloat1 8s ease-in-out infinite}.logout-blob-2{width:200px;height:200px;background:radial-gradient(circle,rgba(255,165,80,.14) 0%,transparent 70%);bottom:-40px;left:-40px;animation:blobFloat2 10s ease-in-out infinite}@keyframes blobFloat1{0%,to{transform:translate(0) scale(1)}50%{transform:translate(-12px,16px) scale(1.06)}}@keyframes blobFloat2{0%,to{transform:translate(0) scale(1)}50%{transform:translate(10px,-14px) scale(1.04)}}.logout-icon-ring{position:relative;z-index:1;width:90px;height:90px;border-radius:50%;background:linear-gradient(135deg,#fff4e5,#ffe0e0);box-shadow:0 8px 30px #ff64642e,0 0 0 10px #ff646412;display:flex;align-items:center;justify-content:center;margin-bottom:24px}.logout-wave{font-size:42px;line-height:1;display:inline-block;animation:waveHand 1.6s ease-in-out infinite;transform-origin:70% 80%}@keyframes waveHand{0%,60%,to{transform:rotate(0)}10%,30%{transform:rotate(-14deg)}20%,40%{transform:rotate(10deg)}}.logout-title{position:relative;z-index:1;font-size:1.55rem;font-weight:700;color:#1a1a2e;margin:0 0 10px;letter-spacing:-.3px}.logout-subtitle{position:relative;z-index:1;font-size:.92rem;color:#64748b;line-height:1.6;margin:0 0 32px;max-width:320px}.logout-actions{position:relative;z-index:1;display:flex;gap:12px;width:100%;justify-content:center}.logout-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:1;padding:13px 20px;border-radius:12px;font-size:.95rem;font-weight:600;border:none;cursor:pointer;transition:all .25s cubic-bezier(.34,1.56,.64,1);letter-spacing:.2px}.logout-action-btn .logout-btn-icon{font-size:18px!important;height:18px!important;width:18px!important;line-height:18px!important}.logout-action-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #0000001f}.logout-action-btn:active{transform:translateY(0)}.btn-stay{background:#f1f5f9;color:#334155;border:1px solid #e2e8f0}.btn-stay:hover{background:#e2e8f0;border-color:#cbd5e1}.btn-confirm{color:#fff;border:1px solid transparent;box-shadow:0 4px 18px #0000002e}.btn-confirm:hover{filter:brightness(1.1);box-shadow:0 8px 24px #0000003d}\n"], dependencies: [{ 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: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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: 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.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: OrderDetailsComponent, selector: "simpo-order-details", inputs: ["responseData", "data", "index", "edit", "delete", "customClass", "orderDetailData"], outputs: ["goBackEmitter", "downloadReceiptEmitter"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData", "itemIndex"] }, { kind: "component", type: SchemeDetailsComponent, selector: "simpo-scheme-details", inputs: ["schemeDetails", "data", "metalPrice"], outputs: ["gotoSchemeOverview"] }, { kind: "component", type: ListHomeAppointmentComponent, selector: "simpo-list-home-appointment" }, { kind: "component", type: MyBookingsComponent, selector: "simpo-my-bookings", inputs: ["data"] }, { kind: "component", type: PassbookTransactionsComponent, selector: "simpo-passbook-transactions" }] }); }
|
|
23189
23330
|
}
|
|
23190
23331
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserProfileComponent, decorators: [{
|
|
23191
23332
|
type: Component,
|
|
@@ -23213,7 +23354,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
23213
23354
|
ListHomeAppointmentComponent,
|
|
23214
23355
|
MyBookingsComponent,
|
|
23215
23356
|
PassbookTransactionsComponent
|
|
23216
|
-
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [spacingHorizontal]=\"styles?.layout\" [ngStyle]=\"{'max-height': '100vh', 'z-index': isMobile ? '100000000' : ''}\"\r\n [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"p-4 profile-box\" style=\"width: 25%; border-radius: 20px; height: fit-content\"\r\n [style.order]=\"styles?.swap ? '1' : '0'\">\r\n\r\n <!-- Profile Header Section -->\r\n <div class=\"d-flex align-items-center profile-header\"\r\n style=\"gap: 15px; height: 80px; margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 15px; backdrop-filter: blur(10px);\">\r\n <div class=\"profile-image-wrapper\" style=\"position: relative;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100 profile-icon\"\r\n style=\"border: 3px solid #e3f2fd; transition: all 0.3s ease;\">\r\n <div class=\"online-indicator\"\r\n style=\"position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4caf50; border: 2px solid white; border-radius: 50%;\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"profile-details flex-grow-1\">\r\n <h4 class=\"font-weight-bold mb-2\" style=\"color: #2c3e50; font-size: 1.1rem; margin-bottom: 8px;\">\r\n {{getUserDetails?.contact?.name}}</h4>\r\n\r\n <div class=\"contact-info\" style=\"display: flex; flex-direction: column; gap: 6px;\">\r\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n *ngIf=\"getUserDetails?.contact?.mobile?.length\"\r\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">stay_primary_portrait</mat-icon>\r\n <span>{{getUserDetails?.contact?.mobile}}</span>\r\n </h6>\r\n\r\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n *ngIf=\"getUserDetails?.contact?.email?.length\"\r\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">mail_outline</mat-icon>\r\n <span class=\"w-100 text-overflow\">{{getUserDetails?.contact?.email}}</span>\r\n </h6>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Navigation Tabs Section -->\r\n <div class=\"tabs-container\" style=\"margin-bottom: 20px;\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center tab-item\"\r\n style=\"gap: 12px; cursor: pointer; padding: 16px 12px; margin: 2px 0; border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden;\"\r\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '1px solid rgba(0,0,0,0.06)' : ''\"\r\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\"\r\n [style.backgroundColor]=\"tab.status ? styles?.background?.color : 'transparent'\"\r\n [style.borderColor]=\"tab.status ? styles?.background?.accentColor : 'transparent'\">\r\n <div class=\"tab-icon-wrapper\"\r\n style=\"width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\">\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n style=\"height: 20px; width: 20px; object-fit: contain; transition: transform 0.3s ease;\">\r\n </div>\r\n\r\n <div class=\"tab-label font-weight-normal\" style=\"font-size: 0.9rem; transition: all 0.3s ease;\">\r\n {{tab.value}}</div>\r\n\r\n <!-- Hover effect background -->\r\n <div class=\"tab-hover-bg\"\r\n style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,123,255,0.05) 0%, rgba(0,123,255,0.02) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1;\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- Action Buttons Section -->\r\n <div class=\"d-flex action-buttons\"\r\n style=\"gap: 10px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.06);\">\r\n <button class=\"edit-btn flex-grow-1\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\"\r\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; background: transparent; border: 2px solid; transition: all 0.3s ease; position: relative; overflow: hidden;\">\r\n Edit Profile\r\n </button>\r\n\r\n <button class=\"logout-btn flex-grow-1\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\"\r\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; border: none; color: white; transition: all 0.3s ease;\">\r\n Logout\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"orders-sec\" [style.order]=\"styles?.swap ? '0' : '1'\">\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Details'\">\r\n <ng-container *ngTemplateOutlet=\"SchemeDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Transactions'\">\r\n <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n <simpo-list-home-appointment></simpo-list-home-appointment>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Bookings'\">\r\n <simpo-my-bookings></simpo-my-bookings>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Referrals'\">\r\n <ng-container *ngTemplateOutlet=\"Referrals\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Rewards'\">\r\n <ng-container *ngTemplateOutlet=\"Rewards\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <div class=\"w-100 position-relative mobile-height\" style=\"height: 80vh;\">\r\n <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\"\r\n *ngIf=\"selectedSidePanelTab != 'Scheme_Details'\">\r\n <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\"\r\n (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n </div>\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"''\">\r\n <section class=\"top-sec\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\"\r\n style=\"width: 50px; height: 50px;\">\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\">\r\n <mat-icon>stay_primary_portrait</mat-icon>\r\n <span>{{getUserDetails?.contact?.mobile}}</span>\r\n </h6>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\"\r\n *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon>\r\n <span>{{getUserDetails?.contact?.email}}</span>\r\n </h6>\r\n </div>\r\n </section>\r\n <section class=\"list-sec\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\"\r\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\"\r\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n [style.color]=\"styles?.background?.accentColor\">\r\n <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">\r\n {{tab.value}}</div>\r\n </div>\r\n\r\n </ng-container>\r\n </section>\r\n <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\r\n <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\">Logout</button>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Transactions'\">\r\n <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n <simpo-list-home-appointment></simpo-list-home-appointment>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Bookings'\">\r\n <simpo-my-bookings></simpo-my-bookings>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Referrals'\">\r\n <ng-container *ngTemplateOutlet=\"Referrals\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Rewards'\">\r\n <ng-container *ngTemplateOutlet=\"Rewards\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\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\r\n<ng-template #Referrals>\r\n <iframe [src]=\"getMyReferralsUrl\" frameborder=\"0\" width=\"100%\" height=\"100%\"></iframe>\r\n</ng-template>\r\n<ng-template #Rewards>\r\n <iframe [src]=\"getRewardsUrl\" frameborder=\"0\" width=\"100%\" height=\"100%\"></iframe>\r\n</ng-template>\r\n<ng-template #OrderSection>\r\n <h3 class=\"onlyDesktop mb-3\">My Orders</h3>\r\n <!-- <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n <ng-container *ngFor=\"let tab of tabs\">\r\n <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">\r\n {{tab.value}}</div>\r\n </ng-container>\r\n </div> -->\r\n <div class=\"order-list\">\r\n <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #showEmptyScreen>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\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]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <div class=\"cart-text \">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <div class=\"heading-medium d-flex justify-content-center content-side\"\r\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n <simpo-text-editor [(value)]=\"text.value\"\r\n [editable]=\"edit || false\" [isRTE]=\"text.isRTE\"></simpo-text-editor>\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\"\r\n (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n <div class=\"d-flex justify-content-between mb-2\">\r\n <h3 class=\"title-text\">My Address</h3>\r\n <button class=\"address-btn\" (click)=\"addNewAddress()\"\r\n [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n <div class=\"address-list\">\r\n <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\r\n <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n <div class=\"card border-0 mb-2 cursor-pointer order-card \" [style.width]=\"getProductWidth\">\r\n <div class=\"card-body p-3\">\r\n <!-- Header Section -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n <div class=\"address-info d-flex align-items-center justify-content-between w-100\">\r\n <h4 class=\"mb-0 fw-semibold\">{{address.receiverName}}</h4>\r\n <div class=\"icon-grp d-flex\">\r\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n (click)=\"editAddress(idx)\">edit</mat-icon>\r\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"address-content mb-3\">\r\n <div class=\"address-line mb-2\">\r\n <span class=\"text-muted small d-block\">Address</span>\r\n <span class=\"address-text\">{{address.addressLine1}}</span>\r\n </div>\r\n <div class=\"phone-info\">\r\n <span class=\"text-muted small d-block\">Phone</span>\r\n <span class=\"phone-number fw-bold\">{{address.receiverPhone}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-template #showEmptyAddress>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\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=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\r\n <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery\r\n </div>\r\n <!-- </ng-container> -->\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n <h3 class=\"onlyDesktop\">My Accounts</h3>\r\n</ng-template>\r\n<ng-template #logoutDialog>\r\n <div class=\"logout-dialog-card\">\r\n <!-- Decorative blobs -->\r\n <div class=\"logout-blob logout-blob-1\"></div>\r\n <div class=\"logout-blob logout-blob-2\"></div>\r\n\r\n <!-- Close Button -->\r\n <button class=\"logout-close-btn\" (click)=\"closeDialog()\" aria-label=\"Close\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n\r\n <!-- Wave icon -->\r\n <div class=\"logout-icon-ring\">\r\n <span class=\"logout-wave\">\uD83D\uDC4B</span>\r\n </div>\r\n\r\n <!-- Copy -->\r\n <h2 class=\"logout-title\">See you soon, {{getUserDetails?.contact?.name?.split(' ')?.[0] || 'Friend'}}!</h2>\r\n <p class=\"logout-subtitle\">\r\n We'll keep everything safe while you're away.<br>\r\n Come back anytime \u2014 we'll be right here. \uD83D\uDE0A\r\n </p>\r\n\r\n <!-- Actions -->\r\n <div class=\"logout-actions\">\r\n <button class=\"logout-action-btn btn-stay\" (click)=\"closeDialog()\">\r\n <mat-icon class=\"logout-btn-icon\">arrow_back</mat-icon>\r\n Stay\r\n </button>\r\n <button class=\"logout-action-btn btn-confirm\"\r\n [style.background]=\"styles?.background?.accentColor\"\r\n (click)=\"closeDialog(); _doLogout()\">\r\n <mat-icon class=\"logout-btn-icon\">logout</mat-icon>\r\n Yes, Logout\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n <ng-container *ngTemplateOutlet=\"logoutDialog\"></ng-container>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n <div (click)=\"goToOrderDetails(order)\" class=\"card border-0 mb-2 cursor-pointer order-card\">\r\n <div class=\"card-body p-3\" [style.--background-color]=\"styles?.background?.color\">\r\n <!-- Header Section -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n <div class=\"order-number\">\r\n <h4 class=\"mb-0 fw-semibold\">{{\"Order\" + \" \" + order.orderNum}}</h4>\r\n </div>\r\n <div class=\"arrow-icon\">\r\n <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"ordered-item row mb-2\">\r\n <ng-container *ngFor=\"let item of getOrderedItems(order)\">\r\n <div class=\"item-card col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img [src]=\"item?.imgUrl\" alt=\"Product Image\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"item-img w-50\">\r\n <div class=\"cart-item-name\">{{item?.itemName}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <!-- Middle Section -->\r\n <div class=\"order-details\">\r\n <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-1\">\r\n <span class=\"text-muted small mb-3 mb-sm-0\">\r\n {{order.createdTimeStamp | date: 'dd MMMM yyyy'}}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"amount-section\">\r\n <span class=\"h5 mb-0 text-success fw-bold\">\r\n <span [innerHTML]=\"currency\"></span>\r\n <!-- {{(order.billDetails.discountAmount ?\r\n (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +\r\n order?.billDetails?.totalTaxAfterDiscount) :\r\n order.billDetails.totalGrossValue) | number:'1.0-2'}} -->\r\n {{getTotalAmtPaid(order) | number:'1.0-2'}}\r\n </span>\r\n </div>\r\n <div class=\"status-section\">\r\n <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">\r\n {{order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | titlecase}}\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mt-1\" *ngIf=\"order.rewardUsed === 'REWARD_POINTS'\">\r\n <div class=\"fs-14 text-secondary\">\r\n Amount Paid -\r\n <span class=\"text-success fw-bold\">\u20B9 {{ getTotalAmtPaid(order) === order.pointsConvertedINR ? '0' :\r\n (getTotalAmtPaid(order) - order.pointsConvertedINR) }}</span>\r\n </div>\r\n <div class=\"fs-14 text-secondary\">\r\n Rewarded Amount - <span class=\"text-success fw-bold\">\u20B9 {{order.pointsConvertedINR}}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mt-1\" *ngIf=\"order.rewardUsed === 'VOUCHER'\">\r\n <div class=\"fs-14 text-secondary\">\r\n Amount Paid -\r\n <span class=\"text-success fw-bold\">\u20B9 {{ getTotalAmtPaid(order) === order.voucherValue ? '0' :\r\n (getTotalAmtPaid(order) - order.voucherValue) }}</span>\r\n </div>\r\n <div class=\"fs-14 text-secondary\">\r\n Rewarded Amount - <span class=\"text-success fw-bold\">\u20B9 {{order.voucherValue}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #WishlistDetails>\r\n <h3 class=\"onlyDesktop\">My Wishlist</h3>\r\n <div class=\"wishlist-list\" *ngIf=\"wishlistData?.length; else showEmptyWishlistScreen\">\r\n <div class=\"d-flex flex-wrap\" style=\"gap: 10px;\">\r\n <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n <div class=\"address-card mb-2\">\r\n <div class=\"card-body p-4\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-auto\">\r\n <div class=\"product-image-wrapper\">\r\n <img loading=\"lazy\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"product-img rounded\" [src]=\"item.imgUrl\" alt=\"Product Image\">\r\n </div>\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"product-details\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div\r\n class=\"col-auto text-end d-flex justify-content-between align-items-center w-100\">\r\n <h6 class=\"product-name mb-2 fw-semibold text-dark\">\r\n {{item.itemName}}\r\n </h6>\r\n <div class=\"delete-action\" *ngIf=\"!isMobile\">\r\n <button class=\"btn btn-sm delete-btn\" (click)=\"deleteFromWhislist(item)\"\r\n title=\"Remove from wishlist\">\r\n <mat-icon class=\"small-icon\">delete</mat-icon>\r\n </button>\r\n </div>\r\n <div class=\"delete-action mt-2\" *ngIf=\"isMobile\">\r\n <button class=\"btn btn-sm w-100\" (click)=\"deleteFromWhislist(item)\">\r\n <mat-icon class=\"small-icon me-1\">delete</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"product-price mb-3\">\r\n <span class=\"h5 text-success fw-bold mb-0\">\r\n <span [innerHTML]='currency'></span>{{item.discountedPrice}}\r\n </span>\r\n <span class=\"text-muted small ms-2\" *ngIf=\"item.quantity\">\r\n ({{item.quantity}} items)\r\n </span>\r\n </div>\r\n <div class=\"action-buttons d-flex gap-2\">\r\n <div class=\"quantity-controls d-flex align-items-center w-50 justify-content-center\"\r\n *ngIf=\"item.quantity\">\r\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n (click)=\"addToFav(item, 'SUBSTRACT')\">\r\n -\r\n </button>\r\n <span class=\"quantity-display px-3 py-1 bg-light rounded mx-1\">\r\n {{item.quantity}}\r\n </span>\r\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n (click)=\"addToFav(item, 'ADD')\"> +\r\n </button>\r\n </div>\r\n <button class=\"btn btn-sm w-50\" *ngIf=\"!item.quantity\"\r\n (click)=\"addToFav(item, 'ADD')\">\r\n + Add Quantity\r\n </button>\r\n <button class=\"btn btn-sm w-50\" (click)=\"moveToCart(item)\">\r\n Move to Cart\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n <ng-template #showEmptyWishlistScreen>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\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]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container>\r\n <div class=\"heading-medium d-flex justify-content-center\">\r\n Your Wishlist is Empty</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #SchemeDetails>\r\n <div class=\"header mb-3 f-18 fw-600\">Current Scheme Enrollments - 4</div>\r\n <div class=\"row gap-2\">\r\n <ng-container *ngFor=\"let scheme of [1,1,1,1]\">\r\n <div class=\"cards d-flex flex-column w-32 mb-2 p-0 \">\r\n <div class=\"card-header row gap-2\">\r\n <div class=\"card-head-left col-7\">\r\n <div class=\"scheme-type fs-15 fw-600\">Group Investment Scheme</div>\r\n <div class=\"scheme-id fw-600\">GIS6K_000231004</div>\r\n </div>\r\n <div class=\"card-head-right col-4 text-center align-content-center\">\r\n <div class=\"scheme-amount fw-600\">\u20B96,000/M</div>\r\n </div>\r\n </div>\r\n <div class=\"card-body d-flex p-0 mb-3\">\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/425719c1752566628577star.png\" alt=\"\"\r\n class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">\u20B913,800</div>\r\n <div class=\"card-sub-text text-center\">Total Acheived</div>\r\n </div>\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/229997c1752567131192brand_7959220.png\"\r\n alt=\"\" class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">\u20B91,000</div>\r\n <div class=\"card-sub-text text-center\">Rewards</div>\r\n </div>\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/760761c1752567279970calendar (1).png\"\r\n alt=\"\" class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">8</div>\r\n <div class=\"card-sub-text text-center\">Due Months</div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer row\">\r\n <div class=\"col-6 d-flex gap-2 p-0\">\r\n <span class=\"footer-text text-nowrap\">Start On :</span><span class=\"date-text text-nowrap\">30\r\n may 2025</span>\r\n </div>\r\n <div class=\"col-6 d-flex gap-2 p-0\">\r\n <span class=\"footer-text text-nowrap\">Maturity On :</span><span class=\"date-text text-nowrap\">25\r\n may 2026</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n<ng-template #SchemePassbook>\r\n <div class=\"w-100 h-100 overflow-scroll passbook_container\">\r\n <div class=\"header d-flex flex-column\">\r\n <div class=\"d-flex align-items-center justify-content-end mb-3\" *ngIf=\"storeListing.length >= 2\"><select\r\n class=\"store-listing\" (change)=\"changeStore($event)\">\r\n <option value=\"\">Select Store</option>\r\n <option [value]=\"store.id\" *ngFor=\"let store of storeListing\">{{store.storeName}}</option>\r\n </select></div>\r\n <div class=\"scheme-overview d-flex flex-column\">\r\n <div class=\"d-flex gap-2\">\r\n <div class=\"available-savings\">\r\n <div class=\"d-flex align-items-center gap-1 w-100 justify-content-between\">\r\n <h3>Available Savings</h3>\r\n <span class=\"amount_logo\">\uD83D\uDCB0</span>\r\n </div>\r\n\r\n <div class=\"amount\">{{totalSavings ? totalSavings :\r\n '0'}}</div>\r\n </div>\r\n <div class=\"active-schemes\">\r\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n <h3>Active Passbooks</h3>\r\n <div class=\"auto-pay-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\r\n </div>\r\n </div>\r\n <div class=\"scheme-count\">{{totalSchemes?.length ?\r\n totalSchemes.length : '0'}}</div>\r\n <div class=\"subtitle\">On Track</div>\r\n </div>\r\n <div class=\"active-schemes\" *ngIf=\"totalAccumulatedGold > 0\">\r\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n <h3>Accumulated Gold </h3>\r\n <div class=\"auto-pay-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/153448c1756808418216accumulated_icon.png\">\r\n </div>\r\n </div>\r\n <div class=\"scheme-count\">{{totalAccumulatedGold}} gms</div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"overAllDues?.length\">\r\n <div class=\"section d-flex-flex-column gap-2\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Due Payments</h2>\r\n </div>\r\n <div class=\"payment-list d-flex flex-column gap-2\">\r\n <ng-container *ngIf=\"overAllDues?.length; else showEmptyPayment\">\r\n <div class=\"payment-item overdue\" *ngFor=\"let payment of overAllDues\">\r\n <div class=\"payment-info\">\r\n <div class=\"payment-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/403142c1753435378127Background.svg\">\r\n <!-- <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\"\r\n *ngIf=\"!payment.overdueStatus && payment.paymentStatus === 'PAID'\"> -->\r\n </div>\r\n <div class=\"payment-details\">\r\n <h4>{{payment.schemeName}} - {{payment.emiMonthCount}}rd EMI</h4>\r\n <span>Date {{payment.dueDate ? (payment.dueDate | date:'dd-MM-yyyy') :\r\n 'N/A'}}\r\n <!-- <span *ngIf=\"payment.overdueStatus\">| Due by: {{payment.daysOverdue\r\n ? payment.daysOverdue : 0}}</span> --></span>\r\n </div>\r\n </div>\r\n <div class=\"payment-amount\">\r\n <div class=\"amount-value\">\u20B9{{payment.dueAmount ? payment.dueAmount :\r\n '0'}}\r\n </div>\r\n <div class=\"payment-status overdue-status cursor-pointer\"\r\n (click)=\"payDue(payment)\">\r\n <ng-container *ngIf=\"!payDueLoader\">Pay Now</ng-container>\r\n <ng-container *ngIf=\"payDueLoader\">Loading...</ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #showEmptyPayment>\r\n <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n <span>No Due Payments</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"section mt-3\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Your Active Passbooks</h2>\r\n </div>\r\n\r\n <div class=\"schemes-grid\">\r\n <ng-container *ngIf=\"totalSchemes && totalSchemes.length > 0; else showActiveScheme\">\r\n <div class=\"scheme-card d-flex flex-column gap-2 cursor-pointer\"\r\n *ngFor=\"let scheme of totalSchemes; let i = index\" (click)=\"viewSchemeDetails(scheme)\">\r\n <div class=\"scheme-header\">\r\n <div>\r\n <div class=\"scheme-title\">{{ scheme?.schemeName || 'N/A' }}</div>\r\n <div class=\"scheme-amount\">\u20B9{{ scheme?.installmentAmount || '0' }}/Monthly</div>\r\n </div>\r\n <div class=\"scheme-date\">\r\n <span>Enrolled: {{ scheme?.createdTimestamp ? (scheme?.createdTimestamp |\r\n date:'dd-MM-yyyy') :\r\n 'N/A' }}</span>\r\n <!-- <span>Maturity: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n 'N/A' }}</span> -->\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-status d-flex justify-content-center align-items-center\"\r\n [ngClass]=\"scheme?.passBookStatus === 'REDEEM_REQUESTED' ? 'redeem_status' : (scheme?.passBookStatus === 'ACTIVE' ? 'active-status' : 'redeem_status')\">\r\n {{\r\n scheme.passBookStatus ? scheme.passBookStatus.replaceAll('_', ' ') : 'N/A'\r\n }}\r\n </div>\r\n\r\n <div class=\"scheme-stats\">\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">{{ scheme?.totalPaidAmount || '0' }}</div>\r\n <div class=\"stat-label\">Deposited Amount</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">\r\n {{\r\n scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n (scheme?.schemePayments?.length -\r\n scheme.dueMonths) : 'N/A'\r\n }}\r\n </div>\r\n <div class=\"stat-label\">Paid Months</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">{{scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n scheme?.dueMonths : 'N/A' }}</div>\r\n <div class=\"stat-label\">Due Months</div>\r\n </div>\r\n <div class=\"stat\" *ngIf=\"scheme?.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"stat-value\">{{ scheme?.totalInvestedMetal || '0' }} gms</div>\r\n <div class=\"stat-label\">Accumulated Gold</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-footer\">\r\n <span>Maturity Date: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n 'N/A' }}</span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #showActiveScheme>\r\n <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n <span>No Active Scheme</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n <!-- <div class=\"auto-pay\">\r\n <div class=\"auto-pay-icon mobile-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/966462c1753439662355Background.png\"></div>\r\n <div class=\"auto-pay-content\">\r\n <div class=\"auto-pay-title\">Manage Auto-pay</div>\r\n <div class=\"auto-pay-desc\">Pause, resume or cancel auto payment subscription</div>\r\n </div>\r\n <button class=\"manage-btn\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/409230c1753439564830SVG.png\"> Manage</button>\r\n </div> -->\r\n </div>\r\n</ng-template>\r\n<ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #Scheme_Details>\r\n <simpo-scheme-details [schemeDetails]=\"schemeDetails\" [data]=\"data\" [metalPrice]=\"metalPrice\"\r\n (gotoSchemeOverview)=\"selectedSidePanelTab = 'Scheme Passbook'\"></simpo-scheme-details>\r\n</ng-template>\r\n<ng-template #Transactions>\r\n <simpo-passbook-transactions></simpo-passbook-transactions>\r\n</ng-template>\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>", styles: [".total-container{position:relative;height:auto;overflow:scroll;background:#fff!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;padding:15px;overflow-y:auto;overflow-x:hidden;max-height:80vh}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}h1{font-weight:600}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.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:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.amount_logo{font-size:27px}@media screen and (max-width: 475px){.store-listing{width:35%!important}.total-container{height:100%!important}.amount_logo{font-size:27px}.amount,.scheme-count{font-size:20px!important}.title-text{font-size:24px}.schemes-grid{flex-wrap:wrap;overflow-y:scroll;height:95%}.section{height:auto}.scheme-status{white-space:nowrap}.scheme-card{width:100%}.header{flex-direction:column-reverse}.scheme-overview{width:100%!important}.scheme-overview div{flex-wrap:wrap}.available-savings h3{font-size:17px!important}.quick-actions{width:100%}.active-schemes h3{font-size:17px!important}.auto-pay-icon{width:55px!important;height:50px!important}.mobile-icon{width:30px!important}.manage-btn{width:25%!important}.tab-selected div{font-weight:600!important}.mobile-height{height:100%!important}.passbook_container{height:90%!important;overflow-x:scroll!important}.passbook_container .section{max-height:unset!important;padding:10px!important}.section-header{margin-bottom:2px!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;border:none;padding:10px 5px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.list-sec .tab-selected{border-top-left-radius:10px!important;border-bottom-left-radius:10px;border:none}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:0 10px;width:100vw;margin-bottom:20px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.profile-icon{width:70px}.text-overflow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width:1200px) and (max-width: 1330px){.profile-details{width:75%!important}}@media screen and (min-width:1200px){.manage-btn{width:10%!important}}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}.cards{box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;border-radius:12px}.cards .card-header{padding:8px}.cards .card-header .card-head .scheme-type{font-size:15px}.cards .card-body .col-4 .card-sub-text{font-size:14px}.cards .card-footer{border-top:2px dashed!important;margin:0 5px;padding:10px}.cards .card-footer span{font-size:13px}.cards .card-footer .date-text{font-weight:600}.cards .card-footer div{font-size:15px}.fs-15{font-size:14px}.w-32{width:32.5%!important}.w-40{width:40px!important}.f-18{font-size:18px}.fw-600{font-weight:600}.scheme-id{font-size:13px}.order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.cart-item-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa);width:49%}.address-card .card-body{position:relative;overflow:hidden}.address-text{color:#495057;line-height:1.4}.btn-sm{transition:all .3s ease}.small-icon{font-size:16px!important}.badge.bg-light{color:#495057!important;background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;border:1px solid #dee2e6}@media (max-width: 576px){.address-card .card-body{padding:1rem!important}.address-card{width:100%!important}.btn-sm{display:flex;justify-content:center;align-items:center;color:red!important}.btn-sm mat-icon{font-size:13px}.btn-sm{width:100%;margin-bottom:.25rem}}.profile-box{transition:all .3s ease;position:relative}.tab-item:hover img{transform:scale(1.1)}.tab-selected{border-left:4px solid;font-weight:600!important;border-bottom:unset!important}.tab-selected .tab-label{font-weight:600!important}.tabs-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.tabs-container::-webkit-scrollbar{width:4px}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-box{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.profile-box{width:100%!important}.profile-header{flex-direction:column;height:auto!important;text-align:center}.action-buttons{flex-direction:column}}.scheme-overview{gap:20px;width:100%}.available-savings{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:20px;border-radius:12px;position:relative;flex:1}.available-savings .amount{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.available-savings h3{font-size:14px;color:#856404;margin-bottom:8px;font-weight:500}.subtitle{font-size:12px;color:#666}.active-schemes{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;position:relative;flex:1}.active-schemes h3{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.scheme-count{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e9ecef;max-height:40vh;overflow-x:scroll}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:18px;font-weight:600}.view-all{color:#6c5ce7;font-size:16px}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.overdue{background:#fef2f2;border:1px solid #FECACA}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.upcoming{background:#f8f9fa;color:#666}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.payment-status{font-size:12px;padding:4px 8px;border-radius:4px;color:#fff;white-space:nowrap}.overdue-status{background:#dc3545}.upcoming-status{background:#6c757d}.schemes-grid{display:flex;gap:10px;overflow-x:scroll}.scheme-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e9ecef;position:relative;min-width:34vw}.scheme-header{display:flex;justify-content:space-between;align-items:flex-start}.scheme-title{font-size:16px;font-weight:600;margin-bottom:4px}.scheme-amount{font-size:12px;color:#666}.scheme-date{font-size:12px;color:#666;display:flex;flex-direction:column;gap:10px}.scheme-status{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;text-transform:uppercase;min-width:15%;max-width:fit-content}.redeem_status{background:orange;color:#fff}.active-status{background:#22c55e;color:#fff}.scheme-stats{display:flex;justify-content:space-between}.stat{text-align:center}.stat-value{font-size:20px;font-weight:700;color:#333}.stat-label{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px}.scheme-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.price-notice{background:#fce7f3;color:#be185d;padding:8px 12px;border-radius:6px;font-size:11px}.auto-pay{background:#fff3cd;padding:16px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-top:20px}.auto-pay-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.auto-pay-icon img{width:100%}.auto-pay-content{flex:1}.auto-pay-title{font-size:14px;font-weight:600;margin-bottom:4px}.auto-pay-desc{font-size:12px;color:#666}.manage-btn{background:none;border:1px solid #dee2e6;padding:6px 0;border-radius:4px;font-size:13px!important;cursor:pointer;display:flex;justify-content:space-evenly}.store-listing{font-size:14px;width:20%;height:30px;margin-bottom:13px;border:1px solid #e9ecef;border-radius:5px;outline:none;padding-left:5px;cursor:pointer}.fs-14{font-size:14px}.fs-12{font-size:12px}.logout-dialog-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;width:440px;max-width:90vw;padding:40px 32px 32px;border-radius:28px;box-shadow:0 25px 60px -15px #00000040,0 0 0 1px #0000000d;overflow:hidden;text-align:center;animation:modalPopIn .35s cubic-bezier(.16,1,.3,1) both}@keyframes modalPopIn{0%{opacity:0;transform:scale(.92) translateY(16px)}to{opacity:1;transform:scale(1) translateY(0)}}.logout-close-btn{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;border:none;background:#0000000d;color:#64748b;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;z-index:2}.logout-close-btn mat-icon{font-size:20px!important;height:20px!important;width:20px!important;line-height:20px!important}.logout-close-btn:hover{background:#0000001a;color:#0f172a;transform:rotate(90deg)}.logout-blob{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:0}.logout-blob-1{width:240px;height:240px;background:radial-gradient(circle,rgba(255,99,102,.18) 0%,transparent 70%);top:-60px;right:-60px;animation:blobFloat1 8s ease-in-out infinite}.logout-blob-2{width:200px;height:200px;background:radial-gradient(circle,rgba(255,165,80,.14) 0%,transparent 70%);bottom:-40px;left:-40px;animation:blobFloat2 10s ease-in-out infinite}@keyframes blobFloat1{0%,to{transform:translate(0) scale(1)}50%{transform:translate(-12px,16px) scale(1.06)}}@keyframes blobFloat2{0%,to{transform:translate(0) scale(1)}50%{transform:translate(10px,-14px) scale(1.04)}}.logout-icon-ring{position:relative;z-index:1;width:90px;height:90px;border-radius:50%;background:linear-gradient(135deg,#fff4e5,#ffe0e0);box-shadow:0 8px 30px #ff64642e,0 0 0 10px #ff646412;display:flex;align-items:center;justify-content:center;margin-bottom:24px}.logout-wave{font-size:42px;line-height:1;display:inline-block;animation:waveHand 1.6s ease-in-out infinite;transform-origin:70% 80%}@keyframes waveHand{0%,60%,to{transform:rotate(0)}10%,30%{transform:rotate(-14deg)}20%,40%{transform:rotate(10deg)}}.logout-title{position:relative;z-index:1;font-size:1.55rem;font-weight:700;color:#1a1a2e;margin:0 0 10px;letter-spacing:-.3px}.logout-subtitle{position:relative;z-index:1;font-size:.92rem;color:#64748b;line-height:1.6;margin:0 0 32px;max-width:320px}.logout-actions{position:relative;z-index:1;display:flex;gap:12px;width:100%;justify-content:center}.logout-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:1;padding:13px 20px;border-radius:12px;font-size:.95rem;font-weight:600;border:none;cursor:pointer;transition:all .25s cubic-bezier(.34,1.56,.64,1);letter-spacing:.2px}.logout-action-btn .logout-btn-icon{font-size:18px!important;height:18px!important;width:18px!important;line-height:18px!important}.logout-action-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #0000001f}.logout-action-btn:active{transform:translateY(0)}.btn-stay{background:#f1f5f9;color:#334155;border:1px solid #e2e8f0}.btn-stay:hover{background:#e2e8f0;border-color:#cbd5e1}.btn-confirm{color:#fff;border:1px solid transparent;box-shadow:0 4px 18px #0000002e}.btn-confirm:hover{filter:brightness(1.1);box-shadow:0 8px 24px #0000003d}\n"] }]
|
|
23357
|
+
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [spacingHorizontal]=\"styles?.layout\" [ngStyle]=\"{'max-height': '100vh', 'z-index': isMobile ? '100000000' : ''}\"\r\n [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"p-4 profile-box\" style=\"width: 25%; border-radius: 20px; height: fit-content\"\r\n [style.order]=\"styles?.swap ? '1' : '0'\">\r\n\r\n <!-- Profile Header Section -->\r\n <div class=\"d-flex align-items-center profile-header\"\r\n style=\"gap: 15px; height: 80px; margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 15px; backdrop-filter: blur(10px);\">\r\n <div class=\"profile-image-wrapper\" style=\"position: relative;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100 profile-icon\"\r\n style=\"border: 3px solid #e3f2fd; transition: all 0.3s ease;\">\r\n <div class=\"online-indicator\"\r\n style=\"position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4caf50; border: 2px solid white; border-radius: 50%;\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"profile-details flex-grow-1\">\r\n <h4 class=\"font-weight-bold mb-2\" style=\"color: #2c3e50; font-size: 1.1rem; margin-bottom: 8px;\">\r\n {{getUserDetails?.contact?.name}}</h4>\r\n\r\n <div class=\"contact-info\" style=\"display: flex; flex-direction: column; gap: 6px;\">\r\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n *ngIf=\"getUserDetails?.contact?.mobile?.length\"\r\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">stay_primary_portrait</mat-icon>\r\n <span>{{getUserDetails?.contact?.mobile}}</span>\r\n </h6>\r\n\r\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n *ngIf=\"getUserDetails?.contact?.email?.length\"\r\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">mail_outline</mat-icon>\r\n <span class=\"w-100 text-overflow\">{{getUserDetails?.contact?.email}}</span>\r\n </h6>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Navigation Tabs Section -->\r\n <div class=\"tabs-container\" style=\"margin-bottom: 20px;\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center tab-item\"\r\n style=\"gap: 12px; cursor: pointer; padding: 16px 12px; margin: 2px 0; border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden;\"\r\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '1px solid rgba(0,0,0,0.06)' : ''\"\r\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\"\r\n [style.backgroundColor]=\"tab.status ? styles?.background?.color : 'transparent'\"\r\n [style.borderColor]=\"tab.status ? styles?.background?.accentColor : 'transparent'\">\r\n <div class=\"tab-icon-wrapper\"\r\n style=\"width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\">\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n style=\"height: 20px; width: 20px; object-fit: contain; transition: transform 0.3s ease;\">\r\n </div>\r\n\r\n <div class=\"tab-label font-weight-normal\" style=\"font-size: 0.9rem; transition: all 0.3s ease;\">\r\n {{tab.value}}</div>\r\n\r\n <!-- Hover effect background -->\r\n <div class=\"tab-hover-bg\"\r\n style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,123,255,0.05) 0%, rgba(0,123,255,0.02) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1;\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- Action Buttons Section -->\r\n <div class=\"d-flex action-buttons\"\r\n style=\"gap: 10px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.06);\">\r\n <button class=\"edit-btn flex-grow-1\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\"\r\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; background: transparent; border: 2px solid; transition: all 0.3s ease; position: relative; overflow: hidden;\">\r\n Edit Profile\r\n </button>\r\n\r\n <button class=\"logout-btn flex-grow-1\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\"\r\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; border: none; color: white; transition: all 0.3s ease;\">\r\n Logout\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"orders-sec\" [style.order]=\"styles?.swap ? '0' : '1'\">\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Details'\">\r\n <ng-container *ngTemplateOutlet=\"SchemeDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Transactions'\">\r\n <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n <simpo-list-home-appointment></simpo-list-home-appointment>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Bookings'\">\r\n <simpo-my-bookings [data]=\"data\"></simpo-my-bookings>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Referrals'\">\r\n <ng-container *ngTemplateOutlet=\"Referrals\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Rewards'\">\r\n <ng-container *ngTemplateOutlet=\"Rewards\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <div class=\"w-100 position-relative mobile-height\" style=\"height: 80vh;\">\r\n <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\"\r\n *ngIf=\"selectedSidePanelTab != 'Scheme_Details'\">\r\n <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\"\r\n (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n </div>\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"''\">\r\n <section class=\"top-sec\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\"\r\n style=\"width: 50px; height: 50px;\">\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\">\r\n <mat-icon>stay_primary_portrait</mat-icon>\r\n <span>{{getUserDetails?.contact?.mobile}}</span>\r\n </h6>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\"\r\n *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon>\r\n <span>{{getUserDetails?.contact?.email}}</span>\r\n </h6>\r\n </div>\r\n </section>\r\n <section class=\"list-sec\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\"\r\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\"\r\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n [style.color]=\"styles?.background?.accentColor\">\r\n <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">\r\n {{tab.value}}</div>\r\n </div>\r\n\r\n </ng-container>\r\n </section>\r\n <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\r\n <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\">Logout</button>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Transactions'\">\r\n <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n <simpo-list-home-appointment></simpo-list-home-appointment>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Bookings'\">\r\n <simpo-my-bookings [data]=\"data\"></simpo-my-bookings>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Referrals'\">\r\n <ng-container *ngTemplateOutlet=\"Referrals\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Rewards'\">\r\n <ng-container *ngTemplateOutlet=\"Rewards\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\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\r\n<ng-template #Referrals>\r\n <iframe [src]=\"getMyReferralsUrl\" frameborder=\"0\" width=\"100%\" height=\"100%\"></iframe>\r\n</ng-template>\r\n<ng-template #Rewards>\r\n <iframe [src]=\"getRewardsUrl\" frameborder=\"0\" width=\"100%\" height=\"100%\"></iframe>\r\n</ng-template>\r\n<ng-template #OrderSection>\r\n <h3 class=\"onlyDesktop mb-3\">My Orders</h3>\r\n <!-- <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n <ng-container *ngFor=\"let tab of tabs\">\r\n <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">\r\n {{tab.value}}</div>\r\n </ng-container>\r\n </div> -->\r\n <div class=\"order-list\">\r\n <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #showEmptyScreen>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\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]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <div class=\"cart-text \">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <div class=\"heading-medium d-flex justify-content-center content-side\"\r\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n <simpo-text-editor [(value)]=\"text.value\"\r\n [editable]=\"edit || false\" [isRTE]=\"text.isRTE\"></simpo-text-editor>\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\"\r\n (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n <div class=\"d-flex justify-content-between mb-2\">\r\n <h3 class=\"title-text\">My Address</h3>\r\n <button class=\"address-btn\" (click)=\"addNewAddress()\"\r\n [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n <div class=\"address-list\">\r\n <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\r\n <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n <div class=\"card border-0 mb-2 cursor-pointer order-card \" [style.width]=\"getProductWidth\">\r\n <div class=\"card-body p-3\">\r\n <!-- Header Section -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n <div class=\"address-info d-flex align-items-center justify-content-between w-100\">\r\n <h4 class=\"mb-0 fw-semibold\">{{address.receiverName}}</h4>\r\n <div class=\"icon-grp d-flex\">\r\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n (click)=\"editAddress(idx)\">edit</mat-icon>\r\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"address-content mb-3\">\r\n <div class=\"address-line mb-2\">\r\n <span class=\"text-muted small d-block\">Address</span>\r\n <span class=\"address-text\">{{address.addressLine1}}</span>\r\n </div>\r\n <div class=\"phone-info\">\r\n <span class=\"text-muted small d-block\">Phone</span>\r\n <span class=\"phone-number fw-bold\">{{address.receiverPhone}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-template #showEmptyAddress>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\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=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\r\n <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery\r\n </div>\r\n <!-- </ng-container> -->\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n <h3 class=\"onlyDesktop\">My Accounts</h3>\r\n</ng-template>\r\n<ng-template #logoutDialog>\r\n <div class=\"logout-dialog-card\">\r\n <!-- Decorative blobs -->\r\n <div class=\"logout-blob logout-blob-1\"></div>\r\n <div class=\"logout-blob logout-blob-2\"></div>\r\n\r\n <!-- Close Button -->\r\n <button class=\"logout-close-btn\" (click)=\"closeDialog()\" aria-label=\"Close\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n\r\n <!-- Wave icon -->\r\n <div class=\"logout-icon-ring\">\r\n <span class=\"logout-wave\">\uD83D\uDC4B</span>\r\n </div>\r\n\r\n <!-- Copy -->\r\n <h2 class=\"logout-title\">See you soon, {{getUserDetails?.contact?.name?.split(' ')?.[0] || 'Friend'}}!</h2>\r\n <p class=\"logout-subtitle\">\r\n We'll keep everything safe while you're away.<br>\r\n Come back anytime \u2014 we'll be right here. \uD83D\uDE0A\r\n </p>\r\n\r\n <!-- Actions -->\r\n <div class=\"logout-actions\">\r\n <button class=\"logout-action-btn btn-stay\" (click)=\"closeDialog()\">\r\n <mat-icon class=\"logout-btn-icon\">arrow_back</mat-icon>\r\n Stay\r\n </button>\r\n <button class=\"logout-action-btn btn-confirm\"\r\n [style.background]=\"styles?.background?.accentColor\"\r\n (click)=\"closeDialog(); _doLogout()\">\r\n <mat-icon class=\"logout-btn-icon\">logout</mat-icon>\r\n Yes, Logout\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n <ng-container *ngTemplateOutlet=\"logoutDialog\"></ng-container>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n <div (click)=\"goToOrderDetails(order)\" class=\"card border-0 mb-2 cursor-pointer order-card\">\r\n <div class=\"card-body p-3\" [style.--background-color]=\"styles?.background?.color\">\r\n <!-- Header Section -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n <div class=\"order-number\">\r\n <h4 class=\"mb-0 fw-semibold\">{{\"Order\" + \" \" + order.orderNum}}</h4>\r\n </div>\r\n <div class=\"arrow-icon\">\r\n <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"ordered-item row mb-2\">\r\n <ng-container *ngFor=\"let item of getOrderedItems(order)\">\r\n <div class=\"item-card col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img [src]=\"item?.imgUrl\" alt=\"Product Image\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"item-img w-50\">\r\n <div class=\"cart-item-name\">{{item?.itemName}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <!-- Middle Section -->\r\n <div class=\"order-details\">\r\n <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-1\">\r\n <span class=\"text-muted small mb-3 mb-sm-0\">\r\n {{order.createdTimeStamp | date: 'dd MMMM yyyy'}}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"amount-section\">\r\n <span class=\"h5 mb-0 text-success fw-bold\">\r\n <span [innerHTML]=\"currency\"></span>\r\n <!-- {{(order.billDetails.discountAmount ?\r\n (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +\r\n order?.billDetails?.totalTaxAfterDiscount) :\r\n order.billDetails.totalGrossValue) | number:'1.0-2'}} -->\r\n {{getTotalAmtPaid(order) | number:'1.0-2'}}\r\n </span>\r\n </div>\r\n <div class=\"status-section\">\r\n <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">\r\n {{order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | titlecase}}\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mt-1\" *ngIf=\"order.rewardUsed === 'REWARD_POINTS'\">\r\n <div class=\"fs-14 text-secondary\">\r\n Amount Paid -\r\n <span class=\"text-success fw-bold\">\u20B9 {{ getTotalAmtPaid(order) === order.pointsConvertedINR ? '0' :\r\n (getTotalAmtPaid(order) - order.pointsConvertedINR) }}</span>\r\n </div>\r\n <div class=\"fs-14 text-secondary\">\r\n Rewarded Amount - <span class=\"text-success fw-bold\">\u20B9 {{order.pointsConvertedINR}}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mt-1\" *ngIf=\"order.rewardUsed === 'VOUCHER'\">\r\n <div class=\"fs-14 text-secondary\">\r\n Amount Paid -\r\n <span class=\"text-success fw-bold\">\u20B9 {{ getTotalAmtPaid(order) === order.voucherValue ? '0' :\r\n (getTotalAmtPaid(order) - order.voucherValue) }}</span>\r\n </div>\r\n <div class=\"fs-14 text-secondary\">\r\n Rewarded Amount - <span class=\"text-success fw-bold\">\u20B9 {{order.voucherValue}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #WishlistDetails>\r\n <h3 class=\"onlyDesktop\">My Wishlist</h3>\r\n <div class=\"wishlist-list\" *ngIf=\"wishlistData?.length; else showEmptyWishlistScreen\">\r\n <div class=\"d-flex flex-wrap\" style=\"gap: 10px;\">\r\n <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n <div class=\"address-card mb-2\">\r\n <div class=\"card-body p-4\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-auto\">\r\n <div class=\"product-image-wrapper\">\r\n <img loading=\"lazy\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"product-img rounded\" [src]=\"item.imgUrl\" alt=\"Product Image\">\r\n </div>\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"product-details\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div\r\n class=\"col-auto text-end d-flex justify-content-between align-items-center w-100\">\r\n <h6 class=\"product-name mb-2 fw-semibold text-dark\">\r\n {{item.itemName}}\r\n </h6>\r\n <div class=\"delete-action\" *ngIf=\"!isMobile\">\r\n <button class=\"btn btn-sm delete-btn\" (click)=\"deleteFromWhislist(item)\"\r\n title=\"Remove from wishlist\">\r\n <mat-icon class=\"small-icon\">delete</mat-icon>\r\n </button>\r\n </div>\r\n <div class=\"delete-action mt-2\" *ngIf=\"isMobile\">\r\n <button class=\"btn btn-sm w-100\" (click)=\"deleteFromWhislist(item)\">\r\n <mat-icon class=\"small-icon me-1\">delete</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"product-price mb-3\">\r\n <span class=\"h5 text-success fw-bold mb-0\">\r\n <span [innerHTML]='currency'></span>{{item.discountedPrice}}\r\n </span>\r\n <span class=\"text-muted small ms-2\" *ngIf=\"item.quantity\">\r\n ({{item.quantity}} items)\r\n </span>\r\n </div>\r\n <div class=\"action-buttons d-flex gap-2\">\r\n <div class=\"quantity-controls d-flex align-items-center w-50 justify-content-center\"\r\n *ngIf=\"item.quantity\">\r\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n (click)=\"addToFav(item, 'SUBSTRACT')\">\r\n -\r\n </button>\r\n <span class=\"quantity-display px-3 py-1 bg-light rounded mx-1\">\r\n {{item.quantity}}\r\n </span>\r\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n (click)=\"addToFav(item, 'ADD')\"> +\r\n </button>\r\n </div>\r\n <button class=\"btn btn-sm w-50\" *ngIf=\"!item.quantity\"\r\n (click)=\"addToFav(item, 'ADD')\">\r\n + Add Quantity\r\n </button>\r\n <button class=\"btn btn-sm w-50\" (click)=\"moveToCart(item)\">\r\n Move to Cart\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n <ng-template #showEmptyWishlistScreen>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\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]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container>\r\n <div class=\"heading-medium d-flex justify-content-center\">\r\n Your Wishlist is Empty</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #SchemeDetails>\r\n <div class=\"header mb-3 f-18 fw-600\">Current Scheme Enrollments - 4</div>\r\n <div class=\"row gap-2\">\r\n <ng-container *ngFor=\"let scheme of [1,1,1,1]\">\r\n <div class=\"cards d-flex flex-column w-32 mb-2 p-0 \">\r\n <div class=\"card-header row gap-2\">\r\n <div class=\"card-head-left col-7\">\r\n <div class=\"scheme-type fs-15 fw-600\">Group Investment Scheme</div>\r\n <div class=\"scheme-id fw-600\">GIS6K_000231004</div>\r\n </div>\r\n <div class=\"card-head-right col-4 text-center align-content-center\">\r\n <div class=\"scheme-amount fw-600\">\u20B96,000/M</div>\r\n </div>\r\n </div>\r\n <div class=\"card-body d-flex p-0 mb-3\">\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/425719c1752566628577star.png\" alt=\"\"\r\n class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">\u20B913,800</div>\r\n <div class=\"card-sub-text text-center\">Total Acheived</div>\r\n </div>\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/229997c1752567131192brand_7959220.png\"\r\n alt=\"\" class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">\u20B91,000</div>\r\n <div class=\"card-sub-text text-center\">Rewards</div>\r\n </div>\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/760761c1752567279970calendar (1).png\"\r\n alt=\"\" class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">8</div>\r\n <div class=\"card-sub-text text-center\">Due Months</div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer row\">\r\n <div class=\"col-6 d-flex gap-2 p-0\">\r\n <span class=\"footer-text text-nowrap\">Start On :</span><span class=\"date-text text-nowrap\">30\r\n may 2025</span>\r\n </div>\r\n <div class=\"col-6 d-flex gap-2 p-0\">\r\n <span class=\"footer-text text-nowrap\">Maturity On :</span><span class=\"date-text text-nowrap\">25\r\n may 2026</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n<ng-template #SchemePassbook>\r\n <div class=\"w-100 h-100 overflow-scroll passbook_container\">\r\n <div class=\"header d-flex flex-column\">\r\n <div class=\"d-flex align-items-center justify-content-end mb-3\" *ngIf=\"storeListing.length >= 2\"><select\r\n class=\"store-listing\" (change)=\"changeStore($event)\">\r\n <option value=\"\">Select Store</option>\r\n <option [value]=\"store.id\" *ngFor=\"let store of storeListing\">{{store.storeName}}</option>\r\n </select></div>\r\n <div class=\"scheme-overview d-flex flex-column\">\r\n <div class=\"d-flex gap-2\">\r\n <div class=\"available-savings\">\r\n <div class=\"d-flex align-items-center gap-1 w-100 justify-content-between\">\r\n <h3>Available Savings</h3>\r\n <span class=\"amount_logo\">\uD83D\uDCB0</span>\r\n </div>\r\n\r\n <div class=\"amount\">{{totalSavings ? totalSavings :\r\n '0'}}</div>\r\n </div>\r\n <div class=\"active-schemes\">\r\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n <h3>Active Passbooks</h3>\r\n <div class=\"auto-pay-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\r\n </div>\r\n </div>\r\n <div class=\"scheme-count\">{{totalSchemes?.length ?\r\n totalSchemes.length : '0'}}</div>\r\n <div class=\"subtitle\">On Track</div>\r\n </div>\r\n <div class=\"active-schemes\" *ngIf=\"totalAccumulatedGold > 0\">\r\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n <h3>Accumulated Gold </h3>\r\n <div class=\"auto-pay-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/153448c1756808418216accumulated_icon.png\">\r\n </div>\r\n </div>\r\n <div class=\"scheme-count\">{{totalAccumulatedGold}} gms</div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"overAllDues?.length\">\r\n <div class=\"section d-flex-flex-column gap-2\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Due Payments</h2>\r\n </div>\r\n <div class=\"payment-list d-flex flex-column gap-2\">\r\n <ng-container *ngIf=\"overAllDues?.length; else showEmptyPayment\">\r\n <div class=\"payment-item overdue\" *ngFor=\"let payment of overAllDues\">\r\n <div class=\"payment-info\">\r\n <div class=\"payment-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/403142c1753435378127Background.svg\">\r\n <!-- <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\"\r\n *ngIf=\"!payment.overdueStatus && payment.paymentStatus === 'PAID'\"> -->\r\n </div>\r\n <div class=\"payment-details\">\r\n <h4>{{payment.schemeName}} - {{payment.emiMonthCount}}rd EMI</h4>\r\n <span>Date {{payment.dueDate ? (payment.dueDate | date:'dd-MM-yyyy') :\r\n 'N/A'}}\r\n <!-- <span *ngIf=\"payment.overdueStatus\">| Due by: {{payment.daysOverdue\r\n ? payment.daysOverdue : 0}}</span> --></span>\r\n </div>\r\n </div>\r\n <div class=\"payment-amount\">\r\n <div class=\"amount-value\">\u20B9{{payment.dueAmount ? payment.dueAmount :\r\n '0'}}\r\n </div>\r\n <div class=\"payment-status overdue-status cursor-pointer\"\r\n (click)=\"payDue(payment)\">\r\n <ng-container *ngIf=\"!payDueLoader\">Pay Now</ng-container>\r\n <ng-container *ngIf=\"payDueLoader\">Loading...</ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #showEmptyPayment>\r\n <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n <span>No Due Payments</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"section mt-3\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Your Active Passbooks</h2>\r\n </div>\r\n\r\n <div class=\"schemes-grid\">\r\n <ng-container *ngIf=\"totalSchemes && totalSchemes.length > 0; else showActiveScheme\">\r\n <div class=\"scheme-card d-flex flex-column gap-2 cursor-pointer\"\r\n *ngFor=\"let scheme of totalSchemes; let i = index\" (click)=\"viewSchemeDetails(scheme)\">\r\n <div class=\"scheme-header\">\r\n <div>\r\n <div class=\"scheme-title\">{{ scheme?.schemeName || 'N/A' }}</div>\r\n <div class=\"scheme-amount\">\u20B9{{ scheme?.installmentAmount || '0' }}/Monthly</div>\r\n </div>\r\n <div class=\"scheme-date\">\r\n <span>Enrolled: {{ scheme?.createdTimestamp ? (scheme?.createdTimestamp |\r\n date:'dd-MM-yyyy') :\r\n 'N/A' }}</span>\r\n <!-- <span>Maturity: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n 'N/A' }}</span> -->\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-status d-flex justify-content-center align-items-center\"\r\n [ngClass]=\"scheme?.passBookStatus === 'REDEEM_REQUESTED' ? 'redeem_status' : (scheme?.passBookStatus === 'ACTIVE' ? 'active-status' : 'redeem_status')\">\r\n {{\r\n scheme.passBookStatus ? scheme.passBookStatus.replaceAll('_', ' ') : 'N/A'\r\n }}\r\n </div>\r\n\r\n <div class=\"scheme-stats\">\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">{{ scheme?.totalPaidAmount || '0' }}</div>\r\n <div class=\"stat-label\">Deposited Amount</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">\r\n {{\r\n scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n (scheme?.schemePayments?.length -\r\n scheme.dueMonths) : 'N/A'\r\n }}\r\n </div>\r\n <div class=\"stat-label\">Paid Months</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">{{scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n scheme?.dueMonths : 'N/A' }}</div>\r\n <div class=\"stat-label\">Due Months</div>\r\n </div>\r\n <div class=\"stat\" *ngIf=\"scheme?.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"stat-value\">{{ scheme?.totalInvestedMetal || '0' }} gms</div>\r\n <div class=\"stat-label\">Accumulated Gold</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-footer\">\r\n <span>Maturity Date: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n 'N/A' }}</span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #showActiveScheme>\r\n <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n <span>No Active Scheme</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n <!-- <div class=\"auto-pay\">\r\n <div class=\"auto-pay-icon mobile-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/966462c1753439662355Background.png\"></div>\r\n <div class=\"auto-pay-content\">\r\n <div class=\"auto-pay-title\">Manage Auto-pay</div>\r\n <div class=\"auto-pay-desc\">Pause, resume or cancel auto payment subscription</div>\r\n </div>\r\n <button class=\"manage-btn\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/409230c1753439564830SVG.png\"> Manage</button>\r\n </div> -->\r\n </div>\r\n</ng-template>\r\n<ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #Scheme_Details>\r\n <simpo-scheme-details [schemeDetails]=\"schemeDetails\" [data]=\"data\" [metalPrice]=\"metalPrice\"\r\n (gotoSchemeOverview)=\"selectedSidePanelTab = 'Scheme Passbook'\"></simpo-scheme-details>\r\n</ng-template>\r\n<ng-template #Transactions>\r\n <simpo-passbook-transactions></simpo-passbook-transactions>\r\n</ng-template>\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>", styles: [".total-container{position:relative;height:auto;overflow:scroll;background:#fff!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;padding:15px;overflow-y:auto;overflow-x:hidden;max-height:80vh}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}h1{font-weight:600}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.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:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.amount_logo{font-size:27px}@media screen and (max-width: 475px){.store-listing{width:35%!important}.total-container{height:100%!important}.amount_logo{font-size:27px}.amount,.scheme-count{font-size:20px!important}.title-text{font-size:24px}.schemes-grid{flex-wrap:wrap;overflow-y:scroll;height:95%}.section{height:auto}.scheme-status{white-space:nowrap}.scheme-card{width:100%}.header{flex-direction:column-reverse}.scheme-overview{width:100%!important}.scheme-overview div{flex-wrap:wrap}.available-savings h3{font-size:17px!important}.quick-actions{width:100%}.active-schemes h3{font-size:17px!important}.auto-pay-icon{width:55px!important;height:50px!important}.mobile-icon{width:30px!important}.manage-btn{width:25%!important}.tab-selected div{font-weight:600!important}.mobile-height{height:100%!important}.passbook_container{height:90%!important;overflow-x:scroll!important}.passbook_container .section{max-height:unset!important;padding:10px!important}.section-header{margin-bottom:2px!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;border:none;padding:10px 5px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.list-sec .tab-selected{border-top-left-radius:10px!important;border-bottom-left-radius:10px;border:none}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:0 10px;width:100vw;margin-bottom:20px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.profile-icon{width:70px}.text-overflow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width:1200px) and (max-width: 1330px){.profile-details{width:75%!important}}@media screen and (min-width:1200px){.manage-btn{width:10%!important}}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}.cards{box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;border-radius:12px}.cards .card-header{padding:8px}.cards .card-header .card-head .scheme-type{font-size:15px}.cards .card-body .col-4 .card-sub-text{font-size:14px}.cards .card-footer{border-top:2px dashed!important;margin:0 5px;padding:10px}.cards .card-footer span{font-size:13px}.cards .card-footer .date-text{font-weight:600}.cards .card-footer div{font-size:15px}.fs-15{font-size:14px}.w-32{width:32.5%!important}.w-40{width:40px!important}.f-18{font-size:18px}.fw-600{font-weight:600}.scheme-id{font-size:13px}.order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.cart-item-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa);width:49%}.address-card .card-body{position:relative;overflow:hidden}.address-text{color:#495057;line-height:1.4}.btn-sm{transition:all .3s ease}.small-icon{font-size:16px!important}.badge.bg-light{color:#495057!important;background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;border:1px solid #dee2e6}@media (max-width: 576px){.address-card .card-body{padding:1rem!important}.address-card{width:100%!important}.btn-sm{display:flex;justify-content:center;align-items:center;color:red!important}.btn-sm mat-icon{font-size:13px}.btn-sm{width:100%;margin-bottom:.25rem}}.profile-box{transition:all .3s ease;position:relative}.tab-item:hover img{transform:scale(1.1)}.tab-selected{border-left:4px solid;font-weight:600!important;border-bottom:unset!important}.tab-selected .tab-label{font-weight:600!important}.tabs-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.tabs-container::-webkit-scrollbar{width:4px}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-box{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.profile-box{width:100%!important}.profile-header{flex-direction:column;height:auto!important;text-align:center}.action-buttons{flex-direction:column}}.scheme-overview{gap:20px;width:100%}.available-savings{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:20px;border-radius:12px;position:relative;flex:1}.available-savings .amount{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.available-savings h3{font-size:14px;color:#856404;margin-bottom:8px;font-weight:500}.subtitle{font-size:12px;color:#666}.active-schemes{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;position:relative;flex:1}.active-schemes h3{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.scheme-count{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e9ecef;max-height:40vh;overflow-x:scroll}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:18px;font-weight:600}.view-all{color:#6c5ce7;font-size:16px}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.overdue{background:#fef2f2;border:1px solid #FECACA}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.upcoming{background:#f8f9fa;color:#666}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.payment-status{font-size:12px;padding:4px 8px;border-radius:4px;color:#fff;white-space:nowrap}.overdue-status{background:#dc3545}.upcoming-status{background:#6c757d}.schemes-grid{display:flex;gap:10px;overflow-x:scroll}.scheme-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e9ecef;position:relative;min-width:34vw}.scheme-header{display:flex;justify-content:space-between;align-items:flex-start}.scheme-title{font-size:16px;font-weight:600;margin-bottom:4px}.scheme-amount{font-size:12px;color:#666}.scheme-date{font-size:12px;color:#666;display:flex;flex-direction:column;gap:10px}.scheme-status{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;text-transform:uppercase;min-width:15%;max-width:fit-content}.redeem_status{background:orange;color:#fff}.active-status{background:#22c55e;color:#fff}.scheme-stats{display:flex;justify-content:space-between}.stat{text-align:center}.stat-value{font-size:20px;font-weight:700;color:#333}.stat-label{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px}.scheme-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.price-notice{background:#fce7f3;color:#be185d;padding:8px 12px;border-radius:6px;font-size:11px}.auto-pay{background:#fff3cd;padding:16px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-top:20px}.auto-pay-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.auto-pay-icon img{width:100%}.auto-pay-content{flex:1}.auto-pay-title{font-size:14px;font-weight:600;margin-bottom:4px}.auto-pay-desc{font-size:12px;color:#666}.manage-btn{background:none;border:1px solid #dee2e6;padding:6px 0;border-radius:4px;font-size:13px!important;cursor:pointer;display:flex;justify-content:space-evenly}.store-listing{font-size:14px;width:20%;height:30px;margin-bottom:13px;border:1px solid #e9ecef;border-radius:5px;outline:none;padding-left:5px;cursor:pointer}.fs-14{font-size:14px}.fs-12{font-size:12px}.logout-dialog-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;width:440px;max-width:90vw;padding:40px 32px 32px;border-radius:28px;box-shadow:0 25px 60px -15px #00000040,0 0 0 1px #0000000d;overflow:hidden;text-align:center;animation:modalPopIn .35s cubic-bezier(.16,1,.3,1) both}@keyframes modalPopIn{0%{opacity:0;transform:scale(.92) translateY(16px)}to{opacity:1;transform:scale(1) translateY(0)}}.logout-close-btn{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;border:none;background:#0000000d;color:#64748b;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;z-index:2}.logout-close-btn mat-icon{font-size:20px!important;height:20px!important;width:20px!important;line-height:20px!important}.logout-close-btn:hover{background:#0000001a;color:#0f172a;transform:rotate(90deg)}.logout-blob{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:0}.logout-blob-1{width:240px;height:240px;background:radial-gradient(circle,rgba(255,99,102,.18) 0%,transparent 70%);top:-60px;right:-60px;animation:blobFloat1 8s ease-in-out infinite}.logout-blob-2{width:200px;height:200px;background:radial-gradient(circle,rgba(255,165,80,.14) 0%,transparent 70%);bottom:-40px;left:-40px;animation:blobFloat2 10s ease-in-out infinite}@keyframes blobFloat1{0%,to{transform:translate(0) scale(1)}50%{transform:translate(-12px,16px) scale(1.06)}}@keyframes blobFloat2{0%,to{transform:translate(0) scale(1)}50%{transform:translate(10px,-14px) scale(1.04)}}.logout-icon-ring{position:relative;z-index:1;width:90px;height:90px;border-radius:50%;background:linear-gradient(135deg,#fff4e5,#ffe0e0);box-shadow:0 8px 30px #ff64642e,0 0 0 10px #ff646412;display:flex;align-items:center;justify-content:center;margin-bottom:24px}.logout-wave{font-size:42px;line-height:1;display:inline-block;animation:waveHand 1.6s ease-in-out infinite;transform-origin:70% 80%}@keyframes waveHand{0%,60%,to{transform:rotate(0)}10%,30%{transform:rotate(-14deg)}20%,40%{transform:rotate(10deg)}}.logout-title{position:relative;z-index:1;font-size:1.55rem;font-weight:700;color:#1a1a2e;margin:0 0 10px;letter-spacing:-.3px}.logout-subtitle{position:relative;z-index:1;font-size:.92rem;color:#64748b;line-height:1.6;margin:0 0 32px;max-width:320px}.logout-actions{position:relative;z-index:1;display:flex;gap:12px;width:100%;justify-content:center}.logout-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:1;padding:13px 20px;border-radius:12px;font-size:.95rem;font-weight:600;border:none;cursor:pointer;transition:all .25s cubic-bezier(.34,1.56,.64,1);letter-spacing:.2px}.logout-action-btn .logout-btn-icon{font-size:18px!important;height:18px!important;width:18px!important;line-height:18px!important}.logout-action-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #0000001f}.logout-action-btn:active{transform:translateY(0)}.btn-stay{background:#f1f5f9;color:#334155;border:1px solid #e2e8f0}.btn-stay:hover{background:#e2e8f0;border-color:#cbd5e1}.btn-confirm{color:#fff;border:1px solid transparent;box-shadow:0 4px 18px #0000002e}.btn-confirm:hover{filter:brightness(1.1);box-shadow:0 8px 24px #0000003d}\n"] }]
|
|
23217
23358
|
}], ctorParameters: () => [{ type: i2$2.Router }, { type: EventsService }, { type: RestService }, { type: StorageServiceService }, { type: CartService }, { type: i3$2.MatDialog }, { type: i8$1.MatBottomSheet }, { type: i2$1.CookieService }, { type: i6$1.MessageService }, { type: i1.DomSanitizer }, { type: i2$2.ActivatedRoute }, { type: undefined, decorators: [{
|
|
23218
23359
|
type: Inject,
|
|
23219
23360
|
args: [LOCAL_STORAGE]
|
|
@@ -25888,11 +26029,17 @@ class AppointmentBookingComponent extends BaseSection {
|
|
|
25888
26029
|
candidateStaffPool: line.candidateStaffPool,
|
|
25889
26030
|
slots: []
|
|
25890
26031
|
}));
|
|
25891
|
-
const
|
|
25892
|
-
|
|
26032
|
+
const ambiguous = this.resolvedLines.some((l) => !!l.candidateStaffPool?.length);
|
|
26033
|
+
// BusinessSettings#allowStaffSelection defaults to true (see docs/unified-appointment-journey.md
|
|
26034
|
+
// §5d) - a business that's never touched this setting keeps today's picker behavior.
|
|
26035
|
+
const allowPick = this.businessSettings?.allowStaffSelection !== false;
|
|
26036
|
+
if (ambiguous && allowPick) {
|
|
25893
26037
|
this.staffSearchQuery = '';
|
|
25894
26038
|
this.selectedTab = 'staffListing';
|
|
25895
26039
|
this.barWidth = '43.57';
|
|
26040
|
+
// Picking is optional - Continue is enabled immediately either way, and the backend
|
|
26041
|
+
// auto-assigns the least-busy eligible staff for any line left unpicked.
|
|
26042
|
+
this.activeButton = true;
|
|
25896
26043
|
}
|
|
25897
26044
|
else {
|
|
25898
26045
|
this.fetchAllLineSlots();
|
|
@@ -25904,6 +26051,13 @@ class AppointmentBookingComponent extends BaseSection {
|
|
|
25904
26051
|
});
|
|
25905
26052
|
}
|
|
25906
26053
|
getAllStaffForProductOnlyLine() {
|
|
26054
|
+
// BusinessSettings#allowStaffSelection off - skip the picker entirely, same as the
|
|
26055
|
+
// ambiguous-but-disabled service-line case in resolveCart(). The backend auto-assigns the
|
|
26056
|
+
// least-busy eligible staff for this line at hold time (see docs/unified-appointment-journey.md §5d).
|
|
26057
|
+
if (this.businessSettings?.allowStaffSelection === false) {
|
|
26058
|
+
this.fetchAllLineSlots();
|
|
26059
|
+
return;
|
|
26060
|
+
}
|
|
25907
26061
|
this.loader = true;
|
|
25908
26062
|
const payload = { serviceId: '', storeId: this.selectedLocation?.id ?? '', businessId: this.businessId ?? '' };
|
|
25909
26063
|
this.restService.getAllStaff(payload).subscribe((res) => {
|
|
@@ -25913,6 +26067,8 @@ class AppointmentBookingComponent extends BaseSection {
|
|
|
25913
26067
|
this.staffData.forEach((staff) => staff.selected = false);
|
|
25914
26068
|
this.selectedTab = 'staffListing';
|
|
25915
26069
|
this.barWidth = '43.57';
|
|
26070
|
+
// Optional - Continue enables immediately, the customer can still pick if they want.
|
|
26071
|
+
this.activeButton = true;
|
|
25916
26072
|
}, () => { this.loader = false; });
|
|
25917
26073
|
}
|
|
25918
26074
|
selectStaffForProductOnlyLine(staff) {
|
|
@@ -26125,11 +26281,11 @@ class AppointmentBookingComponent extends BaseSection {
|
|
|
26125
26281
|
this.resetWizard();
|
|
26126
26282
|
}
|
|
26127
26283
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppointmentBookingComponent, deps: [{ token: RestService }, { token: EventsService }, { token: i2$2.Router }, { token: i6$1.MessageService }, { token: BookingProductCartService }, { token: StorageServiceService }, { token: i3$2.MatDialog }, { token: i3$2.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26128
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AppointmentBookingComponent, isStandalone: true, selector: "simpo-appointment-booking", inputs: { data: "data", index: "index", edit: "edit", isAdminBooking: "isAdminBooking", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor", prefillContact: "prefillContact" }, host: { listeners: { "window: resize": "getScreenSize($event)", "document:click": "closeOnOutsideClick()" } }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n [showTransformOptions]=\"screenWidth < 475 ? 'translateY(-100%)' : ''\"></p-toast>\n<section class=\"main_section\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\n [simpoBackground]=\"backgroundInfo\" [style.--color-accent-gradient]=\"accentColor\">\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div class=\"main_header\">\n <div class=\"header d-flex justify-content-between align-items-center\">\n <div class=\"back-btn d-flex justify-content-center align-items-center cursor-pointer gap-2 mb-3\"\n (click)=\"goBack()\">\n <mat-icon>keyboard_backspace</mat-icon><span *ngIf=\"screenWidth > 475\">Back to Home</span>\n </div>\n <div class=\"header-title\">\n <h1>Book New Appointment</h1>\n <p>{{businessName ?? \"N/A\" }}</p>\n </div>\n </div>\n\n <div class=\"progress-bar\">\n <div class=\"progress-fill\" [style.width]=\"barWidth + '%'\"></div>\n </div>\n </div>\n <div class=\"main_body w-100 d-flex justify-content-center\">\n <ng-container *ngIf=\"selectedTab === 'modeSelection'\">\n <ng-container *ngTemplateOutlet=\"modeSelection\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"selectedTab === 'serviceListing'\">\n <ng-container *ngIf=\"!skeletonLoader\">\n <ng-container *ngTemplateOutlet=\"serviceListing\"></ng-container>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"selectedTab === 'locationListing'\">\n <ng-container *ngTemplateOutlet=\"locationListing\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"selectedTab === 'staffListing'\">\n <ng-container *ngTemplateOutlet=\"staffListing\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"selectedTab === 'dateSelection'\">\n <ng-container *ngTemplateOutlet=\"dateSelection\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"selectedTab==='contactDetails'\">\n <ng-container *ngTemplateOutlet=\"contactDetails\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"selectedTab==='paymentTab'\">\n <ng-container *ngTemplateOutlet=\"paymentTab\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"selectedTab==='statusTemplate'\">\n <ng-container *ngTemplateOutlet=\"statusTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"main_footer d-flex justify-content-center align-items-center\"\n *ngIf=\"selectedTab!=='statusTemplate' && selectedTab!=='modeSelection'\">\n <div class=\"footer-buttons\"\n [ngStyle]=\"{'justify-content': selectedTab != 'serviceListing' ? 'space-between' : 'end'}\">\n <span class=\"back-footer-btn cursor-pointer\" (click)=\"previousStep()\"\n *ngIf=\"selectedTab != 'serviceListing'\">Back</span>\n <button class=\"continue-btn\" [disabled]=\"!activeButton\" (click)=\"nextStep()\"\n *ngIf=\"selectedTab!='paymentTab'\">{{!loader ? 'Continue' : 'Loading...'}}</button>\n <button class=\"cursor-pointer d-flex justify-content-evenly align-items-center\"\n *ngIf=\"selectedTab==='paymentTab'\" (click)=\"confirmBooking()\" [disabled]=\"isProcessing\"\n [ngClass]=\"{'pay-now-btn' : bookingGroup?.totalCollectedAtBooking > 0 || !bookingGroup,'complete_booking' : bookingGroup && !bookingGroup?.totalCollectedAtBooking}\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\n {{isProcessing ? 'Please wait...' : 'Confirm Booking'}}\n </button>\n </div>\n </div>\n</section>\n\n<ng-template #modeSelection>\n <div class=\"w-60 service_section\">\n <div class=\"service-selection\">\n <h2>How would you like this?</h2>\n <p>Choose how you'd like to be served</p>\n <div class=\"services-grid\">\n <div class=\"service-card\" (click)=\"selectMode('STORE_VISIT')\">\n <div class=\"service-header\">\n <div class=\"service-icon\"><mat-icon>storefront</mat-icon></div>\n <div class=\"service-info\">\n <div class=\"service-title\">Visit our Store</div>\n </div>\n </div>\n <div class=\"service-description\">Come to us at one of our locations</div>\n </div>\n <div class=\"service-card\" (click)=\"selectMode('HOME_VISIT')\">\n <div class=\"service-header\">\n <div class=\"service-icon\"><mat-icon>home</mat-icon></div>\n <div class=\"service-info\">\n <div class=\"service-title\">We come to you</div>\n </div>\n </div>\n <div class=\"service-description\">A professional visits your address</div>\n </div>\n <div class=\"service-card\" (click)=\"selectMode('VIDEO_CALL')\">\n <div class=\"service-header\">\n <div class=\"service-icon\"><mat-icon>videocam</mat-icon></div>\n <div class=\"service-info\">\n <div class=\"service-title\">Video consultation</div>\n </div>\n </div>\n <div class=\"service-description\">Connect over a video call</div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #serviceListing>\n <div class=\"w-60 service_section\">\n <div class=\"service-selection\">\n <h2>Select a Service</h2>\n <p>Choose the service(s) you'd like to book<span *ngIf=\"cartServices.length > 0\"> \u2014 {{cartServices.length}} selected</span></p>\n <p *ngIf=\"productCartItems.length > 0\" class=\"cart-hint\">{{productCartItems.length}} product(s) already in your cart \u2014 you can continue without picking a service.</p>\n\n <div class=\"services-grid\">\n <ng-container *ngFor=\"let service of serviceData\">\n <div class=\"\" (click)=\"selectService(service)\"\n [ngClass]=\"{ 'service-card-selected' : service?.selected, 'service-card': !service?.selected }\">\n <div class=\" service-header\">\n <div class=\"service-icon\"><mat-icon>person_outline</mat-icon></div>\n <div class=\"service-info\">\n <div class=\"service-title\">{{service?.name ? service?.name : 'N/A'}}</div>\n </div>\n <div>\n <div class=\"service-price\">\u20B9{{service?.priceDetails?.price ?\n service?.priceDetails?.price : 'N/A' }}</div>\n <div class=\"service-duration\">{{service?.duration ? service?.duration : 'N/A'}} min\n </div>\n </div>\n </div>\n <div class=\"service-description\" *ngIf=\"service?.description\">\n {{service?.description ? service?.description : 'N/A'}}\n </div>\n <div class=\"home-visit\" *ngIf=\"selectedMode === 'STORE_VISIT' && service?.homeAppointmentAvailable\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/982126c1758628863129furniture_16406103.png\">Home\n Visit Available</div>\n </div>\n </ng-container>\n <div class=\"empty-state-mini\" *ngIf=\"serviceData.length === 0\">\n <mat-icon>inventory_2</mat-icon>\n <h4>No services available</h4>\n <p *ngIf=\"selectedMode === 'HOME_VISIT'\">No services are currently available for home visits.</p>\n <p *ngIf=\"selectedMode === 'VIDEO_CALL'\">No services are currently available for video calls.</p>\n <p *ngIf=\"selectedMode === 'STORE_VISIT'\">This business hasn't added any services yet.</p>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #locationListing>\n <div class=\"location_section\">\n <div class=\"header flex-column align-items-start\">\n <h1>Choose Location</h1>\n <p>Select where you'd like to receive the service</p>\n </div>\n\n <div class=\"location-list\">\n <ng-container *ngFor=\"let location of locationData\">\n <div (click)=\"selectLocation(location)\"\n [ngClass]=\"{ 'location-card-selected' : location?.selected, 'location-card': !location?.selected }\">\n <div class=\"location-content\">\n <div class=\"location-info\">\n <div class=\"location-icon\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/427226c1758629157758store_3171510.png\">\n </div>\n <div class=\"location-details\">\n <div class=\"d-flex justify-content-between align-items-center\">\n <h3>{{location?.storeName ? location?.storeName : 'N/A'}}</h3>\n </div>\n <p>{{location?.addressDetails?.addressLine}}, {{location?.addressDetails?.city}},\n {{location?.addressDetails?.state}} {{location?.pincode}}</p>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <div class=\"empty-state-mini\" *ngIf=\"locationData.length === 0\">\n <mat-icon>storefront</mat-icon>\n <h4>No locations available</h4>\n <p>There's no location available for this service right now.</p>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #staffListing>\n <div class=\"w-60 overflow-hidden staff-listing\">\n <div class=\"d-flex w-100 h-100\">\n <div class=\"w-100\">\n <div class=\"staff-header mb-3\">\n <h1>Select Staff Member</h1>\n <p class=\"staff-subtitle mb-0\">Choose your preferred professional</p>\n </div>\n\n <div class=\"search-container mb-4\">\n <div class=\"search-input-wrapper d-flex align-items-center\">\n <mat-icon class=\"search-icon me-2\">search</mat-icon>\n <input type=\"text\" class=\"search-input border-0 flex-grow-1\" placeholder=\"Search staff member by name...\" [(ngModel)]=\"staffSearchQuery\">\n <mat-icon class=\"clear-icon cursor-pointer ms-2\" *ngIf=\"staffSearchQuery\" (click)=\"staffSearchQuery = ''\">close</mat-icon>\n </div>\n </div>\n\n <!-- Pure product-only line: one flat staff list, same as the old single-service flow -->\n <div class=\"staff-list\" *ngIf=\"cartServices.length === 0\">\n <ng-container *ngFor=\"let staff of filteredStaff\">\n <div class=\"card rounded-3 p-3\" (click)=\"selectStaffForProductOnlyLine(staff)\"\n [ngClass]=\"{ 'staff-card-selected' : staff?.selected, 'staff-card': !staff?.selected }\">\n <div class=\"d-flex align-items-center justify-content-between w-100\">\n <div class=\"d-flex align-items-center flex-grow-1\">\n <div class=\"staff-avatar rounded-circle d-flex align-items-center justify-content-center me-4\">\n {{staff?.staffName.slice(0,2).toUpperCase()}}\n </div>\n <div class=\"staff-details flex-grow-1\">\n <h3 class=\"staff-name\">{{(staff?.staffName ? staff?.staffName : 'N/A') | titlecase}}</h3>\n <p class=\"staff-specialty\">{{(businessName && businessName !== 'N/A') ? businessName : 'Booking Specialist'}}</p>\n </div>\n </div>\n <div class=\"selection-indicator\">\n <div class=\"checkmark-circle-mini d-flex align-items-center justify-content-center\" [class.selected]=\"staff?.selected\">\n <mat-icon *ngIf=\"staff?.selected\">check</mat-icon>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <div class=\"empty-state-mini\" *ngIf=\"filteredStaff.length === 0\">\n <mat-icon>badge</mat-icon>\n <h4>No staff available</h4>\n <p>There's no staff member available for this service right now.</p>\n </div>\n </div>\n\n <!-- Bundled cart: one pool per line that resolution couldn't collapse to a single provider -->\n <ng-container *ngIf=\"cartServices.length > 0\">\n <div class=\"staff-line-group mb-4\" *ngFor=\"let line of resolvedLines\">\n <ng-container *ngIf=\"line.candidateStaffPool?.length\">\n <h4 class=\"mb-2\">For {{line.services.length}} service(s): {{ (line.services | slice:0:3).length ? '' : '' }}<span *ngFor=\"let s of line.services; let last = last\">{{s.name}}{{last ? '' : ', '}}</span></h4>\n <div class=\"staff-list mb-3\">\n <ng-container *ngFor=\"let staff of line.candidateStaffPool\">\n <div class=\"card rounded-3 p-3\" (click)=\"selectStaffForLine(line, staff)\"\n [ngClass]=\"{ 'staff-card-selected' : line.selectedStaffId === staff.id, 'staff-card': line.selectedStaffId !== staff.id }\">\n <div class=\"d-flex align-items-center justify-content-between w-100\">\n <div class=\"d-flex align-items-center flex-grow-1\">\n <div class=\"staff-avatar rounded-circle d-flex align-items-center justify-content-center me-4\">\n {{staff?.name?.slice(0,2)?.toUpperCase()}}\n </div>\n <div class=\"staff-details flex-grow-1\">\n <h3 class=\"staff-name\">{{(staff?.name ? staff?.name : 'N/A') | titlecase}}</h3>\n </div>\n </div>\n <div class=\"selection-indicator\">\n <div class=\"checkmark-circle-mini d-flex align-items-center justify-content-center\" [class.selected]=\"line.selectedStaffId === staff.id\">\n <mat-icon *ngIf=\"line.selectedStaffId === staff.id\">check</mat-icon>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container>\n <div class=\"empty-state-mini\" *ngIf=\"!line.candidateStaffPool?.length\">\n <mat-icon>badge</mat-icon>\n <h4>No staff available</h4>\n <p>No staff member is available for {{line.services.length}} service(s) in this line.</p>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #dateSelection>\n <div class=\"w-60 date_section\">\n <div class=\"row justify-content-center h-100\">\n <div class=\"col-12 h-100\">\n <div class=\"datetime-header mb-2\">\n <h1>Select Date & Time</h1>\n <p class=\"datetime-subtitle mb-0\">Choose when you'd like your appointment</p>\n </div>\n\n <div class=\"d-flex gap-4 main_container\">\n <div [ngClass]=\"{'w-50' : screenWidth > 475 , 'w-100':screenWidth < 475}\">\n <div class=\"section-card card rounded-3 p-4 h-100\">\n <h3 class=\"section-title\">Select Date</h3>\n\n <div class=\"date-picker-container d-flex align-items-center justify-content-between\"\n (click)=\"$event.stopPropagation()\">\n <input type=\"text\" class=\"date-input border-0 rounded-2\" placeholder=\"dd-mm-yyyy\"\n [value]=\"selectedDateStr\" readonly (click)=\"toggleCalendar($event)\">\n\n <mat-icon class=\"ms-2\" (click)=\"toggleCalendar($event)\">calendar_today</mat-icon>\n </div>\n <div class=\"position-relative\" (click)=\"$event.stopPropagation()\">\n <div class=\"datepicker-popover\" *ngIf=\"showCalendar\">\n <mat-calendar [(selected)]=\"selectedDate\" [dateFilter]=\"dateFilter\"\n (selectedChange)=\"onDateSelected($event)\" class=\"datepicker-calendar\">\n </mat-calendar>\n </div>\n </div>\n </div>\n </div>\n\n <!-- One slot-picker per resolved line, side by side when there's more than one (design doc \u00A73b) -->\n <div class=\"time_selection\" [ngClass]=\"{'w-50' : screenWidth > 475 , 'w-100':screenWidth < 475}\" *ngIf=\"resolvedLines.length <= 1\">\n <div class=\"section-card card h-100 rounded-3 p-4\">\n <h3 class=\"section-title\">Available Times</h3>\n <div class=\"row g-2 mb-4 overflow-scroll\">\n <ng-container *ngIf=\"!skeletonLoader && resolvedLines[0]\">\n <div class=\"col-4\" *ngFor=\"let time of resolvedLines[0].slots\">\n <div class=\"time-slot rounded-2\" [class.selected]=\"time.selected\"\n (click)=\"selectSlotForLine(resolvedLines[0], time)\">{{time ? time?.value : 'N/A'}}</div>\n </div>\n <p class=\"mb-0\" *ngIf=\"resolvedLines[0].slots.length === 0\">No slots available for this date.</p>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Multi-line case: each line gets its own full-width card with a staff header -->\n <div class=\"d-flex gap-4 main_container flex-wrap\" *ngIf=\"resolvedLines.length > 1\">\n <div class=\"w-100\" *ngFor=\"let line of resolvedLines\">\n <div class=\"section-card card rounded-3 p-4\">\n <h3 class=\"section-title\">Professional: {{line.staffName || line.selectedStaffName}}</h3>\n <p class=\"mb-2\" *ngIf=\"line.services.length\"><span *ngFor=\"let s of line.services; let last = last\">{{s.name}}{{last ? '' : ', '}}</span></p>\n <div class=\"row g-2 mb-2 overflow-scroll\">\n <ng-container *ngIf=\"!line.slotsLoading\">\n <div class=\"col-4\" *ngFor=\"let time of line.slots\">\n <div class=\"time-slot rounded-2\" [class.selected]=\"time.selected\"\n (click)=\"selectSlotForLine(line, time)\">{{time ? time?.value : 'N/A'}}</div>\n </div>\n <p class=\"mb-0\" *ngIf=\"line.slots.length === 0\">No slots available for this date.</p>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #contactDetails>\n <div class=\"w-60 contact_section\">\n <div class=\"contact-header mb-2\">\n <h1>Contact Details</h1>\n <p class=\"contact-subtitle mb-0\">Provide your contact information</p>\n </div>\n\n <div class=\"d-flex gap-3 details_container flex-column w-100\">\n <div class=\"d-flex gap-4\">\n <div [ngClass]=\"{'w-50' : selectedMode === 'HOME_VISIT', 'w-100' : selectedMode !== 'HOME_VISIT'}\">\n <div class=\"form-section card rounded-3 p-4 h-100\">\n <h3 class=\"section-title\">Personal Information</h3>\n\n <div class=\"mb-4\">\n <label class=\"form-label d-flex align-items-center\">\n Full Name\n <span class=\"required-asterisk\">*</span>\n </label>\n <input type=\"text\" class=\"form-control form-input rounded-2\"\n [(ngModel)]=\"appointmentPayload.customerDetail.name\"\n (ngModelChange)=\"checkRequiredValues()\" simpoLettersOnly>\n </div>\n\n <div class=\"mb-4\">\n <label class=\"form-label d-flex align-items-center\">\n Email Address\n <span class=\"required-asterisk\">*</span>\n </label>\n <input type=\"email\" class=\"form-control form-input rounded-2\"\n [(ngModel)]=\"appointmentPayload.customerDetail.email\"\n (ngModelChange)=\"checkRequiredValues()\"\n pattern=\"^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$\" #emailField=\"ngModel\"\n name=\"email\" required>\n </div>\n\n <div class=\"mb-0\">\n <label class=\"form-label d-flex align-items-center\">\n Phone Number\n <span class=\"required-asterisk\">*</span>\n </label>\n <input type=\"tel\" class=\"form-control rounded-2\"\n [(ngModel)]=\"appointmentPayload.customerDetail.phoneNumber\"\n (ngModelChange)=\"checkRequiredValues()\" simpoNumbersOnly\n [ngClass]=\"{'mobile_number' : appointmentPayload.customerDetail.phoneNumber.length != 10}\">\n </div>\n </div>\n </div>\n <!-- Home Visit address. Customer context: same saved-address flow as\n checkout/BookAppointmentComponent. Admin context (isAdminBooking): no\n logged-in customer account to read a saved address book from, so staff type\n the address manually instead. -->\n <div class=\"w-50\" *ngIf=\"selectedMode === 'HOME_VISIT'\">\n <div class=\"form-section card rounded-3 p-4 h-100\">\n <h3 class=\"section-title\">Home Visit Details</h3>\n\n <ng-container *ngIf=\"!isAdminBooking; else manualHomeVisitAddress\">\n <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\n <div class=\"address-info\">\n <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\n <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\n {{defaultAddress?.stateName}}</div>\n <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\n </div>\n </div>\n <button type=\"button\" class=\"change-address-btn w-100\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">\n CHANGE OR ADD ADDRESS\n </button>\n\n <div class=\"addLinks\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\n <mat-icon>add</mat-icon>\n <span class=\"ms-2\">Add an address</span>\n </div>\n </ng-container>\n\n <ng-template #manualHomeVisitAddress>\n <div class=\"mb-3\">\n <label class=\"form-label d-flex align-items-center\">Receiver Name</label>\n <input type=\"text\" class=\"form-control form-input rounded-2\" [(ngModel)]=\"homeVisitAddress.receiverName\" (ngModelChange)=\"checkRequiredValues()\">\n </div>\n <div class=\"mb-3\">\n <label class=\"form-label d-flex align-items-center\">Receiver Phone</label>\n <input type=\"tel\" class=\"form-control form-input rounded-2\" simpoNumbersOnly [(ngModel)]=\"homeVisitAddress.receiverPhone\" (ngModelChange)=\"checkRequiredValues()\">\n </div>\n <div class=\"mb-3\">\n <label class=\"form-label d-flex align-items-center\">Address Line 1</label>\n <input type=\"text\" class=\"form-control form-input rounded-2\" [(ngModel)]=\"homeVisitAddress.addressLine1\" (ngModelChange)=\"checkRequiredValues()\">\n </div>\n <div class=\"mb-3\">\n <label class=\"form-label d-flex align-items-center\">Address Line 2 (optional)</label>\n <input type=\"text\" class=\"form-control form-input rounded-2\" [(ngModel)]=\"homeVisitAddress.addressLine2\">\n </div>\n <div class=\"d-flex gap-2 mb-3\">\n <div class=\"w-50\">\n <label class=\"form-label d-flex align-items-center\">City</label>\n <input type=\"text\" class=\"form-control form-input rounded-2\" [(ngModel)]=\"homeVisitAddress.city\" (ngModelChange)=\"checkRequiredValues()\">\n </div>\n <div class=\"w-50\">\n <label class=\"form-label d-flex align-items-center\">State</label>\n <input type=\"text\" class=\"form-control form-input rounded-2\" [(ngModel)]=\"homeVisitAddress.state\">\n </div>\n </div>\n <div class=\"mb-3\">\n <label class=\"form-label d-flex align-items-center\">Pincode</label>\n <input type=\"text\" class=\"form-control form-input rounded-2\" simpoNumbersOnly [(ngModel)]=\"homeVisitAddress.zipCode\" (ngModelChange)=\"checkRequiredValues()\">\n </div>\n </ng-template>\n\n <div class=\"mb-0 mt-3\">\n <label class=\"form-label d-flex align-items-center\">Special Instructions</label>\n <textarea class=\"form-control form-textarea rounded-2\"\n placeholder=\"Any special instructions for the professional (optional)\"\n [(ngModel)]=\"instructions\"></textarea>\n </div>\n </div>\n </div>\n </div>\n <div class=\"policies-container\"\n *ngIf=\"cartServices[0]?.cancellationPolicy?.length > 0 || cartServices[0]?.reschedulePolicy?.length\">\n <h2 class=\"policies-title\">Policies & Terms</h2>\n\n <div class=\"policy-items-container d-flex flex-column gap-3\">\n <div class=\"policy-item d-flex justify-content-between align-items-center\"\n (click)=\"showCancellationPolicy = !showCancellationPolicy\">\n <h3 class=\"policy-title\">Cancellation Policy</h3>\n <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\n *ngIf=\"!showCancellationPolicy\">keyboard_arrow_right</mat-icon>\n <mat-icon *ngIf=\"showCancellationPolicy\">keyboard_arrow_down</mat-icon>\n </div>\n </div>\n <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\n *ngIf=\"showCancellationPolicy\">\n <span *ngFor=\"let policy of cartServices[0]?.cancellationPolicy\">•\n {{policy}}</span>\n </div>\n\n <div class=\"policy-item d-flex justify-content-between align-items-center\"\n (click)=\"showReducingPolicy = !showReducingPolicy\">\n <h3 class=\"policy-title\">Rescheduling Policy</h3>\n <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\n *ngIf=\"!showReducingPolicy\">keyboard_arrow_right</mat-icon>\n <mat-icon *ngIf=\"showReducingPolicy\">keyboard_arrow_down</mat-icon>\n </div>\n </div>\n <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\n *ngIf=\"showReducingPolicy\">\n <span *ngFor=\"let policy of cartServices[0]?.reschedulePolicy\">• {{policy}}</span>\n </div>\n </div>\n\n <div class=\"acceptance-section\">\n <input type=\"checkbox\" class=\"custom-checkbox\" [(ngModel)]=\"termsAndConditions\"\n (ngModelChange)=\"checkRequiredValues()\">\n <p class=\"acceptance-text\" style=\"margin-bottom:0px !important\">\n I understand and accept the cancellation & rescheduling policies.\n </p>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #paymentTab>\n <div class=\"w-60 payment_section\">\n <div class=\"w-100 h-100\">\n <div class=\"w-100 d-flex justify-content-center align-items-center flex-column\">\n <div class=\"payment-header mb-3 w-100\">\n <h1 style=\"font-size:24px;font-weight: 600;\">Booking Summary</h1>\n <p class=\"payment-subtitle mb-0\">Review your booking before confirming</p>\n </div>\n\n <div class=\"booking-summary-card\" [ngClass]=\"{'w-100' : screenWidth < 475,'w-50':screenWidth > 475}\">\n <div *ngFor=\"let line of resolvedLines; let i = index\">\n <h2 class=\"summary-title\" *ngIf=\"resolvedLines.length > 1\">Line {{i + 1}}</h2>\n <div class=\"summary-row\" *ngFor=\"let s of line.services\">\n <div class=\"summary-label\">{{s.name}}</div>\n <div class=\"summary-value\"><span class=\"currency-symbol\">\u20B9</span>{{servicePrice(s.id)}}</div>\n </div>\n <div class=\"summary-row\" *ngIf=\"line.staffName || line.selectedStaffName\">\n <div class=\"summary-label\">Professional</div>\n <div class=\"summary-value\">{{line.staffName || line.selectedStaffName}}</div>\n </div>\n <div class=\"summary-row\" *ngIf=\"selectedMode === 'STORE_VISIT'\">\n <div class=\"summary-label\">Location</div>\n <div class=\"summary-value\">{{selectedLocation?.storeName ?? 'N/A'}}</div>\n </div>\n <div class=\"summary-row\">\n <div class=\"summary-label\">Date & Time</div>\n <div class=\"summary-value\">{{selectedDateStr}} at {{line.selectedSlot?.value ?? 'N/A'}}</div>\n </div>\n </div>\n\n <div *ngIf=\"productCartItems.length > 0\">\n <h2 class=\"summary-title\">Products</h2>\n <div class=\"summary-row\" *ngFor=\"let p of productCartItems\">\n <div class=\"summary-label\">{{p.itemName}} x{{p.quantity}}</div>\n <div class=\"summary-value\"><span class=\"currency-symbol\">\u20B9</span>{{(p.sellingPrice ?? p.price ?? 0) * (p.quantity ?? 1)}}</div>\n </div>\n </div>\n\n <h2 class=\"summary-title\">Payment</h2>\n <div class=\"summary-row\" *ngIf=\"homeVisitCharge > 0\">\n <div class=\"summary-label\">Home visit charge</div>\n <div class=\"summary-value\"><span class=\"currency-symbol\">\u20B9</span>{{homeVisitCharge}}</div>\n </div>\n <div class=\"summary-row\">\n <div class=\"summary-label\">Total</div>\n <div class=\"summary-value\"><span class=\"currency-symbol\">\u20B9</span>{{reviewTotal}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #statusTemplate>\n <div class=\"booking-confirmation\">\n <div class=\"success-icon\">\n <div class=\"checkmark-circle\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/881293c1758695578518success.gif\"\n class=\"w-100 h-100\" *ngIf=\"apiStatus\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/325000c1758695564518fail.gif\"\n class=\"w-100 h-100\" *ngIf=\"!apiStatus\">\n </div>\n </div>\n\n <div class=\"confirmation-content\">\n <h1 class=\"confirmation-title\">{{apiStatus ? 'Booking Confirmed!' : 'Booking Failed'}}</h1>\n <p class=\"confirmation-message\">\n {{apiStatus ? 'Your appointment has been successfully booked.':'Failed to book you appointment. Please\n try again later'}}\n </p>\n\n <!-- Video Call link, when already present on the confirmed group (a paid Video Call's\n link only appears once payment verification completes, handled elsewhere - see\n verify-payment.component.ts, not this screen). -->\n <div class=\"video-call-link-card d-flex align-items-center justify-content-center\" *ngIf=\"apiStatus && selectedMode === 'VIDEO_CALL' && bookingGroup?.videoCallLink\">\n <div class=\"details-card\">\n <h3 class=\"details-title\">Your Video Call Link</h3>\n <a [href]=\"bookingGroup.videoCallLink\" target=\"_blank\">{{bookingGroup.videoCallLink}}</a>\n </div>\n </div>\n\n <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus\">\n <div class=\"details-card\">\n <h3 class=\"details-title\">Appointment Details</h3>\n <div class=\"details-row\" *ngFor=\"let line of resolvedLines\">\n <span class=\"detail-label\">{{line.services.length ? (line.services[0].name) : 'Products'}}</span>\n <span class=\"detail-value\">{{selectedDateStr}} at {{line.selectedSlot?.value ?? 'N/A'}}</span>\n </div>\n </div>\n </div>\n\n <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus\">\n <div class=\"details-card\">\n <h3 class=\"details-title\">Payment</h3>\n <div class=\"details-row\" *ngIf=\"bookingGroup?.homeVisitCharge > 0\">\n <span class=\"detail-label\">Home visit charge</span>\n <span class=\"detail-value\">\u20B9{{bookingGroup.homeVisitCharge}}</span>\n </div>\n <div class=\"details-row\">\n <span class=\"detail-label\">Total</span>\n <span class=\"detail-value\">\u20B9{{bookingTotal}}</span>\n </div>\n <div class=\"details-row\">\n <span class=\"detail-label\">Paid</span>\n <span class=\"detail-value\">\u20B9{{bookingPaid}}</span>\n </div>\n <div class=\"details-row\" *ngIf=\"bookingDue > 0\">\n <span class=\"detail-label\">Due</span>\n <span class=\"detail-value\">\u20B9{{bookingDue}}</span>\n </div>\n </div>\n </div>\n\n <div class=\"done-actions d-flex align-items-center justify-content-center\" *ngIf=\"apiStatus\">\n <ng-container *ngIf=\"!isAdminContext; else adminDoneActions\">\n <button type=\"button\" class=\"done-btn done-btn-primary\" (click)=\"goToMyBookings()\">View my bookings</button>\n <button type=\"button\" class=\"done-btn done-btn-secondary\" (click)=\"goToListing()\">Keep shopping</button>\n </ng-container>\n <ng-template #adminDoneActions>\n <button type=\"button\" class=\"done-btn done-btn-primary\" (click)=\"goToAppointmentsList()\">Back to Appointments List</button>\n <button type=\"button\" class=\"done-btn done-btn-secondary\" (click)=\"bookAnother()\">Book Another</button>\n </ng-template>\n </div>\n </div>\n </div>\n</ng-template>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap\";mat-icon{font-family:Material Icons!important}:host{--font-sans: \"Outfit\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;--slate-50: #f8fafc;--slate-100: #f1f5f9;--slate-200: #e2e8f0;--slate-300: #cbd5e1;--slate-400: #94a3b8;--slate-500: #64748b;--slate-600: #475569;--slate-700: #334155;--slate-800: #1e293b;--slate-900: #0f172a;--color-primary: #230860;--color-secondary: #00b6ff;--color-accent-gradient: linear-gradient(135deg, #230860 0%, #00b6ff 100%);--color-success: #10b981;--color-success-bg: #ecfdf5;--color-error: #ef4444;--color-error-bg: #fef2f2;--border-radius-sm: 8px;--border-radius-md: 12px;--border-radius-lg: 16px;--border-radius-xl: 24px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .05), 0 2px 4px -2px rgba(0, 0, 0, .05);--shadow-lg: 0 10px 15px -3px rgba(35, 8, 96, .05), 0 4px 6px -4px rgba(35, 8, 96, .05);--shadow-xl: 0 20px 25px -5px rgba(35, 8, 96, .08), 0 8px 10px -6px rgba(35, 8, 96, .08);--transition-smooth: all .3s cubic-bezier(.4, 0, .2, 1);--transition-bounce: all .4s cubic-bezier(.175, .885, .32, 1.275)}*{box-sizing:border-box;font-family:var(--font-sans)}.main_section{position:relative;height:100vh;background-color:var(--slate-50);display:flex;flex-direction:column;overflow:hidden}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.main_header{padding:15px;background:#fff;border-bottom:1px solid var(--slate-100);flex-shrink:0;box-shadow:0 2px 8px #00000003}.header{display:flex;align-items:center;justify-content:space-between}.back-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem 1.2rem;border-radius:var(--border-radius-md);background:var(--slate-50);border:1px solid var(--slate-200);color:var(--slate-700)!important;transition:var(--transition-smooth);font-weight:500;font-size:.9rem;cursor:pointer}.back-btn mat-icon{font-size:18px!important;width:18px!important;height:18px!important;color:var(--slate-700)!important;display:flex;align-items:center;justify-content:center}.back-btn:hover{background:var(--slate-100);transform:translate(-3px);color:var(--slate-900)!important}.header-title{flex-grow:1;text-align:right}.header-title h1{font-size:1.5rem;font-weight:700;margin-bottom:.2rem;color:var(--slate-900)!important;letter-spacing:-.025em}.header-title p{color:var(--slate-500)!important;font-size:.9rem;font-weight:500;margin-bottom:0}.progress-bar{width:100%;height:6px;background-color:var(--slate-100);margin-top:3px;border-radius:10px;overflow:hidden;position:relative}.progress-fill{height:100%;background:var(--color-accent-gradient);border-radius:10px;transition:width .5s cubic-bezier(.4,0,.2,1);position:relative}.progress-fill:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,#fff0,#ffffff4d,#fff0);animation:shimmer 2s infinite linear}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.main_body{flex-grow:1;overflow-y:auto;padding:10px;display:flex;justify-content:center;background:var(--slate-50)}.w-60{width:100%;max-width:800px}.service_section,.location_section,.staff-listing,.date_section,.contact_section,.payment_section,.booking-confirmation{animation:slideUp .5s cubic-bezier(.16,1,.3,1) forwards}@keyframes slideUp{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}h2{font-size:1.5rem;font-weight:700;color:var(--slate-900)!important;letter-spacing:-.02em;margin-bottom:.3rem}p.subtitle,.service-selection p,.location_section p,.staff-subtitle,.datetime-subtitle,.contact-subtitle,.payment-subtitle{color:var(--slate-500)!important;font-size:13px;margin-bottom:2rem}.services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.5rem;padding-bottom:2rem}.service-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:180px}.service-card:hover{border-color:var(--slate-400);transform:translateY(-4px);box-shadow:var(--shadow-lg)}.service-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:180px;transform:translateY(-2px)}.service-card-selected:before,.location-card-selected:before{content:\"\\2713\";position:absolute;top:-10px;right:-10px;background:var(--color-accent-gradient);color:#fff!important;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;box-shadow:0 4px 8px #2308604d;animation:popIn .3s cubic-bezier(.175,.885,.32,1.275);z-index:10}@keyframes popIn{0%{transform:scale(0)}to{transform:scale(1)}}.service-header{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1rem}.service-icon{width:48px;height:48px;border-radius:var(--border-radius-md);background-color:var(--slate-100);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition-smooth)}.service-icon mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:var(--color-primary)!important}.service-card-selected .service-icon{background:var(--slate-900)}.service-card-selected .service-icon mat-icon{color:#fff!important}.service-info{flex-grow:1}.service-title{font-size:1.15rem;font-weight:700;color:var(--slate-900)!important;line-height:1.3;margin-bottom:.2rem}.service-price{font-size:1.25rem;font-weight:800;color:var(--slate-900)!important;text-align:right}.service-duration{font-size:.8rem;color:var(--slate-500)!important;font-weight:600;text-align:right;margin-top:.1rem}.service-description{color:var(--slate-600)!important;font-size:.9rem;line-height:1.5;margin-bottom:1.25rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.home-visit{align-self:flex-start;display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:600;color:var(--slate-700)!important;border:1px solid var(--slate-200);padding:.35rem .75rem;border-radius:20px;background-color:var(--slate-50);transition:var(--transition-smooth)}.home-visit img{width:14px;height:14px}.home-visit:before{content:\"\";display:inline-block;width:6px;height:6px;border-radius:50%;background-color:var(--color-success);box-shadow:0 0 #10b98166;animation:pulseGlow 1.8s infinite}@keyframes pulseGlow{0%{box-shadow:0 0 #10b981b3}70%{box-shadow:0 0 0 6px #10b98100}to{box-shadow:0 0 #10b98100}}.location-list{display:flex;flex-direction:column;gap:1.25rem;padding-bottom:2rem}.location-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm)}.location-card:hover{border-color:var(--slate-400);transform:translateY(-2px);box-shadow:var(--shadow-md)}.location-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);transform:translateY(-1px)}.location-content{display:flex;align-items:center}.location-info{display:flex;align-items:center;gap:1.25rem;width:100%}.location-icon{width:52px;height:52px;background-color:var(--slate-100);border-radius:var(--border-radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition-smooth)}.location-icon img{width:28px;height:28px}.location-card-selected .location-icon{background:var(--slate-900)}.location-details{flex-grow:1}.location-details h3{font-size:1.15rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:.3rem}.location-details p{font-size:.9rem;color:var(--slate-500)!important;font-weight:450;line-height:1.4;margin-bottom:0}.search-container{width:100%;margin-bottom:1.25rem}.search-input-wrapper{width:100%;background-color:var(--slate-100);border:1.5px solid var(--slate-200);border-radius:var(--border-radius-md);padding:.6rem 1rem;transition:var(--transition-smooth)}.search-input-wrapper:focus-within{background-color:#fff;border-color:var(--color-primary);box-shadow:0 0 0 3px #23086014}.search-input{font-size:.95rem;font-weight:500;color:var(--slate-900)!important;background:transparent;outline:none;width:100%}.search-input::placeholder{color:var(--slate-400)}.search-icon{color:var(--slate-400)!important;font-size:20px!important;width:20px!important;height:20px!important}.clear-icon{color:var(--slate-400)!important;font-size:18px!important;width:18px!important;height:18px!important;transition:var(--transition-smooth)}.clear-icon:hover{color:var(--slate-600)!important}.staff-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem;max-height:48vh;overflow-y:auto;padding-right:.5rem;padding-bottom:1rem}.staff-list::-webkit-scrollbar{width:6px}.staff-list::-webkit-scrollbar-track{background:var(--slate-50);border-radius:4px}.staff-list::-webkit-scrollbar-thumb{background:var(--slate-200);border-radius:4px}.staff-list::-webkit-scrollbar-thumb:hover{background:var(--slate-300)}.staff-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:.9rem 1.25rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm);margin-bottom:0!important}.staff-card:hover{border-color:var(--slate-300);transform:translateY(-2px);box-shadow:var(--shadow-md)}.staff-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:.9rem 1.25rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);transform:translateY(-1px);margin-bottom:0!important}.staff-avatar{width:48px;height:48px;background:var(--color-accent-gradient);font-size:.95rem;font-weight:700;color:#fff!important;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 10px #2308601a;letter-spacing:.5px;transition:var(--transition-smooth)}.staff-card-selected .staff-avatar{transform:scale(1.05)}.staff-name{font-size:1.05rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:.2rem;letter-spacing:-.015em}.staff-specialty{font-size:.8rem;color:var(--slate-500)!important;font-weight:600;margin-bottom:0;text-transform:uppercase;letter-spacing:.05em}.selection-indicator{display:flex;align-items:center;justify-content:center;margin-left:auto;padding-left:1rem}.checkmark-circle-mini{width:24px;height:24px;border:2px solid var(--slate-300);border-radius:50%;background-color:#fff;transition:var(--transition-bounce);color:#fff!important}.checkmark-circle-mini.selected{background:var(--color-accent-gradient);border-color:transparent;box-shadow:0 3px 8px #23086040}.checkmark-circle-mini mat-icon{font-size:14px!important;width:14px!important;height:14px!important;color:#fff!important;font-weight:800!important;display:flex;align-items:center;justify-content:center}.main_container{display:flex;gap:2rem;margin-bottom:2rem}.section-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.75rem;box-shadow:var(--shadow-sm);height:100%}.section-title{font-size:1.1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:10px!important;letter-spacing:-.01em}.date-picker-container{border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:.6rem 1rem;display:flex;align-items:center;justify-content:space-between;transition:var(--transition-smooth);background-color:var(--slate-50);cursor:pointer}.date-picker-container:hover{border-color:var(--slate-400);background-color:#fff}.date-input{font-size:.95rem;font-weight:600;color:var(--slate-800)!important;background:transparent;border:none;outline:none;cursor:pointer;width:100%}.date-picker-container mat-icon{color:var(--color-primary)!important;font-size:20px!important;width:20px!important;height:20px!important}.datepicker-popover{position:absolute;z-index:1000;margin-top:4px;border-radius:var(--border-radius-lg);overflow:hidden;box-shadow:var(--shadow-xl);background:#fff;border:1px solid var(--slate-200);width:320px}::ng-deep .datepicker-calendar{border-radius:var(--border-radius-lg)!important;width:100%!important}::ng-deep .mat-calendar-header{background:var(--color-accent-gradient)!important;color:#fff!important;padding:.5rem!important}::ng-deep .mat-calendar-content{padding:8px!important}::ng-deep .mat-calendar-controls{margin:0!important}::ng-deep .mat-calendar-period-button{color:#fff!important;font-weight:700!important;font-size:1rem!important}::ng-deep .mat-calendar-arrow{fill:#fff!important}::ng-deep .mat-calendar-previous-button,::ng-deep .mat-calendar-next-button{color:#fff!important}::ng-deep .mat-calendar-body-cell{font-size:13px!important}::ng-deep .mat-calendar-body-cell-content{font-weight:600!important;color:var(--slate-800)!important;border-radius:8px!important}::ng-deep .mat-calendar-body-selected{background:var(--color-accent-gradient)!important;color:#fff!important;box-shadow:0 4px 10px #23086033!important}::ng-deep .mat-calendar-body-today:not(.mat-calendar-body-selected){border:2px solid var(--color-primary)!important;color:var(--color-primary)!important}.time_selection{max-height:420px;display:flex;flex-direction:column}.time_selection .row{flex-grow:1;overflow-y:auto;padding-right:.25rem;margin-top:10px}.time-slot{background:#fff;border:1px solid var(--slate-200);font-size:.9rem;font-weight:600;color:var(--slate-800)!important;padding:.75rem .5rem;border-radius:var(--border-radius-md);cursor:pointer;transition:var(--transition-smooth);text-align:center;box-shadow:var(--shadow-sm)}.time-slot:hover{border-color:var(--slate-400);transform:translateY(-2px);box-shadow:var(--shadow-md);background-color:var(--slate-50)}.time-slot.selected{background:var(--color-accent-gradient);border-color:transparent;color:#fff!important;box-shadow:0 4px 12px #23086033}.form-section{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.75rem;box-shadow:var(--shadow-sm)}.form-label{font-size:.85rem;font-weight:600;color:var(--slate-700)!important;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.05em}.required-asterisk{color:var(--color-error);margin-left:2px}.form-control,.form-input,.form-textarea{width:100%;background-color:var(--slate-50);border:1px solid var(--slate-200);color:var(--slate-900)!important;font-size:.95rem;font-weight:500;padding:.75rem 1rem;border-radius:var(--border-radius-md);transition:var(--transition-smooth);outline:none}.form-control:focus,.form-input:focus,.form-textarea:focus{background-color:#fff;border-color:var(--color-primary);box-shadow:0 0 0 3px #2308601a}.form-textarea{min-height:100px;resize:vertical}.policies-container{background-color:#fff;border:1px solid var(--slate-200);padding:1.75rem;border-radius:var(--border-radius-lg);margin-top:1.5rem;box-shadow:var(--shadow-sm)}.policies-title{font-size:1.1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:1.25rem}.policy-item{background-color:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:1rem 1.25rem;cursor:pointer;transition:var(--transition-smooth);display:flex;justify-content:space-between;align-items:center}.policy-item:hover{background-color:var(--slate-100);border-color:var(--slate-300)}.policy-title{font-size:.95rem;font-weight:600;color:var(--slate-800)!important}.policy-arrow mat-icon{color:var(--slate-500)!important;transition:var(--transition-smooth)}.cancellation_policies{background-color:var(--slate-50);padding:1rem 1.5rem;border-left:3px solid var(--color-primary);border-radius:0 0 var(--border-radius-md) var(--border-radius-md);margin-top:-4px;margin-bottom:1rem;font-size:.9rem;color:var(--slate-600)!important;line-height:1.5}.acceptance-section{display:flex;align-items:center;gap:.75rem;margin-top:1.5rem}.custom-checkbox{width:20px;height:20px;border:2px solid var(--slate-300);border-radius:6px;cursor:pointer;transition:var(--transition-smooth);position:relative;appearance:none;background-color:#fff;outline:none}.custom-checkbox:checked{background:var(--color-accent-gradient);border-color:transparent}.custom-checkbox:checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff!important;font-size:.75rem;font-weight:800}.acceptance-text{font-size:.95rem;color:var(--slate-700)!important;font-weight:500;-webkit-user-select:none;user-select:none;line-height:1.4}.booking-summary-card{background-color:#fff;border:1px solid var(--slate-200);padding:2rem;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);position:relative}.booking-summary-card:after{content:\"\";position:absolute;bottom:-1px;left:0;right:0;height:10px;background-image:radial-gradient(circle,white 4px,transparent 5px);background-size:12px 12px;background-position:0 0;z-index:2}.summary-title{font-size:1.25rem;font-weight:700;color:var(--slate-900)!important;border-bottom:2px dashed var(--slate-200);padding-bottom:1rem;margin-bottom:1.5rem;text-align:center}.summary-row{display:flex;justify-content:space-between;align-items:center;padding:.85rem 0;border-bottom:1px solid var(--slate-100)}.summary-label{font-size:.95rem;color:var(--slate-500)!important;font-weight:500}.summary-value{font-size:.95rem;color:var(--slate-900)!important;font-weight:600;text-align:right}.total-row{margin-top:1rem;padding-top:1.25rem;border-top:2px dashed var(--slate-200);border-bottom:none}.total-row .summary-label{font-size:1.25rem;font-weight:700;color:var(--slate-900)!important}.total-row .summary-value{font-size:1.5rem;font-weight:800;color:var(--color-primary)!important}.booking-confirmation{background:#fff;border:1px solid var(--slate-200);padding:3rem 2rem;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;align-items:center;text-align:center;max-width:500px;margin:0 auto}.success-icon{margin-bottom:1.5rem}.checkmark-circle{width:96px;height:96px;display:flex;align-items:center;justify-content:center}.confirmation-title{font-size:1.5rem;font-weight:800;color:var(--slate-900)!important;margin-bottom:.5rem}.confirmation-message{font-size:1rem;color:var(--slate-500)!important;line-height:1.6;margin-bottom:2rem;font-weight:450}.details-card{background-color:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:1.5rem;width:100%;margin-bottom:2rem;text-align:left}.details-title{font-size:1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.05em}.details-row{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px dashed var(--slate-200)}.details-row:last-child{border-bottom:none}.detail-label{font-size:.85rem;color:var(--slate-500)!important;font-weight:500}.detail-value{font-size:.9rem;color:var(--slate-900)!important;font-weight:600}.main_footer{border-top:1px solid var(--slate-200);background-color:#fff;padding:15px;flex-shrink:0;display:flex;justify-content:center;box-shadow:0 -4px 12px #00000005}.footer-buttons{width:100%;max-width:800px;display:flex;align-items:center}.back-footer-btn{font-size:.95rem;font-weight:600;color:var(--slate-600)!important;padding:.75rem 1.5rem;border-radius:var(--border-radius-md);transition:var(--transition-smooth);cursor:pointer}.back-footer-btn:hover{color:var(--slate-900)!important;background-color:var(--slate-100)}.continue-btn{background:var(--color-accent-gradient);color:#fff!important;border:none;padding:.75rem 2rem;border-radius:var(--border-radius-md);font-size:.95rem!important;font-weight:600;cursor:pointer;transition:var(--transition-smooth);box-shadow:0 4px 10px #23086033;width:max-content!important}.continue-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.continue-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed!important;box-shadow:none!important}.complete_booking,.pay-now-btn{background:var(--color-accent-gradient)!important;color:#fff!important;border:none;padding:.75rem 2.25rem!important;font-size:.95rem!important;font-weight:600;border-radius:var(--border-radius-md)!important;box-shadow:0 4px 12px #23086040;transition:var(--transition-smooth);cursor:pointer;display:flex;align-items:center;gap:.5rem;width:max-content!important}.complete_booking img,.pay-now-btn img{width:20px;height:20px;filter:brightness(0) invert(1)}.complete_booking:hover:not([disabled]),.pay-now-btn:hover:not([disabled]){transform:translateY(-2px);box-shadow:0 6px 18px #23086059}.complete_booking:disabled,.pay-now-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed;box-shadow:none}.service-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.5rem;padding:0;width:100%}.skeleton-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;height:180px;display:flex;flex-direction:column;justify-content:space-between}.skeleton{background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0,#f1f5f9 75%);background-size:200% 100%;animation:loading-shimmer 1.5s infinite linear;border-radius:4px}@keyframes loading-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-icon{width:48px;height:48px;border-radius:var(--border-radius-md)}.skeleton-title{height:20px;width:60%;margin-bottom:.5rem}.skeleton-price{height:20px;width:30%}.skeleton-duration{height:12px;width:25%;margin-top:.25rem}.skeleton-description{height:14px;width:85%}.skeleton-badge{height:28px;width:120px;border-radius:20px}.time-slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;width:100%}.skeleton-time-slot{height:42px;border-radius:var(--border-radius-md);background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0,#f1f5f9 75%);background-size:200% 100%;animation:loading-shimmer 1.5s infinite linear;border:1px solid var(--slate-100)}@media screen and (max-width: 475px){.main_header{padding:1rem}.header-title h1{font-size:1.25rem}.back-btn{padding:.5rem .8rem}.back-btn span{display:none}.main_body{padding:15px}.services-grid{grid-template-columns:1fr;gap:1rem}.staff-list{grid-template-columns:1fr!important;gap:.85rem!important}.service-card,.service-card-selected{min-height:auto}.main_container{flex-direction:column;gap:1.5rem}.datepicker-popover{width:100%;left:0}.details_container{gap:1.5rem}.details_container>.d-flex{flex-direction:column;gap:1.5rem}.details_container>.d-flex>div{width:100%!important}.booking-summary-card{padding:1.25rem}.summary-title{font-size:1.15rem}.total-row .summary-label{font-size:1.1rem}.total-row .summary-value{font-size:1.3rem}.main_footer{padding:1rem}.continue-btn{padding:.75rem 1.5rem}}.shipping-info{border-radius:10px;padding:20px;margin-bottom:12px;border:1px solid var(--slate-200);box-shadow:var(--shadow-sm)}.address-info{margin-bottom:0}.address-name{font-weight:700;margin-bottom:8px;color:var(--slate-900)!important}.address-details{color:var(--slate-500)!important;margin-bottom:8px}.mobile-number{font-weight:700;color:var(--slate-900)!important;font-size:15px}.change-address-btn{font-size:.85rem!important;font-weight:700!important;padding:10px;background:#fff;border:1px solid var(--slate-200);border-radius:8px;color:var(--slate-900)!important;cursor:pointer;transition:var(--transition-smooth)}.change-address-btn:hover{border-color:var(--color-primary);color:var(--color-primary)!important}.addLinks{padding:14px;border:1px dashed var(--slate-300);display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:8px;color:var(--slate-500)!important;margin-bottom:12px}.addLinks:hover{border-color:var(--color-primary);color:var(--color-primary)!important}h1{font-size:24px!important;font-weight:600!important}.done-actions{display:flex;gap:12px;width:100%}.done-btn{flex:1;max-width:220px;padding:.75rem 1.5rem;border-radius:var(--border-radius-md);font-size:.95rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth);border:none}.done-btn-primary{background:var(--color-accent-gradient);color:#fff!important;box-shadow:0 4px 10px #23086033}.done-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.done-btn-secondary{background:#fff;color:var(--slate-600)!important;border:1px solid var(--slate-200)}.empty-state-mini{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:48px 16px;color:var(--slate-500)}.empty-state-mini mat-icon{font-size:32px;height:32px;width:32px;color:var(--slate-300);margin-bottom:4px}.empty-state-mini h4{margin:0;font-size:15px;font-weight:600;color:var(--slate-700)}.empty-state-mini p{margin:0;font-size:13px;color:var(--slate-500)}.done-btn-secondary:hover{background-color:var(--slate-100);color:var(--slate-900)!important}\n"], dependencies: [{ 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.SlicePipe, name: "slice" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i9$2.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i9.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: i9.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i9.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: LettersOnlyDirective, selector: "[simpoLettersOnly]" }, { kind: "directive", type: NumbersOnlyDirective, selector: "[simpoNumbersOnly]" }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }] }); }
|
|
26284
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AppointmentBookingComponent, isStandalone: true, selector: "simpo-appointment-booking", inputs: { data: "data", index: "index", edit: "edit", isAdminBooking: "isAdminBooking", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor", prefillContact: "prefillContact" }, host: { listeners: { "window: resize": "getScreenSize($event)", "document:click": "closeOnOutsideClick()" } }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n [showTransformOptions]=\"screenWidth < 475 ? 'translateY(-100%)' : ''\"></p-toast>\n<section class=\"main_section\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\n [simpoBackground]=\"backgroundInfo\" [style.--color-accent-gradient]=\"accentColor\">\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div class=\"main_header\">\n <div class=\"header d-flex justify-content-between align-items-center\">\n <div class=\"back-btn d-flex justify-content-center align-items-center cursor-pointer gap-2 mb-3\"\n (click)=\"goBack()\">\n <mat-icon>keyboard_backspace</mat-icon><span *ngIf=\"screenWidth > 475\">Back to Home</span>\n </div>\n <div class=\"header-title\">\n <h1>Book New Appointment</h1>\n <p>{{businessName ?? \"N/A\" }}</p>\n </div>\n </div>\n\n <div class=\"progress-bar\">\n <div class=\"progress-fill\" [style.width]=\"barWidth + '%'\"></div>\n </div>\n </div>\n <div class=\"main_body w-100 d-flex justify-content-center\">\n <ng-container *ngIf=\"selectedTab === 'modeSelection'\">\n <ng-container *ngTemplateOutlet=\"modeSelection\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"selectedTab === 'serviceListing'\">\n <ng-container *ngIf=\"!skeletonLoader\">\n <ng-container *ngTemplateOutlet=\"serviceListing\"></ng-container>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"selectedTab === 'locationListing'\">\n <ng-container *ngTemplateOutlet=\"locationListing\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"selectedTab === 'staffListing'\">\n <ng-container *ngTemplateOutlet=\"staffListing\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"selectedTab === 'dateSelection'\">\n <ng-container *ngTemplateOutlet=\"dateSelection\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"selectedTab==='contactDetails'\">\n <ng-container *ngTemplateOutlet=\"contactDetails\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"selectedTab==='paymentTab'\">\n <ng-container *ngTemplateOutlet=\"paymentTab\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"selectedTab==='statusTemplate'\">\n <ng-container *ngTemplateOutlet=\"statusTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"main_footer d-flex justify-content-center align-items-center\"\n *ngIf=\"selectedTab!=='statusTemplate' && selectedTab!=='modeSelection'\">\n <div class=\"footer-buttons\"\n [ngStyle]=\"{'justify-content': selectedTab != 'serviceListing' ? 'space-between' : 'end'}\">\n <span class=\"back-footer-btn cursor-pointer\" (click)=\"previousStep()\"\n *ngIf=\"selectedTab != 'serviceListing'\">Back</span>\n <button class=\"continue-btn\" [disabled]=\"!activeButton\" (click)=\"nextStep()\"\n *ngIf=\"selectedTab!='paymentTab'\">{{!loader ? 'Continue' : 'Loading...'}}</button>\n <button class=\"cursor-pointer d-flex justify-content-evenly align-items-center\"\n *ngIf=\"selectedTab==='paymentTab'\" (click)=\"confirmBooking()\" [disabled]=\"isProcessing\"\n [ngClass]=\"{'pay-now-btn' : bookingGroup?.totalCollectedAtBooking > 0 || !bookingGroup,'complete_booking' : bookingGroup && !bookingGroup?.totalCollectedAtBooking}\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\n {{isProcessing ? 'Please wait...' : 'Confirm Booking'}}\n </button>\n </div>\n </div>\n</section>\n\n<ng-template #modeSelection>\n <div class=\"w-60 service_section\">\n <div class=\"service-selection\">\n <h2>How would you like this?</h2>\n <p>Choose how you'd like to be served</p>\n <div class=\"services-grid\">\n <div class=\"service-card\" (click)=\"selectMode('STORE_VISIT')\">\n <div class=\"service-header\">\n <div class=\"service-icon\"><mat-icon>storefront</mat-icon></div>\n <div class=\"service-info\">\n <div class=\"service-title\">Visit our Store</div>\n </div>\n </div>\n <div class=\"service-description\">Come to us at one of our locations</div>\n </div>\n <div class=\"service-card\" (click)=\"selectMode('HOME_VISIT')\">\n <div class=\"service-header\">\n <div class=\"service-icon\"><mat-icon>home</mat-icon></div>\n <div class=\"service-info\">\n <div class=\"service-title\">We come to you</div>\n </div>\n </div>\n <div class=\"service-description\">A professional visits your address</div>\n </div>\n <div class=\"service-card\" (click)=\"selectMode('VIDEO_CALL')\">\n <div class=\"service-header\">\n <div class=\"service-icon\"><mat-icon>videocam</mat-icon></div>\n <div class=\"service-info\">\n <div class=\"service-title\">Video consultation</div>\n </div>\n </div>\n <div class=\"service-description\">Connect over a video call</div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #serviceListing>\n <div class=\"w-60 service_section\">\n <div class=\"service-selection\">\n <h2>Select a Service</h2>\n <p>Choose the service(s) you'd like to book<span *ngIf=\"cartServices.length > 0\"> \u2014 {{cartServices.length}} selected</span></p>\n <p *ngIf=\"productCartItems.length > 0\" class=\"cart-hint\">{{productCartItems.length}} product(s) already in your cart \u2014 you can continue without picking a service.</p>\n\n <div class=\"services-grid\">\n <ng-container *ngFor=\"let service of serviceData\">\n <div class=\"\" (click)=\"selectService(service)\"\n [ngClass]=\"{ 'service-card-selected' : service?.selected, 'service-card': !service?.selected }\">\n <div class=\" service-header\">\n <div class=\"service-icon\"><mat-icon>person_outline</mat-icon></div>\n <div class=\"service-info\">\n <div class=\"service-title\">{{service?.name ? service?.name : 'N/A'}}</div>\n </div>\n <div>\n <div class=\"service-price\">\u20B9{{service?.priceDetails?.price ?\n service?.priceDetails?.price : 'N/A' }}</div>\n <div class=\"service-duration\">{{service?.duration ? service?.duration : 'N/A'}} min\n </div>\n </div>\n </div>\n <div class=\"service-description\" *ngIf=\"service?.description\">\n {{service?.description ? service?.description : 'N/A'}}\n </div>\n <div class=\"home-visit\" *ngIf=\"selectedMode === 'STORE_VISIT' && service?.homeAppointmentAvailable\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/982126c1758628863129furniture_16406103.png\">Home\n Visit Available</div>\n </div>\n </ng-container>\n <div class=\"empty-state-mini\" *ngIf=\"serviceData.length === 0\">\n <mat-icon>inventory_2</mat-icon>\n <h4>No services available</h4>\n <p *ngIf=\"selectedMode === 'HOME_VISIT'\">No services are currently available for home visits.</p>\n <p *ngIf=\"selectedMode === 'VIDEO_CALL'\">No services are currently available for video calls.</p>\n <p *ngIf=\"selectedMode === 'STORE_VISIT'\">This business hasn't added any services yet.</p>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #locationListing>\n <div class=\"location_section\">\n <div class=\"header flex-column align-items-start\">\n <h1>Choose Location</h1>\n <p>Select where you'd like to receive the service</p>\n </div>\n\n <div class=\"location-list\">\n <ng-container *ngFor=\"let location of locationData\">\n <div (click)=\"selectLocation(location)\"\n [ngClass]=\"{ 'location-card-selected' : location?.selected, 'location-card': !location?.selected }\">\n <div class=\"location-content\">\n <div class=\"location-info\">\n <div class=\"location-icon\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/427226c1758629157758store_3171510.png\">\n </div>\n <div class=\"location-details\">\n <div class=\"d-flex justify-content-between align-items-center\">\n <h3>{{location?.storeName ? location?.storeName : 'N/A'}}</h3>\n </div>\n <p>{{location?.addressDetails?.addressLine}}, {{location?.addressDetails?.city}},\n {{location?.addressDetails?.state}} {{location?.pincode}}</p>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <div class=\"empty-state-mini\" *ngIf=\"locationData.length === 0\">\n <mat-icon>storefront</mat-icon>\n <h4>No locations available</h4>\n <p>There's no location available for this service right now.</p>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #staffListing>\n <div class=\"w-60 overflow-hidden staff-listing\">\n <div class=\"d-flex w-100 h-100\">\n <div class=\"w-100\">\n <div class=\"staff-header mb-3\">\n <h1>Select Staff Member</h1>\n <p class=\"staff-subtitle mb-0\">Choose your preferred professional, or skip to have us assign the best available one</p>\n </div>\n\n <div class=\"search-container mb-4\">\n <div class=\"search-input-wrapper d-flex align-items-center\">\n <mat-icon class=\"search-icon me-2\">search</mat-icon>\n <input type=\"text\" class=\"search-input border-0 flex-grow-1\" placeholder=\"Search staff member by name...\" [(ngModel)]=\"staffSearchQuery\">\n <mat-icon class=\"clear-icon cursor-pointer ms-2\" *ngIf=\"staffSearchQuery\" (click)=\"staffSearchQuery = ''\">close</mat-icon>\n </div>\n </div>\n\n <!-- Pure product-only line: one flat staff list, same as the old single-service flow -->\n <div class=\"staff-list\" *ngIf=\"cartServices.length === 0\">\n <ng-container *ngFor=\"let staff of filteredStaff\">\n <div class=\"card rounded-3 p-3\" (click)=\"selectStaffForProductOnlyLine(staff)\"\n [ngClass]=\"{ 'staff-card-selected' : staff?.selected, 'staff-card': !staff?.selected }\">\n <div class=\"d-flex align-items-center justify-content-between w-100\">\n <div class=\"d-flex align-items-center flex-grow-1\">\n <div class=\"staff-avatar rounded-circle d-flex align-items-center justify-content-center me-4\">\n {{staff?.staffName.slice(0,2).toUpperCase()}}\n </div>\n <div class=\"staff-details flex-grow-1\">\n <h3 class=\"staff-name\">{{(staff?.staffName ? staff?.staffName : 'N/A') | titlecase}}</h3>\n <p class=\"staff-specialty\">{{(businessName && businessName !== 'N/A') ? businessName : 'Booking Specialist'}}</p>\n </div>\n </div>\n <div class=\"selection-indicator\">\n <div class=\"checkmark-circle-mini d-flex align-items-center justify-content-center\" [class.selected]=\"staff?.selected\">\n <mat-icon *ngIf=\"staff?.selected\">check</mat-icon>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <div class=\"empty-state-mini\" *ngIf=\"filteredStaff.length === 0\">\n <mat-icon>badge</mat-icon>\n <h4>No staff available</h4>\n <p>There's no staff member available for this service right now.</p>\n </div>\n </div>\n\n <!-- Bundled cart: one pool per line that resolution couldn't collapse to a single provider -->\n <ng-container *ngIf=\"cartServices.length > 0\">\n <div class=\"staff-line-group mb-4\" *ngFor=\"let line of resolvedLines\">\n <ng-container *ngIf=\"line.candidateStaffPool?.length\">\n <h4 class=\"mb-2\">For {{line.services.length}} service(s): {{ (line.services | slice:0:3).length ? '' : '' }}<span *ngFor=\"let s of line.services; let last = last\">{{s.name}}{{last ? '' : ', '}}</span></h4>\n <div class=\"staff-list mb-3\">\n <ng-container *ngFor=\"let staff of line.candidateStaffPool\">\n <div class=\"card rounded-3 p-3\" (click)=\"selectStaffForLine(line, staff)\"\n [ngClass]=\"{ 'staff-card-selected' : line.selectedStaffId === staff.id, 'staff-card': line.selectedStaffId !== staff.id }\">\n <div class=\"d-flex align-items-center justify-content-between w-100\">\n <div class=\"d-flex align-items-center flex-grow-1\">\n <div class=\"staff-avatar rounded-circle d-flex align-items-center justify-content-center me-4\">\n {{staff?.name?.slice(0,2)?.toUpperCase()}}\n </div>\n <div class=\"staff-details flex-grow-1\">\n <h3 class=\"staff-name\">{{(staff?.name ? staff?.name : 'N/A') | titlecase}}</h3>\n </div>\n </div>\n <div class=\"selection-indicator\">\n <div class=\"checkmark-circle-mini d-flex align-items-center justify-content-center\" [class.selected]=\"line.selectedStaffId === staff.id\">\n <mat-icon *ngIf=\"line.selectedStaffId === staff.id\">check</mat-icon>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container>\n <div class=\"empty-state-mini\" *ngIf=\"!line.candidateStaffPool?.length\">\n <mat-icon>badge</mat-icon>\n <h4>No staff available</h4>\n <p>No staff member is available for {{line.services.length}} service(s) in this line.</p>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #dateSelection>\n <div class=\"w-60 date_section\">\n <div class=\"row justify-content-center h-100\">\n <div class=\"col-12 h-100\">\n <div class=\"datetime-header mb-2\">\n <h1>Select Date & Time</h1>\n <p class=\"datetime-subtitle mb-0\">Choose when you'd like your appointment</p>\n </div>\n\n <div class=\"d-flex gap-4 main_container\">\n <div [ngClass]=\"{'w-50' : screenWidth > 475 , 'w-100':screenWidth < 475}\">\n <div class=\"section-card card rounded-3 p-4 h-100\">\n <h3 class=\"section-title\">Select Date</h3>\n\n <div class=\"date-picker-container d-flex align-items-center justify-content-between\"\n (click)=\"$event.stopPropagation()\">\n <input type=\"text\" class=\"date-input border-0 rounded-2\" placeholder=\"dd-mm-yyyy\"\n [value]=\"selectedDateStr\" readonly (click)=\"toggleCalendar($event)\">\n\n <mat-icon class=\"ms-2\" (click)=\"toggleCalendar($event)\">calendar_today</mat-icon>\n </div>\n <div class=\"position-relative\" (click)=\"$event.stopPropagation()\">\n <div class=\"datepicker-popover\" *ngIf=\"showCalendar\">\n <mat-calendar [(selected)]=\"selectedDate\" [dateFilter]=\"dateFilter\"\n (selectedChange)=\"onDateSelected($event)\" class=\"datepicker-calendar\">\n </mat-calendar>\n </div>\n </div>\n </div>\n </div>\n\n <!-- One slot-picker per resolved line, side by side when there's more than one (design doc \u00A73b) -->\n <div class=\"time_selection\" [ngClass]=\"{'w-50' : screenWidth > 475 , 'w-100':screenWidth < 475}\" *ngIf=\"resolvedLines.length <= 1\">\n <div class=\"section-card card h-100 rounded-3 p-4\">\n <h3 class=\"section-title\">Available Times</h3>\n <div class=\"row g-2 mb-4 overflow-scroll\">\n <ng-container *ngIf=\"!skeletonLoader && resolvedLines[0]\">\n <div class=\"col-4\" *ngFor=\"let time of resolvedLines[0].slots\">\n <div class=\"time-slot rounded-2\" [class.selected]=\"time.selected\"\n (click)=\"selectSlotForLine(resolvedLines[0], time)\">{{time ? time?.value : 'N/A'}}</div>\n </div>\n <p class=\"mb-0\" *ngIf=\"resolvedLines[0].slots.length === 0\">No slots available for this date.</p>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Multi-line case: each line gets its own full-width card with a staff header -->\n <div class=\"d-flex gap-4 main_container flex-wrap\" *ngIf=\"resolvedLines.length > 1\">\n <div class=\"w-100\" *ngFor=\"let line of resolvedLines\">\n <div class=\"section-card card rounded-3 p-4\">\n <h3 class=\"section-title\">Professional: {{line.staffName || line.selectedStaffName || 'To be assigned'}}</h3>\n <p class=\"mb-2\" *ngIf=\"line.services.length\"><span *ngFor=\"let s of line.services; let last = last\">{{s.name}}{{last ? '' : ', '}}</span></p>\n <div class=\"row g-2 mb-2 overflow-scroll\">\n <ng-container *ngIf=\"!line.slotsLoading\">\n <div class=\"col-4\" *ngFor=\"let time of line.slots\">\n <div class=\"time-slot rounded-2\" [class.selected]=\"time.selected\"\n (click)=\"selectSlotForLine(line, time)\">{{time ? time?.value : 'N/A'}}</div>\n </div>\n <p class=\"mb-0\" *ngIf=\"line.slots.length === 0\">No slots available for this date.</p>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #contactDetails>\n <div class=\"w-60 contact_section\">\n <div class=\"contact-header mb-2\">\n <h1>Contact Details</h1>\n <p class=\"contact-subtitle mb-0\">Provide your contact information</p>\n </div>\n\n <div class=\"d-flex gap-3 details_container flex-column w-100\">\n <div class=\"d-flex gap-4\">\n <div [ngClass]=\"{'w-50' : selectedMode === 'HOME_VISIT', 'w-100' : selectedMode !== 'HOME_VISIT'}\">\n <div class=\"form-section card rounded-3 p-4 h-100\">\n <h3 class=\"section-title\">Personal Information</h3>\n\n <div class=\"mb-4\">\n <label class=\"form-label d-flex align-items-center\">\n Full Name\n <span class=\"required-asterisk\">*</span>\n </label>\n <input type=\"text\" class=\"form-control form-input rounded-2\"\n [(ngModel)]=\"appointmentPayload.customerDetail.name\"\n (ngModelChange)=\"checkRequiredValues()\" simpoLettersOnly>\n </div>\n\n <div class=\"mb-4\">\n <label class=\"form-label d-flex align-items-center\">\n Email Address\n <span class=\"required-asterisk\">*</span>\n </label>\n <input type=\"email\" class=\"form-control form-input rounded-2\"\n [(ngModel)]=\"appointmentPayload.customerDetail.email\"\n (ngModelChange)=\"checkRequiredValues()\"\n pattern=\"^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$\" #emailField=\"ngModel\"\n name=\"email\" required>\n </div>\n\n <div class=\"mb-0\">\n <label class=\"form-label d-flex align-items-center\">\n Phone Number\n <span class=\"required-asterisk\">*</span>\n </label>\n <input type=\"tel\" class=\"form-control rounded-2\"\n [(ngModel)]=\"appointmentPayload.customerDetail.phoneNumber\"\n (ngModelChange)=\"checkRequiredValues()\" simpoNumbersOnly\n [ngClass]=\"{'mobile_number' : appointmentPayload.customerDetail.phoneNumber.length != 10}\">\n </div>\n </div>\n </div>\n <!-- Home Visit address. Customer context: same saved-address flow as\n checkout/BookAppointmentComponent. Admin context (isAdminBooking): no\n logged-in customer account to read a saved address book from, so staff type\n the address manually instead. -->\n <div class=\"w-50\" *ngIf=\"selectedMode === 'HOME_VISIT'\">\n <div class=\"form-section card rounded-3 p-4 h-100\">\n <h3 class=\"section-title\">Home Visit Details</h3>\n\n <ng-container *ngIf=\"!isAdminBooking; else manualHomeVisitAddress\">\n <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\n <div class=\"address-info\">\n <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\n <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\n {{defaultAddress?.stateName}}</div>\n <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\n </div>\n </div>\n <button type=\"button\" class=\"change-address-btn w-100\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">\n CHANGE OR ADD ADDRESS\n </button>\n\n <div class=\"addLinks\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\n <mat-icon>add</mat-icon>\n <span class=\"ms-2\">Add an address</span>\n </div>\n </ng-container>\n\n <ng-template #manualHomeVisitAddress>\n <div class=\"mb-3\">\n <label class=\"form-label d-flex align-items-center\">Receiver Name</label>\n <input type=\"text\" class=\"form-control form-input rounded-2\" [(ngModel)]=\"homeVisitAddress.receiverName\" (ngModelChange)=\"checkRequiredValues()\">\n </div>\n <div class=\"mb-3\">\n <label class=\"form-label d-flex align-items-center\">Receiver Phone</label>\n <input type=\"tel\" class=\"form-control form-input rounded-2\" simpoNumbersOnly [(ngModel)]=\"homeVisitAddress.receiverPhone\" (ngModelChange)=\"checkRequiredValues()\">\n </div>\n <div class=\"mb-3\">\n <label class=\"form-label d-flex align-items-center\">Address Line 1</label>\n <input type=\"text\" class=\"form-control form-input rounded-2\" [(ngModel)]=\"homeVisitAddress.addressLine1\" (ngModelChange)=\"checkRequiredValues()\">\n </div>\n <div class=\"mb-3\">\n <label class=\"form-label d-flex align-items-center\">Address Line 2 (optional)</label>\n <input type=\"text\" class=\"form-control form-input rounded-2\" [(ngModel)]=\"homeVisitAddress.addressLine2\">\n </div>\n <div class=\"d-flex gap-2 mb-3\">\n <div class=\"w-50\">\n <label class=\"form-label d-flex align-items-center\">City</label>\n <input type=\"text\" class=\"form-control form-input rounded-2\" [(ngModel)]=\"homeVisitAddress.city\" (ngModelChange)=\"checkRequiredValues()\">\n </div>\n <div class=\"w-50\">\n <label class=\"form-label d-flex align-items-center\">State</label>\n <input type=\"text\" class=\"form-control form-input rounded-2\" [(ngModel)]=\"homeVisitAddress.state\">\n </div>\n </div>\n <div class=\"mb-3\">\n <label class=\"form-label d-flex align-items-center\">Pincode</label>\n <input type=\"text\" class=\"form-control form-input rounded-2\" simpoNumbersOnly [(ngModel)]=\"homeVisitAddress.zipCode\" (ngModelChange)=\"checkRequiredValues()\">\n </div>\n </ng-template>\n\n <div class=\"mb-0 mt-3\">\n <label class=\"form-label d-flex align-items-center\">Special Instructions</label>\n <textarea class=\"form-control form-textarea rounded-2\"\n placeholder=\"Any special instructions for the professional (optional)\"\n [(ngModel)]=\"instructions\"></textarea>\n </div>\n </div>\n </div>\n </div>\n <div class=\"policies-container\"\n *ngIf=\"cartServices[0]?.cancellationPolicy?.length > 0 || cartServices[0]?.reschedulePolicy?.length\">\n <h2 class=\"policies-title\">Policies & Terms</h2>\n\n <div class=\"policy-items-container d-flex flex-column gap-3\">\n <div class=\"policy-item d-flex justify-content-between align-items-center\"\n (click)=\"showCancellationPolicy = !showCancellationPolicy\">\n <h3 class=\"policy-title\">Cancellation Policy</h3>\n <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\n *ngIf=\"!showCancellationPolicy\">keyboard_arrow_right</mat-icon>\n <mat-icon *ngIf=\"showCancellationPolicy\">keyboard_arrow_down</mat-icon>\n </div>\n </div>\n <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\n *ngIf=\"showCancellationPolicy\">\n <span *ngFor=\"let policy of cartServices[0]?.cancellationPolicy\">•\n {{policy}}</span>\n </div>\n\n <div class=\"policy-item d-flex justify-content-between align-items-center\"\n (click)=\"showReducingPolicy = !showReducingPolicy\">\n <h3 class=\"policy-title\">Rescheduling Policy</h3>\n <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\n *ngIf=\"!showReducingPolicy\">keyboard_arrow_right</mat-icon>\n <mat-icon *ngIf=\"showReducingPolicy\">keyboard_arrow_down</mat-icon>\n </div>\n </div>\n <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\n *ngIf=\"showReducingPolicy\">\n <span *ngFor=\"let policy of cartServices[0]?.reschedulePolicy\">• {{policy}}</span>\n </div>\n </div>\n\n <div class=\"acceptance-section\">\n <input type=\"checkbox\" class=\"custom-checkbox\" [(ngModel)]=\"termsAndConditions\"\n (ngModelChange)=\"checkRequiredValues()\">\n <p class=\"acceptance-text\" style=\"margin-bottom:0px !important\">\n I understand and accept the cancellation & rescheduling policies.\n </p>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #paymentTab>\n <div class=\"w-60 payment_section\">\n <div class=\"w-100 h-100\">\n <div class=\"w-100 d-flex justify-content-center align-items-center flex-column\">\n <div class=\"payment-header mb-3 w-100\">\n <h1 style=\"font-size:24px;font-weight: 600;\">Booking Summary</h1>\n <p class=\"payment-subtitle mb-0\">Review your booking before confirming</p>\n </div>\n\n <div class=\"booking-summary-card\" [ngClass]=\"{'w-100' : screenWidth < 475,'w-50':screenWidth > 475}\">\n <div *ngFor=\"let line of resolvedLines; let i = index\">\n <h2 class=\"summary-title\" *ngIf=\"resolvedLines.length > 1\">Line {{i + 1}}</h2>\n <div class=\"summary-row\" *ngFor=\"let s of line.services\">\n <div class=\"summary-label\">{{s.name}}</div>\n <div class=\"summary-value\"><span class=\"currency-symbol\">\u20B9</span>{{servicePrice(s.id)}}</div>\n </div>\n <div class=\"summary-row\" *ngIf=\"line.staffName || line.selectedStaffName\">\n <div class=\"summary-label\">Professional</div>\n <div class=\"summary-value\">{{line.staffName || line.selectedStaffName}}</div>\n </div>\n <div class=\"summary-row\" *ngIf=\"selectedMode === 'STORE_VISIT'\">\n <div class=\"summary-label\">Location</div>\n <div class=\"summary-value\">{{selectedLocation?.storeName ?? 'N/A'}}</div>\n </div>\n <div class=\"summary-row\">\n <div class=\"summary-label\">Date & Time</div>\n <div class=\"summary-value\">{{selectedDateStr}} at {{line.selectedSlot?.value ?? 'N/A'}}</div>\n </div>\n </div>\n\n <div *ngIf=\"productCartItems.length > 0\">\n <h2 class=\"summary-title\">Products</h2>\n <div class=\"summary-row\" *ngFor=\"let p of productCartItems\">\n <div class=\"summary-label\">{{p.itemName}} x{{p.quantity}}</div>\n <div class=\"summary-value\"><span class=\"currency-symbol\">\u20B9</span>{{(p.sellingPrice ?? p.price ?? 0) * (p.quantity ?? 1)}}</div>\n </div>\n </div>\n\n <h2 class=\"summary-title\">Payment</h2>\n <div class=\"summary-row\" *ngIf=\"homeVisitCharge > 0\">\n <div class=\"summary-label\">Home visit charge</div>\n <div class=\"summary-value\"><span class=\"currency-symbol\">\u20B9</span>{{homeVisitCharge}}</div>\n </div>\n <div class=\"summary-row\">\n <div class=\"summary-label\">Total</div>\n <div class=\"summary-value\"><span class=\"currency-symbol\">\u20B9</span>{{reviewTotal}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #statusTemplate>\n <div class=\"booking-confirmation\">\n <div class=\"success-icon\">\n <div class=\"checkmark-circle\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/881293c1758695578518success.gif\"\n class=\"w-100 h-100\" *ngIf=\"apiStatus\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/325000c1758695564518fail.gif\"\n class=\"w-100 h-100\" *ngIf=\"!apiStatus\">\n </div>\n </div>\n\n <div class=\"confirmation-content\">\n <h1 class=\"confirmation-title\">{{apiStatus ? 'Booking Confirmed!' : 'Booking Failed'}}</h1>\n <p class=\"confirmation-message\">\n {{apiStatus ? 'Your appointment has been successfully booked.':'Failed to book you appointment. Please\n try again later'}}\n </p>\n\n <!-- Video Call link, when already present on the confirmed group (a paid Video Call's\n link only appears once payment verification completes, handled elsewhere - see\n verify-payment.component.ts, not this screen). -->\n <div class=\"video-call-link-card d-flex align-items-center justify-content-center\" *ngIf=\"apiStatus && selectedMode === 'VIDEO_CALL' && bookingGroup?.videoCallLink\">\n <div class=\"details-card\">\n <h3 class=\"details-title\">Your Video Call Link</h3>\n <a [href]=\"bookingGroup.videoCallLink\" target=\"_blank\">{{bookingGroup.videoCallLink}}</a>\n </div>\n </div>\n\n <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus\">\n <div class=\"details-card\">\n <h3 class=\"details-title\">Appointment Details</h3>\n <div class=\"details-row\" *ngFor=\"let line of resolvedLines\">\n <span class=\"detail-label\">{{line.services.length ? (line.services[0].name) : 'Products'}}</span>\n <span class=\"detail-value\">{{selectedDateStr}} at {{line.selectedSlot?.value ?? 'N/A'}}</span>\n </div>\n </div>\n </div>\n\n <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus\">\n <div class=\"details-card\">\n <h3 class=\"details-title\">Payment</h3>\n <div class=\"details-row\" *ngIf=\"bookingGroup?.homeVisitCharge > 0\">\n <span class=\"detail-label\">Home visit charge</span>\n <span class=\"detail-value\">\u20B9{{bookingGroup.homeVisitCharge}}</span>\n </div>\n <div class=\"details-row\">\n <span class=\"detail-label\">Total</span>\n <span class=\"detail-value\">\u20B9{{bookingTotal}}</span>\n </div>\n <div class=\"details-row\">\n <span class=\"detail-label\">Paid</span>\n <span class=\"detail-value\">\u20B9{{bookingPaid}}</span>\n </div>\n <div class=\"details-row\" *ngIf=\"bookingDue > 0\">\n <span class=\"detail-label\">Due</span>\n <span class=\"detail-value\">\u20B9{{bookingDue}}</span>\n </div>\n </div>\n </div>\n\n <div class=\"done-actions d-flex align-items-center justify-content-center\" *ngIf=\"apiStatus\">\n <ng-container *ngIf=\"!isAdminContext; else adminDoneActions\">\n <button type=\"button\" class=\"done-btn done-btn-primary\" (click)=\"goToMyBookings()\">View my bookings</button>\n <button type=\"button\" class=\"done-btn done-btn-secondary\" (click)=\"goToListing()\">Keep shopping</button>\n </ng-container>\n <ng-template #adminDoneActions>\n <button type=\"button\" class=\"done-btn done-btn-primary\" (click)=\"goToAppointmentsList()\">Back to Appointments List</button>\n <button type=\"button\" class=\"done-btn done-btn-secondary\" (click)=\"bookAnother()\">Book Another</button>\n </ng-template>\n </div>\n </div>\n </div>\n</ng-template>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap\";mat-icon{font-family:Material Icons!important}:host{--font-sans: \"Outfit\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;--slate-50: #f8fafc;--slate-100: #f1f5f9;--slate-200: #e2e8f0;--slate-300: #cbd5e1;--slate-400: #94a3b8;--slate-500: #64748b;--slate-600: #475569;--slate-700: #334155;--slate-800: #1e293b;--slate-900: #0f172a;--color-primary: #230860;--color-secondary: #00b6ff;--color-accent-gradient: linear-gradient(135deg, #230860 0%, #00b6ff 100%);--color-success: #10b981;--color-success-bg: #ecfdf5;--color-error: #ef4444;--color-error-bg: #fef2f2;--border-radius-sm: 8px;--border-radius-md: 12px;--border-radius-lg: 16px;--border-radius-xl: 24px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .05), 0 2px 4px -2px rgba(0, 0, 0, .05);--shadow-lg: 0 10px 15px -3px rgba(35, 8, 96, .05), 0 4px 6px -4px rgba(35, 8, 96, .05);--shadow-xl: 0 20px 25px -5px rgba(35, 8, 96, .08), 0 8px 10px -6px rgba(35, 8, 96, .08);--transition-smooth: all .3s cubic-bezier(.4, 0, .2, 1);--transition-bounce: all .4s cubic-bezier(.175, .885, .32, 1.275)}*{box-sizing:border-box;font-family:var(--font-sans)}.main_section{position:relative;height:100vh;background-color:var(--slate-50);display:flex;flex-direction:column;overflow:hidden}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.main_header{padding:15px;background:#fff;border-bottom:1px solid var(--slate-100);flex-shrink:0;box-shadow:0 2px 8px #00000003}.header{display:flex;align-items:center;justify-content:space-between}.back-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem 1.2rem;border-radius:var(--border-radius-md);background:var(--slate-50);border:1px solid var(--slate-200);color:var(--slate-700)!important;transition:var(--transition-smooth);font-weight:500;font-size:.9rem;cursor:pointer}.back-btn mat-icon{font-size:18px!important;width:18px!important;height:18px!important;color:var(--slate-700)!important;display:flex;align-items:center;justify-content:center}.back-btn:hover{background:var(--slate-100);transform:translate(-3px);color:var(--slate-900)!important}.header-title{flex-grow:1;text-align:right}.header-title h1{font-size:1.5rem;font-weight:700;margin-bottom:.2rem;color:var(--slate-900)!important;letter-spacing:-.025em}.header-title p{color:var(--slate-500)!important;font-size:.9rem;font-weight:500;margin-bottom:0}.progress-bar{width:100%;height:6px;background-color:var(--slate-100);margin-top:3px;border-radius:10px;overflow:hidden;position:relative}.progress-fill{height:100%;background:var(--color-accent-gradient);border-radius:10px;transition:width .5s cubic-bezier(.4,0,.2,1);position:relative}.progress-fill:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,#fff0,#ffffff4d,#fff0);animation:shimmer 2s infinite linear}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.main_body{flex-grow:1;overflow-y:auto;padding:10px;display:flex;justify-content:center;background:var(--slate-50)}.w-60{width:100%;max-width:800px}.service_section,.location_section,.staff-listing,.date_section,.contact_section,.payment_section,.booking-confirmation{animation:slideUp .5s cubic-bezier(.16,1,.3,1) forwards}@keyframes slideUp{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}h2{font-size:1.5rem;font-weight:700;color:var(--slate-900)!important;letter-spacing:-.02em;margin-bottom:.3rem}p.subtitle,.service-selection p,.location_section p,.staff-subtitle,.datetime-subtitle,.contact-subtitle,.payment-subtitle{color:var(--slate-500)!important;font-size:13px;margin-bottom:2rem}.services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.5rem;padding-bottom:2rem}.service-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:180px}.service-card:hover{border-color:var(--slate-400);transform:translateY(-4px);box-shadow:var(--shadow-lg)}.service-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:180px;transform:translateY(-2px)}.service-card-selected:before,.location-card-selected:before{content:\"\\2713\";position:absolute;top:-10px;right:-10px;background:var(--color-accent-gradient);color:#fff!important;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;box-shadow:0 4px 8px #2308604d;animation:popIn .3s cubic-bezier(.175,.885,.32,1.275);z-index:10}@keyframes popIn{0%{transform:scale(0)}to{transform:scale(1)}}.service-header{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1rem}.service-icon{width:48px;height:48px;border-radius:var(--border-radius-md);background-color:var(--slate-100);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition-smooth)}.service-icon mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:var(--color-primary)!important}.service-card-selected .service-icon{background:var(--slate-900)}.service-card-selected .service-icon mat-icon{color:#fff!important}.service-info{flex-grow:1}.service-title{font-size:1.15rem;font-weight:700;color:var(--slate-900)!important;line-height:1.3;margin-bottom:.2rem}.service-price{font-size:1.25rem;font-weight:800;color:var(--slate-900)!important;text-align:right}.service-duration{font-size:.8rem;color:var(--slate-500)!important;font-weight:600;text-align:right;margin-top:.1rem}.service-description{color:var(--slate-600)!important;font-size:.9rem;line-height:1.5;margin-bottom:1.25rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.home-visit{align-self:flex-start;display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:600;color:var(--slate-700)!important;border:1px solid var(--slate-200);padding:.35rem .75rem;border-radius:20px;background-color:var(--slate-50);transition:var(--transition-smooth)}.home-visit img{width:14px;height:14px}.home-visit:before{content:\"\";display:inline-block;width:6px;height:6px;border-radius:50%;background-color:var(--color-success);box-shadow:0 0 #10b98166;animation:pulseGlow 1.8s infinite}@keyframes pulseGlow{0%{box-shadow:0 0 #10b981b3}70%{box-shadow:0 0 0 6px #10b98100}to{box-shadow:0 0 #10b98100}}.location-list{display:flex;flex-direction:column;gap:1.25rem;padding-bottom:2rem}.location-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm)}.location-card:hover{border-color:var(--slate-400);transform:translateY(-2px);box-shadow:var(--shadow-md)}.location-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);transform:translateY(-1px)}.location-content{display:flex;align-items:center}.location-info{display:flex;align-items:center;gap:1.25rem;width:100%}.location-icon{width:52px;height:52px;background-color:var(--slate-100);border-radius:var(--border-radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition-smooth)}.location-icon img{width:28px;height:28px}.location-card-selected .location-icon{background:var(--slate-900)}.location-details{flex-grow:1}.location-details h3{font-size:1.15rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:.3rem}.location-details p{font-size:.9rem;color:var(--slate-500)!important;font-weight:450;line-height:1.4;margin-bottom:0}.search-container{width:100%;margin-bottom:1.25rem}.search-input-wrapper{width:100%;background-color:var(--slate-100);border:1.5px solid var(--slate-200);border-radius:var(--border-radius-md);padding:.6rem 1rem;transition:var(--transition-smooth)}.search-input-wrapper:focus-within{background-color:#fff;border-color:var(--color-primary);box-shadow:0 0 0 3px #23086014}.search-input{font-size:.95rem;font-weight:500;color:var(--slate-900)!important;background:transparent;outline:none;width:100%}.search-input::placeholder{color:var(--slate-400)}.search-icon{color:var(--slate-400)!important;font-size:20px!important;width:20px!important;height:20px!important}.clear-icon{color:var(--slate-400)!important;font-size:18px!important;width:18px!important;height:18px!important;transition:var(--transition-smooth)}.clear-icon:hover{color:var(--slate-600)!important}.staff-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem;max-height:48vh;overflow-y:auto;padding-right:.5rem;padding-bottom:1rem}.staff-list::-webkit-scrollbar{width:6px}.staff-list::-webkit-scrollbar-track{background:var(--slate-50);border-radius:4px}.staff-list::-webkit-scrollbar-thumb{background:var(--slate-200);border-radius:4px}.staff-list::-webkit-scrollbar-thumb:hover{background:var(--slate-300)}.staff-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:.9rem 1.25rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm);margin-bottom:0!important}.staff-card:hover{border-color:var(--slate-300);transform:translateY(-2px);box-shadow:var(--shadow-md)}.staff-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:.9rem 1.25rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);transform:translateY(-1px);margin-bottom:0!important}.staff-avatar{width:48px;height:48px;background:var(--color-accent-gradient);font-size:.95rem;font-weight:700;color:#fff!important;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 10px #2308601a;letter-spacing:.5px;transition:var(--transition-smooth)}.staff-card-selected .staff-avatar{transform:scale(1.05)}.staff-name{font-size:1.05rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:.2rem;letter-spacing:-.015em}.staff-specialty{font-size:.8rem;color:var(--slate-500)!important;font-weight:600;margin-bottom:0;text-transform:uppercase;letter-spacing:.05em}.selection-indicator{display:flex;align-items:center;justify-content:center;margin-left:auto;padding-left:1rem}.checkmark-circle-mini{width:24px;height:24px;border:2px solid var(--slate-300);border-radius:50%;background-color:#fff;transition:var(--transition-bounce);color:#fff!important}.checkmark-circle-mini.selected{background:var(--color-accent-gradient);border-color:transparent;box-shadow:0 3px 8px #23086040}.checkmark-circle-mini mat-icon{font-size:14px!important;width:14px!important;height:14px!important;color:#fff!important;font-weight:800!important;display:flex;align-items:center;justify-content:center}.main_container{display:flex;gap:2rem;margin-bottom:2rem}.section-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.75rem;box-shadow:var(--shadow-sm);height:100%}.section-title{font-size:1.1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:10px!important;letter-spacing:-.01em}.date-picker-container{border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:.6rem 1rem;display:flex;align-items:center;justify-content:space-between;transition:var(--transition-smooth);background-color:var(--slate-50);cursor:pointer}.date-picker-container:hover{border-color:var(--slate-400);background-color:#fff}.date-input{font-size:.95rem;font-weight:600;color:var(--slate-800)!important;background:transparent;border:none;outline:none;cursor:pointer;width:100%}.date-picker-container mat-icon{color:var(--color-primary)!important;font-size:20px!important;width:20px!important;height:20px!important}.datepicker-popover{position:absolute;z-index:1000;margin-top:4px;border-radius:var(--border-radius-lg);overflow:hidden;box-shadow:var(--shadow-xl);background:#fff;border:1px solid var(--slate-200);width:320px}::ng-deep .datepicker-calendar{border-radius:var(--border-radius-lg)!important;width:100%!important}::ng-deep .mat-calendar-header{background:var(--color-accent-gradient)!important;color:#fff!important;padding:.5rem!important}::ng-deep .mat-calendar-content{padding:8px!important}::ng-deep .mat-calendar-controls{margin:0!important}::ng-deep .mat-calendar-period-button{color:#fff!important;font-weight:700!important;font-size:1rem!important}::ng-deep .mat-calendar-arrow{fill:#fff!important}::ng-deep .mat-calendar-previous-button,::ng-deep .mat-calendar-next-button{color:#fff!important}::ng-deep .mat-calendar-body-cell{font-size:13px!important}::ng-deep .mat-calendar-body-cell-content{font-weight:600!important;color:var(--slate-800)!important;border-radius:8px!important}::ng-deep .mat-calendar-body-selected{background:var(--color-accent-gradient)!important;color:#fff!important;box-shadow:0 4px 10px #23086033!important}::ng-deep .mat-calendar-body-today:not(.mat-calendar-body-selected){border:2px solid var(--color-primary)!important;color:var(--color-primary)!important}.time_selection{max-height:420px;display:flex;flex-direction:column}.time_selection .row{flex-grow:1;overflow-y:auto;padding-right:.25rem;margin-top:10px}.time-slot{background:#fff;border:1px solid var(--slate-200);font-size:.9rem;font-weight:600;color:var(--slate-800)!important;padding:.75rem .5rem;border-radius:var(--border-radius-md);cursor:pointer;transition:var(--transition-smooth);text-align:center;box-shadow:var(--shadow-sm)}.time-slot:hover{border-color:var(--slate-400);transform:translateY(-2px);box-shadow:var(--shadow-md);background-color:var(--slate-50)}.time-slot.selected{background:var(--color-accent-gradient);border-color:transparent;color:#fff!important;box-shadow:0 4px 12px #23086033}.form-section{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.75rem;box-shadow:var(--shadow-sm)}.form-label{font-size:.85rem;font-weight:600;color:var(--slate-700)!important;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.05em}.required-asterisk{color:var(--color-error);margin-left:2px}.form-control,.form-input,.form-textarea{width:100%;background-color:var(--slate-50);border:1px solid var(--slate-200);color:var(--slate-900)!important;font-size:.95rem;font-weight:500;padding:.75rem 1rem;border-radius:var(--border-radius-md);transition:var(--transition-smooth);outline:none}.form-control:focus,.form-input:focus,.form-textarea:focus{background-color:#fff;border-color:var(--color-primary);box-shadow:0 0 0 3px #2308601a}.form-textarea{min-height:100px;resize:vertical}.policies-container{background-color:#fff;border:1px solid var(--slate-200);padding:1.75rem;border-radius:var(--border-radius-lg);margin-top:1.5rem;box-shadow:var(--shadow-sm)}.policies-title{font-size:1.1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:1.25rem}.policy-item{background-color:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:1rem 1.25rem;cursor:pointer;transition:var(--transition-smooth);display:flex;justify-content:space-between;align-items:center}.policy-item:hover{background-color:var(--slate-100);border-color:var(--slate-300)}.policy-title{font-size:.95rem;font-weight:600;color:var(--slate-800)!important}.policy-arrow mat-icon{color:var(--slate-500)!important;transition:var(--transition-smooth)}.cancellation_policies{background-color:var(--slate-50);padding:1rem 1.5rem;border-left:3px solid var(--color-primary);border-radius:0 0 var(--border-radius-md) var(--border-radius-md);margin-top:-4px;margin-bottom:1rem;font-size:.9rem;color:var(--slate-600)!important;line-height:1.5}.acceptance-section{display:flex;align-items:center;gap:.75rem;margin-top:1.5rem}.custom-checkbox{width:20px;height:20px;border:2px solid var(--slate-300);border-radius:6px;cursor:pointer;transition:var(--transition-smooth);position:relative;appearance:none;background-color:#fff;outline:none}.custom-checkbox:checked{background:var(--color-accent-gradient);border-color:transparent}.custom-checkbox:checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff!important;font-size:.75rem;font-weight:800}.acceptance-text{font-size:.95rem;color:var(--slate-700)!important;font-weight:500;-webkit-user-select:none;user-select:none;line-height:1.4}.booking-summary-card{background-color:#fff;border:1px solid var(--slate-200);padding:2rem;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);position:relative}.booking-summary-card:after{content:\"\";position:absolute;bottom:-1px;left:0;right:0;height:10px;background-image:radial-gradient(circle,white 4px,transparent 5px);background-size:12px 12px;background-position:0 0;z-index:2}.summary-title{font-size:1.25rem;font-weight:700;color:var(--slate-900)!important;border-bottom:2px dashed var(--slate-200);padding-bottom:1rem;margin-bottom:1.5rem;text-align:center}.summary-row{display:flex;justify-content:space-between;align-items:center;padding:.85rem 0;border-bottom:1px solid var(--slate-100)}.summary-label{font-size:.95rem;color:var(--slate-500)!important;font-weight:500}.summary-value{font-size:.95rem;color:var(--slate-900)!important;font-weight:600;text-align:right}.total-row{margin-top:1rem;padding-top:1.25rem;border-top:2px dashed var(--slate-200);border-bottom:none}.total-row .summary-label{font-size:1.25rem;font-weight:700;color:var(--slate-900)!important}.total-row .summary-value{font-size:1.5rem;font-weight:800;color:var(--color-primary)!important}.booking-confirmation{background:#fff;border:1px solid var(--slate-200);padding:3rem 2rem;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;align-items:center;text-align:center;max-width:500px;margin:0 auto}.success-icon{margin-bottom:1.5rem}.checkmark-circle{width:96px;height:96px;display:flex;align-items:center;justify-content:center}.confirmation-title{font-size:1.5rem;font-weight:800;color:var(--slate-900)!important;margin-bottom:.5rem}.confirmation-message{font-size:1rem;color:var(--slate-500)!important;line-height:1.6;margin-bottom:2rem;font-weight:450}.details-card{background-color:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:1.5rem;width:100%;margin-bottom:2rem;text-align:left}.details-title{font-size:1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.05em}.details-row{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px dashed var(--slate-200)}.details-row:last-child{border-bottom:none}.detail-label{font-size:.85rem;color:var(--slate-500)!important;font-weight:500}.detail-value{font-size:.9rem;color:var(--slate-900)!important;font-weight:600}.main_footer{border-top:1px solid var(--slate-200);background-color:#fff;padding:15px;flex-shrink:0;display:flex;justify-content:center;box-shadow:0 -4px 12px #00000005}.footer-buttons{width:100%;max-width:800px;display:flex;align-items:center}.back-footer-btn{font-size:.95rem;font-weight:600;color:var(--slate-600)!important;padding:.75rem 1.5rem;border-radius:var(--border-radius-md);transition:var(--transition-smooth);cursor:pointer}.back-footer-btn:hover{color:var(--slate-900)!important;background-color:var(--slate-100)}.continue-btn{background:var(--color-accent-gradient);color:#fff!important;border:none;padding:.75rem 2rem;border-radius:var(--border-radius-md);font-size:.95rem!important;font-weight:600;cursor:pointer;transition:var(--transition-smooth);box-shadow:0 4px 10px #23086033;width:max-content!important}.continue-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.continue-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed!important;box-shadow:none!important}.complete_booking,.pay-now-btn{background:var(--color-accent-gradient)!important;color:#fff!important;border:none;padding:.75rem 2.25rem!important;font-size:.95rem!important;font-weight:600;border-radius:var(--border-radius-md)!important;box-shadow:0 4px 12px #23086040;transition:var(--transition-smooth);cursor:pointer;display:flex;align-items:center;gap:.5rem;width:max-content!important}.complete_booking img,.pay-now-btn img{width:20px;height:20px;filter:brightness(0) invert(1)}.complete_booking:hover:not([disabled]),.pay-now-btn:hover:not([disabled]){transform:translateY(-2px);box-shadow:0 6px 18px #23086059}.complete_booking:disabled,.pay-now-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed;box-shadow:none}.service-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.5rem;padding:0;width:100%}.skeleton-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;height:180px;display:flex;flex-direction:column;justify-content:space-between}.skeleton{background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0,#f1f5f9 75%);background-size:200% 100%;animation:loading-shimmer 1.5s infinite linear;border-radius:4px}@keyframes loading-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-icon{width:48px;height:48px;border-radius:var(--border-radius-md)}.skeleton-title{height:20px;width:60%;margin-bottom:.5rem}.skeleton-price{height:20px;width:30%}.skeleton-duration{height:12px;width:25%;margin-top:.25rem}.skeleton-description{height:14px;width:85%}.skeleton-badge{height:28px;width:120px;border-radius:20px}.time-slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;width:100%}.skeleton-time-slot{height:42px;border-radius:var(--border-radius-md);background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0,#f1f5f9 75%);background-size:200% 100%;animation:loading-shimmer 1.5s infinite linear;border:1px solid var(--slate-100)}@media screen and (max-width: 475px){.main_header{padding:1rem}.header-title h1{font-size:1.25rem}.back-btn{padding:.5rem .8rem}.back-btn span{display:none}.main_body{padding:15px}.services-grid{grid-template-columns:1fr;gap:1rem}.staff-list{grid-template-columns:1fr!important;gap:.85rem!important}.service-card,.service-card-selected{min-height:auto}.main_container{flex-direction:column;gap:1.5rem}.datepicker-popover{width:100%;left:0}.details_container{gap:1.5rem}.details_container>.d-flex{flex-direction:column;gap:1.5rem}.details_container>.d-flex>div{width:100%!important}.booking-summary-card{padding:1.25rem}.summary-title{font-size:1.15rem}.total-row .summary-label{font-size:1.1rem}.total-row .summary-value{font-size:1.3rem}.main_footer{padding:1rem}.continue-btn{padding:.75rem 1.5rem}}.shipping-info{border-radius:10px;padding:20px;margin-bottom:12px;border:1px solid var(--slate-200);box-shadow:var(--shadow-sm)}.address-info{margin-bottom:0}.address-name{font-weight:700;margin-bottom:8px;color:var(--slate-900)!important}.address-details{color:var(--slate-500)!important;margin-bottom:8px}.mobile-number{font-weight:700;color:var(--slate-900)!important;font-size:15px}.change-address-btn{font-size:.85rem!important;font-weight:700!important;padding:10px;background:#fff;border:1px solid var(--slate-200);border-radius:8px;color:var(--slate-900)!important;cursor:pointer;transition:var(--transition-smooth)}.change-address-btn:hover{border-color:var(--color-primary);color:var(--color-primary)!important}.addLinks{padding:14px;border:1px dashed var(--slate-300);display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:8px;color:var(--slate-500)!important;margin-bottom:12px}.addLinks:hover{border-color:var(--color-primary);color:var(--color-primary)!important}h1{font-size:24px!important;font-weight:600!important}.done-actions{display:flex;gap:12px;width:100%}.done-btn{flex:1;max-width:220px;padding:.75rem 1.5rem;border-radius:var(--border-radius-md);font-size:.95rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth);border:none}.done-btn-primary{background:var(--color-accent-gradient);color:#fff!important;box-shadow:0 4px 10px #23086033}.done-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.done-btn-secondary{background:#fff;color:var(--slate-600)!important;border:1px solid var(--slate-200)}.empty-state-mini{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:48px 16px;color:var(--slate-500)}.empty-state-mini mat-icon{font-size:32px;height:32px;width:32px;color:var(--slate-300);margin-bottom:4px}.empty-state-mini h4{margin:0;font-size:15px;font-weight:600;color:var(--slate-700)}.empty-state-mini p{margin:0;font-size:13px;color:var(--slate-500)}.done-btn-secondary:hover{background-color:var(--slate-100);color:var(--slate-900)!important}\n"], dependencies: [{ 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.SlicePipe, name: "slice" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i9$2.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i9.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: i9.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i9.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: LettersOnlyDirective, selector: "[simpoLettersOnly]" }, { kind: "directive", type: NumbersOnlyDirective, selector: "[simpoNumbersOnly]" }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }] }); }
|
|
26129
26285
|
}
|
|
26130
26286
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppointmentBookingComponent, decorators: [{
|
|
26131
26287
|
type: Component,
|
|
26132
|
-
args: [{ selector: 'simpo-appointment-booking', standalone: true, imports: [CdkDragPlaceholder, CommonModule, MatIcon, MatFormFieldModule, MatDatepickerModule, FormsModule, MatNativeDateModule, MatInputModule, MatDialogModule, LettersOnlyDirective, NumbersOnlyDirective, ToastModule, HoverDirective, HoverElementsComponent, BackgroundDirective], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n [showTransformOptions]=\"screenWidth < 475 ? 'translateY(-100%)' : ''\"></p-toast>\n<section class=\"main_section\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\n [simpoBackground]=\"backgroundInfo\" [style.--color-accent-gradient]=\"accentColor\">\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div class=\"main_header\">\n <div class=\"header d-flex justify-content-between align-items-center\">\n <div class=\"back-btn d-flex justify-content-center align-items-center cursor-pointer gap-2 mb-3\"\n (click)=\"goBack()\">\n <mat-icon>keyboard_backspace</mat-icon><span *ngIf=\"screenWidth > 475\">Back to Home</span>\n </div>\n <div class=\"header-title\">\n <h1>Book New Appointment</h1>\n <p>{{businessName ?? \"N/A\" }}</p>\n </div>\n </div>\n\n <div class=\"progress-bar\">\n <div class=\"progress-fill\" [style.width]=\"barWidth + '%'\"></div>\n </div>\n </div>\n <div class=\"main_body w-100 d-flex justify-content-center\">\n <ng-container *ngIf=\"selectedTab === 'modeSelection'\">\n <ng-container *ngTemplateOutlet=\"modeSelection\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"selectedTab === 'serviceListing'\">\n <ng-container *ngIf=\"!skeletonLoader\">\n <ng-container *ngTemplateOutlet=\"serviceListing\"></ng-container>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"selectedTab === 'locationListing'\">\n <ng-container *ngTemplateOutlet=\"locationListing\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"selectedTab === 'staffListing'\">\n <ng-container *ngTemplateOutlet=\"staffListing\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"selectedTab === 'dateSelection'\">\n <ng-container *ngTemplateOutlet=\"dateSelection\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"selectedTab==='contactDetails'\">\n <ng-container *ngTemplateOutlet=\"contactDetails\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"selectedTab==='paymentTab'\">\n <ng-container *ngTemplateOutlet=\"paymentTab\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"selectedTab==='statusTemplate'\">\n <ng-container *ngTemplateOutlet=\"statusTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"main_footer d-flex justify-content-center align-items-center\"\n *ngIf=\"selectedTab!=='statusTemplate' && selectedTab!=='modeSelection'\">\n <div class=\"footer-buttons\"\n [ngStyle]=\"{'justify-content': selectedTab != 'serviceListing' ? 'space-between' : 'end'}\">\n <span class=\"back-footer-btn cursor-pointer\" (click)=\"previousStep()\"\n *ngIf=\"selectedTab != 'serviceListing'\">Back</span>\n <button class=\"continue-btn\" [disabled]=\"!activeButton\" (click)=\"nextStep()\"\n *ngIf=\"selectedTab!='paymentTab'\">{{!loader ? 'Continue' : 'Loading...'}}</button>\n <button class=\"cursor-pointer d-flex justify-content-evenly align-items-center\"\n *ngIf=\"selectedTab==='paymentTab'\" (click)=\"confirmBooking()\" [disabled]=\"isProcessing\"\n [ngClass]=\"{'pay-now-btn' : bookingGroup?.totalCollectedAtBooking > 0 || !bookingGroup,'complete_booking' : bookingGroup && !bookingGroup?.totalCollectedAtBooking}\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\n {{isProcessing ? 'Please wait...' : 'Confirm Booking'}}\n </button>\n </div>\n </div>\n</section>\n\n<ng-template #modeSelection>\n <div class=\"w-60 service_section\">\n <div class=\"service-selection\">\n <h2>How would you like this?</h2>\n <p>Choose how you'd like to be served</p>\n <div class=\"services-grid\">\n <div class=\"service-card\" (click)=\"selectMode('STORE_VISIT')\">\n <div class=\"service-header\">\n <div class=\"service-icon\"><mat-icon>storefront</mat-icon></div>\n <div class=\"service-info\">\n <div class=\"service-title\">Visit our Store</div>\n </div>\n </div>\n <div class=\"service-description\">Come to us at one of our locations</div>\n </div>\n <div class=\"service-card\" (click)=\"selectMode('HOME_VISIT')\">\n <div class=\"service-header\">\n <div class=\"service-icon\"><mat-icon>home</mat-icon></div>\n <div class=\"service-info\">\n <div class=\"service-title\">We come to you</div>\n </div>\n </div>\n <div class=\"service-description\">A professional visits your address</div>\n </div>\n <div class=\"service-card\" (click)=\"selectMode('VIDEO_CALL')\">\n <div class=\"service-header\">\n <div class=\"service-icon\"><mat-icon>videocam</mat-icon></div>\n <div class=\"service-info\">\n <div class=\"service-title\">Video consultation</div>\n </div>\n </div>\n <div class=\"service-description\">Connect over a video call</div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #serviceListing>\n <div class=\"w-60 service_section\">\n <div class=\"service-selection\">\n <h2>Select a Service</h2>\n <p>Choose the service(s) you'd like to book<span *ngIf=\"cartServices.length > 0\"> \u2014 {{cartServices.length}} selected</span></p>\n <p *ngIf=\"productCartItems.length > 0\" class=\"cart-hint\">{{productCartItems.length}} product(s) already in your cart \u2014 you can continue without picking a service.</p>\n\n <div class=\"services-grid\">\n <ng-container *ngFor=\"let service of serviceData\">\n <div class=\"\" (click)=\"selectService(service)\"\n [ngClass]=\"{ 'service-card-selected' : service?.selected, 'service-card': !service?.selected }\">\n <div class=\" service-header\">\n <div class=\"service-icon\"><mat-icon>person_outline</mat-icon></div>\n <div class=\"service-info\">\n <div class=\"service-title\">{{service?.name ? service?.name : 'N/A'}}</div>\n </div>\n <div>\n <div class=\"service-price\">\u20B9{{service?.priceDetails?.price ?\n service?.priceDetails?.price : 'N/A' }}</div>\n <div class=\"service-duration\">{{service?.duration ? service?.duration : 'N/A'}} min\n </div>\n </div>\n </div>\n <div class=\"service-description\" *ngIf=\"service?.description\">\n {{service?.description ? service?.description : 'N/A'}}\n </div>\n <div class=\"home-visit\" *ngIf=\"selectedMode === 'STORE_VISIT' && service?.homeAppointmentAvailable\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/982126c1758628863129furniture_16406103.png\">Home\n Visit Available</div>\n </div>\n </ng-container>\n <div class=\"empty-state-mini\" *ngIf=\"serviceData.length === 0\">\n <mat-icon>inventory_2</mat-icon>\n <h4>No services available</h4>\n <p *ngIf=\"selectedMode === 'HOME_VISIT'\">No services are currently available for home visits.</p>\n <p *ngIf=\"selectedMode === 'VIDEO_CALL'\">No services are currently available for video calls.</p>\n <p *ngIf=\"selectedMode === 'STORE_VISIT'\">This business hasn't added any services yet.</p>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #locationListing>\n <div class=\"location_section\">\n <div class=\"header flex-column align-items-start\">\n <h1>Choose Location</h1>\n <p>Select where you'd like to receive the service</p>\n </div>\n\n <div class=\"location-list\">\n <ng-container *ngFor=\"let location of locationData\">\n <div (click)=\"selectLocation(location)\"\n [ngClass]=\"{ 'location-card-selected' : location?.selected, 'location-card': !location?.selected }\">\n <div class=\"location-content\">\n <div class=\"location-info\">\n <div class=\"location-icon\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/427226c1758629157758store_3171510.png\">\n </div>\n <div class=\"location-details\">\n <div class=\"d-flex justify-content-between align-items-center\">\n <h3>{{location?.storeName ? location?.storeName : 'N/A'}}</h3>\n </div>\n <p>{{location?.addressDetails?.addressLine}}, {{location?.addressDetails?.city}},\n {{location?.addressDetails?.state}} {{location?.pincode}}</p>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <div class=\"empty-state-mini\" *ngIf=\"locationData.length === 0\">\n <mat-icon>storefront</mat-icon>\n <h4>No locations available</h4>\n <p>There's no location available for this service right now.</p>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #staffListing>\n <div class=\"w-60 overflow-hidden staff-listing\">\n <div class=\"d-flex w-100 h-100\">\n <div class=\"w-100\">\n <div class=\"staff-header mb-3\">\n <h1>Select Staff Member</h1>\n <p class=\"staff-subtitle mb-0\">Choose your preferred professional</p>\n </div>\n\n <div class=\"search-container mb-4\">\n <div class=\"search-input-wrapper d-flex align-items-center\">\n <mat-icon class=\"search-icon me-2\">search</mat-icon>\n <input type=\"text\" class=\"search-input border-0 flex-grow-1\" placeholder=\"Search staff member by name...\" [(ngModel)]=\"staffSearchQuery\">\n <mat-icon class=\"clear-icon cursor-pointer ms-2\" *ngIf=\"staffSearchQuery\" (click)=\"staffSearchQuery = ''\">close</mat-icon>\n </div>\n </div>\n\n <!-- Pure product-only line: one flat staff list, same as the old single-service flow -->\n <div class=\"staff-list\" *ngIf=\"cartServices.length === 0\">\n <ng-container *ngFor=\"let staff of filteredStaff\">\n <div class=\"card rounded-3 p-3\" (click)=\"selectStaffForProductOnlyLine(staff)\"\n [ngClass]=\"{ 'staff-card-selected' : staff?.selected, 'staff-card': !staff?.selected }\">\n <div class=\"d-flex align-items-center justify-content-between w-100\">\n <div class=\"d-flex align-items-center flex-grow-1\">\n <div class=\"staff-avatar rounded-circle d-flex align-items-center justify-content-center me-4\">\n {{staff?.staffName.slice(0,2).toUpperCase()}}\n </div>\n <div class=\"staff-details flex-grow-1\">\n <h3 class=\"staff-name\">{{(staff?.staffName ? staff?.staffName : 'N/A') | titlecase}}</h3>\n <p class=\"staff-specialty\">{{(businessName && businessName !== 'N/A') ? businessName : 'Booking Specialist'}}</p>\n </div>\n </div>\n <div class=\"selection-indicator\">\n <div class=\"checkmark-circle-mini d-flex align-items-center justify-content-center\" [class.selected]=\"staff?.selected\">\n <mat-icon *ngIf=\"staff?.selected\">check</mat-icon>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <div class=\"empty-state-mini\" *ngIf=\"filteredStaff.length === 0\">\n <mat-icon>badge</mat-icon>\n <h4>No staff available</h4>\n <p>There's no staff member available for this service right now.</p>\n </div>\n </div>\n\n <!-- Bundled cart: one pool per line that resolution couldn't collapse to a single provider -->\n <ng-container *ngIf=\"cartServices.length > 0\">\n <div class=\"staff-line-group mb-4\" *ngFor=\"let line of resolvedLines\">\n <ng-container *ngIf=\"line.candidateStaffPool?.length\">\n <h4 class=\"mb-2\">For {{line.services.length}} service(s): {{ (line.services | slice:0:3).length ? '' : '' }}<span *ngFor=\"let s of line.services; let last = last\">{{s.name}}{{last ? '' : ', '}}</span></h4>\n <div class=\"staff-list mb-3\">\n <ng-container *ngFor=\"let staff of line.candidateStaffPool\">\n <div class=\"card rounded-3 p-3\" (click)=\"selectStaffForLine(line, staff)\"\n [ngClass]=\"{ 'staff-card-selected' : line.selectedStaffId === staff.id, 'staff-card': line.selectedStaffId !== staff.id }\">\n <div class=\"d-flex align-items-center justify-content-between w-100\">\n <div class=\"d-flex align-items-center flex-grow-1\">\n <div class=\"staff-avatar rounded-circle d-flex align-items-center justify-content-center me-4\">\n {{staff?.name?.slice(0,2)?.toUpperCase()}}\n </div>\n <div class=\"staff-details flex-grow-1\">\n <h3 class=\"staff-name\">{{(staff?.name ? staff?.name : 'N/A') | titlecase}}</h3>\n </div>\n </div>\n <div class=\"selection-indicator\">\n <div class=\"checkmark-circle-mini d-flex align-items-center justify-content-center\" [class.selected]=\"line.selectedStaffId === staff.id\">\n <mat-icon *ngIf=\"line.selectedStaffId === staff.id\">check</mat-icon>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container>\n <div class=\"empty-state-mini\" *ngIf=\"!line.candidateStaffPool?.length\">\n <mat-icon>badge</mat-icon>\n <h4>No staff available</h4>\n <p>No staff member is available for {{line.services.length}} service(s) in this line.</p>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #dateSelection>\n <div class=\"w-60 date_section\">\n <div class=\"row justify-content-center h-100\">\n <div class=\"col-12 h-100\">\n <div class=\"datetime-header mb-2\">\n <h1>Select Date & Time</h1>\n <p class=\"datetime-subtitle mb-0\">Choose when you'd like your appointment</p>\n </div>\n\n <div class=\"d-flex gap-4 main_container\">\n <div [ngClass]=\"{'w-50' : screenWidth > 475 , 'w-100':screenWidth < 475}\">\n <div class=\"section-card card rounded-3 p-4 h-100\">\n <h3 class=\"section-title\">Select Date</h3>\n\n <div class=\"date-picker-container d-flex align-items-center justify-content-between\"\n (click)=\"$event.stopPropagation()\">\n <input type=\"text\" class=\"date-input border-0 rounded-2\" placeholder=\"dd-mm-yyyy\"\n [value]=\"selectedDateStr\" readonly (click)=\"toggleCalendar($event)\">\n\n <mat-icon class=\"ms-2\" (click)=\"toggleCalendar($event)\">calendar_today</mat-icon>\n </div>\n <div class=\"position-relative\" (click)=\"$event.stopPropagation()\">\n <div class=\"datepicker-popover\" *ngIf=\"showCalendar\">\n <mat-calendar [(selected)]=\"selectedDate\" [dateFilter]=\"dateFilter\"\n (selectedChange)=\"onDateSelected($event)\" class=\"datepicker-calendar\">\n </mat-calendar>\n </div>\n </div>\n </div>\n </div>\n\n <!-- One slot-picker per resolved line, side by side when there's more than one (design doc \u00A73b) -->\n <div class=\"time_selection\" [ngClass]=\"{'w-50' : screenWidth > 475 , 'w-100':screenWidth < 475}\" *ngIf=\"resolvedLines.length <= 1\">\n <div class=\"section-card card h-100 rounded-3 p-4\">\n <h3 class=\"section-title\">Available Times</h3>\n <div class=\"row g-2 mb-4 overflow-scroll\">\n <ng-container *ngIf=\"!skeletonLoader && resolvedLines[0]\">\n <div class=\"col-4\" *ngFor=\"let time of resolvedLines[0].slots\">\n <div class=\"time-slot rounded-2\" [class.selected]=\"time.selected\"\n (click)=\"selectSlotForLine(resolvedLines[0], time)\">{{time ? time?.value : 'N/A'}}</div>\n </div>\n <p class=\"mb-0\" *ngIf=\"resolvedLines[0].slots.length === 0\">No slots available for this date.</p>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Multi-line case: each line gets its own full-width card with a staff header -->\n <div class=\"d-flex gap-4 main_container flex-wrap\" *ngIf=\"resolvedLines.length > 1\">\n <div class=\"w-100\" *ngFor=\"let line of resolvedLines\">\n <div class=\"section-card card rounded-3 p-4\">\n <h3 class=\"section-title\">Professional: {{line.staffName || line.selectedStaffName}}</h3>\n <p class=\"mb-2\" *ngIf=\"line.services.length\"><span *ngFor=\"let s of line.services; let last = last\">{{s.name}}{{last ? '' : ', '}}</span></p>\n <div class=\"row g-2 mb-2 overflow-scroll\">\n <ng-container *ngIf=\"!line.slotsLoading\">\n <div class=\"col-4\" *ngFor=\"let time of line.slots\">\n <div class=\"time-slot rounded-2\" [class.selected]=\"time.selected\"\n (click)=\"selectSlotForLine(line, time)\">{{time ? time?.value : 'N/A'}}</div>\n </div>\n <p class=\"mb-0\" *ngIf=\"line.slots.length === 0\">No slots available for this date.</p>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #contactDetails>\n <div class=\"w-60 contact_section\">\n <div class=\"contact-header mb-2\">\n <h1>Contact Details</h1>\n <p class=\"contact-subtitle mb-0\">Provide your contact information</p>\n </div>\n\n <div class=\"d-flex gap-3 details_container flex-column w-100\">\n <div class=\"d-flex gap-4\">\n <div [ngClass]=\"{'w-50' : selectedMode === 'HOME_VISIT', 'w-100' : selectedMode !== 'HOME_VISIT'}\">\n <div class=\"form-section card rounded-3 p-4 h-100\">\n <h3 class=\"section-title\">Personal Information</h3>\n\n <div class=\"mb-4\">\n <label class=\"form-label d-flex align-items-center\">\n Full Name\n <span class=\"required-asterisk\">*</span>\n </label>\n <input type=\"text\" class=\"form-control form-input rounded-2\"\n [(ngModel)]=\"appointmentPayload.customerDetail.name\"\n (ngModelChange)=\"checkRequiredValues()\" simpoLettersOnly>\n </div>\n\n <div class=\"mb-4\">\n <label class=\"form-label d-flex align-items-center\">\n Email Address\n <span class=\"required-asterisk\">*</span>\n </label>\n <input type=\"email\" class=\"form-control form-input rounded-2\"\n [(ngModel)]=\"appointmentPayload.customerDetail.email\"\n (ngModelChange)=\"checkRequiredValues()\"\n pattern=\"^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$\" #emailField=\"ngModel\"\n name=\"email\" required>\n </div>\n\n <div class=\"mb-0\">\n <label class=\"form-label d-flex align-items-center\">\n Phone Number\n <span class=\"required-asterisk\">*</span>\n </label>\n <input type=\"tel\" class=\"form-control rounded-2\"\n [(ngModel)]=\"appointmentPayload.customerDetail.phoneNumber\"\n (ngModelChange)=\"checkRequiredValues()\" simpoNumbersOnly\n [ngClass]=\"{'mobile_number' : appointmentPayload.customerDetail.phoneNumber.length != 10}\">\n </div>\n </div>\n </div>\n <!-- Home Visit address. Customer context: same saved-address flow as\n checkout/BookAppointmentComponent. Admin context (isAdminBooking): no\n logged-in customer account to read a saved address book from, so staff type\n the address manually instead. -->\n <div class=\"w-50\" *ngIf=\"selectedMode === 'HOME_VISIT'\">\n <div class=\"form-section card rounded-3 p-4 h-100\">\n <h3 class=\"section-title\">Home Visit Details</h3>\n\n <ng-container *ngIf=\"!isAdminBooking; else manualHomeVisitAddress\">\n <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\n <div class=\"address-info\">\n <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\n <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\n {{defaultAddress?.stateName}}</div>\n <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\n </div>\n </div>\n <button type=\"button\" class=\"change-address-btn w-100\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">\n CHANGE OR ADD ADDRESS\n </button>\n\n <div class=\"addLinks\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\n <mat-icon>add</mat-icon>\n <span class=\"ms-2\">Add an address</span>\n </div>\n </ng-container>\n\n <ng-template #manualHomeVisitAddress>\n <div class=\"mb-3\">\n <label class=\"form-label d-flex align-items-center\">Receiver Name</label>\n <input type=\"text\" class=\"form-control form-input rounded-2\" [(ngModel)]=\"homeVisitAddress.receiverName\" (ngModelChange)=\"checkRequiredValues()\">\n </div>\n <div class=\"mb-3\">\n <label class=\"form-label d-flex align-items-center\">Receiver Phone</label>\n <input type=\"tel\" class=\"form-control form-input rounded-2\" simpoNumbersOnly [(ngModel)]=\"homeVisitAddress.receiverPhone\" (ngModelChange)=\"checkRequiredValues()\">\n </div>\n <div class=\"mb-3\">\n <label class=\"form-label d-flex align-items-center\">Address Line 1</label>\n <input type=\"text\" class=\"form-control form-input rounded-2\" [(ngModel)]=\"homeVisitAddress.addressLine1\" (ngModelChange)=\"checkRequiredValues()\">\n </div>\n <div class=\"mb-3\">\n <label class=\"form-label d-flex align-items-center\">Address Line 2 (optional)</label>\n <input type=\"text\" class=\"form-control form-input rounded-2\" [(ngModel)]=\"homeVisitAddress.addressLine2\">\n </div>\n <div class=\"d-flex gap-2 mb-3\">\n <div class=\"w-50\">\n <label class=\"form-label d-flex align-items-center\">City</label>\n <input type=\"text\" class=\"form-control form-input rounded-2\" [(ngModel)]=\"homeVisitAddress.city\" (ngModelChange)=\"checkRequiredValues()\">\n </div>\n <div class=\"w-50\">\n <label class=\"form-label d-flex align-items-center\">State</label>\n <input type=\"text\" class=\"form-control form-input rounded-2\" [(ngModel)]=\"homeVisitAddress.state\">\n </div>\n </div>\n <div class=\"mb-3\">\n <label class=\"form-label d-flex align-items-center\">Pincode</label>\n <input type=\"text\" class=\"form-control form-input rounded-2\" simpoNumbersOnly [(ngModel)]=\"homeVisitAddress.zipCode\" (ngModelChange)=\"checkRequiredValues()\">\n </div>\n </ng-template>\n\n <div class=\"mb-0 mt-3\">\n <label class=\"form-label d-flex align-items-center\">Special Instructions</label>\n <textarea class=\"form-control form-textarea rounded-2\"\n placeholder=\"Any special instructions for the professional (optional)\"\n [(ngModel)]=\"instructions\"></textarea>\n </div>\n </div>\n </div>\n </div>\n <div class=\"policies-container\"\n *ngIf=\"cartServices[0]?.cancellationPolicy?.length > 0 || cartServices[0]?.reschedulePolicy?.length\">\n <h2 class=\"policies-title\">Policies & Terms</h2>\n\n <div class=\"policy-items-container d-flex flex-column gap-3\">\n <div class=\"policy-item d-flex justify-content-between align-items-center\"\n (click)=\"showCancellationPolicy = !showCancellationPolicy\">\n <h3 class=\"policy-title\">Cancellation Policy</h3>\n <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\n *ngIf=\"!showCancellationPolicy\">keyboard_arrow_right</mat-icon>\n <mat-icon *ngIf=\"showCancellationPolicy\">keyboard_arrow_down</mat-icon>\n </div>\n </div>\n <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\n *ngIf=\"showCancellationPolicy\">\n <span *ngFor=\"let policy of cartServices[0]?.cancellationPolicy\">•\n {{policy}}</span>\n </div>\n\n <div class=\"policy-item d-flex justify-content-between align-items-center\"\n (click)=\"showReducingPolicy = !showReducingPolicy\">\n <h3 class=\"policy-title\">Rescheduling Policy</h3>\n <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\n *ngIf=\"!showReducingPolicy\">keyboard_arrow_right</mat-icon>\n <mat-icon *ngIf=\"showReducingPolicy\">keyboard_arrow_down</mat-icon>\n </div>\n </div>\n <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\n *ngIf=\"showReducingPolicy\">\n <span *ngFor=\"let policy of cartServices[0]?.reschedulePolicy\">• {{policy}}</span>\n </div>\n </div>\n\n <div class=\"acceptance-section\">\n <input type=\"checkbox\" class=\"custom-checkbox\" [(ngModel)]=\"termsAndConditions\"\n (ngModelChange)=\"checkRequiredValues()\">\n <p class=\"acceptance-text\" style=\"margin-bottom:0px !important\">\n I understand and accept the cancellation & rescheduling policies.\n </p>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #paymentTab>\n <div class=\"w-60 payment_section\">\n <div class=\"w-100 h-100\">\n <div class=\"w-100 d-flex justify-content-center align-items-center flex-column\">\n <div class=\"payment-header mb-3 w-100\">\n <h1 style=\"font-size:24px;font-weight: 600;\">Booking Summary</h1>\n <p class=\"payment-subtitle mb-0\">Review your booking before confirming</p>\n </div>\n\n <div class=\"booking-summary-card\" [ngClass]=\"{'w-100' : screenWidth < 475,'w-50':screenWidth > 475}\">\n <div *ngFor=\"let line of resolvedLines; let i = index\">\n <h2 class=\"summary-title\" *ngIf=\"resolvedLines.length > 1\">Line {{i + 1}}</h2>\n <div class=\"summary-row\" *ngFor=\"let s of line.services\">\n <div class=\"summary-label\">{{s.name}}</div>\n <div class=\"summary-value\"><span class=\"currency-symbol\">\u20B9</span>{{servicePrice(s.id)}}</div>\n </div>\n <div class=\"summary-row\" *ngIf=\"line.staffName || line.selectedStaffName\">\n <div class=\"summary-label\">Professional</div>\n <div class=\"summary-value\">{{line.staffName || line.selectedStaffName}}</div>\n </div>\n <div class=\"summary-row\" *ngIf=\"selectedMode === 'STORE_VISIT'\">\n <div class=\"summary-label\">Location</div>\n <div class=\"summary-value\">{{selectedLocation?.storeName ?? 'N/A'}}</div>\n </div>\n <div class=\"summary-row\">\n <div class=\"summary-label\">Date & Time</div>\n <div class=\"summary-value\">{{selectedDateStr}} at {{line.selectedSlot?.value ?? 'N/A'}}</div>\n </div>\n </div>\n\n <div *ngIf=\"productCartItems.length > 0\">\n <h2 class=\"summary-title\">Products</h2>\n <div class=\"summary-row\" *ngFor=\"let p of productCartItems\">\n <div class=\"summary-label\">{{p.itemName}} x{{p.quantity}}</div>\n <div class=\"summary-value\"><span class=\"currency-symbol\">\u20B9</span>{{(p.sellingPrice ?? p.price ?? 0) * (p.quantity ?? 1)}}</div>\n </div>\n </div>\n\n <h2 class=\"summary-title\">Payment</h2>\n <div class=\"summary-row\" *ngIf=\"homeVisitCharge > 0\">\n <div class=\"summary-label\">Home visit charge</div>\n <div class=\"summary-value\"><span class=\"currency-symbol\">\u20B9</span>{{homeVisitCharge}}</div>\n </div>\n <div class=\"summary-row\">\n <div class=\"summary-label\">Total</div>\n <div class=\"summary-value\"><span class=\"currency-symbol\">\u20B9</span>{{reviewTotal}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #statusTemplate>\n <div class=\"booking-confirmation\">\n <div class=\"success-icon\">\n <div class=\"checkmark-circle\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/881293c1758695578518success.gif\"\n class=\"w-100 h-100\" *ngIf=\"apiStatus\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/325000c1758695564518fail.gif\"\n class=\"w-100 h-100\" *ngIf=\"!apiStatus\">\n </div>\n </div>\n\n <div class=\"confirmation-content\">\n <h1 class=\"confirmation-title\">{{apiStatus ? 'Booking Confirmed!' : 'Booking Failed'}}</h1>\n <p class=\"confirmation-message\">\n {{apiStatus ? 'Your appointment has been successfully booked.':'Failed to book you appointment. Please\n try again later'}}\n </p>\n\n <!-- Video Call link, when already present on the confirmed group (a paid Video Call's\n link only appears once payment verification completes, handled elsewhere - see\n verify-payment.component.ts, not this screen). -->\n <div class=\"video-call-link-card d-flex align-items-center justify-content-center\" *ngIf=\"apiStatus && selectedMode === 'VIDEO_CALL' && bookingGroup?.videoCallLink\">\n <div class=\"details-card\">\n <h3 class=\"details-title\">Your Video Call Link</h3>\n <a [href]=\"bookingGroup.videoCallLink\" target=\"_blank\">{{bookingGroup.videoCallLink}}</a>\n </div>\n </div>\n\n <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus\">\n <div class=\"details-card\">\n <h3 class=\"details-title\">Appointment Details</h3>\n <div class=\"details-row\" *ngFor=\"let line of resolvedLines\">\n <span class=\"detail-label\">{{line.services.length ? (line.services[0].name) : 'Products'}}</span>\n <span class=\"detail-value\">{{selectedDateStr}} at {{line.selectedSlot?.value ?? 'N/A'}}</span>\n </div>\n </div>\n </div>\n\n <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus\">\n <div class=\"details-card\">\n <h3 class=\"details-title\">Payment</h3>\n <div class=\"details-row\" *ngIf=\"bookingGroup?.homeVisitCharge > 0\">\n <span class=\"detail-label\">Home visit charge</span>\n <span class=\"detail-value\">\u20B9{{bookingGroup.homeVisitCharge}}</span>\n </div>\n <div class=\"details-row\">\n <span class=\"detail-label\">Total</span>\n <span class=\"detail-value\">\u20B9{{bookingTotal}}</span>\n </div>\n <div class=\"details-row\">\n <span class=\"detail-label\">Paid</span>\n <span class=\"detail-value\">\u20B9{{bookingPaid}}</span>\n </div>\n <div class=\"details-row\" *ngIf=\"bookingDue > 0\">\n <span class=\"detail-label\">Due</span>\n <span class=\"detail-value\">\u20B9{{bookingDue}}</span>\n </div>\n </div>\n </div>\n\n <div class=\"done-actions d-flex align-items-center justify-content-center\" *ngIf=\"apiStatus\">\n <ng-container *ngIf=\"!isAdminContext; else adminDoneActions\">\n <button type=\"button\" class=\"done-btn done-btn-primary\" (click)=\"goToMyBookings()\">View my bookings</button>\n <button type=\"button\" class=\"done-btn done-btn-secondary\" (click)=\"goToListing()\">Keep shopping</button>\n </ng-container>\n <ng-template #adminDoneActions>\n <button type=\"button\" class=\"done-btn done-btn-primary\" (click)=\"goToAppointmentsList()\">Back to Appointments List</button>\n <button type=\"button\" class=\"done-btn done-btn-secondary\" (click)=\"bookAnother()\">Book Another</button>\n </ng-template>\n </div>\n </div>\n </div>\n</ng-template>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap\";mat-icon{font-family:Material Icons!important}:host{--font-sans: \"Outfit\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;--slate-50: #f8fafc;--slate-100: #f1f5f9;--slate-200: #e2e8f0;--slate-300: #cbd5e1;--slate-400: #94a3b8;--slate-500: #64748b;--slate-600: #475569;--slate-700: #334155;--slate-800: #1e293b;--slate-900: #0f172a;--color-primary: #230860;--color-secondary: #00b6ff;--color-accent-gradient: linear-gradient(135deg, #230860 0%, #00b6ff 100%);--color-success: #10b981;--color-success-bg: #ecfdf5;--color-error: #ef4444;--color-error-bg: #fef2f2;--border-radius-sm: 8px;--border-radius-md: 12px;--border-radius-lg: 16px;--border-radius-xl: 24px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .05), 0 2px 4px -2px rgba(0, 0, 0, .05);--shadow-lg: 0 10px 15px -3px rgba(35, 8, 96, .05), 0 4px 6px -4px rgba(35, 8, 96, .05);--shadow-xl: 0 20px 25px -5px rgba(35, 8, 96, .08), 0 8px 10px -6px rgba(35, 8, 96, .08);--transition-smooth: all .3s cubic-bezier(.4, 0, .2, 1);--transition-bounce: all .4s cubic-bezier(.175, .885, .32, 1.275)}*{box-sizing:border-box;font-family:var(--font-sans)}.main_section{position:relative;height:100vh;background-color:var(--slate-50);display:flex;flex-direction:column;overflow:hidden}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.main_header{padding:15px;background:#fff;border-bottom:1px solid var(--slate-100);flex-shrink:0;box-shadow:0 2px 8px #00000003}.header{display:flex;align-items:center;justify-content:space-between}.back-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem 1.2rem;border-radius:var(--border-radius-md);background:var(--slate-50);border:1px solid var(--slate-200);color:var(--slate-700)!important;transition:var(--transition-smooth);font-weight:500;font-size:.9rem;cursor:pointer}.back-btn mat-icon{font-size:18px!important;width:18px!important;height:18px!important;color:var(--slate-700)!important;display:flex;align-items:center;justify-content:center}.back-btn:hover{background:var(--slate-100);transform:translate(-3px);color:var(--slate-900)!important}.header-title{flex-grow:1;text-align:right}.header-title h1{font-size:1.5rem;font-weight:700;margin-bottom:.2rem;color:var(--slate-900)!important;letter-spacing:-.025em}.header-title p{color:var(--slate-500)!important;font-size:.9rem;font-weight:500;margin-bottom:0}.progress-bar{width:100%;height:6px;background-color:var(--slate-100);margin-top:3px;border-radius:10px;overflow:hidden;position:relative}.progress-fill{height:100%;background:var(--color-accent-gradient);border-radius:10px;transition:width .5s cubic-bezier(.4,0,.2,1);position:relative}.progress-fill:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,#fff0,#ffffff4d,#fff0);animation:shimmer 2s infinite linear}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.main_body{flex-grow:1;overflow-y:auto;padding:10px;display:flex;justify-content:center;background:var(--slate-50)}.w-60{width:100%;max-width:800px}.service_section,.location_section,.staff-listing,.date_section,.contact_section,.payment_section,.booking-confirmation{animation:slideUp .5s cubic-bezier(.16,1,.3,1) forwards}@keyframes slideUp{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}h2{font-size:1.5rem;font-weight:700;color:var(--slate-900)!important;letter-spacing:-.02em;margin-bottom:.3rem}p.subtitle,.service-selection p,.location_section p,.staff-subtitle,.datetime-subtitle,.contact-subtitle,.payment-subtitle{color:var(--slate-500)!important;font-size:13px;margin-bottom:2rem}.services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.5rem;padding-bottom:2rem}.service-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:180px}.service-card:hover{border-color:var(--slate-400);transform:translateY(-4px);box-shadow:var(--shadow-lg)}.service-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:180px;transform:translateY(-2px)}.service-card-selected:before,.location-card-selected:before{content:\"\\2713\";position:absolute;top:-10px;right:-10px;background:var(--color-accent-gradient);color:#fff!important;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;box-shadow:0 4px 8px #2308604d;animation:popIn .3s cubic-bezier(.175,.885,.32,1.275);z-index:10}@keyframes popIn{0%{transform:scale(0)}to{transform:scale(1)}}.service-header{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1rem}.service-icon{width:48px;height:48px;border-radius:var(--border-radius-md);background-color:var(--slate-100);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition-smooth)}.service-icon mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:var(--color-primary)!important}.service-card-selected .service-icon{background:var(--slate-900)}.service-card-selected .service-icon mat-icon{color:#fff!important}.service-info{flex-grow:1}.service-title{font-size:1.15rem;font-weight:700;color:var(--slate-900)!important;line-height:1.3;margin-bottom:.2rem}.service-price{font-size:1.25rem;font-weight:800;color:var(--slate-900)!important;text-align:right}.service-duration{font-size:.8rem;color:var(--slate-500)!important;font-weight:600;text-align:right;margin-top:.1rem}.service-description{color:var(--slate-600)!important;font-size:.9rem;line-height:1.5;margin-bottom:1.25rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.home-visit{align-self:flex-start;display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:600;color:var(--slate-700)!important;border:1px solid var(--slate-200);padding:.35rem .75rem;border-radius:20px;background-color:var(--slate-50);transition:var(--transition-smooth)}.home-visit img{width:14px;height:14px}.home-visit:before{content:\"\";display:inline-block;width:6px;height:6px;border-radius:50%;background-color:var(--color-success);box-shadow:0 0 #10b98166;animation:pulseGlow 1.8s infinite}@keyframes pulseGlow{0%{box-shadow:0 0 #10b981b3}70%{box-shadow:0 0 0 6px #10b98100}to{box-shadow:0 0 #10b98100}}.location-list{display:flex;flex-direction:column;gap:1.25rem;padding-bottom:2rem}.location-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm)}.location-card:hover{border-color:var(--slate-400);transform:translateY(-2px);box-shadow:var(--shadow-md)}.location-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);transform:translateY(-1px)}.location-content{display:flex;align-items:center}.location-info{display:flex;align-items:center;gap:1.25rem;width:100%}.location-icon{width:52px;height:52px;background-color:var(--slate-100);border-radius:var(--border-radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition-smooth)}.location-icon img{width:28px;height:28px}.location-card-selected .location-icon{background:var(--slate-900)}.location-details{flex-grow:1}.location-details h3{font-size:1.15rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:.3rem}.location-details p{font-size:.9rem;color:var(--slate-500)!important;font-weight:450;line-height:1.4;margin-bottom:0}.search-container{width:100%;margin-bottom:1.25rem}.search-input-wrapper{width:100%;background-color:var(--slate-100);border:1.5px solid var(--slate-200);border-radius:var(--border-radius-md);padding:.6rem 1rem;transition:var(--transition-smooth)}.search-input-wrapper:focus-within{background-color:#fff;border-color:var(--color-primary);box-shadow:0 0 0 3px #23086014}.search-input{font-size:.95rem;font-weight:500;color:var(--slate-900)!important;background:transparent;outline:none;width:100%}.search-input::placeholder{color:var(--slate-400)}.search-icon{color:var(--slate-400)!important;font-size:20px!important;width:20px!important;height:20px!important}.clear-icon{color:var(--slate-400)!important;font-size:18px!important;width:18px!important;height:18px!important;transition:var(--transition-smooth)}.clear-icon:hover{color:var(--slate-600)!important}.staff-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem;max-height:48vh;overflow-y:auto;padding-right:.5rem;padding-bottom:1rem}.staff-list::-webkit-scrollbar{width:6px}.staff-list::-webkit-scrollbar-track{background:var(--slate-50);border-radius:4px}.staff-list::-webkit-scrollbar-thumb{background:var(--slate-200);border-radius:4px}.staff-list::-webkit-scrollbar-thumb:hover{background:var(--slate-300)}.staff-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:.9rem 1.25rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm);margin-bottom:0!important}.staff-card:hover{border-color:var(--slate-300);transform:translateY(-2px);box-shadow:var(--shadow-md)}.staff-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:.9rem 1.25rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);transform:translateY(-1px);margin-bottom:0!important}.staff-avatar{width:48px;height:48px;background:var(--color-accent-gradient);font-size:.95rem;font-weight:700;color:#fff!important;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 10px #2308601a;letter-spacing:.5px;transition:var(--transition-smooth)}.staff-card-selected .staff-avatar{transform:scale(1.05)}.staff-name{font-size:1.05rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:.2rem;letter-spacing:-.015em}.staff-specialty{font-size:.8rem;color:var(--slate-500)!important;font-weight:600;margin-bottom:0;text-transform:uppercase;letter-spacing:.05em}.selection-indicator{display:flex;align-items:center;justify-content:center;margin-left:auto;padding-left:1rem}.checkmark-circle-mini{width:24px;height:24px;border:2px solid var(--slate-300);border-radius:50%;background-color:#fff;transition:var(--transition-bounce);color:#fff!important}.checkmark-circle-mini.selected{background:var(--color-accent-gradient);border-color:transparent;box-shadow:0 3px 8px #23086040}.checkmark-circle-mini mat-icon{font-size:14px!important;width:14px!important;height:14px!important;color:#fff!important;font-weight:800!important;display:flex;align-items:center;justify-content:center}.main_container{display:flex;gap:2rem;margin-bottom:2rem}.section-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.75rem;box-shadow:var(--shadow-sm);height:100%}.section-title{font-size:1.1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:10px!important;letter-spacing:-.01em}.date-picker-container{border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:.6rem 1rem;display:flex;align-items:center;justify-content:space-between;transition:var(--transition-smooth);background-color:var(--slate-50);cursor:pointer}.date-picker-container:hover{border-color:var(--slate-400);background-color:#fff}.date-input{font-size:.95rem;font-weight:600;color:var(--slate-800)!important;background:transparent;border:none;outline:none;cursor:pointer;width:100%}.date-picker-container mat-icon{color:var(--color-primary)!important;font-size:20px!important;width:20px!important;height:20px!important}.datepicker-popover{position:absolute;z-index:1000;margin-top:4px;border-radius:var(--border-radius-lg);overflow:hidden;box-shadow:var(--shadow-xl);background:#fff;border:1px solid var(--slate-200);width:320px}::ng-deep .datepicker-calendar{border-radius:var(--border-radius-lg)!important;width:100%!important}::ng-deep .mat-calendar-header{background:var(--color-accent-gradient)!important;color:#fff!important;padding:.5rem!important}::ng-deep .mat-calendar-content{padding:8px!important}::ng-deep .mat-calendar-controls{margin:0!important}::ng-deep .mat-calendar-period-button{color:#fff!important;font-weight:700!important;font-size:1rem!important}::ng-deep .mat-calendar-arrow{fill:#fff!important}::ng-deep .mat-calendar-previous-button,::ng-deep .mat-calendar-next-button{color:#fff!important}::ng-deep .mat-calendar-body-cell{font-size:13px!important}::ng-deep .mat-calendar-body-cell-content{font-weight:600!important;color:var(--slate-800)!important;border-radius:8px!important}::ng-deep .mat-calendar-body-selected{background:var(--color-accent-gradient)!important;color:#fff!important;box-shadow:0 4px 10px #23086033!important}::ng-deep .mat-calendar-body-today:not(.mat-calendar-body-selected){border:2px solid var(--color-primary)!important;color:var(--color-primary)!important}.time_selection{max-height:420px;display:flex;flex-direction:column}.time_selection .row{flex-grow:1;overflow-y:auto;padding-right:.25rem;margin-top:10px}.time-slot{background:#fff;border:1px solid var(--slate-200);font-size:.9rem;font-weight:600;color:var(--slate-800)!important;padding:.75rem .5rem;border-radius:var(--border-radius-md);cursor:pointer;transition:var(--transition-smooth);text-align:center;box-shadow:var(--shadow-sm)}.time-slot:hover{border-color:var(--slate-400);transform:translateY(-2px);box-shadow:var(--shadow-md);background-color:var(--slate-50)}.time-slot.selected{background:var(--color-accent-gradient);border-color:transparent;color:#fff!important;box-shadow:0 4px 12px #23086033}.form-section{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.75rem;box-shadow:var(--shadow-sm)}.form-label{font-size:.85rem;font-weight:600;color:var(--slate-700)!important;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.05em}.required-asterisk{color:var(--color-error);margin-left:2px}.form-control,.form-input,.form-textarea{width:100%;background-color:var(--slate-50);border:1px solid var(--slate-200);color:var(--slate-900)!important;font-size:.95rem;font-weight:500;padding:.75rem 1rem;border-radius:var(--border-radius-md);transition:var(--transition-smooth);outline:none}.form-control:focus,.form-input:focus,.form-textarea:focus{background-color:#fff;border-color:var(--color-primary);box-shadow:0 0 0 3px #2308601a}.form-textarea{min-height:100px;resize:vertical}.policies-container{background-color:#fff;border:1px solid var(--slate-200);padding:1.75rem;border-radius:var(--border-radius-lg);margin-top:1.5rem;box-shadow:var(--shadow-sm)}.policies-title{font-size:1.1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:1.25rem}.policy-item{background-color:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:1rem 1.25rem;cursor:pointer;transition:var(--transition-smooth);display:flex;justify-content:space-between;align-items:center}.policy-item:hover{background-color:var(--slate-100);border-color:var(--slate-300)}.policy-title{font-size:.95rem;font-weight:600;color:var(--slate-800)!important}.policy-arrow mat-icon{color:var(--slate-500)!important;transition:var(--transition-smooth)}.cancellation_policies{background-color:var(--slate-50);padding:1rem 1.5rem;border-left:3px solid var(--color-primary);border-radius:0 0 var(--border-radius-md) var(--border-radius-md);margin-top:-4px;margin-bottom:1rem;font-size:.9rem;color:var(--slate-600)!important;line-height:1.5}.acceptance-section{display:flex;align-items:center;gap:.75rem;margin-top:1.5rem}.custom-checkbox{width:20px;height:20px;border:2px solid var(--slate-300);border-radius:6px;cursor:pointer;transition:var(--transition-smooth);position:relative;appearance:none;background-color:#fff;outline:none}.custom-checkbox:checked{background:var(--color-accent-gradient);border-color:transparent}.custom-checkbox:checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff!important;font-size:.75rem;font-weight:800}.acceptance-text{font-size:.95rem;color:var(--slate-700)!important;font-weight:500;-webkit-user-select:none;user-select:none;line-height:1.4}.booking-summary-card{background-color:#fff;border:1px solid var(--slate-200);padding:2rem;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);position:relative}.booking-summary-card:after{content:\"\";position:absolute;bottom:-1px;left:0;right:0;height:10px;background-image:radial-gradient(circle,white 4px,transparent 5px);background-size:12px 12px;background-position:0 0;z-index:2}.summary-title{font-size:1.25rem;font-weight:700;color:var(--slate-900)!important;border-bottom:2px dashed var(--slate-200);padding-bottom:1rem;margin-bottom:1.5rem;text-align:center}.summary-row{display:flex;justify-content:space-between;align-items:center;padding:.85rem 0;border-bottom:1px solid var(--slate-100)}.summary-label{font-size:.95rem;color:var(--slate-500)!important;font-weight:500}.summary-value{font-size:.95rem;color:var(--slate-900)!important;font-weight:600;text-align:right}.total-row{margin-top:1rem;padding-top:1.25rem;border-top:2px dashed var(--slate-200);border-bottom:none}.total-row .summary-label{font-size:1.25rem;font-weight:700;color:var(--slate-900)!important}.total-row .summary-value{font-size:1.5rem;font-weight:800;color:var(--color-primary)!important}.booking-confirmation{background:#fff;border:1px solid var(--slate-200);padding:3rem 2rem;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;align-items:center;text-align:center;max-width:500px;margin:0 auto}.success-icon{margin-bottom:1.5rem}.checkmark-circle{width:96px;height:96px;display:flex;align-items:center;justify-content:center}.confirmation-title{font-size:1.5rem;font-weight:800;color:var(--slate-900)!important;margin-bottom:.5rem}.confirmation-message{font-size:1rem;color:var(--slate-500)!important;line-height:1.6;margin-bottom:2rem;font-weight:450}.details-card{background-color:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:1.5rem;width:100%;margin-bottom:2rem;text-align:left}.details-title{font-size:1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.05em}.details-row{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px dashed var(--slate-200)}.details-row:last-child{border-bottom:none}.detail-label{font-size:.85rem;color:var(--slate-500)!important;font-weight:500}.detail-value{font-size:.9rem;color:var(--slate-900)!important;font-weight:600}.main_footer{border-top:1px solid var(--slate-200);background-color:#fff;padding:15px;flex-shrink:0;display:flex;justify-content:center;box-shadow:0 -4px 12px #00000005}.footer-buttons{width:100%;max-width:800px;display:flex;align-items:center}.back-footer-btn{font-size:.95rem;font-weight:600;color:var(--slate-600)!important;padding:.75rem 1.5rem;border-radius:var(--border-radius-md);transition:var(--transition-smooth);cursor:pointer}.back-footer-btn:hover{color:var(--slate-900)!important;background-color:var(--slate-100)}.continue-btn{background:var(--color-accent-gradient);color:#fff!important;border:none;padding:.75rem 2rem;border-radius:var(--border-radius-md);font-size:.95rem!important;font-weight:600;cursor:pointer;transition:var(--transition-smooth);box-shadow:0 4px 10px #23086033;width:max-content!important}.continue-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.continue-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed!important;box-shadow:none!important}.complete_booking,.pay-now-btn{background:var(--color-accent-gradient)!important;color:#fff!important;border:none;padding:.75rem 2.25rem!important;font-size:.95rem!important;font-weight:600;border-radius:var(--border-radius-md)!important;box-shadow:0 4px 12px #23086040;transition:var(--transition-smooth);cursor:pointer;display:flex;align-items:center;gap:.5rem;width:max-content!important}.complete_booking img,.pay-now-btn img{width:20px;height:20px;filter:brightness(0) invert(1)}.complete_booking:hover:not([disabled]),.pay-now-btn:hover:not([disabled]){transform:translateY(-2px);box-shadow:0 6px 18px #23086059}.complete_booking:disabled,.pay-now-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed;box-shadow:none}.service-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.5rem;padding:0;width:100%}.skeleton-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;height:180px;display:flex;flex-direction:column;justify-content:space-between}.skeleton{background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0,#f1f5f9 75%);background-size:200% 100%;animation:loading-shimmer 1.5s infinite linear;border-radius:4px}@keyframes loading-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-icon{width:48px;height:48px;border-radius:var(--border-radius-md)}.skeleton-title{height:20px;width:60%;margin-bottom:.5rem}.skeleton-price{height:20px;width:30%}.skeleton-duration{height:12px;width:25%;margin-top:.25rem}.skeleton-description{height:14px;width:85%}.skeleton-badge{height:28px;width:120px;border-radius:20px}.time-slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;width:100%}.skeleton-time-slot{height:42px;border-radius:var(--border-radius-md);background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0,#f1f5f9 75%);background-size:200% 100%;animation:loading-shimmer 1.5s infinite linear;border:1px solid var(--slate-100)}@media screen and (max-width: 475px){.main_header{padding:1rem}.header-title h1{font-size:1.25rem}.back-btn{padding:.5rem .8rem}.back-btn span{display:none}.main_body{padding:15px}.services-grid{grid-template-columns:1fr;gap:1rem}.staff-list{grid-template-columns:1fr!important;gap:.85rem!important}.service-card,.service-card-selected{min-height:auto}.main_container{flex-direction:column;gap:1.5rem}.datepicker-popover{width:100%;left:0}.details_container{gap:1.5rem}.details_container>.d-flex{flex-direction:column;gap:1.5rem}.details_container>.d-flex>div{width:100%!important}.booking-summary-card{padding:1.25rem}.summary-title{font-size:1.15rem}.total-row .summary-label{font-size:1.1rem}.total-row .summary-value{font-size:1.3rem}.main_footer{padding:1rem}.continue-btn{padding:.75rem 1.5rem}}.shipping-info{border-radius:10px;padding:20px;margin-bottom:12px;border:1px solid var(--slate-200);box-shadow:var(--shadow-sm)}.address-info{margin-bottom:0}.address-name{font-weight:700;margin-bottom:8px;color:var(--slate-900)!important}.address-details{color:var(--slate-500)!important;margin-bottom:8px}.mobile-number{font-weight:700;color:var(--slate-900)!important;font-size:15px}.change-address-btn{font-size:.85rem!important;font-weight:700!important;padding:10px;background:#fff;border:1px solid var(--slate-200);border-radius:8px;color:var(--slate-900)!important;cursor:pointer;transition:var(--transition-smooth)}.change-address-btn:hover{border-color:var(--color-primary);color:var(--color-primary)!important}.addLinks{padding:14px;border:1px dashed var(--slate-300);display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:8px;color:var(--slate-500)!important;margin-bottom:12px}.addLinks:hover{border-color:var(--color-primary);color:var(--color-primary)!important}h1{font-size:24px!important;font-weight:600!important}.done-actions{display:flex;gap:12px;width:100%}.done-btn{flex:1;max-width:220px;padding:.75rem 1.5rem;border-radius:var(--border-radius-md);font-size:.95rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth);border:none}.done-btn-primary{background:var(--color-accent-gradient);color:#fff!important;box-shadow:0 4px 10px #23086033}.done-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.done-btn-secondary{background:#fff;color:var(--slate-600)!important;border:1px solid var(--slate-200)}.empty-state-mini{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:48px 16px;color:var(--slate-500)}.empty-state-mini mat-icon{font-size:32px;height:32px;width:32px;color:var(--slate-300);margin-bottom:4px}.empty-state-mini h4{margin:0;font-size:15px;font-weight:600;color:var(--slate-700)}.empty-state-mini p{margin:0;font-size:13px;color:var(--slate-500)}.done-btn-secondary:hover{background-color:var(--slate-100);color:var(--slate-900)!important}\n"] }]
|
|
26288
|
+
args: [{ selector: 'simpo-appointment-booking', standalone: true, imports: [CdkDragPlaceholder, CommonModule, MatIcon, MatFormFieldModule, MatDatepickerModule, FormsModule, MatNativeDateModule, MatInputModule, MatDialogModule, LettersOnlyDirective, NumbersOnlyDirective, ToastModule, HoverDirective, HoverElementsComponent, BackgroundDirective], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n [showTransformOptions]=\"screenWidth < 475 ? 'translateY(-100%)' : ''\"></p-toast>\n<section class=\"main_section\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\n [simpoBackground]=\"backgroundInfo\" [style.--color-accent-gradient]=\"accentColor\">\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div class=\"main_header\">\n <div class=\"header d-flex justify-content-between align-items-center\">\n <div class=\"back-btn d-flex justify-content-center align-items-center cursor-pointer gap-2 mb-3\"\n (click)=\"goBack()\">\n <mat-icon>keyboard_backspace</mat-icon><span *ngIf=\"screenWidth > 475\">Back to Home</span>\n </div>\n <div class=\"header-title\">\n <h1>Book New Appointment</h1>\n <p>{{businessName ?? \"N/A\" }}</p>\n </div>\n </div>\n\n <div class=\"progress-bar\">\n <div class=\"progress-fill\" [style.width]=\"barWidth + '%'\"></div>\n </div>\n </div>\n <div class=\"main_body w-100 d-flex justify-content-center\">\n <ng-container *ngIf=\"selectedTab === 'modeSelection'\">\n <ng-container *ngTemplateOutlet=\"modeSelection\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"selectedTab === 'serviceListing'\">\n <ng-container *ngIf=\"!skeletonLoader\">\n <ng-container *ngTemplateOutlet=\"serviceListing\"></ng-container>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"selectedTab === 'locationListing'\">\n <ng-container *ngTemplateOutlet=\"locationListing\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"selectedTab === 'staffListing'\">\n <ng-container *ngTemplateOutlet=\"staffListing\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"selectedTab === 'dateSelection'\">\n <ng-container *ngTemplateOutlet=\"dateSelection\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"selectedTab==='contactDetails'\">\n <ng-container *ngTemplateOutlet=\"contactDetails\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"selectedTab==='paymentTab'\">\n <ng-container *ngTemplateOutlet=\"paymentTab\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"selectedTab==='statusTemplate'\">\n <ng-container *ngTemplateOutlet=\"statusTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"main_footer d-flex justify-content-center align-items-center\"\n *ngIf=\"selectedTab!=='statusTemplate' && selectedTab!=='modeSelection'\">\n <div class=\"footer-buttons\"\n [ngStyle]=\"{'justify-content': selectedTab != 'serviceListing' ? 'space-between' : 'end'}\">\n <span class=\"back-footer-btn cursor-pointer\" (click)=\"previousStep()\"\n *ngIf=\"selectedTab != 'serviceListing'\">Back</span>\n <button class=\"continue-btn\" [disabled]=\"!activeButton\" (click)=\"nextStep()\"\n *ngIf=\"selectedTab!='paymentTab'\">{{!loader ? 'Continue' : 'Loading...'}}</button>\n <button class=\"cursor-pointer d-flex justify-content-evenly align-items-center\"\n *ngIf=\"selectedTab==='paymentTab'\" (click)=\"confirmBooking()\" [disabled]=\"isProcessing\"\n [ngClass]=\"{'pay-now-btn' : bookingGroup?.totalCollectedAtBooking > 0 || !bookingGroup,'complete_booking' : bookingGroup && !bookingGroup?.totalCollectedAtBooking}\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\n {{isProcessing ? 'Please wait...' : 'Confirm Booking'}}\n </button>\n </div>\n </div>\n</section>\n\n<ng-template #modeSelection>\n <div class=\"w-60 service_section\">\n <div class=\"service-selection\">\n <h2>How would you like this?</h2>\n <p>Choose how you'd like to be served</p>\n <div class=\"services-grid\">\n <div class=\"service-card\" (click)=\"selectMode('STORE_VISIT')\">\n <div class=\"service-header\">\n <div class=\"service-icon\"><mat-icon>storefront</mat-icon></div>\n <div class=\"service-info\">\n <div class=\"service-title\">Visit our Store</div>\n </div>\n </div>\n <div class=\"service-description\">Come to us at one of our locations</div>\n </div>\n <div class=\"service-card\" (click)=\"selectMode('HOME_VISIT')\">\n <div class=\"service-header\">\n <div class=\"service-icon\"><mat-icon>home</mat-icon></div>\n <div class=\"service-info\">\n <div class=\"service-title\">We come to you</div>\n </div>\n </div>\n <div class=\"service-description\">A professional visits your address</div>\n </div>\n <div class=\"service-card\" (click)=\"selectMode('VIDEO_CALL')\">\n <div class=\"service-header\">\n <div class=\"service-icon\"><mat-icon>videocam</mat-icon></div>\n <div class=\"service-info\">\n <div class=\"service-title\">Video consultation</div>\n </div>\n </div>\n <div class=\"service-description\">Connect over a video call</div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #serviceListing>\n <div class=\"w-60 service_section\">\n <div class=\"service-selection\">\n <h2>Select a Service</h2>\n <p>Choose the service(s) you'd like to book<span *ngIf=\"cartServices.length > 0\"> \u2014 {{cartServices.length}} selected</span></p>\n <p *ngIf=\"productCartItems.length > 0\" class=\"cart-hint\">{{productCartItems.length}} product(s) already in your cart \u2014 you can continue without picking a service.</p>\n\n <div class=\"services-grid\">\n <ng-container *ngFor=\"let service of serviceData\">\n <div class=\"\" (click)=\"selectService(service)\"\n [ngClass]=\"{ 'service-card-selected' : service?.selected, 'service-card': !service?.selected }\">\n <div class=\" service-header\">\n <div class=\"service-icon\"><mat-icon>person_outline</mat-icon></div>\n <div class=\"service-info\">\n <div class=\"service-title\">{{service?.name ? service?.name : 'N/A'}}</div>\n </div>\n <div>\n <div class=\"service-price\">\u20B9{{service?.priceDetails?.price ?\n service?.priceDetails?.price : 'N/A' }}</div>\n <div class=\"service-duration\">{{service?.duration ? service?.duration : 'N/A'}} min\n </div>\n </div>\n </div>\n <div class=\"service-description\" *ngIf=\"service?.description\">\n {{service?.description ? service?.description : 'N/A'}}\n </div>\n <div class=\"home-visit\" *ngIf=\"selectedMode === 'STORE_VISIT' && service?.homeAppointmentAvailable\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/982126c1758628863129furniture_16406103.png\">Home\n Visit Available</div>\n </div>\n </ng-container>\n <div class=\"empty-state-mini\" *ngIf=\"serviceData.length === 0\">\n <mat-icon>inventory_2</mat-icon>\n <h4>No services available</h4>\n <p *ngIf=\"selectedMode === 'HOME_VISIT'\">No services are currently available for home visits.</p>\n <p *ngIf=\"selectedMode === 'VIDEO_CALL'\">No services are currently available for video calls.</p>\n <p *ngIf=\"selectedMode === 'STORE_VISIT'\">This business hasn't added any services yet.</p>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #locationListing>\n <div class=\"location_section\">\n <div class=\"header flex-column align-items-start\">\n <h1>Choose Location</h1>\n <p>Select where you'd like to receive the service</p>\n </div>\n\n <div class=\"location-list\">\n <ng-container *ngFor=\"let location of locationData\">\n <div (click)=\"selectLocation(location)\"\n [ngClass]=\"{ 'location-card-selected' : location?.selected, 'location-card': !location?.selected }\">\n <div class=\"location-content\">\n <div class=\"location-info\">\n <div class=\"location-icon\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/427226c1758629157758store_3171510.png\">\n </div>\n <div class=\"location-details\">\n <div class=\"d-flex justify-content-between align-items-center\">\n <h3>{{location?.storeName ? location?.storeName : 'N/A'}}</h3>\n </div>\n <p>{{location?.addressDetails?.addressLine}}, {{location?.addressDetails?.city}},\n {{location?.addressDetails?.state}} {{location?.pincode}}</p>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <div class=\"empty-state-mini\" *ngIf=\"locationData.length === 0\">\n <mat-icon>storefront</mat-icon>\n <h4>No locations available</h4>\n <p>There's no location available for this service right now.</p>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #staffListing>\n <div class=\"w-60 overflow-hidden staff-listing\">\n <div class=\"d-flex w-100 h-100\">\n <div class=\"w-100\">\n <div class=\"staff-header mb-3\">\n <h1>Select Staff Member</h1>\n <p class=\"staff-subtitle mb-0\">Choose your preferred professional, or skip to have us assign the best available one</p>\n </div>\n\n <div class=\"search-container mb-4\">\n <div class=\"search-input-wrapper d-flex align-items-center\">\n <mat-icon class=\"search-icon me-2\">search</mat-icon>\n <input type=\"text\" class=\"search-input border-0 flex-grow-1\" placeholder=\"Search staff member by name...\" [(ngModel)]=\"staffSearchQuery\">\n <mat-icon class=\"clear-icon cursor-pointer ms-2\" *ngIf=\"staffSearchQuery\" (click)=\"staffSearchQuery = ''\">close</mat-icon>\n </div>\n </div>\n\n <!-- Pure product-only line: one flat staff list, same as the old single-service flow -->\n <div class=\"staff-list\" *ngIf=\"cartServices.length === 0\">\n <ng-container *ngFor=\"let staff of filteredStaff\">\n <div class=\"card rounded-3 p-3\" (click)=\"selectStaffForProductOnlyLine(staff)\"\n [ngClass]=\"{ 'staff-card-selected' : staff?.selected, 'staff-card': !staff?.selected }\">\n <div class=\"d-flex align-items-center justify-content-between w-100\">\n <div class=\"d-flex align-items-center flex-grow-1\">\n <div class=\"staff-avatar rounded-circle d-flex align-items-center justify-content-center me-4\">\n {{staff?.staffName.slice(0,2).toUpperCase()}}\n </div>\n <div class=\"staff-details flex-grow-1\">\n <h3 class=\"staff-name\">{{(staff?.staffName ? staff?.staffName : 'N/A') | titlecase}}</h3>\n <p class=\"staff-specialty\">{{(businessName && businessName !== 'N/A') ? businessName : 'Booking Specialist'}}</p>\n </div>\n </div>\n <div class=\"selection-indicator\">\n <div class=\"checkmark-circle-mini d-flex align-items-center justify-content-center\" [class.selected]=\"staff?.selected\">\n <mat-icon *ngIf=\"staff?.selected\">check</mat-icon>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <div class=\"empty-state-mini\" *ngIf=\"filteredStaff.length === 0\">\n <mat-icon>badge</mat-icon>\n <h4>No staff available</h4>\n <p>There's no staff member available for this service right now.</p>\n </div>\n </div>\n\n <!-- Bundled cart: one pool per line that resolution couldn't collapse to a single provider -->\n <ng-container *ngIf=\"cartServices.length > 0\">\n <div class=\"staff-line-group mb-4\" *ngFor=\"let line of resolvedLines\">\n <ng-container *ngIf=\"line.candidateStaffPool?.length\">\n <h4 class=\"mb-2\">For {{line.services.length}} service(s): {{ (line.services | slice:0:3).length ? '' : '' }}<span *ngFor=\"let s of line.services; let last = last\">{{s.name}}{{last ? '' : ', '}}</span></h4>\n <div class=\"staff-list mb-3\">\n <ng-container *ngFor=\"let staff of line.candidateStaffPool\">\n <div class=\"card rounded-3 p-3\" (click)=\"selectStaffForLine(line, staff)\"\n [ngClass]=\"{ 'staff-card-selected' : line.selectedStaffId === staff.id, 'staff-card': line.selectedStaffId !== staff.id }\">\n <div class=\"d-flex align-items-center justify-content-between w-100\">\n <div class=\"d-flex align-items-center flex-grow-1\">\n <div class=\"staff-avatar rounded-circle d-flex align-items-center justify-content-center me-4\">\n {{staff?.name?.slice(0,2)?.toUpperCase()}}\n </div>\n <div class=\"staff-details flex-grow-1\">\n <h3 class=\"staff-name\">{{(staff?.name ? staff?.name : 'N/A') | titlecase}}</h3>\n </div>\n </div>\n <div class=\"selection-indicator\">\n <div class=\"checkmark-circle-mini d-flex align-items-center justify-content-center\" [class.selected]=\"line.selectedStaffId === staff.id\">\n <mat-icon *ngIf=\"line.selectedStaffId === staff.id\">check</mat-icon>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container>\n <div class=\"empty-state-mini\" *ngIf=\"!line.candidateStaffPool?.length\">\n <mat-icon>badge</mat-icon>\n <h4>No staff available</h4>\n <p>No staff member is available for {{line.services.length}} service(s) in this line.</p>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #dateSelection>\n <div class=\"w-60 date_section\">\n <div class=\"row justify-content-center h-100\">\n <div class=\"col-12 h-100\">\n <div class=\"datetime-header mb-2\">\n <h1>Select Date & Time</h1>\n <p class=\"datetime-subtitle mb-0\">Choose when you'd like your appointment</p>\n </div>\n\n <div class=\"d-flex gap-4 main_container\">\n <div [ngClass]=\"{'w-50' : screenWidth > 475 , 'w-100':screenWidth < 475}\">\n <div class=\"section-card card rounded-3 p-4 h-100\">\n <h3 class=\"section-title\">Select Date</h3>\n\n <div class=\"date-picker-container d-flex align-items-center justify-content-between\"\n (click)=\"$event.stopPropagation()\">\n <input type=\"text\" class=\"date-input border-0 rounded-2\" placeholder=\"dd-mm-yyyy\"\n [value]=\"selectedDateStr\" readonly (click)=\"toggleCalendar($event)\">\n\n <mat-icon class=\"ms-2\" (click)=\"toggleCalendar($event)\">calendar_today</mat-icon>\n </div>\n <div class=\"position-relative\" (click)=\"$event.stopPropagation()\">\n <div class=\"datepicker-popover\" *ngIf=\"showCalendar\">\n <mat-calendar [(selected)]=\"selectedDate\" [dateFilter]=\"dateFilter\"\n (selectedChange)=\"onDateSelected($event)\" class=\"datepicker-calendar\">\n </mat-calendar>\n </div>\n </div>\n </div>\n </div>\n\n <!-- One slot-picker per resolved line, side by side when there's more than one (design doc \u00A73b) -->\n <div class=\"time_selection\" [ngClass]=\"{'w-50' : screenWidth > 475 , 'w-100':screenWidth < 475}\" *ngIf=\"resolvedLines.length <= 1\">\n <div class=\"section-card card h-100 rounded-3 p-4\">\n <h3 class=\"section-title\">Available Times</h3>\n <div class=\"row g-2 mb-4 overflow-scroll\">\n <ng-container *ngIf=\"!skeletonLoader && resolvedLines[0]\">\n <div class=\"col-4\" *ngFor=\"let time of resolvedLines[0].slots\">\n <div class=\"time-slot rounded-2\" [class.selected]=\"time.selected\"\n (click)=\"selectSlotForLine(resolvedLines[0], time)\">{{time ? time?.value : 'N/A'}}</div>\n </div>\n <p class=\"mb-0\" *ngIf=\"resolvedLines[0].slots.length === 0\">No slots available for this date.</p>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Multi-line case: each line gets its own full-width card with a staff header -->\n <div class=\"d-flex gap-4 main_container flex-wrap\" *ngIf=\"resolvedLines.length > 1\">\n <div class=\"w-100\" *ngFor=\"let line of resolvedLines\">\n <div class=\"section-card card rounded-3 p-4\">\n <h3 class=\"section-title\">Professional: {{line.staffName || line.selectedStaffName || 'To be assigned'}}</h3>\n <p class=\"mb-2\" *ngIf=\"line.services.length\"><span *ngFor=\"let s of line.services; let last = last\">{{s.name}}{{last ? '' : ', '}}</span></p>\n <div class=\"row g-2 mb-2 overflow-scroll\">\n <ng-container *ngIf=\"!line.slotsLoading\">\n <div class=\"col-4\" *ngFor=\"let time of line.slots\">\n <div class=\"time-slot rounded-2\" [class.selected]=\"time.selected\"\n (click)=\"selectSlotForLine(line, time)\">{{time ? time?.value : 'N/A'}}</div>\n </div>\n <p class=\"mb-0\" *ngIf=\"line.slots.length === 0\">No slots available for this date.</p>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #contactDetails>\n <div class=\"w-60 contact_section\">\n <div class=\"contact-header mb-2\">\n <h1>Contact Details</h1>\n <p class=\"contact-subtitle mb-0\">Provide your contact information</p>\n </div>\n\n <div class=\"d-flex gap-3 details_container flex-column w-100\">\n <div class=\"d-flex gap-4\">\n <div [ngClass]=\"{'w-50' : selectedMode === 'HOME_VISIT', 'w-100' : selectedMode !== 'HOME_VISIT'}\">\n <div class=\"form-section card rounded-3 p-4 h-100\">\n <h3 class=\"section-title\">Personal Information</h3>\n\n <div class=\"mb-4\">\n <label class=\"form-label d-flex align-items-center\">\n Full Name\n <span class=\"required-asterisk\">*</span>\n </label>\n <input type=\"text\" class=\"form-control form-input rounded-2\"\n [(ngModel)]=\"appointmentPayload.customerDetail.name\"\n (ngModelChange)=\"checkRequiredValues()\" simpoLettersOnly>\n </div>\n\n <div class=\"mb-4\">\n <label class=\"form-label d-flex align-items-center\">\n Email Address\n <span class=\"required-asterisk\">*</span>\n </label>\n <input type=\"email\" class=\"form-control form-input rounded-2\"\n [(ngModel)]=\"appointmentPayload.customerDetail.email\"\n (ngModelChange)=\"checkRequiredValues()\"\n pattern=\"^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$\" #emailField=\"ngModel\"\n name=\"email\" required>\n </div>\n\n <div class=\"mb-0\">\n <label class=\"form-label d-flex align-items-center\">\n Phone Number\n <span class=\"required-asterisk\">*</span>\n </label>\n <input type=\"tel\" class=\"form-control rounded-2\"\n [(ngModel)]=\"appointmentPayload.customerDetail.phoneNumber\"\n (ngModelChange)=\"checkRequiredValues()\" simpoNumbersOnly\n [ngClass]=\"{'mobile_number' : appointmentPayload.customerDetail.phoneNumber.length != 10}\">\n </div>\n </div>\n </div>\n <!-- Home Visit address. Customer context: same saved-address flow as\n checkout/BookAppointmentComponent. Admin context (isAdminBooking): no\n logged-in customer account to read a saved address book from, so staff type\n the address manually instead. -->\n <div class=\"w-50\" *ngIf=\"selectedMode === 'HOME_VISIT'\">\n <div class=\"form-section card rounded-3 p-4 h-100\">\n <h3 class=\"section-title\">Home Visit Details</h3>\n\n <ng-container *ngIf=\"!isAdminBooking; else manualHomeVisitAddress\">\n <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\n <div class=\"address-info\">\n <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\n <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\n {{defaultAddress?.stateName}}</div>\n <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\n </div>\n </div>\n <button type=\"button\" class=\"change-address-btn w-100\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">\n CHANGE OR ADD ADDRESS\n </button>\n\n <div class=\"addLinks\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\n <mat-icon>add</mat-icon>\n <span class=\"ms-2\">Add an address</span>\n </div>\n </ng-container>\n\n <ng-template #manualHomeVisitAddress>\n <div class=\"mb-3\">\n <label class=\"form-label d-flex align-items-center\">Receiver Name</label>\n <input type=\"text\" class=\"form-control form-input rounded-2\" [(ngModel)]=\"homeVisitAddress.receiverName\" (ngModelChange)=\"checkRequiredValues()\">\n </div>\n <div class=\"mb-3\">\n <label class=\"form-label d-flex align-items-center\">Receiver Phone</label>\n <input type=\"tel\" class=\"form-control form-input rounded-2\" simpoNumbersOnly [(ngModel)]=\"homeVisitAddress.receiverPhone\" (ngModelChange)=\"checkRequiredValues()\">\n </div>\n <div class=\"mb-3\">\n <label class=\"form-label d-flex align-items-center\">Address Line 1</label>\n <input type=\"text\" class=\"form-control form-input rounded-2\" [(ngModel)]=\"homeVisitAddress.addressLine1\" (ngModelChange)=\"checkRequiredValues()\">\n </div>\n <div class=\"mb-3\">\n <label class=\"form-label d-flex align-items-center\">Address Line 2 (optional)</label>\n <input type=\"text\" class=\"form-control form-input rounded-2\" [(ngModel)]=\"homeVisitAddress.addressLine2\">\n </div>\n <div class=\"d-flex gap-2 mb-3\">\n <div class=\"w-50\">\n <label class=\"form-label d-flex align-items-center\">City</label>\n <input type=\"text\" class=\"form-control form-input rounded-2\" [(ngModel)]=\"homeVisitAddress.city\" (ngModelChange)=\"checkRequiredValues()\">\n </div>\n <div class=\"w-50\">\n <label class=\"form-label d-flex align-items-center\">State</label>\n <input type=\"text\" class=\"form-control form-input rounded-2\" [(ngModel)]=\"homeVisitAddress.state\">\n </div>\n </div>\n <div class=\"mb-3\">\n <label class=\"form-label d-flex align-items-center\">Pincode</label>\n <input type=\"text\" class=\"form-control form-input rounded-2\" simpoNumbersOnly [(ngModel)]=\"homeVisitAddress.zipCode\" (ngModelChange)=\"checkRequiredValues()\">\n </div>\n </ng-template>\n\n <div class=\"mb-0 mt-3\">\n <label class=\"form-label d-flex align-items-center\">Special Instructions</label>\n <textarea class=\"form-control form-textarea rounded-2\"\n placeholder=\"Any special instructions for the professional (optional)\"\n [(ngModel)]=\"instructions\"></textarea>\n </div>\n </div>\n </div>\n </div>\n <div class=\"policies-container\"\n *ngIf=\"cartServices[0]?.cancellationPolicy?.length > 0 || cartServices[0]?.reschedulePolicy?.length\">\n <h2 class=\"policies-title\">Policies & Terms</h2>\n\n <div class=\"policy-items-container d-flex flex-column gap-3\">\n <div class=\"policy-item d-flex justify-content-between align-items-center\"\n (click)=\"showCancellationPolicy = !showCancellationPolicy\">\n <h3 class=\"policy-title\">Cancellation Policy</h3>\n <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\n *ngIf=\"!showCancellationPolicy\">keyboard_arrow_right</mat-icon>\n <mat-icon *ngIf=\"showCancellationPolicy\">keyboard_arrow_down</mat-icon>\n </div>\n </div>\n <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\n *ngIf=\"showCancellationPolicy\">\n <span *ngFor=\"let policy of cartServices[0]?.cancellationPolicy\">•\n {{policy}}</span>\n </div>\n\n <div class=\"policy-item d-flex justify-content-between align-items-center\"\n (click)=\"showReducingPolicy = !showReducingPolicy\">\n <h3 class=\"policy-title\">Rescheduling Policy</h3>\n <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\n *ngIf=\"!showReducingPolicy\">keyboard_arrow_right</mat-icon>\n <mat-icon *ngIf=\"showReducingPolicy\">keyboard_arrow_down</mat-icon>\n </div>\n </div>\n <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\n *ngIf=\"showReducingPolicy\">\n <span *ngFor=\"let policy of cartServices[0]?.reschedulePolicy\">• {{policy}}</span>\n </div>\n </div>\n\n <div class=\"acceptance-section\">\n <input type=\"checkbox\" class=\"custom-checkbox\" [(ngModel)]=\"termsAndConditions\"\n (ngModelChange)=\"checkRequiredValues()\">\n <p class=\"acceptance-text\" style=\"margin-bottom:0px !important\">\n I understand and accept the cancellation & rescheduling policies.\n </p>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #paymentTab>\n <div class=\"w-60 payment_section\">\n <div class=\"w-100 h-100\">\n <div class=\"w-100 d-flex justify-content-center align-items-center flex-column\">\n <div class=\"payment-header mb-3 w-100\">\n <h1 style=\"font-size:24px;font-weight: 600;\">Booking Summary</h1>\n <p class=\"payment-subtitle mb-0\">Review your booking before confirming</p>\n </div>\n\n <div class=\"booking-summary-card\" [ngClass]=\"{'w-100' : screenWidth < 475,'w-50':screenWidth > 475}\">\n <div *ngFor=\"let line of resolvedLines; let i = index\">\n <h2 class=\"summary-title\" *ngIf=\"resolvedLines.length > 1\">Line {{i + 1}}</h2>\n <div class=\"summary-row\" *ngFor=\"let s of line.services\">\n <div class=\"summary-label\">{{s.name}}</div>\n <div class=\"summary-value\"><span class=\"currency-symbol\">\u20B9</span>{{servicePrice(s.id)}}</div>\n </div>\n <div class=\"summary-row\" *ngIf=\"line.staffName || line.selectedStaffName\">\n <div class=\"summary-label\">Professional</div>\n <div class=\"summary-value\">{{line.staffName || line.selectedStaffName}}</div>\n </div>\n <div class=\"summary-row\" *ngIf=\"selectedMode === 'STORE_VISIT'\">\n <div class=\"summary-label\">Location</div>\n <div class=\"summary-value\">{{selectedLocation?.storeName ?? 'N/A'}}</div>\n </div>\n <div class=\"summary-row\">\n <div class=\"summary-label\">Date & Time</div>\n <div class=\"summary-value\">{{selectedDateStr}} at {{line.selectedSlot?.value ?? 'N/A'}}</div>\n </div>\n </div>\n\n <div *ngIf=\"productCartItems.length > 0\">\n <h2 class=\"summary-title\">Products</h2>\n <div class=\"summary-row\" *ngFor=\"let p of productCartItems\">\n <div class=\"summary-label\">{{p.itemName}} x{{p.quantity}}</div>\n <div class=\"summary-value\"><span class=\"currency-symbol\">\u20B9</span>{{(p.sellingPrice ?? p.price ?? 0) * (p.quantity ?? 1)}}</div>\n </div>\n </div>\n\n <h2 class=\"summary-title\">Payment</h2>\n <div class=\"summary-row\" *ngIf=\"homeVisitCharge > 0\">\n <div class=\"summary-label\">Home visit charge</div>\n <div class=\"summary-value\"><span class=\"currency-symbol\">\u20B9</span>{{homeVisitCharge}}</div>\n </div>\n <div class=\"summary-row\">\n <div class=\"summary-label\">Total</div>\n <div class=\"summary-value\"><span class=\"currency-symbol\">\u20B9</span>{{reviewTotal}}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #statusTemplate>\n <div class=\"booking-confirmation\">\n <div class=\"success-icon\">\n <div class=\"checkmark-circle\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/881293c1758695578518success.gif\"\n class=\"w-100 h-100\" *ngIf=\"apiStatus\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/325000c1758695564518fail.gif\"\n class=\"w-100 h-100\" *ngIf=\"!apiStatus\">\n </div>\n </div>\n\n <div class=\"confirmation-content\">\n <h1 class=\"confirmation-title\">{{apiStatus ? 'Booking Confirmed!' : 'Booking Failed'}}</h1>\n <p class=\"confirmation-message\">\n {{apiStatus ? 'Your appointment has been successfully booked.':'Failed to book you appointment. Please\n try again later'}}\n </p>\n\n <!-- Video Call link, when already present on the confirmed group (a paid Video Call's\n link only appears once payment verification completes, handled elsewhere - see\n verify-payment.component.ts, not this screen). -->\n <div class=\"video-call-link-card d-flex align-items-center justify-content-center\" *ngIf=\"apiStatus && selectedMode === 'VIDEO_CALL' && bookingGroup?.videoCallLink\">\n <div class=\"details-card\">\n <h3 class=\"details-title\">Your Video Call Link</h3>\n <a [href]=\"bookingGroup.videoCallLink\" target=\"_blank\">{{bookingGroup.videoCallLink}}</a>\n </div>\n </div>\n\n <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus\">\n <div class=\"details-card\">\n <h3 class=\"details-title\">Appointment Details</h3>\n <div class=\"details-row\" *ngFor=\"let line of resolvedLines\">\n <span class=\"detail-label\">{{line.services.length ? (line.services[0].name) : 'Products'}}</span>\n <span class=\"detail-value\">{{selectedDateStr}} at {{line.selectedSlot?.value ?? 'N/A'}}</span>\n </div>\n </div>\n </div>\n\n <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus\">\n <div class=\"details-card\">\n <h3 class=\"details-title\">Payment</h3>\n <div class=\"details-row\" *ngIf=\"bookingGroup?.homeVisitCharge > 0\">\n <span class=\"detail-label\">Home visit charge</span>\n <span class=\"detail-value\">\u20B9{{bookingGroup.homeVisitCharge}}</span>\n </div>\n <div class=\"details-row\">\n <span class=\"detail-label\">Total</span>\n <span class=\"detail-value\">\u20B9{{bookingTotal}}</span>\n </div>\n <div class=\"details-row\">\n <span class=\"detail-label\">Paid</span>\n <span class=\"detail-value\">\u20B9{{bookingPaid}}</span>\n </div>\n <div class=\"details-row\" *ngIf=\"bookingDue > 0\">\n <span class=\"detail-label\">Due</span>\n <span class=\"detail-value\">\u20B9{{bookingDue}}</span>\n </div>\n </div>\n </div>\n\n <div class=\"done-actions d-flex align-items-center justify-content-center\" *ngIf=\"apiStatus\">\n <ng-container *ngIf=\"!isAdminContext; else adminDoneActions\">\n <button type=\"button\" class=\"done-btn done-btn-primary\" (click)=\"goToMyBookings()\">View my bookings</button>\n <button type=\"button\" class=\"done-btn done-btn-secondary\" (click)=\"goToListing()\">Keep shopping</button>\n </ng-container>\n <ng-template #adminDoneActions>\n <button type=\"button\" class=\"done-btn done-btn-primary\" (click)=\"goToAppointmentsList()\">Back to Appointments List</button>\n <button type=\"button\" class=\"done-btn done-btn-secondary\" (click)=\"bookAnother()\">Book Another</button>\n </ng-template>\n </div>\n </div>\n </div>\n</ng-template>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap\";mat-icon{font-family:Material Icons!important}:host{--font-sans: \"Outfit\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;--slate-50: #f8fafc;--slate-100: #f1f5f9;--slate-200: #e2e8f0;--slate-300: #cbd5e1;--slate-400: #94a3b8;--slate-500: #64748b;--slate-600: #475569;--slate-700: #334155;--slate-800: #1e293b;--slate-900: #0f172a;--color-primary: #230860;--color-secondary: #00b6ff;--color-accent-gradient: linear-gradient(135deg, #230860 0%, #00b6ff 100%);--color-success: #10b981;--color-success-bg: #ecfdf5;--color-error: #ef4444;--color-error-bg: #fef2f2;--border-radius-sm: 8px;--border-radius-md: 12px;--border-radius-lg: 16px;--border-radius-xl: 24px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .05), 0 2px 4px -2px rgba(0, 0, 0, .05);--shadow-lg: 0 10px 15px -3px rgba(35, 8, 96, .05), 0 4px 6px -4px rgba(35, 8, 96, .05);--shadow-xl: 0 20px 25px -5px rgba(35, 8, 96, .08), 0 8px 10px -6px rgba(35, 8, 96, .08);--transition-smooth: all .3s cubic-bezier(.4, 0, .2, 1);--transition-bounce: all .4s cubic-bezier(.175, .885, .32, 1.275)}*{box-sizing:border-box;font-family:var(--font-sans)}.main_section{position:relative;height:100vh;background-color:var(--slate-50);display:flex;flex-direction:column;overflow:hidden}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.main_header{padding:15px;background:#fff;border-bottom:1px solid var(--slate-100);flex-shrink:0;box-shadow:0 2px 8px #00000003}.header{display:flex;align-items:center;justify-content:space-between}.back-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem 1.2rem;border-radius:var(--border-radius-md);background:var(--slate-50);border:1px solid var(--slate-200);color:var(--slate-700)!important;transition:var(--transition-smooth);font-weight:500;font-size:.9rem;cursor:pointer}.back-btn mat-icon{font-size:18px!important;width:18px!important;height:18px!important;color:var(--slate-700)!important;display:flex;align-items:center;justify-content:center}.back-btn:hover{background:var(--slate-100);transform:translate(-3px);color:var(--slate-900)!important}.header-title{flex-grow:1;text-align:right}.header-title h1{font-size:1.5rem;font-weight:700;margin-bottom:.2rem;color:var(--slate-900)!important;letter-spacing:-.025em}.header-title p{color:var(--slate-500)!important;font-size:.9rem;font-weight:500;margin-bottom:0}.progress-bar{width:100%;height:6px;background-color:var(--slate-100);margin-top:3px;border-radius:10px;overflow:hidden;position:relative}.progress-fill{height:100%;background:var(--color-accent-gradient);border-radius:10px;transition:width .5s cubic-bezier(.4,0,.2,1);position:relative}.progress-fill:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,#fff0,#ffffff4d,#fff0);animation:shimmer 2s infinite linear}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.main_body{flex-grow:1;overflow-y:auto;padding:10px;display:flex;justify-content:center;background:var(--slate-50)}.w-60{width:100%;max-width:800px}.service_section,.location_section,.staff-listing,.date_section,.contact_section,.payment_section,.booking-confirmation{animation:slideUp .5s cubic-bezier(.16,1,.3,1) forwards}@keyframes slideUp{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}h2{font-size:1.5rem;font-weight:700;color:var(--slate-900)!important;letter-spacing:-.02em;margin-bottom:.3rem}p.subtitle,.service-selection p,.location_section p,.staff-subtitle,.datetime-subtitle,.contact-subtitle,.payment-subtitle{color:var(--slate-500)!important;font-size:13px;margin-bottom:2rem}.services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.5rem;padding-bottom:2rem}.service-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:180px}.service-card:hover{border-color:var(--slate-400);transform:translateY(-4px);box-shadow:var(--shadow-lg)}.service-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:180px;transform:translateY(-2px)}.service-card-selected:before,.location-card-selected:before{content:\"\\2713\";position:absolute;top:-10px;right:-10px;background:var(--color-accent-gradient);color:#fff!important;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;box-shadow:0 4px 8px #2308604d;animation:popIn .3s cubic-bezier(.175,.885,.32,1.275);z-index:10}@keyframes popIn{0%{transform:scale(0)}to{transform:scale(1)}}.service-header{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1rem}.service-icon{width:48px;height:48px;border-radius:var(--border-radius-md);background-color:var(--slate-100);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition-smooth)}.service-icon mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:var(--color-primary)!important}.service-card-selected .service-icon{background:var(--slate-900)}.service-card-selected .service-icon mat-icon{color:#fff!important}.service-info{flex-grow:1}.service-title{font-size:1.15rem;font-weight:700;color:var(--slate-900)!important;line-height:1.3;margin-bottom:.2rem}.service-price{font-size:1.25rem;font-weight:800;color:var(--slate-900)!important;text-align:right}.service-duration{font-size:.8rem;color:var(--slate-500)!important;font-weight:600;text-align:right;margin-top:.1rem}.service-description{color:var(--slate-600)!important;font-size:.9rem;line-height:1.5;margin-bottom:1.25rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.home-visit{align-self:flex-start;display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:600;color:var(--slate-700)!important;border:1px solid var(--slate-200);padding:.35rem .75rem;border-radius:20px;background-color:var(--slate-50);transition:var(--transition-smooth)}.home-visit img{width:14px;height:14px}.home-visit:before{content:\"\";display:inline-block;width:6px;height:6px;border-radius:50%;background-color:var(--color-success);box-shadow:0 0 #10b98166;animation:pulseGlow 1.8s infinite}@keyframes pulseGlow{0%{box-shadow:0 0 #10b981b3}70%{box-shadow:0 0 0 6px #10b98100}to{box-shadow:0 0 #10b98100}}.location-list{display:flex;flex-direction:column;gap:1.25rem;padding-bottom:2rem}.location-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm)}.location-card:hover{border-color:var(--slate-400);transform:translateY(-2px);box-shadow:var(--shadow-md)}.location-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);transform:translateY(-1px)}.location-content{display:flex;align-items:center}.location-info{display:flex;align-items:center;gap:1.25rem;width:100%}.location-icon{width:52px;height:52px;background-color:var(--slate-100);border-radius:var(--border-radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition-smooth)}.location-icon img{width:28px;height:28px}.location-card-selected .location-icon{background:var(--slate-900)}.location-details{flex-grow:1}.location-details h3{font-size:1.15rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:.3rem}.location-details p{font-size:.9rem;color:var(--slate-500)!important;font-weight:450;line-height:1.4;margin-bottom:0}.search-container{width:100%;margin-bottom:1.25rem}.search-input-wrapper{width:100%;background-color:var(--slate-100);border:1.5px solid var(--slate-200);border-radius:var(--border-radius-md);padding:.6rem 1rem;transition:var(--transition-smooth)}.search-input-wrapper:focus-within{background-color:#fff;border-color:var(--color-primary);box-shadow:0 0 0 3px #23086014}.search-input{font-size:.95rem;font-weight:500;color:var(--slate-900)!important;background:transparent;outline:none;width:100%}.search-input::placeholder{color:var(--slate-400)}.search-icon{color:var(--slate-400)!important;font-size:20px!important;width:20px!important;height:20px!important}.clear-icon{color:var(--slate-400)!important;font-size:18px!important;width:18px!important;height:18px!important;transition:var(--transition-smooth)}.clear-icon:hover{color:var(--slate-600)!important}.staff-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem;max-height:48vh;overflow-y:auto;padding-right:.5rem;padding-bottom:1rem}.staff-list::-webkit-scrollbar{width:6px}.staff-list::-webkit-scrollbar-track{background:var(--slate-50);border-radius:4px}.staff-list::-webkit-scrollbar-thumb{background:var(--slate-200);border-radius:4px}.staff-list::-webkit-scrollbar-thumb:hover{background:var(--slate-300)}.staff-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:.9rem 1.25rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm);margin-bottom:0!important}.staff-card:hover{border-color:var(--slate-300);transform:translateY(-2px);box-shadow:var(--shadow-md)}.staff-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:.9rem 1.25rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);transform:translateY(-1px);margin-bottom:0!important}.staff-avatar{width:48px;height:48px;background:var(--color-accent-gradient);font-size:.95rem;font-weight:700;color:#fff!important;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 10px #2308601a;letter-spacing:.5px;transition:var(--transition-smooth)}.staff-card-selected .staff-avatar{transform:scale(1.05)}.staff-name{font-size:1.05rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:.2rem;letter-spacing:-.015em}.staff-specialty{font-size:.8rem;color:var(--slate-500)!important;font-weight:600;margin-bottom:0;text-transform:uppercase;letter-spacing:.05em}.selection-indicator{display:flex;align-items:center;justify-content:center;margin-left:auto;padding-left:1rem}.checkmark-circle-mini{width:24px;height:24px;border:2px solid var(--slate-300);border-radius:50%;background-color:#fff;transition:var(--transition-bounce);color:#fff!important}.checkmark-circle-mini.selected{background:var(--color-accent-gradient);border-color:transparent;box-shadow:0 3px 8px #23086040}.checkmark-circle-mini mat-icon{font-size:14px!important;width:14px!important;height:14px!important;color:#fff!important;font-weight:800!important;display:flex;align-items:center;justify-content:center}.main_container{display:flex;gap:2rem;margin-bottom:2rem}.section-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.75rem;box-shadow:var(--shadow-sm);height:100%}.section-title{font-size:1.1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:10px!important;letter-spacing:-.01em}.date-picker-container{border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:.6rem 1rem;display:flex;align-items:center;justify-content:space-between;transition:var(--transition-smooth);background-color:var(--slate-50);cursor:pointer}.date-picker-container:hover{border-color:var(--slate-400);background-color:#fff}.date-input{font-size:.95rem;font-weight:600;color:var(--slate-800)!important;background:transparent;border:none;outline:none;cursor:pointer;width:100%}.date-picker-container mat-icon{color:var(--color-primary)!important;font-size:20px!important;width:20px!important;height:20px!important}.datepicker-popover{position:absolute;z-index:1000;margin-top:4px;border-radius:var(--border-radius-lg);overflow:hidden;box-shadow:var(--shadow-xl);background:#fff;border:1px solid var(--slate-200);width:320px}::ng-deep .datepicker-calendar{border-radius:var(--border-radius-lg)!important;width:100%!important}::ng-deep .mat-calendar-header{background:var(--color-accent-gradient)!important;color:#fff!important;padding:.5rem!important}::ng-deep .mat-calendar-content{padding:8px!important}::ng-deep .mat-calendar-controls{margin:0!important}::ng-deep .mat-calendar-period-button{color:#fff!important;font-weight:700!important;font-size:1rem!important}::ng-deep .mat-calendar-arrow{fill:#fff!important}::ng-deep .mat-calendar-previous-button,::ng-deep .mat-calendar-next-button{color:#fff!important}::ng-deep .mat-calendar-body-cell{font-size:13px!important}::ng-deep .mat-calendar-body-cell-content{font-weight:600!important;color:var(--slate-800)!important;border-radius:8px!important}::ng-deep .mat-calendar-body-selected{background:var(--color-accent-gradient)!important;color:#fff!important;box-shadow:0 4px 10px #23086033!important}::ng-deep .mat-calendar-body-today:not(.mat-calendar-body-selected){border:2px solid var(--color-primary)!important;color:var(--color-primary)!important}.time_selection{max-height:420px;display:flex;flex-direction:column}.time_selection .row{flex-grow:1;overflow-y:auto;padding-right:.25rem;margin-top:10px}.time-slot{background:#fff;border:1px solid var(--slate-200);font-size:.9rem;font-weight:600;color:var(--slate-800)!important;padding:.75rem .5rem;border-radius:var(--border-radius-md);cursor:pointer;transition:var(--transition-smooth);text-align:center;box-shadow:var(--shadow-sm)}.time-slot:hover{border-color:var(--slate-400);transform:translateY(-2px);box-shadow:var(--shadow-md);background-color:var(--slate-50)}.time-slot.selected{background:var(--color-accent-gradient);border-color:transparent;color:#fff!important;box-shadow:0 4px 12px #23086033}.form-section{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.75rem;box-shadow:var(--shadow-sm)}.form-label{font-size:.85rem;font-weight:600;color:var(--slate-700)!important;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.05em}.required-asterisk{color:var(--color-error);margin-left:2px}.form-control,.form-input,.form-textarea{width:100%;background-color:var(--slate-50);border:1px solid var(--slate-200);color:var(--slate-900)!important;font-size:.95rem;font-weight:500;padding:.75rem 1rem;border-radius:var(--border-radius-md);transition:var(--transition-smooth);outline:none}.form-control:focus,.form-input:focus,.form-textarea:focus{background-color:#fff;border-color:var(--color-primary);box-shadow:0 0 0 3px #2308601a}.form-textarea{min-height:100px;resize:vertical}.policies-container{background-color:#fff;border:1px solid var(--slate-200);padding:1.75rem;border-radius:var(--border-radius-lg);margin-top:1.5rem;box-shadow:var(--shadow-sm)}.policies-title{font-size:1.1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:1.25rem}.policy-item{background-color:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:1rem 1.25rem;cursor:pointer;transition:var(--transition-smooth);display:flex;justify-content:space-between;align-items:center}.policy-item:hover{background-color:var(--slate-100);border-color:var(--slate-300)}.policy-title{font-size:.95rem;font-weight:600;color:var(--slate-800)!important}.policy-arrow mat-icon{color:var(--slate-500)!important;transition:var(--transition-smooth)}.cancellation_policies{background-color:var(--slate-50);padding:1rem 1.5rem;border-left:3px solid var(--color-primary);border-radius:0 0 var(--border-radius-md) var(--border-radius-md);margin-top:-4px;margin-bottom:1rem;font-size:.9rem;color:var(--slate-600)!important;line-height:1.5}.acceptance-section{display:flex;align-items:center;gap:.75rem;margin-top:1.5rem}.custom-checkbox{width:20px;height:20px;border:2px solid var(--slate-300);border-radius:6px;cursor:pointer;transition:var(--transition-smooth);position:relative;appearance:none;background-color:#fff;outline:none}.custom-checkbox:checked{background:var(--color-accent-gradient);border-color:transparent}.custom-checkbox:checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff!important;font-size:.75rem;font-weight:800}.acceptance-text{font-size:.95rem;color:var(--slate-700)!important;font-weight:500;-webkit-user-select:none;user-select:none;line-height:1.4}.booking-summary-card{background-color:#fff;border:1px solid var(--slate-200);padding:2rem;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);position:relative}.booking-summary-card:after{content:\"\";position:absolute;bottom:-1px;left:0;right:0;height:10px;background-image:radial-gradient(circle,white 4px,transparent 5px);background-size:12px 12px;background-position:0 0;z-index:2}.summary-title{font-size:1.25rem;font-weight:700;color:var(--slate-900)!important;border-bottom:2px dashed var(--slate-200);padding-bottom:1rem;margin-bottom:1.5rem;text-align:center}.summary-row{display:flex;justify-content:space-between;align-items:center;padding:.85rem 0;border-bottom:1px solid var(--slate-100)}.summary-label{font-size:.95rem;color:var(--slate-500)!important;font-weight:500}.summary-value{font-size:.95rem;color:var(--slate-900)!important;font-weight:600;text-align:right}.total-row{margin-top:1rem;padding-top:1.25rem;border-top:2px dashed var(--slate-200);border-bottom:none}.total-row .summary-label{font-size:1.25rem;font-weight:700;color:var(--slate-900)!important}.total-row .summary-value{font-size:1.5rem;font-weight:800;color:var(--color-primary)!important}.booking-confirmation{background:#fff;border:1px solid var(--slate-200);padding:3rem 2rem;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;align-items:center;text-align:center;max-width:500px;margin:0 auto}.success-icon{margin-bottom:1.5rem}.checkmark-circle{width:96px;height:96px;display:flex;align-items:center;justify-content:center}.confirmation-title{font-size:1.5rem;font-weight:800;color:var(--slate-900)!important;margin-bottom:.5rem}.confirmation-message{font-size:1rem;color:var(--slate-500)!important;line-height:1.6;margin-bottom:2rem;font-weight:450}.details-card{background-color:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:1.5rem;width:100%;margin-bottom:2rem;text-align:left}.details-title{font-size:1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.05em}.details-row{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px dashed var(--slate-200)}.details-row:last-child{border-bottom:none}.detail-label{font-size:.85rem;color:var(--slate-500)!important;font-weight:500}.detail-value{font-size:.9rem;color:var(--slate-900)!important;font-weight:600}.main_footer{border-top:1px solid var(--slate-200);background-color:#fff;padding:15px;flex-shrink:0;display:flex;justify-content:center;box-shadow:0 -4px 12px #00000005}.footer-buttons{width:100%;max-width:800px;display:flex;align-items:center}.back-footer-btn{font-size:.95rem;font-weight:600;color:var(--slate-600)!important;padding:.75rem 1.5rem;border-radius:var(--border-radius-md);transition:var(--transition-smooth);cursor:pointer}.back-footer-btn:hover{color:var(--slate-900)!important;background-color:var(--slate-100)}.continue-btn{background:var(--color-accent-gradient);color:#fff!important;border:none;padding:.75rem 2rem;border-radius:var(--border-radius-md);font-size:.95rem!important;font-weight:600;cursor:pointer;transition:var(--transition-smooth);box-shadow:0 4px 10px #23086033;width:max-content!important}.continue-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.continue-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed!important;box-shadow:none!important}.complete_booking,.pay-now-btn{background:var(--color-accent-gradient)!important;color:#fff!important;border:none;padding:.75rem 2.25rem!important;font-size:.95rem!important;font-weight:600;border-radius:var(--border-radius-md)!important;box-shadow:0 4px 12px #23086040;transition:var(--transition-smooth);cursor:pointer;display:flex;align-items:center;gap:.5rem;width:max-content!important}.complete_booking img,.pay-now-btn img{width:20px;height:20px;filter:brightness(0) invert(1)}.complete_booking:hover:not([disabled]),.pay-now-btn:hover:not([disabled]){transform:translateY(-2px);box-shadow:0 6px 18px #23086059}.complete_booking:disabled,.pay-now-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed;box-shadow:none}.service-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.5rem;padding:0;width:100%}.skeleton-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;height:180px;display:flex;flex-direction:column;justify-content:space-between}.skeleton{background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0,#f1f5f9 75%);background-size:200% 100%;animation:loading-shimmer 1.5s infinite linear;border-radius:4px}@keyframes loading-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-icon{width:48px;height:48px;border-radius:var(--border-radius-md)}.skeleton-title{height:20px;width:60%;margin-bottom:.5rem}.skeleton-price{height:20px;width:30%}.skeleton-duration{height:12px;width:25%;margin-top:.25rem}.skeleton-description{height:14px;width:85%}.skeleton-badge{height:28px;width:120px;border-radius:20px}.time-slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;width:100%}.skeleton-time-slot{height:42px;border-radius:var(--border-radius-md);background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0,#f1f5f9 75%);background-size:200% 100%;animation:loading-shimmer 1.5s infinite linear;border:1px solid var(--slate-100)}@media screen and (max-width: 475px){.main_header{padding:1rem}.header-title h1{font-size:1.25rem}.back-btn{padding:.5rem .8rem}.back-btn span{display:none}.main_body{padding:15px}.services-grid{grid-template-columns:1fr;gap:1rem}.staff-list{grid-template-columns:1fr!important;gap:.85rem!important}.service-card,.service-card-selected{min-height:auto}.main_container{flex-direction:column;gap:1.5rem}.datepicker-popover{width:100%;left:0}.details_container{gap:1.5rem}.details_container>.d-flex{flex-direction:column;gap:1.5rem}.details_container>.d-flex>div{width:100%!important}.booking-summary-card{padding:1.25rem}.summary-title{font-size:1.15rem}.total-row .summary-label{font-size:1.1rem}.total-row .summary-value{font-size:1.3rem}.main_footer{padding:1rem}.continue-btn{padding:.75rem 1.5rem}}.shipping-info{border-radius:10px;padding:20px;margin-bottom:12px;border:1px solid var(--slate-200);box-shadow:var(--shadow-sm)}.address-info{margin-bottom:0}.address-name{font-weight:700;margin-bottom:8px;color:var(--slate-900)!important}.address-details{color:var(--slate-500)!important;margin-bottom:8px}.mobile-number{font-weight:700;color:var(--slate-900)!important;font-size:15px}.change-address-btn{font-size:.85rem!important;font-weight:700!important;padding:10px;background:#fff;border:1px solid var(--slate-200);border-radius:8px;color:var(--slate-900)!important;cursor:pointer;transition:var(--transition-smooth)}.change-address-btn:hover{border-color:var(--color-primary);color:var(--color-primary)!important}.addLinks{padding:14px;border:1px dashed var(--slate-300);display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:8px;color:var(--slate-500)!important;margin-bottom:12px}.addLinks:hover{border-color:var(--color-primary);color:var(--color-primary)!important}h1{font-size:24px!important;font-weight:600!important}.done-actions{display:flex;gap:12px;width:100%}.done-btn{flex:1;max-width:220px;padding:.75rem 1.5rem;border-radius:var(--border-radius-md);font-size:.95rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth);border:none}.done-btn-primary{background:var(--color-accent-gradient);color:#fff!important;box-shadow:0 4px 10px #23086033}.done-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.done-btn-secondary{background:#fff;color:var(--slate-600)!important;border:1px solid var(--slate-200)}.empty-state-mini{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:48px 16px;color:var(--slate-500)}.empty-state-mini mat-icon{font-size:32px;height:32px;width:32px;color:var(--slate-300);margin-bottom:4px}.empty-state-mini h4{margin:0;font-size:15px;font-weight:600;color:var(--slate-700)}.empty-state-mini p{margin:0;font-size:13px;color:var(--slate-500)}.done-btn-secondary:hover{background-color:var(--slate-100);color:var(--slate-900)!important}\n"] }]
|
|
26133
26289
|
}], ctorParameters: () => [{ type: RestService }, { type: EventsService }, { type: i2$2.Router }, { type: i6$1.MessageService }, { type: BookingProductCartService }, { type: StorageServiceService }, { type: i3$2.MatDialog }, { type: i3$2.MatDialogRef, decorators: [{
|
|
26134
26290
|
type: Optional
|
|
26135
26291
|
}] }], propDecorators: { data: [{
|
|
@@ -26552,11 +26708,11 @@ class BookAppointmentComponent extends BaseSection {
|
|
|
26552
26708
|
});
|
|
26553
26709
|
}
|
|
26554
26710
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BookAppointmentComponent, deps: [{ token: i2$2.ActivatedRoute }, { token: i2$2.Router }, { token: RestService }, { token: EventsService }, { token: i6$1.MessageService }, { token: StorageServiceService }, { token: BookingProductCartService }, { token: i3$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26555
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BookAppointmentComponent, isStandalone: true, selector: "simpo-book-appointment", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n [showTransformOptions]=\"screenWidth < 475 ? 'translateY(-100%)' : ''\"></p-toast>\n<section class=\"main_section\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\n [simpoBackground]=\"backgroundInfo\" [style.--color-accent-gradient]=\"accentColor\">\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div class=\"main_body w-100 d-flex justify-content-center\">\n <div class=\"wiz-container\">\n\n <ng-container *ngIf=\"step === 'form'\">\n <div class=\"single-grid\">\n <div class=\"single-left\">\n\n <div class=\"wizard-banner\" [id]=\"data?.id\" [simpoBackground]=\"backgroundInfo\" [style.--color-accent-gradient]=\"accentColor\">\n <div class=\"wizard-banner-title\">{{bannerTitle}}</div>\n <div class=\"wizard-banner-desc\">{{bannerDesc}}</div>\n </div>\n\n <div class=\"sub-step-tabs\">\n <button type=\"button\" class=\"sub-step-tab\" *ngFor=\"let s of subSteps; trackBy: trackBySubStepKey\"\n [class.active]=\"s.active\" [class.locked]=\"s.locked\" [disabled]=\"s.locked\" (click)=\"s.go()\">\n <span class=\"sub-step-dot\">{{s.num}}</span>\n {{s.label}}\n </button>\n </div>\n\n <div class=\"sub-step-content\">\n <ng-container *ngIf=\"subStep === 'date'\">\n <div class=\"section-card card\">\n <div class=\"week-header\">\n <div>\n <h3 class=\"section-title mb-0\">Select a Date</h3>\n <p class=\"subtitle mb-0\">{{weekRangeLabel}}</p>\n </div>\n <div class=\"week-arrows\">\n <button type=\"button\" class=\"week-arrow-btn\" (click)=\"prevWeek()\" [disabled]=\"weekOffset <= 0\">\n <mat-icon>chevron_left</mat-icon>\n </button>\n <button type=\"button\" class=\"week-arrow-btn\" (click)=\"nextWeek()\" [disabled]=\"weekOffset >= maxWeekOffset\">\n <mat-icon>chevron_right</mat-icon>\n </button>\n </div>\n </div>\n <div class=\"week-strip\">\n <button type=\"button\" class=\"week-day\" *ngFor=\"let d of weekDays\" [class.selected]=\"d.selected\"\n (click)=\"pickDay(d)\">\n <div class=\"week-day-dow\">{{d.dow}}</div>\n <div class=\"week-day-num\">{{d.num}}</div>\n </button>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"subStep === 'time'\">\n <div class=\"section-card card\">\n <h3 class=\"section-title mb-0\">Select a Time</h3>\n <p class=\"subtitle\" *ngIf=\"selectedDateStr\">Available slots for {{selectedDateStr}}</p>\n <p class=\"subtitle mb-0\" *ngIf=\"!selectedDateStr\">Pick a date to see available times.</p>\n <div class=\"time-slot-grid overflow-scroll\" *ngIf=\"selectedDateStr\">\n <ng-container *ngIf=\"!slotsLoading; else slotsLoadingTpl\">\n <div class=\"time-slot rounded-2\" *ngFor=\"let time of slots\" [class.selected]=\"time.selected\"\n (click)=\"selectSlot(time)\">{{time?.value}}</div>\n <p class=\"mb-0\" *ngIf=\"slots.length === 0\">No slots available for this date.</p>\n </ng-container>\n <ng-template #slotsLoadingTpl>\n <p class=\"mb-0\">Loading available times...</p>\n </ng-template>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"subStep === 'details'\">\n <div class=\"section-card card\">\n <h3 class=\"section-title\">Booking Details</h3>\n <div class=\"booking-for-line\">\n Booking for <strong>{{userDetails?.contact?.name}}</strong>\n <ng-container *ngIf=\"userDetails?.contact?.mobile\"> \u00B7 {{userDetails?.contact?.mobile}}</ng-container>\n <ng-container *ngIf=\"userDetails?.contact?.email\"> \u00B7 {{userDetails?.contact?.email}}</ng-container>\n </div>\n\n <ng-container *ngIf=\"mode === 'HOME_VISIT'\">\n <p class=\"policies-title mt-3 mb-2\" style=\"font-size:1rem;\">Shipping Address</p>\n\n <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\n <div class=\"address-info\">\n <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\n <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\n {{defaultAddress?.stateName}}</div>\n <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\n </div>\n </div>\n <button type=\"button\" class=\"change-address-btn w-100\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">\n CHANGE OR ADD ADDRESS\n </button>\n\n <div class=\"addLinks\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\n <mat-icon>add</mat-icon>\n <span class=\"ms-2\">Add an address</span>\n </div>\n\n <div class=\"mb-0 mt-3\">\n <label class=\"form-label d-flex align-items-center\">Instructions (optional)</label>\n <textarea class=\"form-control form-textarea rounded-2\" [(ngModel)]=\"instructions\"></textarea>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n\n <div class=\"sub-step-footer\">\n <button type=\"button\" class=\"sub-back-btn\" [disabled]=\"subBackOff\" (click)=\"subBack()\">Back</button>\n <div class=\"sub-chosen-label\">{{subChosenLabel}}</div>\n <button type=\"button\" class=\"sub-next-btn\" *ngIf=\"subStep !== 'details'\" [disabled]=\"subNextOff\" (click)=\"subNext()\">Next</button>\n </div>\n </div>\n\n <div class=\"single-right section-card card\">\n <h3 class=\"section-title\">Your Shortlisted Designs</h3>\n <div class=\"design-row\" *ngFor=\"let it of productCartItems\">\n <div class=\"design-thumb\"></div>\n <div class=\"design-info\">\n <div class=\"design-name\">{{it.itemName}}</div>\n <div class=\"design-price\">\u20B9{{(it.sellingPrice ?? it.price ?? 0) * (it.quantity ?? 1)}}</div>\n </div>\n </div>\n <button type=\"button\" class=\"add-more-btn\" (click)=\"goToListing()\">+ Add More Designs</button>\n\n <div class=\"summary-divider\"></div>\n\n <div class=\"summary-line\" *ngIf=\"mode !== 'HOME_VISIT' || homeVisitCharge <= 0\">\n <div class=\"summary-label\">Service:</div>\n <div class=\"free-label\">FREE</div>\n </div>\n <div class=\"summary-line\" *ngIf=\"mode === 'HOME_VISIT' && homeVisitCharge > 0\">\n <div class=\"summary-label\">Home visit charge</div>\n <div class=\"summary-value\">\u20B9{{homeVisitCharge}}</div>\n </div>\n\n <button class=\"continue-btn w-100 mt-2\" [disabled]=\"invalid()\" (click)=\"goToReview()\">Review Booking</button>\n <p class=\"footnote\">You will review everything on the next screen before it is confirmed.</p>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"step === 'review'\">\n <div class=\"review-wrap\">\n <div class=\"review-card card\">\n <div class=\"review-header\">Review your booking</div>\n <div class=\"review-row\" *ngFor=\"let rc of reviewRows\">\n <div class=\"review-k\">{{rc.k}}</div>\n <div class=\"review-v\">{{rc.v}}</div>\n </div>\n </div>\n <div class=\"review-actions\">\n <button type=\"button\" class=\"review-back-btn\" (click)=\"backToForm()\">Back & edit</button>\n <button type=\"button\" class=\"review-confirm-btn\" (click)=\"confirmBooking()\" [disabled]=\"isProcessing\">\n {{isProcessing ? 'Please wait...' : (mode === 'HOME_VISIT' ? 'Confirm Home Visit' : 'Confirm Video Call')}}\n </button>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"step === 'done'\">\n <div class=\"booking-confirmation\">\n <div class=\"success-icon\">\n <div class=\"checkmark-circle\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/881293c1758695578518success.gif\"\n class=\"w-100 h-100\" *ngIf=\"apiStatus\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/325000c1758695564518fail.gif\"\n class=\"w-100 h-100\" *ngIf=\"!apiStatus\">\n </div>\n </div>\n\n <div class=\"confirmation-content\">\n <h1 class=\"confirmation-title\">{{apiStatus ? 'Booking Confirmed!' : 'Booking Failed'}}</h1>\n <p class=\"confirmation-message\">\n {{apiStatus ? 'Your appointment has been successfully booked.':'Failed to book your appointment. Please\n try again later'}}\n </p>\n\n <div class=\"video-call-link-card d-flex align-items-center justify-content-center\" *ngIf=\"apiStatus && mode === 'VIDEO_CALL' && bookingGroup?.videoCallLink\">\n <div class=\"details-card\">\n <h3 class=\"details-title\">Your Video Call Link</h3>\n <a [href]=\"bookingGroup.videoCallLink\" target=\"_blank\">{{bookingGroup.videoCallLink}}</a>\n </div>\n </div>\n\n <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus\">\n <div class=\"details-card\">\n <h3 class=\"details-title\">Appointment Details</h3>\n <div class=\"details-row\">\n <span class=\"detail-label\">{{productCartItems.length ? 'Products' : (mode === 'HOME_VISIT' ? 'Home Visit' : 'Video Call')}}</span>\n <span class=\"detail-value\">{{selectedDateStr}} at {{selectedSlot?.value ?? 'N/A'}}</span>\n </div>\n </div>\n </div>\n\n <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus\">\n <div class=\"details-card\">\n <h3 class=\"details-title\">Payment</h3>\n <div class=\"details-row\" *ngIf=\"mode === 'HOME_VISIT' && homeVisitCharge > 0\">\n <span class=\"detail-label\">Home visit charge</span>\n <span class=\"detail-value\">\u20B9{{homeVisitCharge}}</span>\n </div>\n <div class=\"details-row\">\n <span class=\"detail-label\">Total</span>\n <span class=\"detail-value\">\u20B9{{bookingTotal}}</span>\n </div>\n <div class=\"details-row\">\n <span class=\"detail-label\">Paid</span>\n <span class=\"detail-value\">\u20B9{{bookingPaid}}</span>\n </div>\n <div class=\"details-row\" *ngIf=\"bookingDue > 0\">\n <span class=\"detail-label\">Due</span>\n <span class=\"detail-value\">\u20B9{{bookingDue}}</span>\n </div>\n </div>\n </div>\n\n <div class=\"done-actions d-flex align-items-center justify-content-center\" *ngIf=\"apiStatus\">\n <button type=\"button\" class=\"done-btn done-btn-primary\" (click)=\"goToMyBookings()\">View my bookings</button>\n <button type=\"button\" class=\"done-btn done-btn-secondary\" (click)=\"goToListing()\">Keep shopping</button>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n</section>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap\";mat-icon{font-family:Material Icons!important}:host{--font-sans: \"Outfit\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;--slate-50: #f8fafc;--slate-100: #f1f5f9;--slate-200: #e2e8f0;--slate-300: #cbd5e1;--slate-400: #94a3b8;--slate-500: #64748b;--slate-600: #475569;--slate-700: #334155;--slate-800: #1e293b;--slate-900: #0f172a;--color-primary: #230860;--color-secondary: #00b6ff;--color-accent-gradient: linear-gradient(135deg, #230860 0%, #00b6ff 100%);--color-success: #10b981;--color-success-bg: #ecfdf5;--color-error: #ef4444;--color-error-bg: #fef2f2;--border-radius-sm: 8px;--border-radius-md: 12px;--border-radius-lg: 16px;--border-radius-xl: 24px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .05), 0 2px 4px -2px rgba(0, 0, 0, .05);--shadow-lg: 0 10px 15px -3px rgba(35, 8, 96, .05), 0 4px 6px -4px rgba(35, 8, 96, .05);--shadow-xl: 0 20px 25px -5px rgba(35, 8, 96, .08), 0 8px 10px -6px rgba(35, 8, 96, .08);--transition-smooth: all .3s cubic-bezier(.4, 0, .2, 1);--transition-bounce: all .4s cubic-bezier(.175, .885, .32, 1.275)}*{box-sizing:border-box;font-family:var(--font-sans)}.main_section{position:relative;height:100vh;background-color:var(--slate-50);display:flex;flex-direction:column;overflow:hidden}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.main_header{padding:15px;background:#fff;border-bottom:1px solid var(--slate-100);flex-shrink:0;box-shadow:0 2px 8px #00000003}.header{display:flex;align-items:center;justify-content:space-between}.back-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem 1.2rem;border-radius:var(--border-radius-md);background:var(--slate-50);border:1px solid var(--slate-200);color:var(--slate-700)!important;transition:var(--transition-smooth);font-weight:500;font-size:.9rem;cursor:pointer}.back-btn mat-icon{font-size:18px!important;width:18px!important;height:18px!important;color:var(--slate-700)!important;display:flex;align-items:center;justify-content:center}.back-btn:hover{background:var(--slate-100);transform:translate(-3px);color:var(--slate-900)!important}.header-title{flex-grow:1;text-align:right}.header-title h1{font-size:1.5rem;font-weight:700;margin-bottom:.2rem;color:var(--slate-900)!important;letter-spacing:-.025em}.header-title p{color:var(--slate-500)!important;font-size:.9rem;font-weight:500;margin-bottom:0}.progress-bar{width:100%;height:6px;background-color:var(--slate-100);margin-top:3px;border-radius:10px;overflow:hidden;position:relative}.progress-fill{height:100%;background:var(--color-accent-gradient);border-radius:10px;transition:width .5s cubic-bezier(.4,0,.2,1);position:relative}.progress-fill:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,#fff0,#ffffff4d,#fff0);animation:shimmer 2s infinite linear}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.main_body{flex-grow:1;overflow-y:auto;padding:10px;display:flex;justify-content:center;background:var(--slate-50)}.w-60{width:100%;max-width:800px}.service_section,.location_section,.staff-listing,.date_section,.contact_section,.payment_section,.booking-confirmation{animation:slideUp .5s cubic-bezier(.16,1,.3,1) forwards}@keyframes slideUp{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}h2{font-size:1.5rem;font-weight:700;color:var(--slate-900)!important;letter-spacing:-.02em;margin-bottom:.3rem}p.subtitle,.service-selection p,.location_section p,.staff-subtitle,.datetime-subtitle,.contact-subtitle,.payment-subtitle{color:var(--slate-500)!important;font-size:13px;margin-bottom:2rem}.services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.5rem;padding-bottom:2rem}.service-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:180px}.service-card:hover{border-color:var(--slate-400);transform:translateY(-4px);box-shadow:var(--shadow-lg)}.service-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:180px;transform:translateY(-2px)}.service-card-selected:before,.location-card-selected:before{content:\"\\2713\";position:absolute;top:-10px;right:-10px;background:var(--color-accent-gradient);color:#fff!important;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;box-shadow:0 4px 8px #2308604d;animation:popIn .3s cubic-bezier(.175,.885,.32,1.275);z-index:10}@keyframes popIn{0%{transform:scale(0)}to{transform:scale(1)}}.service-header{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1rem}.service-icon{width:48px;height:48px;border-radius:var(--border-radius-md);background-color:var(--slate-100);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition-smooth)}.service-icon mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:var(--color-primary)!important}.service-card-selected .service-icon{background:var(--slate-900)}.service-card-selected .service-icon mat-icon{color:#fff!important}.service-info{flex-grow:1}.service-title{font-size:1.15rem;font-weight:700;color:var(--slate-900)!important;line-height:1.3;margin-bottom:.2rem}.service-price{font-size:1.25rem;font-weight:800;color:var(--slate-900)!important;text-align:right}.service-duration{font-size:.8rem;color:var(--slate-500)!important;font-weight:600;text-align:right;margin-top:.1rem}.service-description{color:var(--slate-600)!important;font-size:.9rem;line-height:1.5;margin-bottom:1.25rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.home-visit{align-self:flex-start;display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:600;color:var(--slate-700)!important;border:1px solid var(--slate-200);padding:.35rem .75rem;border-radius:20px;background-color:var(--slate-50);transition:var(--transition-smooth)}.home-visit img{width:14px;height:14px}.home-visit:before{content:\"\";display:inline-block;width:6px;height:6px;border-radius:50%;background-color:var(--color-success);box-shadow:0 0 #10b98166;animation:pulseGlow 1.8s infinite}@keyframes pulseGlow{0%{box-shadow:0 0 #10b981b3}70%{box-shadow:0 0 0 6px #10b98100}to{box-shadow:0 0 #10b98100}}.location-list{display:flex;flex-direction:column;gap:1.25rem;padding-bottom:2rem}.location-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm)}.location-card:hover{border-color:var(--slate-400);transform:translateY(-2px);box-shadow:var(--shadow-md)}.location-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);transform:translateY(-1px)}.location-content{display:flex;align-items:center}.location-info{display:flex;align-items:center;gap:1.25rem;width:100%}.location-icon{width:52px;height:52px;background-color:var(--slate-100);border-radius:var(--border-radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition-smooth)}.location-icon img{width:28px;height:28px}.location-card-selected .location-icon{background:var(--slate-900)}.location-details{flex-grow:1}.location-details h3{font-size:1.15rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:.3rem}.location-details p{font-size:.9rem;color:var(--slate-500)!important;font-weight:450;line-height:1.4;margin-bottom:0}.search-container{width:100%;margin-bottom:1.25rem}.search-input-wrapper{width:100%;background-color:var(--slate-100);border:1.5px solid var(--slate-200);border-radius:var(--border-radius-md);padding:.6rem 1rem;transition:var(--transition-smooth)}.search-input-wrapper:focus-within{background-color:#fff;border-color:var(--color-primary);box-shadow:0 0 0 3px #23086014}.search-input{font-size:.95rem;font-weight:500;color:var(--slate-900)!important;background:transparent;outline:none;width:100%}.search-input::placeholder{color:var(--slate-400)}.search-icon{color:var(--slate-400)!important;font-size:20px!important;width:20px!important;height:20px!important}.clear-icon{color:var(--slate-400)!important;font-size:18px!important;width:18px!important;height:18px!important;transition:var(--transition-smooth)}.clear-icon:hover{color:var(--slate-600)!important}.staff-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem;max-height:48vh;overflow-y:auto;padding-right:.5rem;padding-bottom:1rem}.staff-list::-webkit-scrollbar{width:6px}.staff-list::-webkit-scrollbar-track{background:var(--slate-50);border-radius:4px}.staff-list::-webkit-scrollbar-thumb{background:var(--slate-200);border-radius:4px}.staff-list::-webkit-scrollbar-thumb:hover{background:var(--slate-300)}.staff-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:.9rem 1.25rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm);margin-bottom:0!important}.staff-card:hover{border-color:var(--slate-300);transform:translateY(-2px);box-shadow:var(--shadow-md)}.staff-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:.9rem 1.25rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);transform:translateY(-1px);margin-bottom:0!important}.staff-avatar{width:48px;height:48px;background:var(--color-accent-gradient);font-size:.95rem;font-weight:700;color:#fff!important;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 10px #2308601a;letter-spacing:.5px;transition:var(--transition-smooth)}.staff-card-selected .staff-avatar{transform:scale(1.05)}.staff-name{font-size:1.05rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:.2rem;letter-spacing:-.015em}.staff-specialty{font-size:.8rem;color:var(--slate-500)!important;font-weight:600;margin-bottom:0;text-transform:uppercase;letter-spacing:.05em}.selection-indicator{display:flex;align-items:center;justify-content:center;margin-left:auto;padding-left:1rem}.checkmark-circle-mini{width:24px;height:24px;border:2px solid var(--slate-300);border-radius:50%;background-color:#fff;transition:var(--transition-bounce);color:#fff!important}.checkmark-circle-mini.selected{background:var(--color-accent-gradient);border-color:transparent;box-shadow:0 3px 8px #23086040}.checkmark-circle-mini mat-icon{font-size:14px!important;width:14px!important;height:14px!important;color:#fff!important;font-weight:800!important;display:flex;align-items:center;justify-content:center}.main_container{display:flex;gap:2rem;margin-bottom:2rem}.section-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;box-shadow:var(--shadow-sm);height:100%}.section-title{font-size:1.1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:10px!important;letter-spacing:-.01em}.time_selection{max-height:420px;display:flex;flex-direction:column}.time_selection .row{flex-grow:1;overflow-y:auto;padding-right:.25rem;margin-top:10px}.time-slot{background:#fff;border:1px solid var(--slate-200);font-size:.75rem;font-weight:600;color:var(--slate-800)!important;height:34px;padding:0 4px;border-radius:var(--border-radius-md);cursor:pointer;transition:var(--transition-smooth);text-align:center;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}.time-slot:hover{border-color:var(--slate-400);transform:translateY(-2px);box-shadow:var(--shadow-md);background-color:var(--slate-50)}.time-slot.selected{background:var(--color-accent-gradient);border-color:transparent;color:#fff!important;box-shadow:0 4px 12px #23086033}.form-section{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.75rem;box-shadow:var(--shadow-sm)}.form-label{font-size:.85rem;font-weight:600;color:var(--slate-700)!important;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.05em}.required-asterisk{color:var(--color-error);margin-left:2px}.form-control,.form-input,.form-textarea{width:100%;background-color:var(--slate-50);border:1px solid var(--slate-200);color:var(--slate-900)!important;font-size:.95rem;font-weight:500;padding:.75rem 1rem;border-radius:var(--border-radius-md);transition:var(--transition-smooth);outline:none}.form-control:focus,.form-input:focus,.form-textarea:focus{background-color:#fff;border-color:var(--color-primary);box-shadow:0 0 0 3px #2308601a}.form-textarea{min-height:100px;resize:vertical}.policies-container{background-color:#fff;border:1px solid var(--slate-200);padding:1.75rem;border-radius:var(--border-radius-lg);margin-top:1.5rem;box-shadow:var(--shadow-sm)}.policies-title{font-size:1.1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:1.25rem}.policy-item{background-color:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:1rem 1.25rem;cursor:pointer;transition:var(--transition-smooth);display:flex;justify-content:space-between;align-items:center}.policy-item:hover{background-color:var(--slate-100);border-color:var(--slate-300)}.policy-title{font-size:.95rem;font-weight:600;color:var(--slate-800)!important}.policy-arrow mat-icon{color:var(--slate-500)!important;transition:var(--transition-smooth)}.cancellation_policies{background-color:var(--slate-50);padding:1rem 1.5rem;border-left:3px solid var(--color-primary);border-radius:0 0 var(--border-radius-md) var(--border-radius-md);margin-top:-4px;margin-bottom:1rem;font-size:.9rem;color:var(--slate-600)!important;line-height:1.5}.acceptance-section{display:flex;align-items:center;gap:.75rem;margin-top:1.5rem}.custom-checkbox{width:20px;height:20px;border:2px solid var(--slate-300);border-radius:6px;cursor:pointer;transition:var(--transition-smooth);position:relative;appearance:none;background-color:#fff;outline:none}.custom-checkbox:checked{background:var(--color-accent-gradient);border-color:transparent}.custom-checkbox:checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff!important;font-size:.75rem;font-weight:800}.acceptance-text{font-size:.95rem;color:var(--slate-700)!important;font-weight:500;-webkit-user-select:none;user-select:none;line-height:1.4}.booking-summary-card{background-color:#fff;border:1px solid var(--slate-200);padding:2rem;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);position:relative}.booking-summary-card:after{content:\"\";position:absolute;bottom:-1px;left:0;right:0;height:10px;background-image:radial-gradient(circle,white 4px,transparent 5px);background-size:12px 12px;background-position:0 0;z-index:2}.summary-title{font-size:1.25rem;font-weight:700;color:var(--slate-900)!important;border-bottom:2px dashed var(--slate-200);padding-bottom:1rem;margin-bottom:1.5rem;text-align:center}.summary-row{display:flex;justify-content:space-between;align-items:center;padding:.85rem 0;border-bottom:1px solid var(--slate-100)}.summary-label{font-size:.95rem;color:var(--slate-500)!important;font-weight:500}.summary-value{font-size:.95rem;color:var(--slate-900)!important;font-weight:600;text-align:right}.total-row{margin-top:1rem;padding-top:1.25rem;border-top:2px dashed var(--slate-200);border-bottom:none}.total-row .summary-label{font-size:1.25rem;font-weight:700;color:var(--slate-900)!important}.total-row .summary-value{font-size:1.5rem;font-weight:800;color:var(--color-primary)!important}.booking-confirmation{background:#fff;border:1px solid var(--slate-200);padding:3rem 2rem;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;align-items:center;text-align:center;max-width:500px;margin:0 auto}.success-icon{margin-bottom:1.5rem}.checkmark-circle{width:96px;height:96px;display:flex;align-items:center;justify-content:center}.confirmation-title{font-size:1.5rem;font-weight:800;color:var(--slate-900)!important;margin-bottom:.5rem}.confirmation-message{font-size:1rem;color:var(--slate-500)!important;line-height:1.6;margin-bottom:2rem;font-weight:450}.details-card{background-color:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:1.5rem;width:100%;margin-bottom:2rem;text-align:left}.details-title{font-size:1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.05em}.details-row{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px dashed var(--slate-200)}.details-row:last-child{border-bottom:none}.detail-label{font-size:.85rem;color:var(--slate-500)!important;font-weight:500}.detail-value{font-size:.9rem;color:var(--slate-900)!important;font-weight:600}.done-actions{display:flex;gap:12px;width:100%}.done-btn{flex:1;max-width:220px;padding:.75rem 1.5rem;border-radius:var(--border-radius-md);font-size:.95rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth);border:none;white-space:nowrap}.done-btn-primary{background:var(--color-accent-gradient);color:#fff!important;box-shadow:0 4px 10px #23086033}.done-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.done-btn-secondary{background:#fff;color:var(--slate-600)!important;border:1px solid var(--slate-200)}.done-btn-secondary:hover{background-color:var(--slate-100);color:var(--slate-900)!important}.continue-btn{background:var(--color-accent-gradient);color:#fff!important;border:none;padding:.75rem 2rem;border-radius:var(--border-radius-md);font-size:.95rem!important;font-weight:600;cursor:pointer;transition:var(--transition-smooth);box-shadow:0 4px 10px #23086033;width:max-content!important}.continue-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.continue-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed!important;box-shadow:none!important}.service-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.5rem;padding:0;width:100%}.skeleton-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;height:180px;display:flex;flex-direction:column;justify-content:space-between}.skeleton{background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0,#f1f5f9 75%);background-size:200% 100%;animation:loading-shimmer 1.5s infinite linear;border-radius:4px}@keyframes loading-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-icon{width:48px;height:48px;border-radius:var(--border-radius-md)}.skeleton-title{height:20px;width:60%;margin-bottom:.5rem}.skeleton-price{height:20px;width:30%}.skeleton-duration{height:12px;width:25%;margin-top:.25rem}.skeleton-description{height:14px;width:85%}.skeleton-badge{height:28px;width:120px;border-radius:20px}.time-slot-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;width:100%}.skeleton-time-slot{height:42px;border-radius:var(--border-radius-md);background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0,#f1f5f9 75%);background-size:200% 100%;animation:loading-shimmer 1.5s infinite linear;border:1px solid var(--slate-100)}@media screen and (max-width: 475px){.done-actions{flex-direction:column}.done-btn{max-width:none;width:100%}.main_header{padding:1rem}.header-title h1{font-size:1.25rem}.back-btn{padding:.5rem .8rem}.back-btn span{display:none}.main_body{padding:15px}.services-grid{grid-template-columns:1fr;gap:1rem}.staff-list{grid-template-columns:1fr!important;gap:.85rem!important}.service-card,.service-card-selected{min-height:auto}.main_container{flex-direction:column;gap:1.5rem}.details_container{gap:1.5rem}.details_container>.d-flex{flex-direction:column;gap:1.5rem}.details_container>.d-flex>div{width:100%!important}.booking-summary-card{padding:1.25rem}.summary-title{font-size:1.15rem}.total-row .summary-label{font-size:1.1rem}.total-row .summary-value{font-size:1.3rem}.main_footer{padding:1rem}.continue-btn{padding:.75rem 1.5rem}}h1{font-size:24px!important;font-weight:600!important}.wiz-container{width:100%;max-width:1120px}.wizard-banner{border-radius:var(--border-radius-lg);padding:1.125rem 1.5rem;background:var(--color-accent-gradient);box-shadow:var(--shadow-sm)}.wizard-banner-title{font-size:1.1rem;font-weight:700;color:#fff!important}.wizard-banner-desc{font-size:.85rem;line-height:1.5;color:#ffffffd9!important;padding-top:.2rem;max-width:520px}.sub-step-tabs{display:flex;background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);overflow:hidden}.sub-step-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;border:none;background:#fff;padding:.85rem 0;font-size:.85rem;font-weight:600;color:var(--slate-500)!important;cursor:pointer;border-bottom:2px solid transparent;transition:var(--transition-smooth)}.sub-step-tab.active{color:var(--slate-900)!important;border-bottom-color:var(--color-primary);background:var(--slate-50)}.sub-step-tab.locked{color:var(--slate-300)!important;cursor:not-allowed}.sub-step-dot{width:20px;height:20px;border-radius:50%;background:var(--slate-200);color:var(--slate-500)!important;font-size:.7rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.sub-step-tab.active .sub-step-dot{background:var(--color-accent-gradient);color:#fff!important}.sub-step-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:.85rem 1.25rem;box-shadow:var(--shadow-sm)}.sub-step-footer .sub-back-btn{width:auto;flex:0 0 auto;height:40px;font-size:.85rem;font-weight:600;color:var(--slate-600)!important;background:none;border:1.5px solid var(--slate-200);padding:0 18px;border-radius:var(--border-radius-md);cursor:pointer;transition:var(--transition-smooth)}.sub-step-footer .sub-back-btn:hover:not(:disabled){color:var(--slate-900)!important;background-color:var(--slate-100)}.sub-step-footer .sub-back-btn:disabled{color:var(--slate-300)!important;cursor:not-allowed}.sub-step-footer .sub-chosen-label{width:auto;flex:1 1 auto;font-size:.8rem;color:var(--slate-500)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;text-align:center}.sub-step-footer .sub-next-btn{width:auto;flex:0 0 auto;height:40px;background:var(--color-accent-gradient);color:#fff!important;border:none;padding:0 22px;border-radius:var(--border-radius-md);font-size:.85rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth)}.sub-step-footer .sub-next-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.sub-step-footer .sub-next-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed!important;box-shadow:none!important}.single-grid{display:grid;grid-template-columns:1fr 360px;gap:1.5rem;align-items:start}.single-left{display:flex;flex-direction:column;gap:1.5rem}.single-right{align-self:flex-start;position:sticky;top:10px}.week-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px}.week-arrows{display:flex;gap:8px}.week-arrow-btn{width:34px;height:34px;border-radius:8px;border:1px solid var(--slate-200);background:#fff;color:var(--slate-700)!important;cursor:pointer;display:flex;align-items:center;justify-content:center}.week-arrow-btn:disabled{color:var(--slate-300)!important;cursor:not-allowed}.week-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}.week-day{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:.6rem .25rem;cursor:pointer;transition:var(--transition-smooth);text-align:center}.week-day:hover{border-color:var(--slate-400)}.week-day.selected{background:var(--color-accent-gradient);border-color:transparent}.week-day.selected .week-day-dow,.week-day.selected .week-day-num{color:#fff!important}.week-day-dow{font-size:.75rem;font-weight:600;color:var(--slate-500)!important;text-transform:uppercase}.week-day-num{font-size:1rem;font-weight:700;color:var(--slate-900)!important;margin-top:2px}.booking-for-line{font-size:.9rem;color:var(--slate-600)!important;padding:.85rem 1rem;background:var(--slate-50);border-radius:var(--border-radius-md);margin-bottom:.5rem}.booking-for-line strong{color:var(--slate-900)!important}.shipping-info{border-radius:10px;padding:20px;margin-bottom:12px;border:1px solid var(--slate-200);box-shadow:var(--shadow-sm)}.address-info{margin-bottom:0}.address-name{font-weight:700;margin-bottom:8px;color:var(--slate-900)!important}.address-details{color:var(--slate-500)!important;margin-bottom:8px}.mobile-number{font-weight:700;color:var(--slate-900)!important;font-size:15px}.change-address-btn{font-size:.85rem!important;font-weight:700!important;padding:10px;background:#fff;border:1px solid var(--slate-200);border-radius:8px;color:var(--slate-900)!important;cursor:pointer;transition:var(--transition-smooth)}.change-address-btn:hover{border-color:var(--color-primary);color:var(--color-primary)!important}.addLinks{padding:14px;border:1px dashed var(--slate-300);display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:8px;color:var(--slate-500)!important;margin-bottom:12px}.addLinks:hover{border-color:var(--color-primary);color:var(--color-primary)!important}.design-row{display:flex;gap:13px;align-items:center;padding-bottom:1rem}.design-thumb{width:56px;height:56px;border-radius:8px;background:var(--slate-100);flex:none}.design-info{flex:1}.design-name{font-size:13.5px;color:var(--slate-900)!important;line-height:1.35}.design-price{font-size:13.5px;font-weight:600;color:var(--slate-900)!important;margin-top:3px}.add-more-btn{width:100%;height:44px;border:1.5px dashed var(--slate-300);border-radius:8px;background:none;color:var(--color-primary)!important;font-size:13px;font-weight:600;cursor:pointer;margin-bottom:1rem}.summary-divider{height:1px;background:var(--slate-100);margin-bottom:1rem}.summary-line{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.free-label{font-size:13.5px;font-weight:600;color:var(--color-success)!important}.footnote{font-size:11.5px;line-height:1.5;color:var(--slate-500)!important;text-align:center;margin:.75rem 0 0}.review-wrap{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:16px}.review-card{border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);overflow:hidden}.review-actions{display:flex;gap:12px}.review-actions .review-back-btn{flex:1;height:48px;border:1.5px solid var(--slate-200);border-radius:var(--border-radius-md);background:#fff;color:var(--slate-600)!important;font-size:.9rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth)}.review-actions .review-back-btn:hover{color:var(--slate-900)!important;background-color:var(--slate-100)}.review-actions .review-confirm-btn{flex:1;height:48px;border:none;border-radius:var(--border-radius-md);background:var(--color-accent-gradient);color:#fff!important;font-size:.9rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth)}.review-actions .review-confirm-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.review-actions .review-confirm-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed!important;box-shadow:none!important}.review-header{padding:14px 18px;background:var(--slate-50);border-bottom:1px solid var(--slate-100);font-size:14.5px;font-weight:700;color:var(--slate-900)!important}.review-row{display:flex;justify-content:space-between;gap:16px;padding:12px 18px;border-bottom:1px solid var(--slate-100);font-size:13.5px}.review-row:last-child{border-bottom:none}.review-k{color:var(--slate-500)!important;flex-shrink:0}.review-v{color:var(--slate-900)!important;font-weight:500;text-align:right}@media screen and (max-width: 900px){.single-grid{grid-template-columns:1fr}.single-right{position:static}}@media screen and (max-width: 475px){.week-strip{gap:6px}}\n"], dependencies: [{ 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: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i9.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: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }] }); }
|
|
26711
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BookAppointmentComponent, isStandalone: true, selector: "simpo-book-appointment", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n [showTransformOptions]=\"screenWidth < 475 ? 'translateY(-100%)' : ''\"></p-toast>\n<section class=\"main_section\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\n [simpoBackground]=\"backgroundInfo\" [style.--color-accent-gradient]=\"accentColor\">\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div class=\"main_body w-100 d-flex justify-content-center\">\n <div class=\"wiz-container\">\n\n <ng-container *ngIf=\"step === 'form'\">\n <div class=\"single-grid\">\n <div class=\"single-left\">\n\n <div class=\"wizard-banner\" [id]=\"data?.id\" [simpoBackground]=\"backgroundInfo\" [style.--color-accent-gradient]=\"accentColor\">\n <div class=\"wizard-banner-title\">{{bannerTitle}}</div>\n <div class=\"wizard-banner-desc\">{{bannerDesc}}</div>\n </div>\n\n <div class=\"sub-step-tabs\">\n <button type=\"button\" class=\"sub-step-tab\" *ngFor=\"let s of subSteps; trackBy: trackBySubStepKey\"\n [class.active]=\"s.active\" [class.locked]=\"s.locked\" [disabled]=\"s.locked\" (click)=\"s.go()\">\n <span class=\"sub-step-dot\">{{s.num}}</span>\n {{s.label}}\n </button>\n </div>\n\n <div class=\"sub-step-content\">\n <ng-container *ngIf=\"subStep === 'date'\">\n <div class=\"section-card card\">\n <div class=\"week-header\">\n <div>\n <h3 class=\"section-title mb-0\">Select a Date</h3>\n <p class=\"subtitle mb-0\">{{weekRangeLabel}}</p>\n </div>\n <div class=\"week-arrows\">\n <button type=\"button\" class=\"week-arrow-btn\" (click)=\"prevWeek()\" [disabled]=\"weekOffset <= 0\">\n <mat-icon>chevron_left</mat-icon>\n </button>\n <button type=\"button\" class=\"week-arrow-btn\" (click)=\"nextWeek()\" [disabled]=\"weekOffset >= maxWeekOffset\">\n <mat-icon>chevron_right</mat-icon>\n </button>\n </div>\n </div>\n <div class=\"week-strip\">\n <button type=\"button\" class=\"week-day\" *ngFor=\"let d of weekDays\" [class.selected]=\"d.selected\"\n (click)=\"pickDay(d)\">\n <div class=\"week-day-dow\">{{d.dow}}</div>\n <div class=\"week-day-num\">{{d.num}}</div>\n </button>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"subStep === 'time'\">\n <div class=\"section-card card\">\n <h3 class=\"section-title mb-0\">Select a Time</h3>\n <p class=\"subtitle\" *ngIf=\"selectedDateStr\">Available slots for {{selectedDateStr}}</p>\n <p class=\"subtitle mb-0\" *ngIf=\"!selectedDateStr\">Pick a date to see available times.</p>\n <div class=\"time-slot-grid overflow-scroll\" *ngIf=\"selectedDateStr\">\n <ng-container *ngIf=\"!slotsLoading; else slotsLoadingTpl\">\n <div class=\"time-slot rounded-2\" *ngFor=\"let time of slots\" [class.selected]=\"time.selected\"\n (click)=\"selectSlot(time)\">{{time?.value}}</div>\n <p class=\"mb-0\" *ngIf=\"slots.length === 0\">No slots available for this date.</p>\n </ng-container>\n <ng-template #slotsLoadingTpl>\n <p class=\"mb-0\">Loading available times...</p>\n </ng-template>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"subStep === 'details'\">\n <div class=\"section-card card\">\n <h3 class=\"section-title\">Booking Details</h3>\n <div class=\"booking-for-line\">\n Booking for <strong>{{userDetails?.contact?.name}}</strong>\n <ng-container *ngIf=\"userDetails?.contact?.mobile\"> \u00B7 {{userDetails?.contact?.mobile}}</ng-container>\n <ng-container *ngIf=\"userDetails?.contact?.email\"> \u00B7 {{userDetails?.contact?.email}}</ng-container>\n </div>\n\n <ng-container *ngIf=\"mode === 'HOME_VISIT'\">\n <p class=\"policies-title mt-3 mb-2\" style=\"font-size:1rem;\">Shipping Address</p>\n\n <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\n <div class=\"address-info\">\n <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\n <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\n {{defaultAddress?.stateName}}</div>\n <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\n </div>\n </div>\n <button type=\"button\" class=\"change-address-btn w-100\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">\n CHANGE OR ADD ADDRESS\n </button>\n\n <div class=\"addLinks\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\n <mat-icon>add</mat-icon>\n <span class=\"ms-2\">Add an address</span>\n </div>\n\n <div class=\"mb-0 mt-3\">\n <label class=\"form-label d-flex align-items-center\">Instructions (optional)</label>\n <textarea class=\"form-control form-textarea rounded-2\" [(ngModel)]=\"instructions\"></textarea>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n\n <div class=\"sub-step-footer\">\n <button type=\"button\" class=\"sub-back-btn\" [disabled]=\"subBackOff\" (click)=\"subBack()\">Back</button>\n <div class=\"sub-chosen-label\">{{subChosenLabel}}</div>\n <button type=\"button\" class=\"sub-next-btn\" *ngIf=\"subStep !== 'details'\" [disabled]=\"subNextOff\" (click)=\"subNext()\">Next</button>\n </div>\n </div>\n\n <div class=\"single-right section-card card\">\n <h3 class=\"section-title\">Your Shortlisted Designs</h3>\n <div class=\"design-row\" *ngFor=\"let it of productCartItems\">\n <div class=\"design-thumb\"></div>\n <div class=\"design-info\">\n <div class=\"design-name\">{{it.itemName}}</div>\n <div class=\"design-price\">\u20B9{{(it.sellingPrice ?? it.price ?? 0) * (it.quantity ?? 1)}}</div>\n </div>\n </div>\n <button type=\"button\" class=\"add-more-btn\" (click)=\"goToListing()\">+ Add More Designs</button>\n\n <div class=\"summary-divider\"></div>\n\n <div class=\"summary-line\" *ngIf=\"mode !== 'HOME_VISIT' || homeVisitCharge <= 0\">\n <div class=\"summary-label\">Service:</div>\n <div class=\"free-label\">FREE</div>\n </div>\n <div class=\"summary-line\" *ngIf=\"mode === 'HOME_VISIT' && homeVisitCharge > 0\">\n <div class=\"summary-label\">Home visit charge</div>\n <div class=\"summary-value\">\u20B9{{homeVisitCharge}}</div>\n </div>\n\n <button class=\"continue-btn w-100 mt-2\" [disabled]=\"invalid()\" (click)=\"goToReview()\">Review Booking</button>\n <p class=\"footnote\">You will review everything on the next screen before it is confirmed.</p>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"step === 'review'\">\n <div class=\"review-wrap\">\n <div class=\"review-card card\">\n <div class=\"review-header\">Review your booking</div>\n <div class=\"review-row\" *ngFor=\"let rc of reviewRows\">\n <div class=\"review-k\">{{rc.k}}</div>\n <div class=\"review-v\">{{rc.v}}</div>\n </div>\n </div>\n <div class=\"review-actions\">\n <button type=\"button\" class=\"review-back-btn\" (click)=\"backToForm()\">Back & edit</button>\n <button type=\"button\" class=\"review-confirm-btn\" (click)=\"confirmBooking()\" [disabled]=\"isProcessing\">\n {{isProcessing ? 'Please wait...' : (mode === 'HOME_VISIT' ? 'Confirm Home Visit' : 'Confirm Video Call')}}\n </button>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"step === 'done'\">\n <div class=\"booking-confirmation\">\n <div class=\"success-icon\">\n <div class=\"checkmark-circle\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/881293c1758695578518success.gif\"\n class=\"w-100 h-100\" *ngIf=\"apiStatus\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/325000c1758695564518fail.gif\"\n class=\"w-100 h-100\" *ngIf=\"!apiStatus\">\n </div>\n </div>\n\n <div class=\"confirmation-content\">\n <h1 class=\"confirmation-title\">{{apiStatus ? 'Booking Confirmed!' : 'Booking Failed'}}</h1>\n <p class=\"confirmation-message\">\n {{apiStatus ? 'Your appointment has been successfully booked.':'Failed to book your appointment. Please\n try again later'}}\n </p>\n\n <div class=\"video-call-link-card d-flex align-items-center justify-content-center\" *ngIf=\"apiStatus && mode === 'VIDEO_CALL' && bookingGroup?.videoCallLink\">\n <div class=\"details-card\">\n <h3 class=\"details-title\">Your Video Call Link</h3>\n <a [href]=\"bookingGroup.videoCallLink\" target=\"_blank\">{{bookingGroup.videoCallLink}}</a>\n </div>\n </div>\n\n <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus\">\n <div class=\"details-card\">\n <h3 class=\"details-title\">Appointment Details</h3>\n <div class=\"details-row\">\n <span class=\"detail-label\">{{productCartItems.length ? 'Products' : (mode === 'HOME_VISIT' ? 'Home Visit' : 'Video Call')}}</span>\n <span class=\"detail-value\">{{selectedDateStr}} at {{selectedSlot?.value ?? 'N/A'}}</span>\n </div>\n </div>\n </div>\n\n <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus && bookingTotal > 0\">\n <div class=\"details-card\">\n <h3 class=\"details-title\">Payment</h3>\n <div class=\"details-row\" *ngIf=\"mode === 'HOME_VISIT' && homeVisitCharge > 0\">\n <span class=\"detail-label\">Home visit charge</span>\n <span class=\"detail-value\">\u20B9{{homeVisitCharge}}</span>\n </div>\n <div class=\"details-row\">\n <span class=\"detail-label\">Total</span>\n <span class=\"detail-value\">\u20B9{{bookingTotal}}</span>\n </div>\n <div class=\"details-row\">\n <span class=\"detail-label\">Paid</span>\n <span class=\"detail-value\">\u20B9{{bookingPaid}}</span>\n </div>\n <div class=\"details-row\" *ngIf=\"bookingDue > 0\">\n <span class=\"detail-label\">Due</span>\n <span class=\"detail-value\">\u20B9{{bookingDue}}</span>\n </div>\n </div>\n </div>\n\n <div class=\"done-actions d-flex align-items-center justify-content-center\" *ngIf=\"apiStatus\">\n <button type=\"button\" class=\"done-btn done-btn-primary\" (click)=\"goToMyBookings()\">View my bookings</button>\n <button type=\"button\" class=\"done-btn done-btn-secondary\" (click)=\"goToListing()\">Keep shopping</button>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n</section>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap\";mat-icon{font-family:Material Icons!important}:host{--font-sans: \"Outfit\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;--slate-50: #f8fafc;--slate-100: #f1f5f9;--slate-200: #e2e8f0;--slate-300: #cbd5e1;--slate-400: #94a3b8;--slate-500: #64748b;--slate-600: #475569;--slate-700: #334155;--slate-800: #1e293b;--slate-900: #0f172a;--color-primary: #230860;--color-secondary: #00b6ff;--color-accent-gradient: linear-gradient(135deg, #230860 0%, #00b6ff 100%);--color-success: #10b981;--color-success-bg: #ecfdf5;--color-error: #ef4444;--color-error-bg: #fef2f2;--border-radius-sm: 8px;--border-radius-md: 12px;--border-radius-lg: 16px;--border-radius-xl: 24px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .05), 0 2px 4px -2px rgba(0, 0, 0, .05);--shadow-lg: 0 10px 15px -3px rgba(35, 8, 96, .05), 0 4px 6px -4px rgba(35, 8, 96, .05);--shadow-xl: 0 20px 25px -5px rgba(35, 8, 96, .08), 0 8px 10px -6px rgba(35, 8, 96, .08);--transition-smooth: all .3s cubic-bezier(.4, 0, .2, 1);--transition-bounce: all .4s cubic-bezier(.175, .885, .32, 1.275)}*{box-sizing:border-box;font-family:var(--font-sans)}.main_section{position:relative;height:100vh;background-color:var(--slate-50);display:flex;flex-direction:column;overflow:hidden}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.main_header{padding:15px;background:#fff;border-bottom:1px solid var(--slate-100);flex-shrink:0;box-shadow:0 2px 8px #00000003}.header{display:flex;align-items:center;justify-content:space-between}.back-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem 1.2rem;border-radius:var(--border-radius-md);background:var(--slate-50);border:1px solid var(--slate-200);color:var(--slate-700)!important;transition:var(--transition-smooth);font-weight:500;font-size:.9rem;cursor:pointer}.back-btn mat-icon{font-size:18px!important;width:18px!important;height:18px!important;color:var(--slate-700)!important;display:flex;align-items:center;justify-content:center}.back-btn:hover{background:var(--slate-100);transform:translate(-3px);color:var(--slate-900)!important}.header-title{flex-grow:1;text-align:right}.header-title h1{font-size:1.5rem;font-weight:700;margin-bottom:.2rem;color:var(--slate-900)!important;letter-spacing:-.025em}.header-title p{color:var(--slate-500)!important;font-size:.9rem;font-weight:500;margin-bottom:0}.progress-bar{width:100%;height:6px;background-color:var(--slate-100);margin-top:3px;border-radius:10px;overflow:hidden;position:relative}.progress-fill{height:100%;background:var(--color-accent-gradient);border-radius:10px;transition:width .5s cubic-bezier(.4,0,.2,1);position:relative}.progress-fill:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,#fff0,#ffffff4d,#fff0);animation:shimmer 2s infinite linear}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.main_body{flex-grow:1;overflow-y:auto;padding:10px;display:flex;justify-content:center;background:var(--slate-50)}.w-60{width:100%;max-width:800px}.service_section,.location_section,.staff-listing,.date_section,.contact_section,.payment_section,.booking-confirmation{animation:slideUp .5s cubic-bezier(.16,1,.3,1) forwards}@keyframes slideUp{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}h2{font-size:1.5rem;font-weight:700;color:var(--slate-900)!important;letter-spacing:-.02em;margin-bottom:.3rem}p.subtitle,.service-selection p,.location_section p,.staff-subtitle,.datetime-subtitle,.contact-subtitle,.payment-subtitle{color:var(--slate-500)!important;font-size:13px;margin-bottom:2rem}.services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.5rem;padding-bottom:2rem}.service-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:180px}.service-card:hover{border-color:var(--slate-400);transform:translateY(-4px);box-shadow:var(--shadow-lg)}.service-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:180px;transform:translateY(-2px)}.service-card-selected:before,.location-card-selected:before{content:\"\\2713\";position:absolute;top:-10px;right:-10px;background:var(--color-accent-gradient);color:#fff!important;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;box-shadow:0 4px 8px #2308604d;animation:popIn .3s cubic-bezier(.175,.885,.32,1.275);z-index:10}@keyframes popIn{0%{transform:scale(0)}to{transform:scale(1)}}.service-header{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1rem}.service-icon{width:48px;height:48px;border-radius:var(--border-radius-md);background-color:var(--slate-100);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition-smooth)}.service-icon mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:var(--color-primary)!important}.service-card-selected .service-icon{background:var(--slate-900)}.service-card-selected .service-icon mat-icon{color:#fff!important}.service-info{flex-grow:1}.service-title{font-size:1.15rem;font-weight:700;color:var(--slate-900)!important;line-height:1.3;margin-bottom:.2rem}.service-price{font-size:1.25rem;font-weight:800;color:var(--slate-900)!important;text-align:right}.service-duration{font-size:.8rem;color:var(--slate-500)!important;font-weight:600;text-align:right;margin-top:.1rem}.service-description{color:var(--slate-600)!important;font-size:.9rem;line-height:1.5;margin-bottom:1.25rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.home-visit{align-self:flex-start;display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:600;color:var(--slate-700)!important;border:1px solid var(--slate-200);padding:.35rem .75rem;border-radius:20px;background-color:var(--slate-50);transition:var(--transition-smooth)}.home-visit img{width:14px;height:14px}.home-visit:before{content:\"\";display:inline-block;width:6px;height:6px;border-radius:50%;background-color:var(--color-success);box-shadow:0 0 #10b98166;animation:pulseGlow 1.8s infinite}@keyframes pulseGlow{0%{box-shadow:0 0 #10b981b3}70%{box-shadow:0 0 0 6px #10b98100}to{box-shadow:0 0 #10b98100}}.location-list{display:flex;flex-direction:column;gap:1.25rem;padding-bottom:2rem}.location-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm)}.location-card:hover{border-color:var(--slate-400);transform:translateY(-2px);box-shadow:var(--shadow-md)}.location-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);transform:translateY(-1px)}.location-content{display:flex;align-items:center}.location-info{display:flex;align-items:center;gap:1.25rem;width:100%}.location-icon{width:52px;height:52px;background-color:var(--slate-100);border-radius:var(--border-radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition-smooth)}.location-icon img{width:28px;height:28px}.location-card-selected .location-icon{background:var(--slate-900)}.location-details{flex-grow:1}.location-details h3{font-size:1.15rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:.3rem}.location-details p{font-size:.9rem;color:var(--slate-500)!important;font-weight:450;line-height:1.4;margin-bottom:0}.search-container{width:100%;margin-bottom:1.25rem}.search-input-wrapper{width:100%;background-color:var(--slate-100);border:1.5px solid var(--slate-200);border-radius:var(--border-radius-md);padding:.6rem 1rem;transition:var(--transition-smooth)}.search-input-wrapper:focus-within{background-color:#fff;border-color:var(--color-primary);box-shadow:0 0 0 3px #23086014}.search-input{font-size:.95rem;font-weight:500;color:var(--slate-900)!important;background:transparent;outline:none;width:100%}.search-input::placeholder{color:var(--slate-400)}.search-icon{color:var(--slate-400)!important;font-size:20px!important;width:20px!important;height:20px!important}.clear-icon{color:var(--slate-400)!important;font-size:18px!important;width:18px!important;height:18px!important;transition:var(--transition-smooth)}.clear-icon:hover{color:var(--slate-600)!important}.staff-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem;max-height:48vh;overflow-y:auto;padding-right:.5rem;padding-bottom:1rem}.staff-list::-webkit-scrollbar{width:6px}.staff-list::-webkit-scrollbar-track{background:var(--slate-50);border-radius:4px}.staff-list::-webkit-scrollbar-thumb{background:var(--slate-200);border-radius:4px}.staff-list::-webkit-scrollbar-thumb:hover{background:var(--slate-300)}.staff-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:.9rem 1.25rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm);margin-bottom:0!important}.staff-card:hover{border-color:var(--slate-300);transform:translateY(-2px);box-shadow:var(--shadow-md)}.staff-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:.9rem 1.25rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);transform:translateY(-1px);margin-bottom:0!important}.staff-avatar{width:48px;height:48px;background:var(--color-accent-gradient);font-size:.95rem;font-weight:700;color:#fff!important;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 10px #2308601a;letter-spacing:.5px;transition:var(--transition-smooth)}.staff-card-selected .staff-avatar{transform:scale(1.05)}.staff-name{font-size:1.05rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:.2rem;letter-spacing:-.015em}.staff-specialty{font-size:.8rem;color:var(--slate-500)!important;font-weight:600;margin-bottom:0;text-transform:uppercase;letter-spacing:.05em}.selection-indicator{display:flex;align-items:center;justify-content:center;margin-left:auto;padding-left:1rem}.checkmark-circle-mini{width:24px;height:24px;border:2px solid var(--slate-300);border-radius:50%;background-color:#fff;transition:var(--transition-bounce);color:#fff!important}.checkmark-circle-mini.selected{background:var(--color-accent-gradient);border-color:transparent;box-shadow:0 3px 8px #23086040}.checkmark-circle-mini mat-icon{font-size:14px!important;width:14px!important;height:14px!important;color:#fff!important;font-weight:800!important;display:flex;align-items:center;justify-content:center}.main_container{display:flex;gap:2rem;margin-bottom:2rem}.section-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;box-shadow:var(--shadow-sm);height:100%}.section-title{font-size:1.1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:10px!important;letter-spacing:-.01em}.time_selection{max-height:420px;display:flex;flex-direction:column}.time_selection .row{flex-grow:1;overflow-y:auto;padding-right:.25rem;margin-top:10px}.time-slot{background:#fff;border:1px solid var(--slate-200);font-size:.75rem;font-weight:600;color:var(--slate-800)!important;height:34px;padding:0 4px;border-radius:var(--border-radius-md);cursor:pointer;transition:var(--transition-smooth);text-align:center;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}.time-slot:hover{border-color:var(--slate-400);transform:translateY(-2px);box-shadow:var(--shadow-md);background-color:var(--slate-50)}.time-slot.selected{background:var(--color-accent-gradient);border-color:transparent;color:#fff!important;box-shadow:0 4px 12px #23086033}.form-section{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.75rem;box-shadow:var(--shadow-sm)}.form-label{font-size:.85rem;font-weight:600;color:var(--slate-700)!important;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.05em}.required-asterisk{color:var(--color-error);margin-left:2px}.form-control,.form-input,.form-textarea{width:100%;background-color:var(--slate-50);border:1px solid var(--slate-200);color:var(--slate-900)!important;font-size:.95rem;font-weight:500;padding:.75rem 1rem;border-radius:var(--border-radius-md);transition:var(--transition-smooth);outline:none}.form-control:focus,.form-input:focus,.form-textarea:focus{background-color:#fff;border-color:var(--color-primary);box-shadow:0 0 0 3px #2308601a}.form-textarea{min-height:100px;resize:vertical}.policies-container{background-color:#fff;border:1px solid var(--slate-200);padding:1.75rem;border-radius:var(--border-radius-lg);margin-top:1.5rem;box-shadow:var(--shadow-sm)}.policies-title{font-size:1.1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:1.25rem}.policy-item{background-color:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:1rem 1.25rem;cursor:pointer;transition:var(--transition-smooth);display:flex;justify-content:space-between;align-items:center}.policy-item:hover{background-color:var(--slate-100);border-color:var(--slate-300)}.policy-title{font-size:.95rem;font-weight:600;color:var(--slate-800)!important}.policy-arrow mat-icon{color:var(--slate-500)!important;transition:var(--transition-smooth)}.cancellation_policies{background-color:var(--slate-50);padding:1rem 1.5rem;border-left:3px solid var(--color-primary);border-radius:0 0 var(--border-radius-md) var(--border-radius-md);margin-top:-4px;margin-bottom:1rem;font-size:.9rem;color:var(--slate-600)!important;line-height:1.5}.acceptance-section{display:flex;align-items:center;gap:.75rem;margin-top:1.5rem}.custom-checkbox{width:20px;height:20px;border:2px solid var(--slate-300);border-radius:6px;cursor:pointer;transition:var(--transition-smooth);position:relative;appearance:none;background-color:#fff;outline:none}.custom-checkbox:checked{background:var(--color-accent-gradient);border-color:transparent}.custom-checkbox:checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff!important;font-size:.75rem;font-weight:800}.acceptance-text{font-size:.95rem;color:var(--slate-700)!important;font-weight:500;-webkit-user-select:none;user-select:none;line-height:1.4}.booking-summary-card{background-color:#fff;border:1px solid var(--slate-200);padding:2rem;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);position:relative}.booking-summary-card:after{content:\"\";position:absolute;bottom:-1px;left:0;right:0;height:10px;background-image:radial-gradient(circle,white 4px,transparent 5px);background-size:12px 12px;background-position:0 0;z-index:2}.summary-title{font-size:1.25rem;font-weight:700;color:var(--slate-900)!important;border-bottom:2px dashed var(--slate-200);padding-bottom:1rem;margin-bottom:1.5rem;text-align:center}.summary-row{display:flex;justify-content:space-between;align-items:center;padding:.85rem 0;border-bottom:1px solid var(--slate-100)}.summary-label{font-size:.95rem;color:var(--slate-500)!important;font-weight:500}.summary-value{font-size:.95rem;color:var(--slate-900)!important;font-weight:600;text-align:right}.total-row{margin-top:1rem;padding-top:1.25rem;border-top:2px dashed var(--slate-200);border-bottom:none}.total-row .summary-label{font-size:1.25rem;font-weight:700;color:var(--slate-900)!important}.total-row .summary-value{font-size:1.5rem;font-weight:800;color:var(--color-primary)!important}.booking-confirmation{background:#fff;border:1px solid var(--slate-200);padding:3rem 2rem;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;align-items:center;text-align:center;max-width:500px;margin:0 auto}.success-icon{margin-bottom:1.5rem}.checkmark-circle{width:96px;height:96px;display:flex;align-items:center;justify-content:center}.confirmation-title{font-size:1.5rem;font-weight:800;color:var(--slate-900)!important;margin-bottom:.5rem}.confirmation-message{font-size:1rem;color:var(--slate-500)!important;line-height:1.6;margin-bottom:2rem;font-weight:450}.details-card{background-color:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:1.5rem;width:100%;margin-bottom:2rem;text-align:left}.details-title{font-size:1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.05em}.details-row{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px dashed var(--slate-200)}.details-row:last-child{border-bottom:none}.detail-label{font-size:.85rem;color:var(--slate-500)!important;font-weight:500}.detail-value{font-size:.9rem;color:var(--slate-900)!important;font-weight:600}.done-actions{display:flex;gap:12px;width:100%}.done-btn{flex:1;max-width:220px;padding:.75rem 1.5rem;border-radius:var(--border-radius-md);font-size:.95rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth);border:none;white-space:nowrap}.done-btn-primary{background:var(--color-accent-gradient);color:#fff!important;box-shadow:0 4px 10px #23086033}.done-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.done-btn-secondary{background:#fff;color:var(--slate-600)!important;border:1px solid var(--slate-200)}.done-btn-secondary:hover{background-color:var(--slate-100);color:var(--slate-900)!important}.continue-btn{background:var(--color-accent-gradient);color:#fff!important;border:none;padding:.75rem 2rem;border-radius:var(--border-radius-md);font-size:.95rem!important;font-weight:600;cursor:pointer;transition:var(--transition-smooth);box-shadow:0 4px 10px #23086033;width:max-content!important}.continue-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.continue-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed!important;box-shadow:none!important}.service-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.5rem;padding:0;width:100%}.skeleton-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;height:180px;display:flex;flex-direction:column;justify-content:space-between}.skeleton{background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0,#f1f5f9 75%);background-size:200% 100%;animation:loading-shimmer 1.5s infinite linear;border-radius:4px}@keyframes loading-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-icon{width:48px;height:48px;border-radius:var(--border-radius-md)}.skeleton-title{height:20px;width:60%;margin-bottom:.5rem}.skeleton-price{height:20px;width:30%}.skeleton-duration{height:12px;width:25%;margin-top:.25rem}.skeleton-description{height:14px;width:85%}.skeleton-badge{height:28px;width:120px;border-radius:20px}.time-slot-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;width:100%}.skeleton-time-slot{height:42px;border-radius:var(--border-radius-md);background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0,#f1f5f9 75%);background-size:200% 100%;animation:loading-shimmer 1.5s infinite linear;border:1px solid var(--slate-100)}@media screen and (max-width: 475px){.done-actions{flex-direction:column}.done-btn{max-width:none;width:100%}.main_header{padding:1rem}.header-title h1{font-size:1.25rem}.back-btn{padding:.5rem .8rem}.back-btn span{display:none}.main_body{padding:15px}.services-grid{grid-template-columns:1fr;gap:1rem}.staff-list{grid-template-columns:1fr!important;gap:.85rem!important}.service-card,.service-card-selected{min-height:auto}.main_container{flex-direction:column;gap:1.5rem}.details_container{gap:1.5rem}.details_container>.d-flex{flex-direction:column;gap:1.5rem}.details_container>.d-flex>div{width:100%!important}.booking-summary-card{padding:1.25rem}.summary-title{font-size:1.15rem}.total-row .summary-label{font-size:1.1rem}.total-row .summary-value{font-size:1.3rem}.main_footer{padding:1rem}.continue-btn{padding:.75rem 1.5rem}}h1{font-size:24px!important;font-weight:600!important}.wiz-container{width:100%;max-width:1120px}.wizard-banner{border-radius:var(--border-radius-lg);padding:1.125rem 1.5rem;background:var(--color-accent-gradient);box-shadow:var(--shadow-sm)}.wizard-banner-title{font-size:1.1rem;font-weight:700;color:#fff!important}.wizard-banner-desc{font-size:.85rem;line-height:1.5;color:#ffffffd9!important;padding-top:.2rem;max-width:520px}.sub-step-tabs{display:flex;background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);overflow:hidden}.sub-step-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;border:none;background:#fff;padding:.85rem 0;font-size:.85rem;font-weight:600;color:var(--slate-500)!important;cursor:pointer;border-bottom:2px solid transparent;transition:var(--transition-smooth)}.sub-step-tab.active{color:var(--slate-900)!important;border-bottom-color:var(--color-primary);background:var(--slate-50)}.sub-step-tab.locked{color:var(--slate-300)!important;cursor:not-allowed}.sub-step-dot{width:20px;height:20px;border-radius:50%;background:var(--slate-200);color:var(--slate-500)!important;font-size:.7rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.sub-step-tab.active .sub-step-dot{background:var(--color-accent-gradient);color:#fff!important}.sub-step-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:.85rem 1.25rem;box-shadow:var(--shadow-sm)}.sub-step-footer .sub-back-btn{width:auto;flex:0 0 auto;height:40px;font-size:.85rem;font-weight:600;color:var(--slate-600)!important;background:none;border:1.5px solid var(--slate-200);padding:0 18px;border-radius:var(--border-radius-md);cursor:pointer;transition:var(--transition-smooth)}.sub-step-footer .sub-back-btn:hover:not(:disabled){color:var(--slate-900)!important;background-color:var(--slate-100)}.sub-step-footer .sub-back-btn:disabled{color:var(--slate-300)!important;cursor:not-allowed}.sub-step-footer .sub-chosen-label{width:auto;flex:1 1 auto;font-size:.8rem;color:var(--slate-500)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;text-align:center}.sub-step-footer .sub-next-btn{width:auto;flex:0 0 auto;height:40px;background:var(--color-accent-gradient);color:#fff!important;border:none;padding:0 22px;border-radius:var(--border-radius-md);font-size:.85rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth)}.sub-step-footer .sub-next-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.sub-step-footer .sub-next-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed!important;box-shadow:none!important}.single-grid{display:grid;grid-template-columns:1fr 360px;gap:1.5rem;align-items:start}.single-left{display:flex;flex-direction:column;gap:1.5rem}.single-right{align-self:flex-start;position:sticky;top:10px}.week-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px}.week-arrows{display:flex;gap:8px}.week-arrow-btn{width:34px;height:34px;border-radius:8px;border:1px solid var(--slate-200);background:#fff;color:var(--slate-700)!important;cursor:pointer;display:flex;align-items:center;justify-content:center}.week-arrow-btn:disabled{color:var(--slate-300)!important;cursor:not-allowed}.week-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}.week-day{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:.6rem .25rem;cursor:pointer;transition:var(--transition-smooth);text-align:center}.week-day:hover{border-color:var(--slate-400)}.week-day.selected{background:var(--color-accent-gradient);border-color:transparent}.week-day.selected .week-day-dow,.week-day.selected .week-day-num{color:#fff!important}.week-day-dow{font-size:.75rem;font-weight:600;color:var(--slate-500)!important;text-transform:uppercase}.week-day-num{font-size:1rem;font-weight:700;color:var(--slate-900)!important;margin-top:2px}.booking-for-line{font-size:.9rem;color:var(--slate-600)!important;padding:.85rem 1rem;background:var(--slate-50);border-radius:var(--border-radius-md);margin-bottom:.5rem}.booking-for-line strong{color:var(--slate-900)!important}.shipping-info{border-radius:10px;padding:20px;margin-bottom:12px;border:1px solid var(--slate-200);box-shadow:var(--shadow-sm)}.address-info{margin-bottom:0}.address-name{font-weight:700;margin-bottom:8px;color:var(--slate-900)!important}.address-details{color:var(--slate-500)!important;margin-bottom:8px}.mobile-number{font-weight:700;color:var(--slate-900)!important;font-size:15px}.change-address-btn{font-size:.85rem!important;font-weight:700!important;padding:10px;background:#fff;border:1px solid var(--slate-200);border-radius:8px;color:var(--slate-900)!important;cursor:pointer;transition:var(--transition-smooth)}.change-address-btn:hover{border-color:var(--color-primary);color:var(--color-primary)!important}.addLinks{padding:14px;border:1px dashed var(--slate-300);display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:8px;color:var(--slate-500)!important;margin-bottom:12px}.addLinks:hover{border-color:var(--color-primary);color:var(--color-primary)!important}.design-row{display:flex;gap:13px;align-items:center;padding-bottom:1rem}.design-thumb{width:56px;height:56px;border-radius:8px;background:var(--slate-100);flex:none}.design-info{flex:1}.design-name{font-size:13.5px;color:var(--slate-900)!important;line-height:1.35}.design-price{font-size:13.5px;font-weight:600;color:var(--slate-900)!important;margin-top:3px}.add-more-btn{width:100%;height:44px;border:1.5px dashed var(--slate-300);border-radius:8px;background:none;color:var(--color-primary)!important;font-size:13px;font-weight:600;cursor:pointer;margin-bottom:1rem}.summary-divider{height:1px;background:var(--slate-100);margin-bottom:1rem}.summary-line{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.free-label{font-size:13.5px;font-weight:600;color:var(--color-success)!important}.footnote{font-size:11.5px;line-height:1.5;color:var(--slate-500)!important;text-align:center;margin:.75rem 0 0}.review-wrap{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:16px}.review-card{border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);overflow:hidden}.review-actions{display:flex;gap:12px}.review-actions .review-back-btn{flex:1;height:48px;border:1.5px solid var(--slate-200);border-radius:var(--border-radius-md);background:#fff;color:var(--slate-600)!important;font-size:.9rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth)}.review-actions .review-back-btn:hover{color:var(--slate-900)!important;background-color:var(--slate-100)}.review-actions .review-confirm-btn{flex:1;height:48px;border:none;border-radius:var(--border-radius-md);background:var(--color-accent-gradient);color:#fff!important;font-size:.9rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth)}.review-actions .review-confirm-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.review-actions .review-confirm-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed!important;box-shadow:none!important}.review-header{padding:14px 18px;background:var(--slate-50);border-bottom:1px solid var(--slate-100);font-size:14.5px;font-weight:700;color:var(--slate-900)!important}.review-row{display:flex;justify-content:space-between;gap:16px;padding:12px 18px;border-bottom:1px solid var(--slate-100);font-size:13.5px}.review-row:last-child{border-bottom:none}.review-k{color:var(--slate-500)!important;flex-shrink:0}.review-v{color:var(--slate-900)!important;font-weight:500;text-align:right}@media screen and (max-width: 900px){.single-grid{grid-template-columns:1fr}.single-right{position:static}}@media screen and (max-width: 475px){.week-strip{gap:6px}}\n"], dependencies: [{ 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: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i9.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: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }] }); }
|
|
26556
26712
|
}
|
|
26557
26713
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BookAppointmentComponent, decorators: [{
|
|
26558
26714
|
type: Component,
|
|
26559
|
-
args: [{ selector: 'simpo-book-appointment', standalone: true, imports: [CommonModule, MatIcon, MatIconModule, FormsModule, MatDialogModule, ToastModule, HoverDirective, HoverElementsComponent, BackgroundDirective], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n [showTransformOptions]=\"screenWidth < 475 ? 'translateY(-100%)' : ''\"></p-toast>\n<section class=\"main_section\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\n [simpoBackground]=\"backgroundInfo\" [style.--color-accent-gradient]=\"accentColor\">\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div class=\"main_body w-100 d-flex justify-content-center\">\n <div class=\"wiz-container\">\n\n <ng-container *ngIf=\"step === 'form'\">\n <div class=\"single-grid\">\n <div class=\"single-left\">\n\n <div class=\"wizard-banner\" [id]=\"data?.id\" [simpoBackground]=\"backgroundInfo\" [style.--color-accent-gradient]=\"accentColor\">\n <div class=\"wizard-banner-title\">{{bannerTitle}}</div>\n <div class=\"wizard-banner-desc\">{{bannerDesc}}</div>\n </div>\n\n <div class=\"sub-step-tabs\">\n <button type=\"button\" class=\"sub-step-tab\" *ngFor=\"let s of subSteps; trackBy: trackBySubStepKey\"\n [class.active]=\"s.active\" [class.locked]=\"s.locked\" [disabled]=\"s.locked\" (click)=\"s.go()\">\n <span class=\"sub-step-dot\">{{s.num}}</span>\n {{s.label}}\n </button>\n </div>\n\n <div class=\"sub-step-content\">\n <ng-container *ngIf=\"subStep === 'date'\">\n <div class=\"section-card card\">\n <div class=\"week-header\">\n <div>\n <h3 class=\"section-title mb-0\">Select a Date</h3>\n <p class=\"subtitle mb-0\">{{weekRangeLabel}}</p>\n </div>\n <div class=\"week-arrows\">\n <button type=\"button\" class=\"week-arrow-btn\" (click)=\"prevWeek()\" [disabled]=\"weekOffset <= 0\">\n <mat-icon>chevron_left</mat-icon>\n </button>\n <button type=\"button\" class=\"week-arrow-btn\" (click)=\"nextWeek()\" [disabled]=\"weekOffset >= maxWeekOffset\">\n <mat-icon>chevron_right</mat-icon>\n </button>\n </div>\n </div>\n <div class=\"week-strip\">\n <button type=\"button\" class=\"week-day\" *ngFor=\"let d of weekDays\" [class.selected]=\"d.selected\"\n (click)=\"pickDay(d)\">\n <div class=\"week-day-dow\">{{d.dow}}</div>\n <div class=\"week-day-num\">{{d.num}}</div>\n </button>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"subStep === 'time'\">\n <div class=\"section-card card\">\n <h3 class=\"section-title mb-0\">Select a Time</h3>\n <p class=\"subtitle\" *ngIf=\"selectedDateStr\">Available slots for {{selectedDateStr}}</p>\n <p class=\"subtitle mb-0\" *ngIf=\"!selectedDateStr\">Pick a date to see available times.</p>\n <div class=\"time-slot-grid overflow-scroll\" *ngIf=\"selectedDateStr\">\n <ng-container *ngIf=\"!slotsLoading; else slotsLoadingTpl\">\n <div class=\"time-slot rounded-2\" *ngFor=\"let time of slots\" [class.selected]=\"time.selected\"\n (click)=\"selectSlot(time)\">{{time?.value}}</div>\n <p class=\"mb-0\" *ngIf=\"slots.length === 0\">No slots available for this date.</p>\n </ng-container>\n <ng-template #slotsLoadingTpl>\n <p class=\"mb-0\">Loading available times...</p>\n </ng-template>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"subStep === 'details'\">\n <div class=\"section-card card\">\n <h3 class=\"section-title\">Booking Details</h3>\n <div class=\"booking-for-line\">\n Booking for <strong>{{userDetails?.contact?.name}}</strong>\n <ng-container *ngIf=\"userDetails?.contact?.mobile\"> \u00B7 {{userDetails?.contact?.mobile}}</ng-container>\n <ng-container *ngIf=\"userDetails?.contact?.email\"> \u00B7 {{userDetails?.contact?.email}}</ng-container>\n </div>\n\n <ng-container *ngIf=\"mode === 'HOME_VISIT'\">\n <p class=\"policies-title mt-3 mb-2\" style=\"font-size:1rem;\">Shipping Address</p>\n\n <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\n <div class=\"address-info\">\n <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\n <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\n {{defaultAddress?.stateName}}</div>\n <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\n </div>\n </div>\n <button type=\"button\" class=\"change-address-btn w-100\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">\n CHANGE OR ADD ADDRESS\n </button>\n\n <div class=\"addLinks\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\n <mat-icon>add</mat-icon>\n <span class=\"ms-2\">Add an address</span>\n </div>\n\n <div class=\"mb-0 mt-3\">\n <label class=\"form-label d-flex align-items-center\">Instructions (optional)</label>\n <textarea class=\"form-control form-textarea rounded-2\" [(ngModel)]=\"instructions\"></textarea>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n\n <div class=\"sub-step-footer\">\n <button type=\"button\" class=\"sub-back-btn\" [disabled]=\"subBackOff\" (click)=\"subBack()\">Back</button>\n <div class=\"sub-chosen-label\">{{subChosenLabel}}</div>\n <button type=\"button\" class=\"sub-next-btn\" *ngIf=\"subStep !== 'details'\" [disabled]=\"subNextOff\" (click)=\"subNext()\">Next</button>\n </div>\n </div>\n\n <div class=\"single-right section-card card\">\n <h3 class=\"section-title\">Your Shortlisted Designs</h3>\n <div class=\"design-row\" *ngFor=\"let it of productCartItems\">\n <div class=\"design-thumb\"></div>\n <div class=\"design-info\">\n <div class=\"design-name\">{{it.itemName}}</div>\n <div class=\"design-price\">\u20B9{{(it.sellingPrice ?? it.price ?? 0) * (it.quantity ?? 1)}}</div>\n </div>\n </div>\n <button type=\"button\" class=\"add-more-btn\" (click)=\"goToListing()\">+ Add More Designs</button>\n\n <div class=\"summary-divider\"></div>\n\n <div class=\"summary-line\" *ngIf=\"mode !== 'HOME_VISIT' || homeVisitCharge <= 0\">\n <div class=\"summary-label\">Service:</div>\n <div class=\"free-label\">FREE</div>\n </div>\n <div class=\"summary-line\" *ngIf=\"mode === 'HOME_VISIT' && homeVisitCharge > 0\">\n <div class=\"summary-label\">Home visit charge</div>\n <div class=\"summary-value\">\u20B9{{homeVisitCharge}}</div>\n </div>\n\n <button class=\"continue-btn w-100 mt-2\" [disabled]=\"invalid()\" (click)=\"goToReview()\">Review Booking</button>\n <p class=\"footnote\">You will review everything on the next screen before it is confirmed.</p>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"step === 'review'\">\n <div class=\"review-wrap\">\n <div class=\"review-card card\">\n <div class=\"review-header\">Review your booking</div>\n <div class=\"review-row\" *ngFor=\"let rc of reviewRows\">\n <div class=\"review-k\">{{rc.k}}</div>\n <div class=\"review-v\">{{rc.v}}</div>\n </div>\n </div>\n <div class=\"review-actions\">\n <button type=\"button\" class=\"review-back-btn\" (click)=\"backToForm()\">Back & edit</button>\n <button type=\"button\" class=\"review-confirm-btn\" (click)=\"confirmBooking()\" [disabled]=\"isProcessing\">\n {{isProcessing ? 'Please wait...' : (mode === 'HOME_VISIT' ? 'Confirm Home Visit' : 'Confirm Video Call')}}\n </button>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"step === 'done'\">\n <div class=\"booking-confirmation\">\n <div class=\"success-icon\">\n <div class=\"checkmark-circle\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/881293c1758695578518success.gif\"\n class=\"w-100 h-100\" *ngIf=\"apiStatus\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/325000c1758695564518fail.gif\"\n class=\"w-100 h-100\" *ngIf=\"!apiStatus\">\n </div>\n </div>\n\n <div class=\"confirmation-content\">\n <h1 class=\"confirmation-title\">{{apiStatus ? 'Booking Confirmed!' : 'Booking Failed'}}</h1>\n <p class=\"confirmation-message\">\n {{apiStatus ? 'Your appointment has been successfully booked.':'Failed to book your appointment. Please\n try again later'}}\n </p>\n\n <div class=\"video-call-link-card d-flex align-items-center justify-content-center\" *ngIf=\"apiStatus && mode === 'VIDEO_CALL' && bookingGroup?.videoCallLink\">\n <div class=\"details-card\">\n <h3 class=\"details-title\">Your Video Call Link</h3>\n <a [href]=\"bookingGroup.videoCallLink\" target=\"_blank\">{{bookingGroup.videoCallLink}}</a>\n </div>\n </div>\n\n <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus\">\n <div class=\"details-card\">\n <h3 class=\"details-title\">Appointment Details</h3>\n <div class=\"details-row\">\n <span class=\"detail-label\">{{productCartItems.length ? 'Products' : (mode === 'HOME_VISIT' ? 'Home Visit' : 'Video Call')}}</span>\n <span class=\"detail-value\">{{selectedDateStr}} at {{selectedSlot?.value ?? 'N/A'}}</span>\n </div>\n </div>\n </div>\n\n <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus\">\n <div class=\"details-card\">\n <h3 class=\"details-title\">Payment</h3>\n <div class=\"details-row\" *ngIf=\"mode === 'HOME_VISIT' && homeVisitCharge > 0\">\n <span class=\"detail-label\">Home visit charge</span>\n <span class=\"detail-value\">\u20B9{{homeVisitCharge}}</span>\n </div>\n <div class=\"details-row\">\n <span class=\"detail-label\">Total</span>\n <span class=\"detail-value\">\u20B9{{bookingTotal}}</span>\n </div>\n <div class=\"details-row\">\n <span class=\"detail-label\">Paid</span>\n <span class=\"detail-value\">\u20B9{{bookingPaid}}</span>\n </div>\n <div class=\"details-row\" *ngIf=\"bookingDue > 0\">\n <span class=\"detail-label\">Due</span>\n <span class=\"detail-value\">\u20B9{{bookingDue}}</span>\n </div>\n </div>\n </div>\n\n <div class=\"done-actions d-flex align-items-center justify-content-center\" *ngIf=\"apiStatus\">\n <button type=\"button\" class=\"done-btn done-btn-primary\" (click)=\"goToMyBookings()\">View my bookings</button>\n <button type=\"button\" class=\"done-btn done-btn-secondary\" (click)=\"goToListing()\">Keep shopping</button>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n</section>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap\";mat-icon{font-family:Material Icons!important}:host{--font-sans: \"Outfit\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;--slate-50: #f8fafc;--slate-100: #f1f5f9;--slate-200: #e2e8f0;--slate-300: #cbd5e1;--slate-400: #94a3b8;--slate-500: #64748b;--slate-600: #475569;--slate-700: #334155;--slate-800: #1e293b;--slate-900: #0f172a;--color-primary: #230860;--color-secondary: #00b6ff;--color-accent-gradient: linear-gradient(135deg, #230860 0%, #00b6ff 100%);--color-success: #10b981;--color-success-bg: #ecfdf5;--color-error: #ef4444;--color-error-bg: #fef2f2;--border-radius-sm: 8px;--border-radius-md: 12px;--border-radius-lg: 16px;--border-radius-xl: 24px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .05), 0 2px 4px -2px rgba(0, 0, 0, .05);--shadow-lg: 0 10px 15px -3px rgba(35, 8, 96, .05), 0 4px 6px -4px rgba(35, 8, 96, .05);--shadow-xl: 0 20px 25px -5px rgba(35, 8, 96, .08), 0 8px 10px -6px rgba(35, 8, 96, .08);--transition-smooth: all .3s cubic-bezier(.4, 0, .2, 1);--transition-bounce: all .4s cubic-bezier(.175, .885, .32, 1.275)}*{box-sizing:border-box;font-family:var(--font-sans)}.main_section{position:relative;height:100vh;background-color:var(--slate-50);display:flex;flex-direction:column;overflow:hidden}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.main_header{padding:15px;background:#fff;border-bottom:1px solid var(--slate-100);flex-shrink:0;box-shadow:0 2px 8px #00000003}.header{display:flex;align-items:center;justify-content:space-between}.back-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem 1.2rem;border-radius:var(--border-radius-md);background:var(--slate-50);border:1px solid var(--slate-200);color:var(--slate-700)!important;transition:var(--transition-smooth);font-weight:500;font-size:.9rem;cursor:pointer}.back-btn mat-icon{font-size:18px!important;width:18px!important;height:18px!important;color:var(--slate-700)!important;display:flex;align-items:center;justify-content:center}.back-btn:hover{background:var(--slate-100);transform:translate(-3px);color:var(--slate-900)!important}.header-title{flex-grow:1;text-align:right}.header-title h1{font-size:1.5rem;font-weight:700;margin-bottom:.2rem;color:var(--slate-900)!important;letter-spacing:-.025em}.header-title p{color:var(--slate-500)!important;font-size:.9rem;font-weight:500;margin-bottom:0}.progress-bar{width:100%;height:6px;background-color:var(--slate-100);margin-top:3px;border-radius:10px;overflow:hidden;position:relative}.progress-fill{height:100%;background:var(--color-accent-gradient);border-radius:10px;transition:width .5s cubic-bezier(.4,0,.2,1);position:relative}.progress-fill:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,#fff0,#ffffff4d,#fff0);animation:shimmer 2s infinite linear}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.main_body{flex-grow:1;overflow-y:auto;padding:10px;display:flex;justify-content:center;background:var(--slate-50)}.w-60{width:100%;max-width:800px}.service_section,.location_section,.staff-listing,.date_section,.contact_section,.payment_section,.booking-confirmation{animation:slideUp .5s cubic-bezier(.16,1,.3,1) forwards}@keyframes slideUp{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}h2{font-size:1.5rem;font-weight:700;color:var(--slate-900)!important;letter-spacing:-.02em;margin-bottom:.3rem}p.subtitle,.service-selection p,.location_section p,.staff-subtitle,.datetime-subtitle,.contact-subtitle,.payment-subtitle{color:var(--slate-500)!important;font-size:13px;margin-bottom:2rem}.services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.5rem;padding-bottom:2rem}.service-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:180px}.service-card:hover{border-color:var(--slate-400);transform:translateY(-4px);box-shadow:var(--shadow-lg)}.service-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:180px;transform:translateY(-2px)}.service-card-selected:before,.location-card-selected:before{content:\"\\2713\";position:absolute;top:-10px;right:-10px;background:var(--color-accent-gradient);color:#fff!important;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;box-shadow:0 4px 8px #2308604d;animation:popIn .3s cubic-bezier(.175,.885,.32,1.275);z-index:10}@keyframes popIn{0%{transform:scale(0)}to{transform:scale(1)}}.service-header{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1rem}.service-icon{width:48px;height:48px;border-radius:var(--border-radius-md);background-color:var(--slate-100);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition-smooth)}.service-icon mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:var(--color-primary)!important}.service-card-selected .service-icon{background:var(--slate-900)}.service-card-selected .service-icon mat-icon{color:#fff!important}.service-info{flex-grow:1}.service-title{font-size:1.15rem;font-weight:700;color:var(--slate-900)!important;line-height:1.3;margin-bottom:.2rem}.service-price{font-size:1.25rem;font-weight:800;color:var(--slate-900)!important;text-align:right}.service-duration{font-size:.8rem;color:var(--slate-500)!important;font-weight:600;text-align:right;margin-top:.1rem}.service-description{color:var(--slate-600)!important;font-size:.9rem;line-height:1.5;margin-bottom:1.25rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.home-visit{align-self:flex-start;display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:600;color:var(--slate-700)!important;border:1px solid var(--slate-200);padding:.35rem .75rem;border-radius:20px;background-color:var(--slate-50);transition:var(--transition-smooth)}.home-visit img{width:14px;height:14px}.home-visit:before{content:\"\";display:inline-block;width:6px;height:6px;border-radius:50%;background-color:var(--color-success);box-shadow:0 0 #10b98166;animation:pulseGlow 1.8s infinite}@keyframes pulseGlow{0%{box-shadow:0 0 #10b981b3}70%{box-shadow:0 0 0 6px #10b98100}to{box-shadow:0 0 #10b98100}}.location-list{display:flex;flex-direction:column;gap:1.25rem;padding-bottom:2rem}.location-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm)}.location-card:hover{border-color:var(--slate-400);transform:translateY(-2px);box-shadow:var(--shadow-md)}.location-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);transform:translateY(-1px)}.location-content{display:flex;align-items:center}.location-info{display:flex;align-items:center;gap:1.25rem;width:100%}.location-icon{width:52px;height:52px;background-color:var(--slate-100);border-radius:var(--border-radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition-smooth)}.location-icon img{width:28px;height:28px}.location-card-selected .location-icon{background:var(--slate-900)}.location-details{flex-grow:1}.location-details h3{font-size:1.15rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:.3rem}.location-details p{font-size:.9rem;color:var(--slate-500)!important;font-weight:450;line-height:1.4;margin-bottom:0}.search-container{width:100%;margin-bottom:1.25rem}.search-input-wrapper{width:100%;background-color:var(--slate-100);border:1.5px solid var(--slate-200);border-radius:var(--border-radius-md);padding:.6rem 1rem;transition:var(--transition-smooth)}.search-input-wrapper:focus-within{background-color:#fff;border-color:var(--color-primary);box-shadow:0 0 0 3px #23086014}.search-input{font-size:.95rem;font-weight:500;color:var(--slate-900)!important;background:transparent;outline:none;width:100%}.search-input::placeholder{color:var(--slate-400)}.search-icon{color:var(--slate-400)!important;font-size:20px!important;width:20px!important;height:20px!important}.clear-icon{color:var(--slate-400)!important;font-size:18px!important;width:18px!important;height:18px!important;transition:var(--transition-smooth)}.clear-icon:hover{color:var(--slate-600)!important}.staff-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem;max-height:48vh;overflow-y:auto;padding-right:.5rem;padding-bottom:1rem}.staff-list::-webkit-scrollbar{width:6px}.staff-list::-webkit-scrollbar-track{background:var(--slate-50);border-radius:4px}.staff-list::-webkit-scrollbar-thumb{background:var(--slate-200);border-radius:4px}.staff-list::-webkit-scrollbar-thumb:hover{background:var(--slate-300)}.staff-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:.9rem 1.25rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm);margin-bottom:0!important}.staff-card:hover{border-color:var(--slate-300);transform:translateY(-2px);box-shadow:var(--shadow-md)}.staff-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:.9rem 1.25rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);transform:translateY(-1px);margin-bottom:0!important}.staff-avatar{width:48px;height:48px;background:var(--color-accent-gradient);font-size:.95rem;font-weight:700;color:#fff!important;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 10px #2308601a;letter-spacing:.5px;transition:var(--transition-smooth)}.staff-card-selected .staff-avatar{transform:scale(1.05)}.staff-name{font-size:1.05rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:.2rem;letter-spacing:-.015em}.staff-specialty{font-size:.8rem;color:var(--slate-500)!important;font-weight:600;margin-bottom:0;text-transform:uppercase;letter-spacing:.05em}.selection-indicator{display:flex;align-items:center;justify-content:center;margin-left:auto;padding-left:1rem}.checkmark-circle-mini{width:24px;height:24px;border:2px solid var(--slate-300);border-radius:50%;background-color:#fff;transition:var(--transition-bounce);color:#fff!important}.checkmark-circle-mini.selected{background:var(--color-accent-gradient);border-color:transparent;box-shadow:0 3px 8px #23086040}.checkmark-circle-mini mat-icon{font-size:14px!important;width:14px!important;height:14px!important;color:#fff!important;font-weight:800!important;display:flex;align-items:center;justify-content:center}.main_container{display:flex;gap:2rem;margin-bottom:2rem}.section-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;box-shadow:var(--shadow-sm);height:100%}.section-title{font-size:1.1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:10px!important;letter-spacing:-.01em}.time_selection{max-height:420px;display:flex;flex-direction:column}.time_selection .row{flex-grow:1;overflow-y:auto;padding-right:.25rem;margin-top:10px}.time-slot{background:#fff;border:1px solid var(--slate-200);font-size:.75rem;font-weight:600;color:var(--slate-800)!important;height:34px;padding:0 4px;border-radius:var(--border-radius-md);cursor:pointer;transition:var(--transition-smooth);text-align:center;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}.time-slot:hover{border-color:var(--slate-400);transform:translateY(-2px);box-shadow:var(--shadow-md);background-color:var(--slate-50)}.time-slot.selected{background:var(--color-accent-gradient);border-color:transparent;color:#fff!important;box-shadow:0 4px 12px #23086033}.form-section{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.75rem;box-shadow:var(--shadow-sm)}.form-label{font-size:.85rem;font-weight:600;color:var(--slate-700)!important;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.05em}.required-asterisk{color:var(--color-error);margin-left:2px}.form-control,.form-input,.form-textarea{width:100%;background-color:var(--slate-50);border:1px solid var(--slate-200);color:var(--slate-900)!important;font-size:.95rem;font-weight:500;padding:.75rem 1rem;border-radius:var(--border-radius-md);transition:var(--transition-smooth);outline:none}.form-control:focus,.form-input:focus,.form-textarea:focus{background-color:#fff;border-color:var(--color-primary);box-shadow:0 0 0 3px #2308601a}.form-textarea{min-height:100px;resize:vertical}.policies-container{background-color:#fff;border:1px solid var(--slate-200);padding:1.75rem;border-radius:var(--border-radius-lg);margin-top:1.5rem;box-shadow:var(--shadow-sm)}.policies-title{font-size:1.1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:1.25rem}.policy-item{background-color:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:1rem 1.25rem;cursor:pointer;transition:var(--transition-smooth);display:flex;justify-content:space-between;align-items:center}.policy-item:hover{background-color:var(--slate-100);border-color:var(--slate-300)}.policy-title{font-size:.95rem;font-weight:600;color:var(--slate-800)!important}.policy-arrow mat-icon{color:var(--slate-500)!important;transition:var(--transition-smooth)}.cancellation_policies{background-color:var(--slate-50);padding:1rem 1.5rem;border-left:3px solid var(--color-primary);border-radius:0 0 var(--border-radius-md) var(--border-radius-md);margin-top:-4px;margin-bottom:1rem;font-size:.9rem;color:var(--slate-600)!important;line-height:1.5}.acceptance-section{display:flex;align-items:center;gap:.75rem;margin-top:1.5rem}.custom-checkbox{width:20px;height:20px;border:2px solid var(--slate-300);border-radius:6px;cursor:pointer;transition:var(--transition-smooth);position:relative;appearance:none;background-color:#fff;outline:none}.custom-checkbox:checked{background:var(--color-accent-gradient);border-color:transparent}.custom-checkbox:checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff!important;font-size:.75rem;font-weight:800}.acceptance-text{font-size:.95rem;color:var(--slate-700)!important;font-weight:500;-webkit-user-select:none;user-select:none;line-height:1.4}.booking-summary-card{background-color:#fff;border:1px solid var(--slate-200);padding:2rem;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);position:relative}.booking-summary-card:after{content:\"\";position:absolute;bottom:-1px;left:0;right:0;height:10px;background-image:radial-gradient(circle,white 4px,transparent 5px);background-size:12px 12px;background-position:0 0;z-index:2}.summary-title{font-size:1.25rem;font-weight:700;color:var(--slate-900)!important;border-bottom:2px dashed var(--slate-200);padding-bottom:1rem;margin-bottom:1.5rem;text-align:center}.summary-row{display:flex;justify-content:space-between;align-items:center;padding:.85rem 0;border-bottom:1px solid var(--slate-100)}.summary-label{font-size:.95rem;color:var(--slate-500)!important;font-weight:500}.summary-value{font-size:.95rem;color:var(--slate-900)!important;font-weight:600;text-align:right}.total-row{margin-top:1rem;padding-top:1.25rem;border-top:2px dashed var(--slate-200);border-bottom:none}.total-row .summary-label{font-size:1.25rem;font-weight:700;color:var(--slate-900)!important}.total-row .summary-value{font-size:1.5rem;font-weight:800;color:var(--color-primary)!important}.booking-confirmation{background:#fff;border:1px solid var(--slate-200);padding:3rem 2rem;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;align-items:center;text-align:center;max-width:500px;margin:0 auto}.success-icon{margin-bottom:1.5rem}.checkmark-circle{width:96px;height:96px;display:flex;align-items:center;justify-content:center}.confirmation-title{font-size:1.5rem;font-weight:800;color:var(--slate-900)!important;margin-bottom:.5rem}.confirmation-message{font-size:1rem;color:var(--slate-500)!important;line-height:1.6;margin-bottom:2rem;font-weight:450}.details-card{background-color:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:1.5rem;width:100%;margin-bottom:2rem;text-align:left}.details-title{font-size:1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.05em}.details-row{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px dashed var(--slate-200)}.details-row:last-child{border-bottom:none}.detail-label{font-size:.85rem;color:var(--slate-500)!important;font-weight:500}.detail-value{font-size:.9rem;color:var(--slate-900)!important;font-weight:600}.done-actions{display:flex;gap:12px;width:100%}.done-btn{flex:1;max-width:220px;padding:.75rem 1.5rem;border-radius:var(--border-radius-md);font-size:.95rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth);border:none;white-space:nowrap}.done-btn-primary{background:var(--color-accent-gradient);color:#fff!important;box-shadow:0 4px 10px #23086033}.done-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.done-btn-secondary{background:#fff;color:var(--slate-600)!important;border:1px solid var(--slate-200)}.done-btn-secondary:hover{background-color:var(--slate-100);color:var(--slate-900)!important}.continue-btn{background:var(--color-accent-gradient);color:#fff!important;border:none;padding:.75rem 2rem;border-radius:var(--border-radius-md);font-size:.95rem!important;font-weight:600;cursor:pointer;transition:var(--transition-smooth);box-shadow:0 4px 10px #23086033;width:max-content!important}.continue-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.continue-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed!important;box-shadow:none!important}.service-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.5rem;padding:0;width:100%}.skeleton-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;height:180px;display:flex;flex-direction:column;justify-content:space-between}.skeleton{background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0,#f1f5f9 75%);background-size:200% 100%;animation:loading-shimmer 1.5s infinite linear;border-radius:4px}@keyframes loading-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-icon{width:48px;height:48px;border-radius:var(--border-radius-md)}.skeleton-title{height:20px;width:60%;margin-bottom:.5rem}.skeleton-price{height:20px;width:30%}.skeleton-duration{height:12px;width:25%;margin-top:.25rem}.skeleton-description{height:14px;width:85%}.skeleton-badge{height:28px;width:120px;border-radius:20px}.time-slot-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;width:100%}.skeleton-time-slot{height:42px;border-radius:var(--border-radius-md);background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0,#f1f5f9 75%);background-size:200% 100%;animation:loading-shimmer 1.5s infinite linear;border:1px solid var(--slate-100)}@media screen and (max-width: 475px){.done-actions{flex-direction:column}.done-btn{max-width:none;width:100%}.main_header{padding:1rem}.header-title h1{font-size:1.25rem}.back-btn{padding:.5rem .8rem}.back-btn span{display:none}.main_body{padding:15px}.services-grid{grid-template-columns:1fr;gap:1rem}.staff-list{grid-template-columns:1fr!important;gap:.85rem!important}.service-card,.service-card-selected{min-height:auto}.main_container{flex-direction:column;gap:1.5rem}.details_container{gap:1.5rem}.details_container>.d-flex{flex-direction:column;gap:1.5rem}.details_container>.d-flex>div{width:100%!important}.booking-summary-card{padding:1.25rem}.summary-title{font-size:1.15rem}.total-row .summary-label{font-size:1.1rem}.total-row .summary-value{font-size:1.3rem}.main_footer{padding:1rem}.continue-btn{padding:.75rem 1.5rem}}h1{font-size:24px!important;font-weight:600!important}.wiz-container{width:100%;max-width:1120px}.wizard-banner{border-radius:var(--border-radius-lg);padding:1.125rem 1.5rem;background:var(--color-accent-gradient);box-shadow:var(--shadow-sm)}.wizard-banner-title{font-size:1.1rem;font-weight:700;color:#fff!important}.wizard-banner-desc{font-size:.85rem;line-height:1.5;color:#ffffffd9!important;padding-top:.2rem;max-width:520px}.sub-step-tabs{display:flex;background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);overflow:hidden}.sub-step-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;border:none;background:#fff;padding:.85rem 0;font-size:.85rem;font-weight:600;color:var(--slate-500)!important;cursor:pointer;border-bottom:2px solid transparent;transition:var(--transition-smooth)}.sub-step-tab.active{color:var(--slate-900)!important;border-bottom-color:var(--color-primary);background:var(--slate-50)}.sub-step-tab.locked{color:var(--slate-300)!important;cursor:not-allowed}.sub-step-dot{width:20px;height:20px;border-radius:50%;background:var(--slate-200);color:var(--slate-500)!important;font-size:.7rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.sub-step-tab.active .sub-step-dot{background:var(--color-accent-gradient);color:#fff!important}.sub-step-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:.85rem 1.25rem;box-shadow:var(--shadow-sm)}.sub-step-footer .sub-back-btn{width:auto;flex:0 0 auto;height:40px;font-size:.85rem;font-weight:600;color:var(--slate-600)!important;background:none;border:1.5px solid var(--slate-200);padding:0 18px;border-radius:var(--border-radius-md);cursor:pointer;transition:var(--transition-smooth)}.sub-step-footer .sub-back-btn:hover:not(:disabled){color:var(--slate-900)!important;background-color:var(--slate-100)}.sub-step-footer .sub-back-btn:disabled{color:var(--slate-300)!important;cursor:not-allowed}.sub-step-footer .sub-chosen-label{width:auto;flex:1 1 auto;font-size:.8rem;color:var(--slate-500)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;text-align:center}.sub-step-footer .sub-next-btn{width:auto;flex:0 0 auto;height:40px;background:var(--color-accent-gradient);color:#fff!important;border:none;padding:0 22px;border-radius:var(--border-radius-md);font-size:.85rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth)}.sub-step-footer .sub-next-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.sub-step-footer .sub-next-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed!important;box-shadow:none!important}.single-grid{display:grid;grid-template-columns:1fr 360px;gap:1.5rem;align-items:start}.single-left{display:flex;flex-direction:column;gap:1.5rem}.single-right{align-self:flex-start;position:sticky;top:10px}.week-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px}.week-arrows{display:flex;gap:8px}.week-arrow-btn{width:34px;height:34px;border-radius:8px;border:1px solid var(--slate-200);background:#fff;color:var(--slate-700)!important;cursor:pointer;display:flex;align-items:center;justify-content:center}.week-arrow-btn:disabled{color:var(--slate-300)!important;cursor:not-allowed}.week-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}.week-day{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:.6rem .25rem;cursor:pointer;transition:var(--transition-smooth);text-align:center}.week-day:hover{border-color:var(--slate-400)}.week-day.selected{background:var(--color-accent-gradient);border-color:transparent}.week-day.selected .week-day-dow,.week-day.selected .week-day-num{color:#fff!important}.week-day-dow{font-size:.75rem;font-weight:600;color:var(--slate-500)!important;text-transform:uppercase}.week-day-num{font-size:1rem;font-weight:700;color:var(--slate-900)!important;margin-top:2px}.booking-for-line{font-size:.9rem;color:var(--slate-600)!important;padding:.85rem 1rem;background:var(--slate-50);border-radius:var(--border-radius-md);margin-bottom:.5rem}.booking-for-line strong{color:var(--slate-900)!important}.shipping-info{border-radius:10px;padding:20px;margin-bottom:12px;border:1px solid var(--slate-200);box-shadow:var(--shadow-sm)}.address-info{margin-bottom:0}.address-name{font-weight:700;margin-bottom:8px;color:var(--slate-900)!important}.address-details{color:var(--slate-500)!important;margin-bottom:8px}.mobile-number{font-weight:700;color:var(--slate-900)!important;font-size:15px}.change-address-btn{font-size:.85rem!important;font-weight:700!important;padding:10px;background:#fff;border:1px solid var(--slate-200);border-radius:8px;color:var(--slate-900)!important;cursor:pointer;transition:var(--transition-smooth)}.change-address-btn:hover{border-color:var(--color-primary);color:var(--color-primary)!important}.addLinks{padding:14px;border:1px dashed var(--slate-300);display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:8px;color:var(--slate-500)!important;margin-bottom:12px}.addLinks:hover{border-color:var(--color-primary);color:var(--color-primary)!important}.design-row{display:flex;gap:13px;align-items:center;padding-bottom:1rem}.design-thumb{width:56px;height:56px;border-radius:8px;background:var(--slate-100);flex:none}.design-info{flex:1}.design-name{font-size:13.5px;color:var(--slate-900)!important;line-height:1.35}.design-price{font-size:13.5px;font-weight:600;color:var(--slate-900)!important;margin-top:3px}.add-more-btn{width:100%;height:44px;border:1.5px dashed var(--slate-300);border-radius:8px;background:none;color:var(--color-primary)!important;font-size:13px;font-weight:600;cursor:pointer;margin-bottom:1rem}.summary-divider{height:1px;background:var(--slate-100);margin-bottom:1rem}.summary-line{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.free-label{font-size:13.5px;font-weight:600;color:var(--color-success)!important}.footnote{font-size:11.5px;line-height:1.5;color:var(--slate-500)!important;text-align:center;margin:.75rem 0 0}.review-wrap{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:16px}.review-card{border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);overflow:hidden}.review-actions{display:flex;gap:12px}.review-actions .review-back-btn{flex:1;height:48px;border:1.5px solid var(--slate-200);border-radius:var(--border-radius-md);background:#fff;color:var(--slate-600)!important;font-size:.9rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth)}.review-actions .review-back-btn:hover{color:var(--slate-900)!important;background-color:var(--slate-100)}.review-actions .review-confirm-btn{flex:1;height:48px;border:none;border-radius:var(--border-radius-md);background:var(--color-accent-gradient);color:#fff!important;font-size:.9rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth)}.review-actions .review-confirm-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.review-actions .review-confirm-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed!important;box-shadow:none!important}.review-header{padding:14px 18px;background:var(--slate-50);border-bottom:1px solid var(--slate-100);font-size:14.5px;font-weight:700;color:var(--slate-900)!important}.review-row{display:flex;justify-content:space-between;gap:16px;padding:12px 18px;border-bottom:1px solid var(--slate-100);font-size:13.5px}.review-row:last-child{border-bottom:none}.review-k{color:var(--slate-500)!important;flex-shrink:0}.review-v{color:var(--slate-900)!important;font-weight:500;text-align:right}@media screen and (max-width: 900px){.single-grid{grid-template-columns:1fr}.single-right{position:static}}@media screen and (max-width: 475px){.week-strip{gap:6px}}\n"] }]
|
|
26715
|
+
args: [{ selector: 'simpo-book-appointment', standalone: true, imports: [CommonModule, MatIcon, MatIconModule, FormsModule, MatDialogModule, ToastModule, HoverDirective, HoverElementsComponent, BackgroundDirective], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n [showTransformOptions]=\"screenWidth < 475 ? 'translateY(-100%)' : ''\"></p-toast>\n<section class=\"main_section\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\n [simpoBackground]=\"backgroundInfo\" [style.--color-accent-gradient]=\"accentColor\">\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div class=\"main_body w-100 d-flex justify-content-center\">\n <div class=\"wiz-container\">\n\n <ng-container *ngIf=\"step === 'form'\">\n <div class=\"single-grid\">\n <div class=\"single-left\">\n\n <div class=\"wizard-banner\" [id]=\"data?.id\" [simpoBackground]=\"backgroundInfo\" [style.--color-accent-gradient]=\"accentColor\">\n <div class=\"wizard-banner-title\">{{bannerTitle}}</div>\n <div class=\"wizard-banner-desc\">{{bannerDesc}}</div>\n </div>\n\n <div class=\"sub-step-tabs\">\n <button type=\"button\" class=\"sub-step-tab\" *ngFor=\"let s of subSteps; trackBy: trackBySubStepKey\"\n [class.active]=\"s.active\" [class.locked]=\"s.locked\" [disabled]=\"s.locked\" (click)=\"s.go()\">\n <span class=\"sub-step-dot\">{{s.num}}</span>\n {{s.label}}\n </button>\n </div>\n\n <div class=\"sub-step-content\">\n <ng-container *ngIf=\"subStep === 'date'\">\n <div class=\"section-card card\">\n <div class=\"week-header\">\n <div>\n <h3 class=\"section-title mb-0\">Select a Date</h3>\n <p class=\"subtitle mb-0\">{{weekRangeLabel}}</p>\n </div>\n <div class=\"week-arrows\">\n <button type=\"button\" class=\"week-arrow-btn\" (click)=\"prevWeek()\" [disabled]=\"weekOffset <= 0\">\n <mat-icon>chevron_left</mat-icon>\n </button>\n <button type=\"button\" class=\"week-arrow-btn\" (click)=\"nextWeek()\" [disabled]=\"weekOffset >= maxWeekOffset\">\n <mat-icon>chevron_right</mat-icon>\n </button>\n </div>\n </div>\n <div class=\"week-strip\">\n <button type=\"button\" class=\"week-day\" *ngFor=\"let d of weekDays\" [class.selected]=\"d.selected\"\n (click)=\"pickDay(d)\">\n <div class=\"week-day-dow\">{{d.dow}}</div>\n <div class=\"week-day-num\">{{d.num}}</div>\n </button>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"subStep === 'time'\">\n <div class=\"section-card card\">\n <h3 class=\"section-title mb-0\">Select a Time</h3>\n <p class=\"subtitle\" *ngIf=\"selectedDateStr\">Available slots for {{selectedDateStr}}</p>\n <p class=\"subtitle mb-0\" *ngIf=\"!selectedDateStr\">Pick a date to see available times.</p>\n <div class=\"time-slot-grid overflow-scroll\" *ngIf=\"selectedDateStr\">\n <ng-container *ngIf=\"!slotsLoading; else slotsLoadingTpl\">\n <div class=\"time-slot rounded-2\" *ngFor=\"let time of slots\" [class.selected]=\"time.selected\"\n (click)=\"selectSlot(time)\">{{time?.value}}</div>\n <p class=\"mb-0\" *ngIf=\"slots.length === 0\">No slots available for this date.</p>\n </ng-container>\n <ng-template #slotsLoadingTpl>\n <p class=\"mb-0\">Loading available times...</p>\n </ng-template>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"subStep === 'details'\">\n <div class=\"section-card card\">\n <h3 class=\"section-title\">Booking Details</h3>\n <div class=\"booking-for-line\">\n Booking for <strong>{{userDetails?.contact?.name}}</strong>\n <ng-container *ngIf=\"userDetails?.contact?.mobile\"> \u00B7 {{userDetails?.contact?.mobile}}</ng-container>\n <ng-container *ngIf=\"userDetails?.contact?.email\"> \u00B7 {{userDetails?.contact?.email}}</ng-container>\n </div>\n\n <ng-container *ngIf=\"mode === 'HOME_VISIT'\">\n <p class=\"policies-title mt-3 mb-2\" style=\"font-size:1rem;\">Shipping Address</p>\n\n <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\n <div class=\"address-info\">\n <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\n <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\n {{defaultAddress?.stateName}}</div>\n <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\n </div>\n </div>\n <button type=\"button\" class=\"change-address-btn w-100\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">\n CHANGE OR ADD ADDRESS\n </button>\n\n <div class=\"addLinks\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\n <mat-icon>add</mat-icon>\n <span class=\"ms-2\">Add an address</span>\n </div>\n\n <div class=\"mb-0 mt-3\">\n <label class=\"form-label d-flex align-items-center\">Instructions (optional)</label>\n <textarea class=\"form-control form-textarea rounded-2\" [(ngModel)]=\"instructions\"></textarea>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n\n <div class=\"sub-step-footer\">\n <button type=\"button\" class=\"sub-back-btn\" [disabled]=\"subBackOff\" (click)=\"subBack()\">Back</button>\n <div class=\"sub-chosen-label\">{{subChosenLabel}}</div>\n <button type=\"button\" class=\"sub-next-btn\" *ngIf=\"subStep !== 'details'\" [disabled]=\"subNextOff\" (click)=\"subNext()\">Next</button>\n </div>\n </div>\n\n <div class=\"single-right section-card card\">\n <h3 class=\"section-title\">Your Shortlisted Designs</h3>\n <div class=\"design-row\" *ngFor=\"let it of productCartItems\">\n <div class=\"design-thumb\"></div>\n <div class=\"design-info\">\n <div class=\"design-name\">{{it.itemName}}</div>\n <div class=\"design-price\">\u20B9{{(it.sellingPrice ?? it.price ?? 0) * (it.quantity ?? 1)}}</div>\n </div>\n </div>\n <button type=\"button\" class=\"add-more-btn\" (click)=\"goToListing()\">+ Add More Designs</button>\n\n <div class=\"summary-divider\"></div>\n\n <div class=\"summary-line\" *ngIf=\"mode !== 'HOME_VISIT' || homeVisitCharge <= 0\">\n <div class=\"summary-label\">Service:</div>\n <div class=\"free-label\">FREE</div>\n </div>\n <div class=\"summary-line\" *ngIf=\"mode === 'HOME_VISIT' && homeVisitCharge > 0\">\n <div class=\"summary-label\">Home visit charge</div>\n <div class=\"summary-value\">\u20B9{{homeVisitCharge}}</div>\n </div>\n\n <button class=\"continue-btn w-100 mt-2\" [disabled]=\"invalid()\" (click)=\"goToReview()\">Review Booking</button>\n <p class=\"footnote\">You will review everything on the next screen before it is confirmed.</p>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"step === 'review'\">\n <div class=\"review-wrap\">\n <div class=\"review-card card\">\n <div class=\"review-header\">Review your booking</div>\n <div class=\"review-row\" *ngFor=\"let rc of reviewRows\">\n <div class=\"review-k\">{{rc.k}}</div>\n <div class=\"review-v\">{{rc.v}}</div>\n </div>\n </div>\n <div class=\"review-actions\">\n <button type=\"button\" class=\"review-back-btn\" (click)=\"backToForm()\">Back & edit</button>\n <button type=\"button\" class=\"review-confirm-btn\" (click)=\"confirmBooking()\" [disabled]=\"isProcessing\">\n {{isProcessing ? 'Please wait...' : (mode === 'HOME_VISIT' ? 'Confirm Home Visit' : 'Confirm Video Call')}}\n </button>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"step === 'done'\">\n <div class=\"booking-confirmation\">\n <div class=\"success-icon\">\n <div class=\"checkmark-circle\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/881293c1758695578518success.gif\"\n class=\"w-100 h-100\" *ngIf=\"apiStatus\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/325000c1758695564518fail.gif\"\n class=\"w-100 h-100\" *ngIf=\"!apiStatus\">\n </div>\n </div>\n\n <div class=\"confirmation-content\">\n <h1 class=\"confirmation-title\">{{apiStatus ? 'Booking Confirmed!' : 'Booking Failed'}}</h1>\n <p class=\"confirmation-message\">\n {{apiStatus ? 'Your appointment has been successfully booked.':'Failed to book your appointment. Please\n try again later'}}\n </p>\n\n <div class=\"video-call-link-card d-flex align-items-center justify-content-center\" *ngIf=\"apiStatus && mode === 'VIDEO_CALL' && bookingGroup?.videoCallLink\">\n <div class=\"details-card\">\n <h3 class=\"details-title\">Your Video Call Link</h3>\n <a [href]=\"bookingGroup.videoCallLink\" target=\"_blank\">{{bookingGroup.videoCallLink}}</a>\n </div>\n </div>\n\n <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus\">\n <div class=\"details-card\">\n <h3 class=\"details-title\">Appointment Details</h3>\n <div class=\"details-row\">\n <span class=\"detail-label\">{{productCartItems.length ? 'Products' : (mode === 'HOME_VISIT' ? 'Home Visit' : 'Video Call')}}</span>\n <span class=\"detail-value\">{{selectedDateStr}} at {{selectedSlot?.value ?? 'N/A'}}</span>\n </div>\n </div>\n </div>\n\n <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus && bookingTotal > 0\">\n <div class=\"details-card\">\n <h3 class=\"details-title\">Payment</h3>\n <div class=\"details-row\" *ngIf=\"mode === 'HOME_VISIT' && homeVisitCharge > 0\">\n <span class=\"detail-label\">Home visit charge</span>\n <span class=\"detail-value\">\u20B9{{homeVisitCharge}}</span>\n </div>\n <div class=\"details-row\">\n <span class=\"detail-label\">Total</span>\n <span class=\"detail-value\">\u20B9{{bookingTotal}}</span>\n </div>\n <div class=\"details-row\">\n <span class=\"detail-label\">Paid</span>\n <span class=\"detail-value\">\u20B9{{bookingPaid}}</span>\n </div>\n <div class=\"details-row\" *ngIf=\"bookingDue > 0\">\n <span class=\"detail-label\">Due</span>\n <span class=\"detail-value\">\u20B9{{bookingDue}}</span>\n </div>\n </div>\n </div>\n\n <div class=\"done-actions d-flex align-items-center justify-content-center\" *ngIf=\"apiStatus\">\n <button type=\"button\" class=\"done-btn done-btn-primary\" (click)=\"goToMyBookings()\">View my bookings</button>\n <button type=\"button\" class=\"done-btn done-btn-secondary\" (click)=\"goToListing()\">Keep shopping</button>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n</section>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap\";mat-icon{font-family:Material Icons!important}:host{--font-sans: \"Outfit\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;--slate-50: #f8fafc;--slate-100: #f1f5f9;--slate-200: #e2e8f0;--slate-300: #cbd5e1;--slate-400: #94a3b8;--slate-500: #64748b;--slate-600: #475569;--slate-700: #334155;--slate-800: #1e293b;--slate-900: #0f172a;--color-primary: #230860;--color-secondary: #00b6ff;--color-accent-gradient: linear-gradient(135deg, #230860 0%, #00b6ff 100%);--color-success: #10b981;--color-success-bg: #ecfdf5;--color-error: #ef4444;--color-error-bg: #fef2f2;--border-radius-sm: 8px;--border-radius-md: 12px;--border-radius-lg: 16px;--border-radius-xl: 24px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .05), 0 2px 4px -2px rgba(0, 0, 0, .05);--shadow-lg: 0 10px 15px -3px rgba(35, 8, 96, .05), 0 4px 6px -4px rgba(35, 8, 96, .05);--shadow-xl: 0 20px 25px -5px rgba(35, 8, 96, .08), 0 8px 10px -6px rgba(35, 8, 96, .08);--transition-smooth: all .3s cubic-bezier(.4, 0, .2, 1);--transition-bounce: all .4s cubic-bezier(.175, .885, .32, 1.275)}*{box-sizing:border-box;font-family:var(--font-sans)}.main_section{position:relative;height:100vh;background-color:var(--slate-50);display:flex;flex-direction:column;overflow:hidden}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.main_header{padding:15px;background:#fff;border-bottom:1px solid var(--slate-100);flex-shrink:0;box-shadow:0 2px 8px #00000003}.header{display:flex;align-items:center;justify-content:space-between}.back-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem 1.2rem;border-radius:var(--border-radius-md);background:var(--slate-50);border:1px solid var(--slate-200);color:var(--slate-700)!important;transition:var(--transition-smooth);font-weight:500;font-size:.9rem;cursor:pointer}.back-btn mat-icon{font-size:18px!important;width:18px!important;height:18px!important;color:var(--slate-700)!important;display:flex;align-items:center;justify-content:center}.back-btn:hover{background:var(--slate-100);transform:translate(-3px);color:var(--slate-900)!important}.header-title{flex-grow:1;text-align:right}.header-title h1{font-size:1.5rem;font-weight:700;margin-bottom:.2rem;color:var(--slate-900)!important;letter-spacing:-.025em}.header-title p{color:var(--slate-500)!important;font-size:.9rem;font-weight:500;margin-bottom:0}.progress-bar{width:100%;height:6px;background-color:var(--slate-100);margin-top:3px;border-radius:10px;overflow:hidden;position:relative}.progress-fill{height:100%;background:var(--color-accent-gradient);border-radius:10px;transition:width .5s cubic-bezier(.4,0,.2,1);position:relative}.progress-fill:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,#fff0,#ffffff4d,#fff0);animation:shimmer 2s infinite linear}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.main_body{flex-grow:1;overflow-y:auto;padding:10px;display:flex;justify-content:center;background:var(--slate-50)}.w-60{width:100%;max-width:800px}.service_section,.location_section,.staff-listing,.date_section,.contact_section,.payment_section,.booking-confirmation{animation:slideUp .5s cubic-bezier(.16,1,.3,1) forwards}@keyframes slideUp{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}h2{font-size:1.5rem;font-weight:700;color:var(--slate-900)!important;letter-spacing:-.02em;margin-bottom:.3rem}p.subtitle,.service-selection p,.location_section p,.staff-subtitle,.datetime-subtitle,.contact-subtitle,.payment-subtitle{color:var(--slate-500)!important;font-size:13px;margin-bottom:2rem}.services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.5rem;padding-bottom:2rem}.service-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:180px}.service-card:hover{border-color:var(--slate-400);transform:translateY(-4px);box-shadow:var(--shadow-lg)}.service-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:180px;transform:translateY(-2px)}.service-card-selected:before,.location-card-selected:before{content:\"\\2713\";position:absolute;top:-10px;right:-10px;background:var(--color-accent-gradient);color:#fff!important;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;box-shadow:0 4px 8px #2308604d;animation:popIn .3s cubic-bezier(.175,.885,.32,1.275);z-index:10}@keyframes popIn{0%{transform:scale(0)}to{transform:scale(1)}}.service-header{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1rem}.service-icon{width:48px;height:48px;border-radius:var(--border-radius-md);background-color:var(--slate-100);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition-smooth)}.service-icon mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:var(--color-primary)!important}.service-card-selected .service-icon{background:var(--slate-900)}.service-card-selected .service-icon mat-icon{color:#fff!important}.service-info{flex-grow:1}.service-title{font-size:1.15rem;font-weight:700;color:var(--slate-900)!important;line-height:1.3;margin-bottom:.2rem}.service-price{font-size:1.25rem;font-weight:800;color:var(--slate-900)!important;text-align:right}.service-duration{font-size:.8rem;color:var(--slate-500)!important;font-weight:600;text-align:right;margin-top:.1rem}.service-description{color:var(--slate-600)!important;font-size:.9rem;line-height:1.5;margin-bottom:1.25rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.home-visit{align-self:flex-start;display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:600;color:var(--slate-700)!important;border:1px solid var(--slate-200);padding:.35rem .75rem;border-radius:20px;background-color:var(--slate-50);transition:var(--transition-smooth)}.home-visit img{width:14px;height:14px}.home-visit:before{content:\"\";display:inline-block;width:6px;height:6px;border-radius:50%;background-color:var(--color-success);box-shadow:0 0 #10b98166;animation:pulseGlow 1.8s infinite}@keyframes pulseGlow{0%{box-shadow:0 0 #10b981b3}70%{box-shadow:0 0 0 6px #10b98100}to{box-shadow:0 0 #10b98100}}.location-list{display:flex;flex-direction:column;gap:1.25rem;padding-bottom:2rem}.location-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm)}.location-card:hover{border-color:var(--slate-400);transform:translateY(-2px);box-shadow:var(--shadow-md)}.location-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);transform:translateY(-1px)}.location-content{display:flex;align-items:center}.location-info{display:flex;align-items:center;gap:1.25rem;width:100%}.location-icon{width:52px;height:52px;background-color:var(--slate-100);border-radius:var(--border-radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition-smooth)}.location-icon img{width:28px;height:28px}.location-card-selected .location-icon{background:var(--slate-900)}.location-details{flex-grow:1}.location-details h3{font-size:1.15rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:.3rem}.location-details p{font-size:.9rem;color:var(--slate-500)!important;font-weight:450;line-height:1.4;margin-bottom:0}.search-container{width:100%;margin-bottom:1.25rem}.search-input-wrapper{width:100%;background-color:var(--slate-100);border:1.5px solid var(--slate-200);border-radius:var(--border-radius-md);padding:.6rem 1rem;transition:var(--transition-smooth)}.search-input-wrapper:focus-within{background-color:#fff;border-color:var(--color-primary);box-shadow:0 0 0 3px #23086014}.search-input{font-size:.95rem;font-weight:500;color:var(--slate-900)!important;background:transparent;outline:none;width:100%}.search-input::placeholder{color:var(--slate-400)}.search-icon{color:var(--slate-400)!important;font-size:20px!important;width:20px!important;height:20px!important}.clear-icon{color:var(--slate-400)!important;font-size:18px!important;width:18px!important;height:18px!important;transition:var(--transition-smooth)}.clear-icon:hover{color:var(--slate-600)!important}.staff-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem;max-height:48vh;overflow-y:auto;padding-right:.5rem;padding-bottom:1rem}.staff-list::-webkit-scrollbar{width:6px}.staff-list::-webkit-scrollbar-track{background:var(--slate-50);border-radius:4px}.staff-list::-webkit-scrollbar-thumb{background:var(--slate-200);border-radius:4px}.staff-list::-webkit-scrollbar-thumb:hover{background:var(--slate-300)}.staff-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:.9rem 1.25rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm);margin-bottom:0!important}.staff-card:hover{border-color:var(--slate-300);transform:translateY(-2px);box-shadow:var(--shadow-md)}.staff-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:.9rem 1.25rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);transform:translateY(-1px);margin-bottom:0!important}.staff-avatar{width:48px;height:48px;background:var(--color-accent-gradient);font-size:.95rem;font-weight:700;color:#fff!important;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 10px #2308601a;letter-spacing:.5px;transition:var(--transition-smooth)}.staff-card-selected .staff-avatar{transform:scale(1.05)}.staff-name{font-size:1.05rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:.2rem;letter-spacing:-.015em}.staff-specialty{font-size:.8rem;color:var(--slate-500)!important;font-weight:600;margin-bottom:0;text-transform:uppercase;letter-spacing:.05em}.selection-indicator{display:flex;align-items:center;justify-content:center;margin-left:auto;padding-left:1rem}.checkmark-circle-mini{width:24px;height:24px;border:2px solid var(--slate-300);border-radius:50%;background-color:#fff;transition:var(--transition-bounce);color:#fff!important}.checkmark-circle-mini.selected{background:var(--color-accent-gradient);border-color:transparent;box-shadow:0 3px 8px #23086040}.checkmark-circle-mini mat-icon{font-size:14px!important;width:14px!important;height:14px!important;color:#fff!important;font-weight:800!important;display:flex;align-items:center;justify-content:center}.main_container{display:flex;gap:2rem;margin-bottom:2rem}.section-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;box-shadow:var(--shadow-sm);height:100%}.section-title{font-size:1.1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:10px!important;letter-spacing:-.01em}.time_selection{max-height:420px;display:flex;flex-direction:column}.time_selection .row{flex-grow:1;overflow-y:auto;padding-right:.25rem;margin-top:10px}.time-slot{background:#fff;border:1px solid var(--slate-200);font-size:.75rem;font-weight:600;color:var(--slate-800)!important;height:34px;padding:0 4px;border-radius:var(--border-radius-md);cursor:pointer;transition:var(--transition-smooth);text-align:center;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}.time-slot:hover{border-color:var(--slate-400);transform:translateY(-2px);box-shadow:var(--shadow-md);background-color:var(--slate-50)}.time-slot.selected{background:var(--color-accent-gradient);border-color:transparent;color:#fff!important;box-shadow:0 4px 12px #23086033}.form-section{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.75rem;box-shadow:var(--shadow-sm)}.form-label{font-size:.85rem;font-weight:600;color:var(--slate-700)!important;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.05em}.required-asterisk{color:var(--color-error);margin-left:2px}.form-control,.form-input,.form-textarea{width:100%;background-color:var(--slate-50);border:1px solid var(--slate-200);color:var(--slate-900)!important;font-size:.95rem;font-weight:500;padding:.75rem 1rem;border-radius:var(--border-radius-md);transition:var(--transition-smooth);outline:none}.form-control:focus,.form-input:focus,.form-textarea:focus{background-color:#fff;border-color:var(--color-primary);box-shadow:0 0 0 3px #2308601a}.form-textarea{min-height:100px;resize:vertical}.policies-container{background-color:#fff;border:1px solid var(--slate-200);padding:1.75rem;border-radius:var(--border-radius-lg);margin-top:1.5rem;box-shadow:var(--shadow-sm)}.policies-title{font-size:1.1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:1.25rem}.policy-item{background-color:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:1rem 1.25rem;cursor:pointer;transition:var(--transition-smooth);display:flex;justify-content:space-between;align-items:center}.policy-item:hover{background-color:var(--slate-100);border-color:var(--slate-300)}.policy-title{font-size:.95rem;font-weight:600;color:var(--slate-800)!important}.policy-arrow mat-icon{color:var(--slate-500)!important;transition:var(--transition-smooth)}.cancellation_policies{background-color:var(--slate-50);padding:1rem 1.5rem;border-left:3px solid var(--color-primary);border-radius:0 0 var(--border-radius-md) var(--border-radius-md);margin-top:-4px;margin-bottom:1rem;font-size:.9rem;color:var(--slate-600)!important;line-height:1.5}.acceptance-section{display:flex;align-items:center;gap:.75rem;margin-top:1.5rem}.custom-checkbox{width:20px;height:20px;border:2px solid var(--slate-300);border-radius:6px;cursor:pointer;transition:var(--transition-smooth);position:relative;appearance:none;background-color:#fff;outline:none}.custom-checkbox:checked{background:var(--color-accent-gradient);border-color:transparent}.custom-checkbox:checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff!important;font-size:.75rem;font-weight:800}.acceptance-text{font-size:.95rem;color:var(--slate-700)!important;font-weight:500;-webkit-user-select:none;user-select:none;line-height:1.4}.booking-summary-card{background-color:#fff;border:1px solid var(--slate-200);padding:2rem;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);position:relative}.booking-summary-card:after{content:\"\";position:absolute;bottom:-1px;left:0;right:0;height:10px;background-image:radial-gradient(circle,white 4px,transparent 5px);background-size:12px 12px;background-position:0 0;z-index:2}.summary-title{font-size:1.25rem;font-weight:700;color:var(--slate-900)!important;border-bottom:2px dashed var(--slate-200);padding-bottom:1rem;margin-bottom:1.5rem;text-align:center}.summary-row{display:flex;justify-content:space-between;align-items:center;padding:.85rem 0;border-bottom:1px solid var(--slate-100)}.summary-label{font-size:.95rem;color:var(--slate-500)!important;font-weight:500}.summary-value{font-size:.95rem;color:var(--slate-900)!important;font-weight:600;text-align:right}.total-row{margin-top:1rem;padding-top:1.25rem;border-top:2px dashed var(--slate-200);border-bottom:none}.total-row .summary-label{font-size:1.25rem;font-weight:700;color:var(--slate-900)!important}.total-row .summary-value{font-size:1.5rem;font-weight:800;color:var(--color-primary)!important}.booking-confirmation{background:#fff;border:1px solid var(--slate-200);padding:3rem 2rem;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;align-items:center;text-align:center;max-width:500px;margin:0 auto}.success-icon{margin-bottom:1.5rem}.checkmark-circle{width:96px;height:96px;display:flex;align-items:center;justify-content:center}.confirmation-title{font-size:1.5rem;font-weight:800;color:var(--slate-900)!important;margin-bottom:.5rem}.confirmation-message{font-size:1rem;color:var(--slate-500)!important;line-height:1.6;margin-bottom:2rem;font-weight:450}.details-card{background-color:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:1.5rem;width:100%;margin-bottom:2rem;text-align:left}.details-title{font-size:1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.05em}.details-row{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px dashed var(--slate-200)}.details-row:last-child{border-bottom:none}.detail-label{font-size:.85rem;color:var(--slate-500)!important;font-weight:500}.detail-value{font-size:.9rem;color:var(--slate-900)!important;font-weight:600}.done-actions{display:flex;gap:12px;width:100%}.done-btn{flex:1;max-width:220px;padding:.75rem 1.5rem;border-radius:var(--border-radius-md);font-size:.95rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth);border:none;white-space:nowrap}.done-btn-primary{background:var(--color-accent-gradient);color:#fff!important;box-shadow:0 4px 10px #23086033}.done-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.done-btn-secondary{background:#fff;color:var(--slate-600)!important;border:1px solid var(--slate-200)}.done-btn-secondary:hover{background-color:var(--slate-100);color:var(--slate-900)!important}.continue-btn{background:var(--color-accent-gradient);color:#fff!important;border:none;padding:.75rem 2rem;border-radius:var(--border-radius-md);font-size:.95rem!important;font-weight:600;cursor:pointer;transition:var(--transition-smooth);box-shadow:0 4px 10px #23086033;width:max-content!important}.continue-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.continue-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed!important;box-shadow:none!important}.service-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.5rem;padding:0;width:100%}.skeleton-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;height:180px;display:flex;flex-direction:column;justify-content:space-between}.skeleton{background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0,#f1f5f9 75%);background-size:200% 100%;animation:loading-shimmer 1.5s infinite linear;border-radius:4px}@keyframes loading-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-icon{width:48px;height:48px;border-radius:var(--border-radius-md)}.skeleton-title{height:20px;width:60%;margin-bottom:.5rem}.skeleton-price{height:20px;width:30%}.skeleton-duration{height:12px;width:25%;margin-top:.25rem}.skeleton-description{height:14px;width:85%}.skeleton-badge{height:28px;width:120px;border-radius:20px}.time-slot-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;width:100%}.skeleton-time-slot{height:42px;border-radius:var(--border-radius-md);background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0,#f1f5f9 75%);background-size:200% 100%;animation:loading-shimmer 1.5s infinite linear;border:1px solid var(--slate-100)}@media screen and (max-width: 475px){.done-actions{flex-direction:column}.done-btn{max-width:none;width:100%}.main_header{padding:1rem}.header-title h1{font-size:1.25rem}.back-btn{padding:.5rem .8rem}.back-btn span{display:none}.main_body{padding:15px}.services-grid{grid-template-columns:1fr;gap:1rem}.staff-list{grid-template-columns:1fr!important;gap:.85rem!important}.service-card,.service-card-selected{min-height:auto}.main_container{flex-direction:column;gap:1.5rem}.details_container{gap:1.5rem}.details_container>.d-flex{flex-direction:column;gap:1.5rem}.details_container>.d-flex>div{width:100%!important}.booking-summary-card{padding:1.25rem}.summary-title{font-size:1.15rem}.total-row .summary-label{font-size:1.1rem}.total-row .summary-value{font-size:1.3rem}.main_footer{padding:1rem}.continue-btn{padding:.75rem 1.5rem}}h1{font-size:24px!important;font-weight:600!important}.wiz-container{width:100%;max-width:1120px}.wizard-banner{border-radius:var(--border-radius-lg);padding:1.125rem 1.5rem;background:var(--color-accent-gradient);box-shadow:var(--shadow-sm)}.wizard-banner-title{font-size:1.1rem;font-weight:700;color:#fff!important}.wizard-banner-desc{font-size:.85rem;line-height:1.5;color:#ffffffd9!important;padding-top:.2rem;max-width:520px}.sub-step-tabs{display:flex;background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);overflow:hidden}.sub-step-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;border:none;background:#fff;padding:.85rem 0;font-size:.85rem;font-weight:600;color:var(--slate-500)!important;cursor:pointer;border-bottom:2px solid transparent;transition:var(--transition-smooth)}.sub-step-tab.active{color:var(--slate-900)!important;border-bottom-color:var(--color-primary);background:var(--slate-50)}.sub-step-tab.locked{color:var(--slate-300)!important;cursor:not-allowed}.sub-step-dot{width:20px;height:20px;border-radius:50%;background:var(--slate-200);color:var(--slate-500)!important;font-size:.7rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.sub-step-tab.active .sub-step-dot{background:var(--color-accent-gradient);color:#fff!important}.sub-step-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:.85rem 1.25rem;box-shadow:var(--shadow-sm)}.sub-step-footer .sub-back-btn{width:auto;flex:0 0 auto;height:40px;font-size:.85rem;font-weight:600;color:var(--slate-600)!important;background:none;border:1.5px solid var(--slate-200);padding:0 18px;border-radius:var(--border-radius-md);cursor:pointer;transition:var(--transition-smooth)}.sub-step-footer .sub-back-btn:hover:not(:disabled){color:var(--slate-900)!important;background-color:var(--slate-100)}.sub-step-footer .sub-back-btn:disabled{color:var(--slate-300)!important;cursor:not-allowed}.sub-step-footer .sub-chosen-label{width:auto;flex:1 1 auto;font-size:.8rem;color:var(--slate-500)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;text-align:center}.sub-step-footer .sub-next-btn{width:auto;flex:0 0 auto;height:40px;background:var(--color-accent-gradient);color:#fff!important;border:none;padding:0 22px;border-radius:var(--border-radius-md);font-size:.85rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth)}.sub-step-footer .sub-next-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.sub-step-footer .sub-next-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed!important;box-shadow:none!important}.single-grid{display:grid;grid-template-columns:1fr 360px;gap:1.5rem;align-items:start}.single-left{display:flex;flex-direction:column;gap:1.5rem}.single-right{align-self:flex-start;position:sticky;top:10px}.week-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px}.week-arrows{display:flex;gap:8px}.week-arrow-btn{width:34px;height:34px;border-radius:8px;border:1px solid var(--slate-200);background:#fff;color:var(--slate-700)!important;cursor:pointer;display:flex;align-items:center;justify-content:center}.week-arrow-btn:disabled{color:var(--slate-300)!important;cursor:not-allowed}.week-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}.week-day{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:.6rem .25rem;cursor:pointer;transition:var(--transition-smooth);text-align:center}.week-day:hover{border-color:var(--slate-400)}.week-day.selected{background:var(--color-accent-gradient);border-color:transparent}.week-day.selected .week-day-dow,.week-day.selected .week-day-num{color:#fff!important}.week-day-dow{font-size:.75rem;font-weight:600;color:var(--slate-500)!important;text-transform:uppercase}.week-day-num{font-size:1rem;font-weight:700;color:var(--slate-900)!important;margin-top:2px}.booking-for-line{font-size:.9rem;color:var(--slate-600)!important;padding:.85rem 1rem;background:var(--slate-50);border-radius:var(--border-radius-md);margin-bottom:.5rem}.booking-for-line strong{color:var(--slate-900)!important}.shipping-info{border-radius:10px;padding:20px;margin-bottom:12px;border:1px solid var(--slate-200);box-shadow:var(--shadow-sm)}.address-info{margin-bottom:0}.address-name{font-weight:700;margin-bottom:8px;color:var(--slate-900)!important}.address-details{color:var(--slate-500)!important;margin-bottom:8px}.mobile-number{font-weight:700;color:var(--slate-900)!important;font-size:15px}.change-address-btn{font-size:.85rem!important;font-weight:700!important;padding:10px;background:#fff;border:1px solid var(--slate-200);border-radius:8px;color:var(--slate-900)!important;cursor:pointer;transition:var(--transition-smooth)}.change-address-btn:hover{border-color:var(--color-primary);color:var(--color-primary)!important}.addLinks{padding:14px;border:1px dashed var(--slate-300);display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:8px;color:var(--slate-500)!important;margin-bottom:12px}.addLinks:hover{border-color:var(--color-primary);color:var(--color-primary)!important}.design-row{display:flex;gap:13px;align-items:center;padding-bottom:1rem}.design-thumb{width:56px;height:56px;border-radius:8px;background:var(--slate-100);flex:none}.design-info{flex:1}.design-name{font-size:13.5px;color:var(--slate-900)!important;line-height:1.35}.design-price{font-size:13.5px;font-weight:600;color:var(--slate-900)!important;margin-top:3px}.add-more-btn{width:100%;height:44px;border:1.5px dashed var(--slate-300);border-radius:8px;background:none;color:var(--color-primary)!important;font-size:13px;font-weight:600;cursor:pointer;margin-bottom:1rem}.summary-divider{height:1px;background:var(--slate-100);margin-bottom:1rem}.summary-line{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.free-label{font-size:13.5px;font-weight:600;color:var(--color-success)!important}.footnote{font-size:11.5px;line-height:1.5;color:var(--slate-500)!important;text-align:center;margin:.75rem 0 0}.review-wrap{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:16px}.review-card{border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);overflow:hidden}.review-actions{display:flex;gap:12px}.review-actions .review-back-btn{flex:1;height:48px;border:1.5px solid var(--slate-200);border-radius:var(--border-radius-md);background:#fff;color:var(--slate-600)!important;font-size:.9rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth)}.review-actions .review-back-btn:hover{color:var(--slate-900)!important;background-color:var(--slate-100)}.review-actions .review-confirm-btn{flex:1;height:48px;border:none;border-radius:var(--border-radius-md);background:var(--color-accent-gradient);color:#fff!important;font-size:.9rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth)}.review-actions .review-confirm-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.review-actions .review-confirm-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed!important;box-shadow:none!important}.review-header{padding:14px 18px;background:var(--slate-50);border-bottom:1px solid var(--slate-100);font-size:14.5px;font-weight:700;color:var(--slate-900)!important}.review-row{display:flex;justify-content:space-between;gap:16px;padding:12px 18px;border-bottom:1px solid var(--slate-100);font-size:13.5px}.review-row:last-child{border-bottom:none}.review-k{color:var(--slate-500)!important;flex-shrink:0}.review-v{color:var(--slate-900)!important;font-weight:500;text-align:right}@media screen and (max-width: 900px){.single-grid{grid-template-columns:1fr}.single-right{position:static}}@media screen and (max-width: 475px){.week-strip{gap:6px}}\n"] }]
|
|
26560
26716
|
}], ctorParameters: () => [{ type: i2$2.ActivatedRoute }, { type: i2$2.Router }, { type: RestService }, { type: EventsService }, { type: i6$1.MessageService }, { type: StorageServiceService }, { type: BookingProductCartService }, { type: i3$2.MatDialog }], propDecorators: { data: [{
|
|
26561
26717
|
type: Input
|
|
26562
26718
|
}], index: [{
|