@zonos/elements 1.3.6 → 1.3.7-alpha.1

package/dist/esm/{localization-d8f6453b.js → cart-1bbb7662.js}

@@ -1,4 +1,6 @@
-import { c as createStore, z as zonosStore } from './zonosStore-e6c7be3a.js';
+import { c as createStore, z as zonosStore } from './zonosStore-00bce01b.js';
+import { i as isDarkColor } from './isDarkColor-2344e7a5.js';
+import { g as getBorderRadius } from './getBorderRadius-19787feb.js';
 
 const stringsArabic = {
     'Above de minimis threshold for': {
@@ -3544,7 +3546,7 @@ 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);
@@ -3565,9 +3567,65 @@ const getCountries = async () => {
     }
 };
 
+const log = (message, type, ...additionalInfo) => {
+    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');
+    if (!loggingIframe) {
+        // add a hidden iframe
+        loggingIframe = document.createElement('iframe');
+        loggingIframe.id = 'zonos---debug-logging-iframe';
+        loggingIframe.style.display = 'none';
+        loggingIframe.style.opacity = '0';
+        loggingIframe.style.position = 'absolute';
+        loggingIframe.style.top = '-9999px';
+        loggingIframe.style.left = '-9999px';
+        loggingIframe.style.width = '1px';
+        loggingIframe.style.height = '1px';
+        loggingIframe.style.border = 'none';
+        loggingIframe.style.overflow = 'hidden';
+        loggingIframe.style.visibility = 'hidden';
+        document.body.appendChild(loggingIframe);
+    }
+    // use the logging iframe's console to log just in case the console is disabled (overriden) by the site owner
+    const 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
+            zConsole.warn(message, ...additionalInfo);
+            break;
+        case 'info':
+            // eslint-disable-next-line no-console
+            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
+            zConsole.groupCollapsed(message, ...additionalInfo);
+            // eslint-disable-next-line no-console
+            zConsole.trace();
+            // eslint-disable-next-line no-console
+            zConsole.groupEnd();
+            break;
+    }
+};
+
 const logError = (message, ...rest) => {
     // eslint-disable-next-line no-console
-    console.error(message, ...rest);
+    log(message, 'error', ...rest);
 };
 
 const getCountryLandedCost = async (countryCode) => {
@@ -3729,51 +3787,6 @@ const isValidSelector = (selector) => {
     return true;
 };
 
-const log = (message, type, ...additionalInfo) => {
-    var _a;
-    // if type is error and debug is false, do not log
-    if (!window.Zonos.debug) {
-        return;
-    }
-    let loggingIframe = document.querySelector('iframe#zonos---debug-logging-iframe');
-    if (!loggingIframe) {
-        // add a hidden iframe
-        loggingIframe = document.createElement('iframe');
-        loggingIframe.id = 'zonos---debug-logging-iframe';
-        loggingIframe.style.display = 'none';
-        loggingIframe.style.opacity = '0';
-        loggingIframe.style.position = 'absolute';
-        loggingIframe.style.top = '-9999px';
-        loggingIframe.style.left = '-9999px';
-        loggingIframe.style.width = '1px';
-        loggingIframe.style.height = '1px';
-        loggingIframe.style.border = 'none';
-        loggingIframe.style.overflow = 'hidden';
-        loggingIframe.style.visibility = 'hidden';
-        document.body.appendChild(loggingIframe);
-    }
-    // use the logging iframe's console to log just in case the console is disabled (overriden) by the site owner
-    const console = ((_a = loggingIframe.contentWindow) === null || _a === void 0 ? void 0 : _a.window.console) || window.console;
-    switch (type) {
-        case 'warn':
-            // eslint-disable-next-line no-console
-            console.warn(message, ...additionalInfo);
-            break;
-        case 'info':
-            // eslint-disable-next-line no-console
-            console.info(message, ...additionalInfo);
-            break;
-        default:
-            // eslint-disable-next-line no-console
-            console.groupCollapsed(message, ...additionalInfo);
-            // eslint-disable-next-line no-console
-            console.trace();
-            // eslint-disable-next-line no-console
-            console.groupEnd();
-            break;
-    }
-};
-
 const getCurrencyElements = (selector) => {
     const currencySelector = selector || '.money';
     if (!isValidSelector(currencySelector)) {
@@ -3787,18 +3800,21 @@ 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);
 };
 
 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);
@@ -3806,9 +3822,32 @@ const getInitialElementAmount = (element) => {
     return parseFloat(domesticValue);
 };
 
+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 || '');
+    }
+};
 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;
     }
@@ -3817,33 +3856,8 @@ 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);
     });
 };
 
