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

package/dist/collection/components/stripe/zonos-address/zonos-address.js

@@ -6,6 +6,16 @@ import { zonosStore } from "../../store/zonosStore";
 import { isCheckoutMobile } from "../../utils/checkout/isCheckoutMobile";
 import { containsNonLatinChars } from "../../utils/containsNonLatinChars";
 import { logError } from "../../utils/logging/logError";
+import { sendErrorLog } from "../../utils/logging/sendErrorLog";
+const mappedFields = {
+    city: 'City',
+    country: 'Country',
+    line1: 'Address line 1',
+    line2: 'Address line 2',
+    name: 'Name',
+    postal_code: 'Postal code',
+    state: 'State',
+};
 /**
  * This component is a wrapper for the stripe address element that would render default style object
  */
@@ -15,7 +25,8 @@ export class ZonosAddress {
         this.titleText = undefined;
         this.defaultAddress = null;
         this.stripe = window.Zonos.stripe;
-        this.hasInvalidCharacters = false;
+        this.reportedInvalidCharacters = false;
+        this.invalidCharacterList = null;
         this.isDirtyAddress = false;
     }
     getStripeAddressInstance() {
@@ -41,13 +52,9 @@ export class ZonosAddress {
                 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') {
@@ -60,7 +67,7 @@ export class ZonosAddress {
         // 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;
@@ -73,11 +80,29 @@ export class ZonosAddress {
             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;
@@ -176,7 +201,7 @@ export class ZonosAddress {
     }
     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)')}`)))))));
     }
     static get is() { return "zonos-address"; }
     static get encapsulation() { return "scoped"; }
@@ -253,7 +278,8 @@ export class ZonosAddress {
     static get states() {
         return {
             "stripe": {},
-            "hasInvalidCharacters": {},
+            "reportedInvalidCharacters": {},
+            "invalidCharacterList": {},
             "isDirtyAddress": {}
         };
     }

package/dist/collection/components/utils/containsNonLatinChars.js

@@ -3,11 +3,15 @@
  * @returns an object with the same keys as the input object, and a boolean value indicating if the value contains non-latin characters
  */
 export 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;
 };

package/dist/components/sendErrorLog.js

@@ -0,0 +1,21 @@
+import { h as handleFetch } from './stripe.js';
+
+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',
+    });
+};
+
+export { sendErrorLog as s };