@salla.sa/twilight-components 2.14.493 → 2.14.494

package/dist/esm/{salla-count-down.entry.js → salla-count-down_2.entry.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host } from './index-DGH40_w6.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-3omad4sF.js';
 
 const sallaCountDownCss = ".s-count-down-horizontal{background-color:rgba(0, 0, 0, 0.06);background-color:color-mix(in srgb, var(--color-primary) 10%, transparent)}";
 
@@ -237,4 +237,206 @@ const SallaCountDown = class {
 };
 SallaCountDown.style = sallaCountDownCss;
 
-export { SallaCountDown as salla_count_down };
+const sallaOrderOptionsModalCss = ".s-order-options-modal-host .s-modal-header-inner,.s-order-options-modal-host .s-modal-header-content,.s-order-options-modal-host .s-modal-title{text-align:start !important}.s-order-options-modal-apple-pay{display:block;width:100%;--apple-pay-button-width:100%;--apple-pay-button-height:44px;--apple-pay-button-border-radius:0.75rem}.s-order-options-modal-apple-pay-wrap{display:flex;flex-direction:column;gap:0.75rem;width:100%}.s-order-options-modal-apple-pay-total{display:flex;align-items:center;justify-content:space-between;gap:0.5rem}.s-order-options-modal-apple-pay-label,.s-order-options-modal-apple-pay-amount{font-size:1.125rem;line-height:1.5rem;font-weight:700;color:#111827}";
+
+const SallaOrderOptionsModal = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.resolveFn = null;
+        this.rejectFn = null;
+        this.optionsRefs = new Map();
+        this.changeHandler = null;
+        /** Sync hook for callers that need to act under the submit user gesture (Apple Pay). */
+        this.submitCallback = null;
+        this.orderOptions = [];
+        this.basePrice = 0;
+        this.liveTotal = 0;
+        this.isSubmitting = false;
+        /** Bumped each open() so the inner <salla-product-options> remounts. */
+        this.sessionId = 0;
+        this.paymentMode = 'default';
+        this.title = '';
+        this.subtitle = '';
+        this.submitLabel = '';
+        this.totalLabel = '';
+        this.requiredMessage = '';
+        this.handleClose = () => {
+            if (this.isSubmitting)
+                return;
+            this.rejectFn?.({ reason: 'dismissed' });
+            this.resolveFn = null;
+            this.rejectFn = null;
+            this.detachChangeListener();
+            this.reset();
+        };
+        salla.lang.onLoaded(() => this.loadTranslations());
+    }
+    componentWillLoad() {
+        this.loadTranslations();
+    }
+    loadTranslations() {
+        this.title = salla.lang.get('blocks.order_options.title');
+        this.subtitle = salla.lang.get('blocks.order_options.subtitle');
+        this.submitLabel = salla.lang.get('blocks.order_options.continue');
+        this.totalLabel = salla.lang.get('blocks.order_options.total');
+        this.requiredMessage = salla.lang.get('blocks.order_options.required_message');
+    }
+    /**
+     * Open the modal. Resolves with selections on submit; rejects on dismiss.
+     * `onSubmit` fires sync in the submit click (for Apple Pay user-gesture).
+     * `paymentMode: 'apple-pay'` swaps the footer button for <apple-pay-button>.
+     */
+    async open(payload) {
+        // Normalize here, not in the shared salla-product-options: text/number order options ship no
+        // `details`, which product-options dereferences unguarded.
+        this.orderOptions = (Array.isArray(payload.orderOptions) ? payload.orderOptions : [])
+            .map((o) => ({ ...o, details: o.details ?? [] }));
+        this.basePrice = Number(payload.basePrice) || 0;
+        this.liveTotal = this.basePrice + this.seedOptionsPrice(this.orderOptions);
+        this.isSubmitting = false;
+        this.sessionId++;
+        this.optionsRefs.clear();
+        this.submitCallback = payload.onSubmit ?? null;
+        this.paymentMode = payload.paymentMode ?? 'default';
+        await this.modal?.open();
+        this.attachChangeListener();
+        return new Promise((resolve, reject) => {
+            this.resolveFn = resolve;
+            this.rejectFn = reject;
+        });
+    }
+    async close() {
+        await this.modal?.close();
+    }
+    /** Sync walk of inputs — avoids `await` through the @Method that would consume the AP user gesture. */
+    collectOrderOptionsSync() {
+        const result = [];
+        for (const [, el] of this.optionsRefs) {
+            if (!el)
+                continue;
+            const inputs = el.querySelectorAll('[name^="options["],[name*="[options]["]');
+            inputs.forEach((input) => {
+                if (input instanceof HTMLInputElement && (input.type === 'radio' || input.type === 'checkbox') && !input.checked) {
+                    return;
+                }
+                const match = input.name.match(/(?:^|\[)options\]?\[(\d+)\]/);
+                if (!match)
+                    return;
+                const raw = input.value;
+                if (raw === '' || raw === null || raw === undefined)
+                    return;
+                const numeric = Number(raw);
+                result.push({
+                    id: Number(match[1]),
+                    value: Number.isFinite(numeric) && raw === String(numeric) ? numeric : raw,
+                });
+            });
+        }
+        return result;
+    }
+    /** Sync native validity — keeps the AP user gesture intact. */
+    validateSync() {
+        let pass = true;
+        for (const [, el] of this.optionsRefs) {
+            if (!el)
+                continue;
+            const requiredInputs = el.querySelectorAll('[required]');
+            requiredInputs.forEach((input) => {
+                // Mirror salla-product-options.reportValidity(): skip hidden/disabled inputs so a
+                // required field in a `.hidden` conditional container can't silently block submit.
+                if (input.disabled || input.closest('.hidden'))
+                    return;
+                if ('reportValidity' in input && !input.reportValidity())
+                    pass = false;
+            });
+        }
+        return pass;
+    }
+    /** Sum the additional_price of any pre-selected details. */
+    seedOptionsPrice(orderOptions) {
+        let sum = 0;
+        orderOptions.forEach((opt) => {
+            (opt.details || []).forEach((d) => {
+                if (d.is_selected)
+                    sum += Number(d.additional_price) || 0;
+            });
+        });
+        return sum;
+    }
+    /** salla.event.on is global — attach per open, detach on close to avoid stacking. */
+    attachChangeListener() {
+        this.detachChangeListener();
+        this.changeHandler = () => this.recomputeTotal();
+        salla.event.on('product-options::change', this.changeHandler);
+    }
+    detachChangeListener() {
+        if (!this.changeHandler)
+            return;
+        salla.event.off('product-options::change', this.changeHandler);
+        this.changeHandler = null;
+    }
+    async recomputeTotal() {
+        let selectedPrice = 0;
+        for (const [, el] of this.optionsRefs) {
+            if (!el)
+                continue;
+            const selected = typeof el.getSelectedOptions === 'function'
+                ? await el.getSelectedOptions()
+                : [];
+            (selected || []).forEach((s) => {
+                selectedPrice += Number(s.additional_price) || 0;
+            });
+        }
+        this.liveTotal = this.basePrice + selectedPrice;
+    }
+    handleSubmit() {
+        if (this.isSubmitting)
+            return;
+        if (!this.validateSync()) {
+            salla.notify?.error?.(this.requiredMessage);
+            return;
+        }
+        this.isSubmitting = true;
+        const orderOptions = this.collectOrderOptionsSync();
+        const total = Math.round(this.liveTotal * 100) / 100;
+        // Fire onSubmit BEFORE any await — Apple Pay needs the user gesture.
+        try {
+            this.submitCallback?.(orderOptions, total);
+        }
+        catch (err) {
+            salla?.logger?.warn?.('order-options modal onSubmit threw', err);
+        }
+        this.resolveFn?.({ orderOptions });
+        this.resolveFn = null;
+        this.rejectFn = null;
+        this.submitCallback = null;
+        this.detachChangeListener();
+        this.modal?.close().then(() => this.reset());
+        this.isSubmitting = false;
+    }
+    /** Clear options on close so the inner <salla-product-options> unmounts. */
+    reset() {
+        this.orderOptions = [];
+        this.optionsRefs.clear();
+        this.liveTotal = 0;
+    }
+    render() {
+        // salla.money returns HTML (sicon-sar icon) → render via innerHTML. Round
+        // first so floating-point sum doesn't show as 1174.3799999999999.
+        const totalHtml = salla.money(Math.round(this.liveTotal * 100) / 100);
+        return (h("salla-modal", { key: 'a7b7c31da2f5fd9f5f3ee601052f84e512368cee', ref: el => (this.modal = el), class: "s-order-options-modal-host", width: "md", "modal-title": this.title, onModalVisibilityChanged: (e) => {
+                if (!e.detail)
+                    this.handleClose();
+            } }, h("div", { key: '9a44c4dcec6f0e49a65217b1e1e2cd19ccc80c76', class: "s-order-options-modal-body" }, h("p", { key: '66c41a32e2130db4dc1aa402a31cfd6d519544b3', class: "s-order-options-modal-subtitle" }, this.subtitle), h("div", { key: 'fffe868427973b6426b8a2f8f33f48c017dfb7fb', class: "s-order-options-modal-fields" }, this.orderOptions.length > 0 && (h("salla-product-options", { key: this.sessionId, ref: el => {
+                if (!el)
+                    return;
+                this.optionsRefs.set('order-options', el);
+                // Without seeding, first multi-select toggle wipes pre-selected defaults.
+                el.seedSelectedOptions?.();
+            }, "product-id": `order-options-${this.orderOptions[0]?.id}`, "unique-key": "order-options", options: JSON.stringify(this.orderOptions), "hide-out-label": "1", "no-padding": true })))), h("div", { key: '36f3a18380f05a8420d4bc32fa643bf596ac16fb', slot: "footer", class: "s-order-options-modal-footer" }, this.paymentMode === 'apple-pay' ? (h("div", { class: "s-order-options-modal-apple-pay-wrap" }, h("div", { class: "s-order-options-modal-apple-pay-total" }, h("span", { class: "s-order-options-modal-apple-pay-label" }, this.totalLabel), h("span", { class: "s-order-options-modal-apple-pay-amount", innerHTML: totalHtml })), h("apple-pay-button", { locale: salla?.config?.get?.('user.language_code') || 'ar', buttonstyle: "black", type: "buy", class: "s-order-options-modal-apple-pay", onClick: () => this.handleSubmit() }))) : (h("salla-button", { type: "button", color: "primary", fill: "solid", width: "wide", loading: this.isSubmitting, onClick: () => this.handleSubmit() }, h("span", { class: "s-order-options-modal-cta-content" }, h("span", { class: "s-order-options-modal-cta-text" }, this.submitLabel), h("span", { class: "s-order-options-modal-cta-total", innerHTML: totalHtml })))))));
+    }
+    get host() { return getElement(this); }
+};
+SallaOrderOptionsModal.style = sallaOrderOptionsModalCss;
+
+export { SallaCountDown as salla_count_down, SallaOrderOptionsModal as salla_order_options_modal };

