@zonos/elements 1.3.241 → 1.3.243

package/dist/esm/zonos-card_5.entry.js

@@ -2,10 +2,10 @@ import { r as registerInstance, h, H as Host, a as getElement, c as createEvent
 import { f as zonosStoreFontFamily } from './zonosStore-b434e436.js';
 import { c as classes } from './classes-0d95c529.js';
 import { g as getBorderRadius } from './getBorderRadius-877f6389.js';
-import { c as stripeStore, t as trackConversionEvent } from './cart-60532eb4.js';
-import { s as storageStore } from './localization-285da14c.js';
+import { b as stripeStore, t as trackConversionEvent } from './cart-00134a17.js';
+import { s as storageStore } from './localization-ee8bb238.js';
 import { l as logError } from './handleFetch-a844cac1.js';
-import { d as paypalStoreInitButtons, e as paypalStoreOnChange } from './paypal-ac12eedb.js';
+import { d as paypalStoreInitButtons, e as paypalStoreOnChange } from './paypal-2e28d0e7.js';
 import { l as log } from './VarianceTest-572cecf5.js';
 import './isDarkColor-9ddd90cc.js';
 
@@ -255,7 +255,7 @@ const ZonosPayment = class {
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: 'ca6da9e9fadd891c2a748186c30fdfcf8f57ffc5', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { key: '8083de8ff08f5cd7f3ddaf6190844ee11b72ed4a', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: 'cf88a4f5b989e1911b089ce9298945307085455a', class: "zonos--payment-component" }), h("div", { key: 'ff768b9ca8dd0a60605196f50bcba3c542cc2206', class: "zonos--payment-paypal-container" })));
+        return (h(Host, { key: '1fb61e01184d3a0b2dc079ae468e96175d9f6518', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { key: '3860ff7fc2656ff045ce09c0de2e14aa7a22e194', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: '3cabad9c095f2eeba8cfc464374ca9abfc2af5ee', class: "zonos--payment-component" }), h("div", { key: '9e2b13a0d8131a5513f99e2a6436ca3c5f03d7cf', class: "zonos--payment-paypal-container" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -319,7 +319,7 @@ const ZonosPaypalPayment = class {
         this.storeUnsubscribeList.forEach(unsubscribe => unsubscribe());
     }
     render() {
-        return (h(Host, { key: '503c2a2f4d6dd0d6c10468f4bbe915610cf7008e', class: "zonos--paypal-payment zonos--elements" }, h("div", { key: 'c1d2c15bf6f096c3666f9d4e8085c5fbe2c637a7', class: "zonos--payment-paypal-container" })));
+        return (h(Host, { key: '35387382aaa81e3f8e025e8f3503be41b86e2355', class: "zonos--paypal-payment zonos--elements" }, h("div", { key: '34fad15dee67d8b913071a59d35b1c2317d4d3a0', class: "zonos--payment-paypal-container" })));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/zonos-cart-items_12.entry.js

@@ -1,18 +1,18 @@
 import { r as registerInstance, d as getAssetPath, h, H as Host, F as Fragment, c as createEvent, a as getElement } from './index-0bbe9693.js';
-import { e as cartStore, E as cartStoreHasOneEligibleItem, F as stripeStoreApplyPromoCode, G as stripeStoreRemovePromoCode, c as stripeStore, y as stripeStoreReset, d as stripeStoreRetrievePayment, t as trackConversionEvent, H as stripeStoreResetPromoCode, I as stripeStoreMessageBasedOnStatus, r as cartStoreNextStep, J as stripeStoreTranslateAddressToLatin, K as extractName, z as cartStoreOnChange, L as stripeStoreAsyncAddressUpdate, D as cartStoreUpdateSelectedShippingOption, M as cartStoreGetShippingTransitInfo, N as cartStoreGetMethod, O as sortServiceLevelOptionsByAmount } from './cart-60532eb4.js';
-import { t as translate, l as localizationStore, s as storageStore, c as localizationStoreOnChange } from './localization-285da14c.js';
-import { r as renderCheckoutCurrency } from './renderCheckoutCurrency-0176e66f.js';
+import { d as cartStore, E as cartStoreHasOneEligibleItem, F as stripeStoreApplyPromoCode, G as stripeStoreRemovePromoCode, b as stripeStore, y as stripeStoreReset, c as stripeStoreRetrievePayment, t as trackConversionEvent, H as stripeStoreResetPromoCode, I as stripeStoreMessageBasedOnStatus, r as cartStoreNextStep, J as stripeStoreTranslateAddressToLatin, K as extractName, z as cartStoreOnChange, L as stripeStoreAsyncAddressUpdate, D as cartStoreUpdateSelectedShippingOption, M as cartStoreGetShippingTransitInfo, N as cartStoreGetMethod, O as sortServiceLevelOptionsByAmount } from './cart-00134a17.js';
+import { t as translate, l as localizationStore, s as storageStore, c as localizationStoreOnChange } from './localization-ee8bb238.js';
+import { r as renderCheckoutCurrency } from './renderCheckoutCurrency-54994d08.js';
 import { c as cleanHtmlMarkdown } from './cleanHtmlMarkdown-b5b18743.js';
 import { c as classes } from './classes-0d95c529.js';
 import { z as zonosStore, h as zonosStoreOnChange, g as getZonosStoreTheme, f as zonosStoreFontFamily } from './zonosStore-b434e436.js';
-import { D as DUTY_KEY, T as TAXES_KEY, h as hasInclusivePrice } from './hasInclusivePrice-736c9eec.js';
-import { s as submitGtag, c as paypalStoreReset, a as paypalStore, i as isContrastColor } from './paypal-ac12eedb.js';
+import { D as DUTY_KEY, T as TAXES_KEY, h as hasInclusivePrice } from './hasInclusivePrice-f41e52b8.js';
+import { s as submitGtag, c as paypalStoreReset, a as paypalStore, i as isContrastColor } from './paypal-2e28d0e7.js';
 import { h as handleFetch, s as sendErrorLog, j as jsonParse, g as getIsTestMode, i as isCheckoutMobile, a as getIsStagingMode } from './handleFetch-a844cac1.js';
 import { c as createCustomEvent } from './createCustomEvent-58159025.js';
 import { g as getBorderRadius } from './getBorderRadius-877f6389.js';
 import { l as log, b as allLogs } from './VarianceTest-572cecf5.js';
 import { l as languages } from './ILanguage-cd6acb72.js';
-import { p as placeTestOrder } from './placeTestOrder-bba48f55.js';
+import { p as placeTestOrder } from './placeTestOrder-aa884e31.js';
 import { i as isDarkColor, t as tinycolor } from './isDarkColor-9ddd90cc.js';
 import { i as isColorVariable } from './isColorVariable-0a94004f.js';
 import { u as updateCheckoutSessionAttributes } from './updateCheckoutSessionAttributes-047a6cd4.js';
@@ -1738,11 +1738,11 @@ const ZonosRestState = class {
     }
     render() {
         const imageUrl = this.getImageRestState();
-        return (h(Host, { key: '333c158c20af14bcfc310b7fae19cadb9ffaea01', class: classes(['zonos--elements zonos--restState']), style: {
+        return (h(Host, { key: '2d9be86849c6ff2f039ca21676cbdf912538eb1d', class: classes(['zonos--elements zonos--restState']), style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '0076afaff9200094d45bd4321ea7b1d0a4954a81', class: "zonos--restState-image" }, h("img", { key: '4ef3b7ee4f62175e06da9a7d2453603ba6cf9fb8', alt: this.restStateType, onError: () => {
+            } }, h("div", { key: 'f538f05fe92eca4ee05daf72ee3387bea337c20c', class: "zonos--restState-image" }, h("img", { key: 'cc752b1ed3e9e656810c901df9f8b19462efc978', alt: this.restStateType, onError: () => {
                 this.isErrorImageLoad = true;
-            }, src: imageUrl })), h("div", { key: 'b5033ee1f4618732f14a9dd3c05d0271329083df', class: "content" }, h("zonos-text", { key: '2f21d52a7bb0b410590cb0768102155843e21038', class: "title", type: "boldSubheader" }, this.restStateTitle), h("zonos-text", { key: '48222ff00921961e770d20b817563d9a903a9e98', class: "subtitle" }, this.restStateSubtitle)), h("div", { key: 'ac6c100c85bd166945d8394cf61ab6baaa19cb3f', class: "action" }, h("slot", { key: 'cec63c8cbac43d402333c7ab6aba0ac3bd9bab36' }))));
+            }, src: imageUrl })), h("div", { key: '4729c415dbac98876fcd907437b8df21b925dec5', class: "content" }, h("zonos-text", { key: '39313c8c71d228cd1076e809146ad7ac3d877a9a', class: "title", type: "boldSubheader" }, this.restStateTitle), h("zonos-text", { key: '69813bd32ae3867ebebcc511655f2052b1175945', class: "subtitle" }, this.restStateSubtitle)), h("div", { key: '98b085930fd76e2ff095cc971ae4699041c1a550', class: "action" }, h("slot", { key: '188318643319081914ed30aad91de5f15b014953' }))));
     }
     static get assetsDirs() { return ["assets"]; }
 };

package/dist/esm/zonos-checkout.entry.js

@@ -1,10 +1,10 @@
 import { r as registerInstance, h, F as Fragment, H as Host } from './index-0bbe9693.js';
-import { s as stripeStoreGetDomesticShippingSession, a as stripeStoreCleanupDomesticShippingSession, b as stripeStoreSaveDomesticShippingSession, c as stripeStore, i as initStripeElements, d as stripeStoreRetrievePayment, e as cartStore, f as cartStoreUpdateItems, g as cartStoreReset, h as cartStoreResetTabItems, j as cartStoreClearCheckoutInterval, k as stripeStoreInitCheckoutSession, l as stripeStoreGetPaymentIntent, m as cartStoreStartCheckoutInterval, t as trackConversionEvent, n as getCheckoutSessionBody, o as cartStoreUpdateToErrorState, p as cartStoreSetCheckoutSession, q as stripeStorePrefetchLandedCost, r as cartStoreNextStep, u as stripeStoreUpdateCheckoutSessionBaseCurrency, v as stripeStoreHandleInventoryCheck, w as stripeStoreConfirmPayment, x as stripeStoreHandleInventoryRefund, y as stripeStoreReset, z as cartStoreOnChange } from './cart-60532eb4.js';
-import { p as paypalStoreHasPaypalEnabled, s as submitGtag, a as paypalStore, b as paypalInitScript } from './paypal-ac12eedb.js';
-import { f as filterValidTests, l as localizationStore, a as localizationStoreUpdateSelectedCountryCode, g as getZCountryUrlParam, s as storageStore, V as VARIANT_TEST_KEY_EXPIRATION, b as storageStoreSetEnabledVariantTestKeys, t as translate, c as localizationStoreOnChange, d as currencyFormat } from './localization-285da14c.js';
+import { s as stripeStoreGetDomesticShippingSession, a as stripeStoreSaveDomesticShippingSession, b as stripeStore, i as initStripeElements, c as stripeStoreRetrievePayment, d as cartStore, e as cartStoreUpdateItems, f as cartStoreReset, g as cartStoreResetTabItems, h as cartStoreClearCheckoutInterval, j as stripeStoreInitCheckoutSession, k as stripeStoreGetPaymentIntent, l as cartStoreStartCheckoutInterval, t as trackConversionEvent, m as getCheckoutSessionBody, n as cartStoreUpdateToErrorState, o as stripeStoreCleanupDomesticShippingSession, p as cartStoreSetCheckoutSession, q as stripeStorePrefetchLandedCost, r as cartStoreNextStep, u as stripeStoreUpdateCheckoutSessionBaseCurrency, v as stripeStoreHandleInventoryCheck, w as stripeStoreConfirmPayment, x as stripeStoreHandleInventoryRefund, y as stripeStoreReset, z as cartStoreOnChange } from './cart-00134a17.js';
+import { p as paypalStoreHasPaypalEnabled, s as submitGtag, a as paypalStore, b as paypalInitScript } from './paypal-2e28d0e7.js';
+import { f as filterValidTests, l as localizationStore, a as localizationStoreUpdateSelectedCountryCode, g as getZCountryUrlParam, s as storageStore, V as VARIANT_TEST_KEY_EXPIRATION, b as storageStoreSetEnabledVariantTestKeys, t as translate, c as localizationStoreOnChange, d as currencyFormat } from './localization-ee8bb238.js';
 import { z as zonosStore, g as getZonosStoreTheme, m as mergeConfig } from './zonosStore-b434e436.js';
 import { b as buildCartItemsByTempCart } from './buildCartItemsByTempCart-a117f75d.js';
-import { h as handleFetch, l as logError, s as sendErrorLog, b as getAdditionalLogMetadata, g as getIsTestMode, j as jsonParse, a as getIsStagingMode, i as isCheckoutMobile } from './handleFetch-a844cac1.js';
+import { h as handleFetch, b as getAdditionalLogMetadata, g as getIsTestMode, l as logError, j as jsonParse, s as sendErrorLog, a as getIsStagingMode, i as isCheckoutMobile } from './handleFetch-a844cac1.js';
 import { u as updateCheckoutSessionAttributes } from './updateCheckoutSessionAttributes-047a6cd4.js';
 import { _ as _getIsValidCartId, c as checkoutHiddenBtnSelector, a as checkoutHiddenInternationalBtnSelector, d as domesticRedirectedBtnSelector, g as getAbandonedCartRenewTokenValue } from './CheckoutConfig-724d7bae.js';
 import { l as log, g as getElapsedTime, b as allLogs } from './VarianceTest-572cecf5.js';
@@ -104,10 +104,23 @@ const isDisabledCountry = (showLog = true) => {
     return false;
 };
 
-const isShippableCountry = (showLog = true) => {
+const isShippableCountry = (showLog = true, 
+/**
+ * If provided, will check if the country is shippable based on the provided country code instead of the Hello selected country code
+ */
+providedCountryCode) => {
+    var _a;
     if (!localizationStore.localizationLoaded) {
         return false;
     }
+    if (providedCountryCode) {
+        const isProvidedCountryCodeShippableCountry = !!((_a = localizationStore.shippingZoneCountries) === null || _a === void 0 ? void 0 : _a[providedCountryCode]) &&
+            !zonosStore.disabledCountries.includes(providedCountryCode);
+        if (showLog && !isProvidedCountryCodeShippableCountry) {
+            log(`Checkout: ${providedCountryCode} is not a shippable country: ${isProvidedCountryCodeShippableCountry}`);
+        }
+        return isProvidedCountryCodeShippableCountry;
+    }
     // if localization is loaded and the localization is not a shippable country, keep the original click event
     if (!localizationStore.isShippableCountry) {
         if (showLog) {
@@ -118,15 +131,70 @@ const isShippableCountry = (showLog = true) => {
     return true;
 };
 
+const SHIP_TO_COUNTRY_SELECTOR = 'select[name="shippingAddress.countryCode"]';
 /**
- * Watch for changes in domestic checkout step, this is to redirect user to home page and open checkout if user enters the ship to country that's in the shipping zone
+ * Watch for changes in domestic checkout step. Redirects user to home page to open international checkout when user selects a country in the international shipping zone.
  * @note Only works on default bigcommerce checkout page
  */
-const watchBigcommerceDomesticCheckout = ({ domesticRedirectedBtnSelector, onShippingAddressSessionFound, }) => {
+const watchImmediateBigcommerceDomesticCheckoutRedirect = ({ domesticRedirectedBtnSelector, onInternationalCheckoutSelected, onShippingAddressSessionFound, }) => {
     if (!window.Zonos.isBigCommerce) {
         return;
     }
-    const observer = new MutationObserver(async () => {
+    /**
+     * Keep checking
+     */
+    const handleInternationalCheckoutSelected = async () => {
+        const shipToCountryElement = document.querySelector(SHIP_TO_COUNTRY_SELECTOR);
+        if (!shipToCountryElement) {
+            return false;
+        }
+        const shippingCountry = shipToCountryElement.value;
+        if (!shippingCountry) {
+            // do nothing if shipping country is not found
+            return false;
+        }
+        if (!isShippableCountry(false, shippingCountry)) {
+            // do nothing if shipping country is not shippable
+            return false;
+        }
+        if (onInternationalCheckoutSelected) {
+            await onInternationalCheckoutSelected();
+        }
+        // update the country code in localization store and check if it's shippable
+        localizationStoreUpdateSelectedCountryCode({
+            isInitializing: false,
+            newSelectedCountryCode: shippingCountry,
+        });
+        const shippingAddress = {
+            address1: '',
+            address2: '',
+            city: '',
+            countryCode: shippingCountry,
+            firstName: '',
+            lastName: '',
+            phone: '',
+            postalCode: '',
+            stateOrProvince: '',
+        };
+        // save the shipping address to session storage
+        stripeStoreSaveDomesticShippingSession({
+            address1: shippingAddress.address1,
+            address2: shippingAddress.address2,
+            city: shippingAddress.city,
+            countryCode: shippingAddress.countryCode,
+            firstName: shippingAddress.firstName,
+            lastName: shippingAddress.lastName,
+            phone: shippingAddress.phone,
+            postalCode: shippingAddress.postalCode,
+            state: shippingAddress.stateOrProvince,
+        });
+        // redirect to home page, home page then will open the checkout dialog if having domestic shipping session
+        window.location.href = '/';
+        return true;
+    };
+    let isProcessing = false;
+    let intervalCreated = false;
+    const observer = new MutationObserver(() => {
         const domesticRedirectedButton = document.querySelector(domesticRedirectedBtnSelector);
         const shippingAddressSession = stripeStoreGetDomesticShippingSession();
         // append a hidden button to the body if the shipping address session is found
@@ -141,84 +209,47 @@ const watchBigcommerceDomesticCheckout = ({ domesticRedirectedBtnSelector, onShi
             observer.disconnect();
             return;
         }
-        const shipToCountryElement = document.querySelector('select[name="shippingAddress.countryCode"]');
-        // make sure the continue button is available
-        const shippingContinueBtnEle = document.querySelector('#checkout-shipping-continue');
-        if (!shipToCountryElement || !shippingContinueBtnEle) {
+        const isBigcommerceDomesticCheckoutPage = window.location.pathname.includes('/checkout') &&
+            window.Zonos.isBigCommerce;
+        const shipToCountryElement = document.querySelector(SHIP_TO_COUNTRY_SELECTOR);
+        // Should just disconnect the observer if it's not bigcommerce domestic checkout page
+        if (!isBigcommerceDomesticCheckoutPage) {
+            observer.disconnect();
+            return;
+        }
+        // Shouldn't do anything if it's not bigcommerce domestic checkout page
+        if (!shipToCountryElement) {
             // do nothing if shipping country and the continue button is not found
             return;
         }
-        // disconnect the observer after we found the shipping continue button
+        log('Domestic checkout found - Listening for shipping country change', 'info', {
+            value: shipToCountryElement.value,
+        });
+        // Should not create a new interval if it's already created
+        if (intervalCreated) {
+            return;
+        }
+        intervalCreated = true;
+        // disconnect the observer after we know that's bigcommerce domestic checkout page
         observer.disconnect();
-        shippingContinueBtnEle.addEventListener('click', async (e) => {
-            var _a, _b;
-            const shippingCountry = shipToCountryElement.value;
-            if (!shippingCountry) {
-                // do nothing if shipping country is not found
+        const interval = setInterval(async () => {
+            if (isProcessing) {
                 return;
             }
-            // update the country code in localization store and check if it's shippable
-            localizationStoreUpdateSelectedCountryCode({
-                isInitializing: false,
-                newSelectedCountryCode: shippingCountry,
-            });
-            // do nothing if the country is still domestic
-            if (!isShippableCountry(false)) {
-                // cleanup the domestic shipping session if it's domestic because we will open the intl checkout after redirecting
-                stripeStoreCleanupDomesticShippingSession();
-                return;
+            isProcessing = true;
+            try {
+                const isInternationalCountrySelected = await handleInternationalCheckoutSelected();
+                // When isInternationalCountrySelected is true, user will be redirected shortly, so we can stop the checking interval here
+                if (isInternationalCountrySelected) {
+                    clearInterval(interval);
+                    return;
+                }
+                isProcessing = false;
             }
-            // get value of shipping address state
-            const shipToFormElement = document.querySelector('form');
-            if (!shipToFormElement) {
-                return;
+            catch (_a) {
+                isProcessing = false;
             }
-            const formData = new FormData(shipToFormElement);
-            const shipAddress1Element = document.querySelector('input#addressLine1Input');
-            const shippingAddress = {
-                address1: (_a = formData.get('shippingAddress.address1')) !== null && _a !== void 0 ? _a : 
-                // in Canada, the address1 is not included in the form, try to get value from input id instead.
-                (shipAddress1Element && shipAddress1Element.value),
-                address2: formData.get('shippingAddress.address2'),
-                city: formData.get('shippingAddress.city'),
-                countryCode: formData.get('shippingAddress.countryCode'),
-                firstName: formData.get('shippingAddress.firstName'),
-                lastName: formData.get('shippingAddress.lastName'),
-                phone: formData.get('shippingAddress.phone'),
-                postalCode: formData.get('shippingAddress.postalCode'),
-                stateOrProvince: (_b = formData.get('shippingAddress.stateOrProvince')) !== null && _b !== void 0 ? _b : formData.get('shippingAddress.stateOrProvinceCode'),
-            };
-            if (Object.values(shippingAddress).some(value => value === undefined || value === null)) {
-                logError('One or more shipping address field is missing', Object.entries(shippingAddress));
-                void sendErrorLog({
-                    endpoint: 'No endpoint, domestic checkout form missing fields',
-                    errors: [
-                        'Bigcommerce: One or more shipping address field is missing in the domestic checkout form',
-                        JSON.stringify(Object.entries(shippingAddress)),
-                    ],
-                    metadata: {
-                        storeId: zonosStore.storeId,
-                    },
-                });
-                return;
-            }
-            // save the shipping address to session storage
-            stripeStoreSaveDomesticShippingSession({
-                address1: shippingAddress.address1,
-                address2: shippingAddress.address2,
-                city: shippingAddress.city,
-                countryCode: shippingAddress.countryCode,
-                firstName: shippingAddress.firstName,
-                lastName: shippingAddress.lastName,
-                phone: shippingAddress.phone,
-                postalCode: shippingAddress.postalCode,
-                state: shippingAddress.stateOrProvince,
-            });
-            e.preventDefault();
-            e.stopPropagation();
-            // redirect to home page, home page then will open the checkout dialog if having domestic shipping session
-            window.location.href = '/';
-        });
+        }, 1000);
     });
     observer.observe(document.body, {
         childList: true,
@@ -512,6 +543,10 @@ const ZonosCheckout = class {
          * Whether or not the fedex shipping dialog should be shown
          */
         this.shouldShowFedexShippingConsentDialog = false;
+        /**
+         * Whether or not the domestic checkout dialog should be shown
+         */
+        this.detectedDomesticCheckoutDialogOpen = false;
         /**
          * Client secret value
          */
@@ -1363,8 +1398,13 @@ const ZonosCheckout = class {
             cartStore.isStagingMode = this.overrideStagingMode;
         }
         // check if bigcommerce, if user enters the shipping address that's in the shipping zone at bigcommerce checkout
-        watchBigcommerceDomesticCheckout({
+        watchImmediateBigcommerceDomesticCheckoutRedirect({
             domesticRedirectedBtnSelector: domesticRedirectedBtnSelector,
+            onInternationalCheckoutSelected: async () => {
+                this.detectedDomesticCheckoutDialogOpen = true;
+                // wait for 2 secs
+                await new Promise(resolve => setTimeout(resolve, 2000));
+            },
             onShippingAddressSessionFound: shippingAddressSession => {
                 // prefilled the default address if shipping address session is found for checkout on open
                 this.defaultAddress = [
@@ -1877,7 +1917,7 @@ const ZonosCheckout = class {
                 this.isMobile && 'mobile',
                 this.isIframed && 'iframed',
                 this.hiddenMode && 'hidden-mode',
-            ]) }, this.preview ? (renderContent()) : (h("zonos-dialog", { borderStyle: style, "data-theme": rightSideTheme, height: "980px", isLoading: dialogLoading, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeDialogHandler(), open: this.open, width: "1200px" }, renderContent())), h("zonos-confirm-dialog", { class: "zonos--close-confirm-dialog", dialogCancelBtnText: translate("Don't close"), dialogConfirmBtnText: translate('Close'), dialogIntent: "warn", dialogOpen: this.confirmDialogOpen, dialogSubtitle: translate('Would you like to close checkout and return to the site?'), dialogTitle: translate('Are you sure?'), onCancelClicked: () => {
+            ]) }, this.preview ? (renderContent()) : (h("zonos-dialog", { borderStyle: style, "data-theme": rightSideTheme, height: "980px", isLoading: dialogLoading, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeDialogHandler(), open: this.open, width: "1200px" }, renderContent())), h("zonos-dialog", { isLoading: true, loadingText: translate('You will be redirected to international checkout shortly.'), loadingTitle: translate('We detected that you are shipping to an international address.'), noClickOutside: true, noCloseButton: true, open: this.detectedDomesticCheckoutDialogOpen, width: "450px" }), h("zonos-confirm-dialog", { class: "zonos--close-confirm-dialog", dialogCancelBtnText: translate("Don't close"), dialogConfirmBtnText: translate('Close'), dialogIntent: "warn", dialogOpen: this.confirmDialogOpen, dialogSubtitle: translate('Would you like to close checkout and return to the site?'), dialogTitle: translate('Are you sure?'), onCancelClicked: () => {
                 this.confirmDialogOpen = false;
             },
             // Mark user selected confirm to close the dialog

package/dist/esm/zonos-collect-cart-items_3.entry.js

@@ -1,10 +1,10 @@
 import { r as registerInstance, d as getAssetPath, h, H as Host } from './index-0bbe9693.js';
-import { e as cartStore } from './cart-60532eb4.js';
+import { d as cartStore } from './cart-00134a17.js';
 import { c as cleanHtmlMarkdown } from './cleanHtmlMarkdown-b5b18743.js';
 import { f as zonosStoreFontFamily } from './zonosStore-b434e436.js';
 import { c as classes } from './classes-0d95c529.js';
 import { s as styles } from './styles-6fc2fad9.js';
-import './localization-285da14c.js';
+import './localization-ee8bb238.js';
 import './handleFetch-a844cac1.js';
 import './VarianceTest-572cecf5.js';
 import './isDarkColor-9ddd90cc.js';
@@ -48,10 +48,10 @@ const HStack = class {
         this.spacing = 24;
     }
     render() {
-        return (h(Host, { key: '8c80b04f02ebafcc0529bbc8a30fb71dae591a81', style: {
+        return (h(Host, { key: '443aa77bfbf4c0c84c33d0ef7652caec001968c3', style: {
                 '--spacing': `${this.spacing}px`,
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("slot", { key: '9840c220581a016349627a61efdf9a4dc3f68bc9' })));
+            } }, h("slot", { key: '3366df34b9f0f3549e556cff1e47878c2f6cd124' })));
     }
 };
 HStack.style = ZonosHStackStyle0;
@@ -74,7 +74,7 @@ const ZonosSkeleton = class {
         this.skeletonHeight = '14px';
     }
     render() {
-        return (h(Host, { key: 'dc65462865ede6e9cb5a02f5c4f6bf43c550d0c7', class: classes(['zonos--elements zonos--skeleton']), style: styles({
+        return (h(Host, { key: '096e505180d901c1523567f89cdbcca7869a0895', class: classes(['zonos--elements zonos--skeleton']), style: styles({
                 '--zonos--skeleton-height': this.skeletonHeight,
                 '--zonos--skeleton-width': this.skeletonWidth,
             }) }));

package/dist/esm/zonos-collect-finish_6.entry.js

@@ -1,17 +1,17 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, a as getElement } from './index-0bbe9693.js';
-import { c as stripeStore, d as stripeStoreRetrievePayment, t as trackConversionEvent, H as stripeStoreResetPromoCode, y as stripeStoreReset, I as stripeStoreMessageBasedOnStatus, e as cartStore, r as cartStoreNextStep, z as cartStoreOnChange } from './cart-60532eb4.js';
-import { s as submitGtag, c as paypalStoreReset, a as paypalStore, b as paypalInitScript } from './paypal-ac12eedb.js';
-import { t as translate, s as storageStore, l as localizationStore, p as translationStoreOnChange } from './localization-285da14c.js';
+import { b as stripeStore, c as stripeStoreRetrievePayment, t as trackConversionEvent, H as stripeStoreResetPromoCode, y as stripeStoreReset, I as stripeStoreMessageBasedOnStatus, d as cartStore, r as cartStoreNextStep, z as cartStoreOnChange } from './cart-00134a17.js';
+import { s as submitGtag, c as paypalStoreReset, a as paypalStore, b as paypalInitScript } from './paypal-2e28d0e7.js';
+import { t as translate, s as storageStore, l as localizationStore, p as translationStoreOnChange } from './localization-ee8bb238.js';
 import { z as zonosStore } from './zonosStore-b434e436.js';
 import { h as handleFetch, s as sendErrorLog, g as getIsTestMode, i as isCheckoutMobile, a as getIsStagingMode } from './handleFetch-a844cac1.js';
 import { c as createCustomEvent } from './createCustomEvent-58159025.js';
 import { g as getBorderRadius } from './getBorderRadius-877f6389.js';
 import { l as log, b as allLogs } from './VarianceTest-572cecf5.js';
-import { i as isCollectMobile, a as isCollectTablet, e as collectStore } from './isCollectMobileTablet-e5503ab8.js';
+import { i as isCollectMobile, a as isCollectTablet, e as collectStore } from './isCollectMobileTablet-70fa91b6.js';
 import { c as classes } from './classes-0d95c529.js';
 import { l as languages } from './ILanguage-cd6acb72.js';
-import { r as renderCheckoutCurrency } from './renderCheckoutCurrency-0176e66f.js';
-import { p as placeTestOrder } from './placeTestOrder-bba48f55.js';
+import { r as renderCheckoutCurrency } from './renderCheckoutCurrency-54994d08.js';
+import { p as placeTestOrder } from './placeTestOrder-aa884e31.js';
 import { r as renderFallback } from './renderFallback-3f010b48.js';
 import './isDarkColor-9ddd90cc.js';
 

package/dist/esm/zonos-collect.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, h, H as Host, F as Fragment } from './index-0bbe9693.js';
-import { c as stripeStore, i as initStripeElements, d as stripeStoreRetrievePayment, e as cartStore, o as cartStoreUpdateToErrorState, f as cartStoreUpdateItems, k as stripeStoreInitCheckoutSession, l as stripeStoreGetPaymentIntent, u as stripeStoreUpdateCheckoutSessionBaseCurrency, w as stripeStoreConfirmPayment, B as stripeStoreOnChange, y as stripeStoreReset, g as cartStoreReset } from './cart-60532eb4.js';
-import { i as isCollectMobile, a as isCollectTablet, c as collectStoreUpdateSelectedShippingOption, b as collectStoreInitShippingInfo, d as collectStoreAsyncAddressUpdate, e as collectStore } from './isCollectMobileTablet-e5503ab8.js';
-import { p as paypalStoreHasPaypalEnabled, a as paypalStore } from './paypal-ac12eedb.js';
-import { s as storageStore, t as translate, c as localizationStoreOnChange, d as currencyFormat, l as localizationStore } from './localization-285da14c.js';
+import { b as stripeStore, i as initStripeElements, c as stripeStoreRetrievePayment, d as cartStore, n as cartStoreUpdateToErrorState, e as cartStoreUpdateItems, j as stripeStoreInitCheckoutSession, k as stripeStoreGetPaymentIntent, u as stripeStoreUpdateCheckoutSessionBaseCurrency, w as stripeStoreConfirmPayment, B as stripeStoreOnChange, y as stripeStoreReset, f as cartStoreReset } from './cart-00134a17.js';
+import { i as isCollectMobile, a as isCollectTablet, c as collectStoreUpdateSelectedShippingOption, b as collectStoreInitShippingInfo, d as collectStoreAsyncAddressUpdate, e as collectStore } from './isCollectMobileTablet-70fa91b6.js';
+import { p as paypalStoreHasPaypalEnabled, a as paypalStore } from './paypal-2e28d0e7.js';
+import { s as storageStore, t as translate, c as localizationStoreOnChange, d as currencyFormat, l as localizationStore } from './localization-ee8bb238.js';
 import { z as zonosStore } from './zonosStore-b434e436.js';
 import { b as buildCartItemsByTempCart } from './buildCartItemsByTempCart-a117f75d.js';
 import { h as handleFetch, s as sendErrorLog, l as logError, g as getIsTestMode } from './handleFetch-a844cac1.js';

package/dist/esm/zonos-component.entry.js

@@ -27,7 +27,7 @@ const ZonosComponent = class {
         return format(this.first, this.middle, this.last);
     }
     render() {
-        return h("div", { key: 'a4ab64de2aa643b21c019857749b944a01d83ab8' }, "Hello, World! I'm ", this.getText());
+        return h("div", { key: 'c15c75e21319fb4723d1062aa89c6e08cc2129b3' }, "Hello, World! I'm ", this.getText());
     }
 };
 ZonosComponent.style = ZonosComponentStyle0;

package/dist/esm/zonos-controller.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-0bbe9693.js';
-import { c as stripeStore } from './cart-60532eb4.js';
-import { e as getOverridenZCountry, i as isValidSelector, h as initLocalizationStore, s as storageStore, a as localizationStoreUpdateSelectedCountryCode } from './localization-285da14c.js';
+import { b as stripeStore } from './cart-00134a17.js';
+import { e as getOverridenZCountry, i as isValidSelector, h as initLocalizationStore, s as storageStore, a as localizationStoreUpdateSelectedCountryCode } from './localization-ee8bb238.js';
 import { z as zonosStore, e as zonosStoreInitSetting, f as zonosStoreFontFamily } from './zonosStore-b434e436.js';
 import { g as getGenericSettingsOverride, i as iframeServices, a as injectPrivateIframe } from './getGenericSettingsOverride-0bc3e118.js';
 import { h as handleFetch, l as logError } from './handleFetch-a844cac1.js';
@@ -723,7 +723,7 @@ const ZonosController = class {
         zonosStore.organizationName = organizationName;
     }
     render() {
-        return h(Host, { key: '8ac43cd7dc03d654f554022653f3e852876b954b', class: "zonos--elements" });
+        return h(Host, { key: 'fe248e1e38cd3d98c56f55d39b704f7337c74c29', class: "zonos--elements" });
     }
 };
 ZonosController.style = ZonosControllerStyle0;

package/dist/esm/zonos-country-flag.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, a as getElement } from './index-0bbe9693.js';
-import { l as localizationStore } from './localization-285da14c.js';
+import { l as localizationStore } from './localization-ee8bb238.js';
 import { f as zonosStoreFontFamily } from './zonosStore-b434e436.js';
 import { c as classes } from './classes-0d95c529.js';
 import './handleFetch-a844cac1.js';

package/dist/esm/zonos-country-select_4.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, a as getElement } from './index-0bbe9693.js';
-import { a as localizationStoreUpdateSelectedCountryCode, t as translate, l as localizationStore } from './localization-285da14c.js';
+import { a as localizationStoreUpdateSelectedCountryCode, t as translate, l as localizationStore } from './localization-ee8bb238.js';
 import { f as zonosStoreFontFamily } from './zonosStore-b434e436.js';
 import { f as formatStringWithLinks } from './formatStringWithLinks-9e819405.js';
 import { i as isDarkColor } from './isDarkColor-9ddd90cc.js';
@@ -1951,9 +1951,9 @@ const ZonosHelloDialogFooter = class {
         const language = (_b = languages.find(x => x.code === localizationStore.selectedLocale)) === null || _b === void 0 ? void 0 : _b.translatedLabel;
         // Only use gray-0 (white) when the background color is dark (apply inverted color if the element is using dark theme variable)
         const mainColor = primaryColor && isDarkColor(primaryColor) ? 'white' : 'black';
-        return (h(Host, { key: 'be1344c05db8a46f066a046369e46823a58385b4', class: "zonos--elements" }, h("div", { key: '3d4a17439fef92f563b5417e6db9561a9797e684', class: "zonos--hello-dialog-footer", style: {
+        return (h(Host, { key: '7480572c4e05bfc177458ab00adb774069f28d52', class: "zonos--elements" }, h("div", { key: 'bd27466c0d82be3c5cde2f89dcc48749e2313090', class: "zonos--hello-dialog-footer", style: {
                 '--zonos--primary-color': primaryColor,
-            } }, h("a", { key: 'b6bc680ca615dbb05239a099e3aff67004296a01', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: 'e093c21439a68c811ea6fd110e76921f4948870d', "aria-label": "Zonos Logo", autoHeight: true, content: mainColor === 'black' ? ZonosIconLight : ZonosIconDark, iconColor: mainColor, size: 108 })), h("div", { key: '8fd953e369a24c0b8f2b0a063ba8e16cfd733a74', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: 'c7bb2c5685e225990c67975a6fa191b4d6f4bd14', buttonColor: mainColor, icon: h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: mainColor }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), h("zonos-button", { key: 'aa89b4bbfd86de52413ff9d3cd74121d210d4f8e', buttonColor: mainColor, icon: h("zonos-country-flag", { "aria-label": "Open country select", class: "zonos--footer-country-flag", countryCode: localizationStore.selectedCountryCode }), onClick: () => this.setShowCountrySelect(true), variant: "subtle" }, localizationStore.selectedCountryCode)))));
+            } }, h("a", { key: 'f6ca08c3c4f8eef3f4b81a77ba0d5a2e6cea8f62', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: 'a54d33d548145f0eb542041d3903ea4a257c39bb', "aria-label": "Zonos Logo", autoHeight: true, content: mainColor === 'black' ? ZonosIconLight : ZonosIconDark, iconColor: mainColor, size: 108 })), h("div", { key: '52e06b22daaac439d5ebdcdcf44bd8f85fed4564', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: '30b994c3340467a62e72f62bde853b24e3f9e4f1', buttonColor: mainColor, icon: h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: mainColor }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), h("zonos-button", { key: '26e2b5d8525d57841e2b7c1fefc69c96b21ad199', buttonColor: mainColor, icon: h("zonos-country-flag", { "aria-label": "Open country select", class: "zonos--footer-country-flag", countryCode: localizationStore.selectedCountryCode }), onClick: () => this.setShowCountrySelect(true), variant: "subtle" }, localizationStore.selectedCountryCode)))));
     }
     get ele() { return getElement(this); }
 };
@@ -2062,10 +2062,10 @@ const ZonosVirtualScroll = class {
     render() {
         const { width: containerWidth } = this.containerDimensions;
         const visibleItems = this.getVisibleItems();
-        return (h(Host, { key: 'ff339af0ad6c41cbae2f867d2898a909804a06e7', class: classes(['zonos--virtual-scroll']) }, h("div", { key: 'c9088d67f32f2350e06814aefac55a275d9351b6', class: classes(['scroller']), style: {
+        return (h(Host, { key: 'a5083227ddbd44f3f94f0e4ecd7ebee309526fce', class: classes(['zonos--virtual-scroll']) }, h("div", { key: '45dd1bb2f501ca6a2091c06a68c5f96652bd2976', class: classes(['scroller']), style: {
                 height: `${this.totalHeight}px`,
                 width: `${containerWidth}px`,
-            } }), h("div", { key: '85f6afa13c4c8d9fbe1e688ce5a60d9c540c232f', class: classes(['item-container']), style: {
+            } }), h("div", { key: 'e8c90e99bdc3301c5430a098d4b9f57ec0bc020b', class: classes(['item-container']), style: {
                 height: `${this.totalHeight}px`,
             } }, visibleItems.map(({ element }) => element))));
     }