@zonos/elements 1.3.233 → 1.3.235

package/dist/collection/components/checkout/zonos-invoice/zonos-invoice.js

@@ -0,0 +1,547 @@
+import { Fragment, h, Host, } from "@stencil/core";
+import { cartStore, cartStoreReset, cartStoreUpdateItems, cartStoreUpdateToErrorState, } from "../../store/checkout/cart";
+import { invoiceStore, invoiceStoreAsyncAddressUpdate, invoiceStoreInitShippingInfo, invoiceStoreUpdateSelectedShippingOption, } from "../../store/checkout/invoice";
+import { paypalStore, paypalStoreHasPaypalEnabled, } from "../../store/checkout/paypal";
+import { initStripeElements, stripeStore, stripeStoreConfirmPayment, stripeStoreGetPaymentIntent, stripeStoreInitCheckoutSession, stripeStoreOnChange, stripeStoreReset, stripeStoreRetrievePayment, stripeStoreUpdateCheckoutSessionBaseCurrency, } from "../../store/checkout/stripe";
+import { localizationStore, localizationStoreOnChange, } from "../../store/hello/localization";
+import { storageStore } from "../../store/storageStore";
+import { translate } from "../../store/translationStore";
+import { zonosStore } from "../../store/zonosStore";
+import { buildCartItemsByTempCart } from "../../utils/api/buildCartItemsByTempCart";
+import { getIsTestMode } from "../../utils/checkout/getIsTestMode";
+import { isInvoiceMobile, isInvoiceTablet, } from "../../utils/checkout/isInvoiceMobileTablet";
+import { classes } from "../../utils/classes";
+import { handleFetch } from "../../utils/handleFetch";
+import { currencyFormat } from "../../utils/hello/currencyConversion/currencyFormat";
+import { log } from "../../utils/logging/log";
+import { logError } from "../../utils/logging/logError";
+import { sendErrorLog } from "../../utils/logging/sendErrorLog";
+import { languages } from "../../../types/ILanguage";
+/** These assets need to be in relative path as https://www.npmjs.com/package/stencil-inline-svg suggested */
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import ChevronDownIcon from "./assets/ChevronDownIcon.svg";
+export class ZonosInvoice {
+    constructor() {
+        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.collapseReviewMobile = 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 invoice 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 = isInvoiceMobile(this.mobile);
+        this.isTablet = isInvoiceTablet(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 initInvoiceCart() {
+        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 invoice 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 invoice 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 Invoice 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) &&
+                    // For invoice that's set to expired, we set completedAt but no order attached. In that case should not set to finish step
+                    !!json.checkoutSession.order) {
+                    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_INVOICE_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_INVOICE_CHECKOUT_SESSION',
+                    errors: [
+                        'Could not update/create checkout session for this invoice 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 invoice 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 invoiceStoreUpdateSelectedShippingOption(Object.assign(Object.assign({}, cartStore.checkoutSession), { id: storageStore.checkoutSessionId || '' }));
+            void invoiceStoreInitShippingInfo({
+                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 invoiceStoreAsyncAddressUpdate();
+        try {
+            await stripeStoreConfirmPayment({
+                noLandedCostCheck: true,
+            });
+            cartStore.step = 'finish';
+            // Some merchants use landed cost id as the confirmation id
+            this.confirmationId =
+                invoiceStore.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.initInvoiceCart();
+        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--invoice-language-dialog',
+                    this.showLanguageDialogMobile &&
+                        'zonos--invoice-language-dialog-open',
+                ]) }, h("zonos-language-select", { handleOnClose: () => this.toggleLanguageDialog() }))))));
+        };
+        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-invoice-payment", { class: classes(['zonos--invoice-container']), continueLoading: this.submitLoading, onContinueClicked: async () => {
+                    await this.handleStripePaymentContinue();
+                } })), h("div", { class: "zonos--right", "data-theme": theme }, !this.isMobile && (h("zonos-invoice-review", { mobile: this.isMobile, tablet: this.isTablet })), h("div", { class: "zonos--order-details-container" }, !this.isMobile && (h("zonos-invoice-cart-items", null)), this.isMobile && (h("zonos-invoice-order-details", { collapsed: this.collapseReviewMobile, mobile: this.isMobile, onCollapseClicked: () => {
+                    this.collapseReviewMobile = !this.collapseReviewMobile;
+                } }))), h("div", { class: "flex--wrapper" }, !this.isMobile && (h("zonos-v-stack", { spacing: 16 }, h("zonos-invoice-subtotal", null))), !this.isMobile && !this.isTablet && (h("zonos-invoice-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-invoice-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-invoice-footer", { "data-theme": theme, mobile: this.isMobile, tablet: this.isTablet }))));
+        };
+        return (h(Host, { class: classes([
+                'zonos--invoice 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 is() { return "zonos-invoice"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-invoice.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-invoice.css"]
+        };
+    }
+    static get assetsDirs() { return ["assets"]; }
+    static get properties() {
+        return {
+            "mobile": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Flag to determine if the checkout is on mobile"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "mobile",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "tablet": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the component is being rendered with tablet styles"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "tablet",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "stripe": {},
+            "showLanguageDialogMobile": {},
+            "submitLoading": {},
+            "collapseReviewMobile": {},
+            "isMobile": {},
+            "isTablet": {},
+            "zonosReviewRef": {},
+            "storybookPaymentStatusOverride": {},
+            "isOverlayLoading": {},
+            "isCartCollected": {},
+            "isCartExpired": {},
+            "payInUsdConfirmDialogOpen": {},
+            "inventoryCheckErrorMessage": {},
+            "confirmationId": {},
+            "clientSecret": {},
+            "stripeCustomerSessionClientSecret": {}
+        };
+    }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "resizeListener",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}

package/dist/collection/components/common/zonos-badge/zonos-badge.js

@@ -37,16 +37,16 @@ export class ZonosBadge {
         this.loading = false;
     }
     render() {
-        return (h(Host, { key: '5213d69a38c0e00d02d4c85d499ee5b5ca5a929c', class: classes(['zonos--elements zonos--badge']), style: {
+        return (h(Host, { key: '2c6d37db80b369e4d287e2d7a6cb4db9b69fe6f6', class: classes(['zonos--elements zonos--badge']), style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '178886813185320c971444c181a4fe0e8b57d7e3', class: classes([
+            } }, h("div", { key: 'f5f2f2530c11d8c46349024f044a7b042a12a10f', class: classes([
                 'zonos--badge-content',
                 this.badgeColor,
                 this.rounded && 'rounded',
                 this.iconRight && 'icon-right',
                 this.size,
                 this.bold && 'bold',
-            ]) }, this.icon, h("zonos-text", { key: '6e75ee5fbbbe62b2d2c875a4866f33060dd9618b', textColor: `${this.badgeColor}-800` }, h("slot", { key: 'b6c1dcd8b29f1c99dc2cbd37d944ad8af3267713' })), this.dismissHandler && (h("zonos-icon", { key: '232d8056ee38962614267def07647c3f52246f0d', "aria-label": "Remove action", class: "zonos--badge-dismiss", content: RemoveLineIcon, onClick: () => { var _a; return (_a = this.dismissHandler) === null || _a === void 0 ? void 0 : _a.call(this); } })))));
+            ]) }, this.icon, h("zonos-text", { key: 'e031a216dc586d138b0d3c03781b8b362bcc25d2', textColor: `${this.badgeColor}-800` }, h("slot", { key: '9757275ea8350ae8578e255bb99940697021258e' })), this.dismissHandler && (h("zonos-icon", { key: '42a08f166b237af5c7c508c257dda46ee5c3d58a', "aria-label": "Remove action", class: "zonos--badge-dismiss", content: RemoveLineIcon, onClick: () => { var _a; return (_a = this.dismissHandler) === null || _a === void 0 ? void 0 : _a.call(this); } })))));
     }
     static get is() { return "zonos-badge"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-button/zonos-button.js

@@ -184,13 +184,13 @@ export class ZonosButton {
         const borderStyle = getBorderRadius({
             overrideBorderStyle: this.borderStyle,
         });
-        return (h(Host, { key: 'd44e5db9b123906c2435285d23d0d05b6c15d8b3', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
+        return (h(Host, { key: '301c0140cae22157209423d34385103d9ea1cf29', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
                 '--zonos--background-color': backgroundColor,
                 '--zonos--border-radius': borderStyle,
                 '--zonos--color': color,
                 '--zonos--font-family': zonosStoreFontFamily(),
                 '--zonos--font-weight': this.bold ? 'bold' : 'normal',
-            }) }, h("button", Object.assign({ key: 'a937efb3d014fd8f5501fcde7c3c2f0cb33439aa' }, this.inheritedAttributes, { class: classes([
+            }) }, h("button", Object.assign({ key: '2e3e75b8d0fd7c22c668972ad4a2f8bda363e159' }, this.inheritedAttributes, { class: classes([
                 this.hasIcon && 'has-icon',
                 this.hasContent && 'has-content',
                 this.noBackground && 'no-background',
@@ -205,7 +205,7 @@ export class ZonosButton {
                 backgroundColor && variant === 'standard' && 'override-background',
             ]), disabled: disabled, style: {
                 justifyContent: this.justifyContent,
-            } }), this.loading && (h("div", { key: '09292867f621fd3e04313494809e59254a353403', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: '250912ac9cc2ba4d9d5db8fdc67fa6009d5ea7ac', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: '0695250725aff37526e6ea4f94456a368b873c59', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
+            } }), this.loading && (h("div", { key: 'f1965c769d9d1a2a7f636b09be1384cf7cd6227a', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: '5bbeb95041065e247ebc2f725f751e2fb5cd93c5', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: 'b32f5bd10dc79b258545efd92ed594a2906b3292', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
     }
     static get is() { return "zonos-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-card/zonos-card.js

@@ -23,16 +23,16 @@ export class ZonosCard {
             customRoundRadius: `${this.borderRadius}px`,
             overrideBorderStyle: 'ROUNDED',
         });
-        return (h(Host, { key: '9423d1472ed313f50c5f4ecc61251025ac6083ed', style: {
+        return (h(Host, { key: '8832966776c626c783e771fb7f9a773d2539e07f', style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '7d2506d2fa9297dce93676bd09dd854a84f27db3', class: classes(['styled-card']), style: {
+            } }, h("div", { key: '89c9af9275ca5b01f658081fefb7756bfcbf6d58', class: classes(['styled-card']), style: {
                 '--zonos--background-color': backgroundColor,
                 '--zonos--border-radius': borderRadius,
                 padding: this.spacing,
-            } }, this.label && (h("header", { key: '81e381540ecbd5c398e5cabf6626d701569e16e5', class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { key: '7929725b31dec41dbab855daa3bd7ae97fb00eb3', type: "subheader" }, this.label), h("h-stack", { key: 'c69fe767e575b3aaf824eb355d7bb35e395ba77a', spacing: 8 }, this.actions))), h("slot", { key: 'ada30bc1760b957a817e0982e46f3def97974297' }), (this.footerActions || this.footerContent) && (h("footer", { key: '854c3d583cb293f5c064af87e839641a5201c900', class: "card-footer", style: {
+            } }, this.label && (h("header", { key: '3da688655c5a9af66397525d02224dbc431d00d0', class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { key: '8e9524d26e5a0a7e3149b4008efd02b5a7b9ebc6', type: "subheader" }, this.label), h("h-stack", { key: 'f7298bbb158686b03b2a09f5d6c089c0f4d144c4', spacing: 8 }, this.actions))), h("slot", { key: '24888347ff25ffd21b416da4f5aae493f8044638' }), (this.footerActions || this.footerContent) && (h("footer", { key: 'b6792e7345b87e9407585ed4558c7327ea3eab36', class: "card-footer", style: {
                 height: this.footerHeight ? `${this.footerHeight}px` : 'auto',
                 padding: this.spacing,
-            } }, h("div", { key: '0a799500938f8d04a8551134b21fe18a05f93de0' }, this.footerContent), h("h-stack", { key: '927b51384452ab01b28da02c9a83256ab7dc6991', spacing: 8 }, this.footerActions))))));
+            } }, h("div", { key: '70ccde8e9b1988db1ba477efea5b44e812a7514d' }, this.footerContent), h("h-stack", { key: '4e48425e9db7031d779da7061f0b2d92b27869a0', spacing: 8 }, this.footerActions))))));
     }
     static get is() { return "zonos-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-checkbox/zonos-checkbox.js

@@ -51,14 +51,14 @@ export class ZonosCheckbox {
             customRoundRadius: '4px',
             overrideBorderStyle: this.borderStyle,
         });
-        return (h(Host, { key: 'bef392ce775e35da3f0640dcbb8271437995daa7', class: classes(['zonos--elements zonos--checkbox']), style: {
+        return (h(Host, { key: 'c2a9023becafd6d19ad769d449383924c85c641f', class: classes(['zonos--elements zonos--checkbox']), style: {
                 '--zonos--background-color': backgroundColor,
                 '--zonos--border-radius': borderStyle,
                 '--zonos--font-family': zonosStoreFontFamily(),
                 '--zonos--size': `${this.size}px`,
-            } }, h("label", { key: '059e2eabc4825738a6607cd307694b252ba55905', class: classes([this.isDisabled && 'disabled']), htmlFor: this.inputId }, h("input", { key: 'a35c086ae478d5ac932608859e6b3250738c870f', checked: this.isChecked, disabled: this.isDisabled, hidden: true, id: this.inputId, onChange: e => {
+            } }, h("label", { key: '352e8bda93f1ac9a7a55ba7038e922626c3a9594', class: classes([this.isDisabled && 'disabled']), htmlFor: this.inputId }, h("input", { key: '71d664f9d83345ad4c143f71209bdb0a2cb16745', checked: this.isChecked, disabled: this.isDisabled, hidden: true, id: this.inputId, onChange: e => {
                 this.checkboxSelected.emit(e.target.checked);
-            }, type: "checkbox" }), h("span", { key: '2482799b470a2ef5050709b6de36469ec8321b04', class: "checkmark-container" }, h("svg", { key: '1034db2d054e98fe06688b602346097b3e7c7d9d', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'b926b486910470ea3180a904e8ec5ca2cf8e452f', "clip-rule": "evenodd", d: "M17.456 7.404a.75.75 0 0 1 .14 1.052l-6.5 8.5a.75.75 0 0 1-1.126.074l-4-4a.75.75 0 0 1 1.06-1.06l3.395 3.394 5.98-7.82a.75.75 0 0 1 1.05-.14Z", fill: "currentColor", "fill-rule": "evenodd" }))), this.label && (h("zonos-text", { key: '5a31f075fb462c7419597f0d15b5e4a2f4e40148', size: this.fontSize }, this.label)))));
+            }, type: "checkbox" }), h("span", { key: 'c772c4e8dbbbef8035874616a0254fb4114a97c8', class: "checkmark-container" }, h("svg", { key: 'd497191975edeca268cc014431535f4befdd7b2c', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '15b26fdf72a058e81d4472d0c757a725c04e3f47', "clip-rule": "evenodd", d: "M17.456 7.404a.75.75 0 0 1 .14 1.052l-6.5 8.5a.75.75 0 0 1-1.126.074l-4-4a.75.75 0 0 1 1.06-1.06l3.395 3.394 5.98-7.82a.75.75 0 0 1 1.05-.14Z", fill: "currentColor", "fill-rule": "evenodd" }))), this.label && (h("zonos-text", { key: '2d6015d16eda08dc39eff677f4858d2aed620891', size: this.fontSize }, this.label)))));
     }
     static get is() { return "zonos-checkbox"; }
     static get encapsulation() { return "shadow"; }