@zonos/elements 1.3.143 → 1.3.144

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

@@ -66,6 +66,8 @@ export class ZonosCheckoutFooter {
                     "tags": [],
                     "text": "Override mobile mode"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "mobile",
                 "reflect": false,
                 "defaultValue": "false"
@@ -90,6 +92,8 @@ export class ZonosCheckoutFooter {
                     "tags": [],
                     "text": "Theme to change the color of the logo"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "data-theme",
                 "reflect": false
             }

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

@@ -1,10 +1,14 @@
-import { h, Host, } from "@stencil/core";
-import { cartStore } from "../../../store/checkout/cart";
+import { Fragment, h, Host, } from "@stencil/core";
+import { cartStore, cartStoreNextStep, } from "../../../store/checkout/cart";
 import { paypalStore } from "../../../store/checkout/paypal";
 import { stripeStore } from "../../../store/checkout/stripe";
 import { translate } from "../../../store/translationStore";
+import { zonosStore } from "../../../store/zonosStore";
+import { placeTestOrder } from "../../../utils/api/placeTestOrder";
+import { getIsStagingMode } from "../../../utils/checkout/getIsStagingMode";
 import { getIsTestMode } from "../../../utils/checkout/getIsTestMode";
 import { renderCheckoutCurrency } from "../../../utils/checkout/renderCheckoutCurrency";
+import { isDarkColor } from "../../../utils/isDarkColor";
 import { submitGtag } from "../../../utils/submitGtag";
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
 import CheckmarkLineIcon from "./assets/CheckmarkLineIcon.svg";
@@ -36,11 +40,31 @@ export class ZonosCheckoutPayment {
                 type: 'success',
             });
         };
+        this.placeTestOrder = async () => {
+            this.internalContinueLoading = true;
+            const { errors } = await placeTestOrder();
+            if (errors.length) {
+                this.stagingOrderCreateErrorMessage =
+                    errors[0] || 'Failed to create staging order. Please try again.';
+                this.internalContinueLoading = false;
+                return;
+            }
+            this.internalContinueLoading = false;
+            // continue to the next step
+            cartStoreNextStep();
+        };
         this.submitBtnType = undefined;
         this.continueLoading = false;
         this.submitBtnColor = undefined;
+        this.isMobile = false;
+        this.overridePrimaryColor = undefined;
         this.showErrorBanner = false;
         this.hasStripePaymentError = false;
