@salla.sa/twilight-components 2.14.591 → 2.14.593

package/dist/collection/components/salla-add-product-button/salla-add-product-button.css

@@ -7,36 +7,88 @@ salla-add-product-button[width=wide] {
 }
 
 
+/* Buy-now redirect button: copy of salla-mini-checkout-widget's button CSS, same theme vars. */
+.s-add-product-button-buy-now {
+  display: block;
+  font-family: 'PingARLT';
+  font-weight: normal;
+}
+
+.s-add-product-button-buy-now .s-fast-checkout-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--salla-fast-checkout-button-height, 2.5rem);
+  width: var(--salla-fast-checkout-button-width, 100%);
+  border-radius: var(--salla-fast-checkout-button-border-radius, 0.375rem);
+  font-size: 0.875rem;
+  font-weight: bold;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: all 0.3s ease-in-out;
+  border: none;
+  font-family: 'PingARLT';
+  gap: 5px;
+  direction: ltr;
+  border-width: 1px;
+  border-color: var(--color-primary);
+  background-color: var(--color-primary);
+  color: var(--color-primary-reverse);
+  /* The widget's button sits in shadow DOM, out of the theme's preflight reset; keep the browser defaults it gets. */
+  padding: 1px 6px;
+  line-height: normal;
+  letter-spacing: normal;
+  /* The theme's Tailwind `.outline` utility (outline-style: solid) hits the `outline` class; the widget is shielded by shadow DOM. */
+  outline: none;
+}
+
+.s-add-product-button-buy-now .s-fast-checkout-button:focus-visible {
+  outline: auto;
+}
+
+.s-add-product-button-buy-now .s-fast-checkout-button:hover {
+  background-color: var(--color-primary);
+}
+
+.s-add-product-button-buy-now .s-fast-checkout-button.outline {
+  background-color: transparent;
+  border: 1px solid var(--color-primary);
+  color: var(--color-primary);
+}
+
+.s-add-product-button-buy-now .s-fast-checkout-button.rtl {
+  flex-direction: row-reverse;
+}
+
+.s-add-product-button-buy-now .s-fast-checkout-button:disabled {
+  cursor: progress;
+  opacity: 0.7;
+}
+
 .sticky {
   position: sticky;
 }
 
-
 .hidden {
   display: none;
 }
 
-
 .w-full {
   width: 100%;
 }
 
-
 .outline {
   outline-style: solid;
 }
 
-
 .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-hidden {
   display: none;
 }
 
