@salla.sa/twilight-components 2.14.290 → 2.14.292

package/dist/collection/components/salla-multiple-bundle-product/components/salla-multiple-bundle-product-options-modal.js

@@ -9,6 +9,7 @@ export class SallaMultipleBundleProductOptionsModal {
         this.sectionIndex = 0;
         this.productIndex = 0;
         this.selectedOptions = {};
+        this.optionsResetTokens = {};
         this.isLoading = false;
         this.hasUnsavedChanges = false;
         this.validationErrors = [];
@@ -65,17 +66,21 @@ export class SallaMultipleBundleProductOptionsModal {
         this.selectedOptions = { ...this.selectedOptions };
     }
     componentDidLoad() {
-        salla.event.on('multiple-bundle-product-modal::open', (data) => {
+        this.modalOpenListener = (data) => {
             this.product = data.product;
             this.sectionId = data.sectionId || null;
             this.sectionIndex = data.sectionIndex || 0;
             this.productIndex = data.productIndex || 0;
             this.open();
-        });
+        };
+        salla.event.on('multiple-bundle-product-modal::open', this.modalOpenListener);
         // Listen for clear-options event when a product is deselected
-        salla.event.on('multiple-bundle-product-modal::clear-options', (data) => {
-            this.clearProductOptions(data.productId);
-        });
+        this.clearOptionsListener = (data) => {
+            if (!data || !data.productId)
+                return;
+            this.clearProductOptions(data.productId, data.sectionId, data.productIndex);
+        };
+        salla.event.on('multiple-bundle-product-modal::clear-options', this.clearOptionsListener);
         // Create and store the option change listener for proper cleanup
         this.optionChangeListener = (e) => {
             const { productId, option, detail } = e.detail;
@@ -100,60 +105,16 @@ export class SallaMultipleBundleProductOptionsModal {
                 // Extract section info from the checkbox name: bundle[sectionId][productIndex][id]
                 const nameMatch = target.name.match(/^bundle\[([^\]]+)\]\[([^\]]+)\]\[id\]$/);
                 if (nameMatch && !target.checked) {
-                    // Product was deselected, clear its cached options
                     const [, sectionId, productIndex] = nameMatch;
                     const productId = target.value;
-                    // Prevent the immediate event to ensure cleanup happens first
-                    e.preventDefault();
-                    e.stopPropagation();
-                    // Ensure the checkbox is actually unchecked
-                    target.checked = false;
-                    // Generate the same cache key used by the modal
-                    const cacheKey = this.generateCacheKey(sectionId, parseInt(productIndex), productId);
-                    // Clear the cached options for this product
-                    const updatedSelectedOptions = { ...this.selectedOptions };
-                    delete updatedSelectedOptions[cacheKey];
-                    this.selectedOptions = updatedSelectedOptions;
-                    // Force re-render of the modal if it's currently open for this product
-                    if (this.product && this.product.id == productId) {
-                        this.selectedOptions = { ...this.selectedOptions };
-                    }
                     const form = this.host.closest('form');
-                    if (form) {
-                        const productInputPattern = `bundle[${sectionId}][${productIndex}]`;
-                        // Get all form inputs and filter manually
-                        const allInputs = Array.from(form.querySelectorAll('input'));
-                        const matchingInputs = allInputs.filter(input => input.name && input.name.startsWith(productInputPattern));
-                        // Process matching inputs for removal
-                        matchingInputs.forEach(el => {
-                            // Don't remove the visible checkbox that was just unchecked
-                            if (el !== target && (el.type === 'hidden' || el.hasAttribute('data-product-id'))) {
-                                el.remove();
-                            }
-                        });
-                        // Method 2: Find inputs by data-product-id BUT only within the same section/productIndex
-                        const dataProductInputs = allInputs.filter(input => {
-                            // Must have data-product-id matching the productId
-                            if (input.getAttribute('data-product-id') !== String(productId)) {
-                                return false;
-                            }
-                            // Must also be within the same section/productIndex pattern
-                            return input.name && input.name.startsWith(productInputPattern);
-                        });
-                        // Process inputs with matching section/productIndex and productId for removal
-                        dataProductInputs.forEach(el => {
-                            if (el !== target) {
-                                el.remove();
-                            }
-                        });
-                        // Method 3: Removed broader search to prevent removing inputs from other products
-                        // The cleanup is now more precise and only removes inputs for the specific product
-                        // Trigger form change event after cleanup is complete
-                        setTimeout(() => {
-                            const changeEvent = new window.Event('change', { bubbles: true });
-                            form.dispatchEvent(changeEvent);
-                        }, 50); // Small delay to ensure cleanup is complete
-                    }
+                    this.cleanupProductDeselection({
+                        sectionId,
+                        productIndex: parseInt(productIndex, 10),
+                        productId,
+                        form,
+                        uncheckedInput: target,
+                    });
                 }
             }
         };
