@zonos/elements 1.5.1 → 1.5.3

package/dist/collection/components/utils/handleFetch.js

@@ -17,6 +17,7 @@ import { jsonParse } from "./jsonParse";
 import { log } from "./logging/log";
 import { prepLoadTimeApiLog } from "./logging/prepLoadTimeApiLog";
 import { sendErrorLog } from "./logging/sendErrorLog";
+const isGatewayStatus = (status) => status === 502 || status === 503 || status === 504;
 const getResponseBody = async ({ response, shouldLog = true, shouldThrow = false, }) => {
     try {
         const text = await response.text();
@@ -137,28 +138,31 @@ const handleRequest = async ({ basePathType, options, path, }) => {
     }
     catch (_a) {
         const message = 'Unknown error';
+        // A gateway HTML or empty body still carries a status a GET can fail over
+        // on. Other non-JSON statuses, including 404 and 500, keep the previous
+        // null response so they do not fail over.
         return {
             baseUrl,
             errors: [{ message: `${status}: ${message}`, type: status }],
             json: null,
-            response: null,
+            response: isGatewayStatus(response.status) ? response : null,
             zonosMode,
         };
     }
 };
 const handleRequestWithFallback = async ({ basePathType: _basePathType, options, path, }) => {
-    var _a, _b;
+    var _a, _b, _c;
     // use vercel API if the path is `/api/bigcommerce`
     const isBigcommerceEndpoint = path.startsWith('/api/bigcommerce');
     const basePathType = isBigcommerceEndpoint
         ? 'vercel'
         : _basePathType;
     const startTime = performance.now();
-    const _c = await handleRequest({
+    const _d = await handleRequest({
         basePathType,
         options,
         path,
-    }), { errors, response } = _c, rest = __rest(_c, ["errors", "response"]);
+    }), { errors, response } = _d, rest = __rest(_d, ["errors", "response"]);
     const endTime = performance.now();
     const duration = endTime - startTime;
     // Send the load time api log
@@ -180,10 +184,16 @@ const handleRequestWithFallback = async ({ basePathType: _basePathType, options,
         (message.includes('signal is aborted') ||
             message.includes('The operation was aborted') ||
             message.includes('Fetch is aborted')));
-    const isUnknownError = !!unknownError || (response === null || response === void 0 ? void 0 : response.status) === 404 || (response === null || response === void 0 ? void 0 : response.status) === 500;
-    const shouldCallFallback = 
-    // If next fallback is available, and the error is unknown (Failed to fetch) or 404 or 500 (server error)
-    nextFallbackApiType && isUnknownError;
+    const statusCode = response === null || response === void 0 ? void 0 : response.status;
+    const gateway = statusCode !== undefined && isGatewayStatus(statusCode);
+    // handleFetch sets method, and a missing method is a GET.
+    const isIdempotentGet = ((_a = options === null || options === void 0 ? void 0 : options.method) !== null && _a !== void 0 ? _a : 'GET').toUpperCase() === 'GET';
+    const failedWithoutGateway = !!unknownError || statusCode === 404 || statusCode === 500;
+    const isUnknownError = failedWithoutGateway || gateway;
+    // Replay 502, 503, and 504 only for GET. A gateway timeout on a POST can
+    // mean the first host is still finishing a payment or order write.
+    const shouldCallFallback = nextFallbackApiType &&
+        (failedWithoutGateway || (gateway && isIdempotentGet));
     // Should log the error if it's unknown error
     if (isUnknownError && !isAbortError) {
         void sendErrorLog({
@@ -193,7 +203,7 @@ const handleRequestWithFallback = async ({ basePathType: _basePathType, options,
                 currentBasePath: basePathType,
                 nextFallbackApiType,
                 requestHeaders: options === null || options === void 0 ? void 0 : options.headers,
-                requestPayload: jsonParse((_a = options === null || options === void 0 ? void 0 : options.body) === null || _a === void 0 ? void 0 : _a.toString()) || ((_b = options === null || options === void 0 ? void 0 : options.body) === null || _b === void 0 ? void 0 : _b.toString()),
+                requestPayload: jsonParse((_b = options === null || options === void 0 ? void 0 : options.body) === null || _b === void 0 ? void 0 : _b.toString()) || ((_c = options === null || options === void 0 ? void 0 : options.body) === null || _c === void 0 ? void 0 : _c.toString()),
                 shouldCallFallback,
                 status: response === null || response === void 0 ? void 0 : response.status,
                 statusText: response === null || response === void 0 ? void 0 : response.statusText,

package/dist/collection/components/utils/hello/countryOverrideStorage.js

@@ -1,55 +1,32 @@
 import { isCountryCode } from "./isCountryCode";
+import { safeGetItem, safeRemoveItem, safeSetItem, } from "../safeStorage";
 const COUNTRY_OVERRIDE_KEY = 'zonos--country';
-const withBlockedStorage = (run) => {
-    try {
-        run();
-    }
-    catch (_a) {
-        // localStorage/sessionStorage can throw in blocked-storage contexts
-        // (Safari private mode, cross-origin iframes).
-    }
-};
-const readStoredCountry = (storage) => {
-    try {
-        const value = storage.getItem(COUNTRY_OVERRIDE_KEY);
-        if (!value || !isCountryCode(value)) {
-            return null;
-        }
-        return value;
-    }
-    catch (_a) {
+const readStoredCountry = (area) => {
+    const value = safeGetItem(area, COUNTRY_OVERRIDE_KEY);
+    if (!value || !isCountryCode(value)) {
         return null;
     }
+    return value;
 };
-const writeOverride = (storage, countryCode) => {
-    storage.setItem(COUNTRY_OVERRIDE_KEY, countryCode);
-};
-const withEachStorage = (run) => {
-    withBlockedStorage(() => run(window.localStorage));
-    withBlockedStorage(() => run(window.sessionStorage));
-};
-export const getCountryOverrideStorage = () => {
-    var _a;
-    return (_a = readStoredCountry(window.localStorage)) !== null && _a !== void 0 ? _a : readStoredCountry(window.sessionStorage);
-};
+export const getCountryOverrideStorage = () => { var _a; return (_a = readStoredCountry('local')) !== null && _a !== void 0 ? _a : readStoredCountry('session'); };
 export const migrateCountryOverrideStorage = (selectedCountryCode) => {
     if (!selectedCountryCode) {
         return;
     }
-    withBlockedStorage(() => {
-        const localCountry = readStoredCountry(window.localStorage);
-        // Only mirror the country Hello actually kept. A failed localStorage
-        // clear can leave a discarded country in local; never copy that to
-        // session for older Elements. Never copy session → local.
-        if (localCountry === selectedCountryCode) {
-            writeOverride(window.sessionStorage, localCountry);
-        }
-    });
+    const localCountry = readStoredCountry('local');
+    // Only mirror the country Hello actually kept. A failed localStorage
+    // clear can leave a discarded country in local; never copy that to
+    // session for older Elements. Never copy session → local.
+    if (localCountry === selectedCountryCode) {
+        safeSetItem('session', COUNTRY_OVERRIDE_KEY, localCountry);
+    }
 };
 export const setCountryOverrideStorage = (countryCode) => {
     // Dual-write so older Elements that only read sessionStorage see the pick.
-    withEachStorage(storage => writeOverride(storage, countryCode));
+    safeSetItem('local', COUNTRY_OVERRIDE_KEY, countryCode);
+    safeSetItem('session', COUNTRY_OVERRIDE_KEY, countryCode);
 };
 export const clearCountryOverrideStorage = () => {
-    withEachStorage(storage => storage.removeItem(COUNTRY_OVERRIDE_KEY));
+    safeRemoveItem('local', COUNTRY_OVERRIDE_KEY);
+    safeRemoveItem('session', COUNTRY_OVERRIDE_KEY);
 };

package/dist/collection/components/utils/logging/installConstructorCapture.js

@@ -0,0 +1,58 @@
+import { sendErrorLog } from "./sendErrorLog";
+import { thrownMessage } from "./thrownMessage";
+const constructorNotFound = /^Constructor for .+ was not found/;
+const constructorTag = /^Constructor for "?([^#"]+)#/;
+const recordConstructorFailure = (value) => {
+    var _a;
+    const message = thrownMessage(value, '');
+    if (!message || !constructorNotFound.test(message)) {
+        return;
+    }
+    if (typeof window.Zonos === 'undefined') {
+        return;
+    }
+    const capture = window.__zonosConstructorCapture;
+    if (!capture) {
+        return;
+    }
+    const tagMatch = constructorTag.exec(message);
+    const tag = (_a = tagMatch === null || tagMatch === void 0 ? void 0 : tagMatch[1]) !== null && _a !== void 0 ? _a : '';
+    if (capture.reported.has(tag)) {
+        return;
+    }
+    capture.reported.add(tag);
+    void sendErrorLog({
+        endpoint: 'stencil://constructor',
+        errors: [message],
+        metadata: {
+            shape: 'constructor-not-found',
+            tag,
+        },
+    });
+};
+/**
+ * Copy a missing-constructor failure onto the existing error log.
+ * Stencil catches `Constructor for "tag#mode" was not found` and passes that
+ * Error to `console.error`. One report is sent per tag, then the original
+ * console.error still runs. This does not request the chunk again.
+ */
+export const installConstructorCapture = () => {
+    if (window.__zonosConstructorCapture) {
+        return;
+    }
+    const listener = (event) => {
+        recordConstructorFailure(event.reason);
+    };
+    window.__zonosConstructorCapture = {
+        listener,
+        reported: new Set(),
+    };
+    window.addEventListener('unhandledrejection', listener);
+    // eslint-disable-next-line no-console -- Stencil reports the missing constructor here
+    const originalError = console.error.bind(console);
+    // eslint-disable-next-line no-console -- record the Stencil diagnostic, then forward it
+    console.error = (...data) => {
+        recordConstructorFailure(data[0]);
+        originalError(...data);
+    };
+};

package/dist/collection/components/utils/logging/reportBlockedStorage.js

@@ -0,0 +1,34 @@
+import { sendErrorLog } from "./sendErrorLog";
+import { thrownMessage } from "./thrownMessage";
+const reportedIds = () => {
+    if (!window.__zonosReportedBlockedStorage) {
+        window.__zonosReportedBlockedStorage = new Set();
+    }
+    return window.__zonosReportedBlockedStorage;
+};
+/**
+ * Record a blocked storage read or write on the existing error log.
+ * A throw before `window.Zonos` exists is swallowed and does not use up
+ * the per-page dedupe slot, so the later startup read can still report it.
+ */
+export const reportBlockedStorage = (area, operation, key, error) => {
+    if (typeof window.Zonos === 'undefined') {
+        return;
+    }
+    const dedupeId = `${area}\u0000${operation}\u0000${key}`;
+    const reported = reportedIds();
+    if (reported.has(dedupeId)) {
+        return;
+    }
+    reported.add(dedupeId);
+    void sendErrorLog({
+        endpoint: `storage://${area}/${key}`,
+        errors: [thrownMessage(error, 'SecurityError')],
+        metadata: {
+            area,
+            key,
+            operation,
+            shape: 'blocked-storage',
+        },
+    });
+};

package/dist/collection/components/utils/logging/sendErrorLog.js

@@ -5,6 +5,13 @@ import { log } from "./log";
  * @default 1 hour
  */
 const postReleaseReportingDuration = 1 * 3600 * 1000; // 1 hour
+const loggedHref = () => {
+    const url = new URL(window.location.href);
+    url.searchParams.delete('payment_intent');
+    url.searchParams.delete('payment_intent_client_secret');
+    url.searchParams.delete('redirect_status');
+    return url.toString();
+};
 export const sendErrorLog = async ({ endpoint, errors, metadata, shouldPostReleaseErrorReporting, }) => {
     log('sendErrorLog', 'warn', endpoint, metadata, errors);
     if (shouldPostReleaseErrorReporting) {
@@ -22,7 +29,7 @@ export const sendErrorLog = async ({ endpoint, errors, metadata, shouldPostRelea
     const errorObject = {
         endpoint,
         errors,
-        href: window.location.href,
+        href: loggedHref(),
         metadata: Object.assign({ appVersion: window.Zonos.version, domain: window.Zonos.domain, publicCredential: window.Zonos.zonosApiKey, userAgent: userAgentData && userAgentData.brands.length > 0
                 ? userAgentData
                 : window.navigator.userAgent }, metadata),

package/dist/collection/components/utils/logging/startZonosInit.js

@@ -0,0 +1,35 @@
+import { sendErrorLog } from "./sendErrorLog";
+import { thrownMessage } from "./thrownMessage";
+const reportInitRejection = (error) => {
+    // sendErrorLog prints only when zonosDebug is on. Keep the failure in the
+    // merchant console without leaving an unhandled rejection.
+    // eslint-disable-next-line no-console -- the page console is the support signal
+    console.error(error);
+    if (typeof window.Zonos === 'undefined') {
+        return;
+    }
+    void sendErrorLog({
+        endpoint: 'zonos://init',
+        errors: [thrownMessage(error, 'Unknown init rejection')],
+        metadata: {
+            shape: 'init-rejection',
+        },
+    });
+};
+/**
+ * Run an init that the caller is not waiting on. The rejection is recorded
+ * and not rethrown, so startup does not become an unhandled rejection.
+ */
+export const startZonosInit = (start) => {
+    let pending;
+    try {
+        pending = start();
+    }
+    catch (error) {
+        reportInitRejection(error);
+        return;
+    }
+    void pending.catch((error) => {
+        reportInitRejection(error);
+    });
+};

package/dist/collection/components/utils/logging/thrownMessage.js

@@ -0,0 +1,16 @@
+export const thrownMessage = (error, fallback) => {
+    if (typeof error === 'string' && error) {
+        return error;
+    }
+    if (error instanceof Error && error.message) {
+        return error.message;
+    }
+    if (typeof error === 'object' &&
+        error !== null &&
+        'message' in error &&
+        typeof error.message === 'string' &&
+        error.message) {
+        return error.message;
+    }
+    return fallback;
+};

package/dist/collection/components/utils/safeStorage.js

@@ -0,0 +1,39 @@
+import { reportBlockedStorage, } from "./logging/reportBlockedStorage";
+/**
+ * Touch `window.localStorage` / `window.sessionStorage` inside the try.
+ * Safari throws SecurityError on the getter itself when storage is blocked.
+ * A missing storage object is the same failure: calling `getItem` on it
+ * would report a TypeError instead of blocked storage.
+ */
+const storageFor = (area) => {
+    const storage = area === 'local' ? window.localStorage : window.sessionStorage;
+    if (!storage) {
+        throw new DOMException('', 'SecurityError');
+    }
+    return storage;
+};
+export const safeGetItem = (area, key) => {
+    try {
+        return storageFor(area).getItem(key);
+    }
+    catch (error) {
+        reportBlockedStorage(area, 'getItem', key, error);
+        return null;
+    }
+};
+export const safeRemoveItem = (area, key) => {
+    try {
+        storageFor(area).removeItem(key);
+    }
+    catch (error) {
+        reportBlockedStorage(area, 'removeItem', key, error);
+    }
+};
+export const safeSetItem = (area, key, value) => {
+    try {
+        storageFor(area).setItem(key, value);
+    }
+    catch (error) {
+        reportBlockedStorage(area, 'setItem', key, error);
+    }
+};

package/dist/collection/scripts/_bigcommerceCheckoutPath.js

@@ -0,0 +1,16 @@
+/**
+ * Two checkout-path rules, kept together so they cannot drift in separate files.
+ *
+ * `pathContainsCheckout` is the broad rule for zBypass and address detection.
+ * It still matches paths such as `checkout-page`.
+ *
+ * `hasExactCheckoutSegment` is the strict rule for the Stripe.js skip. Only a
+ * segment exactly equal to `checkout` counts, so a slug does not drop the
+ * payment script.
+ */
+export const pathContainsCheckout = (pathname) => {
+    return pathname.includes('/checkout');
+};
+export const hasExactCheckoutSegment = (pathname) => {
+    return pathname.split('/').some(segment => segment === 'checkout');
+};

package/dist/collection/scripts/_detectBigCommerceHost.js

@@ -0,0 +1,12 @@
+/**
+ * Storefront signals BigCommerce sets before Zonos copies `isBigCommerce`.
+ * Shared by the loader script and the Stripe skip so the two cannot drift.
+ */
+export const detectBigCommerceHost = () => {
+    if (typeof window === 'undefined' || typeof document === 'undefined') {
+        return false;
+    }
+    return (!!window.stencilBootstrap ||
+        !!window.bcConfig ||
+        !!document.querySelector('script[src*="bigcommerce.com"]'));
+};

package/dist/collection/scripts/_getZonosQaUrl.js

@@ -1,4 +1,5 @@
 import { log } from "../components/utils/logging/log";
+import { safeRemoveItem } from "../components/utils/safeStorage";
 import { extractZonosQaUrl, extractZonosQaUrlApi, } from "./_extractZonosQaUrl";
 /**
  * Get the Zonos QA URL and return it. Will remove `zonosQaUrl` from the url query if it doesn't exists.
@@ -49,8 +50,8 @@ export const getZonosQaUrl = () => {
     void fetch(fullUrl)
         .then(() => {
         // cleanup checkout session to avoid using the prod session in preview domain
-        window.sessionStorage.removeItem('zonos--checkout-session-id');
-        window.sessionStorage.removeItem('zonos--client-secret');
+        safeRemoveItem('session', 'zonos--checkout-session-id');
+        safeRemoveItem('session', 'zonos--client-secret');
     })
         .catch(() => {
         alert(`[ZONOS-WARNING] '${fullUrl}' IS NO LONGER AVAILABLE. REMOVING zonosQaUrl PARAM AND RELOADING THE PAGE`);

package/dist/collection/scripts/_isBigCommerceNativeCheckout.js

@@ -0,0 +1,107 @@
+import { hasExactCheckoutSegment } from "./_bigcommerceCheckoutPath";
+import { detectBigCommerceHost } from "./_detectBigCommerceHost";
+const hasCheckoutSegment = () => hasExactCheckoutSegment(window.location.pathname);
+const sharedZonos = () => {
+    if (typeof window === 'undefined' || !('Zonos' in window)) {
+        return undefined;
+    }
+    return window.Zonos;
+};
+const isFlaggedBigCommerce = () => {
+    var _a;
+    return ((_a = sharedZonos()) === null || _a === void 0 ? void 0 : _a.isBigCommerce) === true;
+};
+/**
+ * The settled answer lives on `window.Zonos`, the object loadZonos.js,
+ * zonos.js, and the component bundle already share.
+ *
+ * A `true` result sticks for that pathname. A `false` result sticks once
+ * the path is not checkout, or once host detection has finished. A checkout
+ * path whose BigCommerce signals are not in the page yet stays unset, so a
+ * later signal can still settle it.
+ */
+const readSettled = () => {
+    const zonos = sharedZonos();
+    if (zonos === undefined) {
+        return undefined;
+    }
+    if (zonos.isBigCommerceNativeCheckoutPath !== window.location.pathname) {
+        return undefined;
+    }
+    const value = zonos.isBigCommerceNativeCheckout;
+    if (value === true || value === false) {
+        return value;
+    }
+    return undefined;
+};
+const writeSettled = (value) => {
+    const zonos = sharedZonos();
+    if (zonos !== undefined) {
+        zonos.isBigCommerceNativeCheckout = value;
+        zonos.isBigCommerceNativeCheckoutPath = window.location.pathname;
+    }
+    return value;
+};
+/**
+ * Call after `isBigCommerce` has been copied from host detection. Writes the
+ * settled boolean onto `window.Zonos` for this pathname.
+ */
+export const markBigCommerceHostChecked = () => {
+    if (typeof window === 'undefined' || typeof document === 'undefined') {
+        return;
+    }
+    const zonos = sharedZonos();
+    if (zonos === undefined) {
+        return;
+    }
+    const native = hasCheckoutSegment() && (detectBigCommerceHost() || isFlaggedBigCommerce());
+    zonos.isBigCommerceNativeCheckout = native;
+    zonos.isBigCommerceNativeCheckoutPath = window.location.pathname;
+};
+/** Test helper. Production pages keep the answer for the document. */
+export const resetBigCommerceNativeCheckoutCache = () => {
+    const zonos = sharedZonos();
+    if (zonos === undefined) {
+        return;
+    }
+    Reflect.deleteProperty(zonos, 'isBigCommerceNativeCheckout');
+    Reflect.deleteProperty(zonos, 'isBigCommerceNativeCheckoutPath');
+};
+const decide = () => {
+    if (typeof window === 'undefined' || typeof document === 'undefined') {
+        return false;
+    }
+    const settled = readSettled();
+    if (settled !== undefined) {
+        return settled;
+    }
+    if (!hasCheckoutSegment()) {
+        return writeSettled(false);
+    }
+    if (detectBigCommerceHost() || isFlaggedBigCommerce()) {
+        return writeSettled(true);
+    }
+    return undefined;
+};
+/**
+ * True when this document is BigCommerce native checkout.
+ * Stripe.js injection is owned by `loadStripeScript` in `_loadStripe.ts`.
+ * Other callers use this for a different job: skip `attachCheckout`, leave
+ * the store's buttons enabled, or hand a leftover domestic session to `/`.
+ * An undecided checkout path returns false and is not stored.
+ */
+export const isBigCommerceNativeCheckout = () => {
+    return decide() === true;
+};
+/**
+ * True when Stripe.js must not be injected. An undecided checkout path
+ * holds the script until host detection finishes, instead of storing "not
+ * native checkout" and injecting v3 early.
+ */
+export const holdStripeForNativeCheckout = () => {
+    const decision = decide();
+    if (decision === undefined) {
+        return true;
+    }
+    return decision;
+};

package/dist/collection/scripts/_loadStripe.js

@@ -1,4 +1,5 @@
 // Execute our own script injection after a tick to give users time to do their
+import { holdStripeForNativeCheckout } from "./_isBigCommerceNativeCheckout";
 import { initStripe, zonosStripeLoadScript, } from "./_stripe";
 // own script injection.
 const hasCheckoutCartCallback = () => {
@@ -7,13 +8,23 @@ const hasCheckoutCartCallback = () => {
         (typeof ((_a = window.Zonos) === null || _a === void 0 ? void 0 : _a.createCartId) === 'function' ||
             typeof ((_b = window.Zonos) === null || _b === void 0 ? void 0 : _b.buildCartDetail) === 'function');
 };
+/**
+ * The only function that may inject Stripe.js. Native BigCommerce checkout
+ * returns null before `window.Stripe` is read or `js.stripe.com/v3` is added.
+ * Callers decide whether to ask for Stripe. They do not load it themselves.
+ */
+const loadStripeScript = () => {
+    if (holdStripeForNativeCheckout()) {
+        return Promise.resolve(null);
+    }
+    return zonosStripeLoadScript(null);
+};
 const stripePromise = Promise.resolve().then(() => {
-    // Skip eagerly loading Stripe when no checkout cart callback is configured
-    // (e.g. a Hello-only integration). Stripe is loaded on demand instead.
+    // Hello-only pages have no cart callback, so they skip the eager preload.
     if (!hasCheckoutCartCallback()) {
         return null;
     }
-    return zonosStripeLoadScript(null);
+    return loadStripeScript();
 });
 let loadCalled = false;
 stripePromise.catch((err) => {
@@ -29,6 +40,6 @@ export const zonosLoadStripe = async (...args) => {
     // Fall back to loading Stripe on demand if the eager preload was skipped
     // (callbacks set after the microtask, or Collect/Invoice flows that don't
     // use cart callbacks). `zonosStripeLoadScript` is idempotent.
-    const maybeStripe = (_a = (await stripePromise)) !== null && _a !== void 0 ? _a : (await zonosStripeLoadScript(null));
+    const maybeStripe = (_a = (await stripePromise)) !== null && _a !== void 0 ? _a : (await loadStripeScript());
     return initStripe(maybeStripe, args, startTime);
 };