@zonos/elements 1.3.171 → 1.3.173

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;
@@ -477,11 +497,11 @@ export class ZonosCheckout {
                         isPreview: this.preview,
                         sessionTimeout: CHECKOUT_SESSION_TIMEOUT,
                     });
+                    submitGtag('zonos-checkout-start');
+                    void trackConversionEvent('checkout_open');
                     const { enabled } = await isStoreDiscountEnabled();
                     // Hide discount input if there's no active discount configured for the store
                     cartStore.shouldHideDiscountInput = !enabled;
-                    submitGtag('zonos-checkout-start');
-                    void trackConversionEvent('checkout_open');
                     this.handleOrderDuplication();
                     if (window.Zonos.isLegacyCheckout) {
                         void sendLoadCheckoutFacadeLog();
@@ -621,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)
@@ -637,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,
@@ -675,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,
-                };
+                ];
             },
         });
         /**
@@ -930,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();
@@ -954,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
@@ -1001,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' &&
@@ -1055,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
@@ -1233,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",
@@ -1251,7 +1319,7 @@ export class ZonosCheckout {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "null"
+                "defaultValue": "[]"
             },
             "forceDialogOpen": {
                 "type": "boolean",
@@ -1278,6 +1346,8 @@ export class ZonosCheckout {
     static get states() {
         return {
             "defaultAddressParams": {},
+            "defaultCustomerProfileAddress": {},
+            "customerProfile": {},
             "open": {},
             "stripe": {},
             "submitLoading": {},
@@ -1293,7 +1363,8 @@ export class ZonosCheckout {
             "payInUsdConfirmDialogOpen": {},
             "inventoryCheckErrorMessage": {},
             "placedOrderInfo": {},
-            "clientSecret": {}
+            "clientSecret": {},
+            "stripeCustomerSessionClientSecret": {}
         };
     }
     static get methods() {
@@ -1367,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": {
@@ -1406,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/paypal.js

@@ -6,6 +6,7 @@ import { translate } from "../translationStore";
 import { zonosStore } from "../zonosStore";
 import { paypalCaptureOrder } from "../../utils/api/paypalCaptureOrder";
 import { paypalCreateOrder } from "../../utils/api/paypalCreateOrder";
+import { trackConversionEvent } from "../../utils/api/trackConversionEvent";
 import { isContrastColor } from "../../utils/isContrastColor";
 import { jsonParse } from "../../utils/jsonParse";
 import { log } from "../../utils/logging/log";
@@ -77,6 +78,10 @@ const paypalButtonOptions = ({ checkoutSessionId, onPaypalFail, onPaypalSessionD
     });
     return {
         createOrder: async () => {
+            // Clicking on the paypal button should trigger the paymentInfoCompleted event
+            void trackConversionEvent('checkout_paymentInfoCompleted', {
+                paymentMethod: 'paypal',
+            });
             const checkoutSessionStatus = await validateCheckoutSession();
             if (!checkoutSessionStatus.valid) {
                 paypalStore.paypalErrorMessage = checkoutSessionStatus.errorMessage;

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,
     };
@@ -214,6 +217,10 @@ const stripeCalculateLandedCost = async () => {
             }
             return Object.assign(Object.assign({}, checkoutSession), { landedCost: foundLandedCost });
         }).filter(Boolean)) || [];
+    // Send event when we get the quote back after the customer clicked "Continue to shipping"
+    if (checkoutSessionWorkflow === null || checkoutSessionWorkflow === void 0 ? void 0 : checkoutSessionWorkflow.length) {
+        void trackConversionEvent('checkout_quoteReceived');
+    }
     // update adjustmentTotal
     // highlight promocode input error if promocode is applied but no adjustment applied in landed cost
     const isInvalidPromoCode = cartStore.promoCodeApplied &&
@@ -514,6 +521,9 @@ const stripeStoreConfirmPayment = async () => {
             paymentMethod: paymentIntent === null || paymentIntent === void 0 ? void 0 : paymentIntent.payment_method,
         });
         log('Payment intent confirmed', 'info', { error, paymentIntent });
+        if ((paymentIntent === null || paymentIntent === void 0 ? void 0 : paymentIntent.status) === 'requires_action') {
+            throw new Error(translate('Your selected payment method requires additional verification. Please follow the instructions provided by your payment provider to complete the transaction.'));
+        }
         if (error) {
             if (error.type === 'card_error' || error.type === 'validation_error') {
                 throw new Error(error.message);
@@ -540,6 +550,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 +577,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 +623,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 +699,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

@@ -3,6 +3,7 @@ import { stripeStore } from "../../store/checkout/stripe";
 import { getFallbackDefaultCountryCode, localizationStore, } from "../../store/hello/localization";
 import { translate } from "../../store/translationStore";
 import { zonosStore } from "../../store/zonosStore";
+import { trackConversionEvent } from "../../utils/api/trackConversionEvent";
 import { isCheckoutMobile } from "../../utils/checkout/isCheckoutMobile";
 import { log } from "../../utils/logging/log";
 import { logError } from "../../utils/logging/logError";
@@ -15,9 +16,13 @@ export class ZonosAddress {
          * Google autocomplete overlay is conflict with our button, this is to adjust z index of the autocomplete
          */
         this.isAutoCompleteAdjusted = false;
+        /**
+         * Check if the tracking event is sent
+         */
+        this.trackingSent = false;
         this.type = undefined;
         this.titleText = undefined;
-        this.defaultAddress = null;
+        this.defaultAddress = [];
         this.stripe = window.Zonos.stripe;
         this.isDirtyAddress = false;
     }
@@ -40,9 +45,14 @@ export class ZonosAddress {
             case 'billing':
                 stripeStore.stripeBillingAddressEventData = event;
                 break;
-            default:
+            default: {
+                if (event.complete && !this.trackingSent) {
+                    void trackConversionEvent('checkout_customerInfoFilled');
+                    this.trackingSent = true;
+                }
                 stripeStore.stripeAddressEventData = event;
                 break;
+            }
         }
     }
     updateAddressElement({ stripeAddressElement, type, }) {
@@ -53,19 +63,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 +85,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 +144,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 +198,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: '9fd8e0ac4b86c10004c24e9d33f40ec577bd2a73', class: "zonos--address zonos--elements" }, h("zonos-text", { key: 'e7c3cbcab6f175354f26a8426d0dbf01afca736d', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), this.renderCompanyNameInput(), h("div", { key: '48ccbb019255c5362adf4c7954a7c2e3b015bfa5', class: "zonos--address-component" })));
     }
     static get is() { return "zonos-address"; }
     static get encapsulation() { return "scoped"; }
@@ -235,8 +256,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 +274,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