@zonos/elements 1.3.25-alpha.0 → 1.3.26

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b071017b.js');
-const zonosStore = require('./zonosStore-3958bbeb.js');
+const zonosStore = require('./zonosStore-4c6c85da.js');
 const classes = require('./classes-b7918f56.js');
-const getBorderRadius = require('./getBorderRadius-ea0984bb.js');
+const getBorderRadius = require('./getBorderRadius-074b46ef.js');
 
 const zonosInputCss = ":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{margin:1px;}:host .zonos--label-wrapper{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;height:100%;width:100%;background:var(--zonos-elements-input-background);border-radius:var(--border-radius);border:var(--zonos-elements-border)}:host .zonos--label-wrapper:hover{border:1px solid var(--zonos-elements-gray-300)}:host .zonos--floated-input{-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;padding:0 16px;outline:none;-webkit-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);width:100%;border-radius:var(--border-radius);background:var(--zonos-elements-input-background);border:0;-ms-flex-order:2;order:2;font-weight:500}:host .zonos--floated-input :-internal-autofill-selected{border-radius:var(--zonos-elements-radius-6) 0 0 var(--zonos-elements-radius-6)}:host .zonos--floated-input :-internal-autofill-selected+label+div{background-color:#e8f0fe}:host .zonos--floated-input.has-label{padding:16px 4px 8px 16px}:host .zonos--floated-input.has-label.has-input-prefix{padding-left:0}:host .zonos--floated-input.has-label.has-input-prefix+.zonos--floated-label::before{margin-left:0}:host .zonos--floated-input:not(.has-label)::-webkit-input-placeholder{opacity:var(--zonos-elements-opacity-disabled)}:host .zonos--floated-input:not(.has-label)::-moz-placeholder{opacity:var(--zonos-elements-opacity-disabled)}:host .zonos--floated-input:not(.has-label):-ms-input-placeholder{opacity:var(--zonos-elements-opacity-disabled)}:host .zonos--floated-input:not(.has-label)::-ms-input-placeholder{opacity:var(--zonos-elements-opacity-disabled)}:host .zonos--floated-input:not(.has-label)::placeholder{opacity:var(--zonos-elements-opacity-disabled)}:host .zonos--floated-input::-webkit-input-placeholder{-webkit-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);opacity:0}:host .zonos--floated-input::-moz-placeholder{-moz-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);opacity:0}:host .zonos--floated-input:-ms-input-placeholder{-ms-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);opacity:0}:host .zonos--floated-input::-ms-input-placeholder{-ms-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);opacity:0}:host .zonos--floated-input::placeholder{-webkit-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);opacity:0}:host .zonos--floated-input:focus{outline:none}:host .zonos--floated-input:focus+.zonos--floated-label::after{-webkit-box-shadow:var(--zonos-elements-glow-blue);box-shadow:var(--zonos-elements-glow-blue)}:host .zonos--floated-input.has-error+.zonos--floated-label::after{-webkit-box-shadow:var(--zonos-elements-glow-error);box-shadow:var(--zonos-elements-glow-error)}:host .zonos--floated-input.has-content::-webkit-input-placeholder,:host .zonos--floated-input:focus::-webkit-input-placeholder{opacity:var(--zonos-elements-opacity-disabled)}:host .zonos--floated-input.has-content::-moz-placeholder,:host .zonos--floated-input:focus::-moz-placeholder{opacity:var(--zonos-elements-opacity-disabled)}:host .zonos--floated-input.has-content:-ms-input-placeholder,:host .zonos--floated-input:focus:-ms-input-placeholder{opacity:var(--zonos-elements-opacity-disabled)}:host .zonos--floated-input.has-content::-ms-input-placeholder,:host .zonos--floated-input:focus::-ms-input-placeholder{opacity:var(--zonos-elements-opacity-disabled)}:host .zonos--floated-input.has-content::placeholder,:host .zonos--floated-input:focus::placeholder{opacity:var(--zonos-elements-opacity-disabled)}:host .zonos--floated-input.has-content+.zonos--floated-label::before,:host .zonos--floated-input:focus+.zonos--floated-label::before{top:11px;-webkit-transform:scale(0.8);transform:scale(0.8)}:host .zonos--floated-input:-webkit-autofill,:host .zonos--floated-input:-moz-autofill{background-color:var(--zonos-elements-input-background);color:var(--zonos-elements-text-color)}:host .zonos--floated-label{display:block;max-height:0;pointer-events:none;-ms-flex-order:1;order:1}:host .zonos--floated-label::before{content:attr(data-label);color:var(--zonos-elements-gray-800);position:absolute;font-size:var(--zonos-elements-font-size-base);line-height:var(--zonos-elements-font-size-base);display:inline-block;-webkit-filter:blur(0);filter:blur(0);-webkit-transform-origin:left top;transform-origin:left top;-webkit-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);margin-left:16px;top:calc(50% - var(--zonos-elements-font-size-base) / 2);z-index:1}:host .zonos--floated-label::after{content:\"\";position:absolute;left:0;right:0;top:0;bottom:0;border-radius:var(--border-radius)}:host .disabled .zonos--floated-label{pointer-events:inherit}:host .disabled .zonos--floated-label::after{cursor:not-allowed;z-index:1}:host(.sm){height:calc(var(--zonos-elements-size-sm) - 2px)}:host(.sm) .zonos--floated-input.has-label{padding-top:13px;padding-bottom:0}:host(.sm) .zonos--floated-input.has-label:focus+.zonos--floated-label::before,:host(.sm) .zonos--floated-input.has-label.has-content+.zonos--floated-label::before{top:2px}:host(.md){height:calc(var(--zonos-elements-size-md) - 2px)}:host(.md) .zonos--floated-input.has-label{padding-top:20px}:host(.md) .zonos--floated-input.has-label:focus+.zonos--floated-label::before,:host(.md) .zonos--floated-input.has-label.has-content+.zonos--floated-label::before{top:6px}:host(.lg){height:calc(var(--zonos-elements-size-lg) - 2px)}:host(.lg) .zonos--floated-input.has-label:focus+.zonos--floated-label::before,:host(.lg) .zonos--floated-input.has-label.has-content+.zonos--floated-label::before{top:10px}:host(.xl){height:calc(var(--zonos-elements-size-xl) - 2px)}:host(.xl) .zonos--floated-input.has-label{padding-bottom:2px}";
 const ZonosInputStyle0 = zonosInputCss;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b071017b.js');
