@zonos/elements 1.3.200 → 1.3.202

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

@@ -1,15 +1,17 @@
 import { r as registerInstance, h, H as Host, F as Fragment } from './index-a457c60c.js';
-import { l as localizationStore, s as stripeStoreGetDomesticShippingSession, a as localizationStoreUpdateSelectedCountryCode, b as stripeStoreCleanupDomesticShippingSession, c as stripeStoreSaveDomesticShippingSession, i as initStripeElements, d as stripeStoreRetrievePayment, e as cartStore, f as stripeStore, g as cartStoreUpdateItems, h as cartStoreReset, j as cartStoreResetTabItems, k as cartStoreClearCheckoutInterval, m as stripeStoreInitCheckoutSession, n as stripeStoreGetPaymentIntent, o as cartStoreStartCheckoutInterval, t as trackConversionEvent, p as getCheckoutSessionBody, q as cartStoreUpdateToErrorState, r as translate, u as getZCountryUrlParam, v as cartStoreSetCheckoutSession, w as stripeStorePrefetchLandedCost, x as cartStoreNextStep, y as stripeStoreUpdateCheckoutSessionBaseCurrency, z as stripeStoreHandleInventoryCheck, A as stripeStoreConfirmPayment, B as stripeStoreHandleInventoryRefund, C as stripeStoreReset, D as localizationStoreOnUpdate, E as currencyFormat } from './cart-e03d615e.js';
-import { p as paypalStoreHasPaypalEnabled, s as submitGtag, a as paypalInitScript, b as paypalStore } from './paypal-23dd5023.js';
-import { z as zonosStore, g as getZonosStoreTheme, m as mergeConfig } from './zonosStore-cdabc848.js';
+import { s as stripeStoreGetDomesticShippingSession, a as stripeStoreCleanupDomesticShippingSession, b as stripeStoreSaveDomesticShippingSession, i as initStripeElements, c as stripeStoreRetrievePayment, d as stripeStore, 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 } from './cart-b7c15b61.js';
+import { p as paypalStoreHasPaypalEnabled, s as submitGtag, a as paypalInitScript, b as paypalStore } from './paypal-932fd3dd.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-bf7224aa.js';
+import { z as zonosStore, g as getZonosStoreTheme, m as mergeConfig } from './zonosStore-d10a829f.js';
 import { h as handleFetch, l as log, b as logError, s as sendErrorLog, c as getElapsedTime, d as allLogs, e as getAdditionalLogMetadata, g as getIsTestMode, j as jsonParse, a as getIsStagingMode, i as isCheckoutMobile } from './handleFetch-621e45bc.js';
 import { c as classes } from './classes-0d95c529.js';
 import { c as createCustomEvent } from './createCustomEvent-58159025.js';
-import { g as getBorderRadius } from './getBorderRadius-413e97eb.js';
-import { i as isDarkColor } from './isDarkColor-4c7b2ffc.js';
+import { g as getBorderRadius } from './getBorderRadius-78b28b4d.js';
+import { i as isDarkColor } from './isDarkColor-31dd7dff.js';
 import { s as styles } from './styles-6fc2fad9.js';
 import { _ as _getIsValidCartId, c as checkoutHiddenBtnSelector, a as checkoutHiddenInternationalBtnSelector, d as domesticRedirectedBtnSelector } from './CheckoutConfig-eb7d6954.js';
 import { R as RemoveIcon } from './RemoveIcon-9dc5dd1a.js';
