@zonos/elements 1.3.143 → 1.3.145

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

@@ -1,14 +1,14 @@
-import { r as registerInstance, a as getAssetPath, h, H as Host, F as Fragment, c as createEvent, d as getElement } from './index-986b5ff2.js';
-import { e as cartStore, J as currencyFormat, q as translate, K as cartStoreHasOneEligibleItem, L as stripeStoreApplyPromoCode, M as stripeStoreRemovePromoCode, f as stripeStore, A as stripeStoreReset, d as stripeStoreRetrievePayment, t as trackConversionEvent, N as stripeStoreResetPromoCode, O as stripeStoreMessageBasedOnStatus, l as localizationStore, P as stripeStoreTranslateAddressToLatin, Q as cartStoreUpdateSelectedShippingOption, R as cartStoreGetShippingTransitInfo, S as sortServiceLevelOptionsByAmount } from './cart-acba54d0.js';
+import { r as registerInstance, a as getAssetPath, h, H as Host, F as Fragment, c as createEvent, d as getElement } from './index-d82f06f2.js';
+import { e as cartStore, J as currencyFormat, q as translate, K as cartStoreHasOneEligibleItem, L as stripeStoreApplyPromoCode, M as stripeStoreRemovePromoCode, f as stripeStore, A as stripeStoreReset, d as stripeStoreRetrievePayment, t as trackConversionEvent, N as stripeStoreResetPromoCode, O as stripeStoreMessageBasedOnStatus, l as localizationStore, w as cartStoreNextStep, P as stripeStoreTranslateAddressToLatin, Q as cartStoreUpdateSelectedShippingOption, R as cartStoreGetShippingTransitInfo, S as sortServiceLevelOptionsByAmount } from './cart-887f7d66.js';
 import { c as classes } from './classes-0d95c529.js';
-import { s as submitGtag, b as paypalStore, c as paypalStoreReset, i as isContrastColor } from './paypal-3401f757.js';
-import { z as zonosStore, g as getZonosStoreTheme, d as zonosStoreFontFamily } from './zonosStore-708637e7.js';
-import { c as createCustomEvent, g as getIsTestMode } from './createCustomEvent-31a792d3.js';
-import { g as getBorderRadius } from './getBorderRadius-4aca63d4.js';
-import { h as handleFetch, l as log, s as sendErrorLog, j as jsonParse, b as allLogs } from './handleFetch-badf4543.js';
+import { s as submitGtag, c as paypalStoreReset, b as paypalStore, i as isContrastColor } from './paypal-6fd5749b.js';
+import { z as zonosStore, g as getZonosStoreTheme, d as zonosStoreFontFamily } from './zonosStore-44efd080.js';
+import { h as handleFetch, l as log, s as sendErrorLog, j as jsonParse, g as getIsTestMode, d as allLogs, b as logError, a as getIsStagingMode } from './handleFetch-b4633675.js';
+import { c as createCustomEvent } from './createCustomEvent-58159025.js';
+import { g as getBorderRadius } from './getBorderRadius-b32d4218.js';
 import { i as isCheckoutMobile } from './isCheckoutMobile-8846dccb.js';
 import { l as languages } from './ILanguage-cd6acb72.js';
-import { i as isDarkColor, t as tinycolor } from './isDarkColor-4915739f.js';
+import { i as isDarkColor, t as tinycolor } from './isDarkColor-10f38df6.js';
 import { i as isColorVariable } from './isColorVariable-0a94004f.js';
 import { c as containsNonLatinChars } from './containsNonLatinChars-2d8810c3.js';
 import { c as countryRequireTaxId, s as shipToTaxIdLabels } from './TaxId-915ef042.js';
@@ -1525,6 +1525,20 @@ const ZonosCheckoutFinish = class {
             stripeStoreReset();
             cartStore.checkoutSessionId = null;
         };
