@salla.sa/twilight-components 2.14.470 → 2.14.472

package/dist/esm/salla-add-product-button_5.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement, e as axios } from './index-Dckjjczv.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement, e as axios } from './index-CjnbnAFU.js';
 import { P as PendingOrdersIcon } from './cart-DY4LZmNP.js';
 import { H as Helper } from './Helper-BXj4f_Qj.js';
 import { B as BellRing } from './bell-ring-D3mWkc-3.js';
@@ -17,6 +17,140 @@ var WalletIcon = `<!-- Generated by IcoMoon.io -->
 </svg>
 `;
 
+/**
+ * Order-options gate for the fast-checkout widget — keeps <salla-add-product-button> thin.
+ * Intercepts the widget click → runs the order-options modal → injects the result → re-fires the click.
+ */
+const PRODUCT_FORM_SELECTOR = 'form.product-form';
+class OrderOptionsGate {
+    constructor(host, productId) {
+        this.host = host;
+        this.productId = productId;
+        /** True on the re-fired click so it passes through instead of re-gating. */
+        this.collected = false;
+        /** Live PDP price (one onPriceUpdated subscription per widget). */
+        this.livePrice = 0;
+    }
+    /** Attach once to the widget. Returns false when there's no widget (e.g. product cards) so the caller retries. */
+    static attach(host, productId) {
+        const widget = host.querySelector('salla-mini-checkout-widget');
+        if (!widget)
+            return false;
+        const gate = new OrderOptionsGate(host, String(productId));
+        // One subscription per widget (PDP only) — no per-card leak.
+        salla.product?.event?.onPriceUpdated?.((response) => {
+            gate.livePrice = Number(response?.data?.price) || gate.livePrice;
+        });
+        widget.addEventListener('click', (event) => gate.handleWidgetClick(event, widget), true);
+        return true;
+    }
+    /** Quantity from the same form the widget submits (PRODUCT_FORM_SELECTOR), not the button's nearest form. */
+    getSelectedQuantity() {
+        try {
+            const form = document.querySelector(PRODUCT_FORM_SELECTOR);
+            const data = form?.getElementSallaData?.();
+            const qty = Number(data instanceof FormData ? data.get('quantity') : data?.quantity);
+            if (Number.isFinite(qty) && qty > 0)
+                return qty;
+        }
+        catch {
+            // fall through to the attribute
+        }
+        return Number(this.host.getAttribute('quantity')) || 1;
+    }
+    async handleWidgetClick(event, widget) {
+        if (this.collected) {
+            this.collected = false;
+            return;
+        }
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        if (!await this.validatePdpOptions())
+            return;
+        if (salla.config.isGuest()) {
+            salla.api.auth.requireLoginThen('salla-add-product-button::oo.after-login', () => this.handleWidgetClick(event, widget));
+            return;
+        }
+        widget.classList.add('s-add-product-button-busy');
+        let resp;
+        try {
+            resp = await salla.api.withoutNotifier(() => salla.product.api.getOrderOptions([{ id: this.productId, quantity: this.getSelectedQuantity() }]));
+        }
+        catch (error) {
+            salla?.logger?.warn?.('order-options: fetch failed', error);
+            widget.classList.remove('s-add-product-button-busy');
+            this.resumeWidget(widget);
+            return;
+        }
+        widget.classList.remove('s-add-product-button-busy');
+        const items = resp?.data?.order_options || [];
+        if (!items.length) {
+            this.resumeWidget(widget);
+            return;
+        }
+        const basePrice = this.livePrice > 0
+            ? this.livePrice
+            : Number(resp?.data?.products?.[0]?.price?.amount) || 0;
+        const modal = this.ensureModal();
+        try {
+            const result = await modal.open({ orderOptions: items, basePrice });
+            this.injectIntoMini(result?.orderOptions || []);
+            this.resumeWidget(widget);
+        }
+        catch {
+            // user dismissed — widget stays blocked, they re-click to retry.
+        }
+    }
+    async validatePdpOptions() {
+        const optionsEl = document.querySelector(`salla-product-options[product-id="${this.productId}"]`);
+        if (!optionsEl)
+            return true;
+        if (typeof optionsEl.validateAndScroll === 'function') {
+            return await optionsEl.validateAndScroll();
+        }
+        if (typeof optionsEl.reportValidity === 'function') {
+            return await optionsEl.reportValidity();
+        }
+        return true;
+    }
+    /** Inject order_options into the next cart-add payload via `cart::before.add.item` (one-shot, scoped to productId). */
+    injectIntoMini(orderOptions) {
+        if (!orderOptions.length)
+            return;
+        const productId = this.productId;
+        const onceHandler = (eventData) => {
+            if (String(eventData?.id) !== String(productId))
+                return;
+            try {
+                eventData?.payload?.set?.('order_options', orderOptions);
+            }
+            finally {
+                salla.event.off('cart::before.add.item', onceHandler);
+            }
+        };
+        salla.event.on('cart::before.add.item', onceHandler);
+    }
+    ensureModal() {
+        let modal = document.querySelector('salla-order-options-modal');
+        if (!modal) {
+            modal = document.createElement('salla-order-options-modal');
+            document.body.appendChild(modal);
+        }
+        return modal;
+    }
+    resumeWidget(widget) {
+        this.collected = true;
+        // Real click target lives in the widget's shadow DOM.
+        const innerBtn = widget.shadowRoot?.querySelector?.('.s-fast-checkout-button');
+        if (innerBtn) {
+            innerBtn.click();
+        }
+        else if (typeof widget.click === 'function') {
+            widget.click();
+        }
+    }
+}
+
 const sallaAddProductButtonCss = ":host{display:block}salla-add-product-button[width=wide]{width:100%}";
 
 const SallaAddProductButton = class {
@@ -42,6 +176,8 @@ const SallaAddProductButton = class {
         /** Use matchMedia instead of window.innerWidth to avoid forced reflow (Lighthouse/PageSpeed) */
         this.isDesktopViewport = typeof window !== 'undefined' ? window.matchMedia('(min-width: 768px)').matches : true;
         this.viewportMediaQuery = null;
+        /** Guards one-time attachment of the order-options gate to the mini-checkout widget. */
+        this.orderOptionsGateAttached = false;
         this.onViewportChange = (e) => {
             this.isDesktopViewport = e.matches;
             this.btn?.setText((e.matches && !!this.passedLabel) ? this.passedLabel : this.getLabel());
@@ -229,6 +365,13 @@ const SallaAddProductButton = class {
         });
     }
     componentDidRender() {
+        // Wire the order-options gate to the fast-checkout widget once it renders (logic lives in OrderOptionsGate).
+        // Only when the merchant enabled order options; otherwise the widget runs the normal fast-checkout flow.
+        if (!this.orderOptionsGateAttached && this.productId
+            && salla.config.get('store.settings.order_options.mandatory', false)
+            && OrderOptionsGate.attach(this.host, this.productId)) {
+            this.orderOptionsGateAttached = true;
+        }
         //if label not passed, get label
         if (!!this.passedLabel && (!this.supportStickyBar || this.isDesktopViewport)) {
             // if passed label, set it
@@ -574,7 +717,7 @@ const SallaProductAvailability = class {
         field.nextElementSibling['innerText'] = '* ' + errorMsg;
     }
     render() {
-        return (h(Host, { key: '144b0687a0e527fa493aa701c334db76a7b42164', class: "s-product-availability-wrap" }, this.isSubscribedToProduct
+        return (h(Host, { key: '0779c3aef2637bfcd30ecf110d0cd31d819a82a5', class: "s-product-availability-wrap" }, this.isSubscribedToProduct
             ? h("div", { class: "s-product-availability-subscribed" }, h("span", { innerHTML: BellRing, class: "s-product-availability-subs-icon" }), salla.lang.get('pages.products.notify_availability_success'))
             :
                 h("salla-button", { width: "wide", onClick: () => this.isUser ? this.submit() : this.openModel() }, salla.lang.get('pages.products.notify_availability')), this.isUser || this.isSubscribedToProduct ? '' : this.renderModal()));
@@ -596,6 +739,58 @@ const SallaProductAvailability = class {
 };
 SallaProductAvailability.style = sallaProductAvailabilityCss;
 
+/**
+ * Builds a per-detail availability map from SKU-level data.
+ *
+ * Exported as a pure function so it can be unit-tested independently of the
+ * Stencil component (the @State availabilityMap backing-store is not accessible
+ * via page.rootInstance in the Stencil mock-doc test environment).
+ *
+ * Status values:
+ *   'available'    – at least one in-stock SKU for this detail + current selections
+ *   'out_of_stock' – all matching SKUs are out of stock
+ *   'impossible'   – no SKU intersection exists for this combination
+ *
+ * skus_availability is always the authoritative source when present; is_out is
+ * consulted only as a last resort when a detail has no SKU data at all.
+ */
+function computeAvailabilityMap(optionsData, selectedOptions) {
+    const map = {};
+    if (!optionsData?.length)
+        return map;
+    const variantGroups = optionsData.filter(opt => opt.details?.some(d => d.skus_availability && Object.keys(d.skus_availability).length > 0));
+    const isSingleGroup = variantGroups.length <= 1;
+    for (const optionGroup of variantGroups) {
+        const otherSelected = selectedOptions.filter(s => s.option_id !== optionGroup.id);
+        for (const detail of optionGroup.details) {
+            const skusAvail = detail.skus_availability;
+            // No skus_availability data — fall back to is_out as last resort only.
+            if (!skusAvail || !Object.keys(skusAvail).length) {
+                map[detail.id] = detail.is_out ? 'out_of_stock' : 'available';
+                continue;
+            }
+            const detailSkus = Object.keys(skusAvail).map(Number);
+            // No cross-group context yet — evaluate this detail's own SKUs directly.
+            if (isSingleGroup || otherSelected.length === 0) {
+                map[detail.id] = detailSkus.some(sku => skusAvail[sku]) ? 'available' : 'out_of_stock';
+                continue;
+            }
+            // Intersect this detail's SKUs with those of each other selected detail.
+            let candidates = detailSkus;
+            for (const other of otherSelected) {
+                const otherSkus = new Set(Object.keys(other.skus_availability || {}).map(Number));
+                candidates = candidates.filter(sku => otherSkus.has(sku));
+            }
+            if (!candidates.length) {
+                map[detail.id] = 'impossible';
+                continue;
+            }
+            map[detail.id] = candidates.some(sku => skusAvail[sku]) ? 'available' : 'out_of_stock';
+        }
+    }
+    return map;
+}
+
 var FileIcon = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
 <title>file-upload</title>
@@ -628,6 +823,7 @@ const SallaProductOptions = class {
         this.availableDigitalCardValues = [];
         this.userInitiatedValidation = false;
         this.isCartMode = false;
+        this.availabilityMap = {};
         this.outSkus = [];
         /**
        * Avoid selection of previous default or selected card value option
@@ -638,6 +834,11 @@ const SallaProductOptions = class {
          * The id of the product to which the options are going to be fetched for.
          */
         this.productId = salla.config.get('page.id');
+        /**
+         * Strip the wrapper's padding (keeps the background, rounded corners, margin).
+         * Used by callers that need the options to sit flush inside their own surface.
+         */
+        this.noPadding = false;
         this.handleDonationOptions = (event, detail, type, _option) => {
             // Donating-amount input only: onInput updates price and dispatches native change for form price watcher.
             if (detail === 'custom' && type === 'input') {
@@ -718,12 +919,14 @@ const SallaProductOptions = class {
      */
     async setOptionsData(optionsData) {
         this.optionsData = optionsData;
-        const that = this;
-        this.optionsData[0]?.details?.forEach(function (detail) {
+        this.outSkus = [];
+        this.optionsData[0]?.details?.forEach(detail => {
             Object.entries(detail.skus_availability || {})
-                .filter(sku => !sku[1])
-                .map(sku => that.outSkus.push(Number(sku[0])));
+                .filter(([, available]) => !available)
+                .forEach(([sku]) => this.outSkus.push(Number(sku)));
         });
+        this.fillSelectedOptions();
+        this.computeAvailability();
     }
     /**
      * Get the current options state, including selected values/details.
@@ -909,8 +1112,9 @@ const SallaProductOptions = class {
      */
     setSelectedSkus() {
         this.selectedSkus = this.selectedOptions.map(detail => Object.keys(detail.skus_availability || {}))
-            .reduce((p, c) => p.filter(e => c.includes(e)), []) // Initialize accumulator as an empty array
+            .reduce((p, c) => p.filter(e => c.includes(e)), [])
             .map(sku => Number(sku));
+        this.computeAvailability();
     }
     handleRequiredMultipleOptions(option) {
         if (option.type !== DisplayType.MULTIPLE_OPTIONS || !option.required) {
@@ -1114,7 +1318,7 @@ const SallaProductOptions = class {
         if (this.optionsData?.length === 0) {
             return;
         }
-        return (h(Host, { class: "s-product-options-wrapper" }, h("salla-conditional-fields", null, this.optionsData.map((option) => h("div", { key: option.id, class: `s-product-options-option-container${option.visibility_condition || this.hideDigitalCardsOptions(option) ? ' hidden' : ''}`, "data-option-id": option.id, ...this.getOptionShownWhen(option) }, option.name === 'splitter' ?
+        return (h(Host, { class: { 's-product-options-wrapper': true, 's-product-options-no-padding': this.noPadding } }, h("salla-conditional-fields", null, this.optionsData.map((option) => h("div", { key: option.id, class: `s-product-options-option-container${option.visibility_condition || this.hideDigitalCardsOptions(option) ? ' hidden' : ''}`, "data-option-id": option.id, ...this.getOptionShownWhen(option) }, option.name === 'splitter' ?
             this.splitterOption()
             : h("div", { class: { "s-product-options-option": true, "s-product-options-option-booking": option.type === DisplayType.BOOKING && salla.url.is_page("cart") }, "data-option-type": option.type, "data-option-required": `${option.required}` }, h("label", { htmlFor: this.generateInputId(option.id), class: `s-product-options-option-label ${this.hideLabel(option) ? 's-product-options-option-label-hidden' : ''}` }, h("b", null, option.name, option.required && h("span", null, " * "), " "), h("small", null, option.placeholder)), h("div", { class: `s-product-options-option-content ${this.hideLabel(option) || (option.type === DisplayType.BOOKING && salla.url.is_page("cart")) ? 's-product-options-option-content-full-width' : ''}` }, this.getDisplayForType(option))))))));
     }
@@ -1169,7 +1373,9 @@ const SallaProductOptions = class {
     }
     fillSelectedOptions() {
         this.selectedOptions = this.optionsData.reduce((acc, opt) => {
-            const selectedDetails = opt.details.filter(detail => detail.is_selected);
+            // `details` is optional on the Option interface — input-type options
+            // (text/number/date/file) carry no choice list, so guard before filtering.
+            const selectedDetails = (opt.details ?? []).filter(detail => detail.is_selected);
             const mappedDetails = selectedDetails.map(detail => ({
                 ...detail,
                 option_id: opt.id
@@ -1177,6 +1383,25 @@ const SallaProductOptions = class {
             return acc.concat(mappedDetails);
         }, []);
     }
+    /**
+     * Seed `selectedOptions` from API defaults (`is_selected: true`).
+     * componentWillLoad does this only on the cart page; non-cart callers
+     * (e.g. order-options modal) call this after mount to avoid the first
+     * multi-select toggle wiping the pre-selected defaults.
+     * */
+    async seedSelectedOptions() {
+        this.fillSelectedOptions();
+        // A required multi-select renders every checkbox `required`; handleRequiredMultipleOptions
+        // clears that once one is checked, but it only fires on user `change`. After seeding a
+        // pre-selected default we run it for the initial DOM so a defaulted-but-untouched required
+        // multi-select doesn't fail validation and block checkout. Defer to rAF so the seeded
+        // `checked` state is painted before we count it (matches the change-handler pattern above).
+        requestAnimationFrame(() => {
+            this.optionsData
+                ?.filter(o => o.type === DisplayType.MULTIPLE_OPTIONS && o.required)
+                .forEach(o => this.handleRequiredMultipleOptions(o));
+        });
+    }
     async componentDidLoad() {
         if (!this.optionsData?.length) {
             return;
@@ -1239,6 +1464,7 @@ const SallaProductOptions = class {
         this.disableCardValue = false;
         this.canDisabled = true;
         this.fillSelectedOptions();
+        this.computeAvailability();
     }
     /**
      * Enable user-initiated validation mode so invalid fields will scroll into view
@@ -1349,22 +1575,14 @@ const SallaProductOptions = class {
         //and because we are using this inside select option, we need to replace the html currency symbol with the store currency symbol
         return detailName.replace('<i class=sicon-sar></i>', salla.config.currency()?.symbol || 'ر.س');
     }
+    computeAvailability() {
+        this.availabilityMap = computeAvailabilityMap(this.optionsData || [], this.selectedOptions || []);
+    }
     isOptionDetailOut(detail) {
-        if (detail.is_out || !detail.skus_availability || !this.selectedSkus?.length) {
-            return detail.is_out;
-        }
-        const isDetailSelected = this.selectedOptions.filter(option => option.id === detail.id).length;
-        //if the current options is the only selected option, so we are sure that it's not out, because there is no other options selected yet
-        if (isDetailSelected && this.selectedOptions.length === 1) {
-            return false;
-        }
-        //if current details has sku in the possible outSkus it's out for sure
-        if (isDetailSelected) {
-            //here we will get the possible outSkus for current selected options
-            const outSelectableSkus = this.selectedSkus.filter(sku => this.outSkus.includes(sku));
-            return Object.keys(detail.skus_availability).some(sku => outSelectableSkus.includes(Number(sku)));
-        }
-        return this.selectedOptions.some(option => option.is_out && option.option_id !== detail.option_id);
+        const status = this.availabilityMap[detail.id];
+        // !!detail.is_out guards against TypeScript optimising away `?? false`
+        // for the non-nullable `is_out: boolean` field when the value is actually undefined at runtime.
+        return status !== undefined ? status !== 'available' : !!detail.is_out;
     }
     /**
      * Renders a single input element (radio or checkbox) for an option detail.
@@ -1377,10 +1595,14 @@ const SallaProductOptions = class {
      */
     renderInput(type, detail, option, isRequired, name, buttonStyle) {
         const id = this.generateUniqueKey(`${type}-${option.id}-${detail.id}`);
-        const isDisabled = this.isOptionDetailOut(detail);
+        const isOutOfStock = this.isOptionDetailOut(detail);
         return (h("label", { class: {
-                "s-product-options-disabled": isDisabled,
-            } }, h("input", { id: id, type: type, name: name, value: detail.id, disabled: isDisabled, 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": isDisabled } }, this.getOptionDetailName(detail))));
+                "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))));
     }
     /**
      * Renders a collection of input elements for all details of an option.
@@ -1453,15 +1675,22 @@ const SallaProductOptions = class {
     }
     //@ts-ignore
     colorOption(option) {
-        return (h("fieldset", { class: "s-product-options-colors-wrapper" }, option?.details.map((detail) => (h("div", { class: "s-product-options-colors-item", key: detail.id }, h("input", { type: "radio", value: detail.id, required: !option.visibility_condition && option.required, checked: detail.is_selected, name: this.generateInputName(option.id), disabled: this.canDisabled && this.isOptionDetailOut(detail), id: this.generateUniqueKey(`color-${this.productId}-${option.id}-${detail.id}`), onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option), "data-img-id": detail.option_value }), h("label", { htmlFor: this.generateUniqueKey(`color-${this.productId}-${option.id}-${detail.id}`), "data-img-id": detail.option_value }, h("span", { style: { backgroundColor: detail.color } }), h("div", { innerHTML: this.getOptionDetailName(detail, true, option.type) })))))));
+        return (h("fieldset", { class: "s-product-options-colors-wrapper" }, option?.details.map((detail) => {
+            const isOutOfStock = this.isOptionDetailOut(detail);
+            return (h("div", { class: {
+                    "s-product-options-colors-item": true,
+                    "s-product-options-option-stock-out": isOutOfStock,
+                }, key: detail.id }, h("input", { type: "radio", value: detail.id, required: !option.visibility_condition && option.required, checked: detail.is_selected, name: this.generateInputName(option.id), disabled: this.canDisabled && isOutOfStock, id: this.generateUniqueKey(`color-${this.productId}-${option.id}-${detail.id}`), onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option), "data-img-id": detail.option_value }), h("label", { htmlFor: this.generateUniqueKey(`color-${this.productId}-${option.id}-${detail.id}`), "data-img-id": detail.option_value }, h("span", { style: { backgroundColor: detail.color } }), h("div", { innerHTML: this.getOptionDetailName(detail, true, option.type) }))));
+        })));
     }
     //@ts-ignore
     thumbnailOption(option) {
         return h("div", { class: "s-product-options-thumbnails-wrapper" }, option.details.map((detail) => {
-            return h("div", { key: detail.id }, h("input", { type: "radio", value: detail.id, "data-itemid": detail.id, required: !option.visibility_condition && option.required, checked: detail.is_selected, name: this.generateInputName(option.id), "data-img-id": detail.option_value, disabled: this.canDisabled && this.isOptionDetailOut(detail), id: this.generateUniqueKey(`option_${this.productId}-${option.id}_${detail.id}`), onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option) }), h("label", { htmlFor: this.generateUniqueKey(`option_${this.productId}-${option.id}_${detail.id}`), "data-img-id": detail.option_value, class: "go-to-slide" }, h("img", { "data-src": detail.image, src: detail.image, title: detail.name, alt: detail.name }), h("span", { innerHTML: SICheck, class: "s-product-options-thumbnails-icon" }), this.isOptionDetailOut(detail) ?
+            const isOutOfStock = this.isOptionDetailOut(detail);
+            return h("div", { key: detail.id, class: { "s-product-options-option-stock-out": isOutOfStock } }, h("input", { type: "radio", value: detail.id, "data-itemid": detail.id, required: !option.visibility_condition && option.required, checked: detail.is_selected, name: this.generateInputName(option.id), "data-img-id": detail.option_value, disabled: this.canDisabled && isOutOfStock, id: this.generateUniqueKey(`option_${this.productId}-${option.id}_${detail.id}`), onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option) }), h("label", { htmlFor: this.generateUniqueKey(`option_${this.productId}-${option.id}_${detail.id}`), "data-img-id": detail.option_value, class: "go-to-slide" }, h("img", { "data-src": detail.image, src: detail.image, title: detail.name, alt: detail.name }), h("span", { innerHTML: SICheck, class: "s-product-options-thumbnails-icon" }), isOutOfStock ?
                 [
-                    h("small", { key: detail.id, class: "s-product-options-thumbnails-stock-badge" }, this.outOfStockText),
-                    this.canDisabled ? h("div", { key: detail.id, class: "s-product-options-thumbnails-badge-overlay" }) : '',
+                    h("small", { key: `badge-${detail.id}`, class: "s-product-options-thumbnails-stock-badge" }, this.outOfStockText),
+                    this.canDisabled ? h("div", { key: `overlay-${detail.id}`, class: "s-product-options-thumbnails-badge-overlay" }) : '',
                 ]
                 : ''), h("p", null, this.getOptionDetailName(detail, false), " "));
         }));
@@ -1476,7 +1705,8 @@ const SallaProductOptions = class {
     }
     countryOption(option) {
         return h("div", { class: "s-product-options-digital-card-wrapper" }, option.details.map((detail) => {
-            return h("label", { htmlFor: this.generateUniqueKey(detail.id.toString()), key: detail.id, class: { "s-product-options-digital-card-option": true, "s-product-options-digital-card-option-stock-out": detail.is_out } }, h("input", { id: this.generateUniqueKey(detail.id.toString()), type: "radio", class: "s-form-control s-product-options-digital-card-input", value: detail.id, name: this.generateInputName(option.id), disabled: detail.is_out, required: !option.visibility_condition && option.required, onInvalid: (e) => this.invalidHandler(e, option), onChange: e => this.changedHandler(e, option), onClick: () => { this.disableCardValue = false; }, ...(salla.url.is_page("cart") ? { defaultChecked: this.getSelectedDigitalCardOptions(option)?.id === detail.id } : {}) }), h("img", { loading: "lazy", alt: detail.code, height: 24, width: 24, class: "s-product-options-country-flag", src: `https://cdn.assets.salla.network/prod/admin/cp/assets/flags/1x1/${String(detail.code).toLocaleLowerCase()}.svg`, onError: e => {
+            const isOutOfStock = this.isOptionDetailOut(detail);
+            return h("label", { htmlFor: this.generateUniqueKey(detail.id.toString()), key: detail.id, class: { "s-product-options-digital-card-option": true, "s-product-options-digital-card-option-stock-out": isOutOfStock, "s-product-options-option-stock-out": isOutOfStock } }, h("input", { id: this.generateUniqueKey(detail.id.toString()), type: "radio", class: "s-form-control s-product-options-digital-card-input", value: detail.id, name: this.generateInputName(option.id), disabled: this.canDisabled && isOutOfStock, required: !option.visibility_condition && option.required, onInvalid: (e) => this.invalidHandler(e, option), onChange: e => this.changedHandler(e, option), onClick: () => { this.disableCardValue = false; }, ...(salla.url.is_page("cart") ? { defaultChecked: this.getSelectedDigitalCardOptions(option)?.id === detail.id } : {}) }), h("img", { loading: "lazy", alt: detail.code, height: 24, width: 24, class: "s-product-options-country-flag", src: `https://cdn.assets.salla.network/prod/admin/cp/assets/flags/1x1/${String(detail.code).toLocaleLowerCase()}.svg`, onError: e => {
                     e.currentTarget.onerror = null;
                     e.currentTarget.src =
                         salla.url.cdn('images/globe.svg');
@@ -1998,7 +2228,15 @@ window.SallaApplePay = {
         SallaApplePay.session.oncouponcodechanged = SallaApplePay.onCouponCodeChanged;
         SallaApplePay.session.onpaymentmethodselected = SallaApplePay.onPaymentMethodSelected;
 
-        SallaApplePay.session.begin();
+        // Hook between session creation and begin(). Return truthy to skip
+        // begin() (caller handles it later, e.g. after async work).
+        let skipBegin;
+        if (typeof SallaApplePay.detail.onStartedSession === 'function') {
+            skipBegin = SallaApplePay.detail.onStartedSession(SallaApplePay.session);
+        }
+        if (!skipBegin) {
+            SallaApplePay.session.begin();
+        }
     },
     onPaymentMethodSelected: async (event) => {
         salla.logger.log('🍏 Pay: onPaymentMethodSelected', event);
@@ -2416,6 +2654,88 @@ if (window.ApplePaySession?.canMakePayments()) {
     document.querySelectorAll('data-show-if-apple-pay-supported').forEach(element => element.style.display = 'none');
 }
 
+/**
+ * Order-options helpers for the Apple Pay quick-buy flow — keeps <salla-quick-buy> to thin AP wiring.
+ * Apple Pay resolves options inside the session-started hook (single gesture), so the caller owns
+ * the ApplePaySession and drives it via callbacks.
+ */
+/** Get-or-create the singleton order-options modal on <body>. */
+function ensureOrderOptionsModal() {
+    let modal = document.querySelector('salla-order-options-modal');
+    if (!modal) {
+        modal = document.createElement('salla-order-options-modal');
+        document.body.appendChild(modal);
+    }
+    return modal;
+}
+/** Sync PDP-option validity (an `await` would consume the Apple Pay gesture). Skips hidden/disabled inputs. */
+function reportProductOptionsValiditySync(productId) {
+    const optionsElement = document.querySelector(`salla-product-options[product-id="${productId}"]`);
+    if (!optionsElement)
+        return true;
+    const requiredInputs = optionsElement.querySelectorAll('[required]');
+    let pass = true;
+    requiredInputs.forEach((input) => {
+        if (input.disabled || input.closest('.hidden'))
+            return;
+        if ('reportValidity' in input && !input.reportValidity())
+            pass = false;
+    });
+    return pass;
+}
+/** Merge collected order-options into the quick-purchase payload (FormData or plain object). */
+function appendOrderOptionsToPayload(data, orderOptions) {
+    if (!orderOptions.length)
+        return;
+    if (data && typeof data.append === 'function') {
+        orderOptions.forEach((entry, i) => {
+            data.append(`order_options[${i}][id]`, String(entry.id));
+            data.append(`order_options[${i}][value]`, String(entry.value));
+        });
+        return;
+    }
+    if (data && typeof data === 'object') {
+        data.order_options = orderOptions;
+    }
+}
+/**
+ * Fetch order options and, if any, collect them via the modal (apple-pay mode). Callbacks drive the
+ * caller's pre-created session: `beginPendingSession` (no options), `discardPendingSession` (options
+ * found — the modal's AP button starts a fresh one), `onSubmit` (submitted).
+ */
+async function resolveApplePayOrderOptions(opts) {
+    let resp;
+    try {
+        resp = await salla.api.withoutNotifier(() => salla.product.api.getOrderOptions([{ id: opts.productId, quantity: opts.quantity }]));
+    }
+    catch (error) {
+        salla?.logger?.warn?.('order-options: fetch failed', error);
+        opts.beginPendingSession();
+        return;
+    }
+    const items = resp?.data?.order_options || [];
+    if (!items.length) {
+        opts.beginPendingSession(); // begin() doesn't need a fresh gesture
+        return;
+    }
+    opts.discardPendingSession(); // drop the unused session; the modal builds a fresh one
+    const basePrice = Number(opts.amount) > 0
+        ? Number(opts.amount)
+        : Number(resp?.data?.products?.[0]?.price?.amount) || 0;
+    const modal = ensureOrderOptionsModal();
+    try {
+        await modal.open({
+            orderOptions: items,
+            basePrice,
+            paymentMode: 'apple-pay',
+            onSubmit: opts.onSubmit,
+        });
+    }
+    catch {
+        // dismissed — no live session
+    }
+}
+
 const sallaQuickBuyCss = ".s-quick-buy-button .s-button-text{display:flex}apple-pay-button{--apple-pay-button-width:100%;--apple-pay-button-height:40px;--apple-pay-button-border-radius:.75rem;--apple-pay-button-box-sizing:content-box}";
 
 const SallaQuickBuy = class {
@@ -2443,32 +2763,82 @@ const SallaQuickBuy = class {
          * @default {}
          */
         this.options = {};
+        /** Modal selections, merged into the quick-purchase payload. */
+        this.collectedOrderOptions = [];
+        /** Flips true after the first onStartedSession so the second dispatch begins. */
+        this.optionsResolved = false;
+        /** PDP price + selected order-option prices (from the modal). */
+        this.applePayAmount = 0;
+        /** Session from the initial gesture; begun later when there are no order options. */
+        this.pendingApplePaySession = null;
         this.quickBuy = salla.lang.get('pages.products.buy_now');
+        /** Apple Pay onStartedSession: first call defers begin() to run the OO check; second (resolved) begins. */
+        this.handleApplePaySessionStarted = (session) => {
+            // Order options disabled → let Apple Pay begin normally, as if the feature didn't exist.
+            if (!salla.config.get('store.settings.order_options.mandatory', false))
+                return false;
+            if (this.optionsResolved)
+                return false;
+            this.optionsResolved = true;
+            this.pendingApplePaySession = session;
+            resolveApplePayOrderOptions({
+                productId: this.productId,
+                amount: Number(this.amount),
+                quantity: this.getSelectedQuantity(),
+                beginPendingSession: () => {
+                    this.pendingApplePaySession?.begin();
+                    this.pendingApplePaySession = null;
+                },
+                discardPendingSession: () => { this.pendingApplePaySession = null; },
+                onSubmit: (selections, total) => {
+                    this.collectedOrderOptions = selections;
+                    this.applePayAmount = total;
+                    this.settlePayment();
+                },
+            });
+            return true;
+        };
         salla.lang.onLoaded(() => {
             this.quickBuy = salla.lang.get('pages.products.buy_now');
         });
     }
-    async quickBuyHandler() {
-        // user guest and guest-checkout not enabled
+    quickBuyHandler() {
         if (salla.config.isGuest() && !this.isGuestCheckout()) {
             this.requireLogin.emit({ productId: this.productId });
-            // todo (low) :: find a way to re-fire the method after success
-            let afterLoginEvent = "salla-quick-buy::user.logged-in";
-            salla.event.on(afterLoginEvent, () => this.settlePayment());
-            salla.api.auth.setAfterLoginEvent(afterLoginEvent);
-            return salla.auth.event.dispatch('login::open', { withoutReload: true });
+            salla.api.auth.requireLoginThen('salla-quick-buy::user.logged-in', () => this.quickBuyHandler());
+            return;
         }
-        await this.settlePayment();
+        // Sync validate — AP needs the gesture preserved for new ApplePaySession().
+        if (!this.validatePdpOptionsSync())
+            return;
+        this.optionsResolved = false;
+        this.collectedOrderOptions = [];
+        this.applePayAmount = 0;
+        this.settlePayment();
+    }
+    /** Sync PDP-option validity (preserves the AP gesture); emits + notifies on failure. */
+    validatePdpOptionsSync() {
+        if (reportProductOptionsValiditySync(this.productId))
+            return true;
+        this.validationFailed.emit({ productId: this.productId });
+        salla.error(salla.lang.get('common.messages.required_fields'));
+        return false;
     }
-    async settlePayment() {
-        let optionsElement = document.querySelector(`salla-product-options[product-id="${this.productId}"]`);
-        //make sure all the required options are selected
-        if (optionsElement && !await optionsElement.reportValidity()) {
-            this.validationFailed.emit({ productId: this.productId });
-            return salla.error(salla.lang.get('common.messages.required_fields'));
+    /** Read the live PDP quantity from the form so order-options match the real cart line. */
+    getSelectedQuantity() {
+        try {
+            const data = this.host.getElementSallaData?.();
+            const qty = Number(data instanceof FormData ? data.get('quantity') : data?.quantity);
+            return Number.isFinite(qty) && qty > 0 ? qty : 1;
         }
+        catch {
+            return 1;
+        }
+    }
+    async settlePayment() {
         //use this way to get quantity too
         let data = this.host.getElementSallaData();
+        appendOrderOptionsToPayload(data, this.collectedOrderOptions);
         // if the store doesn't have Apple Pay , just create a cart and then redirect to check out page
         if (!this.isApplePayActive) {
             // return salla.product.buyNow(this.productId, data);
@@ -2486,13 +2856,16 @@ const SallaQuickBuy = class {
         }
         // noinspection TypeScriptValidateJSTypes
         salla.event.dispatch('payments::apple-pay.start-transaction', {
-            amount: this.amount, // 1000
+            // Prefer the modal's collected total (PDP price + selected OO additional_prices).
+            // Falls back to PDP live amount when no OO modal ran.
+            amount: this.applePayAmount > 0 ? this.applePayAmount : this.amount,
             currency: this.currency || 'SAR', // SAR
             requiredShippingContactFields: this.getRequiredShippingContactFields(),
             shippingMethods: this.isRequireShipping ? [] : undefined,
             supportedNetworks: salla.config.get('store.settings.buy_now.networks'),
             supportedCountries: salla.config.get('store.settings.buy_now.countries'),
             countryCode: salla.config.get('store.store_country') || 'SA',
+            onStartedSession: this.handleApplePaySessionStarted,
             validateMerchant: {
                 url: this.validateHost ? `${this.validateHost}/checkout/applepay/validate` : salla.url.get('checkout/applepay/validate'),
                 onSuccess: (response) => {
@@ -2623,7 +2996,7 @@ const SallaQuickBuy = class {
         });
     }
     render() {
-        return h(Host, { key: '078fa17510403612cf8204899fee395f057b88bd' }, this.quickBuyButton());
+        return h(Host, { key: 'fb1bdf862d9b9cea58df14862f7ec9c4be388585' }, this.quickBuyButton());
     }
     quickBuyButton() {
         return h("apple-pay-button", { locale: salla?.config?.get?.('user.language_code') || 'ar', onClick: () => this.quickBuyHandler(), "data-quick-purchase": "applepay", class: "s-quick-buy-apple-pay", "data-is-applepay": "1", buttonstyle: "black", type: this.type });