simpo-component-library 3.6.923 → 3.6.925
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 +3 -3
- package/fesm2022/simpo-component-library.mjs +2 -2
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/package.json +1 -1
- package/simpo-component-library-3.6.925.tgz +0 -0
- package/simpo-component-library-3.6.923.tgz +0 -0
|
@@ -23198,7 +23198,7 @@ class OrderDetailsComponent {
|
|
|
23198
23198
|
}
|
|
23199
23199
|
}
|
|
23200
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 }); }
|
|
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 }] }); }
|
|
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>\n </div>\n\n </div>\n\n <!-- Right Column -->\n <div class=\"col-lg-5 col-xl-4\">\n <!-- Timeline Card -->\n <div class=\"card border p-4 mb-4\"\n style=\"border-color: #eaeaea !important; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.02);\"\n *ngIf=\"orderDetailData?.orderTrackingLink || (orderTimiline && orderTimiline.length > 0)\">\n <div class=\"d-flex align-items-center justify-content-between mb-4 pb-3 border-bottom\">\n <h5 class=\"fw-bold mb-0 text-dark d-flex align-items-center gap-2\" style=\"font-size: 16px;\">\n <mat-icon style=\"color: #6c757d;\">timeline</mat-icon> Order Timeline\n </h5>\n\n <div *ngIf=\"orderDetailData?.orderTrackingLink\"\n class=\"d-inline-flex align-items-center gap-1 cursor-pointer fw-medium\"\n [style.color]=\"styles?.background?.color || '#0d6efd'\" style=\"font-size: 13px;\"\n (click)=\"trackOrder()\">\n <mat-icon\n style=\"font-size: 15px; width: 15px; height: 15px;\">location_searching</mat-icon>\n <span style=\"text-decoration: underline; text-underline-offset: 3px;\">Track Order</span>\n </div>\n </div>\n\n <div class=\"px-2 pt-2\" *ngIf=\"orderTimiline && orderTimiline.length > 0\">\n <p-timeline [value]=\"orderTimiline\" styleClass=\"custom-timeline\" align=\"left\">\n <ng-template pTemplate=\"marker\" let-event>\n <!-- Completed -->\n <span class=\"custom-marker completed-marker\"\n *ngIf=\"event.statusType === 'completed' || event.statusType === 'delivered'\"\n [style.backgroundColor]=\"styles?.background?.color || '#059669'\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"3\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n </span>\n\n <!-- Active -->\n <span class=\"custom-marker active-marker\" *ngIf=\"event.statusType === 'active'\"\n [style.borderColor]=\"styles?.background?.color || '#059669'\"></span>\n\n <!-- Future -->\n <span class=\"custom-marker future-marker\"\n *ngIf=\"event.statusType === 'future'\"></span>\n </ng-template>\n\n <ng-template pTemplate=\"content\" let-event let-last=\"last\">\n <div class=\"ms-4\" [ngClass]=\"{'pb-4': !last}\">\n <div class=\"fw-semibold text-dark\" style=\"font-size: 15px; margin-bottom: 2px;\">\n {{\n event.name?.replaceAll(\"_\", \" \") | titlecase }}</div>\n <div style=\"font-size: 14px;\"\n [ngClass]=\"{'text-muted': event.statusType !== 'future', 'text-light-grey': event.statusType === 'future'}\">\n {{ event.date ? (event.date | date:'MMM d, h:mm a') : 'Not yet' }}\n </div>\n </div>\n </ng-template>\n </p-timeline>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n</ng-container>\n\n<!-- Loading Skeleton -->\n<div class=\"container-fluid py-4\" *ngIf=\"isLoading\" style=\"background-color: #f8f9fa; min-height: 100vh;\">\n <div class=\"mx-auto\" style=\"max-width: 1000px;\">\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '60vh',\n 'border-radius': '12px',\n 'margin': '20px 0'\n }\"></ngx-skeleton-loader>\n </div>\n</div>", styles: [".right{height:250px;padding:15px;background-color:#f8f8f8;border-radius:8px;color:#000}*{font-family:var(--website-font-family)}hr{border-top-width:2px;margin:15px 0}.f-13{font-size:13px}.f-16{font-size:16px}.fw-800{font-weight:800}.br-6{border-radius:6px}textarea{resize:unset}.action-btn>button{font-size:14px!important;border:none;width:fit-content!important;margin-top:5px;border-radius:3px;padding:5px 10px;background-color:tomato;color:#fff}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}.onlyMobile{display:none}.track-order{background-color:#000;color:#fff;border:1px solid black;width:auto;border-radius:3px;padding:5px}@media only screen and (max-width: 475px){.onlyDesktop{display:none!important}.onlyMobile{display:block}.mat-icon{width:46px}.time-line{padding-bottom:6px}.right{width:98%!important;margin-bottom:4px!important;height:auto!important;padding:15px!important;margin-top:5%}.main-section{width:100%!important;flex-direction:column!important}.left{width:100%!important;padding:3%}.orderNum{margin-bottom:25px}}@media (min-width:768px) and (max-width:1024px){.left{padding:3%;width:70%}.right{width:28%!important;padding:2%;margin-top:10%;margin-right:3%}}.mt-25{margin-top:25px}.cp{cursor:pointer}.item-summary{box-shadow:0 0 4px #00000040;border-radius:12px}mat-icon{font-family:Material Icons!important}::ng-deep .p-rating-icon{color:#ffc107!important;font-size:1.25rem!important}::ng-deep .p-timeline-event-content{padding:0!important}::ng-deep .p-timeline-event-connector{background:#000!important;width:3px!important;position:absolute;bottom:-10px;height:55px;left:12px}.sbt-btn{border-radius:8px}::ng-deep .p-timeline-event-marker{display:none!important}@media screen and (min-width: 1200px){.scroll-45{overflow-y:scroll;height:45vh}.scroll-60{overflow-y:scroll;height:60vh}}.f-16{font-size:16px!important}.f-13{font-size:13px!important}@media (max-width: 575.98px){.display-6{font-size:1.5rem}.h3{font-size:1.25rem}}.gap-3{gap:1rem!important}.shadow-sm{box-shadow:0 .125rem .5rem #0000001a!important}.card-header{border-bottom:unset!important}.btn:hover{transform:translateY(-1px);transition:all .2s ease}.card:hover{transform:translateY(-2px);transition:all .3s ease}.bg-opacity-10{background-color:rgba(var(--bs-primary-rgb),.1)!important}.cursor-pointer{cursor:pointer}.transition-transform{transition:transform .3s ease}.rotate-180{transform:rotate(180deg)}.card-header:hover{opacity:.9;transition:opacity .2s ease}.card-body{transition:all .3s ease}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.add-review-img{color:#828484;width:65px;display:flex;align-items:center;justify-content:center;order:3px dotted black;background:#f0f2f2;border:1px solid #d5d9d9!important;cursor:pointer}.order-status{border-radius:8px;padding:5px 8px;font-size:16px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.fs-15{font-size:15px}.review-textarea{border:1px solid #e2e8f0;border-radius:8px;font-size:14px;resize:none;background-color:#f8fafc;padding:12px 8px;transition:all .2s ease-in-out}.review-textarea:focus{border-color:#cbd5e1;background-color:#fff;box-shadow:0 0 0 3px #e2e8f080!important;outline:none}.review-upload-box{width:72px;height:72px;border:2px dashed #cbd5e1;border-radius:8px;background-color:#f8fafc;transition:all .2s ease-in-out;color:#64748b}.review-img-thumb{display:inline-block}.review-img-remove{position:absolute;top:-6px;right:-6px;width:18px!important;height:18px;border-radius:50%;background:#ef4444;color:#fff;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 4px #0000002e;transition:background .15s ease,transform .15s ease;z-index:1}.review-img-remove:hover{background:#dc2626;transform:scale(1.1)}.review-upload-box:hover{background-color:#f1f5f9;border-color:#94a3b8;color:#475569}.review-submit-btn{color:#fff!important;border-radius:8px;padding:12px 0;font-size:14px!important;border:none;letter-spacing:.3px;transition:transform .1s ease,box-shadow .2s ease}.review-submit-btn:hover{box-shadow:0 6px 15px #0000001a;transform:translateY(-1px)}.review-submit-btn:active{transform:translateY(1px)}::ng-deep .custom-timeline .custom-marker{display:flex!important;align-items:center!important;justify-content:center!important;width:28px!important;height:28px!important;border-radius:50%!important;z-index:10}::ng-deep .custom-timeline .active-marker{background-color:#fff!important;border-width:6px!important;border-style:solid!important}::ng-deep .custom-timeline .future-marker{background-color:#fff!important;border:5px solid #cbd5e1!important}::ng-deep .custom-timeline .p-timeline-event-marker{border:none!important;background:transparent!important;display:flex!important}::ng-deep .custom-timeline .p-timeline-event-connector{background-color:#cbd5e1!important;width:2px!important}::ng-deep .custom-timeline .p-timeline-event-opposite{display:none!important;flex:0!important;padding:0!important}::ng-deep .custom-timeline .p-timeline-event{min-height:50px}.text-light-grey{color:#94a3b8}.w-40{width:40%}@media (min-width: 576px){.w-sm-40{width:40%!important}}.item-card-pad{padding:16px 20px}.item-thumb{width:72px;height:72px;object-fit:cover;border-radius:8px}.item-name{font-size:14px;line-height:1.4}.item-price{font-size:14px}.item-variant,.item-qty{font-size:12px}.min-w-0{min-width:0}.review-form-box{background:#fff;border:1px solid #f0f0f0;border-radius:12px;padding:14px;box-shadow:0 4px 20px #00000008;overflow:hidden}@media (max-width: 575px){.container-fluid{padding-left:12px!important;padding-right:12px!important}.item-card-pad{padding:12px 14px}.item-thumb{width:60px;height:60px}.item-name,.item-price{font-size:13px}::ng-deep .p-rating-icon{font-size:1.35rem!important;padding:2px!important}.row.gx-5{--bs-gutter-x: 1rem !important}h2.fw-semibold{font-size:1.4rem!important}}.receipt-download-btn:hover,.receipt-download-btn:focus,.receipt-download-btn:active{color:#212529!important;border-color:#212529!important;box-shadow:none!important;transform:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: TimelineModule }, { kind: "component", type: i8$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 }] }); }
|
|
23202
23202
|
}
|
|
23203
23203
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OrderDetailsComponent, decorators: [{
|
|
23204
23204
|
type: Component,
|
|
@@ -23212,7 +23212,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
23212
23212
|
FormsModule,
|
|
23213
23213
|
BackgroundDirective,
|
|
23214
23214
|
MatTooltipModule
|
|
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"] }]
|
|
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>\n </div>\n\n </div>\n\n <!-- Right Column -->\n <div class=\"col-lg-5 col-xl-4\">\n <!-- Timeline Card -->\n <div class=\"card border p-4 mb-4\"\n style=\"border-color: #eaeaea !important; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.02);\"\n *ngIf=\"orderDetailData?.orderTrackingLink || (orderTimiline && orderTimiline.length > 0)\">\n <div class=\"d-flex align-items-center justify-content-between mb-4 pb-3 border-bottom\">\n <h5 class=\"fw-bold mb-0 text-dark d-flex align-items-center gap-2\" style=\"font-size: 16px;\">\n <mat-icon style=\"color: #6c757d;\">timeline</mat-icon> Order Timeline\n </h5>\n\n <div *ngIf=\"orderDetailData?.orderTrackingLink\"\n class=\"d-inline-flex align-items-center gap-1 cursor-pointer fw-medium\"\n [style.color]=\"styles?.background?.color || '#0d6efd'\" style=\"font-size: 13px;\"\n (click)=\"trackOrder()\">\n <mat-icon\n style=\"font-size: 15px; width: 15px; height: 15px;\">location_searching</mat-icon>\n <span style=\"text-decoration: underline; text-underline-offset: 3px;\">Track Order</span>\n </div>\n </div>\n\n <div class=\"px-2 pt-2\" *ngIf=\"orderTimiline && orderTimiline.length > 0\">\n <p-timeline [value]=\"orderTimiline\" styleClass=\"custom-timeline\" align=\"left\">\n <ng-template pTemplate=\"marker\" let-event>\n <!-- Completed -->\n <span class=\"custom-marker completed-marker\"\n *ngIf=\"event.statusType === 'completed' || event.statusType === 'delivered'\"\n [style.backgroundColor]=\"styles?.background?.color || '#059669'\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"3\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n </span>\n\n <!-- Active -->\n <span class=\"custom-marker active-marker\" *ngIf=\"event.statusType === 'active'\"\n [style.borderColor]=\"styles?.background?.color || '#059669'\"></span>\n\n <!-- Future -->\n <span class=\"custom-marker future-marker\"\n *ngIf=\"event.statusType === 'future'\"></span>\n </ng-template>\n\n <ng-template pTemplate=\"content\" let-event let-last=\"last\">\n <div class=\"ms-4\" [ngClass]=\"{'pb-4': !last}\">\n <div class=\"fw-semibold text-dark\" style=\"font-size: 15px; margin-bottom: 2px;\">\n {{\n event.name?.replaceAll(\"_\", \" \") | titlecase }}</div>\n <div style=\"font-size: 14px;\"\n [ngClass]=\"{'text-muted': event.statusType !== 'future', 'text-light-grey': event.statusType === 'future'}\">\n {{ event.date ? (event.date | date:'MMM d, h:mm a') : 'Not yet' }}\n </div>\n </div>\n </ng-template>\n </p-timeline>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n</ng-container>\n\n<!-- Loading Skeleton -->\n<div class=\"container-fluid py-4\" *ngIf=\"isLoading\" style=\"background-color: #f8f9fa; min-height: 100vh;\">\n <div class=\"mx-auto\" style=\"max-width: 1000px;\">\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '60vh',\n 'border-radius': '12px',\n 'margin': '20px 0'\n }\"></ngx-skeleton-loader>\n </div>\n</div>", styles: [".right{height:250px;padding:15px;background-color:#f8f8f8;border-radius:8px;color:#000}*{font-family:var(--website-font-family)}hr{border-top-width:2px;margin:15px 0}.f-13{font-size:13px}.f-16{font-size:16px}.fw-800{font-weight:800}.br-6{border-radius:6px}textarea{resize:unset}.action-btn>button{font-size:14px!important;border:none;width:fit-content!important;margin-top:5px;border-radius:3px;padding:5px 10px;background-color:tomato;color:#fff}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}.onlyMobile{display:none}.track-order{background-color:#000;color:#fff;border:1px solid black;width:auto;border-radius:3px;padding:5px}@media only screen and (max-width: 475px){.onlyDesktop{display:none!important}.onlyMobile{display:block}.mat-icon{width:46px}.time-line{padding-bottom:6px}.right{width:98%!important;margin-bottom:4px!important;height:auto!important;padding:15px!important;margin-top:5%}.main-section{width:100%!important;flex-direction:column!important}.left{width:100%!important;padding:3%}.orderNum{margin-bottom:25px}}@media (min-width:768px) and (max-width:1024px){.left{padding:3%;width:70%}.right{width:28%!important;padding:2%;margin-top:10%;margin-right:3%}}.mt-25{margin-top:25px}.cp{cursor:pointer}.item-summary{box-shadow:0 0 4px #00000040;border-radius:12px}mat-icon{font-family:Material Icons!important}::ng-deep .p-rating-icon{color:#ffc107!important;font-size:1.25rem!important}::ng-deep .p-timeline-event-content{padding:0!important}::ng-deep .p-timeline-event-connector{background:#000!important;width:3px!important;position:absolute;bottom:-10px;height:55px;left:12px}.sbt-btn{border-radius:8px}::ng-deep .p-timeline-event-marker{display:none!important}@media screen and (min-width: 1200px){.scroll-45{overflow-y:scroll;height:45vh}.scroll-60{overflow-y:scroll;height:60vh}}.f-16{font-size:16px!important}.f-13{font-size:13px!important}@media (max-width: 575.98px){.display-6{font-size:1.5rem}.h3{font-size:1.25rem}}.gap-3{gap:1rem!important}.shadow-sm{box-shadow:0 .125rem .5rem #0000001a!important}.card-header{border-bottom:unset!important}.btn:hover{transform:translateY(-1px);transition:all .2s ease}.card:hover{transform:translateY(-2px);transition:all .3s ease}.bg-opacity-10{background-color:rgba(var(--bs-primary-rgb),.1)!important}.cursor-pointer{cursor:pointer}.transition-transform{transition:transform .3s ease}.rotate-180{transform:rotate(180deg)}.card-header:hover{opacity:.9;transition:opacity .2s ease}.card-body{transition:all .3s ease}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.add-review-img{color:#828484;width:65px;display:flex;align-items:center;justify-content:center;order:3px dotted black;background:#f0f2f2;border:1px solid #d5d9d9!important;cursor:pointer}.order-status{border-radius:8px;padding:5px 8px;font-size:16px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.fs-15{font-size:15px}.review-textarea{border:1px solid #e2e8f0;border-radius:8px;font-size:14px;resize:none;background-color:#f8fafc;padding:12px 8px;transition:all .2s ease-in-out}.review-textarea:focus{border-color:#cbd5e1;background-color:#fff;box-shadow:0 0 0 3px #e2e8f080!important;outline:none}.review-upload-box{width:72px;height:72px;border:2px dashed #cbd5e1;border-radius:8px;background-color:#f8fafc;transition:all .2s ease-in-out;color:#64748b}.review-img-thumb{display:inline-block}.review-img-remove{position:absolute;top:-6px;right:-6px;width:18px!important;height:18px;border-radius:50%;background:#ef4444;color:#fff;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 4px #0000002e;transition:background .15s ease,transform .15s ease;z-index:1}.review-img-remove:hover{background:#dc2626;transform:scale(1.1)}.review-upload-box:hover{background-color:#f1f5f9;border-color:#94a3b8;color:#475569}.review-submit-btn{color:#fff!important;border-radius:8px;padding:12px 0;font-size:14px!important;border:none;letter-spacing:.3px;transition:transform .1s ease,box-shadow .2s ease}.review-submit-btn:hover{box-shadow:0 6px 15px #0000001a;transform:translateY(-1px)}.review-submit-btn:active{transform:translateY(1px)}::ng-deep .custom-timeline .custom-marker{display:flex!important;align-items:center!important;justify-content:center!important;width:28px!important;height:28px!important;border-radius:50%!important;z-index:10}::ng-deep .custom-timeline .active-marker{background-color:#fff!important;border-width:6px!important;border-style:solid!important}::ng-deep .custom-timeline .future-marker{background-color:#fff!important;border:5px solid #cbd5e1!important}::ng-deep .custom-timeline .p-timeline-event-marker{border:none!important;background:transparent!important;display:flex!important}::ng-deep .custom-timeline .p-timeline-event-connector{background-color:#cbd5e1!important;width:2px!important}::ng-deep .custom-timeline .p-timeline-event-opposite{display:none!important;flex:0!important;padding:0!important}::ng-deep .custom-timeline .p-timeline-event{min-height:50px}.text-light-grey{color:#94a3b8}.w-40{width:40%}@media (min-width: 576px){.w-sm-40{width:40%!important}}.item-card-pad{padding:16px 20px}.item-thumb{width:72px;height:72px;object-fit:cover;border-radius:8px}.item-name{font-size:14px;line-height:1.4}.item-price{font-size:14px}.item-variant,.item-qty{font-size:12px}.min-w-0{min-width:0}.review-form-box{background:#fff;border:1px solid #f0f0f0;border-radius:12px;padding:14px;box-shadow:0 4px 20px #00000008;overflow:hidden}@media (max-width: 575px){.container-fluid{padding-left:12px!important;padding-right:12px!important}.item-card-pad{padding:12px 14px}.item-thumb{width:60px;height:60px}.item-name,.item-price{font-size:13px}::ng-deep .p-rating-icon{font-size:1.35rem!important;padding:2px!important}.row.gx-5{--bs-gutter-x: 1rem !important}h2.fw-semibold{font-size:1.4rem!important}}.receipt-download-btn:hover,.receipt-download-btn:focus,.receipt-download-btn:active{color:#212529!important;border-color:#212529!important;box-shadow:none!important;transform:none!important}\n"] }]
|
|
23216
23216
|
}], ctorParameters: () => [{ type: EventsService }, { type: StorageServiceService }, { type: RestService }, { type: i6$1.MessageService }, { type: ImageUplaodService }], propDecorators: { responseData: [{
|
|
23217
23217
|
type: Input
|
|
23218
23218
|
}], data: [{
|