@zonos/elements 1.3.233 → 1.3.235

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

@@ -0,0 +1,708 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-0bbe9693.js';
+import { t as throttle_1 } from './throttle-ce2432ab.js';
+import { c as stripeStore, t as trackConversionEvent, K as extractName, B as stripeStoreOnChange, q as stripeStorePrefetchLandedCost, e as cartStore } from './cart-66aecbb3.js';
+import { s as storageStore, r as getFallbackDefaultCountryCode, t as translate, q as storageStoreOnChange, l as localizationStore } from './localization-04b05867.js';
+import { z as zonosStore, g as getZonosStoreTheme, f as zonosStoreFontFamily } from './zonosStore-b434e436.js';
+import { l as logError, i as isCheckoutMobile, s as sendErrorLog } from './handleFetch-a844cac1.js';
+import { s as shouldRenderTaxIdInput } from './shouldRenderTaxIdInput-d45ceeb4.js';
+import { c as classes } from './classes-0d95c529.js';
+import { l as log } from './VarianceTest-572cecf5.js';
+import { c as countryRequireTaxId, s as shipToTaxIdLabels } from './TaxId-50d72254.js';
+import { g as getBorderRadius } from './getBorderRadius-877f6389.js';
+import './debounce-c4785346.js';
+import './isDarkColor-9ddd90cc.js';
+
+const zonosAddressCss = ".sc-zonos-address-h{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-address-h *.sc-zonos-address{font-family:var(--zonos--font-family, Inter), Inter}.sc-zonos-address-h img.sc-zonos-address{max-width:100%}.sc-zonos-address-h dl.sc-zonos-address,.sc-zonos-address-h dd.sc-zonos-address,.sc-zonos-address-h h1.sc-zonos-address,.sc-zonos-address-h h2.sc-zonos-address,.sc-zonos-address-h h3.sc-zonos-address,.sc-zonos-address-h h4.sc-zonos-address,.sc-zonos-address-h h5.sc-zonos-address,.sc-zonos-address-h h6.sc-zonos-address,.sc-zonos-address-h hr.sc-zonos-address,.sc-zonos-address-h figure.sc-zonos-address,.sc-zonos-address-h p.sc-zonos-address,.sc-zonos-address-h pre.sc-zonos-address{margin:0}.sc-zonos-address-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-address-h .zonos--title.sc-zonos-address{margin-bottom:16px}.sc-zonos-address-h .zonos--company-name-input.sc-zonos-address,.sc-zonos-address-h .zonos--tax-id-input.sc-zonos-address{margin-bottom:16px}.sc-zonos-address-h zonos-banner.sc-zonos-address{margin-top:8px}";
+const ZonosAddressStyle0 = zonosAddressCss;
+
+const ZonosAddress = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.invalidCharacters = createEvent(this, "invalidCharacters", 7);
+        this.taxIdChanged = createEvent(this, "taxIdChanged", 7);
+        this.storeUnsubscribeList = [];
+        /**
+         * 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;
+        /**
+         * Track previous country and postal code to detect changes
+         */
+        this.prevCountry = null;
+        this.prevPostalCode = null;
+        /**
+         * Check if the tracking event is sent
+         */
+        this.trackingSent = false;
+        this.prefetchLandedCost = throttle_1(stripeStorePrefetchLandedCost, 1000);
+    }
+    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;
+            }
+        }
+        // Only trigger landed cost prefetch for shipping address
+        if (type === 'shipping') {
+            // if line 1 has something, trigger prefetch
+            if (event.value.address.line1.length) {
+                void this.prefetchLandedCost();
+            }
+        }
+    }
+    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 (!storageStore.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 = storageStore.checkoutSessionId;
+            void trackConversionEvent({
+                checkoutSessionId,
+                eventName: 'checkout_customerInfoFilled',
+            });
+        }
+    }
+    updateAddressElement({ stripeAddressElement, type, }) {
+        if (type === 'shipping') {
+            stripeStore.stripeAddressElement = stripeAddressElement;
+            return;
+        }
+        stripeStore.stripeBillingAddressElement = stripeAddressElement;
+    }
+    async watchInitStripe() {
+        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;
+        }
+        // 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)
+            : [];
+        // Show all countries in checkout if the query param is present
+        const checkoutAllCountries = new URLSearchParams(window.location.search).has('zonosCheckoutAllCountries');
+        const allowedCountries = this.type === 'shipping' ? shippingZone : [];
+        const defaultAddressCountry = (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.country) ||
+            getFallbackDefaultCountryCode(allowedCountries);
+        log(`Stripe country code: ${defaultAddressCountry}`, 'info');
+        const addressElement = stripeElements.create('address', {
+            allowedCountries: checkoutAllCountries ? [] : allowedCountries,
+            // only show the default address if stripeAddressEventData is not provided
+            contacts: defaultAddress.length && !stripeAddressEventData
+                ? this.defaultAddress
+                : [],
+            defaultValues: {
+                address: Object.assign(Object.assign({}, stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address), { country: defaultAddressCountry }),
+                firstName: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.firstName,
+                lastName: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.lastName,
+                phone: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.phone,
+            },
+            display: {
+                name: 'split',
+            },
+            fields: {
+                phone: 'always',
+            },
+            mode: this.type,
+            validation: {
+                phone: {
+                    required: 'always',
+                },
+            },
+        });
+        addressElement.mount(this.el.querySelector('.zonos--address-component'));
+        // Initialize previous values if address data exists
+        if (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address) {
+            this.prevCountry = stripeAddressEventData.value.address.country;
+            this.prevPostalCode = stripeAddressEventData.value.address.postal_code;
+        }
+        addressElement.on('change', event => {
+            const eventValue = event.value;
+            if (!this.isDirtyAddress && eventValue.address.line1.length >= 3) {
+                this.isDirtyAddress = true;
+                if (!this.isAutoCompleteAdjusted) {
+                    const googleAutoComplete = this.el.querySelector('iframe[src*="autocomplete-suggestions"]');
+                    if (googleAutoComplete) {
+                        googleAutoComplete.style.zIndex = '3';
+                    }
+                    this.isAutoCompleteAdjusted = true;
+                }
+                // stripe element started with just address line 1, so scroll bar is not yet available. Wait for a moment before scrolling
+                setTimeout(() => {
+                    // scroll directly into view if it's mobile
+                    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);
+            }
+            const { firstName, lastName } = extractName({
+                firstName: eventValue.firstName,
+                lastName: eventValue.lastName,
+                name: eventValue.name,
+            });
+            this.updateAddressEventData({
+                event: Object.assign(Object.assign({}, event), { elementMode: this.type, elementType: 'address', value: Object.assign(Object.assign({}, eventValue), { firstName,
+                        lastName }) }),
+                type: this.type,
+            });
+        });
+        this.updateAddressElement({
+            stripeAddressElement: addressElement,
+            type: this.type,
+        });
+    }
+    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,
+        });
+        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();
+    }
+    isInTaxIdCountry(countryCode) {
+        return countryRequireTaxId.includes(countryCode);
+    }
+    /**
+     * Render tax id input based on ship to country code
+     */
+    renderTaxIdInput() {
+        var _a;
+        // No need to render tax id input for billing address
+        if (this.type === 'billing') {
+            return null;
+        }
+        const countryCode = (_a = stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.value.address.country;
+        // Don't render tax id input if the country is not provided
+        if (!countryCode) {
+            return null;
+        }
+        // This just to type guard the countryCode, if it's able to get to this point it should already be in country that has tax id input
+        if (!this.isInTaxIdCountry(countryCode)) {
+            return null;
+        }
+        const taxIdInputRendered = shouldRenderTaxIdInput({
+            companyName: stripeStore.companyName,
+            countryCode,
+        });
+        // Don't render tax id input if the country doesn't require tax id
+        if (!taxIdInputRendered) {
+            return null;
+        }
+        const taxIdInputInfo = shipToTaxIdLabels[countryCode];
+        return (h("div", { class: "zonos--tax-id-input" }, h("zonos-stripe-input", { inputLabel: translate(taxIdInputInfo.friendlyName), inputPlaceholder: taxIdInputInfo.placeholder, inputValue: stripeStore.taxId || '', isError: !!this.taxIdErrorMessage, onInputChange: (event) => {
+                stripeStore.taxId = event.detail;
+                this.taxIdChanged.emit(event.detail);
+            } }), this.taxIdErrorMessage && (h("zonos-text", { textColor: 'red-600', type: "caption" }, this.taxIdErrorMessage))));
+    }
+    renderCompanyNameInput() {
+        // No need to render company name for billing address (only allow for Collect and Invoice)
+        if (this.type === 'billing' &&
+            !window.Zonos.isCollect &&
+            !window.Zonos.isInvoice) {
+            return null;
+        }
+        // only render the company input if the setting is enabled or the cart is collect
+        const isCompanyNameEnabled = zonosStore.checkoutSettings.companyFieldsStatus === 'ENABLED' ||
+            !!window.Zonos.isCollect ||
+            !!window.Zonos.isInvoice;
+        // No need to render company name for billing address (only allow for Collect)
+        if (!isCompanyNameEnabled) {
+            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;
+            } }));
+    }
+    disconnectedCallback() {
+        // 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 store subscriptions
+        try {
+            this.storeUnsubscribeList.forEach(subscription => subscription());
+        }
+        catch (_a) { }
+    }
+    componentDidLoad() {
+        const stripeAddressEventData = this.getStripeAddressInstance().stripeAddressEventData;
+        this.isDirtyAddress =
+            !!stripeAddressEventData &&
+                stripeAddressEventData.value.address.line1.length > 0;
+        // @Watch doesn't get trigger on initial load
+        void this.watchInitStripe();
+        this.checkoutSessionId = storageStore.checkoutSessionId;
+        this.storeUnsubscribeList = [
+            storageStoreOnChange('checkoutSessionId', () => {
+                this.checkoutSessionId = storageStore.checkoutSessionId;
+            }),
+            stripeStoreOnChange('stripeElements', () => {
+                if (this.type === 'shipping') {
+                    void this.watchInitStripe();
+                }
+            }),
+            stripeStoreOnChange('stripeElementsForBillingAddress', () => {
+                if (this.type === 'billing') {
+                    void this.watchInitStripe();
+                }
+            }),
+        ];
+    }
+    render() {
+        var _a;
+        this.checkoutSessionId = storageStore.checkoutSessionId;
+        if ((_a = stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.complete) {
+            this.isAddressFilled = true;
+        }
+        // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
+        return (h(Host, { key: '7762b1dbeeff9d45721bf7a2efbe4bf4c2c29551', class: classes([
+                'zonos--address',
+                'zonos--elements',
+                `zonos--${this.type}-address`,
+            ]) }, this.titleText && (h("zonos-text", { key: '5f266b4562eb78eb8f5b1374f195501abc44c9f7', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("slot", { key: 'bfcee78353455a66c6dec12432bfeff69dc9a10b', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), h("div", { key: 'd005a517dc93439d13f38750df8e09f884ad898c', class: "zonos--address-component" })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "checkoutSessionId": ["isAddressFilledChanged"],
+        "isAddressFilled": ["isAddressFilledChanged"],
+        "stripe": ["watchInitStripe"],
+        "defaultAddress": ["defaultAddressChanged"]
+    }; }
+};
+ZonosAddress.style = ZonosAddressStyle0;
+
+const ExclamationMarkDuotoneIcon = `<svg color="var(--zonos-elements-red-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" style="display: block;">
+  <path d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Z" data-is-secondary-color="true" fill="var(--zonos-elements-red-400)"></path>
+  <path d="M12.75 9a.75.75 0 0 0-1.5 0v2.5a.75.75 0 0 0 1.5 0V9Zm0 5.5a.75.75 0 0 0-1.5 0v.5a.75.75 0 0 0 1.5 0v-.5Z" fill="currentColor"></path>
+</svg>`;
+
+const HelpDuotoneIcon = `<svg color="var(--zonos-elements-blue-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" style="display: block;">
+  <path d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Z" data-is-secondary-color="true" fill="var(--zonos-elements-blue-400)"></path>
+  <path d="M10.25 10.25a1.75 1.75 0 1 1 2.431 1.613c-.616.26-1.431.885-1.431 1.887a.75.75 0 0 0 1.5 0c0-.053.02-.128.108-.228.092-.104.236-.205.408-.278A3.25 3.25 0 1 0 8.75 10.25a.75.75 0 0 0 1.5 0Zm2.5 5.75a.75.75 0 0 0-1.5 0v.25a.75.75 0 0 0 1.5 0V16Z" fill="currentColor"></path>
+</svg>`;
+
+const WarningDuotoneIcon = `<svg color="var(--zonos-elements-orange-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" style="display: block;">
+  <path d="M14.46 5.492c-1.014-2.027-3.906-2.027-4.92 0L4.276 16.02c-.914 1.83.416 3.98 2.46 3.98h10.528c2.044 0 3.374-2.151 2.46-3.98L14.46 5.492Z" data-is-secondary-color="true" fill="var(--zonos-elements-orange-400)"></path>
+  <path d="M12.75 10a.75.75 0 0 0-1.5 0v2.5a.75.75 0 0 0 1.5 0V10Zm0 5.5a.75.75 0 0 0-1.5 0v.5a.75.75 0 0 0 1.5 0v-.5Z" fill="currentColor"></path>
+</svg>`;
+
+const zonosConfirmDialogCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .zonos--backdrop,:host .zonos--confirm-layout{opacity:0;z-index:-999;visibility:hidden;-webkit-transition:opacity 0.3s, visibility 0.3s;transition:opacity 0.3s, visibility 0.3s}:host .zonos--backdrop{width:100vw;height:100vh;left:0;top:0;background:var(--zonos-elements-backdrop-color);position:fixed}:host .zonos--confirm-layout{width:100vw;height:100vh;left:0;top:0;position:fixed;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;color:var(--zonos-elements-text-color)}:host .zonos--confirm-dialog{position:relative;background:var(--zonos-elements-gray-0);max-width:90vw;max-height:90vh;width:var(--zonos--dialog-width);border-radius:var(--zonos--border-radius, 10px);outline:none;-webkit-box-shadow:var(--zonos-elements-v3-shadow-xxl);box-shadow:var(--zonos-elements-v3-shadow-xxl);border:var(--zonos-elements-border);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:24px;gap:24px}:host .icon-wrapper{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:40px;width:40px;border-radius:50%;background:var(--zonos-elements-blue-100)}:host .warn .icon-wrapper{background:var(--zonos-elements-orange-100)}:host .danger .icon-wrapper{background:var(--zonos-elements-red-100)}:host .footer{display:-ms-flexbox;display:flex;width:100%;gap:8px}:host .footer zonos-button{-ms-flex:1;flex:1}:host .content{display:-ms-flexbox;display:flex;gap:8px;-ms-flex-direction:column;flex-direction:column}:host .content zonos-text{text-align:center}:host(.open) .zonos--confirm-layout,:host(.open) .zonos--backdrop{visibility:visible}:host(.open) .zonos--backdrop{z-index:2147483009;opacity:0.65}:host(.open) .zonos--confirm-layout{opacity:1;z-index:2147483010;-webkit-transform:scale(1);transform:scale(1)}";
+const ZonosConfirmDialogStyle0 = zonosConfirmDialogCss;
+
+const ZonosConfirmDialog = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.confirmClicked = createEvent(this, "confirmClicked", 7);
+        this.cancelClicked = createEvent(this, "cancelClicked", 7);
+        /**
+         * Dialog title text
+         * @default "Are you sure?"
+         */
+        this.dialogTitle = translate('Are you sure?');
+        /**
+         * Dialog intent (for icon and button color)
+         * @default "info"
+         */
+        this.dialogIntent = 'info';
+        /**
+         * Dialog subtitle text
+         * @default null No subtitle
+         */
+        this.dialogSubtitle = null;
+        /**
+         * Dialog width
+         * @default 350 px
+         */
+        this.dialogWidth = 350;
+        /**
+         * Type of dialog
+         * - "alert" - Only confirm button
+         * - "confirm" - Both Confirm and cancel buttons
+         * @default "confirm"
+         */
+        this.dialogType = 'confirm';
+        /**
+         * Whether or not the dialog is open
+         */
+        this.isMobile = false;
+        /**
+         * Whether or not to close the dialog when clicking outside of it
+         * @default false
+         */
+        this.noClickOutside = false;
+        this.clickOutsideDialogHandler = (event) => {
+            if (event.target === event.currentTarget && !this.noClickOutside) {
+                this.closeDialogHandler();
+            }
+        };
+    }
+    handleKeyDown(ev) {
+        if (ev.key === 'Escape') {
+            this.closeDialogHandler();
+        }
+    }
+    focusDialog() {
+        if (this.dialogOpen) {
+            setTimeout(() => {
+                var _a, _b;
+                // Focus on a non tabable element (tabIndex=-1), so we will be able to tab to other tabable elements
+                (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.zonos--backdrop')) === null || _b === void 0 ? void 0 : _b.focus();
+            }, 100);
+        }
+    }
+    confirmDialogHandler() {
+        // Only do the action if the dialog is open
+        if (!this.dialogOpen) {
+            return;
+        }
+        // Emit confirm event
+        this.confirmClicked.emit();
+    }
+    closeDialogHandler() {
+        // Only do the action if the dialog is open
+        if (!this.dialogOpen) {
+            return;
+        }
+        // Emit cancel event
+        this.cancelClicked.emit();
+    }
+    renderIcon() {
+        switch (this.dialogIntent) {
+            case 'info':
+                return (h("zonos-icon", { content: HelpDuotoneIcon, iconColor: 'blue-800' }));
+            case 'danger':
+                return (h("zonos-icon", { content: ExclamationMarkDuotoneIcon, iconColor: 'red-800' }));
+            case 'warn':
+                return (h("zonos-icon", { content: WarningDuotoneIcon, iconColor: 'orange-800' }));
+        }
+    }
+    getButtonConfirmVariant() {
+        switch (this.dialogIntent) {
+            case 'warn':
+                return 'warning';
+            case 'danger':
+                return 'danger';
+            default:
+                return 'primary';
+        }
+    }
+    render() {
+        this.focusDialog();
+        const borderStyle = getBorderRadius();
+        // Get theme for the update dialog, inherit from the theme, no from this component theme
+        const theme = getZonosStoreTheme(zonosStore.appearance.theme);
+        return (h(Host, { key: 'db0bfe0b8a125e806a97c9382faa938078000349', class: classes([this.dialogOpen && 'open', 'zonos--elements']), "data-dialog-type": this.dialogType, "data-theme": theme, style: {
+                '--zonos--border-radius': borderStyle,
+                '--zonos--dialog-width': `${this.dialogWidth}px`,
+                '--zonos--font-family': zonosStoreFontFamily(),
+            } }, h("div", { key: '1676defad54705df4e9282bda6b5734592d0fb60', class: "zonos--backdrop", tabIndex: -1 }), h("div", { key: '2a6ec6b5df7ea30304cfed5276e55618b40add93', class: classes(['zonos--confirm-layout', this.dialogIntent]), onClick: e => this.clickOutsideDialogHandler(e) }, h("div", { key: 'd1c8358c3fd98c27a469fe7443d1983c1c134a7c', class: "zonos--confirm-dialog", onBlur: () => {
+                this.focusDialog();
+            } }, h("div", { key: '137e9659aa7aec2e4604acf80809b35bce69ca79', class: "wrapper" }, h("div", { key: '9c1057857ea095e7e88c8950469add2bc4c1318e', class: "icon-wrapper" }, this.renderIcon()), h("div", { key: '48f0e0cd9ce62b425bae831d1387261bbd4162a1', class: "content" }, h("div", { key: '0d3e681f350e5db547181beadf5c6bcf49a8bbd2', class: "title" }, h("zonos-text", { key: 'f16a43d2b3c9504911b1e36ba573873f80093c47', type: "subheader" }, this.dialogTitle)), this.dialogSubtitle && (h("div", { key: 'fd570f98bc736a68c16fedee72b1417dc6906fa6', class: "subtitle" }, h("zonos-text", { key: '6785aa19dd44cf7f6fae7317e3924be6c6ee8af3', textColor: "gray-800" }, this.dialogSubtitle)))), h("div", { key: '4206cad3dcff0055fc5f3ea8e7c217ae33c63263', class: "footer" }, this.dialogType === 'confirm' && (h("zonos-button", { key: '72d1a216641d482bdbeae384963dcdff1cfc3f45', backgroundColor: "gray-0", class: "cancel-button", onClick: () => this.closeDialogHandler(), size: "lg", withBoxShadow: true }, this.dialogCancelBtnText || translate('Cancel'))), h("zonos-button", { key: 'a6a206eff11d1f42c33ef9113cc393d727c60f89', class: "confirm-button", onClick: () => this.confirmDialogHandler(), size: "lg", variant: this.getButtonConfirmVariant() }, this.dialogConfirmBtnText)))))));
+    }
+    static get assetsDirs() { return ["assets"]; }
+    get el() { return getElement(this); }
+};
+ZonosConfirmDialog.style = ZonosConfirmDialogStyle0;
+
+const validateEmailValue = (value) => {
+    const emailRegex = /^[a-zA-Z0-9.%_+-]*@[a-zA-Z0-9][a-zA-Z0-9.-]*\.[a-zA-Z0-9]{2,}$/;
+    return emailRegex.test(value);
+};
+
+const zonosLinkAuthenticationCss = ".sc-zonos-link-authentication-h{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-link-authentication-h *.sc-zonos-link-authentication{font-family:var(--zonos--font-family, Inter), Inter}.sc-zonos-link-authentication-h img.sc-zonos-link-authentication{max-width:100%}.sc-zonos-link-authentication-h dl.sc-zonos-link-authentication,.sc-zonos-link-authentication-h dd.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h1.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h2.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h3.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h4.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h5.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h6.sc-zonos-link-authentication,.sc-zonos-link-authentication-h hr.sc-zonos-link-authentication,.sc-zonos-link-authentication-h figure.sc-zonos-link-authentication,.sc-zonos-link-authentication-h p.sc-zonos-link-authentication,.sc-zonos-link-authentication-h pre.sc-zonos-link-authentication{margin:0}.sc-zonos-link-authentication-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-link-authentication-h .zonos--title.sc-zonos-link-authentication{margin-bottom:16px}.sc-zonos-link-authentication-h .zonos--input-invalid.sc-zonos-link-authentication{border:2px solid var(--zonos-elements-red-600);border-radius:var(--zonos--border-radius)}";
+const ZonosLinkAuthenticationStyle0 = zonosLinkAuthenticationCss;
+
+const MAX_RETRIES_INITIALIZE_LINK = 51;
+const ZonosLinkAuthentication = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.linkAuthenticationChange = createEvent(this, "linkAuthenticationChange", 7);
+        this.storeUnsubscribeList = [];
+        /**
+         * 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.retriesInitializeLink = 0;
+        this.setCustomEmailInputToLinkEvent = (emailValue) => {
+            // check if the email is valid
+            const isValid = validateEmailValue(emailValue);
+            const simulateLinkEvent = {
+                complete: !!isValid,
+                elementType: 'linkAuthentication',
+                empty: !emailValue,
+                value: {
+                    email: emailValue,
+                },
+            };
+            stripeStore.stripeLinkEventData = simulateLinkEvent;
+        };
+        this.handleNormalEmailInput = (event) => {
+            var _a;
+            const inputValue = event.detail;
+            this.setCustomEmailInputToLinkEvent(inputValue);
+            (_a = this.linkAuthenticationChange) === null || _a === void 0 ? void 0 : _a.emit();
+        };
+    }
+    watchIsStagingMode() {
+        // Wait for the DOM to be ready before re-initializing Link element
+        setTimeout(() => {
+            void this.watchInitStripe();
+        }, 0);
+    }
+    async watchInitStripe() {
+        if (!this.stripe || !stripeStore.stripeElements) {
+            return;
+        }
+        // No need to initialize link if this is staging mode since we will render the email input field
+        if (cartStore.isStagingMode || !this.clientSecret) {
+            return;
+        }
+        const defaultValues = this.defaultEmail
+            ? {
+                email: this.defaultEmail,
+            }
+            : undefined;
+        try {
+            // Create and mount the Authentication Element in ${type} mode
+            const linkAuthenticationElement = stripeStore.stripeLinkElement ||
+                stripeStore.stripeElements.create('linkAuthentication', {
+                    defaultValues: defaultValues,
+                });
+            const linkAuthenticationElementContainer = this.el.querySelector('.zonos--link-authentication-component');
+            if (!linkAuthenticationElementContainer) {
+                logError('Cannot find container element for linkAuthenticationElement');
+                return;
+            }
+            linkAuthenticationElement.mount(linkAuthenticationElementContainer);
+            linkAuthenticationElement.on('change', event => {
+                var _a;
+                stripeStore.stripeLinkEventData = event;
+                (_a = this.linkAuthenticationChange) === null || _a === void 0 ? void 0 : _a.emit();
+            });
+            stripeStore.stripeLinkElement = linkAuthenticationElement;
+            this.retriesInitializeLink = 0;
+            // 10 seconds
+            if (this.retriesInitializeLink > 11) {
+                log('Stripe link element initialized', 'info', {
+                    retriesInitializeLink: this.retriesInitializeLink,
+                    stripe: this.stripe,
+                });
+                void sendErrorLog({
+                    endpoint: 'stripe-link-authentication-init-long-running',
+                    errors: [
+                        'Stripe link element initialized after 20 retries - 10 seconds',
+                    ],
+                    metadata: {
+                        retriesInitializeLink: this.retriesInitializeLink,
+                    },
+                });
+            }
+        }
+        catch (error) {
+            if (error instanceof Error) {
+                // Wait for the stripe elements to be ready with the new client secret
+                this.retriesInitializeLink++;
+                if (this.retriesInitializeLink < MAX_RETRIES_INITIALIZE_LINK) {
+                    await new Promise(resolve => setTimeout(resolve, 500));
+                    void this.watchInitStripe();
+                }
+                if (this.retriesInitializeLink === MAX_RETRIES_INITIALIZE_LINK) {
+                    void sendErrorLog({
+                        endpoint: 'stripe-link-authentication-init-error',
+                        errors: [error.message],
+                        metadata: {
+                            retriesInitializeLink: this.retriesInitializeLink,
+                        },
+                    });
+                }
+            }
+        }
+    }
+    watchDefaultEmail(newDefaultEmail, oldDefaultEmail) {
+        var _a, _b;
+        log('Default email is changed', 'info', {
+            newDefaultEmail,
+            oldDefaultEmail,
+        });
+        if (oldDefaultEmail === newDefaultEmail) {
+            return;
+        }
+        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,
+        });
+        void this.watchInitStripe();
+    }
+    disconnectedCallback() {
+        // unsubscribe from store subscriptions
+        try {
+            this.storeUnsubscribeList.forEach(subscription => subscription());
+        }
+        catch (_a) { }
+    }
+    componentDidLoad() {
+        this.storeUnsubscribeList = [
+            stripeStoreOnChange('stripeElements', async () => {
+                void this.watchInitStripe();
+            }),
+            stripeStoreOnChange('clientSecret', async () => {
+                this.clientSecret = stripeStore.clientSecret;
+            }),
+            stripeStoreOnChange('stripe', async () => {
+                this.stripe = stripeStore.stripe;
+            }),
+        ];
+        // @Watch doesn't get trigger on initial load
+        void this.watchInitStripe();
+        if (!this.defaultEmail) {
+            return;
+        }
+        // set default email value to stripeLinkEventData if default email is provided
+        this.setCustomEmailInputToLinkEvent(this.defaultEmail);
+    }
+    render() {
+        this.isStagingMode = cartStore.isStagingMode;
+        this.clientSecret = stripeStore.clientSecret;
+        const renderEmailAddress = () => {
+            var _a;
+            if (cartStore.isStagingMode) {
+                return (h("zonos-stripe-input", { inputLabel: translate('Email'), inputValue: this.defaultEmail ||
+                        ((_a = stripeStore.stripeLinkEventData) === null || _a === void 0 ? void 0 : _a.value.email) ||
+                        '', isError: this.isEmailError, onBlur: () => {
+                        var _a;
+                        const emailValue = ((_a = stripeStore.stripeLinkEventData) === null || _a === void 0 ? void 0 : _a.value.email) || '';
+                        if (!emailValue) {
+                            return;
+                        }
+                        // check if the email is valid
+                        const isValid = validateEmailValue(emailValue);
+                        this.isEmailError = !isValid;
+                    }, onInputChange: this.handleNormalEmailInput }));
+            }
+            return (h("div", { class: `zonos--link-authentication-component ${this.isEmailError && 'zonos--input-invalid'}` }));
+        };
+        // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
+        return (h(Host, { class: "zonos--link-authentication zonos--elements", style: {
+                '--zonos--border-radius': getBorderRadius(),
+            } }, this.titleText && (h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), renderEmailAddress(), this.isEmailError && (h("zonos-text", { textColor: "red-600" }, translate('Please enter a valid email address.')))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "isStagingMode": ["watchIsStagingMode"],
+        "stripe": ["watchInitStripe"],
+        "clientSecret": ["watchInitStripe"],
+        "defaultEmail": ["watchDefaultEmail"]
+    }; }
+};
+ZonosLinkAuthentication.style = ZonosLinkAuthenticationStyle0;
+
+const zonosLoadingOverlayCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{position:fixed;inset:0;z-index:2147483010;pointer-events:none;display:block}:host .zonos--loading-overlay{position:fixed;inset:0;width:100vw;height:100vh;background:var(--zonos-elements-backdrop-color);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;opacity:0;visibility:hidden;-webkit-transition:opacity 0.3s ease, visibility 0.3s ease;transition:opacity 0.3s ease, visibility 0.3s ease;z-index:2147483010}:host(.zonos--open){pointer-events:auto}:host(.zonos--open) .zonos--loading-overlay{opacity:0.65;visibility:visible}";
+const ZonosLoadingOverlayStyle0 = zonosLoadingOverlayCss;
+
+const ZonosLoadingOverlay = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Whether or not the overlay is open
+         * @default false
+         */
+        this.open = false;
+        /**
+         * Spinner size (optional, default 40)
+         */
+        this.size = 40;
+    }
+    render() {
+        return (h(Host, { key: 'eee6eb4eb40c18ccdd24d57d98be8b90eadccf23', class: classes(['zonos--elements', this.open && 'zonos--open']) }, h("div", { key: '4bca110e058cb5cbf4c86351aa56d251792ab325', class: "zonos--loading-overlay" }, h("zonos-spinner", { key: '513b8d669ab13896442c0b1048609a3f3e0ed6f5', size: this.size, spinnerColor: this.spinnerColor }))));
+    }
+};
+ZonosLoadingOverlay.style = ZonosLoadingOverlayStyle0;
+
+export { ZonosAddress as zonos_address, ZonosConfirmDialog as zonos_confirm_dialog, ZonosLinkAuthentication as zonos_link_authentication, ZonosLoadingOverlay as zonos_loading_overlay };