@@ -165,6 +126,37 @@ export class SallaMultipleBundleProductOptionsModal {
         if (this.checkboxChangeListener) {
             document.removeEventListener('change', this.checkboxChangeListener);
         }
+        if (this.optionChangeListener) {
+            salla.event.off('product-options::change', this.optionChangeListener);
+        }
+        if (this.modalOpenListener) {
+            salla.event.off('multiple-bundle-product-modal::open', this.modalOpenListener);
+        }
+        if (this.clearOptionsListener) {
+            salla.event.off('multiple-bundle-product-modal::clear-options', this.clearOptionsListener);
+        }
+    }
+    cleanupProductDeselection(params) {
+        const { sectionId, productIndex, productId, form, uncheckedInput } = params;
+        this.clearProductOptions(productId, sectionId, productIndex);
+        if (form) {
+            const productInputPattern = `bundle[${sectionId}][${productIndex}]`;
+            Array.from(form.querySelectorAll(`input[name^="${productInputPattern}"]`)).forEach(input => {
+                if (input === uncheckedInput) {
+                    return;
+                }
+                const shouldRemoveHidden = input.type === 'hidden';
+                const shouldRemoveByDataset = input.getAttribute('data-product-id') === String(productId) &&
+                    input.name?.startsWith(productInputPattern);
+                if (shouldRemoveHidden || shouldRemoveByDataset) {
+                    input.remove();
+                }
+            });
+            requestAnimationFrame(() => {
+                const changeEvent = new window.Event('change', { bubbles: true });
+                form.dispatchEvent(changeEvent);
+            });
+        }
     }
     generateFormInputName(sectionId, productIndex, optionParentId) {
         return `bundle[${sectionId}][${productIndex}][options][${optionParentId}]`;
@@ -191,17 +183,37 @@ export class SallaMultipleBundleProductOptionsModal {
         }
     }
     // Clear options state for a specific product
