@zonos/elements 1.3.281 → 1.3.283

package/dist/cjs/zonos-stripe-input.cjs.entry.js

@@ -77,7 +77,7 @@ const ZonosStripeInput = class {
             ? zonosStore.zonosStore.appearance.theme === 'DARK'
             : primaryColor && isDarkColor.isDarkColor(primaryColor);
         const fontSize = zonosStore.zonosStore.appearance.fontSizeInputValue || 16;
-        return (index.h(index.Host, { key: '9f7996d6012cc5daf2950c00e2cc54a7e2eb1777', class: classes.classes([
+        return (index.h(index.Host, { key: 'e7559e04aafad07699bd6bebfd4cf191d0cd1b4f', class: classes.classes([
                 'zonos--input zonos--elements',
                 isDark && 'dark',
                 (this.isError || !!this.error) && 'has-error',
@@ -86,10 +86,10 @@ const ZonosStripeInput = class {
                 '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
                 '--zonos--font-size': `${fontSize}px`,
                 '--zonos--primary-color': secondaryColor,
-            } }, index.h("div", { key: '50fee9203e13de618686e971b49b47d4ed4dde8e', class: classes.classes([
+            } }, index.h("div", { key: 'e7bce60978e071136b5a82bc4db8a0cf681273fc', class: classes.classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, index.h("input", Object.assign({ key: '517a1f4677613e7f956aa3c04cb38791b747b60b' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes.classes([
+            ]) }, index.h("input", Object.assign({ key: '6bfb929ad025d1a28860002561e8ae2abbc38e40' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes.classes([
                 'zonos--floated-input',
                 !!this.inputLabel && 'has-label',
                 this.internalValue && 'has-content',
@@ -99,7 +99,7 @@ const ZonosStripeInput = class {
                 this.inputChange.emit(input.value);
                 this.el.inputValue = input.value;
                 this.el.dispatchEvent(new Event('change'));
-            }, placeholder: this.inputPlaceholder || '', required: this.required, type: "text", value: this.internalValue })), index.h("div", { key: 'fe8ce71109cd1a40f47792259455bdfa480c01ac', class: "zonos--floated-label" }, index.h("label", { key: 'ac85c7f24d4c89b2cccc00e68d93a91b419ff235', htmlFor: this.inputId }, this.inputLabel))), this.error && (index.h("zonos-text", { key: '6fe980dcee5999c9cbdb9ac6b8f38f219397839c', textColor: "red-600", type: "caption" }, this.error))));
+            }, placeholder: this.inputPlaceholder || '', required: this.required, type: "text", value: this.internalValue })), index.h("div", { key: '0904c241ee73055982c7cd0ee5f9ee8559e6fa8b', class: "zonos--floated-label" }, index.h("label", { key: '581ac49d26e58bf0e61d1c21d13232dbc01557ee', htmlFor: this.inputId }, this.inputLabel))), this.error && (index.h("zonos-text", { key: '5cd20b5de0552c5a37dc22decdf9d54330d75028', textColor: "red-600", type: "caption" }, this.error))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -22,10 +22,10 @@ const ZonosTooltip = class {
         this.showTooltip = false;
     }
     render() {
-        return (index.h(index.Host, { key: '7abbe34ad287842da57b3348f680c4988662ff44', class: "zonos--elements" }, index.h("div", { key: '2c65db7c6022b4ea42b13d8f56f3ddfbf26687b0', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, index.h("slot", { key: 'd48945a7f67bbee583e7dc7832736cffb5310066' }), index.h("div", { key: '90adeacf4d365f94af1a7aafbee8a27cbd731058', class: classes.classes([
+        return (index.h(index.Host, { key: '4ecaaf78a0ee54dccd5efd6ec60d201a8946f9e9', class: "zonos--elements" }, index.h("div", { key: '5dc14bbe9d21712a29fe62cb6ade2a1e1a1c6385', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, index.h("slot", { key: '2eb58e776a1d925eff1fc8e48ce337b915dbb515' }), index.h("div", { key: '9975d37625398918d5a9ddf2f645a4c0a496ed2a', class: classes.classes([
                 this.showTooltip && 'zonos--show-tooltip',
                 'zonos--tooltip-content',
-            ]) }, index.h("zonos-text", { key: 'bf46c94eb2404e1cae261f8426c090e634d70a8b', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), index.h("zonos-text", { key: '499fb779cbf790ddcfa6945ffecbcb152708a851', size: "xs", textColor: "gray-0" }, this.subtitle)))));
+            ]) }, index.h("zonos-text", { key: '9f4c3070b5cc96793d18950decb2f77e608b8708', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), index.h("zonos-text", { key: '2273a609eb5fd33a661c88f35e7fc6777ea75ccf', size: "xs", textColor: "gray-0" }, this.subtitle)))));
     }
 };
 ZonosTooltip.style = ZonosTooltipStyle0;

package/dist/cjs/zonos-v-stack.cjs.entry.js

@@ -20,9 +20,9 @@ const VStack = class {
         this.spacing = 24;
     }
     render() {
-        return (index.h(index.Host, { key: '773b6654cf2031f3db0eb24781fabb8d8da7a6d2', style: {
+        return (index.h(index.Host, { key: '55d608e49a9d0a95c23902c68f555d3d17e34675', style: {
                 '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: 'd5f58fcd829b7f563f9154cc760df9c6392c2526', class: classes.classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, index.h("slot", { key: 'd5c7f7f2eca26214cdc6ecbe3ad5dcf4f02d9264' }))));
+            } }, index.h("div", { key: '529887c92438dd3793d2c4737ff2ae52abe560cb', class: classes.classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, index.h("slot", { key: '2a3c3c193aa74b9829dca73bddfdbd3dbed4c6c6' }))));
     }
 };
 VStack.style = ZonosVStackStyle0;

package/dist/collection/collection-manifest.json

@@ -8,6 +8,7 @@
     "components/common/zonos-stripe-select/zonos-stripe-select.js",
     "components/airwallex/zonos-airwallex-payment/zonos-airwallex-payment.js",
     "components/checkout/zonos-checkout/zonos-checkout.js",
+    "components/checkout/zonos-checkout/zonos-address-completion-dialog/zonos-address-completion-dialog.js",
     "components/checkout/zonos-checkout/zonos-address-update-dialog/zonos-address-display/zonos-address-display.js",
     "components/checkout/zonos-checkout/zonos-address-update-dialog/zonos-address-form/zonos-address-form.js",
     "components/checkout/zonos-checkout/zonos-cart-items/zonos-cart-items.js",

package/dist/collection/components/checkout/zonos-checkout/zonos-address-completion-dialog/zonos-address-completion-dialog.css

@@ -0,0 +1,105 @@
+:host {
+  font-family: var(--zonos--font-family, Inter), Inter;
+  display: block;
+  white-space: normal;
+}
+:host * {
+  font-family: var(--zonos--font-family, Inter), Inter;
+}
+:host img {
+  max-width: 100%;
+}
+:host dl,
+:host dd,
+:host h1,
+:host h2,
+:host h3,
+:host h4,
+:host h5,
+:host h6,
+:host hr,
+:host figure,
+:host p,
+:host pre {
+  margin: 0;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host .zonos--body {
+  padding: 0 24px;
+  position: relative;
+}
+:host .zonos--dialog-header {
+  margin-bottom: 24px;
+  position: sticky;
+  padding-top: 24px;
+  top: 0;
+  z-index: 11;
+  background: var(--zonos-elements-gray-0);
+}
+:host .zonos--dialog-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+:host .zonos--group {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 5px;
+  gap: 20px;
+  overscroll-behavior: auto;
+}
+:host .zonos--selected-address {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+:host .zonos--completion-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+:host .zonos--completion-name-row {
+  display: flex;
+  gap: 8px;
+}
+:host .zonos--completion-name-row zonos-input {
+  flex: 1;
+}
+:host .zonos--group-btn {
+  position: sticky;
+  padding: 24px 0;
+  bottom: 0;
+  display: flex;
+  justify-content: end;
+  background: var(--zonos-elements-gray-0);
+  z-index: 11;
+}
+:host .zonos--group-btn .zonos--button-wrapper {
+  display: flex;
+  gap: 8px;
+}
+
+:host(.mobile) .zonos--completion-name-row {
+  flex-direction: column;
+}
+:host(.mobile) .zonos--button-wrapper {
+  flex-direction: column;
+  width: 100%;
+}
+:host(.mobile) .zonos--button-wrapper zonos-button {
+  width: 100%;
+}
+:host(.mobile) .zonos--button-wrapper .zonos--cancel-btn {
+  order: 2;
+}
+:host(.mobile) .zonos--button-wrapper .zonos--submit-btn {
+  order: 1;
+}

package/dist/collection/components/checkout/zonos-checkout/zonos-address-completion-dialog/zonos-address-completion-dialog.js

@@ -0,0 +1,341 @@
+import { h, Host, } from "@stencil/core";
+import { translate } from "../../../store/translationStore";
+import { zonosStore } from "../../../store/zonosStore";
+import { MIN_POSTAL_CODE_LENGTH } from "../../../utils/checkout/getMissingRequiredShippingFields";
+import { classes } from "../../../utils/classes";
+import { extractName } from "../../../utils/extractName";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import RemoveIcon from "./../assets/RemoveIcon.svg";
+export class ZonosAddressCompletionDialog {
+    constructor() {
+        /**
+         * Whether or not the continue button is loading
+         */
+        this.continueLoading = false;
+        /**
+         * Whether or not the dialog is open
+         */
+        this.dialogOpen = false;
+        /**
+         * Whether or not the dialog is rendered in mobile mode
+         */
+        this.isMobile = false;
+        /**
+         * The Zonos-required fields still missing from the selected address
+         */
+        this.missingFields = [];
+        /**
+         * Local values for the captured fields, keyed by the missing field key
+         */
+        this.values = {};
+        /**
+         * Whether to show validation errors (after a submit attempt with empty fields)
+         */
+        this.showError = false;
+        this.isFieldMissing = (key) => this.missingFields.some(field => field.key === key);
+        /**
+         * A captured field is valid when it has a value. Postal code additionally enforces the same
+         * minimum length as the landed-cost readiness / detection check, so the dialog can't emit a
+         * too-short postal code that would still be considered "missing" downstream.
+         */
+        this.isFieldValid = (key) => {
+            var _a, _b, _c;
+            if (key === 'postal_code') {
+                return (((_b = (_a = this.values.postal_code) === null || _a === void 0 ? void 0 : _a.trim().length) !== null && _b !== void 0 ? _b : 0) >= MIN_POSTAL_CODE_LENGTH);
+            }
+            return !!((_c = this.values[key]) === null || _c === void 0 ? void 0 : _c.trim());
+        };
+        this.getFieldError = (key) => this.showError && !this.isFieldValid(key);
+        this.updateValue = (key, value) => {
+            this.values = Object.assign(Object.assign({}, this.values), { [key]: value });
+            // Once the customer starts fixing the fields, re-evaluate whether errors remain
+            if (this.showError) {
+                this.showError = !this.isComplete();
+            }
+        };
+        this.isComplete = () => this.missingFields.every(field => {
+            // A missing last name also requires a first name (both are edited together).
+            if (field.key === 'lastName') {
+                return this.isFieldValid('firstName') && this.isFieldValid('lastName');
+            }
+            return this.isFieldValid(field.key);
+        });
+        this.submitHandler = () => {
+            if (!this.isComplete()) {
+                this.showError = true;
+                return;
+            }
+            this.completionSubmit.emit(this.values);
+        };
+        this.renderInput = ({ key, label, }) => (h("zonos-input", { class: `zonos--completion-input zonos--completion-${key}`, inputLabel: label, inputValue: this.values[key] || '', isError: this.getFieldError(key), onInputChange: (event) => this.updateValue(key, event.detail) }));
+        this.renderField = (key, label) => {
+            if (!this.isFieldMissing(key)) {
+                return null;
+            }
+            return this.renderInput({ key, label });
+        };
+        /**
+         * When the last name is missing, render both first and last name inputs so the customer can
+         * correct the full name together (Link's single name input often yields only a first name).
+         */
+        this.renderNameFields = () => {
+            if (!this.isFieldMissing('lastName')) {
+                return null;
+            }
+            return (h("div", { class: "zonos--completion-name-row" }, this.renderInput({
+                key: 'firstName',
+                label: translate('First name'),
+            }), this.renderInput({
+                key: 'lastName',
+                label: translate('Last name'),
+            })));
+        };
+    }
+    /**
+     * The dialog stays mounted, so clear any previously-entered values whenever it opens.
+     * Without this, values typed for one address could be reapplied to a different address
+     * the next time the dialog opens.
+     */
+    // Only reset on open, not on `shippingAddress`: the parent rebuilds that prop object on
+    // every render, and watching it would wipe in-progress input while the dialog is open.
+    async watchDialogOpen(isOpen) {
+        var _a;
+        if (isOpen) {
+            // Wait for shippingAddress prop to be updated before resetting the values
+            await new Promise(resolve => setTimeout(resolve, 100));
+            // When the last name is missing we also let the customer edit the first name, so prefill
+            // it from the current (often first-name-only) address value.
+            const { firstName } = extractName({ name: (_a = this.shippingAddress) === null || _a === void 0 ? void 0 : _a.name });
+            this.values = this.isFieldMissing('lastName') ? { firstName } : {};
+            this.showError = false;
+        }
+    }
+    render() {
+        const submitBtnColor = this.submitBtnColor || zonosStore.appearance.colorSecondary;
+        // dialog background is white, so a white button needs an outline to stay visible
+        const submitBtnType = submitBtnColor === '#ffffff'
+            ? 'outline'
+            : this.submitBtnType || 'standard';
+        return (h(Host, { key: '9a89376022ebd8f5793882fb13a3502deca001f8', class: classes([
+                'zonos--address-completion-dialog zonos--elements',
+                this.isMobile && 'mobile',
+            ]) }, h("zonos-dialog", { key: '00ff3912a7bf8d021441440f0de2825b49f7b78e', isLoading: false, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeCompletionDialog.emit(), open: this.dialogOpen, width: "568px" }, h("div", { key: '1ba1cd333bd1f362a77f1f114ac50c309ed5ccd6', class: "zonos--body" }, h("div", { key: 'ccf9f54ff4b26e5443ff5c8276e5c5d36aac332b', class: "zonos--dialog-header" }, h("div", { key: '01e073aa559c4040a6599aefb3bf8cb967928929', class: "zonos--dialog-title" }, h("zonos-text", { key: '8472a72f6274646bb87d150c82722f93c861ae72', type: "title" }, translate('Complete your shipping address')), h("zonos-button", { key: 'e9a6c2cbc3d64bf87e94850c1126119687f75e7d', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.closeCompletionDialog.emit(), title: "Close checkout dialog" })), h("zonos-text", { key: 'c9ff785b746810f0c266071ee9a3f433ad645a2b' }, translate('This saved address is missing information required to ship internationally. Please add the details below.'))), h("div", { key: '86e2b0da7dbcd1370b80fc8c53e8a7de4c11ed74', class: "zonos--group" }, h("div", { key: '1542bb7f0b9df16f5ce36d38dc9408a1b3e836a7', class: "zonos--selected-address" }, h("zonos-text", { key: '2572e3e44a9c81f6694e4939de39951ec659c8fa', class: "zonos--selected-label", type: "semiBoldLabel" }, translate('Selected address')), h("zonos-address-display", { key: '8781622b3d057cfbdba59e13d5fabf76f3a7a7dd', addressType: "shipping", currentAddress: this.shippingAddress })), h("div", { key: 'ac3a5f6566c2179045a784b661b7e82c7b371a3f', class: "zonos--completion-fields" }, this.renderNameFields(), this.renderField('state', translate('State/Province')), this.renderField('postal_code', translate('Postal code')))), h("div", { key: '1007d7f6c671fbd94dd3027332d2d7ac1edeef6e', class: "zonos--group-btn" }, h("div", { key: '22fe2c8d03d7b3c680eea2b4afebf1868b5b6c0b', class: "zonos--button-wrapper" }, h("zonos-button", { key: 'dbcf1aa175992bff762ecc36108bf94090b7df0e', class: "zonos--cancel-btn", onClick: () => this.closeCompletionDialog.emit(), variant: "subtle" }, translate('Cancel')), h("zonos-button", { key: '63b0f966565e86ea9bac640b2fa690287c94b11f', backgroundColor: this.submitBtnColor, class: "zonos--submit-btn", loading: this.continueLoading, onClick: () => this.submitHandler(), size: "sm", variant: submitBtnType }, translate('Save and continue'))))))));
+    }
+    static get is() { return "zonos-address-completion-dialog"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-address-completion-dialog.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-address-completion-dialog.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "continueLoading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the continue button is loading"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "continue-loading",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dialogOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the dialog is open"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "dialog-open",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "isMobile": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the dialog is rendered in mobile mode"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "is-mobile",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "missingFields": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "MissingShippingField[]",
+                    "resolved": "MissingShippingField[]",
+                    "references": {
+                        "MissingShippingField": {
+                            "location": "import",
+                            "path": "src/components/utils/checkout/getMissingRequiredShippingFields",
+                            "id": "src/components/utils/checkout/getMissingRequiredShippingFields.ts::MissingShippingField"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The Zonos-required fields still missing from the selected address"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "shippingAddress": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "EnteredInfo",
+                    "resolved": "{ city: string; country: CountryCode; email: string; line1: string; line2: string; name: string; phone: string; postal_code: string; state: string; }",
+                    "references": {
+                        "EnteredInfo": {
+                            "location": "import",
+                            "path": "src/types/checkout/TranslatedText",
+                            "id": "src/types/checkout/TranslatedText.ts::EnteredInfo"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The shipping address selected from Stripe, shown read-only for context"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "submitBtnColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Button color of the submit button"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "submit-btn-color",
+                "reflect": false
+            },
+            "submitBtnType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLZonosButtonElement['variant']",
+                    "resolved": "\"danger\" | \"outline\" | \"primary\" | \"standard\" | \"subtle\" | \"success\" | \"warning\" | undefined",
+                    "references": {
+                        "HTMLZonosButtonElement": {
+                            "location": "global",
+                            "id": "global::HTMLZonosButtonElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Button type of the submit button"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "submit-btn-type",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "values": {},
+            "showError": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "closeCompletionDialog",
+                "name": "closeCompletionDialog",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Close dialog button click"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "completionSubmit",
+                "name": "completionSubmit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted with the captured values when the customer completes the missing fields"
+                },
+                "complexType": {
+                    "original": "AddressCompletionSubmit",
+                    "resolved": "{ firstName?: string | undefined; lastName?: string | undefined; postal_code?: string | undefined; state?: string | undefined; }",
+                    "references": {
+                        "AddressCompletionSubmit": {
+                            "location": "import",
+                            "path": "src/components/utils/checkout/applyAddressCompletion",
+                            "id": "src/components/utils/checkout/applyAddressCompletion.ts::AddressCompletionSubmit"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "dialogOpen",
+                "methodName": "watchDialogOpen"
+            }];
+    }
+}

package/dist/collection/components/checkout/zonos-checkout/zonos-address-update-dialog/zonos-address-display/zonos-address-display.js

@@ -4,9 +4,16 @@ import { translate } from "../../../../store/translationStore";
 import { isTextContainsNonLatinChars } from "../../../../utils/containsNonLatinChars";
 export class ZonosAddressDisplay {
     render() {
-        var _a;
+        var _a, _b;
         const { city, country, email, line1, line2, name, phone, postal_code, state, } = this.currentAddress;
-        const shippingZoneCountry = (_a = 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 = localizationStore.allCountries) === null || _a === void 0 ? void 0 : _a[country]) ||
+            ((_b = localizationStore.shippingZoneCountries) === null || _b === void 0 ? void 0 : _b[country]);
         const renderEnteredInfoText = ({ bold, content, }) => {
             const textColor = isTextContainsNonLatinChars(content)
                 ? 'red-600'
@@ -15,8 +22,8 @@ export class ZonosAddressDisplay {
         };
         return (h(Host, { class: "zonos--address-form zonos--elements" }, h("div", { class: "zonos--title" }, h("zonos-text", { textColor: "gray-700", type: "smallHeader" }, this.addressType === 'shipping'
             ? translate('Shipping')
-            : translate('Billing'))), h("div", { class: "zonos--address-group" }, name && (h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ bold: true, content: name }))), email && (h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: email }))), phone && (h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: phone }))), line1 && (h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: line1 }))), line2 && (h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: line2 }))), h("div", { class: "zonos--address-line" }, city && renderEnteredInfoText({ content: city }), state && renderEnteredInfoText({ content: state }), postal_code && renderEnteredInfoText({ content: postal_code })), shippingZoneCountry && (h("div", { class: "zonos--address-line" }, h("zonos-country-flag", { class: "zonos--country-flag", countryCode: shippingZoneCountry.code }), ' ', renderEnteredInfoText({
-            content: shippingZoneCountry.displayName,
+            : translate('Billing'))), h("div", { class: "zonos--address-group" }, name && (h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ bold: true, content: name }))), email && (h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: email }))), phone && (h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: phone }))), line1 && (h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: line1 }))), line2 && (h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: line2 }))), h("div", { class: "zonos--address-line" }, city && renderEnteredInfoText({ content: city }), state && renderEnteredInfoText({ content: state }), postal_code && renderEnteredInfoText({ content: postal_code })), displayCountry && (h("div", { class: "zonos--address-line" }, h("zonos-country-flag", { class: "zonos--country-flag", countryCode: displayCountry.code }), ' ', renderEnteredInfoText({
+            content: displayCountry.displayName,
         }))))));
     }
     static get is() { return "zonos-address-display"; }

