@zonos/elements 1.3.39 → 1.3.41

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

@@ -1,6 +1,7 @@
 import { Fragment, h, Host, } from "@stencil/core";
 import { cartStore } from "../../../store/checkout/cart";
-import { stripeStore, stripeStoreReset, stripeStoreRetrievePayment, } from "../../../store/checkout/stripe";
+import { paypalStore, paypalStoreReset, } from "../../../store/checkout/paypal";
+import { stripeStore, stripeStoreMessageBasedOnStatus, stripeStoreReset, stripeStoreRetrievePayment, } from "../../../store/checkout/stripe";
 import { translate } from "../../../store/translationStore";
 import { zonosStore } from "../../../store/zonosStore";
 import { trackConversionEvent } from "../../../utils/api/trackConversionEvent";
@@ -102,7 +103,7 @@ export class ZonosCheckoutFinish {
                 this.notificationActionText = successPageActionText;
             }
         };
-        this.checkPaymentStatus = async () => {
+        this.checkStripePaymentStatus = async () => {
             this.isLoading = true;
             const clientSecret = new URLSearchParams(window.location.search).get('payment_intent_client_secret') || stripeStore.clientSecret;
             if (clientSecret || this.storybookForceStatus) {
@@ -115,8 +116,6 @@ export class ZonosCheckoutFinish {
                 this.notificationTitle = error
                     ? translate('Payment failed')
                     : translate("You're all set!");
-                // override title if notification type is success
-                this.useOverrideSuccessNotification();
                 if (error) {
                     submitGtag('zonos-checkout-payment-fail');
                 }
@@ -132,6 +131,8 @@ export class ZonosCheckoutFinish {
                 }
                 // Attempt to pull the order details from the graph every second on 5 attempts. Only pull if checkoutSessionId is available
                 if (this.notificationType === 'success' && cartStore.checkoutSessionId) {
+                    // override title if notification type is success
+                    this.useOverrideSuccessNotification();
                     // wait this to finish before resetting store and checkout session id
                     await this.getPullOrder();
                 }
@@ -145,6 +146,31 @@ export class ZonosCheckoutFinish {
             stripeStoreReset();
             cartStore.checkoutSessionId = null;
         };
+        this.checkPaypalPaymentStatus = async () => {
+            this.isLoading = true;
+            // render error message if there's an error
+            if (paypalStore.paypalErrorMessage) {
+                this.notificationType = 'error';
+                this.notificationTitle = translate('Payment failed');
+                this.notificationMessages = [paypalStore.paypalErrorMessage];
+                this.isLoading = false;
+                return;
+            }
+            if (paypalStore.orderIdCreated) {
+                this.notificationType = 'success';
+                this.notificationTitle = translate("You're all set!");
+                this.notificationMessages =
+                    stripeStoreMessageBasedOnStatus('succeeded').messages;
+                // override title if notification type is success
+                this.useOverrideSuccessNotification();
+                // wait this to finish before resetting store and checkout session id
+                await this.getPullOrder();
+            }
+            this.isLoading = false;
+            stripeStoreReset();
+            paypalStoreReset();
+            cartStore.checkoutSessionId = null;
+        };
         this.closeClickHandler = () => {
             this.closeClick.emit();
         };
@@ -167,17 +193,22 @@ export class ZonosCheckoutFinish {
             this.isLoading = false;
             return;
         }
-        void this.checkPaymentStatus();
+        if (paypalStore.orderIdCreated) {
+            void this.checkPaypalPaymentStatus();
+        }
+        else {
+            void this.checkStripePaymentStatus();
+        }
     }
     render() {
         var _a, _b;
         const orderId = ((_a = this.order) === null || _a === void 0 ? void 0 : _a.accountOrderNumber) || ((_b = this.order) === null || _b === void 0 ? void 0 : _b.id);
         const isTestMode = getIsTestMode();
-        return (h(Host, { key: 'd36ab5e23e09a467b2616ade463baec9626c0157', class: "zonos--checkout-finish zonos--elements", style: {
+        return (h(Host, { key: '4e00e5d3d8de136e4161fdea6afba86616748d66', class: "zonos--checkout-finish zonos--elements", style: {
                 '--border-radius': getBorderRadius({
                     overrideBorderStyle: this.borderRadius,
                 }),
-            } }, this.isLoading && (h("div", { key: '58181470e5a3e75655bde5bf91ac4a857a8144f8', class: "loading-wrapper" }, h("zonos-spinner", { key: 'b1aba8ef89c9fbce271d6c3226f32e0a0dd1561d' }))), !this.isLoading && (h("div", { key: 'd02576373b5a3affc73906e125d443ce12e6c8d6', class: "zonos--finish-details" }, h("div", { key: 'ba06598ed291e565663c5b321e9419215cd2832a', 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: '55c453a319a693280518a4b2c2f502a1cc90dc2a', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), orderId && (h("zonos-badge", { key: '31042753fb3a1ef5155314c1d55abc067c6a6d31', badgeColor: "transparent" }, orderId)), h("zonos-text", { key: 'e9eceec74357986169f829a1c650f1e4b1605245', textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), h("zonos-button", { key: '7c6e8b61be1bf7cc3c84ed369f438af7b1ad60c0', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText)), isTestMode && cartStore.step === 'finish' && (h("div", { key: 'bb567e9a67e6895b7f3c97e6d02584ba9f279acd', class: "zonos--finish-button-wrapper" }, h("zonos-button", { key: '50afe47a9e5d25759b4f82bb619f5de7fc56f260', backgroundColor: "gray-0", buttonColor: "gray-1200", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), h("zonos-button", { key: '6cf9d0d670aa07ade295aa5ef3781dcd65e4d812', onClick: () => this.redirectToUrl(`/orders/all`), size: "lg", variant: "primary" }, "View order in Dashboard")))))));
+            } }, this.isLoading && (h("div", { key: '6b4f755402951c5fd0e5150ccd05542b85ca2121', class: "loading-wrapper" }, h("zonos-spinner", { key: 'a3e6b561c6796891b33d273b9729d0f8fab4a308' }))), !this.isLoading && (h("div", { key: '798bfa6f1ee9f7b682e0d7389654f5b3d1549ba6', class: "zonos--finish-details" }, h("div", { key: 'cd7a52c193aa3bb5ef2e49e6027bf0448de14046', 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: 'b4c5751d55a3ef5d06e68a1065dc017b455a9d1f', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), orderId && (h("zonos-badge", { key: 'd8c13fb55fe83d1caf26efbd037da866b26af108', badgeColor: "transparent" }, orderId)), h("zonos-text", { key: '5ae6e0d1b42e7d0ab578229d8c9eebcd660b78db', textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), h("zonos-button", { key: '0a3447480fe0ddcff91579602621b9ee70ae2a64', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText)), isTestMode && cartStore.step === 'finish' && (h("div", { key: 'c3374a72c1e2d9350f152c7e2016463bf0a7f02e', class: "zonos--finish-button-wrapper" }, h("zonos-button", { key: '7d34001e6798162cbcb1d9ef8949d15617c64362', backgroundColor: "gray-0", buttonColor: "gray-1200", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), h("zonos-button", { key: 'e217f0bde5d4b0df0220983a32ae8853469d1d23', onClick: () => this.redirectToUrl(`/orders/all`), size: "lg", variant: "primary" }, "View order in Dashboard")))))));
     }
     static get is() { return "zonos-checkout-finish"; }
     static get encapsulation() { return "shadow"; }
@@ -228,7 +259,7 @@ export class ZonosCheckoutFinish {
                         "PaymentIntent": {
                             "location": "import",
                             "path": "@stripe/stripe-js",
-                            "id": ""
+                            "id": "node_modules::PaymentIntent"
                         }
                     }
                 },

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

@@ -96,6 +96,7 @@
   transform-origin: bottom left;
   opacity: 0;
   transition: transform 0.3s ease-out, opacity 0.3s ease-out;
+  overscroll-behavior: contain;
 }
 :host .zonos--checkout-footer .zonos--checkout-footer-dialog::-webkit-scrollbar {
   width: 10px;

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

@@ -47,6 +47,7 @@
   display: flex;
   flex-direction: column;
   flex: 1;
+  overscroll-behavior: contain;
 }
 :host .zonos--group::-webkit-scrollbar {
   width: 10px;
@@ -79,10 +80,15 @@
   position: sticky;
   display: flex;
   justify-content: center;
+  flex-direction: column;
+  gap: 12px;
   bottom: 0;
-  margin-top: 12px;
+  padding-top: 12px;
   background: var(--primary-color, var(--zonos-elements-gray-0));
 }
+:host .zonos--group-btn zonos-text {
+  text-align: center;
+}
 :host .zonos--group-btn zonos-button {
   width: 100%;
 }

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

@@ -1,5 +1,6 @@
 import { h, Host, } from "@stencil/core";
 import { cartStore } from "../../../store/checkout/cart";
+import { paypalStore, paypalStoreHasPaypalEnabled, } from "../../../store/checkout/paypal";
 import { stripeStore } from "../../../store/checkout/stripe";
 import { translate } from "../../../store/translationStore";
 import { getIsTestMode } from "../../../utils/checkout/getIsTestMode";
@@ -23,9 +24,9 @@ export class ZonosCheckoutPayment {
                 this.showErrorBanner = true;
                 return;
             }
-            this.continueClicked.emit();
             // submit google tag when the form is complete
             submitGtag('zonos-checkout-payment-info');
+            this.continueClicked.emit();
         };
         this.copyCardToClipboard = (cardNumber) => {
             void navigator.clipboard.writeText(cardNumber);
@@ -35,7 +36,6 @@ export class ZonosCheckoutPayment {
                 type: 'success',
             });
         };
-        this.paymentError = false;
         this.submitBtnType = undefined;
         this.continueLoading = false;
         this.submitBtnColor = undefined;
@@ -50,14 +50,17 @@ export class ZonosCheckoutPayment {
             this.showErrorBanner = !this.handleValidate();
         }
         const isTestMode = getIsTestMode();
-        return (h(Host, { class: "zonos--checkout-payment zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Payment method')), this.showErrorBanner && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('Missing required fields. Make sure all fields are completed.'))), this.paymentError && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, translate("We couldn't complete your payment. Please verify the payment details and try again."))), h("zonos-payment", null), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
+        const hasPaypalEnabled = paypalStoreHasPaypalEnabled();
+        return (h(Host, { class: "zonos--checkout-payment zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Payment method')), this.showErrorBanner && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('Missing required fields. Make sure all fields are completed.'))), stripeStore.hasPaymentError && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, translate("We couldn't complete your payment. Please verify the payment details and try again."))), paypalStore.paypalErrorMessage && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, paypalStore.paypalErrorMessage)), h("zonos-payment", null), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode
             variant: this.submitBtnType }, translate('Pay [orderTotal]', {
             orderTotal: currencyFormat({
                 amount: cartStore.total,
                 currency: cartStore.currency,
             }),
-        }))), isTestMode && (h("zonos-card", { backgroundColor: "gray-100", borderRadius: 12, class: "zonos--test-cards" }, h("zonos-v-stack", { spacing: 16 }, h("div", null, h("zonos-text", { type: "semiBoldLabel" }, translate('Test cards')), h("zonos-text", { textColor: "gray-700" }, translate('Click to copy the card number. Use any future expiration date and three number CVC.'))), h("zonos-button", { icon: h("zonos-icon", { content: CheckmarkLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4242424242424242') }, translate('Success'), " (****4242)"), h("zonos-button", { icon: h("zonos-icon", { content: RemoveLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4000000000000002') }, translate('Failure'), " (****0002)")), h("zonos-notification", null))))));
+        })), hasPaypalEnabled && (h("zonos-text", { type: "smallHeader" }, translate('or'))), h("zonos-paypal-payment", { onPaypalSessionDone: ({ detail: { orderId } }) => {
+                this.paypalSessionDone.emit(orderId);
+            }, onPaypalSessionFail: () => this.paypalSessionFailed.emit() })), isTestMode && (h("zonos-card", { backgroundColor: "gray-100", borderRadius: 12, class: "zonos--test-cards" }, h("zonos-v-stack", { spacing: 16 }, h("div", null, h("zonos-text", { type: "semiBoldLabel" }, translate('Test cards')), h("zonos-text", { textColor: "gray-700" }, translate('Click to copy the card number. Use any future expiration date and three number CVC.'))), h("zonos-button", { icon: h("zonos-icon", { content: CheckmarkLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4242424242424242') }, translate('Success'), " (****4242)"), h("zonos-button", { icon: h("zonos-icon", { content: RemoveLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4000000000000002') }, translate('Failure'), " (****0002)")), h("zonos-notification", null))))));
     }
     static get is() { return "zonos-checkout-payment"; }
     static get encapsulation() { return "scoped"; }
