@salla.sa/twilight-components 2.14.388 → 2.14.390

package/dist/collection/components/salla-order-edit/salla-order-edit.js

@@ -0,0 +1,256 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { h, Host } from "@stencil/core";
+/**
+ * @salla/ui-components
+ * The `salla-order-edit` component
+ * as an editable card with quantity controls, editable options, and an order summary.
+ */
+export class SallaOrderEdit {
+    constructor() {
+        this.loading = true;
+        this.saveLoading = false;
+        this.payload = { items: { update: [], remove: [] } };
+        this.expired = false;
+        this.editPreview = null;
+        this.confirming = false;
+    }
+    async componentWillLoad() {
+        await salla.onReady();
+        this.loadFromProp();
+        this.startExpiryCheck();
+    }
+    disconnectedCallback() {
+        clearInterval(this.expiryInterval);
+    }
+    startExpiryCheck() {
+        const endsAt = this.order?.customer_editing_session?.ends_at;
+        if (!endsAt)
+            return;
+        const isExpired = () => new Date(`${endsAt.replace(' ', 'T')}+03:00`).getTime() <= Date.now();
+        if (isExpired()) {
+            this.expired = true;
+            return;
+        }
+        this.expiryInterval = setInterval(() => {
+            if (isExpired()) {
+                this.expired = true;
+                clearInterval(this.expiryInterval);
+            }
+        }, 1000);
+    }
+    loadFromProp() {
+        try {
+            if (!this.orderData) {
+                this.error = salla.lang.getWithDefault('pages.orders.order_not_found', 'الطلب غير موجود');
+                return;
+            }
+            const data = typeof this.orderData === 'string' ? JSON.parse(this.orderData) : this.orderData;
+            this.order = data;
+        }
+        catch (e) {
+            this.error = salla.lang.getWithDefault('pages.orders.order_not_found', 'الطلب غير موجود');
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    handleItemUpdated(event) {
+        if (!this.order)
+            return;
+        const { itemId, quantity, options } = event.detail;
+        const updateList = this.payload.items.update.filter(u => u.id !== itemId);
+        const updateEntry = { id: itemId, quantity, options: options ?? [] };
+        updateList.push(updateEntry);
+        this.payload = {
+            ...this.payload,
+            items: { ...this.payload.items, update: updateList },
+        };
+        this.order = {
+            ...this.order,
+            items: this.order.items.map(item => item.id === itemId ? { ...item, quantity } : item),
+        };
+    }
+    handleItemRemoved(event) {
+        if (!this.order)
+            return;
+        if (this.order.items.length <= 1) {
+            salla.notify.error(salla.lang.getWithDefault('pages.orders.order_cannot_be_empty', 'لا يمكن إزالة جميع المنتجات من الطلب'));
+            return;
+        }
+        const { itemId } = event.detail;
+        this.payload = {
+            ...this.payload,
+            items: {
+                update: this.payload.items.update.filter(u => u.id !== itemId),
+                remove: [...this.payload.items.remove, itemId],
+            },
+        };
+        this.order = {
+            ...this.order,
+            items: this.order.items.filter(item => item.id !== itemId),
+        };
+    }
+    get hasChanges() {
+        return this.payload.items.update.length > 0 || this.payload.items.remove.length > 0;
+    }
+    async saveOrder() {
+        if (!this.hasChanges)
+            return;
+        this.saveLoading = true;
+        try {
+            const response = await salla.order.api.editOrder(this.orderId, this.payload);
+            this.editPreview = response?.data?.data || response?.data;
+            await this.saveModal?.open();
+        }
+        catch (error) {
+            const message = error?.response?.data?.error?.message || error?.response?.data?.message;
+            if (message) {
+                salla.notify.error(message);
+            }
+        }
+        finally {
+            this.saveLoading = false;
+        }
+    }
+    navigateToOrder() {
+        const url = new URL(window.location.href);
+        url.pathname = url.pathname.replace(/\/edit\/?$/, '');
+        url.search = '';
+        window.location.href = url.href;
+    }
+    handleConfirm() {
+        this.confirming = true;
+        if (this.editPreview?.payment?.required && this.editPreview.payment.payment_url) {
+            window.location.href = this.editPreview.payment.payment_url;
+        }
+        else {
+            this.navigateToOrder();
+        }
+    }
+    cancel() {
+        this.navigateToOrder();
+    }
+    renderSaveModal() {
+        const preview = this.editPreview;
+        const hasRemainingAmount = preview?.totals?.remaining_amount?.amount > 0;
+        const hasRefundAmount = preview?.totals?.refund_amount?.amount > 0;
+        const taxAmount = preview?.totals?.tax?.amount?.amount;
+        return (h("salla-modal", { ref: modal => (this.saveModal = modal), width: "md", onModalVisibilityChanged: (e) => {
+                if (!e.detail) {
+                    this.editPreview = null;
+                    if (!this.confirming) {
+                        this.navigateToOrder();
+                    }
+                    this.confirming = false;
+                }
+            } }, h("div", { class: "s-order-edit-modal" }, h("h2", { class: "s-order-edit-modal-title" }, salla.lang.getWithDefault('pages.orders.edit_summary_title', 'ملخص الطلب بعد التعديل')), preview?.items?.length > 0 && (h("div", { class: "s-order-edit-modal-items" }, preview.items.map(item => {
+            const orderItem = this.order?.items?.find(oi => oi.id == item.id);
+            const imageUrl = orderItem?.product?.image?.url;
+            const optionsLabel = item.options?.join('/ ');
+            return (h("div", { class: "s-order-edit-modal-item" }, h("div", { class: "s-order-edit-modal-item-start" }, imageUrl && (h("img", { src: imageUrl, alt: item.name, class: "s-order-edit-modal-item-image" })), h("div", null, h("p", { class: "s-order-edit-modal-item-name" }, item.name), optionsLabel && (h("span", { class: "s-order-edit-modal-item-options" }, optionsLabel)))), h("div", { class: "s-order-edit-modal-item-end" }, h("span", { class: "s-order-edit-modal-item-price", innerHTML: salla.money(item.price.amount) }))));
+        }))), preview?.totals?.updated_products_total && (h("div", { class: "s-order-edit-modal-row" }, h("span", { class: "s-order-edit-modal-row-label" }, salla.lang.getWithDefault('pages.orders.modified_products_total', 'مجموع المنتجات المعدلة')), h("span", { class: "s-order-edit-modal-row-value", innerHTML: salla.money(preview.totals.updated_products_total.amount) }))), taxAmount > 0 && (h("div", { class: "s-order-edit-modal-row" }, h("span", { class: "s-order-edit-modal-tax-label" }, h("i", { class: "sicon-info-circle s-order-edit-modal-tax-icon" }), salla.lang.getWithDefault('pages.orders.vat', 'ضريبة القيمة المضافة')), h("span", { class: "s-order-edit-modal-row-value", innerHTML: salla.money(taxAmount) }))), preview?.totals?.total && (h("div", { class: "s-order-edit-modal-total" }, h("span", { class: "s-order-edit-modal-total-label" }, salla.lang.getWithDefault('pages.orders.order_total', 'اجمالي الطلب')), h("span", { class: "s-order-edit-modal-total-value", innerHTML: salla.money(preview.totals.total.amount) }))), hasRefundAmount && (h("div", { class: "s-order-edit-modal-refund" }, h("i", { class: "sicon-info-circle s-order-edit-modal-refund-icon" }), h("p", { class: "s-order-edit-modal-refund-text" }, salla.lang.getWithDefault('pages.orders.refund_message', 'سيتم تحويل فارق المبلغ على نفس وسيلة الدفع')))), h("div", { class: "s-order-edit-modal-btn-wrapper" }, h("salla-button", { onClick: () => this.handleConfirm() }, hasRemainingAmount
+            ? salla.lang.getWithDefault('pages.orders.pay_difference', 'دفع فارق المبلغ')
+            : hasRefundAmount
+                ? salla.lang.getWithDefault('pages.orders.confirm_and_receive_difference', 'تأكيد واستلام فارق المبلغ')
+                : salla.lang.getWithDefault('pages.orders.confirm_changes', 'تأكيد التعديلات'), h("i", { class: "sicon-keyboard_arrow_left s-order-edit-modal-btn-icon" }))))));
+    }
+    render() {
+        if (this.loading) {
+            return (h(Host, null, h("salla-loading", null)));
+        }
+        if (this.expired) {
+            return (h(Host, null, h("div", { class: "s-order-edit-expired" }, h("p", null, salla.lang.getWithDefault('pages.orders.edit_session_expired', 'انتهت مدة التعديل المتاحة')), h("salla-button", { onClick: () => this.navigateToOrder() }, salla.lang.getWithDefault('pages.orders.back_to_order', 'العودة إلى تفاصيل الطلب')))));
+        }
+        if (this.error || !this.order) {
+            return (h(Host, null, h("div", { class: "no-content-placeholder" }, h("i", { class: "sicon-shopping-bag icon" }), h("p", null, this.error))));
+        }
+        const hasItems = this.order.items && this.order.items.length > 0;
+        const endsAt = this.order.customer_editing_session?.ends_at;
+        return (h(Host, null, endsAt && (h("div", { class: "s-order-edit-timer-wrapper" }, h("salla-count-down", { prefixText: salla.lang.getWithDefault('pages.orders.edit_within', 'يمكنك التعديل خلال'), date: endsAt, horizontal: true, withButton: true, autoSegments: true, labeled: false, size: "sm", color: "primary" }))), h("div", { class: "s-order-edit-items-wrapper" }, h("h2", { class: "s-order-edit-items-title" }, salla.lang.getWithDefault('pages.orders.order_products', 'منتجات الطلب')), hasItems ? (this.order.items.map((item, index) => [
+            h("salla-order-edit-item", { key: item.id, item: item, orderId: this.orderId }),
+            index < this.order.items.length - 1 ? (h("div", { class: "s-order-edit-items-divider" })) : null,
+        ])) : (h("div", { class: "no-content-placeholder" }, h("i", { class: "sicon-shopping-bag icon" }), h("p", null, salla.lang.getWithDefault('common.elements.no_items', 'لا توجد عناصر'))))), h("div", { class: "s-order-edit-actions" }, h("salla-button", { onClick: () => this.saveOrder(), loading: this.saveLoading, disabled: !this.hasChanges }, salla.lang.getWithDefault('pages.orders.save_changes', 'حفظ التعديلات')), h("salla-button", { color: "gray", fill: "outline", onClick: () => this.cancel() }, salla.lang.getWithDefault('common.elements.cancel', 'الغاء'))), this.renderSaveModal()));
+    }
+    static get is() { return "salla-order-edit"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["salla-order-edit.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["salla-order-edit.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "orderId": {
+                "type": "any",
+                "attribute": "order-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The order ID to edit"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "orderData": {
+                "type": "string",
+                "attribute": "order-data",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Pre-loaded order data (JSON string)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "order": {},
+            "loading": {},
+            "error": {},
+            "saveLoading": {},
+            "payload": {},
+            "expired": {},
+            "editPreview": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "orderItemUpdated",
+                "method": "handleItemUpdated",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "orderItemRemoved",
+                "method": "handleItemRemoved",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}