@zonos/elements 1.2.3 → 1.2.4-alpha.10

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

@@ -2,47 +2,47 @@ import { zonosStore } from "../../store/zonosStore";
 import { isValidSelector } from "../isValidSelector";
 import { logError } from "../logging/logError";
 export const getProductsOnPage = () => {
-  var _a, _b;
-  const { productAddToCartElementSelector, productDescriptionElementSelector, productTitleElementSelector, restrictionBehavior, } = zonosStore.helloSettings;
-  if (!productTitleElementSelector || !productDescriptionElementSelector) {
-    logError(`Hello Could not check item restrictions - must provide title and description selectors.`);
-  }
-  const titleNodes = (productTitleElementSelector &&
-    isValidSelector(productTitleElementSelector) &&
-    document.querySelectorAll(productTitleElementSelector)) ||
-    [];
-  const descriptionNodes = (productDescriptionElementSelector &&
-    isValidSelector(productDescriptionElementSelector) &&
-    document.querySelectorAll(productDescriptionElementSelector)) ||
-    [];
-  if (titleNodes.length !== descriptionNodes.length) {
-    // If the title and description selectors don't match, kill item restrictions altogether
-    logError('Hello Could not check item restrictions - Title and description selectors do not match');
-    return [];
-  }
-  const shouldDisableCart = restrictionBehavior === 'RESTRICT_AND_BLOCK';
-  const cartButtonNodes = (shouldDisableCart &&
-    productAddToCartElementSelector &&
-    isValidSelector(productAddToCartElementSelector) &&
-    document.querySelectorAll(productAddToCartElementSelector)) ||
-    [];
-  if (shouldDisableCart && cartButtonNodes.length !== descriptionNodes.length) {
-    // If the "add to cart" selectors don't match, log the error and continue
-    logError('Hello could not disable "Add to cart" buttons - Title and add to cart selectors do not match');
-  }
-  const mergedElements = [];
-  for (let i = 0; i < titleNodes.length; i++) {
-    const titleNode = titleNodes[i];
-    const descriptionNode = descriptionNodes[i];
-    const cartButtonNode = cartButtonNodes[i];
-    if (titleNode && descriptionNode) {
-      const element = {
-        cartButtonNode: cartButtonNode || null,
-        description: ((_a = descriptionNode.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '',
-        title: ((_b = titleNode.textContent) === null || _b === void 0 ? void 0 : _b.trim()) || '',
-      };
-      mergedElements.push(element);
+    var _a, _b;
+    const { productAddToCartElementSelector, productDescriptionElementSelector, productTitleElementSelector, restrictionBehavior, } = zonosStore.helloSettings;
+    if (!productTitleElementSelector || !productDescriptionElementSelector) {
+        logError(`Hello Could not check item restrictions - must provide title and description selectors.`);
     }
-  }
-  return mergedElements;
+    const titleNodes = (productTitleElementSelector &&
+        isValidSelector(productTitleElementSelector) &&
+        document.querySelectorAll(productTitleElementSelector)) ||
+        [];
+    const descriptionNodes = (productDescriptionElementSelector &&
+        isValidSelector(productDescriptionElementSelector) &&
+        document.querySelectorAll(productDescriptionElementSelector)) ||
+        [];
+    if (titleNodes.length !== descriptionNodes.length) {
+        // If the title and description selectors don't match, kill item restrictions altogether
+        logError('Hello Could not check item restrictions - Title and description selectors do not match');
+        return [];
+    }
+    const shouldDisableCart = restrictionBehavior === 'RESTRICT_AND_BLOCK';
+    const cartButtonNodes = (shouldDisableCart &&
+        productAddToCartElementSelector &&
+        isValidSelector(productAddToCartElementSelector) &&
+        document.querySelectorAll(productAddToCartElementSelector)) ||
+        [];
+    if (shouldDisableCart && cartButtonNodes.length !== descriptionNodes.length) {
+        // If the "add to cart" selectors don't match, log the error and continue
+        logError('Hello could not disable "Add to cart" buttons - Title and add to cart selectors do not match');
+    }
+    const mergedElements = [];
+    for (let i = 0; i < titleNodes.length; i++) {
+        const titleNode = titleNodes[i];
+        const descriptionNode = descriptionNodes[i];
+        const cartButtonNode = cartButtonNodes[i];
+        if (titleNode && descriptionNode) {
+            const element = {
+                cartButtonNode: cartButtonNode || null,
+                description: ((_a = descriptionNode.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '',
+                title: ((_b = titleNode.textContent) === null || _b === void 0 ? void 0 : _b.trim()) || '',
+            };
+            mergedElements.push(element);
+        }
+    }
+    return mergedElements;
 };

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

@@ -0,0 +1,5 @@
+export const getZCountryUrlParam = (urlParams) => {
+    const urlSearchParams = new URLSearchParams(urlParams || window.location.search);
+    const zCountry = urlSearchParams.get('zCountry');
+    return zCountry;
+};

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

@@ -2,21 +2,21 @@ import { isValidSelector } from "../isValidSelector";
 import { log } from "../logging/log";
 import { logError } from "../logging/logError";
 const injectHelloComponent = (triggerAnchorElement) => {
-  // append checkout component if doesn't exist
-  const helloElement = document.querySelector('zonos-hello');
-  if (!helloElement && triggerAnchorElement) {
-    const newHelloElement = document.createElement('zonos-hello');
-    triggerAnchorElement.appendChild(newHelloElement);
-  }
+    // append checkout component if doesn't exist
+    const helloElement = document.querySelector('zonos-hello');
+    if (!helloElement && triggerAnchorElement) {
+        const newHelloElement = document.createElement('zonos-hello');
+        triggerAnchorElement.appendChild(newHelloElement);
+    }
 };
 export const initHello = async (helloSettings) => {
-  const { anchorElementSelector } = helloSettings;
-  // check if checkout button anchor selector user pass in is valid to setup hello
-  if (!anchorElementSelector || !isValidSelector(anchorElementSelector)) {
-    logError(`Selector anchorElementSelector "${helloSettings.anchorElementSelector}" is not a valid selector.`);
-    return;
-  }
-  const triggerElement = document.querySelector(anchorElementSelector);
-  log('Hello init complete');
-  injectHelloComponent(triggerElement);
+    const { anchorElementSelector } = helloSettings;
+    // check if checkout button anchor selector user pass in is valid to setup hello
+    if (!anchorElementSelector || !isValidSelector(anchorElementSelector)) {
+        logError(`Selector anchorElementSelector "${helloSettings.anchorElementSelector}" is not a valid selector.`);
+        return;
+    }
+    const triggerElement = document.querySelector(anchorElementSelector);
+    log('Hello init complete');
+    injectHelloComponent(triggerElement);
 };

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

@@ -0,0 +1,9 @@
+export const setZCountryUrlParam = (selectedCountryCode) => {
+    if (!selectedCountryCode) {
+        return;
+    }
+    const urlSearchParams = new URLSearchParams(window.location.search);
+    urlSearchParams.set('zCountry', selectedCountryCode);
+    const newUrl = `${window.location.pathname}?${urlSearchParams.toString()}`;
+    window.history.replaceState({}, '', newUrl);
+};

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

@@ -1,12 +1,12 @@
 export const isColorVariable = (color) => {
-  const isAminoVariable = color &&
-    // match --amino-<color>
-    (/--amino-/gi.test(color) ||
-      // match 'gray-0'
-      /(\-*)\w+-\d+/gi.test(color));
-  return (isAminoVariable &&
-    // match rgb, rgba, hsl, hsla, hex, and css variable
-    !color.includes('(') &&
-    // match hex
-    !color.includes('#'));
+    const isAminoVariable = color &&
+        // match --amino-<color>
+        (/--amino-/gi.test(color) ||
+            // match 'gray-0'
+            /(\-*)\w+-\d+/gi.test(color));
+    return (isAminoVariable &&
+        // match rgb, rgba, hsl, hsla, hex, and css variable
+        !color.includes('(') &&
+        // match hex
+        !color.includes('#'));
 };

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

@@ -1,4 +1,4 @@
 import tinycolor from "tinycolor2";
 export const isDarkColor = (color) => {
-  return tinycolor(color).isDark();
+    return tinycolor(color).isDark();
 };

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

@@ -5,12 +5,12 @@
  * isValidSelector('div + >>> span') // false
  */
 export const isValidSelector = (selector) => {
-  try {
-    // this will error out if the selector is invalid in the DOM
-    document.createDocumentFragment().querySelector(selector);
-  }
-  catch (e) {
-    return false;
-  }
-  return true;
+    try {
+        // this will error out if the selector is invalid in the DOM
+        document.createDocumentFragment().querySelector(selector);
+    }
+    catch (e) {
+        return false;
+    }
+    return true;
 };

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

@@ -1,13 +1,13 @@
 export const jsonParse = (_data) => {
-  if (typeof _data === 'string') {
-    try {
-      // eslint-disable-next-line no-restricted-syntax
-      const json = JSON.parse(_data);
-      return json;
+    if (typeof _data === 'string') {
+        try {
+            // eslint-disable-next-line no-restricted-syntax
+            const json = JSON.parse(_data);
+            return json;
+        }
+        catch (_error) {
+            return null;
+        }
     }
-    catch (_error) {
-      return null;
-    }
-  }
-  return null;
+    return null;
 };

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

@@ -1,7 +1,7 @@
 import tinycolor from "tinycolor2";
 export const lightenColor = ({ amount = 10, color, }) => {
-  // if color is a css variable, don't lighten it
-  return color && !color.includes('var(--')
-    ? tinycolor(color).lighten(amount).toString()
-    : undefined;
+    // if color is a css variable, don't lighten it
+    return color && !color.includes('var(--')
+        ? tinycolor(color).lighten(amount).toString()
+        : undefined;
 };

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

@@ -1,24 +1,44 @@
 export const log = (message, type, ...additionalInfo) => {
-  // if type is error and debug is false, do not log
-  if (!window.Zonos.debug) {
-    return;
-  }
-  switch (type) {
-    case 'warn':
-      // eslint-disable-next-line no-console
-      console.warn(message, ...additionalInfo);
-      break;
-    case 'info':
-      // eslint-disable-next-line no-console
-      console.info(message, ...additionalInfo);
-      break;
-    default:
-      // eslint-disable-next-line no-console
-      console.groupCollapsed(message, ...additionalInfo);
-      // eslint-disable-next-line no-console
-      console.trace();
-      // eslint-disable-next-line no-console
-      console.groupEnd();
-      break;
-  }
+    var _a;
+    // if type is error and debug is false, do not log
+    if (!window.Zonos.debug) {
+        return;
+    }
+    let loggingIframe = document.querySelector('iframe#zonos---debug-logging-iframe');
+    if (!loggingIframe) {
+        // add a hidden iframe
+        loggingIframe = document.createElement('iframe');
+        loggingIframe.id = 'zonos---debug-logging-iframe';
+        loggingIframe.style.display = 'none';
+        loggingIframe.style.opacity = '0';
+        loggingIframe.style.position = 'absolute';
+        loggingIframe.style.top = '-9999px';
+        loggingIframe.style.left = '-9999px';
+        loggingIframe.style.width = '1px';
+        loggingIframe.style.height = '1px';
+        loggingIframe.style.border = 'none';
+        loggingIframe.style.overflow = 'hidden';
+        loggingIframe.style.visibility = 'hidden';
+        document.body.appendChild(loggingIframe);
+    }
+    // use the logging iframe's console to log just in case the console is disabled (overriden) by the site owner
+    const console = ((_a = loggingIframe.contentWindow) === null || _a === void 0 ? void 0 : _a.window.console) || window.console;
+    switch (type) {
+        case 'warn':
+            // eslint-disable-next-line no-console
+            console.warn(message, ...additionalInfo);
+            break;
+        case 'info':
+            // eslint-disable-next-line no-console
+            console.info(message, ...additionalInfo);
+            break;
+        default:
+            // eslint-disable-next-line no-console
+            console.groupCollapsed(message, ...additionalInfo);
+            // eslint-disable-next-line no-console
+            console.trace();
+            // eslint-disable-next-line no-console
+            console.groupEnd();
+            break;
+    }
 };

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

@@ -1,4 +1,4 @@
 export const logError = (message, ...rest) => {
-  // eslint-disable-next-line no-console
-  console.error(message, ...rest);
+    // eslint-disable-next-line no-console
+    console.error(message, ...rest);
 };

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

@@ -5,7 +5,7 @@ import merge from "lodash/merge";
  * @param value2[] List of objects to merge (need to have the same shape as value1)
  */
 export const mergeConfig = (defaultObj, fetchedObj, ...overrideObj) => {
-  // filter out null and undefined values
-  const overrideArgs = [defaultObj, fetchedObj, ...overrideObj].filter(Boolean);
-  return merge.apply(null, overrideArgs);
+    // filter out null and undefined values
+    const overrideArgs = [defaultObj, fetchedObj, ...overrideObj].filter(Boolean);
+    return merge.apply(null, overrideArgs);
 };

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

@@ -4,13 +4,13 @@ import { log } from "./logging/log";
  * Submit a gtag event if the gtag function is available.
  */
 export const submitGtag = (event) => {
-  const googleAnalyticSetting = zonosStore.checkoutSettings.analyticsProviders.find(item => item.type === 'GOOGLE_ANALYTICS');
-  // only submit if googleAnalytic in checkout setting is on.
-  if (!googleAnalyticSetting || (googleAnalyticSetting === null || googleAnalyticSetting === void 0 ? void 0 : googleAnalyticSetting.status) === 'DISABLED') {
-    return;
-  }
-  if (typeof window.gtag === 'function') {
-    log('Zonos submits gtag event', 'log', event);
-    window.gtag('event', event, {});
-  }
+    const googleAnalyticSetting = zonosStore.checkoutSettings.analyticsProviders.find(item => item.type === 'GOOGLE_ANALYTICS');
+    // only submit if googleAnalytic in checkout setting is on.
+    if (!googleAnalyticSetting || (googleAnalyticSetting === null || googleAnalyticSetting === void 0 ? void 0 : googleAnalyticSetting.status) === 'DISABLED') {
+        return;
+    }
+    if (typeof window.gtag === 'function') {
+        log('Zonos submits gtag event', 'log', event);
+        window.gtag('event', event, {});
+    }
 };

package/dist/collection/environment.js

@@ -14,146 +14,169 @@ export const inVercel = !!process.env.VERCEL;
 export const inCI = !!process.env.CI;
 const isVercelPreview = inVercel && process.env.VERCEL_ENV === 'preview';
 export const isVercelProd = inVercel && process.env.VERCEL_ENV === 'production';
-let packageVersion = `${process.env.npm_package_version}` ||
-  process.env.NEXT_PUBLIC_ZONOS_PACKAGE_VERSION;
+const packageVersion = `${process.env.npm_package_version}` ||
+    process.env.NEXT_PUBLIC_ZONOS_PACKAGE_VERSION;
 const UNPKG_ZONOS_URL = `https://unpkg.com/@zonos/elements@${packageVersion}`;
-export const formattedUrl = ({ 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}`;
-  }
-  // only run this in Vercel, ignore in CI
-  if (isVercelPreview || (inVercel && type === 'vercel-git')) {
-    // use vercel branch_url instead of the production url
-    const vercelGitCommitMessage = process.env.VERCEL_GIT_COMMIT_MESSAGE;
-    const branchName = process.env.VERCEL_GIT_COMMIT_REF;
-    if (!vercelGitCommitMessage || !branchName) {
-      throw new Error('Fail to get vercel commit ref or branch name');
+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;
     }
-    // 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 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', 'qa'].includes(branchName);
     const isServerless = 
     // url: route.js.zonos.com
     domainOnlyUrl.includes('route.js') ||
-      // url: zonos-elements-serverless-git-something
-      domainOnlyUrl.includes('serverless-git');
-    const projectName = isStorybook
-      ? 'zonos-elements-storybook'
-      : isServerless
-        ? 'zonos-elements-serverless'
-        : 'zonos-elements';
-    // generate generated deploy url based on the branch name
-    const vercelGitBranchSuffix = generateVercelDeployUrl({
-      branchName,
-      projectName,
-    });
-    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 && (isVercelProd || 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');
-  // only set version for the url once
-  return (isVercelProd || inCI) && !isVersionedUrl
-    ? `https://v${version}.${domainOnlyUrl}`
-    : `https://${domainOnlyUrl}`;
+        // url: zonos-elements-serverless-git-something
+        domainOnlyUrl.includes('serverless-git');
+    if (branchName === 'qa' && isServerless) {
+        // qa branch for the API is not versioned, should always has alpha prefix
+        return `https://alpha.${domainOnlyUrl}`;
+    }
+    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');
+    // 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');
+    // only set version for the url once
+    return (isProdBranch || _inCI) && !isVersionedUrl
+        ? `https://v${version}.${domainOnlyUrl}`
+        : `https://${domainOnlyUrl}`;
 };
 if (typeof window === 'undefined') {
-  // storybook can't access to any "node" modules
-  config();
+    // storybook can't access to any "node" modules
+    config();
 }
 if (inVercel || inCI) {
-  console.debug(JSON.stringify({
-    CI: inCI,
-    NODE_ENV: process.env.NODE_ENV,
-    inVercel,
-    packageVersion: packageVersion,
-  }, null, 2));
+    console.debug(JSON.stringify({
+        CI: inCI,
+        NODE_ENV: process.env.NODE_ENV,
+        inVercel,
+        packageVersion: packageVersion,
+    }, null, 2));
 }
 const skipValidation = inTestEnvironment;
 if (!skipValidation) {
-  console.debug('Checking env variables');
+    console.debug('Checking env variables');
 }
 else {
-  console.debug('Skipping env validation');
+    console.debug('Skipping env validation');
 }
 const envClient = {
-  NEXT_PUBLIC_FLAG_URL: z.string(),
-  NEXT_PUBLIC_ZONOS_API_KEY: z.string(),
-  NEXT_PUBLIC_ZONOS_CDN_URL: z.string(),
-  NEXT_PUBLIC_ZONOS_PACKAGE_VERSION: z.string(),
-  NEXT_PUBLIC_ZONOS_ROUTE_URL: z.string(),
-  NEXT_PUBLIC_ZONOS_UNPKG_CDN_URL: z.string(),
+    NEXT_PUBLIC_FLAG_URL: z.string(),
+    NEXT_PUBLIC_ZONOS_API_KEY: z.string(),
+    NEXT_PUBLIC_ZONOS_CDN_URL: z.string(),
+    NEXT_PUBLIC_ZONOS_PACKAGE_VERSION: z.string(),
+    NEXT_PUBLIC_ZONOS_ROUTE_URL: z.string(),
+    NEXT_PUBLIC_ZONOS_UNPKG_CDN_URL: z.string(),
 };
 const envClientSchema = z.object(envClient);
 export const env = createEnv({
-  skipValidation,
-  // eslint-disable-next-line sort-keys/sort-keys-fix
-  clientPrefix: 'NEXT_PUBLIC_',
-  onInvalidAccess: variable => {
-    throw new Error(`❌ Attempted to access a server-side environment variable on the client: ${variable}`);
-  },
-  onValidationError: error => {
-    console.error('❌ Invalid environment variables:', error.flatten().fieldErrors);
-    throw new Error('Invalid environment variables');
-  },
-  // eslint-disable-next-line sort-keys/sort-keys-fix
-  client: envClient,
-  // eslint-disable-next-line sort-keys/sort-keys-fix
-  runtimeEnvStrict: {
-    NEXT_PUBLIC_FLAG_URL: process.env.NEXT_PUBLIC_FLAG_URL,
-    NEXT_PUBLIC_ZONOS_API_KEY: process.env.NEXT_PUBLIC_ZONOS_API_KEY,
-    /**
-     * Versioning url for production environment
-     * @example v1.2.3.js.zonos.com
-     */
-    NEXT_PUBLIC_ZONOS_CDN_URL: formattedUrl({
-      packageVersion,
-      type: 'full',
-      url: process.env.NEXT_PUBLIC_ZONOS_CDN_URL,
-    }),
-    NEXT_PUBLIC_ZONOS_PACKAGE_VERSION: packageVersion,
-    /**
-     * Versioning url for production environment  (major version only for route.js.zonos.com)
-     * @example v1.route.js.zonos.com
-     */
-    NEXT_PUBLIC_ZONOS_ROUTE_URL: formattedUrl({
-      packageVersion,
-      type: 'major',
-      url: process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL,
-    }),
-    NEXT_PUBLIC_ZONOS_UNPKG_CDN_URL: UNPKG_ZONOS_URL,
-  },
+    skipValidation,
+    // eslint-disable-next-line sort-keys/sort-keys-fix
+    clientPrefix: 'NEXT_PUBLIC_',
+    onInvalidAccess: variable => {
+        throw new Error(`❌ Attempted to access a server-side environment variable on the client: ${variable}`);
+    },
+    onValidationError: error => {
+        console.error('❌ Invalid environment variables:', error.flatten().fieldErrors);
+        throw new Error('Invalid environment variables');
+    },
+    // eslint-disable-next-line sort-keys/sort-keys-fix
+    client: envClient,
+    // eslint-disable-next-line sort-keys/sort-keys-fix
+    runtimeEnvStrict: {
+        NEXT_PUBLIC_FLAG_URL: process.env.NEXT_PUBLIC_FLAG_URL,
+        NEXT_PUBLIC_ZONOS_API_KEY: process.env.NEXT_PUBLIC_ZONOS_API_KEY,
+        /**
+         * Versioning url for production environment
+         * @example v1.2.3.js.zonos.com
+         */
+        NEXT_PUBLIC_ZONOS_CDN_URL: formattedUrl({
+            branchName: currentBranch,
+            inCI,
+            inVercel,
+            isVercelPreview,
+            packageVersion,
+            type: 'full',
+            url: process.env.NEXT_PUBLIC_ZONOS_CDN_URL,
+        }),
+        NEXT_PUBLIC_ZONOS_PACKAGE_VERSION: packageVersion,
+        /**
+         * Versioning url for production environment  (major version only for route.js.zonos.com)
+         * @example v1.route.js.zonos.com
+         */
+        NEXT_PUBLIC_ZONOS_ROUTE_URL: formattedUrl({
+            branchName: currentBranch,
+            inCI,
+            inVercel,
+            isVercelPreview,
+            packageVersion,
+            type: 'major',
+            url: process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL,
+        }),
+        NEXT_PUBLIC_ZONOS_UNPKG_CDN_URL: UNPKG_ZONOS_URL,
+    },
 });
 /**
  * Env object that has all of native env variable used in code to replace them with
  * actual values from .env
  */
 export const getReplaceEnv = (props) => Object.keys(env).reduce((prev, curr) => {
-  const currEnv = curr;
-  const override = props === null || props === void 0 ? void 0 : props.override;
-  const foundOverride = !!override && currEnv in override;
-  // return the override value if it's found
-  if (foundOverride) {
-    // @ts-expect-error
-    prev[`process.env.${currEnv}`] = `"${override[currEnv]}"`;
+    const currEnv = curr;
+    const override = props === null || props === void 0 ? void 0 : props.override;
+    const foundOverride = !!override && currEnv in override;
+    // return the override value if it's found
+    if (foundOverride) {
+        // @ts-expect-error
+        prev[`process.env.${currEnv}`] = `"${override[currEnv]}"`;
+        return prev;
+    }
+    if (currEnv) {
+        // @ts-expect-error
+        prev[`process.env.${currEnv}`] = `"${env[currEnv] || ''}"`;
+    }
     return prev;
-  }
-  if (currEnv) {
-    // @ts-expect-error
-    prev[`process.env.${currEnv}`] = `"${env[currEnv] || ''}"`;
-  }
-  return prev;
 }, {});