@zonos/elements 1.3.6 → 1.3.7-alpha.1

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

@@ -1,4 +1,5 @@
 import { createStore } from "@stencil/store";
+import { cartStore } from "../checkout/cart";
 import { translationStoreUpdateLanguage } from "../translationStore";
 import { zonosStore } from "../zonosStore";
 import { getCountries } from "../../utils/api/getCountries";
@@ -7,10 +8,12 @@ import { getExchangeRate, } from "../../utils/api/getExchangeRate";
 import { getLocaleMessages } from "../../utils/api/getLocaleMessages";
 import { getLocalization } from "../../utils/api/getLocalization";
 import { getShippingZones } from "../../utils/api/getShippingZones";
+import { handleFetch } from "../../utils/handleFetch";
 import { currencyDisplay } from "../../utils/hello/currencyConversion/currencyDisplay";
 import { getCurrencyCode } from "../../utils/hello/currencyConversion/getCurrencyCode";
 import { setZCountryUrlParam } from "../../utils/hello/setZCountryUrlParam";
 import { log } from "../../utils/logging/log";
+import { logError } from "../../utils/logging/logError";
 const { state: localizationStore } = createStore({
     countryLandedCost: null,
     customMessages: [],
@@ -57,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 () => {
@@ -88,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;
@@ -112,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
@@ -119,7 +123,7 @@ const initLocalizationStore = async () => {
     // Filter countries to only include countries in the shipping zone
     const filteredCountries = shippingZoneCountries === null || shippingZoneCountries === void 0 ? void 0 : shippingZoneCountries.reduce((acc, countryCode) => {
         const countryInfo = allCountries === null || allCountries === void 0 ? void 0 : allCountries[countryCode];
-        return countryInfo
+        return countryInfo && countryInfo.active
             ? Object.assign(Object.assign({}, acc), { [countryCode]: countryInfo }) : acc;
     }, {});
     localizationStore.shippingZoneCountries = filteredCountries || null;
@@ -140,8 +144,31 @@ const initLocalizationStore = async () => {
     localizationStore.localizationLoaded = true;
     void getCustomMessages();
 };
+const updateCheckoutSessionLanguage = async () => {
+    if (!cartStore.checkoutSessionId) {
+        return null;
+    }
+    const { errors, json } = await handleFetch(`${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-elements/update-checkout-session-metadata`, {
+        body: {
+            id: cartStore.checkoutSessionId,
+            metadata: [
+                {
+                    key: 'language',
+                    value: localizationStore.selectedLocale,
+                },
+            ],
+        },
+        method: 'POST',
+    });
+    if (errors.length || !json) {
+        logError('Error occurs when updating checkout session', JSON.stringify(errors, null, 2));
+        return { errors, json };
+    }
+    return { errors: [], json };
+};
 const localizationStoreUpdateSelectedLocale = (newSelectedLocale) => {
     localizationStore.selectedLocale = newSelectedLocale;
     translationStoreUpdateLanguage(newSelectedLocale);
+    void updateCheckoutSessionLanguage();
 };
 export { initLocalizationStore, localizationStore, localizationStoreUpdateSelectedCountryCode, localizationStoreUpdateSelectedLocale, };

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
@@ -84,16 +85,17 @@ const zonosStoreInitSetting = ({ overrideSettings, zonosSettings, }) => {
     }
     zonosStore.appearance = mergeConfig(zonosStore.appearance, (savedZonosSettings === null || savedZonosSettings === void 0 ? void 0 : savedZonosSettings.appearanceSettings) ||
         (zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.appearanceSettings) ||
-        null, overrideSettings.appearance);
+        null, overrideSettings === null || overrideSettings === void 0 ? void 0 : overrideSettings.appearance);
     zonosStore.checkoutSettings = mergeConfig(zonosStore.checkoutSettings, (savedZonosSettings === null || savedZonosSettings === void 0 ? void 0 : savedZonosSettings.checkoutSettings) ||
         (zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.checkoutSettings) ||
-        null, overrideSettings.checkoutSettings);
-    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.helloSettings);
+        null, overrideSettings === null || overrideSettings === void 0 ? void 0 : overrideSettings.checkoutSettings);
+    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.currencyConverter = overrideSettings.currencyConverter;
+    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 = () => {
     const fontFamily = zonosStore.appearance.fontFamily || 'Inter';

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

@@ -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: '62b8e4a5c1902cb2c8fe032d7c43ba68742e8c0a', class: "zonos--link-authentication zonos--elements" }, h("zonos-text", { key: 'b86acc15bfc6eba0c7174c1e229205b34747f57d', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: 'f0734254d41ff9f221f97143e0df1f28017b9a61', 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

@@ -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: 'de560f2de1e48fce2cf11f0fc3e2ef36938e719f', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: 'b6a60c127e67e3d03408d960ad56f712a5677683', class: "zonos--payment-component" })));
     }
     static get is() { return "zonos-payment"; }
     static get encapsulation() { return "scoped"; }

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