-const zonosStore = require('./zonosStore-3958bbeb.js');
+const zonosStore = require('./zonosStore-4c6c85da.js');
 const classes = require('./classes-b7918f56.js');
 
 const zonosLogoCss = ":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 img{-webkit-filter:var(--filter-color);filter:var(--filter-color);width:var(--width)}";

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b071017b.js');
-const zonosStore = require('./zonosStore-3958bbeb.js');
+const zonosStore = require('./zonosStore-4c6c85da.js');
 const classes = require('./classes-b7918f56.js');
 
 const zonosNotificationCss = ":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-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}:host .zonos--notification-items{position:fixed;z-index:9999999;bottom:24px;gap:8px;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column}:host .zonos--notification-item{cursor:pointer;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;padding:8px;border-radius:var(--border-radius, var(--zonos-elements-radius-6));opacity:0;-ms-flex-negative:0.0001;flex-shrink:0.0001;-webkit-transform:translateY(100%);transform:translateY(100%)}:host .zonos--notification-item+:host .zonos--notification-item{margin-top:8px}:host .zonos--notification-item.show{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-ms-flex-positive:1000;flex-grow:1000}:host .zonos--notification-item.success{background-color:var(--zonos-elements-green-700)}:host .zonos--notification-item.error{background-color:var(--zonos-elements-red-700)}:host .zonos--notification-item.warning{background-color:var(--zonos-elements-orange-700)}";

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

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b071017b.js');
-const cart = require('./cart-ab3b679e.js');
+const cart = require('./cart-7e817cad.js');
 const logError = require('./logError-4e2f2020.js');
-require('./zonosStore-3958bbeb.js');
-require('./isDarkColor-b14d5752.js');
-require('./getBorderRadius-ea0984bb.js');
+require('./zonosStore-4c6c85da.js');
+require('./isDarkColor-371a3b1a.js');
+require('./getBorderRadius-074b46ef.js');
 
 const zonosPaymentCss = ".sc-zonos-payment-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-payment-h *.sc-zonos-payment{font-family:var(--font-family, Inter), Inter}.sc-zonos-payment-h img.sc-zonos-payment{max-width:100%}.sc-zonos-payment-h dl.sc-zonos-payment,.sc-zonos-payment-h dd.sc-zonos-payment,.sc-zonos-payment-h h1.sc-zonos-payment,.sc-zonos-payment-h h2.sc-zonos-payment,.sc-zonos-payment-h h3.sc-zonos-payment,.sc-zonos-payment-h h4.sc-zonos-payment,.sc-zonos-payment-h h5.sc-zonos-payment,.sc-zonos-payment-h h6.sc-zonos-payment,.sc-zonos-payment-h hr.sc-zonos-payment,.sc-zonos-payment-h figure.sc-zonos-payment,.sc-zonos-payment-h p.sc-zonos-payment,.sc-zonos-payment-h pre.sc-zonos-payment{margin:0}.sc-zonos-payment-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-payment-h .zonos--title.sc-zonos-payment{margin-bottom:16px}";
 const ZonosPaymentStyle0 = zonosPaymentCss;