+        this.checkStagingOrderStatus = async () => {
+            this.notificationType = 'success';
+            this.notificationTitle = translate("You're all set!");
+            this.notificationMessages =
+                stripeStoreMessageBasedOnStatus('succeeded').messages;
+            // override title if notification type is success
+            this.useOverrideSuccessNotification();
+            await this.handleSuccessBehavior();
+            // reset promo when checkout is finished
+            stripeStoreResetPromoCode();
+            stripeStoreReset();
+            paypalStoreReset();
+            cartStore.checkoutSessionId = null;
+        };
         this.checkPaypalPaymentStatus = async () => {
             // render error message if there's an error
             if (paypalStore.paypalErrorMessage) {
@@ -1591,7 +1605,10 @@ const ZonosCheckoutFinish = class {
             this.isLoading = false;
             return;
         }
-        if (paypalStore.orderIdCreated) {
+        if (cartStore.isStagingMode) {
+            void this.checkStagingOrderStatus();
+        }
+        else if (paypalStore.orderIdCreated) {
             void this.checkPaypalPaymentStatus();
         }
         else {
@@ -1600,17 +1617,22 @@ const ZonosCheckoutFinish = class {
     }
     render() {
         const isTestMode = getIsTestMode();
-        return (h(Host, { key: '7e1b8c53a085ae60d8189aef087a9c458c3dccd0', class: "zonos--checkout-finish zonos--elements", style: {
+        return (h(Host, { key: '6ad050e91df2b56c55e142cc69d0b582c0c8469a', class: "zonos--checkout-finish zonos--elements", style: {
                 '--zonos--border-radius': getBorderRadius({
                     overrideBorderStyle: this.borderRadius,
                 }),
-            } }, !this.isLoading && (h("div", { key: 'b31bed34ca67255cdc6ef6b546f5d6a880e4b309', class: "zonos--finish-details" }, h("div", { key: 'e3cb21607b8f1256b3096fe4f21a806a74174f66', class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), h("zonos-text", { key: 'fac1d2134f1c032cefeb9d36c5c4677767ed0972', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", { key: '94b8da1ca6a391295c22d285e65530f5dfe97a41', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), this.shouldRenderCloseButtonForRedirectBehavior() && (h("zonos-button", { key: '4ebf2bb81ceb0d27b4fd582400606b238a3dfbae',
+            } }, !this.isLoading && (h("div", { key: '8e47016dc83cbe1af79f384285c606fcb737e475', class: "zonos--finish-details" }, h("div", { key: 'd1c14e8db7aa70d04b77b10bb0d8b1e3de5529e3', class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), h("zonos-text", { key: 'd26717fe5d844f2fe6a87b05a566ef0da2d740f7', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", { key: '7845c4ff7872884d8e5b8b275eb8a76efa855e52', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), this.shouldRenderCloseButtonForRedirectBehavior() && (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" }, translate('Close'))), !window.Zonos.isLegacyCheckout &&
-            this.shouldRenderKeepShoppingButton() && (h("zonos-button", { key: '6548724f163ad59fc3cb502c24d82ae7585c6b7f', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText))), isTestMode &&
+            this.shouldRenderKeepShoppingButton() && (h("zonos-button", { key: '550bd94f93b842d71c23bd158362b711797dd4a1', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText))), isTestMode &&
             cartStore.step === 'finish' &&
-            this.notificationType === 'success' && (h("div", { key: 'f9aeb5d59dc4b0f163868e5a2358a69a0884bb56', class: "zonos--finish-button-wrapper" }, h("zonos-button", { key: '98ae907d33624e54f84f88519abacd1ea178554c', backgroundColor: "gray-0", buttonColor: "gray-1000", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), h("zonos-button", { key: '506eeb9eabe16fed59b98b9eef49552542272233', onClick: () => this.redirectToUrl(`/orders/all`), size: "lg", variant: "primary" }, "View order in Dashboard")))))));
+            this.notificationType === 'success' && (h("div", { key: '8fdaa205f4517e0a9a6c5482e80d6dbccba6a585', class: "zonos--finish-button-wrapper" }, h("zonos-button", { key: '41b524fc8dea752a6f4745191970ac665e7b9fa8', backgroundColor: "gray-0", buttonColor: "gray-1000", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), 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"]; }
 };
@@ -1670,6 +1692,44 @@ const ZonosCheckoutFooter = class {
 };
 ZonosCheckoutFooter.style = ZonosCheckoutFooterStyle0;
 
+const placeTestOrder = async () => {
+    var _a, _b;
+    const shipToPartyId = (_a = cartStore.partiesData.find(party => party.type === 'DESTINATION')) === null || _a === void 0 ? void 0 : _a.id;
+    const billToPartyId = (_b = cartStore.partiesData.find(party => party.type === 'PAYOR')) === null || _b === void 0 ? void 0 : _b.id;
+    const checkoutSessionId = cartStore.checkoutSessionId;
+    if (!checkoutSessionId || !billToPartyId || !shipToPartyId) {
+        logError('Missing required data', {
+            billToPartyId,
+            checkoutSessionId,
+            shipToPartyId,
+        });
+        return {
+            errors: ['Missing required data'],
+            json: null,
+        };
+    }
+    const payload = {
+        billToPartyId,
+        checkoutSessionId,
+        shipToPartyId,
+    };
+    const { errors, json } = await handleFetch('/api/zonos-elements/place-test-order', {
+        body: payload,
+        method: 'POST',
+    });
+    if (errors.length || !json) {
+        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>`;
@@ -1707,11 +1767,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
+            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) {
@@ -1735,25 +1815,43 @@ const ZonosCheckoutPayment = class {
             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())));
     }
     get ele() { return getElement(this); }
     static get watchers() { return {
+        "continueLoading": ["continueLoadingWatcher"],
         "hasStripePaymentError": ["stripePaymentErrorWatcher"]
     }; }
 };

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

@@ -1,15 +1,15 @@
-import { r as registerInstance, h, H as Host, F as Fragment } from './index-986b5ff2.js';
-import { l as localizationStore, s as stripeStoreGetDomesticShippingSession, a as localizationStoreUpdateSelectedCountryCode, b as stripeStoreCleanupDomesticShippingSession, c as stripeStoreSaveDomesticShippingSession, i as initStripeElements, d as stripeStoreRetrievePayment, e as cartStore, f as stripeStore, g as cartStoreUpdateItems, h as cartStoreReset, j as cartStoreResetTabItems, k as cartStoreClearCheckoutInterval, m as stripeStoreInitCheckoutSession, n as cartStoreStartCheckoutInterval, t as trackConversionEvent, o as getCheckoutSessionBody, p as cartStoreUpdateToErrorState, q as translate, r as getZCountryUrlParam, u as cartStoreSetCheckoutSession, v as stripeStorePrefetchLandedCost, w as cartStoreNextStep, x as stripeStoreHandleInventoryCheck, y as stripeStoreConfirmPayment, z as stripeStoreHandleInventoryRefund, A as stripeStoreReset, B as localizationStoreOnUpdate } from './cart-acba54d0.js';
-import { p as paypalStoreHasPaypalEnabled, s as submitGtag, a as paypalInitScript, b as paypalStore } from './paypal-3401f757.js';
-import { z as zonosStore, g as getZonosStoreTheme, m as mergeConfig } from './zonosStore-708637e7.js';
-import { h as handleFetch, l as log, a as logError, s as sendErrorLog, g as getElapsedTime, b as allLogs, j as jsonParse } from './handleFetch-badf4543.js';
-import { g as getIsTestMode, c as createCustomEvent } from './createCustomEvent-31a792d3.js';
+import { r as registerInstance, h, H as Host, F as Fragment } from './index-d82f06f2.js';
+import { l as localizationStore, s as stripeStoreGetDomesticShippingSession, a as localizationStoreUpdateSelectedCountryCode, b as stripeStoreCleanupDomesticShippingSession, c as stripeStoreSaveDomesticShippingSession, i as initStripeElements, d as stripeStoreRetrievePayment, e as cartStore, f as stripeStore, g as cartStoreUpdateItems, h as cartStoreReset, j as cartStoreResetTabItems, k as cartStoreClearCheckoutInterval, m as stripeStoreInitCheckoutSession, n as cartStoreStartCheckoutInterval, t as trackConversionEvent, o as getCheckoutSessionBody, p as cartStoreUpdateToErrorState, q as translate, r as getZCountryUrlParam, u as cartStoreSetCheckoutSession, v as stripeStorePrefetchLandedCost, w as cartStoreNextStep, x as stripeStoreHandleInventoryCheck, y as stripeStoreConfirmPayment, z as stripeStoreHandleInventoryRefund, A as stripeStoreReset, B as localizationStoreOnUpdate } from './cart-887f7d66.js';
+import { p as paypalStoreHasPaypalEnabled, s as submitGtag, a as paypalInitScript, b as paypalStore } from './paypal-6fd5749b.js';
+import { z as zonosStore, g as getZonosStoreTheme, m as mergeConfig } from './zonosStore-44efd080.js';
+import { h as handleFetch, l as log, b as logError, s as sendErrorLog, c as getElapsedTime, d as allLogs, g as getIsTestMode, j as jsonParse, a as getIsStagingMode } from './handleFetch-b4633675.js';
 import { i as isCheckoutMobile } from './isCheckoutMobile-8846dccb.js';
 import { c as classes } from './classes-0d95c529.js';
-import { g as getBorderRadius } from './getBorderRadius-4aca63d4.js';
-import { i as isDarkColor } from './isDarkColor-4915739f.js';
+import { c as createCustomEvent } from './createCustomEvent-58159025.js';
+import { g as getBorderRadius } from './getBorderRadius-b32d4218.js';
+import { i as isDarkColor } from './isDarkColor-10f38df6.js';
 import { s as styles } from './styles-6fc2fad9.js';
-import { c as checkoutHiddenBtnSelector, s as setupCartData, d as domesticRedirectedBtnSelector } from './CheckoutConfig-262008fe.js';
+import { c as checkoutHiddenBtnSelector, s as setupCartData, d as domesticRedirectedBtnSelector } from './CheckoutConfig-573bd959.js';
 import { R as RemoveIcon } from './RemoveIcon-9dc5dd1a.js';
 
 /**
@@ -369,6 +369,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;
@@ -386,6 +387,7 @@ const ZonosCheckout = class {
         this.isCartExpired = false;
         this.inventoryCheckErrorMessage = null;
         this.placedOrderInfo = null;
+        this.clientSecret = stripeStore.clientSecret;
     }
     /**
      * Init cart info handler event
@@ -436,19 +438,8 @@ const ZonosCheckout = class {
         (_b = (_a = 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) {
-            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 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.checkoutSettings.createCartId === 'function') {
+        if (typeof zonosStore.checkoutSettings.createCartId === 'function') {
             log('"createCartId" is provided, start building cart');
             const cartId = await zonosStore.checkoutSettings.createCartId();
             window.Zonos.cartId = cartId;
@@ -456,17 +447,28 @@ const ZonosCheckout = class {
             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 });
         }
+        // if tempCartUUID is provided, use it instead of buildCartDetail
+        else if (window.Zonos.cartData) {
+            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 cartStoreUpdateItems({ adjustments, cartItems });
+        }
         else if (zonosStore.checkoutSettings.buildCartDetail &&
             localizationStore.selectedCountryCode) {
             log('build cart detail');
@@ -754,12 +756,21 @@ const ZonosCheckout = class {
             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,
@@ -998,6 +1009,10 @@ const ZonosCheckout = class {
     handleAddressChange() {
         stripeStoreReset();
     }
+    handleClientSecretChange() {
+        // apply theme to stripe elements
+        void this.applyStripeTheme();
+    }
     handleOpenChange() {
         const overflowAttrKey = 'data-zonos-overflow-origin';
         const body = document.body;
@@ -1062,6 +1077,8 @@ const ZonosCheckout = class {
     }
     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' &&
@@ -1095,7 +1112,8 @@ const ZonosCheckout = class {
             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 })))));
         };
@@ -1111,7 +1129,7 @@ const ZonosCheckout = class {
                     '--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
@@ -1178,8 +1196,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/esm/zonos-collapse.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host, d as getElement } from './index-986b5ff2.js';
-import { d as zonosStoreFontFamily } from './zonosStore-708637e7.js';
+import { r as registerInstance, h, H as Host, d as getElement } from './index-d82f06f2.js';
+import { d as zonosStoreFontFamily } from './zonosStore-44efd080.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/esm/zonos-component.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-986b5ff2.js';
+import { r as registerInstance, h } from './index-d82f06f2.js';
 
 function format(first, middle, last) {
     return ((first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : ''));

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

@@ -1,9 +1,9 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-986b5ff2.js';
-import { D as isValidSelector, f as stripeStore, E as initLocalizationStore, e as cartStore, a as localizationStoreUpdateSelectedCountryCode } from './cart-acba54d0.js';
-import { z as zonosStore, b as zonosStoreInitSetting, d as zonosStoreFontFamily } from './zonosStore-708637e7.js';
-import { h as handleFetch, a as logError, l as log } from './handleFetch-badf4543.js';
-import './isDarkColor-4915739f.js';
-import './getBorderRadius-4aca63d4.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-d82f06f2.js';
+import { D as isValidSelector, f as stripeStore, E as initLocalizationStore, e as cartStore, a as localizationStoreUpdateSelectedCountryCode } from './cart-887f7d66.js';
+import { z as zonosStore, b as zonosStoreInitSetting, d as zonosStoreFontFamily } from './zonosStore-44efd080.js';
+import { h as handleFetch, b as logError, l as log } from './handleFetch-b4633675.js';
+import './isDarkColor-10f38df6.js';
+import './getBorderRadius-b32d4218.js';
 
 const getZonosSettings = async () => {
     const { errors, json, zonosMode } = await handleFetch('/api/zonos-elements/zonos-settings');
@@ -239,17 +239,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) {
+            log('=== Skip injecting custom HTML for hosted checkout', 'info');
+            return;
+        }
+        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.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') {
                 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 = () => {
@@ -284,7 +305,7 @@ const ZonosController = class {
             // init localization store
             await 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) {
                 log('Checkout failed to load -- missing publishable key', 'warn');
                 return;
@@ -321,7 +342,7 @@ const ZonosController = class {
      */
     async reset() {
         cartStore.checkoutSessionId = null;
-        stripeStore.clientSecret = null;
+        stripeStore.clientSecret = '';
     }
     /**
      * Override the setting
@@ -353,7 +374,7 @@ const ZonosController = class {
         zonosStore.organizationName = organizationName;
     }
     render() {
-        return h(Host, { key: '816d389c90fab1125a041db4b125557afa5e9372', class: "zonos--elements" });
+        return h(Host, { key: 'f59eff8c088135e8fc791d03f668e787ec0d0912', class: "zonos--elements" });
     }
 };
 ZonosController.style = ZonosControllerStyle0;

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

@@ -1,10 +1,10 @@
-import { r as registerInstance, h, H as Host, d as getElement } from './index-986b5ff2.js';
-import { l as localizationStore } from './cart-acba54d0.js';
-import { d as zonosStoreFontFamily } from './zonosStore-708637e7.js';
+import { r as registerInstance, h, H as Host, d as getElement } from './index-d82f06f2.js';
+import { l as localizationStore } from './cart-887f7d66.js';
+import { d as zonosStoreFontFamily } from './zonosStore-44efd080.js';
 import { c as classes } from './classes-0d95c529.js';
-import './handleFetch-badf4543.js';
-import './isDarkColor-4915739f.js';
-import './getBorderRadius-4aca63d4.js';
+import './handleFetch-b4633675.js';
+import './isDarkColor-10f38df6.js';
+import './getBorderRadius-b32d4218.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/esm/zonos-country-select_4.entry.js

@@ -1,11 +1,11 @@
-import { r as registerInstance, h, H as Host, d as getElement } from './index-986b5ff2.js';
-import { a as localizationStoreUpdateSelectedCountryCode, q as translate, l as localizationStore } from './cart-acba54d0.js';
-import { d as zonosStoreFontFamily } from './zonosStore-708637e7.js';
+import { r as registerInstance, h, H as Host, d as getElement } from './index-d82f06f2.js';
+import { a as localizationStoreUpdateSelectedCountryCode, q as translate, l as localizationStore } from './cart-887f7d66.js';
+import { d as zonosStoreFontFamily } from './zonosStore-44efd080.js';
 import { f as formatStringWithLinks } from './formatStringWithLinks-9e819405.js';
-import { i as isDarkColor } from './isDarkColor-4915739f.js';
+import { i as isDarkColor } from './isDarkColor-10f38df6.js';
 import { l as languages } from './ILanguage-cd6acb72.js';
-import './handleFetch-badf4543.js';
-import './getBorderRadius-4aca63d4.js';
+import './handleFetch-b4633675.js';
+import './getBorderRadius-b32d4218.js';
 
 /**
  * Fuse.js v7.0.0 - Lightweight fuzzy-search (http://fusejs.io)