@@ -73,24 +76,6 @@ export class ZonosCheckoutPayment {
     }
     static get properties() {
         return {
-            "paymentError": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Error occurred during payment"
-                },
-                "attribute": "payment-error",
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "submitBtnType": {
                 "type": "string",
                 "mutable": false,
@@ -171,6 +156,36 @@ export class ZonosCheckoutPayment {
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "paypalSessionFailed",
+                "name": "paypalSessionFailed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event to emit when the paypal session failed"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "paypalSessionDone",
+                "name": "paypalSessionDone",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event to emit when the paypal session is done"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
             }];
     }
 }

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

@@ -31,6 +31,9 @@
   -webkit-font-smoothing: antialiased;
 }
 
+:host * {
+  overscroll-behavior: contain;
+}
 :host *::-webkit-scrollbar {
   width: 10px;
 }

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

@@ -1,6 +1,7 @@
 import { Fragment, h, Host, } from "@stencil/core";
-import { cartStore, cartStoreNextStep, cartStoreReset, cartStoreResetTabItems, cartStoreUpdateItems, cartStoreUpdateToErrorState, } from "../../store/checkout/cart";
-import { initStripeElements, stripeStore, stripeStoreCleanupDomesticShippingSession, stripeStoreConfirmPayment, stripeStoreInitCheckoutSession, stripeStorePrefetchLandedCost, stripeStoreReset, } from "../../store/checkout/stripe";
+import { cartStore, cartStoreClearCheckoutInterval, cartStoreNextStep, cartStoreReset, cartStoreResetTabItems, cartStoreStartCheckoutInterval, cartStoreUpdateItems, cartStoreUpdateToErrorState, } from "../../store/checkout/cart";
+import { paypalInitScript } from "../../store/checkout/paypal";
+import { initStripeElements, stripeStore, stripeStoreCleanupDomesticShippingSession, stripeStoreConfirmPayment, stripeStoreHandleInventoryCheck, stripeStoreInitCheckoutSession, stripeStorePrefetchLandedCost, stripeStoreReset, } from "../../store/checkout/stripe";
 import { localizationStore, localizationStoreOnUpdate, } from "../../store/hello/localization";
 import { translate } from "../../store/translationStore";
 import { getZonosStoreTheme, zonosStore, } from "../../store/zonosStore";
