@zonos/elements 1.2.1 → 1.2.3

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

@@ -20,6 +20,7 @@ const { onChange, reset, state: stripeStore, } = createStore(() => ({
   stripeAddressEventData: null,
   stripeAddressUsedWhenFetchingLC: null,
   stripeElements: null,
+  stripeElementsOptions: null,
   stripeLinkElement: null,
   stripeLinkEventData: null,
   stripeLinkUsedWhenFetchingLC: null,
@@ -60,13 +61,22 @@ const initStripeElements = async (props) => {
       overridePrimaryColor: props === null || props === void 0 ? void 0 : props.overridePrimaryColor,
       overrideTheme: props === null || props === void 0 ? void 0 : props.overrideTheme,
     });
+    // compare with the previous options to see if we need to update
+    const isSameOptions = JSON.stringify(stripeOptions) ===
+      JSON.stringify(stripeStore.stripeElementsOptions);
     if (!stripeStore.stripeElements) {
       // init stripe elements if it doesn't exist
       stripeStore.stripeElements = (_a = stripeStore.stripe) === null || _a === void 0 ? void 0 : _a.elements(stripeOptions);
+      // save stripe elements options for later comparison
+      stripeStore.stripeElementsOptions = stripeOptions;
+      log('Stripe elements initialized');
+      return;
     }
-    else {
+    if (!isSameOptions) {
       // update elements with new option if it already exists
       stripeStore.stripeElements.update(stripeOptions);
+      // save stripe elements options for later comparison
+      stripeStore.stripeElementsOptions = stripeOptions;
     }
     log('Stripe elements initialized');
   }

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

@@ -22,23 +22,45 @@ const { state: localizationStore } = createStore({
   shippingZoneCountries: null,
   targetCurrency: 'USD',
 });
+const triggerGetExchangeRate = async (isGuaranteed) => {
+  const { exchangeRate, maxAge } = await getExchangeRate({
+    country: localizationStore.selectedCountryCode,
+    isGuaranteed,
+    sourceCurrency: zonosStore.sourceCurrency,
+    targetCurrency: localizationStore.targetCurrency,
+  });
+  if (exchangeRate) {
+    localizationStore.exchangeRate = exchangeRate;
+    currencyDisplay();
+  }
+  return { maxAge };
+};
+// This recursive function is for users who step away from their computer and come back needing a new exchange rate
+const startExchangeRateTimeout = ({ isGuaranteed, maxAge, }) => {
+  if (localizationStore.exchangeRateTimeout) {
+    clearTimeout(localizationStore.exchangeRateTimeout);
+  }
+  // maxAge comes in seconds, convert to milliseconds
+  const defaultMaxAge = 5 * 60;
+  const maxAgeToUse = maxAge || defaultMaxAge;
+  // Recursively set timeouts to get new exchange rates when the current one expires
+  localizationStore.exchangeRateTimeout = setTimeout(async () => {
+    const { maxAge: newMaxAge } = await triggerGetExchangeRate(isGuaranteed);
+    startExchangeRateTimeout({ isGuaranteed, maxAge: newMaxAge });
+  }, maxAgeToUse * 1000);
+};
 const getNewLocalization = async () => {
   log('get new localization store');
   const { isShippableCountry, selectedCountryCode } = localizationStore;
-  const isGuaranteed = zonosStore.checkoutSettings.visibilityStatus === 'ENABLED';
   if (zonosStore.helloSettings.currencyBehavior === 'DISABLED' ||
     !isShippableCountry ||
     !selectedCountryCode) {
     return;
   }
-  localizationStore.exchangeRate = await getExchangeRate({
-    country: localizationStore.selectedCountryCode,
-    isGuaranteed,
-    sourceCurrency: zonosStore.sourceCurrency,
-    targetCurrency: localizationStore.targetCurrency,
-  });
-  if (localizationStore.exchangeRate) {
-    currencyDisplay();
+  if (zonosStore.sourceCurrency !== localizationStore.targetCurrency) {
+    const isGuaranteed = zonosStore.checkoutSettings.visibilityStatus === 'ENABLED';
+    const { maxAge } = await triggerGetExchangeRate(isGuaranteed);
+    startExchangeRateTimeout({ isGuaranteed, maxAge });
   }
   localizationStore.countryLandedCost = await getCountryLandedCost(localizationStore.selectedCountryCode);
 };

package/dist/collection/components/stripe/zonos-address/zonos-address.js

@@ -33,6 +33,11 @@ export class ZonosAddress {
           ? Object.values(shippableCountries).map(country => country.code)
           : [],
         contacts: this.defaultAddress ? [this.defaultAddress] : undefined,
+        defaultValues: {
+          address: {
+            country: localizationStore.selectedCountryCode || 'AL',
+          },
+        },
         display: {
           name: 'split',
         },

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

@@ -2,16 +2,21 @@ import { handleFetch } from "../handleFetch";
 import { logError } from "../logging/logError";
 export const getExchangeRate = async ({ country, isGuaranteed, sourceCurrency, targetCurrency, }) => {
   var _a;
+  // If source currency matches target currency (US -> US) and is not a guaranteed rate, return null
+  if (sourceCurrency === targetCurrency && !isGuaranteed) {
+    return { exchangeRate: null, maxAge: null };
+  }
   const url = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/exchange-rates?sourceCurrency=${sourceCurrency}&targetCurrency=${targetCurrency}&isGuaranteed=${isGuaranteed}&country=${country}}`;
   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}`);
-    return null;
+    return { exchangeRate: null, maxAge: null };
   }
-  const { rate, targetFormat } = json.exchangeRateCreate;
+  const { maxAge, rate, targetFormat } = json.exchangeRateCreate;
   if (rate) {
     sessionStorage.setItem(country + '_rate', JSON.stringify(rate));
-    return { rate, targetFormat };
+    const exchangeRate = { rate, targetFormat };
+    return { exchangeRate, maxAge };
   }
-  return null;
+  return { exchangeRate: null, maxAge: null };
 };

package/dist/collection/components/utils/checkout/initCheckout.js

@@ -8,7 +8,7 @@ const injectCheckoutElement = () => {
     document.body.appendChild(newCheckoutElement);
   }
 };
