@zonos/elements 1.3.200 → 1.3.202

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout.js

@@ -2,12 +2,15 @@ import { Fragment, h, Host, } from "@stencil/core";
 import { cartStore, cartStoreClearCheckoutInterval, cartStoreNextStep, cartStoreReset, cartStoreResetTabItems, cartStoreSetCheckoutSession, cartStoreStartCheckoutInterval, cartStoreUpdateItems, cartStoreUpdateToErrorState, } from "../../store/checkout/cart";
 import { paypalInitScript, paypalStore, paypalStoreHasPaypalEnabled, } from "../../store/checkout/paypal";
 import { getCheckoutSessionBody, initStripeElements, stripeStore, stripeStoreCleanupDomesticShippingSession, stripeStoreConfirmPayment, stripeStoreGetPaymentIntent, stripeStoreHandleInventoryCheck, stripeStoreHandleInventoryRefund, stripeStoreInitCheckoutSession, stripeStorePrefetchLandedCost, stripeStoreReset, stripeStoreRetrievePayment, stripeStoreUpdateCheckoutSessionBaseCurrency, } from "../../store/checkout/stripe";
-import { localizationStore, localizationStoreOnUpdate, } from "../../store/hello/localization";
+import { localizationStore, localizationStoreOnChange, } from "../../store/hello/localization";
+import { storageStore, storageStoreSetEnabledVariantTestKeys, VARIANT_TEST_KEY_EXPIRATION, } from "../../store/storageStore";
 import { translate } from "../../store/translationStore";
 import { getZonosStoreTheme, zonosStore, } from "../../store/zonosStore";
 import { buildCartItemsByTempCart } from "../../utils/api/buildCartItemsByTempCart";
 import { isStoreDiscountEnabled } from "../../utils/api/isStoreDiscountEnabl";
+import { selectVarianceTest } from "../../utils/api/selectVarianceTest";
 import { trackConversionEvent } from "../../utils/api/trackConversionEvent";
+import { buildCartUrl } from "../../utils/buildCartUrl";
 import { getIsStagingMode } from "../../utils/checkout/getIsStagingMode";
 import { getIsTestMode } from "../../utils/checkout/getIsTestMode";
 import { isCheckoutMobile } from "../../utils/checkout/isCheckoutMobile";
@@ -17,6 +20,7 @@ import { watchBigcommerceDomesticCheckout } from "../../utils/checkout/watchBigc
 import { classes } from "../../utils/classes";
 import { createCustomEvent } from "../../utils/createCustomEvent";
 import { getBorderRadius } from "../../utils/getBorderRadius";
+import { getLegacyQueryParams } from "../../utils/getLegacyQueryParams";
 import { handleFetch } from "../../utils/handleFetch";
 import { currencyFormat } from "../../utils/hello/currencyConversion/currencyFormat";
 import { getZCountryUrlParam } from "../../utils/hello/getZCountryUrlParam";
@@ -31,6 +35,10 @@ import { sendLoadNativeCheckoutLog } from "../../utils/logging/sendLoadNativeChe
 import { mergeConfig } from "../../utils/mergeConfig";
 import { styles } from "../../utils/styles";
 import { submitGtag } from "../../utils/submitGtag";
+import { filterExpiredTests } from "../../utils/varianceTest/filterExpiredTests";
+import { getSelectedTestVariant } from "../../utils/varianceTest/getSelectedTestVariant";
+import { isTestEnabled } from "../../utils/varianceTest/isTestEnabl";
+import { mergeTest } from "../../utils/varianceTest/mergeTest";
 import { setupCartData } from "../../../scripts/cart/_setupCartData";
 import { checkoutHiddenBtnSelector, checkoutHiddenInternationalBtnSelector, domesticRedirectedBtnSelector, } from "../../../types/checkout/CheckoutConfig";
 /** These assets need to be in relative path as https://www.npmjs.com/package/stencil-inline-svg suggested */
@@ -95,7 +103,7 @@ export class ZonosCheckout {
                     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 };
