@zonos/elements 1.3.281 → 1.3.282

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-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;

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout-finish/zonos-checkout-finish.js

@@ -583,11 +583,11 @@ export class ZonosCheckoutFinish {
     }
     render() {
         const isTestMode = getIsTestMode();
-        return (h(Host, { key: '7bbe3b38422e6b6a0b7a98c8e9cacf4b6abbfd8f', class: "zonos--checkout-finish zonos--elements", style: {
+        return (h(Host, { key: '76a3503d5c41cf3138e71b071fdb5e341fad1781', class: "zonos--checkout-finish zonos--elements", style: {
                 '--zonos--border-radius': getBorderRadius({
                     overrideBorderStyle: this.borderRadius,
                 }),
-            } }, this.isImmediateRedirecting && (h("div", { key: '8608faad8369cb1ad3e208862d264cc176f37702', class: "loading-wrapper" }, h("zonos-spinner", { key: '749ea9f925a11859310a47280f906f4e54cff7b2', size: 48 }))), !this.isLoading && !this.isImmediateRedirecting && (h("div", { key: 'ccb75f51c73fa22e94771f4ff00456a042185fb7', class: "zonos--finish-details" }, h("div", { key: '4bb0e457e963c2c95517a1688d0dcfdaa2c94013', class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), h("zonos-text", { key: '7b57ab0d072852734a54833153d9a4aef526f97d', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", { key: 'b633c665c126225ab060f806e150d77e118b7f6a', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), this.shouldRenderCloseButtonForRedirectBehavior() && (h("zonos-button", { key: 'f15e8bef4931917ec51a5c449b6d20e76c295cbf',
+            } }, this.isImmediateRedirecting && (h("div", { key: 'aab29e86b7d17dde74d873fe97f342e419e1b5cb', class: "loading-wrapper" }, h("zonos-spinner", { key: '29526f5d056c117ccd65bd1ed303761c04fdbdf3', size: 48 }))), !this.isLoading && !this.isImmediateRedirecting && (h("div", { key: '438b210be5c4c78c74d37e5fde8de994e379afa0', class: "zonos--finish-details" }, h("div", { key: '1cb133c14660035ea6395adb74d30790b69715f3', class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), h("zonos-text", { key: '4e5a66524f7833916829c9dd7172225e872bb329', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", { key: '773a548cd7757af62b26bbe119e7dd078ab4df5b', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), this.shouldRenderCloseButtonForRedirectBehavior() && (h("zonos-button", { key: 'ea8c30af05aa57c05155f68b416668db16cfcd1c',
             // Only show loading spinner if it's not an error notification
             loading: this.isWaitingToRedirect &&
                 this.notificationType !== 'error', onClick: () => {
@@ -599,9 +599,9 @@ export class ZonosCheckoutFinish {
                 }
                 this.closeClickHandler();
             }, size: "md", variant: "primary" }, translate('Close'))), !window.Zonos.isLegacyCheckout &&
-            this.shouldRenderKeepShoppingButton() && (h("zonos-button", { key: 'f450a254f244806612f269f90ce984167c787795', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText))), isTestMode &&
+            this.shouldRenderKeepShoppingButton() && (h("zonos-button", { key: '50120bf3a405a2b6e5433fe1bb744f0b836ac49f', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText))), isTestMode &&
             cartStore.step === 'finish' &&
-            this.notificationType === 'success' && (h("div", { key: 'd5ab67cad67c9b62e2e369c52f028aca0fb485b5', class: "zonos--finish-button-wrapper" }, h("zonos-button", { key: '1ab66e026b3797e2fc0f44fe0bcea439dab85128', backgroundColor: "gray-0", buttonColor: "gray-1000", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), h("zonos-button", { key: '8fc0dc456bb32fb94ea390bf50a9590b35bbb04d', onClick: () => {
+            this.notificationType === 'success' && (h("div", { key: '2794f9deea56b65de81ad92285270388a7089a73', class: "zonos--finish-button-wrapper" }, h("zonos-button", { key: '2ba2ef7a26f78cf484d1625428d866cdfadd1b2f', backgroundColor: "gray-0", buttonColor: "gray-1000", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), h("zonos-button", { key: 'fc689ad6192fb0cc86a9fcaf164660a056df8bc5', onClick: () => {
                 const isZonosDashboard = window.location.hostname.includes('dashboard.zonos.com');
                 this.redirectToUrl(isZonosDashboard
                     ? '/orders/all'