@zonos/elements 1.3.18-alpha.1 → 1.3.18-alpha.3

package/dist/cjs/{zonos-cart-items_10.cjs.entry.js → zonos-cart-items_11.cjs.entry.js}

@@ -2,17 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-654a6001.js');
-const cart = require('./cart-95209ae8.js');
+const index = require('./index-b071017b.js');
+const cart = require('./cart-5468dfd1.js');
 const classes = require('./classes-b7918f56.js');
-const zonosStore = require('./zonosStore-d8bb0bda.js');
-const submitGtag = require('./submitGtag-9d60f3bb.js');
-const getBorderRadius = require('./getBorderRadius-44b3eca1.js');
+const zonosStore = require('./zonosStore-7c6205ca.js');
+const submitGtag = require('./submitGtag-127a220f.js');
+const getBorderRadius = require('./getBorderRadius-bcb309a8.js');
 const isCheckoutMobile = require('./isCheckoutMobile-f491ca7c.js');
 const ILanguage = require('./ILanguage-d247b45b.js');
-const isDarkColor = require('./isDarkColor-01f45d3f.js');
+const isDarkColor = require('./isDarkColor-b0393089.js');
 const isColorVariable = require('./isColorVariable-6f5a9608.js');
 const containsNonLatinChars = require('./containsNonLatinChars-2be5129b.js');