-
 .btn {
   display: inline-flex;
   flex: 1 1 0%;
@@ -56,17 +108,14 @@ salla-add-product-button[width=wide] {
   transition-duration: 300ms;
 }
 
-
 .btn:hover {
   opacity: 0.8;
 }
 
-
 .s-hidden {
   display: none;
 }
 
-
 .s-add-product-button-sr-only {
   position: absolute;
   width: 1px;
@@ -79,12 +128,10 @@ salla-add-product-button[width=wide] {
   border-width: 0;
 }
 
-
 .s-add-product-button-with-quick-buy {
   display: flex;
 }
 
-
 @media (min-width: 640px) {
 
   .s-add-product-button-with-quick-buy {
@@ -92,19 +139,16 @@ salla-add-product-button[width=wide] {
   }
 }
 
-
 .s-add-product-button-with-quick-buy:not(.s-add-product-button-with-sticky-bar) {
   flex-direction: column !important;
 }
 
-
 .s-add-product-button-main {
   display: flex;
   width: 66.666667%;
   column-gap: 0.375rem;
 }
 
-
 @media (min-width: 640px) {
 
   .s-add-product-button-main {
@@ -113,12 +157,10 @@ salla-add-product-button[width=wide] {
   }
 }
 
-
 .s-add-product-button-with-sticky-bar salla-quick-buy {
   width: 33.333333%;
 }
 
-
 @media (min-width: 640px) {
 
   .s-add-product-button-with-sticky-bar salla-quick-buy {
@@ -126,33 +168,27 @@ salla-add-product-button[width=wide] {
   }
 }
 
-
 .s-add-product-button-with-quick-buy:not(.s-add-product-button-with-sticky-bar) .s-add-product-button-main {
   width: 100%;
 }
 
-
 .s-add-product-button-with-quick-buy:not(.s-add-product-button-with-apple-pay) .s-add-product-button-main {
   width: 100%;
 }
 
-
 .s-add-product-button-main:not(.w-full) > salla-button {
   width: 50% !important;
 }
 
-
 .s-add-product-button-main .s-add-product-button-mini-checkout {
   --salla-fast-checkout-button-border-radius: .75rem;
   width: 50%;
 }
 
-
 .s-add-product-button-with-sticky-bar {
   width: 100% !important;
 }
 
-
 @media (min-width: 640px) {
 
   .s-add-product-button-with-sticky-bar {
@@ -160,12 +196,10 @@ salla-add-product-button[width=wide] {
   }
 }
 
-
 .s-add-product-button-with-apple-pay {
   column-gap: 0.375rem;
 }
 
-
 @media (min-width: 640px) {
 
   .s-add-product-button-with-apple-pay {
@@ -173,17 +207,14 @@ salla-add-product-button[width=wide] {
   }
 }
 
-
 .s-add-product-button-with-apple-pay:not(.s-add-product-button-with-sticky-bar) salla-quick-buy apple-pay-button {
   margin-top: 0.625rem;
 }
 
-
 .s-add-product-button-with-sticky-bar salla-quick-buy .s-quick-buy-button .s-button-text span {
   display: none;
 }
 
-
 @media (min-width: 768px) {
 
   .s-add-product-button-with-sticky-bar salla-quick-buy .s-quick-buy-button .s-button-text span {
@@ -191,7 +222,6 @@ salla-add-product-button[width=wide] {
   }
 }
 
-
 .s-add-product-button-mini-checkout-content {
   display: flex;
   flex-shrink: 0;
@@ -200,7 +230,6 @@ salla-add-product-button[width=wide] {
   font-size: .8rem;
 }
 
-
 @media (min-width: 640px) {
 
   .s-add-product-button-mini-checkout-content {
@@ -209,12 +238,10 @@ salla-add-product-button[width=wide] {
   }
 }
 
-
 .s-add-product-button-mini-checkout-content:where([dir="rtl"], [dir="rtl"] *) {
   flex-direction: row-reverse;
 }
 
-
 .s-add-product-button-mini-checkout-content svg {
   margin-right: 0.375rem;
   height: 1rem;
@@ -222,19 +249,16 @@ salla-add-product-button[width=wide] {
   fill: currentColor;
 }
 
-
 .s-add-product-button-mini-checkout-content svg:where([dir="rtl"], [dir="rtl"] *) {
   margin-right: 0px;
   margin-left: 0.375rem;
 }
 
-
 .s-add-product-button-busy {
   pointer-events: none;
   position: relative;
 }
 
-
 .s-add-product-button-busy::after {
   position: absolute;
   top: 50%;
@@ -248,7 +272,6 @@ salla-add-product-button[width=wide] {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-
 @keyframes spin {
 
   to {
@@ -257,7 +280,6 @@ salla-add-product-button[width=wide] {
   }
 }
 
-
 .s-add-product-button-busy::after {
   animation: spin 1s linear infinite;
   border-radius: 9999px;

package/dist/collection/components/salla-add-product-button/salla-add-product-button.js

@@ -6,12 +6,19 @@ import Cart from "../../assets/svg/cart.svg";
 // import SallaIcon from '../../assets/svg/salla.svg';
 import WalletIcon from "../../assets/svg/full-wallet.svg";
 import Helper from "../../Helpers/Helper";
-import { canCompleteApplePay } from "@salla.sa/applepay/src/apple-pay-support";
+import { canCompleteApplePay, isApplePayHostedRedirect } from "@salla.sa/applepay/src/apple-pay-support";
 import { OrderOptionsGate } from "../salla-order-options-modal/order-options-gate";
 import { FastCheckoutGate } from "../salla-bullet-delivery/fast-checkout-gate";
+import { appendOrderOptionsToPayload, ensureOrderOptionsModal } from "../salla-order-options-modal/apple-pay-order-options";
+import { injectFreeProductsIntoPayload } from "../salla-order-options-modal/free-product-payload";
 export class SallaAddProductButton {
     constructor() {
         this.hostAttributes = {};
+        this.buyNowBusy = false;
+        /** Latest buy-now click; an older click still waiting on Bullet Delivery drops out. */
+        this.buyNowToken = 0;
+        this.buyNowLastClick = 0;
+        this.buyNowLivePrice = 0;
         /**
          * Has Pre Order
          */
@@ -26,6 +33,7 @@ export class SallaAddProductButton {
         this.productType = 'product';
         this.selectedOptions = [];
         this.buyNowText = salla.lang.get('pages.products.buy_now');
+        this.buyNowLoading = false;
         /** Use matchMedia instead of window.innerWidth to avoid forced reflow (Lighthouse/PageSpeed) */
         this.isDesktopViewport = typeof window !== 'undefined' ? window.matchMedia('(min-width: 768px)').matches : true;
         this.viewportMediaQuery = null;
@@ -33,6 +41,9 @@ export class SallaAddProductButton {
         this.orderOptionsGateAttached = false;
         /** Guards one-time attachment of the fast-checkout Bullet Delivery gate (logic lives in FastCheckoutGate). */
         this.fastCheckoutGateAttached = false;
+        this.onBuyNowPriceUpdated = (response) => {
+            this.buyNowLivePrice = Number(response?.data?.price) || this.buyNowLivePrice;
+        };
         this.onViewportChange = (e) => {
             this.isDesktopViewport = e.matches;
             this.btn?.setText((e.matches && !!this.passedLabel) ? this.passedLabel : this.getLabel());
@@ -160,6 +171,105 @@ export class SallaAddProductButton {
             type: this.supportStickyBar && !this.isDesktopViewport ? 'plain' : this.productType == 'donating' ? 'donate' : 'buy'
         };
     }
+    // Store setting: quick-buy skips the mini-checkout popup and goes straight to the checkout page.
+    get redirectsToCheckout() {
+        return salla.config.get('store.settings.buy_now.redirect_to_checkout') === true;
+    }
+    /** The fast-checkout slot renders and the store redirects, so the buy-now button is on the page. */
+    get showsBuyNowButton() {
+        return this.showQuickBuy
+            && !!document.getElementById('fast-checkout-js')
+            && !['financial_support', 'donating'].includes(this.productType)
+            && this.redirectsToCheckout;
+    }
+    buyNowButton() {
+        return h("div", { class: "s-add-product-button-mini-checkout s-mini-checkout hide-scroll s-add-product-button-buy-now" }, h("button", { type: "button", class: `s-fast-checkout-button outline ${salla.lang.locale == 'ar' ? 'rtl' : 'ltr'}`, disabled: this.buyNowLoading, onClick: () => this.buyNowRedirect() }, h("div", { class: "s-add-product-button-mini-checkout-content" }, h("span", { innerHTML: WalletIcon }), this.buyNowText)));
+    }
+    async buyNowRedirect() {
+        // A double-click would reach Bullet Delivery twice, which stalls its guest gate.
+        const now = Date.now();
+        if (this.buyNowBusy || now - this.buyNowLastClick < 500) {
+            return;
+        }
+        this.buyNowLastClick = now;
+        const token = ++this.buyNowToken;
+        const optionsEl = document.querySelector(`salla-product-options[product-id="${this.productId}"]`);
+        if (optionsEl?.validateAndScroll && !(await optionsEl.validateAndScroll())) {
+            return;
+        }
+        // Bullet Delivery's address gate, as the widget runs it; stays pending if the shopper backs out.
+        await salla.cart.event.beforeStartFastCheckout();
+        if (token !== this.buyNowToken || this.buyNowBusy) {
+            return;
+        }
+        this.buyNowBusy = true;
+        let leaving = false;
+        try {
+            this.buyNowLoading = true;
+            const form = document.querySelector('form.product-form');
+            const data = form ? new FormData(form) : new FormData();
+            data.set('id', String(this.productId));
+            data.set('source', 'buy_now');
+            if (!(await this.collectOrderOptions(data))) {
+                return;
+            }
+            const resp = await salla.api.request('checkout/mini', data, 'post');
+            if (resp.data?.url) {
+                leaving = this.openCheckout(resp.data.url);
+            }
+            else if (resp.data?.to === 'login') {
+                salla.event.dispatch('login::open');
+            }
+        }
+        catch (error) {
+            this.failed.emit(error);
+        }
+        finally {
+            if (!leaving) {
+                this.buyNowBusy = false;
+                this.buyNowLoading = false;
+            }
+        }
+    }
+    /** Order options and free offer products, as the widget collects them; false when the modal is dismissed. */
+    async collectOrderOptions(data) {
+        let resp;
+        try {
+            resp = await salla.api.withoutNotifier(() => salla.product.api.getOrderOptions([{ id: this.productId, quantity: Number(data.get('quantity')) || 1 }]));
+        }
+        catch (error) {
+            salla?.logger?.warn?.('order-options: fetch failed', error);
+            return true;
+        }
+        const orderOptions = resp?.data?.order_options || [];
+        const freeProducts = (Array.isArray(resp?.data?.advance_free_product) ? resp.data.advance_free_product : [])
+            .filter((entry) => Array.isArray(entry?.options) && entry.options.length);
+        if (!orderOptions.length && !freeProducts.length) {
+            return true;
+        }
+        try {
+            const result = await ensureOrderOptionsModal().open({
+                orderOptions,
+                freeProducts,
+                basePrice: this.buyNowLivePrice || Number(resp?.data?.products?.[0]?.price?.amount) || 0,
+            });
+            appendOrderOptionsToPayload(data, result?.orderOptions || []);
+            injectFreeProductsIntoPayload(data, result?.freeProducts || []);
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }
+    /** Native SPA webviews own the checkout screen; returns true when this page navigates away. */
+    openCheckout(url) {
+        if (salla.mobile?.isSpaWebview?.() && salla.mobile.openCheckout) {
+            salla.mobile.openCheckout(url);
+            return false;
+        }
+        window.location.href = url;
+        return true;
+    }
     miniCheckoutWidget() {
         let storeId = salla.config.get('store.id');
         if (!storeId) {
@@ -178,8 +288,11 @@ export class SallaAddProductButton {
                 && this.productType !== 'booking';
             // Cross-browser Apple Pay: native (Safari) OR the Payment Request API
             // (non-Safari browsers / non-Apple devices via the QR-code fallback).
+            // Hosted (MyFatoorah, S2S off) Apple Pay has no native sheet and no buy-now redirect
+            // path, so the quick-buy button below must not render for it either.
             this.isApplePayActive = salla.config.get('store.settings.payments')?.includes('apple_pay')
                 && salla.config.get('store.settings.is_salla_gateway', false)
+                && !isApplePayHostedRedirect()
                 && await canCompleteApplePay();
             this.passedLabel = this.host.innerHTML.replace('<!---->', '').trim();
             if (!!this.passedLabel && this.isDesktopViewport) {
@@ -209,11 +322,14 @@ export class SallaAddProductButton {
             } }, h("div", { class: {
                 's-add-product-button-main': this.showQuickBuy,
                 'w-full': !document.getElementById('fast-checkout-js') || ['financial_support', 'donating'].includes(this.productType) // This is a temporary fix until all themes fully support the fast checkout -- To be removed later
-            } }, h("salla-button", { color: this.productStatus === 'sale' ? 'primary' : 'light', type: "button", fill: this.productStatus === 'sale' ? 'solid' : 'outline', ref: el => this.btn = el, onClick: event => this.addProductToCart(event), disabled: this.productStatus !== 'sale', "aria-label": this.isIconOnlyLabel ? this.addToCartLabel : undefined, ...this.getBtnAttributes(), "loader-position": "center" }, h("slot", null)), this.showQuickBuy && !!document.getElementById('fast-checkout-js') && !['financial_support', 'donating'].includes(this.productType) ? this.miniCheckoutWidget() : ''), this.showQuickBuy && this.isApplePayActive ? h("salla-quick-buy", { ...this.getQuickBuyBtnAttributes() }) : '');
+            } }, h("salla-button", { color: this.productStatus === 'sale' ? 'primary' : 'light', type: "button", fill: this.productStatus === 'sale' ? 'solid' : 'outline', ref: el => this.btn = el, onClick: event => this.addProductToCart(event), disabled: this.productStatus !== 'sale', "aria-label": this.isIconOnlyLabel ? this.addToCartLabel : undefined, ...this.getBtnAttributes(), "loader-position": "center" }, h("slot", null)), this.showQuickBuy && !!document.getElementById('fast-checkout-js') && !['financial_support', 'donating'].includes(this.productType) ? (this.redirectsToCheckout ? this.buyNowButton() : this.miniCheckoutWidget()) : ''), this.showQuickBuy && this.isApplePayActive ? h("salla-quick-buy", { ...this.getQuickBuyBtnAttributes() }) : '');
     }
     async componentDidLoad() {
         // Register this component for hooks system, already on it logic to run componentDidLoad trigger
         await Salla.hooks.registerComponent('salla-add-product-button', this);
+        if (this.showsBuyNowButton) {
+            salla.product?.event?.onPriceUpdated?.(this.onBuyNowPriceUpdated);
+        }
         if (!this.notifyOptionsAvailability) {
             return;
         }
@@ -262,6 +378,7 @@ export class SallaAddProductButton {
     }
     disconnectedCallback() {
         this.viewportMediaQuery?.removeEventListener('change', this.onViewportChange);
+        salla.product?.event?.offPriceUpdated?.(this.onBuyNowPriceUpdated);
     }
     static get is() { return "salla-add-product-button"; }
     static get originalStyleUrls() {
@@ -498,6 +615,7 @@ export class SallaAddProductButton {
             "showQuickBuy": {},
             "isApplePayActive": {},
             "buyNowText": {},
+            "buyNowLoading": {},
             "isDesktopViewport": {}
         };
     }

package/dist/collection/components/salla-bullet-delivery/helpers.js

@@ -38,7 +38,7 @@ export function findNearestBranch(branches, userLat, userLon) {
     for (const b of branches) {
         const lat = b.location?.lat != null ? Number(b.location.lat) : Number.NaN;
         const lng = b.location?.lng != null ? Number(b.location.lng) : Number.NaN;
-        if (Number.isNaN(lat) || Number.isNaN(lng) || b.is_open === false)
+        if (Number.isNaN(lat) || Number.isNaN(lng) || !isBranchSelectable(b))
             continue;
         const d = calculateDistance(userLat, userLon, lat, lng);
         if (d < minD) {

package/dist/collection/components/salla-bullet-delivery/salla-bullet-delivery.js

@@ -446,10 +446,7 @@ export class SallaBulletDelivery {
                 }
                 // Auto-select preselected branch if provided
                 if (this.preselectedBranchId) {
-                    const branch = this.branches.find((b) => b.id === this.preselectedBranchId);
-                    if (branch) {
-                        this.selectedBranch = branch;
-                    }
+                    this.preselectBranch(this.preselectedBranchId);
                 }
             }
             // Prefill form data from session storage
@@ -900,15 +897,30 @@ export class SallaBulletDelivery {
     async loadBranches() {
         this.loadingBranches = true;
         try {
-            this.branches = await bulletDeliveryAPI.getBranches({
+            this.applyLoadedBranches(await bulletDeliveryAPI.getBranches({
                 country_id: this.selectedCountry?.id,
-            });
-            this.filterBranches();
+            }));
         }
         finally {
             this.loadingBranches = false;
         }
     }
+    /**
+     * Store a freshly fetched branch list and reconcile the current selection with it.
+     * `selectedBranch` is a snapshot from selection time: when the refreshed list carries the
+     * same branch, swap in the fresh copy, and drop it if it is no longer selectable (INV-1407).
+     * A selection missing from the list (e.g. filtered out by a search) is left untouched.
+     */
+    applyLoadedBranches(branches) {
+        this.branches = branches;
+        if (this.selectedBranch) {
+            const fresh = branches.find((b) => b.id === this.selectedBranch?.id);
+            if (fresh) {
+                this.selectedBranch = isBranchSelectable(fresh) ? fresh : null;
+            }
+        }
+        this.filterBranches();
+    }
     filterBranches() {
         this.filteredBranches = filterBranches(this.branches, this.branchSearchQuery);
     }
@@ -935,13 +947,7 @@ export class SallaBulletDelivery {
                     if (country) {
                         this.selectedCountry = country;
                         this.updateNewAddressForm({ country_id: Number(country.id) });
-                        const branchId = getIntentBranchId(intent);
-                        if (branchId != null && this.branches.length > 0) {
-                            const branch = this.branches.find((b) => b.id === branchId);
-                            if (branch) {
-                                this.selectedBranch = branch;
-                            }
-                        }
+                        this.preselectBranch(getIntentBranchId(intent));
                     }
                 }
             }
@@ -1105,11 +1111,10 @@ export class SallaBulletDelivery {
                 return;
             this.loadingBranches = true;
             try {
-                this.branches = await bulletDeliveryAPI.getBranches({
+                this.applyLoadedBranches(await bulletDeliveryAPI.getBranches({
                     country_id: this.selectedCountry?.id,
                     query,
-                });
-                this.filterBranches();
+                }));
             }
             finally {
                 this.loadingBranches = false;
@@ -1142,12 +1147,11 @@ export class SallaBulletDelivery {
     async loadBranchesWithLocation(lat, lng) {
         this.loadingBranches = true;
         try {
-            this.branches = await bulletDeliveryAPI.getBranches({
+            this.applyLoadedBranches(await bulletDeliveryAPI.getBranches({
                 country_id: this.selectedCountry?.id,
                 lat,
                 lng,
-            });
-            this.filterBranches();
+            }));
             // Auto-select country from first branch if no country is selected
             if (!this.selectedCountry && this.branches.length > 0) {
                 const firstBranch = this.branches[0];
@@ -1204,6 +1208,18 @@ export class SallaBulletDelivery {
         this.selectedBranch = branch;
         this.allocationOutOfCoverageMessage = null;
     }
+    /**
+     * Restore a remembered / event-provided branch — but only one the list renders as selectable,
+     * so a branch that has closed since it was remembered is never silently preselected (INV-1407).
+     */
+    preselectBranch(branchId) {
+        if (branchId == null)
+            return;
+        const branch = this.branches.find((b) => b.id === branchId);
+        if (branch && isBranchSelectable(branch)) {
+            this.selectedBranch = branch;
+        }
+    }
     handleSavedAddressSelect(address) {
         if (address.is_in_coverage === false) {
             // Show toast notification for out of coverage address
@@ -1443,13 +1459,7 @@ export class SallaBulletDelivery {
                         await this.loadBranches();
                     }
                     // Preselect branch from session storage if available
-                    const branchId = getIntentBranchId(savedIntent);
-                    if (branchId != null && this.branches.length > 0) {
-                        const branch = this.branches.find((b) => b.id === branchId);
-                        if (branch) {
-                            this.selectedBranch = branch;
-                        }
-                    }
+                    this.preselectBranch(getIntentBranchId(savedIntent));
                 }
                 else if (tab === "address") {
                     // Lazy-load saved addresses when switching to address tab (if not loaded yet).
@@ -1478,7 +1488,8 @@ export class SallaBulletDelivery {
     }
     isConfirmDisabled() {
         if (this.activeTab === "branch") {
-            return !this.selectedBranch;
+            // Backstop for any selection path: the allocation API rejects non-selectable branches (INV-1407).
+            return !isBranchSelectable(this.selectedBranch);
         }
         if (this.activeTab === "address") {
             if (this.isLoggedIn && this.selectedSessionAddress) {

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

@@ -7,7 +7,7 @@
  * the ApplePaySession and drives it via callbacks.
  */
 /** Get-or-create the singleton order-options modal on <body>. */
-function ensureOrderOptionsModal() {
+export function ensureOrderOptionsModal() {
     let modal = document.querySelector('salla-order-options-modal');
     if (!modal) {
         modal = document.createElement('salla-order-options-modal');

package/dist/collection/components/salla-quick-buy/salla-quick-buy.js

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
 import "@salla.sa/applepay/src/index";
 import { resolveApplePayOrderOptions, appendOrderOptionsToPayload, reportProductOptionsValiditySync, } from "../salla-order-options-modal/apple-pay-order-options";
 import { injectFreeProductsIntoPayload } from "../salla-order-options-modal/free-product-payload";
-import { applePayMerchantId, canCompleteApplePay, ensureApplePaySdk, resolveApplePayNetworks } from "@salla.sa/applepay/src/apple-pay-support";
+import { applePayMerchantId, canCompleteApplePay, ensureApplePaySdk, isApplePayHostedRedirect, resolveApplePayNetworks } from "@salla.sa/applepay/src/apple-pay-support";
 export class SallaQuickBuy {
     constructor() {
         /**
@@ -315,9 +315,12 @@ export class SallaQuickBuy {
         const canMakePayments = typeof window !== 'undefined' && !!window.ApplePaySession?.canMakePayments?.();
         const storeHasApplePay = salla?.config?.get?.('store.settings.payments')?.includes?.('apple_pay') ?? true;
         const isSallaGateway = salla?.config?.get?.('store.settings.is_salla_gateway', false) ?? true;
+        // Hosted (MyFatoorah, S2S off) Apple Pay has no native sheet and buy-now has no redirect
+        // path, so there is nothing this button could do — don't offer it.
+        const isHostedRedirect = isApplePayHostedRedirect();
         // No networks means nothing to charge with, so don't show the button — canMakePayments()
         // alone would light it up on Safari.
-        this.isApplePayActive = canMakePayments && storeHasApplePay && isSallaGateway
+        this.isApplePayActive = canMakePayments && storeHasApplePay && isSallaGateway && !isHostedRedirect
             && !!this.resolveSupportedNetworks().length;
         const runInit = async () => {
             if (!this.productId && salla?.config?.get && salla.url?.is_page) {
@@ -346,7 +349,8 @@ export class SallaQuickBuy {
                 salla.product.event.onPriceUpdated(response => { this.applyBaseCurrencyPrice(response?.data); });
             }
             const storeAllowsApplePay = (salla?.config?.get?.('store.settings.payments')?.includes?.('apple_pay') ?? storeHasApplePay)
-                && (salla?.config?.get?.('store.settings.is_salla_gateway', false) ?? isSallaGateway);
+                && (salla?.config?.get?.('store.settings.is_salla_gateway', false) ?? isSallaGateway)
+                && !isApplePayHostedRedirect();
             // Preload Apple's JS SDK so the rendered <apple-pay-button> upgrades on
             // every flow (native Safari + QR). Fire-and-forget: the element upgrades
             // retroactively once the script defines it.
@@ -370,7 +374,16 @@ export class SallaQuickBuy {
         });
     }
     render() {
-        return h(Host, { key: '8d1d37acada1f9cdbe6913d01a97fe881facc7af' }, this.quickBuyButton());
+        // Hosted (MyFatoorah, S2S off) Apple Pay has no native sheet and buy-now has no
+        // redirect path, so render nothing rather than an Apple Pay button that cannot
+        // do Apple Pay. Scoped to the hosted case on purpose: when a store simply has no
+        // Apple Pay, `isApplePayActive` is false too, but there the button is a deliberate
+        // generic buy-now that falls back to `checkout/mini` (see quickBuyHandler), and
+        // direct consumers rely on that.
+        if (isApplePayHostedRedirect()) {
+            return h(Host, null);
+        }
+        return h(Host, null, this.quickBuyButton());
     }
     quickBuyButton() {
         return h("apple-pay-button", { locale: salla?.config?.get?.('user.language_code') || 'ar', onClick: () => this.quickBuyHandler(), "data-quick-purchase": "applepay", class: "s-quick-buy-apple-pay", "data-is-applepay": "1", buttonstyle: "black", type: this.type });