@salla.sa/twilight-components 2.14.586 → 2.14.587

package/dist/components/salla-contacts.js

@@ -79,7 +79,7 @@ const SallaContacts$1 = /*@__PURE__*/ proxyCustomElement(class SallaContacts ext
         if (this.isHeader) {
             return (h(Host, { class: "s-contacts s-contacts-header" }, contactsArray.filter((contact) => contact.type == 'phone' || contact.type == 'email').map((contact, index) => (h("a", { href: this.getContactLink(contact.type), key: index, class: "s-contacts-topnav-link" }, contact.type === 'email' ? (contact.value) : ([
                 h("span", null, this.contactsTitle, ": "),
-                h("a", { class: "unicode", href: this.iconsList[contact.type] }, contact.value)
+                h("span", { class: "unicode" }, contact.value)
             ]))))));
         }
         return (h(Host, { class: "s-contacts" }, !this.hideTitle && h("h3", { class: "s-contacts-title" }, this.contactsTitle), h("div", { class: {

package/dist/components/salla-payments.js

@@ -3,7 +3,7 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const sallaPaymentsCss = "/*!twlt*/:host{display:block}.static{position:static}.hidden{display:none}.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-payments-list{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:0.5rem}.s-payments-list:where([dir=\"rtl\"],[dir=\"rtl\"] *)>:not([hidden])~:not([hidden]){--tw-space-x-reverse:1}.s-payments-list-item{display:flex;height:2rem;width:3rem;align-items:center;justify-content:center;border-radius:var(--s-radius, 0.25rem);--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding:0.25rem}.s-payments-list-item img{max-height:100%;object-fit:contain}.s-payments-sbc-image{height:1.5rem;border-radius:0.125rem;transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.s-payments-sbc-image:hover{opacity:0.8}";
+const sallaPaymentsCss = "/*!twlt*/:host{display:block}.visible{visibility:visible}.static{position:static}.hidden{display:none}.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-payments-list{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:0.5rem}.s-payments-list:where([dir=\"rtl\"],[dir=\"rtl\"] *)>:not([hidden])~:not([hidden]){--tw-space-x-reverse:1}.s-payments-list-item{display:flex;height:2rem;width:3rem;align-items:center;justify-content:center;border-radius:var(--s-radius, 0.25rem);--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding:0.25rem}.s-payments-list-item img{max-height:100%;object-fit:contain}.s-payments-sbc-image{height:1.5rem;border-radius:0.125rem;transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.s-payments-sbc-image:hover{opacity:0.8}";
 
 const SallaPayments$1 = /*@__PURE__*/ proxyCustomElement(class SallaPayments extends HTMLElement {
     constructor() {
@@ -65,9 +65,18 @@ const SallaPayments$1 = /*@__PURE__*/ proxyCustomElement(class SallaPayments ext
             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 @@ const SallaPayments$1 = /*@__PURE__*/ proxyCustomElement(class SallaPayments ext
                 && 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 @@ const SallaPayments$1 = /*@__PURE__*/ proxyCustomElement(class SallaPayments ext
                 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/components/salla-quick-buy2.js

@@ -106,6 +106,43 @@ function ensureApplePaySdk() {
   return sdkPromise;
 }
 
+/**
+ * Coerce a networks payload into an array. PHP serializes the list as an object when the
+ * array keys are non-sequential, so both shapes arrive.
+ *
+ * @param {string[]|Object|null|undefined} raw
+ * @returns {string[]}
+ */
+function normalizeApplePayNetworks(raw) {
+  if (Array.isArray(raw)) return [...raw];
+  if (raw && typeof raw === 'object') return Object.values(raw);
+
+  return [];
+}
+
+/**
+ * The store's buy-now networks from config.
+ *
+ * @returns {string[]}
+ */
+function applePayNetworks() {
+  return normalizeApplePayNetworks(
+    salla?.config?.get?.('store.settings.buy_now.supportedNetworks')
+      || salla?.config?.get?.('store.settings.buy_now.networks'),
+  );
+}
+
+/**
+ * The networks for this attempt. `null`/`undefined` means "not supplied" and defers to config;
+ * an array — empty included — is the backend's answer and is used as-is.
+ *
+ * @param {string[]|Object|null|undefined} networks
+ * @returns {string[]}
+ */
+function resolveApplePayNetworks(networks) {
+  return networks == null ? applePayNetworks() : normalizeApplePayNetworks(networks);
+}
+
 /**
  * Whether Apple Pay can be completed in the current browser: natively
  * (Safari / Apple devices) or via the Payment Request API (non-Safari browsers
@@ -114,9 +151,16 @@ function ensureApplePaySdk() {
  * For the QR path this awaits the SDK before probing, so callers get a stable
  * answer on first load instead of racing the async script fetch.
  * @param {string} [currency]
+ * @param {string[]} [networks] The backend's list; null/undefined defers to the buy-now config.
  * @returns {Promise<boolean>}
  */
-async function canCompleteApplePay(currency = 'SAR') {
+async function canCompleteApplePay(currency = 'SAR', networks = null) {
+  const supportedNetworks = resolveApplePayNetworks(networks);
+
+  // Nothing to charge with — checked before the native probe, which would report "available"
+  // and only fail after the shopper taps pay.
+  if (!supportedNetworks.length) return false;
+
   try {
     if (window.ApplePaySession?.canMakePayments?.()) return true;
   } catch (e) { /* not supported natively */ }
@@ -135,9 +179,7 @@ async function canCompleteApplePay(currency = 'SAR') {
       buildApplePayMethodData({
         version: 3,
         merchantIdentifier: applePayMerchantId(),
-        supportedNetworks: salla?.config?.get?.('store.settings.buy_now.supportedNetworks')
-          || salla?.config?.get?.('store.settings.buy_now.networks')
-          || ['masterCard', 'visa'],
+        supportedNetworks,
         countryCode: salla?.config?.get?.('store.store_country') || 'SA',
       }),
       { total: { label: 'Salla', amount: { currency: currency || 'SAR', value: '0.00' } } },
@@ -588,6 +630,11 @@ const APPLE_PAY_METHOD = 'https://apple.com/apple-pay';
 // only get it once the SDK loads. Keeps native-vs-PaymentRequest routing stable.
 const HAS_NATIVE_APPLE_PAY = typeof window !== 'undefined' && !!window.ApplePaySession;
 
+// Shown when the backend offers no usable network. twilight can ship ahead of Languages-Module,
+// so fall through to `payment_failed` while the key is missing — never a hardcoded sentence.
+const NO_SUPPORTED_NETWORK_KEY = 'pages.checkout.apple_pay_no_supported_network';
+const NO_SUPPORTED_NETWORK_FALLBACK_KEY = 'pages.checkout.payment_failed';
+
 /**
  * Full Example
  *
@@ -757,16 +804,12 @@ const SallaApplePay = typeof window !== 'undefined' ? {
     startNativeSession: async function (event) {
 
         let version = SallaApplePay.getApplePaySessionVersion();
-        // 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 || {});
+        // The backend resolves this per shopper, so it goes to Apple verbatim. Adding mada back
+        // here is what let a shopper authorize with Face ID and only then be refused.
+        let supportedNetworks = resolveApplePayNetworks(SallaApplePay.detail.supportedNetworks);
+
         if (!supportedNetworks.length) {
-            supportedNetworks = ['masterCard', 'visa'];
-        }
-        if (version === 5 && !supportedNetworks.includes('mada')) {
-            supportedNetworks.push('mada');
+            return SallaApplePay.abandonNoSupportedNetwork();
         }
 
         SallaApplePay.request = {
@@ -897,6 +940,23 @@ const SallaApplePay = typeof window !== 'undefined' ? {
         });
     },
 
+    /**
+     * Give up before the sheet opens: the backend left no usable network.
+     *
+     * Routed through onCancel so the host gets the same terminal signals as a dismissal and the
+     * button recovers. trackPaymentFailed self-gates on Payment Submitted, so the funnel is safe.
+     */
+    abandonNoSupportedNetwork: () => {
+        salla.logger.error('🍏 Pay: no supported network for this shopper — Apple Pay not offered');
+
+        const message = salla?.lang?.get?.(NO_SUPPORTED_NETWORK_KEY);
+        const resolved = !message || message === NO_SUPPORTED_NETWORK_KEY
+            ? salla?.lang?.get?.(NO_SUPPORTED_NETWORK_FALLBACK_KEY)
+            : message;
+
+        SallaApplePay.onCancel({}, resolved || null);
+    },
+
     onCancel: (event = {}, message = null) => {
         SallaApplePay.canceled = true;
         // Sheet opened (Payment Submitted already fired) but the attempt ended
@@ -1184,9 +1244,12 @@ const SallaApplePay = typeof window !== 'undefined' ? {
         }
 
         const version = SallaApplePay.getApplePaySessionVersion();
-        const supportedNetworks = [...(SallaApplePay.detail.supportedNetworks || ['masterCard', 'visa'])];
-        if (version === 5 && !supportedNetworks.includes('mada')) {
-            supportedNetworks.push('mada');
+        // Same contract as the native flow. resolveApplePayNetworks also handles the
+        // object-shaped payload, which the old spread would have thrown on.
+        const supportedNetworks = resolveApplePayNetworks(SallaApplePay.detail.supportedNetworks);
+
+        if (!supportedNetworks.length) {
+            return SallaApplePay.abandonNoSupportedNetwork();
         }
 
         const methodData = [{
@@ -1854,6 +1917,17 @@ const SallaQuickBuy = /*@__PURE__*/ proxyCustomElement(class SallaQuickBuy exten
     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();
@@ -1900,8 +1974,7 @@ const SallaQuickBuy = /*@__PURE__*/ proxyCustomElement(class SallaQuickBuy exten
             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',
@@ -2034,7 +2107,10 @@ const SallaQuickBuy = /*@__PURE__*/ proxyCustomElement(class SallaQuickBuy exten
         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');
@@ -2073,7 +2149,8 @@ const SallaQuickBuy = /*@__PURE__*/ proxyCustomElement(class SallaQuickBuy exten
             // (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') {
@@ -2085,7 +2162,7 @@ const SallaQuickBuy = /*@__PURE__*/ proxyCustomElement(class SallaQuickBuy exten
         });
     }
     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 });

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-10-04T09:55:42",
+  "timestamp": "2026-10-05T07:35:36",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.35.1",

package/dist/esm/{filepond-cGd_8brq.js → filepond-Xi2-pJA0.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-CpfofV0a.js';
+import { d as getDefaultExportFromCjs } from './index-BtdIfJF8.js';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {

package/dist/esm/{filepond-plugin-file-poster-DmVMpWPg.js → filepond-plugin-file-poster-DduYF-sA.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-CpfofV0a.js';
+import { d as getDefaultExportFromCjs } from './index-BtdIfJF8.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{filepond-plugin-file-validate-size-vJfZzddp.js → filepond-plugin-file-validate-size-BkPirl0j.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-CpfofV0a.js';
+import { d as getDefaultExportFromCjs } from './index-BtdIfJF8.js';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {

package/dist/esm/{filepond-plugin-file-validate-type-DXfCY9T0.js → filepond-plugin-file-validate-type-BIX8_1CI.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-CpfofV0a.js';
+import { d as getDefaultExportFromCjs } from './index-BtdIfJF8.js';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {

package/dist/esm/{filepond-plugin-image-edit-DHBzZ_bY.js → filepond-plugin-image-edit--1Sv5xxH.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-CpfofV0a.js';
+import { d as getDefaultExportFromCjs } from './index-BtdIfJF8.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{filepond-plugin-image-exif-orientation-2sbvlxy2.js → filepond-plugin-image-exif-orientation-Dss_DgF7.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-CpfofV0a.js';
+import { d as getDefaultExportFromCjs } from './index-BtdIfJF8.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{filepond-plugin-image-preview-BnPTV3nB.js → filepond-plugin-image-preview-CaA89Pn1.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-CpfofV0a.js';
+import { d as getDefaultExportFromCjs } from './index-BtdIfJF8.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {