@zonos/elements 1.3.183 → 1.3.185

package/dist/cjs/zonos-tooltip.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2f90486e.js');
+const index = require('./index-0993f42d.js');
 const classes = require('./classes-b7918f56.js');
 
 const zonosTooltipCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .zonos--tooltip{position:relative}:host .zonos--tooltip .zonos--tooltip-content{position:absolute;bottom:100%;left:0;width:-webkit-max-content;width:-moz-max-content;width:max-content;padding:12px;background-color:var(--zonos-elements-gray-1000);opacity:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:var(--zonos-elements-radius-4);z-index:100;-webkit-box-shadow:var(--zonos-elements-v3-shadow-large);box-shadow:var(--zonos-elements-v3-shadow-large)}:host .zonos--tooltip .zonos--tooltip-content.zonos--show-tooltip{opacity:1;-webkit-transform:scale(1);transform:scale(1)}";
@@ -16,10 +16,10 @@ const ZonosTooltip = class {
         this.showTooltip = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'fa16c20a254958721bcc44dbe96f6588545e86f0', class: "zonos--elements" }, index.h("div", { key: '0e57607df02b12d5df9fb84b64c8345b40b2e823', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, index.h("slot", { key: '9faf457a730046b789a5b822fb6ab89d88970d59' }), index.h("div", { key: 'f85dbf49e172f9a1c1b57443b1ea22d819b4099c', class: classes.classes([
+        return (index.h(index.Host, { key: 'fbd7f669ae886586c2512b00975fc5acf1e40eca', class: "zonos--elements" }, index.h("div", { key: '618d6ff79308540f5eeb3d8a23e7c520fb35a91a', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, index.h("slot", { key: '303eaf31b4b3dc9fd35ed0db252be84274b7d46c' }), index.h("div", { key: '7429949912c8e3fb683ab4cbc4958d8fb6b2fd81', class: classes.classes([
                 this.showTooltip && 'zonos--show-tooltip',
                 'zonos--tooltip-content',
-            ]) }, index.h("zonos-text", { key: '6e90bfe3f346cbe5d49aab4e03c868b3138aeca7', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), index.h("zonos-text", { key: '1c10f75f13ae427737fcf4ece41b9f7ba13fb76d', size: "xs", textColor: "gray-0" }, this.subtitle)))));
+            ]) }, index.h("zonos-text", { key: '31704a564bb877fac16c1ab11a686e9ba72940ea', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), index.h("zonos-text", { key: '1e2cafbfaf769b30256c8d4609953961bcd10a06', size: "xs", textColor: "gray-0" }, this.subtitle)))));
     }
 };
 ZonosTooltip.style = ZonosTooltipStyle0;

package/dist/cjs/zonos-v-stack.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2f90486e.js');
-const zonosStore = require('./zonosStore-3812b318.js');
+const index = require('./index-0993f42d.js');
+const zonosStore = require('./zonosStore-adc42868.js');
 const classes = require('./classes-b7918f56.js');
 
 const zonosVStackCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .vstack{display:grid;grid-auto-columns:minmax(0, 1fr);grid-row-gap:var(--spacing, 24px);grid-auto-flow:row}";
