@zonos/elements 1.3.34 → 1.3.36

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

@@ -49,7 +49,9 @@ export class ZonosCustomerInfo {
             // overwrite the address object with the new data
             stripeEventDataObj = Object.assign(Object.assign({}, stripeEventDataObj), { complete: true, value: Object.assign(Object.assign({}, stripeEventDataObj === null || stripeEventDataObj === void 0 ? void 0 : stripeEventDataObj.value), { address: Object.assign(Object.assign({}, stripeEventDataObj === null || stripeEventDataObj === void 0 ? void 0 : stripeEventDataObj.value.address), { city: submitDataByKey.city ||
                             (stripeEventDataObj === null || stripeEventDataObj === void 0 ? void 0 : stripeEventDataObj.value.address.city) ||
-                            '', line1: submitDataByKey.line1, line2: submitDataByKey.line2, postal_code: submitDataByKey.postal_code, state: submitDataByKey.state }), firstName: submitDataByKey.name.split(' ')[0], lastName: submitDataByKey.name.split(' ')[1], name: submitDataByKey.name }) });
+                            '', line1: submitDataByKey.line1, line2: submitDataByKey.line2, postal_code: submitDataByKey.postal_code, state: submitDataByKey.state }), firstName: submitDataByKey.name.split(' ')[0],
+                    // get all the names after
+                    lastName: submitDataByKey.name.split(' ').slice(1).join(' '), name: submitDataByKey.name }) });
         };
         /**
          * handler for continue button click
@@ -178,12 +180,16 @@ export class ZonosCustomerInfo {
             variant: this.submitBtnType }, translate('Continue to shipping')))), stripeStore.stripeAddressEventData && (h("zonos-address-update-dialog", { billingAddress: !stripeStore.stripeShippingSameAsBilling &&
                 stripeStore.stripeBillingAddressEventData
                 ? this.prepareAddressObject(stripeStore.stripeBillingAddressEventData)
-                : null, "data-theme": theme, dialogLoading: this.isValidatingAddress, dialogOpen: this.openAddressValidationDialog, isMobile: this.isMobile, onCloseDialog: () => (this.openAddressValidationDialog = false), onContinueClicked: e => {
+                : null, "data-theme": theme, dialogLoading: this.isValidatingAddress, dialogOpen: this.openAddressValidationDialog, isMobile: this.isMobile, onCloseUpdateDialog: () => (this.openAddressValidationDialog = false), onContinueClicked: e => {
                 const submitData = e.detail;
                 this.transformTranslatedAddressToStripeEvent({
                     submitData,
                     type: 'shippingAddress',
                 });
+                this.transformTranslatedAddressToStripeEvent({
+                    submitData,
+                    type: 'billingAddress',
+                });
             }, shippingAddress: this.prepareAddressObject(stripeStore.stripeAddressEventData), translatedBillingAddress: stripeStore.translatedAddress.billingAddress, translatedShippingAddress: stripeStore.translatedAddress.address }))));
     }
     static get is() { return "zonos-customer-info"; }

package/dist/collection/components/common/zonos-country-select/zonos-country-select.css

@@ -33,6 +33,8 @@
 
 :host .zonos--country-select {
   position: relative;
+  max-height: 500px;
+  overflow-y: auto;
 }
 :host .zonos--country-select .zonos--country-select-header {
   position: sticky;

package/dist/collection/components/common/zonos-country-select/zonos-country-select.js

@@ -12,8 +12,15 @@ export class ZonosCountrySelect {
             this.handleOnClose();
         };
         this.handleInputChange = (event) => {
+            var _a;
             const input = event.target;
             this.inputValue = input.value;
+            // query the country list container
+            const countryListSelector = (_a = this.ele.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.zonos--country-select');
+            // scroll to top every time the input changes
+            if (countryListSelector) {
+                countryListSelector.scrollTop = 0;
+            }
         };
         this.handleOnClose = () => { };
         this.inputValue = '';
@@ -35,9 +42,9 @@ export class ZonosCountrySelect {
         const filteredCountries = this.inputValue
             ? fuseObject.map(country => country.item)
             : countries.sort((a, b) => a.displayName.localeCompare(b.displayName));
-        return (h(Host, { key: '58c3b982087e7f62fa914028bfe874273e9e3fde', class: "zonos--elements", style: {
+        return (h(Host, { key: '55753f75d50712e9a27a9db9131130ce1e042c7e', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '62a5b6611c4ace9413f34a91aa33c60344cb9d51', class: "zonos--country-select" }, h("zonos-v-stack", { key: 'd2133152d1e61b4cd1dfcc42fd67f44cd2585443', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: '3fd084f5165387dc1ce567db6579599cbf420916', handleOnClose: () => this.handleOnClose(), label: "Select a country" }, h("input", { key: '176630bf445f1bb7af90fe7cec5091ea9e615e1f', class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Search countries", value: this.inputValue }))), h("div", { key: '50942a4c1a980bbac701e15060ed49dc9af64f73', class: "zonos--country-select-content" }, filteredCountries.map(country => (h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, h("zonos-country-flag", { class: "zonos--country-flag", countryCode: country.code }), h("zonos-text", { textColor: "gray-800" }, country.displayName), country.code === localizationStore.selectedCountryCode && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 20 })))))))));
+            } }, h("div", { key: 'c96d6b99ea3d55074256b39deaab01e14c5cea0b', class: "zonos--country-select" }, h("zonos-v-stack", { key: '2e87ea4ed6a5d4b9bd0aa6764f0aa9661e7d68fd', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: 'd8dec91571385908913825d8bad4beda4dcaa409', handleOnClose: () => this.handleOnClose(), label: "Select a country" }, h("input", { key: 'b93ab3eb035c813af752da077b493140ae0fa394', class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Search countries", value: this.inputValue }))), h("div", { key: 'aaaf3dbd925250d799119b5a57ca95691eeaa985', class: "zonos--country-select-content" }, filteredCountries.map(country => (h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, h("zonos-country-flag", { class: "zonos--country-flag", countryCode: country.code }), h("zonos-text", { textColor: "gray-800" }, country.displayName), country.code === localizationStore.selectedCountryCode && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 20 })))))))));
     }
     static get is() { return "zonos-country-select"; }
     static get encapsulation() { return "shadow"; }

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

@@ -59,7 +59,7 @@ export class ZonosDialog {
         const borderStyle = getBorderRadius({
             overrideBorderStyle: this.borderStyle,
         });
-        return (h(Host, { key: '9478fd5dd572bc1a677146025485b74321700fba', class: classes([
+        return (h(Host, { key: '018771d0e01311ae520abcf33fbd64316794b202', class: classes([
                 'zonos--elements',
                 this.open && 'open',
                 this.isLoading && 'is-loading',
@@ -71,10 +71,10 @@ export class ZonosDialog {
                 '--height': this.height || 'initial',
                 '--min-height': this.minHeight || '500px',
                 '--width': this.width,
-            } }, h("div", { key: '4bc8f62202bbae238d07536f3234bdc00c6d689f', class: "zonos--backdrop" }), h("div", { key: 'da80cf2a9b0a19e4e42062a57fed91ecfe6c0bcf', "aria-hidden": "true", class: "zonos--dialog-layout", onClick: this.clickOutsideDialogHandler }, h("div", { key: '7bbaacf6fbb5ff70db62246254f007006146324e', class: "zonos--dialog" }, this.isLoading && (h("div", { key: 'c65e9205d105456072b4c3c7549dce937dd7f8ec', class: "zonos--loading" }, h("zonos-spinner", { key: 'ac3667841a42f0ae55831a449c07bdfadc976971', size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { key: '9e2c9ec2c4a9be64169f2f6b6473bc16516fbff1', class: "zonos--header" }, this.headerText && (h("h3", { key: '0b2086b13d7cfc14901527afbb087c40eb76895d', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: '2d2b55e65e965071f6422665eaa8be7991450a93', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler, variant: "subtle" })))), h("div", { key: 'aedb5b3b307a5a04f9b806c927679d0e0c0de711', class: classes([
+            } }, h("div", { key: 'a86c9f8465054fde894bbdd71149e59d97e8cbcf', class: "zonos--backdrop" }), h("div", { key: 'b2f0c86fa0e768474ba4d522f8c2b8157f89cd56', class: "zonos--dialog-layout", inert: !this.open, onClick: this.clickOutsideDialogHandler }, h("div", { key: '26cd8a7b98d38c53dcf4789c8781f0c1ced99633', class: "zonos--dialog" }, this.isLoading && (h("div", { key: '34d0ba841a9af9ca2ff6d21d0471113cc86cdec3', class: "zonos--loading" }, h("zonos-spinner", { key: '0109778b1a9734de0959035e3975414fb1cac1be', size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { key: 'f80a4c337727500ee1ad92c1d80d7b3088eccc0f', class: "zonos--header" }, this.headerText && (h("h3", { key: '92b078fbbcd9ca5f8bf178fc67f2bee817d1e961', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: '698e45fffd466f22b6179aa220d35fe39ee5374c', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler, variant: "subtle" })))), h("div", { key: 'a4012e5a48d5fbcc77cac038d8a39fe05f332008', class: classes([
                 'zonos--body',
                 this.noBodyPadding && 'zonos--no-body-padding',
-            ]) }, h("slot", { key: '5f55d5771bc62a54865ee3bf8a25f571bfd7fbd1' })), h("slot", { key: '95053c3ebf850f1f9796163122f9224f4190d1c9', name: "dialog-footer" })))));
+            ]) }, h("slot", { key: 'd64b381cb91afde4ddbde58348a62612d9871c8e' })), h("slot", { key: '4ddd73bfe41ecd1c90b18f82a8d8f12a1eacf144', name: "dialog-footer" })))));
     }
     static get is() { return "zonos-dialog"; }
     static get encapsulation() { return "shadow"; }
@@ -363,7 +363,7 @@ export class ZonosDialog {
         return [{
                 "method": "closeDialog",
                 "name": "closeDialog",
-                "bubbles": true,
+                "bubbles": false,
                 "cancelable": true,
                 "composed": true,
                 "docs": {

package/dist/collection/components/hello/zonos-hello-dialog/zonos-hello-dialog.js

@@ -184,18 +184,18 @@ export class ZonosHelloDialog {
         const defaultMessage = formatStringWithLinks(defaultMessageStr);
         const currentPage = this.getCurrentPageEnum();
         const filteredMessages = customMessages.filter(x => x.pageName === currentPage);
-        return (h(Host, { key: 'af2c46bcc413205d644a2b94ee2ff568d3d004f2', class: "zonos--elements" }, h("div", { key: '67a563de9e702e370d057ee3cc45bc0c14feedc5', "aria-hidden": "true", class: classes([
+        return (h(Host, { key: 'af2c46bcc413205d644a2b94ee2ff568d3d004f2', class: "zonos--elements" }, h("div", { key: 'e74b871d52d734ca9ad772d8ae1c5bef1aaf06f9', class: classes([
                 'zonos--hello-dialog',
                 animateLeft && 'zonos--hello-dialog-animate-from-left',
                 animateFromBottom && 'zonos--hello-dialog-animate-from-bottom',
                 !!this.mobileLocationOverride &&
                     'zonos--hello-dialog-mobile-override',
                 this.isOpen && 'zonos--hello-dialog-open',
-            ]), ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (h("div", { key: '412a8d2f4c01e4ff216feb92a979be5987bcd8c7' }, h("div", { key: 'b2921acfc77c6a402a14256a6f1c28607f6533e7', class: "zonos--hello-dialog-content" }, h("zonos-button", { key: 'aa623c0533a5f852dab7f0f98d6dc26f62ef899a', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close Zonos Hello dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), h("zonos-v-stack", { key: '4fdac9331a5b2506a5ca1c7c1b6bfecf822bfcd9', spacing: 24 }, h("zonos-country-flag", { key: '57afef45e0bebe9bdfa715306f6ec2c30aca8dc1', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { key: '954b970c82fd631efadbd9c916e8bad78f0e1321', class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { key: 'cde98a9636e6150d6cab009970938a0cf61bc05a', type: "boldSubheader" }, welcomeMessage), h("zonos-text", { key: 'b63fc79317f23854737c1f2dd2cbde38f3841f2a', innerHTML: defaultMessage, textColor: "gray-800" })), h("zonos-v-stack", { key: 'e115a03222d2271b358c3f1ae3feb938bafcdbef', spacing: 8 }, this.restrictedItems.map(item => {
+            ]), inert: !this.isOpen, ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (h("div", { key: 'd973d051143ab56e1af29b7ee812f1e5405b7768' }, h("div", { key: '1539bbc35aebccc9748e2d3b77b1717bd2e5dec5', class: "zonos--hello-dialog-content" }, h("zonos-button", { key: '675ff7bb8fdf8373c1aa21200ccc42ff9b585355', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close Zonos Hello dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), h("zonos-v-stack", { key: 'c82a41c292facb00fd1a48ce69920b1de47d3f09', spacing: 24 }, h("zonos-country-flag", { key: '6b083cf77226e3766ad50a812c1201809593f3d6', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { key: 'f0ab4ca66f22b0448edff37fc730e72790b83de8', class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { key: '574f22410d18fbeea3ac3fe22a735a2d858b5c9e', type: "boldSubheader" }, welcomeMessage), h("zonos-text", { key: '35f718094fcbd34d8e8ae9ec46fd0429cfcd1104', innerHTML: defaultMessage, textColor: "gray-800" })), h("zonos-v-stack", { key: 'e4bd687a84f1d48d0a20564a4ac9b9c1a24b3850', spacing: 8 }, this.restrictedItems.map(item => {
             var _a;
             return item && (h("zonos-banner", { bannerTitle: item.name, intent: "error" }, (_a = item.itemRestrictions) === null || _a === void 0 ? void 0 : _a.map(x => (h("zonos-text", { textColor: "red-800" }, x === null || x === void 0 ? void 0 : x.note)))));
-        }), h("zonos-card", { key: '6f5ef13c8ce1171b99c148f43f491ced8f29cd57', spacing: "12px" }, h("zonos-v-stack", { key: '816a373a6dcf69976279af51f09d136f18c6b4a8', spacing: 12 }, h("div", { key: '51fc31937cb4885c7a98ee5fbc0755a00158f172', class: "zonos--flex-message" }, h("zonos-icon", { key: 'bc659d649b3a7f046225270870e7ae31597027f4', "aria-label": "Duty de minimis", content: ImportIcon }), h("zonos-text", { key: 'e63ce2eb6f381718ca26962c7429f266bf8cf8d9' }, dutyDeMinimisMessage)), h("div", { key: '6f49eac81be52709ad8f35c04cccd7d2fec03b7a', class: "zonos--flex-message" }, h("zonos-icon", { key: 'd95f29c3c42480c89a34e831740cfdbb3d64c058', "aria-label": "Tax de minimis", content: MoneyIcon }), h("zonos-text", { key: 'c226092fef030070af3af1d45debab989fb4f1b7' }, taxDeMinimisMessage)), additionalInformation === null || additionalInformation === void 0 ? void 0 :
-            additionalInformation.map(info => (h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Additional information for buying goods from selected country", content: BagIcon }), h("zonos-text", { innerHTML: info })))))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), h("zonos-hello-dialog-footer", { key: '32739e817940a937b59380197934ced91f2afc50', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", { key: 'be58e393680370837ae35d5d4f85f77cf9620db2' }, h("zonos-country-select", { key: 'bc5c7e086513a44f817e5769acf2ca382b01fcc4', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", { key: '7cbee089b9661602bb23e5e2821030d04891f18a' }, h("zonos-language-select", { key: '55d654b2b339cfd83e3fe9814d914a382a891af3', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
+        }), h("zonos-card", { key: '53fa284d1d87505e550bb893a895e944894cd8b6', spacing: "12px" }, h("zonos-v-stack", { key: 'ee8ecb870af875c1bbc49be88464094753d96b26', spacing: 12 }, h("div", { key: '9bb07220319b2635d66722c79a81c77c049e2aa0', class: "zonos--flex-message" }, h("zonos-icon", { key: 'cf345dace81622f3fd240a1538f25fce855d2ae2', "aria-label": "Duty de minimis", content: ImportIcon }), h("zonos-text", { key: '4a047bc63a8e2a1f88203241b927ac3f3f05a398' }, dutyDeMinimisMessage)), h("div", { key: 'af75e4d21ae1189d015376bfed3caf9156788ceb', class: "zonos--flex-message" }, h("zonos-icon", { key: '356fbbe36379ab8513822be08f8b4f3af4f8baf5', "aria-label": "Tax de minimis", content: MoneyIcon }), h("zonos-text", { key: '5b8fb3f1622bb49bbed21e0a81d6725a5825e931' }, taxDeMinimisMessage)), additionalInformation === null || additionalInformation === void 0 ? void 0 :
+            additionalInformation.map(info => (h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Additional information for buying goods from selected country", content: BagIcon }), h("zonos-text", { innerHTML: info })))))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), h("zonos-hello-dialog-footer", { key: '362873c8bac81efc80e44fae1d74a0bffae5e605', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", { key: '86d0d738e77d51666d3f63288aa1e954d539bb06' }, h("zonos-country-select", { key: '98766f096f97b249f0b4b3ebe053474de4ae498a', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", { key: '3268e1c0a9f7300b0e997ef238a4d95ec9d4f894' }, h("zonos-language-select", { key: '1b6d9dd2872332b2eba343ffd8798b1e87c71c2a', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
     }
     static get is() { return "zonos-hello-dialog"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,24 @@
 import { cartStore } from "../../store/checkout/cart";
 import { stripeStore } from "../../store/checkout/stripe";
+/**
+ * Extract value from translated object
+ */
+const getTranslatedAddress = ({ currentAddress, translatedAddress, }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const { city, country, line1, line2, postal_code, state } = currentAddress.value.address;
+    const name = currentAddress.value.name ||
+        [currentAddress.value.firstName, currentAddress.value.lastName].join(' ');
+    return {
+        city: ((_a = translatedAddress.city) === null || _a === void 0 ? void 0 : _a[city]) || city,
+        country,
+        line1: ((_b = translatedAddress.line1) === null || _b === void 0 ? void 0 : _b[line1]) || line1,
+        line2: ((_c = translatedAddress.line2) === null || _c === void 0 ? void 0 : _c[line2 || '']) || line2 || '',
+        name: ((_d = translatedAddress.name) === null || _d === void 0 ? void 0 : _d[name]) || name,
+        phone: currentAddress.value.phone || '',
+        postal_code: ((_e = translatedAddress.postal_code) === null || _e === void 0 ? void 0 : _e[postal_code]) || postal_code,
+        state: ((_f = translatedAddress.state) === null || _f === void 0 ? void 0 : _f[state]) || state,
+    };
+};
 export const prepCalculateLandedCost = () => {
     // maybe we don't need email now for prefetch the landed cost
     const stripeLinkData = stripeStore.stripeLinkEventData;
@@ -10,39 +29,52 @@ export const prepCalculateLandedCost = () => {
     if (!(stripeAddressData === null || stripeAddressData === void 0 ? void 0 : stripeAddressData.complete) || !(stripeBillingAddressData === null || stripeBillingAddressData === void 0 ? void 0 : stripeBillingAddressData.complete)) {
         throw new Error('Missing stripe address data');
     }
+    // Attempt to get translated address if available
+    const translatedShippingAddress = getTranslatedAddress({
+        currentAddress: stripeAddressData,
+        translatedAddress: stripeStore.translatedAddress.address,
+    });
+    const shippingFirstName = translatedShippingAddress.name.split(' ')[0] || '';
+    const shippingLastName = translatedShippingAddress.name.split(' ').splice(1).join(' ') || '';
+    const translatedBillingAddress = getTranslatedAddress({
+        currentAddress: stripeBillingAddressData,
+        translatedAddress: stripeStore.translatedAddress.address,
+    });
+    const billingFirstName = translatedBillingAddress.name.split(' ')[0] || '';
+    const billingLastName = translatedBillingAddress.name.split(' ').splice(1).join(' ') || '';
     return {
         billingAddress: {
-            addressLine1: stripeBillingAddressData.value.address.line1,
-            addressLine2: stripeBillingAddressData.value.address.line2 || '',
-            city: stripeBillingAddressData.value.address.city,
-            country: stripeBillingAddressData.value.address.country,
-            postalCode: stripeBillingAddressData.value.address.postal_code,
-            state: stripeBillingAddressData.value.address.state,
+            addressLine1: translatedBillingAddress.line1,
+            addressLine2: translatedBillingAddress.line2 || '',
+            city: translatedBillingAddress.city,
+            country: translatedBillingAddress.country,
+            postalCode: translatedBillingAddress.postal_code,
+            state: translatedBillingAddress.state,
         },
         billingContact: {
             // firstName and lastName should be valid now since stripe only mark
             // the address as complete when both fields are filled.
-            firstName: stripeBillingAddressData.value.firstName || '',
-            lastName: stripeBillingAddressData.value.lastName || '',
-            phone: stripeBillingAddressData.value.phone || '',
+            firstName: billingFirstName,
+            lastName: billingLastName,
+            phone: translatedBillingAddress.phone,
         },
         checkoutSessionId: cartStore.checkoutSessionId || '',
         contact: {
-            email: (stripeLinkData === null || stripeLinkData === void 0 ? void 0 : stripeLinkData.value.email) || '',
+            email: stripeLinkData === null || stripeLinkData === void 0 ? void 0 : stripeLinkData.value.email,
             // firstName and lastName should be valid now since stripe only mark
             // the address as complete when both fields are filled.
-            firstName: stripeAddressData.value.firstName || '',
-            lastName: stripeAddressData.value.lastName || '',
-            phone: stripeAddressData.value.phone || '',
+            firstName: shippingFirstName,
+            lastName: shippingLastName,
+            phone: translatedShippingAddress.phone,
         },
         items: cartStore.items,
         shippingAddress: {
-            addressLine1: stripeAddressData.value.address.line1,
-            addressLine2: stripeAddressData.value.address.line2 || '',
-            city: stripeAddressData.value.address.city,
-            country: stripeAddressData.value.address.country,
-            postalCode: stripeAddressData.value.address.postal_code,
-            state: stripeAddressData.value.address.state,
+            addressLine1: translatedShippingAddress.line1,
+            addressLine2: translatedShippingAddress.line2,
+            city: translatedShippingAddress.city,
+            country: translatedShippingAddress.country,
+            postalCode: translatedShippingAddress.postal_code,
+            state: translatedShippingAddress.state,
         },
     };
 };

package/dist/esm/{cart-b9f15a63.js → cart-f29968a8.js}

@@ -7140,6 +7140,25 @@ const localizationStoreUpdateSelectedLocale = (newSelectedLocale) => {
     void updateCheckoutSessionLanguage();
 };
 
+/**
+ * Extract value from translated object
+ */
+const getTranslatedAddress = ({ currentAddress, translatedAddress, }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const { city, country, line1, line2, postal_code, state } = currentAddress.value.address;
+    const name = currentAddress.value.name ||
+        [currentAddress.value.firstName, currentAddress.value.lastName].join(' ');
+    return {
+        city: ((_a = translatedAddress.city) === null || _a === void 0 ? void 0 : _a[city]) || city,
+        country,
+        line1: ((_b = translatedAddress.line1) === null || _b === void 0 ? void 0 : _b[line1]) || line1,
+        line2: ((_c = translatedAddress.line2) === null || _c === void 0 ? void 0 : _c[line2 || '']) || line2 || '',
+        name: ((_d = translatedAddress.name) === null || _d === void 0 ? void 0 : _d[name]) || name,
+        phone: currentAddress.value.phone || '',
+        postal_code: ((_e = translatedAddress.postal_code) === null || _e === void 0 ? void 0 : _e[postal_code]) || postal_code,
+        state: ((_f = translatedAddress.state) === null || _f === void 0 ? void 0 : _f[state]) || state,
+    };
+};
 const prepCalculateLandedCost = () => {
     // maybe we don't need email now for prefetch the landed cost
     const stripeLinkData = stripeStore.stripeLinkEventData;
@@ -7150,39 +7169,52 @@ const prepCalculateLandedCost = () => {
     if (!(stripeAddressData === null || stripeAddressData === void 0 ? void 0 : stripeAddressData.complete) || !(stripeBillingAddressData === null || stripeBillingAddressData === void 0 ? void 0 : stripeBillingAddressData.complete)) {
         throw new Error('Missing stripe address data');
     }
+    // Attempt to get translated address if available
+    const translatedShippingAddress = getTranslatedAddress({
+        currentAddress: stripeAddressData,
+        translatedAddress: stripeStore.translatedAddress.address,
+    });
+    const shippingFirstName = translatedShippingAddress.name.split(' ')[0] || '';
+    const shippingLastName = translatedShippingAddress.name.split(' ').splice(1).join(' ') || '';
+    const translatedBillingAddress = getTranslatedAddress({
+        currentAddress: stripeBillingAddressData,
+        translatedAddress: stripeStore.translatedAddress.address,
+    });
+    const billingFirstName = translatedBillingAddress.name.split(' ')[0] || '';
+    const billingLastName = translatedBillingAddress.name.split(' ').splice(1).join(' ') || '';
     return {
         billingAddress: {
-            addressLine1: stripeBillingAddressData.value.address.line1,
-            addressLine2: stripeBillingAddressData.value.address.line2 || '',
-            city: stripeBillingAddressData.value.address.city,
-            country: stripeBillingAddressData.value.address.country,
-            postalCode: stripeBillingAddressData.value.address.postal_code,
-            state: stripeBillingAddressData.value.address.state,
+            addressLine1: translatedBillingAddress.line1,
+            addressLine2: translatedBillingAddress.line2 || '',
+            city: translatedBillingAddress.city,
+            country: translatedBillingAddress.country,
+            postalCode: translatedBillingAddress.postal_code,
+            state: translatedBillingAddress.state,
         },
         billingContact: {
             // firstName and lastName should be valid now since stripe only mark
             // the address as complete when both fields are filled.
-            firstName: stripeBillingAddressData.value.firstName || '',
-            lastName: stripeBillingAddressData.value.lastName || '',
-            phone: stripeBillingAddressData.value.phone || '',
+            firstName: billingFirstName,
+            lastName: billingLastName,
+            phone: translatedBillingAddress.phone,
         },
         checkoutSessionId: cartStore.checkoutSessionId || '',
         contact: {
-            email: (stripeLinkData === null || stripeLinkData === void 0 ? void 0 : stripeLinkData.value.email) || '',
+            email: stripeLinkData === null || stripeLinkData === void 0 ? void 0 : stripeLinkData.value.email,
             // firstName and lastName should be valid now since stripe only mark
             // the address as complete when both fields are filled.
-            firstName: stripeAddressData.value.firstName || '',
-            lastName: stripeAddressData.value.lastName || '',
-            phone: stripeAddressData.value.phone || '',
+            firstName: shippingFirstName,
+            lastName: shippingLastName,
+            phone: translatedShippingAddress.phone,
         },
         items: cartStore.items,
         shippingAddress: {
-            addressLine1: stripeAddressData.value.address.line1,
-            addressLine2: stripeAddressData.value.address.line2 || '',
-            city: stripeAddressData.value.address.city,
-            country: stripeAddressData.value.address.country,
-            postalCode: stripeAddressData.value.address.postal_code,
-            state: stripeAddressData.value.address.state,
+            addressLine1: translatedShippingAddress.line1,
+            addressLine2: translatedShippingAddress.line2,
+            city: translatedShippingAddress.city,
+            country: translatedShippingAddress.country,
+            postalCode: translatedShippingAddress.postal_code,
+            state: translatedShippingAddress.state,
         },
     };
 };

package/dist/esm/index.js

@@ -245,9 +245,9 @@ const zonosLoadUrl = (() => {
     }
     return null;
 })();
-const ZONOS_URL = "https://v1.3.34.js.zonos.com";
-const JS_DELIVR_ZONOS_URL = zonosLoadUrl || "https://cdn.jsdelivr.net/npm/@zonos/elements@1.3.34";
-const UNPKG_ZONOS_URL = "https://unpkg.com/@zonos/elements@1.3.34";
+const ZONOS_URL = "https://v1.3.36.js.zonos.com";
+const JS_DELIVR_ZONOS_URL = zonosLoadUrl || "https://cdn.jsdelivr.net/npm/@zonos/elements@1.3.36";
+const UNPKG_ZONOS_URL = "https://unpkg.com/@zonos/elements@1.3.36";
 const MAIN_LOAD_CDN_TYPE = 'jsdelivr';
 const INTER_FONT_URL = 'https://rsms.me';
 const GOOGLE_FONT_URL = 'https://fonts.googleapis.com';
@@ -267,7 +267,7 @@ Zonos.isBigCommerce = false;
  */
 Zonos.isNpm = true;
 Zonos.zonosQaUrl = null;
-Zonos.version = `v${"1.3.34"}`;
+Zonos.version = `v${"1.3.36"}`;
 Zonos.modeAlerted = false;
 Zonos.tempCartData = null;
 Zonos.getCurrentTimestamp = () => new Date().getTime();

package/dist/esm/{submitGtag-8b52cfdd.js → submitGtag-fcfd5cf4.js}

@@ -1,4 +1,4 @@
-import { r as handleFetch, d as cartStore, l as localizationStore } from './cart-b9f15a63.js';
+import { r as handleFetch, d as cartStore, l as localizationStore } from './cart-f29968a8.js';
 import { z as zonosStore } from './zonosStore-ba9e541e.js';
 import { l as log } from './logError-c456c092.js';
 

package/dist/esm/zonos-address_8.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-3b46f3c3.js';
-import { h as stripeStore, l as localizationStore, t as translate } from './cart-b9f15a63.js';
+import { h as stripeStore, l as localizationStore, t as translate } from './cart-f29968a8.js';
 import { i as isCheckoutMobile } from './isCheckoutMobile-8846dccb.js';
 import { a as logError } from './logError-c456c092.js';
 import { i as isTextContainsNonLatinChars, c as containsNonLatinChars } from './containsNonLatinChars-2d8810c3.js';
@@ -208,16 +208,17 @@ const ZonosAddressForm = class {
     render() {
         const { city, country, line1, line2, name, phone, postal_code, state } = this.localAddress;
         const firstName = name.split(' ')[0] || '';
-        const lastName = name.split(' ')[1] || '';
-        return (h(Host, { key: '9c1ee87200d1f90e9dfac58c49aabba1777373a9', class: "zonos--address-form zonos--elements" }, h("div", { key: 'eec3416268ff2324fd751408552705086905423d', class: "zonos--title" }, h("zonos-text", { key: 'a4c254f78420dcfc712e1a83b20dd3ac9e64c460', textColor: "gray-700", type: "smallHeader" }, this.addressType === 'shipping'
+        // get the rest of the name if it exists
+        const lastName = name.split(' ').slice(1).join(' ') || '';
+        return (h(Host, { key: '8b578737e33203a23563be7e9be0778deec99bbf', class: "zonos--address-form zonos--elements" }, h("div", { key: '793675a1348547bf3f781788956befe325191011', class: "zonos--title" }, h("zonos-text", { key: '13de35cb0a7c98a48342e3fb86ae3ade9f5b88d9', textColor: "gray-700", type: "smallHeader" }, this.addressType === 'shipping'
             ? translate('Shipping')
-            : translate('Billing'))), h("div", { key: 'b8109545d282fb8c06a2e791c30088018d6ffec0', class: "zonos--address-group" }, h("div", { key: '833a395984cd75242e5d97697fd6566f11932d1b', class: "zonos--contact" }, h("zonos-text", { key: 'e60f574e95162aabf6465b878fc9b16c708e8029', type: "label" }, translate('Contact')), h("zonos-input", { key: '24cd24a362a1bbc76d0c91718c48ae32baa20ae6', class: "zonos--form-email", inputLabel: translate('Email'), inputValue: this.currentAddress.email, isDisabled: true }), h("div", { key: '84e64ef44eb3b39ac7ab542e07d7a52a95377cae', class: "zonos--name zonos--address-row" }, h("zonos-input", { key: '26621aca0d57a7fee743874b8d11af5f58c91b69', class: "zonos--form-first-name", inputLabel: translate('First name'), inputValue: firstName, isError: isTextContainsNonLatinChars(firstName), onInputChange: e => this.onInputChange({
+            : translate('Billing'))), h("div", { key: '2c5de5b5283fb99ee5f8b61d7a217177986fc2db', class: "zonos--address-group" }, h("div", { key: '23bf3c893071000d5995a5f175867bab11929193', class: "zonos--contact" }, h("zonos-text", { key: '7cdfe2a84ebad89ba5b16498d75def99cf392384', type: "label" }, translate('Contact')), h("zonos-input", { key: '1c39c38767fd306c5eb1164cdc989b8291209cf0', class: "zonos--form-email", inputLabel: translate('Email'), inputValue: this.currentAddress.email, isDisabled: true }), h("div", { key: 'cbdf61217125e22b1a6cec9a340ef0aca2c75670', class: "zonos--name zonos--address-row" }, h("zonos-input", { key: '360c99e7b2c6caa64580d5768b5bb53368927275', class: "zonos--form-first-name", inputLabel: translate('First name'), inputValue: firstName, isError: isTextContainsNonLatinChars(firstName), onInputChange: e => this.onInputChange({
                 key: 'name',
                 value: `${e.detail} ${lastName}`,
-            }) }), h("zonos-input", { key: '01e3e5038b4a4311dd5874a1213f936451dc300d', class: "zonos--form-last-name", inputLabel: translate('Last name'), inputValue: lastName, isError: isTextContainsNonLatinChars(lastName), onInputChange: e => this.onInputChange({
+            }) }), h("zonos-input", { key: '8ce5fa5c15c6f7928339ea10009ce0e68954a91f', class: "zonos--form-last-name", inputLabel: translate('Last name'), inputValue: lastName, isError: isTextContainsNonLatinChars(lastName), onInputChange: e => this.onInputChange({
                 key: 'name',
                 value: `${firstName} ${e.detail}`,
-            }) }))), h("div", { key: 'eb42dece28082ff16a453110b3208de5b44b9fdb', class: "zonos--address" }, h("zonos-text", { key: '3557122c716533be7b36a8bd395ea616a7061665', type: "label" }, translate('Address')), h("zonos-input", { key: 'bcc7d84d530f2f3a10537117eb6ef143df7cc8e2', class: "zonos--form-country", inputLabel: translate('Country'), inputValue: country, isDisabled: true }), h("zonos-input", { key: '6ce78e25151a129b69b501cf768604134a395e85', class: "zonos--form-line1", inputLabel: translate('Address line 1'), inputValue: line1, isError: isTextContainsNonLatinChars(line1), onInputChange: e => this.onInputChange({ key: 'line1', value: e.detail }) }), h("zonos-input", { key: '6f7a18010e2d8131327154a31ba58544df56768c', class: "zonos--form-line2", inputLabel: translate('Address line 2'), inputValue: line2, isError: isTextContainsNonLatinChars(line2), onInputChange: e => this.onInputChange({ key: 'line2', value: e.detail }) }), h("div", { key: '48afbf7a3cbd26fddfea4f2799005a51b1c3d3c6', class: "zonos--address-row" }, h("zonos-input", { key: '6decf8c430d8d25b2c555b110009da74e0ac9e5f', class: "zonos--form-city", inputLabel: translate('City'), inputValue: city, isError: isTextContainsNonLatinChars(city), onInputChange: e => this.onInputChange({ key: 'city', value: e.detail }) }), h("zonos-input", { key: '065e1be213d3cfec7749ab32890f96b0b484a25a', class: "zonos--form-state", inputLabel: translate('State/Province'), inputValue: state, isError: isTextContainsNonLatinChars(state), onInputChange: e => this.onInputChange({ key: 'state', value: e.detail }) })), h("zonos-input", { key: 'a69244bf84c9fd007c9ad4aad2b6cc6d44420775', class: "zonos--form-postal-code", inputLabel: translate('Postal code'), inputValue: postal_code, isError: isTextContainsNonLatinChars(postal_code), onInputChange: e => this.onInputChange({ key: 'postal_code', value: e.detail }) }), h("zonos-input", { key: '0bcc89de1ecc4aae8a69d74eff42dfd117ada40b', class: "zonos--form-phone", inputLabel: translate('Phone number'), inputValue: phone, onInputChange: e => this.onInputChange({ key: 'phone', value: e.detail }) })))));
+            }) }))), h("div", { key: '7b4fa2d3baa6cb257e7688e5ba6777123898b3fd', class: "zonos--address" }, h("zonos-text", { key: '9d5782331b2642755a755aeb7f98c9f4d87f9a20', type: "label" }, translate('Address')), h("zonos-input", { key: 'a622025924ca86bdbf1d3c04b79e6dee172b4c42', class: "zonos--form-country", inputLabel: translate('Country'), inputValue: country, isDisabled: true }), h("zonos-input", { key: 'f99b3a74db09ab5730878e80705b9aeac76bf800', class: "zonos--form-line1", inputLabel: translate('Address line 1'), inputValue: line1, isError: isTextContainsNonLatinChars(line1), onInputChange: e => this.onInputChange({ key: 'line1', value: e.detail }) }), h("zonos-input", { key: '5d16aefa45a78045c87d166aaaec0255606e455e', class: "zonos--form-line2", inputLabel: translate('Address line 2'), inputValue: line2, isError: isTextContainsNonLatinChars(line2), onInputChange: e => this.onInputChange({ key: 'line2', value: e.detail }) }), h("div", { key: 'dc166be9381142835d72e731cb38a718522a068a', class: "zonos--address-row" }, h("zonos-input", { key: '4f1a98f9d10ce0cff3ef18a3037a12382552b31d', class: "zonos--form-city", inputLabel: translate('City'), inputValue: city, isError: isTextContainsNonLatinChars(city), onInputChange: e => this.onInputChange({ key: 'city', value: e.detail }) }), h("zonos-input", { key: 'd4f97900b5fe2e1619950a52d1d1f716a8bc19ff', class: "zonos--form-state", inputLabel: translate('State/Province'), inputValue: state, isError: isTextContainsNonLatinChars(state), onInputChange: e => this.onInputChange({ key: 'state', value: e.detail }) })), h("zonos-input", { key: 'cf1eb0ca5cd15c8412a2e1246aaf2e39361dc733', class: "zonos--form-postal-code", inputLabel: translate('Postal code'), inputValue: postal_code, isError: isTextContainsNonLatinChars(postal_code), onInputChange: e => this.onInputChange({ key: 'postal_code', value: e.detail }) }), h("zonos-input", { key: '7421c82847eded6bdbcce49ef8196124d8e50c1d', class: "zonos--form-phone", inputLabel: translate('Phone number'), inputValue: phone, onInputChange: e => this.onInputChange({ key: 'phone', value: e.detail }) })))));
     }
     static get watchers() { return {
         "translatedAddress": ["watchCurrentAddress"]
@@ -231,13 +232,13 @@ const ZonosAddressUpdateDialogStyle0 = zonosAddressUpdateDialogCss;
 const ZonosAddressUpdateDialog = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.closeDialog = createEvent(this, "closeDialog", 7);
+        this.closeUpdateDialog = createEvent(this, "closeUpdateDialog", 7);
         this.continueClicked = createEvent(this, "continueClicked", 7);
         /**
          * handler for close button click
          */
-        this.closeDialogHandler = () => {
-            this.closeDialog.emit();
+        this.closeUpdateDialogHandler = () => {
+            this.closeUpdateDialog.emit();
         };
         /**
          * Extract value from translated object
@@ -367,24 +368,24 @@ const ZonosAddressUpdateDialog = class {
             : this.submitBtnType || 'standard';
         const billing = this.billingAddress;
         const shipping = this.shippingAddress;
-        return (h(Host, { key: '03535edacb348258592641baa349e9dcf14bf78c', class: classes([
+        return (h(Host, { key: '655845cef04f4af526b1a1c4e49243c4f2b4c7f6', class: classes([
                 'zonos--address-update-dialog zonos--elements',
                 this.isMobile && 'mobile',
-            ]) }, h("zonos-dialog", { key: 'c16871425dffe955d422ffa5b9aee1ece0da2890', isLoading: this.dialogLoading, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeDialog.emit(), open: this.dialogOpen, width: "568px" }, h("div", { key: 'e4fad501f7cfedc5783774d8b1bf785d6947d3c8', class: "zonos--body" }, h("div", { key: '973e7a8097b8c8f60e47e6ad9d8311a64a5a6ff0', class: "zonos--dialog-header" }, h("div", { key: '89c82b6ff3723056d161560da22bd16a992afee7', class: "zonos--dialog-title" }, h("zonos-text", { key: 'bf92ef0b40ea67a492164fedb95dd68b7d023e85', type: "title" }, translate('Update your address')), h("zonos-button", { key: '4e7a1905c976cec396db5c34f633b383bba0d55a', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon$1 }), noBackground: true, onClick: () => this.closeDialogHandler() })), h("zonos-text", { key: '47b42d8cc14c4757e3fc9f2f43eafbd8d9e9df38' }, translate('To ensure delivery all address details must be in Latin characters.'))), h("div", { key: '28d9804f0a18f143ce541c2c511cbfa21a2a416f', class: "zonos--group" }, h("zonos-text", { key: '43ec5a9fc8594d065b256952ca8e9392fba03839', class: "zonos--what-you-entered", type: "semiBoldLabel" }, translate('What you entered')), h("div", { key: 'b7eb7781ce6aefe20f89b4d5fba190f0102eb5d1', class: "zonos--address-display-group" }, h("zonos-address-display", { key: '152c53176a46575677723ca47386e484c659927a', addressType: "shipping", currentAddress: shipping }), billing && (h("zonos-address-display", { key: '6c7ac2b49d121c26ce45f09a1eac9ef456d45910', addressType: "billing", currentAddress: billing }))), h("div", { key: '2bda98bb0ac9bafcb009ff36fb97a9fc62ce7e2d', class: "zonos--address-form-section" }, h("zonos-text", { key: '87d3380072a049ccde71ba1b752aedd36830348b', type: "semiBoldLabel" }, translate('Translated address')), h("zonos-address-form", { key: '2cb36251c6549da05e272183b2c37478b4166fea', addressType: "shipping", class: "zonos--shipping-address-form", currentAddress: shipping, onAddressChange: e => {
+            ]) }, 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" }, h("div", { key: '08f0400e62addfcaffd91bf5200999d29bbd2da9', class: "zonos--body" }, h("div", { key: '8699df5e2f823e19066fbb552ba2a66c127c05e9', class: "zonos--dialog-header" }, h("div", { key: '92e0ff932dcdb0e5b59ea34b688d1ef8e31bfeb3', class: "zonos--dialog-title" }, h("zonos-text", { key: 'aaac3375526bddb319ce7c8f49bde30da7210264', type: "title" }, translate('Update your address')), h("zonos-button", { key: '66abf7b74045e68e84e631298504236d32ca9c4e', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon$1 }), noBackground: true, onClick: () => this.closeUpdateDialogHandler() })), h("zonos-text", { key: 'ffb3d8f169867d5f6dff269e1becd99c98c5a7da' }, translate('To ensure delivery all address details must be in Latin characters.'))), h("div", { key: '2cb61f06ce174e2317870decfdd337c67c5cf128', class: "zonos--group" }, h("zonos-text", { key: 'a616c540984120b468e52bccfb380ea3974ced22', class: "zonos--what-you-entered", type: "semiBoldLabel" }, translate('What you entered')), h("div", { key: '6ac8f9c14472370c501af1b0d50bd8f8746b7694', class: "zonos--address-display-group" }, h("zonos-address-display", { key: 'ea2c67a7bba51c99f80be968e448beeffcf1f863', addressType: "shipping", currentAddress: shipping }), billing && (h("zonos-address-display", { key: '7ea1683dc04a292810e04ed6550d86086f25186f', addressType: "billing", currentAddress: billing }))), h("div", { key: '4d1cd9096943518b8b4e267608a5e1542befb6a9', class: "zonos--address-form-section" }, h("zonos-text", { key: 'e4184a2cc618d26d43979fa8cfe06070cf8b5af8', type: "semiBoldLabel" }, translate('Translated address')), h("zonos-address-form", { key: 'c55d9d3c658565ceb7c7b879f444e3937b9f7ad6', addressType: "shipping", class: "zonos--shipping-address-form", currentAddress: shipping, onAddressChange: e => {
                 const address = e.detail;
                 this.translatedShippingAddressState =
                     this.buildTranslateAddressState({
                         currentAddress: shipping,
                         translatedAddress: address,
                     });
-            }, translatedAddress: this.translatedShippingAddressState }), billing && (h("zonos-address-form", { key: '9bf5ebd6fb08851716a72c855451bfeb3ee0ed68', addressType: "billing", class: "zonos--billing-address-form", currentAddress: billing, onAddressChange: e => {
+            }, translatedAddress: this.translatedShippingAddressState }), billing && (h("zonos-address-form", { key: 'c3facc295b1322bb00baa6081f343dcea4f10777', addressType: "billing", class: "zonos--billing-address-form", currentAddress: billing, onAddressChange: e => {
                 const address = e.detail;
                 this.translatedBillingAddressState =
                     this.buildTranslateAddressState({
                         currentAddress: billing,
                         translatedAddress: address,
                     });
-            }, translatedAddress: this.translatedBillingAddressState })))), h("div", { key: '621df9c8919973b37c62aca5727bde3635086a6b', class: "zonos--group-btn" }, h("div", { key: '95e9fd31418abc8e89ceef24af7cc251ee45ac93', class: "zonos--button-wrapper" }, h("zonos-button", { key: 'bef31fc81e7cc0f2b3f7ab875a29978b07865b6a', class: "zonos--cancel-btn", onClick: () => this.closeDialogHandler(), variant: "subtle" }, translate('Cancel')), h("zonos-button", { key: '9d183153541766b421c3420681c1159ffa599682', backgroundColor: this.submitBtnColor, class: "zonos--update-btn", loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "sm", variant: submitBtnType }, translate('Update address'))))))));
+            }, translatedAddress: this.translatedBillingAddressState })))), h("div", { key: '1c89c9604ba0dece40275fcfac97e7f93706b430', class: "zonos--group-btn" }, h("div", { key: 'e47d393940b094b4e123864e4070daa87f0616f0', class: "zonos--button-wrapper" }, h("zonos-button", { key: '216b7afe268a4acd6bb8a76b7f5a32dc09bdd4f6', class: "zonos--cancel-btn", onClick: () => this.closeUpdateDialogHandler(), variant: "subtle" }, translate('Cancel')), h("zonos-button", { key: 'acbacb92cedb325b46843d8f3aff13f4e7c86ab5', backgroundColor: this.submitBtnColor, class: "zonos--update-btn", loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "sm", variant: submitBtnType }, translate('Update address'))))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -516,7 +517,7 @@ const ZonosDialogStyle0 = zonosDialogCss;
 const ZonosDialog = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.closeDialog = createEvent(this, "closeDialog", 7);
+        this.closeDialog = createEvent(this, "closeDialog", 3);
         this.isMobileMode = () => {
             return this.mobile || window.innerWidth <= 768;
         };
@@ -569,7 +570,7 @@ const ZonosDialog = class {
         const borderStyle = getBorderRadius({
             overrideBorderStyle: this.borderStyle,
         });
-        return (h(Host, { key: '9478fd5dd572bc1a677146025485b74321700fba', class: classes([
+        return (h(Host, { key: '018771d0e01311ae520abcf33fbd64316794b202', class: classes([
                 'zonos--elements',
                 this.open && 'open',
                 this.isLoading && 'is-loading',
@@ -581,10 +582,10 @@ const ZonosDialog = class {
                 '--height': this.height || 'initial',
                 '--min-height': this.minHeight || '500px',
                 '--width': this.width,
-            } }, h("div", { key: '4bc8f62202bbae238d07536f3234bdc00c6d689f', class: "zonos--backdrop" }), h("div", { key: 'da80cf2a9b0a19e4e42062a57fed91ecfe6c0bcf', "aria-hidden": "true", class: "zonos--dialog-layout", onClick: this.clickOutsideDialogHandler }, h("div", { key: '7bbaacf6fbb5ff70db62246254f007006146324e', class: "zonos--dialog" }, this.isLoading && (h("div", { key: 'c65e9205d105456072b4c3c7549dce937dd7f8ec', class: "zonos--loading" }, h("zonos-spinner", { key: 'ac3667841a42f0ae55831a449c07bdfadc976971', size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { key: '9e2c9ec2c4a9be64169f2f6b6473bc16516fbff1', class: "zonos--header" }, this.headerText && (h("h3", { key: '0b2086b13d7cfc14901527afbb087c40eb76895d', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: '2d2b55e65e965071f6422665eaa8be7991450a93', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler, variant: "subtle" })))), h("div", { key: 'aedb5b3b307a5a04f9b806c927679d0e0c0de711', class: classes([
+            } }, h("div", { key: 'a86c9f8465054fde894bbdd71149e59d97e8cbcf', class: "zonos--backdrop" }), h("div", { key: 'b2f0c86fa0e768474ba4d522f8c2b8157f89cd56', class: "zonos--dialog-layout", inert: !this.open, onClick: this.clickOutsideDialogHandler }, h("div", { key: '26cd8a7b98d38c53dcf4789c8781f0c1ced99633', class: "zonos--dialog" }, this.isLoading && (h("div", { key: '34d0ba841a9af9ca2ff6d21d0471113cc86cdec3', class: "zonos--loading" }, h("zonos-spinner", { key: '0109778b1a9734de0959035e3975414fb1cac1be', size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { key: 'f80a4c337727500ee1ad92c1d80d7b3088eccc0f', class: "zonos--header" }, this.headerText && (h("h3", { key: '92b078fbbcd9ca5f8bf178fc67f2bee817d1e961', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: '698e45fffd466f22b6179aa220d35fe39ee5374c', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler, variant: "subtle" })))), h("div", { key: 'a4012e5a48d5fbcc77cac038d8a39fe05f332008', class: classes([
                 'zonos--body',
                 this.noBodyPadding && 'zonos--no-body-padding',
-            ]) }, h("slot", { key: '5f55d5771bc62a54865ee3bf8a25f571bfd7fbd1' })), h("slot", { key: '95053c3ebf850f1f9796163122f9224f4190d1c9', name: "dialog-footer" })))));
+            ]) }, h("slot", { key: 'd64b381cb91afde4ddbde58348a62612d9871c8e' })), h("slot", { key: '4ddd73bfe41ecd1c90b18f82a8d8f12a1eacf144', name: "dialog-footer" })))));
     }
     static get assetsDirs() { return ["assets"]; }
 };

package/dist/esm/zonos-cart-items_12.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, a as getAssetPath, h, H as Host, F as Fragment, c as createEvent, d as getElement } from './index-3b46f3c3.js';
-import { d as cartStore, B as currencyFormat, C as cartStoreHasOneEligibleItem, t as translate, r as handleFetch, p as stripeStoreReset, h as stripeStore, D as stripeStoreRetrievePayment, l as localizationStore, E as stripeStoreTranslateAddressToLatin, F as cartStoreUpdateSelectedShippingOption, G as cartStoreGetShippingTransitInfo } from './cart-b9f15a63.js';
+import { d as cartStore, B as currencyFormat, C as cartStoreHasOneEligibleItem, t as translate, r as handleFetch, p as stripeStoreReset, h as stripeStore, D as stripeStoreRetrievePayment, l as localizationStore, E as stripeStoreTranslateAddressToLatin, F as cartStoreUpdateSelectedShippingOption, G as cartStoreGetShippingTransitInfo } from './cart-f29968a8.js';
 import { c as classes } from './classes-0d95c529.js';
 import { z as zonosStore, g as getZonosStoreTheme, d as zonosStoreFontFamily } from './zonosStore-ba9e541e.js';
-import { t as trackConversionEvent, s as sendErrorLog, a as submitGtag, c as createCustomEvent, g as getIsTestMode } from './submitGtag-8b52cfdd.js';
+import { t as trackConversionEvent, s as sendErrorLog, a as submitGtag, c as createCustomEvent, g as getIsTestMode } from './submitGtag-fcfd5cf4.js';
 import { g as getBorderRadius } from './getBorderRadius-947c24de.js';
 import { i as isCheckoutMobile } from './isCheckoutMobile-8846dccb.js';
 import { l as languages } from './ILanguage-cd6acb72.js';
@@ -715,7 +715,9 @@ const ZonosCustomerInfo = class {
             // overwrite the address object with the new data
             stripeEventDataObj = Object.assign(Object.assign({}, stripeEventDataObj), { complete: true, value: Object.assign(Object.assign({}, stripeEventDataObj === null || stripeEventDataObj === void 0 ? void 0 : stripeEventDataObj.value), { address: Object.assign(Object.assign({}, stripeEventDataObj === null || stripeEventDataObj === void 0 ? void 0 : stripeEventDataObj.value.address), { city: submitDataByKey.city ||
                             (stripeEventDataObj === null || stripeEventDataObj === void 0 ? void 0 : stripeEventDataObj.value.address.city) ||
-                            '', line1: submitDataByKey.line1, line2: submitDataByKey.line2, postal_code: submitDataByKey.postal_code, state: submitDataByKey.state }), firstName: submitDataByKey.name.split(' ')[0], lastName: submitDataByKey.name.split(' ')[1], name: submitDataByKey.name }) });
+                            '', line1: submitDataByKey.line1, line2: submitDataByKey.line2, postal_code: submitDataByKey.postal_code, state: submitDataByKey.state }), firstName: submitDataByKey.name.split(' ')[0],
+                    // get all the names after
+                    lastName: submitDataByKey.name.split(' ').slice(1).join(' '), name: submitDataByKey.name }) });
         };
         /**
          * handler for continue button click
@@ -844,12 +846,16 @@ const ZonosCustomerInfo = class {
             variant: this.submitBtnType }, translate('Continue to shipping')))), stripeStore.stripeAddressEventData && (h("zonos-address-update-dialog", { billingAddress: !stripeStore.stripeShippingSameAsBilling &&
                 stripeStore.stripeBillingAddressEventData
                 ? this.prepareAddressObject(stripeStore.stripeBillingAddressEventData)
-                : null, "data-theme": theme, dialogLoading: this.isValidatingAddress, dialogOpen: this.openAddressValidationDialog, isMobile: this.isMobile, onCloseDialog: () => (this.openAddressValidationDialog = false), onContinueClicked: e => {
+                : null, "data-theme": theme, dialogLoading: this.isValidatingAddress, dialogOpen: this.openAddressValidationDialog, isMobile: this.isMobile, onCloseUpdateDialog: () => (this.openAddressValidationDialog = false), onContinueClicked: e => {
                 const submitData = e.detail;
                 this.transformTranslatedAddressToStripeEvent({
                     submitData,
                     type: 'shippingAddress',
                 });
+                this.transformTranslatedAddressToStripeEvent({
+                    submitData,
+                    type: 'billingAddress',
+                });
             }, shippingAddress: this.prepareAddressObject(stripeStore.stripeAddressEventData), translatedBillingAddress: stripeStore.translatedAddress.billingAddress, translatedShippingAddress: stripeStore.translatedAddress.address }))));
     }
     get el() { return getElement(this); }

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, H as Host, F as Fragment } from './index-3b46f3c3.js';
-import { l as localizationStore, s as stripeStoreGetDomesticShippingSession, a as localizationStoreUpdateSelectedCountryCode, b as stripeStoreCleanupDomesticShippingSession, c as stripeStoreSaveDomesticShippingSession, i as initStripeElements, d as cartStore, e as cartStoreUpdateItems, f as cartStoreReset, g as cartStoreResetTabItems, h as stripeStore, j as stripeStoreInitCheckoutSession, k as cartStoreUpdateToErrorState, t as translate, m as stripeStorePrefetchLandedCost, n as cartStoreNextStep, o as stripeStoreConfirmPayment, p as stripeStoreReset, q as localizationStoreOnUpdate } from './cart-b9f15a63.js';
+import { l as localizationStore, s as stripeStoreGetDomesticShippingSession, a as localizationStoreUpdateSelectedCountryCode, b as stripeStoreCleanupDomesticShippingSession, c as stripeStoreSaveDomesticShippingSession, i as initStripeElements, d as cartStore, e as cartStoreUpdateItems, f as cartStoreReset, g as cartStoreResetTabItems, h as stripeStore, j as stripeStoreInitCheckoutSession, k as cartStoreUpdateToErrorState, t as translate, m as stripeStorePrefetchLandedCost, n as cartStoreNextStep, o as stripeStoreConfirmPayment, p as stripeStoreReset, q as localizationStoreOnUpdate } from './cart-f29968a8.js';
 import { z as zonosStore, g as getZonosStoreTheme, m as mergeConfig } from './zonosStore-ba9e541e.js';
-import { c as createCustomEvent, s as sendErrorLog, a as submitGtag, t as trackConversionEvent, g as getIsTestMode } from './submitGtag-8b52cfdd.js';
+import { c as createCustomEvent, s as sendErrorLog, a as submitGtag, t as trackConversionEvent, g as getIsTestMode } from './submitGtag-fcfd5cf4.js';
 import { i as isCheckoutMobile } from './isCheckoutMobile-8846dccb.js';
 import { l as log, a as logError } from './logError-c456c092.js';
 import { c as classes } from './classes-0d95c529.js';

package/dist/esm/zonos-controller.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-3b46f3c3.js';
-import { r as handleFetch, u as isValidSelector, h as stripeStore, v as initLocalizationStore, d as cartStore, a as localizationStoreUpdateSelectedCountryCode } from './cart-b9f15a63.js';
+import { r as handleFetch, u as isValidSelector, h as stripeStore, v as initLocalizationStore, d as cartStore, a as localizationStoreUpdateSelectedCountryCode } from './cart-f29968a8.js';
 import { z as zonosStore, b as zonosStoreInitSetting, d as zonosStoreFontFamily } from './zonosStore-ba9e541e.js';
 import { a as logError, l as log } from './logError-c456c092.js';
 import './isDarkColor-f8324c10.js';

package/dist/esm/zonos-country-flag.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, d as getElement } from './index-3b46f3c3.js';
-import { l as localizationStore } from './cart-b9f15a63.js';
+import { l as localizationStore } from './cart-f29968a8.js';
 import { d as zonosStoreFontFamily } from './zonosStore-ba9e541e.js';
 import { c as classes } from './classes-0d95c529.js';
 import './logError-c456c092.js';