@zonos/elements 1.3.207 → 1.3.209

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, H as Host } from './index-5ea9f81d.js';
-import { d as zonosStoreFontFamily } from './zonosStore-1e015fa5.js';
+import { f as zonosStoreFontFamily } from './zonosStore-00975763.js';
 import { c as classes } from './classes-0d95c529.js';
-import { g as getBorderRadius } from './getBorderRadius-b18c924f.js';
+import { g as getBorderRadius } from './getBorderRadius-71b3b8ab.js';
 import './VarianceTest-fef2d958.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/esm/zonos-cart-items_14.entry.js

@@ -1,18 +1,20 @@
 import { r as registerInstance, a as getAssetPath, h, H as Host, F as Fragment, c as createEvent, d as getElement } from './index-5ea9f81d.js';
-import { e as cartStore, A as cartStoreHasOneEligibleItem, B as stripeStoreApplyPromoCode, C as stripeStoreRemovePromoCode, c as stripeStore, y as stripeStoreReset, d as stripeStoreRetrievePayment, t as trackConversionEvent, D as stripeStoreResetPromoCode, E as stripeStoreMessageBasedOnStatus, r as cartStoreNextStep, F as stripeStoreTranslateAddressToLatin, G as cartStoreUpdateSelectedShippingOption, H as cartStoreGetShippingTransitInfo, I as sortServiceLevelOptionsByAmount, J as cartStoreGetMethod } from './cart-5835676d.js';
-import { d as currencyFormat, t as translate, s as storageStore, l as localizationStore } from './localization-4c7f64e8.js';
+import { e as cartStore, A as cartStoreHasOneEligibleItem, B as stripeStoreApplyPromoCode, C as stripeStoreRemovePromoCode, c as stripeStore, y as stripeStoreReset, d as stripeStoreRetrievePayment, t as trackConversionEvent, D as stripeStoreResetPromoCode, E as stripeStoreMessageBasedOnStatus, r as cartStoreNextStep, F as stripeStoreTranslateAddressToLatin, G as cartStoreOnChange, H as stripeStoreAsyncAddressUpdate, I as cartStoreUpdateSelectedShippingOption, J as cartStoreGetShippingTransitInfo, K as sortServiceLevelOptionsByAmount, L as cartStoreGetMethod } from './cart-2f84f632.js';
+import { d as currencyFormat, t as translate, s as storageStore, l as localizationStore, c as localizationStoreOnChange } from './localization-e17c211b.js';
 import { c as classes } from './classes-0d95c529.js';
-import { s as submitGtag, c as paypalStoreReset, b as paypalStore, i as isContrastColor } from './paypal-b4f106be.js';
-import { z as zonosStore, g as getZonosStoreTheme, d as zonosStoreFontFamily } from './zonosStore-1e015fa5.js';
-import { h as handleFetch, l as log, s as sendErrorLog, j as jsonParse, g as getIsTestMode, d as allLogs, i as isCheckoutMobile, b as logError, a as getIsStagingMode } from './handleFetch-621e45bc.js';
+import { s as submitGtag, c as paypalStoreReset, a as paypalStore, i as isContrastColor } from './paypal-1cf701aa.js';
+import { z as zonosStore, g as getZonosStoreTheme, f as zonosStoreFontFamily, h as zonosStoreOnChange } from './zonosStore-00975763.js';
+import { h as handleFetch, l as log, s as sendErrorLog, j as jsonParse, g as getIsTestMode, d as allLogs, i as isCheckoutMobile, b as logError, a as getIsStagingMode } from './handleFetch-7dd4622b.js';
 import { c as createCustomEvent } from './createCustomEvent-58159025.js';
-import { g as getBorderRadius } from './getBorderRadius-b18c924f.js';
+import { g as getBorderRadius } from './getBorderRadius-71b3b8ab.js';
 import { l as languages } from './ILanguage-cd6acb72.js';
