@zonos/elements 1.3.6 → 1.3.7-alpha.1

package/dist/cjs/{localization-2c9f5765.js → cart-89d9fff4.js}

@@ -1,6 +1,8 @@
 'use strict';
 
-const zonosStore = require('./zonosStore-5d94dabb.js');
+const zonosStore = require('./zonosStore-138c5555.js');
+const isDarkColor = require('./isDarkColor-57860b44.js');
+const getBorderRadius = require('./getBorderRadius-d8f18958.js');
 
 const stringsArabic = {
     'Above de minimis threshold for': {
@@ -3546,7 +3548,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);
@@ -3567,9 +3569,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) => {
@@ -3731,51 +3789,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)) {
@@ -3789,18 +3802,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);
@@ -3808,9 +3824,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.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;
     }
@@ -3819,33 +3858,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);
     });
 };
 
@@ -3927,11 +3941,9 @@ const getNewLocalization = async () => {
         !selectedCountryCode) {
         return;
     }
-    if (zonosStore.zonosStore.sourceCurrency !== localizationStore.targetCurrency) {
-        const isGuaranteed = zonosStore.zonosStore.checkoutSettings.visibilityStatus === 'ENABLED';
-        const { maxAge } = await triggerGetExchangeRate(isGuaranteed);
-        startExchangeRateTimeout({ isGuaranteed, maxAge });
-    }
+    const isGuaranteed = zonosStore.zonosStore.checkoutSettings.visibilityStatus === 'ENABLED';
+    const { maxAge } = await triggerGetExchangeRate(isGuaranteed);
+    startExchangeRateTimeout({ isGuaranteed, maxAge });
     localizationStore.countryLandedCost = await getCountryLandedCost(localizationStore.selectedCountryCode);
 };
 const getCustomMessages = async () => {
@@ -3958,7 +3970,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;
@@ -3982,6 +3995,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
@@ -3989,7 +4004,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;
@@ -4010,11 +4025,760 @@ 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.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.getBorderRadius(borderStyle),
+                colorBackground: '#101117',
+                colorBackgroundText: '#C5C6CA',
+                colorText: '#C5C6CA',
+                colorTextPlaceholder: '#C5C6CA',
+            };
+        default:
+            return {
+                borderRadius: getBorderRadius.getBorderRadius(borderStyle),
+            };
+    }
+};
+
+const { onChange: onChange$1, reset: reset$1, state: stripeStore, } = zonosStore.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.zonosStore.appearance.colorPrimary;
+    const secondaryColor = overrideSecondaryColor || zonosStore.zonosStore.appearance.colorSecondary;
+    const themeBasedColor = primaryColor && isDarkColor.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, } = zonosStore.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();
+    }
 };
 
+exports.cartStore = cartStore;
+exports.cartStoreGetShippingTransitInfo = cartStoreGetShippingTransitInfo;
+exports.cartStoreNextStep = cartStoreNextStep;
+exports.cartStorePreviousStep = cartStorePreviousStep;
+exports.cartStoreReset = cartStoreReset;
+exports.cartStoreUpdateItems = cartStoreUpdateItems;
+exports.cartStoreUpdateSelectedShippingOption = cartStoreUpdateSelectedShippingOption;
+exports.cartStoreUpdateToErrorState = cartStoreUpdateToErrorState;
 exports.currencyConvert = currencyConvert;
 exports.currencyConvertAndFormat = currencyConvertAndFormat;
 exports.currencyDisplay = currencyDisplay;
@@ -4022,6 +4786,7 @@ exports.currencyFormat = currencyFormat;
 exports.getZCountryUrlParam = getZCountryUrlParam;
 exports.handleFetch = handleFetch;
 exports.initLocalizationStore = initLocalizationStore;
+exports.initStripeElements = initStripeElements;
 exports.isValidSelector = isValidSelector;
 exports.localizationStore = localizationStore;
 exports.localizationStoreUpdateSelectedCountryCode = localizationStoreUpdateSelectedCountryCode;
@@ -4029,4 +4794,13 @@ exports.localizationStoreUpdateSelectedLocale = localizationStoreUpdateSelectedL
 exports.log = log;
 exports.logError = logError;
 exports.setZCountryUrlParam = setZCountryUrlParam;
+exports.stripeStore = stripeStore;
+exports.stripeStoreCleanupDomesticShippingSession = stripeStoreCleanupDomesticShippingSession;
+exports.stripeStoreConfirmPayment = stripeStoreConfirmPayment;
+exports.stripeStoreGetDomesticShippingSession = stripeStoreGetDomesticShippingSession;
+exports.stripeStoreInitCheckoutSession = stripeStoreInitCheckoutSession;
+exports.stripeStorePrefetchLandedCost = stripeStorePrefetchLandedCost;
+exports.stripeStoreReset = stripeStoreReset;
+exports.stripeStoreRetrievePayment = stripeStoreRetrievePayment;
+exports.stripeStoreSaveDomesticShippingSession = stripeStoreSaveDomesticShippingSession;
 exports.translate = translate;