@zonos/elements 1.3.201 → 1.3.203

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

@@ -3,17 +3,19 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0993f42d.js');
-const cart = require('./cart-e73cde62.js');
-const zonosStore = require('./zonosStore-c466b127.js');
+const cart = require('./cart-0d91ad0b.js');
+const localization = require('./localization-2f17c95f.js');
+const zonosStore = require('./zonosStore-9264749e.js');
 const handleFetch = require('./handleFetch-969d05d8.js');
 const shouldRenderTaxIdInput = require('./shouldRenderTaxIdInput-9b8a8de1.js');
 const TaxId = require('./TaxId-12acedde.js');
 const classes = require('./classes-b7918f56.js');
-const getBorderRadius = require('./getBorderRadius-3d0a563e.js');
+const getBorderRadius = require('./getBorderRadius-8d3b1049.js');
 const RemoveIcon$2 = require('./RemoveIcon-081ac073.js');
-const isDarkColor = require('./isDarkColor-92a10a85.js');
-const debounce$1 = require('./debounce-d393fafe.js');
+const isDarkColor = require('./isDarkColor-bcf49625.js');
+const debounce$1 = require('./debounce-94e1b7ff.js');
 const helpers = require('./helpers-5bdbb68c.js');
+require('./VarianceTest-0cb1e118.js');
 
 const zonosAddressCss = ".sc-zonos-address-h{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-address-h *.sc-zonos-address{font-family:var(--zonos--font-family, Inter), Inter}.sc-zonos-address-h img.sc-zonos-address{max-width:100%}.sc-zonos-address-h dl.sc-zonos-address,.sc-zonos-address-h dd.sc-zonos-address,.sc-zonos-address-h h1.sc-zonos-address,.sc-zonos-address-h h2.sc-zonos-address,.sc-zonos-address-h h3.sc-zonos-address,.sc-zonos-address-h h4.sc-zonos-address,.sc-zonos-address-h h5.sc-zonos-address,.sc-zonos-address-h h6.sc-zonos-address,.sc-zonos-address-h hr.sc-zonos-address,.sc-zonos-address-h figure.sc-zonos-address,.sc-zonos-address-h p.sc-zonos-address,.sc-zonos-address-h pre.sc-zonos-address{margin:0}.sc-zonos-address-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-address-h .zonos--title.sc-zonos-address{margin-bottom:16px}.sc-zonos-address-h .zonos--company-name-input.sc-zonos-address{margin-bottom:16px}.sc-zonos-address-h zonos-banner.sc-zonos-address{margin-top:8px}";
 const ZonosAddressStyle0 = zonosAddressCss;
