@zonos/elements 1.3.218 → 1.3.220

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

@@ -5,12 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-1c710d00.js');
 const debounce$1 = require('./debounce-465a4328.js');
 const zonosStore = require('./zonosStore-f8ee56aa.js');
-const cart = require('./cart-c54d05ce.js');
-const localization = require('./localization-ab7e1902.js');
+const cart = require('./cart-9a9ae4b9.js');
+const localization = require('./localization-0169b27d.js');
+const translationStore = require('./translationStore-0c67178f.js');
 const handleFetch = require('./handleFetch-45f35cac.js');
 const shouldRenderTaxIdInput = require('./shouldRenderTaxIdInput-9b8a8de1.js');
-const TaxId = require('./TaxId-12acedde.js');
 const classes = require('./classes-b7918f56.js');
+const TaxId = require('./TaxId-12acedde.js');
 const getBorderRadius = require('./getBorderRadius-1b5e33cf.js');
 const RemoveIcon$2 = require('./RemoveIcon-081ac073.js');
 const isDarkColor = require('./isDarkColor-428965f4.js');
@@ -95,7 +96,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 = () => { };
+        this.storeUnsubscribeList = [];
         /**
          * Google autocomplete overlay is conflict with our button, this is to adjust z index of the autocomplete
          */
@@ -131,14 +132,6 @@ const ZonosAddress$1 = class {
          */
         this.trackingSent = false;
         this.prefetchLandedCost = throttle_1(cart.stripeStorePrefetchLandedCost, 1000);
-        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);
-        };
     }
     getStripeAddressInstance() {
         if (this.type === 'billing') {
@@ -342,22 +335,24 @@ 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: localization.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: translationStore.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))));
     }
     renderCompanyNameInput() {
-        // No need to render company name for billing address
-        if (this.type === 'billing') {
+        // No need to render company name for billing address (only allow for Collect)
+        if (this.type === 'billing' && !window.Zonos.isCollect) {
             return null;
         }
-        // only render the company input if the setting is enabled
-        const isCompanyNameEnabled = zonosStore.zonosStore.checkoutSettings.companyFieldsStatus === 'ENABLED';
+        // only render the company input if the setting is enabled or the cart is collect
+        const isCompanyNameEnabled = zonosStore.zonosStore.checkoutSettings.companyFieldsStatus === 'ENABLED' ||
+            !!window.Zonos.isCollect;
+        // No need to render company name for billing address (only allow for Collect)
         if (!isCompanyNameEnabled) {
             return null;
         }
-        return (index.h("zonos-stripe-input", { class: "zonos--company-name-input", inputLabel: localization.translate('Company name (optional)'), inputValue: cart.stripeStore.companyName, onInputChange: (event) => {
+        return (index.h("zonos-stripe-input", { class: "zonos--company-name-input", inputLabel: translationStore.translate('Company name (optional)'), inputValue: cart.stripeStore.companyName, onInputChange: (event) => {
                 cart.stripeStore.companyName = event.detail;
             } }));
     }
@@ -365,8 +360,11 @@ 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();
+        // unsubscribe from store subscriptions
+        try {
+            this.storeUnsubscribeList.forEach(subscription => subscription());
+        }
+        catch (_a) { }
     }
     componentDidLoad() {
         const stripeAddressEventData = this.getStripeAddressInstance().stripeAddressEventData;
@@ -375,7 +373,22 @@ const ZonosAddress$1 = class {
                 stripeAddressEventData.value.address.line1.length > 0;
         // @Watch doesn't get trigger on initial load
         void this.watchInitStripe();
-        this.onStoreCheckoutSessionIdChanged();
+        this.checkoutSessionId = localization.storageStore.checkoutSessionId;
+        this.storeUnsubscribeList = [
+            localization.storageStoreOnChange('checkoutSessionId', () => {
+                this.checkoutSessionId = localization.storageStore.checkoutSessionId;
+            }),
+            cart.stripeStoreOnChange('stripeElements', () => {
+                if (this.type === 'shipping') {
+                    void this.watchInitStripe();
+                }
+            }),
+            cart.stripeStoreOnChange('stripeElementsForBillingAddress', () => {
+                if (this.type === 'billing') {
+                    void this.watchInitStripe();
+                }
+            }),
+        ];
     }
     render() {
         var _a;
@@ -384,7 +397,11 @@ const ZonosAddress$1 = class {
             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: '13b9fdc214b7ffeacaa180f1ba0d49032b417b6f', class: "zonos--address zonos--elements" }, index.h("zonos-text", { key: '7a6ec3c462293e85926b0f379860d8d4edfe6120', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), this.renderCompanyNameInput(), this.renderTaxIdInput(), index.h("div", { key: '36c094186e6ce2ce1d1c4e8f56823fd032b3ad9e', class: "zonos--address-component" })));
+        return (index.h(index.Host, { key: '15928518601e48825589ce4de4580263fec6a745', class: classes.classes([
+                'zonos--address',
+                'zonos--elements',
+                `zonos--${this.type}-address`,
+            ]) }, this.titleText && (index.h("zonos-text", { key: '2e666ed81597ac95d3de575a2d901d083e9100cc', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), this.renderCompanyNameInput(), this.renderTaxIdInput(), index.h("div", { key: '51aa6d2415bf6c7e067d0565b11a0d2c0629200b', class: "zonos--address-component" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -414,8 +431,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'
-            ? 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({
+            ? translationStore.translate('Shipping')
+            : translationStore.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,
         }))))));
     }
@@ -453,14 +470,14 @@ const ZonosAddressForm = class {
             name,
         });
         return (index.h(index.Host, { key: '22d085e462e69a4100a8cb1763367f53b933ed1d', class: "zonos--address-form zonos--elements" }, index.h("div", { key: '17d6c92370343ffbd1b4a85b3c49055a5a7f9d72', class: "zonos--title" }, index.h("zonos-text", { key: 'a4cb01bd8fed154567e0b7ade87777a1552ea815', textColor: "gray-700", type: "smallHeader" }, this.addressType === 'shipping'
-            ? localization.translate('Shipping')
-            : localization.translate('Billing'))), index.h("div", { key: '4a1dddabc011e465d295b5c2994fda3a2531c96e', class: "zonos--address-group" }, index.h("div", { key: '60df882b5717b2f557a5051f492b2c838f938cd9', class: "zonos--contact" }, index.h("zonos-text", { key: '90b6613ccf1b2a445baae5f700f392d195924688', type: "label" }, localization.translate('Contact')), index.h("zonos-input", { key: '125815769a366e113b61d5581578ef6ecbdffa79', class: "zonos--form-email", inputLabel: localization.translate('Email'), inputValue: this.currentAddress.email, isDisabled: true }), index.h("div", { key: 'd0d331fb33f40243ce23824db5ba9551fd5636f8', class: "zonos--name zonos--address-row" }, index.h("zonos-input", { key: '46323db8f305e491215df03ef2092e76eec38355', class: "zonos--form-first-name", inputLabel: localization.translate('First name'), inputValue: firstName, isError: shouldRenderTaxIdInput.isTextContainsNonLatinChars(firstName), onInputChange: e => this.onInputChange({
+            ? translationStore.translate('Shipping')
+            : translationStore.translate('Billing'))), index.h("div", { key: '4a1dddabc011e465d295b5c2994fda3a2531c96e', class: "zonos--address-group" }, index.h("div", { key: '60df882b5717b2f557a5051f492b2c838f938cd9', class: "zonos--contact" }, index.h("zonos-text", { key: '90b6613ccf1b2a445baae5f700f392d195924688', type: "label" }, translationStore.translate('Contact')), index.h("zonos-input", { key: '125815769a366e113b61d5581578ef6ecbdffa79', class: "zonos--form-email", inputLabel: translationStore.translate('Email'), inputValue: this.currentAddress.email, isDisabled: true }), index.h("div", { key: 'd0d331fb33f40243ce23824db5ba9551fd5636f8', class: "zonos--name zonos--address-row" }, index.h("zonos-input", { key: '46323db8f305e491215df03ef2092e76eec38355', class: "zonos--form-first-name", inputLabel: translationStore.translate('First name'), inputValue: firstName, isError: shouldRenderTaxIdInput.isTextContainsNonLatinChars(firstName), onInputChange: e => this.onInputChange({
                 key: 'name',
                 value: `${e.detail} ${lastName}`,
-            }) }), index.h("zonos-input", { key: '3c055ee2f1fcaf93ebcbd8f11ad6609cd33e9e14', class: "zonos--form-last-name", inputLabel: localization.translate('Last name'), inputValue: lastName, isError: shouldRenderTaxIdInput.isTextContainsNonLatinChars(lastName), onInputChange: e => this.onInputChange({
+            }) }), index.h("zonos-input", { key: '3c055ee2f1fcaf93ebcbd8f11ad6609cd33e9e14', class: "zonos--form-last-name", inputLabel: translationStore.translate('Last name'), inputValue: lastName, isError: shouldRenderTaxIdInput.isTextContainsNonLatinChars(lastName), onInputChange: e => this.onInputChange({
                 key: 'name',
                 value: `${firstName} ${e.detail}`,
-            }) }))), index.h("div", { key: 'ce30f816d03b497eb4491d2554eb63c0aabf110c', class: "zonos--address" }, index.h("zonos-text", { key: '304867c5354ac55071c88944a63bba88ea3fb86f', type: "label" }, localization.translate('Address')), index.h("zonos-input", { key: 'f0efe937603a38761643af1486b53359a19593e5', class: "zonos--form-country", inputLabel: localization.translate('Country'), inputValue: country, isDisabled: true }), index.h("zonos-input", { key: '8360a4ae65c8963e886a3fb8322e0e539d121142', 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: '2c9374917b705c2c9306d3d4d7fc4b4043c2b73b', 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: 'fd067074070cadba3d895503f35c344ff817fec2', class: "zonos--address-row" }, index.h("zonos-input", { key: 'a565bee68e2498403df2801eb90005e8cb2d6f44', 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: '89bae75b691aacdd62b624f65eee303bfb3fc811', 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: '9a851b9f449ed135859b7b828bf362168caf76fb', 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: 'a51b8ba1e22d5a12eac9021abe83fdc20f8eb1a6', class: "zonos--form-phone", inputLabel: localization.translate('Phone number'), inputValue: phone, onInputChange: e => this.onInputChange({ key: 'phone', value: e.detail }) })))));
+            }) }))), index.h("div", { key: 'ce30f816d03b497eb4491d2554eb63c0aabf110c', class: "zonos--address" }, index.h("zonos-text", { key: '304867c5354ac55071c88944a63bba88ea3fb86f', type: "label" }, translationStore.translate('Address')), index.h("zonos-input", { key: 'f0efe937603a38761643af1486b53359a19593e5', class: "zonos--form-country", inputLabel: translationStore.translate('Country'), inputValue: country, isDisabled: true }), index.h("zonos-input", { key: '8360a4ae65c8963e886a3fb8322e0e539d121142', class: "zonos--form-line1", inputLabel: translationStore.translate('Address line 1'), inputValue: line1, isError: shouldRenderTaxIdInput.isTextContainsNonLatinChars(line1), onInputChange: e => this.onInputChange({ key: 'line1', value: e.detail }) }), index.h("zonos-input", { key: '2c9374917b705c2c9306d3d4d7fc4b4043c2b73b', class: "zonos--form-line2", inputLabel: translationStore.translate('Address line 2'), inputValue: line2, isError: shouldRenderTaxIdInput.isTextContainsNonLatinChars(line2), onInputChange: e => this.onInputChange({ key: 'line2', value: e.detail }) }), index.h("div", { key: 'fd067074070cadba3d895503f35c344ff817fec2', class: "zonos--address-row" }, index.h("zonos-input", { key: 'a565bee68e2498403df2801eb90005e8cb2d6f44', class: "zonos--form-city", inputLabel: translationStore.translate('City'), inputValue: city, isError: shouldRenderTaxIdInput.isTextContainsNonLatinChars(city), onInputChange: e => this.onInputChange({ key: 'city', value: e.detail }) }), index.h("zonos-input", { key: '89bae75b691aacdd62b624f65eee303bfb3fc811', class: "zonos--form-state", inputLabel: translationStore.translate('State/Province'), inputValue: state, isError: shouldRenderTaxIdInput.isTextContainsNonLatinChars(state), onInputChange: e => this.onInputChange({ key: 'state', value: e.detail }) })), index.h("zonos-input", { key: '9a851b9f449ed135859b7b828bf362168caf76fb', class: "zonos--form-postal-code", inputLabel: translationStore.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: 'a51b8ba1e22d5a12eac9021abe83fdc20f8eb1a6', class: "zonos--form-phone", inputLabel: translationStore.translate('Phone number'), inputValue: phone, onInputChange: e => this.onInputChange({ key: 'phone', value: e.detail }) })))));
     }
     static get watchers() { return {
         "translatedAddress": ["watchCurrentAddress"]
@@ -546,9 +563,9 @@ const ZonosAddressSuggestions = class {
         return segments;
     }
     render() {
-        return (index.h(index.Host, { key: 'eeb520d24c5cebca1f425c9648a2bdf0269f74c9', class: "zonos--address-suggestions", role: "group", style: {
+        return (index.h(index.Host, { key: '8ef1b971b88cd2280c40e69e1f6824f64e618467', class: "zonos--address-suggestions", role: "group", style: {
                 '--zonos--border-radius': getBorderRadius.getBorderRadius(),
-            } }, 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: () => {
+            } }, index.h("ul", { key: '383e615d02815aad0f06d468dfcfbef3640fd5f5', "aria-label": "Suggestions", class: "wrapper", role: "listbox" }, !!this.localSuggestions.length && (index.h("li", { key: 'f2e6b766f567b0933263e19666e440cf692f248c', "aria-selected": false, class: "powered-by option", role: "option" }, index.h("div", { key: 'd629272b98461726f7eda75fde4cf1070946cd70', class: "powered-by-container" }, index.h("zonos-text", { key: '5b5591b04da2034b783f61394dbdc8f172484972', type: "caption" }, "Suggestions powered by"), index.h("zonos-text", { key: '45352a7ba4314ee1d68c2a53bb722368182283ee', type: "semiBoldLabel" }, "Google")), index.h("zonos-button", { key: '506450cf69ef74cde9ed5159633040701994f455', "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
@@ -731,7 +748,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" }, 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 => {
+            ]) }, 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" }, translationStore.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' }, translationStore.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" }, translationStore.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" }, translationStore.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({
@@ -745,7 +762,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" }, 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'))))))));
+            }, 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" }, translationStore.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 }, translationStore.translate('Update address'))))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -818,14 +835,14 @@ const ZonosCheckbox = class {
             customRoundRadius: '4px',
             overrideBorderStyle: this.borderStyle,
         });
-        return (index.h(index.Host, { key: '177059d9f1ad06324719d97e02a48bb582fcc3d4', class: classes.classes(['zonos--elements zonos--checkbox']), style: {
+        return (index.h(index.Host, { key: 'bef392ce775e35da3f0640dcbb8271437995daa7', class: classes.classes(['zonos--elements zonos--checkbox']), style: {
                 '--zonos--background-color': backgroundColor,
                 '--zonos--border-radius': borderStyle,
                 '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
                 '--zonos--size': `${this.size}px`,
-            } }, index.h("label", { key: '15c39a6c58b9d70e5174bb4d51ab6b8b8a48cabc', class: classes.classes([this.isDisabled && 'disabled']), htmlFor: this.inputId }, index.h("input", { key: '1a6c85de7ca83822cc8e648a84f49580f520429a', checked: this.isChecked, disabled: this.isDisabled, hidden: true, id: this.inputId, onChange: e => {
+            } }, index.h("label", { key: '059e2eabc4825738a6607cd307694b252ba55905', class: classes.classes([this.isDisabled && 'disabled']), htmlFor: this.inputId }, index.h("input", { key: 'a35c086ae478d5ac932608859e6b3250738c870f', checked: this.isChecked, disabled: this.isDisabled, hidden: true, id: this.inputId, onChange: e => {
                 this.checkboxSelected.emit(e.target.checked);
-            }, type: "checkbox" }), index.h("span", { key: '8b498b0a271f07de4e2481a173aecb732a935c5b', class: "checkmark-container" }, index.h("svg", { key: '5d98f7b34f424942dfbd1071f82a5c4f481ac5a9', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'ed79a224a05fa5bfa5f08f71e374d595e7e4c480', "clip-rule": "evenodd", d: "M17.456 7.404a.75.75 0 0 1 .14 1.052l-6.5 8.5a.75.75 0 0 1-1.126.074l-4-4a.75.75 0 0 1 1.06-1.06l3.395 3.394 5.98-7.82a.75.75 0 0 1 1.05-.14Z", fill: "currentColor", "fill-rule": "evenodd" }))), this.label && (index.h("zonos-text", { key: '6af368e40ed1a260f76aa014591e472004978d0c', size: this.fontSize }, this.label)))));
+            }, type: "checkbox" }), index.h("span", { key: '2482799b470a2ef5050709b6de36469ec8321b04', class: "checkmark-container" }, index.h("svg", { key: '1034db2d054e98fe06688b602346097b3e7c7d9d', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'b926b486910470ea3180a904e8ec5ca2cf8e452f', "clip-rule": "evenodd", d: "M17.456 7.404a.75.75 0 0 1 .14 1.052l-6.5 8.5a.75.75 0 0 1-1.126.074l-4-4a.75.75 0 0 1 1.06-1.06l3.395 3.394 5.98-7.82a.75.75 0 0 1 1.05-.14Z", fill: "currentColor", "fill-rule": "evenodd" }))), this.label && (index.h("zonos-text", { key: '5a31f075fb462c7419597f0d15b5e4a2f4e40148', size: this.fontSize }, this.label)))));
     }
 };
 ZonosCheckbox.style = ZonosCheckboxStyle0;
@@ -1019,7 +1036,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 = localization.translate('The field is incomplete');
+                        customErrors.city = translationStore.translate('The field is incomplete');
                     }
                     break;
                 }
