@zonos/elements 1.3.8-alpha.0 → 1.3.8-alpha.1

package/dist/components/stripe.js

@@ -87,6 +87,9 @@ const stringsArabic = {
     "Payment processing. We'll update you when payment is received.": {
         value: 'جارٍ معالجة الدفع. سنحدثك عند استلام الدفعة.',
     },
+    'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
+        value: 'يرجى التأكد من أن نصك يستخدم الأبجدية اللاتينية فقط (A-Z, a-z).',
+    },
     'Powered by': {
         value: 'مشغل بواسطة',
     },
@@ -255,6 +258,9 @@ const stringsBase = {
     "Payment processing. We'll update you when payment is received.": {
         value: "Payment processing. We'll update you when payment is received.",
     },
+    'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
+        value: 'Please ensure your text uses the Latin alphabet only (A-Z, a-z).',
+    },
     'Powered by': {
         value: 'Powered by',
     },
@@ -423,6 +429,9 @@ const stringsChinese = {
     "Payment processing. We'll update you when payment is received.": {
         value: '付款处理中。付款收到后，我们将通知您。',
     },
+    'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
+        value: '请确保您的文本仅使用拉丁字母表（A-Z, a-z）。',
+    },
     'Powered by': {
         value: '由...提供支持',
     },
@@ -591,6 +600,9 @@ const stringsDanish = {
     "Payment processing. We'll update you when payment is received.": {
         value: 'Behandler betaling. Vi opdaterer dig, når betalingen er modtaget.',
     },
+    'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
+        value: 'Sørg venligst for, at din tekst kun bruger det latinske alfabet (A-Z, a-z).',
+    },
     'Powered by': {
         value: 'Drevet af',
     },
@@ -759,6 +771,9 @@ const stringsDutch = {
     "Payment processing. We'll update you when payment is received.": {
         value: 'Betaling verwerken. We brengen je op de hoogte wanneer de betaling is ontvangen.',
     },
+    'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
+        value: 'Zorg ervoor dat uw tekst alleen het Latijnse alfabet gebruikt (A-Z, a-z).',
+    },
     'Powered by': {
         value: 'Aangedreven door',
     },
@@ -927,6 +942,9 @@ const stringsFrench = {
     "Payment processing. We'll update you when payment is received.": {
         value: 'Traitement du paiement en cours. Nous vous tiendrons informé dès réception du paiement.',
     },
+    'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
+        value: "Veuillez vous assurer que votre texte utilise uniquement l'alphabet latin (A-Z, a-z).",
+    },
     'Powered by': {
         value: 'Propulsé par',
     },
@@ -1095,6 +1113,9 @@ const stringsGerman = {
     "Payment processing. We'll update you when payment is received.": {
         value: 'Zahlung wird verarbeitet. Wir informieren Sie, sobald die Zahlung eingegangen ist.',
     },
+    'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
+        value: 'Bitte stellen Sie sicher, dass Ihr Text nur das lateinische Alphabet verwendet (A-Z, a-z).',
+    },
     'Powered by': {
         value: 'Angetrieben von',
     },
@@ -1263,6 +1284,9 @@ const stringsHebrew = {
     "Payment processing. We'll update you when payment is received.": {
         value: 'התשלום מעובד. נעדכן אותך כשהתשלום יתקבל.',
     },
+    'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
+        value: 'אנא ודא שהטקסט שלך משתמש באלפבית הלטיני בלבד (A-Z, a-z).',
+    },
     'Powered by': {
         value: 'מופעל על ידי',
     },
@@ -1431,6 +1455,9 @@ const stringsIndonesian = {
     "Payment processing. We'll update you when payment is received.": {
         value: 'Pemrosesan pembayaran. Kami akan memberi Anda pembaruan ketika pembayaran diterima.',
     },
+    'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
+        value: 'Harap pastikan teks Anda hanya menggunakan alfabet Latin (A-Z, a-z).',
+    },
     'Powered by': {
         value: 'Dipersembahkan oleh',
     },
@@ -1599,6 +1626,9 @@ const stringsItalian = {
     "Payment processing. We'll update you when payment is received.": {
         value: 'Elaborazione pagamento in corso. Ti aggiorneremo quando il pagamento sarà ricevuto.',
     },
+    'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
+        value: "Si prega di assicurarsi che il testo utilizzi solo l'alfabeto latino (A-Z, a-z).",
+    },
     'Powered by': {
         value: 'Offerto da',
     },
