@zonos/elements 1.3.184 → 1.3.185

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

@@ -0,0 +1,978 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { h, Host, } from "@stencil/core";
+import throttle from "lodash/throttle";
+import { cartStore } from "../../store/checkout/cart";
+import { stripeStore } from "../../store/checkout/stripe";
+import { localizationStore } from "../../store/hello/localization";
+import { translate } from "../../store/translationStore";
+import { zonosStore } from "../../store/zonosStore";
+import { trackConversionEvent } from "../../utils/api/trackConversionEvent";
+import { isValidZip } from "../../utils/checkout/form/isValidZip";
+import { isCheckoutMobile } from "../../utils/checkout/isCheckoutMobile";
+import { classes } from "../../utils/classes";
+import { log } from "../../utils/logging/log";
+import { mergeAddress } from "../../utils/mergeAddress";
+/**
+ * This component is a wrapper for the stripe address element that would render default style object
+ */
+export class ZonosAddress {
+    constructor() {
+        /**
+         * Whether the suggestion is clicked
+         */
+        this.suggestionClicked = false;
+        /**
+         * Check if the tracking event is sent
+         */
+        this.trackingSent = false;
+        /**
+         * Google autocomplete overlay is conflict with our button, this is to adjust z index of the autocomplete
+         */
+        this.isAutoCompleteAdjusted = false;
+        // Create a single throttled instance that persists
+        this.throttledGetAddressSuggestions = throttle(() => {
+            if (zonosStore.checkoutAddressService) {
+                zonosStore.checkoutAddressService.getAddressSuggestions({
+                    country: this.country,
+                    query: [this.line1, this.state, this.postalCode]
+                        .filter(Boolean)
+                        .join(', '),
+                    type: this.type,
+                });
+            }
+        }, 1000);
+        // Map the custom address form to stripe address event data
+        this.setCustomAddressFormToStripeAddressEventData = () => {
+            // If the field is not shown, set it to an empty string
+            const cityValue = !this.countryField || this.countryField.cityShow ? this.city : '';
+            const stateValue = !this.countryField || this.countryField.stateShow ? this.state : '';
+            const postalCodeValue = !this.countryField || this.countryField.zipShow ? this.postalCode : '';
+            const transformedAddress = {
+                complete: this.getIsComplete(),
+                elementMode: this.type,
+                elementType: 'address',
+                empty: !this.getIsComplete(),
+                isNewAddress: true,
+                value: {
+                    address: {
+                        city: cityValue,
+                        country: this.country,
+                        line1: this.line1,
+                        line2: this.line2,
+                        postal_code: postalCodeValue,
+                        state: stateValue,
+                    },
+                    firstName: this.firstName,
+                    lastName: this.lastName,
+                    name: `${this.firstName} ${this.lastName}`,
+                    phone: this.phone,
+                },
+            };
+            this.updateAddressEventData({
+                event: transformedAddress,
+                type: this.type,
+            });
+            this.addressChange.emit({
+                errors: this.getCustomAddressErrors(),
+                type: this.type,
+                value: transformedAddress,
+            });
+        };
+        this.getCustomAddressErrors = () => {
+            return this.type === 'shipping'
+                ? stripeStore.customAddressErrors
+                : stripeStore.customBillingAddressErrors;
+        };
+        this.validate = ({ phoneValidateInfo, type, value, valueType, }) => {
+            var _a, _b, _c;
+            const customErrors = Object.assign({}, this.getCustomAddressErrors());
+            switch (valueType) {
+                case 'city': {
+                    const isValid = ((_a = this.countryField) === null || _a === void 0 ? void 0 : _a.cityRequired) && !!(value === null || value === void 0 ? void 0 : value.trim());
+                    customErrors.city = '';
+                    if (!isValid) {
+                        customErrors.city = translate('The field is incomplete');
+                    }
+                    break;
+                }
+                case 'state': {
+                    const isValid = ((_b = this.countryField) === null || _b === void 0 ? void 0 : _b.stateRequired) && !!(value === null || value === void 0 ? void 0 : value.trim());
+                    customErrors.state = '';
+                    if (!isValid) {
+                        customErrors.state = translate('The field is incomplete');
+                    }
+                    break;
+                }
+                case 'postalCode': {
+                    const isValid = isValidZip({
+                        countryFields: this.countryField,
+                        zip: value || '',
+                    });
+                    customErrors.postalCode = '';
+                    if (!isValid) {
+                        customErrors.postalCode = translate('Your [zipLabel] is invalid', {
+                            zipLabel: ((_c = this.countryField) === null || _c === void 0 ? void 0 : _c.zipLabel) || 'ZIP',
+                        });
+                    }
+                    break;
+                }
+                case 'firstName': {
+                    const isValid = !!(value === null || value === void 0 ? void 0 : value.trim());
+                    customErrors.firstName = '';
+                    if (!isValid) {
+                        customErrors.firstName = translate('Please provide your first name.');
+                    }
+                    break;
+                }
+                case 'lastName': {
+                    const isValid = !!(value === null || value === void 0 ? void 0 : value.trim());
+                    customErrors.lastName = '';
+                    if (!isValid) {
+                        customErrors.lastName = translate('Please provide your last name.');
+                    }
+                    break;
+                }
+                case 'line1': {
+                    const isValid = !!(value === null || value === void 0 ? void 0 : value.trim());
+                    customErrors.line1 = '';
+                    if (!isValid) {
+                        customErrors.line1 = translate('The field is incomplete');
+                    }
+                    break;
+                }
+                case 'phone': {
+                    // If the phone validate info is not provided, we need to validate the phone number
+                    if (!phoneValidateInfo) {
+                        const isValid = !!(value === null || value === void 0 ? void 0 : value.trim());
+                        customErrors.phone = '';
+                        if (!isValid) {
+                            customErrors.phone = translate('Please provide a mobile phone number.');
+                        }
+                    }
+                    else {
+                        customErrors.phone = '';
+                        // If the phone number is empty, set the error message
+                        if (phoneValidateInfo.isEmpty) {
+                            customErrors.phone = translate('Please provide a mobile phone number.');
+                        }
+                        else if (phoneValidateInfo.wrongFormat) {
+                            customErrors.phone = translate('Your mobile phone number is incomplete.');
+                        }
+                    }
+                    break;
+                }
+            }
+            if (type === 'shipping') {
+                stripeStore.customAddressErrors = customErrors;
+            }
+            else {
+                stripeStore.customBillingAddressErrors = customErrors;
+            }
+        };
+        this.type = undefined;
+        this.titleText = undefined;
+        this.defaultAddress = [];
+        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 = cartStore.checkoutSessionId;
+    }
+    getStripeAddressInstance() {
+        if (this.type === 'billing') {
+            return {
+                stripeAddressElement: stripeStore.stripeBillingAddressElement,
+                stripeAddressEventData: stripeStore.stripeBillingAddressEventData,
+                stripeElements: stripeStore.stripeElementsForBillingAddress,
+            };
+        }
+        return {
+            stripeAddressElement: stripeStore.stripeAddressElement,
+            stripeAddressEventData: stripeStore.stripeAddressEventData,
+            stripeElements: stripeStore.stripeElements,
+        };
+    }
+    updateAddressEventData({ event, type, }) {
+        switch (type) {
+            case 'billing':
+                stripeStore.stripeBillingAddressEventData = event;
+                break;
+            default: {
+                stripeStore.stripeAddressEventData = event;
+                break;
+            }
+        }
+    }
+    isAddressFilledChanged() {
+        // Sometimes address elements is loaded with prefilled data before checkout is loaded, need to not send the event if checkout session id is not available, and send the event after checkout is loaded
+        if (!cartStore.checkoutSessionId) {
+            return;
+        }
+        // Only need to track the event if the shipping address is filled
+        if (this.isAddressFilled &&
+            !this.trackingSent &&
+            this.type === 'shipping') {
+            this.trackingSent = true;
+            const checkoutSessionId = cartStore.checkoutSessionId;
+            void trackConversionEvent({
+                checkoutSessionId,
+                eventName: 'checkout_customerInfoFilled',
+            });
+        }
+    }
+    defaultAddressChanged(newAddress, oldAddress) {
+        // 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,
+        });
+        // Reset stripe address event data
+        if (this.type === 'shipping') {
+            stripeStore.stripeAddressEventData = null;
+        }
+        else {
+            stripeStore.stripeBillingAddressEventData = null;
+        }
+        this.initDefaultCustomAddressForm();
+    }
+    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) {
+            return false;
+        }
+        // has any errors from any of the fields
+        const hasErrors = line1 || postalCode || state || city || firstName || lastName || phone;
+        return !hasErrors;
+    }
+    renderCompanyNameInput() {
+        var _a;
+        // No need to render company name for billing address
+        if (this.type === 'billing') {
+            return null;
+        }
+        // No need to render company name if it's not enabled
+        if (!((_a = zonosStore.genericSettings) === null || _a === void 0 ? void 0 : _a.companyNameInputEnabled)) {
+            // Clear the company name when it's not enabled
+            stripeStore.companyName = '';
+            return null;
+        }
+        return (h("zonos-stripe-input", { class: "zonos--company-name-input", inputLabel: translate('Company name (optional)'), inputValue: stripeStore.companyName, onInputChange: (event) => {
+                stripeStore.companyName = event.detail;
+            } }));
+    }
+    initCountryField(countryCode) {
+        var _a, _b, _c;
+        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;
+    }
+    initDefaultCustomAddressForm() {
+        log('initDefaultCustomAddressForm', 'info', this.type);
+        const stripeAddressEventData = this.getStripeAddressInstance().stripeAddressEventData;
+        // Use data from Stripe address element if it's available (This may happen when user has already at shipping selection page but go back to customer page)
+        if (stripeAddressEventData) {
+            const countryCode = stripeAddressEventData.value.address.country ||
+                localizationStore.selectedCountryCode ||
+                'US';
+            this.setFormValues({
+                city: stripeAddressEventData.value.address.city,
+                country: countryCode,
+                firstName: stripeAddressEventData.value.firstName || '',
+                lastName: stripeAddressEventData.value.lastName || '',
+                line1: stripeAddressEventData.value.address.line1,
+                line2: stripeAddressEventData.value.address.line2 || '',
+                phone: stripeAddressEventData.value.phone || '',
+                postal_code: stripeAddressEventData.value.address.postal_code,
+                state: stripeAddressEventData.value.address.state,
+            });
+            this.initCountryField(countryCode);
+            return;
+        }
+        // Use data from default address if it's available
+        const firstDefaultAddress = this.defaultAddress[0];
+        if (firstDefaultAddress) {
+            const countryCode = firstDefaultAddress.address.country ||
+                localizationStore.selectedCountryCode ||
+                'US';
+            this.setFormValues({
+                city: firstDefaultAddress.address.city,
+                country: countryCode,
+                firstName: firstDefaultAddress.name.split(' ')[0] || '',
+                lastName: firstDefaultAddress.name.split(' ')[1] || '',
+                line1: firstDefaultAddress.address.line1,
+                line2: firstDefaultAddress.address.line2 || '',
+                phone: firstDefaultAddress.phone || '',
+                postal_code: firstDefaultAddress.address.postal_code,
+                state: firstDefaultAddress.address.state,
+            });
+            this.initCountryField(countryCode);
+            return;
+        }
+        const countryCode = localizationStore.selectedCountryCode || 'US';
+        // Set default values
+        this.setFormValues({
+            city: '',
+            country: countryCode,
+            firstName: '',
+            lastName: '',
+            line1: '',
+            line2: '',
+            phone: '',
+            postal_code: '',
+            state: '',
+        });
+        this.initCountryField(countryCode);
+        // Set the first initialization to false when the address element is initialized
+        this.isFirstInitialization = false;
+    }
+    line1Changed() {
+        const stripeAddressEventData = this.getStripeAddressInstance().stripeAddressEventData;
+        const isAddressChanged = !stripeAddressEventData ||
+            this.line1 !== (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.line1);
+        // Start requesting google place suggestions when address line 1 is more than 3 characters
+        if (isAddressChanged && this.line1.length > 3) {
+            // Turn on the suggestion when the address line 1 is changed
+            this.startGooglePlaceSuggestions = true;
+            this.isAddressLine1Entered = true;
+            // Turn off the suggestion when the address suggestion is clicked, but next time the address line 1 is changed, the suggestion will be turned on again
+            if (this.suggestionClicked) {
+                this.suggestionClicked = false;
+                this.startGooglePlaceSuggestions = false;
+            }
+            if (!this.isDirtyAddress) {
+                this.isDirtyAddress = true;
+                // stripe element started with just address line 1, so scroll bar is not yet available. Wait for a moment before scrolling
+                setTimeout(() => {
+                    if (!this.isAutoCompleteAdjusted) {
+                        if (isCheckoutMobile()) {
+                            this.el.scrollIntoView({ behavior: 'smooth', block: 'end' });
+                        }
+                        else {
+                            // scroll into the end of the page so the address placeholder won't be hidden
+                            const yOffset = this.type === 'shipping' ? 100 : 600;
+                            const parentWrapper = this.el.closest('.zonos--group');
+                            const y = this.el.getBoundingClientRect().top + yOffset;
+                            parentWrapper === null || parentWrapper === void 0 ? void 0 : parentWrapper.scrollTo({ behavior: 'smooth', top: y });
+                        }
+                    }
+                }, 600);
+            }
+        }
+        this.setCustomAddressFormToStripeAddressEventData();
+        // Start requesting google place suggestions when address line 1 is more than 3 characters (No need to request suggestions on first initialization if address is pre-filled)
+        if (this.startGooglePlaceSuggestions &&
+            zonosStore.checkoutAddressService &&
+            !this.isFirstInitialization) {
+            this.throttledGetAddressSuggestions();
+        }
+    }
+    formFieldsChanged() {
+        this.setCustomAddressFormToStripeAddressEventData();
+    }
+    addressSuggestionSelected({ placeDetails, }) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        // Set the trigger to true when the address suggestion is selected so we won't trigger the suggestion again
+        this.suggestionClicked = true;
+        this.startGooglePlaceSuggestions = false;
+        const addressInfo = placeDetails.addressComponents;
+        const addressLine1 = mergeAddress({
+            addresses: [
+                (_a = addressInfo === null || addressInfo === void 0 ? void 0 : addressInfo.find(address => address.types.includes('street_number'))) === null || _a === void 0 ? void 0 : _a.longText,
+                (_b = addressInfo === null || addressInfo === void 0 ? void 0 : addressInfo.find(address => address.types.includes('route'))) === null || _b === void 0 ? void 0 : _b.longText,
+            ],
+        });
+        const subtituteAddressLine1 = mergeAddress({
+            addresses: [
+                (_c = addressInfo === null || addressInfo === void 0 ? void 0 : addressInfo.find(address => address.types.includes('premise'))) === null || _c === void 0 ? void 0 : _c.longText,
+                ((_d = addressInfo === null || addressInfo === void 0 ? void 0 : addressInfo.find(address => address.types.includes('sublocality_level_2'))) === null || _d === void 0 ? void 0 : _d.longText) ||
+                    ((_e = addressInfo === null || addressInfo === void 0 ? void 0 : addressInfo.find(address => address.types.includes('sublocality_level_3'))) === null || _e === void 0 ? void 0 : _e.longText) ||
+                    ((_f = addressInfo === null || addressInfo === void 0 ? void 0 : addressInfo.find(address => address.types.includes('sublocality_level_4'))) === null || _f === void 0 ? void 0 : _f.longText) ||
+                    ((_g = addressInfo === null || addressInfo === void 0 ? void 0 : addressInfo.find(address => address.types.includes('sublocality_level_5'))) === null || _g === void 0 ? void 0 : _g.longText),
+            ],
+        });
+        const addressLine2 = mergeAddress({
+            addresses: [
+                (_h = addressInfo === null || addressInfo === void 0 ? void 0 : addressInfo.find(address => address.types.includes('subpremise'))) === null || _h === void 0 ? void 0 : _h.longText,
+                (_j = addressInfo === null || addressInfo === void 0 ? void 0 : addressInfo.find(address => address.types.includes('neighborhood'))) === null || _j === void 0 ? void 0 : _j.longText,
+            ],
+            delimiter: ', ',
+        });
+        const city = mergeAddress({
+            addresses: [
+                ((_k = addressInfo === null || addressInfo === void 0 ? void 0 : addressInfo.find(address => address.types.includes('locality'))) === null || _k === void 0 ? void 0 : _k.longText) ||
+                    ((_l = addressInfo === null || addressInfo === void 0 ? void 0 : addressInfo.find(address => address.types.includes('sublocality_level_1'))) === null || _l === void 0 ? void 0 : _l.longText) ||
+                    ((_m = addressInfo === null || addressInfo === void 0 ? void 0 : addressInfo.find(address => address.types.includes('administrative_area_level_1'))) === null || _m === void 0 ? void 0 : _m.longText),
+            ],
+        });
+        const state = mergeAddress({
+            addresses: [
+                (_o = addressInfo === null || addressInfo === void 0 ? void 0 : addressInfo.find(address => address.types.includes('administrative_area_level_1'))) === null || _o === void 0 ? void 0 : _o.shortText,
+            ],
+        });
+        const postalCode = mergeAddress({
+            addresses: [
+                (_p = addressInfo === null || addressInfo === void 0 ? void 0 : addressInfo.find(address => address.types.includes('postal_code'))) === null || _p === void 0 ? void 0 : _p.longText,
+            ],
+        });
+        const country = mergeAddress({
+            addresses: [
+                (_q = addressInfo === null || addressInfo === void 0 ? void 0 : addressInfo.find(address => address.types.includes('country'))) === null || _q === void 0 ? void 0 : _q.shortText,
+            ],
+        });
+        this.setFormValues({
+            city: city,
+            country: country,
+            line1: addressLine1 || subtituteAddressLine1,
+            line2: addressLine2,
+            postal_code: postalCode,
+            state: state,
+        });
+    }
+    setFormValues(values) {
+        if (values.city !== undefined)
+            this.city = values.city;
+        if (values.country !== undefined)
+            this.country = values.country;
+        if (values.firstName !== undefined)
+            this.firstName = values.firstName;
+        if (values.lastName !== undefined)
+            this.lastName = values.lastName;
+        if (values.line1 !== undefined)
+            this.line1 = values.line1;
+        if (values.line2 !== undefined)
+            this.line2 = values.line2;
+        if (values.phone !== undefined)
+            this.phone = values.phone;
+        if (values.postal_code !== undefined)
+            this.postalCode = values.postal_code;
+        if (values.state !== undefined)
+            this.state = values.state;
+    }
+    /**
+     * Initialize the address suggestions
+     */
+    initAddressSuggestions() {
+        // Only initialize the address suggestions if the address service is not already initialized
+        if (!zonosStore.checkoutAddressService ||
+            (!!this.onAddressSuggestionsUnsubscribe &&
+                !!this.onAddressSelectedUnsubscribe)) {
+            return;
+        }
+        log('on initAddressSuggestions', 'info');
+        this.onAddressSuggestionsUnsubscribe =
+            zonosStore.checkoutAddressService.onAddressSuggestions(({ suggestions, type }) => {
+                // Only update the address suggestions if the type matches the current type
+                if (type !== this.type) {
+                    return;
+                }
+                this.addressSuggestions = suggestions;
+            });
+        this.onAddressSelectedUnsubscribe =
+            zonosStore.checkoutAddressService.onAddressSelected(data => {
+                if (data.type !== this.type) {
+                    return;
+                }
+                this.addressSuggestions = [];
+                this.addressSuggestionSelected(data);
+            });
+        this.validate({
+            type: this.type,
+            value: this.firstName,
+            valueType: 'firstName',
+        });
+        this.validate({
+            type: this.type,
+            value: this.lastName,
+            valueType: 'lastName',
+        });
+        this.validate({
+            type: this.type,
+            value: this.line1,
+            valueType: 'line1',
+        });
+        this.validate({
+            type: this.type,
+            value: this.phone,
+            valueType: 'phone',
+        });
+        this.validate({
+            type: this.type,
+            value: this.postalCode,
+            valueType: 'postalCode',
+        });
+        this.validate({
+            type: this.type,
+            value: this.state,
+            valueType: 'state',
+        });
+        this.validate({
+            type: this.type,
+            value: this.city,
+            valueType: 'city',
+        });
+        this.validate({
+            type: this.type,
+            value: this.phone,
+            valueType: 'phone',
+        });
+    }
+    shouldEnabledCustomAddressChanged() {
+        // Only initialize the address suggestions if the address service is not already initialized
+        this.initAddressSuggestions();
+        this.initDefaultCustomAddressForm();
+    }
+    shippingZonesChanged() {
+        this.shippingZones = localizationStore.shippingZoneCountries;
+        this.shipToCountries = Object.values(this.shippingZones || {})
+            .map(country => ({
+            label: country.displayName,
+            value: country.code,
+        }))
+            .sort((a, b) => {
+            return a.label.localeCompare(b.label);
+        });
+    }
+    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"]);
+        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) || {})
+            .map(([label, region]) => ({
+            label,
+            value: region.interpayCode,
+        }))
+            .sort((a, b) => a.label.localeCompare(b.label));
+        return (h("div", { "aria-label": `${this.type} address form`, class: "zonos--custom-address-form", role: "form" }, h("zonos-stripe-input", { "aria-required": "true", class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.firstName : undefined, inputLabel: translate('First name'), inputValue: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.firstName, onInputChange: (event) => {
+                this.validate({
+                    type: this.type,
+                    value: event.detail,
+                    valueType: 'firstName',
+                });
+                /**
+                 * 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.firstName = event.detail;
+            }, required: true }), h("zonos-stripe-input", { "aria-required": "true", class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.lastName : undefined, inputLabel: translate('Last name'), inputValue: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.lastName, onInputChange: (event) => {
+                this.validate({
+                    type: this.type,
+                    value: event.detail,
+                    valueType: 'lastName',
+                });
+                /**
+                 * 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.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.country = event.detail;
+                this.city = '';
+                this.state = '';
+                this.postalCode = '';
+            }, options: this.shipToCountries || [], required: true, selectLabel: translate('Country'), selectedValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.country) ||
+                localizationStore.selectedCountryCode ||
+                (firstCountry === null || firstCountry === void 0 ? void 0 : firstCountry.value), title: `${this.type} country` }), h("div", { class: "zonos--custom-address-form-line1-wrapper" }, h("zonos-stripe-input", { "aria-autocomplete": "list", "aria-controls": "autocomplete-search", "aria-required": "true", autoComplete: "shipping address-line1", class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.line1 : undefined, inputLabel: translate('Address line 1'), inputValue: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.line1, name: "address-line1", onInputChange: (event) => {
+                this.validate({
+                    type: this.type,
+                    value: event.detail,
+                    valueType: 'line1',
+                });
+                /**
+                 * 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.line1 = event.detail;
+            }, onKeyDown: event => {
+                // Clear the address suggestions when the user presses the escape key
+                if (event.key === 'Escape') {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this.addressSuggestions = [];
+                }
+            }, required: true }), h("zonos-address-suggestions", { onSuggestionSelected: e => {
+                var _a;
+                const { placeId } = e.detail;
+                (_a = zonosStore.checkoutAddressService) === null || _a === void 0 ? void 0 : _a.selectAddress({
+                    placeId,
+                    type: this.type,
+                });
+            }, suggestions: this.addressSuggestions, type: this.type })), h("div", { "aria-label": "Additional address details", class: classes([
+                'zonos--custom-address-form-additional-fields',
+                countryCode && this.isAddressLine1Entered ? '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) => {
+                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) => {
+                this.validate({
+                    type: this.type,
+                    value: event.detail,
+                    valueType: 'city',
+                });
+                /**
+                 * 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.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) => {
+                this.validate({
+                    type: this.type,
+                    value: event.detail,
+                    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.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)
+                ? `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) => {
+                this.validate({
+                    type: this.type,
+                    value: event.detail,
+                    valueType: 'postalCode',
+                });
+                /**
+                 * 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.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 => {
+                const { isEmpty, phoneNumber, valid, wrongFormat } = event.detail;
+                // Validate the phone number
+                this.validate({
+                    phoneValidateInfo: {
+                        isEmpty,
+                        isValid: valid,
+                        wrongFormat,
+                    },
+                    type: this.type,
+                    value: phoneNumber,
+                    valueType: 'phone',
+                });
+                /**
+                 * 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.phone = phoneNumber;
+            } }))));
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        // destroy the stripe element when this component is removed from the DOM, so that we can re-create the new one with previous value
+        const stripeElement = this.getStripeAddressInstance().stripeAddressElement;
+        stripeElement === null || stripeElement === void 0 ? void 0 : stripeElement.destroy();
+        // unsubscribe from address suggestions when this component is removed from the DOM
+        (_a = this.onAddressSuggestionsUnsubscribe) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.onAddressSelectedUnsubscribe) === null || _b === void 0 ? void 0 : _b.call(this);
+    }
+    componentWillLoad() {
+        if (zonosStore.checkoutAddressService) {
+            this.initDefaultCustomAddressForm();
+        }
+    }
+    componentDidLoad() {
+        const stripeAddressEventData = this.getStripeAddressInstance().stripeAddressEventData;
+        this.shipToCountries = Object.values(localizationStore.shippingZoneCountries || {})
+            .map(country => ({
+            label: country.displayName,
+            value: country.code,
+        }))
+            .sort((a, b) => {
+            return a.label.localeCompare(b.label);
+        });
+        this.isDirtyAddress =
+            !!stripeAddressEventData &&
+                stripeAddressEventData.value.address.line1.length > 0;
+        // @Watch doesn't get trigger on initial load
+        this.initAddressSuggestions();
+        this.isFirstInitialization = false;
+    }
+    render() {
+        var _a;
+        this.shippingZones = localizationStore.shippingZoneCountries;
+        this.addressService = zonosStore.checkoutAddressService;
+        this.checkoutSessionId = cartStore.checkoutSessionId;
+        if ((_a = stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.complete) {
+            this.isAddressFilled = true;
+        }
+        // Only set country if custom address form is enabled
+        if (!this.country && localizationStore.selectedCountryCode) {
+            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: '9460547ea10813bdd211ed19c01ece0a8ec07a41', class: classes([
+                'zonos--address zonos--elements',
+                `zonos--${this.type}-address`,
+            ]) }, h("zonos-text", { key: '700b00ddfd9eb1ec55370c9a3d7e69dcb6bc9668', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), this.renderCompanyNameInput(), this.renderCustomAddressForm()));
+    }
+    static get is() { return "zonos-custom-address"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-custom-address.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-custom-address.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'billing' | 'shipping'",
+                    "resolved": "\"billing\" | \"shipping\"",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The type of address element to render"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "type",
+                "reflect": false
+            },
+            "titleText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The title text for the address element"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "title-text",
+                "reflect": false
+            },
+            "defaultAddress": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ContactOption[]",
+                    "resolved": "ContactOption[]",
+                    "references": {
+                        "ContactOption": {
+                            "location": "import",
+                            "path": "@stripe/stripe-js",
+                            "id": "node_modules::ContactOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Default address for stripe"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "stripe": {},
+            "isDirtyAddress": {},
+            "isAddressFilled": {},
+            "isAddressLine1Entered": {},
+            "addressSuggestions": {},
+            "countryField": {},
+            "startGooglePlaceSuggestions": {},
+            "shipToCountries": {},
+            "shippingZones": {},
+            "city": {},
+            "country": {},
+            "firstName": {},
+            "lastName": {},
+            "line1": {},
+            "line2": {},
+            "phone": {},
+            "postalCode": {},
+            "state": {},
+            "cityError": {},
+            "stateError": {},
+            "postalCodeError": {},
+            "phoneError": {},
+            "firstNameError": {},
+            "lastNameError": {},
+            "isFirstInitialization": {},
+            "addressService": {},
+            "checkoutSessionId": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "invalidCharacters",
+                "name": "invalidCharacters",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event to emit when address is not containing allowed character sets"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "addressChange",
+                "name": "addressChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event to emit when address is changed"
+                },
+                "complexType": {
+                    "original": "{\n    errors: CustomAddressErrors;\n    type: 'billing' | 'shipping';\n    value: StripeAddressElementChangeEvent;\n  }",
+                    "resolved": "{ errors: CustomAddressErrors; type: \"billing\" | \"shipping\"; value: StripeAddressElementChangeEvent; }",
+                    "references": {
+                        "CustomAddressErrors": {
+                            "location": "import",
+                            "path": "src/types/checkout/form/CustomAddressErrors",
+                            "id": "src/types/checkout/form/CustomAddressErrors.ts::CustomAddressErrors"
+                        },
+                        "StripeAddressElementChangeEvent": {
+                            "location": "import",
+                            "path": "@stripe/stripe-js",
+                            "id": "node_modules::StripeAddressElementChangeEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "checkoutSessionId",
+                "methodName": "isAddressFilledChanged"
+            }, {
+                "propName": "isAddressFilled",
+                "methodName": "isAddressFilledChanged"
+            }, {
+                "propName": "defaultAddress",
+                "methodName": "defaultAddressChanged"
+            }, {
+                "propName": "line1",
+                "methodName": "line1Changed"
+            }, {
+                "propName": "city",
+                "methodName": "formFieldsChanged"
+            }, {
+                "propName": "country",
+                "methodName": "formFieldsChanged"
+            }, {
+                "propName": "firstName",
+                "methodName": "formFieldsChanged"
+            }, {
+                "propName": "lastName",
+                "methodName": "formFieldsChanged"
+            }, {
+                "propName": "line2",
+                "methodName": "formFieldsChanged"
+            }, {
+                "propName": "phone",
+                "methodName": "formFieldsChanged"
+            }, {
+                "propName": "postalCode",
+                "methodName": "formFieldsChanged"
+            }, {
+                "propName": "state",
+                "methodName": "formFieldsChanged"
+            }, {
+                "propName": "addressService",
+                "methodName": "shouldEnabledCustomAddressChanged"
+            }, {
+                "propName": "shippingZones",
+                "methodName": "shippingZonesChanged"
+            }];
+    }
+}