@zonos/elements 1.3.6 → 1.3.7-alpha.1

package/dist/components/zonos-checkout.js

@@ -1,8 +1,9 @@
 import { proxyCustomElement, HTMLElement, h, Host, Fragment } from '@stencil/core/internal/client';
-import { i as initStripeElements, c as cartStore, b as cartStoreUpdateItems, d as cartStoreReset, s as stripeStore, e as stripeStoreInitCheckoutSession, f as cartStoreUpdateToErrorState, a as stripeStorePrefetchLandedCost, g as cartStoreNextStep, h as stripeStoreConfirmPayment, j as stripeStoreReset, k as cartStorePreviousStep } from './stripe.js';
-import { a as localizationStore, b as log, t as translate } from './localization.js';
+import { b as localizationStore, d as log, e as stripeStoreGetDomesticShippingSession, f as localizationStoreUpdateSelectedCountryCode, g as stripeStoreCleanupDomesticShippingSession, l as logError, h as stripeStoreSaveDomesticShippingSession, i as initStripeElements, c as cartStore, j as cartStoreUpdateItems, k as cartStoreReset, s as stripeStore, m as stripeStoreInitCheckoutSession, n as cartStoreUpdateToErrorState, t as translate, a as stripeStorePrefetchLandedCost, o as cartStoreNextStep, p as stripeStoreConfirmPayment, q as stripeStoreReset, r as cartStorePreviousStep } from './stripe.js';
 import { z as zonosStore, m as mergeConfig } from './zonosStore.js';
+import { t as trackConversionEvent } from './trackConversionEvent.js';
 import { i as isCheckoutMobile } from './isCheckoutMobile.js';
+import { s as sendErrorLog, d as defineCustomElement$k } from './zonos-checkout-finish2.js';
 import { c as classes } from './classes.js';
 import { g as getBorderRadius } from './getBorderRadius.js';
 import { i as isDarkColor } from './isDarkColor.js';
@@ -15,7 +16,6 @@ import { d as defineCustomElement$o } from './zonos-card2.js';
 import { d as defineCustomElement$n } from './zonos-cart-items2.js';
 import { d as defineCustomElement$m } from './zonos-cart-subtotal2.js';
 import { d as defineCustomElement$l } from './zonos-checkbox2.js';
-import { d as defineCustomElement$k } from './zonos-checkout-finish2.js';
 import { d as defineCustomElement$j } from './zonos-checkout-footer2.js';
 import { d as defineCustomElement$i } from './zonos-checkout-payment2.js';
 import { d as defineCustomElement$h } from './zonos-collapse2.js';
@@ -35,6 +35,126 @@ import { d as defineCustomElement$4 } from './zonos-text2.js';
 import { d as defineCustomElement$3 } from './zonos-tooltip2.js';
 import { d as defineCustomElement$2 } from './zonos-v-stack2.js';
 
