@salla.sa/twilight-components 2.14.492 → 2.14.494

package/dist/components/salla-product-options2.js

@@ -928,7 +928,7 @@ const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductO
     /**
      * ============= Advanced options =============
      */
-    getOptionDetailName(detail, outOfStock = true, optionType) {
+    getOptionDetailName(detail, outOfStock = true, optionType, format) {
         let detailName;
         if (optionType && optionType === DisplayType.COLOR) {
             detailName = detail.name
@@ -936,12 +936,20 @@ const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductO
                 + (detail.additional_price ? ` <p> (${salla.money(detail.additional_price, false)}) </p>` : '');
         }
         if (!detailName) {
-            detailName = detail.name
-                + ((outOfStock && this.isOptionDetailOut(detail) && !salla.url.is_page("cart")) && !this.hideOutLabel ? ` - ${this.outOfStockText}` : '')
+            const detailSuffix = ((outOfStock && this.isOptionDetailOut(detail) && !salla.url.is_page("cart")) && !this.hideOutLabel ? ` - ${this.outOfStockText}` : '')
                 + (detail.additional_price ? ` (${salla.money(detail.additional_price, false)})` : '');
+            // Keep the Riyal icon markup for price-format radio options rendered via innerHTML.
+            if (format === "price") {
+                const normalizedPrice = salla.helpers.digitsOnly(detail.name);
+                const price = Number(normalizedPrice);
+                if (!normalizedPrice || !Number.isFinite(price)) {
+                    return detailSuffix;
+                }
+                return salla.money(price, true) + detailSuffix;
+            }
+            detailName = detail.name + detailSuffix;
         }
-        //Some merchants adding price to the names of the options,
-        //and because we are using this inside select option, we need to replace the html currency symbol with the store currency symbol
+        // Text-rendered callers cannot display the icon, so use the store currency symbol.
         return detailName.replace('<i class=sicon-sar></i>', salla.config.currency()?.symbol || 'ر.س');
     }
     computeAvailability() {
@@ -965,13 +973,17 @@ const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductO
     renderInput(type, detail, option, isRequired, name, buttonStyle) {
         const id = this.generateUniqueKey(`${type}-${option.id}-${detail.id}`);
         const isOutOfStock = this.isOptionDetailOut(detail);
+        const detailName = this.getOptionDetailName(detail, true, option.type, option.format);
+        const detailClass = {
+            "s-product-options-grid-mode-span": buttonStyle,
+            "s-product-options-disabled": this.canDisabled && isOutOfStock,
+        };
         return (h("label", { class: {
                 "s-product-options-disabled": this.canDisabled && isOutOfStock,
                 "s-product-options-option-stock-out": isOutOfStock,
-            } }, h("input", { id: id, type: type, name: name, value: detail.id, disabled: this.canDisabled && isOutOfStock, required: isRequired, checked: detail.is_selected, onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option) }), h("div", { class: {
-                "s-product-options-grid-mode-span": buttonStyle,
-                "s-product-options-disabled": this.canDisabled && isOutOfStock,
-            } }, this.getOptionDetailName(detail))));
+            } }, h("input", { id: id, type: type, name: name, value: detail.id, disabled: this.canDisabled && isOutOfStock, required: isRequired, checked: detail.is_selected, onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option) }), option.format === "price"
+            ? h("div", { class: detailClass, innerHTML: detailName })
+            : h("div", { class: detailClass }, detailName)));
     }
     /**
      * Renders a collection of input elements for all details of an option.
@@ -1009,7 +1021,7 @@ const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductO
      * @returns HTMLElement - The rendered single-option element.
      */
     singleOption(option) {
-        const buttonStyle = this.optionConfig?.['single-option']?.type === 'button';
+        const buttonStyle = this.optionConfig?.['single-option']?.type === 'button' || (option.type === DisplayType.SINGLE_OPTION && option.format === "price");
         const isRequired = !option.visibility_condition && option.required;
         return buttonStyle
             ? this.renderButtonStyle('radio', option, isRequired)

package/dist/components/salla-reward-action2.js

@@ -3,8 +3,9 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { c as closeModals } from './functions.js';
+import { d as defineCustomElement$1 } from './salla-button2.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}";
 
 const SallaRewardAction = /*@__PURE__*/ proxyCustomElement(class SallaRewardAction extends HTMLElement {
     constructor() {
@@ -32,10 +33,7 @@ const SallaRewardAction = /*@__PURE__*/ proxyCustomElement(class SallaRewardActi
         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')))));
@@ -48,13 +46,18 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["salla-reward-action"];
+    const components = ["salla-reward-action", "salla-button"];
     components.forEach(tagName => { switch (tagName) {
         case "salla-reward-action":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, SallaRewardAction);
             }
             break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
     } });
 }
 defineCustomElement();

package/dist/components/salla-reward-card2.js

@@ -5,7 +5,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { l as loyaltyProgramIcon } from './gift.js';
 import { d as defineCustomElement$1 } from './salla-badge2.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}";
 
 const SallaRewardCard = /*@__PURE__*/ proxyCustomElement(class SallaRewardCard extends HTMLElement {
     constructor() {
@@ -15,7 +15,7 @@ const SallaRewardCard = /*@__PURE__*/ proxyCustomElement(class SallaRewardCard e
         this.actionClick = createEvent(this, "actionClick", 7);
     }
     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: loyaltyProgramIcon }), 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: loyaltyProgramIcon }), 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')))))));
     }
     static get style() { return sallaLoyaltyProgramCss; }
 }, [4, "salla-reward-card", {

package/dist/components/salla-reward-details2.js

@@ -8,16 +8,17 @@ import { T as Tag } from './tag.js';
 import { I as IconVerified } from './check.js';
 import { C as Cancel } from './cancel.js';
 import { T as TrackedPromise } from './tracked-promise.js';
-import { d as defineCustomElement$p } from './salla-add-product-button2.js';
-import { d as defineCustomElement$o } from './salla-badge2.js';
-import { d as defineCustomElement$n } from './salla-booking-field2.js';
-import { d as defineCustomElement$m } from './salla-button2.js';
-import { d as defineCustomElement$l } from './salla-color-picker2.js';
-import { d as defineCustomElement$k } from './salla-conditional-fields2.js';
-import { d as defineCustomElement$j } from './salla-count-down2.js';
-import { d as defineCustomElement$i } from './salla-datetime-picker2.js';
-import { d as defineCustomElement$h } from './salla-file-upload2.js';
-import { d as defineCustomElement$g } from './salla-loading2.js';
+import { d as defineCustomElement$q } from './salla-add-product-button2.js';
+import { d as defineCustomElement$p } from './salla-badge2.js';
+import { d as defineCustomElement$o } from './salla-booking-field2.js';
+import { d as defineCustomElement$n } from './salla-button2.js';
+import { d as defineCustomElement$m } from './salla-color-picker2.js';
+import { d as defineCustomElement$l } from './salla-conditional-fields2.js';
+import { d as defineCustomElement$k } from './salla-count-down2.js';
+import { d as defineCustomElement$j } from './salla-datetime-picker2.js';
+import { d as defineCustomElement$i } from './salla-file-upload2.js';
+import { d as defineCustomElement$h } from './salla-loading2.js';
+import { d as defineCustomElement$g } from './salla-loyalty-exchange-product-card2.js';
 import { d as defineCustomElement$f } from './salla-map2.js';
 import { d as defineCustomElement$e } from './salla-modal2.js';
 import { d as defineCustomElement$d } from './salla-order-options-modal2.js';
@@ -34,7 +35,7 @@ import { d as defineCustomElement$3 } from './salla-tab-header2.js';
 import { d as defineCustomElement$2 } from './salla-tabs2.js';
 import { d as defineCustomElement$1 } from './salla-tel-input2.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;
@@ -52,10 +53,16 @@ const SallaRewardDetails = /*@__PURE__*/ proxyCustomElement(class SallaRewardDet
         super();
         this.__registerHost();
         this.actionClick = createEvent(this, "actionClick", 7);
+        this.productActionClick = createEvent(this, "productActionClick", 7);
         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') {
@@ -64,6 +71,23 @@ const SallaRewardDetails = /*@__PURE__*/ proxyCustomElement(class SallaRewardDet
         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;
@@ -142,23 +166,29 @@ const SallaRewardDetails = /*@__PURE__*/ proxyCustomElement(class SallaRewardDet
     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: loyaltyProgramIcon }), 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: loyaltyProgramIcon }), 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: IconVerified }), 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: Cancel }), 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"]