@@ -1767,6 +1797,9 @@ const stringsJapanese = {
     "Payment processing. We'll update you when payment is received.": {
         value: '支払処理中です。入金が確認された際に更新いたします。',
     },
+    'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
+        value: 'テキストがラテンアルファベットのみを使用していることを確認してください（A-Z、a-z）。',
+    },
     'Powered by': {
         value: 'Powered by',
     },
@@ -1935,6 +1968,9 @@ const stringsKorean = {
     "Payment processing. We'll update you when payment is received.": {
         value: '결제 처리 중. 결제가 접수되면 알려드리겠습니다.',
     },
+    'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
+        value: '텍스트가 라틴 알파벳만 사용하는지 확인해 주세요 (A-Z, a-z).',
+    },
     'Powered by': {
         value: '제공됨',
     },
@@ -2103,6 +2139,9 @@ const stringsNorwegian = {
     "Payment processing. We'll update you when payment is received.": {
         value: 'Bearbeider betalingen. Vi gir deg beskjed når betalingen er mottatt.',
     },
+    'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
+        value: 'Vennligst sørg for at teksten din kun bruker det latinske alfabetet (A-Z, a-z).',
+    },
     'Powered by': {
         value: 'Drevet av',
     },
@@ -2271,6 +2310,9 @@ const stringsPolish = {
     "Payment processing. We'll update you when payment is received.": {
         value: 'Trwa przetwarzanie płatności. Poinformujemy gdy płatność zostanie otrzymana.',
     },
+    'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
+        value: 'Proszę upewnić się, że tekst używa tylko alfabetu łacińskiego (A-Z, a-z).',
+    },
     'Powered by': {
         value: 'Dostarczone przez',
     },
@@ -2439,6 +2481,9 @@ const stringsPortuguese = {
     "Payment processing. We'll update you when payment is received.": {
         value: 'Processando pagamento. Informaremos quando o pagamento for recebido.',
     },
+    'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
+        value: 'Por favor, certifique-se de que seu texto utilize apenas o alfabeto latino (A-Z, a-z).',
+    },
     'Powered by': {
         value: 'Desenvolvido por',
     },
@@ -2607,6 +2652,9 @@ const stringsRussian = {
     "Payment processing. We'll update you when payment is received.": {
         value: 'Обрабатываем платеж. Сообщим вам, когда платеж будет получен.',
     },
+    'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
+        value: 'Пожалуйста, убедитесь, что ваш текст использует только латинский алфавит (A-Z, a-z).',
+    },
     'Powered by': {
         value: 'Работает на',
     },
@@ -2775,6 +2823,9 @@ const stringsSpanish = {
     "Payment processing. We'll update you when payment is received.": {
         value: 'Procesando pago. Le informaremos cuando se reciba el pago.',
     },
+    'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
+        value: 'Por favor, asegúrese de que su texto use solo el alfabeto latino (A-Z, a-z).',
+    },
     'Powered by': {
         value: 'Desarrollado por',
     },
@@ -2943,6 +2994,9 @@ const stringsSwedish = {
     "Payment processing. We'll update you when payment is received.": {
         value: 'Betalningsbehandling. Vi kommer att uppdatera dig när betalningen har mottagits.',
     },
+    'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
+        value: 'Vänligen se till att din text endast använder det latinska alfabetet (A-Z, a-z).',
+    },
     'Powered by': {
         value: 'Drivs av',
     },
@@ -3111,6 +3165,9 @@ const stringsTurkish = {
     "Payment processing. We'll update you when payment is received.": {
         value: 'Ödeme işleniyor. Ödeme alındığında sizi bilgilendireceğiz.',
     },
+    'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
+        value: 'Lütfen metninizin sadece Latin alfabesini kullandığından emin olun (A-Z, a-z).',
+    },
     'Powered by': {
         value: 'Tarafından desteklenmektedir',
     },