+require('./logError-4e2f2020.js');
 
 const formatCurrency = ({ amount, currency, showCurrencyText, }) => showCurrencyText
     ? `${new Intl.NumberFormat('en-US', {
@@ -334,11 +335,11 @@ const ZonosCheckoutFinish = class {
         // const totalItems = this.order?.items?.reduce((acc, item) => {
         //   return acc + item.quantity;
         // }, 0);
-        return (index.h(index.Host, { key: '5ff65f7e0c06f41df8aae634bdfc5d6c249066e3', class: "zonos--checkout-finish zonos--elements", style: {
+        return (index.h(index.Host, { key: '1e4627e936e0508761c12d842523adb51d3c797e', class: "zonos--checkout-finish zonos--elements", style: {
                 '--border-radius': getBorderRadius.getBorderRadius({
                     overrideBorderStyle: this.borderRadius,
                 }),
-            } }, this.isLoading && (index.h("div", { key: '90a55566440c372885ecfd0d4ec1ceaca61d5169', class: "loading-wrapper" }, index.h("zonos-spinner", { key: '814fcab377f26107b42d431a9bd89cb415ea2aba' }))), !this.isLoading && (index.h(index.Fragment, null, index.h("div", { key: '5f0af17eadfad44a28b7a3cab861630aab10ea46', class: "zonos--group" }, this.notificationType === 'success' ? (index.h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (index.h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), index.h("zonos-text", { key: 'cb98643270b2faf2522437d653251b7a1b520d8c', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), index.h("zonos-text", { key: '24b040b053da852c0e6d9e76532647d7f4ec3d7a' }, this.notificationMessages.map(message => (index.h(index.Fragment, null, message, index.h("br", null))))), index.h("zonos-button", { key: '664c02f338ef2020fed645c759cfa70fcd1edb97', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, cart.translate('Keep shopping')))))));
+            } }, this.isLoading && (index.h("div", { key: '4d3be87aec252946c5b6fb516c882830232a83e5', class: "loading-wrapper" }, index.h("zonos-spinner", { key: '25e9bafaaebed75582efd936c57121921c8f2f8a' }))), !this.isLoading && (index.h(index.Fragment, null, index.h("div", { key: '49c211db17af433b3936e69722c3c76c9197c170', class: "zonos--group" }, this.notificationType === 'success' ? (index.h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (index.h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), index.h("zonos-text", { key: '4cb90069dcf385886cb9235ee0854d63781e4452', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), index.h("zonos-text", { key: '8e16be3b15d7fba7b697ba9ed41332c9794f3551' }, this.notificationMessages.map(message => (index.h(index.Fragment, null, message, index.h("br", null))))), index.h("zonos-button", { key: 'e1bfacd92d36c303defc464c7eaf10b8853175c1', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, cart.translate('Keep shopping')))))));
     }
     static get assetsDirs() { return ["assets"]; }
 };
@@ -525,23 +526,128 @@ const ZonosCheckoutProgressTabs = class {
                 color: labelSelectedColor,
             })
             : labelSelectedColor;
-        return (index.h(index.Host, { key: '5079903c5c31395bc5c92a4542d1f7ae78dc34b2', class: "zonos--elements", style: {
+        return (index.h(index.Host, { key: '1c51be111b22f45ad33d430dc4d0a250f8e4d911', class: "zonos--elements", style: {
                 '--color': contrastLabelColor,
                 '--progress-percent': this.getTotalSuccessStep(),
-            } }, index.h("div", { key: 'fabfe8836c827910907c4bceb6f99d65492b440b', class: "zonos--tab-wrapper" }, Object.values(cart.cartStore.tabItems).map((tab, index$1) => {
+            } }, index.h("div", { key: '01e24d42123318aa23982e742b5f2053f5b5392d', class: "zonos--tab-wrapper" }, Object.values(cart.cartStore.tabItems).map((tab, index$1) => {
             const isSelected = tab.value === selectedStep;
             return (index.h("button", { class: classes.classes([
                     'zonos--tab-item',
                     tab.value === selectedStep && 'selected',
                     tab.isDone && 'done',
                 ]), disabled: !this.isTabClickable(tab.value), key: tab.value, onClick: () => (cart.cartStore.step = tab.value) }, index.h("div", { class: "zonos--tab-index" }, index.h("zonos-text", { class: "zonos--tab-index-label", textColor: isSelected ? contrastLabelColor : 'gray-1200', type: "label" }, index$1 + 1), index.h("zonos-icon", { class: "zonos--tab-index-done-icon", content: TabCheckmark, iconColor: isSelected ? contrastLabelColor : 'gray-1200' })), index.h("zonos-text", { textColor: isSelected ? contrastLabelColor : 'gray-1200', type: "label" }, cart.translate(tab.label))));
-        })), index.h("div", { key: 'cfb1c57fadb793f5db34d02e48f3fe4c3a93a043', class: "zonos--tab-progress" }, index.h("div", { key: 'd02dd1cc3a5e5b7bc8395038e1cd75cb07104072', class: "zonos--progress-bar-fill" }))));
+        })), index.h("div", { key: '55832cb123f7efa019ccddfe6bd82938d9f02206', class: "zonos--tab-progress" }, index.h("div", { key: '15fd9749c64530f09854a297cbc35fe97d3398e3', class: "zonos--progress-bar-fill" }))));
     }
     static get assetsDirs() { return ["assets"]; }
     get ele() { return index.getElement(this); }
 };
 ZonosCheckoutProgressTabs.style = ZonosCheckoutProgressTabsStyle0;
 
+const ExclamationMarkDuotoneIcon = `<svg color="var(--zonos-elements-red-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" style="display: block;">
+  <path d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Z" data-is-secondary-color="true" fill="var(--zonos-elements-red-400)"></path>
+  <path d="M12.75 9a.75.75 0 0 0-1.5 0v2.5a.75.75 0 0 0 1.5 0V9Zm0 5.5a.75.75 0 0 0-1.5 0v.5a.75.75 0 0 0 1.5 0v-.5Z" fill="currentColor"></path>
+</svg>`;
+
+const HelpDuotoneIcon = `<svg color="var(--zonos-elements-blue-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" style="display: block;">
+  <path d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Z" data-is-secondary-color="true" fill="var(--zonos-elements-blue-400)"></path>
+  <path d="M10.25 10.25a1.75 1.75 0 1 1 2.431 1.613c-.616.26-1.431.885-1.431 1.887a.75.75 0 0 0 1.5 0c0-.053.02-.128.108-.228.092-.104.236-.205.408-.278A3.25 3.25 0 1 0 8.75 10.25a.75.75 0 0 0 1.5 0Zm2.5 5.75a.75.75 0 0 0-1.5 0v.25a.75.75 0 0 0 1.5 0V16Z" fill="currentColor"></path>
+</svg>`;
+
+const WarningDuotoneIcon = `<svg color="var(--zonos-elements-orange-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" style="display: block;">
+  <path d="M14.46 5.492c-1.014-2.027-3.906-2.027-4.92 0L4.276 16.02c-.914 1.83.416 3.98 2.46 3.98h10.528c2.044 0 3.374-2.151 2.46-3.98L14.46 5.492Z" data-is-secondary-color="true" fill="var(--zonos-elements-orange-400)"></path>
+  <path d="M12.75 10a.75.75 0 0 0-1.5 0v2.5a.75.75 0 0 0 1.5 0V10Zm0 5.5a.75.75 0 0 0-1.5 0v.5a.75.75 0 0 0 1.5 0v-.5Z" fill="currentColor"></path>
+</svg>`;
+
+const zonosConfirmDialogCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .zonos--backdrop,:host .zonos--confirm-layout{opacity:0;z-index:-999;visibility:hidden;-webkit-transition:opacity 0.3s, visibility 0.3s;transition:opacity 0.3s, visibility 0.3s}:host .zonos--backdrop{width:100vw;height:100vh;left:0;top:0;background:var(--zonos-elements-backdrop-color);position:fixed}:host .zonos--confirm-layout{width:100vw;height:100vh;left:0;top:0;position:fixed;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;color:var(--zonos-elements-text-color)}:host .zonos--confirm-dialog{position:relative;background:var(--zonos-elements-gray-0);max-width:90vw;max-height:90vh;width:350px;border-radius:var(--border-radius, 10px);outline:none;-webkit-box-shadow:var(--zonos-elements-v3-shadow-xxl);box-shadow:var(--zonos-elements-v3-shadow-xxl);border:var(--zonos-elements-border);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:24px;gap:24px}:host .icon-wrapper{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:40px;width:40px;border-radius:50%;background:var(--zonos-elements-blue-100)}:host .warn .icon-wrapper{background:var(--zonos-elements-orange-100)}:host .danger .icon-wrapper{background:var(--zonos-elements-red-100)}:host .footer{display:-ms-flexbox;display:flex;width:100%;gap:8px}:host .footer zonos-button{-ms-flex:1;flex:1}:host .content{display:-ms-flexbox;display:flex;gap:8px;-ms-flex-direction:column;flex-direction:column}:host .content zonos-text{text-align:center}:host(.open) .zonos--confirm-layout,:host(.open) .zonos--backdrop{visibility:visible}:host(.open) .zonos--backdrop{z-index:10003;opacity:0.65}:host(.open) .zonos--confirm-layout{opacity:1;z-index:10004;-webkit-transform:scale(1);transform:scale(1)}";
+const ZonosConfirmDialogStyle0 = zonosConfirmDialogCss;
+
+const ZonosConfirmDialog = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.confirmClicked = index.createEvent(this, "confirmClicked", 7);
+        this.cancelClicked = index.createEvent(this, "cancelClicked", 7);
+        this.clickOutsideDialogHandler = (event) => {
+            if (event.target === event.currentTarget && !this.noClickOutside) {
+                this.closeDialogHandler();
+            }
+        };
+        this.dialogTitle = cart.translate('Are you sure?');
+        this.dialogIntent = 'info';
+        this.dialogSubtitle = '';
+        this.submitBtnColor = undefined;
+        this.dialogConfirmBtnText = undefined;
+        this.dialogCancelBtnText = undefined;
+        this.isMobile = false;
+        this.dialogOpen = false;
+        this.noClickOutside = false;
+    }
+    handleKeyDown(ev) {
+        if (ev.key === 'Escape') {
+            this.closeDialogHandler();
+        }
+    }
+    focusDialog() {
+        if (this.dialogOpen) {
+            setTimeout(() => {
+                var _a, _b;
+                // Focus on a non tabable element (tabIndex=-1), so we will be able to tab to other tabable elements
+                (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.zonos--backdrop')) === null || _b === void 0 ? void 0 : _b.focus();
+            }, 100);
+        }
+    }
+    confirmDialogHandler() {
+        // Only do the action if the dialog is open
+        if (!this.dialogOpen) {
+            return;
+        }
+        // Emit confirm event
+        this.confirmClicked.emit();
+    }
+    closeDialogHandler() {
+        // Only do the action if the dialog is open
+        if (!this.dialogOpen) {
+            return;
+        }
+        // Emit cancel event
+        this.cancelClicked.emit();
+    }
+    renderIcon() {
+        switch (this.dialogIntent) {
+            case 'info':
+                return (index.h("zonos-icon", { content: HelpDuotoneIcon, iconColor: 'blue-800' }));
+            case 'danger':
+                return (index.h("zonos-icon", { content: ExclamationMarkDuotoneIcon, iconColor: 'red-800' }));
+            case 'warn':
+                return (index.h("zonos-icon", { content: WarningDuotoneIcon, iconColor: 'orange-800' }));
+        }
+    }
+    getButtonConfirmVariant() {
+        switch (this.dialogIntent) {
+            case 'warn':
+                return 'warning';
+            case 'danger':
+                return 'danger';
+            default:
+                return 'primary';
+        }
+    }
+    render() {
+        this.focusDialog();
+        const borderStyle = getBorderRadius.getBorderRadius();
+        // Get theme for the update dialog, inherit from the theme, no from this component theme
+        const theme = zonosStore.getZonosStoreTheme(zonosStore.zonosStore.appearance.theme);
+        return (index.h(index.Host, { key: 'e52030ffc052c699daa87c5b62ee8b44ddad7f7f', class: classes.classes([this.dialogOpen && 'open', 'zonos--elements']), "data-theme": theme, style: {
+                '--border-radius': borderStyle,
+                '--font-family': zonosStore.zonosStoreFontFamily(),
+            } }, index.h("div", { key: 'a34d31946f198b2593f142b582aec18f69fe74c5', class: "zonos--backdrop", tabIndex: -1 }), index.h("div", { key: '2f3dfa27dfbfbc4080eb710dd3db530521b63d36', "aria-hidden": "true", class: classes.classes(['zonos--confirm-layout', this.dialogIntent]), onClick: e => this.clickOutsideDialogHandler(e) }, index.h("div", { key: '8f61424a8899c81f9510deda0adc3ff3e2da102b', class: "zonos--confirm-dialog", onBlur: () => {
+                this.focusDialog();
+            } }, index.h("div", { key: '2fca3f071d7f9d2af628d909770bb12a3acabfe2', class: "wrapper" }, index.h("div", { key: 'fed312e492a9fcac175a9cac7501255aeb975c10', class: "icon-wrapper" }, this.renderIcon()), index.h("div", { key: '131651e201a8d6b2ee9e0c82bd1990bc9a8dc702', class: "content" }, index.h("div", { key: 'a42e1a9271bdfb9fba133e9af330bdb8b16be230', class: "title" }, index.h("zonos-text", { key: '91461b9e572e3eb0e6e8616612cce56cf723678f', type: "subheader" }, this.dialogTitle)), this.dialogSubtitle && (index.h("div", { key: 'fde989f7ef37692173c1476b5cfd98f6cc71bb6e', class: "subtitle" }, index.h("zonos-text", { key: '2e273099ff036b1aa62bba923fff696d1d291867', textColor: "gray-800" }, this.dialogSubtitle)))), index.h("div", { key: '3b7f50adf490388feb759f2e09a626ece5f29c20', class: "footer" }, index.h("zonos-button", { key: '9686f10d831470273543cf3b5217a8e59bb5160a', backgroundColor: "gray-0", class: "cancel-button", onClick: () => this.closeDialogHandler(), size: "lg", withBoxShadow: true }, this.dialogCancelBtnText), index.h("zonos-button", { key: '3781a86d62efe11e8dc08886e3b4ad885c64776a', class: "confirm-button", onClick: () => this.confirmDialogHandler(), size: "lg", variant: this.getButtonConfirmVariant() }, this.dialogConfirmBtnText)))))));
+    }
+    static get assetsDirs() { return ["assets"]; }
+    get el() { return index.getElement(this); }
+};
+ZonosConfirmDialog.style = ZonosConfirmDialogStyle0;
+
 const zonosCustomerInfoCss = ".sc-zonos-customer-info-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-customer-info-h *.sc-zonos-customer-info{font-family:var(--font-family, Inter), Inter}.sc-zonos-customer-info-h img.sc-zonos-customer-info{max-width:100%}.sc-zonos-customer-info-h dl.sc-zonos-customer-info,.sc-zonos-customer-info-h dd.sc-zonos-customer-info,.sc-zonos-customer-info-h h1.sc-zonos-customer-info,.sc-zonos-customer-info-h h2.sc-zonos-customer-info,.sc-zonos-customer-info-h h3.sc-zonos-customer-info,.sc-zonos-customer-info-h h4.sc-zonos-customer-info,.sc-zonos-customer-info-h h5.sc-zonos-customer-info,.sc-zonos-customer-info-h h6.sc-zonos-customer-info,.sc-zonos-customer-info-h hr.sc-zonos-customer-info,.sc-zonos-customer-info-h figure.sc-zonos-customer-info,.sc-zonos-customer-info-h p.sc-zonos-customer-info,.sc-zonos-customer-info-h pre.sc-zonos-customer-info{margin:0}.sc-zonos-customer-info-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-customer-info-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-customer-info-h .zonos--title.sc-zonos-customer-info{margin-bottom:20px}.sc-zonos-customer-info-h .zonos--link-authentication.sc-zonos-customer-info{margin-bottom:32px}.sc-zonos-customer-info-h .zonos--address.sc-zonos-customer-info{margin-bottom:16px}.sc-zonos-customer-info-h .zonos--checkbox.sc-zonos-customer-info{margin-bottom:16px}.sc-zonos-customer-info-h .zonos--checkbox.sc-zonos-customer-info+.zonos--address.sc-zonos-customer-info{margin-bottom:0}.sc-zonos-customer-info-h zonos-button.sc-zonos-customer-info{-webkit-box-shadow:0 0 1px 0 var(--zonos-elements-gray-600);box-shadow:0 0 1px 0 var(--zonos-elements-gray-600)}.sc-zonos-customer-info-h .zonos--error-banner.sc-zonos-customer-info{margin-bottom:16px}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info{margin-bottom:20px;overflow:auto;padding:5px}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar{width:10px}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-track{background:var(--zonos-elements-gray-50)}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-customer-info-h .zonos--group-btn.sc-zonos-customer-info{position:-webkit-sticky;position:sticky;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;bottom:-5px;padding-top:8px;margin-top:12px;background:var(--primary-color, var(--zonos-elements-gray-0))}.sc-zonos-customer-info-h .zonos--group-btn.sc-zonos-customer-info zonos-button.sc-zonos-customer-info{width:100%}";
 const ZonosCustomerInfoStyle0 = zonosCustomerInfoCss;
 
@@ -887,6 +993,7 @@ exports.zonos_checkout_finish = ZonosCheckoutFinish;
 exports.zonos_checkout_footer = ZonosCheckoutFooter;
 exports.zonos_checkout_payment = ZonosCheckoutPayment;
 exports.zonos_checkout_progress_tabs = ZonosCheckoutProgressTabs;
+exports.zonos_confirm_dialog = ZonosConfirmDialog;
 exports.zonos_customer_info = ZonosCustomerInfo;
 exports.zonos_review = ZonosReview;
 exports.zonos_shipping = ZonosShipping;

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

@@ -2,14 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-654a6001.js');
-const cart = require('./cart-95209ae8.js');
-const zonosStore = require('./zonosStore-d8bb0bda.js');
-const submitGtag = require('./submitGtag-9d60f3bb.js');
+const index = require('./index-b071017b.js');
+const cart = require('./cart-5468dfd1.js');
+const zonosStore = require('./zonosStore-7c6205ca.js');
+const submitGtag = require('./submitGtag-127a220f.js');
 const isCheckoutMobile = require('./isCheckoutMobile-f491ca7c.js');
+const logError = require('./logError-4e2f2020.js');
 const classes = require('./classes-b7918f56.js');
-const getBorderRadius = require('./getBorderRadius-44b3eca1.js');
-const isDarkColor = require('./isDarkColor-01f45d3f.js');
+const getBorderRadius = require('./getBorderRadius-bcb309a8.js');
+const isDarkColor = require('./isDarkColor-b0393089.js');
 const RemoveIcon = require('./RemoveIcon-081ac073.js');
 
 /**
@@ -169,7 +170,7 @@ const isShippableCountry = (showLog = true) => {
     if (!cart.localizationStore.isShippableCountry) {
         document.dispatchEvent(submitGtag.createCustomEvent('legacyCheckoutError', 'Unable to initiate checkout process in a country where shipping is not available'));
         if (showLog) {
-            cart.log(`Checkout: not shippable country`);
+            logError.log(`Checkout: not shippable country`);
         }
         return false;
     }
@@ -244,7 +245,7 @@ const watchBigcommerceDomesticCheckout = ({ domesticRedirectedBtnSelector, onShi
                 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));
+                logError.logError('One or more shipping address field is missing', Object.entries(shippingAddress));
                 void submitGtag.sendErrorLog({
                     endpoint: 'No endpoint, domestic checkout form missing fields',
                     errors: [
@@ -337,6 +338,7 @@ const ZonosCheckout = class {
         this.domesticRedirectedBtnSelector = '#zonos--domestic-redirected-checkout-button';
         this.legacyCheckoutHiddenBtnSelector = '#legacy-checkout-hidden-button';
         this.isLegacyCheckout = false;
+        this.confirmDialogOpen = false;
     }
     /**
      * Init cart info handler event
@@ -345,10 +347,27 @@ const ZonosCheckout = class {
         const cartItems = e.detail;
         void cart.cartStoreUpdateItems(cartItems);
     }
+    async handleKeyPress(e) {
+        if (e.key === 'Escape') {
+            void this.closeDialogHandler();
+        }
+    }
     /**
      * Close dialog action
      */
-    async closeDialogHandler() {
+    async closeDialogHandler(props) {
+        var _a, _b;
+        if (!this.open) {
+            // Do nothing if the checkout is not even open
+            return;
+        }
+        // Only proceed when user select confirmed.
+        if (!(props === null || props === void 0 ? void 0 : props.confirmed)) {
+            this.confirmDialogOpen = true;
+            return;
+        }
+        // Close the confirm dialog
+        this.confirmDialogOpen = false;
         submitGtag.submitGtag('zonos-checkout-close');
         this.open = this.forceDialogOpen || false;
         if (!this.preview && cart.cartStore.step === 'finish') {
@@ -359,6 +378,10 @@ const ZonosCheckout = class {
         cart.cartStore.step = 'customer-info';
         // reset the tab item, so that user needs to click on Continue button to re-quote the landed cost if needed.
         cart.cartStoreResetTabItems();
+        /**
+         * Trigger callback when the checkout is closed
+         */
+        (_b = (_a = zonosStore.zonosStore.checkoutSettings).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
     }
     async buildCartAndInit() {
         // if tempCartUUID is provided, use it instead of buildCartDetail
@@ -367,14 +390,14 @@ const ZonosCheckout = class {
             await cart.cartStoreUpdateItems(tempCartData);
         }
         else if (zonosStore.zonosStore.checkoutSettings.buildCartDetail) {
-            cart.log('build cart detail');
+            logError.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();
-            cart.log(`stripeStoreInitCheckoutSession: ${success}`);
+            logError.log(`stripeStoreInitCheckoutSession: ${success}`);
             if (!success) {
                 return false;
             }
@@ -385,7 +408,7 @@ const ZonosCheckout = class {
     }
     attachCheckout() {
         const buttonAnchorSelector = zonosStore.zonosStore.checkoutSettings.placeOrderButtonSelector;
-        cart.log(`attach checkout ${buttonAnchorSelector}`);
+        logError.log(`attach checkout ${buttonAnchorSelector}`);
         if (!buttonAnchorSelector) {
             // do nothing if button element is not found
             return;
@@ -406,7 +429,7 @@ const ZonosCheckout = class {
                 }
                 e.preventDefault();
                 e.stopPropagation();
-                cart.log('zonos checkout button clicked');
+                logError.log('zonos checkout button clicked');
                 // start loading
                 cart.stripeStore.isFetchingSession = true;
                 this.open = true;
@@ -561,14 +584,14 @@ const ZonosCheckout = class {
             cart.stripeStore.stripe = window.Zonos.stripe;
             this.stripe = window.Zonos.stripe;
             if (!this.stripe) {
-                cart.log('waiting for stripe to be loaded');
+                logError.log('waiting for stripe to be loaded');
                 return;
             }
             if (this.storybookPaymentStatusOverride) {
                 clearInterval(interval);
                 return;
             }
-            cart.log('init checkout');
+            logError.log('init checkout');
             if (this.preview || this.forceDialogOpen) {
                 void this.buildCartAndInit();
             }
@@ -630,7 +653,7 @@ const ZonosCheckout = class {
             cart.cartStoreNextStep();
         }
         catch (err) {
-            cart.logError(err);
+            logError.logError(err);
             this.paymentError = true;
         }
         this.submitLoading = false;
@@ -665,13 +688,13 @@ const ZonosCheckout = class {
         this.isMobile = isCheckoutMobile.isCheckoutMobile(this.mobile);
         // apply theme to stripe elements
         void this.applyStripeTheme();
-        cart.log(`mobile: ${this.isMobile}`);
+        logError.log(`mobile: ${this.isMobile}`);
     }
     handleMobileChange() {
         this.isMobile = isCheckoutMobile.isCheckoutMobile(this.mobile);
         // apply theme to stripe elements
         void this.applyStripeTheme();
-        cart.log(`mobile: ${this.isMobile}`);
+        logError.log(`mobile: ${this.isMobile}`);
     }
     handleAppearanceSettingsOverrideChange() {
         var _a;
@@ -690,7 +713,7 @@ const ZonosCheckout = class {
             // Update stripe locale when selected country code is changed
             void this.applyStripeTheme();
         });
-        cart.log(`mobile: ${this.isMobile}`);
+        logError.log(`mobile: ${this.isMobile}`);
     }
     // do clean up when component is unmounted
     disconnectedCallback() {
@@ -763,7 +786,11 @@ const ZonosCheckout = class {
                 hasFooter && 'has-footer',
                 this.preview && 'preview',
                 this.isMobile && 'mobile',
-            ]) }, this.preview ? (renderContent()) : (index.h("zonos-dialog", { borderStyle: style, "data-theme": rightSideTheme, height: "980px", isLoading: dialogLoading, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeDialogHandler(), open: this.open, width: "1200px" }, renderContent()))));
+            ]) }, this.preview ? (renderContent()) : (index.h("zonos-dialog", { borderStyle: style, "data-theme": rightSideTheme, height: "980px", isLoading: dialogLoading, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeDialogHandler(), open: this.open, width: "1200px" }, renderContent())), index.h("zonos-confirm-dialog", { dialogCancelBtnText: cart.translate("Don't close"), dialogConfirmBtnText: cart.translate('Close'), dialogIntent: "warn", dialogOpen: this.confirmDialogOpen, dialogSubtitle: cart.translate('Would you like to close checkout and return to the site?'), dialogTitle: cart.translate('Are you sure?'), onCancelClicked: () => {
+                this.confirmDialogOpen = false;
+            },
+            // Mark user selected confirm to close the dialog
+            onConfirmClicked: () => this.closeDialogHandler({ confirmed: true }) })));
     }
     static get assetsDirs() { return ["assets"]; }
     static get watchers() { return {

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-654a6001.js');
+const index = require('./index-b071017b.js');
 
 function format(first, middle, last) {
     return ((first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : ''));
@@ -22,7 +22,7 @@ const ZonosComponent = class {
         return format(this.first, this.middle, this.last);
     }
     render() {
-        return index.h("div", { key: '589c084e9acc84525aa5db6036d13741ed656e26' }, "Hello, World! I'm ", this.getText());
+        return index.h("div", { key: 'b51f2edddb50f8f6a868da28c73218fe6955d2e5' }, "Hello, World! I'm ", this.getText());
     }
 };
 ZonosComponent.style = ZonosComponentStyle0;

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

@@ -2,17 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-654a6001.js');
-const cart = require('./cart-95209ae8.js');
-const zonosStore = require('./zonosStore-d8bb0bda.js');
-require('./isDarkColor-01f45d3f.js');
-require('./getBorderRadius-44b3eca1.js');
+const index = require('./index-b071017b.js');
+const cart = require('./cart-5468dfd1.js');
+const zonosStore = require('./zonosStore-7c6205ca.js');
+const logError = require('./logError-4e2f2020.js');
+require('./isDarkColor-b0393089.js');
+require('./getBorderRadius-bcb309a8.js');
 
 const getZonosSettings = async () => {
     const url = `${"https://v1.route.js.zonos.com"}/api/zonos-elements/zonos-settings`;
     const { errors, json } = await cart.handleFetch(url);
     if (errors.length) {
-        cart.logError(`Error occurred when getting zonos settings. If this is not an unauthorized error, it will use user settings or default settings`);
+        logError.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,7 +34,7 @@ const initCheckout = (config) => {
     }
     // check if checkout button anchor selector user pass in is valid
     if (!cart.isValidSelector(config.placeOrderButtonSelector)) {
-        cart.logError(`Selector checkoutButtonAnchor "${config.placeOrderButtonSelector}" is not a valid selector`);
+        logError.logError(`Selector checkoutButtonAnchor "${config.placeOrderButtonSelector}" is not a valid selector`);
         return;
     }
     injectCheckoutElement();
@@ -92,10 +93,10 @@ const initHello = async (helloSettings) => {
     const helloAnchor = anchorElementSelector || mobileHelloAnchor;
     // check if checkout button anchor selector user pass in is valid to setup hello
     if (!helloAnchor || !cart.isValidSelector(helloAnchor)) {
-        cart.logError(`Selector anchorElementSelector "${helloSettings.anchorElementSelector}" is not a valid selector.`);
+        logError.logError(`Selector anchorElementSelector "${helloSettings.anchorElementSelector}" is not a valid selector.`);
         return;
     }
-    cart.log('Hello init complete');
+    logError.log('Hello init complete');
     const isHelloInjected = injectHelloComponent(helloAnchor);
     // keep watching for the anchor element to be added to the DOM, then inject hello component
     if (!isHelloInjected) {
@@ -132,12 +133,12 @@ const ZonosController = class {
      */
     async initCheckoutElement(stripe) {
         if (!stripe) {
-            cart.log('Stripe is not loaded yet - cannot init checkout element', 'warn');
+            logError.log('Stripe is not loaded yet - cannot init checkout element', 'warn');
             return;
         }
         cart.stripeStore.stripe = stripe;
         void initCheckout(zonosStore.zonosStore.checkoutSettings);
-        cart.log('init checkout element');
+        logError.log('init checkout element');
     }
     /**
      * Init zonos notification
@@ -162,13 +163,13 @@ const ZonosController = class {
                 // Do nothing if font is Inter, since we already inject it on start
                 return;
             }
-            cart.log(`[FONT] Just applied Inter , but no need to inject since we already inject Inter on start`, 'warn');
+            logError.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 cart.handleFetch(`${routeUrl}/api/zonos-elements/get-font-detail?family=${fontSelected}`);
         if (errors.length > 0 || !json) {
-            cart.log(`Failed to load font ${fontSelected}`, 'warn');
+            logError.log(`Failed to load font ${fontSelected}`, 'warn');
             return;
         }
         const fontUrl = json.fontUrl;
@@ -177,7 +178,7 @@ const ZonosController = class {
             return;
         }
         // apply override font
-        cart.log(`[FONT] ${overrideFont} font override applied`);
+        logError.log(`[FONT] ${overrideFont} font override applied`);
         zonosStore.zonosStore.appearance = Object.assign(Object.assign({}, zonosStore.zonosStore.appearance), { fontFamily: overrideFont });
     }
     async componentWillLoad() {
@@ -187,14 +188,18 @@ 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') {
-                cart.log('Failed to load zonos settings. This domain may not have access', 'warn');
+                logError.log('Failed to load zonos settings. This domain may not have access', 'warn');
                 return;
             }
             // init zonos notification
             this.initZonosNotification();
+            const config = Object.assign(Object.assign({}, this.config), {
+                // override subscription status
+                subscriptionStatus: undefined
+            });
             // load default setting if fail to load user setting
             zonosStore.zonosStoreInitSetting({
-                overrideSettings: this.config,
+                overrideSettings: config,
                 zonosSettings: json,
             });
             // setup google font after store loaded
@@ -207,24 +212,24 @@ const ZonosController = class {
             // 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) {
-                cart.log('Checkout failed to load -- missing publishable key', 'warn');
+                logError.log('Checkout failed to load -- missing publishable key', 'warn');
                 return;
             }
             if (zonosStore.zonosStore.checkoutSettings.subscriptionStatus === 'INACTIVE') {
-                cart.log('=== Checkout subscription is "INACTIVE" - Cancel initializing for Checkout ===', 'warn');
-                cart.log('zonos controller loaded');
+                logError.log('=== Checkout subscription is "INACTIVE" - Cancel initializing for Checkout ===', 'warn');
+                logError.log('zonos controller loaded');
                 return;
             }
             if (zonosStore.zonosStore.checkoutSettings.visibilityStatus === 'DISABLED') {
-                cart.log('=== Checkout is disabled by store owner ===', 'warn');
-                cart.log('zonos controller loaded');
+                logError.log('=== Checkout is disabled by store owner ===', 'warn');
+                logError.log('zonos controller loaded');
                 return;
             }
             // send publishable key out to load stripe
             this.stripeInitEvent.emit({
                 publishableKey: publishableKey.token,
             });
-            cart.log('zonos controller loaded');
+            logError.log('zonos controller loaded');
         })();
     }
     /**
@@ -233,7 +238,7 @@ const ZonosController = class {
     async showNotification(notification) {
         const notificationElement = document.querySelector('zonos-notification');
         if (!notificationElement) {
-            cart.log('Failed to show notification - zonos-notification not found', 'warn');
+            logError.log('Failed to show notification - zonos-notification not found', 'warn');
             return;
         }
         void notificationElement.showNotification(notification);
@@ -267,7 +272,7 @@ const ZonosController = class {
         zonosStore.zonosStore.organizationName = organizationName;
     }
     render() {
-        return index.h(index.Host, { key: 'c607814c97ec998ef3e56ccdb28ef0369daf9ff3', class: "zonos--elements" });
+        return index.h(index.Host, { key: 'c7ddb9c8c4e17ef074e33de06ac893fcf08152a4', class: "zonos--elements" });
     }
 };
 ZonosController.style = ZonosControllerStyle0;

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

@@ -2,12 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-654a6001.js');
-const cart = require('./cart-95209ae8.js');
-const zonosStore = require('./zonosStore-d8bb0bda.js');
+const index = require('./index-b071017b.js');
+const cart = require('./cart-5468dfd1.js');
+const zonosStore = require('./zonosStore-7c6205ca.js');
 const classes = require('./classes-b7918f56.js');
-require('./isDarkColor-01f45d3f.js');
-require('./getBorderRadius-44b3eca1.js');
+require('./logError-4e2f2020.js');
+require('./isDarkColor-b0393089.js');
+require('./getBorderRadius-bcb309a8.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;