package/dist/collection/components/checkout/zonos-checkout/zonos-address-update-dialog/zonos-address-form/zonos-address-form.js

@@ -27,15 +27,15 @@ export class ZonosAddressForm {
         const { firstName, lastName } = extractName({
             name,
         });
-        return (h(Host, { key: '45d9837eb2fa1799686031aae55b7a5b56683f44', class: "zonos--address-form zonos--elements" }, h("div", { key: '021635c62ccf3956099fbc4111a7cccacf87e6a1', class: "zonos--title" }, h("zonos-text", { key: 'f8a7f4423c3e1fe85d99f7a4baadfd8ec92c5e91', textColor: "gray-700", type: "smallHeader" }, this.addressType === 'shipping'
+        return (h(Host, { key: '44edb799473e427b08e17d6d20f08a028a3cc688', class: "zonos--address-form zonos--elements" }, h("div", { key: '99c2d5b58464bebd7bb3e5c2a4ac3aa04d80b47f', class: "zonos--title" }, h("zonos-text", { key: '5a86048c7d768b795db1416182e2b22458924601', textColor: "gray-700", type: "smallHeader" }, this.addressType === 'shipping'
             ? translate('Shipping')
-            : translate('Billing'))), h("div", { key: '3989feba67adc4921dc27f4b245391c933065d78', class: "zonos--address-group" }, h("div", { key: '909ef4b8f44902a16334051fb8cde1edd4f87f8b', class: "zonos--contact" }, h("zonos-text", { key: '301eb71e15a331a7423d547486b668009ce19bd0', type: "label" }, translate('Contact')), h("zonos-input", { key: '473f22469d0628db079298abb02a18f908225350', class: "zonos--form-email", inputLabel: translate('Email'), inputValue: this.currentAddress.email, isDisabled: true }), h("div", { key: 'eaa32450d028bfd8a197a3b1172a1316d6080962', class: "zonos--name zonos--address-row" }, h("zonos-input", { key: '82b3b902539cd2eb67bddfccc9146f91f7061538', class: "zonos--form-first-name", inputLabel: translate('First name'), inputValue: firstName, isError: isTextContainsNonLatinChars(firstName), onInputChange: e => this.onInputChange({
+            : translate('Billing'))), h("div", { key: 'a907058d970cb6674b403f79c0946e36a0e61f69', class: "zonos--address-group" }, h("div", { key: 'fad2f71614c6963015f95e74e297c58a4adee95b', class: "zonos--contact" }, h("zonos-text", { key: '0c661050b1b95da56af1046fac39c7fa6de18685', type: "label" }, translate('Contact')), h("zonos-input", { key: '3e35a5f9d4bca373ef9403da0de53ea895aca61f', class: "zonos--form-email", inputLabel: translate('Email'), inputValue: this.currentAddress.email, isDisabled: true }), h("div", { key: '093cdcc771b4ade381a392a1023d9d037d4e3e35', class: "zonos--name zonos--address-row" }, h("zonos-input", { key: 'e9d957551070a855179b78da655beaf3b4e731e2', 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: 'cf32104d4d575eb9d5843cf5d8701aebb02c4e3c', class: "zonos--form-last-name", inputLabel: translate('Last name'), inputValue: lastName, isError: isTextContainsNonLatinChars(lastName), onInputChange: e => this.onInputChange({
+            }) }), h("zonos-input", { key: '0b86805e872607d367446f5e6ef074974f9840c2', 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: 'd570f7e1849bcc9a8e1bc13a15195bb5ee9bf8f2', class: "zonos--address" }, h("zonos-text", { key: 'dec7847247e97ffa3dde6d04a1ccd17347d9e8c1', type: "label" }, translate('Address')), h("zonos-input", { key: '595f540e7feb57dada3ebcf93202a75492ff447f', class: "zonos--form-country", inputLabel: translate('Country'), inputValue: country, isDisabled: true }), h("zonos-input", { key: 'c7fa3e7736ceee4c23195179f9e50b9cd43aa25a', 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: 'e455495f96667f7228a5ed51fc67d080df0b7991', 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: '5312af811975d9a2e2809896d51ce992317af54d', class: "zonos--address-row" }, h("zonos-input", { key: '49537f098a054787550266d6a7698e6fe102cad6', class: "zonos--form-city", inputLabel: translate('City'), inputValue: city, isError: isTextContainsNonLatinChars(city), onInputChange: e => this.onInputChange({ key: 'city', value: e.detail }) }), this.currentAddress.state && (h("zonos-input", { key: '06d1c8c2e21300c300ddfbdaa4abaffef006793d', 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: '94081e11a3184e86eef1add3eee392c3e3afb11a', 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: '00ce7f0931179ff2c86e2da0fc82eed71cd6af19', class: "zonos--form-phone", inputLabel: translate('Phone number'), inputValue: phone, onInputChange: e => this.onInputChange({ key: 'phone', value: e.detail }) })))));
+            }) }))), h("div", { key: '6447f55e8d173d18cd46cba829527c4d487631a2', class: "zonos--address" }, h("zonos-text", { key: '18ef146cc44f658524c6535e851281b62249fa26', type: "label" }, translate('Address')), h("zonos-input", { key: '95cfb115c4304e8a142ab2e952fc8c4bfbe39e43', class: "zonos--form-country", inputLabel: translate('Country'), inputValue: country, isDisabled: true }), h("zonos-input", { key: 'e3774713ec0b0e861981aa9f2c62f6749125e174', 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: '0d1fce85ad42e42b266ad411d4e3a96e4b8b8bf3', 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: '5d5e740b711ff65a0366a6c4891f22684f32c74b', class: "zonos--address-row" }, h("zonos-input", { key: '8f124a91865c59096ba5c624ec229a3d1545c985', class: "zonos--form-city", inputLabel: translate('City'), inputValue: city, isError: isTextContainsNonLatinChars(city), onInputChange: e => this.onInputChange({ key: 'city', value: e.detail }) }), this.currentAddress.state && (h("zonos-input", { key: '50e852953ba88573929a200bce4c67fab2146245', 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: '74c17f1d1a77af3f90100a6832b2c8fe7bdca24e', 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: '20775c4a944fe9305446898109637e5b38229a1d', class: "zonos--form-phone", inputLabel: translate('Phone number'), inputValue: phone, onInputChange: e => this.onInputChange({ key: 'phone', value: e.detail }) })))));
     }
     static get is() { return "zonos-address-form"; }
     static get encapsulation() { return "shadow"; }
@@ -79,7 +79,7 @@ export class ZonosAddressForm {
                 "mutable": false,
                 "complexType": {
                     "original": "TranslatedAddressObject",
-                    "resolved": "{ line1?: TranslatedText | undefined; line2?: TranslatedText | undefined; city?: TranslatedText | undefined; state?: TranslatedText | undefined; postal_code?: TranslatedText | undefined; name?: TranslatedText | undefined; }",
+                    "resolved": "{ postal_code?: TranslatedText | undefined; state?: TranslatedText | undefined; line1?: TranslatedText | undefined; line2?: TranslatedText | undefined; city?: TranslatedText | undefined; name?: TranslatedText | undefined; }",
                     "references": {
                         "TranslatedAddressObject": {
                             "location": "import",

package/dist/collection/components/checkout/zonos-checkout/zonos-address-update-dialog/zonos-address-update-dialog.js

@@ -358,7 +358,7 @@ export class ZonosAddressUpdateDialog {
                 "mutable": false,
                 "complexType": {
                     "original": "TranslatedAddressObject",
-                    "resolved": "{ line1?: TranslatedText | undefined; line2?: TranslatedText | undefined; city?: TranslatedText | undefined; state?: TranslatedText | undefined; postal_code?: TranslatedText | undefined; name?: TranslatedText | undefined; }",
+                    "resolved": "{ postal_code?: TranslatedText | undefined; state?: TranslatedText | undefined; line1?: TranslatedText | undefined; line2?: TranslatedText | undefined; city?: TranslatedText | undefined; name?: TranslatedText | undefined; }",
                     "references": {
                         "TranslatedAddressObject": {
                             "location": "import",
@@ -381,7 +381,7 @@ export class ZonosAddressUpdateDialog {
                 "mutable": false,
                 "complexType": {
                     "original": "TranslatedAddressObject",
-                    "resolved": "{ line1?: TranslatedText | undefined; line2?: TranslatedText | undefined; city?: TranslatedText | undefined; state?: TranslatedText | undefined; postal_code?: TranslatedText | undefined; name?: TranslatedText | undefined; }",
+                    "resolved": "{ postal_code?: TranslatedText | undefined; state?: TranslatedText | undefined; line1?: TranslatedText | undefined; line2?: TranslatedText | undefined; city?: TranslatedText | undefined; name?: TranslatedText | undefined; }",
                     "references": {
                         "TranslatedAddressObject": {
                             "location": "import",
@@ -436,7 +436,7 @@ export class ZonosAddressUpdateDialog {
                 },
                 "complexType": {
                     "original": "SubmitEventData",
-                    "resolved": "{ billingAddress: Record<\"line1\" | \"line2\" | \"city\" | \"state\" | \"postal_code\" | \"name\", string> | null; shippingAddress: Record<\"line1\" | \"line2\" | \"city\" | \"state\" | \"postal_code\" | \"name\", string>; }",
+                    "resolved": "{ billingAddress: Record<\"name\" | \"postal_code\" | \"state\" | \"line1\" | \"line2\" | \"city\", string> | null; shippingAddress: Record<\"name\" | \"postal_code\" | \"state\" | \"line1\" | \"line2\" | \"city\", string>; }",
                     "references": {
                         "SubmitEventData": {
                             "location": "local",

package/dist/collection/components/checkout/zonos-checkout/zonos-cart-items/zonos-cart-items.js

@@ -10,7 +10,7 @@ export class ZonosCartItems {
     render() {
         const emptyItemImg = getAssetPath('./assets/empty-item.jpeg');
         const nonRestrictedItems = cartStore.items.filter(item => !item.isRestricted);
-        return (h(Host, { key: 'ec83033ab6a41452e8d3f611ca59f571741d7c73', class: "zonos--cart-items zonos--elements" }, h("table", { key: '3f403b3e3943f13394e419b6d3e01629ed673cd8', class: "zonos--cart-table" }, h("tbody", { key: '0c2caccc03dd36d00453e88ac7df9d8e3c47b5f1' }, nonRestrictedItems.map(item => {
+        return (h(Host, { key: '2f81af1b6315853352a29bacaa230d782e76115a', class: "zonos--cart-items zonos--elements" }, h("table", { key: '7fe64f09729e0791605cdd8e66d7230ab162c7cf', class: "zonos--cart-table" }, h("tbody", { key: '49c17b5c7c68bfd41b2d8fabbbf4c3c764faba33' }, nonRestrictedItems.map(item => {
             const itemImg = item.imageUrl;
             const cleanedItemNames = cleanHtmlMarkdown(item.name);
             const amount = item.amount * item.quantity;