@zonos/elements 1.3.207 → 1.3.209

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1c710d00.js');
-const zonosStore = require('./zonosStore-7c1e1bc1.js');
+const zonosStore = require('./zonosStore-f8ee56aa.js');
 const classes = require('./classes-b7918f56.js');
-const getBorderRadius = require('./getBorderRadius-c424eb05.js');
+const getBorderRadius = require('./getBorderRadius-1b5e33cf.js');
 require('./VarianceTest-0cb1e118.js');
 
 const zonosCardCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--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 .styled-card{border:var(--zonos-elements-border);border-radius:var(--zonos--border-radius, var(--zonos-elements-radius-6));padding:var(--spacing, 24px);text-align:left;background-color:var(--zonos--background-color);overflow:hidden}:host .styled-card hr{margin-left:calc(var(--spacing, 24px) * -1);margin-right:calc(var(--spacing, 24px) * -1)}:host .styled-card .card-header{margin:calc(var(--spacing, 24px) * -1);padding:var(--spacing, 24px);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-bottom:var(--spacing, 24px);border-bottom:var(--zonos-elements-border);height:65px;line-height:65px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .styled-card .card-header h5{margin-bottom:0;-ms-flex:1;flex:1}:host .styled-card .card-footer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;margin:calc(var(--spacing, 24px) * -1);padding:var(--spacing, 24px);border-top:var(--zonos-elements-border);background:var(--zonos-elements-surface-color-secondary);margin-top:var(--spacing, 24px);border-bottom-left-radius:var(--zonos-elements-radius-8);border-bottom-right-radius:var(--zonos-elements-radius-8);height:var(--footerHeight)}";

package/dist/cjs/zonos-cart-items_14.cjs.entry.js

@@ -3,20 +3,22 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1c710d00.js');
-const cart = require('./cart-3d961c6e.js');
-const localization = require('./localization-ff33875b.js');
+const cart = require('./cart-2ec8cac2.js');
+const localization = require('./localization-9b43376c.js');
 const classes = require('./classes-b7918f56.js');
-const paypal = require('./paypal-dee5c109.js');
-const zonosStore = require('./zonosStore-7c1e1bc1.js');
-const handleFetch = require('./handleFetch-969d05d8.js');
+const paypal = require('./paypal-6449314e.js');
+const zonosStore = require('./zonosStore-f8ee56aa.js');
+const handleFetch = require('./handleFetch-05227713.js');
 const createCustomEvent = require('./createCustomEvent-7b6fad95.js');
-const getBorderRadius = require('./getBorderRadius-c424eb05.js');
+const getBorderRadius = require('./getBorderRadius-1b5e33cf.js');
 const ILanguage = require('./ILanguage-98b04442.js');
-const isDarkColor = require('./isDarkColor-35e8daec.js');
+const isDarkColor = require('./isDarkColor-428965f4.js');
 const isColorVariable = require('./isColorVariable-525dbfa7.js');
+const updateCheckoutSessionAttributes = require('./updateCheckoutSessionAttributes-a31bb681.js');
 const shouldRenderTaxIdInput = require('./shouldRenderTaxIdInput-9b8a8de1.js');
 const TaxId = require('./TaxId-12acedde.js');
 require('./VarianceTest-0cb1e118.js');