@@ -3279,6 +3336,9 @@ const stringsVietnamese = {
     "Payment processing. We'll update you when payment is received.": {
         value: 'Đang xử lý thanh toán. Chúng tôi sẽ thông báo khi nhận được thanh toán.',
     },
+    'Please ensure your text uses the Latin alphabet only (A-Z, a-z).': {
+        value: 'Vui lòng đảm bảo rằng văn bản của bạn chỉ sử dụng bảng chữ cái Latinh (A-Z, a-z).',
+    },
     'Powered by': {
         value: 'Nền tảng cung cấp bởi',
     },
@@ -4364,23 +4424,40 @@ const jsonParse = (_data) => {
 };
 
 const addressRuleStyle = ({ theme, }) => {
+    const defaultStyle = {
+        '.Action': {
+            color: 'var(--colorText)',
+        },
+        '.Input': {
+            boxShadow: 'none',
+            // need to reset everything and the paddingTop to default, otherwise the paddingTop will not be updated.
+            padding: '0',
+            paddingBottom: '8px',
+            paddingLeft: '16px',
+            paddingRight: '8px',
+            // any value here will be add up to the default paddingTop (20px).
+            paddingTop: '6px',
+        },
+        '.Input:focus': {
+            boxShadow: 'none',
+        },
+        '.PickerItem--highlight': {
+            boxShadow: '0 0 0 2px var(--colorBackground)',
+        },
+        '.PickerItem--highlight:hover': {
+            backgroundColor: 'var(--colorBackground)',
+            boxShadow: 'none',
+        },
+        '.PickerItem--new': {
+            color: 'var(--colorText)',
+        },
+    };
     switch (theme) {
+        case 'DARK': {
+            return Object.assign(Object.assign({}, defaultStyle), { '.Action': Object.assign(Object.assign({}, defaultStyle['.Action']), { color: 'white' }), '.PickerItem--new': Object.assign(Object.assign({}, defaultStyle['.PickerItem--new']), { color: 'white' }) });
+        }
         default:
-            return {
-                '.Input': {
-                    boxShadow: 'none',
-                    // need to reset everything and the paddingTop to default, otherwise the paddingTop will not be updated.
-                    padding: '0',
-                    paddingBottom: '8px',
-                    paddingLeft: '16px',
-                    paddingRight: '8px',
-                    // any value here will be add up to the default paddingTop (20px).
-                    paddingTop: '6px',
-                },
-                '.Input:focus': {
-                    boxShadow: 'none',
-                },
-            };
+            return defaultStyle;
     }
 };
 
@@ -4432,7 +4509,7 @@ const getStripeOptions = ({ clientSecret, overrideBorderRaidus, overridePrimaryC
     return {
         appearance: {
             labels: 'floating',
-            rules: Object.assign({}, addressRuleStyle({ theme: 'LIGHT' })),
+            rules: Object.assign({}, addressRuleStyle({ theme: overrideTheme || 'LIGHT' })),
             // get contrast theme color base on primary color
             theme: overrideTheme ? theme : themeBasedColor,
             variables: Object.assign(Object.assign({}, defaultVariable({
@@ -4569,9 +4646,9 @@ const stripeStorePrefetchLandedCost = async () => {
                         return null;
                     }
                     return Object.assign(Object.assign({}, checkoutSession), { landedCost: foundLandedCost });
-                }).filter(Boolean)) || null;
+                }).filter(Boolean)) || [];
             cartStore.shippingData =
-                (shipmentRatingCalculateWorkflow === null || shipmentRatingCalculateWorkflow === void 0 ? void 0 : shipmentRatingCalculateWorkflow.filter(Boolean)) || null;
+                (shipmentRatingCalculateWorkflow === null || shipmentRatingCalculateWorkflow === void 0 ? void 0 : shipmentRatingCalculateWorkflow.filter(Boolean)) || [];
             // apply new subtotal and total, this is mainly to show items in the presentment currency
             const firstLandedCostData = (_f = cartStore.landedCostData) === null || _f === void 0 ? void 0 : _f.find(Boolean);
             const subtotals = !!firstLandedCostData

package/dist/components/zonos-address2.js

@@ -1,19 +1,37 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { s as stripeStore, a as stripeStorePrefetchLandedCost, l as logError, b as localizationStore } from './stripe.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { s as stripeStore, a as stripeStorePrefetchLandedCost, l as logError, b as localizationStore, t as translate } from './stripe.js';
+import { z as zonosStore } from './zonosStore.js';
 import { i as isCheckoutMobile } from './isCheckoutMobile.js';
+import { d as defineCustomElement$2 } from './zonos-banner2.js';
 import { d as defineCustomElement$1 } from './zonos-text2.js';
 
-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:var(--amino-space-16)}";
+/**
+ * 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) => {
+    /**
+     * 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) ? 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:var(--amino-space-16)}.sc-zonos-address-h zonos-banner.sc-zonos-address{margin-top:var(--amino-space-8)}";
 const ZonosAddressStyle0 = zonosAddressCss;
 
 const ZonosAddress = /*@__PURE__*/ proxyCustomElement(class ZonosAddress extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
+        this.invalidCharacters = createEvent(this, "invalidCharacters", 7);
         this.type = undefined;
         this.titleText = undefined;
         this.defaultAddress = null;
         this.stripe = window.Zonos.stripe;
+        this.hasInvalidCharacters = false;
         this.isDirtyAddress = false;
     }
     getStripeAddressInstance() {
@@ -39,6 +57,13 @@ const ZonosAddress = /*@__PURE__*/ proxyCustomElement(class ZonosAddress extends
                 stripeStore.stripeAddressEventData = event;
                 break;
         }
+        const hasInvalidCharacters = this.checkInvalidCharacters(event);
+        this.invalidCharacters.emit(hasInvalidCharacters);
+        this.hasInvalidCharacters = hasInvalidCharacters;
+        if (hasInvalidCharacters) {
+            // no need to prefetch landed cost if the address contains invalid characters
+            return;
+        }
         // only prefetch if the address type is shipping
         void stripeStorePrefetchLandedCost();
     }
@@ -49,6 +74,29 @@ 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 false;
+        }
+        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,
+        });
+        // emit event if the address contains invalid characters
+        if (Object.keys(invalidList).length) {
+            return true;
+        }
+        return false;
+    }
     async watchInitStripe() {
         var _a, _b;
         this.stripe = window.Zonos.stripe;
@@ -112,7 +160,7 @@ const ZonosAddress = /*@__PURE__*/ proxyCustomElement(class ZonosAddress extends
                 }, 600);
             }
             this.updateAddressEventData({
-                event: Object.assign(Object.assign({}, event), { elementMode: this.type, elementType: 'address', empty: false, value: Object.assign(Object.assign({}, eventValue), { firstName: eventValue.firstName || eventValue.name.split(' ')[0], lastName: eventValue.lastName || eventValue.name.split(' ').pop() }) }),
+                event: Object.assign(Object.assign({}, event), { elementMode: this.type, elementType: 'address', value: Object.assign(Object.assign({}, eventValue), { firstName: eventValue.firstName || eventValue.name.split(' ')[0], lastName: eventValue.lastName || eventValue.name.split(' ')[1] }) }),
                 type: this.type,
             });
         });