package/dist/esm/salla-custom-fields.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, c as createEvent, h } from './index-DGH40_w6.js';
+import { r as registerInstance, c as createEvent, h } from './index-3omad4sF.js';
 import { C as CameraIcon } from './camera-C6jIkM-X.js';
 import { F as FormFieldTypes } from './interfaces-OF8QcbMM.js';
 

package/dist/esm/salla-delivery-promise.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, a as getElement } from './index-DGH40_w6.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-3omad4sF.js';
 
 const DEBUG_KEY = 'salla-delivery-promise-debug';
 function log(message, data) {

package/dist/esm/salla-edit-order-button.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host } from './index-DGH40_w6.js';
+import { r as registerInstance, h, H as Host } from './index-3omad4sF.js';
 
 const sallaEditOrderButtonCss = ":host{display:block}";
 

package/dist/esm/salla-filters-widget.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-DGH40_w6.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-3omad4sF.js';
 import { H as Helper } from './Helper-BQ9mvrt9.js';
 import { F as FilterOptionTypes } from './interfaces-DL4h2bc3.js';
 import './anime.es-CgtvEd63.js';

package/dist/esm/salla-filters.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-DGH40_w6.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-3omad4sF.js';
 import { F as FilterOptionTypes } from './interfaces-DL4h2bc3.js';
 import { H as Helper } from './Helper-BQ9mvrt9.js';
 import './anime.es-CgtvEd63.js';