@@ -14,5 +14,6 @@ export const getCurrencyElements = (selector) => {
         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);
+    }
 };

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

@@ -1,7 +1,14 @@
 export const log = (message, type, ...additionalInfo) => {
-    var _a;
-    // if type is error and debug is false, do not log
-    if (!window.Zonos.debug) {
+    var _a, _b;
+    const isDebug = !((_a = window.Zonos) === null || _a === void 0 ? void 0 : _a.debug) ||
+        !window.location.search.match(/\?.*(&*)zonosDebug=1/);
+    // if debug is false, do not log
+    if (!isDebug) {
+        // log errors to the console if the type is error
+        if (type === 'error') {
+            // eslint-disable-next-line no-console
+            console.error(message, ...additionalInfo);
+        }
         return;
     }
     let loggingIframe = document.querySelector('iframe#zonos---debug-logging-iframe');
@@ -22,23 +29,27 @@ export const log = (message, type, ...additionalInfo) => {
         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;
+    const zConsole = ((_b = loggingIframe.contentWindow) === null || _b === void 0 ? void 0 : _b.window.console) || window.console;
     switch (type) {
         case 'warn':
             // eslint-disable-next-line no-console
-            console.warn(message, ...additionalInfo);
+            zConsole.warn(message, ...additionalInfo);
             break;
         case 'info':
             // eslint-disable-next-line no-console
-            console.info(message, ...additionalInfo);
+            zConsole.info(message, ...additionalInfo);
+            break;
+        case 'error':
+            // eslint-disable-next-line no-console
+            zConsole.error(message, ...additionalInfo);
             break;
         default:
             // eslint-disable-next-line no-console
-            console.groupCollapsed(message, ...additionalInfo);
+            zConsole.groupCollapsed(message, ...additionalInfo);
             // eslint-disable-next-line no-console
-            console.trace();
+            zConsole.trace();
             // eslint-disable-next-line no-console
-            console.groupEnd();
+            zConsole.groupEnd();
             break;
     }
 };

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

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

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

@@ -0,0 +1,12 @@
+import { handleFetch } from "../handleFetch";
+export const sendErrorLog = async ({ endpoint, errors, metadata }) => {
+    const errorObject = {
+        endpoint,
+        errors,
+        metadata,
+    };
+    void handleFetch(`${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-elements/log-error`, {
+        body: errorObject,
+        method: 'POST',
+    });
+};

package/dist/collection/scripts/checkIfLoadVersionDomain.js

@@ -0,0 +1,35 @@
+/**
+ * Get the load version and url based on the loadScriptSrc and version
+ * @returns
+ */
+export const checkIfLoadVersionDomain = ({ loadScriptSrc }) => {
+    if (!loadScriptSrc) {
+        return {
+            currentLoadScriptUrl: '',
+            isForceLoadVersionDomain: false,
+            isWhiteListed: false,
+        };
+    }
+    const whiteListedDomains = [
+        // local domain
+        'dev.elements.zonos.com',
+        // any domain with prefix , no need to version it
+        '.js.zonos.com',
+        // vercel git domain
+        'zonos-elements-test-git',
+        'zonos-elements-git',
+    ];
+    const forceLoadVersionDomain = [
+        // force load version for qa domain, this is to test the load version behavior
+        'qa.js.zonos.com',
+    ];
+    // get the domain that's used to load the loadZonos.js
+    const currentLoadScriptUrl = new URL(loadScriptSrc).origin;
+    const isWhiteListed = whiteListedDomains.some(domain => 
+    // check if the current domain is in the white listed domains
+    currentLoadScriptUrl.includes(domain));
+    const isForceLoadVersionDomain = forceLoadVersionDomain.some(domain => 
+    // check if the current domain is in the force load version domains list
+    currentLoadScriptUrl.includes(domain));
+    return { currentLoadScriptUrl, isForceLoadVersionDomain, isWhiteListed };
+};