@@ -133,10 +181,17 @@ 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: '8d762300d8f599a277806d861d13d2beb6a0a5a6', class: "zonos--address zonos--elements" }, h("zonos-text", { key: 'c355eece2f193cb0595ede434238f062b2c07c7c', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: '59c3bd68cd67c8d733fd2ca5d9f4b4114c84db4a', class: "zonos--address-component" })));
+        return (h(Host, { key: '2656f94224ff0385b4ae2594284257add19f82c3', class: "zonos--address zonos--elements" }, h("zonos-text", { key: '48b5ac45621d6d0f79f62227c71d70bb284c60da', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: '2f11c7983fd310afa01fa5100ce25ce49cfcc3da', class: "zonos--address-component" }), this.hasInvalidCharacters && (h("zonos-banner", { bannerTitle: translate('Please ensure your text uses the Latin alphabet only (A-Z, a-z).'), intent: "error" }))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -148,6 +203,7 @@ const ZonosAddress = /*@__PURE__*/ proxyCustomElement(class ZonosAddress extends
         "titleText": [1, "title-text"],
         "defaultAddress": [16],
         "stripe": [32],
+        "hasInvalidCharacters": [32],
         "isDirtyAddress": [32]
     }, undefined, {
         "stripe": ["watchInitStripe"]
@@ -156,13 +212,18 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["zonos-address", "zonos-text"];
+    const components = ["zonos-address", "zonos-banner", "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();

package/dist/components/zonos-checkout-finish2.js

@@ -127,8 +127,8 @@ const ZonosCheckoutFinish = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout
                     });
                     document.dispatchEvent(successEvent);
                 }
-                // Attempt to pull the order details from the graph every second on 5 attempts
-                if (this.notificationType === 'success') {
+                // Attempt to pull the order details from the graph every second on 5 attempts. Only pull if checkoutSessionId is available
+                if (this.notificationType === 'success' && cartStore.checkoutSessionId) {
                     // wait this to finish before resetting store and checkout session id
                     await this.getPullOrder();
                 }
@@ -173,7 +173,7 @@ const ZonosCheckoutFinish = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout
         // const totalItems = this.order?.items?.reduce((acc, item) => {
         //   return acc + item.quantity;
         // }, 0);
-        return (h(Host, { key: 'fe08bfd0c0b60f4dce1aa9a6f3ba273dccd70a92', class: "zonos--checkout-finish zonos--elements", style: {
+        return (h(Host, { key: 'd3e8a30ddfffe0cee18ff29edf839775f7a9d8ec', class: "zonos--checkout-finish zonos--elements", style: {
                 '--border-radius': getBorderRadius(this.borderRadius),
             } }, this.isLoading && (h("div", { class: "loading-wrapper" }, h("zonos-spinner", null))), !this.isLoading && (h(Fragment, null, h("div", { 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", { class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", null, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), h("zonos-button", { onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, translate('Keep shopping')))))));
     }

package/dist/components/zonos-customer-info2.js

@@ -2,7 +2,8 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { s as stripeStore, t as translate } from './stripe.js';
 import { t as trackConversionEvent } from './trackConversionEvent.js';
 import { s as submitGtag } from './submitGtag.js';
-import { d as defineCustomElement$7 } from './zonos-address2.js';
+import { d as defineCustomElement$8 } from './zonos-address2.js';
+import { d as defineCustomElement$7 } from './zonos-banner2.js';
 import { d as defineCustomElement$6 } from './zonos-button2.js';
 import { d as defineCustomElement$5 } from './zonos-checkbox2.js';
 import { d as defineCustomElement$4 } from './zonos-collapse2.js';
@@ -22,6 +23,17 @@ const ZonosCustomerInfo = /*@__PURE__*/ proxyCustomElement(class ZonosCustomerIn
          * handler for continue button click
          */
         this.continueClickHandler = () => {
+            if (this.hasInvalidBillingCharacters || this.hasInvalidShippingCharacters) {
+                // if the address contains invalid characters, scroll to the nearest zonos-banner
+                const banner = this.el.querySelector('zonos-address zonos-banner');
+                if (banner) {
+                    banner.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'center',
+                    });
+                }
+                return;
+            }
             this.continueClicked.emit();
         };
         this.continueLoading = false;
@@ -29,6 +41,8 @@ const ZonosCustomerInfo = /*@__PURE__*/ proxyCustomElement(class ZonosCustomerIn
         this.submitBtnColor = undefined;
         this.defaultAddress = null;
         this.disabled = true;
+        this.hasInvalidShippingCharacters = false;
+        this.hasInvalidBillingCharacters = false;
     }
     watchFormComplete() {
         if (!this.disabled) {
@@ -38,26 +52,28 @@ const ZonosCustomerInfo = /*@__PURE__*/ proxyCustomElement(class ZonosCustomerIn
         }
     }
     render() {
-        var _a, _b, _c, _d;
         if (!stripeStore.stripeElements) {
             return null;
         }
+        const stripeShippingAddressEventData = stripeStore.stripeAddressEventData;
+        const stripeBillingAddressEventData = stripeStore.stripeBillingAddressEventData;
+        const stripeLinkEventData = stripeStore.stripeLinkEventData;
         // if the shipping is different from billing, we need to make sure the billing address is valid and disable the button if it's not
         const isValidBilling = stripeStore.stripeShippingSameAsBilling
-            ? !!((_a = stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.complete)
-            : !!((_b = stripeStore.stripeBillingAddressEventData) === null || _b === void 0 ? void 0 : _b.complete);
+            ? !!(stripeShippingAddressEventData === null || stripeShippingAddressEventData === void 0 ? void 0 : stripeShippingAddressEventData.complete)
+            : !!(stripeBillingAddressEventData === null || stripeBillingAddressEventData === void 0 ? void 0 : stripeBillingAddressEventData.complete);
+        const isValidShipping = !!(stripeShippingAddressEventData === null || stripeShippingAddressEventData === void 0 ? void 0 : stripeShippingAddressEventData.complete);
+        const isValidLink = !!(stripeLinkEventData === null || stripeLinkEventData === void 0 ? void 0 : stripeLinkEventData.complete);
         // make sure data is valid
-        this.disabled =
-            !isValidBilling ||
-                !((_c = stripeStore.stripeAddressEventData) === null || _c === void 0 ? void 0 : _c.complete) ||
-                !((_d = stripeStore.stripeLinkEventData) === null || _d === void 0 ? void 0 : _d.complete);
+        this.disabled = !isValidBilling || !isValidShipping || !isValidLink;
         const showBilling = !stripeStore.stripeShippingSameAsBilling;
-        return (h(Host, { class: "zonos--customer-info zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Customer information')), h("zonos-link-authentication", { titleText: translate('Contact') }), h("zonos-address", { defaultAddress: this.defaultAddress, titleText: translate('Address'), type: "shipping" }), h("zonos-checkbox", { isChecked: stripeStore.stripeShippingSameAsBilling, label: translate('Shipping address same as billing'), onCheckboxSelected: e => {
+        return (h(Host, { class: "zonos--customer-info zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Customer information')), h("zonos-link-authentication", { titleText: translate('Contact') }), h("zonos-address", { defaultAddress: this.defaultAddress, onInvalidCharacters: e => (this.hasInvalidShippingCharacters = e.detail), titleText: translate('Address'), type: "shipping" }), h("zonos-checkbox", { isChecked: stripeStore.stripeShippingSameAsBilling, label: translate('Shipping address same as billing'), onCheckboxSelected: e => {
                 stripeStore.stripeShippingSameAsBilling = e.detail;
-            } }), h("zonos-collapse", { collapsed: !showBilling }, h("zonos-address", { defaultAddress: this.defaultAddress, titleText: translate('Billing address'), type: "billing" })), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, isDisabled: this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
+            } }), h("zonos-collapse", { collapsed: !showBilling }, h("zonos-address", { defaultAddress: this.defaultAddress, onInvalidCharacters: e => (this.hasInvalidBillingCharacters = e.detail), titleText: translate('Billing address'), type: "billing" })), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, isDisabled: this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode
             variant: this.submitBtnType }, translate('Continue to shipping'))))));
     }
+    get el() { return this; }
     static get watchers() { return {
         "disabled": ["watchFormComplete"]
     }; }
@@ -67,7 +83,9 @@ const ZonosCustomerInfo = /*@__PURE__*/ proxyCustomElement(class ZonosCustomerIn
         "submitBtnType": [1, "submit-btn-type"],
         "submitBtnColor": [1, "submit-btn-color"],
         "defaultAddress": [16],
-        "disabled": [32]
+        "disabled": [32],
+        "hasInvalidShippingCharacters": [32],
+        "hasInvalidBillingCharacters": [32]
     }, undefined, {
         "disabled": ["watchFormComplete"]
     }]);
@@ -75,7 +93,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["zonos-customer-info", "zonos-address", "zonos-button", "zonos-checkbox", "zonos-collapse", "zonos-link-authentication", "zonos-spinner", "zonos-text"];
+    const components = ["zonos-customer-info", "zonos-address", "zonos-banner", "zonos-button", "zonos-checkbox", "zonos-collapse", "zonos-link-authentication", "zonos-spinner", "zonos-text"];
     components.forEach(tagName => { switch (tagName) {
         case "zonos-customer-info":
             if (!customElements.get(tagName)) {
@@ -83,6 +101,11 @@ function defineCustomElement() {
             }
             break;
         case "zonos-address":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "zonos-banner":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }

package/dist/components/zonosStore.js

@@ -2767,6 +2767,7 @@ const { reset, state: zonosStore } = createStore(() => ({
         zonosAttribution: 'DISABLED',
     },
     checkoutSettings: {
+        allowedCharacterSets: 'ALL',
         analyticsProviders: [],
         orderNotifications: {
             abandonedCart: {