@@ -1028,7 +1045,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 = localization.translate('The field is incomplete');
+                        customErrors.state = translationStore.translate('The field is incomplete');
                     }
                     break;
                 }
@@ -1039,7 +1056,7 @@ const ZonosAddress = class {
                     });
                     customErrors.postalCode = '';
                     if (!isValid) {
-                        customErrors.postalCode = localization.translate('Your [zipLabel] is invalid', {
+                        customErrors.postalCode = translationStore.translate('Your [zipLabel] is invalid', {
                             zipLabel: ((_e = this.countryField) === null || _e === void 0 ? void 0 : _e.zipLabel) || 'ZIP',
                         });
                     }
@@ -1049,7 +1066,7 @@ const ZonosAddress = class {
                     const isValid = !!(value === null || value === void 0 ? void 0 : value.trim());
                     customErrors.firstName = '';
                     if (!isValid) {
-                        customErrors.firstName = localization.translate('Please provide your first name.');
+                        customErrors.firstName = translationStore.translate('Please provide your first name.');
                     }
                     break;
                 }
@@ -1057,7 +1074,7 @@ const ZonosAddress = class {
                     const isValid = !!(value === null || value === void 0 ? void 0 : value.trim());
                     customErrors.lastName = '';
                     if (!isValid) {
-                        customErrors.lastName = localization.translate('Please provide your last name.');
+                        customErrors.lastName = translationStore.translate('Please provide your last name.');
                     }
                     break;
                 }
@@ -1065,7 +1082,7 @@ const ZonosAddress = class {
                     const isValid = !!(value === null || value === void 0 ? void 0 : value.trim());
                     customErrors.line1 = '';
                     if (!isValid) {
-                        customErrors.line1 = localization.translate('The field is incomplete');
+                        customErrors.line1 = translationStore.translate('The field is incomplete');
                     }
                     break;
                 }
@@ -1075,17 +1092,17 @@ const ZonosAddress = class {
                         const isValid = !!(value === null || value === void 0 ? void 0 : value.trim());
                         customErrors.phone = '';
                         if (!isValid) {
-                            customErrors.phone = localization.translate('Please provide a mobile phone number.');
+                            customErrors.phone = translationStore.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 = localization.translate('Please provide a mobile phone number.');
+                            customErrors.phone = translationStore.translate('Please provide a mobile phone number.');
                         }
                         else if (phoneValidateInfo.wrongFormat) {
-                            customErrors.phone = localization.translate('Your mobile phone number is incomplete.');
+                            customErrors.phone = translationStore.translate('Your mobile phone number is incomplete.');
                         }
                     }
                     break;
@@ -1210,7 +1227,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: localization.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: translationStore.translate(taxIdInputInfo.friendlyName), inputPlaceholder: taxIdInputInfo.placeholder, inputValue: cart.stripeStore.taxId || '', isError: !!this.taxIdErrorMessage, onInputChange: (event) => {
                 cart.stripeStore.taxId = event.detail;
             } })));
     }
