simpo-component-library 3.6.701 → 3.6.703
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 +138 -30
- package/esm2022/lib/ecommerce/sections/order-details/order-details.component.mjs +21 -6
- package/esm2022/lib/ecommerce/sections/product-list/product-list.component.mjs +3 -3
- package/esm2022/lib/ecommerce/sections/refer-earn/refer-earn.component.mjs +13 -4
- package/esm2022/lib/sections/banner-carousel/banner-carousel.component.mjs +19 -3
- package/esm2022/lib/sections/footer/footer.component.mjs +19 -5
- package/esm2022/lib/sections/footer/footer.modal.mjs +1 -1
- package/esm2022/lib/sections/service-section/service-section.component.mjs +3 -3
- package/esm2022/lib/services/rest.service.mjs +7 -3
- package/fesm2022/simpo-component-library.mjs +208 -43
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/lib/components/input-fields/input-fields.component.d.ts +1 -1
- package/lib/ecommerce/sections/authentication-required/authentication-required.component.d.ts +1 -1
- package/lib/ecommerce/sections/cart/cart.component.d.ts +16 -0
- package/lib/ecommerce/sections/product-desc/product-desc.component.d.ts +1 -1
- package/lib/ecommerce/sections/refer-earn/refer-earn.component.d.ts +6 -2
- package/lib/ecommerce/sections/schemes/schemes.component.d.ts +1 -1
- package/lib/sections/banner-carousel/banner-carousel.component.d.ts +4 -2
- package/lib/sections/carousel-banner/carousel-banner.component.d.ts +1 -1
- package/lib/sections/footer/footer.component.d.ts +4 -1
- package/lib/sections/footer/footer.modal.d.ts +5 -0
- package/lib/sections/image-section/image-section.component.d.ts +2 -2
- package/lib/sections/pricing-section/pricing-section.component.d.ts +1 -1
- package/lib/services/rest.service.d.ts +2 -1
- package/package.json +1 -1
- package/simpo-component-library-3.6.703.tgz +0 -0
- package/simpo-component-library-3.6.701.tgz +0 -0
|
@@ -70,7 +70,6 @@ import { PanelModule } from 'primeng/panel';
|
|
|
70
70
|
import { MatChipsModule } from '@angular/material/chips';
|
|
71
71
|
import * as i8$5 from 'primeng/timeline';
|
|
72
72
|
import { TimelineModule } from 'primeng/timeline';
|
|
73
|
-
import * as i11 from '@angular/material/tooltip';
|
|
74
73
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
75
74
|
|
|
76
75
|
class ButtonElementComponent {
|
|
@@ -3859,8 +3858,8 @@ class RestService {
|
|
|
3859
3858
|
checkAppInstalled(bId, appName) {
|
|
3860
3859
|
return this.http.get(this.BASE_URL + `app/app/check-app?businessId=${bId}&appName=${appName}`);
|
|
3861
3860
|
}
|
|
3862
|
-
getRedeemPoints(bId, userId, evetType, orderValue) {
|
|
3863
|
-
return this.http.get(this.BASE_URL + `ecommerce/api/referrals/available-amount?businessId=${bId}&userId=${userId}&eventType=${evetType}&orderValue=${orderValue}`);
|
|
3861
|
+
getRedeemPoints(bId, userId, evetType, orderValue, rewardPoints) {
|
|
3862
|
+
return this.http.get(this.BASE_URL + `ecommerce/api/referrals/available-amount?businessId=${bId}&userId=${userId}&eventType=${evetType}&orderValue=${orderValue}&rewardPoints=${rewardPoints}`);
|
|
3864
3863
|
}
|
|
3865
3864
|
paymentWithCompletePoints(cartId, data) {
|
|
3866
3865
|
return this.http.post(this.BASE_URL + `ecommerce/order/order/rewards?cartId=${cartId}`, data);
|
|
@@ -3902,6 +3901,10 @@ class RestService {
|
|
|
3902
3901
|
this.http.post(this.BASE_URL + 'ecommerce/analytics/batch', eventsToSend)
|
|
3903
3902
|
.subscribe({ error: () => { } });
|
|
3904
3903
|
}
|
|
3904
|
+
getPopularSearches() {
|
|
3905
|
+
const businessId = this.storage.getItem("bId") ?? this.storage.getItem("businessId") ?? "1f121081-dbea-65c6-ad89-1dfe8cdda902";
|
|
3906
|
+
return this.http.get(this.BASE_URL + `ecommerce/inventory/popular-searches?businessId=${businessId}`);
|
|
3907
|
+
}
|
|
3905
3908
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestService, deps: [{ token: i1.HttpClient }, { token: API_URL }, { token: ECOMMERCE_URL }, { token: CMIS_URL }, { token: i2$3.CookieService }, { token: LOCAL_STORAGE }, { token: PASSBOOK_URL }, { token: APPOINTMENT_URL }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3906
3909
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestService, providedIn: 'root' }); }
|
|
3907
3910
|
}
|
|
@@ -6960,7 +6963,7 @@ class ServiceSectionComponent extends BaseSection {
|
|
|
6960
6963
|
}, 100);
|
|
6961
6964
|
}
|
|
6962
6965
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ServiceSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6963
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ServiceSectionComponent, isStandalone: true, selector: "simpo-service-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div class=\"draggable\" *ngIf=\"content?.tag?.display && screenWidth > 475\" cdkDrag [cdkDragFreeDragPosition]=\"point\"\r\n (cdkDragEnded)=\"onDragEnded($event)\" cdkDragBoundary=\".total-container\" [cdkDragDisabled]=\"!edit\"
|
|
6966
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ServiceSectionComponent, isStandalone: true, selector: "simpo-service-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div class=\"draggable\" *ngIf=\"content?.tag?.display && screenWidth > 475\" cdkDrag [cdkDragFreeDragPosition]=\"point\"\r\n (cdkDragEnded)=\"onDragEnded($event)\" cdkDragBoundary=\".total-container\" [cdkDragDisabled]=\"!edit\"\r\n [style.color]=\"style?.background?.accentColor\" [style.borderColor]=\"style?.background?.accentColor\"\r\n [style.background]=\"getGlassyBackground(style?.background?.accentColor)\">\r\n {{ content?.tag?.label }}\r\n </div>\r\n <div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.corners\">\r\n <div #mainContainer [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" class=\"w-100\"\r\n [simpoOverlay]=\"style?.background\">\r\n <div class=\"container-fluid d-flex flex-column w-100\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n [simpoLayout]=\"style?.layout\">\r\n <!-- <div class=\"w-100\" *ngFor=\"let text of data?.content?.inputText\">\r\n <div [simpoContentTitleSpace]=\"headingSpace\" class=\"w-100\"\r\n [ngClass]=\"text.label.includes('Heading') ? 'heading-large lh-2 mb-1' : 'body-large mb-4'\">\r\n <simpo-text-editor class=\"w-100\" [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div> -->\r\n <div class=\"w-100\" *ngFor=\"let text of data?.content?.inputText\">\r\n <!-- Heading -->\r\n <div *ngIf=\"text.label === 'Heading'\" [simpoContentTitleSpace]=\"headingSpace\"\r\n class=\"w-100 heading-large lh-2\">\r\n <simpo-text-editor class=\"w-100\" [(value)]=\"text.value\" [editable]=\"edit || false\">\r\n </simpo-text-editor>\r\n </div>\r\n\r\n </div>\r\n <div class=\"service-cards-wrapper\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div class=\"row-scroll-wrapper\" [class.is-row]=\"style?.direction === 'ROW'\">\r\n <div class=\"row-scroll-inner\">\r\n <div class=\"row mx-0 service-row\" [class.row-scroll]=\"style?.direction === 'ROW'\" #container>\r\n <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n *ngFor=\"let service of content?.listItem?.data\">\r\n <ng-container class=\"w-100\" *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\r\n <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n class=\"w-100\" [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-below-image-card>\r\n </ng-container>\r\n <ng-container class=\"w-100\" *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\r\n <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n class=\"w-100\" [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-top-of-image-card>\r\n </ng-container>\r\n <ng-container class=\"w-100\" *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\r\n <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n class=\"w-100\" [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-covering-image-card>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display d-flex mt-3 gap-2\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.service-cards-wrapper{width:100%;max-width:100%}.row-scroll-wrapper.is-row{overflow-x:auto;overflow-y:hidden}.row-scroll-inner{padding-top:25px;padding-bottom:18px}.row-scroll{display:flex;flex-wrap:nowrap!important;width:100%;overflow:visible!important}.button-display{display:flex;flex-wrap:wrap;gap:10px}.draggable{background:#fff3;border-radius:32px!important;box-shadow:0 4px 30px #0000001a!important;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border-width:1px!important;border-style:solid!important;z-index:1;position:absolute;width:max-content;padding:8px 10px;font-weight:400;font-size:12px!important;font-family:var(--website-font-family)}@media screen and (min-width: 760px){.cards{padding-bottom:24px;margin-bottom:10px}}@media screen and (max-width: 475px){.cards{padding:5px 8px 10px!important}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: BelowImageCardComponent, selector: "simpo-below-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit"] }, { kind: "component", type: TopOfImageCardComponent, selector: "simpo-top-of-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit"] }, { kind: "component", type: CoveringImageCardComponent, selector: "simpo-covering-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type:
|
|
6964
6967
|
//directive
|
|
6965
6968
|
ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }] }); }
|
|
6966
6969
|
}
|
|
@@ -6995,7 +6998,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
6995
6998
|
SpacingHorizontalDirective,
|
|
6996
6999
|
SpacingAroundDirective,
|
|
6997
7000
|
SimpoContainerAligment
|
|
6998
|
-
], template: "<section [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div class=\"draggable\" *ngIf=\"content?.tag?.display && screenWidth > 475\" cdkDrag [cdkDragFreeDragPosition]=\"point\"\r\n (cdkDragEnded)=\"onDragEnded($event)\" cdkDragBoundary=\".total-container\" [cdkDragDisabled]=\"!edit\"
|
|
7001
|
+
], template: "<section [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div class=\"draggable\" *ngIf=\"content?.tag?.display && screenWidth > 475\" cdkDrag [cdkDragFreeDragPosition]=\"point\"\r\n (cdkDragEnded)=\"onDragEnded($event)\" cdkDragBoundary=\".total-container\" [cdkDragDisabled]=\"!edit\"\r\n [style.color]=\"style?.background?.accentColor\" [style.borderColor]=\"style?.background?.accentColor\"\r\n [style.background]=\"getGlassyBackground(style?.background?.accentColor)\">\r\n {{ content?.tag?.label }}\r\n </div>\r\n <div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.corners\">\r\n <div #mainContainer [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" class=\"w-100\"\r\n [simpoOverlay]=\"style?.background\">\r\n <div class=\"container-fluid d-flex flex-column w-100\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n [simpoLayout]=\"style?.layout\">\r\n <!-- <div class=\"w-100\" *ngFor=\"let text of data?.content?.inputText\">\r\n <div [simpoContentTitleSpace]=\"headingSpace\" class=\"w-100\"\r\n [ngClass]=\"text.label.includes('Heading') ? 'heading-large lh-2 mb-1' : 'body-large mb-4'\">\r\n <simpo-text-editor class=\"w-100\" [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div> -->\r\n <div class=\"w-100\" *ngFor=\"let text of data?.content?.inputText\">\r\n <!-- Heading -->\r\n <div *ngIf=\"text.label === 'Heading'\" [simpoContentTitleSpace]=\"headingSpace\"\r\n class=\"w-100 heading-large lh-2\">\r\n <simpo-text-editor class=\"w-100\" [(value)]=\"text.value\" [editable]=\"edit || false\">\r\n </simpo-text-editor>\r\n </div>\r\n\r\n </div>\r\n <div class=\"service-cards-wrapper\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div class=\"row-scroll-wrapper\" [class.is-row]=\"style?.direction === 'ROW'\">\r\n <div class=\"row-scroll-inner\">\r\n <div class=\"row mx-0 service-row\" [class.row-scroll]=\"style?.direction === 'ROW'\" #container>\r\n <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n *ngFor=\"let service of content?.listItem?.data\">\r\n <ng-container class=\"w-100\" *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\r\n <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n class=\"w-100\" [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-below-image-card>\r\n </ng-container>\r\n <ng-container class=\"w-100\" *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\r\n <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n class=\"w-100\" [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-top-of-image-card>\r\n </ng-container>\r\n <ng-container class=\"w-100\" *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\r\n <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n class=\"w-100\" [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-covering-image-card>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display d-flex mt-3 gap-2\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.service-cards-wrapper{width:100%;max-width:100%}.row-scroll-wrapper.is-row{overflow-x:auto;overflow-y:hidden}.row-scroll-inner{padding-top:25px;padding-bottom:18px}.row-scroll{display:flex;flex-wrap:nowrap!important;width:100%;overflow:visible!important}.button-display{display:flex;flex-wrap:wrap;gap:10px}.draggable{background:#fff3;border-radius:32px!important;box-shadow:0 4px 30px #0000001a!important;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border-width:1px!important;border-style:solid!important;z-index:1;position:absolute;width:max-content;padding:8px 10px;font-weight:400;font-size:12px!important;font-family:var(--website-font-family)}@media screen and (min-width: 760px){.cards{padding-bottom:24px;margin-bottom:10px}}@media screen and (max-width: 475px){.cards{padding:5px 8px 10px!important}}\n"] }]
|
|
6999
7002
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
7000
7003
|
type: Input
|
|
7001
7004
|
}], index: [{
|
|
@@ -8749,6 +8752,9 @@ class CartComponent extends BaseSection {
|
|
|
8749
8752
|
};
|
|
8750
8753
|
this.schemeList = [];
|
|
8751
8754
|
this.couponDialogRef = null;
|
|
8755
|
+
this.redemptionType = "COUPONS";
|
|
8756
|
+
this.redemptionCouponType = "REWARDS";
|
|
8757
|
+
this.couponValueType = '';
|
|
8752
8758
|
this.showReedemError = false;
|
|
8753
8759
|
this.vaildAmount = 0;
|
|
8754
8760
|
this.referEarnExist = false;
|
|
@@ -9118,12 +9124,6 @@ class CartComponent extends BaseSection {
|
|
|
9118
9124
|
catch (error) {
|
|
9119
9125
|
console.error("Invalid referralDetails JSON", error);
|
|
9120
9126
|
}
|
|
9121
|
-
if (this?.isPointsRedeeming === true) {
|
|
9122
|
-
if ((this?.redemptionPoints?.pointsConvertedRupees === this.responseData?.totalAmount) || (this?.redemptionPoints?.pointsConvertedRupees > this.responseData?.totalAmount)) {
|
|
9123
|
-
this.paymentWithCompletePoints();
|
|
9124
|
-
return;
|
|
9125
|
-
}
|
|
9126
|
-
}
|
|
9127
9127
|
if (!this.storageService.getUser()) {
|
|
9128
9128
|
this.messageService.add({ severity: 'info', summary: 'Login', detail: 'Please login with mobile number to order' });
|
|
9129
9129
|
return;
|
|
@@ -9136,44 +9136,60 @@ class CartComponent extends BaseSection {
|
|
|
9136
9136
|
}
|
|
9137
9137
|
const userDetail = this.storageService.getUser();
|
|
9138
9138
|
const address = userDetail?.addressDetailsList[this.selectedAddressIdx];
|
|
9139
|
-
if (address?.receiverName?.length == 0) {
|
|
9140
|
-
|
|
9141
|
-
|
|
9142
|
-
}
|
|
9139
|
+
// if (address?.receiverName?.length == 0) {
|
|
9140
|
+
// this.messageService.add({ severity: 'error', summary: 'Payment Failure', detail: 'Please provide address details' });
|
|
9141
|
+
// return;
|
|
9142
|
+
// }
|
|
9143
9143
|
if (!(localStorage.getItem("cartId") == "undefined" || localStorage.getItem("cartId") == "null"))
|
|
9144
9144
|
this.cartInfo["cartId"] = localStorage.getItem("cartId");
|
|
9145
9145
|
else {
|
|
9146
9146
|
this.messageService.add({ severity: 'info', summary: 'Please wait', detail: 'We are processing your payment', life: 2000 });
|
|
9147
9147
|
await this.restService.addItemToDB(this.cartInfo).toPromise().then((response) => {
|
|
9148
9148
|
localStorage.setItem("cartId", response.data?.cartId);
|
|
9149
|
+
this.cartId = response.data?.cartId;
|
|
9149
9150
|
this.cartInfo["cartId"] = response.data?.cartId;
|
|
9150
9151
|
});
|
|
9151
9152
|
}
|
|
9153
|
+
if (this?.isPointsRedeeming === true) {
|
|
9154
|
+
if ((this?.redemptionPoints?.pointsConvertedRupees === this.responseData?.totalAmount) || (this?.redemptionPoints?.pointsConvertedRupees > this.responseData?.totalAmount)) {
|
|
9155
|
+
this.paymentWithCompletePoints();
|
|
9156
|
+
return;
|
|
9157
|
+
}
|
|
9158
|
+
}
|
|
9152
9159
|
this.cartInfo["addressDetails"] = address;
|
|
9153
9160
|
const updateAddress = await this.restService.addItemToDB(this.cartInfo).toPromise();
|
|
9154
9161
|
const payload = {
|
|
9155
|
-
"userId": userDetail
|
|
9162
|
+
"userId": userDetail?.userId,
|
|
9156
9163
|
"cartId": localStorage.getItem('cartId'),
|
|
9164
|
+
// "orderAmount": this.isPointsRedeeming
|
|
9165
|
+
// ? Number(((this.responseData?.totalAmount ?? 0) - (this?.totalSavingAmt || 0)).toFixed(2))
|
|
9166
|
+
// : this.selectedVoucherAmount ? Number(((this.responseData?.totalAmount ?? 0) - (this?.selectedVoucherAmount || 0)).toFixed(2)) : Number((this.responseData?.totalAmount ?? 0).toFixed(2)),
|
|
9157
9167
|
"orderAmount": this.isPointsRedeeming
|
|
9158
9168
|
? Number(((this.responseData?.totalAmount ?? 0) - (this?.totalSavingAmt || 0)).toFixed(2))
|
|
9159
|
-
:
|
|
9169
|
+
: this.couponValueType === 'AMOUNT'
|
|
9170
|
+
? Number(((this.responseData?.totalAmount ?? 0) - (this?.selectedVoucherAmount || 0)).toFixed(2))
|
|
9171
|
+
: this.couponValueType === 'PERCENTAGE'
|
|
9172
|
+
? Number(((this.responseData?.totalAmount ?? 0) - (this?.percentageReduced || 0)).toFixed(2))
|
|
9173
|
+
: Number((this.responseData?.totalAmount ?? 0).toFixed(2)),
|
|
9160
9174
|
"isPaymentGatewayEnabled": isPaymentGatewayEnabled,
|
|
9161
9175
|
"contactDetails": {
|
|
9162
|
-
"name": address
|
|
9163
|
-
"mobile": address
|
|
9176
|
+
"name": address?.receiverName,
|
|
9177
|
+
"mobile": address?.receiverPhone,
|
|
9164
9178
|
"countryCode": "91",
|
|
9165
|
-
"email": address
|
|
9179
|
+
"email": address?.receiverEmail
|
|
9166
9180
|
},
|
|
9167
9181
|
"paymentMerchantId": merchantId,
|
|
9168
|
-
"isJewellery": this
|
|
9182
|
+
"isJewellery": this?.isJewellery,
|
|
9169
9183
|
"referralId": result?.referralUniqueId,
|
|
9170
9184
|
"rewardUsed": this?.isPointsRedeeming ? "REWARD_POINTS" : null,
|
|
9171
9185
|
"pointsUsed": this?.isPointsRedeeming ? this.usedPoints : 0,
|
|
9172
9186
|
"pointsConvertedINR": this?.isPointsRedeeming ? this.totalSavingAmt : 0,
|
|
9173
|
-
"voucherValue": 0,
|
|
9174
|
-
"voucherId": null,
|
|
9175
|
-
"voucherCode":
|
|
9187
|
+
"voucherValue": this.selectedVoucherAmount ? this.selectedVoucherAmount : this.percentageReduced ? this.percentageReduced : 0,
|
|
9188
|
+
"voucherId": this?.appliedVoucher ? this.selectedVoucherId : null,
|
|
9189
|
+
"voucherCode": this?.appliedVoucher ? this.selectedVoucherCode : ''
|
|
9176
9190
|
};
|
|
9191
|
+
// console.log(payload)
|
|
9192
|
+
// return
|
|
9177
9193
|
this.restService.createPaymentToken(payload).subscribe((paymentDetails) => {
|
|
9178
9194
|
if (isPaymentGatewayEnabled)
|
|
9179
9195
|
this._eventService.cashFreeEvent.emit(paymentDetails);
|
|
@@ -9284,6 +9300,89 @@ class CartComponent extends BaseSection {
|
|
|
9284
9300
|
// }
|
|
9285
9301
|
});
|
|
9286
9302
|
}
|
|
9303
|
+
addRedemptionCoupon(container) {
|
|
9304
|
+
let businessId = localStorage.getItem("bId") ?? localStorage.getItem("businessId");
|
|
9305
|
+
const userDetails = this.storageService.getUser();
|
|
9306
|
+
let userId = userDetails?.userId;
|
|
9307
|
+
let orderValue = this.responseData?.billdetails?.totalNetValue;
|
|
9308
|
+
// let businessId = '1f12df16-8154-6cea-85c5-fb616c47aaf4';
|
|
9309
|
+
// let userId = '29d2b424-680c-46bd-b18f-b86b346eb1cf';
|
|
9310
|
+
// let orderValue = this.responseData?.billdetails?.totalNetValue;
|
|
9311
|
+
this.restService.getRedeemPoints(businessId, userId, 'PRODUCT_PURCHASE', orderValue, false).subscribe({
|
|
9312
|
+
next: (res) => {
|
|
9313
|
+
console.log(res);
|
|
9314
|
+
this.listRedemptionCoupons = res;
|
|
9315
|
+
this.couponDialogRef = this.matDialog.open(container, { panelClass: 'sidepanel-class' });
|
|
9316
|
+
},
|
|
9317
|
+
error: (err) => {
|
|
9318
|
+
this.messageService.add({ severity: 'error', summary: 'Coupons Failed', detail: 'Failed to load Coupons' });
|
|
9319
|
+
}
|
|
9320
|
+
});
|
|
9321
|
+
this.restService.applicableDiscountList(this.cartInfo.cartId).subscribe((response) => {
|
|
9322
|
+
this.couponList = response.data?.filter((coupon) => coupon.active)?.map((coupon) => {
|
|
9323
|
+
return {
|
|
9324
|
+
discountType: coupon.discount,
|
|
9325
|
+
discountName: coupon.couponTitle,
|
|
9326
|
+
discountDescription: coupon.couponDescription,
|
|
9327
|
+
couponCode: coupon.couponCode,
|
|
9328
|
+
couponId: coupon.couponId,
|
|
9329
|
+
applicable: coupon.applicable,
|
|
9330
|
+
status: coupon.active,
|
|
9331
|
+
validTo: coupon.expires,
|
|
9332
|
+
validFrom: coupon.validFrom
|
|
9333
|
+
};
|
|
9334
|
+
});
|
|
9335
|
+
this.couponDialogRef = this.matDialog.open(container, { panelClass: 'sidepanel-class' });
|
|
9336
|
+
});
|
|
9337
|
+
}
|
|
9338
|
+
applyRedemptionCoupon(voucher) {
|
|
9339
|
+
if (this.isPointsRedeeming) {
|
|
9340
|
+
this.messageService.add({ severity: 'info', summary: 'Coupon not applicable', detail: 'You can not add a coupon when points are being redeemed' });
|
|
9341
|
+
return;
|
|
9342
|
+
}
|
|
9343
|
+
if (this.appliedVoucher) {
|
|
9344
|
+
this.removeRedemptionCoupon();
|
|
9345
|
+
}
|
|
9346
|
+
this.appliedVoucher = voucher;
|
|
9347
|
+
this.selectedVoucherId = voucher.couponId;
|
|
9348
|
+
this.selectedVoucherCode = voucher.voucherCode;
|
|
9349
|
+
this.selectedVoucherPercentage = voucher.couponValue;
|
|
9350
|
+
let total = Number(this.responseData?.totalAmount) || 0;
|
|
9351
|
+
let percentage = Number(this.selectedVoucherPercentage) || 0;
|
|
9352
|
+
let amt = total * (percentage / 100);
|
|
9353
|
+
if (voucher.couponValueType === 'PERCENTAGE') {
|
|
9354
|
+
this.couponValueType = "PERCENTAGE";
|
|
9355
|
+
if (amt > voucher.maxRedeemableAmount) {
|
|
9356
|
+
this.percentageReduced = voucher.maxRedeemableAmount;
|
|
9357
|
+
}
|
|
9358
|
+
else {
|
|
9359
|
+
this.percentageReduced = amt;
|
|
9360
|
+
}
|
|
9361
|
+
}
|
|
9362
|
+
else {
|
|
9363
|
+
this.couponValueType = "AMOUNT";
|
|
9364
|
+
this.selectedVoucherAmount = voucher.couponValue;
|
|
9365
|
+
}
|
|
9366
|
+
this.closeDialogRef();
|
|
9367
|
+
Swal.fire({
|
|
9368
|
+
icon: "success",
|
|
9369
|
+
title: `You saved ${this.selectedVoucherAmount ? '₹' : ''} ${this.selectedVoucherAmount ? this.selectedVoucherAmount : this.selectedVoucherPercentage} ${this.selectedVoucherAmount ? '' : '%'} on this payment`,
|
|
9370
|
+
text: `Coupon code ${this.selectedVoucherCode} has been applied successfully`,
|
|
9371
|
+
confirmButtonText: "YAY!",
|
|
9372
|
+
confirmButtonColor: "#111",
|
|
9373
|
+
}).then((res) => {
|
|
9374
|
+
if (res.isConfirmed || res.isDismissed) {
|
|
9375
|
+
// popup closed
|
|
9376
|
+
}
|
|
9377
|
+
});
|
|
9378
|
+
}
|
|
9379
|
+
removeRedemptionCoupon(event) {
|
|
9380
|
+
event?.stopPropagation();
|
|
9381
|
+
this.appliedVoucher = null;
|
|
9382
|
+
this.selectedVoucherId = null;
|
|
9383
|
+
this.selectedVoucherCode = null;
|
|
9384
|
+
this.selectedVoucherAmount = null;
|
|
9385
|
+
}
|
|
9287
9386
|
searchIfApplicable() { }
|
|
9288
9387
|
closeDialogRef() {
|
|
9289
9388
|
this.couponDialogRef?.close();
|
|
@@ -9486,7 +9585,7 @@ class CartComponent extends BaseSection {
|
|
|
9486
9585
|
// let businessId = '1f12df16-8154-6cea-85c5-fb616c47aaf4'
|
|
9487
9586
|
// let userId = '29d2b424-680c-46bd-b18f-b86b346eb1cf'
|
|
9488
9587
|
// let orderValue = this.responseData?.billdetails?.totalNetValue
|
|
9489
|
-
this.restService.getRedeemPoints(businessId, userId, 'PRODUCT_PURCHASE', orderValue).subscribe({
|
|
9588
|
+
this.restService.getRedeemPoints(businessId, userId, 'PRODUCT_PURCHASE', orderValue, true).subscribe({
|
|
9490
9589
|
next: (res) => {
|
|
9491
9590
|
this.redemptionPoints = res;
|
|
9492
9591
|
this.pointsConverted = res.availablePoints / res.pointsConvertedRupees;
|
|
@@ -9498,6 +9597,19 @@ class CartComponent extends BaseSection {
|
|
|
9498
9597
|
}
|
|
9499
9598
|
});
|
|
9500
9599
|
}
|
|
9600
|
+
onPointsRedeemingChange(event) {
|
|
9601
|
+
if (this.appliedVoucher) {
|
|
9602
|
+
event.preventDefault();
|
|
9603
|
+
this.messageService.add({
|
|
9604
|
+
severity: 'info',
|
|
9605
|
+
summary: 'Points Redeem',
|
|
9606
|
+
detail: 'You can not redeem points when a coupon is applied. Please remove the coupon to redeem points'
|
|
9607
|
+
});
|
|
9608
|
+
}
|
|
9609
|
+
else {
|
|
9610
|
+
this.isPointsRedeeming = !this.isPointsRedeeming;
|
|
9611
|
+
}
|
|
9612
|
+
}
|
|
9501
9613
|
// For repemption
|
|
9502
9614
|
get getRemainingPoints() {
|
|
9503
9615
|
return this?.responseData?.totalAmount > this?.redemptionPoints.pointsConvertedRupees ? 0 : (this?.redemptionPoints.availablePoints - this?.responseData?.totalAmount * this.pointsConverted);
|
|
@@ -9538,9 +9650,9 @@ class CartComponent extends BaseSection {
|
|
|
9538
9650
|
});
|
|
9539
9651
|
}
|
|
9540
9652
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CartComponent, deps: [{ token: EventsService }, { token: CartService }, { token: i2$2.Router }, { token: RestService }, { token: i1$1.MatDialog }, { token: StorageServiceService }, { token: i6$1.MessageService }, { token: i8$3.MatBottomSheet }, { token: i2$2.ActivatedRoute }, { token: MAT_DIALOG_DATA, optional: true }, { token: i1$1.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9541
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CartComponent, isStandalone: true, selector: "simpo-cart", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, providers: [MessageService], viewQueries: [{ propertyName: "d2", first: true, predicate: ["d2"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n <ng-container *ngIf=\"data\">\r\n <section [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\"\r\n [attr.class]=\"isMobile ? 'py-5 position-relative' : 'position-relative'\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\"\r\n [ngClass]=\"!responseData?.orderedItems?.length ? 'no-items' : ''\">\r\n <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\"\r\n [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\"\r\n *ngIf=\"responseData?.orderedItems?.length && currentTab === 'ADDRESS'\">\r\n <span class=\"timeline\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline isActive\">Address</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline\" style=\"cursor: auto;\">Payment</span>\r\n </div>\r\n <div class=\"cart-tab-parent w-100\" *ngIf=\"currentTab == 'BAG' && ecomConfigs?.appointmentBookingEnabled\">\r\n <div class=\"cart-tabs\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n <div class=\"selected-cart-tab\" [ngClass]=\"{'selected-cart-tab': cartType==='SHOPPING'}\"\r\n (click)=\"cartType='SHOPPING'\">Shopping Cart ({{responseData?.orderedItems?.length ?? 0}})</div>\r\n <div [ngClass]=\"{'selected-cart-tab': cartType==='TRIAL'}\" (click)=\"cartType='TRIAL'\">Trial Cart\r\n ({{trialCartItem?.length ?? 0}})</div>\r\n </div>\r\n </div>\r\n <div class=\"cart-parent\" [spacingHorizontal]=\"stylesLayout\" *ngIf=\"currentTab === 'BAG'\" [id]=\"data?.id\"\r\n [simpoAnimation]=\"styles?.animation\">\r\n <ng-container>\r\n <!-- <div class=\"left-panel\">\r\n <div class=\"my-bag\">\r\n My Bag <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n </div>\r\n <div class=\"cart-items box-shadow\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n <div class=\"item-parent d-flex\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n alt=\"\" (click)=\"goToProductDetails(item)\">\r\n </div>\r\n <div class=\"col-md-6 h-100\" [style.width.px]=\"isMobile ? '200' : ''\" style=\"margin-left: px;\">\r\n <div class=\"lh-23\">\r\n <div class=\"item-name trim-text heading-large\">{{item.itemName}}</div>\r\n <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.discountedPrice ?? item.sellingPrice) | number:\r\n '1.0-2'}}\r\n </div>\r\n <ng-container *ngIf=\"item.itemVariant\">\r\n <div class=\"d-flex align-items-center\"\r\n *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\r\n <strong class=\"fw-bold\">{{ varient }} : </strong>\r\n {{ item.itemVariant.properties[varient] | uppercase }}\r\n </div>\r\n </ng-container>\r\n <div class=\"item-quantity\">\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4 position-relative\" style=\"margin-left: auto; width: 0px; \">\r\n <div class=\"item-price\"><span [innerHTML]='currency'></span> {{((item.discountedPrice ??\r\n item.sellingPrice) * item.quantity) | number: '1.0-2'}}</div>\r\n <div>\r\n <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\"\r\n [style.right.px]=\"isMobile ? '5' : '0'\">delete</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n </ng-container>\r\n </div>\r\n </div> -->\r\n <!-- <div class=\"right-panel\">\r\n <div class=\"coupons box-shadow\" (click)=\"openDialog(CouponList)\">\r\n <ng-container *ngIf=\"!responseData.billdetails?.couponId\">\r\n <div class=\"d-flex flex-column\">\r\n <span style=\"font-weight: 600;\">Apply Coupon</span>\r\n <span style=\"font-size: 13px;\">Save more with coupon and offers</span>\r\n </div>\r\n <div [style.color]=\"styles?.background?.accentColor\" style=\"font-weight: 600;\">Apply</div>\r\n </ng-container>\r\n <ng-container *ngIf=\"responseData.billdetails?.couponId\">\r\n <div class=\"d-flex flex-column\">\r\n <span style=\"font-weight: 600;\">Coupon</span>\r\n <span style=\"font-size: 13px;\">Save more with coupon and offers</span>\r\n </div>\r\n <div [style.color]=\"styles?.background?.accentColor\" (click)=\"removeCoupon($event)\">Remove</div>\r\n </ng-container>\r\n </div>\r\n <div class=\"price-details box-shadow\">\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\">Total Price</div>\r\n <div class=\"price-value\"><span [innerHTML]='currency'></span>\r\n {{(responseData?.billdetails?.totalNetValue\r\n ?? 0) | number: '1.0-2'}}</div>\r\n </div>\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\">Total Tax</div>\r\n <div class=\"price-value\"><span [innerHTML]='currency'></span> {{((!responseData.billdetails?.couponId ?\r\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\r\n number:\r\n '1.0-2'}}</div>\r\n </div>\r\n <div class=\"price-parent-block\"\r\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n <div class=\"price-type\">Delivery Charge</div>\r\n <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges\r\n |\r\n number: '1.0-2'}}</div>\r\n </div>\r\n <div class=\"price-parent-block\"\r\n *ngIf=\"responseData?.billdetails?.discountAmount && subIndustryName != 'Ecommerce Jewellery'\">\r\n <div class=\"price-type\">Discount Amount</div>\r\n <div class=\"price-value\"><span [innerHtml]='currency'></span>\r\n {{responseData?.billdetails?.discountAmount\r\n | number: '1.0-2'}}</div>\r\n </div>\r\n <hr>\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span>\r\n {{((responseData?.totalAmount ?? 0) - (responseData?.billdetails?.discountAmount ?? 0)) | number:\r\n '1.0-2'}}</div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"button-parent\">\r\n <ng-container>\r\n <button class=\"btn mobile-fixed\" (click)=\"!edit ? proceedToCheckout() : ''\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\">{{data?.action?.buttons?.[0]?.content?.label ??\r\n 'Checkout\r\n Cart'}}\r\n </button>\r\n <button class=\"btn\" (click)=\"!edit ? proceedToListPage() : ''\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(1)\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\r\n Shopping'}}</button>\r\n </ng-container>\r\n </div>\r\n\r\n </div> -->\r\n <ng-container *ngIf=\"cartType === 'SHOPPING'\">\r\n <ng-container\r\n *ngTemplateOutlet=\"(responseData?.orderedItems?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"cartType === 'TRIAL'\">\r\n <ng-container *ngTemplateOutlet=\"(trialCartItem?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\r\n </ng-container>\r\n <!-- <ng-container *ngTemplateOutlet=\"CARTPAGE\"></ng-container> -->\r\n </ng-container>\r\n <!-- <ng-container *ngIf=\"(responseData?.orderedItems?.length || 0) > 0 && cartType==='TRIAL'\">\r\n <ng-container *ngTemplateOutlet=\"TRIAL_CART\">\r\n </ng-container>\r\n </ng-container> -->\r\n </div>\r\n <div class=\"d-flex checkoutPage\"\r\n *ngIf=\"(responseData?.orderedItems?.length || 0) > 0 && currentTab === 'ADDRESS'\">\r\n <ng-container *ngTemplateOutlet=\"CHECKOUTPAGE\">\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isEcommerce]=\"true\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n </section>\r\n </ng-container>\r\n <ng-container *ngIf=\"!data\">\r\n <section class=\"cart-window\">\r\n <div class=\"heading-large lh-2 mb-3 header-sec\">\r\n <div class=\"d-flex align-items-center\">\r\n <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\r\n <span>Your Cart</span>\r\n </div>\r\n <div class=\"saving\"></div>\r\n </div>\r\n <div class=\"offers\">\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\r\n <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\r\n <span>Avail Offers / Coupons</span>\r\n </div>\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n <div class=\"small-items\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems\">\r\n <div class=\"small-item\">\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"small-product-img\"\r\n [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n (click)=\"goToProductDetails(item)\">\r\n </div>\r\n <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\r\n <div class=\"small-item-quantity\">\r\n <span class=\"cursor\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\">+</span>\r\n </div>\r\n <div class=\"small-item-price\">\r\n <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.sellingPrice) | number: '1.0-2'}}\r\n </div>\r\n <!-- <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"fotter-sec\">\r\n <div class=\"delivery-add d-flex\">\r\n <mat-icon>home</mat-icon>\r\n <div class=\"address\">Tetsting</div>\r\n </div>\r\n <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span\r\n style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span>\r\n {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\r\n </div>\r\n </section>\r\n </ng-container>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n<ng-template #CouponList>\r\n <section class=\"coupons-listing-section\">\r\n <div class=\"coupon-heading\">\r\n <div class=\"back-btn\" (click)=\"closeDialogRef()\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"header-text\">Apply Coupon</div>\r\n </div>\r\n <!-- <div class=\"coupon-search-sec\">\r\n <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\r\n <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\r\n </div> -->\r\n <div class=\"coupon-listing\">\r\n <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\r\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\r\n <div class=\"coupon-details\"\r\n [ngStyle]=\"{'background-color': !couponDetails.applicable ? '#FFF2F4' : '#EDFFFA'}\"\r\n *ngIf=\"couponDetails?.status\">\r\n <div class=\"details__coupon-heading\">\r\n <div class=\"coupon-brief\">\r\n <div class=\"coupon-brief__left-sec\">\r\n <div class=\"coupon-name\" [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\r\n {{ couponDetails.couponCode | uppercase }}</div>\r\n <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\r\n </div>\r\n <div class=\"coupon-brief__right-sec\">\r\n <div class=\"apply-offer-btn\" [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\r\n [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : ''}\"\r\n (click)=\"applyCoupon(couponDetails)\">Apply</div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\r\n <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\r\n <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\r\n </div> -->\r\n </div>\r\n <ng-container>\r\n <!-- *ngIf=\"couponDetails.status\" -->\r\n <div class=\"details-divider\"></div>\r\n <ul class=\"details__coupon-terms\">\r\n <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\r\n </ul>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #showEmptyScreen>\r\n <div class=\"empty-screen-container\">\r\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n <div class=\"empty-screen__primary-text\">No Coupon Available</div>\r\n <div class=\"empty-screen__secondary-text\">\r\n Looks like there are no coupons at the moment\r\n </div>\r\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\r\n </div>\r\n </ng-template>\r\n </div>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #CARTPAGE>\r\n <div class=\"container\">\r\n <div class=\"main-content\">\r\n <div class=\"promo-banner\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"\r\n *ngIf=\"cartType === 'SHOPPING' && ecomConfigs?.videoCallEnabled\" [simpoColor]=\"styles?.background?.color\">\r\n <div class=\"promo-text\">\r\n <h3>See It Before You Buy It</h3>\r\n <p>Experience our designs in detail via video call</p>\r\n </div>\r\n <button class=\"see-live-btn\" (click)=\"scheduleVideoCall(responseData?.orderedItems)\">\r\n \uD83D\uDCF9 SEE IT LIVE\r\n </button>\r\n </div>\r\n\r\n <div class=\"cart-items\" [style.background]=\"accentBackground\">\r\n <ng-container\r\n *ngTemplateOutlet=\"CARTITEM;context:{data: cartType === 'SHOPPING' ? responseData?.orderedItems : trialCartItem}\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"sidebar\">\r\n <div class=\"reedem-section d-flex flex-column align-items-center\" *ngIf=\"cartType != 'TRIAL' && getUrl()\">\r\n <div class=\"justify-content-between d-flex align-items-center w-100 redeem-section-text\">Redeem Section Amount\r\n <div class=\"toogle-switch\">\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" role=\"switch\" id=\"flexSwitchCheckChecked\"\r\n [checked]=\"selectMatureScheme\" (change)=\"onToggleChange()\">\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"select_matured_text w-100 text-start cursor-pointer\"\r\n *ngIf=\"selectMatureScheme && !selectedRedemption\" (click)=\"selectScheme()\">\r\n Select Matured Scheme\r\n </div> -->\r\n <!-- <div class=\"select_matured_text d-flex flex-column gap-2 w-100 text-start cursor-pointer\"\r\n *ngIf=\"selectedRedemption\">\r\n Selected Scheme\r\n <div class=\"d-flex w-100 justify-content-between align-items-center group_invest\">Group Investment\r\n scheme-5000/M <span>Change</span></div>\r\n <div class=\"d-flex justify-content-between align-items-center w-100 redeem_amount\">Redeemable Amount\r\n <span>\u20B9{{selectedRedmpationData.selectedAmount}}</span>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div class=\"scheme-section\" *ngIf=\"selectMatureScheme\">\r\n <ng-container *ngTemplateOutlet=\"SCHEME_REDEMPTION\"></ng-container>\r\n </div>\r\n <div class=\"coupon-section\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING'\" (click)=\"openDialog(CouponList)\"\r\n [simpoColor]=\"styles?.background?.color\" [style.background]=\"accentBackground\">\r\n <div class=\"coupon-left\">\r\n <div class=\"coupon-icon\" [style.color]=\"fontColor\"><mat-icon>percent</mat-icon></div>\r\n <span class=\"coupon-text\" *ngIf=\"!responseData.billdetails?.couponId\" [style.color]=\"fontColor\">Apply\r\n Coupon</span>\r\n <span class=\"coupon-text\" *ngIf=\"responseData.billdetails?.couponId\" [style.color]=\"fontColor\">Coupon\r\n Applied</span>\r\n </div>\r\n <span *ngIf=\"!responseData.billdetails?.couponId\" [style.color]=\"fontColor\">\u25B6</span>\r\n <span *ngIf=\"responseData.billdetails?.couponId\" (click)=\"removeCoupon($event)\"\r\n [style.color]=\"fontColor\"><mat-icon>close</mat-icon></span>\r\n </div>\r\n\r\n <div class=\"plan-details-container p-3 rounded-4\" *ngIf=\"referEarnExist\"\r\n [simpoColor]=\"styles?.background?.color\" [style.background]=\"accentBackground\">\r\n <div class=\"coupon-text\" [style.color]=\"fontColor\">\r\n AVAILABLE REWARDS\r\n </div>\r\n <div class=\"bb-dashed\"></div>\r\n <div class=\"mt-2 mb-2 d-flex justify-content-between align-items-center\">\r\n <div class=\"points_value\">\r\n <div class=\"avb_pts d-flex gap-1 align-items-center\" [style.color]=\"fontColor\">\r\n <span class=\"fs-18 fw-600 total_points\">\r\n {{this?.redemptionPoints?.availablePoints || 0}} pts\r\n </span>\r\n <div class=\"total_value fs-14\" [style.color]=\"fontColor\">\r\n = max \u20B9{{this?.redemptionPoints?.pointsConvertedRupees || 0}} discount\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"bb-dashed\"></div>\r\n <div class=\"d-flex justify-content-between align-items-center mt-2\">\r\n <div class=\"redemable_text\">\r\n <div class=\"title_text\">\r\n <div class=\"fs-14 fw-500\" [style.color]=\"fontColor\">\r\n Redeem Points\r\n </div>\r\n <div class=\"fs-13 fs-400\" [style.color]=\"fontColor\">\r\n Use your points for discount\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"toggle_btn\">\r\n <label class=\"switch\">\r\n <input type=\"checkbox\" id=\"toggleSwitch\" [(ngModel)]=\"isPointsRedeeming\" />\r\n <span class=\"slider\"></span>\r\n </label>\r\n </div>\r\n </div>\r\n <div class=\"mt-2 success_selected w-100\" *ngIf=\"isPointsRedeeming\">\r\n <div class=\"d-flex align-items-start gap-2\">\r\n <div class=\"success_icon\">\r\n <mat-icon class=\"d-flex justify-content-center align-items-center\"\r\n [style.color]=\"fontColor\">check_circle</mat-icon>\r\n </div>\r\n <div class=\"success_text\">\r\n <div class=\"fs-13 fw-500\" [style.color]=\"fontColor\">\r\n You're saving \u20B9\r\n {{totalSavingAmt || 0}}\r\n </div>\r\n <div class=\"fs-12 fs-400\" [style.color]=\"fontColor\">\r\n {{totalSavingPoints}} points remaining after redemption\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"delivery-section\" *ngIf=\"getUrl()\">\r\n <div class=\"delivery-header\">\r\n <mat-icon>gps_fixed</mat-icon>\r\n <span *ngIf=\"cartType === 'SHOPPING'\">Delivering to</span>\r\n <span *ngIf=\"cartType === 'TRIAL'\">Trial Location at</span>\r\n <span class=\"pincode\">{{pincode}}</span>\r\n <!-- <a class=\"change-link\">Change Pincode</a> -->\r\n </div>\r\n </div>\r\n\r\n <div class=\"summary-section\" [style.background]=\"accentBackground\" [style.color]=\"fontColor\">\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <div class=\"d-flex flex-column\">\r\n <span class=\"summary-label\">Total Price</span>\r\n <span class=\"fs-12\">(Excludes all taxes)</span>\r\n </div>\r\n <span class=\"summary-value\">\u20B9{{(responseData?.billdetails?.totalNetValue\r\n ?? 0) | number: '1.0-2'}}</span>\r\n </div>\r\n\r\n\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.taxBreakup?.sgstValue\">\r\n <span class=\"summary-label\">SGST</span>\r\n <span class=\"summary-value\">\u20B9{{ responseData?.billdetails?.taxBreakup?.sgstValue | number: '1.0-2'}}</span>\r\n </div>\r\n\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.taxBreakup?.cgstValue\">\r\n <span class=\"summary-label\">CGST</span>\r\n <span class=\"summary-value\">\u20B9{{ responseData?.billdetails?.taxBreakup?.cgstValue | number: '1.0-2'}}</span>\r\n </div>\r\n\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && referEarnExist && isPointsRedeeming\">\r\n <span class=\"summary-label\">Points Redeemed</span>\r\n <span class=\"summary-value\">- \u20B9{{ totalSavingAmt || 0 }}</span>\r\n </div>\r\n\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span class=\"summary-label\">Total Tax</span>\r\n <span class=\"summary-value\">\u20B9{{((!responseData.billdetails?.couponId ?\r\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\r\n number:\r\n '1.0-2'}}</span>\r\n </div>\r\n\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && cartInfo?.billdetails?.orraSchemeRedeemedAmount\">\r\n <span class=\"summary-label\">Redeem Amount</span>\r\n <span class=\"summary-value\">\u20B9{{(cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\r\n '1.0-2'}}</span>\r\n </div>\r\n <div class=\"summary-row\"\r\n *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n <span class=\"summary-label\">Delivery Charge</span>\r\n <span class=\"summary-value\">\u20B9{{responseData.billdetails.deliveryCharges\r\n |\r\n number: '1.0-2'}}</span>\r\n </div>\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.discountAmount \">\r\n <span class=\"summary-label\">Discount Amount</span>\r\n <span class=\"summary-value savings\"> \u20B9{{responseData?.billdetails?.discountAmount\r\n | number: '1.0-2'}}</span>\r\n </div>\r\n <!-- <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span class=\"summary-label\">Coupon Discount</span>\r\n <span class=\"summary-value apply-coupon\">Apply Coupon</span>\r\n </div> -->\r\n <!-- <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span class=\"summary-label\">Shipping (Standard)</span>\r\n <span class=\"summary-value free\">Free</span>\r\n </div> -->\r\n <div class=\"summary-row total-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <div class=\"d-flex flex-column\">\r\n <span class=\"total-label\">Total Cost</span>\r\n <span class=\"fs-12\">(Inclusive of all taxes)</span>\r\n </div>\r\n <span class=\"total-value\" *ngIf=\"!isPointsRedeeming\">\u20B9{{ responseData?.totalAmount |\r\n number: '1.0-2' }}</span>\r\n \r\n <span class=\"total-value\" *ngIf=\"isPointsRedeeming\">\u20B9{{ (responseData?.totalAmount - (totalSavingAmt || 0)) |\r\n number: '1.0-2' }}</span>\r\n </div>\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'TRIAL'\">\r\n <span class=\"summary-label\">Free Trial</span>\r\n <span class=\"summary-value savings\">\u20B90</span>\r\n </div>\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'TRIAL'\">\r\n <span class=\"summary-label\">Service Charge</span>\r\n <span class=\"summary-value savings\">Free</span>\r\n </div>\r\n <div class=\"summary-row total-row\" *ngIf=\"cartType === 'TRIAL'\">\r\n <span class=\"total-label\">Total Cost</span>\r\n <span class=\"total-value\">\u20B90 </span>\r\n </div>\r\n </div>\r\n <button class=\"place-order-btn\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\r\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n *ngIf=\"cartType === 'SHOPPING'\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\r\n Shopping'}}</button>\r\n <button class=\"place-order-btn mt-0\" (click)=\" proceedToPayment()\" simpoButtonDirective\r\n *ngIf=\"cartType === 'SHOPPING'\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout\r\n Cart'}}</button>\r\n <button class=\"place-order-btn mt-0\" simpoButtonDirective *ngIf=\"cartType === 'TRIAL'\"\r\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\" (click)=\"bookAppointment()\">BOOK\r\n APPOINTMENT</button>\r\n\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #CHECKOUTPAGE>\r\n <div class=\"checkout-left-panel\">\r\n <div class=\"checkout-main-content\">\r\n <!-- <div class=\"delivery-options\">\r\n <div class=\"delivery-option active\">\r\n <div class=\"delivery-icon\"></div>\r\n HOME DELIVERY\r\n </div>\r\n <div class=\"delivery-option\">\r\n <div class=\"delivery-icon\"></div>\r\n STORE PICK-UP\r\n </div>\r\n </div> -->\r\n\r\n <div class=\"section-title\">Shipping Address</div>\r\n\r\n <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\r\n <div class=\"address-info\">\r\n <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\r\n <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\r\n {{defaultAddress?.stateName}}</div>\r\n <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"addLinks h-100\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\r\n <mat-icon>add</mat-icon>\r\n </div>\r\n\r\n <button class=\"change-address-btn\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">CHANGE OR ADD ADDRESS</button>\r\n\r\n <div class=\"btn w-100 mt-1 payment-btn\" (click)=\"proceedToPayment()\" simpoButtonDirective *ngIf=\"defaultAddress\"\r\n [buttonStyle]=\"data?.action?.buttons?.[2]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"styles?.background\">\r\n {{data?.action?.buttons?.[2]?.content?.label ?? 'Procced To Payment'}}\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"checkout-right-panel\">\r\n <div class=\"order-summary\">\r\n <div class=\"summary-title\">Order Summary</div>\r\n\r\n <div class=\"checkout-product\">\r\n <div class=\"product-item\" *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n <img [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-image\"\r\n alt=\"\">\r\n <div class=\"product-details\">\r\n <div class=\"product-name\">{{item.itemName}}</div>\r\n <div class=\"product-quantity\">Quantity: {{item.quantity}}</div>\r\n <div class=\"product-price\">\u20B9{{(item.sellingPrice * item.quantity) | number: '1.0-2'}}</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"price-breakdown\">\r\n <div class=\"price-row\">\r\n <span>Total Price</span>\r\n <span>\u20B9{{(responseData?.billdetails?.totalNetValue\r\n ?? 0) | number: '1.0-2'}}</span>\r\n </div>\r\n <div class=\"price-row\">\r\n <span>Total Tax</span>\r\n <span>\u20B9{{((!responseData.billdetails?.couponId ?\r\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\r\n number:\r\n '1.0-2'}}</span>\r\n </div>\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && cartInfo?.billdetails?.orraSchemeRedeemedAmount\">\r\n <span class=\"summary-label\">Redeem Amount</span>\r\n <span class=\"summary-value\">\u20B9{{(cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\r\n '1.0-2'}}</span>\r\n </div>\r\n\r\n <div class=\"price-row discount\"\r\n *ngIf=\"responseData?.billdetails?.discountAmount && subIndustryName != 'Ecommerce Jewellery'\">\r\n <span>Coupon Discount</span>\r\n <span>- \u20B9{{responseData?.billdetails?.discountAmount\r\n | number: '1.0-2'}}</span>\r\n </div>\r\n <div class=\"price-row\"\r\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n <span>Delivery Charge</span>\r\n <span>{{responseData.billdetails.deliveryCharges\r\n |\r\n number: '1.0-2'}}</span>\r\n </div>\r\n <div class=\"price-row total\">\r\n <span>TOTAL AMOUNT</span>\r\n <span *ngIf=\"!isPointsRedeeming\">\u20B9{{(responseData?.totalAmount ?? 0) | number:\r\n '1.0-2'}}</span>\r\n <span *ngIf=\"isPointsRedeeming\">\u20B9{{(responseData?.totalAmount - (totalSavingAmt || 0)) | number:\r\n '1.0-2'}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #CARTITEM let-products=\"data\">\r\n <div class=\"cart-item\" *ngFor=\"let item of products\" [style.color]=\"fontColor\">\r\n <div class=\"item-image\">\r\n <img class=\"item-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n (click)=\"goToProductDetails(item)\">\r\n </div>\r\n <div class=\"item-details\">\r\n <h3 class=\"item-title\">{{item.itemName}}</h3>\r\n <div class=\"item-price d-flex gap-2 align-items-center\">\r\n <div class=\"d-flex\" [style.color]=\"fontColor\">\r\n <span class=\"current-price\">\u20B9{{item.sellingPrice | number: '1.0-2'}}</span>\r\n <span class=\"original-price\" *ngIf=\"item.value - item.discountedPrice > 2\">\u20B9{{item.value | number:\r\n '1.0-2'}}</span>\r\n <span class=\"discount\" *ngIf=\"item.value - item.discountedPrice > 2\">Save \u20B9{{item.value -\r\n item.sellingPrice | number: '1.0-2'}}</span>\r\n </div>\r\n <div class=\"d-flex fs-13\" [style.color]=\"fontColor\">(Includes all taxes)</div>\r\n </div>\r\n <!-- <div class=\"item-options\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <select name=\"\" id=\"\" (change)=\"changeQuantity($event, item)\" [(ngModel)]=\"item.quantity\">\r\n <option [value]=\"value\" *ngFor=\"let value of quantity\">{{value}}</option>\r\n </select>\r\n </div> -->\r\n <div class=\"add-remove d-flex align-items-center add-to-cart-parent\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <mat-icon (click)=\"decreaseQty(item)\"\r\n class=\"px-2 py-1 d-flex align-items-center justify-content-center fs-18 cursor\"> {{ item.quantity == 1 ?\r\n 'delete' : 'remove' }} </mat-icon>\r\n <span class=\"px-3 py-1 b-1-b\">{{item.quantity}}</span>\r\n <mat-icon (click)=\"increaseQty(item)\"\r\n class=\"px-2 py-1 d-flex align-items-center justify-content-center fs-18 cursor\">add</mat-icon>\r\n </div>\r\n <div class=\"item-options\" *ngIf=\"item.itemVariant\">\r\n <span *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">{{ varient }}: {{\r\n item.itemVariant.properties[varient] | uppercase }}</span>\r\n </div>\r\n <div class=\"delivery-info\" *ngIf=\"cartType === 'SHOPPING' && getUrl()\">Delivery by - Tomorrow 6PM-9PM</div>\r\n <div class=\"delivery-info\" *ngIf=\"cartType === 'TRIAL'\">Available to try from tomorrow</div>\r\n <div class=\"pickup-info\" *ngIf=\"cartType === 'SHOPPING' && getUrl()\">\r\n <span class=\"pickup-text\">\uD83D\uDCCD Pickup today from 6 Stores nearby</span>\r\n <span>\u25B6</span>\r\n </div>\r\n </div>\r\n <!-- <button class=\"remove-btn\" (click)=\"removeItem(item)\">\u2715</button> -->\r\n </div>\r\n\r\n <!-- <div class=\"cart-item\">\r\n <div class=\"item-image\">\r\n <div class=\"chain-icon\">\uD83D\uDD17</div>\r\n </div>\r\n <div class=\"item-details\">\r\n <h3 class=\"item-title\">Lucid Cable Gold Chain</h3>\r\n <div class=\"item-price\">\r\n <span class=\"current-price\">\u20B921,163</span>\r\n </div>\r\n <div class=\"item-options\">\r\n <span>Length: 16</span>\r\n <span>Size: XXL</span>\r\n <span>Color: Black</span>\r\n </div>\r\n <div class=\"delivery-info\">Delivery by - Tomorrow 6PM-9PM</div>\r\n <div class=\"pickup-info\">\r\n <span class=\"pickup-text\">\uD83D\uDCCD Pickup today from 4 Stores nearby</span>\r\n <span>\u25B6</span>\r\n </div>\r\n </div>\r\n <button class=\"remove-btn\">\u2715</button>\r\n </div>\r\n\r\n <div class=\"cart-item\">\r\n <div class=\"item-image\">\r\n <div class=\"chain-icon\">\uD83D\uDD17</div>\r\n </div>\r\n <div class=\"item-details\">\r\n <h3 class=\"item-title\">Lucid Cable Gold Chain</h3>\r\n <div class=\"item-price\">\r\n <span class=\"current-price\">\u20B921,163</span>\r\n </div>\r\n <div class=\"item-options\">\r\n <span>Length: 16</span>\r\n <span>Size: XXL</span>\r\n <span>Color: Black</span>\r\n </div>\r\n <div class=\"delivery-info\">Delivery by - Tomorrow 6PM-9PM</div>\r\n <div class=\"pickup-info\">\r\n <span class=\"pickup-text\">\uD83D\uDCCD Pickup today from 4 Stores nearby</span>\r\n <span>\u25B6</span>\r\n </div>\r\n </div>\r\n <button class=\"remove-btn\">\u2715</button>\r\n </div> -->\r\n</ng-template>\r\n\r\n<ng-template #EMPTYITEM>\r\n <section class=\"empty-cart w-100 d-flex align-items-center justify-content-center\">\r\n <div class=\"empty-cart-container d-flex flex-column\">\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"data?.content?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <div class=\"cart-text content-side\">\r\n <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"d-flex justify-content-center\"\r\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <button class=\"place-order-btn mx-auto w-fit\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\r\n [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\r\n Shopping'}}</button>\r\n </div>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #SCHEME_REDEMPTION>\r\n <div class=\"modal-body\">\r\n <div class=\"scheme-option\" *ngFor=\"let scheme of schemeList\" (click)=\"redeemScheme(scheme, false)\"\r\n [style.borderColor]=\"cartInfo.billdetails.orraSchemeCode ? styles?.background?.color : ''\">\r\n <label for=\"individual\" class=\"scheme-card\">\r\n <div class=\"scheme-info d-flex gap-1\">\r\n <div class=\"form-check-radio\">\r\n <input class=\"form-check-input-radio\" type=\"radio\" name=\"flexRadioDefault\" id=\"flexRadioDefault2\">\r\n </div>\r\n <div class=\"right-side\">\r\n <div class=\"scheme-name\">\r\n <div class=\"scheme-title\">Individual Investment Scheme</div>\r\n <div class=\"scheme-monthly\">\u20B98000/M</div>\r\n </div>\r\n <div class=\"scheme-details\">\r\n <span class=\"scheme-id\">GPP Id: {{scheme.GPPId}}</span>\r\n <!-- <span class=\"scheme-maturity\">Maturity Date: 12 April 2024</span> -->\r\n </div>\r\n <div class=\"scheme-amount\">\u20B9{{scheme.amount}}</div>\r\n </div>\r\n </div>\r\n </label>\r\n </div>\r\n <div class=\"reedem_error d-flex justify-content-center align-items-center\" *ngIf=\"showReedemError\">\r\n Please add more \u20B9{{vaildAmount}} to reedem this scheme\r\n </div>\r\n </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.reedem-section{padding:10px 15px;border-radius:15px;background:#f6f3f9;box-shadow:#b2b2ca80 2px 2px 6px;font-weight:700;font-size:13px}.redeem-section-text{font-size:.9rem;font-weight:700}.form-check-input:checked{background-color:#28a745!important;border-color:#28a745!important}.form-check-input:focus{border-color:#28a745!important;outline:0;box-shadow:none!important}.close-btn{background:none;border:none;font-size:24px;color:#6b7280;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.close-btn:hover{color:#374151}.select_matured_text{font-size:.8rem!important;margin-top:10px;color:#05aacf}.position-relative{position:relative}.cart-parent{display:flex;margin-top:15px}.left-panel{width:65%;padding-right:5rem;border-right:1px solid #E9E9E9}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:#9999994d 2px 2px 6px}.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}.main-content{background:#fff;border-radius:12px;width:66%}.promo-banner{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;box-shadow:#9999994d 2px 2px 6px;border-radius:5px}.promo-text h3{font-size:.9rem!important;margin-bottom:4px}.promo-text p{font-size:1rem;font-size:.9rem!important;margin-bottom:0!important}.see-live-btn{background:#fff;border:1px solid #000;color:#000;padding:8px 16px;border-radius:6px;font-size:12px!important;cursor:pointer;align-items:center;width:max-content!important}.cart-items{padding:20px}.cart-item{display:flex;gap:16px;padding:20px 0;border-bottom:2px solid white;position:relative}.cart-item:last-child{border-bottom:none}.item-image{width:24%;height:154px;border-radius:8px;object-fit:cover;background:#fff;display:flex;align-items:center;justify-content:center}.item-details{flex:1}.item-title{font-size:.9rem;font-weight:500;margin-bottom:8px}.item-price{display:flex;align-items:center;gap:8px;margin-bottom: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:34%}.coupon-section{border-radius:12px;padding:10px 15px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;box-shadow:#b2b2ca80 2px 2px 6px}.scheme-section{border-radius:12px;padding:10px 15px;cursor:pointer;box-shadow:#b2b2ca80 2px 2px 6px}.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:12px;padding:20px;background:#f6f3f9;box-shadow:#b2b2ca80 2px 2px 6px}.summary-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.summary-label{font-size:14px;font-weight:700}.clr-grey{color:#6b7280}.summary-value{font-size:14px}.savings{color:#10b981}.apply-coupon{color:#8b5cf6;cursor:pointer}.free{color:#10b981}.total-row{border-top:2px solid white;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;width:max-content;border-radius:10px}.cart-tabs div{padding:7px 10px;cursor:pointer}.selected-cart-tab{background:#fff;margin:2px;border-radius:10px;color:#000!important}.checkout-main-content{width:50%;padding:30px;border-radius:12px}@media screen and (max-width: 475px){.main-content{padding:0;height:auto!important}.no-items{height:86vh;overflow:hidden;margin:0}.checkout-main-content{width:100%}.container{padding:0!important}.cart-items{padding:10px}.item-image{width:86px;height:86px}.pickup-info{display:none}.container{display:flex;flex-direction:column}.promo-banner{gap:10px}select{width:50%}.main-content,.sidebar{width:100%}}.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)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "directive", type:
|
|
9653
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CartComponent, isStandalone: true, selector: "simpo-cart", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, providers: [MessageService], viewQueries: [{ propertyName: "d2", first: true, predicate: ["d2"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n <ng-container *ngIf=\"data\">\r\n <section [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\"\r\n [attr.class]=\"isMobile ? 'py-5 position-relative' : 'position-relative'\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\"\r\n [ngClass]=\"!responseData?.orderedItems?.length ? 'no-items' : ''\">\r\n <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\"\r\n [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\"\r\n *ngIf=\"responseData?.orderedItems?.length && currentTab === 'ADDRESS'\">\r\n <span class=\"timeline\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline isActive\">Address</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline\" style=\"cursor: auto;\">Payment</span>\r\n </div>\r\n <div class=\"cart-tab-parent w-100\" *ngIf=\"currentTab == 'BAG' && ecomConfigs?.appointmentBookingEnabled\">\r\n <!-- && ecomConfigs?.appointmentBookingEnabled\" -->\r\n <div class=\"cart-tabs\" [id]=\"data?.id\">\r\n <div class=\"selected-cart-tab\" [ngClass]=\"{'selected-cart-tab': cartType==='SHOPPING'}\"\r\n (click)=\"cartType='SHOPPING'\">Shopping Cart ({{responseData?.orderedItems?.length ?? 0}})</div>\r\n <div [ngClass]=\"{'selected-cart-tab': cartType==='TRIAL'}\" (click)=\"cartType='TRIAL'\">Trial Cart\r\n ({{trialCartItem?.length ?? 0}})</div>\r\n </div>\r\n </div>\r\n <div class=\"cart-parent\" [spacingHorizontal]=\"stylesLayout\" *ngIf=\"currentTab === 'BAG'\" [id]=\"data?.id\"\r\n [simpoAnimation]=\"styles?.animation\">\r\n <ng-container>\r\n <ng-container *ngIf=\"cartType === 'SHOPPING'\">\r\n <ng-container\r\n *ngTemplateOutlet=\"(responseData?.orderedItems?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"cartType === 'TRIAL'\">\r\n <ng-container *ngTemplateOutlet=\"(trialCartItem?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex checkoutPage\"\r\n *ngIf=\"(responseData?.orderedItems?.length || 0) > 0 && currentTab === 'ADDRESS'\">\r\n <ng-container *ngTemplateOutlet=\"CHECKOUTPAGE\">\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isEcommerce]=\"true\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n </section>\r\n </ng-container>\r\n <ng-container *ngIf=\"!data\">\r\n <section class=\"cart-window\">\r\n <div class=\"heading-large lh-2 mb-3 header-sec\">\r\n <div class=\"d-flex align-items-center\">\r\n <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\r\n <span>Your Cart</span>\r\n </div>\r\n <div class=\"saving\"></div>\r\n </div>\r\n <div class=\"offers\">\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\r\n <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\r\n <span>Avail Offers / Coupons</span>\r\n </div>\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n <div class=\"small-items\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems\">\r\n <div class=\"small-item\">\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"small-product-img\"\r\n [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n (click)=\"goToProductDetails(item)\">\r\n </div>\r\n <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\r\n <div class=\"small-item-quantity\">\r\n <span class=\"cursor\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\">+</span>\r\n </div>\r\n <div class=\"small-item-price\">\r\n <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.sellingPrice) | number: '1.0-2'}}\r\n </div>\r\n <!-- <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"fotter-sec\">\r\n <div class=\"delivery-add d-flex\">\r\n <mat-icon>home</mat-icon>\r\n <div class=\"address\">Tetsting</div>\r\n </div>\r\n <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span\r\n style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span>\r\n {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\r\n </div>\r\n </section>\r\n </ng-container>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n<ng-template #CouponList>\r\n <section class=\"coupons-listing-section\">\r\n <div class=\"coupon-heading\">\r\n <div class=\"back-btn\" (click)=\"closeDialogRef()\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"header-text\">Apply Coupon</div>\r\n </div>\r\n <!-- <div class=\"coupon-search-sec\">\r\n <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\r\n <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\r\n </div> -->\r\n <div class=\"coupon-listing\">\r\n <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\r\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\r\n <div class=\"coupon-details\"\r\n [ngStyle]=\"{'background-color': !couponDetails.applicable ? '#FFF2F4' : '#EDFFFA'}\"\r\n *ngIf=\"couponDetails?.status\">\r\n <div class=\"details__coupon-heading\">\r\n <div class=\"coupon-brief\">\r\n <div class=\"coupon-brief__left-sec\">\r\n <div class=\"coupon-name\" [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\r\n {{ couponDetails.couponCode | uppercase }}</div>\r\n <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\r\n </div>\r\n <div class=\"coupon-brief__right-sec\">\r\n <div class=\"apply-offer-btn\" [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\r\n [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : ''}\"\r\n (click)=\"applyCoupon(couponDetails)\">Apply</div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\r\n <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\r\n <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\r\n </div> -->\r\n </div>\r\n <ng-container>\r\n <!-- *ngIf=\"couponDetails.status\" -->\r\n <div class=\"details-divider\"></div>\r\n <ul class=\"details__coupon-terms\">\r\n <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\r\n </ul>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #showEmptyScreen>\r\n <div class=\"empty-screen-container\">\r\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n <div class=\"empty-screen__primary-text\">No Coupon Available</div>\r\n <div class=\"empty-screen__secondary-text\">\r\n Looks like there are no coupons at the moment\r\n </div>\r\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\r\n </div>\r\n </ng-template>\r\n </div>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #RedemptionVouchers>\r\n <section class=\"vouchers-listing-section d-flex flex-column\">\r\n <div class=\"coupon-heading d-flex align-items-center gap-2 p-3 fs-18 fw-600 border-bottom\">\r\n <div class=\"back-btn cursor-pointer d-flex align-items-center\" (click)=\"closeDialogRef()\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"header-text\">Coupons & Vouchers</div>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center tab-container justify-content-between gap-2 p-3\">\r\n <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'COUPONS'}\"\r\n (click)=\"redemptionType = 'COUPONS'\">\r\n Coupons\r\n </div>\r\n <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'VOUCHERS'}\"\r\n (click)=\"redemptionType = 'VOUCHERS'\">\r\n Vouchers\r\n </div>\r\n </div>\r\n\r\n <div class=\"coupon-listing d-flex flex-column gap-3 pt-0\" *ngIf=\"redemptionType === 'COUPONS'\">\r\n <div class=\"d-flex align-items-center tab-container gap-3\">\r\n <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\r\n [ngClass]=\"{'active-coupon': redemptionCouponType === 'REWARDS'}\" (click)=\"redemptionCouponType = 'REWARDS'\">\r\n Rewards\r\n </div>\r\n <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\r\n [ngClass]=\"{'active-coupon': redemptionCouponType === 'DISCOUNTS'}\" (click)=\"redemptionCouponType = 'DISCOUNTS'\">\r\n Discounts\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"redemptionCouponType === 'REWARDS'\">\r\n <ng-container *ngIf=\"(listRedemptionCoupons?.vouchers?.length > 0) ; else showEmptyScreen\">\r\n <ng-container *ngFor=\"let voucher of listRedemptionCoupons?.vouchers; let idx = index\">\r\n <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\r\n \r\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\r\n <div class=\"coupon-brief__left-sec\">\r\n <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\r\n <div class=\"coupon-desc fs-12 text-secondary\">\r\n Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%' }}\r\n off on your payment\r\n </div>\r\n </div>\r\n <div class=\"coupon-brief__right-sec\">\r\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">Apply</div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\r\n <div class=\"code-label\">Code</div>\r\n <div class=\"code-value\">{{ voucher.voucherCode }}</div>\r\n </div>\r\n \r\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\r\n <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\r\n <span class=\"separator text-secondary\">|</span>\r\n <span class=\"validity\">\r\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\r\n Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\r\n </span>\r\n <span class=\"separator text-secondary\" *ngIf=\"voucher.maxRedeemableAmount\">|</span>\r\n <span class=\"min-order\" *ngIf=\"voucher.maxRedeemableAmount\">Max Redeemable Amount: \u20B9{{\r\n voucher.maxRedeemableAmount | number }}</span>\r\n </div>\r\n \r\n <!-- <div class=\"terms-link\">View terms & conditions</div> -->\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n \r\n <ng-container *ngIf=\"redemptionCouponType === 'DISCOUNTS'\">\r\n <ng-container *ngIf=\"(couponList.length > 0); else showEmptyDiscounts\">\r\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\r\n <div class=\"voucher-details\" *ngIf=\"couponDetails?.status\">\r\n \r\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\r\n <div class=\"coupon-brief__left-sec\">\r\n <div class=\"coupon-name fs-16 fw-600 mb-1\"\r\n [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\r\n {{ couponDetails.couponCode | uppercase }}\r\n </div>\r\n <div class=\"coupon-desc fs-12 text-secondary\">\r\n {{ couponDetails.discountDescription | titlecase }}\r\n </div>\r\n </div>\r\n <div class=\"coupon-brief__right-sec\">\r\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\"\r\n [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\r\n [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : 'not-allowed'}\"\r\n (click)=\"applyCoupon(couponDetails)\">\r\n Apply\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\r\n <div class=\"code-label\">Code</div>\r\n <div class=\"code-value\">{{ couponDetails.couponCode | uppercase }}</div>\r\n </div>\r\n \r\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\r\n <span class=\"validity\">\r\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\r\n {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}\r\n </span>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #showEmptyDiscounts>\r\n <div class=\"empty-screen-container\">\r\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n <div class=\"empty-screen__primary-text\">No Discount Coupons Available</div>\r\n <div class=\"empty-screen__secondary-text\">\r\n Looks like there are no discount coupons at the moment\r\n </div>\r\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #showEmptyScreen>\r\n <div class=\"empty-screen-container\">\r\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n <div class=\"empty-screen__primary-text\">No Coupons Available</div>\r\n <div class=\"empty-screen__secondary-text\">Looks like there are no coupons</div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n <div class=\"coupon-listing d-flex flex-column gap-3\" *ngIf=\"redemptionType === 'VOUCHERS'\">\r\n <ng-container *ngIf=\"listRedemptionVouchers?.vouchers?.length > 0; else showEmptyScreen\">\r\n <ng-container *ngFor=\"let voucher of listRedemptionVouchers?.vouchers; let idx = index\">\r\n <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\r\n\r\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\r\n <div class=\"coupon-brief__left-sec\">\r\n <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\r\n <div class=\"coupon-desc fs-12 text-secondary\">\r\n Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%' }}\r\n off on your payment\r\n </div>\r\n </div>\r\n <div class=\"coupon-brief__right-sec\">\r\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">Apply</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\r\n <div class=\"code-label\">Code</div>\r\n <div class=\"code-value\">{{ voucher.voucherCode }}</div>\r\n </div>\r\n\r\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\r\n <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\r\n <span class=\"separator text-secondary\">|</span>\r\n <span class=\"validity\">\r\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\r\n Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\r\n </span>\r\n </div>\r\n\r\n <!-- <div class=\"terms-link\">View terms & conditions</div> -->\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #showEmptyScreen>\r\n <div class=\"empty-screen-container\">\r\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n <div class=\"empty-screen__primary-text\">No Vouchers Available</div>\r\n <div class=\"empty-screen__secondary-text\">Looks like there are no vouchers</div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #CARTPAGE>\r\n <div class=\"container\">\r\n <div class=\"main-content\">\r\n <div class=\"promo-banner mb-3\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && ecomConfigs?.videoCallEnabled\">\r\n <!-- && ecomConfigs?.videoCallEnabled\" -->\r\n <div class=\"promo-text\">\r\n <h3>See It Before You Buy It</h3>\r\n <p>Experience our designs in detail via video call</p>\r\n </div>\r\n <button class=\"see-live-btn\" (click)=\"scheduleVideoCall(responseData?.orderedItems)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-video\">\r\n <path d=\"m22 8-6 4 6 4V8Z\" />\r\n <rect width=\"14\" height=\"12\" x=\"2\" y=\"6\" rx=\"2\" ry=\"2\" />\r\n </svg>\r\n SEE IT LIVE\r\n </button>\r\n </div>\r\n\r\n <div class=\"cart-items\">\r\n <div class=\"cart-header\">\r\n <h2>Your Cart</h2>\r\n </div>\r\n <ng-container\r\n *ngTemplateOutlet=\"CARTITEM;context:{data: cartType === 'SHOPPING' ? responseData?.orderedItems : trialCartItem}\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"sidebar\">\r\n <div class=\"reedem-section d-flex flex-column align-items-center\" *ngIf=\"cartType != 'TRIAL' && getUrl()\">\r\n <div class=\"justify-content-between d-flex align-items-center w-100 redeem-section-text\">Redeem Section Amount\r\n <div class=\"toogle-switch\">\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" role=\"switch\" id=\"flexSwitchCheckChecked\"\r\n [checked]=\"selectMatureScheme\" (change)=\"onToggleChange()\">\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"select_matured_text w-100 text-start cursor-pointer\"\r\n *ngIf=\"selectMatureScheme && !selectedRedemption\" (click)=\"selectScheme()\">\r\n Select Matured Scheme\r\n </div> -->\r\n <!-- <div class=\"select_matured_text d-flex flex-column gap-2 w-100 text-start cursor-pointer\"\r\n *ngIf=\"selectedRedemption\">\r\n Selected Scheme\r\n <div class=\"d-flex w-100 justify-content-between align-items-center group_invest\">Group Investment\r\n scheme-5000/M <span>Change</span></div>\r\n <div class=\"d-flex justify-content-between align-items-center w-100 redeem_amount\">Redeemable Amount\r\n <span>\u20B9{{selectedRedmpationData.selectedAmount}}</span>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div class=\"scheme-section\" *ngIf=\"selectMatureScheme\">\r\n <ng-container *ngTemplateOutlet=\"SCHEME_REDEMPTION\"></ng-container>\r\n </div>\r\n <div class=\"coupon-section\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && !referEarnExist\" (click)=\"openDialog(CouponList)\">\r\n <div class=\"coupon-left\">\r\n <div class=\"coupon-icon\"><mat-icon>percent</mat-icon></div>\r\n <span class=\"coupon-text\" *ngIf=\"!responseData.billdetails?.couponId\">Apply\r\n Coupon</span>\r\n <span class=\"coupon-text\" *ngIf=\"responseData.billdetails?.couponId\">Coupon\r\n Applied</span>\r\n </div>\r\n <svg *ngIf=\"!responseData.billdetails?.couponId\" xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\"\r\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" class=\"chevron-icon\">\r\n <path d=\"m9 18 6-6-6-6\" />\r\n </svg>\r\n <span *ngIf=\"responseData.billdetails?.couponId\"\r\n (click)=\"removeCoupon($event)\"><mat-icon>close</mat-icon></span>\r\n </div>\r\n\r\n <div class=\"plan-details-container p-3 rounded-4 bg-white text-dark voucher-details\" *ngIf=\"referEarnExist\">\r\n <div class=\"fs-14 fw-500\">\r\n Rewards Available\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-start border-bottom pb-2\">\r\n <div class=\"avb_pts mt-2 mb-2\">\r\n <span class=\"fs-16 fw-500 total_points text-secondary\">\r\n <span class=\" fs-18 fw-600 text-dark\">{{this?.redemptionPoints?.availablePoints || 0}}</span> pts\r\n </span>\r\n <div class=\"total_value fs-12 text-secondary\">\r\n = max \u20B9{{this?.redemptionPoints?.pointsConvertedRupees || 0}} discount\r\n </div>\r\n </div>\r\n <div class=\"wallte_icon\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/777779c1775200561187wallet_(1).png\" alt=\"\">\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center mt-3\" *ngIf=\"this?.redemptionPoints?.availablePoints != 0\">\r\n <div class=\"redemable_text\">\r\n <div class=\"title_text\">\r\n <div class=\"fs-14 fw-500\">\r\n Redeem Points\r\n </div>\r\n <div class=\"fs-13 fs-400\">\r\n Use your points for discount\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"toggle_btn\">\r\n <label class=\"switch\">\r\n <input type=\"checkbox\" id=\"toggleSwitch\" [checked]=\"isPointsRedeeming\" (click)=\"onPointsRedeemingChange($event)\" />\r\n <span class=\"slider\"></span>\r\n </label>\r\n </div>\r\n </div>\r\n <div class=\"mt-3 success_selected w-100 applied-coupon-card\" *ngIf=\"isPointsRedeeming\">\r\n <div class=\"d-flex align-items-start gap-2\">\r\n <div class=\"success_icon\">\r\n <mat-icon class=\"d-flex justify-content-center align-items-center text-success\">check_circle</mat-icon>\r\n </div>\r\n <div class=\"success_text\">\r\n <div class=\"fs-13 fw-500\">\r\n You're saving \u20B9\r\n {{totalSavingAmt || 0}}\r\n </div>\r\n <div class=\"fs-12 fs-400 text-success\">\r\n {{totalSavingPoints}} points remaining after redemption\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Existing coupon row (keep as-is) -->\r\n <div class=\"coupon-section d-flex flex-column voucher-details\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && referEarnExist\">\r\n <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n <div class=\"coupon-left\" >\r\n Apply Coupon\r\n </div>\r\n <div\r\n (click)=\"addRedemptionCoupon(RedemptionVouchers)\">View All</div>\r\n </div>\r\n \r\n <!-- Applied Coupon Success Banner -->\r\n <div class=\"applied-coupon-card w-100 mt-3 d-flex align-items-center justify-content-between\" *ngIf=\"selectedVoucherId\">\r\n <div class=\"applied-coupon-left d-flex align-items-center gap-3\">\r\n <mat-icon class=\"success-check\">check_circle</mat-icon>\r\n <div class=\"applied-coupon-info\">\r\n <div class=\"applied-coupon-code\">Coupon {{ selectedVoucherCode }} applied!</div>\r\n <div class=\"applied-coupon-saving\">You're saving\r\n <span *ngIf=\"this.couponValueType === 'AMOUNT'\">\u20B9 {{selectedVoucherAmount || 0}}</span>\r\n <span *ngIf=\"this.couponValueType === 'PERCENTAGE'\"> {{selectedVoucherPercentage || 0}}%</span>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div class=\"remove-coupon-btn fs-14 fw-500 text-secondary cursor-pointer\" (click)=\"removeRedemptionCoupon($event)\">Remove</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"delivery-section\" *ngIf=\"getUrl()\">\r\n <div class=\"delivery-header\">\r\n <mat-icon>gps_fixed</mat-icon>\r\n <span *ngIf=\"cartType === 'SHOPPING'\">Delivering to</span>\r\n <span *ngIf=\"cartType === 'TRIAL'\">Trial Location at</span>\r\n <span class=\"pincode\">{{pincode}}</span>\r\n <!-- <a class=\"change-link\">Change Pincode</a> -->\r\n </div>\r\n </div>\r\n\r\n <div class=\"summary-section\">\r\n <div class=\"summary-title\">Summary</div>\r\n\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span class=\"summary-label\">Subtotal</span>\r\n <span class=\"summary-value\">\u20B9{{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</span>\r\n </div>\r\n\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && referEarnExist && isPointsRedeeming\">\r\n <span class=\"summary-label\">Points Redeemed</span>\r\n <span class=\"summary-value\">- \u20B9{{ totalSavingAmt || 0 }}</span>\r\n </div>\r\n\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'AMOUNT' && appliedVoucher)\">\r\n <span class=\"summary-label\">Voucher Applied</span>\r\n <span class=\"summary-value\">- \u20B9{{ selectedVoucherAmount || 0 }}</span>\r\n </div>\r\n\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'PERCENTAGE' && appliedVoucher)\">\r\n <span class=\"summary-label\">Voucher Applied</span>\r\n <span class=\"summary-value\">- \u20B9{{ percentageReduced || 0 }}</span>\r\n </div>\r\n\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span class=\"summary-label\">Shipping</span>\r\n <span class=\"summary-value\"\r\n [ngClass]=\"{'savings': !responseData?.billdetails?.deliveryCharges || responseData.billdetails.deliveryCharges <= 0}\">\r\n {{ (responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0) ? ('\u20B9' +\r\n (responseData.billdetails.deliveryCharges | number: '1.0-2')) : 'Free' }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span class=\"summary-label\">Estimated Tax</span>\r\n <span class=\"summary-value\">\u20B9{{((!responseData.billdetails?.couponId ?\r\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\r\n number: '1.0-2'}}</span>\r\n </div>\r\n\r\n <div class=\"summary-row total-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span class=\"summary-label\">Total</span>\r\n <span class=\"summary-value\">\u20B9{{ responseData?.totalAmount | number: '1.0-2' }}</span>\r\n </div>\r\n\r\n <!-- Trial Cart Summary -->\r\n <ng-container *ngIf=\"cartType === 'TRIAL'\">\r\n <div class=\"summary-row\">\r\n <span class=\"summary-label\">Free Trial</span>\r\n <span class=\"summary-value\">\u20B90</span>\r\n </div>\r\n <div class=\"summary-row\">\r\n <span class=\"summary-label\">Service Charge</span>\r\n <span class=\"summary-value savings\">Free</span>\r\n </div>\r\n <div class=\"summary-divider\"></div>\r\n <div class=\"summary-row total-row\">\r\n <span class=\"summary-label\">Total</span>\r\n <span class=\"summary-value\">\u20B90</span>\r\n </div>\r\n <span class=\"total-value\" *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{ responseData?.totalAmount |\r\n number: '1.0-2' }}</span>\r\n \r\n <span class=\"total-value\" *ngIf=\"isPointsRedeeming\">\u20B9{{ (responseData?.totalAmount - (totalSavingAmt || 0)) |\r\n number: '1.0-2' }}</span>\r\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount - (selectedVoucherAmount || 0)) | number:\r\n '1.0-2'}}</span>\r\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount - (percentageReduced || 0)) | number:\r\n '1.0-2' }}</span>\r\n </ng-container>\r\n </div>\r\n <button class=\"place-order-btn\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\r\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n *ngIf=\"cartType === 'SHOPPING'\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\r\n Shopping'}}</button>\r\n <button class=\"place-order-btn mt-0\" (click)=\"edit ? '' : proceedToPayment()\" simpoButtonDirective\r\n *ngIf=\"cartType === 'SHOPPING'\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout\r\n Cart'}}</button>\r\n <button class=\"place-order-btn mt-0\" simpoButtonDirective *ngIf=\"cartType === 'TRIAL'\"\r\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\" (click)=\"bookAppointment()\">BOOK\r\n APPOINTMENT</button>\r\n\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #CHECKOUTPAGE>\r\n <div class=\"checkout-left-panel\">\r\n <div class=\"checkout-main-content\">\r\n <!-- <div class=\"delivery-options\">\r\n <div class=\"delivery-option active\">\r\n <div class=\"delivery-icon\"></div>\r\n HOME DELIVERY\r\n </div>\r\n <div class=\"delivery-option\">\r\n <div class=\"delivery-icon\"></div>\r\n STORE PICK-UP\r\n </div>\r\n </div> -->\r\n\r\n <div class=\"section-title\">Shipping Address</div>\r\n\r\n <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\r\n <div class=\"address-info\">\r\n <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\r\n <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\r\n {{defaultAddress?.stateName}}</div>\r\n <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"addLinks h-100\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\r\n <mat-icon>add</mat-icon>\r\n </div>\r\n\r\n <button class=\"change-address-btn\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">CHANGE OR ADD ADDRESS</button>\r\n\r\n <div class=\"btn w-100 mt-1 payment-btn\" (click)=\"proceedToPayment()\" simpoButtonDirective *ngIf=\"defaultAddress\"\r\n [buttonStyle]=\"data?.action?.buttons?.[2]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"styles?.background\">\r\n {{data?.action?.buttons?.[2]?.content?.label ?? 'Procced To Payment'}}\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"checkout-right-panel\">\r\n <div class=\"order-summary\">\r\n <div class=\"summary-title\">Order Summary</div>\r\n\r\n <div class=\"checkout-product\">\r\n <div class=\"product-item\" *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n <img [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-image\"\r\n alt=\"\">\r\n <div class=\"product-details\">\r\n <div class=\"product-name\">{{item.itemName}}</div>\r\n <div class=\"product-quantity\">Quantity: {{item.quantity}}</div>\r\n <div class=\"product-price\">\u20B9{{(item.sellingPrice * item.quantity) | number: '1.0-2'}}</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"price-breakdown\">\r\n <div class=\"price-row\">\r\n <span>Total Price</span>\r\n <span>\u20B9{{(responseData?.billdetails?.totalNetValue\r\n ?? 0) | number: '1.0-2'}}</span>\r\n </div>\r\n <div class=\"price-row\">\r\n <span>Total Tax</span>\r\n <span>\u20B9{{((!responseData.billdetails?.couponId ?\r\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\r\n number:\r\n '1.0-2'}}</span>\r\n </div>\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && cartInfo?.billdetails?.orraSchemeRedeemedAmount\">\r\n <span class=\"summary-label\">Redeem Amount</span>\r\n <span class=\"summary-value\">\u20B9{{(cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\r\n '1.0-2'}}</span>\r\n </div>\r\n\r\n <div class=\"price-row discount\"\r\n *ngIf=\"responseData?.billdetails?.discountAmount && subIndustryName != 'Ecommerce Jewellery'\">\r\n <span>Coupon Discount</span>\r\n <span>- \u20B9{{responseData?.billdetails?.discountAmount\r\n | number: '1.0-2'}}</span>\r\n </div>\r\n <div class=\"price-row\"\r\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n <span>Delivery Charge</span>\r\n <span>{{responseData.billdetails.deliveryCharges\r\n |\r\n number: '1.0-2'}}</span>\r\n </div>\r\n <div class=\"price-row total\">\r\n <span>TOTAL AMOUNT</span>\r\n <span *ngIf=\"!isPointsRedeeming\">\u20B9{{(responseData?.totalAmount ?? 0) | number:\r\n '1.0-2'}}</span>\r\n <span *ngIf=\"isPointsRedeeming\">\u20B9{{(responseData?.totalAmount - (totalSavingAmt || 0)) | number:\r\n '1.0-2'}}</span>\r\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount - (selectedVoucherAmount || 0)) | number:\r\n '1.0-2'}}</span> \r\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount - (responseData?.totalAmount * (selectedVoucherPercentage / 100) || 0)) | number:\r\n '1.0-2' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #CARTITEM let-products=\"data\">\r\n <div class=\"cart-item\" *ngFor=\"let item of products\" [style.color]=\"fontColor\">\r\n <div class=\"item-left\">\r\n <div class=\"item-image\">\r\n <img class=\"item-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n (click)=\"goToProductDetails(item)\" style=\"cursor: pointer;\">\r\n </div>\r\n <div class=\"item-details\">\r\n <h3 class=\"item-title\">{{item.itemName}}</h3>\r\n <div class=\"item-subtitle\" *ngIf=\"item.itemVariant\">\r\n <span *ngFor=\"let varient of getKeys(item.itemVariant.properties); let last = last\">\r\n {{ item.itemVariant.properties[varient] | titlecase }}<span *ngIf=\"!last\">, </span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"item-right\">\r\n <div class=\"quantity-control\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <button class=\"qty-btn px-2\" (click)=\"decreaseQty(item)\" [disabled]=\"item.quantity === 1\">\r\n <mat-icon>remove</mat-icon>\r\n </button>\r\n <span class=\"qty-value px-3\">{{item.quantity}}</span>\r\n <button class=\"qty-btn px-2\" (click)=\"increaseQty(item)\">\r\n <mat-icon>add</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"item-price\">\r\n \u20B9{{item.sellingPrice | number: '1.0-2'}}\r\n </div>\r\n\r\n <div class=\"delete-btn-circle\" (click)=\"removeItem(item)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trash-2\">\r\n <path d=\"M3 6h18\" />\r\n <path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\" />\r\n <path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\" />\r\n <line x1=\"10\" x2=\"10\" y1=\"11\" y2=\"17\" />\r\n <line x1=\"14\" x2=\"14\" y1=\"11\" y2=\"17\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #EMPTYITEM>\r\n <section class=\"empty-cart w-100 d-flex align-items-center justify-content-center\">\r\n <div class=\"empty-cart-container d-flex flex-column\">\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"data?.content?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <div class=\"cart-text content-side\">\r\n <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"d-flex justify-content-center\"\r\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <button class=\"place-order-btn mx-auto w-fit\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\r\n [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\r\n Shopping'}}</button>\r\n </div>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #SCHEME_REDEMPTION>\r\n <div class=\"modal-body\">\r\n <div class=\"scheme-option\" *ngFor=\"let scheme of schemeList\" (click)=\"redeemScheme(scheme, false)\"\r\n [style.borderColor]=\"cartInfo.billdetails.orraSchemeCode ? styles?.background?.color : ''\">\r\n <label for=\"individual\" class=\"scheme-card\">\r\n <div class=\"scheme-info d-flex gap-1\">\r\n <div class=\"form-check-radio\">\r\n <input class=\"form-check-input-radio\" type=\"radio\" name=\"flexRadioDefault\" id=\"flexRadioDefault2\">\r\n </div>\r\n <div class=\"right-side\">\r\n <div class=\"scheme-name\">\r\n <div class=\"scheme-title\">Individual Investment Scheme</div>\r\n <div class=\"scheme-monthly\">\u20B98000/M</div>\r\n </div>\r\n <div class=\"scheme-details\">\r\n <span class=\"scheme-id\">GPP Id: {{scheme.GPPId}}</span>\r\n <!-- <span class=\"scheme-maturity\">Maturity Date: 12 April 2024</span> -->\r\n </div>\r\n <div class=\"scheme-amount\">\u20B9{{scheme.amount}}</div>\r\n </div>\r\n </div>\r\n </label>\r\n </div>\r\n <div class=\"reedem_error d-flex justify-content-center align-items-center\" *ngIf=\"showReedemError\">\r\n Please add more \u20B9{{vaildAmount}} to reedem this scheme\r\n </div>\r\n </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.reedem-section{padding:10px 15px;border-radius:15px;background:#f6f3f9;box-shadow:#b2b2ca80 2px 2px 6px;font-weight:700;font-size:13px}.redeem-section-text{font-size:.9rem;font-weight:700}.form-check-input:checked{background-color:#28a745!important;border-color:#28a745!important}.form-check-input:focus{border-color:#28a745!important;outline:0;box-shadow:none!important}.close-btn{background:none;border:none;font-size:24px;color:#6b7280;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.close-btn:hover{color:#374151}.select_matured_text{font-size:.8rem!important;margin-top:10px;color:#05aacf}.position-relative{position:relative}.cart-parent{display:flex;margin-top:15px}.left-panel{width:65%;padding-right:5rem;border-right:1px solid #E9E9E9}.timeline{cursor:pointer}.cart-items{background:#fff;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.cart-header{padding:16px 24px;border-bottom:1px solid #e2e8f0;background:#f8fafc}.cart-header h2{margin:0;font-size:18px;font-weight:500;color:#0f172a}.cart-item{display:flex!important;align-items:center;justify-content:space-between;border-bottom:1px solid #e2e8f0;gap:20px;padding:0 8px;transition:background .2s}.cart-item:hover{background:#fbfcfe}.item-left{display:flex;align-items:center;flex:1}.item-right{display:flex;align-items:center;padding:15px;gap:32px}.item-image img{width:64px;height:64px;border-radius:12px;object-fit:cover;border:1px solid #f1f5f9}.item-details{display:flex;flex-direction:column;gap:4px}.item-title{margin:0;font-size:15px;font-weight:600;color:#0f172a;line-height:1.4}.item-subtitle{font-size:13px;color:#64748b;font-weight:400}.quantity-control{display:flex;align-items:center;border:1.5px solid #e2e8f0;border-radius:7px;overflow:hidden;height:38px;background:#fff;width:fit-content}.qty-btn{width:38px;height:100%;border:none;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#475569;transition:all .2s ease}.qty-btn:hover{background:#f8fafc;color:#0f172a}.qty-btn mat-icon{font-size:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center}.qty-value{width:32px;height:100%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;color:#0f172a;border-left:1.5px solid #e2e8f0;border-right:1.5px solid #e2e8f0}.item-price{font-size:18px;font-weight:700;color:#0f172a;min-width:60px;text-align:right;letter-spacing:-.01em}.delete-btn-circle{width:36px;height:36px;border-radius:50%;border:1px solid #fee2e2;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#ef4444;transition:all .2s ease}.delete-btn-circle:hover{background:#fef2f2;border-color:#fecaca;transform:scale(1.05);color:#dc2626}.delete-btn-circle svg{width:18px;height:18px}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%;padding-left:5rem}.my-bag{font-size:16px;font-weight:600;color:#000;margin-left:8px}.my-bag span{color:#939393}.coupons{display:flex;justify-content:space-between;padding:10px;border-radius:4px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px;margin-top:10px;cursor:pointer}.coupon-list-section{padding:15px;width:400px;z-index:10000001!important}.coupon-list-section .search{padding:8px;border:1px solid lightgray;border-radius:20px;display:flex;justify-content:space-between}.coupon-list-section input{border:none;outline:none;width:90%}.coupon-list-section .coupon-list{height:60vh;width:100%}.item-parent{margin:10px 0;min-height:120px}.lh-23{line-height:23px;margin-left:10px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0;cursor:pointer}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer;font-size:18px}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important;height:calc(100vh - 170px)}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;width:100%;text-align:center}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff;cursor:pointer}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.see-live-btn{white-space:nowrap!important}.left-panel{width:100%;padding-right:0rem}.right-panel{width:100%;z-index:1000;padding-left:0rem}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap;display:none}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}.empty-cart-container{height:calc(100vh - 130px)}.coupons-listing-section{width:100vw!important}.checkoutPage{flex-direction:column}.checkout-left-panel,.checkout-right-panel{width:100%!important}}.mobile-fixed{color:#fff}.coupons-listing-section{height:100vh;padding-top:0;position:relative;width:390px;z-index:100;background:#d3d3d354}.coupons-listing-section .coupon-heading{display:flex;align-items:center;background-color:#fff;padding:15px 20px;width:100%;box-sizing:border-box}.coupons-listing-section .coupon-heading img{height:15px;width:15px;position:relative;top:2px;cursor:pointer}.coupons-listing-section .coupon-heading .header-text{font-size:16px;color:#000;font-weight:600;margin-left:15px;position:relative;top:-3px;right:15px;cursor:pointer}.coupons-listing-section .coupon-search-sec{width:90%;box-sizing:border-box;margin:10px auto;border:1px solid lightgray;padding:10px;border-radius:10px;background-color:#fff;display:flex;font-size:16px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec input{border:none;outline:none;background-color:transparent;width:95%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-search-sec input:focus{font-size:14px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec .back-btn{position:relative;top:3px;cursor:pointer}.coupons-listing-section .coupon-search-sec .apply-btn-search{font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing{height:72%;overflow-y:auto;width:90%;margin:20px auto}.coupons-listing-section .coupon-listing .coupon-details{padding:15px;margin-bottom:15px;background-color:#edfffa;border-radius:10px;border:1px solid lightgray}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading{display:flex;flex-direction:column;gap:25px}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief{display:flex;justify-content:space-between;width:100%}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-name{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-desc{padding:5px 0;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .show-details-btn{cursor:pointer}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec{display:flex;justify-content:flex-end}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec .apply-offer-btn{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-toggle-details-btn{text-align:left;text-decoration:underline;width:100%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details-divider{border-top:2px solid lightgray;opacity:.3;margin:15px 0}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-terms{font-size:14px;color:#000;font-weight:400}.empty-screen-container{height:100%;width:85%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-screen-container .empty-screen__primary-text{font-size:22px;color:#000;font-weight:400}.empty-screen-container .empty-screen__secondary-text{text-align:center;padding:10px 0;font-size:16px;color:#000;font-weight:400}.empty-screen-container .empty-screen__button{width:90%;background-color:#fff;border-radius:8px;text-align:center;padding:10px;margin:10px auto 0;cursor:pointer;font-size:18px;color:#000;font-weight:400}.box-shadow{box-shadow:#00000029 0 1px 4px}.main-content{border-radius:12px;padding:0 30px 30px;width:100%;overflow:scroll;height:calc(100vh - 150px)}.delivery-options{display:flex;gap:20px;margin-bottom:30px}.delivery-option{padding:12px 24px;border:2px solid #e0e0e0;border-radius:25px;background:#fff;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:500;transition:all .2s}.delivery-option.active{background:#f0e6ff;border-color:#8b5cf6;color:#7c3aed}.delivery-option:hover{border-color:silver}.delivery-icon{width:16px;height:16px;background:#8b5cf6;border-radius:3px}.section-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.shipping-info{border-radius:10px;padding:20px;margin-bottom:20px;border:1px solid rgb(238,232,255);box-shadow:#0000000a 0 4px 8px}.delivery-date{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.delivery-date-text{color:#666;font-weight:500}.change-date-btn{color:#e91e63;background:none;border:none;font-weight:600;cursor:pointer;text-transform:uppercase;font-size:12px;letter-spacing:.5px}.address-info{margin-bottom:15px}.address-name{font-weight:700;margin-bottom:8px;color:#000}.address-details{color:#666;margin-bottom:8px}.mobile-number{font-weight:700;color:#000;font-size:15px}.change-address-btn{font-size:1rem!important;font-weight:700!important;padding:6px;background:#fff;border:1px solid rgb(229,221,255);border-radius:8px;color:#000;cursor:pointer;transition:all .2s;box-shadow:#0000000a 0 4px 8px}.change-address-btn:hover{border-color:#8b5cf6;color:#8b5cf6}.billing-section{margin-top:40px}.billing-options{display:flex;flex-direction:column;gap:15px;margin-top:20px}.billing-option{display:flex;align-items:center;gap:12px;padding:15px;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .2s}.billing-option.active{background:#f0e6ff;border-color:#8b5cf6}.radio-btn{width:20px;height:20px;border:2px solid #e0e0e0;border-radius:50%;position:relative}.billing-option.active .radio-btn{border-color:#8b5cf6}.billing-option.active .radio-btn:after{content:\"\";width:10px;height:10px;background:#8b5cf6;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.order-summary{border-radius:12px;padding:25px;width:75%}.summary-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.product-item{display:flex;gap:15px;margin-bottom:20px;border-bottom:1px solid #f0f0f0;border-radius:7px;background:#fff;padding:15px}.product-item:last-of-type{border-bottom:none;margin-bottom:30px;padding-bottom:0}.product-image{max-width:110px;width:100%;height:100%;border-radius:8px}.product-details{flex:1}.product-name{font-weight:500;margin-bottom:4px;color:#2d3748;font-size:14px}.product-quantity{color:#666;font-size:12px;margin-bottom:8px}.product-price{font-weight:600;color:#2d3748}.delivery-info{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:#8b5cf6}.delivery-icon-small{width:12px;height:12px;background:#8b5cf6;border-radius:2px}.price-breakdown{border-top:1px solid #f0f0f0;padding-top:20px}.price-row{display:flex;justify-content:space-between;margin-bottom:12px;color:#666}.price-row.total{font-weight:600;color:#2d3748;font-size:16px;margin-top:15px;padding-top:15px;border-top:1px solid #f0f0f0}.discount{color:#22c55e!important}@media (max-width: 768px){.container{grid-template-columns:1fr;padding:15px;gap:20px}.main-content,.order-summary{padding:20px;width:100%}.delivery-options{flex-direction:column;gap:10px}}.checkout-left-panel{width:65%;display:flex;justify-content:center}.checkout-right-panel{width:35%;display:flex;justify-content:center;background-color:#f9f9fa}.checkout-product{max-height:50vh;overflow:scroll}.mt-1{margin-top:1rem!important}.payment-btn{box-shadow:#0000000a 0 4px 8px}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px;height:25vh!important;margin-bottom:20px}.addLinks mat-icon{border:1px solid rgb(219,223,225);display:flex;border-radius:100%;align-items:center;justify-content:center;font-size:16px;color:#dbdfe1}.change-pincode{display:flex;gap:10px}.change-pincode mat-icon{font-size:18px;align-items:center;justify-content:center;display:flex}.change-pincode span{font-size:14px}.fs-13{font-size:13px}.fs-12{font-size:12px}.fs-18{font-size:18px}.b-1-b{border-width:0px 1px;border-style:solid;border-color:#000}.container{max-width:unset;padding:24px;display:flex;gap:24px}.main-content{background:#fff;border-radius:12px;width:75%}.promo-banner{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;border-radius:8px;border:1px solid #e2e8f0}.promo-text h3{font-size:16px!important;font-weight:500;margin-bottom:4px}.promo-text p{font-size:.9rem!important;margin-bottom:0!important;color:#64748b}.see-live-btn{background:#fff;border:1px solid #e2e8f0;font-weight:600;color:#000;padding:8px 16px;border-radius:8px;font-size:12px!important;cursor:pointer;display:flex;align-items:center;gap:8px;width:max-content!important;transition:all .2s ease;box-shadow:0 1px 2px #0000000d}.see-live-btn:hover{background:#f8fafc;border-color:#cbd5e1;transform:translateY(-1px)}.see-live-btn svg{color:#6366f1}.cart-item{display:flex;gap:16px;position:relative}.cart-item:last-child{border-bottom:none}.item-image{width:15%;height:100px;border-radius:8px;object-fit:cover;display:flex;align-items:center;justify-content:center}.item-details{flex:1}.item-title{font-weight:500;margin-bottom:8px}.item-price{display:flex;align-items:center;gap:8px}.current-price{font-size:1rem;font-weight:600}.original-price{font-size:1rem;text-decoration:line-through}.discount{background:#fef3c7;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:500}.item-code{font-size:12px;color:#9ca3af;margin-bottom:8px}.item-options{display:flex;gap:16px;font-size:14px;color:#6b7280;margin-bottom:12px}.delivery-info{font-size:12px;color:#8b5cf6}.pickup-info{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:5px 15px;margin-top:12px;display:flex;align-items:center;cursor:pointer;width:max-content;gap:20px}.pickup-text{font-size:.9rem;color:#374151}.remove-btn{position:absolute;top:16px;right:0;width:20px!important;height:20px;background:#000;color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px!important}.sidebar{display:flex;flex-direction:column;gap:16px;width:25%}.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%}}.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}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "directive", type:
|
|
9542
9654
|
//DIRECTIVE
|
|
9543
|
-
ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i8$4.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }
|
|
9655
|
+
ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i8$4.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }] }); }
|
|
9544
9656
|
}
|
|
9545
9657
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CartComponent, decorators: [{
|
|
9546
9658
|
type: Component,
|
|
@@ -9566,7 +9678,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
9566
9678
|
MatIconModule,
|
|
9567
9679
|
ButtonEditorDirective,
|
|
9568
9680
|
ColorDirective
|
|
9569
|
-
], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n <ng-container *ngIf=\"data\">\r\n <section [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\"\r\n [attr.class]=\"isMobile ? 'py-5 position-relative' : 'position-relative'\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\"\r\n [ngClass]=\"!responseData?.orderedItems?.length ? 'no-items' : ''\">\r\n <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\"\r\n [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\"\r\n *ngIf=\"responseData?.orderedItems?.length && currentTab === 'ADDRESS'\">\r\n <span class=\"timeline\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline isActive\">Address</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline\" style=\"cursor: auto;\">Payment</span>\r\n </div>\r\n <div class=\"cart-tab-parent w-100\" *ngIf=\"currentTab == 'BAG' && ecomConfigs?.appointmentBookingEnabled\">\r\n <div class=\"cart-tabs\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n <div class=\"selected-cart-tab\" [ngClass]=\"{'selected-cart-tab': cartType==='SHOPPING'}\"\r\n (click)=\"cartType='SHOPPING'\">Shopping Cart ({{responseData?.orderedItems?.length ?? 0}})</div>\r\n <div [ngClass]=\"{'selected-cart-tab': cartType==='TRIAL'}\" (click)=\"cartType='TRIAL'\">Trial Cart\r\n ({{trialCartItem?.length ?? 0}})</div>\r\n </div>\r\n </div>\r\n <div class=\"cart-parent\" [spacingHorizontal]=\"stylesLayout\" *ngIf=\"currentTab === 'BAG'\" [id]=\"data?.id\"\r\n [simpoAnimation]=\"styles?.animation\">\r\n <ng-container>\r\n <!-- <div class=\"left-panel\">\r\n <div class=\"my-bag\">\r\n My Bag <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n </div>\r\n <div class=\"cart-items box-shadow\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n <div class=\"item-parent d-flex\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n alt=\"\" (click)=\"goToProductDetails(item)\">\r\n </div>\r\n <div class=\"col-md-6 h-100\" [style.width.px]=\"isMobile ? '200' : ''\" style=\"margin-left: px;\">\r\n <div class=\"lh-23\">\r\n <div class=\"item-name trim-text heading-large\">{{item.itemName}}</div>\r\n <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.discountedPrice ?? item.sellingPrice) | number:\r\n '1.0-2'}}\r\n </div>\r\n <ng-container *ngIf=\"item.itemVariant\">\r\n <div class=\"d-flex align-items-center\"\r\n *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\r\n <strong class=\"fw-bold\">{{ varient }} : </strong>\r\n {{ item.itemVariant.properties[varient] | uppercase }}\r\n </div>\r\n </ng-container>\r\n <div class=\"item-quantity\">\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4 position-relative\" style=\"margin-left: auto; width: 0px; \">\r\n <div class=\"item-price\"><span [innerHTML]='currency'></span> {{((item.discountedPrice ??\r\n item.sellingPrice) * item.quantity) | number: '1.0-2'}}</div>\r\n <div>\r\n <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\"\r\n [style.right.px]=\"isMobile ? '5' : '0'\">delete</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n </ng-container>\r\n </div>\r\n </div> -->\r\n <!-- <div class=\"right-panel\">\r\n <div class=\"coupons box-shadow\" (click)=\"openDialog(CouponList)\">\r\n <ng-container *ngIf=\"!responseData.billdetails?.couponId\">\r\n <div class=\"d-flex flex-column\">\r\n <span style=\"font-weight: 600;\">Apply Coupon</span>\r\n <span style=\"font-size: 13px;\">Save more with coupon and offers</span>\r\n </div>\r\n <div [style.color]=\"styles?.background?.accentColor\" style=\"font-weight: 600;\">Apply</div>\r\n </ng-container>\r\n <ng-container *ngIf=\"responseData.billdetails?.couponId\">\r\n <div class=\"d-flex flex-column\">\r\n <span style=\"font-weight: 600;\">Coupon</span>\r\n <span style=\"font-size: 13px;\">Save more with coupon and offers</span>\r\n </div>\r\n <div [style.color]=\"styles?.background?.accentColor\" (click)=\"removeCoupon($event)\">Remove</div>\r\n </ng-container>\r\n </div>\r\n <div class=\"price-details box-shadow\">\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\">Total Price</div>\r\n <div class=\"price-value\"><span [innerHTML]='currency'></span>\r\n {{(responseData?.billdetails?.totalNetValue\r\n ?? 0) | number: '1.0-2'}}</div>\r\n </div>\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\">Total Tax</div>\r\n <div class=\"price-value\"><span [innerHTML]='currency'></span> {{((!responseData.billdetails?.couponId ?\r\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\r\n number:\r\n '1.0-2'}}</div>\r\n </div>\r\n <div class=\"price-parent-block\"\r\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n <div class=\"price-type\">Delivery Charge</div>\r\n <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges\r\n |\r\n number: '1.0-2'}}</div>\r\n </div>\r\n <div class=\"price-parent-block\"\r\n *ngIf=\"responseData?.billdetails?.discountAmount && subIndustryName != 'Ecommerce Jewellery'\">\r\n <div class=\"price-type\">Discount Amount</div>\r\n <div class=\"price-value\"><span [innerHtml]='currency'></span>\r\n {{responseData?.billdetails?.discountAmount\r\n | number: '1.0-2'}}</div>\r\n </div>\r\n <hr>\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span>\r\n {{((responseData?.totalAmount ?? 0) - (responseData?.billdetails?.discountAmount ?? 0)) | number:\r\n '1.0-2'}}</div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"button-parent\">\r\n <ng-container>\r\n <button class=\"btn mobile-fixed\" (click)=\"!edit ? proceedToCheckout() : ''\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\">{{data?.action?.buttons?.[0]?.content?.label ??\r\n 'Checkout\r\n Cart'}}\r\n </button>\r\n <button class=\"btn\" (click)=\"!edit ? proceedToListPage() : ''\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(1)\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\r\n Shopping'}}</button>\r\n </ng-container>\r\n </div>\r\n\r\n </div> -->\r\n <ng-container *ngIf=\"cartType === 'SHOPPING'\">\r\n <ng-container\r\n *ngTemplateOutlet=\"(responseData?.orderedItems?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"cartType === 'TRIAL'\">\r\n <ng-container *ngTemplateOutlet=\"(trialCartItem?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\r\n </ng-container>\r\n <!-- <ng-container *ngTemplateOutlet=\"CARTPAGE\"></ng-container> -->\r\n </ng-container>\r\n <!-- <ng-container *ngIf=\"(responseData?.orderedItems?.length || 0) > 0 && cartType==='TRIAL'\">\r\n <ng-container *ngTemplateOutlet=\"TRIAL_CART\">\r\n </ng-container>\r\n </ng-container> -->\r\n </div>\r\n <div class=\"d-flex checkoutPage\"\r\n *ngIf=\"(responseData?.orderedItems?.length || 0) > 0 && currentTab === 'ADDRESS'\">\r\n <ng-container *ngTemplateOutlet=\"CHECKOUTPAGE\">\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isEcommerce]=\"true\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n </section>\r\n </ng-container>\r\n <ng-container *ngIf=\"!data\">\r\n <section class=\"cart-window\">\r\n <div class=\"heading-large lh-2 mb-3 header-sec\">\r\n <div class=\"d-flex align-items-center\">\r\n <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\r\n <span>Your Cart</span>\r\n </div>\r\n <div class=\"saving\"></div>\r\n </div>\r\n <div class=\"offers\">\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\r\n <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\r\n <span>Avail Offers / Coupons</span>\r\n </div>\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n <div class=\"small-items\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems\">\r\n <div class=\"small-item\">\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"small-product-img\"\r\n [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n (click)=\"goToProductDetails(item)\">\r\n </div>\r\n <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\r\n <div class=\"small-item-quantity\">\r\n <span class=\"cursor\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\">+</span>\r\n </div>\r\n <div class=\"small-item-price\">\r\n <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.sellingPrice) | number: '1.0-2'}}\r\n </div>\r\n <!-- <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"fotter-sec\">\r\n <div class=\"delivery-add d-flex\">\r\n <mat-icon>home</mat-icon>\r\n <div class=\"address\">Tetsting</div>\r\n </div>\r\n <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span\r\n style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span>\r\n {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\r\n </div>\r\n </section>\r\n </ng-container>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n<ng-template #CouponList>\r\n <section class=\"coupons-listing-section\">\r\n <div class=\"coupon-heading\">\r\n <div class=\"back-btn\" (click)=\"closeDialogRef()\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"header-text\">Apply Coupon</div>\r\n </div>\r\n <!-- <div class=\"coupon-search-sec\">\r\n <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\r\n <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\r\n </div> -->\r\n <div class=\"coupon-listing\">\r\n <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\r\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\r\n <div class=\"coupon-details\"\r\n [ngStyle]=\"{'background-color': !couponDetails.applicable ? '#FFF2F4' : '#EDFFFA'}\"\r\n *ngIf=\"couponDetails?.status\">\r\n <div class=\"details__coupon-heading\">\r\n <div class=\"coupon-brief\">\r\n <div class=\"coupon-brief__left-sec\">\r\n <div class=\"coupon-name\" [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\r\n {{ couponDetails.couponCode | uppercase }}</div>\r\n <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\r\n </div>\r\n <div class=\"coupon-brief__right-sec\">\r\n <div class=\"apply-offer-btn\" [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\r\n [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : ''}\"\r\n (click)=\"applyCoupon(couponDetails)\">Apply</div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\r\n <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\r\n <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\r\n </div> -->\r\n </div>\r\n <ng-container>\r\n <!-- *ngIf=\"couponDetails.status\" -->\r\n <div class=\"details-divider\"></div>\r\n <ul class=\"details__coupon-terms\">\r\n <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\r\n </ul>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #showEmptyScreen>\r\n <div class=\"empty-screen-container\">\r\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n <div class=\"empty-screen__primary-text\">No Coupon Available</div>\r\n <div class=\"empty-screen__secondary-text\">\r\n Looks like there are no coupons at the moment\r\n </div>\r\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\r\n </div>\r\n </ng-template>\r\n </div>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #CARTPAGE>\r\n <div class=\"container\">\r\n <div class=\"main-content\">\r\n <div class=\"promo-banner\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"\r\n *ngIf=\"cartType === 'SHOPPING' && ecomConfigs?.videoCallEnabled\" [simpoColor]=\"styles?.background?.color\">\r\n <div class=\"promo-text\">\r\n <h3>See It Before You Buy It</h3>\r\n <p>Experience our designs in detail via video call</p>\r\n </div>\r\n <button class=\"see-live-btn\" (click)=\"scheduleVideoCall(responseData?.orderedItems)\">\r\n \uD83D\uDCF9 SEE IT LIVE\r\n </button>\r\n </div>\r\n\r\n <div class=\"cart-items\" [style.background]=\"accentBackground\">\r\n <ng-container\r\n *ngTemplateOutlet=\"CARTITEM;context:{data: cartType === 'SHOPPING' ? responseData?.orderedItems : trialCartItem}\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"sidebar\">\r\n <div class=\"reedem-section d-flex flex-column align-items-center\" *ngIf=\"cartType != 'TRIAL' && getUrl()\">\r\n <div class=\"justify-content-between d-flex align-items-center w-100 redeem-section-text\">Redeem Section Amount\r\n <div class=\"toogle-switch\">\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" role=\"switch\" id=\"flexSwitchCheckChecked\"\r\n [checked]=\"selectMatureScheme\" (change)=\"onToggleChange()\">\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"select_matured_text w-100 text-start cursor-pointer\"\r\n *ngIf=\"selectMatureScheme && !selectedRedemption\" (click)=\"selectScheme()\">\r\n Select Matured Scheme\r\n </div> -->\r\n <!-- <div class=\"select_matured_text d-flex flex-column gap-2 w-100 text-start cursor-pointer\"\r\n *ngIf=\"selectedRedemption\">\r\n Selected Scheme\r\n <div class=\"d-flex w-100 justify-content-between align-items-center group_invest\">Group Investment\r\n scheme-5000/M <span>Change</span></div>\r\n <div class=\"d-flex justify-content-between align-items-center w-100 redeem_amount\">Redeemable Amount\r\n <span>\u20B9{{selectedRedmpationData.selectedAmount}}</span>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div class=\"scheme-section\" *ngIf=\"selectMatureScheme\">\r\n <ng-container *ngTemplateOutlet=\"SCHEME_REDEMPTION\"></ng-container>\r\n </div>\r\n <div class=\"coupon-section\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING'\" (click)=\"openDialog(CouponList)\"\r\n [simpoColor]=\"styles?.background?.color\" [style.background]=\"accentBackground\">\r\n <div class=\"coupon-left\">\r\n <div class=\"coupon-icon\" [style.color]=\"fontColor\"><mat-icon>percent</mat-icon></div>\r\n <span class=\"coupon-text\" *ngIf=\"!responseData.billdetails?.couponId\" [style.color]=\"fontColor\">Apply\r\n Coupon</span>\r\n <span class=\"coupon-text\" *ngIf=\"responseData.billdetails?.couponId\" [style.color]=\"fontColor\">Coupon\r\n Applied</span>\r\n </div>\r\n <span *ngIf=\"!responseData.billdetails?.couponId\" [style.color]=\"fontColor\">\u25B6</span>\r\n <span *ngIf=\"responseData.billdetails?.couponId\" (click)=\"removeCoupon($event)\"\r\n [style.color]=\"fontColor\"><mat-icon>close</mat-icon></span>\r\n </div>\r\n\r\n <div class=\"plan-details-container p-3 rounded-4\" *ngIf=\"referEarnExist\"\r\n [simpoColor]=\"styles?.background?.color\" [style.background]=\"accentBackground\">\r\n <div class=\"coupon-text\" [style.color]=\"fontColor\">\r\n AVAILABLE REWARDS\r\n </div>\r\n <div class=\"bb-dashed\"></div>\r\n <div class=\"mt-2 mb-2 d-flex justify-content-between align-items-center\">\r\n <div class=\"points_value\">\r\n <div class=\"avb_pts d-flex gap-1 align-items-center\" [style.color]=\"fontColor\">\r\n <span class=\"fs-18 fw-600 total_points\">\r\n {{this?.redemptionPoints?.availablePoints || 0}} pts\r\n </span>\r\n <div class=\"total_value fs-14\" [style.color]=\"fontColor\">\r\n = max \u20B9{{this?.redemptionPoints?.pointsConvertedRupees || 0}} discount\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"bb-dashed\"></div>\r\n <div class=\"d-flex justify-content-between align-items-center mt-2\">\r\n <div class=\"redemable_text\">\r\n <div class=\"title_text\">\r\n <div class=\"fs-14 fw-500\" [style.color]=\"fontColor\">\r\n Redeem Points\r\n </div>\r\n <div class=\"fs-13 fs-400\" [style.color]=\"fontColor\">\r\n Use your points for discount\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"toggle_btn\">\r\n <label class=\"switch\">\r\n <input type=\"checkbox\" id=\"toggleSwitch\" [(ngModel)]=\"isPointsRedeeming\" />\r\n <span class=\"slider\"></span>\r\n </label>\r\n </div>\r\n </div>\r\n <div class=\"mt-2 success_selected w-100\" *ngIf=\"isPointsRedeeming\">\r\n <div class=\"d-flex align-items-start gap-2\">\r\n <div class=\"success_icon\">\r\n <mat-icon class=\"d-flex justify-content-center align-items-center\"\r\n [style.color]=\"fontColor\">check_circle</mat-icon>\r\n </div>\r\n <div class=\"success_text\">\r\n <div class=\"fs-13 fw-500\" [style.color]=\"fontColor\">\r\n You're saving \u20B9\r\n {{totalSavingAmt || 0}}\r\n </div>\r\n <div class=\"fs-12 fs-400\" [style.color]=\"fontColor\">\r\n {{totalSavingPoints}} points remaining after redemption\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"delivery-section\" *ngIf=\"getUrl()\">\r\n <div class=\"delivery-header\">\r\n <mat-icon>gps_fixed</mat-icon>\r\n <span *ngIf=\"cartType === 'SHOPPING'\">Delivering to</span>\r\n <span *ngIf=\"cartType === 'TRIAL'\">Trial Location at</span>\r\n <span class=\"pincode\">{{pincode}}</span>\r\n <!-- <a class=\"change-link\">Change Pincode</a> -->\r\n </div>\r\n </div>\r\n\r\n <div class=\"summary-section\" [style.background]=\"accentBackground\" [style.color]=\"fontColor\">\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <div class=\"d-flex flex-column\">\r\n <span class=\"summary-label\">Total Price</span>\r\n <span class=\"fs-12\">(Excludes all taxes)</span>\r\n </div>\r\n <span class=\"summary-value\">\u20B9{{(responseData?.billdetails?.totalNetValue\r\n ?? 0) | number: '1.0-2'}}</span>\r\n </div>\r\n\r\n\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.taxBreakup?.sgstValue\">\r\n <span class=\"summary-label\">SGST</span>\r\n <span class=\"summary-value\">\u20B9{{ responseData?.billdetails?.taxBreakup?.sgstValue | number: '1.0-2'}}</span>\r\n </div>\r\n\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.taxBreakup?.cgstValue\">\r\n <span class=\"summary-label\">CGST</span>\r\n <span class=\"summary-value\">\u20B9{{ responseData?.billdetails?.taxBreakup?.cgstValue | number: '1.0-2'}}</span>\r\n </div>\r\n\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && referEarnExist && isPointsRedeeming\">\r\n <span class=\"summary-label\">Points Redeemed</span>\r\n <span class=\"summary-value\">- \u20B9{{ totalSavingAmt || 0 }}</span>\r\n </div>\r\n\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span class=\"summary-label\">Total Tax</span>\r\n <span class=\"summary-value\">\u20B9{{((!responseData.billdetails?.couponId ?\r\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\r\n number:\r\n '1.0-2'}}</span>\r\n </div>\r\n\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && cartInfo?.billdetails?.orraSchemeRedeemedAmount\">\r\n <span class=\"summary-label\">Redeem Amount</span>\r\n <span class=\"summary-value\">\u20B9{{(cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\r\n '1.0-2'}}</span>\r\n </div>\r\n <div class=\"summary-row\"\r\n *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n <span class=\"summary-label\">Delivery Charge</span>\r\n <span class=\"summary-value\">\u20B9{{responseData.billdetails.deliveryCharges\r\n |\r\n number: '1.0-2'}}</span>\r\n </div>\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.discountAmount \">\r\n <span class=\"summary-label\">Discount Amount</span>\r\n <span class=\"summary-value savings\"> \u20B9{{responseData?.billdetails?.discountAmount\r\n | number: '1.0-2'}}</span>\r\n </div>\r\n <!-- <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span class=\"summary-label\">Coupon Discount</span>\r\n <span class=\"summary-value apply-coupon\">Apply Coupon</span>\r\n </div> -->\r\n <!-- <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span class=\"summary-label\">Shipping (Standard)</span>\r\n <span class=\"summary-value free\">Free</span>\r\n </div> -->\r\n <div class=\"summary-row total-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <div class=\"d-flex flex-column\">\r\n <span class=\"total-label\">Total Cost</span>\r\n <span class=\"fs-12\">(Inclusive of all taxes)</span>\r\n </div>\r\n <span class=\"total-value\" *ngIf=\"!isPointsRedeeming\">\u20B9{{ responseData?.totalAmount |\r\n number: '1.0-2' }}</span>\r\n \r\n <span class=\"total-value\" *ngIf=\"isPointsRedeeming\">\u20B9{{ (responseData?.totalAmount - (totalSavingAmt || 0)) |\r\n number: '1.0-2' }}</span>\r\n </div>\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'TRIAL'\">\r\n <span class=\"summary-label\">Free Trial</span>\r\n <span class=\"summary-value savings\">\u20B90</span>\r\n </div>\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'TRIAL'\">\r\n <span class=\"summary-label\">Service Charge</span>\r\n <span class=\"summary-value savings\">Free</span>\r\n </div>\r\n <div class=\"summary-row total-row\" *ngIf=\"cartType === 'TRIAL'\">\r\n <span class=\"total-label\">Total Cost</span>\r\n <span class=\"total-value\">\u20B90 </span>\r\n </div>\r\n </div>\r\n <button class=\"place-order-btn\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\r\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n *ngIf=\"cartType === 'SHOPPING'\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\r\n Shopping'}}</button>\r\n <button class=\"place-order-btn mt-0\" (click)=\" proceedToPayment()\" simpoButtonDirective\r\n *ngIf=\"cartType === 'SHOPPING'\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout\r\n Cart'}}</button>\r\n <button class=\"place-order-btn mt-0\" simpoButtonDirective *ngIf=\"cartType === 'TRIAL'\"\r\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\" (click)=\"bookAppointment()\">BOOK\r\n APPOINTMENT</button>\r\n\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #CHECKOUTPAGE>\r\n <div class=\"checkout-left-panel\">\r\n <div class=\"checkout-main-content\">\r\n <!-- <div class=\"delivery-options\">\r\n <div class=\"delivery-option active\">\r\n <div class=\"delivery-icon\"></div>\r\n HOME DELIVERY\r\n </div>\r\n <div class=\"delivery-option\">\r\n <div class=\"delivery-icon\"></div>\r\n STORE PICK-UP\r\n </div>\r\n </div> -->\r\n\r\n <div class=\"section-title\">Shipping Address</div>\r\n\r\n <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\r\n <div class=\"address-info\">\r\n <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\r\n <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\r\n {{defaultAddress?.stateName}}</div>\r\n <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"addLinks h-100\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\r\n <mat-icon>add</mat-icon>\r\n </div>\r\n\r\n <button class=\"change-address-btn\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">CHANGE OR ADD ADDRESS</button>\r\n\r\n <div class=\"btn w-100 mt-1 payment-btn\" (click)=\"proceedToPayment()\" simpoButtonDirective *ngIf=\"defaultAddress\"\r\n [buttonStyle]=\"data?.action?.buttons?.[2]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"styles?.background\">\r\n {{data?.action?.buttons?.[2]?.content?.label ?? 'Procced To Payment'}}\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"checkout-right-panel\">\r\n <div class=\"order-summary\">\r\n <div class=\"summary-title\">Order Summary</div>\r\n\r\n <div class=\"checkout-product\">\r\n <div class=\"product-item\" *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n <img [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-image\"\r\n alt=\"\">\r\n <div class=\"product-details\">\r\n <div class=\"product-name\">{{item.itemName}}</div>\r\n <div class=\"product-quantity\">Quantity: {{item.quantity}}</div>\r\n <div class=\"product-price\">\u20B9{{(item.sellingPrice * item.quantity) | number: '1.0-2'}}</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"price-breakdown\">\r\n <div class=\"price-row\">\r\n <span>Total Price</span>\r\n <span>\u20B9{{(responseData?.billdetails?.totalNetValue\r\n ?? 0) | number: '1.0-2'}}</span>\r\n </div>\r\n <div class=\"price-row\">\r\n <span>Total Tax</span>\r\n <span>\u20B9{{((!responseData.billdetails?.couponId ?\r\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\r\n number:\r\n '1.0-2'}}</span>\r\n </div>\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && cartInfo?.billdetails?.orraSchemeRedeemedAmount\">\r\n <span class=\"summary-label\">Redeem Amount</span>\r\n <span class=\"summary-value\">\u20B9{{(cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\r\n '1.0-2'}}</span>\r\n </div>\r\n\r\n <div class=\"price-row discount\"\r\n *ngIf=\"responseData?.billdetails?.discountAmount && subIndustryName != 'Ecommerce Jewellery'\">\r\n <span>Coupon Discount</span>\r\n <span>- \u20B9{{responseData?.billdetails?.discountAmount\r\n | number: '1.0-2'}}</span>\r\n </div>\r\n <div class=\"price-row\"\r\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n <span>Delivery Charge</span>\r\n <span>{{responseData.billdetails.deliveryCharges\r\n |\r\n number: '1.0-2'}}</span>\r\n </div>\r\n <div class=\"price-row total\">\r\n <span>TOTAL AMOUNT</span>\r\n <span *ngIf=\"!isPointsRedeeming\">\u20B9{{(responseData?.totalAmount ?? 0) | number:\r\n '1.0-2'}}</span>\r\n <span *ngIf=\"isPointsRedeeming\">\u20B9{{(responseData?.totalAmount - (totalSavingAmt || 0)) | number:\r\n '1.0-2'}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #CARTITEM let-products=\"data\">\r\n <div class=\"cart-item\" *ngFor=\"let item of products\" [style.color]=\"fontColor\">\r\n <div class=\"item-image\">\r\n <img class=\"item-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n (click)=\"goToProductDetails(item)\">\r\n </div>\r\n <div class=\"item-details\">\r\n <h3 class=\"item-title\">{{item.itemName}}</h3>\r\n <div class=\"item-price d-flex gap-2 align-items-center\">\r\n <div class=\"d-flex\" [style.color]=\"fontColor\">\r\n <span class=\"current-price\">\u20B9{{item.sellingPrice | number: '1.0-2'}}</span>\r\n <span class=\"original-price\" *ngIf=\"item.value - item.discountedPrice > 2\">\u20B9{{item.value | number:\r\n '1.0-2'}}</span>\r\n <span class=\"discount\" *ngIf=\"item.value - item.discountedPrice > 2\">Save \u20B9{{item.value -\r\n item.sellingPrice | number: '1.0-2'}}</span>\r\n </div>\r\n <div class=\"d-flex fs-13\" [style.color]=\"fontColor\">(Includes all taxes)</div>\r\n </div>\r\n <!-- <div class=\"item-options\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <select name=\"\" id=\"\" (change)=\"changeQuantity($event, item)\" [(ngModel)]=\"item.quantity\">\r\n <option [value]=\"value\" *ngFor=\"let value of quantity\">{{value}}</option>\r\n </select>\r\n </div> -->\r\n <div class=\"add-remove d-flex align-items-center add-to-cart-parent\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <mat-icon (click)=\"decreaseQty(item)\"\r\n class=\"px-2 py-1 d-flex align-items-center justify-content-center fs-18 cursor\"> {{ item.quantity == 1 ?\r\n 'delete' : 'remove' }} </mat-icon>\r\n <span class=\"px-3 py-1 b-1-b\">{{item.quantity}}</span>\r\n <mat-icon (click)=\"increaseQty(item)\"\r\n class=\"px-2 py-1 d-flex align-items-center justify-content-center fs-18 cursor\">add</mat-icon>\r\n </div>\r\n <div class=\"item-options\" *ngIf=\"item.itemVariant\">\r\n <span *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">{{ varient }}: {{\r\n item.itemVariant.properties[varient] | uppercase }}</span>\r\n </div>\r\n <div class=\"delivery-info\" *ngIf=\"cartType === 'SHOPPING' && getUrl()\">Delivery by - Tomorrow 6PM-9PM</div>\r\n <div class=\"delivery-info\" *ngIf=\"cartType === 'TRIAL'\">Available to try from tomorrow</div>\r\n <div class=\"pickup-info\" *ngIf=\"cartType === 'SHOPPING' && getUrl()\">\r\n <span class=\"pickup-text\">\uD83D\uDCCD Pickup today from 6 Stores nearby</span>\r\n <span>\u25B6</span>\r\n </div>\r\n </div>\r\n <!-- <button class=\"remove-btn\" (click)=\"removeItem(item)\">\u2715</button> -->\r\n </div>\r\n\r\n <!-- <div class=\"cart-item\">\r\n <div class=\"item-image\">\r\n <div class=\"chain-icon\">\uD83D\uDD17</div>\r\n </div>\r\n <div class=\"item-details\">\r\n <h3 class=\"item-title\">Lucid Cable Gold Chain</h3>\r\n <div class=\"item-price\">\r\n <span class=\"current-price\">\u20B921,163</span>\r\n </div>\r\n <div class=\"item-options\">\r\n <span>Length: 16</span>\r\n <span>Size: XXL</span>\r\n <span>Color: Black</span>\r\n </div>\r\n <div class=\"delivery-info\">Delivery by - Tomorrow 6PM-9PM</div>\r\n <div class=\"pickup-info\">\r\n <span class=\"pickup-text\">\uD83D\uDCCD Pickup today from 4 Stores nearby</span>\r\n <span>\u25B6</span>\r\n </div>\r\n </div>\r\n <button class=\"remove-btn\">\u2715</button>\r\n </div>\r\n\r\n <div class=\"cart-item\">\r\n <div class=\"item-image\">\r\n <div class=\"chain-icon\">\uD83D\uDD17</div>\r\n </div>\r\n <div class=\"item-details\">\r\n <h3 class=\"item-title\">Lucid Cable Gold Chain</h3>\r\n <div class=\"item-price\">\r\n <span class=\"current-price\">\u20B921,163</span>\r\n </div>\r\n <div class=\"item-options\">\r\n <span>Length: 16</span>\r\n <span>Size: XXL</span>\r\n <span>Color: Black</span>\r\n </div>\r\n <div class=\"delivery-info\">Delivery by - Tomorrow 6PM-9PM</div>\r\n <div class=\"pickup-info\">\r\n <span class=\"pickup-text\">\uD83D\uDCCD Pickup today from 4 Stores nearby</span>\r\n <span>\u25B6</span>\r\n </div>\r\n </div>\r\n <button class=\"remove-btn\">\u2715</button>\r\n </div> -->\r\n</ng-template>\r\n\r\n<ng-template #EMPTYITEM>\r\n <section class=\"empty-cart w-100 d-flex align-items-center justify-content-center\">\r\n <div class=\"empty-cart-container d-flex flex-column\">\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"data?.content?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <div class=\"cart-text content-side\">\r\n <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"d-flex justify-content-center\"\r\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <button class=\"place-order-btn mx-auto w-fit\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\r\n [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\r\n Shopping'}}</button>\r\n </div>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #SCHEME_REDEMPTION>\r\n <div class=\"modal-body\">\r\n <div class=\"scheme-option\" *ngFor=\"let scheme of schemeList\" (click)=\"redeemScheme(scheme, false)\"\r\n [style.borderColor]=\"cartInfo.billdetails.orraSchemeCode ? styles?.background?.color : ''\">\r\n <label for=\"individual\" class=\"scheme-card\">\r\n <div class=\"scheme-info d-flex gap-1\">\r\n <div class=\"form-check-radio\">\r\n <input class=\"form-check-input-radio\" type=\"radio\" name=\"flexRadioDefault\" id=\"flexRadioDefault2\">\r\n </div>\r\n <div class=\"right-side\">\r\n <div class=\"scheme-name\">\r\n <div class=\"scheme-title\">Individual Investment Scheme</div>\r\n <div class=\"scheme-monthly\">\u20B98000/M</div>\r\n </div>\r\n <div class=\"scheme-details\">\r\n <span class=\"scheme-id\">GPP Id: {{scheme.GPPId}}</span>\r\n <!-- <span class=\"scheme-maturity\">Maturity Date: 12 April 2024</span> -->\r\n </div>\r\n <div class=\"scheme-amount\">\u20B9{{scheme.amount}}</div>\r\n </div>\r\n </div>\r\n </label>\r\n </div>\r\n <div class=\"reedem_error d-flex justify-content-center align-items-center\" *ngIf=\"showReedemError\">\r\n Please add more \u20B9{{vaildAmount}} to reedem this scheme\r\n </div>\r\n </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.reedem-section{padding:10px 15px;border-radius:15px;background:#f6f3f9;box-shadow:#b2b2ca80 2px 2px 6px;font-weight:700;font-size:13px}.redeem-section-text{font-size:.9rem;font-weight:700}.form-check-input:checked{background-color:#28a745!important;border-color:#28a745!important}.form-check-input:focus{border-color:#28a745!important;outline:0;box-shadow:none!important}.close-btn{background:none;border:none;font-size:24px;color:#6b7280;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.close-btn:hover{color:#374151}.select_matured_text{font-size:.8rem!important;margin-top:10px;color:#05aacf}.position-relative{position:relative}.cart-parent{display:flex;margin-top:15px}.left-panel{width:65%;padding-right:5rem;border-right:1px solid #E9E9E9}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:#9999994d 2px 2px 6px}.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}.main-content{background:#fff;border-radius:12px;width:66%}.promo-banner{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;box-shadow:#9999994d 2px 2px 6px;border-radius:5px}.promo-text h3{font-size:.9rem!important;margin-bottom:4px}.promo-text p{font-size:1rem;font-size:.9rem!important;margin-bottom:0!important}.see-live-btn{background:#fff;border:1px solid #000;color:#000;padding:8px 16px;border-radius:6px;font-size:12px!important;cursor:pointer;align-items:center;width:max-content!important}.cart-items{padding:20px}.cart-item{display:flex;gap:16px;padding:20px 0;border-bottom:2px solid white;position:relative}.cart-item:last-child{border-bottom:none}.item-image{width:24%;height:154px;border-radius:8px;object-fit:cover;background:#fff;display:flex;align-items:center;justify-content:center}.item-details{flex:1}.item-title{font-size:.9rem;font-weight:500;margin-bottom:8px}.item-price{display:flex;align-items:center;gap:8px;margin-bottom: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:34%}.coupon-section{border-radius:12px;padding:10px 15px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;box-shadow:#b2b2ca80 2px 2px 6px}.scheme-section{border-radius:12px;padding:10px 15px;cursor:pointer;box-shadow:#b2b2ca80 2px 2px 6px}.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:12px;padding:20px;background:#f6f3f9;box-shadow:#b2b2ca80 2px 2px 6px}.summary-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.summary-label{font-size:14px;font-weight:700}.clr-grey{color:#6b7280}.summary-value{font-size:14px}.savings{color:#10b981}.apply-coupon{color:#8b5cf6;cursor:pointer}.free{color:#10b981}.total-row{border-top:2px solid white;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;width:max-content;border-radius:10px}.cart-tabs div{padding:7px 10px;cursor:pointer}.selected-cart-tab{background:#fff;margin:2px;border-radius:10px;color:#000!important}.checkout-main-content{width:50%;padding:30px;border-radius:12px}@media screen and (max-width: 475px){.main-content{padding:0;height:auto!important}.no-items{height:86vh;overflow:hidden;margin:0}.checkout-main-content{width:100%}.container{padding:0!important}.cart-items{padding:10px}.item-image{width:86px;height:86px}.pickup-info{display:none}.container{display:flex;flex-direction:column}.promo-banner{gap:10px}select{width:50%}.main-content,.sidebar{width:100%}}.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)}\n"] }]
|
|
9681
|
+
], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n <ng-container *ngIf=\"data\">\r\n <section [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\"\r\n [attr.class]=\"isMobile ? 'py-5 position-relative' : 'position-relative'\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\"\r\n [ngClass]=\"!responseData?.orderedItems?.length ? 'no-items' : ''\">\r\n <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\"\r\n [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\"\r\n *ngIf=\"responseData?.orderedItems?.length && currentTab === 'ADDRESS'\">\r\n <span class=\"timeline\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline isActive\">Address</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline\" style=\"cursor: auto;\">Payment</span>\r\n </div>\r\n <div class=\"cart-tab-parent w-100\" *ngIf=\"currentTab == 'BAG' && ecomConfigs?.appointmentBookingEnabled\">\r\n <!-- && ecomConfigs?.appointmentBookingEnabled\" -->\r\n <div class=\"cart-tabs\" [id]=\"data?.id\">\r\n <div class=\"selected-cart-tab\" [ngClass]=\"{'selected-cart-tab': cartType==='SHOPPING'}\"\r\n (click)=\"cartType='SHOPPING'\">Shopping Cart ({{responseData?.orderedItems?.length ?? 0}})</div>\r\n <div [ngClass]=\"{'selected-cart-tab': cartType==='TRIAL'}\" (click)=\"cartType='TRIAL'\">Trial Cart\r\n ({{trialCartItem?.length ?? 0}})</div>\r\n </div>\r\n </div>\r\n <div class=\"cart-parent\" [spacingHorizontal]=\"stylesLayout\" *ngIf=\"currentTab === 'BAG'\" [id]=\"data?.id\"\r\n [simpoAnimation]=\"styles?.animation\">\r\n <ng-container>\r\n <ng-container *ngIf=\"cartType === 'SHOPPING'\">\r\n <ng-container\r\n *ngTemplateOutlet=\"(responseData?.orderedItems?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"cartType === 'TRIAL'\">\r\n <ng-container *ngTemplateOutlet=\"(trialCartItem?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex checkoutPage\"\r\n *ngIf=\"(responseData?.orderedItems?.length || 0) > 0 && currentTab === 'ADDRESS'\">\r\n <ng-container *ngTemplateOutlet=\"CHECKOUTPAGE\">\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isEcommerce]=\"true\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n </section>\r\n </ng-container>\r\n <ng-container *ngIf=\"!data\">\r\n <section class=\"cart-window\">\r\n <div class=\"heading-large lh-2 mb-3 header-sec\">\r\n <div class=\"d-flex align-items-center\">\r\n <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\r\n <span>Your Cart</span>\r\n </div>\r\n <div class=\"saving\"></div>\r\n </div>\r\n <div class=\"offers\">\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\r\n <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\r\n <span>Avail Offers / Coupons</span>\r\n </div>\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n <div class=\"small-items\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems\">\r\n <div class=\"small-item\">\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"small-product-img\"\r\n [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n (click)=\"goToProductDetails(item)\">\r\n </div>\r\n <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\r\n <div class=\"small-item-quantity\">\r\n <span class=\"cursor\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\">+</span>\r\n </div>\r\n <div class=\"small-item-price\">\r\n <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.sellingPrice) | number: '1.0-2'}}\r\n </div>\r\n <!-- <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"fotter-sec\">\r\n <div class=\"delivery-add d-flex\">\r\n <mat-icon>home</mat-icon>\r\n <div class=\"address\">Tetsting</div>\r\n </div>\r\n <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span\r\n style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span>\r\n {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\r\n </div>\r\n </section>\r\n </ng-container>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n<ng-template #CouponList>\r\n <section class=\"coupons-listing-section\">\r\n <div class=\"coupon-heading\">\r\n <div class=\"back-btn\" (click)=\"closeDialogRef()\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"header-text\">Apply Coupon</div>\r\n </div>\r\n <!-- <div class=\"coupon-search-sec\">\r\n <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\r\n <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\r\n </div> -->\r\n <div class=\"coupon-listing\">\r\n <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\r\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\r\n <div class=\"coupon-details\"\r\n [ngStyle]=\"{'background-color': !couponDetails.applicable ? '#FFF2F4' : '#EDFFFA'}\"\r\n *ngIf=\"couponDetails?.status\">\r\n <div class=\"details__coupon-heading\">\r\n <div class=\"coupon-brief\">\r\n <div class=\"coupon-brief__left-sec\">\r\n <div class=\"coupon-name\" [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\r\n {{ couponDetails.couponCode | uppercase }}</div>\r\n <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\r\n </div>\r\n <div class=\"coupon-brief__right-sec\">\r\n <div class=\"apply-offer-btn\" [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\r\n [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : ''}\"\r\n (click)=\"applyCoupon(couponDetails)\">Apply</div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\r\n <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\r\n <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\r\n </div> -->\r\n </div>\r\n <ng-container>\r\n <!-- *ngIf=\"couponDetails.status\" -->\r\n <div class=\"details-divider\"></div>\r\n <ul class=\"details__coupon-terms\">\r\n <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\r\n </ul>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #showEmptyScreen>\r\n <div class=\"empty-screen-container\">\r\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n <div class=\"empty-screen__primary-text\">No Coupon Available</div>\r\n <div class=\"empty-screen__secondary-text\">\r\n Looks like there are no coupons at the moment\r\n </div>\r\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\r\n </div>\r\n </ng-template>\r\n </div>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #RedemptionVouchers>\r\n <section class=\"vouchers-listing-section d-flex flex-column\">\r\n <div class=\"coupon-heading d-flex align-items-center gap-2 p-3 fs-18 fw-600 border-bottom\">\r\n <div class=\"back-btn cursor-pointer d-flex align-items-center\" (click)=\"closeDialogRef()\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"header-text\">Coupons & Vouchers</div>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center tab-container justify-content-between gap-2 p-3\">\r\n <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'COUPONS'}\"\r\n (click)=\"redemptionType = 'COUPONS'\">\r\n Coupons\r\n </div>\r\n <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'VOUCHERS'}\"\r\n (click)=\"redemptionType = 'VOUCHERS'\">\r\n Vouchers\r\n </div>\r\n </div>\r\n\r\n <div class=\"coupon-listing d-flex flex-column gap-3 pt-0\" *ngIf=\"redemptionType === 'COUPONS'\">\r\n <div class=\"d-flex align-items-center tab-container gap-3\">\r\n <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\r\n [ngClass]=\"{'active-coupon': redemptionCouponType === 'REWARDS'}\" (click)=\"redemptionCouponType = 'REWARDS'\">\r\n Rewards\r\n </div>\r\n <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\r\n [ngClass]=\"{'active-coupon': redemptionCouponType === 'DISCOUNTS'}\" (click)=\"redemptionCouponType = 'DISCOUNTS'\">\r\n Discounts\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"redemptionCouponType === 'REWARDS'\">\r\n <ng-container *ngIf=\"(listRedemptionCoupons?.vouchers?.length > 0) ; else showEmptyScreen\">\r\n <ng-container *ngFor=\"let voucher of listRedemptionCoupons?.vouchers; let idx = index\">\r\n <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\r\n \r\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\r\n <div class=\"coupon-brief__left-sec\">\r\n <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\r\n <div class=\"coupon-desc fs-12 text-secondary\">\r\n Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%' }}\r\n off on your payment\r\n </div>\r\n </div>\r\n <div class=\"coupon-brief__right-sec\">\r\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">Apply</div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\r\n <div class=\"code-label\">Code</div>\r\n <div class=\"code-value\">{{ voucher.voucherCode }}</div>\r\n </div>\r\n \r\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\r\n <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\r\n <span class=\"separator text-secondary\">|</span>\r\n <span class=\"validity\">\r\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\r\n Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\r\n </span>\r\n <span class=\"separator text-secondary\" *ngIf=\"voucher.maxRedeemableAmount\">|</span>\r\n <span class=\"min-order\" *ngIf=\"voucher.maxRedeemableAmount\">Max Redeemable Amount: \u20B9{{\r\n voucher.maxRedeemableAmount | number }}</span>\r\n </div>\r\n \r\n <!-- <div class=\"terms-link\">View terms & conditions</div> -->\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n \r\n <ng-container *ngIf=\"redemptionCouponType === 'DISCOUNTS'\">\r\n <ng-container *ngIf=\"(couponList.length > 0); else showEmptyDiscounts\">\r\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\r\n <div class=\"voucher-details\" *ngIf=\"couponDetails?.status\">\r\n \r\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\r\n <div class=\"coupon-brief__left-sec\">\r\n <div class=\"coupon-name fs-16 fw-600 mb-1\"\r\n [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\r\n {{ couponDetails.couponCode | uppercase }}\r\n </div>\r\n <div class=\"coupon-desc fs-12 text-secondary\">\r\n {{ couponDetails.discountDescription | titlecase }}\r\n </div>\r\n </div>\r\n <div class=\"coupon-brief__right-sec\">\r\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\"\r\n [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\r\n [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : 'not-allowed'}\"\r\n (click)=\"applyCoupon(couponDetails)\">\r\n Apply\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\r\n <div class=\"code-label\">Code</div>\r\n <div class=\"code-value\">{{ couponDetails.couponCode | uppercase }}</div>\r\n </div>\r\n \r\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\r\n <span class=\"validity\">\r\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\r\n {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}\r\n </span>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #showEmptyDiscounts>\r\n <div class=\"empty-screen-container\">\r\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n <div class=\"empty-screen__primary-text\">No Discount Coupons Available</div>\r\n <div class=\"empty-screen__secondary-text\">\r\n Looks like there are no discount coupons at the moment\r\n </div>\r\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #showEmptyScreen>\r\n <div class=\"empty-screen-container\">\r\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n <div class=\"empty-screen__primary-text\">No Coupons Available</div>\r\n <div class=\"empty-screen__secondary-text\">Looks like there are no coupons</div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n <div class=\"coupon-listing d-flex flex-column gap-3\" *ngIf=\"redemptionType === 'VOUCHERS'\">\r\n <ng-container *ngIf=\"listRedemptionVouchers?.vouchers?.length > 0; else showEmptyScreen\">\r\n <ng-container *ngFor=\"let voucher of listRedemptionVouchers?.vouchers; let idx = index\">\r\n <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\r\n\r\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\r\n <div class=\"coupon-brief__left-sec\">\r\n <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\r\n <div class=\"coupon-desc fs-12 text-secondary\">\r\n Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%' }}\r\n off on your payment\r\n </div>\r\n </div>\r\n <div class=\"coupon-brief__right-sec\">\r\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">Apply</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\r\n <div class=\"code-label\">Code</div>\r\n <div class=\"code-value\">{{ voucher.voucherCode }}</div>\r\n </div>\r\n\r\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\r\n <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\r\n <span class=\"separator text-secondary\">|</span>\r\n <span class=\"validity\">\r\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\r\n Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\r\n </span>\r\n </div>\r\n\r\n <!-- <div class=\"terms-link\">View terms & conditions</div> -->\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #showEmptyScreen>\r\n <div class=\"empty-screen-container\">\r\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n <div class=\"empty-screen__primary-text\">No Vouchers Available</div>\r\n <div class=\"empty-screen__secondary-text\">Looks like there are no vouchers</div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #CARTPAGE>\r\n <div class=\"container\">\r\n <div class=\"main-content\">\r\n <div class=\"promo-banner mb-3\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && ecomConfigs?.videoCallEnabled\">\r\n <!-- && ecomConfigs?.videoCallEnabled\" -->\r\n <div class=\"promo-text\">\r\n <h3>See It Before You Buy It</h3>\r\n <p>Experience our designs in detail via video call</p>\r\n </div>\r\n <button class=\"see-live-btn\" (click)=\"scheduleVideoCall(responseData?.orderedItems)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-video\">\r\n <path d=\"m22 8-6 4 6 4V8Z\" />\r\n <rect width=\"14\" height=\"12\" x=\"2\" y=\"6\" rx=\"2\" ry=\"2\" />\r\n </svg>\r\n SEE IT LIVE\r\n </button>\r\n </div>\r\n\r\n <div class=\"cart-items\">\r\n <div class=\"cart-header\">\r\n <h2>Your Cart</h2>\r\n </div>\r\n <ng-container\r\n *ngTemplateOutlet=\"CARTITEM;context:{data: cartType === 'SHOPPING' ? responseData?.orderedItems : trialCartItem}\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"sidebar\">\r\n <div class=\"reedem-section d-flex flex-column align-items-center\" *ngIf=\"cartType != 'TRIAL' && getUrl()\">\r\n <div class=\"justify-content-between d-flex align-items-center w-100 redeem-section-text\">Redeem Section Amount\r\n <div class=\"toogle-switch\">\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" role=\"switch\" id=\"flexSwitchCheckChecked\"\r\n [checked]=\"selectMatureScheme\" (change)=\"onToggleChange()\">\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"select_matured_text w-100 text-start cursor-pointer\"\r\n *ngIf=\"selectMatureScheme && !selectedRedemption\" (click)=\"selectScheme()\">\r\n Select Matured Scheme\r\n </div> -->\r\n <!-- <div class=\"select_matured_text d-flex flex-column gap-2 w-100 text-start cursor-pointer\"\r\n *ngIf=\"selectedRedemption\">\r\n Selected Scheme\r\n <div class=\"d-flex w-100 justify-content-between align-items-center group_invest\">Group Investment\r\n scheme-5000/M <span>Change</span></div>\r\n <div class=\"d-flex justify-content-between align-items-center w-100 redeem_amount\">Redeemable Amount\r\n <span>\u20B9{{selectedRedmpationData.selectedAmount}}</span>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div class=\"scheme-section\" *ngIf=\"selectMatureScheme\">\r\n <ng-container *ngTemplateOutlet=\"SCHEME_REDEMPTION\"></ng-container>\r\n </div>\r\n <div class=\"coupon-section\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && !referEarnExist\" (click)=\"openDialog(CouponList)\">\r\n <div class=\"coupon-left\">\r\n <div class=\"coupon-icon\"><mat-icon>percent</mat-icon></div>\r\n <span class=\"coupon-text\" *ngIf=\"!responseData.billdetails?.couponId\">Apply\r\n Coupon</span>\r\n <span class=\"coupon-text\" *ngIf=\"responseData.billdetails?.couponId\">Coupon\r\n Applied</span>\r\n </div>\r\n <svg *ngIf=\"!responseData.billdetails?.couponId\" xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\"\r\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" class=\"chevron-icon\">\r\n <path d=\"m9 18 6-6-6-6\" />\r\n </svg>\r\n <span *ngIf=\"responseData.billdetails?.couponId\"\r\n (click)=\"removeCoupon($event)\"><mat-icon>close</mat-icon></span>\r\n </div>\r\n\r\n <div class=\"plan-details-container p-3 rounded-4 bg-white text-dark voucher-details\" *ngIf=\"referEarnExist\">\r\n <div class=\"fs-14 fw-500\">\r\n Rewards Available\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-start border-bottom pb-2\">\r\n <div class=\"avb_pts mt-2 mb-2\">\r\n <span class=\"fs-16 fw-500 total_points text-secondary\">\r\n <span class=\" fs-18 fw-600 text-dark\">{{this?.redemptionPoints?.availablePoints || 0}}</span> pts\r\n </span>\r\n <div class=\"total_value fs-12 text-secondary\">\r\n = max \u20B9{{this?.redemptionPoints?.pointsConvertedRupees || 0}} discount\r\n </div>\r\n </div>\r\n <div class=\"wallte_icon\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/777779c1775200561187wallet_(1).png\" alt=\"\">\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center mt-3\" *ngIf=\"this?.redemptionPoints?.availablePoints != 0\">\r\n <div class=\"redemable_text\">\r\n <div class=\"title_text\">\r\n <div class=\"fs-14 fw-500\">\r\n Redeem Points\r\n </div>\r\n <div class=\"fs-13 fs-400\">\r\n Use your points for discount\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"toggle_btn\">\r\n <label class=\"switch\">\r\n <input type=\"checkbox\" id=\"toggleSwitch\" [checked]=\"isPointsRedeeming\" (click)=\"onPointsRedeemingChange($event)\" />\r\n <span class=\"slider\"></span>\r\n </label>\r\n </div>\r\n </div>\r\n <div class=\"mt-3 success_selected w-100 applied-coupon-card\" *ngIf=\"isPointsRedeeming\">\r\n <div class=\"d-flex align-items-start gap-2\">\r\n <div class=\"success_icon\">\r\n <mat-icon class=\"d-flex justify-content-center align-items-center text-success\">check_circle</mat-icon>\r\n </div>\r\n <div class=\"success_text\">\r\n <div class=\"fs-13 fw-500\">\r\n You're saving \u20B9\r\n {{totalSavingAmt || 0}}\r\n </div>\r\n <div class=\"fs-12 fs-400 text-success\">\r\n {{totalSavingPoints}} points remaining after redemption\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Existing coupon row (keep as-is) -->\r\n <div class=\"coupon-section d-flex flex-column voucher-details\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && referEarnExist\">\r\n <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n <div class=\"coupon-left\" >\r\n Apply Coupon\r\n </div>\r\n <div\r\n (click)=\"addRedemptionCoupon(RedemptionVouchers)\">View All</div>\r\n </div>\r\n \r\n <!-- Applied Coupon Success Banner -->\r\n <div class=\"applied-coupon-card w-100 mt-3 d-flex align-items-center justify-content-between\" *ngIf=\"selectedVoucherId\">\r\n <div class=\"applied-coupon-left d-flex align-items-center gap-3\">\r\n <mat-icon class=\"success-check\">check_circle</mat-icon>\r\n <div class=\"applied-coupon-info\">\r\n <div class=\"applied-coupon-code\">Coupon {{ selectedVoucherCode }} applied!</div>\r\n <div class=\"applied-coupon-saving\">You're saving\r\n <span *ngIf=\"this.couponValueType === 'AMOUNT'\">\u20B9 {{selectedVoucherAmount || 0}}</span>\r\n <span *ngIf=\"this.couponValueType === 'PERCENTAGE'\"> {{selectedVoucherPercentage || 0}}%</span>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div class=\"remove-coupon-btn fs-14 fw-500 text-secondary cursor-pointer\" (click)=\"removeRedemptionCoupon($event)\">Remove</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"delivery-section\" *ngIf=\"getUrl()\">\r\n <div class=\"delivery-header\">\r\n <mat-icon>gps_fixed</mat-icon>\r\n <span *ngIf=\"cartType === 'SHOPPING'\">Delivering to</span>\r\n <span *ngIf=\"cartType === 'TRIAL'\">Trial Location at</span>\r\n <span class=\"pincode\">{{pincode}}</span>\r\n <!-- <a class=\"change-link\">Change Pincode</a> -->\r\n </div>\r\n </div>\r\n\r\n <div class=\"summary-section\">\r\n <div class=\"summary-title\">Summary</div>\r\n\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span class=\"summary-label\">Subtotal</span>\r\n <span class=\"summary-value\">\u20B9{{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</span>\r\n </div>\r\n\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && referEarnExist && isPointsRedeeming\">\r\n <span class=\"summary-label\">Points Redeemed</span>\r\n <span class=\"summary-value\">- \u20B9{{ totalSavingAmt || 0 }}</span>\r\n </div>\r\n\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'AMOUNT' && appliedVoucher)\">\r\n <span class=\"summary-label\">Voucher Applied</span>\r\n <span class=\"summary-value\">- \u20B9{{ selectedVoucherAmount || 0 }}</span>\r\n </div>\r\n\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'PERCENTAGE' && appliedVoucher)\">\r\n <span class=\"summary-label\">Voucher Applied</span>\r\n <span class=\"summary-value\">- \u20B9{{ percentageReduced || 0 }}</span>\r\n </div>\r\n\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span class=\"summary-label\">Shipping</span>\r\n <span class=\"summary-value\"\r\n [ngClass]=\"{'savings': !responseData?.billdetails?.deliveryCharges || responseData.billdetails.deliveryCharges <= 0}\">\r\n {{ (responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0) ? ('\u20B9' +\r\n (responseData.billdetails.deliveryCharges | number: '1.0-2')) : 'Free' }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span class=\"summary-label\">Estimated Tax</span>\r\n <span class=\"summary-value\">\u20B9{{((!responseData.billdetails?.couponId ?\r\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\r\n number: '1.0-2'}}</span>\r\n </div>\r\n\r\n <div class=\"summary-row total-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span class=\"summary-label\">Total</span>\r\n <span class=\"summary-value\">\u20B9{{ responseData?.totalAmount | number: '1.0-2' }}</span>\r\n </div>\r\n\r\n <!-- Trial Cart Summary -->\r\n <ng-container *ngIf=\"cartType === 'TRIAL'\">\r\n <div class=\"summary-row\">\r\n <span class=\"summary-label\">Free Trial</span>\r\n <span class=\"summary-value\">\u20B90</span>\r\n </div>\r\n <div class=\"summary-row\">\r\n <span class=\"summary-label\">Service Charge</span>\r\n <span class=\"summary-value savings\">Free</span>\r\n </div>\r\n <div class=\"summary-divider\"></div>\r\n <div class=\"summary-row total-row\">\r\n <span class=\"summary-label\">Total</span>\r\n <span class=\"summary-value\">\u20B90</span>\r\n </div>\r\n <span class=\"total-value\" *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{ responseData?.totalAmount |\r\n number: '1.0-2' }}</span>\r\n \r\n <span class=\"total-value\" *ngIf=\"isPointsRedeeming\">\u20B9{{ (responseData?.totalAmount - (totalSavingAmt || 0)) |\r\n number: '1.0-2' }}</span>\r\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount - (selectedVoucherAmount || 0)) | number:\r\n '1.0-2'}}</span>\r\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount - (percentageReduced || 0)) | number:\r\n '1.0-2' }}</span>\r\n </ng-container>\r\n </div>\r\n <button class=\"place-order-btn\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\r\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n *ngIf=\"cartType === 'SHOPPING'\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\r\n Shopping'}}</button>\r\n <button class=\"place-order-btn mt-0\" (click)=\"edit ? '' : proceedToPayment()\" simpoButtonDirective\r\n *ngIf=\"cartType === 'SHOPPING'\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout\r\n Cart'}}</button>\r\n <button class=\"place-order-btn mt-0\" simpoButtonDirective *ngIf=\"cartType === 'TRIAL'\"\r\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\" (click)=\"bookAppointment()\">BOOK\r\n APPOINTMENT</button>\r\n\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #CHECKOUTPAGE>\r\n <div class=\"checkout-left-panel\">\r\n <div class=\"checkout-main-content\">\r\n <!-- <div class=\"delivery-options\">\r\n <div class=\"delivery-option active\">\r\n <div class=\"delivery-icon\"></div>\r\n HOME DELIVERY\r\n </div>\r\n <div class=\"delivery-option\">\r\n <div class=\"delivery-icon\"></div>\r\n STORE PICK-UP\r\n </div>\r\n </div> -->\r\n\r\n <div class=\"section-title\">Shipping Address</div>\r\n\r\n <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\r\n <div class=\"address-info\">\r\n <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\r\n <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\r\n {{defaultAddress?.stateName}}</div>\r\n <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"addLinks h-100\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\r\n <mat-icon>add</mat-icon>\r\n </div>\r\n\r\n <button class=\"change-address-btn\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">CHANGE OR ADD ADDRESS</button>\r\n\r\n <div class=\"btn w-100 mt-1 payment-btn\" (click)=\"proceedToPayment()\" simpoButtonDirective *ngIf=\"defaultAddress\"\r\n [buttonStyle]=\"data?.action?.buttons?.[2]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"styles?.background\">\r\n {{data?.action?.buttons?.[2]?.content?.label ?? 'Procced To Payment'}}\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"checkout-right-panel\">\r\n <div class=\"order-summary\">\r\n <div class=\"summary-title\">Order Summary</div>\r\n\r\n <div class=\"checkout-product\">\r\n <div class=\"product-item\" *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n <img [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-image\"\r\n alt=\"\">\r\n <div class=\"product-details\">\r\n <div class=\"product-name\">{{item.itemName}}</div>\r\n <div class=\"product-quantity\">Quantity: {{item.quantity}}</div>\r\n <div class=\"product-price\">\u20B9{{(item.sellingPrice * item.quantity) | number: '1.0-2'}}</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"price-breakdown\">\r\n <div class=\"price-row\">\r\n <span>Total Price</span>\r\n <span>\u20B9{{(responseData?.billdetails?.totalNetValue\r\n ?? 0) | number: '1.0-2'}}</span>\r\n </div>\r\n <div class=\"price-row\">\r\n <span>Total Tax</span>\r\n <span>\u20B9{{((!responseData.billdetails?.couponId ?\r\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\r\n number:\r\n '1.0-2'}}</span>\r\n </div>\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && cartInfo?.billdetails?.orraSchemeRedeemedAmount\">\r\n <span class=\"summary-label\">Redeem Amount</span>\r\n <span class=\"summary-value\">\u20B9{{(cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\r\n '1.0-2'}}</span>\r\n </div>\r\n\r\n <div class=\"price-row discount\"\r\n *ngIf=\"responseData?.billdetails?.discountAmount && subIndustryName != 'Ecommerce Jewellery'\">\r\n <span>Coupon Discount</span>\r\n <span>- \u20B9{{responseData?.billdetails?.discountAmount\r\n | number: '1.0-2'}}</span>\r\n </div>\r\n <div class=\"price-row\"\r\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n <span>Delivery Charge</span>\r\n <span>{{responseData.billdetails.deliveryCharges\r\n |\r\n number: '1.0-2'}}</span>\r\n </div>\r\n <div class=\"price-row total\">\r\n <span>TOTAL AMOUNT</span>\r\n <span *ngIf=\"!isPointsRedeeming\">\u20B9{{(responseData?.totalAmount ?? 0) | number:\r\n '1.0-2'}}</span>\r\n <span *ngIf=\"isPointsRedeeming\">\u20B9{{(responseData?.totalAmount - (totalSavingAmt || 0)) | number:\r\n '1.0-2'}}</span>\r\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount - (selectedVoucherAmount || 0)) | number:\r\n '1.0-2'}}</span> \r\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount - (responseData?.totalAmount * (selectedVoucherPercentage / 100) || 0)) | number:\r\n '1.0-2' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #CARTITEM let-products=\"data\">\r\n <div class=\"cart-item\" *ngFor=\"let item of products\" [style.color]=\"fontColor\">\r\n <div class=\"item-left\">\r\n <div class=\"item-image\">\r\n <img class=\"item-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n (click)=\"goToProductDetails(item)\" style=\"cursor: pointer;\">\r\n </div>\r\n <div class=\"item-details\">\r\n <h3 class=\"item-title\">{{item.itemName}}</h3>\r\n <div class=\"item-subtitle\" *ngIf=\"item.itemVariant\">\r\n <span *ngFor=\"let varient of getKeys(item.itemVariant.properties); let last = last\">\r\n {{ item.itemVariant.properties[varient] | titlecase }}<span *ngIf=\"!last\">, </span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"item-right\">\r\n <div class=\"quantity-control\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <button class=\"qty-btn px-2\" (click)=\"decreaseQty(item)\" [disabled]=\"item.quantity === 1\">\r\n <mat-icon>remove</mat-icon>\r\n </button>\r\n <span class=\"qty-value px-3\">{{item.quantity}}</span>\r\n <button class=\"qty-btn px-2\" (click)=\"increaseQty(item)\">\r\n <mat-icon>add</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"item-price\">\r\n \u20B9{{item.sellingPrice | number: '1.0-2'}}\r\n </div>\r\n\r\n <div class=\"delete-btn-circle\" (click)=\"removeItem(item)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trash-2\">\r\n <path d=\"M3 6h18\" />\r\n <path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\" />\r\n <path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\" />\r\n <line x1=\"10\" x2=\"10\" y1=\"11\" y2=\"17\" />\r\n <line x1=\"14\" x2=\"14\" y1=\"11\" y2=\"17\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #EMPTYITEM>\r\n <section class=\"empty-cart w-100 d-flex align-items-center justify-content-center\">\r\n <div class=\"empty-cart-container d-flex flex-column\">\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"data?.content?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <div class=\"cart-text content-side\">\r\n <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"d-flex justify-content-center\"\r\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <button class=\"place-order-btn mx-auto w-fit\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\r\n [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\r\n Shopping'}}</button>\r\n </div>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #SCHEME_REDEMPTION>\r\n <div class=\"modal-body\">\r\n <div class=\"scheme-option\" *ngFor=\"let scheme of schemeList\" (click)=\"redeemScheme(scheme, false)\"\r\n [style.borderColor]=\"cartInfo.billdetails.orraSchemeCode ? styles?.background?.color : ''\">\r\n <label for=\"individual\" class=\"scheme-card\">\r\n <div class=\"scheme-info d-flex gap-1\">\r\n <div class=\"form-check-radio\">\r\n <input class=\"form-check-input-radio\" type=\"radio\" name=\"flexRadioDefault\" id=\"flexRadioDefault2\">\r\n </div>\r\n <div class=\"right-side\">\r\n <div class=\"scheme-name\">\r\n <div class=\"scheme-title\">Individual Investment Scheme</div>\r\n <div class=\"scheme-monthly\">\u20B98000/M</div>\r\n </div>\r\n <div class=\"scheme-details\">\r\n <span class=\"scheme-id\">GPP Id: {{scheme.GPPId}}</span>\r\n <!-- <span class=\"scheme-maturity\">Maturity Date: 12 April 2024</span> -->\r\n </div>\r\n <div class=\"scheme-amount\">\u20B9{{scheme.amount}}</div>\r\n </div>\r\n </div>\r\n </label>\r\n </div>\r\n <div class=\"reedem_error d-flex justify-content-center align-items-center\" *ngIf=\"showReedemError\">\r\n Please add more \u20B9{{vaildAmount}} to reedem this scheme\r\n </div>\r\n </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.reedem-section{padding:10px 15px;border-radius:15px;background:#f6f3f9;box-shadow:#b2b2ca80 2px 2px 6px;font-weight:700;font-size:13px}.redeem-section-text{font-size:.9rem;font-weight:700}.form-check-input:checked{background-color:#28a745!important;border-color:#28a745!important}.form-check-input:focus{border-color:#28a745!important;outline:0;box-shadow:none!important}.close-btn{background:none;border:none;font-size:24px;color:#6b7280;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.close-btn:hover{color:#374151}.select_matured_text{font-size:.8rem!important;margin-top:10px;color:#05aacf}.position-relative{position:relative}.cart-parent{display:flex;margin-top:15px}.left-panel{width:65%;padding-right:5rem;border-right:1px solid #E9E9E9}.timeline{cursor:pointer}.cart-items{background:#fff;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.cart-header{padding:16px 24px;border-bottom:1px solid #e2e8f0;background:#f8fafc}.cart-header h2{margin:0;font-size:18px;font-weight:500;color:#0f172a}.cart-item{display:flex!important;align-items:center;justify-content:space-between;border-bottom:1px solid #e2e8f0;gap:20px;padding:0 8px;transition:background .2s}.cart-item:hover{background:#fbfcfe}.item-left{display:flex;align-items:center;flex:1}.item-right{display:flex;align-items:center;padding:15px;gap:32px}.item-image img{width:64px;height:64px;border-radius:12px;object-fit:cover;border:1px solid #f1f5f9}.item-details{display:flex;flex-direction:column;gap:4px}.item-title{margin:0;font-size:15px;font-weight:600;color:#0f172a;line-height:1.4}.item-subtitle{font-size:13px;color:#64748b;font-weight:400}.quantity-control{display:flex;align-items:center;border:1.5px solid #e2e8f0;border-radius:7px;overflow:hidden;height:38px;background:#fff;width:fit-content}.qty-btn{width:38px;height:100%;border:none;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#475569;transition:all .2s ease}.qty-btn:hover{background:#f8fafc;color:#0f172a}.qty-btn mat-icon{font-size:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center}.qty-value{width:32px;height:100%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;color:#0f172a;border-left:1.5px solid #e2e8f0;border-right:1.5px solid #e2e8f0}.item-price{font-size:18px;font-weight:700;color:#0f172a;min-width:60px;text-align:right;letter-spacing:-.01em}.delete-btn-circle{width:36px;height:36px;border-radius:50%;border:1px solid #fee2e2;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#ef4444;transition:all .2s ease}.delete-btn-circle:hover{background:#fef2f2;border-color:#fecaca;transform:scale(1.05);color:#dc2626}.delete-btn-circle svg{width:18px;height:18px}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%;padding-left:5rem}.my-bag{font-size:16px;font-weight:600;color:#000;margin-left:8px}.my-bag span{color:#939393}.coupons{display:flex;justify-content:space-between;padding:10px;border-radius:4px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px;margin-top:10px;cursor:pointer}.coupon-list-section{padding:15px;width:400px;z-index:10000001!important}.coupon-list-section .search{padding:8px;border:1px solid lightgray;border-radius:20px;display:flex;justify-content:space-between}.coupon-list-section input{border:none;outline:none;width:90%}.coupon-list-section .coupon-list{height:60vh;width:100%}.item-parent{margin:10px 0;min-height:120px}.lh-23{line-height:23px;margin-left:10px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0;cursor:pointer}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer;font-size:18px}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important;height:calc(100vh - 170px)}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;width:100%;text-align:center}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff;cursor:pointer}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.see-live-btn{white-space:nowrap!important}.left-panel{width:100%;padding-right:0rem}.right-panel{width:100%;z-index:1000;padding-left:0rem}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap;display:none}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}.empty-cart-container{height:calc(100vh - 130px)}.coupons-listing-section{width:100vw!important}.checkoutPage{flex-direction:column}.checkout-left-panel,.checkout-right-panel{width:100%!important}}.mobile-fixed{color:#fff}.coupons-listing-section{height:100vh;padding-top:0;position:relative;width:390px;z-index:100;background:#d3d3d354}.coupons-listing-section .coupon-heading{display:flex;align-items:center;background-color:#fff;padding:15px 20px;width:100%;box-sizing:border-box}.coupons-listing-section .coupon-heading img{height:15px;width:15px;position:relative;top:2px;cursor:pointer}.coupons-listing-section .coupon-heading .header-text{font-size:16px;color:#000;font-weight:600;margin-left:15px;position:relative;top:-3px;right:15px;cursor:pointer}.coupons-listing-section .coupon-search-sec{width:90%;box-sizing:border-box;margin:10px auto;border:1px solid lightgray;padding:10px;border-radius:10px;background-color:#fff;display:flex;font-size:16px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec input{border:none;outline:none;background-color:transparent;width:95%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-search-sec input:focus{font-size:14px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec .back-btn{position:relative;top:3px;cursor:pointer}.coupons-listing-section .coupon-search-sec .apply-btn-search{font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing{height:72%;overflow-y:auto;width:90%;margin:20px auto}.coupons-listing-section .coupon-listing .coupon-details{padding:15px;margin-bottom:15px;background-color:#edfffa;border-radius:10px;border:1px solid lightgray}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading{display:flex;flex-direction:column;gap:25px}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief{display:flex;justify-content:space-between;width:100%}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-name{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-desc{padding:5px 0;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .show-details-btn{cursor:pointer}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec{display:flex;justify-content:flex-end}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec .apply-offer-btn{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-toggle-details-btn{text-align:left;text-decoration:underline;width:100%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details-divider{border-top:2px solid lightgray;opacity:.3;margin:15px 0}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-terms{font-size:14px;color:#000;font-weight:400}.empty-screen-container{height:100%;width:85%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-screen-container .empty-screen__primary-text{font-size:22px;color:#000;font-weight:400}.empty-screen-container .empty-screen__secondary-text{text-align:center;padding:10px 0;font-size:16px;color:#000;font-weight:400}.empty-screen-container .empty-screen__button{width:90%;background-color:#fff;border-radius:8px;text-align:center;padding:10px;margin:10px auto 0;cursor:pointer;font-size:18px;color:#000;font-weight:400}.box-shadow{box-shadow:#00000029 0 1px 4px}.main-content{border-radius:12px;padding:0 30px 30px;width:100%;overflow:scroll;height:calc(100vh - 150px)}.delivery-options{display:flex;gap:20px;margin-bottom:30px}.delivery-option{padding:12px 24px;border:2px solid #e0e0e0;border-radius:25px;background:#fff;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:500;transition:all .2s}.delivery-option.active{background:#f0e6ff;border-color:#8b5cf6;color:#7c3aed}.delivery-option:hover{border-color:silver}.delivery-icon{width:16px;height:16px;background:#8b5cf6;border-radius:3px}.section-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.shipping-info{border-radius:10px;padding:20px;margin-bottom:20px;border:1px solid rgb(238,232,255);box-shadow:#0000000a 0 4px 8px}.delivery-date{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.delivery-date-text{color:#666;font-weight:500}.change-date-btn{color:#e91e63;background:none;border:none;font-weight:600;cursor:pointer;text-transform:uppercase;font-size:12px;letter-spacing:.5px}.address-info{margin-bottom:15px}.address-name{font-weight:700;margin-bottom:8px;color:#000}.address-details{color:#666;margin-bottom:8px}.mobile-number{font-weight:700;color:#000;font-size:15px}.change-address-btn{font-size:1rem!important;font-weight:700!important;padding:6px;background:#fff;border:1px solid rgb(229,221,255);border-radius:8px;color:#000;cursor:pointer;transition:all .2s;box-shadow:#0000000a 0 4px 8px}.change-address-btn:hover{border-color:#8b5cf6;color:#8b5cf6}.billing-section{margin-top:40px}.billing-options{display:flex;flex-direction:column;gap:15px;margin-top:20px}.billing-option{display:flex;align-items:center;gap:12px;padding:15px;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .2s}.billing-option.active{background:#f0e6ff;border-color:#8b5cf6}.radio-btn{width:20px;height:20px;border:2px solid #e0e0e0;border-radius:50%;position:relative}.billing-option.active .radio-btn{border-color:#8b5cf6}.billing-option.active .radio-btn:after{content:\"\";width:10px;height:10px;background:#8b5cf6;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.order-summary{border-radius:12px;padding:25px;width:75%}.summary-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.product-item{display:flex;gap:15px;margin-bottom:20px;border-bottom:1px solid #f0f0f0;border-radius:7px;background:#fff;padding:15px}.product-item:last-of-type{border-bottom:none;margin-bottom:30px;padding-bottom:0}.product-image{max-width:110px;width:100%;height:100%;border-radius:8px}.product-details{flex:1}.product-name{font-weight:500;margin-bottom:4px;color:#2d3748;font-size:14px}.product-quantity{color:#666;font-size:12px;margin-bottom:8px}.product-price{font-weight:600;color:#2d3748}.delivery-info{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:#8b5cf6}.delivery-icon-small{width:12px;height:12px;background:#8b5cf6;border-radius:2px}.price-breakdown{border-top:1px solid #f0f0f0;padding-top:20px}.price-row{display:flex;justify-content:space-between;margin-bottom:12px;color:#666}.price-row.total{font-weight:600;color:#2d3748;font-size:16px;margin-top:15px;padding-top:15px;border-top:1px solid #f0f0f0}.discount{color:#22c55e!important}@media (max-width: 768px){.container{grid-template-columns:1fr;padding:15px;gap:20px}.main-content,.order-summary{padding:20px;width:100%}.delivery-options{flex-direction:column;gap:10px}}.checkout-left-panel{width:65%;display:flex;justify-content:center}.checkout-right-panel{width:35%;display:flex;justify-content:center;background-color:#f9f9fa}.checkout-product{max-height:50vh;overflow:scroll}.mt-1{margin-top:1rem!important}.payment-btn{box-shadow:#0000000a 0 4px 8px}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px;height:25vh!important;margin-bottom:20px}.addLinks mat-icon{border:1px solid rgb(219,223,225);display:flex;border-radius:100%;align-items:center;justify-content:center;font-size:16px;color:#dbdfe1}.change-pincode{display:flex;gap:10px}.change-pincode mat-icon{font-size:18px;align-items:center;justify-content:center;display:flex}.change-pincode span{font-size:14px}.fs-13{font-size:13px}.fs-12{font-size:12px}.fs-18{font-size:18px}.b-1-b{border-width:0px 1px;border-style:solid;border-color:#000}.container{max-width:unset;padding:24px;display:flex;gap:24px}.main-content{background:#fff;border-radius:12px;width:75%}.promo-banner{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;border-radius:8px;border:1px solid #e2e8f0}.promo-text h3{font-size:16px!important;font-weight:500;margin-bottom:4px}.promo-text p{font-size:.9rem!important;margin-bottom:0!important;color:#64748b}.see-live-btn{background:#fff;border:1px solid #e2e8f0;font-weight:600;color:#000;padding:8px 16px;border-radius:8px;font-size:12px!important;cursor:pointer;display:flex;align-items:center;gap:8px;width:max-content!important;transition:all .2s ease;box-shadow:0 1px 2px #0000000d}.see-live-btn:hover{background:#f8fafc;border-color:#cbd5e1;transform:translateY(-1px)}.see-live-btn svg{color:#6366f1}.cart-item{display:flex;gap:16px;position:relative}.cart-item:last-child{border-bottom:none}.item-image{width:15%;height:100px;border-radius:8px;object-fit:cover;display:flex;align-items:center;justify-content:center}.item-details{flex:1}.item-title{font-weight:500;margin-bottom:8px}.item-price{display:flex;align-items:center;gap:8px}.current-price{font-size:1rem;font-weight:600}.original-price{font-size:1rem;text-decoration:line-through}.discount{background:#fef3c7;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:500}.item-code{font-size:12px;color:#9ca3af;margin-bottom:8px}.item-options{display:flex;gap:16px;font-size:14px;color:#6b7280;margin-bottom:12px}.delivery-info{font-size:12px;color:#8b5cf6}.pickup-info{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:5px 15px;margin-top:12px;display:flex;align-items:center;cursor:pointer;width:max-content;gap:20px}.pickup-text{font-size:.9rem;color:#374151}.remove-btn{position:absolute;top:16px;right:0;width:20px!important;height:20px;background:#000;color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px!important}.sidebar{display:flex;flex-direction:column;gap:16px;width:25%}.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%}}.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}\n"] }]
|
|
9570
9682
|
}], ctorParameters: () => [{ type: EventsService }, { type: CartService }, { type: i2$2.Router }, { type: RestService }, { type: i1$1.MatDialog }, { type: StorageServiceService }, { type: i6$1.MessageService }, { type: i8$3.MatBottomSheet }, { type: i2$2.ActivatedRoute }, { type: undefined, decorators: [{
|
|
9571
9683
|
type: Optional
|
|
9572
9684
|
}, {
|
|
@@ -12939,8 +13051,24 @@ class BannerCarouselComponent extends BaseSection {
|
|
|
12939
13051
|
getScreenSize() {
|
|
12940
13052
|
return window.innerWidth;
|
|
12941
13053
|
}
|
|
13054
|
+
getSectionMinHeight() {
|
|
13055
|
+
const fit = this.styles?.layout?.fit;
|
|
13056
|
+
const isMobile = this.getScreenSize() <= 475;
|
|
13057
|
+
if (fit === 'screen') {
|
|
13058
|
+
return isMobile ? '100vh' : 'calc(100vh + 134px)';
|
|
13059
|
+
}
|
|
13060
|
+
if (fit === 'content') {
|
|
13061
|
+
return isMobile ? '560px' : '420px';
|
|
13062
|
+
}
|
|
13063
|
+
return isMobile ? '560px' : '420px';
|
|
13064
|
+
}
|
|
13065
|
+
getImagePosition(image) {
|
|
13066
|
+
const x = image?.position?.x ?? 50;
|
|
13067
|
+
const y = image?.position?.y ?? 50;
|
|
13068
|
+
return `${x}% ${y}%`;
|
|
13069
|
+
}
|
|
12942
13070
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BannerCarouselComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12943
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BannerCarouselComponent, isStandalone: true, selector: "simpo-banner-carousel", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div class=\"flex relative fix-safari-flickering\" [ngStyle]=\"{\r\n 'min-height': styles?.layout?.fit === 'content' ? 'calc(134px)' :\r\n styles?.layout?.fit === 'screen' ? 'calc(134px+ 100vh)' : '',\r\n 'padding-top': '0px',\r\n 'padding-bottom': '0px'\r\n }\" [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\"\r\n [style.opacity]=\"getBackgroundOpacity\">\r\n <div class=\"flex break-word w-full items-center overflow-hidden\" [id]=\"data?.id\">\r\n <div id=\"carouselExampleInterval\" class=\"carousel slide\" data-bs-ride=\"carousel\">\r\n <!-- data-bs-ride=\"carousel\" -->\r\n <ol class=\"carousel-indicators\" *ngIf=\"(content?.listItem?.data?.length || 0) > 1\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#carouselExampleInterval\" [attr.data-bs-slide-to]=\"i\">\r\n </li>\r\n </ol>\r\n <div class=\"carousel-inner\">\r\n <div *ngFor=\"let item of content?.listItem?.data; let i = index\" class=\"carousel-item \"\r\n [ngClass]=\"{'active': i === currentIndex}\">\r\n <img loading=\"lazy\" [src]=\"item.image.url\" [simpoBlurContent]=\"getBlurValue\" class=\"imgclass w-100\"\r\n alt=\"item.image.alt || 'Carousel image'\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\"\r\n [sectionId]=\"data?.id\" *ngIf=\"item?.image?.url\">\r\n <div class=\"overlay\"></div>\r\n </div>\r\n <div class=\"col-xxl-8 mx-auto relative opacity-100 position-relative text-wrapper\" style=\"z-index: 1;\"\r\n [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoLayout]=\"styles?.layout\">\r\n\r\n <div class=\"row g-5 justify-content-start content-side text-container\" [id]=\"data?.id\"\r\n [simpoAnimation]=\"styles?.animation\"\r\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n <div class=\"col-lg-6 w-full max-w-2xl items-start d-flex flex-column \"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"customclass w-full mb-3\" [ngClass]=\"[\r\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n ]\">\r\n <div *ngFor=\"let button of data?.action?.buttons\" class=\"btn-container \">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#carouselExampleInterval\" role=\"button\" data-bs-slide=\"prev\"\r\n *ngIf=\"(content?.listItem?.data?.length || 0) > 1\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#carouselExampleInterval\" role=\"button\" data-bs-slide=\"next\"\r\n *ngIf=\"(content?.listItem?.data?.length || 0) > 1\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".total-container{height:auto;position:relative}.carousel-indicators li{width:10px;height:10px;background-color:#332e2e;border-radius:50%}.carousel-control-next,.carousel-control-prev{width:5%!important}.carousel-indicators .active{width:10px;height:10px;background-color:#fff;border-radius:50%}.carousel-inner{height:100%;position:relative;width:100%}.overlay{position:absolute;top:0;left:0;height:100%;width:100%;opacity:0}.carousel-item{position:relative;width:100%;height:100%}.carousel-item img{position:absolute;top:0;left:0;width:100%;object-fit:cover}.carousel-indicators{bottom:0!important}.carousel-indicators .circle{width:10px;height:10px;border-radius:50%;background-color:gray}.heading-large{margin-left:1%;margin-right:1%}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width : 475px){.carousel-inner{display:flex}.carousel-indicators{margin-bottom:unset!important}.carousel-item{height:unset!important}.carousel-item img{height:100%!important}}li{list-style:none}.heading-large{margin-left:0%!important}@media (min-width: 860px){.md\\:flex-row{flex-direction:row}}@media (min-width: 860px){.md\\:w-max{width:max-content}}@media (min-width: 860px){.md\\:inline-flex{display:inline-flex}}.btn-container{display:flex;justify-content:center;width:auto}.btn{padding:1rem 1.5rem}.customclass{display:inline-flex;flex-direction:row;gap:1rem;width:100%;margin-top:2rem}@media (max-width: 800px){.customclass{flex-direction:column;align-items:center}.btn-container{width:100%}.btn{width:100%;padding:1rem}}.pb-20{padding-bottom:50px}.pt-20{padding-top:50px}.text-wrapper{width:88vw!important}.text-container{width:86vw!important}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "ngmodule", type: MatGridListModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: SimpoBlurContentDirective, selector: "[simpoBlurContent]", inputs: ["simpoBlurContent"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }] }); }
|
|
13071
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BannerCarouselComponent, isStandalone: true, selector: "simpo-banner-carousel", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div class=\"banner-carousel-shell flex relative fix-safari-flickering\" [ngStyle]=\"{\r\n 'min-height': getSectionMinHeight(),\r\n 'padding-top': '0px',\r\n 'padding-bottom': '0px'\r\n }\" [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\">\r\n <div class=\"flex break-word w-full items-center overflow-hidden banner-carousel-content\" [id]=\"data?.id\">\r\n <div id=\"carouselExampleInterval\" class=\"carousel slide banner-carousel\" data-bs-ride=\"carousel\">\r\n <!-- data-bs-ride=\"carousel\" -->\r\n <ol class=\"carousel-indicators\" *ngIf=\"(content?.listItem?.data?.length || 0) > 1\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#carouselExampleInterval\" [attr.data-bs-slide-to]=\"i\">\r\n </li>\r\n </ol>\r\n\r\n <div class=\"carousel-inner banner-carousel-inner\">\r\n <div *ngFor=\"let item of content?.listItem?.data; let i = index\" class=\"carousel-item banner-carousel-item\"\r\n [ngClass]=\"{'active': i === currentIndex}\">\r\n <!-- <img loading=\"lazy\" [src]=\"item.image.url\" [simpoBlurContent]=\"getBlurValue\"\r\n class=\"imgclass banner-carousel-image\" alt=\"item.image.alt || 'Carousel image'\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\"\r\n *ngIf=\"item?.image?.url\"> -->\r\n <img\r\n loading=\"lazy\"\r\n [src]=\"item.image.url\"\r\n [simpoBlurContent]=\"getBlurValue\"\r\n class=\"imgclass banner-carousel-image\"\r\n [alt]=\"item?.image?.altText || 'Carousel image'\"\r\n [appImageEditor]=\"edit || false\"\r\n [imageData]=\"item?.image\"\r\n [sectionId]=\"data?.id\"\r\n [style.object-position]=\"getImagePosition(item?.image)\"\r\n *ngIf=\"item?.image?.url\">\r\n <div class=\"overlay\"></div>\r\n </div>\r\n\r\n <div class=\"col-xxl-8 mx-auto relative opacity-100 position-relative text-wrapper\" text-content-layer\r\n style=\"z-index: 1;\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"styles?.layout\">\r\n\r\n <div class=\"row g-5 justify-content-start content-side text-container\" [id]=\"data?.id\"\r\n [simpoAnimation]=\"styles?.animation\"\r\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n <div class=\"col-lg-6 w-full max-w-2xl items-start d-flex flex-column \"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"customclass w-full mb-3\" [ngClass]=\"[\r\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n ]\">\r\n <div *ngFor=\"let button of data?.action?.buttons\" class=\"btn-container \">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#carouselExampleInterval\" role=\"button\" data-bs-slide=\"prev\"\r\n *ngIf=\"(content?.listItem?.data?.length || 0) > 1\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n\r\n <a class=\"carousel-control-next\" data-bs-target=\"#carouselExampleInterval\" role=\"button\" data-bs-slide=\"next\"\r\n *ngIf=\"(content?.listItem?.data?.length || 0) > 1\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n \r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".total-container{height:auto;position:relative;width:100%}.banner-carousel-shell{width:100%;position:relative;overflow:hidden}.banner-carousel-content{width:100%;min-height:inherit}.banner-carousel{width:100%;min-height:inherit;position:relative}.carousel-inner,.banner-carousel-inner{position:relative;width:100%;min-height:inherit;height:100%}.carousel-item,.banner-carousel-item{position:absolute;inset:0;width:100%;min-height:inherit;height:100%;pointer-events:none;transition:transform .9s cubic-bezier(.16,1,.3,1)!important}.carousel-item.active,.banner-carousel-item.active{position:absolute;inset:0;pointer-events:auto;z-index:1}.banner-carousel-image,.carousel-item img{position:absolute;inset:0;width:100%;height:100%!important;min-height:100%;object-fit:cover;display:block;z-index:0;transition:object-position .25s ease}.overlay{position:absolute;inset:0;width:100%;height:100%;opacity:0;z-index:1}.text-content-layer{position:relative!important;z-index:2!important;display:flex;align-items:center;justify-content:center;min-height:inherit;width:100%;pointer-events:auto}.carousel-indicators li{width:10px;height:10px;background-color:#332e2e;border-radius:50%}.carousel-control-next,.carousel-control-prev{width:5%!important}.carousel-indicators .active{width:10px;height:10px;background-color:#fff;border-radius:50%}.carousel-indicators{bottom:0!important;z-index:3}.carousel-indicators .circle{width:10px;height:10px;border-radius:50%;background-color:gray}.heading-large{margin-left:1%;margin-right:1%}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width: 475px){.banner-carousel-shell,.banner-carousel,.carousel-inner,.banner-carousel-inner{min-height:560px!important;height:auto!important}.carousel-item,.banner-carousel-item,.carousel-item.active,.banner-carousel-item.active{min-height:560px!important;height:100%!important}.banner-carousel-image,.carousel-item img{width:100%!important;height:100%!important;min-height:560px!important;object-fit:cover!important}.carousel-indicators{margin-bottom:unset!important}.text-content-layer{position:relative!important;inset:unset;min-height:560px!important;padding-top:24px;padding-bottom:24px}.text-wrapper{width:100%!important;padding-left:18px;padding-right:18px}.text-container{width:100%!important;margin:0!important}}li{list-style:none}.heading-large{margin-left:0%!important}@media (min-width: 860px){.md\\:flex-row{flex-direction:row}}@media (min-width: 860px){.md\\:w-max{width:max-content}}@media (min-width: 860px){.md\\:inline-flex{display:inline-flex}}.btn-container{display:flex;justify-content:center;width:auto}.btn{padding:1rem 1.5rem}.customclass{display:inline-flex;flex-direction:row;gap:1rem;width:100%;margin-top:2rem}@media (max-width: 800px){.customclass{flex-direction:column;align-items:center}.btn-container{width:100%}.btn{width:100%;padding:1rem}}.pb-20{padding-bottom:50px}.pt-20{padding-top:50px}.text-wrapper{width:88vw!important}.text-container{width:86vw!important}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "ngmodule", type: MatGridListModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: SimpoBlurContentDirective, selector: "[simpoBlurContent]", inputs: ["simpoBlurContent"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }] }); }
|
|
12944
13072
|
}
|
|
12945
13073
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BannerCarouselComponent, decorators: [{
|
|
12946
13074
|
type: Component,
|
|
@@ -12962,7 +13090,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
12962
13090
|
ImageEditorDirective,
|
|
12963
13091
|
SpacingHorizontalDirective,
|
|
12964
13092
|
SpacingAroundDirective
|
|
12965
|
-
], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div class=\"flex relative fix-safari-flickering\" [ngStyle]=\"{\r\n
|
|
13093
|
+
], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div class=\"banner-carousel-shell flex relative fix-safari-flickering\" [ngStyle]=\"{\r\n 'min-height': getSectionMinHeight(),\r\n 'padding-top': '0px',\r\n 'padding-bottom': '0px'\r\n }\" [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\">\r\n <div class=\"flex break-word w-full items-center overflow-hidden banner-carousel-content\" [id]=\"data?.id\">\r\n <div id=\"carouselExampleInterval\" class=\"carousel slide banner-carousel\" data-bs-ride=\"carousel\">\r\n <!-- data-bs-ride=\"carousel\" -->\r\n <ol class=\"carousel-indicators\" *ngIf=\"(content?.listItem?.data?.length || 0) > 1\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#carouselExampleInterval\" [attr.data-bs-slide-to]=\"i\">\r\n </li>\r\n </ol>\r\n\r\n <div class=\"carousel-inner banner-carousel-inner\">\r\n <div *ngFor=\"let item of content?.listItem?.data; let i = index\" class=\"carousel-item banner-carousel-item\"\r\n [ngClass]=\"{'active': i === currentIndex}\">\r\n <!-- <img loading=\"lazy\" [src]=\"item.image.url\" [simpoBlurContent]=\"getBlurValue\"\r\n class=\"imgclass banner-carousel-image\" alt=\"item.image.alt || 'Carousel image'\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\"\r\n *ngIf=\"item?.image?.url\"> -->\r\n <img\r\n loading=\"lazy\"\r\n [src]=\"item.image.url\"\r\n [simpoBlurContent]=\"getBlurValue\"\r\n class=\"imgclass banner-carousel-image\"\r\n [alt]=\"item?.image?.altText || 'Carousel image'\"\r\n [appImageEditor]=\"edit || false\"\r\n [imageData]=\"item?.image\"\r\n [sectionId]=\"data?.id\"\r\n [style.object-position]=\"getImagePosition(item?.image)\"\r\n *ngIf=\"item?.image?.url\">\r\n <div class=\"overlay\"></div>\r\n </div>\r\n\r\n <div class=\"col-xxl-8 mx-auto relative opacity-100 position-relative text-wrapper\" text-content-layer\r\n style=\"z-index: 1;\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"styles?.layout\">\r\n\r\n <div class=\"row g-5 justify-content-start content-side text-container\" [id]=\"data?.id\"\r\n [simpoAnimation]=\"styles?.animation\"\r\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n <div class=\"col-lg-6 w-full max-w-2xl items-start d-flex flex-column \"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"customclass w-full mb-3\" [ngClass]=\"[\r\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n ]\">\r\n <div *ngFor=\"let button of data?.action?.buttons\" class=\"btn-container \">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#carouselExampleInterval\" role=\"button\" data-bs-slide=\"prev\"\r\n *ngIf=\"(content?.listItem?.data?.length || 0) > 1\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n\r\n <a class=\"carousel-control-next\" data-bs-target=\"#carouselExampleInterval\" role=\"button\" data-bs-slide=\"next\"\r\n *ngIf=\"(content?.listItem?.data?.length || 0) > 1\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n \r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".total-container{height:auto;position:relative;width:100%}.banner-carousel-shell{width:100%;position:relative;overflow:hidden}.banner-carousel-content{width:100%;min-height:inherit}.banner-carousel{width:100%;min-height:inherit;position:relative}.carousel-inner,.banner-carousel-inner{position:relative;width:100%;min-height:inherit;height:100%}.carousel-item,.banner-carousel-item{position:absolute;inset:0;width:100%;min-height:inherit;height:100%;pointer-events:none;transition:transform .9s cubic-bezier(.16,1,.3,1)!important}.carousel-item.active,.banner-carousel-item.active{position:absolute;inset:0;pointer-events:auto;z-index:1}.banner-carousel-image,.carousel-item img{position:absolute;inset:0;width:100%;height:100%!important;min-height:100%;object-fit:cover;display:block;z-index:0;transition:object-position .25s ease}.overlay{position:absolute;inset:0;width:100%;height:100%;opacity:0;z-index:1}.text-content-layer{position:relative!important;z-index:2!important;display:flex;align-items:center;justify-content:center;min-height:inherit;width:100%;pointer-events:auto}.carousel-indicators li{width:10px;height:10px;background-color:#332e2e;border-radius:50%}.carousel-control-next,.carousel-control-prev{width:5%!important}.carousel-indicators .active{width:10px;height:10px;background-color:#fff;border-radius:50%}.carousel-indicators{bottom:0!important;z-index:3}.carousel-indicators .circle{width:10px;height:10px;border-radius:50%;background-color:gray}.heading-large{margin-left:1%;margin-right:1%}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width: 475px){.banner-carousel-shell,.banner-carousel,.carousel-inner,.banner-carousel-inner{min-height:560px!important;height:auto!important}.carousel-item,.banner-carousel-item,.carousel-item.active,.banner-carousel-item.active{min-height:560px!important;height:100%!important}.banner-carousel-image,.carousel-item img{width:100%!important;height:100%!important;min-height:560px!important;object-fit:cover!important}.carousel-indicators{margin-bottom:unset!important}.text-content-layer{position:relative!important;inset:unset;min-height:560px!important;padding-top:24px;padding-bottom:24px}.text-wrapper{width:100%!important;padding-left:18px;padding-right:18px}.text-container{width:100%!important;margin:0!important}}li{list-style:none}.heading-large{margin-left:0%!important}@media (min-width: 860px){.md\\:flex-row{flex-direction:row}}@media (min-width: 860px){.md\\:w-max{width:max-content}}@media (min-width: 860px){.md\\:inline-flex{display:inline-flex}}.btn-container{display:flex;justify-content:center;width:auto}.btn{padding:1rem 1.5rem}.customclass{display:inline-flex;flex-direction:row;gap:1rem;width:100%;margin-top:2rem}@media (max-width: 800px){.customclass{flex-direction:column;align-items:center}.btn-container{width:100%}.btn{width:100%;padding:1rem}}.pb-20{padding-bottom:50px}.pt-20{padding-top:50px}.text-wrapper{width:88vw!important}.text-container{width:86vw!important}\n"] }]
|
|
12966
13094
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
12967
13095
|
type: Input
|
|
12968
13096
|
}], index: [{
|
|
@@ -15714,11 +15842,16 @@ class FooterComponent extends BaseSection {
|
|
|
15714
15842
|
this.screenWidth = 475;
|
|
15715
15843
|
this.pageLink = "Pages";
|
|
15716
15844
|
this.pages = [];
|
|
15845
|
+
this.popularSearchedCategories = [];
|
|
15717
15846
|
this.getScreenSize();
|
|
15718
15847
|
}
|
|
15719
15848
|
async ngOnInit() {
|
|
15720
15849
|
this.style = this.data?.styles;
|
|
15721
15850
|
this.content = this.data?.content;
|
|
15851
|
+
console.log(this.content?.popularSearches, "popularSearches");
|
|
15852
|
+
if (this.content?.popularSearches) {
|
|
15853
|
+
this.getPopularSearches();
|
|
15854
|
+
}
|
|
15722
15855
|
this.getPages();
|
|
15723
15856
|
}
|
|
15724
15857
|
ngOnDestroy() {
|
|
@@ -15783,11 +15916,20 @@ class FooterComponent extends BaseSection {
|
|
|
15783
15916
|
}
|
|
15784
15917
|
});
|
|
15785
15918
|
}
|
|
15786
|
-
|
|
15787
|
-
this.router.navigate([
|
|
15919
|
+
navigateToHome() {
|
|
15920
|
+
this.router.navigate([]);
|
|
15921
|
+
}
|
|
15922
|
+
getPopularSearches() {
|
|
15923
|
+
this.restService.getPopularSearches().subscribe((res) => {
|
|
15924
|
+
this.popularSearchedCategories = res;
|
|
15925
|
+
console.log(this.popularSearchedCategories, "popularSearchedCategories");
|
|
15926
|
+
});
|
|
15927
|
+
}
|
|
15928
|
+
redirectToCollection(collectionName, categoryName) {
|
|
15929
|
+
this.router.navigate(['/list'], { queryParams: { category: categoryName.replaceAll(" ", '_'), collections: collectionName?.replaceAll(" ", '_'), pageNo: 1 } });
|
|
15788
15930
|
}
|
|
15789
15931
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FooterComponent, deps: [{ token: EventsService }, { token: RestService }, { token: i1$1.MatDialog }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15790
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FooterComponent, isStandalone: true, selector: "simpo-footer", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" simpoHover\r\n(hovering)=\"showEditTabs($event)\" [spacingHorizontal]=\"stylesLayout\" [simpoBackground]=\"style?.background\" [simpoLayout]=\"style?.layout\" [id]=\"data?.id\">\r\n <div>\r\n <ng-container *ngIf=\"style?.footerType == 'Footer1'\">\r\n <ng-container *ngTemplateOutlet=\"Footer1\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.footerType == 'Footer2'\">\r\n <ng-container *ngTemplateOutlet=\"Footer2\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.footerType == 'Footer3'\">\r\n <ng-container *ngTemplateOutlet=\"Footer3\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.footerType == 'Footer4'\">\r\n <ng-container *ngTemplateOutlet=\"Footer4\"></ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n</section>\r\n\r\n<ng-template #Footer1>\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-md-4\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n </div>\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"descSection\"></ng-container>\r\n </div>\r\n <div *ngIf=\"content?.socialLinks?.display && screenWidth > 475\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-md-8\">\r\n <div class=\"row\">\r\n <ng-container *ngTemplateOutlet=\"foldersVertical\"></ng-container>\r\n </div>\r\n <div *ngIf=\"content?.socialLinks?.display && screenWidth < 475\" class=\"d-flex justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <hr *ngIf=\"content?.displayBranding\">\r\n <div *ngIf=\"content?.displayBranding\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #Footer2>\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-md-3\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n </div>\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"descSection\"></ng-container>\r\n </div>\r\n <div *ngIf=\"content?.socialLinks?.display && screenWidth > 475\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <div class=\"row\">\r\n <ng-container *ngTemplateOutlet=\"pagesHorizontal\"></ng-container>\r\n </div>\r\n <div *ngIf=\"content?.socialLinks?.display && screenWidth < 475\" class=\"d-flex justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <hr *ngIf=\"content?.displayBranding\">\r\n <div *ngIf=\"content?.displayBranding\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #Footer3>\r\n <div class=\"row\" [class.align-items-start]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"foldersVertical\"></ng-container>\r\n </div>\r\n <hr>\r\n <div class=\"row justify-content-between\">\r\n <div class=\"col-md-4\" [class.w-30]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n </div>\r\n <div class=\"col-md-4 d-flex justify-content-center align-items-start\" *ngIf=\"content?.socialLinks?.display\"\r\n [class.w-30]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n <div class=\"col-md-4 d-flex justify-content-end\" *ngIf=\"content?.displayBranding\" [class.w-30]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #Footer4>\r\n <div class=\"row align-items-center\">\r\n <ng-container *ngTemplateOutlet=\"pagesHorizontal\"></ng-container>\r\n </div>\r\n <hr>\r\n <div class=\"row justify-content-between\">\r\n <div class=\"col-md-4\">\r\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n </div>\r\n <div class=\"col-md-4 d-flex justify-content-center align-items-start\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n <div class=\"col-md-4 d-flex justify-content-end\" *ngIf=\"content?.displayBranding\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #logoSection>\r\n <div class=\"d-flex\" [class.justify-content-center]=\"screenWidth < 475\">\r\n <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer mb-4\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"style?.background?.color\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer mb-4\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\r\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #descSection>\r\n <ng-container *ngIf = \"content?.additionalDetails as textItem\" >\r\n <simpo-text-editor [(value)]=\"textItem.value \" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [label]=\"content?.additionalDetails?.label || ''\"></simpo-text-editor>\r\n </ng-container> <!-- <div class=\"description\" [innerHTML]=\"content?.additionalDetails?.value ?? '' | sanitizeHtml\"></div> -->\r\n</ng-template>\r\n\r\n<ng-template #socialIcons>\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0 gap-1\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div class=\"icons\">\r\n <simpo-socia-icons [iconColor]=\"data?.styles?.background?.accentColor\" [socialIconData]=\"item\"\r\n [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #branding>\r\n <div class=\"heading-small text-center branding-text\">Powered By <a class=\"branding-text fw-600\"\r\n href=\"https://simpo.ai\" target=\"_blank\">Simpo.ai</a></div>\r\n</ng-template>\r\n\r\n<ng-template #pagesHorizontal>\r\n <div class=\"col-md-3 mb-3 pageType\" *ngFor=\"let page of pages\" [class.w-50]=\"screenWidth < 475\" [class.text-center]=\"screenWidth < 475\" (click)=\"redirectToPage(page)\">\r\n {{page.pageName}}\r\n </div>\r\n</ng-template>\r\n\r\n<!-- <ng-template #pagesVertical>\r\n <div class=\"page-container col-md-3 mb-3\" [class.w-50]=\"screenWidth < 475\">\r\n <div class=\"pageType mb-3\">{{pageLink}}</div>\r\n <ng-container *ngFor=\"let page of pages\">\r\n <div class=\"pages mb-2\" (click)=\"redirectToPage(page)\">{{page?.pageName}}</div>\r\n </ng-container>\r\n </div>\r\n</ng-template> -->\r\n\r\n<ng-template #foldersVertical>\r\n <div class=\"page-container col-md-3 mb-3\" *ngFor=\"let folder of content?.folder;let folderIndex = index\" [class.w-50]=\"screenWidth < 475\">\r\n <simpo-text-editor [(value)]=\"folder.label\" [editable]=\"edit || false\" [sectionId]=\"data?.id\"></simpo-text-editor>\r\n <div class=\"mt-15\">\r\n <ng-container *ngFor=\"let page of folder.links;let linkIndex = index\">\r\n <div class=\"folder-page\" [ngClass]=\"{'hoverWhenEditable' : edit}\">\r\n <div class=\"pages mb-2\" (click)=\"redirectTo(page)\" [style.color]=\"style?.background?.accentColor\">{{page.label}}</div>\r\n <mat-icon (click)=\"deleteFolderLinks(folderIndex, linkIndex)\" [style.color]=\"style?.background?.accentColor\">delete</mat-icon>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"edit ? addLinks : null; context: {data: folderIndex}\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"(content?.folder?.length || 0) < 4\" [class.w-50]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"edit ? addFolder : null\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #addLinks let-folderIndex=\"data\">\r\n <div class=\"addLinks\" (click)=\"createNewLink(folderIndex)\">\r\n <mat-icon>add</mat-icon>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #addFolder>\r\n <div class=\"addLinks h-100\" (click)=\"createNewFolder()\">\r\n <mat-icon>add</mat-icon>\r\n </div>\r\n</ng-template>\r\n", styles: [".total-container{height:auto;position:relative}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.pageType{font-size:.9rem;font-weight:600;line-height:22px;color:#87769d}.pages{font-size:.9rem;font-weight:400;line-height:22px;cursor:pointer;color:#87769d}.branding-text{font-size:16px;font-weight:400;line-height:22px;text-decoration:unset}.fw-600{font-weight:600!important}.w-50{width:50%!important}.w-30{width:30%!important}.align-items-start{align-items:start!important}.mt-15{margin-top:15px}.folder-page{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.folder-page mat-icon{font-size:17px;display:flex;align-items:center;justify-content:center;display:none}.hoverWhenEditable:hover{border:1px solid #E9E9E9;border-radius:5px;cursor:pointer}.hoverWhenEditable:hover mat-icon{display:inline}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type:
|
|
15932
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FooterComponent, isStandalone: true, selector: "simpo-footer", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoBackground]=\"style?.background\" [simpoLayout]=\"style?.layout\" [id]=\"data?.id\">\r\n <div>\r\n <ng-container *ngIf=\"style?.footerType == 'Footer1'\">\r\n <ng-container *ngTemplateOutlet=\"Footer1\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.footerType == 'Footer2'\">\r\n <ng-container *ngTemplateOutlet=\"Footer2\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.footerType == 'Footer3'\">\r\n <ng-container *ngTemplateOutlet=\"Footer3\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.footerType == 'Footer4'\">\r\n <ng-container *ngTemplateOutlet=\"Footer4\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.textDescription?.display\">\r\n <ng-container *ngTemplateOutlet=\"textDescription\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.popularSearches\">\r\n <ng-container *ngTemplateOutlet=\"popularSearches\"></ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n</section>\r\n\r\n<ng-template #Footer1>\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-md-4\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n </div>\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"descSection\"></ng-container>\r\n </div>\r\n <div *ngIf=\"content?.socialLinks?.display && screenWidth > 475\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-md-8\">\r\n <div class=\"row\">\r\n <ng-container *ngTemplateOutlet=\"foldersVertical\"></ng-container>\r\n </div>\r\n <div *ngIf=\"content?.socialLinks?.display && screenWidth < 475\" class=\"d-flex justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <hr *ngIf=\"content?.displayBranding\">\r\n <div *ngIf=\"content?.displayBranding\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #Footer2>\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-md-3\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n </div>\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"descSection\"></ng-container>\r\n </div>\r\n <div *ngIf=\"content?.socialLinks?.display && screenWidth > 475\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <div class=\"row\">\r\n <ng-container *ngTemplateOutlet=\"pagesHorizontal\"></ng-container>\r\n </div>\r\n <div *ngIf=\"content?.socialLinks?.display && screenWidth < 475\" class=\"d-flex justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <hr *ngIf=\"content?.displayBranding\">\r\n <div *ngIf=\"content?.displayBranding\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #Footer3>\r\n <div class=\"row\" [class.align-items-start]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"foldersVertical\"></ng-container>\r\n </div>\r\n <hr>\r\n <div class=\"row justify-content-between\">\r\n <div class=\"col-md-4\" [class.w-30]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n </div>\r\n <div class=\"col-md-4 d-flex justify-content-center align-items-start\" *ngIf=\"content?.socialLinks?.display\"\r\n [class.w-30]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n <div class=\"col-md-4 d-flex justify-content-end\" *ngIf=\"content?.displayBranding\" [class.w-30]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #Footer4>\r\n <div class=\"row align-items-center\">\r\n <ng-container *ngTemplateOutlet=\"pagesHorizontal\"></ng-container>\r\n </div>\r\n <hr>\r\n <div class=\"row justify-content-between\">\r\n <div class=\"col-md-4\">\r\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n </div>\r\n <div class=\"col-md-4 d-flex justify-content-center align-items-start\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n <div class=\"col-md-4 d-flex justify-content-end\" *ngIf=\"content?.displayBranding\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #logoSection>\r\n <div class=\"d-flex\" [class.justify-content-center]=\"screenWidth < 475\">\r\n <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer mb-4\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"navigateToHome()\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\"\r\n (click)=\"navigateToHome()\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"style?.background?.color\"\r\n (click)=\"navigateToHome()\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer mb-4\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"navigateToHome()\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\r\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #descSection>\r\n <ng-container *ngIf=\"content?.additionalDetails as textItem\">\r\n <simpo-text-editor [(value)]=\"textItem.value \" [editable]=\"edit || false\" [sectionId]=\"data?.id\"\r\n [label]=\"content?.additionalDetails?.label || ''\"></simpo-text-editor>\r\n </ng-container>\r\n <!-- <div class=\"description\" [innerHTML]=\"content?.additionalDetails?.value ?? '' | sanitizeHtml\"></div> -->\r\n</ng-template>\r\n\r\n<ng-template #socialIcons>\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0 gap-1\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div class=\"icons\">\r\n <simpo-socia-icons [iconColor]=\"data?.styles?.background?.accentColor\" [socialIconData]=\"item\"\r\n [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #branding>\r\n <div class=\"heading-small text-center branding-text\">Powered By <a class=\"branding-text fw-600\"\r\n href=\"https://simpo.ai\" target=\"_blank\">Simpo.ai</a></div>\r\n</ng-template>\r\n\r\n<ng-template #pagesHorizontal>\r\n <div class=\"col-md-3 mb-3 pageType\" *ngFor=\"let page of pages\" [class.w-50]=\"screenWidth < 475\"\r\n [class.text-center]=\"screenWidth < 475\" (click)=\"redirectToPage(page)\">\r\n {{page.pageName}}\r\n </div>\r\n</ng-template>\r\n\r\n<!-- <ng-template #pagesVertical>\r\n <div class=\"page-container col-md-3 mb-3\" [class.w-50]=\"screenWidth < 475\">\r\n <div class=\"pageType mb-3\">{{pageLink}}</div>\r\n <ng-container *ngFor=\"let page of pages\">\r\n <div class=\"pages mb-2\" (click)=\"redirectToPage(page)\">{{page?.pageName}}</div>\r\n </ng-container>\r\n </div>\r\n</ng-template> -->\r\n\r\n<ng-template #foldersVertical>\r\n <div class=\"page-container col-md-3 mb-3\" *ngFor=\"let folder of content?.folder;let folderIndex = index\"\r\n [class.w-50]=\"screenWidth < 475\">\r\n <simpo-text-editor [(value)]=\"folder.label\" [editable]=\"edit || false\" [sectionId]=\"data?.id\"></simpo-text-editor>\r\n <div class=\"mt-15\">\r\n <ng-container *ngFor=\"let page of folder.links;let linkIndex = index\">\r\n <div class=\"folder-page\" [ngClass]=\"{'hoverWhenEditable' : edit}\">\r\n <div class=\"pages mb-2\" (click)=\"redirectTo(page)\" [style.color]=\"style?.background?.accentColor\">\r\n {{page.label}}</div>\r\n <mat-icon (click)=\"deleteFolderLinks(folderIndex, linkIndex)\"\r\n [style.color]=\"style?.background?.accentColor\">delete</mat-icon>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"edit ? addLinks : null; context: {data: folderIndex}\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"(content?.folder?.length || 0) < 4\" [class.w-50]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"edit ? addFolder : null\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #addLinks let-folderIndex=\"data\">\r\n <div class=\"addLinks\" (click)=\"createNewLink(folderIndex)\">\r\n <mat-icon>add</mat-icon>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #addFolder>\r\n <div class=\"addLinks h-100\" (click)=\"createNewFolder()\">\r\n <mat-icon>add</mat-icon>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #popularSearches>\r\n <div class=\"popular-searches mt-4\">\r\n <div class=\"popular-searches-title mb-2\">Popular Searches</div>\r\n <hr class=\"mb-4\">\r\n <ng-container *ngFor=\"let category of popularSearchedCategories; let last = last\">\r\n <div class=\"popular-category mb-4\" *ngIf=\"category.collectionIds && category.collectionIds.length > 0\">\r\n <div class=\"category-heading mb-2\">{{category.categoryName}}</div>\r\n <div class=\"category-links d-flex flex-wrap gap-2\">\r\n <ng-container *ngFor=\"let collection of category.collectionIds; let last = last\">\r\n <span class=\"popular-link\"\r\n (click)=\"redirectToCollection(collection.refName,category.categoryName)\">{{collection.refName}}</span>\r\n <span *ngIf=\"!last\" class=\"separator\">|</span>\r\n </ng-container>\r\n </div>\r\n <hr *ngIf=\"!last\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #textDescription>\r\n <div class=\"text-description mt-2\">\r\n <ng-container *ngIf=\"content?.textDescription as textDesc\">\r\n <simpo-text-editor [(value)]=\"textDesc.content\" [editable]=\"edit || false\"\r\n [sectionId]=\"data?.id\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <hr>\r\n</ng-template>", styles: [".total-container{height:auto;position:relative}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.pageType{font-size:.9rem;font-weight:600;line-height:22px;color:#87769d}.pages{font-size:.9rem;font-weight:400;line-height:22px;cursor:pointer;color:#87769d}.branding-text{font-size:16px;font-weight:400;line-height:22px;text-decoration:unset}.fw-600{font-weight:600!important}.w-50{width:50%!important}.w-30{width:30%!important}.align-items-start{align-items:start!important}.mt-15{margin-top:15px}.folder-page{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.folder-page mat-icon{font-size:17px;display:flex;align-items:center;justify-content:center;display:none}.hoverWhenEditable:hover{border:1px solid #E9E9E9;border-radius:5px;cursor:pointer}.hoverWhenEditable:hover mat-icon{display:inline}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px}.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}.fs-21{font-size:21px}.popular-searches-title{font-size:1.2rem;font-weight:500}.category-heading{font-size:1rem;font-weight:500;text-transform:capitalize}.category-links{font-size:.9rem;line-height:1.6}.popular-link{cursor:pointer;transition:color .3s ease}.popular-link:hover{text-decoration:underline}.separator{font-weight:300;margin:0 4px}.popular-category:last-child{border-bottom:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type:
|
|
15791
15933
|
//directives
|
|
15792
15934
|
SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }] }); }
|
|
15793
15935
|
}
|
|
@@ -15807,7 +15949,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
15807
15949
|
ContentFitDirective,
|
|
15808
15950
|
TextEditorComponent,
|
|
15809
15951
|
HoverDirective
|
|
15810
|
-
], template: "<section class=\"total-container\" simpoHover\r\n(hovering)=\"showEditTabs($event)\" [spacingHorizontal]=\"stylesLayout\" [simpoBackground]=\"style?.background\" [simpoLayout]=\"style?.layout\" [id]=\"data?.id\">\r\n <div>\r\n <ng-container *ngIf=\"style?.footerType == 'Footer1'\">\r\n <ng-container *ngTemplateOutlet=\"Footer1\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.footerType == 'Footer2'\">\r\n <ng-container *ngTemplateOutlet=\"Footer2\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.footerType == 'Footer3'\">\r\n <ng-container *ngTemplateOutlet=\"Footer3\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.footerType == 'Footer4'\">\r\n <ng-container *ngTemplateOutlet=\"Footer4\"></ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n</section>\r\n\r\n<ng-template #Footer1>\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-md-4\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n </div>\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"descSection\"></ng-container>\r\n </div>\r\n <div *ngIf=\"content?.socialLinks?.display && screenWidth > 475\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-md-8\">\r\n <div class=\"row\">\r\n <ng-container *ngTemplateOutlet=\"foldersVertical\"></ng-container>\r\n </div>\r\n <div *ngIf=\"content?.socialLinks?.display && screenWidth < 475\" class=\"d-flex justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <hr *ngIf=\"content?.displayBranding\">\r\n <div *ngIf=\"content?.displayBranding\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #Footer2>\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-md-3\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n </div>\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"descSection\"></ng-container>\r\n </div>\r\n <div *ngIf=\"content?.socialLinks?.display && screenWidth > 475\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <div class=\"row\">\r\n <ng-container *ngTemplateOutlet=\"pagesHorizontal\"></ng-container>\r\n </div>\r\n <div *ngIf=\"content?.socialLinks?.display && screenWidth < 475\" class=\"d-flex justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <hr *ngIf=\"content?.displayBranding\">\r\n <div *ngIf=\"content?.displayBranding\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #Footer3>\r\n <div class=\"row\" [class.align-items-start]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"foldersVertical\"></ng-container>\r\n </div>\r\n <hr>\r\n <div class=\"row justify-content-between\">\r\n <div class=\"col-md-4\" [class.w-30]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n </div>\r\n <div class=\"col-md-4 d-flex justify-content-center align-items-start\" *ngIf=\"content?.socialLinks?.display\"\r\n [class.w-30]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n <div class=\"col-md-4 d-flex justify-content-end\" *ngIf=\"content?.displayBranding\" [class.w-30]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #Footer4>\r\n <div class=\"row align-items-center\">\r\n <ng-container *ngTemplateOutlet=\"pagesHorizontal\"></ng-container>\r\n </div>\r\n <hr>\r\n <div class=\"row justify-content-between\">\r\n <div class=\"col-md-4\">\r\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n </div>\r\n <div class=\"col-md-4 d-flex justify-content-center align-items-start\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n <div class=\"col-md-4 d-flex justify-content-end\" *ngIf=\"content?.displayBranding\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #logoSection>\r\n <div class=\"d-flex\" [class.justify-content-center]=\"screenWidth < 475\">\r\n <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer mb-4\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"style?.background?.color\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer mb-4\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\r\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #descSection>\r\n <ng-container *ngIf = \"content?.additionalDetails as textItem\" >\r\n <simpo-text-editor [(value)]=\"textItem.value \" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [label]=\"content?.additionalDetails?.label || ''\"></simpo-text-editor>\r\n </ng-container> <!-- <div class=\"description\" [innerHTML]=\"content?.additionalDetails?.value ?? '' | sanitizeHtml\"></div> -->\r\n</ng-template>\r\n\r\n<ng-template #socialIcons>\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0 gap-1\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div class=\"icons\">\r\n <simpo-socia-icons [iconColor]=\"data?.styles?.background?.accentColor\" [socialIconData]=\"item\"\r\n [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #branding>\r\n <div class=\"heading-small text-center branding-text\">Powered By <a class=\"branding-text fw-600\"\r\n href=\"https://simpo.ai\" target=\"_blank\">Simpo.ai</a></div>\r\n</ng-template>\r\n\r\n<ng-template #pagesHorizontal>\r\n <div class=\"col-md-3 mb-3 pageType\" *ngFor=\"let page of pages\" [class.w-50]=\"screenWidth < 475\" [class.text-center]=\"screenWidth < 475\" (click)=\"redirectToPage(page)\">\r\n {{page.pageName}}\r\n </div>\r\n</ng-template>\r\n\r\n<!-- <ng-template #pagesVertical>\r\n <div class=\"page-container col-md-3 mb-3\" [class.w-50]=\"screenWidth < 475\">\r\n <div class=\"pageType mb-3\">{{pageLink}}</div>\r\n <ng-container *ngFor=\"let page of pages\">\r\n <div class=\"pages mb-2\" (click)=\"redirectToPage(page)\">{{page?.pageName}}</div>\r\n </ng-container>\r\n </div>\r\n</ng-template> -->\r\n\r\n<ng-template #foldersVertical>\r\n <div class=\"page-container col-md-3 mb-3\" *ngFor=\"let folder of content?.folder;let folderIndex = index\" [class.w-50]=\"screenWidth < 475\">\r\n <simpo-text-editor [(value)]=\"folder.label\" [editable]=\"edit || false\" [sectionId]=\"data?.id\"></simpo-text-editor>\r\n <div class=\"mt-15\">\r\n <ng-container *ngFor=\"let page of folder.links;let linkIndex = index\">\r\n <div class=\"folder-page\" [ngClass]=\"{'hoverWhenEditable' : edit}\">\r\n <div class=\"pages mb-2\" (click)=\"redirectTo(page)\" [style.color]=\"style?.background?.accentColor\">{{page.label}}</div>\r\n <mat-icon (click)=\"deleteFolderLinks(folderIndex, linkIndex)\" [style.color]=\"style?.background?.accentColor\">delete</mat-icon>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"edit ? addLinks : null; context: {data: folderIndex}\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"(content?.folder?.length || 0) < 4\" [class.w-50]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"edit ? addFolder : null\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #addLinks let-folderIndex=\"data\">\r\n <div class=\"addLinks\" (click)=\"createNewLink(folderIndex)\">\r\n <mat-icon>add</mat-icon>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #addFolder>\r\n <div class=\"addLinks h-100\" (click)=\"createNewFolder()\">\r\n <mat-icon>add</mat-icon>\r\n </div>\r\n</ng-template>\r\n", styles: [".total-container{height:auto;position:relative}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.pageType{font-size:.9rem;font-weight:600;line-height:22px;color:#87769d}.pages{font-size:.9rem;font-weight:400;line-height:22px;cursor:pointer;color:#87769d}.branding-text{font-size:16px;font-weight:400;line-height:22px;text-decoration:unset}.fw-600{font-weight:600!important}.w-50{width:50%!important}.w-30{width:30%!important}.align-items-start{align-items:start!important}.mt-15{margin-top:15px}.folder-page{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.folder-page mat-icon{font-size:17px;display:flex;align-items:center;justify-content:center;display:none}.hoverWhenEditable:hover{border:1px solid #E9E9E9;border-radius:5px;cursor:pointer}.hoverWhenEditable:hover mat-icon{display:inline}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px}.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}\n"] }]
|
|
15952
|
+
], template: "<section class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoBackground]=\"style?.background\" [simpoLayout]=\"style?.layout\" [id]=\"data?.id\">\r\n <div>\r\n <ng-container *ngIf=\"style?.footerType == 'Footer1'\">\r\n <ng-container *ngTemplateOutlet=\"Footer1\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.footerType == 'Footer2'\">\r\n <ng-container *ngTemplateOutlet=\"Footer2\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.footerType == 'Footer3'\">\r\n <ng-container *ngTemplateOutlet=\"Footer3\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.footerType == 'Footer4'\">\r\n <ng-container *ngTemplateOutlet=\"Footer4\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.textDescription?.display\">\r\n <ng-container *ngTemplateOutlet=\"textDescription\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.popularSearches\">\r\n <ng-container *ngTemplateOutlet=\"popularSearches\"></ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n</section>\r\n\r\n<ng-template #Footer1>\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-md-4\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n </div>\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"descSection\"></ng-container>\r\n </div>\r\n <div *ngIf=\"content?.socialLinks?.display && screenWidth > 475\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-md-8\">\r\n <div class=\"row\">\r\n <ng-container *ngTemplateOutlet=\"foldersVertical\"></ng-container>\r\n </div>\r\n <div *ngIf=\"content?.socialLinks?.display && screenWidth < 475\" class=\"d-flex justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <hr *ngIf=\"content?.displayBranding\">\r\n <div *ngIf=\"content?.displayBranding\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #Footer2>\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-md-3\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n </div>\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"descSection\"></ng-container>\r\n </div>\r\n <div *ngIf=\"content?.socialLinks?.display && screenWidth > 475\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <div class=\"row\">\r\n <ng-container *ngTemplateOutlet=\"pagesHorizontal\"></ng-container>\r\n </div>\r\n <div *ngIf=\"content?.socialLinks?.display && screenWidth < 475\" class=\"d-flex justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <hr *ngIf=\"content?.displayBranding\">\r\n <div *ngIf=\"content?.displayBranding\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #Footer3>\r\n <div class=\"row\" [class.align-items-start]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"foldersVertical\"></ng-container>\r\n </div>\r\n <hr>\r\n <div class=\"row justify-content-between\">\r\n <div class=\"col-md-4\" [class.w-30]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n </div>\r\n <div class=\"col-md-4 d-flex justify-content-center align-items-start\" *ngIf=\"content?.socialLinks?.display\"\r\n [class.w-30]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n <div class=\"col-md-4 d-flex justify-content-end\" *ngIf=\"content?.displayBranding\" [class.w-30]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #Footer4>\r\n <div class=\"row align-items-center\">\r\n <ng-container *ngTemplateOutlet=\"pagesHorizontal\"></ng-container>\r\n </div>\r\n <hr>\r\n <div class=\"row justify-content-between\">\r\n <div class=\"col-md-4\">\r\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n </div>\r\n <div class=\"col-md-4 d-flex justify-content-center align-items-start\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n <div class=\"col-md-4 d-flex justify-content-end\" *ngIf=\"content?.displayBranding\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #logoSection>\r\n <div class=\"d-flex\" [class.justify-content-center]=\"screenWidth < 475\">\r\n <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer mb-4\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"navigateToHome()\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\"\r\n (click)=\"navigateToHome()\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"style?.background?.color\"\r\n (click)=\"navigateToHome()\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer mb-4\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"navigateToHome()\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\r\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #descSection>\r\n <ng-container *ngIf=\"content?.additionalDetails as textItem\">\r\n <simpo-text-editor [(value)]=\"textItem.value \" [editable]=\"edit || false\" [sectionId]=\"data?.id\"\r\n [label]=\"content?.additionalDetails?.label || ''\"></simpo-text-editor>\r\n </ng-container>\r\n <!-- <div class=\"description\" [innerHTML]=\"content?.additionalDetails?.value ?? '' | sanitizeHtml\"></div> -->\r\n</ng-template>\r\n\r\n<ng-template #socialIcons>\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0 gap-1\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div class=\"icons\">\r\n <simpo-socia-icons [iconColor]=\"data?.styles?.background?.accentColor\" [socialIconData]=\"item\"\r\n [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #branding>\r\n <div class=\"heading-small text-center branding-text\">Powered By <a class=\"branding-text fw-600\"\r\n href=\"https://simpo.ai\" target=\"_blank\">Simpo.ai</a></div>\r\n</ng-template>\r\n\r\n<ng-template #pagesHorizontal>\r\n <div class=\"col-md-3 mb-3 pageType\" *ngFor=\"let page of pages\" [class.w-50]=\"screenWidth < 475\"\r\n [class.text-center]=\"screenWidth < 475\" (click)=\"redirectToPage(page)\">\r\n {{page.pageName}}\r\n </div>\r\n</ng-template>\r\n\r\n<!-- <ng-template #pagesVertical>\r\n <div class=\"page-container col-md-3 mb-3\" [class.w-50]=\"screenWidth < 475\">\r\n <div class=\"pageType mb-3\">{{pageLink}}</div>\r\n <ng-container *ngFor=\"let page of pages\">\r\n <div class=\"pages mb-2\" (click)=\"redirectToPage(page)\">{{page?.pageName}}</div>\r\n </ng-container>\r\n </div>\r\n</ng-template> -->\r\n\r\n<ng-template #foldersVertical>\r\n <div class=\"page-container col-md-3 mb-3\" *ngFor=\"let folder of content?.folder;let folderIndex = index\"\r\n [class.w-50]=\"screenWidth < 475\">\r\n <simpo-text-editor [(value)]=\"folder.label\" [editable]=\"edit || false\" [sectionId]=\"data?.id\"></simpo-text-editor>\r\n <div class=\"mt-15\">\r\n <ng-container *ngFor=\"let page of folder.links;let linkIndex = index\">\r\n <div class=\"folder-page\" [ngClass]=\"{'hoverWhenEditable' : edit}\">\r\n <div class=\"pages mb-2\" (click)=\"redirectTo(page)\" [style.color]=\"style?.background?.accentColor\">\r\n {{page.label}}</div>\r\n <mat-icon (click)=\"deleteFolderLinks(folderIndex, linkIndex)\"\r\n [style.color]=\"style?.background?.accentColor\">delete</mat-icon>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"edit ? addLinks : null; context: {data: folderIndex}\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"(content?.folder?.length || 0) < 4\" [class.w-50]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"edit ? addFolder : null\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #addLinks let-folderIndex=\"data\">\r\n <div class=\"addLinks\" (click)=\"createNewLink(folderIndex)\">\r\n <mat-icon>add</mat-icon>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #addFolder>\r\n <div class=\"addLinks h-100\" (click)=\"createNewFolder()\">\r\n <mat-icon>add</mat-icon>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #popularSearches>\r\n <div class=\"popular-searches mt-4\">\r\n <div class=\"popular-searches-title mb-2\">Popular Searches</div>\r\n <hr class=\"mb-4\">\r\n <ng-container *ngFor=\"let category of popularSearchedCategories; let last = last\">\r\n <div class=\"popular-category mb-4\" *ngIf=\"category.collectionIds && category.collectionIds.length > 0\">\r\n <div class=\"category-heading mb-2\">{{category.categoryName}}</div>\r\n <div class=\"category-links d-flex flex-wrap gap-2\">\r\n <ng-container *ngFor=\"let collection of category.collectionIds; let last = last\">\r\n <span class=\"popular-link\"\r\n (click)=\"redirectToCollection(collection.refName,category.categoryName)\">{{collection.refName}}</span>\r\n <span *ngIf=\"!last\" class=\"separator\">|</span>\r\n </ng-container>\r\n </div>\r\n <hr *ngIf=\"!last\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #textDescription>\r\n <div class=\"text-description mt-2\">\r\n <ng-container *ngIf=\"content?.textDescription as textDesc\">\r\n <simpo-text-editor [(value)]=\"textDesc.content\" [editable]=\"edit || false\"\r\n [sectionId]=\"data?.id\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <hr>\r\n</ng-template>", styles: [".total-container{height:auto;position:relative}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.pageType{font-size:.9rem;font-weight:600;line-height:22px;color:#87769d}.pages{font-size:.9rem;font-weight:400;line-height:22px;cursor:pointer;color:#87769d}.branding-text{font-size:16px;font-weight:400;line-height:22px;text-decoration:unset}.fw-600{font-weight:600!important}.w-50{width:50%!important}.w-30{width:30%!important}.align-items-start{align-items:start!important}.mt-15{margin-top:15px}.folder-page{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.folder-page mat-icon{font-size:17px;display:flex;align-items:center;justify-content:center;display:none}.hoverWhenEditable:hover{border:1px solid #E9E9E9;border-radius:5px;cursor:pointer}.hoverWhenEditable:hover mat-icon{display:inline}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px}.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}.fs-21{font-size:21px}.popular-searches-title{font-size:1.2rem;font-weight:500}.category-heading{font-size:1rem;font-weight:500;text-transform:capitalize}.category-links{font-size:.9rem;line-height:1.6}.popular-link{cursor:pointer;transition:color .3s ease}.popular-link:hover{text-decoration:underline}.separator{font-weight:300;margin:0 4px}.popular-category:last-child{border-bottom:none}\n"] }]
|
|
15811
15953
|
}], ctorParameters: () => [{ type: EventsService }, { type: RestService }, { type: i1$1.MatDialog }, { type: i2$2.Router }], propDecorators: { data: [{
|
|
15812
15954
|
type: Input
|
|
15813
15955
|
}], index: [{
|
|
@@ -20231,7 +20373,7 @@ class ProductListComponent extends BaseSection {
|
|
|
20231
20373
|
return brightness > threshold ? '#000000' : '#ffffff';
|
|
20232
20374
|
}
|
|
20233
20375
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductListComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: StorageServiceService }, { token: i8$3.MatBottomSheet }, { token: i1$1.MatDialog }, { token: CartService }, { token: i6$1.MessageService }, { token: i0.Renderer2 }, { token: AnalyticsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
20234
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductListComponent, isStandalone: true, selector: "simpo-product-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize($event)", "window:scroll": "onWindowScroll($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "listScrollContainer", first: true, predicate: ["listScrollContainer"], descendants: true }, { propertyName: "filterScroll", first: true, predicate: ["filterScroll"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<!-- <div class=\"input-group\" *ngIf=\"isMobile\" [ngClass]=\"{'input-group-sticky': scrollingValue > 20}\">\r\n <mat-icon class=\"f-20 d-flex align-item-center justify-content-center\">search</mat-icon>\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\r\n</div> -->\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n <section [id]=\"data?.id\" class=\"container-fluid total-container\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\"\r\n [style.paddingTop.px]=\"isMobile ? '0 !important' : ''\" [attr.style]=\"customClass\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n\r\n <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n <p-speedDial [model]=\"items\" direction=\"up\"\r\n [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\"></p-speedDial>\r\n </div> -->\r\n\r\n <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\">\r\n <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\">\r\n <div class=\"filter body-large\">\r\n Filters\r\n </div>\r\n <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\r\n CLEAR ALL\r\n </div>\r\n </div>\r\n <div itemid=\"top-section\" class=\"d-flex align-items-center justify-content-between\"\r\n style=\"width: 77.5%; margin-right: 1%;\">\r\n <div class=\"d-flex gap-15\" style=\"width: 75%; display:flex; flex-wrap:wrap\">\r\n <ng-container *ngFor=\"let filter of filteredChips\">\r\n <div class=\"d-flex justify-content-between align-item-center w-90 chip\">\r\n <span>{{filter.name}}</span>\r\n <span style=\"cursor: pointer; width:20px; height: 20px;\">\r\n <mat-icon style=\"font-size: 20px;\" (click)=\"removeFilter(filter)\">close</mat-icon>\r\n </span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <!-- <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\r\n <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\r\n <select [(ngModel)]=\"sortBy\" (change)=\"applyFilter($event, 'SORT')\" style=\"color: black;\">\r\n <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{ filter.name }}</option>\r\n </select>\r\n </div> -->\r\n <div class=\"custom-sort-dropdown\" tabindex=\"0\" (blur)=\"closeDropdown()\" (click)=\"toggleDropdown()\">\r\n <span class=\"sort-label\">Sort By:</span>\r\n <span class=\"selected-value\">{{ getSelectedName() || 'Featured' }}</span>\r\n <span class=\"toggle-icon\" [class.open]=\"isOpen\">▾</span> <!-- Down arrow, rotates open -->\r\n\r\n <div class=\"options\" *ngIf=\"isOpen\">\r\n <div *ngFor=\"let filter of filteringArray\" class=\"option\" [class.selected]=\"filter.value === sortBy\"\r\n (click)=\"selectOption(filter, $event)\">\r\n {{ filter.name }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"isMobile\" class=\"d-flex w-100 onlyMobile gap-15 flex-wrap\">\r\n <ng-container *ngFor=\"let filter of filteredChips\">\r\n <div class=\"d-flex justify-content-between align-item-center w-90 chip\">\r\n <span>{{filter.name}}</span>\r\n <span style=\"cursor: pointer; width:20px; height: 20px;\">\r\n <mat-icon style=\"font-size: 20px;\" (click)=\"removeFilter(filter)\">close</mat-icon>\r\n </span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"main-product-section\">\r\n <div class=\"filter-side\">\r\n <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\r\n </div>\r\n <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\r\n <ng-container *ngIf=\"!apiLoading\">\r\n <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\"\r\n (scroll)=\"handleProductListScroll()\" #listScrollContainer>\r\n <div *ngFor=\"let product of responseData; let i = index\" class=\"product\"\r\n [style.width]=\"applyProductWidth() ? getProductWidth() : ''\" style=\"cursor:pointer; position: relative;\">\r\n <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n <ng-container *ngTemplateOutlet=\"ProductDesc; context: {data: product, index: i}\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"styles?.theme != theme.Theme1\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"screenWidth > 475\"\r\n [index]=\"i\"></simpo-small-product-listing>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <simpo-card-skeleton-loader *ngIf=\"isListLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\r\n <section class=\"empty-cart\" *ngIf=\"!isListLoading && responseData?.length == 0\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" style=\"height: 150px; width: 150px;\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <div class=\"heading-medium d-flex justify-content-center\">\r\n Product list is empty\r\n </div>\r\n <div class=\"description d-flex justify-content-center mt-4\">\r\n Looks like no item is present with filter. Go ahead & explore top categories.\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-container>\r\n <simpo-card-skeleton-loader *ngIf=\"apiLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\r\n </div>\r\n\r\n <div class=\"bottom-filter\">\r\n <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\r\n <mat-icon>sort</mat-icon>\r\n <span>Sort by</span>\r\n </div>\r\n <div class=\"divider\"></div>\r\n <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\r\n <mat-icon>filter_list</mat-icon>\r\n <span>Filter</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isEcommerce]=\"true\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\"\r\n [theme]=\"{ width: '100%', height: '40vh', 'border-radius': '10px', 'position': 'relative', 'right': '5px' }\"></ngx-skeleton-loader>\r\n\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n <div class=\"fav-icon-wrapper\">\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border\r\n </mat-icon>\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite\r\n </mat-icon>\r\n <span class=\"fav-tooltip\">\r\n {{ product.whislist ? 'Remove from wishlist' : 'Add to wishlist' }}\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n\r\n<ng-template #Tags let-product=\"data\">\r\n <div class=\"tag-icon\" *ngIf=\"product.tags\">{{product.tags}}</div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #FilterSection>\r\n <section>\r\n <div class=\"categories-section\" *ngIf=\"categories?.length\">\r\n <div class=\"categories heading-small\">\r\n <h6><b>Shop by Categories</b></h6>\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let category of displayedCategories\"\r\n (click)=\"applyFilter(category, 'FILTER')\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"category.status\" />\r\n <div class=\"trim-text\">{{category.option | titlecase}}</div>\r\n </div>\r\n <div *ngIf=\"categories.length > 4\" class=\"toggle-categories\" (click)=\"toggleCategories()\"\r\n [style.color]=\"styles?.background?.accentColor\">\r\n <span class=\"toggle-text\">\r\n {{ showAllCategories ? 'Show Less' : 'Show More' }}\r\n <span class=\"dropdown-icon\">\r\n <ng-container *ngIf=\"!showAllCategories\">\r\n <mat-icon>expand_more</mat-icon>\r\n </ng-container>\r\n <ng-container *ngIf=\"showAllCategories\">\r\n <mat-icon>expand_less</mat-icon>\r\n </ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"categories-section\" *ngIf=\"collections?.length\">\r\n <div class=\"categories heading-small\">\r\n <h6><b>Shop by Collections</b></h6>\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let collection of displayedCollections\"\r\n (click)=\"applyFilter(collection, 'FILTER')\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"collection.status\" />\r\n <div class=\"trim-text\">{{collection.option | titlecase}}</div>\r\n </div>\r\n <div *ngIf=\"collections.length > 4\" class=\"toggle-categories\" (click)=\"toggleCollections()\"\r\n [style.color]=\"styles?.background?.accentColor\">\r\n <span class=\"toggle-text\">\r\n {{ showAllCollections ? 'Show Less' : 'Show More' }}\r\n <span class=\"dropdown-icon\">\r\n <ng-container *ngIf=\"!showAllCollections\"><mat-icon>expand_more</mat-icon></ng-container>\r\n <ng-container *ngIf=\"showAllCollections\"><mat-icon>expand_less</mat-icon></ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"categories-section\">\r\n <div class=\"categories heading-small\">\r\n <h6><b>Ratings</b></h6>\r\n </div>\r\n <div class=\"category-options\"\r\n *ngFor=\"let size of ['5 Stars', '4 Stars above', '3 Stars above', '2 Stars above', '1 Star above']\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\" />\r\n <div class=\"trim-text\">{{ size }}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"categories-section\">\r\n <div class=\"categories heading-small\">\r\n <h6><b>Shop by price</b></h6>\r\n </div>\r\n <label class=\"category-options\" *ngFor=\"let range of priceRanges;let i = index\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [(ngModel)]=\"range.selected\" (change)=\"onPriceRangeChange(i)\" />\r\n <div class=\"trim-text\">{{ range.label }}</div>\r\n </label>\r\n </div>\r\n\r\n\r\n\r\n <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"categories heading-small\">\r\n <h6><b>Product Type</b></h6>\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let size of productTypesData\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"size.status\" (change)=\"toggleProductSize(size)\" />\r\n <div class=\"trim-text\">{{ size.size }}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"categories heading-small\">\r\n <h6><b>Shop for</b></h6>\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let size of shopForData\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"size.status\" (change)=\"toggleShopSize(size)\" />\r\n <div class=\"trim-text\">{{ size.size }}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"categories heading-small\">\r\n <h6><b>Material</b></h6>\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let size of materialSizeData\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"size.status\" (change)=\"toggleMaterialSize(size)\" />\r\n <div class=\"trim-text\">{{ size.size }}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"categories heading-small\">\r\n <h6><b>Metal</b></h6>\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let size of metalSizeData\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"size.status\" (change)=\"toggleMetalSize(size)\" />\r\n <div class=\"trim-text\">{{ size.size }}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"categories heading-small\">\r\n <h6><b>Ring Style</b></h6>\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let size of ringSizes\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"size.status\" (change)=\"toggleSize(size)\" />\r\n <div class=\"trim-text\">{{ size.size }}</div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #SortingSection>\r\n <section style=\"padding: 10px\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\r\n <span>Sort by</span>\r\n <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n </div>\r\n <mat-radio-group class=\"d-flex flex-column\" [(ngModel)]=\"sortBy\">\r\n <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"selectOption(sortingType, $event)\"\r\n [value]=\"sortingType.value\">{{sortingType.name}}</mat-radio-button>\r\n </mat-radio-group>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc let-product=\"data\" let-index=\"index\">\r\n <ng-template #theme1style1>\r\n <div class=\"product-card position-relative h-100\" [ngClass]=\"{'hover-effect': styles?.theme == theme.Theme1}\">\r\n <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\"\r\n class=\"default-image position-relative\">\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\r\n (click)=\"proceedToProductDesc(product.itemId)\" [simpoBackground]=\"styles?.background\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\r\n </div>\r\n\r\n <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\"\r\n class=\"default-image position-relative\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"getProductImages(product)\" alt=\"\" class=\"product-img\" [class.fade-out]=\"imageIndex == index\"\r\n (click)=\"proceedToProductDesc(product.itemId)\" [simpoBackground]=\"styles?.background\">\r\n <div class=\"carousel-buttons\" *ngIf=\"product.itemImages?.length > 1\">\r\n <div><mat-icon (click)=\"changeImage(product, 'PREV', index)\">keyboard_arrow_left</mat-icon></div>\r\n <div><mat-icon (click)=\"changeImage(product, 'NEXT', index)\">keyboard_arrow_right</mat-icon></div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\r\n </div>\r\n\r\n <div class=\"mt-2 w-100\">\r\n <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\r\n <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\"\r\n [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\r\n [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\r\n (click)=\"selectVarient(product, varient)\">\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex align-item-center justify-content-between\" [style.display]=\"true ? 'block!important' : ''\">\r\n <div class=\"price body-large text-left d-flex align-items-center g-10\">\r\n <div class=\"fs-16\">\r\n <span [innerHTML]='currency'></span>\r\n {{product?.price?.sellingPrice | number:'1.2-2'}}\r\n </div>\r\n\r\n <div class=\"fs-16 text-start\">\r\n <span *ngIf=\"product?.price?.value - product?.price?.discountedPrice > 2\" class=\"discount-price\">\r\n {{product?.price?.value | number:'1.2-2'}}\r\n </span>\r\n </div>\r\n <!-- <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice < product?.price?.sellingPrice\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.sellingPrice | number:'1.2-2'}}\r\n </div> -->\r\n </div>\r\n\r\n <div class=\"product-name heading-large w-100 text-left trim-text\"\r\n [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n\r\n <div\r\n *ngIf=\"content?.display?.showButton && !ecomConfigs?.appointmentBookingEnabled && product.itemInventory?.openingStock > 0\"\r\n class=\"add-to-cart-btn\">\r\n <button class=\"send-btn d-flex align-items-center justify-content-center p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n [id]=\"data?.id+getButtonId(1)\" *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\r\n <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\r\n <div class=\"quantity full-width-quantity\" [style.borderColor]=\"getButtonStyle(1)?.background\"\r\n [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\r\n [style.color]=\"getButtonStyle(1)?.textColor\"\r\n (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\r\n [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n </div>\r\n </div>\r\n <div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n <div class=\"try-button-section\"\r\n *ngIf=\"content?.display?.showButton && ecomConfigs?.appointmentBookingEnabled && product?.itemInventory?.openingStock > 0\">\r\n <div class=\"try-at-home\">\r\n <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\r\n HOME</button>\r\n </div>\r\n <div class=\"video-call-image\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\"\r\n alt=\"video\" (click)=\"openDialogBox(dialogBox, product.name)\" />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-container *ngIf=\"screenWidth < 475 && styles?.mobileColumn === 1; else theme1style1\">\r\n <div class=\"row w-100\">\r\n <div class=\"col-8 d-flex flex-column gap-3\">\r\n <div class=\"text-left\" [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n <div class=\"fs-16 text-start\">\r\n <span [innerHTML]='currency'></span>\r\n {{product?.price?.sellingPrice | number:'1.2-2'}}\r\n </div>\r\n <div class=\"d-flex w-45\">\r\n <div\r\n *ngIf=\"content?.display?.showButton && !ecomConfigs?.appointmentBookingEnabled && product.itemInventory?.openingStock > 0\"\r\n class=\"add-to-cart-btn w-100\">\r\n <button class=\"send-btn d-flex align-items-center justify-content-center p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n [id]=\"data?.id+getButtonId(1)\" *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\r\n <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\r\n <div class=\"quantity full-width-quantity br-8\" [style.borderColor]=\"getButtonStyle(1)?.background\"\r\n [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n <span class=\"change-quantity w-35 br-8\" [style.background]=\"getButtonStyle(1)?.background\"\r\n [style.color]=\"getButtonStyle(1)?.textColor\"\r\n (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n <span class=\"change-quantity w-35 br-8\" [style.background]=\"getButtonStyle(1)?.background\"\r\n [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n </div>\r\n </div>\r\n <div>\r\n <button disabled class=\"out-of-stock w-100\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n <div class=\"try-button-section w-100\"\r\n *ngIf=\"content?.display?.showButton && ecomConfigs?.appointmentBookingEnabled && product?.itemInventory?.openingStock > 0\">\r\n <div class=\"try-at-home\">\r\n <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\r\n HOME</button>\r\n </div>\r\n <div class=\"video-call-image\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\"\r\n alt=\"video\" (click)=\"openDialogBox(dialogBox, product.name)\" />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 h-100 position-relative\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"getProductImages(product)\" alt=\"\" class=\"w-h-110\" [class.fade-out]=\"imageIndex == index\"\r\n (click)=\"proceedToProductDesc(product.itemId)\">\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n </ng-container>\r\n\r\n\r\n\r\n\r\n\r\n</ng-template>\r\n\r\n\r\n\r\n<ng-template #dialogBox>\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header d-flex align-item-center\">\r\n <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n <div class=\"schedule-header d-flex align-items-center justify-content-end p-2\">\r\n <mat-icon (click)=\"matCloseDialog()\"\r\n class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"modal-body h-100\">\r\n <div class=\"row h-100 w-100 video-call-container\">\r\n <div class=\"col-6 h-100\" *ngIf=\"!isMobile\">\r\n <img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/557699c1753779503913freepik-overhead-shot-a-person-holding-a-smartphone-with-a-1029_vmg8GqHj (online-video-cutter.com).gif\"\r\n alt=\"\" class=\"w-100 h-100\" style=\"object-fit: cover;\">\r\n </div>\r\n <div class=\"col-6 position-relative h-100 call-details\">\r\n <!-- Name Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\r\n <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\r\n (input)=\"onInputChange('username')\">\r\n </div>\r\n\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\r\n <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\r\n (input)=\"onInputChange('email')\">\r\n </div>\r\n\r\n <!-- Mobile Number Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\r\n <div class=\"sub-text-call\">IN +91</div>\r\n <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\r\n (input)=\"onInputChange('mobileNumber')\">\r\n </div>\r\n\r\n\r\n <!-- Pincode Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\r\n <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\r\n <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n </div>\r\n <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\r\n (input)=\"onInputChange('pincode')\">\r\n </div>\r\n <div class=\"language my-3\">\r\n <div class=\"mini-text mb-2\">Language Preference</div>\r\n <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\r\n <ng-container *ngFor=\"let lang of languages\">\r\n <div class=\"lang px-2 py-1 rounded cursor-pointer\"\r\n [style.background]=\"lang == selectedLang ? data?.styles?.background?.accentColor : ''\"\r\n (click)=\"selectedLang = lang\"\r\n [style.color]=\"lang == selectedLang ? getTextColor(data?.styles?.background?.accentColor) : '#000000'\">\r\n {{lang}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"selectedLang == 'Others'\">\r\n <div class=\"input-field my-3\">\r\n <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\r\n </div>\r\n </ng-container>\r\n <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\" (click)=\"scheduleVideoCall()\"\r\n [disabled]=\"isSubmitting\">\r\n <ng-container *ngIf=\"isSubmitting\">\r\n <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\r\n <span class=\"visually-hidden\">Loading...</span>\r\n </div>\r\n SCHEDULING...\r\n </ng-container>\r\n <ng-container *ngIf=\"!isSubmitting && !scheduled\">\r\n <mat-icon>video_call</mat-icon> \r\n SCHEDULE A VIDEO CALL\r\n </ng-container>\r\n <ng-container *ngIf=\"scheduled\">\r\n <mat-icon>check_circle</mat-icon> \r\n SCHEDULED SUCCESSFULLY\r\n </ng-container>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}input[type=checkbox]{accent-color:var(--color)}.total-container{position:relative}.discount-price{color:#d3d3d3;text-decoration:line-through}.custom-sort-dropdown{display:inline-flex;justify-content:flex-end;flex-grow:1;align-items:center;gap:6px;padding:6px 12px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-weight:600;color:#000;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:6px;position:relative;background-color:#fff;width:fit-content;min-width:fit-content;max-width:fit-content;outline:none;border:none}.sort-label{color:#555;white-space:nowrap}.selected-value{flex-shrink:0;white-space:nowrap;color:#000}.toggle-icon{font-size:20px;transition:transform .3s ease;-webkit-user-select:none;user-select:none}.toggle-icon.open{transform:rotate(180deg)}.options{position:absolute;top:100%;left:0;right:0;margin-top:4px;background-color:#fff;border:none;border-radius:0 0 6px 6px;box-shadow:0 4px 6px #0000001a;max-height:180px;overflow-y:auto;z-index:100;font-weight:400;text-align:left!important}.option{padding:8px 12px;cursor:pointer;white-space:nowrap;transition:background-color .2s ease}.option:hover{background-color:#fff;color:#000}.option.selected{background-color:#fff;color:#000;font-weight:600}.video-call-container{align-items:center}@media screen and (min-width: 1024px){.add-to-cart-btn{display:none}.add-to-cart-btn button{height:35px;font-size:16px!important}.product-card .add-to-cart-btn,.product-card{display:none}.product-card:hover .add-to-cart-btn,.product-card:hover{display:flex;z-index:100!important;padding:10px;left:0;position:absolute;width:100%;background:#fff;border:none;border-radius:0 0 10px 10px/0px 0px 10px 10px!important}.product-card .try-button-section{display:none}.product-card:hover .try-button-section{display:flex;z-index:100!important;padding:10px;left:0;position:absolute;width:100%;background:#fff;border:none;border-radius:0 0 10px 10px/0px 0px 10px 10px!important;box-shadow:0 16px 32px #b6b2b233}.product-card .fav-icon{display:none}.product-card:hover .fav-icon{display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100!important}}::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:#fff!important}.fav-icon{position:absolute;z-index:100;padding:5px;right:10px;top:10px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.f-20{font-size:20px}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.fav-tooltip{visibility:hidden;opacity:0;background:#222;color:#fff;font-size:10px;padding:4px 10px;border-radius:5px;position:absolute;top:40px;right:30px;white-space:nowrap;z-index:200;transition:opacity .2s;pointer-events:none;box-shadow:0 2px 8px #00000026}.fav-icon-wrapper:hover .fav-tooltip{visibility:visible;opacity:1}.discounted-price{margin-top:-3px;font-size:14px!important}.filter-side{width:20%;position:sticky;top:0;overflow-y:auto;height:100%;border-right:1px solid lightgrey}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.price-ranges{display:flex;flex-direction:column;gap:8px;padding-left:8px;max-width:250px}.send-btn:hover{transform:translateY(-1px);box-shadow:0 4px 8px #8b5cf64d}.price-range-item{font-size:14px;color:#333;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:8px}.price-range-item input[type=checkbox]{width:16px;height:16px}.categories-section{padding:.8rem 0rem;border-bottom:1px solid #D8D8D8}.categories-section:last-child{padding:.8rem 0rem;border-bottom:none}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.toggle-categories{margin-top:8px;cursor:pointer;font-weight:500;display:inline-flex;align-items:center;-webkit-user-select:none;user-select:none;width:100%}.empty-cart{display:flex;align-items:center;justify-content:center;text-align:center;height:75vh}.toggle-text .dropdown-icon{margin-left:6px;font-size:1em;margin-top:5px}.toggle-text{display:flex;align-items:center}.categories{display:flex;padding:1rem 0rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 0rem;gap:11px;font-weight:400!important}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem 1.5rem}.button-section button{position:relative;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px;white-space:nowrap;overflow:hidden}.chip{padding:5px 15px;border-radius:20px;gap:5px;width:max-content;margin:3px 0;transition:.3s opacity ease;border:1px solid}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;flex-direction:column-reverse}.price-range{color:#93959e;font-size:15px;white-space:nowrap}.right-side{width:80%;padding-bottom:50px;height:100vh;overflow-y:auto;flex:1 1 0;min-width:0}.bottom-filter{display:none}.onlyMobile{display:none!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray;cursor:pointer}.varient-list .selected-varient{border:1px solid transparent}:is() .speeddial-linear .p-speeddial-direction-up{position:relative;bottom:0%;right:0}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.input-group-sticky{width:100%;height:57px}.input-group{position:sticky;top:0;width:95%;z-index:100;padding:5px;outline:none;border:none;border-radius:5px;height:7vh;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin:15px auto}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.back-to-home{background-color:#9b9a9a1c;padding:5px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:fixed;right:3px;top:50%;cursor:pointer}.back-to-home .mat-icon{font-size:16px;height:16px;width:16px}.try-button-section{display:flex;justify-content:space-between;align-items:center}.try-button-section .try-at-home{width:78%}.try-button-section .try-at-home button{border:1px solid #DE57E5;border-radius:5px;font-size:14px!important;padding:5px 0!important}.try-button-section .video-call-image{width:20%;height:32px}.try-button-section .video-call-image img{width:100%;height:100%}.box-shadow{box-shadow:#0000003d 0 3px 4px;border-radius:10px!important}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mtb-5{margin-top:5px;margin-bottom:5px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.gap-15{gap:15px}.flex-wrap{flex-wrap:wrap}.carousel-buttons{display:flex;position:absolute;bottom:0;left:10px;gap:5px;transform:translateY(-50%);pointer-events:none}.carousel-buttons div{background:#fff;display:flex;align-items:center;border-radius:100%;justify-content:center;pointer-events:auto}.main-product-section{height:100vh;display:flex;position:relative}.filter-side{max-width:20%;width:100%;flex:0 0 20%}.modal-content{height:100%;border:none;border-radius:0!important}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9;border-radius:0!important}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.tag-icon{position:absolute!important;top:10px;left:10px;background:#e9bb18;text-transform:uppercase;padding:5px 10px;border:none;border-radius:8px;font-size:10px;color:#000}.filter-top-section{border-right:1px solid lightgrey;width:20%;padding:1rem .5em 1rem 0rem;border-bottom:1px solid lightgrey}.product-parent{width:100%;display:flex;flex-wrap:wrap;padding:10px;z-index:1}.product-parent .product{height:auto;transform:none;z-index:1;background-color:#fff}.product-parent .product .product-card{height:100%;padding:10px;display:flex;flex-direction:column;justify-content:flex-start;transition:all .3s ease-in-out}.product-parent .product .product-name{color:#222;font-size:14px!important;line-height:26px;margin-bottom:10px;text-align:left!important;width:220px;font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:all .3s ease-in-out}.product-parent .product .product-img{border-radius:10px;width:100%;height:180px;z-index:1;border:.5px solid #eee}.product-parent .product .default-image img{width:100%;height:180px;border-radius:10px}.product-parent .product:hover{height:auto!important;transform:scale(1.05);border-radius:10px!important;box-shadow:0 16px 32px #b6b2b299;z-index:100!important}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important;padding-top:0!important}.product-name{font-size:14px}.product-parent{gap:10px}.product{padding:10px!important;margin-top:0!important;height:auto!important;transform:none!important;z-index:1!important;box-shadow:0 8px 16px #0003!important}.product .product-card{padding:0!important}.out-of-stock{font-size:12px!important}.discounted-price{font-size:14px!important}.add-to-cart-btn button{font-size:14px!important;padding:5px!important}.call-details{width:100%}.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:flex!important;row-gap:0px}.onlyMobile mat-icon{pointer-events:auto!important;z-index:1000}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:100000001;width:100%;margin-left:-5px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:100%}.default-image img{width:100%;height:100%;box-shadow:#0000003d 0 3px 8px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important;height:95%!important;padding-bottom:0!important}.main-product-section{height:auto;display:flex;position:relative;padding-bottom:7rem}}.fs-16{font-size:16px!important}.mobile-filter-chip{display:flex;align-items:center;gap:15px;border:1px solid;border-radius:30px;padding:5px 15px;height:35px}.mobile-filter-chip mat-icon{font-size:20px;display:flex;align-items:center;justify-content:center}.w-h-110{width:110px;height:110px}.w-45{width:45%}.br-8{border-radius:8px}.w-35{width:35%!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i7$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i7$2.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i8$4.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: CardSkeletonLoaderComponent, selector: "simpo-card-skeleton-loader", inputs: ["count", "showTitles"] }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data", "isScrollable", "isCategoryProductList", "customClass", "index"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
|
|
20376
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductListComponent, isStandalone: true, selector: "simpo-product-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize()", "window:scroll": "onWindowScroll($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "listScrollContainer", first: true, predicate: ["listScrollContainer"], descendants: true }, { propertyName: "filterScroll", first: true, predicate: ["filterScroll"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<!-- <div class=\"input-group\" *ngIf=\"isMobile\" [ngClass]=\"{'input-group-sticky': scrollingValue > 20}\">\r\n <mat-icon class=\"f-20 d-flex align-item-center justify-content-center\">search</mat-icon>\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\r\n</div> -->\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n <section [id]=\"data?.id\" class=\"container-fluid total-container\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\"\r\n [style.paddingTop.px]=\"isMobile ? '0 !important' : ''\" [attr.style]=\"customClass\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n\r\n <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n <p-speedDial [model]=\"items\" direction=\"up\"\r\n [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\"></p-speedDial>\r\n </div> -->\r\n\r\n <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\">\r\n <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\">\r\n <div class=\"filter body-large\">\r\n Filters\r\n </div>\r\n <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\r\n CLEAR ALL\r\n </div>\r\n </div>\r\n <div itemid=\"top-section\" class=\"d-flex align-items-center justify-content-between\"\r\n style=\"width: 77.5%; margin-right: 1%;\">\r\n <div class=\"d-flex gap-15\" style=\"width: 75%; display:flex; flex-wrap:wrap\">\r\n <ng-container *ngFor=\"let filter of filteredChips\">\r\n <div class=\"d-flex justify-content-between align-item-center w-90 chip\">\r\n <span>{{filter.name}}</span>\r\n <span style=\"cursor: pointer; width:20px; height: 20px;\">\r\n <mat-icon style=\"font-size: 20px;\" (click)=\"removeFilter(filter)\">close</mat-icon>\r\n </span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <!-- <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\r\n <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\r\n <select [(ngModel)]=\"sortBy\" (change)=\"applyFilter($event, 'SORT')\" style=\"color: black;\">\r\n <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{ filter.name }}</option>\r\n </select>\r\n </div> -->\r\n <div class=\"custom-sort-dropdown\" tabindex=\"0\" (blur)=\"closeDropdown()\" (click)=\"toggleDropdown()\">\r\n <span class=\"sort-label\">Sort By:</span>\r\n <span class=\"selected-value\">{{ getSelectedName() || 'Featured' }}</span>\r\n <span class=\"toggle-icon\" [class.open]=\"isOpen\">▾</span> <!-- Down arrow, rotates open -->\r\n\r\n <div class=\"options\" *ngIf=\"isOpen\">\r\n <div *ngFor=\"let filter of filteringArray\" class=\"option\" [class.selected]=\"filter.value === sortBy\"\r\n (click)=\"selectOption(filter, $event)\">\r\n {{ filter.name }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"isMobile\" class=\"d-flex w-100 onlyMobile gap-15 flex-wrap\">\r\n <ng-container *ngFor=\"let filter of filteredChips\">\r\n <div class=\"d-flex justify-content-between align-item-center w-90 chip\">\r\n <span>{{filter.name}}</span>\r\n <span style=\"cursor: pointer; width:20px; height: 20px;\">\r\n <mat-icon style=\"font-size: 20px;\" (click)=\"removeFilter(filter)\">close</mat-icon>\r\n </span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"main-product-section\">\r\n <div class=\"filter-side\">\r\n <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\r\n </div>\r\n <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\r\n <ng-container *ngIf=\"!apiLoading\">\r\n <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\"\r\n (scroll)=\"handleProductListScroll()\" #listScrollContainer>\r\n <div *ngFor=\"let product of responseData; let i = index\" class=\"product\"\r\n [style.width]=\"applyProductWidth() ? getProductWidth() : ''\" style=\"cursor:pointer; position: relative;\">\r\n <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n <ng-container *ngTemplateOutlet=\"ProductDesc; context: {data: product, index: i}\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"styles?.theme != theme.Theme1\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"screenWidth > 475\"\r\n [index]=\"i\"></simpo-small-product-listing>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <simpo-card-skeleton-loader *ngIf=\"isListLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\r\n <section class=\"empty-cart\" *ngIf=\"!isListLoading && responseData?.length == 0\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" style=\"height: 150px; width: 150px;\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <div class=\"heading-medium d-flex justify-content-center\">\r\n Product list is empty\r\n </div>\r\n <div class=\"description d-flex justify-content-center mt-4\">\r\n Looks like no item is present with filter. Go ahead & explore top categories.\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-container>\r\n <simpo-card-skeleton-loader *ngIf=\"apiLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\r\n </div>\r\n\r\n <div class=\"bottom-filter\">\r\n <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\r\n <mat-icon>sort</mat-icon>\r\n <span>Sort by</span>\r\n </div>\r\n <div class=\"divider\"></div>\r\n <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\r\n <mat-icon>filter_list</mat-icon>\r\n <span>Filter</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isEcommerce]=\"true\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\"\r\n [theme]=\"{ width: '100%', height: '40vh', 'border-radius': '10px', 'position': 'relative', 'right': '5px' }\"></ngx-skeleton-loader>\r\n\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n <div class=\"fav-icon-wrapper\">\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border\r\n </mat-icon>\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite\r\n </mat-icon>\r\n <span class=\"fav-tooltip\">\r\n {{ product.whislist ? 'Remove from wishlist' : 'Add to wishlist' }}\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n\r\n<ng-template #Tags let-product=\"data\">\r\n <div class=\"tag-icon\" *ngIf=\"product.tags\">{{product.tags}}</div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #FilterSection>\r\n <section>\r\n <div class=\"categories-section\" *ngIf=\"categories?.length\">\r\n <div class=\"categories heading-small\">\r\n <h6><b>Shop by Categories</b></h6>\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let category of displayedCategories\"\r\n (click)=\"applyFilter(category, 'FILTER')\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"category.status\" />\r\n <div class=\"trim-text\">{{category.option | titlecase}}</div>\r\n </div>\r\n <div *ngIf=\"categories.length > 4\" class=\"toggle-categories\" (click)=\"toggleCategories()\"\r\n [style.color]=\"styles?.background?.accentColor\">\r\n <span class=\"toggle-text\">\r\n {{ showAllCategories ? 'Show Less' : 'Show More' }}\r\n <span class=\"dropdown-icon\">\r\n <ng-container *ngIf=\"!showAllCategories\">\r\n <mat-icon>expand_more</mat-icon>\r\n </ng-container>\r\n <ng-container *ngIf=\"showAllCategories\">\r\n <mat-icon>expand_less</mat-icon>\r\n </ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"categories-section\" *ngIf=\"collections?.length\">\r\n <div class=\"categories heading-small\">\r\n <h6><b>Shop by Collections</b></h6>\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let collection of displayedCollections\"\r\n (click)=\"applyFilter(collection, 'FILTER')\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"collection.status\" />\r\n <div class=\"trim-text\">{{collection.option | titlecase}}</div>\r\n </div>\r\n <div *ngIf=\"collections.length > 4\" class=\"toggle-categories\" (click)=\"toggleCollections()\"\r\n [style.color]=\"styles?.background?.accentColor\">\r\n <span class=\"toggle-text\">\r\n {{ showAllCollections ? 'Show Less' : 'Show More' }}\r\n <span class=\"dropdown-icon\">\r\n <ng-container *ngIf=\"!showAllCollections\"><mat-icon>expand_more</mat-icon></ng-container>\r\n <ng-container *ngIf=\"showAllCollections\"><mat-icon>expand_less</mat-icon></ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"categories-section\">\r\n <div class=\"categories heading-small\">\r\n <h6><b>Ratings</b></h6>\r\n </div>\r\n <div class=\"category-options\"\r\n *ngFor=\"let size of ['5 Stars', '4 Stars above', '3 Stars above', '2 Stars above', '1 Star above']\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\" />\r\n <div class=\"trim-text\">{{ size }}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"categories-section\">\r\n <div class=\"categories heading-small\">\r\n <h6><b>Shop by price</b></h6>\r\n </div>\r\n <label class=\"category-options\" *ngFor=\"let range of priceRanges;let i = index\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [(ngModel)]=\"range.selected\" (change)=\"onPriceRangeChange(i)\" />\r\n <div class=\"trim-text\">{{ range.label }}</div>\r\n </label>\r\n </div>\r\n\r\n\r\n\r\n <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"categories heading-small\">\r\n <h6><b>Product Type</b></h6>\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let size of productTypesData\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"size.status\" (change)=\"toggleProductSize(size)\" />\r\n <div class=\"trim-text\">{{ size.size }}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"categories heading-small\">\r\n <h6><b>Shop for</b></h6>\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let size of shopForData\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"size.status\" (change)=\"toggleShopSize(size)\" />\r\n <div class=\"trim-text\">{{ size.size }}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"categories heading-small\">\r\n <h6><b>Material</b></h6>\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let size of materialSizeData\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"size.status\" (change)=\"toggleMaterialSize(size)\" />\r\n <div class=\"trim-text\">{{ size.size }}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"categories heading-small\">\r\n <h6><b>Metal</b></h6>\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let size of metalSizeData\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"size.status\" (change)=\"toggleMetalSize(size)\" />\r\n <div class=\"trim-text\">{{ size.size }}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"categories heading-small\">\r\n <h6><b>Ring Style</b></h6>\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let size of ringSizes\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"size.status\" (change)=\"toggleSize(size)\" />\r\n <div class=\"trim-text\">{{ size.size }}</div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #SortingSection>\r\n <section style=\"padding: 10px\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\r\n <span>Sort by</span>\r\n <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n </div>\r\n <mat-radio-group class=\"d-flex flex-column\" [(ngModel)]=\"sortBy\">\r\n <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"selectOption(sortingType, $event)\"\r\n [value]=\"sortingType.value\">{{sortingType.name}}</mat-radio-button>\r\n </mat-radio-group>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc let-product=\"data\" let-index=\"index\">\r\n <ng-template #theme1style1>\r\n <div class=\"product-card position-relative h-100\" [ngClass]=\"{'hover-effect': styles?.theme == theme.Theme1}\">\r\n <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\"\r\n class=\"default-image position-relative\">\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\r\n (click)=\"proceedToProductDesc(product.itemId)\" [simpoBackground]=\"styles?.background\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\r\n </div>\r\n\r\n <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\"\r\n class=\"default-image position-relative\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"getProductImages(product)\" alt=\"\" class=\"product-img\" [class.fade-out]=\"imageIndex == index\"\r\n (click)=\"proceedToProductDesc(product.itemId)\" [simpoBackground]=\"styles?.background\">\r\n <div class=\"carousel-buttons\" *ngIf=\"product.itemImages?.length > 1\">\r\n <div><mat-icon (click)=\"changeImage(product, 'PREV', index)\">keyboard_arrow_left</mat-icon></div>\r\n <div><mat-icon (click)=\"changeImage(product, 'NEXT', index)\">keyboard_arrow_right</mat-icon></div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\r\n </div>\r\n\r\n <div class=\"mt-2 w-100\">\r\n <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\r\n <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\"\r\n [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\r\n [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\r\n (click)=\"selectVarient(product, varient)\">\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex align-item-center justify-content-between\" [style.display]=\"true ? 'block!important' : ''\">\r\n <div class=\"price body-large text-left d-flex align-items-center g-10\">\r\n <div class=\"fs-16\">\r\n <span [innerHTML]='currency'></span>\r\n {{product?.price?.sellingPrice | number:'1.2-2'}}\r\n </div>\r\n\r\n <div class=\"fs-16 text-start\">\r\n <span *ngIf=\"product?.price?.value - product?.price?.discountedPrice > 2\" class=\"discount-price\">\r\n {{product?.price?.value | number:'1.2-2'}}\r\n </span>\r\n </div>\r\n <!-- <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice < product?.price?.sellingPrice\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.sellingPrice | number:'1.2-2'}}\r\n </div> -->\r\n </div>\r\n\r\n <div class=\"product-name heading-large w-100 text-left trim-text\"\r\n [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n\r\n <div\r\n *ngIf=\"content?.display?.showButton && !ecomConfigs?.appointmentBookingEnabled && product.itemInventory?.openingStock > 0\"\r\n class=\"add-to-cart-btn\">\r\n <button class=\"send-btn d-flex align-items-center justify-content-center p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n [id]=\"data?.id+getButtonId(1)\" *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\r\n <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\r\n <div class=\"quantity full-width-quantity\" [style.borderColor]=\"getButtonStyle(1)?.background\"\r\n [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\r\n [style.color]=\"getButtonStyle(1)?.textColor\"\r\n (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\r\n [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n </div>\r\n </div>\r\n <div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n <div class=\"try-button-section\"\r\n *ngIf=\"content?.display?.showButton && ecomConfigs?.appointmentBookingEnabled && product?.itemInventory?.openingStock > 0\">\r\n <div class=\"try-at-home\">\r\n <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\r\n HOME</button>\r\n </div>\r\n <div class=\"video-call-image\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\"\r\n alt=\"video\" (click)=\"openDialogBox(dialogBox, product.name)\" />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-container *ngIf=\"screenWidth < 475 && styles?.mobileColumn === 1; else theme1style1\">\r\n <div class=\"row w-100\">\r\n <div class=\"col-8 d-flex flex-column gap-3\">\r\n <div class=\"text-left\" [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n <div class=\"fs-16 text-start\">\r\n <span [innerHTML]='currency'></span>\r\n {{product?.price?.sellingPrice | number:'1.2-2'}}\r\n </div>\r\n <div class=\"d-flex w-45\">\r\n <div\r\n *ngIf=\"content?.display?.showButton && !ecomConfigs?.appointmentBookingEnabled && product.itemInventory?.openingStock > 0\"\r\n class=\"add-to-cart-btn w-100\">\r\n <button class=\"send-btn d-flex align-items-center justify-content-center p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n [id]=\"data?.id+getButtonId(1)\" *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\r\n <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\r\n <div class=\"quantity full-width-quantity br-8\" [style.borderColor]=\"getButtonStyle(1)?.background\"\r\n [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n <span class=\"change-quantity w-35 br-8\" [style.background]=\"getButtonStyle(1)?.background\"\r\n [style.color]=\"getButtonStyle(1)?.textColor\"\r\n (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n <span class=\"change-quantity w-35 br-8\" [style.background]=\"getButtonStyle(1)?.background\"\r\n [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n </div>\r\n </div>\r\n <div>\r\n <button disabled class=\"out-of-stock w-100\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n <div class=\"try-button-section w-100\"\r\n *ngIf=\"content?.display?.showButton && ecomConfigs?.appointmentBookingEnabled && product?.itemInventory?.openingStock > 0\">\r\n <div class=\"try-at-home\">\r\n <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\r\n HOME</button>\r\n </div>\r\n <div class=\"video-call-image\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\"\r\n alt=\"video\" (click)=\"openDialogBox(dialogBox, product.name)\" />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 h-100 position-relative\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"getProductImages(product)\" alt=\"\" class=\"w-h-110\" [class.fade-out]=\"imageIndex == index\"\r\n (click)=\"proceedToProductDesc(product.itemId)\">\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n </ng-container>\r\n\r\n\r\n\r\n\r\n\r\n</ng-template>\r\n\r\n\r\n\r\n<ng-template #dialogBox>\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header d-flex align-item-center\">\r\n <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n <div class=\"schedule-header d-flex align-items-center justify-content-end p-2\">\r\n <mat-icon (click)=\"matCloseDialog()\"\r\n class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"modal-body h-100\">\r\n <div class=\"row h-100 w-100 video-call-container\">\r\n <div class=\"col-6 h-100\" *ngIf=\"!isMobile\">\r\n <img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/557699c1753779503913freepik-overhead-shot-a-person-holding-a-smartphone-with-a-1029_vmg8GqHj (online-video-cutter.com).gif\"\r\n alt=\"\" class=\"w-100 h-100\" style=\"object-fit: cover;\">\r\n </div>\r\n <div class=\"col-6 position-relative h-100 call-details\">\r\n <!-- Name Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\r\n <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\r\n (input)=\"onInputChange('username')\">\r\n </div>\r\n\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\r\n <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\r\n (input)=\"onInputChange('email')\">\r\n </div>\r\n\r\n <!-- Mobile Number Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\r\n <div class=\"sub-text-call\">IN +91</div>\r\n <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\r\n (input)=\"onInputChange('mobileNumber')\">\r\n </div>\r\n\r\n\r\n <!-- Pincode Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\r\n <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\r\n <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n </div>\r\n <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\r\n (input)=\"onInputChange('pincode')\">\r\n </div>\r\n <div class=\"language my-3\">\r\n <div class=\"mini-text mb-2\">Language Preference</div>\r\n <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\r\n <ng-container *ngFor=\"let lang of languages\">\r\n <div class=\"lang px-2 py-1 rounded cursor-pointer\"\r\n [style.background]=\"lang == selectedLang ? data?.styles?.background?.accentColor : ''\"\r\n (click)=\"selectedLang = lang\"\r\n [style.color]=\"lang == selectedLang ? getTextColor(data?.styles?.background?.accentColor) : '#000000'\">\r\n {{lang}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"selectedLang == 'Others'\">\r\n <div class=\"input-field my-3\">\r\n <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\r\n </div>\r\n </ng-container>\r\n <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\" (click)=\"scheduleVideoCall()\"\r\n [disabled]=\"isSubmitting\">\r\n <ng-container *ngIf=\"isSubmitting\">\r\n <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\r\n <span class=\"visually-hidden\">Loading...</span>\r\n </div>\r\n SCHEDULING...\r\n </ng-container>\r\n <ng-container *ngIf=\"!isSubmitting && !scheduled\">\r\n <mat-icon>video_call</mat-icon> \r\n SCHEDULE A VIDEO CALL\r\n </ng-container>\r\n <ng-container *ngIf=\"scheduled\">\r\n <mat-icon>check_circle</mat-icon> \r\n SCHEDULED SUCCESSFULLY\r\n </ng-container>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}input[type=checkbox]{accent-color:var(--color)}.total-container{position:relative}.discount-price{color:#d3d3d3;text-decoration:line-through}.custom-sort-dropdown{display:inline-flex;justify-content:flex-end;flex-grow:1;align-items:center;gap:6px;padding:6px 12px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-weight:600;color:#000;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:6px;position:relative;background-color:#fff;width:fit-content;min-width:fit-content;max-width:fit-content;outline:none;border:none}.sort-label{color:#555;white-space:nowrap}.selected-value{flex-shrink:0;white-space:nowrap;color:#000}.toggle-icon{font-size:20px;transition:transform .3s ease;-webkit-user-select:none;user-select:none}.toggle-icon.open{transform:rotate(180deg)}.options{position:absolute;top:100%;left:0;right:0;margin-top:4px;background-color:#fff;border:none;border-radius:0 0 6px 6px;box-shadow:0 4px 6px #0000001a;max-height:180px;overflow-y:auto;z-index:100;font-weight:400;text-align:left!important}.option{padding:8px 12px;cursor:pointer;white-space:nowrap;transition:background-color .2s ease}.option:hover{background-color:#fff;color:#000}.option.selected{background-color:#fff;color:#000;font-weight:600}.video-call-container{align-items:center}@media screen and (min-width: 1024px){.add-to-cart-btn{display:none}.add-to-cart-btn button{height:35px;font-size:16px!important}.product-card .add-to-cart-btn,.product-card{display:none}.product-card:hover .add-to-cart-btn,.product-card:hover{display:flex;z-index:100!important;padding:10px;left:0;position:absolute;width:100%;background:#fff;border:none;border-radius:0 0 10px 10px/0px 0px 10px 10px!important}.product-card .try-button-section{display:none}.product-card:hover .try-button-section{display:flex;z-index:100!important;padding:10px;left:0;position:absolute;width:100%;background:#fff;border:none;border-radius:0 0 10px 10px/0px 0px 10px 10px!important;box-shadow:0 16px 32px #b6b2b233}.product-card .fav-icon{display:none}.product-card:hover .fav-icon{display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100!important}}::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:#fff!important}.fav-icon{position:absolute;z-index:100;padding:5px;right:10px;top:10px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.f-20{font-size:20px}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.fav-tooltip{visibility:hidden;opacity:0;background:#222;color:#fff;font-size:10px;padding:4px 10px;border-radius:5px;position:absolute;top:40px;right:30px;white-space:nowrap;z-index:200;transition:opacity .2s;pointer-events:none;box-shadow:0 2px 8px #00000026}.fav-icon-wrapper:hover .fav-tooltip{visibility:visible;opacity:1}.discounted-price{margin-top:-3px;font-size:14px!important}.filter-side{width:20%;position:sticky;top:0;overflow-y:auto;height:100%;border-right:1px solid lightgrey}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.price-ranges{display:flex;flex-direction:column;gap:8px;padding-left:8px;max-width:250px}.send-btn:hover{transform:translateY(-1px);box-shadow:0 4px 8px #8b5cf64d}.price-range-item{font-size:14px;color:#333;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:8px}.price-range-item input[type=checkbox]{width:16px;height:16px}.categories-section{padding:.8rem 0rem;border-bottom:1px solid #D8D8D8}.categories-section:last-child{padding:.8rem 0rem;border-bottom:none}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.toggle-categories{margin-top:8px;cursor:pointer;font-weight:500;display:inline-flex;align-items:center;-webkit-user-select:none;user-select:none;width:100%}.empty-cart{display:flex;align-items:center;justify-content:center;text-align:center;height:75vh}.toggle-text .dropdown-icon{margin-left:6px;font-size:1em;margin-top:5px}.toggle-text{display:flex;align-items:center}.categories{display:flex;padding:1rem 0rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 0rem;gap:11px;font-weight:400!important}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem 1.5rem}.button-section button{position:relative;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px;white-space:nowrap;overflow:hidden}.chip{padding:5px 15px;border-radius:20px;gap:5px;width:max-content;margin:3px 0;transition:.3s opacity ease;border:1px solid}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;flex-direction:column-reverse}.price-range{color:#93959e;font-size:15px;white-space:nowrap}.right-side{width:80%;padding-bottom:50px;height:100vh;overflow-y:auto;flex:1 1 0;min-width:0}.bottom-filter{display:none}.onlyMobile{display:none!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray;cursor:pointer}.varient-list .selected-varient{border:1px solid transparent}:is() .speeddial-linear .p-speeddial-direction-up{position:relative;bottom:0%;right:0}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.input-group-sticky{width:100%;height:57px}.input-group{position:sticky;top:0;width:95%;z-index:100;padding:5px;outline:none;border:none;border-radius:5px;height:7vh;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin:15px auto}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.back-to-home{background-color:#9b9a9a1c;padding:5px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:fixed;right:3px;top:50%;cursor:pointer}.back-to-home .mat-icon{font-size:16px;height:16px;width:16px}.try-button-section{display:flex;justify-content:space-between;align-items:center}.try-button-section .try-at-home{width:78%}.try-button-section .try-at-home button{border:1px solid #DE57E5;border-radius:5px;font-size:14px!important;padding:5px 0!important}.try-button-section .video-call-image{width:20%;height:32px}.try-button-section .video-call-image img{width:100%;height:100%}.box-shadow{box-shadow:#0000003d 0 3px 4px;border-radius:10px!important}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mtb-5{margin-top:5px;margin-bottom:5px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.gap-15{gap:15px}.flex-wrap{flex-wrap:wrap}.carousel-buttons{display:flex;position:absolute;bottom:0;left:10px;gap:5px;transform:translateY(-50%);pointer-events:none}.carousel-buttons div{background:#fff;display:flex;align-items:center;border-radius:100%;justify-content:center;pointer-events:auto}.main-product-section{height:100vh;display:flex;position:relative}.filter-side{max-width:20%;width:100%;flex:0 0 20%}.modal-content{height:100%;border:none;border-radius:0!important}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9;border-radius:0!important}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.tag-icon{position:absolute!important;top:10px;left:10px;background:#e9bb18;text-transform:uppercase;padding:5px 10px;border:none;border-radius:8px;font-size:10px;color:#000}.filter-top-section{border-right:1px solid lightgrey;width:20%;padding:1rem .5em 1rem 0rem;border-bottom:1px solid lightgrey}.product-parent{width:100%;display:flex;flex-wrap:wrap;padding:10px;z-index:1}.product-parent .product{height:auto;transform:none;z-index:1;background-color:#fff}.product-parent .product .product-card{height:100%;padding:10px;display:flex;flex-direction:column;justify-content:flex-start;transition:all .3s ease-in-out}.product-parent .product .product-name{color:#222;font-size:14px!important;line-height:26px;margin-bottom:10px;text-align:left!important;width:220px;font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:all .3s ease-in-out}.product-parent .product .product-img{border-radius:10px;width:100%;height:180px;z-index:1;border:.5px solid #eee}.product-parent .product .default-image img{width:100%;height:180px;border-radius:10px}.product-parent .product:hover{height:auto!important;transform:scale(1.05);border-radius:10px!important;box-shadow:0 16px 32px #b6b2b299;z-index:100!important}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important;padding-top:0!important}.product-name{font-size:14px}.product-parent{gap:10px}.product{padding:10px!important;margin-top:0!important;height:auto!important;transform:none!important;z-index:1!important;box-shadow:0 8px 16px #0003!important}.product .product-card{padding:0!important}.out-of-stock{font-size:12px!important}.discounted-price{font-size:14px!important}.add-to-cart-btn button{font-size:14px!important;padding:5px!important}.call-details{width:100%}.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:flex!important;row-gap:0px}.onlyMobile mat-icon{pointer-events:auto!important;z-index:1000}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:100000001;width:100%;margin-left:-5px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:100%}.default-image img{width:100%;height:100%;box-shadow:#0000003d 0 3px 8px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important;height:95%!important;padding-bottom:0!important}.main-product-section{height:auto;display:flex;position:relative;padding-bottom:7rem}}.fs-16{font-size:16px!important}.mobile-filter-chip{display:flex;align-items:center;gap:15px;border:1px solid;border-radius:30px;padding:5px 15px;height:35px}.mobile-filter-chip mat-icon{font-size:20px;display:flex;align-items:center;justify-content:center}.w-h-110{width:110px;height:110px}.w-45{width:45%}.br-8{border-radius:8px}.w-35{width:35%!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i7$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i7$2.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i8$4.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: CardSkeletonLoaderComponent, selector: "simpo-card-skeleton-loader", inputs: ["count", "showTitles"] }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data", "isScrollable", "isCategoryProductList", "customClass", "index"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
|
|
20235
20377
|
}
|
|
20236
20378
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductListComponent, decorators: [{
|
|
20237
20379
|
type: Component,
|
|
@@ -20281,7 +20423,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
20281
20423
|
args: ['listScrollContainer']
|
|
20282
20424
|
}], getScreenSize: [{
|
|
20283
20425
|
type: HostListener,
|
|
20284
|
-
args: ["window:resize"
|
|
20426
|
+
args: ["window:resize"]
|
|
20285
20427
|
}], onWindowScroll: [{
|
|
20286
20428
|
type: HostListener,
|
|
20287
20429
|
args: ['window:scroll', ['$event']]
|
|
@@ -20588,12 +20730,28 @@ class OrderDetailsComponent {
|
|
|
20588
20730
|
ngOnInit() {
|
|
20589
20731
|
this.styles = this.data?.styles;
|
|
20590
20732
|
console.log(this.orderDetailData?.brandOrderDetails?.[0]?.timeLineList);
|
|
20591
|
-
|
|
20733
|
+
let timelineList = this.orderDetailData?.brandOrderDetails?.[0]?.timeLineList || [];
|
|
20734
|
+
let lastDateIndex = -1;
|
|
20735
|
+
timelineList.forEach((t, idx) => {
|
|
20736
|
+
if (t.date)
|
|
20737
|
+
lastDateIndex = idx;
|
|
20738
|
+
});
|
|
20739
|
+
this.orderTimiline = timelineList.map((timeline, index) => {
|
|
20740
|
+
let statusType = 'future';
|
|
20741
|
+
if (timeline.date) {
|
|
20742
|
+
if (timeline.orderStatus === 'DELIVERED' || timeline.orderStatus === 'CANCELLED') {
|
|
20743
|
+
statusType = 'completed';
|
|
20744
|
+
}
|
|
20745
|
+
else {
|
|
20746
|
+
statusType = index === lastDateIndex ? 'active' : 'completed';
|
|
20747
|
+
}
|
|
20748
|
+
}
|
|
20592
20749
|
return {
|
|
20593
20750
|
icon: this.getIcon(timeline.orderStatus),
|
|
20594
20751
|
name: timeline.title,
|
|
20595
20752
|
desc: timeline.body,
|
|
20596
|
-
date: timeline.date
|
|
20753
|
+
date: timeline.date,
|
|
20754
|
+
statusType: statusType
|
|
20597
20755
|
};
|
|
20598
20756
|
});
|
|
20599
20757
|
this._eventService.showLoadingScreen.subscribe((response) => {
|
|
@@ -20728,7 +20886,7 @@ class OrderDetailsComponent {
|
|
|
20728
20886
|
}
|
|
20729
20887
|
}
|
|
20730
20888
|
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 }); }
|
|
20731
|
-
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" }, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <div class=\"container-fluid\" [attr.style]=\"customClass\">\r\n\r\n <!-- Header Section -->\r\n <div class=\"row\" *ngIf=\"!isMobile\">\r\n <div class=\"col-12 d-flex justify-content-between align-items-center\">\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <mat-icon (click)=\"goBack()\" class=\"cp\">keyboard_backspace</mat-icon>\r\n <h3 class=\"fw-bold text-dark mb-0\">{{ orderDetailData?.orderNum }}</h3>\r\n </div>\r\n <div class=\"d-flex flex-wrap gap-2 mb-2\">\r\n <span class=\"d-flex align-items-center text-muted\">\r\n <mat-icon class=\"fs-5 d-flex align-items-center justify-content-start\">schedule</mat-icon>\r\n <small>{{ orderDetailData?.createdTimeStamp | date: 'dd MMM yyyy , h : mm a' }}</small>\r\n </span>\r\n <span class=\"d-flex align-items-center text-muted\">\r\n <mat-icon\r\n class=\"fs-5 d-flex align-items-center justify-content-center\">shopping_bag</mat-icon>\r\n <small>{{ orderDetailData?.brandOrderDetails?.[0]?.orderedItems.length }}\r\n items</small>\r\n </span>\r\n </div>\r\n </div>\r\n <div\r\n [attr.class]=\"orderDetailData?.brandOrderDetails?.[0]?.orderStatus + ' order-status d-flex align-items-center gap-1'\">\r\n {{ orderDetailData?.brandOrderDetails?.[0]?.orderStatus?.replaceAll(\"_\", \" \") | titlecase }}\r\n <mat-icon class=\"f-13 d-flex align-items-center justify-content-center\"\r\n *ngIf=\"orderDetailData?.brandOrderDetails?.[0]?.orderStatus == 'CANCELLED'\"\r\n [matTooltip]=\"orderDetailData?.brandOrderDetails?.[0]?.additionalInformation['CANCEL REASON ']\">info</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Mobile Header -->\r\n <div class=\"card border-0 shadow-sm mb-3\" *ngIf=\"isMobile\">\r\n <div class=\"card-body d-flex justify-content-between align-items-center py-3\">\r\n <h2 class=\"h4 mb-0 fw-semibold\">{{ orderDetailData?.orderNum }}</h2>\r\n <div></div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row g-4\">\r\n <!-- Left Column -->\r\n <div class=\"col-12\" [ngClass]=\"{'col-lg-8': !isMobile}\">\r\n\r\n <!-- Timeline for Desktop -->\r\n\r\n <!-- Items Section -->\r\n <div class=\"card border-0 shadow-sm mb-4\">\r\n <div class=\"card-header py-3\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\">\r\n <h4 class=\"h5 mb-0 d-flex align-items-center gap-2 f-16\">\r\n <mat-icon>shopping_cart</mat-icon>\r\n Ordered Items\r\n </h4>\r\n </div>\r\n <div class=\"card-body p-4 scroll-45\">\r\n <div class=\"row g-3\">\r\n <div class=\"col-12\"\r\n *ngFor=\"let item of orderDetailData?.brandOrderDetails[0]?.orderedItems\">\r\n <div class=\"h-100\">\r\n <div class=\"card-body p-3\">\r\n <div class=\"row align-items-start\">\r\n <div class=\"col-auto position-relative\">\r\n <img loading=\"lazy\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"item.imgUrl\" alt=\"{{ item.itemName }}\"\r\n class=\"rounded shadow-sm\"\r\n style=\"width: 85px; height: 85px; object-fit: cover;\">\r\n </div>\r\n <div class=\"col\">\r\n <h4 class=\"h6 fw-semibold text-dark\">{{ item.itemName }}</h4>\r\n\r\n <div class=\"row\">\r\n <div class=\"col-6 text-start\" *ngIf=\"!isMobile\">\r\n <div class=\"fw-bold\">\r\n <span [innerHTML]=\"currency\"></span>{{\r\n (item.sellingPrice | number: '1.0-2') + ' x ' +\r\n item.quantity }}\r\n </div>\r\n </div>\r\n <div class=\"col-md-6 col-sm-12 text-end text-nowrap\">\r\n <div class=\" p-2\">\r\n <div class=\"fw-bold\">\r\n <span [innerHTML]=\"currency\"></span>{{\r\n (item.sellingPrice * item.quantity) | number: '1.0-2'\r\n }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Review Section -->\r\n <div\r\n *ngIf=\"orderDetailData?.brandOrderDetails?.[0]?.orderStatus == 'DELIVERED'\">\r\n <div class=\"mb-1\">\r\n <p-rating [(ngModel)]=\"item.rating\" [cancel]=\"false\"\r\n [readonly]=\"false\" (ngModelChange)=\"submitReview(item)\" />\r\n </div>\r\n\r\n <div class=\"add-detail-review f-13 cursor-pointer\"\r\n (click)=\"item.showReview = !item.showReview\">Add Detailed Review\r\n </div>\r\n\r\n <div *ngIf=\"item.showReview\">\r\n <div class=\"mb-1\">\r\n <textarea class=\"form-control border-2\"\r\n [(ngModel)]=\"item.review\" rows=\"3\"></textarea>\r\n </div>\r\n <div class=\"review-img\">\r\n <img [src]=\"img.imgUrl\" alt=\"\"\r\n *ngFor=\"let img of item?.reviewImages ?? []\">\r\n <div class=\"add-review-img\"\r\n (click)=\"reviewFileInput.click()\"\r\n [ngClass]=\"{'w-100': (item?.reviewImages?.length ?? 0) == 0}\">\r\n <mat-icon>add</mat-icon> {{(item?.reviewImages?.length\r\n ?? 0) == 0 ? 'Add Images' : ''}}\r\n </div>\r\n <input type=\"file\" name=\"myfile\" multiple hidden\r\n accept=\"image/jpg,image/jpeg,image/gif,image/png,application/pdf,image/x-eps\"\r\n (change)=\"uploadImage($event, item)\" class=\"pc-btn\"\r\n #reviewFileInput />\r\n </div>\r\n\r\n <div class=\"w-100 text-end p-2 sbt-btn f-13 cursor-pointer\"\r\n (click)=\"submitReview(item)\">\r\n Submit\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Timeline for Mobile -->\r\n <ng-container *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"timelineContainer\"></ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- Right Column -->\r\n <div class=\"col-12 scroll-60\" [ngClass]=\"{'col-lg-4': !isMobile}\">\r\n\r\n <!-- Bill Details -->\r\n <div class=\"card border-0 shadow-sm mb-4\">\r\n <div class=\"card-header py-3 cursor-pointer\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\"\r\n (click)=\"toggleSection('billDetails')\">\r\n <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\">\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <mat-icon>receipt</mat-icon>\r\n Bill Details\r\n </div>\r\n <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.billDetails\">\r\n expand_less\r\n </mat-icon>\r\n </h4>\r\n </div>\r\n <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.billDetails\">\r\n <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\r\n <span class=\"text-muted\">Item Total</span>\r\n <span class=\"fw-semibold h6 mb-0\">\r\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.totalNetValue |\r\n number:'1.0-2' }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\"\r\n *ngIf=\"orderDetailData?.billDetails?.discountAmount\">\r\n <span class=\"d-flex align-items-center gap-2 text-muted\">\r\n Discount\r\n </span>\r\n <span class=\"fw-semibold text-success h6 mb-0\">\r\n -<span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount |\r\n number:'1.0-2' }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\r\n <span class=\"text-muted\">Total Tax</span>\r\n <span class=\"fw-semibold h6 mb-0\">\r\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount ?\r\n orderDetailData?.billDetails?.totalTaxAfterDiscount :\r\n orderDetailData?.billDetails?.totalTax | number:'1.0-2' }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\"\r\n *ngIf=\"orderDetailData?.billDetails?.orraSchemeRedeemedAmount\">\r\n <span class=\"text-muted\">Redeem Amount</span>\r\n <span class=\"fw-semibold h6 mb-0\">\r\n <span [innerHTML]=\"currency\"></span>{{\r\n orderDetailData?.billDetails?.orraSchemeRedeemedAmount | number:'1.0-2' }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\r\n <span class=\"d-flex align-items-center gap-2 text-muted\">\r\n Delivery\r\n </span>\r\n <span class=\"fw-bold text-success h6 mb-0\">{{orderDetailData?.billDetails.deliveryCharges ?\r\n orderDetailData?.billDetails.deliveryCharges : 'FREE'}}</span>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-between align-items-center py-3 mt-3 rounded px-3\">\r\n <span class=\"fw-bold h5 mb-0 text-dark\">Grand Total</span>\r\n <span class=\"fw-bold h4 mb-0 \">\r\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice }}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Customer Details -->\r\n <div class=\"card border-0 shadow-sm mb-4\">\r\n <div class=\"card-header py-3 cursor-pointer\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\"\r\n (click)=\"toggleSection('deliveryDetails')\">\r\n <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\">\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <mat-icon>person</mat-icon>\r\n Delivery Details\r\n </div>\r\n <mat-icon class=\"transition-transform\"\r\n [class.rotate-180]=\"!sectionsVisible.deliveryDetails\">\r\n expand_less\r\n </mat-icon>\r\n </h4>\r\n </div>\r\n <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.deliveryDetails\">\r\n <div class=\"mb-3\">\r\n <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\r\n <div>\r\n <small class=\"text-muted d-block\">Name</small>\r\n <span class=\"fw-semibold\">{{ orderDetailData?.addressDetails?.receiverName }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mb-3\">\r\n <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\r\n <div>\r\n <small class=\"text-muted d-block\">Phone</small>\r\n <span class=\"fw-semibold\">{{ orderDetailData?.addressDetails?.receiverPhone\r\n }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mb-3\">\r\n <div class=\"d-flex align-items-start gap-3 p-2 bg-light rounded\">\r\n <div>\r\n <small class=\"text-muted d-block\">Address</small>\r\n <span class=\"fw-semibold\">{{ orderAddress }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mb-3\">\r\n <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\r\n <div>\r\n <small class=\"text-muted d-block\">Payment</small>\r\n <span class=\"fw-semibold\">{{orderDetailData?.paymentDetails ?\r\n (getKey(orderDetailData?.paymentDetails)==='COD' ? 'Cash on Delivery':\r\n getKey(orderDetailData?.paymentDetails) ) : 'N/A'}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Track Order Button -->\r\n <div class=\"text-center mt-4\" *ngIf=\"orderDetailData?.orderTrackingLink\">\r\n <button\r\n class=\"btn btn-primary w-100 d-flex align-items-center justify-content-center gap-2 py-2\"\r\n (click)=\"trackOrder()\">\r\n <mat-icon>location_searching</mat-icon>\r\n Track Order\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Timeline Section for Desktop -->\r\n <div class=\"card border-0 shadow-sm mb-4\" *ngIf=\"!isMobile\">\r\n <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('timeline')\"\r\n [simpoBackground]=\"styles?.background\" [id]=\"data?.id\">\r\n <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\r\n\r\n \">\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <mat-icon>timeline</mat-icon>\r\n Order Timeline\r\n </div>\r\n <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.timeline\">\r\n expand_less\r\n </mat-icon>\r\n </h4>\r\n </div>\r\n <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.timeline\">\r\n <p-timeline [value]=\"orderTimiline\">\r\n <ng-template pTemplate=\"content\" let-event>\r\n <div class=\"d-flex align-items-start gap-3 py-3\">\r\n <div class=\"rounded-circle p-2 d-flex align-items-center justify-content-center\"\r\n style=\"width: 40px; height: 40px;\" [simpoBackground]=\"styles?.background\"\r\n [id]=\"data?.id\">\r\n <mat-icon class=\"fs-6 d-flex align-items-center justify-content-center\">{{\r\n event.icon }}</mat-icon>\r\n </div>\r\n <div class=\"flex-grow-1\">\r\n <h6 class=\"fw-semibold text-dark mb-1\">{{ event.name?.replaceAll(\"_\", \" \") |\r\n titlecase }}</h6>\r\n <p class=\"text-muted mb-0 small\">{{ event.desc?.replaceAll(\"_\", \" \") }} on\r\n {{ event.date | date:'medium' }}</p>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-timeline>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</ng-container>\r\n\r\n<!-- Timeline Template -->\r\n<ng-template #timelineContainer>\r\n <div class=\"card border-0 shadow-sm mb-4\">\r\n <div class=\"card-header bg-warning text-dark py-2 f-16\">\r\n <h4 class=\"h5 mb-0 d-flex align-items-center gap-2\">\r\n <mat-icon>timeline</mat-icon>\r\n Order Timeline\r\n </h4>\r\n </div>\r\n <div class=\"card-body p-4\">\r\n <p-timeline [value]=\"orderTimiline\">\r\n <ng-template pTemplate=\"content\" let-event>\r\n <div class=\"d-flex align-items-start gap-3 py-3\">\r\n <div class=\"bg-primary rounded-circle p-2 d-flex align-items-center justify-content-center\"\r\n style=\"width: 40px; height: 40px;\">\r\n <mat-icon class=\"text-white fs-6 d-flex align-items-center justify-content-center\">{{\r\n event.icon }}</mat-icon>\r\n </div>\r\n <div class=\"flex-grow-1\">\r\n <h6 class=\"fw-semibold text-dark mb-1\">{{ event.name?.replaceAll(\"_\", \" \") | titlecase }}\r\n </h6>\r\n <p class=\"text-muted mb-0 small\">{{ event.desc?.replaceAll(\"_\", \" \") | titlecase }} on\r\n {{ event.date | date:'medium' }}</p>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-timeline>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<!-- Loading Skeleton -->\r\n<div class=\"container-fluid py-4\" *ngIf=\"isLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-12\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '60vh',\r\n 'border-radius': '12px',\r\n 'margin': '20px 0'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </div>\r\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:-20px;height:55px;left:18px}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: TimelineModule }, { kind: "component", type: i8$5.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.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: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
20889
|
+
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" }, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <div class=\"container-fluid\" [attr.style]=\"customClass\" style=\"background-color: #f8f9fa; min-height: 100vh;\">\r\n <!-- Main Box -->\r\n <div class=\"border-0 mx-auto\">\r\n\r\n <!-- Back button & Thanks -->\r\n <div class=\"d-flex align-items-center mb-2\">\r\n <svg (click)=\"goBack()\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-chevron-left cp text-muted\">\r\n <path d=\"m15 18-6-6 6-6\"></path>\r\n </svg>\r\n <span class=\"text-muted fw-medium py-1\">Thanks!</span>\r\n </div>\r\n\r\n <!-- Main Headline -->\r\n <h2 class=\"fw-semibold mb-2 text-dark\" style=\"font-size: 1.75rem;\">\r\n {{ orderDetailData?.brandOrderDetails?.[0]?.orderStatus?.replaceAll(\"_\", \" \") | titlecase }} \uD83D\uDE80\r\n </h2>\r\n <p class=\"text-muted mb-3 fs-15\">\r\n {{ orderDetailData?.brandOrderDetails?.[0]?.orderStatus === 'DELIVERED' ? 'Your order has been\r\n delivered. Enjoy!' : (orderDetailData?.brandOrderDetails?.[0]?.orderStatus === 'CANCELLED' ? 'Your order\r\n was cancelled.' : 'Your order is on the way. It will be shipped. We will inform you.') }}\r\n </p>\r\n\r\n <!-- Colored Line -->\r\n <div class=\"mb-3\" style=\"height: 3px; width: 100%;\"\r\n [style.background]=\"'linear-gradient(to right, ' + (styles?.background?.color || '#20c997') + ', transparent)'\">\r\n </div>\r\n\r\n <!-- Order Number & Actions -->\r\n <div class=\"d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-2\">\r\n <div class=\"fw-semibold text-dark mb-2 mb-md-0 d-flex align-items-center\">\r\n Order number:\r\n <span class=\"ms-1\" [style.color]=\"styles?.background?.color || '#20c997'\">\r\n {{ orderDetailData?.orderNum }}\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <!-- Content Grid Layout -->\r\n <div class=\"row mt-2\">\r\n <!-- Left Column -->\r\n <div class=\"col-lg-7 col-xl-8 mb-4\">\r\n <!-- Items List -->\r\n <div class=\"card border mb-4 overflow-hidden\"\r\n style=\"border-color: #eaeaea !important; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.02);\">\r\n <ng-container\r\n *ngFor=\"let item of orderDetailData?.brandOrderDetails[0]?.orderedItems; let last = last\">\r\n <div class=\"p-4\" [ngClass]=\"{'border-bottom': !last}\">\r\n <div class=\"d-flex flex-column flex-md-row align-items-start justify-content-between\">\r\n <div class=\"d-flex gap-4 w-100\">\r\n <!-- Image -->\r\n <img loading=\"lazy\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"item.imgUrl\" alt=\"{{ item.itemName }}\"\r\n class=\"rounded shadow-sm flex-shrink-0\"\r\n style=\"width: 80px; height: 80px; object-fit: cover; border-radius: 8px !important;\">\r\n\r\n <!-- Details -->\r\n <div class=\"flex-grow-1\">\r\n <h6 class=\"fw-bold text-dark mb-1\" style=\"font-size: 15px;\">{{ item.itemName\r\n }}</h6>\r\n <p class=\"text-muted small mb-2\" style=\"font-size: 13px;\"\r\n *ngIf=\"item.variantName || item.customizationDetails\">{{\r\n item.variantName ||\r\n 'Regular' }}</p>\r\n <div class=\"fw-semibold text-dark mt-1\" style=\"font-size: 13px;\">Quantity {{\r\n item.quantity }}</div>\r\n\r\n <!-- Review Section -->\r\n <div class=\"mt-4 pt-3 border-top\"\r\n *ngIf=\"orderDetailData?.brandOrderDetails?.[0]?.orderStatus == 'DELIVERED'\">\r\n\r\n <div class=\"d-flex align-items-center justify-content-between mb-2\">\r\n <h6 class=\"fw-bold mb-0 text-dark\" style=\"font-size: 14px;\">Leave a\r\n Review\r\n </h6>\r\n <p-rating [(ngModel)]=\"item.rating\" [cancel]=\"false\"\r\n [readonly]=\"false\"\r\n (ngModelChange)=\"submitReview(item)\"></p-rating>\r\n </div>\r\n\r\n <div class=\"add-detail-review text-primary fw-medium cursor-pointer d-inline-flex align-items-center gap-1\"\r\n style=\"font-size: 13px;\"\r\n (click)=\"item.showReview = !item.showReview\">\r\n <mat-icon\r\n style=\"font-size: 15px; width: 15px; height: 15px;\">mode_edit</mat-icon>\r\n <span>Write a Detailed Review</span>\r\n </div>\r\n\r\n <div *ngIf=\"item.showReview\" class=\"mt-3 p-4 bg-white\"\r\n style=\"border: 1px solid #f0f0f0; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.03);\">\r\n\r\n <h6 class=\"fw-semibold text-dark mb-3\" style=\"font-size: 14px;\">\r\n Share your\r\n experience</h6>\r\n\r\n <div class=\"mb-4\">\r\n <textarea class=\"form-control shadow-none review-textarea\"\r\n [(ngModel)]=\"item.review\" rows=\"4\"\r\n placeholder=\"What did you like or dislike? How was the fit and quality?\"></textarea>\r\n </div>\r\n\r\n <div class=\"mb-4\">\r\n <h6 class=\"fw-medium text-muted mb-2\" style=\"font-size: 13px;\">\r\n Attach\r\n Photos <span\r\n style=\"font-size: 11px; opacity: 0.7;\">(Optional)</span>\r\n </h6>\r\n <div class=\"d-flex gap-3 flex-wrap align-items-center\">\r\n <div class=\"position-relative\"\r\n *ngFor=\"let img of item?.reviewImages ?? []\">\r\n <img [src]=\"img.imgUrl\" alt=\"\"\r\n style=\"width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid #e2e8f0; box-shadow: 0 2px 4px rgba(0,0,0,0.02);\">\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center justify-content-center cursor-pointer review-upload-box\"\r\n (click)=\"reviewFileInput.click()\">\r\n <mat-icon\r\n style=\"font-size: 26px; width: 26px; height: 26px;\">add_photo_alternate</mat-icon>\r\n </div>\r\n <input type=\"file\" name=\"myfile\" multiple hidden\r\n accept=\"image/jpg,image/jpeg,image/gif,image/png,application/pdf,image/x-eps\"\r\n (change)=\"uploadImage($event, item)\" class=\"pc-btn\"\r\n #reviewFileInput />\r\n </div>\r\n </div>\r\n\r\n <div class=\"w-100 mt-2 d-flex justify-content-end\">\r\n <button\r\n class=\"btn w-40 fw-bold shadow-sm d-flex justify-content-center align-items-center gap-2 review-submit-btn\"\r\n [style.background]=\"styles?.background?.color || '#20c997'\"\r\n (click)=\"submitReview(item)\">\r\n Submit Review\r\n <mat-icon\r\n style=\"font-size: 18px; width: 18px; height: 18px;\">send</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Price -->\r\n <div class=\"text-end fw-bold text-dark d-none d-md-block\"\r\n style=\"font-size: 15px;\">\r\n <span [innerHTML]=\"currency\"></span>{{ (item.sellingPrice * item.quantity) |\r\n number:\r\n '1.0-2' }}\r\n </div>\r\n </div>\r\n <!-- Mobile Price -->\r\n <div class=\"text-start fw-bold text-dark fs-6 mt-3 d-md-none w-100\">\r\n <span [innerHTML]=\"currency\"></span>{{ (item.sellingPrice * item.quantity) |\r\n number:\r\n '1.0-2' }}\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- Summary Section -->\r\n <div class=\"row gx-5\">\r\n <!-- Left: Address & Payment -->\r\n <div class=\"col-md-6 mb-4 mb-md-0 d-flex flex-column gap-4\">\r\n <div>\r\n <h6 class=\"text-dark mb-2\" style=\"font-size: 13px; font-weight: 600;\">Shipping Address\r\n </h6>\r\n <div class=\"text-dark\" style=\"font-size: 13px;\">\r\n <span class=\"d-block mb-1\">{{ orderDetailData?.addressDetails?.receiverName\r\n }}</span>\r\n <span class=\"text-muted d-block\" style=\"line-height: 1.5; max-width: 280px;\">\r\n {{ orderAddress }}<br>\r\n {{ orderDetailData?.addressDetails?.receiverPhone }}\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div>\r\n <h6 class=\"text-dark mb-2\" style=\"font-size: 13px; font-weight: 600;\">Payment</h6>\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <span class=\"text-primary fw-bolder fs-5\"\r\n *ngIf=\"getKey(orderDetailData?.paymentDetails)!=='COD'\"\r\n style=\"font-family: Arial, sans-serif; letter-spacing: -0.5px;\">VISA</span>\r\n <mat-icon *ngIf=\"getKey(orderDetailData?.paymentDetails)==='COD'\" class=\"text-muted\"\r\n style=\"font-size: 28px; width: 28px; height: 28px;\">payments</mat-icon>\r\n\r\n <div>\r\n <div class=\"text-dark\" style=\"font-size: 13px;\">\r\n {{orderDetailData?.paymentDetails ?\r\n (getKey(orderDetailData?.paymentDetails)==='COD' ? 'Cash on Delivery':\r\n getKey(orderDetailData?.paymentDetails) ) : 'N/A'}}</div>\r\n <div class=\"text-muted\" style=\"font-size: 12px; letter-spacing: 0.5px;\"\r\n *ngIf=\"getKey(orderDetailData?.paymentDetails)!=='COD'\">**** **** **** 1234\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Right: Bill Details -->\r\n <div class=\"col-md-6 pt-1\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n <span class=\"text-muted\" style=\"font-size: 13px;\">Subtotal</span>\r\n <span class=\"text-dark fw-medium\" style=\"font-size: 13px;\">\r\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.totalNetValue |\r\n number:'1.0-2' }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-between align-items-center mb-2\"\r\n *ngIf=\"orderDetailData?.billDetails?.discountAmount\">\r\n <span class=\"text-muted\" style=\"font-size: 13px;\">Discount</span>\r\n <span class=\"text-success fw-medium\" style=\"font-size: 13px;\">\r\n -<span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount\r\n |\r\n number:'1.0-2' }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n <span class=\"text-muted\" style=\"font-size: 13px;\">Shipping</span>\r\n <span class=\"text-dark fw-medium\"\r\n style=\"font-size: 13px;\">{{orderDetailData?.billDetails.deliveryCharges ?\r\n orderDetailData?.billDetails.deliveryCharges : 'FREE'}}</span>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n <span class=\"text-muted\" style=\"font-size: 13px;\">Estimated Tax</span>\r\n <span class=\"text-dark fw-medium\" style=\"font-size: 13px;\">\r\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount\r\n ?\r\n orderDetailData?.billDetails?.totalTaxAfterDiscount :\r\n orderDetailData?.billDetails?.totalTax\r\n | number:'1.0-2' }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-between align-items-center mb-2\"\r\n *ngIf=\"orderDetailData?.billDetails?.orraSchemeRedeemedAmount\">\r\n <span class=\"text-muted\" style=\"font-size: 13px;\">Redeem Amount</span>\r\n <span class=\"text-dark fw-medium\" style=\"font-size: 13px;\">\r\n -<span [innerHTML]=\"currency\"></span>{{\r\n orderDetailData?.billDetails?.orraSchemeRedeemedAmount | number:'1.0-2' }}\r\n </span>\r\n </div>\r\n\r\n <hr class=\"text-muted my-3\" style=\"opacity: 0.15;\">\r\n\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span class=\"text-dark\" style=\"font-size: 14px; font-weight: 600;\">Total</span>\r\n <span class=\"text-dark fw-bold\" style=\"font-size: 16px;\">\r\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice }}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- Right Column -->\r\n <div class=\"col-lg-5 col-xl-4\">\r\n <!-- Timeline Card -->\r\n <div class=\"card border p-4 mb-4\"\r\n style=\"border-color: #eaeaea !important; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.02);\"\r\n *ngIf=\"orderDetailData?.orderTrackingLink || (orderTimiline && orderTimiline.length > 0)\">\r\n <div class=\"d-flex align-items-center justify-content-between mb-4 pb-3 border-bottom\">\r\n <h5 class=\"fw-bold mb-0 text-dark d-flex align-items-center gap-2\" style=\"font-size: 16px;\">\r\n <mat-icon style=\"color: #6c757d;\">timeline</mat-icon> Order Timeline\r\n </h5>\r\n\r\n <div *ngIf=\"orderDetailData?.orderTrackingLink\"\r\n class=\"d-inline-flex align-items-center gap-1 cursor-pointer fw-medium\"\r\n [style.color]=\"styles?.background?.color || '#0d6efd'\" style=\"font-size: 13px;\"\r\n (click)=\"trackOrder()\">\r\n <mat-icon\r\n style=\"font-size: 15px; width: 15px; height: 15px;\">location_searching</mat-icon>\r\n <span style=\"text-decoration: underline; text-underline-offset: 3px;\">Track Order</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"px-2 pt-2\" *ngIf=\"orderTimiline && orderTimiline.length > 0\">\r\n <p-timeline [value]=\"orderTimiline\" styleClass=\"custom-timeline\" align=\"left\">\r\n <ng-template pTemplate=\"marker\" let-event>\r\n <!-- Completed -->\r\n <span class=\"custom-marker completed-marker\"\r\n *ngIf=\"event.statusType === 'completed' || event.statusType === 'delivered'\"\r\n [style.backgroundColor]=\"styles?.background?.color || '#059669'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n </svg>\r\n </span>\r\n\r\n <!-- Active -->\r\n <span class=\"custom-marker active-marker\" *ngIf=\"event.statusType === 'active'\"\r\n [style.borderColor]=\"styles?.background?.color || '#059669'\"></span>\r\n\r\n <!-- Future -->\r\n <span class=\"custom-marker future-marker\"\r\n *ngIf=\"event.statusType === 'future'\"></span>\r\n </ng-template>\r\n\r\n <ng-template pTemplate=\"content\" let-event let-last=\"last\">\r\n <div class=\"ms-4\" [ngClass]=\"{'pb-4': !last}\">\r\n <div class=\"fw-semibold text-dark\" style=\"font-size: 15px; margin-bottom: 2px;\">\r\n {{\r\n event.name?.replaceAll(\"_\", \" \") | titlecase }}</div>\r\n <div style=\"font-size: 14px;\"\r\n [ngClass]=\"{'text-muted': event.statusType !== 'future', 'text-light-grey': event.statusType === 'future'}\">\r\n {{ event.date ? (event.date | date:'MMM d') : 'Not yet' }}\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-timeline>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</ng-container>\r\n\r\n<!-- Loading Skeleton -->\r\n<div class=\"container-fluid py-4\" *ngIf=\"isLoading\" style=\"background-color: #f8f9fa; min-height: 100vh;\">\r\n <div class=\"mx-auto\" style=\"max-width: 1000px;\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '60vh',\r\n 'border-radius': '12px',\r\n 'margin': '20px 0'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\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-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%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: TimelineModule }, { kind: "component", type: i8$5.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.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: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatTooltipModule }] }); }
|
|
20732
20890
|
}
|
|
20733
20891
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OrderDetailsComponent, decorators: [{
|
|
20734
20892
|
type: Component,
|
|
@@ -20742,7 +20900,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
20742
20900
|
FormsModule,
|
|
20743
20901
|
BackgroundDirective,
|
|
20744
20902
|
MatTooltipModule
|
|
20745
|
-
], template: "<ng-container *ngIf=\"!isLoading\">\r\n <div class=\"container-fluid\" [attr.style]=\"customClass\">\r\n\r\n <!-- Header Section -->\r\n <div class=\"row\" *ngIf=\"!isMobile\">\r\n <div class=\"col-12 d-flex justify-content-between align-items-center\">\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <mat-icon (click)=\"goBack()\" class=\"cp\">keyboard_backspace</mat-icon>\r\n <h3 class=\"fw-bold text-dark mb-0\">{{ orderDetailData?.orderNum }}</h3>\r\n </div>\r\n <div class=\"d-flex flex-wrap gap-2 mb-2\">\r\n <span class=\"d-flex align-items-center text-muted\">\r\n <mat-icon class=\"fs-5 d-flex align-items-center justify-content-start\">schedule</mat-icon>\r\n <small>{{ orderDetailData?.createdTimeStamp | date: 'dd MMM yyyy , h : mm a' }}</small>\r\n </span>\r\n <span class=\"d-flex align-items-center text-muted\">\r\n <mat-icon\r\n class=\"fs-5 d-flex align-items-center justify-content-center\">shopping_bag</mat-icon>\r\n <small>{{ orderDetailData?.brandOrderDetails?.[0]?.orderedItems.length }}\r\n items</small>\r\n </span>\r\n </div>\r\n </div>\r\n <div\r\n [attr.class]=\"orderDetailData?.brandOrderDetails?.[0]?.orderStatus + ' order-status d-flex align-items-center gap-1'\">\r\n {{ orderDetailData?.brandOrderDetails?.[0]?.orderStatus?.replaceAll(\"_\", \" \") | titlecase }}\r\n <mat-icon class=\"f-13 d-flex align-items-center justify-content-center\"\r\n *ngIf=\"orderDetailData?.brandOrderDetails?.[0]?.orderStatus == 'CANCELLED'\"\r\n [matTooltip]=\"orderDetailData?.brandOrderDetails?.[0]?.additionalInformation['CANCEL REASON ']\">info</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Mobile Header -->\r\n <div class=\"card border-0 shadow-sm mb-3\" *ngIf=\"isMobile\">\r\n <div class=\"card-body d-flex justify-content-between align-items-center py-3\">\r\n <h2 class=\"h4 mb-0 fw-semibold\">{{ orderDetailData?.orderNum }}</h2>\r\n <div></div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row g-4\">\r\n <!-- Left Column -->\r\n <div class=\"col-12\" [ngClass]=\"{'col-lg-8': !isMobile}\">\r\n\r\n <!-- Timeline for Desktop -->\r\n\r\n <!-- Items Section -->\r\n <div class=\"card border-0 shadow-sm mb-4\">\r\n <div class=\"card-header py-3\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\">\r\n <h4 class=\"h5 mb-0 d-flex align-items-center gap-2 f-16\">\r\n <mat-icon>shopping_cart</mat-icon>\r\n Ordered Items\r\n </h4>\r\n </div>\r\n <div class=\"card-body p-4 scroll-45\">\r\n <div class=\"row g-3\">\r\n <div class=\"col-12\"\r\n *ngFor=\"let item of orderDetailData?.brandOrderDetails[0]?.orderedItems\">\r\n <div class=\"h-100\">\r\n <div class=\"card-body p-3\">\r\n <div class=\"row align-items-start\">\r\n <div class=\"col-auto position-relative\">\r\n <img loading=\"lazy\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"item.imgUrl\" alt=\"{{ item.itemName }}\"\r\n class=\"rounded shadow-sm\"\r\n style=\"width: 85px; height: 85px; object-fit: cover;\">\r\n </div>\r\n <div class=\"col\">\r\n <h4 class=\"h6 fw-semibold text-dark\">{{ item.itemName }}</h4>\r\n\r\n <div class=\"row\">\r\n <div class=\"col-6 text-start\" *ngIf=\"!isMobile\">\r\n <div class=\"fw-bold\">\r\n <span [innerHTML]=\"currency\"></span>{{\r\n (item.sellingPrice | number: '1.0-2') + ' x ' +\r\n item.quantity }}\r\n </div>\r\n </div>\r\n <div class=\"col-md-6 col-sm-12 text-end text-nowrap\">\r\n <div class=\" p-2\">\r\n <div class=\"fw-bold\">\r\n <span [innerHTML]=\"currency\"></span>{{\r\n (item.sellingPrice * item.quantity) | number: '1.0-2'\r\n }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Review Section -->\r\n <div\r\n *ngIf=\"orderDetailData?.brandOrderDetails?.[0]?.orderStatus == 'DELIVERED'\">\r\n <div class=\"mb-1\">\r\n <p-rating [(ngModel)]=\"item.rating\" [cancel]=\"false\"\r\n [readonly]=\"false\" (ngModelChange)=\"submitReview(item)\" />\r\n </div>\r\n\r\n <div class=\"add-detail-review f-13 cursor-pointer\"\r\n (click)=\"item.showReview = !item.showReview\">Add Detailed Review\r\n </div>\r\n\r\n <div *ngIf=\"item.showReview\">\r\n <div class=\"mb-1\">\r\n <textarea class=\"form-control border-2\"\r\n [(ngModel)]=\"item.review\" rows=\"3\"></textarea>\r\n </div>\r\n <div class=\"review-img\">\r\n <img [src]=\"img.imgUrl\" alt=\"\"\r\n *ngFor=\"let img of item?.reviewImages ?? []\">\r\n <div class=\"add-review-img\"\r\n (click)=\"reviewFileInput.click()\"\r\n [ngClass]=\"{'w-100': (item?.reviewImages?.length ?? 0) == 0}\">\r\n <mat-icon>add</mat-icon> {{(item?.reviewImages?.length\r\n ?? 0) == 0 ? 'Add Images' : ''}}\r\n </div>\r\n <input type=\"file\" name=\"myfile\" multiple hidden\r\n accept=\"image/jpg,image/jpeg,image/gif,image/png,application/pdf,image/x-eps\"\r\n (change)=\"uploadImage($event, item)\" class=\"pc-btn\"\r\n #reviewFileInput />\r\n </div>\r\n\r\n <div class=\"w-100 text-end p-2 sbt-btn f-13 cursor-pointer\"\r\n (click)=\"submitReview(item)\">\r\n Submit\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Timeline for Mobile -->\r\n <ng-container *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"timelineContainer\"></ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- Right Column -->\r\n <div class=\"col-12 scroll-60\" [ngClass]=\"{'col-lg-4': !isMobile}\">\r\n\r\n <!-- Bill Details -->\r\n <div class=\"card border-0 shadow-sm mb-4\">\r\n <div class=\"card-header py-3 cursor-pointer\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\"\r\n (click)=\"toggleSection('billDetails')\">\r\n <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\">\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <mat-icon>receipt</mat-icon>\r\n Bill Details\r\n </div>\r\n <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.billDetails\">\r\n expand_less\r\n </mat-icon>\r\n </h4>\r\n </div>\r\n <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.billDetails\">\r\n <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\r\n <span class=\"text-muted\">Item Total</span>\r\n <span class=\"fw-semibold h6 mb-0\">\r\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.totalNetValue |\r\n number:'1.0-2' }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\"\r\n *ngIf=\"orderDetailData?.billDetails?.discountAmount\">\r\n <span class=\"d-flex align-items-center gap-2 text-muted\">\r\n Discount\r\n </span>\r\n <span class=\"fw-semibold text-success h6 mb-0\">\r\n -<span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount |\r\n number:'1.0-2' }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\r\n <span class=\"text-muted\">Total Tax</span>\r\n <span class=\"fw-semibold h6 mb-0\">\r\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount ?\r\n orderDetailData?.billDetails?.totalTaxAfterDiscount :\r\n orderDetailData?.billDetails?.totalTax | number:'1.0-2' }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\"\r\n *ngIf=\"orderDetailData?.billDetails?.orraSchemeRedeemedAmount\">\r\n <span class=\"text-muted\">Redeem Amount</span>\r\n <span class=\"fw-semibold h6 mb-0\">\r\n <span [innerHTML]=\"currency\"></span>{{\r\n orderDetailData?.billDetails?.orraSchemeRedeemedAmount | number:'1.0-2' }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\r\n <span class=\"d-flex align-items-center gap-2 text-muted\">\r\n Delivery\r\n </span>\r\n <span class=\"fw-bold text-success h6 mb-0\">{{orderDetailData?.billDetails.deliveryCharges ?\r\n orderDetailData?.billDetails.deliveryCharges : 'FREE'}}</span>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-between align-items-center py-3 mt-3 rounded px-3\">\r\n <span class=\"fw-bold h5 mb-0 text-dark\">Grand Total</span>\r\n <span class=\"fw-bold h4 mb-0 \">\r\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice }}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Customer Details -->\r\n <div class=\"card border-0 shadow-sm mb-4\">\r\n <div class=\"card-header py-3 cursor-pointer\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\"\r\n (click)=\"toggleSection('deliveryDetails')\">\r\n <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\">\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <mat-icon>person</mat-icon>\r\n Delivery Details\r\n </div>\r\n <mat-icon class=\"transition-transform\"\r\n [class.rotate-180]=\"!sectionsVisible.deliveryDetails\">\r\n expand_less\r\n </mat-icon>\r\n </h4>\r\n </div>\r\n <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.deliveryDetails\">\r\n <div class=\"mb-3\">\r\n <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\r\n <div>\r\n <small class=\"text-muted d-block\">Name</small>\r\n <span class=\"fw-semibold\">{{ orderDetailData?.addressDetails?.receiverName }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mb-3\">\r\n <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\r\n <div>\r\n <small class=\"text-muted d-block\">Phone</small>\r\n <span class=\"fw-semibold\">{{ orderDetailData?.addressDetails?.receiverPhone\r\n }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mb-3\">\r\n <div class=\"d-flex align-items-start gap-3 p-2 bg-light rounded\">\r\n <div>\r\n <small class=\"text-muted d-block\">Address</small>\r\n <span class=\"fw-semibold\">{{ orderAddress }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mb-3\">\r\n <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\r\n <div>\r\n <small class=\"text-muted d-block\">Payment</small>\r\n <span class=\"fw-semibold\">{{orderDetailData?.paymentDetails ?\r\n (getKey(orderDetailData?.paymentDetails)==='COD' ? 'Cash on Delivery':\r\n getKey(orderDetailData?.paymentDetails) ) : 'N/A'}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Track Order Button -->\r\n <div class=\"text-center mt-4\" *ngIf=\"orderDetailData?.orderTrackingLink\">\r\n <button\r\n class=\"btn btn-primary w-100 d-flex align-items-center justify-content-center gap-2 py-2\"\r\n (click)=\"trackOrder()\">\r\n <mat-icon>location_searching</mat-icon>\r\n Track Order\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Timeline Section for Desktop -->\r\n <div class=\"card border-0 shadow-sm mb-4\" *ngIf=\"!isMobile\">\r\n <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('timeline')\"\r\n [simpoBackground]=\"styles?.background\" [id]=\"data?.id\">\r\n <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\r\n\r\n \">\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <mat-icon>timeline</mat-icon>\r\n Order Timeline\r\n </div>\r\n <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.timeline\">\r\n expand_less\r\n </mat-icon>\r\n </h4>\r\n </div>\r\n <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.timeline\">\r\n <p-timeline [value]=\"orderTimiline\">\r\n <ng-template pTemplate=\"content\" let-event>\r\n <div class=\"d-flex align-items-start gap-3 py-3\">\r\n <div class=\"rounded-circle p-2 d-flex align-items-center justify-content-center\"\r\n style=\"width: 40px; height: 40px;\" [simpoBackground]=\"styles?.background\"\r\n [id]=\"data?.id\">\r\n <mat-icon class=\"fs-6 d-flex align-items-center justify-content-center\">{{\r\n event.icon }}</mat-icon>\r\n </div>\r\n <div class=\"flex-grow-1\">\r\n <h6 class=\"fw-semibold text-dark mb-1\">{{ event.name?.replaceAll(\"_\", \" \") |\r\n titlecase }}</h6>\r\n <p class=\"text-muted mb-0 small\">{{ event.desc?.replaceAll(\"_\", \" \") }} on\r\n {{ event.date | date:'medium' }}</p>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-timeline>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</ng-container>\r\n\r\n<!-- Timeline Template -->\r\n<ng-template #timelineContainer>\r\n <div class=\"card border-0 shadow-sm mb-4\">\r\n <div class=\"card-header bg-warning text-dark py-2 f-16\">\r\n <h4 class=\"h5 mb-0 d-flex align-items-center gap-2\">\r\n <mat-icon>timeline</mat-icon>\r\n Order Timeline\r\n </h4>\r\n </div>\r\n <div class=\"card-body p-4\">\r\n <p-timeline [value]=\"orderTimiline\">\r\n <ng-template pTemplate=\"content\" let-event>\r\n <div class=\"d-flex align-items-start gap-3 py-3\">\r\n <div class=\"bg-primary rounded-circle p-2 d-flex align-items-center justify-content-center\"\r\n style=\"width: 40px; height: 40px;\">\r\n <mat-icon class=\"text-white fs-6 d-flex align-items-center justify-content-center\">{{\r\n event.icon }}</mat-icon>\r\n </div>\r\n <div class=\"flex-grow-1\">\r\n <h6 class=\"fw-semibold text-dark mb-1\">{{ event.name?.replaceAll(\"_\", \" \") | titlecase }}\r\n </h6>\r\n <p class=\"text-muted mb-0 small\">{{ event.desc?.replaceAll(\"_\", \" \") | titlecase }} on\r\n {{ event.date | date:'medium' }}</p>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-timeline>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<!-- Loading Skeleton -->\r\n<div class=\"container-fluid py-4\" *ngIf=\"isLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-12\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '60vh',\r\n 'border-radius': '12px',\r\n 'margin': '20px 0'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </div>\r\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:-20px;height:55px;left:18px}.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}\n"] }]
|
|
20903
|
+
], template: "<ng-container *ngIf=\"!isLoading\">\r\n <div class=\"container-fluid\" [attr.style]=\"customClass\" style=\"background-color: #f8f9fa; min-height: 100vh;\">\r\n <!-- Main Box -->\r\n <div class=\"border-0 mx-auto\">\r\n\r\n <!-- Back button & Thanks -->\r\n <div class=\"d-flex align-items-center mb-2\">\r\n <svg (click)=\"goBack()\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-chevron-left cp text-muted\">\r\n <path d=\"m15 18-6-6 6-6\"></path>\r\n </svg>\r\n <span class=\"text-muted fw-medium py-1\">Thanks!</span>\r\n </div>\r\n\r\n <!-- Main Headline -->\r\n <h2 class=\"fw-semibold mb-2 text-dark\" style=\"font-size: 1.75rem;\">\r\n {{ orderDetailData?.brandOrderDetails?.[0]?.orderStatus?.replaceAll(\"_\", \" \") | titlecase }} \uD83D\uDE80\r\n </h2>\r\n <p class=\"text-muted mb-3 fs-15\">\r\n {{ orderDetailData?.brandOrderDetails?.[0]?.orderStatus === 'DELIVERED' ? 'Your order has been\r\n delivered. Enjoy!' : (orderDetailData?.brandOrderDetails?.[0]?.orderStatus === 'CANCELLED' ? 'Your order\r\n was cancelled.' : 'Your order is on the way. It will be shipped. We will inform you.') }}\r\n </p>\r\n\r\n <!-- Colored Line -->\r\n <div class=\"mb-3\" style=\"height: 3px; width: 100%;\"\r\n [style.background]=\"'linear-gradient(to right, ' + (styles?.background?.color || '#20c997') + ', transparent)'\">\r\n </div>\r\n\r\n <!-- Order Number & Actions -->\r\n <div class=\"d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-2\">\r\n <div class=\"fw-semibold text-dark mb-2 mb-md-0 d-flex align-items-center\">\r\n Order number:\r\n <span class=\"ms-1\" [style.color]=\"styles?.background?.color || '#20c997'\">\r\n {{ orderDetailData?.orderNum }}\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <!-- Content Grid Layout -->\r\n <div class=\"row mt-2\">\r\n <!-- Left Column -->\r\n <div class=\"col-lg-7 col-xl-8 mb-4\">\r\n <!-- Items List -->\r\n <div class=\"card border mb-4 overflow-hidden\"\r\n style=\"border-color: #eaeaea !important; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.02);\">\r\n <ng-container\r\n *ngFor=\"let item of orderDetailData?.brandOrderDetails[0]?.orderedItems; let last = last\">\r\n <div class=\"p-4\" [ngClass]=\"{'border-bottom': !last}\">\r\n <div class=\"d-flex flex-column flex-md-row align-items-start justify-content-between\">\r\n <div class=\"d-flex gap-4 w-100\">\r\n <!-- Image -->\r\n <img loading=\"lazy\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"item.imgUrl\" alt=\"{{ item.itemName }}\"\r\n class=\"rounded shadow-sm flex-shrink-0\"\r\n style=\"width: 80px; height: 80px; object-fit: cover; border-radius: 8px !important;\">\r\n\r\n <!-- Details -->\r\n <div class=\"flex-grow-1\">\r\n <h6 class=\"fw-bold text-dark mb-1\" style=\"font-size: 15px;\">{{ item.itemName\r\n }}</h6>\r\n <p class=\"text-muted small mb-2\" style=\"font-size: 13px;\"\r\n *ngIf=\"item.variantName || item.customizationDetails\">{{\r\n item.variantName ||\r\n 'Regular' }}</p>\r\n <div class=\"fw-semibold text-dark mt-1\" style=\"font-size: 13px;\">Quantity {{\r\n item.quantity }}</div>\r\n\r\n <!-- Review Section -->\r\n <div class=\"mt-4 pt-3 border-top\"\r\n *ngIf=\"orderDetailData?.brandOrderDetails?.[0]?.orderStatus == 'DELIVERED'\">\r\n\r\n <div class=\"d-flex align-items-center justify-content-between mb-2\">\r\n <h6 class=\"fw-bold mb-0 text-dark\" style=\"font-size: 14px;\">Leave a\r\n Review\r\n </h6>\r\n <p-rating [(ngModel)]=\"item.rating\" [cancel]=\"false\"\r\n [readonly]=\"false\"\r\n (ngModelChange)=\"submitReview(item)\"></p-rating>\r\n </div>\r\n\r\n <div class=\"add-detail-review text-primary fw-medium cursor-pointer d-inline-flex align-items-center gap-1\"\r\n style=\"font-size: 13px;\"\r\n (click)=\"item.showReview = !item.showReview\">\r\n <mat-icon\r\n style=\"font-size: 15px; width: 15px; height: 15px;\">mode_edit</mat-icon>\r\n <span>Write a Detailed Review</span>\r\n </div>\r\n\r\n <div *ngIf=\"item.showReview\" class=\"mt-3 p-4 bg-white\"\r\n style=\"border: 1px solid #f0f0f0; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.03);\">\r\n\r\n <h6 class=\"fw-semibold text-dark mb-3\" style=\"font-size: 14px;\">\r\n Share your\r\n experience</h6>\r\n\r\n <div class=\"mb-4\">\r\n <textarea class=\"form-control shadow-none review-textarea\"\r\n [(ngModel)]=\"item.review\" rows=\"4\"\r\n placeholder=\"What did you like or dislike? How was the fit and quality?\"></textarea>\r\n </div>\r\n\r\n <div class=\"mb-4\">\r\n <h6 class=\"fw-medium text-muted mb-2\" style=\"font-size: 13px;\">\r\n Attach\r\n Photos <span\r\n style=\"font-size: 11px; opacity: 0.7;\">(Optional)</span>\r\n </h6>\r\n <div class=\"d-flex gap-3 flex-wrap align-items-center\">\r\n <div class=\"position-relative\"\r\n *ngFor=\"let img of item?.reviewImages ?? []\">\r\n <img [src]=\"img.imgUrl\" alt=\"\"\r\n style=\"width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid #e2e8f0; box-shadow: 0 2px 4px rgba(0,0,0,0.02);\">\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center justify-content-center cursor-pointer review-upload-box\"\r\n (click)=\"reviewFileInput.click()\">\r\n <mat-icon\r\n style=\"font-size: 26px; width: 26px; height: 26px;\">add_photo_alternate</mat-icon>\r\n </div>\r\n <input type=\"file\" name=\"myfile\" multiple hidden\r\n accept=\"image/jpg,image/jpeg,image/gif,image/png,application/pdf,image/x-eps\"\r\n (change)=\"uploadImage($event, item)\" class=\"pc-btn\"\r\n #reviewFileInput />\r\n </div>\r\n </div>\r\n\r\n <div class=\"w-100 mt-2 d-flex justify-content-end\">\r\n <button\r\n class=\"btn w-40 fw-bold shadow-sm d-flex justify-content-center align-items-center gap-2 review-submit-btn\"\r\n [style.background]=\"styles?.background?.color || '#20c997'\"\r\n (click)=\"submitReview(item)\">\r\n Submit Review\r\n <mat-icon\r\n style=\"font-size: 18px; width: 18px; height: 18px;\">send</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Price -->\r\n <div class=\"text-end fw-bold text-dark d-none d-md-block\"\r\n style=\"font-size: 15px;\">\r\n <span [innerHTML]=\"currency\"></span>{{ (item.sellingPrice * item.quantity) |\r\n number:\r\n '1.0-2' }}\r\n </div>\r\n </div>\r\n <!-- Mobile Price -->\r\n <div class=\"text-start fw-bold text-dark fs-6 mt-3 d-md-none w-100\">\r\n <span [innerHTML]=\"currency\"></span>{{ (item.sellingPrice * item.quantity) |\r\n number:\r\n '1.0-2' }}\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- Summary Section -->\r\n <div class=\"row gx-5\">\r\n <!-- Left: Address & Payment -->\r\n <div class=\"col-md-6 mb-4 mb-md-0 d-flex flex-column gap-4\">\r\n <div>\r\n <h6 class=\"text-dark mb-2\" style=\"font-size: 13px; font-weight: 600;\">Shipping Address\r\n </h6>\r\n <div class=\"text-dark\" style=\"font-size: 13px;\">\r\n <span class=\"d-block mb-1\">{{ orderDetailData?.addressDetails?.receiverName\r\n }}</span>\r\n <span class=\"text-muted d-block\" style=\"line-height: 1.5; max-width: 280px;\">\r\n {{ orderAddress }}<br>\r\n {{ orderDetailData?.addressDetails?.receiverPhone }}\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div>\r\n <h6 class=\"text-dark mb-2\" style=\"font-size: 13px; font-weight: 600;\">Payment</h6>\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <span class=\"text-primary fw-bolder fs-5\"\r\n *ngIf=\"getKey(orderDetailData?.paymentDetails)!=='COD'\"\r\n style=\"font-family: Arial, sans-serif; letter-spacing: -0.5px;\">VISA</span>\r\n <mat-icon *ngIf=\"getKey(orderDetailData?.paymentDetails)==='COD'\" class=\"text-muted\"\r\n style=\"font-size: 28px; width: 28px; height: 28px;\">payments</mat-icon>\r\n\r\n <div>\r\n <div class=\"text-dark\" style=\"font-size: 13px;\">\r\n {{orderDetailData?.paymentDetails ?\r\n (getKey(orderDetailData?.paymentDetails)==='COD' ? 'Cash on Delivery':\r\n getKey(orderDetailData?.paymentDetails) ) : 'N/A'}}</div>\r\n <div class=\"text-muted\" style=\"font-size: 12px; letter-spacing: 0.5px;\"\r\n *ngIf=\"getKey(orderDetailData?.paymentDetails)!=='COD'\">**** **** **** 1234\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Right: Bill Details -->\r\n <div class=\"col-md-6 pt-1\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n <span class=\"text-muted\" style=\"font-size: 13px;\">Subtotal</span>\r\n <span class=\"text-dark fw-medium\" style=\"font-size: 13px;\">\r\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.totalNetValue |\r\n number:'1.0-2' }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-between align-items-center mb-2\"\r\n *ngIf=\"orderDetailData?.billDetails?.discountAmount\">\r\n <span class=\"text-muted\" style=\"font-size: 13px;\">Discount</span>\r\n <span class=\"text-success fw-medium\" style=\"font-size: 13px;\">\r\n -<span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount\r\n |\r\n number:'1.0-2' }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n <span class=\"text-muted\" style=\"font-size: 13px;\">Shipping</span>\r\n <span class=\"text-dark fw-medium\"\r\n style=\"font-size: 13px;\">{{orderDetailData?.billDetails.deliveryCharges ?\r\n orderDetailData?.billDetails.deliveryCharges : 'FREE'}}</span>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n <span class=\"text-muted\" style=\"font-size: 13px;\">Estimated Tax</span>\r\n <span class=\"text-dark fw-medium\" style=\"font-size: 13px;\">\r\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount\r\n ?\r\n orderDetailData?.billDetails?.totalTaxAfterDiscount :\r\n orderDetailData?.billDetails?.totalTax\r\n | number:'1.0-2' }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-between align-items-center mb-2\"\r\n *ngIf=\"orderDetailData?.billDetails?.orraSchemeRedeemedAmount\">\r\n <span class=\"text-muted\" style=\"font-size: 13px;\">Redeem Amount</span>\r\n <span class=\"text-dark fw-medium\" style=\"font-size: 13px;\">\r\n -<span [innerHTML]=\"currency\"></span>{{\r\n orderDetailData?.billDetails?.orraSchemeRedeemedAmount | number:'1.0-2' }}\r\n </span>\r\n </div>\r\n\r\n <hr class=\"text-muted my-3\" style=\"opacity: 0.15;\">\r\n\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span class=\"text-dark\" style=\"font-size: 14px; font-weight: 600;\">Total</span>\r\n <span class=\"text-dark fw-bold\" style=\"font-size: 16px;\">\r\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice }}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- Right Column -->\r\n <div class=\"col-lg-5 col-xl-4\">\r\n <!-- Timeline Card -->\r\n <div class=\"card border p-4 mb-4\"\r\n style=\"border-color: #eaeaea !important; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.02);\"\r\n *ngIf=\"orderDetailData?.orderTrackingLink || (orderTimiline && orderTimiline.length > 0)\">\r\n <div class=\"d-flex align-items-center justify-content-between mb-4 pb-3 border-bottom\">\r\n <h5 class=\"fw-bold mb-0 text-dark d-flex align-items-center gap-2\" style=\"font-size: 16px;\">\r\n <mat-icon style=\"color: #6c757d;\">timeline</mat-icon> Order Timeline\r\n </h5>\r\n\r\n <div *ngIf=\"orderDetailData?.orderTrackingLink\"\r\n class=\"d-inline-flex align-items-center gap-1 cursor-pointer fw-medium\"\r\n [style.color]=\"styles?.background?.color || '#0d6efd'\" style=\"font-size: 13px;\"\r\n (click)=\"trackOrder()\">\r\n <mat-icon\r\n style=\"font-size: 15px; width: 15px; height: 15px;\">location_searching</mat-icon>\r\n <span style=\"text-decoration: underline; text-underline-offset: 3px;\">Track Order</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"px-2 pt-2\" *ngIf=\"orderTimiline && orderTimiline.length > 0\">\r\n <p-timeline [value]=\"orderTimiline\" styleClass=\"custom-timeline\" align=\"left\">\r\n <ng-template pTemplate=\"marker\" let-event>\r\n <!-- Completed -->\r\n <span class=\"custom-marker completed-marker\"\r\n *ngIf=\"event.statusType === 'completed' || event.statusType === 'delivered'\"\r\n [style.backgroundColor]=\"styles?.background?.color || '#059669'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n </svg>\r\n </span>\r\n\r\n <!-- Active -->\r\n <span class=\"custom-marker active-marker\" *ngIf=\"event.statusType === 'active'\"\r\n [style.borderColor]=\"styles?.background?.color || '#059669'\"></span>\r\n\r\n <!-- Future -->\r\n <span class=\"custom-marker future-marker\"\r\n *ngIf=\"event.statusType === 'future'\"></span>\r\n </ng-template>\r\n\r\n <ng-template pTemplate=\"content\" let-event let-last=\"last\">\r\n <div class=\"ms-4\" [ngClass]=\"{'pb-4': !last}\">\r\n <div class=\"fw-semibold text-dark\" style=\"font-size: 15px; margin-bottom: 2px;\">\r\n {{\r\n event.name?.replaceAll(\"_\", \" \") | titlecase }}</div>\r\n <div style=\"font-size: 14px;\"\r\n [ngClass]=\"{'text-muted': event.statusType !== 'future', 'text-light-grey': event.statusType === 'future'}\">\r\n {{ event.date ? (event.date | date:'MMM d') : 'Not yet' }}\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-timeline>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</ng-container>\r\n\r\n<!-- Loading Skeleton -->\r\n<div class=\"container-fluid py-4\" *ngIf=\"isLoading\" style=\"background-color: #f8f9fa; min-height: 100vh;\">\r\n <div class=\"mx-auto\" style=\"max-width: 1000px;\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '60vh',\r\n 'border-radius': '12px',\r\n 'margin': '20px 0'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\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-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%}\n"] }]
|
|
20746
20904
|
}], ctorParameters: () => [{ type: EventsService }, { type: StorageServiceService }, { type: RestService }, { type: i6$1.MessageService }, { type: ImageUplaodService }], propDecorators: { responseData: [{
|
|
20747
20905
|
type: Input
|
|
20748
20906
|
}], data: [{
|
|
@@ -24527,8 +24685,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
24527
24685
|
args: ["window: resize", ["$event"]]
|
|
24528
24686
|
}] } });
|
|
24529
24687
|
|
|
24530
|
-
class ReferEarnComponent {
|
|
24688
|
+
class ReferEarnComponent extends BaseSection {
|
|
24531
24689
|
constructor(storageService, router) {
|
|
24690
|
+
super();
|
|
24532
24691
|
this.storageService = storageService;
|
|
24533
24692
|
this.router = router;
|
|
24534
24693
|
this.userDetail = this.storageService.getUser();
|
|
@@ -24561,7 +24720,7 @@ class ReferEarnComponent {
|
|
|
24561
24720
|
return window.location.href;
|
|
24562
24721
|
}
|
|
24563
24722
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ReferEarnComponent, deps: [{ token: StorageServiceService }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
24564
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ReferEarnComponent, isStandalone: true, selector: "simpo-refer-earn", inputs: { data: "data" }, ngImport: i0, template: "<section class=\"total-container d-flex justify-content-center align-items-center\" [id]=\"data?.id\" simpoHover>\r\n <section class=\"container h-100\" [id]=\"data?.id\" #container [spacingHorizontal]=\"stylesLayout\"\r\n [simpoLayout]=\"styles?.layout\" style=\"max-height: 86%;\">\r\n <div class=\"row h-100 w-100 h-100\" #aboveHeight class=\"above-height\"\r\n [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile}\" style=\"height: 100%;\">\r\n <div data-simpo-refer-card [attr.data-business]=\"getBusinessId\" [attr.data-mobile]=\"getMobile\"\r\n [attr.data-email]=\"getEmail\" [attr.data-name]=\"getName\" [attr.data-webUrl]=\"getWebUrl\"\r\n [attr.data-userId]=\"getUserId\" style=\"height: 100%;\">\r\n </div>\r\n </div>\r\n </section>\r\n</section>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.total-container{height:calc(84vh - 180px);overflow:scroll}@media (max-width: 475px){.total-container{height:auto}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "directive", type:
|
|
24723
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ReferEarnComponent, isStandalone: true, selector: "simpo-refer-earn", inputs: { data: "data", edit: "edit", delete: "delete", index: "index" }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container d-flex justify-content-center align-items-center\" [id]=\"data?.id\" simpoHover>\r\n <section class=\"container h-100\" [id]=\"data?.id\" #container [spacingHorizontal]=\"stylesLayout\"\r\n [simpoLayout]=\"styles?.layout\" style=\"max-height: 86%;\">\r\n <div class=\"row h-100 w-100 h-100\" #aboveHeight class=\"above-height\"\r\n [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile}\" style=\"height: 100%;\">\r\n <div data-simpo-refer-card [attr.data-business]=\"getBusinessId\" [attr.data-mobile]=\"getMobile\"\r\n [attr.data-email]=\"getEmail\" [attr.data-name]=\"getName\" [attr.data-webUrl]=\"getWebUrl\"\r\n [attr.data-userId]=\"getUserId\" style=\"height: 100%;\">\r\n </div>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </section>\r\n</section>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.total-container{height:calc(84vh - 180px);overflow:scroll}@media (max-width: 475px){.total-container{height:auto}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
|
|
24565
24724
|
//DIRECTIVE
|
|
24566
24725
|
ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: NgxImageZoomModule }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: RatingModule }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "ngmodule", type: ToastModule }, { kind: "ngmodule", type: PanelModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
|
|
24567
24726
|
}
|
|
@@ -24581,9 +24740,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
24581
24740
|
ToastModule,
|
|
24582
24741
|
PanelModule,
|
|
24583
24742
|
SpacingHorizontalDirective
|
|
24584
|
-
], template: "<section class=\"total-container d-flex justify-content-center align-items-center\" [id]=\"data?.id\" simpoHover>\r\n <section class=\"container h-100\" [id]=\"data?.id\" #container [spacingHorizontal]=\"stylesLayout\"\r\n [simpoLayout]=\"styles?.layout\" style=\"max-height: 86%;\">\r\n <div class=\"row h-100 w-100 h-100\" #aboveHeight class=\"above-height\"\r\n [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile}\" style=\"height: 100%;\">\r\n <div data-simpo-refer-card [attr.data-business]=\"getBusinessId\" [attr.data-mobile]=\"getMobile\"\r\n [attr.data-email]=\"getEmail\" [attr.data-name]=\"getName\" [attr.data-webUrl]=\"getWebUrl\"\r\n [attr.data-userId]=\"getUserId\" style=\"height: 100%;\">\r\n </div>\r\n </div>\r\n </section>\r\n</section>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.total-container{height:calc(84vh - 180px);overflow:scroll}@media (max-width: 475px){.total-container{height:auto}}\n"] }]
|
|
24743
|
+
], template: "<section class=\"total-container d-flex justify-content-center align-items-center\" [id]=\"data?.id\" simpoHover>\r\n <section class=\"container h-100\" [id]=\"data?.id\" #container [spacingHorizontal]=\"stylesLayout\"\r\n [simpoLayout]=\"styles?.layout\" style=\"max-height: 86%;\">\r\n <div class=\"row h-100 w-100 h-100\" #aboveHeight class=\"above-height\"\r\n [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile}\" style=\"height: 100%;\">\r\n <div data-simpo-refer-card [attr.data-business]=\"getBusinessId\" [attr.data-mobile]=\"getMobile\"\r\n [attr.data-email]=\"getEmail\" [attr.data-name]=\"getName\" [attr.data-webUrl]=\"getWebUrl\"\r\n [attr.data-userId]=\"getUserId\" style=\"height: 100%;\">\r\n </div>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </section>\r\n</section>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.total-container{height:calc(84vh - 180px);overflow:scroll}@media (max-width: 475px){.total-container{height:auto}}\n"] }]
|
|
24585
24744
|
}], ctorParameters: () => [{ type: StorageServiceService }, { type: i2$2.Router }], propDecorators: { data: [{
|
|
24586
24745
|
type: Input
|
|
24746
|
+
}], edit: [{
|
|
24747
|
+
type: Input
|
|
24748
|
+
}], delete: [{
|
|
24749
|
+
type: Input
|
|
24750
|
+
}], index: [{
|
|
24751
|
+
type: Input
|
|
24587
24752
|
}] } });
|
|
24588
24753
|
|
|
24589
24754
|
class CountdownBannerComponent extends BaseSection {
|