@zonos/elements 1.3.143 → 1.3.145

package/dist/cjs/zonos-cart-items_13.cjs.entry.js

@@ -2,17 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b678ce0c.js');
-const cart = require('./cart-6ac8dc06.js');
+const index = require('./index-2f90486e.js');
+const cart = require('./cart-9d5e2816.js');
 const classes = require('./classes-b7918f56.js');
-const paypal = require('./paypal-ea8b4ca0.js');
-const zonosStore = require('./zonosStore-8971eb65.js');
-const createCustomEvent = require('./createCustomEvent-3e982e57.js');
-const getBorderRadius = require('./getBorderRadius-f97c99ad.js');
-const handleFetch = require('./handleFetch-864d3c53.js');
+const paypal = require('./paypal-f9015045.js');
+const zonosStore = require('./zonosStore-46809186.js');
+const handleFetch = require('./handleFetch-3673a0c2.js');
+const createCustomEvent = require('./createCustomEvent-7b6fad95.js');
+const getBorderRadius = require('./getBorderRadius-7d0772bf.js');
 const isCheckoutMobile = require('./isCheckoutMobile-f491ca7c.js');
 const ILanguage = require('./ILanguage-98b04442.js');
-const isDarkColor = require('./isDarkColor-434d71dd.js');
+const isDarkColor = require('./isDarkColor-2acf30d1.js');
 const isColorVariable = require('./isColorVariable-525dbfa7.js');
 const containsNonLatinChars = require('./containsNonLatinChars-2be5129b.js');
 const TaxId = require('./TaxId-4632639d.js');
@@ -1529,6 +1529,20 @@ const ZonosCheckoutFinish = class {
             cart.stripeStoreReset();
             cart.cartStore.checkoutSessionId = null;
         };