-    clearProductOptions(productId) {
-        // Generate cache key for this specific product in current section context
-        const cacheKey = this.generateCacheKey(this.sectionId, this.productIndex, productId);
-        // Remove the product from selectedOptions using the cache key
+    clearProductOptions(productId, sectionId, productIndex) {
         const updatedSelectedOptions = { ...this.selectedOptions };
-        delete updatedSelectedOptions[cacheKey];
+        if (sectionId != null && productIndex != null && !Number.isNaN(productIndex)) {
+            const cacheKey = this.generateCacheKey(sectionId, productIndex, productId);
+            delete updatedSelectedOptions[cacheKey];
+            this.bumpOptionsResetToken(cacheKey);
+        }
+        else {
+            const productSuffix = `-${String(productId)}`;
+            const affectedKeys = [];
+            Object.keys(updatedSelectedOptions).forEach(key => {
+                if (key.endsWith(productSuffix)) {
+                    delete updatedSelectedOptions[key];
+                    affectedKeys.push(key);
+                }
+            });
+            affectedKeys.forEach(key => this.bumpOptionsResetToken(key));
+        }
         this.selectedOptions = updatedSelectedOptions;
         // Reset validation errors and unsaved changes
         this.validationErrors = [];
         this.hasUnsavedChanges = false;
     }
+    bumpOptionsResetToken(cacheKey) {
+        if (!cacheKey)
+            return;
+        this.optionsResetTokens = {
+            ...this.optionsResetTokens,
+            [cacheKey]: (this.optionsResetTokens[cacheKey] || 0) + 1,
+        };
+    }
     async handleOptionChange(productId, option, detail) {
         const cacheKey = this.generateCacheKey(this.sectionId, this.productIndex, productId);
         // Get the current state from the component to ensure we have the latest selections
@@ -396,6 +408,8 @@ export class SallaMultipleBundleProductOptionsModal {
             this.optionsSaved.emit({
                 productId: Number(productId),
                 selectedOptions,
+                sectionId: this.sectionId,
+                productIndex: this.productIndex,
             });
             // Emit product selected event to check the card
             if (this.sectionId) {
@@ -442,7 +456,9 @@ export class SallaMultipleBundleProductOptionsModal {
     render() {
         const productId = this.product?.id;
         const optionsWithSelectedState = this.getOptionsWithSelectedState();
-        return (h(Host, { key: 'f48867c1730d142b1e55ddb4442c7e7d789a35bb' }, h("salla-modal", { key: '62196cd41c3979ca5e71327d9aad450a819a45ec', isLoading: this.isLoading, ref: el => (this.modal = el), width: "md", centered: false, id: `s-multiple-bundle-product-options-modal-options-${productId}`, class: "s-multiple-bundle-product-options-modal-wrapper" }, h("div", { key: 'feee0e09d5f1dbb19f02b8c109f43e7dc5d1dad8', slot: "loading" }, h("salla-skeleton", { key: '149debcb4852d4096613721a202f4079439abf0a', height: "100%", width: "100%" })), this.product?.images && this.product?.images.length > 0 && (h("salla-slider", { key: '591045fe1d3c9e30bb53a927d3e4d62b54623503', id: `details-slider-${this.product?.id}`, type: "thumbs", loop: false, "auto-height": true, "listen-to-thumbnails-option": true, showThumbsControls: false, controlsOuter: false, showControls: false, class: "s-multiple-bundle-product-options-modal-slider", verticalThumbs: true, thumbsConfig: {
+        const cacheKey = this.generateCacheKey(this.sectionId, this.productIndex, productId);
+        const resetToken = this.optionsResetTokens[cacheKey] || 0;
+        return (h(Host, { key: 'ce4cec97975d0aef32b50a13237a2d64701d8e9f' }, h("salla-modal", { key: 'cda08db7768f0b987a9569ca1170b059a58a417e', isLoading: this.isLoading, ref: el => (this.modal = el), width: "md", centered: false, id: `s-multiple-bundle-product-options-modal-options-${productId}`, class: "s-multiple-bundle-product-options-modal-wrapper" }, h("div", { key: 'd093204f6d85e7a874e0a69a826869e179aeafa4', slot: "loading" }, h("salla-skeleton", { key: '140608027bb0237b62eeb24d1eb5e47c5279c7e3', height: "100%", width: "100%" })), this.product?.images && this.product?.images.length > 0 && (h("salla-slider", { key: '807f2428e8219d9ab6e46163a5d03ad0b2e1b9a3', id: `details-slider-${this.product?.id}`, type: "thumbs", loop: false, "auto-height": true, "listen-to-thumbnails-option": true, showThumbsControls: false, controlsOuter: false, showControls: false, class: "s-multiple-bundle-product-options-modal-slider", verticalThumbs: true, thumbsConfig: {
                 centeredSlides: true,
                 centeredSlidesBounds: true,
                 slidesPerView: Math.min(5, Math.max(1, this.product?.images.length)),
@@ -451,13 +467,13 @@ export class SallaMultipleBundleProductOptionsModal {
                 watchSlidesProgress: true,
                 direction: 'vertical',
                 spaceBetween: 10,
-            } }, h("div", { key: '1c4163f6d60a89b12d681e3df2db87a523ab092b', slot: "items" }, this.product?.images &&
+            } }, h("div", { key: 'f287bea52aa1e3c68debd0b68d011025ea3f9157', slot: "items" }, this.product?.images &&
             this.product?.images.map((image, index) => (h("div", { key: index, class: "swiper-slide" }, h("img", { src: image.url, alt: image.alt || `${this.product?.name} - Image ${index + 1}`, loading: "lazy", onError: e => {
                     e.target.style.display = 'none';
-                } }))))), this.product?.images && this.product?.images.length > 1 && (h("div", { key: '911fe5aad35ab3e733871bb185e7a89bb74b6da3', slot: "thumbs" }, this.product?.images &&
+                } }))))), this.product?.images && this.product?.images.length > 1 && (h("div", { key: '5d8064ef63c91a660a3b3267afb29e498ac76f4c', slot: "thumbs" }, this.product?.images &&
             this.product?.images.map((image, index) => (h("div", { key: index, "data-caption": `${this.product?.name} - Image ${index + 1}` }, h("img", { src: image.url, loading: "eager", class: "s-multiple-bundle-product-options-modal-slider-thumb", title: `${this.product?.name} - ${index + 1}`, alt: image.alt || `${this.product?.name} - ${index + 1}`, onError: e => {
                     e.target.style.display = 'none';
-                } })))))))), h("salla-product-options", { options: JSON.stringify(optionsWithSelectedState), key: `${this.sectionId}-${this.sectionIndex}-${productId}-persistent`, "product-id": productId }), h("div", { key: 'd107ebd058a3f349a5f2f05f4e2b685942d485d6', slot: "footer" }, h("div", { key: '01c7d37a91bb95eb830fcc3290a7cfde9ef7324b', class: "s-multiple-bundle-product-options-modal-footer" }, h("salla-button", { key: '402b9d19c176ebaec8bd7396b9bafe74b81fa456', onClick: e => this.onSave(e), loading: this.isLoading, disabled: this.isLoading }, this.isLoading
+                } })))))))), h("salla-product-options", { options: JSON.stringify(optionsWithSelectedState), key: `${cacheKey}-reset-${resetToken}`, "product-id": productId, "unique-key": `${cacheKey}-reset-${resetToken}` }), h("div", { key: '2f6c7f133ccabd75bbb9e8649c056619ce754296', slot: "footer" }, h("div", { key: '1c04908511a480af63fc4e358393514c74967508', class: "s-multiple-bundle-product-options-modal-footer" }, h("salla-button", { key: '49fbad4b1e71004dc8fd6df5d0f1a61b1ef25b8d', onClick: e => this.onSave(e), loading: this.isLoading, disabled: this.isLoading }, this.isLoading
             ? salla.lang.get('common.elements.saving')
             : salla.lang.get('common.elements.save')))))));
     }
