@salla.sa/twilight-components 2.14.563 → 2.14.565

package/dist/collection/components/salla-order-options-modal/salla-order-options-modal.js

@@ -3,12 +3,25 @@
  */
 import { h } from "@stencil/core";
 /**
- * Modal that collects merchant-configured order options before checkout.
+ * Modal that collects order options and/or free product options before checkout.
+ *
+ * Wizard mode (CP-2836): when free products are provided alongside orderOptions, the modal
+ * runs one step per free product Y, then a final step for the store-level order options:
+ *   Steps 1..N — free product Y card + its product options (inFreeStep drives this)
+ *   Step  N+1  — store-level order options (inFreeStep cleared, orderOptions swapped)
+ *
+ * `advance_free_product` is a LIST — one entry per qualifying offer, ordered by the offer's
+ * effective priority and capped by the store's offers limit — so N is not always 1.
+ *
+ * Single-step mode (CHOD-11650 compat): no free products → original behavior.
  *
  * Usage:
- *   const modal = document.querySelector('salla-order-options-modal');
- *   const { orderOptions } = await modal.open({ orderOptions, basePrice });
- *   // orderOptions = [{ id, value }, ...] — ready to send as `order_options`.
+ *   const { orderOptions, freeProducts } = await modal.open({
+ *     orderOptions,   // store-level order options (final step)
+ *     freeProducts,   // [{ product, options, offer_name, quantity }, ...] (optional)
+ *     basePrice,
+ *   });
+ *   // freeProducts = [{ productId, quantity, options: { [optionId]: value } }, ...]
  */
 export class SallaOrderOptionsModal {
     constructor() {
@@ -16,20 +29,48 @@ export class SallaOrderOptionsModal {
         this.rejectFn = null;
         this.optionsRefs = new Map();
         this.changeHandler = null;
-        /** Sync hook for callers that need to act under the submit user gesture (Apple Pay). */
         this.submitCallback = null;
+        /** Wizard bookkeeping — not @State, only used for logic */
+        this._realOrderOptions = [];
+        this._collectedFreeOptions = [];
+        this._isWizard = false;
+        /** Pending free-product steps and where we are in them. */
+        this._freeQueue = [];
+        this._freeIndex = 0;
+        this._collectedFreeProducts = [];
+        /**
+         * The product's own price, held across the wizard. Gift steps show a 0 base (the gift is
+         * free), so without this the final total — which Apple Pay charges — would omit the product.
+         */
+        this._orderBasePrice = 0;
+        /** Surcharges picked on gift steps already left behind, folded into the final total. */
+        this._accumulatedExtra = 0;
+        /** @State — all rendering decisions are driven by these */
         this.orderOptions = [];
         this.basePrice = 0;
         this.liveTotal = 0;
         this.isSubmitting = false;
-        /** Bumped each open() so the inner <salla-product-options> remounts. */
         this.sessionId = 0;
         this.paymentMode = 'default';
+        /** Card data for the free product being configured right now (null on the final step). */
+        this.freeProduct = null;
+        /**
+         * True while a free-product step is active. Tracked separately from `freeProduct` so an
+         * entry that arrives without card data still runs as its own step instead of silently
+         * rendering as the order-options step.
+         */
+        this.inFreeStep = false;
         this.title = '';
         this.subtitle = '';
         this.submitLabel = '';
         this.totalLabel = '';
         this.requiredMessage = '';
+        // Hardcode Arabic defaults — salla.lang.get() returns the key string itself when a key is
+        // missing, so `|| fallback` never fires. Defaults here guarantee correct text even before
+        // translations load or when the keys don't exist in the store's language file yet.
+        this.freeProductTitle = 'خيارات المنتج المجاني';
+        this.freeProductSubtitle = 'اختر ما يناسبك من خيارات المنتج';
+        this.freeProductContinueLabel = 'تابع واحصل على هديتك الان';
         this.handleClose = () => {
             if (this.isSubmitting)
                 return;
@@ -44,41 +85,109 @@ export class SallaOrderOptionsModal {
     componentWillLoad() {
         this.loadTranslations();
     }
+    /** True when the page reads right-to-left, so directional icons can mirror. */
+    isRtl() {
+        return document?.documentElement?.getAttribute('dir') === 'rtl';
+    }
+    /** Returns the translated value only when the key actually resolves (not the key string itself). */
+    t(key, fallback) {
+        const val = salla.lang.get(key);
+        return val && val !== key ? val : fallback;
+    }
     loadTranslations() {
         this.title = salla.lang.get('blocks.order_options.title');
         this.subtitle = salla.lang.get('blocks.order_options.subtitle');
         this.submitLabel = salla.lang.get('blocks.order_options.continue');
         this.totalLabel = salla.lang.get('blocks.order_options.total');
         this.requiredMessage = salla.lang.get('blocks.order_options.required_message');
+        this.freeProductTitle = this.t('pages.products.free_product_options_title', 'خيارات المنتج المجاني');
+        this.freeProductSubtitle = this.t('pages.products.free_product_options_subtitle', 'اختر ما يناسبك من خيارات المنتج');
+        this.freeProductContinueLabel = this.t('pages.products.free_product_cta', 'تابع واحصل على هديتك الان');
     }
-    /**
-     * Open the modal. Resolves with selections on submit; rejects on dismiss.
-     * `onSubmit` fires sync in the submit click (for Apple Pay user-gesture).
-     * `paymentMode: 'apple-pay'` swaps the footer button for <apple-pay-button>.
-     */
     async open(payload) {
-        // Normalize here, not in the shared salla-product-options: text/number order options ship no
-        // `details`, which product-options dereferences unguarded.
-        this.orderOptions = (Array.isArray(payload.orderOptions) ? payload.orderOptions : [])
+        const normalize = (arr) => (Array.isArray(arr) ? arr : [])
             .map((o) => ({ ...o, details: o.details ?? [] }));
-        this.basePrice = Number(payload.basePrice) || 0;
-        this.liveTotal = this.basePrice + this.seedOptionsPrice(this.orderOptions);
+        const realOrderOptions = normalize(payload.orderOptions);
+        const freeQueue = this.buildFreeQueue(payload, normalize);
+        this._realOrderOptions = realOrderOptions;
+        this._collectedFreeOptions = [];
+        this._collectedFreeProducts = [];
+        this._freeQueue = freeQueue;
+        this._freeIndex = 0;
+        this._orderBasePrice = Number(payload.basePrice) || 0;
+        this._accumulatedExtra = 0;
+        // The step bar appears whenever there is more than one step to walk — N gifts alone
+        // still needs it, not just the gift + order-options pairing.
+        this._isWizard = (freeQueue.length + (realOrderOptions.length > 0 ? 1 : 0)) > 1;
         this.isSubmitting = false;
-        this.sessionId++;
         this.optionsRefs.clear();
         this.submitCallback = payload.onSubmit ?? null;
         this.paymentMode = payload.paymentMode ?? 'default';
+        if (freeQueue.length > 0) {
+            this.loadFreeStep(0);
+        }
+        else {
+            // Single step: store order options
+            this.sessionId++;
+            this.inFreeStep = false;
+            this.orderOptions = realOrderOptions;
+            this.freeProduct = null;
+            this.basePrice = Number(payload.basePrice) || 0;
+            this.liveTotal = this.basePrice + this.seedOptionsPrice(this.orderOptions);
+        }
         await this.modal?.open();
+        // salla-modal reads modal-title once in its constructor (@State, not @Prop) so it
+        // won't react to attribute changes. Push the correct title imperatively after open().
+        this.modal?.setTitle(this.inFreeStep ? this.freeProductTitle : this.title);
         this.attachChangeListener();
         return new Promise((resolve, reject) => {
             this.resolveFn = resolve;
             this.rejectFn = reject;
         });
     }
+    /**
+     * Normalize `freeProducts` (and the legacy single-gift pair) into the step queue.
+     * Entries without options are dropped — there is nothing to ask, and the offer still
+     * auto-adds that product with its defaults.
+     */
+    buildFreeQueue(payload, normalize) {
+        const queue = [];
+        (Array.isArray(payload.freeProducts) ? payload.freeProducts : []).forEach((entry) => {
+            const options = normalize(entry?.options);
+            if (!options.length)
+                return;
+            queue.push({
+                product: entry?.product
+                    ? { ...entry.product, offer_name: entry.offer_name ?? entry.product.offer_name ?? null }
+                    : null,
+                options,
+                // The offer decides how many of Y are granted.
+                quantity: Number(entry?.quantity) > 0 ? Number(entry.quantity) : 1,
+            });
+        });
+        if (queue.length)
+            return queue;
+        const legacyOptions = normalize(payload.freeProductOptions);
+        if (legacyOptions.length) {
+            queue.push({ product: payload.freeProduct ?? null, options: legacyOptions, quantity: 1 });
+        }
+        return queue;
+    }
+    /** Swap the modal onto free-product step `index`. */
+    loadFreeStep(index) {
+        const step = this._freeQueue[index];
+        this._freeIndex = index;
+        this.optionsRefs.clear();
+        this.inFreeStep = true;
+        this.orderOptions = step.options;
+        this.freeProduct = step.product;
+        this.basePrice = 0;
+        this.liveTotal = this.seedOptionsPrice(step.options);
+        this.sessionId++;
+    }
     async close() {
         await this.modal?.close();
     }
-    /** Sync walk of inputs — avoids `await` through the @Method that would consume the AP user gesture. */
     collectOrderOptionsSync() {
         const result = [];
         for (const [, el] of this.optionsRefs) {
@@ -86,9 +195,8 @@ export class SallaOrderOptionsModal {
                 continue;
             const inputs = el.querySelectorAll('[name^="options["],[name*="[options]["]');
             inputs.forEach((input) => {
-                if (input instanceof HTMLInputElement && (input.type === 'radio' || input.type === 'checkbox') && !input.checked) {
+                if (input instanceof HTMLInputElement && (input.type === 'radio' || input.type === 'checkbox') && !input.checked)
                     return;
-                }
                 const match = input.name.match(/(?:^|\[)options\]?\[(\d+)\]/);
                 if (!match)
                     return;
@@ -104,7 +212,6 @@ export class SallaOrderOptionsModal {
         }
         return result;
     }
-    /** Sync native validity — keeps the AP user gesture intact. */
     validateSync() {
         let pass = true;
         for (const [, el] of this.optionsRefs) {
@@ -112,8 +219,6 @@ export class SallaOrderOptionsModal {
                 continue;
             const requiredInputs = el.querySelectorAll('[required]');
             requiredInputs.forEach((input) => {
-                // Mirror salla-product-options.reportValidity(): skip hidden/disabled inputs so a
-                // required field in a `.hidden` conditional container can't silently block submit.
                 if (input.disabled || input.closest('.hidden'))
                     return;
                 if ('reportValidity' in input && !input.reportValidity())
@@ -122,11 +227,6 @@ export class SallaOrderOptionsModal {
         }
         return pass;
     }
-    /**
-     * Sum the per-quantity fee (total_price = additional_price × qty) of any pre-selected details.
-     * Uses total_price so the total scales with product quantity; falls back to the per-unit
-     * additional_price only when total_price is absent. (CHOD-13172)
-     */
     seedOptionsPrice(orderOptions) {
         let sum = 0;
         orderOptions.forEach((opt) => {
@@ -137,7 +237,6 @@ export class SallaOrderOptionsModal {
         });
         return sum;
     }
-    /** salla.event.on is global — attach per open, detach on close to avoid stacking. */
     attachChangeListener() {
         this.detachChangeListener();
         this.changeHandler = () => this.recomputeTotal();
@@ -158,7 +257,6 @@ export class SallaOrderOptionsModal {
                 ? await el.getSelectedOptions()
                 : [];
             (selected || []).forEach((s) => {
-                // total_price already includes the product-quantity multiplier (CHOD-13172).
                 selectedPrice += Number(s.total_price ?? s.additional_price) || 0;
             });
         }
@@ -171,44 +269,148 @@ export class SallaOrderOptionsModal {
             salla.notify?.error?.(this.requiredMessage);
             return;
         }
+        if (this.inFreeStep) {
+            const step = this._freeQueue[this._freeIndex];
+            const selected = this.collectOrderOptionsSync();
+            // Legacy single-gift callers still read the flat list off the first gift.
+            if (this._freeIndex === 0)
+                this._collectedFreeOptions = selected;
+            // A step left entirely empty is not forced into products[] — the offer still
+            // auto-adds that gift with its defaults.
+            if (selected.length && step?.product?.id) {
+                const options = {};
+                selected.forEach(({ id, value }) => { options[id] = value; });
+                this._collectedFreeProducts.push({
+                    productId: step.product.id,
+                    quantity: step.quantity,
+                    options,
+                });
+            }
+            // Bank this step's surcharges — the gift's own base is 0, so liveTotal is pure surcharge.
+            this._accumulatedExtra += Math.max(0, this.liveTotal - this.basePrice);
+            // More gifts to configure — advance to the next one.
+            const next = this._freeIndex + 1;
+            if (next < this._freeQueue.length) {
+                this.loadFreeStep(next);
+                this.modal?.setTitle(this.freeProductTitle);
+                return;
+            }
+            if (this._realOrderOptions.length) {
+                // Gifts done — advance to the store order-options step.
+                this.optionsRefs.clear();
+                this.inFreeStep = false;
+                this.freeProduct = null; // @State → re-render to the final step
+                this.orderOptions = this._realOrderOptions; // @State → swaps to store order options
+                // Restore the product's price: this step's total is what the shopper pays, and in
+                // apple-pay mode it becomes the sheet amount.
+                this.basePrice = this._orderBasePrice;
+                this.liveTotal = this._orderBasePrice + this.seedOptionsPrice(this._realOrderOptions);
+                this.sessionId++; // forces salla-product-options remount
+                this.modal?.setTitle(this.title); // update header: "خيارات الطلب"
+                return;
+            }
+            // Gifts only, no store order options — this was the last step, so fire the submit hook
+            // (Apple Pay starts its session in there) before resolving.
+            this.isSubmitting = true;
+            // This step's surcharge is already banked above, so swap liveTotal for the product price
+            // rather than adding it — otherwise the surcharge is counted twice.
+            this.liveTotal = this._orderBasePrice;
+            this.fireSubmitCallback([]);
+            this.resolveAndClose([]);
+            this.isSubmitting = false;
+            return;
+        }
+        // Step 2 (or single step) — resolve
         this.isSubmitting = true;
         const orderOptions = this.collectOrderOptionsSync();
-        const total = Math.round(this.liveTotal * 100) / 100;
-        // Fire onSubmit BEFORE any await — Apple Pay needs the user gesture.
+        this.fireSubmitCallback(orderOptions);
+        this.resolveAndClose(orderOptions);
+        this.isSubmitting = false;
+    }
+    /** Product price + every surcharge picked across the wizard. This is what Apple Pay charges. */
+    finalTotal() {
+        return Math.round((this.liveTotal + this._accumulatedExtra) * 100) / 100;
+    }
+    /** Fire the sync submit hook — Apple Pay opens its session inside this call, so never await. */
+    fireSubmitCallback(orderOptions) {
         try {
-            this.submitCallback?.(orderOptions, total);
+            this.submitCallback?.(orderOptions, this.finalTotal(), this._collectedFreeProducts);
         }
         catch (err) {
             salla?.logger?.warn?.('order-options modal onSubmit threw', err);
         }
-        this.resolveFn?.({ orderOptions });
+    }
+    /** Hand the collected selections back to the caller and tear the modal down. */
+    resolveAndClose(orderOptions) {
+        this.resolveFn?.({
+            orderOptions,
+            freeProductOptions: this._collectedFreeOptions,
+            freeProducts: this._collectedFreeProducts,
+        });
         this.resolveFn = null;
         this.rejectFn = null;
         this.submitCallback = null;
         this.detachChangeListener();
         this.modal?.close().then(() => this.reset());
-        this.isSubmitting = false;
     }
-    /** Clear options on close so the inner <salla-product-options> unmounts. */
     reset() {
         this.orderOptions = [];
+        this.freeProduct = null;
+        this.inFreeStep = false;
         this.optionsRefs.clear();
         this.liveTotal = 0;
+        this._realOrderOptions = [];
+        this._collectedFreeOptions = [];
+        this._collectedFreeProducts = [];
+        this._freeQueue = [];
+        this._freeIndex = 0;
+        this._isWizard = false;
     }
     render() {
-        // salla.money returns HTML (sicon-sar icon) → render via innerHTML. Round
-        // first so floating-point sum doesn't show as 1174.3799999999999.
         const totalHtml = salla.money(Math.round(this.liveTotal * 100) / 100);
-        return (h("salla-modal", { key: 'e84a40e1a27447d58ca5651a7ed76cbcf886495c', ref: el => (this.modal = el), class: "s-order-options-modal-host", width: "md", "modal-title": this.title, onModalVisibilityChanged: (e) => {
+        const isStep1 = this.inFreeStep;
+        const productIdAttr = isStep1
+            ? String(this.freeProduct?.id || `free-prod-${this.orderOptions[0]?.id}`)
+            : `order-options-${this.orderOptions[0]?.id}`;
+        // Distinct per gift so consecutive steps can't share a stale options ref.
+        const uniqueKey = isStep1 ? `free-product-options-${this._freeIndex}` : 'order-options';
+        // One chip per gift, then one for the store order options. `current` is the index of
+        // the step on screen; anything before it is done.
+        const stepLabels = [
+            ...this._freeQueue.map(() => this.freeProductTitle),
+            ...(this._realOrderOptions.length ? [this.title] : []),
+        ];
+        const current = isStep1 ? this._freeIndex : this._freeQueue.length;
+        // Apple Pay must be offered on whichever step is genuinely last. With gifts but no store
+        // order options the last step IS a gift step, and gating on `!isStep1` would leave the
+        // shopper on a plain Continue button that never opens the payment sheet.
+        const isLastStep = current === Math.max(0, stepLabels.length - 1);
+        const showApplePay = this.paymentMode === 'apple-pay' && isLastStep;
+        // In wizard mode the step chips live in the modal header (slot="icon") so they appear
+        // next to the close button. A non-breaking space triggers salla-modal to render the
+        // header-inner container; the empty title div is hidden via .s-oom-wizard-modal CSS.
+        // In single-step mode the header shows the relevant title text directly.
+        const modalTitle = this._isWizard ? ' ' : (isStep1 ? this.freeProductTitle : this.title);
+        return (h("salla-modal", { key: '60e626bb49f8592c952182c182e6d73ddcaadeed', ref: el => (this.modal = el), class: `s-order-options-modal-host${this._isWizard ? ' s-oom-wizard-modal' : ''}`, width: "md", "modal-title": modalTitle, onModalVisibilityChanged: (e) => {
                 if (!e.detail)
                     this.handleClose();
-            } }, h("div", { key: 'fafa3cdeb22787d4a02f3fc8afb70770e1c3b4b5', class: "s-order-options-modal-body" }, h("p", { key: 'c563c24e1b8744f3248328ec16a18c5a668e7949', class: "s-order-options-modal-subtitle" }, this.subtitle), h("div", { key: '475599cc47435b077d2321573328321888e60aa6', class: "s-order-options-modal-fields" }, this.orderOptions.length > 0 && (h("salla-product-options", { key: this.sessionId, ref: el => {
+            } }, this._isWizard && (h("div", { key: 'a842b5d1566c8bb0bd68d5986fb092c14f8a01d6', slot: "icon", class: "s-oom-steps" }, stepLabels.map((label, index) => [
+            index > 0 && h("div", { class: "s-oom-connector" }),
+            h("div", { class: `s-oom-step ${index === current ? 'active' : (index < current ? 'done' : '')}` }, h("span", { class: "s-oom-step-num" }, index + 1), h("span", { class: "s-oom-step-label" }, label)),
+        ]))), h("div", { key: '1f61a756dcf824bf4d8be71ccbd9a0c2742851d2', class: "s-order-options-modal-body" }, isStep1 && this.freeProduct && (h("div", { key: '667841475dff0deda06d8d04e0a2841f33ec54b6', class: "s-oom-free-product-card" }, this.freeProduct.thumbnail && (h("img", { key: '129b99226216f0c1ca59fccbc0ba35d5af8cdee7', class: "s-oom-free-product-thumb", src: this.freeProduct.thumbnail, alt: this.freeProduct.name })), h("div", { key: 'ae385e2d4fb967144743d67eadd50f31c23332ec', class: "s-oom-free-product-info" }, h("span", { key: '4f48a3fd0af91435060a0d303a6d0f77f5afd1bc', class: "s-oom-free-product-name" }, this.freeProduct.name), h("div", { key: 'de62961aba2246c1d52d411461d6a45aed620eab', class: "s-oom-free-product-tags" }, h("span", { key: 'db1af48cc1a7583a7f2d026159ff01f03ad216bf', class: "s-oom-free-badge" }, this.t('common.elements.free', 'مجاني')), this.freeProduct.offer_name && (h("span", { key: 'ce595bccd755e908deb1c566758ca3629171962b', class: "s-oom-free-offer-name" }, this.freeProduct.offer_name)))))), h("p", { key: '161740bddbf25369392f362f9613f2e9c6a94fc1', class: "s-order-options-modal-subtitle" }, isStep1 ? this.freeProductSubtitle : this.subtitle), h("div", { key: '20d3f92f0f3782d599ec5ce923c2dad93f7c7608', class: "s-order-options-modal-fields" }, this.orderOptions.length > 0 && (h("salla-product-options", { key: this.sessionId, ref: el => {
                 if (!el)
                     return;
-                this.optionsRefs.set('order-options', el);
-                // Without seeding, first multi-select toggle wipes pre-selected defaults.
+                this.optionsRefs.set(uniqueKey, el);
                 el.seedSelectedOptions?.();
-            }, "product-id": `order-options-${this.orderOptions[0]?.id}`, "unique-key": "order-options", options: JSON.stringify(this.orderOptions), "hide-out-label": "1", "no-padding": true })))), h("div", { key: 'e00641853937f745c8cc798c7f9e15b389faf540', slot: "footer", class: "s-order-options-modal-footer" }, this.paymentMode === 'apple-pay' ? (h("div", { class: "s-order-options-modal-apple-pay-wrap" }, h("div", { class: "s-order-options-modal-apple-pay-total" }, h("span", { class: "s-order-options-modal-apple-pay-label" }, this.totalLabel), h("span", { class: "s-order-options-modal-apple-pay-amount", innerHTML: totalHtml })), h("apple-pay-button", { locale: salla?.config?.get?.('user.language_code') || 'ar', buttonstyle: "black", type: "buy", class: "s-order-options-modal-apple-pay", onClick: () => this.handleSubmit() }))) : (h("salla-button", { type: "button", color: "primary", fill: "solid", width: "wide", loading: this.isSubmitting, onClick: () => this.handleSubmit() }, h("span", { class: "s-order-options-modal-cta-content" }, h("span", { class: "s-order-options-modal-cta-text" }, this.submitLabel), h("span", { class: "s-order-options-modal-cta-total", innerHTML: totalHtml })))))));
+            }, "product-id": productIdAttr, "unique-key": uniqueKey, options: JSON.stringify(this.orderOptions), "hide-out-label": "1", "no-padding": true })))), h("div", { key: 'c80a0c1f1b32e5396483171196879bc43713c2f4', slot: "footer", class: "s-order-options-modal-footer" }, showApplePay ? (h("div", { class: "s-order-options-modal-apple-pay-wrap" }, h("div", { class: "s-order-options-modal-apple-pay-total" }, h("span", { class: "s-order-options-modal-apple-pay-label" }, this.totalLabel), h("span", { class: "s-order-options-modal-apple-pay-amount", innerHTML: totalHtml })), h("apple-pay-button", { locale: salla?.config?.get?.('user.language_code') || 'ar', buttonstyle: "black", type: "buy", class: "s-order-options-modal-apple-pay", onClick: () => this.handleSubmit() }))) : (h("salla-button", { type: "button", color: "primary", fill: "solid", width: "wide", loading: this.isSubmitting, onClick: () => this.handleSubmit() }, h("span", { class: "s-order-options-modal-cta-content" }, h("span", { class: "s-order-options-modal-cta-text" }, isStep1 ? this.freeProductContinueLabel : this.submitLabel), isStep1
+            ? h("i", { class: {
+                    's-oom-cta-arrow': true,
+                    // "Forward" is left in RTL and right in LTR; hardcoding arrow-left made
+                    // English stores show a back-pointing arrow (CP-3813).
+                    'sicon-arrow-left': this.isRtl(),
+                    'sicon-arrow-right': !this.isRtl(),
+                } })
+            : h("span", { class: "s-order-options-modal-cta-total", innerHTML: totalHtml })))))));
     }
     static get is() { return "salla-order-options-modal"; }
     static get originalStyleUrls() {
@@ -229,21 +431,26 @@ export class SallaOrderOptionsModal {
             "isSubmitting": {},
             "sessionId": {},
             "paymentMode": {},
+            "freeProduct": {},
+            "inFreeStep": {},
             "title": {},
             "subtitle": {},
             "submitLabel": {},
             "totalLabel": {},
-            "requiredMessage": {}
+            "requiredMessage": {},
+            "freeProductTitle": {},
+            "freeProductSubtitle": {},
+            "freeProductContinueLabel": {}
         };
     }
     static get methods() {
         return {
             "open": {
                 "complexType": {
-                    "signature": "(payload: { orderOptions: any[]; basePrice?: number; paymentMode?: \"default\" | \"apple-pay\"; onSubmit?: (orderOptions: OrderOptionEntry[], total: number) => void; }) => Promise<{ orderOptions: OrderOptionEntry[]; }>",
+                    "signature": "(payload: { orderOptions: any[]; freeProducts?: any[]; freeProductOptions?: any[]; freeProduct?: any; basePrice?: number; paymentMode?: \"default\" | \"apple-pay\"; onSubmit?: (orderOptions: OrderOptionEntry[], total: number, freeProducts: FreeProductSelection[]) => void; }) => Promise<{ orderOptions: OrderOptionEntry[]; freeProductOptions: OrderOptionEntry[]; freeProducts: FreeProductSelection[]; }>",
                     "parameters": [{
                             "name": "payload",
-                            "type": "{ orderOptions: any[]; basePrice?: number; paymentMode?: \"default\" | \"apple-pay\"; onSubmit?: (orderOptions: OrderOptionEntry[], total: number) => void; }",
+                            "type": "{ orderOptions: any[]; freeProducts?: any[]; freeProductOptions?: any[]; freeProduct?: any; basePrice?: number; paymentMode?: \"default\" | \"apple-pay\"; onSubmit?: (orderOptions: OrderOptionEntry[], total: number, freeProducts: FreeProductSelection[]) => void; }",
                             "docs": ""
                         }],
                     "references": {
@@ -255,12 +462,17 @@ export class SallaOrderOptionsModal {
                             "location": "local",
                             "path": "/home/runner/_work/twilight/twilight/packages/twilight-components/src/components/salla-order-options-modal/salla-order-options-modal.tsx",
                             "id": "src/components/salla-order-options-modal/salla-order-options-modal.tsx::OrderOptionEntry"
+                        },
+                        "FreeProductSelection": {
+                            "location": "local",
+                            "path": "/home/runner/_work/twilight/twilight/packages/twilight-components/src/components/salla-order-options-modal/salla-order-options-modal.tsx",
+                            "id": "src/components/salla-order-options-modal/salla-order-options-modal.tsx::FreeProductSelection"
                         }
                     },
-                    "return": "Promise<{ orderOptions: OrderOptionEntry[]; }>"
+                    "return": "Promise<{ orderOptions: OrderOptionEntry[]; freeProductOptions: OrderOptionEntry[]; freeProducts: FreeProductSelection[]; }>"
                 },
                 "docs": {
-                    "text": "Open the modal. Resolves with selections on submit; rejects on dismiss.\n`onSubmit` fires sync in the submit click (for Apple Pay user-gesture).\n`paymentMode: 'apple-pay'` swaps the footer button for <apple-pay-button>.",
+                    "text": "",
                     "tags": []
                 }
             },

package/dist/collection/components/salla-order-summary/salla-order-summary.js

@@ -62,7 +62,7 @@ export class SallaOrderSummary {
         this.copyCodeButtonTimeout && clearTimeout(this.copyCodeButtonTimeout);
     }
     render() {
-        return (h("ul", { key: 'd699111d423dbb47469d813f64e5f956f5860522', class: "s-order-summary-wrapper" }, this.noItemFound ? h("salla-placeholder", { alignment: "center" }, h("span", { slot: "title" })) :
+        return (h("ul", { key: '96ce5c2d31f1908bd1522ad2f87094ab7d37cbd5', class: "s-order-summary-wrapper" }, this.noItemFound ? h("salla-placeholder", { alignment: "center" }, h("span", { slot: "title" })) :
             this.order_items.map((item) => (this.isDigitalCard(item) ? (h("li", { key: item.product.id, class: "s-order-summary-item" }, h("h2", { class: "s-order-summary-item-title" }, this.codes_text, " (", item.name, ")"), item.codes.map((code) => (h("div", { key: code.code, class: "s-order-summary-code-item-wrapper" }, h("p", null, h("span", { innerHTML: iconCreditCard }), h("span", null, code.code)), h("salla-button", { class: `s-order-summary-item-copy-button ${this.codeCopied === code.code ? 'copied' : ''}`, onClick: () => this.copyToClipboardHandler(code.code), shape: "link" }, h("span", { innerHTML: this.codeCopied === code.code ? iconCheck : iconCopy }), h("span", null, this.copy_text))))))) :
                 this.isDigitalProduct(item) ? (h("li", { key: item.product.id, class: "s-order-summary-item" }, h("h2", { class: "s-order-summary-item-title" }, this.files_text, " (", item.name, ")"), h("ul", null, item.files.map((file) => (h("li", { class: "s-order-summary-digital-item-wrapper" }, h("div", null, h("span", { innerHTML: iconFileArchive }), h("span", null, file.name)), h("a", { href: file.url, target: "_blank", class: "s-order-summary-item-download" }, h("span", { innerHTML: iconDownload }), h("span", null, this.download_text)))))))) : null))));
     }

package/dist/collection/components/salla-payments/salla-payments.js

@@ -42,12 +42,12 @@ export class SallaPayments {
     render() {
         const madeInKSA = !this.exclude.includes('made-in-ksa') && salla.config.get('store.settings.made_in_ksa');
         const sbcId = this.exclude.includes('sbc') ? null : salla.config.get('store.settings.certificate.id');
-        return (h(Host, { key: 'aaa2a9297d16666d9cf686aea17319026145ed1d', class: "s-payments-list-wrap" }, h("ul", { key: '0c9a19d7ba93555e897fdb5068572d90f64a87e5', class: "s-payments-list" }, madeInKSA && h("li", { key: '1da474ca870831495e7bee34e8e8ba538927c716', class: "s-payments-list-item" }, h("img", { key: '66b42b93ef788b7091e8343338182ffc93cae74f', width: 58, height: 58, decoding: "async", loading: "lazy", src: salla.url.cdn(`images/made-in-ksa.svg`, 58, 58), alt: "made in KSA certified" })), this.payments.filter(payment => !this.exclude.includes(payment)).map((payment) => (payment == "cod" ?
+        return (h(Host, { key: '7b48366eb122743315532e53cfcf05ac31c5ad60', class: "s-payments-list-wrap" }, h("ul", { key: 'e278c90249fa655ede607689afd366e5dc538532', class: "s-payments-list" }, madeInKSA && h("li", { key: '6a2494479aaef3dbe8557feaf07b290b9a7fc3a9', class: "s-payments-list-item" }, h("img", { key: '386ee723fce881bf4206a3113ff8e611bf48c0c8', width: 58, height: 58, decoding: "async", loading: "lazy", src: salla.url.cdn(`images/made-in-ksa.svg`, 58, 58), alt: "made in KSA certified" })), this.payments.filter(payment => !this.exclude.includes(payment)).map((payment) => (payment == "cod" ?
             h("div", { id: "cod-slot", innerHTML: this.codSlot
                     .replace(/\{image\}/g, this.paymentLogo(`cod`)) }) :
             h("div", { id: "payment-slot", innerHTML: this.paymentSlot
                     .replace(/\{image\}/g, this.paymentLogo(payment))
-                    .replace(/\{payment\}/g, payment) }))), sbcId && h("div", { key: '511b086294391bc21af831e838ffcfc1a601aace', id: "sbc-slot", innerHTML: this.sbcSlot
+                    .replace(/\{payment\}/g, payment) }))), sbcId && h("div", { key: '7a355da7a8f0ee873264807504d2d353739331bf', id: "sbc-slot", innerHTML: this.sbcSlot
                 .replace(/\{image\}/g, salla.url.cdn(`images/sbc.png`, 58, 58))
                 .replace(/\{link\}/g, `https://eauthenticate.saudibusiness.gov.sa/certificate-details/${sbcId}`) }))));
     }

package/dist/collection/components/salla-placeholder/salla-placeholder.js

@@ -35,7 +35,7 @@ export class SallaPlaceholder {
         };
     }
     render() {
-        return (h(Host, { key: 'c1d7092a1bfdbf8e25595ef2205d7e5721f338ed', class: this.alignmentClass() }, h("div", { key: '85929e725cbd6e092b18038a240fbe0bda095648', class: `s-placeholder-icon s-placeholder-icon-${this.iconSize}`, innerHTML: this.icon }), h("div", { key: '773b9c9723a4542ca9518833ffad1470955a973b', class: "s-placeholder-title" }, h("slot", { key: 'c42d3d92f66cd5917952542360aacf936bde0d23', name: 'title' }, h("span", { key: '850e1a5abb42bbe69ea64d7c26f196d05fcf721d' }, salla.lang.get('common.elements.no_options')))), h("div", { key: '4f56988f2a84ab394f39ff931f5ac8858a010d1e', class: "s-placeholder-description" }, h("slot", { key: '886cae5311fa0ca5b763fb20ce9fe7c1845d4cab', name: 'description' }, h("span", { key: 'f0cb7f4c50a1449d12467aaa802d47abbb4e0e53' }, salla.lang.get('common.errors.empty_results'))))));
+        return (h(Host, { key: 'bb1e87ff964770b00667e5ba934e025a184056fe', class: this.alignmentClass() }, h("div", { key: '6a75cef023d5f1a719ebb8d91a8b2181e1635161', class: `s-placeholder-icon s-placeholder-icon-${this.iconSize}`, innerHTML: this.icon }), h("div", { key: 'cb68c4045df8dac84cd7c0626d9d8c322202e73d', class: "s-placeholder-title" }, h("slot", { key: '09f95446b63392eee020fa7d970e5387f83c4769', name: 'title' }, h("span", { key: 'b72e61aeabcc48fd5b3e14d76f4dcfab7c37703b' }, salla.lang.get('common.elements.no_options')))), h("div", { key: 'c9ba74e9a6dbe65c3e3d7994364182919bbbf3b0', class: "s-placeholder-description" }, h("slot", { key: '5441dc166551ead2f1386a58417d991fb62065f9', name: 'description' }, h("span", { key: 'd823d7f9bb6afa98df3307265b734ac06b3361ff' }, salla.lang.get('common.errors.empty_results'))))));
     }
     static get is() { return "salla-placeholder"; }
     static get originalStyleUrls() {

package/dist/collection/components/salla-price-range/salla-price-range.js

@@ -146,9 +146,9 @@ export class SallaPriceRange {
         this.maxPrice = value === undefined ? '' : value;
     }
     render() {
-        return (h(Host, { key: 'dc74966c1d2d9e5626b23db0a80b693fef047f41' }, this.filterValues.map((filterValue, index) => {
+        return (h(Host, { key: 'b03ebb94bc24463935ff1ef49872ebc85343276f' }, this.filterValues.map((filterValue, index) => {
             return h("label", { class: "s-filters-label", htmlFor: `${this.option.key}-${index}`, key: index }, h("input", { id: `${this.option.key}-${index}`, name: "price", type: "radio", checked: this.isChecked(filterValue), class: "s-filters-radio", onChange: e => this.handleMinMaxPrice(e, filterValue) }), h("span", { innerHTML: this.getPriceLabel(filterValue) }));
-        }), h("div", { key: 'b12dad0c27f3fbe9ad8a9c98b9bd1302388b35ef', class: "flex justify-center items-center" }, h("div", { key: 'e034058e195a94c2434e99c5b30b2e5909daff87', class: "relative max-w-xl w-full" }, h("div", { key: '4c59f5a3c8249717c4c6decbcdb63d97343bd871', class: "s-price-range-inputs" }, h("div", { key: '65de0733e3ce1ea7b37976f1d077d1f3192056c5', class: "s-price-range-relative" }, h("div", { key: 'ed842802aff5cd874e708c062aa79e8185d330f3', class: "s-price-range-currency" }, " ", salla.config.currency().symbol), h("input", { key: '78d020948e3edc4e53fff976fa8e00b2e6ac6868', type: "number", maxlength: "5", ref: el => this.minInput = el, onBlur: (e) => this.handleMinPrice(e), value: this.minPrice, placeholder: this.fromLabel, class: "s-price-range-number-input" })), h("div", { key: 'edfb3dd62b7898d4493a1adefeee20bdb305c89a', class: "s-price-range-gray-text" }, " -"), h("div", { key: 'f2227f09a344b8cc8c1160c23a6dbc9cd96cb260', class: "s-price-range-relative" }, h("div", { key: 'e528e7766eb7f6b9e0791116c87374441c73afe6', class: "s-price-range-currency" }, " ", salla.config.currency().symbol), h("input", { key: '6dda7a17097ae51c50c3d4aae290ce1b0369dcfa', type: "number", maxlength: "5", ref: el => this.maxInput = el, onBlur: (e) => this.handleMaxPrice(e), value: this.maxPrice, placeholder: this.toLabel, class: "s-price-range-number-input", "aria-describedby": "price-currency" })), h("salla-button", { key: '970d39060c565e7dc18e6a2039452a3b3df04082', color: 'gray', shape: 'icon', size: 'small', fill: 'outline', onClick: (event) => this.changedEventHandler(event) }, h("span", { key: 'da9b6ed688a64d624eedc3834ad3be47533c9dd5', innerHTML: this.isRTL ? arrowLeft : arrowRight })))))));
+        }), h("div", { key: '701869c55602ed0ef68d2a1495b76f2159cf8d9d', class: "flex justify-center items-center" }, h("div", { key: '956a0ca9ab38e364baa9c1e7427c428143de2d64', class: "relative max-w-xl w-full" }, h("div", { key: '454523dfd41c249bc3ee984d9ebc908e257da655', class: "s-price-range-inputs" }, h("div", { key: 'f0047855d712ce0c637da08e0b5087253a4fa2d4', class: "s-price-range-relative" }, h("div", { key: '79d5ca39cb0da6b31523ae69f2ea62a1d49f4eed', class: "s-price-range-currency" }, " ", salla.config.currency().symbol), h("input", { key: '5caa99eb839a0bfb651b7080fc51f8a99102380d', type: "number", maxlength: "5", ref: el => this.minInput = el, onBlur: (e) => this.handleMinPrice(e), value: this.minPrice, placeholder: this.fromLabel, class: "s-price-range-number-input" })), h("div", { key: '8df49030aa912e646a82a16b75416f5b86a54735', class: "s-price-range-gray-text" }, " -"), h("div", { key: '9c7eaa41986246f5d1e0f42c8f917c83643abf83', class: "s-price-range-relative" }, h("div", { key: '79de4f4520d63e038a51153372b1aabf729aeaff', class: "s-price-range-currency" }, " ", salla.config.currency().symbol), h("input", { key: '497d516b45de96f205021cace76604a04887aeb4', type: "number", maxlength: "5", ref: el => this.maxInput = el, onBlur: (e) => this.handleMaxPrice(e), value: this.maxPrice, placeholder: this.toLabel, class: "s-price-range-number-input", "aria-describedby": "price-currency" })), h("salla-button", { key: '3179fd8523d7aabe0a61f496752294416a02edd5', color: 'gray', shape: 'icon', size: 'small', fill: 'outline', onClick: (event) => this.changedEventHandler(event) }, h("span", { key: 'd3a4660e76c1baef73e24ff23d79622535d80cfc', innerHTML: this.isRTL ? arrowLeft : arrowRight })))))));
     }
     componentDidLoad() {
         this.isReady = true;

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

@@ -137,7 +137,7 @@ export class SallaProductAvailability {
         field.nextElementSibling['innerText'] = '* ' + errorMsg;
     }
     render() {
-        return (h(Host, { key: 'ccb098126e7809a6386ff38c74dfa0f00f64deeb', class: "s-product-availability-wrap" }, this.isSubscribedToProduct
+        return (h(Host, { key: '646195e9982d709d58b12eae7ee0649f85a76d93', class: "s-product-availability-wrap" }, this.isSubscribedToProduct
             ? h("div", { class: "s-product-availability-subscribed" }, h("span", { innerHTML: BellRingIcon, 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()));

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

@@ -136,14 +136,14 @@ export class SallaProductCard {
             's-product-card-out-of-stock': this.productData?.is_out_of_stock,
         };
         const hrefProp = this.productData?.url ? { href: this.productData.url, title: `Learn more about ${this.productData?.name}` } : {};
-        return (h(Host, { key: 'e0748a44b8e851c7aff3ee741a17dcb19dabfdaf', id: `product-${this.productData?.id}`, class: classes }, h("div", { key: '10cc1deb8384ad2bbe83263f82b257d5042cff8e', class: !this.fullImage ? 's-product-card-image' : 's-product-card-image-full' }, h("a", { key: 'd976cc14bb10c2d5fe6c55253ea051b8a57d7721', ...hrefProp }, h("img", { key: '9007014be0cb7adc56541e0b1e823fb4d6f92b84', class: `s-product-card-image-${salla.url.is_placeholder(this.productData?.image?.url)
+        return (h(Host, { key: 'd1564818d562c0fb87d85b91b8b555834d89dc97', id: `product-${this.productData?.id}`, class: classes }, h("div", { key: '207349279fc7c23f085aa6ac3b3d7ef35af1bf30', class: !this.fullImage ? 's-product-card-image' : 's-product-card-image-full' }, h("a", { key: '175253af991d2bc48ea0e325adf2e16bc6f9bb9d', ...hrefProp }, h("img", { key: 'f5d5effc090a5b47287e8c9fbb1b929335c73037', class: `s-product-card-image-${salla.url.is_placeholder(this.productData?.image?.url)
                 ? 'contain'
                 : this.fitImageHeight
                     ? this.fitImageHeight
-                    : 'cover'} lazy`, src: this.placeholder, alt: this.productData?.image?.alt || this.productData?.name, "data-src": this.productData?.image?.url || this.productData?.thumbnail }), !this.fullImage && !this.minimal ? this.getProductBadge() : ''), this.fullImage && h("a", { key: 'c101c02eeb4e0245fbcd713b0e83c81148e594c1', ...hrefProp, class: "s-product-card-overlay" }), !this.horizontal && !this.fullImage ?
-            h("salla-button", { shape: "icon", fill: "none", color: "light", loading: false, "aria-label": "Add or remove to wishlist", ref: el => this.wishlistBtn = el, class: "s-product-card-wishlist-btn animated", onClick: () => this.handleWishlistClick() }, h("span", { innerHTML: Heart })) : ''), h("div", { key: 'f02eaeabefd56d7b560dcd268e2b941cf843cc95', class: "s-product-card-content" }, this.isSpecial && this.productData?.quantity ?
+                    : 'cover'} lazy`, src: this.placeholder, alt: this.productData?.image?.alt || this.productData?.name, "data-src": this.productData?.image?.url || this.productData?.thumbnail }), !this.fullImage && !this.minimal ? this.getProductBadge() : ''), this.fullImage && h("a", { key: 'b8157ea9f720c219d4217b2a1f5c7d11c2093cae', ...hrefProp, class: "s-product-card-overlay" }), !this.horizontal && !this.fullImage ?
+            h("salla-button", { shape: "icon", fill: "none", color: "light", loading: false, "aria-label": "Add or remove to wishlist", ref: el => this.wishlistBtn = el, class: "s-product-card-wishlist-btn animated", onClick: () => this.handleWishlistClick() }, h("span", { innerHTML: Heart })) : ''), h("div", { key: 'fb21d4c6290a05721f10a30c1321d9f5558d7b41', class: "s-product-card-content" }, this.isSpecial && this.productData?.quantity ?
             h("div", { class: "s-product-card-content-pie", ref: pie => this.pie = pie }, h("span", null, h("b", null, salla.helpers.number(this.productData?.quantity)), this.remained), h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "-2 -1 36 34", class: "s-product-card-content-pie-svg" }, h("circle", { cx: "16", cy: "16", r: "15.9155", class: "s-product-card-content-pie-svg-base" }), h("circle", { cx: "16", cy: "16", r: "15.9155", class: "s-product-card-content-pie-svg-bar" })))
-            : '', h("div", { key: '9776564de24468852192dce1ff0db35cd6c533c3', class: { 's-product-card-content-main': true, 's-product-card-content-extra-padding': this.isSpecial } }, h("h3", { key: 'd78ea05cba95053f99495c5e8aeb59a9b66557c8', class: "s-product-card-content-title" }, h("a", { key: 'a8ba81e8ba7a4e59cf4c6bcb4370ea0965b82087', ...hrefProp }, this.getDisplayTitle())), this.productData?.subtitle && !this.minimal ?
+            : '', h("div", { key: 'fca467f3f2407870d9c203f1ba8533f15b01d180', class: { 's-product-card-content-main': true, 's-product-card-content-extra-padding': this.isSpecial } }, h("h3", { key: '34d89df8c8a1f8372ea53f1811b7246d27f36639', class: "s-product-card-content-title" }, h("a", { key: '24ff6f134a33ca108c3ff15649d7bee101fa3d2f', ...hrefProp }, this.getDisplayTitle())), this.productData?.subtitle && !this.minimal ?
             h("p", { class: "s-product-card-content-subtitle" }, this.productData?.subtitle)
             : ''), this.productData?.donation && !this.minimal && !this.fullImage ?
             [h("salla-progress-bar", { donation: this.productData?.donation }), h("div", { class: "s-product-card-donation-input" }, this.productData?.donation?.can_donate ?
@@ -152,7 +152,7 @@ export class SallaProductCard {
                                 this.addBtn.donatingAmount = e.target.value;
                             }, id: "donation-amount", name: "donating_amount", class: "s-form-control", placeholder: this.donationAmount })]
                     : '')]
-            : '', h("div", { key: '290e93db790c81a11e8d2edf3d215cec03edc965', class: { 's-product-card-content-sub': true, 's-product-card-content-extra-padding': this.isSpecial } }, this.getProductPrice(), this.showOutOfStockBesidePrice && this.productData?.is_out_of_stock ?
+            : '', h("div", { key: '10ee13faf57862712b3ce80d5ef6cb7b542090d9', class: { 's-product-card-content-sub': true, 's-product-card-content-extra-padding': this.isSpecial } }, this.getProductPrice(), this.showOutOfStockBesidePrice && this.productData?.is_out_of_stock ?
             h("span", { class: "s-product-card-out-of-stock-label" }, this.outOfStock)
             : '', this.productData?.rating?.stars && !this.minimal ?
             h("div", { class: "s-product-card-rating" }, h("span", { innerHTML: Star }), h("span", null, this.productData.rating.stars))

package/dist/collection/components/salla-product-card-embed/salla-product-card-embed.js

@@ -94,7 +94,7 @@ export class SallaProductCardEmbed {
             's-product-card-embed-card-align-right': this.align === 'right',
             's-product-card-embed-card-align-center': this.align === 'center',
         };
-        return (h(Host, { key: '3d9fb0dc8473e0959bbe13b4f8c8eea7a51830ea' }, this.hasError && h("span", { key: '25228d6d007d7dcda5e5767e14d2c363abfdab3e', class: "s-product-card-embed-fallback" }), h("div", { key: 'd66d592bfad1468b745f3a954c335f72ecda1e08', class: cardClasses, ref: (el) => {
+        return (h(Host, { key: 'd001e10a89c192004bfdfdcbeeb83d2d9c695d95' }, this.hasError && h("span", { key: '2c35003750483da3d17d6df0ee5add7a3aaf530b', class: "s-product-card-embed-fallback" }), h("div", { key: 'ff5743f1a26421488677a28503f448d410b49abb', class: cardClasses, ref: (el) => {
                 this.cardContainer = el;
             } })));
     }