@zonos/elements 1.3.7-alpha.0 → 1.3.7

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

@@ -3,13 +3,133 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-72767498.js');
-const cart = require('./cart-ecc80eb0.js');
-const zonosStore = require('./zonosStore-49d4c92a.js');
+const cart = require('./cart-eee85bda.js');
+const zonosStore = require('./zonosStore-138c5555.js');
+const submitGtag = require('./submitGtag-a2e1f652.js');
 const isCheckoutMobile = require('./isCheckoutMobile-f491ca7c.js');
 const classes = require('./classes-b7918f56.js');
-const getBorderRadius = require('./getBorderRadius-834c321d.js');
-const isDarkColor = require('./isDarkColor-924e6a7a.js');
-const submitGtag = require('./submitGtag-907e71d3.js');
+const getBorderRadius = require('./getBorderRadius-d8f18958.js');
+const isDarkColor = require('./isDarkColor-57860b44.js');
+
+const isShippableCountry = (showLog = true) => {
+    if (!cart.localizationStore.localizationLoaded) {
+        return false;
+    }
+    // if localization is loaded and the localization is not a shippable country, keep the original click event
+    if (!cart.localizationStore.isShippableCountry) {
+        if (showLog) {
+            cart.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 = cart.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
+            cart.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
+                cart.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)) {
+                cart.logError('One or more shipping address field is missing', Object.entries(shippingAddress));
+                void submitGtag.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.zonosStore.storeId,
+                    },
+                });
+                return;
+            }
+            // save the shipping address to session storage
+            cart.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>`;
 
@@ -37,19 +157,6 @@ const ZonosCheckout = class {
                 overrideTheme: this.isMobile ? theme : undefined,
             });
         };
-        this.isShippableCountry = (showLog = true) => {
-            if (!cart.localizationStore.localizationLoaded) {
-                return false;
-            }
-            // if localization is loaded and the localization is not a shippable country, keep the original click event
-            if (!cart.localizationStore.isShippableCountry) {
-                if (showLog) {
-                    cart.log(`Checkout: not shippable country`);
-                }
-                return false;
-            }
-            return true;
-        };
         this.getCurrentLocalePageEnum = () => {
             switch (cart.cartStore.step) {
                 case 'customer-info':
@@ -76,6 +183,7 @@ const ZonosCheckout = class {
         this.isMobile = false;
         this.zonosReviewRef = undefined;
         this.storybookPaymentStatusOverride = undefined;
+        this.domesticRedirectedBtnSelector = '#zonos--domestic-redirected-checkout-button';
     }
     /**
      * Init cart info handler event
@@ -121,7 +229,8 @@ const ZonosCheckout = class {
             // 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');
@@ -131,7 +240,7 @@ const ZonosCheckout = class {
             }
             button.addEventListener('click', async (e) => {
                 // do nothing if it's not shippable country
-                if (!this.isShippableCountry()) {
+                if (!isShippableCountry()) {
                     return;
                 }
                 e.preventDefault();
@@ -147,6 +256,7 @@ const ZonosCheckout = class {
                         throw new Error('Error building cart');
                     }
                     submitGtag.submitGtag('zonos-checkout-start');
+                    void submitGtag.trackConversionEvent('checkout_open');
                 }
                 catch (err) {
                     // stop loading
@@ -161,6 +271,14 @@ const ZonosCheckout = class {
             });
             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
+                cart.stripeStoreCleanupDomesticShippingSession();
+                // remove the button after it's clicked
+                button.remove();
+            }
         });
     }
     appearanceSettingsOverrideChanged() {
@@ -176,6 +294,25 @@ const ZonosCheckout = class {
     async init() {
         cart.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) {
@@ -184,7 +321,7 @@ const ZonosCheckout = class {
                 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
@@ -279,8 +416,7 @@ const ZonosCheckout = class {
             cart.cartStoreNextStep();
         }
         catch (err) {
-            // eslint-disable-next-line no-console
-            console.error(err);
+            cart.logError(err);
             this.paymentError = true;
         }
         this.submitLoading = false;

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

@@ -22,7 +22,7 @@ const ZonosComponent = class {
         return format(this.first, this.middle, this.last);
     }
     render() {
-        return index.h("div", { key: 'cf376a9b1970bd04cdadf820112c081666c8bef2' }, "Hello, World! I'm ", this.getText());
+        return index.h("div", { key: '3b7429a0c03b00f0a80e15a94bebd08aedaafe51' }, "Hello, World! I'm ", this.getText());
     }
 };
 ZonosComponent.style = ZonosComponentStyle0;

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

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-72767498.js');
-const cart = require('./cart-ecc80eb0.js');
-const zonosStore = require('./zonosStore-49d4c92a.js');
-require('./isDarkColor-924e6a7a.js');
-require('./getBorderRadius-834c321d.js');
+const cart = require('./cart-eee85bda.js');
+const zonosStore = require('./zonosStore-138c5555.js');
+require('./isDarkColor-57860b44.js');
+require('./getBorderRadius-d8f18958.js');
 
 const getZonosSettings = async () => {
     const url = `${"https://v1.route.js.zonos.com"}/api/zonos-elements/zonos-settings`;
@@ -39,13 +39,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;
@@ -54,9 +57,26 @@ const initHello = async (helloSettings) => {
         cart.logError(`Selector anchorElementSelector "${helloSettings.anchorElementSelector}" is not a valid selector.`);
         return;
     }
-    const triggerElement = document.querySelector(anchorElementSelector);
     cart.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}";
@@ -74,7 +94,6 @@ const ZonosController = class {
      */
     async initCheckoutElement(stripe) {
         if (!stripe) {
-            // eslint-disable-next-line no-console
             cart.log('Stripe is not loaded yet - cannot init checkout element', 'warn');
             return;
         }
@@ -210,7 +229,7 @@ const ZonosController = class {
         zonosStore.zonosStore.organizationName = organizationName;
     }
     render() {
-        return index.h(index.Host, { key: '5650218b8eef4246ff1b131fcd1a06319800c2e3', class: "zonos--elements" });
+        return index.h(index.Host, { key: '0b734aaa82bd08277fb3a2694197b13242a4d0a6', class: "zonos--elements" });
     }
 };
 ZonosController.style = ZonosControllerStyle0;

package/dist/cjs/zonos-country-flag.cjs.entry.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-72767498.js');
-const cart = require('./cart-ecc80eb0.js');
-const zonosStore = require('./zonosStore-49d4c92a.js');
+const cart = require('./cart-eee85bda.js');
+const zonosStore = require('./zonosStore-138c5555.js');
 const classes = require('./classes-b7918f56.js');
-require('./isDarkColor-924e6a7a.js');
-require('./getBorderRadius-834c321d.js');
+require('./isDarkColor-57860b44.js');
+require('./getBorderRadius-d8f18958.js');
 
 const zonosCountryFlagCss = ":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{display:-ms-inline-flexbox;display:inline-flex}:host .flag-container{position:relative;overflow:hidden;width:100%;height:100%}:host .flag-icon{position:absolute;top:0;left:0;width:100%;height:100%;background-position:center;background-repeat:no-repeat;background-size:cover}";
 const ZonosCountryFlagStyle0 = zonosCountryFlagCss;

package/dist/cjs/zonos-country-select_3.cjs.entry.js

@@ -3,11 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-72767498.js');
-const cart = require('./cart-ecc80eb0.js');
-const zonosStore = require('./zonosStore-49d4c92a.js');
-const isDarkColor = require('./isDarkColor-924e6a7a.js');
+const cart = require('./cart-eee85bda.js');
+const zonosStore = require('./zonosStore-138c5555.js');
+const formatStringWithLinks = require('./formatStringWithLinks-52341fc7.js');
+const isDarkColor = require('./isDarkColor-57860b44.js');
 const ILanguage = require('./ILanguage-d247b45b.js');
-require('./getBorderRadius-834c321d.js');
+require('./getBorderRadius-d8f18958.js');
 
 /**
  * Fuse.js v6.6.2 - Lightweight fuzzy-search (http://fusejs.io)
@@ -1812,6 +1813,11 @@ const ZonosCountrySelect = class {
         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 } = cart.localizationStore;
         const countries = shippingZoneCountries
@@ -1824,10 +1830,11 @@ const ZonosCountrySelect = class {
         const filteredCountries = this.inputValue
             ? fuseObject.map(country => country.item)
             : countries.sort((a, b) => a.displayName.localeCompare(b.displayName));
-        return (index.h(index.Host, { key: 'fb1115a06814daaf8ebb7d9e282fdd1bd944121f', class: "zonos--elements", style: {
+        return (index.h(index.Host, { key: '2b8e15643f92ac489706aff7623b1d1efdebce70', class: "zonos--elements", style: {
                 '--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: 'eb9eb7dba8f170c6190fd29e670b002ecb39a849', class: "zonos--country-select" }, index.h("zonos-v-stack", { key: '4667474f03efbad9fbb0ea4153d16b49a7f2803f', class: "zonos--country-select-header", spacing: 8 }, index.h("zonos-select-dialog-header", { key: 'c2777f838d9d376878e1218868ed8df0d28dc5f2', handleOnClose: () => this.handleOnClose(), label: "Select a country" }, index.h("input", { key: '1e41b3888bce97a94ff88c4b3b3389cc8d4de096', class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Search countries", value: this.inputValue }))), index.h("div", { key: 'ba89ae931e2a0e564112d9989d8074674906a297', class: "zonos--country-select-content" }, filteredCountries.map(country => (index.h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, index.h("zonos-country-flag", { class: "zonos--country-flag", countryCode: country.code }), index.h("zonos-text", { color: "gray-800" }, country.displayName), country.code === cart.localizationStore.selectedCountryCode && (index.h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 20 })))))))));
+            } }, index.h("div", { key: '06b0c7765d8144ca102c9033e74cf1edb14743ac', class: "zonos--country-select" }, index.h("zonos-v-stack", { key: 'f2af99575f518acb753448f7cb1f7aecd790de9d', class: "zonos--country-select-header", spacing: 8 }, index.h("zonos-select-dialog-header", { key: '296b92c476439aace00f6817b452a3fd3e1d353d', handleOnClose: () => this.handleOnClose(), label: "Select a country" }, index.h("input", { key: 'd988b856392f88a66bcc3016ccf55107bda4a411', class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Search countries", value: this.inputValue }))), index.h("div", { key: '4376bec824141dd7d2dbfb84f465ac4a48e1d050', class: "zonos--country-select-content" }, filteredCountries.map(country => (index.h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, index.h("zonos-country-flag", { class: "zonos--country-flag", countryCode: country.code }), index.h("zonos-text", { textColor: "gray-800" }, country.displayName), country.code === cart.localizationStore.selectedCountryCode && (index.h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 20 })))))))));
     }
+    get ele() { return index.getElement(this); }
 };
 ZonosCountrySelect.style = ZonosCountrySelectStyle0;
 
@@ -1841,9 +1848,10 @@ const ZonosCustomMessage = class {
         this.message = '';
     }
     render() {
-        return (index.h(index.Host, { key: '6c16aa29406415995c2289c2fe3d22dbe08fbd23', class: "zonos--elements", style: {
+        const messageWithLinks = formatStringWithLinks.formatStringWithLinks(this.message);
+        return (index.h(index.Host, { key: '73091a3267f0989e8820800054aebc75168dc5d6', class: "zonos--elements", style: {
                 '--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, this.message && (index.h("zonos-card", { class: "zonos--custom-message", spacing: "12px" }, index.h("div", { class: "zonos--flex-message" }, index.h("zonos-icon", { "aria-label": "Custom message", content: this.icon }), index.h("zonos-text", null, this.message))))));
+            } }, this.message && (index.h("zonos-card", { class: "zonos--custom-message", spacing: "12px" }, index.h("div", { class: "zonos--flex-message" }, index.h("zonos-icon", { "aria-label": "Custom message icon", content: this.icon }), index.h("zonos-text", { innerHTML: messageWithLinks }))))));
     }
 };
 ZonosCustomMessage.style = ZonosCustomMessageStyle0;
@@ -1875,9 +1883,9 @@ const ZonosHelloDialogFooter = class {
         const primaryColor = (_a = this.appearanceSettings) === null || _a === void 0 ? void 0 : _a.colorPrimary;
         const footerTheme = primaryColor && isDarkColor.isDarkColor(primaryColor) ? 'DARK' : 'LIGHT';
         const language = (_b = ILanguage.languages.find(x => x.code === cart.localizationStore.selectedLocale)) === null || _b === void 0 ? void 0 : _b.translatedLabel;
-        return (index.h(index.Host, { key: 'a3a6ab0e4af4981cc83802be1433c3c41da58c19', class: "zonos--elements" }, index.h("div", { key: 'fdea45d1b4d83055a3d17918a5ae78f43a7e0042', class: "zonos--hello-dialog-footer", "data-theme": footerTheme, style: {
+        return (index.h(index.Host, { key: 'f97688788d9f6d1a640f054a2a22dbae6955b83c', class: "zonos--elements" }, index.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,
-            } }, index.h("a", { key: '4d4e995052049238d4c522ff8501dddbe25e29d5', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, index.h("zonos-icon", { key: '4ca16c024473660f74cfc7a3d506b8ba4ebf7362', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: "gray-1200", size: 108 })), index.h("div", { key: 'dd1da686f8345431c3805898f374e5fb22e27289', class: "zonos--hello-locale-wrapper" }, index.h("zonos-button", { key: 'd5c34c75c5006710ff6d0426d43f07a5ade41827', buttonColor: "gray-1200", icon: index.h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: "gray-1200" }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), index.h("zonos-button", { key: '43759ce87473b10e078f14dce529db502a5edd4d', buttonColor: "gray-1200", icon: index.h("zonos-country-flag", { "aria-label": "Open country select", class: "zonos--footer-country-flag", countryCode: cart.localizationStore.selectedCountryCode }), onClick: () => this.setShowCountrySelect(true), variant: "subtle" }, cart.localizationStore.selectedCountryCode)))));
+            } }, index.h("a", { key: '5e30052240f87211c6f0092ef6a27c217f3ecefb', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, index.h("zonos-icon", { key: 'c60142bcd26086c2944ac3464885ca1f96e5cfbe', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: "gray-1200", size: 108 })), index.h("div", { key: '67297b4c557ee5b49a4406a459588f2924183195', class: "zonos--hello-locale-wrapper" }, index.h("zonos-button", { key: '9348bff826187730f36d191f7e01f516f2b9785c', buttonColor: "gray-1200", icon: index.h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: "gray-1200" }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), index.h("zonos-button", { key: 'ecf1a8639e8e92a07a0e774abb560de53c19587c', buttonColor: "gray-1200", icon: index.h("zonos-country-flag", { "aria-label": "Open country select", class: "zonos--footer-country-flag", countryCode: cart.localizationStore.selectedCountryCode }), onClick: () => this.setShowCountrySelect(true), variant: "subtle" }, cart.localizationStore.selectedCountryCode)))));
     }
 };
 ZonosHelloDialogFooter.style = ZonosHelloDialogFooterStyle0;

package/dist/cjs/zonos-elements.cjs.js

@@ -19,7 +19,7 @@ const patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["zonos-checkout.cjs",[[2,"zonos-checkout",{"appearanceSettingsOverride":[16],"preview":[4],"mobile":[4],"defaultAddress":[16],"forceDialogOpen":[4,"force-dialog-open"],"open":[32],"stripe":[32],"submitLoading":[32],"paymentError":[32],"collapseReviewMobile":[32],"isAttachError":[32],"isMobile":[32],"zonosReviewRef":[32],"storybookPaymentStatusOverride":[32],"closeDialogHandler":[64],"init":[64],"setToFinishStep":[64]},[[16,"zonos--init-cart-info","initCartInfoHandler"],[9,"resize","handleWindowResize"]],{"appearanceSettingsOverride":["appearanceSettingsOverrideChanged"],"mobile":["handleMobileChange"]}]]],["zonos-hello.cjs",[[1,"zonos-hello",{"mobileLocationOverride":[1,"mobile-location-override"],"animateFromLeftOverride":[4,"animate-from-left-override"],"appearanceSettingsOverride":[16],"showPeekMessage":[32],"zonosStoreHelloSettings":[32],"showDialog":[32],"peekMessage":[32],"initialUrl":[32],"allRestrictedItems":[32],"allFoundProducts":[32],"productsOnPage":[32],"displayCurrency":[64],"convertAndFormat":[64],"convert":[64],"format":[64]},[[9,"resize","handleResize"]]]]],["zonos-controller.cjs",[[1,"zonos-controller",{"config":[16],"zonosApiKey":[1,"zonos-api-key"],"initCheckoutElement":[64],"setupGoogleFont":[64],"showNotification":[64],"overrideConfig":[64],"overrideCountry":[64],"getAppearanceSetting":[64],"updateOrganizationName":[64]}]]],["zonos-component.cjs",[[1,"zonos-component",{"first":[1],"middle":[1],"last":[1]}]]],["zonos-logo.cjs",[[1,"zonos-logo",{"theme":[1],"width":[1]}]]],["zonos-payment.cjs",[[2,"zonos-payment",{"titleText":[1,"title-text"],"stripe":[32],"stripeElements":[32]},null,{"stripeElements":["watchInitStripe"],"stripe":["watchInitStripe"]}]]],["zonos-shipping-rich-radio.cjs",[[1,"zonos-shipping-rich-radio",{"items":[16],"borderColor":[1,"border-color"],"borderStyle":[1,"border-style"],"theme":[1],"selectedItem":[32]}]]],["zonos-country-flag.cjs",[[1,"zonos-country-flag",{"countryCode":[1,"country-code"],"size":[2]}]]],["zonos-text.cjs",[[1,"zonos-text",{"textColor":[1,"text-color"],"size":[1],"type":[1],"weight":[2],"content":[1],"ready":[32]}]]],["zonos-button_3.cjs",[[1,"zonos-button",{"buttonColor":[1,"button-color"],"backgroundColor":[1,"background-color"],"borderStyle":[1,"border-style"],"isDisabled":[4,"is-disabled"],"icon":[16],"iconRight":[4,"icon-right"],"size":[1],"variant":[1],"noBackground":[4,"no-background"],"noPaddingLeft":[4,"no-padding-left"],"noPaddingRight":[4,"no-padding-right"],"loading":[4],"theme":[1],"hasIcon":[32],"hasContent":[32]},[[2,"click","clickHandler"]],{"icon":["iconChangeHandler"]}],[1,"zonos-icon",{"autoHeight":[4,"auto-height"],"iconColor":[1,"icon-color"],"content":[1],"size":[2]}],[1,"zonos-spinner",{"size":[2],"spinnerColor":[1,"spinner-color"]}]]],["zonos-select-dialog-header_2.cjs",[[1,"zonos-select-dialog-header",{"handleOnClose":[16],"label":[1]}],[1,"zonos-v-stack",{"spacing":[2]}]]],["zonos-country-select_3.cjs",[[1,"zonos-country-select",{"handleOnClose":[16],"inputValue":[32]}],[1,"zonos-hello-dialog-footer",{"appearanceSettings":[16],"setShowCountrySelect":[16],"setShowLanguageSelect":[16]}],[1,"zonos-custom-message",{"icon":[1],"message":[1]}]]],["zonos-hello-dialog.cjs",[[1,"zonos-hello-dialog",{"isOpen":[4,"is-open"],"setIsOpen":[16],"mobileLocationOverride":[1,"mobile-location-override"],"animateFromLeftOverride":[4,"animate-from-left-override"],"appearanceSettings":[16],"restrictedItems":[16],"welcomeMessage":[32],"showCountrySelect":[32],"showLanguageSelect":[32]},[[4,"click","globalClickHandler"]],{"isOpen":["isOpenHandler"]}]]],["zonos-notification.cjs",[[1,"zonos-notification",{"notificationArray":[32],"showNotification":[64]}]]],["zonos-badge_2.cjs",[[1,"zonos-badge",{"bold":[4],"badgeColor":[1,"badge-color"],"icon":[16],"iconRight":[4,"icon-right"],"size":[1],"rounded":[4]}],[1,"zonos-tooltip",{"label":[1],"subtitle":[1],"showTooltip":[32]}]]],["zonos-banner.cjs",[[1,"zonos-banner",{"bannerTitle":[1,"banner-title"],"intent":[1],"hasContent":[32]}]]],["zonos-card_2.cjs",[[1,"zonos-language-select",{"handleOnClose":[16]}],[1,"zonos-card",{"actions":[16],"footerActions":[16],"footerContent":[16],"footerHeight":[2,"footer-height"],"label":[16],"spacing":[1]}]]],["zonos-address_4.cjs",[[2,"zonos-address",{"type":[1],"titleText":[1,"title-text"],"defaultAddress":[16],"stripe":[32],"isDirtyAddress":[32]},null,{"stripe":["watchInitStripe"]}],[1,"zonos-checkbox",{"backgroundColor":[1,"background-color"],"label":[1],"isChecked":[4,"is-checked"],"isDisabled":[4,"is-disabled"],"size":[2],"fontSize":[1,"font-size"],"borderStyle":[1,"border-style"]}],[2,"zonos-link-authentication",{"titleText":[1,"title-text"],"stripe":[32]},null,{"stripe":["watchInitStripe"]}],[1,"zonos-collapse",{"collapsed":[4],"collapseSize":[2,"collapse-size"],"height":[32]}]]],["zonos-cart-items_9.cjs",[[1,"zonos-checkout-footer",{"showDialog":[32]},[[4,"click","handleGlobalClick"]]],[2,"zonos-customer-info",{"continueLoading":[4,"continue-loading"],"submitBtnType":[1,"submit-btn-type"],"submitBtnColor":[1,"submit-btn-color"],"defaultAddress":[16],"disabled":[32]},null,{"disabled":["watchFormComplete"]}],[2,"zonos-checkout-payment",{"paymentError":[4,"payment-error"],"submitBtnType":[1,"submit-btn-type"],"continueLoading":[4,"continue-loading"],"submitBtnColor":[1,"submit-btn-color"],"disabled":[32]},null,{"disabled":["watchFormComplete"]}],[2,"zonos-shipping",{"continueLoading":[4,"continue-loading"],"submitBtnColor":[1,"submit-btn-color"],"submitBtnType":[1,"submit-btn-type"],"selectedShippingMethod":[32],"disabled":[32]},null,{"disabled":["watchFormComplete"]}],[1,"zonos-cart-subtotal"],[1,"zonos-checkout-finish",{"borderRadius":[1,"border-radius"],"storybookForceStatus":[1,"storybook-force-status"],"overrideNotification":[16],"isLoading":[32],"notificationType":[32],"notificationTitle":[32],"notificationMessages":[32],"order":[32]}],[1,"zonos-dialog",{"open":[4],"headerText":[1,"header-text"],"width":[1],"height":[1],"noHeader":[4,"no-header"],"noBodyPadding":[4,"no-body-padding"],"noBorder":[4,"no-border"],"footerRightAction":[16],"borderStyle":[1,"border-style"],"noCloseButton":[4,"no-close-button"],"noClickOutside":[4,"no-click-outside"],"mobile":[4],"isLoading":[4,"is-loading"],"isMobile":[32]},[[9,"resize","handleWindowResize"]]],[1,"zonos-review",{"mobile":[4],"collapsed":[4],"isMobile":[32]},[[9,"resize","handleWindowResize"]]],[1,"zonos-cart-items",{"errorImages":[32]}]]]], options);
+  return index.bootstrapLazy([["zonos-checkout.cjs",[[2,"zonos-checkout",{"appearanceSettingsOverride":[16],"preview":[4],"mobile":[4],"defaultAddress":[16],"forceDialogOpen":[4,"force-dialog-open"],"open":[32],"stripe":[32],"submitLoading":[32],"paymentError":[32],"collapseReviewMobile":[32],"isAttachError":[32],"isMobile":[32],"zonosReviewRef":[32],"storybookPaymentStatusOverride":[32],"domesticRedirectedBtnSelector":[32],"closeDialogHandler":[64],"init":[64],"setToFinishStep":[64]},[[16,"zonos--init-cart-info","initCartInfoHandler"],[9,"resize","handleWindowResize"]],{"appearanceSettingsOverride":["appearanceSettingsOverrideChanged"],"mobile":["handleMobileChange"]}]]],["zonos-hello.cjs",[[1,"zonos-hello",{"mobileLocationOverride":[1,"mobile-location-override"],"animateFromLeftOverride":[4,"animate-from-left-override"],"appearanceSettingsOverride":[16],"showPeekMessage":[32],"zonosStoreHelloSettings":[32],"showDialog":[32],"peekMessage":[32],"initialUrl":[32],"allRestrictedItems":[32],"allFoundProducts":[32],"productsOnPage":[32],"displayCurrency":[64],"convertAndFormat":[64],"convert":[64],"format":[64],"openHelloDialog":[64]},[[9,"resize","handleResize"]]]]],["zonos-controller.cjs",[[1,"zonos-controller",{"config":[16],"zonosApiKey":[1,"zonos-api-key"],"initCheckoutElement":[64],"setupGoogleFont":[64],"showNotification":[64],"overrideConfig":[64],"overrideCountry":[64],"getAppearanceSetting":[64],"updateOrganizationName":[64]}]]],["zonos-component.cjs",[[1,"zonos-component",{"first":[1],"middle":[1],"last":[1]}]]],["zonos-link.cjs",[[1,"zonos-link",{"href":[1],"rel":[1],"target":[1],"linkTitle":[1,"link-title"]}]]],["zonos-logo.cjs",[[1,"zonos-logo",{"theme":[1],"width":[1]}]]],["zonos-text.cjs",[[1,"zonos-text",{"textColor":[1,"text-color"],"size":[1],"type":[1],"weight":[2],"content":[1],"ready":[32]}]]],["zonos-hello-dialog.cjs",[[1,"zonos-hello-dialog",{"isOpen":[4,"is-open"],"setIsOpen":[16],"mobileLocationOverride":[1,"mobile-location-override"],"animateFromLeftOverride":[4,"animate-from-left-override"],"appearanceSettings":[16],"restrictedItems":[16],"welcomeMessage":[32],"showCountrySelect":[32],"showLanguageSelect":[32]},[[4,"click","globalClickHandler"]],{"isOpen":["isOpenHandler"]}]]],["zonos-notification.cjs",[[1,"zonos-notification",{"notificationArray":[32],"showNotification":[64]}]]],["zonos-payment.cjs",[[2,"zonos-payment",{"titleText":[1,"title-text"],"stripe":[32],"stripeElements":[32]},null,{"stripeElements":["watchInitStripe"],"stripe":["watchInitStripe"]}]]],["zonos-shipping-rich-radio.cjs",[[1,"zonos-shipping-rich-radio",{"items":[16],"borderColor":[1,"border-color"],"borderStyle":[1,"border-style"],"theme":[1],"selectedItem":[32]}]]],["zonos-badge_2.cjs",[[1,"zonos-badge",{"bold":[4],"badgeColor":[1,"badge-color"],"icon":[16],"iconRight":[4,"icon-right"],"size":[1],"rounded":[4]}],[1,"zonos-tooltip",{"label":[1],"subtitle":[1],"showTooltip":[32]}]]],["zonos-country-flag.cjs",[[1,"zonos-country-flag",{"countryCode":[1,"country-code"],"size":[2]}]]],["zonos-banner.cjs",[[1,"zonos-banner",{"bannerTitle":[1,"banner-title"],"intent":[1],"hasContent":[32]}]]],["zonos-button_3.cjs",[[1,"zonos-button",{"buttonColor":[1,"button-color"],"backgroundColor":[1,"background-color"],"borderStyle":[1,"border-style"],"isDisabled":[4,"is-disabled"],"icon":[16],"iconRight":[4,"icon-right"],"size":[1],"variant":[1],"noBackground":[4,"no-background"],"noPaddingLeft":[4,"no-padding-left"],"noPaddingRight":[4,"no-padding-right"],"loading":[4],"theme":[1],"hasIcon":[32],"hasContent":[32]},[[2,"click","clickHandler"]],{"icon":["iconChangeHandler"]}],[1,"zonos-icon",{"autoHeight":[4,"auto-height"],"iconColor":[1,"icon-color"],"content":[1],"size":[2]}],[1,"zonos-spinner",{"size":[2],"spinnerColor":[1,"spinner-color"]}]]],["zonos-select-dialog-header_2.cjs",[[1,"zonos-select-dialog-header",{"handleOnClose":[16],"label":[1]}],[1,"zonos-v-stack",{"spacing":[2]}]]],["zonos-card_2.cjs",[[1,"zonos-language-select",{"handleOnClose":[16]}],[1,"zonos-card",{"actions":[16],"footerActions":[16],"footerContent":[16],"footerHeight":[2,"footer-height"],"label":[16],"spacing":[1]}]]],["zonos-country-select_3.cjs",[[1,"zonos-country-select",{"handleOnClose":[16],"inputValue":[32]}],[1,"zonos-hello-dialog-footer",{"appearanceSettings":[16],"setShowCountrySelect":[16],"setShowLanguageSelect":[16]}],[1,"zonos-custom-message",{"icon":[1],"message":[1]}]]],["zonos-address_4.cjs",[[2,"zonos-address",{"type":[1],"titleText":[1,"title-text"],"defaultAddress":[16],"stripe":[32],"isDirtyAddress":[32]},null,{"stripe":["watchInitStripe"]}],[1,"zonos-checkbox",{"backgroundColor":[1,"background-color"],"label":[1],"isChecked":[4,"is-checked"],"isDisabled":[4,"is-disabled"],"size":[2],"fontSize":[1,"font-size"],"borderStyle":[1,"border-style"]}],[2,"zonos-link-authentication",{"titleText":[1,"title-text"],"stripe":[32]},null,{"stripe":["watchInitStripe"]}],[1,"zonos-collapse",{"collapsed":[4],"collapseSize":[2,"collapse-size"],"height":[32],"iframe":[32]}]]],["zonos-cart-items_9.cjs",[[1,"zonos-checkout-footer",{"showDialog":[32]},[[4,"click","handleGlobalClick"]]],[2,"zonos-customer-info",{"continueLoading":[4,"continue-loading"],"submitBtnType":[1,"submit-btn-type"],"submitBtnColor":[1,"submit-btn-color"],"defaultAddress":[16],"disabled":[32]},null,{"disabled":["watchFormComplete"]}],[2,"zonos-checkout-payment",{"paymentError":[4,"payment-error"],"submitBtnType":[1,"submit-btn-type"],"continueLoading":[4,"continue-loading"],"submitBtnColor":[1,"submit-btn-color"],"disabled":[32]},null,{"disabled":["watchFormComplete"]}],[2,"zonos-shipping",{"continueLoading":[4,"continue-loading"],"submitBtnColor":[1,"submit-btn-color"],"submitBtnType":[1,"submit-btn-type"],"selectedShippingMethod":[32],"disabled":[32]},null,{"disabled":["watchFormComplete"]}],[1,"zonos-cart-subtotal"],[1,"zonos-checkout-finish",{"borderRadius":[1,"border-radius"],"storybookForceStatus":[1,"storybook-force-status"],"overrideNotification":[16],"isLoading":[32],"notificationType":[32],"notificationTitle":[32],"notificationMessages":[32],"order":[32]}],[1,"zonos-dialog",{"open":[4],"headerText":[1,"header-text"],"width":[1],"height":[1],"noHeader":[4,"no-header"],"noBodyPadding":[4,"no-body-padding"],"noBorder":[4,"no-border"],"footerRightAction":[16],"borderStyle":[1,"border-style"],"noCloseButton":[4,"no-close-button"],"noClickOutside":[4,"no-click-outside"],"mobile":[4],"isLoading":[4,"is-loading"],"isMobile":[32]},[[9,"resize","handleWindowResize"]]],[1,"zonos-review",{"mobile":[4],"collapsed":[4],"isMobile":[32]},[[9,"resize","handleWindowResize"]]],[1,"zonos-cart-items",{"errorImages":[32]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/zonos-hello-dialog.cjs.entry.js

@@ -3,12 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-72767498.js');
-const cart = require('./cart-ecc80eb0.js');
-const zonosStore = require('./zonosStore-49d4c92a.js');
+const cart = require('./cart-eee85bda.js');
+const zonosStore = require('./zonosStore-138c5555.js');
 const classes = require('./classes-b7918f56.js');
+const formatStringWithLinks = require('./formatStringWithLinks-52341fc7.js');
 const getHasMoreSpaceOnRight = require('./getHasMoreSpaceOnRight-4c94667f.js');
-require('./isDarkColor-924e6a7a.js');
-require('./getBorderRadius-834c321d.js');
+require('./isDarkColor-57860b44.js');
+require('./getBorderRadius-d8f18958.js');
 
 const getHasMoreSpaceAbove = (ref) => {
     const componentRect = ref.getBoundingClientRect();
@@ -116,18 +117,19 @@ const ZonosHelloDialog = class {
         const animateFromBottom = this.dialogRef && getHasMoreSpaceAbove(this.dialogRef);
         const { customMessages } = cart.localizationStore;
         const welcomeMessage = `${cart.translate('Welcome to')} ${zonosStore.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) ||
             cart.translate('Know about duties and taxes before you buy. Shop with confidence!');