@@ -480,6 +496,7 @@ export class SallaMultipleBundleProductOptionsModal {
             "sectionIndex": {},
             "productIndex": {},
             "selectedOptions": {},
+            "optionsResetTokens": {},
             "isLoading": {},
             "hasUnsavedChanges": {},
             "validationErrors": {}
@@ -497,8 +514,8 @@ export class SallaMultipleBundleProductOptionsModal {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{ productId: number; selectedOptions: SelectedOption[] }",
-                    "resolved": "{ productId: number; selectedOptions: SelectedOption[]; }",
+                    "original": "{\n    productId: number;\n    selectedOptions: SelectedOption[];\n    sectionId?: string | number | null;\n    productIndex?: number | null;\n  }",
+                    "resolved": "{ productId: number; selectedOptions: SelectedOption[]; sectionId?: string | number; productIndex?: number; }",
                     "references": {
                         "SelectedOption": {
                             "location": "import",

package/dist/collection/components/salla-multiple-bundle-product/components/salla-multiple-bundle-product-slider.js

@@ -1,10 +1,13 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
+import KeyBoardArrowLeftIcon from "../../../assets/svg/keyboard_arrow_left.svg";
+import KeyBoardArrowRightIcon from "../../../assets/svg/keyboard_arrow_right.svg";
 export class SallaMultipleBundleProductSlider {
     constructor() {
         this.selectedProducts = {};
+        this.savedOptionsByInstance = {};
         this.handleProductClick = (product, productIndex) => {
             // Find the checkbox input for this product
             const checkboxId = this.generateEventName(this.section.id, productIndex);
@@ -17,6 +20,10 @@ export class SallaMultipleBundleProductSlider {
                 // Dispatch a change event to trigger form validation/submission
                 const changeEvent = new window.Event('change', { bubbles: true });
                 checkbox.dispatchEvent(changeEvent);
+                if (!checkbox.checked) {
+                    this.clearSavedOptionsState(this.section.id, productIndex);
+                    this.dispatchClearOptionsEvent(product, productIndex);
+                }
             }
             this.productSelected.emit({
                 product,
@@ -30,17 +37,66 @@ export class SallaMultipleBundleProductSlider {
             });
         };
     }
+    getProductInstanceKey(sectionId, productIndex) {
+        return `${sectionId}::${productIndex}`;
+    }
+    dispatchClearOptionsEvent(product, productIndex) {
+        salla.event.dispatch('multiple-bundle-product-modal::clear-options', {
+            productId: product.id,
+            sectionId: this.section.id,
+            sectionIndex: this.sectionIndex,
+            productIndex,
+        });
+    }
+    handleOptionsSaved(event) {
+        const detail = event.detail;
+        if (!detail)
+            return;
+        const { sectionId, productIndex, selectedOptions } = detail;
+        if (sectionId == null || sectionId !== this.section?.id)
+            return;
+        if (productIndex == null || Number.isNaN(productIndex))
+            return;
+        const key = this.getProductInstanceKey(sectionId, productIndex);
+        const hasOptions = !!selectedOptions?.length;
+        if (hasOptions) {
+            this.savedOptionsByInstance = {
+                ...this.savedOptionsByInstance,
+                [key]: true,
+            };
+        }
+        else if (this.savedOptionsByInstance[key]) {
+            const updatedState = { ...this.savedOptionsByInstance };
+            delete updatedState[key];
+            this.savedOptionsByInstance = updatedState;
+        }
+    }
+    clearSavedOptionsState(sectionId, productIndex) {
+        const key = this.getProductInstanceKey(sectionId, productIndex);
+        if (!this.savedOptionsByInstance[key])
+            return;
+        const updatedState = { ...this.savedOptionsByInstance };
+        delete updatedState[key];
+        this.savedOptionsByInstance = updatedState;
+    }
     generateEventName(sectionId, productIndex) {
         return `bundle[${sectionId}][${productIndex}][id]`;
     }
     render() {
-        return (h(Host, { key: 'ec6fb04196690c5299da565d852ec77bbee6b1e3' }, h("salla-slider", { key: 'a7e79c2f27a53135e55e2708b5aa60d05f9ad21b', type: "carousel", controlsOuter: false, showControls: false, id: "accordion-multiple-bundle-product", pagination: true, class: "s-multiple-bundle-product-wrapper-slider", sliderConfig: {
+        return (h(Host, { key: '234e93258c3d7ca5d7dc08efb68743d042646706' }, h("salla-slider", { key: '451184823378e4ad0c9034d3af1b87373bcb7d20', type: "carousel", controlsOuter: false, showControls: false, id: "accordion-multiple-bundle-product", pagination: true, class: "s-multiple-bundle-product-wrapper-slider", sliderConfig: {
                 spaceBetween: 0,
-            } }, h("div", { key: 'c07aa5a0ee4fe106764b47dfa6d9f6509fb659cf', slot: "items" }, this?.section?.products?.map((product, productIndex) => {
+            } }, h("div", { key: '28c1acfd37a77059d4c177b787dca9deea47d123', slot: "items" }, this?.section?.products?.map((product, productIndex) => {
             const isChecked = this.selectedProducts[this.section.id]?.has(product.id) || false;
-            return (h("div", { class: `swiper-slide s-multiple-bundle-product-slide-one-third ${product.quantity == 0
+            const hasSavedOptions = this.savedOptionsByInstance[this.getProductInstanceKey(this.section.id, productIndex)];
+            const optionsButtonLabel = hasSavedOptions
+                ? salla.lang.getWithDefault('pages.products.edit_selected_options', 'تعديل الخيارات')
+                : salla.lang.get('pages.products.choose_from_options');
+            let optionsArrowIcon = salla.config.get('theme.is_rtl', true)
+                ? KeyBoardArrowLeftIcon
+                : KeyBoardArrowRightIcon;
+            return (h("div", { class: `s-multiple-bundle-product-slide-one-third ${product.quantity == 0
                     ? 's-multiple-bundle-product-slide-one-third-disabled'
-                    : ''}`, key: product.id }, h("div", { class: "s-multiple-bundle-product-card" }, h("div", { class: "s-multiple-bundle-product-image-wrapper", onClick: () => this.handleProductClick(product, productIndex) }, h("input", { id: this.generateEventName(this.section.id, productIndex), type: "checkbox", class: "s-multiple-bundle-product-checkbox", checked: isChecked, name: this.generateEventName(this.section.id, productIndex), value: product.id }), h("img", { src: product.image.url || salla.url.cdn('images/s-empty.png'), loading: "lazy", alt: product.image.alt || product.name, class: "s-multiple-bundle-product-image" })), h("div", { class: "s-multiple-bundle-product-content-wrapper" }, h("div", { class: "s-multiple-bundle-product-content" }, h("div", { class: "s-multiple-bundle-product-details" }, h("div", { class: "s-multiple-bundle-product-title-wrapper" }, h("h2", { class: "s-multiple-bundle-product-title" }, product.name)), h("div", { class: "s-multiple-bundle-product-price-wrapper" }, h("span", { class: "s-multiple-bundle-product-price" }, h("span", { innerHTML: salla.money(product.price) })), product.sale_price > 0 && (h("span", { class: "s-multiple-bundle-product-price-discount" }, h("span", { innerHTML: salla.money(product.sale_price) }))))), product.quantity_in_group > 0 && product.quantity !== 0 && (h("span", { class: "s-multiple-bundle-product-badge" }, salla.lang.get('pages.products.pieces'), h("span", null, product.quantity_in_group))), product.quantity === 0 && (h("span", { class: "s-multiple-bundle-product-badge" }, salla.lang.get('pages.products.quantity_in_group_finished')))), product.options?.length > 0 && (h("button", { class: "s-multiple-bundle-product-button", onClick: () => this.handleOptionsClick(product), type: "button" }, salla.lang.get('pages.products.choose_from_options'), h("i", { class: "sicon-keyboard_arrow_left s-multiple-bundle-product-button-icon" })))))));
+                    : ''}`, key: product.id }, h("div", { class: "s-multiple-bundle-product-card" }, h("div", { class: "s-multiple-bundle-product-image-wrapper", onClick: () => this.handleProductClick(product, productIndex) }, h("input", { id: this.generateEventName(this.section.id, productIndex), type: "checkbox", class: "s-multiple-bundle-product-checkbox", checked: isChecked, name: this.generateEventName(this.section.id, productIndex), value: product.id }), h("img", { src: product.image.url || salla.url.cdn('images/s-empty.png'), loading: "lazy", alt: product.image.alt || product.name, class: "s-multiple-bundle-product-image" })), h("div", { class: "s-multiple-bundle-product-content-wrapper" }, h("div", { class: "s-multiple-bundle-product-content" }, h("div", { class: "s-multiple-bundle-product-details" }, h("div", { class: "s-multiple-bundle-product-title-wrapper" }, h("h2", { class: "s-multiple-bundle-product-title" }, product.name)), h("div", { class: "s-multiple-bundle-product-price-wrapper" }, h("span", { class: "s-multiple-bundle-product-price" }, h("span", { innerHTML: salla.money(product.price) })), product.sale_price > 0 && (h("span", { class: "s-multiple-bundle-product-price-discount" }, h("span", { innerHTML: salla.money(product.sale_price) }))))), product.quantity_in_group > 0 && product.quantity !== 0 && (h("span", { class: "s-multiple-bundle-product-badge" }, salla.lang.get('pages.products.pieces'), h("span", null, product.quantity_in_group))), product.quantity === 0 && (h("span", { class: "s-multiple-bundle-product-badge" }, salla.lang.get('pages.products.quantity_in_group_finished')))), product.options?.length > 0 && (h("button", { class: "s-multiple-bundle-product-button", onClick: () => this.handleOptionsClick(product), type: "button" }, optionsButtonLabel, h("span", { class: "s-multiple-bundle-product-button-icon", innerHTML: optionsArrowIcon })))))));
         })))));
     }
     static get is() { return "salla-multiple-bundle-product-slider"; }
@@ -125,6 +181,11 @@ export class SallaMultipleBundleProductSlider {
             }
         };
     }
+    static get states() {
+        return {
+            "savedOptionsByInstance": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "productSelected",
@@ -171,4 +232,13 @@ export class SallaMultipleBundleProductSlider {
             }];
     }
     static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "optionsSaved",
+                "method": "handleOptionsSaved",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

package/dist/collection/components/salla-order-totals-card/salla-order-totals-card.js

@@ -12,7 +12,7 @@ export class SallaOrderTotalsCard {
         }
     }
     async componentWillLoad() {
-        await new Promise(resolve => salla.onReady(resolve));
+        await Salla.onReady();
         if (this.order) {
             this.setSummaryFromProp(this.order);
         }
@@ -30,8 +30,11 @@ export class SallaOrderTotalsCard {
     renderTotalRow(label, amount, labelClass, valueClass, isBold) {
         return (h("div", { class: "s-order-totals-card-row" }, h("div", { class: "s-order-totals-card-row-inner" }, h("dt", { class: labelClass || 's-order-totals-card-label' }, label), h("dd", { class: valueClass || 's-order-totals-card-value' }, isBold ? (h("b", { innerHTML: salla.money(amount) })) : (h("span", { innerHTML: salla.money(amount) }))))));
     }
-    renderDsicountRow() {
-        return (this.summary?.discounts?.map(discount => (h("div", { class: "s-order-totals-card-row", key: discount.name }, h("div", { class: "s-order-totals-card-row-inner" }, h("dt", { class: "s-order-totals-card-discount" }, discount.name), h("dd", { class: "s-order-totals-card-value" }, discount.discount))))));
+    renderDiscountRow() {
+        return this.summary?.discounts?.map(discount => (h("div", { class: "s-order-totals-card-row", key: discount.name }, h("div", { class: "s-order-totals-card-row-inner" }, h("dt", { class: "s-order-totals-card-discount" }, discount.name), h("dd", { class: "s-order-totals-card-value" }, discount.discount)))));
+    }
+    renderRefundRow(amount) {
+        return (h("div", { class: "s-order-totals-card-row" }, h("div", { class: "s-order-totals-card-row-inner" }, h("dt", { class: "s-order-totals-card-refund-label" }, h("span", { class: "s-order-totals-card-refund-icon" }, h("i", { class: "sicon-info" })), h("span", null, " ", salla.lang.get('pages.orders.refund_amount'))), h("dd", { class: "s-order-totals-card-refund-value" }, h("b", { innerHTML: salla.money(amount) })))));
     }
     render() {
         if (!this.summary) {
@@ -40,12 +43,14 @@ export class SallaOrderTotalsCard {
         const { summary } = this;
         const hasOptions = Array.isArray(summary.options) ? summary.options.length > 0 : false;
         return (h(Host, { class: "s-order-totals-card-wrapper" }, h("div", { class: "s-order-totals-card-panel" }, h("h2", { id: "summary-heading", class: "s-order-totals-card-heading" }, salla.lang.get('pages.orders.summary')), h("div", { class: "s-order-totals-card-flow" }, h("dl", { class: "s-order-totals-card-list" }, this.renderTotalRow(salla.lang.get('pages.cart.items_total'), summary.sub_total), hasOptions &&
-            this.renderTotalRow(salla.lang.get('pages.cart.order_options_total'), summary.options_total), summary.discounts && this.renderDsicountRow(), summary.cod_cost &&
+            this.renderTotalRow(salla.lang.get('pages.cart.order_options_total'), summary.options_total), summary.discounts && this.renderDiscountRow(), summary.cod_cost &&
             this.renderTotalRow(salla.lang.get('pages.orders.cod_cost'), summary.cod_cost, ''), summary.shipping_cost &&
             this.renderTotalRow(salla.lang.get('pages.orders.shipping_cost'), summary.shipping_cost, 's-order-totals-card-shipping'), summary.tax &&
-            this.renderTotalRow(`${salla.lang.get('pages.cart.tax')} ${summary.tax.percent}%`, summary.tax.amount, ''), summary.paid_amount ?
-            this.renderTotalRow(salla.lang.get('pages.orders.partially_paid'), summary.paid_amount, '') : null, summary.remaining_amount ?
-            this.renderTotalRow(salla.lang.get('pages.orders.remaining_amount'), summary.remaining_amount, '') : null, h("div", { class: "s-order-totals-card-total" }, this.renderTotalRow(salla.lang.get('pages.orders.final_total'), summary.total, 's-order-totals-card-total-label', 's-order-totals-card-total-value', true)))))));
+            this.renderTotalRow(`${salla.lang.get('pages.cart.tax')} ${summary.tax.percent}%`, summary.tax.amount, ''), summary.paid_amount
+            ? this.renderTotalRow(salla.lang.get('pages.orders.partially_paid'), summary.paid_amount, '')
+            : null, summary.remaining_amount
+            ? this.renderTotalRow(salla.lang.get('pages.orders.remaining_amount'), summary.remaining_amount, '')
+            : null, h("div", { class: "s-order-totals-card-total" }, this.renderTotalRow(salla.lang.get('pages.orders.final_total'), summary.total, 's-order-totals-card-total-label', 's-order-totals-card-total-value', true)), summary.refund_amount ? (h("div", { class: "s-order-totals-card-refund" }, this.renderRefundRow(summary.refund_amount))) : null)))));
     }
     static get is() { return "salla-order-totals-card"; }
     static get originalStyleUrls() {