@zonos/elements 1.3.45 → 1.3.46

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

@@ -10,6 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { fallbackApiList, getNextFallbackApiType, MAIN_BASE_API_TYPE, } from "./getNextFallbackApi";
+import { log } from "./logging/log";
+import { sendErrorLog } from "./logging/sendErrorLog";
 const getResponseBody = async ({ response, shouldLog = true, shouldThrow = false, }) => {
     try {
         const json = await response.json();
@@ -26,14 +29,36 @@ const getResponseBody = async ({ response, shouldLog = true, shouldThrow = false
         return null;
     }
 };
-const handleRequest = async (url, options) => {
+const encodeString = (text) => {
+    try {
+        // encode the string, remove the "=" at the end of the encoded string
+        const encodedString = btoa(text).replace(/=/g, '');
+        return encodedString;
+    }
+    catch (error) {
+        // return the reverse string if the encoding failed
+        return text
+            .replace(/[^A-Za-z0-9]/g, '')
+            .split('')
+            .reverse()
+            .join('');
+    }
+};
+const handleRequest = async ({ basePathType, options, path, }) => {
     let response;
+    // fallback to the main base API if the passed in base path is not available
+    const baseUrl = fallbackApiList[basePathType] || MAIN_BASE_API_TYPE;
+    const url = baseUrl + path;
+    // adding random encoded token to the url so that the request will be cached differently for each store
+    const modifiedUrl = new URL(url);
+    modifiedUrl.searchParams.set('zToken', encodeString(window.location.hostname));
     try {
-        response = await fetch(url, options);
+        response = await fetch(modifiedUrl.toString(), options);
     }
     catch (e) {
         if (e instanceof Error) {
             return {
+                baseUrl,
                 errors: [{ message: e.message, type: 'unknown' }],
                 json: null,
                 response: null,
@@ -42,6 +67,7 @@ const handleRequest = async (url, options) => {
         }
         const message = 'Fail to fetch';
         return {
+            baseUrl,
             errors: [{ message, type: 'unknown' }],
             json: null,
             response: null,
@@ -57,6 +83,7 @@ const handleRequest = async (url, options) => {
     if (response.ok) {
         const data = await getResponseBody({ response });
         return {
+            baseUrl,
             errors: [],
             json: data,
             response,
@@ -71,6 +98,7 @@ const handleRequest = async (url, options) => {
         });
         const message = JSON.stringify(data);
         return {
+            baseUrl,
             errors: [{ message, type: status }],
             json: null,
             response,
@@ -80,6 +108,7 @@ const handleRequest = async (url, options) => {
     catch (e) {
         const message = 'Unknown error';
         return {
+            baseUrl,
             errors: [{ message: `${status}: ${message}`, type: status }],
             json: null,
             response: null,
@@ -87,31 +116,56 @@ const handleRequest = async (url, options) => {
         };
     }
 };
-function encodeString(text) {
-    try {
-        // encode the string, remove the "=" at the end of the encoded string
-        const encodedString = btoa(text).replace(/=/g, '');
-        return encodedString;
-    }
-    catch (error) {
-        // return the reverse string if the encoding failed
-        return text
-            .replace(/[^A-Za-z0-9]/g, '')
-            .split('')
-            .reverse()
-            .join('');
+const handleRequestWithFallback = async ({ basePathType, options, path, }) => {
+    const _a = await handleRequest({
+        basePathType,
+        options,
+        path,
+    }), { errors, response } = _a, rest = __rest(_a, ["errors", "response"]);
+    const nextFallbackApiType = getNextFallbackApiType(basePathType);
+    const unknownError = errors.find(({ type }) => type === 'unknown');
+    const shouldCallFallback = 
+    // If next fallback is available, and the error is unknown (fail to fetch) or 404
+    nextFallbackApiType && (!!unknownError || (response === null || response === void 0 ? void 0 : response.status) === 404);
+    if (shouldCallFallback) {
+        void sendErrorLog({
+            endpoint: fallbackApiList[basePathType] + path,
+            errors: errors.map(({ message }) => message),
+            metadata: {
+                currentBasePath: basePathType,
+                nextFallbackApiType,
+                status: response === null || response === void 0 ? void 0 : response.status,
+                statusText: response === null || response === void 0 ? void 0 : response.statusText,
+            },
+        });
+        log(`=== "${path}" failed to fetch, trying next fallback ${nextFallbackApiType}`);
+        return handleRequestWithFallback({
+            basePathType: nextFallbackApiType,
+            options,
+            path,
+        });
     }
-}
-export const handleFetch = async (url, _opts) => {
+    // No more fallbacks, just return the result
+    return Object.assign({ errors, response }, rest);
+};
+/**
+ * Fetch request and will request to fallback API when the first one fails
+ * @param path Path name of the request (e.g. /api/something/com).
+ * @param _opts fetch options
+ */
+export const handleFetch = async (path, _opts) => {
     const opts = __rest(_opts || {}, []);
     const body = opts.body ? JSON.stringify(opts.body) : undefined;
     const method = opts.method || 'GET';
-    // adding random encoded token to the url so that the request will be cached differently for each store
-    const modifiedUrl = new URL(url);
-    modifiedUrl.searchParams.set('zToken', encodeString(window.location.hostname));
     // headers content type
     const headers = Object.assign({ 'Content-Type': 'application/json', 'Zonos-Is-BigCommerce': window.Zonos.isBigCommerce.toString(), 'Zonos-Referer': window.location.hostname, 'Zonos-Version': window.Zonos.version, credentialtoken: window.Zonos.zonosApiKey || 'Empty credential token from zonos-elements' }, opts.headers);
     const options = Object.assign(Object.assign({}, opts), { body: method === 'GET' ? undefined : body, headers,
         method });
-    return handleRequest(modifiedUrl.toString(), options);
+    // This is for testing fallback API, set fallback API type to start with
+    const useFallbackApi = new URLSearchParams(window.location.search).get('useFallbackApi');
+    return handleRequestWithFallback({
+        basePathType: useFallbackApi || MAIN_BASE_API_TYPE,
+        options,
+        path,
+    });
 };

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

@@ -1,4 +1,4 @@
-import { handleFetch } from "../handleFetch";
+import { fallbackApiList, getNextFallbackApiType, MAIN_BASE_API, } from "../getNextFallbackApi";
 export const sendErrorLog = async ({ endpoint, errors, metadata }) => {
     const userAgentData = 'userAgentData' in window.navigator
         ? // userAgentData is not yet supported in all browsers
@@ -11,8 +11,22 @@ export const sendErrorLog = async ({ endpoint, errors, metadata }) => {
                 ? userAgentData
                 : window.navigator.userAgent }, metadata),
     };
-    void handleFetch(`${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-elements/log-error`, {
-        body: errorObject,
-        method: 'POST',
-    });
+    try {
+        // use native fetch because in handleFetch also calls sendErrorLog and it will possibly cause circular dependencies issue
+        void fetch(`${MAIN_BASE_API}/api/zonos-elements/log-error`, {
+            body: JSON.stringify(errorObject),
+            method: 'POST',
+        });
+    }
+    catch (_err) {
+        const nextFallbackApi = getNextFallbackApiType();
+        if (!nextFallbackApi) {
+            return;
+        }
+        // request to the fallback API if the first one fails
+        void fetch(`${fallbackApiList[nextFallbackApi]}/api/zonos-elements/log-error`, {
+            body: JSON.stringify(errorObject),
+            method: 'POST',
+        });
+    }
 };

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

@@ -14,7 +14,7 @@ export const sendLoadScriptLog = async (params) => {
     const scriptLoadLogBody = Object.assign(Object.assign({ href: window.location.href }, params), { metadata: Object.assign({ connectionDownlink: baseConnection === null || baseConnection === void 0 ? void 0 : baseConnection.downlink, connectionEffectiveType: baseConnection === null || baseConnection === void 0 ? void 0 : baseConnection.effectiveType, connectionRtt: baseConnection === null || baseConnection === void 0 ? void 0 : baseConnection.rtt, connectionSaveData: baseConnection === null || baseConnection === void 0 ? void 0 : baseConnection.saveData, userAgent: userAgentData && userAgentData.brands.length > 0
                 ? userAgentData
                 : window.navigator.userAgent }, params.metadata) });
-    void handleFetch(`${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-elements/log-script-load`, {
+    void handleFetch('/api/zonos-elements/log-script-load', {
         body: scriptLoadLogBody,
         method: 'POST',
     });

package/dist/collection/environment.js

@@ -5,7 +5,10 @@ import { config } from "dotenv";
 import { z } from "zod";
 // rollup and ts somehow can't compile this with absolute path
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
-import { generateVercelDeployUrl } from "./utils/generateVercelDeployUrl";
+import { formattedCloudflareApiUrl } from "./utils/formattedCloudflareApiUrl";
+// rollup and ts somehow can't compile this with absolute path
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import { formattedUrl } from "./utils/formattedUrl";
 export const isClientSide = typeof window !== 'undefined';
 export const inProdEnvironment = process.env.NODE_ENV === 'production';
 export const inTestEnvironment = process.env.NODE_ENV === 'test';
@@ -26,83 +29,6 @@ const UNPKG_ZONOS_URL = `https://unpkg.com/@zonos/elements@${packageVersion}`;
  */
 const CDNJS_ZONOS_URL = `https://cdnjs.cloudflare.com/ajax/libs/zonos-elements/${packageVersion}`;
 const currentBranch = process.env.VERCEL_GIT_COMMIT_REF || process.env.BRANCH_NAME;
-export const formattedUrl = ({ branchName, inCI: _inCI, inVercel: _inVercel, isVercelPreview: _isVercelPreview, packageVersion: _packageVersion, type = 'full', url, }) => {
-    if (!url) {
-        // return origin value so t3 can throw error when it's empty
-        return url;
-    }
-    const trimmedUrl = (_url) => _url === null || _url === void 0 ? void 0 : _url.replace('https://', '');
-    const domainOnlyUrl = trimmedUrl(url);
-    if (!_inCI && !_inVercel) {
-        // local host environment, no need to format url
-        return `https://${domainOnlyUrl}`;
-    }
-    const isProdBranch = branchName && ['main'].includes(branchName);
-    const isServerless = 
-    // url: route.js.zonos.com
-    domainOnlyUrl.includes('route.js') ||
-        // url: zonos-elements-serverless-git-something
-        domainOnlyUrl.includes('serverless-git');
-    const isTest = 
-    // url: test.js.zonos.com
-    domainOnlyUrl.includes('test.') ||
-        // url: zonos-elements-test-git-something
-        domainOnlyUrl.includes('test-git') ||
-        // url: something.preview.js.zonos.com (this is only applicable on preview deployment of `zonos-elements` and `zonos-elements-test`)
-        domainOnlyUrl.includes('preview.js.zonos.com');
-    if (isTest && isProdBranch) {
-        return `https://${domainOnlyUrl}`;
-    }
-    // always use vercel url if in vercel env, non-production branch (not qa or main branch) or the domain using is a test url
-    if ((_isVercelPreview && !isProdBranch) ||
-        isTest ||
-        (_inVercel && type === 'vercel-git')) {
-        // use vercel branch_url instead of the production url
-        if (!branchName) {
-            throw new Error('Fail to get vercel commit ref or branch name');
-        }
-        // get project name based on the `${url}`
-        const isStorybook = 
-        // url: storybook.js.zonos.com
-        domainOnlyUrl.includes('storybook.js') ||
-            // url: zonos-elements-storybook-git-something
-            domainOnlyUrl.includes('storybook-git');
-        const projectName = isStorybook
-            ? 'zonos-elements-storybook'
-            : isServerless
-                ? 'zonos-elements-serverless'
-                : 'zonos-elements';
-        // add -test suffix for test environment
-        const fullProjectName = isTest ? `${projectName}-test` : projectName;
-        // generate generated deploy url based on the branch name
-        const vercelGitBranchSuffix = generateVercelDeployUrl({
-            branchName,
-            projectName: fullProjectName,
-        });
-        return `https://${vercelGitBranchSuffix}`;
-    }
-    // only require package version in production and in CI, so that we still can use dev url (no version prefix).
-    if (!_packageVersion && (isProdBranch || _inCI)) {
-        throw new Error('package version is required');
-    }
-    const version = type === 'major' ? `${_packageVersion === null || _packageVersion === void 0 ? void 0 : _packageVersion.split('.')[0]}` : _packageVersion;
-    const isVersionedUrl = domainOnlyUrl === null || domainOnlyUrl === void 0 ? void 0 : domainOnlyUrl.startsWith('v');
-    const shouldAddVersion = (isProdBranch || _inCI) && !isVersionedUrl;
-    /**
-     * Trimming the `qa` from the domain url only when we add version prefix
-     * @reason We've now introduced alpha versioning for the QA branch deployment.
-     * However, we've generated the domain as `v1.2.4-alpha.1.js.zonos.com`, while the
-     * current CDN URL env uses `qa.js.zonos.com` on qa branch. This discrepancy causes
-     * this function to return an invalid alpha domain (v1.2.4-alpha.1.qa.js.zonos.com).
-     */
-    const trimmedQaUrl = shouldAddVersion
-        ? domainOnlyUrl === null || domainOnlyUrl === void 0 ? void 0 : domainOnlyUrl.replace('qa.js.zonos.com', 'js.zonos.com')
-        : domainOnlyUrl;
-    // only set version for the url once
-    return shouldAddVersion
-        ? `https://v${version}.${trimmedQaUrl}`
-        : `https://${trimmedQaUrl}`;
-};
 if (typeof window === 'undefined') {
     // storybook can't access to any "node" modules
     config();
@@ -127,6 +53,7 @@ const envClient = {
     NEXT_PUBLIC_ZONOS_API_KEY: z.string(),
     NEXT_PUBLIC_ZONOS_CDNJS_CDN_URL: z.string(),
     NEXT_PUBLIC_ZONOS_CDN_URL: z.string(),
+    NEXT_PUBLIC_ZONOS_CLOUDFLARE_URL: z.string(),
     NEXT_PUBLIC_ZONOS_JS_DELIVR_CDN_URL: z.string(),
     NEXT_PUBLIC_ZONOS_PACKAGE_VERSION: z.string(),
     NEXT_PUBLIC_ZONOS_ROUTE_URL: z.string(),
@@ -164,6 +91,14 @@ export const env = createEnv({
             type: 'full',
             url: process.env.NEXT_PUBLIC_ZONOS_CDN_URL,
         }),
+        NEXT_PUBLIC_ZONOS_CLOUDFLARE_URL: formattedCloudflareApiUrl({
+            branchName: currentBranch,
+            inCI,
+            inVercel,
+            isVercelPreview,
+            projectName: 'zonos-elements',
+            url: process.env.NEXT_PUBLIC_ZONOS_CLOUDFLARE_URL,
+        }),
         NEXT_PUBLIC_ZONOS_JS_DELIVR_CDN_URL: JS_DELIVR_ZONOS_URL,
         NEXT_PUBLIC_ZONOS_PACKAGE_VERSION: packageVersion,
         /**

package/dist/collection/scripts/_getZonosQaUrl.js

@@ -16,11 +16,15 @@ export const getZonosQaUrl = () => {
     const qaUrl = extractZonosQaUrl(window.location.href);
     const cdnUrl = process.env.NEXT_PUBLIC_ZONOS_CDN_URL;
     // when the qaUrl is not set and the built URL is from the test domain, use the test domain for testing
-    if (!qaUrl && cdnUrl.includes('test.')) {
+    if (!qaUrl &&
+        (cdnUrl.includes('test.') ||
+            // Vercel git domain
+            cdnUrl.includes('test-'))) {
         return cdnUrl;
     }
     // when local demo app is running, it needs to use the local dev script unless the qaUrl is set
-    if (!qaUrl && window.location.hostname === 'dev.demo.elements.zonos.com') {
+    if (!qaUrl &&
+        ['dev.demo.elements.zonos.com'].includes(window.location.hostname)) {
         return 'https://dev.elements.zonos.com';
     }
     if (!qaUrl) {

package/dist/collection/utils/formattedCloudflareApiUrl.js

@@ -0,0 +1,43 @@
+// rollup and ts somehow can't compile this with absolute path
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import { generateCloudflareDeployUrl } from "./generateCloudflareDeployUrl";
+/**
+ * This is to generate cloudflare url based on the environment. This won't
+ * - Get the cloudflare alias to build if the environment is Preview
+ * - Get the cloudflare production url (not preview alias) if it's production
+ * @note
+ * This is mainly used for get correct Cloudflare API to be used in scripts
+ * @note
+ * "url" is the API url in Cloudflare
+ * @returns
+ * - `https://<branch_name>.<project_name>.pages.dev` if is Preview
+ * - `https://route.elements.zonos.com` if is Production
+ */
+export const formattedCloudflareApiUrl = ({ branchName, inCI: _inCI, inVercel: _inVercel, isVercelPreview: _isVercelPreview, projectName, url, }) => {
+    if (!url) {
+        // return origin value so t3 can throw error when it's empty
+        return url;
+    }
+    const trimmedUrl = (_url) => _url === null || _url === void 0 ? void 0 : _url.replace('https://', '');
+    const domainOnlyUrl = trimmedUrl(url);
+    if (!_inCI && !_inVercel) {
+        // local host environment, no need to format url
+        return `https://${domainOnlyUrl}`;
+    }
+    const isProdBranch = branchName && ['main'].includes(branchName);
+    // always use Cloudflare preview alias if in not production environment
+    if (_isVercelPreview && !isProdBranch) {
+        // use Cloudflare branch_url instead of the production url
+        if (!branchName) {
+            throw new Error('Fail to get Cloudflare commit ref or branch name');
+        }
+        // generate generated deploy url based on the branch name
+        const cloudflareUrl = generateCloudflareDeployUrl({
+            branchName,
+            projectName,
+        });
+        return `https://${cloudflareUrl}`;
+    }
+    // use cloudflare production url
+    return `https://${domainOnlyUrl}`;
+};

package/dist/collection/utils/formattedUrl.js

@@ -0,0 +1,80 @@
+// rollup and ts somehow can't compile this with absolute path
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import { generateVercelDeployUrl } from "./generateVercelDeployUrl";
+export const formattedUrl = ({ branchName, inCI: _inCI, inVercel: _inVercel, isVercelPreview: _isVercelPreview, packageVersion: _packageVersion, type = 'full', url, }) => {
+    if (!url) {
+        // return origin value so t3 can throw error when it's empty
+        return url;
+    }
+    const trimmedUrl = (_url) => _url === null || _url === void 0 ? void 0 : _url.replace('https://', '');
+    const domainOnlyUrl = trimmedUrl(url);
+    if (!_inCI && !_inVercel) {
+        // local host environment, no need to format url
+        return `https://${domainOnlyUrl}`;
+    }
+    const isProdBranch = branchName && ['main'].includes(branchName);
+    const isServerless = 
+    // url: route.js.zonos.com
+    domainOnlyUrl.includes('route.js') ||
+        // url: zonos-elements-serverless-git-something
+        domainOnlyUrl.includes('serverless-git');
+    const isTest = 
+    // url: test.js.zonos.com
+    domainOnlyUrl.includes('test.') ||
+        // url: zonos-elements-test-git-something
+        domainOnlyUrl.includes('test-git') ||
+        // url: something.preview.js.zonos.com (this is only applicable on preview deployment of `zonos-elements` and `zonos-elements-test`)
+        domainOnlyUrl.includes('preview.js.zonos.com');
+    if (isTest && isProdBranch) {
+        return `https://${domainOnlyUrl}`;
+    }
+    // always use vercel url if in vercel env, non-production branch (not qa or main branch) or the domain using is a test url
+    if ((_isVercelPreview && !isProdBranch) ||
+        isTest ||
+        (_inVercel && type === 'vercel-git')) {
+        // use vercel branch_url instead of the production url
+        if (!branchName) {
+            throw new Error('Fail to get vercel commit ref or branch name');
+        }
+        // get project name based on the `${url}`
+        const isStorybook = 
+        // url: storybook.js.zonos.com
+        domainOnlyUrl.includes('storybook.js') ||
+            // url: zonos-elements-storybook-git-something
+            domainOnlyUrl.includes('storybook-git');
+        const projectName = isStorybook
+            ? 'zonos-elements-storybook'
+            : isServerless
+                ? 'zonos-elements-serverless'
+                : 'zonos-elements';
+        // add -test suffix for test environment
+        const fullProjectName = isTest ? `${projectName}-test` : projectName;
+        // generate generated deploy url based on the branch name
+        const vercelGitBranchSuffix = generateVercelDeployUrl({
+            branchName,
+            projectName: fullProjectName,
+        });
+        return `https://${vercelGitBranchSuffix}`;
+    }
+    // only require package version in production and in CI, so that we still can use dev url (no version prefix).
+    if (!_packageVersion && (isProdBranch || _inCI)) {
+        throw new Error('package version is required');
+    }
+    const version = type === 'major' ? `${_packageVersion === null || _packageVersion === void 0 ? void 0 : _packageVersion.split('.')[0]}` : _packageVersion;
+    const isVersionedUrl = domainOnlyUrl === null || domainOnlyUrl === void 0 ? void 0 : domainOnlyUrl.startsWith('v');
+    const shouldAddVersion = (isProdBranch || _inCI) && !isVersionedUrl;
+    /**
+     * Trimming the `qa` from the domain url only when we add version prefix
+     * @reason We've now introduced alpha versioning for the QA branch deployment.
+     * However, we've generated the domain as `v1.2.4-alpha.1.js.zonos.com`, while the
+     * current CDN URL env uses `qa.js.zonos.com` on qa branch. This discrepancy causes
+     * this function to return an invalid alpha domain (v1.2.4-alpha.1.qa.js.zonos.com).
+     */
+    const trimmedQaUrl = shouldAddVersion
+        ? domainOnlyUrl === null || domainOnlyUrl === void 0 ? void 0 : domainOnlyUrl.replace('qa.js.zonos.com', 'js.zonos.com')
+        : domainOnlyUrl;
+    // only set version for the url once
+    return shouldAddVersion
+        ? `https://v${version}.${trimmedQaUrl}`
+        : `https://${trimmedQaUrl}`;
+};

package/dist/collection/utils/generateCloudflareDeployUrl.js

@@ -0,0 +1,21 @@
+/**
+ * Generate a Cloudflare deploy URL based on the branch name and project name
+ * @note not including https://
+ * @return {url} string
+ * @urlExample build-cloudflare-2.zonos-elements.page.dev
+ */
+export const generateCloudflareDeployUrl = ({ branchName, projectName, }) => {
+    const normalizedProjectName = projectName.toLowerCase().replace(/\s+/g, '-');
+    // remove dots and replace non-alphanumeric characters with dashes
+    const normalizedBranchName = branchName
+        .toLowerCase()
+        .replace(/\./g, '-') // Replace periods with hyphens
+        .replace(/\//g, '-') // Replace slashes with hyphens
+        .replace(/[^a-z0-9-_]/g, '') // Remove any characters that aren't alphanumeric, hyphens, or underscores
+        .replace(/-+/g, '-') // Collapse multiple hyphens into a single hyphen
+        .replace(/^-+|-+$/g, ''); // Trim hyphens from start and end
+    if (!normalizedProjectName || !normalizedBranchName) {
+        return null;
+    }
+    return `${normalizedBranchName}.${normalizedProjectName}.pages.dev`;
+};