@@ -15,9 +15,9 @@ const VStack = class {
         this.spacing = 24;
     }
     render() {
-        return (index.h(index.Host, { key: '32154740511a038c4ca04ad55bc7d77d96496654', style: {
+        return (index.h(index.Host, { key: 'b591378d641a09bac2c4fab00c8c1977ae21a14c', style: {
                 '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: 'f80f8b0e51554a3db9efa960706ac9bb450155cb', class: classes.classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, index.h("slot", { key: '711a207eb1b4c59672be4df8b19a3c7200d44f29' }))));
+            } }, index.h("div", { key: 'c9f3b482ace4b36813fa5412dd497c0deea7e3c0', class: classes.classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, index.h("slot", { key: '75cf9b483367945bc57279b76519205c8f0901eb' }))));
     }
 };
 VStack.style = ZonosVStackStyle0;

package/dist/cjs/{zonosStore-3812b318.js → zonosStore-adc42868.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-2f90486e.js');
+const index = require('./index-0993f42d.js');
 
 const appendToMap = (map, propName, value) => {
     const items = map.get(propName);
@@ -2768,6 +2768,7 @@ const { dispose: zonosStoreDispose, reset, state: zonosStore, } = createStore(()
         theme: 'LIGHT',
         zonosAttribution: 'DISABLED',
     },
+    checkoutAddressService: null,
     checkoutSettings: {
         allowedCharacterSets: 'ALL',
         allowedSettlementCurrencies: 'LOCAL',

package/dist/collection/collection-manifest.json

@@ -38,6 +38,8 @@
     "components/common/zonos-rest-state/zonos-rest-state.js",
     "components/common/zonos-select-dialog-header/zonos-select-dialog-header.js",
     "components/common/zonos-stripe-input/zonos-stripe-input.js",
+    "components/common/zonos-stripe-phone-input/zonos-stripe-phone-input.js",
+    "components/common/zonos-stripe-select/zonos-stripe-select.js",
     "components/common/zonos-text/zonos-text.js",
     "components/common/zonos-toggle/zonos-toggle.js",
     "components/common/zonos-tooltip/zonos-tooltip.js",
@@ -50,6 +52,8 @@
     "components/main/zonos-controller.js",
     "components/paypal/zonos-paypal-payment.js",
     "components/stripe/zonos-address/zonos-address.js",
+    "components/stripe/zonos-custom-address/zonos-custom-address.js",
+    "components/stripe/zonos-custom-address/zonos-address-suggestions/zonos-address-suggestions.js",
     "components/stripe/zonos-link-authentication/zonos-link-authentication.js",
     "components/stripe/zonos-payment/zonos-payment.js"
   ],

package/dist/collection/components/checkout/zonos-checkout/zonos-address-update-dialog/zonos-address-update-dialog.js

@@ -144,21 +144,21 @@ export class ZonosAddressUpdateDialog {
         return (h(Host, { key: '655845cef04f4af526b1a1c4e49243c4f2b4c7f6', class: classes([
                 'zonos--address-update-dialog zonos--elements',
                 this.isMobile && 'mobile',
-            ]) }, h("zonos-dialog", { key: 'eab429bb78ce6f05ba463d8748d7edd5499402fa', isLoading: this.dialogLoading, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeUpdateDialog.emit(), open: this.dialogOpen, width: "568px" }, h("div", { key: '08f0400e62addfcaffd91bf5200999d29bbd2da9', class: "zonos--body" }, h("div", { key: '8699df5e2f823e19066fbb552ba2a66c127c05e9', class: "zonos--dialog-header" }, h("div", { key: '92e0ff932dcdb0e5b59ea34b688d1ef8e31bfeb3', class: "zonos--dialog-title" }, h("zonos-text", { key: 'aaac3375526bddb319ce7c8f49bde30da7210264', type: "title" }, translate('Update your address')), h("zonos-button", { key: '66abf7b74045e68e84e631298504236d32ca9c4e', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.closeUpdateDialogHandler() })), h("zonos-text", { key: 'ffb3d8f169867d5f6dff269e1becd99c98c5a7da' }, translate('To ensure delivery all address details must be in Latin characters.'))), h("div", { key: '2cb61f06ce174e2317870decfdd337c67c5cf128', class: "zonos--group" }, h("zonos-text", { key: 'a616c540984120b468e52bccfb380ea3974ced22', class: "zonos--what-you-entered", type: "semiBoldLabel" }, translate('What you entered')), h("div", { key: '6ac8f9c14472370c501af1b0d50bd8f8746b7694', class: "zonos--address-display-group" }, h("zonos-address-display", { key: 'ea2c67a7bba51c99f80be968e448beeffcf1f863', addressType: "shipping", currentAddress: shipping }), billing && (h("zonos-address-display", { key: '7ea1683dc04a292810e04ed6550d86086f25186f', addressType: "billing", currentAddress: billing }))), h("div", { key: '4d1cd9096943518b8b4e267608a5e1542befb6a9', class: "zonos--address-form-section" }, h("zonos-text", { key: 'e4184a2cc618d26d43979fa8cfe06070cf8b5af8', type: "semiBoldLabel" }, translate('Translated address')), h("zonos-address-form", { key: 'c55d9d3c658565ceb7c7b879f444e3937b9f7ad6', addressType: "shipping", class: "zonos--shipping-address-form", currentAddress: shipping, onAddressChange: e => {
+            ]) }, h("zonos-dialog", { key: 'eab429bb78ce6f05ba463d8748d7edd5499402fa', isLoading: this.dialogLoading, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeUpdateDialog.emit(), open: this.dialogOpen, width: "568px" }, h("div", { key: '08f0400e62addfcaffd91bf5200999d29bbd2da9', class: "zonos--body" }, h("div", { key: '8699df5e2f823e19066fbb552ba2a66c127c05e9', class: "zonos--dialog-header" }, h("div", { key: '92e0ff932dcdb0e5b59ea34b688d1ef8e31bfeb3', class: "zonos--dialog-title" }, h("zonos-text", { key: 'aaac3375526bddb319ce7c8f49bde30da7210264', type: "title" }, translate('Update your address')), h("zonos-button", { key: '474cc2421cd3150daa46bfe215da6ae7df9c6087', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.closeUpdateDialogHandler(), title: "Close checkout dialog" })), h("zonos-text", { key: '6d019250cce57e8b30dd790a184df7273bdb234f' }, translate('To ensure delivery all address details must be in Latin characters.'))), h("div", { key: '80ee681844f4f4f43fce69d977b634b1fbc3d5f5', class: "zonos--group" }, h("zonos-text", { key: '940e510eceec156a74f32de84cf58ffebd796435', class: "zonos--what-you-entered", type: "semiBoldLabel" }, translate('What you entered')), h("div", { key: 'f626127f5c399c29ab1022deb66aaee8f8a49601', class: "zonos--address-display-group" }, h("zonos-address-display", { key: '9dfcba1037325c3a1f9e82b8e4797e7872dd7e3f', addressType: "shipping", currentAddress: shipping }), billing && (h("zonos-address-display", { key: 'fee8ae2c6786d735133c2a0a42f3e3d40d7f9ea9', addressType: "billing", currentAddress: billing }))), h("div", { key: '5a82195018ff8cdfd1126f4424062a26c25ee757', class: "zonos--address-form-section" }, h("zonos-text", { key: 'f694dfad166697e4c034cea51057133b69b1c144', type: "semiBoldLabel" }, translate('Translated address')), h("zonos-address-form", { key: '4a99c841cf4800de43c612cce3d56d956d02c22f', addressType: "shipping", class: "zonos--shipping-address-form", currentAddress: shipping, onAddressChange: e => {
                 const address = e.detail;
                 this.translatedShippingAddressState =
                     this.buildTranslateAddressState({
                         currentAddress: shipping,
                         translatedAddress: address,
                     });
-            }, translatedAddress: this.translatedShippingAddressState }), billing && (h("zonos-address-form", { key: 'c3facc295b1322bb00baa6081f343dcea4f10777', addressType: "billing", class: "zonos--billing-address-form", currentAddress: billing, onAddressChange: e => {
+            }, translatedAddress: this.translatedShippingAddressState }), billing && (h("zonos-address-form", { key: '311fd702d29a9517203597890bd46bd268dfc6d3', addressType: "billing", class: "zonos--billing-address-form", currentAddress: billing, onAddressChange: e => {
                 const address = e.detail;
                 this.translatedBillingAddressState =
                     this.buildTranslateAddressState({
                         currentAddress: billing,
                         translatedAddress: address,
                     });
-            }, translatedAddress: this.translatedBillingAddressState })))), h("div", { key: '1c89c9604ba0dece40275fcfac97e7f93706b430', class: "zonos--group-btn" }, h("div", { key: 'e47d393940b094b4e123864e4070daa87f0616f0', class: "zonos--button-wrapper" }, h("zonos-button", { key: '216b7afe268a4acd6bb8a76b7f5a32dc09bdd4f6', class: "zonos--cancel-btn", onClick: () => this.closeUpdateDialogHandler(), variant: "subtle" }, translate('Cancel')), h("zonos-button", { key: 'acbacb92cedb325b46843d8f3aff13f4e7c86ab5', backgroundColor: this.submitBtnColor, class: "zonos--update-btn", loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "sm", variant: submitBtnType }, translate('Update address'))))))));
+            }, translatedAddress: this.translatedBillingAddressState })))), h("div", { key: '918c3271579c3fc7a7efff0473b0ccf48fb575a2', class: "zonos--group-btn" }, h("div", { key: 'f73be0c1124d3a4d340bc6e8512f6be8356c655d', class: "zonos--button-wrapper" }, h("zonos-button", { key: '172a6cc0a7b75afb400802ef6b87faae6e7e2483', class: "zonos--cancel-btn", onClick: () => this.closeUpdateDialogHandler(), variant: "subtle" }, translate('Cancel')), h("zonos-button", { key: '8fd08bc79b60eb9a0064c06ff9d840b1ecb09123', backgroundColor: this.submitBtnColor, class: "zonos--update-btn", loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "sm", variant: submitBtnType }, translate('Update address'))))))));
     }
     static get is() { return "zonos-address-update-dialog"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout.css

@@ -150,6 +150,7 @@
 :host(.preview) {
   min-width: 500px;
   margin: auto;
+  position: relative;
 }
 :host(.preview) .zonos--content {
   border: var(--zonos-elements-border);
@@ -158,6 +159,16 @@
   padding: 32px;
 }
 
+:host(.hidden-mode) {
+  height: 0;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  visibility: hidden;
+  width: 0;
+  z-index: -1;
+}
+
 :host(.mobile) {
   min-width: auto;
 }

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

@@ -80,6 +80,7 @@ export class ZonosCheckout {
             const currentTime = new Date().getTime();
             const timeDiff = currentTime - cartCreatedAt;
             const timeDiffInSeconds = Math.floor(timeDiff / 1000);
+            log(`currentTime: ${currentTime} | cartCreatedAt: ${cartCreatedAt}`);
             log(`Cart has been created for ${timeDiffInSeconds / 60} minutes`);
             if (zonosStore.checkoutSettings.defaultCartExpiration) {
                 if (timeDiffInSeconds > zonosStore.checkoutSettings.defaultCartExpiration) {
@@ -197,6 +198,7 @@ export class ZonosCheckout {
         };
         this.appearanceSettingsOverride = undefined;
         this.preview = false;
+        this.hiddenMode = false;
         this.mobile = false;
         this.overrideStagingMode = undefined;
         this.defaultAddress = [];
@@ -419,14 +421,19 @@ export class ZonosCheckout {
     }
     attachCheckout() {
         const buttonAnchorSelector = zonosStore.checkoutSettings.placeOrderButtonSelector;
+        const alwaysTriggerInternationalCheckoutSelector = zonosStore.checkoutSettings.alwaysTriggerInternationalCheckoutSelector;
         log(`attach checkout ${buttonAnchorSelector}`);
+        log(`attach checkout to always trigger international checkout selector: ${alwaysTriggerInternationalCheckoutSelector}`);
         // allow to load checkout if cartData is ready (Checkout can be loaded right away if tempCartUUID is in the URL)
-        if (!buttonAnchorSelector && !window.Zonos.cartData) {
+        if (!buttonAnchorSelector &&
+            !alwaysTriggerInternationalCheckoutSelector &&
+            !window.Zonos.cartData) {
             // do nothing if button element is not found
             return;
         }
         const selectors = [
             buttonAnchorSelector,
+            alwaysTriggerInternationalCheckoutSelector,
             // hidden button for domestic redirected
             `#${domesticRedirectedBtnSelector}`,
             // hidden button for legacy checkout facade and when client secret is provided in the query param or session storage when user is redirected from stripe
@@ -448,9 +455,15 @@ export class ZonosCheckout {
                 var _a;
                 // Start tracking load time
                 const startTime = performance.now();
+                const isAlwaysTriggerInternationalCheckout = alwaysTriggerInternationalCheckoutSelector &&
+                    button.matches(alwaysTriggerInternationalCheckoutSelector);
+                const isAnyImmediateTrigger = button.matches(`#${domesticRedirectedBtnSelector}`) ||
+                    button.matches(`#${checkoutHiddenBtnSelector}`);
                 // Allow no country set for legacy facades. Otherwise enforce it being a shippable country and not disabled.
                 if (!window.Zonos.isLegacyCheckout &&
-                    (!isShippableCountry() || isDisabledCountry())) {
+                    (!isShippableCountry() || isDisabledCountry()) &&
+                    !isAlwaysTriggerInternationalCheckout &&
+                    !isAnyImmediateTrigger) {
                     return;
                 }
                 e.preventDefault();
@@ -553,7 +566,7 @@ export class ZonosCheckout {
             }
             button.setAttribute('data-zonos-checkout-attached', 'true');
             // if this button is the hidden button, trigger the click event
-            if (button.matches(domesticRedirectedBtnSelector)) {
+            if (button.matches(`#${domesticRedirectedBtnSelector}`)) {
                 button.dispatchEvent(createCustomEvent('click'));
                 // cleanup shipping session after button is clicked
                 stripeStoreCleanupDomesticShippingSession();
@@ -1160,6 +1173,7 @@ export class ZonosCheckout {
                 this.preview && 'preview',
                 this.isMobile && 'mobile',
                 this.isIframed && 'iframed',
+                this.hiddenMode && 'hidden-mode',
             ]) }, this.preview ? (renderContent()) : (h("zonos-dialog", { borderStyle: style, "data-theme": rightSideTheme, height: "980px", isLoading: dialogLoading, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeDialogHandler(), open: this.open, width: "1200px" }, renderContent())), h("zonos-confirm-dialog", { class: "zonos--close-confirm-dialog", dialogCancelBtnText: translate("Don't close"), dialogConfirmBtnText: translate('Close'), dialogIntent: "warn", dialogOpen: this.confirmDialogOpen, dialogSubtitle: translate('Would you like to close checkout and return to the site?'), dialogTitle: translate('Are you sure?'), onCancelClicked: () => {
                 this.confirmDialogOpen = false;
             },
@@ -1269,6 +1283,26 @@ export class ZonosCheckout {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "hiddenMode": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hidden mode to hide the checkout modal in preview mode"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "hidden-mode",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "mobile": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/checkout/zonos-checkout/zonos-customer-info/zonos-customer-info.css

@@ -89,7 +89,7 @@
   padding-top: 8px;
   margin-top: 12px;
   background: var(--zonos--primary-color, var(--zonos-elements-gray-0));
-  z-index: 1;
+  z-index: 2;
 }
 :host .zonos--group-btn zonos-button {
   width: 100%;

package/dist/collection/components/checkout/zonos-checkout/zonos-customer-info/zonos-customer-info.js

@@ -1,8 +1,11 @@
 import { h, Host, } from "@stencil/core";
 import { stripeStore, stripeStoreTranslateAddressToLatin, } from "../../../store/checkout/stripe";
+import { localizationStore } from "../../../store/hello/localization";
 import { translate } from "../../../store/translationStore";
 import { getZonosStoreTheme, zonosStore, } from "../../../store/zonosStore";
 import { containsNonLatinChars } from "../../../utils/containsNonLatinChars";
+import { log } from "../../../utils/logging/log";
+import { sendErrorLog } from "../../../utils/logging/sendErrorLog";
 import { taxIdValidationResult } from "../../../utils/taxIdValidationResult";
 import { countryRequireTaxId, shipToTaxIdLabels, } from "../../../../types/checkout/Tax";
 export class ZonosCustomerInfo {
@@ -63,6 +66,12 @@ export class ZonosCustomerInfo {
          * handler for continue button click
          */
         this.continueClickHandler = async () => {
+            var _a;
+            (_a = this.testContinueClicked) === null || _a === void 0 ? void 0 : _a.emit({
+                billingAddress: stripeStore.stripeBillingAddressEventData,
+                sameAsBilling: stripeStore.stripeShippingSameAsBilling,
+                shippingAddress: stripeStore.stripeAddressEventData,
+            });
             if (!this.handleValidate()) {
                 // scroll to the top zonos-banner
                 setTimeout(() => {
@@ -82,25 +91,77 @@ export class ZonosCustomerInfo {
             if (hasInvalidCharacters) {
                 return;
             }
-            this.continueClicked.emit();
+            this.continueClicked.emit({
+                billingAddress: stripeStore.stripeBillingAddressEventData,
+                sameAsBilling: stripeStore.stripeShippingSameAsBilling,
+                shippingAddress: stripeStore.stripeAddressEventData,
+            });
+        };
+        /**
+         * Validate the custom address form, turn the flag showError to false if the form is valid, or vice versa
+         */
+        this.validateCustomAddressForm = (type) => {
+            const useShippingAddressErrors = stripeStore.stripeShippingSameAsBilling || type === 'shipping';
+            const customAddressErrors = useShippingAddressErrors
+                ? stripeStore.customAddressErrors
+                : stripeStore.customBillingAddressErrors;
+            const { city, firstName, lastName, line1, phone, postalCode, state } = customAddressErrors;
+            // check to see if there is any form error or not.
+            let hasError = false;
+            if (city ||
+                firstName ||
+                lastName ||
+                line1 ||
+                phone ||
+                postalCode ||
+                state) {
+                hasError = true;
+            }
+            // show error if there is any form error
+            if (useShippingAddressErrors) {
+                stripeStore.customAddressErrors = Object.assign(Object.assign({}, customAddressErrors), { showError: hasError });
+            }
+            else {
+                stripeStore.customBillingAddressErrors = Object.assign(Object.assign({}, customAddressErrors), { showError: hasError });
+            }
+            return {
+                isValid: !hasError,
+            };
         };
         this.handleValidate = () => {
-            var _a, _b;
+            var _a, _b, _c, _d;
             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
+            const isValidStripeBilling = stripeStore.stripeShippingSameAsBilling
                 ? !!(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 isValidStripeShipping = !!(stripeShippingAddressEventData === null || stripeShippingAddressEventData === void 0 ? void 0 : stripeShippingAddressEventData.complete);
             const isValidLink = !!(stripeLinkEventData === null || stripeLinkEventData === void 0 ? void 0 : stripeLinkEventData.complete);
             // display errors on fields that are invalid
             void ((_a = stripeStore.stripeAddressElement) === null || _a === void 0 ? void 0 : _a.getValue());
             void ((_b = stripeStore.stripeBillingAddressElement) === null || _b === void 0 ? void 0 : _b.getValue());
+            // if the custom address form is enabled, use the custom address form validation result, otherwise use the stripe validation result
+            const isValidBilling = ((_c = zonosStore.genericSettings) === null || _c === void 0 ? void 0 : _c.shouldEnabledCustomAddress)
+                ? this.validateCustomAddressForm('billing').isValid
+                : isValidStripeBilling;
+            // if the custom address form is enabled, use the custom address form validation result, otherwise use the stripe validation result
+            const isValidShipping = ((_d = zonosStore.genericSettings) === null || _d === void 0 ? void 0 : _d.shouldEnabledCustomAddress)
+                ? this.validateCustomAddressForm('shipping').isValid
+                : isValidStripeShipping;
             if (!isValidLink && (stripeLinkEventData === null || stripeLinkEventData === void 0 ? void 0 : stripeLinkEventData.empty)) {
                 this.isEmailError = true;
             }
+            log('==> isValidBilling', 'info', isValidBilling, {
+                address: stripeStore.stripeBillingAddressEventData,
+                errors: stripeStore.customBillingAddressErrors,
+            });
+            log('==> isValidShipping', 'info', isValidShipping, {
+                address: stripeStore.stripeAddressEventData,
+                errors: stripeStore.customAddressErrors,
+            });
+            log('==> isValidLink', 'info', isValidLink);
             // validate tax id input if it's required for specific countries, optional otherwise
             const { error, valid } = taxIdValidationResult({
                 shippingCountry: this.shippingCountry,
@@ -136,11 +197,35 @@ export class ZonosCustomerInfo {
                 state: addressValue.address.state || '',
             };
         };
+        this.renderAddressComponent = (type) => {
+            var _a, _b;
+            if (!localizationStore.selectedCountryCode) {
+                void sendErrorLog({
+                    endpoint: 'NO_COUNTRY_SELECTED_WHEN_RENDERING_ADDRESS_COMPONENT',
+                    errors: ['No country selected when rendering address component'],
+                    metadata: {
+                        type,
+                    },
+                    shouldPostReleaseErrorReporting: true,
+                });
+            }
+            // Only use the default address for shipping address
+            const defaultAddress = type === 'shipping' ? this.defaultAddress : [];
+            // Render custom address component if the custom address form is enabled
+            if (localizationStore.selectedCountryCode &&
+                this.shouldEnabledCustomAddress &&
+                ((_b = (_a = zonosStore.genericSettings) === null || _a === void 0 ? void 0 : _a.countryCustomAddressEnabled) === null || _b === void 0 ? void 0 : _b.includes(localizationStore.selectedCountryCode))) {
+                return (h("zonos-custom-address", { defaultAddress: defaultAddress, titleText: translate('Address'), type: type }));
+            }
+            // Render Stripe address component by default
+            return (h("zonos-address", { defaultAddress: defaultAddress, titleText: translate('Address'), type: type }));
+        };
         this.continueLoading = false;
         this.submitBtnType = undefined;
         this.submitBtnColor = undefined;
         this.isMobile = false;
         this.defaultAddress = [];
+        this.shouldUseCustomAddressFormOverride = false;
         this.showErrorBanner = false;
         this.shippingCountry = '';
         this.isCheckingForRestrictedItems = false;
@@ -149,8 +234,15 @@ export class ZonosCustomerInfo {
         this.invalidShippingCharacterList = null;
         this.invalidBillingCharacterList = null;
         this.openAddressValidationDialog = false;
+        this.shouldEnabledCustomAddress = false;
         this.isEmailError = false;
     }
+    watchShowErrorBanner() {
+        // start validate on typing after error banner is shown, and hide it if the form is complete
+        if (this.showErrorBanner) {
+            this.showErrorBanner = !this.handleValidate();
+        }
+    }
     checkInvalidCharacters(address) {
         if (!address) {
             return null;
@@ -197,7 +289,7 @@ export class ZonosCustomerInfo {
             } }), this.taxIdErrorMessage && (h("zonos-text", { textColor: 'red-600', type: "caption" }, this.taxIdErrorMessage))));
     }
     render() {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         if (!stripeStore.stripeElements) {
             return null;
         }
@@ -213,20 +305,19 @@ export class ZonosCustomerInfo {
             this.shippingCountry =
                 stripeStore.stripeAddressEventData.value.address.country;
         }
+        this.shouldEnabledCustomAddress =
+            this.shouldUseCustomAddressFormOverride ||
+                !!((_b = zonosStore.genericSettings) === null || _b === void 0 ? void 0 : _b.shouldEnabledCustomAddress);
         const showBilling = !stripeStore.stripeShippingSameAsBilling;
         // Get theme for the update dialog, inherit from the theme, no from this component theme
         const theme = getZonosStoreTheme(zonosStore.appearance.theme);
         // Attempt to get the email from email from customer profile's locations, if not provided, just use the email from root customer profile
-        const defaultEmail = ((_b = this.defaultAddress.find(Boolean)) === null || _b === void 0 ? void 0 : _b.email) ||
-            ((_e = (_d = (_c = stripeStore.customerProfile) === null || _c === void 0 ? void 0 : _c.locations) === null || _d === void 0 ? void 0 : _d.find(Boolean)) === null || _e === void 0 ? void 0 : _e.email) ||
-            ((_f = stripeStore.customerProfile) === null || _f === void 0 ? void 0 : _f.email);
-        // start validate on typing after error banner is shown, and hide it if the form is complete
-        if (this.showErrorBanner) {
-            this.showErrorBanner = !this.handleValidate();
-        }
-        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')), this.showErrorBanner && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('Missing required fields. Make sure all fields are completed.'))), h("zonos-link-authentication", { defaultEmail: defaultEmail, isEmailError: this.isEmailError, onLinkAuthenticationChange: this.handleEmailValidation, titleText: translate('Contact') }), h("zonos-address", { defaultAddress: this.defaultAddress, titleText: translate('Address'), type: "shipping" }), this.renderTaxIdInput(this.shippingCountry), h("zonos-checkbox", { class: "zonos--shipping-same-as-billing-cbx", isChecked: stripeStore.stripeShippingSameAsBilling, label: translate('Shipping address same as billing'), onCheckboxSelected: e => {
+        const defaultEmail = ((_c = this.defaultAddress.find(Boolean)) === null || _c === void 0 ? void 0 : _c.email) ||
+            ((_f = (_e = (_d = stripeStore.customerProfile) === null || _d === void 0 ? void 0 : _d.locations) === null || _e === void 0 ? void 0 : _e.find(Boolean)) === null || _f === void 0 ? void 0 : _f.email) ||
+            ((_g = stripeStore.customerProfile) === null || _g === void 0 ? void 0 : _g.email);
+        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')), this.showErrorBanner && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('Missing required fields. Make sure all fields are completed.'))), h("zonos-link-authentication", { defaultEmail: defaultEmail, isEmailError: this.isEmailError, onLinkAuthenticationChange: this.handleEmailValidation, titleText: translate('Contact') }), this.renderAddressComponent('shipping'), this.renderTaxIdInput(this.shippingCountry), h("zonos-checkbox", { class: "zonos--shipping-same-as-billing-cbx", 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, bold: true, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
+            } }), h("zonos-collapse", { collapsed: !showBilling }, this.renderAddressComponent('billing')), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, bold: true, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode
             variant: this.submitBtnType }, translate('Continue to shipping')))), stripeStore.stripeAddressEventData && (h("zonos-address-update-dialog", { billingAddress: !stripeStore.stripeShippingSameAsBilling &&
                 stripeStore.stripeBillingAddressEventData
@@ -363,6 +454,26 @@ export class ZonosCustomerInfo {
                 "getter": false,
                 "setter": false,
                 "defaultValue": "[]"
+            },
+            "shouldUseCustomAddressFormOverride": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to override custom address form to be always visible"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "should-use-custom-address-form-override",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
@@ -376,6 +487,7 @@ export class ZonosCustomerInfo {
             "invalidShippingCharacterList": {},
             "invalidBillingCharacterList": {},
             "openAddressValidationDialog": {},
+            "shouldEnabledCustomAddress": {},
             "isEmailError": {}
         };
     }
@@ -391,11 +503,44 @@ export class ZonosCustomerInfo {
                     "text": "Event to emit when the continue button is clicked"
                 },
                 "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
+                    "original": "{\n    billingAddress: StripeAddressElementChangeEvent | null;\n    sameAsBilling: boolean;\n    shippingAddress: StripeAddressElementChangeEvent | null;\n  }",
+                    "resolved": "{ billingAddress: StripeAddressElementChangeEvent | null; sameAsBilling: boolean; shippingAddress: StripeAddressElementChangeEvent | null; }",
+                    "references": {
+                        "StripeAddressElementChangeEvent": {
+                            "location": "import",
+                            "path": "@stripe/stripe-js",
+                            "id": "node_modules::StripeAddressElementChangeEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "testContinueClicked",
+                "name": "testContinueClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Trigger continue button click even though fields're not validated for testing purposes"
+                },
+                "complexType": {
+                    "original": "{\n    billingAddress: StripeAddressElementChangeEvent | null;\n    sameAsBilling: boolean;\n    shippingAddress: StripeAddressElementChangeEvent | null;\n  }",
+                    "resolved": "{ billingAddress: StripeAddressElementChangeEvent | null; sameAsBilling: boolean; shippingAddress: StripeAddressElementChangeEvent | null; }",
+                    "references": {
+                        "StripeAddressElementChangeEvent": {
+                            "location": "import",
+                            "path": "@stripe/stripe-js",
+                            "id": "node_modules::StripeAddressElementChangeEvent"
+                        }
+                    }
                 }
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "showErrorBanner",
+                "methodName": "watchShowErrorBanner"
+            }];
+    }
 }

package/dist/collection/components/common/zonos-button/zonos-button.js

@@ -1,5 +1,6 @@
 import { h, Host, } from "@stencil/core";
 import { zonosStore, zonosStoreFontFamily, } from "../../store/zonosStore";
+import { inheritAriaAttributes, inheritAttributes, } from "../../utils/checkout/form/helpers";
 import { classes } from "../../utils/classes";
 import { getBorderRadius } from "../../utils/getBorderRadius";
 import { getButtonTheme } from "../../utils/getButtonTheme";
@@ -9,6 +10,10 @@ import { isElementUsingDarkTheme } from "../../utils/isElementUsingDarkTheme";
 import { styles } from "../../utils/styles";
 export class ZonosButton {
     constructor() {
+        /**
+         * Inherited attributes from the host element
+         */
+        this.inheritedAttributes = {};
         /**
          * Detect if the button has an content
          */
@@ -112,6 +117,12 @@ export class ZonosButton {
     }
     componentWillLoad() {
         this.iconChangeHandler();
+        this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.ele)), inheritAttributes(this.ele, [
+            'tabindex',
+            'title',
+            'data-form-type',
+            'dir',
+        ]));
     }
     render() {
         const { backgroundColor, color, spinnerColor, useDarkHoverSubtle } = this.getButtonStyle();
@@ -122,13 +133,13 @@ export class ZonosButton {
         const borderStyle = getBorderRadius({
             overrideBorderStyle: this.borderStyle,
         });
-        return (h(Host, { key: '71402d1acee8307c6ab3c3fb4b552c2df3800ced', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
+        return (h(Host, { key: '88cc4ce2ac8a82e62ac4a5a3828724b92da1db60', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
                 '--zonos--background-color': backgroundColor,
                 '--zonos--border-radius': borderStyle,
                 '--zonos--color': color,
                 '--zonos--font-family': zonosStoreFontFamily(),
                 '--zonos--font-weight': this.bold ? 'bold' : 'normal',
-            }) }, h("button", { key: '7168a567c49b6ea6d77fa1fd329c478f2c7b5512', class: classes([
+            }) }, h("button", Object.assign({ key: '4037731e2337e441a2eeb5e28433ba8426cb75b2' }, this.inheritedAttributes, { class: classes([
                 this.hasIcon && 'has-icon',
                 this.hasContent && 'has-content',
                 this.noBackground && 'no-background',
@@ -143,7 +154,7 @@ export class ZonosButton {
                 backgroundColor && variant === 'standard' && 'override-background',
             ]), disabled: disabled, style: {
                 justifyContent: this.justifyContent,
-            } }, this.loading && (h("div", { key: 'cc1d53b41d4ae20f7bad93a73b539b7de16ea032', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: '83043fb631ff7e246aa69b0d4ef8322439043b4a', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: 'b1431364d8a5034d98b6bc4e3acfd4631ec93ec7', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
+            } }), this.loading && (h("div", { key: '09f824b2106313200deaa1bdcb7afc3e3b161911', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: 'b094e740a91c49a14a31fc56142dccf1062a584b', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: '8bfc81ae6f5f114a0255854aa79db32a5ee39259', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
     }
     static get is() { return "zonos-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-checkbox/zonos-checkbox.js

@@ -4,8 +4,10 @@ import { classes } from "../../utils/classes";
 import { getBorderRadius } from "../../utils/getBorderRadius";
 import { isDarkColor } from "../../utils/isDarkColor";
 import { colorPrefixes } from "../../../types/styles/Color";
+let inputId = 0;
 export class ZonosCheckbox {
     constructor() {
+        this.inputId = `zonos--checkbox-${++inputId}`;
         this.backgroundColor = 'blue';
         this.label = undefined;
         this.isChecked = false;
@@ -36,14 +38,14 @@ export class ZonosCheckbox {
             customRoundRadius: '4px',
             overrideBorderStyle: this.borderStyle,
         });
-        return (h(Host, { key: '7a2972128b04d5dffe09f60b5292d90f7201066a', class: classes(['zonos--elements zonos--checkbox']), style: {
+        return (h(Host, { key: '177059d9f1ad06324719d97e02a48bb582fcc3d4', class: classes(['zonos--elements zonos--checkbox']), style: {
                 '--zonos--background-color': backgroundColor,
                 '--zonos--border-radius': borderStyle,
                 '--zonos--font-family': zonosStoreFontFamily(),
                 '--zonos--size': `${this.size}px`,
-            } }, h("label", { key: 'b18d0f091b783555b4b3a1fc2b5d5cb1c62a9d41', class: classes([this.isDisabled && 'disabled']) }, h("input", { key: 'f3b86525ef7988d6df87f9147f5aa22b447c1303', checked: this.isChecked, disabled: this.isDisabled, hidden: true, onChange: e => {
+            } }, h("label", { key: '15c39a6c58b9d70e5174bb4d51ab6b8b8a48cabc', class: classes([this.isDisabled && 'disabled']), htmlFor: this.inputId }, h("input", { key: '1a6c85de7ca83822cc8e648a84f49580f520429a', checked: this.isChecked, disabled: this.isDisabled, hidden: true, id: this.inputId, onChange: e => {
                 this.checkboxSelected.emit(e.target.checked);
-            }, type: "checkbox" }), h("span", { key: '2007c2fbc4d8437f75b9a3d7a4e65d394922abf4', class: "checkmark-container" }, h("svg", { key: '481b9272c99cf464d8d88ab24a8dba35de921abf', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'ab7690fba113135175248c8926907312dfe478d5', "clip-rule": "evenodd", d: "M17.456 7.404a.75.75 0 0 1 .14 1.052l-6.5 8.5a.75.75 0 0 1-1.126.074l-4-4a.75.75 0 0 1 1.06-1.06l3.395 3.394 5.98-7.82a.75.75 0 0 1 1.05-.14Z", fill: "currentColor", "fill-rule": "evenodd" }))), this.label && (h("zonos-text", { key: '99689099e7469f2ff928619daa2fcee0ce35a418', size: this.fontSize }, this.label)))));
+            }, type: "checkbox" }), h("span", { key: '8b498b0a271f07de4e2481a173aecb732a935c5b', class: "checkmark-container" }, h("svg", { key: '5d98f7b34f424942dfbd1071f82a5c4f481ac5a9', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'ed79a224a05fa5bfa5f08f71e374d595e7e4c480', "clip-rule": "evenodd", d: "M17.456 7.404a.75.75 0 0 1 .14 1.052l-6.5 8.5a.75.75 0 0 1-1.126.074l-4-4a.75.75 0 0 1 1.06-1.06l3.395 3.394 5.98-7.82a.75.75 0 0 1 1.05-.14Z", fill: "currentColor", "fill-rule": "evenodd" }))), this.label && (h("zonos-text", { key: '6af368e40ed1a260f76aa014591e472004978d0c', size: this.fontSize }, this.label)))));
     }
     static get is() { return "zonos-checkbox"; }
     static get encapsulation() { return "shadow"; }