@salla.sa/twilight-components 2.14.418 → 2.14.419

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

@@ -2,6 +2,7 @@
  * Crafted with ❤ by Salla
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { D as DisplayType, d as defineCustomElement$3 } from './salla-product-options2.js';
 import { d as defineCustomElement$c } from './salla-booking-field2.js';
 import { d as defineCustomElement$b } from './salla-button2.js';
 import { d as defineCustomElement$a } from './salla-color-picker2.js';
@@ -11,11 +12,188 @@ import { d as defineCustomElement$7 } from './salla-file-upload2.js';
 import { d as defineCustomElement$6 } from './salla-loading2.js';
 import { d as defineCustomElement$5 } from './salla-map2.js';
 import { d as defineCustomElement$4 } from './salla-modal2.js';
-import { d as defineCustomElement$3 } from './salla-product-options2.js';
 import { d as defineCustomElement$2 } from './salla-progress-bar2.js';
 import { d as defineCustomElement$1 } from './salla-quantity-input2.js';
 
-const sallaOrderEditItemCss = "";
+let addedOrderItemCounter = 0;
+function generateAddedOrderItemId(productId) {
+    const cryptoRef = (typeof globalThis !== 'undefined' ? globalThis.crypto : undefined);
+    if (cryptoRef && typeof cryptoRef.randomUUID === 'function') {
+        return `new-${productId}-${cryptoRef.randomUUID()}`;
+    }
+    addedOrderItemCounter += 1;
+    return `new-${productId}-${Date.now()}-${addedOrderItemCounter}`;
+}
+function cloneOrderEditProduct(product) {
+    if (product == null) {
+        return product;
+    }
+    return typeof structuredClone === 'function'
+        ? structuredClone(product)
+        : JSON.parse(JSON.stringify(product));
+}
+function buildSavePayload(payload) {
+    return {
+        items: {
+            update: payload.items.update,
+            remove: payload.items.remove,
+            add: payload.items.add.map(({ itemId, ...addItem }) => addItem),
+        },
+    };
+}
+function createAddedOrderItem(product, quantity, optionDefinitions, selectedOptions = {}) {
+    const productData = cloneOrderEditProduct(product);
+    return {
+        id: generateAddedOrderItemId(product.id),
+        quantity,
+        isNew: true,
+        selectedOptions,
+        product: {
+            ...productData,
+            options: cloneOrderEditProduct(optionDefinitions),
+        },
+    };
+}
+function normalizeOrderEditOptionValue(value) {
+    if (typeof File !== 'undefined' && value instanceof File) {
+        return value.name;
+    }
+    return String(value);
+}
+function normalizeSelectedOptions(selectedOptions = {}) {
+    return JSON.stringify(Object.entries(selectedOptions)
+        .filter(([, value]) => value != null && normalizeOrderEditOptionValue(value).length > 0)
+        .map(([optionId, value]) => [String(optionId), normalizeOrderEditOptionValue(value)])
+        .sort(([leftId], [rightId]) => leftId.localeCompare(rightId)));
+}
+function hasSelectedOptions(selectedOptions) {
+    return Boolean(selectedOptions &&
+        Object.values(selectedOptions).some(value => value != null && normalizeOrderEditOptionValue(value).length > 0));
+}
+const detailIdOptionTypes = new Set([
+    DisplayType.COLOR,
+    DisplayType.COUNTRY,
+    DisplayType.DIGITAL_CARD_VALUE,
+    DisplayType.MULTIPLE_OPTIONS,
+    DisplayType.RADIO,
+    DisplayType.SINGLE_OPTION,
+    DisplayType.THUMBNAIL,
+]);
+function getProductOptionSelectedOptions(options = []) {
+    return options.reduce((acc, option) => {
+        if (option?.id == null) {
+            return acc;
+        }
+        const selectedDetails = option.details?.filter(detail => detail?.is_selected) || [];
+        const selectedDetail = selectedDetails[selectedDetails.length - 1];
+        const value = selectedDetail?.id ?? option.value;
+        if (value == null || String(value).length === 0) {
+            return acc;
+        }
+        acc[String(option.id)] = String(value);
+        return acc;
+    }, {});
+}
+function getOrderDetailSelectedOptionValue(item, optionId, value) {
+    const productOption = item?.product?.options?.find(option => String(option.id) === String(optionId));
+    const normalizedValue = String(value);
+    if (!productOption?.details?.length || !detailIdOptionTypes.has(productOption.type)) {
+        return normalizedValue;
+    }
+    const selectedDetail = productOption.details.find(detail => [
+        detail.id,
+        detail.name,
+        detail.option_value,
+        detail.color,
+        detail.image,
+        detail.code,
+        detail.display_value,
+    ].some(detailValue => detailValue != null && String(detailValue) === normalizedValue));
+    return selectedDetail ? String(selectedDetail.id) : normalizedValue;
+}
+function getOrderDetailsSelectedOptions(item) {
+    return (item?.options || []).reduce((acc, option) => {
+        if (option?.id == null) {
+            return acc;
+        }
+        const value = option.value ?? option.display_value;
+        if (value == null || String(value).length === 0) {
+            return acc;
+        }
+        acc[String(option.id)] = getOrderDetailSelectedOptionValue(item, option.id, value);
+        return acc;
+    }, {});
+}
+function getOrderItemSelectedOptions(item) {
+    if (hasSelectedOptions(item?.selectedOptions)) {
+        return item.selectedOptions;
+    }
+    const productSelectedOptions = getProductOptionSelectedOptions(item?.product?.options);
+    if (hasSelectedOptions(productSelectedOptions)) {
+        return productSelectedOptions;
+    }
+    return getOrderDetailsSelectedOptions(item);
+}
+function findMergeableItem(items = [], productId, selectedOptions = {}) {
+    const targetSelectedOptions = normalizeSelectedOptions(selectedOptions);
+    return items.find(item => String(item.product?.id) === String(productId) &&
+        normalizeSelectedOptions(getOrderItemSelectedOptions(item)) === targetSelectedOptions);
+}
+function getOrderEditProductMaxQuantity(product) {
+    const rawQuantity = product?.max_quantity ?? product?.max_quantity_per_order;
+    const parsedQuantity = Number(rawQuantity);
+    return Number.isFinite(parsedQuantity) && parsedQuantity > 0 ? parsedQuantity : undefined;
+}
+function clampOrderEditQuantity(quantity, maxQuantity) {
+    if (!Number.isFinite(quantity) || quantity < 1) {
+        return 1;
+    }
+    if (maxQuantity && quantity > maxQuantity) {
+        return maxQuantity;
+    }
+    return quantity;
+}
+function patchOrderItem(item, quantity, optionDefinitions, selectedOptions) {
+    return {
+        ...item,
+        quantity,
+        selectedOptions: selectedOptions ?? getOrderItemSelectedOptions(item),
+        product: item.product
+            ? {
+                ...item.product,
+                options: optionDefinitions ?? item.product.options,
+            }
+            : item.product,
+    };
+}
+function updateOrderItems(items = [], itemId, quantity, optionDefinitions, selectedOptions) {
+    return items.map(item => item.id === itemId ? patchOrderItem(item, quantity, optionDefinitions, selectedOptions) : item);
+}
+function removeOrderItems(items = [], itemId) {
+    return items.filter(item => item.id !== itemId);
+}
+function mergePayloadItems(items, patch) {
+    return {
+        ...items,
+        ...patch,
+    };
+}
+function upsertPayloadUpdateList(updateList = [], itemId, quantity, options = {}) {
+    const nextUpdateList = updateList.filter(item => item.id !== itemId);
+    nextUpdateList.push({ id: itemId, quantity, options });
+    return nextUpdateList;
+}
+function updateAddedPayloadList(addList = [], itemId, quantity, options) {
+    return addList.map(item => item.itemId === itemId
+        ? {
+            ...item,
+            quantity,
+            options: options ?? item.options,
+        }
+        : item);
+}
+
+const sallaOrderEditItemCss = ":host{display:block}";
 
 const SallaOrderEditItem = /*@__PURE__*/ proxyCustomElement(class SallaOrderEditItem extends HTMLElement {
     constructor() {
@@ -23,6 +201,8 @@ const SallaOrderEditItem = /*@__PURE__*/ proxyCustomElement(class SallaOrderEdit
         this.__registerHost();
         this.orderItemUpdated = createEvent(this, "orderItemUpdated", 7);
         this.orderItemRemoved = createEvent(this, "orderItemRemoved", 7);
+        this.quantityInput = null;
+        this.productOptions = null;
         this.handleQuantityChange = (event) => {
             const detail = event.detail;
             const newQuantity = detail?.quantity ?? parseInt(event.target.value, 10);
@@ -40,38 +220,30 @@ const SallaOrderEditItem = /*@__PURE__*/ proxyCustomElement(class SallaOrderEdit
     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);
     }
@@ -90,21 +262,26 @@ const SallaOrderEditItem = /*@__PURE__*/ proxyCustomElement(class SallaOrderEdit
         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` }))))));
     }
-    get host() { return this; }
+    static get watchers() { return {
+        "item": ["handleItemChange"]
+    }; }
     static get style() { return sallaOrderEditItemCss; }
 }, [0, "salla-order-edit-item", {
         "item": [16],
         "orderId": [8, "order-id"],
         "quantity": [32]
+    }, undefined, {
+        "item": ["handleItemChange"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
@@ -181,4 +358,4 @@ function defineCustomElement() {
 }
 defineCustomElement();
 
-export { SallaOrderEditItem as S, defineCustomElement as d };
+export { SallaOrderEditItem as S, getOrderEditProductMaxQuantity as a, cloneOrderEditProduct as b, clampOrderEditQuantity as c, defineCustomElement as d, updateAddedPayloadList as e, findMergeableItem as f, getOrderItemSelectedOptions as g, upsertPayloadUpdateList as h, createAddedOrderItem as i, buildSavePayload as j, mergePayloadItems as m, removeOrderItems as r, updateOrderItems as u };

package/dist/components/salla-order-edit-product-card.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SallaOrderEditProductCard extends Components.SallaOrderEditProductCard, HTMLElement {}
+export const SallaOrderEditProductCard: {
+    prototype: SallaOrderEditProductCard;
+    new (): SallaOrderEditProductCard;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,59 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const sallaOrderEditProductCardCss = ":host{display:block;min-width:0}";
+
+const SallaOrderEditProductCard$1 = /*@__PURE__*/ proxyCustomElement(class SallaOrderEditProductCard extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.orderEditProductSelected = createEvent(this, "orderEditProductSelected", 7);
+    }
+    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 style() { return sallaOrderEditProductCardCss; }
+}, [0, "salla-order-edit-product-card", {
+        "product": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-order-edit-product-card"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-order-edit-product-card":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaOrderEditProductCard$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaOrderEditProductCard = SallaOrderEditProductCard$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaOrderEditProductCard, defineCustomElement };