@salla.sa/twilight-components 2.14.418 → 2.14.419

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

@@ -2,6 +2,7 @@
  * Crafted with ❤ by Salla
  */
 import { h, Host } from "@stencil/core";
+import { getOrderEditProductMaxQuantity } from "./helpers";
 /**
  * @salla/ui-components
  * The `salla-order-edit-item` component renders a single editable order item card
@@ -9,6 +10,8 @@ import { h, Host } from "@stencil/core";
  */
 export class SallaOrderEditItem {
     constructor() {
+        this.quantityInput = null;
+        this.productOptions = null;
         this.handleQuantityChange = (event) => {
             const detail = event.detail;
             const newQuantity = detail?.quantity ?? parseInt(event.target.value, 10);
@@ -26,38 +29,30 @@ export class SallaOrderEditItem {
     componentWillLoad() {
         this.quantity = this.item?.quantity || 1;
     }
-    componentDidLoad() {
-        const quantityEl = this.host.querySelector('salla-quantity-input');
-        if (quantityEl) {
-            quantityEl.addEventListener('change', this.handleQuantityChange);
-        }
-        const optionsEl = this.host.querySelector('salla-product-options');
-        if (optionsEl) {
-            optionsEl.addEventListener('change', this.handleOptionsChange);
-        }
-    }
-    disconnectedCallback() {
-        const quantityEl = this.host.querySelector('salla-quantity-input');
-        if (quantityEl) {
-            quantityEl.removeEventListener('change', this.handleQuantityChange);
-        }
-        const optionsEl = this.host.querySelector('salla-product-options');
-        if (optionsEl) {
-            optionsEl.removeEventListener('change', this.handleOptionsChange);
-        }
+    handleItemChange(newItem) {
+        const newQuantity = newItem?.quantity || 1;
+        if (newQuantity === this.quantity)
+            return;
+        this.quantity = newQuantity;
+        this.quantityInput?.setValue?.(newQuantity, false);
     }
     get hasOptions() {
-        const options = this.item.product?.options;
-        return options && options.length > 0;
+        return (this.item.product?.options?.length || 0) > 0;
     }
     async getSelectedOptions() {
-        const optionsEl = this.host.querySelector(`salla-product-options[product-id="${this.item.product?.id}"]`);
-        return (await optionsEl?.getSelectedOptionsData()) || {};
+        return (await this.productOptions?.getSelectedOptionsData?.()) || {};
+    }
+    async getOptionsData() {
+        return (await this.productOptions?.getOptionsData?.()) || this.item.product?.options || [];
     }
     async emitUpdate(quantity) {
-        const detail = { itemId: this.item?.id, quantity };
+        const itemId = this.item?.id;
+        if (itemId == null)
+            return;
+        const detail = { itemId, quantity };
         if (this.hasOptions) {
             detail.options = await this.getSelectedOptions();
+            detail.optionDefinitions = await this.getOptionsData();
         }
         this.orderItemUpdated.emit(detail);
     }
@@ -76,14 +71,15 @@ export class SallaOrderEditItem {
         const imageAlt = product?.image?.alt || productName;
         const productUrl = product?.url || '#';
         const price = product?.price;
-        const maxQuantity = product?.max_quantity;
+        const maxQuantity = getOrderEditProductMaxQuantity(product);
         const weightLabel = product?.weight_label;
         const options = this.item.product?.options;
+        const optionsInstanceKey = `order-edit-item-${this.item.id}-${product?.id}`;
         const quantityAttrs = { value: this.quantity };
         if (maxQuantity) {
             quantityAttrs.max = maxQuantity;
         }
-        return (h(Host, null, h("div", null, h("div", { class: "s-order-edit-item-header" }, h("div", { class: "s-order-edit-item-media" }, imageUrl && (h("a", { href: productUrl }, h("img", { src: imageUrl, alt: imageAlt, class: "s-order-edit-item-image" }))), h("div", { class: "s-order-edit-item-details" }, h("h2", { class: "s-order-edit-item-name" }, h("a", { href: productUrl, class: "s-order-edit-item-link" }, productName)), price != null && (h("span", { class: "s-order-edit-item-price", innerHTML: salla.money(price) })), weightLabel && (h("p", { class: "s-order-edit-item-weight" }, salla.lang.getWithDefault('pages.products.weight', 'الوزن'), " ", weightLabel)))), h("salla-button", { type: "button", shape: "icon", size: "small", color: "danger", "aria-label": salla.lang.getWithDefault('common.elements.delete', 'حذف'), onClick: () => this.removeItem() }, h("i", { class: "sicon-cancel" }))), h("div", { class: "s-order-edit-item-quantity" }, h("h3", { class: "s-order-edit-item-quantity-label" }, salla.lang.getWithDefault('common.elements.quantity', 'الكمية')), h("div", { class: "s-order-edit-item-quantity-input" }, h("salla-quantity-input", { ...quantityAttrs }))), this.hasOptions && (h("form", { onSubmit: e => e.preventDefault() }, h("salla-product-options", { "product-id": product.id, options: JSON.stringify(options), key: `${product.id}-order-edit-item-options` }))))));
+        return (h(Host, null, h("div", null, h("div", { class: "s-order-edit-item-header" }, h("div", { class: "s-order-edit-item-media" }, imageUrl && (h("a", { href: productUrl }, h("img", { src: imageUrl, alt: imageAlt, class: "s-order-edit-item-image" }))), h("div", { class: "s-order-edit-item-details" }, h("h2", { class: "s-order-edit-item-name" }, h("a", { href: productUrl, class: "s-order-edit-item-link" }, productName)), price != null && (h("span", { class: "s-order-edit-item-price", innerHTML: salla.money(price) })), weightLabel && (h("p", { class: "s-order-edit-item-weight" }, salla.lang.getWithDefault('pages.products.weight', 'الوزن'), " ", weightLabel)))), h("salla-button", { type: "button", shape: "icon", size: "small", color: "danger", "aria-label": salla.lang.getWithDefault('common.elements.delete', 'حذف'), onClick: () => this.removeItem() }, h("i", { class: "sicon-cancel" }))), h("div", { class: "s-order-edit-item-quantity" }, h("h3", { class: "s-order-edit-item-quantity-label" }, salla.lang.getWithDefault('common.elements.quantity', 'الكمية')), h("div", { class: "s-order-edit-item-quantity-input" }, h("salla-quantity-input", { ref: el => (this.quantityInput = el), ...quantityAttrs, onChange: this.handleQuantityChange }))), this.hasOptions && (h("form", { class: "s-order-edit-item-options", onSubmit: e => e.preventDefault() }, h("salla-product-options", { ref: el => (this.productOptions = el), onChange: this.handleOptionsChange, "product-id": product.id, "unique-key": optionsInstanceKey, options: JSON.stringify(options), key: `${optionsInstanceKey}-options` }))))));
     }
     static get is() { return "salla-order-edit-item"; }
     static get originalStyleUrls() {
@@ -160,9 +156,20 @@ export class SallaOrderEditItem {
                     "text": "Emitted when an item quantity or options are updated"
                 },
                 "complexType": {
-                    "original": "{\n    itemId: string | number;\n    quantity: number;\n    options?: any[];\n  }",
-                    "resolved": "{ itemId: string | number; quantity: number; options?: any[]; }",
-                    "references": {}
+                    "original": "{\n    itemId: string | number;\n    quantity: number;\n    options?: OrderEditSelectedOptions;\n    optionDefinitions?: OrderEditProductOption[];\n  }",
+                    "resolved": "{ itemId: string | number; quantity: number; options?: OrderEditSelectedOptions; optionDefinitions?: Option[]; }",
+                    "references": {
+                        "OrderEditSelectedOptions": {
+                            "location": "import",
+                            "path": "./interfaces",
+                            "id": "src/components/salla-order-edit/interfaces.ts::OrderEditSelectedOptions"
+                        },
+                        "OrderEditProductOption": {
+                            "location": "import",
+                            "path": "./interfaces",
+                            "id": "src/components/salla-order-edit/interfaces.ts::OrderEditProductOption"
+                        }
+                    }
                 }
             }, {
                 "method": "orderItemRemoved",
@@ -181,5 +188,10 @@ export class SallaOrderEditItem {
                 }
             }];
     }
-    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "item",
+                "methodName": "handleItemChange"
+            }];
+    }
 }

