@zonos/elements 1.3.200 → 1.3.202

package/dist/collection/components/store/hello/localization.js

@@ -1,5 +1,5 @@
 import { createStore } from "@stencil/store";
-import { cartStore } from "../checkout/cart";
+import { storageStore } from "../storageStore";
 import { translationStoreUpdateLanguage } from "../translationStore";
 import { zonosStore } from "../zonosStore";
 import { getCountries } from "../../utils/api/getCountries";
@@ -15,7 +15,7 @@ import { getCurrencyCode } from "../../utils/hello/currencyConversion/getCurrenc
 import { setZCountryUrlParam } from "../../utils/hello/setZCountryUrlParam";
 import { log } from "../../utils/logging/log";
 import { logError } from "../../utils/logging/logError";
-const { dispose: localizationDispose, onChange: localizationStoreOnUpdate, state: localizationStore, } = createStore({
+const { dispose: localizationDispose, onChange: localizationStoreOnChange, state: localizationStore, } = createStore({
     countryLandedCost: null,
     customMessages: [],
     exchangeRate: null,
@@ -196,12 +196,12 @@ const initHelloCountryList = (allCountries) => {
     }, {});
 };
 const updateCheckoutSessionLanguage = async () => {
-    if (!cartStore.checkoutSessionId) {
+    if (!storageStore.checkoutSessionId) {
         return null;
     }
     const { errors, json } = await handleFetch('/api/zonos-elements/update-checkout-session-metadata', {
         body: {
-            id: cartStore.checkoutSessionId,
+            id: storageStore.checkoutSessionId,
             metadata: [
                 {
                     key: 'language',
@@ -257,4 +257,4 @@ const initLocalizationStore = async () => {
     }
     localizationStore.localizationLoaded = true;
 };
-export { initLocalizationStore, localizationDispose, localizationStore, localizationStoreOnUpdate, localizationStoreUpdateSelectedCountryCode, localizationStoreUpdateSelectedLocale, };
+export { initLocalizationStore, localizationDispose, localizationStore, localizationStoreOnChange, localizationStoreUpdateSelectedCountryCode, localizationStoreUpdateSelectedLocale, };

package/dist/collection/components/store/storageStore.js

@@ -0,0 +1,32 @@
+import { createStore } from "@stencil/store";
+import { jsonParse } from "../utils/jsonParse";
+import { filterValidTests } from "../utils/varianceTest/filterValidTests";
+/**
+ * Expiration time for variant test keys in milliseconds
+ * @default 1 day
+ */
+export const VARIANT_TEST_KEY_EXPIRATION = 60 * 60 * 24 * 1000;
+const { onChange: storageStoreOnChange, state: storageStore } = createStore({
+    checkoutSessionId: sessionStorage.getItem('zonos--checkout-session-id'),
+    enabledVariantTestKeys: jsonParse(localStorage.getItem('zonos--enabled-variant-test-keys')),
+});
+storageStoreOnChange('enabledVariantTestKeys', () => {
+    var _a;
+    // This should be set in localStorage so we don't have multiple tests for the same user in short period of time
+    if (!((_a = storageStore.enabledVariantTestKeys) === null || _a === void 0 ? void 0 : _a.length)) {
+        localStorage.removeItem('zonos--enabled-variant-test-keys');
+        return;
+    }
+    localStorage.setItem('zonos--enabled-variant-test-keys', JSON.stringify(storageStore.enabledVariantTestKeys));
+});
+storageStoreOnChange('checkoutSessionId', () => {
+    if (!storageStore.checkoutSessionId) {
+        sessionStorage.removeItem('zonos--checkout-session-id');
+        return;
+    }
+    sessionStorage.setItem('zonos--checkout-session-id', storageStore.checkoutSessionId);
+});
+const storageStoreSetEnabledVariantTestKeys = (testKeys) => {
+    storageStore.enabledVariantTestKeys = filterValidTests(testKeys);
+};
+export { storageStore, storageStoreOnChange, storageStoreSetEnabledVariantTestKeys, };

package/dist/collection/components/store/zonosStore.js

@@ -1,6 +1,7 @@
 import { createStore } from "@stencil/store";
 import { mergeConfig } from "../utils/mergeConfig";
-const { dispose: zonosStoreDispose, reset, state: zonosStore, } = createStore(() => ({
+import { isInAvailableTestKey } from "../utils/varianceTest/isInAvailableTestKey";
+const { dispose: zonosStoreDispose, onChange: zonosStoreOnChange, reset, state: zonosStore, } = createStore(() => ({
     appearance: {
         colorPrimary: 'white',
         fontFamily: 'Inter',
@@ -51,6 +52,7 @@ const { dispose: zonosStoreDispose, reset, state: zonosStore, } = createStore(()
     },
     currentHelloPage: '',
     disabledCountries: [],
+    enabledVariantTestKeys: [],
     helloSettings: {
         anchorElementSelector: '',
         cartUrlPattern: '',
@@ -111,7 +113,7 @@ const getZonosStoreTheme = (theme) => {
  * Init setting from zonos setting
  */
 const zonosStoreInitSetting = ({ overrideSettings, zonosSettings, }) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g;
     reset();
     if (zonosSettings) {
         // save zonos settings to be used later
@@ -138,9 +140,13 @@ const zonosStoreInitSetting = ({ overrideSettings, zonosSettings, }) => {
         null);
     // set flag to true to indicate that config is ready
     zonosStore.loadedConfig = true;
-    zonosStore.organizationId = ((_b = zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.organization) === null || _b === void 0 ? void 0 : _b.id) || '';
-    zonosStore.organizationName = ((_c = zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.organization) === null || _c === void 0 ? void 0 : _c.name) || '';
-    zonosStore.storeId = ((_e = (_d = zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.organization) === null || _d === void 0 ? void 0 : _d.references) === null || _e === void 0 ? void 0 : _e.storeId) || null;
+    // initialize variant test keys
+    zonosStore.enabledVariantTestKeys =
+        // Only map and filter the test keys that the current code supports
+        ((_c = (_b = zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.checkoutSettings) === null || _b === void 0 ? void 0 : _b.varianceTestRegistrations) === null || _c === void 0 ? void 0 : _c.flatMap(({ testKey }) => (isInAvailableTestKey(testKey) ? testKey : []))) || [];
+    zonosStore.organizationId = ((_d = zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.organization) === null || _d === void 0 ? void 0 : _d.id) || '';
+    zonosStore.organizationName = ((_e = zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.organization) === null || _e === void 0 ? void 0 : _e.name) || '';
+    zonosStore.storeId = ((_g = (_f = zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.organization) === null || _f === void 0 ? void 0 : _f.references) === null || _g === void 0 ? void 0 : _g.storeId) || null;
     zonosStore.currencyConverter = overrideSettings === null || overrideSettings === void 0 ? void 0 : overrideSettings.currencyConverter;
     zonosStore.onCountryChange = overrideSettings === null || overrideSettings === void 0 ? void 0 : overrideSettings.onCountryChange;
     zonosStore.overrideCurrencyFormat = overrideSettings === null || overrideSettings === void 0 ? void 0 : overrideSettings.overrideCurrencyFormat;
@@ -152,4 +158,4 @@ const zonosStoreFontFamily = () => {
     const fontFamily = zonosStore.appearance.fontFamily || 'Inter';
     return fontFamily;
 };
-export { getZonosStoreTheme, zonosStore, zonosStoreDispose, zonosStoreFontFamily, zonosStoreInitSetting, };
+export { getZonosStoreTheme, zonosStore, zonosStoreDispose, zonosStoreFontFamily, zonosStoreInitSetting, zonosStoreOnChange, };

package/dist/collection/components/stripe/zonos-address/zonos-address.js

@@ -1,7 +1,7 @@
 import { h, Host, } from "@stencil/core";
-import { cartStore } from "../../store/checkout/cart";
 import { stripeStore } from "../../store/checkout/stripe";
 import { getFallbackDefaultCountryCode, localizationStore, } from "../../store/hello/localization";
+import { storageStore, storageStoreOnChange, } from "../../store/storageStore";
 import { translate } from "../../store/translationStore";
 import { zonosStore } from "../../store/zonosStore";
 import { trackConversionEvent } from "../../utils/api/trackConversionEvent";
@@ -15,6 +15,7 @@ import { countryRequireTaxId, shipToTaxIdLabels, } from "../../../types/checkout
  */
 export class ZonosAddress {
     constructor() {
+        this.onStoreCheckoutSessionIdChangedSubscription = () => { };
         /**
          * Google autocomplete overlay is conflict with our button, this is to adjust z index of the autocomplete
          */
@@ -23,6 +24,14 @@ export class ZonosAddress {
          * Check if the tracking event is sent
          */
         this.trackingSent = false;
+        this.onStoreCheckoutSessionIdChanged = () => {
+            const onCheckoutSessionIdChange = () => {
+                this.checkoutSessionId = storageStore.checkoutSessionId;
+            };
+            // Trigger it once on init because onChange doesn't get triggered on initial load
+            onCheckoutSessionIdChange();
+            this.onStoreCheckoutSessionIdChangedSubscription = storageStoreOnChange('checkoutSessionId', onCheckoutSessionIdChange);
+        };
         this.type = undefined;
         this.titleText = undefined;
         this.defaultAddress = [];
@@ -30,7 +39,7 @@ export class ZonosAddress {
         this.stripe = window.Zonos.stripe;
         this.isDirtyAddress = false;
         this.isAddressFilled = false;
-        this.checkoutSessionId = cartStore.checkoutSessionId;
+        this.checkoutSessionId = storageStore.checkoutSessionId;
     }
     getStripeAddressInstance() {
         if (this.type === 'billing') {
@@ -59,7 +68,7 @@ export class ZonosAddress {
     }
     isAddressFilledChanged() {
         // Sometimes address elements is loaded with prefilled data before checkout is loaded, need to not send the event if checkout session id is not available, and send the event after checkout is loaded
-        if (!cartStore.checkoutSessionId) {
+        if (!storageStore.checkoutSessionId) {
             return;
         }
         // Only need to track the event if the shipping address is filled
@@ -67,7 +76,7 @@ export class ZonosAddress {
             !this.trackingSent &&
             this.type === 'shipping') {
             this.trackingSent = true;
-            const checkoutSessionId = cartStore.checkoutSessionId;
+            const checkoutSessionId = storageStore.checkoutSessionId;
             void trackConversionEvent({
                 checkoutSessionId,
                 eventName: 'checkout_customerInfoFilled',
@@ -239,6 +248,8 @@ export class ZonosAddress {
         // destroy the stripe element when this component is removed from the DOM, so that we can re-create the new one with previous value
         const stripeElement = this.getStripeAddressInstance().stripeAddressElement;
         stripeElement === null || stripeElement === void 0 ? void 0 : stripeElement.destroy();
+        // cleanup checkout session id subscription
+        this.onStoreCheckoutSessionIdChangedSubscription();
     }
     componentDidLoad() {
         const stripeAddressEventData = this.getStripeAddressInstance().stripeAddressEventData;
@@ -247,15 +258,16 @@ export class ZonosAddress {
                 stripeAddressEventData.value.address.line1.length > 0;
         // @Watch doesn't get trigger on initial load
         void this.watchInitStripe();
+        this.onStoreCheckoutSessionIdChanged();
     }
     render() {
         var _a;
-        this.checkoutSessionId = cartStore.checkoutSessionId;
+        this.checkoutSessionId = storageStore.checkoutSessionId;
         if ((_a = stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.complete) {
             this.isAddressFilled = true;
         }
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: 'ebd6b34dfcb486e1746fbc306e2e413d03290d50', class: "zonos--address zonos--elements" }, h("zonos-text", { key: '68e7f0fa37ca7efd4d833b32d4c27cda29521871', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), this.renderCompanyNameInput(), this.renderTaxIdInput(), h("div", { key: '5e6d4b3798c91def3f3a6ae5ac12f1a2ccca272b', class: "zonos--address-component" })));
+        return (h(Host, { key: '6cb58defa44e55a88bdb8ad3b1b2e96033337fec', class: "zonos--address zonos--elements" }, h("zonos-text", { key: '2708affaeb700f6c256b38285696d3eaffa1d1ea', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), this.renderCompanyNameInput(), this.renderTaxIdInput(), h("div", { key: '290de47b8579a70f997ead2ab3ada123dfa4d204', class: "zonos--address-component" })));
     }
     static get is() { return "zonos-address"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/stripe/zonos-custom-address/zonos-address-suggestions/zonos-address-suggestions.js

@@ -70,9 +70,9 @@ export class ZonosAddressSuggestions {
         return segments;
     }
     render() {
-        return (h(Host, { key: '88eff73526172a10854d2ae18b5b54afd3fd4b28', class: "zonos--address-suggestions", role: "group", style: {
+        return (h(Host, { key: 'eeb520d24c5cebca1f425c9648a2bdf0269f74c9', class: "zonos--address-suggestions", role: "group", style: {
                 '--zonos--border-radius': getBorderRadius(),
-            } }, h("ul", { key: 'f55c95ab39906d2bcb6edc6d5379ec6c70f5277a', "aria-label": "Suggestions", class: "wrapper", role: "listbox" }, !!this.localSuggestions.length && (h("li", { key: 'b7ca181e48f18ac7c0d2c8cfc1b05fec6df5827f', "aria-selected": false, class: "powered-by option", role: "option" }, h("div", { key: '07577044166b2cbfbec0cf96786266d74dd1c098', class: "powered-by-container" }, h("zonos-text", { key: '3780f4763666ac08cfe7083749b5f781b74e4e66', type: "caption" }, "Suggestions powered by"), h("zonos-text", { key: '73c5d1db8a235cae3ebc2af0eba89d91ade8a6a1', type: "semiBoldLabel" }, "Google")), h("zonos-button", { key: '6d6058329ced6bae0f04ce4e80da07506f706847', "aria-label": "Clear suggestions", icon: h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: () => {
+            } }, h("ul", { key: 'f7ac29ef14417f8c86dbafcf840204f4c964b3ad', "aria-label": "Suggestions", class: "wrapper", role: "listbox" }, !!this.localSuggestions.length && (h("li", { key: '13d34e64d8bd7711268a1f5641d0c868a89b949c', "aria-selected": false, class: "powered-by option", role: "option" }, h("div", { key: '00f20bd5568762ee581462826410031273e808da', class: "powered-by-container" }, h("zonos-text", { key: 'fc61a8ec973fc2cdf1e137563617cfed0badbb12', type: "caption" }, "Suggestions powered by"), h("zonos-text", { key: '96343fe696ec0d3990ffebaf450306ca91624d04', type: "semiBoldLabel" }, "Google")), h("zonos-button", { key: 'e7c6a9e64c8976a3c3a521b0794d2e82c1919ce2', "aria-label": "Clear suggestions", icon: h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: () => {
                 this.localSuggestions = [];
             } }))), this.localSuggestions.map(suggestion => (
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events

package/dist/collection/components/stripe/zonos-custom-address/zonos-custom-address.js

@@ -12,9 +12,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { h, Host, } from "@stencil/core";
 import throttle from "lodash/throttle";
-import { cartStore } from "../../store/checkout/cart";
 import { stripeStore } from "../../store/checkout/stripe";
 import { localizationStore } from "../../store/hello/localization";
+import { storageStore, storageStoreOnChange, } from "../../store/storageStore";
 import { translate } from "../../store/translationStore";
 import { zonosStore } from "../../store/zonosStore";
 import { trackConversionEvent } from "../../utils/api/trackConversionEvent";
@@ -30,6 +30,7 @@ import { countryRequireTaxId, shipToTaxIdLabels, } from "../../../types/checkout
  */
 export class ZonosAddress {
     constructor() {
+        this.onStoreCheckoutSessionIdChangedSubscription = () => { };
         /**
          * Whether the suggestion is clicked
          */
@@ -184,6 +185,14 @@ export class ZonosAddress {
                 stripeStore.customBillingAddressErrors = customErrors;
             }
         };
+        this.onStoreCheckoutSessionIdChanged = () => {
+            const onCheckoutSessionIdChange = () => {
+                this.checkoutSessionId = storageStore.checkoutSessionId;
+            };
+            // Trigger it once on init because onChange doesn't get triggered on initial load
+            onCheckoutSessionIdChange();
+            this.onStoreCheckoutSessionIdChangedSubscription = storageStoreOnChange('checkoutSessionId', onCheckoutSessionIdChange);
+        };
         this.type = undefined;
         this.titleText = undefined;
         this.defaultAddress = [];
@@ -214,7 +223,7 @@ export class ZonosAddress {
         this.lastNameError = '';
         this.isFirstInitialization = true;
         this.addressService = null;
-        this.checkoutSessionId = cartStore.checkoutSessionId;
+        this.checkoutSessionId = storageStore.checkoutSessionId;
     }
     getStripeAddressInstance() {
         if (this.type === 'billing') {
@@ -243,7 +252,7 @@ export class ZonosAddress {
     }
     isAddressFilledChanged() {
         // Sometimes address elements is loaded with prefilled data before checkout is loaded, need to not send the event if checkout session id is not available, and send the event after checkout is loaded
-        if (!cartStore.checkoutSessionId) {
+        if (!storageStore.checkoutSessionId) {
             return;
         }
         // Only need to track the event if the shipping address is filled
@@ -251,7 +260,7 @@ export class ZonosAddress {
             !this.trackingSent &&
             this.type === 'shipping') {
             this.trackingSent = true;
-            const checkoutSessionId = cartStore.checkoutSessionId;
+            const checkoutSessionId = storageStore.checkoutSessionId;
             void trackConversionEvent({
                 checkoutSessionId,
                 eventName: 'checkout_customerInfoFilled',
@@ -773,6 +782,8 @@ export class ZonosAddress {
         // unsubscribe from address suggestions when this component is removed from the DOM
         (_a = this.onAddressSuggestionsUnsubscribe) === null || _a === void 0 ? void 0 : _a.call(this);
         (_b = this.onAddressSelectedUnsubscribe) === null || _b === void 0 ? void 0 : _b.call(this);
+        // cleanup checkout session id subscription
+        this.onStoreCheckoutSessionIdChangedSubscription();
     }
     componentWillLoad() {
         if (zonosStore.checkoutAddressService) {
@@ -795,12 +806,13 @@ export class ZonosAddress {
         // @Watch doesn't get trigger on initial load
         this.initAddressSuggestions();
         this.isFirstInitialization = false;
+        // subscribe to checkout session id changes from storage store
+        this.onStoreCheckoutSessionIdChanged();
     }
     render() {
         var _a;
         this.shippingZones = localizationStore.shippingZoneCountries;
         this.addressService = zonosStore.checkoutAddressService;
-        this.checkoutSessionId = cartStore.checkoutSessionId;
         if ((_a = stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.complete) {
             this.isAddressFilled = true;
         }
@@ -809,10 +821,10 @@ export class ZonosAddress {
             this.country = localizationStore.selectedCountryCode;
         }
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: 'bb1f01c899ecdc1ed52eb8be7a680fdbb2ce9a7b', class: classes([
+        return (h(Host, { key: '7a766af62acc47886e716ac3c52c1457eae04545', class: classes([
                 'zonos--address zonos--elements',
                 `zonos--${this.type}-address`,
-            ]) }, h("zonos-text", { key: 'f6ad6d23ec141fe192908b639802f69ad565958e', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderCustomAddressForm()));
+            ]) }, h("zonos-text", { key: '224a78f8d1e02e2b0d7c95eafe9a1d4354fb5f73', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderCustomAddressForm()));
     }
     static get is() { return "zonos-custom-address"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/stripe/zonos-payment/zonos-payment.js

@@ -1,6 +1,6 @@
 import { h, Host } from "@stencil/core";
-import { cartStore } from "../../store/checkout/cart";
 import { stripeStore } from "../../store/checkout/stripe";
+import { storageStore } from "../../store/storageStore";
 import { trackConversionEvent } from "../../utils/api/trackConversionEvent";
 import { logError } from "../../utils/logging/logError";
 /**
@@ -18,7 +18,7 @@ export class ZonosPayment {
         var _a;
         // Only send event once when payment info is filled
         if (this.isPaymentInfoFilled && !this.trackingSent) {
-            const checkoutSessionId = cartStore.checkoutSessionId;
+            const checkoutSessionId = storageStore.checkoutSessionId;
             void trackConversionEvent({
                 checkoutSessionId,
                 eventName: 'checkout_paymentInfoFilled',
@@ -58,7 +58,7 @@ export class ZonosPayment {
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: 'c97f9b800febc678b67643b2020289dc4d382767', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { key: 'fe8ca21af5fc997831fa5839e26e4de7adb04766', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: '863719d3e20a4b63ae2f7dbfe54482c57f3fa393', class: "zonos--payment-component" }), h("div", { key: 'd7c5edc24348ac4c3da4e3b437bd47aaabf45287', class: "zonos--payment-paypal-container" })));
+        return (h(Host, { key: '7210a20afba18d167a6e7d875ba23daa0db774e4', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { key: '4f043b3149cca48d2f4463a826541ebe35d0b6ca', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: '15721e208e90b969c075877680a02dca5bb81689', class: "zonos--payment-component" }), h("div", { key: '36d5767821464db479feff18e6368e862550c777', class: "zonos--payment-paypal-container" })));
     }
     static get is() { return "zonos-payment"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/utils/api/getCheckoutSession.js

@@ -1,14 +1,14 @@
-import { cartStore } from "../../store/checkout/cart";
+import { storageStore } from "../../store/storageStore";
 import { handleFetch } from "../handleFetch";
 export const getCheckoutSession = async () => {
-    if (!cartStore.checkoutSessionId) {
+    if (!storageStore.checkoutSessionId) {
         return {
             errors: [{ message: 'No checkout session id found' }],
             json: null,
         };
     }
     const searchParams = new URLSearchParams();
-    searchParams.set('checkoutSessionId', cartStore.checkoutSessionId);
+    searchParams.set('checkoutSessionId', storageStore.checkoutSessionId);
     const { errors, json } = await handleFetch(`/api/zonos-elements/get-checkout-session?${searchParams.toString()}`);
     return { errors, json };
 };

package/dist/collection/components/utils/api/placeTestOrder.js

@@ -1,11 +1,12 @@
 import { cartStore } from "../../store/checkout/cart";
+import { storageStore } from "../../store/storageStore";
 import { handleFetch } from "../handleFetch";
 import { logError } from "../logging/logError";
 export const placeTestOrder = async () => {
     var _a, _b;
     const shipToPartyId = (_a = cartStore.partiesData.find(party => party.type === 'DESTINATION')) === null || _a === void 0 ? void 0 : _a.id;
     const billToPartyId = (_b = cartStore.partiesData.find(party => party.type === 'PAYOR')) === null || _b === void 0 ? void 0 : _b.id;
-    const checkoutSessionId = cartStore.checkoutSessionId;
+    const checkoutSessionId = storageStore.checkoutSessionId;
     if (!checkoutSessionId || !billToPartyId || !shipToPartyId) {
         logError('Missing required data', {
             billToPartyId,

package/dist/collection/components/utils/api/prepCalculateLandedCost.js

@@ -1,5 +1,6 @@
 import { cartStore } from "../../store/checkout/cart";
 import { stripeStore } from "../../store/checkout/stripe";
+import { storageStore } from "../../store/storageStore";
 import { log } from "../logging/log";
 /**
  * Extract value from translated object
@@ -67,7 +68,7 @@ export const prepCartCalculateLandedCost = (cartId) => {
         // Use the first item's currency code
         cartCurrencyCode: (_a = cartStore.items[0]) === null || _a === void 0 ? void 0 : _a.currencyCode,
         cartId,
-        checkoutSessionId: cartStore.checkoutSessionId || '',
+        checkoutSessionId: storageStore.checkoutSessionId || '',
         contact: {
             companyName: stripeStore.companyName,
             email: stripeLinkData === null || stripeLinkData === void 0 ? void 0 : stripeLinkData.value.email,
@@ -160,7 +161,7 @@ export const prepCalculateLandedCost = () => {
             lastName: billingLastName,
             phone: translatedBillingAddress.phone,
         },
-        checkoutSessionId: cartStore.checkoutSessionId || '',
+        checkoutSessionId: storageStore.checkoutSessionId || '',
         contact: {
             companyName: stripeStore.companyName,
             email: stripeLinkData === null || stripeLinkData === void 0 ? void 0 : stripeLinkData.value.email,

package/dist/collection/components/utils/api/selectVarianceTest.js

@@ -0,0 +1,20 @@
+import { handleFetch } from "../handleFetch";
+import { filterValidTests } from "../varianceTest/filterValidTests";
+export 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;
+};

package/dist/collection/components/utils/buildCartUrl.js

@@ -0,0 +1,44 @@
+export 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()}`;
+};

package/dist/collection/components/utils/getLegacyQueryParams.js

@@ -0,0 +1,42 @@
+import { localizationStore } from "../store/hello/localization";
+import { getZCountryUrlParam } from "./hello/getZCountryUrlParam";
+import { log } from "./logging/log";
+export 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,
+    };
+};

package/dist/collection/components/utils/varianceTest/filterExpiredTests.js

@@ -0,0 +1,6 @@
+export 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;
+})) || [];

package/dist/collection/components/utils/varianceTest/filterValidTests.js

@@ -0,0 +1,23 @@
+import { VARIANT_TEST_KEY_EXPIRATION } from "../../store/storageStore";
+import { hasAtLeastOneAvailableTestKey } from "./hasAtLeastOneAvailableTestKey";
+import { availableTestKeys } from "../../../types/index";
+/**
+ * Filter the response to only include test keys and variants key that we support
+ */
+export const filterValidTests = (testKeys) => {
+    // Type guard the response to ensure it matches the expected structure
+    if (!hasAtLeastOneAvailableTestKey(testKeys)) {
+        return [];
+    }
+    // Filter the response to only include test keys that we support
+    return testKeys
+        .filter(item => {
+        var _a;
+        const isTestKeyValidButNoSelectedVariantKey = availableTestKeys[item.testKey] && !item.selectedVariantKey;
+        const validTestKeyWithSelectedVariantKey = item.selectedVariantKey &&
+            !!((_a = availableTestKeys[item.testKey]) === null || _a === void 0 ? void 0 : _a['availableVariants'].includes(item.selectedVariantKey));
+        return (isTestKeyValidButNoSelectedVariantKey ||
+            validTestKeyWithSelectedVariantKey);
+    })
+        .map(item => (Object.assign(Object.assign({}, item), { expiresAt: item.expiresAt || Date.now() + VARIANT_TEST_KEY_EXPIRATION, selectedVariantKey: item.selectedVariantKey || null })));
+};

package/dist/collection/components/utils/varianceTest/getSelectedTestVariant.js

@@ -0,0 +1,6 @@
+import { storageStore } from "../../store/storageStore";
+export 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;
+};

package/dist/collection/components/utils/varianceTest/hasAtLeastOneAvailableTestKey.js

@@ -0,0 +1,14 @@
+import { log } from "../logging/log";
+import { availableTestKeys } from "../../../types/index";
+/**
+ * Check if the response contains at least one available test key that we support
+ */
+export const hasAtLeastOneAvailableTestKey = (rawResponse) => {
+    const hasAvailableTestKey = !!rawResponse.find(item => item.testKey in availableTestKeys);
+    if (!hasAvailableTestKey) {
+        log('No available test key found in response', 'info', {
+            response: rawResponse,
+        });
+    }
+    return !!rawResponse.find(item => item.testKey in availableTestKeys);
+};

package/dist/collection/components/utils/varianceTest/isInAvailableTestKey.js

@@ -0,0 +1,4 @@
+import { availableTestKeys } from "../../../types/index";
+export const isInAvailableTestKey = (testKey) => {
+    return testKey in availableTestKeys;
+};

package/dist/collection/components/utils/varianceTest/isTestEnabled.js

@@ -0,0 +1,4 @@
+import { zonosStore } from "../../store/zonosStore";
+export const isTestEnabled = (testKey) => {
+    return zonosStore.enabledVariantTestKeys.includes(testKey);
+};

package/dist/collection/components/utils/varianceTest/isTestKeysAllVariantSelected.js

@@ -0,0 +1,6 @@
+/**
+ * Typeguard to check if all variant test keys are selected.
+ */
+export const isTestKeysAllVariantSelected = (variantTestKeys) => {
+    return variantTestKeys.every(v => !!v.selectedVariantKey);
+};

package/dist/collection/components/utils/varianceTest/mergeTest.js

@@ -0,0 +1,13 @@
+import { VARIANT_TEST_KEY_EXPIRATION } from "../../store/storageStore";
+export 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,
+        };
+    });
+};

package/dist/collection/scripts/_getZonosQaUrl.js

@@ -24,7 +24,7 @@ export const getZonosQaUrl = () => {
     }
     // when local demo app is running, it needs to use the local dev script unless the qaUrl is set
     if (!qaUrl &&
-        ['dev.demo.elements.zonos.com'].includes(window.location.hostname)) {
+        ['dev.demo.elements.zonos.com', 'dev.checkout.elements.zonos.com'].includes(window.location.hostname)) {
         return 'https://dev.elements.zonos.com';
     }
     if (!qaUrl) {
@@ -70,7 +70,7 @@ export const getZonosQaUrlApi = () => {
     const qaUrl = _qaUrlApi || _qaUrl;
     // when local demo app is running, it needs to use the local dev script unless the qaUrl is set
     if (!qaUrl &&
-        ['dev.demo.elements.zonos.com'].includes(window.location.hostname)) {
+        ['dev.demo.elements.zonos.com', 'dev.checkout.elements.zonos.com'].includes(window.location.hostname)) {
         return 'https://dev.demo.elements.zonos.com';
     }
     if (!qaUrl) {

package/dist/collection/types/checkout/api/VarianceTest.js

@@ -0,0 +1,8 @@
+export const availableTestKeys = {
+    hosted_vs_native: {
+        availableVariants: ['hosted', 'native'],
+    },
+    test_A_B: {
+        availableVariants: ['A', 'B'],
+    },
+};