@salla.sa/twilight-components 2.14.491 → 2.14.493

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)