+const isShippableCountry = (showLog = true) => {
+    if (!localizationStore.localizationLoaded) {
+        return false;
+    }
+    // if localization is loaded and the localization is not a shippable country, keep the original click event
+    if (!localizationStore.isShippableCountry) {
+        if (showLog) {
+            log(`Checkout: not shippable country`);
+        }
+        return false;
+    }
+    return true;
+};
+
+/**
+ * Watch for changes in domestic checkout step, this is to redirect user to home page and open checkout if user enters the ship to country that's in the shipping zone
+ * @note Only works on default bigcommerce checkout page
+ */
+const watchBigcommerceDomesticCheckout = ({ domesticRedirectedBtnSelector, onShippingAddressSessionFound, }) => {
+    if (!window.Zonos.isBigCommerce) {
+        return;
+    }
+    const observer = new MutationObserver(async () => {
+        const domesticRedirectedButton = document.querySelector(domesticRedirectedBtnSelector);
+        const shippingAddressSession = stripeStoreGetDomesticShippingSession();
+        // append a hidden button to the body if the shipping address session is found
+        if (!domesticRedirectedButton && shippingAddressSession) {
+            // create a hidden button to trigger the click event
+            const button = document.createElement('button');
+            button.style.display = 'none';
+            button.id = 'zonos--domestic-redirected-checkout-button';
+            document.body.appendChild(button);
+            onShippingAddressSessionFound === null || onShippingAddressSessionFound === void 0 ? void 0 : onShippingAddressSessionFound(shippingAddressSession);
+            // disconnect the observer after we found the shipping continue button
+            observer.disconnect();
+            return;
+        }
+        const shipToCountryElement = document.querySelector('select[name="shippingAddress.countryCode"]');
+        // make sure the continue button is available
+        const shippingCountinueBtnEle = document.querySelector('#checkout-shipping-continue');
+        if (!shipToCountryElement || !shippingCountinueBtnEle) {
+            // do nothing if shipping country and the continue button is not found
+            return;
+        }
+        // disconnect the observer after we found the shipping continue button
+        observer.disconnect();
+        shippingCountinueBtnEle.addEventListener('click', async (e) => {
+            var _a, _b;
+            const shippingCountry = shipToCountryElement.value;
+            if (!shippingCountry) {
+                // do nothing if shipping country is not found
+                return;
+            }
+            // update the country code in localization store and check if it's shippable
+            localizationStoreUpdateSelectedCountryCode(shippingCountry);
+            // do nothing if the country is still domestic
+            if (!isShippableCountry(false)) {
+                // cleanup the domestic shipping session if it's domestic because we will open the intl checkout after redirecting
+                stripeStoreCleanupDomesticShippingSession();
+                return;
+            }
+            // get value of shipping address state
+            const shipToFormElement = document.querySelector('form');
+            if (!shipToFormElement) {
+                return;
+            }
+            const formData = new FormData(shipToFormElement);
+            const shipAddress1Element = document.querySelector('input#addressLine1Input');
+            const shippingAddress = {
+                address1: (_a = formData.get('shippingAddress.address1')) !== null && _a !== void 0 ? _a : 
+                // in Canada, the address1 is not included in the form, try to get value from input id instead.
+                (shipAddress1Element && shipAddress1Element.value),
+                address2: formData.get('shippingAddress.address2'),
+                city: formData.get('shippingAddress.city'),
+                countryCode: formData.get('shippingAddress.countryCode'),
+                firstName: formData.get('shippingAddress.firstName'),
+                lastName: formData.get('shippingAddress.lastName'),
+                phone: formData.get('shippingAddress.phone'),
+                postalCode: formData.get('shippingAddress.postalCode'),
+                stateOrProvince: (_b = formData.get('shippingAddress.stateOrProvince')) !== null && _b !== void 0 ? _b : formData.get('shippingAddress.stateOrProvinceCode'),
+            };
+            if (Object.values(shippingAddress).some(value => value === undefined || value === null)) {
+                logError('One or more shipping address field is missing', Object.entries(shippingAddress));
+                void sendErrorLog({
+                    endpoint: 'No endpoint, domestic checkout form missing fields',
+                    errors: [
+                        'Bigcommerce: One or more shipping address field is missing in the domestic checkout form',
+                        JSON.stringify(Object.entries(shippingAddress)),
+                    ],
+                    metadata: {
+                        domain: window.location.hostname,
+                        storeId: zonosStore.storeId,
+                    },
+                });
+                return;
+            }
+            // save the shipping address to session storage
+            stripeStoreSaveDomesticShippingSession({
+                address1: shippingAddress.address1,
+                address2: shippingAddress.address2,
+                city: shippingAddress.city,
+                countryCode: shippingAddress.countryCode,
+                firstName: shippingAddress.firstName,
+                lastName: shippingAddress.lastName,
+                phone: shippingAddress.phone,
+                postalCode: shippingAddress.postalCode,
+                state: shippingAddress.stateOrProvince,
+            });
+            e.preventDefault();
+            e.stopPropagation();
+            // redirect to home page, home page then will open the checkout dialog if having domestic shipping session
+            window.location.href = '/';
+        });
+    });
+    observer.observe(document.body, {
+        childList: true,
+        subtree: true,
+    });
+};
+
 const LeftArrow = `<svg color="var(--amino-gray-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M9.707 16.707a1 1 0 0 1-1.414 0l-3.647-3.646a1.5 1.5 0 0 1 0-2.122l3.647-3.646a1 1 0 0 1 1.414 1.414L7.414 11H19a1 1 0 1 1 0 2H7.414l2.293 2.293a1 1 0 0 1 0 1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>`;
 
 const MessageIcon = `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="https://www.w3.org/2000/svg">
@@ -62,19 +182,6 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
                 overrideTheme: this.isMobile ? theme : undefined,
             });
         };
-        this.isShippableCountry = (showLog = true) => {
-            if (!localizationStore.localizationLoaded) {
-                return false;
-            }
-            // if localization is loaded and the localization is not a shippable country, keep the original click event
-            if (!localizationStore.isShippableCountry) {
-                if (showLog) {
-                    log(`Checkout: not shippable country`);
-                }
-                return false;
-            }
-            return true;
-        };
         this.getCurrentLocalePageEnum = () => {
             switch (cartStore.step) {
                 case 'customer-info':
@@ -101,6 +208,7 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
         this.isMobile = false;
         this.zonosReviewRef = undefined;
         this.storybookPaymentStatusOverride = undefined;
+        this.domesticRedirectedBtnSelector = '#zonos--domestic-redirected-checkout-button';
     }
     /**
      * Init cart info handler event
@@ -146,7 +254,8 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
             // do nothing if button element is not found
             return;
         }
-        const buttonAnchorElements = document.querySelectorAll(buttonAnchorSelector);
+        // also attach event to hidden button if user was redirected with shipping address session
+        const buttonAnchorElements = document.querySelectorAll(`${buttonAnchorSelector}, ${this.domesticRedirectedBtnSelector}`);
         // only attach event once, and looping through all of the button elements
         buttonAnchorElements.forEach(button => {
             const isEventAttached = button.getAttribute('data-zonos-checkout-attached');
@@ -156,7 +265,7 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
             }
             button.addEventListener('click', async (e) => {
                 // do nothing if it's not shippable country
-                if (!this.isShippableCountry()) {
+                if (!isShippableCountry()) {
                     return;
                 }
                 e.preventDefault();
@@ -172,6 +281,7 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
                         throw new Error('Error building cart');
                     }
                     submitGtag('zonos-checkout-start');
+                    void trackConversionEvent('checkout_open');
                 }
                 catch (err) {
                     // stop loading
@@ -186,6 +296,14 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
             });
             button.removeAttribute('disabled');
             button.setAttribute('data-zonos-checkout-attached', 'true');
+            // if this button is the hidden button, trigger the click event
+            if (button.matches(this.domesticRedirectedBtnSelector)) {
+                button.dispatchEvent(new CustomEvent('click'));
+                // cleanup shipping session after button is clicked
+                stripeStoreCleanupDomesticShippingSession();
+                // remove the button after it's clicked
+                button.remove();
+            }
         });
     }
     appearanceSettingsOverrideChanged() {
@@ -201,6 +319,25 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
     async init() {
         stripeStore.stripe = window.Zonos.stripe;
         this.stripe = window.Zonos.stripe;
+        // check if bigcommerce, if user enters the shipping address that's in the shipping zone at bigcommerce checkout
+        watchBigcommerceDomesticCheckout({
+            domesticRedirectedBtnSelector: this.domesticRedirectedBtnSelector,
+            onShippingAddressSessionFound: shippingAddressSession => {
+                // prefilled the default address if shipping address session is found for checkout on open
+                this.defaultAddress = {
+                    address: {
+                        city: shippingAddressSession.city,
+                        country: shippingAddressSession.countryCode,
+                        line1: shippingAddressSession.address1,
+                        line2: shippingAddressSession.address2,
+                        postal_code: shippingAddressSession.postalCode,
+                        state: shippingAddressSession.state,
+                    },
+                    name: `${shippingAddressSession.firstName} ${shippingAddressSession.lastName}`,
+                    phone: shippingAddressSession.phone,
+                };
+            },
+        });
         const hideInternationalOrderInterval = setInterval(() => {
             const internationalSelector = window.Zonos.internationalHideSelector;
             if (!internationalSelector) {
@@ -209,7 +346,7 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
                 return;
             }
             // hide the selector if it's international
-            const isInternationalOrder = this.isShippableCountry(false);
+            const isInternationalOrder = isShippableCountry(false);
             const selector = document.querySelectorAll(internationalSelector);
             if (!isInternationalOrder) {
                 // show the selector when it's domestic
@@ -431,6 +568,7 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
         "isMobile": [32],
         "zonosReviewRef": [32],
         "storybookPaymentStatusOverride": [32],
+        "domesticRedirectedBtnSelector": [32],
         "closeDialogHandler": [64],
         "init": [64],
         "setToFinishStep": [64]

package/dist/components/zonos-collapse2.js

@@ -12,6 +12,7 @@ const ZonosCollapse = /*@__PURE__*/ proxyCustomElement(class ZonosCollapse exten
         this.collapsed = false;
         this.collapseSize = 0;
         this.height = this.el.scrollHeight;
+        this.iframe = null;
     }
     getElementHeight() {
         const fullHeight = `${this.height}px`;
@@ -23,23 +24,42 @@ const ZonosCollapse = /*@__PURE__*/ proxyCustomElement(class ZonosCollapse exten
     }
     componentDidRender() {
         var _a, _b, _c;
-        (_c = (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('iframe')) === null || _b === void 0 ? void 0 : _b.contentWindow) === null || _c === void 0 ? void 0 : _c.addEventListener('resize', () => {
-            this.height = this.el.scrollHeight;
+        this.iframe =
+            ((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('iframe')) || null;
+        (_c = (_b = this.iframe) === null || _b === void 0 ? void 0 : _b.contentWindow) === null || _c === void 0 ? void 0 : _c.addEventListener('resize', () => {
+            if (!this.iframe) {
+                // this should never happen since it's inside of resize callback
+                return;
+            }
+            this.height = parseFloat(getComputedStyle(this.iframe).height);
         });
     }
     render() {
-        this.height = this.el.scrollHeight;
-        return (h(Host, { key: '372c80d0d5b8d2c693b2c74bd6652430c8e4a5bb', class: 'zonos--elements zonos--collapse', style: {
+        if (!this.collapsed) {
+            // wait for the collapse animation to finish, then set overflow to visible
+            setTimeout(() => {
+                // if the element collapsed state is still not changed, set overflow to visible
+                if (!this.collapsed) {
+                    this.el.style.overflow = 'visible';
+                }
+            }, 300);
+        }
+        else {
+            // set overflow to hidden to prevent content from showing when collapsed
+            this.el.style.overflow = 'hidden';
+        }
+        return (h(Host, { key: '7ac8b898feadfb4424b3b48a98135cb18994f4e0', class: 'zonos--elements zonos--collapse', style: {
                 '--font-family': zonosStoreFontFamily(),
                 height: this.getElementHeight(),
-            } }, h("div", { key: 'babd12279d1ac54092a1cff83e8e5b8ed5e81008' }, h("iframe", { key: '6d3a7845d560ba587829ba68033cd92ec8d2af5b', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: 'f295e17fd3178eb44dc7c0c51f87a80694fd04d7' }))));
+            } }, h("div", { key: '4a527ec319b59041196284d4d9a8f22b943a74e6' }, h("iframe", { key: '2fb51c16e13ca90561b1b1e6cab89d87e4a37a47', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: '6d7849f6c35be611446b0da36d657396e5ca3122' }))));
     }
     get el() { return this; }
     static get style() { return ZonosCollapseStyle0; }
 }, [1, "zonos-collapse", {
         "collapsed": [4],
         "collapseSize": [2, "collapse-size"],
-        "height": [32]
+        "height": [32],
+        "iframe": [32]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/zonos-component.js

@@ -20,7 +20,7 @@ const ZonosComponent$1 = /*@__PURE__*/ proxyCustomElement(class ZonosComponent e
         return format(this.first, this.middle, this.last);
     }
     render() {
-        return h("div", { key: 'cf376a9b1970bd04cdadf820112c081666c8bef2' }, "Hello, World! I'm ", this.getText());
+        return h("div", { key: '3b7429a0c03b00f0a80e15a94bebd08aedaafe51' }, "Hello, World! I'm ", this.getText());
     }
     static get style() { return ZonosComponentStyle0; }
 }, [1, "zonos-component", {

package/dist/components/zonos-controller.js

@@ -1,6 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { s as stripeStore } from './stripe.js';
-import { h as handleFetch, l as logError, i as isValidSelector, b as log, d as initLocalizationStore, e as localizationStoreUpdateSelectedCountryCode } from './localization.js';
+import { u as handleFetch, l as logError, z as isValidSelector, d as log, s as stripeStore, A as initLocalizationStore, f as localizationStoreUpdateSelectedCountryCode } from './stripe.js';
 import { z as zonosStore, d as zonosStoreInitSetting, a as zonosStoreFontFamily } from './zonosStore.js';
 import { d as defineCustomElement$3 } from './zonos-notification2.js';
 import { d as defineCustomElement$2 } from './zonos-text2.js';
@@ -36,13 +35,16 @@ const initCheckout = (config) => {
     injectCheckoutElement();
 };
 
-const injectHelloComponent = (triggerAnchorElement) => {
+const injectHelloComponent = (anchorElementSelector) => {
+    const triggerAnchorElement = document.querySelector(anchorElementSelector);
     // append checkout component if doesn't exist
     const helloElement = document.querySelector('zonos-hello');
     if (!helloElement && triggerAnchorElement) {
         const newHelloElement = document.createElement('zonos-hello');
         triggerAnchorElement.appendChild(newHelloElement);
+        return true;
     }
+    return false;
 };
 const initHello = async (helloSettings) => {
     const { anchorElementSelector } = helloSettings;
@@ -51,9 +53,26 @@ const initHello = async (helloSettings) => {
         logError(`Selector anchorElementSelector "${helloSettings.anchorElementSelector}" is not a valid selector.`);
         return;
     }
-    const triggerElement = document.querySelector(anchorElementSelector);
     log('Hello init complete');
-    injectHelloComponent(triggerElement);
+    const isHelloInjected = injectHelloComponent(anchorElementSelector);
+    // keep watching for the anchor element to be added to the DOM, then inject hello component
+    if (!isHelloInjected) {
+        const observer = new MutationObserver(() => {
+            const injected = injectHelloComponent(anchorElementSelector);
+            if (injected) {
+                // disconnect observer if hello is successfully injected
+                observer.disconnect();
+            }
+        });
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
+        // kill observer after 5 seconds if the hello still not injected, if the hello still not injected after 10 seconds, it's likely that the selector the user doesn't want to use hello
+        setTimeout(() => {
+            observer.disconnect();
+        }, 5000);
+    }
 };
 
 const zonosControllerCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--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{visibility:hidden;opacity:0;height:0}";
@@ -209,7 +228,7 @@ const ZonosController$1 = /*@__PURE__*/ proxyCustomElement(class ZonosController
         zonosStore.organizationName = organizationName;
     }
     render() {
-        return h(Host, { key: '5650218b8eef4246ff1b131fcd1a06319800c2e3', class: "zonos--elements" });
+        return h(Host, { key: 'a220a3ebe75df167eefc892c59efdcaf05a53601', class: "zonos--elements" });
     }
     static get style() { return ZonosControllerStyle0; }
 }, [1, "zonos-controller", {

package/dist/components/zonos-country-flag2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { a as localizationStore } from './localization.js';
+import { b as localizationStore } from './stripe.js';
 import { a as zonosStoreFontFamily } from './zonosStore.js';
 import { c as classes } from './classes.js';
 

package/dist/components/zonos-country-select2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { e as localizationStoreUpdateSelectedCountryCode, a as localizationStore } from './localization.js';
+import { f as localizationStoreUpdateSelectedCountryCode, b as localizationStore } from './stripe.js';
 import { a as zonosStoreFontFamily } from './zonosStore.js';
 import { d as defineCustomElement$7 } from './zonos-button2.js';
 import { d as defineCustomElement$6 } from './zonos-country-flag2.js';
@@ -1814,6 +1814,11 @@ const ZonosCountrySelect = /*@__PURE__*/ proxyCustomElement(class ZonosCountrySe
         this.handleOnClose = () => { };
         this.inputValue = '';
     }
+    componentDidRender() {
+        var _a, _b;
+        // focus the input on render
+        (_b = (_a = this.ele.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.zonos--country-select-input')) === null || _b === void 0 ? void 0 : _b.focus();
+    }
     render() {
         const { shippingZoneCountries } = localizationStore;
         const countries = shippingZoneCountries
@@ -1826,10 +1831,11 @@ const ZonosCountrySelect = /*@__PURE__*/ proxyCustomElement(class ZonosCountrySe
         const filteredCountries = this.inputValue
             ? fuseObject.map(country => country.item)
             : countries.sort((a, b) => a.displayName.localeCompare(b.displayName));
-        return (h(Host, { key: 'fb1115a06814daaf8ebb7d9e282fdd1bd944121f', class: "zonos--elements", style: {
+        return (h(Host, { key: '2b8e15643f92ac489706aff7623b1d1efdebce70', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'eb9eb7dba8f170c6190fd29e670b002ecb39a849', class: "zonos--country-select" }, h("zonos-v-stack", { key: '4667474f03efbad9fbb0ea4153d16b49a7f2803f', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: 'c2777f838d9d376878e1218868ed8df0d28dc5f2', handleOnClose: () => this.handleOnClose(), label: "Select a country" }, h("input", { key: '1e41b3888bce97a94ff88c4b3b3389cc8d4de096', class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Search countries", value: this.inputValue }))), h("div", { key: 'ba89ae931e2a0e564112d9989d8074674906a297', class: "zonos--country-select-content" }, filteredCountries.map(country => (h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, h("zonos-country-flag", { class: "zonos--country-flag", countryCode: country.code }), h("zonos-text", { color: "gray-800" }, country.displayName), country.code === localizationStore.selectedCountryCode && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 20 })))))))));
+            } }, h("div", { key: '06b0c7765d8144ca102c9033e74cf1edb14743ac', class: "zonos--country-select" }, h("zonos-v-stack", { key: 'f2af99575f518acb753448f7cb1f7aecd790de9d', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: '296b92c476439aace00f6817b452a3fd3e1d353d', handleOnClose: () => this.handleOnClose(), label: "Select a country" }, h("input", { key: 'd988b856392f88a66bcc3016ccf55107bda4a411', class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Search countries", value: this.inputValue }))), h("div", { key: '4376bec824141dd7d2dbfb84f465ac4a48e1d050', class: "zonos--country-select-content" }, filteredCountries.map(country => (h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, h("zonos-country-flag", { class: "zonos--country-flag", countryCode: country.code }), h("zonos-text", { textColor: "gray-800" }, country.displayName), country.code === localizationStore.selectedCountryCode && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 20 })))))))));
     }
+    get ele() { return this; }
     static get style() { return ZonosCountrySelectStyle0; }
 }, [1, "zonos-country-select", {
         "handleOnClose": [16],

package/dist/components/zonos-custom-message2.js

@@ -4,6 +4,20 @@ import { d as defineCustomElement$3 } from './zonos-card2.js';
 import { d as defineCustomElement$2 } from './zonos-icon2.js';
 import { d as defineCustomElement$1 } from './zonos-text2.js';
 
+const formatStringWithLinks = (str) => {
+    // Match Markdown-style links or standalone URLs not in Markdown format
+    const linkRegex = /\[([^\]]+)\]\((https?:\/\/[^\s\)]+)\)|(https?:\/\/[^\s]+)/g;
+    const messageWithLinks = str.replace(linkRegex, (_match, text, markdownUrl, url) => {
+        if (markdownUrl) {
+            return `<zonos-link href="${markdownUrl}" target="_blank" rel="noopener noreferrer">${text}</zonos-link>`;
+        }
+        else {
+            return `<zonos-link href="${url}" target="_blank" rel="noopener noreferrer">${url}</zonos-link>`;
+        }
+    });
+    return messageWithLinks;
+};
+
 const zonosCustomMessageCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--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--custom-message{background:var(--amino-gray-50);border-radius:var(--amino-radius-6)}:host .zonos--custom-message .zonos--flex-message{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--amino-space-8)}";
 const ZonosCustomMessageStyle0 = zonosCustomMessageCss;
 
@@ -16,9 +30,10 @@ const ZonosCustomMessage = /*@__PURE__*/ proxyCustomElement(class ZonosCustomMes
         this.message = '';
     }
     render() {
-        return (h(Host, { key: '6c16aa29406415995c2289c2fe3d22dbe08fbd23', class: "zonos--elements", style: {
+        const messageWithLinks = formatStringWithLinks(this.message);
+        return (h(Host, { key: '73091a3267f0989e8820800054aebc75168dc5d6', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, this.message && (h("zonos-card", { class: "zonos--custom-message", spacing: "12px" }, h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Custom message", content: this.icon }), h("zonos-text", null, this.message))))));
+            } }, this.message && (h("zonos-card", { class: "zonos--custom-message", spacing: "12px" }, h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Custom message icon", content: this.icon }), h("zonos-text", { innerHTML: messageWithLinks }))))));
     }
     static get style() { return ZonosCustomMessageStyle0; }
 }, [1, "zonos-custom-message", {
@@ -54,4 +69,4 @@ function defineCustomElement() {
     } });
 }
 
-export { ZonosCustomMessage as Z, defineCustomElement as d };
+export { ZonosCustomMessage as Z, defineCustomElement as d, formatStringWithLinks as f };

package/dist/components/zonos-customer-info2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { s as stripeStore } from './stripe.js';
-import { t as translate } from './localization.js';
+import { s as stripeStore, t as translate } from './stripe.js';
+import { t as trackConversionEvent } from './trackConversionEvent.js';
 import { s as submitGtag } from './submitGtag.js';
 import { d as defineCustomElement$7 } from './zonos-address2.js';
 import { d as defineCustomElement$6 } from './zonos-button2.js';
@@ -10,7 +10,7 @@ import { d as defineCustomElement$3 } from './zonos-link-authentication2.js';
 import { d as defineCustomElement$2 } from './zonos-spinner2.js';
 import { d as defineCustomElement$1 } from './zonos-text2.js';
 
-const zonosCustomerInfoCss = ".sc-zonos-customer-info-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-customer-info-h *.sc-zonos-customer-info{font-family:var(--font-family, Inter), Inter}.sc-zonos-customer-info-h img.sc-zonos-customer-info{max-width:100%}.sc-zonos-customer-info-h dl.sc-zonos-customer-info,.sc-zonos-customer-info-h dd.sc-zonos-customer-info,.sc-zonos-customer-info-h h1.sc-zonos-customer-info,.sc-zonos-customer-info-h h2.sc-zonos-customer-info,.sc-zonos-customer-info-h h3.sc-zonos-customer-info,.sc-zonos-customer-info-h h4.sc-zonos-customer-info,.sc-zonos-customer-info-h h5.sc-zonos-customer-info,.sc-zonos-customer-info-h h6.sc-zonos-customer-info,.sc-zonos-customer-info-h hr.sc-zonos-customer-info,.sc-zonos-customer-info-h figure.sc-zonos-customer-info,.sc-zonos-customer-info-h p.sc-zonos-customer-info,.sc-zonos-customer-info-h pre.sc-zonos-customer-info{margin:0}.sc-zonos-customer-info-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-customer-info-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-customer-info-h .zonos--title.sc-zonos-customer-info{margin-bottom:var(--amino-space-20)}.sc-zonos-customer-info-h .zonos--link-authentication.sc-zonos-customer-info{margin-bottom:var(--amino-space-32)}.sc-zonos-customer-info-h .zonos--address.sc-zonos-customer-info{margin-bottom:var(--amino-space-16)}.sc-zonos-customer-info-h .zonos--checkbox.sc-zonos-customer-info{margin-bottom:var(--amino-space-16)}.sc-zonos-customer-info-h .zonos--checkbox.sc-zonos-customer-info+.zonos--address.sc-zonos-customer-info{margin-bottom:0}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info{margin-bottom:var(--amino-space-20);overflow:auto;padding:5px}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar{width:10px}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-customer-info-h .zonos--group-btn.sc-zonos-customer-info{position:-webkit-sticky;position:sticky;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;bottom:0;margin-top:var(--amino-space-12);background:var(--primary-color, var(--amino-gray-0))}.sc-zonos-customer-info-h .zonos--group-btn.sc-zonos-customer-info zonos-button.sc-zonos-customer-info{width:100%}";
+const zonosCustomerInfoCss = ".sc-zonos-customer-info-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-customer-info-h *.sc-zonos-customer-info{font-family:var(--font-family, Inter), Inter}.sc-zonos-customer-info-h img.sc-zonos-customer-info{max-width:100%}.sc-zonos-customer-info-h dl.sc-zonos-customer-info,.sc-zonos-customer-info-h dd.sc-zonos-customer-info,.sc-zonos-customer-info-h h1.sc-zonos-customer-info,.sc-zonos-customer-info-h h2.sc-zonos-customer-info,.sc-zonos-customer-info-h h3.sc-zonos-customer-info,.sc-zonos-customer-info-h h4.sc-zonos-customer-info,.sc-zonos-customer-info-h h5.sc-zonos-customer-info,.sc-zonos-customer-info-h h6.sc-zonos-customer-info,.sc-zonos-customer-info-h hr.sc-zonos-customer-info,.sc-zonos-customer-info-h figure.sc-zonos-customer-info,.sc-zonos-customer-info-h p.sc-zonos-customer-info,.sc-zonos-customer-info-h pre.sc-zonos-customer-info{margin:0}.sc-zonos-customer-info-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-customer-info-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-customer-info-h .zonos--title.sc-zonos-customer-info{margin-bottom:var(--amino-space-20)}.sc-zonos-customer-info-h .zonos--link-authentication.sc-zonos-customer-info{margin-bottom:var(--amino-space-32)}.sc-zonos-customer-info-h .zonos--address.sc-zonos-customer-info{margin-bottom:var(--amino-space-16)}.sc-zonos-customer-info-h .zonos--checkbox.sc-zonos-customer-info{margin-bottom:var(--amino-space-16)}.sc-zonos-customer-info-h .zonos--checkbox.sc-zonos-customer-info+.zonos--address.sc-zonos-customer-info{margin-bottom:0}.sc-zonos-customer-info-h zonos-button.sc-zonos-customer-info{-webkit-box-shadow:0 0 1px 0 var(--amino-gray-600);box-shadow:0 0 1px 0 var(--amino-gray-600)}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info{margin-bottom:var(--amino-space-20);overflow:auto;padding:5px}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar{width:10px}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-customer-info-h .zonos--group-btn.sc-zonos-customer-info{position:-webkit-sticky;position:sticky;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;bottom:-5px;padding-top:var(--amino-space-8);margin-top:var(--amino-space-12);background:var(--primary-color, var(--amino-gray-0))}.sc-zonos-customer-info-h .zonos--group-btn.sc-zonos-customer-info zonos-button.sc-zonos-customer-info{width:100%}";
 const ZonosCustomerInfoStyle0 = zonosCustomerInfoCss;
 
 const ZonosCustomerInfo = /*@__PURE__*/ proxyCustomElement(class ZonosCustomerInfo extends HTMLElement {
@@ -34,6 +34,7 @@ const ZonosCustomerInfo = /*@__PURE__*/ proxyCustomElement(class ZonosCustomerIn
         if (!this.disabled) {
             // submit google tag when the form is complete
             submitGtag('zonos-checkout-customer-info');
+            void trackConversionEvent('checkout_customerInfoCompleted');
         }
     }
     render() {

package/dist/components/zonos-dialog2.js

@@ -58,7 +58,7 @@ const ZonosDialog = /*@__PURE__*/ proxyCustomElement(class ZonosDialog extends H
             document.body.style.overflow = 'auto';
         }
         const borderStyle = getBorderRadius(this.borderStyle);
-        return (h(Host, { key: 'dd232b16db7f6a6216f91af19c8b735b7eb528c7', class: classes([
+        return (h(Host, { key: '3927d9cf0ebbd8b497a0ec42328c4392925d198a', class: classes([
                 'zonos--elements',
                 this.open && 'open',
                 this.isLoading && 'is-loading',
@@ -69,10 +69,10 @@ const ZonosDialog = /*@__PURE__*/ proxyCustomElement(class ZonosDialog extends H
                 '--font-family': zonosStoreFontFamily(),
                 '--height': this.height || 'initial',
                 '--width': this.width,
-            } }, h("div", { key: '23751fcbfe7a51856589d45feb59ed51ca3f86fa', class: "zonos--backdrop" }), h("div", { key: '3f5af0c470ad69e68b978753ece8d2687c99ab7c', "aria-hidden": "true", class: "zonos--dialog-layout", onClick: this.clickOutsideDialogHandler }, h("div", { key: 'e137a76e1a3e2cfc6403628fe804eb23d1bb1282', class: "zonos--dialog" }, this.isLoading && (h("div", { class: "zonos--loading" }, h("zonos-spinner", { size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { class: "zonos--header" }, this.headerText && (h("h3", { class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler })))), h("div", { key: '46e89cdfaffd1190f4916206deb452002f40f24f', class: classes([
+            } }, h("div", { key: 'df93af61bfd856db3a572cdb98f60a8dd5c5bb7d', class: "zonos--backdrop" }), h("div", { key: 'f306feb4858dff642fbfd731e5aad849a8f29941', "aria-hidden": "true", class: "zonos--dialog-layout", onClick: this.clickOutsideDialogHandler }, h("div", { key: 'b914ea2e54fb2af825008ae28e235c461dce67e9', class: "zonos--dialog" }, this.isLoading && (h("div", { class: "zonos--loading" }, h("zonos-spinner", { size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { class: "zonos--header" }, this.headerText && (h("h3", { class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler })))), h("div", { key: '19219c0c8d167bbacec992ba10b1fe0f31a8b8f6', class: classes([
                 'zonos--body',
                 this.noBodyPadding && 'zonos--no-body-padding',
-            ]) }, h("slot", { key: 'e8acb4a5e48ad4a0aeb057799f5abeb56eb8d1ea' })), this.footerRightAction && (h("div", { class: "zonos--footer" }, h("div", { class: "zonos--footer-right-action" }, this.footerRightAction)))))));
+            ]) }, h("slot", { key: '38f9b83418dacd47cc2395f253a32ff0a6723d54' })), this.footerRightAction && (h("div", { class: "zonos--footer" }, h("div", { class: "zonos--footer-right-action" }, this.footerRightAction)))))));
     }
     static get assetsDirs() { return ["assets"]; }
     static get style() { return ZonosDialogStyle0; }

package/dist/components/zonos-hello-dialog-footer2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { a as localizationStore } from './localization.js';
+import { b as localizationStore } from './stripe.js';
 import { i as isDarkColor } from './isDarkColor.js';
 import { l as languages } from './ILanguage.js';
 import { d as defineCustomElement$4 } from './zonos-button2.js';
@@ -36,9 +36,9 @@ const ZonosHelloDialogFooter = /*@__PURE__*/ proxyCustomElement(class ZonosHello
         const primaryColor = (_a = this.appearanceSettings) === null || _a === void 0 ? void 0 : _a.colorPrimary;
         const footerTheme = primaryColor && isDarkColor(primaryColor) ? 'DARK' : 'LIGHT';
         const language = (_b = languages.find(x => x.code === localizationStore.selectedLocale)) === null || _b === void 0 ? void 0 : _b.translatedLabel;
-        return (h(Host, { key: 'a3a6ab0e4af4981cc83802be1433c3c41da58c19', class: "zonos--elements" }, h("div", { key: 'fdea45d1b4d83055a3d17918a5ae78f43a7e0042', class: "zonos--hello-dialog-footer", "data-theme": footerTheme, style: {
+        return (h(Host, { key: 'f97688788d9f6d1a640f054a2a22dbae6955b83c', class: "zonos--elements" }, h("div", { key: '3539323f9044acef3890fc072bdd981e2495fc18', class: "zonos--hello-dialog-footer", "data-theme": footerTheme, style: {
                 '--primary-color': (_c = this.appearanceSettings) === null || _c === void 0 ? void 0 : _c.colorPrimary,
-            } }, h("a", { key: '4d4e995052049238d4c522ff8501dddbe25e29d5', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '4ca16c024473660f74cfc7a3d506b8ba4ebf7362', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: "gray-1200", size: 108 })), h("div", { key: 'dd1da686f8345431c3805898f374e5fb22e27289', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: 'd5c34c75c5006710ff6d0426d43f07a5ade41827', buttonColor: "gray-1200", icon: h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: "gray-1200" }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), h("zonos-button", { key: '43759ce87473b10e078f14dce529db502a5edd4d', buttonColor: "gray-1200", icon: h("zonos-country-flag", { "aria-label": "Open country select", class: "zonos--footer-country-flag", countryCode: localizationStore.selectedCountryCode }), onClick: () => this.setShowCountrySelect(true), variant: "subtle" }, localizationStore.selectedCountryCode)))));
+            } }, h("a", { key: '5e30052240f87211c6f0092ef6a27c217f3ecefb', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: 'c60142bcd26086c2944ac3464885ca1f96e5cfbe', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: "gray-1200", size: 108 })), h("div", { key: '67297b4c557ee5b49a4406a459588f2924183195', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: '9348bff826187730f36d191f7e01f516f2b9785c', buttonColor: "gray-1200", icon: h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: "gray-1200" }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), h("zonos-button", { key: 'ecf1a8639e8e92a07a0e774abb560de53c19587c', buttonColor: "gray-1200", icon: h("zonos-country-flag", { "aria-label": "Open country select", class: "zonos--footer-country-flag", countryCode: localizationStore.selectedCountryCode }), onClick: () => this.setShowCountrySelect(true), variant: "subtle" }, localizationStore.selectedCountryCode)))));
     }
     static get style() { return ZonosHelloDialogFooterStyle0; }
 }, [1, "zonos-hello-dialog-footer", {

package/dist/components/zonos-hello-dialog2.js

@@ -1,13 +1,13 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { m as currencyFormat, a as localizationStore, t as translate } from './localization.js';
+import { G as currencyFormat, b as localizationStore, t as translate } from './stripe.js';
 import { z as zonosStore } from './zonosStore.js';
 import { c as classes } from './classes.js';
+import { f as formatStringWithLinks, d as defineCustomElement$8 } from './zonos-custom-message2.js';
 import { d as defineCustomElement$d } from './zonos-banner2.js';
 import { d as defineCustomElement$c } from './zonos-button2.js';
 import { d as defineCustomElement$b } from './zonos-card2.js';
 import { d as defineCustomElement$a } from './zonos-country-flag2.js';
 import { d as defineCustomElement$9 } from './zonos-country-select2.js';
-import { d as defineCustomElement$8 } from './zonos-custom-message2.js';
 import { d as defineCustomElement$7 } from './zonos-hello-dialog-footer2.js';
 import { d as defineCustomElement$6 } from './zonos-icon2.js';
 import { d as defineCustomElement$5 } from './zonos-language-select2.js';
@@ -131,18 +131,19 @@ const ZonosHelloDialog = /*@__PURE__*/ proxyCustomElement(class ZonosHelloDialog
         const animateFromBottom = this.dialogRef && getHasMoreSpaceAbove(this.dialogRef);
         const { customMessages } = localizationStore;
         const welcomeMessage = `${translate('Welcome to')} ${zonosStore.organizationName}!`;
-        const defaultMessage = ((_a = customMessages.find(x => x.pageName === 'hello_default')) === null || _a === void 0 ? void 0 : _a.message) ||
+        const defaultMessageStr = ((_a = customMessages.find(x => x.pageName === 'hello_default')) === null || _a === void 0 ? void 0 : _a.message) ||
             translate('Know about duties and taxes before you buy. Shop with confidence!');
+        const defaultMessage = formatStringWithLinks(defaultMessageStr);
         const currentPage = this.getCurrentPageEnum();
         const filteredMessages = customMessages.filter(x => x.pageName === currentPage);
-        return (h(Host, { key: '303f914b4511500edcd8d041ccfd52f0c48a7a85', class: "zonos--elements" }, h("div", { key: 'f52025ee53c0cdbbf20ecbb874e5639194b6507b', "aria-hidden": "true", class: classes([
+        return (h(Host, { key: 'd5ac86955cf9f9a22e47fe2154dee6e10f6a9361', class: "zonos--elements" }, h("div", { key: 'd34dd3f937330cd5fdd2d7a11dc321c215983146', "aria-hidden": "true", class: classes([
                 'zonos--hello-dialog',
                 animateLeft && 'zonos--hello-dialog-animate-from-left',
                 animateFromBottom && 'zonos--hello-dialog-animate-from-bottom',
                 !!this.mobileLocationOverride &&
                     'zonos--hello-dialog-mobile-override',
                 this.isOpen && 'zonos--hello-dialog-open',
-            ]), ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (h("div", null, h("div", { class: "zonos--hello-dialog-content" }, h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close Zonos Hello dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), h("zonos-v-stack", { spacing: 24 }, h("zonos-country-flag", { class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { type: "boldSubheader" }, welcomeMessage), h("zonos-text", { textColor: "gray-800" }, defaultMessage)), h("zonos-v-stack", { spacing: 8 }, this.restrictedItems.map(item => {
+            ]), ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (h("div", null, h("div", { class: "zonos--hello-dialog-content" }, h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close Zonos Hello dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), h("zonos-v-stack", { spacing: 24 }, h("zonos-country-flag", { class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { type: "boldSubheader" }, welcomeMessage), h("zonos-text", { innerHTML: defaultMessage, textColor: "gray-800" })), h("zonos-v-stack", { spacing: 8 }, this.restrictedItems.map(item => {
             var _a;
             return item && (h("zonos-banner", { bannerTitle: item.name, intent: "error" }, (_a = item.itemRestrictions) === null || _a === void 0 ? void 0 : _a.map(x => (h("zonos-text", { textColor: "red-800" }, x === null || x === void 0 ? void 0 : x.note)))));
         }), h("zonos-card", { spacing: "12px" }, h("zonos-v-stack", { spacing: 12 }, h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Duty de minimis", content: BagIcon }), h("zonos-text", null, dutyDeMinimisMessage)), h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Tax de minimis", content: MoneyIcon }), h("zonos-text", null, taxDeMinimisMessage)))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), h("zonos-hello-dialog-footer", { appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", null, h("zonos-country-select", { handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", null, h("zonos-language-select", { handleOnClose: () => this.setShowLanguageSelect(false) }))))));