@@ -107,6 +115,121 @@ export class ZonosCheckout {
             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 '';
@@ -167,6 +290,74 @@ export class ZonosCheckout {
             }
             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;
+                default:
+                    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;
@@ -178,6 +369,7 @@ export class ZonosCheckout {
         this.defaultCustomerProfileAddress = [];
         this.customerProfile = null;
         this.open = this.forceDialogOpen;
+        this.isOverlayLoading = false;
         this.stripe = window.Zonos.stripe;
         this.submitLoading = false;
         this.collapseReviewMobile = true;
@@ -298,7 +490,7 @@ export class ZonosCheckout {
             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) {
@@ -344,13 +536,13 @@ export class ZonosCheckout {
     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',
@@ -415,7 +607,7 @@ export class ZonosCheckout {
                 button,
             });
             button.addEventListener('click', async (e) => {
-                var _a;
+                var _a, _b;
                 // Start tracking load time
                 const startTime = performance.now();
                 const isAlwaysTriggerInternationalCheckout = alwaysTriggerInternationalCheckoutSelector &&
@@ -458,6 +650,17 @@ export class ZonosCheckout {
                         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;
@@ -467,13 +670,17 @@ export class ZonosCheckout {
                     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',
@@ -496,13 +703,13 @@ export class ZonosCheckout {
                         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
@@ -514,7 +721,7 @@ export class ZonosCheckout {
                             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,
                         },
                     });
@@ -563,7 +770,7 @@ export class ZonosCheckout {
             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 ||
@@ -575,6 +782,8 @@ export class ZonosCheckout {
             customerCity,
             customerCountry: country,
             customerEmail,
+            customerFirstName,
+            customerLastName,
             customerName,
             customerPhone,
             customerState,
@@ -623,7 +832,9 @@ export class ZonosCheckout {
         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 || '';
@@ -774,7 +985,7 @@ export class ZonosCheckout {
     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',
@@ -1044,13 +1255,20 @@ export class ZonosCheckout {
         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
@@ -1061,6 +1279,7 @@ export class ZonosCheckout {
         cartStoreReset();
         // cleanup onChange listener
         this.onChangeLocaleListener();
+        window.removeEventListener('message', this.handleHostedOpenWindowCallback);
     }
     render() {
         var _a, _b, _c, _d;
@@ -1197,7 +1416,7 @@ export class ZonosCheckout {
             // 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 is() { return "zonos-checkout"; }
     static get encapsulation() { return "scoped"; }
@@ -1372,6 +1591,7 @@ export class ZonosCheckout {
             "defaultCustomerProfileAddress": {},
             "customerProfile": {},
             "open": {},
+            "isOverlayLoading": {},
             "stripe": {},
             "submitLoading": {},
             "collapseReviewMobile": {},
@@ -1461,7 +1681,7 @@ export class ZonosCheckout {
                     "signature": "(session: CheckoutSessionDetailsFragment) => Promise<void>",
                     "parameters": [{
                             "name": "session",
-                            "type": "{ cartId: string | null; clientSecret: string; customerProfile: { email: string | null; locations: { administrativeArea: string; countryCode: CountryCode; email: string | null; line1: string; line2: string | null; locality: string; name: string | null; phone: string | null; postalCode: string; }[] | null; name: string | null; } | null; customerSessionClientSecret: string | null; id: string; landedCost: { amountSubtotals: { discounts: number | null; duties: number; fees: number; items: number; landedCostTotal: number; shipping: number; taxes: number; } | null; id: string; landedCostGuaranteeCode: LandedCostGuaranteeCode; method: IncotermCode; shipmentRating: { displayName: string; }; } | null; metadata: ({ key: string; value: string; } | null)[] | null; organizationId: string; subtotals: { adjustments: number; duties: number; exchangeRate: { id: string; rate: number; sourceCurrencyCode: CurrencyCode; targetCurrencyCode: CurrencyCode; type: ExchangeRateType; }; fees: number; items: number; landedCostTotal: number; presentmentCurrencyCode: CurrencyCode; shipping: number; taxes: number; total: number; }; }",
+                            "type": "{ cartId: string | null; clientSecret: string; customerProfile: { email: string | null; locations: { administrativeArea: string; countryCode: CountryCode; email: string | null; line1: string; line2: string | null; locality: string; name: string | null; phone: string | null; postalCode: string; }[] | null; name: string | null; } | null; customerSessionClientSecret: string | null; id: string; landedCost: { amountSubtotals: { discounts: number | null; duties: number; fees: number; items: number; landedCostTotal: number; shipping: number; taxes: number; } | null; id: string; landedCostGuaranteeCode: LandedCostGuaranteeCode; method: IncotermCode; shipmentRating: { displayName: string; }; } | null; metadata: ({ key: string; value: string; } | null)[] | null; organizationId: string; subtotals: { adjustments: number; duties: number; exchangeRate: { id: string; rate: number; sourceCurrencyCode: CurrencyCode; targetCurrencyCode: CurrencyCode; type: ExchangeRateType; }; fees: number; items: number; landedCostTotal: number; presentmentCurrencyCode: CurrencyCode; shipping: number; taxes: number; total: number; }; varianceTestResults: { selectedVariantKey: string; testKey: string; }[] | null; }",
                             "docs": ""
                         }],
                     "references": {

package/dist/collection/components/checkout/zonos-checkout/zonos-customer-info/zonos-customer-info.js

@@ -1,7 +1,7 @@
 import { h, Host, } from "@stencil/core";
-import { cartStore } from "../../../store/checkout/cart";
 import { stripeStore, stripeStoreTranslateAddressToLatin, } from "../../../store/checkout/stripe";
 import { localizationStore } from "../../../store/hello/localization";
+import { storageStore } from "../../../store/storageStore";
 import { translate } from "../../../store/translationStore";
 import { getZonosStoreTheme, zonosStore, } from "../../../store/zonosStore";
 import { containsNonLatinChars } from "../../../utils/containsNonLatinChars";
@@ -218,11 +218,11 @@ export class ZonosCustomerInfo {
                 !!((_b = (_a = zonosStore.genericSettings) === null || _a === void 0 ? void 0 : _a.countryCustomAddressEnabled) === null || _b === void 0 ? void 0 : _b.includes(localizationStore.selectedCountryCode));
             // Should only record the form type used once
             if (type === 'shipping' &&
-                cartStore.checkoutSessionId &&
+                storageStore.checkoutSessionId &&
                 !this.recordedFormTypeUsed) {
                 void handleFetch('/api/zonos-elements/update-checkout-session-metadata', {
                     body: {
-                        id: cartStore.checkoutSessionId,
+                        id: storageStore.checkoutSessionId,
                         metadata: [
                             {
                                 key: 'ZONOS_FORM_TYPE_USING',

package/dist/collection/components/checkout/zonos-checkout/zonos-shipping/zonos-shipping.js

@@ -1,6 +1,7 @@
 import { Fragment, h, Host, } from "@stencil/core";
 import { cartStore, cartStoreGetShippingTransitInfo, cartStoreUpdateSelectedShippingOption, } from "../../../store/checkout/cart";
 import { stripeStore } from "../../../store/checkout/stripe";
+import { storageStore } from "../../../store/storageStore";
 import { translate } from "../../../store/translationStore";
 import { trackConversionEvent } from "../../../utils/api/trackConversionEvent";
 import { renderCheckoutCurrency } from "../../../utils/checkout/renderCheckoutCurrency";
@@ -52,7 +53,7 @@ export class ZonosShipping {
             }
             // submit google tag when the form is complete
             submitGtag('zonos-checkout-shipping-info');
-            const checkoutSessionId = cartStore.checkoutSessionId;
+            const checkoutSessionId = storageStore.checkoutSessionId;
             void trackConversionEvent({
                 checkoutSessionId,
                 eventName: 'checkout_shippingInfoCompleted',

package/dist/collection/components/common/zonos-loading-overlay/zonos-loading-overlay.css

@@ -0,0 +1,62 @@
+: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;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483010;
+  pointer-events: none;
+  display: block;
+}
+:host .zonos--loading-overlay {
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  height: 100vh;
+  background: var(--zonos-elements-backdrop-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+  z-index: 2147483010;
+}
+
+:host(.zonos--open) {
+  pointer-events: auto;
+}
+:host(.zonos--open) .zonos--loading-overlay {
+  opacity: 0.65;
+  visibility: visible;
+}

package/dist/collection/components/common/zonos-loading-overlay/zonos-loading-overlay.js

@@ -0,0 +1,90 @@
+import { h, Host } from "@stencil/core";
+import { classes } from "../../utils/classes";
+export class ZonosLoadingOverlay {
+    constructor() {
+        this.open = false;
+        this.spinnerColor = undefined;
+        this.size = 40;
+    }
+    render() {
+        return (h(Host, { key: 'eff20c3fe4c4a998748ac07567cc5449efc398cd', class: classes(['zonos--elements', this.open && 'zonos--open']) }, h("div", { key: '1b37bfc1a150720e0f4f84075ac661e5395aee3b', class: "zonos--loading-overlay" }, h("zonos-spinner", { key: '42ac91e723802b23897b6e5cd99e0aea7d964da5', size: this.size, spinnerColor: this.spinnerColor }))));
+    }
+    static get is() { return "zonos-loading-overlay"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-loading-overlay.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-loading-overlay.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether or not the overlay is open"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "open",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "spinnerColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| 'primary'\n    | 'info'\n    | 'success'\n    | 'danger'\n    | 'warning'\n    | 'black'\n    | 'white'",
+                    "resolved": "\"black\" | \"danger\" | \"info\" | \"primary\" | \"success\" | \"warning\" | \"white\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Spinner color (optional)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "spinner-color",
+                "reflect": false
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Spinner size (optional, default 40)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "40"
+            }
+        };
+    }
+}

package/dist/collection/components/common/zonos-logo/zonos-logo.js

@@ -10,11 +10,11 @@ export class ZonosLogo {
         const filterColor = this.theme === 'DARK'
             ? 'invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%)'
             : 'whiteinvert(0%) sepia(100%) saturate(32%) hue-rotate(92deg) brightness(107%) contrast(107%)';
-        return (h(Host, { key: '00a2d8c27b70f329813b6a3c1547c82b2e7cf725', class: classes(['zonos--elements zonos--logo']), style: {
+        return (h(Host, { key: 'c41a277084d4880e1f452a1f7ca097ad3507059f', class: classes(['zonos--elements zonos--logo']), style: {
                 '--zonos--filter-color': filterColor,
                 '--zonos--font-family': zonosStoreFontFamily(),
                 '--zonos--width': this.width,
-            } }, h("img", { key: 'e994199d3178a1198a1f0a1b132fae75bef47ce7', alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
+            } }, h("img", { key: '01361446c08074a8f8b4cac206a999e381d5d903', alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
     }
     static get is() { return "zonos-logo"; }
     static get encapsulation() { return "shadow"; }