@salla.sa/twilight-components 2.14.500 → 2.14.502

package/dist/components/salla-basket-gap.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SallaBasketGap extends Components.SallaBasketGap, HTMLElement {}
+export const SallaBasketGap: {
+    prototype: SallaBasketGap;
+    new (): SallaBasketGap;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/salla-basket-gap.js

@@ -0,0 +1,402 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { f as fetchCartBoughtTogether } from './catalog-recommendations.js';
+import { d as defineCustomElement$j } from './salla-add-product-button2.js';
+import { d as defineCustomElement$i } from './salla-booking-field2.js';
+import { d as defineCustomElement$h } from './salla-button2.js';
+import { d as defineCustomElement$g } from './salla-color-picker2.js';
+import { d as defineCustomElement$f } from './salla-conditional-fields2.js';
+import { d as defineCustomElement$e } from './salla-count-down2.js';
+import { d as defineCustomElement$d } from './salla-datetime-picker2.js';
+import { d as defineCustomElement$c } from './salla-file-upload2.js';
+import { d as defineCustomElement$b } from './salla-loading2.js';
+import { d as defineCustomElement$a } from './salla-map2.js';
+import { d as defineCustomElement$9 } from './salla-modal2.js';
+import { d as defineCustomElement$8 } from './salla-order-options-modal2.js';
+import { d as defineCustomElement$7 } from './salla-product-availability2.js';
+import { d as defineCustomElement$6 } from './salla-product-options2.js';
+import { d as defineCustomElement$5 } from './salla-progress-bar2.js';
+import { d as defineCustomElement$4 } from './salla-quick-buy2.js';
+import { d as defineCustomElement$3 } from './salla-skeleton2.js';
+import { d as defineCustomElement$2 } from './salla-tel-input2.js';
+
+const sallaBasketGapCss = ":host{display:block}";
+
+const SallaBasketGap$1 = /*@__PURE__*/ proxyCustomElement(class SallaBasketGap extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        /**
+         * Maximum number of recommendations to fetch.
+         */
+        this.limit = 10;
+        this.products = [];
+        this.isLoading = true;
+        this.canRender = true;
+        this.title = '';
+        this.addToCartLabel = '';
+        this.weightLabel = '';
+        this.discountLabel = '';
+        this.placeholder = '';
+        this.fetchGeneration = 0;
+        this.isSyncingCart = false;
+        this.cartItemChangedHandler = (response) => {
+            const items = response?.data?.cart?.items ?? [];
+            const ids = items.map((i) => String(i.product_id)).filter(Boolean);
+            // Reflect a newly added product in the cart list without a full page refresh.
+            this.syncCartItemsDom(items);
+            this.fetchRecommendations(ids);
+        };
+        this.beforeAddItemHandler = (data) => {
+            const id = String(data?.id ?? '');
+            if (id && this.products.some((p) => String(p.id) === id) && salla.cart?.api) {
+                salla.cart.api.addToCartSource = 'basket_gap';
+            }
+        };
+        this.addButtonSuccessHandler = (event) => {
+            const productId = event?.target?.getAttribute?.('product-id');
+            if (!productId)
+                return;
+            const product = this.products.find((p) => String(p.id) === String(productId));
+            if (!product)
+                return;
+            const items = event?.detail?.data?.items ?? [];
+            const cartItem = items.find((i) => String(i.product_id) === String(product.id)) ?? items.slice(-1)[0];
+            salla.event.emit('salla-basket-gap::product.added', [{
+                    product,
+                    position: this.products.indexOf(product) + 1,
+                    cartItem,
+                    cartId: event?.detail?.data?.id,
+                    source: 'basket_gap',
+                }]);
+        };
+        salla.lang.onLoaded(() => {
+            this.title = salla.lang.get('pages.cart.basket_gap_title');
+            this.addToCartLabel = salla.lang.get('pages.cart.add_to_cart');
+            this.weightLabel = salla.lang.get('pages.products.weight');
+            this.discountLabel = salla.lang.get('pages.products.discount');
+        });
+    }
+    componentWillLoad() {
+        salla.onReady().then(() => {
+            if (!salla.config.get('store.settings.cart.basket_gap')) {
+                this.canRender = false;
+                this.isLoading = false;
+                return;
+            }
+            this.title = salla.lang.get('pages.cart.basket_gap_title');
+            this.addToCartLabel = salla.lang.get('pages.cart.add_to_cart');
+            this.weightLabel = salla.lang.get('pages.products.weight');
+            this.discountLabel = salla.lang.get('pages.products.discount');
+            this.placeholder = salla.url.asset(salla.config.get('theme.settings.placeholder'));
+            const cachedCart = salla.storage.get('cart');
+            const cachedIds = (cachedCart?.items ?? []).map((i) => String(i.product_id)).filter(Boolean);
+            if (cachedIds.length) {
+                return this.fetchRecommendations(cachedIds);
+            }
+            return salla.api.cart.details()
+                .then(({ data: { cart } }) => {
+                const objectIDs = (cart?.items ?? []).map((i) => String(i.product_id)).filter(Boolean);
+                return this.fetchRecommendations(objectIDs);
+            })
+                .catch(() => {
+                this.canRender = false;
+                this.isLoading = false;
+            });
+        });
+    }
+    componentDidLoad() {
+        this.positionUnderCartItems();
+    }
+    componentDidUpdate() {
+        document.lazyLoadInstance?.update(this.host.querySelectorAll('.lazy'));
+        this.positionUnderCartItems();
+    }
+    /**
+     * Cart item rows on the storefront cart page (excluding the order-options block).
+     * Kept defensive: themes that don't use the `form[id^="item-"]` pattern return none.
+     */
+    getCartItemForms(root = document) {
+        return Array.from(root.querySelectorAll('form[id^="item-"]'))
+            .filter((form) => !form.closest('.cart-options'));
+    }
+    /**
+     * The component is injected at the theme's `cart:items.end` hook, which may sit
+     * below the order options/offers. Move the host to render directly under the
+     * cart items. No-ops when the cart item pattern isn't present.
+     */
+    positionUnderCartItems() {
+        const items = this.getCartItemForms();
+        const lastItem = items[items.length - 1];
+        if (lastItem && lastItem.nextElementSibling !== this.host) {
+            lastItem.after(this.host);
+        }
+    }
+    /**
+     * Reflect a newly added product in the cart list without a full page reload.
+     * The whole item list is replaced with the fresh server-rendered rows because
+     * Salla re-assigns cart line-item ids on add, so diffing by id would duplicate
+     * the existing rows. No-ops on themes without the cart item markup.
+     */
+    syncCartItemsDom(cartItems) {
+        if (!cartItems?.length || this.isSyncingCart)
+            return;
+        const missing = cartItems.filter((item) => !document.getElementById('item-' + item.id));
+        if (!missing.length)
+            return;
+        this.isSyncingCart = true;
+        fetch(window.location.href, { headers: { 'X-Requested-With': 'XMLHttpRequest' }, credentials: 'same-origin' })
+            .then((res) => res.text())
+            .then((html) => {
+            const doc = new DOMParser().parseFromString(html, 'text/html');
+            const freshForms = this.getCartItemForms(doc);
+            const currentForms = this.getCartItemForms();
+            if (!freshForms.length || !currentForms.length)
+                return;
+            const firstCurrent = currentForms[0];
+            const parent = firstCurrent.parentElement;
+            if (!parent)
+                return;
+            // Insert the fresh rows in place of the current ones, then drop the old rows.
+            freshForms.forEach((form) => {
+                parent.insertBefore(document.importNode(form, true), firstCurrent);
+            });
+            currentForms.forEach((form) => form.remove());
+            document.lazyLoadInstance?.update?.();
+            this.positionUnderCartItems();
+        })
+            .catch(() => { })
+            .finally(() => { this.isSyncingCart = false; });
+    }
+    connectedCallback() {
+        salla.event.on('cart::item.added', this.cartItemChangedHandler);
+        salla.event.on('cart::item.deleted', this.cartItemChangedHandler);
+        // Tag adds originating from a basket-gap recommendation so the cart auto-track
+        // is suppressed in favour of our attributed `salla-basket-gap::product.added`.
+        salla.event.on('cart::before.add.item', this.beforeAddItemHandler);
+        this.host.addEventListener('success', this.addButtonSuccessHandler);
+    }
+    disconnectedCallback() {
+        salla.event.off('cart::item.added', this.cartItemChangedHandler);
+        salla.event.off('cart::item.deleted', this.cartItemChangedHandler);
+        salla.event.off('cart::before.add.item', this.beforeAddItemHandler);
+        this.host.removeEventListener('success', this.addButtonSuccessHandler);
+    }
+    // The recommendation API receives at most 5 cart product IDs, so it can return
+    // products that are already in the cart (those beyond the 5-item payload limit).
+    // We filter them out here to avoid showing items the customer already has.
+    // cartProductIds may be passed in directly from a live event payload; otherwise
+    // we fall back to storage (which can lag behind on the initial load path).
+    getCartProductIds(knownIds) {
+        if (knownIds?.length)
+            return new Set(knownIds);
+        const cart = salla.storage.get('cart');
+        return new Set((cart?.items ?? []).map((i) => String(i.product_id)).filter(Boolean));
+    }
+    fetchRecommendations(objectIDs) {
+        if (!objectIDs.length) {
+            this.canRender = false;
+            this.isLoading = false;
+            return Promise.resolve();
+        }
+        const generation = ++this.fetchGeneration;
+        return fetchCartBoughtTogether(objectIDs)
+            .then((ids) => {
+            if (generation !== this.fetchGeneration)
+                return;
+            // Pass objectIDs as the authoritative cart list so the filter is not
+            // affected by stale storage when called from a live cart event.
+            const cartIds = this.getCartProductIds(objectIDs);
+            const filteredIds = ids.filter(id => !cartIds.has(id));
+            if (!filteredIds.length) {
+                this.canRender = false;
+                return;
+            }
+            return this.fetchProducts(filteredIds.slice(0, this.limit), generation);
+        })
+            .catch(() => {
+            if (generation !== this.fetchGeneration)
+                return;
+            this.canRender = false;
+        })
+            .finally(() => {
+            if (generation !== this.fetchGeneration)
+                return;
+            this.isLoading = false;
+        });
+    }
+    fetchProducts(ids, generation) {
+        return salla.api.withoutNotifier(() => salla.product.api.fetch({
+            source: 'selected',
+            source_value: ids,
+            limit: this.limit,
+        })).then((response) => {
+            if (generation !== this.fetchGeneration)
+                return;
+            this.products = response?.data ?? [];
+            this.canRender = this.products.length > 0;
+        }).catch(() => {
+            if (generation !== this.fetchGeneration)
+                return;
+            this.canRender = false;
+        });
+    }
+    getDiscountLabel(product) {
+        if (product.promotion_title)
+            return product.promotion_title;
+        if (product.is_on_sale && product.regular_price > 0 && product.sale_price > 0) {
+            const percent = Math.round((1 - product.sale_price / product.regular_price) * 100);
+            return percent > 0 ? `${this.discountLabel} ${percent}%` : null;
+        }
+        return null;
+    }
+    formatDate(timestamp) {
+        const d = new Date(timestamp * 1000);
+        const mm = String(d.getMonth() + 1).padStart(2, '0');
+        const dd = String(d.getDate()).padStart(2, '0');
+        return `${d.getFullYear()}-${mm}-${dd}`;
+    }
+    getSkeletonView() {
+        return (h(Host, { class: "s-basket-gap-entry" }, h("div", { class: "s-basket-gap-skeleton" }, h("salla-skeleton", { height: "16px", width: "40%", style: { marginBottom: '16px' } }), Array(3).fill(null).map((_, i) => (h("div", { key: i, class: "s-basket-gap-skeleton-card" }, h("salla-skeleton", { height: "64px", width: "64px", style: { borderRadius: '8px', flexShrink: '0' } }), h("div", { class: "s-basket-gap-skeleton-info" }, h("salla-skeleton", { height: "14px", width: "50%" }), h("salla-skeleton", { height: "12px", width: "25%", style: { marginTop: '6px' } }), h("salla-skeleton", { height: "10px", width: "35%", style: { marginTop: '4px' } })), h("salla-skeleton", { height: "36px", width: "100px", style: { borderRadius: '6px', flexShrink: '0', marginInlineStart: 'auto' } })))))));
+    }
+    getProductCard(product) {
+        const discountLabel = this.getDiscountLabel(product);
+        return (h("div", { key: product.id, class: "s-basket-gap-card" }, h("a", { href: product.url, class: "s-basket-gap-card-image" }, h("img", { class: "lazy", src: this.placeholder, "data-src": product.image?.url, alt: product.image?.alt || product.name })), h("div", { class: "s-basket-gap-card-info" }, h("h3", { class: "s-basket-gap-card-name" }, h("a", { href: product.url }, product.name)), product.is_on_sale
+            ? h("div", { class: "s-basket-gap-card-sale-price" }, h("span", { innerHTML: salla.money(product.sale_price) }), h("del", { innerHTML: salla.money(product.regular_price) }))
+            : h("span", { class: "s-basket-gap-card-price", innerHTML: salla.money(product.price) }), product.weight_label && (h("span", { class: "s-basket-gap-card-weight" }, this.weightLabel, " ", product.weight_label))), (product.promotion_title || product.discount_ends || product.is_on_sale) && (h("div", { class: "s-basket-gap-card-offer" }, h("i", { class: "sicon-gift" }), discountLabel && h("span", null, discountLabel), product.discount_ends && [
+            h("salla-count-down", { date: this.formatDate(product.discount_ends), "end-of-day": true, digits: "en" }),
+            h("i", { class: "sicon-alarm" }),
+        ])), h("salla-add-product-button", { class: "s-basket-gap-card-btn", "product-id": product.id, "product-status": product.status, "product-type": product.type }, this.addToCartLabel)));
+    }
+    render() {
+        if (!this.canRender)
+            return null;
+        if (this.isLoading)
+            return this.getSkeletonView();
+        if (!this.products.length)
+            return null;
+        return (h(Host, { class: "s-basket-gap-entry" }, this.title && h("h2", { class: "s-basket-gap-title" }, this.title), h("div", { class: "s-basket-gap-list" }, this.products.map(product => this.getProductCard(product)))));
+    }
+    get host() { return this; }
+    static get style() { return sallaBasketGapCss; }
+}, [0, "salla-basket-gap", {
+        "limit": [2],
+        "products": [32],
+        "isLoading": [32],
+        "canRender": [32],
+        "title": [32],
+        "addToCartLabel": [32],
+        "weightLabel": [32],
+        "discountLabel": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-basket-gap", "salla-add-product-button", "salla-booking-field", "salla-button", "salla-color-picker", "salla-conditional-fields", "salla-count-down", "salla-datetime-picker", "salla-file-upload", "salla-loading", "salla-map", "salla-modal", "salla-order-options-modal", "salla-product-availability", "salla-product-options", "salla-progress-bar", "salla-quick-buy", "salla-skeleton", "salla-tel-input"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-basket-gap":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaBasketGap$1);
+            }
+            break;
+        case "salla-add-product-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$j();
+            }
+            break;
+        case "salla-booking-field":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$i();
+            }
+            break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$h();
+            }
+            break;
+        case "salla-color-picker":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
+        case "salla-conditional-fields":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
+        case "salla-count-down":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "salla-datetime-picker":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "salla-file-upload":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "salla-loading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "salla-map":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "salla-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "salla-order-options-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "salla-product-availability":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "salla-product-options":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "salla-progress-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "salla-quick-buy":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "salla-skeleton":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "salla-tel-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaBasketGap = SallaBasketGap$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaBasketGap, defineCustomElement };

