@salla.sa/twilight-components 2.14.564 → 2.14.565

package/dist/collection/components/salla-multiple-bundle-product/components/salla-multiple-bundle-product-options-modal.js

@@ -472,7 +472,7 @@ export class SallaMultipleBundleProductOptionsModal {
         const cacheKey = this.generateCacheKey(this.sectionId, this.productIndex, productId);
         const resetToken = this.optionsResetTokens[cacheKey] || 0;
         const isDisabled = this.isLoading || optionsWithSelectedState.some(opt => opt.details.some(d => d.is_selected && d.is_out === true));
-        return (h(Host, { key: '610ae038d4f9db109e3f25830e82b39a2b07a010' }, h("salla-modal", { key: 'b06c130448cd1862d2e879a0285fd385395cc11b', isLoading: this.isLoading, ref: el => (this.modal = el), width: "md", centered: false, id: `s-multiple-bundle-product-options-modal-options-${productId}`, class: "s-multiple-bundle-product-options-modal-wrapper" }, h("div", { key: '1f8b9ffa80a40f8240ede4b8996943f7eecf4098', slot: "loading" }, h("salla-skeleton", { key: '26463b16022e1f66fd66f4e9cd8907521352bac1', height: "100%", width: "100%" })), this.product?.images && this.product?.images.length > 0 && (h("salla-slider", { key: 'bae60782cbe4ac7dc325fd666258198cd871a52e', id: `details-slider-${this.product?.id}`, type: "thumbs", loop: false, "auto-height": true, "listen-to-thumbnails-option": true, showThumbsControls: false, controlsOuter: false, showControls: false, class: "s-multiple-bundle-product-options-modal-slider", verticalThumbs: true, thumbsConfig: {
+        return (h(Host, { key: '71cd7074ae29781b4602f296fb145371435682ca' }, h("salla-modal", { key: '79b9f2cf7091b39cfab98ab746652ad2b033b08f', isLoading: this.isLoading, ref: el => (this.modal = el), width: "md", centered: false, id: `s-multiple-bundle-product-options-modal-options-${productId}`, class: "s-multiple-bundle-product-options-modal-wrapper" }, h("div", { key: '4b10a0f3ba203d1363600cefdc76a32990aedc59', slot: "loading" }, h("salla-skeleton", { key: 'f677228833290afc296d620cd9497baad34dee65', height: "100%", width: "100%" })), this.product?.images && this.product?.images.length > 0 && (h("salla-slider", { key: 'ffe3f9ef8ed671e44650f418103da2695d605815', id: `details-slider-${this.product?.id}`, type: "thumbs", loop: false, "auto-height": true, "listen-to-thumbnails-option": true, showThumbsControls: false, controlsOuter: false, showControls: false, class: "s-multiple-bundle-product-options-modal-slider", verticalThumbs: true, thumbsConfig: {
                 centeredSlides: true,
                 centeredSlidesBounds: true,
                 slidesPerView: Math.min(5, Math.max(1, this.product?.images.length)),
@@ -480,13 +480,13 @@ export class SallaMultipleBundleProductOptionsModal {
                 watchSlidesProgress: true,
                 direction: 'vertical',
                 spaceBetween: 10,
-            } }, h("div", { key: '998afc3297e89df7e0a6b2514a6d5f4f75152492', slot: "items" }, this.product?.images &&
+            } }, h("div", { key: 'b4f6109a323f44bf81b761126dd6f758f2c2b8ee', slot: "items" }, this.product?.images &&
             this.product?.images.map((image, index) => (h("div", { key: index, class: "swiper-slide" }, h("img", { src: image.url, alt: image.alt || `${this.product?.name} - Image ${index + 1}`, loading: "lazy", onError: e => {
                     e.target.style.display = 'none';
-                } }))))), this.product?.images && this.product?.images.length > 1 && (h("div", { key: '935a3d01a417926e904507d0a64da43c84924068', slot: "thumbs" }, this.product?.images &&
+                } }))))), this.product?.images && this.product?.images.length > 1 && (h("div", { key: '043af0b22934426e4620ad806901b0fed7eb5c84', slot: "thumbs" }, this.product?.images &&
             this.product?.images.map((image, index) => (h("div", { key: index, "data-caption": `${this.product?.name} - Image ${index + 1}` }, h("img", { src: image.url, loading: "eager", class: "s-multiple-bundle-product-options-modal-slider-thumb", title: `${this.product?.name} - ${index + 1}`, alt: image.alt || `${this.product?.name} - ${index + 1}`, onError: e => {
                     e.target.style.display = 'none';
-                } })))))))), h("salla-product-options", { options: JSON.stringify(optionsWithSelectedState), key: `${cacheKey}-reset-${resetToken}`, "product-id": productId, "unique-key": `${cacheKey}-reset-${resetToken}` }), h("div", { key: 'eeb710a27917f6134a2595ebb8e4ec485bb26254', slot: "footer" }, h("div", { key: '2ae3d47c461b68d61fcaa1d8f279ae6402aedf2e', class: "s-multiple-bundle-product-options-modal-footer" }, h("salla-button", { key: '436f64a89183f0e6d56b6800ad031449c49cc751', onClick: e => this.onSave(e), loading: this.isLoading, disabled: isDisabled }, this.isLoading
+                } })))))))), h("salla-product-options", { options: JSON.stringify(optionsWithSelectedState), key: `${cacheKey}-reset-${resetToken}`, "product-id": productId, "unique-key": `${cacheKey}-reset-${resetToken}` }), h("div", { key: '325d9a7377fd23125b6d07479e34b0dbbf2c0660', slot: "footer" }, h("div", { key: '4d4343f2f9b494a9aeeda85476e7d280456e1983', class: "s-multiple-bundle-product-options-modal-footer" }, h("salla-button", { key: 'e3fe347f9e9601e43a52552c6659b31db7d0e8d1', onClick: e => this.onSave(e), loading: this.isLoading, disabled: isDisabled }, this.isLoading
             ? salla.lang.get('common.elements.saving')
             : salla.lang.get('common.elements.save')))))));
     }