-import { i as isDarkColor, t as tinycolor } from './isDarkColor-d8bb8659.js';
+import { i as isDarkColor, t as tinycolor } from './isDarkColor-3a9d6108.js';
 import { i as isColorVariable } from './isColorVariable-0a94004f.js';
+import { u as updateCheckoutSessionAttributes } from './updateCheckoutSessionAttributes-5097e715.js';
 import { s as shouldRenderTaxIdInput, c as containsNonLatinChars } from './shouldRenderTaxIdInput-8bc112bb.js';
 import { e as euCountryCodes } from './TaxId-50d72254.js';
 import './VarianceTest-fef2d958.js';
+import './debounce-0e42da22.js';
 
 const getDisplayCurrency = () => {
     var _a, _b;
@@ -2085,12 +2087,12 @@ const ZonosCheckoutProgressTabs = class {
                 '--zonos--progress-percent': this.getTotalSuccessStep(),
             } }, h("div", { key: 'd173893ab0da684a189127ab511db90ba3a0985c', class: "zonos--tab-wrapper" }, Object.values(cartStore.tabItems).map((tab, index) => {
             const isSelected = tab.value === selectedStep;
-            return (h("button", { class: classes([
+            return (h("button", { "aria-label": `Tab ${tab.label}`, class: classes([
                     'zonos--tab-item',
                     tab.value === selectedStep && 'selected',
                     tab.isDone && 'done',
                 ]), disabled: !this.isTabClickable(tab.value), key: tab.value, onClick: () => this.setTabSelected(tab.value) }, h("div", { class: "zonos--tab-index" }, h("zonos-text", { class: "zonos--tab-index-label", textColor: isSelected ? contrastLabelColor : 'gray-1000', type: "label" }, index + 1), h("zonos-icon", { class: "zonos--tab-index-done-icon", content: TabCheckmark, iconColor: isSelected ? contrastLabelColor : 'gray-1000' })), h("zonos-text", { textColor: isSelected ? contrastLabelColor : 'gray-1000', type: "label" }, translate(tab.label))));
-        })), h("div", { key: '1e8dbcee0cc21837b030760250755fe5292bd261', class: "zonos--tab-progress" }, h("div", { key: 'a9250c1ca7b7a40f5b6d0bbbeca24f657471cda1', class: "zonos--progress-bar-fill" }))));
+        })), h("div", { key: 'e424eda69e8338599446f71f407c76617d2b79cf', class: "zonos--tab-progress" }, h("div", { key: 'acccc44ce950da71c8c0ee0798dc2086d9656ed2', class: "zonos--progress-bar-fill" }))));
     }
     static get assetsDirs() { return ["assets"]; }
     get ele() { return getElement(this); }
