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

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

@@ -1,21 +1,8 @@
 import { h, Host, } from "@stencil/core";
 import { stripeStore } from "../../store/checkout/stripe";
 import { localizationStore } from "../../store/hello/localization";
-import { translate } from "../../store/translationStore";
-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
  */
@@ -25,8 +12,6 @@ export class ZonosAddress {
         this.titleText = undefined;
         this.defaultAddress = null;
         this.stripe = window.Zonos.stripe;
-        this.reportedInvalidCharacters = false;
-        this.invalidCharacterList = null;
         this.isDirtyAddress = false;
     }
     getStripeAddressInstance() {
@@ -52,9 +37,6 @@ export class ZonosAddress {
                 stripeStore.stripeAddressEventData = event;
                 break;
         }
-        const invalidCharacterList = this.checkInvalidCharacters(event);
-        this.invalidCharacterList = invalidCharacterList;
-        this.invalidCharacters.emit(!!invalidCharacterList);
     }
     updateAddressElement({ stripeAddressElement, type, }) {
         if (type === 'shipping') {
@@ -63,47 +45,6 @@ export class ZonosAddress {
         }
         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;
@@ -191,17 +132,10 @@ export class ZonosAddress {
                 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" })));
     }
     static get is() { return "zonos-address"; }
     static get encapsulation() { return "scoped"; }
@@ -255,10 +189,10 @@ export class ZonosAddress {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "ContactOption | null",
+                    "original": "StripeContactOption | null",
                     "resolved": "ContactOption | null",
                     "references": {
-                        "ContactOption": {
+                        "StripeContactOption": {
                             "location": "import",
                             "path": "@stripe/stripe-js",
                             "id": ""
@@ -278,8 +212,6 @@ export class ZonosAddress {
     static get states() {
         return {
             "stripe": {},
-            "reportedInvalidCharacters": {},
-            "invalidCharacterList": {},
             "isDirtyAddress": {}
         };
     }

package/dist/collection/components/stripe/zonos-link-authentication/zonos-link-authentication.js

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { h, Host } from "@stencil/core";
-import { stripeStore, stripeStorePrefetchLandedCost, } from "../../store/checkout/stripe";
+import { stripeStore } from "../../store/checkout/stripe";
 import { logError } from "../../utils/logging/logError";
 /**
  * This component is a wrapper for the stripe authentication element that would render default style object
@@ -8,15 +8,23 @@ import { logError } from "../../utils/logging/logError";
 export class ZonosLinkAuthentication {
     constructor() {
         this.titleText = undefined;
+        this.defaultEmail = null;
         this.stripe = stripeStore.stripe;
     }
     watchInitStripe() {
         if (!this.stripe || !stripeStore.stripeElements) {
             return;
         }
+        const defaultValues = this.defaultEmail
+            ? {
+                email: this.defaultEmail,
+            }
+            : undefined;
         // Create and mount the Authentication Element in ${type} mode
         const linkAuthenticationElement = stripeStore.stripeLinkElement ||
-            stripeStore.stripeElements.create('linkAuthentication');
+            stripeStore.stripeElements.create('linkAuthentication', {
+                defaultValues: defaultValues || undefined,
+            });
         const linkAuthenticationElementContainer = this.el.querySelector('.zonos--link-authentication-component');
         if (!linkAuthenticationElementContainer) {
             logError('Cannot find container element for linkAuthenticationElement');
@@ -25,8 +33,6 @@ export class ZonosLinkAuthentication {
         linkAuthenticationElement.mount(linkAuthenticationElementContainer);
         linkAuthenticationElement.on('change', event => {
             stripeStore.stripeLinkEventData = event;
-            // run prefetch landed cost when address is changed
-            void stripeStorePrefetchLandedCost();
         });
         stripeStore.stripeLinkElement = linkAuthenticationElement;
     }
@@ -36,7 +42,7 @@ export class ZonosLinkAuthentication {
     }
     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: '97c3c388d1a035e6a46ecdbd3bc66d80a589b19f', class: "zonos--link-authentication zonos--elements" }, h("zonos-text", { key: 'e799af821045b2c1792d2971843afa0c7d3ece5b', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: 'eaf9be27a11d279c13f261e1312ee8a46e4620f7', class: "zonos--link-authentication-component" })));
+        return (h(Host, { key: '4a7b9eb534e938f791f70e04756aa9fb1c39f2c7', class: "zonos--link-authentication zonos--elements" }, h("zonos-text", { key: 'cc4fe49ed6d4bd7cec502ef739b9e835e9e26584', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: 'f04a438d04e6ccd608d7ff61ac300fb09da4f0ce', class: "zonos--link-authentication-component" })));
     }
     static get is() { return "zonos-link-authentication"; }
     static get encapsulation() { return "scoped"; }
@@ -68,6 +74,24 @@ export class ZonosLinkAuthentication {
                 },
                 "attribute": "title-text",
                 "reflect": false
+            },
+            "defaultEmail": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Default email for stripe"
+                },
+                "attribute": "default-email",
+                "reflect": false,
+                "defaultValue": "null"
             }
         };
     }

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

@@ -37,7 +37,7 @@ export class ZonosPayment {
     }
     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: '2ac7d34f60a5e4fc21fed92218e8b467e49bee33', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { key: 'a0360edd61bf571645fbc0781a43a94cf02e9acc', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: '41a1daa79d640eecf197e520145c41cf957fbee1', class: "zonos--payment-component" })));
+        return (h(Host, { key: '7967dfeb2c8661201aed74d3d9f4be1df9eb993d', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { key: '2a3b744c1935f471897ab492efa7d3788907b126', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: '7d643ec935dc15339c79237572bd067efa8f23ea', class: "zonos--payment-component" })));
     }
     static get is() { return "zonos-payment"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/utils/checkout/buildTranslateRequestBody.js

@@ -0,0 +1,98 @@
+/**
+ * This function generates an object that contains the fields of an address that have invalid characters.
+ *
+ * @param {Object} params - The parameters for the function.
+ * @param {Address | null} params.address - The address to check for invalid characters.
+ * @param {ReturnType<typeof containsNonLatinChars> | null} params.invalidAdddressList - The list of address fields that contain invalid characters.
+ *
+ * @returns {Partial<Address> | undefined} - An object that contains the fields of the address that have invalid characters. If no fields have invalid characters, the function returns undefined.
+ */
+const getExcludeAddressFieldsObject = ({ address, invalidAdddressList, }) => {
+    if (!address) {
+        return;
+    }
+    // if there are no invalid characters, return an empty object
+    if (!invalidAdddressList) {
+        return;
+    }
+    const excludeFields = {};
+    if (invalidAdddressList.city) {
+        excludeFields.city = address.city;
+    }
+    if (invalidAdddressList.line1) {
+        excludeFields.line1 = address.line1;
+    }
+    if (invalidAdddressList.line2) {
+        excludeFields.line2 = address.line2;
+    }
+    if (invalidAdddressList.postal_code) {
+        excludeFields.postal_code = address.postal_code;
+    }
+    if (invalidAdddressList.state) {
+        excludeFields.state = address.state;
+    }
+    if (invalidAdddressList.name) {
+        excludeFields.name = address.name;
+    }
+    // return null if there are no fields to exclude
+    return Object.keys(excludeFields).length ? excludeFields : undefined;
+};
+/**
+ * This function builds the request body for validating an address. It checks if the address and billing address are ready and if they contain any invalid characters.
+ * If there are non-latin character to translate, returns an object with the address fields that have invalid characters, the destination country, and the first and last name.
+ * If the conditions are not met, it returns null.
+ *
+ * @param {Object} params - The parameters for the function.
+ * @param {ReturnType<typeof containsNonLatinChars> | null} params.addressInvalidCharactersList - The list of address fields that contain invalid characters.
+ * @param {ReturnType<typeof containsNonLatinChars> | null} params.billingAddressInvalidCharactersList - The list of billing address fields that contain invalid characters.
+ * @param {StripeAddressEventData} params.stripeAddressEventData - The Stripe event data for the address.
+ * @param {StripeAddressEventData} params.stripeBillingAddressEventData - The Stripe event data for the billing address.
+ * @param {boolean} params.stripeShippingSameAsBilling - A flag indicating whether the shipping address is the same as the billing address.
+ *
+ * @returns {ValidateAddressRequestBody | null} - An object that contains the address fields that have invalid characters, the destination country, and the first and last name. If the conditions are not met, the function returns null.
+ */
+export const buildTranslateRequestBody = ({ addressInvalidCharactersList, billingAddressInvalidCharactersList, stripeAddressEventData, stripeBillingAddressEventData, stripeShippingSameAsBilling, }) => {
+    var _a, _b, _c, _d;
+    const isStripeAddressReady = !!(stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.complete);
+    const isStripeBillingAddressReady = stripeShippingSameAsBilling
+        ? isStripeAddressReady
+        : !!(stripeBillingAddressEventData === null || stripeBillingAddressEventData === void 0 ? void 0 : stripeBillingAddressEventData.complete);
+    // only translate if both address and billing address are ready
+    if (!isStripeAddressReady || !isStripeBillingAddressReady) {
+        return null;
+    }
+    // only translate if there are invalid characters
+    if (!addressInvalidCharactersList && !billingAddressInvalidCharactersList) {
+        return null;
+    }
+    const stripeAddressValue = stripeAddressEventData.value;
+    const stripeBillingAddressValue = (stripeBillingAddressEventData === null || stripeBillingAddressEventData === void 0 ? void 0 : stripeBillingAddressEventData.value) || null;
+    // Returns undefined if the name is Latin so it won't be included in the request body
+    const firstName = stripeAddressValue.firstName || ((_a = stripeAddressValue.name) === null || _a === void 0 ? void 0 : _a.split(' ')[0]);
+    const lastName = stripeAddressValue.lastName || ((_b = stripeAddressValue.name) === null || _b === void 0 ? void 0 : _b.split(' ')[1]);
+    const name = `${firstName} ${lastName}`;
+    const billingFirstName = stripeAddressValue.firstName ||
+        ((_c = stripeBillingAddressValue === null || stripeBillingAddressValue === void 0 ? void 0 : stripeBillingAddressValue.name) === null || _c === void 0 ? void 0 : _c.split(' ')[0]);
+    const billingLastName = stripeAddressValue.lastName ||
+        ((_d = stripeBillingAddressValue === null || stripeBillingAddressValue === void 0 ? void 0 : stripeBillingAddressValue.name) === null || _d === void 0 ? void 0 : _d.split(' ')[1]);
+    const billingName = billingFirstName && billingLastName
+        ? `${billingFirstName} ${billingLastName}`
+        : '';
+    const address = stripeAddressValue.address;
+    const billingAddress = stripeBillingAddressValue === null || stripeBillingAddressValue === void 0 ? void 0 : stripeBillingAddressValue.address;
+    return {
+        address: getExcludeAddressFieldsObject({
+            address: Object.assign(Object.assign({}, address), { name }),
+            invalidAdddressList: addressInvalidCharactersList,
+        }),
+        // only include billing address if it's different from the shipping address
+        billingAddress: !stripeShippingSameAsBilling
+            ? getExcludeAddressFieldsObject({
+                address: billingAddress
+                    ? Object.assign(Object.assign({}, billingAddress), { name: billingName }) : null,
+                invalidAdddressList: billingAddressInvalidCharactersList,
+            })
+            : undefined,
+        destinationCountry: address.country,
+    };
+};

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

@@ -1,17 +1,19 @@
-/**
- * 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
- */
-export const containsNonLatinChars = (params) => {
+export const isTextContainsNonLatinChars = (text) => {
     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) &&
+    return (nonLatinRegex.test(text) &&
         // allow special characters like web apostrophe and quotation mark
-        !specialCharacters.test(value)
-        ? Object.assign(Object.assign({}, prev), { [key]: true }) : prev, {});
+        !specialCharacters.test(text));
+};
+/**
+ * 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
+ */
+export const containsNonLatinChars = (params) => {
+    const nonLatinValueList = Object.entries(params).reduce((prev, [key, value]) => isTextContainsNonLatinChars(value) ? Object.assign(Object.assign({}, prev), { [key]: true }) : prev, {});
     return nonLatinValueList;
 };

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

@@ -4,11 +4,9 @@ import { zonosStore } from "../store/zonosStore";
  * @param overrideBorderStyle
  * @returns
  */
-export const getBorderRadius = (overrideBorderStyle, 
-/**
- * This is the custom round radius for component that 10px is too much for them
- */
-customRoundRadius = '10px') => {
+export const getBorderRadius = (params) => {
+    const customRoundRadius = (params === null || params === void 0 ? void 0 : params.customRoundRadius) || '10px';
+    const overrideBorderStyle = params === null || params === void 0 ? void 0 : params.overrideBorderStyle;
     if (overrideBorderStyle) {
         // If the override is set, use that, otherwise use the default radius style
         return overrideBorderStyle === 'SHARP' ? '0px' : customRoundRadius;

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

@@ -8,7 +8,7 @@ export const getButtonTheme = (overrideBackground) => {
     // use override background if it exists, otherwise use color from setting
     const background = overrideBackground || zonosStore.appearance.colorSecondary;
     const backgroundColor = background && isColorVariable(background)
-        ? `var(--amino-${background})`
+        ? `var(--zonos-elements-${background})`
         : background;
     // determine theme based on background color (to change button text color if needed)
     const buttonTheme = backgroundColor && isDarkColor(backgroundColor) ? 'DARK' : 'LIGHT';

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

@@ -1,7 +1,7 @@
 export const isColorVariable = (color) => {
     const isAminoVariable = color &&
-        // match --amino-<color>
-        (/--amino-/gi.test(color) ||
+        // match --zonos-elements-<color>
+        (/--zonos-elements-/gi.test(color) ||
             // match 'gray-0'
             /(\-*)\w+-\d+/gi.test(color));
     return (!!isAminoVariable &&

package/dist/collection/styles/stripe/defaultVariable.js

@@ -3,7 +3,7 @@ export const defaultVariable = ({ borderStyle, theme, }) => {
     switch (theme) {
         case 'DARK':
             return {
-                borderRadius: getBorderRadius(borderStyle),
+                borderRadius: getBorderRadius({ overrideBorderStyle: borderStyle }),
                 colorBackground: '#101117',
                 colorBackgroundText: '#C5C6CA',
                 colorText: '#C5C6CA',
@@ -11,7 +11,7 @@ export const defaultVariable = ({ borderStyle, theme, }) => {
             };
         default:
             return {
-                borderRadius: getBorderRadius(borderStyle),
+                borderRadius: getBorderRadius({ overrideBorderStyle: borderStyle }),
             };
     }
 };

package/dist/collection/types/checkout/TranslatedText.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/types/checkout/api/ValidateAddressRequest.js

@@ -0,0 +1 @@
+export {};

package/dist/components/containsNonLatinChars.js

@@ -0,0 +1,21 @@
+const isTextContainsNonLatinChars = (text) => {
+    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;
+    return (nonLatinRegex.test(text) &&
+        // allow special characters like web apostrophe and quotation mark
+        !specialCharacters.test(text));
+};
+/**
+ * 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 nonLatinValueList = Object.entries(params).reduce((prev, [key, value]) => isTextContainsNonLatinChars(value) ? Object.assign(Object.assign({}, prev), { [key]: true }) : prev, {});
+    return nonLatinValueList;
+};
+
+export { containsNonLatinChars as c, isTextContainsNonLatinChars as i };

package/dist/components/getBorderRadius.js

@@ -5,11 +5,9 @@ import { z as zonosStore } from './zonosStore.js';
  * @param overrideBorderStyle
  * @returns
  */
-const getBorderRadius = (overrideBorderStyle, 
-/**
- * This is the custom round radius for component that 10px is too much for them
- */
-customRoundRadius = '10px') => {
+const getBorderRadius = (params) => {
+    const customRoundRadius = (params === null || params === void 0 ? void 0 : params.customRoundRadius) || '10px';
+    const overrideBorderStyle = params === null || params === void 0 ? void 0 : params.overrideBorderStyle;
     if (overrideBorderStyle) {
         // If the override is set, use that, otherwise use the default radius style
         return overrideBorderStyle === 'SHARP' ? '0px' : customRoundRadius;

package/dist/components/isColorVariable.js

@@ -1,7 +1,7 @@
 const isColorVariable = (color) => {
     const isAminoVariable = color &&
-        // match --amino-<color>
-        (/--amino-/gi.test(color) ||
+        // match --zonos-elements-<color>
+        (/--zonos-elements-/gi.test(color) ||
             // match 'gray-0'
             /(\-*)\w+-\d+/gi.test(color));
     return (!!isAminoVariable &&