@zonos/elements 1.3.6 → 1.3.7-alpha.1

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

@@ -3,14 +3,133 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-72767498.js');
-const cart = require('./cart-b8bbf22d.js');
-const localization = require('./localization-2c9f5765.js');
-const zonosStore = require('./zonosStore-5d94dabb.js');
+const cart = require('./cart-89d9fff4.js');
+const zonosStore = require('./zonosStore-138c5555.js');
+const submitGtag = require('./submitGtag-24740560.js');
 const isCheckoutMobile = require('./isCheckoutMobile-f491ca7c.js');
 const classes = require('./classes-b7918f56.js');
-const getBorderRadius = require('./getBorderRadius-b252096d.js');
-const isDarkColor = require('./isDarkColor-168002d6.js');
-const submitGtag = require('./submitGtag-792fe45d.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>`;
 
@@ -38,19 +157,6 @@ const ZonosCheckout = class {
                 overrideTheme: this.isMobile ? theme : undefined,
             });
         };
-        this.isShippableCountry = (showLog = true) => {
-            if (!localization.localizationStore.localizationLoaded) {
-                return false;
-            }
-            // if localization is loaded and the localization is not a shippable country, keep the original click event
-            if (!localization.localizationStore.isShippableCountry) {
-                if (showLog) {
-                    localization.log(`Checkout: not shippable country`);
-                }
-                return false;
-            }
-            return true;
-        };
         this.getCurrentLocalePageEnum = () => {
             switch (cart.cartStore.step) {
                 case 'customer-info':
@@ -77,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
@@ -100,14 +207,14 @@ const ZonosCheckout = class {
     }
     async buildCartAndInit() {
         if (zonosStore.zonosStore.checkoutSettings.buildCartDetail) {
-            localization.log('build cart detail');
+            cart.log('build cart detail');
             const cartItems = await zonosStore.zonosStore.checkoutSettings.buildCartDetail();
             await cart.cartStoreUpdateItems(cartItems);
         }
         // if client secret doesn't exist, request a new one.
         if (!cart.stripeStore.clientSecret) {
             const success = await cart.stripeStoreInitCheckoutSession();
-            localization.log(`stripeStoreInitCheckoutSession: ${success}`);
+            cart.log(`stripeStoreInitCheckoutSession: ${success}`);
             if (!success) {
                 return false;
             }
@@ -122,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');
@@ -132,12 +240,12 @@ const ZonosCheckout = class {
             }
             button.addEventListener('click', async (e) => {
                 // do nothing if it's not shippable country
-                if (!this.isShippableCountry()) {
+                if (!isShippableCountry()) {
                     return;
                 }
                 e.preventDefault();
                 e.stopPropagation();
-                localization.log('zonos checkout button clicked');
+                cart.log('zonos checkout button clicked');
                 // start loading
                 cart.stripeStore.isFetchingSession = true;
                 this.open = true;
@@ -148,20 +256,29 @@ const ZonosCheckout = class {
                         throw new Error('Error building cart');
                     }
                     submitGtag.submitGtag('zonos-checkout-start');
+                    void submitGtag.trackConversionEvent('checkout_open');
                 }
                 catch (err) {
                     // stop loading
                     cart.stripeStore.isFetchingSession = false;
                     cart.cartStoreUpdateToErrorState({
                         messages: [
-                            localization.translate("There's been an error creating your checkout session. Please reload and try again or contact support if the error persists"),
+                            cart.translate("There's been an error creating your checkout session. Please reload and try again or contact support if the error persists"),
                         ],
-                        title: localization.translate('Error creating Checkout'),
+                        title: cart.translate('Error creating Checkout'),
                     });
                 }
             });
             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() {
@@ -177,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) {
@@ -185,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
@@ -211,14 +347,14 @@ const ZonosCheckout = class {
             cart.stripeStore.stripe = window.Zonos.stripe;
             this.stripe = window.Zonos.stripe;
             if (!this.stripe) {
-                localization.log('waiting for stripe to be loaded');
+                cart.log('waiting for stripe to be loaded');
                 return;
             }
             if (this.storybookPaymentStatusOverride) {
                 clearInterval(interval);
                 return;
             }
-            localization.log('init checkout');
+            cart.log('init checkout');
             if (this.preview || this.forceDialogOpen) {
                 void this.buildCartAndInit();
             }
@@ -318,18 +454,18 @@ const ZonosCheckout = class {
         this.isMobile = isCheckoutMobile.isCheckoutMobile(this.mobile);
         // apply theme to stripe elements
         void this.applyStripeTheme();
-        localization.log(`mobile: ${this.isMobile}`);
+        cart.log(`mobile: ${this.isMobile}`);
     }
     handleMobileChange() {
         this.isMobile = isCheckoutMobile.isCheckoutMobile(this.mobile);
         // apply theme to stripe elements
         void this.applyStripeTheme();
-        localization.log(`mobile: ${this.isMobile}`);
+        cart.log(`mobile: ${this.isMobile}`);
     }
     componentWillLoad() {
         void this.init();
         this.isMobile = isCheckoutMobile.isCheckoutMobile(this.mobile);
-        localization.log(`mobile: ${this.isMobile}`);
+        cart.log(`mobile: ${this.isMobile}`);
     }
     // do clean up when component is unmounted
     disconnectedCallback() {
@@ -356,12 +492,12 @@ const ZonosCheckout = class {
             : themePrimaryColorBased;
         // only use submit button color if it's on desktop
         const submitButtonColor = !this.isMobile ? colorSecondary : undefined;
-        const { customMessages } = localization.localizationStore;
+        const { customMessages } = cart.localizationStore;
         const defaultMessage = (_a = customMessages.find(x => x.pageName === 'checkout_default')) === null || _a === void 0 ? void 0 : _a.message;
         const localePageEnum = this.getCurrentLocalePageEnum();
         const filteredMessages = customMessages.filter(x => x.pageName === localePageEnum);
         const renderLogo = () => (index.h("div", { class: "zonos--logo" }, logoUrl && (index.h("img", { alt: `${zonosStore.zonosStore.organizationName} logo`, src: logoUrl, width: 100 }))));
-        const renderTopHeader = () => (index.h("zonos-v-stack", null, renderLogo(), filteredMessages.map(x => (index.h("zonos-custom-message", { icon: MessageIcon, message: x.message }))), index.h("div", null, index.h("zonos-button", { class: "zonos--back-button", icon: index.h("zonos-icon", { "aria-label": "Back to previous step", content: LeftArrow }), noBackground: true, noPaddingLeft: true, noPaddingRight: true, onClick: () => this.handleBackClick(), theme: leftSideTheme }, localization.translate('Back')))));
+        const renderTopHeader = () => (index.h("zonos-v-stack", null, renderLogo(), filteredMessages.map(x => (index.h("zonos-custom-message", { icon: MessageIcon, message: x.message }))), index.h("div", null, index.h("zonos-button", { class: "zonos--back-button", icon: index.h("zonos-icon", { "aria-label": "Back to previous step", content: LeftArrow }), noBackground: true, noPaddingLeft: true, noPaddingRight: true, onClick: () => this.handleBackClick(), theme: leftSideTheme }, cart.translate('Back')))));
         const renderContent = () => {
             return (index.h("div", { class: 'zonos--content', style: {
                     '--border-radius': getBorderRadius.getBorderRadius(style),

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,17 +3,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-72767498.js');
-const cart = require('./cart-b8bbf22d.js');
-const localization = require('./localization-2c9f5765.js');
-const zonosStore = require('./zonosStore-5d94dabb.js');
-require('./isDarkColor-168002d6.js');
-require('./getBorderRadius-b252096d.js');
+const cart = require('./cart-89d9fff4.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`;
-    const { errors, json } = await localization.handleFetch(url);
+    const { errors, json } = await cart.handleFetch(url);
     if (errors.length) {
-        localization.logError(`Error occurred when getting zonos settings. If this is not an unauthorized error, it will use user settings or default settings`);
+        cart.logError(`Error occurred when getting zonos settings. If this is not an unauthorized error, it will use user settings or default settings`);
         return { errors, json: null };
     }
     return { errors: [], json };
@@ -33,31 +32,51 @@ const initCheckout = (config) => {
         return;
     }
     // check if checkout button anchor selector user pass in is valid
-    if (!localization.isValidSelector(config.placeOrderButtonSelector)) {
-        localization.logError(`Selector checkoutButtonAnchor "${config.placeOrderButtonSelector}" is not a valid selector`);
+    if (!cart.isValidSelector(config.placeOrderButtonSelector)) {
+        cart.logError(`Selector checkoutButtonAnchor "${config.placeOrderButtonSelector}" is not a valid selector`);
         return;
     }
     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;
     // check if checkout button anchor selector user pass in is valid to setup hello
-    if (!anchorElementSelector || !localization.isValidSelector(anchorElementSelector)) {
-        localization.logError(`Selector anchorElementSelector "${helloSettings.anchorElementSelector}" is not a valid selector.`);
+    if (!anchorElementSelector || !cart.isValidSelector(anchorElementSelector)) {
+        cart.logError(`Selector anchorElementSelector "${helloSettings.anchorElementSelector}" is not a valid selector.`);
         return;
     }
-    const triggerElement = document.querySelector(anchorElementSelector);
-    localization.log('Hello init complete');
-    injectHelloComponent(triggerElement);
+    cart.log('Hello init complete');
+    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}";
@@ -76,12 +95,12 @@ const ZonosController = class {
     async initCheckoutElement(stripe) {
         if (!stripe) {
             // eslint-disable-next-line no-console
-            localization.log('Stripe is not loaded yet - cannot init checkout element', 'warn');
+            cart.log('Stripe is not loaded yet - cannot init checkout element', 'warn');
             return;
         }
         cart.stripeStore.stripe = stripe;
         void initCheckout(zonosStore.zonosStore.checkoutSettings);
-        localization.log('init checkout element');
+        cart.log('init checkout element');
     }
     /**
      * Init zonos notification
@@ -106,13 +125,13 @@ const ZonosController = class {
                 // Do nothing if font is Inter, since we already inject it on start
                 return;
             }
-            localization.log(`[FONT] Just applied Inter , but no need to inject since we already inject Inter on start`, 'warn');
+            cart.log(`[FONT] Just applied Inter , but no need to inject since we already inject Inter on start`, 'warn');
             zonosStore.zonosStore.appearance = Object.assign(Object.assign({}, zonosStore.zonosStore.appearance), { fontFamily: overrideFont });
         }
         const routeUrl = "https://v1.route.js.zonos.com";
-        const { errors, json } = await localization.handleFetch(`${routeUrl}/api/zonos-elements/get-font-detail?family=${fontSelected}`);
+        const { errors, json } = await cart.handleFetch(`${routeUrl}/api/zonos-elements/get-font-detail?family=${fontSelected}`);
         if (errors.length > 0 || !json) {
-            localization.log(`Failed to load font ${fontSelected}`, 'warn');
+            cart.log(`Failed to load font ${fontSelected}`, 'warn');
             return;
         }
         const fontUrl = json.fontUrl;
@@ -121,7 +140,7 @@ const ZonosController = class {
             return;
         }
         // apply override font
-        localization.log(`[FONT] ${overrideFont} font override applied`);
+        cart.log(`[FONT] ${overrideFont} font override applied`);
         zonosStore.zonosStore.appearance = Object.assign(Object.assign({}, zonosStore.zonosStore.appearance), { fontFamily: overrideFont });
     }
     async componentWillLoad() {
@@ -131,7 +150,7 @@ const ZonosController = class {
             var _a, _b;
             const { errors, json } = await getZonosSettings();
             if (((_a = errors[0]) === null || _a === void 0 ? void 0 : _a.type.toString()) === '403') {
-                localization.log('Failed to load zonos settings. This domain may not have access', 'warn');
+                cart.log('Failed to load zonos settings. This domain may not have access', 'warn');
                 return;
             }
             // init zonos notification
@@ -147,28 +166,28 @@ const ZonosController = class {
                 void initHello(zonosStore.zonosStore.helloSettings);
             }
             // init localization store
-            await localization.initLocalizationStore();
+            await cart.initLocalizationStore();
             // checkout init
             const publishableKey = ((_b = json === null || json === void 0 ? void 0 : json.checkoutSettings) === null || _b === void 0 ? void 0 : _b.externalServiceTokens.find(item => item.type === 'STRIPE_PUBLISHABLE_TOKEN')) || null;
             if (!publishableKey || !this.stripeInitEvent) {
-                localization.log('Checkout failed to load -- missing publishable key', 'warn');
+                cart.log('Checkout failed to load -- missing publishable key', 'warn');
                 return;
             }
             if (zonosStore.zonosStore.checkoutSettings.subscriptionStatus === 'INACTIVE') {
-                localization.log('=== Checkout subscription is "INACTIVE" - Cancel initializing for Checkout ===', 'warn');
-                localization.log('zonos controller loaded');
+                cart.log('=== Checkout subscription is "INACTIVE" - Cancel initializing for Checkout ===', 'warn');
+                cart.log('zonos controller loaded');
                 return;
             }
             if (zonosStore.zonosStore.checkoutSettings.visibilityStatus === 'DISABLED') {
-                localization.log('=== Checkout is disabled by store owner ===', 'warn');
-                localization.log('zonos controller loaded');
+                cart.log('=== Checkout is disabled by store owner ===', 'warn');
+                cart.log('zonos controller loaded');
                 return;
             }
             // send publishable key out to load stripe
             this.stripeInitEvent.emit({
                 publishableKey: publishableKey.token,
             });
-            localization.log('zonos controller loaded');
+            cart.log('zonos controller loaded');
         })();
     }
     /**
@@ -177,7 +196,7 @@ const ZonosController = class {
     async showNotification(notification) {
         const notificationElement = document.querySelector('zonos-notification');
         if (!notificationElement) {
-            localization.log('Failed to show notification - zonos-notification not found', 'warn');
+            cart.log('Failed to show notification - zonos-notification not found', 'warn');
             return;
         }
         void notificationElement.showNotification(notification);
@@ -196,7 +215,7 @@ const ZonosController = class {
      * Override country code for storybook
      */
     async overrideCountry(countryCode) {
-        void localization.localizationStoreUpdateSelectedCountryCode(countryCode);
+        void cart.localizationStoreUpdateSelectedCountryCode(countryCode);
     }
     /**
      * Get appearance from setting
@@ -211,7 +230,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: 'a220a3ebe75df167eefc892c59efdcaf05a53601', class: "zonos--elements" });
     }
 };
 ZonosController.style = ZonosControllerStyle0;

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

@@ -3,9 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-72767498.js');
-const localization = require('./localization-2c9f5765.js');
-const zonosStore = require('./zonosStore-5d94dabb.js');
+const cart = require('./cart-89d9fff4.js');
+const zonosStore = require('./zonosStore-138c5555.js');
 const classes = require('./classes-b7918f56.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;
@@ -14,7 +16,7 @@ const FLAG_URL = "https://zonos-store-assets.s3.amazonaws.com/images/elements-fl
 const ZonosCountryFlag = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.countryCode = localization.localizationStore.selectedCountryCode;
+        this.countryCode = cart.localizationStore.selectedCountryCode;
         this.size = undefined;
     }
     render() {

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

@@ -3,10 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-72767498.js');
-const localization = require('./localization-2c9f5765.js');
-const zonosStore = require('./zonosStore-5d94dabb.js');
-const isDarkColor = require('./isDarkColor-168002d6.js');
+const cart = require('./cart-89d9fff4.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-d8f18958.js');
 
 /**
  * Fuse.js v6.6.2 - Lightweight fuzzy-search (http://fusejs.io)
@@ -1801,7 +1803,7 @@ const ZonosCountrySelect = class {
         index.registerInstance(this, hostRef);
         this.countrySelected = (countryCode) => {
             // mutate the selected country code in store
-            void localization.localizationStoreUpdateSelectedCountryCode(countryCode);
+            void cart.localizationStoreUpdateSelectedCountryCode(countryCode);
             this.handleOnClose();
         };
         this.handleInputChange = (event) => {
@@ -1811,8 +1813,13 @@ 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 } = localization.localizationStore;
+        const { shippingZoneCountries } = cart.localizationStore;
         const countries = shippingZoneCountries
             ? Object.values(shippingZoneCountries)
             : [];
@@ -1823,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 === localization.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;
 
@@ -1840,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;
@@ -1873,10 +1882,10 @@ const ZonosHelloDialogFooter = class {
         var _a, _b, _c;
         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 === localization.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: {
+        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: '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: localization.localizationStore.selectedCountryCode }), onClick: () => this.setShowCountrySelect(true), variant: "subtle" }, localization.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;