@salla.sa/twilight-components 2.14.492 → 2.14.494

package/dist/collection/components/salla-loyalty-program/salla-reward-action.js

@@ -26,10 +26,7 @@ export class SallaRewardAction {
         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')))));

package/dist/collection/components/salla-loyalty-program/salla-reward-card.js

@@ -5,7 +5,7 @@ import { h, Host } from "@stencil/core";
 import SIGift from "../../assets/svg/gift.svg";
 export class SallaRewardCard {
     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')))))));
     }
     static get is() { return "salla-reward-card"; }
     static get originalStyleUrls() {

package/dist/collection/components/salla-loyalty-program/salla-reward-details.js

@@ -22,9 +22,14 @@ const c = (...args) => args.map(i => 's-loyalty-program-' + i).join(' ');
 export class SallaRewardDetails {
     constructor() {
         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') {
@@ -33,6 +38,23 @@ export class SallaRewardDetails {
         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;
@@ -111,23 +133,29 @@ export class SallaRewardDetails {
     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 is() { return "salla-reward-details"; }
     static get originalStyleUrls() {
@@ -170,7 +198,8 @@ export class SallaRewardDetails {
     }
     static get states() {
         return {
-            "refreshKey": {}
+            "refreshKey": {},
+            "includedProductsData": {}
         };
     }
     static get events() {
@@ -194,6 +223,21 @@ export class SallaRewardDetails {
                         }
                     }
                 }
+            }, {
+                "method": "productActionClick",
+                "name": "productActionClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ productId: number }",
+                    "resolved": "{ productId: number; }",
+                    "references": {}
+                }
             }];
     }
     static get watchers() {
@@ -202,6 +246,15 @@ export class SallaRewardDetails {
                 "methodName": "handlePrizeChange"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "loyaltyProductExchange",
+                "method": "handleProductExchange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 __decorate([
     TrackedPromise(async () => {

package/dist/collection/components/salla-loyalty-program/salla-reward-exchange.js

@@ -43,11 +43,7 @@ export class SallaRewardExchange {
         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')))));
     }
     static get is() { return "salla-reward-exchange"; }
     static get originalStyleUrls() {

package/dist/collection/components/salla-product-options/salla-product-options.js

@@ -781,7 +781,7 @@ export class SallaProductOptions {
     /**
      * ============= Advanced options =============
      */
-    getOptionDetailName(detail, outOfStock = true, optionType) {
+    getOptionDetailName(detail, outOfStock = true, optionType, format) {
         let detailName;
         if (optionType && optionType === DisplayType.COLOR) {
             detailName = detail.name
@@ -789,12 +789,20 @@ export class SallaProductOptions {
                 + (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() {
@@ -818,13 +826,17 @@ export class SallaProductOptions {
     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.
@@ -862,7 +874,7 @@ export class SallaProductOptions {
      * @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)