simpo-component-library 3.6.712 → 3.6.714
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/address/address.component.mjs +3 -3
- package/esm2022/lib/ecommerce/sections/cart/cart.component.mjs +211 -13
- package/esm2022/lib/ecommerce/sections/featured-category/featured-category.component.mjs +14 -15
- package/esm2022/lib/ecommerce/sections/featured-category/featured-collection.component.mjs +4 -9
- package/esm2022/lib/ecommerce/sections/featured-products/featured-products.component.mjs +3 -3
- package/esm2022/lib/ecommerce/sections/order-details/order-details.component.mjs +3 -3
- 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/ecommerce/sections/user-profile/user-profile.component.mjs +10 -3
- package/esm2022/lib/elements/schedule-video-call/schedule-video-call.component.mjs +5 -3
- package/esm2022/lib/sections/product-info-section/product-info-section.component.mjs +3 -3
- package/esm2022/lib/services/rest.service.mjs +8 -1
- package/fesm2022/simpo-component-library.mjs +264 -48
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/lib/ecommerce/sections/cart/cart.component.d.ts +28 -0
- package/lib/ecommerce/sections/featured-category/featured-category.component.d.ts +1 -1
- package/lib/ecommerce/sections/refer-earn/refer-earn.component.d.ts +6 -2
- package/lib/ecommerce/sections/user-profile/user-profile.component.d.ts +1 -0
- package/lib/services/rest.service.d.ts +2 -0
- package/package.json +1 -1
- package/simpo-component-library-3.6.714.tgz +0 -0
- package/simpo-component-library-3.6.712.tgz +0 -0
|
@@ -3421,6 +3421,7 @@ class RestService {
|
|
|
3421
3421
|
getCategoriesByCollectionId(collectionId) {
|
|
3422
3422
|
return this.http.get(this.BASE_URL + `ecommerce/inventory/category/collectionId?collectionId=${collectionId}`).pipe(map((response) => response.data?.map((category) => new Category(category))));
|
|
3423
3423
|
}
|
|
3424
|
+
// https://newdev-api.simpo.ai/
|
|
3424
3425
|
getAllCategoriesByBusinessId(payload) {
|
|
3425
3426
|
return this.http.put(this.BASE_URL + `ecommerce/inventory/get/category`, payload);
|
|
3426
3427
|
}
|
|
@@ -3859,6 +3860,12 @@ class RestService {
|
|
|
3859
3860
|
checkAppInstalled(bId, appName) {
|
|
3860
3861
|
return this.http.get(this.BASE_URL + `app/app/check-app?businessId=${bId}&appName=${appName}`);
|
|
3861
3862
|
}
|
|
3863
|
+
getRedeemPoints(bId, userId, evetType, orderValue, rewardPoints) {
|
|
3864
|
+
return this.http.get(this.BASE_URL + `ecommerce/api/referrals/available-amount?businessId=${bId}&userId=${userId}&eventType=${evetType}&orderValue=${orderValue}&rewardPoints=${rewardPoints}`);
|
|
3865
|
+
}
|
|
3866
|
+
paymentWithCompletePoints(cartId, data) {
|
|
3867
|
+
return this.http.post(this.BASE_URL + `ecommerce/order/order/rewards?cartId=${cartId}`, data);
|
|
3868
|
+
}
|
|
3862
3869
|
getAllPassbookDues(bId, userId) {
|
|
3863
3870
|
const token = this.getToken();
|
|
3864
3871
|
const headers = new HttpHeaders({
|
|
@@ -8142,7 +8149,7 @@ class AddressComponent extends BaseSection {
|
|
|
8142
8149
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddressComponent, deps: [{ token: i0.NgZone }, { token: RestService }, { token: i1$1.MatDialog }, { token: i8$3.MatBottomSheet }, { token: i2$2.Router }, { token: StorageServiceService }, { token: EventsService }, { token: i2$1.MatSnackBar }, { token: MAT_DIALOG_DATA, optional: true }, { token: i1$1.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8143
8150
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AddressComponent, isStandalone: true, selector: "simpo-address", inputs: { responseData: "responseData", data: "data", index: "index", customClass: "customClass", edit: "edit", delete: "delete", isCart: "isCart" }, outputs: { selectedAddress: "selectedAddress" }, providers: [
|
|
8144
8151
|
MatSnackBar
|
|
8145
|
-
], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- <section class=\"address-sec\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <div class=\"header\">\r\n <div class=\"new-address-header\">\r\n <mat-icon (click)=\"goToProfile()\" *ngIf=\"!isCart\">keyboard_arrow_left</mat-icon>\r\n <h3>{{isCart ? 'Deliver To' : 'New Address'}}</h3>\r\n </div>\r\n <span class=\"add-address\" [style.color]=\"styles?.background?.accentColor\" *ngIf=\"!addNewAddress\" (click)=\"addNewAddress = true\">+ add address</span>\r\n </div>\r\n <ng-container *ngIf=\"addNewAddress\">\r\n <div class=\"forms d-flex flex-wrap floating-input\">\r\n\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Name</div>\r\n <input type=\"text\" placeholder=\"Enter name\" [(ngModel)]=\"address.receiverName\" (keydown)=\"validateName($event)\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Mobile</div>\r\n <input type=\"text\" placeholder=\"Enter mobile\" [(ngModel)]=\"address.receiverPhone\" (keydown)=\"validateMobile($event)\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Email</div>\r\n <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"address.receiverEmail\">\r\n </div>\r\n <div class=\"form-control-full-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Address</div>\r\n <input type=\"text\" placeholder=\"Enter address\" matGoogleMapsAutocomplete\r\n (onAutocompleteSelected)=\"onAutocompleteSelected($event)\"\r\n (onLocationSelected)=\"onLocationSelected($event)\" [(ngModel)]=\"address.addressLine1\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Locality</div>\r\n <input type=\"text\" placeholder=\"Enter locality\" [(ngModel)]=\"address.localityName\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\">Landmark</div>\r\n <input type=\"text\" placeholder=\"Enter landmark\" [(ngModel)]=\"address.landmark\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Pincode</div>\r\n <input type=\"text\" placeholder=\"Enter pincode\" [(ngModel)]=\"address.zipCode\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">City</div>\r\n <input type=\"text\" placeholder=\"Enter city\" [(ngModel)]=\"address.cityName\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">State</div>\r\n <input type=\"text\" placeholder=\"Enter state\" [(ngModel)]=\"address.stateName\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Address Type</div>\r\n <div class=\"d-flex\">\r\n <ng-container *ngFor=\"let address of addessType\">\r\n <span class=\"address-type\" (click)=\"checkAddressType(address)\" [style.backgroundColor]=\"address.status ? data?.styles?.background?.accentColor : 'rgba(211, 211, 211, 0.362)'\" [ngClass]=\"{'active-address': address.status}\">{{address.key}}</span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"address-list\" *ngIf=\"!addNewAddress\">\r\n <ng-container *ngFor=\"let address of addressList; let idx = index\">\r\n <div class=\"address\" (click)=\"addressSelected(idx)\" [style.borderColor]=\"selectedAddressIdx == idx ? data?.styles?.background?.accentColor : ''\">\r\n <div class=\"address-left\">\r\n <div class=\"top\">\r\n <span class=\"fw-bold mr-2\">{{address?.receiverName}}</span>\r\n <span class=\"address-type\">{{address?.addressType}}</span>\r\n </div>\r\n <div class=\"address-det\">{{address.addressLine1}}</div>\r\n <div class=\"phone\">\r\n <span>Phone:</span>\r\n <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n </div>\r\n </div>\r\n <div class=\"address-right\"></div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"action-btn\" *ngIf=\"addNewAddress\">\r\n <div class=\"error-message\">\r\n <span *ngIf=\"address.receiverPhone?.length != 10 && address.receiverPhone?.length\">*Mobile number is invalid</span>\r\n <span *ngIf=\"!isEmailValid\">*Email is invalid</span>\r\n </div>\r\n <button [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [disabled]=\"\r\n !address.receiverName ||\r\n !address.receiverPhone ||\r\n address.receiverPhone?.length != 10 ||\r\n !isEmailValid ||\r\n !address.addressLine1 ||\r\n !address.localityName ||\r\n !address.zipCode ||\r\n !address.cityName ||\r\n !address.stateName ||\r\n !address.addressType || isLoading\r\n \" (click)=\"updateAddress()\">{{isLoading ? 'Loading' : 'Update'}}</button>\r\n </div>\r\n</section>\r\n\r\n\r\n<div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n<div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n</div> -->\r\n\r\n<div class=\"form-container\">\r\n <div class=\"header\">\r\n <h1>{{editIndex === -1 ? 'Add' : 'Update'}} Address</h1>\r\n <button class=\"close-btn\" (click)=\"close()\">\u00D7</button>\r\n </div>\r\n\r\n <div class=\"form-content\">\r\n <div class=\"section\">\r\n <h2 class=\"section-title\">Contact Details</h2>\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label for=\"firstName\">Name</label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.receiverName\" (ngModelChange)=\"validateForm('NAME')\" [class.error-border]=\"!validateObject['NAME']\">\r\n </div>\r\n <div class=\"form-group\">\r\n <label for=\"lastName\">Mobile</label>\r\n <input type=\"number\" class=\"form-control\"\r\n [(ngModel)]=\"address.receiverPhone\" (ngModelChange)=\"validateForm('MOBILE')\" [class.error-border]=\"!validateObject['MOBILE']\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"mobile\">Email</label>\r\n <input type=\"email\" class=\"form-control\" [(ngModel)]=\"address.receiverEmail\" (ngModelChange)=\"validateForm('EMAIL')\" [class.error-border]=\"!validateObject['EMAIL']\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"section\">\r\n <h2 class=\"section-title\">Shipping Address</h2>\r\n <div class=\"form-group\">\r\n <label for=\"address\">Address</label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.addressLine1\" (ngModelChange)=\"validateForm('ADDRESS')\" [class.error-border]=\"!validateObject['ADDRESS']\">\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"landmark\">Locality</label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.localityName\">\r\n </div>\r\n\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label for=\"city\">Landmark</label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.landmark\">\r\n </div>\r\n <div class=\"form-group\">\r\n <label for=\"pincode\">Pincode</label>\r\n <input type=\"text\" id=\"pincode\" class=\"form-control\" [(ngModel)]=\"address.zipCode\" (ngModelChange)=\"validateForm('PINCODE')\" [class.error-border]=\"!validateObject['PINCODE']\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label for=\"state\">City</label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.cityName\" (ngModelChange)=\"validateForm('CITY')\" [class.error-border]=\"!validateObject['CITY']\">\r\n </div>\r\n <div class=\"form-group\">\r\n <label for=\"country\">State</label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.stateName\"(ngModelChange)=\"validateForm('STATE')\" [class.error-border]=\"!validateObject['STATE']\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"section\">\r\n <h2 class=\"section-title\">Address Type</h2>\r\n <div class=\"d-flex gap-3 w-100\">\r\n <div *ngFor=\"let ele of addessType\" (click)=\"setAddress(ele.key)\" class=\"max-content\" [class.max-content-active]=\"address.addressType == ele.key \">{{ele.key | titlecase}}</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"footer\">\r\n <button class=\"save-btn\" (click)=\"updateAddress()\" *ngIf=\"!isLoading\">{{editIndex === -1 ? 'Save' :\r\n 'Update'}}</button>\r\n <button class=\"save-btn loading-btn\" *ngIf=\"isLoading\"><mat-spinner></mat-spinner> Loading</button>\r\n </div>\r\n</div>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.form-container{max-width:500px;margin:0 auto;background:#fff;border-radius:12px;width:100%}.header{display:flex;justify-content:space-between;align-items:center;padding:0 20px;height:60px;background-color:#f6f3f9}.header h1{font-size:18px;font-weight:600;color:#000}.close-btn{background:none;border:none;cursor:pointer;padding:4px;color:#666;font-size:24px;line-height:1;width:max-content!important}.form-content{padding:20px;height:calc(100vh - 120px);overflow:scroll}.section{margin-bottom:32px}.section-title{font-size:16px;font-weight:600;color:#000;margin-bottom:16px;margin-top:16px}.form-row{display:flex;gap:12px;margin-bottom:16px}.form-group{flex:1;margin-bottom:16px}.form-group.full-width{width:100%}.form-group label{display:block;font-size:14px;color:#6b7280;margin-bottom:6px;font-weight:500}.form-control{width:100%;padding:8px 16px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;background:#f9fafb;transition:all .2s ease}.form-control:focus{outline:none;border-color:#8b5cf6;background:#fff;box-shadow:0 0 0 3px #8b5cf61a}.form-control.error{border-color:#ef4444;background:#fef2f2}.phone-group{display:flex;align-items:center;gap:8px}.country-code{padding:12px 8px 12px 16px;background:#f3f4f6;border:1px solid #d1d5db;border-radius:8px 0 0 8px;font-size:14px;color:#6b7280;min-width:60px;text-align:center;border-right:none}.phone-input{border-radius:0 8px 8px 0;border-left:none}select.form-control{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e\");background-position:right 12px center;background-repeat:no-repeat;background-size:16px;padding-right:40px;appearance:none;cursor:pointer}.save-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;width:90%!important}.save-btn:hover{transform:translateY(-1px);box-shadow:0 8px 25px #8b5cf64d}.max-content{width:max-content;padding:6px 15px;border-radius:8px;border:1px solid rgba(139,92,246,.3);color:#6b7280;cursor:pointer}.max-content-active{background:#f6f3f9;font-weight:600}.save-btn:active{transform:translateY(0)}@media (max-width: 480px){.form-row,.phone-group{flex-direction:column}.country-code{border-radius:8px;border-right:1px solid #d1d5db}.phone-input{border-radius:8px;border-left:1px solid #d1d5db}}.footer{display:flex;align-items:center;justify-content:center;height:60px;position:absolute;width:100%;bottom:0;box-shadow:#0000000a 0 -1px 8px}.loading-btn{display:flex;gap:10px;justify-content:center}.loading-btn mat-spinner{height:20px!important;width:20px!important}.error-border{border:2px solid #e53e3e!important}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i10$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
|
|
8152
|
+
], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- <section class=\"address-sec\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <div class=\"header\">\r\n <div class=\"new-address-header\">\r\n <mat-icon (click)=\"goToProfile()\" *ngIf=\"!isCart\">keyboard_arrow_left</mat-icon>\r\n <h3>{{isCart ? 'Deliver To' : 'New Address'}}</h3>\r\n </div>\r\n <span class=\"add-address\" [style.color]=\"styles?.background?.accentColor\" *ngIf=\"!addNewAddress\" (click)=\"addNewAddress = true\">+ add address</span>\r\n </div>\r\n <ng-container *ngIf=\"addNewAddress\">\r\n <div class=\"forms d-flex flex-wrap floating-input\">\r\n\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Name</div>\r\n <input type=\"text\" placeholder=\"Enter name\" [(ngModel)]=\"address.receiverName\" (keydown)=\"validateName($event)\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Mobile</div>\r\n <input type=\"text\" placeholder=\"Enter mobile\" [(ngModel)]=\"address.receiverPhone\" (keydown)=\"validateMobile($event)\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Email</div>\r\n <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"address.receiverEmail\">\r\n </div>\r\n <div class=\"form-control-full-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Address</div>\r\n <input type=\"text\" placeholder=\"Enter address\" matGoogleMapsAutocomplete\r\n (onAutocompleteSelected)=\"onAutocompleteSelected($event)\"\r\n (onLocationSelected)=\"onLocationSelected($event)\" [(ngModel)]=\"address.addressLine1\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Locality</div>\r\n <input type=\"text\" placeholder=\"Enter locality\" [(ngModel)]=\"address.localityName\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\">Landmark</div>\r\n <input type=\"text\" placeholder=\"Enter landmark\" [(ngModel)]=\"address.landmark\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Pincode</div>\r\n <input type=\"text\" placeholder=\"Enter pincode\" [(ngModel)]=\"address.zipCode\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">City</div>\r\n <input type=\"text\" placeholder=\"Enter city\" [(ngModel)]=\"address.cityName\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">State</div>\r\n <input type=\"text\" placeholder=\"Enter state\" [(ngModel)]=\"address.stateName\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Address Type</div>\r\n <div class=\"d-flex\">\r\n <ng-container *ngFor=\"let address of addessType\">\r\n <span class=\"address-type\" (click)=\"checkAddressType(address)\" [style.backgroundColor]=\"address.status ? data?.styles?.background?.accentColor : 'rgba(211, 211, 211, 0.362)'\" [ngClass]=\"{'active-address': address.status}\">{{address.key}}</span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"address-list\" *ngIf=\"!addNewAddress\">\r\n <ng-container *ngFor=\"let address of addressList; let idx = index\">\r\n <div class=\"address\" (click)=\"addressSelected(idx)\" [style.borderColor]=\"selectedAddressIdx == idx ? data?.styles?.background?.accentColor : ''\">\r\n <div class=\"address-left\">\r\n <div class=\"top\">\r\n <span class=\"fw-bold mr-2\">{{address?.receiverName}}</span>\r\n <span class=\"address-type\">{{address?.addressType}}</span>\r\n </div>\r\n <div class=\"address-det\">{{address.addressLine1}}</div>\r\n <div class=\"phone\">\r\n <span>Phone:</span>\r\n <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n </div>\r\n </div>\r\n <div class=\"address-right\"></div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"action-btn\" *ngIf=\"addNewAddress\">\r\n <div class=\"error-message\">\r\n <span *ngIf=\"address.receiverPhone?.length != 10 && address.receiverPhone?.length\">*Mobile number is invalid</span>\r\n <span *ngIf=\"!isEmailValid\">*Email is invalid</span>\r\n </div>\r\n <button [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [disabled]=\"\r\n !address.receiverName ||\r\n !address.receiverPhone ||\r\n address.receiverPhone?.length != 10 ||\r\n !isEmailValid ||\r\n !address.addressLine1 ||\r\n !address.localityName ||\r\n !address.zipCode ||\r\n !address.cityName ||\r\n !address.stateName ||\r\n !address.addressType || isLoading\r\n \" (click)=\"updateAddress()\">{{isLoading ? 'Loading' : 'Update'}}</button>\r\n </div>\r\n</section>\r\n\r\n\r\n<div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n<div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n</div> -->\r\n\r\n<div class=\"form-container\">\r\n <div class=\"header\">\r\n <h1>{{editIndex === -1 ? 'Add' : 'Update'}} Address</h1>\r\n <button class=\"close-btn\" (click)=\"close()\">\u00D7</button>\r\n </div>\r\n\r\n <div class=\"form-content\">\r\n <div class=\"section\">\r\n <h2 class=\"section-title\">Contact Details</h2>\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label for=\"firstName\">Name</label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.receiverName\"\r\n (ngModelChange)=\"validateForm('NAME')\" [class.error-border]=\"!validateObject['NAME']\">\r\n </div>\r\n <div class=\"form-group\">\r\n <label for=\"lastName\">Mobile</label>\r\n <input type=\"number\" class=\"form-control\" [(ngModel)]=\"address.receiverPhone\"\r\n (ngModelChange)=\"validateForm('MOBILE')\" [class.error-border]=\"!validateObject['MOBILE']\"\r\n (keydown.arrowUp)=\"$event.preventDefault()\" (keydown.arrowDown)=\"$event.preventDefault()\"\r\n (wheel)=\"$event.preventDefault()\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"mobile\">Email</label>\r\n <input type=\"email\" class=\"form-control\" [(ngModel)]=\"address.receiverEmail\"\r\n (ngModelChange)=\"validateForm('EMAIL')\" [class.error-border]=\"!validateObject['EMAIL']\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"section\">\r\n <h2 class=\"section-title\">Shipping Address</h2>\r\n <div class=\"form-group\">\r\n <label for=\"address\">Address</label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.addressLine1\"\r\n (ngModelChange)=\"validateForm('ADDRESS')\" [class.error-border]=\"!validateObject['ADDRESS']\">\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"landmark\">Locality</label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.localityName\">\r\n </div>\r\n\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label for=\"city\">Landmark</label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.landmark\">\r\n </div>\r\n <div class=\"form-group\">\r\n <label for=\"pincode\">Pincode</label>\r\n <input type=\"text\" id=\"pincode\" class=\"form-control\" [(ngModel)]=\"address.zipCode\"\r\n (ngModelChange)=\"validateForm('PINCODE')\" [class.error-border]=\"!validateObject['PINCODE']\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label for=\"state\">City</label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.cityName\" (ngModelChange)=\"validateForm('CITY')\"\r\n [class.error-border]=\"!validateObject['CITY']\">\r\n </div>\r\n <div class=\"form-group\">\r\n <label for=\"country\">State</label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.stateName\"\r\n (ngModelChange)=\"validateForm('STATE')\" [class.error-border]=\"!validateObject['STATE']\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"section\">\r\n <h2 class=\"section-title\">Address Type</h2>\r\n <div class=\"d-flex gap-3 w-100\">\r\n <div *ngFor=\"let ele of addessType\" (click)=\"setAddress(ele.key)\" class=\"max-content\"\r\n [class.max-content-active]=\"address.addressType == ele.key \">{{ele.key | titlecase}}</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"footer\">\r\n <button class=\"save-btn\" (click)=\"updateAddress()\" *ngIf=\"!isLoading\">{{editIndex === -1 ? 'Save' :\r\n 'Update'}}</button>\r\n <button class=\"save-btn loading-btn\" *ngIf=\"isLoading\"><mat-spinner></mat-spinner> Loading</button>\r\n </div>\r\n</div>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.form-container{max-width:500px;margin:0 auto;background:#fff;border-radius:12px;width:100%}.header{display:flex;justify-content:space-between;align-items:center;padding:0 20px;height:60px;background-color:#f6f3f9}.header h1{font-size:18px;font-weight:600;color:#000}.close-btn{background:none;border:none;cursor:pointer;padding:4px;color:#666;font-size:24px;line-height:1;width:max-content!important}.form-content{padding:20px;height:calc(100vh - 120px);overflow:scroll}.section{margin-bottom:32px}.section-title{font-size:16px;font-weight:600;color:#000;margin-bottom:16px;margin-top:16px}.form-row{display:flex;gap:12px;margin-bottom:16px}.form-group{flex:1;margin-bottom:16px}.form-group.full-width{width:100%}.form-group label{display:block;font-size:14px;color:#6b7280;margin-bottom:6px;font-weight:500}.form-control{width:100%;padding:8px 16px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;background:#f9fafb;transition:all .2s ease}.form-control:focus{outline:none;border-color:#8b5cf6;background:#fff;box-shadow:0 0 0 3px #8b5cf61a}.form-control.error{border-color:#ef4444;background:#fef2f2}.phone-group{display:flex;align-items:center;gap:8px}.country-code{padding:12px 8px 12px 16px;background:#f3f4f6;border:1px solid #d1d5db;border-radius:8px 0 0 8px;font-size:14px;color:#6b7280;min-width:60px;text-align:center;border-right:none}.phone-input{border-radius:0 8px 8px 0;border-left:none}select.form-control{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e\");background-position:right 12px center;background-repeat:no-repeat;background-size:16px;padding-right:40px;appearance:none;cursor:pointer}.save-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;width:90%!important}.save-btn:hover{transform:translateY(-1px);box-shadow:0 8px 25px #8b5cf64d}.max-content{width:max-content;padding:6px 15px;border-radius:8px;border:1px solid rgba(139,92,246,.3);color:#6b7280;cursor:pointer}.max-content-active{background:#f6f3f9;font-weight:600}.save-btn:active{transform:translateY(0)}@media (max-width: 480px){.form-row,.phone-group{flex-direction:column}.country-code{border-radius:8px;border-right:1px solid #d1d5db}.phone-input{border-radius:8px;border-left:1px solid #d1d5db}}.footer{display:flex;align-items:center;justify-content:center;height:60px;position:absolute;width:100%;bottom:0;box-shadow:#0000000a 0 -1px 8px}.loading-btn{display:flex;gap:10px;justify-content:center}.loading-btn mat-spinner{height:20px!important;width:20px!important}.error-border{border:2px solid #e53e3e!important}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i10$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
|
|
8146
8153
|
}
|
|
8147
8154
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddressComponent, decorators: [{
|
|
8148
8155
|
type: Component,
|
|
@@ -8158,7 +8165,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
8158
8165
|
MatProgressSpinnerModule,
|
|
8159
8166
|
], providers: [
|
|
8160
8167
|
MatSnackBar
|
|
8161
|
-
], template: "<!-- <section class=\"address-sec\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <div class=\"header\">\r\n <div class=\"new-address-header\">\r\n <mat-icon (click)=\"goToProfile()\" *ngIf=\"!isCart\">keyboard_arrow_left</mat-icon>\r\n <h3>{{isCart ? 'Deliver To' : 'New Address'}}</h3>\r\n </div>\r\n <span class=\"add-address\" [style.color]=\"styles?.background?.accentColor\" *ngIf=\"!addNewAddress\" (click)=\"addNewAddress = true\">+ add address</span>\r\n </div>\r\n <ng-container *ngIf=\"addNewAddress\">\r\n <div class=\"forms d-flex flex-wrap floating-input\">\r\n\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Name</div>\r\n <input type=\"text\" placeholder=\"Enter name\" [(ngModel)]=\"address.receiverName\" (keydown)=\"validateName($event)\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Mobile</div>\r\n <input type=\"text\" placeholder=\"Enter mobile\" [(ngModel)]=\"address.receiverPhone\" (keydown)=\"validateMobile($event)\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Email</div>\r\n <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"address.receiverEmail\">\r\n </div>\r\n <div class=\"form-control-full-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Address</div>\r\n <input type=\"text\" placeholder=\"Enter address\" matGoogleMapsAutocomplete\r\n (onAutocompleteSelected)=\"onAutocompleteSelected($event)\"\r\n (onLocationSelected)=\"onLocationSelected($event)\" [(ngModel)]=\"address.addressLine1\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Locality</div>\r\n <input type=\"text\" placeholder=\"Enter locality\" [(ngModel)]=\"address.localityName\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\">Landmark</div>\r\n <input type=\"text\" placeholder=\"Enter landmark\" [(ngModel)]=\"address.landmark\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Pincode</div>\r\n <input type=\"text\" placeholder=\"Enter pincode\" [(ngModel)]=\"address.zipCode\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">City</div>\r\n <input type=\"text\" placeholder=\"Enter city\" [(ngModel)]=\"address.cityName\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">State</div>\r\n <input type=\"text\" placeholder=\"Enter state\" [(ngModel)]=\"address.stateName\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Address Type</div>\r\n <div class=\"d-flex\">\r\n <ng-container *ngFor=\"let address of addessType\">\r\n <span class=\"address-type\" (click)=\"checkAddressType(address)\" [style.backgroundColor]=\"address.status ? data?.styles?.background?.accentColor : 'rgba(211, 211, 211, 0.362)'\" [ngClass]=\"{'active-address': address.status}\">{{address.key}}</span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"address-list\" *ngIf=\"!addNewAddress\">\r\n <ng-container *ngFor=\"let address of addressList; let idx = index\">\r\n <div class=\"address\" (click)=\"addressSelected(idx)\" [style.borderColor]=\"selectedAddressIdx == idx ? data?.styles?.background?.accentColor : ''\">\r\n <div class=\"address-left\">\r\n <div class=\"top\">\r\n <span class=\"fw-bold mr-2\">{{address?.receiverName}}</span>\r\n <span class=\"address-type\">{{address?.addressType}}</span>\r\n </div>\r\n <div class=\"address-det\">{{address.addressLine1}}</div>\r\n <div class=\"phone\">\r\n <span>Phone:</span>\r\n <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n </div>\r\n </div>\r\n <div class=\"address-right\"></div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"action-btn\" *ngIf=\"addNewAddress\">\r\n <div class=\"error-message\">\r\n <span *ngIf=\"address.receiverPhone?.length != 10 && address.receiverPhone?.length\">*Mobile number is invalid</span>\r\n <span *ngIf=\"!isEmailValid\">*Email is invalid</span>\r\n </div>\r\n <button [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [disabled]=\"\r\n !address.receiverName ||\r\n !address.receiverPhone ||\r\n address.receiverPhone?.length != 10 ||\r\n !isEmailValid ||\r\n !address.addressLine1 ||\r\n !address.localityName ||\r\n !address.zipCode ||\r\n !address.cityName ||\r\n !address.stateName ||\r\n !address.addressType || isLoading\r\n \" (click)=\"updateAddress()\">{{isLoading ? 'Loading' : 'Update'}}</button>\r\n </div>\r\n</section>\r\n\r\n\r\n<div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n<div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n</div> -->\r\n\r\n<div class=\"form-container\">\r\n <div class=\"header\">\r\n <h1>{{editIndex === -1 ? 'Add' : 'Update'}} Address</h1>\r\n <button class=\"close-btn\" (click)=\"close()\">\u00D7</button>\r\n </div>\r\n\r\n <div class=\"form-content\">\r\n <div class=\"section\">\r\n <h2 class=\"section-title\">Contact Details</h2>\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label for=\"firstName\">Name</label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.receiverName\" (ngModelChange)=\"validateForm('NAME')\" [class.error-border]=\"!validateObject['NAME']\">\r\n </div>\r\n <div class=\"form-group\">\r\n <label for=\"lastName\">Mobile</label>\r\n <input type=\"number\" class=\"form-control\"\r\n [(ngModel)]=\"address.receiverPhone\" (ngModelChange)=\"validateForm('MOBILE')\" [class.error-border]=\"!validateObject['MOBILE']\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"mobile\">Email</label>\r\n <input type=\"email\" class=\"form-control\" [(ngModel)]=\"address.receiverEmail\" (ngModelChange)=\"validateForm('EMAIL')\" [class.error-border]=\"!validateObject['EMAIL']\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"section\">\r\n <h2 class=\"section-title\">Shipping Address</h2>\r\n <div class=\"form-group\">\r\n <label for=\"address\">Address</label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.addressLine1\" (ngModelChange)=\"validateForm('ADDRESS')\" [class.error-border]=\"!validateObject['ADDRESS']\">\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"landmark\">Locality</label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.localityName\">\r\n </div>\r\n\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label for=\"city\">Landmark</label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.landmark\">\r\n </div>\r\n <div class=\"form-group\">\r\n <label for=\"pincode\">Pincode</label>\r\n <input type=\"text\" id=\"pincode\" class=\"form-control\" [(ngModel)]=\"address.zipCode\" (ngModelChange)=\"validateForm('PINCODE')\" [class.error-border]=\"!validateObject['PINCODE']\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label for=\"state\">City</label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.cityName\" (ngModelChange)=\"validateForm('CITY')\" [class.error-border]=\"!validateObject['CITY']\">\r\n </div>\r\n <div class=\"form-group\">\r\n <label for=\"country\">State</label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.stateName\"(ngModelChange)=\"validateForm('STATE')\" [class.error-border]=\"!validateObject['STATE']\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"section\">\r\n <h2 class=\"section-title\">Address Type</h2>\r\n <div class=\"d-flex gap-3 w-100\">\r\n <div *ngFor=\"let ele of addessType\" (click)=\"setAddress(ele.key)\" class=\"max-content\" [class.max-content-active]=\"address.addressType == ele.key \">{{ele.key | titlecase}}</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"footer\">\r\n <button class=\"save-btn\" (click)=\"updateAddress()\" *ngIf=\"!isLoading\">{{editIndex === -1 ? 'Save' :\r\n 'Update'}}</button>\r\n <button class=\"save-btn loading-btn\" *ngIf=\"isLoading\"><mat-spinner></mat-spinner> Loading</button>\r\n </div>\r\n</div>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.form-container{max-width:500px;margin:0 auto;background:#fff;border-radius:12px;width:100%}.header{display:flex;justify-content:space-between;align-items:center;padding:0 20px;height:60px;background-color:#f6f3f9}.header h1{font-size:18px;font-weight:600;color:#000}.close-btn{background:none;border:none;cursor:pointer;padding:4px;color:#666;font-size:24px;line-height:1;width:max-content!important}.form-content{padding:20px;height:calc(100vh - 120px);overflow:scroll}.section{margin-bottom:32px}.section-title{font-size:16px;font-weight:600;color:#000;margin-bottom:16px;margin-top:16px}.form-row{display:flex;gap:12px;margin-bottom:16px}.form-group{flex:1;margin-bottom:16px}.form-group.full-width{width:100%}.form-group label{display:block;font-size:14px;color:#6b7280;margin-bottom:6px;font-weight:500}.form-control{width:100%;padding:8px 16px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;background:#f9fafb;transition:all .2s ease}.form-control:focus{outline:none;border-color:#8b5cf6;background:#fff;box-shadow:0 0 0 3px #8b5cf61a}.form-control.error{border-color:#ef4444;background:#fef2f2}.phone-group{display:flex;align-items:center;gap:8px}.country-code{padding:12px 8px 12px 16px;background:#f3f4f6;border:1px solid #d1d5db;border-radius:8px 0 0 8px;font-size:14px;color:#6b7280;min-width:60px;text-align:center;border-right:none}.phone-input{border-radius:0 8px 8px 0;border-left:none}select.form-control{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e\");background-position:right 12px center;background-repeat:no-repeat;background-size:16px;padding-right:40px;appearance:none;cursor:pointer}.save-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;width:90%!important}.save-btn:hover{transform:translateY(-1px);box-shadow:0 8px 25px #8b5cf64d}.max-content{width:max-content;padding:6px 15px;border-radius:8px;border:1px solid rgba(139,92,246,.3);color:#6b7280;cursor:pointer}.max-content-active{background:#f6f3f9;font-weight:600}.save-btn:active{transform:translateY(0)}@media (max-width: 480px){.form-row,.phone-group{flex-direction:column}.country-code{border-radius:8px;border-right:1px solid #d1d5db}.phone-input{border-radius:8px;border-left:1px solid #d1d5db}}.footer{display:flex;align-items:center;justify-content:center;height:60px;position:absolute;width:100%;bottom:0;box-shadow:#0000000a 0 -1px 8px}.loading-btn{display:flex;gap:10px;justify-content:center}.loading-btn mat-spinner{height:20px!important;width:20px!important}.error-border{border:2px solid #e53e3e!important}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"] }]
|
|
8168
|
+
], template: "<!-- <section class=\"address-sec\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <div class=\"header\">\r\n <div class=\"new-address-header\">\r\n <mat-icon (click)=\"goToProfile()\" *ngIf=\"!isCart\">keyboard_arrow_left</mat-icon>\r\n <h3>{{isCart ? 'Deliver To' : 'New Address'}}</h3>\r\n </div>\r\n <span class=\"add-address\" [style.color]=\"styles?.background?.accentColor\" *ngIf=\"!addNewAddress\" (click)=\"addNewAddress = true\">+ add address</span>\r\n </div>\r\n <ng-container *ngIf=\"addNewAddress\">\r\n <div class=\"forms d-flex flex-wrap floating-input\">\r\n\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Name</div>\r\n <input type=\"text\" placeholder=\"Enter name\" [(ngModel)]=\"address.receiverName\" (keydown)=\"validateName($event)\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Mobile</div>\r\n <input type=\"text\" placeholder=\"Enter mobile\" [(ngModel)]=\"address.receiverPhone\" (keydown)=\"validateMobile($event)\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Email</div>\r\n <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"address.receiverEmail\">\r\n </div>\r\n <div class=\"form-control-full-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Address</div>\r\n <input type=\"text\" placeholder=\"Enter address\" matGoogleMapsAutocomplete\r\n (onAutocompleteSelected)=\"onAutocompleteSelected($event)\"\r\n (onLocationSelected)=\"onLocationSelected($event)\" [(ngModel)]=\"address.addressLine1\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Locality</div>\r\n <input type=\"text\" placeholder=\"Enter locality\" [(ngModel)]=\"address.localityName\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\">Landmark</div>\r\n <input type=\"text\" placeholder=\"Enter landmark\" [(ngModel)]=\"address.landmark\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Pincode</div>\r\n <input type=\"text\" placeholder=\"Enter pincode\" [(ngModel)]=\"address.zipCode\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">City</div>\r\n <input type=\"text\" placeholder=\"Enter city\" [(ngModel)]=\"address.cityName\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">State</div>\r\n <input type=\"text\" placeholder=\"Enter state\" [(ngModel)]=\"address.stateName\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Address Type</div>\r\n <div class=\"d-flex\">\r\n <ng-container *ngFor=\"let address of addessType\">\r\n <span class=\"address-type\" (click)=\"checkAddressType(address)\" [style.backgroundColor]=\"address.status ? data?.styles?.background?.accentColor : 'rgba(211, 211, 211, 0.362)'\" [ngClass]=\"{'active-address': address.status}\">{{address.key}}</span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"address-list\" *ngIf=\"!addNewAddress\">\r\n <ng-container *ngFor=\"let address of addressList; let idx = index\">\r\n <div class=\"address\" (click)=\"addressSelected(idx)\" [style.borderColor]=\"selectedAddressIdx == idx ? data?.styles?.background?.accentColor : ''\">\r\n <div class=\"address-left\">\r\n <div class=\"top\">\r\n <span class=\"fw-bold mr-2\">{{address?.receiverName}}</span>\r\n <span class=\"address-type\">{{address?.addressType}}</span>\r\n </div>\r\n <div class=\"address-det\">{{address.addressLine1}}</div>\r\n <div class=\"phone\">\r\n <span>Phone:</span>\r\n <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n </div>\r\n </div>\r\n <div class=\"address-right\"></div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"action-btn\" *ngIf=\"addNewAddress\">\r\n <div class=\"error-message\">\r\n <span *ngIf=\"address.receiverPhone?.length != 10 && address.receiverPhone?.length\">*Mobile number is invalid</span>\r\n <span *ngIf=\"!isEmailValid\">*Email is invalid</span>\r\n </div>\r\n <button [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [disabled]=\"\r\n !address.receiverName ||\r\n !address.receiverPhone ||\r\n address.receiverPhone?.length != 10 ||\r\n !isEmailValid ||\r\n !address.addressLine1 ||\r\n !address.localityName ||\r\n !address.zipCode ||\r\n !address.cityName ||\r\n !address.stateName ||\r\n !address.addressType || isLoading\r\n \" (click)=\"updateAddress()\">{{isLoading ? 'Loading' : 'Update'}}</button>\r\n </div>\r\n</section>\r\n\r\n\r\n<div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n<div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n</div> -->\r\n\r\n<div class=\"form-container\">\r\n <div class=\"header\">\r\n <h1>{{editIndex === -1 ? 'Add' : 'Update'}} Address</h1>\r\n <button class=\"close-btn\" (click)=\"close()\">\u00D7</button>\r\n </div>\r\n\r\n <div class=\"form-content\">\r\n <div class=\"section\">\r\n <h2 class=\"section-title\">Contact Details</h2>\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label for=\"firstName\">Name</label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.receiverName\"\r\n (ngModelChange)=\"validateForm('NAME')\" [class.error-border]=\"!validateObject['NAME']\">\r\n </div>\r\n <div class=\"form-group\">\r\n <label for=\"lastName\">Mobile</label>\r\n <input type=\"number\" class=\"form-control\" [(ngModel)]=\"address.receiverPhone\"\r\n (ngModelChange)=\"validateForm('MOBILE')\" [class.error-border]=\"!validateObject['MOBILE']\"\r\n (keydown.arrowUp)=\"$event.preventDefault()\" (keydown.arrowDown)=\"$event.preventDefault()\"\r\n (wheel)=\"$event.preventDefault()\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"mobile\">Email</label>\r\n <input type=\"email\" class=\"form-control\" [(ngModel)]=\"address.receiverEmail\"\r\n (ngModelChange)=\"validateForm('EMAIL')\" [class.error-border]=\"!validateObject['EMAIL']\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"section\">\r\n <h2 class=\"section-title\">Shipping Address</h2>\r\n <div class=\"form-group\">\r\n <label for=\"address\">Address</label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.addressLine1\"\r\n (ngModelChange)=\"validateForm('ADDRESS')\" [class.error-border]=\"!validateObject['ADDRESS']\">\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"landmark\">Locality</label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.localityName\">\r\n </div>\r\n\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label for=\"city\">Landmark</label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.landmark\">\r\n </div>\r\n <div class=\"form-group\">\r\n <label for=\"pincode\">Pincode</label>\r\n <input type=\"text\" id=\"pincode\" class=\"form-control\" [(ngModel)]=\"address.zipCode\"\r\n (ngModelChange)=\"validateForm('PINCODE')\" [class.error-border]=\"!validateObject['PINCODE']\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label for=\"state\">City</label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.cityName\" (ngModelChange)=\"validateForm('CITY')\"\r\n [class.error-border]=\"!validateObject['CITY']\">\r\n </div>\r\n <div class=\"form-group\">\r\n <label for=\"country\">State</label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.stateName\"\r\n (ngModelChange)=\"validateForm('STATE')\" [class.error-border]=\"!validateObject['STATE']\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"section\">\r\n <h2 class=\"section-title\">Address Type</h2>\r\n <div class=\"d-flex gap-3 w-100\">\r\n <div *ngFor=\"let ele of addessType\" (click)=\"setAddress(ele.key)\" class=\"max-content\"\r\n [class.max-content-active]=\"address.addressType == ele.key \">{{ele.key | titlecase}}</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"footer\">\r\n <button class=\"save-btn\" (click)=\"updateAddress()\" *ngIf=\"!isLoading\">{{editIndex === -1 ? 'Save' :\r\n 'Update'}}</button>\r\n <button class=\"save-btn loading-btn\" *ngIf=\"isLoading\"><mat-spinner></mat-spinner> Loading</button>\r\n </div>\r\n</div>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.form-container{max-width:500px;margin:0 auto;background:#fff;border-radius:12px;width:100%}.header{display:flex;justify-content:space-between;align-items:center;padding:0 20px;height:60px;background-color:#f6f3f9}.header h1{font-size:18px;font-weight:600;color:#000}.close-btn{background:none;border:none;cursor:pointer;padding:4px;color:#666;font-size:24px;line-height:1;width:max-content!important}.form-content{padding:20px;height:calc(100vh - 120px);overflow:scroll}.section{margin-bottom:32px}.section-title{font-size:16px;font-weight:600;color:#000;margin-bottom:16px;margin-top:16px}.form-row{display:flex;gap:12px;margin-bottom:16px}.form-group{flex:1;margin-bottom:16px}.form-group.full-width{width:100%}.form-group label{display:block;font-size:14px;color:#6b7280;margin-bottom:6px;font-weight:500}.form-control{width:100%;padding:8px 16px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;background:#f9fafb;transition:all .2s ease}.form-control:focus{outline:none;border-color:#8b5cf6;background:#fff;box-shadow:0 0 0 3px #8b5cf61a}.form-control.error{border-color:#ef4444;background:#fef2f2}.phone-group{display:flex;align-items:center;gap:8px}.country-code{padding:12px 8px 12px 16px;background:#f3f4f6;border:1px solid #d1d5db;border-radius:8px 0 0 8px;font-size:14px;color:#6b7280;min-width:60px;text-align:center;border-right:none}.phone-input{border-radius:0 8px 8px 0;border-left:none}select.form-control{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e\");background-position:right 12px center;background-repeat:no-repeat;background-size:16px;padding-right:40px;appearance:none;cursor:pointer}.save-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;width:90%!important}.save-btn:hover{transform:translateY(-1px);box-shadow:0 8px 25px #8b5cf64d}.max-content{width:max-content;padding:6px 15px;border-radius:8px;border:1px solid rgba(139,92,246,.3);color:#6b7280;cursor:pointer}.max-content-active{background:#f6f3f9;font-weight:600}.save-btn:active{transform:translateY(0)}@media (max-width: 480px){.form-row,.phone-group{flex-direction:column}.country-code{border-radius:8px;border-right:1px solid #d1d5db}.phone-input{border-radius:8px;border-left:1px solid #d1d5db}}.footer{display:flex;align-items:center;justify-content:center;height:60px;position:absolute;width:100%;bottom:0;box-shadow:#0000000a 0 -1px 8px}.loading-btn{display:flex;gap:10px;justify-content:center}.loading-btn mat-spinner{height:20px!important;width:20px!important}.error-border{border:2px solid #e53e3e!important}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"] }]
|
|
8162
8169
|
}], ctorParameters: () => [{ type: i0.NgZone }, { type: RestService }, { type: i1$1.MatDialog }, { type: i8$3.MatBottomSheet }, { type: i2$2.Router }, { type: StorageServiceService }, { type: EventsService }, { type: i2$1.MatSnackBar }, { type: undefined, decorators: [{
|
|
8163
8170
|
type: Optional
|
|
8164
8171
|
}, {
|
|
@@ -8442,11 +8449,11 @@ class ScheduleVideoCallComponent {
|
|
|
8442
8449
|
}
|
|
8443
8450
|
}
|
|
8444
8451
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ScheduleVideoCallComponent, deps: [{ token: i1$1.MatDialogRef }, { token: i1$1.MatDialog }, { token: i6$1.MessageService }, { token: RestService }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8445
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ScheduleVideoCallComponent, isStandalone: true, selector: "simpo-schedule-video-call", providers: [MessageService], ngImport: i0, template: "<section class=\"main-section\">\r\n <div class=\"header\">\r\n <div class=\"header-text\">See it Live on Video Call</div>\r\n <mat-icon (click)=\"goBack()\">close</mat-icon>\r\n </div>\r\n <div class=\"content\">\r\n <div class=\"selection-header\">\r\n <h2 class=\"selection-title\">Choose Designs for Live Video Call</h2>\r\n <span class=\"selection-counter\">{{selectedProducts.length}}/{{responseData?.orderItems?.length ?\r\n responseData.orderItems.length : 0}}</span>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"product-card col-md-6 col-12\" *ngFor=\"let data of orderedItems; let i = index\">\r\n <img [src]=\"data?.imgUrl\" alt=\"product_img\">\r\n <input type=\"checkbox\" [checked]=\"data.selected\" (click)=\"selectedItems(data)\">\r\n <div class=\"product-price\">\u20B9{{data?.discountedPrice ? data?.discountedPrice : 'N/A'}}</div>\r\n <div class=\"product-name\">{{data?.itemName ? data?.itemName : 'N/A'}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"footer\">\r\n <button (click)=\"openScheduleCall(dialogBox)\">Schedule video call</button>\r\n </div>\r\n <ng-template #dialogBox>\r\n <div class=\"modal-content\">\r\n <div class=\"schedule-header w-100 d-flex align-items-center justify-content-end p-2\">\r\n <mat-icon (click)=\"closeDialog()\"\r\n class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n </div>\r\n <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n <div class=\"modal-body h-100 p-0\">\r\n <div class=\"row h-100 w-100 mt-3 video-call-container\">\r\n <div class=\"col-6\" *ngIf=\"!isMobile\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/897651c1751980487170Vdo Call.gif\" alt=\"\"\r\n class=\"w-100\">\r\n </div>\r\n <div class=\"col-6 position-relative h-100 call-details width-100\">\r\n <!-- Name Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\r\n <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\r\n (input)=\"onInputChange('username')\">\r\n </div>\r\n\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\r\n <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\r\n (input)=\"onInputChange('email')\">\r\n </div>\r\n\r\n <!-- Mobile Number Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\r\n <div class=\"sub-text-call\">IN +91</div>\r\n <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\r\n (input)=\"onInputChange('mobileNumber')\" (keydown.arrowUp)=\"$event.preventDefault()\"\r\n (keydown.arrowDown)=\"$event.preventDefault()\" (wheel)=\"$event.preventDefault()\">\r\n </div>\r\n\r\n\r\n <!-- Pincode Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\r\n <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\r\n <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n </div>\r\n <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\r\n (input)=\"onInputChange('pincode')\">\r\n </div>\r\n <div class=\"language my-3\">\r\n <div class=\"mini-text mb-2\">Language Preference</div>\r\n <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\r\n <ng-container *ngFor=\"let lang of languages\">\r\n <div class=\"lang px-2 py-1 rounded cursor-pointer\"\r\n [style.background]=\"lang == selectedLang ? responseData.data?.styles?.background?.accentColor : ''\"\r\n (click)=\"selectedLang = lang\" [simpoColor]=\"responseData.data?.styles?.background?.accentColor\">\r\n {{lang}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"selectedLang == 'Others'\">\r\n <div class=\"input-field my-3\">\r\n <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\r\n </div>\r\n </ng-container>\r\n <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\"\r\n (click)=\"scheduleVideoCall()\" [disabled]=\"isSubmitting\">\r\n <ng-container *ngIf=\"isSubmitting\">\r\n <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\r\n <span class=\"visually-hidden\">Loading...</span>\r\n </div>\r\n SCHEDULING...\r\n </ng-container>\r\n <ng-container *ngIf=\"!isSubmitting && !scheduled\">\r\n <mat-icon>video_call</mat-icon> \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>\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}.main-section{width:30vw;position:relative;height:100%}@media screen and (max-width:475px){.main-section{width:100vw!important}}.header{display:flex;justify-content:space-between;padding:0 15px;height:45px;align-items:center;border-bottom:1px solid #a8aaab}.content{height:calc(100vh - 90px);overflow:scroll;padding:15px}.footer{position:absolute;bottom:0;width:100%;height:45px;align-items:center;display:flex;padding:0 25px}.footer button{background:linear-gradient(90deg,#8c6,#26b324);border:none;font-size:1rem!important;color:#fff;padding-top:7px;padding-bottom:7px;border-radius:5px;font-weight:600}.selection-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.selection-title{font-size:16px;color:#495057;font-weight:400}.selection-counter{font-size:16px;color:#6c757d;font-weight:500}.product-card{position:relative}.product-card img{width:100%;height:29vh}.product-card input{position:absolute;top:10px;right:20px}.product-price{font-size:16px;font-weight:600;color:#000;margin-bottom:4px;margin-top:10px}.product-original-price{font-size:12px;color:#6c757d;text-decoration:line-through;margin-left:8px}.product-name{font-size:14px;color:#6c757d;line-height:1.3}.row{row-gap:15px}.header-text{font-size:1rem;font-weight:700}.modal-content{height:100%;border:none;border-radius:0!important}.schedule-header{border-radius:18px 18px 0 0}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9}.video-call-container{margin:0!important}.call-details{padding:3%!important}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:20px;height:20px;border:2px solid #ccc;border-radius:4px;outline:none;cursor:pointer;position:relative;background-color:#fff;transition:all .3s ease}input[type=checkbox]:checked{background-color:#007bff;border-color:#007bff}input[type=checkbox]:checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:14px;font-weight:700}input[type=checkbox]:hover{border-color:#007bff;box-shadow:0 0 5px #007bff4d}.error-border{border:2px solid red!important}@media screen and (max-width:475px){.width-100{width:100%!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
|
|
8452
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ScheduleVideoCallComponent, isStandalone: true, selector: "simpo-schedule-video-call", providers: [MessageService], ngImport: i0, template: "<section class=\"main-section\">\r\n <p-toast key=\"Video Call Schedule\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\" class=\"bottom-right\" />\r\n <div class=\"header\">\r\n <div class=\"header-text\">See it Live on Video Call</div>\r\n <mat-icon (click)=\"goBack()\">close</mat-icon>\r\n </div>\r\n <div class=\"content\">\r\n <div class=\"selection-header\">\r\n <h2 class=\"selection-title\">Choose Designs for Live Video Call</h2>\r\n <span class=\"selection-counter\">{{selectedProducts.length}}/{{responseData?.orderItems?.length ?\r\n responseData.orderItems.length : 0}}</span>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"product-card col-md-6 col-12\" *ngFor=\"let data of orderedItems; let i = index\">\r\n <img [src]=\"data?.imgUrl\" alt=\"product_img\">\r\n <input type=\"checkbox\" [checked]=\"data.selected\" (click)=\"selectedItems(data)\">\r\n <div class=\"product-price\">\u20B9{{data?.discountedPrice ? data?.discountedPrice : 'N/A'}}</div>\r\n <div class=\"product-name\">{{data?.itemName ? data?.itemName : 'N/A'}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"footer\">\r\n <button (click)=\"openScheduleCall(dialogBox)\">Schedule video call</button>\r\n </div>\r\n <ng-template #dialogBox>\r\n <div class=\"modal-content\">\r\n <div class=\"schedule-header w-100 d-flex align-items-center justify-content-end p-2\">\r\n <mat-icon (click)=\"closeDialog()\"\r\n class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n </div>\r\n <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n <div class=\"modal-body h-100 p-0\">\r\n <div class=\"row h-100 w-100 mt-3 video-call-container\">\r\n <div class=\"col-6\" *ngIf=\"!isMobile\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/897651c1751980487170Vdo Call.gif\" alt=\"\"\r\n class=\"w-100\">\r\n </div>\r\n <div class=\"col-6 position-relative h-100 call-details width-100\">\r\n <!-- Name Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\r\n <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\r\n (input)=\"onInputChange('username')\">\r\n </div>\r\n\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\r\n <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\r\n (input)=\"onInputChange('email')\">\r\n </div>\r\n\r\n <!-- Mobile Number Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\r\n <div class=\"sub-text-call\">IN +91</div>\r\n <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\r\n (input)=\"onInputChange('mobileNumber')\" (keydown.arrowUp)=\"$event.preventDefault()\"\r\n (keydown.arrowDown)=\"$event.preventDefault()\" (wheel)=\"$event.preventDefault()\">\r\n </div>\r\n\r\n\r\n <!-- Pincode Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\r\n <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\r\n <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n </div>\r\n <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\r\n (input)=\"onInputChange('pincode')\">\r\n </div>\r\n <div class=\"language my-3\">\r\n <div class=\"mini-text mb-2\">Language Preference</div>\r\n <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\r\n <ng-container *ngFor=\"let lang of languages\">\r\n <div class=\"lang px-2 py-1 rounded cursor-pointer\"\r\n [style.background]=\"lang == selectedLang ? responseData.data?.styles?.background?.accentColor : ''\"\r\n (click)=\"selectedLang = lang\" [simpoColor]=\"responseData.data?.styles?.background?.accentColor\">\r\n {{lang}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"selectedLang == 'Others'\">\r\n <div class=\"input-field my-3\">\r\n <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\r\n </div>\r\n </ng-container>\r\n <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\"\r\n (click)=\"scheduleVideoCall()\" [disabled]=\"isSubmitting\">\r\n <ng-container *ngIf=\"isSubmitting\">\r\n <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\r\n <span class=\"visually-hidden\">Loading...</span>\r\n </div>\r\n SCHEDULING...\r\n </ng-container>\r\n <ng-container *ngIf=\"!isSubmitting && !scheduled\">\r\n <mat-icon>video_call</mat-icon> \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>\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}.main-section{width:30vw;position:relative;height:100%}@media screen and (max-width:475px){.main-section{width:100vw!important}}.header{display:flex;justify-content:space-between;padding:0 15px;height:45px;align-items:center;border-bottom:1px solid #a8aaab}.content{height:calc(100vh - 90px);overflow:scroll;padding:15px}.footer{position:absolute;bottom:0;width:100%;height:45px;align-items:center;display:flex;padding:0 25px}.footer button{background:linear-gradient(90deg,#8c6,#26b324);border:none;font-size:1rem!important;color:#fff;padding-top:7px;padding-bottom:7px;border-radius:5px;font-weight:600}.selection-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.selection-title{font-size:16px;color:#495057;font-weight:400}.selection-counter{font-size:16px;color:#6c757d;font-weight:500}.product-card{position:relative}.product-card img{width:100%;height:29vh}.product-card input{position:absolute;top:10px;right:20px}.product-price{font-size:16px;font-weight:600;color:#000;margin-bottom:4px;margin-top:10px}.product-original-price{font-size:12px;color:#6c757d;text-decoration:line-through;margin-left:8px}.product-name{font-size:14px;color:#6c757d;line-height:1.3}.row{row-gap:15px}.header-text{font-size:1rem;font-weight:700}.modal-content{height:100%;border:none;border-radius:0!important}.schedule-header{border-radius:18px 18px 0 0}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9}.video-call-container{margin:0!important}.call-details{padding:3%!important}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:20px;height:20px;border:2px solid #ccc;border-radius:4px;outline:none;cursor:pointer;position:relative;background-color:#fff;transition:all .3s ease}input[type=checkbox]:checked{background-color:#007bff;border-color:#007bff}input[type=checkbox]:checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:14px;font-weight:700}input[type=checkbox]:hover{border-color:#007bff;box-shadow:0 0 5px #007bff4d}.error-border{border:2px solid red!important}@media screen and (max-width:475px){.width-100{width:100%!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i8$4.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
|
|
8446
8453
|
}
|
|
8447
8454
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ScheduleVideoCallComponent, decorators: [{
|
|
8448
8455
|
type: Component,
|
|
8449
|
-
args: [{ selector: 'simpo-schedule-video-call', standalone: true, imports: [CommonModule, MatIconModule, FormsModule, ColorDirective], providers: [MessageService], template: "<section class=\"main-section\">\r\n <div class=\"header\">\r\n <div class=\"header-text\">See it Live on Video Call</div>\r\n <mat-icon (click)=\"goBack()\">close</mat-icon>\r\n </div>\r\n <div class=\"content\">\r\n <div class=\"selection-header\">\r\n <h2 class=\"selection-title\">Choose Designs for Live Video Call</h2>\r\n <span class=\"selection-counter\">{{selectedProducts.length}}/{{responseData?.orderItems?.length ?\r\n responseData.orderItems.length : 0}}</span>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"product-card col-md-6 col-12\" *ngFor=\"let data of orderedItems; let i = index\">\r\n <img [src]=\"data?.imgUrl\" alt=\"product_img\">\r\n <input type=\"checkbox\" [checked]=\"data.selected\" (click)=\"selectedItems(data)\">\r\n <div class=\"product-price\">\u20B9{{data?.discountedPrice ? data?.discountedPrice : 'N/A'}}</div>\r\n <div class=\"product-name\">{{data?.itemName ? data?.itemName : 'N/A'}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"footer\">\r\n <button (click)=\"openScheduleCall(dialogBox)\">Schedule video call</button>\r\n </div>\r\n <ng-template #dialogBox>\r\n <div class=\"modal-content\">\r\n <div class=\"schedule-header w-100 d-flex align-items-center justify-content-end p-2\">\r\n <mat-icon (click)=\"closeDialog()\"\r\n class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n </div>\r\n <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n <div class=\"modal-body h-100 p-0\">\r\n <div class=\"row h-100 w-100 mt-3 video-call-container\">\r\n <div class=\"col-6\" *ngIf=\"!isMobile\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/897651c1751980487170Vdo Call.gif\" alt=\"\"\r\n class=\"w-100\">\r\n </div>\r\n <div class=\"col-6 position-relative h-100 call-details width-100\">\r\n <!-- Name Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\r\n <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\r\n (input)=\"onInputChange('username')\">\r\n </div>\r\n\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\r\n <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\r\n (input)=\"onInputChange('email')\">\r\n </div>\r\n\r\n <!-- Mobile Number Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\r\n <div class=\"sub-text-call\">IN +91</div>\r\n <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\r\n (input)=\"onInputChange('mobileNumber')\" (keydown.arrowUp)=\"$event.preventDefault()\"\r\n (keydown.arrowDown)=\"$event.preventDefault()\" (wheel)=\"$event.preventDefault()\">\r\n </div>\r\n\r\n\r\n <!-- Pincode Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\r\n <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\r\n <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n </div>\r\n <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\r\n (input)=\"onInputChange('pincode')\">\r\n </div>\r\n <div class=\"language my-3\">\r\n <div class=\"mini-text mb-2\">Language Preference</div>\r\n <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\r\n <ng-container *ngFor=\"let lang of languages\">\r\n <div class=\"lang px-2 py-1 rounded cursor-pointer\"\r\n [style.background]=\"lang == selectedLang ? responseData.data?.styles?.background?.accentColor : ''\"\r\n (click)=\"selectedLang = lang\" [simpoColor]=\"responseData.data?.styles?.background?.accentColor\">\r\n {{lang}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"selectedLang == 'Others'\">\r\n <div class=\"input-field my-3\">\r\n <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\r\n </div>\r\n </ng-container>\r\n <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\"\r\n (click)=\"scheduleVideoCall()\" [disabled]=\"isSubmitting\">\r\n <ng-container *ngIf=\"isSubmitting\">\r\n <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\r\n <span class=\"visually-hidden\">Loading...</span>\r\n </div>\r\n SCHEDULING...\r\n </ng-container>\r\n <ng-container *ngIf=\"!isSubmitting && !scheduled\">\r\n <mat-icon>video_call</mat-icon> \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>\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}.main-section{width:30vw;position:relative;height:100%}@media screen and (max-width:475px){.main-section{width:100vw!important}}.header{display:flex;justify-content:space-between;padding:0 15px;height:45px;align-items:center;border-bottom:1px solid #a8aaab}.content{height:calc(100vh - 90px);overflow:scroll;padding:15px}.footer{position:absolute;bottom:0;width:100%;height:45px;align-items:center;display:flex;padding:0 25px}.footer button{background:linear-gradient(90deg,#8c6,#26b324);border:none;font-size:1rem!important;color:#fff;padding-top:7px;padding-bottom:7px;border-radius:5px;font-weight:600}.selection-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.selection-title{font-size:16px;color:#495057;font-weight:400}.selection-counter{font-size:16px;color:#6c757d;font-weight:500}.product-card{position:relative}.product-card img{width:100%;height:29vh}.product-card input{position:absolute;top:10px;right:20px}.product-price{font-size:16px;font-weight:600;color:#000;margin-bottom:4px;margin-top:10px}.product-original-price{font-size:12px;color:#6c757d;text-decoration:line-through;margin-left:8px}.product-name{font-size:14px;color:#6c757d;line-height:1.3}.row{row-gap:15px}.header-text{font-size:1rem;font-weight:700}.modal-content{height:100%;border:none;border-radius:0!important}.schedule-header{border-radius:18px 18px 0 0}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9}.video-call-container{margin:0!important}.call-details{padding:3%!important}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:20px;height:20px;border:2px solid #ccc;border-radius:4px;outline:none;cursor:pointer;position:relative;background-color:#fff;transition:all .3s ease}input[type=checkbox]:checked{background-color:#007bff;border-color:#007bff}input[type=checkbox]:checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:14px;font-weight:700}input[type=checkbox]:hover{border-color:#007bff;box-shadow:0 0 5px #007bff4d}.error-border{border:2px solid red!important}@media screen and (max-width:475px){.width-100{width:100%!important}}\n"] }]
|
|
8456
|
+
args: [{ selector: 'simpo-schedule-video-call', standalone: true, imports: [CommonModule, MatIconModule, FormsModule, ColorDirective, ToastModule], providers: [MessageService], template: "<section class=\"main-section\">\r\n <p-toast key=\"Video Call Schedule\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\" class=\"bottom-right\" />\r\n <div class=\"header\">\r\n <div class=\"header-text\">See it Live on Video Call</div>\r\n <mat-icon (click)=\"goBack()\">close</mat-icon>\r\n </div>\r\n <div class=\"content\">\r\n <div class=\"selection-header\">\r\n <h2 class=\"selection-title\">Choose Designs for Live Video Call</h2>\r\n <span class=\"selection-counter\">{{selectedProducts.length}}/{{responseData?.orderItems?.length ?\r\n responseData.orderItems.length : 0}}</span>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"product-card col-md-6 col-12\" *ngFor=\"let data of orderedItems; let i = index\">\r\n <img [src]=\"data?.imgUrl\" alt=\"product_img\">\r\n <input type=\"checkbox\" [checked]=\"data.selected\" (click)=\"selectedItems(data)\">\r\n <div class=\"product-price\">\u20B9{{data?.discountedPrice ? data?.discountedPrice : 'N/A'}}</div>\r\n <div class=\"product-name\">{{data?.itemName ? data?.itemName : 'N/A'}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"footer\">\r\n <button (click)=\"openScheduleCall(dialogBox)\">Schedule video call</button>\r\n </div>\r\n <ng-template #dialogBox>\r\n <div class=\"modal-content\">\r\n <div class=\"schedule-header w-100 d-flex align-items-center justify-content-end p-2\">\r\n <mat-icon (click)=\"closeDialog()\"\r\n class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n </div>\r\n <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n <div class=\"modal-body h-100 p-0\">\r\n <div class=\"row h-100 w-100 mt-3 video-call-container\">\r\n <div class=\"col-6\" *ngIf=\"!isMobile\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/897651c1751980487170Vdo Call.gif\" alt=\"\"\r\n class=\"w-100\">\r\n </div>\r\n <div class=\"col-6 position-relative h-100 call-details width-100\">\r\n <!-- Name Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\r\n <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\r\n (input)=\"onInputChange('username')\">\r\n </div>\r\n\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\r\n <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\r\n (input)=\"onInputChange('email')\">\r\n </div>\r\n\r\n <!-- Mobile Number Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\r\n <div class=\"sub-text-call\">IN +91</div>\r\n <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\r\n (input)=\"onInputChange('mobileNumber')\" (keydown.arrowUp)=\"$event.preventDefault()\"\r\n (keydown.arrowDown)=\"$event.preventDefault()\" (wheel)=\"$event.preventDefault()\">\r\n </div>\r\n\r\n\r\n <!-- Pincode Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\r\n <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\r\n <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n </div>\r\n <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\r\n (input)=\"onInputChange('pincode')\">\r\n </div>\r\n <div class=\"language my-3\">\r\n <div class=\"mini-text mb-2\">Language Preference</div>\r\n <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\r\n <ng-container *ngFor=\"let lang of languages\">\r\n <div class=\"lang px-2 py-1 rounded cursor-pointer\"\r\n [style.background]=\"lang == selectedLang ? responseData.data?.styles?.background?.accentColor : ''\"\r\n (click)=\"selectedLang = lang\" [simpoColor]=\"responseData.data?.styles?.background?.accentColor\">\r\n {{lang}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"selectedLang == 'Others'\">\r\n <div class=\"input-field my-3\">\r\n <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\r\n </div>\r\n </ng-container>\r\n <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\"\r\n (click)=\"scheduleVideoCall()\" [disabled]=\"isSubmitting\">\r\n <ng-container *ngIf=\"isSubmitting\">\r\n <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\r\n <span class=\"visually-hidden\">Loading...</span>\r\n </div>\r\n SCHEDULING...\r\n </ng-container>\r\n <ng-container *ngIf=\"!isSubmitting && !scheduled\">\r\n <mat-icon>video_call</mat-icon> \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>\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}.main-section{width:30vw;position:relative;height:100%}@media screen and (max-width:475px){.main-section{width:100vw!important}}.header{display:flex;justify-content:space-between;padding:0 15px;height:45px;align-items:center;border-bottom:1px solid #a8aaab}.content{height:calc(100vh - 90px);overflow:scroll;padding:15px}.footer{position:absolute;bottom:0;width:100%;height:45px;align-items:center;display:flex;padding:0 25px}.footer button{background:linear-gradient(90deg,#8c6,#26b324);border:none;font-size:1rem!important;color:#fff;padding-top:7px;padding-bottom:7px;border-radius:5px;font-weight:600}.selection-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.selection-title{font-size:16px;color:#495057;font-weight:400}.selection-counter{font-size:16px;color:#6c757d;font-weight:500}.product-card{position:relative}.product-card img{width:100%;height:29vh}.product-card input{position:absolute;top:10px;right:20px}.product-price{font-size:16px;font-weight:600;color:#000;margin-bottom:4px;margin-top:10px}.product-original-price{font-size:12px;color:#6c757d;text-decoration:line-through;margin-left:8px}.product-name{font-size:14px;color:#6c757d;line-height:1.3}.row{row-gap:15px}.header-text{font-size:1rem;font-weight:700}.modal-content{height:100%;border:none;border-radius:0!important}.schedule-header{border-radius:18px 18px 0 0}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9}.video-call-container{margin:0!important}.call-details{padding:3%!important}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:20px;height:20px;border:2px solid #ccc;border-radius:4px;outline:none;cursor:pointer;position:relative;background-color:#fff;transition:all .3s ease}input[type=checkbox]:checked{background-color:#007bff;border-color:#007bff}input[type=checkbox]:checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:14px;font-weight:700}input[type=checkbox]:hover{border-color:#007bff;box-shadow:0 0 5px #007bff4d}.error-border{border:2px solid red!important}@media screen and (max-width:475px){.width-100{width:100%!important}}\n"] }]
|
|
8450
8457
|
}], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: i1$1.MatDialog }, { type: i6$1.MessageService }, { type: RestService }, { type: undefined, decorators: [{
|
|
8451
8458
|
type: Inject,
|
|
8452
8459
|
args: [MAT_DIALOG_DATA]
|
|
@@ -8756,11 +8763,20 @@ class CartComponent extends BaseSection {
|
|
|
8756
8763
|
};
|
|
8757
8764
|
this.schemeList = [];
|
|
8758
8765
|
this.couponDialogRef = null;
|
|
8766
|
+
this.redemptionType = "COUPONS";
|
|
8767
|
+
this.redemptionCouponType = "REWARDS";
|
|
8768
|
+
this.couponValueType = '';
|
|
8759
8769
|
this.showReedemError = false;
|
|
8760
8770
|
this.vaildAmount = 0;
|
|
8771
|
+
this.referEarnExist = false;
|
|
8772
|
+
this.isPointsRedeeming = false;
|
|
8773
|
+
this.totalSavingAmt = 0;
|
|
8774
|
+
this.totalSavingPoints = 0;
|
|
8775
|
+
this.pointsConverted = 0;
|
|
8761
8776
|
this.pincode = localStorage.getItem('pincode');
|
|
8762
8777
|
}
|
|
8763
8778
|
ngOnInit() {
|
|
8779
|
+
this.checkAppInstalled();
|
|
8764
8780
|
this.subIndustryName = localStorage.getItem('subIndustryName') ?? "";
|
|
8765
8781
|
if (this.subIndustryName != null) {
|
|
8766
8782
|
this.isJewellery = this.subIndustryName == 'Ecommerce Jewellery' ? true : false;
|
|
@@ -9142,26 +9158,50 @@ class CartComponent extends BaseSection {
|
|
|
9142
9158
|
this.messageService.add({ severity: 'info', summary: 'Please wait', detail: 'We are processing your payment', life: 2000 });
|
|
9143
9159
|
await this.restService.addItemToDB(this.cartInfo).toPromise().then((response) => {
|
|
9144
9160
|
localStorage.setItem("cartId", response.data?.cartId);
|
|
9161
|
+
this.cartId = response.data?.cartId;
|
|
9145
9162
|
this.cartInfo["cartId"] = response.data?.cartId;
|
|
9146
9163
|
});
|
|
9147
9164
|
}
|
|
9165
|
+
if (this?.isPointsRedeeming === true) {
|
|
9166
|
+
if ((this?.redemptionPoints?.pointsConvertedRupees === this.responseData?.totalAmount) || (this?.redemptionPoints?.pointsConvertedRupees > this.responseData?.totalAmount)) {
|
|
9167
|
+
this.paymentWithCompletePoints();
|
|
9168
|
+
return;
|
|
9169
|
+
}
|
|
9170
|
+
}
|
|
9148
9171
|
this.cartInfo["addressDetails"] = address;
|
|
9149
9172
|
const updateAddress = await this.restService.addItemToDB(this.cartInfo).toPromise();
|
|
9150
9173
|
const payload = {
|
|
9151
|
-
"userId": userDetail
|
|
9174
|
+
"userId": userDetail?.userId,
|
|
9152
9175
|
"cartId": localStorage.getItem('cartId'),
|
|
9153
|
-
"orderAmount":
|
|
9176
|
+
// "orderAmount": this.isPointsRedeeming
|
|
9177
|
+
// ? Number(((this.responseData?.totalAmount ?? 0) - (this?.totalSavingAmt || 0)).toFixed(2))
|
|
9178
|
+
// : this.selectedVoucherAmount ? Number(((this.responseData?.totalAmount ?? 0) - (this?.selectedVoucherAmount || 0)).toFixed(2)) : Number((this.responseData?.totalAmount ?? 0).toFixed(2)),
|
|
9179
|
+
"orderAmount": this.isPointsRedeeming
|
|
9180
|
+
? Number(((this.responseData?.totalAmount ?? 0) - (this?.totalSavingAmt || 0)).toFixed(2))
|
|
9181
|
+
: this.couponValueType === 'AMOUNT'
|
|
9182
|
+
? Number(((this.responseData?.totalAmount ?? 0) - (this?.selectedVoucherAmount || 0)).toFixed(2))
|
|
9183
|
+
: this.couponValueType === 'PERCENTAGE'
|
|
9184
|
+
? Number(((this.responseData?.totalAmount ?? 0) - (this?.percentageReduced || 0)).toFixed(2))
|
|
9185
|
+
: Number((this.responseData?.totalAmount ?? 0).toFixed(2)),
|
|
9154
9186
|
"isPaymentGatewayEnabled": isPaymentGatewayEnabled,
|
|
9155
9187
|
"contactDetails": {
|
|
9156
|
-
"name": address
|
|
9157
|
-
"mobile": address
|
|
9188
|
+
"name": address?.receiverName,
|
|
9189
|
+
"mobile": address?.receiverPhone,
|
|
9158
9190
|
"countryCode": "91",
|
|
9159
|
-
"email": address
|
|
9191
|
+
"email": address?.receiverEmail
|
|
9160
9192
|
},
|
|
9161
9193
|
"paymentMerchantId": merchantId,
|
|
9162
|
-
"isJewellery": this
|
|
9163
|
-
"referralId": result?.referralUniqueId
|
|
9194
|
+
"isJewellery": this?.isJewellery,
|
|
9195
|
+
"referralId": result?.referralUniqueId,
|
|
9196
|
+
"rewardUsed": this?.isPointsRedeeming ? "REWARD_POINTS" : this?.appliedVoucher ? "VOUCHER" : null,
|
|
9197
|
+
"pointsUsed": this?.isPointsRedeeming ? this.usedPoints : 0,
|
|
9198
|
+
"pointsConvertedINR": this?.isPointsRedeeming ? this.totalSavingAmt : 0,
|
|
9199
|
+
"voucherValue": this.selectedVoucherAmount ? this.selectedVoucherAmount : this.percentageReduced ? this.percentageReduced : 0,
|
|
9200
|
+
"voucherId": this?.appliedVoucher ? this.selectedVoucherId : null,
|
|
9201
|
+
"voucherCode": this?.appliedVoucher ? this.selectedVoucherCode : ''
|
|
9164
9202
|
};
|
|
9203
|
+
// console.log(payload)
|
|
9204
|
+
// return
|
|
9165
9205
|
this.restService.createPaymentToken(payload).subscribe((paymentDetails) => {
|
|
9166
9206
|
if (isPaymentGatewayEnabled)
|
|
9167
9207
|
this._eventService.cashFreeEvent.emit(paymentDetails);
|
|
@@ -9182,11 +9222,11 @@ class CartComponent extends BaseSection {
|
|
|
9182
9222
|
});
|
|
9183
9223
|
}
|
|
9184
9224
|
}, (error) => {
|
|
9185
|
-
if (error
|
|
9225
|
+
if (error?.error?.code == 409) {
|
|
9186
9226
|
Swal.fire({
|
|
9187
9227
|
icon: "info",
|
|
9188
|
-
html: "<p>" + error
|
|
9189
|
-
showCancelButton: error
|
|
9228
|
+
html: "<p>" + error?.error?.message.replace(/ *\([^)]*\) */g, "") + "</p>",
|
|
9229
|
+
showCancelButton: error?.error?.code == 409,
|
|
9190
9230
|
confirmButtonText: "Remove item & Place Order",
|
|
9191
9231
|
cancelButtonText: "Reduce quantity",
|
|
9192
9232
|
cancelButtonColor: "#928c8c",
|
|
@@ -9272,6 +9312,88 @@ class CartComponent extends BaseSection {
|
|
|
9272
9312
|
// }
|
|
9273
9313
|
});
|
|
9274
9314
|
}
|
|
9315
|
+
addRedemptionCoupon(container) {
|
|
9316
|
+
let businessId = localStorage.getItem("bId") ?? localStorage.getItem("businessId");
|
|
9317
|
+
const userDetails = this.storageService.getUser();
|
|
9318
|
+
let userId = userDetails?.userId;
|
|
9319
|
+
let orderValue = this.responseData?.billdetails?.totalNetValue;
|
|
9320
|
+
// let businessId = '1f12df16-8154-6cea-85c5-fb616c47aaf4';
|
|
9321
|
+
// let userId = '29d2b424-680c-46bd-b18f-b86b346eb1cf';
|
|
9322
|
+
// let orderValue = this.responseData?.billdetails?.totalNetValue;
|
|
9323
|
+
this.restService.getRedeemPoints(businessId, userId, 'PRODUCT_PURCHASE', orderValue, false).subscribe({
|
|
9324
|
+
next: (res) => {
|
|
9325
|
+
console.log(res);
|
|
9326
|
+
this.listRedemptionCoupons = res;
|
|
9327
|
+
},
|
|
9328
|
+
error: (err) => {
|
|
9329
|
+
this.messageService.add({ severity: 'error', summary: 'Coupons Failed', detail: 'Failed to load Coupons' });
|
|
9330
|
+
}
|
|
9331
|
+
});
|
|
9332
|
+
this.restService.applicableDiscountList(this.cartInfo.cartId).subscribe((response) => {
|
|
9333
|
+
this.couponList = response.data?.filter((coupon) => coupon.active)?.map((coupon) => {
|
|
9334
|
+
return {
|
|
9335
|
+
discountType: coupon.discount,
|
|
9336
|
+
discountName: coupon.couponTitle,
|
|
9337
|
+
discountDescription: coupon.couponDescription,
|
|
9338
|
+
couponCode: coupon.couponCode,
|
|
9339
|
+
couponId: coupon.couponId,
|
|
9340
|
+
applicable: coupon.applicable,
|
|
9341
|
+
status: coupon.active,
|
|
9342
|
+
validTo: coupon.expires,
|
|
9343
|
+
validFrom: coupon.validFrom
|
|
9344
|
+
};
|
|
9345
|
+
});
|
|
9346
|
+
});
|
|
9347
|
+
this.couponDialogRef = this.matDialog.open(container, { panelClass: 'sidepanel-class' });
|
|
9348
|
+
}
|
|
9349
|
+
applyRedemptionCoupon(voucher) {
|
|
9350
|
+
if (this.isPointsRedeeming) {
|
|
9351
|
+
this.messageService.add({ severity: 'info', summary: 'Coupon not applicable', detail: 'You can not add a coupon when points are being redeemed' });
|
|
9352
|
+
return;
|
|
9353
|
+
}
|
|
9354
|
+
if (this.appliedVoucher) {
|
|
9355
|
+
this.removeRedemptionCoupon();
|
|
9356
|
+
}
|
|
9357
|
+
this.appliedVoucher = voucher;
|
|
9358
|
+
this.selectedVoucherId = voucher.couponId;
|
|
9359
|
+
this.selectedVoucherCode = voucher.voucherCode;
|
|
9360
|
+
this.selectedVoucherPercentage = voucher.couponValue;
|
|
9361
|
+
let total = Number(this.responseData?.totalAmount) || 0;
|
|
9362
|
+
let percentage = Number(this.selectedVoucherPercentage) || 0;
|
|
9363
|
+
let amt = total * (percentage / 100);
|
|
9364
|
+
if (voucher.couponValueType === 'PERCENTAGE') {
|
|
9365
|
+
this.couponValueType = "PERCENTAGE";
|
|
9366
|
+
if (amt > voucher.maxRedeemableAmount) {
|
|
9367
|
+
this.percentageReduced = voucher.maxRedeemableAmount;
|
|
9368
|
+
}
|
|
9369
|
+
else {
|
|
9370
|
+
this.percentageReduced = amt;
|
|
9371
|
+
}
|
|
9372
|
+
}
|
|
9373
|
+
else {
|
|
9374
|
+
this.couponValueType = "AMOUNT";
|
|
9375
|
+
this.selectedVoucherAmount = voucher.couponValue;
|
|
9376
|
+
}
|
|
9377
|
+
this.closeDialogRef();
|
|
9378
|
+
Swal.fire({
|
|
9379
|
+
icon: "success",
|
|
9380
|
+
title: `You saved ${this.selectedVoucherAmount ? '₹' : ''} ${this.selectedVoucherAmount ? this.selectedVoucherAmount : this.selectedVoucherPercentage} ${this.selectedVoucherAmount ? '' : '%'} on this payment`,
|
|
9381
|
+
text: `Coupon code ${this.selectedVoucherCode} has been applied successfully`,
|
|
9382
|
+
confirmButtonText: "YAY!",
|
|
9383
|
+
confirmButtonColor: "#111",
|
|
9384
|
+
}).then((res) => {
|
|
9385
|
+
if (res.isConfirmed || res.isDismissed) {
|
|
9386
|
+
// popup closed
|
|
9387
|
+
}
|
|
9388
|
+
});
|
|
9389
|
+
}
|
|
9390
|
+
removeRedemptionCoupon(event) {
|
|
9391
|
+
event?.stopPropagation();
|
|
9392
|
+
this.appliedVoucher = null;
|
|
9393
|
+
this.selectedVoucherId = null;
|
|
9394
|
+
this.selectedVoucherCode = null;
|
|
9395
|
+
this.selectedVoucherAmount = null;
|
|
9396
|
+
}
|
|
9275
9397
|
searchIfApplicable() { }
|
|
9276
9398
|
closeDialogRef() {
|
|
9277
9399
|
this.couponDialogRef?.close();
|
|
@@ -9455,8 +9577,91 @@ class CartComponent extends BaseSection {
|
|
|
9455
9577
|
this.addToCart(item, item.quantity);
|
|
9456
9578
|
}
|
|
9457
9579
|
}
|
|
9580
|
+
checkAppInstalled() {
|
|
9581
|
+
let businessId = localStorage.getItem("bId") ?? localStorage.getItem("businessId");
|
|
9582
|
+
this.restService.checkAppInstalled(businessId, 'Refer and Earn').subscribe({
|
|
9583
|
+
next: (res) => {
|
|
9584
|
+
this.referEarnExist = res.data;
|
|
9585
|
+
this.getRedeemPoints();
|
|
9586
|
+
},
|
|
9587
|
+
error: (err) => {
|
|
9588
|
+
}
|
|
9589
|
+
});
|
|
9590
|
+
}
|
|
9591
|
+
getRedeemPoints() {
|
|
9592
|
+
let businessId = localStorage.getItem("bId") ?? localStorage.getItem("businessId");
|
|
9593
|
+
const userDetails = this.storageService.getUser();
|
|
9594
|
+
let userId = userDetails?.userId;
|
|
9595
|
+
let orderValue = this.responseData?.billdetails?.totalNetValue;
|
|
9596
|
+
// let businessId = '1f12df16-8154-6cea-85c5-fb616c47aaf4'
|
|
9597
|
+
// let userId = '29d2b424-680c-46bd-b18f-b86b346eb1cf'
|
|
9598
|
+
// let orderValue = this.responseData?.billdetails?.totalNetValue
|
|
9599
|
+
this.restService.getRedeemPoints(businessId, userId, 'PRODUCT_PURCHASE', orderValue, true).subscribe({
|
|
9600
|
+
next: (res) => {
|
|
9601
|
+
this.redemptionPoints = res;
|
|
9602
|
+
this.pointsConverted = res.availablePoints / res.pointsConvertedRupees;
|
|
9603
|
+
this.totalSavingAmt = this.getRemainingRupees;
|
|
9604
|
+
this.totalSavingPoints = this.getRemainingPoints;
|
|
9605
|
+
this.usedPoints = this.getRemainingRupees * this.pointsConverted;
|
|
9606
|
+
},
|
|
9607
|
+
error: (err) => {
|
|
9608
|
+
}
|
|
9609
|
+
});
|
|
9610
|
+
}
|
|
9611
|
+
onPointsRedeemingChange(event) {
|
|
9612
|
+
if (this.appliedVoucher) {
|
|
9613
|
+
event.preventDefault();
|
|
9614
|
+
this.messageService.add({
|
|
9615
|
+
severity: 'info',
|
|
9616
|
+
summary: 'Points Redeem',
|
|
9617
|
+
detail: 'You can not redeem points when a coupon is applied. Please remove the coupon to redeem points'
|
|
9618
|
+
});
|
|
9619
|
+
}
|
|
9620
|
+
else {
|
|
9621
|
+
this.isPointsRedeeming = !this.isPointsRedeeming;
|
|
9622
|
+
}
|
|
9623
|
+
}
|
|
9624
|
+
// For repemption
|
|
9625
|
+
get getRemainingPoints() {
|
|
9626
|
+
return this?.responseData?.totalAmount > this?.redemptionPoints.pointsConvertedRupees ? 0 : (this?.redemptionPoints.availablePoints - this?.responseData?.totalAmount * this.pointsConverted);
|
|
9627
|
+
}
|
|
9628
|
+
get getRemainingRupees() {
|
|
9629
|
+
return this?.responseData?.totalAmount > this?.redemptionPoints?.pointsConvertedRupees ? this?.redemptionPoints?.pointsConvertedRupees : this?.responseData?.totalAmount;
|
|
9630
|
+
}
|
|
9631
|
+
paymentWithCompletePoints() {
|
|
9632
|
+
let cartId = localStorage.getItem('cartId');
|
|
9633
|
+
let payload = {
|
|
9634
|
+
rewardUsed: this?.isPointsRedeeming ? "REWARD_POINTS" : this?.appliedVoucher ? "VOUCHER" : null,
|
|
9635
|
+
pointsUsed: this?.isPointsRedeeming ? this.usedPoints : 0,
|
|
9636
|
+
pointsConvertedINR: this?.isPointsRedeeming ? this.totalSavingAmt : 0,
|
|
9637
|
+
voucherValue: this.selectedVoucherAmount ? this.selectedVoucherAmount : this.percentageReduced ? this.percentageReduced : 0,
|
|
9638
|
+
voucherId: this?.appliedVoucher ? this.selectedVoucherId : null,
|
|
9639
|
+
voucherCode: this?.appliedVoucher ? this.selectedVoucherCode : '',
|
|
9640
|
+
};
|
|
9641
|
+
this.restService.paymentWithCompletePoints(cartId, payload).subscribe({
|
|
9642
|
+
next: (res) => {
|
|
9643
|
+
localStorage.removeItem("orderId");
|
|
9644
|
+
localStorage.removeItem("cartId");
|
|
9645
|
+
localStorage.removeItem("paymentFor");
|
|
9646
|
+
this.storageService.clearUserCart();
|
|
9647
|
+
Swal.fire({
|
|
9648
|
+
icon: "success",
|
|
9649
|
+
title: "Hurray",
|
|
9650
|
+
text: "Order placed successfully",
|
|
9651
|
+
confirmButtonText: "See Details"
|
|
9652
|
+
}).then((response) => {
|
|
9653
|
+
if (response.isConfirmed) {
|
|
9654
|
+
this.router.navigate(['/profile']);
|
|
9655
|
+
}
|
|
9656
|
+
});
|
|
9657
|
+
},
|
|
9658
|
+
error: (err) => {
|
|
9659
|
+
this.messageService.add({ severity: 'error', summary: 'Order Failed', detail: 'Failed to place order' });
|
|
9660
|
+
}
|
|
9661
|
+
});
|
|
9662
|
+
}
|
|
9458
9663
|
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 }); }
|
|
9459
|
-
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 #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'\" (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=\"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'\">\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 </ng-container>\r\n </div>\r\n <button class=\"place-order-btn\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\r\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n *ngIf=\"cartType === 'SHOPPING'\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\r\n Shopping'}}</button>\r\n <button class=\"place-order-btn mt-0\" (click)=\"edit ? '' : proceedToCheckout()\" simpoButtonDirective\r\n *ngIf=\"cartType === 'SHOPPING'\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout\r\n Cart'}}</button>\r\n <button class=\"place-order-btn mt-0\" simpoButtonDirective *ngIf=\"cartType === 'TRIAL'\"\r\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\" (click)=\"bookAppointment()\">BOOK\r\n APPOINTMENT</button>\r\n\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #CHECKOUTPAGE>\r\n <div class=\"checkout-left-panel\">\r\n <div class=\"checkout-main-content\">\r\n <!-- <div class=\"delivery-options\">\r\n <div class=\"delivery-option active\">\r\n <div class=\"delivery-icon\"></div>\r\n HOME DELIVERY\r\n </div>\r\n <div class=\"delivery-option\">\r\n <div class=\"delivery-icon\"></div>\r\n STORE PICK-UP\r\n </div>\r\n </div> -->\r\n\r\n <div class=\"section-title\">Shipping Address</div>\r\n\r\n <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\r\n <div class=\"address-info\">\r\n <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\r\n <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\r\n {{defaultAddress?.stateName}}</div>\r\n <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"addLinks h-100\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\r\n <mat-icon>add</mat-icon>\r\n </div>\r\n\r\n <button class=\"change-address-btn\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">CHANGE OR ADD ADDRESS</button>\r\n\r\n <button class=\"btn w-100 mt-1 payment-btn\" (click)=\"proceedToPayment()\" simpoButtonDirective\r\n *ngIf=\"defaultAddress\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\">\r\n Place Order\r\n </button>\r\n\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>\u20B9{{(responseData?.totalAmount ?? 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}.my-close-btn{position:absolute!important;top:10px!important;right:10px!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: 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:
|
|
9664
|
+
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).toFixed(2)}}</span> pts\r\n </span>\r\n <div class=\"total_value fs-12 text-secondary\">\r\n = max \u20B9{{(this?.redemptionPoints?.pointsConvertedRupees || 0).toFixed(2)}} discount\r\n </div>\r\n </div>\r\n <div class=\"wallte_icon\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/777779c1775200561187wallet_(1).png\" alt=\"\">\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center mt-3\" *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 <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 </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 ? '' : proceedToCheckout()\" simpoButtonDirective\r\n *ngIf=\"cartType === 'SHOPPING'\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout\r\n Cart'}}</button>\r\n <button class=\"place-order-btn mt-0\" simpoButtonDirective *ngIf=\"cartType === 'TRIAL'\"\r\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\" (click)=\"bookAppointment()\">BOOK\r\n APPOINTMENT</button>\r\n\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #CHECKOUTPAGE>\r\n <div class=\"checkout-left-panel\">\r\n <div class=\"checkout-main-content\">\r\n <!-- <div class=\"delivery-options\">\r\n <div class=\"delivery-option active\">\r\n <div class=\"delivery-icon\"></div>\r\n HOME DELIVERY\r\n </div>\r\n <div class=\"delivery-option\">\r\n <div class=\"delivery-icon\"></div>\r\n STORE PICK-UP\r\n </div>\r\n </div> -->\r\n\r\n <div class=\"section-title\">Shipping Address</div>\r\n\r\n <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\r\n <div class=\"address-info\">\r\n <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\r\n <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\r\n {{defaultAddress?.stateName}}</div>\r\n <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"addLinks h-100\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\r\n <mat-icon>add</mat-icon>\r\n </div>\r\n\r\n <button class=\"change-address-btn\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">CHANGE OR ADD ADDRESS</button>\r\n\r\n <button class=\"btn w-100 mt-1 payment-btn\" (click)=\"proceedToPayment()\" simpoButtonDirective\r\n *ngIf=\"defaultAddress\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\">\r\n Place Order\r\n </button>\r\n\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 && !appliedVoucher\">\u20B9{{(responseData?.totalAmount ?? 0) | number:\r\n '1.0-2'}}</span>\r\n <span *ngIf=\"isPointsRedeeming\">\u20B9{{(responseData?.totalAmount - (totalSavingAmt || 0)) | number:\r\n '1.0-2'}}</span>\r\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount - (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;width:100%!important}.main-content{background:#fff;border-radius:12px;width:70%}.promo-banner{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;border-radius:8px;border:1px solid #e2e8f0}.promo-text h3{font-size:16px!important;font-weight:500;margin-bottom:4px}.promo-text p{font-size:.9rem!important;margin-bottom:0!important;color:#64748b}.see-live-btn{background:#fff;border:1px solid #e2e8f0;font-weight:600;color:#000;padding:8px 16px;border-radius:8px;font-size:12px!important;cursor:pointer;display:flex;align-items:center;gap:8px;width:max-content!important;transition:all .2s ease;box-shadow:0 1px 2px #0000000d}.see-live-btn:hover{background:#f8fafc;border-color:#cbd5e1;transform:translateY(-1px)}.see-live-btn svg{color:#6366f1}.cart-item{display:flex;gap:16px;position:relative}.cart-item:last-child{border-bottom:none}.item-image{width:15%;height:100px;border-radius:8px;object-fit:cover;display:flex;align-items:center;justify-content:center}.item-details{flex:1}.item-title{font-weight:500;margin-bottom:8px}.item-price{display:flex;align-items:center;gap:8px}.current-price{font-size:1rem;font-weight:600}.original-price{font-size:1rem;text-decoration:line-through}.discount{background:#fef3c7;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:500}.item-code{font-size:12px;color:#9ca3af;margin-bottom:8px}.item-options{display:flex;gap:16px;font-size:14px;color:#6b7280;margin-bottom:12px}.delivery-info{font-size:12px;color:#8b5cf6}.pickup-info{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:5px 15px;margin-top:12px;display:flex;align-items:center;cursor:pointer;width:max-content;gap:20px}.pickup-text{font-size:.9rem;color:#374151}.remove-btn{position:absolute;top:16px;right:0;width:20px!important;height:20px;background:#000;color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px!important}.sidebar{display:flex;flex-direction:column;gap:16px;width:32%}.coupon-section{border-radius:8px;padding:10px 15px;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .2s ease}.coupon-section:hover{border-color:#cbd5e1;background-color:#f8fafc}.chevron-icon{color:#94a3b8;transition:transform .2s ease}.coupon-section:hover .chevron-icon{transform:translate(2px);color:#64748b}.scheme-section{border-radius:12px;padding:10px 15px;cursor:pointer}.coupon-left{display:flex;align-items:center;gap:12px}.coupon-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center}.coupon-icon mat-icon{font-size:17px;width:17px!important;height:19px!important}.coupon-text{font-weight:700;font-size:.9rem}.delivery-section{background:#fff;border-radius:12px;padding:10px 15px;box-shadow:#b2b2ca80 2px 2px 6px;background:#f6f3f9}.delivery-header{display:flex;align-items:center;gap:12px;margin-bottom:4px}.delivery-header span{font-size:.9rem;font-weight:700}.delivery-header mat-icon{width:20px;height:20px;font-size:17px;position:relative;top:2px}.delivery-icon{width:20px;height:20px;background:#8b5cf6;border-radius:50%}.pincode{font-weight:600;color:#111827}.change-link{color:#ec4899;font-size:.9rem;text-decoration:none;margin-left:auto}.summary-section{background:#fff;border-radius:8px;padding:20px;border:1px solid #e2e8f0}.summary-title{font-size:16px;font-weight:700;color:#0f172a;margin-bottom:20px;letter-spacing:-.01em}.summary-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.summary-row:last-child{margin-bottom:0}.summary-label{font-size:14px;font-weight:400;color:#64748b}.summary-value{font-size:14px;font-weight:500;color:#0f172a}.summary-divider{height:1px;background:#f1f5f9;margin:16px 0;width:100%}.total-row .summary-label{font-size:16px;font-weight:600;color:#0f172a}.total-row .summary-value{font-size:16px;font-weight:700;color:#0f172a}.total-row{border-top:1px solid #e2e8f0;padding-top:15px;margin-top:15px}.total-label{font-weight:600;font-size:16px}.total-value{font-weight:700;font-size:18px}.place-order-btn{background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;border:none;border-radius:12px;padding:9px 10px;font-size:.9rem!important;font-weight:600;cursor:pointer;margin-top:10px;text-transform:uppercase}.place-order-btn:hover{opacity:.9}.chain-icon,.earring-icon{width:60px;height:60px;filter:sepia(1) hue-rotate(30deg) saturate(2)}.item-img{width:100%;height:100%;object-fit:cover}.mt-0{margin-top:0!important}select{outline:none;border-radius:5px;padding:2px;width:20%;border:none;box-shadow:#9999994d 2px 2px 6px;cursor:pointer}.cart-tab-parent{display:flex;justify-content:center}.cart-tabs{gap:10px;display:flex;justify-content:center;align-items:center;width:max-content;border-radius:8px;border:1px solid #e2e8f0}.cart-tabs div{padding:7px 10px;cursor:pointer;font-size:14px}.selected-cart-tab{margin:6px;background:#f1f5f9;border-radius:5px;color:#000!important;font-weight:500}.checkout-main-content{width:50%;padding:30px;border-radius:12px}@media screen and (max-width: 475px){.main-content{padding:0;height:auto!important}.cart-item{flex-direction:column!important;align-items:flex-start!important;padding:16px 12px!important;gap:16px!important}.item-left{width:100%!important;gap:16px!important;align-items:flex-start!important}.item-image{width:86px!important;height:86px!important;flex-shrink:0!important}.item-right{width:100%!important;justify-content:space-between!important;padding:0!important;gap:12px!important;margin-top:4px!important}.item-price{flex:1!important;text-align:right!important;margin-right:8px!important;font-size:16px!important}.item-title{font-size:14px!important;-webkit-line-clamp:2!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important}.quantity-control{height:34px!important}.qty-btn{width:34px!important}.qty-value{width:28px!important;font-size:13px!important}.no-items{height:86vh;overflow:hidden;margin:0}.checkout-main-content{width:100%}.container{padding:0!important}.pickup-info{display:none}.container{display:flex;flex-direction:column}.promo-banner{gap:10px}select{width:50%}.main-content,.sidebar{width:100%}}.group_invest{color:#000;font-size:.8rem}.reedem_error{color:red}.group_invest span{color:#05aacf}.redeem_amount{padding:2%;border-radius:4px;background:#fff;margin-top:2%;color:#000;font-size:.8rem}.redeem_amount span{color:#0dc577}.w-fit{width:fit-content!important}.modal-body{padding-bottom:0;overflow-y:scroll;max-height:300px;padding:0!important}.scheme-option{margin-bottom:16px}.scheme-option input[type=radio]:checked+.scheme-card{border-color:#06b6d4;background:#f0f9ff;position:relative}.scheme-option input[type=radio]:checked+.scheme-card:before{content:\"\";position:absolute;top:20px;left:20px;width:20px;height:20px;border:2px solid #06b6d4;border-radius:50%;background:#fff}.scheme-option input[type=radio]:checked+.scheme-card:after{content:\"\";position:absolute;top:26px;left:26px;width:8px;height:8px;background:#06b6d4;border-radius:50%}.scheme-card{justify-content:space-between;padding:10px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff;width:100%}.scheme-card:hover{border-color:#d1d5db;background:#f9fafb}.form-check-radio{width:10%}.scheme-title{font-size:12px;font-weight:600;color:#111827;margin-bottom:8px}.scheme-details{display:flex;gap:25px;margin-bottom:20px}.scheme-name{display:flex;justify-content:space-between}.scheme-details span{font-size:12px;color:#0000004d}.scheme-monthly{font-size:14px;font-weight:600;color:#111827;min-width:100px;text-align:right}.right-side{width:90%}.scheme-amount{font-weight:700}@media screen and (min-width: 700px){.cart-items{max-height:500px;overflow:scroll}}.add-to-cart-parent{width:max-content;border:1px solid #000000;border-radius:8px}.cursor{cursor:pointer}.cart-text{max-width:600px;margin:0 auto;text-align:center}.cart-text div{word-break:break-word;overflow-wrap:break-word;white-space:normal}.switch{position:relative;display:inline-block;width:45px;height:20px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:34px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:3px;bottom:2px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#4caf50}input:checked+.slider:before{transform:translate(24px)}.vouchers-listing-section{position:relative;width:fit-content;min-width:500px;z-index:100;background:#fff;height:100vh}.vouchers-listing-section .coupon-heading{border-bottom:1px solid #eee}.vouchers-listing-section .coupon-listing{padding:12px 16px;overflow-y:auto;height:calc(97vh - 100px)}.voucher-details{background:#fff;border-radius:12px;padding:14px;box-shadow:0 1px 4px #00000042}.voucher-details .coupon-brief .apply-offer-btn{background:#111;color:#fff;border-radius:10px;padding:6px 16px}.voucher-details .coupon-code-box{border:1.5px dashed #bbb;border-radius:8px;padding:8px 12px;margin-bottom:10px}.voucher-details .coupon-code-box .code-label{font-size:11px;color:#888;margin-bottom:2px}.voucher-details .coupon-code-box .code-row .code-value{font-weight:700;font-size:15px;letter-spacing:1px}.voucher-details .coupon-meta .clock-icon{font-size:14px;height:14px;width:14px;vertical-align:middle}.applied-coupon-card{background:#f0fff8;border-radius:12px;padding:12px 16px}.applied-coupon-card .applied-coupon-left .success-check{color:#22c55e;font-size:22px}.applied-coupon-card .applied-coupon-left .applied-coupon-code{font-weight:700;font-size:14px}.applied-coupon-card .applied-coupon-left .applied-coupon-saving{font-size:13px;color:#097d5f;margin-top:2px}.active-type{background:#111!important;color:#fff!important}.redemption-type{text-align:center;border-radius:10px;padding:6px 16px;background:#d3d3d36b;width:-webkit-fill-available!important}.wallte_icon{background:#000;border-radius:50px;padding:5px 9px 7px}.wallte_icon img{width:18px;height:18px}.fw-600{font-weight:600}.coupon-type{width:fit-content!important;border-radius:26px!important;background:transparent!important;border:1px solid #afafaf;color:#393838;text-align:center;padding:6px 16px}.active-coupon{background:transparent!important;border:2px solid black!important;color:#000!important}.my-close-btn{position:absolute!important;top:10px!important;right:10px!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: 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:
|
|
9460
9665
|
//DIRECTIVE
|
|
9461
9666
|
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"] }] }); }
|
|
9462
9667
|
}
|
|
@@ -9484,7 +9689,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
9484
9689
|
MatIconModule,
|
|
9485
9690
|
ButtonEditorDirective,
|
|
9486
9691
|
ColorDirective
|
|
9487
|
-
], 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 #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'\" (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=\"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'\">\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 </ng-container>\r\n </div>\r\n <button class=\"place-order-btn\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\r\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n *ngIf=\"cartType === 'SHOPPING'\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\r\n Shopping'}}</button>\r\n <button class=\"place-order-btn mt-0\" (click)=\"edit ? '' : proceedToCheckout()\" simpoButtonDirective\r\n *ngIf=\"cartType === 'SHOPPING'\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout\r\n Cart'}}</button>\r\n <button class=\"place-order-btn mt-0\" simpoButtonDirective *ngIf=\"cartType === 'TRIAL'\"\r\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\" (click)=\"bookAppointment()\">BOOK\r\n APPOINTMENT</button>\r\n\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #CHECKOUTPAGE>\r\n <div class=\"checkout-left-panel\">\r\n <div class=\"checkout-main-content\">\r\n <!-- <div class=\"delivery-options\">\r\n <div class=\"delivery-option active\">\r\n <div class=\"delivery-icon\"></div>\r\n HOME DELIVERY\r\n </div>\r\n <div class=\"delivery-option\">\r\n <div class=\"delivery-icon\"></div>\r\n STORE PICK-UP\r\n </div>\r\n </div> -->\r\n\r\n <div class=\"section-title\">Shipping Address</div>\r\n\r\n <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\r\n <div class=\"address-info\">\r\n <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\r\n <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\r\n {{defaultAddress?.stateName}}</div>\r\n <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"addLinks h-100\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\r\n <mat-icon>add</mat-icon>\r\n </div>\r\n\r\n <button class=\"change-address-btn\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">CHANGE OR ADD ADDRESS</button>\r\n\r\n <button class=\"btn w-100 mt-1 payment-btn\" (click)=\"proceedToPayment()\" simpoButtonDirective\r\n *ngIf=\"defaultAddress\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\">\r\n Place Order\r\n </button>\r\n\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>\u20B9{{(responseData?.totalAmount ?? 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}.my-close-btn{position:absolute!important;top:10px!important;right:10px!important}\n"] }]
|
|
9692
|
+
], 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).toFixed(2)}}</span> pts\r\n </span>\r\n <div class=\"total_value fs-12 text-secondary\">\r\n = max \u20B9{{(this?.redemptionPoints?.pointsConvertedRupees || 0).toFixed(2)}} discount\r\n </div>\r\n </div>\r\n <div class=\"wallte_icon\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/777779c1775200561187wallet_(1).png\" alt=\"\">\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center mt-3\" *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 <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 </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 ? '' : proceedToCheckout()\" simpoButtonDirective\r\n *ngIf=\"cartType === 'SHOPPING'\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout\r\n Cart'}}</button>\r\n <button class=\"place-order-btn mt-0\" simpoButtonDirective *ngIf=\"cartType === 'TRIAL'\"\r\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\" (click)=\"bookAppointment()\">BOOK\r\n APPOINTMENT</button>\r\n\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #CHECKOUTPAGE>\r\n <div class=\"checkout-left-panel\">\r\n <div class=\"checkout-main-content\">\r\n <!-- <div class=\"delivery-options\">\r\n <div class=\"delivery-option active\">\r\n <div class=\"delivery-icon\"></div>\r\n HOME DELIVERY\r\n </div>\r\n <div class=\"delivery-option\">\r\n <div class=\"delivery-icon\"></div>\r\n STORE PICK-UP\r\n </div>\r\n </div> -->\r\n\r\n <div class=\"section-title\">Shipping Address</div>\r\n\r\n <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\r\n <div class=\"address-info\">\r\n <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\r\n <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\r\n {{defaultAddress?.stateName}}</div>\r\n <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"addLinks h-100\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\r\n <mat-icon>add</mat-icon>\r\n </div>\r\n\r\n <button class=\"change-address-btn\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">CHANGE OR ADD ADDRESS</button>\r\n\r\n <button class=\"btn w-100 mt-1 payment-btn\" (click)=\"proceedToPayment()\" simpoButtonDirective\r\n *ngIf=\"defaultAddress\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\">\r\n Place Order\r\n </button>\r\n\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 && !appliedVoucher\">\u20B9{{(responseData?.totalAmount ?? 0) | number:\r\n '1.0-2'}}</span>\r\n <span *ngIf=\"isPointsRedeeming\">\u20B9{{(responseData?.totalAmount - (totalSavingAmt || 0)) | number:\r\n '1.0-2'}}</span>\r\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount - (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;width:100%!important}.main-content{background:#fff;border-radius:12px;width:70%}.promo-banner{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;border-radius:8px;border:1px solid #e2e8f0}.promo-text h3{font-size:16px!important;font-weight:500;margin-bottom:4px}.promo-text p{font-size:.9rem!important;margin-bottom:0!important;color:#64748b}.see-live-btn{background:#fff;border:1px solid #e2e8f0;font-weight:600;color:#000;padding:8px 16px;border-radius:8px;font-size:12px!important;cursor:pointer;display:flex;align-items:center;gap:8px;width:max-content!important;transition:all .2s ease;box-shadow:0 1px 2px #0000000d}.see-live-btn:hover{background:#f8fafc;border-color:#cbd5e1;transform:translateY(-1px)}.see-live-btn svg{color:#6366f1}.cart-item{display:flex;gap:16px;position:relative}.cart-item:last-child{border-bottom:none}.item-image{width:15%;height:100px;border-radius:8px;object-fit:cover;display:flex;align-items:center;justify-content:center}.item-details{flex:1}.item-title{font-weight:500;margin-bottom:8px}.item-price{display:flex;align-items:center;gap:8px}.current-price{font-size:1rem;font-weight:600}.original-price{font-size:1rem;text-decoration:line-through}.discount{background:#fef3c7;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:500}.item-code{font-size:12px;color:#9ca3af;margin-bottom:8px}.item-options{display:flex;gap:16px;font-size:14px;color:#6b7280;margin-bottom:12px}.delivery-info{font-size:12px;color:#8b5cf6}.pickup-info{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:5px 15px;margin-top:12px;display:flex;align-items:center;cursor:pointer;width:max-content;gap:20px}.pickup-text{font-size:.9rem;color:#374151}.remove-btn{position:absolute;top:16px;right:0;width:20px!important;height:20px;background:#000;color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px!important}.sidebar{display:flex;flex-direction:column;gap:16px;width:32%}.coupon-section{border-radius:8px;padding:10px 15px;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .2s ease}.coupon-section:hover{border-color:#cbd5e1;background-color:#f8fafc}.chevron-icon{color:#94a3b8;transition:transform .2s ease}.coupon-section:hover .chevron-icon{transform:translate(2px);color:#64748b}.scheme-section{border-radius:12px;padding:10px 15px;cursor:pointer}.coupon-left{display:flex;align-items:center;gap:12px}.coupon-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center}.coupon-icon mat-icon{font-size:17px;width:17px!important;height:19px!important}.coupon-text{font-weight:700;font-size:.9rem}.delivery-section{background:#fff;border-radius:12px;padding:10px 15px;box-shadow:#b2b2ca80 2px 2px 6px;background:#f6f3f9}.delivery-header{display:flex;align-items:center;gap:12px;margin-bottom:4px}.delivery-header span{font-size:.9rem;font-weight:700}.delivery-header mat-icon{width:20px;height:20px;font-size:17px;position:relative;top:2px}.delivery-icon{width:20px;height:20px;background:#8b5cf6;border-radius:50%}.pincode{font-weight:600;color:#111827}.change-link{color:#ec4899;font-size:.9rem;text-decoration:none;margin-left:auto}.summary-section{background:#fff;border-radius:8px;padding:20px;border:1px solid #e2e8f0}.summary-title{font-size:16px;font-weight:700;color:#0f172a;margin-bottom:20px;letter-spacing:-.01em}.summary-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.summary-row:last-child{margin-bottom:0}.summary-label{font-size:14px;font-weight:400;color:#64748b}.summary-value{font-size:14px;font-weight:500;color:#0f172a}.summary-divider{height:1px;background:#f1f5f9;margin:16px 0;width:100%}.total-row .summary-label{font-size:16px;font-weight:600;color:#0f172a}.total-row .summary-value{font-size:16px;font-weight:700;color:#0f172a}.total-row{border-top:1px solid #e2e8f0;padding-top:15px;margin-top:15px}.total-label{font-weight:600;font-size:16px}.total-value{font-weight:700;font-size:18px}.place-order-btn{background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;border:none;border-radius:12px;padding:9px 10px;font-size:.9rem!important;font-weight:600;cursor:pointer;margin-top:10px;text-transform:uppercase}.place-order-btn:hover{opacity:.9}.chain-icon,.earring-icon{width:60px;height:60px;filter:sepia(1) hue-rotate(30deg) saturate(2)}.item-img{width:100%;height:100%;object-fit:cover}.mt-0{margin-top:0!important}select{outline:none;border-radius:5px;padding:2px;width:20%;border:none;box-shadow:#9999994d 2px 2px 6px;cursor:pointer}.cart-tab-parent{display:flex;justify-content:center}.cart-tabs{gap:10px;display:flex;justify-content:center;align-items:center;width:max-content;border-radius:8px;border:1px solid #e2e8f0}.cart-tabs div{padding:7px 10px;cursor:pointer;font-size:14px}.selected-cart-tab{margin:6px;background:#f1f5f9;border-radius:5px;color:#000!important;font-weight:500}.checkout-main-content{width:50%;padding:30px;border-radius:12px}@media screen and (max-width: 475px){.main-content{padding:0;height:auto!important}.cart-item{flex-direction:column!important;align-items:flex-start!important;padding:16px 12px!important;gap:16px!important}.item-left{width:100%!important;gap:16px!important;align-items:flex-start!important}.item-image{width:86px!important;height:86px!important;flex-shrink:0!important}.item-right{width:100%!important;justify-content:space-between!important;padding:0!important;gap:12px!important;margin-top:4px!important}.item-price{flex:1!important;text-align:right!important;margin-right:8px!important;font-size:16px!important}.item-title{font-size:14px!important;-webkit-line-clamp:2!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important}.quantity-control{height:34px!important}.qty-btn{width:34px!important}.qty-value{width:28px!important;font-size:13px!important}.no-items{height:86vh;overflow:hidden;margin:0}.checkout-main-content{width:100%}.container{padding:0!important}.pickup-info{display:none}.container{display:flex;flex-direction:column}.promo-banner{gap:10px}select{width:50%}.main-content,.sidebar{width:100%}}.group_invest{color:#000;font-size:.8rem}.reedem_error{color:red}.group_invest span{color:#05aacf}.redeem_amount{padding:2%;border-radius:4px;background:#fff;margin-top:2%;color:#000;font-size:.8rem}.redeem_amount span{color:#0dc577}.w-fit{width:fit-content!important}.modal-body{padding-bottom:0;overflow-y:scroll;max-height:300px;padding:0!important}.scheme-option{margin-bottom:16px}.scheme-option input[type=radio]:checked+.scheme-card{border-color:#06b6d4;background:#f0f9ff;position:relative}.scheme-option input[type=radio]:checked+.scheme-card:before{content:\"\";position:absolute;top:20px;left:20px;width:20px;height:20px;border:2px solid #06b6d4;border-radius:50%;background:#fff}.scheme-option input[type=radio]:checked+.scheme-card:after{content:\"\";position:absolute;top:26px;left:26px;width:8px;height:8px;background:#06b6d4;border-radius:50%}.scheme-card{justify-content:space-between;padding:10px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff;width:100%}.scheme-card:hover{border-color:#d1d5db;background:#f9fafb}.form-check-radio{width:10%}.scheme-title{font-size:12px;font-weight:600;color:#111827;margin-bottom:8px}.scheme-details{display:flex;gap:25px;margin-bottom:20px}.scheme-name{display:flex;justify-content:space-between}.scheme-details span{font-size:12px;color:#0000004d}.scheme-monthly{font-size:14px;font-weight:600;color:#111827;min-width:100px;text-align:right}.right-side{width:90%}.scheme-amount{font-weight:700}@media screen and (min-width: 700px){.cart-items{max-height:500px;overflow:scroll}}.add-to-cart-parent{width:max-content;border:1px solid #000000;border-radius:8px}.cursor{cursor:pointer}.cart-text{max-width:600px;margin:0 auto;text-align:center}.cart-text div{word-break:break-word;overflow-wrap:break-word;white-space:normal}.switch{position:relative;display:inline-block;width:45px;height:20px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:34px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:3px;bottom:2px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#4caf50}input:checked+.slider:before{transform:translate(24px)}.vouchers-listing-section{position:relative;width:fit-content;min-width:500px;z-index:100;background:#fff;height:100vh}.vouchers-listing-section .coupon-heading{border-bottom:1px solid #eee}.vouchers-listing-section .coupon-listing{padding:12px 16px;overflow-y:auto;height:calc(97vh - 100px)}.voucher-details{background:#fff;border-radius:12px;padding:14px;box-shadow:0 1px 4px #00000042}.voucher-details .coupon-brief .apply-offer-btn{background:#111;color:#fff;border-radius:10px;padding:6px 16px}.voucher-details .coupon-code-box{border:1.5px dashed #bbb;border-radius:8px;padding:8px 12px;margin-bottom:10px}.voucher-details .coupon-code-box .code-label{font-size:11px;color:#888;margin-bottom:2px}.voucher-details .coupon-code-box .code-row .code-value{font-weight:700;font-size:15px;letter-spacing:1px}.voucher-details .coupon-meta .clock-icon{font-size:14px;height:14px;width:14px;vertical-align:middle}.applied-coupon-card{background:#f0fff8;border-radius:12px;padding:12px 16px}.applied-coupon-card .applied-coupon-left .success-check{color:#22c55e;font-size:22px}.applied-coupon-card .applied-coupon-left .applied-coupon-code{font-weight:700;font-size:14px}.applied-coupon-card .applied-coupon-left .applied-coupon-saving{font-size:13px;color:#097d5f;margin-top:2px}.active-type{background:#111!important;color:#fff!important}.redemption-type{text-align:center;border-radius:10px;padding:6px 16px;background:#d3d3d36b;width:-webkit-fill-available!important}.wallte_icon{background:#000;border-radius:50px;padding:5px 9px 7px}.wallte_icon img{width:18px;height:18px}.fw-600{font-weight:600}.coupon-type{width:fit-content!important;border-radius:26px!important;background:transparent!important;border:1px solid #afafaf;color:#393838;text-align:center;padding:6px 16px}.active-coupon{background:transparent!important;border:2px solid black!important;color:#000!important}.my-close-btn{position:absolute!important;top:10px!important;right:10px!important}\n"] }]
|
|
9488
9693
|
}], 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: [{
|
|
9489
9694
|
type: Optional
|
|
9490
9695
|
}, {
|
|
@@ -17816,7 +18021,7 @@ class FeaturedProductsComponent extends BaseSection {
|
|
|
17816
18021
|
this._eventService.buttonRedirection.emit({ data: data });
|
|
17817
18022
|
}
|
|
17818
18023
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeaturedProductsComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$2.Router }, { token: CartService }, { token: StorageServiceService }, { token: i6$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
17819
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FeaturedProductsComponent, isStandalone: true, selector: "simpo-featured-products", inputs: { data: "data", responseData: "responseData", index: "index", isRelatedProduct: "isRelatedProduct", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, outputs: { changeDetailProduct: "changeDetailProduct" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<ng-container>\r\n <section class=\"container-fluid total-container px-0\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\" [simpoBorder]=\"styles?.border\" [id]=\"data?.id\">\r\n <div [simpoBackground]=\"styles?.background\" class=\"d-flex flex-column\" [id]=\"data?.id\">\r\n <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"d-flex flex-column w-100\" [id]=\"data?.id\">\r\n <div class=\"d-flex jc-space align-center content-side\">\r\n <div class=\"input-text content-side w-100\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <ng-container>\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <img *ngIf=\"styles?.dividerImage?.showDivider\" loading=\"lazy\" [src]=\"styles?.dividerImage?.url\" alt=\"\"\r\n class=\"span-img mt-15\">\r\n <ng-container *ngIf=\"!apiLoading\">\r\n <div class=\"d-flex gap-md-4 flex-mob-column\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [id]=\"data?.id\">\r\n <div class=\"w-50\" *ngIf=\"content?.image?.showImage\" [class.w-100]=\"screenWidth <= 475\">\r\n <ng-container>\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" alt=\"\" [simpoImageDirective]=\"styles?.image\"\r\n class=\"section-image w-100\" [simpoCorner]=\"styles?.corners\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"product-parent position-relative\" [class.w-50]=\"content?.image?.showImage\"\r\n [class.w-100]=\"!content?.image?.showImage || screenWidth <= 475\">\r\n <div *ngIf=\"responseData && responseData?.length\" [simpoWrapContainer]=\"styles?.direction\"\r\n class=\"d-flex w-100 scroll\" #container>\r\n <div\r\n *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\r\n class=\"product\" [style.padding.px]=\"styles?.theme != theme.Theme1 ? '3' : ''\"\r\n [style.width.%]=\"styles?.theme != theme.Theme1 && isMobile && isRelatedProduct ? '48' : ''\"\r\n [style.minWidth]=\"applyProductWidth() ? getProductWidth() : ''\"\r\n [style.maxWidth]=\"applyProductWidth() ? getProductWidth() : ''\">\r\n <!-- [style.width.%]=\"styles?.theme != theme.Theme1 && !isMobile ? '16.667' : ''\" -->\r\n <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n <ng-container *ngTemplateOutlet=\"ProductDes; context: {data: product, idx: idx}\"></ng-container>\r\n </ng-container>\r\n <div *ngIf=\"styles?.theme != theme.Theme1\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [index]=\"idx\"\r\n [isScrollable]=\"this.screenWidth > 475 || (this.screenWidth <= 475 && styles?.direction == 'ROW')\"></simpo-small-product-listing>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <ng-container>\r\n <div class=\"d-flex justify-content-end align-items-center w-100 py-3\">\r\n <div class=\"d-flex justify-content-between align-items-center mt-3 w-100 margin-bottom-10\">\r\n <div class=\"d-flex align-items-center gap-3\" *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\r\n <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"responseData?.length\">\r\n <mat-icon class=\"clr-black\">keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"responseData?.length\">\r\n <mat-icon class=\"clr-black\">keyboard_arrow_right</mat-icon>\r\n </div>\r\n </div>\r\n <button class=\"view-all-btn text-center mx-3\" simpoButtonDirective\r\n [id]=\"data?.id+(getBtnId(1) || '')\" [buttonStyle]=\"getBtnStyle(1)\"\r\n [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\" [sectionId]=\"data?.id\" [buttonData]=\"getBtnData(1)\"\r\n [buttonId]=\"getBtnId(1)\" (click)=\"redirectTo(getBtnData(1))\">{{viewAllButton?.content?.label\r\n ??\r\n 'See All'}}</button>\r\n\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\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\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\r\n<ng-template #VarientList let-product=\"data\">\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</ng-template>\r\n\r\n<ng-template #FavouriteTags let-product=\"data\">\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</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</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #AddToCart let-product=\"data\">\r\n <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\" [style.marginTop]=\"true ? '10px' : ''\">\r\n <button simpoButtonDirective [id]=\"data?.id+(getBtnId(0) || '')\" [buttonStyle]=\"getBtnStyle(0)\"\r\n [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\"\r\n [sectionId]=\"data?.id\" [buttonId]=\"getBtnId(0)\"\r\n *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n (click)=\"addItemToCart(product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\r\n <button simpoButtonDirective [id]=\"data?.id+(getBtnId(0) || '')\" [buttonStyle]=\"getBtnStyle(0)\"\r\n [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\"\r\n [sectionId]=\"data?.id\" [buttonId]=\"getBtnId(0)\"\r\n *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && !IsEcommerce\" (click)=\"raiseLead()\">Notify\r\n Me</button>\r\n <div class=\"quantity full-width-quantity\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n </div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductPricing let-product=\"data\">\r\n <div class=\"d-flex justify-content-between align-items-center\" [style.display]=\"true ? 'block!important' : ''\">\r\n <div class=\"price body-large g-10\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\" [ngClass]=\"{\r\n 'text-left': stylesLayout?.align === 'left',\r\n 'text-right': stylesLayout?.align === 'right',\r\n 'text-center': stylesLayout?.align === 'center'\r\n }\">\r\n <div class=\"d-flex gap-2\">\r\n <span [innerHTML]='currency | sanitizeHtml'></span>\r\n <ng-container>{{product.price.sellingPrice |\r\n number:'1.0-0'}}</ng-container>\r\n <span class=\"price\" *ngIf=\"product.price.value - product.price.discountedPrice > 10\"\r\n [class.discount-price]=\"product.price.value - product.price.discountedPrice > 10\">\r\n {{product.price.value}}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductDes let-product=\"data\" let-idx=\"idx\">\r\n <div (click)=\"proceedToProductDesc(product)\" class=\"position-relative box-shadow\"\r\n [style.height.px]=\"isMobile ? (styles?.mobileColumn == 1 ? '480' : styles?.mobileColumn == 2 ? '230' : '110' ) : ''\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <image-loading [hash]=\"product.itemImages?.[product.prviewIdx]?.blurhash\" [index]=\"idx\"\r\n [imageUrl]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" [theme]=\"styles?.theme\"></image-loading>\r\n </div>\r\n <div class=\"mt-15 w-100\">\r\n <ng-container *ngTemplateOutlet=\"VarientList; context: {data: product}\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"ProductPricing; context: {data: product}\"></ng-container>\r\n <div class=\"product-name heading-large trim-text w-100\" [id]=\"data?.id\" (click)=\"proceedToProductDesc(product)\"\r\n [simpoColor]=\"styles?.background?.color\">\r\n {{product.name }}</div>\r\n <ng-container>\r\n <ng-container *ngTemplateOutlet=\"AddToCart; context: {data: product}\"></ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>", styles: ["div[class*=arrow]{background-color:#fff;color:#000;padding:5px;border-radius:50%;position:sticky;height:fit-content;top:50%;display:flex;align-items:center;justify-content:center;z-index:101;cursor:pointer;box-shadow:#63636333 0 2px 8px}div[class*=arrow] .mat-icon{color:#000}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.left-arrow{left:2px}.right-arrow{right:2px}.product-parent{display:flex;flex-wrap:wrap}.view-all-btn{padding:6px;width:15%!important;font-size:13px!important}.product{padding:10px;cursor:pointer;position:relative;display:flex;flex-direction:column}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.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}.varient-list .selected-varient{border:1px solid transparent}.tags{position:absolute;top:8px;left:8px;display:flex;gap:5px}.tags .tag{font-size:12px;background-color:#fff;padding:5px;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.fav-icon{position:absolute;z-index:10;padding:5px;right:8px;top:8px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;padding:5px 10px;border-radius:5px}.product-name{color:#222;font-size:16px!important;line-height:26px;margin-bottom:5px;font-weight:500}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}@media screen and (max-width: 475px){.selling-price{display:none!important}}.discounted-price{margin-top:-3px}.add-product-button{width:20%}.action-btn{display:flex;justify-content:center;margin-top:20px}.action-btn>a{width:fit-content!important;padding:5px 20px;text-decoration:none}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin-left:-40px}.them2-lisiting{min-width:195px;max-width:195px;margin-right:10px}.input-text{width:90%}@media screen and (max-width: 475px){.view-all-btn{width:30%!important}.default-image img{height:250px}.out-of-stock{font-size:12px!important}.input-text{width:100%}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}.jc-space{justify-content:space-between}.align-end{align-items:end}.view-all{font-size:16px;font-weight:600;cursor:pointer}.box-shadow{box-shadow:#0000003d 0 3px 8px;border-radius:10px}.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}.align-center{align-items:center}@media screen and (max-width: 475px){.product-name{font-size:14px}.product-parent{margin-top:unset!important}.scroll::-webkit-scrollbar{display:flex!important;height:3px}.scroll::-webkit-scrollbar-thumb{background:var(--accentColor, #d4d4d4)}}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mb-5{margin-bottom:5px!important}.trim-text{text-align:inherit!important}@media screen and (max-width: 475px){.flex-mob-column{flex-direction:column!important}}.box-shadow{transition:all .3s ease;border-radius:10px;overflow:hidden}.box-shadow:hover{box-shadow:#0000004d 0 8px 16px;transform:translateY(-5px)}.box-shadow:hover .fav-icon{transform:scale(1.2);background-color:#fff}.fav-icon{transition:all .3s ease}image-loading{pointer-events:none;transform:scale(2.2)}.clr-black{color:#000!important}@media screen and (max-width: 475px){.margin-bottom-10{margin-bottom:10px!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.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { 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: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type:
|
|
18024
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FeaturedProductsComponent, isStandalone: true, selector: "simpo-featured-products", inputs: { data: "data", responseData: "responseData", index: "index", isRelatedProduct: "isRelatedProduct", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, outputs: { changeDetailProduct: "changeDetailProduct" }, host: { listeners: { "window: resize": "getScreenSize()" } }, providers: [MessageService], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<ng-container>\r\n <section class=\"container-fluid total-container px-0\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\" [simpoBorder]=\"styles?.border\" [id]=\"data?.id\">\r\n <div [simpoBackground]=\"styles?.background\" class=\"d-flex flex-column\" [id]=\"data?.id\">\r\n <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"d-flex flex-column w-100\" [id]=\"data?.id\">\r\n <div class=\"d-flex jc-space align-center content-side\">\r\n <div class=\"input-text content-side w-100\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <ng-container>\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <img *ngIf=\"styles?.dividerImage?.showDivider\" loading=\"lazy\" [src]=\"styles?.dividerImage?.url\" alt=\"\"\r\n class=\"span-img mt-15\">\r\n <ng-container *ngIf=\"!apiLoading\">\r\n <div class=\"d-flex gap-md-4 flex-mob-column\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [id]=\"data?.id\">\r\n <div class=\"w-50\" *ngIf=\"content?.image?.showImage\" [class.w-100]=\"screenWidth <= 475\">\r\n <ng-container>\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" alt=\"\" [simpoImageDirective]=\"styles?.image\"\r\n class=\"section-image w-100\" [simpoCorner]=\"styles?.corners\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"product-parent position-relative\" [class.w-50]=\"content?.image?.showImage\"\r\n [class.w-100]=\"!content?.image?.showImage || screenWidth <= 475\">\r\n <div *ngIf=\"responseData && responseData?.length\" [simpoWrapContainer]=\"styles?.direction\"\r\n class=\"d-flex w-100 scroll\" #container>\r\n <div\r\n *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\r\n class=\"product\" [style.padding.px]=\"styles?.theme != theme.Theme1 ? '3' : ''\"\r\n [style.width.%]=\"styles?.theme != theme.Theme1 && isMobile && isRelatedProduct ? '48' : ''\"\r\n [style.minWidth]=\"applyProductWidth() ? getProductWidth() : ''\"\r\n [style.maxWidth]=\"applyProductWidth() ? getProductWidth() : ''\">\r\n <!-- [style.width.%]=\"styles?.theme != theme.Theme1 && !isMobile ? '16.667' : ''\" -->\r\n <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n <ng-container *ngTemplateOutlet=\"ProductDes; context: {data: product, idx: idx}\"></ng-container>\r\n </ng-container>\r\n <div *ngIf=\"styles?.theme != theme.Theme1\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [index]=\"idx\"\r\n [isScrollable]=\"this.screenWidth > 475 || (this.screenWidth <= 475 && styles?.direction == 'ROW')\"></simpo-small-product-listing>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <ng-container>\r\n <div class=\"d-flex justify-content-end align-items-center w-100 py-3\">\r\n <div class=\"d-flex justify-content-between align-items-center mt-3 w-100 margin-bottom-10\">\r\n <div class=\"d-flex align-items-center gap-3\" *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\r\n <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"responseData?.length\">\r\n <mat-icon class=\"clr-black\">keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"responseData?.length\">\r\n <mat-icon class=\"clr-black\">keyboard_arrow_right</mat-icon>\r\n </div>\r\n </div>\r\n <button class=\"view-all-btn text-center mx-3\" simpoButtonDirective\r\n [id]=\"data?.id+(getBtnId(1) || '')\" [buttonStyle]=\"getBtnStyle(1)\"\r\n [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\" [sectionId]=\"data?.id\" [buttonData]=\"getBtnData(1)\"\r\n [buttonId]=\"getBtnId(1)\" (click)=\"redirectTo(getBtnData(1))\">{{viewAllButton?.content?.label\r\n ??\r\n 'See All'}}</button>\r\n\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\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\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\r\n<ng-template #VarientList let-product=\"data\">\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</ng-template>\r\n\r\n<ng-template #FavouriteTags let-product=\"data\">\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</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</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #AddToCart let-product=\"data\">\r\n <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\" [style.marginTop]=\"true ? '10px' : ''\">\r\n <button simpoButtonDirective [id]=\"data?.id+(getBtnId(0) || '')\" [buttonStyle]=\"getBtnStyle(0)\"\r\n [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\"\r\n [sectionId]=\"data?.id\" [buttonId]=\"getBtnId(0)\"\r\n *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n (click)=\"addItemToCart(product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\r\n <button simpoButtonDirective [id]=\"data?.id+(getBtnId(0) || '')\" [buttonStyle]=\"getBtnStyle(0)\"\r\n [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\"\r\n [sectionId]=\"data?.id\" [buttonId]=\"getBtnId(0)\"\r\n *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && !IsEcommerce\" (click)=\"raiseLead()\">Notify\r\n Me</button>\r\n <div class=\"quantity full-width-quantity\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n </div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductPricing let-product=\"data\">\r\n <div class=\"d-flex justify-content-between align-items-center\" [style.display]=\"true ? 'block!important' : ''\">\r\n <div class=\"price body-large g-10\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\" [ngClass]=\"{\r\n 'text-left': stylesLayout?.align === 'left',\r\n 'text-right': stylesLayout?.align === 'right',\r\n 'text-center': stylesLayout?.align === 'center'\r\n }\">\r\n <div class=\"d-flex gap-2\">\r\n <span [innerHTML]='currency | sanitizeHtml'></span>\r\n <ng-container>{{product.price.sellingPrice |\r\n number:'1.0-0'}}</ng-container>\r\n <span class=\"price\" *ngIf=\"product.price.value - product.price.discountedPrice > 10\"\r\n [class.discount-price]=\"product.price.value - product.price.discountedPrice > 10\">\r\n {{product.price.value}}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductDes let-product=\"data\" let-idx=\"idx\">\r\n <div (click)=\"proceedToProductDesc(product)\" class=\"position-relative box-shadow\"\r\n [style.height.px]=\"isMobile ? (styles?.mobileColumn == 1 ? '480' : styles?.mobileColumn == 2 ? '230' : '110' ) : ''\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <image-loading [hash]=\"product.itemImages?.[product.prviewIdx]?.blurhash\" [index]=\"idx\"\r\n [imageUrl]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" [theme]=\"styles?.theme\"></image-loading>\r\n </div>\r\n <div class=\"mt-15 w-100\">\r\n <ng-container *ngTemplateOutlet=\"VarientList; context: {data: product}\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"ProductPricing; context: {data: product}\"></ng-container>\r\n <div class=\"product-name heading-large trim-text w-100\" [id]=\"data?.id\" (click)=\"proceedToProductDesc(product)\"\r\n [simpoColor]=\"styles?.background?.color\">\r\n {{product.name }}</div>\r\n <ng-container>\r\n <ng-container *ngTemplateOutlet=\"AddToCart; context: {data: product}\"></ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>", styles: ["div[class*=arrow]{background-color:#fff;color:#000;padding:5px;border-radius:50%;position:sticky;height:fit-content;top:50%;display:flex;align-items:center;justify-content:center;z-index:101;cursor:pointer;box-shadow:#63636333 0 2px 8px}div[class*=arrow] .mat-icon{color:#000}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.left-arrow{left:2px}.right-arrow{right:2px}.product-parent{display:flex;flex-wrap:wrap}.view-all-btn{padding:6px;width:15%!important;font-size:13px!important}.product{padding:10px;cursor:pointer;position:relative;display:flex;flex-direction:column}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.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}.varient-list .selected-varient{border:1px solid transparent}.tags{position:absolute;top:8px;left:8px;display:flex;gap:5px}.tags .tag{font-size:12px;background-color:#fff;padding:5px;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.fav-icon{position:absolute;z-index:10;padding:5px;right:8px;top:8px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;padding:5px 10px;border-radius:5px}.product-name{color:#222;font-size:16px!important;line-height:26px;margin-bottom:5px;font-weight:500}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}@media screen and (max-width: 475px){.selling-price{display:none!important}}.discounted-price{margin-top:-3px}.add-product-button{width:20%}.action-btn{display:flex;justify-content:center;margin-top:20px}.action-btn>a{width:fit-content!important;padding:5px 20px;text-decoration:none}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin-left:-40px}.them2-lisiting{min-width:195px;max-width:195px;margin-right:10px}.input-text{width:90%}@media screen and (max-width: 475px){.view-all-btn{width:30%!important}.default-image img{height:250px}.out-of-stock{font-size:12px!important}.input-text{width:100%}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}.jc-space{justify-content:space-between}.align-end{align-items:end}.view-all{font-size:16px;font-weight:600;cursor:pointer}.box-shadow{box-shadow:#0000003d 0 3px 8px;border-radius:10px}.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}.align-center{align-items:center}@media screen and (max-width: 475px){.product-name{font-size:14px}.product-parent{margin-top:unset!important}.scroll::-webkit-scrollbar{display:flex!important;height:3px}.scroll::-webkit-scrollbar-thumb{background:var(--accentColor, #d4d4d4)}}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mb-5{margin-bottom:5px!important}.trim-text{text-align:inherit!important}@media screen and (max-width: 475px){.flex-mob-column{flex-direction:column!important}}.box-shadow{transition:all .3s ease;border-radius:10px;overflow:hidden}.box-shadow:hover{box-shadow:#0000004d 0 8px 16px;transform:translateY(-5px)}.box-shadow:hover .fav-icon{transform:scale(1.2);background-color:#fff}.fav-icon{transition:all .3s ease}image-loading{pointer-events:none;transform:scale(2.2)}.clr-black{color:#000!important}@media screen and (max-width: 475px){.margin-bottom-10{margin-bottom:10px!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.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { 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: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type:
|
|
17820
18025
|
//directive
|
|
17821
18026
|
SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SimpoWrapComntainer, selector: "[simpoWrapContainer]", inputs: ["simpoWrapContainer"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { 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: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type:
|
|
17822
18027
|
// MatBottomSheetModule,
|
|
@@ -17881,7 +18086,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
17881
18086
|
args: ["container"]
|
|
17882
18087
|
}], getScreenSize: [{
|
|
17883
18088
|
type: HostListener,
|
|
17884
|
-
args: ["window: resize"
|
|
18089
|
+
args: ["window: resize"]
|
|
17885
18090
|
}] } });
|
|
17886
18091
|
|
|
17887
18092
|
class CategoriesWithImageBackgroundColumnsComponent {
|
|
@@ -17924,11 +18129,11 @@ class FeaturedCategoryComponent extends BaseSection {
|
|
|
17924
18129
|
this.isLoading = false;
|
|
17925
18130
|
this.allCategories = [];
|
|
17926
18131
|
}
|
|
17927
|
-
ngOnInit() {
|
|
18132
|
+
async ngOnInit() {
|
|
17928
18133
|
this.content = this.data?.content;
|
|
17929
18134
|
this.styles = this.data?.styles;
|
|
17930
18135
|
// this.getAllCategoriesByCollectionId();
|
|
17931
|
-
this.getAllCategories();
|
|
18136
|
+
await this.getAllCategories();
|
|
17932
18137
|
this._eventService.showLoadingScreen.subscribe((response) => {
|
|
17933
18138
|
this.isLoading = response;
|
|
17934
18139
|
});
|
|
@@ -17951,23 +18156,22 @@ class FeaturedCategoryComponent extends BaseSection {
|
|
|
17951
18156
|
}
|
|
17952
18157
|
getAllCategories() {
|
|
17953
18158
|
let payload = {
|
|
17954
|
-
businessId: localStorage.getItem('businessId') || '
|
|
18159
|
+
businessId: localStorage.getItem('businessId') || '1f121081-dbea-65c6-ad89-1dfe8cdda902',
|
|
17955
18160
|
searchText: '',
|
|
17956
18161
|
pageNo: 0,
|
|
17957
18162
|
pageSize: 1000
|
|
17958
18163
|
};
|
|
17959
18164
|
this.restService.getAllCategoriesByBusinessId(payload).subscribe((response) => {
|
|
17960
18165
|
this.allCategories = response?.data?.data;
|
|
17961
|
-
|
|
18166
|
+
// this.responseData = this.allCategories;
|
|
18167
|
+
if (this.data?.content?.categoriesIds?.length >= 1) {
|
|
17962
18168
|
this.responseData = [];
|
|
17963
|
-
|
|
17964
|
-
this.
|
|
17965
|
-
|
|
17966
|
-
|
|
17967
|
-
|
|
17968
|
-
|
|
17969
|
-
});
|
|
17970
|
-
}
|
|
18169
|
+
this.data?.content?.categoriesIds?.forEach((id) => {
|
|
18170
|
+
const matchedCategory = this.allCategories.find((category) => category.categoryId === id);
|
|
18171
|
+
if (matchedCategory) {
|
|
18172
|
+
this.responseData?.push(matchedCategory);
|
|
18173
|
+
}
|
|
18174
|
+
});
|
|
17971
18175
|
}
|
|
17972
18176
|
});
|
|
17973
18177
|
}
|
|
@@ -18021,7 +18225,7 @@ class FeaturedCategoryComponent extends BaseSection {
|
|
|
18021
18225
|
return this.styles?.layout?.align || '';
|
|
18022
18226
|
}
|
|
18023
18227
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeaturedCategoryComponent, deps: [{ token: PLATFORM_ID }, { token: i2$2.Router }, { token: RestService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18024
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FeaturedCategoryComponent, isStandalone: true, selector: "simpo-featured-category", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "categoryParent", first: true, predicate: ["categoryParent1"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"container-fluid total-container p-0\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\" class=\"border-radius-unset\">\r\n <div [id]=\"data?.id\" #mainContainer [simpoAnimation]=\"styles?.animation\" [simpoBackground]=\"styles?.background\"\r\n [simpoCorner]=\"styles?.corners\" class=\"d-flex w-100\">\r\n <div class=\"d-flex flex-column w-100\" [simpoOverlay]=\"styles?.background\" [simpoCorner]=\"styles?.corners\"\r\n [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoAnimation]=\"styles?.animation\">\r\n <div *ngFor=\"let item of content?.inputText\" class=\"text-container\">\r\n <!-- <div class = \"content-side\"[innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\r\n <ng-container *ngIf=\"edit || item.value\">\r\n <div class=\"pt-3 w-100\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n <!-- </div> -->\r\n </div>\r\n <ng-container *ngIf=\"styles?.componentStyle === 'Style1';else categoryStyle2\">\r\n <div class=\"category-parent\" [ngClass]=\"{'flex-wrap': getDirection == 'COLUMN'}\"\r\n [simpoContainerAlignment]=\"styles?.layout\" [id]=\"data?.id\"\r\n [style.justifyContent]=\"!isMobile ? getJustifyContent() : ''\" #categoryParent1>\r\n <div\r\n *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\r\n (click)=\"redirectToListPage(data)\" class=\"d-flex flex-column align-items-center w-fit-content\"\r\n [ngClass]=\"{ 'w-48 d-flex flex-column align-items-center' : isMobile}\">\r\n <img [style.borderRadius.px]=\"(styles?.border?.radius ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\" loading=\"lazy\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n class=\"category-image\" [ngClass]=\"{'category-new-image' : isMobile && getDirection == 'COLUMN'}\">\r\n <div *ngIf=\"content?.display?.showHeading\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\">{{data.categoryName}}</div>\r\n <!-- class=\"category-name body-large\" -->\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #categoryStyle2>\r\n <div class=\"w-100
|
|
18228
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FeaturedCategoryComponent, isStandalone: true, selector: "simpo-featured-category", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "categoryParent", first: true, predicate: ["categoryParent1"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"container-fluid total-container p-0\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\" class=\"border-radius-unset\">\r\n <div [id]=\"data?.id\" #mainContainer [simpoAnimation]=\"styles?.animation\" [simpoBackground]=\"styles?.background\"\r\n [simpoCorner]=\"styles?.corners\" class=\"d-flex w-100\">\r\n <div class=\"d-flex flex-column w-100\" [simpoOverlay]=\"styles?.background\" [simpoCorner]=\"styles?.corners\"\r\n [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoAnimation]=\"styles?.animation\">\r\n <div *ngFor=\"let item of content?.inputText\" class=\"text-container\">\r\n <!-- <div class = \"content-side\"[innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\r\n <ng-container *ngIf=\"edit || item.value\">\r\n <div class=\"pt-3 w-100\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n <!-- </div> -->\r\n </div>\r\n <ng-container *ngIf=\"styles?.componentStyle === 'Style1';else categoryStyle2\">\r\n <div class=\"category-parent\" [ngClass]=\"{'flex-wrap': getDirection == 'COLUMN'}\"\r\n [simpoContainerAlignment]=\"styles?.layout\" [id]=\"data?.id\"\r\n [style.justifyContent]=\"!isMobile ? getJustifyContent() : ''\" #categoryParent1>\r\n <div\r\n *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\r\n (click)=\"redirectToListPage(data)\" class=\"d-flex flex-column align-items-center w-fit-content\"\r\n [ngClass]=\"{ 'w-48 d-flex flex-column align-items-center' : isMobile}\">\r\n <img [style.borderRadius.px]=\"(styles?.border?.radius ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\" loading=\"lazy\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n class=\"category-image\" [ngClass]=\"{'category-new-image' : isMobile && getDirection == 'COLUMN'}\">\r\n <div *ngIf=\"content?.display?.showHeading\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\">{{data.categoryName}}</div>\r\n <!-- class=\"category-name body-large\" -->\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #categoryStyle2>\r\n <div class=\"w-100\">\r\n <simpo-categories-with-image-background-columns [responseData]=\"responseData\" [styles]=\"styles\"\r\n [content]=\"content\"></simpo-categories-with-image-background-columns>\r\n </div>\r\n </ng-template>\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 <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n </section>\r\n</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>", styles: [".mt-15{margin-top:15px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.text-container{min-width:100px}.w-fit-content{width:fit-content!important}.total-container{height:fit-content!important;position:relative;display:block!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.category-parent{padding:25px 0% 2%;display:flex;width:100%;max-width:100%;gap:25px;overflow-x:scroll;font-size:16px!important;cursor:pointer}.hovering-effect:hover{font-size:22px!important;transition:.3s ease-in-out}.category-image{display:flex;flex-wrap:wrap;margin-bottom:15px;transition-duration:.3s;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out}.category-image:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}.border-radius-unset{border-radius:unset!important}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important;padding-top:5px!important;padding-bottom:5px!important}.w-48{width:48%!important}.category-new-image{height:150px!important;width:100%!important}.header{gap:7px}.category-parent{gap:8px;margin-top:15px;padding-left:0!important;padding-right:0!important;padding-top:0!important}.category-parent::-webkit-scrollbar{display:flex!important;height:3px}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\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.SlicePipe, name: "slice" }, { 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: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type:
|
|
18025
18229
|
//directive
|
|
18026
18230
|
AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "component", type: CategoriesWithImageBackgroundColumnsComponent, selector: "simpo-categories-with-image-background-columns", inputs: ["responseData", "styles", "content"] }] }); }
|
|
18027
18231
|
}
|
|
@@ -18041,7 +18245,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
18041
18245
|
OverlayDirective,
|
|
18042
18246
|
SvgDividerComponent,
|
|
18043
18247
|
TextEditorComponent,
|
|
18044
|
-
SpacingAroundDirective, CategoriesWithImageBackgroundColumnsComponent], template: "<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"container-fluid total-container p-0\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\" class=\"border-radius-unset\">\r\n <div [id]=\"data?.id\" #mainContainer [simpoAnimation]=\"styles?.animation\" [simpoBackground]=\"styles?.background\"\r\n [simpoCorner]=\"styles?.corners\" class=\"d-flex w-100\">\r\n <div class=\"d-flex flex-column w-100\" [simpoOverlay]=\"styles?.background\" [simpoCorner]=\"styles?.corners\"\r\n [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoAnimation]=\"styles?.animation\">\r\n <div *ngFor=\"let item of content?.inputText\" class=\"text-container\">\r\n <!-- <div class = \"content-side\"[innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\r\n <ng-container *ngIf=\"edit || item.value\">\r\n <div class=\"pt-3 w-100\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n <!-- </div> -->\r\n </div>\r\n <ng-container *ngIf=\"styles?.componentStyle === 'Style1';else categoryStyle2\">\r\n <div class=\"category-parent\" [ngClass]=\"{'flex-wrap': getDirection == 'COLUMN'}\"\r\n [simpoContainerAlignment]=\"styles?.layout\" [id]=\"data?.id\"\r\n [style.justifyContent]=\"!isMobile ? getJustifyContent() : ''\" #categoryParent1>\r\n <div\r\n *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\r\n (click)=\"redirectToListPage(data)\" class=\"d-flex flex-column align-items-center w-fit-content\"\r\n [ngClass]=\"{ 'w-48 d-flex flex-column align-items-center' : isMobile}\">\r\n <img [style.borderRadius.px]=\"(styles?.border?.radius ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\" loading=\"lazy\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n class=\"category-image\" [ngClass]=\"{'category-new-image' : isMobile && getDirection == 'COLUMN'}\">\r\n <div *ngIf=\"content?.display?.showHeading\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\">{{data.categoryName}}</div>\r\n <!-- class=\"category-name body-large\" -->\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #categoryStyle2>\r\n <div class=\"w-100
|
|
18248
|
+
SpacingAroundDirective, CategoriesWithImageBackgroundColumnsComponent], template: "<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"container-fluid total-container p-0\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\" class=\"border-radius-unset\">\r\n <div [id]=\"data?.id\" #mainContainer [simpoAnimation]=\"styles?.animation\" [simpoBackground]=\"styles?.background\"\r\n [simpoCorner]=\"styles?.corners\" class=\"d-flex w-100\">\r\n <div class=\"d-flex flex-column w-100\" [simpoOverlay]=\"styles?.background\" [simpoCorner]=\"styles?.corners\"\r\n [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoAnimation]=\"styles?.animation\">\r\n <div *ngFor=\"let item of content?.inputText\" class=\"text-container\">\r\n <!-- <div class = \"content-side\"[innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\r\n <ng-container *ngIf=\"edit || item.value\">\r\n <div class=\"pt-3 w-100\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n <!-- </div> -->\r\n </div>\r\n <ng-container *ngIf=\"styles?.componentStyle === 'Style1';else categoryStyle2\">\r\n <div class=\"category-parent\" [ngClass]=\"{'flex-wrap': getDirection == 'COLUMN'}\"\r\n [simpoContainerAlignment]=\"styles?.layout\" [id]=\"data?.id\"\r\n [style.justifyContent]=\"!isMobile ? getJustifyContent() : ''\" #categoryParent1>\r\n <div\r\n *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\r\n (click)=\"redirectToListPage(data)\" class=\"d-flex flex-column align-items-center w-fit-content\"\r\n [ngClass]=\"{ 'w-48 d-flex flex-column align-items-center' : isMobile}\">\r\n <img [style.borderRadius.px]=\"(styles?.border?.radius ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\" loading=\"lazy\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n class=\"category-image\" [ngClass]=\"{'category-new-image' : isMobile && getDirection == 'COLUMN'}\">\r\n <div *ngIf=\"content?.display?.showHeading\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\">{{data.categoryName}}</div>\r\n <!-- class=\"category-name body-large\" -->\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #categoryStyle2>\r\n <div class=\"w-100\">\r\n <simpo-categories-with-image-background-columns [responseData]=\"responseData\" [styles]=\"styles\"\r\n [content]=\"content\"></simpo-categories-with-image-background-columns>\r\n </div>\r\n </ng-template>\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 <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n </section>\r\n</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>", styles: [".mt-15{margin-top:15px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.text-container{min-width:100px}.w-fit-content{width:fit-content!important}.total-container{height:fit-content!important;position:relative;display:block!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.category-parent{padding:25px 0% 2%;display:flex;width:100%;max-width:100%;gap:25px;overflow-x:scroll;font-size:16px!important;cursor:pointer}.hovering-effect:hover{font-size:22px!important;transition:.3s ease-in-out}.category-image{display:flex;flex-wrap:wrap;margin-bottom:15px;transition-duration:.3s;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out}.category-image:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}.border-radius-unset{border-radius:unset!important}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important;padding-top:5px!important;padding-bottom:5px!important}.w-48{width:48%!important}.category-new-image{height:150px!important;width:100%!important}.header{gap:7px}.category-parent{gap:8px;margin-top:15px;padding-left:0!important;padding-right:0!important;padding-top:0!important}.category-parent::-webkit-scrollbar{display:flex!important;height:3px}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"] }]
|
|
18045
18249
|
}], ctorParameters: () => [{ type: Object, decorators: [{
|
|
18046
18250
|
type: Inject,
|
|
18047
18251
|
args: [PLATFORM_ID]
|
|
@@ -20213,7 +20417,7 @@ class ProductListComponent extends BaseSection {
|
|
|
20213
20417
|
return brightness > threshold ? '#000000' : '#ffffff';
|
|
20214
20418
|
}
|
|
20215
20419
|
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 }); }
|
|
20216
|
-
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"] }] }); }
|
|
20420
|
+
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"] }] }); }
|
|
20217
20421
|
}
|
|
20218
20422
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductListComponent, decorators: [{
|
|
20219
20423
|
type: Component,
|
|
@@ -20263,7 +20467,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
20263
20467
|
args: ['listScrollContainer']
|
|
20264
20468
|
}], getScreenSize: [{
|
|
20265
20469
|
type: HostListener,
|
|
20266
|
-
args: ["window:resize"
|
|
20470
|
+
args: ["window:resize"]
|
|
20267
20471
|
}], onWindowScroll: [{
|
|
20268
20472
|
type: HostListener,
|
|
20269
20473
|
args: ['window:scroll', ['$event']]
|
|
@@ -20726,7 +20930,7 @@ class OrderDetailsComponent {
|
|
|
20726
20930
|
}
|
|
20727
20931
|
}
|
|
20728
20932
|
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 }); }
|
|
20729
|
-
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=\"item-card-pad\" [ngClass]=\"{'border-bottom': !last}\">\r\n <div class=\"d-flex gap-3 w-100 align-items-start\">\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 item-thumb\">\r\n\r\n <!-- Details + Price -->\r\n <div class=\"flex-grow-1 min-w-0\">\r\n <div class=\"d-flex align-items-start justify-content-between gap-2\">\r\n <h6 class=\"fw-bold text-dark mb-1 item-name\">{{ item.itemName }}</h6>\r\n <!-- Price always visible alongside name -->\r\n <div class=\"fw-bold text-dark text-nowrap item-price flex-shrink-0\">\r\n <span [innerHTML]=\"currency\"></span>{{ (item.sellingPrice * item.quantity) | number:'1.0-2' }}\r\n </div>\r\n </div>\r\n <p class=\"text-muted small mb-1 item-variant\"\r\n *ngIf=\"item.variantName || item.customizationDetails\">{{\r\n item.variantName || 'Regular' }}</p>\r\n <div class=\"text-muted item-qty\">Qty: {{ item.quantity }}</div>\r\n\r\n <!-- Review Section -->\r\n <div class=\"mt-3 pt-3 border-top\"\r\n *ngIf=\"orderDetailData?.brandOrderDetails?.[0]?.orderStatus == 'DELIVERED'\">\r\n\r\n <div class=\"d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-between mb-2 gap-2\">\r\n <h6 class=\"fw-bold mb-0 text-dark\" style=\"font-size: 14px;\">Leave a Review</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 review-form-box\">\r\n <h6 class=\"fw-semibold text-dark mb-2\" style=\"font-size: 14px;\">Share your experience</h6>\r\n\r\n <div class=\"mb-3\">\r\n <textarea class=\"form-control shadow-none review-textarea w-100\"\r\n [(ngModel)]=\"item.review\" rows=\"3\"\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-3\">\r\n <h6 class=\"fw-medium text-muted mb-2\" style=\"font-size: 13px;\">\r\n Attach Photos <span style=\"font-size: 11px; opacity: 0.7;\">(Optional)</span>\r\n </h6>\r\n <div class=\"d-flex gap-2 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: 60px; height: 60px; object-fit: cover; border-radius: 8px; border: 1px solid #e2e8f0;\">\r\n </div>\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: 22px; width: 22px; height: 22px;\">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 <button\r\n class=\"btn w-100 fw-bold 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 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 </div>\r\n </ng-container>\r\n\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%}@media (min-width: 576px){.w-sm-40{width:40%!important}}.item-card-pad{padding:16px 20px}.item-thumb{width:72px;height:72px;object-fit:cover;border-radius:8px}.item-name{font-size:14px;line-height:1.4}.item-price{font-size:14px}.item-variant,.item-qty{font-size:12px}.min-w-0{min-width:0}.review-form-box{background:#fff;border:1px solid #f0f0f0;border-radius:12px;padding:14px;box-shadow:0 4px 20px #00000008;overflow:hidden}@media (max-width: 575px){.container-fluid{padding-left:12px!important;padding-right:12px!important}.item-card-pad{padding:12px 14px}.item-thumb{width:60px;height:60px}.item-name,.item-price{font-size:13px}::ng-deep .p-rating-icon{font-size:1.35rem!important;padding:2px!important}.row.gx-5{--bs-gutter-x: 1rem !important}h2.fw-semibold{font-size:1.4rem!important}}\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 }] }); }
|
|
20933
|
+
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=\"item-card-pad\" [ngClass]=\"{'border-bottom': !last}\">\r\n <div class=\"d-flex gap-3 w-100 align-items-start\">\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 item-thumb\">\r\n\r\n <!-- Details + Price -->\r\n <div class=\"flex-grow-1 min-w-0\">\r\n <div class=\"d-flex align-items-start justify-content-between gap-2\">\r\n <h6 class=\"fw-bold text-dark mb-1 item-name\">{{ item.itemName }}</h6>\r\n <!-- Price always visible alongside name -->\r\n <div class=\"fw-bold text-dark text-nowrap item-price flex-shrink-0\">\r\n <span [innerHTML]=\"currency\"></span>{{ (item.sellingPrice * item.quantity) | number:'1.0-2' }}\r\n </div>\r\n </div>\r\n <p class=\"text-muted small mb-1 item-variant\"\r\n *ngIf=\"item.variantName || item.customizationDetails\">{{\r\n item.variantName || 'Regular' }}</p>\r\n <div class=\"text-muted item-qty\">Qty: {{ item.quantity }}</div>\r\n\r\n <!-- Review Section -->\r\n <div class=\"mt-3 pt-3 border-top\"\r\n *ngIf=\"orderDetailData?.brandOrderDetails?.[0]?.orderStatus == 'DELIVERED'\">\r\n\r\n <div class=\"d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-between mb-2 gap-2\">\r\n <h6 class=\"fw-bold mb-0 text-dark\" style=\"font-size: 14px;\">Leave a Review</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 review-form-box\">\r\n <h6 class=\"fw-semibold text-dark mb-2\" style=\"font-size: 14px;\">Share your experience</h6>\r\n\r\n <div class=\"mb-3\">\r\n <textarea class=\"form-control shadow-none review-textarea w-100\"\r\n [(ngModel)]=\"item.review\" rows=\"3\"\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-3\">\r\n <h6 class=\"fw-medium text-muted mb-2\" style=\"font-size: 13px;\">\r\n Attach Photos <span style=\"font-size: 11px; opacity: 0.7;\">(Optional)</span>\r\n </h6>\r\n <div class=\"d-flex gap-2 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: 60px; height: 60px; object-fit: cover; border-radius: 8px; border: 1px solid #e2e8f0;\">\r\n </div>\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: 22px; width: 22px; height: 22px;\">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 <button\r\n class=\"btn w-100 fw-bold 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 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 </div>\r\n </ng-container>\r\n\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 text-success\" *ngIf=\"orderDetailData?.rewardUsed === 'REWARD_POINTS'\">\r\n <span style=\"font-size: 13px;\">Reward Amount</span>\r\n <span class=\" fw-medium\" style=\"font-size: 13px;\">\r\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.pointsConvertedINR }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-between align-items-center mb-2 text-success\" *ngIf=\"orderDetailData?.rewardUsed === 'VOUCHER'\">\r\n <span style=\"font-size: 13px;\">Reward Amount</span>\r\n <span class=\" fw-medium\" style=\"font-size: 13px;\">\r\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData.voucherValue }}\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\r\n <div class=\"d-flex justify-content-between align-items-center text-success\" *ngIf=\"orderDetailData?.rewardUsed === 'REWARD_POINTS'\">\r\n <span style=\"font-size: 14px; font-weight: 600;\">Amount Paid</span>\r\n <span class=\"fw-bold\" style=\"font-size: 16px;\">\r\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice === orderDetailData?.pointsConvertedINR ? '0' : (orderDetailData?.billDetails?.finalPrice - orderDetailData?.pointsConvertedINR) }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-between align-items-center text-success\" *ngIf=\"orderDetailData?.rewardUsed === 'VOUCHER'\">\r\n <span style=\"font-size: 14px; font-weight: 600;\">Amount Paid</span>\r\n <span class=\"fw-bold\" style=\"font-size: 16px;\">\r\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice === orderDetailData?.voucherValue ? '0' : (orderDetailData?.billDetails?.finalPrice - orderDetailData?.voucherValue) }}\r\n </span>\r\n </div>\r\n\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%}@media (min-width: 576px){.w-sm-40{width:40%!important}}.item-card-pad{padding:16px 20px}.item-thumb{width:72px;height:72px;object-fit:cover;border-radius:8px}.item-name{font-size:14px;line-height:1.4}.item-price{font-size:14px}.item-variant,.item-qty{font-size:12px}.min-w-0{min-width:0}.review-form-box{background:#fff;border:1px solid #f0f0f0;border-radius:12px;padding:14px;box-shadow:0 4px 20px #00000008;overflow:hidden}@media (max-width: 575px){.container-fluid{padding-left:12px!important;padding-right:12px!important}.item-card-pad{padding:12px 14px}.item-thumb{width:60px;height:60px}.item-name,.item-price{font-size:13px}::ng-deep .p-rating-icon{font-size:1.35rem!important;padding:2px!important}.row.gx-5{--bs-gutter-x: 1rem !important}h2.fw-semibold{font-size:1.4rem!important}}\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 }] }); }
|
|
20730
20934
|
}
|
|
20731
20935
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OrderDetailsComponent, decorators: [{
|
|
20732
20936
|
type: Component,
|
|
@@ -20740,7 +20944,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
20740
20944
|
FormsModule,
|
|
20741
20945
|
BackgroundDirective,
|
|
20742
20946
|
MatTooltipModule
|
|
20743
|
-
], 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=\"item-card-pad\" [ngClass]=\"{'border-bottom': !last}\">\r\n <div class=\"d-flex gap-3 w-100 align-items-start\">\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 item-thumb\">\r\n\r\n <!-- Details + Price -->\r\n <div class=\"flex-grow-1 min-w-0\">\r\n <div class=\"d-flex align-items-start justify-content-between gap-2\">\r\n <h6 class=\"fw-bold text-dark mb-1 item-name\">{{ item.itemName }}</h6>\r\n <!-- Price always visible alongside name -->\r\n <div class=\"fw-bold text-dark text-nowrap item-price flex-shrink-0\">\r\n <span [innerHTML]=\"currency\"></span>{{ (item.sellingPrice * item.quantity) | number:'1.0-2' }}\r\n </div>\r\n </div>\r\n <p class=\"text-muted small mb-1 item-variant\"\r\n *ngIf=\"item.variantName || item.customizationDetails\">{{\r\n item.variantName || 'Regular' }}</p>\r\n <div class=\"text-muted item-qty\">Qty: {{ item.quantity }}</div>\r\n\r\n <!-- Review Section -->\r\n <div class=\"mt-3 pt-3 border-top\"\r\n *ngIf=\"orderDetailData?.brandOrderDetails?.[0]?.orderStatus == 'DELIVERED'\">\r\n\r\n <div class=\"d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-between mb-2 gap-2\">\r\n <h6 class=\"fw-bold mb-0 text-dark\" style=\"font-size: 14px;\">Leave a Review</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 review-form-box\">\r\n <h6 class=\"fw-semibold text-dark mb-2\" style=\"font-size: 14px;\">Share your experience</h6>\r\n\r\n <div class=\"mb-3\">\r\n <textarea class=\"form-control shadow-none review-textarea w-100\"\r\n [(ngModel)]=\"item.review\" rows=\"3\"\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-3\">\r\n <h6 class=\"fw-medium text-muted mb-2\" style=\"font-size: 13px;\">\r\n Attach Photos <span style=\"font-size: 11px; opacity: 0.7;\">(Optional)</span>\r\n </h6>\r\n <div class=\"d-flex gap-2 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: 60px; height: 60px; object-fit: cover; border-radius: 8px; border: 1px solid #e2e8f0;\">\r\n </div>\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: 22px; width: 22px; height: 22px;\">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 <button\r\n class=\"btn w-100 fw-bold 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 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 </div>\r\n </ng-container>\r\n\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%}@media (min-width: 576px){.w-sm-40{width:40%!important}}.item-card-pad{padding:16px 20px}.item-thumb{width:72px;height:72px;object-fit:cover;border-radius:8px}.item-name{font-size:14px;line-height:1.4}.item-price{font-size:14px}.item-variant,.item-qty{font-size:12px}.min-w-0{min-width:0}.review-form-box{background:#fff;border:1px solid #f0f0f0;border-radius:12px;padding:14px;box-shadow:0 4px 20px #00000008;overflow:hidden}@media (max-width: 575px){.container-fluid{padding-left:12px!important;padding-right:12px!important}.item-card-pad{padding:12px 14px}.item-thumb{width:60px;height:60px}.item-name,.item-price{font-size:13px}::ng-deep .p-rating-icon{font-size:1.35rem!important;padding:2px!important}.row.gx-5{--bs-gutter-x: 1rem !important}h2.fw-semibold{font-size:1.4rem!important}}\n"] }]
|
|
20947
|
+
], 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=\"item-card-pad\" [ngClass]=\"{'border-bottom': !last}\">\r\n <div class=\"d-flex gap-3 w-100 align-items-start\">\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 item-thumb\">\r\n\r\n <!-- Details + Price -->\r\n <div class=\"flex-grow-1 min-w-0\">\r\n <div class=\"d-flex align-items-start justify-content-between gap-2\">\r\n <h6 class=\"fw-bold text-dark mb-1 item-name\">{{ item.itemName }}</h6>\r\n <!-- Price always visible alongside name -->\r\n <div class=\"fw-bold text-dark text-nowrap item-price flex-shrink-0\">\r\n <span [innerHTML]=\"currency\"></span>{{ (item.sellingPrice * item.quantity) | number:'1.0-2' }}\r\n </div>\r\n </div>\r\n <p class=\"text-muted small mb-1 item-variant\"\r\n *ngIf=\"item.variantName || item.customizationDetails\">{{\r\n item.variantName || 'Regular' }}</p>\r\n <div class=\"text-muted item-qty\">Qty: {{ item.quantity }}</div>\r\n\r\n <!-- Review Section -->\r\n <div class=\"mt-3 pt-3 border-top\"\r\n *ngIf=\"orderDetailData?.brandOrderDetails?.[0]?.orderStatus == 'DELIVERED'\">\r\n\r\n <div class=\"d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-between mb-2 gap-2\">\r\n <h6 class=\"fw-bold mb-0 text-dark\" style=\"font-size: 14px;\">Leave a Review</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 review-form-box\">\r\n <h6 class=\"fw-semibold text-dark mb-2\" style=\"font-size: 14px;\">Share your experience</h6>\r\n\r\n <div class=\"mb-3\">\r\n <textarea class=\"form-control shadow-none review-textarea w-100\"\r\n [(ngModel)]=\"item.review\" rows=\"3\"\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-3\">\r\n <h6 class=\"fw-medium text-muted mb-2\" style=\"font-size: 13px;\">\r\n Attach Photos <span style=\"font-size: 11px; opacity: 0.7;\">(Optional)</span>\r\n </h6>\r\n <div class=\"d-flex gap-2 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: 60px; height: 60px; object-fit: cover; border-radius: 8px; border: 1px solid #e2e8f0;\">\r\n </div>\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: 22px; width: 22px; height: 22px;\">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 <button\r\n class=\"btn w-100 fw-bold 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 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 </div>\r\n </ng-container>\r\n\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 text-success\" *ngIf=\"orderDetailData?.rewardUsed === 'REWARD_POINTS'\">\r\n <span style=\"font-size: 13px;\">Reward Amount</span>\r\n <span class=\" fw-medium\" style=\"font-size: 13px;\">\r\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.pointsConvertedINR }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-between align-items-center mb-2 text-success\" *ngIf=\"orderDetailData?.rewardUsed === 'VOUCHER'\">\r\n <span style=\"font-size: 13px;\">Reward Amount</span>\r\n <span class=\" fw-medium\" style=\"font-size: 13px;\">\r\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData.voucherValue }}\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\r\n <div class=\"d-flex justify-content-between align-items-center text-success\" *ngIf=\"orderDetailData?.rewardUsed === 'REWARD_POINTS'\">\r\n <span style=\"font-size: 14px; font-weight: 600;\">Amount Paid</span>\r\n <span class=\"fw-bold\" style=\"font-size: 16px;\">\r\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice === orderDetailData?.pointsConvertedINR ? '0' : (orderDetailData?.billDetails?.finalPrice - orderDetailData?.pointsConvertedINR) }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-between align-items-center text-success\" *ngIf=\"orderDetailData?.rewardUsed === 'VOUCHER'\">\r\n <span style=\"font-size: 14px; font-weight: 600;\">Amount Paid</span>\r\n <span class=\"fw-bold\" style=\"font-size: 16px;\">\r\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice === orderDetailData?.voucherValue ? '0' : (orderDetailData?.billDetails?.finalPrice - orderDetailData?.voucherValue) }}\r\n </span>\r\n </div>\r\n\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%}@media (min-width: 576px){.w-sm-40{width:40%!important}}.item-card-pad{padding:16px 20px}.item-thumb{width:72px;height:72px;object-fit:cover;border-radius:8px}.item-name{font-size:14px;line-height:1.4}.item-price{font-size:14px}.item-variant,.item-qty{font-size:12px}.min-w-0{min-width:0}.review-form-box{background:#fff;border:1px solid #f0f0f0;border-radius:12px;padding:14px;box-shadow:0 4px 20px #00000008;overflow:hidden}@media (max-width: 575px){.container-fluid{padding-left:12px!important;padding-right:12px!important}.item-card-pad{padding:12px 14px}.item-thumb{width:60px;height:60px}.item-name,.item-price{font-size:13px}::ng-deep .p-rating-icon{font-size:1.35rem!important;padding:2px!important}.row.gx-5{--bs-gutter-x: 1rem !important}h2.fw-semibold{font-size:1.4rem!important}}\n"] }]
|
|
20744
20948
|
}], ctorParameters: () => [{ type: EventsService }, { type: StorageServiceService }, { type: RestService }, { type: i6$1.MessageService }, { type: ImageUplaodService }], propDecorators: { responseData: [{
|
|
20745
20949
|
type: Input
|
|
20746
20950
|
}], data: [{
|
|
@@ -21271,6 +21475,12 @@ class UserProfileComponent extends BaseSection {
|
|
|
21271
21475
|
`/my-referrals?businessId=${localStorage.getItem("bId") ?? localStorage.getItem("businessId")}&referrerId=${this.userDetails?.userId}`;
|
|
21272
21476
|
this.getMyReferralsUrl = this.sanitizer.bypassSecurityTrustResourceUrl(referralsUrl);
|
|
21273
21477
|
}
|
|
21478
|
+
getTotalAmtPaid(order) {
|
|
21479
|
+
return order.billDetails.discountAmount ?
|
|
21480
|
+
(order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +
|
|
21481
|
+
order?.billDetails?.totalTaxAfterDiscount) :
|
|
21482
|
+
order.billDetails.totalGrossValue;
|
|
21483
|
+
}
|
|
21274
21484
|
checkPassbookApp() {
|
|
21275
21485
|
this.restService.PassbookAppStatus(localStorage.getItem("bId")).subscribe((response) => {
|
|
21276
21486
|
if (response?.data) {
|
|
@@ -21662,6 +21872,7 @@ class UserProfileComponent extends BaseSection {
|
|
|
21662
21872
|
sessionStorage.clear();
|
|
21663
21873
|
localStorage.removeItem("perId");
|
|
21664
21874
|
localStorage.removeItem('cartId');
|
|
21875
|
+
localStorage.removeItem('utm_u_id');
|
|
21665
21876
|
this.router.navigate(['/']);
|
|
21666
21877
|
}
|
|
21667
21878
|
});
|
|
@@ -21739,7 +21950,7 @@ class UserProfileComponent extends BaseSection {
|
|
|
21739
21950
|
this.getAllSchemes();
|
|
21740
21951
|
}
|
|
21741
21952
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserProfileComponent, deps: [{ token: i2$2.Router }, { token: EventsService }, { token: RestService }, { token: StorageServiceService }, { token: CartService }, { token: i1$1.MatDialog }, { token: i8$3.MatBottomSheet }, { token: i2$3.CookieService }, { token: i6$1.MessageService }, { token: i1$2.DomSanitizer }, { token: i2$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
21742
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [spacingHorizontal]=\"styles?.layout\" [ngStyle]=\"{'max-height': '100vh', 'z-index': isMobile ? '100000000' : ''}\"\r\n [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"p-4 profile-box shadow-lg\"\r\n style=\"width: 25%; border-radius: 20px; height: fit-content; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 1px solid rgba(0,0,0,0.05);\"\r\n [style.order]=\"styles?.swap ? '1' : '0'\">\r\n\r\n <!-- Profile Header Section -->\r\n <div class=\"d-flex align-items-center profile-header\"\r\n style=\"gap: 15px; height: 80px; margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 15px; backdrop-filter: blur(10px);\">\r\n <div class=\"profile-image-wrapper\" style=\"position: relative;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100 profile-icon\"\r\n style=\"border: 3px solid #e3f2fd; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: all 0.3s ease;\">\r\n <div class=\"online-indicator\"\r\n style=\"position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4caf50; border: 2px solid white; border-radius: 50%;\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"profile-details flex-grow-1\">\r\n <h4 class=\"font-weight-bold mb-2\" style=\"color: #2c3e50; font-size: 1.1rem; margin-bottom: 8px;\">\r\n {{getUserDetails?.contact?.name}}</h4>\r\n\r\n <div class=\"contact-info\" style=\"display: flex; flex-direction: column; gap: 6px;\">\r\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n *ngIf=\"getUserDetails?.contact?.mobile?.length\"\r\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">stay_primary_portrait</mat-icon>\r\n <span>{{getUserDetails?.contact?.mobile}}</span>\r\n </h6>\r\n\r\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n *ngIf=\"getUserDetails?.contact?.email?.length\"\r\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">mail_outline</mat-icon>\r\n <span class=\"w-100 text-overflow\">{{getUserDetails?.contact?.email}}</span>\r\n </h6>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Navigation Tabs Section -->\r\n <div class=\"tabs-container\" style=\"margin-bottom: 20px;\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center tab-item\"\r\n style=\"gap: 12px; cursor: pointer; padding: 16px 12px; margin: 2px 0; border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden;\"\r\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '1px solid rgba(0,0,0,0.06)' : ''\"\r\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\"\r\n [style.backgroundColor]=\"tab.status ? styles?.background?.color : 'transparent'\"\r\n [style.borderColor]=\"tab.status ? styles?.background?.accentColor : 'transparent'\">\r\n <div class=\"tab-icon-wrapper\"\r\n style=\"width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\">\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n style=\"height: 20px; width: 20px; object-fit: contain; transition: transform 0.3s ease;\">\r\n </div>\r\n\r\n <div class=\"tab-label font-weight-normal\" style=\"font-size: 0.9rem; transition: all 0.3s ease;\">\r\n {{tab.value}}</div>\r\n\r\n <!-- Hover effect background -->\r\n <div class=\"tab-hover-bg\"\r\n style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,123,255,0.05) 0%, rgba(0,123,255,0.02) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1;\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- Action Buttons Section -->\r\n <div class=\"d-flex action-buttons\"\r\n style=\"gap: 10px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.06);\">\r\n <button class=\"edit-btn flex-grow-1\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\"\r\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; background: transparent; border: 2px solid; transition: all 0.3s ease; position: relative; overflow: hidden;\">\r\n Edit Profile\r\n </button>\r\n\r\n <button class=\"logout-btn flex-grow-1\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\"\r\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; border: none; color: white; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.15);\">\r\n Logout\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"orders-sec shadow-lg\" [style.order]=\"styles?.swap ? '0' : '1'\">\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Details'\">\r\n <ng-container *ngTemplateOutlet=\"SchemeDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Transactions'\">\r\n <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n <simpo-list-home-appointment></simpo-list-home-appointment>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Referrals'\">\r\n <ng-container *ngTemplateOutlet=\"Referrals\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Rewards'\">\r\n <ng-container *ngTemplateOutlet=\"Rewards\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <div class=\"w-100 position-relative mobile-height\" style=\"height: 80vh;\">\r\n <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\"\r\n *ngIf=\"selectedSidePanelTab != 'Scheme_Details'\">\r\n <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\"\r\n (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n </div>\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"''\">\r\n <section class=\"top-sec\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\"\r\n style=\"width: 50px; height: 50px;\">\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\">\r\n <mat-icon>stay_primary_portrait</mat-icon>\r\n <span>{{getUserDetails?.contact?.mobile}}</span>\r\n </h6>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\"\r\n *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon>\r\n <span>{{getUserDetails?.contact?.email}}</span>\r\n </h6>\r\n </div>\r\n </section>\r\n <section class=\"list-sec\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\"\r\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\"\r\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n [style.color]=\"styles?.background?.accentColor\">\r\n <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">\r\n {{tab.value}}</div>\r\n </div>\r\n\r\n </ng-container>\r\n </section>\r\n <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\r\n <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\">Logout</button>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Transactions'\">\r\n <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n <simpo-list-home-appointment></simpo-list-home-appointment>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Referrals'\">\r\n <ng-container *ngTemplateOutlet=\"Referrals\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Rewards'\">\r\n <ng-container *ngTemplateOutlet=\"Rewards\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isEcommerce]=\"true\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n</section>\r\n\r\n<ng-template #Referrals>\r\n <iframe [src]=\"getMyReferralsUrl\" frameborder=\"0\" width=\"100%\" height=\"100%\"></iframe>\r\n</ng-template>\r\n<ng-template #Rewards>\r\n <iframe [src]=\"getRewardsUrl\" frameborder=\"0\" width=\"100%\" height=\"100%\"></iframe>\r\n</ng-template>\r\n<ng-template #OrderSection>\r\n <h3 class=\"onlyDesktop mb-3\">My Orders</h3>\r\n <!-- <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n <ng-container *ngFor=\"let tab of tabs\">\r\n <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">\r\n {{tab.value}}</div>\r\n </ng-container>\r\n </div> -->\r\n <div class=\"order-list\">\r\n <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #showEmptyScreen>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <div class=\"cart-text \">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <div class=\"heading-medium d-flex justify-content-center content-side\"\r\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n <simpo-text-editor [(value)]=\"text.value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\"\r\n (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n <div class=\"d-flex justify-content-between mb-2\">\r\n <h3 class=\"title-text\">My Address</h3>\r\n <button class=\"address-btn\" (click)=\"addNewAddress()\"\r\n [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n <div class=\"address-list\">\r\n <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\r\n <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n <div class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card \" [style.width]=\"getProductWidth\">\r\n <div class=\"card-body p-3\">\r\n <!-- Header Section -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n <div class=\"address-info d-flex align-items-center justify-content-between w-100\">\r\n <h4 class=\"mb-0 fw-semibold\">{{address.receiverName}}</h4>\r\n <div class=\"icon-grp d-flex\">\r\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n (click)=\"editAddress(idx)\">edit</mat-icon>\r\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"address-content mb-3\">\r\n <div class=\"address-line mb-2\">\r\n <span class=\"text-muted small d-block\">Address</span>\r\n <span class=\"address-text\">{{address.addressLine1}}</span>\r\n </div>\r\n <div class=\"phone-info\">\r\n <span class=\"text-muted small d-block\">Phone</span>\r\n <span class=\"phone-number fw-bold\">{{address.receiverPhone}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-template #showEmptyAddress>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\r\n <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery\r\n </div>\r\n <!-- </ng-container> -->\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n <h3 class=\"onlyDesktop\">My Accounts</h3>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n <h3 class=\"onlyDesktop\">Logout</h3>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n <div (click)=\"goToOrderDetails(order)\" class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card\">\r\n <div class=\"card-body p-3\" [style.--background-color]=\"styles?.background?.color\">\r\n <!-- Header Section -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n <div class=\"order-number\">\r\n <h4 class=\"mb-0 fw-semibold\">{{\"Order\" + \" \" + order.orderNum}}</h4>\r\n </div>\r\n <div class=\"arrow-icon\">\r\n <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"ordered-item row mb-2\">\r\n <ng-container *ngFor=\"let item of getOrderedItems(order)\">\r\n <div class=\"item-card col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img [src]=\"item?.imgUrl\" alt=\"Product Image\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"item-img w-50\">\r\n <div class=\"cart-item-name\">{{item?.itemName}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <!-- Middle Section -->\r\n <div class=\"order-details\">\r\n <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-1\">\r\n <span class=\"text-muted small mb-3 mb-sm-0\">\r\n {{order.createdTimeStamp | date: 'dd MMMM yyyy'}}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"amount-section\">\r\n <span class=\"h5 mb-0 text-success fw-bold\">\r\n <span [innerHTML]=\"currency\"></span>\r\n {{(order.billDetails.discountAmount ?\r\n (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +\r\n order?.billDetails?.totalTaxAfterDiscount) :\r\n order.billDetails.totalGrossValue) | number:'1.0-2'}}\r\n </span>\r\n </div>\r\n <div class=\"status-section\">\r\n <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">\r\n {{order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | titlecase}}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #WishlistDetails>\r\n <h3 class=\"onlyDesktop\">My Wishlist</h3>\r\n <div class=\"wishlist-list\" *ngIf=\"wishlistData?.length; else showEmptyWishlistScreen\">\r\n <div class=\"d-flex flex-wrap\" style=\"gap: 10px;\">\r\n <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n <div class=\"address-card mb-2\">\r\n <div class=\"card-body p-4\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-auto\">\r\n <div class=\"product-image-wrapper\">\r\n <img loading=\"lazy\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"product-img rounded\" [src]=\"item.imgUrl\" alt=\"Product Image\">\r\n </div>\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"product-details\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div\r\n class=\"col-auto text-end d-flex justify-content-between align-items-center w-100\">\r\n <h6 class=\"product-name mb-2 fw-semibold text-dark\">\r\n {{item.itemName}}\r\n </h6>\r\n <div class=\"delete-action\" *ngIf=\"!isMobile\">\r\n <button class=\"btn btn-sm delete-btn\" (click)=\"deleteFromWhislist(item)\"\r\n title=\"Remove from wishlist\">\r\n <mat-icon class=\"small-icon\">delete</mat-icon>\r\n </button>\r\n </div>\r\n <div class=\"delete-action mt-2\" *ngIf=\"isMobile\">\r\n <button class=\"btn btn-sm w-100\" (click)=\"deleteFromWhislist(item)\">\r\n <mat-icon class=\"small-icon me-1\">delete</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"product-price mb-3\">\r\n <span class=\"h5 text-success fw-bold mb-0\">\r\n <span [innerHTML]='currency'></span>{{item.discountedPrice}}\r\n </span>\r\n <span class=\"text-muted small ms-2\" *ngIf=\"item.quantity\">\r\n ({{item.quantity}} items)\r\n </span>\r\n </div>\r\n <div class=\"action-buttons d-flex gap-2\">\r\n <div class=\"quantity-controls d-flex align-items-center w-50 justify-content-center\"\r\n *ngIf=\"item.quantity\">\r\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n (click)=\"addToFav(item, 'SUBSTRACT')\">\r\n -\r\n </button>\r\n <span class=\"quantity-display px-3 py-1 bg-light rounded mx-1\">\r\n {{item.quantity}}\r\n </span>\r\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n (click)=\"addToFav(item, 'ADD')\"> +\r\n </button>\r\n </div>\r\n <button class=\"btn btn-sm w-50\" *ngIf=\"!item.quantity\"\r\n (click)=\"addToFav(item, 'ADD')\">\r\n + Add Quantity\r\n </button>\r\n <button class=\"btn btn-sm w-50\" (click)=\"moveToCart(item)\">\r\n Move to Cart\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n <ng-template #showEmptyWishlistScreen>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container>\r\n <div class=\"heading-medium d-flex justify-content-center\">\r\n Your Wishlist is Empty</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #SchemeDetails>\r\n <div class=\"header mb-3 f-18 fw-600\">Current Scheme Enrollments - 4</div>\r\n <div class=\"row gap-2\">\r\n <ng-container *ngFor=\"let scheme of [1,1,1,1]\">\r\n <div class=\"cards d-flex flex-column w-32 mb-2 p-0 \">\r\n <div class=\"card-header row gap-2\">\r\n <div class=\"card-head-left col-7\">\r\n <div class=\"scheme-type fs-15 fw-600\">Group Investment Scheme</div>\r\n <div class=\"scheme-id fw-600\">GIS6K_000231004</div>\r\n </div>\r\n <div class=\"card-head-right col-4 text-center align-content-center\">\r\n <div class=\"scheme-amount fw-600\">\u20B96,000/M</div>\r\n </div>\r\n </div>\r\n <div class=\"card-body d-flex p-0 mb-3\">\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/425719c1752566628577star.png\" alt=\"\"\r\n class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">\u20B913,800</div>\r\n <div class=\"card-sub-text text-center\">Total Acheived</div>\r\n </div>\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/229997c1752567131192brand_7959220.png\"\r\n alt=\"\" class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">\u20B91,000</div>\r\n <div class=\"card-sub-text text-center\">Rewards</div>\r\n </div>\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/760761c1752567279970calendar (1).png\"\r\n alt=\"\" class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">8</div>\r\n <div class=\"card-sub-text text-center\">Due Months</div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer row\">\r\n <div class=\"col-6 d-flex gap-2 p-0\">\r\n <span class=\"footer-text text-nowrap\">Start On :</span><span class=\"date-text text-nowrap\">30\r\n may 2025</span>\r\n </div>\r\n <div class=\"col-6 d-flex gap-2 p-0\">\r\n <span class=\"footer-text text-nowrap\">Maturity On :</span><span class=\"date-text text-nowrap\">25\r\n may 2026</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n<ng-template #SchemePassbook>\r\n <div class=\"w-100 h-100 overflow-scroll passbook_container\">\r\n <div class=\"header d-flex flex-column\">\r\n <div class=\"d-flex align-items-center justify-content-end mb-3\" *ngIf=\"storeListing.length >= 2\"><select\r\n class=\"store-listing\" (change)=\"changeStore($event)\">\r\n <option value=\"\">Select Store</option>\r\n <option [value]=\"store.id\" *ngFor=\"let store of storeListing\">{{store.storeName}}</option>\r\n </select></div>\r\n <div class=\"scheme-overview d-flex flex-column\">\r\n <div class=\"d-flex gap-2\">\r\n <div class=\"available-savings\">\r\n <div class=\"d-flex align-items-center gap-1 w-100 justify-content-between\">\r\n <h3>Available Savings</h3>\r\n <span class=\"amount_logo\">\uD83D\uDCB0</span>\r\n </div>\r\n\r\n <div class=\"amount\">{{totalSavings ? totalSavings :\r\n '0'}}</div>\r\n </div>\r\n <div class=\"active-schemes\">\r\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n <h3>Active Passbooks</h3>\r\n <div class=\"auto-pay-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\r\n </div>\r\n </div>\r\n <div class=\"scheme-count\">{{totalSchemes?.length ?\r\n totalSchemes.length : '0'}}</div>\r\n <div class=\"subtitle\">On Track</div>\r\n </div>\r\n <div class=\"active-schemes\" *ngIf=\"totalAccumulatedGold > 0\">\r\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n <h3>Accumulated Gold </h3>\r\n <div class=\"auto-pay-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/153448c1756808418216accumulated_icon.png\">\r\n </div>\r\n </div>\r\n <div class=\"scheme-count\">{{totalAccumulatedGold}} gms</div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"overAllDues?.length\">\r\n <div class=\"section d-flex-flex-column gap-2\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Due Payments</h2>\r\n </div>\r\n <div class=\"payment-list d-flex flex-column gap-2\">\r\n <ng-container *ngIf=\"overAllDues?.length; else showEmptyPayment\">\r\n <div class=\"payment-item overdue\" *ngFor=\"let payment of overAllDues\">\r\n <div class=\"payment-info\">\r\n <div class=\"payment-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/403142c1753435378127Background.svg\">\r\n <!-- <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\"\r\n *ngIf=\"!payment.overdueStatus && payment.paymentStatus === 'PAID'\"> -->\r\n </div>\r\n <div class=\"payment-details\">\r\n <h4>{{payment.schemeName}} - {{payment.emiMonthCount}}rd EMI</h4>\r\n <span>Date {{payment.dueDate ? (payment.dueDate | date:'dd-MM-yyyy') :\r\n 'N/A'}}\r\n <!-- <span *ngIf=\"payment.overdueStatus\">| Due by: {{payment.daysOverdue\r\n ? payment.daysOverdue : 0}}</span> --></span>\r\n </div>\r\n </div>\r\n <div class=\"payment-amount\">\r\n <div class=\"amount-value\">\u20B9{{payment.dueAmount ? payment.dueAmount :\r\n '0'}}\r\n </div>\r\n <div class=\"payment-status overdue-status cursor-pointer\"\r\n (click)=\"payDue(payment)\">\r\n <ng-container *ngIf=\"!payDueLoader\">Pay Now</ng-container>\r\n <ng-container *ngIf=\"payDueLoader\">Loading...</ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #showEmptyPayment>\r\n <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n <span>No Due Payments</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"section mt-3\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Your Active Passbooks</h2>\r\n </div>\r\n\r\n <div class=\"schemes-grid\">\r\n <ng-container *ngIf=\"totalSchemes && totalSchemes.length > 0; else showActiveScheme\">\r\n <div class=\"scheme-card d-flex flex-column gap-2 cursor-pointer\"\r\n *ngFor=\"let scheme of totalSchemes; let i = index\" (click)=\"viewSchemeDetails(scheme)\">\r\n <div class=\"scheme-header\">\r\n <div>\r\n <div class=\"scheme-title\">{{ scheme?.schemeName || 'N/A' }}</div>\r\n <div class=\"scheme-amount\">\u20B9{{ scheme?.installmentAmount || '0' }}/Monthly</div>\r\n </div>\r\n <div class=\"scheme-date\">\r\n <span>Enrolled: {{ scheme?.createdTimestamp ? (scheme?.createdTimestamp |\r\n date:'dd-MM-yyyy') :\r\n 'N/A' }}</span>\r\n <!-- <span>Maturity: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n 'N/A' }}</span> -->\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-status d-flex justify-content-center align-items-center\"\r\n [ngClass]=\"scheme?.passBookStatus === 'REDEEM_REQUESTED' ? 'redeem_status' : (scheme?.passBookStatus === 'ACTIVE' ? 'active-status' : 'redeem_status')\">\r\n {{\r\n scheme.passBookStatus ? scheme.passBookStatus.replaceAll('_', ' ') : 'N/A'\r\n }}\r\n </div>\r\n\r\n <div class=\"scheme-stats\">\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">{{ scheme?.totalPaidAmount || '0' }}</div>\r\n <div class=\"stat-label\">Deposited Amount</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">\r\n {{\r\n scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n (scheme?.schemePayments?.length -\r\n scheme.dueMonths) : 'N/A'\r\n }}\r\n </div>\r\n <div class=\"stat-label\">Paid Months</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">{{scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n scheme?.dueMonths : 'N/A' }}</div>\r\n <div class=\"stat-label\">Due Months</div>\r\n </div>\r\n <div class=\"stat\" *ngIf=\"scheme?.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"stat-value\">{{ scheme?.totalInvestedMetal || '0' }} gms</div>\r\n <div class=\"stat-label\">Accumulated Gold</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-footer\">\r\n <span>Maturity Date: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n 'N/A' }}</span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #showActiveScheme>\r\n <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n <span>No Active Scheme</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n <!-- <div class=\"auto-pay\">\r\n <div class=\"auto-pay-icon mobile-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/966462c1753439662355Background.png\"></div>\r\n <div class=\"auto-pay-content\">\r\n <div class=\"auto-pay-title\">Manage Auto-pay</div>\r\n <div class=\"auto-pay-desc\">Pause, resume or cancel auto payment subscription</div>\r\n </div>\r\n <button class=\"manage-btn\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/409230c1753439564830SVG.png\"> Manage</button>\r\n </div> -->\r\n </div>\r\n</ng-template>\r\n<ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #Scheme_Details>\r\n <simpo-scheme-details [schemeDetails]=\"schemeDetails\" [data]=\"data\" [metalPrice]=\"metalPrice\"\r\n (gotoSchemeOverview)=\"selectedSidePanelTab = 'Scheme Passbook'\"></simpo-scheme-details>\r\n</ng-template>\r\n<ng-template #Transactions>\r\n <simpo-passbook-transactions></simpo-passbook-transactions>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n</ngx-skeleton-loader>", styles: [".total-container{position:relative;height:auto;overflow:scroll;background:#fff!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;margin-left:20px;padding:15px;overflow-y:auto;overflow-x:hidden;border:1px solid #d3d3d324;border-radius:20px;max-height:70vh}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}.profile-box{box-shadow:#00000029 0 1px 4px}h1{font-weight:600}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.amount_logo{font-size:27px}@media screen and (max-width: 475px){.store-listing{width:35%!important}.total-container{height:100%!important}.amount_logo{font-size:27px}.amount,.scheme-count{font-size:20px!important}.title-text{font-size:24px}.schemes-grid{flex-wrap:wrap;overflow-y:scroll;height:95%}.section{height:auto}.scheme-status{white-space:nowrap}.scheme-card{width:100%}.header{flex-direction:column-reverse}.scheme-overview{width:100%!important}.scheme-overview div{flex-wrap:wrap}.available-savings h3{font-size:17px!important}.quick-actions{width:100%}.active-schemes h3{font-size:17px!important}.auto-pay-icon{width:55px!important;height:50px!important}.mobile-icon{width:30px!important}.manage-btn{width:25%!important}.tab-selected div{font-weight:600!important}.mobile-height{height:100%!important}.passbook_container{height:90%!important;overflow-x:scroll!important}.passbook_container .section{max-height:unset!important;padding:10px!important}.section-header{margin-bottom:2px!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;border:none;padding:10px 5px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.list-sec .tab-selected{border-top-left-radius:10px!important;border-bottom-left-radius:10px;border:none}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:0 10px;width:100vw;margin-bottom:20px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.profile-icon{width:70px}.text-overflow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width:1200px) and (max-width: 1330px){.profile-details{width:75%!important}}@media screen and (min-width:1200px){.manage-btn{width:10%!important}}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}.cards{box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;border-radius:12px}.cards .card-header{padding:8px}.cards .card-header .card-head .scheme-type{font-size:15px}.cards .card-body .col-4 .card-sub-text{font-size:14px}.cards .card-footer{border-top:2px dashed!important;margin:0 5px;padding:10px}.cards .card-footer span{font-size:13px}.cards .card-footer .date-text{font-weight:600}.cards .card-footer div{font-size:15px}.fs-15{font-size:14px}.w-32{width:32.5%!important}.w-40{width:40px!important}.f-18{font-size:18px}.fw-600{font-weight:600}.scheme-id{font-size:13px}.order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}.order-card:hover .arrow-icon mat-icon{transform:translate(3px)}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.cart-item-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa);width:49%}.address-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.address-card .card-body{position:relative;overflow:hidden}.address-text{color:#495057;line-height:1.4}.btn-sm{transition:all .3s ease}.small-icon{font-size:16px!important}.badge.bg-light{color:#495057!important;background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;border:1px solid #dee2e6}@media (max-width: 576px){.address-card .card-body{padding:1rem!important}.address-card{width:100%!important}.btn-sm{display:flex;justify-content:center;align-items:center;color:red!important}.btn-sm mat-icon{font-size:13px}.btn-sm{width:100%;margin-bottom:.25rem}}.profile-box{transition:all .3s ease;position:relative}.profile-box:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001f!important}.profile-icon:hover{transform:scale(1.05);box-shadow:0 6px 20px #00000026!important}.contact-item:hover{color:#007bff!important}.tab-item:hover{background:linear-gradient(90deg,#007bff14,#007bff08)!important;transform:translate(4px)}.tab-item:hover .tab-hover-bg{opacity:1}.tab-item:hover img{transform:scale(1.1)}.tab-selected{border-left:4px solid;font-weight:600!important;border-bottom:unset!important}.tab-selected .tab-label{font-weight:600!important}.edit-btn:hover{background:linear-gradient(135deg,#007bff0d,#007bff1a)!important;transform:translateY(-1px);box-shadow:0 4px 12px #007bff33}.logout-btn:hover{transform:translateY(-1px);box-shadow:0 4px 15px #00000040!important;filter:brightness(1.05)}.tabs-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.tabs-container::-webkit-scrollbar{width:4px}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-box{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.profile-box{width:100%!important}.profile-header{flex-direction:column;height:auto!important;text-align:center}.action-buttons{flex-direction:column}}.scheme-overview{gap:20px;width:100%}.available-savings{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:20px;border-radius:12px;position:relative;flex:1}.available-savings .amount{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.available-savings h3{font-size:14px;color:#856404;margin-bottom:8px;font-weight:500}.subtitle{font-size:12px;color:#666}.active-schemes{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;position:relative;flex:1}.active-schemes h3{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.scheme-count{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e9ecef;max-height:40vh;overflow-x:scroll}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:18px;font-weight:600}.view-all{color:#6c5ce7;font-size:16px}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.overdue{background:#fef2f2;border:1px solid #FECACA}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.upcoming{background:#f8f9fa;color:#666}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.payment-status{font-size:12px;padding:4px 8px;border-radius:4px;color:#fff;white-space:nowrap}.overdue-status{background:#dc3545}.upcoming-status{background:#6c757d}.schemes-grid{display:flex;gap:10px;overflow-x:scroll}.scheme-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e9ecef;position:relative;min-width:34vw}.scheme-header{display:flex;justify-content:space-between;align-items:flex-start}.scheme-title{font-size:16px;font-weight:600;margin-bottom:4px}.scheme-amount{font-size:12px;color:#666}.scheme-date{font-size:12px;color:#666;display:flex;flex-direction:column;gap:10px}.scheme-status{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;text-transform:uppercase;min-width:15%;max-width:fit-content}.redeem_status{background:orange;color:#fff}.active-status{background:#22c55e;color:#fff}.scheme-stats{display:flex;justify-content:space-between}.stat{text-align:center}.stat-value{font-size:20px;font-weight:700;color:#333}.stat-label{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px}.scheme-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.price-notice{background:#fce7f3;color:#be185d;padding:8px 12px;border-radius:6px;font-size:11px}.auto-pay{background:#fff3cd;padding:16px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-top:20px}.auto-pay-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.auto-pay-icon img{width:100%}.auto-pay-content{flex:1}.auto-pay-title{font-size:14px;font-weight:600;margin-bottom:4px}.auto-pay-desc{font-size:12px;color:#666}.manage-btn{background:none;border:1px solid #dee2e6;padding:6px 0;border-radius:4px;font-size:13px!important;cursor:pointer;display:flex;justify-content:space-evenly}.store-listing{font-size:14px;width:20%;height:30px;margin-bottom:13px;border:1px solid #e9ecef;border-radius:5px;outline:none;padding-left:5px;cursor:pointer}\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: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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: 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: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: OrderDetailsComponent, selector: "simpo-order-details", inputs: ["responseData", "data", "index", "edit", "delete", "customClass", "orderDetailData"], outputs: ["goBackEmitter"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i8$4.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "component", type: SchemeDetailsComponent, selector: "simpo-scheme-details", inputs: ["schemeDetails", "data", "metalPrice"], outputs: ["gotoSchemeOverview"] }, { kind: "component", type: ListHomeAppointmentComponent, selector: "simpo-list-home-appointment" }, { kind: "component", type: PassbookTransactionsComponent, selector: "simpo-passbook-transactions" }] }); }
|
|
21953
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [spacingHorizontal]=\"styles?.layout\" [ngStyle]=\"{'max-height': '100vh', 'z-index': isMobile ? '100000000' : ''}\"\r\n [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"p-4 profile-box shadow-lg\"\r\n style=\"width: 25%; border-radius: 20px; height: fit-content; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 1px solid rgba(0,0,0,0.05);\"\r\n [style.order]=\"styles?.swap ? '1' : '0'\">\r\n\r\n <!-- Profile Header Section -->\r\n <div class=\"d-flex align-items-center profile-header\"\r\n style=\"gap: 15px; height: 80px; margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 15px; backdrop-filter: blur(10px);\">\r\n <div class=\"profile-image-wrapper\" style=\"position: relative;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100 profile-icon\"\r\n style=\"border: 3px solid #e3f2fd; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: all 0.3s ease;\">\r\n <div class=\"online-indicator\"\r\n style=\"position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4caf50; border: 2px solid white; border-radius: 50%;\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"profile-details flex-grow-1\">\r\n <h4 class=\"font-weight-bold mb-2\" style=\"color: #2c3e50; font-size: 1.1rem; margin-bottom: 8px;\">\r\n {{getUserDetails?.contact?.name}}</h4>\r\n\r\n <div class=\"contact-info\" style=\"display: flex; flex-direction: column; gap: 6px;\">\r\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n *ngIf=\"getUserDetails?.contact?.mobile?.length\"\r\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">stay_primary_portrait</mat-icon>\r\n <span>{{getUserDetails?.contact?.mobile}}</span>\r\n </h6>\r\n\r\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n *ngIf=\"getUserDetails?.contact?.email?.length\"\r\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">mail_outline</mat-icon>\r\n <span class=\"w-100 text-overflow\">{{getUserDetails?.contact?.email}}</span>\r\n </h6>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Navigation Tabs Section -->\r\n <div class=\"tabs-container\" style=\"margin-bottom: 20px;\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center tab-item\"\r\n style=\"gap: 12px; cursor: pointer; padding: 16px 12px; margin: 2px 0; border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden;\"\r\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '1px solid rgba(0,0,0,0.06)' : ''\"\r\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\"\r\n [style.backgroundColor]=\"tab.status ? styles?.background?.color : 'transparent'\"\r\n [style.borderColor]=\"tab.status ? styles?.background?.accentColor : 'transparent'\">\r\n <div class=\"tab-icon-wrapper\"\r\n style=\"width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\">\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n style=\"height: 20px; width: 20px; object-fit: contain; transition: transform 0.3s ease;\">\r\n </div>\r\n\r\n <div class=\"tab-label font-weight-normal\" style=\"font-size: 0.9rem; transition: all 0.3s ease;\">\r\n {{tab.value}}</div>\r\n\r\n <!-- Hover effect background -->\r\n <div class=\"tab-hover-bg\"\r\n style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,123,255,0.05) 0%, rgba(0,123,255,0.02) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1;\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- Action Buttons Section -->\r\n <div class=\"d-flex action-buttons\"\r\n style=\"gap: 10px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.06);\">\r\n <button class=\"edit-btn flex-grow-1\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\"\r\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; background: transparent; border: 2px solid; transition: all 0.3s ease; position: relative; overflow: hidden;\">\r\n Edit Profile\r\n </button>\r\n\r\n <button class=\"logout-btn flex-grow-1\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\"\r\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; border: none; color: white; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.15);\">\r\n Logout\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"orders-sec shadow-lg\" [style.order]=\"styles?.swap ? '0' : '1'\">\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Details'\">\r\n <ng-container *ngTemplateOutlet=\"SchemeDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Transactions'\">\r\n <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n <simpo-list-home-appointment></simpo-list-home-appointment>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Referrals'\">\r\n <ng-container *ngTemplateOutlet=\"Referrals\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Rewards'\">\r\n <ng-container *ngTemplateOutlet=\"Rewards\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <div class=\"w-100 position-relative mobile-height\" style=\"height: 80vh;\">\r\n <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\"\r\n *ngIf=\"selectedSidePanelTab != 'Scheme_Details'\">\r\n <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\"\r\n (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n </div>\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"''\">\r\n <section class=\"top-sec\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\"\r\n style=\"width: 50px; height: 50px;\">\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\">\r\n <mat-icon>stay_primary_portrait</mat-icon>\r\n <span>{{getUserDetails?.contact?.mobile}}</span>\r\n </h6>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\"\r\n *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon>\r\n <span>{{getUserDetails?.contact?.email}}</span>\r\n </h6>\r\n </div>\r\n </section>\r\n <section class=\"list-sec\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\"\r\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\"\r\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n [style.color]=\"styles?.background?.accentColor\">\r\n <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">\r\n {{tab.value}}</div>\r\n </div>\r\n\r\n </ng-container>\r\n </section>\r\n <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\r\n <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\">Logout</button>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Transactions'\">\r\n <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n <simpo-list-home-appointment></simpo-list-home-appointment>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Referrals'\">\r\n <ng-container *ngTemplateOutlet=\"Referrals\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Rewards'\">\r\n <ng-container *ngTemplateOutlet=\"Rewards\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isEcommerce]=\"true\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n</section>\r\n\r\n<ng-template #Referrals>\r\n <iframe [src]=\"getMyReferralsUrl\" frameborder=\"0\" width=\"100%\" height=\"100%\"></iframe>\r\n</ng-template>\r\n<ng-template #Rewards>\r\n <iframe [src]=\"getRewardsUrl\" frameborder=\"0\" width=\"100%\" height=\"100%\"></iframe>\r\n</ng-template>\r\n<ng-template #OrderSection>\r\n <h3 class=\"onlyDesktop mb-3\">My Orders</h3>\r\n <!-- <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n <ng-container *ngFor=\"let tab of tabs\">\r\n <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">\r\n {{tab.value}}</div>\r\n </ng-container>\r\n </div> -->\r\n <div class=\"order-list\">\r\n <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #showEmptyScreen>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <div class=\"cart-text \">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <div class=\"heading-medium d-flex justify-content-center content-side\"\r\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n <simpo-text-editor [(value)]=\"text.value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\"\r\n (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n <div class=\"d-flex justify-content-between mb-2\">\r\n <h3 class=\"title-text\">My Address</h3>\r\n <button class=\"address-btn\" (click)=\"addNewAddress()\"\r\n [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n <div class=\"address-list\">\r\n <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\r\n <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n <div class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card \" [style.width]=\"getProductWidth\">\r\n <div class=\"card-body p-3\">\r\n <!-- Header Section -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n <div class=\"address-info d-flex align-items-center justify-content-between w-100\">\r\n <h4 class=\"mb-0 fw-semibold\">{{address.receiverName}}</h4>\r\n <div class=\"icon-grp d-flex\">\r\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n (click)=\"editAddress(idx)\">edit</mat-icon>\r\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"address-content mb-3\">\r\n <div class=\"address-line mb-2\">\r\n <span class=\"text-muted small d-block\">Address</span>\r\n <span class=\"address-text\">{{address.addressLine1}}</span>\r\n </div>\r\n <div class=\"phone-info\">\r\n <span class=\"text-muted small d-block\">Phone</span>\r\n <span class=\"phone-number fw-bold\">{{address.receiverPhone}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-template #showEmptyAddress>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\r\n <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery\r\n </div>\r\n <!-- </ng-container> -->\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n <h3 class=\"onlyDesktop\">My Accounts</h3>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n <h3 class=\"onlyDesktop\">Logout</h3>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n <div (click)=\"goToOrderDetails(order)\" class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card\">\r\n <div class=\"card-body p-3\" [style.--background-color]=\"styles?.background?.color\">\r\n <!-- Header Section -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n <div class=\"order-number\">\r\n <h4 class=\"mb-0 fw-semibold\">{{\"Order\" + \" \" + order.orderNum}}</h4>\r\n </div>\r\n <div class=\"arrow-icon\">\r\n <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"ordered-item row mb-2\">\r\n <ng-container *ngFor=\"let item of getOrderedItems(order)\">\r\n <div class=\"item-card col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img [src]=\"item?.imgUrl\" alt=\"Product Image\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"item-img w-50\">\r\n <div class=\"cart-item-name\">{{item?.itemName}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <!-- Middle Section -->\r\n <div class=\"order-details\">\r\n <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-1\">\r\n <span class=\"text-muted small mb-3 mb-sm-0\">\r\n {{order.createdTimeStamp | date: 'dd MMMM yyyy'}}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"amount-section\">\r\n <span class=\"h5 mb-0 text-success fw-bold\">\r\n <span [innerHTML]=\"currency\"></span>\r\n <!-- {{(order.billDetails.discountAmount ?\r\n (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +\r\n order?.billDetails?.totalTaxAfterDiscount) :\r\n order.billDetails.totalGrossValue) | number:'1.0-2'}} -->\r\n {{getTotalAmtPaid(order) | number:'1.0-2'}}\r\n </span>\r\n </div>\r\n <div class=\"status-section\">\r\n <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">\r\n {{order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | titlecase}}\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mt-1\" *ngIf=\"order.rewardUsed === 'REWARD_POINTS'\">\r\n <div class=\"fs-14 text-secondary\">\r\n Amount Paid - \r\n <span class=\"text-success fw-bold\">\u20B9 {{ getTotalAmtPaid(order) === order.pointsConvertedINR ? '0' : (getTotalAmtPaid(order) - order.pointsConvertedINR) }}</span>\r\n </div> \r\n <div class=\"fs-14 text-secondary\">\r\n Rewarded Amount - <span class=\"text-success fw-bold\">\u20B9 {{order.pointsConvertedINR}}</span>\r\n </div> \r\n </div>\r\n\r\n <div class=\"mt-1\" *ngIf=\"order.rewardUsed === 'VOUCHER'\"> \r\n <div class=\"fs-14 text-secondary\">\r\n Amount Paid - \r\n <span class=\"text-success fw-bold\">\u20B9 {{ getTotalAmtPaid(order) === order.voucherValue ? '0' : (getTotalAmtPaid(order) - order.voucherValue) }}</span>\r\n </div> \r\n <div class=\"fs-14 text-secondary\">\r\n Rewarded Amount - <span class=\"text-success fw-bold\">\u20B9 {{order.voucherValue}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #WishlistDetails>\r\n <h3 class=\"onlyDesktop\">My Wishlist</h3>\r\n <div class=\"wishlist-list\" *ngIf=\"wishlistData?.length; else showEmptyWishlistScreen\">\r\n <div class=\"d-flex flex-wrap\" style=\"gap: 10px;\">\r\n <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n <div class=\"address-card mb-2\">\r\n <div class=\"card-body p-4\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-auto\">\r\n <div class=\"product-image-wrapper\">\r\n <img loading=\"lazy\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"product-img rounded\" [src]=\"item.imgUrl\" alt=\"Product Image\">\r\n </div>\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"product-details\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div\r\n class=\"col-auto text-end d-flex justify-content-between align-items-center w-100\">\r\n <h6 class=\"product-name mb-2 fw-semibold text-dark\">\r\n {{item.itemName}}\r\n </h6>\r\n <div class=\"delete-action\" *ngIf=\"!isMobile\">\r\n <button class=\"btn btn-sm delete-btn\" (click)=\"deleteFromWhislist(item)\"\r\n title=\"Remove from wishlist\">\r\n <mat-icon class=\"small-icon\">delete</mat-icon>\r\n </button>\r\n </div>\r\n <div class=\"delete-action mt-2\" *ngIf=\"isMobile\">\r\n <button class=\"btn btn-sm w-100\" (click)=\"deleteFromWhislist(item)\">\r\n <mat-icon class=\"small-icon me-1\">delete</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"product-price mb-3\">\r\n <span class=\"h5 text-success fw-bold mb-0\">\r\n <span [innerHTML]='currency'></span>{{item.discountedPrice}}\r\n </span>\r\n <span class=\"text-muted small ms-2\" *ngIf=\"item.quantity\">\r\n ({{item.quantity}} items)\r\n </span>\r\n </div>\r\n <div class=\"action-buttons d-flex gap-2\">\r\n <div class=\"quantity-controls d-flex align-items-center w-50 justify-content-center\"\r\n *ngIf=\"item.quantity\">\r\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n (click)=\"addToFav(item, 'SUBSTRACT')\">\r\n -\r\n </button>\r\n <span class=\"quantity-display px-3 py-1 bg-light rounded mx-1\">\r\n {{item.quantity}}\r\n </span>\r\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n (click)=\"addToFav(item, 'ADD')\"> +\r\n </button>\r\n </div>\r\n <button class=\"btn btn-sm w-50\" *ngIf=\"!item.quantity\"\r\n (click)=\"addToFav(item, 'ADD')\">\r\n + Add Quantity\r\n </button>\r\n <button class=\"btn btn-sm w-50\" (click)=\"moveToCart(item)\">\r\n Move to Cart\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n <ng-template #showEmptyWishlistScreen>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container>\r\n <div class=\"heading-medium d-flex justify-content-center\">\r\n Your Wishlist is Empty</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #SchemeDetails>\r\n <div class=\"header mb-3 f-18 fw-600\">Current Scheme Enrollments - 4</div>\r\n <div class=\"row gap-2\">\r\n <ng-container *ngFor=\"let scheme of [1,1,1,1]\">\r\n <div class=\"cards d-flex flex-column w-32 mb-2 p-0 \">\r\n <div class=\"card-header row gap-2\">\r\n <div class=\"card-head-left col-7\">\r\n <div class=\"scheme-type fs-15 fw-600\">Group Investment Scheme</div>\r\n <div class=\"scheme-id fw-600\">GIS6K_000231004</div>\r\n </div>\r\n <div class=\"card-head-right col-4 text-center align-content-center\">\r\n <div class=\"scheme-amount fw-600\">\u20B96,000/M</div>\r\n </div>\r\n </div>\r\n <div class=\"card-body d-flex p-0 mb-3\">\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/425719c1752566628577star.png\" alt=\"\"\r\n class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">\u20B913,800</div>\r\n <div class=\"card-sub-text text-center\">Total Acheived</div>\r\n </div>\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/229997c1752567131192brand_7959220.png\"\r\n alt=\"\" class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">\u20B91,000</div>\r\n <div class=\"card-sub-text text-center\">Rewards</div>\r\n </div>\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/760761c1752567279970calendar (1).png\"\r\n alt=\"\" class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">8</div>\r\n <div class=\"card-sub-text text-center\">Due Months</div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer row\">\r\n <div class=\"col-6 d-flex gap-2 p-0\">\r\n <span class=\"footer-text text-nowrap\">Start On :</span><span class=\"date-text text-nowrap\">30\r\n may 2025</span>\r\n </div>\r\n <div class=\"col-6 d-flex gap-2 p-0\">\r\n <span class=\"footer-text text-nowrap\">Maturity On :</span><span class=\"date-text text-nowrap\">25\r\n may 2026</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n<ng-template #SchemePassbook>\r\n <div class=\"w-100 h-100 overflow-scroll passbook_container\">\r\n <div class=\"header d-flex flex-column\">\r\n <div class=\"d-flex align-items-center justify-content-end mb-3\" *ngIf=\"storeListing.length >= 2\"><select\r\n class=\"store-listing\" (change)=\"changeStore($event)\">\r\n <option value=\"\">Select Store</option>\r\n <option [value]=\"store.id\" *ngFor=\"let store of storeListing\">{{store.storeName}}</option>\r\n </select></div>\r\n <div class=\"scheme-overview d-flex flex-column\">\r\n <div class=\"d-flex gap-2\">\r\n <div class=\"available-savings\">\r\n <div class=\"d-flex align-items-center gap-1 w-100 justify-content-between\">\r\n <h3>Available Savings</h3>\r\n <span class=\"amount_logo\">\uD83D\uDCB0</span>\r\n </div>\r\n\r\n <div class=\"amount\">{{totalSavings ? totalSavings :\r\n '0'}}</div>\r\n </div>\r\n <div class=\"active-schemes\">\r\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n <h3>Active Passbooks</h3>\r\n <div class=\"auto-pay-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\r\n </div>\r\n </div>\r\n <div class=\"scheme-count\">{{totalSchemes?.length ?\r\n totalSchemes.length : '0'}}</div>\r\n <div class=\"subtitle\">On Track</div>\r\n </div>\r\n <div class=\"active-schemes\" *ngIf=\"totalAccumulatedGold > 0\">\r\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n <h3>Accumulated Gold </h3>\r\n <div class=\"auto-pay-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/153448c1756808418216accumulated_icon.png\">\r\n </div>\r\n </div>\r\n <div class=\"scheme-count\">{{totalAccumulatedGold}} gms</div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"overAllDues?.length\">\r\n <div class=\"section d-flex-flex-column gap-2\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Due Payments</h2>\r\n </div>\r\n <div class=\"payment-list d-flex flex-column gap-2\">\r\n <ng-container *ngIf=\"overAllDues?.length; else showEmptyPayment\">\r\n <div class=\"payment-item overdue\" *ngFor=\"let payment of overAllDues\">\r\n <div class=\"payment-info\">\r\n <div class=\"payment-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/403142c1753435378127Background.svg\">\r\n <!-- <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\"\r\n *ngIf=\"!payment.overdueStatus && payment.paymentStatus === 'PAID'\"> -->\r\n </div>\r\n <div class=\"payment-details\">\r\n <h4>{{payment.schemeName}} - {{payment.emiMonthCount}}rd EMI</h4>\r\n <span>Date {{payment.dueDate ? (payment.dueDate | date:'dd-MM-yyyy') :\r\n 'N/A'}}\r\n <!-- <span *ngIf=\"payment.overdueStatus\">| Due by: {{payment.daysOverdue\r\n ? payment.daysOverdue : 0}}</span> --></span>\r\n </div>\r\n </div>\r\n <div class=\"payment-amount\">\r\n <div class=\"amount-value\">\u20B9{{payment.dueAmount ? payment.dueAmount :\r\n '0'}}\r\n </div>\r\n <div class=\"payment-status overdue-status cursor-pointer\"\r\n (click)=\"payDue(payment)\">\r\n <ng-container *ngIf=\"!payDueLoader\">Pay Now</ng-container>\r\n <ng-container *ngIf=\"payDueLoader\">Loading...</ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #showEmptyPayment>\r\n <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n <span>No Due Payments</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"section mt-3\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Your Active Passbooks</h2>\r\n </div>\r\n\r\n <div class=\"schemes-grid\">\r\n <ng-container *ngIf=\"totalSchemes && totalSchemes.length > 0; else showActiveScheme\">\r\n <div class=\"scheme-card d-flex flex-column gap-2 cursor-pointer\"\r\n *ngFor=\"let scheme of totalSchemes; let i = index\" (click)=\"viewSchemeDetails(scheme)\">\r\n <div class=\"scheme-header\">\r\n <div>\r\n <div class=\"scheme-title\">{{ scheme?.schemeName || 'N/A' }}</div>\r\n <div class=\"scheme-amount\">\u20B9{{ scheme?.installmentAmount || '0' }}/Monthly</div>\r\n </div>\r\n <div class=\"scheme-date\">\r\n <span>Enrolled: {{ scheme?.createdTimestamp ? (scheme?.createdTimestamp |\r\n date:'dd-MM-yyyy') :\r\n 'N/A' }}</span>\r\n <!-- <span>Maturity: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n 'N/A' }}</span> -->\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-status d-flex justify-content-center align-items-center\"\r\n [ngClass]=\"scheme?.passBookStatus === 'REDEEM_REQUESTED' ? 'redeem_status' : (scheme?.passBookStatus === 'ACTIVE' ? 'active-status' : 'redeem_status')\">\r\n {{\r\n scheme.passBookStatus ? scheme.passBookStatus.replaceAll('_', ' ') : 'N/A'\r\n }}\r\n </div>\r\n\r\n <div class=\"scheme-stats\">\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">{{ scheme?.totalPaidAmount || '0' }}</div>\r\n <div class=\"stat-label\">Deposited Amount</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">\r\n {{\r\n scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n (scheme?.schemePayments?.length -\r\n scheme.dueMonths) : 'N/A'\r\n }}\r\n </div>\r\n <div class=\"stat-label\">Paid Months</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">{{scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n scheme?.dueMonths : 'N/A' }}</div>\r\n <div class=\"stat-label\">Due Months</div>\r\n </div>\r\n <div class=\"stat\" *ngIf=\"scheme?.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"stat-value\">{{ scheme?.totalInvestedMetal || '0' }} gms</div>\r\n <div class=\"stat-label\">Accumulated Gold</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-footer\">\r\n <span>Maturity Date: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n 'N/A' }}</span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #showActiveScheme>\r\n <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n <span>No Active Scheme</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n <!-- <div class=\"auto-pay\">\r\n <div class=\"auto-pay-icon mobile-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/966462c1753439662355Background.png\"></div>\r\n <div class=\"auto-pay-content\">\r\n <div class=\"auto-pay-title\">Manage Auto-pay</div>\r\n <div class=\"auto-pay-desc\">Pause, resume or cancel auto payment subscription</div>\r\n </div>\r\n <button class=\"manage-btn\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/409230c1753439564830SVG.png\"> Manage</button>\r\n </div> -->\r\n </div>\r\n</ng-template>\r\n<ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #Scheme_Details>\r\n <simpo-scheme-details [schemeDetails]=\"schemeDetails\" [data]=\"data\" [metalPrice]=\"metalPrice\"\r\n (gotoSchemeOverview)=\"selectedSidePanelTab = 'Scheme Passbook'\"></simpo-scheme-details>\r\n</ng-template>\r\n<ng-template #Transactions>\r\n <simpo-passbook-transactions></simpo-passbook-transactions>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n</ngx-skeleton-loader>", styles: [".total-container{position:relative;height:auto;overflow:scroll;background:#fff!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;margin-left:20px;padding:15px;overflow-y:auto;overflow-x:hidden;border:1px solid #d3d3d324;border-radius:20px;max-height:80vh}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}.profile-box{box-shadow:#00000029 0 1px 4px}h1{font-weight:600}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.amount_logo{font-size:27px}@media screen and (max-width: 475px){.store-listing{width:35%!important}.total-container{height:100%!important}.amount_logo{font-size:27px}.amount,.scheme-count{font-size:20px!important}.title-text{font-size:24px}.schemes-grid{flex-wrap:wrap;overflow-y:scroll;height:95%}.section{height:auto}.scheme-status{white-space:nowrap}.scheme-card{width:100%}.header{flex-direction:column-reverse}.scheme-overview{width:100%!important}.scheme-overview div{flex-wrap:wrap}.available-savings h3{font-size:17px!important}.quick-actions{width:100%}.active-schemes h3{font-size:17px!important}.auto-pay-icon{width:55px!important;height:50px!important}.mobile-icon{width:30px!important}.manage-btn{width:25%!important}.tab-selected div{font-weight:600!important}.mobile-height{height:100%!important}.passbook_container{height:90%!important;overflow-x:scroll!important}.passbook_container .section{max-height:unset!important;padding:10px!important}.section-header{margin-bottom:2px!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;border:none;padding:10px 5px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.list-sec .tab-selected{border-top-left-radius:10px!important;border-bottom-left-radius:10px;border:none}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:0 10px;width:100vw;margin-bottom:20px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.profile-icon{width:70px}.text-overflow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width:1200px) and (max-width: 1330px){.profile-details{width:75%!important}}@media screen and (min-width:1200px){.manage-btn{width:10%!important}}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}.cards{box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;border-radius:12px}.cards .card-header{padding:8px}.cards .card-header .card-head .scheme-type{font-size:15px}.cards .card-body .col-4 .card-sub-text{font-size:14px}.cards .card-footer{border-top:2px dashed!important;margin:0 5px;padding:10px}.cards .card-footer span{font-size:13px}.cards .card-footer .date-text{font-weight:600}.cards .card-footer div{font-size:15px}.fs-15{font-size:14px}.w-32{width:32.5%!important}.w-40{width:40px!important}.f-18{font-size:18px}.fw-600{font-weight:600}.scheme-id{font-size:13px}.order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}.order-card:hover .arrow-icon mat-icon{transform:translate(3px)}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.cart-item-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa);width:49%}.address-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.address-card .card-body{position:relative;overflow:hidden}.address-text{color:#495057;line-height:1.4}.btn-sm{transition:all .3s ease}.small-icon{font-size:16px!important}.badge.bg-light{color:#495057!important;background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;border:1px solid #dee2e6}@media (max-width: 576px){.address-card .card-body{padding:1rem!important}.address-card{width:100%!important}.btn-sm{display:flex;justify-content:center;align-items:center;color:red!important}.btn-sm mat-icon{font-size:13px}.btn-sm{width:100%;margin-bottom:.25rem}}.profile-box{transition:all .3s ease;position:relative}.profile-box:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001f!important}.profile-icon:hover{transform:scale(1.05);box-shadow:0 6px 20px #00000026!important}.contact-item:hover{color:#007bff!important}.tab-item:hover{background:linear-gradient(90deg,#007bff14,#007bff08)!important;transform:translate(4px)}.tab-item:hover .tab-hover-bg{opacity:1}.tab-item:hover img{transform:scale(1.1)}.tab-selected{border-left:4px solid;font-weight:600!important;border-bottom:unset!important}.tab-selected .tab-label{font-weight:600!important}.edit-btn:hover{background:linear-gradient(135deg,#007bff0d,#007bff1a)!important;transform:translateY(-1px);box-shadow:0 4px 12px #007bff33}.logout-btn:hover{transform:translateY(-1px);box-shadow:0 4px 15px #00000040!important;filter:brightness(1.05)}.tabs-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.tabs-container::-webkit-scrollbar{width:4px}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-box{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.profile-box{width:100%!important}.profile-header{flex-direction:column;height:auto!important;text-align:center}.action-buttons{flex-direction:column}}.scheme-overview{gap:20px;width:100%}.available-savings{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:20px;border-radius:12px;position:relative;flex:1}.available-savings .amount{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.available-savings h3{font-size:14px;color:#856404;margin-bottom:8px;font-weight:500}.subtitle{font-size:12px;color:#666}.active-schemes{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;position:relative;flex:1}.active-schemes h3{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.scheme-count{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e9ecef;max-height:40vh;overflow-x:scroll}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:18px;font-weight:600}.view-all{color:#6c5ce7;font-size:16px}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.overdue{background:#fef2f2;border:1px solid #FECACA}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.upcoming{background:#f8f9fa;color:#666}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.payment-status{font-size:12px;padding:4px 8px;border-radius:4px;color:#fff;white-space:nowrap}.overdue-status{background:#dc3545}.upcoming-status{background:#6c757d}.schemes-grid{display:flex;gap:10px;overflow-x:scroll}.scheme-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e9ecef;position:relative;min-width:34vw}.scheme-header{display:flex;justify-content:space-between;align-items:flex-start}.scheme-title{font-size:16px;font-weight:600;margin-bottom:4px}.scheme-amount{font-size:12px;color:#666}.scheme-date{font-size:12px;color:#666;display:flex;flex-direction:column;gap:10px}.scheme-status{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;text-transform:uppercase;min-width:15%;max-width:fit-content}.redeem_status{background:orange;color:#fff}.active-status{background:#22c55e;color:#fff}.scheme-stats{display:flex;justify-content:space-between}.stat{text-align:center}.stat-value{font-size:20px;font-weight:700;color:#333}.stat-label{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px}.scheme-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.price-notice{background:#fce7f3;color:#be185d;padding:8px 12px;border-radius:6px;font-size:11px}.auto-pay{background:#fff3cd;padding:16px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-top:20px}.auto-pay-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.auto-pay-icon img{width:100%}.auto-pay-content{flex:1}.auto-pay-title{font-size:14px;font-weight:600;margin-bottom:4px}.auto-pay-desc{font-size:12px;color:#666}.manage-btn{background:none;border:1px solid #dee2e6;padding:6px 0;border-radius:4px;font-size:13px!important;cursor:pointer;display:flex;justify-content:space-evenly}.store-listing{font-size:14px;width:20%;height:30px;margin-bottom:13px;border:1px solid #e9ecef;border-radius:5px;outline:none;padding-left:5px;cursor:pointer}.fs-14{font-size:14px}.fs-12{font-size:12px}\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: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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: 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: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: OrderDetailsComponent, selector: "simpo-order-details", inputs: ["responseData", "data", "index", "edit", "delete", "customClass", "orderDetailData"], outputs: ["goBackEmitter"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i8$4.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "component", type: SchemeDetailsComponent, selector: "simpo-scheme-details", inputs: ["schemeDetails", "data", "metalPrice"], outputs: ["gotoSchemeOverview"] }, { kind: "component", type: ListHomeAppointmentComponent, selector: "simpo-list-home-appointment" }, { kind: "component", type: PassbookTransactionsComponent, selector: "simpo-passbook-transactions" }] }); }
|
|
21743
21954
|
}
|
|
21744
21955
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserProfileComponent, decorators: [{
|
|
21745
21956
|
type: Component,
|
|
@@ -21766,7 +21977,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
21766
21977
|
SchemeDetailsComponent,
|
|
21767
21978
|
ListHomeAppointmentComponent,
|
|
21768
21979
|
PassbookTransactionsComponent
|
|
21769
|
-
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [spacingHorizontal]=\"styles?.layout\" [ngStyle]=\"{'max-height': '100vh', 'z-index': isMobile ? '100000000' : ''}\"\r\n [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"p-4 profile-box shadow-lg\"\r\n style=\"width: 25%; border-radius: 20px; height: fit-content; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 1px solid rgba(0,0,0,0.05);\"\r\n [style.order]=\"styles?.swap ? '1' : '0'\">\r\n\r\n <!-- Profile Header Section -->\r\n <div class=\"d-flex align-items-center profile-header\"\r\n style=\"gap: 15px; height: 80px; margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 15px; backdrop-filter: blur(10px);\">\r\n <div class=\"profile-image-wrapper\" style=\"position: relative;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100 profile-icon\"\r\n style=\"border: 3px solid #e3f2fd; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: all 0.3s ease;\">\r\n <div class=\"online-indicator\"\r\n style=\"position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4caf50; border: 2px solid white; border-radius: 50%;\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"profile-details flex-grow-1\">\r\n <h4 class=\"font-weight-bold mb-2\" style=\"color: #2c3e50; font-size: 1.1rem; margin-bottom: 8px;\">\r\n {{getUserDetails?.contact?.name}}</h4>\r\n\r\n <div class=\"contact-info\" style=\"display: flex; flex-direction: column; gap: 6px;\">\r\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n *ngIf=\"getUserDetails?.contact?.mobile?.length\"\r\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">stay_primary_portrait</mat-icon>\r\n <span>{{getUserDetails?.contact?.mobile}}</span>\r\n </h6>\r\n\r\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n *ngIf=\"getUserDetails?.contact?.email?.length\"\r\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">mail_outline</mat-icon>\r\n <span class=\"w-100 text-overflow\">{{getUserDetails?.contact?.email}}</span>\r\n </h6>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Navigation Tabs Section -->\r\n <div class=\"tabs-container\" style=\"margin-bottom: 20px;\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center tab-item\"\r\n style=\"gap: 12px; cursor: pointer; padding: 16px 12px; margin: 2px 0; border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden;\"\r\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '1px solid rgba(0,0,0,0.06)' : ''\"\r\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\"\r\n [style.backgroundColor]=\"tab.status ? styles?.background?.color : 'transparent'\"\r\n [style.borderColor]=\"tab.status ? styles?.background?.accentColor : 'transparent'\">\r\n <div class=\"tab-icon-wrapper\"\r\n style=\"width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\">\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n style=\"height: 20px; width: 20px; object-fit: contain; transition: transform 0.3s ease;\">\r\n </div>\r\n\r\n <div class=\"tab-label font-weight-normal\" style=\"font-size: 0.9rem; transition: all 0.3s ease;\">\r\n {{tab.value}}</div>\r\n\r\n <!-- Hover effect background -->\r\n <div class=\"tab-hover-bg\"\r\n style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,123,255,0.05) 0%, rgba(0,123,255,0.02) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1;\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- Action Buttons Section -->\r\n <div class=\"d-flex action-buttons\"\r\n style=\"gap: 10px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.06);\">\r\n <button class=\"edit-btn flex-grow-1\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\"\r\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; background: transparent; border: 2px solid; transition: all 0.3s ease; position: relative; overflow: hidden;\">\r\n Edit Profile\r\n </button>\r\n\r\n <button class=\"logout-btn flex-grow-1\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\"\r\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; border: none; color: white; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.15);\">\r\n Logout\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"orders-sec shadow-lg\" [style.order]=\"styles?.swap ? '0' : '1'\">\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Details'\">\r\n <ng-container *ngTemplateOutlet=\"SchemeDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Transactions'\">\r\n <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n <simpo-list-home-appointment></simpo-list-home-appointment>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Referrals'\">\r\n <ng-container *ngTemplateOutlet=\"Referrals\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Rewards'\">\r\n <ng-container *ngTemplateOutlet=\"Rewards\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <div class=\"w-100 position-relative mobile-height\" style=\"height: 80vh;\">\r\n <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\"\r\n *ngIf=\"selectedSidePanelTab != 'Scheme_Details'\">\r\n <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\"\r\n (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n </div>\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"''\">\r\n <section class=\"top-sec\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\"\r\n style=\"width: 50px; height: 50px;\">\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\">\r\n <mat-icon>stay_primary_portrait</mat-icon>\r\n <span>{{getUserDetails?.contact?.mobile}}</span>\r\n </h6>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\"\r\n *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon>\r\n <span>{{getUserDetails?.contact?.email}}</span>\r\n </h6>\r\n </div>\r\n </section>\r\n <section class=\"list-sec\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\"\r\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\"\r\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n [style.color]=\"styles?.background?.accentColor\">\r\n <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">\r\n {{tab.value}}</div>\r\n </div>\r\n\r\n </ng-container>\r\n </section>\r\n <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\r\n <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\">Logout</button>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Transactions'\">\r\n <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n <simpo-list-home-appointment></simpo-list-home-appointment>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Referrals'\">\r\n <ng-container *ngTemplateOutlet=\"Referrals\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Rewards'\">\r\n <ng-container *ngTemplateOutlet=\"Rewards\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isEcommerce]=\"true\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n</section>\r\n\r\n<ng-template #Referrals>\r\n <iframe [src]=\"getMyReferralsUrl\" frameborder=\"0\" width=\"100%\" height=\"100%\"></iframe>\r\n</ng-template>\r\n<ng-template #Rewards>\r\n <iframe [src]=\"getRewardsUrl\" frameborder=\"0\" width=\"100%\" height=\"100%\"></iframe>\r\n</ng-template>\r\n<ng-template #OrderSection>\r\n <h3 class=\"onlyDesktop mb-3\">My Orders</h3>\r\n <!-- <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n <ng-container *ngFor=\"let tab of tabs\">\r\n <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">\r\n {{tab.value}}</div>\r\n </ng-container>\r\n </div> -->\r\n <div class=\"order-list\">\r\n <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #showEmptyScreen>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <div class=\"cart-text \">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <div class=\"heading-medium d-flex justify-content-center content-side\"\r\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n <simpo-text-editor [(value)]=\"text.value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\"\r\n (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n <div class=\"d-flex justify-content-between mb-2\">\r\n <h3 class=\"title-text\">My Address</h3>\r\n <button class=\"address-btn\" (click)=\"addNewAddress()\"\r\n [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n <div class=\"address-list\">\r\n <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\r\n <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n <div class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card \" [style.width]=\"getProductWidth\">\r\n <div class=\"card-body p-3\">\r\n <!-- Header Section -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n <div class=\"address-info d-flex align-items-center justify-content-between w-100\">\r\n <h4 class=\"mb-0 fw-semibold\">{{address.receiverName}}</h4>\r\n <div class=\"icon-grp d-flex\">\r\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n (click)=\"editAddress(idx)\">edit</mat-icon>\r\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"address-content mb-3\">\r\n <div class=\"address-line mb-2\">\r\n <span class=\"text-muted small d-block\">Address</span>\r\n <span class=\"address-text\">{{address.addressLine1}}</span>\r\n </div>\r\n <div class=\"phone-info\">\r\n <span class=\"text-muted small d-block\">Phone</span>\r\n <span class=\"phone-number fw-bold\">{{address.receiverPhone}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-template #showEmptyAddress>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\r\n <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery\r\n </div>\r\n <!-- </ng-container> -->\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n <h3 class=\"onlyDesktop\">My Accounts</h3>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n <h3 class=\"onlyDesktop\">Logout</h3>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n <div (click)=\"goToOrderDetails(order)\" class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card\">\r\n <div class=\"card-body p-3\" [style.--background-color]=\"styles?.background?.color\">\r\n <!-- Header Section -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n <div class=\"order-number\">\r\n <h4 class=\"mb-0 fw-semibold\">{{\"Order\" + \" \" + order.orderNum}}</h4>\r\n </div>\r\n <div class=\"arrow-icon\">\r\n <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"ordered-item row mb-2\">\r\n <ng-container *ngFor=\"let item of getOrderedItems(order)\">\r\n <div class=\"item-card col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img [src]=\"item?.imgUrl\" alt=\"Product Image\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"item-img w-50\">\r\n <div class=\"cart-item-name\">{{item?.itemName}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <!-- Middle Section -->\r\n <div class=\"order-details\">\r\n <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-1\">\r\n <span class=\"text-muted small mb-3 mb-sm-0\">\r\n {{order.createdTimeStamp | date: 'dd MMMM yyyy'}}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"amount-section\">\r\n <span class=\"h5 mb-0 text-success fw-bold\">\r\n <span [innerHTML]=\"currency\"></span>\r\n {{(order.billDetails.discountAmount ?\r\n (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +\r\n order?.billDetails?.totalTaxAfterDiscount) :\r\n order.billDetails.totalGrossValue) | number:'1.0-2'}}\r\n </span>\r\n </div>\r\n <div class=\"status-section\">\r\n <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">\r\n {{order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | titlecase}}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #WishlistDetails>\r\n <h3 class=\"onlyDesktop\">My Wishlist</h3>\r\n <div class=\"wishlist-list\" *ngIf=\"wishlistData?.length; else showEmptyWishlistScreen\">\r\n <div class=\"d-flex flex-wrap\" style=\"gap: 10px;\">\r\n <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n <div class=\"address-card mb-2\">\r\n <div class=\"card-body p-4\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-auto\">\r\n <div class=\"product-image-wrapper\">\r\n <img loading=\"lazy\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"product-img rounded\" [src]=\"item.imgUrl\" alt=\"Product Image\">\r\n </div>\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"product-details\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div\r\n class=\"col-auto text-end d-flex justify-content-between align-items-center w-100\">\r\n <h6 class=\"product-name mb-2 fw-semibold text-dark\">\r\n {{item.itemName}}\r\n </h6>\r\n <div class=\"delete-action\" *ngIf=\"!isMobile\">\r\n <button class=\"btn btn-sm delete-btn\" (click)=\"deleteFromWhislist(item)\"\r\n title=\"Remove from wishlist\">\r\n <mat-icon class=\"small-icon\">delete</mat-icon>\r\n </button>\r\n </div>\r\n <div class=\"delete-action mt-2\" *ngIf=\"isMobile\">\r\n <button class=\"btn btn-sm w-100\" (click)=\"deleteFromWhislist(item)\">\r\n <mat-icon class=\"small-icon me-1\">delete</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"product-price mb-3\">\r\n <span class=\"h5 text-success fw-bold mb-0\">\r\n <span [innerHTML]='currency'></span>{{item.discountedPrice}}\r\n </span>\r\n <span class=\"text-muted small ms-2\" *ngIf=\"item.quantity\">\r\n ({{item.quantity}} items)\r\n </span>\r\n </div>\r\n <div class=\"action-buttons d-flex gap-2\">\r\n <div class=\"quantity-controls d-flex align-items-center w-50 justify-content-center\"\r\n *ngIf=\"item.quantity\">\r\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n (click)=\"addToFav(item, 'SUBSTRACT')\">\r\n -\r\n </button>\r\n <span class=\"quantity-display px-3 py-1 bg-light rounded mx-1\">\r\n {{item.quantity}}\r\n </span>\r\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n (click)=\"addToFav(item, 'ADD')\"> +\r\n </button>\r\n </div>\r\n <button class=\"btn btn-sm w-50\" *ngIf=\"!item.quantity\"\r\n (click)=\"addToFav(item, 'ADD')\">\r\n + Add Quantity\r\n </button>\r\n <button class=\"btn btn-sm w-50\" (click)=\"moveToCart(item)\">\r\n Move to Cart\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n <ng-template #showEmptyWishlistScreen>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container>\r\n <div class=\"heading-medium d-flex justify-content-center\">\r\n Your Wishlist is Empty</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #SchemeDetails>\r\n <div class=\"header mb-3 f-18 fw-600\">Current Scheme Enrollments - 4</div>\r\n <div class=\"row gap-2\">\r\n <ng-container *ngFor=\"let scheme of [1,1,1,1]\">\r\n <div class=\"cards d-flex flex-column w-32 mb-2 p-0 \">\r\n <div class=\"card-header row gap-2\">\r\n <div class=\"card-head-left col-7\">\r\n <div class=\"scheme-type fs-15 fw-600\">Group Investment Scheme</div>\r\n <div class=\"scheme-id fw-600\">GIS6K_000231004</div>\r\n </div>\r\n <div class=\"card-head-right col-4 text-center align-content-center\">\r\n <div class=\"scheme-amount fw-600\">\u20B96,000/M</div>\r\n </div>\r\n </div>\r\n <div class=\"card-body d-flex p-0 mb-3\">\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/425719c1752566628577star.png\" alt=\"\"\r\n class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">\u20B913,800</div>\r\n <div class=\"card-sub-text text-center\">Total Acheived</div>\r\n </div>\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/229997c1752567131192brand_7959220.png\"\r\n alt=\"\" class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">\u20B91,000</div>\r\n <div class=\"card-sub-text text-center\">Rewards</div>\r\n </div>\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/760761c1752567279970calendar (1).png\"\r\n alt=\"\" class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">8</div>\r\n <div class=\"card-sub-text text-center\">Due Months</div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer row\">\r\n <div class=\"col-6 d-flex gap-2 p-0\">\r\n <span class=\"footer-text text-nowrap\">Start On :</span><span class=\"date-text text-nowrap\">30\r\n may 2025</span>\r\n </div>\r\n <div class=\"col-6 d-flex gap-2 p-0\">\r\n <span class=\"footer-text text-nowrap\">Maturity On :</span><span class=\"date-text text-nowrap\">25\r\n may 2026</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n<ng-template #SchemePassbook>\r\n <div class=\"w-100 h-100 overflow-scroll passbook_container\">\r\n <div class=\"header d-flex flex-column\">\r\n <div class=\"d-flex align-items-center justify-content-end mb-3\" *ngIf=\"storeListing.length >= 2\"><select\r\n class=\"store-listing\" (change)=\"changeStore($event)\">\r\n <option value=\"\">Select Store</option>\r\n <option [value]=\"store.id\" *ngFor=\"let store of storeListing\">{{store.storeName}}</option>\r\n </select></div>\r\n <div class=\"scheme-overview d-flex flex-column\">\r\n <div class=\"d-flex gap-2\">\r\n <div class=\"available-savings\">\r\n <div class=\"d-flex align-items-center gap-1 w-100 justify-content-between\">\r\n <h3>Available Savings</h3>\r\n <span class=\"amount_logo\">\uD83D\uDCB0</span>\r\n </div>\r\n\r\n <div class=\"amount\">{{totalSavings ? totalSavings :\r\n '0'}}</div>\r\n </div>\r\n <div class=\"active-schemes\">\r\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n <h3>Active Passbooks</h3>\r\n <div class=\"auto-pay-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\r\n </div>\r\n </div>\r\n <div class=\"scheme-count\">{{totalSchemes?.length ?\r\n totalSchemes.length : '0'}}</div>\r\n <div class=\"subtitle\">On Track</div>\r\n </div>\r\n <div class=\"active-schemes\" *ngIf=\"totalAccumulatedGold > 0\">\r\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n <h3>Accumulated Gold </h3>\r\n <div class=\"auto-pay-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/153448c1756808418216accumulated_icon.png\">\r\n </div>\r\n </div>\r\n <div class=\"scheme-count\">{{totalAccumulatedGold}} gms</div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"overAllDues?.length\">\r\n <div class=\"section d-flex-flex-column gap-2\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Due Payments</h2>\r\n </div>\r\n <div class=\"payment-list d-flex flex-column gap-2\">\r\n <ng-container *ngIf=\"overAllDues?.length; else showEmptyPayment\">\r\n <div class=\"payment-item overdue\" *ngFor=\"let payment of overAllDues\">\r\n <div class=\"payment-info\">\r\n <div class=\"payment-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/403142c1753435378127Background.svg\">\r\n <!-- <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\"\r\n *ngIf=\"!payment.overdueStatus && payment.paymentStatus === 'PAID'\"> -->\r\n </div>\r\n <div class=\"payment-details\">\r\n <h4>{{payment.schemeName}} - {{payment.emiMonthCount}}rd EMI</h4>\r\n <span>Date {{payment.dueDate ? (payment.dueDate | date:'dd-MM-yyyy') :\r\n 'N/A'}}\r\n <!-- <span *ngIf=\"payment.overdueStatus\">| Due by: {{payment.daysOverdue\r\n ? payment.daysOverdue : 0}}</span> --></span>\r\n </div>\r\n </div>\r\n <div class=\"payment-amount\">\r\n <div class=\"amount-value\">\u20B9{{payment.dueAmount ? payment.dueAmount :\r\n '0'}}\r\n </div>\r\n <div class=\"payment-status overdue-status cursor-pointer\"\r\n (click)=\"payDue(payment)\">\r\n <ng-container *ngIf=\"!payDueLoader\">Pay Now</ng-container>\r\n <ng-container *ngIf=\"payDueLoader\">Loading...</ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #showEmptyPayment>\r\n <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n <span>No Due Payments</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"section mt-3\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Your Active Passbooks</h2>\r\n </div>\r\n\r\n <div class=\"schemes-grid\">\r\n <ng-container *ngIf=\"totalSchemes && totalSchemes.length > 0; else showActiveScheme\">\r\n <div class=\"scheme-card d-flex flex-column gap-2 cursor-pointer\"\r\n *ngFor=\"let scheme of totalSchemes; let i = index\" (click)=\"viewSchemeDetails(scheme)\">\r\n <div class=\"scheme-header\">\r\n <div>\r\n <div class=\"scheme-title\">{{ scheme?.schemeName || 'N/A' }}</div>\r\n <div class=\"scheme-amount\">\u20B9{{ scheme?.installmentAmount || '0' }}/Monthly</div>\r\n </div>\r\n <div class=\"scheme-date\">\r\n <span>Enrolled: {{ scheme?.createdTimestamp ? (scheme?.createdTimestamp |\r\n date:'dd-MM-yyyy') :\r\n 'N/A' }}</span>\r\n <!-- <span>Maturity: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n 'N/A' }}</span> -->\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-status d-flex justify-content-center align-items-center\"\r\n [ngClass]=\"scheme?.passBookStatus === 'REDEEM_REQUESTED' ? 'redeem_status' : (scheme?.passBookStatus === 'ACTIVE' ? 'active-status' : 'redeem_status')\">\r\n {{\r\n scheme.passBookStatus ? scheme.passBookStatus.replaceAll('_', ' ') : 'N/A'\r\n }}\r\n </div>\r\n\r\n <div class=\"scheme-stats\">\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">{{ scheme?.totalPaidAmount || '0' }}</div>\r\n <div class=\"stat-label\">Deposited Amount</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">\r\n {{\r\n scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n (scheme?.schemePayments?.length -\r\n scheme.dueMonths) : 'N/A'\r\n }}\r\n </div>\r\n <div class=\"stat-label\">Paid Months</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">{{scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n scheme?.dueMonths : 'N/A' }}</div>\r\n <div class=\"stat-label\">Due Months</div>\r\n </div>\r\n <div class=\"stat\" *ngIf=\"scheme?.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"stat-value\">{{ scheme?.totalInvestedMetal || '0' }} gms</div>\r\n <div class=\"stat-label\">Accumulated Gold</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-footer\">\r\n <span>Maturity Date: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n 'N/A' }}</span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #showActiveScheme>\r\n <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n <span>No Active Scheme</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n <!-- <div class=\"auto-pay\">\r\n <div class=\"auto-pay-icon mobile-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/966462c1753439662355Background.png\"></div>\r\n <div class=\"auto-pay-content\">\r\n <div class=\"auto-pay-title\">Manage Auto-pay</div>\r\n <div class=\"auto-pay-desc\">Pause, resume or cancel auto payment subscription</div>\r\n </div>\r\n <button class=\"manage-btn\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/409230c1753439564830SVG.png\"> Manage</button>\r\n </div> -->\r\n </div>\r\n</ng-template>\r\n<ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #Scheme_Details>\r\n <simpo-scheme-details [schemeDetails]=\"schemeDetails\" [data]=\"data\" [metalPrice]=\"metalPrice\"\r\n (gotoSchemeOverview)=\"selectedSidePanelTab = 'Scheme Passbook'\"></simpo-scheme-details>\r\n</ng-template>\r\n<ng-template #Transactions>\r\n <simpo-passbook-transactions></simpo-passbook-transactions>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n</ngx-skeleton-loader>", styles: [".total-container{position:relative;height:auto;overflow:scroll;background:#fff!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;margin-left:20px;padding:15px;overflow-y:auto;overflow-x:hidden;border:1px solid #d3d3d324;border-radius:20px;max-height:70vh}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}.profile-box{box-shadow:#00000029 0 1px 4px}h1{font-weight:600}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.amount_logo{font-size:27px}@media screen and (max-width: 475px){.store-listing{width:35%!important}.total-container{height:100%!important}.amount_logo{font-size:27px}.amount,.scheme-count{font-size:20px!important}.title-text{font-size:24px}.schemes-grid{flex-wrap:wrap;overflow-y:scroll;height:95%}.section{height:auto}.scheme-status{white-space:nowrap}.scheme-card{width:100%}.header{flex-direction:column-reverse}.scheme-overview{width:100%!important}.scheme-overview div{flex-wrap:wrap}.available-savings h3{font-size:17px!important}.quick-actions{width:100%}.active-schemes h3{font-size:17px!important}.auto-pay-icon{width:55px!important;height:50px!important}.mobile-icon{width:30px!important}.manage-btn{width:25%!important}.tab-selected div{font-weight:600!important}.mobile-height{height:100%!important}.passbook_container{height:90%!important;overflow-x:scroll!important}.passbook_container .section{max-height:unset!important;padding:10px!important}.section-header{margin-bottom:2px!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;border:none;padding:10px 5px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.list-sec .tab-selected{border-top-left-radius:10px!important;border-bottom-left-radius:10px;border:none}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:0 10px;width:100vw;margin-bottom:20px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.profile-icon{width:70px}.text-overflow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width:1200px) and (max-width: 1330px){.profile-details{width:75%!important}}@media screen and (min-width:1200px){.manage-btn{width:10%!important}}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}.cards{box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;border-radius:12px}.cards .card-header{padding:8px}.cards .card-header .card-head .scheme-type{font-size:15px}.cards .card-body .col-4 .card-sub-text{font-size:14px}.cards .card-footer{border-top:2px dashed!important;margin:0 5px;padding:10px}.cards .card-footer span{font-size:13px}.cards .card-footer .date-text{font-weight:600}.cards .card-footer div{font-size:15px}.fs-15{font-size:14px}.w-32{width:32.5%!important}.w-40{width:40px!important}.f-18{font-size:18px}.fw-600{font-weight:600}.scheme-id{font-size:13px}.order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}.order-card:hover .arrow-icon mat-icon{transform:translate(3px)}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.cart-item-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa);width:49%}.address-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.address-card .card-body{position:relative;overflow:hidden}.address-text{color:#495057;line-height:1.4}.btn-sm{transition:all .3s ease}.small-icon{font-size:16px!important}.badge.bg-light{color:#495057!important;background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;border:1px solid #dee2e6}@media (max-width: 576px){.address-card .card-body{padding:1rem!important}.address-card{width:100%!important}.btn-sm{display:flex;justify-content:center;align-items:center;color:red!important}.btn-sm mat-icon{font-size:13px}.btn-sm{width:100%;margin-bottom:.25rem}}.profile-box{transition:all .3s ease;position:relative}.profile-box:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001f!important}.profile-icon:hover{transform:scale(1.05);box-shadow:0 6px 20px #00000026!important}.contact-item:hover{color:#007bff!important}.tab-item:hover{background:linear-gradient(90deg,#007bff14,#007bff08)!important;transform:translate(4px)}.tab-item:hover .tab-hover-bg{opacity:1}.tab-item:hover img{transform:scale(1.1)}.tab-selected{border-left:4px solid;font-weight:600!important;border-bottom:unset!important}.tab-selected .tab-label{font-weight:600!important}.edit-btn:hover{background:linear-gradient(135deg,#007bff0d,#007bff1a)!important;transform:translateY(-1px);box-shadow:0 4px 12px #007bff33}.logout-btn:hover{transform:translateY(-1px);box-shadow:0 4px 15px #00000040!important;filter:brightness(1.05)}.tabs-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.tabs-container::-webkit-scrollbar{width:4px}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-box{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.profile-box{width:100%!important}.profile-header{flex-direction:column;height:auto!important;text-align:center}.action-buttons{flex-direction:column}}.scheme-overview{gap:20px;width:100%}.available-savings{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:20px;border-radius:12px;position:relative;flex:1}.available-savings .amount{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.available-savings h3{font-size:14px;color:#856404;margin-bottom:8px;font-weight:500}.subtitle{font-size:12px;color:#666}.active-schemes{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;position:relative;flex:1}.active-schemes h3{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.scheme-count{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e9ecef;max-height:40vh;overflow-x:scroll}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:18px;font-weight:600}.view-all{color:#6c5ce7;font-size:16px}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.overdue{background:#fef2f2;border:1px solid #FECACA}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.upcoming{background:#f8f9fa;color:#666}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.payment-status{font-size:12px;padding:4px 8px;border-radius:4px;color:#fff;white-space:nowrap}.overdue-status{background:#dc3545}.upcoming-status{background:#6c757d}.schemes-grid{display:flex;gap:10px;overflow-x:scroll}.scheme-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e9ecef;position:relative;min-width:34vw}.scheme-header{display:flex;justify-content:space-between;align-items:flex-start}.scheme-title{font-size:16px;font-weight:600;margin-bottom:4px}.scheme-amount{font-size:12px;color:#666}.scheme-date{font-size:12px;color:#666;display:flex;flex-direction:column;gap:10px}.scheme-status{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;text-transform:uppercase;min-width:15%;max-width:fit-content}.redeem_status{background:orange;color:#fff}.active-status{background:#22c55e;color:#fff}.scheme-stats{display:flex;justify-content:space-between}.stat{text-align:center}.stat-value{font-size:20px;font-weight:700;color:#333}.stat-label{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px}.scheme-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.price-notice{background:#fce7f3;color:#be185d;padding:8px 12px;border-radius:6px;font-size:11px}.auto-pay{background:#fff3cd;padding:16px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-top:20px}.auto-pay-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.auto-pay-icon img{width:100%}.auto-pay-content{flex:1}.auto-pay-title{font-size:14px;font-weight:600;margin-bottom:4px}.auto-pay-desc{font-size:12px;color:#666}.manage-btn{background:none;border:1px solid #dee2e6;padding:6px 0;border-radius:4px;font-size:13px!important;cursor:pointer;display:flex;justify-content:space-evenly}.store-listing{font-size:14px;width:20%;height:30px;margin-bottom:13px;border:1px solid #e9ecef;border-radius:5px;outline:none;padding-left:5px;cursor:pointer}\n"] }]
|
|
21980
|
+
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [spacingHorizontal]=\"styles?.layout\" [ngStyle]=\"{'max-height': '100vh', 'z-index': isMobile ? '100000000' : ''}\"\r\n [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"p-4 profile-box shadow-lg\"\r\n style=\"width: 25%; border-radius: 20px; height: fit-content; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 1px solid rgba(0,0,0,0.05);\"\r\n [style.order]=\"styles?.swap ? '1' : '0'\">\r\n\r\n <!-- Profile Header Section -->\r\n <div class=\"d-flex align-items-center profile-header\"\r\n style=\"gap: 15px; height: 80px; margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 15px; backdrop-filter: blur(10px);\">\r\n <div class=\"profile-image-wrapper\" style=\"position: relative;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100 profile-icon\"\r\n style=\"border: 3px solid #e3f2fd; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: all 0.3s ease;\">\r\n <div class=\"online-indicator\"\r\n style=\"position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4caf50; border: 2px solid white; border-radius: 50%;\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"profile-details flex-grow-1\">\r\n <h4 class=\"font-weight-bold mb-2\" style=\"color: #2c3e50; font-size: 1.1rem; margin-bottom: 8px;\">\r\n {{getUserDetails?.contact?.name}}</h4>\r\n\r\n <div class=\"contact-info\" style=\"display: flex; flex-direction: column; gap: 6px;\">\r\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n *ngIf=\"getUserDetails?.contact?.mobile?.length\"\r\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">stay_primary_portrait</mat-icon>\r\n <span>{{getUserDetails?.contact?.mobile}}</span>\r\n </h6>\r\n\r\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n *ngIf=\"getUserDetails?.contact?.email?.length\"\r\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">mail_outline</mat-icon>\r\n <span class=\"w-100 text-overflow\">{{getUserDetails?.contact?.email}}</span>\r\n </h6>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Navigation Tabs Section -->\r\n <div class=\"tabs-container\" style=\"margin-bottom: 20px;\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center tab-item\"\r\n style=\"gap: 12px; cursor: pointer; padding: 16px 12px; margin: 2px 0; border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden;\"\r\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '1px solid rgba(0,0,0,0.06)' : ''\"\r\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\"\r\n [style.backgroundColor]=\"tab.status ? styles?.background?.color : 'transparent'\"\r\n [style.borderColor]=\"tab.status ? styles?.background?.accentColor : 'transparent'\">\r\n <div class=\"tab-icon-wrapper\"\r\n style=\"width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\">\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n style=\"height: 20px; width: 20px; object-fit: contain; transition: transform 0.3s ease;\">\r\n </div>\r\n\r\n <div class=\"tab-label font-weight-normal\" style=\"font-size: 0.9rem; transition: all 0.3s ease;\">\r\n {{tab.value}}</div>\r\n\r\n <!-- Hover effect background -->\r\n <div class=\"tab-hover-bg\"\r\n style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,123,255,0.05) 0%, rgba(0,123,255,0.02) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1;\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- Action Buttons Section -->\r\n <div class=\"d-flex action-buttons\"\r\n style=\"gap: 10px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.06);\">\r\n <button class=\"edit-btn flex-grow-1\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\"\r\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; background: transparent; border: 2px solid; transition: all 0.3s ease; position: relative; overflow: hidden;\">\r\n Edit Profile\r\n </button>\r\n\r\n <button class=\"logout-btn flex-grow-1\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\"\r\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; border: none; color: white; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.15);\">\r\n Logout\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"orders-sec shadow-lg\" [style.order]=\"styles?.swap ? '0' : '1'\">\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Details'\">\r\n <ng-container *ngTemplateOutlet=\"SchemeDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Transactions'\">\r\n <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n <simpo-list-home-appointment></simpo-list-home-appointment>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Referrals'\">\r\n <ng-container *ngTemplateOutlet=\"Referrals\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Rewards'\">\r\n <ng-container *ngTemplateOutlet=\"Rewards\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <div class=\"w-100 position-relative mobile-height\" style=\"height: 80vh;\">\r\n <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\"\r\n *ngIf=\"selectedSidePanelTab != 'Scheme_Details'\">\r\n <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\"\r\n (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n </div>\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"''\">\r\n <section class=\"top-sec\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\"\r\n style=\"width: 50px; height: 50px;\">\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\">\r\n <mat-icon>stay_primary_portrait</mat-icon>\r\n <span>{{getUserDetails?.contact?.mobile}}</span>\r\n </h6>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\"\r\n *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon>\r\n <span>{{getUserDetails?.contact?.email}}</span>\r\n </h6>\r\n </div>\r\n </section>\r\n <section class=\"list-sec\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\"\r\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\"\r\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n [style.color]=\"styles?.background?.accentColor\">\r\n <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">\r\n {{tab.value}}</div>\r\n </div>\r\n\r\n </ng-container>\r\n </section>\r\n <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\r\n <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\">Logout</button>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Transactions'\">\r\n <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n <simpo-list-home-appointment></simpo-list-home-appointment>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Referrals'\">\r\n <ng-container *ngTemplateOutlet=\"Referrals\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Rewards'\">\r\n <ng-container *ngTemplateOutlet=\"Rewards\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isEcommerce]=\"true\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n</section>\r\n\r\n<ng-template #Referrals>\r\n <iframe [src]=\"getMyReferralsUrl\" frameborder=\"0\" width=\"100%\" height=\"100%\"></iframe>\r\n</ng-template>\r\n<ng-template #Rewards>\r\n <iframe [src]=\"getRewardsUrl\" frameborder=\"0\" width=\"100%\" height=\"100%\"></iframe>\r\n</ng-template>\r\n<ng-template #OrderSection>\r\n <h3 class=\"onlyDesktop mb-3\">My Orders</h3>\r\n <!-- <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n <ng-container *ngFor=\"let tab of tabs\">\r\n <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">\r\n {{tab.value}}</div>\r\n </ng-container>\r\n </div> -->\r\n <div class=\"order-list\">\r\n <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #showEmptyScreen>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <div class=\"cart-text \">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <div class=\"heading-medium d-flex justify-content-center content-side\"\r\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n <simpo-text-editor [(value)]=\"text.value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\"\r\n (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n <div class=\"d-flex justify-content-between mb-2\">\r\n <h3 class=\"title-text\">My Address</h3>\r\n <button class=\"address-btn\" (click)=\"addNewAddress()\"\r\n [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n <div class=\"address-list\">\r\n <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\r\n <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n <div class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card \" [style.width]=\"getProductWidth\">\r\n <div class=\"card-body p-3\">\r\n <!-- Header Section -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n <div class=\"address-info d-flex align-items-center justify-content-between w-100\">\r\n <h4 class=\"mb-0 fw-semibold\">{{address.receiverName}}</h4>\r\n <div class=\"icon-grp d-flex\">\r\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n (click)=\"editAddress(idx)\">edit</mat-icon>\r\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"address-content mb-3\">\r\n <div class=\"address-line mb-2\">\r\n <span class=\"text-muted small d-block\">Address</span>\r\n <span class=\"address-text\">{{address.addressLine1}}</span>\r\n </div>\r\n <div class=\"phone-info\">\r\n <span class=\"text-muted small d-block\">Phone</span>\r\n <span class=\"phone-number fw-bold\">{{address.receiverPhone}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-template #showEmptyAddress>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\r\n <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery\r\n </div>\r\n <!-- </ng-container> -->\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n <h3 class=\"onlyDesktop\">My Accounts</h3>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n <h3 class=\"onlyDesktop\">Logout</h3>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n <div (click)=\"goToOrderDetails(order)\" class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card\">\r\n <div class=\"card-body p-3\" [style.--background-color]=\"styles?.background?.color\">\r\n <!-- Header Section -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n <div class=\"order-number\">\r\n <h4 class=\"mb-0 fw-semibold\">{{\"Order\" + \" \" + order.orderNum}}</h4>\r\n </div>\r\n <div class=\"arrow-icon\">\r\n <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"ordered-item row mb-2\">\r\n <ng-container *ngFor=\"let item of getOrderedItems(order)\">\r\n <div class=\"item-card col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img [src]=\"item?.imgUrl\" alt=\"Product Image\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"item-img w-50\">\r\n <div class=\"cart-item-name\">{{item?.itemName}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <!-- Middle Section -->\r\n <div class=\"order-details\">\r\n <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-1\">\r\n <span class=\"text-muted small mb-3 mb-sm-0\">\r\n {{order.createdTimeStamp | date: 'dd MMMM yyyy'}}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"amount-section\">\r\n <span class=\"h5 mb-0 text-success fw-bold\">\r\n <span [innerHTML]=\"currency\"></span>\r\n <!-- {{(order.billDetails.discountAmount ?\r\n (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +\r\n order?.billDetails?.totalTaxAfterDiscount) :\r\n order.billDetails.totalGrossValue) | number:'1.0-2'}} -->\r\n {{getTotalAmtPaid(order) | number:'1.0-2'}}\r\n </span>\r\n </div>\r\n <div class=\"status-section\">\r\n <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">\r\n {{order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | titlecase}}\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mt-1\" *ngIf=\"order.rewardUsed === 'REWARD_POINTS'\">\r\n <div class=\"fs-14 text-secondary\">\r\n Amount Paid - \r\n <span class=\"text-success fw-bold\">\u20B9 {{ getTotalAmtPaid(order) === order.pointsConvertedINR ? '0' : (getTotalAmtPaid(order) - order.pointsConvertedINR) }}</span>\r\n </div> \r\n <div class=\"fs-14 text-secondary\">\r\n Rewarded Amount - <span class=\"text-success fw-bold\">\u20B9 {{order.pointsConvertedINR}}</span>\r\n </div> \r\n </div>\r\n\r\n <div class=\"mt-1\" *ngIf=\"order.rewardUsed === 'VOUCHER'\"> \r\n <div class=\"fs-14 text-secondary\">\r\n Amount Paid - \r\n <span class=\"text-success fw-bold\">\u20B9 {{ getTotalAmtPaid(order) === order.voucherValue ? '0' : (getTotalAmtPaid(order) - order.voucherValue) }}</span>\r\n </div> \r\n <div class=\"fs-14 text-secondary\">\r\n Rewarded Amount - <span class=\"text-success fw-bold\">\u20B9 {{order.voucherValue}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #WishlistDetails>\r\n <h3 class=\"onlyDesktop\">My Wishlist</h3>\r\n <div class=\"wishlist-list\" *ngIf=\"wishlistData?.length; else showEmptyWishlistScreen\">\r\n <div class=\"d-flex flex-wrap\" style=\"gap: 10px;\">\r\n <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n <div class=\"address-card mb-2\">\r\n <div class=\"card-body p-4\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-auto\">\r\n <div class=\"product-image-wrapper\">\r\n <img loading=\"lazy\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"product-img rounded\" [src]=\"item.imgUrl\" alt=\"Product Image\">\r\n </div>\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"product-details\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div\r\n class=\"col-auto text-end d-flex justify-content-between align-items-center w-100\">\r\n <h6 class=\"product-name mb-2 fw-semibold text-dark\">\r\n {{item.itemName}}\r\n </h6>\r\n <div class=\"delete-action\" *ngIf=\"!isMobile\">\r\n <button class=\"btn btn-sm delete-btn\" (click)=\"deleteFromWhislist(item)\"\r\n title=\"Remove from wishlist\">\r\n <mat-icon class=\"small-icon\">delete</mat-icon>\r\n </button>\r\n </div>\r\n <div class=\"delete-action mt-2\" *ngIf=\"isMobile\">\r\n <button class=\"btn btn-sm w-100\" (click)=\"deleteFromWhislist(item)\">\r\n <mat-icon class=\"small-icon me-1\">delete</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"product-price mb-3\">\r\n <span class=\"h5 text-success fw-bold mb-0\">\r\n <span [innerHTML]='currency'></span>{{item.discountedPrice}}\r\n </span>\r\n <span class=\"text-muted small ms-2\" *ngIf=\"item.quantity\">\r\n ({{item.quantity}} items)\r\n </span>\r\n </div>\r\n <div class=\"action-buttons d-flex gap-2\">\r\n <div class=\"quantity-controls d-flex align-items-center w-50 justify-content-center\"\r\n *ngIf=\"item.quantity\">\r\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n (click)=\"addToFav(item, 'SUBSTRACT')\">\r\n -\r\n </button>\r\n <span class=\"quantity-display px-3 py-1 bg-light rounded mx-1\">\r\n {{item.quantity}}\r\n </span>\r\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n (click)=\"addToFav(item, 'ADD')\"> +\r\n </button>\r\n </div>\r\n <button class=\"btn btn-sm w-50\" *ngIf=\"!item.quantity\"\r\n (click)=\"addToFav(item, 'ADD')\">\r\n + Add Quantity\r\n </button>\r\n <button class=\"btn btn-sm w-50\" (click)=\"moveToCart(item)\">\r\n Move to Cart\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n <ng-template #showEmptyWishlistScreen>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container>\r\n <div class=\"heading-medium d-flex justify-content-center\">\r\n Your Wishlist is Empty</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #SchemeDetails>\r\n <div class=\"header mb-3 f-18 fw-600\">Current Scheme Enrollments - 4</div>\r\n <div class=\"row gap-2\">\r\n <ng-container *ngFor=\"let scheme of [1,1,1,1]\">\r\n <div class=\"cards d-flex flex-column w-32 mb-2 p-0 \">\r\n <div class=\"card-header row gap-2\">\r\n <div class=\"card-head-left col-7\">\r\n <div class=\"scheme-type fs-15 fw-600\">Group Investment Scheme</div>\r\n <div class=\"scheme-id fw-600\">GIS6K_000231004</div>\r\n </div>\r\n <div class=\"card-head-right col-4 text-center align-content-center\">\r\n <div class=\"scheme-amount fw-600\">\u20B96,000/M</div>\r\n </div>\r\n </div>\r\n <div class=\"card-body d-flex p-0 mb-3\">\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/425719c1752566628577star.png\" alt=\"\"\r\n class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">\u20B913,800</div>\r\n <div class=\"card-sub-text text-center\">Total Acheived</div>\r\n </div>\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/229997c1752567131192brand_7959220.png\"\r\n alt=\"\" class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">\u20B91,000</div>\r\n <div class=\"card-sub-text text-center\">Rewards</div>\r\n </div>\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/760761c1752567279970calendar (1).png\"\r\n alt=\"\" class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">8</div>\r\n <div class=\"card-sub-text text-center\">Due Months</div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer row\">\r\n <div class=\"col-6 d-flex gap-2 p-0\">\r\n <span class=\"footer-text text-nowrap\">Start On :</span><span class=\"date-text text-nowrap\">30\r\n may 2025</span>\r\n </div>\r\n <div class=\"col-6 d-flex gap-2 p-0\">\r\n <span class=\"footer-text text-nowrap\">Maturity On :</span><span class=\"date-text text-nowrap\">25\r\n may 2026</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n<ng-template #SchemePassbook>\r\n <div class=\"w-100 h-100 overflow-scroll passbook_container\">\r\n <div class=\"header d-flex flex-column\">\r\n <div class=\"d-flex align-items-center justify-content-end mb-3\" *ngIf=\"storeListing.length >= 2\"><select\r\n class=\"store-listing\" (change)=\"changeStore($event)\">\r\n <option value=\"\">Select Store</option>\r\n <option [value]=\"store.id\" *ngFor=\"let store of storeListing\">{{store.storeName}}</option>\r\n </select></div>\r\n <div class=\"scheme-overview d-flex flex-column\">\r\n <div class=\"d-flex gap-2\">\r\n <div class=\"available-savings\">\r\n <div class=\"d-flex align-items-center gap-1 w-100 justify-content-between\">\r\n <h3>Available Savings</h3>\r\n <span class=\"amount_logo\">\uD83D\uDCB0</span>\r\n </div>\r\n\r\n <div class=\"amount\">{{totalSavings ? totalSavings :\r\n '0'}}</div>\r\n </div>\r\n <div class=\"active-schemes\">\r\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n <h3>Active Passbooks</h3>\r\n <div class=\"auto-pay-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\r\n </div>\r\n </div>\r\n <div class=\"scheme-count\">{{totalSchemes?.length ?\r\n totalSchemes.length : '0'}}</div>\r\n <div class=\"subtitle\">On Track</div>\r\n </div>\r\n <div class=\"active-schemes\" *ngIf=\"totalAccumulatedGold > 0\">\r\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n <h3>Accumulated Gold </h3>\r\n <div class=\"auto-pay-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/153448c1756808418216accumulated_icon.png\">\r\n </div>\r\n </div>\r\n <div class=\"scheme-count\">{{totalAccumulatedGold}} gms</div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"overAllDues?.length\">\r\n <div class=\"section d-flex-flex-column gap-2\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Due Payments</h2>\r\n </div>\r\n <div class=\"payment-list d-flex flex-column gap-2\">\r\n <ng-container *ngIf=\"overAllDues?.length; else showEmptyPayment\">\r\n <div class=\"payment-item overdue\" *ngFor=\"let payment of overAllDues\">\r\n <div class=\"payment-info\">\r\n <div class=\"payment-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/403142c1753435378127Background.svg\">\r\n <!-- <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\"\r\n *ngIf=\"!payment.overdueStatus && payment.paymentStatus === 'PAID'\"> -->\r\n </div>\r\n <div class=\"payment-details\">\r\n <h4>{{payment.schemeName}} - {{payment.emiMonthCount}}rd EMI</h4>\r\n <span>Date {{payment.dueDate ? (payment.dueDate | date:'dd-MM-yyyy') :\r\n 'N/A'}}\r\n <!-- <span *ngIf=\"payment.overdueStatus\">| Due by: {{payment.daysOverdue\r\n ? payment.daysOverdue : 0}}</span> --></span>\r\n </div>\r\n </div>\r\n <div class=\"payment-amount\">\r\n <div class=\"amount-value\">\u20B9{{payment.dueAmount ? payment.dueAmount :\r\n '0'}}\r\n </div>\r\n <div class=\"payment-status overdue-status cursor-pointer\"\r\n (click)=\"payDue(payment)\">\r\n <ng-container *ngIf=\"!payDueLoader\">Pay Now</ng-container>\r\n <ng-container *ngIf=\"payDueLoader\">Loading...</ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #showEmptyPayment>\r\n <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n <span>No Due Payments</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"section mt-3\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Your Active Passbooks</h2>\r\n </div>\r\n\r\n <div class=\"schemes-grid\">\r\n <ng-container *ngIf=\"totalSchemes && totalSchemes.length > 0; else showActiveScheme\">\r\n <div class=\"scheme-card d-flex flex-column gap-2 cursor-pointer\"\r\n *ngFor=\"let scheme of totalSchemes; let i = index\" (click)=\"viewSchemeDetails(scheme)\">\r\n <div class=\"scheme-header\">\r\n <div>\r\n <div class=\"scheme-title\">{{ scheme?.schemeName || 'N/A' }}</div>\r\n <div class=\"scheme-amount\">\u20B9{{ scheme?.installmentAmount || '0' }}/Monthly</div>\r\n </div>\r\n <div class=\"scheme-date\">\r\n <span>Enrolled: {{ scheme?.createdTimestamp ? (scheme?.createdTimestamp |\r\n date:'dd-MM-yyyy') :\r\n 'N/A' }}</span>\r\n <!-- <span>Maturity: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n 'N/A' }}</span> -->\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-status d-flex justify-content-center align-items-center\"\r\n [ngClass]=\"scheme?.passBookStatus === 'REDEEM_REQUESTED' ? 'redeem_status' : (scheme?.passBookStatus === 'ACTIVE' ? 'active-status' : 'redeem_status')\">\r\n {{\r\n scheme.passBookStatus ? scheme.passBookStatus.replaceAll('_', ' ') : 'N/A'\r\n }}\r\n </div>\r\n\r\n <div class=\"scheme-stats\">\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">{{ scheme?.totalPaidAmount || '0' }}</div>\r\n <div class=\"stat-label\">Deposited Amount</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">\r\n {{\r\n scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n (scheme?.schemePayments?.length -\r\n scheme.dueMonths) : 'N/A'\r\n }}\r\n </div>\r\n <div class=\"stat-label\">Paid Months</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">{{scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n scheme?.dueMonths : 'N/A' }}</div>\r\n <div class=\"stat-label\">Due Months</div>\r\n </div>\r\n <div class=\"stat\" *ngIf=\"scheme?.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"stat-value\">{{ scheme?.totalInvestedMetal || '0' }} gms</div>\r\n <div class=\"stat-label\">Accumulated Gold</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-footer\">\r\n <span>Maturity Date: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n 'N/A' }}</span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #showActiveScheme>\r\n <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n <span>No Active Scheme</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n <!-- <div class=\"auto-pay\">\r\n <div class=\"auto-pay-icon mobile-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/966462c1753439662355Background.png\"></div>\r\n <div class=\"auto-pay-content\">\r\n <div class=\"auto-pay-title\">Manage Auto-pay</div>\r\n <div class=\"auto-pay-desc\">Pause, resume or cancel auto payment subscription</div>\r\n </div>\r\n <button class=\"manage-btn\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/409230c1753439564830SVG.png\"> Manage</button>\r\n </div> -->\r\n </div>\r\n</ng-template>\r\n<ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #Scheme_Details>\r\n <simpo-scheme-details [schemeDetails]=\"schemeDetails\" [data]=\"data\" [metalPrice]=\"metalPrice\"\r\n (gotoSchemeOverview)=\"selectedSidePanelTab = 'Scheme Passbook'\"></simpo-scheme-details>\r\n</ng-template>\r\n<ng-template #Transactions>\r\n <simpo-passbook-transactions></simpo-passbook-transactions>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n</ngx-skeleton-loader>", styles: [".total-container{position:relative;height:auto;overflow:scroll;background:#fff!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;margin-left:20px;padding:15px;overflow-y:auto;overflow-x:hidden;border:1px solid #d3d3d324;border-radius:20px;max-height:80vh}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}.profile-box{box-shadow:#00000029 0 1px 4px}h1{font-weight:600}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.amount_logo{font-size:27px}@media screen and (max-width: 475px){.store-listing{width:35%!important}.total-container{height:100%!important}.amount_logo{font-size:27px}.amount,.scheme-count{font-size:20px!important}.title-text{font-size:24px}.schemes-grid{flex-wrap:wrap;overflow-y:scroll;height:95%}.section{height:auto}.scheme-status{white-space:nowrap}.scheme-card{width:100%}.header{flex-direction:column-reverse}.scheme-overview{width:100%!important}.scheme-overview div{flex-wrap:wrap}.available-savings h3{font-size:17px!important}.quick-actions{width:100%}.active-schemes h3{font-size:17px!important}.auto-pay-icon{width:55px!important;height:50px!important}.mobile-icon{width:30px!important}.manage-btn{width:25%!important}.tab-selected div{font-weight:600!important}.mobile-height{height:100%!important}.passbook_container{height:90%!important;overflow-x:scroll!important}.passbook_container .section{max-height:unset!important;padding:10px!important}.section-header{margin-bottom:2px!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;border:none;padding:10px 5px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.list-sec .tab-selected{border-top-left-radius:10px!important;border-bottom-left-radius:10px;border:none}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:0 10px;width:100vw;margin-bottom:20px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.profile-icon{width:70px}.text-overflow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width:1200px) and (max-width: 1330px){.profile-details{width:75%!important}}@media screen and (min-width:1200px){.manage-btn{width:10%!important}}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}.cards{box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;border-radius:12px}.cards .card-header{padding:8px}.cards .card-header .card-head .scheme-type{font-size:15px}.cards .card-body .col-4 .card-sub-text{font-size:14px}.cards .card-footer{border-top:2px dashed!important;margin:0 5px;padding:10px}.cards .card-footer span{font-size:13px}.cards .card-footer .date-text{font-weight:600}.cards .card-footer div{font-size:15px}.fs-15{font-size:14px}.w-32{width:32.5%!important}.w-40{width:40px!important}.f-18{font-size:18px}.fw-600{font-weight:600}.scheme-id{font-size:13px}.order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}.order-card:hover .arrow-icon mat-icon{transform:translate(3px)}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.cart-item-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa);width:49%}.address-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.address-card .card-body{position:relative;overflow:hidden}.address-text{color:#495057;line-height:1.4}.btn-sm{transition:all .3s ease}.small-icon{font-size:16px!important}.badge.bg-light{color:#495057!important;background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;border:1px solid #dee2e6}@media (max-width: 576px){.address-card .card-body{padding:1rem!important}.address-card{width:100%!important}.btn-sm{display:flex;justify-content:center;align-items:center;color:red!important}.btn-sm mat-icon{font-size:13px}.btn-sm{width:100%;margin-bottom:.25rem}}.profile-box{transition:all .3s ease;position:relative}.profile-box:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001f!important}.profile-icon:hover{transform:scale(1.05);box-shadow:0 6px 20px #00000026!important}.contact-item:hover{color:#007bff!important}.tab-item:hover{background:linear-gradient(90deg,#007bff14,#007bff08)!important;transform:translate(4px)}.tab-item:hover .tab-hover-bg{opacity:1}.tab-item:hover img{transform:scale(1.1)}.tab-selected{border-left:4px solid;font-weight:600!important;border-bottom:unset!important}.tab-selected .tab-label{font-weight:600!important}.edit-btn:hover{background:linear-gradient(135deg,#007bff0d,#007bff1a)!important;transform:translateY(-1px);box-shadow:0 4px 12px #007bff33}.logout-btn:hover{transform:translateY(-1px);box-shadow:0 4px 15px #00000040!important;filter:brightness(1.05)}.tabs-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.tabs-container::-webkit-scrollbar{width:4px}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-box{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.profile-box{width:100%!important}.profile-header{flex-direction:column;height:auto!important;text-align:center}.action-buttons{flex-direction:column}}.scheme-overview{gap:20px;width:100%}.available-savings{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:20px;border-radius:12px;position:relative;flex:1}.available-savings .amount{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.available-savings h3{font-size:14px;color:#856404;margin-bottom:8px;font-weight:500}.subtitle{font-size:12px;color:#666}.active-schemes{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;position:relative;flex:1}.active-schemes h3{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.scheme-count{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e9ecef;max-height:40vh;overflow-x:scroll}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:18px;font-weight:600}.view-all{color:#6c5ce7;font-size:16px}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.overdue{background:#fef2f2;border:1px solid #FECACA}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.upcoming{background:#f8f9fa;color:#666}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.payment-status{font-size:12px;padding:4px 8px;border-radius:4px;color:#fff;white-space:nowrap}.overdue-status{background:#dc3545}.upcoming-status{background:#6c757d}.schemes-grid{display:flex;gap:10px;overflow-x:scroll}.scheme-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e9ecef;position:relative;min-width:34vw}.scheme-header{display:flex;justify-content:space-between;align-items:flex-start}.scheme-title{font-size:16px;font-weight:600;margin-bottom:4px}.scheme-amount{font-size:12px;color:#666}.scheme-date{font-size:12px;color:#666;display:flex;flex-direction:column;gap:10px}.scheme-status{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;text-transform:uppercase;min-width:15%;max-width:fit-content}.redeem_status{background:orange;color:#fff}.active-status{background:#22c55e;color:#fff}.scheme-stats{display:flex;justify-content:space-between}.stat{text-align:center}.stat-value{font-size:20px;font-weight:700;color:#333}.stat-label{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px}.scheme-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.price-notice{background:#fce7f3;color:#be185d;padding:8px 12px;border-radius:6px;font-size:11px}.auto-pay{background:#fff3cd;padding:16px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-top:20px}.auto-pay-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.auto-pay-icon img{width:100%}.auto-pay-content{flex:1}.auto-pay-title{font-size:14px;font-weight:600;margin-bottom:4px}.auto-pay-desc{font-size:12px;color:#666}.manage-btn{background:none;border:1px solid #dee2e6;padding:6px 0;border-radius:4px;font-size:13px!important;cursor:pointer;display:flex;justify-content:space-evenly}.store-listing{font-size:14px;width:20%;height:30px;margin-bottom:13px;border:1px solid #e9ecef;border-radius:5px;outline:none;padding-left:5px;cursor:pointer}.fs-14{font-size:14px}.fs-12{font-size:12px}\n"] }]
|
|
21770
21981
|
}], ctorParameters: () => [{ type: i2$2.Router }, { type: EventsService }, { type: RestService }, { type: StorageServiceService }, { type: CartService }, { type: i1$1.MatDialog }, { type: i8$3.MatBottomSheet }, { type: i2$3.CookieService }, { type: i6$1.MessageService }, { type: i1$2.DomSanitizer }, { type: i2$2.ActivatedRoute }], propDecorators: { showChargesTemplate: [{
|
|
21771
21982
|
type: ViewChild,
|
|
21772
21983
|
args: ['showCharges', { static: true }]
|
|
@@ -22853,7 +23064,7 @@ class FeaturedCollectionComponent extends BaseSection {
|
|
|
22853
23064
|
return this.styles?.layout?.align || '';
|
|
22854
23065
|
}
|
|
22855
23066
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeaturedCollectionComponent, deps: [{ token: i2$2.Router }, { token: RestService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
22856
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FeaturedCollectionComponent, isStandalone: true, selector: "simpo-featured-collection", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "categoryParent", first: true, predicate: ["categoryParent1"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"container-fluid total-container p-0\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\" class=\"border-radius-unset\">\r\n <div [id]=\"data?.id\" #mainContainer [simpoAnimation]=\"styles?.animation\" [simpoBackground]=\"styles?.background\"\r\n [simpoCorner]=\"styles?.corners\" class=\"d-flex w-100\">\r\n <div class=\"d-flex flex-column w-100\" [simpoOverlay]=\"styles?.background\" [simpoCorner]=\"styles?.corners\"\r\n [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoAnimation]=\"styles?.animation\">\r\n <div *ngFor=\"let item of content?.inputText\" class=\"text-container\">\r\n <!-- <div class = \"content-side\"[innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\r\n <ng-container *ngIf=\"edit || item.value\">\r\n <div class=\"pt-3 w-100\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n <!-- </div> -->\r\n </div>\r\n <ng-container *ngIf=\"styles?.componentStyle === 'Style1';else categoryStyle2\">\r\n <div class=\"category-parent\" [ngClass]=\"{'flex-wrap': getDirection == 'COLUMN'}\"\r\n [simpoContainerAlignment]=\"styles?.layout\" [id]=\"data?.id\"\r\n [style.justifyContent]=\"!isMobile ? getJustifyContent() : ''\" #categoryParent1>\r\n <div\r\n *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\r\n (click)=\"redirectToListPage(data)\" class=\"d-flex flex-column align-items-center w-fit-content\"\r\n [ngClass]=\"{ 'w-48 d-flex flex-column align-items-center' : isMobile}\">\r\n <img [style.borderRadius.px]=\"(styles?.border?.radius ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\" loading=\"lazy\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n class=\"category-image\" [ngClass]=\"{'category-new-image' : isMobile && getDirection == 'COLUMN'}\">\r\n <div *ngIf=\"content?.display?.showHeading\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\">{{data.categoryName}}</div>\r\n <!-- class=\"category-name body-large\" -->\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #categoryStyle2>\r\n <div class=\"w-100
|
|
23067
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FeaturedCollectionComponent, isStandalone: true, selector: "simpo-featured-collection", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "categoryParent", first: true, predicate: ["categoryParent1"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"container-fluid total-container p-0\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\" class=\"border-radius-unset\">\r\n <div [id]=\"data?.id\" #mainContainer [simpoAnimation]=\"styles?.animation\" [simpoBackground]=\"styles?.background\"\r\n [simpoCorner]=\"styles?.corners\" class=\"d-flex w-100\">\r\n <div class=\"d-flex flex-column w-100\" [simpoOverlay]=\"styles?.background\" [simpoCorner]=\"styles?.corners\"\r\n [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoAnimation]=\"styles?.animation\">\r\n <div *ngFor=\"let item of content?.inputText\" class=\"text-container\">\r\n <!-- <div class = \"content-side\"[innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\r\n <ng-container *ngIf=\"edit || item.value\">\r\n <div class=\"pt-3 w-100\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n <!-- </div> -->\r\n </div>\r\n <ng-container *ngIf=\"styles?.componentStyle === 'Style1';else categoryStyle2\">\r\n <div class=\"category-parent\" [ngClass]=\"{'flex-wrap': getDirection == 'COLUMN'}\"\r\n [simpoContainerAlignment]=\"styles?.layout\" [id]=\"data?.id\"\r\n [style.justifyContent]=\"!isMobile ? getJustifyContent() : ''\" #categoryParent1>\r\n <div\r\n *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\r\n (click)=\"redirectToListPage(data)\" class=\"d-flex flex-column align-items-center w-fit-content\"\r\n [ngClass]=\"{ 'w-48 d-flex flex-column align-items-center' : isMobile}\">\r\n <img [style.borderRadius.px]=\"(styles?.border?.radius ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\" loading=\"lazy\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n class=\"category-image\" [ngClass]=\"{'category-new-image' : isMobile && getDirection == 'COLUMN'}\">\r\n <div *ngIf=\"content?.display?.showHeading\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\">{{data.categoryName}}</div>\r\n <!-- class=\"category-name body-large\" -->\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #categoryStyle2>\r\n <div class=\"w-100\">\r\n <simpo-categories-with-image-background-columns [responseData]=\"responseData\" [styles]=\"styles\"\r\n [content]=\"content\"></simpo-categories-with-image-background-columns>\r\n </div>\r\n </ng-template>\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 <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n </section>\r\n</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>", styles: [".mt-15{margin-top:15px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.text-container{min-width:100px}.w-fit-content{width:fit-content!important}.total-container{height:fit-content!important;position:relative;display:block!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.category-parent{padding:25px 0% 2%;display:flex;width:100%;max-width:100%;gap:25px;overflow-x:scroll;font-size:16px!important;cursor:pointer}.hovering-effect:hover{font-size:22px!important;transition:.3s ease-in-out}.category-image{display:flex;flex-wrap:wrap;margin-bottom:15px;transition-duration:.3s;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out}.category-image:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}.border-radius-unset{border-radius:unset!important}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important;padding-top:5px!important;padding-bottom:5px!important}.w-48{width:48%!important}.category-new-image{height:150px!important;width:100%!important}.header{gap:7px}.category-parent{gap:8px;margin-top:15px;padding-left:0!important;padding-right:0!important;padding-top:0!important}.category-parent::-webkit-scrollbar{display:flex!important;height:3px}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\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.SlicePipe, name: "slice" }, { 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: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type:
|
|
22857
23068
|
//directive
|
|
22858
23069
|
AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { 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: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "component", type: CategoriesWithImageBackgroundColumnsComponent, selector: "simpo-categories-with-image-background-columns", inputs: ["responseData", "styles", "content"] }] }); }
|
|
22859
23070
|
}
|
|
@@ -22873,13 +23084,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
22873
23084
|
CornerDirective,
|
|
22874
23085
|
HoverDirective,
|
|
22875
23086
|
OverlayDirective,
|
|
22876
|
-
|
|
22877
|
-
ColorDirective,
|
|
22878
|
-
SanitizeHtmlPipe, SvgDividerComponent,
|
|
23087
|
+
SvgDividerComponent,
|
|
22879
23088
|
TextEditorComponent,
|
|
22880
23089
|
SpacingAroundDirective,
|
|
22881
23090
|
CategoriesWithImageBackgroundColumnsComponent
|
|
22882
|
-
], template: "<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"container-fluid total-container p-0\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\" class=\"border-radius-unset\">\r\n <div [id]=\"data?.id\" #mainContainer [simpoAnimation]=\"styles?.animation\" [simpoBackground]=\"styles?.background\"\r\n [simpoCorner]=\"styles?.corners\" class=\"d-flex w-100\">\r\n <div class=\"d-flex flex-column w-100\" [simpoOverlay]=\"styles?.background\" [simpoCorner]=\"styles?.corners\"\r\n [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoAnimation]=\"styles?.animation\">\r\n <div *ngFor=\"let item of content?.inputText\" class=\"text-container\">\r\n <!-- <div class = \"content-side\"[innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\r\n <ng-container *ngIf=\"edit || item.value\">\r\n <div class=\"pt-3 w-100\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n <!-- </div> -->\r\n </div>\r\n <ng-container *ngIf=\"styles?.componentStyle === 'Style1';else categoryStyle2\">\r\n <div class=\"category-parent\" [ngClass]=\"{'flex-wrap': getDirection == 'COLUMN'}\"\r\n [simpoContainerAlignment]=\"styles?.layout\" [id]=\"data?.id\"\r\n [style.justifyContent]=\"!isMobile ? getJustifyContent() : ''\" #categoryParent1>\r\n <div\r\n *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\r\n (click)=\"redirectToListPage(data)\" class=\"d-flex flex-column align-items-center w-fit-content\"\r\n [ngClass]=\"{ 'w-48 d-flex flex-column align-items-center' : isMobile}\">\r\n <img [style.borderRadius.px]=\"(styles?.border?.radius ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\" loading=\"lazy\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n class=\"category-image\" [ngClass]=\"{'category-new-image' : isMobile && getDirection == 'COLUMN'}\">\r\n <div *ngIf=\"content?.display?.showHeading\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\">{{data.categoryName}}</div>\r\n <!-- class=\"category-name body-large\" -->\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #categoryStyle2>\r\n <div class=\"w-100
|
|
23091
|
+
], template: "<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"container-fluid total-container p-0\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\" class=\"border-radius-unset\">\r\n <div [id]=\"data?.id\" #mainContainer [simpoAnimation]=\"styles?.animation\" [simpoBackground]=\"styles?.background\"\r\n [simpoCorner]=\"styles?.corners\" class=\"d-flex w-100\">\r\n <div class=\"d-flex flex-column w-100\" [simpoOverlay]=\"styles?.background\" [simpoCorner]=\"styles?.corners\"\r\n [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoAnimation]=\"styles?.animation\">\r\n <div *ngFor=\"let item of content?.inputText\" class=\"text-container\">\r\n <!-- <div class = \"content-side\"[innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\r\n <ng-container *ngIf=\"edit || item.value\">\r\n <div class=\"pt-3 w-100\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n <!-- </div> -->\r\n </div>\r\n <ng-container *ngIf=\"styles?.componentStyle === 'Style1';else categoryStyle2\">\r\n <div class=\"category-parent\" [ngClass]=\"{'flex-wrap': getDirection == 'COLUMN'}\"\r\n [simpoContainerAlignment]=\"styles?.layout\" [id]=\"data?.id\"\r\n [style.justifyContent]=\"!isMobile ? getJustifyContent() : ''\" #categoryParent1>\r\n <div\r\n *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\r\n (click)=\"redirectToListPage(data)\" class=\"d-flex flex-column align-items-center w-fit-content\"\r\n [ngClass]=\"{ 'w-48 d-flex flex-column align-items-center' : isMobile}\">\r\n <img [style.borderRadius.px]=\"(styles?.border?.radius ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\" loading=\"lazy\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n class=\"category-image\" [ngClass]=\"{'category-new-image' : isMobile && getDirection == 'COLUMN'}\">\r\n <div *ngIf=\"content?.display?.showHeading\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\">{{data.categoryName}}</div>\r\n <!-- class=\"category-name body-large\" -->\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #categoryStyle2>\r\n <div class=\"w-100\">\r\n <simpo-categories-with-image-background-columns [responseData]=\"responseData\" [styles]=\"styles\"\r\n [content]=\"content\"></simpo-categories-with-image-background-columns>\r\n </div>\r\n </ng-template>\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 <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n </section>\r\n</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>", styles: [".mt-15{margin-top:15px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.text-container{min-width:100px}.w-fit-content{width:fit-content!important}.total-container{height:fit-content!important;position:relative;display:block!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.category-parent{padding:25px 0% 2%;display:flex;width:100%;max-width:100%;gap:25px;overflow-x:scroll;font-size:16px!important;cursor:pointer}.hovering-effect:hover{font-size:22px!important;transition:.3s ease-in-out}.category-image{display:flex;flex-wrap:wrap;margin-bottom:15px;transition-duration:.3s;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out}.category-image:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}.border-radius-unset{border-radius:unset!important}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important;padding-top:5px!important;padding-bottom:5px!important}.w-48{width:48%!important}.category-new-image{height:150px!important;width:100%!important}.header{gap:7px}.category-parent{gap:8px;margin-top:15px;padding-left:0!important;padding-right:0!important;padding-top:0!important}.category-parent::-webkit-scrollbar{display:flex!important;height:3px}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"] }]
|
|
22883
23092
|
}], ctorParameters: () => [{ type: i2$2.Router }, { type: RestService }, { type: EventsService }], propDecorators: { categoryParent: [{
|
|
22884
23093
|
type: ViewChild,
|
|
22885
23094
|
args: ['categoryParent1', { static: false }]
|
|
@@ -24525,8 +24734,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
24525
24734
|
args: ["window: resize", ["$event"]]
|
|
24526
24735
|
}] } });
|
|
24527
24736
|
|
|
24528
|
-
class ReferEarnComponent {
|
|
24737
|
+
class ReferEarnComponent extends BaseSection {
|
|
24529
24738
|
constructor(storageService, router) {
|
|
24739
|
+
super();
|
|
24530
24740
|
this.storageService = storageService;
|
|
24531
24741
|
this.router = router;
|
|
24532
24742
|
this.userDetail = this.storageService.getUser();
|
|
@@ -24559,7 +24769,7 @@ class ReferEarnComponent {
|
|
|
24559
24769
|
return window.location.href;
|
|
24560
24770
|
}
|
|
24561
24771
|
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 }); }
|
|
24562
|
-
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:
|
|
24772
|
+
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:
|
|
24563
24773
|
//DIRECTIVE
|
|
24564
24774
|
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"] }] }); }
|
|
24565
24775
|
}
|
|
@@ -24579,9 +24789,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
24579
24789
|
ToastModule,
|
|
24580
24790
|
PanelModule,
|
|
24581
24791
|
SpacingHorizontalDirective
|
|
24582
|
-
], 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"] }]
|
|
24792
|
+
], 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"] }]
|
|
24583
24793
|
}], ctorParameters: () => [{ type: StorageServiceService }, { type: i2$2.Router }], propDecorators: { data: [{
|
|
24584
24794
|
type: Input
|
|
24795
|
+
}], edit: [{
|
|
24796
|
+
type: Input
|
|
24797
|
+
}], delete: [{
|
|
24798
|
+
type: Input
|
|
24799
|
+
}], index: [{
|
|
24800
|
+
type: Input
|
|
24585
24801
|
}] } });
|
|
24586
24802
|
|
|
24587
24803
|
class CountdownBannerComponent extends BaseSection {
|
|
@@ -25084,7 +25300,7 @@ class ProductInfoSectionComponent extends BaseSection {
|
|
|
25084
25300
|
});
|
|
25085
25301
|
}
|
|
25086
25302
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductInfoSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
25087
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductInfoSectionComponent, isStandalone: true, selector: "simpo-product-info-section", inputs: { data: "data", index: "index", edit: "edit", nextComponentColor: "nextComponentColor", delete: "delete", customClass: "customClass" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <div class=\"chemical-product-details\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\r\n [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"styles?.layout\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoOverlay]=\"styles?.background\">\r\n <div class=\"product-container d-flex gap-5 w-100 flex-lg-row align-items-center\" [id]=\"data?.id\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\">\r\n <!-- [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\" -->\r\n\r\n <!-- Left: Structure Image -->\r\n <div class=\"w-50\" *ngIf=\"content?.image?.showImage\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg h-100\"\r\n loading=\"lazy\" />\r\n </div>\r\n <!-- Right: Details -->\r\n <div [ngClass]=\"{'w-50' :content?.image?.showImage,'w-100':!content?.image?.showImage }\"\r\n class=\"overflow-y-auto\">\r\n <div class=\"w-100 mb-3\">\r\n <simpo-text-editor [(value)]=\"content.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"table-container\">\r\n\r\n <!-- \u2705 HEADER (ONLY ONCE) -->\r\n <div class=\"d-flex table-header m-0 border-0 flex-nowrap\"\r\n [ngClass]=\"{'w-fit-content' : content?.image?.showImage , 'w-100': !content?.image?.showImage}\"\r\n [ngStyle]=\"{'background':accentBackground}\">\r\n <div class=\"d-flex align-items-center justify-content-center\"\r\n *ngFor=\"let col of content?.productTableDataList[0];let i = index\"\r\n [ngStyle]=\"{'border-right': content?.columnCellBorder && i != content?.productTableDataList[0].length - 1 ? '1px solid lightgrey' : 'none'}\"\r\n [ngClass]=\"{'cell' : !content?.image?.showImage,'image-cell': content?.image?.showImage}\"\r\n [style.color]=\"fontColor\">\r\n <simpo-text-editor [(value)]=\"col.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n\r\n <!-- \u2705 ALL ROWS (DYNAMIC) -->\r\n <div class=\"d-flex m-0 border-grey flex-nowrap\"\r\n [ngClass]=\"{'w-fit-content' : content?.image?.showImage , 'w-100': !content?.image?.showImage}\"\r\n *ngFor=\"let row of content?.productTableDataList; let rowIndex = index\">\r\n <ng-container *ngIf=\"rowIndex !== 0\">\r\n <div class=\"d-flex align-items-center justify-content-center\"\r\n *ngFor=\"let col of row; let colIndex = index\" contenteditable=\"true\"\r\n [ngStyle]=\"{'border-right': content?.columnCellBorder ? '1px solid lightgrey' : 'none'}\"\r\n [ngClass]=\"{'cell' : !content?.image?.showImage,'image-cell': content?.image?.showImage}\"\r\n [style.color]=\"fontColor\">\r\n <simpo-text-editor [(value)]=\"col.value\" [editable]=\"edit || false\"\r\n class=\"w-100\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"mt-3 position-absolute button-container\"\r\n [style.width]=\"content?.image?.showImage ? '47%' : '97%'\">\r\n <app-button-element [buttonContent]=\"data?.action?.buttons[0]?.content\"\r\n [buttonStyle]=\"data?.action?.buttons[0]?.styles\" [buttonId]=\"data?.action?.buttons[0]?.id\"\r\n [sectionId]=\"data?.id\" [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [isFullWidth]=\"false\"></app-button-element>\r\n </div>\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</section>", styles: [".chemical-product-details{font-family:Arial,sans-serif;padding:20px}.chemical-product-details .container{display:flex;gap:40px;align-items:flex-start}.w-50{width:50%!important}.chemical-product-details .left{flex:1;display:flex;justify-content:center;align-items:center}.chemical-product-details .left img{max-width:100%;height:auto}.chemical-product-details .right{flex:1}.chemical-product-details .right h2{font-size:28px;color:#2c5aa0;margin-bottom:20px}.info-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #ddd;font-size:14px}.info-row span:first-child{color:#555}.info-row span:last-child{color:#000;font-weight:500}.total-container{height:auto;position:relative}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.table-container{display:flex;flex-direction:column;height:82%;overflow-y:scroll}.button-container{bottom:4%}.border-grey{border-bottom:1px solid #eee;border-right:1px solid lightgrey;border-left:1px solid lightgrey}.image-cell{width:140px;padding:5px 0;outline:none}.row{display:flex}.w-fit-content{width:fit-content!important}.overflow-y-auto{overflow-y:auto!important}.cell{flex:1 1 0;min-width:117px;padding:10px 0;outline:none}.table-header{font-weight:700;border-top-right-radius:7px;border-top-left-radius:7px}\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: 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: 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: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }] }); }
|
|
25303
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductInfoSectionComponent, isStandalone: true, selector: "simpo-product-info-section", inputs: { data: "data", index: "index", edit: "edit", nextComponentColor: "nextComponentColor", delete: "delete", customClass: "customClass" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <div class=\"chemical-product-details\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\r\n [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"styles?.layout\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoOverlay]=\"styles?.background\">\r\n <div class=\"product-container d-flex gap-5 w-100\" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n\r\n <!-- Left: Structure Image -->\r\n <div class=\"w-50\" *ngIf=\"content?.image?.showImage\" [simpoContainerAlignment]=\"stylesLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg h-100\"\r\n loading=\"lazy\" />\r\n </div>\r\n <!-- Right: Details -->\r\n <div [ngClass]=\"{'w-50' :content?.image?.showImage,'w-100':!content?.image?.showImage }\"\r\n class=\"overflow-y-auto\">\r\n <div class=\"w-100 mb-3\">\r\n <simpo-text-editor [(value)]=\"content.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"table-container\">\r\n\r\n <!-- \u2705 HEADER (ONLY ONCE) -->\r\n <div class=\"d-flex table-header m-0 border-0 flex-nowrap\"\r\n [ngClass]=\"{'w-fit-content' : content?.image?.showImage , 'w-100': !content?.image?.showImage}\"\r\n [ngStyle]=\"{'background':accentBackground}\">\r\n <div class=\"d-flex align-items-center justify-content-center\"\r\n *ngFor=\"let col of content?.productTableDataList[0];let i = index\"\r\n [ngStyle]=\"{'border-right': content?.columnCellBorder && i != content?.productTableDataList[0].length - 1 ? '1px solid lightgrey' : 'none'}\"\r\n [ngClass]=\"{'cell' : !content?.image?.showImage,'image-cell': content?.image?.showImage}\"\r\n [style.color]=\"fontColor\">\r\n <simpo-text-editor [(value)]=\"col.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n\r\n <!-- \u2705 ALL ROWS (DYNAMIC) -->\r\n <div class=\"d-flex m-0 border-grey flex-nowrap\"\r\n [ngClass]=\"{'w-fit-content' : content?.image?.showImage , 'w-100': !content?.image?.showImage}\"\r\n *ngFor=\"let row of content?.productTableDataList; let rowIndex = index\">\r\n <ng-container *ngIf=\"rowIndex !== 0\">\r\n <div class=\"d-flex align-items-center justify-content-center\"\r\n *ngFor=\"let col of row; let colIndex = index\" contenteditable=\"true\"\r\n [ngStyle]=\"{'border-right': content?.columnCellBorder ? '1px solid lightgrey' : 'none'}\"\r\n [ngClass]=\"{'cell' : !content?.image?.showImage,'image-cell': content?.image?.showImage}\"\r\n [style.color]=\"fontColor\">\r\n <simpo-text-editor [(value)]=\"col.value\" [editable]=\"edit || false\"\r\n class=\"w-100\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"mt-3 position-absolute button-container\"\r\n [style.width]=\"content?.image?.showImage ? '47%' : '97%'\">\r\n <app-button-element [buttonContent]=\"data?.action?.buttons[0]?.content\"\r\n [buttonStyle]=\"data?.action?.buttons[0]?.styles\" [buttonId]=\"data?.action?.buttons[0]?.id\"\r\n [sectionId]=\"data?.id\" [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [isFullWidth]=\"false\"></app-button-element>\r\n </div>\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</section>", styles: [".chemical-product-details{font-family:Arial,sans-serif;padding:20px;max-height:500px}.chemical-product-details .container{display:flex;gap:40px;align-items:flex-start}.product-container{max-height:410px!important}.w-50{width:50%!important}.chemical-product-details .left{flex:1;display:flex;justify-content:center;align-items:center}.chemical-product-details .left img{max-width:100%;height:auto}.chemical-product-details .right{flex:1}.chemical-product-details .right h2{font-size:28px;color:#2c5aa0;margin-bottom:20px}.info-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #ddd;font-size:14px}.info-row span:first-child{color:#555}.info-row span:last-child{color:#000;font-weight:500}.total-container{height:auto;position:relative}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.table-container{display:flex;flex-direction:column;height:82%;overflow-y:scroll}.button-container{bottom:4%}.border-grey{border-bottom:1px solid #eee;border-right:1px solid lightgrey;border-left:1px solid lightgrey}.image-cell{width:140px;padding:5px 0;outline:none}.row{display:flex}.w-fit-content{width:fit-content!important}.overflow-y-auto{overflow-y:auto!important}.cell{flex:1 1 0;min-width:117px;padding:10px 0;outline:none}.table-header{font-weight:700;border-top-right-radius:7px;border-top-left-radius:7px}\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: 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: 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: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }] }); }
|
|
25088
25304
|
}
|
|
25089
25305
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductInfoSectionComponent, decorators: [{
|
|
25090
25306
|
type: Component,
|
|
@@ -25105,7 +25321,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
25105
25321
|
PositionLayoutDirectiveDirective,
|
|
25106
25322
|
AnimationDirective,
|
|
25107
25323
|
SimpoContainerAligment
|
|
25108
|
-
], template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <div class=\"chemical-product-details\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\r\n [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"styles?.layout\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoOverlay]=\"styles?.background\">\r\n <div class=\"product-container d-flex gap-5 w-100
|
|
25324
|
+
], template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <div class=\"chemical-product-details\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\r\n [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"styles?.layout\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoOverlay]=\"styles?.background\">\r\n <div class=\"product-container d-flex gap-5 w-100\" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n\r\n <!-- Left: Structure Image -->\r\n <div class=\"w-50\" *ngIf=\"content?.image?.showImage\" [simpoContainerAlignment]=\"stylesLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg h-100\"\r\n loading=\"lazy\" />\r\n </div>\r\n <!-- Right: Details -->\r\n <div [ngClass]=\"{'w-50' :content?.image?.showImage,'w-100':!content?.image?.showImage }\"\r\n class=\"overflow-y-auto\">\r\n <div class=\"w-100 mb-3\">\r\n <simpo-text-editor [(value)]=\"content.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"table-container\">\r\n\r\n <!-- \u2705 HEADER (ONLY ONCE) -->\r\n <div class=\"d-flex table-header m-0 border-0 flex-nowrap\"\r\n [ngClass]=\"{'w-fit-content' : content?.image?.showImage , 'w-100': !content?.image?.showImage}\"\r\n [ngStyle]=\"{'background':accentBackground}\">\r\n <div class=\"d-flex align-items-center justify-content-center\"\r\n *ngFor=\"let col of content?.productTableDataList[0];let i = index\"\r\n [ngStyle]=\"{'border-right': content?.columnCellBorder && i != content?.productTableDataList[0].length - 1 ? '1px solid lightgrey' : 'none'}\"\r\n [ngClass]=\"{'cell' : !content?.image?.showImage,'image-cell': content?.image?.showImage}\"\r\n [style.color]=\"fontColor\">\r\n <simpo-text-editor [(value)]=\"col.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n\r\n <!-- \u2705 ALL ROWS (DYNAMIC) -->\r\n <div class=\"d-flex m-0 border-grey flex-nowrap\"\r\n [ngClass]=\"{'w-fit-content' : content?.image?.showImage , 'w-100': !content?.image?.showImage}\"\r\n *ngFor=\"let row of content?.productTableDataList; let rowIndex = index\">\r\n <ng-container *ngIf=\"rowIndex !== 0\">\r\n <div class=\"d-flex align-items-center justify-content-center\"\r\n *ngFor=\"let col of row; let colIndex = index\" contenteditable=\"true\"\r\n [ngStyle]=\"{'border-right': content?.columnCellBorder ? '1px solid lightgrey' : 'none'}\"\r\n [ngClass]=\"{'cell' : !content?.image?.showImage,'image-cell': content?.image?.showImage}\"\r\n [style.color]=\"fontColor\">\r\n <simpo-text-editor [(value)]=\"col.value\" [editable]=\"edit || false\"\r\n class=\"w-100\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"mt-3 position-absolute button-container\"\r\n [style.width]=\"content?.image?.showImage ? '47%' : '97%'\">\r\n <app-button-element [buttonContent]=\"data?.action?.buttons[0]?.content\"\r\n [buttonStyle]=\"data?.action?.buttons[0]?.styles\" [buttonId]=\"data?.action?.buttons[0]?.id\"\r\n [sectionId]=\"data?.id\" [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [isFullWidth]=\"false\"></app-button-element>\r\n </div>\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</section>", styles: [".chemical-product-details{font-family:Arial,sans-serif;padding:20px;max-height:500px}.chemical-product-details .container{display:flex;gap:40px;align-items:flex-start}.product-container{max-height:410px!important}.w-50{width:50%!important}.chemical-product-details .left{flex:1;display:flex;justify-content:center;align-items:center}.chemical-product-details .left img{max-width:100%;height:auto}.chemical-product-details .right{flex:1}.chemical-product-details .right h2{font-size:28px;color:#2c5aa0;margin-bottom:20px}.info-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #ddd;font-size:14px}.info-row span:first-child{color:#555}.info-row span:last-child{color:#000;font-weight:500}.total-container{height:auto;position:relative}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.table-container{display:flex;flex-direction:column;height:82%;overflow-y:scroll}.button-container{bottom:4%}.border-grey{border-bottom:1px solid #eee;border-right:1px solid lightgrey;border-left:1px solid lightgrey}.image-cell{width:140px;padding:5px 0;outline:none}.row{display:flex}.w-fit-content{width:fit-content!important}.overflow-y-auto{overflow-y:auto!important}.cell{flex:1 1 0;min-width:117px;padding:10px 0;outline:none}.table-header{font-weight:700;border-top-right-radius:7px;border-top-left-radius:7px}\n"] }]
|
|
25109
25325
|
}], ctorParameters: () => [], propDecorators: { data: [{
|
|
25110
25326
|
type: Input
|
|
25111
25327
|
}], index: [{
|