@zonos/elements 1.3.38 → 1.3.40

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();
     }
@@ -191,6 +165,9 @@ export class ZonosCheckout {
                 // do nothing if event is already attached
                 return;
             }
+            log(`attached event to button ${buttonAnchorSelector}`, 'info', {
+                button,
+            });
             button.addEventListener('click', async (e) => {
                 // do nothing if it's not shippable country
                 if (!isShippableCountry()) {
@@ -209,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');
                 }
@@ -223,6 +203,10 @@ export class ZonosCheckout {
                         title: translate('Error creating Checkout'),
                     });
                 }
+            }, {
+                // Trigger this event before any other event
+                capture: true,
+                passive: false,
             });
             if (!zonosStore.checkoutSettings.disablePlaceOrderButtonActivation) {
                 button.removeAttribute('disabled');
@@ -372,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();
                 }
@@ -390,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;
@@ -433,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;
     }
@@ -553,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;
@@ -589,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
@@ -720,7 +700,6 @@ export class ZonosCheckout {
             "open": {},
             "stripe": {},
             "submitLoading": {},
-            "paymentError": {},
             "collapseReviewMobile": {},
             "isAttachError": {},
             "isMobile": {},
@@ -730,8 +709,6 @@ export class ZonosCheckout {
             "legacyCheckoutHiddenBtnSelector": {},
             "isLegacyCheckout": {},
             "confirmDialogOpen": {},
-            "showSessionTimoutScreen": {},
-            "checkoutTimeoutInterval": {},
             "inventoryCheckErrorMessage": {}
         };
     }
@@ -791,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/main/zonos-controller.js