@@ -166,8 +196,9 @@ const SallaRewardDetails = /*@__PURE__*/ proxyCustomElement(class SallaRewardDet
     static get style() { return sallaLoyaltyProgramCss; }
 }, [0, "salla-reward-details", {
         "prize": [16],
-        "refreshKey": [32]
-    }, undefined, {
+        "refreshKey": [32],
+        "includedProductsData": [32]
+    }, [[0, "loyaltyProductExchange", "handleProductExchange"]], {
         "prize": ["handlePrizeChange"]
     }]);
 __decorate([
@@ -184,7 +215,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["salla-reward-details", "salla-add-product-button", "salla-badge", "salla-booking-field", "salla-button", "salla-color-picker", "salla-conditional-fields", "salla-count-down", "salla-datetime-picker", "salla-file-upload", "salla-loading", "salla-map", "salla-modal", "salla-order-options-modal", "salla-product-availability", "salla-product-card", "salla-product-options", "salla-products-slider", "salla-progress-bar", "salla-quick-buy", "salla-reward-action", "salla-slider", "salla-tab-content", "salla-tab-header", "salla-tabs", "salla-tel-input"];
+    const components = ["salla-reward-details", "salla-add-product-button", "salla-badge", "salla-booking-field", "salla-button", "salla-color-picker", "salla-conditional-fields", "salla-count-down", "salla-datetime-picker", "salla-file-upload", "salla-loading", "salla-loyalty-exchange-product-card", "salla-map", "salla-modal", "salla-order-options-modal", "salla-product-availability", "salla-product-card", "salla-product-options", "salla-products-slider", "salla-progress-bar", "salla-quick-buy", "salla-reward-action", "salla-slider", "salla-tab-content", "salla-tab-header", "salla-tabs", "salla-tel-input"];
     components.forEach(tagName => { switch (tagName) {
         case "salla-reward-details":
             if (!customElements.get(tagName)) {
@@ -193,50 +224,55 @@ function defineCustomElement() {
             break;
         case "salla-add-product-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$p();
+                defineCustomElement$q();
             }
             break;
         case "salla-badge":
             if (!customElements.get(tagName)) {
-                defineCustomElement$o();
+                defineCustomElement$p();
             }
             break;
         case "salla-booking-field":
             if (!customElements.get(tagName)) {
-                defineCustomElement$n();
+                defineCustomElement$o();
             }
             break;
         case "salla-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$m();
+                defineCustomElement$n();
             }
             break;
         case "salla-color-picker":
             if (!customElements.get(tagName)) {
-                defineCustomElement$l();
+                defineCustomElement$m();
             }
             break;
         case "salla-conditional-fields":
             if (!customElements.get(tagName)) {
-                defineCustomElement$k();
+                defineCustomElement$l();
             }
             break;
         case "salla-count-down":
             if (!customElements.get(tagName)) {
-                defineCustomElement$j();
+                defineCustomElement$k();
             }
             break;
         case "salla-datetime-picker":
             if (!customElements.get(tagName)) {
-                defineCustomElement$i();
+                defineCustomElement$j();
             }
             break;
         case "salla-file-upload":
             if (!customElements.get(tagName)) {
-                defineCustomElement$h();
+                defineCustomElement$i();
             }
             break;
         case "salla-loading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$h();
+            }
+            break;
+        case "salla-loyalty-exchange-product-card":
             if (!customElements.get(tagName)) {
                 defineCustomElement$g();
             }

package/dist/components/salla-reward-exchange2.js

@@ -5,9 +5,9 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { c as closeModals } from './functions.js';
 import { l as loyaltyProgramIcon } from './gift.js';
 import { T as TrackedPromise } from './tracked-promise.js';
-import { d as defineCustomElement$1 } from './salla-loading2.js';
+import { d as defineCustomElement$1 } from './salla-button2.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;
@@ -49,11 +49,7 @@ const SallaRewardExchange = /*@__PURE__*/ proxyCustomElement(class SallaRewardEx
         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: loyaltyProgramIcon })), 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: loyaltyProgramIcon })), 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')))));
     }
     static get style() { return sallaLoyaltyProgramCss; }
 }, [0, "salla-reward-exchange", {
@@ -67,14 +63,14 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["salla-reward-exchange", "salla-loading"];
+    const components = ["salla-reward-exchange", "salla-button"];
     components.forEach(tagName => { switch (tagName) {
         case "salla-reward-exchange":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, SallaRewardExchange);
             }
             break;
-        case "salla-loading":
+        case "salla-button":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }

package/dist/esm/{filepond-DpAz9cLe.js → filepond-V-9YwoVf.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-BpMToHtv.js';
+import { d as getDefaultExportFromCjs } from './index-3omad4sF.js';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {

package/dist/esm/{filepond-plugin-file-poster-CG1OGxGU.js → filepond-plugin-file-poster-BBE8fAHq.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-BpMToHtv.js';
+import { d as getDefaultExportFromCjs } from './index-3omad4sF.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{filepond-plugin-file-validate-size-D19g-XYh.js → filepond-plugin-file-validate-size-CR9iK259.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-BpMToHtv.js';
+import { d as getDefaultExportFromCjs } from './index-3omad4sF.js';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {

package/dist/esm/{filepond-plugin-file-validate-type-CXHLmRma.js → filepond-plugin-file-validate-type-B4eStrHv.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-BpMToHtv.js';
+import { d as getDefaultExportFromCjs } from './index-3omad4sF.js';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {

package/dist/esm/{filepond-plugin-image-edit-Ba-AftT1.js → filepond-plugin-image-edit-B84jjo8b.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-BpMToHtv.js';
+import { d as getDefaultExportFromCjs } from './index-3omad4sF.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{filepond-plugin-image-exif-orientation-BRkxatOj.js → filepond-plugin-image-exif-orientation-BAaD5wJD.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-BpMToHtv.js';
+import { d as getDefaultExportFromCjs } from './index-3omad4sF.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{filepond-plugin-image-preview-BXud5dzw.js → filepond-plugin-image-preview-Bn4GgIpr.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-BpMToHtv.js';
+import { d as getDefaultExportFromCjs } from './index-3omad4sF.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{functions-cqVnlaVs.js → functions-Btrtoght.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { h } from './index-BpMToHtv.js';
+import { h } from './index-3omad4sF.js';
 
 function nearestLowerMultiple(number, multipleOf = window.matchMedia('(min-width: 768px)').matches ? 3 : 2) {
     return number < multipleOf ? number : number - (number % multipleOf);