+import './VarianceTest-fef2d958.js';
 
 /**
  * Map the items from tempCart like how we do it in dgs
@@ -47,6 +49,70 @@ const isStoreDiscountEnabled = async () => {
     return { enabled: true };
 };
 
+const selectVarianceTest = async ({ testKeys }) => {
+    // Do nothing if no test keys are provided
+    if (testKeys.length === 0) {
+        return null;
+    }
+    const { errors, json } = await handleFetch('/api/zonos-elements/select-variance-test', {
+        body: {
+            testKeys,
+        },
+        method: 'POST',
+    });
+    if (errors.length || !json) {
+        return null;
+    }
+    const filteredAvailableTestKeys = filterValidTests(json);
+    // Filter the response to only include test keys that we support
+    return filteredAvailableTestKeys;
+};
+
+const buildCartUrl = ({ cartId, checkoutSessionId, customerAddress1, customerAddress2, customerCity, customerCountry, customerEmail, customerFirstName, customerLastName, customerPhone, customerState, customerZip, hostedCheckoutUrl, isTestMode, isVariantTest, }) => {
+    const urlParams = new URLSearchParams();
+    urlParams.set('tempCartUUID', cartId);
+    if (customerFirstName) {
+        urlParams.set('customerFirstName', customerFirstName);
+    }
+    if (customerLastName) {
+        urlParams.set('customerLastName', customerLastName);
+    }
+    if (customerEmail) {
+        urlParams.set('customerEmail', customerEmail);
+    }
+    if (customerPhone) {
+        urlParams.set('customerPhone', customerPhone);
+    }
+    if (customerZip) {
+        urlParams.set('customerZip', customerZip);
+    }
+    if (customerCity) {
+        urlParams.set('customerCity', customerCity);
+    }
+    if (customerState) {
+        urlParams.set('customerState', customerState);
+    }
+    if (customerCountry) {
+        urlParams.set('zCountry', customerCountry);
+    }
+    if (customerAddress1) {
+        urlParams.set('customerAddress1', customerAddress1);
+    }
+    if (customerAddress2) {
+        urlParams.set('customerAddress2', customerAddress2);
+    }
+    if (isTestMode) {
+        urlParams.set('zonosTestMode', '1');
+    }
+    if (checkoutSessionId) {
+        urlParams.set('zonosCheckoutSessionId', checkoutSessionId);
+    }
+    if (isVariantTest) {
+        urlParams.set('zonosVariantTest', '1');
+    }
+    return `${hostedCheckoutUrl}?${urlParams.toString()}`;
+};
+
 const isDisabledCountry = (showLog = true) => {
     if (!localizationStore.localizationLoaded) {
         return true;
@@ -179,6 +245,46 @@ const watchBigcommerceDomesticCheckout = ({ domesticRedirectedBtnSelector, onShi
     });
 };
 
+const getLegacyQueryParams = () => {
+    const urlParams = new URLSearchParams(window.location.search);
+    log('legacy urlParams', 'info', Object.fromEntries(urlParams.entries()));
+    const getParam = (param) => {
+        const value = urlParams.get(param);
+        if (!value || value === 'undefined') {
+            return '';
+        }
+        return value;
+    };
+    const customerCountry = 
+    // fallback to selected country code if country is not provided
+    getZCountryUrlParam(urlParams) ||
+        localizationStore.selectedCountryCode ||
+        'US';
+    const customerCity = getParam('customerCity');
+    const customerEmail = getParam('customerEmail');
+    const customerAddress1 = getParam('customerAddress1');
+    const customerAddress2 = getParam('customerAddress2');
+    const customerName = getParam('customerName');
+    const customerPhone = getParam('customerPhone');
+    const customerZip = getParam('customerZip');
+    const customerState = getParam('customerState');
+    const customerFirstName = getParam('customerFirstName');
+    const customerLastName = getParam('customerLastName');
+    return {
+        customerAddress1,
+        customerAddress2,
+        customerCity,
+        customerCountry,
+        customerEmail,
+        customerFirstName,
+        customerLastName,
+        customerName,
+        customerPhone,
+        customerState,
+        customerZip,
+    };
+};
+
 let numberOfFailures = 0;
 const sendBulkLoadTimeApiLog = async () => {
     // Don't send the log if there are no API calls to send
@@ -246,6 +352,36 @@ const sendLoadNativeCheckoutLog = async ({ loadTime, }) => {
     });
 };
 
+const filterExpiredTests = (testKeys) => (testKeys === null || testKeys === void 0 ? void 0 : testKeys.filter(v => {
+    if ((v.expiresAt && v.expiresAt < Date.now()) || !v.expiresAt) {
+        return false;
+    }
+    return true;
+})) || [];
+
+const getSelectedTestVariant = (testKey) => {
+    var _a;
+    const currentTest = (_a = storageStore.enabledVariantTestKeys) === null || _a === void 0 ? void 0 : _a.find(v => v.testKey === testKey);
+    return (currentTest === null || currentTest === void 0 ? void 0 : currentTest.selectedVariantKey) || null;
+};
+
+const isTestEnabled = (testKey) => {
+    return zonosStore.enabledVariantTestKeys.includes(testKey);
+};
+
+const mergeTest = ({ baseTestObj, mergeTestObj, }) => {
+    return baseTestObj.map(({ testKey }) => {
+        // We will attempt to get the enabled selection from localStorage first and only re-fetch if the testKeys are changed
+        const existingSelection = mergeTestObj.find(({ testKey: key }) => key === testKey);
+        return {
+            expiresAt: (existingSelection === null || existingSelection === void 0 ? void 0 : existingSelection.expiresAt) ||
+                Date.now() + VARIANT_TEST_KEY_EXPIRATION,
+            selectedVariantKey: (existingSelection === null || existingSelection === void 0 ? void 0 : existingSelection.selectedVariantKey) || null,
+            testKey,
+        };
+    });
+};
+
 const getTempCartById = async ({ cartId, retries, }) => {
     const isTestMode = getIsTestMode();
     const { errors, json } = await handleFetch('/api/zonos-elements/get-temp-cart', {
@@ -365,7 +501,7 @@ const ZonosCheckout = class {
                     log('Payment intent failed, show status from error');
                 }
                 this.open = true;
-                cartStore.checkoutSessionId = zonosCheckoutSessionId;
+                storageStore.checkoutSessionId = zonosCheckoutSessionId;
                 stripeStore.clientSecret = stripeClientSecret;
                 void this.setToFinishStep(status);
                 return { shouldAllowOrder: false };
@@ -377,6 +513,121 @@ const ZonosCheckout = class {
             log('Payment intent is not succeeded, proceed to order');
             return { shouldAllowOrder: true };
         };
+        this.initializeTestKeys = () => {
+            // cleanup expired test keys
+            storageStore.enabledVariantTestKeys = filterExpiredTests(storageStore.enabledVariantTestKeys || []);
+            // map existingSelection to the enabled variant test keys from database
+            const existingSelectionMap = zonosStore.enabledVariantTestKeys.map(testKey => {
+                var _a;
+                // We will attempt to get the enabled selection from localStorage first and only re-fetch if the testKeys are changed
+                const existingSelection = (_a = storageStore.enabledVariantTestKeys) === null || _a === void 0 ? void 0 : _a.find(({ testKey: key }) => key === testKey);
+                return {
+                    expiresAt: (existingSelection === null || existingSelection === void 0 ? void 0 : existingSelection.expiresAt) ||
+                        Date.now() + VARIANT_TEST_KEY_EXPIRATION,
+                    selectedVariantKey: (existingSelection === null || existingSelection === void 0 ? void 0 : existingSelection.selectedVariantKey) || null,
+                    testKey,
+                };
+            });
+            storageStoreSetEnabledVariantTestKeys(existingSelectionMap);
+            return {
+                allSelected: false,
+            };
+        };
+        this.shouldAllowHostedVsNativeTest = () => {
+            // This test is only applicable to checkout that's using createCartid callback
+            if (typeof zonosStore.checkoutSettings.createCartId !== 'function') {
+                return false;
+            }
+            const hostedVsNativeTest = zonosStore.enabledVariantTestKeys.includes('hosted_vs_native');
+            // Should not do anything if the test is not enabled
+            if (!hostedVsNativeTest) {
+                return false;
+            }
+            return true;
+        };
+        // Register test hosted vs native if needed to get the variant selection for this test
+        this.registerTestHostedVsNative = async () => {
+            // This test is only applicable to checkout that's using createCartid callback
+            const isAllowedHostedVsNativeTest = this.shouldAllowHostedVsNativeTest();
+            if (!isAllowedHostedVsNativeTest) {
+                return;
+            }
+            log(`[TEST] - Registering hosted vs native test`);
+            const selectedVariantKey = getSelectedTestVariant('hosted_vs_native');
+            // No need to request variant test for this test if the test already has variant selected
+            if (selectedVariantKey) {
+                log(`[TEST] - Hosted vs native test already has variant selected: ${selectedVariantKey}`);
+                return;
+            }
+            // Get variance test selection from the testKey not yet selected
+            const response = await selectVarianceTest({
+                testKeys: ['hosted_vs_native'],
+            });
+            // Do not prevent user from proceeding if the test is not enabled or failed to get selection
+            if (!response) {
+                log(`[TEST] - Failed to get selection for hosted vs native test`);
+                return;
+            }
+            // At this point, all test keys should already have variant selected. Update and map the selected variant to the existing test keys
+            const mappedEnabledVariantTestKeys = mergeTest({
+                baseTestObj: storageStore.enabledVariantTestKeys || [],
+                mergeTestObj: response,
+            });
+            // Set the selected variant to the storage store
+            storageStoreSetEnabledVariantTestKeys(mappedEnabledVariantTestKeys);
+        };
+        // Handle hosted vs native test
+        this.handleHostedVsNative = async () => {
+            var _a;
+            // This test is only applicable to checkout that's using createCartid callback
+            const isAllowedHostedVsNativeTest = this.shouldAllowHostedVsNativeTest();
+            if (!isAllowedHostedVsNativeTest) {
+                return {
+                    redirected: false,
+                };
+            }
+            const selectedVariantTest = getSelectedTestVariant('hosted_vs_native');
+            log(`[TEST] - hosted_vs_native: ${selectedVariantTest}`);
+            // This test is only applicable to checkout that's using createCartid callback
+            if (typeof zonosStore.checkoutSettings.createCartId !== 'function') {
+                log(`[TEST] - createCartId is not provided, skipping hosted vs native test`);
+                return {
+                    redirected: false,
+                };
+            }
+            // No need to do anything if the test is enabled for native
+            if (selectedVariantTest !== 'hosted') {
+                log(`[TEST] - Hosted vs native test is enabled for native, skipping`);
+                return {
+                    redirected: false,
+                };
+            }
+            if (!((_a = zonosStore.genericSettings) === null || _a === void 0 ? void 0 : _a.hostedCheckoutUrl)) {
+                log('[TEST] - Hosted checkout URL is not provided');
+                return {
+                    redirected: false,
+                };
+            }
+            log('"createCartId" is provided, start building cart');
+            const cartIdResult = await zonosStore.checkoutSettings.createCartId();
+            let cartId;
+            let shippingData = null;
+            if (typeof cartIdResult === 'object') {
+                cartId = cartIdResult.cartId;
+                shippingData = cartIdResult.shippingData || null;
+            }
+            else {
+                cartId = cartIdResult;
+            }
+            const legacyQueryParams = getLegacyQueryParams();
+            const cartUrl = buildCartUrl(Object.assign(Object.assign({ cartId, checkoutSessionId: storageStore.checkoutSessionId || undefined, hostedCheckoutUrl: zonosStore.genericSettings.hostedCheckoutUrl, isTestMode: getIsTestMode(), isVariantTest: true }, legacyQueryParams), shippingData));
+            log(`[TEST] - Redirecting to: ${cartUrl}`);
+            // Open new page with the cart URL
+            window.open(cartUrl, '_blank');
+            return {
+                redirected: true,
+            };
+        };
         this.formatDate = (timestamp) => {
             if (!timestamp) {
                 return '';
@@ -437,6 +688,72 @@ const ZonosCheckout = class {
             }
             return this.defaultAddressParams;
         };
+        /**
+         * Message listener from the hosted checkout tab just openned from the hosted vs native variant test
+         */
+        this.handleHostedOpenWindowCallback = (e) => {
+            var _a;
+            // check if it's from origin of hosted checkout url
+            const hostedCheckoutUrl = (_a = zonosStore.genericSettings) === null || _a === void 0 ? void 0 : _a.hostedCheckoutUrl;
+            // Do nothing if hosted checkout url is not set
+            if (!origin) {
+                return;
+            }
+            // Do nothing if it's not from the origin of hosted checkout url
+            const isDev = ['dev.checkout.elements.zonos.com'].some(dev => e.origin.includes(dev));
+            // Do not allow to receive message if not from origin we expected when it's not dev environment
+            if (e.origin !== hostedCheckoutUrl && !isDev) {
+                return;
+            }
+            switch (e.data.type) {
+                case 'zonos-checkout-session-update':
+                    // Update and set checkout session id to storage so that if user come back to merchant site, it will persist the test variance selection
+                    storageStore.checkoutSessionId = e.data.checkoutSessionId;
+                    break;
+            }
+        };
+        /**
+         * Capture params from the url and set to the store when it's redirected from hosted checkout url for variant test
+         */
+        this.captureParamsRedirectedForVariantTest = () => {
+            const url = new URL(window.location.href);
+            const zonosVariantTest = url.searchParams.get('zonosVariantTest') === '1';
+            // Do nothing if the url is not loaded from hosted vs native variant test
+            if (!zonosVariantTest) {
+                return;
+            }
+            const checkoutSessionId = url.searchParams.get('zonosCheckoutSessionId');
+            if (checkoutSessionId) {
+                storageStore.checkoutSessionId = checkoutSessionId;
+            }
+            // merge variant test input from url to storageStore.enabledVariantTestKeys
+            const enabledVariantTestKeys = storageStore.enabledVariantTestKeys || [];
+            // override the selected variant key if it's not "hosted" since we are in hosted checkout tab
+            if (window.Zonos.isLegacyCheckout) {
+                const selectedVariantKey = getSelectedTestVariant('hosted_vs_native');
+                // Set selected variant key "hosted" to enabledVariantTestKeys if it's not in enabledVariantTestKeys already
+                if (!selectedVariantKey) {
+                    enabledVariantTestKeys.push({
+                        expiresAt: Date.now() + VARIANT_TEST_KEY_EXPIRATION,
+                        selectedVariantKey: 'hosted',
+                        testKey: 'hosted_vs_native',
+                    });
+                    storageStoreSetEnabledVariantTestKeys(enabledVariantTestKeys);
+                }
+                else {
+                    storageStoreSetEnabledVariantTestKeys(enabledVariantTestKeys.map((x) => {
+                        if (x.testKey === 'hosted_vs_native') {
+                            return Object.assign(Object.assign({}, x), { selectedVariantKey: 'hosted' });
+                        }
+                        return x;
+                    }));
+                }
+            }
+            // Remove query params from the url
+            url.searchParams.delete('zonosCheckoutSessionId');
+            url.searchParams.delete('zonosVariantTest');
+            window.history.replaceState({}, '', url.toString());
+        };
         this.appearanceSettingsOverride = undefined;
         this.preview = false;
         this.hiddenMode = false;