@@ -93,22 +93,22 @@ export class ZonosController {
         // running with scope async function to avoid blocking the main thread
         (async () => {
             var _a, _b;
-            const { errors, json } = await getZonosSettings();
+            const { errors, json, zonosMode } = await getZonosSettings();
             if (((_a = errors[0]) === null || _a === void 0 ? void 0 : _a.type.toString()) === '403') {
                 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
-            });
+            // override subscription status
+            const config = Object.assign(Object.assign({}, this.config), { checkoutSettings: this.config.checkoutSettings
+                    ? Object.assign(Object.assign({}, this.config.checkoutSettings), { subscriptionStatus: undefined }) : undefined });
             // load default setting if fail to load user setting
             zonosStoreInitSetting({
                 overrideSettings: config,
                 zonosSettings: json,
             });
+            zonosStore.zonosMode = zonosMode;
             // setup google font after store loaded
             void this.setupGoogleFont();
             if (zonosStore.helloSettings) {
@@ -136,7 +136,6 @@ export class ZonosController {
             this.stripeInitEvent.emit({
                 publishableKey: publishableKey.token,
             });
-            log('zonos controller loaded');
         })();
     }
     /**
@@ -187,7 +186,7 @@ export class ZonosController {
         zonosStore.organizationName = organizationName;
     }
     render() {
-        return h(Host, { key: '209a2ea0249b9561b5ca1f84f7d31b1520ef49fe', class: "zonos--elements" });
+        return h(Host, { key: '4d1ae97e6273df35aeab31462394a189c17090b6', class: "zonos--elements" });
     }
     static get is() { return "zonos-controller"; }
     static get encapsulation() { return "shadow"; }
@@ -245,6 +244,21 @@ export class ZonosController {
     }
     static get events() {
         return [{
+                "method": "paypalInitEvent",
+                "name": "paypalInitEvent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted to initialize paypal"
+                },
+                "complexType": {
+                    "original": "{ paypalClientId: string }",
+                    "resolved": "{ paypalClientId: string; }",
+                    "references": {}
+                }
+            }, {
                 "method": "stripeInitEvent",
                 "name": "stripeInitEvent",
                 "bubbles": true,
@@ -279,7 +293,7 @@ export class ZonosController {
                         "Stripe": {
                             "location": "import",
                             "path": "@stripe/stripe-js",
-                            "id": ""
+                            "id": "node_modules::Stripe"
                         }
                     },
                     "return": "Promise<void>"

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

@@ -0,0 +1,37 @@
+: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;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host {
+  display: inline-flex;
+  flex-direction: column;
+}

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

@@ -0,0 +1,92 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { h, Host, } from "@stencil/core";
+import { paypalStoreInitButtons } from "../store/checkout/paypal";
+import { log } from "../utils/logging/log";
+/**
+ * This component is a wrapper for the paypal authentication element that would render default style object
+ */
+export class ZonosPaypalPayment {
+    async loadPaypal() {
+        if (!window.Zonos.paypal) {
+            log('Paypal is not available');
+            return;
+        }
+        // Init paypal store buttons
+        const paypalButtons = paypalStoreInitButtons({
+            onPaypalFail: () => {
+                log('onPaypalFail');
+                this.paypalSessionFail.emit();
+            },
+            onPaypalSessionDone: ({ orderId }) => {
+                log('onPaypalSessionDone', 'info', { orderId });
+                this.paypalSessionDone.emit({ orderId });
+            },
+        });
+        if (!(paypalButtons === null || paypalButtons === void 0 ? void 0 : paypalButtons.length)) {
+            log('There are no paypal buttons available');
+            return;
+        }
+        const container = this.el.querySelector('.zonos--payment-paypal-container');
+        if (!container) {
+            log('Cannot find container element for paypal buttons');
+            return;
+        }
+        // render paypal buttons
+        paypalButtons.forEach(async (paypalButton) => {
+            await paypalButton.render(container);
+        });
+    }
+    componentDidLoad() {
+        // @Watch doesn't get trigger on initial load
+        void this.loadPaypal();
+    }
+    render() {
+        return (h(Host, { key: '036a9d43da99e1c08293936d89ca5f97d5acdf10', class: "zonos--paypal-payment zonos--elements" }, h("div", { key: 'f38290dce670024e001d8219d2d8d1e9fde1f9e2', class: "zonos--payment-paypal-container" })));
+    }
+    static get is() { return "zonos-paypal-payment"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-paypal-payment.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-paypal-payment.css"]
+        };
+    }
+    static get events() {
+        return [{
+                "method": "paypalSessionDone",
+                "name": "paypalSessionDone",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event to emit when the paypal session is done"
+                },
+                "complexType": {
+                    "original": "{ orderId: string }",
+                    "resolved": "{ orderId: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "paypalSessionFail",
+                "name": "paypalSessionFail",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event to emit when the paypal session is failed"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/store/checkout/cart.js

@@ -8,11 +8,14 @@ import { log } from "../../utils/logging/log";
 import { logError } from "../../utils/logging/logError";
 const { onChange, reset, state: cartStore, } = createStore(() => ({
     checkoutSessionId: sessionStorage.getItem('zonos--checkout-session-id') || null,
+    checkoutSessionTimeoutShow: false,
+    checkoutTimeoutInterval: null,
     currency: 'USD',
     doneSteps: [],
     dutiesTaxFees: 0,
     error: null,
     exchangeRate: null,
+    inventoryCheckErrorMessage: null,
     isSelectedShippingAboveDeminimis: false,
     isSelectedShippingGuarantee: false,
     items: [],
@@ -219,6 +222,28 @@ onChange('checkoutSessionId', () => {
     }
     sessionStorage.setItem('zonos--checkout-session-id', cartStore.checkoutSessionId);
 });
+const cartStoreStartCheckoutInterval = ({ isPreview, sessionTimeout, }) => {
+    // do nothing if in preview mode
+    if (isPreview) {
+        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)
+        : sessionTimeout;
+    log(`==START CHECKOUT TIMEOUT - ${timeout}==`);
+    cartStore.checkoutTimeoutInterval = setTimeout(() => {
+        cartStore.checkoutSessionTimeoutShow = true;
+    }, timeout);
+};
+const cartStoreClearCheckoutInterval = () => {
+    if (cartStore.checkoutTimeoutInterval) {
+        clearTimeout(cartStore.checkoutTimeoutInterval);
+        cartStore.checkoutTimeoutInterval = null;
+    }
+};
 const getCartItemToUse = (items) => items.map(item => (Object.assign(Object.assign({}, item), { isRestricted: false })));
 const cartStoreResetCartItems = () => {
     // mark all items as not restricted
@@ -276,4 +301,4 @@ const cartStoreResetTabItems = () => {
     cartStore.tabItems = Object.assign(Object.assign({}, cartStore.tabItems), { 'customer-info': Object.assign(Object.assign({}, cartStore.tabItems['customer-info']), { isDone: false }), payment: Object.assign(Object.assign({}, cartStore.tabItems.payment), { isDone: false }), shipping: Object.assign(Object.assign({}, cartStore.tabItems.shipping), { isDone: false }) });
     cartStoreResetSelectedShippingOption();
 };
-export { cartStore, cartStoreApplySubtotals, cartStoreCheckItemRestrictions, cartStoreGetShippingTransitInfo, cartStoreHasOneEligibleItem, cartStoreNextStep, cartStoreReCalculateTotal, cartStoreReset, cartStoreResetCartItems, cartStoreResetTabItems, cartStoreUpdateItems, cartStoreUpdateSelectedShippingOption, cartStoreUpdateToErrorState, };
+export { cartStore, cartStoreApplySubtotals, cartStoreCheckItemRestrictions, cartStoreClearCheckoutInterval, cartStoreGetShippingTransitInfo, cartStoreHasOneEligibleItem, cartStoreNextStep, cartStoreReCalculateTotal, cartStoreReset, cartStoreResetCartItems, cartStoreResetTabItems, cartStoreStartCheckoutInterval, cartStoreUpdateItems, cartStoreUpdateSelectedShippingOption, cartStoreUpdateToErrorState, };