@@ -3925,11 +3939,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 () => {
@@ -3956,7 +3968,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;
@@ -3980,6 +3993,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
@@ -3987,7 +4002,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;
@@ -4008,9 +4023,750 @@ const initLocalizationStore = async () => {
     localizationStore.localizationLoaded = true;
     void getCustomMessages();
 };
+const updateCheckoutSessionLanguage = async () => {
+    if (!cartStore.checkoutSessionId) {
+        return null;
+    }
+    const { errors, json } = await handleFetch(`${"https://v1.route.js.zonos.com"}/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();
+};
+
+const prepCalculateLandedCost = () => {
+    // maybe we don't need email now for prefetch the landed cost
+    const stripeLinkData = stripeStore.stripeLinkEventData;
+    const stripeAddressData = stripeStore.stripeAddressEventData;
+    const stripeBillingAddressData = stripeStore.stripeShippingSameAsBilling
+        ? stripeStore.stripeAddressEventData
+        : stripeStore.stripeBillingAddressEventData;
+    if (!(stripeAddressData === null || stripeAddressData === void 0 ? void 0 : stripeAddressData.complete) || !(stripeBillingAddressData === null || stripeBillingAddressData === void 0 ? void 0 : stripeBillingAddressData.complete)) {
+        throw new Error('Missing stripe address data');
+    }
+    return {
+        billingAddress: {
+            addressLine1: stripeBillingAddressData.value.address.line1,
+            addressLine2: stripeBillingAddressData.value.address.line2 || '',
+            city: stripeBillingAddressData.value.address.city,
+            country: stripeBillingAddressData.value.address.country,
+            postalCode: stripeBillingAddressData.value.address.postal_code,
+            state: stripeBillingAddressData.value.address.state,
+        },
+        billingContact: {
+            // firstName and lastName should be valid now since stripe only mark
+            // the address as complete when both fields are filled.
+            firstName: stripeBillingAddressData.value.firstName || '',
+            lastName: stripeBillingAddressData.value.lastName || '',
+            phone: stripeBillingAddressData.value.phone || '',
+        },
+        checkoutSessionId: cartStore.checkoutSessionId || '',
+        contact: {
+            email: (stripeLinkData === null || stripeLinkData === void 0 ? void 0 : stripeLinkData.value.email) || '',
+            // firstName and lastName should be valid now since stripe only mark
+            // the address as complete when both fields are filled.
+            firstName: stripeAddressData.value.firstName || '',
+            lastName: stripeAddressData.value.lastName || '',
+            phone: stripeAddressData.value.phone || '',
+        },
+        items: cartStore.items.map(item => item),
+        shippingAddress: {
+            addressLine1: stripeAddressData.value.address.line1,
+            addressLine2: stripeAddressData.value.address.line2 || '',
+            city: stripeAddressData.value.address.city,
+            country: stripeAddressData.value.address.country,
+            postalCode: stripeAddressData.value.address.postal_code,
+            state: stripeAddressData.value.address.state,
+        },
+    };
+};
+
+const triggerBuildLandedCost = async (buildLandedCost) => {
+    var _a, _b, _c, _d;
+    const data = prepCalculateLandedCost();
+    const landedCost = await buildLandedCost({
+        billingAddress: data.billingAddress,
+        billingContact: data.billingContact,
+        checkoutSessionId: data.checkoutSessionId,
+        contact: data.contact,
+        shippingAddress: data.shippingAddress,
+    });
+    if (!landedCost || ((_a = landedCost.errors) === null || _a === void 0 ? void 0 : _a.length)) {
+        throw new Error(`Failed to build landed cost: ${((_c = (_b = landedCost === null || landedCost === void 0 ? void 0 : landedCost.errors) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.message) || 'Unknown error'}`);
+    }
+    // Validate the landed cost object to make sure the returned value from buildLandedCost has a valid schema
+    const { errors, json } = await handleFetch(`${"https://v1.route.js.zonos.com"}/api/zonos-elements/validate-landed-cost`, {
+        body: landedCost,
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        method: 'POST',
+    });
+    if (!json || errors.length) {
+        throw new Error(`Invalid landed cost object: ${((_d = errors.find(Boolean)) === null || _d === void 0 ? void 0 : _d.message) || 'Unknown error'}`);
+    }
+    return landedCost;
+};
+
+const calculateLandedCost = async (abortController) => {
+    var _a;
+    // If buildLandedCost callback is supplied, use that instead of our regular request to '/calculate-landed-cost'
+    const buildLandedCost = zonosStore.checkoutSettings.buildLandedCost;
+    if (buildLandedCost) {
+        const json = await triggerBuildLandedCost(buildLandedCost);
+        return json;
+    }
+    // request to get landed cost info
+    const url = `${"https://v1.route.js.zonos.com"}/api/zonos-elements/calculate-landed-cost`;
+    const { errors, json } = await handleFetch(url, {
+        body: prepCalculateLandedCost(),
+        method: 'POST',
+        signal: abortController === null || abortController === void 0 ? void 0 : abortController.signal,
+    });
+    if (errors.length || !json) {
+        const isAbortedRequest = ((_a = errors[0]) === null || _a === void 0 ? void 0 : _a.message) === 'The user aborted a request.';
+        const errorMessage = isAbortedRequest
+            ? 'The landed cost calculation request was aborted to initiate a new one.'
+            : 'Failed to calculate landed cost';
+        throw new Error(errorMessage);
+    }
+    return json;
+};
+
+const jsonParse = (_data) => {
+    if (typeof _data === 'string') {
+        try {
+            // eslint-disable-next-line no-restricted-syntax
+            const json = JSON.parse(_data);
+            return json;
+        }
+        catch (_error) {
+            return null;
+        }
+    }
+    return null;
+};
+
+const addressRuleStyle = ({ theme, }) => {
+    switch (theme) {
+        default:
+            return {
+                '.Input': {
+                    boxShadow: 'none',
+                    // need to reset everything and the paddingTop to default, otherwise the paddingTop will not be updated.
+                    padding: '0',
+                    paddingBottom: '8px',
+                    paddingLeft: '16px',
+                    paddingRight: '8px',
+                    // any value here will be add up to the default paddingTop (20px).
+                    paddingTop: '6px',
+                },
+                '.Input:focus': {
+                    boxShadow: 'none',
+                },
+            };
+    }
+};
+
+const defaultVariable = ({ borderStyle, theme, }) => {
+    switch (theme) {
+        case 'DARK':
+            return {
+                borderRadius: getBorderRadius(borderStyle),
+                colorBackground: '#101117',
+                colorBackgroundText: '#C5C6CA',
+                colorText: '#C5C6CA',
+                colorTextPlaceholder: '#C5C6CA',
+            };
+        default:
+            return {
+                borderRadius: getBorderRadius(borderStyle),
+            };
+    }
+};
+
+const { onChange: onChange$1, reset: reset$1, state: stripeStore, } = createStore(() => ({
+    clientSecret: sessionStorage.getItem('zonos--client-secret') || null,
+    fetchingLandedCostAbordController: null,
+    isFetchingLandedCost: false,
+    isFetchingSession: false,
+    stripe: null,
+    stripeAddressElement: null,
+    stripeAddressEventData: null,
+    stripeAddressUsedWhenFetchingLC: null,
+    stripeBillingAddressElement: null,
+    stripeBillingAddressEventData: null,
+    stripeBillingAddressUsedWhenFetchingLC: null,
+    stripeElements: null,
+    stripeElementsForBillingAddress: null,
+    stripeElementsOptions: null,
+    stripeLinkElement: null,
+    stripeLinkEventData: null,
+    stripeLinkUsedWhenFetchingLC: null,
+    stripePaymentElement: null,
+    stripePaymentEventData: null,
+    stripeShippingSameAsBilling: true,
+}));
+const getStripeOptions = ({ clientSecret, overrideBorderRaidus, overridePrimaryColor, overrideSecondaryColor, overrideTheme, }) => {
+    const primaryColor = overridePrimaryColor || zonosStore.appearance.colorPrimary;
+    const secondaryColor = overrideSecondaryColor || zonosStore.appearance.colorSecondary;
+    const themeBasedColor = primaryColor && isDarkColor(primaryColor) ? 'night' : 'flat';
+    // if overrideTheme is provided, use it. Otherwise, use theme based on primary color
+    const theme = overrideTheme === 'DARK' ? 'night' : 'flat';
+    return {
+        appearance: {
+            labels: 'floating',
+            rules: Object.assign({}, addressRuleStyle({ theme: 'LIGHT' })),
+            // get contrast theme color base on primary color
+            theme: overrideTheme ? theme : themeBasedColor,
+            variables: Object.assign(Object.assign({}, defaultVariable({
+                borderStyle: overrideBorderRaidus,
+                theme: 'LIGHT',
+            })), { 
+                // use the button background color for input glow color
+                colorPrimary: secondaryColor }),
+        },
+        clientSecret,
+        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;
+    if (!stripeStore.stripe) {
+        log('Skip. Stripe is not initialized');
+        return;
+    }
+    if (clientSecret) {
+        const stripeOptions = getStripeOptions({
+            clientSecret,
+            overrideBorderRaidus: props === null || props === void 0 ? void 0 : props.overrideBorderRaidus,
+            overridePrimaryColor: props === null || props === void 0 ? void 0 : props.overridePrimaryColor,
+            overrideSecondaryColor: props === null || props === void 0 ? void 0 : props.overrideSecondaryColor,
+            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 ||
+            !stripeStore.stripeElementsForBillingAddress) {
+            // 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');
+            // init stripe elements for billing address
+            stripeStore.stripeElementsForBillingAddress =
+                (_b = stripeStore.stripe) === null || _b === void 0 ? void 0 : _b.elements(stripeOptions);
+            log('Stripe elements for billing address initialized');
+            return;
+        }
+        if (!isSameOptions) {
+            // update elements with new option if it already exists
+            stripeStore.stripeElements.update(stripeOptions);
+            // update elements for stripe billing address
+            stripeStore.stripeElementsForBillingAddress.update(stripeOptions);
+            // save stripe elements options for later comparison
+            stripeStore.stripeElementsOptions = stripeOptions;
+        }
+        log('Stripe elements initialized');
+    }
+};
+const stripeStoreReset = () => {
+    // clean clientSecret so that we can start the new one.
+    sessionStorage.removeItem('zonos--client-secret');
+    // cleanup stripe elements
+    reset$1();
+    // set stripe back to window.Zonos.stripe
+    stripeStore.stripe = window.Zonos.stripe;
+};
+/**
+ * Check if the address and email info used when fetching landed cost with the current email and address info are different
+ * Purpose is to resend the request if the info used when fetching landed cost is different from the current info
+ */
+const isPrefetchInfoOutdated = () => {
+    var _a, _b, _c, _d, _e, _f;
+    const hasAbortController = stripeStore.fetchingLandedCostAbordController;
+    if (!hasAbortController) {
+        // if there is no abort controller, this is a new request
+        return false;
+    }
+    const isLinkDataDirty = JSON.stringify((_a = stripeStore.stripeLinkUsedWhenFetchingLC) === null || _a === void 0 ? void 0 : _a.value) !==
+        JSON.stringify((_b = stripeStore.stripeLinkEventData) === null || _b === void 0 ? void 0 : _b.value);
+    const isAddressDataDirty = JSON.stringify((_c = stripeStore.stripeAddressUsedWhenFetchingLC) === null || _c === void 0 ? void 0 : _c.value) !==
+        JSON.stringify((_d = stripeStore.stripeAddressEventData) === null || _d === void 0 ? void 0 : _d.value);
+    const isBillingAddressDataDirty = !stripeStore.stripeShippingSameAsBilling &&
+        JSON.stringify((_e = stripeStore.stripeBillingAddressEventData) === null || _e === void 0 ? void 0 : _e.value) !==
+            JSON.stringify((_f = stripeStore.stripeBillingAddressUsedWhenFetchingLC) === null || _f === void 0 ? void 0 : _f.value);
+    return isLinkDataDirty || isAddressDataDirty || isBillingAddressDataDirty;
+};
+const stripeStorePrefetchLandedCost = async () => {
+    var _a, _b, _c, _d, _e, _f;
+    const stripeAddressReady = !!((_a = stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.complete);
+    const stripeLinkReady = !!((_b = stripeStore.stripeLinkEventData) === null || _b === void 0 ? void 0 : _b.complete);
+    const stripeBillingAddressReady = stripeStore.stripeShippingSameAsBilling
+        ? !!((_c = stripeStore.stripeLinkEventData) === null || _c === void 0 ? void 0 : _c.complete)
+        : !!((_d = stripeStore.stripeBillingAddressEventData) === null || _d === void 0 ? void 0 : _d.complete);
+    const shouldRefetch = isPrefetchInfoOutdated();
+    if (shouldRefetch) {
+        // if the info used when fetching landed cost is different from the current info, abort the previous request
+        (_e = stripeStore.fetchingLandedCostAbordController) === null || _e === void 0 ? void 0 : _e.abort();
+        stripeStore.fetchingLandedCostAbordController = null;
+    }
+    // only fetch if we are not fetching or we need to refetch
+    if (stripeAddressReady &&
+        stripeLinkReady &&
+        stripeBillingAddressReady &&
+        (shouldRefetch || !stripeStore.isFetchingLandedCost)) {
+        stripeStore.isFetchingLandedCost = true;
+        if (stripeStore.stripeAddressEventData) {
+            stripeStore.stripeAddressUsedWhenFetchingLC = Object.assign({}, stripeStore.stripeAddressEventData);
+        }
+        if (stripeStore.stripeBillingAddressEventData) {
+            stripeStore.stripeBillingAddressUsedWhenFetchingLC = Object.assign({}, stripeStore.stripeBillingAddressEventData);
+        }
+        if (stripeStore.stripeLinkEventData) {
+            stripeStore.stripeLinkUsedWhenFetchingLC = Object.assign({}, stripeStore.stripeLinkEventData);
+        }
+        try {
+            const abortController = new AbortController();
+            stripeStore.fetchingLandedCostAbordController = 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.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
+            const firstLandedCostData = (_f = cartStore.landedCostData) === null || _f === void 0 ? void 0 : _f.find(Boolean);
+            const subtotals = !!firstLandedCostData
+                ? firstLandedCostData.subtotals
+                : null;
+            if (subtotals) {
+                // prefetch landed cost will not update shipping and taxes since we haven't selected shipping method yet
+                cartStoreApplySubtotals({
+                    exchangeRate: subtotals.exchangeRate,
+                    items: subtotals.items,
+                    landedCostTotal: 0,
+                    presentmentCurrencyCode: subtotals.presentmentCurrencyCode,
+                    shipping: 0,
+                    total: subtotals.items,
+                });
+            }
+        }
+        catch (err) {
+            logError(err);
+        }
+        stripeStore.isFetchingLandedCost = false;
+    }
+};
+const getStripeMessageBasedOnStatus = (status) => {
+    let messages = [];
+    let isError = true;
+    // Inspect the PaymentIntent `status` to indicate the status of the payment
+    // to your customer.
+    //
+    // Some payment methods will [immediately succeed or fail][0] upon
+    // confirmation, while others will first enter a `processing` state.
+    //
+    // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification
+    switch (status) {
+        case 'succeeded': {
+            messages = [
+                translate('Your payment went through successfully! Thank you for shopping with us! We hope you had an enjoyable experience and your support means the world to us.'),
+                '',
+                '',
+                translate("We've sent an email confirmation of the order details for your review. And our team is carefully preparing your order so it arrives on time."),
+            ];
+            isError = false;
+            break;
+        }
+        case 'requires_capture':
+        case 'processing': {
+            messages = [
+                translate("Payment processing. We'll update you when payment is received."),
+            ];
+            isError = false;
+            break;
+        }
+        case 'requires_payment_method': {
+            messages = [
+                translate('Payment failed. Please try another payment method.'),
+            ];
+            break;
+        }
+        default: {
+            messages = [translate('Something went wrong.')];
+            break;
+        }
+    }
+    return {
+        isError,
+        messages,
+    };
+};
+const stripeStoreRetrievePayment = async ({ clientSecret: _clientSecret, storybookForceStatus, }) => {
+    if (storybookForceStatus) {
+        // return status right away if we are in storybook mode
+        const { isError, messages } = getStripeMessageBasedOnStatus(storybookForceStatus);
+        return { error: isError, messages };
+    }
+    const clientSecret = _clientSecret || stripeStore.clientSecret;
+    if (!stripeStore.stripe || !clientSecret) {
+        logError('Failed to retrieve payment intent. Stripe is not initialized');
+        return { error: true, message: [translate('Something went wrong.')] };
+    }
+    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,
+        paymentMethod: paymentIntent === null || paymentIntent === void 0 ? void 0 : paymentIntent.payment_method,
+    };
+};
+const stripeStoreConfirmPayment = async () => {
+    var _a, _b, _c;
+    const stripePaymentReady = !!((_a = stripeStore.stripePaymentEventData) === null || _a === void 0 ? void 0 : _a.complete);
+    const stripeElements = stripeStore.stripeElements;
+    const stripe = stripeStore.stripe;
+    const stripeClientSecret = stripeStore.clientSecret;
+    if (stripe && stripeElements && stripePaymentReady && stripeClientSecret) {
+        const { error } = await stripe.confirmPayment({
+            confirmParams: {
+                receipt_email: (_c = (_b = stripeStore.stripeLinkEventData) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.email,
+                return_url: window.location.href,
+            },
+            elements: stripeElements,
+            redirect: 'if_required',
+        });
+        if (error) {
+            if (error.type === 'card_error' || error.type === 'validation_error') {
+                throw new Error(error.message);
+            }
+            if (error.type === 'invalid_request_error') {
+                if (error.code === 'payment_intent_unexpected_state') {
+                    // PaymentIntent was canceled or expired, or status is `require_capture`.
+                    // don't throw error here because we will reset the checkout session last step
+                    return;
+                }
+            }
+            throw new Error('An unexpected error occurred.');
+        }
+    }
+};
+/**
+ * Init checkout session
+ * @returns {boolean} whether or not the checkout session is successfully created
+ */
+const stripeStoreInitCheckoutSession = async () => {
+    var _a;
+    const total = cartStore.items.reduce((amount, item) => amount + item.amount * item.quantity, 0);
+    if (!total || !localizationStore.targetCurrency) {
+        logError('Fail to create checkout session - invalid total or currency');
+        return false;
+    }
+    stripeStore.isFetchingSession = true;
+    const { errors, json } = await handleFetch(`${"https://v1.route.js.zonos.com"}/api/zonos-elements/create-checkout-session`, {
+        body: {
+            currency: ((_a = cartStore.items.find(Boolean)) === null || _a === void 0 ? void 0 : _a.currencyCode) || '',
+            itemsAmount: total,
+            metadata: [
+                { key: 'language', value: localizationStore.selectedLocale },
+            ],
+            presentmentCountryCode: localizationStore.selectedCountryCode || null,
+        },
+        method: 'POST',
+    });
+    stripeStore.isFetchingSession = false;
+    if (errors.length || !json) {
+        logError('Error occurs when creating checkout session', JSON.stringify(errors, null, 2));
+        return false;
+    }
+    const result = json.checkoutSessionCreate;
+    stripeStore.clientSecret = result.clientSecret;
+    // update cart store with updated informations
+    cartStore.checkoutSessionId = result.id;
+    cartStoreApplySubtotals(Object.assign(Object.assign({}, result.subtotals), { landedCostTotal: 0, shipping: 0, total: result.subtotals.items }));
+    log('Exchange rate updated for cart items (checkout session create)', 'info', cartStore.exchangeRate);
+    log('done-init-checkout-session');
+    return true;
+};
+/**
+ * Update checkout session. Use for updating amount with landed cost id, or update session when cart items change
+ */
+const stripeStoreUpdateCheckoutSession = async ({ currency, id, itemsAmount, landedCostId, presentmentCountryCode, }) => {
+    // No need to set loading state here because this function will be called under the hood to update
+    // landed cost id for the section.
+    const { errors, json } = await handleFetch(`${"https://v1.route.js.zonos.com"}/api/zonos-elements/update-checkout-session`, {
+        body: {
+            currency,
+            id,
+            itemsAmount,
+            landedCostId,
+            presentmentCountryCode,
+        },
+        method: 'POST',
+    });
+    if (errors.length || !json) {
+        logError('Error occurs when updating checkout session', JSON.stringify(errors, null, 2));
+        return { errors, json };
+    }
+    return { errors: [], json };
+};
+onChange$1('clientSecret', clientSecret => {
+    // update stripe elements when client secret changes
+    if (clientSecret && stripeStore.stripe) {
+        sessionStorage.setItem('zonos--client-secret', clientSecret);
+    }
+    if (!clientSecret) {
+        sessionStorage.removeItem('zonos--client-secret');
+    }
+});
+
+const formatDate = ({ date, formatOptions = { day: 'numeric', weekday: 'long', year: 'numeric' }, }) => {
+    // format date to Thursday 3, 2023
+    return new Intl.DateTimeFormat('en-US', formatOptions).format(date);
+};
+
+const getDaysDifference = (targetDate) => {
+    const currentDate = new Date();
+    const timeDifference = targetDate.getTime() - currentDate.getTime();
+    const daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24)); // Convert milliseconds to days
+    return daysDifference;
+};
+
+const { onChange, reset, state: cartStore, } = createStore(() => ({
+    checkoutSessionId: sessionStorage.getItem('zonos--checkout-session-id') || null,
+    currency: 'USD',
+    dutiesTaxFees: 0,
+    error: null,
+    exchangeRate: null,
+    isSelectedShippingAboveDeminimis: false,
+    isSelectedShippingGuarantee: false,
+    items: [],
+    landedCostData: null,
+    selectedLandedCost: null,
+    selectedShippingOption: null,
+    selectedShippingOptionExpectedDate: '',
+    selectedShippingOptionTransitTime: '',
+    shipping: 0,
+    shippingData: null,
+    step: 'customer-info',
+    subtotal: 0,
+    total: 0,
+}));
+/**
+ * Format shipping transit info to be displayed on UI
+ * @returns
+ * - expectedDate: Thursday, Aug 12
+ * - maxTransit: 5
+ * - minTransit: 3
+ */
+const cartStoreGetShippingTransitInfo = (item) => {
+    const minTransit = item.minTransitAt
+        ? getDaysDifference(new Date(item.minTransitAt))
+        : '';
+    const maxTransit = item.maxTransitAt
+        ? getDaysDifference(new Date(item.maxTransitAt))
+        : '';
+    const expectedDate = item.minTransitAt
+        ? formatDate({
+            date: new Date(item.minTransitAt),
+        })
+        : '';
+    return {
+        expectedDate,
+        maxTransit,
+        minTransit,
+    };
+};
+const cartStoreReset = () => {
+    sessionStorage.removeItem('zonos--checkout-session-id');
+    // reset cart store
+    reset();
+};
+const cartStoreUpdateToErrorState = ({ messages, title, }) => {
+    cartStoreReset();
+    stripeStoreReset();
+    cartStore.step = 'error';
+    cartStore.error = {
+        messages,
+        title,
+    };
+};
+const cartStoreApplySubtotals = (subtotals) => {
+    // update exchange rate so we can use it to display cart items
+    cartStore.exchangeRate = subtotals.exchangeRate;
+    cartStore.dutiesTaxFees = subtotals.landedCostTotal;
+    cartStore.subtotal = subtotals.items;
+    cartStore.total = subtotals.total;
+    cartStore.currency = subtotals.presentmentCurrencyCode;
+};
+const cartStoreReCalculateTotal = async ({ currency, itemsAmount, landedCostId, }) => {
+    if (landedCostId && cartStore.selectedLandedCost) {
+        // update cart total right away if we have landed cost id to avoid order total flickering
+        const subtotals = cartStore.selectedLandedCost.subtotals;
+        cartStoreApplySubtotals(subtotals);
+        log('Exchange rate updated for cart items (landed cost subtotal)', 'info', cartStore.exchangeRate);
+    }
+    // update checkout session
+    if (!cartStore.checkoutSessionId) {
+        logError('Could not update cart total without checkout session id');
+        return false;
+    }
+    const { errors, json } = await stripeStoreUpdateCheckoutSession({
+        currency,
+        id: cartStore.checkoutSessionId,
+        itemsAmount,
+        landedCostId,
+        presentmentCountryCode: localizationStore.selectedCountryCode,
+    });
+    if (errors.length > 0 || !json) {
+        // do nothing if we can't get checkout session
+        logError('Error occurs when updating checkout session');
+        cartStoreUpdateToErrorState({
+            messages: [
+                translate("There's been an error updating your checkout session. Please reload and try again or contact support if the error persists"),
+            ],
+            title: translate('Error updating Checkout'),
+        });
+        return false;
+    }
+    if (!landedCostId) {
+        // This is when first open the checkout modal and we just want to get info from the old cart session.
+        // use subtotals from checkout session to update cart total
+        cartStoreApplySubtotals(json.checkoutSessionUpdate.subtotals);
+        log('Exchange rate updated for cart items (checkout session update)', 'info', cartStore.exchangeRate);
+    }
+    return true;
+};
+const cartStoreUpdateSelectedShippingOption = async (selectedShippingOption) => {
+    var _a, _b, _c, _d, _e;
+    cartStore.selectedShippingOption = selectedShippingOption;
+    // update shipping transit info
+    const { expectedDate, maxTransit, minTransit } = cartStoreGetShippingTransitInfo(cartStore.selectedShippingOption);
+    cartStore.selectedShippingOptionExpectedDate = expectedDate;
+    cartStore.selectedShippingOptionTransitTime =
+        minTransit && maxTransit
+            ? `${minTransit}-${maxTransit}`
+            : `${minTransit || maxTransit}`;
+    const selectedLandedCost = (_a = cartStore.landedCostData) === null || _a === void 0 ? void 0 : _a.find(checkoutSessionPresentment => {
+        var _a, _b, _c;
+        return ((_b = (_a = checkoutSessionPresentment.landedCost) === null || _a === void 0 ? void 0 : _a.shipmentRating) === null || _b === void 0 ? void 0 : _b.id) ===
+            ((_c = cartStore.selectedShippingOption) === null || _c === void 0 ? void 0 : _c.id);
+    });
+    // save selected landed cost for later use
+    cartStore.selectedLandedCost = selectedLandedCost || null;
+    if (!selectedLandedCost) {
+        // do nothing if we can't find landed cost for selected shipping option
+        return false;
+    }
+    // update shipping value and dutiesTaxFees on selectedShippingOption change
+    cartStore.shipping = selectedLandedCost.subtotals.shipping;
+    // update deminimis status
+    const isGuarantee = ((_b = selectedLandedCost === null || selectedLandedCost === void 0 ? void 0 : selectedLandedCost.landedCost) === null || _b === void 0 ? void 0 : _b.landedCostGuaranteeCode) === 'ZONOS';
+    // one item in deminimis with type of duty and tax has threshold value is "ABOVE"
+    const isAboveDeminimis = !!((_d = (_c = selectedLandedCost === null || selectedLandedCost === void 0 ? void 0 : selectedLandedCost.landedCost) === null || _c === void 0 ? void 0 : _c.deMinimis) === null || _d === void 0 ? void 0 : _d.find(item => ['DUTY', 'TAX'].includes(item.type) && item.threshold === 'ABOVE'));
+    cartStore.isSelectedShippingAboveDeminimis = isAboveDeminimis;
+    cartStore.isSelectedShippingGuarantee = isGuarantee;
+    // update session with selected landed cost
+    const updateCalulateStatus = await cartStoreReCalculateTotal({
+        landedCostId: (_e = selectedLandedCost.landedCost) === null || _e === void 0 ? void 0 : _e.id,
+    });
+    return updateCalulateStatus;
+};
+onChange('checkoutSessionId', () => {
+    if (!cartStore.checkoutSessionId) {
+        sessionStorage.removeItem('zonos--checkout-session-id');
+        return;
+    }
+    sessionStorage.setItem('zonos--checkout-session-id', cartStore.checkoutSessionId);
+});
+const cartStoreUpdateItems = async (items) => {
+    var _a;
+    cartStore.items = items;
+    const currency = (_a = items.find(Boolean)) === null || _a === void 0 ? void 0 : _a.currencyCode;
+    const total = items.reduce((amt, item) => {
+        return amt + item.amount * item.quantity;
+    }, 0);
+    if (!currency || !total) {
+        // do nothing if we can't get currency or total
+        return;
+    }
+    cartStore.currency = currency;
+    // set loading state here because this is first load checkout session when we already have checkout session id stored
+    stripeStore.isFetchingSession = true;
+    await cartStoreReCalculateTotal({
+        currency: currency,
+        itemsAmount: total,
+    });
+    stripeStore.isFetchingSession = false;
+};
+const cartStoreResetSelectedShippingOption = () => {
+    cartStore.selectedShippingOption = null;
+    cartStore.isSelectedShippingAboveDeminimis = false;
+    cartStore.isSelectedShippingGuarantee = false;
+    cartStore.selectedShippingOptionExpectedDate = '';
+    cartStore.selectedShippingOptionTransitTime = '';
+    cartStore.shipping = 0;
+};
+const cartStoreNextStep = () => {
+    if (cartStore.step === 'customer-info') {
+        cartStore.step = 'shipping';
+    }
+    else if (cartStore.step === 'shipping') {
+        cartStore.step = 'payment';
+    }
+    else if (cartStore.step === 'payment') {
+        cartStore.step = 'finish';
+    }
+};
+const cartStorePreviousStep = () => {
+    if (cartStore.step === 'payment') {
+        cartStore.step = 'shipping';
+    }
+    else if (cartStore.step === 'shipping') {
+        cartStore.step = 'customer-info';
+        // reset selected shipping option
+        cartStoreResetSelectedShippingOption();
+    }
 };
 
-export { log as a, logError as b, initLocalizationStore as c, localizationStoreUpdateSelectedCountryCode as d, currencyDisplay as e, currencyConvertAndFormat as f, getZCountryUrlParam as g, handleFetch as h, isValidSelector as i, currencyConvert as j, currencyFormat as k, localizationStore as l, localizationStoreUpdateSelectedLocale as m, setZCountryUrlParam as s, translate as t };
+export { currencyConvertAndFormat as A, currencyConvert as B, currencyFormat as C, stripeStoreRetrievePayment as D, cartStoreUpdateSelectedShippingOption as E, cartStoreGetShippingTransitInfo as F, localizationStoreUpdateSelectedLocale as G, log as a, localizationStoreUpdateSelectedCountryCode as b, stripeStoreCleanupDomesticShippingSession as c, logError as d, stripeStoreSaveDomesticShippingSession as e, cartStore as f, cartStoreUpdateItems as g, cartStoreReset as h, initStripeElements as i, stripeStore as j, stripeStoreInitCheckoutSession as k, localizationStore as l, cartStoreUpdateToErrorState as m, stripeStorePrefetchLandedCost as n, cartStoreNextStep as o, stripeStoreConfirmPayment as p, stripeStoreReset as q, cartStorePreviousStep as r, stripeStoreGetDomesticShippingSession as s, translate as t, handleFetch as u, isValidSelector as v, initLocalizationStore as w, getZCountryUrlParam as x, setZCountryUrlParam as y, currencyDisplay as z };