@zonos/elements 1.3.44 → 1.3.46

package/dist/collection/components/store/checkout/stripe.js

@@ -358,13 +358,11 @@ const stripeStoreInitCheckoutSession = async () => {
         return false;
     }
     stripeStore.isFetchingSession = true;
-    const { errors, json } = await handleFetch(`${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-elements/create-checkout-session`, {
+    const { errors, json } = await handleFetch('/api/zonos-elements/create-checkout-session', {
         body: {
             currency: ((_a = cartStore.items.find(Boolean)) === null || _a === void 0 ? void 0 : _a.currencyCode) || '',
             itemsAmount: total,
-            metadata: [
-                { key: 'language', value: localizationStore.selectedLocale },
-            ],
+            metadata: [{ key: 'language', value: localizationStore.selectedLocale }],
             presentmentCountryCode: localizationStore.selectedCountryCode || null,
         },
         method: 'POST',
@@ -389,7 +387,7 @@ const stripeStoreInitCheckoutSession = async () => {
 const stripeStoreUpdateCheckoutSession = async ({ currency, id, itemsAmount, landedCostId, presentmentCountryCode, }) => {
     // No need to set loading state here because this function will be called under the hood to update
     // landed cost id for the section.
-    const { errors, json } = await handleFetch(`${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-elements/update-checkout-session`, {
+    const { errors, json } = await handleFetch('/api/zonos-elements/update-checkout-session', {
         body: {
             currency,
             id,
@@ -488,8 +486,7 @@ const stripeStoreTranslateAddressToLatin = async ({ addressInvalidCharactersList
     if (!isAddressOutdated) {
         return;
     }
-    const routeUrl = process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL;
-    const { errors, json } = await handleFetch(`${routeUrl}/api/zonos-elements/validate-address`, {
+    const { errors, json } = await handleFetch('/api/zonos-elements/validate-address', {
         body: requestBody,
         method: 'POST',
     });

package/dist/collection/components/store/hello/localization.js

@@ -201,7 +201,7 @@ const updateCheckoutSessionLanguage = async () => {
     if (!cartStore.checkoutSessionId) {
         return null;
     }
-    const { errors, json } = await handleFetch(`${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-elements/update-checkout-session-metadata`, {
+    const { errors, json } = await handleFetch('/api/zonos-elements/update-checkout-session-metadata', {
         body: {
             id: cartStore.checkoutSessionId,
             metadata: [

package/dist/collection/components/utils/api/calculateLandedCost.js

@@ -11,8 +11,7 @@ export const calculateLandedCost = async (abortController) => {
         return json;
     }
     // request to get landed cost info
-    const url = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-elements/calculate-landed-cost`;
-    const { errors, json } = await handleFetch(url, {
+    const { errors, json } = await handleFetch('/api/zonos-elements/calculate-landed-cost', {
         body: prepCalculateLandedCost(),
         method: 'POST',
         signal: abortController === null || abortController === void 0 ? void 0 : abortController.signal,

package/dist/collection/components/utils/api/checkItemRestrictions.js

@@ -2,13 +2,12 @@ import { handleFetch } from "../handleFetch";
 import { logError } from "../logging/logError";
 export const checkItemRestrictions = async ({ items, shipFrom, shipTo, }) => {
     var _a;
-    const url = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-elements/check-item-restrictions`;
     const body = {
         items,
         shipFrom,
         shipTo,
     };
-    const { errors, json } = await handleFetch(url, { body, method: 'POST' });
+    const { errors, json } = await handleFetch('/api/zonos-elements/check-item-restrictions', { body, method: 'POST' });
     if (errors.length || !json) {
         logError(`Error fetching item restrictions: ${(_a = errors.find(Boolean)) === null || _a === void 0 ? void 0 : _a.message}`);
         return [];

package/dist/collection/components/utils/api/getCountries.js

@@ -1,7 +1,7 @@
 import { handleFetch } from "../handleFetch";
 export const getCountries = async () => {
     try {
-        const { errors, json } = await handleFetch(`${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-elements/get-countries`, {
+        const { errors, json } = await handleFetch('/api/zonos-elements/get-countries', {
             method: 'GET',
         });
         if (errors.length || !json) {

package/dist/collection/components/utils/api/getCountryLandedCost.js

@@ -5,7 +5,7 @@ export const getCountryLandedCost = async (countryCode) => {
     if (!countryCode) {
         return null;
     }
-    const url = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-elements/country-landed-cost/${countryCode}`;
+    const url = `/api/zonos-elements/country-landed-cost/${countryCode}`;
     const { errors, json } = await handleFetch(url);
     if (errors.length || !json) {
         logError(`Error fetching country landed cost: ${(_a = errors.find(Boolean)) === null || _a === void 0 ? void 0 : _a.message}`);

package/dist/collection/components/utils/api/getExchangeRate.js

@@ -20,8 +20,12 @@ export const getExchangeRate = async ({ country, isGuaranteed, sourceCurrency, t
     if (sourceCurrency === targetCurrency && !isGuaranteed) {
         return defaultUsExchangeRate;
     }
-    const url = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-elements/exchange-rates?sourceCurrency=${sourceCurrency}&targetCurrency=${targetCurrency}&isGuaranteed=${isGuaranteed}&country=${country}`;
-    const { errors, json } = await handleFetch(url);
+    const searchParams = new URLSearchParams();
+    searchParams.set('sourceCurrency', sourceCurrency);
+    searchParams.set('targetCurrency', targetCurrency);
+    searchParams.set('isGuaranteed', String(isGuaranteed));
+    searchParams.set('country', country || '');
+    const { errors, json } = await handleFetch(`/api/zonos-elements/exchange-rates?${searchParams.toString()}`);
     if (errors.length || !json) {
         logError(`Error fetching country landed cost: ${(_a = errors.find(Boolean)) === null || _a === void 0 ? void 0 : _a.message}`);
         return defaultUsExchangeRate;

package/dist/collection/components/utils/api/getInclusivePricing.js

@@ -5,8 +5,7 @@ export const getInclusivePricing = async (countryCode) => {
     if (!countryCode) {
         return null;
     }
-    const url = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-elements/inclusive-prices/${countryCode}`;
-    const { errors, json } = await handleFetch(url);
+    const { errors, json } = await handleFetch(`/api/zonos-elements/inclusive-prices/${countryCode}`);
     if (errors.length || !json) {
         logError(`Error fetching country inclusive price setting: ${(_a = errors.find(Boolean)) === null || _a === void 0 ? void 0 : _a.message}`);
         return null;

package/dist/collection/components/utils/api/getLocaleMessages.js

@@ -2,8 +2,13 @@ import { handleFetch } from "../handleFetch";
 import { logError } from "../logging/logError";
 export const getLocaleMessages = async ({ countryCode, localeTo, storeId, }) => {
     var _a;
-    const url = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-elements/locale-messages?countryCode=${countryCode}&storeId=${storeId}&localeTo=${localeTo}`;
-    const { errors, json } = await handleFetch(url);
+    const searchParams = new URLSearchParams();
+    searchParams.set('countryCode', countryCode);
+    searchParams.set('storeId', storeId.toString());
+    if (localeTo) {
+        searchParams.set('localeTo', localeTo);
+    }
+    const { errors, json } = await handleFetch(`/api/zonos-elements/locale-messages?${searchParams.toString()}`);
     if (errors.length || !json) {
         logError('Error fetching exchange rate', (_a = errors.find(Boolean)) === null || _a === void 0 ? void 0 : _a.message);
         return [];

package/dist/collection/components/utils/api/getLocalization.js

@@ -6,14 +6,11 @@ export const getLocalization = async () => {
         // load and use country from session storage when zCountry query param is not present
         const countryLoadedSession = window.sessionStorage.getItem('zonos--country');
         const zCountry = getZCountryUrlParam(currentUrl.searchParams) || countryLoadedSession;
-        const localizationUrl = new URL(`${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-elements/localization`);
+        const searchParams = new URLSearchParams();
         if (zCountry) {
-            localizationUrl.searchParams.set('zCountry', zCountry);
+            searchParams.set('zCountry', zCountry);
         }
-        const fetchUrl = localizationUrl.href;
-        const { errors, json } = await handleFetch(fetchUrl, {
-            method: 'GET',
-        });
+        const { errors, json } = await handleFetch(`/api/zonos-elements/localization?${searchParams.toString()}`);
         if (errors.length || !json) {
             return { country: null, locale: null };
         }

package/dist/collection/components/utils/api/getShippingZones.js

@@ -2,8 +2,7 @@ import { handleFetch } from "../handleFetch";
 import { logError } from "../logging/logError";
 export const getShippingZones = async () => {
     var _a, _b;
-    const url = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-elements/shipping-zones`;
-    const { errors, json } = await handleFetch(url);
+    const { errors, json } = await handleFetch('/api/zonos-elements/shipping-zones');
     if (errors.length || !json) {
         logError(`Error fetching shipping zones: ${(_a = errors.find(Boolean)) === null || _a === void 0 ? void 0 : _a.message}`);
         return null;

package/dist/collection/components/utils/api/getZonosSettings.js

@@ -1,8 +1,7 @@
 import { handleFetch } from "../handleFetch";
 import { logError } from "../logging/logError";
 export const getZonosSettings = async () => {
-    const url = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-elements/zonos-settings`;
-    const { errors, json, zonosMode } = await handleFetch(url);
+    const { errors, json, zonosMode } = await handleFetch('/api/zonos-elements/zonos-settings');
     if (errors.length) {
         logError(`Error occurred when getting zonos settings. If this is not an unauthorized error, it will use user settings or default settings`);
         return { errors, json: null, zonosMode };

package/dist/collection/components/utils/api/paypalCaptureOrder.js

@@ -1,6 +1,6 @@
 import { handleFetch } from "../handleFetch";
 export const paypalCaptureOrder = async ({ checkoutSessionId, paypalMockResponse, }) => {
-    const { errors, json } = await handleFetch(`${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-elements/capture-paypal-order`, {
+    const { errors, json } = await handleFetch('/api/zonos-elements/capture-paypal-order', {
         body: { checkoutSessionId, paypalMockResponse },
         method: 'POST',
     });

package/dist/collection/components/utils/api/paypalCreateOrder.js

@@ -1,6 +1,6 @@
 import { handleFetch } from "../handleFetch";
 export const paypalCreateOrder = async ({ checkoutSessionId, }) => {
-    const { errors, json } = await handleFetch(`${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-elements/create-paypal-order`, {
+    const { errors, json } = await handleFetch('/api/zonos-elements/create-paypal-order', {
         body: { checkoutSessionId },
         method: 'POST',
     });

package/dist/collection/components/utils/api/trackConversionEvent.js

@@ -14,7 +14,6 @@ export const trackConversionEvent = async (eventName, metadata) => {
         !window.Zonos.zonosConversionTest) {
         return;
     }
-    const url = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-elements/track-conversion-event`;
     const countryCode = localizationStore.selectedCountryCode;
     const organizationId = zonosStore.organizationId;
     const checkoutSessionId = cartStore.checkoutSessionId;
@@ -29,7 +28,7 @@ export const trackConversionEvent = async (eventName, metadata) => {
         metadata,
         organizationId,
     };
-    await handleFetch(url, {
+    await handleFetch('/api/zonos-elements/track-conversion-event', {
         body,
         method: 'POST',
     });

package/dist/collection/components/utils/api/triggerBuildLandedCost.js

@@ -1,4 +1,5 @@
 import { prepCalculateLandedCost } from "./prepCalculateLandedCost";
+import { MAIN_BASE_API } from "../getNextFallbackApi";
 import { handleFetch } from "../handleFetch";
 export const triggerBuildLandedCost = async (buildLandedCost) => {
     var _a, _b, _c, _d;
@@ -9,13 +10,13 @@ export const triggerBuildLandedCost = async (buildLandedCost) => {
         checkoutSessionId: data.checkoutSessionId,
         contact: data.contact,
         shippingAddress: data.shippingAddress,
-        zonosApiRoute: process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL,
+        zonosApiRoute: MAIN_BASE_API,
     });
     if (!landedCost || ((_a = landedCost.errors) === null || _a === void 0 ? void 0 : _a.length)) {
         throw new Error(`Failed to build landed cost: ${((_c = (_b = landedCost === null || landedCost === void 0 ? void 0 : landedCost.errors) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.message) || 'Unknown error'}`);
     }
     // Validate the landed cost object to make sure the returned value from buildLandedCost has a valid schema
-    const { errors, json } = await handleFetch(`${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-elements/validate-landed-cost`, {
+    const { errors, json } = await handleFetch('/api/zonos-elements/validate-landed-cost', {
         body: landedCost,
         headers: {
             'Content-Type': 'application/json',

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

@@ -0,0 +1,18 @@
+const fallbackApiType = ['vercel', 'cloudflare'];
+export const MAIN_BASE_API_TYPE = fallbackApiType[0];
+export const fallbackApiList = {
+    cloudflare: process.env.NEXT_PUBLIC_ZONOS_CLOUDFLARE_URL,
+    vercel: process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL,
+};
+export const MAIN_BASE_API = fallbackApiList[MAIN_BASE_API_TYPE];
+/**
+ * Next available fallback api type
+ */
+export const getNextFallbackApiType = (currentApiType = MAIN_BASE_API_TYPE) => {
+    const currentIndex = fallbackApiType.indexOf(currentApiType);
+    const nextFallbackApiType = fallbackApiType[currentIndex + 1];
+    if (!nextFallbackApiType) {
+        return null;
+    }
+    return nextFallbackApiType;
+};

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}`;
+};