@zonos/elements 1.3.217 → 1.3.219

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

@@ -0,0 +1,464 @@
+import { r as registerInstance, h, H as Host, F as Fragment } from './index-55a03023.js';
+import { c as stripeStore, i as initStripeElements, d as stripeStoreRetrievePayment, e as cartStore, o as cartStoreUpdateToErrorState, f as cartStoreUpdateItems, k as stripeStoreInitCheckoutSession, l as stripeStoreGetPaymentIntent, u as stripeStoreUpdateCheckoutSessionBaseCurrency, w as stripeStoreConfirmPayment, A as stripeStoreOnChange, y as stripeStoreReset, g as cartStoreReset } from './cart-acf4ebf5.js';
+import { i as isCollectMobile, a as isCollectTablet, c as collectStoreUpdateSelectedShippingOption, b as collectStoreInitShippingInfo, d as collectStoreAsyncAddressUpdate, e as collectStore } from './isCollectMobileTablet-b72b81c5.js';
+import { p as paypalStoreHasPaypalEnabled, a as paypalStore } from './paypal-2fa930eb.js';
+import { s as storageStore, c as localizationStoreOnChange, d as currencyFormat, l as localizationStore } from './localization-8646f526.js';
+import { t as translate } from './translationStore-c9743292.js';
+import { z as zonosStore } from './zonosStore-c456b933.js';
+import { b as buildCartItemsByTempCart } from './buildCartItemsByTempCart-c4488f73.js';
+import { h as handleFetch, l as log, s as sendErrorLog, b as logError, g as getIsTestMode } from './handleFetch-99218189.js';
+import { c as classes } from './classes-0d95c529.js';
+import { l as languages } from './ILanguage-cd6acb72.js';
+import './isDarkColor-1f58b6be.js';
+import './getBorderRadius-87593ff4.js';
+import './VarianceTest-fef2d958.js';
+
+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 zonosCollectCss = ".sc-zonos-collect-h{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-collect-h *.sc-zonos-collect{font-family:var(--zonos--font-family, Inter), Inter}.sc-zonos-collect-h img.sc-zonos-collect{max-width:100%}.sc-zonos-collect-h dl.sc-zonos-collect,.sc-zonos-collect-h dd.sc-zonos-collect,.sc-zonos-collect-h h1.sc-zonos-collect,.sc-zonos-collect-h h2.sc-zonos-collect,.sc-zonos-collect-h h3.sc-zonos-collect,.sc-zonos-collect-h h4.sc-zonos-collect,.sc-zonos-collect-h h5.sc-zonos-collect,.sc-zonos-collect-h h6.sc-zonos-collect,.sc-zonos-collect-h hr.sc-zonos-collect,.sc-zonos-collect-h figure.sc-zonos-collect,.sc-zonos-collect-h p.sc-zonos-collect,.sc-zonos-collect-h pre.sc-zonos-collect{margin:0}.sc-zonos-collect-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-collect-h{z-index:2147483647;position:fixed;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;top:0;left:0;width:100%;height:100%;-ms-flex-align:center;align-items:center;background-color:var(--zonos-elements-gray-0)}.sc-zonos-collect-h *.sc-zonos-collect{-ms-scroll-chaining:none;overscroll-behavior:contain}.sc-zonos-collect-h *.sc-zonos-collect::-webkit-scrollbar{width:10px}.sc-zonos-collect-h *.sc-zonos-collect::-webkit-scrollbar-track{background:var(--zonos-elements-gray-50)}.sc-zonos-collect-h *.sc-zonos-collect::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-collect-h *.sc-zonos-collect::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-collect-h .zonos--content.sc-zonos-collect{display:-ms-flexbox;display:flex;height:100%;overflow:hidden;width:100%;-ms-flex-pack:center;justify-content:center}.sc-zonos-collect-h .zonos--content.sc-zonos-collect .zonos--left.sc-zonos-collect,.sc-zonos-collect-h .zonos--content.sc-zonos-collect .zonos--right.sc-zonos-collect{-ms-flex:1;flex:1;padding:56px 80px 60px;max-width:800px}.sc-zonos-collect-h .zonos--content.sc-zonos-collect .zonos--left.sc-zonos-collect{background-color:var(--zonos--primary-color, var(--zonos-elements-gray-0));border-right:1px solid var(--zonos-elements-gray-200);overflow:auto;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:32px}.sc-zonos-collect-h .zonos--content.sc-zonos-collect .zonos--right.sc-zonos-collect{background-color:var(--zonos-elements-gray-0)}.sc-zonos-collect-h .zonos--content.sc-zonos-collect .zonos--done.sc-zonos-collect{width:100%;max-width:1400px;max-height:100%;height:calc(100% - 100px);overflow:hidden;-ms-flex-direction:column;flex-direction:column;background-color:var(--zonos-elements-gray-0);-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:24px;padding-bottom:50px}.sc-zonos-collect-h .zonos--content.sc-zonos-collect .zonos--done.sc-zonos-collect .zonos--header.sc-zonos-collect{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;width:100%}.sc-zonos-collect-h .zonos--content.sc-zonos-collect .zonos--done.sc-zonos-collect .zonos--logo.sc-zonos-collect{margin-bottom:0}.sc-zonos-collect-h .zonos--content.sc-zonos-collect .zonos--done.sc-zonos-collect zonos-checkout-finish.sc-zonos-collect{-ms-flex:1;flex:1}.sc-zonos-collect-h .zonos--header-title.sc-zonos-collect,.sc-zonos-collect-h .zonos--header-wrapper.sc-zonos-collect{max-width:800px}.sc-zonos-collect-h .zonos--left.sc-zonos-collect{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative}.sc-zonos-collect-h .zonos--left.sc-zonos-collect .zonos--wrapper.sc-zonos-collect{padding:0 8px 8px}.sc-zonos-collect-h .zonos--left.sc-zonos-collect .zonos--payment-error-banner.sc-zonos-collect{margin-top:24px}.sc-zonos-collect-h .zonos--right.sc-zonos-collect{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-collect-h .zonos--right.sc-zonos-collect .zonos--order-details-container.sc-zonos-collect{overflow:hidden}.sc-zonos-collect-h .zonos--wrapper.sc-zonos-collect{overflow:auto;max-height:100%;position:relative}.sc-zonos-collect-h .flex--wrapper.sc-zonos-collect{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-height:100%;margin-top:32px}.sc-zonos-collect-h .zonos--logo-wrapper.sc-zonos-collect{display:-ms-flexbox;display:flex;gap:16px;-ms-flex-align:center;align-items:center;-ms-flex:1;flex:1}.sc-zonos-collect-h .zonos--logo-wrapper.sc-zonos-collect>*.sc-zonos-collect{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.sc-zonos-collect-h .zonos--header-right.sc-zonos-collect{display:none}.sc-zonos-collect-h .zonos--logo.sc-zonos-collect{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.sc-zonos-collect-h .zonos--logo.sc-zonos-collect img.sc-zonos-collect{max-height:72px}.sc-zonos-collect-h .zonos--collect-container.sc-zonos-collect{overflow:visible}.mobile.sc-zonos-collect-h,.tablet.sc-zonos-collect-h{min-width:auto}.mobile.sc-zonos-collect-h .zonos--content.sc-zonos-collect,.tablet.sc-zonos-collect-h .zonos--content.sc-zonos-collect{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:auto;border-radius:0;max-height:100%;height:100%;border:0}.mobile.sc-zonos-collect-h .zonos--content.sc-zonos-collect .zonos--left.sc-zonos-collect,.mobile.sc-zonos-collect-h .zonos--content.sc-zonos-collect .zonos--right.sc-zonos-collect,.tablet.sc-zonos-collect-h .zonos--content.sc-zonos-collect .zonos--left.sc-zonos-collect,.tablet.sc-zonos-collect-h .zonos--content.sc-zonos-collect .zonos--right.sc-zonos-collect{padding:12px;padding-bottom:76px}@media (max-width: 768px){.mobile.sc-zonos-collect-h .zonos--content.sc-zonos-collect .zonos--left.sc-zonos-collect,.mobile.sc-zonos-collect-h .zonos--content.sc-zonos-collect .zonos--right.sc-zonos-collect,.tablet.sc-zonos-collect-h .zonos--content.sc-zonos-collect .zonos--left.sc-zonos-collect,.tablet.sc-zonos-collect-h .zonos--content.sc-zonos-collect .zonos--right.sc-zonos-collect{padding-bottom:0}}.mobile.sc-zonos-collect-h .zonos--content.sc-zonos-collect .zonos--left.sc-zonos-collect,.tablet.sc-zonos-collect-h .zonos--content.sc-zonos-collect .zonos--left.sc-zonos-collect{-ms-flex-order:2;order:2;border-right:none}.mobile.sc-zonos-collect-h .zonos--content.sc-zonos-collect .zonos--right.sc-zonos-collect,.tablet.sc-zonos-collect-h .zonos--content.sc-zonos-collect .zonos--right.sc-zonos-collect{-ms-flex-order:1;order:1;padding-top:16px}.mobile.sc-zonos-collect-h .zonos--content.sc-zonos-collect .zonos--right.sc-zonos-collect .zonos--wrapper.sc-zonos-collect,.tablet.sc-zonos-collect-h .zonos--content.sc-zonos-collect .zonos--right.sc-zonos-collect .zonos--wrapper.sc-zonos-collect{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border:var(--zonos-elements-border);border-radius:var(--zonos--border-radius, var(--zonos-elements-radius-10));background-color:var(--zonos-elements-gray-50);padding:12px;margin-top:32px}.mobile.sc-zonos-collect-h .zonos--content.sc-zonos-collect .zonos--right.sc-zonos-collect .zonos--review.sc-zonos-collect,.tablet.sc-zonos-collect-h .zonos--content.sc-zonos-collect .zonos--right.sc-zonos-collect .zonos--review.sc-zonos-collect{margin-bottom:0}.mobile.sc-zonos-collect-h .zonos--content.sc-zonos-collect .zonos--right.sc-zonos-collect .zonos--cart-items.sc-zonos-collect,.tablet.sc-zonos-collect-h .zonos--content.sc-zonos-collect .zonos--right.sc-zonos-collect .zonos--cart-items.sc-zonos-collect{margin-top:8px}.mobile.sc-zonos-collect-h .zonos--content.sc-zonos-collect zonos-checkout-footer.sc-zonos-collect,.tablet.sc-zonos-collect-h .zonos--content.sc-zonos-collect zonos-checkout-footer.sc-zonos-collect{-ms-flex-order:3;order:3}.mobile.sc-zonos-collect-h .zonos--content.sc-zonos-collect .zonos--wrapper.sc-zonos-collect,.tablet.sc-zonos-collect-h .zonos--content.sc-zonos-collect .zonos--wrapper.sc-zonos-collect{max-height:100%}.mobile.sc-zonos-collect-h .zonos--content.sc-zonos-collect .zonos--footer.sc-zonos-collect,.tablet.sc-zonos-collect-h .zonos--content.sc-zonos-collect .zonos--footer.sc-zonos-collect{-ms-flex-order:3;order:3}.mobile.sc-zonos-collect-h .zonos--content.sc-zonos-collect .zonos--done.sc-zonos-collect,.tablet.sc-zonos-collect-h .zonos--content.sc-zonos-collect .zonos--done.sc-zonos-collect{width:auto}.mobile.sc-zonos-collect-h .zonos--cart-subtotal.sc-zonos-collect,.tablet.sc-zonos-collect-h .zonos--cart-subtotal.sc-zonos-collect{margin:0}.mobile.sc-zonos-collect-h .zonos--header-wrapper.sc-zonos-collect,.tablet.sc-zonos-collect-h .zonos--header-wrapper.sc-zonos-collect{position:-webkit-sticky;position:sticky;top:0;width:100%;padding:16px;background-color:var(--zonos-elements-gray-0);z-index:3}.mobile.sc-zonos-collect-h .zonos--header-title.sc-zonos-collect,.mobile.sc-zonos-collect-h .zonos--header-wrapper.sc-zonos-collect,.tablet.sc-zonos-collect-h .zonos--header-title.sc-zonos-collect,.tablet.sc-zonos-collect-h .zonos--header-wrapper.sc-zonos-collect{max-width:800px;padding:0 16px}.mobile.sc-zonos-collect-h .zonos--content.sc-zonos-collect,.tablet.sc-zonos-collect-h .zonos--content.sc-zonos-collect{overflow:auto;-ms-flex-pack:unset;justify-content:unset;-ms-flex-align:center;align-items:center;gap:24px}.mobile.sc-zonos-collect-h .zonos--content.sc-zonos-collect .zonos--left.sc-zonos-collect,.mobile.sc-zonos-collect-h .zonos--content.sc-zonos-collect .zonos--right.sc-zonos-collect,.tablet.sc-zonos-collect-h .zonos--content.sc-zonos-collect .zonos--left.sc-zonos-collect,.tablet.sc-zonos-collect-h .zonos--content.sc-zonos-collect .zonos--right.sc-zonos-collect{overflow:visible;width:100%}.mobile.sc-zonos-collect-h .zonos--content.sc-zonos-collect .zonos--right.sc-zonos-collect,.tablet.sc-zonos-collect-h .zonos--content.sc-zonos-collect .zonos--right.sc-zonos-collect{gap:32px}.mobile.sc-zonos-collect-h .flex--wrapper.sc-zonos-collect,.tablet.sc-zonos-collect-h .flex--wrapper.sc-zonos-collect{margin-top:0}.mobile.sc-zonos-collect-h zonos-collect-footer.sc-zonos-collect,.tablet.sc-zonos-collect-h zonos-collect-footer.sc-zonos-collect{-ms-flex-order:3;order:3;left:0}.tablet.sc-zonos-collect-h .zonos--header-wrapper.sc-zonos-collect{padding-top:56px;top:-56px}.mobile.sc-zonos-collect-h .zonos--content.sc-zonos-collect .zonos--header-right.sc-zonos-collect{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.mobile.sc-zonos-collect-h .zonos--header-wrapper.sc-zonos-collect{padding-top:28px;top:-28px}.mobile.sc-zonos-collect-h .zonos--collect-language-dialog.sc-zonos-collect{position:fixed;left:0;right:0;bottom:0;-webkit-transform-origin:bottom center;transform-origin:bottom center;width:100vw;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);max-width:100vw;max-height:500px;z-index:2147483011;overflow:auto;-webkit-transform:scale(0);transform:scale(0);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}.mobile.sc-zonos-collect-h .zonos--collect-language-dialog.sc-zonos-collect::-webkit-scrollbar{width:10px}.mobile.sc-zonos-collect-h .zonos--collect-language-dialog.sc-zonos-collect::-webkit-scrollbar-track{background:var(--zonos-elements-gray-50)}.mobile.sc-zonos-collect-h .zonos--collect-language-dialog.sc-zonos-collect::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.mobile.sc-zonos-collect-h .zonos--collect-language-dialog.sc-zonos-collect::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.mobile.sc-zonos-collect-h .zonos--collect-language-dialog.sc-zonos-collect::-webkit-scrollbar-track{border-top-right-radius:var(--zonos-elements-radius-12);border-bottom-right-radius:var(--zonos-elements-radius-12)}.mobile.sc-zonos-collect-h .zonos--collect-language-dialog.zonos--collect-language-dialog-open.sc-zonos-collect{opacity:1;-webkit-transform:scale(1);transform:scale(1)}.iframed.sc-zonos-collect-h .zonos--content.sc-zonos-collect{-ms-scroll-chaining:chained;overscroll-behavior:auto}";
+const ZonosCollectStyle0 = zonosCollectCss;
+
+const ZonosCollect = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.storeUnsubscribeList = [];
+        /**
+         * Listener for locale change in localization store
+         */
+        this.onChangeLocaleListener = () => { };
+        /**
+         * Flag to determine if the checkout is on mobile
+         */
+        this.mobile = false;
+        /**
+         * Whether or not the component is being rendered with tablet styles
+         */
+        this.tablet = false;
+        /**
+         * The stripe instance
+         */
+        this.stripe = window.Zonos.stripe;
+        /**
+         * Whether or not the language dialog is open
+         */
+        this.showLanguageDialogMobile = false;
+        /**
+         * Whether or not the submit button is loading in `step` component
+         */
+        this.submitLoading = false;
+        // default to collapse the review
+        this.collapseReview = true;
+        this.isMobile = false;
+        this.isTablet = false;
+        // @State() isCollect = window.Zonos.isCollect;
+        this.isOverlayLoading = true;
+        /**
+         * Confirm dialog open state
+         */
+        this.isCartCollected = false;
+        /**
+         * Cart expired state to show the cart expired dialog
+         */
+        this.isCartExpired = false;
+        /**
+         * Pay in USD confirm dialog open state
+         */
+        this.payInUsdConfirmDialogOpen = false;
+        /**
+         * Error message from onInventoryCheck callback
+         */
+        this.inventoryCheckErrorMessage = null;
+        /**
+         * Confirmation id for collect finish component
+         */
+        this.confirmationId = null;
+        /**
+         * Client secret value
+         */
+        this.clientSecret = stripeStore.clientSecret;
+        /**
+         * Client secret value of customer session (use to load saved payment method and render saved consent)
+         */
+        this.stripeCustomerSessionClientSecret = stripeStore.stripeCustomerSessionClientSecret;
+        this.getBaseCurrencySettlementInfo = () => {
+            const selectedLandedCost = cartStore.selectedLandedCost;
+            if (!selectedLandedCost) {
+                return null;
+            }
+            const { landedCost: { amountSubtotals }, } = selectedLandedCost;
+            if (!amountSubtotals) {
+                return null;
+            }
+            const total = (amountSubtotals.discounts || 0) +
+                amountSubtotals.items +
+                amountSubtotals.landedCostTotal +
+                amountSubtotals.shipping;
+            return {
+                settlementAmount: total,
+            };
+        };
+        this.applyStripeTheme = async () => {
+            const theme = zonosStore.appearance.theme;
+            await initStripeElements({
+                // only override theme or theme from appearance if it's mobile
+                overrideTheme: this.isMobile ? theme : undefined,
+                paypalEnabled: paypalStoreHasPaypalEnabled(),
+            });
+        };
+        this.fetchCheckoutSession = async (checkoutSessionId) => {
+            const { json } = await handleFetch(`/api/zonos-elements/collect/get-checkout-session`, {
+                body: {
+                    checkoutSessionId,
+                },
+                method: 'POST',
+            });
+            return json;
+        };
+        /**
+         * Check if stripe payment intent is succeeded or in a good state to move forward
+         */
+        this.checkStripePaymentIntentStatus = async () => {
+            var _a;
+            const isCartDataAvailable = !!window.Zonos.cartData;
+            const searchParams = new URL(window.location.href).searchParams;
+            const stripeClientSecret = searchParams.get('payment_intent_client_secret');
+            const zonosCheckoutSessionId = searchParams.get('zonosCheckoutSessionId');
+            log('Payment intent exist, checking stripe payment intent status');
+            // Allow to proceed to order if there's no stripe client secret and cart data is available
+            if (!stripeClientSecret) {
+                log('No stripe client secret found in the URL, proceed to order if cart data is available');
+                return { shouldAllowOrder: isCartDataAvailable };
+            }
+            const { error, status } = await stripeStoreRetrievePayment({
+                clientSecret: stripeClientSecret,
+            });
+            // check if this is redirect after order
+            const isJustRedirected = new URLSearchParams(window.location.search).get('redirect_status');
+            // If just redirected from Payment provider, show the success screen or error screen based on the status
+            if (isJustRedirected && zonosCheckoutSessionId) {
+                if (!error) {
+                    log('Payment intent is succeeded or in a good state to move forward, show success screen');
+                }
+                else {
+                    log('Payment intent failed, show status from error');
+                }
+                // Attempt to retrieve the checkout session
+                const json = await this.fetchCheckoutSession(zonosCheckoutSessionId);
+                this.confirmationId = ((_a = json === null || json === void 0 ? void 0 : json.checkoutSession.landedCost) === null || _a === void 0 ? void 0 : _a.shortId) || null;
+                storageStore.checkoutSessionId = zonosCheckoutSessionId;
+                stripeStore.clientSecret = stripeClientSecret;
+                void this.setToFinishStep(status);
+                return { shouldAllowOrder: false };
+            }
+            if (!isCartDataAvailable) {
+                log('Cart data is not available, only check payment intent status, skip order.');
+                return { shouldAllowOrder: false };
+            }
+            log('Payment intent is not succeeded, proceed to order');
+            return { shouldAllowOrder: true };
+        };
+    }
+    /**
+     * Listen to resize event to update the isMobile state
+     */
+    resizeListener() {
+        this.isMobile = isCollectMobile(this.mobile);
+        this.isTablet = isCollectTablet(this.tablet);
+    }
+    /**
+     * For storybook to set to finish step, this is to trigger in the story for zonos-checkout-finish
+     */
+    async setToFinishStep(forcePaymentStatus) {
+        stripeStore.stripe = window.Zonos.stripe;
+        cartStore.step = 'finish';
+        this.storybookPaymentStatusOverride = forcePaymentStatus;
+        this.isOverlayLoading = false;
+    }
+    async initCollectCart() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        // Should not happen since we will throw error way earlier if cartData is not available
+        if (!window.Zonos.cartData) {
+            return;
+        }
+        // change currency to the currency of the cart
+        const cartCurrency = (_b = (_a = window.Zonos.cartData) === null || _a === void 0 ? void 0 : _a.items[0]) === null || _b === void 0 ? void 0 : _b.currencyCode;
+        if (cartCurrency) {
+            cartStore.currency = cartCurrency;
+        }
+        const cartCheckoutSessionId = (_d = (_c = window.Zonos.cartData) === null || _c === void 0 ? void 0 : _c.references) === null || _d === void 0 ? void 0 : _d.checkoutSessionId;
+        const cartLandedCostId = (_f = (_e = window.Zonos.cartData) === null || _e === void 0 ? void 0 : _e.references) === null || _f === void 0 ? void 0 : _f.landedCostId;
+        if (!cartLandedCostId) {
+            cartStoreUpdateToErrorState({
+                messages: [
+                    translate('Session does not have valid landed cost. Please contact [organizationName] for assistance.', {
+                        organizationName: zonosStore.organizationName,
+                    }),
+                ],
+                title: translate('Invalid session'),
+            });
+            return;
+        }
+        // Override checkout session id for collect if we found one in the cart reference
+        if (cartCheckoutSessionId) {
+            log('Setting checkout session id from cart reference', 'info', cartCheckoutSessionId);
+            storageStore.checkoutSessionId = cartCheckoutSessionId;
+        }
+        else {
+            log('Clear checkout session id from storage so we start from a fresh session for the collect cart');
+            storageStore.checkoutSessionId = null;
+        }
+        const { shouldAllowOrder } = await this.checkStripePaymentIntentStatus();
+        if (!shouldAllowOrder) {
+            return;
+        }
+        try {
+            const { adjustments, cartItems } = buildCartItemsByTempCart(window.Zonos.cartData);
+            await cartStoreUpdateItems({
+                adjustments,
+                cartItems,
+                landedCostId: cartLandedCostId,
+                // No need to init session on failure since we will always create a new one if there is no checkout session id in the cart references
+                shouldInitSessionOnFailure: false,
+            });
+            // if checkoutSessionId is not available, request a new one, only if no checkout session id is found in cart references
+            if (!storageStore.checkoutSessionId && !cartCheckoutSessionId) {
+                const success = await stripeStoreInitCheckoutSession();
+                log(`stripeStoreInitCheckoutSession: ${success}`);
+                if (!success) {
+                    throw new Error('Failed to initialize checkout session! The cart might be created with LIVE Collect quote but being used with sandbox credential');
+                }
+            }
+            // If there is checkout session in collect cart references and we failed to retrieve it from `update-checkout-session`, it most likely means the cart is already completed / invalid landed cost
+            if ((!cartStore.checkoutSession ||
+                ((_g = cartStore.checkoutSession) === null || _g === void 0 ? void 0 : _g.completedAt)) &&
+                cartCheckoutSessionId) {
+                // Attempt to retrieve the checkout session
+                const json = await this.fetchCheckoutSession(cartCheckoutSessionId);
+                // Some merchants use landed cost id as the confirmation id
+                this.confirmationId = ((_h = json === null || json === void 0 ? void 0 : json.checkoutSession.landedCost) === null || _h === void 0 ? void 0 : _h.shortId) || null;
+                // If checkout session is already completed, set to finish step
+                if (!!(json === null || json === void 0 ? void 0 : json.checkoutSession.completedAt)) {
+                    void this.setToFinishStep('succeeded');
+                    return;
+                }
+                if (json === null || json === void 0 ? void 0 : json.checkoutSession.clientSecret) {
+                    const { status } = await stripeStoreRetrievePayment({
+                        clientSecret: json.checkoutSession.clientSecret,
+                    });
+                    // If payment intent is still processing or succeeded, set to finish step
+                    if (status === 'processing' || status === 'succeeded') {
+                        void this.setToFinishStep(status);
+                        return;
+                    }
+                }
+                void sendErrorLog({
+                    endpoint: 'INVALID_COLLECT_CHECKOUT_SESSION',
+                    errors: [
+                        'Invalid checkout session, can not retrieve the checkout session after failing to update it',
+                    ],
+                    metadata: {
+                        cartCheckoutSessionId,
+                        cartId: (_j = window.Zonos.cartData) === null || _j === void 0 ? void 0 : _j.id,
+                        cartLandedCostId,
+                    },
+                });
+                throw new Error('Invalid checkout session, can not retrieve the checkout session after failing to update it');
+            }
+            if (!cartStore.checkoutSession) {
+                void sendErrorLog({
+                    endpoint: 'FAIL_TO_UPDATE_CREATE_CHECKOUT_SESSION',
+                    errors: [
+                        'Could not update/create checkout session for this collect cart',
+                    ],
+                    metadata: {
+                        cartCheckoutSessionId: cartCheckoutSessionId || 'N/A',
+                        cartId: (_k = window.Zonos.cartData) === null || _k === void 0 ? void 0 : _k.id,
+                        cartLandedCostId: cartLandedCostId || 'N/A',
+                    },
+                });
+                throw new Error('Could not update/create checkout session for this collect cart');
+            }
+            // const checkoutSessionId = storageStore.checkoutSessionId;
+            void stripeStoreGetPaymentIntent();
+            const landedCost = (_l = cartStore.checkoutSession) === null || _l === void 0 ? void 0 : _l.landedCost;
+            if (!landedCost) {
+                throw new Error('Landed cost could not be found in checkout session after creating/updating them');
+            }
+            await collectStoreUpdateSelectedShippingOption(Object.assign(Object.assign({}, cartStore.checkoutSession), { id: storageStore.checkoutSessionId || '' }));
+            void collectStoreInitShippingInfo({
+                landedCostId: landedCost.id,
+            });
+            void this.applyStripeTheme();
+        }
+        catch (err) {
+            logError(err);
+            cartStoreUpdateToErrorState({
+                messages: [
+                    translate('Session does not have valid landed cost. Please contact [organizationName] for assistance.', {
+                        organizationName: zonosStore.organizationName,
+                    }),
+                ],
+                title: translate('Invalid session'),
+            });
+        }
+        this.isOverlayLoading = false;
+    }
+    toggleLanguageDialog() {
+        this.showLanguageDialogMobile = !this.showLanguageDialogMobile;
+    }
+    async handleStripePaymentContinue() {
+        var _a, _b, _c, _d;
+        // 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());
+        // If the email is not complete, scroll to the link authentication section
+        if (!((_b = stripeStore.stripeLinkEventData) === null || _b === void 0 ? void 0 : _b.complete)) {
+            // Scroll to the billing section
+            const linkAuthentication = document.querySelector('zonos-link-authentication');
+            linkAuthentication === null || linkAuthentication === void 0 ? void 0 : linkAuthentication.scrollIntoView({ behavior: 'smooth' });
+            return;
+        }
+        if (!((_c = stripeStore.stripeBillingAddressEventData) === null || _c === void 0 ? void 0 : _c.complete)) {
+            // Scroll to the billing section
+            const billingSection = document.querySelector('.zonos--billing-address');
+            billingSection === null || billingSection === void 0 ? void 0 : billingSection.scrollIntoView({ behavior: 'smooth' });
+            return;
+        }
+        const shouldConfirmPayInUsd = stripeStore.checkoutSettlementCurrency === 'USD';
+        // open the confirm dialog if the settlement currency is in USD, and if call this method again, proceed and confirm with Stripe.
+        if (shouldConfirmPayInUsd &&
+            stripeStore.shouldRenderPayInUsdButton &&
+            !this.payInUsdConfirmDialogOpen) {
+            this.payInUsdConfirmDialogOpen = true;
+            return;
+        }
+        // Close the dialog after the user confirms to proceed with the payment in USD
+        this.payInUsdConfirmDialogOpen = false;
+        // reset paypal error message
+        paypalStore.paypalErrorMessage = null;
+        // reset error state
+        stripeStore.hasPaymentError = false;
+        this.submitLoading = true;
+        // reset inventory check message
+        cartStore.inventoryCheckErrorMessage = null;
+        // Attempt to change settlement currency to USD
+        const baseCurrencyUpdateSuccess = await stripeStoreUpdateCheckoutSessionBaseCurrency();
+        // Should not proceed to confirm payment if base currency update failed
+        if (!baseCurrencyUpdateSuccess) {
+            stripeStore.hasPaymentError = true;
+            stripeStore.customErrorMessage = translate('Unable to complete payment in [currency]. Please try again or select a different currency. If the issue persists, contact our support team for assistance.', {
+                currency: stripeStore.checkoutSettlementCurrency,
+            });
+            this.submitLoading = false;
+            return;
+        }
+        // Update the billing party id to the checkout session
+        await collectStoreAsyncAddressUpdate();
+        try {
+            await stripeStoreConfirmPayment({
+                noLandedCostCheck: true,
+            });
+            cartStore.step = 'finish';
+            // Some merchants use landed cost id as the confirmation id
+            this.confirmationId =
+                collectStore.landedCostShortId ||
+                    ((_d = cartStore.selectedLandedCost) === null || _d === void 0 ? void 0 : _d.landedCostId) ||
+                    null;
+            return;
+        }
+        catch (err) {
+            logError(err);
+            stripeStore.hasPaymentError = true;
+        }
+        this.submitLoading = false;
+    }
+    componentWillLoad() {
+        stripeStore.stripe = window.Zonos.stripe;
+        // Set the step to payment
+        cartStore.step = 'payment';
+        void this.initCollectCart();
+        this.resizeListener();
+        this.storeUnsubscribeList = [
+            stripeStoreOnChange('clientSecret', () => {
+                void this.applyStripeTheme();
+            }),
+            localizationStoreOnChange('selectedLocale', () => {
+                void this.applyStripeTheme();
+            }),
+        ];
+        log(`mobile: ${this.isMobile}`);
+    }
+    // do clean up when component is unmounted
+    disconnectedCallback() {
+        // reset stripe store
+        stripeStoreReset();
+        // reset cart store
+        cartStoreReset();
+        // cleanup onChange listener
+        this.onChangeLocaleListener();
+        this.storeUnsubscribeList.forEach(unsubscribe => unsubscribe());
+    }
+    render() {
+        // Set client secret so that we can add this to @Watch listener
+        this.clientSecret = stripeStore.clientSecret;
+        // Only set and update stripeCustomerSession state if it's available, since it would only be available at the time checkout session is created, afterward access checkout session the value would be `null`.
+        if (stripeStore.stripeCustomerSessionClientSecret) {
+            // Set stripe customer session client secret so that we can add this to @Watch listener
+            this.stripeCustomerSessionClientSecret =
+                stripeStore.stripeCustomerSessionClientSecret;
+        }
+        const baseCurrencySettlementInfo = this.getBaseCurrencySettlementInfo();
+        const { logoUrl, theme } = zonosStore.appearance;
+        const renderLogo = () => {
+            // add timestamp to logo url so browser won't cache it on the dashboard setting
+            const logo = `${logoUrl}?timestamp=${Date.now()}`;
+            return (h("div", { class: "zonos--logo" }, logo && (h("img", { alt: `${zonosStore.organizationName} logo`, src: logo }))));
+        };
+        const isTestMode = getIsTestMode();
+        const renderTopHeader = () => {
+            var _a;
+            const urlParams = new URLSearchParams(window.location.search);
+            const zonosQaUrl = urlParams.get('zonosQaUrl');
+            const zonosDebug = urlParams.get('zonosDebug');
+            const languageLabel = (_a = languages.find(x => x.code === localizationStore.selectedLocale)) === null || _a === void 0 ? void 0 : _a.label;
+            return (h(Fragment, null, h("zonos-h-stack", { class: "zonos--header-wrapper", spacing: 16 }, h("div", { class: "zonos--logo-wrapper" }, renderLogo(), isTestMode && (h("zonos-badge", { badgeColor: "orange", size: "small" }, translate('Test mode'))), zonosDebug === '1' && (h("zonos-badge", { badgeColor: "cyan", size: "small" }, "debug")), zonosQaUrl && (h("zonos-badge", { badgeColor: "purple", size: "small" }, zonosQaUrl))), h("div", { class: "zonos--header-right" }, h("zonos-button", { backgroundColor: 'gray-0', class: "zonos--header-right-button", onClick: () => this.toggleLanguageDialog(), variant: "outline" }, languageLabel, h("zonos-icon", { "aria-label": "Language select", content: ChevronDownIcon, iconColor: "gray-1200" })), h("div", { class: classes([
+                    'zonos--collect-language-dialog',
+                    this.showLanguageDialogMobile &&
+                        'zonos--collect-language-dialog-open',
+                ]) }, h("zonos-language-select", { handleOnClose: () => this.toggleLanguageDialog() })))), h("zonos-text", { class: "zonos--header-title", type: "header" }, translate('Customs fees for your recent purchase from [companyName] are ready for payment', {
+                companyName: zonosStore.organizationName,
+            }))));
+        };
+        const renderContent = () => {
+            if (this.isOverlayLoading || stripeStore.isFetchingSession) {
+                return null;
+            }
+            return (h("div", { class: 'zonos--content' }, cartStore.step !== 'finish' && cartStore.step !== 'error' && (h(Fragment, null, (this.isMobile || this.isTablet) && renderTopHeader(), h("div", { class: "zonos--left", "data-theme": theme }, !this.isMobile && !this.isTablet && renderTopHeader(), h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Billing info')), h("zonos-v-stack", { spacing: 16 }, h("zonos-link-authentication", { titleText: "" }), h("zonos-address", { titleText: "", type: "billing" })), h("zonos-collect-payment", { class: classes(['zonos--collect-container']), continueLoading: this.submitLoading, onContinueClicked: async () => {
+                    await this.handleStripePaymentContinue();
+                } })), h("div", { class: "zonos--right", "data-theme": theme }, h("zonos-collect-review", { mobile: this.isMobile, tablet: this.isTablet }), h("div", { class: "zonos--order-details-container" }, h("zonos-collect-order-details", { collapsed: this.collapseReview, mobile: this.isMobile, onCollapseClicked: () => {
+                    this.collapseReview = !this.collapseReview;
+                } })), h("div", { class: "flex--wrapper" }, h("zonos-v-stack", { spacing: 16 }, h("zonos-collect-subtotal", null)), !this.isMobile && !this.isTablet && (h("zonos-collect-footer", { "data-theme": theme, mobile: this.isMobile, tablet: this.isTablet })))))), (cartStore.step === 'finish' || cartStore.step === 'error') && (h("div", { class: "zonos--done", "data-theme": theme }, h("div", { class: "zonos--header" }, renderLogo()), h("zonos-collect-finish", { confirmationId: this.confirmationId, overrideNotification: cartStore.step === 'error' && !!cartStore.error
+                    ? Object.assign(Object.assign({}, cartStore.error), { type: 'error' }) : undefined, storybookForceStatus: this.storybookPaymentStatusOverride }))), (this.isMobile ||
+                this.isTablet ||
+                cartStore.step === 'finish' ||
+                cartStore.step === 'error') && (h("zonos-collect-footer", { "data-theme": theme, mobile: this.isMobile, tablet: this.isTablet }))));
+        };
+        return (h(Host, { class: classes([
+                'zonos--collect zonos--elements',
+                this.isMobile && 'mobile',
+                this.isTablet && 'tablet',
+            ]), "data-theme": theme }, renderContent(), baseCurrencySettlementInfo && (h("zonos-confirm-dialog", { class: "zonos--pay-in-usd-dialog", dialogCancelBtnText: translate('Cancel'), dialogConfirmBtnText: translate('Pay [orderTotal]', {
+                orderTotal: currencyFormat({
+                    amount: baseCurrencySettlementInfo.settlementAmount,
+                    currency: 'USD',
+                }),
+            }), dialogIntent: "warn", dialogOpen: this.payInUsdConfirmDialogOpen, dialogSubtitle: translate('By paying in USD, your card will be charged directly with no currency conversion. However, using a non-USD based card may result in additional currency conversion fees at the bank level.'), dialogTitle: translate('Pay in USD (United States Dollar)?'), dialogType: "confirm", dialogWidth: 480, onCancelClicked: () => {
+                this.payInUsdConfirmDialogOpen = false;
+            },
+            // Mark user selected confirm to continue with payment
+            onConfirmClicked: () => this.handleStripePaymentContinue() })), h("zonos-loading-overlay", { open: this.isOverlayLoading })));
+    }
+    static get assetsDirs() { return ["assets"]; }
+};
+ZonosCollect.style = ZonosCollectStyle0;
+
+export { ZonosCollect as zonos_collect };

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

@@ -27,7 +27,7 @@ const ZonosComponent = class {
         return format(this.first, this.middle, this.last);
     }
     render() {
-        return h("div", { key: '725c727348687e663e6225837a2a135d177b6d4a' }, "Hello, World! I'm ", this.getText());
+        return h("div", { key: '757e42d63a24b18216b900937089c2566dd44a93' }, "Hello, World! I'm ", this.getText());
     }
 };
 ZonosComponent.style = ZonosComponentStyle0;