@salla.sa/twilight-components 2.14.586 → 2.14.588

package/dist/collection/components/salla-cookies-bar/salla-cookies-bar.js

@@ -22,7 +22,7 @@ export class SallaCookiesBar {
         this.mobileQueryHandler = (e) => (this.isMobile = e.matches);
         this.openRequestedHandler = () => this.open();
         this.authLoggedInHandler = () => this.syncConsentAfterLogin();
-        this.authLoggedOutHandler = () => this.clearLocalConsent();
+        this.authLoggedOutHandler = () => this.handleLogout();
         /**
          * Consent cookie names, matching the category keys the backend expects.
          */
@@ -31,6 +31,18 @@ export class SallaCookiesBar {
         this.functionalCookieKey = 'functional_cookies';
         this.advertisingCookieKey = 'advertising_cookies';
         this.consentCookieDays = 365;
+        /**
+         * Storage keys for the consent choice. The persistent choice lives in `Salla.storage`
+         * (localStorage); after a logout a copy is kept in `Salla.storage.session` so the bar
+         * stays hidden until the browsing session ends.
+         */
+        this.consentStorageKey = 'cookies-consent';
+        this.sessionConsentPointsKey = 'cookies-consent-points';
+        /**
+         * Set when the persistent choice was made (or attributed) while signed in, i.e. it
+         * belongs to that account and must never be carried over to whoever signs in next.
+         */
+        this.consentByUserKey = 'cookies-consent-by-user';
         /**
          * Known first-party cookie names (a trailing `*` matches by prefix) set by common
          * third-party scripts, grouped by the category they belong to. Only first-party
@@ -112,6 +124,14 @@ export class SallaCookiesBar {
         this.functionsEnabled = false;
         this.adsEnabled = false;
     }
+    /**
+     * Stores can share an origin (`salla.sa/store_one`, `salla.sa/store_two`), so the
+     * post-logout session copy and the signed-in marker are keyed by store id to stay out
+     * of the other stores.
+     */
+    storeKey(key) {
+        return `${key}_${Salla.config.get('store.id')}`;
+    }
     async componentWillLoad() {
         await Salla.onReady();
         await Salla.lang.onLoaded();
@@ -121,7 +141,7 @@ export class SallaCookiesBar {
         Salla.event.on('auth::logged.out', this.authLoggedOutHandler);
         this.unregisterAfterFetchMenuItemsHook = Salla.hooks.registerHook('salla-menu', 'afterFetchMenuItems', (menuComponent) => this.appendCookiesSettingsLink(menuComponent));
         this.hydrateToggleState();
-        if (Salla.storage.get('cookies-consent')) {
+        if (this.currentConsentPoints()) {
             this.isVisible = false;
         }
         // Keep tracking cookies enforced on every load/refresh, not just when the
@@ -190,23 +210,50 @@ export class SallaCookiesBar {
      */
     applyConsent(points) {
         this.writeLocalConsentCookies(points);
+        // A fresh choice is stored persistently, so any post-logout session copy is stale.
+        this.clearSessionConsent();
+        Salla.storage.set(this.storeKey(this.consentByUserKey), !Salla.config.isGuest());
         this.sweepDisabledCategoryCookies(points);
         if (!Salla.config.isGuest()) {
             Salla.api.request('account/data-privacy', { points }, 'post').catch(() => { });
         }
     }
     /**
-     * The currently known accepted categories, read from local cookies — there is no
-     * backend endpoint to read the customer's saved preference back, so the cookies
-     * written on save are the only source of truth we have. Returns `null` when no
-     * choice has been made yet — the bar itself is the source of truth in that case,
-     * not a sweep.
+     * The currently known accepted categories: the persistent choice if there is one,
+     * otherwise the post-logout session copy. Returns `null` when no choice has been
+     * made yet — the bar itself is the source of truth in that case, not a sweep.
      */
     currentConsentPoints() {
-        if (!Salla.storage.get('cookies-consent'))
+        return this.persistentConsentPoints() ?? this.sessionConsentPoints();
+    }
+    /**
+     * The accepted categories read from local cookies — there is no backend endpoint to
+     * read the customer's saved preference back, so the cookies written on save are the
+     * only source of truth we have.
+     */
+    persistentConsentPoints() {
+        if (!Salla.storage.get(this.consentStorageKey))
             return null;
         return this.allCategoryKeys().filter(key => key === this.necessaryCookieKey || Salla.cookie.get(key) === 'true');
     }
+    /**
+     * The choice carried over from before a logout, kept only for the current browsing
+     * session (see `handleLogout`). It belongs to the customer who logged out, so it only
+     * applies while the visitor is a guest — never to whoever signs in next.
+     */
+    sessionConsentPoints() {
+        if (!Salla.config.isGuest())
+            return null;
+        if (!Salla.storage.session?.get(this.storeKey(this.consentStorageKey)))
+            return null;
+        const points = Salla.storage.session.get(this.storeKey(this.sessionConsentPointsKey));
+        const savedPoints = Array.isArray(points) ? points : [];
+        return this.allCategoryKeys().filter(key => key === this.necessaryCookieKey || savedPoints.includes(key));
+    }
+    clearSessionConsent() {
+        Salla.storage.session?.remove(this.storeKey(this.consentStorageKey));
+        Salla.storage.session?.remove(this.storeKey(this.sessionConsentPointsKey));
+    }
     enforceCurrentConsent() {
         const points = this.currentConsentPoints();
         if (points)
@@ -226,31 +273,76 @@ export class SallaCookiesBar {
         this.adsEnabled = points.includes(this.advertisingCookieKey);
     }
     /**
-     * Wipe the locally-stored choice on logout. Local cookies/storage are scoped to the
-     * browser, not the account — without this, whatever the previous customer chose would
-     * be misread as "the visitor's own prior choice" and pushed to the next account that
-     * logs in (or is created) on this same browser.
+     * On logout, stop keeping the choice persistently: local cookies/storage are scoped to
+     * the browser, not the account — without this, whatever the previous customer chose
+     * would be misread as "the visitor's own prior choice" and pushed to the next account
+     * that logs in (or is created) on this same browser.
+     *
+     * The choice is still honoured for the rest of the browsing session (copied to session
+     * storage), so the bar doesn't pop up again right after logging out; it shows again
+     * once the store is closed and reopened.
+     *
+     * A logout fired while the visitor is already a guest is the automatic `force_logout`
+     * cleanup (the session already ended server-side), not the customer's doing, so a choice
+     * the visitor made as a guest is kept as is. A choice made while signed in belongs to
+     * that account, so it's handled like any other logout.
      */
-    clearLocalConsent() {
+    handleLogout() {
+        if (Salla.config.isGuest() && !Salla.storage.get(this.storeKey(this.consentByUserKey)))
+            return;
+        const state = Salla.storage.get(this.consentStorageKey);
+        const points = this.persistentConsentPoints();
+        if (state && points) {
+            Salla.storage.session?.set(this.storeKey(this.consentStorageKey), state);
+            Salla.storage.session?.set(this.storeKey(this.sessionConsentPointsKey), points);
+        }
         for (const key of this.allCategoryKeys()) {
             Salla.cookie.remove(key);
         }
-        Salla.storage.remove('cookies-consent');
-        // Whoever continues on this browser next (guest or a different account) hasn't
-        // made a choice yet, so the bar should show again right away.
-        this.isVisible = true;
+        Salla.storage.remove(this.consentStorageKey);
+        Salla.storage.remove(this.storeKey(this.consentByUserKey));
     }
     /**
      * Runs when a guest signs in. There is no backend endpoint to check whether the
      * account already has a saved preference, so if the visitor already made a choice
      * as a guest (guest choices are never sent server-side), attribute that local
      * choice to the account now — this is the only source of truth available.
+     * The post-logout session copy belongs to the previous customer, so it's dropped here
+     * and never synced.
+     * `auth::logged.in` is dispatched even when the profile fetch fails, so a login that
+     * didn't resolve a user (still a guest) changes nothing.
      */
     syncConsentAfterLogin() {
-        const points = this.currentConsentPoints();
-        if (!points)
+        if (Salla.config.isGuest())
+            return;
+        this.clearSessionConsent();
+        const points = this.persistentConsentPoints();
+        if (!points) {
+            // Nothing chosen on this browser for the account that just signed in — e.g. after a
+            // logout that kept the bar hidden on this page — so ask them now.
+            this.step = 'consent';
+            this.isVisible = true;
+            return;
+        }
+        // A choice that already belongs to an account isn't this visitor's to hand over.
+        if (Salla.storage.get(this.storeKey(this.consentByUserKey)))
             return;
-        Salla.api.request('account/data-privacy', { points }, 'post').catch(() => { });
+        // Only once the account actually has the choice does it count as theirs; if the POST
+        // fails, a later login can try again. The response can arrive after the visitor logged
+        // out or chose again, so only mark it if it's still the same account and choice.
+        const userId = Salla.config.get('user.id');
+        Salla.api
+            .request('account/data-privacy', { points }, 'post')
+            .then(() => {
+            const currentPoints = this.persistentConsentPoints();
+            const unchanged = !Salla.config.isGuest() &&
+                Salla.config.get('user.id') === userId &&
+                currentPoints?.length === points.length &&
+                points.every(key => currentPoints.includes(key));
+            if (unchanged)
+                Salla.storage.set(this.storeKey(this.consentByUserKey), true);
+        })
+            .catch(() => { });
     }
     cookieNameMatchesPattern(cookieName, pattern) {
         return pattern.endsWith('*')
@@ -277,8 +369,15 @@ export class SallaCookiesBar {
     dismiss(eventName) {
         this.isVisible = false;
         //We will call event first because we need to compare between old and new data inside session
-        Salla.event.emit(`salla-cookies-bar::${eventName}`);
-        Salla.storage.set('cookies-consent', eventName);
+        try {
+            Salla.event.emit(`salla-cookies-bar::${eventName}`);
+        }
+        finally {
+            // Listeners (themes, apps, third-party scripts) run synchronously and their errors
+            // propagate; always persist the choice so a throwing listener can't make the bar
+            // show again on the next page. The error is still rethrown after this.
+            Salla.storage.set(this.consentStorageKey, eventName);
+        }
     }
     /**
      * Persist the customized per-category toggle choices, then dismiss.

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

@@ -1,6 +1,9 @@
 /*!twlt*/:host {
   display: block;
 }
+.visible {
+  visibility: visible;
+}
 .static {
   position: static;
 }

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

@@ -65,9 +65,18 @@ export class SallaPayments {
             return;
         if (salla.config.get('page.slug') !== 'index')
             return;
+        // Theme previews and editor frames are not what shoppers see.
+        if (salla.config.get('theme.mode') !== 'live' || window.self !== window.top)
+            return;
         if (!salla.config.get('store.settings.commercial_number')
             && !salla.config.get('store.settings.freelance_number'))
             return;
+        // Animations freeze while the page is hidden, so any hide in the window voids the check.
+        let pageWasHidden = false;
+        const trackVisibility = () => {
+            if (document.visibilityState !== 'visible')
+                pageWasHidden = true;
+        };
         const isShown = (el) => {
             const check = el.checkVisibility;
             if (typeof check !== 'function')
@@ -83,6 +92,12 @@ export class SallaPayments {
                 && rect.top < window.innerHeight && rect.left < window.innerWidth);
         };
         const verdict = () => {
+            trackVisibility();
+            if (pageWasHidden)
+                return null;
+            // Read late: the app flag comes from the analytics context, set after load.
+            if (salla.config.isMobileApp())
+                return null;
             const badges = Array.from(document.querySelectorAll('salla-trust-badges'));
             if (!badges.length)
                 return 'absent';
@@ -96,13 +111,19 @@ export class SallaPayments {
                 return;
             SallaPayments.audited = true;
             observer.disconnect();
+            trackVisibility();
+            document.addEventListener('visibilitychange', trackVisibility);
+            const stopTracking = () => document.removeEventListener('visibilitychange', trackVisibility);
             // Settle first, so a footer still running its entrance animation is not read as a hide.
             setTimeout(() => {
-                if (!verdict())
+                if (!verdict()) {
+                    stopTracking();
                     return;
+                }
                 // Second look, so a late animation is not read as a hide.
                 setTimeout(async () => {
                     const cause = verdict();
+                    stopTracking();
                     if (!cause || salla.storage.getWithTTL('salla::tb-audit'))
                         return;
                     try {

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 } from "@salla.sa/applepay/src/apple-pay-support";
+import { applePayMerchantId, canCompleteApplePay, ensureApplePaySdk, resolveApplePayNetworks } from "@salla.sa/applepay/src/apple-pay-support";
 export class SallaQuickBuy {
     constructor() {
         /**
@@ -125,6 +125,17 @@ export class SallaQuickBuy {
     resolveCheckoutType() {
         return this.applePayOnly && !this.productId ? 'mini_checkout' : 'buy_now';
     }
+    /**
+     * The backend's networks for this attempt, never widened with a default set.
+     * An empty array is the backend's answer, not a blank, so only an unset prop defers to config.
+     *
+     * The prop is typed `string[]`, but mini-checkout property-binds the raw backend value, which
+     * PHP serializes as an object when its keys are non-sequential — spreading that throws. Route
+     * it through the same normalizer the rest of the package uses.
+     */
+    resolveSupportedNetworks() {
+        return resolveApplePayNetworks(this.supportedNetworks);
+    }
     async settlePayment() {
         //use this way to get quantity too
         let data = this.host.getElementSallaData();
@@ -171,8 +182,7 @@ export class SallaQuickBuy {
             currency: this.currency || salla.config.get('store.settings.buy_now.currency') || 'SAR', // SAR
             requiredShippingContactFields: this.getRequiredShippingContactFields(),
             shippingMethods: this.isRequireShipping ? [] : undefined,
-            supportedNetworks: (Array.isArray(this.supportedNetworks) && this.supportedNetworks.length)
-                ? this.supportedNetworks : salla.config.get('store.settings.buy_now.supportedNetworks'),
+            supportedNetworks: this.resolveSupportedNetworks(),
             supportedCountries: (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',
@@ -305,7 +315,10 @@ 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;
-        this.isApplePayActive = canMakePayments && storeHasApplePay && isSallaGateway;
+        // 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.resolveSupportedNetworks().length;
         const runInit = async () => {
             if (!this.productId && salla?.config?.get && salla.url?.is_page) {
                 this.productId = salla.config.get('page.id');
@@ -344,7 +357,8 @@ export class SallaQuickBuy {
             // (non-Safari browsers / non-Apple devices via the QR-code fallback). The
             // helper loads Apple's JS SDK and awaits it before probing, so this is a
             // stable answer on first load (no race against the async script fetch).
-            this.isApplePayActive = storeAllowsApplePay && await canCompleteApplePay(this.currency);
+            this.isApplePayActive = storeAllowsApplePay
+                && await canCompleteApplePay(this.currency, this.resolveSupportedNetworks());
         };
         return new Promise((resolve) => {
             if (typeof salla?.onReady === 'function') {
@@ -356,7 +370,7 @@ export class SallaQuickBuy {
         });
     }
     render() {
-        return h(Host, { key: '63785d289e9c6d4e88e9b15fc444f9606a60da28' }, this.quickBuyButton());
+        return h(Host, { key: '8d1d37acada1f9cdbe6913d01a97fe881facc7af' }, 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 });