@zonos/elements 1.3.12-alpha.0 → 1.3.12-alpha.2

package/dist/components/trackConversionEvent.js

@@ -1,4 +1,4 @@
-import { r as handleFetch, a as localizationStore } from './stripe.js';
+import { h as handleFetch, a as localizationStore } from './stripe.js';
 import { z as zonosStore } from './zonosStore.js';
 
 const trackConversionEvent = async (eventName, metadata) => {

package/dist/components/zonos-address2.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { s as stripeStore, l as logError, a as localizationStore, t as translate } from './stripe.js';
 import { z as zonosStore } from './zonosStore.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';
 
@@ -10,18 +11,31 @@ import { d as defineCustomElement$1 } from './zonos-text2.js';
  * @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) ? Object.assign(Object.assign({}, prev), { [key]: true }) : prev, {});
+    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:var(--amino-space-16)}.sc-zonos-address-h zonos-banner.sc-zonos-address{margin-top:var(--amino-space-8)}";
 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();
@@ -31,7 +45,8 @@ const ZonosAddress = /*@__PURE__*/ proxyCustomElement(class ZonosAddress extends
         this.titleText = undefined;
         this.defaultAddress = null;
         this.stripe = window.Zonos.stripe;
-        this.hasInvalidCharacters = false;
+        this.reportedInvalidCharacters = false;
+        this.invalidCharacterList = null;
         this.isDirtyAddress = false;
     }
     getStripeAddressInstance() {
@@ -57,13 +72,9 @@ 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;
-        }
+        const invalidCharacterList = this.checkInvalidCharacters(event);
+        this.invalidCharacterList = invalidCharacterList;
+        this.invalidCharacters.emit(!!invalidCharacterList);
     }
     updateAddressElement({ stripeAddressElement, type, }) {
         if (type === 'shipping') {
@@ -76,7 +87,7 @@ const ZonosAddress = /*@__PURE__*/ proxyCustomElement(class ZonosAddress extends
         // Do nothing if the allowed character sets is ALL or the address is incomplete
         if (!address.complete ||
             zonosStore.checkoutSettings.allowedCharacterSets === 'ALL') {
-            return false;
+            return null;
         }
         const { address: addressValue, firstName, lastName, name } = address.value;
         const { city, country, line1, line2, postal_code, state } = addressValue;
@@ -89,11 +100,29 @@ const ZonosAddress = /*@__PURE__*/ proxyCustomElement(class ZonosAddress extends
             postal_code,
             state,
         });
-        // emit event if the address contains invalid characters
-        if (Object.keys(invalidList).length) {
-            return true;
+        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 false;
+        return invalidList;
     }
     async watchInitStripe() {
         var _a, _b;
@@ -192,7 +221,7 @@ const ZonosAddress = /*@__PURE__*/ proxyCustomElement(class ZonosAddress extends
     }
     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: '81b9d2e822eea4eb85a3d7d21ff645c9f0841f30', class: "zonos--address zonos--elements" }, h("zonos-text", { key: 'cd180e130f161233fd05365f9250913214846ced', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: 'b4d15f56e1215305367c071c4d9be985b09245b8', 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" }))));
+        return (h(Host, { key: 'b1ad2f6c9c23e6411bf1adccdd34b3aa4f5250b1', class: "zonos--address zonos--elements" }, h("zonos-text", { key: '786a733a44925a670393b72bf0ae3db5ba59f9a1', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: 'b9d58cbc17abf5daf5d13ffdebc7485c3ac6457d', class: "zonos--address-component" }), this.invalidCharacterList && (h("zonos-banner", { 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)')}`)))))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -204,7 +233,8 @@ const ZonosAddress = /*@__PURE__*/ proxyCustomElement(class ZonosAddress extends
         "titleText": [1, "title-text"],
         "defaultAddress": [16],
         "stripe": [32],
-        "hasInvalidCharacters": [32],
+        "reportedInvalidCharacters": [32],
+        "invalidCharacterList": [32],
         "isDirtyAddress": [32]
     }, undefined, {
         "stripe": ["watchInitStripe"]

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

@@ -1,8 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
-import { r as handleFetch, q as stripeStoreReset, c as cartStore, s as stripeStore, u as stripeStoreRetrievePayment, t as translate } from './stripe.js';
+import { h as handleFetch, r as stripeStoreReset, c as cartStore, s as stripeStore, u as stripeStoreRetrievePayment, t as translate } from './stripe.js';
 import { z as zonosStore } from './zonosStore.js';
 import { t as trackConversionEvent } from './trackConversionEvent.js';
 import { g as getBorderRadius } from './getBorderRadius.js';
+import { s as sendErrorLog } from './sendErrorLog.js';
 import { s as submitGtag } from './submitGtag.js';
 import { d as defineCustomElement$4 } from './zonos-button2.js';
 import { d as defineCustomElement$3 } from './zonos-icon2.js';
@@ -19,24 +20,6 @@ const createCustomEvent = (eventName, detail) => {
     });
 };
 
-const sendErrorLog = async ({ endpoint, errors, metadata }) => {
-    const userAgentData = 'userAgentData' in window.navigator
-        ? // userAgentData is not yet supported in all browsers
-            window.navigator.userAgentData
-        : null;
-    const errorObject = {
-        endpoint,
-        errors,
-        metadata: Object.assign({ href: window.location.href, userAgent: userAgentData && userAgentData.brands.length > 0
-                ? userAgentData
-                : window.navigator.userAgent }, metadata),
-    };
-    void handleFetch(`${"https://v1.route.js.zonos.com"}/api/zonos-elements/log-error`, {
-        body: errorObject,
-        method: 'POST',
-    });
-};
-
 const RemoveIcon = `<svg color="var(--amino-red-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(--amino-red-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 SuccessIcon = `<svg color="var(--amino-blue-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Z" data-is-secondary-color="true" fill="var(--amino-blue-100)" fill-rule="evenodd"></path><path clip-rule="evenodd" d="M15.707 9.293a1 1 0 0 1 0 1.414l-3.646 3.647a1.5 1.5 0 0 1-2.122 0l-1.646-1.647a1 1 0 1 1 1.414-1.414L11 12.586l3.293-3.293a1 1 0 0 1 1.414 0Z" fill="currentColor" fill-rule="evenodd"></path></svg>`;
@@ -237,4 +220,4 @@ function defineCustomElement() {
     } });
 }
 
-export { ZonosCheckoutFinish as Z, createCustomEvent as c, defineCustomElement as d, sendErrorLog as s };
+export { ZonosCheckoutFinish as Z, createCustomEvent as c, defineCustomElement as d };

package/dist/components/zonos-checkout.js

@@ -1,9 +1,10 @@
 import { proxyCustomElement, HTMLElement, h, Host, Fragment } from '@stencil/core/internal/client';
-import { a as localizationStore, b as log, d as stripeStoreGetDomesticShippingSession, e as localizationStoreUpdateSelectedCountryCode, f as stripeStoreCleanupDomesticShippingSession, l as logError, g as stripeStoreSaveDomesticShippingSession, i as initStripeElements, c as cartStore, h as cartStoreUpdateItems, j as cartStoreReset, s as stripeStore, k as stripeStoreInitCheckoutSession, m as cartStoreUpdateToErrorState, t as translate, n as stripeStorePrefetchLandedCost, o as cartStoreNextStep, p as stripeStoreConfirmPayment, q as stripeStoreReset } from './stripe.js';
+import { a as localizationStore, b as log, d as stripeStoreGetDomesticShippingSession, e as localizationStoreUpdateSelectedCountryCode, f as stripeStoreCleanupDomesticShippingSession, l as logError, g as stripeStoreSaveDomesticShippingSession, i as initStripeElements, c as cartStore, j as cartStoreUpdateItems, k as cartStoreReset, s as stripeStore, m as stripeStoreInitCheckoutSession, n as cartStoreUpdateToErrorState, t as translate, o as stripeStorePrefetchLandedCost, p as cartStoreNextStep, q as stripeStoreConfirmPayment, r as stripeStoreReset } from './stripe.js';
 import { z as zonosStore, g as getZonosStoreTheme, m as mergeConfig } from './zonosStore.js';
 import { t as trackConversionEvent } from './trackConversionEvent.js';
 import { i as isCheckoutMobile } from './isCheckoutMobile.js';
-import { c as createCustomEvent, s as sendErrorLog, d as defineCustomElement$l } from './zonos-checkout-finish2.js';
+import { c as createCustomEvent, d as defineCustomElement$l } from './zonos-checkout-finish2.js';
+import { s as sendErrorLog } from './sendErrorLog.js';
 import { c as classes } from './classes.js';
 import { g as getBorderRadius } from './getBorderRadius.js';
 import { i as isDarkColor } from './isDarkColor.js';

package/dist/components/zonos-controller.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { r as handleFetch, l as logError, y as isValidSelector, b as log, s as stripeStore, z as initLocalizationStore, e as localizationStoreUpdateSelectedCountryCode } from './stripe.js';
+import { h as handleFetch, l as logError, y as isValidSelector, b as log, s as stripeStore, z as initLocalizationStore, e as localizationStoreUpdateSelectedCountryCode } from './stripe.js';
 import { z as zonosStore, d as zonosStoreInitSetting, a as zonosStoreFontFamily } from './zonosStore.js';
 import { d as defineCustomElement$3 } from './zonos-notification2.js';
 import { d as defineCustomElement$2 } from './zonos-text2.js';

package/dist/components/zonos-hello.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { _ as _root, e as _baseGetTag, i as isObjectLike_1, f as isObject_1, z as zonosStore, g as getZonosStoreTheme, m as mergeConfig } from './zonosStore.js';
-import { r as handleFetch, l as logError, a as localizationStore, y as isValidSelector, t as translate, A as getZCountryUrlParam, B as setZCountryUrlParam, b as log, C as currencyDisplay, D as currencyConvertAndFormat, E as currencyConvert, F as currencyFormat } from './stripe.js';
+import { h as handleFetch, l as logError, a as localizationStore, y as isValidSelector, t as translate, A as getZCountryUrlParam, B as setZCountryUrlParam, b as log, C as currencyDisplay, D as currencyConvertAndFormat, E as currencyConvert, F as currencyFormat } from './stripe.js';
 import { c as classes } from './classes.js';
 import { g as getHasMoreSpaceOnRight, d as defineCustomElement$9 } from './zonos-hello-dialog2.js';
 import { d as defineCustomElement$f } from './zonos-banner2.js';

package/dist/components/zonos-link-authentication2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { s as stripeStore, l as logError, n as stripeStorePrefetchLandedCost } from './stripe.js';
+import { s as stripeStore, l as logError, o as stripeStorePrefetchLandedCost } from './stripe.js';
 import { d as defineCustomElement$1 } from './zonos-text2.js';
 
 const zonosLinkAuthenticationCss = ".sc-zonos-link-authentication-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-link-authentication-h *.sc-zonos-link-authentication{font-family:var(--font-family, Inter), Inter}.sc-zonos-link-authentication-h img.sc-zonos-link-authentication{max-width:100%}.sc-zonos-link-authentication-h dl.sc-zonos-link-authentication,.sc-zonos-link-authentication-h dd.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h1.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h2.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h3.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h4.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h5.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h6.sc-zonos-link-authentication,.sc-zonos-link-authentication-h hr.sc-zonos-link-authentication,.sc-zonos-link-authentication-h figure.sc-zonos-link-authentication,.sc-zonos-link-authentication-h p.sc-zonos-link-authentication,.sc-zonos-link-authentication-h pre.sc-zonos-link-authentication{margin:0}.sc-zonos-link-authentication-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-link-authentication-h .zonos--title.sc-zonos-link-authentication{margin-bottom:var(--amino-space-16)}";