@salla.sa/twilight-components 2.14.586 → 2.14.588

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-07T09:10:53",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.35.1",

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

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

package/dist/esm/{filepond-plugin-file-poster-DmVMpWPg.js → filepond-plugin-file-poster-Dnc-RXWn.js}

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

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

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

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

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

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

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

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

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

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

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