simpo-component-library 3.6.921 → 3.6.923
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/order-details/order-details.component.mjs +141 -3
- package/esm2022/lib/ecommerce/sections/user-profile/user-profile.component.mjs +2 -2
- package/fesm2022/simpo-component-library.mjs +141 -3
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/lib/ecommerce/sections/order-details/order-details.component.d.ts +3 -1
- package/package.json +1 -1
- package/simpo-component-library-3.6.923.tgz +0 -0
- package/simpo-component-library-3.6.921.tgz +0 -0
|
@@ -22894,6 +22894,7 @@ class OrderDetailsComponent {
|
|
|
22894
22894
|
this.messageService = messageService;
|
|
22895
22895
|
this.imageUploadService = imageUploadService;
|
|
22896
22896
|
this.goBackEmitter = new EventEmitter();
|
|
22897
|
+
this.downloadReceiptEmitter = new EventEmitter();
|
|
22897
22898
|
this.isLoading = false;
|
|
22898
22899
|
this.orderTimiline = [];
|
|
22899
22900
|
this.productReview = 0;
|
|
@@ -23002,6 +23003,141 @@ class OrderDetailsComponent {
|
|
|
23002
23003
|
trackOrder() {
|
|
23003
23004
|
window.open(this.orderDetailData?.orderTrackingLink, '_blank');
|
|
23004
23005
|
}
|
|
23006
|
+
downloadReceipt() {
|
|
23007
|
+
this.downloadReceiptEmitter.emit(this.orderDetailData);
|
|
23008
|
+
if (this.orderDetailData?.receiptUrl || this.orderDetailData?.invoiceUrl) {
|
|
23009
|
+
window.open(this.orderDetailData?.receiptUrl || this.orderDetailData?.invoiceUrl, '_blank');
|
|
23010
|
+
return;
|
|
23011
|
+
}
|
|
23012
|
+
// Generate Printable Receipt Window / PDF
|
|
23013
|
+
const printWindow = window.open('', '_blank', 'width=800,height=900');
|
|
23014
|
+
if (!printWindow)
|
|
23015
|
+
return;
|
|
23016
|
+
const brandOrder = this.orderDetailData?.brandOrderDetails?.[0];
|
|
23017
|
+
const items = brandOrder?.orderedItems || [];
|
|
23018
|
+
const address = this.orderDetailData?.addressDetails;
|
|
23019
|
+
const bill = this.orderDetailData?.billDetails;
|
|
23020
|
+
const itemsHtml = items.map((item) => `
|
|
23021
|
+
<tr>
|
|
23022
|
+
<td style="padding: 12px 10px; border-bottom: 1px solid #eee;">
|
|
23023
|
+
<strong>${item.itemName || 'Product'}</strong>
|
|
23024
|
+
${item.variantName ? `<br><small style="color: #666;">Variant: ${item.variantName}</small>` : ''}
|
|
23025
|
+
</td>
|
|
23026
|
+
<td style="padding: 12px 10px; border-bottom: 1px solid #eee; text-align: center;">${item.quantity || 1}</td>
|
|
23027
|
+
<td style="padding: 12px 10px; border-bottom: 1px solid #eee; text-align: right;">${this.currency}${Number(item.sellingPrice || 0).toFixed(2)}</td>
|
|
23028
|
+
<td style="padding: 12px 10px; border-bottom: 1px solid #eee; text-align: right;">${this.currency}${Number((item.sellingPrice || 0) * (item.quantity || 1)).toFixed(2)}</td>
|
|
23029
|
+
</tr>
|
|
23030
|
+
`).join('');
|
|
23031
|
+
const htmlContent = `
|
|
23032
|
+
<!DOCTYPE html>
|
|
23033
|
+
<html>
|
|
23034
|
+
<head>
|
|
23035
|
+
<meta charset="utf-8">
|
|
23036
|
+
<title>Receipt - Order #${this.orderDetailData?.orderNum || ''}</title>
|
|
23037
|
+
<style>
|
|
23038
|
+
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #212529; margin: 0; padding: 24px; background-color: #ffffff; }
|
|
23039
|
+
.receipt-box { max-width: 720px; margin: 0 auto; padding: 30px; border: 1px solid #e9ecef; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.03); }
|
|
23040
|
+
.header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid ${this.styles?.background?.color || '#20c997'}; padding-bottom: 16px; margin-bottom: 24px; }
|
|
23041
|
+
.header h2 { margin: 0; color: ${this.styles?.background?.color || '#20c997'}; font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
|
|
23042
|
+
.order-no { font-size: 14px; color: #6c757d; margin-top: 4px; font-weight: 500; }
|
|
23043
|
+
.info-grid { display: flex; justify-content: space-between; margin-bottom: 28px; font-size: 13px; }
|
|
23044
|
+
.info-col { width: 48%; line-height: 1.6; }
|
|
23045
|
+
.info-col h4 { margin: 0 0 8px 0; font-size: 12px; text-transform: uppercase; color: #6c757d; letter-spacing: 0.5px; }
|
|
23046
|
+
table.items-table { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 13px; }
|
|
23047
|
+
table.items-table th { background: #f8f9fa; padding: 10px; text-align: left; border-bottom: 2px solid #dee2e6; font-size: 12px; text-transform: uppercase; color: #495057; }
|
|
23048
|
+
.summary-container { display: flex; justify-content: flex-end; margin-bottom: 30px; }
|
|
23049
|
+
table.summary-table { width: 280px; border-collapse: collapse; font-size: 13px; }
|
|
23050
|
+
table.summary-table td { padding: 6px 8px; }
|
|
23051
|
+
.total-row { font-size: 15px; font-weight: 700; border-top: 2px solid #212529; border-bottom: 2px solid #212529; }
|
|
23052
|
+
.footer { text-align: center; margin-top: 40px; padding-top: 20px; border-top: 1px solid #e9ecef; color: #6c757d; font-size: 12px; }
|
|
23053
|
+
@media print {
|
|
23054
|
+
body { padding: 0; background: #fff; }
|
|
23055
|
+
.receipt-box { border: none; box-shadow: none; padding: 0; }
|
|
23056
|
+
}
|
|
23057
|
+
</style>
|
|
23058
|
+
</head>
|
|
23059
|
+
<body>
|
|
23060
|
+
<div class="receipt-box">
|
|
23061
|
+
<div class="header">
|
|
23062
|
+
<div>
|
|
23063
|
+
<h2>Order Receipt</h2>
|
|
23064
|
+
<div class="order-no">Order #${this.orderDetailData?.orderNum || ''}</div>
|
|
23065
|
+
</div>
|
|
23066
|
+
<div style="text-align: right; font-size: 13px;">
|
|
23067
|
+
<div>Status: <strong>${(brandOrder?.orderStatus || '').replaceAll('_', ' ')}</strong></div>
|
|
23068
|
+
</div>
|
|
23069
|
+
</div>
|
|
23070
|
+
|
|
23071
|
+
<div class="info-grid">
|
|
23072
|
+
<div class="info-col">
|
|
23073
|
+
<h4>Shipping Details</h4>
|
|
23074
|
+
<div><strong>${address?.receiverName || ''}</strong></div>
|
|
23075
|
+
<div>${this.orderAddress || 'N/A'}</div>
|
|
23076
|
+
<div>Phone: ${address?.receiverPhone || 'N/A'}</div>
|
|
23077
|
+
</div>
|
|
23078
|
+
<div class="info-col" style="text-align: right;">
|
|
23079
|
+
<h4>Payment Summary</h4>
|
|
23080
|
+
<div>Method: <strong>${this.getKey(this.orderDetailData?.paymentDetails) === 'COD' ? 'Cash on Delivery' : (this.getKey(this.orderDetailData?.paymentDetails) || 'Online Payment')}</strong></div>
|
|
23081
|
+
</div>
|
|
23082
|
+
</div>
|
|
23083
|
+
|
|
23084
|
+
<table class="items-table">
|
|
23085
|
+
<thead>
|
|
23086
|
+
<tr>
|
|
23087
|
+
<th>Item Details</th>
|
|
23088
|
+
<th style="text-align: center;">Qty</th>
|
|
23089
|
+
<th style="text-align: right;">Price</th>
|
|
23090
|
+
<th style="text-align: right;">Total</th>
|
|
23091
|
+
</tr>
|
|
23092
|
+
</thead>
|
|
23093
|
+
<tbody>
|
|
23094
|
+
${itemsHtml}
|
|
23095
|
+
</tbody>
|
|
23096
|
+
</table>
|
|
23097
|
+
|
|
23098
|
+
<div class="summary-container">
|
|
23099
|
+
<table class="summary-table">
|
|
23100
|
+
<tr>
|
|
23101
|
+
<td>Subtotal</td>
|
|
23102
|
+
<td style="text-align: right;">${this.currency}${Number(bill?.totalNetValue || 0).toFixed(2)}</td>
|
|
23103
|
+
</tr>
|
|
23104
|
+
${bill?.discountAmount ? `
|
|
23105
|
+
<tr style="color: #198754;">
|
|
23106
|
+
<td>Discount</td>
|
|
23107
|
+
<td style="text-align: right;">-${this.currency}${Number(bill?.discountAmount || 0).toFixed(2)}</td>
|
|
23108
|
+
</tr>` : ''}
|
|
23109
|
+
<tr>
|
|
23110
|
+
<td>Shipping</td>
|
|
23111
|
+
<td style="text-align: right;">${bill?.deliveryCharges ? this.currency + bill.deliveryCharges : 'FREE'}</td>
|
|
23112
|
+
</tr>
|
|
23113
|
+
<tr>
|
|
23114
|
+
<td>Estimated Tax</td>
|
|
23115
|
+
<td style="text-align: right;">${this.currency}${Number(bill?.discountAmount ? bill?.totalTaxAfterDiscount : bill?.totalTax || 0).toFixed(2)}</td>
|
|
23116
|
+
</tr>
|
|
23117
|
+
<tr class="total-row">
|
|
23118
|
+
<td>Total Paid</td>
|
|
23119
|
+
<td style="text-align: right;">${this.currency}${Number(bill?.finalPrice || 0).toFixed(2)}</td>
|
|
23120
|
+
</tr>
|
|
23121
|
+
</table>
|
|
23122
|
+
</div>
|
|
23123
|
+
|
|
23124
|
+
<div class="footer">
|
|
23125
|
+
Thank you for your purchase!
|
|
23126
|
+
</div>
|
|
23127
|
+
</div>
|
|
23128
|
+
<script>
|
|
23129
|
+
window.onload = function() {
|
|
23130
|
+
setTimeout(function() {
|
|
23131
|
+
window.print();
|
|
23132
|
+
}, 300);
|
|
23133
|
+
};
|
|
23134
|
+
</script>
|
|
23135
|
+
</body>
|
|
23136
|
+
</html>
|
|
23137
|
+
`;
|
|
23138
|
+
printWindow.document.write(htmlContent);
|
|
23139
|
+
printWindow.document.close();
|
|
23140
|
+
}
|
|
23005
23141
|
async submitReview(item) {
|
|
23006
23142
|
if (!item.rating || item.rating < 1) {
|
|
23007
23143
|
this.messageService.add({ severity: 'error', summary: 'Review', detail: 'Please give a rating to the product' });
|
|
@@ -23062,7 +23198,7 @@ class OrderDetailsComponent {
|
|
|
23062
23198
|
}
|
|
23063
23199
|
}
|
|
23064
23200
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OrderDetailsComponent, deps: [{ token: EventsService }, { token: StorageServiceService }, { token: RestService }, { token: i6$1.MessageService }, { token: ImageUplaodService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
23065
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OrderDetailsComponent, isStandalone: true, selector: "simpo-order-details", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", orderDetailData: "orderDetailData" }, outputs: { goBackEmitter: "goBackEmitter" }, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n <div class=\"container-fluid\" [attr.style]=\"customClass\" style=\"background-color: #f8f9fa; min-height: 100vh;\">\n <!-- Main Box -->\n <div class=\"border-0 mx-auto\">\n\n <!-- Back button & Thanks -->\n <div class=\"d-flex align-items-center mb-2\">\n <svg (click)=\"goBack()\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"lucide lucide-chevron-left cp text-muted\">\n <path d=\"m15 18-6-6 6-6\"></path>\n </svg>\n <span class=\"text-muted fw-medium py-1\">Thanks!</span>\n </div>\n\n <!-- Main Headline -->\n <h2 class=\"fw-semibold mb-2 text-dark\" style=\"font-size: 1.75rem;\">\n {{ orderDetailData?.brandOrderDetails?.[0]?.orderStatus?.replaceAll(\"_\", \" \") | titlecase }} \uD83D\uDE80\n </h2>\n <p class=\"text-muted mb-3 fs-15\">\n {{ orderDetailData?.brandOrderDetails?.[0]?.orderStatus === 'DELIVERED' ? 'Your order has been\n delivered. Enjoy!' : (orderDetailData?.brandOrderDetails?.[0]?.orderStatus === 'CANCELLED' ? 'Your order\n was cancelled.' : 'Your order is on the way. It will be shipped. We will inform you.') }}\n </p>\n\n <!-- Colored Line -->\n <div class=\"mb-3\" style=\"height: 3px; width: 100%;\"\n [style.background]=\"'linear-gradient(to right, ' + (styles?.background?.color || '#20c997') + ', transparent)'\">\n </div>\n\n <!-- Order Number & Actions -->\n <div class=\"d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-2\">\n <div class=\"fw-semibold text-dark mb-2 mb-md-0 d-flex align-items-center\">\n Order number:\n <span class=\"ms-1\" [style.color]=\"styles?.background?.color || '#20c997'\">\n {{ orderDetailData?.orderNum }}\n </span>\n </div>\n </div>\n\n <!-- Content Grid Layout -->\n <div class=\"row mt-2\">\n <!-- Left Column -->\n <div class=\"col-lg-7 col-xl-8 mb-4\">\n <!-- Items List -->\n <div class=\"card border mb-4 overflow-hidden\"\n style=\"border-color: #eaeaea !important; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.02);\">\n <ng-container\n *ngFor=\"let item of orderDetailData?.brandOrderDetails[0]?.orderedItems; let last = last\">\n <div class=\"item-card-pad\" [ngClass]=\"{'border-bottom': !last}\">\n <div class=\"d-flex gap-3 w-100 align-items-start\">\n <!-- Image -->\n <img loading=\"lazy\"\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n [src]=\"item.imgUrl\" alt=\"{{ item.itemName }}\"\n class=\"rounded shadow-sm flex-shrink-0 item-thumb\">\n\n <!-- Details + Price -->\n <div class=\"flex-grow-1 min-w-0\">\n <div class=\"d-flex align-items-start justify-content-between gap-2\">\n <h6 class=\"fw-bold text-dark mb-1 item-name\">{{ item.itemName }}</h6>\n <!-- Price always visible alongside name -->\n <div class=\"fw-bold text-dark text-nowrap item-price flex-shrink-0\">\n <span [innerHTML]=\"currency\"></span>{{ (item.sellingPrice * item.quantity) | number:'1.0-2' }}\n </div>\n </div>\n <p class=\"text-muted small mb-1 item-variant\"\n *ngIf=\"item.variantName || item.customizationDetails\">{{\n item.variantName || 'Regular' }}</p>\n <div class=\"text-muted item-qty\">Qty: {{ item.quantity }}</div>\n\n <!-- Review Section -->\n <div class=\"mt-3 pt-3 border-top\"\n *ngIf=\"orderDetailData?.brandOrderDetails?.[0]?.orderStatus == 'DELIVERED'\">\n\n <div class=\"d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-between mb-2 gap-2\">\n <h6 class=\"fw-bold mb-0 text-dark\" style=\"font-size: 14px;\">Leave a Review</h6>\n <p-rating [(ngModel)]=\"item.rating\" [cancel]=\"false\"\n [readonly]=\"false\"\n (ngModelChange)=\"submitReview(item)\"></p-rating>\n </div>\n\n <div class=\"add-detail-review text-primary fw-medium cursor-pointer d-inline-flex align-items-center gap-1\"\n style=\"font-size: 13px;\"\n (click)=\"item.showReview = !item.showReview\">\n <mat-icon\n style=\"font-size: 15px; width: 15px; height: 15px;\">mode_edit</mat-icon>\n <span>Write a Detailed Review</span>\n </div>\n\n <div *ngIf=\"item.showReview\" class=\"mt-3 review-form-box\">\n <h6 class=\"fw-semibold text-dark mb-2\" style=\"font-size: 14px;\">Share your experience</h6>\n\n <div class=\"mb-3\">\n <textarea class=\"form-control shadow-none review-textarea w-100\"\n [(ngModel)]=\"item.review\" rows=\"3\"\n placeholder=\"What did you like or dislike? How was the fit and quality?\"></textarea>\n </div>\n\n <div class=\"mb-3\">\n <h6 class=\"fw-medium text-muted mb-2\" style=\"font-size: 13px;\">\n Attach Photos <span style=\"font-size: 11px; opacity: 0.7;\">(Optional)</span>\n </h6>\n <div class=\"d-flex gap-2 flex-wrap align-items-center\">\n <div class=\"position-relative review-img-thumb\"\n *ngFor=\"let img of item?.reviewImages ?? []; let imgIdx = index\">\n <img [src]=\"img.imgUrl\" alt=\"\"\n style=\"width: 60px; height: 60px; object-fit: cover; border-radius: 8px; border: 1px solid #e2e8f0;\">\n <button class=\"review-img-remove\"\n (click)=\"item.reviewImages.splice(imgIdx, 1)\"\n title=\"Remove image\">\n <mat-icon style=\"font-size: 12px; width: 12px; height: 12px; line-height: 12px;\">close</mat-icon>\n </button>\n </div>\n\n <div class=\"d-flex align-items-center justify-content-center cursor-pointer review-upload-box\"\n (click)=\"reviewFileInput.click()\">\n <mat-icon\n style=\"font-size: 22px; width: 22px; height: 22px;\">add_photo_alternate</mat-icon>\n </div>\n <input type=\"file\" name=\"myfile\" multiple hidden\n accept=\"image/jpg,image/jpeg,image/gif,image/png,application/pdf,image/x-eps\"\n (change)=\"uploadImage($event, item)\" class=\"pc-btn\"\n #reviewFileInput />\n </div>\n </div>\n\n <button\n class=\"btn w-100 fw-bold d-flex justify-content-center align-items-center gap-2 review-submit-btn\"\n [style.background]=\"styles?.background?.color || '#20c997'\"\n (click)=\"submitReview(item)\">\n Submit Review\n <mat-icon style=\"font-size: 18px; width: 18px; height: 18px;\">send</mat-icon>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n </div>\n\n <!-- Summary Section -->\n <div class=\"row gx-5\">\n <!-- Left: Address & Payment -->\n <div class=\"col-md-6 mb-4 mb-md-0 d-flex flex-column gap-4\">\n <div>\n <h6 class=\"text-dark mb-2\" style=\"font-size: 13px; font-weight: 600;\">Shipping Address\n </h6>\n <div class=\"text-dark\" style=\"font-size: 13px;\">\n <span class=\"d-block mb-1\">{{ orderDetailData?.addressDetails?.receiverName\n }}</span>\n <span class=\"text-muted d-block\" style=\"line-height: 1.5; max-width: 280px;\">\n {{ orderAddress }}<br>\n {{ orderDetailData?.addressDetails?.receiverPhone }}\n </span>\n </div>\n </div>\n\n <div>\n <h6 class=\"text-dark mb-2\" style=\"font-size: 13px; font-weight: 600;\">Payment</h6>\n <div class=\"d-flex align-items-center gap-3\">\n <span class=\"text-primary fw-bolder fs-5\"\n *ngIf=\"getKey(orderDetailData?.paymentDetails)!=='COD'\"\n style=\"font-family: Arial, sans-serif; letter-spacing: -0.5px;\">VISA</span>\n <mat-icon *ngIf=\"getKey(orderDetailData?.paymentDetails)==='COD'\" class=\"text-muted\"\n style=\"font-size: 28px; width: 28px; height: 28px;\">payments</mat-icon>\n\n <div>\n <div class=\"text-dark\" style=\"font-size: 13px;\">\n {{orderDetailData?.paymentDetails ?\n (getKey(orderDetailData?.paymentDetails)==='COD' ? 'Cash on Delivery':\n getKey(orderDetailData?.paymentDetails) ) : 'N/A'}}</div>\n <div class=\"text-muted\" style=\"font-size: 12px; letter-spacing: 0.5px;\"\n *ngIf=\"getKey(orderDetailData?.paymentDetails)!=='COD'\">**** **** **** 1234\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Right: Bill Details -->\n <div class=\"col-md-6 pt-1\">\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <span class=\"text-muted\" style=\"font-size: 13px;\">Subtotal</span>\n <span class=\"text-dark fw-medium\" style=\"font-size: 13px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.totalNetValue |\n number:'1.0-2' }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2\"\n *ngIf=\"orderDetailData?.billDetails?.discountAmount\">\n <span class=\"text-muted\" style=\"font-size: 13px;\">Discount</span>\n <span class=\"text-success fw-medium\" style=\"font-size: 13px;\">\n -<span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount\n |\n number:'1.0-2' }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <span class=\"text-muted\" style=\"font-size: 13px;\">Shipping</span>\n <span class=\"text-dark fw-medium\"\n style=\"font-size: 13px;\">{{orderDetailData?.billDetails.deliveryCharges ?\n orderDetailData?.billDetails.deliveryCharges : 'FREE'}}</span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <span class=\"text-muted\" style=\"font-size: 13px;\">Estimated Tax</span>\n <span class=\"text-dark fw-medium\" style=\"font-size: 13px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount\n ?\n orderDetailData?.billDetails?.totalTaxAfterDiscount :\n orderDetailData?.billDetails?.totalTax\n | number:'1.0-2' }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2 text-success\" *ngIf=\"orderDetailData?.rewardUsed === 'REWARD_POINTS'\">\n <span style=\"font-size: 13px;\">Reward Amount</span>\n <span class=\" fw-medium\" style=\"font-size: 13px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.pointsConvertedINR }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2 text-success\" *ngIf=\"orderDetailData?.rewardUsed === 'VOUCHER'\">\n <span style=\"font-size: 13px;\">Reward Amount</span>\n <span class=\" fw-medium\" style=\"font-size: 13px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData.voucherValue }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2\"\n *ngIf=\"orderDetailData?.billDetails?.orraSchemeRedeemedAmount\">\n <span class=\"text-muted\" style=\"font-size: 13px;\">Redeem Amount</span>\n <span class=\"text-dark fw-medium\" style=\"font-size: 13px;\">\n -<span [innerHTML]=\"currency\"></span>{{\n orderDetailData?.billDetails?.orraSchemeRedeemedAmount | number:'1.0-2' }}\n </span>\n </div>\n\n <hr class=\"text-muted my-3\" style=\"opacity: 0.15;\">\n\n <div class=\"d-flex justify-content-between align-items-center\">\n <span class=\"text-dark\" style=\"font-size: 14px; font-weight: 600;\">Total</span>\n <span class=\"text-dark fw-bold\" style=\"font-size: 16px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center text-success\" *ngIf=\"orderDetailData?.rewardUsed === 'REWARD_POINTS'\">\n <span style=\"font-size: 14px; font-weight: 600;\">Amount Paid</span>\n <span class=\"fw-bold\" style=\"font-size: 16px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice === orderDetailData?.pointsConvertedINR ? '0' : (orderDetailData?.billDetails?.finalPrice - orderDetailData?.pointsConvertedINR) }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center text-success\" *ngIf=\"orderDetailData?.rewardUsed === 'VOUCHER'\">\n <span style=\"font-size: 14px; font-weight: 600;\">Amount Paid</span>\n <span class=\"fw-bold\" style=\"font-size: 16px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice === orderDetailData?.voucherValue ? '0' : (orderDetailData?.billDetails?.finalPrice - orderDetailData?.voucherValue) }}\n </span>\n </div>\n\n </div>\n </div>\n\n </div>\n\n <!-- Right Column -->\n <div class=\"col-lg-5 col-xl-4\">\n <!-- Timeline Card -->\n <div class=\"card border p-4 mb-4\"\n style=\"border-color: #eaeaea !important; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.02);\"\n *ngIf=\"orderDetailData?.orderTrackingLink || (orderTimiline && orderTimiline.length > 0)\">\n <div class=\"d-flex align-items-center justify-content-between mb-4 pb-3 border-bottom\">\n <h5 class=\"fw-bold mb-0 text-dark d-flex align-items-center gap-2\" style=\"font-size: 16px;\">\n <mat-icon style=\"color: #6c757d;\">timeline</mat-icon> Order Timeline\n </h5>\n\n <div *ngIf=\"orderDetailData?.orderTrackingLink\"\n class=\"d-inline-flex align-items-center gap-1 cursor-pointer fw-medium\"\n [style.color]=\"styles?.background?.color || '#0d6efd'\" style=\"font-size: 13px;\"\n (click)=\"trackOrder()\">\n <mat-icon\n style=\"font-size: 15px; width: 15px; height: 15px;\">location_searching</mat-icon>\n <span style=\"text-decoration: underline; text-underline-offset: 3px;\">Track Order</span>\n </div>\n </div>\n\n <div class=\"px-2 pt-2\" *ngIf=\"orderTimiline && orderTimiline.length > 0\">\n <p-timeline [value]=\"orderTimiline\" styleClass=\"custom-timeline\" align=\"left\">\n <ng-template pTemplate=\"marker\" let-event>\n <!-- Completed -->\n <span class=\"custom-marker completed-marker\"\n *ngIf=\"event.statusType === 'completed' || event.statusType === 'delivered'\"\n [style.backgroundColor]=\"styles?.background?.color || '#059669'\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"3\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n </span>\n\n <!-- Active -->\n <span class=\"custom-marker active-marker\" *ngIf=\"event.statusType === 'active'\"\n [style.borderColor]=\"styles?.background?.color || '#059669'\"></span>\n\n <!-- Future -->\n <span class=\"custom-marker future-marker\"\n *ngIf=\"event.statusType === 'future'\"></span>\n </ng-template>\n\n <ng-template pTemplate=\"content\" let-event let-last=\"last\">\n <div class=\"ms-4\" [ngClass]=\"{'pb-4': !last}\">\n <div class=\"fw-semibold text-dark\" style=\"font-size: 15px; margin-bottom: 2px;\">\n {{\n event.name?.replaceAll(\"_\", \" \") | titlecase }}</div>\n <div style=\"font-size: 14px;\"\n [ngClass]=\"{'text-muted': event.statusType !== 'future', 'text-light-grey': event.statusType === 'future'}\">\n {{ event.date ? (event.date | date:'MMM d') : 'Not yet' }}\n </div>\n </div>\n </ng-template>\n </p-timeline>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n</ng-container>\n\n<!-- Loading Skeleton -->\n<div class=\"container-fluid py-4\" *ngIf=\"isLoading\" style=\"background-color: #f8f9fa; min-height: 100vh;\">\n <div class=\"mx-auto\" style=\"max-width: 1000px;\">\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '60vh',\n 'border-radius': '12px',\n 'margin': '20px 0'\n }\"></ngx-skeleton-loader>\n </div>\n</div>", styles: [".right{height:250px;padding:15px;background-color:#f8f8f8;border-radius:8px;color:#000}*{font-family:var(--website-font-family)}hr{border-top-width:2px;margin:15px 0}.f-13{font-size:13px}.f-16{font-size:16px}.fw-800{font-weight:800}.br-6{border-radius:6px}textarea{resize:unset}.action-btn>button{font-size:14px!important;border:none;width:fit-content!important;margin-top:5px;border-radius:3px;padding:5px 10px;background-color:tomato;color:#fff}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}.onlyMobile{display:none}.track-order{background-color:#000;color:#fff;border:1px solid black;width:auto;border-radius:3px;padding:5px}@media only screen and (max-width: 475px){.onlyDesktop{display:none!important}.onlyMobile{display:block}.mat-icon{width:46px}.time-line{padding-bottom:6px}.right{width:98%!important;margin-bottom:4px!important;height:auto!important;padding:15px!important;margin-top:5%}.main-section{width:100%!important;flex-direction:column!important}.left{width:100%!important;padding:3%}.orderNum{margin-bottom:25px}}@media (min-width:768px) and (max-width:1024px){.left{padding:3%;width:70%}.right{width:28%!important;padding:2%;margin-top:10%;margin-right:3%}}.mt-25{margin-top:25px}.cp{cursor:pointer}.item-summary{box-shadow:0 0 4px #00000040;border-radius:12px}mat-icon{font-family:Material Icons!important}::ng-deep .p-rating-icon{color:#ffc107!important;font-size:1.25rem!important}::ng-deep .p-timeline-event-content{padding:0!important}::ng-deep .p-timeline-event-connector{background:#000!important;width:3px!important;position:absolute;bottom:-10px;height:55px;left:12px}.sbt-btn{border-radius:8px}::ng-deep .p-timeline-event-marker{display:none!important}@media screen and (min-width: 1200px){.scroll-45{overflow-y:scroll;height:45vh}.scroll-60{overflow-y:scroll;height:60vh}}.f-16{font-size:16px!important}.f-13{font-size:13px!important}@media (max-width: 575.98px){.display-6{font-size:1.5rem}.h3{font-size:1.25rem}}.gap-3{gap:1rem!important}.shadow-sm{box-shadow:0 .125rem .5rem #0000001a!important}.card-header{border-bottom:unset!important}.btn:hover{transform:translateY(-1px);transition:all .2s ease}.card:hover{transform:translateY(-2px);transition:all .3s ease}.bg-opacity-10{background-color:rgba(var(--bs-primary-rgb),.1)!important}.cursor-pointer{cursor:pointer}.transition-transform{transition:transform .3s ease}.rotate-180{transform:rotate(180deg)}.card-header:hover{opacity:.9;transition:opacity .2s ease}.card-body{transition:all .3s ease}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.add-review-img{color:#828484;width:65px;display:flex;align-items:center;justify-content:center;order:3px dotted black;background:#f0f2f2;border:1px solid #d5d9d9!important;cursor:pointer}.order-status{border-radius:8px;padding:5px 8px;font-size:16px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.fs-15{font-size:15px}.review-textarea{border:1px solid #e2e8f0;border-radius:8px;font-size:14px;resize:none;background-color:#f8fafc;padding:12px 8px;transition:all .2s ease-in-out}.review-textarea:focus{border-color:#cbd5e1;background-color:#fff;box-shadow:0 0 0 3px #e2e8f080!important;outline:none}.review-upload-box{width:72px;height:72px;border:2px dashed #cbd5e1;border-radius:8px;background-color:#f8fafc;transition:all .2s ease-in-out;color:#64748b}.review-img-thumb{display:inline-block}.review-img-remove{position:absolute;top:-6px;right:-6px;width:18px!important;height:18px;border-radius:50%;background:#ef4444;color:#fff;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 4px #0000002e;transition:background .15s ease,transform .15s ease;z-index:1}.review-img-remove:hover{background:#dc2626;transform:scale(1.1)}.review-upload-box:hover{background-color:#f1f5f9;border-color:#94a3b8;color:#475569}.review-submit-btn{color:#fff!important;border-radius:8px;padding:12px 0;font-size:14px!important;border:none;letter-spacing:.3px;transition:transform .1s ease,box-shadow .2s ease}.review-submit-btn:hover{box-shadow:0 6px 15px #0000001a;transform:translateY(-1px)}.review-submit-btn:active{transform:translateY(1px)}::ng-deep .custom-timeline .custom-marker{display:flex!important;align-items:center!important;justify-content:center!important;width:28px!important;height:28px!important;border-radius:50%!important;z-index:10}::ng-deep .custom-timeline .active-marker{background-color:#fff!important;border-width:6px!important;border-style:solid!important}::ng-deep .custom-timeline .future-marker{background-color:#fff!important;border:5px solid #cbd5e1!important}::ng-deep .custom-timeline .p-timeline-event-marker{border:none!important;background:transparent!important;display:flex!important}::ng-deep .custom-timeline .p-timeline-event-connector{background-color:#cbd5e1!important;width:2px!important}::ng-deep .custom-timeline .p-timeline-event-opposite{display:none!important;flex:0!important;padding:0!important}::ng-deep .custom-timeline .p-timeline-event{min-height:50px}.text-light-grey{color:#94a3b8}.w-40{width:40%}@media (min-width: 576px){.w-sm-40{width:40%!important}}.item-card-pad{padding:16px 20px}.item-thumb{width:72px;height:72px;object-fit:cover;border-radius:8px}.item-name{font-size:14px;line-height:1.4}.item-price{font-size:14px}.item-variant,.item-qty{font-size:12px}.min-w-0{min-width:0}.review-form-box{background:#fff;border:1px solid #f0f0f0;border-radius:12px;padding:14px;box-shadow:0 4px 20px #00000008;overflow:hidden}@media (max-width: 575px){.container-fluid{padding-left:12px!important;padding-right:12px!important}.item-card-pad{padding:12px 14px}.item-thumb{width:60px;height:60px}.item-name,.item-price{font-size:13px}::ng-deep .p-rating-icon{font-size:1.35rem!important;padding:2px!important}.row.gx-5{--bs-gutter-x: 1rem !important}h2.fw-semibold{font-size:1.4rem!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: TimelineModule }, { kind: "component", type: i8$5.Timeline, selector: "p-timeline", inputs: ["value", "style", "styleClass", "align", "layout"] }, { kind: "directive", type: i6$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i3$2.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatTooltipModule }] }); }
|
|
23201
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OrderDetailsComponent, isStandalone: true, selector: "simpo-order-details", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", orderDetailData: "orderDetailData" }, outputs: { goBackEmitter: "goBackEmitter", downloadReceiptEmitter: "downloadReceiptEmitter" }, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n <div class=\"container-fluid\" [attr.style]=\"customClass\" style=\"background-color: #f8f9fa; min-height: 100vh;\">\n <!-- Main Box -->\n <div class=\"border-0 mx-auto\">\n\n <!-- Back button & Thanks -->\n <div class=\"d-flex align-items-center mb-2\">\n <svg (click)=\"goBack()\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"lucide lucide-chevron-left cp text-muted\">\n <path d=\"m15 18-6-6 6-6\"></path>\n </svg>\n <span class=\"text-muted fw-medium py-1\">Thanks!</span>\n </div>\n\n <!-- Main Headline -->\n <h2 class=\"fw-semibold mb-2 text-dark\" style=\"font-size: 1.75rem;\">\n {{ orderDetailData?.brandOrderDetails?.[0]?.orderStatus?.replaceAll(\"_\", \" \") | titlecase }} \uD83D\uDE80\n </h2>\n <p class=\"text-muted mb-3 fs-15\">\n {{ orderDetailData?.brandOrderDetails?.[0]?.orderStatus === 'DELIVERED' ? 'Your order has been\n delivered. Enjoy!' : (orderDetailData?.brandOrderDetails?.[0]?.orderStatus === 'CANCELLED' ? 'Your order\n was cancelled.' : 'Your order is on the way. It will be shipped. We will inform you.') }}\n </p>\n\n <!-- Colored Line -->\n <div class=\"mb-3\" style=\"height: 3px; width: 100%;\"\n [style.background]=\"'linear-gradient(to right, ' + (styles?.background?.color || '#20c997') + ', transparent)'\">\n </div>\n\n <!-- Order Number & Actions -->\n <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-sm-center mb-3 gap-2\">\n <div class=\"fw-semibold text-dark d-flex align-items-center\">\n Order number:\n <span class=\"ms-1\" [style.color]=\"styles?.background?.color || '#20c997'\">\n {{ orderDetailData?.orderNum }}\n </span>\n </div>\n <button\n class=\"btn receipt-download-btn btn-sm d-inline-flex align-items-center gap-1 shadow-sm fw-medium px-3 py-1\"\n style=\"border-radius: 6px; font-size: 13px;width:max-content\" (click)=\"downloadReceipt()\">\n <mat-icon style=\"font-size: 18px; width: 18px; height: 18px;\">receipt_long</mat-icon>\n <span>Download Receipt</span>\n </button>\n </div>\n\n <!-- Content Grid Layout -->\n <div class=\"row mt-2\">\n <!-- Left Column -->\n <div class=\"col-lg-7 col-xl-8 mb-4\">\n <!-- Items List -->\n <div class=\"card border mb-4 overflow-hidden\"\n style=\"border-color: #eaeaea !important; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.02);\">\n <ng-container\n *ngFor=\"let item of orderDetailData?.brandOrderDetails[0]?.orderedItems; let last = last\">\n <div class=\"item-card-pad\" [ngClass]=\"{'border-bottom': !last}\">\n <div class=\"d-flex gap-3 w-100 align-items-start\">\n <!-- Image -->\n <img loading=\"lazy\"\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n [src]=\"item.imgUrl\" alt=\"{{ item.itemName }}\"\n class=\"rounded shadow-sm flex-shrink-0 item-thumb\">\n\n <!-- Details + Price -->\n <div class=\"flex-grow-1 min-w-0\">\n <div class=\"d-flex align-items-start justify-content-between gap-2\">\n <h6 class=\"fw-bold text-dark mb-1 item-name\">{{ item.itemName }}</h6>\n <!-- Price always visible alongside name -->\n <div class=\"fw-bold text-dark text-nowrap item-price flex-shrink-0\">\n <span [innerHTML]=\"currency\"></span>{{ (item.sellingPrice *\n item.quantity) | number:'1.0-2' }}\n </div>\n </div>\n <p class=\"text-muted small mb-1 item-variant\"\n *ngIf=\"item.variantName || item.customizationDetails\">{{\n item.variantName || 'Regular' }}</p>\n <div class=\"text-muted item-qty\">Qty: {{ item.quantity }}</div>\n\n <!-- Review Section -->\n <div class=\"mt-3 pt-3 border-top\"\n *ngIf=\"orderDetailData?.brandOrderDetails?.[0]?.orderStatus == 'DELIVERED'\">\n\n <div\n class=\"d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-between mb-2 gap-2\">\n <h6 class=\"fw-bold mb-0 text-dark\" style=\"font-size: 14px;\">Leave a\n Review</h6>\n <p-rating [(ngModel)]=\"item.rating\" [cancel]=\"false\" [readonly]=\"false\"\n (ngModelChange)=\"submitReview(item)\"></p-rating>\n </div>\n\n <div class=\"add-detail-review text-primary fw-medium cursor-pointer d-inline-flex align-items-center gap-1\"\n style=\"font-size: 13px;\" (click)=\"item.showReview = !item.showReview\">\n <mat-icon\n style=\"font-size: 15px; width: 15px; height: 15px;\">mode_edit</mat-icon>\n <span>Write a Detailed Review</span>\n </div>\n\n <div *ngIf=\"item.showReview\" class=\"mt-3 review-form-box\">\n <h6 class=\"fw-semibold text-dark mb-2\" style=\"font-size: 14px;\">Share\n your experience</h6>\n\n <div class=\"mb-3\">\n <textarea class=\"form-control shadow-none review-textarea w-100\"\n [(ngModel)]=\"item.review\" rows=\"3\"\n placeholder=\"What did you like or dislike? How was the fit and quality?\"></textarea>\n </div>\n\n <div class=\"mb-3\">\n <h6 class=\"fw-medium text-muted mb-2\" style=\"font-size: 13px;\">\n Attach Photos <span\n style=\"font-size: 11px; opacity: 0.7;\">(Optional)</span>\n </h6>\n <div class=\"d-flex gap-2 flex-wrap align-items-center\">\n <div class=\"position-relative review-img-thumb\"\n *ngFor=\"let img of item?.reviewImages ?? []; let imgIdx = index\">\n <img [src]=\"img.imgUrl\" alt=\"\"\n style=\"width: 60px; height: 60px; object-fit: cover; border-radius: 8px; border: 1px solid #e2e8f0;\">\n <button class=\"review-img-remove\"\n (click)=\"item.reviewImages.splice(imgIdx, 1)\"\n title=\"Remove image\">\n <mat-icon\n style=\"font-size: 12px; width: 12px; height: 12px; line-height: 12px;\">close</mat-icon>\n </button>\n </div>\n\n <div class=\"d-flex align-items-center justify-content-center cursor-pointer review-upload-box\"\n (click)=\"reviewFileInput.click()\">\n <mat-icon\n style=\"font-size: 22px; width: 22px; height: 22px;\">add_photo_alternate</mat-icon>\n </div>\n <input type=\"file\" name=\"myfile\" multiple hidden\n accept=\"image/jpg,image/jpeg,image/gif,image/png,application/pdf,image/x-eps\"\n (change)=\"uploadImage($event, item)\" class=\"pc-btn\"\n #reviewFileInput />\n </div>\n </div>\n\n <button\n class=\"btn w-100 fw-bold d-flex justify-content-center align-items-center gap-2 review-submit-btn\"\n [style.background]=\"styles?.background?.color || '#20c997'\"\n (click)=\"submitReview(item)\">\n Submit Review\n <mat-icon\n style=\"font-size: 18px; width: 18px; height: 18px;\">send</mat-icon>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n </div>\n\n <!-- Summary Section -->\n <div class=\"row gx-5\">\n <!-- Left: Address & Payment -->\n <div class=\"col-md-6 mb-4 mb-md-0 d-flex flex-column gap-4\">\n <div>\n <h6 class=\"text-dark mb-2\" style=\"font-size: 13px; font-weight: 600;\">Shipping Address\n </h6>\n <div class=\"text-dark\" style=\"font-size: 13px;\">\n <span class=\"d-block mb-1\">{{ orderDetailData?.addressDetails?.receiverName\n }}</span>\n <span class=\"text-muted d-block\" style=\"line-height: 1.5; max-width: 280px;\">\n {{ orderAddress }}<br>\n {{ orderDetailData?.addressDetails?.receiverPhone }}\n </span>\n </div>\n </div>\n\n <div>\n <h6 class=\"text-dark mb-2\" style=\"font-size: 13px; font-weight: 600;\">Payment</h6>\n <div class=\"d-flex align-items-center gap-3\">\n <span class=\"text-primary fw-bolder fs-5\"\n *ngIf=\"getKey(orderDetailData?.paymentDetails)!=='COD'\"\n style=\"font-family: Arial, sans-serif; letter-spacing: -0.5px;\">VISA</span>\n <mat-icon *ngIf=\"getKey(orderDetailData?.paymentDetails)==='COD'\" class=\"text-muted\"\n style=\"font-size: 28px; width: 28px; height: 28px;\">payments</mat-icon>\n\n <div>\n <div class=\"text-dark\" style=\"font-size: 13px;\">\n {{orderDetailData?.paymentDetails ?\n (getKey(orderDetailData?.paymentDetails)==='COD' ? 'Cash on Delivery':\n getKey(orderDetailData?.paymentDetails) ) : 'N/A'}}</div>\n <div class=\"text-muted\" style=\"font-size: 12px; letter-spacing: 0.5px;\"\n *ngIf=\"getKey(orderDetailData?.paymentDetails)!=='COD'\">**** **** **** 1234\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Right: Bill Details -->\n <div class=\"col-md-6 pt-1\">\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <span class=\"text-muted\" style=\"font-size: 13px;\">Subtotal</span>\n <span class=\"text-dark fw-medium\" style=\"font-size: 13px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.totalNetValue |\n number:'1.0-2' }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2\"\n *ngIf=\"orderDetailData?.billDetails?.discountAmount\">\n <span class=\"text-muted\" style=\"font-size: 13px;\">Discount</span>\n <span class=\"text-success fw-medium\" style=\"font-size: 13px;\">\n -<span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount\n |\n number:'1.0-2' }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <span class=\"text-muted\" style=\"font-size: 13px;\">Shipping</span>\n <span class=\"text-dark fw-medium\"\n style=\"font-size: 13px;\">{{orderDetailData?.billDetails.deliveryCharges ?\n orderDetailData?.billDetails.deliveryCharges : 'FREE'}}</span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <span class=\"text-muted\" style=\"font-size: 13px;\">Estimated Tax</span>\n <span class=\"text-dark fw-medium\" style=\"font-size: 13px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount\n ?\n orderDetailData?.billDetails?.totalTaxAfterDiscount :\n orderDetailData?.billDetails?.totalTax\n | number:'1.0-2' }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2 text-success\"\n *ngIf=\"orderDetailData?.rewardUsed === 'REWARD_POINTS'\">\n <span style=\"font-size: 13px;\">Reward Amount</span>\n <span class=\" fw-medium\" style=\"font-size: 13px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.pointsConvertedINR }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2 text-success\"\n *ngIf=\"orderDetailData?.rewardUsed === 'VOUCHER'\">\n <span style=\"font-size: 13px;\">Reward Amount</span>\n <span class=\" fw-medium\" style=\"font-size: 13px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData.voucherValue }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2\"\n *ngIf=\"orderDetailData?.billDetails?.orraSchemeRedeemedAmount\">\n <span class=\"text-muted\" style=\"font-size: 13px;\">Redeem Amount</span>\n <span class=\"text-dark fw-medium\" style=\"font-size: 13px;\">\n -<span [innerHTML]=\"currency\"></span>{{\n orderDetailData?.billDetails?.orraSchemeRedeemedAmount | number:'1.0-2' }}\n </span>\n </div>\n\n <hr class=\"text-muted my-3\" style=\"opacity: 0.15;\">\n\n <div class=\"d-flex justify-content-between align-items-center\">\n <span class=\"text-dark\" style=\"font-size: 14px; font-weight: 600;\">Total</span>\n <span class=\"text-dark fw-bold\" style=\"font-size: 16px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center text-success\"\n *ngIf=\"orderDetailData?.rewardUsed === 'REWARD_POINTS'\">\n <span style=\"font-size: 14px; font-weight: 600;\">Amount Paid</span>\n <span class=\"fw-bold\" style=\"font-size: 16px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice ===\n orderDetailData?.pointsConvertedINR ? '0' :\n (orderDetailData?.billDetails?.finalPrice - orderDetailData?.pointsConvertedINR) }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center text-success\"\n *ngIf=\"orderDetailData?.rewardUsed === 'VOUCHER'\">\n <span style=\"font-size: 14px; font-weight: 600;\">Amount Paid</span>\n <span class=\"fw-bold\" style=\"font-size: 16px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice ===\n orderDetailData?.voucherValue ? '0' : (orderDetailData?.billDetails?.finalPrice -\n orderDetailData?.voucherValue) }}\n </span>\n </div>\n\n <div class=\"mt-3 pt-2\">\n <button\n class=\"btn w-100 receipt-download-btn d-flex align-items-center justify-content-center gap-2 fw-medium py-2\"\n style=\"border-radius: 8px; font-size: 13px; width:max-content\"\n (click)=\"downloadReceipt()\">\n <mat-icon\n style=\"font-size: 18px; width: 18px; height: 18px;\">file_download</mat-icon>\n <span>Download Receipt</span>\n </button>\n </div>\n\n </div>\n </div>\n\n </div>\n\n <!-- Right Column -->\n <div class=\"col-lg-5 col-xl-4\">\n <!-- Timeline Card -->\n <div class=\"card border p-4 mb-4\"\n style=\"border-color: #eaeaea !important; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.02);\"\n *ngIf=\"orderDetailData?.orderTrackingLink || (orderTimiline && orderTimiline.length > 0)\">\n <div class=\"d-flex align-items-center justify-content-between mb-4 pb-3 border-bottom\">\n <h5 class=\"fw-bold mb-0 text-dark d-flex align-items-center gap-2\" style=\"font-size: 16px;\">\n <mat-icon style=\"color: #6c757d;\">timeline</mat-icon> Order Timeline\n </h5>\n\n <div *ngIf=\"orderDetailData?.orderTrackingLink\"\n class=\"d-inline-flex align-items-center gap-1 cursor-pointer fw-medium\"\n [style.color]=\"styles?.background?.color || '#0d6efd'\" style=\"font-size: 13px;\"\n (click)=\"trackOrder()\">\n <mat-icon\n style=\"font-size: 15px; width: 15px; height: 15px;\">location_searching</mat-icon>\n <span style=\"text-decoration: underline; text-underline-offset: 3px;\">Track Order</span>\n </div>\n </div>\n\n <div class=\"px-2 pt-2\" *ngIf=\"orderTimiline && orderTimiline.length > 0\">\n <p-timeline [value]=\"orderTimiline\" styleClass=\"custom-timeline\" align=\"left\">\n <ng-template pTemplate=\"marker\" let-event>\n <!-- Completed -->\n <span class=\"custom-marker completed-marker\"\n *ngIf=\"event.statusType === 'completed' || event.statusType === 'delivered'\"\n [style.backgroundColor]=\"styles?.background?.color || '#059669'\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"3\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n </span>\n\n <!-- Active -->\n <span class=\"custom-marker active-marker\" *ngIf=\"event.statusType === 'active'\"\n [style.borderColor]=\"styles?.background?.color || '#059669'\"></span>\n\n <!-- Future -->\n <span class=\"custom-marker future-marker\"\n *ngIf=\"event.statusType === 'future'\"></span>\n </ng-template>\n\n <ng-template pTemplate=\"content\" let-event let-last=\"last\">\n <div class=\"ms-4\" [ngClass]=\"{'pb-4': !last}\">\n <div class=\"fw-semibold text-dark\" style=\"font-size: 15px; margin-bottom: 2px;\">\n {{\n event.name?.replaceAll(\"_\", \" \") | titlecase }}</div>\n <div style=\"font-size: 14px;\"\n [ngClass]=\"{'text-muted': event.statusType !== 'future', 'text-light-grey': event.statusType === 'future'}\">\n {{ event.date ? (event.date | date:'MMM d, h:mm a') : 'Not yet' }}\n </div>\n </div>\n </ng-template>\n </p-timeline>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n</ng-container>\n\n<!-- Loading Skeleton -->\n<div class=\"container-fluid py-4\" *ngIf=\"isLoading\" style=\"background-color: #f8f9fa; min-height: 100vh;\">\n <div class=\"mx-auto\" style=\"max-width: 1000px;\">\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '60vh',\n 'border-radius': '12px',\n 'margin': '20px 0'\n }\"></ngx-skeleton-loader>\n </div>\n</div>", styles: [".right{height:250px;padding:15px;background-color:#f8f8f8;border-radius:8px;color:#000}*{font-family:var(--website-font-family)}hr{border-top-width:2px;margin:15px 0}.f-13{font-size:13px}.f-16{font-size:16px}.fw-800{font-weight:800}.br-6{border-radius:6px}textarea{resize:unset}.action-btn>button{font-size:14px!important;border:none;width:fit-content!important;margin-top:5px;border-radius:3px;padding:5px 10px;background-color:tomato;color:#fff}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}.onlyMobile{display:none}.track-order{background-color:#000;color:#fff;border:1px solid black;width:auto;border-radius:3px;padding:5px}@media only screen and (max-width: 475px){.onlyDesktop{display:none!important}.onlyMobile{display:block}.mat-icon{width:46px}.time-line{padding-bottom:6px}.right{width:98%!important;margin-bottom:4px!important;height:auto!important;padding:15px!important;margin-top:5%}.main-section{width:100%!important;flex-direction:column!important}.left{width:100%!important;padding:3%}.orderNum{margin-bottom:25px}}@media (min-width:768px) and (max-width:1024px){.left{padding:3%;width:70%}.right{width:28%!important;padding:2%;margin-top:10%;margin-right:3%}}.mt-25{margin-top:25px}.cp{cursor:pointer}.item-summary{box-shadow:0 0 4px #00000040;border-radius:12px}mat-icon{font-family:Material Icons!important}::ng-deep .p-rating-icon{color:#ffc107!important;font-size:1.25rem!important}::ng-deep .p-timeline-event-content{padding:0!important}::ng-deep .p-timeline-event-connector{background:#000!important;width:3px!important;position:absolute;bottom:-10px;height:55px;left:12px}.sbt-btn{border-radius:8px}::ng-deep .p-timeline-event-marker{display:none!important}@media screen and (min-width: 1200px){.scroll-45{overflow-y:scroll;height:45vh}.scroll-60{overflow-y:scroll;height:60vh}}.f-16{font-size:16px!important}.f-13{font-size:13px!important}@media (max-width: 575.98px){.display-6{font-size:1.5rem}.h3{font-size:1.25rem}}.gap-3{gap:1rem!important}.shadow-sm{box-shadow:0 .125rem .5rem #0000001a!important}.card-header{border-bottom:unset!important}.btn:hover{transform:translateY(-1px);transition:all .2s ease}.card:hover{transform:translateY(-2px);transition:all .3s ease}.bg-opacity-10{background-color:rgba(var(--bs-primary-rgb),.1)!important}.cursor-pointer{cursor:pointer}.transition-transform{transition:transform .3s ease}.rotate-180{transform:rotate(180deg)}.card-header:hover{opacity:.9;transition:opacity .2s ease}.card-body{transition:all .3s ease}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.add-review-img{color:#828484;width:65px;display:flex;align-items:center;justify-content:center;order:3px dotted black;background:#f0f2f2;border:1px solid #d5d9d9!important;cursor:pointer}.order-status{border-radius:8px;padding:5px 8px;font-size:16px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.fs-15{font-size:15px}.review-textarea{border:1px solid #e2e8f0;border-radius:8px;font-size:14px;resize:none;background-color:#f8fafc;padding:12px 8px;transition:all .2s ease-in-out}.review-textarea:focus{border-color:#cbd5e1;background-color:#fff;box-shadow:0 0 0 3px #e2e8f080!important;outline:none}.review-upload-box{width:72px;height:72px;border:2px dashed #cbd5e1;border-radius:8px;background-color:#f8fafc;transition:all .2s ease-in-out;color:#64748b}.review-img-thumb{display:inline-block}.review-img-remove{position:absolute;top:-6px;right:-6px;width:18px!important;height:18px;border-radius:50%;background:#ef4444;color:#fff;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 4px #0000002e;transition:background .15s ease,transform .15s ease;z-index:1}.review-img-remove:hover{background:#dc2626;transform:scale(1.1)}.review-upload-box:hover{background-color:#f1f5f9;border-color:#94a3b8;color:#475569}.review-submit-btn{color:#fff!important;border-radius:8px;padding:12px 0;font-size:14px!important;border:none;letter-spacing:.3px;transition:transform .1s ease,box-shadow .2s ease}.review-submit-btn:hover{box-shadow:0 6px 15px #0000001a;transform:translateY(-1px)}.review-submit-btn:active{transform:translateY(1px)}::ng-deep .custom-timeline .custom-marker{display:flex!important;align-items:center!important;justify-content:center!important;width:28px!important;height:28px!important;border-radius:50%!important;z-index:10}::ng-deep .custom-timeline .active-marker{background-color:#fff!important;border-width:6px!important;border-style:solid!important}::ng-deep .custom-timeline .future-marker{background-color:#fff!important;border:5px solid #cbd5e1!important}::ng-deep .custom-timeline .p-timeline-event-marker{border:none!important;background:transparent!important;display:flex!important}::ng-deep .custom-timeline .p-timeline-event-connector{background-color:#cbd5e1!important;width:2px!important}::ng-deep .custom-timeline .p-timeline-event-opposite{display:none!important;flex:0!important;padding:0!important}::ng-deep .custom-timeline .p-timeline-event{min-height:50px}.text-light-grey{color:#94a3b8}.w-40{width:40%}@media (min-width: 576px){.w-sm-40{width:40%!important}}.item-card-pad{padding:16px 20px}.item-thumb{width:72px;height:72px;object-fit:cover;border-radius:8px}.item-name{font-size:14px;line-height:1.4}.item-price{font-size:14px}.item-variant,.item-qty{font-size:12px}.min-w-0{min-width:0}.review-form-box{background:#fff;border:1px solid #f0f0f0;border-radius:12px;padding:14px;box-shadow:0 4px 20px #00000008;overflow:hidden}@media (max-width: 575px){.container-fluid{padding-left:12px!important;padding-right:12px!important}.item-card-pad{padding:12px 14px}.item-thumb{width:60px;height:60px}.item-name,.item-price{font-size:13px}::ng-deep .p-rating-icon{font-size:1.35rem!important;padding:2px!important}.row.gx-5{--bs-gutter-x: 1rem !important}h2.fw-semibold{font-size:1.4rem!important}}.receipt-download-btn{background-color:transparent!important;color:#212529!important;border:1px solid #212529!important;transition:none!important}.receipt-download-btn:hover,.receipt-download-btn:focus,.receipt-download-btn:active{background-color:transparent!important;color:#212529!important;border-color:#212529!important;box-shadow:none!important;transform:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: TimelineModule }, { kind: "component", type: i8$5.Timeline, selector: "p-timeline", inputs: ["value", "style", "styleClass", "align", "layout"] }, { kind: "directive", type: i6$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i3$2.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatTooltipModule }] }); }
|
|
23066
23202
|
}
|
|
23067
23203
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OrderDetailsComponent, decorators: [{
|
|
23068
23204
|
type: Component,
|
|
@@ -23076,7 +23212,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
23076
23212
|
FormsModule,
|
|
23077
23213
|
BackgroundDirective,
|
|
23078
23214
|
MatTooltipModule
|
|
23079
|
-
], template: "<ng-container *ngIf=\"!isLoading\">\n <div class=\"container-fluid\" [attr.style]=\"customClass\" style=\"background-color: #f8f9fa; min-height: 100vh;\">\n <!-- Main Box -->\n <div class=\"border-0 mx-auto\">\n\n <!-- Back button & Thanks -->\n <div class=\"d-flex align-items-center mb-2\">\n <svg (click)=\"goBack()\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"lucide lucide-chevron-left cp text-muted\">\n <path d=\"m15 18-6-6 6-6\"></path>\n </svg>\n <span class=\"text-muted fw-medium py-1\">Thanks!</span>\n </div>\n\n <!-- Main Headline -->\n <h2 class=\"fw-semibold mb-2 text-dark\" style=\"font-size: 1.75rem;\">\n {{ orderDetailData?.brandOrderDetails?.[0]?.orderStatus?.replaceAll(\"_\", \" \") | titlecase }} \uD83D\uDE80\n </h2>\n <p class=\"text-muted mb-3 fs-15\">\n {{ orderDetailData?.brandOrderDetails?.[0]?.orderStatus === 'DELIVERED' ? 'Your order has been\n delivered. Enjoy!' : (orderDetailData?.brandOrderDetails?.[0]?.orderStatus === 'CANCELLED' ? 'Your order\n was cancelled.' : 'Your order is on the way. It will be shipped. We will inform you.') }}\n </p>\n\n <!-- Colored Line -->\n <div class=\"mb-3\" style=\"height: 3px; width: 100%;\"\n [style.background]=\"'linear-gradient(to right, ' + (styles?.background?.color || '#20c997') + ', transparent)'\">\n </div>\n\n <!-- Order Number & Actions -->\n <div class=\"d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-2\">\n <div class=\"fw-semibold text-dark mb-2 mb-md-0 d-flex align-items-center\">\n Order number:\n <span class=\"ms-1\" [style.color]=\"styles?.background?.color || '#20c997'\">\n {{ orderDetailData?.orderNum }}\n </span>\n </div>\n </div>\n\n <!-- Content Grid Layout -->\n <div class=\"row mt-2\">\n <!-- Left Column -->\n <div class=\"col-lg-7 col-xl-8 mb-4\">\n <!-- Items List -->\n <div class=\"card border mb-4 overflow-hidden\"\n style=\"border-color: #eaeaea !important; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.02);\">\n <ng-container\n *ngFor=\"let item of orderDetailData?.brandOrderDetails[0]?.orderedItems; let last = last\">\n <div class=\"item-card-pad\" [ngClass]=\"{'border-bottom': !last}\">\n <div class=\"d-flex gap-3 w-100 align-items-start\">\n <!-- Image -->\n <img loading=\"lazy\"\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n [src]=\"item.imgUrl\" alt=\"{{ item.itemName }}\"\n class=\"rounded shadow-sm flex-shrink-0 item-thumb\">\n\n <!-- Details + Price -->\n <div class=\"flex-grow-1 min-w-0\">\n <div class=\"d-flex align-items-start justify-content-between gap-2\">\n <h6 class=\"fw-bold text-dark mb-1 item-name\">{{ item.itemName }}</h6>\n <!-- Price always visible alongside name -->\n <div class=\"fw-bold text-dark text-nowrap item-price flex-shrink-0\">\n <span [innerHTML]=\"currency\"></span>{{ (item.sellingPrice * item.quantity) | number:'1.0-2' }}\n </div>\n </div>\n <p class=\"text-muted small mb-1 item-variant\"\n *ngIf=\"item.variantName || item.customizationDetails\">{{\n item.variantName || 'Regular' }}</p>\n <div class=\"text-muted item-qty\">Qty: {{ item.quantity }}</div>\n\n <!-- Review Section -->\n <div class=\"mt-3 pt-3 border-top\"\n *ngIf=\"orderDetailData?.brandOrderDetails?.[0]?.orderStatus == 'DELIVERED'\">\n\n <div class=\"d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-between mb-2 gap-2\">\n <h6 class=\"fw-bold mb-0 text-dark\" style=\"font-size: 14px;\">Leave a Review</h6>\n <p-rating [(ngModel)]=\"item.rating\" [cancel]=\"false\"\n [readonly]=\"false\"\n (ngModelChange)=\"submitReview(item)\"></p-rating>\n </div>\n\n <div class=\"add-detail-review text-primary fw-medium cursor-pointer d-inline-flex align-items-center gap-1\"\n style=\"font-size: 13px;\"\n (click)=\"item.showReview = !item.showReview\">\n <mat-icon\n style=\"font-size: 15px; width: 15px; height: 15px;\">mode_edit</mat-icon>\n <span>Write a Detailed Review</span>\n </div>\n\n <div *ngIf=\"item.showReview\" class=\"mt-3 review-form-box\">\n <h6 class=\"fw-semibold text-dark mb-2\" style=\"font-size: 14px;\">Share your experience</h6>\n\n <div class=\"mb-3\">\n <textarea class=\"form-control shadow-none review-textarea w-100\"\n [(ngModel)]=\"item.review\" rows=\"3\"\n placeholder=\"What did you like or dislike? How was the fit and quality?\"></textarea>\n </div>\n\n <div class=\"mb-3\">\n <h6 class=\"fw-medium text-muted mb-2\" style=\"font-size: 13px;\">\n Attach Photos <span style=\"font-size: 11px; opacity: 0.7;\">(Optional)</span>\n </h6>\n <div class=\"d-flex gap-2 flex-wrap align-items-center\">\n <div class=\"position-relative review-img-thumb\"\n *ngFor=\"let img of item?.reviewImages ?? []; let imgIdx = index\">\n <img [src]=\"img.imgUrl\" alt=\"\"\n style=\"width: 60px; height: 60px; object-fit: cover; border-radius: 8px; border: 1px solid #e2e8f0;\">\n <button class=\"review-img-remove\"\n (click)=\"item.reviewImages.splice(imgIdx, 1)\"\n title=\"Remove image\">\n <mat-icon style=\"font-size: 12px; width: 12px; height: 12px; line-height: 12px;\">close</mat-icon>\n </button>\n </div>\n\n <div class=\"d-flex align-items-center justify-content-center cursor-pointer review-upload-box\"\n (click)=\"reviewFileInput.click()\">\n <mat-icon\n style=\"font-size: 22px; width: 22px; height: 22px;\">add_photo_alternate</mat-icon>\n </div>\n <input type=\"file\" name=\"myfile\" multiple hidden\n accept=\"image/jpg,image/jpeg,image/gif,image/png,application/pdf,image/x-eps\"\n (change)=\"uploadImage($event, item)\" class=\"pc-btn\"\n #reviewFileInput />\n </div>\n </div>\n\n <button\n class=\"btn w-100 fw-bold d-flex justify-content-center align-items-center gap-2 review-submit-btn\"\n [style.background]=\"styles?.background?.color || '#20c997'\"\n (click)=\"submitReview(item)\">\n Submit Review\n <mat-icon style=\"font-size: 18px; width: 18px; height: 18px;\">send</mat-icon>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n </div>\n\n <!-- Summary Section -->\n <div class=\"row gx-5\">\n <!-- Left: Address & Payment -->\n <div class=\"col-md-6 mb-4 mb-md-0 d-flex flex-column gap-4\">\n <div>\n <h6 class=\"text-dark mb-2\" style=\"font-size: 13px; font-weight: 600;\">Shipping Address\n </h6>\n <div class=\"text-dark\" style=\"font-size: 13px;\">\n <span class=\"d-block mb-1\">{{ orderDetailData?.addressDetails?.receiverName\n }}</span>\n <span class=\"text-muted d-block\" style=\"line-height: 1.5; max-width: 280px;\">\n {{ orderAddress }}<br>\n {{ orderDetailData?.addressDetails?.receiverPhone }}\n </span>\n </div>\n </div>\n\n <div>\n <h6 class=\"text-dark mb-2\" style=\"font-size: 13px; font-weight: 600;\">Payment</h6>\n <div class=\"d-flex align-items-center gap-3\">\n <span class=\"text-primary fw-bolder fs-5\"\n *ngIf=\"getKey(orderDetailData?.paymentDetails)!=='COD'\"\n style=\"font-family: Arial, sans-serif; letter-spacing: -0.5px;\">VISA</span>\n <mat-icon *ngIf=\"getKey(orderDetailData?.paymentDetails)==='COD'\" class=\"text-muted\"\n style=\"font-size: 28px; width: 28px; height: 28px;\">payments</mat-icon>\n\n <div>\n <div class=\"text-dark\" style=\"font-size: 13px;\">\n {{orderDetailData?.paymentDetails ?\n (getKey(orderDetailData?.paymentDetails)==='COD' ? 'Cash on Delivery':\n getKey(orderDetailData?.paymentDetails) ) : 'N/A'}}</div>\n <div class=\"text-muted\" style=\"font-size: 12px; letter-spacing: 0.5px;\"\n *ngIf=\"getKey(orderDetailData?.paymentDetails)!=='COD'\">**** **** **** 1234\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Right: Bill Details -->\n <div class=\"col-md-6 pt-1\">\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <span class=\"text-muted\" style=\"font-size: 13px;\">Subtotal</span>\n <span class=\"text-dark fw-medium\" style=\"font-size: 13px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.totalNetValue |\n number:'1.0-2' }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2\"\n *ngIf=\"orderDetailData?.billDetails?.discountAmount\">\n <span class=\"text-muted\" style=\"font-size: 13px;\">Discount</span>\n <span class=\"text-success fw-medium\" style=\"font-size: 13px;\">\n -<span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount\n |\n number:'1.0-2' }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <span class=\"text-muted\" style=\"font-size: 13px;\">Shipping</span>\n <span class=\"text-dark fw-medium\"\n style=\"font-size: 13px;\">{{orderDetailData?.billDetails.deliveryCharges ?\n orderDetailData?.billDetails.deliveryCharges : 'FREE'}}</span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <span class=\"text-muted\" style=\"font-size: 13px;\">Estimated Tax</span>\n <span class=\"text-dark fw-medium\" style=\"font-size: 13px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount\n ?\n orderDetailData?.billDetails?.totalTaxAfterDiscount :\n orderDetailData?.billDetails?.totalTax\n | number:'1.0-2' }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2 text-success\" *ngIf=\"orderDetailData?.rewardUsed === 'REWARD_POINTS'\">\n <span style=\"font-size: 13px;\">Reward Amount</span>\n <span class=\" fw-medium\" style=\"font-size: 13px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.pointsConvertedINR }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2 text-success\" *ngIf=\"orderDetailData?.rewardUsed === 'VOUCHER'\">\n <span style=\"font-size: 13px;\">Reward Amount</span>\n <span class=\" fw-medium\" style=\"font-size: 13px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData.voucherValue }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2\"\n *ngIf=\"orderDetailData?.billDetails?.orraSchemeRedeemedAmount\">\n <span class=\"text-muted\" style=\"font-size: 13px;\">Redeem Amount</span>\n <span class=\"text-dark fw-medium\" style=\"font-size: 13px;\">\n -<span [innerHTML]=\"currency\"></span>{{\n orderDetailData?.billDetails?.orraSchemeRedeemedAmount | number:'1.0-2' }}\n </span>\n </div>\n\n <hr class=\"text-muted my-3\" style=\"opacity: 0.15;\">\n\n <div class=\"d-flex justify-content-between align-items-center\">\n <span class=\"text-dark\" style=\"font-size: 14px; font-weight: 600;\">Total</span>\n <span class=\"text-dark fw-bold\" style=\"font-size: 16px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center text-success\" *ngIf=\"orderDetailData?.rewardUsed === 'REWARD_POINTS'\">\n <span style=\"font-size: 14px; font-weight: 600;\">Amount Paid</span>\n <span class=\"fw-bold\" style=\"font-size: 16px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice === orderDetailData?.pointsConvertedINR ? '0' : (orderDetailData?.billDetails?.finalPrice - orderDetailData?.pointsConvertedINR) }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center text-success\" *ngIf=\"orderDetailData?.rewardUsed === 'VOUCHER'\">\n <span style=\"font-size: 14px; font-weight: 600;\">Amount Paid</span>\n <span class=\"fw-bold\" style=\"font-size: 16px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice === orderDetailData?.voucherValue ? '0' : (orderDetailData?.billDetails?.finalPrice - orderDetailData?.voucherValue) }}\n </span>\n </div>\n\n </div>\n </div>\n\n </div>\n\n <!-- Right Column -->\n <div class=\"col-lg-5 col-xl-4\">\n <!-- Timeline Card -->\n <div class=\"card border p-4 mb-4\"\n style=\"border-color: #eaeaea !important; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.02);\"\n *ngIf=\"orderDetailData?.orderTrackingLink || (orderTimiline && orderTimiline.length > 0)\">\n <div class=\"d-flex align-items-center justify-content-between mb-4 pb-3 border-bottom\">\n <h5 class=\"fw-bold mb-0 text-dark d-flex align-items-center gap-2\" style=\"font-size: 16px;\">\n <mat-icon style=\"color: #6c757d;\">timeline</mat-icon> Order Timeline\n </h5>\n\n <div *ngIf=\"orderDetailData?.orderTrackingLink\"\n class=\"d-inline-flex align-items-center gap-1 cursor-pointer fw-medium\"\n [style.color]=\"styles?.background?.color || '#0d6efd'\" style=\"font-size: 13px;\"\n (click)=\"trackOrder()\">\n <mat-icon\n style=\"font-size: 15px; width: 15px; height: 15px;\">location_searching</mat-icon>\n <span style=\"text-decoration: underline; text-underline-offset: 3px;\">Track Order</span>\n </div>\n </div>\n\n <div class=\"px-2 pt-2\" *ngIf=\"orderTimiline && orderTimiline.length > 0\">\n <p-timeline [value]=\"orderTimiline\" styleClass=\"custom-timeline\" align=\"left\">\n <ng-template pTemplate=\"marker\" let-event>\n <!-- Completed -->\n <span class=\"custom-marker completed-marker\"\n *ngIf=\"event.statusType === 'completed' || event.statusType === 'delivered'\"\n [style.backgroundColor]=\"styles?.background?.color || '#059669'\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"3\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n </span>\n\n <!-- Active -->\n <span class=\"custom-marker active-marker\" *ngIf=\"event.statusType === 'active'\"\n [style.borderColor]=\"styles?.background?.color || '#059669'\"></span>\n\n <!-- Future -->\n <span class=\"custom-marker future-marker\"\n *ngIf=\"event.statusType === 'future'\"></span>\n </ng-template>\n\n <ng-template pTemplate=\"content\" let-event let-last=\"last\">\n <div class=\"ms-4\" [ngClass]=\"{'pb-4': !last}\">\n <div class=\"fw-semibold text-dark\" style=\"font-size: 15px; margin-bottom: 2px;\">\n {{\n event.name?.replaceAll(\"_\", \" \") | titlecase }}</div>\n <div style=\"font-size: 14px;\"\n [ngClass]=\"{'text-muted': event.statusType !== 'future', 'text-light-grey': event.statusType === 'future'}\">\n {{ event.date ? (event.date | date:'MMM d') : 'Not yet' }}\n </div>\n </div>\n </ng-template>\n </p-timeline>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n</ng-container>\n\n<!-- Loading Skeleton -->\n<div class=\"container-fluid py-4\" *ngIf=\"isLoading\" style=\"background-color: #f8f9fa; min-height: 100vh;\">\n <div class=\"mx-auto\" style=\"max-width: 1000px;\">\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '60vh',\n 'border-radius': '12px',\n 'margin': '20px 0'\n }\"></ngx-skeleton-loader>\n </div>\n</div>", styles: [".right{height:250px;padding:15px;background-color:#f8f8f8;border-radius:8px;color:#000}*{font-family:var(--website-font-family)}hr{border-top-width:2px;margin:15px 0}.f-13{font-size:13px}.f-16{font-size:16px}.fw-800{font-weight:800}.br-6{border-radius:6px}textarea{resize:unset}.action-btn>button{font-size:14px!important;border:none;width:fit-content!important;margin-top:5px;border-radius:3px;padding:5px 10px;background-color:tomato;color:#fff}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}.onlyMobile{display:none}.track-order{background-color:#000;color:#fff;border:1px solid black;width:auto;border-radius:3px;padding:5px}@media only screen and (max-width: 475px){.onlyDesktop{display:none!important}.onlyMobile{display:block}.mat-icon{width:46px}.time-line{padding-bottom:6px}.right{width:98%!important;margin-bottom:4px!important;height:auto!important;padding:15px!important;margin-top:5%}.main-section{width:100%!important;flex-direction:column!important}.left{width:100%!important;padding:3%}.orderNum{margin-bottom:25px}}@media (min-width:768px) and (max-width:1024px){.left{padding:3%;width:70%}.right{width:28%!important;padding:2%;margin-top:10%;margin-right:3%}}.mt-25{margin-top:25px}.cp{cursor:pointer}.item-summary{box-shadow:0 0 4px #00000040;border-radius:12px}mat-icon{font-family:Material Icons!important}::ng-deep .p-rating-icon{color:#ffc107!important;font-size:1.25rem!important}::ng-deep .p-timeline-event-content{padding:0!important}::ng-deep .p-timeline-event-connector{background:#000!important;width:3px!important;position:absolute;bottom:-10px;height:55px;left:12px}.sbt-btn{border-radius:8px}::ng-deep .p-timeline-event-marker{display:none!important}@media screen and (min-width: 1200px){.scroll-45{overflow-y:scroll;height:45vh}.scroll-60{overflow-y:scroll;height:60vh}}.f-16{font-size:16px!important}.f-13{font-size:13px!important}@media (max-width: 575.98px){.display-6{font-size:1.5rem}.h3{font-size:1.25rem}}.gap-3{gap:1rem!important}.shadow-sm{box-shadow:0 .125rem .5rem #0000001a!important}.card-header{border-bottom:unset!important}.btn:hover{transform:translateY(-1px);transition:all .2s ease}.card:hover{transform:translateY(-2px);transition:all .3s ease}.bg-opacity-10{background-color:rgba(var(--bs-primary-rgb),.1)!important}.cursor-pointer{cursor:pointer}.transition-transform{transition:transform .3s ease}.rotate-180{transform:rotate(180deg)}.card-header:hover{opacity:.9;transition:opacity .2s ease}.card-body{transition:all .3s ease}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.add-review-img{color:#828484;width:65px;display:flex;align-items:center;justify-content:center;order:3px dotted black;background:#f0f2f2;border:1px solid #d5d9d9!important;cursor:pointer}.order-status{border-radius:8px;padding:5px 8px;font-size:16px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.fs-15{font-size:15px}.review-textarea{border:1px solid #e2e8f0;border-radius:8px;font-size:14px;resize:none;background-color:#f8fafc;padding:12px 8px;transition:all .2s ease-in-out}.review-textarea:focus{border-color:#cbd5e1;background-color:#fff;box-shadow:0 0 0 3px #e2e8f080!important;outline:none}.review-upload-box{width:72px;height:72px;border:2px dashed #cbd5e1;border-radius:8px;background-color:#f8fafc;transition:all .2s ease-in-out;color:#64748b}.review-img-thumb{display:inline-block}.review-img-remove{position:absolute;top:-6px;right:-6px;width:18px!important;height:18px;border-radius:50%;background:#ef4444;color:#fff;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 4px #0000002e;transition:background .15s ease,transform .15s ease;z-index:1}.review-img-remove:hover{background:#dc2626;transform:scale(1.1)}.review-upload-box:hover{background-color:#f1f5f9;border-color:#94a3b8;color:#475569}.review-submit-btn{color:#fff!important;border-radius:8px;padding:12px 0;font-size:14px!important;border:none;letter-spacing:.3px;transition:transform .1s ease,box-shadow .2s ease}.review-submit-btn:hover{box-shadow:0 6px 15px #0000001a;transform:translateY(-1px)}.review-submit-btn:active{transform:translateY(1px)}::ng-deep .custom-timeline .custom-marker{display:flex!important;align-items:center!important;justify-content:center!important;width:28px!important;height:28px!important;border-radius:50%!important;z-index:10}::ng-deep .custom-timeline .active-marker{background-color:#fff!important;border-width:6px!important;border-style:solid!important}::ng-deep .custom-timeline .future-marker{background-color:#fff!important;border:5px solid #cbd5e1!important}::ng-deep .custom-timeline .p-timeline-event-marker{border:none!important;background:transparent!important;display:flex!important}::ng-deep .custom-timeline .p-timeline-event-connector{background-color:#cbd5e1!important;width:2px!important}::ng-deep .custom-timeline .p-timeline-event-opposite{display:none!important;flex:0!important;padding:0!important}::ng-deep .custom-timeline .p-timeline-event{min-height:50px}.text-light-grey{color:#94a3b8}.w-40{width:40%}@media (min-width: 576px){.w-sm-40{width:40%!important}}.item-card-pad{padding:16px 20px}.item-thumb{width:72px;height:72px;object-fit:cover;border-radius:8px}.item-name{font-size:14px;line-height:1.4}.item-price{font-size:14px}.item-variant,.item-qty{font-size:12px}.min-w-0{min-width:0}.review-form-box{background:#fff;border:1px solid #f0f0f0;border-radius:12px;padding:14px;box-shadow:0 4px 20px #00000008;overflow:hidden}@media (max-width: 575px){.container-fluid{padding-left:12px!important;padding-right:12px!important}.item-card-pad{padding:12px 14px}.item-thumb{width:60px;height:60px}.item-name,.item-price{font-size:13px}::ng-deep .p-rating-icon{font-size:1.35rem!important;padding:2px!important}.row.gx-5{--bs-gutter-x: 1rem !important}h2.fw-semibold{font-size:1.4rem!important}}\n"] }]
|
|
23215
|
+
], template: "<ng-container *ngIf=\"!isLoading\">\n <div class=\"container-fluid\" [attr.style]=\"customClass\" style=\"background-color: #f8f9fa; min-height: 100vh;\">\n <!-- Main Box -->\n <div class=\"border-0 mx-auto\">\n\n <!-- Back button & Thanks -->\n <div class=\"d-flex align-items-center mb-2\">\n <svg (click)=\"goBack()\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"lucide lucide-chevron-left cp text-muted\">\n <path d=\"m15 18-6-6 6-6\"></path>\n </svg>\n <span class=\"text-muted fw-medium py-1\">Thanks!</span>\n </div>\n\n <!-- Main Headline -->\n <h2 class=\"fw-semibold mb-2 text-dark\" style=\"font-size: 1.75rem;\">\n {{ orderDetailData?.brandOrderDetails?.[0]?.orderStatus?.replaceAll(\"_\", \" \") | titlecase }} \uD83D\uDE80\n </h2>\n <p class=\"text-muted mb-3 fs-15\">\n {{ orderDetailData?.brandOrderDetails?.[0]?.orderStatus === 'DELIVERED' ? 'Your order has been\n delivered. Enjoy!' : (orderDetailData?.brandOrderDetails?.[0]?.orderStatus === 'CANCELLED' ? 'Your order\n was cancelled.' : 'Your order is on the way. It will be shipped. We will inform you.') }}\n </p>\n\n <!-- Colored Line -->\n <div class=\"mb-3\" style=\"height: 3px; width: 100%;\"\n [style.background]=\"'linear-gradient(to right, ' + (styles?.background?.color || '#20c997') + ', transparent)'\">\n </div>\n\n <!-- Order Number & Actions -->\n <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-sm-center mb-3 gap-2\">\n <div class=\"fw-semibold text-dark d-flex align-items-center\">\n Order number:\n <span class=\"ms-1\" [style.color]=\"styles?.background?.color || '#20c997'\">\n {{ orderDetailData?.orderNum }}\n </span>\n </div>\n <button\n class=\"btn receipt-download-btn btn-sm d-inline-flex align-items-center gap-1 shadow-sm fw-medium px-3 py-1\"\n style=\"border-radius: 6px; font-size: 13px;width:max-content\" (click)=\"downloadReceipt()\">\n <mat-icon style=\"font-size: 18px; width: 18px; height: 18px;\">receipt_long</mat-icon>\n <span>Download Receipt</span>\n </button>\n </div>\n\n <!-- Content Grid Layout -->\n <div class=\"row mt-2\">\n <!-- Left Column -->\n <div class=\"col-lg-7 col-xl-8 mb-4\">\n <!-- Items List -->\n <div class=\"card border mb-4 overflow-hidden\"\n style=\"border-color: #eaeaea !important; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.02);\">\n <ng-container\n *ngFor=\"let item of orderDetailData?.brandOrderDetails[0]?.orderedItems; let last = last\">\n <div class=\"item-card-pad\" [ngClass]=\"{'border-bottom': !last}\">\n <div class=\"d-flex gap-3 w-100 align-items-start\">\n <!-- Image -->\n <img loading=\"lazy\"\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n [src]=\"item.imgUrl\" alt=\"{{ item.itemName }}\"\n class=\"rounded shadow-sm flex-shrink-0 item-thumb\">\n\n <!-- Details + Price -->\n <div class=\"flex-grow-1 min-w-0\">\n <div class=\"d-flex align-items-start justify-content-between gap-2\">\n <h6 class=\"fw-bold text-dark mb-1 item-name\">{{ item.itemName }}</h6>\n <!-- Price always visible alongside name -->\n <div class=\"fw-bold text-dark text-nowrap item-price flex-shrink-0\">\n <span [innerHTML]=\"currency\"></span>{{ (item.sellingPrice *\n item.quantity) | number:'1.0-2' }}\n </div>\n </div>\n <p class=\"text-muted small mb-1 item-variant\"\n *ngIf=\"item.variantName || item.customizationDetails\">{{\n item.variantName || 'Regular' }}</p>\n <div class=\"text-muted item-qty\">Qty: {{ item.quantity }}</div>\n\n <!-- Review Section -->\n <div class=\"mt-3 pt-3 border-top\"\n *ngIf=\"orderDetailData?.brandOrderDetails?.[0]?.orderStatus == 'DELIVERED'\">\n\n <div\n class=\"d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-between mb-2 gap-2\">\n <h6 class=\"fw-bold mb-0 text-dark\" style=\"font-size: 14px;\">Leave a\n Review</h6>\n <p-rating [(ngModel)]=\"item.rating\" [cancel]=\"false\" [readonly]=\"false\"\n (ngModelChange)=\"submitReview(item)\"></p-rating>\n </div>\n\n <div class=\"add-detail-review text-primary fw-medium cursor-pointer d-inline-flex align-items-center gap-1\"\n style=\"font-size: 13px;\" (click)=\"item.showReview = !item.showReview\">\n <mat-icon\n style=\"font-size: 15px; width: 15px; height: 15px;\">mode_edit</mat-icon>\n <span>Write a Detailed Review</span>\n </div>\n\n <div *ngIf=\"item.showReview\" class=\"mt-3 review-form-box\">\n <h6 class=\"fw-semibold text-dark mb-2\" style=\"font-size: 14px;\">Share\n your experience</h6>\n\n <div class=\"mb-3\">\n <textarea class=\"form-control shadow-none review-textarea w-100\"\n [(ngModel)]=\"item.review\" rows=\"3\"\n placeholder=\"What did you like or dislike? How was the fit and quality?\"></textarea>\n </div>\n\n <div class=\"mb-3\">\n <h6 class=\"fw-medium text-muted mb-2\" style=\"font-size: 13px;\">\n Attach Photos <span\n style=\"font-size: 11px; opacity: 0.7;\">(Optional)</span>\n </h6>\n <div class=\"d-flex gap-2 flex-wrap align-items-center\">\n <div class=\"position-relative review-img-thumb\"\n *ngFor=\"let img of item?.reviewImages ?? []; let imgIdx = index\">\n <img [src]=\"img.imgUrl\" alt=\"\"\n style=\"width: 60px; height: 60px; object-fit: cover; border-radius: 8px; border: 1px solid #e2e8f0;\">\n <button class=\"review-img-remove\"\n (click)=\"item.reviewImages.splice(imgIdx, 1)\"\n title=\"Remove image\">\n <mat-icon\n style=\"font-size: 12px; width: 12px; height: 12px; line-height: 12px;\">close</mat-icon>\n </button>\n </div>\n\n <div class=\"d-flex align-items-center justify-content-center cursor-pointer review-upload-box\"\n (click)=\"reviewFileInput.click()\">\n <mat-icon\n style=\"font-size: 22px; width: 22px; height: 22px;\">add_photo_alternate</mat-icon>\n </div>\n <input type=\"file\" name=\"myfile\" multiple hidden\n accept=\"image/jpg,image/jpeg,image/gif,image/png,application/pdf,image/x-eps\"\n (change)=\"uploadImage($event, item)\" class=\"pc-btn\"\n #reviewFileInput />\n </div>\n </div>\n\n <button\n class=\"btn w-100 fw-bold d-flex justify-content-center align-items-center gap-2 review-submit-btn\"\n [style.background]=\"styles?.background?.color || '#20c997'\"\n (click)=\"submitReview(item)\">\n Submit Review\n <mat-icon\n style=\"font-size: 18px; width: 18px; height: 18px;\">send</mat-icon>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n </div>\n\n <!-- Summary Section -->\n <div class=\"row gx-5\">\n <!-- Left: Address & Payment -->\n <div class=\"col-md-6 mb-4 mb-md-0 d-flex flex-column gap-4\">\n <div>\n <h6 class=\"text-dark mb-2\" style=\"font-size: 13px; font-weight: 600;\">Shipping Address\n </h6>\n <div class=\"text-dark\" style=\"font-size: 13px;\">\n <span class=\"d-block mb-1\">{{ orderDetailData?.addressDetails?.receiverName\n }}</span>\n <span class=\"text-muted d-block\" style=\"line-height: 1.5; max-width: 280px;\">\n {{ orderAddress }}<br>\n {{ orderDetailData?.addressDetails?.receiverPhone }}\n </span>\n </div>\n </div>\n\n <div>\n <h6 class=\"text-dark mb-2\" style=\"font-size: 13px; font-weight: 600;\">Payment</h6>\n <div class=\"d-flex align-items-center gap-3\">\n <span class=\"text-primary fw-bolder fs-5\"\n *ngIf=\"getKey(orderDetailData?.paymentDetails)!=='COD'\"\n style=\"font-family: Arial, sans-serif; letter-spacing: -0.5px;\">VISA</span>\n <mat-icon *ngIf=\"getKey(orderDetailData?.paymentDetails)==='COD'\" class=\"text-muted\"\n style=\"font-size: 28px; width: 28px; height: 28px;\">payments</mat-icon>\n\n <div>\n <div class=\"text-dark\" style=\"font-size: 13px;\">\n {{orderDetailData?.paymentDetails ?\n (getKey(orderDetailData?.paymentDetails)==='COD' ? 'Cash on Delivery':\n getKey(orderDetailData?.paymentDetails) ) : 'N/A'}}</div>\n <div class=\"text-muted\" style=\"font-size: 12px; letter-spacing: 0.5px;\"\n *ngIf=\"getKey(orderDetailData?.paymentDetails)!=='COD'\">**** **** **** 1234\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Right: Bill Details -->\n <div class=\"col-md-6 pt-1\">\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <span class=\"text-muted\" style=\"font-size: 13px;\">Subtotal</span>\n <span class=\"text-dark fw-medium\" style=\"font-size: 13px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.totalNetValue |\n number:'1.0-2' }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2\"\n *ngIf=\"orderDetailData?.billDetails?.discountAmount\">\n <span class=\"text-muted\" style=\"font-size: 13px;\">Discount</span>\n <span class=\"text-success fw-medium\" style=\"font-size: 13px;\">\n -<span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount\n |\n number:'1.0-2' }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <span class=\"text-muted\" style=\"font-size: 13px;\">Shipping</span>\n <span class=\"text-dark fw-medium\"\n style=\"font-size: 13px;\">{{orderDetailData?.billDetails.deliveryCharges ?\n orderDetailData?.billDetails.deliveryCharges : 'FREE'}}</span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <span class=\"text-muted\" style=\"font-size: 13px;\">Estimated Tax</span>\n <span class=\"text-dark fw-medium\" style=\"font-size: 13px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount\n ?\n orderDetailData?.billDetails?.totalTaxAfterDiscount :\n orderDetailData?.billDetails?.totalTax\n | number:'1.0-2' }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2 text-success\"\n *ngIf=\"orderDetailData?.rewardUsed === 'REWARD_POINTS'\">\n <span style=\"font-size: 13px;\">Reward Amount</span>\n <span class=\" fw-medium\" style=\"font-size: 13px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.pointsConvertedINR }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2 text-success\"\n *ngIf=\"orderDetailData?.rewardUsed === 'VOUCHER'\">\n <span style=\"font-size: 13px;\">Reward Amount</span>\n <span class=\" fw-medium\" style=\"font-size: 13px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData.voucherValue }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center mb-2\"\n *ngIf=\"orderDetailData?.billDetails?.orraSchemeRedeemedAmount\">\n <span class=\"text-muted\" style=\"font-size: 13px;\">Redeem Amount</span>\n <span class=\"text-dark fw-medium\" style=\"font-size: 13px;\">\n -<span [innerHTML]=\"currency\"></span>{{\n orderDetailData?.billDetails?.orraSchemeRedeemedAmount | number:'1.0-2' }}\n </span>\n </div>\n\n <hr class=\"text-muted my-3\" style=\"opacity: 0.15;\">\n\n <div class=\"d-flex justify-content-between align-items-center\">\n <span class=\"text-dark\" style=\"font-size: 14px; font-weight: 600;\">Total</span>\n <span class=\"text-dark fw-bold\" style=\"font-size: 16px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center text-success\"\n *ngIf=\"orderDetailData?.rewardUsed === 'REWARD_POINTS'\">\n <span style=\"font-size: 14px; font-weight: 600;\">Amount Paid</span>\n <span class=\"fw-bold\" style=\"font-size: 16px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice ===\n orderDetailData?.pointsConvertedINR ? '0' :\n (orderDetailData?.billDetails?.finalPrice - orderDetailData?.pointsConvertedINR) }}\n </span>\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center text-success\"\n *ngIf=\"orderDetailData?.rewardUsed === 'VOUCHER'\">\n <span style=\"font-size: 14px; font-weight: 600;\">Amount Paid</span>\n <span class=\"fw-bold\" style=\"font-size: 16px;\">\n <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice ===\n orderDetailData?.voucherValue ? '0' : (orderDetailData?.billDetails?.finalPrice -\n orderDetailData?.voucherValue) }}\n </span>\n </div>\n\n <div class=\"mt-3 pt-2\">\n <button\n class=\"btn w-100 receipt-download-btn d-flex align-items-center justify-content-center gap-2 fw-medium py-2\"\n style=\"border-radius: 8px; font-size: 13px; width:max-content\"\n (click)=\"downloadReceipt()\">\n <mat-icon\n style=\"font-size: 18px; width: 18px; height: 18px;\">file_download</mat-icon>\n <span>Download Receipt</span>\n </button>\n </div>\n\n </div>\n </div>\n\n </div>\n\n <!-- Right Column -->\n <div class=\"col-lg-5 col-xl-4\">\n <!-- Timeline Card -->\n <div class=\"card border p-4 mb-4\"\n style=\"border-color: #eaeaea !important; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.02);\"\n *ngIf=\"orderDetailData?.orderTrackingLink || (orderTimiline && orderTimiline.length > 0)\">\n <div class=\"d-flex align-items-center justify-content-between mb-4 pb-3 border-bottom\">\n <h5 class=\"fw-bold mb-0 text-dark d-flex align-items-center gap-2\" style=\"font-size: 16px;\">\n <mat-icon style=\"color: #6c757d;\">timeline</mat-icon> Order Timeline\n </h5>\n\n <div *ngIf=\"orderDetailData?.orderTrackingLink\"\n class=\"d-inline-flex align-items-center gap-1 cursor-pointer fw-medium\"\n [style.color]=\"styles?.background?.color || '#0d6efd'\" style=\"font-size: 13px;\"\n (click)=\"trackOrder()\">\n <mat-icon\n style=\"font-size: 15px; width: 15px; height: 15px;\">location_searching</mat-icon>\n <span style=\"text-decoration: underline; text-underline-offset: 3px;\">Track Order</span>\n </div>\n </div>\n\n <div class=\"px-2 pt-2\" *ngIf=\"orderTimiline && orderTimiline.length > 0\">\n <p-timeline [value]=\"orderTimiline\" styleClass=\"custom-timeline\" align=\"left\">\n <ng-template pTemplate=\"marker\" let-event>\n <!-- Completed -->\n <span class=\"custom-marker completed-marker\"\n *ngIf=\"event.statusType === 'completed' || event.statusType === 'delivered'\"\n [style.backgroundColor]=\"styles?.background?.color || '#059669'\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"3\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n </span>\n\n <!-- Active -->\n <span class=\"custom-marker active-marker\" *ngIf=\"event.statusType === 'active'\"\n [style.borderColor]=\"styles?.background?.color || '#059669'\"></span>\n\n <!-- Future -->\n <span class=\"custom-marker future-marker\"\n *ngIf=\"event.statusType === 'future'\"></span>\n </ng-template>\n\n <ng-template pTemplate=\"content\" let-event let-last=\"last\">\n <div class=\"ms-4\" [ngClass]=\"{'pb-4': !last}\">\n <div class=\"fw-semibold text-dark\" style=\"font-size: 15px; margin-bottom: 2px;\">\n {{\n event.name?.replaceAll(\"_\", \" \") | titlecase }}</div>\n <div style=\"font-size: 14px;\"\n [ngClass]=\"{'text-muted': event.statusType !== 'future', 'text-light-grey': event.statusType === 'future'}\">\n {{ event.date ? (event.date | date:'MMM d, h:mm a') : 'Not yet' }}\n </div>\n </div>\n </ng-template>\n </p-timeline>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n</ng-container>\n\n<!-- Loading Skeleton -->\n<div class=\"container-fluid py-4\" *ngIf=\"isLoading\" style=\"background-color: #f8f9fa; min-height: 100vh;\">\n <div class=\"mx-auto\" style=\"max-width: 1000px;\">\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '60vh',\n 'border-radius': '12px',\n 'margin': '20px 0'\n }\"></ngx-skeleton-loader>\n </div>\n</div>", styles: [".right{height:250px;padding:15px;background-color:#f8f8f8;border-radius:8px;color:#000}*{font-family:var(--website-font-family)}hr{border-top-width:2px;margin:15px 0}.f-13{font-size:13px}.f-16{font-size:16px}.fw-800{font-weight:800}.br-6{border-radius:6px}textarea{resize:unset}.action-btn>button{font-size:14px!important;border:none;width:fit-content!important;margin-top:5px;border-radius:3px;padding:5px 10px;background-color:tomato;color:#fff}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}.onlyMobile{display:none}.track-order{background-color:#000;color:#fff;border:1px solid black;width:auto;border-radius:3px;padding:5px}@media only screen and (max-width: 475px){.onlyDesktop{display:none!important}.onlyMobile{display:block}.mat-icon{width:46px}.time-line{padding-bottom:6px}.right{width:98%!important;margin-bottom:4px!important;height:auto!important;padding:15px!important;margin-top:5%}.main-section{width:100%!important;flex-direction:column!important}.left{width:100%!important;padding:3%}.orderNum{margin-bottom:25px}}@media (min-width:768px) and (max-width:1024px){.left{padding:3%;width:70%}.right{width:28%!important;padding:2%;margin-top:10%;margin-right:3%}}.mt-25{margin-top:25px}.cp{cursor:pointer}.item-summary{box-shadow:0 0 4px #00000040;border-radius:12px}mat-icon{font-family:Material Icons!important}::ng-deep .p-rating-icon{color:#ffc107!important;font-size:1.25rem!important}::ng-deep .p-timeline-event-content{padding:0!important}::ng-deep .p-timeline-event-connector{background:#000!important;width:3px!important;position:absolute;bottom:-10px;height:55px;left:12px}.sbt-btn{border-radius:8px}::ng-deep .p-timeline-event-marker{display:none!important}@media screen and (min-width: 1200px){.scroll-45{overflow-y:scroll;height:45vh}.scroll-60{overflow-y:scroll;height:60vh}}.f-16{font-size:16px!important}.f-13{font-size:13px!important}@media (max-width: 575.98px){.display-6{font-size:1.5rem}.h3{font-size:1.25rem}}.gap-3{gap:1rem!important}.shadow-sm{box-shadow:0 .125rem .5rem #0000001a!important}.card-header{border-bottom:unset!important}.btn:hover{transform:translateY(-1px);transition:all .2s ease}.card:hover{transform:translateY(-2px);transition:all .3s ease}.bg-opacity-10{background-color:rgba(var(--bs-primary-rgb),.1)!important}.cursor-pointer{cursor:pointer}.transition-transform{transition:transform .3s ease}.rotate-180{transform:rotate(180deg)}.card-header:hover{opacity:.9;transition:opacity .2s ease}.card-body{transition:all .3s ease}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.add-review-img{color:#828484;width:65px;display:flex;align-items:center;justify-content:center;order:3px dotted black;background:#f0f2f2;border:1px solid #d5d9d9!important;cursor:pointer}.order-status{border-radius:8px;padding:5px 8px;font-size:16px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.fs-15{font-size:15px}.review-textarea{border:1px solid #e2e8f0;border-radius:8px;font-size:14px;resize:none;background-color:#f8fafc;padding:12px 8px;transition:all .2s ease-in-out}.review-textarea:focus{border-color:#cbd5e1;background-color:#fff;box-shadow:0 0 0 3px #e2e8f080!important;outline:none}.review-upload-box{width:72px;height:72px;border:2px dashed #cbd5e1;border-radius:8px;background-color:#f8fafc;transition:all .2s ease-in-out;color:#64748b}.review-img-thumb{display:inline-block}.review-img-remove{position:absolute;top:-6px;right:-6px;width:18px!important;height:18px;border-radius:50%;background:#ef4444;color:#fff;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 4px #0000002e;transition:background .15s ease,transform .15s ease;z-index:1}.review-img-remove:hover{background:#dc2626;transform:scale(1.1)}.review-upload-box:hover{background-color:#f1f5f9;border-color:#94a3b8;color:#475569}.review-submit-btn{color:#fff!important;border-radius:8px;padding:12px 0;font-size:14px!important;border:none;letter-spacing:.3px;transition:transform .1s ease,box-shadow .2s ease}.review-submit-btn:hover{box-shadow:0 6px 15px #0000001a;transform:translateY(-1px)}.review-submit-btn:active{transform:translateY(1px)}::ng-deep .custom-timeline .custom-marker{display:flex!important;align-items:center!important;justify-content:center!important;width:28px!important;height:28px!important;border-radius:50%!important;z-index:10}::ng-deep .custom-timeline .active-marker{background-color:#fff!important;border-width:6px!important;border-style:solid!important}::ng-deep .custom-timeline .future-marker{background-color:#fff!important;border:5px solid #cbd5e1!important}::ng-deep .custom-timeline .p-timeline-event-marker{border:none!important;background:transparent!important;display:flex!important}::ng-deep .custom-timeline .p-timeline-event-connector{background-color:#cbd5e1!important;width:2px!important}::ng-deep .custom-timeline .p-timeline-event-opposite{display:none!important;flex:0!important;padding:0!important}::ng-deep .custom-timeline .p-timeline-event{min-height:50px}.text-light-grey{color:#94a3b8}.w-40{width:40%}@media (min-width: 576px){.w-sm-40{width:40%!important}}.item-card-pad{padding:16px 20px}.item-thumb{width:72px;height:72px;object-fit:cover;border-radius:8px}.item-name{font-size:14px;line-height:1.4}.item-price{font-size:14px}.item-variant,.item-qty{font-size:12px}.min-w-0{min-width:0}.review-form-box{background:#fff;border:1px solid #f0f0f0;border-radius:12px;padding:14px;box-shadow:0 4px 20px #00000008;overflow:hidden}@media (max-width: 575px){.container-fluid{padding-left:12px!important;padding-right:12px!important}.item-card-pad{padding:12px 14px}.item-thumb{width:60px;height:60px}.item-name,.item-price{font-size:13px}::ng-deep .p-rating-icon{font-size:1.35rem!important;padding:2px!important}.row.gx-5{--bs-gutter-x: 1rem !important}h2.fw-semibold{font-size:1.4rem!important}}.receipt-download-btn{background-color:transparent!important;color:#212529!important;border:1px solid #212529!important;transition:none!important}.receipt-download-btn:hover,.receipt-download-btn:focus,.receipt-download-btn:active{background-color:transparent!important;color:#212529!important;border-color:#212529!important;box-shadow:none!important;transform:none!important}\n"] }]
|
|
23080
23216
|
}], ctorParameters: () => [{ type: EventsService }, { type: StorageServiceService }, { type: RestService }, { type: i6$1.MessageService }, { type: ImageUplaodService }], propDecorators: { responseData: [{
|
|
23081
23217
|
type: Input
|
|
23082
23218
|
}], data: [{
|
|
@@ -23094,6 +23230,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
23094
23230
|
args: ["orderDetailData"]
|
|
23095
23231
|
}], goBackEmitter: [{
|
|
23096
23232
|
type: Output
|
|
23233
|
+
}], downloadReceiptEmitter: [{
|
|
23234
|
+
type: Output
|
|
23097
23235
|
}] } });
|
|
23098
23236
|
|
|
23099
23237
|
class UserBasicInfoComponent {
|
|
@@ -24085,7 +24223,7 @@ class UserProfileComponent extends BaseSection {
|
|
|
24085
24223
|
this.getAllSchemes();
|
|
24086
24224
|
}
|
|
24087
24225
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserProfileComponent, deps: [{ token: i2$2.Router }, { token: EventsService }, { token: RestService }, { token: StorageServiceService }, { token: CartService }, { token: i1$2.MatDialog }, { token: i8$2.MatBottomSheet }, { token: i2$1.CookieService }, { token: i6$1.MessageService }, { token: i1.DomSanitizer }, { token: i2$2.ActivatedRoute }, { token: LOCAL_STORAGE }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
24088
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [spacingHorizontal]=\"styles?.layout\" [ngStyle]=\"{'max-height': '100vh', 'z-index': isMobile ? '100000000' : ''}\"\r\n [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"p-4 profile-box\" style=\"width: 25%; border-radius: 20px; height: fit-content\"\r\n [style.order]=\"styles?.swap ? '1' : '0'\">\r\n\r\n <!-- Profile Header Section -->\r\n <div class=\"d-flex align-items-center profile-header\"\r\n style=\"gap: 15px; height: 80px; margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 15px; backdrop-filter: blur(10px);\">\r\n <div class=\"profile-image-wrapper\" style=\"position: relative;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100 profile-icon\"\r\n style=\"border: 3px solid #e3f2fd; transition: all 0.3s ease;\">\r\n <div class=\"online-indicator\"\r\n style=\"position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4caf50; border: 2px solid white; border-radius: 50%;\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"profile-details flex-grow-1\">\r\n <h4 class=\"font-weight-bold mb-2\" style=\"color: #2c3e50; font-size: 1.1rem; margin-bottom: 8px;\">\r\n {{getUserDetails?.contact?.name}}</h4>\r\n\r\n <div class=\"contact-info\" style=\"display: flex; flex-direction: column; gap: 6px;\">\r\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n *ngIf=\"getUserDetails?.contact?.mobile?.length\"\r\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">stay_primary_portrait</mat-icon>\r\n <span>{{getUserDetails?.contact?.mobile}}</span>\r\n </h6>\r\n\r\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n *ngIf=\"getUserDetails?.contact?.email?.length\"\r\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">mail_outline</mat-icon>\r\n <span class=\"w-100 text-overflow\">{{getUserDetails?.contact?.email}}</span>\r\n </h6>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Navigation Tabs Section -->\r\n <div class=\"tabs-container\" style=\"margin-bottom: 20px;\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center tab-item\"\r\n style=\"gap: 12px; cursor: pointer; padding: 16px 12px; margin: 2px 0; border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden;\"\r\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '1px solid rgba(0,0,0,0.06)' : ''\"\r\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\"\r\n [style.backgroundColor]=\"tab.status ? styles?.background?.color : 'transparent'\"\r\n [style.borderColor]=\"tab.status ? styles?.background?.accentColor : 'transparent'\">\r\n <div class=\"tab-icon-wrapper\"\r\n style=\"width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\">\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n style=\"height: 20px; width: 20px; object-fit: contain; transition: transform 0.3s ease;\">\r\n </div>\r\n\r\n <div class=\"tab-label font-weight-normal\" style=\"font-size: 0.9rem; transition: all 0.3s ease;\">\r\n {{tab.value}}</div>\r\n\r\n <!-- Hover effect background -->\r\n <div class=\"tab-hover-bg\"\r\n style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,123,255,0.05) 0%, rgba(0,123,255,0.02) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1;\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- Action Buttons Section -->\r\n <div class=\"d-flex action-buttons\"\r\n style=\"gap: 10px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.06);\">\r\n <button class=\"edit-btn flex-grow-1\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\"\r\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; background: transparent; border: 2px solid; transition: all 0.3s ease; position: relative; overflow: hidden;\">\r\n Edit Profile\r\n </button>\r\n\r\n <button class=\"logout-btn flex-grow-1\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\"\r\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; border: none; color: white; transition: all 0.3s ease;\">\r\n Logout\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"orders-sec\" [style.order]=\"styles?.swap ? '0' : '1'\">\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Details'\">\r\n <ng-container *ngTemplateOutlet=\"SchemeDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Transactions'\">\r\n <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n <simpo-list-home-appointment></simpo-list-home-appointment>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Referrals'\">\r\n <ng-container *ngTemplateOutlet=\"Referrals\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Rewards'\">\r\n <ng-container *ngTemplateOutlet=\"Rewards\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <div class=\"w-100 position-relative mobile-height\" style=\"height: 80vh;\">\r\n <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\"\r\n *ngIf=\"selectedSidePanelTab != 'Scheme_Details'\">\r\n <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\"\r\n (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n </div>\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"''\">\r\n <section class=\"top-sec\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\"\r\n style=\"width: 50px; height: 50px;\">\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\">\r\n <mat-icon>stay_primary_portrait</mat-icon>\r\n <span>{{getUserDetails?.contact?.mobile}}</span>\r\n </h6>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\"\r\n *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon>\r\n <span>{{getUserDetails?.contact?.email}}</span>\r\n </h6>\r\n </div>\r\n </section>\r\n <section class=\"list-sec\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\"\r\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\"\r\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n [style.color]=\"styles?.background?.accentColor\">\r\n <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">\r\n {{tab.value}}</div>\r\n </div>\r\n\r\n </ng-container>\r\n </section>\r\n <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\r\n <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\">Logout</button>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Transactions'\">\r\n <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n <simpo-list-home-appointment></simpo-list-home-appointment>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Referrals'\">\r\n <ng-container *ngTemplateOutlet=\"Referrals\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Rewards'\">\r\n <ng-container *ngTemplateOutlet=\"Rewards\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isEcommerce]=\"true\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n</section>\r\n\r\n<ng-template #Referrals>\r\n <iframe [src]=\"getMyReferralsUrl\" frameborder=\"0\" width=\"100%\" height=\"100%\"></iframe>\r\n</ng-template>\r\n<ng-template #Rewards>\r\n <iframe [src]=\"getRewardsUrl\" frameborder=\"0\" width=\"100%\" height=\"100%\"></iframe>\r\n</ng-template>\r\n<ng-template #OrderSection>\r\n <h3 class=\"onlyDesktop mb-3\">My Orders</h3>\r\n <!-- <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n <ng-container *ngFor=\"let tab of tabs\">\r\n <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">\r\n {{tab.value}}</div>\r\n </ng-container>\r\n </div> -->\r\n <div class=\"order-list\">\r\n <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #showEmptyScreen>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <div class=\"cart-text \">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <div class=\"heading-medium d-flex justify-content-center content-side\"\r\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n <simpo-text-editor [(value)]=\"text.value\"\r\n [editable]=\"edit || false\" [isRTE]=\"text.isRTE\"></simpo-text-editor>\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\"\r\n (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n <div class=\"d-flex justify-content-between mb-2\">\r\n <h3 class=\"title-text\">My Address</h3>\r\n <button class=\"address-btn\" (click)=\"addNewAddress()\"\r\n [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n <div class=\"address-list\">\r\n <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\r\n <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n <div class=\"card border-0 mb-2 cursor-pointer order-card \" [style.width]=\"getProductWidth\">\r\n <div class=\"card-body p-3\">\r\n <!-- Header Section -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n <div class=\"address-info d-flex align-items-center justify-content-between w-100\">\r\n <h4 class=\"mb-0 fw-semibold\">{{address.receiverName}}</h4>\r\n <div class=\"icon-grp d-flex\">\r\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n (click)=\"editAddress(idx)\">edit</mat-icon>\r\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"address-content mb-3\">\r\n <div class=\"address-line mb-2\">\r\n <span class=\"text-muted small d-block\">Address</span>\r\n <span class=\"address-text\">{{address.addressLine1}}</span>\r\n </div>\r\n <div class=\"phone-info\">\r\n <span class=\"text-muted small d-block\">Phone</span>\r\n <span class=\"phone-number fw-bold\">{{address.receiverPhone}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-template #showEmptyAddress>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\r\n <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery\r\n </div>\r\n <!-- </ng-container> -->\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n <h3 class=\"onlyDesktop\">My Accounts</h3>\r\n</ng-template>\r\n<ng-template #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 border-0 mb-2 cursor-pointer order-card\">\r\n <div class=\"card-body p-3\" [style.--background-color]=\"styles?.background?.color\">\r\n <!-- Header Section -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n <div class=\"order-number\">\r\n <h4 class=\"mb-0 fw-semibold\">{{\"Order\" + \" \" + order.orderNum}}</h4>\r\n </div>\r\n <div class=\"arrow-icon\">\r\n <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"ordered-item row mb-2\">\r\n <ng-container *ngFor=\"let item of getOrderedItems(order)\">\r\n <div class=\"item-card col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img [src]=\"item?.imgUrl\" alt=\"Product Image\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"item-img w-50\">\r\n <div class=\"cart-item-name\">{{item?.itemName}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <!-- Middle Section -->\r\n <div class=\"order-details\">\r\n <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-1\">\r\n <span class=\"text-muted small mb-3 mb-sm-0\">\r\n {{order.createdTimeStamp | date: 'dd MMMM yyyy'}}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"amount-section\">\r\n <span class=\"h5 mb-0 text-success fw-bold\">\r\n <span [innerHTML]=\"currency\"></span>\r\n <!-- {{(order.billDetails.discountAmount ?\r\n (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +\r\n order?.billDetails?.totalTaxAfterDiscount) :\r\n order.billDetails.totalGrossValue) | number:'1.0-2'}} -->\r\n {{getTotalAmtPaid(order) | number:'1.0-2'}}\r\n </span>\r\n </div>\r\n <div class=\"status-section\">\r\n <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">\r\n {{order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | titlecase}}\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mt-1\" *ngIf=\"order.rewardUsed === 'REWARD_POINTS'\">\r\n <div class=\"fs-14 text-secondary\">\r\n Amount Paid -\r\n <span class=\"text-success fw-bold\">\u20B9 {{ getTotalAmtPaid(order) === order.pointsConvertedINR ? '0' :\r\n (getTotalAmtPaid(order) - order.pointsConvertedINR) }}</span>\r\n </div>\r\n <div class=\"fs-14 text-secondary\">\r\n Rewarded Amount - <span class=\"text-success fw-bold\">\u20B9 {{order.pointsConvertedINR}}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mt-1\" *ngIf=\"order.rewardUsed === 'VOUCHER'\">\r\n <div class=\"fs-14 text-secondary\">\r\n Amount Paid -\r\n <span class=\"text-success fw-bold\">\u20B9 {{ getTotalAmtPaid(order) === order.voucherValue ? '0' :\r\n (getTotalAmtPaid(order) - order.voucherValue) }}</span>\r\n </div>\r\n <div class=\"fs-14 text-secondary\">\r\n Rewarded Amount - <span class=\"text-success fw-bold\">\u20B9 {{order.voucherValue}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #WishlistDetails>\r\n <h3 class=\"onlyDesktop\">My Wishlist</h3>\r\n <div class=\"wishlist-list\" *ngIf=\"wishlistData?.length; else showEmptyWishlistScreen\">\r\n <div class=\"d-flex flex-wrap\" style=\"gap: 10px;\">\r\n <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n <div class=\"address-card mb-2\">\r\n <div class=\"card-body p-4\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-auto\">\r\n <div class=\"product-image-wrapper\">\r\n <img loading=\"lazy\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"product-img rounded\" [src]=\"item.imgUrl\" alt=\"Product Image\">\r\n </div>\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"product-details\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div\r\n class=\"col-auto text-end d-flex justify-content-between align-items-center w-100\">\r\n <h6 class=\"product-name mb-2 fw-semibold text-dark\">\r\n {{item.itemName}}\r\n </h6>\r\n <div class=\"delete-action\" *ngIf=\"!isMobile\">\r\n <button class=\"btn btn-sm delete-btn\" (click)=\"deleteFromWhislist(item)\"\r\n title=\"Remove from wishlist\">\r\n <mat-icon class=\"small-icon\">delete</mat-icon>\r\n </button>\r\n </div>\r\n <div class=\"delete-action mt-2\" *ngIf=\"isMobile\">\r\n <button class=\"btn btn-sm w-100\" (click)=\"deleteFromWhislist(item)\">\r\n <mat-icon class=\"small-icon me-1\">delete</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"product-price mb-3\">\r\n <span class=\"h5 text-success fw-bold mb-0\">\r\n <span [innerHTML]='currency'></span>{{item.discountedPrice}}\r\n </span>\r\n <span class=\"text-muted small ms-2\" *ngIf=\"item.quantity\">\r\n ({{item.quantity}} items)\r\n </span>\r\n </div>\r\n <div class=\"action-buttons d-flex gap-2\">\r\n <div class=\"quantity-controls d-flex align-items-center w-50 justify-content-center\"\r\n *ngIf=\"item.quantity\">\r\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n (click)=\"addToFav(item, 'SUBSTRACT')\">\r\n -\r\n </button>\r\n <span class=\"quantity-display px-3 py-1 bg-light rounded mx-1\">\r\n {{item.quantity}}\r\n </span>\r\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n (click)=\"addToFav(item, 'ADD')\"> +\r\n </button>\r\n </div>\r\n <button class=\"btn btn-sm w-50\" *ngIf=\"!item.quantity\"\r\n (click)=\"addToFav(item, 'ADD')\">\r\n + Add Quantity\r\n </button>\r\n <button class=\"btn btn-sm w-50\" (click)=\"moveToCart(item)\">\r\n Move to Cart\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n <ng-template #showEmptyWishlistScreen>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container>\r\n <div class=\"heading-medium d-flex justify-content-center\">\r\n Your Wishlist is Empty</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #SchemeDetails>\r\n <div class=\"header mb-3 f-18 fw-600\">Current Scheme Enrollments - 4</div>\r\n <div class=\"row gap-2\">\r\n <ng-container *ngFor=\"let scheme of [1,1,1,1]\">\r\n <div class=\"cards d-flex flex-column w-32 mb-2 p-0 \">\r\n <div class=\"card-header row gap-2\">\r\n <div class=\"card-head-left col-7\">\r\n <div class=\"scheme-type fs-15 fw-600\">Group Investment Scheme</div>\r\n <div class=\"scheme-id fw-600\">GIS6K_000231004</div>\r\n </div>\r\n <div class=\"card-head-right col-4 text-center align-content-center\">\r\n <div class=\"scheme-amount fw-600\">\u20B96,000/M</div>\r\n </div>\r\n </div>\r\n <div class=\"card-body d-flex p-0 mb-3\">\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/425719c1752566628577star.png\" alt=\"\"\r\n class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">\u20B913,800</div>\r\n <div class=\"card-sub-text text-center\">Total Acheived</div>\r\n </div>\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/229997c1752567131192brand_7959220.png\"\r\n alt=\"\" class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">\u20B91,000</div>\r\n <div class=\"card-sub-text text-center\">Rewards</div>\r\n </div>\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/760761c1752567279970calendar (1).png\"\r\n alt=\"\" class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">8</div>\r\n <div class=\"card-sub-text text-center\">Due Months</div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer row\">\r\n <div class=\"col-6 d-flex gap-2 p-0\">\r\n <span class=\"footer-text text-nowrap\">Start On :</span><span class=\"date-text text-nowrap\">30\r\n may 2025</span>\r\n </div>\r\n <div class=\"col-6 d-flex gap-2 p-0\">\r\n <span class=\"footer-text text-nowrap\">Maturity On :</span><span class=\"date-text text-nowrap\">25\r\n may 2026</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n<ng-template #SchemePassbook>\r\n <div class=\"w-100 h-100 overflow-scroll passbook_container\">\r\n <div class=\"header d-flex flex-column\">\r\n <div class=\"d-flex align-items-center justify-content-end mb-3\" *ngIf=\"storeListing.length >= 2\"><select\r\n class=\"store-listing\" (change)=\"changeStore($event)\">\r\n <option value=\"\">Select Store</option>\r\n <option [value]=\"store.id\" *ngFor=\"let store of storeListing\">{{store.storeName}}</option>\r\n </select></div>\r\n <div class=\"scheme-overview d-flex flex-column\">\r\n <div class=\"d-flex gap-2\">\r\n <div class=\"available-savings\">\r\n <div class=\"d-flex align-items-center gap-1 w-100 justify-content-between\">\r\n <h3>Available Savings</h3>\r\n <span class=\"amount_logo\">\uD83D\uDCB0</span>\r\n </div>\r\n\r\n <div class=\"amount\">{{totalSavings ? totalSavings :\r\n '0'}}</div>\r\n </div>\r\n <div class=\"active-schemes\">\r\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n <h3>Active Passbooks</h3>\r\n <div class=\"auto-pay-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\r\n </div>\r\n </div>\r\n <div class=\"scheme-count\">{{totalSchemes?.length ?\r\n totalSchemes.length : '0'}}</div>\r\n <div class=\"subtitle\">On Track</div>\r\n </div>\r\n <div class=\"active-schemes\" *ngIf=\"totalAccumulatedGold > 0\">\r\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n <h3>Accumulated Gold </h3>\r\n <div class=\"auto-pay-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/153448c1756808418216accumulated_icon.png\">\r\n </div>\r\n </div>\r\n <div class=\"scheme-count\">{{totalAccumulatedGold}} gms</div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"overAllDues?.length\">\r\n <div class=\"section d-flex-flex-column gap-2\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Due Payments</h2>\r\n </div>\r\n <div class=\"payment-list d-flex flex-column gap-2\">\r\n <ng-container *ngIf=\"overAllDues?.length; else showEmptyPayment\">\r\n <div class=\"payment-item overdue\" *ngFor=\"let payment of overAllDues\">\r\n <div class=\"payment-info\">\r\n <div class=\"payment-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/403142c1753435378127Background.svg\">\r\n <!-- <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\"\r\n *ngIf=\"!payment.overdueStatus && payment.paymentStatus === 'PAID'\"> -->\r\n </div>\r\n <div class=\"payment-details\">\r\n <h4>{{payment.schemeName}} - {{payment.emiMonthCount}}rd EMI</h4>\r\n <span>Date {{payment.dueDate ? (payment.dueDate | date:'dd-MM-yyyy') :\r\n 'N/A'}}\r\n <!-- <span *ngIf=\"payment.overdueStatus\">| Due by: {{payment.daysOverdue\r\n ? payment.daysOverdue : 0}}</span> --></span>\r\n </div>\r\n </div>\r\n <div class=\"payment-amount\">\r\n <div class=\"amount-value\">\u20B9{{payment.dueAmount ? payment.dueAmount :\r\n '0'}}\r\n </div>\r\n <div class=\"payment-status overdue-status cursor-pointer\"\r\n (click)=\"payDue(payment)\">\r\n <ng-container *ngIf=\"!payDueLoader\">Pay Now</ng-container>\r\n <ng-container *ngIf=\"payDueLoader\">Loading...</ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #showEmptyPayment>\r\n <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n <span>No Due Payments</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"section mt-3\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Your Active Passbooks</h2>\r\n </div>\r\n\r\n <div class=\"schemes-grid\">\r\n <ng-container *ngIf=\"totalSchemes && totalSchemes.length > 0; else showActiveScheme\">\r\n <div class=\"scheme-card d-flex flex-column gap-2 cursor-pointer\"\r\n *ngFor=\"let scheme of totalSchemes; let i = index\" (click)=\"viewSchemeDetails(scheme)\">\r\n <div class=\"scheme-header\">\r\n <div>\r\n <div class=\"scheme-title\">{{ scheme?.schemeName || 'N/A' }}</div>\r\n <div class=\"scheme-amount\">\u20B9{{ scheme?.installmentAmount || '0' }}/Monthly</div>\r\n </div>\r\n <div class=\"scheme-date\">\r\n <span>Enrolled: {{ scheme?.createdTimestamp ? (scheme?.createdTimestamp |\r\n date:'dd-MM-yyyy') :\r\n 'N/A' }}</span>\r\n <!-- <span>Maturity: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n 'N/A' }}</span> -->\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-status d-flex justify-content-center align-items-center\"\r\n [ngClass]=\"scheme?.passBookStatus === 'REDEEM_REQUESTED' ? 'redeem_status' : (scheme?.passBookStatus === 'ACTIVE' ? 'active-status' : 'redeem_status')\">\r\n {{\r\n scheme.passBookStatus ? scheme.passBookStatus.replaceAll('_', ' ') : 'N/A'\r\n }}\r\n </div>\r\n\r\n <div class=\"scheme-stats\">\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">{{ scheme?.totalPaidAmount || '0' }}</div>\r\n <div class=\"stat-label\">Deposited Amount</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">\r\n {{\r\n scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n (scheme?.schemePayments?.length -\r\n scheme.dueMonths) : 'N/A'\r\n }}\r\n </div>\r\n <div class=\"stat-label\">Paid Months</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">{{scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n scheme?.dueMonths : 'N/A' }}</div>\r\n <div class=\"stat-label\">Due Months</div>\r\n </div>\r\n <div class=\"stat\" *ngIf=\"scheme?.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"stat-value\">{{ scheme?.totalInvestedMetal || '0' }} gms</div>\r\n <div class=\"stat-label\">Accumulated Gold</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-footer\">\r\n <span>Maturity Date: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n 'N/A' }}</span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #showActiveScheme>\r\n <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n <span>No Active Scheme</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n <!-- <div class=\"auto-pay\">\r\n <div class=\"auto-pay-icon mobile-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/966462c1753439662355Background.png\"></div>\r\n <div class=\"auto-pay-content\">\r\n <div class=\"auto-pay-title\">Manage Auto-pay</div>\r\n <div class=\"auto-pay-desc\">Pause, resume or cancel auto payment subscription</div>\r\n </div>\r\n <button class=\"manage-btn\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/409230c1753439564830SVG.png\"> Manage</button>\r\n </div> -->\r\n </div>\r\n</ng-template>\r\n<ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #Scheme_Details>\r\n <simpo-scheme-details [schemeDetails]=\"schemeDetails\" [data]=\"data\" [metalPrice]=\"metalPrice\"\r\n (gotoSchemeOverview)=\"selectedSidePanelTab = 'Scheme Passbook'\"></simpo-scheme-details>\r\n</ng-template>\r\n<ng-template #Transactions>\r\n <simpo-passbook-transactions></simpo-passbook-transactions>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n</ngx-skeleton-loader>", styles: [".total-container{position:relative;height:auto;overflow:scroll;background:#fff!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;padding:15px;overflow-y:auto;overflow-x:hidden;max-height:80vh}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}h1{font-weight:600}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.amount_logo{font-size:27px}@media screen and (max-width: 475px){.store-listing{width:35%!important}.total-container{height:100%!important}.amount_logo{font-size:27px}.amount,.scheme-count{font-size:20px!important}.title-text{font-size:24px}.schemes-grid{flex-wrap:wrap;overflow-y:scroll;height:95%}.section{height:auto}.scheme-status{white-space:nowrap}.scheme-card{width:100%}.header{flex-direction:column-reverse}.scheme-overview{width:100%!important}.scheme-overview div{flex-wrap:wrap}.available-savings h3{font-size:17px!important}.quick-actions{width:100%}.active-schemes h3{font-size:17px!important}.auto-pay-icon{width:55px!important;height:50px!important}.mobile-icon{width:30px!important}.manage-btn{width:25%!important}.tab-selected div{font-weight:600!important}.mobile-height{height:100%!important}.passbook_container{height:90%!important;overflow-x:scroll!important}.passbook_container .section{max-height:unset!important;padding:10px!important}.section-header{margin-bottom:2px!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;border:none;padding:10px 5px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.list-sec .tab-selected{border-top-left-radius:10px!important;border-bottom-left-radius:10px;border:none}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:0 10px;width:100vw;margin-bottom:20px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.profile-icon{width:70px}.text-overflow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width:1200px) and (max-width: 1330px){.profile-details{width:75%!important}}@media screen and (min-width:1200px){.manage-btn{width:10%!important}}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}.cards{box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;border-radius:12px}.cards .card-header{padding:8px}.cards .card-header .card-head .scheme-type{font-size:15px}.cards .card-body .col-4 .card-sub-text{font-size:14px}.cards .card-footer{border-top:2px dashed!important;margin:0 5px;padding:10px}.cards .card-footer span{font-size:13px}.cards .card-footer .date-text{font-weight:600}.cards .card-footer div{font-size:15px}.fs-15{font-size:14px}.w-32{width:32.5%!important}.w-40{width:40px!important}.f-18{font-size:18px}.fw-600{font-weight:600}.scheme-id{font-size:13px}.order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.cart-item-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa);width:49%}.address-card .card-body{position:relative;overflow:hidden}.address-text{color:#495057;line-height:1.4}.btn-sm{transition:all .3s ease}.small-icon{font-size:16px!important}.badge.bg-light{color:#495057!important;background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;border:1px solid #dee2e6}@media (max-width: 576px){.address-card .card-body{padding:1rem!important}.address-card{width:100%!important}.btn-sm{display:flex;justify-content:center;align-items:center;color:red!important}.btn-sm mat-icon{font-size:13px}.btn-sm{width:100%;margin-bottom:.25rem}}.profile-box{transition:all .3s ease;position:relative}.tab-item:hover img{transform:scale(1.1)}.tab-selected{border-left:4px solid;font-weight:600!important;border-bottom:unset!important}.tab-selected .tab-label{font-weight:600!important}.tabs-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.tabs-container::-webkit-scrollbar{width:4px}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-box{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.profile-box{width:100%!important}.profile-header{flex-direction:column;height:auto!important;text-align:center}.action-buttons{flex-direction:column}}.scheme-overview{gap:20px;width:100%}.available-savings{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:20px;border-radius:12px;position:relative;flex:1}.available-savings .amount{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.available-savings h3{font-size:14px;color:#856404;margin-bottom:8px;font-weight:500}.subtitle{font-size:12px;color:#666}.active-schemes{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;position:relative;flex:1}.active-schemes h3{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.scheme-count{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e9ecef;max-height:40vh;overflow-x:scroll}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:18px;font-weight:600}.view-all{color:#6c5ce7;font-size:16px}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.overdue{background:#fef2f2;border:1px solid #FECACA}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.upcoming{background:#f8f9fa;color:#666}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.payment-status{font-size:12px;padding:4px 8px;border-radius:4px;color:#fff;white-space:nowrap}.overdue-status{background:#dc3545}.upcoming-status{background:#6c757d}.schemes-grid{display:flex;gap:10px;overflow-x:scroll}.scheme-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e9ecef;position:relative;min-width:34vw}.scheme-header{display:flex;justify-content:space-between;align-items:flex-start}.scheme-title{font-size:16px;font-weight:600;margin-bottom:4px}.scheme-amount{font-size:12px;color:#666}.scheme-date{font-size:12px;color:#666;display:flex;flex-direction:column;gap:10px}.scheme-status{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;text-transform:uppercase;min-width:15%;max-width:fit-content}.redeem_status{background:orange;color:#fff}.active-status{background:#22c55e;color:#fff}.scheme-stats{display:flex;justify-content:space-between}.stat{text-align:center}.stat-value{font-size:20px;font-weight:700;color:#333}.stat-label{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px}.scheme-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.price-notice{background:#fce7f3;color:#be185d;padding:8px 12px;border-radius:6px;font-size:11px}.auto-pay{background:#fff3cd;padding:16px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-top:20px}.auto-pay-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.auto-pay-icon img{width:100%}.auto-pay-content{flex:1}.auto-pay-title{font-size:14px;font-weight:600;margin-bottom:4px}.auto-pay-desc{font-size:12px;color:#666}.manage-btn{background:none;border:1px solid #dee2e6;padding:6px 0;border-radius:4px;font-size:13px!important;cursor:pointer;display:flex;justify-content:space-evenly}.store-listing{font-size:14px;width:20%;height:30px;margin-bottom:13px;border:1px solid #e9ecef;border-radius:5px;outline:none;padding-left:5px;cursor:pointer}.fs-14{font-size:14px}.fs-12{font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: OrderDetailsComponent, selector: "simpo-order-details", inputs: ["responseData", "data", "index", "edit", "delete", "customClass", "orderDetailData"], outputs: ["goBackEmitter"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i8$3.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData", "itemIndex"] }, { kind: "component", type: SchemeDetailsComponent, selector: "simpo-scheme-details", inputs: ["schemeDetails", "data", "metalPrice"], outputs: ["gotoSchemeOverview"] }, { kind: "component", type: ListHomeAppointmentComponent, selector: "simpo-list-home-appointment" }, { kind: "component", type: PassbookTransactionsComponent, selector: "simpo-passbook-transactions" }] }); }
|
|
24226
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [spacingHorizontal]=\"styles?.layout\" [ngStyle]=\"{'max-height': '100vh', 'z-index': isMobile ? '100000000' : ''}\"\r\n [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"p-4 profile-box\" style=\"width: 25%; border-radius: 20px; height: fit-content\"\r\n [style.order]=\"styles?.swap ? '1' : '0'\">\r\n\r\n <!-- Profile Header Section -->\r\n <div class=\"d-flex align-items-center profile-header\"\r\n style=\"gap: 15px; height: 80px; margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 15px; backdrop-filter: blur(10px);\">\r\n <div class=\"profile-image-wrapper\" style=\"position: relative;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100 profile-icon\"\r\n style=\"border: 3px solid #e3f2fd; transition: all 0.3s ease;\">\r\n <div class=\"online-indicator\"\r\n style=\"position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4caf50; border: 2px solid white; border-radius: 50%;\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"profile-details flex-grow-1\">\r\n <h4 class=\"font-weight-bold mb-2\" style=\"color: #2c3e50; font-size: 1.1rem; margin-bottom: 8px;\">\r\n {{getUserDetails?.contact?.name}}</h4>\r\n\r\n <div class=\"contact-info\" style=\"display: flex; flex-direction: column; gap: 6px;\">\r\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n *ngIf=\"getUserDetails?.contact?.mobile?.length\"\r\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">stay_primary_portrait</mat-icon>\r\n <span>{{getUserDetails?.contact?.mobile}}</span>\r\n </h6>\r\n\r\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n *ngIf=\"getUserDetails?.contact?.email?.length\"\r\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">mail_outline</mat-icon>\r\n <span class=\"w-100 text-overflow\">{{getUserDetails?.contact?.email}}</span>\r\n </h6>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Navigation Tabs Section -->\r\n <div class=\"tabs-container\" style=\"margin-bottom: 20px;\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center tab-item\"\r\n style=\"gap: 12px; cursor: pointer; padding: 16px 12px; margin: 2px 0; border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden;\"\r\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '1px solid rgba(0,0,0,0.06)' : ''\"\r\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\"\r\n [style.backgroundColor]=\"tab.status ? styles?.background?.color : 'transparent'\"\r\n [style.borderColor]=\"tab.status ? styles?.background?.accentColor : 'transparent'\">\r\n <div class=\"tab-icon-wrapper\"\r\n style=\"width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\">\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n style=\"height: 20px; width: 20px; object-fit: contain; transition: transform 0.3s ease;\">\r\n </div>\r\n\r\n <div class=\"tab-label font-weight-normal\" style=\"font-size: 0.9rem; transition: all 0.3s ease;\">\r\n {{tab.value}}</div>\r\n\r\n <!-- Hover effect background -->\r\n <div class=\"tab-hover-bg\"\r\n style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,123,255,0.05) 0%, rgba(0,123,255,0.02) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1;\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- Action Buttons Section -->\r\n <div class=\"d-flex action-buttons\"\r\n style=\"gap: 10px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.06);\">\r\n <button class=\"edit-btn flex-grow-1\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\"\r\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; background: transparent; border: 2px solid; transition: all 0.3s ease; position: relative; overflow: hidden;\">\r\n Edit Profile\r\n </button>\r\n\r\n <button class=\"logout-btn flex-grow-1\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\"\r\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; border: none; color: white; transition: all 0.3s ease;\">\r\n Logout\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"orders-sec\" [style.order]=\"styles?.swap ? '0' : '1'\">\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Details'\">\r\n <ng-container *ngTemplateOutlet=\"SchemeDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Transactions'\">\r\n <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n <simpo-list-home-appointment></simpo-list-home-appointment>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Referrals'\">\r\n <ng-container *ngTemplateOutlet=\"Referrals\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Rewards'\">\r\n <ng-container *ngTemplateOutlet=\"Rewards\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <div class=\"w-100 position-relative mobile-height\" style=\"height: 80vh;\">\r\n <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\"\r\n *ngIf=\"selectedSidePanelTab != 'Scheme_Details'\">\r\n <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\"\r\n (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n </div>\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"''\">\r\n <section class=\"top-sec\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\"\r\n style=\"width: 50px; height: 50px;\">\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\">\r\n <mat-icon>stay_primary_portrait</mat-icon>\r\n <span>{{getUserDetails?.contact?.mobile}}</span>\r\n </h6>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\"\r\n *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon>\r\n <span>{{getUserDetails?.contact?.email}}</span>\r\n </h6>\r\n </div>\r\n </section>\r\n <section class=\"list-sec\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\"\r\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\"\r\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n [style.color]=\"styles?.background?.accentColor\">\r\n <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">\r\n {{tab.value}}</div>\r\n </div>\r\n\r\n </ng-container>\r\n </section>\r\n <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\r\n <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\">Logout</button>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Transactions'\">\r\n <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n <simpo-list-home-appointment></simpo-list-home-appointment>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Referrals'\">\r\n <ng-container *ngTemplateOutlet=\"Referrals\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'My Rewards'\">\r\n <ng-container *ngTemplateOutlet=\"Rewards\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isEcommerce]=\"true\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n</section>\r\n\r\n<ng-template #Referrals>\r\n <iframe [src]=\"getMyReferralsUrl\" frameborder=\"0\" width=\"100%\" height=\"100%\"></iframe>\r\n</ng-template>\r\n<ng-template #Rewards>\r\n <iframe [src]=\"getRewardsUrl\" frameborder=\"0\" width=\"100%\" height=\"100%\"></iframe>\r\n</ng-template>\r\n<ng-template #OrderSection>\r\n <h3 class=\"onlyDesktop mb-3\">My Orders</h3>\r\n <!-- <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n <ng-container *ngFor=\"let tab of tabs\">\r\n <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">\r\n {{tab.value}}</div>\r\n </ng-container>\r\n </div> -->\r\n <div class=\"order-list\">\r\n <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #showEmptyScreen>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <div class=\"cart-text \">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <div class=\"heading-medium d-flex justify-content-center content-side\"\r\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n <simpo-text-editor [(value)]=\"text.value\"\r\n [editable]=\"edit || false\" [isRTE]=\"text.isRTE\"></simpo-text-editor>\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\"\r\n (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n <div class=\"d-flex justify-content-between mb-2\">\r\n <h3 class=\"title-text\">My Address</h3>\r\n <button class=\"address-btn\" (click)=\"addNewAddress()\"\r\n [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n <div class=\"address-list\">\r\n <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\r\n <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n <div class=\"card border-0 mb-2 cursor-pointer order-card \" [style.width]=\"getProductWidth\">\r\n <div class=\"card-body p-3\">\r\n <!-- Header Section -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n <div class=\"address-info d-flex align-items-center justify-content-between w-100\">\r\n <h4 class=\"mb-0 fw-semibold\">{{address.receiverName}}</h4>\r\n <div class=\"icon-grp d-flex\">\r\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n (click)=\"editAddress(idx)\">edit</mat-icon>\r\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"address-content mb-3\">\r\n <div class=\"address-line mb-2\">\r\n <span class=\"text-muted small d-block\">Address</span>\r\n <span class=\"address-text\">{{address.addressLine1}}</span>\r\n </div>\r\n <div class=\"phone-info\">\r\n <span class=\"text-muted small d-block\">Phone</span>\r\n <span class=\"phone-number fw-bold\">{{address.receiverPhone}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-template #showEmptyAddress>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\r\n <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery\r\n </div>\r\n <!-- </ng-container> -->\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n <h3 class=\"onlyDesktop\">My Accounts</h3>\r\n</ng-template>\r\n<ng-template #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 border-0 mb-2 cursor-pointer order-card\">\r\n <div class=\"card-body p-3\" [style.--background-color]=\"styles?.background?.color\">\r\n <!-- Header Section -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n <div class=\"order-number\">\r\n <h4 class=\"mb-0 fw-semibold\">{{\"Order\" + \" \" + order.orderNum}}</h4>\r\n </div>\r\n <div class=\"arrow-icon\">\r\n <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"ordered-item row mb-2\">\r\n <ng-container *ngFor=\"let item of getOrderedItems(order)\">\r\n <div class=\"item-card col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img [src]=\"item?.imgUrl\" alt=\"Product Image\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"item-img w-50\">\r\n <div class=\"cart-item-name\">{{item?.itemName}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <!-- Middle Section -->\r\n <div class=\"order-details\">\r\n <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-1\">\r\n <span class=\"text-muted small mb-3 mb-sm-0\">\r\n {{order.createdTimeStamp | date: 'dd MMMM yyyy'}}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"amount-section\">\r\n <span class=\"h5 mb-0 text-success fw-bold\">\r\n <span [innerHTML]=\"currency\"></span>\r\n <!-- {{(order.billDetails.discountAmount ?\r\n (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +\r\n order?.billDetails?.totalTaxAfterDiscount) :\r\n order.billDetails.totalGrossValue) | number:'1.0-2'}} -->\r\n {{getTotalAmtPaid(order) | number:'1.0-2'}}\r\n </span>\r\n </div>\r\n <div class=\"status-section\">\r\n <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">\r\n {{order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | titlecase}}\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mt-1\" *ngIf=\"order.rewardUsed === 'REWARD_POINTS'\">\r\n <div class=\"fs-14 text-secondary\">\r\n Amount Paid -\r\n <span class=\"text-success fw-bold\">\u20B9 {{ getTotalAmtPaid(order) === order.pointsConvertedINR ? '0' :\r\n (getTotalAmtPaid(order) - order.pointsConvertedINR) }}</span>\r\n </div>\r\n <div class=\"fs-14 text-secondary\">\r\n Rewarded Amount - <span class=\"text-success fw-bold\">\u20B9 {{order.pointsConvertedINR}}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mt-1\" *ngIf=\"order.rewardUsed === 'VOUCHER'\">\r\n <div class=\"fs-14 text-secondary\">\r\n Amount Paid -\r\n <span class=\"text-success fw-bold\">\u20B9 {{ getTotalAmtPaid(order) === order.voucherValue ? '0' :\r\n (getTotalAmtPaid(order) - order.voucherValue) }}</span>\r\n </div>\r\n <div class=\"fs-14 text-secondary\">\r\n Rewarded Amount - <span class=\"text-success fw-bold\">\u20B9 {{order.voucherValue}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #WishlistDetails>\r\n <h3 class=\"onlyDesktop\">My Wishlist</h3>\r\n <div class=\"wishlist-list\" *ngIf=\"wishlistData?.length; else showEmptyWishlistScreen\">\r\n <div class=\"d-flex flex-wrap\" style=\"gap: 10px;\">\r\n <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n <div class=\"address-card mb-2\">\r\n <div class=\"card-body p-4\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-auto\">\r\n <div class=\"product-image-wrapper\">\r\n <img loading=\"lazy\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"product-img rounded\" [src]=\"item.imgUrl\" alt=\"Product Image\">\r\n </div>\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"product-details\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div\r\n class=\"col-auto text-end d-flex justify-content-between align-items-center w-100\">\r\n <h6 class=\"product-name mb-2 fw-semibold text-dark\">\r\n {{item.itemName}}\r\n </h6>\r\n <div class=\"delete-action\" *ngIf=\"!isMobile\">\r\n <button class=\"btn btn-sm delete-btn\" (click)=\"deleteFromWhislist(item)\"\r\n title=\"Remove from wishlist\">\r\n <mat-icon class=\"small-icon\">delete</mat-icon>\r\n </button>\r\n </div>\r\n <div class=\"delete-action mt-2\" *ngIf=\"isMobile\">\r\n <button class=\"btn btn-sm w-100\" (click)=\"deleteFromWhislist(item)\">\r\n <mat-icon class=\"small-icon me-1\">delete</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"product-price mb-3\">\r\n <span class=\"h5 text-success fw-bold mb-0\">\r\n <span [innerHTML]='currency'></span>{{item.discountedPrice}}\r\n </span>\r\n <span class=\"text-muted small ms-2\" *ngIf=\"item.quantity\">\r\n ({{item.quantity}} items)\r\n </span>\r\n </div>\r\n <div class=\"action-buttons d-flex gap-2\">\r\n <div class=\"quantity-controls d-flex align-items-center w-50 justify-content-center\"\r\n *ngIf=\"item.quantity\">\r\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n (click)=\"addToFav(item, 'SUBSTRACT')\">\r\n -\r\n </button>\r\n <span class=\"quantity-display px-3 py-1 bg-light rounded mx-1\">\r\n {{item.quantity}}\r\n </span>\r\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n (click)=\"addToFav(item, 'ADD')\"> +\r\n </button>\r\n </div>\r\n <button class=\"btn btn-sm w-50\" *ngIf=\"!item.quantity\"\r\n (click)=\"addToFav(item, 'ADD')\">\r\n + Add Quantity\r\n </button>\r\n <button class=\"btn btn-sm w-50\" (click)=\"moveToCart(item)\">\r\n Move to Cart\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n <ng-template #showEmptyWishlistScreen>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container>\r\n <div class=\"heading-medium d-flex justify-content-center\">\r\n Your Wishlist is Empty</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #SchemeDetails>\r\n <div class=\"header mb-3 f-18 fw-600\">Current Scheme Enrollments - 4</div>\r\n <div class=\"row gap-2\">\r\n <ng-container *ngFor=\"let scheme of [1,1,1,1]\">\r\n <div class=\"cards d-flex flex-column w-32 mb-2 p-0 \">\r\n <div class=\"card-header row gap-2\">\r\n <div class=\"card-head-left col-7\">\r\n <div class=\"scheme-type fs-15 fw-600\">Group Investment Scheme</div>\r\n <div class=\"scheme-id fw-600\">GIS6K_000231004</div>\r\n </div>\r\n <div class=\"card-head-right col-4 text-center align-content-center\">\r\n <div class=\"scheme-amount fw-600\">\u20B96,000/M</div>\r\n </div>\r\n </div>\r\n <div class=\"card-body d-flex p-0 mb-3\">\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/425719c1752566628577star.png\" alt=\"\"\r\n class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">\u20B913,800</div>\r\n <div class=\"card-sub-text text-center\">Total Acheived</div>\r\n </div>\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/229997c1752567131192brand_7959220.png\"\r\n alt=\"\" class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">\u20B91,000</div>\r\n <div class=\"card-sub-text text-center\">Rewards</div>\r\n </div>\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/760761c1752567279970calendar (1).png\"\r\n alt=\"\" class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">8</div>\r\n <div class=\"card-sub-text text-center\">Due Months</div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer row\">\r\n <div class=\"col-6 d-flex gap-2 p-0\">\r\n <span class=\"footer-text text-nowrap\">Start On :</span><span class=\"date-text text-nowrap\">30\r\n may 2025</span>\r\n </div>\r\n <div class=\"col-6 d-flex gap-2 p-0\">\r\n <span class=\"footer-text text-nowrap\">Maturity On :</span><span class=\"date-text text-nowrap\">25\r\n may 2026</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n<ng-template #SchemePassbook>\r\n <div class=\"w-100 h-100 overflow-scroll passbook_container\">\r\n <div class=\"header d-flex flex-column\">\r\n <div class=\"d-flex align-items-center justify-content-end mb-3\" *ngIf=\"storeListing.length >= 2\"><select\r\n class=\"store-listing\" (change)=\"changeStore($event)\">\r\n <option value=\"\">Select Store</option>\r\n <option [value]=\"store.id\" *ngFor=\"let store of storeListing\">{{store.storeName}}</option>\r\n </select></div>\r\n <div class=\"scheme-overview d-flex flex-column\">\r\n <div class=\"d-flex gap-2\">\r\n <div class=\"available-savings\">\r\n <div class=\"d-flex align-items-center gap-1 w-100 justify-content-between\">\r\n <h3>Available Savings</h3>\r\n <span class=\"amount_logo\">\uD83D\uDCB0</span>\r\n </div>\r\n\r\n <div class=\"amount\">{{totalSavings ? totalSavings :\r\n '0'}}</div>\r\n </div>\r\n <div class=\"active-schemes\">\r\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n <h3>Active Passbooks</h3>\r\n <div class=\"auto-pay-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\r\n </div>\r\n </div>\r\n <div class=\"scheme-count\">{{totalSchemes?.length ?\r\n totalSchemes.length : '0'}}</div>\r\n <div class=\"subtitle\">On Track</div>\r\n </div>\r\n <div class=\"active-schemes\" *ngIf=\"totalAccumulatedGold > 0\">\r\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n <h3>Accumulated Gold </h3>\r\n <div class=\"auto-pay-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/153448c1756808418216accumulated_icon.png\">\r\n </div>\r\n </div>\r\n <div class=\"scheme-count\">{{totalAccumulatedGold}} gms</div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"overAllDues?.length\">\r\n <div class=\"section d-flex-flex-column gap-2\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Due Payments</h2>\r\n </div>\r\n <div class=\"payment-list d-flex flex-column gap-2\">\r\n <ng-container *ngIf=\"overAllDues?.length; else showEmptyPayment\">\r\n <div class=\"payment-item overdue\" *ngFor=\"let payment of overAllDues\">\r\n <div class=\"payment-info\">\r\n <div class=\"payment-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/403142c1753435378127Background.svg\">\r\n <!-- <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\"\r\n *ngIf=\"!payment.overdueStatus && payment.paymentStatus === 'PAID'\"> -->\r\n </div>\r\n <div class=\"payment-details\">\r\n <h4>{{payment.schemeName}} - {{payment.emiMonthCount}}rd EMI</h4>\r\n <span>Date {{payment.dueDate ? (payment.dueDate | date:'dd-MM-yyyy') :\r\n 'N/A'}}\r\n <!-- <span *ngIf=\"payment.overdueStatus\">| Due by: {{payment.daysOverdue\r\n ? payment.daysOverdue : 0}}</span> --></span>\r\n </div>\r\n </div>\r\n <div class=\"payment-amount\">\r\n <div class=\"amount-value\">\u20B9{{payment.dueAmount ? payment.dueAmount :\r\n '0'}}\r\n </div>\r\n <div class=\"payment-status overdue-status cursor-pointer\"\r\n (click)=\"payDue(payment)\">\r\n <ng-container *ngIf=\"!payDueLoader\">Pay Now</ng-container>\r\n <ng-container *ngIf=\"payDueLoader\">Loading...</ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #showEmptyPayment>\r\n <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n <span>No Due Payments</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"section mt-3\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Your Active Passbooks</h2>\r\n </div>\r\n\r\n <div class=\"schemes-grid\">\r\n <ng-container *ngIf=\"totalSchemes && totalSchemes.length > 0; else showActiveScheme\">\r\n <div class=\"scheme-card d-flex flex-column gap-2 cursor-pointer\"\r\n *ngFor=\"let scheme of totalSchemes; let i = index\" (click)=\"viewSchemeDetails(scheme)\">\r\n <div class=\"scheme-header\">\r\n <div>\r\n <div class=\"scheme-title\">{{ scheme?.schemeName || 'N/A' }}</div>\r\n <div class=\"scheme-amount\">\u20B9{{ scheme?.installmentAmount || '0' }}/Monthly</div>\r\n </div>\r\n <div class=\"scheme-date\">\r\n <span>Enrolled: {{ scheme?.createdTimestamp ? (scheme?.createdTimestamp |\r\n date:'dd-MM-yyyy') :\r\n 'N/A' }}</span>\r\n <!-- <span>Maturity: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n 'N/A' }}</span> -->\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-status d-flex justify-content-center align-items-center\"\r\n [ngClass]=\"scheme?.passBookStatus === 'REDEEM_REQUESTED' ? 'redeem_status' : (scheme?.passBookStatus === 'ACTIVE' ? 'active-status' : 'redeem_status')\">\r\n {{\r\n scheme.passBookStatus ? scheme.passBookStatus.replaceAll('_', ' ') : 'N/A'\r\n }}\r\n </div>\r\n\r\n <div class=\"scheme-stats\">\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">{{ scheme?.totalPaidAmount || '0' }}</div>\r\n <div class=\"stat-label\">Deposited Amount</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">\r\n {{\r\n scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n (scheme?.schemePayments?.length -\r\n scheme.dueMonths) : 'N/A'\r\n }}\r\n </div>\r\n <div class=\"stat-label\">Paid Months</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">{{scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n scheme?.dueMonths : 'N/A' }}</div>\r\n <div class=\"stat-label\">Due Months</div>\r\n </div>\r\n <div class=\"stat\" *ngIf=\"scheme?.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"stat-value\">{{ scheme?.totalInvestedMetal || '0' }} gms</div>\r\n <div class=\"stat-label\">Accumulated Gold</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-footer\">\r\n <span>Maturity Date: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n 'N/A' }}</span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #showActiveScheme>\r\n <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n <span>No Active Scheme</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n <!-- <div class=\"auto-pay\">\r\n <div class=\"auto-pay-icon mobile-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/966462c1753439662355Background.png\"></div>\r\n <div class=\"auto-pay-content\">\r\n <div class=\"auto-pay-title\">Manage Auto-pay</div>\r\n <div class=\"auto-pay-desc\">Pause, resume or cancel auto payment subscription</div>\r\n </div>\r\n <button class=\"manage-btn\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/409230c1753439564830SVG.png\"> Manage</button>\r\n </div> -->\r\n </div>\r\n</ng-template>\r\n<ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #Scheme_Details>\r\n <simpo-scheme-details [schemeDetails]=\"schemeDetails\" [data]=\"data\" [metalPrice]=\"metalPrice\"\r\n (gotoSchemeOverview)=\"selectedSidePanelTab = 'Scheme Passbook'\"></simpo-scheme-details>\r\n</ng-template>\r\n<ng-template #Transactions>\r\n <simpo-passbook-transactions></simpo-passbook-transactions>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n</ngx-skeleton-loader>", styles: [".total-container{position:relative;height:auto;overflow:scroll;background:#fff!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;padding:15px;overflow-y:auto;overflow-x:hidden;max-height:80vh}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}h1{font-weight:600}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.amount_logo{font-size:27px}@media screen and (max-width: 475px){.store-listing{width:35%!important}.total-container{height:100%!important}.amount_logo{font-size:27px}.amount,.scheme-count{font-size:20px!important}.title-text{font-size:24px}.schemes-grid{flex-wrap:wrap;overflow-y:scroll;height:95%}.section{height:auto}.scheme-status{white-space:nowrap}.scheme-card{width:100%}.header{flex-direction:column-reverse}.scheme-overview{width:100%!important}.scheme-overview div{flex-wrap:wrap}.available-savings h3{font-size:17px!important}.quick-actions{width:100%}.active-schemes h3{font-size:17px!important}.auto-pay-icon{width:55px!important;height:50px!important}.mobile-icon{width:30px!important}.manage-btn{width:25%!important}.tab-selected div{font-weight:600!important}.mobile-height{height:100%!important}.passbook_container{height:90%!important;overflow-x:scroll!important}.passbook_container .section{max-height:unset!important;padding:10px!important}.section-header{margin-bottom:2px!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;border:none;padding:10px 5px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.list-sec .tab-selected{border-top-left-radius:10px!important;border-bottom-left-radius:10px;border:none}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:0 10px;width:100vw;margin-bottom:20px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.profile-icon{width:70px}.text-overflow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width:1200px) and (max-width: 1330px){.profile-details{width:75%!important}}@media screen and (min-width:1200px){.manage-btn{width:10%!important}}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}.cards{box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;border-radius:12px}.cards .card-header{padding:8px}.cards .card-header .card-head .scheme-type{font-size:15px}.cards .card-body .col-4 .card-sub-text{font-size:14px}.cards .card-footer{border-top:2px dashed!important;margin:0 5px;padding:10px}.cards .card-footer span{font-size:13px}.cards .card-footer .date-text{font-weight:600}.cards .card-footer div{font-size:15px}.fs-15{font-size:14px}.w-32{width:32.5%!important}.w-40{width:40px!important}.f-18{font-size:18px}.fw-600{font-weight:600}.scheme-id{font-size:13px}.order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.cart-item-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa);width:49%}.address-card .card-body{position:relative;overflow:hidden}.address-text{color:#495057;line-height:1.4}.btn-sm{transition:all .3s ease}.small-icon{font-size:16px!important}.badge.bg-light{color:#495057!important;background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;border:1px solid #dee2e6}@media (max-width: 576px){.address-card .card-body{padding:1rem!important}.address-card{width:100%!important}.btn-sm{display:flex;justify-content:center;align-items:center;color:red!important}.btn-sm mat-icon{font-size:13px}.btn-sm{width:100%;margin-bottom:.25rem}}.profile-box{transition:all .3s ease;position:relative}.tab-item:hover img{transform:scale(1.1)}.tab-selected{border-left:4px solid;font-weight:600!important;border-bottom:unset!important}.tab-selected .tab-label{font-weight:600!important}.tabs-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.tabs-container::-webkit-scrollbar{width:4px}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-box{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.profile-box{width:100%!important}.profile-header{flex-direction:column;height:auto!important;text-align:center}.action-buttons{flex-direction:column}}.scheme-overview{gap:20px;width:100%}.available-savings{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:20px;border-radius:12px;position:relative;flex:1}.available-savings .amount{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.available-savings h3{font-size:14px;color:#856404;margin-bottom:8px;font-weight:500}.subtitle{font-size:12px;color:#666}.active-schemes{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;position:relative;flex:1}.active-schemes h3{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.scheme-count{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e9ecef;max-height:40vh;overflow-x:scroll}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:18px;font-weight:600}.view-all{color:#6c5ce7;font-size:16px}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.overdue{background:#fef2f2;border:1px solid #FECACA}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.upcoming{background:#f8f9fa;color:#666}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.payment-status{font-size:12px;padding:4px 8px;border-radius:4px;color:#fff;white-space:nowrap}.overdue-status{background:#dc3545}.upcoming-status{background:#6c757d}.schemes-grid{display:flex;gap:10px;overflow-x:scroll}.scheme-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e9ecef;position:relative;min-width:34vw}.scheme-header{display:flex;justify-content:space-between;align-items:flex-start}.scheme-title{font-size:16px;font-weight:600;margin-bottom:4px}.scheme-amount{font-size:12px;color:#666}.scheme-date{font-size:12px;color:#666;display:flex;flex-direction:column;gap:10px}.scheme-status{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;text-transform:uppercase;min-width:15%;max-width:fit-content}.redeem_status{background:orange;color:#fff}.active-status{background:#22c55e;color:#fff}.scheme-stats{display:flex;justify-content:space-between}.stat{text-align:center}.stat-value{font-size:20px;font-weight:700;color:#333}.stat-label{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px}.scheme-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.price-notice{background:#fce7f3;color:#be185d;padding:8px 12px;border-radius:6px;font-size:11px}.auto-pay{background:#fff3cd;padding:16px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-top:20px}.auto-pay-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.auto-pay-icon img{width:100%}.auto-pay-content{flex:1}.auto-pay-title{font-size:14px;font-weight:600;margin-bottom:4px}.auto-pay-desc{font-size:12px;color:#666}.manage-btn{background:none;border:1px solid #dee2e6;padding:6px 0;border-radius:4px;font-size:13px!important;cursor:pointer;display:flex;justify-content:space-evenly}.store-listing{font-size:14px;width:20%;height:30px;margin-bottom:13px;border:1px solid #e9ecef;border-radius:5px;outline:none;padding-left:5px;cursor:pointer}.fs-14{font-size:14px}.fs-12{font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: OrderDetailsComponent, selector: "simpo-order-details", inputs: ["responseData", "data", "index", "edit", "delete", "customClass", "orderDetailData"], outputs: ["goBackEmitter", "downloadReceiptEmitter"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i8$3.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData", "itemIndex"] }, { kind: "component", type: SchemeDetailsComponent, selector: "simpo-scheme-details", inputs: ["schemeDetails", "data", "metalPrice"], outputs: ["gotoSchemeOverview"] }, { kind: "component", type: ListHomeAppointmentComponent, selector: "simpo-list-home-appointment" }, { kind: "component", type: PassbookTransactionsComponent, selector: "simpo-passbook-transactions" }] }); }
|
|
24089
24227
|
}
|
|
24090
24228
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserProfileComponent, decorators: [{
|
|
24091
24229
|
type: Component,
|