+        this.checkStagingOrderStatus = async () => {
+            this.notificationType = 'success';
+            this.notificationTitle = cart.translate("You're all set!");
+            this.notificationMessages =
+                cart.stripeStoreMessageBasedOnStatus('succeeded').messages;
+            // override title if notification type is success
+            this.useOverrideSuccessNotification();
+            await this.handleSuccessBehavior();
+            // reset promo when checkout is finished
+            cart.stripeStoreResetPromoCode();
+            cart.stripeStoreReset();
+            paypal.paypalStoreReset();
+            cart.cartStore.checkoutSessionId = null;
+        };
         this.checkPaypalPaymentStatus = async () => {
             // render error message if there's an error
             if (paypal.paypalStore.paypalErrorMessage) {
@@ -1595,7 +1609,10 @@ const ZonosCheckoutFinish = class {
             this.isLoading = false;
             return;
         }
-        if (paypal.paypalStore.orderIdCreated) {
+        if (cart.cartStore.isStagingMode) {
+            void this.checkStagingOrderStatus();
+        }
+        else if (paypal.paypalStore.orderIdCreated) {
             void this.checkPaypalPaymentStatus();
         }
         else {
@@ -1603,18 +1620,23 @@ const ZonosCheckoutFinish = class {
         }
     }
     render() {
-        const isTestMode = createCustomEvent.getIsTestMode();
-        return (index.h(index.Host, { key: '7e1b8c53a085ae60d8189aef087a9c458c3dccd0', class: "zonos--checkout-finish zonos--elements", style: {
+        const isTestMode = handleFetch.getIsTestMode();
+        return (index.h(index.Host, { key: '6ad050e91df2b56c55e142cc69d0b582c0c8469a', class: "zonos--checkout-finish zonos--elements", style: {
                 '--zonos--border-radius': getBorderRadius.getBorderRadius({
                     overrideBorderStyle: this.borderRadius,
                 }),
-            } }, !this.isLoading && (index.h("div", { key: 'b31bed34ca67255cdc6ef6b546f5d6a880e4b309', class: "zonos--finish-details" }, index.h("div", { key: 'e3cb21607b8f1256b3096fe4f21a806a74174f66', class: "zonos--group" }, this.notificationType === 'success' ? (index.h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (index.h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), index.h("zonos-text", { key: 'fac1d2134f1c032cefeb9d36c5c4677767ed0972', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), index.h("zonos-text", { key: '94b8da1ca6a391295c22d285e65530f5dfe97a41', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (index.h(index.Fragment, null, message, index.h("br", null))))), this.shouldRenderCloseButtonForRedirectBehavior() && (index.h("zonos-button", { key: '4ebf2bb81ceb0d27b4fd582400606b238a3dfbae',
+            } }, !this.isLoading && (index.h("div", { key: '8e47016dc83cbe1af79f384285c606fcb737e475', class: "zonos--finish-details" }, index.h("div", { key: 'd1c14e8db7aa70d04b77b10bb0d8b1e3de5529e3', class: "zonos--group" }, this.notificationType === 'success' ? (index.h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (index.h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), index.h("zonos-text", { key: 'd26717fe5d844f2fe6a87b05a566ef0da2d740f7', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), index.h("zonos-text", { key: '7845c4ff7872884d8e5b8b275eb8a76efa855e52', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (index.h(index.Fragment, null, message, index.h("br", null))))), this.shouldRenderCloseButtonForRedirectBehavior() && (index.h("zonos-button", { key: '891901ad2c4fb7c2025ad47417425cd239e36cf1',
             // Only show loading spinner if it's not an error notification
             loading: this.isWaitingToRedirect &&
                 this.notificationType !== 'error', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, cart.translate('Close'))), !window.Zonos.isLegacyCheckout &&
-            this.shouldRenderKeepShoppingButton() && (index.h("zonos-button", { key: '6548724f163ad59fc3cb502c24d82ae7585c6b7f', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText))), isTestMode &&
+            this.shouldRenderKeepShoppingButton() && (index.h("zonos-button", { key: '550bd94f93b842d71c23bd158362b711797dd4a1', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText))), isTestMode &&
             cart.cartStore.step === 'finish' &&
-            this.notificationType === 'success' && (index.h("div", { key: 'f9aeb5d59dc4b0f163868e5a2358a69a0884bb56', class: "zonos--finish-button-wrapper" }, index.h("zonos-button", { key: '98ae907d33624e54f84f88519abacd1ea178554c', backgroundColor: "gray-0", buttonColor: "gray-1000", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), index.h("zonos-button", { key: '506eeb9eabe16fed59b98b9eef49552542272233', onClick: () => this.redirectToUrl(`/orders/all`), size: "lg", variant: "primary" }, "View order in Dashboard")))))));
+            this.notificationType === 'success' && (index.h("div", { key: '8fdaa205f4517e0a9a6c5482e80d6dbccba6a585', class: "zonos--finish-button-wrapper" }, index.h("zonos-button", { key: '41b524fc8dea752a6f4745191970ac665e7b9fa8', backgroundColor: "gray-0", buttonColor: "gray-1000", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), index.h("zonos-button", { key: '70297a07cc8d3c11545776d600d8a1a2a3c2a744', onClick: () => {
+                const isZonosDashboard = window.location.hostname.includes('dashboard.zonos.com');
+                this.redirectToUrl(isZonosDashboard
+                    ? '/orders/all'
+                    : 'https://dashboard.zonos.com/orders/all');
+            }, size: "lg", variant: "primary" }, "View order in Dashboard")))))));
     }
     static get assetsDirs() { return ["assets"]; }
 };
@@ -1674,6 +1696,44 @@ const ZonosCheckoutFooter = class {
 };
 ZonosCheckoutFooter.style = ZonosCheckoutFooterStyle0;
 
+const placeTestOrder = async () => {
+    var _a, _b;
+    const shipToPartyId = (_a = cart.cartStore.partiesData.find(party => party.type === 'DESTINATION')) === null || _a === void 0 ? void 0 : _a.id;
+    const billToPartyId = (_b = cart.cartStore.partiesData.find(party => party.type === 'PAYOR')) === null || _b === void 0 ? void 0 : _b.id;
+    const checkoutSessionId = cart.cartStore.checkoutSessionId;
+    if (!checkoutSessionId || !billToPartyId || !shipToPartyId) {
+        handleFetch.logError('Missing required data', {
+            billToPartyId,
+            checkoutSessionId,
+            shipToPartyId,
+        });
+        return {
+            errors: ['Missing required data'],
+            json: null,
+        };
+    }
+    const payload = {
+        billToPartyId,
+        checkoutSessionId,
+        shipToPartyId,
+    };
+    const { errors, json } = await handleFetch.handleFetch('/api/zonos-elements/place-test-order', {
+        body: payload,
+        method: 'POST',
+    });
+    if (errors.length || !json) {
+        handleFetch.logError('Error occurs when placing test order', errors);
+        return {
+            errors: errors.map(error => error.message),
+            json: null,
+        };
+    }
+    return {
+        errors: [],
+        json,
+    };
+};
+
 const CheckmarkLineIcon = `<svg color="var(--zonos-elements-gray-1000)" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="var(--zonos-elements-gray-1000)" d="M15.342 10.21a.75.75 0 0 0-1.184-.92l-2.978 3.829-1.4-1.4a.75.75 0 1 0-1.06 1.061l1.8 1.8a1 1 0 0 0 1.496-.093l3.326-4.277Z"/><path fill="var(--zonos-elements-gray-1000)" fill-rule="evenodd" d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-6.5 8a6.5 6.5 0 1 1 13 0 6.5 6.5 0 0 1-13 0Z" clip-rule="evenodd"/></svg>`;
 
 const RemoveLineIcon = `<svg color="var(--zonos-elements-gray-1000)" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="var(--zonos-elements-gray-1000)" d="M14.475 10.586a.75.75 0 1 0-1.06-1.06L12 10.938l-1.414-1.414a.75.75 0 0 0-1.06 1.06L10.938 12l-1.414 1.414a.75.75 0 1 0 1.06 1.06L12 13.062l1.414 1.414a.75.75 0 0 0 1.06-1.06L13.062 12l1.414-1.414Z"/><path fill="var(--zonos-elements-gray-1000)" fill-rule="evenodd" d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-6.5 8a6.5 6.5 0 1 1 13 0 6.5 6.5 0 0 1-13 0Z" clip-rule="evenodd"/></svg>`;
@@ -1711,11 +1771,31 @@ const ZonosCheckoutPayment = class {
                 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
+            cart.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) {
@@ -1738,26 +1818,44 @@ const ZonosCheckoutPayment = class {
         if (this.showErrorBanner) {
             this.showErrorBanner = !this.handleValidate();
         }
-        const isTestMode = createCustomEvent.getIsTestMode();
+        const isTestMode = handleFetch.getIsTestMode();
+        const isStagingMode = cart.cartStore.isStagingMode || handleFetch.getIsStagingMode();
         const isPaypalTabSelected = ((_a = cart.stripeStore.stripePaymentEventData) === null || _a === void 0 ? void 0 : _a.value.type) === 'external_paypal';
-        return (index.h(index.Host, { class: "zonos--checkout-payment zonos--elements" }, index.h("div", { class: "zonos--group" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, cart.translate('Payment method')), this.showErrorBanner && (index.h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, cart.translate('Missing required fields. Make sure all fields are completed.'))), this.hasStripePaymentError && (index.h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, cart.stripeStore.customErrorMessage ||
-            cart.translate("We couldn't complete your payment. Please verify the payment details and try again."))), paypal.paypalStore.paypalErrorMessage && (index.h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, paypal.paypalStore.paypalErrorMessage)), index.h("zonos-payment", null), index.h("div", { class: "zonos--group-btn" }, !isPaypalTabSelected && (index.h("zonos-button", { backgroundColor: this.submitBtnColor, loading: this.continueLoading, onClick: () => {
-                this.continueClickHandler();
-            }, size: "lg",
-            // use primary type when on mobile mode
-            variant: this.submitBtnType }, cart.translate('Pay [orderTotal]', {
-            orderTotal: renderCheckoutCurrency({
-                amount: cart.cartStore.total,
-                isForeign: true,
-            }),
-        }))), index.h("zonos-paypal-payment", { onPaypalSessionDone: ({ detail: { orderId } }) => {
-                this.paypalSessionDone.emit(orderId);
-            }, onPaypalSessionFail: () => this.paypalSessionFailed.emit(), style: {
-                display: isPaypalTabSelected ? 'block' : 'none',
-            } })), isTestMode && (index.h("zonos-card", { backgroundColor: "gray-100", borderRadius: 12, class: "zonos--test-cards" }, index.h("zonos-v-stack", { spacing: 16 }, index.h("div", null, index.h("zonos-text", { type: "semiBoldLabel" }, cart.translate('Test cards')), index.h("zonos-text", { textColor: "gray-700" }, cart.translate('Click to copy the card number. Use any future expiration date and three number CVC.'))), index.h("zonos-button", { icon: index.h("zonos-icon", { content: CheckmarkLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4242424242424242') }, cart.translate('Success'), " (****4242)"), index.h("zonos-button", { icon: index.h("zonos-icon", { content: RemoveLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4000000000000002') }, cart.translate('Failure'), " (****0002)")), index.h("zonos-notification", null))))));
+        const renderPayment = () => {
+            if (isStagingMode) {
+                const { colorPrimary } = zonosStore.zonosStore.appearance;
+                const themeBasedColor = colorPrimary && isDarkColor.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.zonosStore.appearance.theme
+                    : themeBasedColor;
+                return (index.h(index.Fragment, null, this.stagingOrderCreateErrorMessage && (index.h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, this.stagingOrderCreateErrorMessage)), index.h("zonos-empty-state-payment", { emptyStateText: cart.translate('No payment method needed for staging'), theme: theme }), index.h("div", { class: "zonos--group-btn" }, index.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 }, cart.translate('Place test order')))));
+            }
+            return (index.h(index.Fragment, null, this.showErrorBanner && (index.h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, cart.translate('Missing required fields. Make sure all fields are completed.'))), this.hasStripePaymentError && (index.h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, cart.stripeStore.customErrorMessage ||
+                cart.translate("We couldn't complete your payment. Please verify the payment details and try again."))), paypal.paypalStore.paypalErrorMessage && (index.h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, paypal.paypalStore.paypalErrorMessage)), index.h("zonos-payment", null), index.h("div", { class: "zonos--group-btn" }, !isPaypalTabSelected && (index.h("zonos-button", { backgroundColor: this.submitBtnColor, loading: this.continueLoading, onClick: () => {
+                    this.continueClickHandler();
+                }, size: "lg",
+                // use primary type when on mobile mode
+                variant: this.submitBtnType }, cart.translate('Pay [orderTotal]', {
+                orderTotal: renderCheckoutCurrency({
+                    amount: cart.cartStore.total,
+                    isForeign: true,
+                }),
+            }))), index.h("zonos-paypal-payment", { onPaypalSessionDone: ({ detail: { orderId } }) => {
+                    this.paypalSessionDone.emit(orderId);
+                }, onPaypalSessionFail: () => this.paypalSessionFailed.emit(), style: {
+                    display: isPaypalTabSelected ? 'block' : 'none',
+                } })), isTestMode && (index.h("zonos-card", { backgroundColor: "gray-100", borderRadius: 12, class: "zonos--test-cards" }, index.h("zonos-v-stack", { spacing: 16 }, index.h("div", null, index.h("zonos-text", { type: "semiBoldLabel" }, cart.translate('Test cards')), index.h("zonos-text", { textColor: "gray-700" }, cart.translate('Click to copy the card number. Use any future expiration date and three number CVC.'))), index.h("zonos-button", { icon: index.h("zonos-icon", { content: CheckmarkLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4242424242424242') }, cart.translate('Success'), " (****4242)"), index.h("zonos-button", { icon: index.h("zonos-icon", { content: RemoveLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4000000000000002') }, cart.translate('Failure'), " (****0002)")), index.h("zonos-notification", null)))));
+        };
+        return (index.h(index.Host, { class: "zonos--checkout-payment zonos--elements" }, index.h("div", { class: "zonos--group" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, cart.translate('Payment method')), renderPayment())));
     }
     get ele() { return index.getElement(this); }
     static get watchers() { return {
+        "continueLoading": ["continueLoadingWatcher"],
         "hasStripePaymentError": ["stripePaymentErrorWatcher"]
     }; }
 };

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

@@ -2,18 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b678ce0c.js');
-const cart = require('./cart-6ac8dc06.js');
-const paypal = require('./paypal-ea8b4ca0.js');
-const zonosStore = require('./zonosStore-8971eb65.js');
-const handleFetch = require('./handleFetch-864d3c53.js');
-const createCustomEvent = require('./createCustomEvent-3e982e57.js');
+const index = require('./index-2f90486e.js');
+const cart = require('./cart-9d5e2816.js');
+const paypal = require('./paypal-f9015045.js');
+const zonosStore = require('./zonosStore-46809186.js');
+const handleFetch = require('./handleFetch-3673a0c2.js');
 const isCheckoutMobile = require('./isCheckoutMobile-f491ca7c.js');
 const classes = require('./classes-b7918f56.js');
-const getBorderRadius = require('./getBorderRadius-f97c99ad.js');
-const isDarkColor = require('./isDarkColor-434d71dd.js');
+const createCustomEvent = require('./createCustomEvent-7b6fad95.js');
+const getBorderRadius = require('./getBorderRadius-7d0772bf.js');
+const isDarkColor = require('./isDarkColor-2acf30d1.js');
 const styles = require('./styles-d1e64fb9.js');
-const CheckoutConfig = require('./CheckoutConfig-eaaf62a1.js');
+const CheckoutConfig = require('./CheckoutConfig-d25d548d.js');
 const RemoveIcon = require('./RemoveIcon-081ac073.js');
 
 /**
@@ -274,7 +274,7 @@ const ZonosCheckout = class {
         this.handleCartExpiredCheck = () => {
             var _a;
             // don't check for cart expiration if the cart is in test mode
-            if (createCustomEvent.getIsTestMode()) {
+            if (handleFetch.getIsTestMode()) {
                 handleFetch.log('Not checking for cart expiration in test mode');
                 return false;
             }
@@ -373,6 +373,7 @@ const ZonosCheckout = class {
         this.appearanceSettingsOverride = undefined;
         this.preview = false;
         this.mobile = false;
+        this.overrideStagingMode = undefined;
         this.defaultAddress = null;
         this.forceDialogOpen = false;
         this.defaultAddressParams = null;
@@ -390,6 +391,7 @@ const ZonosCheckout = class {
         this.isCartExpired = false;
         this.inventoryCheckErrorMessage = null;
         this.placedOrderInfo = null;
+        this.clientSecret = cart.stripeStore.clientSecret;
     }
     /**
      * Init cart info handler event
@@ -440,19 +442,8 @@ const ZonosCheckout = class {
         (_b = (_a = zonosStore.zonosStore.checkoutSettings).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
     }
     async buildCartAndInit() {
-        // if tempCartUUID is provided, use it instead of buildCartDetail
-        if (window.Zonos.cartData) {
-            handleFetch.log('tempCartUUID is provided, start building cart');
-            const isExpired = this.handleCartExpiredCheck();
-            if (isExpired) {
-                // Do not proceed if the cart is expired
-                return;
-            }
-            const { adjustments, cartItems } = buildCartItemsByTempCart(window.Zonos.cartData);
-            await cart.cartStoreUpdateItems({ adjustments, cartItems });
-        }
         // if createCartId is provided, use it to build cart. Merchant will provide create a cart from their server side and give the cart id to us.
-        else if (typeof zonosStore.zonosStore.checkoutSettings.createCartId === 'function') {
+        if (typeof zonosStore.zonosStore.checkoutSettings.createCartId === 'function') {
             handleFetch.log('"createCartId" is provided, start building cart');
             const cartId = await zonosStore.zonosStore.checkoutSettings.createCartId();
             window.Zonos.cartId = cartId;
@@ -460,17 +451,28 @@ const ZonosCheckout = class {
             const cartData = cartResult === null || cartResult === void 0 ? void 0 : cartResult.cartData;
             if (!cartData) {
                 handleFetch.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 cart.cartStoreUpdateItems({ adjustments, cartItems });
         }
+        // if tempCartUUID is provided, use it instead of buildCartDetail
+        else if (window.Zonos.cartData) {
+            handleFetch.log('tempCartUUID is provided, start building cart');
+            const isExpired = this.handleCartExpiredCheck();
+            if (isExpired) {
+                // Do not proceed if the cart is expired
+                return false;
+            }
+            const { adjustments, cartItems } = buildCartItemsByTempCart(window.Zonos.cartData);
+            await cart.cartStoreUpdateItems({ adjustments, cartItems });
+        }
         else if (zonosStore.zonosStore.checkoutSettings.buildCartDetail &&
             cart.localizationStore.selectedCountryCode) {
             handleFetch.log('build cart detail');
@@ -758,12 +760,21 @@ const ZonosCheckout = class {
             phone,
         };
     }
+    overrideStagingModeChanged() {
+        cart.cartStore.isStagingMode = !!this.overrideStagingMode;
+    }
     /**
      * Setup all of the event listeners for the component on first load
      */
     async init() {
         cart.stripeStore.stripe = window.Zonos.stripe;
         this.stripe = window.Zonos.stripe;
+        // Set staging mode on init
+        cart.cartStore.isStagingMode = handleFetch.getIsStagingMode();
+        // Override staging mode if it's provided
+        if (typeof this.overrideStagingMode !== 'undefined') {
+            cart.cartStore.isStagingMode = this.overrideStagingMode;
+        }
         // check if bigcommerce, if user enters the shipping address that's in the shipping zone at bigcommerce checkout
         watchBigcommerceDomesticCheckout({
             domesticRedirectedBtnSelector: CheckoutConfig.domesticRedirectedBtnSelector,
@@ -1002,6 +1013,10 @@ const ZonosCheckout = class {
     handleAddressChange() {
         cart.stripeStoreReset();
     }
+    handleClientSecretChange() {
+        // apply theme to stripe elements
+        void this.applyStripeTheme();
+    }
     handleOpenChange() {
         const overflowAttrKey = 'data-zonos-overflow-origin';
         const body = document.body;
@@ -1066,6 +1081,8 @@ const ZonosCheckout = class {
     }
     render() {
         var _a, _b, _c, _d;
+        // Set client secret so that we can add this to @Watch listener
+        this.clientSecret = cart.stripeStore.clientSecret;
         const dialogLoading = 
         // if it's last step, don't need to check stripe elements
         (cart.cartStore.step !== 'finish' &&
@@ -1093,13 +1110,14 @@ const ZonosCheckout = class {
                 : logoUrl;
             return (index.h("div", { class: "zonos--logo" }, logo && (index.h("img", { alt: `${zonosStore.zonosStore.organizationName} logo`, src: logo }))));
         };
-        const isTestMode = createCustomEvent.getIsTestMode();
+        const isTestMode = handleFetch.getIsTestMode();
         const renderTopHeader = () => {
             const urlParams = new URLSearchParams(window.location.search);
             const zonosQaUrl = urlParams.get('zonosQaUrl');
             const zonosDebug = urlParams.get('zonosDebug');
             const zonosE2ETest = urlParams.get('zonosE2ETest');
-            return (index.h("zonos-v-stack", null, index.h("div", { class: "zonos--logo-wrapper" }, renderLogo(), isTestMode && (index.h("zonos-badge", { badgeColor: "orange", size: "small" }, cart.translate('Test mode'))), zonosDebug === '1' && (index.h("zonos-badge", { badgeColor: "cyan", size: "small" }, "debug")), zonosQaUrl && (index.h("zonos-badge", { badgeColor: "purple", size: "small" }, zonosQaUrl)), zonosE2ETest && (index.h("zonos-badge", { badgeColor: "gray", size: "small" }, "E2E Test"))), index.h("zonos-checkout-progress-tabs", { backgroundColor: 
+            const zonosStagingMode = this.overrideStagingMode || handleFetch.getIsStagingMode();
+            return (index.h("zonos-v-stack", null, index.h("div", { class: "zonos--logo-wrapper" }, renderLogo(), isTestMode && (index.h("zonos-badge", { badgeColor: "orange", size: "small" }, cart.translate('Test mode'))), zonosStagingMode && (index.h("zonos-badge", { badgeColor: "red", size: "small" }, cart.translate('Staging mode'))), zonosDebug === '1' && (index.h("zonos-badge", { badgeColor: "cyan", size: "small" }, "debug")), zonosQaUrl && (index.h("zonos-badge", { badgeColor: "purple", size: "small" }, zonosQaUrl)), zonosE2ETest && (index.h("zonos-badge", { badgeColor: "gray", size: "small" }, "E2E Test"))), index.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 => (index.h("zonos-custom-message", { icon: MessageIcon, message: x.message })))));
         };
@@ -1115,7 +1133,7 @@ const ZonosCheckout = class {
                     '--zonos--primary-color': !this.isMobile
                         ? colorPrimary
                         : undefined,
-                }) }, !this.isMobile && renderTopHeader(), cart.cartStore.step === 'customer-info' && (index.h("zonos-customer-info", { continueLoading: this.submitLoading, defaultAddress: this.defaultAddress || this.defaultAddressParams, isMobile: this.isMobile, onContinueClicked: () => this.handleCustomerInfoContinue(), submitBtnColor: submitButtonColor })), cart.cartStore.step === 'shipping' && (index.h("zonos-shipping", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleShippingContinue(), submitBtnColor: submitButtonColor })), cart.cartStore.step === 'payment' && (index.h("zonos-checkout-payment", { continueLoading: this.submitLoading, onContinueClicked: async () => {
+                }) }, !this.isMobile && renderTopHeader(), cart.cartStore.step === 'customer-info' && (index.h("zonos-customer-info", { continueLoading: this.submitLoading, defaultAddress: this.defaultAddress || this.defaultAddressParams, isMobile: this.isMobile, onContinueClicked: () => this.handleCustomerInfoContinue(), submitBtnColor: submitButtonColor })), cart.cartStore.step === 'shipping' && (index.h("zonos-shipping", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleShippingContinue(), submitBtnColor: submitButtonColor })), cart.cartStore.step === 'payment' && (index.h("zonos-checkout-payment", { continueLoading: this.submitLoading, isMobile: this.isMobile, onContinueClicked: async () => {
                     await this.handleStripePaymentContinue();
                 }, submitBtnColor: submitButtonColor }))), index.h("div", { class: "zonos--right", "data-theme": rightSideTheme }, this.isMobile && renderTopHeader(), index.h("div", { class: "zonos--right-actions" }, window.Zonos.showBaseForeign && (index.h("zonos-currency-toggle", null)), !this.isLegacyCheckout && (index.h("zonos-button", { class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon.RemoveIcon }), noBackground: true, onClick: () => this.closeDialogHandler() }))), index.h("div", { class: "flex--wrapper" }, index.h("div", { class: "zonos--wrapper" }, index.h("zonos-review", { collapsed: this.collapseReviewMobile, mobile: this.isMobile, onClick: () => {
                     // do nothing if it's not mobile
@@ -1182,8 +1200,10 @@ const ZonosCheckout = class {
     static get assetsDirs() { return ["assets"]; }
     static get watchers() { return {
         "appearanceSettingsOverride": ["appearanceSettingsOverrideChanged", "handleAppearanceSettingsOverrideChange"],
+        "overrideStagingMode": ["overrideStagingModeChanged"],
         "mobile": ["handleMobileChange"],
         "defaultAddress": ["handleAddressChange"],
+        "clientSecret": ["handleClientSecretChange"],
         "open": ["handleOpenChange"]
     }; }
 };

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b678ce0c.js');
-const zonosStore = require('./zonosStore-8971eb65.js');
+const index = require('./index-2f90486e.js');
+const zonosStore = require('./zonosStore-46809186.js');
 
 const zonosCollapseCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;overflow:hidden}:host div{position:relative}:host iframe{width:0;height:100%;position:absolute;top:0;border:0}";
 const ZonosCollapseStyle0 = zonosCollapseCss;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b678ce0c.js');
+const index = require('./index-2f90486e.js');
 
 function format(first, middle, last) {
     return ((first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : ''));

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

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b678ce0c.js');
-const cart = require('./cart-6ac8dc06.js');
-const zonosStore = require('./zonosStore-8971eb65.js');
-const handleFetch = require('./handleFetch-864d3c53.js');
-require('./isDarkColor-434d71dd.js');
-require('./getBorderRadius-f97c99ad.js');
+const index = require('./index-2f90486e.js');
+const cart = require('./cart-9d5e2816.js');
+const zonosStore = require('./zonosStore-46809186.js');
+const handleFetch = require('./handleFetch-3673a0c2.js');
+require('./isDarkColor-2acf30d1.js');
+require('./getBorderRadius-7d0772bf.js');
 
 const getZonosSettings = async () => {
     const { errors, json, zonosMode } = await handleFetch.handleFetch('/api/zonos-elements/zonos-settings');
@@ -243,17 +243,38 @@ const ZonosController = class {
             return oldReplaceState.apply(this, arguments);
         };
     }
+    injectCustomHTML(htmlString) {
+        if (!htmlString) {
+            return;
+        }
+        // Skip injecting custom HTML for legacy checkout
+        if (!window.Zonos.isLegacyCheckout) {
+            handleFetch.log('=== Skip injecting custom HTML for hosted checkout', 'info');
+            return;
+        }
+        handleFetch.log('=== Injecting custom HTML for hosted checkout');
+        const template = document.createElement('template');
+        template.innerHTML = htmlString;
+        const scripts = template.content.querySelectorAll('script');
+        scripts.forEach(script => {
+            const scriptToInject = document.createElement('script');
+            scriptToInject.textContent = script.innerHTML;
+            document.body.appendChild(scriptToInject);
+        });
+    }
     async componentWillLoad() {
         this.initHistoryListener();
         zonosStore.zonosStore.zonosApiKey = this.zonosApiKey;
         // running with scope async function to avoid blocking the main thread
         (async () => {
-            var _a, _b;
+            var _a, _b, _c;
             const { errors, json, zonosMode } = await getZonosSettings();
             if (((_a = errors[0]) === null || _a === void 0 ? void 0 : _a.type.toString()) === '403') {
                 handleFetch.log('Failed to load zonos settings. This domain may not have access', 'warn');
                 return;
             }
+            const customHTML = ((_b = json === null || json === void 0 ? void 0 : json.checkoutSettings) === null || _b === void 0 ? void 0 : _b.customHTML) || '';
+            this.injectCustomHTML(customHTML);
             // init zonos notification
             this.initZonosNotification();
             const getLogoUrl = () => {
@@ -288,7 +309,7 @@ const ZonosController = class {
             // init localization store
             await cart.initLocalizationStore();
             // checkout init
-            const publishableKey = ((_b = json === null || json === void 0 ? void 0 : json.checkoutSettings) === null || _b === void 0 ? void 0 : _b.externalServiceTokens.find(item => item.type === 'STRIPE_PUBLISHABLE_TOKEN')) || null;
+            const publishableKey = ((_c = json === null || json === void 0 ? void 0 : json.checkoutSettings) === null || _c === void 0 ? void 0 : _c.externalServiceTokens.find(item => item.type === 'STRIPE_PUBLISHABLE_TOKEN')) || null;
             if (!publishableKey || !this.stripeInitEvent) {
                 handleFetch.log('Checkout failed to load -- missing publishable key', 'warn');
                 return;
@@ -325,7 +346,7 @@ const ZonosController = class {
      */
     async reset() {
         cart.cartStore.checkoutSessionId = null;
-        cart.stripeStore.clientSecret = null;
+        cart.stripeStore.clientSecret = '';
     }
     /**
      * Override the setting
@@ -357,7 +378,7 @@ const ZonosController = class {
         zonosStore.zonosStore.organizationName = organizationName;
     }
     render() {
-        return index.h(index.Host, { key: '816d389c90fab1125a041db4b125557afa5e9372', class: "zonos--elements" });
+        return index.h(index.Host, { key: 'f59eff8c088135e8fc791d03f668e787ec0d0912', class: "zonos--elements" });
     }
 };
 ZonosController.style = ZonosControllerStyle0;

package/dist/cjs/zonos-country-flag.cjs.entry.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b678ce0c.js');
-const cart = require('./cart-6ac8dc06.js');
-const zonosStore = require('./zonosStore-8971eb65.js');
+const index = require('./index-2f90486e.js');
+const cart = require('./cart-9d5e2816.js');
+const zonosStore = require('./zonosStore-46809186.js');
 const classes = require('./classes-b7918f56.js');
-require('./handleFetch-864d3c53.js');
-require('./isDarkColor-434d71dd.js');
-require('./getBorderRadius-f97c99ad.js');
+require('./handleFetch-3673a0c2.js');
+require('./isDarkColor-2acf30d1.js');
+require('./getBorderRadius-7d0772bf.js');
 
 const zonosCountryFlagCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex}:host .flag-container{position:relative;overflow:hidden;width:100%;height:100%}:host .flag-icon{position:absolute;top:0;left:0;width:100%;height:100%;background-position:center;background-repeat:no-repeat;background-size:cover}";
 const ZonosCountryFlagStyle0 = zonosCountryFlagCss;

package/dist/cjs/zonos-country-select_4.cjs.entry.js

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b678ce0c.js');
-const cart = require('./cart-6ac8dc06.js');
-const zonosStore = require('./zonosStore-8971eb65.js');
+const index = require('./index-2f90486e.js');
+const cart = require('./cart-9d5e2816.js');
+const zonosStore = require('./zonosStore-46809186.js');
 const formatStringWithLinks = require('./formatStringWithLinks-52341fc7.js');
-const isDarkColor = require('./isDarkColor-434d71dd.js');
+const isDarkColor = require('./isDarkColor-2acf30d1.js');
 const ILanguage = require('./ILanguage-98b04442.js');
-require('./handleFetch-864d3c53.js');
-require('./getBorderRadius-f97c99ad.js');
+require('./handleFetch-3673a0c2.js');
+require('./getBorderRadius-7d0772bf.js');
 
 /**
  * Fuse.js v7.0.0 - Lightweight fuzzy-search (http://fusejs.io)