simpo-component-library 3.6.153 → 3.6.154
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/user-profile/user-profile.component.mjs +3 -3
- package/fesm2022/simpo-component-library.mjs +2 -2
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/package.json +1 -1
- package/simpo-component-library-3.6.154.tgz +0 -0
- package/simpo-component-library-3.6.153.tgz +0 -0
|
@@ -16788,7 +16788,7 @@ class UserProfileComponent extends BaseSection {
|
|
|
16788
16788
|
return BUSINESS_CONSTANTS.CURRENCY;
|
|
16789
16789
|
}
|
|
16790
16790
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserProfileComponent, deps: [{ token: i2$3.Router }, { token: EventsService }, { token: RestService }, { token: StorageServiceService }, { token: CartService }, { token: i2$1.MatDialog }, { token: i8$3.MatBottomSheet }, { token: i2$4.CookieService }, { token: i4.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16791
|
-
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], 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\"\r\n [ngStyle]=\"{'height': isMobile ? '100vh' : '80vh', '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>{{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>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <div class=\"w-100 position-relative\" style=\"height: 80vh;\">\r\n <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\">\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 [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>\r\n </div>\r\n </ng-container>\r\n\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\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 #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-3\">\r\n <div class=\"order-number\">\r\n <h4 class=\"mb-0 fw-semibold\">{{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 <!-- 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-3\">\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}}\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 w-50\">\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 class=\"col-auto text-end\">\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-outline-danger btn-sm delete-btn\"\r\n (click)=\"deleteFromWhislist(item)\" 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-outline-danger btn-sm w-100\"\r\n (click)=\"deleteFromWhislist(item)\">\r\n <mat-icon class=\"small-icon me-1\">delete</mat-icon>\r\n Remove\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\" *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\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;margin-right:20px;padding:15px;overflow-y:auto;border:1px solid #d3d3d324;border-radius:20px}.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}@media screen and (max-width: 475px){.title-text{font-size:24px}.tab-selected div{font-weight:600!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;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.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: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}@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}}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.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}.d-flex.justify-content-end{flex-direction:column!important}.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}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$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: i17.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"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }] }); }
|
|
16791
|
+
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], 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\"\r\n [ngStyle]=\"{'height': isMobile ? '100vh' : '80vh', '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>{{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>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <div class=\"w-100 position-relative\" style=\"height: 80vh;\">\r\n <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\">\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 [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>\r\n </div>\r\n </ng-container>\r\n\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\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 #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-3\">\r\n <div class=\"order-number\">\r\n <h4 class=\"mb-0 fw-semibold\">{{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 <!-- 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-3\">\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}}\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 w-50\">\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 class=\"col-auto text-end d-flex justify-content-between align-items-center\">\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\"\r\n (click)=\"deleteFromWhislist(item)\" 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\"\r\n (click)=\"deleteFromWhislist(item)\">\r\n <mat-icon class=\"small-icon me-1\">delete</mat-icon>\r\n Remove\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\" *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\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;margin-right:20px;padding:15px;overflow-y:auto;border:1px solid #d3d3d324;border-radius:20px}.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}@media screen and (max-width: 475px){.title-text{font-size:24px}.tab-selected div{font-weight:600!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;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.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: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}@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}}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.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}.d-flex.justify-content-end{flex-direction:column!important}.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}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$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: i17.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"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }] }); }
|
|
16792
16792
|
}
|
|
16793
16793
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserProfileComponent, decorators: [{
|
|
16794
16794
|
type: Component,
|
|
@@ -16812,7 +16812,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
16812
16812
|
ColorDirective,
|
|
16813
16813
|
TextEditorComponent,
|
|
16814
16814
|
ImageEditorDirective
|
|
16815
|
-
], 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\"\r\n [ngStyle]=\"{'height': isMobile ? '100vh' : '80vh', '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>{{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>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <div class=\"w-100 position-relative\" style=\"height: 80vh;\">\r\n <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\">\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 [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>\r\n </div>\r\n </ng-container>\r\n\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\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 #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-3\">\r\n <div class=\"order-number\">\r\n <h4 class=\"mb-0 fw-semibold\">{{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 <!-- 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-3\">\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}}\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 w-50\">\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 class=\"col-auto text-end\">\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-outline-danger btn-sm delete-btn\"\r\n (click)=\"deleteFromWhislist(item)\" 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-outline-danger btn-sm w-100\"\r\n (click)=\"deleteFromWhislist(item)\">\r\n <mat-icon class=\"small-icon me-1\">delete</mat-icon>\r\n Remove\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\" *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\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;margin-right:20px;padding:15px;overflow-y:auto;border:1px solid #d3d3d324;border-radius:20px}.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}@media screen and (max-width: 475px){.title-text{font-size:24px}.tab-selected div{font-weight:600!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;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.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: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}@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}}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.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}.d-flex.justify-content-end{flex-direction:column!important}.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}}\n"] }]
|
|
16815
|
+
], 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\"\r\n [ngStyle]=\"{'height': isMobile ? '100vh' : '80vh', '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>{{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>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <div class=\"w-100 position-relative\" style=\"height: 80vh;\">\r\n <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\">\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 [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>\r\n </div>\r\n </ng-container>\r\n\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\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 #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-3\">\r\n <div class=\"order-number\">\r\n <h4 class=\"mb-0 fw-semibold\">{{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 <!-- 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-3\">\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}}\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 w-50\">\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 class=\"col-auto text-end d-flex justify-content-between align-items-center\">\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\"\r\n (click)=\"deleteFromWhislist(item)\" 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\"\r\n (click)=\"deleteFromWhislist(item)\">\r\n <mat-icon class=\"small-icon me-1\">delete</mat-icon>\r\n Remove\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\" *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\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;margin-right:20px;padding:15px;overflow-y:auto;border:1px solid #d3d3d324;border-radius:20px}.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}@media screen and (max-width: 475px){.title-text{font-size:24px}.tab-selected div{font-weight:600!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;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.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: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}@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}}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.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}.d-flex.justify-content-end{flex-direction:column!important}.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}}\n"] }]
|
|
16816
16816
|
}], ctorParameters: () => [{ type: i2$3.Router }, { type: EventsService }, { type: RestService }, { type: StorageServiceService }, { type: CartService }, { type: i2$1.MatDialog }, { type: i8$3.MatBottomSheet }, { type: i2$4.CookieService }, { type: i4.MessageService }], propDecorators: { data: [{
|
|
16817
16817
|
type: Input
|
|
16818
16818
|
}], index: [{
|