+        this.stagingOrderCreateErrorMessage = '';
+        this.internalContinueLoading = this.continueLoading;
+    }
+    continueLoadingWatcher() {
+        this.internalContinueLoading = this.continueLoading;
     }
     stripePaymentErrorWatcher() {
         if (this.hasStripePaymentError) {
@@ -64,22 +88,39 @@ export class ZonosCheckoutPayment {
             this.showErrorBanner = !this.handleValidate();
         }
         const isTestMode = getIsTestMode();
+        const isStagingMode = cartStore.isStagingMode || getIsStagingMode();
         const isPaypalTabSelected = ((_a = stripeStore.stripePaymentEventData) === null || _a === void 0 ? void 0 : _a.value.type) === 'external_paypal';
-        return (h(Host, { class: "zonos--checkout-payment zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Payment method')), this.showErrorBanner && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('Missing required fields. Make sure all fields are completed.'))), this.hasStripePaymentError && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, stripeStore.customErrorMessage ||
-            translate("We couldn't complete your payment. Please verify the payment details and try again."))), paypalStore.paypalErrorMessage && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, paypalStore.paypalErrorMessage)), h("zonos-payment", null), h("div", { class: "zonos--group-btn" }, !isPaypalTabSelected && (h("zonos-button", { backgroundColor: this.submitBtnColor, loading: this.continueLoading, onClick: () => {
-                this.continueClickHandler();
-            }, size: "lg",
-            // use primary type when on mobile mode
-            variant: this.submitBtnType }, translate('Pay [orderTotal]', {
-            orderTotal: renderCheckoutCurrency({
-                amount: cartStore.total,
-                isForeign: true,
-            }),
-        }))), h("zonos-paypal-payment", { onPaypalSessionDone: ({ detail: { orderId } }) => {
-                this.paypalSessionDone.emit(orderId);
-            }, onPaypalSessionFail: () => this.paypalSessionFailed.emit(), style: {
-                display: isPaypalTabSelected ? 'block' : 'none',
-            } })), isTestMode && (h("zonos-card", { backgroundColor: "gray-100", borderRadius: 12, class: "zonos--test-cards" }, h("zonos-v-stack", { spacing: 16 }, h("div", null, h("zonos-text", { type: "semiBoldLabel" }, translate('Test cards')), h("zonos-text", { textColor: "gray-700" }, translate('Click to copy the card number. Use any future expiration date and three number CVC.'))), h("zonos-button", { icon: h("zonos-icon", { content: CheckmarkLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4242424242424242') }, translate('Success'), " (****4242)"), h("zonos-button", { icon: h("zonos-icon", { content: RemoveLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4000000000000002') }, translate('Failure'), " (****0002)")), h("zonos-notification", null))))));
+        const renderPayment = () => {
+            if (isStagingMode) {
+                const { colorPrimary } = zonosStore.appearance;
+                const themeBasedColor = colorPrimary && isDarkColor(colorPrimary) ? 'DARK' : 'LIGHT';
+                // If in mobile, use the theme from the store since the UI is solely by theme
+                const theme = this.isMobile
+                    ? zonosStore.appearance.theme
+                    : themeBasedColor;
+                return (h(Fragment, null, this.stagingOrderCreateErrorMessage && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, this.stagingOrderCreateErrorMessage)), h("zonos-empty-state-payment", { emptyStateText: translate('No payment method needed for staging'), theme: theme }), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, loading: this.internalContinueLoading, onClick: () => {
+                        void this.placeTestOrder();
+                    }, size: "lg",
+                    // use primary type when on mobile mode
+                    variant: this.submitBtnType }, translate('Place test order')))));
+            }
+            return (h(Fragment, null, this.showErrorBanner && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('Missing required fields. Make sure all fields are completed.'))), this.hasStripePaymentError && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, stripeStore.customErrorMessage ||
+                translate("We couldn't complete your payment. Please verify the payment details and try again."))), paypalStore.paypalErrorMessage && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, paypalStore.paypalErrorMessage)), h("zonos-payment", null), h("div", { class: "zonos--group-btn" }, !isPaypalTabSelected && (h("zonos-button", { backgroundColor: this.submitBtnColor, loading: this.continueLoading, onClick: () => {
+                    this.continueClickHandler();
+                }, size: "lg",
+                // use primary type when on mobile mode
+                variant: this.submitBtnType }, translate('Pay [orderTotal]', {
+                orderTotal: renderCheckoutCurrency({
+                    amount: cartStore.total,
+                    isForeign: true,
+                }),
+            }))), h("zonos-paypal-payment", { onPaypalSessionDone: ({ detail: { orderId } }) => {
+                    this.paypalSessionDone.emit(orderId);
+                }, onPaypalSessionFail: () => this.paypalSessionFailed.emit(), style: {
+                    display: isPaypalTabSelected ? 'block' : 'none',
+                } })), isTestMode && (h("zonos-card", { backgroundColor: "gray-100", borderRadius: 12, class: "zonos--test-cards" }, h("zonos-v-stack", { spacing: 16 }, h("div", null, h("zonos-text", { type: "semiBoldLabel" }, translate('Test cards')), h("zonos-text", { textColor: "gray-700" }, translate('Click to copy the card number. Use any future expiration date and three number CVC.'))), h("zonos-button", { icon: h("zonos-icon", { content: CheckmarkLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4242424242424242') }, translate('Success'), " (****4242)"), h("zonos-button", { icon: h("zonos-icon", { content: RemoveLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4000000000000002') }, translate('Failure'), " (****0002)")), h("zonos-notification", null)))));
+        };
+        return (h(Host, { class: "zonos--checkout-payment zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Payment method')), renderPayment())));
     }
     static get is() { return "zonos-checkout-payment"; }
     static get encapsulation() { return "scoped"; }
@@ -114,6 +155,8 @@ export class ZonosCheckoutPayment {
                     "tags": [],
                     "text": "Whether or not the checkout is in mobile mode"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "submit-btn-type",
                 "reflect": false
             },
@@ -131,6 +174,8 @@ export class ZonosCheckoutPayment {
                     "tags": [],
                     "text": "Whether or not the continue button is loading"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "continue-loading",
                 "reflect": false,
                 "defaultValue": "false"
@@ -149,15 +194,58 @@ export class ZonosCheckoutPayment {
                     "tags": [],
                     "text": "Submit button main color"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "submit-btn-color",
                 "reflect": false
+            },
+            "isMobile": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the checkout is in mobile mode"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "is-mobile",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "overridePrimaryColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Primary color to override primary color from appearance primary color in setting."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "override-primary-color",
+                "reflect": false
             }
         };
     }
     static get states() {
         return {
             "showErrorBanner": {},
-            "hasStripePaymentError": {}
+            "hasStripePaymentError": {},
+            "stagingOrderCreateErrorMessage": {},
+            "internalContinueLoading": {}
         };
     }
     static get events() {
@@ -211,6 +299,9 @@ export class ZonosCheckoutPayment {
     static get elementRef() { return "ele"; }
     static get watchers() {
         return [{
+                "propName": "continueLoading",
+                "methodName": "continueLoadingWatcher"
+            }, {
                 "propName": "hasStripePaymentError",
                 "methodName": "stripePaymentErrorWatcher"
             }];

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout-payment/zonos-empty-state-payment/assets/PaymentEmptyStateDarkIcon.svg

@@ -0,0 +1,22 @@
+<svg width="536" height="200" viewBox="0 0 536 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_3739_19124" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="536" height="200">
+<rect width="536" height="200" fill="url(#paint0_radial_3739_19124)"/>
+</mask>
+<g mask="url(#mask0_3739_19124)">
+<rect x="0.5" y="0.5" width="117" height="63" rx="9.5" stroke="white" stroke-opacity="0.08"/>
+<rect x="126.5" y="0.5" width="117" height="63" rx="9.5" stroke="white" stroke-opacity="0.08"/>
+<rect x="252.5" y="0.5" width="117" height="63" rx="9.5" stroke="white" stroke-opacity="0.08"/>
+<rect x="378.5" y="0.5" width="117" height="63" rx="9.5" stroke="white" stroke-opacity="0.08"/>
+<rect x="504.5" y="0.5" width="31" height="63" rx="9.5" stroke="white" stroke-opacity="0.08"/>
+<rect y="96" width="124" height="8" rx="4" fill="white" fill-opacity="0.08"/>
+<rect x="0.5" y="112.5" width="535" height="39" rx="7.5" stroke="white" stroke-opacity="0.08"/>
+<rect x="0.5" y="160.5" width="263" height="39" rx="7.5" stroke="white" stroke-opacity="0.08"/>
+<rect x="272.5" y="160.5" width="263" height="39" rx="7.5" stroke="white" stroke-opacity="0.08"/>
+</g>
+<defs>
+<radialGradient id="paint0_radial_3739_19124" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(268 100) rotate(90) scale(100 268)">
+<stop offset="0.25" stop-color="white" stop-opacity="0"/>
+<stop offset="0.75" stop-color="white"/>
+</radialGradient>
+</defs>
+</svg>

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout-payment/zonos-empty-state-payment/assets/PaymentEmptyStateLightIcon.svg

@@ -0,0 +1,22 @@
+<svg width="536" height="200" viewBox="0 0 536 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_3739_19125" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="536" height="200">
+<rect width="536" height="200" fill="url(#paint0_radial_3739_19125)"/>
+</mask>
+<g mask="url(#mask0_3739_19125)">
+<rect x="0.5" y="0.5" width="117" height="63" rx="9.5" stroke="black" stroke-opacity="0.08"/>
+<rect x="126.5" y="0.5" width="117" height="63" rx="9.5" stroke="black" stroke-opacity="0.08"/>
+<rect x="252.5" y="0.5" width="117" height="63" rx="9.5" stroke="black" stroke-opacity="0.08"/>
+<rect x="378.5" y="0.5" width="117" height="63" rx="9.5" stroke="black" stroke-opacity="0.08"/>
+<rect x="504.5" y="0.5" width="31" height="63" rx="9.5" stroke="black" stroke-opacity="0.08"/>
+<rect y="96" width="124" height="8" rx="4" fill="black" fill-opacity="0.08"/>
+<rect x="0.5" y="112.5" width="535" height="39" rx="7.5" stroke="black" stroke-opacity="0.08"/>
+<rect x="0.5" y="160.5" width="263" height="39" rx="7.5" stroke="black" stroke-opacity="0.08"/>
+<rect x="272.5" y="160.5" width="263" height="39" rx="7.5" stroke="black" stroke-opacity="0.08"/>
+</g>
+<defs>
+<radialGradient id="paint0_radial_3739_19125" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(268 100) rotate(90) scale(100 268)">
+<stop offset="0.25" stop-color="white" stop-opacity="0"/>
+<stop offset="0.75" stop-color="white"/>
+</radialGradient>
+</defs>
+</svg>

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout-payment/zonos-empty-state-payment/zonos-empty-state-payment.css

@@ -0,0 +1,51 @@
+:host {
+  font-family: var(--zonos--font-family, Inter), Inter;
+  display: block;
+  white-space: normal;
+}
+:host * {
+  font-family: var(--zonos--font-family, Inter), Inter;
+}
+:host img {
+  max-width: 100%;
+}
+:host dl,
+:host dd,
+:host h1,
+:host h2,
+:host h3,
+:host h4,
+:host h5,
+:host h6,
+:host hr,
+:host figure,
+:host p,
+:host pre {
+  margin: 0;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host {
+  display: inline-flex;
+  position: relative;
+}
+:host zonos-text {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+:host svg {
+  width: var(--zonos--width);
+  height: var(--zonos--height);
+}

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout-payment/zonos-empty-state-payment/zonos-empty-state-payment.js

@@ -0,0 +1,90 @@
+import { h, Host } from "@stencil/core";
+import { zonosStoreFontFamily } from "../../../../store/zonosStore";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import PaymentEmptyStateDarkIcon from "./assets/PaymentEmptyStateDarkIcon.svg";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import PaymentEmptyStateLightIcon from "./assets/PaymentEmptyStateLightIcon.svg";
+export class ZonosEmptyStatePayment {
+    constructor() {
+        this.emptyStateText = undefined;
+        this.theme = 'LIGHT';
+    }
+    render() {
+        if (!this.el.shadowRoot) {
+            return null;
+        }
+        if (this.theme === 'DARK') {
+            this.el.shadowRoot.innerHTML = PaymentEmptyStateDarkIcon;
+        }
+        else {
+            this.el.shadowRoot.innerHTML = PaymentEmptyStateLightIcon;
+        }
+        return (h(Host, { class: "zonos--elements", style: {
+                '--zonos--font-family': zonosStoreFontFamily(),
+                '--zonos--height': `100%`,
+                '--zonos--width': `100%`,
+            } }, h("zonos-text", { type: "semiBoldLabel" }, this.emptyStateText)));
+    }
+    static get is() { return "zonos-empty-state-payment"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-empty-state-payment.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-empty-state-payment.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "emptyStateText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text to display in the empty state"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "empty-state-text",
+                "reflect": false
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ElementsUiTheme",
+                    "resolved": "\"DARK\" | \"LIGHT\" | \"SYSTEM\"",
+                    "references": {
+                        "ElementsUiTheme": {
+                            "location": "import",
+                            "path": "src/types/generated/graphql.internal.types",
+                            "id": "src/types/generated/graphql.internal.types.ts::ElementsUiTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme color of the icon"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "'LIGHT'"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -8,6 +8,7 @@ import { getZonosStoreTheme, zonosStore, } from "../../store/zonosStore";
 import { buildCartItemsByTempCart } from "../../utils/api/buildCartItemsByTempCart";
 import { isStoreDiscountEnabled } from "../../utils/api/isStoreDiscountEnabl";
 import { trackConversionEvent } from "../../utils/api/trackConversionEvent";
+import { getIsStagingMode } from "../../utils/checkout/getIsStagingMode";
 import { getIsTestMode } from "../../utils/checkout/getIsTestMode";
 import { isCheckoutMobile } from "../../utils/checkout/isCheckoutMobile";
 import { isDisabledCountry } from "../../utils/checkout/isDisabledCountry";
@@ -162,6 +163,7 @@ export class ZonosCheckout {
         this.appearanceSettingsOverride = undefined;
         this.preview = false;
         this.mobile = false;
+        this.overrideStagingMode = undefined;
         this.defaultAddress = null;
         this.forceDialogOpen = false;
         this.defaultAddressParams = null;
@@ -179,6 +181,7 @@ export class ZonosCheckout {
         this.isCartExpired = false;
         this.inventoryCheckErrorMessage = null;
         this.placedOrderInfo = null;
+        this.clientSecret = stripeStore.clientSecret;
     }
     /**
      * Init cart info handler event
@@ -235,7 +238,7 @@ export class ZonosCheckout {
             const isExpired = this.handleCartExpiredCheck();
             if (isExpired) {
                 // Do not proceed if the cart is expired
-                return;
+                return false;
             }
             const { adjustments, cartItems } = buildCartItemsByTempCart(window.Zonos.cartData);
             await cartStoreUpdateItems({ adjustments, cartItems });
@@ -249,13 +252,13 @@ export class ZonosCheckout {
             const cartData = cartResult === null || cartResult === void 0 ? void 0 : cartResult.cartData;
             if (!cartData) {
                 logError('Failed to build cart, please try again.');
-                return;
+                return false;
             }
             window.Zonos.cartData = cartData;
             const isExpired = this.handleCartExpiredCheck();
             if (isExpired) {
                 // Do not proceed if the cart is expired
-                return;
+                return false;
             }
             const { adjustments, cartItems } = buildCartItemsByTempCart(cartData);
             await cartStoreUpdateItems({ adjustments, cartItems });
@@ -547,12 +550,21 @@ export class ZonosCheckout {
             phone,
         };
     }
+    overrideStagingModeChanged() {
+        cartStore.isStagingMode = !!this.overrideStagingMode;
+    }
     /**
      * Setup all of the event listeners for the component on first load
      */
     async init() {
         stripeStore.stripe = window.Zonos.stripe;
         this.stripe = window.Zonos.stripe;
+        // Set staging mode on init
+        cartStore.isStagingMode = getIsStagingMode();
+        // Override staging mode if it's provided
+        if (typeof this.overrideStagingMode !== 'undefined') {
+            cartStore.isStagingMode = this.overrideStagingMode;
+        }
         // check if bigcommerce, if user enters the shipping address that's in the shipping zone at bigcommerce checkout
         watchBigcommerceDomesticCheckout({
             domesticRedirectedBtnSelector: domesticRedirectedBtnSelector,
@@ -791,6 +803,10 @@ export class ZonosCheckout {
     handleAddressChange() {
         stripeStoreReset();
     }
+    handleClientSecretChange() {
+        // apply theme to stripe elements
+        void this.applyStripeTheme();
+    }
     handleOpenChange() {
         const overflowAttrKey = 'data-zonos-overflow-origin';
         const body = document.body;
@@ -855,6 +871,8 @@ export class ZonosCheckout {
     }
     render() {
         var _a, _b, _c, _d;
+        // Set client secret so that we can add this to @Watch listener
+        this.clientSecret = stripeStore.clientSecret;
         const dialogLoading = 
         // if it's last step, don't need to check stripe elements
         (cartStore.step !== 'finish' &&
@@ -888,7 +906,8 @@ export class ZonosCheckout {
             const zonosQaUrl = urlParams.get('zonosQaUrl');
             const zonosDebug = urlParams.get('zonosDebug');
             const zonosE2ETest = urlParams.get('zonosE2ETest');
-            return (h("zonos-v-stack", null, 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)), zonosE2ETest && (h("zonos-badge", { badgeColor: "gray", size: "small" }, "E2E Test"))), h("zonos-checkout-progress-tabs", { backgroundColor: 
+            const zonosStagingMode = this.overrideStagingMode || getIsStagingMode();
+            return (h("zonos-v-stack", null, h("div", { class: "zonos--logo-wrapper" }, renderLogo(), isTestMode && (h("zonos-badge", { badgeColor: "orange", size: "small" }, translate('Test mode'))), zonosStagingMode && (h("zonos-badge", { badgeColor: "red", size: "small" }, translate('Staging mode'))), zonosDebug === '1' && (h("zonos-badge", { badgeColor: "cyan", size: "small" }, "debug")), zonosQaUrl && (h("zonos-badge", { badgeColor: "purple", size: "small" }, zonosQaUrl)), zonosE2ETest && (h("zonos-badge", { badgeColor: "gray", size: "small" }, "E2E Test"))), h("zonos-checkout-progress-tabs", { backgroundColor: 
                 // only use different contrast color when the secondary color is too off with the background in mobile
                 this.isMobile ? '--zonos-elements-gray-0' : null }), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))));
         };
@@ -904,7 +923,7 @@ export class ZonosCheckout {
                     '--zonos--primary-color': !this.isMobile
                         ? colorPrimary
                         : undefined,
-                }) }, !this.isMobile && renderTopHeader(), cartStore.step === 'customer-info' && (h("zonos-customer-info", { continueLoading: this.submitLoading, defaultAddress: this.defaultAddress || this.defaultAddressParams, isMobile: this.isMobile, onContinueClicked: () => this.handleCustomerInfoContinue(), submitBtnColor: submitButtonColor })), cartStore.step === 'shipping' && (h("zonos-shipping", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleShippingContinue(), submitBtnColor: submitButtonColor })), cartStore.step === 'payment' && (h("zonos-checkout-payment", { continueLoading: this.submitLoading, onContinueClicked: async () => {
+                }) }, !this.isMobile && renderTopHeader(), cartStore.step === 'customer-info' && (h("zonos-customer-info", { continueLoading: this.submitLoading, defaultAddress: this.defaultAddress || this.defaultAddressParams, isMobile: this.isMobile, onContinueClicked: () => this.handleCustomerInfoContinue(), submitBtnColor: submitButtonColor })), cartStore.step === 'shipping' && (h("zonos-shipping", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleShippingContinue(), submitBtnColor: submitButtonColor })), cartStore.step === 'payment' && (h("zonos-checkout-payment", { continueLoading: this.submitLoading, isMobile: this.isMobile, onContinueClicked: async () => {
                     await this.handleStripePaymentContinue();
                 }, submitBtnColor: submitButtonColor }))), h("div", { class: "zonos--right", "data-theme": rightSideTheme }, this.isMobile && renderTopHeader(), h("div", { class: "zonos--right-actions" }, window.Zonos.showBaseForeign && (h("zonos-currency-toggle", null)), !this.isLegacyCheckout && (h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.closeDialogHandler() }))), h("div", { class: "flex--wrapper" }, h("div", { class: "zonos--wrapper" }, h("zonos-review", { collapsed: this.collapseReviewMobile, mobile: this.isMobile, onClick: () => {
                     // do nothing if it's not mobile
@@ -1006,7 +1025,9 @@ export class ZonosCheckout {
                 "docs": {
                     "tags": [],
                     "text": "Override appearance config"
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "preview": {
                 "type": "boolean",
@@ -1022,6 +1043,8 @@ export class ZonosCheckout {
                     "tags": [],
                     "text": "Preview checkout without needing to click on the button. This would be useful for demo purpose"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "preview",
                 "reflect": false,
                 "defaultValue": "false"
@@ -1040,10 +1063,31 @@ export class ZonosCheckout {
                     "tags": [],
                     "text": "Flag to determine if the checkout is on mobile"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "mobile",
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "overrideStagingMode": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Override staging mode. Solely use for storybook"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "override-staging-mode",
+                "reflect": false
+            },
             "defaultAddress": {
                 "type": "unknown",
                 "mutable": false,
@@ -1064,6 +1108,8 @@ export class ZonosCheckout {
                     "tags": [],
                     "text": "Default address to use for the checkout (preview mode)"
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "null"
             },
             "forceDialogOpen": {
@@ -1080,6 +1126,8 @@ export class ZonosCheckout {
                     "tags": [],
                     "text": "Force dialog to be open"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "force-dialog-open",
                 "reflect": false,
                 "defaultValue": "false"
@@ -1102,7 +1150,8 @@ export class ZonosCheckout {
             "confirmDialogOpen": {},
             "isCartExpired": {},
             "inventoryCheckErrorMessage": {},
-            "placedOrderInfo": {}
+            "placedOrderInfo": {},
+            "clientSecret": {}
         };
     }
     static get methods() {
@@ -1203,6 +1252,9 @@ export class ZonosCheckout {
         return [{
                 "propName": "appearanceSettingsOverride",
                 "methodName": "appearanceSettingsOverrideChanged"
+            }, {
+                "propName": "overrideStagingMode",
+                "methodName": "overrideStagingModeChanged"
             }, {
                 "propName": "mobile",
                 "methodName": "handleMobileChange"
@@ -1212,6 +1264,9 @@ export class ZonosCheckout {
             }, {
                 "propName": "defaultAddress",
                 "methodName": "handleAddressChange"
+            }, {
+                "propName": "clientSecret",
+                "methodName": "handleClientSecretChange"
             }, {
                 "propName": "open",
                 "methodName": "handleOpenChange"