package/dist/components/salla-bought-together.js

@@ -2,13 +2,12 @@
  * Crafted with ❤ by Salla
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { a as fetchProductCustomersAlsoBought } from './catalog-recommendations.js';
 import { d as defineCustomElement$3 } from './salla-button2.js';
 import { d as defineCustomElement$2 } from './salla-skeleton2.js';
 
 const sallaBoughtTogetherCss = ":host{display:block}.s-bought-together-checkbox:checked~.s-bought-together-checkmark{background-color:var(--color-primary, #2ECC71);border-color:var(--color-primary, #2ECC71)}.s-bought-together-checkbox:checked~.s-bought-together-checkmark::after{content:\"\";display:block;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);margin-top:-2px}";
 
-// Read-only recommendations key confirmed safe for client-side use by the API team — no write access or sensitive scope.
-const XSELL_API_KEY = 'VOL5WaZu2YROp0RplCZAr1RplhL9FFGQ';
 const SallaBoughtTogether$1 = /*@__PURE__*/ proxyCustomElement(class SallaBoughtTogether extends HTMLElement {
     constructor() {
         super();
@@ -46,25 +45,14 @@ const SallaBoughtTogether$1 = /*@__PURE__*/ proxyCustomElement(class SallaBought
                 return;
             }
             this.resolvedProductId = id;
-            return salla.api.request('https://api.salla.dev/1/indexes/*/recommendations', {
-                requests: [{
-                        indexName: 'products',
-                        model: 'xsell-v1',
-                        priceThreshold: 2,
-                        objectID: String(id),
-                        maxRecommendations: this.limit,
-                    }]
-            }, 'post', { headers: { 'X-Algolia-Api-Key': XSELL_API_KEY, 'X-Query-Enrichment': 'false', 'X-source': 'store' } });
+            return fetchProductCustomersAlsoBought(String(id));
         })
-            .then((response) => {
-            if (!response)
-                return;
-            const hits = response?.results?.[0]?.hits ?? [];
-            if (!hits.length) {
+            .then((recommendedIds) => {
+            if (!recommendedIds?.length) {
                 this.canRender = false;
                 return;
             }
-            const ids = [String(this.resolvedProductId), ...hits.map(h => h.objectID)];
+            const ids = [String(this.resolvedProductId), ...recommendedIds.slice(0, this.limit)];
             return salla.product.fetch({ source: 'selected', source_value: ids });
         })
             .then((response) => {

package/dist/components/salla-count-down2.js

@@ -131,7 +131,8 @@ const SallaCountDown = /*@__PURE__*/ proxyCustomElement(class SallaCountDown ext
         return !isNaN(Date.parse(testedDate));
     }
     number(digit) {
-        return salla.helpers.number(digit, this.digits === 'en');
+        const value = String(Math.max(0, Math.floor(digit))).padStart(2, '0');
+        return salla.helpers.number(value, this.digits === 'en');
     }
     startCountDown() {
         const normalized = this.normalizeDate(this.date);
@@ -234,7 +235,7 @@ const SallaCountDown = /*@__PURE__*/ proxyCustomElement(class SallaCountDown ext
         return this.renderCountDown();
     }
     render() {
-        return (h(Host, { key: '966a6ce961c0cc07b937d9b8e328211377084d44', class: `s-count-down-wrapper ${this.preOrder && this.isValidDate(this.date) ? 's-count-down-pre-order' : ''} ${this.horizontal ? 's-count-down-horizontal' : ''} ${this.withButton ? 's-count-down-with-button' : ''} ${this.offerEnded ? 's-count-down-ended' : ''}` }, this.renderPrefixText(), this.renderContent(), this.offerEnded && this.renderOfferEnded(), this.renderButton()));
+        return (h(Host, { key: 'e2805e528a52b71ad71f4f1f16a473947dafb5bc', class: `s-count-down-wrapper ${this.preOrder && this.isValidDate(this.date) ? 's-count-down-pre-order' : ''} ${this.horizontal ? 's-count-down-horizontal' : ''} ${this.withButton ? 's-count-down-with-button' : ''} ${this.offerEnded ? 's-count-down-ended' : ''}` }, this.renderPrefixText(), this.renderContent(), this.offerEnded && this.renderOfferEnded(), this.renderButton()));
     }
     static get style() { return sallaCountDownCss; }
 }, [0, "salla-count-down", {

package/dist/components/salla-quick-buy2.js

@@ -493,9 +493,15 @@ window.SallaApplePay = {
         SallaApplePay.initDefault();
 
         let version = SallaApplePay.getApplePaySessionVersion();
-        let supportedNetworks = SallaApplePay.detail.supportedNetworks || ['masterCard', 'visa'];
-
-        if (version === 5) {
+        // Normalize to an array: the backend can serialize the networks list as a JSON object
+        // (non-sequential PHP array keys). Copy it so we never mutate the shared `detail` reference.
+        // Works for both legacy (plain array) and unified (object-shaped) payloads.
+        let rawNetworks = SallaApplePay.detail.supportedNetworks;
+        let supportedNetworks = Array.isArray(rawNetworks) ? [...rawNetworks] : Object.values(rawNetworks || {});
+        if (!supportedNetworks.length) {
+            supportedNetworks = ['masterCard', 'visa'];
+        }
+        if (version === 5 && !supportedNetworks.includes('mada')) {
             supportedNetworks.push('mada');
         }
 
@@ -876,8 +882,16 @@ window.SallaApplePay = {
                 payments
             });
 
-            // todo :: enhance response from backend
-            SallaApplePay.detail.amount = payments?.gateways?.applePay?.supportedMultiCurrency ? cart.total_in_customer_currency : cart.total;
+            // BE-canary gate keyed on the live payload (not cached config): the unified BE adds
+            // applePay.amount, legacy BE doesn't — so gate and data can never desync.
+            if (payments?.gateways?.applePay?.amount != null) {
+                // Unified BE: Apple Pay is always charged in the store base currency.
+                SallaApplePay.detail.amount = payments.gateways.applePay.amount;
+                SallaApplePay.detail.currency = payments.gateways.applePay.currency ?? SallaApplePay.detail.currency;
+            } else {
+                // Legacy BE .
+                SallaApplePay.detail.amount = payments?.gateways?.applePay?.supportedMultiCurrency ? cart.total_in_customer_currency : cart.total;
+            }
             SallaApplePay.detail.items = (cart.totals || cart.items).map((item) => {
                 return {
                     label: item.title,
@@ -1162,8 +1176,15 @@ const SallaQuickBuy = /*@__PURE__*/ proxyCustomElement(class SallaQuickBuy exten
             currency: this.currency || 'SAR', // SAR
             requiredShippingContactFields: this.getRequiredShippingContactFields(),
             shippingMethods: this.isRequireShipping ? [] : undefined,
-            supportedNetworks: salla.config.get('store.settings.buy_now.networks'),
-            supportedCountries: salla.config.get('store.settings.buy_now.countries'),
+            // Legacy BE 
+            supportedNetworks: this.isLegacyBuyNowBE()
+                ? salla.config.get('store.settings.buy_now.networks')
+                : ((Array.isArray(this.supportedNetworks) && this.supportedNetworks.length)
+                    ? this.supportedNetworks : salla.config.get('store.settings.buy_now.supportedNetworks')),
+            supportedCountries: this.isLegacyBuyNowBE()
+                ? salla.config.get('store.settings.buy_now.countries')
+                : ((Array.isArray(this.supportedCountries) && this.supportedCountries.length)
+                    ? this.supportedCountries : salla.config.get('store.settings.buy_now.supportedCountries')),
             countryCode: salla.config.get('store.store_country') || 'SA',
             onStartedSession: this.handleApplePaySessionStarted,
             validateMerchant: {
@@ -1240,6 +1261,35 @@ const SallaQuickBuy = /*@__PURE__*/ proxyCustomElement(class SallaQuickBuy exten
         }
         return fields;
     }
+    /**
+     * TEMPORARY for BE Vip sync
+     */
+    isLegacyBuyNowBE() {
+        return salla?.config?.get?.('store.settings.buy_now.networks') != null;
+    }
+    /** Set Apple Pay amount + currency from a price payload, always keeping the pair in one currency. */
+    applyBaseCurrencyPrice(data) {
+        // Legacy BE: amount only; currency is set once in runInit.
+        if (this.isLegacyBuyNowBE()) {
+            if (data?.price != null) {
+                this.amount = data.price;
+            }
+            return;
+        }
+        const base = data?.base_currency_price;
+        // Unified BE base pair (regular products): charge in base currency.
+        if (base?.amount != null) {
+            this.amount = base.amount;
+            if (base?.currency) {
+                this.currency = base.currency;
+            }
+            // Display-only payload (e.g. donation { id, price }): pair amount with its display currency.
+        }
+        else if (data?.price != null) {
+            this.amount = data.price;
+            this.currency = salla.config.get('user.currency_code') || this.currency || 'SAR';
+        }
+    }
     componentWillLoad() {
         console.log('🍏 Pay: Quick Buy Component Loaded');
         const canMakePayments = typeof window !== 'undefined' && !!window.ApplePaySession?.canMakePayments?.();
@@ -1247,7 +1297,9 @@ const SallaQuickBuy = /*@__PURE__*/ proxyCustomElement(class SallaQuickBuy exten
         const isSallaGateway = salla?.config?.get?.('store.settings.is_salla_gateway', false) ?? true;
         this.isApplePayActive = canMakePayments && storeHasApplePay && isSallaGateway;
         const runInit = async () => {
-            if (!this.currency && salla?.config?.get) {
+            if (this.isLegacyBuyNowBE() && !this.currency && salla?.config?.get) {
+                // Legacy BE (pre-PR): currency from the multi_currency flag. The unified BE instead
+                // sources amount + currency from `base_currency_price` (see applyBaseCurrencyPrice).
                 this.currency = salla.config.get('store.settings.buy_now.multi_currency') ? salla.config.get('user.currency_code') : 'SAR';
             }
             if (!this.productId && salla?.config?.get && salla.url?.is_page) {
@@ -1259,7 +1311,7 @@ const SallaQuickBuy = /*@__PURE__*/ proxyCustomElement(class SallaQuickBuy exten
             }
             if ((!this.amount || !this.isRequireShipping) && this.productId && salla?.product?.getDetails) {
                 await salla.product.getDetails(this.productId, []).then((response) => {
-                    this.amount = response.data.price;
+                    this.applyBaseCurrencyPrice(response?.data);
                     this.isRequireShipping = response?.data?.is_require_shipping || false;
                 }).catch((error) => {
                     salla?.logger?.warn?.('🍏 Pay: Failed load the quick buy, get the product details failed: ', error);
@@ -1269,11 +1321,11 @@ const SallaQuickBuy = /*@__PURE__*/ proxyCustomElement(class SallaQuickBuy exten
                 salla.event.on('product-options::donation-changed', (data) => {
                     if (String(data.id) !== String(this.productId))
                         return;
-                    this.amount = data.price;
+                    this.applyBaseCurrencyPrice(data);
                 });
             }
             else if (salla?.url?.is_page?.('product.single') && salla?.product?.event?.onPriceUpdated) {
-                salla.product.event.onPriceUpdated(response => { this.amount = response.data.price; });
+                salla.product.event.onPriceUpdated(response => { this.applyBaseCurrencyPrice(response?.data); });
             }
             this.isApplePayActive = (salla?.helpers?.hasApplePay?.() ?? canMakePayments)
                 && (salla?.config?.get?.('store.settings.payments')?.includes?.('apple_pay') ?? storeHasApplePay)
@@ -1296,7 +1348,7 @@ const SallaQuickBuy = /*@__PURE__*/ proxyCustomElement(class SallaQuickBuy exten
         });
     }
     render() {
-        return h(Host, { key: '1895bf6077b3c9d2068830ac621e8f5b8afd1193' }, this.quickBuyButton());
+        return h(Host, { key: '8df291680d9b59f1627c8e1185a01cb30b92c2e4' }, 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 });
@@ -1318,6 +1370,8 @@ const SallaQuickBuy = /*@__PURE__*/ proxyCustomElement(class SallaQuickBuy exten
         "isRequireShipping": [1028, "is-require-shipping"],
         "applePayOnly": [1028, "apple-pay-only"],
         "validateHost": [1025, "validate-host"],
+        "supportedNetworks": [1040, "supported-networks"],
+        "supportedCountries": [1040, "supported-countries"],
         "isApplePayActive": [32],
         "quickBuy": [32]
     }]);