+require('./debounce-465a4328.js');
 
 const getDisplayCurrency = () => {
     var _a, _b;
@@ -2089,12 +2091,12 @@ const ZonosCheckoutProgressTabs = class {
                 '--zonos--progress-percent': this.getTotalSuccessStep(),
             } }, index.h("div", { key: 'd173893ab0da684a189127ab511db90ba3a0985c', class: "zonos--tab-wrapper" }, Object.values(cart.cartStore.tabItems).map((tab, index$1) => {
             const isSelected = tab.value === selectedStep;
-            return (index.h("button", { class: classes.classes([
+            return (index.h("button", { "aria-label": `Tab ${tab.label}`, class: classes.classes([
                     'zonos--tab-item',
                     tab.value === selectedStep && 'selected',
                     tab.isDone && 'done',
                 ]), disabled: !this.isTabClickable(tab.value), key: tab.value, onClick: () => this.setTabSelected(tab.value) }, index.h("div", { class: "zonos--tab-index" }, index.h("zonos-text", { class: "zonos--tab-index-label", textColor: isSelected ? contrastLabelColor : 'gray-1000', type: "label" }, index$1 + 1), index.h("zonos-icon", { class: "zonos--tab-index-done-icon", content: TabCheckmark, iconColor: isSelected ? contrastLabelColor : 'gray-1000' })), index.h("zonos-text", { textColor: isSelected ? contrastLabelColor : 'gray-1000', type: "label" }, localization.translate(tab.label))));
-        })), index.h("div", { key: '1e8dbcee0cc21837b030760250755fe5292bd261', class: "zonos--tab-progress" }, index.h("div", { key: 'a9250c1ca7b7a40f5b6d0bbbeca24f657471cda1', class: "zonos--progress-bar-fill" }))));
+        })), index.h("div", { key: 'e424eda69e8338599446f71f407c76617d2b79cf', class: "zonos--tab-progress" }, index.h("div", { key: 'acccc44ce950da71c8c0ee0798dc2086d9656ed2', class: "zonos--progress-bar-fill" }))));
     }
     static get assetsDirs() { return ["assets"]; }
     get ele() { return index.getElement(this); }
