@zonos/elements 1.3.170 → 1.3.172

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

@@ -180,13 +180,30 @@ export class ZonosCheckout {
                 settlementAmount: total,
             };
         };
+        this.getDefaultAddress = () => {
+            // If checkout customer is authenticated, use the address from the customer profile
+            if (this.defaultCustomerProfileAddress.length) {
+                return this.defaultCustomerProfileAddress;
+            }
+            // If default address is provided directly from the component, use it
+            if (Array.isArray(this.defaultAddress) && this.defaultAddress.length) {
+                return this.defaultAddress;
+            }
+            if (!Array.isArray(this.defaultAddress) &&
+                typeof this.defaultAddress === 'object') {
+                return [this.defaultAddress];
+            }
+            return this.defaultAddressParams;
+        };
         this.appearanceSettingsOverride = undefined;
         this.preview = false;
         this.mobile = false;
         this.overrideStagingMode = undefined;
-        this.defaultAddress = null;
+        this.defaultAddress = [];
         this.forceDialogOpen = false;
-        this.defaultAddressParams = null;
+        this.defaultAddressParams = [];
+        this.defaultCustomerProfileAddress = [];
+        this.customerProfile = null;
         this.open = this.forceDialogOpen;
         this.stripe = window.Zonos.stripe;
         this.submitLoading = false;
@@ -203,6 +220,7 @@ export class ZonosCheckout {
         this.inventoryCheckErrorMessage = null;
         this.placedOrderInfo = null;
         this.clientSecret = stripeStore.clientSecret;
+        this.stripeCustomerSessionClientSecret = stripeStore.stripeCustomerSessionClientSecret;
     }
     /**
      * Init cart info handler event
@@ -263,6 +281,8 @@ export class ZonosCheckout {
                 cartId = cartIdResult.cartId;
                 // set prefill address if provided in createCartId callback result
                 this.useShippingDataFromCreateCartId(cartIdResult.shippingData);
+                cartStore.customerAuthenticationToken =
+                    cartIdResult.customerAuthenticationToken || null;
             }
             else {
                 cartId = cartIdResult;
@@ -426,12 +446,6 @@ export class ZonosCheckout {
             });
             button.addEventListener('click', async (e) => {
                 var _a;
-                if (!window.Zonos.logIntervalId) {
-                    // log the load time of all API calls every 2 seconds. This is to track the load time of all API calls for checkout user
-                    window.Zonos.logIntervalId = setInterval(() => {
-                        void sendBulkLoadTimeApiLog();
-                    }, 2000);
-                }
                 // Start tracking load time
                 const startTime = performance.now();
                 // Allow no country set for legacy facades. Otherwise enforce it being a shippable country and not disabled.
@@ -456,6 +470,16 @@ export class ZonosCheckout {
                 if (!shouldAllowOrder) {
                     return;
                 }
+                /**
+                 * We are checking the payment state when Zonos script is loaded (user clicked "Checkout" button prviously), the hidden checkout button would be injected and clicked when the page is loaded, which leads to recording the load time on page load.
+                 * Move the logic below checking Stripe payment state so we don't record the load time on page load and only do so when checkout modal is actually showed up.
+                 */
+                if (!window.Zonos.logIntervalId) {
+                    // log the load time of all API calls every 2 seconds. This is to track the load time of all API calls for checkout user
+                    window.Zonos.logIntervalId = setInterval(() => {
+                        void sendBulkLoadTimeApiLog();
+                    }, 2000);
+                }
                 // start loading
                 stripeStore.isFetchingSession = true;
                 this.open = true;
@@ -617,7 +641,6 @@ export class ZonosCheckout {
         const phone = address.customerPhone || '';
         const postal_code = address.customerZip || '';
         const state = address.customerState || '';
-        const countryCode = country === 'UK' ? 'GB' : country;
         /**
          * If one of the value is null, no need to preset the default address.
          * City and state are optional (they are not always provided for example Puerto Rico)
@@ -633,19 +656,27 @@ export class ZonosCheckout {
                 .join(', '));
             return;
         }
-        this.defaultAddressParams = {
-            address: {
-                city: city || '',
-                country: countryCode,
-                line1,
-                line2,
-                postal_code,
-                state,
+        if (country &&
+            localizationStore.shippingZoneCountries &&
+            !(country in localizationStore.shippingZoneCountries)) {
+            log(`Country "${country}" is not in the shipping zone, so it can not be prefilled`, 'warn');
+            return;
+        }
+        this.defaultAddressParams = [
+            {
+                address: {
+                    city: city || '',
+                    country,
+                    line1,
+                    line2,
+                    postal_code,
+                    state,
+                },
+                email,
+                name,
+                phone,
             },
-            email,
-            name,
-            phone,
-        };
+        ];
         log('Prefill address applied', 'info', {
             prefillAddress: this.defaultAddressParams,
             providedAddress: address,
@@ -671,19 +702,21 @@ export class ZonosCheckout {
             domesticRedirectedBtnSelector: domesticRedirectedBtnSelector,
             onShippingAddressSessionFound: shippingAddressSession => {
                 // prefilled the default address if shipping address session is found for checkout on open
-                this.defaultAddress = {
-                    address: {
-                        city: shippingAddressSession.city,
-                        country: shippingAddressSession.countryCode,
-                        line1: shippingAddressSession.address1,
-                        line2: shippingAddressSession.address2,
-                        postal_code: shippingAddressSession.postalCode,
-                        state: shippingAddressSession.state,
+                this.defaultAddress = [
+                    {
+                        address: {
+                            city: shippingAddressSession.city,
+                            country: shippingAddressSession.countryCode,
+                            line1: shippingAddressSession.address1,
+                            line2: shippingAddressSession.address2,
+                            postal_code: shippingAddressSession.postalCode,
+                            state: shippingAddressSession.state,
+                        },
+                        email: '',
+                        name: `${shippingAddressSession.firstName} ${shippingAddressSession.lastName}`,
+                        phone: shippingAddressSession.phone,
                     },
-                    email: '',
-                    name: `${shippingAddressSession.firstName} ${shippingAddressSession.lastName}`,
-                    phone: shippingAddressSession.phone,
-                };
+                ];
             },
         });
         /**
@@ -926,9 +959,39 @@ export class ZonosCheckout {
     handleAddressChange() {
         stripeStoreReset();
     }
+    handleCustomerProfileChange() {
+        var _a, _b;
+        if (!this.customerProfile) {
+            log('No customer profile', 'info');
+            this.defaultCustomerProfileAddress = [];
+            return;
+        }
+        log('Customer profile found', 'info', {
+            customerProfile: this.customerProfile,
+        });
+        // Build and set saved locations from checkout customers
+        this.defaultCustomerProfileAddress =
+            ((_b = (_a = stripeStore.customerProfile) === null || _a === void 0 ? void 0 : _a.locations) === null || _b === void 0 ? void 0 : _b.map(location => {
+                var _a;
+                return {
+                    address: {
+                        city: location.locality,
+                        country: location.countryCode,
+                        line1: location.line1,
+                        line2: location.line2 || '',
+                        postal_code: location.postalCode,
+                        state: location.administrativeArea,
+                    },
+                    email: location.email || ((_a = stripeStore.customerProfile) === null || _a === void 0 ? void 0 : _a.email) || '',
+                    name: location.name || '',
+                    phone: location.phone || '',
+                };
+            })) || [];
+    }
     handleClientSecretChange() {
-        log('=== Client secret changed', 'info', {
-            clientSecret: stripeStore.clientSecret,
+        log('==== Client secret changed', 'info', {
+            clientSecret: this.clientSecret,
+            stripeCustomerSessionClientSecret: this.stripeCustomerSessionClientSecret,
         });
         // apply theme to stripe elements
         void this.applyStripeTheme();
@@ -950,6 +1013,8 @@ export class ZonosCheckout {
             html.style.overflow = 'hidden';
         }
         else {
+            // Should reset stripeCustomerSessionClientSecret state when dialog is closed since merchant would need to re-authenticate, get an OTP again and we will get a new customer session.
+            this.stripeCustomerSessionClientSecret = null;
             const bodyOverflow = body.getAttribute(overflowAttrKey);
             const htmlOverflow = html.getAttribute(overflowAttrKey);
             // reset overflow state to original state
@@ -997,8 +1062,15 @@ export class ZonosCheckout {
     }
     render() {
         var _a, _b, _c, _d;
+        this.customerProfile = stripeStore.customerProfile;
         // Set client secret so that we can add this to @Watch listener
         this.clientSecret = stripeStore.clientSecret;
+        // Only set and update stripeCustomerSession state if it's available, since it would only be available at the time checkout session is created, afterward access checkout session the value would be `null`.
+        if (stripeStore.stripeCustomerSessionClientSecret) {
+            // Set stripe customer session client secret so that we can add this to @Watch listener
+            this.stripeCustomerSessionClientSecret =
+                stripeStore.stripeCustomerSessionClientSecret;
+        }
         const dialogLoading = 
         // if it's last step, don't need to check stripe elements
         (cartStore.step !== 'finish' &&
@@ -1051,7 +1123,7 @@ export class ZonosCheckout {
                     '--zonos--primary-color': !this.isMobile
                         ? colorPrimary
                         : undefined,
-                }) }, !this.isMobile && renderTopHeader(), cartStore.step === 'customer-info' && (h("zonos-customer-info", { continueLoading: this.submitLoading, defaultAddress: this.defaultAddress || this.defaultAddressParams, 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, isMobile: this.isMobile, onContinueClicked: async () => {
+                }) }, !this.isMobile && renderTopHeader(), cartStore.step === 'customer-info' && (h("zonos-customer-info", { continueLoading: this.submitLoading, defaultAddress: this.getDefaultAddress(), 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, isMobile: this.isMobile, onContinueClicked: async () => {
                     await this.handleStripePaymentContinue();
                 }, submitBtnColor: submitButtonColor }))), h("div", { class: "zonos--right", "data-theme": rightSideTheme }, this.isMobile && renderTopHeader(), h("div", { class: "zonos--right-actions" }, window.Zonos.showBaseForeign && (h("zonos-currency-toggle", null)), !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
@@ -1229,8 +1301,8 @@ export class ZonosCheckout {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "StripeStoreContactOption | null",
-                    "resolved": "null | { address: { city: string; country: string; line1: string; line2?: string | undefined; postal_code: string; state: string; }; email: string; name: string; phone?: string | undefined; }",
+                    "original": "| StripeStoreContactOption[]\n    | StripeStoreContactOption",
+                    "resolved": "StripeStoreContactOption[] | { address: { city: string; country: string; line1: string; line2?: string | undefined; postal_code: string; state: string; }; email: string; name: string; phone?: string | undefined; }",
                     "references": {
                         "StripeStoreContactOption": {
                             "location": "import",
@@ -1247,7 +1319,7 @@ export class ZonosCheckout {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "null"
+                "defaultValue": "[]"
             },
             "forceDialogOpen": {
                 "type": "boolean",
@@ -1274,6 +1346,8 @@ export class ZonosCheckout {
     static get states() {
         return {
             "defaultAddressParams": {},
+            "defaultCustomerProfileAddress": {},
+            "customerProfile": {},
             "open": {},
             "stripe": {},
             "submitLoading": {},
@@ -1289,7 +1363,8 @@ export class ZonosCheckout {
             "payInUsdConfirmDialogOpen": {},
             "inventoryCheckErrorMessage": {},
             "placedOrderInfo": {},
-            "clientSecret": {}
+            "clientSecret": {},
+            "stripeCustomerSessionClientSecret": {}
         };
     }
     static get methods() {
@@ -1363,7 +1438,7 @@ export class ZonosCheckout {
                     "signature": "(session: CheckoutSessionDetailsFragment) => Promise<void>",
                     "parameters": [{
                             "name": "session",
-                            "type": "{ cartId: string | null; clientSecret: string; id: string; landedCost: { amountSubtotals: { discounts: number | null; duties: number; fees: number; items: number; landedCostTotal: number; shipping: number; taxes: number; } | null; id: string; landedCostGuaranteeCode: LandedCostGuaranteeCode; method: IncotermCode; shipmentRating: { displayName: string; }; } | null; metadata: ({ key: string; value: string; } | null)[] | null; organizationId: string; subtotals: { adjustments: number; duties: number; exchangeRate: { id: string; rate: number; sourceCurrencyCode: CurrencyCode; targetCurrencyCode: CurrencyCode; type: ExchangeRateType; }; fees: number; items: number; landedCostTotal: number; presentmentCurrencyCode: CurrencyCode; shipping: number; taxes: number; total: number; }; }",
+                            "type": "{ cartId: string | null; clientSecret: string; customerProfile: { email: string | null; locations: { administrativeArea: string; countryCode: CountryCode; email: string | null; line1: string; line2: string | null; locality: string; name: string | null; phone: string | null; postalCode: string; }[] | null; name: string | null; } | null; customerSessionClientSecret: string | null; id: string; landedCost: { amountSubtotals: { discounts: number | null; duties: number; fees: number; items: number; landedCostTotal: number; shipping: number; taxes: number; } | null; id: string; landedCostGuaranteeCode: LandedCostGuaranteeCode; method: IncotermCode; shipmentRating: { displayName: string; }; } | null; metadata: ({ key: string; value: string; } | null)[] | null; organizationId: string; subtotals: { adjustments: number; duties: number; exchangeRate: { id: string; rate: number; sourceCurrencyCode: CurrencyCode; targetCurrencyCode: CurrencyCode; type: ExchangeRateType; }; fees: number; items: number; landedCostTotal: number; presentmentCurrencyCode: CurrencyCode; shipping: number; taxes: number; total: number; }; }",
                             "docs": ""
                         }],
                     "references": {
@@ -1402,9 +1477,15 @@ export class ZonosCheckout {
             }, {
                 "propName": "defaultAddress",
                 "methodName": "handleAddressChange"
+            }, {
+                "propName": "customerProfile",
+                "methodName": "handleCustomerProfileChange"
             }, {
                 "propName": "clientSecret",
                 "methodName": "handleClientSecretChange"
+            }, {
+                "propName": "stripeCustomerSessionClientSecret",
+                "methodName": "handleClientSecretChange"
             }, {
                 "propName": "open",
                 "methodName": "handleOpenChange"

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

@@ -148,7 +148,7 @@ export class ZonosCustomerInfo {
         this.submitBtnType = undefined;
         this.submitBtnColor = undefined;
         this.isMobile = false;
-        this.defaultAddress = null;
+        this.defaultAddress = [];
         this.showErrorBanner = false;
         this.shippingCountry = '';
         this.isCheckingForRestrictedItems = false;
@@ -205,7 +205,7 @@ export class ZonosCustomerInfo {
             } }), this.isTaxIdError && (h("zonos-text", { textColor: 'red-600', type: "caption" }, translate('Tax id is required')))));
     }
     render() {
-        var _a, _b;
+        var _a, _b, _c, _d, _e, _f;
         if (!stripeStore.stripeElements) {
             return null;
         }
@@ -224,11 +224,15 @@ export class ZonosCustomerInfo {
         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 = ((_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);
         // start validate on typing after error banner is shown, and hide it if the form is complete
         if (this.showErrorBanner) {
             this.showErrorBanner = !this.handleValidate();
         }
-        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: (_b = this.defaultAddress) === null || _b === void 0 ? void 0 : _b.email, isEmailError: this.isEmailError, onLinkAuthenticationChange: this.handleEmailValidation, titleText: translate('Contact') }), h("zonos-address", { defaultAddress: this.defaultAddress, titleText: translate('Address'), type: "shipping" }), this.renderTaxIdInput(this.shippingCountry), h("zonos-checkbox", { class: "zonos--shipping-same-as-billing-cbx", isChecked: stripeStore.stripeShippingSameAsBilling, label: translate('Shipping address same as billing'), onCheckboxSelected: e => {
+        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') }), h("zonos-address", { defaultAddress: this.defaultAddress, titleText: translate('Address'), type: "shipping" }), this.renderTaxIdInput(this.shippingCountry), 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 }, h("zonos-address", { defaultAddress: this.defaultAddress, titleText: translate('Billing address'), type: "billing" })), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, bold: true, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode
@@ -348,8 +352,8 @@ export class ZonosCustomerInfo {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "StripeStoreContactOption | null",
-                    "resolved": "null | { address: { city: string; country: string; line1: string; line2?: string | undefined; postal_code: string; state: string; }; email: string; name: string; phone?: string | undefined; }",
+                    "original": "StripeStoreContactOption[]",
+                    "resolved": "StripeStoreContactOption[]",
                     "references": {
                         "StripeStoreContactOption": {
                             "location": "import",
@@ -366,7 +370,7 @@ export class ZonosCustomerInfo {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "null"
+                "defaultValue": "[]"
             }
         };
     }

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

@@ -15,6 +15,7 @@ const { onChange, reset, state: cartStore, } = createStore(() => ({
     checkoutTimeoutInterval: null,
     currency: 'USD',
     customQuotingError: null,
+    customerAuthenticationToken: null,
     displayBaseCurrency: false,
     dutiesTaxesFees: null,
     dutiesTaxesFeesEstimate: null,
@@ -167,7 +168,11 @@ const cartStoreHasOneEligibleItem = () => {
 };
 const cartStoreSetCheckoutSession = (checkoutSession) => {
     var _a, _b, _c, _d, _e;
+    // update stripe store with updated information
     stripeStore.clientSecret = checkoutSession.clientSecret;
+    stripeStore.stripeCustomerSessionClientSecret =
+        checkoutSession.customerSessionClientSecret;
+    stripeStore.customerProfile = checkoutSession.customerProfile;
     cartStore.checkoutSession = checkoutSession;
     cartStore.checkoutSessionId = checkoutSession.id;
     // Check if there is a redirect URL in the metadata to override

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

@@ -21,6 +21,7 @@ const { onChange, reset, state: stripeStore, } = createStore(() => ({
     clientSecret: sessionStorage.getItem('zonos--client-secret') || '',
     companyName: '',
     customErrorMessage: null,
+    customerProfile: null,
     fetchingLandedCostAbortController: null,
     hasPaymentError: false,
     isFetchingLandedCost: false,
@@ -43,6 +44,7 @@ const { onChange, reset, state: stripeStore, } = createStore(() => ({
     stripeBillingAddressEventData: null,
     stripeBillingAddressUsedWhenFetchingLC: null,
     stripeBillingAddressUsedWhenValidatingAddress: null,
+    stripeCustomerSessionClientSecret: null,
     stripeElements: null,
     stripeElementsForBillingAddress: null,
     stripeElementsOptions: null,
@@ -85,6 +87,7 @@ const getStripeOptions = ({ clientSecret, overrideBorderRadius, overridePrimaryC
         },
         // Client secret can be undefined since we will load other elements that doesn't require client secret first, then load client secret and render one that requires it later
         clientSecret: clientSecret || undefined,
+        customerSessionClientSecret: stripeStore.stripeCustomerSessionClientSecret || undefined,
         externalPaymentMethodTypes: [...paypalPaymentType],
         locale: localizationStore.selectedLocale,
     };
@@ -540,6 +543,7 @@ export const getCheckoutSessionBody = () => {
         adjustmentsAmount: cartStore.adjustments.reduce((prev, adj) => prev + adj.amount, 0),
         cartId: window.Zonos.cartId,
         currency: ((_a = cartStore.items.find(Boolean)) === null || _a === void 0 ? void 0 : _a.currencyCode) || '',
+        customerAuthenticationToken: cartStore.customerAuthenticationToken || undefined,
         itemsAmount: total,
         metadata: [
             {
@@ -566,10 +570,6 @@ export const getCheckoutSessionBody = () => {
 };
 const stripeStoreGetPaymentIntent = async () => {
     var _a;
-    if (stripeStore.clientSecret) {
-        log('Payment intent already exists, skipping fetching payment intent');
-        return;
-    }
     if (!cartStore.checkoutSessionId) {
         // We want to log the error anytime we fail to create a checkout session
         void sendErrorLog({
@@ -616,9 +616,6 @@ const stripeStoreGetPaymentIntent = async () => {
         });
         return;
     }
-    // update stripe store with updated information
-    stripeStore.clientSecret =
-        json.checkoutSessionPaymentIntentCreate.clientSecret;
     // update cart store checkout session with updated from checkout session payment intent creation call so the checkout session and payment intent are in sync
     cartStoreSetCheckoutSession(json.checkoutSessionPaymentIntentCreate);
 };
@@ -695,6 +692,7 @@ const stripeStoreUpdateCheckoutSession = async ({ adjustmentsAmount, cartId, cur
             adjustmentsAmount,
             cartId,
             currency,
+            customerAuthenticationToken: cartStore.customerAuthenticationToken || undefined,
             id,
             itemsAmount,
             landedCostId,

package/dist/collection/components/stripe/zonos-address/zonos-address.js

@@ -17,7 +17,7 @@ export class ZonosAddress {
         this.isAutoCompleteAdjusted = false;
         this.type = undefined;
         this.titleText = undefined;
-        this.defaultAddress = null;
+        this.defaultAddress = [];
         this.stripe = window.Zonos.stripe;
         this.isDirtyAddress = false;
     }
@@ -53,19 +53,15 @@ export class ZonosAddress {
         stripeStore.stripeBillingAddressElement = stripeAddressElement;
     }
     async watchInitStripe() {
-        var _a, _b;
         this.stripe = window.Zonos.stripe;
         const { stripeAddressEventData, stripeElements } = this.getStripeAddressInstance();
         if (!this.stripe || !stripeElements) {
             logError("Stripe is not initialized. Couldn't load stripe element.");
             return;
         }
-        const phone = (_a = this.defaultAddress) === null || _a === void 0 ? void 0 : _a.phone;
-        if (!phone) {
-            // remove phone from default address if it's not provided, stripe
-            // will throw error if key phone exist and its value is empty or 'undefined'.
-            (_b = this.defaultAddress) === null || _b === void 0 ? true : delete _b.phone;
-        }
+        // remove phone from default address if it's not provided, stripe
+        // will throw error if key phone exist and its value is empty or 'undefined'.
+        const defaultAddress = this.defaultAddress.map(address => (Object.assign(Object.assign({}, address), { name: address.name, phone: address.phone || undefined })));
         const shippableCountries = localizationStore.shippingZoneCountries;
         const shippingZone = shippableCountries
             ? Object.values(shippableCountries).map(country => country.code)
@@ -79,8 +75,8 @@ export class ZonosAddress {
         const addressElement = stripeElements.create('address', {
             allowedCountries: checkoutAllCountries ? [] : allowedCountries,
             // only show the default address if stripeAddressEventData is not provided
-            contacts: this.defaultAddress && !stripeAddressEventData
-                ? [this.defaultAddress]
+            contacts: defaultAddress.length && !stripeAddressEventData
+                ? this.defaultAddress
                 : [],
             defaultValues: {
                 address: Object.assign(Object.assign({}, stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address), { country: defaultAddressCountry }),
@@ -138,12 +134,27 @@ export class ZonosAddress {
             type: this.type,
         });
     }
-    defaultAddressChanged() {
+    defaultAddressChanged(oldAddress, newAddress) {
+        // check if stringified json of oldAddress is different from newAddress
+        const oldAddressString = JSON.stringify(oldAddress);
+        const newAddressString = JSON.stringify(newAddress);
+        // No need to reset address element if the default address is the same
+        if (oldAddressString === newAddressString) {
+            return;
+        }
         log('Reset address element when default address property is changed', 'info', {
             defaultAddress: this.defaultAddress,
         });
         const stripeElement = this.getStripeAddressInstance().stripeAddressElement;
+        stripeElement === null || stripeElement === void 0 ? void 0 : stripeElement.clear();
         stripeElement === null || stripeElement === void 0 ? void 0 : stripeElement.destroy();
+        // Reset stripe address event data
+        if (this.type === 'shipping') {
+            stripeStore.stripeAddressEventData = null;
+        }
+        else {
+            stripeStore.stripeBillingAddressEventData = null;
+        }
         void this.watchInitStripe();
     }
     renderCompanyNameInput() {
@@ -177,7 +188,7 @@ export class ZonosAddress {
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: '18d2602886588dfeb39c7c0386354671076dd9bf', class: "zonos--address zonos--elements" }, h("zonos-text", { key: '9c4f704259e307932930995b14a9f2edd51dd3e3', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), this.renderCompanyNameInput(), h("div", { key: '7b2031b0b29cc8153b9b6376f27ccd331cc46e7a', class: "zonos--address-component" })));
+        return (h(Host, { key: '455356fe5ca9910fe34df12eb02b499316167bc7', class: "zonos--address zonos--elements" }, h("zonos-text", { key: '44ae4b872ca4aea9e9d8e1cfa0de5e421e4ea524', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), this.renderCompanyNameInput(), h("div", { key: '188976d8eef8c23b41c1b82fc7d5c4d2069fc92b', class: "zonos--address-component" })));
     }
     static get is() { return "zonos-address"; }
     static get encapsulation() { return "scoped"; }
@@ -235,8 +246,8 @@ export class ZonosAddress {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "ContactOption | null",
-                    "resolved": "ContactOption | null",
+                    "original": "ContactOption[]",
+                    "resolved": "ContactOption[]",
                     "references": {
                         "ContactOption": {
                             "location": "import",
@@ -253,7 +264,7 @@ export class ZonosAddress {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "null"
+                "defaultValue": "[]"
             }
         };
     }

package/dist/collection/components/stripe/zonos-link-authentication/zonos-link-authentication.js

@@ -4,6 +4,7 @@ import { cartStore } from "../../store/checkout/cart";
 import { stripeStore } from "../../store/checkout/stripe";
 import { translate } from "../../store/translationStore";
 import { getBorderRadius } from "../../utils/getBorderRadius";
+import { log } from "../../utils/logging/log";
 import { logError } from "../../utils/logging/logError";
 import { validateEmailValue } from "../../utils/validateEmailValue";
 /**
@@ -59,7 +60,7 @@ export class ZonosLinkAuthentication {
         // Create and mount the Authentication Element in ${type} mode
         const linkAuthenticationElement = stripeStore.stripeLinkElement ||
             stripeStore.stripeElements.create('linkAuthentication', {
-                defaultValues: defaultValues || undefined,
+                defaultValues: defaultValues,
             });
         const linkAuthenticationElementContainer = this.el.querySelector('.zonos--link-authentication-component');
         if (!linkAuthenticationElementContainer) {
@@ -74,11 +75,33 @@ export class ZonosLinkAuthentication {
         });
         stripeStore.stripeLinkElement = linkAuthenticationElement;
     }
-    watchDefaultEmail() {
-        if (!this.defaultEmail) {
+    watchDefaultEmail(newDefaultEmail, oldDefaultEmail) {
+        var _a, _b;
+        log('Default email is changed', 'info', {
+            newDefaultEmail,
+            oldDefaultEmail,
+        });
+        if (oldDefaultEmail === newDefaultEmail) {
             return;
         }
-        this.setCustomEmailInputToLinkEvent(this.defaultEmail);
+        if (!newDefaultEmail) {
+            stripeStore.stripeLinkEventData = null;
+        }
+        // Only set value for Stripe input input to stripeLinkEventData when checkout is in staging mode
+        if (cartStore.isStagingMode) {
+            this.setCustomEmailInputToLinkEvent(newDefaultEmail || '');
+            return;
+        }
+        (_a = stripeStore.stripeLinkElement) === null || _a === void 0 ? void 0 : _a.clear();
+        (_b = stripeStore.stripeLinkElement) === null || _b === void 0 ? void 0 : _b.destroy();
+        stripeStore.stripeLinkElement = null;
+        stripeStore.stripeLinkEventData = null;
+        log('Reset stripe link element when default email is changed', 'info', {
+            defaultEmail: newDefaultEmail,
+        });
+        setTimeout(() => {
+            void this.watchInitStripe();
+        }, 5);
     }
     componentDidLoad() {
         // @Watch doesn't get trigger on initial load

package/dist/collection/components/utils/handleFetch.js

@@ -165,12 +165,15 @@ const handleRequestWithFallback = async ({ basePathType: _basePathType, options,
     log(`${path} (${duration.toFixed(2)}ms)`, 'info');
     // No need to send the load time api log for the log-script-load endpoint
     const internalDuration = response === null || response === void 0 ? void 0 : response.headers.get('Zonos-Duration');
-    prepLoadTimeApiLog({
-        apiPath: path,
-        apiType: basePathType,
-        loadTimeInternal: internalDuration ? Number(internalDuration) : 0,
-        loadTimeTotal: duration,
-    });
+    // Only record if the response status is 200, some endpoint will return 200 with error
+    if ((response === null || response === void 0 ? void 0 : response.status) === 200) {
+        prepLoadTimeApiLog({
+            apiPath: path,
+            apiType: basePathType,
+            loadTimeInternal: internalDuration ? Number(internalDuration) : 0,
+            loadTimeTotal: duration,
+        });
+    }
     const nextFallbackApiType = getNextFallbackApiType(basePathType);
     const unknownError = errors.find(({ type }) => type === 'unknown');
     const isUnknownError = !!unknownError || (response === null || response === void 0 ? void 0 : response.status) === 404;

package/dist/collection/components/utils/logging/getAdditionalLogMetadata.js

@@ -10,6 +10,7 @@ export const getAdditionalLogMetadata = () => {
         connectionEffectiveType: baseConnection === null || baseConnection === void 0 ? void 0 : baseConnection.effectiveType,
         connectionRtt: baseConnection === null || baseConnection === void 0 ? void 0 : baseConnection.rtt,
         connectionSaveData: baseConnection === null || baseConnection === void 0 ? void 0 : baseConnection.saveData,
+        isHostedCheckout: window.Zonos.isLegacyCheckout,
         screenHeight: window.screen.height,
         screenWidth: window.screen.width,
         userAgent: userAgentData && userAgentData.brands.length > 0

package/dist/collection/styles/stripe/defaultVariable.js

@@ -12,6 +12,8 @@ export const defaultVariable = ({ borderStyle, theme, }) => {
         default:
             return {
                 borderRadius: getBorderRadius({ overrideBorderStyle: borderStyle }),
+                iconMenuColor: 'var(--colorText)',
+                iconMenuHoverColor: 'var(--colorText)',
             };
     }
 };