@zonos/elements 1.3.217 → 1.3.219

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

@@ -0,0 +1,468 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1c710d00.js');
+const cart = require('./cart-9a2b32e4.js');
+const isCollectMobileTablet = require('./isCollectMobileTablet-7e57fd90.js');
+const paypal = require('./paypal-e80871d0.js');
+const localization = require('./localization-b12edb2a.js');
+const translationStore = require('./translationStore-20a6d8bf.js');
+const zonosStore = require('./zonosStore-f8ee56aa.js');
+const buildCartItemsByTempCart = require('./buildCartItemsByTempCart-309fcebf.js');
+const handleFetch = require('./handleFetch-45f35cac.js');
+const classes = require('./classes-b7918f56.js');
+const ILanguage = require('./ILanguage-98b04442.js');
+require('./isDarkColor-428965f4.js');
+require('./getBorderRadius-1b5e33cf.js');
+require('./VarianceTest-0cb1e118.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) {
+        index.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 = cart.stripeStore.clientSecret;
+        /**
+         * Client secret value of customer session (use to load saved payment method and render saved consent)
+         */
+        this.stripeCustomerSessionClientSecret = cart.stripeStore.stripeCustomerSessionClientSecret;
+        this.getBaseCurrencySettlementInfo = () => {
+            const selectedLandedCost = cart.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.zonosStore.appearance.theme;
+            await cart.initStripeElements({
+                // only override theme or theme from appearance if it's mobile
+                overrideTheme: this.isMobile ? theme : undefined,
+                paypalEnabled: paypal.paypalStoreHasPaypalEnabled(),
+            });
+        };
+        this.fetchCheckoutSession = async (checkoutSessionId) => {
+            const { json } = await handleFetch.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');
+            handleFetch.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) {
+                handleFetch.log('No stripe client secret found in the URL, proceed to order if cart data is available');
+                return { shouldAllowOrder: isCartDataAvailable };
+            }
+            const { error, status } = await cart.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) {
+                    handleFetch.log('Payment intent is succeeded or in a good state to move forward, show success screen');
+                }
+                else {
+                    handleFetch.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;
+                localization.storageStore.checkoutSessionId = zonosCheckoutSessionId;
+                cart.stripeStore.clientSecret = stripeClientSecret;
+                void this.setToFinishStep(status);
+                return { shouldAllowOrder: false };
+            }
+            if (!isCartDataAvailable) {
+                handleFetch.log('Cart data is not available, only check payment intent status, skip order.');
+                return { shouldAllowOrder: false };
+            }
+            handleFetch.log('Payment intent is not succeeded, proceed to order');
+            return { shouldAllowOrder: true };
+        };
+    }
+    /**
+     * Listen to resize event to update the isMobile state
+     */
+    resizeListener() {
+        this.isMobile = isCollectMobileTablet.isCollectMobile(this.mobile);
+        this.isTablet = isCollectMobileTablet.isCollectTablet(this.tablet);
+    }
+    /**
+     * For storybook to set to finish step, this is to trigger in the story for zonos-checkout-finish
+     */
+    async setToFinishStep(forcePaymentStatus) {
+        cart.stripeStore.stripe = window.Zonos.stripe;
+        cart.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) {
+            cart.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) {
+            cart.cartStoreUpdateToErrorState({
+                messages: [
+                    translationStore.translate('Session does not have valid landed cost. Please contact [organizationName] for assistance.', {
+                        organizationName: zonosStore.zonosStore.organizationName,
+                    }),
+                ],
+                title: translationStore.translate('Invalid session'),
+            });
+            return;
+        }
+        // Override checkout session id for collect if we found one in the cart reference
+        if (cartCheckoutSessionId) {
+            handleFetch.log('Setting checkout session id from cart reference', 'info', cartCheckoutSessionId);
+            localization.storageStore.checkoutSessionId = cartCheckoutSessionId;
+        }
+        else {
+            handleFetch.log('Clear checkout session id from storage so we start from a fresh session for the collect cart');
+            localization.storageStore.checkoutSessionId = null;
+        }
+        const { shouldAllowOrder } = await this.checkStripePaymentIntentStatus();
+        if (!shouldAllowOrder) {
+            return;
+        }
+        try {
+            const { adjustments, cartItems } = buildCartItemsByTempCart.buildCartItemsByTempCart(window.Zonos.cartData);
+            await cart.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 (!localization.storageStore.checkoutSessionId && !cartCheckoutSessionId) {
+                const success = await cart.stripeStoreInitCheckoutSession();
+                handleFetch.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 ((!cart.cartStore.checkoutSession ||
+                ((_g = cart.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 cart.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 handleFetch.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 (!cart.cartStore.checkoutSession) {
+                void handleFetch.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 cart.stripeStoreGetPaymentIntent();
+            const landedCost = (_l = cart.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 isCollectMobileTablet.collectStoreUpdateSelectedShippingOption(Object.assign(Object.assign({}, cart.cartStore.checkoutSession), { id: localization.storageStore.checkoutSessionId || '' }));
+            void isCollectMobileTablet.collectStoreInitShippingInfo({
+                landedCostId: landedCost.id,
+            });
+            void this.applyStripeTheme();
+        }
+        catch (err) {
+            handleFetch.logError(err);
+            cart.cartStoreUpdateToErrorState({
+                messages: [
+                    translationStore.translate('Session does not have valid landed cost. Please contact [organizationName] for assistance.', {
+                        organizationName: zonosStore.zonosStore.organizationName,
+                    }),
+                ],
+                title: translationStore.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 = cart.stripeStore.stripeBillingAddressElement) === null || _a === void 0 ? void 0 : _a.getValue());
+        // If the email is not complete, scroll to the link authentication section
+        if (!((_b = cart.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 = cart.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 = cart.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 &&
+            cart.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
+        paypal.paypalStore.paypalErrorMessage = null;
+        // reset error state
+        cart.stripeStore.hasPaymentError = false;
+        this.submitLoading = true;
+        // reset inventory check message
+        cart.cartStore.inventoryCheckErrorMessage = null;
+        // Attempt to change settlement currency to USD
+        const baseCurrencyUpdateSuccess = await cart.stripeStoreUpdateCheckoutSessionBaseCurrency();
+        // Should not proceed to confirm payment if base currency update failed
+        if (!baseCurrencyUpdateSuccess) {
+            cart.stripeStore.hasPaymentError = true;
+            cart.stripeStore.customErrorMessage = translationStore.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: cart.stripeStore.checkoutSettlementCurrency,
+            });
+            this.submitLoading = false;
+            return;
+        }
+        // Update the billing party id to the checkout session
+        await isCollectMobileTablet.collectStoreAsyncAddressUpdate();
+        try {
+            await cart.stripeStoreConfirmPayment({
+                noLandedCostCheck: true,
+            });
+            cart.cartStore.step = 'finish';
+            // Some merchants use landed cost id as the confirmation id
+            this.confirmationId =
+                isCollectMobileTablet.collectStore.landedCostShortId ||
+                    ((_d = cart.cartStore.selectedLandedCost) === null || _d === void 0 ? void 0 : _d.landedCostId) ||
+                    null;
+            return;
+        }
+        catch (err) {
+            handleFetch.logError(err);
+            cart.stripeStore.hasPaymentError = true;
+        }
+        this.submitLoading = false;
+    }
+    componentWillLoad() {
+        cart.stripeStore.stripe = window.Zonos.stripe;
+        // Set the step to payment
+        cart.cartStore.step = 'payment';
+        void this.initCollectCart();
+        this.resizeListener();
+        this.storeUnsubscribeList = [
+            cart.stripeStoreOnChange('clientSecret', () => {
+                void this.applyStripeTheme();
+            }),
+            localization.localizationStoreOnChange('selectedLocale', () => {
+                void this.applyStripeTheme();
+            }),
+        ];
+        handleFetch.log(`mobile: ${this.isMobile}`);
+    }
+    // do clean up when component is unmounted
+    disconnectedCallback() {
+        // reset stripe store
+        cart.stripeStoreReset();
+        // reset cart store
+        cart.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 = cart.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 (cart.stripeStore.stripeCustomerSessionClientSecret) {
+            // Set stripe customer session client secret so that we can add this to @Watch listener
+            this.stripeCustomerSessionClientSecret =
+                cart.stripeStore.stripeCustomerSessionClientSecret;
+        }
+        const baseCurrencySettlementInfo = this.getBaseCurrencySettlementInfo();
+        const { logoUrl, theme } = zonosStore.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 (index.h("div", { class: "zonos--logo" }, logo && (index.h("img", { alt: `${zonosStore.zonosStore.organizationName} logo`, src: logo }))));
+        };
+        const isTestMode = handleFetch.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 = ILanguage.languages.find(x => x.code === localization.localizationStore.selectedLocale)) === null || _a === void 0 ? void 0 : _a.label;
+            return (index.h(index.Fragment, null, index.h("zonos-h-stack", { class: "zonos--header-wrapper", spacing: 16 }, index.h("div", { class: "zonos--logo-wrapper" }, renderLogo(), isTestMode && (index.h("zonos-badge", { badgeColor: "orange", size: "small" }, translationStore.translate('Test mode'))), zonosDebug === '1' && (index.h("zonos-badge", { badgeColor: "cyan", size: "small" }, "debug")), zonosQaUrl && (index.h("zonos-badge", { badgeColor: "purple", size: "small" }, zonosQaUrl))), index.h("div", { class: "zonos--header-right" }, index.h("zonos-button", { backgroundColor: 'gray-0', class: "zonos--header-right-button", onClick: () => this.toggleLanguageDialog(), variant: "outline" }, languageLabel, index.h("zonos-icon", { "aria-label": "Language select", content: ChevronDownIcon, iconColor: "gray-1200" })), index.h("div", { class: classes.classes([
+                    'zonos--collect-language-dialog',
+                    this.showLanguageDialogMobile &&
+                        'zonos--collect-language-dialog-open',
+                ]) }, index.h("zonos-language-select", { handleOnClose: () => this.toggleLanguageDialog() })))), index.h("zonos-text", { class: "zonos--header-title", type: "header" }, translationStore.translate('Customs fees for your recent purchase from [companyName] are ready for payment', {
+                companyName: zonosStore.zonosStore.organizationName,
+            }))));
+        };
+        const renderContent = () => {
+            if (this.isOverlayLoading || cart.stripeStore.isFetchingSession) {
+                return null;
+            }
+            return (index.h("div", { class: 'zonos--content' }, cart.cartStore.step !== 'finish' && cart.cartStore.step !== 'error' && (index.h(index.Fragment, null, (this.isMobile || this.isTablet) && renderTopHeader(), index.h("div", { class: "zonos--left", "data-theme": theme }, !this.isMobile && !this.isTablet && renderTopHeader(), index.h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translationStore.translate('Billing info')), index.h("zonos-v-stack", { spacing: 16 }, index.h("zonos-link-authentication", { titleText: "" }), index.h("zonos-address", { titleText: "", type: "billing" })), index.h("zonos-collect-payment", { class: classes.classes(['zonos--collect-container']), continueLoading: this.submitLoading, onContinueClicked: async () => {
+                    await this.handleStripePaymentContinue();
+                } })), index.h("div", { class: "zonos--right", "data-theme": theme }, index.h("zonos-collect-review", { mobile: this.isMobile, tablet: this.isTablet }), index.h("div", { class: "zonos--order-details-container" }, index.h("zonos-collect-order-details", { collapsed: this.collapseReview, mobile: this.isMobile, onCollapseClicked: () => {
+                    this.collapseReview = !this.collapseReview;
+                } })), index.h("div", { class: "flex--wrapper" }, index.h("zonos-v-stack", { spacing: 16 }, index.h("zonos-collect-subtotal", null)), !this.isMobile && !this.isTablet && (index.h("zonos-collect-footer", { "data-theme": theme, mobile: this.isMobile, tablet: this.isTablet })))))), (cart.cartStore.step === 'finish' || cart.cartStore.step === 'error') && (index.h("div", { class: "zonos--done", "data-theme": theme }, index.h("div", { class: "zonos--header" }, renderLogo()), index.h("zonos-collect-finish", { confirmationId: this.confirmationId, overrideNotification: cart.cartStore.step === 'error' && !!cart.cartStore.error
+                    ? Object.assign(Object.assign({}, cart.cartStore.error), { type: 'error' }) : undefined, storybookForceStatus: this.storybookPaymentStatusOverride }))), (this.isMobile ||
+                this.isTablet ||
+                cart.cartStore.step === 'finish' ||
+                cart.cartStore.step === 'error') && (index.h("zonos-collect-footer", { "data-theme": theme, mobile: this.isMobile, tablet: this.isTablet }))));
+        };
+        return (index.h(index.Host, { class: classes.classes([
+                'zonos--collect zonos--elements',
+                this.isMobile && 'mobile',
+                this.isTablet && 'tablet',
+            ]), "data-theme": theme }, renderContent(), baseCurrencySettlementInfo && (index.h("zonos-confirm-dialog", { class: "zonos--pay-in-usd-dialog", dialogCancelBtnText: translationStore.translate('Cancel'), dialogConfirmBtnText: translationStore.translate('Pay [orderTotal]', {
+                orderTotal: localization.currencyFormat({
+                    amount: baseCurrencySettlementInfo.settlementAmount,
+                    currency: 'USD',
+                }),
+            }), dialogIntent: "warn", dialogOpen: this.payInUsdConfirmDialogOpen, dialogSubtitle: translationStore.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: translationStore.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() })), index.h("zonos-loading-overlay", { open: this.isOverlayLoading })));
+    }
+    static get assetsDirs() { return ["assets"]; }
+};
+ZonosCollect.style = ZonosCollectStyle0;
+
+exports.zonos_collect = ZonosCollect;

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

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