@@ -62,7 +63,6 @@ export class ZonosCheckout {
         this.open = this.forceDialogOpen;
         this.stripe = window.Zonos.stripe;
         this.submitLoading = false;
-        this.paymentError = false;
         this.collapseReviewMobile = true;
         this.isAttachError = false;
         this.isMobile = false;
@@ -72,8 +72,6 @@ export class ZonosCheckout {
         this.legacyCheckoutHiddenBtnSelector = '#legacy-checkout-hidden-button';
         this.isLegacyCheckout = false;
         this.confirmDialogOpen = false;
-        this.showSessionTimoutScreen = false;
-        this.checkoutTimeoutInterval = null;
         this.inventoryCheckErrorMessage = null;
     }
     /**
@@ -115,7 +113,7 @@ export class ZonosCheckout {
         // reset the tab item, so that user needs to click on Continue button to re-quote the landed cost if needed.
         cartStoreResetTabItems();
         // clear the checkout session timeout timer when checkout dialog close action is triggered
-        this.clearCheckoutTimeoutInterval();
+        cartStoreClearCheckoutInterval();
         /**
          * Trigger callback when the checkout is closed
          */
@@ -148,30 +146,6 @@ export class ZonosCheckout {
         await this.applyStripeTheme();
         return true;
     }
-    clearCheckoutTimeoutInterval() {
-        if (this.checkoutTimeoutInterval) {
-            clearTimeout(this.checkoutTimeoutInterval);
-            this.checkoutTimeoutInterval = null;
-        }
-    }
-    startCheckoutTimeoutInterval() {
-        // do nothing if in preview mode
-        if (this.preview) {
-            return;
-        }
-        const timeoutQuery = new URLSearchParams(window.location.search).get('zonosCheckoutTimeout');
-        const timeout = 
-        // timeout query is mainly for testing purpose
-        timeoutQuery && !isNaN(parseInt(timeoutQuery, 10))
-            ? parseInt(timeoutQuery, 10)
-            : CHECKOUT_SESSION_TIMEOUT;
-        log(`==START CHECKOUT TIMEOUT - ${timeout}==`);
-        // start a timer to validate the price
-        this.checkoutTimeoutInterval = setTimeout(() => {
-            // Show session timeout alert
-            this.showSessionTimoutScreen = true;
-        }, timeout);
-    }
     reloadCheckoutSession() {
         window.location.reload();
     }
@@ -212,7 +186,10 @@ export class ZonosCheckout {
                         throw new Error('Error building cart');
                     }
                     // start the timer to validate the price
-                    this.startCheckoutTimeoutInterval();
+                    cartStoreStartCheckoutInterval({
+                        isPreview: this.preview,
+                        sessionTimeout: CHECKOUT_SESSION_TIMEOUT,
+                    });
                     submitGtag('zonos-checkout-start');
                     void trackConversionEvent('checkout_open');
                 }