package/dist/esm/salla-fulfillment-methods.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host } from './index-DGH40_w6.js';
+import { r as registerInstance, h, H as Host } from './index-3omad4sF.js';
 
 const SallaFulfillmentMethods = class {
     constructor(hostRef) {

package/dist/esm/salla-gifting.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h } from './index-DGH40_w6.js';
+import { r as registerInstance, h } from './index-3omad4sF.js';
 import { a as anime } from './anime.es-CgtvEd63.js';
 import { a as arrowLeft } from './arrow-left-BedNk7k1.js';
 import { S as SICancel } from './cancel-8Tsmrwno.js';

package/dist/esm/salla-hook.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, a as getElement } from './index-DGH40_w6.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-3omad4sF.js';
 
 const SallaHook = class {
     constructor(hostRef) {

package/dist/esm/salla-infinite-scroll.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, a as getElement } from './index-DGH40_w6.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-3omad4sF.js';
 import { H as Helper } from './Helper-BQ9mvrt9.js';
 import './anime.es-CgtvEd63.js';
 

package/dist/esm/salla-installment.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, a as getElement } from './index-DGH40_w6.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-3omad4sF.js';
 
 const sallaInstallmentCss = "salla-installment:empty{display:none}#tabbyPromoWrapper{background:white;border-radius:0.375rem;transition:box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);margin-bottom:20px;border:unset !important;font-weight:500}.salla-y #tabbyPromoWrapper{border:1px solid var(--color-grey-dark);border-radius:12px}#tabbyPromoWrapper:hover{box-shadow:0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 5px 10px 30px rgba(43, 45, 52, 0.0509803922)}#tabbyPromoWrapper #tabbyPromo *{font-family:var(--font-main)}#tabbyPromoWrapper #tabbyPromo>div>div{max-width:none;box-shadow:none;border:none}#tabbyPromoWrapper #tabbyPromo .tabby-promo-snippet{max-width:100%;min-height:100px;padding:18px 20px;border:none !important}#tabbyPromoWrapper #tabbyPromo .tabby-promo-snippet__text,#tabbyPromoWrapper #tabbyPromo .tabby-promo-snippet__link{font-size:var(--font-sm);color:var(--color-text) !important}#tabbyPromoWrapper #tabbyPromo .tabby-promo-snippet__link{font-weight:bold}.tabby-promo-wrapper #tabby-promo{font-family:var(--font-main) !important}.tabby-promo-wrapper #tabby-promo .tabby-promo__feature-title{font-size:var(--font-md)}.tabby-promo-wrapper #tabby-promo .tabby-promo__feature-desc{font-size:var(--font-sm);line-height:20px}.tamara-product-widget{margin-bottom:20px}.tamara-product-widget,.spotii-wrapper{min-height:100px;position:relative;color:var(--main-text-color);font-size:var(--font-sm);line-height:1.25;padding:20px 20px 20px 115px !important;background:white;border-radius:0.375rem;transition:box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);border:unset !important;font-family:inherit !important;font-weight:500}.salla-y .tamara-product-widget,.salla-y .spotii-wrapper{border-radius:12px;border:1px solid var(--color-grey-dark)}.tamara-product-widget:hover,.spotii-wrapper:hover{box-shadow:0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 5px 10px 30px rgba(43, 45, 52, 0.0509803922)}.tamara-product-widget .spotii-logo,.spotii-wrapper .spotii-logo{float:left;margin:0 0 0 -75px}.ltr .tamara-product-widget,.ltr .spotii-wrapper{text-align:left;padding:18px 100px 18px 20px !important}.ltr .tamara-product-widget .spotii-logo,.ltr .spotii-wrapper .spotii-logo{float:right;margin:0 -75px 0 0}.ltr .tamara-product-widget .spotii-product-widget,.ltr .spotii-wrapper .spotii-product-widget{text-align:left !important}.spotii-wrapper{margin-bottom:20px}.spotii-wrapper .spotii-promo{font-size:var(--font-md)}.spotii-wrapper .spotii-product-widget{font-size:var(--font-sm) !important;margin-top:10px}.tamara-product-widget .tamara-logo{position:absolute;left:20px !important;top:35px !important;margin:0 !important;height:24px !important}.ltr .tamara-product-widget .tamara-logo{right:20px !important;left:auto !important}.tamara-product-widget span{font-family:var(--font-main);font-size:var(--font-sm);color:var(--color-text)}.tamara-product-widget span:last-child{display:block;position:relative;margin-top:8px}.tamara-popup__wrap{overflow:auto !important}.s-installment-mispay-wrapper,.s-installment-madfu-wrapper,.s-installment-emkan-wrapper,.s-installment-rajehi-wrapper{font-size:14px;text-align:right;padding:20px;gap:42px;line-height:22px;color:rgb(0, 0, 0);min-width:100%;box-sizing:border-box;position:relative;background-color:white;border-radius:10px;margin:15px 0;display:flex;transition:box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1)}.s-installment-mispay-wrapper:hover,.s-installment-madfu-wrapper:hover,.s-installment-emkan-wrapper:hover,.s-installment-rajehi-wrapper:hover{box-shadow:0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 5px 10px 30px rgba(43, 45, 52, 0.0509803922)}.s-installment-mispay-content,.s-installment-madfu-content,.s-installment-emkan-content,.s-installment-rajehi-content{display:flex;flex-direction:row-reverse;width:100%;justify-content:space-between;align-items:center;gap:1rem}.s-installment-mispay-content-text,.s-installment-madfu-content-text,.s-installment-emkan-content-text,.s-installment-rajehi-content-text{color:var(--main-text-color);font-size:14px;font-weight:500;margin:0 16px 0 0;width:80%;left:14px;text-align:left}.s-installment-mispay-content img,.s-installment-madfu-content img,.s-installment-emkan-content img,.s-installment-rajehi-content img{height:28px;width:70px;display:inline-block;max-height:100%;vertical-align:middle;fill:none;stroke:unset;width:auto}.rtl .s-installment-mispay-content-text,.rtl .s-installment-madfu-content-text,.rtl .s-installment-emkan-content-text,.rtl .s-installment-rajehi-content-text{right:14px;text-align:right;margin:0 0 0 16px}.rtl .s-installment-mispay-content img,.rtl .s-installment-madfu-content img,.rtl .s-installment-emkan-content img,.rtl .s-installment-rajehi-content img{left:14px !important}.ltr .s-installment-mispay-content img,.ltr .s-installment-madfu-content img,.ltr .s-installment-emkan-content img,.ltr .s-installment-rajehi-content img{right:14px !important}.s-installment-rajehi-content img{width:70px !important;height:40px !important}.s-installment-emkan-content img{height:35px !important}.s-installment-klarna-wrapper{background:white;border-radius:0.375rem;transition:box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);margin-bottom:20px;padding:10px}.salla-y .s-installment-klarna-wrapper{border:1px solid var(--color-grey-dark);border-radius:12px}.s-installment-klarna-wrapper:hover{box-shadow:0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 5px 10px 30px rgba(43, 45, 52, 0.0509803922)}";
 

package/dist/esm/salla-list-tile.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host } from './index-DGH40_w6.js';
+import { r as registerInstance, h, H as Host } from './index-3omad4sF.js';
 
 const sallaListTileCss = "";
 

package/dist/esm/salla-localization-modal.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, a as getElement } from './index-DGH40_w6.js';
+import { r as registerInstance, h, a as getElement } from './index-3omad4sF.js';
 
 const SallaLocalizationModal = class {
     constructor(hostRef) {

package/dist/esm/salla-login-modal.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, F as Fragment, a as getElement } from './index-DGH40_w6.js';
+import { r as registerInstance, h, F as Fragment, a as getElement } from './index-3omad4sF.js';
 
 const sallaLoginModalCss = "iframe{-moz-transition:height 0.3s;-ms-transition:height 0.3s;-o-transition:height 0.3s;-webkit-transition:height 0.3s;transition:height 0.3s;width:100%}";
 

package/dist/esm/salla-loyalty-banner.entry.js

@@ -1,11 +1,11 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, a as getElement } from './index-DGH40_w6.js';
+import { r as registerInstance, h, a as getElement } from './index-3omad4sF.js';
 import { S as SIGift } from './gift-CXRKXFgT.js';
