simpo-component-library 3.7.8 → 3.8.0
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/cart/cart.component.mjs +3 -3
- package/esm2022/lib/ecommerce/sections/checkout/checkout.component.mjs +55 -11
- package/esm2022/lib/ecommerce/sections/order-details/order-details.component.mjs +33 -4
- package/esm2022/lib/ecommerce/sections/product-desc/product-desc.component.mjs +33 -3
- package/esm2022/lib/services/rest.service.mjs +10 -1
- package/fesm2022/simpo-component-library.mjs +123 -12
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/lib/ecommerce/sections/checkout/checkout.component.d.ts +19 -1
- package/lib/ecommerce/sections/order-details/order-details.component.d.ts +6 -0
- package/lib/ecommerce/sections/product-desc/product-desc.component.d.ts +10 -1
- package/lib/ecommerce/sections/schemes/schemes.component.d.ts +1 -1
- package/lib/sections/banner-carousel/banner-carousel.component.d.ts +1 -1
- package/lib/sections/pricing-section/pricing-section.component.d.ts +1 -1
- package/lib/services/rest.service.d.ts +2 -0
- package/package.json +1 -1
- package/simpo-component-library-3.8.0.tgz +0 -0
- package/simpo-component-library-3.7.8.tgz +0 -0
|
@@ -3173,6 +3173,15 @@ class RestService {
|
|
|
3173
3173
|
return this.http.get(this.BASE_URL +
|
|
3174
3174
|
`ecommerce/store/nearby?pincode=${pincode}&businessId=${this.storage.getItem('businessId')}`);
|
|
3175
3175
|
}
|
|
3176
|
+
getDeliveryEstimate(deliveryPincode, weightKg, cod, orderGrossValue = 0) {
|
|
3177
|
+
const businessId = this.storage.getItem('businessId');
|
|
3178
|
+
return this.http.get(this.BASE_URL +
|
|
3179
|
+
`ecommerce/delivery/shiprocket/delivery-estimate?businessId=${businessId}&deliveryPincode=${deliveryPincode}` +
|
|
3180
|
+
`&weightKg=${weightKg}&cod=${cod}&orderGrossValue=${orderGrossValue}`);
|
|
3181
|
+
}
|
|
3182
|
+
getCustomerOrderDetail(userOrderId, userId) {
|
|
3183
|
+
return this.http.get(this.BASE_URL + `ecommerce/order/customer/${userOrderId}?userId=${userId}`);
|
|
3184
|
+
}
|
|
3176
3185
|
saveImagesToBusinessLibrary(mediaRequest) {
|
|
3177
3186
|
return this.http.post(this.BASE_URL + `admin/library/image/library/save`, mediaRequest);
|
|
3178
3187
|
}
|
|
@@ -11016,7 +11025,7 @@ class CartComponent extends BaseSection {
|
|
|
11016
11025
|
});
|
|
11017
11026
|
}
|
|
11018
11027
|
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 }); }
|
|
11019
|
-
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:
|
|
11028
|
+
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')) : 'Calculated at checkout' }}\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:
|
|
11020
11029
|
//DIRECTIVE
|
|
11021
11030
|
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" }] }); }
|
|
11022
11031
|
}
|
|
@@ -11047,7 +11056,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
11047
11056
|
FeaturedProductsComponent,
|
|
11048
11057
|
MatSpinner,
|
|
11049
11058
|
BookingCartGroupsComponent
|
|
11050
|
-
], 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"] }]
|
|
11059
|
+
], 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')) : 'Calculated at checkout' }}\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"] }]
|
|
11051
11060
|
}], 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: [{
|
|
11052
11061
|
type: Optional
|
|
11053
11062
|
}, {
|
|
@@ -19640,6 +19649,10 @@ class ProductDescComponent extends BaseSection {
|
|
|
19640
19649
|
this.isDescriptionCollapsed = false;
|
|
19641
19650
|
this.isPriceBreakup = false;
|
|
19642
19651
|
this.isDetails = false;
|
|
19652
|
+
this.checkingDeliveryEstimate = false;
|
|
19653
|
+
this.deliveryEstimateChecked = false;
|
|
19654
|
+
this.deliveryEstimate = null;
|
|
19655
|
+
this.deliveryNotServiceable = false;
|
|
19643
19656
|
this.brandPromises = [];
|
|
19644
19657
|
// Whether Try at Home / Video Call are offered is an Appointment-app setting
|
|
19645
19658
|
// (homeVisitProductsEnabled/videoCallProductsEnabled), not a website-settings toggle.
|
|
@@ -20252,6 +20265,31 @@ class ProductDescComponent extends BaseSection {
|
|
|
20252
20265
|
}
|
|
20253
20266
|
onBookAppointment() {
|
|
20254
20267
|
}
|
|
20268
|
+
checkDeliveryEstimate() {
|
|
20269
|
+
if (this.pincode == null || this.pincode.toString().length != 6) {
|
|
20270
|
+
return;
|
|
20271
|
+
}
|
|
20272
|
+
this.checkingDeliveryEstimate = true;
|
|
20273
|
+
this.deliveryEstimateChecked = false;
|
|
20274
|
+
// No dedicated product-weight field exists on the frontend Product model yet - the backend
|
|
20275
|
+
// item already stores one (used by the admin's live-rate flow), so read it defensively off
|
|
20276
|
+
// the raw response rather than widening the typed model for this one call.
|
|
20277
|
+
const weightKg = this.responseData?.weight || 0.5;
|
|
20278
|
+
this.restService.getDeliveryEstimate(this.pincode.toString(), weightKg, true).subscribe({
|
|
20279
|
+
next: (res) => {
|
|
20280
|
+
this.checkingDeliveryEstimate = false;
|
|
20281
|
+
this.deliveryEstimateChecked = true;
|
|
20282
|
+
this.deliveryNotServiceable = false;
|
|
20283
|
+
this.deliveryEstimate = res;
|
|
20284
|
+
},
|
|
20285
|
+
error: () => {
|
|
20286
|
+
this.checkingDeliveryEstimate = false;
|
|
20287
|
+
this.deliveryEstimateChecked = true;
|
|
20288
|
+
this.deliveryNotServiceable = true;
|
|
20289
|
+
this.deliveryEstimate = null;
|
|
20290
|
+
}
|
|
20291
|
+
});
|
|
20292
|
+
}
|
|
20255
20293
|
getStoreDetails() {
|
|
20256
20294
|
if (this.pincode == null || this.pincode.toString().length != 6) {
|
|
20257
20295
|
this.isPinCode = false;
|
|
@@ -20264,6 +20302,7 @@ class ProductDescComponent extends BaseSection {
|
|
|
20264
20302
|
}, (err) => {
|
|
20265
20303
|
this.messageService.add({ severity: 'error', summary: 'Error', detail: err?.error?.message, key: 'Store Locator' });
|
|
20266
20304
|
});
|
|
20305
|
+
this.checkDeliveryEstimate();
|
|
20267
20306
|
}
|
|
20268
20307
|
getEcommerceConfigs() {
|
|
20269
20308
|
this.restService.getEcommerceConfigs().subscribe((res) => {
|
|
@@ -20429,7 +20468,7 @@ class ProductDescComponent extends BaseSection {
|
|
|
20429
20468
|
return currentDate;
|
|
20430
20469
|
}
|
|
20431
20470
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductDescComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: RestService }, { token: CartService }, { token: StorageServiceService }, { token: i6$1.MessageService }, { token: i1.Meta }, { token: i1.Title }, { token: i8$1.MatBottomSheet }, { token: i0.Renderer2 }, { token: i3$2.MatDialog }, { token: AnalyticsService }, { token: BookingProductCartService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
20432
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "reviewComponent", first: true, predicate: CustomerReviewComponent, descendants: true }, { propertyName: "aboveHeight", first: true, predicate: ["aboveHeight"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "imageSection", first: true, predicate: ["imageSection"], descendants: true }, { propertyName: "detailSection", first: true, predicate: ["detailSection"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n <section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\n\n <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\n <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\n </div> -->\n <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [spacingHorizontal]=\"stylesLayout\"\n [simpoLayout]=\"styles?.layout\" #container>\n <!-- <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\"\n (click)=\"routeToHome()\">Home</a> /\n <span>{{ responseData?.name | titlecase }}</span>\n </div> -->\n <div class=\"row m-0 w-100 mt-lg-4 h-auto overflow-visible\" #aboveHeight>\n <div class=\"col-lg-6 col-sm-12 image-section-modern\" #imageSection>\n <div class=\"d-flex flex-column justify-content-start gap-1\">\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\n </div>\n </div>\n <div class=\"col-lg-6 col-sm-12 detail-section-modern \" #detailSection>\n <div class=\"product-hero-card-modern\">\n <ng-container *ngIf=\"isMobile\">\n <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\n </ng-container>\n\n <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\n\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\n </ng-container>\n </div>\n\n\n <ng-container *ngIf=\"ecomConfigs?.deliveryEnabled\">\n <!-- *ngIf=\"ecomConfigs?.deliveryEnabled\" -->\n <ng-container *ngTemplateOutlet=\"DeliverySection\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"ecomConfigs?.storesEnabled\">\n <!-- *ngIf=\"ecomConfigs?.storesEnabled\" -->\n <ng-container *ngTemplateOutlet=\"StoreSection\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"appointmentSettings?.homeVisitProductsEnabled\">\n <!-- *ngIf=\"appointmentSettings?.homeVisitProductsEnabled\" -->\n <ng-container *ngTemplateOutlet=\"TryAtHome\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"appointmentSettings?.videoCallProductsEnabled\">\n <!-- *ngIf=\"appointmentSettings?.videoCallProductsEnabled\" -->\n <ng-container *ngTemplateOutlet=\"videoCallSchedule\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"ecomConfigs?.brandPromiseEnabled\">\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n </ng-container>\n\n\n\n <!-- Moved descriptors to Details tab below -->\n\n <!-- <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\n [innerHTML]=\"responseData.brief\"></div> -->\n <!-- Moved tags to Details tab below -->\n <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\n <!-- <ng-container>\n <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\n </ng-container> -->\n </div>\n </div>\n <!-- Tabs Navigation -->\n <div class=\"product-tabs-container\">\n <ul class=\"tabs-list\">\n <li class=\"tab-item\" [class.active]=\"activeTab == 'Details'\"\n [style.color]=\"activeTab == 'Details' ? styles?.background?.accentColor : ''\"\n [style.borderColor]=\"activeTab == 'Details' ? styles?.background?.accentColor : 'transparent'\"\n (click)=\"changeTab('Details')\">Details</li>\n <li class=\"tab-item\" *ngIf=\"reviewsData\" [class.active]=\"activeTab == 'Reviews'\"\n [style.color]=\"activeTab == 'Reviews' ? styles?.background?.accentColor : ''\"\n [style.borderColor]=\"activeTab == 'Reviews' ? styles?.background?.accentColor : 'transparent'\"\n (click)=\"changeTab('Reviews')\">Reviews</li>\n <li class=\"tab-item\" *ngIf=\"materialBasedPricing\" [class.active]=\"activeTab == 'PriceBreakup'\"\n [style.color]=\"activeTab == 'PriceBreakup' ? styles?.background?.accentColor : ''\"\n [style.borderColor]=\"activeTab == 'PriceBreakup' ? styles?.background?.accentColor : 'transparent'\"\n (click)=\"changeTab('PriceBreakup')\">Price Breakup</li>\n </ul>\n </div>\n\n <!-- Tab Content -->\n <div class=\"tab-content-pane\">\n <div *ngIf=\"activeTab == 'Details'\">\n <!-- Integrated descriptors and tags here -->\n <div class=\"mt-2\">\n <ng-container *ngTemplateOutlet=\"descriptors\"></ng-container>\n </div>\n </div>\n\n <div *ngIf=\"activeTab == 'Reviews'\">\n <ng-container *ngTemplateOutlet=\"ReviewsSection\"></ng-container>\n </div>\n\n <div *ngIf=\"activeTab == 'PriceBreakup'\">\n <div class=\"pb-glass-container mt-2\">\n\n <!-- One card per material \u2014 generic, works for any material type -->\n <ng-container *ngFor=\"let ele of responseData?.materials\">\n <div class=\"pb-glass-card\">\n <div class=\"pb-glass-header\"\n [style.background]=\"styles?.background?.accentColor\"\n [style.color]=\"'#fff'\">\n {{ ele?.materialName | titlecase }}\n </div>\n <div class=\"pb-glass-row\">\n <span class=\"pb-label\">Purity</span>\n <span class=\"pb-value\">{{ ele?.purity }}</span>\n </div>\n <div class=\"pb-glass-row\">\n <span class=\"pb-label\">Net Weight</span>\n <span class=\"pb-value\">{{ ele?.quantity }} {{ ele?.unit | titlecase }}</span>\n </div>\n <div class=\"pb-glass-row\">\n <span class=\"pb-label\">Rate / {{ ele?.unit | titlecase }}</span>\n <span class=\"pb-value\">\u20B9{{ ele?.pricePerUnit | number:'1.2-2' }}</span>\n </div>\n <div class=\"pb-glass-row\">\n <span class=\"pb-label\">Value</span>\n <span class=\"pb-value\">\u20B9{{ (ele?.quantity * ele?.pricePerUnit) | number:'1.2-2' }}</span>\n </div>\n </div>\n </ng-container>\n\n <!-- Making Charges card -->\n <div class=\"pb-glass-card\">\n <div class=\"pb-glass-header\"\n [style.background]=\"styles?.background?.accentColor\"\n [style.color]=\"'#fff'\">\n Making Charges\n </div>\n <!-- <div class=\"pb-glass-row\">\n <span class=\"pb-label\">Net Weight</span>\n <span class=\"pb-value\">{{ responseData?.baseWeight }}</span>\n </div> -->\n <div class=\"pb-glass-row\" *ngIf=\"responseData?.makingChargePercentage && responseData.makingChargePercentage > 0\">\n <span class=\"pb-label\">Making Charge %</span>\n <span class=\"pb-value\">{{ responseData?.makingChargePercentage }}%</span>\n </div>\n <div class=\"pb-glass-row\" *ngIf=\"responseData?.jewelryPriceBreakup?.makingChargeAmount && responseData?.jewelryPriceBreakup?.makingChargeAmount > 0\">\n <span class=\"pb-label\">Value</span>\n <span class=\"pb-value\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}</span>\n </div>\n </div>\n\n <!-- Summary card -->\n <div class=\"pb-summary-card\">\n <div class=\"pb-summary-row\">\n <span>Total Value</span>\n <span>\u20B9{{ responseData?.jewelryPriceBreakup?.priceWithoutTax | number:'1.2-2' }}</span>\n </div>\n <div class=\"pb-summary-row\">\n <span>Tax ({{ responseData?.jewelryPriceBreakup?.taxRef?.taxPercent }}% GST)</span>\n <span>\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}</span>\n </div>\n <div class=\"pb-grand-total\"\n [style.background]=\"styles?.background?.accentColor\"\n [style.color]=\"'#fff'\">\n <span>TOTAL</span>\n <span>\u20B9{{ (responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) | number:'1.2-2' }}</span>\n </div>\n </div>\n\n </div>\n </div>\n </div>\n </section>\n <ng-container *ngIf=\"recentViewItemList?.length\">\n <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"recentViewItemList\"\n [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\n </ng-container>\n <!-- <ng-container *ngIf=\"recentViewItemList?.length\">\n <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\n [isRelatedProduct]=\"true\"></simpo-featured-products>\n </ng-container> -->\n <!-- <ng-container>\n <simpo-customer-review [data]=\"data\"></simpo-customer-review>\n </ng-container> -->\n\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\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 *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n </section>\n</ng-container>\n\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\n<div class=\"mobile-footer\">\n <div class=\"icons\">\n <div (click)=\"goToCart()\">\n <mat-icon>shopping_cart</mat-icon>\n </div>\n <div>\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\n *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\n *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n </div>\n </div>\n <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getButtonId(0)\">Out of\n Stock</button>\n <div class=\"quantity\" *ngIf=\"responseData?.quantity && !appointmentSettings?.videoCallProductsEnabled\"\n [style.borderColor]=\"data?.styles?.background?.accentColor\">\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\n [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\n <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\n </div>\n <button *ngIf=\"responseData?.quantity && appointmentSettings?.videoCallProductsEnabled && !videoCallAdded\" class=\"send-btn w-100\"\n [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" (click)=\"!edit ? addVideoCallCurrent() : ''\">\n <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\n <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\" class=\"w-75\">\n <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getButtonId(0)\"\n (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\n </div>\n</div>\n\n<ng-template #ReviewSection>\n <div class=\"review-sec\">\n <div class=\"title\">Customer Review</div>\n <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\n <span>Be the first to write a review</span>\n <button class=\"mt-3\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add\n Review' : 'Cancel Review'}}</button>\n <ng-container *ngIf=\"showReview\">\n <hr />\n <div class=\"user-review\">\n <div class=\"title\">Write a review</div>\n <span class=\"secondary-text\">RATING</span>\n <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\n <div>\n <span class=\"secondary-text\">Review Title</span>\n <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\n </div>\n <div>\n <span class=\"secondary-text\">Review</span>\n <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\n </div>\n <div class=\"review-action-btn\">\n <button [style.borderColor]=\"data?.styles?.background?.accentColor\"\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\n <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\n (click)=\"addProductReview()\"\n [disabled]=\"productReview == 0 && !reviewTitle?.length && !reviewDescription?.length\">Submit\n review</button>\n </div>\n </div>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #SocialIcons>\n <div class=\"d-flex\">\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\n [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\n <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\n <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\n <div style=\"position: relative;margin-right: 10px;\">\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\"\n [sectionId]=\"data?.id\"></simpo-socia-icons>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #ActionBtn>\n <div class=\"button-parent\">\n <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getButtonId(0)\">Out of\n Stock</button>\n <div class=\"quantity\" *ngIf=\"responseData?.quantity && !appointmentSettings?.videoCallProductsEnabled\"\n [style.borderColor]=\"data?.styles?.background?.accentColor\">\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\n [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\n <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\n </div>\n <button *ngIf=\"responseData?.quantity && appointmentSettings?.videoCallProductsEnabled && !videoCallAdded\" class=\"send-btn w-100\"\n [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\"\n [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\"\n (click)=\"!edit ? addVideoCallCurrent() : ''\">\n <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\n <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75\">\n <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getButtonId(0)\"\n (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\n </div>\n <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75 mt-2\">\n <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getButtonId(0)\"\n (click)=\"!edit ? buyNow() : ''\">Buy Now</button>\n </div>\n <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && !IsEcommerce\" class=\"w-75\">\n <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getButtonId(0)\" (click)=\"raiseLead()\"><mat-icon style=\"height:14px !important\">\n message</mat-icon>Notify Me</button>\n </div>\n <div class=\"favourite\" *ngIf=\"IsEcommerce\" (click)=\"isItemAsFavorite ? removeToFavourite() : addToFavourite()\">\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\"\n *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n </div>\n <div class=\"share-icon\" (click)=\"shareProduct()\">\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\">share</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #variants>\n <ng-container *ngIf=\"data?.styles?.customization == 'Style1'\">\n <ng-container *ngFor=\"let varient of varients | keyvalue\">\n <div class=\"mb-3\">\n <div class=\"varient-key\">{{varient.key}}</div>\n <div class=\"d-flex\" style=\"gap: 5px;\">\n <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\n [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\n [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\n (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\n </div>\n </div>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"data?.styles?.customization == 'Style2' && selectedVarient.size > 0\">\n <ng-container>\n <div class=\"row mt-2 style2-container w-100\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\n <div *ngFor=\"let item of selectedVarient | keyvalue\" class=\"px-3 py-2 varient-item\"\n [class]=\"getClass(selectedVarient)\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\n <div class=\"variant-head\">{{item.key | titlecase}}</div>\n <div class=\"variant-value text-start fw-semibold\">\n {{item.value |\n titlecase}}</div>\n </div>\n <div class=\"cursor-pointer p-0\" [class]=\"getClass(selectedVarient)\">\n <div class=\"custom-text d-flex align-items-center justify-content-center h-100 p-2\" data-bs-toggle=\"offcanvas\"\n data-bs-target=\"#offcanvasRightVariant\" [style.background]=\"data?.styles?.background?.accentColor\"\n [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">CUSTOMISE\n </div>\n </div>\n </div>\n </ng-container>\n </ng-container>\n</ng-template>\n\n<ng-template #ProductDesc>\n <div class=\"product-info-minimal\">\n <!-- Brand -->\n <div class=\"item-code-row\" *ngIf=\"responseData?.itemCategorisation?.itemBrand?.refName\">\n <span class=\"item-code-value\">by {{ responseData?.itemCategorisation?.itemBrand?.refName }}</span>\n </div>\n\n <!-- Item Code -->\n <div class=\"item-code-row\" *ngIf=\"responseData?.itemCode\">\n <span class=\"item-code-value\">{{ formatItemCode(responseData?.itemCode) }}</span>\n </div>\n\n <!-- Title and Price Row -->\n <div class=\"title-price-row-modern\">\n <h1 class=\"product-title-modern\">{{responseData?.name}}</h1>\n <div class=\"product-price-modern\">\n <span [innerHTML]=\"currency\"></span> {{responseData?.price?.sellingPrice |\n number:'1.0-0'}}\n </div>\n </div>\n\n <!-- Rating Row -->\n <div class=\"rating-row-modern\" *ngIf=\"responseData?.averageRating\">\n <p-rating [(ngModel)]=\"responseData.averageRating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\n <span class=\"rating-score\">{{responseData?.averageRating | number:'1.1-1'}}</span>\n <span class=\"separator\">|</span>\n <span class=\"reviews-link\" [style.color]=\"styles?.background?.accentColor\">\n {{responseData?.totalReviewCount}} reviews</span>\n </div>\n\n <!-- Brief Description -->\n <div class=\"product-brief-modern\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData?.brief | sanitizeHtml\">\n </div>\n </div>\n</ng-template>\n\n<ng-template #descriptors>\n <div class=\"row prod-desc mt-2\">\n <div>\n <!-- <div class=\"product-header d-flex align-items-center justify-content-between\">\n <span class=\"header-text\" *ngIf=\"responseData?.descriptor || responseData?.materials\">Product Details</span>\n <div class=\"pricebreakup-btn d-flex align-items-center justify-content-center cursor-pointer\"\n *ngIf=\"materialBasedPricing\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRightPriceBreakup\"\n [style.background]=\"data?.styles?.background?.accentColor\"\n [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">\n <mat-icon>add</mat-icon> PRICE BREAKUP\n </div>\n </div> -->\n <div class=\"description\">\n <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\n [innerHTML]=\"responseData?.descriptor?.name | sanitizeHtml\"\n [style.background]=\"data?.styles?.background?.color\"></div>\n </div>\n <div class=\"custom-specifications\" *ngIf=\"customFieldSpecs.length\">\n <div class=\"body-large spec-title\">Specifications</div>\n <table class=\"spec-table\">\n <tbody>\n <tr *ngFor=\"let spec of customFieldSpecs\">\n <th scope=\"row\">{{ spec.label }}</th>\n <td>{{ spec.value }}</td>\n </tr>\n </tbody>\n </table>\n </div>\n <!-- <ng-container *ngIf=\"materialBasedPricing\">\n <div class=\"jewellery-table-container\">\n <ng-container *ngFor=\"let ele of responseData?.materials\">\n <div class=\"jewel-container mt-2\">\n <div class=\"jewel-header\" [style.background]=\"getHeaderColor(ele.materialType)\">\n {{ele?.materialName | titlecase}}\n </div>\n <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor(ele.materialType)\">\n <div class=\"col-6 metal-purity\">\n <div class=\"row-header\">\n Net Weight/{{ele?.unit | titlecase}}\n </div>\n <div class=\"row-content\">\n {{ele.quantity + \" \" + (ele?.unit | titlecase)}}\n </div>\n </div>\n <div class=\"col-6 metal-purity\">\n <div class=\"row-header\">\n Purity\n </div>\n <div class=\"row-content\">\n {{ele.purity |\n titlecase}}\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container> -->\n </div>\n </div>\n\n</ng-template>\n\n<ng-template #ImageSection>\n <ng-container *ngIf=\"!varientLoading && (isMobile || data?.styles?.gridStyle == 'Style1')\">\n <div class=\"style-1-vertical d-flex flex-column w-100\">\n <div class=\"main-image-container p-0\">\n <div class=\"item-img rounded-3\">\n <lib-ngx-image-zoom *ngIf=\"currentImg\" [thumbImage]=\"currentImg\" [fullImage]=\"currentImg\" [zoomMode]=\"'hover'\"\n [magnification]=\"0.4\" [enableScrollZoom]=\"false\">\n </lib-ngx-image-zoom>\n <img *ngIf=\"!currentImg\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\"\n class=\"w-100 h-100 object-fit-cover\">\n </div>\n </div>\n <div class=\"thumbnail-row py-3 d-flex gap-2 overflow-auto hide-scroll\">\n <img class=\"img thumbnail-img\" *ngFor=\"let img of itemImages\" [src]=\"img.imgUrl\" (click)=\"changeImg(img.imgUrl)\"\n [class.active-thumb]=\"currentImg == img.imgUrl\"\n style=\"cursor: pointer; min-width: 80px; width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 2px solid transparent;\"\n [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!varientLoading && (!isMobile && data?.styles?.gridStyle == 'Style2')\">\n <div class=\"bento-masonry-container\">\n <div *ngFor=\"let img of itemImages; let i = index\" class=\"bento-item-modern\">\n <img [src]=\"img.imgUrl\" class=\"bento-img-modern\" (click)=\"changeImg(img.imgUrl)\">\n </div>\n </div>\n </ng-container>\n\n <div class=\"item-img\" *ngIf=\"varientLoading\">\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '100%',\n 'border-radius': '10px'\n }\">\n </ngx-skeleton-loader>\n </div>\n</ng-template>\n\n<ng-template #branding>\n <div class=\"row w-100\">\n <ng-container *ngFor=\"let brand of brandPromises\">\n <div class=\"col-4 d-flex flex-column align-items-center g-2\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n [src]=\"brand?.logoUrl\" alt=\"\" class=\"w-h-40 p-0 rounded-circle\">\n <div class=\"brand-text w-100 text-center py-2\">\n {{brand?.title | titlecase}}\n </div>\n </div>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #videoCallSchedule>\n <!-- *ngIf=\"appointmentSettings?.videoCallProductsEnabled\" -->\n <ng-container>\n <div class=\"row w-100 video-container\">\n <div class=\"col-4 video-call-img\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/697639c1786974532510Video_conference live.svg\"\n alt=\"\" class=\"w-100 h-100 \">\n </div>\n <div class=\"col-8 align-content-center\">\n <div class=\"video-head-text\">\n Live Video Call\n </div>\n <div class=\"sub-text\">\n Join a live video call with our consultants to see your favourite designs up close!\n </div>\n <button class=\"sch-btn text-center cursor-pointer\" *ngIf=\"!videoCallAdded\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getScheduleVideoCallButtonStyle()\" [buttonId]=\"getScheduleVideoCallButtonId()\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getScheduleVideoCallButtonId()\" (click)=\"!edit ? addVideoCallCurrent() : ''\">\n Schedule a Video Call\n </button>\n <ng-container *ngIf=\"videoCallAdded\">\n <div class=\"d-flex align-items-center gap-2\" style=\"color:#1E7A4B;\">\n <mat-icon>check_circle</mat-icon>\n <span>Added to your Video Call request</span>\n </div>\n <button class=\"sch-btn text-center cursor-pointer mt-2\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getScheduleVideoCallButtonStyle()\" [buttonId]=\"getScheduleVideoCallButtonId()\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getScheduleVideoCallButtonId()\" (click)=\"!edit ? continueVideoCallBooking() : ''\">Continue\n Booking</button>\n </ng-container>\n </div>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #DeliverySection>\n <div class=\"delivery-container\">\n <h2 class=\"delivery-title\">Delivery, Stores & Trial</h2>\n\n <!-- Location Section -->\n <div class=\"location-section mb-2\">\n <div class=\"location-container d-flex align-items-center justify-content-between\"\n [style.borderColor]=\"styles?.background?.accentColor\">\n <div class=\"d-flex align-items-center flex-grow-1 me-2\" style=\"width: calc(100% - 100px);\">\n <div class=\"d-flex mx-1\"><mat-icon\n class=\"gps d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\n </div>\n <input type=\"number\" class=\"postal-code-input flex-grow-1\" placeholder=\"Enter PinCode\" [(ngModel)]=\"pincode\"\n style=\"width: 100%;\">\n </div>\n <button class=\"btn locate-btn\" (click)=\"getStoreDetails()\">Submit</button>\n </div>\n <div *ngIf=\"!isPinCode\" style=\"color: red;\">Pin code must be 6 digits.</div>\n </div>\n\n <ng-container *ngIf=\"(pincode?.toString().length ?? 0) == 6\">\n <!-- Free Delivery Section -->\n <div class=\"delivery-section\">\n <div class=\"d-flex align-items-center\">\n <span class=\"delivery-icon d-flex align-items-center\">\n <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\n height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" class=\"feather feather-gift\">\n <polyline points=\"20 12 20 22 4 22 4 12\"></polyline>\n <rect x=\"2\" y=\"7\" width=\"20\" height=\"5\"></rect>\n <line x1=\"12\" y1=\"22\" x2=\"12\" y2=\"7\"></line>\n <path d=\"M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z\"></path>\n <path d=\"M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z\"></path>\n </svg>\n </span>\n\n <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges == 0\">Expected\n Delivery by {{ getDateAfterxDays() | date:'d MMM' }}</span>\n\n <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges > 0\">Your\n expected Order will\n Deliver by {{ getDateAfterxDays() | date:'d MMM' }} with a Delivery Charge of\n \u20B9 {{ecomConfigs?.deliveryCharges | number:'1.2-2'}}</span>\n </div>\n </div>\n\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #TryAtHome>\n <!-- Try At Home Section -->\n <div class=\"try-home-section\">\n <div class=\"d-flex align-items-start try-home-item\">\n <span class=\"home-icon d-flex align-items-center\">\n <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" class=\"feather feather-home\">\n <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path>\n <polyline points=\"9 22 9 12 15 12 15 22\"></polyline>\n </svg>\n </span>\n <div class=\"try-home-details\">\n <div class=\"try-home-header\">\n <span class=\"try-home-text\">Try At Home</span>\n <span class=\"free-text\"> (It's Free)</span>\n </div>\n <div class=\"home-appointment-text\">Home Appointment <span>Available to try from 29 Jul</span></div>\n <!-- <div class=\"appointment-text\">\n Home Appointment <span class=\"appointment-available\">Available to try from 28 Jun</span>\n </div> -->\n </div>\n </div>\n <div class=\"d-flex-align-items-center justify-content-center w-100\">\n <button class=\"book-appointment-btn\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getTryAtHomeButtonStyle()\" [buttonId]=\"getTryAtHomeButtonId()\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getTryAtHomeButtonId()\" (click)=\"!edit ? addToTrialCart() : ''\" *ngIf=\"!isItemAddedAsTrial\">Try at\n HOME</button>\n <button class=\"book-appointment-btn\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getTryAtHomeButtonStyle()\" [buttonId]=\"getTryAtHomeButtonId()\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getTryAtHomeButtonId()\" (click)=\"!edit ? continueHomeVisitBooking() : ''\" *ngIf=\"isItemAddedAsTrial\">Continue\n Booking</button>\n </div>\n </div>\n\n</ng-template>\n\n<ng-template #StoreSection>\n <!-- Nearest Store Section -->\n <ng-container\n *ngIf=\"storeDetails?.nearbyStore?.storeName && storeDetails?.nearbyStore?.storeName?.length > 0\">\n <div class=\"store-section\">\n <div class=\"d-flex align-items-center store-item\">\n <span class=\"store-icon d-flex align-items-center\">\n <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" class=\"feather feather-shopping-bag\">\n <path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"></path>\n <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\n <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\n </svg>\n </span>\n <div class=\"store-details\">\n <div class=\"store-text\">\n <span class=\"store-label\">Nearest Store - </span>\n <span class=\"store-name\">{{ storeDetails?.nearbyStore?.storeName | titlecase}}</span>\n <!-- <span class=\"store-distance\"> (4km)</span> -->\n </div>\n <!-- <div class=\"availability-section\">\n <span class=\"availability-badge\">\u23F0 AVAILABLE BY 28 JUN</span>\n </div> -->\n <!-- <div class=\"other-stores-text\">\n Also Available in <span class=\"other-stores-link\">18 other stores</span>\n </div> -->\n </div>\n </div>\n <div class=\"d-flex justify-content-center w-100\">\n <button class=\"find-store-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getButtonId(1)\" (click)=\"onFindInStore(storeDetails?.nearbyStore?.id)\">FIND IN\n STORE</button>\n </div>\n </div>\n </ng-container>\n <ng-template #emptyStore>\n <div class=\"delivery-section\">\n <div class=\"d-flex align-items-center\">\n <span class=\"delivery-icon d-flex align-items-center\">\n <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" class=\"feather feather-shopping-bag\">\n <path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"></path>\n <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\n <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\n </svg>\n </span>\n <span class=\"delivery-text\">No Stores are available</span>\n </div>\n </div>\n </ng-template>\n</ng-template>\n\n<div class=\"offcanvas offcanvas-end offcanvas-variant\" tabindex=\"-1\" id=\"offcanvasRightVariant\"\n aria-labelledby=\"offcanvasRightLabel\">\n <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\n <mat-icon data-bs-dismiss=\"offcanvas\"\n class=\"cursor-pointer d-flex align-items-center justify-content-center fs-5\">close</mat-icon>\n </div>\n <div class=\"varient-price px-3 pb-2\">\n <div class=\"price-text\">Price</div>\n <div class=\"d-flex g-3 align-items-center\">\n <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\n *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\n [innerHTML]='currency'></span>\n {{responseData?.price?.discountedPrice}}</div>\n <div class=\"price\"\n *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\"\n [ngClass]=\"{'text-decoration-line-through': responseData?.price?.discountedPrice}\"><span\n [innerHTML]='currency'></span>\n {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\n </div>\n </div>\n <div class=\"varient-container h-100 p-3\">\n <ng-container *ngFor=\"let varient of varients | keyvalue\">\n <div class=\"varient-data\">\n <div class=\"varient-key\">{{varient.key}}</div>\n <div class=\"d-flex\" style=\"gap: 5px;\">\n <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\n [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\n [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\n (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"confirm-btn w-100 p-3 text-center cursor-pointer\" data-bs-dismiss=\"offcanvas\"\n [style.background]=\"data?.styles?.background?.accentColor\" style=\"color: white;\">Confirm\n Customization</div>\n</div>\n\n\n<div class=\"offcanvas offcanvas-end offcanvas-small overflow-scroll\" tabindex=\"-1\" id=\"offcanvasRightPriceBreakup\">\n <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\n <mat-icon data-bs-dismiss=\"offcanvas\"\n class=\"cursor-pointer d-flex align-items-center justify-content-center fs-5\">close</mat-icon>\n </div>\n <div class=\"varient-price p-10-20\">\n <div class=\"price-break-header\">{{responseData?.name}}</div>\n </div>\n <div class=\"price-breakup h-100 w-100\">\n <ng-container *ngFor=\"let ele of responseData?.materials\">\n <div class=\"price-container mb-3 p-10-20\">\n <div class=\"price-container-header\">\n {{ ele.materialType + \" BREAKUP\" }}\n </div>\n <div class=\"row w-100 header-row\">\n <div class=\"col-3 text-center\">COMPONENT</div>\n <div class=\"col-3 text-center\">RATE</div>\n <div class=\"col-3 text-center\">WEIGHT</div>\n <div class=\"col-3 text-center\">FINAL VALUE</div>\n </div>\n <div class=\"row w-100 value-row\">\n <div class=\"col-3 text-center\">{{ ele.purity | titlecase }}</div>\n <div class=\"col-3 text-center\">\u20B9{{ getPricePerGram(ele.pricePerUnit,ele.materialType) |\n number:'1.2-2' }}</div>\n <div class=\"col-3 text-center\">{{ele.quantity + ' ' + (ele.unit | titlecase)}}</div>\n <div class=\"col-3 text-center total\">\u20B9{{ ele.pricePerUnit * ele.quantity | number }}</div>\n </div>\n </div>\n </ng-container>\n\n <div class=\"price-container mb-3 p-10-30 py-0 border-unset\">\n <div class=\"row w-100 summary-row\">\n <div class=\"col-6 text-start\">Making Charges</div>\n <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}\n </div>\n </div>\n <div class=\"row w-100 summary-row\">\n <div class=\"col-6 text-start\">Tax Amount</div>\n <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}\n </div>\n </div>\n <div class=\"row w-100 summary-row\">\n <div class=\"col-6 text-start\">Total Amount</div>\n <div class=\"col-6 text-end total\">\n \u20B9{{(responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) |\n number:'1.2-2'}}\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<ng-template #ReviewsSection>\n <div class=\"rv-section\" *ngIf=\"reviewsData\">\n\n <!-- Header: Title + Average | Bar Chart -->\n <div class=\"rv-header\">\n <div class=\"rv-header-left\">\n <h2 class=\"rv-title\">Reviews & Ratings</h2>\n <div class=\"rv-average-row\">\n <!-- filled stars -->\n <div class=\"rv-stars\">\n <ng-container *ngFor=\"let s of [1,2,3,4,5]\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n fill=\"#eab308\" />\n </svg>\n </ng-container>\n </div>\n <span class=\"rv-avg-num\">{{responseData?.averageRating | number:'1.1-1'}}</span>\n <span class=\"rv-avg-label\">average</span>\n </div>\n <div class=\"rv-count\" [style.color]=\"styles?.background?.accentColor || '#10b981'\">\n {{responseData?.totalReviewCount | number}} Reviews\n </div>\n </div>\n\n <div class=\"rv-bars\">\n <ng-container *ngFor=\"let rating of [5,4,3,2,1]\">\n <div class=\"rv-bar-row\">\n <span class=\"rv-bar-label\">{{rating}}</span>\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n fill=\"#eab308\" />\n </svg>\n <div class=\"rv-bar-track\">\n <div class=\"rv-bar-fill\" [style.width.%]=\"getPercentage(rating)\"></div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n\n <!-- Review Cards Grid -->\n <div class=\"rv-grid\">\n <ng-container *ngFor=\"let review of reviewsData\">\n <ng-container *ngIf=\"review.review\">\n <div class=\"rv-card\">\n <div class=\"rv-card-top\">\n <div class=\"rv-reviewer\">\n <img [src]=\"'https://ui-avatars.com/api/?name=' + (review?.userName ?? 'U') + '&background=random'\"\n class=\"rv-avatar\" alt=\"\">\n <div class=\"rv-name-date\">\n <span class=\"rv-name\">{{review?.userName ?? 'Anonymous'}}</span>\n <span class=\"rv-date\">{{review?.createdAt | date:'d MMM y'}}</span>\n </div>\n </div>\n <!-- Star rating -->\n <div class=\"rv-card-stars\">\n <ng-container *ngFor=\"let s of [1,2,3,4,5]\">\n <svg *ngIf=\"s <= review.rating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n fill=\"#eab308\" />\n </svg>\n <svg *ngIf=\"s > review.rating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\" style=\"opacity:0.25\">\n <path\n d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n fill=\"#eab308\" />\n </svg>\n </ng-container>\n </div>\n </div>\n <p class=\"rv-text\">{{review?.review ?? 'No comment provided.'}}</p>\n\n <!-- Review Images -->\n <div class=\"rv-images\" *ngIf=\"review?.reviewImages?.length\">\n <a *ngFor=\"let img of review.reviewImages\" [href]=\"img.imgUrl\" target=\"_blank\" class=\"rv-img-link\">\n <img [src]=\"img.imgUrl\" alt=\"Review image\" class=\"rv-img-thumb\" onerror=\"this.style.display='none'\">\n </a>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n\n <div class=\"text-center mt-4\" *ngIf=\"(reviewsData?.length ?? 0) > 3\">\n <button class=\"write-review-btn\" (click)=\"loadMoreReviews()\">Load More Reviews</button>\n </div>\n </div>\n</ng-template>\n\n<div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" role=\"dialog\"\n aria-hidden=\"true\">\n <div class=\"modal-dialog modal-dialog-centered video-modal\">\n <div class=\"modal-content\">\n <div class=\"modal-body\" style=\"height: 100%;\">\n <video controls muted playsinline style=\"width: 100%; height: 100%;\">\n <source\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/371647c1753962084265clideo_editor_48bc93c24e18470888c661bb09e437da (online-video-cutter.com).mp4\"\n type=\"video/mp4\">\n Your browser does not support the video tag.\n </video>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"modal fade\" id=\"reviewModal\" tabindex=\"-1\" aria-labelledby=\"reviewModalLabel\" role=\"dialog\"\n aria-hidden=\"true\">\n <div class=\"modal-dialog review-modal\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h1 class=\"modal-title fs-5\"></h1>\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\n </div>\n <div class=\"modal-body\">\n <div class=\"detail-review-container\">\n <div class=\"image-section\">\n <div class=\"product-image\">\n <div class=\"backward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex-1\"\n *ngIf=\"currentImageIndex > 0\">\u25BC</div>\n <img [src]=\"selectedReview?.reviewImages?.[currentImageIndex]?.imgUrl\" alt=\"\">\n <div class=\"forward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex+1\"\n *ngIf=\"currentImageIndex < selectedReview?.images?.length - 1\">\u25B2</div>\n <!-- <div class=\"earbuds-container\">\n <div class=\"charging-case\"></div>\n <div class=\"earbud left\"></div>\n <div class=\"earbud right\"></div>\n </div> -->\n </div>\n <!-- <div class=\"navigation-arrows\">\n </div> -->\n </div>\n\n <div class=\"review-section\">\n <div class=\"reviewer-header\">\n <div class=\"reviewer-avatar\">\uD83D\uDC64</div>\n <div class=\"reviewer-name\">{{selectedReview?.userName ?? \"-\"}}</div>\n </div>\n\n <div class=\"detail-rating\" *ngIf=\"selectedReview?.rating\">\n <p-rating [(ngModel)]=\"selectedReview.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\n </div>\n\n <div class=\"review-date\">\n Reviewed in India on 24 July 2025\n </div>\n\n <div class=\"review-text\">\n {{selectedReview?.review ?? \"-\"}}\n </div>\n\n <div class=\"images-section\">\n <h3>Images in this review</h3>\n <div class=\"review-images\">\n <div class=\"review-image\" [ngClass]=\"{'selected': currentImageIndex == i}\"\n *ngFor=\"let img of selectedReview?.reviewImages ?? [];let i = index\" (click)=\"currentImageIndex = i\">\n <img [src]=\"img.imgUrl\" alt=\"\">\n </div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div>\n</div>", styles: [".product-desc{display:flex}::ng-deep .product-desc table,::ng-deep .brief-desc table{border-collapse:collapse;width:100%;margin:10px 0}::ng-deep .product-desc table td,::ng-deep .product-desc table th,::ng-deep .brief-desc table td,::ng-deep .brief-desc table th{border:1px solid #dddddd!important;text-align:left;padding:8px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}::ng-deep .smooth-panel .p-panel-header{cursor:pointer;background:transparent;border:unset;font-size:18px;font-weight:700;padding:0}::ng-deep .smooth-panel .p-panel-content{border:unset;padding:0}.jewel-container{border-radius:12px;box-shadow:#63636333 0 2px 8px}.jewel-header{padding:8px 10px;border-radius:12px 12px 0 0;font-size:15px;font-weight:700;color:#4f3267}.br-p{border-radius:0 0 12px 12px;padding:10px 0}.row-header{font-size:13px;font-weight:700;color:#4f3267}.row-content{color:#4e555e}.jewellery-table-container{border-radius:12px}.jewellery-table{width:100%;border-collapse:collapse;border:1px solid #ddd;transition:all .3s ease}.jewellery-table th,.jewellery-table td{border:1px solid #ddd;padding:12px;text-align:left;transition:background-color .2s ease}.material-header td{background-color:#f8f9fa;font-weight:700;font-size:16px}.column-header{background-color:#f1f1f1}.column-header th{font-weight:600}.material-row:hover{background-color:#f5f5f5}.charges-header th,.total-header th,.total-header td{background-color:#eaeaea;font-weight:700}.total-row td{font-weight:700;font-size:18px;background-color:#f8f8f8}.custom-specifications{margin-top:16px}.spec-title{font-weight:600;margin-bottom:8px}.spec-table{width:100%;border-collapse:collapse;border:1px solid #ddd}.spec-table th,.spec-table td{border:1px solid #ddd;padding:12px;text-align:left;vertical-align:top;word-break:break-word}.spec-table th{width:35%;font-weight:600;background-color:#f8f9fa}@media screen and (max-width: 600px){.spec-table th,.spec-table td{padding:8px}.jewellery-table{font-size:14px}.jewellery-table th,.jewellery-table td{padding:8px}}.share-icon,.favourite{border-radius:50%!important;height:30px;width:30px;padding:6px;display:flex;align-items:center;justify-content:center;background-color:#f1f5f9!important;cursor:pointer;transition:all .2s ease;border:none!important}:is(.share-icon,.favourite) mat-icon{font-size:20px;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.share-icon:hover,.favourite:hover{background-color:#e2e8f0!important;transform:scale(1.05)}.header-text{font-size:17px;font-weight:bolder}.pricebreakup-btn{font-size:11px;font-weight:700;padding:8px;border-radius:8px;letter-spacing:.5px}.pricebreakup-btn mat-icon{font-size:18px;display:flex;align-items:center}.img-list{display:flex;gap:5px;max-height:460px}.img-list img{height:100px;width:100px;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden}.item-img img{width:100%!important;height:100%!important;object-fit:cover}.price{font-weight:600;font-size:24px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:1px solid;align-items:center;gap:15px;height:44px;width:75%;justify-content:space-between;border-radius:12px}.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}.fc{font-size:17px;font-weight:700}.tab-group{display:flex;gap:10px}.tab{font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black;max-width:max-content}.discount-price{font-size:1.4rem}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#f7f7f7;padding:11px 20px;border-radius:12px;margin-top:unset!important;width:70%!important;border:1px solid #d3d3d347}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#f7f7f7;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:7px 25px;cursor:pointer;font-weight:600}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:5px;height:44px!important;justify-content:space-between;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px 15px;width:fit-content!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:fit-content!important;font-size:14px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.w-h-40{width:40px!important;height:40px!important}.height{height:auto;overflow-y:visible}.mobile-footer{display:none}video{border-radius:18px}@media (min-width: 1024px){.zoom:hover{transform:scale(1.04);transition:transform .2s ease-in-out;overflow:hidden}.product-heading{font-size:20px;font-weight:600;margin-top:5px}}@media only screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:100000001;background-color:#fff;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;color:#000;align-items:center;justify-content:center;gap:15px;width:20%}.mobile-footer .icons .mat-icon{font-size:26px}.product-desc{font-size:13px}.brief-desc{font-size:16px;margin-top:unset!important}.total-container{padding-top:10px!important;padding-bottom:4rem!important}.out-of-stock,.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important;height:348px}.item-img img{width:100%;height:348px!important}.display-none{display:none}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{width:25%;border:2px solid lightgray;cursor:pointer}.input-field{margin-top:.7rem!important;margin-bottom:.7rem!important}.prod-desc{margin-top:20px}.video-call-container{margin:0!important}.product-img{height:220px}.call-details{width:100%!important;padding:3%!important}.send-btn{padding:.5rem 1rem!important}.review-sec :is(input,textarea){width:100%!important}.height{width:100%;height:auto}.product-heading{font-size:23px;font-weight:600}.discount-price{font-size:1.7rem!important}.header-text{font-size:20px!important}}.send-btn{font-size:14px!important;padding:1rem;display:flex;align-items:center;justify-content:center;text-transform:uppercase;font-weight:600}.send-btn mat-icon{height:20px;width:20px;font-size:18px}a{text-decoration:none}.brief-desc{font-size:14px;color:#4e555e}.total-container{height:auto;position:relative;display:block!important;overflow:visible}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin:unset!important}.modal-content{height:100%;border:none;border-radius:0!important}@media (min-width:768px) and (max-width:991px){.item-img{position:relative;width:auto!important;height:auto!important;overflow:hidden}.item-img img{height:auto!important;width:auto!important}.height{width:min-content}}@media (min-width:1024px){.product-headig{font-size:35px}}.mat-accordion .mat-expansion-panel:last-of-type{box-shadow:none}@media (min-width: 1400px){.container{max-width:unset;width:95%;height:100vh;overflow-y:auto}}.width-max{width:max-content}.fw-600{font-weight:600}.cursor-pointer{cursor:pointer}.offcanvas-variant{border-radius:30px 0 0 30px}.varient-header,.varient-price{background:#f7f7f7}.varient-header{border-radius:30px 0 0}.confirm-btn{border-radius:0 0 0 30px;position:absolute!important;bottom:0!important}.style2-container{border:1px solid;border-radius:12px;margin:0}.varient-item{border-right:1px solid;align-content:center}.variant-head{font-size:12px;color:#33363e}.varient-data{margin-bottom:25px;border-bottom:1px solid black;padding-bottom:25px}.variant-value{font-size:.9rem;color:#000}.custom-text{border-radius:0 8px 8px 0;font-size:.9rem;font-weight:600}.scroll-wrap{flex-wrap:nowrap}.brand-text{word-wrap:break-word;white-space:normal;font-size:12px;font-weight:600;line-height:20px}.video-container{border:1px solid rgb(240,240,240);margin:10px 0;border-radius:12px}.video-head-text{font-size:16px;font-weight:700}.sub-text{font-size:11px;color:#6f7377;margin-bottom:10px}.sch-btn{font-size:1.2rem!important;color:#fff;padding:3px 0;margin-top:5px}.tax-text{font-size:.7rem;color:#6f7377}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.delivery-container{margin:35px 0 15px;background-color:transparent}.delivery-title{font-size:16px;font-weight:600;margin:0 0 12px;line-height:1.2;margin-bottom:.5rem!important}.location-container{border:1px solid #cfcfcf;border-radius:12px;padding:10px;margin-bottom:5px;width:100%}.location-icon{width:20px;height:20px;background-color:#374151;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}.location-icon:before{content:\"\";width:8px;height:8px;background-color:#fff;border-radius:50%;position:absolute}.postal-code-input{font-size:12px;font-weight:600;letter-spacing:.5px;border:none;outline:none;background:transparent;width:90%}.postal-code-input::placeholder{font-weight:500}.locate-btn{background:none!important;border:none!important;font-weight:600;color:#111827;font-size:13px!important;padding:0!important;box-shadow:none!important;width:auto!important;white-space:nowrap}.gps{font-size:17px}.locate-btn:focus{box-shadow:none!important}.delivery-section{margin-bottom:15px;border:1px solid rgb(240,240,240);padding:10px;border-radius:12px}.delivery-icon{font-size:18px;color:#ec4899;margin-right:14px;width:20px}.delivery-text{font-size:14px;font-weight:700}.store-section{border:1px solid rgb(240,240,240);padding:10px;border-radius:12px;margin-bottom:15px}.store-item{margin-bottom:11px}.store-icon{font-size:18px;color:#f97316;margin-right:14px;margin-top:2px;width:20px}.store-details{flex:1}.store-text{font-size:14px}.store-name{font-weight:700}.availability-section{margin-bottom:6px}.availability-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;color:#d97706;background-color:#fef3c7;padding:4px 8px;border-radius:12px;letter-spacing:.5px}.other-stores-text{font-size:14px;color:#6b7280;line-height:1.4}.other-stores-link{color:#6b46c1;cursor:pointer;text-decoration:underline}.other-stores-link:hover{color:#553c9a}.find-store-btn{width:100%!important;padding:8px 20px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px}.try-home-section{border-radius:12px;padding:10px;border:1px solid rgb(240,240,240)}.try-home-item{margin-bottom:10px;padding:0}.home-icon{font-size:18px;color:#6b46c1;margin-right:14px;margin-top:2px;width:20px}.try-home-details{flex:1}.try-home-text{font-size:14px;font-weight:700;color:#374151}.free-text{font-size:14px;color:#6b7280}.appointment-text{font-size:14px;color:#6b7280;line-height:1.4}.appointment-available{font-weight:500;color:#374151}.book-appointment-btn{background:#111827;color:#fff;border:none;padding:10px 20px;border-radius:12px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px;transition:all .2s ease;width:100%}.book-appointment-btn:hover{background:#000;transform:translateY(-1px);box-shadow:0 4px 8px #0000001a}@media (max-width: 480px){.container{display:flex;align-items:center;flex-direction:column}.location-section{padding:12px 0}.try-home-section{padding:20px}}.w-90{width:90%}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.w-12{width:12%!important}.w-88{width:88%!important}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;position:absolute;bottom:20px;left:10px;width:95%!important}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.error-border{border:2px solid #dc3545!important}.offcanvas-small{height:72vh;top:25%;width:35%;border-radius:50px 0 0 50px}.rating{width:max-content;border:1px solid;border-radius:20px;padding:0 10px;margin-bottom:.5rem}.rating-no{padding-right:7px;margin:0;border-right:1px solid;font-size:.75rem}.p-10-20{padding:10px 30px}.price-break-header{font-size:19px;font-weight:600}.price-container{border-bottom:1px solid rgb(233,233,233)}.price-container-header{font-size:14px;font-weight:600;color:#333}.total-ratings{font-size:.75rem}.header-row .col-3{font-size:12px;font-weight:500;color:#666}.value-row .col-3{font-size:14px;font-weight:400;color:#333}.value-row .col-3.total{font-weight:600}.summary-row .col-6{font-size:15px;font-weight:500;color:#333;padding:unset}.summary-row .col-6.total{font-weight:600;padding-right:10px}.summary-row{padding:0 42px}.error-border{border:2px solid #e74c3c!important;box-shadow:0 0 5px #e74c3c4d!important}.form-control,.input-field input{transition:border-color .3s ease,box-shadow .3s ease}.error-border:focus{border-color:#e74c3c!important;box-shadow:0 0 8px #e74c3c80!important}.input-field input:focus{transform:scale(1.02)}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:-.125em;border:.125em solid currentcolor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}.spinner-border-sm{width:.875rem;height:.875rem;border-width:.125em}@keyframes spinner-border{to{transform:rotate(360deg)}}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.rv-section{padding:2rem 0;background:transparent}.rv-header{display:flex;justify-content:space-between;align-items:flex-start;gap:3rem}.rv-header-left{flex:1}.rv-title{font-size:1.4rem;font-weight:700;color:#111827;margin-bottom:.75rem}.rv-average-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}.rv-stars{display:flex;gap:2px}.rv-avg-num{font-size:1.4rem;font-weight:700;color:#111827}.rv-avg-label{font-size:.95rem;color:#6b7280;font-weight:400}.rv-count{font-size:.9rem;font-weight:600}.rv-bars{flex:1;max-width:420px;display:flex;flex-direction:column;gap:6px}.rv-bar-row{display:flex;align-items:center;gap:3px}.rv-bar-label{font-size:15px;font-weight:600;color:#111827;width:10px;text-align:right;flex-shrink:0}.rv-bar-track{flex:1;height:10px;background-color:#f3f4f6;border-radius:3px;overflow:hidden}.rv-bar-fill{height:100%;background-color:#eab308;border-radius:3px}.rv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.rv-card{padding:12px;border:1px solid #e5e7eb;border-radius:10px;background:#fff}.rv-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.85rem}.rv-reviewer{display:flex;align-items:center;gap:.7rem}.rv-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0}.rv-name-date{display:flex;flex-direction:column;gap:2px}.rv-name{font-size:16px;font-weight:600;color:#374151}.rv-date{font-size:.75rem;color:#9ca3af}.rv-card-stars{display:flex;gap:2px;flex-shrink:0}.rv-text{font-size:.88rem;line-height:1.65;color:#4b5563;margin:0}.rv-images{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.rv-img-link{display:block;flex-shrink:0;border-radius:8px;overflow:hidden;border:1px solid #e5e7eb}.rv-img-thumb{width:72px;height:72px;object-fit:cover;display:block;transition:transform .2s ease}.rv-img-link:hover .rv-img-thumb{transform:scale(1.05)}@media (max-width: 768px){.rv-header{flex-direction:column;gap:1.5rem}.rv-bars{max-width:100%}.rv-grid{grid-template-columns:1fr}}.review-section{padding:4rem 1rem;border-top:1px solid #f3f4f6;margin-top:4rem;background:transparent!important}.review-summary-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4rem;gap:3rem}.rating-summary-left{flex:1}.rating-summary-left h2.reviews-header-title{font-size:1.75rem;font-weight:700;margin-bottom:0;color:#111827}.average-score-container{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.average-score{color:#111827;display:flex;align-items:baseline;gap:8px}.average-score .score-num{font-size:1.5rem;font-weight:700}.average-score .score-text{font-size:1.1rem;font-weight:400;color:#111827}.total-reviews-count{font-weight:600;font-size:1.1rem;display:block}.rating-distribution{flex:1;max-width:480px}.rating-bar-row{display:flex;align-items:center;gap:1.25rem;margin-bottom:.85rem}.star-label{display:flex;align-items:center;justify-content:flex-start;width:35px;line-height:1}.progress-bar-bg{flex:1;height:12px;background-color:#f3f4f6;border-radius:9999px;overflow:hidden}.progress-bar-fill{height:100%;background-color:#eab308;border-radius:9999px}.review-actions-bar-minimal{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.write-review-btn-minimal{padding:.6rem 1.25rem;background:#f8f9fa;color:#4b5563;border:none;border-radius:8px;font-weight:500;font-size:.9rem;cursor:pointer;transition:all .2s}.write-review-btn-minimal:hover{background:#e5e7eb}.sort-dropdown-minimal select{padding:.6rem 2.25rem .6rem 1rem;border:1px solid #d1d5db;border-radius:8px;background:#fff;font-size:.9rem;color:#4b5563;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .75rem center;background-size:1rem;cursor:pointer}.reviews-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}.review-card{padding:1.5rem;border:1px solid #e5e7eb;border-radius:12px;background:#fff;box-shadow:none}.review-divider{margin:2rem 0;border:none;border-top:1px solid #f3f4f6}.reviews-header-title{font-size:1.4rem;font-weight:700;color:#111827;margin-bottom:0}.review-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.25rem}.reviewer-info{display:flex;align-items:center;gap:1rem}.reviewer-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#f3f4f6}.reviewer-name{font-weight:600;font-size:.95rem;color:#374151}.review-date-text{font-size:.8rem;color:#9ca3af}.reviewer-name-date{display:flex;flex-direction:row;align-items:center;gap:8px}.review-card-rating{display:flex;gap:2px}.review-card-text{font-size:1rem;line-height:1.7;color:#4b5563}.product-tabs-container{border-bottom:1px solid #f3f4f6;margin-bottom:8px}.tab-item{padding:1rem 0;font-weight:600;font-size:1.1rem;color:#6b7280;cursor:pointer;position:relative;transition:color .2s}.tab-content-pane h3{font-size:1.5rem;font-weight:700;margin-bottom:1.5rem}.tab-content-pane p{color:#4b5563;line-height:1.8;font-size:1.05rem}@media (max-width: 1024px){.reviews-grid{grid-template-columns:1fr}}@media (max-width: 768px){.review-summary-header{flex-direction:column;gap:2rem}.rating-distribution{max-width:100%}.bento-grid{height:auto;display:flex;flex-direction:column}.tabs-list{gap:1.5rem;overflow-x:auto}}.home-appointment-text{font-size:.8rem;color:#4e555e}.home-appointment-text span{font-weight:600}.video-call-img{height:120px;margin:0;padding:0;border-radius:45px}.video-call-img img{border-top-left-radius:12px;border-bottom-left-radius:12px}.discount{background:#fff3f2;padding:15px 15px 20px;margin-top:14px;border-radius:8px;display:flex;flex-direction:column;gap:5px;position:relative}.discount p{margin-bottom:0;color:#4f3267;font-weight:700;font-size:1rem}.discount .offer{color:#eb4f5c}.discount:before{content:\"\";display:block;height:44px;width:4px;background:#eb4f5c;position:absolute;left:0;top:16px;border-top-right-radius:20px;border-bottom-right-radius:20px}.metal-purity{display:flex;flex-direction:column;gap:10px}.scrollable-content{height:100%;max-height:95vh;overflow-y:auto}.style-2-img{max-height:70%;height:100%!important}.ring-size-video{background:#f0ebff;display:flex;justify-content:space-between;align-items:center;height:45px;padding:12px;border-radius:10px;margin-top:20px;margin-bottom:20px}.ring-size-video .text{color:#4f3267;font-size:.9rem}.ring-size-video .learn-how{color:#de57e9;font-weight:700;font-size:1rem;display:flex;gap:5px;align-items:center;cursor:pointer}.ring-size-video .learn-how mat-icon{font-size:20px;display:flex;align-items:center}.ring-size-video p{margin-bottom:0}.video-modal{height:90vh!important;width:90vw!important;max-width:none}.video-modal .modal-body{padding:0}.review-section{border-radius:10px;padding:15px}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.detail-review-container{display:flex;max-width:1200px;margin:0 auto;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px #0000001a}.image-section{flex:1;background:#000;position:relative;min-height:400px}.product-image{width:100%;height:100%;object-fit:cover;background:linear-gradient(135deg,#e8e8e8,#d0d0d0);display:flex;align-items:center;justify-content:center;max-height:400px;position:relative}.product-image img{height:100%;width:100%;object-fit:contain}.earbuds-container{position:relative;width:300px;height:200px}.charging-case{width:200px;height:120px;background:linear-gradient(145deg,#f0f0f0,#e0e0e0);border-radius:25px;position:absolute;top:40px;left:50px;box-shadow:inset 0 4px 8px #0000001a}.charging-case:before{content:\"\";position:absolute;inset:10px;background:linear-gradient(145deg,#e8e8e8,#d8d8d8);border-radius:15px;box-shadow:inset 0 2px 4px #0000001a}.earbud{position:absolute;width:45px;height:15px;background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border-radius:8px;box-shadow:0 2px 4px #0003}.earbud:before{content:\"noise\";position:absolute;top:2px;left:50%;transform:translate(-50%);font-size:6px;color:#888;font-weight:300}.earbud.left{top:70px;left:80px}.earbud.right{top:90px;left:130px}.earbud.right:before{color:#ff6b35}.review-section{flex:1;padding:30px;background:#fafafa}.reviewer-header{display:flex;align-items:center;margin-bottom:15px}.reviewer-avatar{width:40px;height:40px;background:#ccc;border-radius:50%;margin-right:12px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#666}.reviewer-name{font-size:16px;font-weight:500;color:#333}.detail-rating{margin:10px 0}.stars{display:flex;gap:2px;margin-bottom:5px}.star{color:#ff9500;font-size:18px}.thumbs{display:flex;gap:5px}.thumb{color:#ff9500;font-size:16px}.review-date{font-size:14px;color:#666;margin:15px 0}.review-text{font-size:16px;line-height:1.5;color:#333;margin-bottom:25px}.images-section h3{font-size:16px;color:#666;margin-bottom:15px;font-weight:500}.review-images{display:flex;gap:10px}.review-image{width:60px;height:60px;background:#ddd;border-radius:6px;border:2px solid #e0e0e0;cursor:pointer;transition:border-color .3s}.review-image img{width:100%;height:100%}.review-image:hover,.review-image.selected{border-color:#007185}.navigation-arrows{position:absolute;top:20px;right:20px;display:flex;flex-direction:column;gap:10px}.arrow{width:40px;height:40px;background:#fffc;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:#666;transition:background-color .3s;position:absolute;transform:rotate(90deg)}.backward-arrow{left:10px}.forward-arrow{right:10px}.arrow:hover{background:#fff}@media (max-width: 768px){.review-container{flex-direction:column}.image-section{min-height:300px}.review-section{padding:20px}}.review-modal{max-width:none;width:70vw}.review-modal .modal-body{padding:0}@media screen and (max-width: 475px){.offcanvas-small{height:100vh;width:100%;top:0}.review-modal{margin:0;height:100%;width:100%}.detail-review-container{flex-direction:column;height:100%}.product-image{max-height:289px}.image-section{min-height:289px}.video-modal{margin:0;height:100vh!important;width:100vw!important;overflow:hidden}}.modal{z-index:100000033}.breadcrumbs-modern{font-size:.85rem;color:#6b7280;margin-bottom:.5rem}.breadcrumb-item.active{color:#111827;font-weight:500}.product-title-modern{font-size:2rem;font-weight:800;color:#111827;margin:0;line-height:1.2;font-family:var(--website-font-family)}.product-price-modern{font-size:1.75rem;font-weight:700;color:#111827;font-family:var(--website-font-family)}.rating-line-modern{margin-top:.25rem}.rating-score-text{font-weight:700;font-size:1rem;color:#111827}.rating-count-text{font-size:.95rem;color:#10b981;font-weight:600;cursor:pointer}.product-description-brief{font-size:1rem;line-height:1.7;color:#4b5563;margin-top:1.5rem}.low-stock-text{color:#dc2626;font-weight:700;font-size:.875rem}.variants-modern-container{margin:2.5rem 0}.varient-key{font-size:.9rem;font-weight:800;color:#111827;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem}.color-swatch-modern{width:36px;height:36px;border-radius:50%;cursor:pointer;border:3px solid white;box-shadow:0 0 0 1px #e5e7eb;transition:all .25s cubic-bezier(.4,0,.2,1)}.color-swatch-modern:hover{transform:scale(1.15)}.color-swatch-modern.active{box-shadow:0 0 0 2px #111827}.box-varient-modern{padding:.75rem 1.5rem;border:2px solid #f3f4f6;border-radius:10px;font-size:.95rem;font-weight:700;color:#374151;cursor:pointer;transition:all .2s;min-width:70px;text-align:center;background:#fff}.box-varient-modern:hover{border-color:#d1d5db;background:#f9fafb}.box-varient-modern.active{border-color:#111827;background:#111827;color:#fff}.quantity-container{margin-top:1rem}.quantity-selector-modern{border:1px solid #e5e7eb;border-radius:12px;width:fit-content;background:#f9fafb;padding:2px}.qty-btn{width:44px;height:44px;border:none;background:transparent;font-size:1.5rem;color:#111827;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;border-radius:10px}.qty-btn:hover:not(:disabled){background:#fff;box-shadow:0 2px 4px #0000000d}.qty-btn:disabled{color:#d1d5db;cursor:not-allowed}.qty-display{width:50px;text-align:center;font-weight:700;color:#111827;font-size:1.1rem}.out-of-stock-modern{background:#f3f4f6;color:#9ca3af;padding:1.1rem 2.5rem;border:none;border-radius:14px;font-weight:800;font-size:1.1rem;cursor:not-allowed}.wishlist-btn-modern{width:56px;height:56px;border:2px solid #f3f4f6;border-radius:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;background:#fff}.wishlist-btn-modern:hover{background:#fef2f2;border-color:#fecaca}.wishlist-btn-modern mat-icon{font-size:26px}.thumbnail-column{padding-right:15px!important}.thumbnail-list::-webkit-scrollbar{display:none}.thumbnail-list{-ms-overflow-style:none;scrollbar-width:none}.image-section-modern{padding-right:2.5rem!important;padding-left:0!important;width:60%!important;max-width:60%!important;flex:0 0 60%!important;margin-top:0!important}.detail-section-modern{padding-left:.5rem!important;padding-right:0!important;width:40%!important;max-width:40%!important;flex:0 0 40%!important;margin-top:0!important}.thumbnail-column{width:90px!important;flex:0 0 90px!important}.item-img{width:100%!important;max-width:100%;margin:0;border-radius:20px;overflow:hidden;background:#f9fafb;position:relative}lib-ngx-image-zoom{width:100%!important;display:block!important}::ng-deep .ngx-image-zoom-container{width:100%!important;height:auto!important;aspect-ratio:1/1}.style-1-vertical{display:flex;flex-direction:column;width:100%}.main-image-container{width:100%;aspect-ratio:1 / 1}.thumbnail-row{display:flex;gap:8px;overflow-x:auto;padding:12px 0}.thumbnail-img{min-width:80px;width:80px;height:80px;object-fit:cover;border-radius:8px;border:2px solid transparent;cursor:pointer;transition:border-color .2s}.active-thumb{border-width:2px;border-style:solid}.bento-grid{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:15px;width:100%;aspect-ratio:5/4}.bento-item-large{grid-row:span 2;border-radius:24px;overflow:hidden}.bento-item-small{border-radius:20px;overflow:hidden}.bento-grid img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.bento-grid img:hover{transform:scale(1.05)}@media (max-width: 991px){.image-section-modern,.detail-section-modern{width:100%!important;max-width:100%!important;flex:0 0 100%!important;padding:0!important}.bento-grid{grid-template-columns:1fr;grid-template-rows:auto;aspect-ratio:auto}.bento-item-large{grid-row:span 1}}.bento-masonry-container{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:16px;width:100%}.bento-item-modern{border-radius:16px;overflow:hidden;background:#fdfdfd;aspect-ratio:1 / 1;transition:all .4s cubic-bezier(.4,0,.2,1)}.bento-img-modern{width:100%;height:100%;display:block;object-fit:cover;background:#fdfdfd;cursor:pointer;transition:transform .6s ease}.bento-item-modern:hover{transform:translateY(-4px);box-shadow:0 12px 30px #00000014}.bento-item-modern:hover .bento-img-modern{transform:scale(1.03)}.detail-section-modern{position:sticky;top:0;height:max-content;max-height:calc(100vh - 100px);overflow-y:auto;overflow-x:hidden;padding-left:2rem!important;scrollbar-width:none}.detail-section-modern::-webkit-scrollbar{display:none}.product-hero-card-modern{border:none;box-shadow:none;z-index:10;position:relative}.tabs-list{display:flex;justify-content:flex-start;gap:10px;list-style:none;padding:0;margin-bottom:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap}.tabs-list::-webkit-scrollbar{display:none}.tab-item{font-size:1rem;font-weight:600;color:#6b7280;padding:.5rem 1rem;border-radius:0;cursor:pointer;transition:all .25s;background:transparent;border-bottom:2px solid transparent;white-space:nowrap;flex-shrink:0}.tab-item:hover{background:transparent;color:#111827}.tab-content-pane{padding-top:.5rem}@media (max-width: 1024px){.product-hero-card-modern{padding:25px}.tab-content-pane{width:100%}}@media (max-width: 991px){.bento-masonry-container{grid-template-columns:1fr;grid-auto-rows:auto}.bento-item-modern.featured{grid-row:span 1;aspect-ratio:1 / 1}.product-hero-card-modern{position:static;padding:0;box-shadow:none;border:none;background:transparent;z-index:auto}.detail-section-modern{padding-left:0!important;margin-top:2rem;position:static!important;max-height:none!important;height:auto!important;overflow-y:visible!important;overflow-x:visible!important}.image-section-modern{padding-right:0!important}.tab-item{padding:.6rem 1rem;font-size:.95rem}.product-tabs-container{padding:0 4px}}.product-info-minimal{display:flex;flex-direction:column}.breadcrumbs-modern{display:flex;align-items:center;gap:8px;font-size:.95rem;color:#6b7280;font-weight:500}.breadcrumbs-modern .dot{font-size:1.2rem;line-height:1}.title-price-row-modern{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.product-title-modern{font-size:1.5rem;font-weight:800;color:#111827;margin:0;line-height:1.2}.product-price-modern{font-size:1.5rem;font-weight:500;color:#111827;white-space:nowrap}.rating-row-modern{display:flex;align-items:center;gap:12px;font-size:1rem;flex-wrap:wrap}.rating-score{font-weight:700;color:#111827}.separator{color:#e5e7eb}.reviews-link{font-weight:600}::ng-deep .rating-row-modern p-rating .p-rating-icon.p-rating-icon-active svg,::ng-deep .rating-row-modern p-rating .p-icon{color:#eab308!important;fill:#eab308!important}::ng-deep .rating-row-modern p-rating .p-rating-icon:not(.p-rating-icon-active) svg,::ng-deep .rating-row-modern p-rating .p-rating-icon:not(.p-rating-icon-active) .p-icon{color:#eab308!important;fill:#eab308!important;opacity:.25}.product-brief-modern{font-size:.95rem;line-height:1.7;color:#4b5563;margin-top:.5rem;text-align:justify}.write-review-btn{display:inline-flex;align-items:center;justify-content:center;padding:.65rem 1.75rem;background:#f8f9fa;color:#374151;border:1px solid #e5e7eb;border-radius:10px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;letter-spacing:.02em}.write-review-btn:hover{background:#f1f3f5;border-color:#d1d5db;transform:translateY(-1px);box-shadow:0 2px 8px #00000012}@media (max-width: 991px){.product-title-modern,.product-price-modern{font-size:1.3rem}}@media (max-width: 480px){.title-price-row-modern{flex-direction:column;gap:4px}.product-title-modern{font-size:1.2rem}.product-price-modern{font-size:1.2rem;white-space:normal}.rv-section{padding:1rem 0}.rv-header{gap:1rem}.rv-title{font-size:1.15rem;margin-bottom:.5rem}.rv-avg-num{font-size:1.15rem}.rv-bars{max-width:100%;width:100%}.rv-grid{grid-template-columns:1fr;gap:.75rem}.rv-card{padding:10px}.rv-name{font-size:14px}.tabs-list{gap:0}.tab-item{padding:.55rem 1rem;font-size:.9rem}.header-text{font-size:15px!important}.product-header{flex-wrap:wrap;gap:8px}.pricebreakup-btn{font-size:10px;padding:6px}.write-review-btn{width:100%;padding:.65rem 1rem}}.pb-glass-container{padding:16px;border-radius:16px}.pb-glass-card{background:#fff9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.85);border-radius:12px;margin-bottom:12px;overflow:hidden}.pb-glass-header{padding:10px 16px;font-weight:700;font-size:12px;letter-spacing:1.5px;text-transform:uppercase}.pb-glass-row{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;font-size:14px;border-bottom:1px solid rgba(0,0,0,.04)}.pb-glass-row:last-child{border-bottom:none}.pb-glass-row:nth-child(2n){background:#f8fafc99}.pb-label{color:#6b7280;font-weight:500}.pb-value{font-weight:600;color:#1f2937}.pb-summary-card{background:#ffffffb3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(203,213,225,.5);border-radius:12px;overflow:hidden}.pb-summary-row{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;font-size:14px;color:#374151;border-bottom:1px solid rgba(0,0,0,.05)}.pb-grand-total{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;font-weight:700;font-size:16px;letter-spacing:.5px}.item-code-row{margin-bottom:6px}.item-code-value{display:inline-block;padding:2px 10px;border-radius:999px;background:#f1f5f9;color:#475569;font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;border:1px solid #e2e8f0}.buy-now-btn{background:transparent!important;border:1.5px solid currentColor!important;color:inherit!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: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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: 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: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: 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: NgxImageZoomModule }, { kind: "component", type: i17.NgxImageZoomComponent, selector: "lib-ngx-image-zoom", inputs: ["thumbImage", "fullImage", "zoomMode", "magnification", "minZoomRatio", "maxZoomRatio", "scrollStepSize", "enableLens", "lensWidth", "lensHeight", "circularLens", "enableScrollZoom", "altText", "titleText"], outputs: ["zoomScroll", "zoomPosition", "imagesLoaded"] }, { kind: "component", type: FeaturedProductsComponent, selector: "simpo-featured-products", inputs: ["data", "responseData", "index", "isRelatedProduct", "isBrowseProduct", "edit", "customClass", "delete", "nextComponentColor"], outputs: ["changeDetailProduct"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i3$3.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SpeedDialModule }, { 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: "ngmodule", type: PanelModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId", "itemIndex"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }] }); }
|
|
20471
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "reviewComponent", first: true, predicate: CustomerReviewComponent, descendants: true }, { propertyName: "aboveHeight", first: true, predicate: ["aboveHeight"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "imageSection", first: true, predicate: ["imageSection"], descendants: true }, { propertyName: "detailSection", first: true, predicate: ["detailSection"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n <section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\n\n <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\n <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\n </div> -->\n <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [spacingHorizontal]=\"stylesLayout\"\n [simpoLayout]=\"styles?.layout\" #container>\n <!-- <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\"\n (click)=\"routeToHome()\">Home</a> /\n <span>{{ responseData?.name | titlecase }}</span>\n </div> -->\n <div class=\"row m-0 w-100 mt-lg-4 h-auto overflow-visible\" #aboveHeight>\n <div class=\"col-lg-6 col-sm-12 image-section-modern\" #imageSection>\n <div class=\"d-flex flex-column justify-content-start gap-1\">\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\n </div>\n </div>\n <div class=\"col-lg-6 col-sm-12 detail-section-modern \" #detailSection>\n <div class=\"product-hero-card-modern\">\n <ng-container *ngIf=\"isMobile\">\n <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\n </ng-container>\n\n <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\n\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\n </ng-container>\n </div>\n\n\n <ng-container *ngIf=\"ecomConfigs?.deliveryEnabled\">\n <!-- *ngIf=\"ecomConfigs?.deliveryEnabled\" -->\n <ng-container *ngTemplateOutlet=\"DeliverySection\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"ecomConfigs?.storesEnabled\">\n <!-- *ngIf=\"ecomConfigs?.storesEnabled\" -->\n <ng-container *ngTemplateOutlet=\"StoreSection\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"appointmentSettings?.homeVisitProductsEnabled\">\n <!-- *ngIf=\"appointmentSettings?.homeVisitProductsEnabled\" -->\n <ng-container *ngTemplateOutlet=\"TryAtHome\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"appointmentSettings?.videoCallProductsEnabled\">\n <!-- *ngIf=\"appointmentSettings?.videoCallProductsEnabled\" -->\n <ng-container *ngTemplateOutlet=\"videoCallSchedule\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"ecomConfigs?.brandPromiseEnabled\">\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n </ng-container>\n\n\n\n <!-- Moved descriptors to Details tab below -->\n\n <!-- <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\n [innerHTML]=\"responseData.brief\"></div> -->\n <!-- Moved tags to Details tab below -->\n <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\n <!-- <ng-container>\n <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\n </ng-container> -->\n </div>\n </div>\n <!-- Tabs Navigation -->\n <div class=\"product-tabs-container\">\n <ul class=\"tabs-list\">\n <li class=\"tab-item\" [class.active]=\"activeTab == 'Details'\"\n [style.color]=\"activeTab == 'Details' ? styles?.background?.accentColor : ''\"\n [style.borderColor]=\"activeTab == 'Details' ? styles?.background?.accentColor : 'transparent'\"\n (click)=\"changeTab('Details')\">Details</li>\n <li class=\"tab-item\" *ngIf=\"reviewsData\" [class.active]=\"activeTab == 'Reviews'\"\n [style.color]=\"activeTab == 'Reviews' ? styles?.background?.accentColor : ''\"\n [style.borderColor]=\"activeTab == 'Reviews' ? styles?.background?.accentColor : 'transparent'\"\n (click)=\"changeTab('Reviews')\">Reviews</li>\n <li class=\"tab-item\" *ngIf=\"materialBasedPricing\" [class.active]=\"activeTab == 'PriceBreakup'\"\n [style.color]=\"activeTab == 'PriceBreakup' ? styles?.background?.accentColor : ''\"\n [style.borderColor]=\"activeTab == 'PriceBreakup' ? styles?.background?.accentColor : 'transparent'\"\n (click)=\"changeTab('PriceBreakup')\">Price Breakup</li>\n </ul>\n </div>\n\n <!-- Tab Content -->\n <div class=\"tab-content-pane\">\n <div *ngIf=\"activeTab == 'Details'\">\n <!-- Integrated descriptors and tags here -->\n <div class=\"mt-2\">\n <ng-container *ngTemplateOutlet=\"descriptors\"></ng-container>\n </div>\n </div>\n\n <div *ngIf=\"activeTab == 'Reviews'\">\n <ng-container *ngTemplateOutlet=\"ReviewsSection\"></ng-container>\n </div>\n\n <div *ngIf=\"activeTab == 'PriceBreakup'\">\n <div class=\"pb-glass-container mt-2\">\n\n <!-- One card per material \u2014 generic, works for any material type -->\n <ng-container *ngFor=\"let ele of responseData?.materials\">\n <div class=\"pb-glass-card\">\n <div class=\"pb-glass-header\"\n [style.background]=\"styles?.background?.accentColor\"\n [style.color]=\"'#fff'\">\n {{ ele?.materialName | titlecase }}\n </div>\n <div class=\"pb-glass-row\">\n <span class=\"pb-label\">Purity</span>\n <span class=\"pb-value\">{{ ele?.purity }}</span>\n </div>\n <div class=\"pb-glass-row\">\n <span class=\"pb-label\">Net Weight</span>\n <span class=\"pb-value\">{{ ele?.quantity }} {{ ele?.unit | titlecase }}</span>\n </div>\n <div class=\"pb-glass-row\">\n <span class=\"pb-label\">Rate / {{ ele?.unit | titlecase }}</span>\n <span class=\"pb-value\">\u20B9{{ ele?.pricePerUnit | number:'1.2-2' }}</span>\n </div>\n <div class=\"pb-glass-row\">\n <span class=\"pb-label\">Value</span>\n <span class=\"pb-value\">\u20B9{{ (ele?.quantity * ele?.pricePerUnit) | number:'1.2-2' }}</span>\n </div>\n </div>\n </ng-container>\n\n <!-- Making Charges card -->\n <div class=\"pb-glass-card\">\n <div class=\"pb-glass-header\"\n [style.background]=\"styles?.background?.accentColor\"\n [style.color]=\"'#fff'\">\n Making Charges\n </div>\n <!-- <div class=\"pb-glass-row\">\n <span class=\"pb-label\">Net Weight</span>\n <span class=\"pb-value\">{{ responseData?.baseWeight }}</span>\n </div> -->\n <div class=\"pb-glass-row\" *ngIf=\"responseData?.makingChargePercentage && responseData.makingChargePercentage > 0\">\n <span class=\"pb-label\">Making Charge %</span>\n <span class=\"pb-value\">{{ responseData?.makingChargePercentage }}%</span>\n </div>\n <div class=\"pb-glass-row\" *ngIf=\"responseData?.jewelryPriceBreakup?.makingChargeAmount && responseData?.jewelryPriceBreakup?.makingChargeAmount > 0\">\n <span class=\"pb-label\">Value</span>\n <span class=\"pb-value\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}</span>\n </div>\n </div>\n\n <!-- Summary card -->\n <div class=\"pb-summary-card\">\n <div class=\"pb-summary-row\">\n <span>Total Value</span>\n <span>\u20B9{{ responseData?.jewelryPriceBreakup?.priceWithoutTax | number:'1.2-2' }}</span>\n </div>\n <div class=\"pb-summary-row\">\n <span>Tax ({{ responseData?.jewelryPriceBreakup?.taxRef?.taxPercent }}% GST)</span>\n <span>\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}</span>\n </div>\n <div class=\"pb-grand-total\"\n [style.background]=\"styles?.background?.accentColor\"\n [style.color]=\"'#fff'\">\n <span>TOTAL</span>\n <span>\u20B9{{ (responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) | number:'1.2-2' }}</span>\n </div>\n </div>\n\n </div>\n </div>\n </div>\n </section>\n <ng-container *ngIf=\"recentViewItemList?.length\">\n <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"recentViewItemList\"\n [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\n </ng-container>\n <!-- <ng-container *ngIf=\"recentViewItemList?.length\">\n <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\n [isRelatedProduct]=\"true\"></simpo-featured-products>\n </ng-container> -->\n <!-- <ng-container>\n <simpo-customer-review [data]=\"data\"></simpo-customer-review>\n </ng-container> -->\n\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\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 *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n </section>\n</ng-container>\n\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\n<div class=\"mobile-footer\">\n <div class=\"icons\">\n <div (click)=\"goToCart()\">\n <mat-icon>shopping_cart</mat-icon>\n </div>\n <div>\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\n *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\n *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n </div>\n </div>\n <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getButtonId(0)\">Out of\n Stock</button>\n <div class=\"quantity\" *ngIf=\"responseData?.quantity && !appointmentSettings?.videoCallProductsEnabled\"\n [style.borderColor]=\"data?.styles?.background?.accentColor\">\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\n [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\n <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\n </div>\n <button *ngIf=\"responseData?.quantity && appointmentSettings?.videoCallProductsEnabled && !videoCallAdded\" class=\"send-btn w-100\"\n [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" (click)=\"!edit ? addVideoCallCurrent() : ''\">\n <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\n <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\" class=\"w-75\">\n <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getButtonId(0)\"\n (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\n </div>\n</div>\n\n<ng-template #ReviewSection>\n <div class=\"review-sec\">\n <div class=\"title\">Customer Review</div>\n <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\n <span>Be the first to write a review</span>\n <button class=\"mt-3\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add\n Review' : 'Cancel Review'}}</button>\n <ng-container *ngIf=\"showReview\">\n <hr />\n <div class=\"user-review\">\n <div class=\"title\">Write a review</div>\n <span class=\"secondary-text\">RATING</span>\n <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\n <div>\n <span class=\"secondary-text\">Review Title</span>\n <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\n </div>\n <div>\n <span class=\"secondary-text\">Review</span>\n <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\n </div>\n <div class=\"review-action-btn\">\n <button [style.borderColor]=\"data?.styles?.background?.accentColor\"\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\n <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\n (click)=\"addProductReview()\"\n [disabled]=\"productReview == 0 && !reviewTitle?.length && !reviewDescription?.length\">Submit\n review</button>\n </div>\n </div>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #SocialIcons>\n <div class=\"d-flex\">\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\n [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\n <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\n <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\n <div style=\"position: relative;margin-right: 10px;\">\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\"\n [sectionId]=\"data?.id\"></simpo-socia-icons>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #ActionBtn>\n <div class=\"button-parent\">\n <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getButtonId(0)\">Out of\n Stock</button>\n <div class=\"quantity\" *ngIf=\"responseData?.quantity && !appointmentSettings?.videoCallProductsEnabled\"\n [style.borderColor]=\"data?.styles?.background?.accentColor\">\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\n [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\n <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\n </div>\n <button *ngIf=\"responseData?.quantity && appointmentSettings?.videoCallProductsEnabled && !videoCallAdded\" class=\"send-btn w-100\"\n [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\"\n [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\"\n (click)=\"!edit ? addVideoCallCurrent() : ''\">\n <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\n <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75\">\n <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getButtonId(0)\"\n (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\n </div>\n <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75 mt-2\">\n <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getButtonId(0)\"\n (click)=\"!edit ? buyNow() : ''\">Buy Now</button>\n </div>\n <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && !IsEcommerce\" class=\"w-75\">\n <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getButtonId(0)\" (click)=\"raiseLead()\"><mat-icon style=\"height:14px !important\">\n message</mat-icon>Notify Me</button>\n </div>\n <div class=\"favourite\" *ngIf=\"IsEcommerce\" (click)=\"isItemAsFavorite ? removeToFavourite() : addToFavourite()\">\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\"\n *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n </div>\n <div class=\"share-icon\" (click)=\"shareProduct()\">\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\">share</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #variants>\n <ng-container *ngIf=\"data?.styles?.customization == 'Style1'\">\n <ng-container *ngFor=\"let varient of varients | keyvalue\">\n <div class=\"mb-3\">\n <div class=\"varient-key\">{{varient.key}}</div>\n <div class=\"d-flex\" style=\"gap: 5px;\">\n <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\n [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\n [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\n (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\n </div>\n </div>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"data?.styles?.customization == 'Style2' && selectedVarient.size > 0\">\n <ng-container>\n <div class=\"row mt-2 style2-container w-100\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\n <div *ngFor=\"let item of selectedVarient | keyvalue\" class=\"px-3 py-2 varient-item\"\n [class]=\"getClass(selectedVarient)\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\n <div class=\"variant-head\">{{item.key | titlecase}}</div>\n <div class=\"variant-value text-start fw-semibold\">\n {{item.value |\n titlecase}}</div>\n </div>\n <div class=\"cursor-pointer p-0\" [class]=\"getClass(selectedVarient)\">\n <div class=\"custom-text d-flex align-items-center justify-content-center h-100 p-2\" data-bs-toggle=\"offcanvas\"\n data-bs-target=\"#offcanvasRightVariant\" [style.background]=\"data?.styles?.background?.accentColor\"\n [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">CUSTOMISE\n </div>\n </div>\n </div>\n </ng-container>\n </ng-container>\n</ng-template>\n\n<ng-template #ProductDesc>\n <div class=\"product-info-minimal\">\n <!-- Brand -->\n <div class=\"item-code-row\" *ngIf=\"responseData?.itemCategorisation?.itemBrand?.refName\">\n <span class=\"item-code-value\">by {{ responseData?.itemCategorisation?.itemBrand?.refName }}</span>\n </div>\n\n <!-- Item Code -->\n <div class=\"item-code-row\" *ngIf=\"responseData?.itemCode\">\n <span class=\"item-code-value\">{{ formatItemCode(responseData?.itemCode) }}</span>\n </div>\n\n <!-- Title and Price Row -->\n <div class=\"title-price-row-modern\">\n <h1 class=\"product-title-modern\">{{responseData?.name}}</h1>\n <div class=\"product-price-modern\">\n <span [innerHTML]=\"currency\"></span> {{responseData?.price?.sellingPrice |\n number:'1.0-0'}}\n </div>\n </div>\n\n <!-- Rating Row -->\n <div class=\"rating-row-modern\" *ngIf=\"responseData?.averageRating\">\n <p-rating [(ngModel)]=\"responseData.averageRating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\n <span class=\"rating-score\">{{responseData?.averageRating | number:'1.1-1'}}</span>\n <span class=\"separator\">|</span>\n <span class=\"reviews-link\" [style.color]=\"styles?.background?.accentColor\">\n {{responseData?.totalReviewCount}} reviews</span>\n </div>\n\n <!-- Brief Description -->\n <div class=\"product-brief-modern\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData?.brief | sanitizeHtml\">\n </div>\n </div>\n</ng-template>\n\n<ng-template #descriptors>\n <div class=\"row prod-desc mt-2\">\n <div>\n <!-- <div class=\"product-header d-flex align-items-center justify-content-between\">\n <span class=\"header-text\" *ngIf=\"responseData?.descriptor || responseData?.materials\">Product Details</span>\n <div class=\"pricebreakup-btn d-flex align-items-center justify-content-center cursor-pointer\"\n *ngIf=\"materialBasedPricing\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRightPriceBreakup\"\n [style.background]=\"data?.styles?.background?.accentColor\"\n [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">\n <mat-icon>add</mat-icon> PRICE BREAKUP\n </div>\n </div> -->\n <div class=\"description\">\n <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\n [innerHTML]=\"responseData?.descriptor?.name | sanitizeHtml\"\n [style.background]=\"data?.styles?.background?.color\"></div>\n </div>\n <div class=\"custom-specifications\" *ngIf=\"customFieldSpecs.length\">\n <div class=\"body-large spec-title\">Specifications</div>\n <table class=\"spec-table\">\n <tbody>\n <tr *ngFor=\"let spec of customFieldSpecs\">\n <th scope=\"row\">{{ spec.label }}</th>\n <td>{{ spec.value }}</td>\n </tr>\n </tbody>\n </table>\n </div>\n <!-- <ng-container *ngIf=\"materialBasedPricing\">\n <div class=\"jewellery-table-container\">\n <ng-container *ngFor=\"let ele of responseData?.materials\">\n <div class=\"jewel-container mt-2\">\n <div class=\"jewel-header\" [style.background]=\"getHeaderColor(ele.materialType)\">\n {{ele?.materialName | titlecase}}\n </div>\n <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor(ele.materialType)\">\n <div class=\"col-6 metal-purity\">\n <div class=\"row-header\">\n Net Weight/{{ele?.unit | titlecase}}\n </div>\n <div class=\"row-content\">\n {{ele.quantity + \" \" + (ele?.unit | titlecase)}}\n </div>\n </div>\n <div class=\"col-6 metal-purity\">\n <div class=\"row-header\">\n Purity\n </div>\n <div class=\"row-content\">\n {{ele.purity |\n titlecase}}\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container> -->\n </div>\n </div>\n\n</ng-template>\n\n<ng-template #ImageSection>\n <ng-container *ngIf=\"!varientLoading && (isMobile || data?.styles?.gridStyle == 'Style1')\">\n <div class=\"style-1-vertical d-flex flex-column w-100\">\n <div class=\"main-image-container p-0\">\n <div class=\"item-img rounded-3\">\n <lib-ngx-image-zoom *ngIf=\"currentImg\" [thumbImage]=\"currentImg\" [fullImage]=\"currentImg\" [zoomMode]=\"'hover'\"\n [magnification]=\"0.4\" [enableScrollZoom]=\"false\">\n </lib-ngx-image-zoom>\n <img *ngIf=\"!currentImg\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\"\n class=\"w-100 h-100 object-fit-cover\">\n </div>\n </div>\n <div class=\"thumbnail-row py-3 d-flex gap-2 overflow-auto hide-scroll\">\n <img class=\"img thumbnail-img\" *ngFor=\"let img of itemImages\" [src]=\"img.imgUrl\" (click)=\"changeImg(img.imgUrl)\"\n [class.active-thumb]=\"currentImg == img.imgUrl\"\n style=\"cursor: pointer; min-width: 80px; width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 2px solid transparent;\"\n [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!varientLoading && (!isMobile && data?.styles?.gridStyle == 'Style2')\">\n <div class=\"bento-masonry-container\">\n <div *ngFor=\"let img of itemImages; let i = index\" class=\"bento-item-modern\">\n <img [src]=\"img.imgUrl\" class=\"bento-img-modern\" (click)=\"changeImg(img.imgUrl)\">\n </div>\n </div>\n </ng-container>\n\n <div class=\"item-img\" *ngIf=\"varientLoading\">\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '100%',\n 'border-radius': '10px'\n }\">\n </ngx-skeleton-loader>\n </div>\n</ng-template>\n\n<ng-template #branding>\n <div class=\"row w-100\">\n <ng-container *ngFor=\"let brand of brandPromises\">\n <div class=\"col-4 d-flex flex-column align-items-center g-2\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n [src]=\"brand?.logoUrl\" alt=\"\" class=\"w-h-40 p-0 rounded-circle\">\n <div class=\"brand-text w-100 text-center py-2\">\n {{brand?.title | titlecase}}\n </div>\n </div>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #videoCallSchedule>\n <!-- *ngIf=\"appointmentSettings?.videoCallProductsEnabled\" -->\n <ng-container>\n <div class=\"row w-100 video-container\">\n <div class=\"col-4 video-call-img\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/697639c1786974532510Video_conference live.svg\"\n alt=\"\" class=\"w-100 h-100 \">\n </div>\n <div class=\"col-8 align-content-center\">\n <div class=\"video-head-text\">\n Live Video Call\n </div>\n <div class=\"sub-text\">\n Join a live video call with our consultants to see your favourite designs up close!\n </div>\n <button class=\"sch-btn text-center cursor-pointer\" *ngIf=\"!videoCallAdded\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getScheduleVideoCallButtonStyle()\" [buttonId]=\"getScheduleVideoCallButtonId()\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getScheduleVideoCallButtonId()\" (click)=\"!edit ? addVideoCallCurrent() : ''\">\n Schedule a Video Call\n </button>\n <ng-container *ngIf=\"videoCallAdded\">\n <div class=\"d-flex align-items-center gap-2\" style=\"color:#1E7A4B;\">\n <mat-icon>check_circle</mat-icon>\n <span>Added to your Video Call request</span>\n </div>\n <button class=\"sch-btn text-center cursor-pointer mt-2\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getScheduleVideoCallButtonStyle()\" [buttonId]=\"getScheduleVideoCallButtonId()\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getScheduleVideoCallButtonId()\" (click)=\"!edit ? continueVideoCallBooking() : ''\">Continue\n Booking</button>\n </ng-container>\n </div>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #DeliverySection>\n <div class=\"delivery-container\">\n <h2 class=\"delivery-title\">Delivery, Stores & Trial</h2>\n\n <!-- Location Section -->\n <div class=\"location-section mb-2\">\n <div class=\"location-container d-flex align-items-center justify-content-between\"\n [style.borderColor]=\"styles?.background?.accentColor\">\n <div class=\"d-flex align-items-center flex-grow-1 me-2\" style=\"width: calc(100% - 100px);\">\n <div class=\"d-flex mx-1\"><mat-icon\n class=\"gps d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\n </div>\n <input type=\"number\" class=\"postal-code-input flex-grow-1\" placeholder=\"Enter PinCode\" [(ngModel)]=\"pincode\"\n style=\"width: 100%;\">\n </div>\n <button class=\"btn locate-btn\" (click)=\"getStoreDetails()\">Submit</button>\n </div>\n <div *ngIf=\"!isPinCode\" style=\"color: red;\">Pin code must be 6 digits.</div>\n </div>\n\n <ng-container *ngIf=\"(pincode?.toString().length ?? 0) == 6\">\n <!-- Free Delivery Section -->\n <div class=\"delivery-section\">\n <div class=\"d-flex align-items-center\">\n <span class=\"delivery-icon d-flex align-items-center\">\n <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\n height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" class=\"feather feather-gift\">\n <polyline points=\"20 12 20 22 4 22 4 12\"></polyline>\n <rect x=\"2\" y=\"7\" width=\"20\" height=\"5\"></rect>\n <line x1=\"12\" y1=\"22\" x2=\"12\" y2=\"7\"></line>\n <path d=\"M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z\"></path>\n <path d=\"M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z\"></path>\n </svg>\n </span>\n\n <span class=\"delivery-text\" *ngIf=\"checkingDeliveryEstimate\">Checking delivery to {{ pincode }}\u2026</span>\n\n <span class=\"delivery-text\" *ngIf=\"deliveryEstimateChecked && !deliveryNotServiceable && deliveryEstimate\">\n <ng-container *ngIf=\"deliveryEstimate.eta\">{{ deliveryEstimate.eta }} \u00B7 </ng-container>\n Delivery: {{ deliveryEstimate.charge > 0 ? ('\u20B9' + (deliveryEstimate.charge | number:'1.2-2')) : 'FREE' }}\n </span>\n\n <span class=\"delivery-text\" style=\"color:#b91c1c;\" *ngIf=\"deliveryEstimateChecked && deliveryNotServiceable\">\n We don't currently deliver to this pincode.\n </span>\n </div>\n </div>\n\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #TryAtHome>\n <!-- Try At Home Section -->\n <div class=\"try-home-section\">\n <div class=\"d-flex align-items-start try-home-item\">\n <span class=\"home-icon d-flex align-items-center\">\n <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" class=\"feather feather-home\">\n <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path>\n <polyline points=\"9 22 9 12 15 12 15 22\"></polyline>\n </svg>\n </span>\n <div class=\"try-home-details\">\n <div class=\"try-home-header\">\n <span class=\"try-home-text\">Try At Home</span>\n <span class=\"free-text\"> (It's Free)</span>\n </div>\n <div class=\"home-appointment-text\">Home Appointment <span>Available to try from 29 Jul</span></div>\n <!-- <div class=\"appointment-text\">\n Home Appointment <span class=\"appointment-available\">Available to try from 28 Jun</span>\n </div> -->\n </div>\n </div>\n <div class=\"d-flex-align-items-center justify-content-center w-100\">\n <button class=\"book-appointment-btn\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getTryAtHomeButtonStyle()\" [buttonId]=\"getTryAtHomeButtonId()\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getTryAtHomeButtonId()\" (click)=\"!edit ? addToTrialCart() : ''\" *ngIf=\"!isItemAddedAsTrial\">Try at\n HOME</button>\n <button class=\"book-appointment-btn\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getTryAtHomeButtonStyle()\" [buttonId]=\"getTryAtHomeButtonId()\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getTryAtHomeButtonId()\" (click)=\"!edit ? continueHomeVisitBooking() : ''\" *ngIf=\"isItemAddedAsTrial\">Continue\n Booking</button>\n </div>\n </div>\n\n</ng-template>\n\n<ng-template #StoreSection>\n <!-- Nearest Store Section -->\n <ng-container\n *ngIf=\"storeDetails?.nearbyStore?.storeName && storeDetails?.nearbyStore?.storeName?.length > 0\">\n <div class=\"store-section\">\n <div class=\"d-flex align-items-center store-item\">\n <span class=\"store-icon d-flex align-items-center\">\n <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" class=\"feather feather-shopping-bag\">\n <path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"></path>\n <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\n <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\n </svg>\n </span>\n <div class=\"store-details\">\n <div class=\"store-text\">\n <span class=\"store-label\">Nearest Store - </span>\n <span class=\"store-name\">{{ storeDetails?.nearbyStore?.storeName | titlecase}}</span>\n <!-- <span class=\"store-distance\"> (4km)</span> -->\n </div>\n <!-- <div class=\"availability-section\">\n <span class=\"availability-badge\">\u23F0 AVAILABLE BY 28 JUN</span>\n </div> -->\n <!-- <div class=\"other-stores-text\">\n Also Available in <span class=\"other-stores-link\">18 other stores</span>\n </div> -->\n </div>\n </div>\n <div class=\"d-flex justify-content-center w-100\">\n <button class=\"find-store-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getButtonId(1)\" (click)=\"onFindInStore(storeDetails?.nearbyStore?.id)\">FIND IN\n STORE</button>\n </div>\n </div>\n </ng-container>\n <ng-template #emptyStore>\n <div class=\"delivery-section\">\n <div class=\"d-flex align-items-center\">\n <span class=\"delivery-icon d-flex align-items-center\">\n <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" class=\"feather feather-shopping-bag\">\n <path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"></path>\n <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\n <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\n </svg>\n </span>\n <span class=\"delivery-text\">No Stores are available</span>\n </div>\n </div>\n </ng-template>\n</ng-template>\n\n<div class=\"offcanvas offcanvas-end offcanvas-variant\" tabindex=\"-1\" id=\"offcanvasRightVariant\"\n aria-labelledby=\"offcanvasRightLabel\">\n <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\n <mat-icon data-bs-dismiss=\"offcanvas\"\n class=\"cursor-pointer d-flex align-items-center justify-content-center fs-5\">close</mat-icon>\n </div>\n <div class=\"varient-price px-3 pb-2\">\n <div class=\"price-text\">Price</div>\n <div class=\"d-flex g-3 align-items-center\">\n <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\n *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\n [innerHTML]='currency'></span>\n {{responseData?.price?.discountedPrice}}</div>\n <div class=\"price\"\n *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\"\n [ngClass]=\"{'text-decoration-line-through': responseData?.price?.discountedPrice}\"><span\n [innerHTML]='currency'></span>\n {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\n </div>\n </div>\n <div class=\"varient-container h-100 p-3\">\n <ng-container *ngFor=\"let varient of varients | keyvalue\">\n <div class=\"varient-data\">\n <div class=\"varient-key\">{{varient.key}}</div>\n <div class=\"d-flex\" style=\"gap: 5px;\">\n <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\n [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\n [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\n (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"confirm-btn w-100 p-3 text-center cursor-pointer\" data-bs-dismiss=\"offcanvas\"\n [style.background]=\"data?.styles?.background?.accentColor\" style=\"color: white;\">Confirm\n Customization</div>\n</div>\n\n\n<div class=\"offcanvas offcanvas-end offcanvas-small overflow-scroll\" tabindex=\"-1\" id=\"offcanvasRightPriceBreakup\">\n <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\n <mat-icon data-bs-dismiss=\"offcanvas\"\n class=\"cursor-pointer d-flex align-items-center justify-content-center fs-5\">close</mat-icon>\n </div>\n <div class=\"varient-price p-10-20\">\n <div class=\"price-break-header\">{{responseData?.name}}</div>\n </div>\n <div class=\"price-breakup h-100 w-100\">\n <ng-container *ngFor=\"let ele of responseData?.materials\">\n <div class=\"price-container mb-3 p-10-20\">\n <div class=\"price-container-header\">\n {{ ele.materialType + \" BREAKUP\" }}\n </div>\n <div class=\"row w-100 header-row\">\n <div class=\"col-3 text-center\">COMPONENT</div>\n <div class=\"col-3 text-center\">RATE</div>\n <div class=\"col-3 text-center\">WEIGHT</div>\n <div class=\"col-3 text-center\">FINAL VALUE</div>\n </div>\n <div class=\"row w-100 value-row\">\n <div class=\"col-3 text-center\">{{ ele.purity | titlecase }}</div>\n <div class=\"col-3 text-center\">\u20B9{{ getPricePerGram(ele.pricePerUnit,ele.materialType) |\n number:'1.2-2' }}</div>\n <div class=\"col-3 text-center\">{{ele.quantity + ' ' + (ele.unit | titlecase)}}</div>\n <div class=\"col-3 text-center total\">\u20B9{{ ele.pricePerUnit * ele.quantity | number }}</div>\n </div>\n </div>\n </ng-container>\n\n <div class=\"price-container mb-3 p-10-30 py-0 border-unset\">\n <div class=\"row w-100 summary-row\">\n <div class=\"col-6 text-start\">Making Charges</div>\n <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}\n </div>\n </div>\n <div class=\"row w-100 summary-row\">\n <div class=\"col-6 text-start\">Tax Amount</div>\n <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}\n </div>\n </div>\n <div class=\"row w-100 summary-row\">\n <div class=\"col-6 text-start\">Total Amount</div>\n <div class=\"col-6 text-end total\">\n \u20B9{{(responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) |\n number:'1.2-2'}}\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<ng-template #ReviewsSection>\n <div class=\"rv-section\" *ngIf=\"reviewsData\">\n\n <!-- Header: Title + Average | Bar Chart -->\n <div class=\"rv-header\">\n <div class=\"rv-header-left\">\n <h2 class=\"rv-title\">Reviews & Ratings</h2>\n <div class=\"rv-average-row\">\n <!-- filled stars -->\n <div class=\"rv-stars\">\n <ng-container *ngFor=\"let s of [1,2,3,4,5]\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n fill=\"#eab308\" />\n </svg>\n </ng-container>\n </div>\n <span class=\"rv-avg-num\">{{responseData?.averageRating | number:'1.1-1'}}</span>\n <span class=\"rv-avg-label\">average</span>\n </div>\n <div class=\"rv-count\" [style.color]=\"styles?.background?.accentColor || '#10b981'\">\n {{responseData?.totalReviewCount | number}} Reviews\n </div>\n </div>\n\n <div class=\"rv-bars\">\n <ng-container *ngFor=\"let rating of [5,4,3,2,1]\">\n <div class=\"rv-bar-row\">\n <span class=\"rv-bar-label\">{{rating}}</span>\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n fill=\"#eab308\" />\n </svg>\n <div class=\"rv-bar-track\">\n <div class=\"rv-bar-fill\" [style.width.%]=\"getPercentage(rating)\"></div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n\n <!-- Review Cards Grid -->\n <div class=\"rv-grid\">\n <ng-container *ngFor=\"let review of reviewsData\">\n <ng-container *ngIf=\"review.review\">\n <div class=\"rv-card\">\n <div class=\"rv-card-top\">\n <div class=\"rv-reviewer\">\n <img [src]=\"'https://ui-avatars.com/api/?name=' + (review?.userName ?? 'U') + '&background=random'\"\n class=\"rv-avatar\" alt=\"\">\n <div class=\"rv-name-date\">\n <span class=\"rv-name\">{{review?.userName ?? 'Anonymous'}}</span>\n <span class=\"rv-date\">{{review?.createdAt | date:'d MMM y'}}</span>\n </div>\n </div>\n <!-- Star rating -->\n <div class=\"rv-card-stars\">\n <ng-container *ngFor=\"let s of [1,2,3,4,5]\">\n <svg *ngIf=\"s <= review.rating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n fill=\"#eab308\" />\n </svg>\n <svg *ngIf=\"s > review.rating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\" style=\"opacity:0.25\">\n <path\n d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n fill=\"#eab308\" />\n </svg>\n </ng-container>\n </div>\n </div>\n <p class=\"rv-text\">{{review?.review ?? 'No comment provided.'}}</p>\n\n <!-- Review Images -->\n <div class=\"rv-images\" *ngIf=\"review?.reviewImages?.length\">\n <a *ngFor=\"let img of review.reviewImages\" [href]=\"img.imgUrl\" target=\"_blank\" class=\"rv-img-link\">\n <img [src]=\"img.imgUrl\" alt=\"Review image\" class=\"rv-img-thumb\" onerror=\"this.style.display='none'\">\n </a>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n\n <div class=\"text-center mt-4\" *ngIf=\"(reviewsData?.length ?? 0) > 3\">\n <button class=\"write-review-btn\" (click)=\"loadMoreReviews()\">Load More Reviews</button>\n </div>\n </div>\n</ng-template>\n\n<div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" role=\"dialog\"\n aria-hidden=\"true\">\n <div class=\"modal-dialog modal-dialog-centered video-modal\">\n <div class=\"modal-content\">\n <div class=\"modal-body\" style=\"height: 100%;\">\n <video controls muted playsinline style=\"width: 100%; height: 100%;\">\n <source\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/371647c1753962084265clideo_editor_48bc93c24e18470888c661bb09e437da (online-video-cutter.com).mp4\"\n type=\"video/mp4\">\n Your browser does not support the video tag.\n </video>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"modal fade\" id=\"reviewModal\" tabindex=\"-1\" aria-labelledby=\"reviewModalLabel\" role=\"dialog\"\n aria-hidden=\"true\">\n <div class=\"modal-dialog review-modal\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h1 class=\"modal-title fs-5\"></h1>\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\n </div>\n <div class=\"modal-body\">\n <div class=\"detail-review-container\">\n <div class=\"image-section\">\n <div class=\"product-image\">\n <div class=\"backward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex-1\"\n *ngIf=\"currentImageIndex > 0\">\u25BC</div>\n <img [src]=\"selectedReview?.reviewImages?.[currentImageIndex]?.imgUrl\" alt=\"\">\n <div class=\"forward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex+1\"\n *ngIf=\"currentImageIndex < selectedReview?.images?.length - 1\">\u25B2</div>\n <!-- <div class=\"earbuds-container\">\n <div class=\"charging-case\"></div>\n <div class=\"earbud left\"></div>\n <div class=\"earbud right\"></div>\n </div> -->\n </div>\n <!-- <div class=\"navigation-arrows\">\n </div> -->\n </div>\n\n <div class=\"review-section\">\n <div class=\"reviewer-header\">\n <div class=\"reviewer-avatar\">\uD83D\uDC64</div>\n <div class=\"reviewer-name\">{{selectedReview?.userName ?? \"-\"}}</div>\n </div>\n\n <div class=\"detail-rating\" *ngIf=\"selectedReview?.rating\">\n <p-rating [(ngModel)]=\"selectedReview.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\n </div>\n\n <div class=\"review-date\">\n Reviewed in India on 24 July 2025\n </div>\n\n <div class=\"review-text\">\n {{selectedReview?.review ?? \"-\"}}\n </div>\n\n <div class=\"images-section\">\n <h3>Images in this review</h3>\n <div class=\"review-images\">\n <div class=\"review-image\" [ngClass]=\"{'selected': currentImageIndex == i}\"\n *ngFor=\"let img of selectedReview?.reviewImages ?? [];let i = index\" (click)=\"currentImageIndex = i\">\n <img [src]=\"img.imgUrl\" alt=\"\">\n </div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div>\n</div>", styles: [".product-desc{display:flex}::ng-deep .product-desc table,::ng-deep .brief-desc table{border-collapse:collapse;width:100%;margin:10px 0}::ng-deep .product-desc table td,::ng-deep .product-desc table th,::ng-deep .brief-desc table td,::ng-deep .brief-desc table th{border:1px solid #dddddd!important;text-align:left;padding:8px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}::ng-deep .smooth-panel .p-panel-header{cursor:pointer;background:transparent;border:unset;font-size:18px;font-weight:700;padding:0}::ng-deep .smooth-panel .p-panel-content{border:unset;padding:0}.jewel-container{border-radius:12px;box-shadow:#63636333 0 2px 8px}.jewel-header{padding:8px 10px;border-radius:12px 12px 0 0;font-size:15px;font-weight:700;color:#4f3267}.br-p{border-radius:0 0 12px 12px;padding:10px 0}.row-header{font-size:13px;font-weight:700;color:#4f3267}.row-content{color:#4e555e}.jewellery-table-container{border-radius:12px}.jewellery-table{width:100%;border-collapse:collapse;border:1px solid #ddd;transition:all .3s ease}.jewellery-table th,.jewellery-table td{border:1px solid #ddd;padding:12px;text-align:left;transition:background-color .2s ease}.material-header td{background-color:#f8f9fa;font-weight:700;font-size:16px}.column-header{background-color:#f1f1f1}.column-header th{font-weight:600}.material-row:hover{background-color:#f5f5f5}.charges-header th,.total-header th,.total-header td{background-color:#eaeaea;font-weight:700}.total-row td{font-weight:700;font-size:18px;background-color:#f8f8f8}.custom-specifications{margin-top:16px}.spec-title{font-weight:600;margin-bottom:8px}.spec-table{width:100%;border-collapse:collapse;border:1px solid #ddd}.spec-table th,.spec-table td{border:1px solid #ddd;padding:12px;text-align:left;vertical-align:top;word-break:break-word}.spec-table th{width:35%;font-weight:600;background-color:#f8f9fa}@media screen and (max-width: 600px){.spec-table th,.spec-table td{padding:8px}.jewellery-table{font-size:14px}.jewellery-table th,.jewellery-table td{padding:8px}}.share-icon,.favourite{border-radius:50%!important;height:30px;width:30px;padding:6px;display:flex;align-items:center;justify-content:center;background-color:#f1f5f9!important;cursor:pointer;transition:all .2s ease;border:none!important}:is(.share-icon,.favourite) mat-icon{font-size:20px;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.share-icon:hover,.favourite:hover{background-color:#e2e8f0!important;transform:scale(1.05)}.header-text{font-size:17px;font-weight:bolder}.pricebreakup-btn{font-size:11px;font-weight:700;padding:8px;border-radius:8px;letter-spacing:.5px}.pricebreakup-btn mat-icon{font-size:18px;display:flex;align-items:center}.img-list{display:flex;gap:5px;max-height:460px}.img-list img{height:100px;width:100px;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden}.item-img img{width:100%!important;height:100%!important;object-fit:cover}.price{font-weight:600;font-size:24px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:1px solid;align-items:center;gap:15px;height:44px;width:75%;justify-content:space-between;border-radius:12px}.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}.fc{font-size:17px;font-weight:700}.tab-group{display:flex;gap:10px}.tab{font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black;max-width:max-content}.discount-price{font-size:1.4rem}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#f7f7f7;padding:11px 20px;border-radius:12px;margin-top:unset!important;width:70%!important;border:1px solid #d3d3d347}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#f7f7f7;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:7px 25px;cursor:pointer;font-weight:600}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:5px;height:44px!important;justify-content:space-between;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px 15px;width:fit-content!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:fit-content!important;font-size:14px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.w-h-40{width:40px!important;height:40px!important}.height{height:auto;overflow-y:visible}.mobile-footer{display:none}video{border-radius:18px}@media (min-width: 1024px){.zoom:hover{transform:scale(1.04);transition:transform .2s ease-in-out;overflow:hidden}.product-heading{font-size:20px;font-weight:600;margin-top:5px}}@media only screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:100000001;background-color:#fff;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;color:#000;align-items:center;justify-content:center;gap:15px;width:20%}.mobile-footer .icons .mat-icon{font-size:26px}.product-desc{font-size:13px}.brief-desc{font-size:16px;margin-top:unset!important}.total-container{padding-top:10px!important;padding-bottom:4rem!important}.out-of-stock,.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important;height:348px}.item-img img{width:100%;height:348px!important}.display-none{display:none}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{width:25%;border:2px solid lightgray;cursor:pointer}.input-field{margin-top:.7rem!important;margin-bottom:.7rem!important}.prod-desc{margin-top:20px}.video-call-container{margin:0!important}.product-img{height:220px}.call-details{width:100%!important;padding:3%!important}.send-btn{padding:.5rem 1rem!important}.review-sec :is(input,textarea){width:100%!important}.height{width:100%;height:auto}.product-heading{font-size:23px;font-weight:600}.discount-price{font-size:1.7rem!important}.header-text{font-size:20px!important}}.send-btn{font-size:14px!important;padding:1rem;display:flex;align-items:center;justify-content:center;text-transform:uppercase;font-weight:600}.send-btn mat-icon{height:20px;width:20px;font-size:18px}a{text-decoration:none}.brief-desc{font-size:14px;color:#4e555e}.total-container{height:auto;position:relative;display:block!important;overflow:visible}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin:unset!important}.modal-content{height:100%;border:none;border-radius:0!important}@media (min-width:768px) and (max-width:991px){.item-img{position:relative;width:auto!important;height:auto!important;overflow:hidden}.item-img img{height:auto!important;width:auto!important}.height{width:min-content}}@media (min-width:1024px){.product-headig{font-size:35px}}.mat-accordion .mat-expansion-panel:last-of-type{box-shadow:none}@media (min-width: 1400px){.container{max-width:unset;width:95%;height:100vh;overflow-y:auto}}.width-max{width:max-content}.fw-600{font-weight:600}.cursor-pointer{cursor:pointer}.offcanvas-variant{border-radius:30px 0 0 30px}.varient-header,.varient-price{background:#f7f7f7}.varient-header{border-radius:30px 0 0}.confirm-btn{border-radius:0 0 0 30px;position:absolute!important;bottom:0!important}.style2-container{border:1px solid;border-radius:12px;margin:0}.varient-item{border-right:1px solid;align-content:center}.variant-head{font-size:12px;color:#33363e}.varient-data{margin-bottom:25px;border-bottom:1px solid black;padding-bottom:25px}.variant-value{font-size:.9rem;color:#000}.custom-text{border-radius:0 8px 8px 0;font-size:.9rem;font-weight:600}.scroll-wrap{flex-wrap:nowrap}.brand-text{word-wrap:break-word;white-space:normal;font-size:12px;font-weight:600;line-height:20px}.video-container{border:1px solid rgb(240,240,240);margin:10px 0;border-radius:12px}.video-head-text{font-size:16px;font-weight:700}.sub-text{font-size:11px;color:#6f7377;margin-bottom:10px}.sch-btn{font-size:1.2rem!important;color:#fff;padding:3px 0;margin-top:5px}.tax-text{font-size:.7rem;color:#6f7377}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.delivery-container{margin:35px 0 15px;background-color:transparent}.delivery-title{font-size:16px;font-weight:600;margin:0 0 12px;line-height:1.2;margin-bottom:.5rem!important}.location-container{border:1px solid #cfcfcf;border-radius:12px;padding:10px;margin-bottom:5px;width:100%}.location-icon{width:20px;height:20px;background-color:#374151;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}.location-icon:before{content:\"\";width:8px;height:8px;background-color:#fff;border-radius:50%;position:absolute}.postal-code-input{font-size:12px;font-weight:600;letter-spacing:.5px;border:none;outline:none;background:transparent;width:90%}.postal-code-input::placeholder{font-weight:500}.locate-btn{background:none!important;border:none!important;font-weight:600;color:#111827;font-size:13px!important;padding:0!important;box-shadow:none!important;width:auto!important;white-space:nowrap}.gps{font-size:17px}.locate-btn:focus{box-shadow:none!important}.delivery-section{margin-bottom:15px;border:1px solid rgb(240,240,240);padding:10px;border-radius:12px}.delivery-icon{font-size:18px;color:#ec4899;margin-right:14px;width:20px}.delivery-text{font-size:14px;font-weight:700}.store-section{border:1px solid rgb(240,240,240);padding:10px;border-radius:12px;margin-bottom:15px}.store-item{margin-bottom:11px}.store-icon{font-size:18px;color:#f97316;margin-right:14px;margin-top:2px;width:20px}.store-details{flex:1}.store-text{font-size:14px}.store-name{font-weight:700}.availability-section{margin-bottom:6px}.availability-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;color:#d97706;background-color:#fef3c7;padding:4px 8px;border-radius:12px;letter-spacing:.5px}.other-stores-text{font-size:14px;color:#6b7280;line-height:1.4}.other-stores-link{color:#6b46c1;cursor:pointer;text-decoration:underline}.other-stores-link:hover{color:#553c9a}.find-store-btn{width:100%!important;padding:8px 20px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px}.try-home-section{border-radius:12px;padding:10px;border:1px solid rgb(240,240,240)}.try-home-item{margin-bottom:10px;padding:0}.home-icon{font-size:18px;color:#6b46c1;margin-right:14px;margin-top:2px;width:20px}.try-home-details{flex:1}.try-home-text{font-size:14px;font-weight:700;color:#374151}.free-text{font-size:14px;color:#6b7280}.appointment-text{font-size:14px;color:#6b7280;line-height:1.4}.appointment-available{font-weight:500;color:#374151}.book-appointment-btn{background:#111827;color:#fff;border:none;padding:10px 20px;border-radius:12px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px;transition:all .2s ease;width:100%}.book-appointment-btn:hover{background:#000;transform:translateY(-1px);box-shadow:0 4px 8px #0000001a}@media (max-width: 480px){.container{display:flex;align-items:center;flex-direction:column}.location-section{padding:12px 0}.try-home-section{padding:20px}}.w-90{width:90%}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.w-12{width:12%!important}.w-88{width:88%!important}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;position:absolute;bottom:20px;left:10px;width:95%!important}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.error-border{border:2px solid #dc3545!important}.offcanvas-small{height:72vh;top:25%;width:35%;border-radius:50px 0 0 50px}.rating{width:max-content;border:1px solid;border-radius:20px;padding:0 10px;margin-bottom:.5rem}.rating-no{padding-right:7px;margin:0;border-right:1px solid;font-size:.75rem}.p-10-20{padding:10px 30px}.price-break-header{font-size:19px;font-weight:600}.price-container{border-bottom:1px solid rgb(233,233,233)}.price-container-header{font-size:14px;font-weight:600;color:#333}.total-ratings{font-size:.75rem}.header-row .col-3{font-size:12px;font-weight:500;color:#666}.value-row .col-3{font-size:14px;font-weight:400;color:#333}.value-row .col-3.total{font-weight:600}.summary-row .col-6{font-size:15px;font-weight:500;color:#333;padding:unset}.summary-row .col-6.total{font-weight:600;padding-right:10px}.summary-row{padding:0 42px}.error-border{border:2px solid #e74c3c!important;box-shadow:0 0 5px #e74c3c4d!important}.form-control,.input-field input{transition:border-color .3s ease,box-shadow .3s ease}.error-border:focus{border-color:#e74c3c!important;box-shadow:0 0 8px #e74c3c80!important}.input-field input:focus{transform:scale(1.02)}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:-.125em;border:.125em solid currentcolor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}.spinner-border-sm{width:.875rem;height:.875rem;border-width:.125em}@keyframes spinner-border{to{transform:rotate(360deg)}}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.rv-section{padding:2rem 0;background:transparent}.rv-header{display:flex;justify-content:space-between;align-items:flex-start;gap:3rem}.rv-header-left{flex:1}.rv-title{font-size:1.4rem;font-weight:700;color:#111827;margin-bottom:.75rem}.rv-average-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}.rv-stars{display:flex;gap:2px}.rv-avg-num{font-size:1.4rem;font-weight:700;color:#111827}.rv-avg-label{font-size:.95rem;color:#6b7280;font-weight:400}.rv-count{font-size:.9rem;font-weight:600}.rv-bars{flex:1;max-width:420px;display:flex;flex-direction:column;gap:6px}.rv-bar-row{display:flex;align-items:center;gap:3px}.rv-bar-label{font-size:15px;font-weight:600;color:#111827;width:10px;text-align:right;flex-shrink:0}.rv-bar-track{flex:1;height:10px;background-color:#f3f4f6;border-radius:3px;overflow:hidden}.rv-bar-fill{height:100%;background-color:#eab308;border-radius:3px}.rv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.rv-card{padding:12px;border:1px solid #e5e7eb;border-radius:10px;background:#fff}.rv-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.85rem}.rv-reviewer{display:flex;align-items:center;gap:.7rem}.rv-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0}.rv-name-date{display:flex;flex-direction:column;gap:2px}.rv-name{font-size:16px;font-weight:600;color:#374151}.rv-date{font-size:.75rem;color:#9ca3af}.rv-card-stars{display:flex;gap:2px;flex-shrink:0}.rv-text{font-size:.88rem;line-height:1.65;color:#4b5563;margin:0}.rv-images{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.rv-img-link{display:block;flex-shrink:0;border-radius:8px;overflow:hidden;border:1px solid #e5e7eb}.rv-img-thumb{width:72px;height:72px;object-fit:cover;display:block;transition:transform .2s ease}.rv-img-link:hover .rv-img-thumb{transform:scale(1.05)}@media (max-width: 768px){.rv-header{flex-direction:column;gap:1.5rem}.rv-bars{max-width:100%}.rv-grid{grid-template-columns:1fr}}.review-section{padding:4rem 1rem;border-top:1px solid #f3f4f6;margin-top:4rem;background:transparent!important}.review-summary-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4rem;gap:3rem}.rating-summary-left{flex:1}.rating-summary-left h2.reviews-header-title{font-size:1.75rem;font-weight:700;margin-bottom:0;color:#111827}.average-score-container{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.average-score{color:#111827;display:flex;align-items:baseline;gap:8px}.average-score .score-num{font-size:1.5rem;font-weight:700}.average-score .score-text{font-size:1.1rem;font-weight:400;color:#111827}.total-reviews-count{font-weight:600;font-size:1.1rem;display:block}.rating-distribution{flex:1;max-width:480px}.rating-bar-row{display:flex;align-items:center;gap:1.25rem;margin-bottom:.85rem}.star-label{display:flex;align-items:center;justify-content:flex-start;width:35px;line-height:1}.progress-bar-bg{flex:1;height:12px;background-color:#f3f4f6;border-radius:9999px;overflow:hidden}.progress-bar-fill{height:100%;background-color:#eab308;border-radius:9999px}.review-actions-bar-minimal{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.write-review-btn-minimal{padding:.6rem 1.25rem;background:#f8f9fa;color:#4b5563;border:none;border-radius:8px;font-weight:500;font-size:.9rem;cursor:pointer;transition:all .2s}.write-review-btn-minimal:hover{background:#e5e7eb}.sort-dropdown-minimal select{padding:.6rem 2.25rem .6rem 1rem;border:1px solid #d1d5db;border-radius:8px;background:#fff;font-size:.9rem;color:#4b5563;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .75rem center;background-size:1rem;cursor:pointer}.reviews-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}.review-card{padding:1.5rem;border:1px solid #e5e7eb;border-radius:12px;background:#fff;box-shadow:none}.review-divider{margin:2rem 0;border:none;border-top:1px solid #f3f4f6}.reviews-header-title{font-size:1.4rem;font-weight:700;color:#111827;margin-bottom:0}.review-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.25rem}.reviewer-info{display:flex;align-items:center;gap:1rem}.reviewer-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#f3f4f6}.reviewer-name{font-weight:600;font-size:.95rem;color:#374151}.review-date-text{font-size:.8rem;color:#9ca3af}.reviewer-name-date{display:flex;flex-direction:row;align-items:center;gap:8px}.review-card-rating{display:flex;gap:2px}.review-card-text{font-size:1rem;line-height:1.7;color:#4b5563}.product-tabs-container{border-bottom:1px solid #f3f4f6;margin-bottom:8px}.tab-item{padding:1rem 0;font-weight:600;font-size:1.1rem;color:#6b7280;cursor:pointer;position:relative;transition:color .2s}.tab-content-pane h3{font-size:1.5rem;font-weight:700;margin-bottom:1.5rem}.tab-content-pane p{color:#4b5563;line-height:1.8;font-size:1.05rem}@media (max-width: 1024px){.reviews-grid{grid-template-columns:1fr}}@media (max-width: 768px){.review-summary-header{flex-direction:column;gap:2rem}.rating-distribution{max-width:100%}.bento-grid{height:auto;display:flex;flex-direction:column}.tabs-list{gap:1.5rem;overflow-x:auto}}.home-appointment-text{font-size:.8rem;color:#4e555e}.home-appointment-text span{font-weight:600}.video-call-img{height:120px;margin:0;padding:0;border-radius:45px}.video-call-img img{border-top-left-radius:12px;border-bottom-left-radius:12px}.discount{background:#fff3f2;padding:15px 15px 20px;margin-top:14px;border-radius:8px;display:flex;flex-direction:column;gap:5px;position:relative}.discount p{margin-bottom:0;color:#4f3267;font-weight:700;font-size:1rem}.discount .offer{color:#eb4f5c}.discount:before{content:\"\";display:block;height:44px;width:4px;background:#eb4f5c;position:absolute;left:0;top:16px;border-top-right-radius:20px;border-bottom-right-radius:20px}.metal-purity{display:flex;flex-direction:column;gap:10px}.scrollable-content{height:100%;max-height:95vh;overflow-y:auto}.style-2-img{max-height:70%;height:100%!important}.ring-size-video{background:#f0ebff;display:flex;justify-content:space-between;align-items:center;height:45px;padding:12px;border-radius:10px;margin-top:20px;margin-bottom:20px}.ring-size-video .text{color:#4f3267;font-size:.9rem}.ring-size-video .learn-how{color:#de57e9;font-weight:700;font-size:1rem;display:flex;gap:5px;align-items:center;cursor:pointer}.ring-size-video .learn-how mat-icon{font-size:20px;display:flex;align-items:center}.ring-size-video p{margin-bottom:0}.video-modal{height:90vh!important;width:90vw!important;max-width:none}.video-modal .modal-body{padding:0}.review-section{border-radius:10px;padding:15px}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.detail-review-container{display:flex;max-width:1200px;margin:0 auto;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px #0000001a}.image-section{flex:1;background:#000;position:relative;min-height:400px}.product-image{width:100%;height:100%;object-fit:cover;background:linear-gradient(135deg,#e8e8e8,#d0d0d0);display:flex;align-items:center;justify-content:center;max-height:400px;position:relative}.product-image img{height:100%;width:100%;object-fit:contain}.earbuds-container{position:relative;width:300px;height:200px}.charging-case{width:200px;height:120px;background:linear-gradient(145deg,#f0f0f0,#e0e0e0);border-radius:25px;position:absolute;top:40px;left:50px;box-shadow:inset 0 4px 8px #0000001a}.charging-case:before{content:\"\";position:absolute;inset:10px;background:linear-gradient(145deg,#e8e8e8,#d8d8d8);border-radius:15px;box-shadow:inset 0 2px 4px #0000001a}.earbud{position:absolute;width:45px;height:15px;background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border-radius:8px;box-shadow:0 2px 4px #0003}.earbud:before{content:\"noise\";position:absolute;top:2px;left:50%;transform:translate(-50%);font-size:6px;color:#888;font-weight:300}.earbud.left{top:70px;left:80px}.earbud.right{top:90px;left:130px}.earbud.right:before{color:#ff6b35}.review-section{flex:1;padding:30px;background:#fafafa}.reviewer-header{display:flex;align-items:center;margin-bottom:15px}.reviewer-avatar{width:40px;height:40px;background:#ccc;border-radius:50%;margin-right:12px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#666}.reviewer-name{font-size:16px;font-weight:500;color:#333}.detail-rating{margin:10px 0}.stars{display:flex;gap:2px;margin-bottom:5px}.star{color:#ff9500;font-size:18px}.thumbs{display:flex;gap:5px}.thumb{color:#ff9500;font-size:16px}.review-date{font-size:14px;color:#666;margin:15px 0}.review-text{font-size:16px;line-height:1.5;color:#333;margin-bottom:25px}.images-section h3{font-size:16px;color:#666;margin-bottom:15px;font-weight:500}.review-images{display:flex;gap:10px}.review-image{width:60px;height:60px;background:#ddd;border-radius:6px;border:2px solid #e0e0e0;cursor:pointer;transition:border-color .3s}.review-image img{width:100%;height:100%}.review-image:hover,.review-image.selected{border-color:#007185}.navigation-arrows{position:absolute;top:20px;right:20px;display:flex;flex-direction:column;gap:10px}.arrow{width:40px;height:40px;background:#fffc;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:#666;transition:background-color .3s;position:absolute;transform:rotate(90deg)}.backward-arrow{left:10px}.forward-arrow{right:10px}.arrow:hover{background:#fff}@media (max-width: 768px){.review-container{flex-direction:column}.image-section{min-height:300px}.review-section{padding:20px}}.review-modal{max-width:none;width:70vw}.review-modal .modal-body{padding:0}@media screen and (max-width: 475px){.offcanvas-small{height:100vh;width:100%;top:0}.review-modal{margin:0;height:100%;width:100%}.detail-review-container{flex-direction:column;height:100%}.product-image{max-height:289px}.image-section{min-height:289px}.video-modal{margin:0;height:100vh!important;width:100vw!important;overflow:hidden}}.modal{z-index:100000033}.breadcrumbs-modern{font-size:.85rem;color:#6b7280;margin-bottom:.5rem}.breadcrumb-item.active{color:#111827;font-weight:500}.product-title-modern{font-size:2rem;font-weight:800;color:#111827;margin:0;line-height:1.2;font-family:var(--website-font-family)}.product-price-modern{font-size:1.75rem;font-weight:700;color:#111827;font-family:var(--website-font-family)}.rating-line-modern{margin-top:.25rem}.rating-score-text{font-weight:700;font-size:1rem;color:#111827}.rating-count-text{font-size:.95rem;color:#10b981;font-weight:600;cursor:pointer}.product-description-brief{font-size:1rem;line-height:1.7;color:#4b5563;margin-top:1.5rem}.low-stock-text{color:#dc2626;font-weight:700;font-size:.875rem}.variants-modern-container{margin:2.5rem 0}.varient-key{font-size:.9rem;font-weight:800;color:#111827;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem}.color-swatch-modern{width:36px;height:36px;border-radius:50%;cursor:pointer;border:3px solid white;box-shadow:0 0 0 1px #e5e7eb;transition:all .25s cubic-bezier(.4,0,.2,1)}.color-swatch-modern:hover{transform:scale(1.15)}.color-swatch-modern.active{box-shadow:0 0 0 2px #111827}.box-varient-modern{padding:.75rem 1.5rem;border:2px solid #f3f4f6;border-radius:10px;font-size:.95rem;font-weight:700;color:#374151;cursor:pointer;transition:all .2s;min-width:70px;text-align:center;background:#fff}.box-varient-modern:hover{border-color:#d1d5db;background:#f9fafb}.box-varient-modern.active{border-color:#111827;background:#111827;color:#fff}.quantity-container{margin-top:1rem}.quantity-selector-modern{border:1px solid #e5e7eb;border-radius:12px;width:fit-content;background:#f9fafb;padding:2px}.qty-btn{width:44px;height:44px;border:none;background:transparent;font-size:1.5rem;color:#111827;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;border-radius:10px}.qty-btn:hover:not(:disabled){background:#fff;box-shadow:0 2px 4px #0000000d}.qty-btn:disabled{color:#d1d5db;cursor:not-allowed}.qty-display{width:50px;text-align:center;font-weight:700;color:#111827;font-size:1.1rem}.out-of-stock-modern{background:#f3f4f6;color:#9ca3af;padding:1.1rem 2.5rem;border:none;border-radius:14px;font-weight:800;font-size:1.1rem;cursor:not-allowed}.wishlist-btn-modern{width:56px;height:56px;border:2px solid #f3f4f6;border-radius:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;background:#fff}.wishlist-btn-modern:hover{background:#fef2f2;border-color:#fecaca}.wishlist-btn-modern mat-icon{font-size:26px}.thumbnail-column{padding-right:15px!important}.thumbnail-list::-webkit-scrollbar{display:none}.thumbnail-list{-ms-overflow-style:none;scrollbar-width:none}.image-section-modern{padding-right:2.5rem!important;padding-left:0!important;width:60%!important;max-width:60%!important;flex:0 0 60%!important;margin-top:0!important}.detail-section-modern{padding-left:.5rem!important;padding-right:0!important;width:40%!important;max-width:40%!important;flex:0 0 40%!important;margin-top:0!important}.thumbnail-column{width:90px!important;flex:0 0 90px!important}.item-img{width:100%!important;max-width:100%;margin:0;border-radius:20px;overflow:hidden;background:#f9fafb;position:relative}lib-ngx-image-zoom{width:100%!important;display:block!important}::ng-deep .ngx-image-zoom-container{width:100%!important;height:auto!important;aspect-ratio:1/1}.style-1-vertical{display:flex;flex-direction:column;width:100%}.main-image-container{width:100%;aspect-ratio:1 / 1}.thumbnail-row{display:flex;gap:8px;overflow-x:auto;padding:12px 0}.thumbnail-img{min-width:80px;width:80px;height:80px;object-fit:cover;border-radius:8px;border:2px solid transparent;cursor:pointer;transition:border-color .2s}.active-thumb{border-width:2px;border-style:solid}.bento-grid{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:15px;width:100%;aspect-ratio:5/4}.bento-item-large{grid-row:span 2;border-radius:24px;overflow:hidden}.bento-item-small{border-radius:20px;overflow:hidden}.bento-grid img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.bento-grid img:hover{transform:scale(1.05)}@media (max-width: 991px){.image-section-modern,.detail-section-modern{width:100%!important;max-width:100%!important;flex:0 0 100%!important;padding:0!important}.bento-grid{grid-template-columns:1fr;grid-template-rows:auto;aspect-ratio:auto}.bento-item-large{grid-row:span 1}}.bento-masonry-container{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:16px;width:100%}.bento-item-modern{border-radius:16px;overflow:hidden;background:#fdfdfd;aspect-ratio:1 / 1;transition:all .4s cubic-bezier(.4,0,.2,1)}.bento-img-modern{width:100%;height:100%;display:block;object-fit:cover;background:#fdfdfd;cursor:pointer;transition:transform .6s ease}.bento-item-modern:hover{transform:translateY(-4px);box-shadow:0 12px 30px #00000014}.bento-item-modern:hover .bento-img-modern{transform:scale(1.03)}.detail-section-modern{position:sticky;top:0;height:max-content;max-height:calc(100vh - 100px);overflow-y:auto;overflow-x:hidden;padding-left:2rem!important;scrollbar-width:none}.detail-section-modern::-webkit-scrollbar{display:none}.product-hero-card-modern{border:none;box-shadow:none;z-index:10;position:relative}.tabs-list{display:flex;justify-content:flex-start;gap:10px;list-style:none;padding:0;margin-bottom:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap}.tabs-list::-webkit-scrollbar{display:none}.tab-item{font-size:1rem;font-weight:600;color:#6b7280;padding:.5rem 1rem;border-radius:0;cursor:pointer;transition:all .25s;background:transparent;border-bottom:2px solid transparent;white-space:nowrap;flex-shrink:0}.tab-item:hover{background:transparent;color:#111827}.tab-content-pane{padding-top:.5rem}@media (max-width: 1024px){.product-hero-card-modern{padding:25px}.tab-content-pane{width:100%}}@media (max-width: 991px){.bento-masonry-container{grid-template-columns:1fr;grid-auto-rows:auto}.bento-item-modern.featured{grid-row:span 1;aspect-ratio:1 / 1}.product-hero-card-modern{position:static;padding:0;box-shadow:none;border:none;background:transparent;z-index:auto}.detail-section-modern{padding-left:0!important;margin-top:2rem;position:static!important;max-height:none!important;height:auto!important;overflow-y:visible!important;overflow-x:visible!important}.image-section-modern{padding-right:0!important}.tab-item{padding:.6rem 1rem;font-size:.95rem}.product-tabs-container{padding:0 4px}}.product-info-minimal{display:flex;flex-direction:column}.breadcrumbs-modern{display:flex;align-items:center;gap:8px;font-size:.95rem;color:#6b7280;font-weight:500}.breadcrumbs-modern .dot{font-size:1.2rem;line-height:1}.title-price-row-modern{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.product-title-modern{font-size:1.5rem;font-weight:800;color:#111827;margin:0;line-height:1.2}.product-price-modern{font-size:1.5rem;font-weight:500;color:#111827;white-space:nowrap}.rating-row-modern{display:flex;align-items:center;gap:12px;font-size:1rem;flex-wrap:wrap}.rating-score{font-weight:700;color:#111827}.separator{color:#e5e7eb}.reviews-link{font-weight:600}::ng-deep .rating-row-modern p-rating .p-rating-icon.p-rating-icon-active svg,::ng-deep .rating-row-modern p-rating .p-icon{color:#eab308!important;fill:#eab308!important}::ng-deep .rating-row-modern p-rating .p-rating-icon:not(.p-rating-icon-active) svg,::ng-deep .rating-row-modern p-rating .p-rating-icon:not(.p-rating-icon-active) .p-icon{color:#eab308!important;fill:#eab308!important;opacity:.25}.product-brief-modern{font-size:.95rem;line-height:1.7;color:#4b5563;margin-top:.5rem;text-align:justify}.write-review-btn{display:inline-flex;align-items:center;justify-content:center;padding:.65rem 1.75rem;background:#f8f9fa;color:#374151;border:1px solid #e5e7eb;border-radius:10px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;letter-spacing:.02em}.write-review-btn:hover{background:#f1f3f5;border-color:#d1d5db;transform:translateY(-1px);box-shadow:0 2px 8px #00000012}@media (max-width: 991px){.product-title-modern,.product-price-modern{font-size:1.3rem}}@media (max-width: 480px){.title-price-row-modern{flex-direction:column;gap:4px}.product-title-modern{font-size:1.2rem}.product-price-modern{font-size:1.2rem;white-space:normal}.rv-section{padding:1rem 0}.rv-header{gap:1rem}.rv-title{font-size:1.15rem;margin-bottom:.5rem}.rv-avg-num{font-size:1.15rem}.rv-bars{max-width:100%;width:100%}.rv-grid{grid-template-columns:1fr;gap:.75rem}.rv-card{padding:10px}.rv-name{font-size:14px}.tabs-list{gap:0}.tab-item{padding:.55rem 1rem;font-size:.9rem}.header-text{font-size:15px!important}.product-header{flex-wrap:wrap;gap:8px}.pricebreakup-btn{font-size:10px;padding:6px}.write-review-btn{width:100%;padding:.65rem 1rem}}.pb-glass-container{padding:16px;border-radius:16px}.pb-glass-card{background:#fff9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.85);border-radius:12px;margin-bottom:12px;overflow:hidden}.pb-glass-header{padding:10px 16px;font-weight:700;font-size:12px;letter-spacing:1.5px;text-transform:uppercase}.pb-glass-row{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;font-size:14px;border-bottom:1px solid rgba(0,0,0,.04)}.pb-glass-row:last-child{border-bottom:none}.pb-glass-row:nth-child(2n){background:#f8fafc99}.pb-label{color:#6b7280;font-weight:500}.pb-value{font-weight:600;color:#1f2937}.pb-summary-card{background:#ffffffb3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(203,213,225,.5);border-radius:12px;overflow:hidden}.pb-summary-row{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;font-size:14px;color:#374151;border-bottom:1px solid rgba(0,0,0,.05)}.pb-grand-total{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;font-weight:700;font-size:16px;letter-spacing:.5px}.item-code-row{margin-bottom:6px}.item-code-value{display:inline-block;padding:2px 10px;border-radius:999px;background:#f1f5f9;color:#475569;font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;border:1px solid #e2e8f0}.buy-now-btn{background:transparent!important;border:1.5px solid currentColor!important;color:inherit!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: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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: 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: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: 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: NgxImageZoomModule }, { kind: "component", type: i17.NgxImageZoomComponent, selector: "lib-ngx-image-zoom", inputs: ["thumbImage", "fullImage", "zoomMode", "magnification", "minZoomRatio", "maxZoomRatio", "scrollStepSize", "enableLens", "lensWidth", "lensHeight", "circularLens", "enableScrollZoom", "altText", "titleText"], outputs: ["zoomScroll", "zoomPosition", "imagesLoaded"] }, { kind: "component", type: FeaturedProductsComponent, selector: "simpo-featured-products", inputs: ["data", "responseData", "index", "isRelatedProduct", "isBrowseProduct", "edit", "customClass", "delete", "nextComponentColor"], outputs: ["changeDetailProduct"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i3$3.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SpeedDialModule }, { 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: "ngmodule", type: PanelModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId", "itemIndex"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }] }); }
|
|
20433
20472
|
}
|
|
20434
20473
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductDescComponent, decorators: [{
|
|
20435
20474
|
type: Component,
|
|
@@ -20461,7 +20500,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
20461
20500
|
SpacingHorizontalDirective,
|
|
20462
20501
|
SanitizeHtmlPipe,
|
|
20463
20502
|
NgxSkeletonLoaderModule
|
|
20464
|
-
], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n <section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\n\n <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\n <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\n </div> -->\n <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [spacingHorizontal]=\"stylesLayout\"\n [simpoLayout]=\"styles?.layout\" #container>\n <!-- <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\"\n (click)=\"routeToHome()\">Home</a> /\n <span>{{ responseData?.name | titlecase }}</span>\n </div> -->\n <div class=\"row m-0 w-100 mt-lg-4 h-auto overflow-visible\" #aboveHeight>\n <div class=\"col-lg-6 col-sm-12 image-section-modern\" #imageSection>\n <div class=\"d-flex flex-column justify-content-start gap-1\">\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\n </div>\n </div>\n <div class=\"col-lg-6 col-sm-12 detail-section-modern \" #detailSection>\n <div class=\"product-hero-card-modern\">\n <ng-container *ngIf=\"isMobile\">\n <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\n </ng-container>\n\n <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\n\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\n </ng-container>\n </div>\n\n\n <ng-container *ngIf=\"ecomConfigs?.deliveryEnabled\">\n <!-- *ngIf=\"ecomConfigs?.deliveryEnabled\" -->\n <ng-container *ngTemplateOutlet=\"DeliverySection\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"ecomConfigs?.storesEnabled\">\n <!-- *ngIf=\"ecomConfigs?.storesEnabled\" -->\n <ng-container *ngTemplateOutlet=\"StoreSection\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"appointmentSettings?.homeVisitProductsEnabled\">\n <!-- *ngIf=\"appointmentSettings?.homeVisitProductsEnabled\" -->\n <ng-container *ngTemplateOutlet=\"TryAtHome\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"appointmentSettings?.videoCallProductsEnabled\">\n <!-- *ngIf=\"appointmentSettings?.videoCallProductsEnabled\" -->\n <ng-container *ngTemplateOutlet=\"videoCallSchedule\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"ecomConfigs?.brandPromiseEnabled\">\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n </ng-container>\n\n\n\n <!-- Moved descriptors to Details tab below -->\n\n <!-- <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\n [innerHTML]=\"responseData.brief\"></div> -->\n <!-- Moved tags to Details tab below -->\n <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\n <!-- <ng-container>\n <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\n </ng-container> -->\n </div>\n </div>\n <!-- Tabs Navigation -->\n <div class=\"product-tabs-container\">\n <ul class=\"tabs-list\">\n <li class=\"tab-item\" [class.active]=\"activeTab == 'Details'\"\n [style.color]=\"activeTab == 'Details' ? styles?.background?.accentColor : ''\"\n [style.borderColor]=\"activeTab == 'Details' ? styles?.background?.accentColor : 'transparent'\"\n (click)=\"changeTab('Details')\">Details</li>\n <li class=\"tab-item\" *ngIf=\"reviewsData\" [class.active]=\"activeTab == 'Reviews'\"\n [style.color]=\"activeTab == 'Reviews' ? styles?.background?.accentColor : ''\"\n [style.borderColor]=\"activeTab == 'Reviews' ? styles?.background?.accentColor : 'transparent'\"\n (click)=\"changeTab('Reviews')\">Reviews</li>\n <li class=\"tab-item\" *ngIf=\"materialBasedPricing\" [class.active]=\"activeTab == 'PriceBreakup'\"\n [style.color]=\"activeTab == 'PriceBreakup' ? styles?.background?.accentColor : ''\"\n [style.borderColor]=\"activeTab == 'PriceBreakup' ? styles?.background?.accentColor : 'transparent'\"\n (click)=\"changeTab('PriceBreakup')\">Price Breakup</li>\n </ul>\n </div>\n\n <!-- Tab Content -->\n <div class=\"tab-content-pane\">\n <div *ngIf=\"activeTab == 'Details'\">\n <!-- Integrated descriptors and tags here -->\n <div class=\"mt-2\">\n <ng-container *ngTemplateOutlet=\"descriptors\"></ng-container>\n </div>\n </div>\n\n <div *ngIf=\"activeTab == 'Reviews'\">\n <ng-container *ngTemplateOutlet=\"ReviewsSection\"></ng-container>\n </div>\n\n <div *ngIf=\"activeTab == 'PriceBreakup'\">\n <div class=\"pb-glass-container mt-2\">\n\n <!-- One card per material \u2014 generic, works for any material type -->\n <ng-container *ngFor=\"let ele of responseData?.materials\">\n <div class=\"pb-glass-card\">\n <div class=\"pb-glass-header\"\n [style.background]=\"styles?.background?.accentColor\"\n [style.color]=\"'#fff'\">\n {{ ele?.materialName | titlecase }}\n </div>\n <div class=\"pb-glass-row\">\n <span class=\"pb-label\">Purity</span>\n <span class=\"pb-value\">{{ ele?.purity }}</span>\n </div>\n <div class=\"pb-glass-row\">\n <span class=\"pb-label\">Net Weight</span>\n <span class=\"pb-value\">{{ ele?.quantity }} {{ ele?.unit | titlecase }}</span>\n </div>\n <div class=\"pb-glass-row\">\n <span class=\"pb-label\">Rate / {{ ele?.unit | titlecase }}</span>\n <span class=\"pb-value\">\u20B9{{ ele?.pricePerUnit | number:'1.2-2' }}</span>\n </div>\n <div class=\"pb-glass-row\">\n <span class=\"pb-label\">Value</span>\n <span class=\"pb-value\">\u20B9{{ (ele?.quantity * ele?.pricePerUnit) | number:'1.2-2' }}</span>\n </div>\n </div>\n </ng-container>\n\n <!-- Making Charges card -->\n <div class=\"pb-glass-card\">\n <div class=\"pb-glass-header\"\n [style.background]=\"styles?.background?.accentColor\"\n [style.color]=\"'#fff'\">\n Making Charges\n </div>\n <!-- <div class=\"pb-glass-row\">\n <span class=\"pb-label\">Net Weight</span>\n <span class=\"pb-value\">{{ responseData?.baseWeight }}</span>\n </div> -->\n <div class=\"pb-glass-row\" *ngIf=\"responseData?.makingChargePercentage && responseData.makingChargePercentage > 0\">\n <span class=\"pb-label\">Making Charge %</span>\n <span class=\"pb-value\">{{ responseData?.makingChargePercentage }}%</span>\n </div>\n <div class=\"pb-glass-row\" *ngIf=\"responseData?.jewelryPriceBreakup?.makingChargeAmount && responseData?.jewelryPriceBreakup?.makingChargeAmount > 0\">\n <span class=\"pb-label\">Value</span>\n <span class=\"pb-value\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}</span>\n </div>\n </div>\n\n <!-- Summary card -->\n <div class=\"pb-summary-card\">\n <div class=\"pb-summary-row\">\n <span>Total Value</span>\n <span>\u20B9{{ responseData?.jewelryPriceBreakup?.priceWithoutTax | number:'1.2-2' }}</span>\n </div>\n <div class=\"pb-summary-row\">\n <span>Tax ({{ responseData?.jewelryPriceBreakup?.taxRef?.taxPercent }}% GST)</span>\n <span>\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}</span>\n </div>\n <div class=\"pb-grand-total\"\n [style.background]=\"styles?.background?.accentColor\"\n [style.color]=\"'#fff'\">\n <span>TOTAL</span>\n <span>\u20B9{{ (responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) | number:'1.2-2' }}</span>\n </div>\n </div>\n\n </div>\n </div>\n </div>\n </section>\n <ng-container *ngIf=\"recentViewItemList?.length\">\n <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"recentViewItemList\"\n [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\n </ng-container>\n <!-- <ng-container *ngIf=\"recentViewItemList?.length\">\n <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\n [isRelatedProduct]=\"true\"></simpo-featured-products>\n </ng-container> -->\n <!-- <ng-container>\n <simpo-customer-review [data]=\"data\"></simpo-customer-review>\n </ng-container> -->\n\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\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 *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n </section>\n</ng-container>\n\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\n<div class=\"mobile-footer\">\n <div class=\"icons\">\n <div (click)=\"goToCart()\">\n <mat-icon>shopping_cart</mat-icon>\n </div>\n <div>\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\n *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\n *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n </div>\n </div>\n <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getButtonId(0)\">Out of\n Stock</button>\n <div class=\"quantity\" *ngIf=\"responseData?.quantity && !appointmentSettings?.videoCallProductsEnabled\"\n [style.borderColor]=\"data?.styles?.background?.accentColor\">\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\n [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\n <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\n </div>\n <button *ngIf=\"responseData?.quantity && appointmentSettings?.videoCallProductsEnabled && !videoCallAdded\" class=\"send-btn w-100\"\n [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" (click)=\"!edit ? addVideoCallCurrent() : ''\">\n <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\n <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\" class=\"w-75\">\n <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getButtonId(0)\"\n (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\n </div>\n</div>\n\n<ng-template #ReviewSection>\n <div class=\"review-sec\">\n <div class=\"title\">Customer Review</div>\n <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\n <span>Be the first to write a review</span>\n <button class=\"mt-3\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add\n Review' : 'Cancel Review'}}</button>\n <ng-container *ngIf=\"showReview\">\n <hr />\n <div class=\"user-review\">\n <div class=\"title\">Write a review</div>\n <span class=\"secondary-text\">RATING</span>\n <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\n <div>\n <span class=\"secondary-text\">Review Title</span>\n <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\n </div>\n <div>\n <span class=\"secondary-text\">Review</span>\n <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\n </div>\n <div class=\"review-action-btn\">\n <button [style.borderColor]=\"data?.styles?.background?.accentColor\"\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\n <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\n (click)=\"addProductReview()\"\n [disabled]=\"productReview == 0 && !reviewTitle?.length && !reviewDescription?.length\">Submit\n review</button>\n </div>\n </div>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #SocialIcons>\n <div class=\"d-flex\">\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\n [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\n <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\n <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\n <div style=\"position: relative;margin-right: 10px;\">\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\"\n [sectionId]=\"data?.id\"></simpo-socia-icons>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #ActionBtn>\n <div class=\"button-parent\">\n <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getButtonId(0)\">Out of\n Stock</button>\n <div class=\"quantity\" *ngIf=\"responseData?.quantity && !appointmentSettings?.videoCallProductsEnabled\"\n [style.borderColor]=\"data?.styles?.background?.accentColor\">\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\n [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\n <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\n </div>\n <button *ngIf=\"responseData?.quantity && appointmentSettings?.videoCallProductsEnabled && !videoCallAdded\" class=\"send-btn w-100\"\n [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\"\n [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\"\n (click)=\"!edit ? addVideoCallCurrent() : ''\">\n <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\n <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75\">\n <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getButtonId(0)\"\n (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\n </div>\n <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75 mt-2\">\n <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getButtonId(0)\"\n (click)=\"!edit ? buyNow() : ''\">Buy Now</button>\n </div>\n <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && !IsEcommerce\" class=\"w-75\">\n <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getButtonId(0)\" (click)=\"raiseLead()\"><mat-icon style=\"height:14px !important\">\n message</mat-icon>Notify Me</button>\n </div>\n <div class=\"favourite\" *ngIf=\"IsEcommerce\" (click)=\"isItemAsFavorite ? removeToFavourite() : addToFavourite()\">\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\"\n *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n </div>\n <div class=\"share-icon\" (click)=\"shareProduct()\">\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\">share</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #variants>\n <ng-container *ngIf=\"data?.styles?.customization == 'Style1'\">\n <ng-container *ngFor=\"let varient of varients | keyvalue\">\n <div class=\"mb-3\">\n <div class=\"varient-key\">{{varient.key}}</div>\n <div class=\"d-flex\" style=\"gap: 5px;\">\n <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\n [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\n [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\n (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\n </div>\n </div>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"data?.styles?.customization == 'Style2' && selectedVarient.size > 0\">\n <ng-container>\n <div class=\"row mt-2 style2-container w-100\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\n <div *ngFor=\"let item of selectedVarient | keyvalue\" class=\"px-3 py-2 varient-item\"\n [class]=\"getClass(selectedVarient)\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\n <div class=\"variant-head\">{{item.key | titlecase}}</div>\n <div class=\"variant-value text-start fw-semibold\">\n {{item.value |\n titlecase}}</div>\n </div>\n <div class=\"cursor-pointer p-0\" [class]=\"getClass(selectedVarient)\">\n <div class=\"custom-text d-flex align-items-center justify-content-center h-100 p-2\" data-bs-toggle=\"offcanvas\"\n data-bs-target=\"#offcanvasRightVariant\" [style.background]=\"data?.styles?.background?.accentColor\"\n [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">CUSTOMISE\n </div>\n </div>\n </div>\n </ng-container>\n </ng-container>\n</ng-template>\n\n<ng-template #ProductDesc>\n <div class=\"product-info-minimal\">\n <!-- Brand -->\n <div class=\"item-code-row\" *ngIf=\"responseData?.itemCategorisation?.itemBrand?.refName\">\n <span class=\"item-code-value\">by {{ responseData?.itemCategorisation?.itemBrand?.refName }}</span>\n </div>\n\n <!-- Item Code -->\n <div class=\"item-code-row\" *ngIf=\"responseData?.itemCode\">\n <span class=\"item-code-value\">{{ formatItemCode(responseData?.itemCode) }}</span>\n </div>\n\n <!-- Title and Price Row -->\n <div class=\"title-price-row-modern\">\n <h1 class=\"product-title-modern\">{{responseData?.name}}</h1>\n <div class=\"product-price-modern\">\n <span [innerHTML]=\"currency\"></span> {{responseData?.price?.sellingPrice |\n number:'1.0-0'}}\n </div>\n </div>\n\n <!-- Rating Row -->\n <div class=\"rating-row-modern\" *ngIf=\"responseData?.averageRating\">\n <p-rating [(ngModel)]=\"responseData.averageRating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\n <span class=\"rating-score\">{{responseData?.averageRating | number:'1.1-1'}}</span>\n <span class=\"separator\">|</span>\n <span class=\"reviews-link\" [style.color]=\"styles?.background?.accentColor\">\n {{responseData?.totalReviewCount}} reviews</span>\n </div>\n\n <!-- Brief Description -->\n <div class=\"product-brief-modern\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData?.brief | sanitizeHtml\">\n </div>\n </div>\n</ng-template>\n\n<ng-template #descriptors>\n <div class=\"row prod-desc mt-2\">\n <div>\n <!-- <div class=\"product-header d-flex align-items-center justify-content-between\">\n <span class=\"header-text\" *ngIf=\"responseData?.descriptor || responseData?.materials\">Product Details</span>\n <div class=\"pricebreakup-btn d-flex align-items-center justify-content-center cursor-pointer\"\n *ngIf=\"materialBasedPricing\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRightPriceBreakup\"\n [style.background]=\"data?.styles?.background?.accentColor\"\n [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">\n <mat-icon>add</mat-icon> PRICE BREAKUP\n </div>\n </div> -->\n <div class=\"description\">\n <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\n [innerHTML]=\"responseData?.descriptor?.name | sanitizeHtml\"\n [style.background]=\"data?.styles?.background?.color\"></div>\n </div>\n <div class=\"custom-specifications\" *ngIf=\"customFieldSpecs.length\">\n <div class=\"body-large spec-title\">Specifications</div>\n <table class=\"spec-table\">\n <tbody>\n <tr *ngFor=\"let spec of customFieldSpecs\">\n <th scope=\"row\">{{ spec.label }}</th>\n <td>{{ spec.value }}</td>\n </tr>\n </tbody>\n </table>\n </div>\n <!-- <ng-container *ngIf=\"materialBasedPricing\">\n <div class=\"jewellery-table-container\">\n <ng-container *ngFor=\"let ele of responseData?.materials\">\n <div class=\"jewel-container mt-2\">\n <div class=\"jewel-header\" [style.background]=\"getHeaderColor(ele.materialType)\">\n {{ele?.materialName | titlecase}}\n </div>\n <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor(ele.materialType)\">\n <div class=\"col-6 metal-purity\">\n <div class=\"row-header\">\n Net Weight/{{ele?.unit | titlecase}}\n </div>\n <div class=\"row-content\">\n {{ele.quantity + \" \" + (ele?.unit | titlecase)}}\n </div>\n </div>\n <div class=\"col-6 metal-purity\">\n <div class=\"row-header\">\n Purity\n </div>\n <div class=\"row-content\">\n {{ele.purity |\n titlecase}}\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container> -->\n </div>\n </div>\n\n</ng-template>\n\n<ng-template #ImageSection>\n <ng-container *ngIf=\"!varientLoading && (isMobile || data?.styles?.gridStyle == 'Style1')\">\n <div class=\"style-1-vertical d-flex flex-column w-100\">\n <div class=\"main-image-container p-0\">\n <div class=\"item-img rounded-3\">\n <lib-ngx-image-zoom *ngIf=\"currentImg\" [thumbImage]=\"currentImg\" [fullImage]=\"currentImg\" [zoomMode]=\"'hover'\"\n [magnification]=\"0.4\" [enableScrollZoom]=\"false\">\n </lib-ngx-image-zoom>\n <img *ngIf=\"!currentImg\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\"\n class=\"w-100 h-100 object-fit-cover\">\n </div>\n </div>\n <div class=\"thumbnail-row py-3 d-flex gap-2 overflow-auto hide-scroll\">\n <img class=\"img thumbnail-img\" *ngFor=\"let img of itemImages\" [src]=\"img.imgUrl\" (click)=\"changeImg(img.imgUrl)\"\n [class.active-thumb]=\"currentImg == img.imgUrl\"\n style=\"cursor: pointer; min-width: 80px; width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 2px solid transparent;\"\n [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!varientLoading && (!isMobile && data?.styles?.gridStyle == 'Style2')\">\n <div class=\"bento-masonry-container\">\n <div *ngFor=\"let img of itemImages; let i = index\" class=\"bento-item-modern\">\n <img [src]=\"img.imgUrl\" class=\"bento-img-modern\" (click)=\"changeImg(img.imgUrl)\">\n </div>\n </div>\n </ng-container>\n\n <div class=\"item-img\" *ngIf=\"varientLoading\">\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '100%',\n 'border-radius': '10px'\n }\">\n </ngx-skeleton-loader>\n </div>\n</ng-template>\n\n<ng-template #branding>\n <div class=\"row w-100\">\n <ng-container *ngFor=\"let brand of brandPromises\">\n <div class=\"col-4 d-flex flex-column align-items-center g-2\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n [src]=\"brand?.logoUrl\" alt=\"\" class=\"w-h-40 p-0 rounded-circle\">\n <div class=\"brand-text w-100 text-center py-2\">\n {{brand?.title | titlecase}}\n </div>\n </div>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #videoCallSchedule>\n <!-- *ngIf=\"appointmentSettings?.videoCallProductsEnabled\" -->\n <ng-container>\n <div class=\"row w-100 video-container\">\n <div class=\"col-4 video-call-img\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/697639c1786974532510Video_conference live.svg\"\n alt=\"\" class=\"w-100 h-100 \">\n </div>\n <div class=\"col-8 align-content-center\">\n <div class=\"video-head-text\">\n Live Video Call\n </div>\n <div class=\"sub-text\">\n Join a live video call with our consultants to see your favourite designs up close!\n </div>\n <button class=\"sch-btn text-center cursor-pointer\" *ngIf=\"!videoCallAdded\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getScheduleVideoCallButtonStyle()\" [buttonId]=\"getScheduleVideoCallButtonId()\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getScheduleVideoCallButtonId()\" (click)=\"!edit ? addVideoCallCurrent() : ''\">\n Schedule a Video Call\n </button>\n <ng-container *ngIf=\"videoCallAdded\">\n <div class=\"d-flex align-items-center gap-2\" style=\"color:#1E7A4B;\">\n <mat-icon>check_circle</mat-icon>\n <span>Added to your Video Call request</span>\n </div>\n <button class=\"sch-btn text-center cursor-pointer mt-2\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getScheduleVideoCallButtonStyle()\" [buttonId]=\"getScheduleVideoCallButtonId()\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getScheduleVideoCallButtonId()\" (click)=\"!edit ? continueVideoCallBooking() : ''\">Continue\n Booking</button>\n </ng-container>\n </div>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #DeliverySection>\n <div class=\"delivery-container\">\n <h2 class=\"delivery-title\">Delivery, Stores & Trial</h2>\n\n <!-- Location Section -->\n <div class=\"location-section mb-2\">\n <div class=\"location-container d-flex align-items-center justify-content-between\"\n [style.borderColor]=\"styles?.background?.accentColor\">\n <div class=\"d-flex align-items-center flex-grow-1 me-2\" style=\"width: calc(100% - 100px);\">\n <div class=\"d-flex mx-1\"><mat-icon\n class=\"gps d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\n </div>\n <input type=\"number\" class=\"postal-code-input flex-grow-1\" placeholder=\"Enter PinCode\" [(ngModel)]=\"pincode\"\n style=\"width: 100%;\">\n </div>\n <button class=\"btn locate-btn\" (click)=\"getStoreDetails()\">Submit</button>\n </div>\n <div *ngIf=\"!isPinCode\" style=\"color: red;\">Pin code must be 6 digits.</div>\n </div>\n\n <ng-container *ngIf=\"(pincode?.toString().length ?? 0) == 6\">\n <!-- Free Delivery Section -->\n <div class=\"delivery-section\">\n <div class=\"d-flex align-items-center\">\n <span class=\"delivery-icon d-flex align-items-center\">\n <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\n height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" class=\"feather feather-gift\">\n <polyline points=\"20 12 20 22 4 22 4 12\"></polyline>\n <rect x=\"2\" y=\"7\" width=\"20\" height=\"5\"></rect>\n <line x1=\"12\" y1=\"22\" x2=\"12\" y2=\"7\"></line>\n <path d=\"M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z\"></path>\n <path d=\"M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z\"></path>\n </svg>\n </span>\n\n <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges == 0\">Expected\n Delivery by {{ getDateAfterxDays() | date:'d MMM' }}</span>\n\n <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges > 0\">Your\n expected Order will\n Deliver by {{ getDateAfterxDays() | date:'d MMM' }} with a Delivery Charge of\n \u20B9 {{ecomConfigs?.deliveryCharges | number:'1.2-2'}}</span>\n </div>\n </div>\n\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #TryAtHome>\n <!-- Try At Home Section -->\n <div class=\"try-home-section\">\n <div class=\"d-flex align-items-start try-home-item\">\n <span class=\"home-icon d-flex align-items-center\">\n <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" class=\"feather feather-home\">\n <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path>\n <polyline points=\"9 22 9 12 15 12 15 22\"></polyline>\n </svg>\n </span>\n <div class=\"try-home-details\">\n <div class=\"try-home-header\">\n <span class=\"try-home-text\">Try At Home</span>\n <span class=\"free-text\"> (It's Free)</span>\n </div>\n <div class=\"home-appointment-text\">Home Appointment <span>Available to try from 29 Jul</span></div>\n <!-- <div class=\"appointment-text\">\n Home Appointment <span class=\"appointment-available\">Available to try from 28 Jun</span>\n </div> -->\n </div>\n </div>\n <div class=\"d-flex-align-items-center justify-content-center w-100\">\n <button class=\"book-appointment-btn\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getTryAtHomeButtonStyle()\" [buttonId]=\"getTryAtHomeButtonId()\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getTryAtHomeButtonId()\" (click)=\"!edit ? addToTrialCart() : ''\" *ngIf=\"!isItemAddedAsTrial\">Try at\n HOME</button>\n <button class=\"book-appointment-btn\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getTryAtHomeButtonStyle()\" [buttonId]=\"getTryAtHomeButtonId()\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getTryAtHomeButtonId()\" (click)=\"!edit ? continueHomeVisitBooking() : ''\" *ngIf=\"isItemAddedAsTrial\">Continue\n Booking</button>\n </div>\n </div>\n\n</ng-template>\n\n<ng-template #StoreSection>\n <!-- Nearest Store Section -->\n <ng-container\n *ngIf=\"storeDetails?.nearbyStore?.storeName && storeDetails?.nearbyStore?.storeName?.length > 0\">\n <div class=\"store-section\">\n <div class=\"d-flex align-items-center store-item\">\n <span class=\"store-icon d-flex align-items-center\">\n <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" class=\"feather feather-shopping-bag\">\n <path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"></path>\n <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\n <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\n </svg>\n </span>\n <div class=\"store-details\">\n <div class=\"store-text\">\n <span class=\"store-label\">Nearest Store - </span>\n <span class=\"store-name\">{{ storeDetails?.nearbyStore?.storeName | titlecase}}</span>\n <!-- <span class=\"store-distance\"> (4km)</span> -->\n </div>\n <!-- <div class=\"availability-section\">\n <span class=\"availability-badge\">\u23F0 AVAILABLE BY 28 JUN</span>\n </div> -->\n <!-- <div class=\"other-stores-text\">\n Also Available in <span class=\"other-stores-link\">18 other stores</span>\n </div> -->\n </div>\n </div>\n <div class=\"d-flex justify-content-center w-100\">\n <button class=\"find-store-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getButtonId(1)\" (click)=\"onFindInStore(storeDetails?.nearbyStore?.id)\">FIND IN\n STORE</button>\n </div>\n </div>\n </ng-container>\n <ng-template #emptyStore>\n <div class=\"delivery-section\">\n <div class=\"d-flex align-items-center\">\n <span class=\"delivery-icon d-flex align-items-center\">\n <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" class=\"feather feather-shopping-bag\">\n <path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"></path>\n <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\n <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\n </svg>\n </span>\n <span class=\"delivery-text\">No Stores are available</span>\n </div>\n </div>\n </ng-template>\n</ng-template>\n\n<div class=\"offcanvas offcanvas-end offcanvas-variant\" tabindex=\"-1\" id=\"offcanvasRightVariant\"\n aria-labelledby=\"offcanvasRightLabel\">\n <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\n <mat-icon data-bs-dismiss=\"offcanvas\"\n class=\"cursor-pointer d-flex align-items-center justify-content-center fs-5\">close</mat-icon>\n </div>\n <div class=\"varient-price px-3 pb-2\">\n <div class=\"price-text\">Price</div>\n <div class=\"d-flex g-3 align-items-center\">\n <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\n *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\n [innerHTML]='currency'></span>\n {{responseData?.price?.discountedPrice}}</div>\n <div class=\"price\"\n *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\"\n [ngClass]=\"{'text-decoration-line-through': responseData?.price?.discountedPrice}\"><span\n [innerHTML]='currency'></span>\n {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\n </div>\n </div>\n <div class=\"varient-container h-100 p-3\">\n <ng-container *ngFor=\"let varient of varients | keyvalue\">\n <div class=\"varient-data\">\n <div class=\"varient-key\">{{varient.key}}</div>\n <div class=\"d-flex\" style=\"gap: 5px;\">\n <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\n [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\n [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\n (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"confirm-btn w-100 p-3 text-center cursor-pointer\" data-bs-dismiss=\"offcanvas\"\n [style.background]=\"data?.styles?.background?.accentColor\" style=\"color: white;\">Confirm\n Customization</div>\n</div>\n\n\n<div class=\"offcanvas offcanvas-end offcanvas-small overflow-scroll\" tabindex=\"-1\" id=\"offcanvasRightPriceBreakup\">\n <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\n <mat-icon data-bs-dismiss=\"offcanvas\"\n class=\"cursor-pointer d-flex align-items-center justify-content-center fs-5\">close</mat-icon>\n </div>\n <div class=\"varient-price p-10-20\">\n <div class=\"price-break-header\">{{responseData?.name}}</div>\n </div>\n <div class=\"price-breakup h-100 w-100\">\n <ng-container *ngFor=\"let ele of responseData?.materials\">\n <div class=\"price-container mb-3 p-10-20\">\n <div class=\"price-container-header\">\n {{ ele.materialType + \" BREAKUP\" }}\n </div>\n <div class=\"row w-100 header-row\">\n <div class=\"col-3 text-center\">COMPONENT</div>\n <div class=\"col-3 text-center\">RATE</div>\n <div class=\"col-3 text-center\">WEIGHT</div>\n <div class=\"col-3 text-center\">FINAL VALUE</div>\n </div>\n <div class=\"row w-100 value-row\">\n <div class=\"col-3 text-center\">{{ ele.purity | titlecase }}</div>\n <div class=\"col-3 text-center\">\u20B9{{ getPricePerGram(ele.pricePerUnit,ele.materialType) |\n number:'1.2-2' }}</div>\n <div class=\"col-3 text-center\">{{ele.quantity + ' ' + (ele.unit | titlecase)}}</div>\n <div class=\"col-3 text-center total\">\u20B9{{ ele.pricePerUnit * ele.quantity | number }}</div>\n </div>\n </div>\n </ng-container>\n\n <div class=\"price-container mb-3 p-10-30 py-0 border-unset\">\n <div class=\"row w-100 summary-row\">\n <div class=\"col-6 text-start\">Making Charges</div>\n <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}\n </div>\n </div>\n <div class=\"row w-100 summary-row\">\n <div class=\"col-6 text-start\">Tax Amount</div>\n <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}\n </div>\n </div>\n <div class=\"row w-100 summary-row\">\n <div class=\"col-6 text-start\">Total Amount</div>\n <div class=\"col-6 text-end total\">\n \u20B9{{(responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) |\n number:'1.2-2'}}\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<ng-template #ReviewsSection>\n <div class=\"rv-section\" *ngIf=\"reviewsData\">\n\n <!-- Header: Title + Average | Bar Chart -->\n <div class=\"rv-header\">\n <div class=\"rv-header-left\">\n <h2 class=\"rv-title\">Reviews & Ratings</h2>\n <div class=\"rv-average-row\">\n <!-- filled stars -->\n <div class=\"rv-stars\">\n <ng-container *ngFor=\"let s of [1,2,3,4,5]\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n fill=\"#eab308\" />\n </svg>\n </ng-container>\n </div>\n <span class=\"rv-avg-num\">{{responseData?.averageRating | number:'1.1-1'}}</span>\n <span class=\"rv-avg-label\">average</span>\n </div>\n <div class=\"rv-count\" [style.color]=\"styles?.background?.accentColor || '#10b981'\">\n {{responseData?.totalReviewCount | number}} Reviews\n </div>\n </div>\n\n <div class=\"rv-bars\">\n <ng-container *ngFor=\"let rating of [5,4,3,2,1]\">\n <div class=\"rv-bar-row\">\n <span class=\"rv-bar-label\">{{rating}}</span>\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n fill=\"#eab308\" />\n </svg>\n <div class=\"rv-bar-track\">\n <div class=\"rv-bar-fill\" [style.width.%]=\"getPercentage(rating)\"></div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n\n <!-- Review Cards Grid -->\n <div class=\"rv-grid\">\n <ng-container *ngFor=\"let review of reviewsData\">\n <ng-container *ngIf=\"review.review\">\n <div class=\"rv-card\">\n <div class=\"rv-card-top\">\n <div class=\"rv-reviewer\">\n <img [src]=\"'https://ui-avatars.com/api/?name=' + (review?.userName ?? 'U') + '&background=random'\"\n class=\"rv-avatar\" alt=\"\">\n <div class=\"rv-name-date\">\n <span class=\"rv-name\">{{review?.userName ?? 'Anonymous'}}</span>\n <span class=\"rv-date\">{{review?.createdAt | date:'d MMM y'}}</span>\n </div>\n </div>\n <!-- Star rating -->\n <div class=\"rv-card-stars\">\n <ng-container *ngFor=\"let s of [1,2,3,4,5]\">\n <svg *ngIf=\"s <= review.rating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n fill=\"#eab308\" />\n </svg>\n <svg *ngIf=\"s > review.rating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\" style=\"opacity:0.25\">\n <path\n d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n fill=\"#eab308\" />\n </svg>\n </ng-container>\n </div>\n </div>\n <p class=\"rv-text\">{{review?.review ?? 'No comment provided.'}}</p>\n\n <!-- Review Images -->\n <div class=\"rv-images\" *ngIf=\"review?.reviewImages?.length\">\n <a *ngFor=\"let img of review.reviewImages\" [href]=\"img.imgUrl\" target=\"_blank\" class=\"rv-img-link\">\n <img [src]=\"img.imgUrl\" alt=\"Review image\" class=\"rv-img-thumb\" onerror=\"this.style.display='none'\">\n </a>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n\n <div class=\"text-center mt-4\" *ngIf=\"(reviewsData?.length ?? 0) > 3\">\n <button class=\"write-review-btn\" (click)=\"loadMoreReviews()\">Load More Reviews</button>\n </div>\n </div>\n</ng-template>\n\n<div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" role=\"dialog\"\n aria-hidden=\"true\">\n <div class=\"modal-dialog modal-dialog-centered video-modal\">\n <div class=\"modal-content\">\n <div class=\"modal-body\" style=\"height: 100%;\">\n <video controls muted playsinline style=\"width: 100%; height: 100%;\">\n <source\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/371647c1753962084265clideo_editor_48bc93c24e18470888c661bb09e437da (online-video-cutter.com).mp4\"\n type=\"video/mp4\">\n Your browser does not support the video tag.\n </video>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"modal fade\" id=\"reviewModal\" tabindex=\"-1\" aria-labelledby=\"reviewModalLabel\" role=\"dialog\"\n aria-hidden=\"true\">\n <div class=\"modal-dialog review-modal\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h1 class=\"modal-title fs-5\"></h1>\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\n </div>\n <div class=\"modal-body\">\n <div class=\"detail-review-container\">\n <div class=\"image-section\">\n <div class=\"product-image\">\n <div class=\"backward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex-1\"\n *ngIf=\"currentImageIndex > 0\">\u25BC</div>\n <img [src]=\"selectedReview?.reviewImages?.[currentImageIndex]?.imgUrl\" alt=\"\">\n <div class=\"forward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex+1\"\n *ngIf=\"currentImageIndex < selectedReview?.images?.length - 1\">\u25B2</div>\n <!-- <div class=\"earbuds-container\">\n <div class=\"charging-case\"></div>\n <div class=\"earbud left\"></div>\n <div class=\"earbud right\"></div>\n </div> -->\n </div>\n <!-- <div class=\"navigation-arrows\">\n </div> -->\n </div>\n\n <div class=\"review-section\">\n <div class=\"reviewer-header\">\n <div class=\"reviewer-avatar\">\uD83D\uDC64</div>\n <div class=\"reviewer-name\">{{selectedReview?.userName ?? \"-\"}}</div>\n </div>\n\n <div class=\"detail-rating\" *ngIf=\"selectedReview?.rating\">\n <p-rating [(ngModel)]=\"selectedReview.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\n </div>\n\n <div class=\"review-date\">\n Reviewed in India on 24 July 2025\n </div>\n\n <div class=\"review-text\">\n {{selectedReview?.review ?? \"-\"}}\n </div>\n\n <div class=\"images-section\">\n <h3>Images in this review</h3>\n <div class=\"review-images\">\n <div class=\"review-image\" [ngClass]=\"{'selected': currentImageIndex == i}\"\n *ngFor=\"let img of selectedReview?.reviewImages ?? [];let i = index\" (click)=\"currentImageIndex = i\">\n <img [src]=\"img.imgUrl\" alt=\"\">\n </div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div>\n</div>", styles: [".product-desc{display:flex}::ng-deep .product-desc table,::ng-deep .brief-desc table{border-collapse:collapse;width:100%;margin:10px 0}::ng-deep .product-desc table td,::ng-deep .product-desc table th,::ng-deep .brief-desc table td,::ng-deep .brief-desc table th{border:1px solid #dddddd!important;text-align:left;padding:8px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}::ng-deep .smooth-panel .p-panel-header{cursor:pointer;background:transparent;border:unset;font-size:18px;font-weight:700;padding:0}::ng-deep .smooth-panel .p-panel-content{border:unset;padding:0}.jewel-container{border-radius:12px;box-shadow:#63636333 0 2px 8px}.jewel-header{padding:8px 10px;border-radius:12px 12px 0 0;font-size:15px;font-weight:700;color:#4f3267}.br-p{border-radius:0 0 12px 12px;padding:10px 0}.row-header{font-size:13px;font-weight:700;color:#4f3267}.row-content{color:#4e555e}.jewellery-table-container{border-radius:12px}.jewellery-table{width:100%;border-collapse:collapse;border:1px solid #ddd;transition:all .3s ease}.jewellery-table th,.jewellery-table td{border:1px solid #ddd;padding:12px;text-align:left;transition:background-color .2s ease}.material-header td{background-color:#f8f9fa;font-weight:700;font-size:16px}.column-header{background-color:#f1f1f1}.column-header th{font-weight:600}.material-row:hover{background-color:#f5f5f5}.charges-header th,.total-header th,.total-header td{background-color:#eaeaea;font-weight:700}.total-row td{font-weight:700;font-size:18px;background-color:#f8f8f8}.custom-specifications{margin-top:16px}.spec-title{font-weight:600;margin-bottom:8px}.spec-table{width:100%;border-collapse:collapse;border:1px solid #ddd}.spec-table th,.spec-table td{border:1px solid #ddd;padding:12px;text-align:left;vertical-align:top;word-break:break-word}.spec-table th{width:35%;font-weight:600;background-color:#f8f9fa}@media screen and (max-width: 600px){.spec-table th,.spec-table td{padding:8px}.jewellery-table{font-size:14px}.jewellery-table th,.jewellery-table td{padding:8px}}.share-icon,.favourite{border-radius:50%!important;height:30px;width:30px;padding:6px;display:flex;align-items:center;justify-content:center;background-color:#f1f5f9!important;cursor:pointer;transition:all .2s ease;border:none!important}:is(.share-icon,.favourite) mat-icon{font-size:20px;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.share-icon:hover,.favourite:hover{background-color:#e2e8f0!important;transform:scale(1.05)}.header-text{font-size:17px;font-weight:bolder}.pricebreakup-btn{font-size:11px;font-weight:700;padding:8px;border-radius:8px;letter-spacing:.5px}.pricebreakup-btn mat-icon{font-size:18px;display:flex;align-items:center}.img-list{display:flex;gap:5px;max-height:460px}.img-list img{height:100px;width:100px;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden}.item-img img{width:100%!important;height:100%!important;object-fit:cover}.price{font-weight:600;font-size:24px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:1px solid;align-items:center;gap:15px;height:44px;width:75%;justify-content:space-between;border-radius:12px}.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}.fc{font-size:17px;font-weight:700}.tab-group{display:flex;gap:10px}.tab{font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black;max-width:max-content}.discount-price{font-size:1.4rem}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#f7f7f7;padding:11px 20px;border-radius:12px;margin-top:unset!important;width:70%!important;border:1px solid #d3d3d347}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#f7f7f7;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:7px 25px;cursor:pointer;font-weight:600}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:5px;height:44px!important;justify-content:space-between;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px 15px;width:fit-content!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:fit-content!important;font-size:14px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.w-h-40{width:40px!important;height:40px!important}.height{height:auto;overflow-y:visible}.mobile-footer{display:none}video{border-radius:18px}@media (min-width: 1024px){.zoom:hover{transform:scale(1.04);transition:transform .2s ease-in-out;overflow:hidden}.product-heading{font-size:20px;font-weight:600;margin-top:5px}}@media only screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:100000001;background-color:#fff;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;color:#000;align-items:center;justify-content:center;gap:15px;width:20%}.mobile-footer .icons .mat-icon{font-size:26px}.product-desc{font-size:13px}.brief-desc{font-size:16px;margin-top:unset!important}.total-container{padding-top:10px!important;padding-bottom:4rem!important}.out-of-stock,.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important;height:348px}.item-img img{width:100%;height:348px!important}.display-none{display:none}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{width:25%;border:2px solid lightgray;cursor:pointer}.input-field{margin-top:.7rem!important;margin-bottom:.7rem!important}.prod-desc{margin-top:20px}.video-call-container{margin:0!important}.product-img{height:220px}.call-details{width:100%!important;padding:3%!important}.send-btn{padding:.5rem 1rem!important}.review-sec :is(input,textarea){width:100%!important}.height{width:100%;height:auto}.product-heading{font-size:23px;font-weight:600}.discount-price{font-size:1.7rem!important}.header-text{font-size:20px!important}}.send-btn{font-size:14px!important;padding:1rem;display:flex;align-items:center;justify-content:center;text-transform:uppercase;font-weight:600}.send-btn mat-icon{height:20px;width:20px;font-size:18px}a{text-decoration:none}.brief-desc{font-size:14px;color:#4e555e}.total-container{height:auto;position:relative;display:block!important;overflow:visible}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin:unset!important}.modal-content{height:100%;border:none;border-radius:0!important}@media (min-width:768px) and (max-width:991px){.item-img{position:relative;width:auto!important;height:auto!important;overflow:hidden}.item-img img{height:auto!important;width:auto!important}.height{width:min-content}}@media (min-width:1024px){.product-headig{font-size:35px}}.mat-accordion .mat-expansion-panel:last-of-type{box-shadow:none}@media (min-width: 1400px){.container{max-width:unset;width:95%;height:100vh;overflow-y:auto}}.width-max{width:max-content}.fw-600{font-weight:600}.cursor-pointer{cursor:pointer}.offcanvas-variant{border-radius:30px 0 0 30px}.varient-header,.varient-price{background:#f7f7f7}.varient-header{border-radius:30px 0 0}.confirm-btn{border-radius:0 0 0 30px;position:absolute!important;bottom:0!important}.style2-container{border:1px solid;border-radius:12px;margin:0}.varient-item{border-right:1px solid;align-content:center}.variant-head{font-size:12px;color:#33363e}.varient-data{margin-bottom:25px;border-bottom:1px solid black;padding-bottom:25px}.variant-value{font-size:.9rem;color:#000}.custom-text{border-radius:0 8px 8px 0;font-size:.9rem;font-weight:600}.scroll-wrap{flex-wrap:nowrap}.brand-text{word-wrap:break-word;white-space:normal;font-size:12px;font-weight:600;line-height:20px}.video-container{border:1px solid rgb(240,240,240);margin:10px 0;border-radius:12px}.video-head-text{font-size:16px;font-weight:700}.sub-text{font-size:11px;color:#6f7377;margin-bottom:10px}.sch-btn{font-size:1.2rem!important;color:#fff;padding:3px 0;margin-top:5px}.tax-text{font-size:.7rem;color:#6f7377}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.delivery-container{margin:35px 0 15px;background-color:transparent}.delivery-title{font-size:16px;font-weight:600;margin:0 0 12px;line-height:1.2;margin-bottom:.5rem!important}.location-container{border:1px solid #cfcfcf;border-radius:12px;padding:10px;margin-bottom:5px;width:100%}.location-icon{width:20px;height:20px;background-color:#374151;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}.location-icon:before{content:\"\";width:8px;height:8px;background-color:#fff;border-radius:50%;position:absolute}.postal-code-input{font-size:12px;font-weight:600;letter-spacing:.5px;border:none;outline:none;background:transparent;width:90%}.postal-code-input::placeholder{font-weight:500}.locate-btn{background:none!important;border:none!important;font-weight:600;color:#111827;font-size:13px!important;padding:0!important;box-shadow:none!important;width:auto!important;white-space:nowrap}.gps{font-size:17px}.locate-btn:focus{box-shadow:none!important}.delivery-section{margin-bottom:15px;border:1px solid rgb(240,240,240);padding:10px;border-radius:12px}.delivery-icon{font-size:18px;color:#ec4899;margin-right:14px;width:20px}.delivery-text{font-size:14px;font-weight:700}.store-section{border:1px solid rgb(240,240,240);padding:10px;border-radius:12px;margin-bottom:15px}.store-item{margin-bottom:11px}.store-icon{font-size:18px;color:#f97316;margin-right:14px;margin-top:2px;width:20px}.store-details{flex:1}.store-text{font-size:14px}.store-name{font-weight:700}.availability-section{margin-bottom:6px}.availability-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;color:#d97706;background-color:#fef3c7;padding:4px 8px;border-radius:12px;letter-spacing:.5px}.other-stores-text{font-size:14px;color:#6b7280;line-height:1.4}.other-stores-link{color:#6b46c1;cursor:pointer;text-decoration:underline}.other-stores-link:hover{color:#553c9a}.find-store-btn{width:100%!important;padding:8px 20px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px}.try-home-section{border-radius:12px;padding:10px;border:1px solid rgb(240,240,240)}.try-home-item{margin-bottom:10px;padding:0}.home-icon{font-size:18px;color:#6b46c1;margin-right:14px;margin-top:2px;width:20px}.try-home-details{flex:1}.try-home-text{font-size:14px;font-weight:700;color:#374151}.free-text{font-size:14px;color:#6b7280}.appointment-text{font-size:14px;color:#6b7280;line-height:1.4}.appointment-available{font-weight:500;color:#374151}.book-appointment-btn{background:#111827;color:#fff;border:none;padding:10px 20px;border-radius:12px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px;transition:all .2s ease;width:100%}.book-appointment-btn:hover{background:#000;transform:translateY(-1px);box-shadow:0 4px 8px #0000001a}@media (max-width: 480px){.container{display:flex;align-items:center;flex-direction:column}.location-section{padding:12px 0}.try-home-section{padding:20px}}.w-90{width:90%}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.w-12{width:12%!important}.w-88{width:88%!important}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;position:absolute;bottom:20px;left:10px;width:95%!important}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.error-border{border:2px solid #dc3545!important}.offcanvas-small{height:72vh;top:25%;width:35%;border-radius:50px 0 0 50px}.rating{width:max-content;border:1px solid;border-radius:20px;padding:0 10px;margin-bottom:.5rem}.rating-no{padding-right:7px;margin:0;border-right:1px solid;font-size:.75rem}.p-10-20{padding:10px 30px}.price-break-header{font-size:19px;font-weight:600}.price-container{border-bottom:1px solid rgb(233,233,233)}.price-container-header{font-size:14px;font-weight:600;color:#333}.total-ratings{font-size:.75rem}.header-row .col-3{font-size:12px;font-weight:500;color:#666}.value-row .col-3{font-size:14px;font-weight:400;color:#333}.value-row .col-3.total{font-weight:600}.summary-row .col-6{font-size:15px;font-weight:500;color:#333;padding:unset}.summary-row .col-6.total{font-weight:600;padding-right:10px}.summary-row{padding:0 42px}.error-border{border:2px solid #e74c3c!important;box-shadow:0 0 5px #e74c3c4d!important}.form-control,.input-field input{transition:border-color .3s ease,box-shadow .3s ease}.error-border:focus{border-color:#e74c3c!important;box-shadow:0 0 8px #e74c3c80!important}.input-field input:focus{transform:scale(1.02)}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:-.125em;border:.125em solid currentcolor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}.spinner-border-sm{width:.875rem;height:.875rem;border-width:.125em}@keyframes spinner-border{to{transform:rotate(360deg)}}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.rv-section{padding:2rem 0;background:transparent}.rv-header{display:flex;justify-content:space-between;align-items:flex-start;gap:3rem}.rv-header-left{flex:1}.rv-title{font-size:1.4rem;font-weight:700;color:#111827;margin-bottom:.75rem}.rv-average-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}.rv-stars{display:flex;gap:2px}.rv-avg-num{font-size:1.4rem;font-weight:700;color:#111827}.rv-avg-label{font-size:.95rem;color:#6b7280;font-weight:400}.rv-count{font-size:.9rem;font-weight:600}.rv-bars{flex:1;max-width:420px;display:flex;flex-direction:column;gap:6px}.rv-bar-row{display:flex;align-items:center;gap:3px}.rv-bar-label{font-size:15px;font-weight:600;color:#111827;width:10px;text-align:right;flex-shrink:0}.rv-bar-track{flex:1;height:10px;background-color:#f3f4f6;border-radius:3px;overflow:hidden}.rv-bar-fill{height:100%;background-color:#eab308;border-radius:3px}.rv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.rv-card{padding:12px;border:1px solid #e5e7eb;border-radius:10px;background:#fff}.rv-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.85rem}.rv-reviewer{display:flex;align-items:center;gap:.7rem}.rv-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0}.rv-name-date{display:flex;flex-direction:column;gap:2px}.rv-name{font-size:16px;font-weight:600;color:#374151}.rv-date{font-size:.75rem;color:#9ca3af}.rv-card-stars{display:flex;gap:2px;flex-shrink:0}.rv-text{font-size:.88rem;line-height:1.65;color:#4b5563;margin:0}.rv-images{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.rv-img-link{display:block;flex-shrink:0;border-radius:8px;overflow:hidden;border:1px solid #e5e7eb}.rv-img-thumb{width:72px;height:72px;object-fit:cover;display:block;transition:transform .2s ease}.rv-img-link:hover .rv-img-thumb{transform:scale(1.05)}@media (max-width: 768px){.rv-header{flex-direction:column;gap:1.5rem}.rv-bars{max-width:100%}.rv-grid{grid-template-columns:1fr}}.review-section{padding:4rem 1rem;border-top:1px solid #f3f4f6;margin-top:4rem;background:transparent!important}.review-summary-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4rem;gap:3rem}.rating-summary-left{flex:1}.rating-summary-left h2.reviews-header-title{font-size:1.75rem;font-weight:700;margin-bottom:0;color:#111827}.average-score-container{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.average-score{color:#111827;display:flex;align-items:baseline;gap:8px}.average-score .score-num{font-size:1.5rem;font-weight:700}.average-score .score-text{font-size:1.1rem;font-weight:400;color:#111827}.total-reviews-count{font-weight:600;font-size:1.1rem;display:block}.rating-distribution{flex:1;max-width:480px}.rating-bar-row{display:flex;align-items:center;gap:1.25rem;margin-bottom:.85rem}.star-label{display:flex;align-items:center;justify-content:flex-start;width:35px;line-height:1}.progress-bar-bg{flex:1;height:12px;background-color:#f3f4f6;border-radius:9999px;overflow:hidden}.progress-bar-fill{height:100%;background-color:#eab308;border-radius:9999px}.review-actions-bar-minimal{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.write-review-btn-minimal{padding:.6rem 1.25rem;background:#f8f9fa;color:#4b5563;border:none;border-radius:8px;font-weight:500;font-size:.9rem;cursor:pointer;transition:all .2s}.write-review-btn-minimal:hover{background:#e5e7eb}.sort-dropdown-minimal select{padding:.6rem 2.25rem .6rem 1rem;border:1px solid #d1d5db;border-radius:8px;background:#fff;font-size:.9rem;color:#4b5563;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .75rem center;background-size:1rem;cursor:pointer}.reviews-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}.review-card{padding:1.5rem;border:1px solid #e5e7eb;border-radius:12px;background:#fff;box-shadow:none}.review-divider{margin:2rem 0;border:none;border-top:1px solid #f3f4f6}.reviews-header-title{font-size:1.4rem;font-weight:700;color:#111827;margin-bottom:0}.review-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.25rem}.reviewer-info{display:flex;align-items:center;gap:1rem}.reviewer-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#f3f4f6}.reviewer-name{font-weight:600;font-size:.95rem;color:#374151}.review-date-text{font-size:.8rem;color:#9ca3af}.reviewer-name-date{display:flex;flex-direction:row;align-items:center;gap:8px}.review-card-rating{display:flex;gap:2px}.review-card-text{font-size:1rem;line-height:1.7;color:#4b5563}.product-tabs-container{border-bottom:1px solid #f3f4f6;margin-bottom:8px}.tab-item{padding:1rem 0;font-weight:600;font-size:1.1rem;color:#6b7280;cursor:pointer;position:relative;transition:color .2s}.tab-content-pane h3{font-size:1.5rem;font-weight:700;margin-bottom:1.5rem}.tab-content-pane p{color:#4b5563;line-height:1.8;font-size:1.05rem}@media (max-width: 1024px){.reviews-grid{grid-template-columns:1fr}}@media (max-width: 768px){.review-summary-header{flex-direction:column;gap:2rem}.rating-distribution{max-width:100%}.bento-grid{height:auto;display:flex;flex-direction:column}.tabs-list{gap:1.5rem;overflow-x:auto}}.home-appointment-text{font-size:.8rem;color:#4e555e}.home-appointment-text span{font-weight:600}.video-call-img{height:120px;margin:0;padding:0;border-radius:45px}.video-call-img img{border-top-left-radius:12px;border-bottom-left-radius:12px}.discount{background:#fff3f2;padding:15px 15px 20px;margin-top:14px;border-radius:8px;display:flex;flex-direction:column;gap:5px;position:relative}.discount p{margin-bottom:0;color:#4f3267;font-weight:700;font-size:1rem}.discount .offer{color:#eb4f5c}.discount:before{content:\"\";display:block;height:44px;width:4px;background:#eb4f5c;position:absolute;left:0;top:16px;border-top-right-radius:20px;border-bottom-right-radius:20px}.metal-purity{display:flex;flex-direction:column;gap:10px}.scrollable-content{height:100%;max-height:95vh;overflow-y:auto}.style-2-img{max-height:70%;height:100%!important}.ring-size-video{background:#f0ebff;display:flex;justify-content:space-between;align-items:center;height:45px;padding:12px;border-radius:10px;margin-top:20px;margin-bottom:20px}.ring-size-video .text{color:#4f3267;font-size:.9rem}.ring-size-video .learn-how{color:#de57e9;font-weight:700;font-size:1rem;display:flex;gap:5px;align-items:center;cursor:pointer}.ring-size-video .learn-how mat-icon{font-size:20px;display:flex;align-items:center}.ring-size-video p{margin-bottom:0}.video-modal{height:90vh!important;width:90vw!important;max-width:none}.video-modal .modal-body{padding:0}.review-section{border-radius:10px;padding:15px}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.detail-review-container{display:flex;max-width:1200px;margin:0 auto;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px #0000001a}.image-section{flex:1;background:#000;position:relative;min-height:400px}.product-image{width:100%;height:100%;object-fit:cover;background:linear-gradient(135deg,#e8e8e8,#d0d0d0);display:flex;align-items:center;justify-content:center;max-height:400px;position:relative}.product-image img{height:100%;width:100%;object-fit:contain}.earbuds-container{position:relative;width:300px;height:200px}.charging-case{width:200px;height:120px;background:linear-gradient(145deg,#f0f0f0,#e0e0e0);border-radius:25px;position:absolute;top:40px;left:50px;box-shadow:inset 0 4px 8px #0000001a}.charging-case:before{content:\"\";position:absolute;inset:10px;background:linear-gradient(145deg,#e8e8e8,#d8d8d8);border-radius:15px;box-shadow:inset 0 2px 4px #0000001a}.earbud{position:absolute;width:45px;height:15px;background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border-radius:8px;box-shadow:0 2px 4px #0003}.earbud:before{content:\"noise\";position:absolute;top:2px;left:50%;transform:translate(-50%);font-size:6px;color:#888;font-weight:300}.earbud.left{top:70px;left:80px}.earbud.right{top:90px;left:130px}.earbud.right:before{color:#ff6b35}.review-section{flex:1;padding:30px;background:#fafafa}.reviewer-header{display:flex;align-items:center;margin-bottom:15px}.reviewer-avatar{width:40px;height:40px;background:#ccc;border-radius:50%;margin-right:12px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#666}.reviewer-name{font-size:16px;font-weight:500;color:#333}.detail-rating{margin:10px 0}.stars{display:flex;gap:2px;margin-bottom:5px}.star{color:#ff9500;font-size:18px}.thumbs{display:flex;gap:5px}.thumb{color:#ff9500;font-size:16px}.review-date{font-size:14px;color:#666;margin:15px 0}.review-text{font-size:16px;line-height:1.5;color:#333;margin-bottom:25px}.images-section h3{font-size:16px;color:#666;margin-bottom:15px;font-weight:500}.review-images{display:flex;gap:10px}.review-image{width:60px;height:60px;background:#ddd;border-radius:6px;border:2px solid #e0e0e0;cursor:pointer;transition:border-color .3s}.review-image img{width:100%;height:100%}.review-image:hover,.review-image.selected{border-color:#007185}.navigation-arrows{position:absolute;top:20px;right:20px;display:flex;flex-direction:column;gap:10px}.arrow{width:40px;height:40px;background:#fffc;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:#666;transition:background-color .3s;position:absolute;transform:rotate(90deg)}.backward-arrow{left:10px}.forward-arrow{right:10px}.arrow:hover{background:#fff}@media (max-width: 768px){.review-container{flex-direction:column}.image-section{min-height:300px}.review-section{padding:20px}}.review-modal{max-width:none;width:70vw}.review-modal .modal-body{padding:0}@media screen and (max-width: 475px){.offcanvas-small{height:100vh;width:100%;top:0}.review-modal{margin:0;height:100%;width:100%}.detail-review-container{flex-direction:column;height:100%}.product-image{max-height:289px}.image-section{min-height:289px}.video-modal{margin:0;height:100vh!important;width:100vw!important;overflow:hidden}}.modal{z-index:100000033}.breadcrumbs-modern{font-size:.85rem;color:#6b7280;margin-bottom:.5rem}.breadcrumb-item.active{color:#111827;font-weight:500}.product-title-modern{font-size:2rem;font-weight:800;color:#111827;margin:0;line-height:1.2;font-family:var(--website-font-family)}.product-price-modern{font-size:1.75rem;font-weight:700;color:#111827;font-family:var(--website-font-family)}.rating-line-modern{margin-top:.25rem}.rating-score-text{font-weight:700;font-size:1rem;color:#111827}.rating-count-text{font-size:.95rem;color:#10b981;font-weight:600;cursor:pointer}.product-description-brief{font-size:1rem;line-height:1.7;color:#4b5563;margin-top:1.5rem}.low-stock-text{color:#dc2626;font-weight:700;font-size:.875rem}.variants-modern-container{margin:2.5rem 0}.varient-key{font-size:.9rem;font-weight:800;color:#111827;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem}.color-swatch-modern{width:36px;height:36px;border-radius:50%;cursor:pointer;border:3px solid white;box-shadow:0 0 0 1px #e5e7eb;transition:all .25s cubic-bezier(.4,0,.2,1)}.color-swatch-modern:hover{transform:scale(1.15)}.color-swatch-modern.active{box-shadow:0 0 0 2px #111827}.box-varient-modern{padding:.75rem 1.5rem;border:2px solid #f3f4f6;border-radius:10px;font-size:.95rem;font-weight:700;color:#374151;cursor:pointer;transition:all .2s;min-width:70px;text-align:center;background:#fff}.box-varient-modern:hover{border-color:#d1d5db;background:#f9fafb}.box-varient-modern.active{border-color:#111827;background:#111827;color:#fff}.quantity-container{margin-top:1rem}.quantity-selector-modern{border:1px solid #e5e7eb;border-radius:12px;width:fit-content;background:#f9fafb;padding:2px}.qty-btn{width:44px;height:44px;border:none;background:transparent;font-size:1.5rem;color:#111827;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;border-radius:10px}.qty-btn:hover:not(:disabled){background:#fff;box-shadow:0 2px 4px #0000000d}.qty-btn:disabled{color:#d1d5db;cursor:not-allowed}.qty-display{width:50px;text-align:center;font-weight:700;color:#111827;font-size:1.1rem}.out-of-stock-modern{background:#f3f4f6;color:#9ca3af;padding:1.1rem 2.5rem;border:none;border-radius:14px;font-weight:800;font-size:1.1rem;cursor:not-allowed}.wishlist-btn-modern{width:56px;height:56px;border:2px solid #f3f4f6;border-radius:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;background:#fff}.wishlist-btn-modern:hover{background:#fef2f2;border-color:#fecaca}.wishlist-btn-modern mat-icon{font-size:26px}.thumbnail-column{padding-right:15px!important}.thumbnail-list::-webkit-scrollbar{display:none}.thumbnail-list{-ms-overflow-style:none;scrollbar-width:none}.image-section-modern{padding-right:2.5rem!important;padding-left:0!important;width:60%!important;max-width:60%!important;flex:0 0 60%!important;margin-top:0!important}.detail-section-modern{padding-left:.5rem!important;padding-right:0!important;width:40%!important;max-width:40%!important;flex:0 0 40%!important;margin-top:0!important}.thumbnail-column{width:90px!important;flex:0 0 90px!important}.item-img{width:100%!important;max-width:100%;margin:0;border-radius:20px;overflow:hidden;background:#f9fafb;position:relative}lib-ngx-image-zoom{width:100%!important;display:block!important}::ng-deep .ngx-image-zoom-container{width:100%!important;height:auto!important;aspect-ratio:1/1}.style-1-vertical{display:flex;flex-direction:column;width:100%}.main-image-container{width:100%;aspect-ratio:1 / 1}.thumbnail-row{display:flex;gap:8px;overflow-x:auto;padding:12px 0}.thumbnail-img{min-width:80px;width:80px;height:80px;object-fit:cover;border-radius:8px;border:2px solid transparent;cursor:pointer;transition:border-color .2s}.active-thumb{border-width:2px;border-style:solid}.bento-grid{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:15px;width:100%;aspect-ratio:5/4}.bento-item-large{grid-row:span 2;border-radius:24px;overflow:hidden}.bento-item-small{border-radius:20px;overflow:hidden}.bento-grid img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.bento-grid img:hover{transform:scale(1.05)}@media (max-width: 991px){.image-section-modern,.detail-section-modern{width:100%!important;max-width:100%!important;flex:0 0 100%!important;padding:0!important}.bento-grid{grid-template-columns:1fr;grid-template-rows:auto;aspect-ratio:auto}.bento-item-large{grid-row:span 1}}.bento-masonry-container{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:16px;width:100%}.bento-item-modern{border-radius:16px;overflow:hidden;background:#fdfdfd;aspect-ratio:1 / 1;transition:all .4s cubic-bezier(.4,0,.2,1)}.bento-img-modern{width:100%;height:100%;display:block;object-fit:cover;background:#fdfdfd;cursor:pointer;transition:transform .6s ease}.bento-item-modern:hover{transform:translateY(-4px);box-shadow:0 12px 30px #00000014}.bento-item-modern:hover .bento-img-modern{transform:scale(1.03)}.detail-section-modern{position:sticky;top:0;height:max-content;max-height:calc(100vh - 100px);overflow-y:auto;overflow-x:hidden;padding-left:2rem!important;scrollbar-width:none}.detail-section-modern::-webkit-scrollbar{display:none}.product-hero-card-modern{border:none;box-shadow:none;z-index:10;position:relative}.tabs-list{display:flex;justify-content:flex-start;gap:10px;list-style:none;padding:0;margin-bottom:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap}.tabs-list::-webkit-scrollbar{display:none}.tab-item{font-size:1rem;font-weight:600;color:#6b7280;padding:.5rem 1rem;border-radius:0;cursor:pointer;transition:all .25s;background:transparent;border-bottom:2px solid transparent;white-space:nowrap;flex-shrink:0}.tab-item:hover{background:transparent;color:#111827}.tab-content-pane{padding-top:.5rem}@media (max-width: 1024px){.product-hero-card-modern{padding:25px}.tab-content-pane{width:100%}}@media (max-width: 991px){.bento-masonry-container{grid-template-columns:1fr;grid-auto-rows:auto}.bento-item-modern.featured{grid-row:span 1;aspect-ratio:1 / 1}.product-hero-card-modern{position:static;padding:0;box-shadow:none;border:none;background:transparent;z-index:auto}.detail-section-modern{padding-left:0!important;margin-top:2rem;position:static!important;max-height:none!important;height:auto!important;overflow-y:visible!important;overflow-x:visible!important}.image-section-modern{padding-right:0!important}.tab-item{padding:.6rem 1rem;font-size:.95rem}.product-tabs-container{padding:0 4px}}.product-info-minimal{display:flex;flex-direction:column}.breadcrumbs-modern{display:flex;align-items:center;gap:8px;font-size:.95rem;color:#6b7280;font-weight:500}.breadcrumbs-modern .dot{font-size:1.2rem;line-height:1}.title-price-row-modern{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.product-title-modern{font-size:1.5rem;font-weight:800;color:#111827;margin:0;line-height:1.2}.product-price-modern{font-size:1.5rem;font-weight:500;color:#111827;white-space:nowrap}.rating-row-modern{display:flex;align-items:center;gap:12px;font-size:1rem;flex-wrap:wrap}.rating-score{font-weight:700;color:#111827}.separator{color:#e5e7eb}.reviews-link{font-weight:600}::ng-deep .rating-row-modern p-rating .p-rating-icon.p-rating-icon-active svg,::ng-deep .rating-row-modern p-rating .p-icon{color:#eab308!important;fill:#eab308!important}::ng-deep .rating-row-modern p-rating .p-rating-icon:not(.p-rating-icon-active) svg,::ng-deep .rating-row-modern p-rating .p-rating-icon:not(.p-rating-icon-active) .p-icon{color:#eab308!important;fill:#eab308!important;opacity:.25}.product-brief-modern{font-size:.95rem;line-height:1.7;color:#4b5563;margin-top:.5rem;text-align:justify}.write-review-btn{display:inline-flex;align-items:center;justify-content:center;padding:.65rem 1.75rem;background:#f8f9fa;color:#374151;border:1px solid #e5e7eb;border-radius:10px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;letter-spacing:.02em}.write-review-btn:hover{background:#f1f3f5;border-color:#d1d5db;transform:translateY(-1px);box-shadow:0 2px 8px #00000012}@media (max-width: 991px){.product-title-modern,.product-price-modern{font-size:1.3rem}}@media (max-width: 480px){.title-price-row-modern{flex-direction:column;gap:4px}.product-title-modern{font-size:1.2rem}.product-price-modern{font-size:1.2rem;white-space:normal}.rv-section{padding:1rem 0}.rv-header{gap:1rem}.rv-title{font-size:1.15rem;margin-bottom:.5rem}.rv-avg-num{font-size:1.15rem}.rv-bars{max-width:100%;width:100%}.rv-grid{grid-template-columns:1fr;gap:.75rem}.rv-card{padding:10px}.rv-name{font-size:14px}.tabs-list{gap:0}.tab-item{padding:.55rem 1rem;font-size:.9rem}.header-text{font-size:15px!important}.product-header{flex-wrap:wrap;gap:8px}.pricebreakup-btn{font-size:10px;padding:6px}.write-review-btn{width:100%;padding:.65rem 1rem}}.pb-glass-container{padding:16px;border-radius:16px}.pb-glass-card{background:#fff9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.85);border-radius:12px;margin-bottom:12px;overflow:hidden}.pb-glass-header{padding:10px 16px;font-weight:700;font-size:12px;letter-spacing:1.5px;text-transform:uppercase}.pb-glass-row{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;font-size:14px;border-bottom:1px solid rgba(0,0,0,.04)}.pb-glass-row:last-child{border-bottom:none}.pb-glass-row:nth-child(2n){background:#f8fafc99}.pb-label{color:#6b7280;font-weight:500}.pb-value{font-weight:600;color:#1f2937}.pb-summary-card{background:#ffffffb3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(203,213,225,.5);border-radius:12px;overflow:hidden}.pb-summary-row{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;font-size:14px;color:#374151;border-bottom:1px solid rgba(0,0,0,.05)}.pb-grand-total{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;font-weight:700;font-size:16px;letter-spacing:.5px}.item-code-row{margin-bottom:6px}.item-code-value{display:inline-block;padding:2px 10px;border-radius:999px;background:#f1f5f9;color:#475569;font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;border:1px solid #e2e8f0}.buy-now-btn{background:transparent!important;border:1.5px solid currentColor!important;color:inherit!important}\n"] }]
|
|
20503
|
+
], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n <section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\n\n <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\n <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\n </div> -->\n <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [spacingHorizontal]=\"stylesLayout\"\n [simpoLayout]=\"styles?.layout\" #container>\n <!-- <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\"\n (click)=\"routeToHome()\">Home</a> /\n <span>{{ responseData?.name | titlecase }}</span>\n </div> -->\n <div class=\"row m-0 w-100 mt-lg-4 h-auto overflow-visible\" #aboveHeight>\n <div class=\"col-lg-6 col-sm-12 image-section-modern\" #imageSection>\n <div class=\"d-flex flex-column justify-content-start gap-1\">\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\n </div>\n </div>\n <div class=\"col-lg-6 col-sm-12 detail-section-modern \" #detailSection>\n <div class=\"product-hero-card-modern\">\n <ng-container *ngIf=\"isMobile\">\n <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\n </ng-container>\n\n <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\n\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\n </ng-container>\n </div>\n\n\n <ng-container *ngIf=\"ecomConfigs?.deliveryEnabled\">\n <!-- *ngIf=\"ecomConfigs?.deliveryEnabled\" -->\n <ng-container *ngTemplateOutlet=\"DeliverySection\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"ecomConfigs?.storesEnabled\">\n <!-- *ngIf=\"ecomConfigs?.storesEnabled\" -->\n <ng-container *ngTemplateOutlet=\"StoreSection\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"appointmentSettings?.homeVisitProductsEnabled\">\n <!-- *ngIf=\"appointmentSettings?.homeVisitProductsEnabled\" -->\n <ng-container *ngTemplateOutlet=\"TryAtHome\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"appointmentSettings?.videoCallProductsEnabled\">\n <!-- *ngIf=\"appointmentSettings?.videoCallProductsEnabled\" -->\n <ng-container *ngTemplateOutlet=\"videoCallSchedule\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"ecomConfigs?.brandPromiseEnabled\">\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n </ng-container>\n\n\n\n <!-- Moved descriptors to Details tab below -->\n\n <!-- <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\n [innerHTML]=\"responseData.brief\"></div> -->\n <!-- Moved tags to Details tab below -->\n <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\n <!-- <ng-container>\n <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\n </ng-container> -->\n </div>\n </div>\n <!-- Tabs Navigation -->\n <div class=\"product-tabs-container\">\n <ul class=\"tabs-list\">\n <li class=\"tab-item\" [class.active]=\"activeTab == 'Details'\"\n [style.color]=\"activeTab == 'Details' ? styles?.background?.accentColor : ''\"\n [style.borderColor]=\"activeTab == 'Details' ? styles?.background?.accentColor : 'transparent'\"\n (click)=\"changeTab('Details')\">Details</li>\n <li class=\"tab-item\" *ngIf=\"reviewsData\" [class.active]=\"activeTab == 'Reviews'\"\n [style.color]=\"activeTab == 'Reviews' ? styles?.background?.accentColor : ''\"\n [style.borderColor]=\"activeTab == 'Reviews' ? styles?.background?.accentColor : 'transparent'\"\n (click)=\"changeTab('Reviews')\">Reviews</li>\n <li class=\"tab-item\" *ngIf=\"materialBasedPricing\" [class.active]=\"activeTab == 'PriceBreakup'\"\n [style.color]=\"activeTab == 'PriceBreakup' ? styles?.background?.accentColor : ''\"\n [style.borderColor]=\"activeTab == 'PriceBreakup' ? styles?.background?.accentColor : 'transparent'\"\n (click)=\"changeTab('PriceBreakup')\">Price Breakup</li>\n </ul>\n </div>\n\n <!-- Tab Content -->\n <div class=\"tab-content-pane\">\n <div *ngIf=\"activeTab == 'Details'\">\n <!-- Integrated descriptors and tags here -->\n <div class=\"mt-2\">\n <ng-container *ngTemplateOutlet=\"descriptors\"></ng-container>\n </div>\n </div>\n\n <div *ngIf=\"activeTab == 'Reviews'\">\n <ng-container *ngTemplateOutlet=\"ReviewsSection\"></ng-container>\n </div>\n\n <div *ngIf=\"activeTab == 'PriceBreakup'\">\n <div class=\"pb-glass-container mt-2\">\n\n <!-- One card per material \u2014 generic, works for any material type -->\n <ng-container *ngFor=\"let ele of responseData?.materials\">\n <div class=\"pb-glass-card\">\n <div class=\"pb-glass-header\"\n [style.background]=\"styles?.background?.accentColor\"\n [style.color]=\"'#fff'\">\n {{ ele?.materialName | titlecase }}\n </div>\n <div class=\"pb-glass-row\">\n <span class=\"pb-label\">Purity</span>\n <span class=\"pb-value\">{{ ele?.purity }}</span>\n </div>\n <div class=\"pb-glass-row\">\n <span class=\"pb-label\">Net Weight</span>\n <span class=\"pb-value\">{{ ele?.quantity }} {{ ele?.unit | titlecase }}</span>\n </div>\n <div class=\"pb-glass-row\">\n <span class=\"pb-label\">Rate / {{ ele?.unit | titlecase }}</span>\n <span class=\"pb-value\">\u20B9{{ ele?.pricePerUnit | number:'1.2-2' }}</span>\n </div>\n <div class=\"pb-glass-row\">\n <span class=\"pb-label\">Value</span>\n <span class=\"pb-value\">\u20B9{{ (ele?.quantity * ele?.pricePerUnit) | number:'1.2-2' }}</span>\n </div>\n </div>\n </ng-container>\n\n <!-- Making Charges card -->\n <div class=\"pb-glass-card\">\n <div class=\"pb-glass-header\"\n [style.background]=\"styles?.background?.accentColor\"\n [style.color]=\"'#fff'\">\n Making Charges\n </div>\n <!-- <div class=\"pb-glass-row\">\n <span class=\"pb-label\">Net Weight</span>\n <span class=\"pb-value\">{{ responseData?.baseWeight }}</span>\n </div> -->\n <div class=\"pb-glass-row\" *ngIf=\"responseData?.makingChargePercentage && responseData.makingChargePercentage > 0\">\n <span class=\"pb-label\">Making Charge %</span>\n <span class=\"pb-value\">{{ responseData?.makingChargePercentage }}%</span>\n </div>\n <div class=\"pb-glass-row\" *ngIf=\"responseData?.jewelryPriceBreakup?.makingChargeAmount && responseData?.jewelryPriceBreakup?.makingChargeAmount > 0\">\n <span class=\"pb-label\">Value</span>\n <span class=\"pb-value\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}</span>\n </div>\n </div>\n\n <!-- Summary card -->\n <div class=\"pb-summary-card\">\n <div class=\"pb-summary-row\">\n <span>Total Value</span>\n <span>\u20B9{{ responseData?.jewelryPriceBreakup?.priceWithoutTax | number:'1.2-2' }}</span>\n </div>\n <div class=\"pb-summary-row\">\n <span>Tax ({{ responseData?.jewelryPriceBreakup?.taxRef?.taxPercent }}% GST)</span>\n <span>\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}</span>\n </div>\n <div class=\"pb-grand-total\"\n [style.background]=\"styles?.background?.accentColor\"\n [style.color]=\"'#fff'\">\n <span>TOTAL</span>\n <span>\u20B9{{ (responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) | number:'1.2-2' }}</span>\n </div>\n </div>\n\n </div>\n </div>\n </div>\n </section>\n <ng-container *ngIf=\"recentViewItemList?.length\">\n <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"recentViewItemList\"\n [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\n </ng-container>\n <!-- <ng-container *ngIf=\"recentViewItemList?.length\">\n <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\n [isRelatedProduct]=\"true\"></simpo-featured-products>\n </ng-container> -->\n <!-- <ng-container>\n <simpo-customer-review [data]=\"data\"></simpo-customer-review>\n </ng-container> -->\n\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\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 *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n </section>\n</ng-container>\n\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\n<div class=\"mobile-footer\">\n <div class=\"icons\">\n <div (click)=\"goToCart()\">\n <mat-icon>shopping_cart</mat-icon>\n </div>\n <div>\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\n *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\n *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n </div>\n </div>\n <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getButtonId(0)\">Out of\n Stock</button>\n <div class=\"quantity\" *ngIf=\"responseData?.quantity && !appointmentSettings?.videoCallProductsEnabled\"\n [style.borderColor]=\"data?.styles?.background?.accentColor\">\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\n [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\n <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\n </div>\n <button *ngIf=\"responseData?.quantity && appointmentSettings?.videoCallProductsEnabled && !videoCallAdded\" class=\"send-btn w-100\"\n [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" (click)=\"!edit ? addVideoCallCurrent() : ''\">\n <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\n <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\" class=\"w-75\">\n <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getButtonId(0)\"\n (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\n </div>\n</div>\n\n<ng-template #ReviewSection>\n <div class=\"review-sec\">\n <div class=\"title\">Customer Review</div>\n <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\n <span>Be the first to write a review</span>\n <button class=\"mt-3\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add\n Review' : 'Cancel Review'}}</button>\n <ng-container *ngIf=\"showReview\">\n <hr />\n <div class=\"user-review\">\n <div class=\"title\">Write a review</div>\n <span class=\"secondary-text\">RATING</span>\n <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\n <div>\n <span class=\"secondary-text\">Review Title</span>\n <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\n </div>\n <div>\n <span class=\"secondary-text\">Review</span>\n <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\n </div>\n <div class=\"review-action-btn\">\n <button [style.borderColor]=\"data?.styles?.background?.accentColor\"\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\n <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\n (click)=\"addProductReview()\"\n [disabled]=\"productReview == 0 && !reviewTitle?.length && !reviewDescription?.length\">Submit\n review</button>\n </div>\n </div>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #SocialIcons>\n <div class=\"d-flex\">\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\n [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\n <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\n <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\n <div style=\"position: relative;margin-right: 10px;\">\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\"\n [sectionId]=\"data?.id\"></simpo-socia-icons>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #ActionBtn>\n <div class=\"button-parent\">\n <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getButtonId(0)\">Out of\n Stock</button>\n <div class=\"quantity\" *ngIf=\"responseData?.quantity && !appointmentSettings?.videoCallProductsEnabled\"\n [style.borderColor]=\"data?.styles?.background?.accentColor\">\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\n [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\n <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\n </div>\n <button *ngIf=\"responseData?.quantity && appointmentSettings?.videoCallProductsEnabled && !videoCallAdded\" class=\"send-btn w-100\"\n [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\"\n [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\"\n (click)=\"!edit ? addVideoCallCurrent() : ''\">\n <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\n <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75\">\n <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getButtonId(0)\"\n (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\n </div>\n <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75 mt-2\">\n <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getButtonId(0)\"\n (click)=\"!edit ? buyNow() : ''\">Buy Now</button>\n </div>\n <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && !IsEcommerce\" class=\"w-75\">\n <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getButtonId(0)\" (click)=\"raiseLead()\"><mat-icon style=\"height:14px !important\">\n message</mat-icon>Notify Me</button>\n </div>\n <div class=\"favourite\" *ngIf=\"IsEcommerce\" (click)=\"isItemAsFavorite ? removeToFavourite() : addToFavourite()\">\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\"\n *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n </div>\n <div class=\"share-icon\" (click)=\"shareProduct()\">\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\">share</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #variants>\n <ng-container *ngIf=\"data?.styles?.customization == 'Style1'\">\n <ng-container *ngFor=\"let varient of varients | keyvalue\">\n <div class=\"mb-3\">\n <div class=\"varient-key\">{{varient.key}}</div>\n <div class=\"d-flex\" style=\"gap: 5px;\">\n <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\n [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\n [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\n (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\n </div>\n </div>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"data?.styles?.customization == 'Style2' && selectedVarient.size > 0\">\n <ng-container>\n <div class=\"row mt-2 style2-container w-100\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\n <div *ngFor=\"let item of selectedVarient | keyvalue\" class=\"px-3 py-2 varient-item\"\n [class]=\"getClass(selectedVarient)\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\n <div class=\"variant-head\">{{item.key | titlecase}}</div>\n <div class=\"variant-value text-start fw-semibold\">\n {{item.value |\n titlecase}}</div>\n </div>\n <div class=\"cursor-pointer p-0\" [class]=\"getClass(selectedVarient)\">\n <div class=\"custom-text d-flex align-items-center justify-content-center h-100 p-2\" data-bs-toggle=\"offcanvas\"\n data-bs-target=\"#offcanvasRightVariant\" [style.background]=\"data?.styles?.background?.accentColor\"\n [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">CUSTOMISE\n </div>\n </div>\n </div>\n </ng-container>\n </ng-container>\n</ng-template>\n\n<ng-template #ProductDesc>\n <div class=\"product-info-minimal\">\n <!-- Brand -->\n <div class=\"item-code-row\" *ngIf=\"responseData?.itemCategorisation?.itemBrand?.refName\">\n <span class=\"item-code-value\">by {{ responseData?.itemCategorisation?.itemBrand?.refName }}</span>\n </div>\n\n <!-- Item Code -->\n <div class=\"item-code-row\" *ngIf=\"responseData?.itemCode\">\n <span class=\"item-code-value\">{{ formatItemCode(responseData?.itemCode) }}</span>\n </div>\n\n <!-- Title and Price Row -->\n <div class=\"title-price-row-modern\">\n <h1 class=\"product-title-modern\">{{responseData?.name}}</h1>\n <div class=\"product-price-modern\">\n <span [innerHTML]=\"currency\"></span> {{responseData?.price?.sellingPrice |\n number:'1.0-0'}}\n </div>\n </div>\n\n <!-- Rating Row -->\n <div class=\"rating-row-modern\" *ngIf=\"responseData?.averageRating\">\n <p-rating [(ngModel)]=\"responseData.averageRating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\n <span class=\"rating-score\">{{responseData?.averageRating | number:'1.1-1'}}</span>\n <span class=\"separator\">|</span>\n <span class=\"reviews-link\" [style.color]=\"styles?.background?.accentColor\">\n {{responseData?.totalReviewCount}} reviews</span>\n </div>\n\n <!-- Brief Description -->\n <div class=\"product-brief-modern\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData?.brief | sanitizeHtml\">\n </div>\n </div>\n</ng-template>\n\n<ng-template #descriptors>\n <div class=\"row prod-desc mt-2\">\n <div>\n <!-- <div class=\"product-header d-flex align-items-center justify-content-between\">\n <span class=\"header-text\" *ngIf=\"responseData?.descriptor || responseData?.materials\">Product Details</span>\n <div class=\"pricebreakup-btn d-flex align-items-center justify-content-center cursor-pointer\"\n *ngIf=\"materialBasedPricing\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRightPriceBreakup\"\n [style.background]=\"data?.styles?.background?.accentColor\"\n [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">\n <mat-icon>add</mat-icon> PRICE BREAKUP\n </div>\n </div> -->\n <div class=\"description\">\n <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\n [innerHTML]=\"responseData?.descriptor?.name | sanitizeHtml\"\n [style.background]=\"data?.styles?.background?.color\"></div>\n </div>\n <div class=\"custom-specifications\" *ngIf=\"customFieldSpecs.length\">\n <div class=\"body-large spec-title\">Specifications</div>\n <table class=\"spec-table\">\n <tbody>\n <tr *ngFor=\"let spec of customFieldSpecs\">\n <th scope=\"row\">{{ spec.label }}</th>\n <td>{{ spec.value }}</td>\n </tr>\n </tbody>\n </table>\n </div>\n <!-- <ng-container *ngIf=\"materialBasedPricing\">\n <div class=\"jewellery-table-container\">\n <ng-container *ngFor=\"let ele of responseData?.materials\">\n <div class=\"jewel-container mt-2\">\n <div class=\"jewel-header\" [style.background]=\"getHeaderColor(ele.materialType)\">\n {{ele?.materialName | titlecase}}\n </div>\n <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor(ele.materialType)\">\n <div class=\"col-6 metal-purity\">\n <div class=\"row-header\">\n Net Weight/{{ele?.unit | titlecase}}\n </div>\n <div class=\"row-content\">\n {{ele.quantity + \" \" + (ele?.unit | titlecase)}}\n </div>\n </div>\n <div class=\"col-6 metal-purity\">\n <div class=\"row-header\">\n Purity\n </div>\n <div class=\"row-content\">\n {{ele.purity |\n titlecase}}\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container> -->\n </div>\n </div>\n\n</ng-template>\n\n<ng-template #ImageSection>\n <ng-container *ngIf=\"!varientLoading && (isMobile || data?.styles?.gridStyle == 'Style1')\">\n <div class=\"style-1-vertical d-flex flex-column w-100\">\n <div class=\"main-image-container p-0\">\n <div class=\"item-img rounded-3\">\n <lib-ngx-image-zoom *ngIf=\"currentImg\" [thumbImage]=\"currentImg\" [fullImage]=\"currentImg\" [zoomMode]=\"'hover'\"\n [magnification]=\"0.4\" [enableScrollZoom]=\"false\">\n </lib-ngx-image-zoom>\n <img *ngIf=\"!currentImg\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\"\n class=\"w-100 h-100 object-fit-cover\">\n </div>\n </div>\n <div class=\"thumbnail-row py-3 d-flex gap-2 overflow-auto hide-scroll\">\n <img class=\"img thumbnail-img\" *ngFor=\"let img of itemImages\" [src]=\"img.imgUrl\" (click)=\"changeImg(img.imgUrl)\"\n [class.active-thumb]=\"currentImg == img.imgUrl\"\n style=\"cursor: pointer; min-width: 80px; width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 2px solid transparent;\"\n [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!varientLoading && (!isMobile && data?.styles?.gridStyle == 'Style2')\">\n <div class=\"bento-masonry-container\">\n <div *ngFor=\"let img of itemImages; let i = index\" class=\"bento-item-modern\">\n <img [src]=\"img.imgUrl\" class=\"bento-img-modern\" (click)=\"changeImg(img.imgUrl)\">\n </div>\n </div>\n </ng-container>\n\n <div class=\"item-img\" *ngIf=\"varientLoading\">\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '100%',\n 'border-radius': '10px'\n }\">\n </ngx-skeleton-loader>\n </div>\n</ng-template>\n\n<ng-template #branding>\n <div class=\"row w-100\">\n <ng-container *ngFor=\"let brand of brandPromises\">\n <div class=\"col-4 d-flex flex-column align-items-center g-2\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n [src]=\"brand?.logoUrl\" alt=\"\" class=\"w-h-40 p-0 rounded-circle\">\n <div class=\"brand-text w-100 text-center py-2\">\n {{brand?.title | titlecase}}\n </div>\n </div>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #videoCallSchedule>\n <!-- *ngIf=\"appointmentSettings?.videoCallProductsEnabled\" -->\n <ng-container>\n <div class=\"row w-100 video-container\">\n <div class=\"col-4 video-call-img\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/697639c1786974532510Video_conference live.svg\"\n alt=\"\" class=\"w-100 h-100 \">\n </div>\n <div class=\"col-8 align-content-center\">\n <div class=\"video-head-text\">\n Live Video Call\n </div>\n <div class=\"sub-text\">\n Join a live video call with our consultants to see your favourite designs up close!\n </div>\n <button class=\"sch-btn text-center cursor-pointer\" *ngIf=\"!videoCallAdded\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getScheduleVideoCallButtonStyle()\" [buttonId]=\"getScheduleVideoCallButtonId()\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getScheduleVideoCallButtonId()\" (click)=\"!edit ? addVideoCallCurrent() : ''\">\n Schedule a Video Call\n </button>\n <ng-container *ngIf=\"videoCallAdded\">\n <div class=\"d-flex align-items-center gap-2\" style=\"color:#1E7A4B;\">\n <mat-icon>check_circle</mat-icon>\n <span>Added to your Video Call request</span>\n </div>\n <button class=\"sch-btn text-center cursor-pointer mt-2\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getScheduleVideoCallButtonStyle()\" [buttonId]=\"getScheduleVideoCallButtonId()\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getScheduleVideoCallButtonId()\" (click)=\"!edit ? continueVideoCallBooking() : ''\">Continue\n Booking</button>\n </ng-container>\n </div>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #DeliverySection>\n <div class=\"delivery-container\">\n <h2 class=\"delivery-title\">Delivery, Stores & Trial</h2>\n\n <!-- Location Section -->\n <div class=\"location-section mb-2\">\n <div class=\"location-container d-flex align-items-center justify-content-between\"\n [style.borderColor]=\"styles?.background?.accentColor\">\n <div class=\"d-flex align-items-center flex-grow-1 me-2\" style=\"width: calc(100% - 100px);\">\n <div class=\"d-flex mx-1\"><mat-icon\n class=\"gps d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\n </div>\n <input type=\"number\" class=\"postal-code-input flex-grow-1\" placeholder=\"Enter PinCode\" [(ngModel)]=\"pincode\"\n style=\"width: 100%;\">\n </div>\n <button class=\"btn locate-btn\" (click)=\"getStoreDetails()\">Submit</button>\n </div>\n <div *ngIf=\"!isPinCode\" style=\"color: red;\">Pin code must be 6 digits.</div>\n </div>\n\n <ng-container *ngIf=\"(pincode?.toString().length ?? 0) == 6\">\n <!-- Free Delivery Section -->\n <div class=\"delivery-section\">\n <div class=\"d-flex align-items-center\">\n <span class=\"delivery-icon d-flex align-items-center\">\n <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\n height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" class=\"feather feather-gift\">\n <polyline points=\"20 12 20 22 4 22 4 12\"></polyline>\n <rect x=\"2\" y=\"7\" width=\"20\" height=\"5\"></rect>\n <line x1=\"12\" y1=\"22\" x2=\"12\" y2=\"7\"></line>\n <path d=\"M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z\"></path>\n <path d=\"M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z\"></path>\n </svg>\n </span>\n\n <span class=\"delivery-text\" *ngIf=\"checkingDeliveryEstimate\">Checking delivery to {{ pincode }}\u2026</span>\n\n <span class=\"delivery-text\" *ngIf=\"deliveryEstimateChecked && !deliveryNotServiceable && deliveryEstimate\">\n <ng-container *ngIf=\"deliveryEstimate.eta\">{{ deliveryEstimate.eta }} \u00B7 </ng-container>\n Delivery: {{ deliveryEstimate.charge > 0 ? ('\u20B9' + (deliveryEstimate.charge | number:'1.2-2')) : 'FREE' }}\n </span>\n\n <span class=\"delivery-text\" style=\"color:#b91c1c;\" *ngIf=\"deliveryEstimateChecked && deliveryNotServiceable\">\n We don't currently deliver to this pincode.\n </span>\n </div>\n </div>\n\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #TryAtHome>\n <!-- Try At Home Section -->\n <div class=\"try-home-section\">\n <div class=\"d-flex align-items-start try-home-item\">\n <span class=\"home-icon d-flex align-items-center\">\n <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" class=\"feather feather-home\">\n <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path>\n <polyline points=\"9 22 9 12 15 12 15 22\"></polyline>\n </svg>\n </span>\n <div class=\"try-home-details\">\n <div class=\"try-home-header\">\n <span class=\"try-home-text\">Try At Home</span>\n <span class=\"free-text\"> (It's Free)</span>\n </div>\n <div class=\"home-appointment-text\">Home Appointment <span>Available to try from 29 Jul</span></div>\n <!-- <div class=\"appointment-text\">\n Home Appointment <span class=\"appointment-available\">Available to try from 28 Jun</span>\n </div> -->\n </div>\n </div>\n <div class=\"d-flex-align-items-center justify-content-center w-100\">\n <button class=\"book-appointment-btn\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getTryAtHomeButtonStyle()\" [buttonId]=\"getTryAtHomeButtonId()\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getTryAtHomeButtonId()\" (click)=\"!edit ? addToTrialCart() : ''\" *ngIf=\"!isItemAddedAsTrial\">Try at\n HOME</button>\n <button class=\"book-appointment-btn\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getTryAtHomeButtonStyle()\" [buttonId]=\"getTryAtHomeButtonId()\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getTryAtHomeButtonId()\" (click)=\"!edit ? continueHomeVisitBooking() : ''\" *ngIf=\"isItemAddedAsTrial\">Continue\n Booking</button>\n </div>\n </div>\n\n</ng-template>\n\n<ng-template #StoreSection>\n <!-- Nearest Store Section -->\n <ng-container\n *ngIf=\"storeDetails?.nearbyStore?.storeName && storeDetails?.nearbyStore?.storeName?.length > 0\">\n <div class=\"store-section\">\n <div class=\"d-flex align-items-center store-item\">\n <span class=\"store-icon d-flex align-items-center\">\n <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" class=\"feather feather-shopping-bag\">\n <path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"></path>\n <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\n <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\n </svg>\n </span>\n <div class=\"store-details\">\n <div class=\"store-text\">\n <span class=\"store-label\">Nearest Store - </span>\n <span class=\"store-name\">{{ storeDetails?.nearbyStore?.storeName | titlecase}}</span>\n <!-- <span class=\"store-distance\"> (4km)</span> -->\n </div>\n <!-- <div class=\"availability-section\">\n <span class=\"availability-badge\">\u23F0 AVAILABLE BY 28 JUN</span>\n </div> -->\n <!-- <div class=\"other-stores-text\">\n Also Available in <span class=\"other-stores-link\">18 other stores</span>\n </div> -->\n </div>\n </div>\n <div class=\"d-flex justify-content-center w-100\">\n <button class=\"find-store-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getButtonId(1)\" (click)=\"onFindInStore(storeDetails?.nearbyStore?.id)\">FIND IN\n STORE</button>\n </div>\n </div>\n </ng-container>\n <ng-template #emptyStore>\n <div class=\"delivery-section\">\n <div class=\"d-flex align-items-center\">\n <span class=\"delivery-icon d-flex align-items-center\">\n <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" class=\"feather feather-shopping-bag\">\n <path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"></path>\n <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\n <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\n </svg>\n </span>\n <span class=\"delivery-text\">No Stores are available</span>\n </div>\n </div>\n </ng-template>\n</ng-template>\n\n<div class=\"offcanvas offcanvas-end offcanvas-variant\" tabindex=\"-1\" id=\"offcanvasRightVariant\"\n aria-labelledby=\"offcanvasRightLabel\">\n <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\n <mat-icon data-bs-dismiss=\"offcanvas\"\n class=\"cursor-pointer d-flex align-items-center justify-content-center fs-5\">close</mat-icon>\n </div>\n <div class=\"varient-price px-3 pb-2\">\n <div class=\"price-text\">Price</div>\n <div class=\"d-flex g-3 align-items-center\">\n <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\n *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\n [innerHTML]='currency'></span>\n {{responseData?.price?.discountedPrice}}</div>\n <div class=\"price\"\n *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\"\n [ngClass]=\"{'text-decoration-line-through': responseData?.price?.discountedPrice}\"><span\n [innerHTML]='currency'></span>\n {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\n </div>\n </div>\n <div class=\"varient-container h-100 p-3\">\n <ng-container *ngFor=\"let varient of varients | keyvalue\">\n <div class=\"varient-data\">\n <div class=\"varient-key\">{{varient.key}}</div>\n <div class=\"d-flex\" style=\"gap: 5px;\">\n <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\n [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\n [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\n (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"confirm-btn w-100 p-3 text-center cursor-pointer\" data-bs-dismiss=\"offcanvas\"\n [style.background]=\"data?.styles?.background?.accentColor\" style=\"color: white;\">Confirm\n Customization</div>\n</div>\n\n\n<div class=\"offcanvas offcanvas-end offcanvas-small overflow-scroll\" tabindex=\"-1\" id=\"offcanvasRightPriceBreakup\">\n <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\n <mat-icon data-bs-dismiss=\"offcanvas\"\n class=\"cursor-pointer d-flex align-items-center justify-content-center fs-5\">close</mat-icon>\n </div>\n <div class=\"varient-price p-10-20\">\n <div class=\"price-break-header\">{{responseData?.name}}</div>\n </div>\n <div class=\"price-breakup h-100 w-100\">\n <ng-container *ngFor=\"let ele of responseData?.materials\">\n <div class=\"price-container mb-3 p-10-20\">\n <div class=\"price-container-header\">\n {{ ele.materialType + \" BREAKUP\" }}\n </div>\n <div class=\"row w-100 header-row\">\n <div class=\"col-3 text-center\">COMPONENT</div>\n <div class=\"col-3 text-center\">RATE</div>\n <div class=\"col-3 text-center\">WEIGHT</div>\n <div class=\"col-3 text-center\">FINAL VALUE</div>\n </div>\n <div class=\"row w-100 value-row\">\n <div class=\"col-3 text-center\">{{ ele.purity | titlecase }}</div>\n <div class=\"col-3 text-center\">\u20B9{{ getPricePerGram(ele.pricePerUnit,ele.materialType) |\n number:'1.2-2' }}</div>\n <div class=\"col-3 text-center\">{{ele.quantity + ' ' + (ele.unit | titlecase)}}</div>\n <div class=\"col-3 text-center total\">\u20B9{{ ele.pricePerUnit * ele.quantity | number }}</div>\n </div>\n </div>\n </ng-container>\n\n <div class=\"price-container mb-3 p-10-30 py-0 border-unset\">\n <div class=\"row w-100 summary-row\">\n <div class=\"col-6 text-start\">Making Charges</div>\n <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}\n </div>\n </div>\n <div class=\"row w-100 summary-row\">\n <div class=\"col-6 text-start\">Tax Amount</div>\n <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}\n </div>\n </div>\n <div class=\"row w-100 summary-row\">\n <div class=\"col-6 text-start\">Total Amount</div>\n <div class=\"col-6 text-end total\">\n \u20B9{{(responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) |\n number:'1.2-2'}}\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<ng-template #ReviewsSection>\n <div class=\"rv-section\" *ngIf=\"reviewsData\">\n\n <!-- Header: Title + Average | Bar Chart -->\n <div class=\"rv-header\">\n <div class=\"rv-header-left\">\n <h2 class=\"rv-title\">Reviews & Ratings</h2>\n <div class=\"rv-average-row\">\n <!-- filled stars -->\n <div class=\"rv-stars\">\n <ng-container *ngFor=\"let s of [1,2,3,4,5]\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n fill=\"#eab308\" />\n </svg>\n </ng-container>\n </div>\n <span class=\"rv-avg-num\">{{responseData?.averageRating | number:'1.1-1'}}</span>\n <span class=\"rv-avg-label\">average</span>\n </div>\n <div class=\"rv-count\" [style.color]=\"styles?.background?.accentColor || '#10b981'\">\n {{responseData?.totalReviewCount | number}} Reviews\n </div>\n </div>\n\n <div class=\"rv-bars\">\n <ng-container *ngFor=\"let rating of [5,4,3,2,1]\">\n <div class=\"rv-bar-row\">\n <span class=\"rv-bar-label\">{{rating}}</span>\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n fill=\"#eab308\" />\n </svg>\n <div class=\"rv-bar-track\">\n <div class=\"rv-bar-fill\" [style.width.%]=\"getPercentage(rating)\"></div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n\n <!-- Review Cards Grid -->\n <div class=\"rv-grid\">\n <ng-container *ngFor=\"let review of reviewsData\">\n <ng-container *ngIf=\"review.review\">\n <div class=\"rv-card\">\n <div class=\"rv-card-top\">\n <div class=\"rv-reviewer\">\n <img [src]=\"'https://ui-avatars.com/api/?name=' + (review?.userName ?? 'U') + '&background=random'\"\n class=\"rv-avatar\" alt=\"\">\n <div class=\"rv-name-date\">\n <span class=\"rv-name\">{{review?.userName ?? 'Anonymous'}}</span>\n <span class=\"rv-date\">{{review?.createdAt | date:'d MMM y'}}</span>\n </div>\n </div>\n <!-- Star rating -->\n <div class=\"rv-card-stars\">\n <ng-container *ngFor=\"let s of [1,2,3,4,5]\">\n <svg *ngIf=\"s <= review.rating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n fill=\"#eab308\" />\n </svg>\n <svg *ngIf=\"s > review.rating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\" style=\"opacity:0.25\">\n <path\n d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n fill=\"#eab308\" />\n </svg>\n </ng-container>\n </div>\n </div>\n <p class=\"rv-text\">{{review?.review ?? 'No comment provided.'}}</p>\n\n <!-- Review Images -->\n <div class=\"rv-images\" *ngIf=\"review?.reviewImages?.length\">\n <a *ngFor=\"let img of review.reviewImages\" [href]=\"img.imgUrl\" target=\"_blank\" class=\"rv-img-link\">\n <img [src]=\"img.imgUrl\" alt=\"Review image\" class=\"rv-img-thumb\" onerror=\"this.style.display='none'\">\n </a>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n\n <div class=\"text-center mt-4\" *ngIf=\"(reviewsData?.length ?? 0) > 3\">\n <button class=\"write-review-btn\" (click)=\"loadMoreReviews()\">Load More Reviews</button>\n </div>\n </div>\n</ng-template>\n\n<div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" role=\"dialog\"\n aria-hidden=\"true\">\n <div class=\"modal-dialog modal-dialog-centered video-modal\">\n <div class=\"modal-content\">\n <div class=\"modal-body\" style=\"height: 100%;\">\n <video controls muted playsinline style=\"width: 100%; height: 100%;\">\n <source\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/371647c1753962084265clideo_editor_48bc93c24e18470888c661bb09e437da (online-video-cutter.com).mp4\"\n type=\"video/mp4\">\n Your browser does not support the video tag.\n </video>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"modal fade\" id=\"reviewModal\" tabindex=\"-1\" aria-labelledby=\"reviewModalLabel\" role=\"dialog\"\n aria-hidden=\"true\">\n <div class=\"modal-dialog review-modal\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h1 class=\"modal-title fs-5\"></h1>\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\n </div>\n <div class=\"modal-body\">\n <div class=\"detail-review-container\">\n <div class=\"image-section\">\n <div class=\"product-image\">\n <div class=\"backward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex-1\"\n *ngIf=\"currentImageIndex > 0\">\u25BC</div>\n <img [src]=\"selectedReview?.reviewImages?.[currentImageIndex]?.imgUrl\" alt=\"\">\n <div class=\"forward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex+1\"\n *ngIf=\"currentImageIndex < selectedReview?.images?.length - 1\">\u25B2</div>\n <!-- <div class=\"earbuds-container\">\n <div class=\"charging-case\"></div>\n <div class=\"earbud left\"></div>\n <div class=\"earbud right\"></div>\n </div> -->\n </div>\n <!-- <div class=\"navigation-arrows\">\n </div> -->\n </div>\n\n <div class=\"review-section\">\n <div class=\"reviewer-header\">\n <div class=\"reviewer-avatar\">\uD83D\uDC64</div>\n <div class=\"reviewer-name\">{{selectedReview?.userName ?? \"-\"}}</div>\n </div>\n\n <div class=\"detail-rating\" *ngIf=\"selectedReview?.rating\">\n <p-rating [(ngModel)]=\"selectedReview.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\n </div>\n\n <div class=\"review-date\">\n Reviewed in India on 24 July 2025\n </div>\n\n <div class=\"review-text\">\n {{selectedReview?.review ?? \"-\"}}\n </div>\n\n <div class=\"images-section\">\n <h3>Images in this review</h3>\n <div class=\"review-images\">\n <div class=\"review-image\" [ngClass]=\"{'selected': currentImageIndex == i}\"\n *ngFor=\"let img of selectedReview?.reviewImages ?? [];let i = index\" (click)=\"currentImageIndex = i\">\n <img [src]=\"img.imgUrl\" alt=\"\">\n </div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div>\n</div>", styles: [".product-desc{display:flex}::ng-deep .product-desc table,::ng-deep .brief-desc table{border-collapse:collapse;width:100%;margin:10px 0}::ng-deep .product-desc table td,::ng-deep .product-desc table th,::ng-deep .brief-desc table td,::ng-deep .brief-desc table th{border:1px solid #dddddd!important;text-align:left;padding:8px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}::ng-deep .smooth-panel .p-panel-header{cursor:pointer;background:transparent;border:unset;font-size:18px;font-weight:700;padding:0}::ng-deep .smooth-panel .p-panel-content{border:unset;padding:0}.jewel-container{border-radius:12px;box-shadow:#63636333 0 2px 8px}.jewel-header{padding:8px 10px;border-radius:12px 12px 0 0;font-size:15px;font-weight:700;color:#4f3267}.br-p{border-radius:0 0 12px 12px;padding:10px 0}.row-header{font-size:13px;font-weight:700;color:#4f3267}.row-content{color:#4e555e}.jewellery-table-container{border-radius:12px}.jewellery-table{width:100%;border-collapse:collapse;border:1px solid #ddd;transition:all .3s ease}.jewellery-table th,.jewellery-table td{border:1px solid #ddd;padding:12px;text-align:left;transition:background-color .2s ease}.material-header td{background-color:#f8f9fa;font-weight:700;font-size:16px}.column-header{background-color:#f1f1f1}.column-header th{font-weight:600}.material-row:hover{background-color:#f5f5f5}.charges-header th,.total-header th,.total-header td{background-color:#eaeaea;font-weight:700}.total-row td{font-weight:700;font-size:18px;background-color:#f8f8f8}.custom-specifications{margin-top:16px}.spec-title{font-weight:600;margin-bottom:8px}.spec-table{width:100%;border-collapse:collapse;border:1px solid #ddd}.spec-table th,.spec-table td{border:1px solid #ddd;padding:12px;text-align:left;vertical-align:top;word-break:break-word}.spec-table th{width:35%;font-weight:600;background-color:#f8f9fa}@media screen and (max-width: 600px){.spec-table th,.spec-table td{padding:8px}.jewellery-table{font-size:14px}.jewellery-table th,.jewellery-table td{padding:8px}}.share-icon,.favourite{border-radius:50%!important;height:30px;width:30px;padding:6px;display:flex;align-items:center;justify-content:center;background-color:#f1f5f9!important;cursor:pointer;transition:all .2s ease;border:none!important}:is(.share-icon,.favourite) mat-icon{font-size:20px;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.share-icon:hover,.favourite:hover{background-color:#e2e8f0!important;transform:scale(1.05)}.header-text{font-size:17px;font-weight:bolder}.pricebreakup-btn{font-size:11px;font-weight:700;padding:8px;border-radius:8px;letter-spacing:.5px}.pricebreakup-btn mat-icon{font-size:18px;display:flex;align-items:center}.img-list{display:flex;gap:5px;max-height:460px}.img-list img{height:100px;width:100px;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden}.item-img img{width:100%!important;height:100%!important;object-fit:cover}.price{font-weight:600;font-size:24px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:1px solid;align-items:center;gap:15px;height:44px;width:75%;justify-content:space-between;border-radius:12px}.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}.fc{font-size:17px;font-weight:700}.tab-group{display:flex;gap:10px}.tab{font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black;max-width:max-content}.discount-price{font-size:1.4rem}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#f7f7f7;padding:11px 20px;border-radius:12px;margin-top:unset!important;width:70%!important;border:1px solid #d3d3d347}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#f7f7f7;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:7px 25px;cursor:pointer;font-weight:600}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:5px;height:44px!important;justify-content:space-between;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px 15px;width:fit-content!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:fit-content!important;font-size:14px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.w-h-40{width:40px!important;height:40px!important}.height{height:auto;overflow-y:visible}.mobile-footer{display:none}video{border-radius:18px}@media (min-width: 1024px){.zoom:hover{transform:scale(1.04);transition:transform .2s ease-in-out;overflow:hidden}.product-heading{font-size:20px;font-weight:600;margin-top:5px}}@media only screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:100000001;background-color:#fff;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;color:#000;align-items:center;justify-content:center;gap:15px;width:20%}.mobile-footer .icons .mat-icon{font-size:26px}.product-desc{font-size:13px}.brief-desc{font-size:16px;margin-top:unset!important}.total-container{padding-top:10px!important;padding-bottom:4rem!important}.out-of-stock,.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important;height:348px}.item-img img{width:100%;height:348px!important}.display-none{display:none}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{width:25%;border:2px solid lightgray;cursor:pointer}.input-field{margin-top:.7rem!important;margin-bottom:.7rem!important}.prod-desc{margin-top:20px}.video-call-container{margin:0!important}.product-img{height:220px}.call-details{width:100%!important;padding:3%!important}.send-btn{padding:.5rem 1rem!important}.review-sec :is(input,textarea){width:100%!important}.height{width:100%;height:auto}.product-heading{font-size:23px;font-weight:600}.discount-price{font-size:1.7rem!important}.header-text{font-size:20px!important}}.send-btn{font-size:14px!important;padding:1rem;display:flex;align-items:center;justify-content:center;text-transform:uppercase;font-weight:600}.send-btn mat-icon{height:20px;width:20px;font-size:18px}a{text-decoration:none}.brief-desc{font-size:14px;color:#4e555e}.total-container{height:auto;position:relative;display:block!important;overflow:visible}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin:unset!important}.modal-content{height:100%;border:none;border-radius:0!important}@media (min-width:768px) and (max-width:991px){.item-img{position:relative;width:auto!important;height:auto!important;overflow:hidden}.item-img img{height:auto!important;width:auto!important}.height{width:min-content}}@media (min-width:1024px){.product-headig{font-size:35px}}.mat-accordion .mat-expansion-panel:last-of-type{box-shadow:none}@media (min-width: 1400px){.container{max-width:unset;width:95%;height:100vh;overflow-y:auto}}.width-max{width:max-content}.fw-600{font-weight:600}.cursor-pointer{cursor:pointer}.offcanvas-variant{border-radius:30px 0 0 30px}.varient-header,.varient-price{background:#f7f7f7}.varient-header{border-radius:30px 0 0}.confirm-btn{border-radius:0 0 0 30px;position:absolute!important;bottom:0!important}.style2-container{border:1px solid;border-radius:12px;margin:0}.varient-item{border-right:1px solid;align-content:center}.variant-head{font-size:12px;color:#33363e}.varient-data{margin-bottom:25px;border-bottom:1px solid black;padding-bottom:25px}.variant-value{font-size:.9rem;color:#000}.custom-text{border-radius:0 8px 8px 0;font-size:.9rem;font-weight:600}.scroll-wrap{flex-wrap:nowrap}.brand-text{word-wrap:break-word;white-space:normal;font-size:12px;font-weight:600;line-height:20px}.video-container{border:1px solid rgb(240,240,240);margin:10px 0;border-radius:12px}.video-head-text{font-size:16px;font-weight:700}.sub-text{font-size:11px;color:#6f7377;margin-bottom:10px}.sch-btn{font-size:1.2rem!important;color:#fff;padding:3px 0;margin-top:5px}.tax-text{font-size:.7rem;color:#6f7377}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.delivery-container{margin:35px 0 15px;background-color:transparent}.delivery-title{font-size:16px;font-weight:600;margin:0 0 12px;line-height:1.2;margin-bottom:.5rem!important}.location-container{border:1px solid #cfcfcf;border-radius:12px;padding:10px;margin-bottom:5px;width:100%}.location-icon{width:20px;height:20px;background-color:#374151;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}.location-icon:before{content:\"\";width:8px;height:8px;background-color:#fff;border-radius:50%;position:absolute}.postal-code-input{font-size:12px;font-weight:600;letter-spacing:.5px;border:none;outline:none;background:transparent;width:90%}.postal-code-input::placeholder{font-weight:500}.locate-btn{background:none!important;border:none!important;font-weight:600;color:#111827;font-size:13px!important;padding:0!important;box-shadow:none!important;width:auto!important;white-space:nowrap}.gps{font-size:17px}.locate-btn:focus{box-shadow:none!important}.delivery-section{margin-bottom:15px;border:1px solid rgb(240,240,240);padding:10px;border-radius:12px}.delivery-icon{font-size:18px;color:#ec4899;margin-right:14px;width:20px}.delivery-text{font-size:14px;font-weight:700}.store-section{border:1px solid rgb(240,240,240);padding:10px;border-radius:12px;margin-bottom:15px}.store-item{margin-bottom:11px}.store-icon{font-size:18px;color:#f97316;margin-right:14px;margin-top:2px;width:20px}.store-details{flex:1}.store-text{font-size:14px}.store-name{font-weight:700}.availability-section{margin-bottom:6px}.availability-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;color:#d97706;background-color:#fef3c7;padding:4px 8px;border-radius:12px;letter-spacing:.5px}.other-stores-text{font-size:14px;color:#6b7280;line-height:1.4}.other-stores-link{color:#6b46c1;cursor:pointer;text-decoration:underline}.other-stores-link:hover{color:#553c9a}.find-store-btn{width:100%!important;padding:8px 20px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px}.try-home-section{border-radius:12px;padding:10px;border:1px solid rgb(240,240,240)}.try-home-item{margin-bottom:10px;padding:0}.home-icon{font-size:18px;color:#6b46c1;margin-right:14px;margin-top:2px;width:20px}.try-home-details{flex:1}.try-home-text{font-size:14px;font-weight:700;color:#374151}.free-text{font-size:14px;color:#6b7280}.appointment-text{font-size:14px;color:#6b7280;line-height:1.4}.appointment-available{font-weight:500;color:#374151}.book-appointment-btn{background:#111827;color:#fff;border:none;padding:10px 20px;border-radius:12px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px;transition:all .2s ease;width:100%}.book-appointment-btn:hover{background:#000;transform:translateY(-1px);box-shadow:0 4px 8px #0000001a}@media (max-width: 480px){.container{display:flex;align-items:center;flex-direction:column}.location-section{padding:12px 0}.try-home-section{padding:20px}}.w-90{width:90%}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.w-12{width:12%!important}.w-88{width:88%!important}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;position:absolute;bottom:20px;left:10px;width:95%!important}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.error-border{border:2px solid #dc3545!important}.offcanvas-small{height:72vh;top:25%;width:35%;border-radius:50px 0 0 50px}.rating{width:max-content;border:1px solid;border-radius:20px;padding:0 10px;margin-bottom:.5rem}.rating-no{padding-right:7px;margin:0;border-right:1px solid;font-size:.75rem}.p-10-20{padding:10px 30px}.price-break-header{font-size:19px;font-weight:600}.price-container{border-bottom:1px solid rgb(233,233,233)}.price-container-header{font-size:14px;font-weight:600;color:#333}.total-ratings{font-size:.75rem}.header-row .col-3{font-size:12px;font-weight:500;color:#666}.value-row .col-3{font-size:14px;font-weight:400;color:#333}.value-row .col-3.total{font-weight:600}.summary-row .col-6{font-size:15px;font-weight:500;color:#333;padding:unset}.summary-row .col-6.total{font-weight:600;padding-right:10px}.summary-row{padding:0 42px}.error-border{border:2px solid #e74c3c!important;box-shadow:0 0 5px #e74c3c4d!important}.form-control,.input-field input{transition:border-color .3s ease,box-shadow .3s ease}.error-border:focus{border-color:#e74c3c!important;box-shadow:0 0 8px #e74c3c80!important}.input-field input:focus{transform:scale(1.02)}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:-.125em;border:.125em solid currentcolor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}.spinner-border-sm{width:.875rem;height:.875rem;border-width:.125em}@keyframes spinner-border{to{transform:rotate(360deg)}}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.rv-section{padding:2rem 0;background:transparent}.rv-header{display:flex;justify-content:space-between;align-items:flex-start;gap:3rem}.rv-header-left{flex:1}.rv-title{font-size:1.4rem;font-weight:700;color:#111827;margin-bottom:.75rem}.rv-average-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}.rv-stars{display:flex;gap:2px}.rv-avg-num{font-size:1.4rem;font-weight:700;color:#111827}.rv-avg-label{font-size:.95rem;color:#6b7280;font-weight:400}.rv-count{font-size:.9rem;font-weight:600}.rv-bars{flex:1;max-width:420px;display:flex;flex-direction:column;gap:6px}.rv-bar-row{display:flex;align-items:center;gap:3px}.rv-bar-label{font-size:15px;font-weight:600;color:#111827;width:10px;text-align:right;flex-shrink:0}.rv-bar-track{flex:1;height:10px;background-color:#f3f4f6;border-radius:3px;overflow:hidden}.rv-bar-fill{height:100%;background-color:#eab308;border-radius:3px}.rv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.rv-card{padding:12px;border:1px solid #e5e7eb;border-radius:10px;background:#fff}.rv-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.85rem}.rv-reviewer{display:flex;align-items:center;gap:.7rem}.rv-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0}.rv-name-date{display:flex;flex-direction:column;gap:2px}.rv-name{font-size:16px;font-weight:600;color:#374151}.rv-date{font-size:.75rem;color:#9ca3af}.rv-card-stars{display:flex;gap:2px;flex-shrink:0}.rv-text{font-size:.88rem;line-height:1.65;color:#4b5563;margin:0}.rv-images{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.rv-img-link{display:block;flex-shrink:0;border-radius:8px;overflow:hidden;border:1px solid #e5e7eb}.rv-img-thumb{width:72px;height:72px;object-fit:cover;display:block;transition:transform .2s ease}.rv-img-link:hover .rv-img-thumb{transform:scale(1.05)}@media (max-width: 768px){.rv-header{flex-direction:column;gap:1.5rem}.rv-bars{max-width:100%}.rv-grid{grid-template-columns:1fr}}.review-section{padding:4rem 1rem;border-top:1px solid #f3f4f6;margin-top:4rem;background:transparent!important}.review-summary-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4rem;gap:3rem}.rating-summary-left{flex:1}.rating-summary-left h2.reviews-header-title{font-size:1.75rem;font-weight:700;margin-bottom:0;color:#111827}.average-score-container{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.average-score{color:#111827;display:flex;align-items:baseline;gap:8px}.average-score .score-num{font-size:1.5rem;font-weight:700}.average-score .score-text{font-size:1.1rem;font-weight:400;color:#111827}.total-reviews-count{font-weight:600;font-size:1.1rem;display:block}.rating-distribution{flex:1;max-width:480px}.rating-bar-row{display:flex;align-items:center;gap:1.25rem;margin-bottom:.85rem}.star-label{display:flex;align-items:center;justify-content:flex-start;width:35px;line-height:1}.progress-bar-bg{flex:1;height:12px;background-color:#f3f4f6;border-radius:9999px;overflow:hidden}.progress-bar-fill{height:100%;background-color:#eab308;border-radius:9999px}.review-actions-bar-minimal{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.write-review-btn-minimal{padding:.6rem 1.25rem;background:#f8f9fa;color:#4b5563;border:none;border-radius:8px;font-weight:500;font-size:.9rem;cursor:pointer;transition:all .2s}.write-review-btn-minimal:hover{background:#e5e7eb}.sort-dropdown-minimal select{padding:.6rem 2.25rem .6rem 1rem;border:1px solid #d1d5db;border-radius:8px;background:#fff;font-size:.9rem;color:#4b5563;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .75rem center;background-size:1rem;cursor:pointer}.reviews-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}.review-card{padding:1.5rem;border:1px solid #e5e7eb;border-radius:12px;background:#fff;box-shadow:none}.review-divider{margin:2rem 0;border:none;border-top:1px solid #f3f4f6}.reviews-header-title{font-size:1.4rem;font-weight:700;color:#111827;margin-bottom:0}.review-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.25rem}.reviewer-info{display:flex;align-items:center;gap:1rem}.reviewer-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#f3f4f6}.reviewer-name{font-weight:600;font-size:.95rem;color:#374151}.review-date-text{font-size:.8rem;color:#9ca3af}.reviewer-name-date{display:flex;flex-direction:row;align-items:center;gap:8px}.review-card-rating{display:flex;gap:2px}.review-card-text{font-size:1rem;line-height:1.7;color:#4b5563}.product-tabs-container{border-bottom:1px solid #f3f4f6;margin-bottom:8px}.tab-item{padding:1rem 0;font-weight:600;font-size:1.1rem;color:#6b7280;cursor:pointer;position:relative;transition:color .2s}.tab-content-pane h3{font-size:1.5rem;font-weight:700;margin-bottom:1.5rem}.tab-content-pane p{color:#4b5563;line-height:1.8;font-size:1.05rem}@media (max-width: 1024px){.reviews-grid{grid-template-columns:1fr}}@media (max-width: 768px){.review-summary-header{flex-direction:column;gap:2rem}.rating-distribution{max-width:100%}.bento-grid{height:auto;display:flex;flex-direction:column}.tabs-list{gap:1.5rem;overflow-x:auto}}.home-appointment-text{font-size:.8rem;color:#4e555e}.home-appointment-text span{font-weight:600}.video-call-img{height:120px;margin:0;padding:0;border-radius:45px}.video-call-img img{border-top-left-radius:12px;border-bottom-left-radius:12px}.discount{background:#fff3f2;padding:15px 15px 20px;margin-top:14px;border-radius:8px;display:flex;flex-direction:column;gap:5px;position:relative}.discount p{margin-bottom:0;color:#4f3267;font-weight:700;font-size:1rem}.discount .offer{color:#eb4f5c}.discount:before{content:\"\";display:block;height:44px;width:4px;background:#eb4f5c;position:absolute;left:0;top:16px;border-top-right-radius:20px;border-bottom-right-radius:20px}.metal-purity{display:flex;flex-direction:column;gap:10px}.scrollable-content{height:100%;max-height:95vh;overflow-y:auto}.style-2-img{max-height:70%;height:100%!important}.ring-size-video{background:#f0ebff;display:flex;justify-content:space-between;align-items:center;height:45px;padding:12px;border-radius:10px;margin-top:20px;margin-bottom:20px}.ring-size-video .text{color:#4f3267;font-size:.9rem}.ring-size-video .learn-how{color:#de57e9;font-weight:700;font-size:1rem;display:flex;gap:5px;align-items:center;cursor:pointer}.ring-size-video .learn-how mat-icon{font-size:20px;display:flex;align-items:center}.ring-size-video p{margin-bottom:0}.video-modal{height:90vh!important;width:90vw!important;max-width:none}.video-modal .modal-body{padding:0}.review-section{border-radius:10px;padding:15px}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.detail-review-container{display:flex;max-width:1200px;margin:0 auto;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px #0000001a}.image-section{flex:1;background:#000;position:relative;min-height:400px}.product-image{width:100%;height:100%;object-fit:cover;background:linear-gradient(135deg,#e8e8e8,#d0d0d0);display:flex;align-items:center;justify-content:center;max-height:400px;position:relative}.product-image img{height:100%;width:100%;object-fit:contain}.earbuds-container{position:relative;width:300px;height:200px}.charging-case{width:200px;height:120px;background:linear-gradient(145deg,#f0f0f0,#e0e0e0);border-radius:25px;position:absolute;top:40px;left:50px;box-shadow:inset 0 4px 8px #0000001a}.charging-case:before{content:\"\";position:absolute;inset:10px;background:linear-gradient(145deg,#e8e8e8,#d8d8d8);border-radius:15px;box-shadow:inset 0 2px 4px #0000001a}.earbud{position:absolute;width:45px;height:15px;background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border-radius:8px;box-shadow:0 2px 4px #0003}.earbud:before{content:\"noise\";position:absolute;top:2px;left:50%;transform:translate(-50%);font-size:6px;color:#888;font-weight:300}.earbud.left{top:70px;left:80px}.earbud.right{top:90px;left:130px}.earbud.right:before{color:#ff6b35}.review-section{flex:1;padding:30px;background:#fafafa}.reviewer-header{display:flex;align-items:center;margin-bottom:15px}.reviewer-avatar{width:40px;height:40px;background:#ccc;border-radius:50%;margin-right:12px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#666}.reviewer-name{font-size:16px;font-weight:500;color:#333}.detail-rating{margin:10px 0}.stars{display:flex;gap:2px;margin-bottom:5px}.star{color:#ff9500;font-size:18px}.thumbs{display:flex;gap:5px}.thumb{color:#ff9500;font-size:16px}.review-date{font-size:14px;color:#666;margin:15px 0}.review-text{font-size:16px;line-height:1.5;color:#333;margin-bottom:25px}.images-section h3{font-size:16px;color:#666;margin-bottom:15px;font-weight:500}.review-images{display:flex;gap:10px}.review-image{width:60px;height:60px;background:#ddd;border-radius:6px;border:2px solid #e0e0e0;cursor:pointer;transition:border-color .3s}.review-image img{width:100%;height:100%}.review-image:hover,.review-image.selected{border-color:#007185}.navigation-arrows{position:absolute;top:20px;right:20px;display:flex;flex-direction:column;gap:10px}.arrow{width:40px;height:40px;background:#fffc;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:#666;transition:background-color .3s;position:absolute;transform:rotate(90deg)}.backward-arrow{left:10px}.forward-arrow{right:10px}.arrow:hover{background:#fff}@media (max-width: 768px){.review-container{flex-direction:column}.image-section{min-height:300px}.review-section{padding:20px}}.review-modal{max-width:none;width:70vw}.review-modal .modal-body{padding:0}@media screen and (max-width: 475px){.offcanvas-small{height:100vh;width:100%;top:0}.review-modal{margin:0;height:100%;width:100%}.detail-review-container{flex-direction:column;height:100%}.product-image{max-height:289px}.image-section{min-height:289px}.video-modal{margin:0;height:100vh!important;width:100vw!important;overflow:hidden}}.modal{z-index:100000033}.breadcrumbs-modern{font-size:.85rem;color:#6b7280;margin-bottom:.5rem}.breadcrumb-item.active{color:#111827;font-weight:500}.product-title-modern{font-size:2rem;font-weight:800;color:#111827;margin:0;line-height:1.2;font-family:var(--website-font-family)}.product-price-modern{font-size:1.75rem;font-weight:700;color:#111827;font-family:var(--website-font-family)}.rating-line-modern{margin-top:.25rem}.rating-score-text{font-weight:700;font-size:1rem;color:#111827}.rating-count-text{font-size:.95rem;color:#10b981;font-weight:600;cursor:pointer}.product-description-brief{font-size:1rem;line-height:1.7;color:#4b5563;margin-top:1.5rem}.low-stock-text{color:#dc2626;font-weight:700;font-size:.875rem}.variants-modern-container{margin:2.5rem 0}.varient-key{font-size:.9rem;font-weight:800;color:#111827;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem}.color-swatch-modern{width:36px;height:36px;border-radius:50%;cursor:pointer;border:3px solid white;box-shadow:0 0 0 1px #e5e7eb;transition:all .25s cubic-bezier(.4,0,.2,1)}.color-swatch-modern:hover{transform:scale(1.15)}.color-swatch-modern.active{box-shadow:0 0 0 2px #111827}.box-varient-modern{padding:.75rem 1.5rem;border:2px solid #f3f4f6;border-radius:10px;font-size:.95rem;font-weight:700;color:#374151;cursor:pointer;transition:all .2s;min-width:70px;text-align:center;background:#fff}.box-varient-modern:hover{border-color:#d1d5db;background:#f9fafb}.box-varient-modern.active{border-color:#111827;background:#111827;color:#fff}.quantity-container{margin-top:1rem}.quantity-selector-modern{border:1px solid #e5e7eb;border-radius:12px;width:fit-content;background:#f9fafb;padding:2px}.qty-btn{width:44px;height:44px;border:none;background:transparent;font-size:1.5rem;color:#111827;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;border-radius:10px}.qty-btn:hover:not(:disabled){background:#fff;box-shadow:0 2px 4px #0000000d}.qty-btn:disabled{color:#d1d5db;cursor:not-allowed}.qty-display{width:50px;text-align:center;font-weight:700;color:#111827;font-size:1.1rem}.out-of-stock-modern{background:#f3f4f6;color:#9ca3af;padding:1.1rem 2.5rem;border:none;border-radius:14px;font-weight:800;font-size:1.1rem;cursor:not-allowed}.wishlist-btn-modern{width:56px;height:56px;border:2px solid #f3f4f6;border-radius:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;background:#fff}.wishlist-btn-modern:hover{background:#fef2f2;border-color:#fecaca}.wishlist-btn-modern mat-icon{font-size:26px}.thumbnail-column{padding-right:15px!important}.thumbnail-list::-webkit-scrollbar{display:none}.thumbnail-list{-ms-overflow-style:none;scrollbar-width:none}.image-section-modern{padding-right:2.5rem!important;padding-left:0!important;width:60%!important;max-width:60%!important;flex:0 0 60%!important;margin-top:0!important}.detail-section-modern{padding-left:.5rem!important;padding-right:0!important;width:40%!important;max-width:40%!important;flex:0 0 40%!important;margin-top:0!important}.thumbnail-column{width:90px!important;flex:0 0 90px!important}.item-img{width:100%!important;max-width:100%;margin:0;border-radius:20px;overflow:hidden;background:#f9fafb;position:relative}lib-ngx-image-zoom{width:100%!important;display:block!important}::ng-deep .ngx-image-zoom-container{width:100%!important;height:auto!important;aspect-ratio:1/1}.style-1-vertical{display:flex;flex-direction:column;width:100%}.main-image-container{width:100%;aspect-ratio:1 / 1}.thumbnail-row{display:flex;gap:8px;overflow-x:auto;padding:12px 0}.thumbnail-img{min-width:80px;width:80px;height:80px;object-fit:cover;border-radius:8px;border:2px solid transparent;cursor:pointer;transition:border-color .2s}.active-thumb{border-width:2px;border-style:solid}.bento-grid{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:15px;width:100%;aspect-ratio:5/4}.bento-item-large{grid-row:span 2;border-radius:24px;overflow:hidden}.bento-item-small{border-radius:20px;overflow:hidden}.bento-grid img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.bento-grid img:hover{transform:scale(1.05)}@media (max-width: 991px){.image-section-modern,.detail-section-modern{width:100%!important;max-width:100%!important;flex:0 0 100%!important;padding:0!important}.bento-grid{grid-template-columns:1fr;grid-template-rows:auto;aspect-ratio:auto}.bento-item-large{grid-row:span 1}}.bento-masonry-container{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:16px;width:100%}.bento-item-modern{border-radius:16px;overflow:hidden;background:#fdfdfd;aspect-ratio:1 / 1;transition:all .4s cubic-bezier(.4,0,.2,1)}.bento-img-modern{width:100%;height:100%;display:block;object-fit:cover;background:#fdfdfd;cursor:pointer;transition:transform .6s ease}.bento-item-modern:hover{transform:translateY(-4px);box-shadow:0 12px 30px #00000014}.bento-item-modern:hover .bento-img-modern{transform:scale(1.03)}.detail-section-modern{position:sticky;top:0;height:max-content;max-height:calc(100vh - 100px);overflow-y:auto;overflow-x:hidden;padding-left:2rem!important;scrollbar-width:none}.detail-section-modern::-webkit-scrollbar{display:none}.product-hero-card-modern{border:none;box-shadow:none;z-index:10;position:relative}.tabs-list{display:flex;justify-content:flex-start;gap:10px;list-style:none;padding:0;margin-bottom:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap}.tabs-list::-webkit-scrollbar{display:none}.tab-item{font-size:1rem;font-weight:600;color:#6b7280;padding:.5rem 1rem;border-radius:0;cursor:pointer;transition:all .25s;background:transparent;border-bottom:2px solid transparent;white-space:nowrap;flex-shrink:0}.tab-item:hover{background:transparent;color:#111827}.tab-content-pane{padding-top:.5rem}@media (max-width: 1024px){.product-hero-card-modern{padding:25px}.tab-content-pane{width:100%}}@media (max-width: 991px){.bento-masonry-container{grid-template-columns:1fr;grid-auto-rows:auto}.bento-item-modern.featured{grid-row:span 1;aspect-ratio:1 / 1}.product-hero-card-modern{position:static;padding:0;box-shadow:none;border:none;background:transparent;z-index:auto}.detail-section-modern{padding-left:0!important;margin-top:2rem;position:static!important;max-height:none!important;height:auto!important;overflow-y:visible!important;overflow-x:visible!important}.image-section-modern{padding-right:0!important}.tab-item{padding:.6rem 1rem;font-size:.95rem}.product-tabs-container{padding:0 4px}}.product-info-minimal{display:flex;flex-direction:column}.breadcrumbs-modern{display:flex;align-items:center;gap:8px;font-size:.95rem;color:#6b7280;font-weight:500}.breadcrumbs-modern .dot{font-size:1.2rem;line-height:1}.title-price-row-modern{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.product-title-modern{font-size:1.5rem;font-weight:800;color:#111827;margin:0;line-height:1.2}.product-price-modern{font-size:1.5rem;font-weight:500;color:#111827;white-space:nowrap}.rating-row-modern{display:flex;align-items:center;gap:12px;font-size:1rem;flex-wrap:wrap}.rating-score{font-weight:700;color:#111827}.separator{color:#e5e7eb}.reviews-link{font-weight:600}::ng-deep .rating-row-modern p-rating .p-rating-icon.p-rating-icon-active svg,::ng-deep .rating-row-modern p-rating .p-icon{color:#eab308!important;fill:#eab308!important}::ng-deep .rating-row-modern p-rating .p-rating-icon:not(.p-rating-icon-active) svg,::ng-deep .rating-row-modern p-rating .p-rating-icon:not(.p-rating-icon-active) .p-icon{color:#eab308!important;fill:#eab308!important;opacity:.25}.product-brief-modern{font-size:.95rem;line-height:1.7;color:#4b5563;margin-top:.5rem;text-align:justify}.write-review-btn{display:inline-flex;align-items:center;justify-content:center;padding:.65rem 1.75rem;background:#f8f9fa;color:#374151;border:1px solid #e5e7eb;border-radius:10px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;letter-spacing:.02em}.write-review-btn:hover{background:#f1f3f5;border-color:#d1d5db;transform:translateY(-1px);box-shadow:0 2px 8px #00000012}@media (max-width: 991px){.product-title-modern,.product-price-modern{font-size:1.3rem}}@media (max-width: 480px){.title-price-row-modern{flex-direction:column;gap:4px}.product-title-modern{font-size:1.2rem}.product-price-modern{font-size:1.2rem;white-space:normal}.rv-section{padding:1rem 0}.rv-header{gap:1rem}.rv-title{font-size:1.15rem;margin-bottom:.5rem}.rv-avg-num{font-size:1.15rem}.rv-bars{max-width:100%;width:100%}.rv-grid{grid-template-columns:1fr;gap:.75rem}.rv-card{padding:10px}.rv-name{font-size:14px}.tabs-list{gap:0}.tab-item{padding:.55rem 1rem;font-size:.9rem}.header-text{font-size:15px!important}.product-header{flex-wrap:wrap;gap:8px}.pricebreakup-btn{font-size:10px;padding:6px}.write-review-btn{width:100%;padding:.65rem 1rem}}.pb-glass-container{padding:16px;border-radius:16px}.pb-glass-card{background:#fff9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.85);border-radius:12px;margin-bottom:12px;overflow:hidden}.pb-glass-header{padding:10px 16px;font-weight:700;font-size:12px;letter-spacing:1.5px;text-transform:uppercase}.pb-glass-row{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;font-size:14px;border-bottom:1px solid rgba(0,0,0,.04)}.pb-glass-row:last-child{border-bottom:none}.pb-glass-row:nth-child(2n){background:#f8fafc99}.pb-label{color:#6b7280;font-weight:500}.pb-value{font-weight:600;color:#1f2937}.pb-summary-card{background:#ffffffb3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(203,213,225,.5);border-radius:12px;overflow:hidden}.pb-summary-row{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;font-size:14px;color:#374151;border-bottom:1px solid rgba(0,0,0,.05)}.pb-grand-total{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;font-weight:700;font-size:16px;letter-spacing:.5px}.item-code-row{margin-bottom:6px}.item-code-value{display:inline-block;padding:2px 10px;border-radius:999px;background:#f1f5f9;color:#475569;font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;border:1px solid #e2e8f0}.buy-now-btn{background:transparent!important;border:1.5px solid currentColor!important;color:inherit!important}\n"] }]
|
|
20465
20504
|
}], ctorParameters: () => [{ type: Object, decorators: [{
|
|
20466
20505
|
type: Inject,
|
|
20467
20506
|
args: [PLATFORM_ID]
|
|
@@ -21814,20 +21853,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
21814
21853
|
}] } });
|
|
21815
21854
|
|
|
21816
21855
|
class CheckoutComponent extends BaseSection {
|
|
21817
|
-
constructor(_eventService) {
|
|
21856
|
+
constructor(_eventService, restService) {
|
|
21818
21857
|
super();
|
|
21819
21858
|
this._eventService = _eventService;
|
|
21859
|
+
this.restService = restService;
|
|
21820
21860
|
this.isLoading = false;
|
|
21821
21861
|
this.editDeliveryAddress = true;
|
|
21862
|
+
// Live estimate from Shiprocket, keyed off the chosen delivery address's pincode - the cart's own
|
|
21863
|
+
// billdetails.deliveryCharges predates this and has no pincode to work with at cart-view time
|
|
21864
|
+
// (see ShiprocketDeliveryEstimateService's own design note), so this overrides it for display once
|
|
21865
|
+
// a real delivery address is known, rather than trying to retrofit the cart-view calculation.
|
|
21866
|
+
this.liveDeliveryEstimate = null;
|
|
21822
21867
|
}
|
|
21823
21868
|
ngOnInit() {
|
|
21824
21869
|
this.editDeliveryAddress = this.responseData?.userDetails ? true : false;
|
|
21870
|
+
if (this.responseData?.userDetails && !this.responseData.userDetails.deliveryAddress) {
|
|
21871
|
+
this.responseData.userDetails.deliveryAddress = {};
|
|
21872
|
+
}
|
|
21825
21873
|
this.content = this.data?.content;
|
|
21826
21874
|
this.styles = this.data?.styles;
|
|
21827
21875
|
this.button = this.data?.action?.buttons[0];
|
|
21828
21876
|
this._eventService.showLoadingScreen.subscribe((response) => {
|
|
21829
21877
|
this.isLoading = response;
|
|
21830
21878
|
});
|
|
21879
|
+
this.fetchLiveDeliveryEstimate();
|
|
21880
|
+
}
|
|
21881
|
+
/** Runs once at init (in case a saved address with a pincode was already passed in), and again
|
|
21882
|
+
* from the pincode input's (ngModelChange) - at init time there's usually no pincode yet, since
|
|
21883
|
+
* the shopper hasn't typed their address into this page's own form. */
|
|
21884
|
+
onDeliveryPincodeChange() {
|
|
21885
|
+
this.fetchLiveDeliveryEstimate();
|
|
21886
|
+
}
|
|
21887
|
+
fetchLiveDeliveryEstimate() {
|
|
21888
|
+
const deliveryPincode = this.responseData?.userDetails?.deliveryAddress?.zipCode;
|
|
21889
|
+
if (!deliveryPincode || deliveryPincode.toString().length !== 6) {
|
|
21890
|
+
this.liveDeliveryEstimate = null;
|
|
21891
|
+
return;
|
|
21892
|
+
}
|
|
21893
|
+
const items = this.responseData?.orderedItems ?? [];
|
|
21894
|
+
const weightKg = items.reduce((total, item) => total + ((item?.weight || 0.5) * (item?.quantity || 1)), 0) || 0.5;
|
|
21895
|
+
const orderGrossValue = this.responseData?.billdetails?.totalGrossValue ?? 0;
|
|
21896
|
+
this.restService.getDeliveryEstimate(deliveryPincode, weightKg, true, orderGrossValue).subscribe({
|
|
21897
|
+
next: (res) => { this.liveDeliveryEstimate = res; },
|
|
21898
|
+
error: () => { this.liveDeliveryEstimate = null; }
|
|
21899
|
+
});
|
|
21831
21900
|
}
|
|
21832
21901
|
placeOrder() {
|
|
21833
21902
|
this._eventService.placeOrder.emit({ cartData: this.responseData });
|
|
@@ -21843,8 +21912,21 @@ class CheckoutComponent extends BaseSection {
|
|
|
21843
21912
|
get currency() {
|
|
21844
21913
|
return BUSINESS_CONSTANTS.CURRENCY;
|
|
21845
21914
|
}
|
|
21846
|
-
|
|
21847
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CheckoutComponent, isStandalone: true, selector: "simpo-checkout", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\n <div class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\n <div class=\"row\">\n <div class=\"col-md-7 col-12\" *ngIf=\"editDeliveryAddress\">\n <div class=\"shipping-label heading-large\">Shipping To</div>\n <div class=\"row\">\n <div class=\"col-md-6 col-12 input-parent\">\n <label for=\"\">Name</label>\n <input [(ngModel)]=\"responseData.userDetails.userName\" type=\"text\" placeholder=\"Enter Name\"\n class=\"input-field\">\n </div>\n <div class=\"col-md-6 col-12 input-parent\">\n <label for=\"\">Mobile Number</label>\n <input [(ngModel)]=\"responseData.userDetails.mobile\" type=\"number\" placeholder=\"Enter number\"\n class=\"input-field\">\n </div>\n <div class=\"col-md-6 col-12 input-parent\">\n <label for=\"\">Email</label>\n <input [(ngModel)]=\"responseData.userDetails.email\" type=\"email\" placeholder=\"Enter email\"\n class=\"input-field\">\n </div>\n </div>\n\n <div class=\"shipping-label\" style=\"margin-top: 15px;\">Shipping Address</div>\n <div class=\"row\">\n <div class=\"col-12 input-parent\">\n <label for=\"\">Address</label>\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.addressLine1\" type=\"text\"\n placeholder=\"Flat/House No, Building, Colony\" class=\"input-field\">\n </div>\n <div class=\"col-md-6 col-12 input-parent\">\n <label for=\"\">Locality/Area</label>\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.localityName\" type=\"text\"\n placeholder=\"Eg: Jaybheri Enclave, Gachibowli\" class=\"input-field\">\n </div>\n <div class=\"col-md-6 col-12 input-parent\">\n <label for=\"\">Landmark</label>\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.landmark\" type=\"text\"\n placeholder=\"Eg: Near SBI Bank\" class=\"input-field\">\n </div>\n <div class=\"col-md-6 col-12 input-parent\">\n <label for=\"\">Pincode</label>\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.zipCode\" type=\"number\" placeholder=\"Eg: 500032\"\n class=\"input-field\">\n </div>\n <div class=\"col-md-6 col-12 input-parent\">\n <label for=\"\">City</label>\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.cityName\" type=\"text\"\n placeholder=\"Eg: Hyderabad\" class=\"input-field\">\n </div>\n <div class=\"col-md-6 col-12 input-parent\">\n <label for=\"\">State</label>\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.stateName\" type=\"text\"\n placeholder=\"Eg: Telangana\" class=\"input-field\">\n </div>\n </div>\n </div>\n <div class=\"col-md-7 col-12\" *ngIf=\"!editDeliveryAddress\">\n <div class=\"shipping-label\">Delivery Address</div>\n <div class=\"delivery-address\">\n <div style=\"position: absolute;right: 15px;\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/library-media/813827c1709186499689edit%201.png\"\n alt=\"\" style=\"cursor: pointer;\" (click)=\"editDeliveryAddress = true\">\n </div>\n <div class=\"userName\">{{responseData?.userDetails.userName}}</div>\n <div class=\"user-details\" style=\"margin-top: 5px;\">\n {{responseData?.userDetails.deliveryAddress?.addressLine1}},\n {{responseData?.userDetails.deliveryAddress?.localityName}}</div>\n <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.cityName}},\n {{responseData?.userDetails.deliveryAddress?.stateName}}</div>\n <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.countryName}} -\n {{responseData?.userDetails.deliveryAddress?.zipCode}}</div>\n <div class=\"user-details\" style=\"margin-top: 5px;\">Phone : <span\n style=\"font-weight: 500;\">{{responseData?.userDetails.mobile}}</span></div>\n </div>\n </div>\n <div class=\"offset-md-1 col-md-4 col-12 right-section\">\n <div class=\"shipping-label heading-large lh-normal\">\n Price Details\n </div>\n <div class=\"price-details\">\n <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalNetValue\">\n <div class=\"price-type\">Total MRP</div>\n <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.totalNetValue}}</div>\n </div>\n <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalTax\">\n <div class=\"price-type\">Total Tax</div>\n <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData?.billdetails?.totalTax}}</div>\n </div>\n <div class=\"price-parent-block\"\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\n <div class=\"price-type\">Delivery Charge</div>\n <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges}}</div>\n </div>\n <hr>\n <div class=\"price-parent-block\" *ngIf=\"responseData?.totalAmount\">\n <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\n <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span> {{responseData.totalAmount}}</div>\n </div>\n\n <div class=\"button-parent\">\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [backgroundInfo]=\"styles?.background\"\n [color]=\"styles?.background?.accentColor\" (click)=\"placeOrder()\">{{content?.button}}</button>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <ng-container *ngIf=\"style?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\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 *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</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", styles: [".container{margin-top:30px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.shipping-label{font-weight:600;font-size:18px;color:#141514;margin-bottom:5px}.input-parent{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}.input-label{font-family:Inter;font-weight:400;font-size:14px;color:#141514}.input-field{height:40px;border:2px solid#D0D5DD;border-radius:5px;padding-left:10px;font-size:14px;outline:none}.my-bag{font-size:16px;font-weight:600;font-family:Poppins;color:#000}.my-bag span{color:#939393}.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;font-family:Poppins}.coupon-desc{color:#939393;font-size:12px;font-family:Poppins;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600;font-family:Poppins}.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:14px;font-family:Poppins;color:#434443}.price-value{font-weight:500;font-family:Poppins;font-size:16px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}.button-parent button{padding-top:7px!important;padding-bottom:7px!important;font-size:16px!important}.delivery-address{border:1px solid#D0D5DD;padding:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;position:relative}.userName{font-size:18px;font-weight:500;font-family:Poppins;color:#000}.user-details{font-weight:400;font-size:16px;font-family:Poppins}.lh-normal{line-height:normal}hr{border:1px solid #E8E8E8}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media only screen and (max-width : 475px){.right-section{margin-top:15px}label{margin-bottom:6px}}\n"], dependencies: [{ 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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:
|
|
21915
|
+
/** responseData.totalAmount was computed upstream using the cart's stale (pincode-less)
|
|
21916
|
+
* deliveryCharges - swap that component out for the live estimate for display, so the total
|
|
21917
|
+
* shown here doesn't contradict the Delivery line directly above it. Does not touch the actual
|
|
21918
|
+
* order payload/billdetails - display only, per this feature's scoped-out payment-correctness
|
|
21919
|
+
* follow-up. */
|
|
21920
|
+
get displayTotalAmount() {
|
|
21921
|
+
const base = this.responseData?.totalAmount ?? 0;
|
|
21922
|
+
if (!this.liveDeliveryEstimate) {
|
|
21923
|
+
return base;
|
|
21924
|
+
}
|
|
21925
|
+
const staleDelivery = this.responseData?.billdetails?.deliveryCharges ?? 0;
|
|
21926
|
+
return base - staleDelivery + this.liveDeliveryEstimate.charge;
|
|
21927
|
+
}
|
|
21928
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckoutComponent, deps: [{ token: EventsService }, { token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
21929
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CheckoutComponent, isStandalone: true, selector: "simpo-checkout", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\n <div class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\n <div class=\"row\">\n <div class=\"col-md-7 col-12\" *ngIf=\"editDeliveryAddress\">\n <div class=\"shipping-label heading-large\">Shipping To</div>\n <div class=\"row\">\n <div class=\"col-md-6 col-12 input-parent\">\n <label for=\"\">Name</label>\n <input [(ngModel)]=\"responseData.userDetails.userName\" type=\"text\" placeholder=\"Enter Name\"\n class=\"input-field\">\n </div>\n <div class=\"col-md-6 col-12 input-parent\">\n <label for=\"\">Mobile Number</label>\n <input [(ngModel)]=\"responseData.userDetails.mobile\" type=\"number\" placeholder=\"Enter number\"\n class=\"input-field\">\n </div>\n <div class=\"col-md-6 col-12 input-parent\">\n <label for=\"\">Email</label>\n <input [(ngModel)]=\"responseData.userDetails.email\" type=\"email\" placeholder=\"Enter email\"\n class=\"input-field\">\n </div>\n </div>\n\n <div class=\"shipping-label\" style=\"margin-top: 15px;\">Shipping Address</div>\n <div class=\"row\">\n <div class=\"col-12 input-parent\">\n <label for=\"\">Address</label>\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.addressLine1\" type=\"text\"\n placeholder=\"Flat/House No, Building, Colony\" class=\"input-field\">\n </div>\n <div class=\"col-md-6 col-12 input-parent\">\n <label for=\"\">Locality/Area</label>\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.localityName\" type=\"text\"\n placeholder=\"Eg: Jaybheri Enclave, Gachibowli\" class=\"input-field\">\n </div>\n <div class=\"col-md-6 col-12 input-parent\">\n <label for=\"\">Landmark</label>\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.landmark\" type=\"text\"\n placeholder=\"Eg: Near SBI Bank\" class=\"input-field\">\n </div>\n <div class=\"col-md-6 col-12 input-parent\">\n <label for=\"\">Pincode</label>\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.zipCode\" (ngModelChange)=\"onDeliveryPincodeChange()\" type=\"number\" placeholder=\"Eg: 500032\"\n class=\"input-field\">\n </div>\n <div class=\"col-md-6 col-12 input-parent\">\n <label for=\"\">City</label>\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.cityName\" type=\"text\"\n placeholder=\"Eg: Hyderabad\" class=\"input-field\">\n </div>\n <div class=\"col-md-6 col-12 input-parent\">\n <label for=\"\">State</label>\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.stateName\" type=\"text\"\n placeholder=\"Eg: Telangana\" class=\"input-field\">\n </div>\n </div>\n </div>\n <div class=\"col-md-7 col-12\" *ngIf=\"!editDeliveryAddress\">\n <div class=\"shipping-label\">Delivery Address</div>\n <div class=\"delivery-address\">\n <div style=\"position: absolute;right: 15px;\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/library-media/813827c1709186499689edit%201.png\"\n alt=\"\" style=\"cursor: pointer;\" (click)=\"editDeliveryAddress = true\">\n </div>\n <div class=\"userName\">{{responseData?.userDetails.userName}}</div>\n <div class=\"user-details\" style=\"margin-top: 5px;\">\n {{responseData?.userDetails.deliveryAddress?.addressLine1}},\n {{responseData?.userDetails.deliveryAddress?.localityName}}</div>\n <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.cityName}},\n {{responseData?.userDetails.deliveryAddress?.stateName}}</div>\n <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.countryName}} -\n {{responseData?.userDetails.deliveryAddress?.zipCode}}</div>\n <div class=\"user-details\" style=\"margin-top: 5px;\">Phone : <span\n style=\"font-weight: 500;\">{{responseData?.userDetails.mobile}}</span></div>\n </div>\n </div>\n <div class=\"offset-md-1 col-md-4 col-12 right-section\">\n <div class=\"shipping-label heading-large lh-normal\">\n Price Details\n </div>\n <div class=\"price-details\">\n <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalNetValue\">\n <div class=\"price-type\">Total MRP</div>\n <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.totalNetValue}}</div>\n </div>\n <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalTax\">\n <div class=\"price-type\">Total Tax</div>\n <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData?.billdetails?.totalTax}}</div>\n </div>\n <div class=\"price-parent-block\" *ngIf=\"liveDeliveryEstimate\">\n <div class=\"price-type\">Delivery</div>\n <div class=\"price-value\">\n <span *ngIf=\"liveDeliveryEstimate.charge > 0\"><span [innerHtml]='currency'></span> {{liveDeliveryEstimate.charge}}</span>\n <span *ngIf=\"liveDeliveryEstimate.charge == 0\">FREE</span>\n </div>\n </div>\n <div class=\"price-parent-block\" style=\"font-size: 11px; color: #9ca3af;\" *ngIf=\"liveDeliveryEstimate?.eta\">\n {{liveDeliveryEstimate?.eta}}\n </div>\n <div class=\"price-parent-block\"\n *ngIf=\"!liveDeliveryEstimate && responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\n <div class=\"price-type\">Delivery Charge</div>\n <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges}}</div>\n </div>\n <hr>\n <div class=\"price-parent-block\" *ngIf=\"responseData?.totalAmount\">\n <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\n <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span> {{displayTotalAmount}}</div>\n </div>\n\n <div class=\"button-parent\">\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [backgroundInfo]=\"styles?.background\"\n [color]=\"styles?.background?.accentColor\" (click)=\"placeOrder()\">{{content?.button}}</button>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <ng-container *ngIf=\"style?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\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 *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</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", styles: [".container{margin-top:30px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.shipping-label{font-weight:600;font-size:18px;color:#141514;margin-bottom:5px}.input-parent{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}.input-label{font-family:Inter;font-weight:400;font-size:14px;color:#141514}.input-field{height:40px;border:2px solid#D0D5DD;border-radius:5px;padding-left:10px;font-size:14px;outline:none}.my-bag{font-size:16px;font-weight:600;font-family:Poppins;color:#000}.my-bag span{color:#939393}.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;font-family:Poppins}.coupon-desc{color:#939393;font-size:12px;font-family:Poppins;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600;font-family:Poppins}.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:14px;font-family:Poppins;color:#434443}.price-value{font-weight:500;font-family:Poppins;font-size:16px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}.button-parent button{padding-top:7px!important;padding-bottom:7px!important;font-size:16px!important}.delivery-address{border:1px solid#D0D5DD;padding:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;position:relative}.userName{font-size:18px;font-weight:500;font-family:Poppins;color:#000}.user-details{font-weight:400;font-size:16px;font-family:Poppins}.lh-normal{line-height:normal}hr{border:1px solid #E8E8E8}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media only screen and (max-width : 475px){.right-section{margin-top:15px}label{margin-bottom:6px}}\n"], dependencies: [{ 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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:
|
|
21848
21930
|
//DIRECTIVE
|
|
21849
21931
|
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: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }] }); }
|
|
21850
21932
|
}
|
|
@@ -21857,8 +21939,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
21857
21939
|
AnimationDirective,
|
|
21858
21940
|
ContentFitDirective,
|
|
21859
21941
|
HoverDirective, SvgDividerComponent
|
|
21860
|
-
], template: "<ng-container *ngIf=\"!isLoading\">\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\n <div class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\n <div class=\"row\">\n <div class=\"col-md-7 col-12\" *ngIf=\"editDeliveryAddress\">\n <div class=\"shipping-label heading-large\">Shipping To</div>\n <div class=\"row\">\n <div class=\"col-md-6 col-12 input-parent\">\n <label for=\"\">Name</label>\n <input [(ngModel)]=\"responseData.userDetails.userName\" type=\"text\" placeholder=\"Enter Name\"\n class=\"input-field\">\n </div>\n <div class=\"col-md-6 col-12 input-parent\">\n <label for=\"\">Mobile Number</label>\n <input [(ngModel)]=\"responseData.userDetails.mobile\" type=\"number\" placeholder=\"Enter number\"\n class=\"input-field\">\n </div>\n <div class=\"col-md-6 col-12 input-parent\">\n <label for=\"\">Email</label>\n <input [(ngModel)]=\"responseData.userDetails.email\" type=\"email\" placeholder=\"Enter email\"\n class=\"input-field\">\n </div>\n </div>\n\n <div class=\"shipping-label\" style=\"margin-top: 15px;\">Shipping Address</div>\n <div class=\"row\">\n <div class=\"col-12 input-parent\">\n <label for=\"\">Address</label>\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.addressLine1\" type=\"text\"\n placeholder=\"Flat/House No, Building, Colony\" class=\"input-field\">\n </div>\n <div class=\"col-md-6 col-12 input-parent\">\n <label for=\"\">Locality/Area</label>\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.localityName\" type=\"text\"\n placeholder=\"Eg: Jaybheri Enclave, Gachibowli\" class=\"input-field\">\n </div>\n <div class=\"col-md-6 col-12 input-parent\">\n <label for=\"\">Landmark</label>\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.landmark\" type=\"text\"\n placeholder=\"Eg: Near SBI Bank\" class=\"input-field\">\n </div>\n <div class=\"col-md-6 col-12 input-parent\">\n <label for=\"\">Pincode</label>\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.zipCode\" type=\"number\" placeholder=\"Eg: 500032\"\n class=\"input-field\">\n </div>\n <div class=\"col-md-6 col-12 input-parent\">\n <label for=\"\">City</label>\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.cityName\" type=\"text\"\n placeholder=\"Eg: Hyderabad\" class=\"input-field\">\n </div>\n <div class=\"col-md-6 col-12 input-parent\">\n <label for=\"\">State</label>\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.stateName\" type=\"text\"\n placeholder=\"Eg: Telangana\" class=\"input-field\">\n </div>\n </div>\n </div>\n <div class=\"col-md-7 col-12\" *ngIf=\"!editDeliveryAddress\">\n <div class=\"shipping-label\">Delivery Address</div>\n <div class=\"delivery-address\">\n <div style=\"position: absolute;right: 15px;\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/library-media/813827c1709186499689edit%201.png\"\n alt=\"\" style=\"cursor: pointer;\" (click)=\"editDeliveryAddress = true\">\n </div>\n <div class=\"userName\">{{responseData?.userDetails.userName}}</div>\n <div class=\"user-details\" style=\"margin-top: 5px;\">\n {{responseData?.userDetails.deliveryAddress?.addressLine1}},\n {{responseData?.userDetails.deliveryAddress?.localityName}}</div>\n <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.cityName}},\n {{responseData?.userDetails.deliveryAddress?.stateName}}</div>\n <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.countryName}} -\n {{responseData?.userDetails.deliveryAddress?.zipCode}}</div>\n <div class=\"user-details\" style=\"margin-top: 5px;\">Phone : <span\n style=\"font-weight: 500;\">{{responseData?.userDetails.mobile}}</span></div>\n </div>\n </div>\n <div class=\"offset-md-1 col-md-4 col-12 right-section\">\n <div class=\"shipping-label heading-large lh-normal\">\n Price Details\n </div>\n <div class=\"price-details\">\n <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalNetValue\">\n <div class=\"price-type\">Total MRP</div>\n <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.totalNetValue}}</div>\n </div>\n <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalTax\">\n <div class=\"price-type\">Total Tax</div>\n <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData?.billdetails?.totalTax}}</div>\n </div>\n <div class=\"price-parent-block\"\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\n <div class=\"price-type\">Delivery Charge</div>\n <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges}}</div>\n </div>\n <hr>\n <div class=\"price-parent-block\" *ngIf=\"responseData?.totalAmount\">\n <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\n <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span> {{responseData.totalAmount}}</div>\n </div>\n\n <div class=\"button-parent\">\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [backgroundInfo]=\"styles?.background\"\n [color]=\"styles?.background?.accentColor\" (click)=\"placeOrder()\">{{content?.button}}</button>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <ng-container *ngIf=\"style?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\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 *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</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", styles: [".container{margin-top:30px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.shipping-label{font-weight:600;font-size:18px;color:#141514;margin-bottom:5px}.input-parent{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}.input-label{font-family:Inter;font-weight:400;font-size:14px;color:#141514}.input-field{height:40px;border:2px solid#D0D5DD;border-radius:5px;padding-left:10px;font-size:14px;outline:none}.my-bag{font-size:16px;font-weight:600;font-family:Poppins;color:#000}.my-bag span{color:#939393}.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;font-family:Poppins}.coupon-desc{color:#939393;font-size:12px;font-family:Poppins;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600;font-family:Poppins}.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:14px;font-family:Poppins;color:#434443}.price-value{font-weight:500;font-family:Poppins;font-size:16px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}.button-parent button{padding-top:7px!important;padding-bottom:7px!important;font-size:16px!important}.delivery-address{border:1px solid#D0D5DD;padding:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;position:relative}.userName{font-size:18px;font-weight:500;font-family:Poppins;color:#000}.user-details{font-weight:400;font-size:16px;font-family:Poppins}.lh-normal{line-height:normal}hr{border:1px solid #E8E8E8}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media only screen and (max-width : 475px){.right-section{margin-top:15px}label{margin-bottom:6px}}\n"] }]
|
|
21861
|
-
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
21942
|
+
], template: "<ng-container *ngIf=\"!isLoading\">\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\n <div class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\n <div class=\"row\">\n <div class=\"col-md-7 col-12\" *ngIf=\"editDeliveryAddress\">\n <div class=\"shipping-label heading-large\">Shipping To</div>\n <div class=\"row\">\n <div class=\"col-md-6 col-12 input-parent\">\n <label for=\"\">Name</label>\n <input [(ngModel)]=\"responseData.userDetails.userName\" type=\"text\" placeholder=\"Enter Name\"\n class=\"input-field\">\n </div>\n <div class=\"col-md-6 col-12 input-parent\">\n <label for=\"\">Mobile Number</label>\n <input [(ngModel)]=\"responseData.userDetails.mobile\" type=\"number\" placeholder=\"Enter number\"\n class=\"input-field\">\n </div>\n <div class=\"col-md-6 col-12 input-parent\">\n <label for=\"\">Email</label>\n <input [(ngModel)]=\"responseData.userDetails.email\" type=\"email\" placeholder=\"Enter email\"\n class=\"input-field\">\n </div>\n </div>\n\n <div class=\"shipping-label\" style=\"margin-top: 15px;\">Shipping Address</div>\n <div class=\"row\">\n <div class=\"col-12 input-parent\">\n <label for=\"\">Address</label>\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.addressLine1\" type=\"text\"\n placeholder=\"Flat/House No, Building, Colony\" class=\"input-field\">\n </div>\n <div class=\"col-md-6 col-12 input-parent\">\n <label for=\"\">Locality/Area</label>\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.localityName\" type=\"text\"\n placeholder=\"Eg: Jaybheri Enclave, Gachibowli\" class=\"input-field\">\n </div>\n <div class=\"col-md-6 col-12 input-parent\">\n <label for=\"\">Landmark</label>\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.landmark\" type=\"text\"\n placeholder=\"Eg: Near SBI Bank\" class=\"input-field\">\n </div>\n <div class=\"col-md-6 col-12 input-parent\">\n <label for=\"\">Pincode</label>\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.zipCode\" (ngModelChange)=\"onDeliveryPincodeChange()\" type=\"number\" placeholder=\"Eg: 500032\"\n class=\"input-field\">\n </div>\n <div class=\"col-md-6 col-12 input-parent\">\n <label for=\"\">City</label>\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.cityName\" type=\"text\"\n placeholder=\"Eg: Hyderabad\" class=\"input-field\">\n </div>\n <div class=\"col-md-6 col-12 input-parent\">\n <label for=\"\">State</label>\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.stateName\" type=\"text\"\n placeholder=\"Eg: Telangana\" class=\"input-field\">\n </div>\n </div>\n </div>\n <div class=\"col-md-7 col-12\" *ngIf=\"!editDeliveryAddress\">\n <div class=\"shipping-label\">Delivery Address</div>\n <div class=\"delivery-address\">\n <div style=\"position: absolute;right: 15px;\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/library-media/813827c1709186499689edit%201.png\"\n alt=\"\" style=\"cursor: pointer;\" (click)=\"editDeliveryAddress = true\">\n </div>\n <div class=\"userName\">{{responseData?.userDetails.userName}}</div>\n <div class=\"user-details\" style=\"margin-top: 5px;\">\n {{responseData?.userDetails.deliveryAddress?.addressLine1}},\n {{responseData?.userDetails.deliveryAddress?.localityName}}</div>\n <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.cityName}},\n {{responseData?.userDetails.deliveryAddress?.stateName}}</div>\n <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.countryName}} -\n {{responseData?.userDetails.deliveryAddress?.zipCode}}</div>\n <div class=\"user-details\" style=\"margin-top: 5px;\">Phone : <span\n style=\"font-weight: 500;\">{{responseData?.userDetails.mobile}}</span></div>\n </div>\n </div>\n <div class=\"offset-md-1 col-md-4 col-12 right-section\">\n <div class=\"shipping-label heading-large lh-normal\">\n Price Details\n </div>\n <div class=\"price-details\">\n <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalNetValue\">\n <div class=\"price-type\">Total MRP</div>\n <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.totalNetValue}}</div>\n </div>\n <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalTax\">\n <div class=\"price-type\">Total Tax</div>\n <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData?.billdetails?.totalTax}}</div>\n </div>\n <div class=\"price-parent-block\" *ngIf=\"liveDeliveryEstimate\">\n <div class=\"price-type\">Delivery</div>\n <div class=\"price-value\">\n <span *ngIf=\"liveDeliveryEstimate.charge > 0\"><span [innerHtml]='currency'></span> {{liveDeliveryEstimate.charge}}</span>\n <span *ngIf=\"liveDeliveryEstimate.charge == 0\">FREE</span>\n </div>\n </div>\n <div class=\"price-parent-block\" style=\"font-size: 11px; color: #9ca3af;\" *ngIf=\"liveDeliveryEstimate?.eta\">\n {{liveDeliveryEstimate?.eta}}\n </div>\n <div class=\"price-parent-block\"\n *ngIf=\"!liveDeliveryEstimate && responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\n <div class=\"price-type\">Delivery Charge</div>\n <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges}}</div>\n </div>\n <hr>\n <div class=\"price-parent-block\" *ngIf=\"responseData?.totalAmount\">\n <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\n <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span> {{displayTotalAmount}}</div>\n </div>\n\n <div class=\"button-parent\">\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [backgroundInfo]=\"styles?.background\"\n [color]=\"styles?.background?.accentColor\" (click)=\"placeOrder()\">{{content?.button}}</button>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <ng-container *ngIf=\"style?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\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 *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</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", styles: [".container{margin-top:30px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.shipping-label{font-weight:600;font-size:18px;color:#141514;margin-bottom:5px}.input-parent{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}.input-label{font-family:Inter;font-weight:400;font-size:14px;color:#141514}.input-field{height:40px;border:2px solid#D0D5DD;border-radius:5px;padding-left:10px;font-size:14px;outline:none}.my-bag{font-size:16px;font-weight:600;font-family:Poppins;color:#000}.my-bag span{color:#939393}.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;font-family:Poppins}.coupon-desc{color:#939393;font-size:12px;font-family:Poppins;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600;font-family:Poppins}.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:14px;font-family:Poppins;color:#434443}.price-value{font-weight:500;font-family:Poppins;font-size:16px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}.button-parent button{padding-top:7px!important;padding-bottom:7px!important;font-size:16px!important}.delivery-address{border:1px solid#D0D5DD;padding:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;position:relative}.userName{font-size:18px;font-weight:500;font-family:Poppins;color:#000}.user-details{font-weight:400;font-size:16px;font-family:Poppins}.lh-normal{line-height:normal}hr{border:1px solid #E8E8E8}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media only screen and (max-width : 475px){.right-section{margin-top:15px}label{margin-bottom:6px}}\n"] }]
|
|
21943
|
+
}], ctorParameters: () => [{ type: EventsService }, { type: RestService }], propDecorators: { data: [{
|
|
21862
21944
|
type: Input
|
|
21863
21945
|
}], responseData: [{
|
|
21864
21946
|
type: Input
|
|
@@ -22132,6 +22214,10 @@ class OrderDetailsComponent {
|
|
|
22132
22214
|
if (t.date)
|
|
22133
22215
|
lastDateIndex = idx;
|
|
22134
22216
|
});
|
|
22217
|
+
// Courier name + AWB live on shiprocketShipmentDetails, a sibling of timeLineList on the same
|
|
22218
|
+
// brandOrderDetails object - not on any single timeline entry - so join them here for display,
|
|
22219
|
+
// same as the prototype's "Shipped · via Delhivery · DHV293841" line.
|
|
22220
|
+
const shipment = this.orderDetailData?.brandOrderDetails?.[0]?.shiprocketShipmentDetails;
|
|
22135
22221
|
this.orderTimiline = timelineList.map((timeline, index) => {
|
|
22136
22222
|
let statusType = 'future';
|
|
22137
22223
|
if (timeline.date) {
|
|
@@ -22142,10 +22228,14 @@ class OrderDetailsComponent {
|
|
|
22142
22228
|
statusType = index === lastDateIndex ? 'active' : 'completed';
|
|
22143
22229
|
}
|
|
22144
22230
|
}
|
|
22231
|
+
let desc = timeline.body;
|
|
22232
|
+
if (timeline.orderStatus === 'DISPATCHED' && shipment?.courierName && shipment?.awbCode) {
|
|
22233
|
+
desc = (desc ? desc + ' · ' : '') + `via ${shipment.courierName} · ${shipment.awbCode}`;
|
|
22234
|
+
}
|
|
22145
22235
|
return {
|
|
22146
22236
|
icon: this.getIcon(timeline.orderStatus),
|
|
22147
22237
|
name: timeline.title,
|
|
22148
|
-
desc:
|
|
22238
|
+
desc: desc,
|
|
22149
22239
|
date: timeline.date,
|
|
22150
22240
|
statusType: statusType
|
|
22151
22241
|
};
|
|
@@ -22222,6 +22312,27 @@ class OrderDetailsComponent {
|
|
|
22222
22312
|
trackOrder() {
|
|
22223
22313
|
window.open(this.orderDetailData?.orderTrackingLink, '_blank');
|
|
22224
22314
|
}
|
|
22315
|
+
// Read-only NDR status display only (no customer-facing retry/return actions yet - that needs a
|
|
22316
|
+
// real customer-identity/ownership check this backend doesn't have today).
|
|
22317
|
+
get isNdr() {
|
|
22318
|
+
return this.orderDetailData?.brandOrderDetails?.[0]?.orderStatus === 'NDR';
|
|
22319
|
+
}
|
|
22320
|
+
/** No structured NDR-reason field exists on the backend - this reuses the free-text body already
|
|
22321
|
+
* recorded on the NDR timeline entry (populated from the Shiprocket webhook), same as every other
|
|
22322
|
+
* timeline entry's text. */
|
|
22323
|
+
get ndrReasonText() {
|
|
22324
|
+
const entry = (this.orderDetailData?.brandOrderDetails?.[0]?.timeLineList || [])
|
|
22325
|
+
.find((t) => t.orderStatus === 'NDR');
|
|
22326
|
+
return entry?.body || null;
|
|
22327
|
+
}
|
|
22328
|
+
get ndrActionTaken() {
|
|
22329
|
+
const action = this.orderDetailData?.brandOrderDetails?.[0]?.shiprocketShipmentDetails?.ndrActionRequested;
|
|
22330
|
+
if (action === 'REATTEMPT')
|
|
22331
|
+
return 'Re-attempt requested';
|
|
22332
|
+
if (action === 'RETURN')
|
|
22333
|
+
return 'Return initiated';
|
|
22334
|
+
return null;
|
|
22335
|
+
}
|
|
22225
22336
|
downloadReceipt() {
|
|
22226
22337
|
this.downloadReceiptEmitter.emit(this.orderDetailData);
|
|
22227
22338
|
if (this.orderDetailData?.receiptUrl || this.orderDetailData?.invoiceUrl) {
|
|
@@ -22417,7 +22528,7 @@ class OrderDetailsComponent {
|
|
|
22417
22528
|
}
|
|
22418
22529
|
}
|
|
22419
22530
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OrderDetailsComponent, deps: [{ token: EventsService }, { token: StorageServiceService }, { token: RestService }, { token: i6$1.MessageService }, { token: ImageUplaodService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
22420
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OrderDetailsComponent, isStandalone: true, selector: "simpo-order-details", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", orderDetailData: "orderDetailData" }, outputs: { goBackEmitter: "goBackEmitter", downloadReceiptEmitter: "downloadReceiptEmitter" }, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n <div class=\"container-fluid\" [attr.style]=\"customClass\" style=\"background-color: #f8f9fa; min-height: 100vh;\">\n <!-- Main Box -->\n <div class=\"border-0 mx-auto\">\n\n <!-- Back button & Thanks -->\n <div class=\"d-flex align-items-center mb-2\">\n <svg (click)=\"goBack()\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"lucide lucide-chevron-left cp text-muted\">\n <path d=\"m15 18-6-6 6-6\"></path>\n </svg>\n <span class=\"text-muted fw-medium py-1\">Thanks!</span>\n </div>\n\n <!-- Main Headline -->\n <h2 class=\"fw-semibold mb-2 text-dark\" style=\"font-size: 1.75rem;\">\n {{ orderDetailData?.brandOrderDetails?.[0]?.orderStatus?.replaceAll(\"_\", \" \") | titlecase }} \uD83D\uDE80\n </h2>\n <p class=\"text-muted mb-3 fs-15\">\n {{ orderDetailData?.brandOrderDetails?.[0]?.orderStatus === 'DELIVERED' ? 'Your order has been\n delivered. Enjoy!' : (orderDetailData?.brandOrderDetails?.[0]?.orderStatus === 'CANCELLED' ? 'Your order\n was cancelled.' : 'Your order is on the way. It will be shipped. We will inform you.') }}\n </p>\n\n <!-- Colored Line -->\n <div class=\"mb-3\" style=\"height: 3px; width: 100%;\"\n [style.background]=\"'linear-gradient(to right, ' + (styles?.background?.color || '#20c997') + ', transparent)'\">\n </div>\n\n <!-- Order Number & Actions -->\n <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-sm-center mb-3 gap-2\">\n <div class=\"fw-semibold text-dark d-flex align-items-center\">\n Order number:\n <span class=\"ms-1\" [style.color]=\"styles?.background?.color || '#20c997'\">\n {{ orderDetailData?.orderNum }}\n </span>\n </div>\n <button\n class=\"btn receipt-download-btn btn-sm d-inline-flex align-items-center gap-1 shadow-sm fw-medium px-3 py-1\"\n style=\"border-radius: 6px; font-size: 13px;width:max-content\" (click)=\"downloadReceipt()\">\n <mat-icon style=\"font-size: 18px; width: 18px; height: 18px;\">receipt_long</mat-icon>\n <span>Download Receipt</span>\n </button>\n </div>\n\n <!-- Content Grid Layout -->\n <div class=\"row mt-2\">\n <!-- Left Column -->\n <div class=\"col-lg-7 col-xl-8 mb-4\">\n <!-- Items List -->\n <div class=\"card border mb-4 overflow-hidden\"\n style=\"border-color: #eaeaea !important; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.02);\">\n <ng-container\n *ngFor=\"let item of orderDetailData?.brandOrderDetails[0]?.orderedItems; let last = last\">\n <div class=\"item-card-pad\" [ngClass]=\"{'border-bottom': !last}\">\n <div class=\"d-flex gap-3 w-100 align-items-start\">\n <!-- Image -->\n <img loading=\"lazy\"\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n [src]=\"item.imgUrl\" alt=\"{{ item.itemName }}\"\n class=\"rounded shadow-sm flex-shrink-0 item-thumb\">\n\n <!-- Details + Price -->\n <div class=\"flex-grow-1 min-w-0\">\n <div class=\"d-flex align-items-start justify-content-between gap-2\">\n <h6 class=\"fw-bold text-dark mb-1 item-name\">{{ item.itemName }}</h6>\n <!-- Price always visible alongside name -->\n <div class=\"fw-bold text-dark text-nowrap item-price flex-shrink-0\">\n <span [innerHTML]=\"currency\"></span>{{ (item.sellingPrice *\n item.quantity) | number:'1.0-2' }}\n </div>\n </div>\n <p class=\"text-muted small mb-1 item-variant\"\n *ngIf=\"item.variantName || item.customizationDetails\">{{\n item.variantName || 'Regular' }}</p>\n <div class=\"text-muted item-qty\">Qty: {{ item.quantity }}</div>\n\n <!-- Review Section -->\n <div class=\"mt-3 pt-3 border-top\"\n *ngIf=\"orderDetailData?.brandOrderDetails?.[0]?.orderStatus == 'DELIVERED'\">\n\n <div\n class=\"d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-between mb-2 gap-2\">\n <h6 class=\"fw-bold mb-0 text-dark\" style=\"font-size: 14px;\">Leave a\n Review</h6>\n <p-rating [(ngModel)]=\"item.rating\" [cancel]=\"false\" [readonly]=\"false\"\n (ngModelChange)=\"submitReview(item)\"></p-rating>\n </div>\n\n <div class=\"add-detail-review text-primary fw-medium cursor-pointer d-inline-flex align-items-center gap-1\"\n style=\"font-size: 13px;\" (click)=\"item.showReview = !item.showReview\">\n <mat-icon\n style=\"font-size: 15px; width: 15px; height: 15px;\">mode_edit</mat-icon>\n <span>Write a Detailed Review</span>\n </div>\n\n <div *ngIf=\"item.showReview\" class=\"mt-3 review-form-box\">\n <h6 class=\"fw-semibold text-dark mb-2\" style=\"font-size: 14px;\">Share\n your experience</h6>\n\n <div class=\"mb-3\">\n <textarea class=\"form-control shadow-none review-textarea w-100\"\n [(ngModel)]=\"item.review\" rows=\"3\"\n placeholder=\"What did you like or dislike? How was the fit and quality?\"></textarea>\n </div>\n\n <div class=\"mb-3\">\n <h6 class=\"fw-medium text-muted mb-2\" style=\"font-size: 13px;\">\n Attach Photos <span\n style=\"font-size: 11px; opacity: 0.7;\">(Optional)</span>\n </h6>\n <div class=\"d-flex gap-2 flex-wrap align-items-center\">\n <div class=\"position-relative review-img-thumb\"\n *ngFor=\"let img of item?.reviewImages ?? []; let imgIdx = index\">\n <img [src]=\"img.imgUrl\" alt=\"\"\n style=\"width: 60px; height: 60px; object-fit: cover; border-radius: 8px; border: 1px solid #e2e8f0;\">\n <button class=\"review-img-remove\"\n (click)=\"item.reviewImages.splice(imgIdx, 1)\"\n title=\"Remove image\">\n <mat-icon\n style=\"font-size: 12px; width: 12px; height: 12px; line-height: 12px;\">close</mat-icon>\n </button>\n </div>\n\n <div class=\"d-flex align-items-center justify-content-center cursor-pointer review-upload-box\"\n (click)=\"reviewFileInput.click()\">\n <mat-icon\n style=\"font-size: 22px; width: 22px; height: 22px;\">add_photo_alternate</mat-icon>\n </div>\n <input type=\"file\" name=\"myfile\" multiple hidden\n accept=\"image/jpg,image/jpeg,image/gif,image/png,application/pdf,image/x-eps\"\n (change)=\"uploadImage($event, item)\" class=\"pc-btn\"\n #reviewFileInput />\n </div>\n </div>\n\n <button\n class=\"btn w-100 fw-bold d-flex justify-content-center align-items-center gap-2 review-submit-btn\"\n [style.background]=\"styles?.background?.color || '#20c997'\"\n (click)=\"submitReview(item)\">\n Submit Review\n <mat-icon\n style=\"font-size: 18px; width: 18px; height: 18px;\">send</mat-icon>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n </div>\n\n <!-- Summary Section -->\n <div class=\"row gx-5\">\n <!-- Left: Address & Payment -->\n <div class=\"col-md-6 mb-4 mb-md-0 d-flex flex-column gap-4\">\n <div>\n <h6 class=\"text-dark mb-2\" style=\"font-size: 13px; font-weight: 600;\">Shipping Address\n </h6>\n <div class=\"text-dark\" style=\"font-size: 13px;\">\n <span class=\"d-block mb-1\">{{ orderDetailData?.addressDetails?.receiverName\n }}</span>\n <span class=\"text-muted d-block\" style=\"line-height: 1.5; max-width: 280px;\">\n {{ orderAddress }}<br>\n {{ orderDetailData?.addressDetails?.receiverPhone }}\n </span>\n </div>\n </div>\n\n <div>\n <h6 class=\"text-dark mb-2\" style=\"font-size: 13px; font-weight: 600;\">Payment</h6>\n <div class=\"d-flex align-items-center gap-3\">\n <span class=\"text-primary fw-bolder fs-5\"\n *ngIf=\"getKey(orderDetailData?.paymentDetails)!=='COD'\"\n style=\"font-family: Arial, sans-serif; letter-spacing: -0.5px;\">VISA</span>\n <mat-icon *ngIf=\"getKey(orderDetailData?.paymentDetails)==='COD'\" class=\"text-muted\"\n style=\"font-size: 28px; width: 28px; height: 28px;\">payments</mat-icon>\n\n <div>\n <div class=\"text-dark\" style=\"font-size: 13px;\">\n {{orderDetailData?.paymentDetails ?\n (getKey(orderDetailData?.paymentDetails)==='COD' ? 'Cash on Delivery':\n getKey(orderDetailData?.paymentDetails) ) : 'N/A'}}</div>\n <div class=\"text-muted\" style=\"font-size: 12px; letter-spacing: 0.5px;\"\n *ngIf=\"getKey(orderDetailData?.paymentDetails)!=='COD'\">**** **** **** 1234\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Right: Bill Details -->\n <div class=\"col-md-6 pt-1\">\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <span class=\"text-muted\" style=\"font-size: 13px;\">Subtotal</span>\n <span class=\"text-dark fw-medium\" style=\"font-size: 13px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.totalNetValue |\n number:'1.0-2' }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2\"\n *ngIf=\"orderDetailData?.billDetails?.discountAmount\">\n <span class=\"text-muted\" style=\"font-size: 13px;\">Discount</span>\n <span class=\"text-success fw-medium\" style=\"font-size: 13px;\">\n -<span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount\n |\n number:'1.0-2' }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <span class=\"text-muted\" style=\"font-size: 13px;\">Shipping</span>\n <span class=\"text-dark fw-medium\"\n style=\"font-size: 13px;\">{{orderDetailData?.billDetails.deliveryCharges ?\n orderDetailData?.billDetails.deliveryCharges : 'FREE'}}</span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <span class=\"text-muted\" style=\"font-size: 13px;\">Estimated Tax</span>\n <span class=\"text-dark fw-medium\" style=\"font-size: 13px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount\n ?\n orderDetailData?.billDetails?.totalTaxAfterDiscount :\n orderDetailData?.billDetails?.totalTax\n | number:'1.0-2' }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2 text-success\"\n *ngIf=\"orderDetailData?.rewardUsed === 'REWARD_POINTS'\">\n <span style=\"font-size: 13px;\">Reward Amount</span>\n <span class=\" fw-medium\" style=\"font-size: 13px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.pointsConvertedINR }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2 text-success\"\n *ngIf=\"orderDetailData?.rewardUsed === 'VOUCHER'\">\n <span style=\"font-size: 13px;\">Reward Amount</span>\n <span class=\" fw-medium\" style=\"font-size: 13px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData.voucherValue }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2\"\n *ngIf=\"orderDetailData?.billDetails?.orraSchemeRedeemedAmount\">\n <span class=\"text-muted\" style=\"font-size: 13px;\">Redeem Amount</span>\n <span class=\"text-dark fw-medium\" style=\"font-size: 13px;\">\n -<span [innerHTML]=\"currency\"></span>{{\n orderDetailData?.billDetails?.orraSchemeRedeemedAmount | number:'1.0-2' }}\n </span>\n </div>\n\n <hr class=\"text-muted my-3\" style=\"opacity: 0.15;\">\n\n <div class=\"d-flex justify-content-between align-items-center\">\n <span class=\"text-dark\" style=\"font-size: 14px; font-weight: 600;\">Total</span>\n <span class=\"text-dark fw-bold\" style=\"font-size: 16px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center text-success\"\n *ngIf=\"orderDetailData?.rewardUsed === 'REWARD_POINTS'\">\n <span style=\"font-size: 14px; font-weight: 600;\">Amount Paid</span>\n <span class=\"fw-bold\" style=\"font-size: 16px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice ===\n orderDetailData?.pointsConvertedINR ? '0' :\n (orderDetailData?.billDetails?.finalPrice - orderDetailData?.pointsConvertedINR) }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center text-success\"\n *ngIf=\"orderDetailData?.rewardUsed === 'VOUCHER'\">\n <span style=\"font-size: 14px; font-weight: 600;\">Amount Paid</span>\n <span class=\"fw-bold\" style=\"font-size: 16px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice ===\n orderDetailData?.voucherValue ? '0' : (orderDetailData?.billDetails?.finalPrice -\n orderDetailData?.voucherValue) }}\n </span>\n </div>\n\n </div>\n </div>\n\n </div>\n\n <!-- Right Column -->\n <div class=\"col-lg-5 col-xl-4\">\n <!-- Timeline Card -->\n <div class=\"card border p-4 mb-4\"\n style=\"border-color: #eaeaea !important; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.02);\"\n *ngIf=\"orderDetailData?.orderTrackingLink || (orderTimiline && orderTimiline.length > 0)\">\n <div class=\"d-flex align-items-center justify-content-between mb-4 pb-3 border-bottom\">\n <h5 class=\"fw-bold mb-0 text-dark d-flex align-items-center gap-2\" style=\"font-size: 16px;\">\n <mat-icon style=\"color: #6c757d;\">timeline</mat-icon> Order Timeline\n </h5>\n\n <div *ngIf=\"orderDetailData?.orderTrackingLink\"\n class=\"d-inline-flex align-items-center gap-1 cursor-pointer fw-medium\"\n [style.color]=\"styles?.background?.color || '#0d6efd'\" style=\"font-size: 13px;\"\n (click)=\"trackOrder()\">\n <mat-icon\n style=\"font-size: 15px; width: 15px; height: 15px;\">location_searching</mat-icon>\n <span style=\"text-decoration: underline; text-underline-offset: 3px;\">Track Order</span>\n </div>\n </div>\n\n <div class=\"px-2 pt-2\" *ngIf=\"orderTimiline && orderTimiline.length > 0\">\n <p-timeline [value]=\"orderTimiline\" styleClass=\"custom-timeline\" align=\"left\">\n <ng-template pTemplate=\"marker\" let-event>\n <!-- Completed -->\n <span class=\"custom-marker completed-marker\"\n *ngIf=\"event.statusType === 'completed' || event.statusType === 'delivered'\"\n [style.backgroundColor]=\"styles?.background?.color || '#059669'\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"3\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n </span>\n\n <!-- Active -->\n <span class=\"custom-marker active-marker\" *ngIf=\"event.statusType === 'active'\"\n [style.borderColor]=\"styles?.background?.color || '#059669'\"></span>\n\n <!-- Future -->\n <span class=\"custom-marker future-marker\"\n *ngIf=\"event.statusType === 'future'\"></span>\n </ng-template>\n\n <ng-template pTemplate=\"content\" let-event let-last=\"last\">\n <div class=\"ms-4\" [ngClass]=\"{'pb-4': !last}\">\n <div class=\"fw-semibold text-dark\" style=\"font-size: 15px; margin-bottom: 2px;\">\n {{\n event.name?.replaceAll(\"_\", \" \") | titlecase }}</div>\n <div style=\"font-size: 14px;\"\n [ngClass]=\"{'text-muted': event.statusType !== 'future', 'text-light-grey': event.statusType === 'future'}\">\n {{ event.date ? (event.date | date:'MMM d, h:mm a') : 'Not yet' }}\n </div>\n </div>\n </ng-template>\n </p-timeline>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n</ng-container>\n\n<!-- Loading Skeleton -->\n<div class=\"container-fluid py-4\" *ngIf=\"isLoading\" style=\"background-color: #f8f9fa; min-height: 100vh;\">\n <div class=\"mx-auto\" style=\"max-width: 1000px;\">\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '60vh',\n 'border-radius': '12px',\n 'margin': '20px 0'\n }\"></ngx-skeleton-loader>\n </div>\n</div>", styles: [".right{height:250px;padding:15px;background-color:#f8f8f8;border-radius:8px;color:#000}*{font-family:var(--website-font-family)}hr{border-top-width:2px;margin:15px 0}.f-13{font-size:13px}.f-16{font-size:16px}.fw-800{font-weight:800}.br-6{border-radius:6px}textarea{resize:unset}.action-btn>button{font-size:14px!important;border:none;width:fit-content!important;margin-top:5px;border-radius:3px;padding:5px 10px;background-color:tomato;color:#fff}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}.onlyMobile{display:none}.track-order{background-color:#000;color:#fff;border:1px solid black;width:auto;border-radius:3px;padding:5px}@media only screen and (max-width: 475px){.onlyDesktop{display:none!important}.onlyMobile{display:block}.mat-icon{width:46px}.time-line{padding-bottom:6px}.right{width:98%!important;margin-bottom:4px!important;height:auto!important;padding:15px!important;margin-top:5%}.main-section{width:100%!important;flex-direction:column!important}.left{width:100%!important;padding:3%}.orderNum{margin-bottom:25px}}@media (min-width:768px) and (max-width:1024px){.left{padding:3%;width:70%}.right{width:28%!important;padding:2%;margin-top:10%;margin-right:3%}}.mt-25{margin-top:25px}.cp{cursor:pointer}.item-summary{box-shadow:0 0 4px #00000040;border-radius:12px}mat-icon{font-family:Material Icons!important}::ng-deep .p-rating-icon{color:#ffc107!important;font-size:1.25rem!important}::ng-deep .p-timeline-event-content{padding:0!important}::ng-deep .p-timeline-event-connector{background:#000!important;width:3px!important;position:absolute;bottom:-10px;height:55px;left:12px}.sbt-btn{border-radius:8px}::ng-deep .p-timeline-event-marker{display:none!important}@media screen and (min-width: 1200px){.scroll-45{overflow-y:scroll;height:45vh}.scroll-60{overflow-y:scroll;height:60vh}}.f-16{font-size:16px!important}.f-13{font-size:13px!important}@media (max-width: 575.98px){.display-6{font-size:1.5rem}.h3{font-size:1.25rem}}.gap-3{gap:1rem!important}.shadow-sm{box-shadow:0 .125rem .5rem #0000001a!important}.card-header{border-bottom:unset!important}.btn:hover{transform:translateY(-1px);transition:all .2s ease}.card:hover{transform:translateY(-2px);transition:all .3s ease}.bg-opacity-10{background-color:rgba(var(--bs-primary-rgb),.1)!important}.cursor-pointer{cursor:pointer}.transition-transform{transition:transform .3s ease}.rotate-180{transform:rotate(180deg)}.card-header:hover{opacity:.9;transition:opacity .2s ease}.card-body{transition:all .3s ease}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.add-review-img{color:#828484;width:65px;display:flex;align-items:center;justify-content:center;order:3px dotted black;background:#f0f2f2;border:1px solid #d5d9d9!important;cursor:pointer}.order-status{border-radius:8px;padding:5px 8px;font-size:16px}.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}.fs-15{font-size:15px}.review-textarea{border:1px solid #e2e8f0;border-radius:8px;font-size:14px;resize:none;background-color:#f8fafc;padding:12px 8px;transition:all .2s ease-in-out}.review-textarea:focus{border-color:#cbd5e1;background-color:#fff;box-shadow:0 0 0 3px #e2e8f080!important;outline:none}.review-upload-box{width:72px;height:72px;border:2px dashed #cbd5e1;border-radius:8px;background-color:#f8fafc;transition:all .2s ease-in-out;color:#64748b}.review-img-thumb{display:inline-block}.review-img-remove{position:absolute;top:-6px;right:-6px;width:18px!important;height:18px;border-radius:50%;background:#ef4444;color:#fff;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 4px #0000002e;transition:background .15s ease,transform .15s ease;z-index:1}.review-img-remove:hover{background:#dc2626;transform:scale(1.1)}.review-upload-box:hover{background-color:#f1f5f9;border-color:#94a3b8;color:#475569}.review-submit-btn{color:#fff!important;border-radius:8px;padding:12px 0;font-size:14px!important;border:none;letter-spacing:.3px;transition:transform .1s ease,box-shadow .2s ease}.review-submit-btn:hover{box-shadow:0 6px 15px #0000001a;transform:translateY(-1px)}.review-submit-btn:active{transform:translateY(1px)}::ng-deep .custom-timeline .custom-marker{display:flex!important;align-items:center!important;justify-content:center!important;width:28px!important;height:28px!important;border-radius:50%!important;z-index:10}::ng-deep .custom-timeline .active-marker{background-color:#fff!important;border-width:6px!important;border-style:solid!important}::ng-deep .custom-timeline .future-marker{background-color:#fff!important;border:5px solid #cbd5e1!important}::ng-deep .custom-timeline .p-timeline-event-marker{border:none!important;background:transparent!important;display:flex!important}::ng-deep .custom-timeline .p-timeline-event-connector{background-color:#cbd5e1!important;width:2px!important}::ng-deep .custom-timeline .p-timeline-event-opposite{display:none!important;flex:0!important;padding:0!important}::ng-deep .custom-timeline .p-timeline-event{min-height:50px}.text-light-grey{color:#94a3b8}.w-40{width:40%}@media (min-width: 576px){.w-sm-40{width:40%!important}}.item-card-pad{padding:16px 20px}.item-thumb{width:72px;height:72px;object-fit:cover;border-radius:8px}.item-name{font-size:14px;line-height:1.4}.item-price{font-size:14px}.item-variant,.item-qty{font-size:12px}.min-w-0{min-width:0}.review-form-box{background:#fff;border:1px solid #f0f0f0;border-radius:12px;padding:14px;box-shadow:0 4px 20px #00000008;overflow:hidden}@media (max-width: 575px){.container-fluid{padding-left:12px!important;padding-right:12px!important}.item-card-pad{padding:12px 14px}.item-thumb{width:60px;height:60px}.item-name,.item-price{font-size:13px}::ng-deep .p-rating-icon{font-size:1.35rem!important;padding:2px!important}.row.gx-5{--bs-gutter-x: 1rem !important}h2.fw-semibold{font-size:1.4rem!important}}.receipt-download-btn:hover,.receipt-download-btn:focus,.receipt-download-btn:active{color:#212529!important;border-color:#212529!important;box-shadow:none!important;transform:none!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: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: TimelineModule }, { kind: "component", type: i8$3.Timeline, selector: "p-timeline", inputs: ["value", "style", "styleClass", "align", "layout"] }, { kind: "directive", type: i6$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i3$3.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { 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: MatTooltipModule }] }); }
|
|
22531
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OrderDetailsComponent, isStandalone: true, selector: "simpo-order-details", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", orderDetailData: "orderDetailData" }, outputs: { goBackEmitter: "goBackEmitter", downloadReceiptEmitter: "downloadReceiptEmitter" }, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n <div class=\"container-fluid\" [attr.style]=\"customClass\" style=\"background-color: #f8f9fa; min-height: 100vh;\">\n <!-- Main Box -->\n <div class=\"border-0 mx-auto\">\n\n <!-- Back button & Thanks -->\n <div class=\"d-flex align-items-center mb-2\">\n <svg (click)=\"goBack()\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"lucide lucide-chevron-left cp text-muted\">\n <path d=\"m15 18-6-6 6-6\"></path>\n </svg>\n <span class=\"text-muted fw-medium py-1\">Thanks!</span>\n </div>\n\n <!-- Main Headline -->\n <h2 class=\"fw-semibold mb-2 text-dark\" style=\"font-size: 1.75rem;\">\n {{ orderDetailData?.brandOrderDetails?.[0]?.orderStatus?.replaceAll(\"_\", \" \") | titlecase }} \uD83D\uDE80\n </h2>\n <p class=\"text-muted mb-3 fs-15\">\n {{ orderDetailData?.brandOrderDetails?.[0]?.orderStatus === 'DELIVERED' ? 'Your order has been\n delivered. Enjoy!' : (orderDetailData?.brandOrderDetails?.[0]?.orderStatus === 'CANCELLED' ? 'Your order\n was cancelled.' : 'Your order is on the way. It will be shipped. We will inform you.') }}\n </p>\n\n <!-- Colored Line -->\n <div class=\"mb-3\" style=\"height: 3px; width: 100%;\"\n [style.background]=\"'linear-gradient(to right, ' + (styles?.background?.color || '#20c997') + ', transparent)'\">\n </div>\n\n <!-- NDR status banner (read-only - no customer retry/return actions yet) -->\n <div *ngIf=\"isNdr\" class=\"mb-3\"\n style=\"background:#fff7ed;border:1px solid #fed7aa;border-radius:10px;padding:16px 18px;\">\n <div style=\"color:#c2410c;font-weight:700;font-size:14px;margin-bottom:4px;\">Delivery attempt unsuccessful</div>\n <div *ngIf=\"ndrReasonText\" style=\"color:#9a5b2e;font-size:13px;\">{{ ndrReasonText }}</div>\n <div *ngIf=\"ndrActionTaken\" style=\"margin-top:8px;\">\n <span style=\"background:#e0e7ff;color:#4338ca;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;\">{{ ndrActionTaken }}</span>\n </div>\n </div>\n\n <!-- Order Number & Actions -->\n <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-sm-center mb-3 gap-2\">\n <div class=\"fw-semibold text-dark d-flex align-items-center\">\n Order number:\n <span class=\"ms-1\" [style.color]=\"styles?.background?.color || '#20c997'\">\n {{ orderDetailData?.orderNum }}\n </span>\n </div>\n <button\n class=\"btn receipt-download-btn btn-sm d-inline-flex align-items-center gap-1 shadow-sm fw-medium px-3 py-1\"\n style=\"border-radius: 6px; font-size: 13px;width:max-content\" (click)=\"downloadReceipt()\">\n <mat-icon style=\"font-size: 18px; width: 18px; height: 18px;\">receipt_long</mat-icon>\n <span>Download Receipt</span>\n </button>\n </div>\n\n <!-- Content Grid Layout -->\n <div class=\"row mt-2\">\n <!-- Left Column -->\n <div class=\"col-lg-7 col-xl-8 mb-4\">\n <!-- Items List -->\n <div class=\"card border mb-4 overflow-hidden\"\n style=\"border-color: #eaeaea !important; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.02);\">\n <ng-container\n *ngFor=\"let item of orderDetailData?.brandOrderDetails[0]?.orderedItems; let last = last\">\n <div class=\"item-card-pad\" [ngClass]=\"{'border-bottom': !last}\">\n <div class=\"d-flex gap-3 w-100 align-items-start\">\n <!-- Image -->\n <img loading=\"lazy\"\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n [src]=\"item.imgUrl\" alt=\"{{ item.itemName }}\"\n class=\"rounded shadow-sm flex-shrink-0 item-thumb\">\n\n <!-- Details + Price -->\n <div class=\"flex-grow-1 min-w-0\">\n <div class=\"d-flex align-items-start justify-content-between gap-2\">\n <h6 class=\"fw-bold text-dark mb-1 item-name\">{{ item.itemName }}</h6>\n <!-- Price always visible alongside name -->\n <div class=\"fw-bold text-dark text-nowrap item-price flex-shrink-0\">\n <span [innerHTML]=\"currency\"></span>{{ (item.sellingPrice *\n item.quantity) | number:'1.0-2' }}\n </div>\n </div>\n <p class=\"text-muted small mb-1 item-variant\"\n *ngIf=\"item.variantName || item.customizationDetails\">{{\n item.variantName || 'Regular' }}</p>\n <div class=\"text-muted item-qty\">Qty: {{ item.quantity }}</div>\n\n <!-- Review Section -->\n <div class=\"mt-3 pt-3 border-top\"\n *ngIf=\"orderDetailData?.brandOrderDetails?.[0]?.orderStatus == 'DELIVERED'\">\n\n <div\n class=\"d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-between mb-2 gap-2\">\n <h6 class=\"fw-bold mb-0 text-dark\" style=\"font-size: 14px;\">Leave a\n Review</h6>\n <p-rating [(ngModel)]=\"item.rating\" [cancel]=\"false\" [readonly]=\"false\"\n (ngModelChange)=\"submitReview(item)\"></p-rating>\n </div>\n\n <div class=\"add-detail-review text-primary fw-medium cursor-pointer d-inline-flex align-items-center gap-1\"\n style=\"font-size: 13px;\" (click)=\"item.showReview = !item.showReview\">\n <mat-icon\n style=\"font-size: 15px; width: 15px; height: 15px;\">mode_edit</mat-icon>\n <span>Write a Detailed Review</span>\n </div>\n\n <div *ngIf=\"item.showReview\" class=\"mt-3 review-form-box\">\n <h6 class=\"fw-semibold text-dark mb-2\" style=\"font-size: 14px;\">Share\n your experience</h6>\n\n <div class=\"mb-3\">\n <textarea class=\"form-control shadow-none review-textarea w-100\"\n [(ngModel)]=\"item.review\" rows=\"3\"\n placeholder=\"What did you like or dislike? How was the fit and quality?\"></textarea>\n </div>\n\n <div class=\"mb-3\">\n <h6 class=\"fw-medium text-muted mb-2\" style=\"font-size: 13px;\">\n Attach Photos <span\n style=\"font-size: 11px; opacity: 0.7;\">(Optional)</span>\n </h6>\n <div class=\"d-flex gap-2 flex-wrap align-items-center\">\n <div class=\"position-relative review-img-thumb\"\n *ngFor=\"let img of item?.reviewImages ?? []; let imgIdx = index\">\n <img [src]=\"img.imgUrl\" alt=\"\"\n style=\"width: 60px; height: 60px; object-fit: cover; border-radius: 8px; border: 1px solid #e2e8f0;\">\n <button class=\"review-img-remove\"\n (click)=\"item.reviewImages.splice(imgIdx, 1)\"\n title=\"Remove image\">\n <mat-icon\n style=\"font-size: 12px; width: 12px; height: 12px; line-height: 12px;\">close</mat-icon>\n </button>\n </div>\n\n <div class=\"d-flex align-items-center justify-content-center cursor-pointer review-upload-box\"\n (click)=\"reviewFileInput.click()\">\n <mat-icon\n style=\"font-size: 22px; width: 22px; height: 22px;\">add_photo_alternate</mat-icon>\n </div>\n <input type=\"file\" name=\"myfile\" multiple hidden\n accept=\"image/jpg,image/jpeg,image/gif,image/png,application/pdf,image/x-eps\"\n (change)=\"uploadImage($event, item)\" class=\"pc-btn\"\n #reviewFileInput />\n </div>\n </div>\n\n <button\n class=\"btn w-100 fw-bold d-flex justify-content-center align-items-center gap-2 review-submit-btn\"\n [style.background]=\"styles?.background?.color || '#20c997'\"\n (click)=\"submitReview(item)\">\n Submit Review\n <mat-icon\n style=\"font-size: 18px; width: 18px; height: 18px;\">send</mat-icon>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n </div>\n\n <!-- Summary Section -->\n <div class=\"row gx-5\">\n <!-- Left: Address & Payment -->\n <div class=\"col-md-6 mb-4 mb-md-0 d-flex flex-column gap-4\">\n <div>\n <h6 class=\"text-dark mb-2\" style=\"font-size: 13px; font-weight: 600;\">Shipping Address\n </h6>\n <div class=\"text-dark\" style=\"font-size: 13px;\">\n <span class=\"d-block mb-1\">{{ orderDetailData?.addressDetails?.receiverName\n }}</span>\n <span class=\"text-muted d-block\" style=\"line-height: 1.5; max-width: 280px;\">\n {{ orderAddress }}<br>\n {{ orderDetailData?.addressDetails?.receiverPhone }}\n </span>\n </div>\n </div>\n\n <div>\n <h6 class=\"text-dark mb-2\" style=\"font-size: 13px; font-weight: 600;\">Payment</h6>\n <div class=\"d-flex align-items-center gap-3\">\n <span class=\"text-primary fw-bolder fs-5\"\n *ngIf=\"getKey(orderDetailData?.paymentDetails)!=='COD'\"\n style=\"font-family: Arial, sans-serif; letter-spacing: -0.5px;\">VISA</span>\n <mat-icon *ngIf=\"getKey(orderDetailData?.paymentDetails)==='COD'\" class=\"text-muted\"\n style=\"font-size: 28px; width: 28px; height: 28px;\">payments</mat-icon>\n\n <div>\n <div class=\"text-dark\" style=\"font-size: 13px;\">\n {{orderDetailData?.paymentDetails ?\n (getKey(orderDetailData?.paymentDetails)==='COD' ? 'Cash on Delivery':\n getKey(orderDetailData?.paymentDetails) ) : 'N/A'}}</div>\n <div class=\"text-muted\" style=\"font-size: 12px; letter-spacing: 0.5px;\"\n *ngIf=\"getKey(orderDetailData?.paymentDetails)!=='COD'\">**** **** **** 1234\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Right: Bill Details -->\n <div class=\"col-md-6 pt-1\">\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <span class=\"text-muted\" style=\"font-size: 13px;\">Subtotal</span>\n <span class=\"text-dark fw-medium\" style=\"font-size: 13px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.totalNetValue |\n number:'1.0-2' }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2\"\n *ngIf=\"orderDetailData?.billDetails?.discountAmount\">\n <span class=\"text-muted\" style=\"font-size: 13px;\">Discount</span>\n <span class=\"text-success fw-medium\" style=\"font-size: 13px;\">\n -<span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount\n |\n number:'1.0-2' }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <span class=\"text-muted\" style=\"font-size: 13px;\">Shipping</span>\n <span class=\"text-dark fw-medium\"\n style=\"font-size: 13px;\">{{orderDetailData?.billDetails.deliveryCharges ?\n orderDetailData?.billDetails.deliveryCharges : 'FREE'}}</span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <span class=\"text-muted\" style=\"font-size: 13px;\">Estimated Tax</span>\n <span class=\"text-dark fw-medium\" style=\"font-size: 13px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount\n ?\n orderDetailData?.billDetails?.totalTaxAfterDiscount :\n orderDetailData?.billDetails?.totalTax\n | number:'1.0-2' }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2 text-success\"\n *ngIf=\"orderDetailData?.rewardUsed === 'REWARD_POINTS'\">\n <span style=\"font-size: 13px;\">Reward Amount</span>\n <span class=\" fw-medium\" style=\"font-size: 13px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.pointsConvertedINR }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2 text-success\"\n *ngIf=\"orderDetailData?.rewardUsed === 'VOUCHER'\">\n <span style=\"font-size: 13px;\">Reward Amount</span>\n <span class=\" fw-medium\" style=\"font-size: 13px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData.voucherValue }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2\"\n *ngIf=\"orderDetailData?.billDetails?.orraSchemeRedeemedAmount\">\n <span class=\"text-muted\" style=\"font-size: 13px;\">Redeem Amount</span>\n <span class=\"text-dark fw-medium\" style=\"font-size: 13px;\">\n -<span [innerHTML]=\"currency\"></span>{{\n orderDetailData?.billDetails?.orraSchemeRedeemedAmount | number:'1.0-2' }}\n </span>\n </div>\n\n <hr class=\"text-muted my-3\" style=\"opacity: 0.15;\">\n\n <div class=\"d-flex justify-content-between align-items-center\">\n <span class=\"text-dark\" style=\"font-size: 14px; font-weight: 600;\">Total</span>\n <span class=\"text-dark fw-bold\" style=\"font-size: 16px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center text-success\"\n *ngIf=\"orderDetailData?.rewardUsed === 'REWARD_POINTS'\">\n <span style=\"font-size: 14px; font-weight: 600;\">Amount Paid</span>\n <span class=\"fw-bold\" style=\"font-size: 16px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice ===\n orderDetailData?.pointsConvertedINR ? '0' :\n (orderDetailData?.billDetails?.finalPrice - orderDetailData?.pointsConvertedINR) }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center text-success\"\n *ngIf=\"orderDetailData?.rewardUsed === 'VOUCHER'\">\n <span style=\"font-size: 14px; font-weight: 600;\">Amount Paid</span>\n <span class=\"fw-bold\" style=\"font-size: 16px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice ===\n orderDetailData?.voucherValue ? '0' : (orderDetailData?.billDetails?.finalPrice -\n orderDetailData?.voucherValue) }}\n </span>\n </div>\n\n </div>\n </div>\n\n </div>\n\n <!-- Right Column -->\n <div class=\"col-lg-5 col-xl-4\">\n <!-- Timeline Card -->\n <div class=\"card border p-4 mb-4\"\n style=\"border-color: #eaeaea !important; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.02);\"\n *ngIf=\"orderDetailData?.orderTrackingLink || (orderTimiline && orderTimiline.length > 0)\">\n <div class=\"d-flex align-items-center justify-content-between mb-4 pb-3 border-bottom\">\n <h5 class=\"fw-bold mb-0 text-dark d-flex align-items-center gap-2\" style=\"font-size: 16px;\">\n <mat-icon style=\"color: #6c757d;\">timeline</mat-icon> Order Timeline\n </h5>\n\n <div *ngIf=\"orderDetailData?.orderTrackingLink\"\n class=\"d-inline-flex align-items-center gap-1 cursor-pointer fw-medium\"\n [style.color]=\"styles?.background?.color || '#0d6efd'\" style=\"font-size: 13px;\"\n (click)=\"trackOrder()\">\n <mat-icon\n style=\"font-size: 15px; width: 15px; height: 15px;\">location_searching</mat-icon>\n <span style=\"text-decoration: underline; text-underline-offset: 3px;\">Track Order</span>\n </div>\n </div>\n\n <div class=\"px-2 pt-2\" *ngIf=\"orderTimiline && orderTimiline.length > 0\">\n <p-timeline [value]=\"orderTimiline\" styleClass=\"custom-timeline\" align=\"left\">\n <ng-template pTemplate=\"marker\" let-event>\n <!-- Completed -->\n <span class=\"custom-marker completed-marker\"\n *ngIf=\"event.statusType === 'completed' || event.statusType === 'delivered'\"\n [style.backgroundColor]=\"styles?.background?.color || '#059669'\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"3\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n </span>\n\n <!-- Active -->\n <span class=\"custom-marker active-marker\" *ngIf=\"event.statusType === 'active'\"\n [style.borderColor]=\"styles?.background?.color || '#059669'\"></span>\n\n <!-- Future -->\n <span class=\"custom-marker future-marker\"\n *ngIf=\"event.statusType === 'future'\"></span>\n </ng-template>\n\n <ng-template pTemplate=\"content\" let-event let-last=\"last\">\n <div class=\"ms-4\" [ngClass]=\"{'pb-4': !last}\">\n <div class=\"fw-semibold text-dark\" style=\"font-size: 15px; margin-bottom: 2px;\">\n {{\n event.name?.replaceAll(\"_\", \" \") | titlecase }}</div>\n <div style=\"font-size: 14px;\"\n [ngClass]=\"{'text-muted': event.statusType !== 'future', 'text-light-grey': event.statusType === 'future'}\">\n {{ event.date ? (event.date | date:'MMM d, h:mm a') : 'Not yet' }}\n </div>\n </div>\n </ng-template>\n </p-timeline>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n</ng-container>\n\n<!-- Loading Skeleton -->\n<div class=\"container-fluid py-4\" *ngIf=\"isLoading\" style=\"background-color: #f8f9fa; min-height: 100vh;\">\n <div class=\"mx-auto\" style=\"max-width: 1000px;\">\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '60vh',\n 'border-radius': '12px',\n 'margin': '20px 0'\n }\"></ngx-skeleton-loader>\n </div>\n</div>", styles: [".right{height:250px;padding:15px;background-color:#f8f8f8;border-radius:8px;color:#000}*{font-family:var(--website-font-family)}hr{border-top-width:2px;margin:15px 0}.f-13{font-size:13px}.f-16{font-size:16px}.fw-800{font-weight:800}.br-6{border-radius:6px}textarea{resize:unset}.action-btn>button{font-size:14px!important;border:none;width:fit-content!important;margin-top:5px;border-radius:3px;padding:5px 10px;background-color:tomato;color:#fff}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}.onlyMobile{display:none}.track-order{background-color:#000;color:#fff;border:1px solid black;width:auto;border-radius:3px;padding:5px}@media only screen and (max-width: 475px){.onlyDesktop{display:none!important}.onlyMobile{display:block}.mat-icon{width:46px}.time-line{padding-bottom:6px}.right{width:98%!important;margin-bottom:4px!important;height:auto!important;padding:15px!important;margin-top:5%}.main-section{width:100%!important;flex-direction:column!important}.left{width:100%!important;padding:3%}.orderNum{margin-bottom:25px}}@media (min-width:768px) and (max-width:1024px){.left{padding:3%;width:70%}.right{width:28%!important;padding:2%;margin-top:10%;margin-right:3%}}.mt-25{margin-top:25px}.cp{cursor:pointer}.item-summary{box-shadow:0 0 4px #00000040;border-radius:12px}mat-icon{font-family:Material Icons!important}::ng-deep .p-rating-icon{color:#ffc107!important;font-size:1.25rem!important}::ng-deep .p-timeline-event-content{padding:0!important}::ng-deep .p-timeline-event-connector{background:#000!important;width:3px!important;position:absolute;bottom:-10px;height:55px;left:12px}.sbt-btn{border-radius:8px}::ng-deep .p-timeline-event-marker{display:none!important}@media screen and (min-width: 1200px){.scroll-45{overflow-y:scroll;height:45vh}.scroll-60{overflow-y:scroll;height:60vh}}.f-16{font-size:16px!important}.f-13{font-size:13px!important}@media (max-width: 575.98px){.display-6{font-size:1.5rem}.h3{font-size:1.25rem}}.gap-3{gap:1rem!important}.shadow-sm{box-shadow:0 .125rem .5rem #0000001a!important}.card-header{border-bottom:unset!important}.btn:hover{transform:translateY(-1px);transition:all .2s ease}.card:hover{transform:translateY(-2px);transition:all .3s ease}.bg-opacity-10{background-color:rgba(var(--bs-primary-rgb),.1)!important}.cursor-pointer{cursor:pointer}.transition-transform{transition:transform .3s ease}.rotate-180{transform:rotate(180deg)}.card-header:hover{opacity:.9;transition:opacity .2s ease}.card-body{transition:all .3s ease}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.add-review-img{color:#828484;width:65px;display:flex;align-items:center;justify-content:center;order:3px dotted black;background:#f0f2f2;border:1px solid #d5d9d9!important;cursor:pointer}.order-status{border-radius:8px;padding:5px 8px;font-size:16px}.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}.fs-15{font-size:15px}.review-textarea{border:1px solid #e2e8f0;border-radius:8px;font-size:14px;resize:none;background-color:#f8fafc;padding:12px 8px;transition:all .2s ease-in-out}.review-textarea:focus{border-color:#cbd5e1;background-color:#fff;box-shadow:0 0 0 3px #e2e8f080!important;outline:none}.review-upload-box{width:72px;height:72px;border:2px dashed #cbd5e1;border-radius:8px;background-color:#f8fafc;transition:all .2s ease-in-out;color:#64748b}.review-img-thumb{display:inline-block}.review-img-remove{position:absolute;top:-6px;right:-6px;width:18px!important;height:18px;border-radius:50%;background:#ef4444;color:#fff;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 4px #0000002e;transition:background .15s ease,transform .15s ease;z-index:1}.review-img-remove:hover{background:#dc2626;transform:scale(1.1)}.review-upload-box:hover{background-color:#f1f5f9;border-color:#94a3b8;color:#475569}.review-submit-btn{color:#fff!important;border-radius:8px;padding:12px 0;font-size:14px!important;border:none;letter-spacing:.3px;transition:transform .1s ease,box-shadow .2s ease}.review-submit-btn:hover{box-shadow:0 6px 15px #0000001a;transform:translateY(-1px)}.review-submit-btn:active{transform:translateY(1px)}::ng-deep .custom-timeline .custom-marker{display:flex!important;align-items:center!important;justify-content:center!important;width:28px!important;height:28px!important;border-radius:50%!important;z-index:10}::ng-deep .custom-timeline .active-marker{background-color:#fff!important;border-width:6px!important;border-style:solid!important}::ng-deep .custom-timeline .future-marker{background-color:#fff!important;border:5px solid #cbd5e1!important}::ng-deep .custom-timeline .p-timeline-event-marker{border:none!important;background:transparent!important;display:flex!important}::ng-deep .custom-timeline .p-timeline-event-connector{background-color:#cbd5e1!important;width:2px!important}::ng-deep .custom-timeline .p-timeline-event-opposite{display:none!important;flex:0!important;padding:0!important}::ng-deep .custom-timeline .p-timeline-event{min-height:50px}.text-light-grey{color:#94a3b8}.w-40{width:40%}@media (min-width: 576px){.w-sm-40{width:40%!important}}.item-card-pad{padding:16px 20px}.item-thumb{width:72px;height:72px;object-fit:cover;border-radius:8px}.item-name{font-size:14px;line-height:1.4}.item-price{font-size:14px}.item-variant,.item-qty{font-size:12px}.min-w-0{min-width:0}.review-form-box{background:#fff;border:1px solid #f0f0f0;border-radius:12px;padding:14px;box-shadow:0 4px 20px #00000008;overflow:hidden}@media (max-width: 575px){.container-fluid{padding-left:12px!important;padding-right:12px!important}.item-card-pad{padding:12px 14px}.item-thumb{width:60px;height:60px}.item-name,.item-price{font-size:13px}::ng-deep .p-rating-icon{font-size:1.35rem!important;padding:2px!important}.row.gx-5{--bs-gutter-x: 1rem !important}h2.fw-semibold{font-size:1.4rem!important}}.receipt-download-btn:hover,.receipt-download-btn:focus,.receipt-download-btn:active{color:#212529!important;border-color:#212529!important;box-shadow:none!important;transform:none!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: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: TimelineModule }, { kind: "component", type: i8$3.Timeline, selector: "p-timeline", inputs: ["value", "style", "styleClass", "align", "layout"] }, { kind: "directive", type: i6$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i3$3.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { 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: MatTooltipModule }] }); }
|
|
22421
22532
|
}
|
|
22422
22533
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OrderDetailsComponent, decorators: [{
|
|
22423
22534
|
type: Component,
|
|
@@ -22431,7 +22542,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
22431
22542
|
FormsModule,
|
|
22432
22543
|
BackgroundDirective,
|
|
22433
22544
|
MatTooltipModule
|
|
22434
|
-
], template: "<ng-container *ngIf=\"!isLoading\">\n <div class=\"container-fluid\" [attr.style]=\"customClass\" style=\"background-color: #f8f9fa; min-height: 100vh;\">\n <!-- Main Box -->\n <div class=\"border-0 mx-auto\">\n\n <!-- Back button & Thanks -->\n <div class=\"d-flex align-items-center mb-2\">\n <svg (click)=\"goBack()\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"lucide lucide-chevron-left cp text-muted\">\n <path d=\"m15 18-6-6 6-6\"></path>\n </svg>\n <span class=\"text-muted fw-medium py-1\">Thanks!</span>\n </div>\n\n <!-- Main Headline -->\n <h2 class=\"fw-semibold mb-2 text-dark\" style=\"font-size: 1.75rem;\">\n {{ orderDetailData?.brandOrderDetails?.[0]?.orderStatus?.replaceAll(\"_\", \" \") | titlecase }} \uD83D\uDE80\n </h2>\n <p class=\"text-muted mb-3 fs-15\">\n {{ orderDetailData?.brandOrderDetails?.[0]?.orderStatus === 'DELIVERED' ? 'Your order has been\n delivered. Enjoy!' : (orderDetailData?.brandOrderDetails?.[0]?.orderStatus === 'CANCELLED' ? 'Your order\n was cancelled.' : 'Your order is on the way. It will be shipped. We will inform you.') }}\n </p>\n\n <!-- Colored Line -->\n <div class=\"mb-3\" style=\"height: 3px; width: 100%;\"\n [style.background]=\"'linear-gradient(to right, ' + (styles?.background?.color || '#20c997') + ', transparent)'\">\n </div>\n\n <!-- Order Number & Actions -->\n <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-sm-center mb-3 gap-2\">\n <div class=\"fw-semibold text-dark d-flex align-items-center\">\n Order number:\n <span class=\"ms-1\" [style.color]=\"styles?.background?.color || '#20c997'\">\n {{ orderDetailData?.orderNum }}\n </span>\n </div>\n <button\n class=\"btn receipt-download-btn btn-sm d-inline-flex align-items-center gap-1 shadow-sm fw-medium px-3 py-1\"\n style=\"border-radius: 6px; font-size: 13px;width:max-content\" (click)=\"downloadReceipt()\">\n <mat-icon style=\"font-size: 18px; width: 18px; height: 18px;\">receipt_long</mat-icon>\n <span>Download Receipt</span>\n </button>\n </div>\n\n <!-- Content Grid Layout -->\n <div class=\"row mt-2\">\n <!-- Left Column -->\n <div class=\"col-lg-7 col-xl-8 mb-4\">\n <!-- Items List -->\n <div class=\"card border mb-4 overflow-hidden\"\n style=\"border-color: #eaeaea !important; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.02);\">\n <ng-container\n *ngFor=\"let item of orderDetailData?.brandOrderDetails[0]?.orderedItems; let last = last\">\n <div class=\"item-card-pad\" [ngClass]=\"{'border-bottom': !last}\">\n <div class=\"d-flex gap-3 w-100 align-items-start\">\n <!-- Image -->\n <img loading=\"lazy\"\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n [src]=\"item.imgUrl\" alt=\"{{ item.itemName }}\"\n class=\"rounded shadow-sm flex-shrink-0 item-thumb\">\n\n <!-- Details + Price -->\n <div class=\"flex-grow-1 min-w-0\">\n <div class=\"d-flex align-items-start justify-content-between gap-2\">\n <h6 class=\"fw-bold text-dark mb-1 item-name\">{{ item.itemName }}</h6>\n <!-- Price always visible alongside name -->\n <div class=\"fw-bold text-dark text-nowrap item-price flex-shrink-0\">\n <span [innerHTML]=\"currency\"></span>{{ (item.sellingPrice *\n item.quantity) | number:'1.0-2' }}\n </div>\n </div>\n <p class=\"text-muted small mb-1 item-variant\"\n *ngIf=\"item.variantName || item.customizationDetails\">{{\n item.variantName || 'Regular' }}</p>\n <div class=\"text-muted item-qty\">Qty: {{ item.quantity }}</div>\n\n <!-- Review Section -->\n <div class=\"mt-3 pt-3 border-top\"\n *ngIf=\"orderDetailData?.brandOrderDetails?.[0]?.orderStatus == 'DELIVERED'\">\n\n <div\n class=\"d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-between mb-2 gap-2\">\n <h6 class=\"fw-bold mb-0 text-dark\" style=\"font-size: 14px;\">Leave a\n Review</h6>\n <p-rating [(ngModel)]=\"item.rating\" [cancel]=\"false\" [readonly]=\"false\"\n (ngModelChange)=\"submitReview(item)\"></p-rating>\n </div>\n\n <div class=\"add-detail-review text-primary fw-medium cursor-pointer d-inline-flex align-items-center gap-1\"\n style=\"font-size: 13px;\" (click)=\"item.showReview = !item.showReview\">\n <mat-icon\n style=\"font-size: 15px; width: 15px; height: 15px;\">mode_edit</mat-icon>\n <span>Write a Detailed Review</span>\n </div>\n\n <div *ngIf=\"item.showReview\" class=\"mt-3 review-form-box\">\n <h6 class=\"fw-semibold text-dark mb-2\" style=\"font-size: 14px;\">Share\n your experience</h6>\n\n <div class=\"mb-3\">\n <textarea class=\"form-control shadow-none review-textarea w-100\"\n [(ngModel)]=\"item.review\" rows=\"3\"\n placeholder=\"What did you like or dislike? How was the fit and quality?\"></textarea>\n </div>\n\n <div class=\"mb-3\">\n <h6 class=\"fw-medium text-muted mb-2\" style=\"font-size: 13px;\">\n Attach Photos <span\n style=\"font-size: 11px; opacity: 0.7;\">(Optional)</span>\n </h6>\n <div class=\"d-flex gap-2 flex-wrap align-items-center\">\n <div class=\"position-relative review-img-thumb\"\n *ngFor=\"let img of item?.reviewImages ?? []; let imgIdx = index\">\n <img [src]=\"img.imgUrl\" alt=\"\"\n style=\"width: 60px; height: 60px; object-fit: cover; border-radius: 8px; border: 1px solid #e2e8f0;\">\n <button class=\"review-img-remove\"\n (click)=\"item.reviewImages.splice(imgIdx, 1)\"\n title=\"Remove image\">\n <mat-icon\n style=\"font-size: 12px; width: 12px; height: 12px; line-height: 12px;\">close</mat-icon>\n </button>\n </div>\n\n <div class=\"d-flex align-items-center justify-content-center cursor-pointer review-upload-box\"\n (click)=\"reviewFileInput.click()\">\n <mat-icon\n style=\"font-size: 22px; width: 22px; height: 22px;\">add_photo_alternate</mat-icon>\n </div>\n <input type=\"file\" name=\"myfile\" multiple hidden\n accept=\"image/jpg,image/jpeg,image/gif,image/png,application/pdf,image/x-eps\"\n (change)=\"uploadImage($event, item)\" class=\"pc-btn\"\n #reviewFileInput />\n </div>\n </div>\n\n <button\n class=\"btn w-100 fw-bold d-flex justify-content-center align-items-center gap-2 review-submit-btn\"\n [style.background]=\"styles?.background?.color || '#20c997'\"\n (click)=\"submitReview(item)\">\n Submit Review\n <mat-icon\n style=\"font-size: 18px; width: 18px; height: 18px;\">send</mat-icon>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n </div>\n\n <!-- Summary Section -->\n <div class=\"row gx-5\">\n <!-- Left: Address & Payment -->\n <div class=\"col-md-6 mb-4 mb-md-0 d-flex flex-column gap-4\">\n <div>\n <h6 class=\"text-dark mb-2\" style=\"font-size: 13px; font-weight: 600;\">Shipping Address\n </h6>\n <div class=\"text-dark\" style=\"font-size: 13px;\">\n <span class=\"d-block mb-1\">{{ orderDetailData?.addressDetails?.receiverName\n }}</span>\n <span class=\"text-muted d-block\" style=\"line-height: 1.5; max-width: 280px;\">\n {{ orderAddress }}<br>\n {{ orderDetailData?.addressDetails?.receiverPhone }}\n </span>\n </div>\n </div>\n\n <div>\n <h6 class=\"text-dark mb-2\" style=\"font-size: 13px; font-weight: 600;\">Payment</h6>\n <div class=\"d-flex align-items-center gap-3\">\n <span class=\"text-primary fw-bolder fs-5\"\n *ngIf=\"getKey(orderDetailData?.paymentDetails)!=='COD'\"\n style=\"font-family: Arial, sans-serif; letter-spacing: -0.5px;\">VISA</span>\n <mat-icon *ngIf=\"getKey(orderDetailData?.paymentDetails)==='COD'\" class=\"text-muted\"\n style=\"font-size: 28px; width: 28px; height: 28px;\">payments</mat-icon>\n\n <div>\n <div class=\"text-dark\" style=\"font-size: 13px;\">\n {{orderDetailData?.paymentDetails ?\n (getKey(orderDetailData?.paymentDetails)==='COD' ? 'Cash on Delivery':\n getKey(orderDetailData?.paymentDetails) ) : 'N/A'}}</div>\n <div class=\"text-muted\" style=\"font-size: 12px; letter-spacing: 0.5px;\"\n *ngIf=\"getKey(orderDetailData?.paymentDetails)!=='COD'\">**** **** **** 1234\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Right: Bill Details -->\n <div class=\"col-md-6 pt-1\">\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <span class=\"text-muted\" style=\"font-size: 13px;\">Subtotal</span>\n <span class=\"text-dark fw-medium\" style=\"font-size: 13px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.totalNetValue |\n number:'1.0-2' }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2\"\n *ngIf=\"orderDetailData?.billDetails?.discountAmount\">\n <span class=\"text-muted\" style=\"font-size: 13px;\">Discount</span>\n <span class=\"text-success fw-medium\" style=\"font-size: 13px;\">\n -<span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount\n |\n number:'1.0-2' }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <span class=\"text-muted\" style=\"font-size: 13px;\">Shipping</span>\n <span class=\"text-dark fw-medium\"\n style=\"font-size: 13px;\">{{orderDetailData?.billDetails.deliveryCharges ?\n orderDetailData?.billDetails.deliveryCharges : 'FREE'}}</span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <span class=\"text-muted\" style=\"font-size: 13px;\">Estimated Tax</span>\n <span class=\"text-dark fw-medium\" style=\"font-size: 13px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount\n ?\n orderDetailData?.billDetails?.totalTaxAfterDiscount :\n orderDetailData?.billDetails?.totalTax\n | number:'1.0-2' }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2 text-success\"\n *ngIf=\"orderDetailData?.rewardUsed === 'REWARD_POINTS'\">\n <span style=\"font-size: 13px;\">Reward Amount</span>\n <span class=\" fw-medium\" style=\"font-size: 13px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.pointsConvertedINR }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2 text-success\"\n *ngIf=\"orderDetailData?.rewardUsed === 'VOUCHER'\">\n <span style=\"font-size: 13px;\">Reward Amount</span>\n <span class=\" fw-medium\" style=\"font-size: 13px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData.voucherValue }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2\"\n *ngIf=\"orderDetailData?.billDetails?.orraSchemeRedeemedAmount\">\n <span class=\"text-muted\" style=\"font-size: 13px;\">Redeem Amount</span>\n <span class=\"text-dark fw-medium\" style=\"font-size: 13px;\">\n -<span [innerHTML]=\"currency\"></span>{{\n orderDetailData?.billDetails?.orraSchemeRedeemedAmount | number:'1.0-2' }}\n </span>\n </div>\n\n <hr class=\"text-muted my-3\" style=\"opacity: 0.15;\">\n\n <div class=\"d-flex justify-content-between align-items-center\">\n <span class=\"text-dark\" style=\"font-size: 14px; font-weight: 600;\">Total</span>\n <span class=\"text-dark fw-bold\" style=\"font-size: 16px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center text-success\"\n *ngIf=\"orderDetailData?.rewardUsed === 'REWARD_POINTS'\">\n <span style=\"font-size: 14px; font-weight: 600;\">Amount Paid</span>\n <span class=\"fw-bold\" style=\"font-size: 16px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice ===\n orderDetailData?.pointsConvertedINR ? '0' :\n (orderDetailData?.billDetails?.finalPrice - orderDetailData?.pointsConvertedINR) }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center text-success\"\n *ngIf=\"orderDetailData?.rewardUsed === 'VOUCHER'\">\n <span style=\"font-size: 14px; font-weight: 600;\">Amount Paid</span>\n <span class=\"fw-bold\" style=\"font-size: 16px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice ===\n orderDetailData?.voucherValue ? '0' : (orderDetailData?.billDetails?.finalPrice -\n orderDetailData?.voucherValue) }}\n </span>\n </div>\n\n </div>\n </div>\n\n </div>\n\n <!-- Right Column -->\n <div class=\"col-lg-5 col-xl-4\">\n <!-- Timeline Card -->\n <div class=\"card border p-4 mb-4\"\n style=\"border-color: #eaeaea !important; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.02);\"\n *ngIf=\"orderDetailData?.orderTrackingLink || (orderTimiline && orderTimiline.length > 0)\">\n <div class=\"d-flex align-items-center justify-content-between mb-4 pb-3 border-bottom\">\n <h5 class=\"fw-bold mb-0 text-dark d-flex align-items-center gap-2\" style=\"font-size: 16px;\">\n <mat-icon style=\"color: #6c757d;\">timeline</mat-icon> Order Timeline\n </h5>\n\n <div *ngIf=\"orderDetailData?.orderTrackingLink\"\n class=\"d-inline-flex align-items-center gap-1 cursor-pointer fw-medium\"\n [style.color]=\"styles?.background?.color || '#0d6efd'\" style=\"font-size: 13px;\"\n (click)=\"trackOrder()\">\n <mat-icon\n style=\"font-size: 15px; width: 15px; height: 15px;\">location_searching</mat-icon>\n <span style=\"text-decoration: underline; text-underline-offset: 3px;\">Track Order</span>\n </div>\n </div>\n\n <div class=\"px-2 pt-2\" *ngIf=\"orderTimiline && orderTimiline.length > 0\">\n <p-timeline [value]=\"orderTimiline\" styleClass=\"custom-timeline\" align=\"left\">\n <ng-template pTemplate=\"marker\" let-event>\n <!-- Completed -->\n <span class=\"custom-marker completed-marker\"\n *ngIf=\"event.statusType === 'completed' || event.statusType === 'delivered'\"\n [style.backgroundColor]=\"styles?.background?.color || '#059669'\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"3\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n </span>\n\n <!-- Active -->\n <span class=\"custom-marker active-marker\" *ngIf=\"event.statusType === 'active'\"\n [style.borderColor]=\"styles?.background?.color || '#059669'\"></span>\n\n <!-- Future -->\n <span class=\"custom-marker future-marker\"\n *ngIf=\"event.statusType === 'future'\"></span>\n </ng-template>\n\n <ng-template pTemplate=\"content\" let-event let-last=\"last\">\n <div class=\"ms-4\" [ngClass]=\"{'pb-4': !last}\">\n <div class=\"fw-semibold text-dark\" style=\"font-size: 15px; margin-bottom: 2px;\">\n {{\n event.name?.replaceAll(\"_\", \" \") | titlecase }}</div>\n <div style=\"font-size: 14px;\"\n [ngClass]=\"{'text-muted': event.statusType !== 'future', 'text-light-grey': event.statusType === 'future'}\">\n {{ event.date ? (event.date | date:'MMM d, h:mm a') : 'Not yet' }}\n </div>\n </div>\n </ng-template>\n </p-timeline>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n</ng-container>\n\n<!-- Loading Skeleton -->\n<div class=\"container-fluid py-4\" *ngIf=\"isLoading\" style=\"background-color: #f8f9fa; min-height: 100vh;\">\n <div class=\"mx-auto\" style=\"max-width: 1000px;\">\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '60vh',\n 'border-radius': '12px',\n 'margin': '20px 0'\n }\"></ngx-skeleton-loader>\n </div>\n</div>", styles: [".right{height:250px;padding:15px;background-color:#f8f8f8;border-radius:8px;color:#000}*{font-family:var(--website-font-family)}hr{border-top-width:2px;margin:15px 0}.f-13{font-size:13px}.f-16{font-size:16px}.fw-800{font-weight:800}.br-6{border-radius:6px}textarea{resize:unset}.action-btn>button{font-size:14px!important;border:none;width:fit-content!important;margin-top:5px;border-radius:3px;padding:5px 10px;background-color:tomato;color:#fff}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}.onlyMobile{display:none}.track-order{background-color:#000;color:#fff;border:1px solid black;width:auto;border-radius:3px;padding:5px}@media only screen and (max-width: 475px){.onlyDesktop{display:none!important}.onlyMobile{display:block}.mat-icon{width:46px}.time-line{padding-bottom:6px}.right{width:98%!important;margin-bottom:4px!important;height:auto!important;padding:15px!important;margin-top:5%}.main-section{width:100%!important;flex-direction:column!important}.left{width:100%!important;padding:3%}.orderNum{margin-bottom:25px}}@media (min-width:768px) and (max-width:1024px){.left{padding:3%;width:70%}.right{width:28%!important;padding:2%;margin-top:10%;margin-right:3%}}.mt-25{margin-top:25px}.cp{cursor:pointer}.item-summary{box-shadow:0 0 4px #00000040;border-radius:12px}mat-icon{font-family:Material Icons!important}::ng-deep .p-rating-icon{color:#ffc107!important;font-size:1.25rem!important}::ng-deep .p-timeline-event-content{padding:0!important}::ng-deep .p-timeline-event-connector{background:#000!important;width:3px!important;position:absolute;bottom:-10px;height:55px;left:12px}.sbt-btn{border-radius:8px}::ng-deep .p-timeline-event-marker{display:none!important}@media screen and (min-width: 1200px){.scroll-45{overflow-y:scroll;height:45vh}.scroll-60{overflow-y:scroll;height:60vh}}.f-16{font-size:16px!important}.f-13{font-size:13px!important}@media (max-width: 575.98px){.display-6{font-size:1.5rem}.h3{font-size:1.25rem}}.gap-3{gap:1rem!important}.shadow-sm{box-shadow:0 .125rem .5rem #0000001a!important}.card-header{border-bottom:unset!important}.btn:hover{transform:translateY(-1px);transition:all .2s ease}.card:hover{transform:translateY(-2px);transition:all .3s ease}.bg-opacity-10{background-color:rgba(var(--bs-primary-rgb),.1)!important}.cursor-pointer{cursor:pointer}.transition-transform{transition:transform .3s ease}.rotate-180{transform:rotate(180deg)}.card-header:hover{opacity:.9;transition:opacity .2s ease}.card-body{transition:all .3s ease}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.add-review-img{color:#828484;width:65px;display:flex;align-items:center;justify-content:center;order:3px dotted black;background:#f0f2f2;border:1px solid #d5d9d9!important;cursor:pointer}.order-status{border-radius:8px;padding:5px 8px;font-size:16px}.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}.fs-15{font-size:15px}.review-textarea{border:1px solid #e2e8f0;border-radius:8px;font-size:14px;resize:none;background-color:#f8fafc;padding:12px 8px;transition:all .2s ease-in-out}.review-textarea:focus{border-color:#cbd5e1;background-color:#fff;box-shadow:0 0 0 3px #e2e8f080!important;outline:none}.review-upload-box{width:72px;height:72px;border:2px dashed #cbd5e1;border-radius:8px;background-color:#f8fafc;transition:all .2s ease-in-out;color:#64748b}.review-img-thumb{display:inline-block}.review-img-remove{position:absolute;top:-6px;right:-6px;width:18px!important;height:18px;border-radius:50%;background:#ef4444;color:#fff;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 4px #0000002e;transition:background .15s ease,transform .15s ease;z-index:1}.review-img-remove:hover{background:#dc2626;transform:scale(1.1)}.review-upload-box:hover{background-color:#f1f5f9;border-color:#94a3b8;color:#475569}.review-submit-btn{color:#fff!important;border-radius:8px;padding:12px 0;font-size:14px!important;border:none;letter-spacing:.3px;transition:transform .1s ease,box-shadow .2s ease}.review-submit-btn:hover{box-shadow:0 6px 15px #0000001a;transform:translateY(-1px)}.review-submit-btn:active{transform:translateY(1px)}::ng-deep .custom-timeline .custom-marker{display:flex!important;align-items:center!important;justify-content:center!important;width:28px!important;height:28px!important;border-radius:50%!important;z-index:10}::ng-deep .custom-timeline .active-marker{background-color:#fff!important;border-width:6px!important;border-style:solid!important}::ng-deep .custom-timeline .future-marker{background-color:#fff!important;border:5px solid #cbd5e1!important}::ng-deep .custom-timeline .p-timeline-event-marker{border:none!important;background:transparent!important;display:flex!important}::ng-deep .custom-timeline .p-timeline-event-connector{background-color:#cbd5e1!important;width:2px!important}::ng-deep .custom-timeline .p-timeline-event-opposite{display:none!important;flex:0!important;padding:0!important}::ng-deep .custom-timeline .p-timeline-event{min-height:50px}.text-light-grey{color:#94a3b8}.w-40{width:40%}@media (min-width: 576px){.w-sm-40{width:40%!important}}.item-card-pad{padding:16px 20px}.item-thumb{width:72px;height:72px;object-fit:cover;border-radius:8px}.item-name{font-size:14px;line-height:1.4}.item-price{font-size:14px}.item-variant,.item-qty{font-size:12px}.min-w-0{min-width:0}.review-form-box{background:#fff;border:1px solid #f0f0f0;border-radius:12px;padding:14px;box-shadow:0 4px 20px #00000008;overflow:hidden}@media (max-width: 575px){.container-fluid{padding-left:12px!important;padding-right:12px!important}.item-card-pad{padding:12px 14px}.item-thumb{width:60px;height:60px}.item-name,.item-price{font-size:13px}::ng-deep .p-rating-icon{font-size:1.35rem!important;padding:2px!important}.row.gx-5{--bs-gutter-x: 1rem !important}h2.fw-semibold{font-size:1.4rem!important}}.receipt-download-btn:hover,.receipt-download-btn:focus,.receipt-download-btn:active{color:#212529!important;border-color:#212529!important;box-shadow:none!important;transform:none!important}\n"] }]
|
|
22545
|
+
], template: "<ng-container *ngIf=\"!isLoading\">\n <div class=\"container-fluid\" [attr.style]=\"customClass\" style=\"background-color: #f8f9fa; min-height: 100vh;\">\n <!-- Main Box -->\n <div class=\"border-0 mx-auto\">\n\n <!-- Back button & Thanks -->\n <div class=\"d-flex align-items-center mb-2\">\n <svg (click)=\"goBack()\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"lucide lucide-chevron-left cp text-muted\">\n <path d=\"m15 18-6-6 6-6\"></path>\n </svg>\n <span class=\"text-muted fw-medium py-1\">Thanks!</span>\n </div>\n\n <!-- Main Headline -->\n <h2 class=\"fw-semibold mb-2 text-dark\" style=\"font-size: 1.75rem;\">\n {{ orderDetailData?.brandOrderDetails?.[0]?.orderStatus?.replaceAll(\"_\", \" \") | titlecase }} \uD83D\uDE80\n </h2>\n <p class=\"text-muted mb-3 fs-15\">\n {{ orderDetailData?.brandOrderDetails?.[0]?.orderStatus === 'DELIVERED' ? 'Your order has been\n delivered. Enjoy!' : (orderDetailData?.brandOrderDetails?.[0]?.orderStatus === 'CANCELLED' ? 'Your order\n was cancelled.' : 'Your order is on the way. It will be shipped. We will inform you.') }}\n </p>\n\n <!-- Colored Line -->\n <div class=\"mb-3\" style=\"height: 3px; width: 100%;\"\n [style.background]=\"'linear-gradient(to right, ' + (styles?.background?.color || '#20c997') + ', transparent)'\">\n </div>\n\n <!-- NDR status banner (read-only - no customer retry/return actions yet) -->\n <div *ngIf=\"isNdr\" class=\"mb-3\"\n style=\"background:#fff7ed;border:1px solid #fed7aa;border-radius:10px;padding:16px 18px;\">\n <div style=\"color:#c2410c;font-weight:700;font-size:14px;margin-bottom:4px;\">Delivery attempt unsuccessful</div>\n <div *ngIf=\"ndrReasonText\" style=\"color:#9a5b2e;font-size:13px;\">{{ ndrReasonText }}</div>\n <div *ngIf=\"ndrActionTaken\" style=\"margin-top:8px;\">\n <span style=\"background:#e0e7ff;color:#4338ca;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;\">{{ ndrActionTaken }}</span>\n </div>\n </div>\n\n <!-- Order Number & Actions -->\n <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-sm-center mb-3 gap-2\">\n <div class=\"fw-semibold text-dark d-flex align-items-center\">\n Order number:\n <span class=\"ms-1\" [style.color]=\"styles?.background?.color || '#20c997'\">\n {{ orderDetailData?.orderNum }}\n </span>\n </div>\n <button\n class=\"btn receipt-download-btn btn-sm d-inline-flex align-items-center gap-1 shadow-sm fw-medium px-3 py-1\"\n style=\"border-radius: 6px; font-size: 13px;width:max-content\" (click)=\"downloadReceipt()\">\n <mat-icon style=\"font-size: 18px; width: 18px; height: 18px;\">receipt_long</mat-icon>\n <span>Download Receipt</span>\n </button>\n </div>\n\n <!-- Content Grid Layout -->\n <div class=\"row mt-2\">\n <!-- Left Column -->\n <div class=\"col-lg-7 col-xl-8 mb-4\">\n <!-- Items List -->\n <div class=\"card border mb-4 overflow-hidden\"\n style=\"border-color: #eaeaea !important; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.02);\">\n <ng-container\n *ngFor=\"let item of orderDetailData?.brandOrderDetails[0]?.orderedItems; let last = last\">\n <div class=\"item-card-pad\" [ngClass]=\"{'border-bottom': !last}\">\n <div class=\"d-flex gap-3 w-100 align-items-start\">\n <!-- Image -->\n <img loading=\"lazy\"\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n [src]=\"item.imgUrl\" alt=\"{{ item.itemName }}\"\n class=\"rounded shadow-sm flex-shrink-0 item-thumb\">\n\n <!-- Details + Price -->\n <div class=\"flex-grow-1 min-w-0\">\n <div class=\"d-flex align-items-start justify-content-between gap-2\">\n <h6 class=\"fw-bold text-dark mb-1 item-name\">{{ item.itemName }}</h6>\n <!-- Price always visible alongside name -->\n <div class=\"fw-bold text-dark text-nowrap item-price flex-shrink-0\">\n <span [innerHTML]=\"currency\"></span>{{ (item.sellingPrice *\n item.quantity) | number:'1.0-2' }}\n </div>\n </div>\n <p class=\"text-muted small mb-1 item-variant\"\n *ngIf=\"item.variantName || item.customizationDetails\">{{\n item.variantName || 'Regular' }}</p>\n <div class=\"text-muted item-qty\">Qty: {{ item.quantity }}</div>\n\n <!-- Review Section -->\n <div class=\"mt-3 pt-3 border-top\"\n *ngIf=\"orderDetailData?.brandOrderDetails?.[0]?.orderStatus == 'DELIVERED'\">\n\n <div\n class=\"d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-between mb-2 gap-2\">\n <h6 class=\"fw-bold mb-0 text-dark\" style=\"font-size: 14px;\">Leave a\n Review</h6>\n <p-rating [(ngModel)]=\"item.rating\" [cancel]=\"false\" [readonly]=\"false\"\n (ngModelChange)=\"submitReview(item)\"></p-rating>\n </div>\n\n <div class=\"add-detail-review text-primary fw-medium cursor-pointer d-inline-flex align-items-center gap-1\"\n style=\"font-size: 13px;\" (click)=\"item.showReview = !item.showReview\">\n <mat-icon\n style=\"font-size: 15px; width: 15px; height: 15px;\">mode_edit</mat-icon>\n <span>Write a Detailed Review</span>\n </div>\n\n <div *ngIf=\"item.showReview\" class=\"mt-3 review-form-box\">\n <h6 class=\"fw-semibold text-dark mb-2\" style=\"font-size: 14px;\">Share\n your experience</h6>\n\n <div class=\"mb-3\">\n <textarea class=\"form-control shadow-none review-textarea w-100\"\n [(ngModel)]=\"item.review\" rows=\"3\"\n placeholder=\"What did you like or dislike? How was the fit and quality?\"></textarea>\n </div>\n\n <div class=\"mb-3\">\n <h6 class=\"fw-medium text-muted mb-2\" style=\"font-size: 13px;\">\n Attach Photos <span\n style=\"font-size: 11px; opacity: 0.7;\">(Optional)</span>\n </h6>\n <div class=\"d-flex gap-2 flex-wrap align-items-center\">\n <div class=\"position-relative review-img-thumb\"\n *ngFor=\"let img of item?.reviewImages ?? []; let imgIdx = index\">\n <img [src]=\"img.imgUrl\" alt=\"\"\n style=\"width: 60px; height: 60px; object-fit: cover; border-radius: 8px; border: 1px solid #e2e8f0;\">\n <button class=\"review-img-remove\"\n (click)=\"item.reviewImages.splice(imgIdx, 1)\"\n title=\"Remove image\">\n <mat-icon\n style=\"font-size: 12px; width: 12px; height: 12px; line-height: 12px;\">close</mat-icon>\n </button>\n </div>\n\n <div class=\"d-flex align-items-center justify-content-center cursor-pointer review-upload-box\"\n (click)=\"reviewFileInput.click()\">\n <mat-icon\n style=\"font-size: 22px; width: 22px; height: 22px;\">add_photo_alternate</mat-icon>\n </div>\n <input type=\"file\" name=\"myfile\" multiple hidden\n accept=\"image/jpg,image/jpeg,image/gif,image/png,application/pdf,image/x-eps\"\n (change)=\"uploadImage($event, item)\" class=\"pc-btn\"\n #reviewFileInput />\n </div>\n </div>\n\n <button\n class=\"btn w-100 fw-bold d-flex justify-content-center align-items-center gap-2 review-submit-btn\"\n [style.background]=\"styles?.background?.color || '#20c997'\"\n (click)=\"submitReview(item)\">\n Submit Review\n <mat-icon\n style=\"font-size: 18px; width: 18px; height: 18px;\">send</mat-icon>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n </div>\n\n <!-- Summary Section -->\n <div class=\"row gx-5\">\n <!-- Left: Address & Payment -->\n <div class=\"col-md-6 mb-4 mb-md-0 d-flex flex-column gap-4\">\n <div>\n <h6 class=\"text-dark mb-2\" style=\"font-size: 13px; font-weight: 600;\">Shipping Address\n </h6>\n <div class=\"text-dark\" style=\"font-size: 13px;\">\n <span class=\"d-block mb-1\">{{ orderDetailData?.addressDetails?.receiverName\n }}</span>\n <span class=\"text-muted d-block\" style=\"line-height: 1.5; max-width: 280px;\">\n {{ orderAddress }}<br>\n {{ orderDetailData?.addressDetails?.receiverPhone }}\n </span>\n </div>\n </div>\n\n <div>\n <h6 class=\"text-dark mb-2\" style=\"font-size: 13px; font-weight: 600;\">Payment</h6>\n <div class=\"d-flex align-items-center gap-3\">\n <span class=\"text-primary fw-bolder fs-5\"\n *ngIf=\"getKey(orderDetailData?.paymentDetails)!=='COD'\"\n style=\"font-family: Arial, sans-serif; letter-spacing: -0.5px;\">VISA</span>\n <mat-icon *ngIf=\"getKey(orderDetailData?.paymentDetails)==='COD'\" class=\"text-muted\"\n style=\"font-size: 28px; width: 28px; height: 28px;\">payments</mat-icon>\n\n <div>\n <div class=\"text-dark\" style=\"font-size: 13px;\">\n {{orderDetailData?.paymentDetails ?\n (getKey(orderDetailData?.paymentDetails)==='COD' ? 'Cash on Delivery':\n getKey(orderDetailData?.paymentDetails) ) : 'N/A'}}</div>\n <div class=\"text-muted\" style=\"font-size: 12px; letter-spacing: 0.5px;\"\n *ngIf=\"getKey(orderDetailData?.paymentDetails)!=='COD'\">**** **** **** 1234\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Right: Bill Details -->\n <div class=\"col-md-6 pt-1\">\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <span class=\"text-muted\" style=\"font-size: 13px;\">Subtotal</span>\n <span class=\"text-dark fw-medium\" style=\"font-size: 13px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.totalNetValue |\n number:'1.0-2' }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2\"\n *ngIf=\"orderDetailData?.billDetails?.discountAmount\">\n <span class=\"text-muted\" style=\"font-size: 13px;\">Discount</span>\n <span class=\"text-success fw-medium\" style=\"font-size: 13px;\">\n -<span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount\n |\n number:'1.0-2' }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <span class=\"text-muted\" style=\"font-size: 13px;\">Shipping</span>\n <span class=\"text-dark fw-medium\"\n style=\"font-size: 13px;\">{{orderDetailData?.billDetails.deliveryCharges ?\n orderDetailData?.billDetails.deliveryCharges : 'FREE'}}</span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <span class=\"text-muted\" style=\"font-size: 13px;\">Estimated Tax</span>\n <span class=\"text-dark fw-medium\" style=\"font-size: 13px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount\n ?\n orderDetailData?.billDetails?.totalTaxAfterDiscount :\n orderDetailData?.billDetails?.totalTax\n | number:'1.0-2' }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2 text-success\"\n *ngIf=\"orderDetailData?.rewardUsed === 'REWARD_POINTS'\">\n <span style=\"font-size: 13px;\">Reward Amount</span>\n <span class=\" fw-medium\" style=\"font-size: 13px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.pointsConvertedINR }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2 text-success\"\n *ngIf=\"orderDetailData?.rewardUsed === 'VOUCHER'\">\n <span style=\"font-size: 13px;\">Reward Amount</span>\n <span class=\" fw-medium\" style=\"font-size: 13px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData.voucherValue }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2\"\n *ngIf=\"orderDetailData?.billDetails?.orraSchemeRedeemedAmount\">\n <span class=\"text-muted\" style=\"font-size: 13px;\">Redeem Amount</span>\n <span class=\"text-dark fw-medium\" style=\"font-size: 13px;\">\n -<span [innerHTML]=\"currency\"></span>{{\n orderDetailData?.billDetails?.orraSchemeRedeemedAmount | number:'1.0-2' }}\n </span>\n </div>\n\n <hr class=\"text-muted my-3\" style=\"opacity: 0.15;\">\n\n <div class=\"d-flex justify-content-between align-items-center\">\n <span class=\"text-dark\" style=\"font-size: 14px; font-weight: 600;\">Total</span>\n <span class=\"text-dark fw-bold\" style=\"font-size: 16px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center text-success\"\n *ngIf=\"orderDetailData?.rewardUsed === 'REWARD_POINTS'\">\n <span style=\"font-size: 14px; font-weight: 600;\">Amount Paid</span>\n <span class=\"fw-bold\" style=\"font-size: 16px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice ===\n orderDetailData?.pointsConvertedINR ? '0' :\n (orderDetailData?.billDetails?.finalPrice - orderDetailData?.pointsConvertedINR) }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center text-success\"\n *ngIf=\"orderDetailData?.rewardUsed === 'VOUCHER'\">\n <span style=\"font-size: 14px; font-weight: 600;\">Amount Paid</span>\n <span class=\"fw-bold\" style=\"font-size: 16px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice ===\n orderDetailData?.voucherValue ? '0' : (orderDetailData?.billDetails?.finalPrice -\n orderDetailData?.voucherValue) }}\n </span>\n </div>\n\n </div>\n </div>\n\n </div>\n\n <!-- Right Column -->\n <div class=\"col-lg-5 col-xl-4\">\n <!-- Timeline Card -->\n <div class=\"card border p-4 mb-4\"\n style=\"border-color: #eaeaea !important; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.02);\"\n *ngIf=\"orderDetailData?.orderTrackingLink || (orderTimiline && orderTimiline.length > 0)\">\n <div class=\"d-flex align-items-center justify-content-between mb-4 pb-3 border-bottom\">\n <h5 class=\"fw-bold mb-0 text-dark d-flex align-items-center gap-2\" style=\"font-size: 16px;\">\n <mat-icon style=\"color: #6c757d;\">timeline</mat-icon> Order Timeline\n </h5>\n\n <div *ngIf=\"orderDetailData?.orderTrackingLink\"\n class=\"d-inline-flex align-items-center gap-1 cursor-pointer fw-medium\"\n [style.color]=\"styles?.background?.color || '#0d6efd'\" style=\"font-size: 13px;\"\n (click)=\"trackOrder()\">\n <mat-icon\n style=\"font-size: 15px; width: 15px; height: 15px;\">location_searching</mat-icon>\n <span style=\"text-decoration: underline; text-underline-offset: 3px;\">Track Order</span>\n </div>\n </div>\n\n <div class=\"px-2 pt-2\" *ngIf=\"orderTimiline && orderTimiline.length > 0\">\n <p-timeline [value]=\"orderTimiline\" styleClass=\"custom-timeline\" align=\"left\">\n <ng-template pTemplate=\"marker\" let-event>\n <!-- Completed -->\n <span class=\"custom-marker completed-marker\"\n *ngIf=\"event.statusType === 'completed' || event.statusType === 'delivered'\"\n [style.backgroundColor]=\"styles?.background?.color || '#059669'\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"3\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n </span>\n\n <!-- Active -->\n <span class=\"custom-marker active-marker\" *ngIf=\"event.statusType === 'active'\"\n [style.borderColor]=\"styles?.background?.color || '#059669'\"></span>\n\n <!-- Future -->\n <span class=\"custom-marker future-marker\"\n *ngIf=\"event.statusType === 'future'\"></span>\n </ng-template>\n\n <ng-template pTemplate=\"content\" let-event let-last=\"last\">\n <div class=\"ms-4\" [ngClass]=\"{'pb-4': !last}\">\n <div class=\"fw-semibold text-dark\" style=\"font-size: 15px; margin-bottom: 2px;\">\n {{\n event.name?.replaceAll(\"_\", \" \") | titlecase }}</div>\n <div style=\"font-size: 14px;\"\n [ngClass]=\"{'text-muted': event.statusType !== 'future', 'text-light-grey': event.statusType === 'future'}\">\n {{ event.date ? (event.date | date:'MMM d, h:mm a') : 'Not yet' }}\n </div>\n </div>\n </ng-template>\n </p-timeline>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n</ng-container>\n\n<!-- Loading Skeleton -->\n<div class=\"container-fluid py-4\" *ngIf=\"isLoading\" style=\"background-color: #f8f9fa; min-height: 100vh;\">\n <div class=\"mx-auto\" style=\"max-width: 1000px;\">\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '60vh',\n 'border-radius': '12px',\n 'margin': '20px 0'\n }\"></ngx-skeleton-loader>\n </div>\n</div>", styles: [".right{height:250px;padding:15px;background-color:#f8f8f8;border-radius:8px;color:#000}*{font-family:var(--website-font-family)}hr{border-top-width:2px;margin:15px 0}.f-13{font-size:13px}.f-16{font-size:16px}.fw-800{font-weight:800}.br-6{border-radius:6px}textarea{resize:unset}.action-btn>button{font-size:14px!important;border:none;width:fit-content!important;margin-top:5px;border-radius:3px;padding:5px 10px;background-color:tomato;color:#fff}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}.onlyMobile{display:none}.track-order{background-color:#000;color:#fff;border:1px solid black;width:auto;border-radius:3px;padding:5px}@media only screen and (max-width: 475px){.onlyDesktop{display:none!important}.onlyMobile{display:block}.mat-icon{width:46px}.time-line{padding-bottom:6px}.right{width:98%!important;margin-bottom:4px!important;height:auto!important;padding:15px!important;margin-top:5%}.main-section{width:100%!important;flex-direction:column!important}.left{width:100%!important;padding:3%}.orderNum{margin-bottom:25px}}@media (min-width:768px) and (max-width:1024px){.left{padding:3%;width:70%}.right{width:28%!important;padding:2%;margin-top:10%;margin-right:3%}}.mt-25{margin-top:25px}.cp{cursor:pointer}.item-summary{box-shadow:0 0 4px #00000040;border-radius:12px}mat-icon{font-family:Material Icons!important}::ng-deep .p-rating-icon{color:#ffc107!important;font-size:1.25rem!important}::ng-deep .p-timeline-event-content{padding:0!important}::ng-deep .p-timeline-event-connector{background:#000!important;width:3px!important;position:absolute;bottom:-10px;height:55px;left:12px}.sbt-btn{border-radius:8px}::ng-deep .p-timeline-event-marker{display:none!important}@media screen and (min-width: 1200px){.scroll-45{overflow-y:scroll;height:45vh}.scroll-60{overflow-y:scroll;height:60vh}}.f-16{font-size:16px!important}.f-13{font-size:13px!important}@media (max-width: 575.98px){.display-6{font-size:1.5rem}.h3{font-size:1.25rem}}.gap-3{gap:1rem!important}.shadow-sm{box-shadow:0 .125rem .5rem #0000001a!important}.card-header{border-bottom:unset!important}.btn:hover{transform:translateY(-1px);transition:all .2s ease}.card:hover{transform:translateY(-2px);transition:all .3s ease}.bg-opacity-10{background-color:rgba(var(--bs-primary-rgb),.1)!important}.cursor-pointer{cursor:pointer}.transition-transform{transition:transform .3s ease}.rotate-180{transform:rotate(180deg)}.card-header:hover{opacity:.9;transition:opacity .2s ease}.card-body{transition:all .3s ease}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.add-review-img{color:#828484;width:65px;display:flex;align-items:center;justify-content:center;order:3px dotted black;background:#f0f2f2;border:1px solid #d5d9d9!important;cursor:pointer}.order-status{border-radius:8px;padding:5px 8px;font-size:16px}.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}.fs-15{font-size:15px}.review-textarea{border:1px solid #e2e8f0;border-radius:8px;font-size:14px;resize:none;background-color:#f8fafc;padding:12px 8px;transition:all .2s ease-in-out}.review-textarea:focus{border-color:#cbd5e1;background-color:#fff;box-shadow:0 0 0 3px #e2e8f080!important;outline:none}.review-upload-box{width:72px;height:72px;border:2px dashed #cbd5e1;border-radius:8px;background-color:#f8fafc;transition:all .2s ease-in-out;color:#64748b}.review-img-thumb{display:inline-block}.review-img-remove{position:absolute;top:-6px;right:-6px;width:18px!important;height:18px;border-radius:50%;background:#ef4444;color:#fff;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 4px #0000002e;transition:background .15s ease,transform .15s ease;z-index:1}.review-img-remove:hover{background:#dc2626;transform:scale(1.1)}.review-upload-box:hover{background-color:#f1f5f9;border-color:#94a3b8;color:#475569}.review-submit-btn{color:#fff!important;border-radius:8px;padding:12px 0;font-size:14px!important;border:none;letter-spacing:.3px;transition:transform .1s ease,box-shadow .2s ease}.review-submit-btn:hover{box-shadow:0 6px 15px #0000001a;transform:translateY(-1px)}.review-submit-btn:active{transform:translateY(1px)}::ng-deep .custom-timeline .custom-marker{display:flex!important;align-items:center!important;justify-content:center!important;width:28px!important;height:28px!important;border-radius:50%!important;z-index:10}::ng-deep .custom-timeline .active-marker{background-color:#fff!important;border-width:6px!important;border-style:solid!important}::ng-deep .custom-timeline .future-marker{background-color:#fff!important;border:5px solid #cbd5e1!important}::ng-deep .custom-timeline .p-timeline-event-marker{border:none!important;background:transparent!important;display:flex!important}::ng-deep .custom-timeline .p-timeline-event-connector{background-color:#cbd5e1!important;width:2px!important}::ng-deep .custom-timeline .p-timeline-event-opposite{display:none!important;flex:0!important;padding:0!important}::ng-deep .custom-timeline .p-timeline-event{min-height:50px}.text-light-grey{color:#94a3b8}.w-40{width:40%}@media (min-width: 576px){.w-sm-40{width:40%!important}}.item-card-pad{padding:16px 20px}.item-thumb{width:72px;height:72px;object-fit:cover;border-radius:8px}.item-name{font-size:14px;line-height:1.4}.item-price{font-size:14px}.item-variant,.item-qty{font-size:12px}.min-w-0{min-width:0}.review-form-box{background:#fff;border:1px solid #f0f0f0;border-radius:12px;padding:14px;box-shadow:0 4px 20px #00000008;overflow:hidden}@media (max-width: 575px){.container-fluid{padding-left:12px!important;padding-right:12px!important}.item-card-pad{padding:12px 14px}.item-thumb{width:60px;height:60px}.item-name,.item-price{font-size:13px}::ng-deep .p-rating-icon{font-size:1.35rem!important;padding:2px!important}.row.gx-5{--bs-gutter-x: 1rem !important}h2.fw-semibold{font-size:1.4rem!important}}.receipt-download-btn:hover,.receipt-download-btn:focus,.receipt-download-btn:active{color:#212529!important;border-color:#212529!important;box-shadow:none!important;transform:none!important}\n"] }]
|
|
22435
22546
|
}], ctorParameters: () => [{ type: EventsService }, { type: StorageServiceService }, { type: RestService }, { type: i6$1.MessageService }, { type: ImageUplaodService }], propDecorators: { responseData: [{
|
|
22436
22547
|
type: Input
|
|
22437
22548
|
}], data: [{
|