package/dist/cjs/zonos-select-dialog-header_2.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b071017b.js');
-const zonosStore = require('./zonosStore-3958bbeb.js');
+const zonosStore = require('./zonosStore-4c6c85da.js');
 const classes = require('./classes-b7918f56.js');
 
 const RemoveIcon = `<svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#C5C6CA" fill-rule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" clip-rule="evenodd"/><path fill="#4D505A" fill-rule="evenodd" d="M8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" clip-rule="evenodd"/></svg>`;

package/dist/cjs/zonos-shipping-rich-radio.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b071017b.js');
-const zonosStore = require('./zonosStore-3958bbeb.js');
+const zonosStore = require('./zonosStore-4c6c85da.js');
 const classes = require('./classes-b7918f56.js');
-const getBorderRadius = require('./getBorderRadius-ea0984bb.js');
+const getBorderRadius = require('./getBorderRadius-074b46ef.js');
 const isColorVariable = require('./isColorVariable-6f5a9608.js');
 
 const zonosShippingRichRadioCss = ":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-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host input{margin:0;accent-color:var(--selected-border-color, var(--zonos-elements-blue-600))}:host .zonos--shipping-rich-radio-item{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;padding:16px;-ms-flex-align:center;align-items:center;gap:16px;cursor:pointer;border:1px solid var(--zonos-elements-gray-200)}:host .zonos--shipping-rich-radio-item:first-child{border-top-left-radius:var(--border-radius, var(--zonos-elements-radius-10));border-top-right-radius:var(--border-radius, var(--zonos-elements-radius-10))}:host .zonos--shipping-rich-radio-item:last-child{border-bottom-right-radius:var(--border-radius, var(--zonos-elements-radius-10));border-bottom-left-radius:var(--border-radius, var(--zonos-elements-radius-10))}:host .zonos--shipping-rich-radio-item:not(:last-child){border-bottom:none}:host .zonos--shipping-rich-radio-item.selected{outline:1px solid var(--selected-border-color, var(--zonos-elements-blue-600));outline-offset:-1px}:host .zonos--shipping-info{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex:1;flex:1}:host .zonos--shipping-detail{-ms-flex:1;flex:1}:host .zonos--sub-detail{display:-ms-inline-flexbox;display:inline-flex;gap:8px;-ms-flex-wrap:wrap;flex-wrap:wrap}";

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b071017b.js');
-const zonosStore = require('./zonosStore-3958bbeb.js');
+const zonosStore = require('./zonosStore-4c6c85da.js');
 const classes = require('./classes-b7918f56.js');
 const isColorVariable = require('./isColorVariable-6f5a9608.js');
 

package/dist/cjs/{zonosStore-3958bbeb.js → zonosStore-4c6c85da.js}

@@ -2824,6 +2824,7 @@ const { dispose: zonosStoreDispose, reset, state: zonosStore, } = createStore(()
         productListUrlPattern: '',
         productTitleElementSelector: '',
         restrictionBehavior: 'DISABLED',
+        showForCountries: 'ONLY_SHIPPABLE',
     },
     loadedConfig: false,
     organizationId: '',

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

@@ -44,6 +44,7 @@
   border-radius: var(--border-radius, 10px);
   gap: 24px;
   max-width: 360px;
+  min-width: 300px;
   width: auto;
   margin: auto;
   margin-top: 24px;

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

@@ -84,6 +84,19 @@ export class ZonosCheckoutFinish {
                 });
             }
         };