+        const defaultMessage = formatStringWithLinks.formatStringWithLinks(defaultMessageStr);
         const currentPage = this.getCurrentPageEnum();
         const filteredMessages = customMessages.filter(x => x.pageName === currentPage);
-        return (index.h(index.Host, { key: '303f914b4511500edcd8d041ccfd52f0c48a7a85', class: "zonos--elements" }, index.h("div", { key: 'f52025ee53c0cdbbf20ecbb874e5639194b6507b', "aria-hidden": "true", class: classes.classes([
+        return (index.h(index.Host, { key: 'd5ac86955cf9f9a22e47fe2154dee6e10f6a9361', class: "zonos--elements" }, index.h("div", { key: 'd34dd3f937330cd5fdd2d7a11dc321c215983146', "aria-hidden": "true", class: classes.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 && (index.h("div", null, index.h("div", { class: "zonos--hello-dialog-content" }, index.h("zonos-button", { class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close Zonos Hello dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), index.h("zonos-v-stack", { spacing: 24 }, index.h("zonos-country-flag", { class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), index.h("zonos-v-stack", { class: "zonos--hello-dialog-header", spacing: 4 }, index.h("zonos-text", { type: "boldSubheader" }, welcomeMessage), index.h("zonos-text", { textColor: "gray-800" }, defaultMessage)), index.h("zonos-v-stack", { spacing: 8 }, this.restrictedItems.map(item => {
+            ]), ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (index.h("div", null, index.h("div", { class: "zonos--hello-dialog-content" }, index.h("zonos-button", { class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close Zonos Hello dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), index.h("zonos-v-stack", { spacing: 24 }, index.h("zonos-country-flag", { class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), index.h("zonos-v-stack", { class: "zonos--hello-dialog-header", spacing: 4 }, index.h("zonos-text", { type: "boldSubheader" }, welcomeMessage), index.h("zonos-text", { innerHTML: defaultMessage, textColor: "gray-800" })), index.h("zonos-v-stack", { spacing: 8 }, this.restrictedItems.map(item => {
             var _a;
             return item && (index.h("zonos-banner", { bannerTitle: item.name, intent: "error" }, (_a = item.itemRestrictions) === null || _a === void 0 ? void 0 : _a.map(x => (index.h("zonos-text", { textColor: "red-800" }, x === null || x === void 0 ? void 0 : x.note)))));
         }), index.h("zonos-card", { spacing: "12px" }, index.h("zonos-v-stack", { spacing: 12 }, index.h("div", { class: "zonos--flex-message" }, index.h("zonos-icon", { "aria-label": "Duty de minimis", content: BagIcon }), index.h("zonos-text", null, dutyDeMinimisMessage)), index.h("div", { class: "zonos--flex-message" }, index.h("zonos-icon", { "aria-label": "Tax de minimis", content: MoneyIcon }), index.h("zonos-text", null, taxDeMinimisMessage)))), filteredMessages.map(x => (index.h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), index.h("zonos-hello-dialog-footer", { appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (index.h("div", null, index.h("zonos-country-select", { handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (index.h("div", null, index.h("zonos-language-select", { handleOnClose: () => this.setShowLanguageSelect(false) }))))));

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

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-72767498.js');
-const zonosStore = require('./zonosStore-49d4c92a.js');
-const cart = require('./cart-ecc80eb0.js');
+const zonosStore = require('./zonosStore-138c5555.js');
+const cart = require('./cart-eee85bda.js');
 const classes = require('./classes-b7918f56.js');
 const getHasMoreSpaceOnRight = require('./getHasMoreSpaceOnRight-4c94667f.js');
-require('./isDarkColor-924e6a7a.js');
-require('./getBorderRadius-834c321d.js');
+require('./isDarkColor-57860b44.js');
+require('./getBorderRadius-d8f18958.js');
 
 var root = zonosStore._root;
 
@@ -559,7 +559,6 @@ const ZonosHello = class {
         this.reloadHelloData = async () => {
             await this.handleItemRestrictions();
             this.triggerShowPeekMessage();
-            void this.displayCurrency();
         };
         this.handleProductCountChange = debounce_1(() => {
             const { productTitleElementSelector } = zonosStore.zonosStore.helloSettings;
@@ -582,6 +581,14 @@ const ZonosHello = class {
                 subtree: true,
             });
         };
+        this.watchPriceChange = () => {
+            const observer = new MutationObserver(() => void this.displayCurrency());
+            observer.observe(document.body, {
+                attributes: true,
+                childList: true,
+                subtree: true,
+            });
+        };
         this.updateHelloOnPageChange = () => {
             // If the product count changes on the same url (loading more products), update the peek message and item restrictions
             this.watchProductCountChange();
@@ -653,6 +660,7 @@ const ZonosHello = class {
             if (zonosStore.zonosStore.loadedConfig) {
                 this.helloRef.setAttribute('data-zonos-hello-loaded', '');
                 this.updateHelloOnPageChange();
+                this.watchPriceChange();
                 clearInterval(initInterval);
             }
         }, 100);
@@ -663,8 +671,7 @@ const ZonosHello = class {
      */
     async displayCurrency() {
         if (!cart.localizationStore.exchangeRate) {
-            // eslint-disable-next-line no-console
-            console.error('Could not display currency. Exchange rate and format data is not available.');
+            cart.logError('Could not display currency. Exchange rate and format data is not available.');
             return;
         }
         cart.currencyDisplay();
@@ -674,21 +681,28 @@ const ZonosHello = class {
      * @returns string
      */
     async convertAndFormat(value) {
-        cart.currencyConvertAndFormat(value);
+        return cart.currencyConvertAndFormat(value);
     }
     /**
      * This method will convert the currency and return the converted value
      * @returns number
      */
     async convert(value) {
-        cart.currencyConvert(value);
+        return cart.currencyConvert(value);
     }
     /**
      * This method will format the currency and return the formatted string
      * @returns number
      */
     async format(value) {
-        cart.currencyFormat(value);
+        return cart.currencyFormat(value);
+    }
+    /**
+     * This method show the hello dialog
+     * @returns void
+     */
+    async openHelloDialog(value) {
+        this.changeShowDialog(value);
     }
     handleResize() {
         debounce_1(this.render.bind(this), RESIZE_DEBOUNCE_DELAY_MS);
@@ -725,7 +739,7 @@ const ZonosHello = class {
                 !!this.allRestrictedItems.length &&
                     'zonos--hello-has-restrictions',
             ]), onClick: () => {
-                this.changeShowDialog(!this.showDialog);
+                void this.changeShowDialog(!this.showDialog);
             }, onMouseEnter: () => this.enableShowPeekMessage(), onMouseLeave: () => (this.showPeekMessage = false), ref: el => el && (this.helloRef = el) }, index.h("zonos-text", { class: "zonos--hello-message" }, this.peekMessage), selectedCountryCode && (index.h("div", { class: "zonos--hello-country-flag-wrapper" }, index.h("zonos-country-flag", { class: "zonos--hello-country-flag", countryCode: selectedCountryCode })))), index.h("div", { class: classes.classes([
                 'zonos--hello-dialog-wrapper',
                 this.mobileLocationOverride &&