@salla.sa/twilight-components 2.14.552 → 2.14.553

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

@@ -8,12 +8,17 @@ import LeftArrow from "../../assets/svg/arrow-left.svg";
 import Cancel from "../../assets/svg/cancel.svg";
 import GiftSharing from "../../assets/svg/gift-sharing.svg";
 import Alert from "../../assets/svg/alert.svg";
+import { appendOrderOptionsToPayload } from "../salla-order-options-modal/apple-pay-order-options";
 /**
  * @slot widget-btn-content - Used to customize widget button content.
  */
 export class SallaGifting {
     constructor() {
         this.defaultEvent = "gifting:open";
+        /** Order options picked in the pre-gift modal, sent as `order_options` with the gift payload. */
+        this.collectedOrderOptions = [];
+        /** Live PDP price, kept in sync by `onPriceUpdated`, used to seed the order-options total. */
+        this.livePrice = 0;
         this.selectImageForYourGift = salla.lang.get('blocks.buy_as_gift.select_image_for_your_gift');
         this.currentStep = 1;
         this.showCalendar = false;
@@ -156,10 +161,12 @@ export class SallaGifting {
         return null;
     }
     componentDidLoad() {
-        salla.event.product.onPriceUpdated(() => {
+        salla.event.product.onPriceUpdated((response) => {
             const quantityInput = document.querySelector(`.s-quantity-input-input`);
             // @ts-ignore
             this.quantity = quantityInput?.value;
+            // Seeds the order-options modal total so it reflects the current variant/quantity price.
+            this.livePrice = Number(response?.data?.price) || this.livePrice;
         });
     }
     getFormDataFromForm() {
@@ -184,6 +191,93 @@ export class SallaGifting {
         }
         return formData;
     }
+    /**
+     * Order-options gate. Two shapes, because the two gifting entry points already differ:
+     *
+     * - **Cart page**: the order-option forms are rendered inline and synced to the cart on change,
+     *   so gifting reuses the cart-submit check — block on invalid, never re-ask in a modal.
+     * - **PDP**: nothing renders the options, so they're collected in the shared
+     *   <salla-order-options-modal> *before* the gifting modal, the same modal and sequence the PDP
+     *   uses for Quick Purchase and Apple Pay.
+     *
+     * Returns false when the buyer must fix something first (invalid inline form, or a dismissed
+     * modal); the gifting modal then stays closed and they retry from the widget button.
+     */
+    async collectOrderOptions() {
+        this.collectedOrderOptions = [];
+        if (!this.productId) {
+            return this.validateInlineCartOptions();
+        }
+        const { products, basePrice } = this.getOrderOptionsTarget();
+        if (!products.length) {
+            return true;
+        }
+        let response;
+        try {
+            response = await salla.api.withoutNotifier(() => salla.product.api.getOrderOptions(products));
+        }
+        catch (error) {
+            salla?.logger?.warn?.('order-options: fetch failed', error);
+            return true;
+        }
+        const orderOptions = response?.data?.order_options || [];
+        if (!orderOptions.length) {
+            return true;
+        }
+        const price = basePrice > 0 ? basePrice : Number(response?.data?.products?.[0]?.price?.amount) || 0;
+        try {
+            const result = await this.ensureOrderOptionsModal().open({ orderOptions, basePrice: price });
+            this.collectedOrderOptions = result?.orderOptions || [];
+            return true;
+        }
+        catch {
+            // dismissed — keep the gifting modal closed.
+            return false;
+        }
+    }
+    /**
+     * Same check the theme runs on cart submit: every `form[id^="item-"]` (cart items *and* the
+     * inline order-option forms) must be valid. Values are already on the cart — each form syncs
+     * through `cart.updateItem` on change — so nothing is collected here, gifting is only blocked.
+     */
+    validateInlineCartOptions() {
+        const forms = document.querySelectorAll('form[id^="item-"]');
+        let isValid = true;
+        forms.forEach(form => {
+            if (!form.reportValidity()) {
+                isValid = false;
+            }
+        });
+        if (!isValid) {
+            salla.error(salla.lang.get('common.messages.required_fields'));
+        }
+        return isValid;
+    }
+    /** What to ask order options for on the PDP. `basePrice` seeds the modal's live total. */
+    getOrderOptionsTarget() {
+        return {
+            products: [{ id: this.productId, quantity: this.getGiftQuantity() }],
+            basePrice: this.livePrice,
+        };
+    }
+    /** `quantity` state is only seeded on price updates, so fall back to the product form. */
+    getGiftQuantity() {
+        const fromState = Number(this.quantity);
+        if (Number.isFinite(fromState) && fromState > 0) {
+            return fromState;
+        }
+        const fromForm = Number(this.getFormDataFromForm()?.get('quantity'));
+        return Number.isFinite(fromForm) && fromForm > 0 ? fromForm : 1;
+    }
+    /** Get-or-create the singleton order-options modal on <body>. */
+    ensureOrderOptionsModal() {
+        let modal = document.querySelector('salla-order-options-modal');
+        if (!modal) {
+            modal = document.createElement('salla-order-options-modal');
+            document.body.appendChild(modal);
+        }
+        return modal;
+    }
     /**
      * Show / Open the gifting modal window
     */
@@ -193,6 +287,12 @@ export class SallaGifting {
             salla.event.dispatch('login::open', { withoutReload: true });
             return;
         }
+        // Required customizations can't be bypassed by gifting: the order-options modal runs first, and
+        // dismissing it keeps the gifting modal closed. Runs here (not in the button handler) so the
+        // `gifting:open` event and the after-login re-entry go through the same gate.
+        if (!(await this.collectOrderOptions())) {
+            return;
+        }
         // Reopen on step 1, but KEEP the user's selections (image / text / custom
         // message / sender+receiver). The modal element is never destroyed, so its
         // state and DOM survive close→reopen without a page refresh — we only reset
@@ -697,6 +797,9 @@ export class SallaGifting {
             formData = this.getFormDataFromForm() || new FormData();
             formData = this.mergeObjectToFormData(giftPayload, formData);
         }
+        // PDP flow only — the cart flow's options are already on the cart, and the API keeps existing
+        // selections when the request carries no `order_options`.
+        appendOrderOptionsToPayload(formData ?? giftPayload, this.collectedOrderOptions);
         const addGiftMethod = this.productId
             ? () => salla.product.addProductGiftToCart(this.productId, formData, true)
             : () => salla.cart.addCartGiftToCart(giftPayload, true);
@@ -749,7 +852,7 @@ export class SallaGifting {
     }
     render() {
         return [
-            h("div", { key: '3795180f3f719218220086c66f6bfbe6e57dc1d4' }, h("salla-list-tile", { key: 'cb9fd3e10b02bb429b25c028fcd2d328e73eab6e', class: this.generateClass() }, h("div", { key: 'cca448eae1144b0606bf8f07844974cd7f966236', slot: "title" }, this.vertical ? h("span", { innerHTML: GiftSharing }) : '', h("h3", { key: 'c33210bdf1a72cdf0151138ce2949fc462efaf94' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: '007fc138265e6ab82dbdfab8169baa407b111e60', slot: "subtitle" }, h("div", { key: '89de9cc780511609d294f67a3d639a0305300b17' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: 'ea647e47079ab8e57580675f485bc99c2b213cd4', slot: "action" }, h("salla-button", { key: 'e87bcc03e5ab02204ca9f1d590421cae13282269', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: 'ce294391f8c18e345ec2117a15e2942dd00790fc', name: "widget-btn-content" }, h("div", { key: '7106257d9f44b869fcd3933ae8a1d2a50f4486dd', class: "s-gifting-widget-action-content" }, h("span", { key: '305822ae865b6da9275ced4600933d83d42e54e7', innerHTML: GiftSharing }), " \u00A0", h("span", { key: '13f2d03213e1fea9fe9911a94259b89085406ab3' }, this.sectionBtnText)))))), h("salla-modal", { key: 'b55185fbd34776043661ca6f15a739e34e98e0ef', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: '9f59cea6e2835d80e24bc269b78a5bc47b354f6a', slot: "loading" }, h("div", { key: '3f74f3384be120a0733e921de696d2beeccd49ce', class: "s-gifting-skeleton" }, h("div", { key: 'e3ffb5b8d712bc391ad6b4190556ac870e37db0c', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: 'b9b154ab445516fa1fae66cc458dd68114024d9d', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: '1ecf5c6ea1ebeccbd6ed7f259045647148863826', class: "s-gifting-modal-title" }, h("div", { key: '165d927a3bcaf47dd5c7657db8543ad02b47dc44', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: 'cba1667fa446566c5bc862c206313d8f48a0991e', height: '15px', width: '150px' })))), h("div", { key: 'f56f8e8820f789ca117a0e19cf660bc4d836ec6a', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: '74b8cec4be6e18ec8a1b340d8fed0b2d136bb1d3', height: '10px', width: '150px' }), h("salla-skeleton", { key: '5c615a0c0eb72908e601c2cfd28fe12a6391ef80', height: '230px' }), h("salla-skeleton", { key: '5c432b6e3f8c70574e1d05d26f57443ff5da45fe', height: '10px', width: '150px' }), h("salla-skeleton", { key: '7f5d7ec5cf3ef50f945e2a57363ac215e41f306b', height: '30px' }), h("salla-skeleton", { key: '47c0e823643dc9c2d4908dde353adf5b0e4355ad', height: '40px' })))), h("slot", { key: '3ad3a57a07cb8182e5cd86783ba19c8ae8f34d3b', name: "header" }), !!this.hasError ?
+            h("div", { key: 'fd15533a1dbb57c0bbf31d66046b7051b63221d7' }, h("salla-list-tile", { key: 'b6f298371176e3fc829a8f0a7de775adbc70f903', class: this.generateClass() }, h("div", { key: '46c0dfc5d7d89576d411b5765d92a72b3dd289ba', slot: "title" }, this.vertical ? h("span", { innerHTML: GiftSharing }) : '', h("h3", { key: 'd0b9bbd243458f9ea25aa7a970d3084d16ca56a8' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: '0ac470d3daa813ca8177e9f92c9c0eec402784b0', slot: "subtitle" }, h("div", { key: 'a783624dfe67959544cd70b3a087ccd004fb517f' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: 'd76689c03fdff0aa9ff50323227a191e8aa7aa11', slot: "action" }, h("salla-button", { key: '1516f29ca50b92f78a8f7e5a07daa9e70740dae9', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: '9d9b070b98e7a60736ca87347b0982a3034681a2', name: "widget-btn-content" }, h("div", { key: '4813d5f3bf85c3f5a0eefb5bd5478a009b6aceb2', class: "s-gifting-widget-action-content" }, h("span", { key: '738760ee256892c2f654ebae06877ca6cdaf0bec', innerHTML: GiftSharing }), " \u00A0", h("span", { key: 'bb181feda8126bd541517dabe107c44ab4da177a' }, this.sectionBtnText)))))), h("salla-modal", { key: '0d4478c6d9cf6bd1e75e81dca234c05af9303e0e', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: 'cea9b69f0af18a825f1cf4ac979fb571cc4b497f', slot: "loading" }, h("div", { key: '8190baa4b26d4de58ea98a4bd3662a54ca024e3a', class: "s-gifting-skeleton" }, h("div", { key: '6271ba338d1e85c5337f9b4956b2b0eb1c610669', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: '77fb7f73e5dd748b69c9ed7263e3cefc9b24d643', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: '4e436f8ad10aad25ffb84632973376855c0d803d', class: "s-gifting-modal-title" }, h("div", { key: '98c17840dd15e6d8495bd709a76d257001a3c2f3', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: '9582b325011b36f5dbb7bf70a044554e339af05a', height: '15px', width: '150px' })))), h("div", { key: 'd95d5c41fb226a654e62c183fcababcf1a1af9b5', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: '73ee2dd11f30ad370261a9b88324f40a52607973', height: '10px', width: '150px' }), h("salla-skeleton", { key: '8b07be46818f49401a5c7aae8a19de0445e9785e', height: '230px' }), h("salla-skeleton", { key: '6a7a9ff47ad18efdfc51d2c70dba6cf89c572974', height: '10px', width: '150px' }), h("salla-skeleton", { key: 'f033c20b65077bfa99fb302415e10ff55f2d112d', height: '30px' }), h("salla-skeleton", { key: '60bf4740d16b9cf852536315b62d1abafc14e4d5', height: '40px' })))), h("slot", { key: 'eac7b126556b6895457fdd0c87f15b872975947f', name: "header" }), !!this.hasError ?
                 h("salla-placeholder", { alignment: "center" }, h("span", { slot: "title" }, this.errorMessage || salla.lang.get('common.errors.empty_results')), h("span", { slot: "description" }, " "))
                 :
                     [
@@ -772,7 +875,7 @@ export class SallaGifting {
                             h("div", { class: this.step2ItemClass(this.errors?.['receiver.city_id'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { class: "s-form-label", htmlFor: `${this.hostId}-city` }, this.receiverCityFieldLabel), h("salla-searchable-dropdown", { placeholder: this.selectCity, items: this.displayedCities, selectedItem: this.selectedCity, loading: this.loadingCities, searching: this.searchingCities, disabled: this.loadingCities || (this.isKSA && !this.selectedRegionId), required: true, inputId: `${this.hostId}-city`, searchQuery: this.citySearchQuery, clientSearch: !this.enableCityAjaxSearch, dropUp: true, keepParentScroll: true, onItemSelected: (e) => this.handleCitySelected(e.detail), onSearchInput: (e) => this.handleCitySearch(e.detail), onDropdownClosed: () => this.handleCityDropdownClosed() }), this.errors && this.errors['receiver.city_id'] ?
                                 h("span", { class: "s-gifting-error" }, this.errors['receiver.city_id']) : ''), this.isPhysical() && this.cityNoticeText() &&
                             h("div", { class: this.step2ItemClass('s-gifting-info') }, h("span", { innerHTML: Alert }), h("span", null, this.cityNoticeText())), !this.isPhysical() && h("div", { class: this.step2ItemClass() }, h("label", { class: "s-gifting-schedule s-gifting-clickable", htmlFor: `schedule-${this.hostId}` }, h("input", { type: "checkbox", name: 'schedule', id: `schedule-${this.hostId}`, onChange: () => this.toggleCalendar(), class: "s-checkbox" }), h("span", { class: "s-form-label" }, " ", this.sendLater, " "))), h("div", { class: this.getCalendarClasses(), ref: (el) => this.calendarFormGroup = el }, h("label", { class: "s-form-label" }, this.selectSendDateAndTime), h("salla-datetime-picker", { value: this.deliveryDate, placeholder: this.selectSendDateAndTime, "enable-time": true, "date-format": "Y-m-d h:i K", onPicked: (event) => this.handleDateTimePicker(event) }), h("span", { class: "s-gifting-calendar-hint" }, this.canNotEditOrderAfterSelectDate)), h("div", { class: this.step2ItemClass('s-gifting-step-two-footer') }, !this.skipStep1() && h("a", { href: "#!", innerHTML: LeftArrow, onClick: (e) => this.goToStep1(e) }), h("salla-button", { onClick: () => this.submitForm(), color: "primary", width: 'wide' }, h("span", null, this.sendGift)))))
-                    ], h("slot", { key: '4b5e340be26e46c09508d192207fa6af9ec0cc44', name: "footer" })))
+                    ], h("slot", { key: '8f516d4a4275f867f0564ef7aa187fb2bcc1e32f', name: "footer" })))
         ];
     }
     static get is() { return "salla-gifting"; }

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

@@ -39,7 +39,9 @@ export class SallaScopees {
                     ? "blocks.scope.shopping_from_another_market"
                     : "blocks.scope.shopping_from_another_branch");
             }
-            return salla.lang.get('blocks.scope.search_for_availability_in_other_branches');
+            return salla.lang.get(isMultiCountries
+                ? 'blocks.scope.search_for_availability_in_other_markets'
+                : 'blocks.scope.search_for_availability_in_other_branches');
         };
         salla.event.on('scopes::open', ({ mode = null, product_id = null } = {}) => {
             this.open(mode, product_id);

package/dist/components/apple-pay-order-options.js

@@ -0,0 +1,86 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+/**
+ * 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
+    }
+}
+
+export { reportProductOptionsValiditySync as a, appendOrderOptionsToPayload as b, resolveApplePayOrderOptions as r };