-import { T as TrackedPromise } from './tracked-promise-ILCl5q9c.js';
+import { T as TrackedPromise } from './tracked-promise-BPB6hr9g.js';
 
-const sallaLoyaltyProgramCss = "";
+const sallaLoyaltyProgramCss = "@media (max-width: 639px){.s-loyalty-program-modal .s-modal-body{position:relative !important;left:unset !important;bottom:unset !important;max-height:100dvh;overflow-y:auto !important}}.s-loyalty-exchange-card salla-product-card .s-product-card-image,.s-loyalty-exchange-card custom-salla-product-card .s-product-card-image{flex:none;aspect-ratio:1;overflow:hidden}.s-loyalty-exchange-card-btn{padding:0 1.25rem 1.25rem;margin-top:0.75rem}.s-loyalty-program-reward-details-products-grid{display:flex;flex-wrap:wrap;gap:1rem;margin-top:0.75rem}.s-loyalty-program-reward-details-products-grid>*{flex:1 1 100%;min-width:0;touch-action:pan-y}@media (min-width: 640px){.s-loyalty-program-reward-details-products-grid>*{flex-basis:calc((100% - 1rem) / 2)}}@media (min-width: 768px){.s-loyalty-program-reward-details-products-grid>*{flex-basis:calc((100% - 2rem) / 3)}}.s-loyalty-program-reward-details-products-grid>*:only-child{max-width:320px;margin-inline:auto}.s-loyalty-program-reward-details-products-grid:has(>*:nth-child(3))>*{flex-grow:0}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;

package/dist/esm/{salla-reward-action_4.entry.js → salla-loyalty-exchange-product-card_5.entry.js}

@@ -1,15 +1,34 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-DGH40_w6.js';
-import { c as closeModals, b as brand_path, f as formattedPointsJsx } from './functions-DhhgGPcx.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-3omad4sF.js';
+import { c as closeModals, b as brand_path, f as formattedPointsJsx } from './functions-Btrtoght.js';
 import { S as SIGift } from './gift-CXRKXFgT.js';
 import { S as SITag } from './tag-cgSL_BIo.js';
 import { S as SICheck } from './check-BZp0rKEO.js';
 import { S as SICancel } from './cancel-8Tsmrwno.js';
-import { T as TrackedPromise } from './tracked-promise-ILCl5q9c.js';
+import { T as TrackedPromise } from './tracked-promise-BPB6hr9g.js';
 
