@zonos/elements 1.3.188 → 1.3.190

package/dist/collection/components/store/translationStore/strings.chinese.js

@@ -167,6 +167,9 @@ export const stringsChinese = {
     'Duties, taxes, and fees': {
         value: '关税、税款和费用',
     },
+    'EORI number': {
+        value: 'EORI编号',
+    },
     Email: {
         value: '电子邮件',
     },

package/dist/collection/components/store/translationStore/strings.danish.js

@@ -167,6 +167,9 @@ export const stringsDanish = {
     'Duties, taxes, and fees': {
         value: 'Told, skatter og gebyrer',
     },
+    'EORI number': {
+        value: 'EORI-nummer',
+    },
     Email: {
         value: 'E-mail',
     },

package/dist/collection/components/store/translationStore/strings.dutch.js

@@ -167,6 +167,9 @@ export const stringsDutch = {
     'Duties, taxes, and fees': {
         value: 'Heffingen, belastingen en kosten',
     },
+    'EORI number': {
+        value: 'EORI-nummer',
+    },
     Email: {
         value: 'E-mail',
     },

package/dist/collection/components/store/translationStore/strings.french.js

@@ -167,6 +167,9 @@ export const stringsFrench = {
     'Duties, taxes, and fees': {
         value: 'Droits, taxes et frais',
     },
+    'EORI number': {
+        value: 'Numéro EORI',
+    },
     Email: {
         value: 'Courriel',
     },

package/dist/collection/components/store/translationStore/strings.german.js

@@ -167,6 +167,9 @@ export const stringsGerman = {
     'Duties, taxes, and fees': {
         value: 'Zölle, Steuern und Gebühren',
     },
+    'EORI number': {
+        value: 'EORI-Nummer',
+    },
     Email: {
         value: 'E-Mail',
     },

package/dist/collection/components/store/translationStore/strings.hebrew.js

@@ -167,6 +167,9 @@ export const stringsHebrew = {
     'Duties, taxes, and fees': {
         value: 'מכס, מסים ועמלות',
     },
+    'EORI number': {
+        value: 'מספר EORI',
+    },
     Email: {
         value: 'דוא"ל',
     },

package/dist/collection/components/store/translationStore/strings.indonesian.js

@@ -167,6 +167,9 @@ export const stringsIndonesian = {
     'Duties, taxes, and fees': {
         value: 'Bea masuk, pajak, dan biaya',
     },
+    'EORI number': {
+        value: 'Nomor EORI',
+    },
     Email: {
         value: 'Email',
     },

package/dist/collection/components/store/translationStore/strings.italian.js

@@ -167,6 +167,9 @@ export const stringsItalian = {
     'Duties, taxes, and fees': {
         value: 'Dazi, tasse e spese',
     },
+    'EORI number': {
+        value: 'Numero EORI',
+    },
     Email: {
         value: 'Email',
     },

package/dist/collection/components/store/translationStore/strings.japanese.js

@@ -167,6 +167,9 @@ export const stringsJapanese = {
     'Duties, taxes, and fees': {
         value: '関税、税金、手数料',
     },
+    'EORI number': {
+        value: 'EORI番号',
+    },
     Email: {
         value: 'メール',
     },

package/dist/collection/components/store/translationStore/strings.korean.js

@@ -167,6 +167,9 @@ export const stringsKorean = {
     'Duties, taxes, and fees': {
         value: '관세, 세금 및 수수료',
     },
+    'EORI number': {
+        value: 'EORI 번호',
+    },
     Email: {
         value: '이메일',
     },

package/dist/collection/components/store/translationStore/strings.norwegian.js

@@ -167,6 +167,9 @@ export const stringsNorwegian = {
     'Duties, taxes, and fees': {
         value: 'Avgifter, skatter og gebyrer',
     },
+    'EORI number': {
+        value: 'EORI-nummer',
+    },
     Email: {
         value: 'E-post',
     },

package/dist/collection/components/store/translationStore/strings.polish.js

@@ -167,6 +167,9 @@ export const stringsPolish = {
     'Duties, taxes, and fees': {
         value: 'Cła, podatki i opłaty',
     },
+    'EORI number': {
+        value: 'Numer EORI',
+    },
     Email: {
         value: 'Email',
     },

package/dist/collection/components/store/translationStore/strings.portuguese.js

@@ -167,6 +167,9 @@ export const stringsPortuguese = {
     'Duties, taxes, and fees': {
         value: 'Impostos, taxas e emolumentos',
     },
+    'EORI number': {
+        value: 'Número EORI',
+    },
     Email: {
         value: 'Email',
     },

package/dist/collection/components/store/translationStore/strings.russian.js

@@ -167,6 +167,9 @@ export const stringsRussian = {
     'Duties, taxes, and fees': {
         value: 'Пошлины, налоги и сборы',
     },
+    'EORI number': {
+        value: 'Номер EORI',
+    },
     Email: {
         value: 'Электронная почта',
     },

package/dist/collection/components/store/translationStore/strings.spanish.js

@@ -167,6 +167,9 @@ export const stringsSpanish = {
     'Duties, taxes, and fees': {
         value: 'Aranceles, impuestos y cuotas',
     },
+    'EORI number': {
+        value: 'Número EORI',
+    },
     Email: {
         value: 'Correo electrónico',
     },

package/dist/collection/components/store/translationStore/strings.swedish.js

@@ -167,6 +167,9 @@ export const stringsSwedish = {
     'Duties, taxes, and fees': {
         value: 'Tull, skatter och avgifter',
     },
+    'EORI number': {
+        value: 'EORI-nummer',
+    },
     Email: {
         value: 'E-post',
     },

package/dist/collection/components/store/translationStore/strings.turkish.js

@@ -167,6 +167,9 @@ export const stringsTurkish = {
     'Duties, taxes, and fees': {
         value: 'Gümrük vergisi, vergiler ve ücretler',
     },
+    'EORI number': {
+        value: 'EORI numarası',
+    },
     Email: {
         value: 'E-posta',
     },

package/dist/collection/components/store/translationStore/strings.vietnamese.js

@@ -167,6 +167,9 @@ export const stringsVietnamese = {
     'Duties, taxes, and fees': {
         value: 'Thuế, phí và lệ phí',
     },
+    'EORI number': {
+        value: 'Số EORI',
+    },
     Email: {
         value: 'Email',
     },

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

@@ -8,6 +8,7 @@ import { trackConversionEvent } from "../../utils/api/trackConversionEvent";
 import { isCheckoutMobile } from "../../utils/checkout/isCheckoutMobile";
 import { log } from "../../utils/logging/log";
 import { logError } from "../../utils/logging/logError";
+import { countryRequireTaxId, shipToTaxIdLabels, } from "../../../types/checkout/Tax";
 /**
  * This component is a wrapper for the stripe address element that would render default style object
  */
@@ -24,6 +25,7 @@ export class ZonosAddress {
         this.type = undefined;
         this.titleText = undefined;
         this.defaultAddress = [];
+        this.taxIdErrorMessage = '';
         this.stripe = window.Zonos.stripe;
         this.isDirtyAddress = false;
         this.isAddressFilled = false;
@@ -183,6 +185,33 @@ export class ZonosAddress {
         }
         void this.watchInitStripe();
     }
+    isInTaxIdCountry(countryCode) {
+        return countryRequireTaxId.includes(countryCode);
+    }
+    /**
+     * Render tax id input based on ship to country code
+     */
+    renderTaxIdInput() {
+        var _a;
+        // No need to render tax id input for billing address
+        if (this.type === 'billing') {
+            return null;
+        }
+        const countryCode = (_a = stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.value.address.country;
+        // Don't render tax id input if the country is not provided
+        if (!countryCode) {
+            return null;
+        }
+        const isCountryRequireTaxId = this.isInTaxIdCountry(countryCode);
+        if (!isCountryRequireTaxId) {
+            return null;
+        }
+        const taxIdInputInfo = shipToTaxIdLabels[countryCode];
+        return (h("div", { class: "zonos--tax-id-input" }, h("zonos-stripe-input", { inputLabel: translate(taxIdInputInfo.friendlyName), inputPlaceholder: taxIdInputInfo.placeholder, inputValue: stripeStore.taxId || '', isError: !!this.taxIdErrorMessage, onInputChange: (event) => {
+                stripeStore.taxId = event.detail;
+                this.taxIdChanged.emit(event.detail);
+            } }), this.taxIdErrorMessage && (h("zonos-text", { textColor: 'red-600', type: "caption" }, this.taxIdErrorMessage))));
+    }
     renderCompanyNameInput() {
         var _a;
         // No need to render company name for billing address
@@ -219,7 +248,7 @@ export class ZonosAddress {
             this.isAddressFilled = true;
         }
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: '89bb6f1ba14507b1e40ae8fff9a01050c3ac4686', class: "zonos--address zonos--elements" }, h("zonos-text", { key: 'd93eb2a0fd3b7aeadfd9c8cdf9190d769042533a', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), this.renderCompanyNameInput(), h("div", { key: '3d72d447b9ae884c1ec7b6f412a1cad0e78c989c', class: "zonos--address-component" })));
+        return (h(Host, { key: '603d9b20415c68a3337316d5882b931870546b91', class: "zonos--address zonos--elements" }, h("zonos-text", { key: 'bf50ebdb5d923bb0f394d021cd1bc4efbde0137e', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), this.renderCompanyNameInput(), this.renderTaxIdInput(), h("div", { key: '8712b6649822782ec450fe040acc29eb4ca21ed3', class: "zonos--address-component" })));
     }
     static get is() { return "zonos-address"; }
     static get encapsulation() { return "scoped"; }
@@ -296,6 +325,26 @@ export class ZonosAddress {
                 "getter": false,
                 "setter": false,
                 "defaultValue": "[]"
+            },
+            "taxIdErrorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message for tax id input"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "tax-id-error-message",
+                "reflect": false,
+                "defaultValue": "''"
             }
         };
     }
@@ -323,6 +372,21 @@ export class ZonosAddress {
                     "resolved": "boolean",
                     "references": {}
                 }
+            }, {
+                "method": "taxIdChanged",
+                "name": "taxIdChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event to emit when tax id is changed"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
             }];
     }
     static get elementRef() { return "el"; }

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

@@ -23,6 +23,7 @@ import { isCheckoutMobile } from "../../utils/checkout/isCheckoutMobile";
 import { classes } from "../../utils/classes";
 import { log } from "../../utils/logging/log";
 import { mergeAddress } from "../../utils/mergeAddress";
+import { countryRequireTaxId, shipToTaxIdLabels, } from "../../../types/checkout/Tax";
 /**
  * This component is a wrapper for the stripe address element that would render default style object
  */
@@ -185,6 +186,7 @@ export class ZonosAddress {
         this.type = undefined;
         this.titleText = undefined;
         this.defaultAddress = [];
+        this.taxIdErrorMessage = '';
         this.stripe = window.Zonos.stripe;
         this.isDirtyAddress = false;
         this.isAddressFilled = false;
@@ -289,6 +291,32 @@ export class ZonosAddress {
         const hasErrors = line1 || postalCode || state || city || firstName || lastName || phone;
         return !hasErrors;
     }
+    isInTaxIdCountry(countryCode) {
+        return countryRequireTaxId.includes(countryCode);
+    }
+    /**
+     * Render tax id input based on ship to country code
+     */
+    renderTaxIdInput() {
+        var _a;
+        // No need to render tax id input for billing address
+        if (this.type === 'billing') {
+            return null;
+        }
+        const countryCode = (_a = stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.value.address.country;
+        // Don't render tax id input if the country is not provided
+        if (!countryCode) {
+            return null;
+        }
+        const isCountryRequireTaxId = this.isInTaxIdCountry(countryCode);
+        if (!isCountryRequireTaxId) {
+            return null;
+        }
+        const taxIdInputInfo = shipToTaxIdLabels[countryCode];
+        return (h("div", { class: "zonos--tax-id-input" }, h("zonos-stripe-input", { error: this.taxIdErrorMessage, inputLabel: translate(taxIdInputInfo.friendlyName), inputPlaceholder: taxIdInputInfo.placeholder, inputValue: stripeStore.taxId || '', isError: !!this.taxIdErrorMessage, onInputChange: (event) => {
+                stripeStore.taxId = event.detail;
+            } })));
+    }
     renderCompanyNameInput() {
         var _a;
         // No need to render company name for billing address
@@ -774,10 +802,10 @@ export class ZonosAddress {
             this.country = localizationStore.selectedCountryCode;
         }
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: '9e681487105fcb1b24173a72d491d874b66a51bb', class: classes([
+        return (h(Host, { key: '1d80f8ffc85a27a7630fcc883d0bd9e8b7973d95', class: classes([
                 'zonos--address zonos--elements',
                 `zonos--${this.type}-address`,
-            ]) }, h("zonos-text", { key: '4712893040c7b88590048c0d1d636fa331cdcc66', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), this.renderCompanyNameInput(), this.renderCustomAddressForm()));
+            ]) }, h("zonos-text", { key: '6f0bde17ecda83d01cdb8576df4a03a226921db8', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderCustomAddressForm()));
     }
     static get is() { return "zonos-custom-address"; }
     static get encapsulation() { return "scoped"; }
@@ -854,6 +882,26 @@ export class ZonosAddress {
                 "getter": false,
                 "setter": false,
                 "defaultValue": "[]"
+            },
+            "taxIdErrorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message for tax id input"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "tax-id-error-message",
+                "reflect": false,
+                "defaultValue": "''"
             }
         };
     }

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

@@ -1,8 +1,10 @@
+import { euCountryCodes } from "../../types/index";
 const isTaxIdRequired = (shippingCountry) => {
-    const requireTaxIdCountry = ['MX'];
+    const requireTaxIdCountry = ['MX', ...euCountryCodes];
     return requireTaxIdCountry.includes(shippingCountry);
 };
-export const taxIdValidationResult = ({ shippingCountry, taxId, }) => {
+export const taxIdValidationResult = ({ companyName, shippingCountry, taxId, }) => {
+    // Check to see if we are required to collect tax id for the shipping country or not
     const taxRequired = isTaxIdRequired(shippingCountry);
     if (!taxRequired) {
         return {
@@ -10,6 +12,25 @@ export const taxIdValidationResult = ({ shippingCountry, taxId, }) => {
             valid: true,
         };
     }
+    // For GB, tax id is not required if company name is not filled (not business address)
+    if (shippingCountry === 'GB') {
+        if (!companyName) {
+            return {
+                error: null,
+                valid: true,
+            };
+        }
+        if (!taxId) {
+            return {
+                error: 'Tax id is required',
+                valid: false,
+            };
+        }
+        return {
+            error: null,
+            valid: true,
+        };
+    }
     if (!taxId) {
         return {
             error: 'Tax id is required',

package/dist/collection/scripts/_zonosBase.js

@@ -1,4 +1,5 @@
 var _a;
+import { createCustomEvent } from "../components/utils/createCustomEvent";
 import { IframeService } from "../components/utils/iframe/IframeHelpers";
 import { log } from "../components/utils/logging/log";
 import { logError } from "../components/utils/logging/logError";
@@ -9,7 +10,7 @@ import { getZonosQaUrl } from "./_getZonosQaUrl";
 import { zonosLoadStripe } from "./_loadStripe";
 import { getCartIdFromQueryParam } from "./cart/_getCartIdFromParam";
 import { setupCartDataWithSettings } from "./cart/_setupCartDataWithSettings";
-import { checkoutHiddenBtnSelector, } from "../types/checkout/CheckoutConfig";
+import { checkoutHiddenBtnSelector, checkoutHiddenInternationalBtnSelector, } from "../types/checkout/CheckoutConfig";
 /**
  * Get the load version and url based on the loadScriptSrc, if the domain that used to load `zonos.js` is in white listed domains, use currentLoadScriptUrl as the load url instead, if zonosQaUrl exists, it would also fall under the white listed domain
  */
@@ -156,6 +157,8 @@ Zonos.init = async (params) => {
     _a.injectZonosCss();
     // inject fonts for zonos elements
     _a.injectFonts();
+    // inject checkout international button
+    _a.injectCheckoutInternationalButton();
     // init zonos controller
     _a.injectController({
         config: {
@@ -169,6 +172,18 @@ Zonos.init = async (params) => {
     });
     _a.doneInit = true;
 };
+/**
+ * Inject the hidden international checkout button to trigger checkout regardless of shipping zones
+ */
+Zonos.injectCheckoutInternationalButton = () => {
+    if (!document.querySelector(`#${checkoutHiddenInternationalBtnSelector}`)) {
+        // inject the hidden international checkout button
+        const checkoutInternationalBtn = document.createElement('button');
+        checkoutInternationalBtn.id = checkoutHiddenInternationalBtnSelector;
+        checkoutInternationalBtn.style.display = 'none';
+        document.body.appendChild(checkoutInternationalBtn);
+    }
+};
 Zonos.injectCustomScriptForHostedCheckout = () => {
     const cartData = _a.cartData;
     const metadata = (cartData === null || cartData === void 0 ? void 0 : cartData.metadata) || [];
@@ -202,6 +217,15 @@ Zonos.displayCurrency = () => {
         void zonosHello.displayCurrency();
     }
 };
+Zonos.triggerCheckoutInternational = async () => {
+    // wait for the button to be visible and attached to the event
+    const checkoutInternationalBtn = document.querySelector(`#${checkoutHiddenInternationalBtnSelector}`);
+    setTimeout(() => {
+        if (checkoutInternationalBtn) {
+            checkoutInternationalBtn.dispatchEvent(createCustomEvent('click'));
+        }
+    }, 10);
+};
 // Called openHelloDialog because the main use case is to simply open the dialog
 Zonos.openHelloDialog = (value) => {
     const zonosHello = document.querySelector('zonos-hello');

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

@@ -1,2 +1,3 @@
 export const checkoutHiddenBtnSelector = 'zonos--checkout-hidden-button';
+export const checkoutHiddenInternationalBtnSelector = 'zonos--checkout-hidden-international-button';
 export const domesticRedirectedBtnSelector = 'zonos--domestic-redirected-checkout-button';

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

@@ -1,24 +1,88 @@
+export const euCountryCodes = [
+    'AT',
+    'BE',
+    'BG',
+    'CY',
+    'CZ',
+    'DE',
+    'DK',
+    'EE',
+    'ES',
+    'FI',
+    'FR',
+    'GR',
+    'HR',
+    'HU',
+    'IE',
+    'IT',
+    'LT',
+    'LU',
+    'LV',
+    'MT',
+    'NL',
+    'PL',
+    'PT',
+    'RO',
+    'SE',
+    'SI',
+    'SK',
+    'CH',
+    'NO',
+    'GB',
+];
 export const countryRequireTaxId = [
     'AR',
     'BR',
     'KR',
     'MX',
+    // EU countries
+    ...euCountryCodes,
 ];
 export const shipToTaxIdLabels = {
     AR: {
         friendlyName: 'Unique Labor Identification Code',
         placeholder: '00-00000000-0',
     },
+    AT: { friendlyName: 'EORI number', placeholder: 'DE123456789' },
+    BE: { friendlyName: 'EORI number', placeholder: 'DE123456789' },
+    BG: { friendlyName: 'EORI number', placeholder: 'DE123456789' },
     BR: {
         friendlyName: 'CPF/CNPJ number',
         placeholder: '000.000.000-00',
     },
+    CH: { friendlyName: 'EORI number', placeholder: 'DE123456789' },
+    CY: { friendlyName: 'EORI number', placeholder: 'DE123456789' },
+    CZ: { friendlyName: 'EORI number', placeholder: 'DE123456789' },
+    DE: { friendlyName: 'EORI number', placeholder: 'DE123456789' },
+    DK: { friendlyName: 'EORI number', placeholder: 'DE123456789' },
+    EE: { friendlyName: 'EORI number', placeholder: 'DE123456789' },
+    ES: { friendlyName: 'EORI number', placeholder: 'DE123456789' },
+    FI: { friendlyName: 'EORI number', placeholder: 'DE123456789' },
+    FR: { friendlyName: 'EORI number', placeholder: 'DE123456789' },
+    GB: { friendlyName: 'EORI number', placeholder: 'DE123456789' },
+    GR: { friendlyName: 'EORI number', placeholder: 'DE123456789' },
+    HR: { friendlyName: 'EORI number', placeholder: 'DE123456789' },
+    HU: { friendlyName: 'EORI number', placeholder: 'DE123456789' },
+    IE: { friendlyName: 'EORI number', placeholder: 'DE123456789' },
+    IT: { friendlyName: 'EORI number', placeholder: 'DE123456789' },
     KR: {
         friendlyName: 'Personal Customers Clearance Code',
         placeholder: '000-00-00000',
     },
+    LT: { friendlyName: 'EORI number', placeholder: 'DE123456789' },
+    LU: { friendlyName: 'EORI number', placeholder: 'DE123456789' },
+    LV: { friendlyName: 'EORI number', placeholder: 'DE123456789' },
+    MT: { friendlyName: 'EORI number', placeholder: 'DE123456789' },
     MX: {
         friendlyName: 'RFC number',
         placeholder: 'XAXX010101000',
     },
+    NL: { friendlyName: 'EORI number', placeholder: 'DE123456789' },
+    NO: { friendlyName: 'EORI number', placeholder: 'DE123456789' },
+    PL: { friendlyName: 'EORI number', placeholder: 'DE123456789' },
+    PT: { friendlyName: 'EORI number', placeholder: 'DE123456789' },
+    RO: { friendlyName: 'EORI number', placeholder: 'DE123456789' },
+    SE: { friendlyName: 'EORI number', placeholder: 'DE123456789' },
+    SI: { friendlyName: 'EORI number', placeholder: 'DE123456789' },
+    SK: { friendlyName: 'EORI number', placeholder: 'DE123456789' },
 };

package/dist/esm/{CheckoutConfig-5479d192.js → CheckoutConfig-eb7d6954.js}

@@ -26,6 +26,7 @@ const _getIsValidCartId = (cartId) => {
 };
 
 const checkoutHiddenBtnSelector = 'zonos--checkout-hidden-button';
+const checkoutHiddenInternationalBtnSelector = 'zonos--checkout-hidden-international-button';
 const domesticRedirectedBtnSelector = 'zonos--domestic-redirected-checkout-button';
 
-export { _getIsValidCartId as _, checkoutHiddenBtnSelector as c, domesticRedirectedBtnSelector as d };
+export { _getIsValidCartId as _, checkoutHiddenInternationalBtnSelector as a, checkoutHiddenBtnSelector as c, domesticRedirectedBtnSelector as d };