@zonos/elements 1.3.7-alpha.0 → 1.3.7

package/dist/collection/components/hello/zonos-hello-dialog/zonos-hello-dialog.js

@@ -3,6 +3,7 @@ import { localizationStore } from "../../store/hello/localization";
 import { translate } from "../../store/translationStore";
 import { zonosStore } from "../../store/zonosStore";
 import { classes } from "../../utils/classes";
+import { formatStringWithLinks } from "../../utils/formatStringWithLinks";
 import { currencyFormat } from "../../utils/hello/currencyConversion/currencyFormat";
 import { getHasMoreSpaceAbove } from "../../utils/hello/getHasMoreSpaceAbove";
 import { getHasMoreSpaceOnRight } from "../../utils/hello/getHasMoreSpaceOnRight";
@@ -91,18 +92,19 @@ export class ZonosHelloDialog {
         const animateFromBottom = this.dialogRef && getHasMoreSpaceAbove(this.dialogRef);
         const { customMessages } = localizationStore;
         const welcomeMessage = `${translate('Welcome to')} ${zonosStore.organizationName}!`;
-        const defaultMessage = ((_a = customMessages.find(x => x.pageName === 'hello_default')) === null || _a === void 0 ? void 0 : _a.message) ||
+        const defaultMessageStr = ((_a = customMessages.find(x => x.pageName === 'hello_default')) === null || _a === void 0 ? void 0 : _a.message) ||
             translate('Know about duties and taxes before you buy. Shop with confidence!');
+        const defaultMessage = formatStringWithLinks(defaultMessageStr);
         const currentPage = this.getCurrentPageEnum();
         const filteredMessages = customMessages.filter(x => x.pageName === currentPage);
-        return (h(Host, { key: '303f914b4511500edcd8d041ccfd52f0c48a7a85', class: "zonos--elements" }, h("div", { key: 'f52025ee53c0cdbbf20ecbb874e5639194b6507b', "aria-hidden": "true", class: classes([
+        return (h(Host, { key: 'd5ac86955cf9f9a22e47fe2154dee6e10f6a9361', class: "zonos--elements" }, h("div", { key: 'd34dd3f937330cd5fdd2d7a11dc321c215983146', "aria-hidden": "true", class: classes([
                 'zonos--hello-dialog',
                 animateLeft && 'zonos--hello-dialog-animate-from-left',
                 animateFromBottom && 'zonos--hello-dialog-animate-from-bottom',
                 !!this.mobileLocationOverride &&
                     'zonos--hello-dialog-mobile-override',
                 this.isOpen && 'zonos--hello-dialog-open',
-            ]), ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (h("div", null, h("div", { class: "zonos--hello-dialog-content" }, h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close Zonos Hello dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), h("zonos-v-stack", { spacing: 24 }, h("zonos-country-flag", { class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { type: "boldSubheader" }, welcomeMessage), h("zonos-text", { textColor: "gray-800" }, defaultMessage)), h("zonos-v-stack", { spacing: 8 }, this.restrictedItems.map(item => {
+            ]), ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (h("div", null, h("div", { class: "zonos--hello-dialog-content" }, h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close Zonos Hello dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), h("zonos-v-stack", { spacing: 24 }, h("zonos-country-flag", { class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { type: "boldSubheader" }, welcomeMessage), h("zonos-text", { innerHTML: defaultMessage, textColor: "gray-800" })), h("zonos-v-stack", { spacing: 8 }, this.restrictedItems.map(item => {
             var _a;
             return item && (h("zonos-banner", { bannerTitle: item.name, intent: "error" }, (_a = item.itemRestrictions) === null || _a === void 0 ? void 0 : _a.map(x => (h("zonos-text", { textColor: "red-800" }, x === null || x === void 0 ? void 0 : x.note)))));
         }), h("zonos-card", { spacing: "12px" }, h("zonos-v-stack", { spacing: 12 }, h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Duty de minimis", content: BagIcon }), h("zonos-text", null, dutyDeMinimisMessage)), h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Tax de minimis", content: MoneyIcon }), h("zonos-text", null, taxDeMinimisMessage)))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), h("zonos-hello-dialog-footer", { appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", null, h("zonos-country-select", { handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", null, h("zonos-language-select", { handleOnClose: () => this.setShowLanguageSelect(false) }))))));

package/dist/collection/components/main/zonos-controller.js

@@ -17,7 +17,6 @@ export class ZonosController {
      */
     async initCheckoutElement(stripe) {
         if (!stripe) {
-            // eslint-disable-next-line no-console
             log('Stripe is not loaded yet - cannot init checkout element', 'warn');
             return;
         }
@@ -153,7 +152,7 @@ export class ZonosController {
         zonosStore.organizationName = organizationName;
     }
     render() {
-        return h(Host, { key: '5650218b8eef4246ff1b131fcd1a06319800c2e3', class: "zonos--elements" });
+        return h(Host, { key: '0b734aaa82bd08277fb3a2694197b13242a4d0a6', class: "zonos--elements" });
     }
     static get is() { return "zonos-controller"; }
     static get encapsulation() { return "shadow"; }

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

@@ -85,14 +85,14 @@ const cartStoreReCalculateTotal = async ({ currency, itemsAmount, landedCostId,
         logError('Could not update cart total without checkout session id');
         return false;
     }
-    const { json } = await stripeStoreUpdateCheckoutSession({
+    const { errors, json } = await stripeStoreUpdateCheckoutSession({
         currency,
         id: cartStore.checkoutSessionId,
         itemsAmount,
         landedCostId,
         presentmentCountryCode: localizationStore.selectedCountryCode,
     });
-    if (!json) {
+    if (errors.length > 0 || !json) {
         // do nothing if we can't get checkout session
         logError('Error occurs when updating checkout session');
         cartStoreUpdateToErrorState({

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

@@ -6,6 +6,7 @@ import { zonosStore } from "../zonosStore";
 import { calculateLandedCost } from "../../utils/api/calculateLandedCost";
 import { handleFetch } from "../../utils/handleFetch";
 import { isDarkColor } from "../../utils/isDarkColor";
+import { jsonParse } from "../../utils/jsonParse";
 import { log } from "../../utils/logging/log";
 import { logError } from "../../utils/logging/logError";
 import { addressRuleStyle } from "../../../styles/stripe/addressRuleStyle";
@@ -56,6 +57,17 @@ const getStripeOptions = ({ clientSecret, overrideBorderRaidus, overridePrimaryC
         locale: localizationStore.selectedLocale,
     };
 };
+const stripeStoreCleanupDomesticShippingSession = () => {
+    window.sessionStorage.removeItem('zonos--bigcommerce-domestic-checkout-shipping');
+};
+// Save shipping address to session storage
+const stripeStoreSaveDomesticShippingSession = (props) => {
+    window.sessionStorage.setItem('zonos--bigcommerce-domestic-checkout-shipping', JSON.stringify(props));
+};
+const stripeStoreGetDomesticShippingSession = () => {
+    const session = window.sessionStorage.getItem('zonos--bigcommerce-domestic-checkout-shipping');
+    return jsonParse(session);
+};
 const initStripeElements = async (props) => {
     var _a, _b;
     const clientSecret = stripeStore.clientSecret;
@@ -157,12 +169,18 @@ const stripeStorePrefetchLandedCost = async () => {
         try {
             const abortController = new AbortController();
             stripeStore.fetchingLandedCostAbordController = abortController;
-            const { checkoutSessionWorkflow, shipmentRatingCalculateWorkflow } = await calculateLandedCost(abortController);
+            const { checkoutSessionWorkflow, landedCostCalculateWorkflow, shipmentRatingCalculateWorkflow, } = await calculateLandedCost(abortController);
             // reset abort controller after we are done
             stripeStore.fetchingLandedCostAbordController = null;
             // update cart store with landed cost info
             cartStore.landedCostData =
-                (checkoutSessionWorkflow === null || checkoutSessionWorkflow === void 0 ? void 0 : checkoutSessionWorkflow.filter(Boolean)) || null;
+                (checkoutSessionWorkflow === null || checkoutSessionWorkflow === void 0 ? void 0 : checkoutSessionWorkflow.map(checkoutSession => {
+                    const foundLandedCost = landedCostCalculateWorkflow === null || landedCostCalculateWorkflow === void 0 ? void 0 : landedCostCalculateWorkflow.find(item => { var _a; return (item === null || item === void 0 ? void 0 : item.id) === ((_a = checkoutSession.landedCost) === null || _a === void 0 ? void 0 : _a.id); });
+                    if (!foundLandedCost) {
+                        return null;
+                    }
+                    return Object.assign(Object.assign({}, checkoutSession), { landedCost: foundLandedCost });
+                }).filter(Boolean)) || null;
             cartStore.shippingData =
                 (shipmentRatingCalculateWorkflow === null || shipmentRatingCalculateWorkflow === void 0 ? void 0 : shipmentRatingCalculateWorkflow.filter(Boolean)) || null;
             // apply new subtotal and total, this is mainly to show items in the presentment currency
@@ -247,7 +265,11 @@ const stripeStoreRetrievePayment = async ({ clientSecret: _clientSecret, storybo
     const { paymentIntent } = await stripeStore.stripe.retrievePaymentIntent(clientSecret);
     const status = paymentIntent === null || paymentIntent === void 0 ? void 0 : paymentIntent.status;
     const { isError, messages } = getStripeMessageBasedOnStatus(status);
-    return { error: isError, messages };
+    return {
+        error: isError,
+        messages,
+        paymentMethod: paymentIntent === null || paymentIntent === void 0 ? void 0 : paymentIntent.payment_method,
+    };
 };
 const stripeStoreConfirmPayment = async () => {
     var _a, _b, _c;
@@ -347,4 +369,4 @@ onChange('clientSecret', clientSecret => {
         sessionStorage.removeItem('zonos--client-secret');
     }
 });
-export { initStripeElements, stripeStore, stripeStoreConfirmPayment, stripeStoreInitCheckoutSession, stripeStorePrefetchLandedCost, stripeStoreReset, stripeStoreRetrievePayment, stripeStoreUpdateCheckoutSession, };
+export { initStripeElements, stripeStore, stripeStoreCleanupDomesticShippingSession, stripeStoreConfirmPayment, stripeStoreGetDomesticShippingSession, stripeStoreInitCheckoutSession, stripeStorePrefetchLandedCost, stripeStoreReset, stripeStoreRetrievePayment, stripeStoreSaveDomesticShippingSession, stripeStoreUpdateCheckoutSession, };

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

@@ -60,11 +60,9 @@ const getNewLocalization = async () => {
         !selectedCountryCode) {
         return;
     }
-    if (zonosStore.sourceCurrency !== localizationStore.targetCurrency) {
-        const isGuaranteed = zonosStore.checkoutSettings.visibilityStatus === 'ENABLED';
-        const { maxAge } = await triggerGetExchangeRate(isGuaranteed);
-        startExchangeRateTimeout({ isGuaranteed, maxAge });
-    }
+    const isGuaranteed = zonosStore.checkoutSettings.visibilityStatus === 'ENABLED';
+    const { maxAge } = await triggerGetExchangeRate(isGuaranteed);
+    startExchangeRateTimeout({ isGuaranteed, maxAge });
     localizationStore.countryLandedCost = await getCountryLandedCost(localizationStore.selectedCountryCode);
 };
 const getCustomMessages = async () => {
@@ -91,7 +89,8 @@ const getOverrideLocale = () => {
     const zonosLocale = currentUrl.searchParams.get('zonosLocale');
     return zonosLocale;
 };
-const localizationStoreUpdateSelectedCountryCode = async (newSelectedCountryCode) => {
+const localizationStoreUpdateSelectedCountryCode = (newSelectedCountryCode) => {
+    var _a;
     log('update selected country code');
     localizationStore.selectedCountryCode = newSelectedCountryCode;
     const { selectedCountryCode, shippingZoneCountries } = localizationStore;
@@ -115,6 +114,8 @@ const localizationStoreUpdateSelectedCountryCode = async (newSelectedCountryCode
     window.sessionStorage.setItem('zonos--country', selectedCountryCode);
     // Update the URL query param with the new country code
     setZCountryUrlParam(selectedCountryCode);
+    (_a = document
+        .querySelector('zonos-hello')) === null || _a === void 0 ? void 0 : _a.setAttribute('z-country', selectedCountryCode);
 };
 const initLocalizationStore = async () => {
     // all countries from countries.json, shipping zone and localization

package/dist/collection/components/store/zonosStore.js

@@ -64,6 +64,7 @@ const { reset, state: zonosStore } = createStore(() => ({
         restrictionBehavior: 'DISABLED',
     },
     loadedConfig: false,
+    organizationId: '',
     organizationName: '',
     sourceCurrency: 'USD',
     storeId: null,
@@ -76,7 +77,7 @@ let savedZonosSettings = null;
  * Init setting from zonos setting
  */
 const zonosStoreInitSetting = ({ overrideSettings, zonosSettings, }) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     reset();
     if (zonosSettings) {
         // save zonos settings to be used later
@@ -91,8 +92,9 @@ const zonosStoreInitSetting = ({ overrideSettings, zonosSettings, }) => {
     zonosStore.helloSettings = mergeConfig(zonosStore.helloSettings, (savedZonosSettings === null || savedZonosSettings === void 0 ? void 0 : savedZonosSettings.helloSettings) || (zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.helloSettings) || null, overrideSettings === null || overrideSettings === void 0 ? void 0 : overrideSettings.helloSettings);
     // set flag to true to indicate that config is ready
     zonosStore.loadedConfig = true;
-    zonosStore.organizationName = ((_a = zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.organization) === null || _a === void 0 ? void 0 : _a.name) || '';
-    zonosStore.storeId = ((_c = (_b = zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.organization) === null || _b === void 0 ? void 0 : _b.references) === null || _c === void 0 ? void 0 : _c.storeId) || null;
+    zonosStore.organizationId = ((_a = zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.organization) === null || _a === void 0 ? void 0 : _a.id) || '';
+    zonosStore.organizationName = ((_b = zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.organization) === null || _b === void 0 ? void 0 : _b.name) || '';
+    zonosStore.storeId = ((_d = (_c = zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.organization) === null || _c === void 0 ? void 0 : _c.references) === null || _d === void 0 ? void 0 : _d.storeId) || null;
     zonosStore.currencyConverter = overrideSettings === null || overrideSettings === void 0 ? void 0 : overrideSettings.currencyConverter;
 };
 const zonosStoreFontFamily = () => {

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

@@ -135,7 +135,7 @@ export class ZonosAddress {
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: 'b2aa1ee3f16ae4ebcce83b599c97aa80f09dc9d3', class: "zonos--address zonos--elements" }, h("zonos-text", { key: 'e37392d0add0ab8541f78131abdf9082fd2455b4', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: 'd28d1908ee2f525455b0680e25cff3040093ad74', class: "zonos--address-component" })));
+        return (h(Host, { key: '8d762300d8f599a277806d861d13d2beb6a0a5a6', class: "zonos--address zonos--elements" }, h("zonos-text", { key: 'c355eece2f193cb0595ede434238f062b2c07c7c', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: '59c3bd68cd67c8d733fd2ca5d9f4b4114c84db4a', class: "zonos--address-component" })));
     }
     static get is() { return "zonos-address"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/stripe/zonos-link-authentication/zonos-link-authentication.js

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { h, Host } from "@stencil/core";
 import { stripeStore, stripeStorePrefetchLandedCost, } from "../../store/checkout/stripe";
+import { logError } from "../../utils/logging/logError";
 /**
  * This component is a wrapper for the stripe authentication element that would render default style object
  */
@@ -18,8 +19,7 @@ export class ZonosLinkAuthentication {
             stripeStore.stripeElements.create('linkAuthentication');
         const linkAuthenticationElementContainer = this.el.querySelector('.zonos--link-authentication-component');
         if (!linkAuthenticationElementContainer) {
-            // eslint-disable-next-line no-console
-            console.error('Cannot find container element for linkAuthenticationElement');
+            logError('Cannot find container element for linkAuthenticationElement');
             return;
         }
         linkAuthenticationElement.mount(linkAuthenticationElementContainer);
@@ -36,7 +36,7 @@ export class ZonosLinkAuthentication {
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: 'aec893e026a60bcbf81e93a3c63a842f97437dcc', class: "zonos--link-authentication zonos--elements" }, h("zonos-text", { key: '93c2c462d3a108364d2dfbc4aeab058f87bcc7b3', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: '0098e20d87cce7547fc1abf26859c0d3765407cd', class: "zonos--link-authentication-component" })));
+        return (h(Host, { key: '671681b3ca3e95ab25a70cb44e84db7e2b3903e8', class: "zonos--link-authentication zonos--elements" }, h("zonos-text", { key: '8d20c795500e3ce27b92cdeb0446908e550f9f13', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: 'b8374d7d7a4844b4c2cf6363b8d2d225bb52b21d', class: "zonos--link-authentication-component" })));
     }
     static get is() { return "zonos-link-authentication"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { h, Host } from "@stencil/core";
 import { stripeStore } from "../../store/checkout/stripe";
+import { logError } from "../../utils/logging/logError";
 /**
  * This component is a wrapper for the stripe authentication element that would render default style object
  */
@@ -21,8 +22,7 @@ export class ZonosPayment {
             });
         const paymentElementContainer = this.el.querySelector('.zonos--payment-component');
         if (!paymentElementContainer) {
-            // eslint-disable-next-line no-console
-            console.error('Cannot find container element for paymentElement');
+            logError('Cannot find container element for paymentElement');
             return;
         }
         paymentElement.mount(paymentElementContainer);
@@ -37,7 +37,7 @@ export class ZonosPayment {
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: 'd5b7717fa4b80da99ae6ba2d7cccbe318e091f8f', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: '37bd2c2dcc59613857b9fd22d864c0d11b2a7319', class: "zonos--payment-component" })));
+        return (h(Host, { key: 'e10a4ce1a9ecf05ad8efaceeb861284a92e475d2', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: 'a1b52de6a2cec2f707e00c39ebcd7752ad191af6', class: "zonos--payment-component" })));
     }
     static get is() { return "zonos-payment"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,11 +1,11 @@
 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);
     if (errors.length || !json) {
-        // eslint-disable-next-line no-console
-        console.error('Error fetching exchange rate', (_a = errors.find(Boolean)) === null || _a === void 0 ? void 0 : _a.message);
+        logError('Error fetching exchange rate', (_a = errors.find(Boolean)) === null || _a === void 0 ? void 0 : _a.message);
         return [];
     }
     return json.locale_countryCodesPage;

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

@@ -0,0 +1,22 @@
+import { localizationStore } from "../../store/hello/localization";
+import { zonosStore } from "../../store/zonosStore";
+import { handleFetch } from "../handleFetch";
+export const trackConversionEvent = async (eventName, metadata) => {
+    // If a Zonos domain, we don't want analytics to be tracked
+    if (window.location.href.includes('zonos.com')) {
+        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 body = {
+        countryCode,
+        eventName,
+        metadata,
+        organizationId,
+    };
+    await handleFetch(url, {
+        body,
+        method: 'POST',
+    });
+};

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

@@ -0,0 +1,15 @@
+import { localizationStore } from "../../store/hello/localization";
+import { log } from "../logging/log";
+export const isShippableCountry = (showLog = true) => {
+    if (!localizationStore.localizationLoaded) {
+        return false;
+    }
+    // if localization is loaded and the localization is not a shippable country, keep the original click event
+    if (!localizationStore.isShippableCountry) {
+        if (showLog) {
+            log(`Checkout: not shippable country`);
+        }
+        return false;
+    }
+    return true;
+};

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

@@ -0,0 +1,111 @@
+import { stripeStoreCleanupDomesticShippingSession, stripeStoreGetDomesticShippingSession, stripeStoreSaveDomesticShippingSession, } from "../../store/checkout/stripe";
+import { localizationStoreUpdateSelectedCountryCode } from "../../store/hello/localization";
+import { zonosStore } from "../../store/zonosStore";
+import { isShippableCountry } from "./isShippableCountry";
+import { logError } from "../logging/logError";
+import { sendErrorLog } from "../logging/sendErrorLog";
+/**
+ * Watch for changes in domestic checkout step, this is to redirect user to home page and open checkout if user enters the ship to country that's in the shipping zone
+ * @note Only works on default bigcommerce checkout page
+ */
+export const watchBigcommerceDomesticCheckout = ({ domesticRedirectedBtnSelector, onShippingAddressSessionFound, }) => {
+    if (!window.Zonos.isBigCommerce) {
+        return;
+    }
+    const observer = new MutationObserver(async () => {
+        const domesticRedirectedButton = document.querySelector(domesticRedirectedBtnSelector);
+        const shippingAddressSession = stripeStoreGetDomesticShippingSession();
+        // append a hidden button to the body if the shipping address session is found
+        if (!domesticRedirectedButton && shippingAddressSession) {
+            // create a hidden button to trigger the click event
+            const button = document.createElement('button');
+            button.style.display = 'none';
+            button.id = 'zonos--domestic-redirected-checkout-button';
+            document.body.appendChild(button);
+            onShippingAddressSessionFound === null || onShippingAddressSessionFound === void 0 ? void 0 : onShippingAddressSessionFound(shippingAddressSession);
+            // disconnect the observer after we found the shipping continue button
+            observer.disconnect();
+            return;
+        }
+        const shipToCountryElement = document.querySelector('select[name="shippingAddress.countryCode"]');
+        // make sure the continue button is available
+        const shippingCountinueBtnEle = document.querySelector('#checkout-shipping-continue');
+        if (!shipToCountryElement || !shippingCountinueBtnEle) {
+            // do nothing if shipping country and the continue button is not found
+            return;
+        }
+        // disconnect the observer after we found the shipping continue button
+        observer.disconnect();
+        shippingCountinueBtnEle.addEventListener('click', async (e) => {
+            var _a, _b;
+            const shippingCountry = shipToCountryElement.value;
+            if (!shippingCountry) {
+                // do nothing if shipping country is not found
+                return;
+            }
+            // update the country code in localization store and check if it's shippable
+            localizationStoreUpdateSelectedCountryCode(shippingCountry);
+            // do nothing if the country is still domestic
+            if (!isShippableCountry(false)) {
+                // cleanup the domestic shipping session if it's domestic because we will open the intl checkout after redirecting
+                stripeStoreCleanupDomesticShippingSession();
+                return;
+            }
+            // get value of shipping address state
+            const shipToFormElement = document.querySelector('form');
+            if (!shipToFormElement) {
+                return;
+            }
+            const formData = new FormData(shipToFormElement);
+            const shipAddress1Element = document.querySelector('input#addressLine1Input');
+            const shippingAddress = {
+                address1: (_a = formData.get('shippingAddress.address1')) !== null && _a !== void 0 ? _a :
+                    // in Canada, the address1 is not included in the form, try to get value from input id instead.
+                    (shipAddress1Element && shipAddress1Element.value),
+                address2: formData.get('shippingAddress.address2'),
+                city: formData.get('shippingAddress.city'),
+                countryCode: formData.get('shippingAddress.countryCode'),
+                firstName: formData.get('shippingAddress.firstName'),
+                lastName: formData.get('shippingAddress.lastName'),
+                phone: formData.get('shippingAddress.phone'),
+                postalCode: formData.get('shippingAddress.postalCode'),
+                stateOrProvince: (_b = formData.get('shippingAddress.stateOrProvince')) !== null && _b !== void 0 ? _b : formData.get('shippingAddress.stateOrProvinceCode'),
+            };
+            if (Object.values(shippingAddress).some(value => value === undefined || value === null)) {
+                logError('One or more shipping address field is missing', Object.entries(shippingAddress));
+                void sendErrorLog({
+                    endpoint: 'No endpoint, domestic checkout form missing fields',
+                    errors: [
+                        'Bigcommerce: One or more shipping address field is missing in the domestic checkout form',
+                        JSON.stringify(Object.entries(shippingAddress)),
+                    ],
+                    metadata: {
+                        domain: window.location.hostname,
+                        storeId: zonosStore.storeId,
+                    },
+                });
+                return;
+            }
+            // save the shipping address to session storage
+            stripeStoreSaveDomesticShippingSession({
+                address1: shippingAddress.address1,
+                address2: shippingAddress.address2,
+                city: shippingAddress.city,
+                countryCode: shippingAddress.countryCode,
+                firstName: shippingAddress.firstName,
+                lastName: shippingAddress.lastName,
+                phone: shippingAddress.phone,
+                postalCode: shippingAddress.postalCode,
+                state: shippingAddress.stateOrProvince,
+            });
+            e.preventDefault();
+            e.stopPropagation();
+            // redirect to home page, home page then will open the checkout dialog if having domestic shipping session
+            window.location.href = '/';
+        });
+    });
+    observer.observe(document.body, {
+        childList: true,
+        subtree: true,
+    });
+};

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

@@ -0,0 +1,13 @@
+export const formatStringWithLinks = (str) => {
+    // Match Markdown-style links or standalone URLs not in Markdown format
+    const linkRegex = /\[([^\]]+)\]\((https?:\/\/[^\s\)]+)\)|(https?:\/\/[^\s]+)/g;
+    const messageWithLinks = str.replace(linkRegex, (_match, text, markdownUrl, url) => {
+        if (markdownUrl) {
+            return `<zonos-link href="${markdownUrl}" target="_blank" rel="noopener noreferrer">${text}</zonos-link>`;
+        }
+        else {
+            return `<zonos-link href="${url}" target="_blank" rel="noopener noreferrer">${url}</zonos-link>`;
+        }
+    });
+    return messageWithLinks;
+};

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

@@ -111,7 +111,7 @@ export const handleFetch = async (url, _opts) => {
     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 }, opts.headers);
+    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);

package/dist/collection/components/utils/hello/currencyConversion/defaultCurrencyConverter.js

@@ -1,13 +1,35 @@
 import { localizationStore } from "../../../store/hello/localization";
 import { zonosStore } from "../../../store/zonosStore";
-import { currencyConvert } from "./currencyConvert";
 import { currencyConvertAndFormat } from "./currencyConvertAndFormat";
 import { getCurrencyElements } from "./getCurrencyElements";
 import { getInitialElementAmount } from "./getInitialElementAmount";
 import { logError } from "../../logging/logError";
+const convertCurrency = (element) => {
+    var _a;
+    const amount = getInitialElementAmount(element);
+    if (!amount || isNaN(amount)) {
+        return;
+    }
+    const currentIntlValue = element.getAttribute('data-zintl');
+    const currentCountryValue = element.getAttribute('data-zcountry-code');
+    // do nothing if the target currency is the same
+    const isExchangeRateReady = localizationStore.targetCurrency ===
+        ((_a = localizationStore.exchangeRate) === null || _a === void 0 ? void 0 : _a.targetFormat.currencyCode);
+    // if the current value on the element is different from the current intl value, update the data-zintl attribute
+    if (isExchangeRateReady &&
+        (element.textContent !== currentIntlValue ||
+            currentCountryValue !== localizationStore.selectedCountryCode)) {
+        const observedFormattedValue = currencyConvertAndFormat(amount);
+        element.textContent = observedFormattedValue;
+        // save the new value to the data-zintl attribute
+        element.setAttribute('data-zintl', observedFormattedValue);
+        element.setAttribute('data-zcountry-code', localizationStore.selectedCountryCode || '');
+    }
+};
 export const defaultCurrencyConverter = () => {
     const { currencyElementSelector } = zonosStore.helloSettings;
     const currencyElements = getCurrencyElements(currencyElementSelector);
+    // do nothing if none of the currency elements are found
     if (!(currencyElements === null || currencyElements === void 0 ? void 0 : currencyElements.length)) {
         return;
     }
@@ -16,32 +38,7 @@ export const defaultCurrencyConverter = () => {
         return;
     }
     currencyElements.forEach((element) => {
-        const amount = getInitialElementAmount(element);
-        if (!amount || isNaN(amount)) {
-            return;
-        }
-        element.setAttribute('data-zintl', currencyConvert(amount).toString());
-        // Check if an observer is already attached to the element
-        let observer = element._mutationObserver;
-        if (!observer) {
-            observer = new MutationObserver(() => {
-                const observedFormattedValue = currencyConvertAndFormat(amount);
-                element.textContent = observedFormattedValue;
-            });
-            observer.observe(element, {
-                characterData: true,
-                childList: true,
-            });
-            element._mutationObserver = observer;
-        }
-        // Temporarily disconnect the observer to prevent an infinite loop
-        observer.disconnect();
-        const formattedValue = currencyConvertAndFormat(amount);
-        element.textContent = formattedValue;
-        // Reconnect the observer after the update is complete
-        observer.observe(element, {
-            characterData: true,
-            childList: true,
-        });
+        // convert the currency and save the formatted value to the data-zintl attribute
+        convertCurrency(element);
     });
 };

package/dist/collection/components/utils/hello/currencyConversion/getCurrencyElements.js

@@ -4,15 +4,14 @@ import { logError } from "../../logging/logError";
 export const getCurrencyElements = (selector) => {
     const currencySelector = selector || '.money';
     if (!isValidSelector(currencySelector)) {
-        // eslint-disable-next-line no-console
         logError(`Currency element selector "${currencySelector}" is not valid.`);
         return null;
     }
     const currencyElements = document.querySelectorAll(currencySelector);
     if (!currencyElements.length) {
-        // eslint-disable-next-line no-console
         log(`No currency elements found with selector "${currencySelector}"`, 'warn');
         return null;
     }
-    return currencyElements;
+    // return array of currency elements instead of a NodeList
+    return Array.from(currencyElements);
 };

package/dist/collection/components/utils/hello/currencyConversion/getInitialElementAmount.js

@@ -1,12 +1,14 @@
 export const getInitialElementAmount = (element) => {
     var _a;
     const domesticValue = element.getAttribute('data-domestic');
-    if (!domesticValue) {
-        // Only keep numbers, decimal, and hyphens
-        const cleanedText = (_a = element.textContent) === null || _a === void 0 ? void 0 : _a.replace(/[^\d.-]/g, '');
-        if (!cleanedText) {
-            return null;
-        }
+    const intlValue = element.getAttribute('data-zintl');
+    // Only keep numbers, decimal, and hyphens
+    const cleanedText = (_a = element.textContent) === null || _a === void 0 ? void 0 : _a.replace(/[^\d.-]/g, '');
+    if (!cleanedText) {
+        return null;
+    }
+    // If the element has no data-domestic attribute, or the text content is different from the data-zintl attribute, set the data-domestic attribute
+    if (!domesticValue || element.textContent !== intlValue) {
         // Store the original value on the element once, and international on every new conversion
         element.setAttribute('data-domestic', cleanedText);
         return parseFloat(cleanedText);

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

@@ -1,13 +1,16 @@
 import { isValidSelector } from "../isValidSelector";
 import { log } from "../logging/log";
 import { logError } from "../logging/logError";
-const injectHelloComponent = (triggerAnchorElement) => {
+const injectHelloComponent = (anchorElementSelector) => {
+    const triggerAnchorElement = document.querySelector(anchorElementSelector);
     // 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);
+        return true;
     }
+    return false;
 };
 export const initHello = async (helloSettings) => {
     const { anchorElementSelector } = helloSettings;
@@ -16,7 +19,24 @@ export const initHello = async (helloSettings) => {
         logError(`Selector anchorElementSelector "${helloSettings.anchorElementSelector}" is not a valid selector.`);
         return;
     }
-    const triggerElement = document.querySelector(anchorElementSelector);
     log('Hello init complete');
-    injectHelloComponent(triggerElement);
+    const isHelloInjected = injectHelloComponent(anchorElementSelector);
+    // keep watching for the anchor element to be added to the DOM, then inject hello component
+    if (!isHelloInjected) {
+        const observer = new MutationObserver(() => {
+            const injected = injectHelloComponent(anchorElementSelector);
+            if (injected) {
+                // disconnect observer if hello is successfully injected
+                observer.disconnect();
+            }
+        });
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
+        // kill observer after 5 seconds if the hello still not injected, if the hello still not injected after 10 seconds, it's likely that the selector the user doesn't want to use hello
+        setTimeout(() => {
+            observer.disconnect();
+        }, 5000);
+    }
 };