@zonos/elements 1.3.15-alpha.3 → 1.3.16-alpha.0

package/dist/components/zonos-address-display.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ZonosAddressDisplay extends Components.ZonosAddressDisplay, HTMLElement {}
+export const ZonosAddressDisplay: {
+    prototype: ZonosAddressDisplay;
+    new (): ZonosAddressDisplay;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/zonos-address-display.js

@@ -0,0 +1,6 @@
+import { Z as ZonosAddressDisplay$1, d as defineCustomElement$1 } from './zonos-address-display2.js';
+
+const ZonosAddressDisplay = ZonosAddressDisplay$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZonosAddressDisplay, defineCustomElement };

package/dist/components/zonos-address-display2.js

@@ -0,0 +1,64 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { a as localizationStore } from './stripe.js';
+import { a as translate } from './translationStore.js';
+import { i as isTextContainsNonLatinChars } from './containsNonLatinChars.js';
+import { d as defineCustomElement$2 } from './zonos-country-flag2.js';
+import { d as defineCustomElement$1 } from './zonos-text2.js';
+
+const zonosAddressDisplayCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--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}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .zonos--title{margin-bottom:12px}:host .zonos--address-group{display:-ms-flexbox;display:flex;gap:4px;-ms-flex-direction:column;flex-direction:column}:host .zonos--address-line{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .zonos--address-line zonos-text+zonos-text::before{content:\", \";color:var(--zonos-elements-gray-1200);margin-right:4px}:host .zonos--country-flag{width:20px;height:14px;border-radius:2px;margin:1px;position:relative;overflow:hidden;-webkit-box-shadow:var(--zonos-elements-v3-shadow-medium);box-shadow:var(--zonos-elements-v3-shadow-medium);margin-right:8px;z-index:10;justify-self:center}";
+const ZonosAddressDisplayStyle0 = zonosAddressDisplayCss;
+
+const ZonosAddressDisplay = /*@__PURE__*/ proxyCustomElement(class ZonosAddressDisplay extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.currentAddress = undefined;
+        this.addressType = undefined;
+    }
+    render() {
+        var _a;
+        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];
+        const renderEnteredInfoText = ({ bold, content, }) => {
+            const textColor = isTextContainsNonLatinChars(content)
+                ? 'red-600'
+                : 'gray-1200';
+            return (h("zonos-text", { textColor: textColor, type: bold ? 'boldLabel' : 'body' }, content));
+        };
+        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,
+        }))))));
+    }
+    static get style() { return ZonosAddressDisplayStyle0; }
+}, [1, "zonos-address-display", {
+        "currentAddress": [16],
+        "addressType": [1, "address-type"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zonos-address-display", "zonos-country-flag", "zonos-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zonos-address-display":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZonosAddressDisplay);
+            }
+            break;
+        case "zonos-country-flag":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "zonos-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { ZonosAddressDisplay as Z, defineCustomElement as d };

package/dist/components/zonos-address-form.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ZonosAddressForm extends Components.ZonosAddressForm, HTMLElement {}
+export const ZonosAddressForm: {
+    prototype: ZonosAddressForm;
+    new (): ZonosAddressForm;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/zonos-address-form.js

@@ -0,0 +1,6 @@
+import { Z as ZonosAddressForm$1, d as defineCustomElement$1 } from './zonos-address-form2.js';
+
+const ZonosAddressForm = ZonosAddressForm$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZonosAddressForm, defineCustomElement };

package/dist/components/zonos-address-form2.js

@@ -0,0 +1,84 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { a as translate } from './translationStore.js';
+import { i as isTextContainsNonLatinChars } from './containsNonLatinChars.js';
+import { d as defineCustomElement$2 } from './zonos-input2.js';
+import { d as defineCustomElement$1 } from './zonos-text2.js';
+
+const zonosAddressFormCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--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}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .zonos--title{margin-bottom:20px}:host .zonos--address-group{display:-ms-flexbox;display:flex;gap:20px;-ms-flex-direction:column;flex-direction:column;margin:1px}:host .zonos--contact{display:-ms-flexbox;display:flex;gap:8px;-ms-flex-direction:column;flex-direction:column}:host .zonos--address-row{display:-ms-flexbox;display:flex;gap:8px}:host .zonos--address-row>*{-ms-flex:1;flex:1}:host .zonos--address{display:-ms-flexbox;display:flex;gap:8px;-ms-flex-direction:column;flex-direction:column}";
+const ZonosAddressFormStyle0 = zonosAddressFormCss;
+
+const ZonosAddressForm = /*@__PURE__*/ proxyCustomElement(class ZonosAddressForm extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.addressChange = createEvent(this, "addressChange", 7);
+        this.onInputChange = ({ key, value, }) => {
+            this.addressChange.emit(Object.assign(Object.assign({}, this.localAddress), { [key]: value }));
+        };
+        this.currentAddress = undefined;
+        this.translatedAddress = undefined;
+        this.addressType = undefined;
+        this.localAddress = this.currentAddress;
+    }
+    watchCurrentAddress() {
+        var _a, _b, _c, _d, _e, _f;
+        const { city, line1, line2, name, postal_code, state } = this.currentAddress;
+        // Update the local address when the current address changes
+        // If translated address is available, use that instead
+        this.localAddress = Object.assign(Object.assign({}, this.currentAddress), { city: ((_a = this.translatedAddress.city) === null || _a === void 0 ? void 0 : _a[city]) || city, line1: ((_b = this.translatedAddress.line1) === null || _b === void 0 ? void 0 : _b[line1]) || line1, line2: ((_c = this.translatedAddress.line2) === null || _c === void 0 ? void 0 : _c[line2]) || line2, name: ((_d = this.translatedAddress.name) === null || _d === void 0 ? void 0 : _d[name]) || name, postal_code: ((_e = this.translatedAddress.postal_code) === null || _e === void 0 ? void 0 : _e[postal_code]) || postal_code, state: ((_f = this.translatedAddress.state) === null || _f === void 0 ? void 0 : _f[state]) || state });
+    }
+    componentWillLoad() {
+        this.watchCurrentAddress();
+    }
+    render() {
+        const { city, country, line1, line2, name, phone, postal_code, state } = this.localAddress;
+        const firstName = name.split(' ')[0] || '';
+        const lastName = name.split(' ')[1] || '';
+        return (h(Host, { key: '9c1ee87200d1f90e9dfac58c49aabba1777373a9', class: "zonos--address-form zonos--elements" }, h("div", { key: 'eec3416268ff2324fd751408552705086905423d', class: "zonos--title" }, h("zonos-text", { key: 'a4c254f78420dcfc712e1a83b20dd3ac9e64c460', textColor: "gray-700", type: "smallHeader" }, this.addressType === 'shipping'
+            ? translate('Shipping')
+            : translate('Billing'))), h("div", { key: 'b8109545d282fb8c06a2e791c30088018d6ffec0', class: "zonos--address-group" }, h("div", { key: '833a395984cd75242e5d97697fd6566f11932d1b', class: "zonos--contact" }, h("zonos-text", { key: 'e60f574e95162aabf6465b878fc9b16c708e8029', type: "label" }, translate('Contact')), h("zonos-input", { key: '24cd24a362a1bbc76d0c91718c48ae32baa20ae6', class: "zonos--form-email", inputLabel: translate('Email'), inputValue: this.currentAddress.email, isDisabled: true }), h("div", { key: '84e64ef44eb3b39ac7ab542e07d7a52a95377cae', class: "zonos--name zonos--address-row" }, h("zonos-input", { key: '26621aca0d57a7fee743874b8d11af5f58c91b69', class: "zonos--form-first-name", inputLabel: translate('First name'), inputValue: firstName, isError: isTextContainsNonLatinChars(firstName), onInputChange: e => this.onInputChange({
+                key: 'name',
+                value: `${e.detail} ${lastName}`,
+            }) }), h("zonos-input", { key: '01e3e5038b4a4311dd5874a1213f936451dc300d', class: "zonos--form-last-name", inputLabel: translate('Last name'), inputValue: lastName, isError: isTextContainsNonLatinChars(lastName), onInputChange: e => this.onInputChange({
+                key: 'name',
+                value: `${firstName} ${e.detail}`,
+            }) }))), h("div", { key: 'eb42dece28082ff16a453110b3208de5b44b9fdb', class: "zonos--address" }, h("zonos-text", { key: '3557122c716533be7b36a8bd395ea616a7061665', type: "label" }, translate('Address')), h("zonos-input", { key: 'bcc7d84d530f2f3a10537117eb6ef143df7cc8e2', class: "zonos--form-country", inputLabel: translate('Country'), inputValue: country, isDisabled: true }), h("zonos-input", { key: '6ce78e25151a129b69b501cf768604134a395e85', class: "zonos--form-line1", inputLabel: translate('Address line 1'), inputValue: line1, isError: isTextContainsNonLatinChars(line1), onInputChange: e => this.onInputChange({ key: 'line1', value: e.detail }) }), h("zonos-input", { key: '6f7a18010e2d8131327154a31ba58544df56768c', class: "zonos--form-line2", inputLabel: translate('Address line 2'), inputValue: line2, isError: isTextContainsNonLatinChars(line2), onInputChange: e => this.onInputChange({ key: 'line2', value: e.detail }) }), h("div", { key: '48afbf7a3cbd26fddfea4f2799005a51b1c3d3c6', class: "zonos--address-row" }, h("zonos-input", { key: '6decf8c430d8d25b2c555b110009da74e0ac9e5f', class: "zonos--form-city", inputLabel: translate('City'), inputValue: city, isError: isTextContainsNonLatinChars(city), onInputChange: e => this.onInputChange({ key: 'city', value: e.detail }) }), h("zonos-input", { key: '065e1be213d3cfec7749ab32890f96b0b484a25a', class: "zonos--form-state", inputLabel: translate('State/Province'), inputValue: state, isError: isTextContainsNonLatinChars(state), onInputChange: e => this.onInputChange({ key: 'state', value: e.detail }) })), h("zonos-input", { key: 'a69244bf84c9fd007c9ad4aad2b6cc6d44420775', class: "zonos--form-postal-code", inputLabel: translate('Postal code'), inputValue: postal_code, isError: isTextContainsNonLatinChars(postal_code), onInputChange: e => this.onInputChange({ key: 'postal_code', value: e.detail }) }), h("zonos-input", { key: '0bcc89de1ecc4aae8a69d74eff42dfd117ada40b', class: "zonos--form-phone", inputLabel: translate('Phone number'), inputValue: phone, onInputChange: e => this.onInputChange({ key: 'phone', value: e.detail }) })))));
+    }
+    static get watchers() { return {
+        "translatedAddress": ["watchCurrentAddress"]
+    }; }
+    static get style() { return ZonosAddressFormStyle0; }
+}, [1, "zonos-address-form", {
+        "currentAddress": [16],
+        "translatedAddress": [16],
+        "addressType": [1, "address-type"],
+        "localAddress": [32]
+    }, undefined, {
+        "translatedAddress": ["watchCurrentAddress"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zonos-address-form", "zonos-input", "zonos-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zonos-address-form":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZonosAddressForm);
+            }
+            break;
+        case "zonos-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "zonos-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { ZonosAddressForm as Z, defineCustomElement as d };

package/dist/components/zonos-address-update-dialog.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ZonosAddressUpdateDialog extends Components.ZonosAddressUpdateDialog, HTMLElement {}
+export const ZonosAddressUpdateDialog: {
+    prototype: ZonosAddressUpdateDialog;
+    new (): ZonosAddressUpdateDialog;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,6 @@
+import { Z as ZonosAddressUpdateDialog$1, d as defineCustomElement$1 } from './zonos-address-update-dialog2.js';
+
+const ZonosAddressUpdateDialog = ZonosAddressUpdateDialog$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZonosAddressUpdateDialog, defineCustomElement };

package/dist/components/zonos-address-update-dialog2.js

@@ -0,0 +1,264 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { a as translate } from './translationStore.js';
+import { z as zonosStore } from './zonosStore.js';
+import { c as classes } from './classes.js';
+import { c as containsNonLatinChars } from './containsNonLatinChars.js';
+import { d as defineCustomElement$9 } from './zonos-address-display2.js';
+import { d as defineCustomElement$8 } from './zonos-address-form2.js';
+import { d as defineCustomElement$7 } from './zonos-button2.js';
+import { d as defineCustomElement$6 } from './zonos-country-flag2.js';
+import { d as defineCustomElement$5 } from './zonos-dialog2.js';
+import { d as defineCustomElement$4 } from './zonos-icon2.js';
+import { d as defineCustomElement$3 } from './zonos-input2.js';
+import { d as defineCustomElement$2 } from './zonos-spinner2.js';
+import { d as defineCustomElement$1 } from './zonos-text2.js';
+
+const RemoveIcon = `<svg color="var(--zonos-elements-gray-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" data-is-secondary-color="true" fill="var(--zonos-elements-gray-200)" fill-rule="evenodd"></path><path clip-rule="evenodd" d="M8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>`;
+
+const zonosAddressUpdateDialogCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--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}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .zonos--body{padding:0 24px;position:relative}:host .zonos--dialog-header{margin-bottom:32px;position:-webkit-sticky;position:sticky;padding-top:24px;top:0;z-index:11;background:var(--zonos-elements-gray-0)}:host .zonos--dialog-title{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;margin-bottom:12px}:host .zonos--group{overflow:auto;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:8px}:host .zonos--group::-webkit-scrollbar{width:10px}:host .zonos--group::-webkit-scrollbar-track{background:var(--zonos-elements-gray-50)}:host .zonos--group::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}:host .zonos--group::-webkit-scrollbar-thumb:hover{background:#d6d6d6}:host .zonos--address-display-group{display:-ms-flexbox;display:flex;gap:8px;margin-bottom:20px}:host .zonos--address-display-group zonos-address-display{-ms-flex:1;flex:1}:host .zonos--what-you-entered{margin-bottom:8px}:host .zonos--address-form-section{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:24px}:host .zonos--group-btn{position:-webkit-sticky;position:sticky;padding:24px 0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:end;background:var(--zonos-elements-gray-0);z-index:11}:host .zonos--group-btn .zonos--button-wrapper{display:-ms-flexbox;display:flex;gap:8px}:host(.mobile) .zonos--button-wrapper{-ms-flex-direction:column;flex-direction:column;width:100%}:host(.mobile) .zonos--button-wrapper zonos-button{width:100%}:host(.mobile) .zonos--button-wrapper .zonos--cancel-btn{-ms-flex-order:2;order:2}:host(.mobile) .zonos--button-wrapper .zonos--update-btn{-ms-flex-order:1;order:1}";
+const ZonosAddressUpdateDialogStyle0 = zonosAddressUpdateDialogCss;
+
+const ZonosAddressUpdateDialog = /*@__PURE__*/ proxyCustomElement(class ZonosAddressUpdateDialog extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.closeDialog = createEvent(this, "closeDialog", 7);
+        this.continueClicked = createEvent(this, "continueClicked", 7);
+        /**
+         * handler for close button click
+         */
+        this.closeDialogHandler = () => {
+            this.closeDialog.emit();
+        };
+        /**
+         * Extract value from translated object
+         */
+        this.getTranslatedAddress = ({ currentAddress, translatedAddress, }) => {
+            var _a, _b, _c, _d, _e, _f;
+            const { city, line1, line2, name, postal_code, state } = currentAddress;
+            return {
+                city: ((_a = translatedAddress.city) === null || _a === void 0 ? void 0 : _a[city]) || city,
+                line1: ((_b = translatedAddress.line1) === null || _b === void 0 ? void 0 : _b[line1]) || line1,
+                line2: ((_c = translatedAddress.line2) === null || _c === void 0 ? void 0 : _c[line2]) || line2,
+                name: ((_d = translatedAddress.name) === null || _d === void 0 ? void 0 : _d[name]) || name,
+                postal_code: ((_e = translatedAddress.postal_code) === null || _e === void 0 ? void 0 : _e[postal_code]) || postal_code,
+                state: ((_f = translatedAddress.state) === null || _f === void 0 ? void 0 : _f[state]) || state,
+            };
+        };
+        /**
+         * handler for continue button click
+         */
+        this.continueClickHandler = async () => {
+            var _a, _b, _c;
+            // set spinner for the continue button
+            this.continueLoading = true;
+            const translatedBillingAddress = this.billingAddress
+                ? this.getTranslatedAddress({
+                    currentAddress: this.billingAddress,
+                    translatedAddress: this.translatedBillingAddressState,
+                })
+                : null;
+            const translatedShippingAddress = this.getTranslatedAddress({
+                currentAddress: this.shippingAddress,
+                translatedAddress: this.translatedShippingAddressState,
+            });
+            // check to see if there are still non-latin characters in the translated address
+            const shippingNonlatinChars = containsNonLatinChars(Object.assign(Object.assign({}, translatedShippingAddress), { country: this.shippingAddress.country }));
+            // get list of non-latin characters field in the billing address
+            const billingNonLatinChars = translatedBillingAddress &&
+                this.billingAddress &&
+                containsNonLatinChars(Object.assign(Object.assign({}, translatedBillingAddress), { country: this.billingAddress.country }));
+            const shippingHasNonLatinChars = !!Object.keys(shippingNonlatinChars)
+                .length;
+            const billingHasNonLatinChars = !!billingNonLatinChars && !!Object.keys(billingNonLatinChars).length;
+            // if there are non-latin characters in the translated address, scroll to the error input so user can see and fix it
+            if (shippingHasNonLatinChars || billingHasNonLatinChars) {
+                // get scroll top of the first input has "has-error" class
+                const addressForms = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('zonos-address-form');
+                const shippingAddressForm = addressForms === null || addressForms === void 0 ? void 0 : addressForms[0];
+                const billingAddressForm = addressForms === null || addressForms === void 0 ? void 0 : addressForms[1];
+                const errorInput = ((_b = shippingAddressForm === null || shippingAddressForm === void 0 ? void 0 : shippingAddressForm.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.has-error')) ||
+                    ((_c = billingAddressForm === null || billingAddressForm === void 0 ? void 0 : billingAddressForm.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.has-error'));
+                // scroll to the first error input
+                if (errorInput) {
+                    errorInput.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                }
+                this.continueLoading = false;
+                return;
+            }
+            // Submit the translated address to the parent component
+            this.continueClicked.emit({
+                billingAddress: translatedBillingAddress,
+                shippingAddress: translatedShippingAddress,
+            });
+        };
+        /**
+         * This function builds a state object for a translated address.
+         * It takes the current and translated address as input and returns an object where each field is an object itself.
+         * The key of each field's object is the current address's field value and the value is the corresponding translated address's field value.
+         *
+         * @param {Object} params - The parameters for the function.
+         * @param {EnteredInfo} params.currentAddress - The current address information.
+         * @param {EnteredInfo} params.translatedAddress - The translated address information.
+         *
+         */
+        this.buildTranslateAddressState = ({ currentAddress, translatedAddress, }) => {
+            const { city, line1, line2, name, postal_code, state } = currentAddress;
+            return {
+                city: {
+                    [city]: translatedAddress.city,
+                },
+                line1: {
+                    [line1]: translatedAddress.line1,
+                },
+                line2: {
+                    [line2]: translatedAddress.line2,
+                },
+                name: {
+                    [name]: translatedAddress.name,
+                },
+                postal_code: {
+                    [postal_code]: translatedAddress.postal_code,
+                },
+                state: {
+                    [state]: translatedAddress.state,
+                },
+            };
+        };
+        this.continueLoading = false;
+        this.dialogLoading = undefined;
+        this.dialogOpen = false;
+        this.submitBtnType = undefined;
+        this.submitBtnColor = undefined;
+        this.isMobile = false;
+        this.shippingAddress = undefined;
+        this.billingAddress = undefined;
+        this.translatedShippingAddress = undefined;
+        this.translatedBillingAddress = undefined;
+        this.showErrorBanner = false;
+        this.translatedShippingAddressState = {};
+        this.translatedBillingAddressState = {};
+    }
+    watchTranslatedShippingAddress() {
+        this.translatedShippingAddressState = this.translatedShippingAddress;
+    }
+    watchTranslatedBillingAddress() {
+        this.translatedBillingAddressState = this.translatedBillingAddress;
+    }
+    componentWillLoad() {
+        // update the state with the initial props
+        this.watchTranslatedBillingAddress();
+        this.watchTranslatedShippingAddress();
+    }
+    render() {
+        // dialog background white, so when the button background is also white, we need to change the button type to outline so it's visible
+        const submitBtnColor = this.submitBtnColor || zonosStore.appearance.colorSecondary;
+        const submitBtnType = submitBtnColor === '#ffffff'
+            ? 'outline'
+            : this.submitBtnType || 'standard';
+        const billing = this.billingAddress;
+        const shipping = this.shippingAddress;
+        return (h(Host, { key: '03535edacb348258592641baa349e9dcf14bf78c', class: classes([
+                'zonos--address-update-dialog zonos--elements',
+                this.isMobile && 'mobile',
+            ]) }, h("zonos-dialog", { key: 'c16871425dffe955d422ffa5b9aee1ece0da2890', isLoading: this.dialogLoading, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeDialog.emit(), open: this.dialogOpen, width: "568px" }, h("div", { key: 'e4fad501f7cfedc5783774d8b1bf785d6947d3c8', class: "zonos--body" }, h("div", { key: '973e7a8097b8c8f60e47e6ad9d8311a64a5a6ff0', class: "zonos--dialog-header" }, h("div", { key: '89c82b6ff3723056d161560da22bd16a992afee7', class: "zonos--dialog-title" }, h("zonos-text", { key: 'bf92ef0b40ea67a492164fedb95dd68b7d023e85', type: "title" }, translate('Update your address')), h("zonos-button", { key: '4e7a1905c976cec396db5c34f633b383bba0d55a', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.closeDialogHandler() })), h("zonos-text", { key: '47b42d8cc14c4757e3fc9f2f43eafbd8d9e9df38' }, translate('To ensure delivery all address details must be in Latin characters.'))), h("div", { key: '28d9804f0a18f143ce541c2c511cbfa21a2a416f', class: "zonos--group" }, h("zonos-text", { key: '43ec5a9fc8594d065b256952ca8e9392fba03839', class: "zonos--what-you-entered", type: "semiBoldLabel" }, translate('What you entered')), h("div", { key: 'b7eb7781ce6aefe20f89b4d5fba190f0102eb5d1', class: "zonos--address-display-group" }, h("zonos-address-display", { key: '152c53176a46575677723ca47386e484c659927a', addressType: "shipping", currentAddress: shipping }), billing && (h("zonos-address-display", { key: '6c7ac2b49d121c26ce45f09a1eac9ef456d45910', addressType: "billing", currentAddress: billing }))), h("div", { key: '2bda98bb0ac9bafcb009ff36fb97a9fc62ce7e2d', class: "zonos--address-form-section" }, h("zonos-text", { key: '87d3380072a049ccde71ba1b752aedd36830348b', type: "semiBoldLabel" }, translate('Translated address')), h("zonos-address-form", { key: '2cb36251c6549da05e272183b2c37478b4166fea', addressType: "shipping", class: "zonos--shipping-address-form", currentAddress: shipping, onAddressChange: e => {
+                const address = e.detail;
+                this.translatedShippingAddressState =
+                    this.buildTranslateAddressState({
+                        currentAddress: shipping,
+                        translatedAddress: address,
+                    });
+            }, translatedAddress: this.translatedShippingAddressState }), billing && (h("zonos-address-form", { key: '9bf5ebd6fb08851716a72c855451bfeb3ee0ed68', addressType: "billing", class: "zonos--billing-address-form", currentAddress: billing, onAddressChange: e => {
+                const address = e.detail;
+                this.translatedBillingAddressState =
+                    this.buildTranslateAddressState({
+                        currentAddress: billing,
+                        translatedAddress: address,
+                    });
+            }, translatedAddress: this.translatedBillingAddressState })))), h("div", { key: '621df9c8919973b37c62aca5727bde3635086a6b', class: "zonos--group-btn" }, h("div", { key: '95e9fd31418abc8e89ceef24af7cc251ee45ac93', class: "zonos--button-wrapper" }, h("zonos-button", { key: 'bef31fc81e7cc0f2b3f7ab875a29978b07865b6a', class: "zonos--cancel-btn", onClick: () => this.closeDialogHandler(), variant: "subtle" }, translate('Cancel')), h("zonos-button", { key: '9d183153541766b421c3420681c1159ffa599682', backgroundColor: this.submitBtnColor, class: "zonos--update-btn", loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "sm", variant: submitBtnType }, translate('Update address'))))))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "translatedShippingAddress": ["watchTranslatedShippingAddress"],
+        "translatedBillingAddress": ["watchTranslatedBillingAddress"]
+    }; }
+    static get style() { return ZonosAddressUpdateDialogStyle0; }
+}, [1, "zonos-address-update-dialog", {
+        "continueLoading": [4, "continue-loading"],
+        "dialogLoading": [4, "dialog-loading"],
+        "dialogOpen": [4, "dialog-open"],
+        "submitBtnType": [1, "submit-btn-type"],
+        "submitBtnColor": [1, "submit-btn-color"],
+        "isMobile": [4, "is-mobile"],
+        "shippingAddress": [16],
+        "billingAddress": [16],
+        "translatedShippingAddress": [16],
+        "translatedBillingAddress": [16],
+        "showErrorBanner": [32],
+        "translatedShippingAddressState": [32],
+        "translatedBillingAddressState": [32]
+    }, undefined, {
+        "translatedShippingAddress": ["watchTranslatedShippingAddress"],
+        "translatedBillingAddress": ["watchTranslatedBillingAddress"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zonos-address-update-dialog", "zonos-address-display", "zonos-address-form", "zonos-button", "zonos-country-flag", "zonos-dialog", "zonos-icon", "zonos-input", "zonos-spinner", "zonos-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zonos-address-update-dialog":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZonosAddressUpdateDialog);
+            }
+            break;
+        case "zonos-address-display":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "zonos-address-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "zonos-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "zonos-country-flag":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "zonos-dialog":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "zonos-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "zonos-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "zonos-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "zonos-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { RemoveIcon as R, ZonosAddressUpdateDialog as Z, defineCustomElement as d };

package/dist/components/zonos-address2.js

@@ -1,41 +1,11 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { s as stripeStore, l as logError, a as localizationStore, t as translate } from './stripe.js';
-import { z as zonosStore } from './zonosStore.js';
+import { s as stripeStore, l as logError, a as localizationStore } from './stripe.js';
 import { i as isCheckoutMobile } from './isCheckoutMobile.js';
-import { s as sendErrorLog } from './sendErrorLog.js';
-import { d as defineCustomElement$2 } from './zonos-banner2.js';
 import { d as defineCustomElement$1 } from './zonos-text2.js';
 
-/**
- * Check if the given address object contains non-latin characters
- * @returns an object with the same keys as the input object, and a boolean value indicating if the value contains non-latin characters
- */
-const containsNonLatinChars = (params) => {
-    const specialCharacters = /[ʼˮ՚ߴߵ']{1}/u;
-    /**
-     * This regex matches any character that is not a latin character, punctuation, symbol, number, separator, control, or mark
-     * I limited the character found to 1 in the regex, so that we can return early if we find any non-latin character
-     **/
-    const nonLatinRegex = /[^\p{Script=Latin}\p{P}\p{S}\p{N}\p{Z}\p{C}\p{M}]{1}/u;
-    const nonLatinValueList = Object.entries(params).reduce((prev, [key, value]) => nonLatinRegex.test(value) &&
-        // allow special characters like web apostrophe and quotation mark
-        !specialCharacters.test(value)
-        ? Object.assign(Object.assign({}, prev), { [key]: true }) : prev, {});
-    return nonLatinValueList;
-};
-
 const zonosAddressCss = ".sc-zonos-address-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-address-h *.sc-zonos-address{font-family:var(--font-family, Inter), Inter}.sc-zonos-address-h img.sc-zonos-address{max-width:100%}.sc-zonos-address-h dl.sc-zonos-address,.sc-zonos-address-h dd.sc-zonos-address,.sc-zonos-address-h h1.sc-zonos-address,.sc-zonos-address-h h2.sc-zonos-address,.sc-zonos-address-h h3.sc-zonos-address,.sc-zonos-address-h h4.sc-zonos-address,.sc-zonos-address-h h5.sc-zonos-address,.sc-zonos-address-h h6.sc-zonos-address,.sc-zonos-address-h hr.sc-zonos-address,.sc-zonos-address-h figure.sc-zonos-address,.sc-zonos-address-h p.sc-zonos-address,.sc-zonos-address-h pre.sc-zonos-address{margin:0}.sc-zonos-address-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-address-h .zonos--title.sc-zonos-address{margin-bottom:16px}.sc-zonos-address-h zonos-banner.sc-zonos-address{margin-top:8px}";
 const ZonosAddressStyle0 = zonosAddressCss;
 
-const mappedFields = {
-    city: 'City',
-    country: 'Country',
-    line1: 'Address line 1',
-    line2: 'Address line 2',
-    name: 'Name',
-    postal_code: 'Postal code',
-    state: 'State',
-};
 const ZonosAddress = /*@__PURE__*/ proxyCustomElement(class ZonosAddress extends HTMLElement {
     constructor() {
         super();
@@ -45,8 +15,6 @@ const ZonosAddress = /*@__PURE__*/ proxyCustomElement(class ZonosAddress extends
         this.titleText = undefined;
         this.defaultAddress = null;
         this.stripe = window.Zonos.stripe;
-        this.reportedInvalidCharacters = false;
-        this.invalidCharacterList = null;
         this.isDirtyAddress = false;
     }
     getStripeAddressInstance() {
@@ -72,9 +40,6 @@ const ZonosAddress = /*@__PURE__*/ proxyCustomElement(class ZonosAddress extends
                 stripeStore.stripeAddressEventData = event;
                 break;
         }
-        const invalidCharacterList = this.checkInvalidCharacters(event);
-        this.invalidCharacterList = invalidCharacterList;
-        this.invalidCharacters.emit(!!invalidCharacterList);
     }
     updateAddressElement({ stripeAddressElement, type, }) {
         if (type === 'shipping') {
@@ -83,47 +48,6 @@ const ZonosAddress = /*@__PURE__*/ proxyCustomElement(class ZonosAddress extends
         }
         stripeStore.stripeBillingAddressElement = stripeAddressElement;
     }
-    checkInvalidCharacters(address) {
-        // Do nothing if the allowed character sets is ALL or the address is incomplete
-        if (!address.complete ||
-            zonosStore.checkoutSettings.allowedCharacterSets === 'ALL') {
-            return null;
-        }
-        const { address: addressValue, firstName, lastName, name } = address.value;
-        const { city, country, line1, line2, postal_code, state } = addressValue;
-        const invalidList = containsNonLatinChars({
-            city,
-            country,
-            line1,
-            line2: line2 || '',
-            name: name || `${firstName} ${lastName}`,
-            postal_code,
-            state,
-        });
-        if (!Object.keys(invalidList).length) {
-            return null;
-        }
-        // send error event only once so we know what value is invalid
-        if (!this.reportedInvalidCharacters) {
-            this.reportedInvalidCharacters = true;
-            void sendErrorLog({
-                endpoint: 'NonLatinInput',
-                errors: Object.keys(invalidList).map(fieldName => {
-                    var _a;
-                    if (fieldName !== 'name') {
-                        // trim all number so we don't send sensitive information
-                        const trimmedAddress = (_a = addressValue[fieldName]) === null || _a === void 0 ? void 0 : _a.replace(/[\d\w]+/g, '');
-                        return `Invalid character found ${fieldName}: "${trimmedAddress}"`;
-                    }
-                    const customerName = name || `${firstName} ${lastName}`;
-                    const trimmedName = customerName.replace(/[\d\w]+/g, '');
-                    return `Invalid character found ${fieldName}: "${trimmedName}"`;
-                }),
-                metadata: {},
-            });
-        }
-        return invalidList;
-    }
     async watchInitStripe() {
         var _a, _b;
         this.stripe = window.Zonos.stripe;
@@ -211,17 +135,10 @@ const ZonosAddress = /*@__PURE__*/ proxyCustomElement(class ZonosAddress extends
                 stripeAddressEventData.value.address.line1.length > 0;
         // @Watch doesn't get trigger on initial load
         void this.watchInitStripe();
-        setTimeout(() => {
-            // check if the address contains invalid characters after address is loaded
-            const newStripeAddressEventData = this.getStripeAddressInstance().stripeAddressEventData;
-            if (newStripeAddressEventData) {
-                this.checkInvalidCharacters(newStripeAddressEventData);
-            }
-        }, 500);
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: 'd5100d824d84c5e5b238f4877d489ca1b3f7b886', class: "zonos--address zonos--elements" }, h("zonos-text", { key: '0fd51ddf9b08b4f62aa75a5f2e919d40e52f6fc3', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: '3a53ec2a36e96639ec5437b928d4be4b84fb3aff', class: "zonos--address-component" }), this.invalidCharacterList && (h("zonos-banner", { key: '1141be407cff5b6741a40a06712a71e881d3a082', bannerTitle: translate('Please resolve the following errors:'), intent: "error" }, Object.keys(this.invalidCharacterList).map(fieldName => (h("zonos-text", null, `- ${translate(mappedFields[fieldName])}: ${translate('only supports Latin characters (A-Z, a-z)')}`)))))));
+        return (h(Host, { key: 'f45a7bbe9d6b5ffac15671a862b3ad4f2eb4a87b', class: "zonos--address zonos--elements" }, h("zonos-text", { key: 'a9119e6e0c4e5c81a7d17ebe4d6bec925404a3dd', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: '7dc12043c6e75ebabd646490c390bafdc2cd4a1d', class: "zonos--address-component" })));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -233,8 +150,6 @@ const ZonosAddress = /*@__PURE__*/ proxyCustomElement(class ZonosAddress extends
         "titleText": [1, "title-text"],
         "defaultAddress": [16],
         "stripe": [32],
-        "reportedInvalidCharacters": [32],
-        "invalidCharacterList": [32],
         "isDirtyAddress": [32]
     }, undefined, {
         "stripe": ["watchInitStripe"]
@@ -243,18 +158,13 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["zonos-address", "zonos-banner", "zonos-text"];
+    const components = ["zonos-address", "zonos-text"];
     components.forEach(tagName => { switch (tagName) {
         case "zonos-address":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, ZonosAddress);
             }
             break;
-        case "zonos-banner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
         case "zonos-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();