-const sallaLoyaltyProgramCss$3 = "";
+const sallaLoyaltyProgramCss$4 = "@media (max-width: 639px){.s-loyalty-program-modal .s-modal-body{position:relative !important;left:unset !important;bottom:unset !important;max-height:100dvh;overflow-y:auto !important}}.s-loyalty-exchange-card salla-product-card .s-product-card-image,.s-loyalty-exchange-card custom-salla-product-card .s-product-card-image{flex:none;aspect-ratio:1;overflow:hidden}.s-loyalty-exchange-card-btn{padding:0 1.25rem 1.25rem;margin-top:0.75rem}.s-loyalty-program-reward-details-products-grid{display:flex;flex-wrap:wrap;gap:1rem;margin-top:0.75rem}.s-loyalty-program-reward-details-products-grid>*{flex:1 1 100%;min-width:0;touch-action:pan-y}@media (min-width: 640px){.s-loyalty-program-reward-details-products-grid>*{flex-basis:calc((100% - 1rem) / 2)}}@media (min-width: 768px){.s-loyalty-program-reward-details-products-grid>*{flex-basis:calc((100% - 2rem) / 3)}}.s-loyalty-program-reward-details-products-grid>*:only-child{max-width:320px;margin-inline:auto}.s-loyalty-program-reward-details-products-grid:has(>*:nth-child(3))>*{flex-grow:0}";
+
+const SallaLoyaltyExchangeProductCard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.loyaltyProductExchange = createEvent(this, "loyaltyProductExchange");
+    }
+    componentWillLoad() {
+        this.hasCustomCard = !!customElements.get('custom-salla-product-card');
+    }
+    render() {
+        const product = typeof this.product === 'string' ? JSON.parse(this.product) : this.product;
+        return (h("div", { key: 'a60d337ebcf226318d449a4319906a71a9ab1e92', class: "s-loyalty-exchange-card" }, this.hasCustomCard
+            ? h("custom-salla-product-card", { product: product, hideAddBtn: true })
+            : h("salla-product-card", { "hide-add-btn": true, product: product }), h("div", { key: '77a0cff2bf5fce5c017493a0769e266eeeaaa01c', class: "s-loyalty-exchange-card-btn" }, h("salla-button", { key: '941c82bb35bfd116a13292ddf5425645c3d61ad7', fill: "outline", width: "wide", onClick: () => this.loyaltyProductExchange.emit({ productId: product.id }) }, salla.lang.get('pages.loyalty_program.redeem_reward')))));
+    }
+};
+SallaLoyaltyExchangeProductCard.style = sallaLoyaltyProgramCss$4;
+
+const sallaLoyaltyProgramCss$3 = "@media (max-width: 639px){.s-loyalty-program-modal .s-modal-body{position:relative !important;left:unset !important;bottom:unset !important;max-height:100dvh;overflow-y:auto !important}}.s-loyalty-exchange-card salla-product-card .s-product-card-image,.s-loyalty-exchange-card custom-salla-product-card .s-product-card-image{flex:none;aspect-ratio:1;overflow:hidden}.s-loyalty-exchange-card-btn{padding:0 1.25rem 1.25rem;margin-top:0.75rem}.s-loyalty-program-reward-details-products-grid{display:flex;flex-wrap:wrap;gap:1rem;margin-top:0.75rem}.s-loyalty-program-reward-details-products-grid>*{flex:1 1 100%;min-width:0;touch-action:pan-y}@media (min-width: 640px){.s-loyalty-program-reward-details-products-grid>*{flex-basis:calc((100% - 1rem) / 2)}}@media (min-width: 768px){.s-loyalty-program-reward-details-products-grid>*{flex-basis:calc((100% - 2rem) / 3)}}.s-loyalty-program-reward-details-products-grid>*:only-child{max-width:320px;margin-inline:auto}.s-loyalty-program-reward-details-products-grid:has(>*:nth-child(3))>*{flex-grow:0}";
 
 const SallaRewardAction = class {
     constructor(hostRef) {
@@ -36,10 +55,7 @@ const SallaRewardAction = class {
         if (!this.isClickable(this.prize)) {
             return null;
         }
-        return (h("div", { class: "s-loyalty-program-rewards-modal-action" }, this.isShopNow(this.prize) ? (h("a", { href: this.prize.prize_url || salla.url.get(''), class: {
-                's-loyalty-program-rewards-action-base': true,
-                's-loyalty-program-rewards-action-on': true,
-            } }, salla.lang.get('pages.loyalty_program.shop_now'))) : (h("button", { onClick: this.handleClick, class: {
+        return (h("div", { class: "s-loyalty-program-rewards-modal-action" }, this.isShopNow(this.prize) ? (h("salla-button", { fill: "outline", color: "light", class: "s-loyalty-program-rewards-action-base", onClick: () => closeModals() }, salla.lang.get('common.elements.cancel'))) : (h("button", { onClick: this.handleClick, class: {
                 's-loyalty-program-rewards-action-base': true,
                 's-loyalty-program-rewards-action-on': true,
             } }, salla.lang.get('pages.loyalty_program.redeem_reward')))));
@@ -47,7 +63,7 @@ const SallaRewardAction = class {
 };
 SallaRewardAction.style = sallaLoyaltyProgramCss$3;
 
-const sallaLoyaltyProgramCss$2 = "";
+const sallaLoyaltyProgramCss$2 = "@media (max-width: 639px){.s-loyalty-program-modal .s-modal-body{position:relative !important;left:unset !important;bottom:unset !important;max-height:100dvh;overflow-y:auto !important}}.s-loyalty-exchange-card salla-product-card .s-product-card-image,.s-loyalty-exchange-card custom-salla-product-card .s-product-card-image{flex:none;aspect-ratio:1;overflow:hidden}.s-loyalty-exchange-card-btn{padding:0 1.25rem 1.25rem;margin-top:0.75rem}.s-loyalty-program-reward-details-products-grid{display:flex;flex-wrap:wrap;gap:1rem;margin-top:0.75rem}.s-loyalty-program-reward-details-products-grid>*{flex:1 1 100%;min-width:0;touch-action:pan-y}@media (min-width: 640px){.s-loyalty-program-reward-details-products-grid>*{flex-basis:calc((100% - 1rem) / 2)}}@media (min-width: 768px){.s-loyalty-program-reward-details-products-grid>*{flex-basis:calc((100% - 2rem) / 3)}}.s-loyalty-program-reward-details-products-grid>*:only-child{max-width:320px;margin-inline:auto}.s-loyalty-program-reward-details-products-grid:has(>*:nth-child(3))>*{flex-grow:0}";
 
 const SallaRewardCard = class {
     constructor(hostRef) {
@@ -56,12 +72,12 @@ const SallaRewardCard = class {
         this.actionClick = createEvent(this, "actionClick");
     }
     render() {
-        return (h(Host, { key: 'b27c707b6ac03d037d2f019131a654bcda65dd6e', class: "s-loyalty-program-reward-host" }, h("div", { key: '9606c3ad2ea7ead1f4ab2db8e148a90d43c69902', class: "s-loyalty-program-reward-container" }, h("div", { key: 'f7b6f60847b86dbb6f2b05209ab2db8eabbbd931', onClick: (e) => this.areaClick.emit(e), role: "button" }, h("div", { key: '6cd912d2c6b5c2b12ab5b4ba431ca0c965d0518b', class: "s-loyalty-program-reward-img" }, h("img", { key: 'b4f844fe1064b8ca6f5666765d92a7924fe2ad74', alt: "", src: this.prize.image || salla.url.cdn('images/s-empty.png'), class: "s-loyalty-program-rewards-img" })), h("div", { key: 'fd61d1ff64f2097fe2f696dacbb57f6c84db5339', class: "s-loyalty-program-reward-content" }, h("div", { key: 'fa1d404d5b02fe0027cef018f2eeb6e0bd109c2c', class: "s-loyalty-program-reward-points" }, h("salla-badge", { key: '29dad65f9b1f41a1698da49d113a0f9b0086210e', size: "xs" }, h("span", { key: '99526fabe82feef8ef777bfbcde868399c44e2db', innerHTML: SIGift }), h("span", { key: '94a3ed106aad1b14438227d8914695b1a18e8f64', class: "s-loyalty-program-rewards-points", innerHTML: salla.lang.choice('pages.loyalty_program.points', this.prize.cost_points) }))), h("div", { key: '1e8e12541bfd7acd303f89008f2e48c9f183c83a', class: "s-loyalty-program-reward-title" }, h("span", { key: '746377627b01443a712a52f1016c29b41eaa1ad5' }, this.prize.group_title)), h("div", { key: '1f09736c18b0be21b67e1713a44f94722bbdb09d', class: "s-loyalty-program-reward-name" }, h("div", { key: '18c26f3fe19b4e6ff28bda4d18cdb253f795792b', class: "s-loyalty-program-rewards-name", id: `prize-${this.prize.id}` }, this.prize.name, this.prize.description ? `: ${this.prize.description}` : '')))), h("div", { key: '7a814db57ae3bfad6aaba12cdab17b0e900e9080', class: "p-4" }, h("slot", { key: '0ce627f221262d54f4cda4d1a50cb2d1a6197d06', name: "action" }, h("button", { key: '10f0e39d0ecc79d84674efb0a7389430da979160', onClick: (e) => this.actionClick.emit(e.detail), class: "s-loyalty-program-rewards-action-base s-loyalty-program-rewards-action-on" }, salla.lang.get('pages.loyalty_program.show_reward')))))));
+        return (h(Host, { key: '9b1eecb431ab26fc6bfbd89d511294a230dd2aa9', class: "s-loyalty-program-reward-host" }, h("div", { key: '0793104978291566c136eb0e5b841224f97f25b6', class: "s-loyalty-program-reward-container" }, h("div", { key: 'f4572e5480d51f041af3e3b95bdfcc3a952c395e', onClick: (e) => this.areaClick.emit(e), role: "button" }, h("div", { key: 'ba3e6d1583219bfba80903d8b45a02c6f862efd2', class: "s-loyalty-program-reward-img" }, h("img", { key: '36e26b8fcf8d2f094b0ab990ad96c3722e23d4fd', alt: "", src: this.prize.image || salla.url.cdn('images/s-empty.png'), class: "s-loyalty-program-rewards-img" })), h("div", { key: 'b7f042b124044e8ca7eee15341d08ef175013b18', class: "s-loyalty-program-reward-content" }, h("div", { key: 'd3274d9bf3f53dfdc87e4f11cddd2abae5288333', class: "s-loyalty-program-reward-points" }, h("salla-badge", { key: '4db76994541536d16e11a7e34bce9e06ce9aff4b', size: "xs" }, h("span", { key: 'a565b786c683bc5b076036c81494137ccaef0c18', innerHTML: SIGift }), h("span", { key: '481a4016c7ccea49a860df2a7b3a322302a2e5ad', class: "s-loyalty-program-rewards-points", innerHTML: salla.lang.choice('pages.loyalty_program.points', this.prize.cost_points) }))), h("div", { key: '5820431c80d0eee99da2592ef29685710b73a048', class: "s-loyalty-program-reward-title" }, h("span", { key: '82b99ec1244890b19930686c228ca56ecee7191b' }, this.prize.group_title)), h("div", { key: '08bc6a5f88365c23e07a20b858b4cda5430eb363', class: "s-loyalty-program-reward-name" }, h("div", { key: 'dd4ce5ed0097a746b91c74cdab38ca557c55194d', class: "s-loyalty-program-rewards-name", id: `prize-${this.prize.id}` }, this.prize.name, this.prize.description ? `: ${this.prize.description}` : '')))), h("div", { key: 'ae7cd30ae6794f0957db6cfca3a69403b5996183', class: "p-4" }, h("slot", { key: '41a4cce4cb28d91d038754f69ea42b25fda6427a', name: "action" }, h("button", { key: '353da11c1197ed3dafd85282cd3343c21f55c80b', onClick: (e) => this.actionClick.emit(e.detail), class: "s-loyalty-program-rewards-action-base s-loyalty-program-rewards-action-on" }, salla.lang.get('pages.loyalty_program.show_reward')))))));
     }
 };
 SallaRewardCard.style = sallaLoyaltyProgramCss$2;
 
-const sallaLoyaltyProgramCss$1 = "";
+const sallaLoyaltyProgramCss$1 = "@media (max-width: 639px){.s-loyalty-program-modal .s-modal-body{position:relative !important;left:unset !important;bottom:unset !important;max-height:100dvh;overflow-y:auto !important}}.s-loyalty-exchange-card salla-product-card .s-product-card-image,.s-loyalty-exchange-card custom-salla-product-card .s-product-card-image{flex:none;aspect-ratio:1;overflow:hidden}.s-loyalty-exchange-card-btn{padding:0 1.25rem 1.25rem;margin-top:0.75rem}.s-loyalty-program-reward-details-products-grid{display:flex;flex-wrap:wrap;gap:1rem;margin-top:0.75rem}.s-loyalty-program-reward-details-products-grid>*{flex:1 1 100%;min-width:0;touch-action:pan-y}@media (min-width: 640px){.s-loyalty-program-reward-details-products-grid>*{flex-basis:calc((100% - 1rem) / 2)}}@media (min-width: 768px){.s-loyalty-program-reward-details-products-grid>*{flex-basis:calc((100% - 2rem) / 3)}}.s-loyalty-program-reward-details-products-grid>*:only-child{max-width:320px;margin-inline:auto}.s-loyalty-program-reward-details-products-grid:has(>*:nth-child(3))>*{flex-grow:0}";
 
 var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -78,10 +94,16 @@ const SallaRewardDetails = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.actionClick = createEvent(this, "actionClick");
+        this.productActionClick = createEvent(this, "productActionClick");
         this.refreshKey = Date.now();
+        this.includedProductsData = [];
+    }
+    handleProductExchange(e) {
+        this.productActionClick.emit({ productId: e.detail.productId });
     }
     handlePrizeChange() {
         this.refreshKey = Date.now();
+        this.fetchIncludedProducts();
     }
     componentWillLoad() {
         if (this.category.status === 'idle') {
@@ -90,6 +112,23 @@ const SallaRewardDetails = class {
         if (this.brand.status === 'idle') {
             this.brand();
         }
+        this.fetchIncludedProducts();
+    }
+    async fetchIncludedProducts() {
+        this.includedProductsData = [];
+        const ids = this.prize?.included_product_ids;
+        if (!ids?.length)
+            return;
+        const requestedPrize = this.prize;
+        try {
+            const response = await salla.api.withoutNotifier(() => salla.product.api.fetch({ source: 'selected', source_value: ids }));
+            if (this.prize === requestedPrize) {
+                this.includedProductsData = response.data || [];
+            }
+        }
+        catch {
+            this.includedProductsData = [];
+        }
     }
     getTermsAndConditions() {
         const minimumAmount = Number((this.prize.order_minimum_amount || '0').split('.')[0]) || 0;
@@ -168,23 +207,29 @@ const SallaRewardDetails = class {
     getProductsJsx(items, title) {
         return !items?.length ? '' : h("div", { class: "s-loyalty-program-reward-details-items-products s-loyalty-program-slider-arrows-edges" }, h("h2", null, title), h("salla-products-slider", { source: "selected", sourceValue: JSON.stringify(items), "slider-config": '{"loop":false,"slidesPerView":"auto","freeMode":true,"spaceBetween":0,"breakpoints":{"768":{"slidesPerView":3,"freeMode":false,"speed":300}}}' }));
     }
+    getIncludedProductsJsx(title) {
+        const products = this.includedProductsData;
+        if (!products?.length)
+            return '';
+        return (h("div", { class: c('reward-details-items-products') }, h("h2", null, title), h("div", { class: c('reward-details-products-grid') }, products.map(product => h("salla-loyalty-exchange-product-card", { product: product })))));
+    }
     render() {
         const termsAndConditions = this.getTermsAndConditions();
-        return (h("div", { key: 'b448be9380e1b0226e0e1bf4f2383190769de152', class: "s-loyalty-program-reward-modal" }, h("div", { key: '16087a27ea5cef2738f07745ac2b830ea07ab4ce', class: "s-loyalty-program-points-modal-header" }, h("h1", { key: 'f03dde8a72339ce561298cf27b524f9a69a1fd3c', class: "s-loyalty-program-points-modal-info" }, !salla.url.is_page('cart') ? ''
+        return (h("div", { key: 'e75387a83bdf558f087bfda4f8c7db15bf97ac5d', class: "s-loyalty-program-reward-modal" }, h("div", { key: '89caf02d9b28996177b5bc23a711986ad9da9208', class: "s-loyalty-program-points-modal-header" }, h("h1", { key: '455d0a2e6f5c08dbbdf063c1f243e7e041deb788', class: "s-loyalty-program-points-modal-info" }, !salla.url.is_page('cart') ? ''
             : h("button", { class: "s-loyalty-program-back-btn", onClick: () => closeModals(() => salla.event.dispatch('modal::open', 'loyalty-rewards-modal')) }, h("span", { class: {
                     'sicon-arrow-right': document.documentElement.getAttribute('dir') === 'rtl',
                     'sicon-arrow-left': document.documentElement.getAttribute('dir') === 'ltr',
-                } })), this.prize.name)), h("div", { key: '94e4c042eda800d4127e98af05399aefd8cf162c', class: "s-loyalty-program-modal-scrollable-content" }, h("div", { key: '5e847cbfd2aefe88baaddd991ac9a3c9d5be4318', class: "s-loyalty-program-reward-details-header" }, h("div", { key: '67fa2b255a10ada08cd780f204d8bc958b2562df', class: "s-loyalty-program-aspect-container" }, h("img", { key: '06298fbe666f161ace6f8bd70ead43ff4647f912', src: this.prize.image, alt: this.prize.name })), h("salla-badge", { key: '2d5fb82811dfced1eb558baa01ddb83bf8271312', size: "sm", bg: "light" }, h("span", { key: 'bb9d7cf72ea6bc88eaed97e62465c85b3628de0d', innerHTML: SIGift }), h("span", { key: '87bd5622040b555ab70de43ffb7a6fa06cb4b45a', class: "s-loyalty-program-points-badge-points" }, formattedPointsJsx(this.prize.cost_points)))), !termsAndConditions.length ? '' : h("div", { class: "s-loyalty-program-terms-and-conditions" }, h("h1", { class: "s-loyalty-program-terms-and-conditions-heading" }, salla.lang.get('pages.loyalty_program.terms_and_conditions')), h("ul", { class: "s-loyalty-program-terms-and-conditions-list" }, termsAndConditions.map(([title, points]) => (h("li", { class: "s-loyalty-program-terms-and-conditions-item" }, h("span", { class: "s-loyalty-program-terms-and-conditions-content" }, title), h("span", { class: "s-loyalty-program-terms-and-conditions-content" }, points)))))), h("div", { key: '8b9ae2745e2134b41c8bc1c9bce8bc449774fd48', class: "s-loyalty-program-reward-info-message" }, h("h1", { key: 'd5e6f1f591a09144d9d15bf32457ca22f8438b82', class: "s-loyalty-program-reward-info-message-heading" }, salla.lang.get('pages.loyalty_program.how_to_benefit_from_this_reward')), h("p", { key: '00c63a4b0dafecd45141b2627f3cf00df9b77e83', class: "s-loyalty-program-reward-info-message-content" }, this.getItemsMarkersText())), (this.prize.key === 'FREE_SHIPPING' || this.getItemsMarkers('both') === '000000') ? '' : h("div", { class: "s-loyalty-program-reward-details" }, h("salla-tabs", { key: this.refreshKey }, this.getItemsMarkers('included') === '000' ? '' : [
+                } })), this.prize.name)), h("div", { key: '1e65d03e52071802ec396cc4838bdaf135303494', class: "s-loyalty-program-modal-scrollable-content" }, h("div", { key: 'f6869249b21464296725644acd9a593fb6c5ea30', class: "s-loyalty-program-reward-details-header" }, h("div", { key: 'c93dfe4c362421f7f7d5938a86d043e6ee0f2369', class: "s-loyalty-program-aspect-container" }, h("img", { key: '0c86bde982fd627939e47b9cf1eed02285a041f1', src: this.prize.image, alt: this.prize.name })), h("salla-badge", { key: '2be3695ee888ef65e0fec106e4b7845abc25491b', size: "sm", bg: "light" }, h("span", { key: '193ce34305780ecc2fd78d4e2d8572da06a0ebda', innerHTML: SIGift }), h("span", { key: 'aee708c7b484afa29392fe25768ae48051c8b211', class: "s-loyalty-program-points-badge-points" }, formattedPointsJsx(this.prize.cost_points)))), !termsAndConditions.length ? '' : h("div", { class: "s-loyalty-program-terms-and-conditions" }, h("h1", { class: "s-loyalty-program-terms-and-conditions-heading" }, salla.lang.get('pages.loyalty_program.terms_and_conditions')), h("ul", { class: "s-loyalty-program-terms-and-conditions-list" }, termsAndConditions.map(([title, points]) => (h("li", { class: "s-loyalty-program-terms-and-conditions-item" }, h("span", { class: "s-loyalty-program-terms-and-conditions-content" }, title), h("span", { class: "s-loyalty-program-terms-and-conditions-content" }, points)))))), h("div", { key: 'add5d8a427511f9554f5d13a88bc5a4994021477', class: "s-loyalty-program-reward-info-message" }, h("h1", { key: '723dd37428176057e6d9e315e2a29528df9b8b1f', class: "s-loyalty-program-reward-info-message-heading" }, salla.lang.get('pages.loyalty_program.how_to_benefit_from_this_reward')), h("p", { key: 'ef1d7ea6af657ff4810c257d378aac35c106de66', class: "s-loyalty-program-reward-info-message-content" }, this.getItemsMarkersText())), (this.prize.key === 'FREE_SHIPPING' || this.getItemsMarkers('both') === '000000') ? '' : h("div", { class: "s-loyalty-program-reward-details" }, h("salla-tabs", { key: this.refreshKey }, this.getItemsMarkers('included') === '000' ? '' : [
             h("salla-tab-header", { slot: "header", name: "included", style: {
                     display: this.getItemsMarkers('excluded') === '000' ? 'none' : 'block',
                 } }, h("span", { class: "s-loyalty-program-reward-details-tab-icon", innerHTML: SICheck }), h("span", null, salla.lang.get(`pages.loyalty_program.included`))),
-            h("salla-tab-content", { slot: "content", name: "included" }, h("div", { class: "s-loyalty-program-reward-details-items-wrapper" }, this.getCategoriesJsx(this.getIncludedItems(this.prize.categories, this.prize.included_category_ids), salla.lang.get('pages.loyalty_program.included_categories')), this.getBrandsJsx(this.getIncludedItems(this.prize.brands, this.prize.included_brand_ids), salla.lang.get('pages.loyalty_program.included_brands')), this.getProductsJsx(this.getProductIds(this.prize.included_product_ids), salla.lang.get('pages.loyalty_program.included_products')))),
+            h("salla-tab-content", { slot: "content", name: "included" }, h("div", { class: "s-loyalty-program-reward-details-items-wrapper" }, this.getCategoriesJsx(this.getIncludedItems(this.prize.categories, this.prize.included_category_ids), salla.lang.get('pages.loyalty_program.included_categories')), this.getBrandsJsx(this.getIncludedItems(this.prize.brands, this.prize.included_brand_ids), salla.lang.get('pages.loyalty_program.included_brands')), this.getIncludedProductsJsx(salla.lang.get('pages.loyalty_program.included_products')))),
         ], this.getItemsMarkers('excluded') === '000' ? '' : [
             h("salla-tab-header", { slot: "header", name: "excluded", style: {
                     display: this.getItemsMarkers('included') === '000' ? 'none' : 'block',
                 } }, h("span", { class: "s-loyalty-program-reward-details-tab-icon", innerHTML: SICancel }), h("span", null, salla.lang.get(`pages.loyalty_program.excluded`))),
             h("salla-tab-content", { slot: "content", name: "excluded" }, h("div", { class: "s-loyalty-program-reward-details-items-wrapper" }, this.getCategoriesJsx(this.getIncludedItems(this.prize.excludedCategories, this.prize.excluded_category_ids), salla.lang.get('pages.loyalty_program.excluded_categories')), this.getBrandsJsx(this.getIncludedItems(this.prize.excludedBrands, this.prize.excluded_brand_ids), salla.lang.get('pages.loyalty_program.excluded_brands')), this.getProductsJsx(this.getProductIds(this.prize.excluded_product_ids), salla.lang.get('pages.loyalty_program.excluded_products')))),
-        ]))), h("salla-reward-action", { key: 'd4ccecb2463fd6c06957f40e7865b1d12158b4bd', onActionClick: e => this.actionClick.emit(e.detail), prize: this.prize })));
+        ]))), h("salla-reward-action", { key: 'd1a0304c5229958d4a135affae27bb62c7419cd8', onActionClick: e => this.actionClick.emit(e.detail), prize: this.prize })));
     }
     static get watchers() { return {
         "prize": ["handlePrizeChange"]
@@ -202,7 +247,7 @@ __decorate$1([
 ], SallaRewardDetails.prototype, "brand", void 0);
 SallaRewardDetails.style = sallaLoyaltyProgramCss$1;
 
-const sallaLoyaltyProgramCss = "";
+const sallaLoyaltyProgramCss = "@media (max-width: 639px){.s-loyalty-program-modal .s-modal-body{position:relative !important;left:unset !important;bottom:unset !important;max-height:100dvh;overflow-y:auto !important}}.s-loyalty-exchange-card salla-product-card .s-product-card-image,.s-loyalty-exchange-card custom-salla-product-card .s-product-card-image{flex:none;aspect-ratio:1;overflow:hidden}.s-loyalty-exchange-card-btn{padding:0 1.25rem 1.25rem;margin-top:0.75rem}.s-loyalty-program-reward-details-products-grid{display:flex;flex-wrap:wrap;gap:1rem;margin-top:0.75rem}.s-loyalty-program-reward-details-products-grid>*{flex:1 1 100%;min-width:0;touch-action:pan-y}@media (min-width: 640px){.s-loyalty-program-reward-details-products-grid>*{flex-basis:calc((100% - 1rem) / 2)}}@media (min-width: 768px){.s-loyalty-program-reward-details-products-grid>*{flex-basis:calc((100% - 2rem) / 3)}}.s-loyalty-program-reward-details-products-grid>*:only-child{max-width:320px;margin-inline:auto}.s-loyalty-program-reward-details-products-grid:has(>*:nth-child(3))>*{flex-grow:0}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -243,11 +288,7 @@ const SallaRewardExchange = class {
         this.reset(0);
     }
     render() {
-        return (h(Host, { key: 'b1e4fe9368655f389e403b2676191b46f71d49b7' }, h("div", { key: '19b8bbffa591f22608d56e8e932d7f013f6cd868', class: "s-loyalty-program-exchange-heading" }, h("div", { key: '290214db26895ba481de364299afd115b3a501cc', class: "s-loyalty-program-circle-base s-loyalty-program-circle-size-xl s-loyalty-program-circle-variant-fill" }, h("span", { key: 'd59c1b1f7683db554856950b6ec919bb48c402dd', innerHTML: SIGift })), h("h2", { key: '51a4abff2e593279cc5c9ce9dd47f7ed05533325' }, salla.lang.get('pages.loyalty_program.redeem_reward')), h("p", { key: '8a16577bce81552878cdcae4e60ce8e8719b3ed0' }, salla.lang.get('pages.loyalty_program.redeem_confirmation'), " ", h("span", { key: 'c05bdc04cbac8dc530c49bb49eca6119d2653b63' }, "(", this.prize.cost_points, " ", salla.lang.get('pages.loyalty_program.point'), ")"), " ", salla.lang.get('pages.loyalty_program.for'), " ", h("span", { key: 'ce3e88fde9f2434cabf75f7a3f622da539b5d310' }, "(", this.prize.name, ")"))), h("div", { key: 'ac51de5c34119eb79c1a8c2d06c201e4da3d7a0d', class: "s-loyalty-program-exchange-btns" }, h("button", { key: '9386b4a3d43a05fe9141561c7421b2b23ddb5a1e', class: "s-loyalty-program-rewards-action-base s-loyalty-program-rewards-action-confirm", onClick: () => this.handleConfirm() }, h("span", { key: '88d7658b7715932ff8200f79de5dd8864b00db15', style: {
-                opacity: this.exchange.status !== 'pending' ? '1' : '0',
-            } }, salla.lang.get('common.elements.confirm')), h("span", { key: '80c30140959693b3d98dc2162e45d4089e81eb6b', class: "s-loyalty-program-exchange-loading", style: {
-                opacity: this.exchange.status === 'pending' ? '1' : '0',
-            } }, h("salla-loading", { key: '516e36b4271d8da0ad711732aa991a45633edea5', color: "primary", size: 24 }))), h("button", { key: '4642c008c656a662bd277829ef80db37cffa0b1a', class: "s-loyalty-program-rewards-action-base s-loyalty-program-rewards-action-cancel", onClick: () => this.handleCancel() }, salla.lang.get('common.elements.cancel')))));
+        return (h(Host, { key: '12288db4227af2c833b80a0a4b4df9192c56a9f4' }, h("div", { key: '0bb5b3037fb091e9f4b96e709ad6df3f97b7d7af', class: "s-loyalty-program-exchange-heading" }, h("div", { key: '5161c1961bd08e626e33780cf01efe5000d8e939', class: "s-loyalty-program-circle-base s-loyalty-program-circle-size-xl s-loyalty-program-circle-variant-fill" }, h("span", { key: '83429d754f37b2112ba2201b54a51349a98947df', innerHTML: SIGift })), h("h2", { key: '0437972cf3b853271042de844cb70bc49dd04abf' }, salla.lang.get('pages.loyalty_program.redeem_reward')), h("p", { key: '14c0dbd4b29d73082ee71703c0a794447f9ee40e' }, salla.lang.get('pages.loyalty_program.redeem_confirmation'), " ", h("span", { key: '9128f2c88f20536ca5ddae84b2160024bb8b2fe9' }, "(", this.prize.cost_points, " ", salla.lang.get('pages.loyalty_program.point'), ")"), " ", salla.lang.get('pages.loyalty_program.for'), " ", h("span", { key: 'e323f1dbb02caf7e385ac68d3cb74b84a5e062da' }, "(", this.prize.name, ")"))), h("div", { key: 'e5895bd3e62bacf86077fe85932e85f4a313e9f6', class: "s-loyalty-program-exchange-btns" }, h("salla-button", { key: 'df88cc68a2a265fc5a0e9a84be7159d028cc22a9', width: "wide", loading: this.exchange.status === 'pending', onClick: () => this.handleConfirm() }, salla.lang.get('common.elements.confirm')), h("salla-button", { key: 'a99305e2bcde52b63da0b1102f3bd626d256ebbf', width: "wide", fill: "outline", color: "danger", onClick: () => this.handleCancel() }, salla.lang.get('common.elements.cancel')))));
     }
 };
 __decorate([
@@ -255,4 +296,4 @@ __decorate([
 ], SallaRewardExchange.prototype, "exchange", void 0);
 SallaRewardExchange.style = sallaLoyaltyProgramCss;
 
-export { SallaRewardAction as salla_reward_action, SallaRewardCard as salla_reward_card, SallaRewardDetails as salla_reward_details, SallaRewardExchange as salla_reward_exchange };
+export { SallaLoyaltyExchangeProductCard as salla_loyalty_exchange_product_card, SallaRewardAction as salla_reward_action, SallaRewardCard as salla_reward_card, SallaRewardDetails as salla_reward_details, SallaRewardExchange as salla_reward_exchange };