+        // If user provide override notification text, use it
+        this.useOverrideSuccessNotification = () => {
+            const { successPageActionText, successPageSubtitleText, successPageTitleText, } = zonosStore.checkoutSettings;
+            if (successPageTitleText) {
+                this.notificationTitle = successPageTitleText;
+            }
+            if (successPageSubtitleText) {
+                this.notificationMessages = successPageSubtitleText;
+            }
+            if (successPageActionText) {
+                this.notificationActionText = successPageActionText;
+            }
+        };
         this.checkPaymentStatus = async () => {
             this.isLoading = true;
             const clientSecret = new URLSearchParams(window.location.search).get('payment_intent_client_secret') || stripeStore.clientSecret;
@@ -97,6 +110,9 @@ export class ZonosCheckoutFinish {
                 this.notificationTitle = error
                     ? translate('Payment failed')
                     : translate("You're all set!");
+                this.notificationActionText = translate('Keep shopping');
+                // override title if notification type is success
+                this.useOverrideSuccessNotification();
                 if (error) {
                     submitGtag('zonos-checkout-payment-fail');
                 }
@@ -135,6 +151,7 @@ export class ZonosCheckoutFinish {
         this.notificationType = 'success';
         this.notificationTitle = '';
         this.notificationMessages = [];
+        this.notificationActionText = '';
         this.order = null;
     }
     componentDidLoad() {
@@ -156,11 +173,11 @@ export class ZonosCheckoutFinish {
         // const totalItems = this.order?.items?.reduce((acc, item) => {
         //   return acc + item.quantity;
         // }, 0);
-        return (h(Host, { key: '1e4627e936e0508761c12d842523adb51d3c797e', class: "zonos--checkout-finish zonos--elements", style: {
+        return (h(Host, { key: '24b1aac6cd07e3981e29bb401a8e1afeba45bf4a', class: "zonos--checkout-finish zonos--elements", style: {
                 '--border-radius': getBorderRadius({
                     overrideBorderStyle: this.borderRadius,
                 }),
-            } }, this.isLoading && (h("div", { key: '4d3be87aec252946c5b6fb516c882830232a83e5', class: "loading-wrapper" }, h("zonos-spinner", { key: '25e9bafaaebed75582efd936c57121921c8f2f8a' }))), !this.isLoading && (h(Fragment, null, h("div", { key: '49c211db17af433b3936e69722c3c76c9197c170', class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), h("zonos-text", { key: '4cb90069dcf385886cb9235ee0854d63781e4452', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", { key: '8e16be3b15d7fba7b697ba9ed41332c9794f3551' }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), h("zonos-button", { key: 'e1bfacd92d36c303defc464c7eaf10b8853175c1', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, translate('Keep shopping')))))));
+            } }, this.isLoading && (h("div", { key: '8ddf7d87472a65b9e48504459a67b904611a6207', class: "loading-wrapper" }, h("zonos-spinner", { key: '01106349e974c8dccfab50c97875b5031c7becec' }))), !this.isLoading && (h(Fragment, null, h("div", { key: '9a274bcc2ce21bd5e14b22f0bb17cc75519bf67e', class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), h("zonos-text", { key: '6b8e0ff98659d87a474142766e8debd84bbcf357', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", { key: '204c517f0cb91a2a7f029cbb51ec4dbc73f7fbdb' }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), h("zonos-button", { key: '540dbea2ab328655fccdd7ac24ee996b1041c222', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText))))));
     }
     static get is() { return "zonos-checkout-finish"; }
     static get encapsulation() { return "shadow"; }
@@ -247,6 +264,7 @@ export class ZonosCheckoutFinish {
             "notificationType": {},
             "notificationTitle": {},
             "notificationMessages": {},
+            "notificationActionText": {},
             "order": {}
         };
     }

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

@@ -73,6 +73,7 @@ export class ZonosCheckout {
         this.confirmDialogOpen = false;
         this.showSessionTimoutScreen = false;
         this.checkoutTimeoutInterval = null;
+        this.inventoryCheckErrorMessage = null;
     }
     /**
      * Init cart info handler event
@@ -384,10 +385,47 @@ export class ZonosCheckout {
             this.submitLoading = false;
         }, 500);
     }
+    handleInventoryCheckDialogCancel() {
+        // reset inventory check message to close the inventory check alert
+        this.inventoryCheckErrorMessage = null;
+    }
+    handleInventoryCheckDialogConfirm() {
+        // reset inventory check message to close the inventory check alert
+        this.inventoryCheckErrorMessage = null;
+        // close the dialog
+        void this.closeDialogHandler({ confirmed: true });
+    }
+    /**
+     * Handle inventory check and returns error message if the callback provided.
+     */
+    async handleInventoryCheck() {
+        const { onInventoryCheck } = zonosStore.checkoutSettings;
+        if (typeof onInventoryCheck !== 'function') {
+            return null;
+        }
+        const message = await onInventoryCheck({ items: cartStore.items });
+        return message;
+    }
     async handleCheckoutPaymentContinue() {
         // reset error state
         this.paymentError = false;
         this.submitLoading = true;
+        // reset inventory check message
+        this.inventoryCheckErrorMessage = null;
+        try {
+            // check inventory before proceeding to payment
+            this.inventoryCheckErrorMessage = await this.handleInventoryCheck();
+        }
+        catch (err) {
+            // If user provide callback and it throw an exception, default to this message and stop the payment.
+            this.inventoryCheckErrorMessage = translate('Unable to check inventory. Please try again.');
+        }
+        // Don't proceed to payment if there's an error message
+        if (this.inventoryCheckErrorMessage) {
+            // stop the submit loading state
+            this.submitLoading = false;
+            return;
+        }
         try {
             await stripeStoreConfirmPayment();
             cartStoreNextStep();
@@ -539,7 +577,15 @@ export class ZonosCheckout {
                 this.confirmDialogOpen = false;
             },
             // Mark user selected confirm to close the dialog
-            onConfirmClicked: () => this.closeDialogHandler({ confirmed: true }) })));
+            onConfirmClicked: () => this.closeDialogHandler({ confirmed: true }) }), h("zonos-confirm-dialog", { class: "zonos--inventory-check-failure-dialog", dialogConfirmBtnText: translate('Return to cart'), dialogIntent: "danger",
+            // Show dialog if inventory check error message is not null
+            dialogOpen: !!this.inventoryCheckErrorMessage,
+            // If diallog is in open state, the message should not be null
+            dialogSubtitle: this.inventoryCheckErrorMessage, dialogTitle: translate("Couldn't place order"), dialogType: "alert", onCancelClicked: () => {
+                this.handleInventoryCheckDialogCancel();
+            },
+            // Mark user selected confirm to close the dialog
+            onConfirmClicked: () => this.handleInventoryCheckDialogConfirm() })));
     }
     static get is() { return "zonos-checkout"; }
     static get encapsulation() { return "scoped"; }
@@ -675,7 +721,8 @@ export class ZonosCheckout {
             "isLegacyCheckout": {},
             "confirmDialogOpen": {},
             "showSessionTimoutScreen": {},
-            "checkoutTimeoutInterval": {}
+            "checkoutTimeoutInterval": {},
+            "inventoryCheckErrorMessage": {}
         };
     }
     static get methods() {

package/dist/collection/components/common/zonos-confirm-dialog/zonos-confirm-dialog.js

@@ -18,7 +18,7 @@ export class ZonosConfirmDialog {
         };
         this.dialogTitle = translate('Are you sure?');
         this.dialogIntent = 'info';
-        this.dialogSubtitle = '';
+        this.dialogSubtitle = null;
         this.submitBtnColor = undefined;
         this.dialogConfirmBtnText = undefined;
         this.dialogCancelBtnText = undefined;
@@ -82,12 +82,12 @@ export class ZonosConfirmDialog {
         const borderStyle = getBorderRadius();
         // Get theme for the update dialog, inherit from the theme, no from this component theme
         const theme = getZonosStoreTheme(zonosStore.appearance.theme);
-        return (h(Host, { key: '0adbea273e5504ac29ef8040fd968ded3f731f4b', class: classes([this.dialogOpen && 'open', 'zonos--elements']), "data-dialog-type": this.dialogType, "data-theme": theme, style: {
+        return (h(Host, { key: '4e762dd84a3a04a61e855cdb8dc019d1138b5b64', class: classes([this.dialogOpen && 'open', 'zonos--elements']), "data-dialog-type": this.dialogType, "data-theme": theme, style: {
                 '--border-radius': borderStyle,
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '4dbb78a0d1fc37dbd573c23aee53838a4578e18e', class: "zonos--backdrop", tabIndex: -1 }), h("div", { key: '106e28d9bea08a332063cf8fe07f7e1db7ef3f0b', "aria-hidden": "true", class: classes(['zonos--confirm-layout', this.dialogIntent]), onClick: e => this.clickOutsideDialogHandler(e) }, h("div", { key: 'b296e7d2c30815147396b6e5c50207b40722d6f5', class: "zonos--confirm-dialog", onBlur: () => {
+            } }, h("div", { key: '0fab667a9f930b1418a8c920e5766e03f3c01858', class: "zonos--backdrop", tabIndex: -1 }), h("div", { key: '914885bd702f46c207c74eb32581eacf2f3817cd', "aria-hidden": "true", class: classes(['zonos--confirm-layout', this.dialogIntent]), onClick: e => this.clickOutsideDialogHandler(e) }, h("div", { key: 'dcdc0d3896153b47afbe38abc5fd4c491b8aea92', class: "zonos--confirm-dialog", onBlur: () => {
                 this.focusDialog();
-            } }, h("div", { key: 'ba8c7aa3f0a6c3753f2275b2fd9daac8181d8e05', class: "wrapper" }, h("div", { key: '60490f9e714881bd75c6fcad07aebf3ae9d9947b', class: "icon-wrapper" }, this.renderIcon()), h("div", { key: 'd735c7e03bff1d41fdbc003c9628a4abaa4f9313', class: "content" }, h("div", { key: 'e085cea22f8036b3deec9fa9f51c977629e6cc74', class: "title" }, h("zonos-text", { key: '4e41e3b2fe012a8c28daa7ceab614b19299c7cdf', type: "subheader" }, this.dialogTitle)), this.dialogSubtitle && (h("div", { key: '5cc1fefbe7a551bf5ad7ff3744d7ecc6ecf5e73a', class: "subtitle" }, h("zonos-text", { key: '07afaf41a189f491db17d135cf074d4c6152e3cb', textColor: "gray-800" }, this.dialogSubtitle)))), h("div", { key: 'fbcfeb7f1a195ad928dea606f5085d8d2c1f2df6', class: "footer" }, this.dialogType === 'confirm' && (h("zonos-button", { key: 'eab37a4bf872bcde807ea50f33f2f082889a47c1', backgroundColor: "gray-0", class: "cancel-button", onClick: () => this.closeDialogHandler(), size: "lg", withBoxShadow: true }, this.dialogCancelBtnText || translate('Cancel'))), h("zonos-button", { key: '21e66354e0eaa951fd68f86beda36c4a89f06e44', class: "confirm-button", onClick: () => this.confirmDialogHandler(), size: "lg", variant: this.getButtonConfirmVariant() }, this.dialogConfirmBtnText)))))));
+            } }, h("div", { key: 'acf0d24f523eb255de78e76390295ce8ff9562b8', class: "wrapper" }, h("div", { key: '10d665c1f9724c0c22c898d35af1c73ea089ee0e', class: "icon-wrapper" }, this.renderIcon()), h("div", { key: '9dd6b11b1dce47f53f39f89a2e337fc8f59aeb9c', class: "content" }, h("div", { key: '959227525b723a7d5083d8ede947772b90c6fd4b', class: "title" }, h("zonos-text", { key: '1f33ee07f6e480692911120a6fc8d071897c9d14', type: "subheader" }, this.dialogTitle)), this.dialogSubtitle && (h("div", { key: 'e8b142d67e72c4eb8613ebfe8961e51a1ea8c0c8', class: "subtitle" }, h("zonos-text", { key: 'a263e3da97c750c3271bf9f5b70515e298f2215f', textColor: "gray-800" }, this.dialogSubtitle)))), h("div", { key: '5e8c54999ab9012372dd8510d14e2f1858543e26', class: "footer" }, this.dialogType === 'confirm' && (h("zonos-button", { key: 'd35774f8d45f9184634bb4a4aa204a35e35a3e54', backgroundColor: "gray-0", class: "cancel-button", onClick: () => this.closeDialogHandler(), size: "lg", withBoxShadow: true }, this.dialogCancelBtnText || translate('Cancel'))), h("zonos-button", { key: '3f98eff1184c61d163a1f9484e69ea0fca02bc1c', class: "confirm-button", onClick: () => this.confirmDialogHandler(), size: "lg", variant: this.getButtonConfirmVariant() }, this.dialogConfirmBtnText)))))));
     }
     static get is() { return "zonos-confirm-dialog"; }
     static get encapsulation() { return "shadow"; }
@@ -150,8 +150,8 @@ export class ZonosConfirmDialog {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "string | null",
+                    "resolved": "null | string",
                     "references": {}
                 },
                 "required": false,
@@ -159,13 +159,13 @@ export class ZonosConfirmDialog {
                 "docs": {
                     "tags": [{
                             "name": "default",
-                            "text": "\"\" No subtitle"
+                            "text": "null No subtitle"
                         }],
                     "text": "Dialog subtitle text"
                 },
                 "attribute": "dialog-subtitle",
                 "reflect": false,
-                "defaultValue": "''"
+                "defaultValue": "null"
             },
             "submitBtnColor": {
                 "type": "string",

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

@@ -171,18 +171,25 @@ export class ZonosHello {
                 return hasMoreSpaceOnRight;
             }
         };
-        this.isShippableCountry = (showLog = true) => {
+        this.shouldRenderHello = (showLog = true) => {
             if (!localizationStore.localizationLoaded) {
                 return false;
             }
-            // if localization is loaded and the localization is not a shippable country, keep the original click event
-            if (!localizationStore.isShippableCountry) {
-                if (showLog) {
-                    log(`Hello: not shippable country`);
+            const { showForCountries } = zonosStore.helloSettings;
+            if (showLog) {
+                if (!localizationStore.isShippableCountry) {
+                    log(`Hello: not shippable country - Show for countries: ${showForCountries}`);
                 }
-                return false;
             }
-            return true;
+            // if localization is loaded and the localization is not a shippable country, keep the original click event
+            if (showForCountries === 'ONLY_SHIPPABLE') {
+                return localizationStore.isShippableCountry;
+            }
+            // if user wants to show hello for all countries
+            if (showForCountries === 'ALL') {
+                return true;
+            }
+            return showForCountries === null || showForCountries === void 0 ? void 0 : showForCountries.includes(localizationStore.selectedCountryCode || '');
         };
         this.mobileLocationOverride = undefined;
         this.animateFromLeftOverride = undefined;
@@ -285,7 +292,7 @@ export class ZonosHello {
         // The  organization name can be changed after init with the updateOrganizationName method.
         // This will cause the element to rerender with the new org name when it changes. (used for preview on dashboard)
         this.peekMessage = this.getHelloPeekMessage(zonosStore.organizationName);
-        const showHello = this.isShippableCountry() && !!selectedCountryCode;
+        const showHello = this.shouldRenderHello() && !!selectedCountryCode;
         return (h(Host, { class: "zonos--hello zonos--elements", "data-theme": theme }, showHello && (h("div", { class: "zonos--hello-wrapper" }, h("button", { class: classes([
                 'zonos--hello-widget',
                 this.showPeekMessage && 'zonos--hello-show-peek-message',

package/dist/collection/components/store/hello/localization.js

@@ -100,6 +100,7 @@ const addInternationalHideClass = () => {
 const localizationStoreUpdateSelectedCountryCode = (newSelectedCountryCode) => {
     var _a, _b;
     log('update selected country code');
+    const isFirstTime = !localizationStore.selectedCountryCode;
     localizationStore.selectedCountryCode = newSelectedCountryCode;
     const { selectedCountryCode, shippingZoneCountries } = localizationStore;
     const isShippableCountry = shippingZoneCountries &&
@@ -125,11 +126,14 @@ const localizationStoreUpdateSelectedCountryCode = (newSelectedCountryCode) => {
     setZCountryUrlParam(selectedCountryCode);
     (_a = document
         .querySelector('zonos-hello')) === null || _a === void 0 ? void 0 : _a.setAttribute('z-country', selectedCountryCode);
-    // Trigger callback onCountryChange
-    (_b = zonosStore.onCountryChange) === null || _b === void 0 ? void 0 : _b.call(zonosStore, {
-        countryCode: selectedCountryCode,
-        currencyCode,
-    });
+    // Only trigger callback onCountryChange if the country code has been set before
+    if (!isFirstTime) {
+        // Trigger callback onCountryChange
+        (_b = zonosStore.onCountryChange) === null || _b === void 0 ? void 0 : _b.call(zonosStore, {
+            countryCode: selectedCountryCode,
+            currencyCode,
+        });
+    }
 };
 const initLocalizationStore = async () => {
     // all countries from countries.json, shipping zone and localization

package/dist/collection/components/store/translationStore/strings.arabic.js

@@ -41,6 +41,9 @@ export const stringsArabic = {
     'Continue to shipping': {
         value: 'متابعة إلى الشحن',
     },
+    "Couldn't place order": {
+        value: 'تعذر تقديم الطلب',
+    },
     Country: {
         value: 'بلد',
     },
@@ -170,6 +173,9 @@ export const stringsArabic = {
     'Restricted items found': {
         value: 'تم العثور على عناصر مقيدة',
     },
+    'Return to cart': {
+        value: 'العودة إلى العربة',
+    },
     'Search countries': {
         value: 'ابحث عن الدول',
     },
@@ -227,6 +233,9 @@ export const stringsArabic = {
     'Translated address': {
         value: 'العنوان المترجم',
     },
+    'Unable to check inventory. Please try again.': {
+        value: 'تعذر التحقق من المخزون. حاول مرة أخرى.',
+    },
     'Update address': {
         value: 'تحديث العنوان',
     },

package/dist/collection/components/store/translationStore/strings.base.js

@@ -41,6 +41,9 @@ export const stringsBase = {
     'Continue to shipping': {
         value: 'Continue to shipping',
     },
+    "Couldn't place order": {
+        value: "Couldn't place order",
+    },
     Country: {
         value: 'Country',
     },
@@ -170,6 +173,9 @@ export const stringsBase = {
     'Restricted items found': {
         value: 'Restricted items found',
     },
+    'Return to cart': {
+        value: 'Return to cart',
+    },
     'Search countries': {
         value: 'Search countries',
     },
@@ -227,6 +233,9 @@ export const stringsBase = {
     'Translated address': {
         value: 'Translated address',
     },
+    'Unable to check inventory. Please try again.': {
+        value: 'Unable to check inventory. Please try again.',
+    },
     'Update address': {
         value: 'Update address',
     },

package/dist/collection/components/store/translationStore/strings.chinese.js

@@ -41,6 +41,9 @@ export const stringsChinese = {
     'Continue to shipping': {
         value: '继续运送',
     },
+    "Couldn't place order": {
+        value: '无法下单',
+    },
     Country: {
         value: '国家',
     },
@@ -170,6 +173,9 @@ export const stringsChinese = {
     'Restricted items found': {
         value: '发现受限制的商品',
     },
+    'Return to cart': {
+        value: '返回购物车',
+    },
     'Search countries': {
         value: '搜索国家',
     },
@@ -227,6 +233,9 @@ export const stringsChinese = {
     'Translated address': {
         value: '翻译地址',
     },
+    'Unable to check inventory. Please try again.': {
+        value: '无法检查库存。请再试一次。',
+    },
     'Update address': {
         value: '更新地址',
     },

package/dist/collection/components/store/translationStore/strings.danish.js

@@ -41,6 +41,9 @@ export const stringsDanish = {
     'Continue to shipping': {
         value: 'Fortsæt til levering',
     },
+    "Couldn't place order": {
+        value: 'Kunne ikke placere ordre',
+    },
     Country: {
         value: 'Land',
     },
@@ -170,6 +173,9 @@ export const stringsDanish = {
     'Restricted items found': {
         value: 'Begrænsede varer fundet',
     },
+    'Return to cart': {
+        value: 'Tilbage til kurven',
+    },
     'Search countries': {
         value: 'Søg lande',
     },
@@ -227,6 +233,9 @@ export const stringsDanish = {
     'Translated address': {
         value: 'Oversat adresse',
     },
+    'Unable to check inventory. Please try again.': {
+        value: 'Kunne ikke tjekke lagerbeholdningen. Prøv venligst igen.',
+    },
     'Update address': {
         value: 'Opdater adresse',
     },

package/dist/collection/components/store/translationStore/strings.dutch.js

@@ -41,6 +41,9 @@ export const stringsDutch = {
     'Continue to shipping': {
         value: 'Ga verder naar verzending',
     },
+    "Couldn't place order": {
+        value: 'Kon bestelling niet plaatsen',
+    },
     Country: {
         value: 'Land',
     },
@@ -170,6 +173,9 @@ export const stringsDutch = {
     'Restricted items found': {
         value: 'Beperkte items gevonden',
     },
+    'Return to cart': {
+        value: 'Terug naar winkelwagen',
+    },
     'Search countries': {
         value: 'Zoek landen',
     },
@@ -227,6 +233,9 @@ export const stringsDutch = {
     'Translated address': {
         value: 'Vertaald adres',
     },
+    'Unable to check inventory. Please try again.': {
+        value: 'Kon de voorraad niet controleren. Probeer het opnieuw.',
+    },
     'Update address': {
         value: 'Adres bijwerken',
     },

package/dist/collection/components/store/translationStore/strings.french.js

@@ -41,6 +41,9 @@ export const stringsFrench = {
     'Continue to shipping': {
         value: 'Continuer vers la livraison',
     },
+    "Couldn't place order": {
+        value: 'Impossible de passer la commande',
+    },
     Country: {
         value: 'Pays',
     },
@@ -170,6 +173,9 @@ export const stringsFrench = {
     'Restricted items found': {
         value: 'Articles restreints trouvés',
     },
+    'Return to cart': {
+        value: 'Retour au panier',
+    },
     'Search countries': {
         value: 'Rechercher des pays',
     },
@@ -227,6 +233,9 @@ export const stringsFrench = {
     'Translated address': {
         value: 'Adresse traduite',
     },
+    'Unable to check inventory. Please try again.': {
+        value: "Impossible de vérifier l'inventaire. Veuillez réessayer.",
+    },
     'Update address': {
         value: "Mettre à jour l'adresse",
     },

package/dist/collection/components/store/translationStore/strings.german.js

@@ -41,6 +41,9 @@ export const stringsGerman = {
     'Continue to shipping': {
         value: 'Weiter zur Lieferung',
     },
+    "Couldn't place order": {
+        value: 'Bestellung konnte nicht aufgegeben werden',
+    },
     Country: {
         value: 'Land',
     },
@@ -170,6 +173,9 @@ export const stringsGerman = {
     'Restricted items found': {
         value: 'Eingeschränkte Artikel gefunden',
     },
+    'Return to cart': {
+        value: 'Zurück zum Warenkorb',
+    },
     'Search countries': {
         value: 'Länder durchsuchen',
     },
@@ -227,6 +233,9 @@ export const stringsGerman = {
     'Translated address': {
         value: 'Übersetzte Adresse',
     },
+    'Unable to check inventory. Please try again.': {
+        value: 'Inventar konnte nicht überprüft werden. Bitte versuchen Sie es erneut.',
+    },
     'Update address': {
         value: 'Adresse aktualisieren',
     },

package/dist/collection/components/store/translationStore/strings.hebrew.js

@@ -41,6 +41,9 @@ export const stringsHebrew = {
     'Continue to shipping': {
         value: 'המשך למשלוח',
     },
+    "Couldn't place order": {
+        value: 'לא ניתן היה לבצע הזמנה',
+    },
     Country: {
         value: 'מדינה',
     },
@@ -170,6 +173,9 @@ export const stringsHebrew = {
     'Restricted items found': {
         value: 'נמצאו פריטים מוגבלים',
     },
+    'Return to cart': {
+        value: 'חזרה לעגלה',
+    },
     'Search countries': {
         value: 'חיפוש מדינות',
     },
@@ -227,6 +233,9 @@ export const stringsHebrew = {
     'Translated address': {
         value: 'כתובת מתורגמת',
     },
+    'Unable to check inventory. Please try again.': {
+        value: 'לא ניתן היה לבדוק את המלאי. אנא נסה שוב.',
+    },
     'Update address': {
         value: 'עדכון כתובת',
     },