package/dist/collection/components/salla-order-edit/salla-order-edit-product-card.css

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  min-width: 0;
+}

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

@@ -0,0 +1,93 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { h, Host } from "@stencil/core";
+export class SallaOrderEditProductCard {
+    get productData() {
+        if (!this.product) {
+            return {};
+        }
+        if (typeof this.product === 'object') {
+            return this.product;
+        }
+        try {
+            return JSON.parse(this.product);
+        }
+        catch (_error) {
+            return {};
+        }
+    }
+    handleSelectProduct() {
+        this.orderEditProductSelected.emit({ product: this.productData });
+    }
+    render() {
+        const product = this.productData;
+        const productName = product?.name || salla.lang.getWithDefault('common.elements.product', 'منتج');
+        const price = product?.price;
+        return (h(Host, { key: 'e5837d7ec53f2566fe981f02a95b52c7c817821c' }, h("button", { key: '415861262349f83c3c7d1dc72d9f8f01f855317e', type: "button", class: "s-order-edit-product-card", onClick: () => this.handleSelectProduct() }, h("div", { key: '072d3af840d5044636380f5620703cc446877162', class: "s-order-edit-product-card-media" }, product?.image?.url ? (h("img", { src: product.image.url, alt: product.image.alt || productName, class: "s-order-edit-product-card-image" })) : (h("div", { class: "s-order-edit-product-card-placeholder" }, h("i", { class: "sicon-shopping-bag" })))), h("div", { key: 'ac51822bbcf1f2213b11204fa968a40e7de164a3', class: "s-order-edit-product-card-content" }, h("h3", { key: 'e817582bf88db2ed6ac47a37a5d2b4e4ac953770', class: "s-order-edit-product-card-title" }, productName), price != null && (h("p", { key: 'efbf1b16d7c6d73de76bab1e8715a474f812fde4', class: "s-order-edit-product-card-price", innerHTML: salla.money(price) }))))));
+    }
+    static get is() { return "salla-order-edit-product-card"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["salla-order-edit-product-card.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["salla-order-edit-product-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "product": {
+                "type": "string",
+                "attribute": "product",
+                "mutable": false,
+                "complexType": {
+                    "original": "Product | string",
+                    "resolved": "Product | string",
+                    "references": {
+                        "Product": {
+                            "location": "import",
+                            "path": "@salla.sa/twilight/types/common",
+                            "id": "../twilight/types/common.d.ts::Product"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "orderEditProductSelected",
+                "name": "orderEditProductSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{\n    product: Product;\n  }",
+                    "resolved": "{ product: Product; }",
+                    "references": {
+                        "Product": {
+                            "location": "import",
+                            "path": "@salla.sa/twilight/types/common",
+                            "id": "../twilight/types/common.d.ts::Product"
+                        }
+                    }
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}