@@ -2348,6 +2350,7 @@ const ZonosCustomerInfo = class {
         index.registerInstance(this, hostRef);
         this.continueClicked = index.createEvent(this, "continueClicked", 7);
         this.testContinueClicked = index.createEvent(this, "testContinueClicked", 7);
+        this.storeUnsubscribeList = [];
         /**
          * Whether or not the continue button is loading
          */
@@ -2390,10 +2393,6 @@ const ZonosCustomerInfo = class {
          * Handler for the dialog close button
          */
         this.openAddressValidationDialog = false;
-        /**
-         * Whether or not the custom address form is enabled
-         */
-        this.shouldEnabledCustomAddress = false;
         /**
          * Handler for the email error state
          */
@@ -2402,6 +2401,9 @@ const ZonosCustomerInfo = class {
          * Whether or not the custom address form is used
          */
         this.recordedFormTypeUsed = false;
+        this.selectedCountryCode = localization.localizationStore.selectedCountryCode;
+        this.genericSettings = zonosStore.zonosStore.genericSettings;
+        this.addressFormRenderType = cart.cartStore.addressFormRenderType;
         /**
          * Handler for invalid characters in the address
          */
@@ -2521,7 +2523,7 @@ const ZonosCustomerInfo = class {
             };
         };
         this.handleValidate = () => {
-            var _a, _b, _c, _d;
+            var _a, _b;
             const stripeShippingAddressEventData = cart.stripeStore.stripeAddressEventData;
             const stripeBillingAddressEventData = cart.stripeStore.stripeBillingAddressEventData;
             const stripeLinkEventData = cart.stripeStore.stripeLinkEventData;
@@ -2535,11 +2537,11 @@ const ZonosCustomerInfo = class {
             void ((_a = cart.stripeStore.stripeAddressElement) === null || _a === void 0 ? void 0 : _a.getValue());
             void ((_b = cart.stripeStore.stripeBillingAddressElement) === null || _b === void 0 ? void 0 : _b.getValue());
             // if the custom address form is enabled, use the custom address form validation result, otherwise use the stripe validation result
-            const isValidBilling = ((_c = zonosStore.zonosStore.genericSettings) === null || _c === void 0 ? void 0 : _c.shouldEnabledCustomAddress)
+            const isValidBilling = this.addressFormRenderType === 'zonos'
                 ? this.validateCustomAddressForm('billing').isValid
                 : isValidStripeBilling;
             // if the custom address form is enabled, use the custom address form validation result, otherwise use the stripe validation result
-            const isValidShipping = ((_d = zonosStore.zonosStore.genericSettings) === null || _d === void 0 ? void 0 : _d.shouldEnabledCustomAddress)
+            const isValidShipping = this.addressFormRenderType === 'zonos'
                 ? this.validateCustomAddressForm('shipping').isValid
                 : isValidStripeShipping;
             if (!isValidLink && (stripeLinkEventData === null || stripeLinkEventData === void 0 ? void 0 : stripeLinkEventData.empty)) {
@@ -2591,8 +2593,7 @@ const ZonosCustomerInfo = class {
             };
         };
         this.renderAddressComponent = (type) => {
-            var _a, _b;
-            if (!localization.localizationStore.selectedCountryCode) {
+            if (!this.selectedCountryCode) {
                 void handleFetch.sendErrorLog({
                     endpoint: 'NO_COUNTRY_SELECTED_WHEN_RENDERING_ADDRESS_COMPONENT',
                     errors: ['No country selected when rendering address component'],
@@ -2604,29 +2605,23 @@ const ZonosCustomerInfo = class {
             }
             // Only use the default address for shipping address
             const defaultAddress = type === 'shipping' ? this.defaultAddress : [];
-            const shouldUseCustomAddressForm = !!localization.localizationStore.selectedCountryCode &&
-                this.shouldEnabledCustomAddress &&
-                !!((_b = (_a = zonosStore.zonosStore.genericSettings) === null || _a === void 0 ? void 0 : _a.countryCustomAddressEnabled) === null || _b === void 0 ? void 0 : _b.includes(localization.localizationStore.selectedCountryCode));
             // Should only record the form type used once
             if (type === 'shipping' &&
                 localization.storageStore.checkoutSessionId &&
                 !this.recordedFormTypeUsed) {
-                void handleFetch.handleFetch('/api/zonos-elements/update-checkout-session-metadata', {
-                    body: {
-                        id: localization.storageStore.checkoutSessionId,
-                        metadata: [
-                            {
-                                key: 'ZONOS_FORM_TYPE_USING',
-                                value: shouldUseCustomAddressForm ? 'custom' : 'stripe',
-                            },
-                        ],
-                    },
-                    method: 'POST',
+                void updateCheckoutSessionAttributes.updateCheckoutSessionAttributes({
+                    attributes: [
+                        {
+                            key: 'ZONOS_FORM_TYPE_USING',
+                            value: this.addressFormRenderType === 'zonos' ? 'custom' : 'stripe',
+                        },
+                    ],
+                    checkoutSessionId: localization.storageStore.checkoutSessionId,
                 });
                 this.recordedFormTypeUsed = true;
             }
             // Render custom address component if the custom address form is enabled
-            if (shouldUseCustomAddressForm) {
+            if (this.addressFormRenderType === 'zonos') {
                 return (index.h("zonos-custom-address", { defaultAddress: defaultAddress, taxIdErrorMessage: this.taxIdErrorMessage, titleText: localization.translate(type === 'shipping' ? 'Shipping address' : 'Billing address'), type: type }));
             }
             // Render Stripe address component by default
@@ -2664,8 +2659,41 @@ const ZonosCustomerInfo = class {
         }
         return invalidList;
     }
+    watchShouldEnabledCustomAddress() {
+        var _a, _b, _c;
+        const shouldEnabledCustomAddress = this.shouldUseCustomAddressFormOverride ||
+            !!((_a = this.genericSettings) === null || _a === void 0 ? void 0 : _a.shouldEnabledCustomAddress);
+        const shouldUseCustomAddressForm = !!this.selectedCountryCode &&
+            shouldEnabledCustomAddress &&
+            !!((_c = (_b = this.genericSettings) === null || _b === void 0 ? void 0 : _b.countryCustomAddressEnabled) === null || _c === void 0 ? void 0 : _c.includes(this.selectedCountryCode));
+        // Update the address form render type in the cart store
+        cart.cartStore.addressFormRenderType = shouldUseCustomAddressForm
+            ? 'zonos'
+            : 'stripe';
+    }
+    disconnectedCallback() {
+        // unsubscribe from store subscriptions
+        try {
+            this.storeUnsubscribeList.forEach(subscription => subscription());
+        }
+        catch (_a) { }
+    }
+    componentWillLoad() {
+        this.watchShouldEnabledCustomAddress();
+        this.storeUnsubscribeList = [
+            zonosStore.zonosStoreOnChange('genericSettings', () => {
+                this.genericSettings = zonosStore.zonosStore.genericSettings;
+            }),
+            localization.localizationStoreOnChange('selectedCountryCode', () => {
+                this.selectedCountryCode = localization.localizationStore.selectedCountryCode;
+            }),
+            cart.cartStoreOnChange('addressFormRenderType', () => {
+                this.addressFormRenderType = cart.cartStore.addressFormRenderType;
+            }),
+        ];
+    }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f;
         if (!cart.stripeStore.stripeElements) {
             return null;
         }
@@ -2681,16 +2709,13 @@ const ZonosCustomerInfo = class {
             this.shippingCountry =
                 cart.stripeStore.stripeAddressEventData.value.address.country;
         }
-        this.shouldEnabledCustomAddress =
-            this.shouldUseCustomAddressFormOverride ||
-                !!((_b = zonosStore.zonosStore.genericSettings) === null || _b === void 0 ? void 0 : _b.shouldEnabledCustomAddress);
         const showBilling = !cart.stripeStore.stripeShippingSameAsBilling;
         // Get theme for the update dialog, inherit from the theme, no from this component theme
         const theme = zonosStore.getZonosStoreTheme(zonosStore.zonosStore.appearance.theme);
         // Attempt to get the email from email from customer profile's locations, if not provided, just use the email from root customer profile
-        const defaultEmail = ((_c = this.defaultAddress.find(Boolean)) === null || _c === void 0 ? void 0 : _c.email) ||
-            ((_f = (_e = (_d = cart.stripeStore.customerProfile) === null || _d === void 0 ? void 0 : _d.locations) === null || _e === void 0 ? void 0 : _e.find(Boolean)) === null || _f === void 0 ? void 0 : _f.email) ||
-            ((_g = cart.stripeStore.customerProfile) === null || _g === void 0 ? void 0 : _g.email);
+        const defaultEmail = ((_b = this.defaultAddress.find(Boolean)) === null || _b === void 0 ? void 0 : _b.email) ||
+            ((_e = (_d = (_c = cart.stripeStore.customerProfile) === null || _c === void 0 ? void 0 : _c.locations) === null || _d === void 0 ? void 0 : _d.find(Boolean)) === null || _e === void 0 ? void 0 : _e.email) ||
+            ((_f = cart.stripeStore.customerProfile) === null || _f === void 0 ? void 0 : _f.email);
         return (index.h(index.Host, { class: "zonos--customer-info zonos--elements" }, index.h("div", { class: "zonos--group" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, localization.translate('Customer information')), this.showErrorBanner && (index.h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, localization.translate('Missing required fields. Make sure all fields are completed.'))), index.h("zonos-link-authentication", { defaultEmail: defaultEmail, isEmailError: this.isEmailError, onLinkAuthenticationChange: this.handleEmailValidation, titleText: localization.translate('Contact') }), this.renderAddressComponent('shipping'), index.h("zonos-checkbox", { class: "zonos--shipping-same-as-billing-cbx", isChecked: cart.stripeStore.stripeShippingSameAsBilling, label: localization.translate('Shipping address same as billing'), onCheckboxSelected: e => {
                 cart.stripeStore.stripeShippingSameAsBilling = e.detail;
             } }), index.h("zonos-collapse", { collapsed: !showBilling }, this.renderAddressComponent('billing')), index.h("div", { class: "zonos--group-btn" }, index.h("zonos-button", { backgroundColor: this.submitBtnColor, bold: true, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
@@ -2712,7 +2737,10 @@ const ZonosCustomerInfo = class {
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
-        "showErrorBanner": ["watchShowErrorBanner"]
+        "showErrorBanner": ["watchShowErrorBanner"],
+        "shouldUseCustomAddressFormOverride": ["watchShouldEnabledCustomAddress"],
+        "genericSettings": ["watchShouldEnabledCustomAddress"],
+        "selectedCountryCode": ["watchShouldEnabledCustomAddress"]
     }; }
 };
 ZonosCustomerInfo.style = ZonosCustomerInfoStyle0;
@@ -2857,6 +2885,7 @@ const ZonosShipping = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.continueClicked = index.createEvent(this, "continueClicked", 7);
+        this.storeUnsubscribeList = [];
         /**
          * Whether or not the continue button is loading
          */
@@ -2877,6 +2906,7 @@ const ZonosShipping = class {
         this.serviceLevelsOther = [];
         this.serviceLevelsAll = [];
         this.displayBaseCurrency = false;
+        this.shippingData = [];
         this.handleRadioSelected = async (e) => {
             var _a;
             this.selectedShippingMethod = e.detail;
@@ -2888,6 +2918,8 @@ const ZonosShipping = class {
                 return;
             }
             this.isSelecting = true;
+            // update the address async if we already got landed cost data
+            await cart.stripeStoreAsyncAddressUpdate();
             // save selected shipping option to store
             await cart.cartStoreUpdateSelectedShippingOption(selectedShippingOption, e.detail.landedCostId);
             this.isSelecting = false;
@@ -2942,6 +2974,7 @@ const ZonosShipping = class {
         };
         this.initServiceLevels = () => {
             var _a;
+            this.collapsedDAPOptions = true;
             const serviceLevels = ((_a = cart.cartStore.shippingData) === null || _a === void 0 ? void 0 : _a.flatMap(item => {
                 var _a;
                 const transitData = cart.cartStoreGetShippingTransitInfo(item);
@@ -2999,12 +3032,14 @@ const ZonosShipping = class {
             }
             return false;
         };
-        this.preselectFirstShippingMethod = () => {
+        this.preselectFirstShippingMethod = async () => {
             this.initServiceLevels();
             const selectedServiceLevel = this.serviceLevelsAll.find(item => { var _a; return item.shipmentRatingId === ((_a = cart.cartStore.selectedShippingOption) === null || _a === void 0 ? void 0 : _a.id); }) || null;
             if (selectedServiceLevel) {
                 // keep the selected shipping method
-                this.selectedShippingMethod = selectedServiceLevel;
+                void this.handleRadioSelected({
+                    detail: selectedServiceLevel,
+                });
                 return;
             }
             const firstServiceLevel = this.serviceLevelsAll.find(Boolean);
@@ -3016,16 +3051,30 @@ const ZonosShipping = class {
             }
         };
     }
+    disconnectedCallback() {
+        // unsubscribe from store subscriptions
+        this.storeUnsubscribeList.forEach(subscription => subscription());
+    }
     componentWillLoad() {
-        this.preselectFirstShippingMethod();
+        void this.preselectFirstShippingMethod();
+        this.storeUnsubscribeList = [
+            cart.cartStoreOnChange('shippingData', () => {
+                if (this.isOutdatedShippingData()) {
+                    // re-init service levels if the shipping data is outdated (promo code applied)
+                    void this.preselectFirstShippingMethod();
+                }
+            }),
+            cart.cartStoreOnChange('landedCostData', () => {
+                if (this.isOutdatedShippingData()) {
+                    // re-init service levels if the shipping data is outdated (promo code applied)
+                    void this.preselectFirstShippingMethod();
+                }
+            }),
+        ];
     }
     render() {
-        if (this.isOutdatedShippingData()) {
-            // re-init service levels if the shipping data is outdated (promo code applied)
-            this.preselectFirstShippingMethod();
-        }
         // re-init service levels if the currency is toggled
-        else if (this.isCurrencyToggled()) {
+        if (this.isCurrencyToggled()) {
             this.initServiceLevels();
         }
         const defaultShownServiceLevels = [

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

@@ -3,19 +3,21 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1c710d00.js');
-const cart = require('./cart-3d961c6e.js');
-const paypal = require('./paypal-dee5c109.js');
-const localization = require('./localization-ff33875b.js');
-const zonosStore = require('./zonosStore-7c1e1bc1.js');
-const handleFetch = require('./handleFetch-969d05d8.js');
+const cart = require('./cart-2ec8cac2.js');
+const paypal = require('./paypal-6449314e.js');
+const localization = require('./localization-9b43376c.js');
+const zonosStore = require('./zonosStore-f8ee56aa.js');
+const handleFetch = require('./handleFetch-05227713.js');
+const updateCheckoutSessionAttributes = require('./updateCheckoutSessionAttributes-a31bb681.js');
+const CheckoutConfig = require('./CheckoutConfig-27c82f94.js');
 const classes = require('./classes-b7918f56.js');
 const createCustomEvent = require('./createCustomEvent-7b6fad95.js');
-const getBorderRadius = require('./getBorderRadius-c424eb05.js');
-const isDarkColor = require('./isDarkColor-35e8daec.js');
+const getBorderRadius = require('./getBorderRadius-1b5e33cf.js');
+const isDarkColor = require('./isDarkColor-428965f4.js');
 const styles = require('./styles-d1e64fb9.js');
-const CheckoutConfig = require('./CheckoutConfig-4afc683b.js');
 const RemoveIcon = require('./RemoveIcon-081ac073.js');
 require('./VarianceTest-0cb1e118.js');
+require('./debounce-465a4328.js');
 
 /**
  * Map the items from tempCart like how we do it in dgs
@@ -989,6 +991,29 @@ const ZonosCheckout = class {
         this.placedOrderInfo = existingPlacedOrderInfo;
         handleFetch.log('=== Showing order duplication confirmation', 'warn');
     }
+    recordCheckoutInfo() {
+        if (!localization.storageStore.checkoutSessionId) {
+            return;
+        }
+        // Record the order duplication consent so we know user did see the notification and proceed with the order duplication
+        void updateCheckoutSessionAttributes.updateCheckoutSessionAttributes({
+            attributes: [
+                {
+                    key: 'APP_VERSION',
+                    value: window.Zonos.version,
+                },
+                {
+                    key: 'APP_VERSION_NPM_INTEGRATION',
+                    value: window.Zonos.isNpm ? '1' : '0',
+                },
+                {
+                    key: 'LEGACY_CHECKOUT_FACADE',
+                    value: window.Zonos.isLegacyCheckout ? '1' : '0',
+                },
+            ],
+            checkoutSessionId: localization.storageStore.checkoutSessionId,
+        });
+    }
     confirmProceedWithOrderDuplication() {
         // Reset the placed order info
         this.placedOrderInfo = null;
@@ -996,17 +1021,18 @@ const ZonosCheckout = class {
             return;
         }
         // Record the order duplication consent so we know user did see the notification and proceed with the order duplication
-        void handleFetch.handleFetch('/api/zonos-elements/update-checkout-session-metadata', {
-            body: {
-                id: localization.storageStore.checkoutSessionId,
-                metadata: [
-                    {
-                        key: 'orderDuplicationConsent',
-                        value: '1',
-                    },
-                ],
-            },
-            method: 'POST',
+        void updateCheckoutSessionAttributes.updateCheckoutSessionAttributes({
+            attributes: [{ key: 'ORDER_DUPLICATION_CONSENT', value: '1' }],
+            checkoutSessionId: localization.storageStore.checkoutSessionId,
+        });
+    }
+    markTheSessionAsAbandonedCart() {
+        if (!localization.storageStore.checkoutSessionId) {
+            return;
+        }
+        void updateCheckoutSessionAttributes.updateCheckoutSessionAttributes({
+            attributes: [{ key: 'WITH_ABANDONED_CART_TOKEN', value: '1' }],
+            checkoutSessionId: localization.storageStore.checkoutSessionId,
         });
     }
     handleCancelOrderDuplication() {
@@ -1153,6 +1179,12 @@ const ZonosCheckout = class {
                         const loadTime = endTime - startTime;
                         void sendLoadNativeCheckoutLog({ loadTime });
                     }
+                    this.recordCheckoutInfo();
+                    // update checkout session attribute to know the current cart is abandoned
+                    const isAbandonedCart = !!CheckoutConfig.getAbandonedCartRenewTokenValue();
+                    if (isAbandonedCart) {
+                        this.markTheSessionAsAbandonedCart();
+                    }
                 }
                 catch (err) {
                     if (err instanceof Error) {
@@ -1439,6 +1471,7 @@ const ZonosCheckout = class {
         }
     }
     async handleCustomerInfoContinue() {
+        var _a, _b, _c, _d;
         // submit google tag when the form is complete
         paypal.submitGtag('zonos-checkout-customer-info');
         const checkoutSessionId = localization.storageStore.checkoutSessionId;
@@ -1448,10 +1481,26 @@ const ZonosCheckout = class {
         });
         this.submitLoading = true;
         // fetch landed cost data if we not fetching.
-        await cart.stripeStorePrefetchLandedCost();
-        // keep checking landed cost data until it's ready to move to next screen
-        const interval = setInterval(() => {
-            if (cart.cartStore.landedCostData || !cart.stripeStore.isFetchingLandedCost) {
+        const { isRequestNotReady } = await cart.stripeStorePrefetchLandedCost();
+        // If the request is not ready at the time user click Continue, logging it out so we can investigate the issue
+        if (isRequestNotReady && cart.cartStore.addressFormRenderType === 'stripe') {
+            void handleFetch.sendErrorLog({
+                endpoint: 'ADDRESS_NOT_READY_AT_CUSTOMER_INFO_CONTINUE',
+                errors: ['Address not ready at customer info continue'],
+                metadata: {
+                    address: (_b = (_a = cart.stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.address,
+                    billingAddress: (_d = (_c = cart.stripeStore.stripeBillingAddressEventData) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.address,
+                    cartId: window.Zonos.cartId,
+                },
+            });
+        }
+        const moveToNextStep = (interval) => {
+            if (cart.cartStore.step !== 'customer-info') {
+                // stop interval if the step is not customer-info
+                clearInterval(interval);
+                return;
+            }
+            if (!cart.stripeStore.isFetchingLandedCost) {
                 if (cart.cartStore.landedCostData) {
                     // start init paypal with the presentment currency when landed cost is fetched
                     void paypal.paypalInitScript({
@@ -1461,17 +1510,24 @@ const ZonosCheckout = class {
                     cart.cartStoreNextStep();
                 }
                 this.submitLoading = false;
-                clearInterval(interval);
+                if (interval) {
+                    clearInterval(interval);
+                }
             }
-        }, 500);
+        };
+        // Immediately move to the next step
+        moveToNextStep();
+        // keep checking landed cost data until it's ready to move to next screen
+        const interval = setInterval(() => {
+            moveToNextStep(interval);
+        }, 20);
+        // cleanup interval if no data is fetched after 10 seconds
+        setTimeout(() => {
+            clearInterval(interval);
+        }, 10000);
     }
     async handleShippingContinue() {
-        this.submitLoading = true;
-        // show loading for the button for a bit
-        setTimeout(() => {
-            cart.cartStoreNextStep();
-            this.submitLoading = false;
-        }, 500);
+        cart.cartStoreNextStep();
     }
     handleInventoryCheckDialogConfirm() {
         // reset inventory check message to close the inventory check alert

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1c710d00.js');
-const zonosStore = require('./zonosStore-7c1e1bc1.js');
+const zonosStore = require('./zonosStore-f8ee56aa.js');
 require('./VarianceTest-0cb1e118.js');
 
 const zonosCollapseCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--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{-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;overflow:hidden}:host div{position:relative}:host iframe{width:0;height:100%;position:absolute;top:0;border:0}";

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

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1c710d00.js');
-const cart = require('./cart-3d961c6e.js');
-const localization = require('./localization-ff33875b.js');
-const zonosStore = require('./zonosStore-7c1e1bc1.js');
+const cart = require('./cart-2ec8cac2.js');
+const localization = require('./localization-9b43376c.js');
+const zonosStore = require('./zonosStore-f8ee56aa.js');
 const getGenericSettingsOverride = require('./getGenericSettingsOverride-c0ca32b9.js');
-const handleFetch = require('./handleFetch-969d05d8.js');
-require('./isDarkColor-35e8daec.js');
-require('./getBorderRadius-c424eb05.js');
+const handleFetch = require('./handleFetch-05227713.js');
+require('./isDarkColor-428965f4.js');
+require('./getBorderRadius-1b5e33cf.js');
 require('./VarianceTest-0cb1e118.js');
 
 const getZonosSettings = async () => {

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

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1c710d00.js');
-const localization = require('./localization-ff33875b.js');
-const zonosStore = require('./zonosStore-7c1e1bc1.js');
+const localization = require('./localization-9b43376c.js');
+const zonosStore = require('./zonosStore-f8ee56aa.js');
 const classes = require('./classes-b7918f56.js');
-require('./handleFetch-969d05d8.js');
+require('./handleFetch-05227713.js');
 require('./VarianceTest-0cb1e118.js');
 
 const zonosCountryFlagCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex}:host .flag-container{position:relative;overflow:hidden;width:100%;height:100%}:host .flag-icon{position:absolute;top:0;left:0;width:100%;height:100%;background-position:center;background-repeat:no-repeat;background-size:cover}";

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

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1c710d00.js');
-const localization = require('./localization-ff33875b.js');
-const zonosStore = require('./zonosStore-7c1e1bc1.js');
+const localization = require('./localization-9b43376c.js');
+const zonosStore = require('./zonosStore-f8ee56aa.js');
 const formatStringWithLinks = require('./formatStringWithLinks-52341fc7.js');
-const isDarkColor = require('./isDarkColor-35e8daec.js');
+const isDarkColor = require('./isDarkColor-428965f4.js');
 const ILanguage = require('./ILanguage-98b04442.js');
 const classes = require('./classes-b7918f56.js');
-require('./handleFetch-969d05d8.js');
+require('./handleFetch-05227713.js');
 require('./VarianceTest-0cb1e118.js');
 
 /**
@@ -1841,9 +1841,9 @@ const ZonosCountrySelect = class {
         };
     }
     componentDidRender() {
-        var _a, _b;
-        // focus the input on render
-        (_b = (_a = this.ele.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.zonos--country-filter-input')) === null || _b === void 0 ? void 0 : _b.focus();
+        var _a;
+        this.inputRef.autocomplete = 'off';
+        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
         const { helloCountryList } = localization.localizationStore;
@@ -1858,9 +1858,13 @@ const ZonosCountrySelect = class {
             ? fuseObject.map(country => country.item)
             : countries.sort((a, b) => a.displayName.localeCompare(b.displayName));
         const isEmpty = !filteredCountries.length;
-        return (index.h(index.Host, { key: '25c360767efe1c48edde5401a6c0929ceb7bd47c', class: "zonos--elements", style: {
+        return (index.h(index.Host, { key: '83c9005b99e1dc8d3b4a4d50e6edbed0f17ce6e0', class: "zonos--elements", style: {
                 '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: 'ee63b18e0504ffe1d6a6a50fdfea00e8cf808211', class: "zonos--country-select" }, index.h("zonos-v-stack", { key: '448a30acc483e5b945435a5650c222180a3159d4', class: "zonos--country-select-header", spacing: 8 }, index.h("zonos-select-dialog-header", { key: 'f4ed039f14059db21ad325372f300e742191588c', handleOnClose: () => this.handleOnClose(), label: localization.translate('Select a country') }, index.h("input", { key: '40f772868810c96b27dfa8bab56a01d5c9385599', autocomplete: "off", autofocus: "autofocus", class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: localization.translate('Search countries'), value: this.inputValue }))), index.h("div", { key: 'f752f5426257f0538041597e2a76f92c6754835f', class: "zonos--country-select-content" }, isEmpty && (index.h("zonos-text", { key: 'febbe41e09b452430e1a03d33732c9cc3710701b', class: "no-country", textColor: "gray-800" }, localization.translate('No countries found'))), index.h("zonos-virtual-scroll", { key: 'afec99a75a3a0cd3450a539154670508aed8c57e', class: "zonos--country-filter-content", fallbackItemHeight: 34, itemHeights: filteredCountries.map(() => 34), renderItem: index$1 => {
+            } }, index.h("div", { key: '173d6c9d1808e80cdcb808b6418a9e3928e6a971', class: "zonos--country-select" }, index.h("zonos-v-stack", { key: '47118836d03e8505f9bd87e795387ea19cf67843', class: "zonos--country-select-header", spacing: 8 }, index.h("zonos-select-dialog-header", { key: 'c5be83953dd01e47dbe814cbe83a114d700de830', handleOnClose: () => this.handleOnClose(), label: localization.translate('Select a country') }, index.h("input", { key: '2afe5eed1f156b8923a10564cf2b96d2cd6eb9bb', autoComplete: "off", class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: localization.translate('Search countries'), ref: el => {
+                if (el) {
+                    this.inputRef = el;
+                }
+            }, type: "text", value: this.inputValue }))), index.h("div", { key: '4d64a4d3c08292ae1f574973c09aa9ec42b48c37', class: "zonos--country-select-content" }, isEmpty && (index.h("zonos-text", { key: 'dc30685daa60063cb9e6c6e7730f54cc5a25249b', class: "no-country", textColor: "gray-800" }, localization.translate('No countries found'))), index.h("zonos-virtual-scroll", { key: '69f6d39cf40abd951857542d734424623cbd7031', class: "zonos--country-filter-content", fallbackItemHeight: 34, itemHeights: filteredCountries.map(() => 34), renderItem: index$1 => {
                 const country = filteredCountries[index$1];
                 if (!country) {
                     return null;