@salla.sa/twilight-components 2.14.418 → 2.14.420

package/dist/components/salla-loyalty-panel.js

@@ -84,17 +84,19 @@ const SallaLoyaltyPanel$1 = /*@__PURE__*/ proxyCustomElement(class SallaLoyaltyP
     render() {
         const prizesGroups = this.program.data.prizes;
         const prizesCount = this.program.data.prizes_count;
-        const isLoadingPoints = this.points.status === 'pending' && this.points.data === null && !this.customerPoints;
-        const customerPoints = isLoadingPoints ? '---' : (this.points.data ?? this.customerPoints ?? 0);
+        const customerPoints = (this.points.data ?? this.customerPoints ?? 0);
         if (this.prizeTitle && this.prizePoints) {
             return (h("div", { class: "s-loyalty-program-panel-exchange-wrapper" }, h("salla-list-tile", { class: "s-loyalty-program-after-exchange" }, h("div", { slot: "title", class: "s-loyalty-program-after-exchange-title" }, this.prizeTitle, " \u00A0 - \u00A0 ", this.prizePoints, " ", salla.lang.get('pages.loyalty_program.point')), h("div", { slot: "action", class: "s-loyalty-program-after-exchange-action" }, h("salla-button", { class: "s-loyalty-program-after-exchange-reset", shape: "icon", fill: 'outline', color: "danger", size: "small", onClick: () => salla.loyalty.reset() }, h("span", { innerHTML: Cancel }))))));
         }
+        if (!customerPoints || customerPoints === 0) {
+            return null;
+        }
         return (h("div", { class: "" }, h("div", { class: "s-loyalty-program-panel-exchange-wrapper" }, h("salla-list-tile", { class: 's-loyalty-program-panel-widget' }, h("div", { slot: "icon", class: "s-loyalty-program-panel-widget-icon", innerHTML: Rate }), h("div", { slot: "subtitle" }, salla.lang.get('pages.loyalty_program.cart_total_point_summary', { "balance": customerPoints }), h("salla-button", { shape: "link", color: "primary", onClick: () => {
                 if (['error', 'idle'].includes(this.program.status)) {
                     this.program();
                 }
                 this.rewardsModal.open();
-            } }, customerPoints !== '---' && customerPoints ? salla.lang.get('pages.loyalty_program.cart_point_exchange_now') : salla.lang.get('blocks.header.login'))))), h("salla-modal", { id: "loyalty-rewards-modal", isLoading: this.program.status === 'pending', ref: modal => this.rewardsModal = modal, class: "s-loyalty-program-rewards-cart s-loyalty-program-modal", width: "lg", noPadding: true }, h("div", { slot: "loading" }, h("salla-loading", null)), this.program.status === 'success' ? h("div", { class: "s-loyalty-program-rewards-container-cart" }, h("div", { class: "s-loyalty-program-rewards-cart-header" }, h("div", { innerHTML: PrizeImage }), h("div", { class: "s-loyalty-program-panel-content" }, h("h1", null, this.program.data.prize_promotion_title), h("p", null, this.program.data.prize_promotion_description))), h("div", { class: {
+            } }, salla.lang.get('pages.loyalty_program.cart_point_exchange_now'))))), h("salla-modal", { id: "loyalty-rewards-modal", isLoading: this.program.status === 'pending', ref: modal => this.rewardsModal = modal, class: "s-loyalty-program-rewards-cart s-loyalty-program-modal", width: "lg", noPadding: true }, h("div", { slot: "loading" }, h("salla-loading", null)), this.program.status === 'success' ? h("div", { class: "s-loyalty-program-rewards-container-cart" }, h("div", { class: "s-loyalty-program-rewards-cart-header" }, h("div", { innerHTML: PrizeImage }), h("div", { class: "s-loyalty-program-panel-content" }, h("h1", null, this.program.data.prize_promotion_title), h("p", null, this.program.data.prize_promotion_description))), h("div", { class: {
                 's-loyalty-program-slider-arrows': true,
                 's-loyalty-program-tabs-hider': prizesGroups.length < 2 || prizesCount < 2,
             } }, h("salla-tabs", null, prizesGroups.map((group) => (h("salla-tab-header", { slot: "header", name: group.type }, sicons[group.type], h("span", null, group.title)))), prizesGroups.map((group) => (h("salla-tab-content", { slot: "content", name: group.type }, h("salla-slider", { id: group.type, type: "default", "slider-config": '{"loop":false,"slidesPerView":"auto","freeMode":true,"spaceBetween":12,"breakpoints":{"768":{"slidesPerView":3,"spaceBetween":24,"freeMode":false,"speed":300}}}' }, h("div", { slot: "items" }, group.items.map((prize) => h("salla-reward-card", { prize: prize, onAreaClick: () => {

package/dist/components/salla-loyalty.js

@@ -73,6 +73,8 @@ const SallaLoyalty$1 = /*@__PURE__*/ proxyCustomElement(class SallaLoyalty exten
     constructor() {
         super();
         this.__registerHost();
+        this.activeTabType = '';
+        this.tabsKey = 0;
         this.selectedItem = undefined;
         /**
          * Does the merchant allow to login using email
@@ -103,6 +105,11 @@ const SallaLoyalty$1 = /*@__PURE__*/ proxyCustomElement(class SallaLoyalty exten
             this.customerPoints = cart.loyalty.customer_points || this.customerPoints;
         });
     }
+    onTabSelected(event) {
+        const prize = this.loyaltyProgram?.prizes.find(p => p.title === event.detail?.name);
+        if (prize)
+            this.activeTabType = prize.type;
+    }
     setSelectedPrizeItem(item) {
         if (!this.selectedItem || this.selectedItem?.id != item.id) {
             this.selectedItem = item;
@@ -143,6 +150,8 @@ const SallaLoyalty$1 = /*@__PURE__*/ proxyCustomElement(class SallaLoyalty exten
         return await salla.loyalty.getProgram()
             .then(response => {
             this.loyaltyProgram = response.data;
+            this.activeTabType = this.loyaltyProgram.prizes[0]?.type || '';
+            this.tabsKey++;
         })
             .catch(e => {
             this.hasError = true;
@@ -208,8 +217,10 @@ const SallaLoyalty$1 = /*@__PURE__*/ proxyCustomElement(class SallaLoyalty exten
             h("salla-modal", { isLoading: true, "has-skeleton": true, width: "md", ref: modal => this.modal = modal }, h("div", { slot: "loading" }, h("div", { class: "s-loyalty-skeleton" }, h("salla-list-tile", { class: "s-loyalty-header" }, h("div", { slot: "icon", class: "s-loyalty-header-icon" }, h("salla-skeleton", { type: "circle", height: '6rem', width: '6rem' })), h("div", { slot: "title", class: "s-loyalty-header-title mb-5" }, h("salla-skeleton", { height: '15px', width: '50%' })), h("div", { slot: "subtitle", class: "s-loyalty-header-subtitle" }, h("salla-skeleton", { height: '10px' }), h("salla-skeleton", { height: '10px', width: '75%' }))), h("div", { class: "s-loyalty-skeleton-cards" }, [...Array(3)].map(() => h("div", { class: "s-loyalty-prize-item swiper-slide" }, h("salla-skeleton", { height: '9rem' }), h("div", { class: "s-loyalty-prize-item-title" }, h("salla-skeleton", { height: '15px', width: '75%' })), h("div", { class: "s-loyalty-prize-item-subtitle" }, h("salla-skeleton", { height: '10px', width: '50%' }), h("salla-skeleton", { height: '10px', width: '25%' })), h("div", { class: "s-loyalty-prize-item-points" }, h("salla-skeleton", { height: '15px', width: '100px' }), h("div", { class: "s-loyalty-prize-item-check" }, h("salla-skeleton", { height: '1rem', width: '1rem', type: 'circle' })))))))), !this.hasError && !!this.loyaltyProgram ?
                 [
                     h("salla-list-tile", { id: 's-loyalty-header', class: "s-loyalty-header" }, h("div", { slot: "icon", class: "s-loyalty-header-icon", innerHTML: GiftImg }), h("div", { slot: "title", class: "s-loyalty-header-title" }, this.loyaltyProgram.prize_promotion_title), h("div", { slot: "subtitle", class: "s-loyalty-header-subtitle" }, this.loyaltyProgram.prize_promotion_description)),
-                    h("salla-tabs", null, this.loyaltyProgram.prizes.map((prize) => h("salla-tab-header", { slot: "header", name: prize.title }, h("span", null, prize.title))), this.loyaltyProgram.prizes.map((prize, index) => h("salla-tab-content", { slot: "content", name: prize.title }, h("salla-slider", { class: "s-loyalty-slider", loop: false, "controls-outer": true, id: 'loyalty-popup-slider-' + index, type: "carousel" }, h("div", { slot: 'items' }, prize.items.map((item) => this.prizeItem(item))))))),
-                    h("salla-button", { disabled: !this.selectedItem, width: "wide", class: "s-loyalty-program-redeem-btn", onClick: () => this.openConfirmation() }, salla.lang.get('pages.loyalty_program.exchange_points')),
+                    h("salla-tabs", { key: this.tabsKey }, this.loyaltyProgram.prizes.map((prize) => h("salla-tab-header", { slot: "header", name: prize.title }, h("span", null, prize.title))), this.loyaltyProgram.prizes.map((prize, index) => h("salla-tab-content", { slot: "content", name: prize.title }, h("salla-slider", { class: "s-loyalty-slider", loop: false, "controls-outer": true, id: 'loyalty-popup-slider-' + index, type: "carousel" }, h("div", { slot: 'items' }, prize.items.map((item) => this.prizeItem(item))))))),
+                    this.activeTabType?.toUpperCase() === 'FREE_PRODUCT'
+                        ? h("a", { href: salla.url.get(''), class: "s-loyalty-program-redeem-btn s-button-element s-button-btn s-button-solid s-button-wide s-button-primary s-button-wrap" }, salla.lang.get('pages.loyalty_program.shop_now'))
+                        : h("salla-button", { disabled: !this.selectedItem, width: "wide", class: "s-loyalty-program-redeem-btn", onClick: () => this.openConfirmation() }, salla.lang.get('pages.loyalty_program.exchange_points')),
                 ]
                 : h("salla-placeholder", { class: "s-loyalty-placeholder", alignment: "center" }, !!this.errorMessage ? h("span", { slot: "description" }, this.errorMessage) : '')),
         ];
@@ -224,6 +235,8 @@ const SallaLoyalty$1 = /*@__PURE__*/ proxyCustomElement(class SallaLoyalty exten
         "requireEmail": [4, "require-email"],
         "guestMessage": [1025, "guest-message"],
         "loyaltyProgram": [32],
+        "activeTabType": [32],
+        "tabsKey": [32],
         "buttonLoading": [32],
         "selectedItem": [32],
         "askConfirmation": [32],
@@ -235,7 +248,7 @@ const SallaLoyalty$1 = /*@__PURE__*/ proxyCustomElement(class SallaLoyalty exten
         "close": [64],
         "resetExchange": [64],
         "exchangeLoyaltyPoint": [64]
-    }]);
+    }, [[0, "tabSelected", "onTabSelected"]]]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

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 };