@@ -448,6 +765,7 @@ const ZonosCheckout = class {
         this.defaultCustomerProfileAddress = [];
         this.customerProfile = null;
         this.open = this.forceDialogOpen;
+        this.isOverlayLoading = false;
         this.stripe = window.Zonos.stripe;
         this.submitLoading = false;
         this.collapseReviewMobile = true;
@@ -568,7 +886,7 @@ const ZonosCheckout = class {
             await cartStoreUpdateItems({ adjustments, cartItems: cartItemsFiltered });
         }
         // if checkoutSessionId is not available, request a new one.
-        if (!cartStore.checkoutSessionId) {
+        if (!storageStore.checkoutSessionId) {
             const success = await stripeStoreInitCheckoutSession();
             log(`stripeStoreInitCheckoutSession: ${success}`);
             if (!success) {
@@ -614,13 +932,13 @@ const ZonosCheckout = class {
     confirmProceedWithOrderDuplication() {
         // Reset the placed order info
         this.placedOrderInfo = null;
-        if (!cartStore.checkoutSessionId) {
+        if (!storageStore.checkoutSessionId) {
             return;
         }
         // Record the order duplication consent so we know user did see the notification and proceed with the order duplication
         void handleFetch('/api/zonos-elements/update-checkout-session-metadata', {
             body: {
-                id: cartStore.checkoutSessionId,
+                id: storageStore.checkoutSessionId,
                 metadata: [
                     {
                         key: 'orderDuplicationConsent',
@@ -685,7 +1003,7 @@ const ZonosCheckout = class {
                 button,
             });
             button.addEventListener('click', async (e) => {
-                var _a;
+                var _a, _b;
                 // Start tracking load time
                 const startTime = performance.now();
                 const isAlwaysTriggerInternationalCheckout = alwaysTriggerInternationalCheckoutSelector &&
@@ -728,6 +1046,17 @@ const ZonosCheckout = class {
                         void sendBulkLoadTimeApiLog();
                     }, 2000);
                 }
+                // Send request to get what kind of variant we are applying
+                if (isTestEnabled('hosted_vs_native')) {
+                    this.isOverlayLoading = true;
+                    await this.registerTestHostedVsNative();
+                    const { redirected } = await this.handleHostedVsNative();
+                    this.isOverlayLoading = false;
+                    // Stop the process if the user is being redirected to the hosted checkout page
+                    if (redirected) {
+                        return;
+                    }
+                }
                 // start loading
                 stripeStore.isFetchingSession = true;
                 this.open = true;
@@ -737,13 +1066,17 @@ const ZonosCheckout = class {
                     if (!result) {
                         throw new Error('Error building cart');
                     }
+                    (_a = window.opener) === null || _a === void 0 ? void 0 : _a.postMessage({
+                        checkoutSessionId: storageStore.checkoutSessionId,
+                        type: 'zonos-checkout-session-update',
+                    }, '*');
                     // start the timer to validate the price
                     cartStoreStartCheckoutInterval({
                         isPreview: this.preview,
                         sessionTimeout: CHECKOUT_SESSION_TIMEOUT,
                     });
                     submitGtag('zonos-checkout-start');
-                    const checkoutSessionId = cartStore.checkoutSessionId;
+                    const checkoutSessionId = storageStore.checkoutSessionId;
                     void trackConversionEvent({
                         checkoutSessionId,
                         eventName: 'checkout_open',
@@ -766,13 +1099,13 @@ const ZonosCheckout = class {
                         const message = err.message;
                         if (message === 'Cart is expired.') {
                             this.isCartExpired = true;
-                            return;
                         }
                     }
                     // stop loading
                     stripeStore.isFetchingSession = false;
                     logError(err);
                     if (this.isCartExpired) {
+                        stripeStore.isFetchingSession = true;
                         return;
                     }
                     // We want to log the error anytime we fail to create a checkout session
@@ -784,7 +1117,7 @@ const ZonosCheckout = class {
                             cartId: window.Zonos.cartId,
                             checkoutSessionBody: getCheckoutSessionBody(),
                             href: window.location.href,
-                            storeBaseUrl: ((_a = window.Zonos.cartData) === null || _a === void 0 ? void 0 : _a.storeBaseUrl) ||
+                            storeBaseUrl: ((_b = window.Zonos.cartData) === null || _b === void 0 ? void 0 : _b.storeBaseUrl) ||
                                 zonosStore.onlineStoreSettings.url,
                         },
                     });
@@ -833,7 +1166,7 @@ const ZonosCheckout = class {
             return;
         }
         log('shipping data from createCartId result', 'info', Object.entries(prefillAddress));
-        const { customerAddress1, customerAddress2, customerCity, customerCountry, customerEmail, customerName, customerPhone, customerState, customerZip, } = prefillAddress;
+        const { customerAddress1, customerAddress2, customerCity, customerCountry, customerEmail, customerFirstName, customerLastName, customerName, customerPhone, customerState, customerZip, } = prefillAddress;
         const urlParams = new URLSearchParams(window.location.search);
         const country = // fallback to selected country code if country is not provided
          customerCountry ||
@@ -845,6 +1178,8 @@ const ZonosCheckout = class {
             customerCity,
             customerCountry: country,
             customerEmail,
+            customerFirstName,
+            customerLastName,
             customerName,
             customerPhone,
             customerState,
@@ -893,7 +1228,9 @@ const ZonosCheckout = class {
         const line2 = address.customerAddress2 || '';
         const city = address.customerCity || '';
         const email = address.customerEmail || '';
-        const name = address.customerName || '';
+        const name = address.customerFirstName && address.customerLastName
+            ? `${address.customerFirstName} ${address.customerLastName}`
+            : address.customerName || '';
         const phone = address.customerPhone || '';
         const postal_code = address.customerZip || '';
         const state = address.customerState || '';
@@ -1044,7 +1381,7 @@ const ZonosCheckout = class {
     async handleCustomerInfoContinue() {
         // submit google tag when the form is complete
         submitGtag('zonos-checkout-customer-info');
-        const checkoutSessionId = cartStore.checkoutSessionId;
+        const checkoutSessionId = storageStore.checkoutSessionId;
         void trackConversionEvent({
             checkoutSessionId,
             eventName: 'checkout_customerInfoCompleted',
@@ -1314,13 +1651,20 @@ const ZonosCheckout = class {
         this.isMobile = isCheckoutMobile(this.mobile);
         this.isIframed = window.self !== window.top;
         log(`iframed: ${this.isIframed}`);
+        // Set checkout session if redirect
+        if (window.Zonos.isLegacyCheckout) {
+            this.captureParamsRedirectedForVariantTest();
+        }
         // update theme to browser preference theme if appearance theme is system
         this.handleAppearanceSettingsOverrideChange();
         // listen to selected locale code change
-        this.onChangeLocaleListener = localizationStoreOnUpdate('selectedLocale', () => {
+        this.onChangeLocaleListener = localizationStoreOnChange('selectedLocale', () => {
             // Update stripe locale when selected country code is changed
             void this.applyStripeTheme();
         });
+        // Initialize test keys
+        this.initializeTestKeys();
+        window.addEventListener('message', this.handleHostedOpenWindowCallback);
         log(`mobile: ${this.isMobile}`);
     }
     // do clean up when component is unmounted
@@ -1331,6 +1675,7 @@ const ZonosCheckout = class {
         cartStoreReset();
         // cleanup onChange listener
         this.onChangeLocaleListener();
+        window.removeEventListener('message', this.handleHostedOpenWindowCallback);
     }
     render() {
         var _a, _b, _c, _d;
@@ -1467,7 +1812,7 @@ const ZonosCheckout = class {
             // If dialog is in open state, the message should not be null
             dialogSubtitle: translate('You are being sent back to the shop to re-add items to your cart.'), dialogTitle: translate('Shopping cart expired'), dialogType: "alert",
             // Mark user selected confirm to close the dialog
-            onConfirmClicked: () => this.handleCartExpiredDialogConfirm() })));
+            onConfirmClicked: () => this.handleCartExpiredDialogConfirm() }), h("zonos-loading-overlay", { open: this.isOverlayLoading })));
     }
     static get assetsDirs() { return ["assets"]; }
     static get watchers() { return {

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

@@ -1,5 +1,6 @@
 import { r as registerInstance, h, H as Host, d as getElement } from './index-a457c60c.js';
-import { d as zonosStoreFontFamily } from './zonosStore-cdabc848.js';
+import { d as zonosStoreFontFamily } from './zonosStore-d10a829f.js';
+import './VarianceTest-fef2d958.js';
 
 const zonosCollapseCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;overflow:hidden}:host div{position:relative}:host iframe{width:0;height:100%;position:absolute;top:0;border:0}";
 const ZonosCollapseStyle0 = zonosCollapseCss;

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

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

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

@@ -1,10 +1,12 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-a457c60c.js';
-import { G as isValidSelector, f as stripeStore, H as initLocalizationStore, e as cartStore, a as localizationStoreUpdateSelectedCountryCode } from './cart-e03d615e.js';
-import { z as zonosStore, b as zonosStoreInitSetting, d as zonosStoreFontFamily } from './zonosStore-cdabc848.js';
+import { d as stripeStore } from './cart-b7c15b61.js';
+import { i as isValidSelector, e as initLocalizationStore, s as storageStore, a as localizationStoreUpdateSelectedCountryCode } from './localization-bf7224aa.js';
+import { z as zonosStore, b as zonosStoreInitSetting, d as zonosStoreFontFamily } from './zonosStore-d10a829f.js';
 import { g as getGenericSettingsOverride, i as iframeServices, a as injectPrivateIframe } from './getGenericSettingsOverride-0bc3e118.js';
 import { h as handleFetch, b as logError, l as log } from './handleFetch-621e45bc.js';
-import './isDarkColor-4c7b2ffc.js';
-import './getBorderRadius-413e97eb.js';
+import './isDarkColor-31dd7dff.js';
+import './getBorderRadius-78b28b4d.js';
+import './VarianceTest-fef2d958.js';
 
 const getZonosSettings = async () => {
     if (window.Zonos.cartSettings) {
@@ -597,7 +599,7 @@ const ZonosController = class {
      * Reset the Checkout session id and client secret (required for dashboard store switching)
      */
     async reset() {
-        cartStore.checkoutSessionId = null;
+        storageStore.checkoutSessionId = null;
         stripeStore.clientSecret = '';
     }
     /**
@@ -630,7 +632,7 @@ const ZonosController = class {
         zonosStore.organizationName = organizationName;
     }
     render() {
-        return h(Host, { key: '525180de311aea6ffaf2ecaa3fc35befd6bd9142', class: "zonos--elements" });
+        return h(Host, { key: '62c0b3079d64f05800da24daa19e0e1e3a890bca', class: "zonos--elements" });
     }
 };
 ZonosController.style = ZonosControllerStyle0;

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

@@ -1,10 +1,9 @@
 import { r as registerInstance, h, H as Host, d as getElement } from './index-a457c60c.js';
-import { l as localizationStore } from './cart-e03d615e.js';
-import { d as zonosStoreFontFamily } from './zonosStore-cdabc848.js';
+import { l as localizationStore } from './localization-bf7224aa.js';
+import { d as zonosStoreFontFamily } from './zonosStore-d10a829f.js';
 import { c as classes } from './classes-0d95c529.js';
 import './handleFetch-621e45bc.js';
-import './isDarkColor-4c7b2ffc.js';
-import './getBorderRadius-413e97eb.js';
+import './VarianceTest-fef2d958.js';
 
 const zonosCountryFlagCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex}:host .flag-container{position:relative;overflow:hidden;width:100%;height:100%}:host .flag-icon{position:absolute;top:0;left:0;width:100%;height:100%;background-position:center;background-repeat:no-repeat;background-size:cover}";
 const ZonosCountryFlagStyle0 = zonosCountryFlagCss;