@zonos/elements 1.3.218 → 1.3.220

package/dist/esm/zonos-collect-finish_6.entry.js

@@ -0,0 +1,802 @@
+import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, a as getElement } from './index-55a03023.js';
+import { c as stripeStore, d as stripeStoreRetrievePayment, t as trackConversionEvent, G as stripeStoreResetPromoCode, y as stripeStoreReset, H as stripeStoreMessageBasedOnStatus, e as cartStore, r as cartStoreNextStep, K as cartStoreOnChange } from './cart-b2dd578c.js';
+import { s as submitGtag, c as paypalStoreReset, a as paypalStore, b as paypalInitScript } from './paypal-555bbf1e.js';
+import { s as storageStore, l as localizationStore } from './localization-d7125e4e.js';
+import { t as translate, b as translationStoreOnChange } from './translationStore-13502f49.js';
+import { z as zonosStore } from './zonosStore-c456b933.js';
+import { h as handleFetch, l as log, s as sendErrorLog, d as allLogs, g as getIsTestMode, i as isCheckoutMobile, a as getIsStagingMode } from './handleFetch-99218189.js';
+import { c as createCustomEvent } from './createCustomEvent-58159025.js';
+import { g as getBorderRadius } from './getBorderRadius-87593ff4.js';
+import { i as isCollectMobile, a as isCollectTablet, e as collectStore } from './isCollectMobileTablet-7f9a5e2b.js';
+import { c as classes } from './classes-0d95c529.js';
+import { l as languages } from './ILanguage-cd6acb72.js';
+import { r as renderCheckoutCurrency, p as placeTestOrder } from './placeTestOrder-2d67c1a9.js';
+import './isDarkColor-1f58b6be.js';
+import './VarianceTest-fef2d958.js';
+
+const RemoveIcon = `<svg color="var(--zonos-elements-red-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" data-is-secondary-color="true" fill="var(--zonos-elements-red-200)" fill-rule="evenodd"></path><path clip-rule="evenodd" d="M8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>`;
+
+const SuccessIcon = `<svg color="var(--zonos-elements-blue-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Z" data-is-secondary-color="true" fill="var(--zonos-elements-blue-100)" fill-rule="evenodd"></path><path clip-rule="evenodd" d="M15.707 9.293a1 1 0 0 1 0 1.414l-3.646 3.647a1.5 1.5 0 0 1-2.122 0l-1.646-1.647a1 1 0 1 1 1.414-1.414L11 12.586l3.293-3.293a1 1 0 0 1 1.414 0Z" fill="currentColor" fill-rule="evenodd"></path></svg>`;
+
+const zonosCollectFinishCss = ":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{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%}:host .zonos--group{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;margin-bottom:24px;border-radius:var(--zonos--border-radius, 10px);gap:24px;margin-top:24px;background-color:var(--zonos-elements-gray-50);padding:48px}:host .zonos--finish-details{max-width:640px;min-width:300px;line-height:24px;width:0 auto;margin:auto}:host zonos-button{width:100%}:host .loading-wrapper{min-height:300px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}:host .zonos--finish-button-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;gap:16px;margin:0 auto;margin-top:48px;max-width:300px}:host .zonos--button-container{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;gap:16px;margin:0 auto}:host .zonos--subtitle{text-align:center}:host .zonos--order-number{background-color:var(--zonos-elements-gray-0);border:1px solid var(--zonos-elements-gray-200);color:var(--zonos-elements-gray-800);border-radius:var(--zonos-elements-radius-6);padding:4px 8px}";
+const ZonosCollectFinishStyle0 = zonosCollectFinishCss;
+
+/**
+ * Maximum number of retries to pull order info (gap between each retry is 1 second)
+ */
+const MAX_RETRIES = 30;
+const ZonosCollectFinish = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.closeClick = createEvent(this, "closeClick", 7);
+        /**
+         * The border radius style of the dialog
+         */
+        this.borderRadius = 'ROUNDED';
+        /**
+         * The confirmation id for the collect order
+         */
+        this.confirmationId = null;
+        this.isLoading = true;
+        this.notificationType = 'success';
+        this.notificationTitle = '';
+        this.notificationMessages = [];
+        this.notificationActionText = translate('Keep shopping');
+        this.order = null;
+        /**
+         * Is waiting to redirect to a different page
+         */
+        this.isWaitingToRedirect = true;
+        this.pullOrder = async () => {
+            var _a, _b;
+            const checkoutSessionId = storageStore.checkoutSessionId;
+            const searchParams = new URLSearchParams();
+            searchParams.set('checkoutSessionId', checkoutSessionId || '');
+            const { baseUrl, errors, json } = await handleFetch(`/api/zonos-elements/get-order?${searchParams.toString()}`);
+            if (errors.length || !(json === null || json === void 0 ? void 0 : json.id)) {
+                return {
+                    baseUrl,
+                    order: null,
+                };
+            }
+            // onOrderSuccess callback may be provided on Zonos.init
+            await ((_b = (_a = zonosStore.checkoutSettings).onOrderSuccess) === null || _b === void 0 ? void 0 : _b.call(_a, {
+                zonosApiRoute: baseUrl,
+                zonosOrder: json,
+            }));
+            return {
+                baseUrl,
+                order: json,
+            };
+        };
+        this.handleSuccessBehavior = async () => {
+            // Do nothing, display Zonos success page
+            this.isLoading = false;
+            await this.getPullOrder();
+        };
+        // TODO: This method of pulling orders is temporary. Once we have a working event registry system, we will rely on that to tell us when the order is ready to trigger onOrderSuccess
+        this.getPullOrder = async (attempts = 0) => {
+            var _a, _b;
+            if (attempts === 0) {
+                log('=== Start to poll for order info', 'info');
+            }
+            const { baseUrl, order } = await this.pullOrder();
+            const foundLegacyOrderNumber = !!((_b = (_a = order === null || order === void 0 ? void 0 : order.references) === null || _a === void 0 ? void 0 : _a.find(entry => (entry === null || entry === void 0 ? void 0 : entry.key) === 'zonosOrderNumber')) === null || _b === void 0 ? void 0 : _b.value);
+            const checkoutSessionId = storageStore.checkoutSessionId;
+            const maxRetries = parseFloat(new URLSearchParams(window.location.search).get('maxPollingRetries') ||
+                '0') || MAX_RETRIES;
+            log(`=== Polling order (${attempts} attemps)`, 'info');
+            if (
+            // Order found, in legacy checkout facade and still haven't found the legacy order number
+            order) {
+                log('=== CollectOrder info found', 'info');
+                if (attempts > 10) {
+                    // Log out all the logs if we have tried more than 10 times
+                    void sendErrorLog({
+                        endpoint: `${baseUrl}/api/zonos-elements/get-order?checkoutSessionId=${checkoutSessionId}&orderId=${order.id}`,
+                        errors: [`Collect order found after ${attempts} attempts`],
+                        metadata: {
+                            allLogs,
+                            checkoutSessionId: storageStore.checkoutSessionId || '',
+                            orderId: order.id,
+                            storeId: zonosStore.storeId,
+                        },
+                    });
+                }
+                this.order = order;
+            }
+            else if ((!order || !foundLegacyOrderNumber) && attempts < maxRetries) {
+                // Wait for 1 second before the next attempt
+                await new Promise(resolve => setTimeout(resolve, 1000));
+                await this.getPullOrder(attempts + 1);
+            }
+            else {
+                void sendErrorLog({
+                    endpoint: `${baseUrl}/api/zonos-elements/get-order?checkoutSessionId=${checkoutSessionId}`,
+                    errors: [`Collect order not found after ${maxRetries} attempts`],
+                    metadata: {
+                        allLogs,
+                        checkoutSessionId: storageStore.checkoutSessionId || '',
+                        storeId: zonosStore.storeId,
+                    },
+                });
+            }
+        };
+        this.checkStripePaymentStatus = async () => {
+            const clientSecret = new URLSearchParams(window.location.search).get('payment_intent_client_secret') || stripeStore.clientSecret;
+            if (clientSecret || this.storybookForceStatus) {
+                const { error, messages, status } = await stripeStoreRetrievePayment({
+                    clientSecret,
+                    storybookForceStatus: this.storybookForceStatus,
+                });
+                const isError = status === 'requires_action' || error;
+                this.notificationType = isError ? 'error' : 'success';
+                this.notificationMessages = messages || [];
+                this.notificationTitle = isError
+                    ? translate('Payment failed')
+                    : translate("You're all set!");
+                log('=== Payment intent retrieve status', 'info', {
+                    clientSecret,
+                    error,
+                    messages,
+                    status,
+                });
+                // remove the client secret from the url
+                const url = new URL(window.location.href);
+                url.searchParams.delete('payment_intent_client_secret');
+                url.searchParams.delete('payment_intent');
+                url.searchParams.delete('redirect_status');
+                // Clean up the url if it's a redirect behavior
+                url.searchParams.delete('zonosCheckoutSessionId');
+                window.history.replaceState({}, '', url.toString());
+                // Payment doesn't go through
+                if (error && (messages === null || messages === void 0 ? void 0 : messages.length)) {
+                    submitGtag('zonos-checkout-payment-fail');
+                    void sendErrorLog({
+                        endpoint: 'Stripe payment failed',
+                        errors: [
+                            `Payment intent "${clientSecret.split('_secret_')[0] || clientSecret}" status: ${status} - checkout session: ${storageStore.checkoutSessionId}`,
+                        ],
+                        metadata: {
+                            allLogs,
+                            credentialToken: window.Zonos.zonosApiKey,
+                        },
+                    });
+                }
+                else {
+                    submitGtag('zonos-checkout-success');
+                    const checkoutSessionId = storageStore.checkoutSessionId;
+                    void trackConversionEvent({
+                        checkoutSessionId,
+                        eventName: 'checkout_orderCompleted',
+                    });
+                    const successEvent = createCustomEvent('zonos-checkout-success', {
+                        message: 'Zonos Checkout successfully processed order',
+                    });
+                    document.dispatchEvent(successEvent);
+                    // wait this to finish before resetting store and checkout session id
+                    await this.handleSuccessBehavior();
+                }
+            }
+            // Make sure to stop the loading spinner even when there's an error
+            this.isLoading = false;
+            // reset promo when checkout is finished
+            stripeStoreResetPromoCode();
+            stripeStoreReset();
+            storageStore.checkoutSessionId = null;
+        };
+        this.checkStagingOrderStatus = async () => {
+            this.notificationType = 'success';
+            this.notificationTitle = translate("You're all set!");
+            this.notificationMessages =
+                stripeStoreMessageBasedOnStatus('succeeded').messages;
+            await this.handleSuccessBehavior();
+            // reset promo when checkout is finished
+            stripeStoreResetPromoCode();
+            stripeStoreReset();
+            paypalStoreReset();
+            storageStore.checkoutSessionId = null;
+        };
+        this.checkPaypalPaymentStatus = async () => {
+            // render error message if there's an error
+            if (paypalStore.paypalErrorMessage) {
+                this.notificationType = 'error';
+                this.notificationTitle = translate('Payment failed');
+                this.notificationMessages = [paypalStore.paypalErrorMessage];
+                this.isLoading = false;
+                return;
+            }
+            // show success message right away when order id is already created
+            this.isLoading = false;
+            if (paypalStore.orderIdCreated) {
+                submitGtag('zonos-checkout-success');
+                const checkoutSessionId = storageStore.checkoutSessionId;
+                void trackConversionEvent({
+                    checkoutSessionId,
+                    eventName: 'checkout_orderCompleted',
+                });
+                this.notificationType = 'success';
+                this.notificationTitle = translate("You're all set!");
+                this.notificationMessages =
+                    stripeStoreMessageBasedOnStatus('succeeded').messages;
+                // wait this to finish before resetting store and checkout session id
+                await this.handleSuccessBehavior();
+            }
+            // reset promo when checkout is finished
+            stripeStoreResetPromoCode();
+            stripeStoreReset();
+            paypalStoreReset();
+            storageStore.checkoutSessionId = null;
+        };
+        this.getReceiptUrl = ({ cartId }) => {
+            const hostUrl = new URL(`${window.location.origin}/receipt`);
+            hostUrl.searchParams.set('referenceId', cartId);
+            // is test mode
+            const isTestMode = getIsTestMode();
+            if (isTestMode) {
+                hostUrl.searchParams.set('zonosTestMode', '1');
+            }
+            // Carry over the zonosQaUrl if it exists
+            const zonosQaUrl = new URLSearchParams(window.location.search).get('zonosQaUrl');
+            if (zonosQaUrl) {
+                hostUrl.searchParams.set('zonosQaUrl', zonosQaUrl);
+            }
+            return hostUrl.toString();
+        };
+    }
+    componentDidLoad() {
+        if (this.overrideNotification) {
+            // just show the notification and don't check any of the payment status
+            this.notificationType = this.overrideNotification.type;
+            this.notificationTitle = this.overrideNotification.title;
+            this.notificationMessages = this.overrideNotification.messages;
+            this.isLoading = false;
+            return;
+        }
+        if (cartStore.isStagingMode) {
+            void this.checkStagingOrderStatus();
+        }
+        else if (paypalStore.orderIdCreated) {
+            void this.checkPaypalPaymentStatus();
+        }
+        else {
+            void this.checkStripePaymentStatus();
+        }
+    }
+    render() {
+        const cartId = window.Zonos.cartId;
+        return (h(Host, { key: 'e145b7396302157ccb515c54f99e50faa8ba45e6', class: "zonos--checkout-finish zonos--elements", style: {
+                '--zonos--border-radius': getBorderRadius({
+                    overrideBorderStyle: this.borderRadius,
+                }),
+            } }, !this.isLoading && (h("div", { key: 'b9df4788f27c935ba7fc47e7c930cd162c8fbebe', class: "zonos--finish-details" }, h("div", { key: 'a510c995880c8698dc98390d0504b70333551c86', class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), h("zonos-text", { key: '8f84f87bf2365b85acffefe16e8b10cd9227a6e6', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), this.confirmationId && (h("zonos-badge", { key: '0e3f3f71cae6262d6394ad2c5a6d656509b484d5', badgeColor: "gray" }, this.confirmationId)), h("zonos-text", { key: 'c769f2ada1e6b421e373aeb4393560a21d6fcffc', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), this.order && cartId && (h("div", { key: '9972858fadd4d2d9c4f00e54921002ea04a5cc51', class: "zonos--button-container" }, h("zonos-button", { key: 'fe931a552fc1c43b29a1966736379c3c1d0536f6', onClick: () => {
+                window.open(this.getReceiptUrl({ cartId }), '_blank');
+            }, size: "lg", variant: "primary" }, translate('View receipt')))))))));
+    }
+    static get assetsDirs() { return ["assets"]; }
+};
+ZonosCollectFinish.style = ZonosCollectFinishStyle0;
+
+const Globe = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" color="var(--zonos-elements-gray-1000)" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12ZM11.4709 5.80634C11.7686 5.53723 11.9541 5.5 12 5.5C12.0459 5.5 12.2314 5.53723 12.5291 5.80634C12.8115 6.06164 13.1289 6.46913 13.4271 7.03651C13.9505 8.03191 14.3838 9.46098 14.48 11.25H9.51996C9.61624 9.46098 10.0495 8.03191 10.5729 7.03651C10.8711 6.46913 11.1885 6.06164 11.4709 5.80634ZM8.01802 11.25C8.11591 9.23031 8.60319 7.55958 9.24516 6.33849C9.29983 6.23451 9.35585 6.13335 9.41312 6.03514C7.32916 6.94017 5.81218 8.90533 5.5428 11.25H8.01802ZM5.5428 12.75H8.01802C8.11591 14.7697 8.60319 16.4404 9.24516 17.6615C9.29983 17.7655 9.35585 17.8666 9.41312 17.9649C7.32916 17.0598 5.81218 15.0947 5.5428 12.75ZM9.51996 12.75H14.48C14.3838 14.539 13.9505 15.9681 13.4271 16.9635C13.1289 17.5309 12.8115 17.9384 12.5291 18.1937C12.2314 18.4628 12.0459 18.5 12 18.5C11.9541 18.5 11.7686 18.4628 11.4709 18.1937C11.1885 17.9384 10.8711 17.5309 10.5729 16.9635C10.0495 15.9681 9.61624 14.539 9.51996 12.75ZM15.982 12.75C15.8841 14.7697 15.3968 16.4404 14.7548 17.6615C14.7002 17.7655 14.6441 17.8666 14.5869 17.9649C16.6708 17.0598 18.1878 15.0947 18.4572 12.75H15.982ZM18.4572 11.25C18.1878 8.90533 16.6708 6.94017 14.5869 6.03514C14.6441 6.13335 14.7002 6.23451 14.7548 6.33849C15.3968 7.55958 15.8841 9.23031 15.982 11.25H18.4572Z" fill="currentColor"/>
+</svg>
+`;
+
+const ZonosWordmark = `<svg width="43" height="10" viewBox="0 0 43 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.35896 0.0640869H0.30768C0.166068 0.0640869 0.0512695 0.178886 0.0512695 0.320497V1.85896C0.0512695 2.00057 0.166068 2.11537 0.30768 2.11537H4.44439C4.54964 2.11537 4.61005 2.2352 4.54745 2.31982L0.151823 8.2615C0.0865163 8.34978 0.0512695 8.45669 0.0512695 8.56649V9.67947C0.0512695 9.82108 0.166068 9.93588 0.30768 9.93588H7.35896C7.50057 9.93588 7.61537 9.82108 7.61537 9.67947V8.14101C7.61537 7.9994 7.50057 7.8846 7.35896 7.8846H3.22226C3.117 7.8846 3.05659 7.76477 3.11919 7.68015L7.51482 1.73847C7.58013 1.65019 7.61537 1.54328 7.61537 1.43348V0.320497C7.61537 0.178886 7.50057 0.0640869 7.35896 0.0640869Z" fill="var(--zonos-elements-gray-800)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.718 0C10.1602 0 8.89746 1.26279 8.89746 2.82051V7.17949C8.89746 8.73721 10.1602 10 11.718 10H13.6411C15.1988 10 16.4616 8.73721 16.4616 7.17949V2.82051C16.4616 1.26279 15.1988 0 13.6411 0H11.718ZM11.718 2.05128C11.2931 2.05128 10.9487 2.39568 10.9487 2.82051V7.17949C10.9487 7.60432 11.2931 7.94872 11.718 7.94872H13.6411C14.0659 7.94872 14.4103 7.60432 14.4103 7.17949V5V2.82051C14.4103 2.39568 14.0659 2.05128 13.6411 2.05128H11.718Z" fill="var(--zonos-elements-gray-800)"/>
+<path d="M17.7437 0.436316V9.71132C17.7437 9.85293 17.8585 9.96773 18.0001 9.96773H19.5385C19.6801 9.96773 19.7949 9.85293 19.7949 9.71132V3.74801C19.7949 3.44829 19.969 3.17587 20.241 3.04996L22.1641 2.15964C22.6739 1.92363 23.2565 2.29592 23.2565 2.85769V9.71132C23.2565 9.85293 23.3713 9.96773 23.5129 9.96773H25.0513C25.193 9.96773 25.3078 9.85293 25.3078 9.71132V2.85595C25.3078 0.79631 23.1718 -0.568775 21.3027 0.296257L19.9742 0.911055C19.8685 0.959946 19.7432 0.931536 19.669 0.84187L19.2748 0.365697C19.1773 0.248019 19.0325 0.179905 18.8797 0.179905H18.0001C17.8585 0.179905 17.7437 0.294704 17.7437 0.436316Z" fill="var(--zonos-elements-gray-800)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.4104 0C27.8526 0 26.5898 1.26279 26.5898 2.82051V7.17949C26.5898 8.73721 27.8526 10 29.4104 10H31.3334C32.8912 10 34.1539 8.73721 34.1539 7.17949V2.82051C34.1539 1.26279 32.8912 0 31.3334 0H29.4104ZM29.4104 2.05128C28.9855 2.05128 28.6411 2.39568 28.6411 2.82051V7.17949C28.6411 7.60432 28.9855 7.94872 29.4104 7.94872H31.3334C31.7583 7.94872 32.1027 7.60432 32.1027 7.17949V2.82051C32.1027 2.39568 31.7583 2.05128 31.3334 2.05128H29.4104Z" fill="var(--zonos-elements-gray-800)"/>
+<path d="M38.2085 0.0640869H40.3889C41.8309 0.0640869 42.9999 1.23306 42.9999 2.67506C42.9999 2.79477 42.9108 2.89574 42.792 2.91059L41.1732 3.11293C41.054 3.12784 40.9486 3.03485 40.9486 2.91466C40.9486 2.47322 40.5908 2.11537 40.1493 2.11537H38.3397C37.8688 2.11537 37.4871 2.49712 37.4871 2.96803C37.4871 3.3685 37.7658 3.71501 38.1569 3.80087L40.7916 4.37922C42.0811 4.66229 42.9999 5.80462 42.9999 7.12486C42.9999 8.67735 41.7414 9.93588 40.1889 9.93588H38.0468C36.6048 9.93588 35.4358 8.76691 35.4358 7.32491C35.4358 7.2052 35.5249 7.10423 35.6437 7.08938L37.2625 6.88703C37.3817 6.87213 37.4871 6.96512 37.4871 7.08531C37.4871 7.52675 37.8449 7.8846 38.2864 7.8846H40.1176C40.5765 7.8846 40.9486 7.51252 40.9486 7.05354C40.9486 6.67478 40.6925 6.34394 40.3258 6.24901L37.5136 5.52093C36.2902 5.20422 35.4358 4.10042 35.4358 2.83676C35.4358 1.30545 36.6772 0.0640869 38.2085 0.0640869Z" fill="var(--zonos-elements-gray-700)"/>
+</svg>
+`;
+
+const zonosCollectFooterCss = ":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:absolute;bottom:0;left:32px;right:32px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;z-index:2}:host .zonos--collect-footer{gap:16px;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;padding:12px;padding-left:0;-ms-flex-align:center;align-items:center;width:100%}:host .zonos--collect-footer .zonos--collect-footer-icon-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:16px}:host .zonos--collect-footer .zonos--collect-footer-icon-wrapper .zonos--collect-footer-logo{display:-ms-inline-flexbox;display:inline-flex;gap:8px;-ms-flex-align:center;align-items:center}:host .zonos--collect-footer .zonos--collect-footer-icon-wrapper .zonos--collect-footer-logo a{line-height:0}:host .zonos--collect-footer .zonos--collect-footer-icon-wrapper a{text-decoration:none}:host .zonos--collect-footer zonos-button button.outline{outline:1px solid var(--zonos-elements-gray-800)}:host .zonos--collect-footer .zonos--collect-locale-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:8px;position:relative}@media (max-width: 400px){:host .zonos--collect-footer .zonos--collect-locale-wrapper{gap:4px}}:host .zonos--collect-footer .zonos--collect-language-dialog{position:absolute;bottom:36px;left:var(--language-dialog-left);background:var(--zonos-elements-surface-color);-webkit-box-shadow:var(--zonos-elements-v3-shadow-xl);box-shadow:var(--zonos-elements-v3-shadow-xl);border-radius:var(--zonos-elements-radius-12);width:360px;max-width:100vw;max-height:500px;z-index:2147483011;overflow:auto;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:bottom left;transform-origin:bottom left;opacity:0;-webkit-transition:opacity 0.3s ease-out, -webkit-transform 0.3s ease-out;transition:opacity 0.3s ease-out, -webkit-transform 0.3s ease-out;transition:transform 0.3s ease-out, opacity 0.3s ease-out;transition:transform 0.3s ease-out, opacity 0.3s ease-out, -webkit-transform 0.3s ease-out;-ms-scroll-chaining:none;overscroll-behavior:contain}:host .zonos--collect-footer .zonos--collect-language-dialog::-webkit-scrollbar{width:10px}:host .zonos--collect-footer .zonos--collect-language-dialog::-webkit-scrollbar-track{background:var(--zonos-elements-gray-50)}:host .zonos--collect-footer .zonos--collect-language-dialog::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}:host .zonos--collect-footer .zonos--collect-language-dialog::-webkit-scrollbar-thumb:hover{background:#d6d6d6}:host .zonos--collect-footer .zonos--collect-language-dialog::-webkit-scrollbar-track{border-top-right-radius:var(--zonos-elements-radius-12);border-bottom-right-radius:var(--zonos-elements-radius-12)}:host .zonos--collect-footer .zonos--collect-language-dialog.zonos--collect-language-dialog-open{opacity:1;-webkit-transform:scale(1);transform:scale(1)}:host .dot{display:-ms-inline-flexbox;display:inline-flex;background:var(--zonos-elements-gray-400);width:6px;height:6px;border-radius:50%}:host(.mobile),:host(.tablet){background-color:var(--zonos-elements-gray-0);width:100%;position:-webkit-sticky;position:sticky;bottom:0}:host(.tablet) .zonos--collect-footer{width:100%;max-width:800px;-ms-flex-pack:justify;justify-content:space-between;display:-ms-flexbox;display:flex}:host(.mobile) .zonos--collect-locale-wrapper{display:none}:host(.mobile) .zonos--collect-footer{-ms-flex-pack:center;justify-content:center}";
+const ZonosCollectFooterStyle0 = zonosCollectFooterCss;
+
+const ZonosCollectFooter = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Override mobile mode
+         */
+        this.mobile = false;
+        /**
+         * Override tablet mode
+         */
+        this.tablet = false;
+        this.showLanguageDialog = false;
+        this.isMobile = false;
+        this.isTablet = false;
+    }
+    handleGlobalClick(e) {
+        if (!this.el.contains(e.target) && this.showLanguageDialog) {
+            this.showLanguageDialog = false;
+        }
+    }
+    toggleLanguageDialog() {
+        this.showLanguageDialog = !this.showLanguageDialog;
+    }
+    handleMobileChange() {
+        this.isMobile = isCollectMobile(this.mobile);
+    }
+    handleTabletChange() {
+        this.isTablet = isCollectTablet(this.tablet);
+    }
+    componentWillLoad() {
+        this.isMobile = isCollectMobile(this.mobile);
+        this.isTablet = isCollectTablet(this.tablet);
+    }
+    render() {
+        var _a;
+        const languageLabel = (_a = languages.find(x => x.code === localizationStore.selectedLocale)) === null || _a === void 0 ? void 0 : _a.label;
+        // reverse color when on desktop. With the coversheet backdrop, the color should be white
+        const colorDesktop = 'gray-1000';
+        return (h(Host, { key: '9509e7325ad0153d2f5c9ba3b5689fdb3ad6313e', class: classes([
+                'zonos--elements',
+                this.isMobile && 'mobile',
+                this.isTablet && 'tablet',
+            ]) }, h("div", { key: '250716798bf30901678b16e1ac159810f1d7a6ad', class: "zonos--collect-footer" }, h("div", { key: 'ab61803d4b5348b8978e7dfcb16a5733cca5dd29', class: "zonos--collect-locale-wrapper" }, h("zonos-button", { key: '6c5dcd25d5ef73b2098269d840e291343d30cb81', buttonColor: colorDesktop, class: "zonos--collect-footer-language-button", icon: h("zonos-icon", { "aria-label": "Language select", content: Globe, iconColor: colorDesktop }), onClick: () => this.toggleLanguageDialog(), variant: "subtle" }, languageLabel), h("div", { key: 'd1a367cd19b36f1a0f49ccfe78e750218b50a03e', class: classes([
+                'zonos--collect-language-dialog',
+                this.showLanguageDialog &&
+                    'zonos--collect-language-dialog-open',
+            ]) }, h("zonos-language-select", { key: '02f446b8f4e3dc875f78d5ac2f0b9aa6dd071f1c', handleOnClose: () => this.toggleLanguageDialog() }))), h("div", { key: 'b713a78cbd3d3f131c6c473bb1d979899d40b13b', class: "zonos--collect-footer-icon-wrapper" }, h("div", { key: '97eab5909d556f13fa2acc0628d583d49f13d3a2', class: "zonos--collect-footer-logo" }, h("zonos-text", { key: 'a6488e084f153305eed8d6f65341d7ab00297adb', textColor: colorDesktop }, "Powered by"), h("a", { key: 'c63a6e1064dbd733add1cc3b1df1456484e2f103', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '081cae2c34e58478a8c20f0f9a9f20dc0b47c9b7', autoHeight: true, content: ZonosWordmark, size: 42 }))), h("div", { key: '0862a11838e62f425d38066230b01f445999d751', class: "dot" }), h("a", { key: 'b13f3af014b5d970e45f88cbb0ef669a0f9aa2ac', href: "https://zonos.com/docs/legal/zonos-privacy-policy", target: "_blank" }, h("zonos-text", { key: 'a675218a36da83427c2ce517a15b1ed5ea5910d6', textColor: colorDesktop }, "Privacy policy"))))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "mobile": ["handleMobileChange"],
+        "tablet": ["handleTabletChange"]
+    }; }
+};
+ZonosCollectFooter.style = ZonosCollectFooterStyle0;
+
+const ChevronDownIcon = `<svg color="var(--zonos-elements-gray-400)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M6.293 9.293a1 1 0 0 1 1.414 0L12 13.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-4.93 4.93a1.1 1.1 0 0 1-1.555 0l-4.93-4.93a1 1 0 0 1 0-1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>`;
+
+const ChevronUpIcon = `<svg color="var(--zonos-elements-gray-400)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M17.707 14.707a1 1 0 0 1-1.414 0L12 10.414l-4.293 4.293a1 1 0 0 1-1.414-1.414l4.93-4.93a1.1 1.1 0 0 1 1.555 0l4.93 4.93a1 1 0 0 1 0 1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>`;
+
+const zonosCollectOrderDetailsCss = ":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{height:100%}:host *{-ms-scroll-chaining:none;overscroll-behavior:contain}:host *::-webkit-scrollbar{width:10px}:host *::-webkit-scrollbar-track{background:var(--zonos-elements-gray-50)}:host *::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}:host *::-webkit-scrollbar-thumb:hover{background:#d6d6d6}:host .zonos--wrapper{overflow:auto;background-color:var(--zonos-elements-gray-50);border-radius:16px;height:100%;min-height:56px}:host .zonos--order-details-header{position:-webkit-sticky;position:sticky;top:0;z-index:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--zonos-elements-gray-50);border:none;display:-ms-flexbox;display:flex;padding:16px 16px 0 16px;width:100%;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}:host .zonos--order-details-header:focus-visible{outline:none}:host .zonos--order-details-wrapper{position:relative;padding:0 16px 16px 16px}:host .zonos--collect-order-details-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:28px}:host .zonos--collect-order-info{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:32px}:host .zonos--collect-order-info .zonos--collect-order-details-row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:16px}:host .zonos--collect-order-info .zonos--collect-order-details-row>*{-ms-flex:1 1 150px;flex:1 1 150px}:host .zonos--collect-order-info .zonos--collect-order-details-column{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:8px}:host .zonos--collect-order-info .zonos--collect-order-shipping-info{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:0}";
+const ZonosCollectOrderDetailsStyle0 = zonosCollectOrderDetailsCss;
+
+const ZonosCollectOrderDetails = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.collapseClicked = createEvent(this, "collapseClicked", 7);
+        /**
+         * Whether or not the component is being rendered with mobile styles
+         */
+        this.mobile = true;
+        /**
+         * The landed cost id that is used to fetch the shipping address
+         */
+        this.landedCostId = '';
+        this.isMobile = false;
+        this.collapseState = this.collapsed;
+    }
+    handleCollapseChangeFromProp(collapsed) {
+        this.collapseState = collapsed;
+    }
+    handleCollapseChange(collapsed) {
+        this.collapseClicked.emit(collapsed);
+    }
+    handleWindowResize() {
+        this.isMobile = isCheckoutMobile(this.mobile);
+    }
+    componentWillLoad() {
+        this.handleWindowResize();
+    }
+    renderShippingAddress() {
+        if (collectStore.isFetchingShippingInfo) {
+            return (h("div", { class: "zonos--collect-order-details-column" }, h("zonos-text", { type: "smallHeader" }, h("zonos-skeleton", { skeletonWidth: "99px" })), h("div", { class: "zonos--collect-order-shipping-info" }, h("zonos-skeleton", { skeletonWidth: "152px" }), h("zonos-h-stack", { spacing: 8 }, h("zonos-skeleton", { skeletonWidth: "75px" }), h("zonos-skeleton", { skeletonWidth: "75px" })), h("zonos-skeleton", { skeletonWidth: "50px" }))));
+        }
+        const shippingAddress = collectStore.shippingAddress;
+        if (!shippingAddress) {
+            return null;
+        }
+        return (h("div", { class: "zonos--collect-order-details-column" }, h("zonos-text", { type: "smallHeader" }, translate('Shipping address')), h("div", { class: "zonos--collect-order-shipping-info" }, [
+            [shippingAddress.location.line1, shippingAddress.location.line2]
+                .filter(Boolean)
+                .join(' '),
+            [
+                shippingAddress.location.locality,
+                shippingAddress.location.administrativeAreaCode,
+                shippingAddress.location.postalCode,
+            ]
+                .filter(Boolean)
+                .join(', '),
+            shippingAddress.location.countryCode,
+        ].map(item => (h("zonos-text", null, item))))));
+    }
+    render() {
+        const renderCollapseIcon = () => {
+            if (this.collapseState) {
+                return (h("zonos-icon", { "aria-label": "Collapse expanded section", content: ChevronDownIcon, iconColor: "gray-1200" }));
+            }
+            return (h("zonos-icon", { "aria-label": "Expand collapsed section", content: ChevronUpIcon, iconColor: "gray-1200" }));
+        };
+        return (h(Host, { class: classes([
+                'zonos--collect-order-details zonos--elements',
+                this.isMobile && 'mobile',
+            ]) }, h("div", { class: "zonos--wrapper" }, h("button", { class: "zonos--order-details-header", onClick: () => {
+                this.collapseState = !this.collapseState;
+            }, type: "button" }, h("zonos-text", { type: "semiBoldLabel" }, translate('Order details')), renderCollapseIcon()), h("div", { class: "zonos--order-details-wrapper" }, h("zonos-collapse", { collapsed: this.collapseState }, h("div", { class: "zonos--collect-order-details-content" }, h("zonos-collect-cart-items", null), h("div", { class: "zonos--collect-order-info" }, h("div", { class: "zonos--collect-order-details-row" }, collectStore.amountTotalPaid !== null && (h("div", { class: "zonos--collect-order-details-column" }, h("zonos-text", { type: "smallHeader" }, translate('Total paid')), h("zonos-text", null, renderCheckoutCurrency({
+            amount: collectStore.amountTotalPaid || 0,
+            isForeign: true,
+        })))), collectStore.originCompanyName && (h("div", { class: "zonos--collect-order-details-column" }, h("zonos-text", { type: "smallHeader" }, translate('Ordered from')), h("zonos-text", null, collectStore.originCompanyName || '')))), this.renderShippingAddress())))))));
+    }
+    static get assetsDirs() { return ["assets"]; }
+    static get watchers() { return {
+        "collapsed": ["handleCollapseChangeFromProp"],
+        "collapseState": ["handleCollapseChange"]
+    }; }
+};
+ZonosCollectOrderDetails.style = ZonosCollectOrderDetailsStyle0;
+
+const CheckmarkLineIcon = `<svg color="var(--zonos-elements-gray-1000)" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="var(--zonos-elements-gray-1000)" d="M15.342 10.21a.75.75 0 0 0-1.184-.92l-2.978 3.829-1.4-1.4a.75.75 0 1 0-1.06 1.061l1.8 1.8a1 1 0 0 0 1.496-.093l3.326-4.277Z"/><path fill="var(--zonos-elements-gray-1000)" fill-rule="evenodd" d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-6.5 8a6.5 6.5 0 1 1 13 0 6.5 6.5 0 0 1-13 0Z" clip-rule="evenodd"/></svg>`;
+
+const RemoveLineIcon = `<svg color="var(--zonos-elements-gray-1000)" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="var(--zonos-elements-gray-1000)" d="M14.475 10.586a.75.75 0 1 0-1.06-1.06L12 10.938l-1.414-1.414a.75.75 0 0 0-1.06 1.06L10.938 12l-1.414 1.414a.75.75 0 1 0 1.06 1.06L12 13.062l1.414 1.414a.75.75 0 0 0 1.06-1.06L13.062 12l1.414-1.414Z"/><path fill="var(--zonos-elements-gray-1000)" fill-rule="evenodd" d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-6.5 8a6.5 6.5 0 1 1 13 0 6.5 6.5 0 0 1-13 0Z" clip-rule="evenodd"/></svg>`;
+
+const zonosCollectPaymentCss = ".sc-zonos-collect-payment-h{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-collect-payment-h *.sc-zonos-collect-payment{font-family:var(--zonos--font-family, Inter), Inter}.sc-zonos-collect-payment-h img.sc-zonos-collect-payment{max-width:100%}.sc-zonos-collect-payment-h dl.sc-zonos-collect-payment,.sc-zonos-collect-payment-h dd.sc-zonos-collect-payment,.sc-zonos-collect-payment-h h1.sc-zonos-collect-payment,.sc-zonos-collect-payment-h h2.sc-zonos-collect-payment,.sc-zonos-collect-payment-h h3.sc-zonos-collect-payment,.sc-zonos-collect-payment-h h4.sc-zonos-collect-payment,.sc-zonos-collect-payment-h h5.sc-zonos-collect-payment,.sc-zonos-collect-payment-h h6.sc-zonos-collect-payment,.sc-zonos-collect-payment-h hr.sc-zonos-collect-payment,.sc-zonos-collect-payment-h figure.sc-zonos-collect-payment,.sc-zonos-collect-payment-h p.sc-zonos-collect-payment,.sc-zonos-collect-payment-h pre.sc-zonos-collect-payment{margin:0}.sc-zonos-collect-payment-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-collect-payment-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex:1;flex:1}.sc-zonos-collect-payment-h .zonos--title.sc-zonos-collect-payment{margin-bottom:24px}.sc-zonos-collect-payment-h .zonos--group.sc-zonos-collect-payment{margin-bottom:20px;overflow:auto;padding:5px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex:1;flex:1;-ms-scroll-chaining:none;overscroll-behavior:contain}.sc-zonos-collect-payment-h .zonos--group.sc-zonos-collect-payment::-webkit-scrollbar{width:10px}.sc-zonos-collect-payment-h .zonos--group.sc-zonos-collect-payment::-webkit-scrollbar-track{background:var(--zonos-elements-gray-50)}.sc-zonos-collect-payment-h .zonos--group.sc-zonos-collect-payment::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-collect-payment-h .zonos--group.sc-zonos-collect-payment::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-collect-payment-h .zonos--payment-error-banner.sc-zonos-collect-payment{margin-bottom:8px}.sc-zonos-collect-payment-h .zonos--error-banner.sc-zonos-collect-payment{margin-bottom:16px}.sc-zonos-collect-payment-h zonos-button.sc-zonos-collect-payment{-webkit-box-shadow:0 0 1px 0 var(--zonos-elements-gray-600);box-shadow:0 0 1px 0 var(--zonos-elements-gray-600)}.sc-zonos-collect-payment-h .zonos--pay-in-base-currency-btn.sc-zonos-collect-payment{-webkit-box-shadow:none;box-shadow:none}.sc-zonos-collect-payment-h .zonos--group-btn.sc-zonos-collect-payment{position:-webkit-sticky;position:sticky;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-direction:column;flex-direction:column;gap:12px;bottom:-5px;padding-top:12px;background:var(--zonos--primary-color, var(--zonos-elements-gray-0))}.sc-zonos-collect-payment-h .zonos--group-btn.sc-zonos-collect-payment zonos-text.sc-zonos-collect-payment{text-align:center}.sc-zonos-collect-payment-h .zonos--group-btn.sc-zonos-collect-payment zonos-button.sc-zonos-collect-payment{width:100%}.sc-zonos-collect-payment-h .zonos--test-cards.sc-zonos-collect-payment{margin-top:auto;padding-top:16px}";
+const ZonosCollectPaymentStyle0 = zonosCollectPaymentCss;
+
+const ZonosCollectPayment = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.continueClicked = createEvent(this, "continueClicked", 7);
+        this.paypalSessionFailed = createEvent(this, "paypalSessionFailed", 7);
+        this.paypalSessionDone = createEvent(this, "paypalSessionDone", 7);
+        this.storeUnsubscribeList = [];
+        /**
+         * Whether or not the continue button is loading
+         */
+        this.continueLoading = false;
+        /**
+         * Show error banner when the form is not complete, and user clicks on `Submit` button
+         * @default false
+         */
+        this.showErrorBanner = false;
+        /**
+         * Show payment error banner when the payment is failed
+         */
+        this.hasStripePaymentError = false;
+        /**
+         * Error message when the staging order creation is failed
+         */
+        this.stagingOrderCreateErrorMessage = '';
+        /**
+         * Internal state to handle continue loading
+         */
+        this.internalContinueLoading = this.continueLoading;
+        this.handleValidate = () => {
+            var _a;
+            return !!((_a = stripeStore.stripePaymentEventData) === null || _a === void 0 ? void 0 : _a.complete);
+        };
+        /**
+         * handler for continue button click
+         */
+        this.continueClickHandler = async ({ currencyCode, }) => {
+            var _a, _b;
+            if (!this.handleValidate()) {
+                // Attempt to get the value of the billing address element to validate the form
+                void ((_a = stripeStore.stripeBillingAddressElement) === null || _a === void 0 ? void 0 : _a.getValue());
+                this.showErrorBanner = true;
+                // Attempt to submit the form so the missing input error will be shown in Stripe
+                void ((_b = stripeStore.stripeElements) === null || _b === void 0 ? void 0 : _b.submit());
+                setTimeout(() => {
+                    var _a;
+                    (_a = this.ele.querySelector('zonos-banner')) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+                        behavior: 'smooth',
+                    });
+                }, 10);
+                return;
+            }
+            stripeStore.checkoutSettlementCurrency = currencyCode;
+            // submit google tag when the form is complete
+            submitGtag('zonos-checkout-payment-info');
+            this.continueClicked.emit();
+        };
+        this.copyCardToClipboard = async (cardNumber) => {
+            try {
+                await navigator.clipboard.writeText(cardNumber);
+            }
+            catch (_a) {
+                // Copy happens in the iframe and it's not allowed to copy to the clipboard
+                const hiddenTextarea = document.createElement('textarea');
+                hiddenTextarea.style.position = 'fixed';
+                hiddenTextarea.style.left = '-1000px';
+                hiddenTextarea.style.top = '-1000px';
+                hiddenTextarea.style.width = '1px';
+                hiddenTextarea.style.height = '1px';
+                hiddenTextarea.value = cardNumber;
+                hiddenTextarea.id = 'zonos-copy-card-number';
+                document.body.appendChild(hiddenTextarea);
+                hiddenTextarea.select();
+                // Have to use deprecated method execCommand because it's the only way to copy to the clipboard in the iframe
+                // eslint-disable-next-line deprecation/deprecation
+                document.execCommand('copy');
+                document.body.removeChild(hiddenTextarea);
+            }
+            window.Zonos.showNotification({
+                message: translate('Card number copied to clipboard'),
+                timeout: 4000,
+                type: 'success',
+            });
+        };
+        this.placeTestOrder = async () => {
+            this.internalContinueLoading = true;
+            const { errors } = await placeTestOrder();
+            if (errors.length) {
+                this.stagingOrderCreateErrorMessage =
+                    errors[0] || 'Failed to create staging order. Please try again.';
+                this.internalContinueLoading = false;
+                return;
+            }
+            this.internalContinueLoading = false;
+            // continue to the next step
+            cartStoreNextStep();
+        };
+    }
+    continueLoadingWatcher() {
+        this.internalContinueLoading = this.continueLoading;
+    }
+    stripePaymentErrorWatcher() {
+        if (this.hasStripePaymentError) {
+            setTimeout(() => {
+                var _a;
+                // scroll to the top of the page when the payment error is shown
+                (_a = this.ele.querySelector('zonos-banner')) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+                    behavior: 'smooth',
+                });
+            }, 50);
+        }
+    }
+    componentWillLoad() {
+        this.storeUnsubscribeList = [
+            cartStoreOnChange('currency', () => {
+                // start init paypal with the presentment currency when landed cost is fetched
+                void paypalInitScript({
+                    currency: cartStore.currency,
+                });
+            }),
+        ];
+        // start init paypal with the presentment currency when landed cost is fetched
+        void paypalInitScript({
+            currency: cartStore.currency,
+        });
+    }
+    disconnectedCallback() {
+        this.storeUnsubscribeList.forEach(unsubscribe => unsubscribe());
+    }
+    render() {
+        var _a;
+        this.hasStripePaymentError = stripeStore.hasPaymentError;
+        if (!stripeStore.stripeElements) {
+            return null;
+        }
+        if (!stripeStore.clientSecret) {
+            return null;
+        }
+        // start validate on typing after error banner is shown, and hide it if the form is complete
+        if (this.showErrorBanner) {
+            this.showErrorBanner = !this.handleValidate();
+        }
+        const isTestMode = getIsTestMode();
+        const isStagingMode = cartStore.isStagingMode || getIsStagingMode();
+        const isPaypalTabSelected = ((_a = stripeStore.stripePaymentEventData) === null || _a === void 0 ? void 0 : _a.value.type) === 'external_paypal';
+        const renderPayment = () => {
+            if (isStagingMode) {
+                // If in mobile, use the theme from the store since the UI is solely by theme
+                const theme = zonosStore.appearance.theme;
+                return (h(Fragment, null, this.stagingOrderCreateErrorMessage && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, this.stagingOrderCreateErrorMessage)), h("zonos-empty-state-payment", { emptyStateText: translate('No payment method needed for staging'), theme: theme }), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, loading: this.internalContinueLoading, onClick: () => {
+                        void this.placeTestOrder();
+                    }, size: "lg",
+                    // use primary type when on mobile mode
+                    variant: this.submitBtnType }, translate('Place test order')))));
+            }
+            if (stripeStore.isFetchingSession ||
+                collectStore.isFetchingShippingInfo) {
+                return null;
+            }
+            return (h(Fragment, null, this.showErrorBanner && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('Missing required fields. Make sure all fields are completed.'))), this.hasStripePaymentError && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, stripeStore.customErrorMessage ||
+                translate("We couldn't complete your payment. Please verify the payment details and try again."))), paypalStore.paypalErrorMessage && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, paypalStore.paypalErrorMessage)), h("zonos-payment", null), h("div", { class: "zonos--group-btn" }, !isPaypalTabSelected && (h(Fragment, null, h("zonos-button", { backgroundColor: this.submitBtnColor, bold: true, isDisabled: this.continueLoading &&
+                    stripeStore.checkoutSettlementCurrency === 'USD', loading: this.continueLoading &&
+                    stripeStore.checkoutSettlementCurrency !== 'USD', onClick: async () => {
+                    if (!cartStore.checkoutSession) {
+                        log('Checkout session is not found');
+                        return;
+                    }
+                    await this.continueClickHandler({
+                        currencyCode: cartStore.checkoutSession.subtotals
+                            .presentmentCurrencyCode,
+                    });
+                }, size: "lg",
+                // use primary type when on mobile mode
+                variant: this.submitBtnType }, translate('Pay [orderTotal]', {
+                orderTotal: renderCheckoutCurrency({
+                    amount: collectStore.amountDutyTaxFeeTotal || 0,
+                    isForeign: true,
+                }),
+            })), stripeStore.shouldRenderPayInUsdButton && (h("zonos-button", { class: "zonos--pay-in-base-currency-btn", isDisabled: this.continueLoading &&
+                    stripeStore.checkoutSettlementCurrency !== 'USD', loading: this.continueLoading &&
+                    stripeStore.checkoutSettlementCurrency === 'USD', onClick: async () => {
+                    await this.continueClickHandler({
+                        currencyCode: 'USD',
+                    });
+                }, size: "lg", variant: "subtle" }, translate('Click to pay in USD'))))), h("zonos-paypal-payment", { onPaypalSessionDone: ({ detail: { orderId } }) => {
+                    this.paypalSessionDone.emit(orderId);
+                }, onPaypalSessionFail: () => this.paypalSessionFailed.emit(), style: {
+                    display: isPaypalTabSelected ? 'block' : 'none',
+                } })), isTestMode && (h("zonos-card", { backgroundColor: "gray-100", borderRadius: 12, class: "zonos--test-cards" }, h("zonos-v-stack", { spacing: 16 }, h("div", null, h("zonos-text", { type: "semiBoldLabel" }, translate('Test cards')), h("zonos-text", { textColor: "gray-700" }, translate('Click to copy the card number. Use any future expiration date and three number CVC.'))), h("zonos-button", { icon: h("zonos-icon", { content: CheckmarkLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4242424242424242') }, translate('Success'), " (****4242)"), h("zonos-button", { icon: h("zonos-icon", { content: RemoveLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4000000000000002') }, translate('Failure'), " (****0002)")), h("zonos-notification", null)))));
+        };
+        return (h(Host, { class: "zonos--checkout-payment zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Payment method')), renderPayment())));
+    }
+    get ele() { return getElement(this); }
+    static get watchers() { return {
+        "continueLoading": ["continueLoadingWatcher"],
+        "hasStripePaymentError": ["stripePaymentErrorWatcher"]
+    }; }
+};
+ZonosCollectPayment.style = ZonosCollectPaymentStyle0;
+
+const renderFallback = ({ content, isLoading, skeletonHeight, skeletonWidth, }) => {
+    if (isLoading) {
+        return (h("zonos-skeleton", { skeletonHeight: skeletonHeight, skeletonWidth: skeletonWidth }));
+    }
+    return content;
+};
+
+const zonosCollectReviewCss = ":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:-webkit-sticky;position:sticky;top:0;background-color:var(--zonos-elements-gray-0);z-index:1}:host .zonos--total-pay{margin:8px 0 24px;display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;gap:48px}:host .zonos--total-pay zonos-text{-ms-flex-negative:0;flex-shrink:0}:host .zonos--total-pay::after{content:\"\";position:relative;height:1px;width:100%;background:var(--zonos-elements-gray-200)}:host(.mobile),:host(.tablet){display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:8px;padding:4px 0;background-color:transparent;position:relative}:host(.mobile) .zonos--total-pay,:host(.tablet) .zonos--total-pay{margin:0}";
+const ZonosCollectReviewStyle0 = zonosCollectReviewCss;
+
+const ZonosCollectReview = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Whether or not the component is being rendered with mobile styles
+         */
+        this.mobile = false;
+        /**
+         * Whether or not the component is being rendered with tablet styles
+         */
+        this.tablet = false;
+        /**
+         * Whether or not to show the collapse icon
+         * This is controled from the collapsed state of the zonos-collapse component
+         * to show the collapse icon
+         */
+        this.collapsed = false;
+        this.isMobile = false;
+        this.isTablet = false;
+        this.isLoading = true;
+    }
+    handleWindowResize() {
+        this.isMobile = isCollectMobile(this.mobile);
+        this.isTablet = isCollectTablet(this.tablet);
+    }
+    componentWillLoad() {
+        this.handleWindowResize();
+        // Wait for the data to load
+        setTimeout(() => {
+            this.isLoading = false;
+        }, 1000);
+    }
+    render() {
+        const titleTextColor = this.isMobile ? 'gray-1000' : 'gray-800';
+        return (h(Host, { key: '6432c5dd5afd628e33ba26385ecfecb470f1757e', class: classes([
+                'zonos--collect-review zonos--elements',
+                this.isMobile && 'mobile',
+                this.isTablet && 'tablet',
+            ]) }, h("div", { key: 'e4d113ff1268c36119e1f80164b6cfd702c67f75', class: "zonos--title" }, h("zonos-text", { key: 'aad9ad9b526ac65d97a88df516e8e7b34fc3d2b1', textColor: titleTextColor, type: 'semiBoldLabel' }, translate('Pay [organizationName]', {
+            organizationName: zonosStore.organizationName,
+        }))), h("div", { key: 'fcdaebc734a270742fbe21ff932550994e522ea6', class: "zonos--total-pay" }, renderFallback({
+            content: (h("zonos-text", { type: 'secondaryPageHeader' }, renderCheckoutCurrency({
+                amount: collectStore.amountDutyTaxFeeTotal || 0,
+                isForeign: false,
+            }))),
+            isLoading: collectStore.isFetchingShippingInfo,
+            skeletonHeight: '36px',
+            skeletonWidth: '150px',
+        }))));
+    }
+    static get assetsDirs() { return ["assets"]; }
+};
+ZonosCollectReview.style = ZonosCollectReviewStyle0;
+
+const zonosCollectSubtotalCss = ":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:-webkit-sticky;position:sticky;bottom:60px}:host .zonos--collect-table{width:100%;border:none;border-collapse:collapse;overflow:auto;font-size:var(--zonos-elements-font-size-base)}:host .zonos--collect-table .zonos--column{padding:8px 8px;vertical-align:top}:host .zonos--collect-table .zonos--column:last-child{text-align:right;padding-right:0}:host .zonos--collect-table .zonos--column:first-child{width:60px;max-width:100px}:host .zonos--title-with-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:8px}:host .zonos--collect-subtotal-price{text-align:right}:host .zonos--collect-subtotal-price zonos-text{white-space:nowrap}:host .zonos--collect-total .zonos--column{padding:16px 0}:host .zonos--collect-total-subtotal .zonos--collect-subtotal-title,:host .zonos--collect-total-subtotal .zonos--collect-subtotal-price{border-bottom:1px solid var(--zonos-elements-gray-200)}:host .zonos--collect-subtotal-price zonos-text,:host .zonos--collect-pay-total zonos-text{white-space:nowrap}";
+const ZonosCollectSubtotalStyle0 = zonosCollectSubtotalCss;
+
+const ZonosCollectSubtotal = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.storeUnsubscribeList = [];
+        this.subtotals = {};
+        this.initSubtotalData = () => {
+            var _a;
+            const cartLandedCostSubtotal = (_a = cartStore.checkoutSession) === null || _a === void 0 ? void 0 : _a.subtotals;
+            if (!cartLandedCostSubtotal) {
+                return;
+            }
+            // Some countries have same name for duties, taxes and fees in their language. If that happens, we need to group their values by name
+            const translatedDutyLabel = translate('Duties');
+            const translatedTaxLabel = translate('Taxes');
+            const translatedFeeLabel = translate('Fees');
+            const subtotalMap = {
+                [translatedDutyLabel]: 0,
+                [translatedFeeLabel]: 0,
+                [translatedTaxLabel]: 0,
+            };
+            const duties = cartLandedCostSubtotal.duties;
+            const taxes = cartLandedCostSubtotal.taxes;
+            const fees = cartLandedCostSubtotal.fees;
+            if (duties !== undefined) {
+                subtotalMap[translatedDutyLabel] || (subtotalMap[translatedDutyLabel] = 0);
+                subtotalMap[translatedDutyLabel] += duties;
+            }
+            if (taxes !== undefined) {
+                subtotalMap[translatedTaxLabel] || (subtotalMap[translatedTaxLabel] = 0);
+                subtotalMap[translatedTaxLabel] += taxes;
+            }
+            if (fees !== undefined) {
+                subtotalMap[translatedFeeLabel] || (subtotalMap[translatedFeeLabel] = 0);
+                subtotalMap[translatedFeeLabel] += fees;
+            }
+            this.subtotals = subtotalMap;
+        };
+    }
+    disconnectedCallback() {
+        this.storeUnsubscribeList.forEach(unsubscribe => unsubscribe());
+    }
+    componentWillLoad() {
+        this.storeUnsubscribeList = [
+            cartStoreOnChange('checkoutSession', this.initSubtotalData),
+            translationStoreOnChange('translatedChunks', this.initSubtotalData),
+        ];
+    }
+    render() {
+        this.initSubtotalData();
+        return (h(Host, { key: 'ab687a6e1ec67f6609081036a75e9905ff34c6b1', class: "zonos--collect-subtotal zonos--elements" }, h("table", { key: '303b8c49983e9f7aea4d31400fed53d858eb078d', class: "zonos--collect-table" }, !!this.subtotals[translate('Duties')] && (h("tr", { key: 'a60fa4f1f1afacef0144b86c054f44572576f7af', class: "zonos--row zonos--collect-duty" }, h("td", { key: 'aeaf798e26bbd482196d7208eb05657a1d15dad8', class: "zonos--column zonos--collect-subtotal-title" }, h("zonos-text", { key: '835d817709ae3b7e2d888d618e0856fb2e637e4d', type: "semiBoldLabel" }, translate('Duties'))), h("td", { key: '5bb47a115ea61fa897a3f48bbd10c5f78af3703e', class: "zonos--column" }), h("td", { key: '32632c4beb855ca687c615f5e6c63c82e2e05c80', class: "zonos--column zonos--collect-subtotal-price" }, renderFallback({
+            content: (h("zonos-text", { type: "label" }, renderCheckoutCurrency({
+                amount: this.subtotals[translate('Duties')] || 0,
+                isForeign: true,
+            }))),
+            isLoading: collectStore.isFetchingShippingInfo,
+            skeletonHeight: '14px',
+            skeletonWidth: '150px',
+        })))), !!this.subtotals[translate('Taxes')] && (h("tr", { key: '055bb237dafaea8de18b127641c8fd7e1ece563b', class: "zonos--row zonos--collect-tax" }, h("td", { key: '1e73b140c2c9090ccfb91ce4efca483e8fb56e9e', class: "zonos--column zonos--collect-subtotal-title" }, h("zonos-text", { key: 'a3375ecd77460c78c7c5f59bf7b9b8612cd53e41', type: "semiBoldLabel" }, translate('Taxes'))), h("td", { key: '20685646be29873967c2f335c775046068248ad3', class: "zonos--column" }), h("td", { key: '2e2c6af2c1a7840df03351178ddf3107fcc36494', class: "zonos--column zonos--collect-subtotal-price" }, renderFallback({
+            content: (h("zonos-text", { type: "label" }, renderCheckoutCurrency({
+                amount: this.subtotals[translate('Taxes')] || 0,
+                isForeign: true,
+            }))),
+            isLoading: collectStore.isFetchingShippingInfo,
+            skeletonHeight: '14px',
+            skeletonWidth: '150px',
+        })))), !!this.subtotals[translate('Fees')] && (h("tr", { key: '8157aba5c6a23680b0bc681adc127747f01a2973', class: "zonos--row zonos--collect-fee" }, h("td", { key: '8266654f9e65003f297222bb935013a8b9b3b430', class: "zonos--column zonos--collect-subtotal-title" }, h("zonos-text", { key: '8399000a5f61e4737764b68b89799b409dce6034', type: "semiBoldLabel" }, translate('Fees'))), h("td", { key: '2a9763f2401967ea1bdfa2c17514d18e2a4e0db6', class: "zonos--column" }), h("td", { key: 'ac2f275312c2ba69888e6e57dde8b4b451839b86', class: "zonos--column zonos--collect-subtotal-price" }, renderFallback({
+            content: (h("zonos-text", { type: "label" }, renderCheckoutCurrency({
+                amount: this.subtotals[translate('Fees')] || 0,
+                isForeign: true,
+            }))),
+            isLoading: collectStore.isFetchingShippingInfo,
+            skeletonHeight: '14px',
+            skeletonWidth: '150px',
+        })))), h("tr", { key: 'a293d1b9342251f7326c1ac68e2bab83eae2ed80', class: "zonos--row zonos--collect-spacing" }, h("td", { key: 'c136b1b807f32dc21c131326d70500d2e2c64efe', class: "zonos--column", colSpan: 3 })), h("tr", { key: '59747101f1a9ef7c8fad60e90ea5b8c31015438c', class: "zonos--row zonos--collect-total zonos--collect-total-subtotal" }, h("td", { key: '96d201ba6f3e571adac265127229c94cdc96be2a', class: "zonos--column" }), h("td", { key: 'f2f4cb751e35fc0ebaa803659f26a2314d8bf639', class: "zonos--column zonos--collect-subtotal-title" }, h("zonos-text", { key: 'b4f89ea1e523af8a5aead4ef007a6f0dc7e7f441', type: "label" }, translate('Subtotal'))), h("td", { key: '28b6aea6363b2bef1d072ad77f409ae77976305c', class: "zonos--column zonos--collect-subtotal-price" }, renderFallback({
+            content: (h("zonos-text", { type: "label" }, renderCheckoutCurrency({
+                amount: collectStore.amountDutyTaxFeeTotal || 0,
+                isForeign: true,
+            }))),
+            isLoading: collectStore.isFetchingShippingInfo,
+            skeletonHeight: '14px',
+            skeletonWidth: '150px',
+        }))), h("tr", { key: 'f0072cdd200e8483421265af39a90fb655fb2ef0', class: "zonos--row zonos--collect-total" }, h("td", { key: '88a007048d33c919a6c5f87cf7cd071f83e7448b', class: "zonos--column" }), h("td", { key: '24bba9e9b81ff443dd5ca4832c3169e3605a93b8', class: "zonos--column zonos--collect-subtotal-title" }, h("zonos-text", { key: '594d4e96bec3a2153f6622c6842970ebee5bb463', type: "semiBoldLabel" }, translate('Customs fees total'))), h("td", { key: 'b3ffd6dcae747dd2ed68ae16fb60d9655f7669dc', class: "zonos--column zonos--collect-subtotal-price" }, renderFallback({
+            content: (h("zonos-text", { type: "semiBoldLabel" }, renderCheckoutCurrency({
+                amount: collectStore.amountDutyTaxFeeTotal || 0,
+                isForeign: true,
+            }))),
+            isLoading: collectStore.isFetchingShippingInfo,
+            skeletonHeight: '14px',
+            skeletonWidth: '150px',
+        }))))));
+    }
+    static get assetsDirs() { return ["assets"]; }
+};
+ZonosCollectSubtotal.style = ZonosCollectSubtotalStyle0;
+
+export { ZonosCollectFinish as zonos_collect_finish, ZonosCollectFooter as zonos_collect_footer, ZonosCollectOrderDetails as zonos_collect_order_details, ZonosCollectPayment as zonos_collect_payment, ZonosCollectReview as zonos_collect_review, ZonosCollectSubtotal as zonos_collect_subtotal };