@@ -2344,6 +2346,7 @@ const ZonosCustomerInfo = class {
         registerInstance(this, hostRef);
         this.continueClicked = createEvent(this, "continueClicked", 7);
         this.testContinueClicked = createEvent(this, "testContinueClicked", 7);
+        this.storeUnsubscribeList = [];
         /**
          * Whether or not the continue button is loading
          */
@@ -2386,10 +2389,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
          */
@@ -2398,6 +2397,9 @@ const ZonosCustomerInfo = class {
          * Whether or not the custom address form is used
          */
         this.recordedFormTypeUsed = false;
+        this.selectedCountryCode = localizationStore.selectedCountryCode;
+        this.genericSettings = zonosStore.genericSettings;
+        this.addressFormRenderType = cartStore.addressFormRenderType;
         /**
          * Handler for invalid characters in the address
          */
@@ -2517,7 +2519,7 @@ const ZonosCustomerInfo = class {
             };
         };
         this.handleValidate = () => {
-            var _a, _b, _c, _d;
+            var _a, _b;
             const stripeShippingAddressEventData = stripeStore.stripeAddressEventData;
             const stripeBillingAddressEventData = stripeStore.stripeBillingAddressEventData;
             const stripeLinkEventData = stripeStore.stripeLinkEventData;
@@ -2531,11 +2533,11 @@ const ZonosCustomerInfo = class {
             void ((_a = stripeStore.stripeAddressElement) === null || _a === void 0 ? void 0 : _a.getValue());
             void ((_b = 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.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.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)) {
@@ -2587,8 +2589,7 @@ const ZonosCustomerInfo = class {
             };
         };
         this.renderAddressComponent = (type) => {
-            var _a, _b;
-            if (!localizationStore.selectedCountryCode) {
+            if (!this.selectedCountryCode) {
                 void sendErrorLog({
                     endpoint: 'NO_COUNTRY_SELECTED_WHEN_RENDERING_ADDRESS_COMPONENT',
                     errors: ['No country selected when rendering address component'],
@@ -2600,29 +2601,23 @@ const ZonosCustomerInfo = class {
             }
             // Only use the default address for shipping address
             const defaultAddress = type === 'shipping' ? this.defaultAddress : [];
-            const shouldUseCustomAddressForm = !!localizationStore.selectedCountryCode &&
-                this.shouldEnabledCustomAddress &&
-                !!((_b = (_a = zonosStore.genericSettings) === null || _a === void 0 ? void 0 : _a.countryCustomAddressEnabled) === null || _b === void 0 ? void 0 : _b.includes(localizationStore.selectedCountryCode));
             // Should only record the form type used once
             if (type === 'shipping' &&
                 storageStore.checkoutSessionId &&
                 !this.recordedFormTypeUsed) {
-                void handleFetch('/api/zonos-elements/update-checkout-session-metadata', {
-                    body: {
-                        id: storageStore.checkoutSessionId,
-                        metadata: [
-                            {
-                                key: 'ZONOS_FORM_TYPE_USING',
-                                value: shouldUseCustomAddressForm ? 'custom' : 'stripe',
-                            },
-                        ],
-                    },
-                    method: 'POST',
+                void updateCheckoutSessionAttributes({
+                    attributes: [
+                        {
+                            key: 'ZONOS_FORM_TYPE_USING',
+                            value: this.addressFormRenderType === 'zonos' ? 'custom' : 'stripe',
+                        },
+                    ],
+                    checkoutSessionId: storageStore.checkoutSessionId,
                 });
                 this.recordedFormTypeUsed = true;
             }
             // Render custom address component if the custom address form is enabled
-            if (shouldUseCustomAddressForm) {
+            if (this.addressFormRenderType === 'zonos') {
                 return (h("zonos-custom-address", { defaultAddress: defaultAddress, taxIdErrorMessage: this.taxIdErrorMessage, titleText: translate(type === 'shipping' ? 'Shipping address' : 'Billing address'), type: type }));
             }
             // Render Stripe address component by default
@@ -2660,8 +2655,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
+        cartStore.addressFormRenderType = shouldUseCustomAddressForm
+            ? 'zonos'
+            : 'stripe';
+    }
+    disconnectedCallback() {
+        // unsubscribe from store subscriptions
+        try {
+            this.storeUnsubscribeList.forEach(subscription => subscription());
+        }
+        catch (_a) { }
+    }
+    componentWillLoad() {
+        this.watchShouldEnabledCustomAddress();
+        this.storeUnsubscribeList = [
+            zonosStoreOnChange('genericSettings', () => {
+                this.genericSettings = zonosStore.genericSettings;
+            }),
+            localizationStoreOnChange('selectedCountryCode', () => {
+                this.selectedCountryCode = localizationStore.selectedCountryCode;
+            }),
+            cartStoreOnChange('addressFormRenderType', () => {
+                this.addressFormRenderType = cartStore.addressFormRenderType;
+            }),
+        ];
+    }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f;
         if (!stripeStore.stripeElements) {
             return null;
         }
@@ -2677,16 +2705,13 @@ const ZonosCustomerInfo = class {
             this.shippingCountry =
                 stripeStore.stripeAddressEventData.value.address.country;
         }
-        this.shouldEnabledCustomAddress =
-            this.shouldUseCustomAddressFormOverride ||
-                !!((_b = zonosStore.genericSettings) === null || _b === void 0 ? void 0 : _b.shouldEnabledCustomAddress);
         const showBilling = !stripeStore.stripeShippingSameAsBilling;
         // Get theme for the update dialog, inherit from the theme, no from this component theme
         const theme = getZonosStoreTheme(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 = 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 = 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 = 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 = stripeStore.customerProfile) === null || _f === void 0 ? void 0 : _f.email);
         return (h(Host, { class: "zonos--customer-info zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Customer information')), this.showErrorBanner && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('Missing required fields. Make sure all fields are completed.'))), h("zonos-link-authentication", { defaultEmail: defaultEmail, isEmailError: this.isEmailError, onLinkAuthenticationChange: this.handleEmailValidation, titleText: translate('Contact') }), this.renderAddressComponent('shipping'), h("zonos-checkbox", { class: "zonos--shipping-same-as-billing-cbx", isChecked: stripeStore.stripeShippingSameAsBilling, label: translate('Shipping address same as billing'), onCheckboxSelected: e => {
                 stripeStore.stripeShippingSameAsBilling = e.detail;
             } }), h("zonos-collapse", { collapsed: !showBilling }, this.renderAddressComponent('billing')), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, bold: true, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
@@ -2708,7 +2733,10 @@ const ZonosCustomerInfo = class {
     }
     get el() { return getElement(this); }
     static get watchers() { return {
-        "showErrorBanner": ["watchShowErrorBanner"]
+        "showErrorBanner": ["watchShowErrorBanner"],
+        "shouldUseCustomAddressFormOverride": ["watchShouldEnabledCustomAddress"],
+        "genericSettings": ["watchShouldEnabledCustomAddress"],
+        "selectedCountryCode": ["watchShouldEnabledCustomAddress"]
     }; }
 };
 ZonosCustomerInfo.style = ZonosCustomerInfoStyle0;
@@ -2853,6 +2881,7 @@ const ZonosShipping = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.continueClicked = createEvent(this, "continueClicked", 7);
+        this.storeUnsubscribeList = [];
         /**
          * Whether or not the continue button is loading
          */
@@ -2873,6 +2902,7 @@ const ZonosShipping = class {
         this.serviceLevelsOther = [];
         this.serviceLevelsAll = [];
         this.displayBaseCurrency = false;
+        this.shippingData = [];
         this.handleRadioSelected = async (e) => {
             var _a;
             this.selectedShippingMethod = e.detail;
@@ -2884,6 +2914,8 @@ const ZonosShipping = class {
                 return;
             }
             this.isSelecting = true;
+            // update the address async if we already got landed cost data
+            await stripeStoreAsyncAddressUpdate();
             // save selected shipping option to store
             await cartStoreUpdateSelectedShippingOption(selectedShippingOption, e.detail.landedCostId);
             this.isSelecting = false;
@@ -2938,6 +2970,7 @@ const ZonosShipping = class {
         };
         this.initServiceLevels = () => {
             var _a;
+            this.collapsedDAPOptions = true;
             const serviceLevels = ((_a = cartStore.shippingData) === null || _a === void 0 ? void 0 : _a.flatMap(item => {
                 var _a;
                 const transitData = cartStoreGetShippingTransitInfo(item);
@@ -2995,12 +3028,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 = 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);
@@ -3012,16 +3047,30 @@ const ZonosShipping = class {
             }
         };
     }
+    disconnectedCallback() {
+        // unsubscribe from store subscriptions
+        this.storeUnsubscribeList.forEach(subscription => subscription());
+    }
     componentWillLoad() {
-        this.preselectFirstShippingMethod();
+        void this.preselectFirstShippingMethod();
+        this.storeUnsubscribeList = [
+            cartStoreOnChange('shippingData', () => {
+                if (this.isOutdatedShippingData()) {
+                    // re-init service levels if the shipping data is outdated (promo code applied)
+                    void this.preselectFirstShippingMethod();
+                }
+            }),
+            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/esm/zonos-checkout.entry.js

@@ -1,17 +1,19 @@
 import { r as registerInstance, h, H as Host, F as Fragment } from './index-5ea9f81d.js';
-import { s as stripeStoreGetDomesticShippingSession, a as stripeStoreCleanupDomesticShippingSession, b as stripeStoreSaveDomesticShippingSession, c as stripeStore, i as initStripeElements, d as stripeStoreRetrievePayment, e as cartStore, f as cartStoreUpdateItems, g as cartStoreReset, h as cartStoreResetTabItems, j as cartStoreClearCheckoutInterval, k as stripeStoreInitCheckoutSession, l as stripeStoreGetPaymentIntent, m as cartStoreStartCheckoutInterval, t as trackConversionEvent, n as getCheckoutSessionBody, o as cartStoreUpdateToErrorState, p as cartStoreSetCheckoutSession, q as stripeStorePrefetchLandedCost, r as cartStoreNextStep, u as stripeStoreUpdateCheckoutSessionBaseCurrency, v as stripeStoreHandleInventoryCheck, w as stripeStoreConfirmPayment, x as stripeStoreHandleInventoryRefund, y as stripeStoreReset } from './cart-5835676d.js';
-import { p as paypalStoreHasPaypalEnabled, s as submitGtag, a as paypalInitScript, b as paypalStore } from './paypal-b4f106be.js';
-import { f as filterValidTests, l as localizationStore, a as localizationStoreUpdateSelectedCountryCode, g as getZCountryUrlParam, s as storageStore, V as VARIANT_TEST_KEY_EXPIRATION, b as storageStoreSetEnabledVariantTestKeys, t as translate, c as localizationStoreOnChange, d as currencyFormat } from './localization-4c7f64e8.js';
-import { z as zonosStore, g as getZonosStoreTheme, m as mergeConfig } from './zonosStore-1e015fa5.js';
-import { h as handleFetch, l as log, b as logError, s as sendErrorLog, c as getElapsedTime, d as allLogs, e as getAdditionalLogMetadata, g as getIsTestMode, j as jsonParse, a as getIsStagingMode, i as isCheckoutMobile } from './handleFetch-621e45bc.js';
+import { s as stripeStoreGetDomesticShippingSession, a as stripeStoreCleanupDomesticShippingSession, b as stripeStoreSaveDomesticShippingSession, c as stripeStore, i as initStripeElements, d as stripeStoreRetrievePayment, e as cartStore, f as cartStoreUpdateItems, g as cartStoreReset, h as cartStoreResetTabItems, j as cartStoreClearCheckoutInterval, k as stripeStoreInitCheckoutSession, l as stripeStoreGetPaymentIntent, m as cartStoreStartCheckoutInterval, t as trackConversionEvent, n as getCheckoutSessionBody, o as cartStoreUpdateToErrorState, p as cartStoreSetCheckoutSession, q as stripeStorePrefetchLandedCost, r as cartStoreNextStep, u as stripeStoreUpdateCheckoutSessionBaseCurrency, v as stripeStoreHandleInventoryCheck, w as stripeStoreConfirmPayment, x as stripeStoreHandleInventoryRefund, y as stripeStoreReset } from './cart-2f84f632.js';
+import { p as paypalStoreHasPaypalEnabled, s as submitGtag, a as paypalStore, b as paypalInitScript } from './paypal-1cf701aa.js';
+import { f as filterValidTests, l as localizationStore, a as localizationStoreUpdateSelectedCountryCode, g as getZCountryUrlParam, s as storageStore, V as VARIANT_TEST_KEY_EXPIRATION, b as storageStoreSetEnabledVariantTestKeys, t as translate, c as localizationStoreOnChange, d as currencyFormat } from './localization-e17c211b.js';
+import { z as zonosStore, g as getZonosStoreTheme, m as mergeConfig } from './zonosStore-00975763.js';
+import { h as handleFetch, l as log, b as logError, s as sendErrorLog, c as getElapsedTime, d as allLogs, e as getAdditionalLogMetadata, g as getIsTestMode, j as jsonParse, a as getIsStagingMode, i as isCheckoutMobile } from './handleFetch-7dd4622b.js';
+import { u as updateCheckoutSessionAttributes } from './updateCheckoutSessionAttributes-5097e715.js';
+import { _ as _getIsValidCartId, c as checkoutHiddenBtnSelector, a as checkoutHiddenInternationalBtnSelector, d as domesticRedirectedBtnSelector, g as getAbandonedCartRenewTokenValue } from './CheckoutConfig-724d7bae.js';
 import { c as classes } from './classes-0d95c529.js';
 import { c as createCustomEvent } from './createCustomEvent-58159025.js';
-import { g as getBorderRadius } from './getBorderRadius-b18c924f.js';
-import { i as isDarkColor } from './isDarkColor-d8bb8659.js';
+import { g as getBorderRadius } from './getBorderRadius-71b3b8ab.js';
+import { i as isDarkColor } from './isDarkColor-3a9d6108.js';
 import { s as styles } from './styles-6fc2fad9.js';
-import { _ as _getIsValidCartId, c as checkoutHiddenBtnSelector, a as checkoutHiddenInternationalBtnSelector, d as domesticRedirectedBtnSelector } from './CheckoutConfig-eb7d6954.js';
 import { R as RemoveIcon } from './RemoveIcon-9dc5dd1a.js';
 import './VarianceTest-fef2d958.js';
+import './debounce-0e42da22.js';
 
 /**
  * Map the items from tempCart like how we do it in dgs
@@ -985,6 +987,29 @@ const ZonosCheckout = class {
         this.placedOrderInfo = existingPlacedOrderInfo;
         log('=== Showing order duplication confirmation', 'warn');
     }
+    recordCheckoutInfo() {
+        if (!storageStore.checkoutSessionId) {
+            return;
+        }
+        // Record the order duplication consent so we know user did see the notification and proceed with the order duplication
+        void 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: storageStore.checkoutSessionId,
+        });
+    }
     confirmProceedWithOrderDuplication() {
         // Reset the placed order info
         this.placedOrderInfo = null;
@@ -992,17 +1017,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('/api/zonos-elements/update-checkout-session-metadata', {
-            body: {
-                id: storageStore.checkoutSessionId,
-                metadata: [
-                    {
-                        key: 'orderDuplicationConsent',
-                        value: '1',
-                    },
-                ],
-            },
-            method: 'POST',
+        void updateCheckoutSessionAttributes({
+            attributes: [{ key: 'ORDER_DUPLICATION_CONSENT', value: '1' }],
+            checkoutSessionId: storageStore.checkoutSessionId,
+        });
+    }
+    markTheSessionAsAbandonedCart() {
+        if (!storageStore.checkoutSessionId) {
+            return;
+        }
+        void updateCheckoutSessionAttributes({
+            attributes: [{ key: 'WITH_ABANDONED_CART_TOKEN', value: '1' }],
+            checkoutSessionId: storageStore.checkoutSessionId,
         });
     }
     handleCancelOrderDuplication() {
@@ -1149,6 +1175,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 = !!getAbandonedCartRenewTokenValue();
+                    if (isAbandonedCart) {
+                        this.markTheSessionAsAbandonedCart();
+                    }
                 }
                 catch (err) {
                     if (err instanceof Error) {
@@ -1435,6 +1467,7 @@ const ZonosCheckout = class {
         }
     }
     async handleCustomerInfoContinue() {
+        var _a, _b, _c, _d;
         // submit google tag when the form is complete
         submitGtag('zonos-checkout-customer-info');
         const checkoutSessionId = storageStore.checkoutSessionId;
@@ -1444,10 +1477,26 @@ const ZonosCheckout = class {
         });
         this.submitLoading = true;
         // fetch landed cost data if we not fetching.
-        await stripeStorePrefetchLandedCost();
-        // keep checking landed cost data until it's ready to move to next screen
-        const interval = setInterval(() => {
-            if (cartStore.landedCostData || !stripeStore.isFetchingLandedCost) {
+        const { isRequestNotReady } = await stripeStorePrefetchLandedCost();
+        // If the request is not ready at the time user click Continue, logging it out so we can investigate the issue
+        if (isRequestNotReady && cartStore.addressFormRenderType === 'stripe') {
+            void sendErrorLog({
+                endpoint: 'ADDRESS_NOT_READY_AT_CUSTOMER_INFO_CONTINUE',
+                errors: ['Address not ready at customer info continue'],
+                metadata: {
+                    address: (_b = (_a = stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.address,
+                    billingAddress: (_d = (_c = 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 (cartStore.step !== 'customer-info') {
+                // stop interval if the step is not customer-info
+                clearInterval(interval);
+                return;
+            }
+            if (!stripeStore.isFetchingLandedCost) {
                 if (cartStore.landedCostData) {
                     // start init paypal with the presentment currency when landed cost is fetched
                     void paypalInitScript({
@@ -1457,17 +1506,24 @@ const ZonosCheckout = class {
                     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(() => {
-            cartStoreNextStep();
-            this.submitLoading = false;
-        }, 500);
+        cartStoreNextStep();
     }
     handleInventoryCheckDialogConfirm() {
         // reset inventory check message to close the inventory check alert

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, d as getElement } from './index-5ea9f81d.js';
-import { d as zonosStoreFontFamily } from './zonosStore-1e015fa5.js';
+import { f as zonosStoreFontFamily } from './zonosStore-00975763.js';
 import './VarianceTest-fef2d958.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/esm/zonos-controller.entry.js

@@ -1,11 +1,11 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-5ea9f81d.js';
-import { c as stripeStore } from './cart-5835676d.js';
-import { i as isValidSelector, e as initLocalizationStore, s as storageStore, a as localizationStoreUpdateSelectedCountryCode } from './localization-4c7f64e8.js';
-import { z as zonosStore, b as zonosStoreInitSetting, d as zonosStoreFontFamily } from './zonosStore-1e015fa5.js';
+import { c as stripeStore } from './cart-2f84f632.js';
+import { i as isValidSelector, e as initLocalizationStore, s as storageStore, a as localizationStoreUpdateSelectedCountryCode } from './localization-e17c211b.js';
+import { z as zonosStore, e as zonosStoreInitSetting, f as zonosStoreFontFamily } from './zonosStore-00975763.js';
 import { g as getGenericSettingsOverride, i as iframeServices, a as injectPrivateIframe } from './getGenericSettingsOverride-0bc3e118.js';
-import { h as handleFetch, b as logError, l as log } from './handleFetch-621e45bc.js';
-import './isDarkColor-d8bb8659.js';
-import './getBorderRadius-b18c924f.js';
+import { h as handleFetch, b as logError, l as log } from './handleFetch-7dd4622b.js';
+import './isDarkColor-3a9d6108.js';
+import './getBorderRadius-71b3b8ab.js';
 import './VarianceTest-fef2d958.js';
 
 const getZonosSettings = async () => {

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

@@ -1,8 +1,8 @@
 import { r as registerInstance, h, H as Host, d as getElement } from './index-5ea9f81d.js';
-import { l as localizationStore } from './localization-4c7f64e8.js';
-import { d as zonosStoreFontFamily } from './zonosStore-1e015fa5.js';
+import { l as localizationStore } from './localization-e17c211b.js';
+import { f as zonosStoreFontFamily } from './zonosStore-00975763.js';
 import { c as classes } from './classes-0d95c529.js';
-import './handleFetch-621e45bc.js';
+import './handleFetch-7dd4622b.js';
 import './VarianceTest-fef2d958.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/esm/zonos-country-select_4.entry.js

@@ -1,11 +1,11 @@
 import { r as registerInstance, h, H as Host, d as getElement } from './index-5ea9f81d.js';
-import { a as localizationStoreUpdateSelectedCountryCode, t as translate, l as localizationStore } from './localization-4c7f64e8.js';
-import { d as zonosStoreFontFamily } from './zonosStore-1e015fa5.js';
+import { a as localizationStoreUpdateSelectedCountryCode, t as translate, l as localizationStore } from './localization-e17c211b.js';
+import { f as zonosStoreFontFamily } from './zonosStore-00975763.js';
 import { f as formatStringWithLinks } from './formatStringWithLinks-9e819405.js';
-import { i as isDarkColor } from './isDarkColor-d8bb8659.js';
+import { i as isDarkColor } from './isDarkColor-3a9d6108.js';
 import { l as languages } from './ILanguage-cd6acb72.js';
 import { c as classes } from './classes-0d95c529.js';
-import './handleFetch-621e45bc.js';
+import './handleFetch-7dd4622b.js';
 import './VarianceTest-fef2d958.js';
 
 /**
@@ -1837,9 +1837,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 } = localizationStore;
@@ -1854,9 +1854,13 @@ const ZonosCountrySelect = class {
             ? fuseObject.map(country => country.item)
             : countries.sort((a, b) => a.displayName.localeCompare(b.displayName));
         const isEmpty = !filteredCountries.length;
-        return (h(Host, { key: '25c360767efe1c48edde5401a6c0929ceb7bd47c', class: "zonos--elements", style: {
+        return (h(Host, { key: '83c9005b99e1dc8d3b4a4d50e6edbed0f17ce6e0', class: "zonos--elements", style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'ee63b18e0504ffe1d6a6a50fdfea00e8cf808211', class: "zonos--country-select" }, h("zonos-v-stack", { key: '448a30acc483e5b945435a5650c222180a3159d4', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: 'f4ed039f14059db21ad325372f300e742191588c', handleOnClose: () => this.handleOnClose(), label: translate('Select a country') }, h("input", { key: '40f772868810c96b27dfa8bab56a01d5c9385599', autocomplete: "off", autofocus: "autofocus", class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: translate('Search countries'), value: this.inputValue }))), h("div", { key: 'f752f5426257f0538041597e2a76f92c6754835f', class: "zonos--country-select-content" }, isEmpty && (h("zonos-text", { key: 'febbe41e09b452430e1a03d33732c9cc3710701b', class: "no-country", textColor: "gray-800" }, translate('No countries found'))), h("zonos-virtual-scroll", { key: 'afec99a75a3a0cd3450a539154670508aed8c57e', class: "zonos--country-filter-content", fallbackItemHeight: 34, itemHeights: filteredCountries.map(() => 34), renderItem: index => {
+            } }, h("div", { key: '173d6c9d1808e80cdcb808b6418a9e3928e6a971', class: "zonos--country-select" }, h("zonos-v-stack", { key: '47118836d03e8505f9bd87e795387ea19cf67843', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: 'c5be83953dd01e47dbe814cbe83a114d700de830', handleOnClose: () => this.handleOnClose(), label: translate('Select a country') }, h("input", { key: '2afe5eed1f156b8923a10564cf2b96d2cd6eb9bb', autoComplete: "off", class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: translate('Search countries'), ref: el => {
+                if (el) {
+                    this.inputRef = el;
+                }
+            }, type: "text", value: this.inputValue }))), h("div", { key: '4d64a4d3c08292ae1f574973c09aa9ec42b48c37', class: "zonos--country-select-content" }, isEmpty && (h("zonos-text", { key: 'dc30685daa60063cb9e6c6e7730f54cc5a25249b', class: "no-country", textColor: "gray-800" }, translate('No countries found'))), h("zonos-virtual-scroll", { key: '69f6d39cf40abd951857542d734424623cbd7031', class: "zonos--country-filter-content", fallbackItemHeight: 34, itemHeights: filteredCountries.map(() => 34), renderItem: index => {
                 const country = filteredCountries[index];
                 if (!country) {
                     return null;