@zonos/elements 1.3.282 → 1.3.283

package/dist/cjs/zonos-address-completion-dialog_7.cjs.entry.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b1f95d96.js');
-const localization = require('./localization-491121ad.js');
+const localization = require('./localization-783849c8.js');
 const zonosStore = require('./zonosStore-fee716c9.js');
-const getMissingRequiredShippingFields = require('./getMissingRequiredShippingFields-7cd21100.js');
+const getMissingRequiredShippingFields = require('./getMissingRequiredShippingFields-a6c4f625.js');
 const classes = require('./classes-b7918f56.js');
-const cart = require('./cart-dc31b242.js');
+const cart = require('./cart-a1c00090.js');
 const RemoveIcon$1 = require('./RemoveIcon-081ac073.js');
 const containsNonLatinChars = require('./containsNonLatinChars-2be5129b.js');
 const getBorderRadius = require('./getBorderRadius-4da24d7c.js');
@@ -500,6 +500,30 @@ const isValidZip = ({ countryFields, zip, }) => {
     return countryFields.zipRequired && !!zip;
 };
 
+const hasCountries = (countries) => !!countries && Object.keys(countries).length > 0;
+/**
+ * Builds the country options for an address form's country dropdown.
+ *
+ * Shipping addresses are restricted to the merchant's shipping zone, since we
+ * can only fulfill orders to those countries. Billing addresses are not — a
+ * shopper's card can be billed to any country, so restricting the billing
+ * country prevents them from checking out at all (05CHECK-915).
+ *
+ * When the full country list is unavailable we fall back to the shipping zone
+ * so the dropdown is never empty.
+ */
+const getAddressCountryOptions = ({ allCountries, shippingZoneCountries, type, }) => {
+    const countries = type === 'billing' && hasCountries(allCountries)
+        ? allCountries
+        : shippingZoneCountries;
+    return Object.values(countries || {})
+        .map(country => ({
+        label: country.displayName,
+        value: country.code,
+    }))
+        .sort((a, b) => a.label.localeCompare(b.label));
+};
+
 const mergeAddress = ({ addresses, delimiter = ' ', }) => {
     // Remove duplicate addresses
     const addressSet = new Set(addresses.filter(Boolean));
@@ -564,14 +588,6 @@ const ZonosAddress = class {
          * Whether to start google place suggestions
          */
         this.startGooglePlaceSuggestions = false;
-        /**
-         * List of countries to show in the address element
-         */
-        this.shipToCountries = null;
-        /**
-         * Shipping zones from localization
-         */
-        this.shippingZones = null;
         this.city = '';
         this.country = '';
         this.firstName = '';
@@ -611,6 +627,14 @@ const ZonosAddress = class {
          * Google autocomplete overlay is conflict with our button, this is to adjust z index of the autocomplete
          */
         this.isAutoCompleteAdjusted = false;
+        /**
+         * Memoized country options, keyed on the store references they derive from.
+         * `render()` runs on every keystroke, and rebuilding the list each time would
+         * re-sort ~244 countries and hand `zonos-stripe-select` a new array identity,
+         * re-rendering it needlessly. `@stencil/store` replaces these references
+         * wholesale rather than mutating them, so reference equality is a safe key.
+         */
+        this.countryOptionsCache = null;
         // Create a single throttled instance that persists
         this.throttledGetAddressSuggestions = throttle.throttle_1(() => {
             if (zonosStore.zonosStore.checkoutAddressService) {
@@ -762,6 +786,28 @@ const ZonosAddress = class {
             this.onStoreCheckoutSessionIdChangedSubscription = localization.storageStoreOnChange('checkoutSessionId', onCheckoutSessionIdChange);
         };
     }
+    getCountryOptions() {
+        const { allCountries, shippingZoneCountries } = localization.localizationStore;
+        const cache = this.countryOptionsCache;
+        if (cache &&
+            cache.allCountries === allCountries &&
+            cache.shippingZoneCountries === shippingZoneCountries &&
+            cache.type === this.type) {
+            return cache.options;
+        }
+        const options = getAddressCountryOptions({
+            allCountries,
+            shippingZoneCountries,
+            type: this.type,
+        });
+        this.countryOptionsCache = {
+            allCountries,
+            options,
+            shippingZoneCountries,
+            type: this.type,
+        };
+        return options;
+    }
     getStripeAddressInstance() {
         if (this.type === 'billing') {
             return {
@@ -1188,24 +1234,19 @@ const ZonosAddress = class {
         this.initAddressSuggestions();
         this.initDefaultCustomAddressForm();
     }
-    shippingZonesChanged() {
-        this.shippingZones = localization.localizationStore.shippingZoneCountries;
-        this.shipToCountries = Object.values(this.shippingZones || {})
-            .map(country => ({
-            label: country.displayName,
-            value: country.code,
-        }))
-            .sort((a, b) => {
-            return a.label.localeCompare(b.label);
-        });
-    }
     renderCustomAddressForm() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
-        const _t = this.getCustomAddressErrors(), { showError } = _t, customAddressErrors = __rest(_t, ["showError"]);
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+        const _s = this.getCustomAddressErrors(), { showError } = _s, customAddressErrors = __rest(_s, ["showError"]);
         const stripeAddressEventData = this.getStripeAddressInstance().stripeAddressEventData;
         const countryCode = stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.country;
-        const firstCountry = (_a = this.shipToCountries) === null || _a === void 0 ? void 0 : _a[0];
-        const stateOptions = Object.entries(((_b = this.countryField) === null || _b === void 0 ? void 0 : _b.regions) || {})
+        /**
+         * Billing addresses are not limited to the shipping zone: a shopper's card
+         * can be billed to any country, so restricting it would block them from
+         * checking out entirely (05CHECK-915).
+         */
+        const countryOptions = this.getCountryOptions();
+        const firstCountry = countryOptions[0];
+        const stateOptions = Object.entries(((_a = this.countryField) === null || _a === void 0 ? void 0 : _a.regions) || {})
             .map(([label, region]) => ({
             label,
             value: region.interpayCode,
@@ -1239,7 +1280,7 @@ const ZonosAddress = class {
                  * Therefore, we must update the value after validation to ensure correct error state
                  */
                 this.lastName = event.detail;
-            }, required: true }), index.h("zonos-stripe-select", { "aria-required": "true", autoComplete: "shipping country", class: "zonos--custom-address-form-input", name: `${this.type}-country`, onSelectChange: (event) => {
+            }, required: true }), index.h("zonos-stripe-select", { "aria-required": "true", autoComplete: `${this.type} country`, class: "zonos--custom-address-form-input", name: `${this.type}-country`, onSelectChange: (event) => {
                 this.countryChanged(event.detail);
                 // revalidate the postal code since with empty value so it would reset the customAddressErrors
                 this.validate({
@@ -1268,9 +1309,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: countryOptions, required: true, selectLabel: localization.translate('Country'), selectedValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.country) ||
                 localization.localizationStore.selectedCountryCode ||
-                (firstCountry === null || firstCountry === void 0 ? void 0 : firstCountry.value), title: `${this.type} country` }), index.h("div", { class: "zonos--custom-address-form-line1-wrapper" }, index.h("zonos-stripe-input", { "aria-autocomplete": "list", "aria-controls": "autocomplete-search", "aria-required": "true", autoComplete: "shipping address-line1", class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.line1 : undefined, inputLabel: localization.translate('Address line 1'), inputValue: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.line1, name: "address-line1", onInputChange: (event) => {
+                (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: `${this.type} address-line1`, class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.line1 : undefined, inputLabel: localization.translate('Address line 1'), inputValue: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.line1, name: "address-line1", onInputChange: (event) => {
                 this.validate({
                     type: this.type,
                     value: event.detail,
@@ -1301,9 +1342,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: `${this.type} address-line2`, class: "zonos--custom-address-form-input", inputLabel: localization.translate(((_b = this.countryField) === null || _b === void 0 ? void 0 : _b.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) => {
+            } }), ((_c = this.countryField) === null || _c === void 0 ? void 0 : _c.cityShow) && (index.h("zonos-stripe-input", { "aria-required": ((_d = this.countryField) === null || _d === void 0 ? void 0 : _d.cityRequired) ? 'true' : 'false', autoComplete: `${this.type} address-level2`, class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.city : undefined, inputLabel: localization.translate(((_e = this.countryField) === null || _e === void 0 ? void 0 : _e.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,
@@ -1317,7 +1358,7 @@ const ZonosAddress = class {
                  * Therefore, we must update the value after validation to ensure correct error state
                  */
                 this.city = event.detail;
-            }, required: (_g = this.countryField) === null || _g === void 0 ? void 0 : _g.cityRequired })), index.h("div", { class: "zonos--custom-address-form-state-zip-wrapper" }, ((_h = this.countryField) === null || _h === void 0 ? void 0 : _h.stateShow) && (index.h("zonos-stripe-select", { "aria-required": ((_j = this.countryField) === null || _j === void 0 ? void 0 : _j.stateRequired) ? 'true' : 'false', autoComplete: "shipping address-level1", class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.state : undefined, isError: showError && !!customAddressErrors.state, name: `${this.type}-state`, onSelectChange: (event) => {
+            }, required: (_f = this.countryField) === null || _f === void 0 ? void 0 : _f.cityRequired })), index.h("div", { class: "zonos--custom-address-form-state-zip-wrapper" }, ((_g = this.countryField) === null || _g === void 0 ? void 0 : _g.stateShow) && (index.h("zonos-stripe-select", { "aria-required": ((_h = this.countryField) === null || _h === void 0 ? void 0 : _h.stateRequired) ? 'true' : 'false', autoComplete: `${this.type} address-level1`, class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.state : undefined, isError: showError && !!customAddressErrors.state, name: `${this.type}-state`, onSelectChange: (event) => {
                 this.validate({
                     type: this.type,
                     value: event.detail,
@@ -1331,9 +1372,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: (_j = this.countryField) === null || _j === void 0 ? void 0 : _j.stateRequired, selectLabel: localization.translate(((_k = this.countryField) === null || _k === void 0 ? void 0 : _k.stateLabel) || 'State'), selectedValue: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.state, title: `${this.type} state` })), ((_l = this.countryField) === null || _l === void 0 ? void 0 : _l.zipShow) && (index.h("zonos-stripe-input", { "aria-describedby": ((_m = this.countryField) === null || _m === void 0 ? void 0 : _m.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": ((_o = this.countryField) === null || _o === void 0 ? void 0 : _o.zipRequired) ? 'true' : 'false', autoComplete: `${this.type} postal-code`, class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.postalCode : undefined, inputLabel: localization.translate(((_p = this.countryField) === null || _p === void 0 ? void 0 : _p.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,
@@ -1347,7 +1388,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: (_q = this.countryField) === null || _q === void 0 ? void 0 : _q.zipRequired, title: `${this.type} zip code` }))), index.h("zonos-stripe-phone-input", { autoComplete: `${this.type} tel`, class: "zonos--custom-address-form-input", countryCode: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.country, countryOptions: (_r = zonosStore.zonosStore.genericSettings) === null || _r === void 0 ? void 0 : _r.countryFields, error: showError ? customAddressErrors.phone : undefined, inputLabel: localization.translate('Phone number'), inputValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.phone) || '', onInputValueChange: event => {
                 const { isEmpty, phoneNumber, valid, wrongFormat } = event.detail;
                 // Validate the phone number
                 this.validate({
@@ -1388,14 +1429,6 @@ const ZonosAddress = class {
     }
     componentDidLoad() {
         const stripeAddressEventData = this.getStripeAddressInstance().stripeAddressEventData;
-        this.shipToCountries = Object.values(localization.localizationStore.shippingZoneCountries || {})
-            .map(country => ({
-            label: country.displayName,
-            value: country.code,
-        }))
-            .sort((a, b) => {
-            return a.label.localeCompare(b.label);
-        });
         this.isDirtyAddress =
             !!stripeAddressEventData &&
                 stripeAddressEventData.value.address.line1.length > 0;
@@ -1408,7 +1441,6 @@ const ZonosAddress = class {
     }
     render() {
         var _a;
-        this.shippingZones = localization.localizationStore.shippingZoneCountries;
         this.addressService = zonosStore.zonosStore.checkoutAddressService;
         if ((_a = cart.stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.complete) {
             this.isAddressFilled = true;
@@ -1418,10 +1450,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: '1e90973654268e1af1e98bf606f71d55c63f5656', class: classes.classes([
+        return (index.h(index.Host, { key: '5baf00df63a693613f493a84c906898080dcbfa2', class: classes.classes([
                 'zonos--address zonos--elements',
                 `zonos--${this.type}-address`,
-            ]) }, index.h("zonos-text", { key: 'f986a00640502fb262cc424e57f5edb1f4cdbb9c', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), index.h("slot", { key: '57ae4b8393e350b99112e6a7800a97d6a524d57c', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderShortAddressCodeInput(), this.renderCustomAddressForm()));
+            ]) }, index.h("zonos-text", { key: 'f5079e30a1eadceffaac7fef5aa5296b1f9f480b', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), index.h("slot", { key: 'fcbd1bac9e06e91c9e4a229d63852df9fea08c58', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderShortAddressCodeInput(), this.renderCustomAddressForm()));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -1437,8 +1469,7 @@ const ZonosAddress = class {
         "phone": ["formFieldsChanged"],
         "postalCode": ["formFieldsChanged"],
         "state": ["formFieldsChanged"],
-        "addressService": ["shouldEnabledCustomAddressChanged"],
-        "shippingZones": ["shippingZonesChanged"]
+        "addressService": ["shouldEnabledCustomAddressChanged"]
     }; }
 };
 ZonosAddress.style = ZonosCustomAddressStyle0;
@@ -7336,6 +7367,15 @@ const ZonosStripePhoneInput = class {
             this.updatePhoneFormatter();
         };
     }
+    onCountryCodeChange() {
+        /**
+         * Re-derive the dial code when the address country changes, otherwise a
+         * shopper who changes country keeps the previous country's dial code — for
+         * example a US billing address on a Mexico shipment would send a US phone
+         * number prefixed with +52 (05CHECK-915).
+         */
+        this.initPhoneNumberValue();
+    }
     onCountryOptionsChange() {
         // Re-initialize the phone number value when the country options change
         this.initPhoneNumberValue();
@@ -7415,27 +7455,28 @@ const ZonosStripePhoneInput = class {
                 .filter(Boolean)
                 .sort((a, b) => a.displayName.localeCompare(b.displayName))
             : [];
-        return (index.h(index.Host, { key: 'd89450cd871f6220d00b325157e8b9213f1eede6', class: classes.classes([
+        return (index.h(index.Host, { key: '14478c1db0acc4651d9433f71fefa8bd18b28a61', 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: '7ec4d175288776584c2938ecb97ec3ddf862e782', 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: 'cdc9f75fa9a8fd81ab565614729d33b3b54b1ba9', 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: 'e4366c1c6ab1a2368a29948f1766978aa8fa580d', class: "zonos--select", disabled: this.disabled, onBlur: this.handleBlur, onChange: this.handleCountryChange, onFocus: this.handleFocus }, countryOptionsList.map(option => {
+            ]) }, index.h("select", { key: 'a34d728be2b100874a2fb2a91e12b77988602b3a', 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: 'f24b7bd87a8113d5cd240f3c11f5304a277c4f88', class: "zonos--input-group" }, index.h("div", { key: '3eafacfbe41af7221e9d40646849d6e5d48b1640', class: "zonos--select-wrapper" }, index.h("div", { key: 'cf11e4657375cf81e3c8cfce697c5bd171b93391', class: "zonos--country-select" }, index.h("div", { key: '503b7b08f66b5b875a3adb6b22a3011e19fe610e', class: "zonos--country-select-content" }, this.selectedCountry && (index.h("div", { key: 'f99b75f25ae1cbb9d05b308b5d4687a650ee7d4c', class: "zonos--country-select-selected" }, index.h("div", { key: '030899619207c8e809ffed56761372b0d83e50d0', class: "zonos--country-flag-wrapper" }, index.h("zonos-country-flag", { key: 'd3661dc8f66fb21d16e5ef686652ef8a966e0a88', class: "zonos--country-flag", countryCode: this.selectedCountry.countryCode })), index.h("div", { key: '23bff50c220aa53dc0182d8ccc0b213b47930cd3', class: "zonos--country-code" }, "+", this.selectedCountry.phoneCode))), index.h("div", { key: 'aa4cd5be6353f36ea3efd0d7fb7f1816c34ae48b', class: "zonos--select-chevron-wrapper" }, index.h("zonos-icon", { key: '3ff4a4fc0e0c6d1d8d293a5b09138d1aae445050', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon$1, iconColor: "gray-800" }))))), index.h("div", { key: '7f60b7f27c0f2d4ecba6ab9fa36fc0c438b8a16d', class: classes.classes([
+        })), index.h("div", { key: 'c8d76a0a1e9ca245f03a853440a691e1bb478093', class: "zonos--input-group" }, index.h("div", { key: '51ccfb533bb4560061c63aaed368fb6488cf9d87', class: "zonos--select-wrapper" }, index.h("div", { key: 'cd50bc9c8f2fd407f47e5bfd3eba18a3f8fe721f', class: "zonos--country-select" }, index.h("div", { key: '05581057f31568b3d50b054e9c7fbbad5be7c27a', class: "zonos--country-select-content" }, this.selectedCountry && (index.h("div", { key: '04c5abdc6fdf7e71585896b426ec1ab00dc11f66', class: "zonos--country-select-selected" }, index.h("div", { key: '6750556068dbad185fadfba36268417974a43865', class: "zonos--country-flag-wrapper" }, index.h("zonos-country-flag", { key: 'a611a41490d68f2763ae43ad0fd5c0c498d16bfe', class: "zonos--country-flag", countryCode: this.selectedCountry.countryCode })), index.h("div", { key: 'eab8a6353cd865cffb1576f14fee6edd5dbd3383', class: "zonos--country-code" }, "+", this.selectedCountry.phoneCode))), index.h("div", { key: 'b3b4b8c407ed68305b467590921bc57925077acd', class: "zonos--select-chevron-wrapper" }, index.h("zonos-icon", { key: '7bc52fdcaf76bf6416d33442e844057b8d6e8121', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon$1, iconColor: "gray-800" }))))), index.h("div", { key: 'd0ad07b902ef0ff675a515c07ec6597c0d0b0aa2', class: classes.classes([
                 'zonos--input-container',
                 this.inputLabel && 'has-label',
                 hasContent && 'has-content',
-            ]) }, index.h("input", Object.assign({ key: 'b821664395945a074682793137940507ece7126b' }, 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: 'e2ccfc80835f3a20fe973c0e1a11314212ab0c00', class: "zonos--floated-label" }, index.h("label", { key: 'b7d96e8332fb7c3cd4f084f76bf472107ae1e73b', htmlFor: this.inputId }, this.inputLabel || localization.translate('Phone number'))))))), this.error && (index.h("zonos-text", { key: '0aae60a88c79d3fade222efccd1049a4b130fbbc', textColor: "red-600" }, this.error))));
+            ]) }, index.h("input", Object.assign({ key: '5b12c7a228bf9736856c9ebf8ff7898cf0fc1889' }, 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: '04482f4bc210fb7ee6047972043f6b1942b25142', class: "zonos--floated-label" }, index.h("label", { key: '345c8e9d7ebc4aa8891c86a77a51f9bbd0088044', htmlFor: this.inputId }, this.inputLabel || localization.translate('Phone number'))))))), this.error && (index.h("zonos-text", { key: 'cd8805f31cc6b2c9d6052f4c11190dba1f242945', textColor: "red-600" }, this.error))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
+        "countryCode": ["onCountryCodeChange"],
         "countryOptions": ["onCountryOptionsChange"],
         "selectedCountry": ["onSelectedCountryChange"],
         "inputValue": ["onPhoneNumberChange"]

package/dist/cjs/zonos-address-display_2.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b1f95d96.js');
-const localization = require('./localization-491121ad.js');
+const localization = require('./localization-783849c8.js');
 const containsNonLatinChars = require('./containsNonLatinChars-2be5129b.js');
 const zonosStore = require('./zonosStore-fee716c9.js');
 const classes = require('./classes-b7918f56.js');
@@ -19,9 +19,16 @@ const ZonosAddressDisplay = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        var _a;
+        var _a, _b;
         const { city, country, email, line1, line2, name, phone, postal_code, state, } = this.currentAddress;
-        const shippingZoneCountry = (_a = localization.localizationStore.shippingZoneCountries) === null || _a === void 0 ? void 0 : _a[country];
+        /**
+         * Look the country up in the full country list first, since a billing
+         * address can be in a country the merchant does not ship to and would
+         * otherwise render without a country line (05CHECK-915). The shipping zone
+         * is a subset of all countries, so this is also correct for shipping.
+         */
+        const displayCountry = ((_a = localization.localizationStore.allCountries) === null || _a === void 0 ? void 0 : _a[country]) ||
+            ((_b = localization.localizationStore.shippingZoneCountries) === null || _b === void 0 ? void 0 : _b[country]);
         const renderEnteredInfoText = ({ bold, content, }) => {
             const textColor = containsNonLatinChars.isTextContainsNonLatinChars(content)
                 ? 'red-600'
@@ -30,8 +37,8 @@ const ZonosAddressDisplay = class {
         };
         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({
-            content: shippingZoneCountry.displayName,
+            : 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 })), displayCountry && (index.h("div", { class: "zonos--address-line" }, index.h("zonos-country-flag", { class: "zonos--country-flag", countryCode: displayCountry.code }), ' ', renderEnteredInfoText({
+            content: displayCountry.displayName,
         }))))));
     }
 };

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

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b1f95d96.js');
 const throttle = require('./throttle-34f7abf1.js');
-const cart = require('./cart-dc31b242.js');
-const localization = require('./localization-491121ad.js');
+const cart = require('./cart-a1c00090.js');
+const localization = require('./localization-783849c8.js');
 const zonosStore = require('./zonosStore-fee716c9.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
 const shouldRenderTaxIdInput = require('./shouldRenderTaxIdInput-7d19556c.js');

package/dist/cjs/zonos-airwallex-payment.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b1f95d96.js');
-const collect = require('./collect-463ab3d7.js');
-const cart = require('./cart-dc31b242.js');
-const localization = require('./localization-491121ad.js');
+const collect = require('./collect-e61eafca.js');
+const cart = require('./cart-a1c00090.js');
+const localization = require('./localization-783849c8.js');
 const zonosStore = require('./zonosStore-fee716c9.js');
 const VarianceTest = require('./VarianceTest-bec00ea8.js');
 const handleFetch = require('./handleFetch-954f30e1.js');

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

@@ -6,10 +6,10 @@ const index = require('./index-b1f95d96.js');
 const zonosStore = require('./zonosStore-fee716c9.js');
 const classes = require('./classes-b7918f56.js');
 const getBorderRadius = require('./getBorderRadius-4da24d7c.js');
-const cart = require('./cart-dc31b242.js');
-const localization = require('./localization-491121ad.js');
+const cart = require('./cart-a1c00090.js');
+const localization = require('./localization-783849c8.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
-const paypal = require('./paypal-2a4c374c.js');
+const paypal = require('./paypal-e1548f40.js');
 const VarianceTest = require('./VarianceTest-bec00ea8.js');
 require('./isDarkColor-ebc74b4d.js');
 require('./TaxId-cd9d490e.js');

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

@@ -3,26 +3,26 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b1f95d96.js');
-const cart = require('./cart-dc31b242.js');
-const localization = require('./localization-491121ad.js');
-const renderCheckoutCurrency = require('./renderCheckoutCurrency-ab39875a.js');
+const cart = require('./cart-a1c00090.js');
+const localization = require('./localization-783849c8.js');
+const renderCheckoutCurrency = require('./renderCheckoutCurrency-c942fcba.js');
 const cleanHtmlMarkdown = require('./cleanHtmlMarkdown-57147de7.js');
 const classes = require('./classes-b7918f56.js');
 const zonosStore = require('./zonosStore-fee716c9.js');
-const hasInclusivePrice = require('./hasInclusivePrice-d14b9d71.js');
+const hasInclusivePrice = require('./hasInclusivePrice-e7b57e02.js');
 const isSameHostCheckoutLink = require('./isSameHostCheckoutLink-6148cabb.js');
-const paypal = require('./paypal-2a4c374c.js');
+const paypal = require('./paypal-e1548f40.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
 const createCustomEvent = require('./createCustomEvent-7b6fad95.js');
 const getBorderRadius = require('./getBorderRadius-4da24d7c.js');
 const VarianceTest = require('./VarianceTest-bec00ea8.js');
 const ILanguage = require('./ILanguage-98b04442.js');
-const placeTestOrder = require('./placeTestOrder-a940a2e9.js');
+const placeTestOrder = require('./placeTestOrder-d99b1fe2.js');
 const isDarkColor = require('./isDarkColor-ebc74b4d.js');
 const getContrastColor = require('./getContrastColor-2fb235b8.js');
 const isColorVariable = require('./isColorVariable-525dbfa7.js');
 const updateCheckoutSessionAttributes = require('./updateCheckoutSessionAttributes-f595319d.js');
-const getMissingRequiredShippingFields = require('./getMissingRequiredShippingFields-7cd21100.js');
+const getMissingRequiredShippingFields = require('./getMissingRequiredShippingFields-a6c4f625.js');
 const containsNonLatinChars = require('./containsNonLatinChars-2be5129b.js');
 const shouldRenderTaxIdInput = require('./shouldRenderTaxIdInput-7d19556c.js');
 const TaxId = require('./TaxId-cd9d490e.js');

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b1f95d96.js');
-const cart = require('./cart-dc31b242.js');
-const paypal = require('./paypal-2a4c374c.js');
-const localization = require('./localization-491121ad.js');
+const cart = require('./cart-a1c00090.js');
+const paypal = require('./paypal-e1548f40.js');
+const localization = require('./localization-783849c8.js');
 const zonosStore = require('./zonosStore-fee716c9.js');
 const buildCartItemsByTempCart = require('./buildCartItemsByTempCart-edddbf4b.js');
 const handleFetch = require('./handleFetch-954f30e1.js');

package/dist/cjs/zonos-collect-cart-items_3.cjs.entry.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b1f95d96.js');
-const cart = require('./cart-dc31b242.js');
+const cart = require('./cart-a1c00090.js');
 const cleanHtmlMarkdown = require('./cleanHtmlMarkdown-57147de7.js');
 const zonosStore = require('./zonosStore-fee716c9.js');
 const classes = require('./classes-b7918f56.js');
 const styles = require('./styles-d1e64fb9.js');
-require('./localization-491121ad.js');
+require('./localization-783849c8.js');
 require('./handleFetch-954f30e1.js');
 require('./VarianceTest-bec00ea8.js');
 require('./isDarkColor-ebc74b4d.js');

package/dist/cjs/zonos-collect-finish_6.cjs.entry.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b1f95d96.js');
-const collect = require('./collect-463ab3d7.js');
-const cart = require('./cart-dc31b242.js');
-const paypal = require('./paypal-2a4c374c.js');
-const localization = require('./localization-491121ad.js');
+const collect = require('./collect-e61eafca.js');
+const cart = require('./cart-a1c00090.js');
+const paypal = require('./paypal-e1548f40.js');
+const localization = require('./localization-783849c8.js');
 const zonosStore = require('./zonosStore-fee716c9.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
 const createCustomEvent = require('./createCustomEvent-7b6fad95.js');
@@ -15,8 +15,8 @@ const VarianceTest = require('./VarianceTest-bec00ea8.js');
 const isCollectMobileTablet = require('./isCollectMobileTablet-884d4280.js');
 const classes = require('./classes-b7918f56.js');
 const ILanguage = require('./ILanguage-98b04442.js');
-const renderCheckoutCurrency = require('./renderCheckoutCurrency-ab39875a.js');
-const placeTestOrder = require('./placeTestOrder-a940a2e9.js');
+const renderCheckoutCurrency = require('./renderCheckoutCurrency-c942fcba.js');
+const placeTestOrder = require('./placeTestOrder-d99b1fe2.js');
 const renderFallback = require('./renderFallback-bc20ee20.js');
 require('./isDarkColor-ebc74b4d.js');
 require('./TaxId-cd9d490e.js');

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

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b1f95d96.js');
-const collect = require('./collect-463ab3d7.js');
-const cart = require('./cart-dc31b242.js');
-const paypal = require('./paypal-2a4c374c.js');
-const localization = require('./localization-491121ad.js');
+const collect = require('./collect-e61eafca.js');
+const cart = require('./cart-a1c00090.js');
+const paypal = require('./paypal-e1548f40.js');
+const localization = require('./localization-783849c8.js');
 const zonosStore = require('./zonosStore-fee716c9.js');
 const buildCartItemsByTempCart = require('./buildCartItemsByTempCart-edddbf4b.js');
 const handleFetch = require('./handleFetch-954f30e1.js');

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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b1f95d96.js');
-const cart = require('./cart-dc31b242.js');
-const localization = require('./localization-491121ad.js');
+const cart = require('./cart-a1c00090.js');
+const localization = require('./localization-783849c8.js');
 const zonosStore = require('./zonosStore-fee716c9.js');
 const getGenericSettingsOverride = require('./getGenericSettingsOverride-c0ca32b9.js');
 const handleFetch = require('./handleFetch-954f30e1.js');

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b1f95d96.js');
-const localization = require('./localization-491121ad.js');
+const localization = require('./localization-783849c8.js');
 const zonosStore = require('./zonosStore-fee716c9.js');
 const classes = require('./classes-b7918f56.js');
 require('./handleFetch-954f30e1.js');

package/dist/cjs/zonos-country-select_4.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b1f95d96.js');
-const localization = require('./localization-491121ad.js');
+const localization = require('./localization-783849c8.js');
 const zonosStore = require('./zonosStore-fee716c9.js');
 const formatStringWithLinks = require('./formatStringWithLinks-c25b4018.js');
 const isDarkColor = require('./isDarkColor-ebc74b4d.js');