@@ -379,6 +356,10 @@ export class ZonosCheckout {
         const interval = setInterval(() => {
             if (cartStore.landedCostData || !stripeStore.isFetchingLandedCost) {
                 if (cartStore.landedCostData) {
+                    // start init paypal with the presentment currency when landed cost is fetched
+                    void paypalInitScript({
+                        currency: cartStore.currency,
+                    });
                     // only go to next step if landed cost data is ready
                     cartStoreNextStep();
                 }
@@ -397,41 +378,31 @@ export class ZonosCheckout {
     }
     handleInventoryCheckDialogCancel() {
         // reset inventory check message to close the inventory check alert
-        this.inventoryCheckErrorMessage = null;
+        cartStore.inventoryCheckErrorMessage = null;
     }
     handleInventoryCheckDialogConfirm() {
         // reset inventory check message to close the inventory check alert
-        this.inventoryCheckErrorMessage = null;
+        cartStore.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() {
+    async handleStripePaymentContinue() {
         // reset error state
-        this.paymentError = false;
+        stripeStore.hasPaymentError = false;
         this.submitLoading = true;
         // reset inventory check message
-        this.inventoryCheckErrorMessage = null;
+        cartStore.inventoryCheckErrorMessage = null;
         try {
             // check inventory before proceeding to payment
-            this.inventoryCheckErrorMessage = await this.handleInventoryCheck();
+            cartStore.inventoryCheckErrorMessage =
+                await stripeStoreHandleInventoryCheck();
         }
         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.');
+            cartStore.inventoryCheckErrorMessage = translate('Unable to check inventory. Please try again.');
         }
         // Don't proceed to payment if there's an error message
-        if (this.inventoryCheckErrorMessage) {
+        if (cartStore.inventoryCheckErrorMessage) {
             // stop the submit loading state
             this.submitLoading = false;
             return;
@@ -440,11 +411,11 @@ export class ZonosCheckout {
             await stripeStoreConfirmPayment();
             cartStoreNextStep();
             // clear the checkout session timeout timer when purchase is complete
-            this.clearCheckoutTimeoutInterval();
+            cartStoreClearCheckoutInterval();
         }
         catch (err) {
             logError(err);
-            this.paymentError = true;
+            stripeStore.hasPaymentError = true;
         }
         this.submitLoading = false;
     }
@@ -560,14 +531,16 @@ export class ZonosCheckout {
                 this.isMobile ? '--zonos-elements-gray-0' : null }), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))));
         };
         const renderContent = () => {
-            if (this.showSessionTimoutScreen) {
+            if (cartStore.checkoutSessionTimeoutShow) {
                 return (h("zonos-rest-state", { class: "zonos--session-timeout", restStateSubtitle: translate('Your checkout session has expired. Please reload the page to continue.'), restStateTitle: translate('Session timed out'), restStateType: 'Warning' }, h("zonos-button", { onClick: () => this.reloadCheckoutSession(), variant: "primary" }, translate('Reload'))));
             }
             return (h("div", { class: 'zonos--content', style: {
                     '--border-radius': getBorderRadius({ overrideBorderStyle: style }),
                 } }, cartStore.step !== 'finish' && cartStore.step !== 'error' && (h(Fragment, null, h("div", { class: "zonos--left", "data-theme": leftSideTheme, style: {
                     '--primary-color': !this.isMobile ? colorPrimary : '',
-                } }, !this.isMobile && renderTopHeader(), cartStore.step === 'customer-info' && (h("zonos-customer-info", { continueLoading: this.submitLoading, defaultAddress: this.defaultAddress, isMobile: this.isMobile, onContinueClicked: () => this.handleCustomerInfoContinue(), submitBtnColor: submitButtonColor })), cartStore.step === 'shipping' && (h("zonos-shipping", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleShippingContinue(), submitBtnColor: submitButtonColor })), cartStore.step === 'payment' && (h("zonos-checkout-payment", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleCheckoutPaymentContinue(), paymentError: this.paymentError, submitBtnColor: submitButtonColor }))), h("div", { class: "zonos--right", "data-theme": rightSideTheme }, this.isMobile && renderTopHeader(), !this.isLegacyCheckout && (h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.closeDialogHandler() })), h("div", { class: "flex--wrapper" }, h("div", { class: "zonos--wrapper" }, h("zonos-review", { collapsed: this.collapseReviewMobile, mobile: this.isMobile, onClick: () => {
+                } }, !this.isMobile && renderTopHeader(), cartStore.step === 'customer-info' && (h("zonos-customer-info", { continueLoading: this.submitLoading, defaultAddress: this.defaultAddress, isMobile: this.isMobile, onContinueClicked: () => this.handleCustomerInfoContinue(), submitBtnColor: submitButtonColor })), cartStore.step === 'shipping' && (h("zonos-shipping", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleShippingContinue(), submitBtnColor: submitButtonColor })), cartStore.step === 'payment' && (h("zonos-checkout-payment", { continueLoading: this.submitLoading, onContinueClicked: async () => {
+                    await this.handleStripePaymentContinue();
+                }, submitBtnColor: submitButtonColor }))), h("div", { class: "zonos--right", "data-theme": rightSideTheme }, this.isMobile && renderTopHeader(), !this.isLegacyCheckout && (h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.closeDialogHandler() })), h("div", { class: "flex--wrapper" }, h("div", { class: "zonos--wrapper" }, h("zonos-review", { collapsed: this.collapseReviewMobile, mobile: this.isMobile, onClick: () => {
                     // do nothing if it's not mobile
                     if (!this.isMobile) {
                         return;
@@ -596,9 +569,9 @@ export class ZonosCheckout {
             // Mark user selected confirm to close the dialog
             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,
+            dialogOpen: !!cartStore.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: () => {
+            dialogSubtitle: cartStore.inventoryCheckErrorMessage, dialogTitle: translate("Couldn't place order"), dialogType: "alert", onCancelClicked: () => {
                 this.handleInventoryCheckDialogCancel();
             },
             // Mark user selected confirm to close the dialog
@@ -727,7 +700,6 @@ export class ZonosCheckout {
             "open": {},
             "stripe": {},
             "submitLoading": {},
-            "paymentError": {},
             "collapseReviewMobile": {},
             "isAttachError": {},
             "isMobile": {},
@@ -737,8 +709,6 @@ export class ZonosCheckout {
             "legacyCheckoutHiddenBtnSelector": {},
             "isLegacyCheckout": {},
             "confirmDialogOpen": {},
-            "showSessionTimoutScreen": {},
-            "checkoutTimeoutInterval": {},
             "inventoryCheckErrorMessage": {}
         };
     }
@@ -798,7 +768,7 @@ export class ZonosCheckout {
                         "PaymentIntent": {
                             "location": "import",
                             "path": "@stripe/stripe-js",
-                            "id": ""
+                            "id": "node_modules::PaymentIntent"
                         }
                     },
                     "return": "Promise<void>"

package/dist/collection/components/checkout/zonos-checkout/zonos-customer-info/zonos-customer-info.css

@@ -61,6 +61,7 @@
   margin-bottom: 20px;
   overflow: auto;
   padding: 5px;
+  overscroll-behavior: contain;
 }
 :host .zonos--group::-webkit-scrollbar {
   width: 10px;

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

@@ -49,6 +49,7 @@
   margin-bottom: 20px;
   overflow: auto;
   padding: 5px;
+  overscroll-behavior: contain;
 }
 :host .zonos--group::-webkit-scrollbar {
   width: 10px;

package/dist/collection/components/common/zonos-country-select/zonos-country-select.css

@@ -51,6 +51,14 @@
   padding: 16px;
   padding-top: 0px;
 }
+:host .zonos--country-select .zonos--country-select-content .no-country {
+  position: absolute;
+  left: 17px;
+}
+:host .zonos--country-select .zonos--country-select-content .zonos--country-filter-content {
+  height: 300px;
+  display: block;
+}
 :host .zonos--country-select .zonos--country-select-country {
   display: flex;
   gap: 16px;

package/dist/collection/components/common/zonos-country-select/zonos-country-select.js

@@ -1,6 +1,7 @@
 import { h, Host } from "@stencil/core";
 import Fuse from "fuse.js";
 import { localizationStore, localizationStoreUpdateSelectedCountryCode, } from "../../store/hello/localization";
+import { translate } from "../../store/translationStore";
 import { zonosStoreFontFamily } from "../../store/zonosStore";
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
 import GreenCheckDuotoneIcon from "./assets/greenCheckDuotone.svg";
@@ -16,7 +17,7 @@ export class ZonosCountrySelect {
             const input = event.target;
             this.inputValue = input.value;
             // query the country list container
-            const countryListSelector = (_a = this.ele.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.zonos--country-select');
+            const countryListSelector = (_a = this.ele.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.zonos--country-filter-content');
             // scroll to top every time the input changes
             if (countryListSelector) {
                 countryListSelector.scrollTop = 0;
@@ -28,21 +29,30 @@ export class ZonosCountrySelect {
     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();
+        (_b = (_a = this.ele.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.zonos--country-filter-content')) === null || _b === void 0 ? void 0 : _b.focus();
     }
     render() {
         const { helloCountryList } = localizationStore;
         const countries = helloCountryList ? Object.values(helloCountryList) : [];
         const fuse = new Fuse(countries, {
+            includeScore: true,
             keys: ['displayName'],
+            threshold: 0.3,
         });
         const fuseObject = fuse.search(this.inputValue.toLowerCase());
         const filteredCountries = this.inputValue
             ? fuseObject.map(country => country.item)
             : countries.sort((a, b) => a.displayName.localeCompare(b.displayName));
-        return (h(Host, { key: '2337dcb4bbca5520cb6a4e9426167916c548ef59', class: "zonos--elements", style: {
+        const isEmpty = !filteredCountries.length;
+        return (h(Host, { key: '1e17d188428f8caeb495389f7870c3052d3cfb4a', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '7cb0f80536b6e89f23be24cc4860e84bfa7ab362', class: "zonos--country-select" }, h("zonos-v-stack", { key: 'fef186dbafd5e4d16e6f1486d3122c1297ef7f2d', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: '19ad548f3ab7aa6afdeaacd48d8b7c5821ba13e1', handleOnClose: () => this.handleOnClose(), label: "Select a country" }, h("input", { key: 'f7367680dbde6fb432dc778aed5a94291d1226c4', class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Search countries", value: this.inputValue }))), h("div", { key: 'e0765ab18a86a913edd7eec82452c0a9e5291f86', class: "zonos--country-select-content" }, filteredCountries.map(country => (h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, h("zonos-country-flag", { class: "zonos--country-flag", countryCode: country.code }), h("zonos-text", { textColor: "gray-800" }, country.displayName), country.code === localizationStore.selectedCountryCode && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 20 })))))))));
+            } }, h("div", { key: '2f6d0f239a4fad7c48349878b53dc8cb426aa022', class: "zonos--country-select" }, h("zonos-v-stack", { key: '76ad667603fce800457dae6d8951abe97e5db9d8', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: '091416c3c6b91d3b50dd033d8bca0df79841871b', handleOnClose: () => this.handleOnClose(), label: translate('Select a country') }, h("input", { key: '0c5d12e941bf7824594ebdd4b353ba833b6d9418', class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: translate('Search countries'), value: this.inputValue }))), h("div", { key: '9ff13fd2b3528ddff2bd379baa0b2ec919a6f928', class: "zonos--country-select-content" }, isEmpty && (h("zonos-text", { key: '9cf46a7a706d335930eeedcc3663571c5dbaaafc', class: "no-country", textColor: "gray-800" }, translate('No countries found'))), h("zonos-virtual-scroll", { key: '297237f0e2179ea95a49ae4872f6cc216026dd47', class: "zonos--country-filter-content", fallbackItemHeight: 34, itemHeights: filteredCountries.map(() => 34), renderItem: index => {
+                const country = filteredCountries[index];
+                if (!country) {
+                    return null;
+                }
+                return (h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, h("zonos-country-flag", { class: "zonos--country-flag", countryCode: country.code }), h("zonos-text", { textColor: "gray-800" }, country.displayName), country.code === localizationStore.selectedCountryCode && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 20 }))));
+            } })))));
     }
     static get is() { return "zonos-country-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-custom-message/zonos-custom-message.js

@@ -8,9 +8,9 @@ export class ZonosCustomMessage {
     }
     render() {
         const messageWithLinks = formatStringWithLinks(this.message);
-        return (h(Host, { key: '37b59a5aad442e9c20b8ed03672c73c315b45538', class: "zonos--elements", style: {
+        return (h(Host, { key: 'd6d31b58cf5396c136d81a5969b418c79229c930', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, this.message && (h("zonos-card", { key: '5de7e44deb7c0544789a9d2b306fc8b2cad338b8', class: "zonos--custom-message", spacing: "12px" }, h("div", { key: 'c911e94eb1d7cbaf1db2126d14a6eeed8932ff97', class: "zonos--flex-message" }, h("zonos-icon", { key: '35c7f483046b78e9dffe87370d6b2f9435bc0ec1', "aria-label": "Custom message icon", content: this.icon }), h("zonos-text", { key: 'fdbc136b2a01fd5df35a3b01aa82bb9d088083e0', innerHTML: messageWithLinks }))))));
+            } }, this.message && (h("zonos-card", { key: '4c62131117e23bbe475fb6f59a5e9bba8bc7d552', class: "zonos--custom-message", spacing: "12px" }, h("div", { key: '7ec3cbde2204fe0fa3b52844109bf0379677d567', class: "zonos--flex-message" }, h("zonos-icon", { key: 'cad94039767bd3d93fe9995aee34e8eb42fb707c', "aria-label": "Custom message icon", content: this.icon }), h("zonos-text", { key: 'f5bd77fafded83fefd99c45f0a78cf5c72459e47', innerHTML: messageWithLinks }))))));
     }
     static get is() { return "zonos-custom-message"; }
     static get encapsulation() { return "shadow"; }

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

@@ -59,7 +59,7 @@ export class ZonosDialog {
         const borderStyle = getBorderRadius({
             overrideBorderStyle: this.borderStyle,
         });
-        return (h(Host, { key: '018771d0e01311ae520abcf33fbd64316794b202', class: classes([
+        return (h(Host, { key: '03735385e07c7f6c8a87df42ad95f8c9d9533668', class: classes([
                 'zonos--elements',
                 this.open && 'open',
                 this.isLoading && 'is-loading',
@@ -71,10 +71,10 @@ export class ZonosDialog {
                 '--height': this.height || 'initial',
                 '--min-height': this.minHeight || '500px',
                 '--width': this.width,
-            } }, h("div", { key: 'a86c9f8465054fde894bbdd71149e59d97e8cbcf', class: "zonos--backdrop" }), h("div", { key: 'b2f0c86fa0e768474ba4d522f8c2b8157f89cd56', class: "zonos--dialog-layout", inert: !this.open, onClick: this.clickOutsideDialogHandler }, h("div", { key: '26cd8a7b98d38c53dcf4789c8781f0c1ced99633', class: "zonos--dialog" }, this.isLoading && (h("div", { key: '34d0ba841a9af9ca2ff6d21d0471113cc86cdec3', class: "zonos--loading" }, h("zonos-spinner", { key: '0109778b1a9734de0959035e3975414fb1cac1be', size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { key: 'f80a4c337727500ee1ad92c1d80d7b3088eccc0f', class: "zonos--header" }, this.headerText && (h("h3", { key: '92b078fbbcd9ca5f8bf178fc67f2bee817d1e961', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: '698e45fffd466f22b6179aa220d35fe39ee5374c', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler, variant: "subtle" })))), h("div", { key: 'a4012e5a48d5fbcc77cac038d8a39fe05f332008', class: classes([
+            } }, h("div", { key: 'da5d599e1a247f7e3364e6f5c9b2eae3db9539f5', class: "zonos--backdrop" }), h("div", { key: 'cda1a996d9521c2e0b307f7a03ca3ee3d4915b8d', class: "zonos--dialog-layout", inert: !this.open, onClick: this.clickOutsideDialogHandler }, h("div", { key: '471d8a069d4f580233bdb3e9e971efdb268ef57d', class: "zonos--dialog" }, this.isLoading && (h("div", { key: '57220007aabcaef133c2c0782fa238cc43d63964', class: "zonos--loading" }, h("zonos-spinner", { key: '0298b754341abd61ec07706128d05df5332f915d', size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { key: '5103dbc1c7593a8042505f767d8290825f9d10e7', class: "zonos--header" }, this.headerText && (h("h3", { key: 'a2d9cd4c8cb359aa64cf104a172ca960068c20a0', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: 'de9bf8a949344d19fcb8bfb496719282553be194', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler, variant: "subtle" })))), h("div", { key: '1ec2cdca0f186cd0b28602580022ed0cb4b0eec9', class: classes([
                 'zonos--body',
                 this.noBodyPadding && 'zonos--no-body-padding',
-            ]) }, h("slot", { key: 'd64b381cb91afde4ddbde58348a62612d9871c8e' })), h("slot", { key: '4ddd73bfe41ecd1c90b18f82a8d8f12a1eacf144', name: "dialog-footer" })))));
+            ]) }, h("slot", { key: '5071d921f48bf792a951a390d83b121e32771668' })), h("slot", { key: 'c1818ac301afc845f5b14fd0f2ac9a1fd3a27b99', name: "dialog-footer" })))));
     }
     static get is() { return "zonos-dialog"; }
     static get encapsulation() { return "shadow"; }