-export const initCheckout = async (config) => {
+export const initCheckout = (config) => {
   if (!config.placeOrderButtonSelector) {
     // do nothing if checkout button anchor is not set
     return;

package/dist/collection/environment.js

@@ -3,6 +3,9 @@
 import { createEnv } from "@t3-oss/env-core";
 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";
 export const isClientSide = typeof window !== 'undefined';
 export const inProdEnvironment = process.env.NODE_ENV === 'production';
 export const inTestEnvironment = process.env.NODE_ENV === 'test';
@@ -15,7 +18,6 @@ let 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, }) => {
-  var _a;
   if (!url) {
     // return origin value so t3 can throw error when it's empty
     return url;
@@ -29,17 +31,11 @@ export const formattedUrl = ({ packageVersion: _packageVersion, type = 'full', u
   // only run this in Vercel, ignore in CI
   if (isVercelPreview || (inVercel && type === 'vercel-git')) {
     // use vercel branch_url instead of the production url
-    const vercelGitBranchUrl = process.env.VERCEL_BRANCH_URL;
-    if (!vercelGitBranchUrl) {
-      throw new Error('Fail to get vercel branch 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');
     }
-    // extract the git suffix from the vercel git branch url
-    // ex: zonos-elements-storybook-git-fix-e2e-cron-test-zonos.vercel.app => git-fix-e2e-cron-test-zonos.vercel.app
-    const gitSuffix = (_a = /.*-git-(.*)/g.exec(vercelGitBranchUrl)) === null || _a === void 0 ? void 0 : _a[1];
-    if (!gitSuffix) {
-      throw new Error(`Fail to get git suffix from url ${url}`);
-    }
-    // replace the git suffix with the project name
     // get project name based on the `${url}`
     const isStorybook = 
     // url: storybook.js.zonos.com
@@ -56,7 +52,12 @@ export const formattedUrl = ({ packageVersion: _packageVersion, type = 'full', u
       : isServerless
         ? 'zonos-elements-serverless'
         : 'zonos-elements';
-    return `https://${projectName}-git-${gitSuffix}`;
+    // 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)) {
@@ -140,8 +141,16 @@ export const env = createEnv({
  * Env object that has all of native env variable used in code to replace them with
  * actual values from .env
  */
-export const getReplaceEnv = () => Object.keys(env).reduce((prev, curr) => {
+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]}"`;
+    return prev;
+  }
   if (currEnv) {
     // @ts-expect-error
     prev[`process.env.${currEnv}`] = `"${env[currEnv] || ''}"`;

package/dist/collection/scripts/zonos.js

@@ -2,7 +2,42 @@ var _a;
 import { log } from "../components/utils/logging/log";
 import { logError } from "../components/utils/logging/logError";
 import { zonosLoadStripe } from "./loadStripe";
-const ZONOS_URL = process.env.NEXT_PUBLIC_ZONOS_CDN_URL;
+// 3 hours
+const EXPIRED_QA_TIME = 3 * 60 * 60 * 1000;
+// validate the time format (yyyymmddhhmmss) in the qa params if exceeds 1 hour, don't use qa
+const isZonosQa = (() => {
+  const zonosQaTime = window.location.search.match(/\?.*(&*)zonosQa=(\d+)/);
+  if (!zonosQaTime) {
+    return false;
+  }
+  const [, , zonosQaTimeExtracted] = zonosQaTime;
+  if (!zonosQaTimeExtracted) {
+    return false;
+  }
+  const zonosQaTimeValue = parseInt(zonosQaTimeExtracted, 10);
+  const now = new Date();
+  const nowTime = now.getTime();
+  const isValid = nowTime - zonosQaTimeValue < EXPIRED_QA_TIME;
+  if (isValid) {
+    // Zonos class is not available in here yet, so we use console.warn instead of log util
+    // eslint-disable-next-line no-console
+    console.warn(`[ZONOS-WARNING] USING DEBUG DOMAIN, THIS IS ONLY FOR ZONOS DEVELOPER TO DEBUG, PLEASE REMOVE zonosQa=xxx OUT OF URL IF YOU DON'T KNOW WHAT YOU'RE DOING`);
+  }
+  else {
+    // Zonos class is not available in here yet, so we use console.warn instead of log util
+    // eslint-disable-next-line no-console
+    console.warn(`[ZONOS-WARNING] QA DOMAIN IS EXPIRED, USING PRODUCTION DOMAIN NOW`);
+    // remove the zonosQa param from url
+    const urlSearchParams = new URLSearchParams(window.location.search);
+    urlSearchParams.delete('zonosQa');
+    const newUrl = `${window.location.pathname}?${urlSearchParams.toString()}`;
+    window.history.replaceState({}, '', newUrl);
+  }
+  return isValid;
+})();
+const ZONOS_URL = isZonosQa
+  ? 'https://debug.js.zonos.com'
+  : process.env.NEXT_PUBLIC_ZONOS_CDN_URL;
 const UNPKG_ZONOS_URL = process.env.NEXT_PUBLIC_ZONOS_UNPKG_CDN_URL;
 const INTER_FONT_URL = 'https://rsms.me';
 const INTER_FONT_REGEX = /^https:\/\/rsms\.me\/inter\/inter\.css(.*)$/;
@@ -15,6 +50,7 @@ Zonos.debug = !!window.location.search.match(/\?.*(&*)zonosDebug=1/);
 Zonos.isBigCommerce = false;
 Zonos.internationalHideSelector = '';
 Zonos.version = `v${process.env.NEXT_PUBLIC_ZONOS_PACKAGE_VERSION}`;
+Zonos.getCurrentTimestamp = () => new Date().getTime();
 Zonos.init = async ({ appearance, checkoutSettings, currencyConverter, helloSettings, zonosApiKey, }) => {
   if (Zonos.doneInit) {
     // do nothing if zonos is already initializeds
@@ -26,7 +62,6 @@ Zonos.init = async ({ appearance, checkoutSettings, currencyConverter, helloSett
     return;
   }
   _a.zonosApiKey = zonosApiKey;
-  // eslint-disable-next-line no-console
   log('init zonos');
   // inject zonos cdn
   Zonos.injectZonosCdn();
@@ -56,10 +91,56 @@ Zonos.showNotification = (notification) => {
   const zonosController = document.querySelector('zonos-controller');
   void (zonosController === null || zonosController === void 0 ? void 0 : zonosController.showNotification(notification));
 };
+Zonos.disablePlaceOrderButtons = ({ autoEnable = true, disable, placeOrderButtonSelector, }) => {
+  // if placeOrderAnchor is passed in the config for checkoutSettings, disable the place order button until zonos is initialized
+  if (placeOrderButtonSelector) {
+    const placeOrderButton = document.querySelectorAll(placeOrderButtonSelector);
+    const disableEvent = (e) => {
+      const target = e.target;
+      // prevent default and propagation when the item has disabled attribute
+      if (target.getAttribute('disabled')) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
+    placeOrderButton.forEach(button => {
+      if (disable) {
+        button.setAttribute('disabled', 'true');
+        // prevent the selector to perform default action when it's disabled
+        button.addEventListener('click', disableEvent);
+      }
+      else {
+        button.removeAttribute('disabled');
+        // clean up the event listener
+        button.removeEventListener('click', disableEvent);
+      }
+    });
+    // only auto enable if autoEnable is true and we are setting button disable
+    if (autoEnable && disable) {
+      setTimeout(() => {
+        // release it if zonos is not initialized after 5 seconds (this is to prevent the place order button from being disabled forever due to api)
+        placeOrderButton.forEach(button => {
+          button.removeAttribute('disabled');
+          // clean up the event listener if exists
+          button.removeEventListener('click', disableEvent);
+        });
+      }, 5000);
+    }
+  }
+};
 Zonos.injectController = ({ config, zonosApiKey, }) => {
+  var _b;
   if (document.querySelector('zonos-controller')) {
     return;
   }
+  // if placeOrderAnchor is passed in the config for checkoutSettings, disable the place order button until zonos is initialized
+  if ((_b = config.checkoutSettings) === null || _b === void 0 ? void 0 : _b.placeOrderButtonSelector) {
+    const placeOrderButtonSelector = config.checkoutSettings.placeOrderButtonSelector;
+    _a.disablePlaceOrderButtons({
+      disable: true,
+      placeOrderButtonSelector,
+    });
+  }
   const zonosController = document.createElement('zonos-controller');
   zonosController.config = config;
   zonosController.zonosApiKey = zonosApiKey;
@@ -167,7 +248,7 @@ Zonos.injectStylesheet = ({ fallBackDomain, stylesheetDomain, theRestUrl, }) =>
 };
 Zonos.injectZonosCss = () => {
   const findStyleLink = () => {
-    return !!document.querySelector(`link[rel="stylesheet"][href^="${ZONOS_URL}/dist/zonos-elements/zonos-elements.css"]`);
+    return !!document.querySelector(`link[rel="stylesheet"][href*="/dist/zonos-elements/zonos-elements.css"]`);
   };
   if (findStyleLink()) {
     // eslint-disable-next-line no-console

package/dist/collection/utils/generateVercelDeployUrl.js

@@ -1,5 +1,6 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-import sha256 from "crypto-js/sha256";
+// For some reason, rollup couldn't bundle this file without specifying .js extension
+// eslint-disable-next-line import/no-extraneous-dependencies, import/extensions
+import sha256 from "crypto-js/sha256.js";
 /**
  * Generate a Vercel deploy URL based on the branch name and project name
  * @note not including https://

package/dist/components/cart.js

@@ -90,6 +90,7 @@ const { onChange: onChange$1, reset: reset$1, state: stripeStore, } = createStor
   stripeAddressEventData: null,
   stripeAddressUsedWhenFetchingLC: null,
   stripeElements: null,
+  stripeElementsOptions: null,
   stripeLinkElement: null,
   stripeLinkEventData: null,
   stripeLinkUsedWhenFetchingLC: null,
@@ -130,13 +131,22 @@ const initStripeElements = async (props) => {
       overridePrimaryColor: props === null || props === void 0 ? void 0 : props.overridePrimaryColor,
       overrideTheme: props === null || props === void 0 ? void 0 : props.overrideTheme,
     });
+    // compare with the previous options to see if we need to update
+    const isSameOptions = JSON.stringify(stripeOptions) ===
+      JSON.stringify(stripeStore.stripeElementsOptions);
     if (!stripeStore.stripeElements) {
       // init stripe elements if it doesn't exist
       stripeStore.stripeElements = (_a = stripeStore.stripe) === null || _a === void 0 ? void 0 : _a.elements(stripeOptions);
+      // save stripe elements options for later comparison
+      stripeStore.stripeElementsOptions = stripeOptions;
+      log('Stripe elements initialized');
+      return;
     }
-    else {
+    if (!isSameOptions) {
       // update elements with new option if it already exists
       stripeStore.stripeElements.update(stripeOptions);
+      // save stripe elements options for later comparison
+      stripeStore.stripeElementsOptions = stripeOptions;
     }
     log('Stripe elements initialized');
   }

package/dist/components/localization.js

@@ -3196,18 +3196,23 @@ const getCountryLandedCost = async (countryCode) => {
 
 const getExchangeRate = async ({ country, isGuaranteed, sourceCurrency, targetCurrency, }) => {
   var _a;
+  // If source currency matches target currency (US -> US) and is not a guaranteed rate, return null
+  if (sourceCurrency === targetCurrency && !isGuaranteed) {
+    return { exchangeRate: null, maxAge: null };
+  }
   const url = `${"https://v1.route.js.zonos.com"}/api/exchange-rates?sourceCurrency=${sourceCurrency}&targetCurrency=${targetCurrency}&isGuaranteed=${isGuaranteed}&country=${country}}`;
   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}`);
-    return null;
+    return { exchangeRate: null, maxAge: null };
   }
-  const { rate, targetFormat } = json.exchangeRateCreate;
+  const { maxAge, rate, targetFormat } = json.exchangeRateCreate;
   if (rate) {
     sessionStorage.setItem(country + '_rate', JSON.stringify(rate));
-    return { rate, targetFormat };
+    const exchangeRate = { rate, targetFormat };
+    return { exchangeRate, maxAge };
   }
-  return null;
+  return { exchangeRate: null, maxAge: null };
 };
 
 const getLocaleMessages = async ({ countryCode, localeTo, storeId, }) => {
@@ -3465,23 +3470,45 @@ const { state: localizationStore } = createStore({
   shippingZoneCountries: null,
   targetCurrency: 'USD',
 });
+const triggerGetExchangeRate = async (isGuaranteed) => {
+  const { exchangeRate, maxAge } = await getExchangeRate({
+    country: localizationStore.selectedCountryCode,
+    isGuaranteed,
+    sourceCurrency: zonosStore.sourceCurrency,
+    targetCurrency: localizationStore.targetCurrency,
+  });
+  if (exchangeRate) {
+    localizationStore.exchangeRate = exchangeRate;
+    currencyDisplay();
+  }
+  return { maxAge };
+};
+// This recursive function is for users who step away from their computer and come back needing a new exchange rate
+const startExchangeRateTimeout = ({ isGuaranteed, maxAge, }) => {
+  if (localizationStore.exchangeRateTimeout) {
+    clearTimeout(localizationStore.exchangeRateTimeout);
+  }
+  // maxAge comes in seconds, convert to milliseconds
+  const defaultMaxAge = 5 * 60;
+  const maxAgeToUse = maxAge || defaultMaxAge;
+  // Recursively set timeouts to get new exchange rates when the current one expires
+  localizationStore.exchangeRateTimeout = setTimeout(async () => {
+    const { maxAge: newMaxAge } = await triggerGetExchangeRate(isGuaranteed);
+    startExchangeRateTimeout({ isGuaranteed, maxAge: newMaxAge });
+  }, maxAgeToUse * 1000);
+};
 const getNewLocalization = async () => {
   log('get new localization store');
   const { isShippableCountry, selectedCountryCode } = localizationStore;
-  const isGuaranteed = zonosStore.checkoutSettings.visibilityStatus === 'ENABLED';
   if (zonosStore.helloSettings.currencyBehavior === 'DISABLED' ||
     !isShippableCountry ||
     !selectedCountryCode) {
     return;
   }
-  localizationStore.exchangeRate = await getExchangeRate({
-    country: localizationStore.selectedCountryCode,
-    isGuaranteed,
-    sourceCurrency: zonosStore.sourceCurrency,
-    targetCurrency: localizationStore.targetCurrency,
-  });
-  if (localizationStore.exchangeRate) {
-    currencyDisplay();
+  if (zonosStore.sourceCurrency !== localizationStore.targetCurrency) {
+    const isGuaranteed = zonosStore.checkoutSettings.visibilityStatus === 'ENABLED';
+    const { maxAge } = await triggerGetExchangeRate(isGuaranteed);
+    startExchangeRateTimeout({ isGuaranteed, maxAge });
   }
   localizationStore.countryLandedCost = await getCountryLandedCost(localizationStore.selectedCountryCode);
 };

package/dist/components/zonos-address2.js

@@ -34,6 +34,11 @@ const ZonosAddress = /*@__PURE__*/ proxyCustomElement(class ZonosAddress extends
           ? Object.values(shippableCountries).map(country => country.code)
           : [],
         contacts: this.defaultAddress ? [this.defaultAddress] : undefined,
+        defaultValues: {
+          address: {
+            country: localizationStore.selectedCountryCode || 'AL',
+          },
+        },
         display: {
           name: 'split',
         },

package/dist/components/zonos-checkout.js

@@ -39,7 +39,7 @@ const MessageIcon = `<svg width="18" height="18" viewBox="0 0 18 18" fill="none"
 
 const RemoveIcon = `<svg color="var(--amino-gray-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" data-is-secondary-color="true" fill="var(--amino-gray-200)" fill-rule="evenodd"></path><path clip-rule="evenodd" d="M8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>`;
 
-const zonosCheckoutCss = ".sc-zonos-checkout-h{font-family:Inter;display:block}.sc-zonos-checkout-h img.sc-zonos-checkout{max-width:100%}.sc-zonos-checkout-h dl.sc-zonos-checkout,.sc-zonos-checkout-h dd.sc-zonos-checkout,.sc-zonos-checkout-h h1.sc-zonos-checkout,.sc-zonos-checkout-h h2.sc-zonos-checkout,.sc-zonos-checkout-h h3.sc-zonos-checkout,.sc-zonos-checkout-h h4.sc-zonos-checkout,.sc-zonos-checkout-h h5.sc-zonos-checkout,.sc-zonos-checkout-h h6.sc-zonos-checkout,.sc-zonos-checkout-h hr.sc-zonos-checkout,.sc-zonos-checkout-h figure.sc-zonos-checkout,.sc-zonos-checkout-h p.sc-zonos-checkout,.sc-zonos-checkout-h pre.sc-zonos-checkout{margin:0}.sc-zonos-checkout-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar{width:10px}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{display:-ms-flexbox;display:flex;height:100%;overflow:hidden;border-radius:var(--border-radius, var(--amino-radius-10))}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout,.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{-ms-flex:1;flex:1;padding:var(--amino-space-48) var(--amino-space-56)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout{background-color:var(--primary-color, var(--amino-gray-0));border-right:1px solid var(--amino-gray-200)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{background-color:var(--amino-gray-0);padding-bottom:var(--amino-space-80)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{width:100%;max-height:100%;height:100%;overflow:auto;-ms-flex-direction:column;flex-direction:column;background-color:var(--amino-gray-0);-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:var(--amino-space-24);padding-bottom:50px}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--header.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;width:100%}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--header.sc-zonos-checkout img.sc-zonos-checkout{width:150px;min-width:150px}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--logo.sc-zonos-checkout{margin-bottom:0}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout zonos-checkout-finish.sc-zonos-checkout{-ms-flex:1;flex:1}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--back-button.sc-zonos-checkout{margin-bottom:var(--amino-space-24)}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{padding:0 var(--amino-space-8) var(--amino-space-8)}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--payment-error-banner.sc-zonos-checkout{margin-top:var(--amino-space-24)}.sc-zonos-checkout-h .zonos--right.sc-zonos-checkout{position:relative}.sc-zonos-checkout-h .zonos--right.sc-zonos-checkout .zonos--close-button.sc-zonos-checkout{position:absolute;right:var(--amino-space-32);top:var(--amino-space-32)}.sc-zonos-checkout-h .zonos--footer.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center;position:absolute;bottom:var(--amino-space-32);right:var(--amino-space-56);gap:var(--amino-space-8)}.sc-zonos-checkout-h .zonos--wrapper.sc-zonos-checkout{overflow:auto;max-height:100%;position:relative}.sc-zonos-checkout-h .flex--wrapper.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-height:100%}.sc-zonos-checkout-h .zonos--logo.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.sc-zonos-checkout-h .zonos--checkout-default-message.sc-zonos-checkout{margin-left:var(--amino-space-76);margin-bottom:var(--amino-space-8)}.preview.sc-zonos-checkout-h{min-width:500px;margin:auto}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{border:var(--amino-border)}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{padding:var(--amino-space-32)}.mobile.sc-zonos-checkout-h{min-width:auto}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:auto;border-radius:0;max-height:100%;height:100%;border:0}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout,.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{padding:var(--amino-space-12)}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout{-ms-flex-order:2;order:2}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{-ms-flex-order:1;order:1;padding-top:var(--amino-space-16)}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--amino-space-16);margin-top:var(--amino-space-24);border:var(--amino-border);border-radius:var(--border-radius, var(--amino-radius-10));background-color:var(--amino-gray-50);padding:var(--amino-space-12);margin-top:var(--amino-space-32)}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{max-height:100%}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--footer.sc-zonos-checkout{-ms-flex-order:3;order:3}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{width:auto}.mobile.sc-zonos-checkout-h .zonos--cart-subtotal.sc-zonos-checkout{margin:0}.mobile.sc-zonos-checkout-h .zonos--footer.sc-zonos-checkout{bottom:0;left:0;padding:var(--amino-space-12);position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--amino-gray-0)}";
+const zonosCheckoutCss = ".sc-zonos-checkout-h{font-family:Inter;display:block}.sc-zonos-checkout-h img.sc-zonos-checkout{max-width:100%}.sc-zonos-checkout-h dl.sc-zonos-checkout,.sc-zonos-checkout-h dd.sc-zonos-checkout,.sc-zonos-checkout-h h1.sc-zonos-checkout,.sc-zonos-checkout-h h2.sc-zonos-checkout,.sc-zonos-checkout-h h3.sc-zonos-checkout,.sc-zonos-checkout-h h4.sc-zonos-checkout,.sc-zonos-checkout-h h5.sc-zonos-checkout,.sc-zonos-checkout-h h6.sc-zonos-checkout,.sc-zonos-checkout-h hr.sc-zonos-checkout,.sc-zonos-checkout-h figure.sc-zonos-checkout,.sc-zonos-checkout-h p.sc-zonos-checkout,.sc-zonos-checkout-h pre.sc-zonos-checkout{margin:0}.sc-zonos-checkout-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar{width:10px}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{display:-ms-flexbox;display:flex;height:100%;overflow:hidden;border-radius:var(--border-radius, var(--amino-radius-10))}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout,.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{-ms-flex:1;flex:1;padding:var(--amino-space-48) var(--amino-space-56)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout{background-color:var(--primary-color, var(--amino-gray-0));border-right:1px solid var(--amino-gray-200)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{background-color:var(--amino-gray-0);padding-bottom:var(--amino-space-80)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{width:100%;max-height:100%;height:100%;overflow:auto;-ms-flex-direction:column;flex-direction:column;background-color:var(--amino-gray-0);-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:var(--amino-space-24);padding-bottom:50px}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--header.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;width:100%}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--header.sc-zonos-checkout img.sc-zonos-checkout{width:150px;min-width:150px}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--logo.sc-zonos-checkout{margin-bottom:0}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout zonos-checkout-finish.sc-zonos-checkout{-ms-flex:1;flex:1}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--back-button.sc-zonos-checkout{margin-bottom:var(--amino-space-24)}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{padding:0 var(--amino-space-8) var(--amino-space-8)}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--payment-error-banner.sc-zonos-checkout{margin-top:var(--amino-space-24)}.sc-zonos-checkout-h .zonos--right.sc-zonos-checkout{position:relative}.sc-zonos-checkout-h .zonos--right.sc-zonos-checkout .zonos--close-button.sc-zonos-checkout{position:absolute;right:var(--amino-space-24);top:var(--amino-space-24)}.sc-zonos-checkout-h .zonos--footer.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center;position:absolute;bottom:var(--amino-space-32);right:var(--amino-space-56);gap:var(--amino-space-8)}.sc-zonos-checkout-h .zonos--wrapper.sc-zonos-checkout{overflow:auto;max-height:100%;position:relative}.sc-zonos-checkout-h .flex--wrapper.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-height:100%}.sc-zonos-checkout-h .zonos--logo.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.sc-zonos-checkout-h .zonos--checkout-default-message.sc-zonos-checkout{margin-left:var(--amino-space-76);margin-bottom:var(--amino-space-8)}.preview.sc-zonos-checkout-h{min-width:500px;margin:auto}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{border:var(--amino-border)}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{padding:var(--amino-space-32)}.mobile.sc-zonos-checkout-h{min-width:auto}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:auto;border-radius:0;max-height:100%;height:100%;border:0}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout,.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{padding:var(--amino-space-12)}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout{-ms-flex-order:2;order:2}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{-ms-flex-order:1;order:1;padding-top:var(--amino-space-16)}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--amino-space-16);margin-top:var(--amino-space-24);border:var(--amino-border);border-radius:var(--border-radius, var(--amino-radius-10));background-color:var(--amino-gray-50);padding:var(--amino-space-12);margin-top:var(--amino-space-32)}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{max-height:100%}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--footer.sc-zonos-checkout{-ms-flex-order:3;order:3}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{width:auto}.mobile.sc-zonos-checkout-h .zonos--cart-subtotal.sc-zonos-checkout{margin:0}.mobile.sc-zonos-checkout-h .zonos--footer.sc-zonos-checkout{bottom:0;left:0;padding:var(--amino-space-12);position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--amino-gray-0)}";
 
 const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout extends HTMLElement {
   constructor() {
@@ -155,6 +155,8 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
         e.preventDefault();
         e.stopPropagation();
         log('zonos checkout button clicked');
+        // start loading
+        stripeStore.isFetchingSession = true;
         this.open = true;
         try {
           // buildCartDetail need to be catch since it may throw error
@@ -165,6 +167,8 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
           submitGtag('zonos-checkout-start');
         }
         catch (err) {
+          // stop loading
+          stripeStore.isFetchingSession = false;
           cartStoreUpdateToErrorState({
             messages: [
               translate("There's been an error creating your checkout session. Please reload and try again or contact support if the error persists"),

package/dist/components/zonos-controller.js

@@ -23,7 +23,7 @@ const injectCheckoutElement = () => {
     document.body.appendChild(newCheckoutElement);
   }
 };
-const initCheckout = async (config) => {
+const initCheckout = (config) => {
   if (!config.placeOrderButtonSelector) {
     // do nothing if checkout button anchor is not set
     return;
@@ -64,6 +64,44 @@ const ZonosController$1 = /*@__PURE__*/ proxyCustomElement(class ZonosController
     this.__registerHost();
     this.__attachShadow();
     this.stripeInitEvent = createEvent(this, "stripeInitEvent", 7);
+    this.disablePlaceOrderButtons = ({ disable }) => {
+      const placeOrderButtonSelector = zonosStore.checkoutSettings.placeOrderButtonSelector;
+      if (!placeOrderButtonSelector) {
+        return;
+      }
+      const disableEvent = (e) => {
+        const target = e.target;
+        // prevent default and propagation when the item has disabled attribute
+        if (target.getAttribute('disabled')) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      };
+      const placeOrderButton = document.querySelectorAll(placeOrderButtonSelector);
+      placeOrderButton.forEach(button => {
+        if (disable) {
+          button.setAttribute('disabled', 'true');
+          // prevent the selector to perform default action when it's disabled
+          button.addEventListener('click', disableEvent);
+        }
+        else {
+          button.removeAttribute('disabled');
+          // clean up the event listener
+          button.removeEventListener('click', disableEvent);
+        }
+      });
+      // only auto enable if autoEnable is true and the state is enable
+      if (disable) {
+        setTimeout(() => {
+          // release it if zonos is not initialized after 5 seconds (this is to prevent the place order button from being disabled forever due to api)
+          placeOrderButton.forEach(button => {
+            button.removeAttribute('disabled');
+            // clean up the event listener if exists
+            button.removeEventListener('click', disableEvent);
+          });
+        }, 5000);
+      }
+    };
     this.config = undefined;
     this.zonosApiKey = undefined;
   }
@@ -79,6 +117,10 @@ const ZonosController$1 = /*@__PURE__*/ proxyCustomElement(class ZonosController
     stripeStore.stripe = stripe;
     void initCheckout(zonosStore.checkoutSettings);
     log('init checkout element');
+    // enable place order button after checkout is loaded
+    this.disablePlaceOrderButtons({
+      disable: false,
+    });
   }
   /**
    * Init zonos notification
@@ -101,6 +143,10 @@ const ZonosController$1 = /*@__PURE__*/ proxyCustomElement(class ZonosController
         log('Failed to load zonos settings. This domain may not have access', 'warn');
         return;
       }
+      // disable place order button until checkout is loaded
+      this.disablePlaceOrderButtons({
+        disable: true,
+      });
       // init zonos notification
       this.initZonosNotification();
       // load default setting if fail to load user setting

package/dist/components/zonos-hello-dialog2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { f as currencyConvertAndFormat, t as translate, b as localizationStore } from './localization.js';
+import { j as currencyFormat, b as localizationStore, t as translate } from './localization.js';
 import { z as zonosStore } from './zonosStore.js';
 import { c as classes } from './classes.js';
 import { d as defineCustomElement$b } from './zonos-banner2.js';
@@ -97,18 +97,26 @@ const ZonosHelloDialog = /*@__PURE__*/ proxyCustomElement(class ZonosHelloDialog
     const { countryLandedCost, selectedCountryCode } = localizationStore;
     // Our Robby API spells deminimis wrong here
     const dutyDeminimis = (countryLandedCost === null || countryLandedCost === void 0 ? void 0 : countryLandedCost.dutyDeminimus)
-      ? currencyConvertAndFormat(countryLandedCost.dutyDeminimus)
+      ? currencyFormat(countryLandedCost.dutyDeminimus)
       : null;
+    // If Canada, use 40 CAD (courier duty de minimis)
+    const dutyDeminimisToUse = localizationStore.selectedCountryCode === 'CA'
+      ? currencyFormat(40)
+      : dutyDeminimis;
     // If deminimis is undefined or null, assume it's $0
-    const dutyDeMinimisMessage = dutyDeminimis
-      ? `${translate('Spend')} ${dutyDeminimis} ${translate('duty free')}`
+    const dutyDeMinimisMessage = dutyDeminimisToUse
+      ? `${translate('Spend')} ${dutyDeminimisToUse} ${translate('duty free')}`
       : translate('Duties will apply to all orders');
     // Our Robby API spells deminimis wrong here
     const taxDeminimis = (countryLandedCost === null || countryLandedCost === void 0 ? void 0 : countryLandedCost.vatTaxDeminimus)
-      ? currencyConvertAndFormat(countryLandedCost.vatTaxDeminimus)
+      ? currencyFormat(countryLandedCost.vatTaxDeminimus)
       : null;
-    const taxDeMinimisMessage = taxDeminimis
-      ? `${translate('Spend')} ${taxDeminimis} ${translate('tax free')}`
+    // If Canada, use 150 CAD (courier tax de minimis)
+    const taxDeminimisToUse = localizationStore.selectedCountryCode === 'CA'
+      ? currencyFormat(150)
+      : taxDeminimis;
+    const taxDeMinimisMessage = taxDeminimisToUse
+      ? `${translate('Spend')} ${taxDeminimisToUse} ${translate('tax free')}`
       : translate('Taxes will apply to all orders');
     const animateLeft = this.animateFromLeftOverride ||
       (this.dialogRef && getHasMoreSpaceOnRight(this.dialogRef));