package/dist/collection/components/salla-multiple-bundle-product/components/salla-multiple-bundle-product-slider.js

@@ -134,7 +134,7 @@ export class SallaMultipleBundleProductSlider {
         }
     }
     render() {
-        return (h(Host, { key: 'e473b6089ee0e7026dfec042462ed827dabd0083' }, h("salla-slider", { key: '492187e1a1c105c21c48543aa227888d122cfa20', type: "carousel", controlsOuter: false, showControls: false, id: `accordion-multiple-bundle-product-${this.section.id}`, pagination: true, class: "s-multiple-bundle-product-wrapper-slider", sliderConfig: { spaceBetween: 0 } }, h("div", { key: 'e40e816439f3b3e1bee12ebdcea60438a45fec12', slot: "items" }, this?.section?.products?.map((product, productIndex) => {
+        return (h(Host, { key: 'f204b5fd21739cbc18656bd09d4cce81ed6e5e57' }, h("salla-slider", { key: 'd869a3633f17437edde3ce68fdcc365753eb612e', type: "carousel", controlsOuter: false, showControls: false, id: `accordion-multiple-bundle-product-${this.section.id}`, pagination: true, class: "s-multiple-bundle-product-wrapper-slider", sliderConfig: { spaceBetween: 0 } }, h("div", { key: 'c0e5fa3b6209a865672daafbab76d9ceed851e29', slot: "items" }, this?.section?.products?.map((product, productIndex) => {
             const isChecked = this.selectedProducts[this.section.id]?.has(product.id) || false;
             const isLocked = isChecked && this.isSelectionLocked;
             const isDisabled = this.isProductSelectionDisabled(product, isChecked);

package/dist/collection/components/salla-multiple-bundle-product/salla-multiple-bundle-product.js

@@ -82,7 +82,7 @@ export class SallaMultipleBundleProduct {
         this.parseProducts(this.bundleSections);
     }
     render() {
-        return (h(Host, { key: 'db7efe81ce29dd1bc45cc5f1dbd45b6b03e31de8', class: "s-multiple-bundle-product-wrapper" }, this.isCartPage() ? this.renderCartPage() : this.renderDetailsPage()));
+        return (h(Host, { key: 'ecd08de0b8221816bb4980b90790219ec954ed79', class: "s-multiple-bundle-product-wrapper" }, this.isCartPage() ? this.renderCartPage() : this.renderDetailsPage()));
     }
     static get is() { return "salla-multiple-bundle-product"; }
     static get originalStyleUrls() {

package/dist/collection/components/salla-notifications/salla-notification-item.js

@@ -4,7 +4,7 @@
 import { h } from "@stencil/core";
 export class SallaNotificationItem {
     render() {
-        return h("a", { key: '59f70f3078b1a7d47bcee6ccd2d472cb8e9e0823', href: this.notification.url, class: { "s-notifications-item": true, "s-notifications-item-shadow": true, "s-notifications-item-read": !this.notification.is_new } }, h("span", { key: '7cfde773f99fd97d2564bb76820fcdc10ddaf1c9', class: "s-notifications-item-icon" }, h("i", { key: 'c7ac49641200f8200d79d801626d819c2ad025d8', class: { 's-notifications-item-icon sicon-bell-ring': true, 's-notifications-item-icon-new': this.notification.is_new } })), h("div", { key: '7b20a3de69f26d62185121017904ea8b73acde6d', class: "s-notifications-item-content" }, h("div", { key: '03e8f73de33418b41ab3dcec65a6cf916edbf670', class: "s-notifications-item-content-leading" }, h("h4", { key: '94f21a0c414c97f647af33f8ec84d74ec91c6de6' }, this.notification.title), h("p", { key: 'b821d9ba8af890d9d3b96b58488ccfe33ae681a1' }, this.notification.sub_title)), h("span", { key: '5aed923cbcdd3b92178de4660b2940ca1fd1958a', class: "s-notifications-item-content-trailing" }, h("i", { key: '283ce5224c7de7ada8afffb9c3ef43bb17f91944', class: "sicon-time s-notifications-item-content-trailing-icon" }), h("span", { key: 'b868dc7ecde4155c9827d6ccb2b2ac919525c71b' }, this.notification.date))));
+        return h("a", { key: '0d54b85dc0781ce926f4154ac25c9232d4bdb736', href: this.notification.url, class: { "s-notifications-item": true, "s-notifications-item-shadow": true, "s-notifications-item-read": !this.notification.is_new } }, h("span", { key: '624a6beba8d6a32274a22bc9015ea0a44c319e30', class: "s-notifications-item-icon" }, h("i", { key: '883275b9325a07d224bbf37b168f8f5cf28c0dfd', class: { 's-notifications-item-icon sicon-bell-ring': true, 's-notifications-item-icon-new': this.notification.is_new } })), h("div", { key: '8f0a0df431db067ee8204b633fc10451172e767a', class: "s-notifications-item-content" }, h("div", { key: '34c9a9367ba0f2d4bb27f703db5ba19f0697dff0', class: "s-notifications-item-content-leading" }, h("h4", { key: '54d387aceff626bed03b67d7c55a61ebba9fb55a' }, this.notification.title), h("p", { key: '18e28bccb76b40d6739b088bfbc37cdf904e2c6d' }, this.notification.sub_title)), h("span", { key: '3461da85eced4d75961e78c6e3ceaea1ba3a5d5c', class: "s-notifications-item-content-trailing" }, h("i", { key: '28ae90038e79b5c847175f36dcbb569a784a3f99', class: "sicon-time s-notifications-item-content-trailing-icon" }), h("span", { key: '0ce393675fe07821d2810545e756d0eb05d76866' }, this.notification.date))));
     }
     static get is() { return "salla-notification-item"; }
     static get originalStyleUrls() {

package/dist/collection/components/salla-offer-modal/salla-offer-modal.js

@@ -205,7 +205,7 @@ export class SallaOfferModal {
     //       '</div>';
     //   }
     render() {
-        return h("salla-modal", { key: '570466318b6cd66a7a8b3dd0d80424c2fd73328d', "has-skeleton": true, "sub-title": this.offer_message, ref: modal => this.modal = modal, isLoading: true, class: `s-offer-modal-type-${this.offer_type ? this.offer_type : ''}` }, h("div", { key: 'ded0c8df17d5e5c1d6e77b8e1be469e69d3ee12f', slot: 'loading' }, h("div", { key: 'fc96c54fcecc896b3e5a1838e2d07d545fce2f85', class: "s-offer-modal-skeleton" }, h("div", { key: 'ee7a6f25aabbf4263b43fc7545bbb2c7bfca9b3a', class: "s-offer-modal-skeleton-header" }, h("salla-skeleton", { key: '9604f5f33d1d8e074cc3c314addb945b087431ee', type: 'circle', height: '80px', width: '80px' }), h("salla-skeleton", { key: '65194ecfee0a01f7c38aa72f7ce2c8c81c893b1f', height: '15px', width: '50%' }), h("salla-skeleton", { key: '21d466bf32f435a511dcece76f51f4052089c130', height: '10px', width: '30%' })), h("div", { key: '53fb44c7c60ca8236dc7ec60ff65cb71df39c03b', class: "s-offer-modal-skeleton-items" }, [...Array(3)].map(() => h("div", { class: "s-offer-modal-skeleton-item" }, h("salla-skeleton", { height: '9rem' }), h("div", { class: "s-offer-modal-skeleton-item-title" }, h("salla-skeleton", { height: '15px', width: '100%' })), h("div", { class: "s-offer-modal-skeleton-item-subtitle" }, h("salla-skeleton", { height: '9px', width: '50%' }), h("div", { innerHTML: Cart2 }))))), h("div", { key: '52ad47514b0c00b73ec7d98073b09d21ce6a2b12', class: "s-offer-modal-skeleton-footer" }, h("salla-skeleton", { key: 'a271e30ab34d96731cc1f51c32cba9aaefee1953', height: '15px', width: '50%' }), h("salla-skeleton", { key: '6e199a5b1283c9d82588c60c712d3799b88c5c8d', height: '15px', width: '30%' })))), !this.hasError && this.offer !== null
+        return h("salla-modal", { key: 'fc50768aeae326779fc8321f98be591f19694877', "has-skeleton": true, "sub-title": this.offer_message, ref: modal => this.modal = modal, isLoading: true, class: `s-offer-modal-type-${this.offer_type ? this.offer_type : ''}` }, h("div", { key: '0acb2bcfd86d7c43ffb806d9ef1c60ddf6babbe3', slot: 'loading' }, h("div", { key: '9d71931ba0fe2da318b111938f8df049c8bcba3f', class: "s-offer-modal-skeleton" }, h("div", { key: '2c56879682a5587f895b98122b11f7ac9b854277', class: "s-offer-modal-skeleton-header" }, h("salla-skeleton", { key: '58fcd5fe1bacde1f1bc289142821dbf2b98936ea', type: 'circle', height: '80px', width: '80px' }), h("salla-skeleton", { key: '2ff2cf01d0423560b51a4a1ca1cb5957aad07571', height: '15px', width: '50%' }), h("salla-skeleton", { key: '879bc41293537d830604d056328a5390d1f83677', height: '10px', width: '30%' })), h("div", { key: 'c56c86160c0aa8cb9bab302adac0bb3ce6f0b544', class: "s-offer-modal-skeleton-items" }, [...Array(3)].map(() => h("div", { class: "s-offer-modal-skeleton-item" }, h("salla-skeleton", { height: '9rem' }), h("div", { class: "s-offer-modal-skeleton-item-title" }, h("salla-skeleton", { height: '15px', width: '100%' })), h("div", { class: "s-offer-modal-skeleton-item-subtitle" }, h("salla-skeleton", { height: '9px', width: '50%' }), h("div", { innerHTML: Cart2 }))))), h("div", { key: '7ae342a4e8bcb1acb104a7faaa51591453342446', class: "s-offer-modal-skeleton-footer" }, h("salla-skeleton", { key: '064b069c56f8db50b508382f7a1b3d40aa929faf', height: '15px', width: '50%' }), h("salla-skeleton", { key: 'b8da7d4dea95f74e68954b69866f3e0c4c5d04c1', height: '15px', width: '30%' })))), !this.hasError && this.offer !== null
             ? [h("span", { slot: 'icon', class: "s-offer-modal-header-icon", innerHTML: SpecialDiscountIcon }), this.getOfferContent(), h("div", { class: "s-offer-modal-footer", slot: "footer" }, this.offer.formatted_date ?
                     h("p", { class: "s-offer-modal-expiry" }, salla.lang.get('pages.products.offer_expires_in'), " ", this.offer.formatted_date)
                     : '', h("label", { class: "s-offer-modal-remember-label" }, h("input", { type: "checkbox", onChange: e => this.rememberMe(e), class: "s-offer-modal-remember-input" }), "\u00A0 ", salla.lang.get('common.elements.remember_my_choice'))),

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

@@ -36,7 +36,7 @@ export class SallaOrderDetails {
         ];
     }
     render() {
-        return h(Host, { key: 'ffa22cae6c347b5acbe4836378f1f3843184e8f5', class: "s-order-details-wrapper" }, this.renderOrderDetailsContent());
+        return h(Host, { key: 'e8b12f8b36be50c66228e19e77b81843c4b827c5', class: "s-order-details-wrapper" }, this.renderOrderDetailsContent());
     }
     static get is() { return "salla-order-details"; }
     static get originalStyleUrls() {

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

@@ -24,7 +24,7 @@ export class SallaOrderEditProductCard {
         const product = this.productData;
         const productName = product?.name || salla.lang.getWithDefault('common.elements.product', 'منتج');
         const price = product?.price;
-        return (h(Host, { key: '7669432a4756da446e16d9a3093a067767c5dd9d' }, h("button", { key: 'd998dde2a1dc4eae7444fd398910c3a0699730f8', type: "button", class: "s-order-edit-product-card", onClick: () => this.handleSelectProduct() }, h("div", { key: '6a0e6eec84de332598d94be87b49564eeb2cfbc2', class: "s-order-edit-product-card-media" }, product?.image?.url ? (h("img", { src: product.image.url, alt: product.image.alt || productName, class: "s-order-edit-product-card-image" })) : (h("div", { class: "s-order-edit-product-card-placeholder" }, h("i", { class: "sicon-shopping-bag" })))), h("div", { key: '4eeb9f7430c19f8e792b0f6856fb86a2f265eb95', class: "s-order-edit-product-card-content" }, h("h3", { key: '840ae549097a53f1f297673d69e3155792a4097e', class: "s-order-edit-product-card-title" }, productName), price != null && (h("p", { key: '32732854ca599fe446d0b47883b892ac17d90cae', class: "s-order-edit-product-card-price", innerHTML: salla.money(price) }))))));
+        return (h(Host, { key: 'cb68716bd8c67c7387a1e71c0f790dc55bf9732b' }, h("button", { key: '0d5ef4b53adc4b1c8603fc740f955305837225d9', type: "button", class: "s-order-edit-product-card", onClick: () => this.handleSelectProduct() }, h("div", { key: '1647a427de88c2cffadba8087152427a4e95a8e2', class: "s-order-edit-product-card-media" }, product?.image?.url ? (h("img", { src: product.image.url, alt: product.image.alt || productName, class: "s-order-edit-product-card-image" })) : (h("div", { class: "s-order-edit-product-card-placeholder" }, h("i", { class: "sicon-shopping-bag" })))), h("div", { key: 'ab896eef117fb28e660af1957986c1dc4fe17b54', class: "s-order-edit-product-card-content" }, h("h3", { key: '2eba7becf3c53c636d66e01809b44cd4854c27f1', class: "s-order-edit-product-card-title" }, productName), price != null && (h("p", { key: '46743b4a67f933d7219d88259396a396c6dd5d87', class: "s-order-edit-product-card-price", innerHTML: salla.money(price) }))))));
     }
     static get is() { return "salla-order-edit-product-card"; }
     static get originalStyleUrls() {

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

@@ -46,9 +46,13 @@ export function appendOrderOptionsToPayload(data, 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).
+ * Fetch order options plus any free offer products and, if there is anything to collect, run the
+ * modal in apple-pay mode. Callbacks drive the caller's pre-created session:
+ * `beginPendingSession` (nothing to collect), `discardPendingSession` (something found — the
+ * modal's AP button starts a fresh one), `onSubmit` (submitted).
+ *
+ * The modal puts the Apple Pay button on whichever step is genuinely last, so a store with gifts
+ * but no order options still ends on the payment sheet instead of a dead Continue button.
  */
 export async function resolveApplePayOrderOptions(opts) {
     let resp;
@@ -60,8 +64,12 @@ export async function resolveApplePayOrderOptions(opts) {
         opts.beginPendingSession();
         return;
     }
-    const items = resp?.data?.order_options || [];
-    if (!items.length) {
+    const orderItems = resp?.data?.order_options || [];
+    // advance_free_product is a LIST (one entry per qualifying offer), or null. Reading `.options`
+    // off it treats the array as an object and yields undefined, which silently skipped every gift.
+    const freeProducts = (Array.isArray(resp?.data?.advance_free_product) ? resp.data.advance_free_product : [])
+        .filter((entry) => Array.isArray(entry?.options) && entry.options.length);
+    if (!orderItems.length && !freeProducts.length) {
         opts.beginPendingSession(); // begin() doesn't need a fresh gesture
         return;
     }
@@ -72,7 +80,8 @@ export async function resolveApplePayOrderOptions(opts) {
     const modal = ensureOrderOptionsModal();
     try {
         await modal.open({
-            orderOptions: items,
+            orderOptions: orderItems,
+            freeProducts,
             basePrice,
             paymentMode: 'apple-pay',
             onSubmit: opts.onSubmit,

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

@@ -0,0 +1,49 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+/**
+ * Rewrite a cart-add payload from the flat single-product shape into the products[] shape, so
+ * the main product and every configured free product are added in one request:
+ *
+ *   id=X&quantity=N
+ *     ↓
+ *   products[0][id]=X&products[0][quantity]=N
+ *   products[1][id]=Y₁&products[1][quantity]=1&products[1][options][o₁]=v₁
+ *   products[2][id]=Y₂&products[2][quantity]=2&products[2][options][o₂]=v₂
+ *
+ * X has to move into products[0] rather than being left as a bare `id`, otherwise the gifts are
+ * the only entries in the array. Bracket-notation string keys, not nested objects: the payload
+ * may be backed by FormData (which stringifies anything non-scalar to "[object Object]"), and
+ * MiniCheckoutRequest::prepareForValidation() expands these keys back into nested arrays.
+ *
+ * Only the payload is touched — `data.id`, which builds the request URL, is left alone.
+ */
+export function injectFreeProductsIntoPayload(payload, freeProducts) {
+    if (!payload || !freeProducts?.length)
+        return;
+    // Two payload shapes reach this: the cart's FormDataWrapper (get/set/delete) from
+    // `cart::before.add.item`, and the plain object `getElementSallaData()` hands the Apple Pay
+    // flow. Normalize the three accessors so both work — a `set?.()` on a bare object would
+    // silently no-op and drop every gift.
+    const hasApi = typeof payload.set === 'function';
+    const get = (k) => (hasApi ? payload.get?.(k) : payload[k]);
+    const set = (k, v) => { hasApi ? payload.set(k, v) : (payload[k] = v); };
+    const del = (k) => { hasApi ? payload.delete?.(k) : delete payload[k]; };
+    // Read before deleting — X's own id/quantity become products[0].
+    const mainId = get('id');
+    const mainQty = get('quantity') || '1';
+    if (mainId) {
+        del('id');
+        del('quantity');
+        set('products[0][id]', String(mainId));
+        set('products[0][quantity]', String(mainQty));
+    }
+    freeProducts.forEach((free, index) => {
+        const slot = mainId ? index + 1 : index;
+        set(`products[${slot}][id]`, String(free.productId));
+        set(`products[${slot}][quantity]`, String(free.quantity));
+        Object.entries(free.options).forEach(([optionId, value]) => {
+            set(`products[${slot}][options][${optionId}]`, String(value));
+        });
+    });
+}

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

@@ -4,7 +4,12 @@
 /**
  * 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.
+ *
+ * CP-2836: also handles advance_free_product — a LIST of free offer products (one entry per
+ * qualifying offer, priority-ordered and capped by the store's offers limit). Each gets its own
+ * wizard step, and every configured one is injected into the mini-checkout payload.
  */
+import { injectFreeProductsIntoPayload } from "./free-product-payload";
 const PRODUCT_FORM_SELECTOR = 'form.product-form';
 export class OrderOptionsGate {
     constructor(host, productId) {
@@ -67,8 +72,14 @@ export class OrderOptionsGate {
             return;
         }
         widget.classList.remove('s-add-product-button-busy');
-        const items = resp?.data?.order_options || [];
-        if (!items.length) {
+        const orderItems = resp?.data?.order_options || [];
+        // Null when the store setting is off or no offer qualifies; otherwise a list of
+        // { product, options, offer_name, quantity } entries.
+        const advFreeProduct = resp?.data?.advance_free_product;
+        const freeProducts = (Array.isArray(advFreeProduct) ? advFreeProduct : [])
+            .filter((entry) => Array.isArray(entry?.options) && entry.options.length);
+        // Nothing to collect — proceed straight to checkout.
+        if (!orderItems.length && !freeProducts.length) {
             this.resumeWidget(widget);
             return;
         }
@@ -77,8 +88,12 @@ export class OrderOptionsGate {
             : 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 || []);
+            const result = await modal.open({
+                orderOptions: orderItems,
+                freeProducts,
+                basePrice,
+            });
+            this.injectIntoMini(result?.orderOptions || [], result?.freeProducts || []);
             this.resumeWidget(widget);
         }
         catch {
@@ -97,16 +112,26 @@ export class OrderOptionsGate {
         }
         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)
+    /**
+     * Inject collected options into the next cart-add payload via `cart::before.add.item` (one-shot).
+     *
+     * Order options → set as `order_options` on the existing payload wrapper.
+     * Free products → the payload is rewritten into the products[] shape; see
+     *                 ./free-product-payload for the exact mapping and why.
+     */
+    injectIntoMini(orderOptions, freeProducts) {
+        if (!orderOptions.length && !freeProducts.length)
             return;
         const productId = this.productId;
         const onceHandler = (eventData) => {
             if (String(eventData?.id) !== String(productId))
                 return;
             try {
-                eventData?.payload?.set?.('order_options', orderOptions);
+                const payload = eventData?.payload;
+                if (orderOptions.length) {
+                    payload?.set?.('order_options', orderOptions);
+                }
+                injectFreeProductsIntoPayload(payload, freeProducts);
             }
             finally {
                 salla.event.off('cart::before.add.item', onceHandler);

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

@@ -1,4 +1,5 @@
-/*!twlt*//*
+/*!twlt*/@charset "UTF-8";
+/*
 * Salla Order Options Modal: popup modal that collects cart-level order options
 * before the fast-checkout widget creates the cart via /mini.
 */
@@ -8,6 +9,174 @@
   text-align: start !important;
 }
 
+.s-order-options-modal-host.s-oom-wizard-modal .s-modal-title {
+  display: none;
+}
+.s-order-options-modal-host.s-oom-wizard-modal .s-modal-header-inner {
+  flex: 1;
+  min-width: 0;
+}
+.s-order-options-modal-host.s-oom-wizard-modal .s-modal-header-content {
+  display: none;
+}
+
+.s-oom-steps {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0;
+}
+
+.s-oom-step {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.75rem 0.375rem 0.625rem;
+  border-radius: 9999px;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+  color: #9ca3af;
+  background: transparent;
+  border: 1.5px solid #e5e7eb;
+  transition: background 0.2s, color 0.2s, border-color 0.2s;
+}
+.s-oom-step.active {
+  background: #1a2533;
+  color: #ffffff;
+  border-color: #1a2533;
+}
+.s-oom-step.active .s-oom-step-num {
+  background: rgba(255, 255, 255, 0.2);
+  color: #ffffff;
+}
+.s-oom-step.done {
+  color: #6b7280;
+  border-color: #d1d5db;
+}
+
+.s-oom-step-num {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 50%;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  background: #e5e7eb;
+  color: #6b7280;
+  flex-shrink: 0;
+}
+
+.s-oom-step-label {
+  font-size: 0.8125rem;
+}
+
+.s-oom-connector {
+  flex: 1;
+  max-width: 3rem;
+  height: 0;
+  border-top: 1.5px dashed #d1d5db;
+}
+
+.s-oom-free-product-card {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  margin-bottom: 1rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.75rem;
+  background: #f9fafb;
+  /* No direction override — inherits RTL/LTR from the page.
+     Image is first in DOM so it sits at inline-start:
+       RTL → image on the right, text to its left
+       LTR → image on the left, text to its right */
+}
+
+.s-oom-free-product-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+  flex: 1;
+}
+
+.s-oom-free-product-tags {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.s-oom-free-product-name {
+  font-size: 0.9375rem;
+  font-weight: 700;
+  color: #111827;
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.s-oom-free-badge {
+  display: inline-block;
+  padding: 0.125rem 0.5rem;
+  border-radius: 9999px;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: #059669;
+  background: #d1fae5;
+  align-self: flex-start;
+}
+
+.s-oom-free-offer-name {
+  display: inline-block;
+  padding: 0.125rem 0.5rem;
+  border-radius: 9999px;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  color: #6b7280;
+  background: #f3f4f6;
+  align-self: flex-start;
+}
+
+.s-oom-free-product-thumb {
+  width: 3.5rem;
+  height: 3.5rem;
+  object-fit: cover;
+  border-radius: 0.5rem;
+  flex-shrink: 0;
+  border: 1px solid #e5e7eb;
+}
+
+.s-order-options-modal-body {
+  padding-top: 0.25rem;
+  max-height: 60vh;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+.s-order-options-modal-subtitle {
+  font-size: 0.875rem;
+  color: #6b7280;
+  margin-bottom: 1rem;
+  text-align: start;
+}
+.s-order-options-modal-cta-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  width: 100%;
+}
+.s-order-options-modal-cta-text {
+  flex: 1;
+  text-align: center;
+}
 .s-order-options-modal-apple-pay {
   display: block;
   width: 100%;
@@ -33,51 +202,59 @@
   font-weight: 700;
   color: #111827;
 }
-.static {
-  position: static;
+
+.s-oom-cta-arrow {
+  font-size: 0.875rem;
+  flex-shrink: 0;
 }
-.block {
-  display: block;
+.static{
+  position: static;
 }
-.hidden {
+.hidden{
   display: none;
 }
-.shadow {
+.shadow{
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.s-order-options-modal-body {
+.filter{
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+.s-order-options-modal-body{
   display: block;
+  max-height: 60vh;
+  overflow-y: auto;
+  overscroll-behavior: contain;
 }
-.s-order-options-modal-subtitle {
+.s-order-options-modal-subtitle{
   margin-bottom: 1rem;
   font-size: 0.875rem;
   line-height: 1.5rem;
   --tw-text-opacity: 1;
   color: rgb(75 85 99 / var(--tw-text-opacity, 1));
 }
-.s-order-options-modal-fields {
+.s-order-options-modal-fields{
   display: flex;
   flex-direction: column;
   gap: 1rem;
 }
-.s-order-options-modal-item {
+.s-order-options-modal-item{
   display: block;
 }
-.s-order-options-modal-footer {
+.s-order-options-modal-footer{
   display: flex;
   width: 100%;
   align-items: center;
 }
-.s-order-options-modal-cta-content {
+.s-order-options-modal-cta-content{
   display: flex;
   align-items: center;
   gap: 0.25rem;
 }
-.s-order-options-modal-cta-text {
+.s-order-options-modal-cta-text{
   font-weight: 700;
 }
-.s-order-options-modal-cta-total {
+.s-order-options-modal-cta-total{
   font-weight: 700;
 }