@@ -23,6 +25,7 @@ const ZonosAddress$1 = class {
         index.registerInstance(this, hostRef);
         this.invalidCharacters = index.createEvent(this, "invalidCharacters", 7);
         this.taxIdChanged = index.createEvent(this, "taxIdChanged", 7);
+        this.onStoreCheckoutSessionIdChangedSubscription = () => { };
         /**
          * Google autocomplete overlay is conflict with our button, this is to adjust z index of the autocomplete
          */
@@ -31,6 +34,14 @@ const ZonosAddress$1 = class {
          * Check if the tracking event is sent
          */
         this.trackingSent = false;
+        this.onStoreCheckoutSessionIdChanged = () => {
+            const onCheckoutSessionIdChange = () => {
+                this.checkoutSessionId = localization.storageStore.checkoutSessionId;
+            };
+            // Trigger it once on init because onChange doesn't get triggered on initial load
+            onCheckoutSessionIdChange();
+            this.onStoreCheckoutSessionIdChangedSubscription = localization.storageStoreOnChange('checkoutSessionId', onCheckoutSessionIdChange);
+        };
         this.type = undefined;
         this.titleText = undefined;
         this.defaultAddress = [];
@@ -38,7 +49,7 @@ const ZonosAddress$1 = class {
         this.stripe = window.Zonos.stripe;
         this.isDirtyAddress = false;
         this.isAddressFilled = false;
-        this.checkoutSessionId = cart.cartStore.checkoutSessionId;
+        this.checkoutSessionId = localization.storageStore.checkoutSessionId;
     }
     getStripeAddressInstance() {
         if (this.type === 'billing') {
@@ -67,7 +78,7 @@ const ZonosAddress$1 = class {
     }
     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 (!cart.cartStore.checkoutSessionId) {
+        if (!localization.storageStore.checkoutSessionId) {
             return;
         }
         // Only need to track the event if the shipping address is filled
@@ -75,7 +86,7 @@ const ZonosAddress$1 = class {
             !this.trackingSent &&
             this.type === 'shipping') {
             this.trackingSent = true;
-            const checkoutSessionId = cart.cartStore.checkoutSessionId;
+            const checkoutSessionId = localization.storageStore.checkoutSessionId;
             void cart.trackConversionEvent({
                 checkoutSessionId,
                 eventName: 'checkout_customerInfoFilled',
@@ -99,7 +110,7 @@ const ZonosAddress$1 = class {
         // remove phone from default address if it's not provided, stripe
         // will throw error if key phone exist and its value is empty or 'undefined'.
         const defaultAddress = this.defaultAddress.map(address => (Object.assign(Object.assign({}, address), { name: address.name, phone: address.phone || undefined })));
-        const shippableCountries = cart.localizationStore.shippingZoneCountries;
+        const shippableCountries = localization.localizationStore.shippingZoneCountries;
         const shippingZone = shippableCountries
             ? Object.values(shippableCountries).map(country => country.code)
             : [];
@@ -107,7 +118,7 @@ const ZonosAddress$1 = class {
         const checkoutAllCountries = new URLSearchParams(window.location.search).has('zonosCheckoutAllCountries');
         const allowedCountries = this.type === 'shipping' ? shippingZone : [];
         const defaultAddressCountry = (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.country) ||
-            cart.getFallbackDefaultCountryCode(allowedCountries);
+            localization.getFallbackDefaultCountryCode(allowedCountries);
         handleFetch.log(`Stripe country code: ${defaultAddressCountry}`, 'info');
         const addressElement = stripeElements.create('address', {
             allowedCountries: checkoutAllCountries ? [] : allowedCountries,
@@ -224,7 +235,7 @@ const ZonosAddress$1 = class {
             return null;
         }
         const taxIdInputInfo = TaxId.shipToTaxIdLabels[countryCode];
-        return (index.h("div", { class: "zonos--tax-id-input" }, index.h("zonos-stripe-input", { inputLabel: cart.translate(taxIdInputInfo.friendlyName), inputPlaceholder: taxIdInputInfo.placeholder, inputValue: cart.stripeStore.taxId || '', isError: !!this.taxIdErrorMessage, onInputChange: (event) => {
+        return (index.h("div", { class: "zonos--tax-id-input" }, index.h("zonos-stripe-input", { inputLabel: localization.translate(taxIdInputInfo.friendlyName), inputPlaceholder: taxIdInputInfo.placeholder, inputValue: cart.stripeStore.taxId || '', isError: !!this.taxIdErrorMessage, onInputChange: (event) => {
                 cart.stripeStore.taxId = event.detail;
                 this.taxIdChanged.emit(event.detail);
             } }), this.taxIdErrorMessage && (index.h("zonos-text", { textColor: 'red-600', type: "caption" }, this.taxIdErrorMessage))));
@@ -239,7 +250,7 @@ const ZonosAddress$1 = class {
         if (!isCompanyNameEnabled) {
             return null;
         }
-        return (index.h("zonos-stripe-input", { class: "zonos--company-name-input", inputLabel: cart.translate('Company name (optional)'), inputValue: cart.stripeStore.companyName, onInputChange: (event) => {
+        return (index.h("zonos-stripe-input", { class: "zonos--company-name-input", inputLabel: localization.translate('Company name (optional)'), inputValue: cart.stripeStore.companyName, onInputChange: (event) => {
                 cart.stripeStore.companyName = event.detail;
             } }));
     }
@@ -247,6 +258,8 @@ const ZonosAddress$1 = class {
         // 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;
@@ -255,15 +268,16 @@ const ZonosAddress$1 = class {
                 stripeAddressEventData.value.address.line1.length > 0;
         // @Watch doesn't get trigger on initial load
         void this.watchInitStripe();
+        this.onStoreCheckoutSessionIdChanged();
     }
     render() {
         var _a;
-        this.checkoutSessionId = cart.cartStore.checkoutSessionId;
+        this.checkoutSessionId = localization.storageStore.checkoutSessionId;
         if ((_a = cart.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 (index.h(index.Host, { key: 'ebd6b34dfcb486e1746fbc306e2e413d03290d50', class: "zonos--address zonos--elements" }, index.h("zonos-text", { key: '68e7f0fa37ca7efd4d833b32d4c27cda29521871', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), this.renderCompanyNameInput(), this.renderTaxIdInput(), index.h("div", { key: '5e6d4b3798c91def3f3a6ae5ac12f1a2ccca272b', class: "zonos--address-component" })));
+        return (index.h(index.Host, { key: '6cb58defa44e55a88bdb8ad3b1b2e96033337fec', class: "zonos--address zonos--elements" }, index.h("zonos-text", { key: '2708affaeb700f6c256b38285696d3eaffa1d1ea', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), this.renderCompanyNameInput(), this.renderTaxIdInput(), index.h("div", { key: '290de47b8579a70f997ead2ab3ada123dfa4d204', class: "zonos--address-component" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -287,7 +301,7 @@ const ZonosAddressDisplay = class {
     render() {
         var _a;
         const { city, country, email, line1, line2, name, phone, postal_code, state, } = this.currentAddress;
-        const shippingZoneCountry = (_a = cart.localizationStore.shippingZoneCountries) === null || _a === void 0 ? void 0 : _a[country];
+        const shippingZoneCountry = (_a = localization.localizationStore.shippingZoneCountries) === null || _a === void 0 ? void 0 : _a[country];
         const renderEnteredInfoText = ({ bold, content, }) => {
             const textColor = shouldRenderTaxIdInput.isTextContainsNonLatinChars(content)
                 ? 'red-600'
@@ -295,8 +309,8 @@ const ZonosAddressDisplay = class {
             return (index.h("zonos-text", { textColor: textColor, type: bold ? 'boldLabel' : 'body' }, content));
         };
         return (index.h(index.Host, { class: "zonos--address-form zonos--elements" }, index.h("div", { class: "zonos--title" }, index.h("zonos-text", { textColor: "gray-700", type: "smallHeader" }, this.addressType === 'shipping'
-            ? cart.translate('Shipping')
-            : cart.translate('Billing'))), index.h("div", { class: "zonos--address-group" }, name && (index.h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ bold: true, content: name }))), email && (index.h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: email }))), phone && (index.h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: phone }))), line1 && (index.h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: line1 }))), line2 && (index.h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: line2 }))), index.h("div", { class: "zonos--address-line" }, city && renderEnteredInfoText({ content: city }), state && renderEnteredInfoText({ content: state }), postal_code && renderEnteredInfoText({ content: postal_code })), shippingZoneCountry && (index.h("div", { class: "zonos--address-line" }, index.h("zonos-country-flag", { class: "zonos--country-flag", countryCode: shippingZoneCountry.code }), ' ', renderEnteredInfoText({
+            ? localization.translate('Shipping')
+            : localization.translate('Billing'))), index.h("div", { class: "zonos--address-group" }, name && (index.h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ bold: true, content: name }))), email && (index.h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: email }))), phone && (index.h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: phone }))), line1 && (index.h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: line1 }))), line2 && (index.h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: line2 }))), index.h("div", { class: "zonos--address-line" }, city && renderEnteredInfoText({ content: city }), state && renderEnteredInfoText({ content: state }), postal_code && renderEnteredInfoText({ content: postal_code })), shippingZoneCountry && (index.h("div", { class: "zonos--address-line" }, index.h("zonos-country-flag", { class: "zonos--country-flag", countryCode: shippingZoneCountry.code }), ' ', renderEnteredInfoText({
             content: shippingZoneCountry.displayName,
         }))))));
     }
@@ -334,14 +348,14 @@ const ZonosAddressForm = class {
         // get the rest of the name if it exists
         const lastName = name.split(' ').slice(1).join(' ') || '';
         return (index.h(index.Host, { key: '8b578737e33203a23563be7e9be0778deec99bbf', class: "zonos--address-form zonos--elements" }, index.h("div", { key: '793675a1348547bf3f781788956befe325191011', class: "zonos--title" }, index.h("zonos-text", { key: '13de35cb0a7c98a48342e3fb86ae3ade9f5b88d9', textColor: "gray-700", type: "smallHeader" }, this.addressType === 'shipping'
-            ? cart.translate('Shipping')
-            : cart.translate('Billing'))), index.h("div", { key: '2c5de5b5283fb99ee5f8b61d7a217177986fc2db', class: "zonos--address-group" }, index.h("div", { key: '23bf3c893071000d5995a5f175867bab11929193', class: "zonos--contact" }, index.h("zonos-text", { key: '7cdfe2a84ebad89ba5b16498d75def99cf392384', type: "label" }, cart.translate('Contact')), index.h("zonos-input", { key: '1c39c38767fd306c5eb1164cdc989b8291209cf0', class: "zonos--form-email", inputLabel: cart.translate('Email'), inputValue: this.currentAddress.email, isDisabled: true }), index.h("div", { key: 'cbdf61217125e22b1a6cec9a340ef0aca2c75670', class: "zonos--name zonos--address-row" }, index.h("zonos-input", { key: '360c99e7b2c6caa64580d5768b5bb53368927275', class: "zonos--form-first-name", inputLabel: cart.translate('First name'), inputValue: firstName, isError: shouldRenderTaxIdInput.isTextContainsNonLatinChars(firstName), onInputChange: e => this.onInputChange({
+            ? localization.translate('Shipping')
+            : localization.translate('Billing'))), index.h("div", { key: '2c5de5b5283fb99ee5f8b61d7a217177986fc2db', class: "zonos--address-group" }, index.h("div", { key: '23bf3c893071000d5995a5f175867bab11929193', class: "zonos--contact" }, index.h("zonos-text", { key: '7cdfe2a84ebad89ba5b16498d75def99cf392384', type: "label" }, localization.translate('Contact')), index.h("zonos-input", { key: '1c39c38767fd306c5eb1164cdc989b8291209cf0', class: "zonos--form-email", inputLabel: localization.translate('Email'), inputValue: this.currentAddress.email, isDisabled: true }), index.h("div", { key: 'cbdf61217125e22b1a6cec9a340ef0aca2c75670', class: "zonos--name zonos--address-row" }, index.h("zonos-input", { key: '360c99e7b2c6caa64580d5768b5bb53368927275', class: "zonos--form-first-name", inputLabel: localization.translate('First name'), inputValue: firstName, isError: shouldRenderTaxIdInput.isTextContainsNonLatinChars(firstName), onInputChange: e => this.onInputChange({
                 key: 'name',
                 value: `${e.detail} ${lastName}`,
-            }) }), index.h("zonos-input", { key: '8ce5fa5c15c6f7928339ea10009ce0e68954a91f', class: "zonos--form-last-name", inputLabel: cart.translate('Last name'), inputValue: lastName, isError: shouldRenderTaxIdInput.isTextContainsNonLatinChars(lastName), onInputChange: e => this.onInputChange({
+            }) }), index.h("zonos-input", { key: '8ce5fa5c15c6f7928339ea10009ce0e68954a91f', class: "zonos--form-last-name", inputLabel: localization.translate('Last name'), inputValue: lastName, isError: shouldRenderTaxIdInput.isTextContainsNonLatinChars(lastName), onInputChange: e => this.onInputChange({
                 key: 'name',
                 value: `${firstName} ${e.detail}`,
-            }) }))), index.h("div", { key: '7b4fa2d3baa6cb257e7688e5ba6777123898b3fd', class: "zonos--address" }, index.h("zonos-text", { key: '9d5782331b2642755a755aeb7f98c9f4d87f9a20', type: "label" }, cart.translate('Address')), index.h("zonos-input", { key: 'a622025924ca86bdbf1d3c04b79e6dee172b4c42', class: "zonos--form-country", inputLabel: cart.translate('Country'), inputValue: country, isDisabled: true }), index.h("zonos-input", { key: 'f99b3a74db09ab5730878e80705b9aeac76bf800', class: "zonos--form-line1", inputLabel: cart.translate('Address line 1'), inputValue: line1, isError: shouldRenderTaxIdInput.isTextContainsNonLatinChars(line1), onInputChange: e => this.onInputChange({ key: 'line1', value: e.detail }) }), index.h("zonos-input", { key: '5d16aefa45a78045c87d166aaaec0255606e455e', class: "zonos--form-line2", inputLabel: cart.translate('Address line 2'), inputValue: line2, isError: shouldRenderTaxIdInput.isTextContainsNonLatinChars(line2), onInputChange: e => this.onInputChange({ key: 'line2', value: e.detail }) }), index.h("div", { key: 'dc166be9381142835d72e731cb38a718522a068a', class: "zonos--address-row" }, index.h("zonos-input", { key: '4f1a98f9d10ce0cff3ef18a3037a12382552b31d', class: "zonos--form-city", inputLabel: cart.translate('City'), inputValue: city, isError: shouldRenderTaxIdInput.isTextContainsNonLatinChars(city), onInputChange: e => this.onInputChange({ key: 'city', value: e.detail }) }), index.h("zonos-input", { key: 'd4f97900b5fe2e1619950a52d1d1f716a8bc19ff', class: "zonos--form-state", inputLabel: cart.translate('State/Province'), inputValue: state, isError: shouldRenderTaxIdInput.isTextContainsNonLatinChars(state), onInputChange: e => this.onInputChange({ key: 'state', value: e.detail }) })), index.h("zonos-input", { key: 'cf1eb0ca5cd15c8412a2e1246aaf2e39361dc733', class: "zonos--form-postal-code", inputLabel: cart.translate('Postal code'), inputValue: postal_code, isError: shouldRenderTaxIdInput.isTextContainsNonLatinChars(postal_code), onInputChange: e => this.onInputChange({ key: 'postal_code', value: e.detail }) }), index.h("zonos-input", { key: '7421c82847eded6bdbcce49ef8196124d8e50c1d', class: "zonos--form-phone", inputLabel: cart.translate('Phone number'), inputValue: phone, onInputChange: e => this.onInputChange({ key: 'phone', value: e.detail }) })))));
+            }) }))), index.h("div", { key: '7b4fa2d3baa6cb257e7688e5ba6777123898b3fd', class: "zonos--address" }, index.h("zonos-text", { key: '9d5782331b2642755a755aeb7f98c9f4d87f9a20', type: "label" }, localization.translate('Address')), index.h("zonos-input", { key: 'a622025924ca86bdbf1d3c04b79e6dee172b4c42', class: "zonos--form-country", inputLabel: localization.translate('Country'), inputValue: country, isDisabled: true }), index.h("zonos-input", { key: 'f99b3a74db09ab5730878e80705b9aeac76bf800', class: "zonos--form-line1", inputLabel: localization.translate('Address line 1'), inputValue: line1, isError: shouldRenderTaxIdInput.isTextContainsNonLatinChars(line1), onInputChange: e => this.onInputChange({ key: 'line1', value: e.detail }) }), index.h("zonos-input", { key: '5d16aefa45a78045c87d166aaaec0255606e455e', class: "zonos--form-line2", inputLabel: localization.translate('Address line 2'), inputValue: line2, isError: shouldRenderTaxIdInput.isTextContainsNonLatinChars(line2), onInputChange: e => this.onInputChange({ key: 'line2', value: e.detail }) }), index.h("div", { key: 'dc166be9381142835d72e731cb38a718522a068a', class: "zonos--address-row" }, index.h("zonos-input", { key: '4f1a98f9d10ce0cff3ef18a3037a12382552b31d', class: "zonos--form-city", inputLabel: localization.translate('City'), inputValue: city, isError: shouldRenderTaxIdInput.isTextContainsNonLatinChars(city), onInputChange: e => this.onInputChange({ key: 'city', value: e.detail }) }), index.h("zonos-input", { key: 'd4f97900b5fe2e1619950a52d1d1f716a8bc19ff', class: "zonos--form-state", inputLabel: localization.translate('State/Province'), inputValue: state, isError: shouldRenderTaxIdInput.isTextContainsNonLatinChars(state), onInputChange: e => this.onInputChange({ key: 'state', value: e.detail }) })), index.h("zonos-input", { key: 'cf1eb0ca5cd15c8412a2e1246aaf2e39361dc733', class: "zonos--form-postal-code", inputLabel: localization.translate('Postal code'), inputValue: postal_code, isError: shouldRenderTaxIdInput.isTextContainsNonLatinChars(postal_code), onInputChange: e => this.onInputChange({ key: 'postal_code', value: e.detail }) }), index.h("zonos-input", { key: '7421c82847eded6bdbcce49ef8196124d8e50c1d', class: "zonos--form-phone", inputLabel: localization.translate('Phone number'), inputValue: phone, onInputChange: e => this.onInputChange({ key: 'phone', value: e.detail }) })))));
     }
     static get watchers() { return {
         "translatedAddress": ["watchCurrentAddress"]
@@ -419,9 +433,9 @@ const ZonosAddressSuggestions = class {
         return segments;
     }
     render() {
-        return (index.h(index.Host, { key: '88eff73526172a10854d2ae18b5b54afd3fd4b28', class: "zonos--address-suggestions", role: "group", style: {
+        return (index.h(index.Host, { key: 'eeb520d24c5cebca1f425c9648a2bdf0269f74c9', class: "zonos--address-suggestions", role: "group", style: {
                 '--zonos--border-radius': getBorderRadius.getBorderRadius(),
-            } }, index.h("ul", { key: 'f55c95ab39906d2bcb6edc6d5379ec6c70f5277a', "aria-label": "Suggestions", class: "wrapper", role: "listbox" }, !!this.localSuggestions.length && (index.h("li", { key: 'b7ca181e48f18ac7c0d2c8cfc1b05fec6df5827f', "aria-selected": false, class: "powered-by option", role: "option" }, index.h("div", { key: '07577044166b2cbfbec0cf96786266d74dd1c098', class: "powered-by-container" }, index.h("zonos-text", { key: '3780f4763666ac08cfe7083749b5f781b74e4e66', type: "caption" }, "Suggestions powered by"), index.h("zonos-text", { key: '73c5d1db8a235cae3ebc2af0eba89d91ade8a6a1', type: "semiBoldLabel" }, "Google")), index.h("zonos-button", { key: '6d6058329ced6bae0f04ce4e80da07506f706847', "aria-label": "Clear suggestions", icon: index.h("zonos-icon", { content: RemoveIcon$1 }), noBackground: true, onClick: () => {
+            } }, index.h("ul", { key: 'f7ac29ef14417f8c86dbafcf840204f4c964b3ad', "aria-label": "Suggestions", class: "wrapper", role: "listbox" }, !!this.localSuggestions.length && (index.h("li", { key: '13d34e64d8bd7711268a1f5641d0c868a89b949c', "aria-selected": false, class: "powered-by option", role: "option" }, index.h("div", { key: '00f20bd5568762ee581462826410031273e808da', class: "powered-by-container" }, index.h("zonos-text", { key: 'fc61a8ec973fc2cdf1e137563617cfed0badbb12', type: "caption" }, "Suggestions powered by"), index.h("zonos-text", { key: '96343fe696ec0d3990ffebaf450306ca91624d04', type: "semiBoldLabel" }, "Google")), index.h("zonos-button", { key: 'e7c6a9e64c8976a3c3a521b0794d2e82c1919ce2', "aria-label": "Clear suggestions", icon: index.h("zonos-icon", { content: RemoveIcon$1 }), noBackground: true, onClick: () => {
                 this.localSuggestions = [];
             } }))), this.localSuggestions.map(suggestion => (
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events
@@ -593,7 +607,7 @@ const ZonosAddressUpdateDialog = class {
         return (index.h(index.Host, { key: '655845cef04f4af526b1a1c4e49243c4f2b4c7f6', class: classes.classes([
                 'zonos--address-update-dialog zonos--elements',
                 this.isMobile && 'mobile',
-            ]) }, index.h("zonos-dialog", { key: 'eab429bb78ce6f05ba463d8748d7edd5499402fa', isLoading: this.dialogLoading, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeUpdateDialog.emit(), open: this.dialogOpen, width: "568px" }, index.h("div", { key: '08f0400e62addfcaffd91bf5200999d29bbd2da9', class: "zonos--body" }, index.h("div", { key: '8699df5e2f823e19066fbb552ba2a66c127c05e9', class: "zonos--dialog-header" }, index.h("div", { key: '92e0ff932dcdb0e5b59ea34b688d1ef8e31bfeb3', class: "zonos--dialog-title" }, index.h("zonos-text", { key: 'aaac3375526bddb319ce7c8f49bde30da7210264', type: "title" }, cart.translate('Update your address')), index.h("zonos-button", { key: '474cc2421cd3150daa46bfe215da6ae7df9c6087', class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon$2.RemoveIcon }), noBackground: true, onClick: () => this.closeUpdateDialogHandler(), title: "Close checkout dialog" })), index.h("zonos-text", { key: '6d019250cce57e8b30dd790a184df7273bdb234f' }, cart.translate('To ensure delivery all address details must be in Latin characters.'))), index.h("div", { key: '80ee681844f4f4f43fce69d977b634b1fbc3d5f5', class: "zonos--group" }, index.h("zonos-text", { key: '940e510eceec156a74f32de84cf58ffebd796435', class: "zonos--what-you-entered", type: "semiBoldLabel" }, cart.translate('What you entered')), index.h("div", { key: 'f626127f5c399c29ab1022deb66aaee8f8a49601', class: "zonos--address-display-group" }, index.h("zonos-address-display", { key: '9dfcba1037325c3a1f9e82b8e4797e7872dd7e3f', addressType: "shipping", currentAddress: shipping }), billing && (index.h("zonos-address-display", { key: 'fee8ae2c6786d735133c2a0a42f3e3d40d7f9ea9', addressType: "billing", currentAddress: billing }))), index.h("div", { key: '5a82195018ff8cdfd1126f4424062a26c25ee757', class: "zonos--address-form-section" }, index.h("zonos-text", { key: 'f694dfad166697e4c034cea51057133b69b1c144', type: "semiBoldLabel" }, cart.translate('Translated address')), index.h("zonos-address-form", { key: '4a99c841cf4800de43c612cce3d56d956d02c22f', addressType: "shipping", class: "zonos--shipping-address-form", currentAddress: shipping, onAddressChange: e => {
+            ]) }, index.h("zonos-dialog", { key: 'eab429bb78ce6f05ba463d8748d7edd5499402fa', isLoading: this.dialogLoading, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeUpdateDialog.emit(), open: this.dialogOpen, width: "568px" }, index.h("div", { key: '08f0400e62addfcaffd91bf5200999d29bbd2da9', class: "zonos--body" }, index.h("div", { key: '8699df5e2f823e19066fbb552ba2a66c127c05e9', class: "zonos--dialog-header" }, index.h("div", { key: '92e0ff932dcdb0e5b59ea34b688d1ef8e31bfeb3', class: "zonos--dialog-title" }, index.h("zonos-text", { key: 'aaac3375526bddb319ce7c8f49bde30da7210264', type: "title" }, localization.translate('Update your address')), index.h("zonos-button", { key: '474cc2421cd3150daa46bfe215da6ae7df9c6087', class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon$2.RemoveIcon }), noBackground: true, onClick: () => this.closeUpdateDialogHandler(), title: "Close checkout dialog" })), index.h("zonos-text", { key: '6d019250cce57e8b30dd790a184df7273bdb234f' }, localization.translate('To ensure delivery all address details must be in Latin characters.'))), index.h("div", { key: '80ee681844f4f4f43fce69d977b634b1fbc3d5f5', class: "zonos--group" }, index.h("zonos-text", { key: '940e510eceec156a74f32de84cf58ffebd796435', class: "zonos--what-you-entered", type: "semiBoldLabel" }, localization.translate('What you entered')), index.h("div", { key: 'f626127f5c399c29ab1022deb66aaee8f8a49601', class: "zonos--address-display-group" }, index.h("zonos-address-display", { key: '9dfcba1037325c3a1f9e82b8e4797e7872dd7e3f', addressType: "shipping", currentAddress: shipping }), billing && (index.h("zonos-address-display", { key: 'fee8ae2c6786d735133c2a0a42f3e3d40d7f9ea9', addressType: "billing", currentAddress: billing }))), index.h("div", { key: '5a82195018ff8cdfd1126f4424062a26c25ee757', class: "zonos--address-form-section" }, index.h("zonos-text", { key: 'f694dfad166697e4c034cea51057133b69b1c144', type: "semiBoldLabel" }, localization.translate('Translated address')), index.h("zonos-address-form", { key: '4a99c841cf4800de43c612cce3d56d956d02c22f', addressType: "shipping", class: "zonos--shipping-address-form", currentAddress: shipping, onAddressChange: e => {
                 const address = e.detail;
                 this.translatedShippingAddressState =
                     this.buildTranslateAddressState({
@@ -607,7 +621,7 @@ const ZonosAddressUpdateDialog = class {
                         currentAddress: billing,
                         translatedAddress: address,
                     });
-            }, translatedAddress: this.translatedBillingAddressState })))), index.h("div", { key: '918c3271579c3fc7a7efff0473b0ccf48fb575a2', class: "zonos--group-btn" }, index.h("div", { key: 'f73be0c1124d3a4d340bc6e8512f6be8356c655d', class: "zonos--button-wrapper" }, index.h("zonos-button", { key: '172a6cc0a7b75afb400802ef6b87faae6e7e2483', class: "zonos--cancel-btn", onClick: () => this.closeUpdateDialogHandler(), variant: "subtle" }, cart.translate('Cancel')), index.h("zonos-button", { key: '8fd08bc79b60eb9a0064c06ff9d840b1ecb09123', backgroundColor: this.submitBtnColor, class: "zonos--update-btn", loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "sm", variant: submitBtnType }, cart.translate('Update address'))))))));
+            }, translatedAddress: this.translatedBillingAddressState })))), index.h("div", { key: '918c3271579c3fc7a7efff0473b0ccf48fb575a2', class: "zonos--group-btn" }, index.h("div", { key: 'f73be0c1124d3a4d340bc6e8512f6be8356c655d', class: "zonos--button-wrapper" }, index.h("zonos-button", { key: '172a6cc0a7b75afb400802ef6b87faae6e7e2483', class: "zonos--cancel-btn", onClick: () => this.closeUpdateDialogHandler(), variant: "subtle" }, localization.translate('Cancel')), index.h("zonos-button", { key: '8fd08bc79b60eb9a0064c06ff9d840b1ecb09123', backgroundColor: this.submitBtnColor, class: "zonos--update-btn", loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "sm", variant: submitBtnType }, localization.translate('Update address'))))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -794,6 +808,7 @@ const ZonosAddress = class {
         index.registerInstance(this, hostRef);
         this.invalidCharacters = index.createEvent(this, "invalidCharacters", 7);
         this.addressChange = index.createEvent(this, "addressChange", 7);
+        this.onStoreCheckoutSessionIdChangedSubscription = () => { };
         /**
          * Whether the suggestion is clicked
          */
@@ -869,7 +884,7 @@ const ZonosAddress = class {
                         (((_b = this.countryField) === null || _b === void 0 ? void 0 : _b.cityRequired) && !!(value === null || value === void 0 ? void 0 : value.trim()));
                     customErrors.city = '';
                     if (!isValid) {
-                        customErrors.city = cart.translate('The field is incomplete');
+                        customErrors.city = localization.translate('The field is incomplete');
                     }
                     break;
                 }
@@ -878,7 +893,7 @@ const ZonosAddress = class {
                         (((_d = this.countryField) === null || _d === void 0 ? void 0 : _d.stateRequired) && !!(value === null || value === void 0 ? void 0 : value.trim()));
                     customErrors.state = '';
                     if (!isValid) {
-                        customErrors.state = cart.translate('The field is incomplete');
+                        customErrors.state = localization.translate('The field is incomplete');
                     }
                     break;
                 }
@@ -889,7 +904,7 @@ const ZonosAddress = class {
                     });
                     customErrors.postalCode = '';
                     if (!isValid) {
-                        customErrors.postalCode = cart.translate('Your [zipLabel] is invalid', {
+                        customErrors.postalCode = localization.translate('Your [zipLabel] is invalid', {
                             zipLabel: ((_e = this.countryField) === null || _e === void 0 ? void 0 : _e.zipLabel) || 'ZIP',
                         });
                     }
@@ -899,7 +914,7 @@ const ZonosAddress = class {
                     const isValid = !!(value === null || value === void 0 ? void 0 : value.trim());
                     customErrors.firstName = '';
                     if (!isValid) {
-                        customErrors.firstName = cart.translate('Please provide your first name.');
+                        customErrors.firstName = localization.translate('Please provide your first name.');
                     }
                     break;
                 }
@@ -907,7 +922,7 @@ const ZonosAddress = class {
                     const isValid = !!(value === null || value === void 0 ? void 0 : value.trim());
                     customErrors.lastName = '';
                     if (!isValid) {
-                        customErrors.lastName = cart.translate('Please provide your last name.');
+                        customErrors.lastName = localization.translate('Please provide your last name.');
                     }
                     break;
                 }
@@ -915,7 +930,7 @@ const ZonosAddress = class {
                     const isValid = !!(value === null || value === void 0 ? void 0 : value.trim());
                     customErrors.line1 = '';
                     if (!isValid) {
-                        customErrors.line1 = cart.translate('The field is incomplete');
+                        customErrors.line1 = localization.translate('The field is incomplete');
                     }
                     break;
                 }
@@ -925,17 +940,17 @@ const ZonosAddress = class {
                         const isValid = !!(value === null || value === void 0 ? void 0 : value.trim());
                         customErrors.phone = '';
                         if (!isValid) {
-                            customErrors.phone = cart.translate('Please provide a mobile phone number.');
+                            customErrors.phone = localization.translate('Please provide a mobile phone number.');
                         }
                     }
                     else {
                         customErrors.phone = '';
                         // If the phone number is empty, set the error message
                         if (phoneValidateInfo.isEmpty) {
-                            customErrors.phone = cart.translate('Please provide a mobile phone number.');
+                            customErrors.phone = localization.translate('Please provide a mobile phone number.');
                         }
                         else if (phoneValidateInfo.wrongFormat) {
-                            customErrors.phone = cart.translate('Your mobile phone number is incomplete.');
+                            customErrors.phone = localization.translate('Your mobile phone number is incomplete.');
                         }
                     }
                     break;
@@ -948,6 +963,14 @@ const ZonosAddress = class {
                 cart.stripeStore.customBillingAddressErrors = customErrors;
             }
         };
+        this.onStoreCheckoutSessionIdChanged = () => {
+            const onCheckoutSessionIdChange = () => {
+                this.checkoutSessionId = localization.storageStore.checkoutSessionId;
+            };
+            // Trigger it once on init because onChange doesn't get triggered on initial load
+            onCheckoutSessionIdChange();
+            this.onStoreCheckoutSessionIdChangedSubscription = localization.storageStoreOnChange('checkoutSessionId', onCheckoutSessionIdChange);
+        };
         this.type = undefined;
         this.titleText = undefined;
         this.defaultAddress = [];
@@ -978,7 +1001,7 @@ const ZonosAddress = class {
         this.lastNameError = '';
         this.isFirstInitialization = true;
         this.addressService = null;
-        this.checkoutSessionId = cart.cartStore.checkoutSessionId;
+        this.checkoutSessionId = localization.storageStore.checkoutSessionId;
     }
     getStripeAddressInstance() {
         if (this.type === 'billing') {
@@ -1007,7 +1030,7 @@ const ZonosAddress = class {
     }
     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 (!cart.cartStore.checkoutSessionId) {
+        if (!localization.storageStore.checkoutSessionId) {
             return;
         }
         // Only need to track the event if the shipping address is filled
@@ -1015,7 +1038,7 @@ const ZonosAddress = class {
             !this.trackingSent &&
             this.type === 'shipping') {
             this.trackingSent = true;
-            const checkoutSessionId = cart.cartStore.checkoutSessionId;
+            const checkoutSessionId = localization.storageStore.checkoutSessionId;
             void cart.trackConversionEvent({
                 checkoutSessionId,
                 eventName: 'checkout_customerInfoFilled',
@@ -1086,7 +1109,7 @@ const ZonosAddress = class {
             return null;
         }
         const taxIdInputInfo = TaxId.shipToTaxIdLabels[countryCode];
-        return (index.h("div", { class: "zonos--tax-id-input" }, index.h("zonos-stripe-input", { error: this.taxIdErrorMessage, inputLabel: cart.translate(taxIdInputInfo.friendlyName), inputPlaceholder: taxIdInputInfo.placeholder, inputValue: cart.stripeStore.taxId || '', isError: !!this.taxIdErrorMessage, onInputChange: (event) => {
+        return (index.h("div", { class: "zonos--tax-id-input" }, index.h("zonos-stripe-input", { error: this.taxIdErrorMessage, inputLabel: localization.translate(taxIdInputInfo.friendlyName), inputPlaceholder: taxIdInputInfo.placeholder, inputValue: cart.stripeStore.taxId || '', isError: !!this.taxIdErrorMessage, onInputChange: (event) => {
                 cart.stripeStore.taxId = event.detail;
             } })));
     }
@@ -1100,7 +1123,7 @@ const ZonosAddress = class {
         if (!isCompanyNameEnabled) {
             return null;
         }
-        return (index.h("zonos-stripe-input", { class: "zonos--company-name-input", inputLabel: cart.translate('Company name (optional)'), inputValue: cart.stripeStore.companyName, onInputChange: (event) => {
+        return (index.h("zonos-stripe-input", { class: "zonos--company-name-input", inputLabel: localization.translate('Company name (optional)'), inputValue: cart.stripeStore.companyName, onInputChange: (event) => {
                 cart.stripeStore.companyName = event.detail;
             } }));
     }
@@ -1117,7 +1140,7 @@ const ZonosAddress = class {
         // Use data from Stripe address element if it's available (This may happen when user has already at shipping selection page but go back to customer page)
         if (stripeAddressEventData) {
             const countryCode = stripeAddressEventData.value.address.country ||
-                cart.localizationStore.selectedCountryCode ||
+                localization.localizationStore.selectedCountryCode ||
                 'US';
             this.setFormValues({
                 city: stripeAddressEventData.value.address.city,
@@ -1137,7 +1160,7 @@ const ZonosAddress = class {
         const firstDefaultAddress = this.defaultAddress[0];
         if (firstDefaultAddress) {
             const countryCode = firstDefaultAddress.address.country ||
-                cart.localizationStore.selectedCountryCode ||
+                localization.localizationStore.selectedCountryCode ||
                 'US';
             this.setFormValues({
                 city: firstDefaultAddress.address.city,
@@ -1153,7 +1176,7 @@ const ZonosAddress = class {
             this.initCountryField(countryCode);
             return;
         }
-        const countryCode = cart.localizationStore.selectedCountryCode || 'US';
+        const countryCode = localization.localizationStore.selectedCountryCode || 'US';
         // Set default values
         this.setFormValues({
             city: '',
@@ -1368,7 +1391,7 @@ const ZonosAddress = class {
         this.initDefaultCustomAddressForm();
     }
     shippingZonesChanged() {
-        this.shippingZones = cart.localizationStore.shippingZoneCountries;
+        this.shippingZones = localization.localizationStore.shippingZoneCountries;
         this.shipToCountries = Object.values(this.shippingZones || {})
             .map(country => ({
             label: country.displayName,
@@ -1394,7 +1417,7 @@ const ZonosAddress = class {
             value: region.interpayCode,
         }))
             .sort((a, b) => a.label.localeCompare(b.label));
-        return (index.h("div", { "aria-label": `${this.type} address form`, class: "zonos--custom-address-form", role: "form" }, index.h("zonos-stripe-input", { "aria-required": "true", class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.firstName : undefined, inputLabel: cart.translate('First name'), inputValue: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.firstName, onInputChange: (event) => {
+        return (index.h("div", { "aria-label": `${this.type} address form`, class: "zonos--custom-address-form", role: "form" }, index.h("zonos-stripe-input", { "aria-required": "true", class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.firstName : undefined, inputLabel: localization.translate('First name'), inputValue: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.firstName, onInputChange: (event) => {
                 this.validate({
                     type: this.type,
                     value: event.detail,
@@ -1408,7 +1431,7 @@ const ZonosAddress = class {
                  * Therefore, we must update the value after validation to ensure correct error state
                  */
                 this.firstName = event.detail;
-            }, required: true }), index.h("zonos-stripe-input", { "aria-required": "true", class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.lastName : undefined, inputLabel: cart.translate('Last name'), inputValue: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.lastName, onInputChange: (event) => {
+            }, required: true }), index.h("zonos-stripe-input", { "aria-required": "true", class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.lastName : undefined, inputLabel: localization.translate('Last name'), inputValue: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.lastName, onInputChange: (event) => {
                 this.validate({
                     type: this.type,
                     value: event.detail,
@@ -1427,9 +1450,9 @@ const ZonosAddress = class {
                 this.city = '';
                 this.state = '';
                 this.postalCode = '';
-            }, options: this.shipToCountries || [], required: true, selectLabel: cart.translate('Country'), selectedValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.country) ||
-                cart.localizationStore.selectedCountryCode ||
-                (firstCountry === null || firstCountry === void 0 ? void 0 : firstCountry.value), title: `${this.type} country` }), index.h("div", { class: "zonos--custom-address-form-line1-wrapper" }, index.h("zonos-stripe-input", { "aria-autocomplete": "list", "aria-controls": "autocomplete-search", "aria-required": "true", autoComplete: "shipping address-line1", class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.line1 : undefined, inputLabel: cart.translate('Address line 1'), inputValue: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.line1, name: "address-line1", onInputChange: (event) => {
+            }, options: this.shipToCountries || [], required: true, selectLabel: localization.translate('Country'), selectedValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.country) ||
+                localization.localizationStore.selectedCountryCode ||
+                (firstCountry === null || firstCountry === void 0 ? void 0 : firstCountry.value), title: `${this.type} country` }), index.h("div", { class: "zonos--custom-address-form-line1-wrapper" }, index.h("zonos-stripe-input", { "aria-autocomplete": "list", "aria-controls": "autocomplete-search", "aria-required": "true", autoComplete: "shipping address-line1", class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.line1 : undefined, inputLabel: localization.translate('Address line 1'), inputValue: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.line1, name: "address-line1", onInputChange: (event) => {
                 this.validate({
                     type: this.type,
                     value: event.detail,
@@ -1460,9 +1483,9 @@ const ZonosAddress = class {
             }, suggestions: this.addressSuggestions, type: this.type })), index.h("div", { "aria-label": "Additional address details", class: classes.classes([
                 'zonos--custom-address-form-additional-fields',
                 countryCode && this.isAddressLine1Entered ? 'zonos--show' : '',
-            ]), role: "group" }, index.h("zonos-stripe-input", { "aria-required": "false", autoComplete: "shipping address-line2", class: "zonos--custom-address-form-input", inputLabel: cart.translate(((_f = this.countryField) === null || _f === void 0 ? void 0 : _f.address2Label) || 'Address line 2'), inputValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.line2) || '', onInputChange: (event) => {
+            ]), role: "group" }, index.h("zonos-stripe-input", { "aria-required": "false", autoComplete: "shipping address-line2", class: "zonos--custom-address-form-input", inputLabel: localization.translate(((_f = this.countryField) === null || _f === void 0 ? void 0 : _f.address2Label) || 'Address line 2'), inputValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.line2) || '', onInputChange: (event) => {
                 this.line2 = event.detail;
-            } }), ((_g = this.countryField) === null || _g === void 0 ? void 0 : _g.cityShow) && (index.h("zonos-stripe-input", { "aria-required": ((_h = this.countryField) === null || _h === void 0 ? void 0 : _h.cityRequired) ? 'true' : 'false', autoComplete: "shipping address-level2", class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.city : undefined, inputLabel: cart.translate(((_j = this.countryField) === null || _j === void 0 ? void 0 : _j.cityLabel) || 'City'), inputValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.city) || '', name: "locality", onInputChange: (event) => {
+            } }), ((_g = this.countryField) === null || _g === void 0 ? void 0 : _g.cityShow) && (index.h("zonos-stripe-input", { "aria-required": ((_h = this.countryField) === null || _h === void 0 ? void 0 : _h.cityRequired) ? 'true' : 'false', autoComplete: "shipping address-level2", class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.city : undefined, inputLabel: localization.translate(((_j = this.countryField) === null || _j === void 0 ? void 0 : _j.cityLabel) || 'City'), inputValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.city) || '', name: "locality", onInputChange: (event) => {
                 this.validate({
                     type: this.type,
                     value: event.detail,
@@ -1490,9 +1513,9 @@ const ZonosAddress = class {
                  * Therefore, we must update the value after validation to ensure correct error state
                  */
                 this.state = event.detail;
-            }, options: stateOptions, required: (_o = this.countryField) === null || _o === void 0 ? void 0 : _o.stateRequired, selectLabel: cart.translate(((_p = this.countryField) === null || _p === void 0 ? void 0 : _p.stateLabel) || 'State'), selectedValue: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.state, title: `${this.type} state` })), ((_q = this.countryField) === null || _q === void 0 ? void 0 : _q.zipShow) && (index.h("zonos-stripe-input", { "aria-describedby": ((_r = this.countryField) === null || _r === void 0 ? void 0 : _r.zipFormat)
+            }, options: stateOptions, required: (_o = this.countryField) === null || _o === void 0 ? void 0 : _o.stateRequired, selectLabel: localization.translate(((_p = this.countryField) === null || _p === void 0 ? void 0 : _p.stateLabel) || 'State'), selectedValue: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.state, title: `${this.type} state` })), ((_q = this.countryField) === null || _q === void 0 ? void 0 : _q.zipShow) && (index.h("zonos-stripe-input", { "aria-describedby": ((_r = this.countryField) === null || _r === void 0 ? void 0 : _r.zipFormat)
                 ? `zip-format-${this.type}`
-                : undefined, "aria-required": ((_s = this.countryField) === null || _s === void 0 ? void 0 : _s.zipRequired) ? 'true' : 'false', autoComplete: "shipping postal-code", class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.postalCode : undefined, inputLabel: cart.translate(((_t = this.countryField) === null || _t === void 0 ? void 0 : _t.zipLabel) || 'Zip'), inputValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.postal_code) || '', onInputChange: (event) => {
+                : undefined, "aria-required": ((_s = this.countryField) === null || _s === void 0 ? void 0 : _s.zipRequired) ? 'true' : 'false', autoComplete: "shipping postal-code", class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.postalCode : undefined, inputLabel: localization.translate(((_t = this.countryField) === null || _t === void 0 ? void 0 : _t.zipLabel) || 'Zip'), inputValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.postal_code) || '', onInputChange: (event) => {
                 this.validate({
                     type: this.type,
                     value: event.detail,
@@ -1506,7 +1529,7 @@ const ZonosAddress = class {
                  * Therefore, we must update the value after validation to ensure correct error state
                  */
                 this.postalCode = event.detail;
-            }, required: (_u = this.countryField) === null || _u === void 0 ? void 0 : _u.zipRequired }))), index.h("zonos-stripe-phone-input", { autoComplete: "shipping tel", class: "zonos--custom-address-form-input", countryCode: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.country, countryOptions: (_v = zonosStore.zonosStore.genericSettings) === null || _v === void 0 ? void 0 : _v.countryFields, error: showError ? customAddressErrors.phone : undefined, inputLabel: cart.translate('Phone number'), inputValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.phone) || '', onInputValueChange: event => {
+            }, required: (_u = this.countryField) === null || _u === void 0 ? void 0 : _u.zipRequired }))), index.h("zonos-stripe-phone-input", { autoComplete: "shipping tel", class: "zonos--custom-address-form-input", countryCode: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.country, countryOptions: (_v = zonosStore.zonosStore.genericSettings) === null || _v === void 0 ? void 0 : _v.countryFields, error: showError ? customAddressErrors.phone : undefined, inputLabel: localization.translate('Phone number'), inputValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.phone) || '', onInputValueChange: event => {
                 const { isEmpty, phoneNumber, valid, wrongFormat } = event.detail;
                 // Validate the phone number
                 this.validate({
@@ -1537,6 +1560,8 @@ const ZonosAddress = class {
         // 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.zonosStore.checkoutAddressService) {
@@ -1545,7 +1570,7 @@ const ZonosAddress = class {
     }
     componentDidLoad() {
         const stripeAddressEventData = this.getStripeAddressInstance().stripeAddressEventData;
-        this.shipToCountries = Object.values(cart.localizationStore.shippingZoneCountries || {})
+        this.shipToCountries = Object.values(localization.localizationStore.shippingZoneCountries || {})
             .map(country => ({
             label: country.displayName,
             value: country.code,
@@ -1559,24 +1584,25 @@ const ZonosAddress = class {
         // @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 = cart.localizationStore.shippingZoneCountries;
+        this.shippingZones = localization.localizationStore.shippingZoneCountries;
         this.addressService = zonosStore.zonosStore.checkoutAddressService;
-        this.checkoutSessionId = cart.cartStore.checkoutSessionId;
         if ((_a = cart.stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.complete) {
             this.isAddressFilled = true;
         }
         // Only set country if custom address form is enabled
-        if (!this.country && cart.localizationStore.selectedCountryCode) {
-            this.country = cart.localizationStore.selectedCountryCode;
+        if (!this.country && localization.localizationStore.selectedCountryCode) {
+            this.country = localization.localizationStore.selectedCountryCode;
         }
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (index.h(index.Host, { key: 'bb1f01c899ecdc1ed52eb8be7a680fdbb2ce9a7b', class: classes.classes([
+        return (index.h(index.Host, { key: '7a766af62acc47886e716ac3c52c1457eae04545', class: classes.classes([
                 'zonos--address zonos--elements',
                 `zonos--${this.type}-address`,
-            ]) }, index.h("zonos-text", { key: 'f6ad6d23ec141fe192908b639802f69ad565958e', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderCustomAddressForm()));
+            ]) }, index.h("zonos-text", { key: '224a78f8d1e02e2b0d7c95eafe9a1d4354fb5f73', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderCustomAddressForm()));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -1791,7 +1817,7 @@ const ZonosLinkAuthentication = class {
         const renderEmailAddress = () => {
             var _a;
             if (cart.cartStore.isStagingMode) {
-                return (index.h("zonos-stripe-input", { inputLabel: cart.translate('Email'), inputValue: this.defaultEmail ||
+                return (index.h("zonos-stripe-input", { inputLabel: localization.translate('Email'), inputValue: this.defaultEmail ||
                         ((_a = cart.stripeStore.stripeLinkEventData) === null || _a === void 0 ? void 0 : _a.value.email) ||
                         '', isError: this.isEmailError, onBlur: () => {
                         var _a;
@@ -1809,7 +1835,7 @@ const ZonosLinkAuthentication = class {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
         return (index.h(index.Host, { class: "zonos--link-authentication zonos--elements", style: {
                 '--zonos--border-radius': getBorderRadius.getBorderRadius(),
-            } }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText), renderEmailAddress(), this.isEmailError && (index.h("zonos-text", { textColor: "red-600" }, cart.translate('Please enter a valid email address.')))));
+            } }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText), renderEmailAddress(), this.isEmailError && (index.h("zonos-text", { textColor: "red-600" }, localization.translate('Please enter a valid email address.')))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -7840,24 +7866,24 @@ const ZonosStripePhoneInput = class {
                 .filter(Boolean)
                 .sort((a, b) => a.displayName.localeCompare(b.displayName))
             : [];
-        return (index.h(index.Host, { key: 'c7ca4076eb70b166979d21074d068912af1496c5', class: classes.classes([
+        return (index.h(index.Host, { key: '0d4501947787cbafe38acb60fb5ee7519b6d1c73', class: classes.classes([
                 'zonos--phone-input zonos--elements',
                 isDark && 'dark',
-            ]), "data-theme": isDark ? 'DARK' : 'LIGHT', style: Object.assign({ '--zonos--border-radius': getBorderRadius.getBorderRadius(), '--zonos--font-family': zonosStore.zonosStoreFontFamily(), '--zonos--font-size': `${fontSize}px`, '--zonos--primary-color': secondaryColor }, (this.minWidth ? { '--zonos--min-width': this.minWidth } : {})) }, index.h("div", { key: '5460d79c86d34daf94538f063274c45ae3be2239', class: classes.classes([
+            ]), "data-theme": isDark ? 'DARK' : 'LIGHT', style: Object.assign({ '--zonos--border-radius': getBorderRadius.getBorderRadius(), '--zonos--font-family': zonosStore.zonosStoreFontFamily(), '--zonos--font-size': `${fontSize}px`, '--zonos--primary-color': secondaryColor }, (this.minWidth ? { '--zonos--min-width': this.minWidth } : {})) }, index.h("div", { key: 'c3e0f9655a39a5bb3d838634754be2af60a24a10', class: classes.classes([
                 'zonos--label-wrapper',
                 this.disabled && 'disabled',
                 this.isFocused && 'focused',
                 hasContent && 'has-content',
                 this.error && 'has-error',
                 this.inputLabel && 'has-label',
-            ]) }, index.h("select", { key: '290d89088b9a800b31ed19cfe3de6831322a3f5a', class: "zonos--select", disabled: this.disabled, onBlur: this.handleBlur, onChange: this.handleCountryChange, onFocus: this.handleFocus }, countryOptionsList.map(option => {
+            ]) }, index.h("select", { key: '1a58471117f6748d511498e016814bd907e8775f', class: "zonos--select", disabled: this.disabled, onBlur: this.handleBlur, onChange: this.handleCountryChange, onFocus: this.handleFocus }, countryOptionsList.map(option => {
             var _a;
             return (index.h("option", { key: option.countryCode, selected: option.countryCode === ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.countryCode), value: option.countryCode }, option.displayName, " (+", option.phoneCode, ")"));
-        })), index.h("div", { key: 'b0271d3453869ed79a36d62f5f6bacb22a509b46', class: "zonos--input-group" }, index.h("div", { key: '49486c915fa2f65878a6f8ab73c48997e4ba1461', class: "zonos--select-wrapper" }, index.h("div", { key: '63412e8077e062efef5f42c3a77e583ade435b53', class: "zonos--country-select" }, index.h("div", { key: '5c073598dfeaa0c8de68f07b1a7789f4a56a24c8', class: "zonos--country-select-content" }, this.selectedCountry && (index.h("div", { key: '8a32922d75343005fde7446736746cd531ff63f8', class: "zonos--country-select-selected" }, index.h("div", { key: '859cdbc4c1879c38f0c848ff42b38bc5492d3e96', class: "zonos--country-flag-wrapper" }, index.h("zonos-country-flag", { key: '9167a7c586e2d693bfdcad7773df60a324600be7', class: "zonos--country-flag", countryCode: this.selectedCountry.countryCode })), index.h("div", { key: 'b39dcadb22202d866fc8e1217bbe2e17704e2300', class: "zonos--country-code" }, "+", this.selectedCountry.phoneCode))), index.h("div", { key: '4b0a4ce8c94e6e3125cfde55542b38efb6a8a787', class: "zonos--select-chevron-wrapper" }, index.h("zonos-icon", { key: '25322152ca9550a8b2e667f8f993c38a972aa9ce', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon$1, iconColor: "gray-800" }))))), index.h("div", { key: 'c6a93ba0656e09a154c3d91327f3573e0288234b', class: classes.classes([
+        })), index.h("div", { key: '9c785521e095aae0cfc8af3ea90e4924c97202ac', class: "zonos--input-group" }, index.h("div", { key: 'b7fdd9db255ce33f3b6d3a982162c8286963324c', class: "zonos--select-wrapper" }, index.h("div", { key: '5d378436580df53793b1508af5e34bd43ba33ddf', class: "zonos--country-select" }, index.h("div", { key: '94628459db88e355b1c62b74cfcb48ec03022d4e', class: "zonos--country-select-content" }, this.selectedCountry && (index.h("div", { key: '96b332ed9c62413887f96f38ce26cb05b81a3132', class: "zonos--country-select-selected" }, index.h("div", { key: 'b9e5bda55328f57e15afd349789233e3c28d2bf9', class: "zonos--country-flag-wrapper" }, index.h("zonos-country-flag", { key: 'fc595df21c09553dc8ffb7fe79c3043831e65298', class: "zonos--country-flag", countryCode: this.selectedCountry.countryCode })), index.h("div", { key: '6c792c383acf3ccac02be6b954a7eb18bcdda817', class: "zonos--country-code" }, "+", this.selectedCountry.phoneCode))), index.h("div", { key: '970b9f6e18152e04375a248669fd7314088bcd2e', class: "zonos--select-chevron-wrapper" }, index.h("zonos-icon", { key: '1da5919014eee0e34b60d1df08e83d44ad20d5c2', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon$1, iconColor: "gray-800" }))))), index.h("div", { key: '7f0c215ddfb59c8e3c4413e44941a477a8adc6d6', class: classes.classes([
                 'zonos--input-container',
                 this.inputLabel && 'has-label',
                 hasContent && 'has-content',
-            ]) }, index.h("input", Object.assign({ key: '49246ff464685feaa9414d1e7b36f55b82fff564' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: "zonos--floated-input", disabled: this.disabled, id: this.inputId, onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handlePhoneChange, placeholder: ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.phonePlaceholder) || '', ref: el => (this.inputRef = el), type: "tel" })), this.inputLabel && (index.h("div", { key: '653d278b7ffc634bc7892d54c8fcab7b7626f80e', class: "zonos--floated-label" }, index.h("label", { key: 'c637ddca7164396d57e8a5eaf98b0e523ee27258', htmlFor: this.inputId }, this.inputLabel || cart.translate('Phone number'))))))), this.error && (index.h("zonos-text", { key: 'dcc70c068fef73e804eba1f134673168a0bbaf90', textColor: "red-600" }, this.error))));
+            ]) }, index.h("input", Object.assign({ key: 'e3ce0b598baf78452eddaab38c80bb4f0c548a5a' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: "zonos--floated-input", disabled: this.disabled, id: this.inputId, onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handlePhoneChange, placeholder: ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.phonePlaceholder) || '', ref: el => (this.inputRef = el), type: "tel" })), this.inputLabel && (index.h("div", { key: 'a108f2796571f9d8a4201d1906b2381b89d14bc2', class: "zonos--floated-label" }, index.h("label", { key: '50d308311270bbd8635bb7848495ee4aaa2a0cac', htmlFor: this.inputId }, this.inputLabel || localization.translate('Phone number'))))))), this.error && (index.h("zonos-text", { key: '27b0233f9241ce68348b2efd1c1b525d083363e5', textColor: "red-600" }, this.error))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -7948,14 +7974,14 @@ const ZonosStripeSelect = class {
         const fontSize = zonosStore.zonosStore.appearance.fontSizeInputValue || 16;
         const hasContent = this.internalValue || this.selectPlaceholder;
         const showClearButton = this.isClearable && this.internalValue && !this.isDisabled;
-        return (index.h(index.Host, { key: 'f5b178d5cbd48e9aff8701764a1fde4de03a6569', class: classes.classes([
+        return (index.h(index.Host, { key: '18d7ba03b9136af8614874b13b9ac3ce85f7c0d0', class: classes.classes([
                 'zonos--select zonos--elements',
                 isDark && 'dark',
                 this.isError && 'has-error',
-            ]), "data-theme": isDark ? 'DARK' : 'LIGHT', style: Object.assign({ '--zonos--border-radius': getBorderRadius.getBorderRadius(), '--zonos--font-family': zonosStore.zonosStoreFontFamily(), '--zonos--font-size': `${fontSize}px`, '--zonos--primary-color': secondaryColor }, (this.minWidth ? { '--zonos--min-width': this.minWidth } : {})) }, index.h("div", { key: 'd7b3b8148777aa61f15c1489f44871589aadf00f', class: classes.classes([
+            ]), "data-theme": isDark ? 'DARK' : 'LIGHT', style: Object.assign({ '--zonos--border-radius': getBorderRadius.getBorderRadius(), '--zonos--font-family': zonosStore.zonosStoreFontFamily(), '--zonos--font-size': `${fontSize}px`, '--zonos--primary-color': secondaryColor }, (this.minWidth ? { '--zonos--min-width': this.minWidth } : {})) }, index.h("div", { key: '88b8d885c11bc0776bd0c25b5f0a08f91cfb7c72', class: classes.classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, index.h("select", Object.assign({ key: '629f7437fa445634db0589f217acb59b59e558d3' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes.classes([
+            ]) }, index.h("select", Object.assign({ key: 'd972a6a7b91bb51f2d5ed291a686d521c1bf82a3' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes.classes([
                 'zonos--floated-select',
                 !!this.selectLabel && 'has-label',
                 hasContent && 'has-content',
@@ -7965,9 +7991,9 @@ const ZonosStripeSelect = class {
                 this.selectChange.emit(select.value);
                 this.selectedValue = select.value;
                 this.el.dispatchEvent(new Event('change'));
-            }, required: this.required }), index.h("option", { key: '9b50f769fc79f136b7b77916edd71acdcda199b7', disabled: true, selected: !this.internalValue, value: "" }, this.selectPlaceholder || cart.translate('Select')), this.internalOptions.map(option => (index.h("option", { key: option.value, selected: this.internalValue === option.value ||
+            }, required: this.required }), index.h("option", { key: 'b67730b2c3e77ba60221320519f55e67d7d2b127', disabled: true, selected: !this.internalValue, value: "" }, this.selectPlaceholder || localization.translate('Select')), this.internalOptions.map(option => (index.h("option", { key: option.value, selected: this.internalValue === option.value ||
                 // Sometimes google returns the label not the code for some countries
-                this.internalValue === option.label, value: option.value }, option.label)))), index.h("div", { key: '0ff44083dee7939d6f7bc2372990ccbef6066fed', class: "zonos--floated-label" }, index.h("label", { key: '8f9965fa3de61b705fa95e7ddc68013a3027464d', htmlFor: this.selectId }, this.selectLabel)), index.h("div", { key: '09aa1851295b86e30488ca69720d58d1246ad67c', class: "zonos--actions-wrapper" }, showClearButton && (index.h("button", { key: '1db5be171f74849cedc3a8804bac23fdfa43aaa5', "aria-label": "Clear selection", class: "zonos--clear-button", onClick: this.handleClear, tabIndex: 0, type: "button" }, index.h("zonos-icon", { key: '2ca7e2da61eef16d6feb74c4d6a6198f1762ad16', class: "zonos--clear-icon", content: RemoveLineIcon, iconColor: "gray-1200" }))), index.h("zonos-icon", { key: 'c0050a27a619cb9b844282be841a320648f9d008', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon, iconColor: "gray-800" }))), this.error && (index.h("zonos-text", { key: 'c0a3eb551533c4cb24f92ad6fd7a4b44cd24044c', textColor: "red-600" }, this.error))));
+                this.internalValue === option.label, value: option.value }, option.label)))), index.h("div", { key: '088c104006e983b5ec1680067af32c0479dde13b', class: "zonos--floated-label" }, index.h("label", { key: 'faf3bf337253d205265b181d65d8f8024ffd6124', htmlFor: this.selectId }, this.selectLabel)), index.h("div", { key: '7ce8d36b84b08df139877cd2e12a26b8157ce83b', class: "zonos--actions-wrapper" }, showClearButton && (index.h("button", { key: 'b0a1af08afd9792ba4e7989361219c5cf7d5d8bc', "aria-label": "Clear selection", class: "zonos--clear-button", onClick: this.handleClear, tabIndex: 0, type: "button" }, index.h("zonos-icon", { key: '50ae86d5e9d9722b5546997f9fd52a997cac3add', class: "zonos--clear-icon", content: RemoveLineIcon, iconColor: "gray-1200" }))), index.h("zonos-icon", { key: '30034030f97f7ed6b3027cbc5220c73cde4bbbc2', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon, iconColor: "gray-800" }))), this.error && (index.h("zonos-text", { key: 'cd02da8b1a1cb81581ac7285af84193000692eaa', textColor: "red-600" }, this.error))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {