@zonos/elements 1.3.203 → 1.3.205

package/dist/collection/components/common/zonos-virtual-scroll/zonos-virtual-scroll.js

@@ -6,16 +6,11 @@ import { h, Host } from "@stencil/core";
  */
 export class ZonosVirtualScroll {
     constructor() {
+        this.scrollTop = 0;
+        this.totalHeight = 1;
         this.scrollListener = (_ev) => {
             this.scrollTop = this.ele.scrollTop;
         };
-        this.container = undefined;
-        this.renderItem = undefined;
-        this.itemWidth = undefined;
-        this.fallbackItemHeight = undefined;
-        this.itemHeights = undefined;
-        this.scrollTop = 0;
-        this.totalHeight = 1;
     }
     updateTotalHeight() {
         this.totalHeight = this.itemHeights.reduce((acc, height) => acc + (height || this.fallbackItemHeight), 0);

package/dist/collection/components/component-template/zonos-component/zonos-component.js

@@ -2,8 +2,17 @@ import { h } from "@stencil/core";
 import { format } from "../../../utils/format";
 export class ZonosComponent {
     constructor() {
+        /**
+         * The first name
+         */
         this.first = '';
+        /**
+         * The middle name
+         */
         this.middle = '';
+        /**
+         * The last name
+         */
         this.last = '';
     }
     getText() {

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

@@ -19,6 +19,31 @@ import { mergeConfig } from "../../utils/mergeConfig";
 const PEEK_MESSAGE_CLOSE_DELAY_MS = 3000;
 export class ZonosHello {
     constructor() {
+        this.showPeekMessage = false;
+        this.zonosStoreHelloSettings = zonosStore.helloSettings;
+        this.showDialog = false;
+        this.peekMessage = '';
+        this.initialUrl = '';
+        /**
+         * This array will hold all restricted items handled by Hello thus far
+         */
+        this.allRestrictedItems = [];
+        /**
+         * This array will hold all products handled by Hello thus far
+         */
+        this.allFoundProducts = [];
+        /**
+         * This array will hold all products currently on the page
+         */
+        this.productsOnPage = [];
+        /**
+         * Hello widget is rendered on the screen, this should only triggered once
+         */
+        this.isHelloWidgetRendered = false;
+        /**
+         * Determine if the window is mobile
+         */
+        this.isMobile = false;
         this.getHelloPeekMessage = (organizationName) => {
             const isRestrictionPage = zonosStore.currentHelloPage === 'productDetail' ||
                 zonosStore.currentHelloPage === 'productList';
@@ -193,19 +218,6 @@ export class ZonosHello {
             }
             return showForCountries === null || showForCountries === void 0 ? void 0 : showForCountries.includes(localizationStore.selectedCountryCode || '');
         };
-        this.mobileLocationOverride = undefined;
-        this.animateFromLeftOverride = undefined;
-        this.appearanceSettingsOverride = undefined;
-        this.showPeekMessage = false;
-        this.zonosStoreHelloSettings = zonosStore.helloSettings;
-        this.showDialog = false;
-        this.peekMessage = '';
-        this.initialUrl = '';
-        this.allRestrictedItems = [];
-        this.allFoundProducts = [];
-        this.productsOnPage = [];
-        this.isHelloWidgetRendered = false;
-        this.isMobile = false;
     }
     /**
      * Get the country list the hello widget's country select is using

package/dist/collection/components/hello/zonos-hello-dialog/zonos-hello-dialog-footer/zonos-hello-dialog-footer.js

@@ -8,8 +8,15 @@ import Globe from "./assets/globe.svg";
 import ZonosIcon from "./assets/zonosIcon.svg";
 export class ZonosHelloDialogFooter {
     constructor() {
-        this.appearanceSettings = undefined;
+        /**
+         * Whether or not the country select dialog is open
+         * @default false
+         */
         this.setShowCountrySelect = () => { };
+        /**
+         * Whether or not the language select dialog is open
+         * @default false
+         */
         this.setShowLanguageSelect = () => { };
     }
     render() {

package/dist/collection/components/hello/zonos-hello-dialog/zonos-hello-dialog.css

@@ -187,8 +187,6 @@
   :host .zonos--hello-dialog.zonos--hello-dialog-animate-from-left {
     transform-origin: bottom;
   }
-}
-@media (max-width: 768px) {
   :host .zonos--hello-dialog.zonos--hello-dialog-open {
     opacity: 1;
     transform: scaleY(1);

package/dist/collection/components/hello/zonos-hello-dialog/zonos-hello-dialog.js

@@ -26,6 +26,23 @@ const dutyTaxMessage_AU_lowValueGST = `${translate('The low-value GST law passed
 })}`;
 export class ZonosHelloDialog {
     constructor() {
+        /**
+         * Whether or not the dialog is open
+         */
+        this.isOpen = false;
+        /**
+         * The function to set the open state
+         * @default () => {}
+         */
+        this.setIsOpen = () => { };
+        /**
+         * Item restrictions array if any
+         * @default []
+         */
+        this.restrictedItems = [];
+        this.welcomeMessage = 'Welcome to our Demo App!';
+        this.showCountrySelect = false;
+        this.showLanguageSelect = false;
         this.clickOutsideDialogHandler = (e) => {
             if (!e.composedPath().includes(this.dialogRef) && this.isOpen) {
                 this.setIsOpen(false);
@@ -190,15 +207,6 @@ export class ZonosHelloDialog {
                     return null;
             }
         };
-        this.isOpen = false;
-        this.setIsOpen = () => { };
-        this.mobileLocationOverride = undefined;
-        this.animateFromLeftOverride = undefined;
-        this.appearanceSettings = undefined;
-        this.restrictedItems = [];
-        this.welcomeMessage = 'Welcome to our Demo App!';
-        this.showCountrySelect = false;
-        this.showLanguageSelect = false;
     }
     globalClickHandler(e) {
         this.clickOutsideDialogHandler(e);

package/dist/collection/components/main/zonos-controller.js

@@ -11,10 +11,6 @@ import { CheckoutAddressService } from "../utils/iframe/CheckoutAddressService";
 import { iframeServices, injectPrivateIframe, } from "../utils/iframe/IframeHelpers";
 import { log } from "../utils/logging/log";
 export class ZonosController {
-    constructor() {
-        this.config = undefined;
-        this.zonosApiKey = undefined;
-    }
     /**
      * Method to initialize checkout element
      */

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

@@ -691,7 +691,8 @@ const stripeStoreInitCheckoutSession = async () => {
     if (errors.length || !json) {
         const messages = (_a = errors.find(error => error.message)) === null || _a === void 0 ? void 0 : _a.message;
         // check if the error is related to expired cart and thow error so we can show error message accordingly
-        if (messages.some(message => message.message === 'Cart is expired.')) {
+        if (Array.isArray(messages) &&
+            messages.some(message => message.message === 'Cart is expired.')) {
             throw new Error('Cart is expired.');
         }
         logError('Error occurred when creating checkout session', JSON.stringify(errors, null, 2));

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

@@ -20,6 +20,27 @@ export class ZonosAddress {
          * Google autocomplete overlay is conflict with our button, this is to adjust z index of the autocomplete
          */
         this.isAutoCompleteAdjusted = false;
+        /**
+         * Default address for stripe
+         */
+        this.defaultAddress = [];
+        /**
+         * Error message for tax id input
+         */
+        this.taxIdErrorMessage = '';
+        this.stripe = window.Zonos.stripe;
+        /**
+         * Check if the address is dirty or not to scroll into view. When the component is mounted, if the data is filled with address line 1, it's considered dirty
+         */
+        this.isDirtyAddress = false;
+        /**
+         * Local address event for stripe address element
+         */
+        this.isAddressFilled = false;
+        /**
+         * Local checkout session id to check if the address is filled after checkout is loaded
+         */
+        this.checkoutSessionId = storageStore.checkoutSessionId;
         /**
          * Check if the tracking event is sent
          */
@@ -32,14 +53,6 @@ export class ZonosAddress {
             onCheckoutSessionIdChange();
             this.onStoreCheckoutSessionIdChangedSubscription = storageStoreOnChange('checkoutSessionId', onCheckoutSessionIdChange);
         };
-        this.type = undefined;
-        this.titleText = undefined;
-        this.defaultAddress = [];
-        this.taxIdErrorMessage = '';
-        this.stripe = window.Zonos.stripe;
-        this.isDirtyAddress = false;
-        this.isAddressFilled = false;
-        this.checkoutSessionId = storageStore.checkoutSessionId;
     }
     getStripeAddressInstance() {
         if (this.type === 'billing') {

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

@@ -9,6 +9,19 @@ import RemoveIcon from "./assets/RemoveIcon.svg";
  */
 export class ZonosAddressSuggestions {
     constructor() {
+        /**
+         * Suggestions to display
+         */
+        this.suggestions = [];
+        /**
+         * Selected suggestion id
+         */
+        this.selectedSuggestionId = null;
+        /**
+         * Local suggestions to display
+         */
+        this.localSuggestions = [];
+        this.lastHoveredSuggestionId = null;
         /**
          * Handle clicks outside of the suggestions component
          */
@@ -17,11 +30,6 @@ export class ZonosAddressSuggestions {
                 this.localSuggestions = [];
             }
         };
-        this.type = undefined;
-        this.suggestions = [];
-        this.selectedSuggestionId = null;
-        this.localSuggestions = [];
-        this.lastHoveredSuggestionId = null;
     }
     suggestionsChanged() {
         var _a, _b;

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

@@ -31,6 +31,74 @@ import { countryRequireTaxId, shipToTaxIdLabels, } from "../../../types/checkout
 export class ZonosAddress {
     constructor() {
         this.onStoreCheckoutSessionIdChangedSubscription = () => { };
+        /**
+         * Default address for stripe
+         */
+        this.defaultAddress = [];
+        /**
+         * Error message for tax id input
+         */
+        this.taxIdErrorMessage = '';
+        this.stripe = window.Zonos.stripe;
+        /**
+         * Check if the address is dirty or not to scroll into view. When the component is mounted, if the data is filled with address line 1, it's considered dirty
+         */
+        this.isDirtyAddress = false;
+        /**
+         * Local address event for stripe address element
+         */
+        this.isAddressFilled = false;
+        /**
+         * Whether the address line 1 is already entered greater than 3 characters once
+         */
+        this.isAddressLine1Entered = false;
+        /**
+         * Address suggestions from google place api
+         */
+        this.addressSuggestions = [];
+        /**
+         * Country fields for the current country
+         */
+        this.countryField = null;
+        /**
+         * Whether to start google place suggestions
+         */
+        this.startGooglePlaceSuggestions = false;
+        /**
+         * List of countries to show in the address element
+         */
+        this.shipToCountries = null;
+        /**
+         * Shipping zones from localization
+         */
+        this.shippingZones = null;
+        this.city = '';
+        this.country = '';
+        this.firstName = '';
+        this.lastName = '';
+        this.line1 = '';
+        this.line2 = null;
+        this.phone = '';
+        this.postalCode = '';
+        this.state = '';
+        this.cityError = '';
+        this.stateError = '';
+        this.postalCodeError = '';
+        this.phoneError = '';
+        this.firstNameError = '';
+        this.lastNameError = '';
+        /**
+         * Whether the address element is loaded
+         */
+        this.isFirstInitialization = true;
+        /**
+         * Address service instance
+         */
+        this.addressService = null;
+        /**
+         * Local checkout session id to check if the address is filled after checkout is loaded
+         */
+        this.checkoutSessionId = storageStore.checkoutSessionId;
         /**
          * Whether the suggestion is clicked
          */
@@ -193,37 +261,6 @@ export class ZonosAddress {
             onCheckoutSessionIdChange();
             this.onStoreCheckoutSessionIdChangedSubscription = storageStoreOnChange('checkoutSessionId', onCheckoutSessionIdChange);
         };
-        this.type = undefined;
-        this.titleText = undefined;
-        this.defaultAddress = [];
-        this.taxIdErrorMessage = '';
-        this.stripe = window.Zonos.stripe;
-        this.isDirtyAddress = false;
-        this.isAddressFilled = false;
-        this.isAddressLine1Entered = false;
-        this.addressSuggestions = [];
-        this.countryField = null;
-        this.startGooglePlaceSuggestions = false;
-        this.shipToCountries = null;
-        this.shippingZones = null;
-        this.city = '';
-        this.country = '';
-        this.firstName = '';
-        this.lastName = '';
-        this.line1 = '';
-        this.line2 = null;
-        this.phone = '';
-        this.postalCode = '';
-        this.state = '';
-        this.cityError = '';
-        this.stateError = '';
-        this.postalCodeError = '';
-        this.phoneError = '';
-        this.firstNameError = '';
-        this.lastNameError = '';
-        this.isFirstInitialization = true;
-        this.addressService = null;
-        this.checkoutSessionId = storageStore.checkoutSessionId;
     }
     getStripeAddressInstance() {
         if (this.type === 'billing') {
@@ -289,12 +326,7 @@ export class ZonosAddress {
     }
     getIsComplete() {
         const { city, firstName, lastName, line1, phone, postalCode, state } = this.getCustomAddressErrors();
-        // empty field when first loaded
-        if (!this.line1 ||
-            !this.postalCode ||
-            !this.firstName ||
-            !this.lastName ||
-            !this.phone) {
+        if (!this.line1 || !this.firstName || !this.lastName || !this.phone) {
             return false;
         }
         // has any errors from any of the fields
@@ -607,6 +639,20 @@ export class ZonosAddress {
             valueType: 'phone',
         });
     }
+    countryChanged(countryCode) {
+        var _a, _b;
+        const countryFields = (_a = zonosStore.genericSettings) === null || _a === void 0 ? void 0 : _a.countryFields;
+        const countryFieldCountryCode = countryFields === null || countryFields === void 0 ? void 0 : countryFields[countryCode];
+        // If the country code of countryFields are the same as current selected country code, do nothing
+        if (((_b = this.countryField) === null || _b === void 0 ? void 0 : _b.countryCode) === this.country) {
+            return;
+        }
+        if (countryFields && countryFieldCountryCode) {
+            this.countryField = countryFieldCountryCode;
+            return;
+        }
+        this.countryField = null;
+    }
     shouldEnabledCustomAddressChanged() {
         // Only initialize the address suggestions if the address service is not already initialized
         this.initAddressSuggestions();
@@ -624,16 +670,12 @@ export class ZonosAddress {
         });
     }
     renderCustomAddressForm() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
-        const _w = this.getCustomAddressErrors(), { showError } = _w, customAddressErrors = __rest(_w, ["showError"]);
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+        const _t = this.getCustomAddressErrors(), { showError } = _t, customAddressErrors = __rest(_t, ["showError"]);
         const stripeAddressEventData = this.getStripeAddressInstance().stripeAddressEventData;
         const countryCode = stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.country;
-        this.countryField =
-            ((_a = zonosStore.genericSettings) === null || _a === void 0 ? void 0 : _a.countryFields) && countryCode
-                ? (_c = (_b = zonosStore.genericSettings) === null || _b === void 0 ? void 0 : _b.countryFields) === null || _c === void 0 ? void 0 : _c[countryCode]
-                : null;
-        const firstCountry = (_d = this.shipToCountries) === null || _d === void 0 ? void 0 : _d[0];
-        const stateOptions = Object.entries(((_e = this.countryField) === null || _e === void 0 ? void 0 : _e.regions) || {})
+        const firstCountry = (_a = this.shipToCountries) === null || _a === void 0 ? void 0 : _a[0];
+        const stateOptions = Object.entries(((_b = this.countryField) === null || _b === void 0 ? void 0 : _b.regions) || {})
             .map(([label, region]) => ({
             label,
             value: region.interpayCode,
@@ -668,6 +710,30 @@ export class ZonosAddress {
                  */
                 this.lastName = event.detail;
             }, required: true }), h("zonos-stripe-select", { "aria-required": "true", autoComplete: "shipping country", class: "zonos--custom-address-form-input", name: `${this.type}-country`, onSelectChange: (event) => {
+                this.countryChanged(event.detail);
+                // revalidate the postal code since with empty value so it would reset the customAddressErrors
+                this.validate({
+                    type: this.type,
+                    value: '',
+                    valueType: 'postalCode',
+                });
+                this.validate({
+                    type: this.type,
+                    value: '',
+                    valueType: 'city',
+                });
+                this.validate({
+                    type: this.type,
+                    value: '',
+                    valueType: 'state',
+                });
+                /**
+                 * Order of operations is important here:
+                 * 1. validate() updates all input error states
+                 * 2. Setting postalCode triggers @Watch('postalCode')
+                 * 3. getIsComplete() checks customAddressErrors state
+                 * Therefore, we must update the value after validation to ensure correct error state
+                 */
                 this.country = event.detail;
                 this.city = '';
                 this.state = '';
@@ -705,9 +771,9 @@ export class ZonosAddress {
             }, suggestions: this.addressSuggestions, type: this.type })), h("div", { "aria-label": "Additional address details", class: classes([
                 'zonos--custom-address-form-additional-fields',
                 countryCode && this.isAddressLine1Entered ? 'zonos--show' : '',
-            ]), role: "group" }, h("zonos-stripe-input", { "aria-required": "false", autoComplete: "shipping address-line2", class: "zonos--custom-address-form-input", inputLabel: translate(((_f = this.countryField) === null || _f === void 0 ? void 0 : _f.address2Label) || 'Address line 2'), inputValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.line2) || '', onInputChange: (event) => {
+            ]), role: "group" }, h("zonos-stripe-input", { "aria-required": "false", autoComplete: "shipping address-line2", class: "zonos--custom-address-form-input", inputLabel: translate(((_c = this.countryField) === null || _c === void 0 ? void 0 : _c.address2Label) || 'Address line 2'), inputValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.line2) || '', onInputChange: (event) => {
                 this.line2 = event.detail;
-            } }), ((_g = this.countryField) === null || _g === void 0 ? void 0 : _g.cityShow) && (h("zonos-stripe-input", { "aria-required": ((_h = this.countryField) === null || _h === void 0 ? void 0 : _h.cityRequired) ? 'true' : 'false', autoComplete: "shipping address-level2", class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.city : undefined, inputLabel: translate(((_j = this.countryField) === null || _j === void 0 ? void 0 : _j.cityLabel) || 'City'), inputValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.city) || '', name: "locality", onInputChange: (event) => {
+            } }), ((_d = this.countryField) === null || _d === void 0 ? void 0 : _d.cityShow) && (h("zonos-stripe-input", { "aria-required": ((_e = this.countryField) === null || _e === void 0 ? void 0 : _e.cityRequired) ? 'true' : 'false', autoComplete: "shipping address-level2", class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.city : undefined, inputLabel: translate(((_f = this.countryField) === null || _f === void 0 ? void 0 : _f.cityLabel) || 'City'), inputValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.city) || '', name: "locality", onInputChange: (event) => {
                 this.validate({
                     type: this.type,
                     value: event.detail,
@@ -721,7 +787,7 @@ export class ZonosAddress {
                  * Therefore, we must update the value after validation to ensure correct error state
                  */
                 this.city = event.detail;
-            }, required: (_k = this.countryField) === null || _k === void 0 ? void 0 : _k.cityRequired })), h("div", { class: "zonos--custom-address-form-state-zip-wrapper" }, ((_l = this.countryField) === null || _l === void 0 ? void 0 : _l.stateShow) && (h("zonos-stripe-select", { "aria-required": ((_m = this.countryField) === null || _m === void 0 ? void 0 : _m.stateRequired) ? 'true' : 'false', autoComplete: "shipping address-level1", class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.state : undefined, isError: showError && !!customAddressErrors.state, name: `${this.type}-state`, onSelectChange: (event) => {
+            }, required: (_g = this.countryField) === null || _g === void 0 ? void 0 : _g.cityRequired })), h("div", { class: "zonos--custom-address-form-state-zip-wrapper" }, ((_h = this.countryField) === null || _h === void 0 ? void 0 : _h.stateShow) && (h("zonos-stripe-select", { "aria-required": ((_j = this.countryField) === null || _j === void 0 ? void 0 : _j.stateRequired) ? 'true' : 'false', autoComplete: "shipping address-level1", class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.state : undefined, isError: showError && !!customAddressErrors.state, name: `${this.type}-state`, onSelectChange: (event) => {
                 this.validate({
                     type: this.type,
                     value: event.detail,
@@ -735,9 +801,9 @@ export class ZonosAddress {
                  * Therefore, we must update the value after validation to ensure correct error state
                  */
                 this.state = event.detail;
-            }, options: stateOptions, required: (_o = this.countryField) === null || _o === void 0 ? void 0 : _o.stateRequired, selectLabel: translate(((_p = this.countryField) === null || _p === void 0 ? void 0 : _p.stateLabel) || 'State'), selectedValue: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.state, title: `${this.type} state` })), ((_q = this.countryField) === null || _q === void 0 ? void 0 : _q.zipShow) && (h("zonos-stripe-input", { "aria-describedby": ((_r = this.countryField) === null || _r === void 0 ? void 0 : _r.zipFormat)
+            }, options: stateOptions, required: (_k = this.countryField) === null || _k === void 0 ? void 0 : _k.stateRequired, selectLabel: translate(((_l = this.countryField) === null || _l === void 0 ? void 0 : _l.stateLabel) || 'State'), selectedValue: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.state, title: `${this.type} state` })), ((_m = this.countryField) === null || _m === void 0 ? void 0 : _m.zipShow) && (h("zonos-stripe-input", { "aria-describedby": ((_o = this.countryField) === null || _o === void 0 ? void 0 : _o.zipFormat)
                 ? `zip-format-${this.type}`
-                : undefined, "aria-required": ((_s = this.countryField) === null || _s === void 0 ? void 0 : _s.zipRequired) ? 'true' : 'false', autoComplete: "shipping postal-code", class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.postalCode : undefined, inputLabel: translate(((_t = this.countryField) === null || _t === void 0 ? void 0 : _t.zipLabel) || 'Zip'), inputValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.postal_code) || '', onInputChange: (event) => {
+                : undefined, "aria-required": ((_p = this.countryField) === null || _p === void 0 ? void 0 : _p.zipRequired) ? 'true' : 'false', autoComplete: "shipping postal-code", class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.postalCode : undefined, inputLabel: translate(((_q = this.countryField) === null || _q === void 0 ? void 0 : _q.zipLabel) || 'Zip'), inputValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.postal_code) || '', onInputChange: (event) => {
                 this.validate({
                     type: this.type,
                     value: event.detail,
@@ -751,7 +817,7 @@ export class ZonosAddress {
                  * Therefore, we must update the value after validation to ensure correct error state
                  */
                 this.postalCode = event.detail;
-            }, required: (_u = this.countryField) === null || _u === void 0 ? void 0 : _u.zipRequired }))), h("zonos-stripe-phone-input", { autoComplete: "shipping tel", class: "zonos--custom-address-form-input", countryCode: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.country, countryOptions: (_v = zonosStore.genericSettings) === null || _v === void 0 ? void 0 : _v.countryFields, error: showError ? customAddressErrors.phone : undefined, inputLabel: translate('Phone number'), inputValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.phone) || '', onInputValueChange: event => {
+            }, required: (_r = this.countryField) === null || _r === void 0 ? void 0 : _r.zipRequired }))), h("zonos-stripe-phone-input", { autoComplete: "shipping tel", class: "zonos--custom-address-form-input", countryCode: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.country, countryOptions: (_s = zonosStore.genericSettings) === null || _s === void 0 ? void 0 : _s.countryFields, error: showError ? customAddressErrors.phone : undefined, inputLabel: translate('Phone number'), inputValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.phone) || '', onInputValueChange: event => {
                 const { isEmpty, phoneNumber, valid, wrongFormat } = event.detail;
                 // Validate the phone number
                 this.validate({
@@ -808,6 +874,7 @@ export class ZonosAddress {
         this.isFirstInitialization = false;
         // subscribe to checkout session id changes from storage store
         this.onStoreCheckoutSessionIdChanged();
+        this.countryChanged((stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.country) || 'US');
     }
     render() {
         var _a;
@@ -821,10 +888,10 @@ export class ZonosAddress {
             this.country = localizationStore.selectedCountryCode;
         }
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: '7a766af62acc47886e716ac3c52c1457eae04545', class: classes([
+        return (h(Host, { key: 'd66b492bb6eb663ce3311012de3cc14e9848e41e', class: classes([
                 'zonos--address zonos--elements',
                 `zonos--${this.type}-address`,
-            ]) }, h("zonos-text", { key: '224a78f8d1e02e2b0d7c95eafe9a1d4354fb5f73', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderCustomAddressForm()));
+            ]) }, h("zonos-text", { key: '4ab2a112115c951719063f94247d1d85f16faec8', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderCustomAddressForm()));
     }
     static get is() { return "zonos-custom-address"; }
     static get encapsulation() { return "scoped"; }
@@ -1037,6 +1104,9 @@ export class ZonosAddress {
             }, {
                 "propName": "state",
                 "methodName": "formFieldsChanged"
+            }, {
+                "propName": "country",
+                "methodName": "countryChanged"
             }, {
                 "propName": "addressService",
                 "methodName": "shouldEnabledCustomAddressChanged"

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

@@ -12,6 +12,17 @@ import { validateEmailValue } from "../../utils/validateEmailValue";
  */
 export class ZonosLinkAuthentication {
     constructor() {
+        /**
+         * Default email for stripe
+         */
+        this.defaultEmail = null;
+        /**
+         * Email error text to dispaly
+         */
+        this.isEmailError = false;
+        this.stripe = stripeStore.stripe;
+        this.isStagingMode = cartStore.isStagingMode;
+        this.clientSecret = stripeStore.clientSecret;
         this.setCustomEmailInputToLinkEvent = (emailValue) => {
             // check if the email is valid
             const isValid = validateEmailValue(emailValue);
@@ -31,12 +42,6 @@ export class ZonosLinkAuthentication {
             this.setCustomEmailInputToLinkEvent(inputValue);
             (_a = this.linkAuthenticationChange) === null || _a === void 0 ? void 0 : _a.emit();
         };
-        this.titleText = undefined;
-        this.defaultEmail = null;
-        this.isEmailError = false;
-        this.stripe = stripeStore.stripe;
-        this.isStagingMode = cartStore.isStagingMode;
-        this.clientSecret = stripeStore.clientSecret;
     }
     watchIsStagingMode() {
         // Wait for the DOM to be ready before re-initializing Link element

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

@@ -8,11 +8,10 @@ import { logError } from "../../utils/logging/logError";
  */
 export class ZonosPayment {
     constructor() {
-        this.trackingSent = false;
-        this.titleText = undefined;
         this.stripe = stripeStore.stripe;
         this.stripeElements = stripeStore.stripeElements;
         this.isPaymentInfoFilled = false;
+        this.trackingSent = false;
     }
     watchIsPaymentInfoFilled() {
         var _a;

package/dist/collection/types/generated/graphql.internal.types.js

@@ -335,6 +335,10 @@ export const checkoutSessionCreationModeType = {
     WithPaymentIntent: 'WITH_PAYMENT_INTENT',
     WithoutPaymentIntent: 'WITHOUT_PAYMENT_INTENT',
 };
+export const checkoutSessionPartyReferenceType = {
+    Destination: 'DESTINATION',
+    Payor: 'PAYOR',
+};
 export const checkoutStatus = {
     Disabled: 'DISABLED',
     Enabled: 'ENABLED',

package/dist/esm/{cart-db61eb95.js → cart-a921e0b7.js}

@@ -1,8 +1,8 @@
-import { z as zonosStore, c as createStore } from './zonosStore-d10a829f.js';
-import { s as storageStore, l as localizationStore, t as translate, f as filterValidTests, b as storageStoreSetEnabledVariantTestKeys } from './localization-bf7224aa.js';
+import { z as zonosStore, c as createStore } from './zonosStore-1e015fa5.js';
+import { s as storageStore, l as localizationStore, t as translate, f as filterValidTests, b as storageStoreSetEnabledVariantTestKeys } from './localization-a2b8f9ed.js';
 import { l as log, f as fallbackApiList, h as handleFetch, g as getIsTestMode, a as getIsStagingMode, s as sendErrorLog, d as allLogs, b as logError, j as jsonParse } from './handleFetch-621e45bc.js';
-import { i as isDarkColor } from './isDarkColor-31dd7dff.js';
-import { g as getBorderRadius } from './getBorderRadius-78b28b4d.js';
+import { i as isDarkColor } from './isDarkColor-d8bb8659.js';
+import { g as getBorderRadius } from './getBorderRadius-b18c924f.js';
 
 /**
  * Extract value from translated object
@@ -1266,7 +1266,8 @@ const stripeStoreInitCheckoutSession = async () => {
     if (errors.length || !json) {
         const messages = (_a = errors.find(error => error.message)) === null || _a === void 0 ? void 0 : _a.message;
         // check if the error is related to expired cart and thow error so we can show error message accordingly
-        if (messages.some(message => message.message === 'Cart is expired.')) {
+        if (Array.isArray(messages) &&
+            messages.some(message => message.message === 'Cart is expired.')) {
             throw new Error('Cart is expired.');
         }
         logError('Error occurred when creating checkout session', JSON.stringify(errors, null, 2));
@@ -1915,4 +1916,4 @@ const cartStoreResetTabItems = () => {
     cartStoreResetSelectedShippingOption();
 };
 
-export { cartStoreHasOneEligibleItem as A, stripeStoreApplyPromoCode as B, stripeStoreRemovePromoCode as C, stripeStoreResetPromoCode as D, stripeStoreMessageBasedOnStatus as E, stripeStoreTranslateAddressToLatin as F, cartStoreUpdateSelectedShippingOption as G, cartStoreGetShippingTransitInfo as H, sortServiceLevelOptionsByAmount as I, cartStoreGetMethod as J, stripeStoreCleanupDomesticShippingSession as a, stripeStoreSaveDomesticShippingSession as b, stripeStoreRetrievePayment as c, stripeStore as d, cartStore as e, cartStoreUpdateItems as f, cartStoreReset as g, cartStoreResetTabItems as h, initStripeElements as i, cartStoreClearCheckoutInterval as j, stripeStoreInitCheckoutSession as k, stripeStoreGetPaymentIntent as l, cartStoreStartCheckoutInterval as m, getCheckoutSessionBody as n, cartStoreUpdateToErrorState as o, cartStoreSetCheckoutSession as p, stripeStorePrefetchLandedCost as q, cartStoreNextStep as r, stripeStoreGetDomesticShippingSession as s, trackConversionEvent as t, stripeStoreUpdateCheckoutSessionBaseCurrency as u, stripeStoreHandleInventoryCheck as v, stripeStoreConfirmPayment as w, stripeStoreHandleInventoryRefund as x, stripeStoreReset as y, validateCheckoutSession as z };
+export { cartStoreHasOneEligibleItem as A, stripeStoreApplyPromoCode as B, stripeStoreRemovePromoCode as C, stripeStoreResetPromoCode as D, stripeStoreMessageBasedOnStatus as E, stripeStoreTranslateAddressToLatin as F, cartStoreUpdateSelectedShippingOption as G, cartStoreGetShippingTransitInfo as H, sortServiceLevelOptionsByAmount as I, cartStoreGetMethod as J, stripeStoreCleanupDomesticShippingSession as a, stripeStoreSaveDomesticShippingSession as b, stripeStore as c, stripeStoreRetrievePayment as d, cartStore as e, cartStoreUpdateItems as f, cartStoreReset as g, cartStoreResetTabItems as h, initStripeElements as i, cartStoreClearCheckoutInterval as j, stripeStoreInitCheckoutSession as k, stripeStoreGetPaymentIntent as l, cartStoreStartCheckoutInterval as m, getCheckoutSessionBody as n, cartStoreUpdateToErrorState as o, cartStoreSetCheckoutSession as p, stripeStorePrefetchLandedCost as q, cartStoreNextStep as r, stripeStoreGetDomesticShippingSession as s, trackConversionEvent as t, stripeStoreUpdateCheckoutSessionBaseCurrency as u, stripeStoreHandleInventoryCheck as v, stripeStoreConfirmPayment as w, stripeStoreHandleInventoryRefund as x, stripeStoreReset as y, validateCheckoutSession as z };

package/dist/esm/{debounce-3a9f27a0.js → debounce-eaee3a94.js}

@@ -1,4 +1,4 @@
-import { _ as _root, e as _baseGetTag, i as isObjectLike_1, f as isObject_1 } from './zonosStore-d10a829f.js';
+import { _ as _root, e as _baseGetTag, i as isObjectLike_1, f as isObject_1 } from './zonosStore-1e015fa5.js';
 
 var root = _root;
 

package/dist/esm/{getBorderRadius-78b28b4d.js → getBorderRadius-b18c924f.js}

@@ -1,4 +1,4 @@
-import { z as zonosStore } from './zonosStore-d10a829f.js';
+import { z as zonosStore } from './zonosStore-1e015fa5.js';
 
 /**
  * Get the border radius for the elements based on the style