@@ -1224,7 +1241,7 @@ const ZonosAddress = class {
         if (!isCompanyNameEnabled) {
             return null;
         }
-        return (index.h("zonos-stripe-input", { class: "zonos--company-name-input", inputLabel: localization.translate('Company name (optional)'), inputValue: cart.stripeStore.companyName, onInputChange: (event) => {
+        return (index.h("zonos-stripe-input", { class: "zonos--company-name-input", inputLabel: translationStore.translate('Company name (optional)'), inputValue: cart.stripeStore.companyName, onInputChange: (event) => {
                 cart.stripeStore.companyName = event.detail;
             } }));
     }
@@ -1531,7 +1548,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: localization.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: translationStore.translate('First name'), inputValue: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.firstName, onInputChange: (event) => {
                 this.validate({
                     type: this.type,
                     value: event.detail,
@@ -1545,7 +1562,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: localization.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: translationStore.translate('Last name'), inputValue: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.lastName, onInputChange: (event) => {
                 this.validate({
                     type: this.type,
                     value: event.detail,
@@ -1588,9 +1605,9 @@ const ZonosAddress = class {
                 this.city = '';
                 this.state = '';
                 this.postalCode = '';
-            }, options: this.shipToCountries || [], required: true, selectLabel: localization.translate('Country'), selectedValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.country) ||
+            }, options: this.shipToCountries || [], required: true, selectLabel: translationStore.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) => {
+                (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: translationStore.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,
@@ -1621,9 +1638,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: localization.translate(((_c = this.countryField) === null || _c === void 0 ? void 0 : _c.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: translationStore.translate(((_c = this.countryField) === null || _c === void 0 ? void 0 : _c.address2Label) || 'Address line 2'), inputValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.line2) || '', onInputChange: (event) => {
                 this.line2 = event.detail;
-            } }), ((_d = this.countryField) === null || _d === void 0 ? void 0 : _d.cityShow) && (index.h("zonos-stripe-input", { "aria-required": ((_e = this.countryField) === null || _e === void 0 ? void 0 : _e.cityRequired) ? 'true' : 'false', autoComplete: "shipping address-level2", class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.city : undefined, inputLabel: localization.translate(((_f = this.countryField) === null || _f === void 0 ? void 0 : _f.cityLabel) || 'City'), inputValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.city) || '', name: "locality", onInputChange: (event) => {
+            } }), ((_d = this.countryField) === null || _d === void 0 ? void 0 : _d.cityShow) && (index.h("zonos-stripe-input", { "aria-required": ((_e = this.countryField) === null || _e === void 0 ? void 0 : _e.cityRequired) ? 'true' : 'false', autoComplete: "shipping address-level2", class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.city : undefined, inputLabel: translationStore.translate(((_f = this.countryField) === null || _f === void 0 ? void 0 : _f.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,
@@ -1651,9 +1668,9 @@ const ZonosAddress = class {
                  * Therefore, we must update the value after validation to ensure correct error state
                  */
                 this.state = event.detail;
-            }, options: stateOptions, required: (_k = this.countryField) === null || _k === void 0 ? void 0 : _k.stateRequired, selectLabel: localization.translate(((_l = this.countryField) === null || _l === void 0 ? void 0 : _l.stateLabel) || 'State'), selectedValue: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.state, title: `${this.type} state` })), ((_m = this.countryField) === null || _m === void 0 ? void 0 : _m.zipShow) && (index.h("zonos-stripe-input", { "aria-describedby": ((_o = this.countryField) === null || _o === void 0 ? void 0 : _o.zipFormat)
+            }, options: stateOptions, required: (_k = this.countryField) === null || _k === void 0 ? void 0 : _k.stateRequired, selectLabel: translationStore.translate(((_l = this.countryField) === null || _l === void 0 ? void 0 : _l.stateLabel) || 'State'), selectedValue: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.state, title: `${this.type} state` })), ((_m = this.countryField) === null || _m === void 0 ? void 0 : _m.zipShow) && (index.h("zonos-stripe-input", { "aria-describedby": ((_o = this.countryField) === null || _o === void 0 ? void 0 : _o.zipFormat)
                 ? `zip-format-${this.type}`
-                : undefined, "aria-required": ((_p = this.countryField) === null || _p === void 0 ? void 0 : _p.zipRequired) ? 'true' : 'false', autoComplete: "shipping postal-code", class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.postalCode : undefined, inputLabel: localization.translate(((_q = this.countryField) === null || _q === void 0 ? void 0 : _q.zipLabel) || 'Zip'), inputValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.postal_code) || '', name: "postalCode", onInputChange: (event) => {
+                : undefined, "aria-required": ((_p = this.countryField) === null || _p === void 0 ? void 0 : _p.zipRequired) ? 'true' : 'false', autoComplete: "shipping postal-code", class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.postalCode : undefined, inputLabel: translationStore.translate(((_q = this.countryField) === null || _q === void 0 ? void 0 : _q.zipLabel) || 'Zip'), inputValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.postal_code) || '', name: "postalCode", onInputChange: (event) => {
                 this.validate({
                     type: this.type,
                     value: event.detail,
@@ -1667,7 +1684,7 @@ const ZonosAddress = class {
                  * Therefore, we must update the value after validation to ensure correct error state
                  */
                 this.postalCode = event.detail;
-            }, required: (_r = this.countryField) === null || _r === void 0 ? void 0 : _r.zipRequired, title: `${this.type} zip code` }))), 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: (_s = zonosStore.zonosStore.genericSettings) === null || _s === void 0 ? void 0 : _s.countryFields, error: showError ? customAddressErrors.phone : undefined, inputLabel: localization.translate('Phone number'), inputValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.phone) || '', onInputValueChange: event => {
+            }, required: (_r = this.countryField) === null || _r === void 0 ? void 0 : _r.zipRequired, title: `${this.type} zip code` }))), 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: (_s = zonosStore.zonosStore.genericSettings) === null || _s === void 0 ? void 0 : _s.countryFields, error: showError ? customAddressErrors.phone : undefined, inputLabel: translationStore.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({
@@ -1738,10 +1755,10 @@ const ZonosAddress = class {
             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: '9e1d9e1ed3fca30876ba8310510873a5b10c6552', class: classes.classes([
+        return (index.h(index.Host, { key: 'dcddfc6f0c63371c49f223f86a6c00df7ab30eed', class: classes.classes([
                 'zonos--address zonos--elements',
                 `zonos--${this.type}-address`,
-            ]) }, index.h("zonos-text", { key: '2356d42946b3ed93c4670fb876101a1371ac5c14', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderCustomAddressForm()));
+            ]) }, index.h("zonos-text", { key: '70139b5412028d5dba2cc51ee8e3a81e182fd19a', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderCustomAddressForm()));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -1851,7 +1868,7 @@ const ZonosDialog = class {
         const borderStyle = getBorderRadius.getBorderRadius({
             overrideBorderStyle: this.borderStyle,
         });
-        return (index.h(index.Host, { key: 'a9932187bccf8e7fa505c7e07175d03541d66852', class: classes.classes([
+        return (index.h(index.Host, { key: '6e673f681a3111d8e33c8cf4e8ab0c8f27c75d48', class: classes.classes([
                 'zonos--elements',
                 this.open && 'open',
                 this.isLoading && 'is-loading',
@@ -1863,10 +1880,10 @@ const ZonosDialog = class {
                 '--zonos--height': this.height || 'initial',
                 '--zonos--min-height': this.minHeight || '500px',
                 '--zonos--width': this.width,
-            } }, index.h("div", { key: '0298cf365a50e3544656a6d27ae59e922b9e3aed', class: "zonos--backdrop" }), index.h("div", { key: '9fce580a07147d51f17c898a22204c3d9ce6ac7b', class: "zonos--dialog-layout", inert: !this.open, onClick: this.clickOutsideDialogHandler }, index.h("div", { key: 'b168439cd985cc5c0166a653db206688504cf7dd', class: "zonos--dialog" }, this.isLoading && (index.h("div", { key: 'e0b6215f3c7bc939721669069bc294e08558d8b5', class: "zonos--loading" }, index.h("zonos-spinner", { key: '687bcd6d2695933de828484c34aff1230bf71d49', size: 30 }))), (this.headerText || !this.noCloseButton) && (index.h("div", { key: '04a57a4add896e3d96faca8b77321bba5f00b889', class: "zonos--header" }, this.headerText && (index.h("h3", { key: 'd084cb3aedcb7e5bb8fd82012b57f441d7dce4a2', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (index.h("zonos-button", { key: 'c62701d002586d92f80d1d30644ae3948afc18f6', class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler, title: "Close dialog", variant: "subtle" })))), index.h("div", { key: 'a8aa531565e52672573785a613ab87a970189616', class: classes.classes([
+            } }, index.h("div", { key: 'f245de30fb680fd673bd8531f3982b73ed506308', class: "zonos--backdrop" }), index.h("div", { key: 'ee75ecd48e28f38be08b5db9078c0b3b28b9bd9f', class: "zonos--dialog-layout", inert: !this.open, onClick: this.clickOutsideDialogHandler }, index.h("div", { key: 'ce7d2273f358001b5899ba7a6ea8d5bd91ab55cb', class: "zonos--dialog" }, this.isLoading && (index.h("div", { key: 'e2cd0f877ed4f8b78b549a4aaedf1e67a234b0f7', class: "zonos--loading" }, index.h("zonos-spinner", { key: 'e0507e5fea599494979287fc4f13a7da08be758b', size: 30 }))), (this.headerText || !this.noCloseButton) && (index.h("div", { key: '8d6cac393a445febf36cc6fb1811c00223518481', class: "zonos--header" }, this.headerText && (index.h("h3", { key: 'cb634d14db0a14144a370d66e3d5aa9147914038', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (index.h("zonos-button", { key: 'd11ff8473046b201bad444c9b81a0566dd400829', class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler, title: "Close dialog", variant: "subtle" })))), index.h("div", { key: '356588fe85cce5298e4c2e862c31dab3018602a5', class: classes.classes([
                 'zonos--body',
                 this.noBodyPadding && 'zonos--no-body-padding',
-            ]) }, index.h("slot", { key: 'ede82b27d9e73f27ad0212203e0483a8294f72e5' })), index.h("slot", { key: '084c3a055462fbf8f25e336891e0dbb5faed7ed7', name: "dialog-footer" })))));
+            ]) }, index.h("slot", { key: 'd525f4fab2449a219d42ccb45b4497076b5973c9' })), index.h("slot", { key: 'febb4e4ab0cb950b3a346052d60fa70ec8346be4', name: "dialog-footer" })))));
     }
     static get assetsDirs() { return ["assets"]; }
 };
@@ -1884,6 +1901,7 @@ const ZonosLinkAuthentication = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.linkAuthenticationChange = index.createEvent(this, "linkAuthenticationChange", 7);
+        this.storeUnsubscribeList = [];
         /**
          * Default email for stripe
          */
@@ -1918,10 +1936,10 @@ const ZonosLinkAuthentication = class {
     watchIsStagingMode() {
         // Wait for the DOM to be ready before re-initializing Link element
         setTimeout(() => {
-            this.watchInitStripe();
+            void this.watchInitStripe();
         }, 0);
     }
-    watchInitStripe() {
+    async watchInitStripe() {
         if (!this.stripe || !cart.stripeStore.stripeElements) {
             return;
         }
@@ -1980,7 +1998,31 @@ const ZonosLinkAuthentication = class {
             void this.watchInitStripe();
         }, 5);
     }
+    disconnectedCallback() {
+        // unsubscribe from store subscriptions
+        try {
+            this.storeUnsubscribeList.forEach(subscription => subscription());
+        }
+        catch (_a) { }
+    }
     componentDidLoad() {
+        this.storeUnsubscribeList = [
+            cart.stripeStoreOnChange('stripeElements', async () => {
+                // Wait for the stripe elements to be ready with the new client secret
+                await new Promise(resolve => setTimeout(resolve, 1));
+                void this.watchInitStripe();
+            }),
+            cart.stripeStoreOnChange('clientSecret', async () => {
+                // Wait for the stripe elements to be ready with the new client secret
+                await new Promise(resolve => setTimeout(resolve, 1));
+                this.clientSecret = cart.stripeStore.clientSecret;
+            }),
+            cart.stripeStoreOnChange('stripe', async () => {
+                // Wait for the stripe elements to be ready with the new client secret
+                await new Promise(resolve => setTimeout(resolve, 1));
+                this.stripe = cart.stripeStore.stripe;
+            }),
+        ];
         // @Watch doesn't get trigger on initial load
         this.watchInitStripe();
         if (!this.defaultEmail) {
@@ -1995,7 +2037,7 @@ const ZonosLinkAuthentication = class {
         const renderEmailAddress = () => {
             var _a;
             if (cart.cartStore.isStagingMode) {
-                return (index.h("zonos-stripe-input", { inputLabel: localization.translate('Email'), inputValue: this.defaultEmail ||
+                return (index.h("zonos-stripe-input", { inputLabel: translationStore.translate('Email'), inputValue: this.defaultEmail ||
                         ((_a = cart.stripeStore.stripeLinkEventData) === null || _a === void 0 ? void 0 : _a.value.email) ||
                         '', isError: this.isEmailError, onBlur: () => {
                         var _a;
@@ -2013,7 +2055,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" }, localization.translate('Please enter a valid email address.')))));
+            } }, this.titleText && (index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), renderEmailAddress(), this.isEmailError && (index.h("zonos-text", { textColor: "red-600" }, translationStore.translate('Please enter a valid email address.')))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -8049,24 +8091,24 @@ const ZonosStripePhoneInput = class {
                 .filter(Boolean)
                 .sort((a, b) => a.displayName.localeCompare(b.displayName))
             : [];
-        return (index.h(index.Host, { key: '0d4501947787cbafe38acb60fb5ee7519b6d1c73', class: classes.classes([
+        return (index.h(index.Host, { key: 'ed5b02d0f617b0611ecba382cf8447570c3cee76', 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: 'c3e0f9655a39a5bb3d838634754be2af60a24a10', 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: '8644eb1a24b4a2cdf491a8176f70e2fa35389fa6', 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: '1a58471117f6748d511498e016814bd907e8775f', class: "zonos--select", disabled: this.disabled, onBlur: this.handleBlur, onChange: this.handleCountryChange, onFocus: this.handleFocus }, countryOptionsList.map(option => {
+            ]) }, index.h("select", { key: '747109b80d3d02778ded01392d853a050f675114', 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: '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([
+        })), index.h("div", { key: '399beecaead5791d81ffd1db679f5b235c056769', class: "zonos--input-group" }, index.h("div", { key: '599a287f610935762e3229577bf35cfaee8ffe7f', class: "zonos--select-wrapper" }, index.h("div", { key: 'a1402a12ffa599e4dd42523696121d0a1cec60b6', class: "zonos--country-select" }, index.h("div", { key: 'a798cf4e8f4f5cfef5554404c578076f507d0dd2', class: "zonos--country-select-content" }, this.selectedCountry && (index.h("div", { key: '6a0313b6cd969a095002b18830fcbbd104e42570', class: "zonos--country-select-selected" }, index.h("div", { key: 'b6d2403854632f40dfd23d15b1eb8ef5625e1059', class: "zonos--country-flag-wrapper" }, index.h("zonos-country-flag", { key: '60397bbbbc9c6083064de1427cedeb148f36a35d', class: "zonos--country-flag", countryCode: this.selectedCountry.countryCode })), index.h("div", { key: 'effc1b9bc5fa1cd832e686b6e87ccac87e41ffb8', class: "zonos--country-code" }, "+", this.selectedCountry.phoneCode))), index.h("div", { key: '8e5aa3603dc4a869ce7335c2903a15903d5e61d4', class: "zonos--select-chevron-wrapper" }, index.h("zonos-icon", { key: '8b9ea89b5234a345d556d06649add11401baa184', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon$1, iconColor: "gray-800" }))))), index.h("div", { key: '21514d3e3f66095b79eb53e47fff6a98fbf12fba', class: classes.classes([
                 'zonos--input-container',
                 this.inputLabel && 'has-label',
                 hasContent && 'has-content',
-            ]) }, 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))));
+            ]) }, index.h("input", Object.assign({ key: '50421e7a8343203ee623a4e61f957abd115d0495' }, 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: '5025154c17fc9145b1b2bf2036ec7796287094ea', class: "zonos--floated-label" }, index.h("label", { key: '9af81cc3320de319ea84637bbb923c4b81a506d1', htmlFor: this.inputId }, this.inputLabel || translationStore.translate('Phone number'))))))), this.error && (index.h("zonos-text", { key: '523df8b2d650663ac43516d8ae9954ffd208c5e8', textColor: "red-600" }, this.error))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -8182,14 +8224,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: '18d7ba03b9136af8614874b13b9ac3ce85f7c0d0', class: classes.classes([
+        return (index.h(index.Host, { key: 'e781d691f1f1f72ceed06c488af7f427ed4f82d0', 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: '88b8d885c11bc0776bd0c25b5f0a08f91cfb7c72', 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: '4df83fa9bcb12e94e2d4bba3d6f31a4f56006097', class: classes.classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, index.h("select", Object.assign({ key: 'd972a6a7b91bb51f2d5ed291a686d521c1bf82a3' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes.classes([
+            ]) }, index.h("select", Object.assign({ key: '31daa88fdaeb8a35055b97ade6aa10bbd234568a' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes.classes([
                 'zonos--floated-select',
                 !!this.selectLabel && 'has-label',
                 hasContent && 'has-content',
@@ -8199,9 +8241,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: '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 ||
+            }, required: this.required }), index.h("option", { key: '4c5c09493d0e9d38bc56860682c092017dc927ff', disabled: true, selected: !this.internalValue, value: "" }, this.selectPlaceholder || translationStore.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: '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))));
+                this.internalValue === option.label, value: option.value }, option.label)))), index.h("div", { key: 'abe6ea181a207b8b85232226078c92ab1a8b6618', class: "zonos--floated-label" }, index.h("label", { key: 'c079f2f21289e5ba06906fd7e29b3c8216c6ae01', htmlFor: this.selectId }, this.selectLabel)), index.h("div", { key: '3cad61609828a9b38a4a38625629481c9fb5411e', class: "zonos--actions-wrapper" }, showClearButton && (index.h("button", { key: 'f24323bdbd652cff52bec827f3a93a2e343e35c4', "aria-label": "Clear selection", class: "zonos--clear-button", onClick: this.handleClear, tabIndex: 0, type: "button" }, index.h("zonos-icon", { key: 'e8fe204b510477855de4dfee29d1200f30c50933', class: "zonos--clear-icon", content: RemoveLineIcon, iconColor: "gray-1200" }))), index.h("zonos-icon", { key: 'f071765d705d67b741f9381bbe96e2e8beb0968d', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon, iconColor: "gray-800" }))), this.error && (index.h("zonos-text", { key: '7425ced4032df77a7f1219f9c03caedcd1a55841', textColor: "red-600" }, this.error))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {