@zonos/elements 1.3.200 → 1.3.202

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

@@ -3,17 +3,19 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0993f42d.js');
-const cart = require('./cart-add8fe50.js');
-const paypal = require('./paypal-afc19dec.js');
-const zonosStore = require('./zonosStore-c466b127.js');
+const cart = require('./cart-637ba3d0.js');
+const paypal = require('./paypal-0eceff03.js');
+const localization = require('./localization-2f17c95f.js');
+const zonosStore = require('./zonosStore-9264749e.js');
 const handleFetch = require('./handleFetch-969d05d8.js');
 const classes = require('./classes-b7918f56.js');
 const createCustomEvent = require('./createCustomEvent-7b6fad95.js');
-const getBorderRadius = require('./getBorderRadius-3d0a563e.js');
-const isDarkColor = require('./isDarkColor-92a10a85.js');
+const getBorderRadius = require('./getBorderRadius-8d3b1049.js');
+const isDarkColor = require('./isDarkColor-bcf49625.js');
 const styles = require('./styles-d1e64fb9.js');
 const CheckoutConfig = require('./CheckoutConfig-4afc683b.js');
 const RemoveIcon = require('./RemoveIcon-081ac073.js');
+require('./VarianceTest-0cb1e118.js');
 
 /**
  * Map the items from tempCart like how we do it in dgs
@@ -51,11 +53,75 @@ 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.handleFetch('/api/zonos-elements/select-variance-test', {
+        body: {
+            testKeys,
+        },
+        method: 'POST',
+    });
+    if (errors.length || !json) {
+        return null;
+    }
+    const filteredAvailableTestKeys = localization.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 (!cart.localizationStore.localizationLoaded) {
+    if (!localization.localizationStore.localizationLoaded) {
         return true;
     }
-    if (cart.localizationStore.isDisabledCountry) {
+    if (localization.localizationStore.isDisabledCountry) {
         if (showLog) {
             handleFetch.log(`Checkout: disabled country`);
         }
@@ -65,11 +131,11 @@ const isDisabledCountry = (showLog = true) => {
 };
 
 const isShippableCountry = (showLog = true) => {
-    if (!cart.localizationStore.localizationLoaded) {
+    if (!localization.localizationStore.localizationLoaded) {
         return false;
     }
     // if localization is loaded and the localization is not a shippable country, keep the original click event
-    if (!cart.localizationStore.isShippableCountry) {
+    if (!localization.localizationStore.isShippableCountry) {
         if (showLog) {
             handleFetch.log(`Checkout: not shippable country`);
         }
@@ -118,7 +184,7 @@ const watchBigcommerceDomesticCheckout = ({ domesticRedirectedBtnSelector, onShi
                 return;
             }
             // update the country code in localization store and check if it's shippable
-            cart.localizationStoreUpdateSelectedCountryCode(shippingCountry);
+            localization.localizationStoreUpdateSelectedCountryCode(shippingCountry);
             // do nothing if the country is still domestic
             if (!isShippableCountry(false)) {
                 // cleanup the domestic shipping session if it's domestic because we will open the intl checkout after redirecting
@@ -183,6 +249,46 @@ const watchBigcommerceDomesticCheckout = ({ domesticRedirectedBtnSelector, onShi
     });
 };
 
+const getLegacyQueryParams = () => {
+    const urlParams = new URLSearchParams(window.location.search);
+    handleFetch.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
+    localization.getZCountryUrlParam(urlParams) ||
+        localization.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
@@ -250,6 +356,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 = localization.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.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() + localization.VARIANT_TEST_KEY_EXPIRATION,
+            selectedVariantKey: (existingSelection === null || existingSelection === void 0 ? void 0 : existingSelection.selectedVariantKey) || null,
+            testKey,
+        };
+    });
+};
+
 const getTempCartById = async ({ cartId, retries, }) => {
     const isTestMode = handleFetch.getIsTestMode();
     const { errors, json } = await handleFetch.handleFetch('/api/zonos-elements/get-temp-cart', {
@@ -369,7 +505,7 @@ const ZonosCheckout = class {
                     handleFetch.log('Payment intent failed, show status from error');
                 }
                 this.open = true;
-                cart.cartStore.checkoutSessionId = zonosCheckoutSessionId;
+                localization.storageStore.checkoutSessionId = zonosCheckoutSessionId;
                 cart.stripeStore.clientSecret = stripeClientSecret;
                 void this.setToFinishStep(status);
                 return { shouldAllowOrder: false };
@@ -381,6 +517,121 @@ const ZonosCheckout = class {
             handleFetch.log('Payment intent is not succeeded, proceed to order');
             return { shouldAllowOrder: true };
         };
+        this.initializeTestKeys = () => {
+            // cleanup expired test keys
+            localization.storageStore.enabledVariantTestKeys = filterExpiredTests(localization.storageStore.enabledVariantTestKeys || []);
+            // map existingSelection to the enabled variant test keys from database
+            const existingSelectionMap = zonosStore.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 = localization.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() + localization.VARIANT_TEST_KEY_EXPIRATION,
+                    selectedVariantKey: (existingSelection === null || existingSelection === void 0 ? void 0 : existingSelection.selectedVariantKey) || null,
+                    testKey,
+                };
+            });
+            localization.storageStoreSetEnabledVariantTestKeys(existingSelectionMap);
+            return {
+                allSelected: false,
+            };
+        };
+        this.shouldAllowHostedVsNativeTest = () => {
+            // This test is only applicable to checkout that's using createCartid callback
+            if (typeof zonosStore.zonosStore.checkoutSettings.createCartId !== 'function') {
+                return false;
+            }
+            const hostedVsNativeTest = zonosStore.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;
+            }
+            handleFetch.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) {
+                handleFetch.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) {
+                handleFetch.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: localization.storageStore.enabledVariantTestKeys || [],
+                mergeTestObj: response,
+            });
+            // Set the selected variant to the storage store
+            localization.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');
+            handleFetch.log(`[TEST] - hosted_vs_native: ${selectedVariantTest}`);
+            // This test is only applicable to checkout that's using createCartid callback
+            if (typeof zonosStore.zonosStore.checkoutSettings.createCartId !== 'function') {
+                handleFetch.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') {
+                handleFetch.log(`[TEST] - Hosted vs native test is enabled for native, skipping`);
+                return {
+                    redirected: false,
+                };
+            }
+            if (!((_a = zonosStore.zonosStore.genericSettings) === null || _a === void 0 ? void 0 : _a.hostedCheckoutUrl)) {
+                handleFetch.log('[TEST] - Hosted checkout URL is not provided');
+                return {
+                    redirected: false,
+                };
+            }
+            handleFetch.log('"createCartId" is provided, start building cart');
+            const cartIdResult = await zonosStore.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: localization.storageStore.checkoutSessionId || undefined, hostedCheckoutUrl: zonosStore.zonosStore.genericSettings.hostedCheckoutUrl, isTestMode: handleFetch.getIsTestMode(), isVariantTest: true }, legacyQueryParams), shippingData));
+            handleFetch.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 '';
@@ -441,6 +692,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.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
+                    localization.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) {
+                localization.storageStore.checkoutSessionId = checkoutSessionId;
+            }
+            // merge variant test input from url to storageStore.enabledVariantTestKeys
+            const enabledVariantTestKeys = localization.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() + localization.VARIANT_TEST_KEY_EXPIRATION,
+                        selectedVariantKey: 'hosted',
+                        testKey: 'hosted_vs_native',
+                    });
+                    localization.storageStoreSetEnabledVariantTestKeys(enabledVariantTestKeys);
+                }
+                else {
+                    localization.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;
@@ -452,6 +769,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;
@@ -552,11 +870,11 @@ const ZonosCheckout = class {
             await cart.cartStoreUpdateItems({ adjustments, cartItems });
         }
         else if (zonosStore.zonosStore.checkoutSettings.buildCartDetail &&
-            cart.localizationStore.selectedCountryCode) {
+            localization.localizationStore.selectedCountryCode) {
             handleFetch.log('build cart detail');
             const cartItems = await zonosStore.zonosStore.checkoutSettings.buildCartDetail({
-                countryCode: cart.localizationStore.selectedCountryCode,
-                currencyCode: cart.localizationStore.targetCurrency,
+                countryCode: localization.localizationStore.selectedCountryCode,
+                currencyCode: localization.localizationStore.targetCurrency,
             });
             // Remove negative line items and move them to adjustments here, this is only for the deprecated `buildCartDetail` where negative line items are just treated as global discount amounts. It is up to the caller to create the right discount line items.
             const cartItemsFiltered = cartItems.filter(item => item.amount >= 0);
@@ -572,7 +890,7 @@ const ZonosCheckout = class {
             await cart.cartStoreUpdateItems({ adjustments, cartItems: cartItemsFiltered });
         }
         // if checkoutSessionId is not available, request a new one.
-        if (!cart.cartStore.checkoutSessionId) {
+        if (!localization.storageStore.checkoutSessionId) {
             const success = await cart.stripeStoreInitCheckoutSession();
             handleFetch.log(`stripeStoreInitCheckoutSession: ${success}`);
             if (!success) {
@@ -618,13 +936,13 @@ const ZonosCheckout = class {
     confirmProceedWithOrderDuplication() {
         // Reset the placed order info
         this.placedOrderInfo = null;
-        if (!cart.cartStore.checkoutSessionId) {
+        if (!localization.storageStore.checkoutSessionId) {
             return;
         }
         // Record the order duplication consent so we know user did see the notification and proceed with the order duplication
         void handleFetch.handleFetch('/api/zonos-elements/update-checkout-session-metadata', {
             body: {
-                id: cart.cartStore.checkoutSessionId,
+                id: localization.storageStore.checkoutSessionId,
                 metadata: [
                     {
                         key: 'orderDuplicationConsent',
@@ -689,7 +1007,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 &&
@@ -732,6 +1050,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
                 cart.stripeStore.isFetchingSession = true;
                 this.open = true;
@@ -741,13 +1070,17 @@ const ZonosCheckout = class {
                     if (!result) {
                         throw new Error('Error building cart');
                     }
+                    (_a = window.opener) === null || _a === void 0 ? void 0 : _a.postMessage({
+                        checkoutSessionId: localization.storageStore.checkoutSessionId,
+                        type: 'zonos-checkout-session-update',
+                    }, '*');
                     // start the timer to validate the price
                     cart.cartStoreStartCheckoutInterval({
                         isPreview: this.preview,
                         sessionTimeout: CHECKOUT_SESSION_TIMEOUT,
                     });
                     paypal.submitGtag('zonos-checkout-start');
-                    const checkoutSessionId = cart.cartStore.checkoutSessionId;
+                    const checkoutSessionId = localization.storageStore.checkoutSessionId;
                     void cart.trackConversionEvent({
                         checkoutSessionId,
                         eventName: 'checkout_open',
@@ -770,13 +1103,13 @@ const ZonosCheckout = class {
                         const message = err.message;
                         if (message === 'Cart is expired.') {
                             this.isCartExpired = true;
-                            return;
                         }
                     }
                     // stop loading
                     cart.stripeStore.isFetchingSession = false;
                     handleFetch.logError(err);
                     if (this.isCartExpired) {
+                        cart.stripeStore.isFetchingSession = true;
                         return;
                     }
                     // We want to log the error anytime we fail to create a checkout session
@@ -788,15 +1121,15 @@ const ZonosCheckout = class {
                             cartId: window.Zonos.cartId,
                             checkoutSessionBody: cart.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.zonosStore.onlineStoreSettings.url,
                         },
                     });
                     cart.cartStoreUpdateToErrorState({
                         messages: [
-                            cart.translate("There's been an error creating your checkout session. Please reload and try again or contact support if the error persists"),
+                            localization.translate("There's been an error creating your checkout session. Please reload and try again or contact support if the error persists"),
                         ],
-                        title: cart.translate('Error creating Checkout'),
+                        title: localization.translate('Error creating Checkout'),
                     });
                 }
             }, {
@@ -837,18 +1170,20 @@ const ZonosCheckout = class {
             return;
         }
         handleFetch.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 ||
-            cart.getZCountryUrlParam(urlParams) ||
-            cart.localizationStore.selectedCountryCode;
+            localization.getZCountryUrlParam(urlParams) ||
+            localization.localizationStore.selectedCountryCode;
         this.applyPrefillAddress({
             customerAddress1,
             customerAddress2,
             customerCity,
             customerCountry: country,
             customerEmail,
+            customerFirstName,
+            customerLastName,
             customerName,
             customerPhone,
             customerState,
@@ -870,7 +1205,7 @@ const ZonosCheckout = class {
         };
         const customerCountry = 
         // fallback to selected country code if country is not provided
-        cart.getZCountryUrlParam(urlParams) || cart.localizationStore.selectedCountryCode;
+        localization.getZCountryUrlParam(urlParams) || localization.localizationStore.selectedCountryCode;
         const customerCity = getParam('customerCity');
         const customerEmail = getParam('customerEmail');
         const customerAddress1 = getParam('customerAddress1');
@@ -897,7 +1232,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 || '';
@@ -917,8 +1254,8 @@ const ZonosCheckout = class {
             return;
         }
         if (country &&
-            cart.localizationStore.shippingZoneCountries &&
-            !(country in cart.localizationStore.shippingZoneCountries)) {
+            localization.localizationStore.shippingZoneCountries &&
+            !(country in localization.localizationStore.shippingZoneCountries)) {
             handleFetch.log(`Country "${country}" is not in the shipping zone, so it can not be prefilled`, 'warn');
             return;
         }
@@ -1048,7 +1385,7 @@ const ZonosCheckout = class {
     async handleCustomerInfoContinue() {
         // submit google tag when the form is complete
         paypal.submitGtag('zonos-checkout-customer-info');
-        const checkoutSessionId = cart.cartStore.checkoutSessionId;
+        const checkoutSessionId = localization.storageStore.checkoutSessionId;
         void cart.trackConversionEvent({
             checkoutSessionId,
             eventName: 'checkout_customerInfoCompleted',
@@ -1134,7 +1471,7 @@ const ZonosCheckout = class {
         // Should not proceed to confirm payment if base currency update failed
         if (!baseCurrencyUpdateSuccess) {
             cart.stripeStore.hasPaymentError = true;
-            cart.stripeStore.customErrorMessage = cart.translate('Unable to complete payment in [currency]. Please try again or select a different currency. If the issue persists, contact our support team for assistance.', {
+            cart.stripeStore.customErrorMessage = localization.translate('Unable to complete payment in [currency]. Please try again or select a different currency. If the issue persists, contact our support team for assistance.', {
                 currency: cart.stripeStore.checkoutSettlementCurrency,
             });
             this.submitLoading = false;
@@ -1147,7 +1484,7 @@ const ZonosCheckout = class {
         }
         catch (_a) {
             // If user provide callback and it throw an exception, default to this message and stop the payment.
-            cart.cartStore.inventoryCheckErrorMessage = cart.translate('Unable to check inventory. Please try again.');
+            cart.cartStore.inventoryCheckErrorMessage = localization.translate('Unable to check inventory. Please try again.');
         }
         // Don't proceed to payment if there's an error message
         if (cart.cartStore.inventoryCheckErrorMessage) {
@@ -1318,13 +1655,20 @@ const ZonosCheckout = class {
         this.isMobile = handleFetch.isCheckoutMobile(this.mobile);
         this.isIframed = window.self !== window.top;
         handleFetch.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 = cart.localizationStoreOnUpdate('selectedLocale', () => {
+        this.onChangeLocaleListener = localization.localizationStoreOnChange('selectedLocale', () => {
             // Update stripe locale when selected country code is changed
             void this.applyStripeTheme();
         });
+        // Initialize test keys
+        this.initializeTestKeys();
+        window.addEventListener('message', this.handleHostedOpenWindowCallback);
         handleFetch.log(`mobile: ${this.isMobile}`);
     }
     // do clean up when component is unmounted
@@ -1335,6 +1679,7 @@ const ZonosCheckout = class {
         cart.cartStoreReset();
         // cleanup onChange listener
         this.onChangeLocaleListener();
+        window.removeEventListener('message', this.handleHostedOpenWindowCallback);
     }
     render() {
         var _a, _b, _c, _d;
@@ -1363,7 +1708,7 @@ const ZonosCheckout = class {
             : themePrimaryColorBased;
         // only use submit button color if it's on desktop
         const submitButtonColor = !this.isMobile ? colorSecondary : undefined;
-        const { customMessages } = cart.localizationStore;
+        const { customMessages } = localization.localizationStore;
         const defaultMessage = (_a = customMessages.find(x => x.pageName === 'checkout_default')) === null || _a === void 0 ? void 0 : _a.message;
         const localePageEnum = this.getCurrentLocalePageEnum();
         const filteredMessages = customMessages.filter(x => x.pageName === localePageEnum);
@@ -1383,13 +1728,13 @@ const ZonosCheckout = class {
             const zonosDebug = urlParams.get('zonosDebug');
             const zonosE2ETest = urlParams.get('zonosE2ETest');
             const zonosStagingMode = this.overrideStagingMode || handleFetch.getIsStagingMode();
-            return (index.h("zonos-v-stack", null, index.h("div", { class: "zonos--logo-wrapper" }, renderLogo(), isTestMode && (index.h("zonos-badge", { badgeColor: "orange", size: "small" }, cart.translate('Test mode'))), zonosStagingMode && (index.h("zonos-badge", { badgeColor: "red", size: "small" }, cart.translate('Staging mode'))), zonosDebug === '1' && (index.h("zonos-badge", { badgeColor: "cyan", size: "small" }, "debug")), zonosQaUrl && (index.h("zonos-badge", { badgeColor: "purple", size: "small" }, zonosQaUrl)), zonosE2ETest && (index.h("zonos-badge", { badgeColor: "gray", size: "small" }, "E2E Test"))), index.h("zonos-checkout-progress-tabs", { backgroundColor: 
+            return (index.h("zonos-v-stack", null, index.h("div", { class: "zonos--logo-wrapper" }, renderLogo(), isTestMode && (index.h("zonos-badge", { badgeColor: "orange", size: "small" }, localization.translate('Test mode'))), zonosStagingMode && (index.h("zonos-badge", { badgeColor: "red", size: "small" }, localization.translate('Staging mode'))), zonosDebug === '1' && (index.h("zonos-badge", { badgeColor: "cyan", size: "small" }, "debug")), zonosQaUrl && (index.h("zonos-badge", { badgeColor: "purple", size: "small" }, zonosQaUrl)), zonosE2ETest && (index.h("zonos-badge", { badgeColor: "gray", size: "small" }, "E2E Test"))), index.h("zonos-checkout-progress-tabs", { backgroundColor: 
                 // only use different contrast color when the secondary color is too off with the background in mobile
                 this.isMobile ? '--zonos-elements-gray-0' : null }), filteredMessages.map(x => (index.h("zonos-custom-message", { icon: MessageIcon, message: x.message })))));
         };
         const renderContent = () => {
             if (cart.cartStore.checkoutSessionTimeoutShow) {
-                return (index.h("zonos-rest-state", { class: "zonos--session-timeout", restStateSubtitle: cart.translate('Your checkout session has expired. Please reload the page to continue.'), restStateTitle: cart.translate('Session timed out'), restStateType: 'Warning' }, index.h("zonos-button", { onClick: () => this.reloadCheckoutSession(), variant: "primary" }, cart.translate('Reload'))));
+                return (index.h("zonos-rest-state", { class: "zonos--session-timeout", restStateSubtitle: localization.translate('Your checkout session has expired. Please reload the page to continue.'), restStateTitle: localization.translate('Session timed out'), restStateType: 'Warning' }, index.h("zonos-button", { onClick: () => this.reloadCheckoutSession(), variant: "primary" }, localization.translate('Reload'))));
             }
             return (index.h("div", { class: 'zonos--content', style: {
                     '--zonos--border-radius': getBorderRadius.getBorderRadius({
@@ -1426,52 +1771,52 @@ const ZonosCheckout = class {
                 this.isMobile && 'mobile',
                 this.isIframed && 'iframed',
                 this.hiddenMode && 'hidden-mode',
-            ]) }, this.preview ? (renderContent()) : (index.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())), index.h("zonos-confirm-dialog", { class: "zonos--close-confirm-dialog", dialogCancelBtnText: cart.translate("Don't close"), dialogConfirmBtnText: cart.translate('Close'), dialogIntent: "warn", dialogOpen: this.confirmDialogOpen, dialogSubtitle: cart.translate('Would you like to close checkout and return to the site?'), dialogTitle: cart.translate('Are you sure?'), onCancelClicked: () => {
+            ]) }, this.preview ? (renderContent()) : (index.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())), index.h("zonos-confirm-dialog", { class: "zonos--close-confirm-dialog", dialogCancelBtnText: localization.translate("Don't close"), dialogConfirmBtnText: localization.translate('Close'), dialogIntent: "warn", dialogOpen: this.confirmDialogOpen, dialogSubtitle: localization.translate('Would you like to close checkout and return to the site?'), dialogTitle: localization.translate('Are you sure?'), onCancelClicked: () => {
                 this.confirmDialogOpen = false;
             },
             // Mark user selected confirm to close the dialog
-            onConfirmClicked: () => this.closeDialogHandler({ confirmed: true }) }), index.h("zonos-confirm-dialog", { class: "zonos--order-duplication-dialog", dialogCancelBtnText: cart.translate('Return to merchant site'), dialogConfirmBtnText: cart.translate('Proceed with order'), dialogIntent: "warn", dialogOpen: !!this.placedOrderInfo, dialogSubtitle: 
+            onConfirmClicked: () => this.closeDialogHandler({ confirmed: true }) }), index.h("zonos-confirm-dialog", { class: "zonos--order-duplication-dialog", dialogCancelBtnText: localization.translate('Return to merchant site'), dialogConfirmBtnText: localization.translate('Proceed with order'), dialogIntent: "warn", dialogOpen: !!this.placedOrderInfo, dialogSubtitle: 
             /**
              * Show order number if it's available, otherwise just show the time
              */
             ((_b = this.placedOrderInfo) === null || _b === void 0 ? void 0 : _b.zonosOrderNumber)
-                ? cart.translate('It looks like you placed an order recently ([date] at [time]) under order number #[orderNumber]. Check your email for the order confirmation. Are you sure you want to place another order?', {
+                ? localization.translate('It looks like you placed an order recently ([date] at [time]) under order number #[orderNumber]. Check your email for the order confirmation. Are you sure you want to place another order?', {
                     date: this.formatDate(this.placedOrderInfo.time),
                     orderNumber: this.placedOrderInfo.zonosOrderNumber,
                     time: this.formatTime(this.placedOrderInfo.time),
                 })
-                : cart.translate('It looks like you placed an order recently ([date] at [time]). Check your email for the order confirmation. Are you sure you want to place another one?', {
+                : localization.translate('It looks like you placed an order recently ([date] at [time]). Check your email for the order confirmation. Are you sure you want to place another one?', {
                     date: this.formatDate(((_c = this.placedOrderInfo) === null || _c === void 0 ? void 0 : _c.time) || null),
                     time: this.formatTime(((_d = this.placedOrderInfo) === null || _d === void 0 ? void 0 : _d.time) || null),
-                }), dialogTitle: cart.translate('Are you sure?'), dialogWidth: 530, onCancelClicked: () => {
+                }), dialogTitle: localization.translate('Are you sure?'), dialogWidth: 530, onCancelClicked: () => {
                 this.handleCancelOrderDuplication();
             },
             // Mark user selected confirm to close the dialog
             onConfirmClicked: () => {
                 // Reset the placed order info and close the dialog
                 this.confirmProceedWithOrderDuplication();
-            } }), index.h("zonos-confirm-dialog", { class: "zonos--inventory-check-failure-dialog", dialogConfirmBtnText: cart.translate('Return to cart'), dialogIntent: "danger",
+            } }), index.h("zonos-confirm-dialog", { class: "zonos--inventory-check-failure-dialog", dialogConfirmBtnText: localization.translate('Return to cart'), dialogIntent: "danger",
             // Show dialog if inventory check error message is not null
             dialogOpen: !!cart.cartStore.inventoryCheckErrorMessage,
             // If dialog is in open state, the message should not be null
-            dialogSubtitle: cart.cartStore.inventoryCheckErrorMessage, dialogTitle: cart.translate("Couldn't place order"), dialogType: "alert",
+            dialogSubtitle: cart.cartStore.inventoryCheckErrorMessage, dialogTitle: localization.translate("Couldn't place order"), dialogType: "alert",
             // Mark user selected confirm to close the dialog
-            onConfirmClicked: () => this.handleInventoryCheckDialogConfirm() }), baseCurrencySettlementInfo && (index.h("zonos-confirm-dialog", { class: "zonos--pay-in-usd-dialog", dialogCancelBtnText: cart.translate('Cancel'), dialogConfirmBtnText: cart.translate('Pay [orderTotal]', {
-                orderTotal: cart.currencyFormat({
+            onConfirmClicked: () => this.handleInventoryCheckDialogConfirm() }), baseCurrencySettlementInfo && (index.h("zonos-confirm-dialog", { class: "zonos--pay-in-usd-dialog", dialogCancelBtnText: localization.translate('Cancel'), dialogConfirmBtnText: localization.translate('Pay [orderTotal]', {
+                orderTotal: localization.currencyFormat({
                     amount: baseCurrencySettlementInfo.settlementAmount,
                     currency: 'USD',
                 }),
-            }), dialogIntent: "warn", dialogOpen: this.payInUsdConfirmDialogOpen, dialogSubtitle: cart.translate('By paying in USD, your card will be charged directly with no currency conversion. However, using a non-USD based card may result in additional currency conversion fees at the bank level.'), dialogTitle: cart.translate('Pay in USD (United States Dollar)?'), dialogType: "confirm", dialogWidth: 480, onCancelClicked: () => {
+            }), dialogIntent: "warn", dialogOpen: this.payInUsdConfirmDialogOpen, dialogSubtitle: localization.translate('By paying in USD, your card will be charged directly with no currency conversion. However, using a non-USD based card may result in additional currency conversion fees at the bank level.'), dialogTitle: localization.translate('Pay in USD (United States Dollar)?'), dialogType: "confirm", dialogWidth: 480, onCancelClicked: () => {
                 this.payInUsdConfirmDialogOpen = false;
             },
             // Mark user selected confirm to continue with payment
-            onConfirmClicked: () => this.handleStripePaymentContinue() })), index.h("zonos-confirm-dialog", { class: "zonos--shopping-cart-expired-dialog", dialogConfirmBtnText: cart.translate('OK'), dialogIntent: "danger",
+            onConfirmClicked: () => this.handleStripePaymentContinue() })), index.h("zonos-confirm-dialog", { class: "zonos--shopping-cart-expired-dialog", dialogConfirmBtnText: localization.translate('OK'), dialogIntent: "danger",
             // Show dialog if inventory check error message is not null
             dialogOpen: this.isCartExpired,
             // If dialog is in open state, the message should not be null
-            dialogSubtitle: cart.translate('You are being sent back to the shop to re-add items to your cart.'), dialogTitle: cart.translate('Shopping cart expired'), dialogType: "alert",
+            dialogSubtitle: localization.translate('You are being sent back to the shop to re-add items to your cart.'), dialogTitle: localization.translate('Shopping cart expired'), dialogType: "alert",
             // Mark user selected confirm to close the dialog
-            onConfirmClicked: () => this.handleCartExpiredDialogConfirm() })));
+            onConfirmClicked: () => this.handleCartExpiredDialogConfirm() }), index.h("zonos-loading-overlay", { open: this.isOverlayLoading })));
     }
     static get assetsDirs() { return ["assets"]; }
     static get watchers() { return {