@zonos/elements 1.2.3 → 1.2.4-alpha.10

package/dist/components/zonos-checkout.js

@@ -39,523 +39,525 @@ const MessageIcon = `<svg width="18" height="18" viewBox="0 0 18 18" fill="none"
 
 const RemoveIcon = `<svg color="var(--amino-gray-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" data-is-secondary-color="true" fill="var(--amino-gray-200)" fill-rule="evenodd"></path><path clip-rule="evenodd" d="M8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>`;
 
-const zonosCheckoutCss = ".sc-zonos-checkout-h{font-family:Inter;display:block}.sc-zonos-checkout-h img.sc-zonos-checkout{max-width:100%}.sc-zonos-checkout-h dl.sc-zonos-checkout,.sc-zonos-checkout-h dd.sc-zonos-checkout,.sc-zonos-checkout-h h1.sc-zonos-checkout,.sc-zonos-checkout-h h2.sc-zonos-checkout,.sc-zonos-checkout-h h3.sc-zonos-checkout,.sc-zonos-checkout-h h4.sc-zonos-checkout,.sc-zonos-checkout-h h5.sc-zonos-checkout,.sc-zonos-checkout-h h6.sc-zonos-checkout,.sc-zonos-checkout-h hr.sc-zonos-checkout,.sc-zonos-checkout-h figure.sc-zonos-checkout,.sc-zonos-checkout-h p.sc-zonos-checkout,.sc-zonos-checkout-h pre.sc-zonos-checkout{margin:0}.sc-zonos-checkout-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar{width:10px}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{display:-ms-flexbox;display:flex;height:100%;overflow:hidden;border-radius:var(--border-radius, var(--amino-radius-10))}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout,.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{-ms-flex:1;flex:1;padding:var(--amino-space-48) var(--amino-space-56)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout{background-color:var(--primary-color, var(--amino-gray-0));border-right:1px solid var(--amino-gray-200)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{background-color:var(--amino-gray-0);padding-bottom:var(--amino-space-80)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{width:100%;max-height:100%;height:100%;overflow:auto;-ms-flex-direction:column;flex-direction:column;background-color:var(--amino-gray-0);-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:var(--amino-space-24);padding-bottom:50px}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--header.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;width:100%}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--header.sc-zonos-checkout img.sc-zonos-checkout{width:150px;min-width:150px}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--logo.sc-zonos-checkout{margin-bottom:0}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout zonos-checkout-finish.sc-zonos-checkout{-ms-flex:1;flex:1}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--back-button.sc-zonos-checkout{margin-bottom:var(--amino-space-24)}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{padding:0 var(--amino-space-8) var(--amino-space-8)}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--payment-error-banner.sc-zonos-checkout{margin-top:var(--amino-space-24)}.sc-zonos-checkout-h .zonos--right.sc-zonos-checkout{position:relative}.sc-zonos-checkout-h .zonos--right.sc-zonos-checkout .zonos--close-button.sc-zonos-checkout{position:absolute;right:var(--amino-space-24);top:var(--amino-space-24)}.sc-zonos-checkout-h .zonos--footer.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center;position:absolute;bottom:var(--amino-space-32);right:var(--amino-space-56);gap:var(--amino-space-8)}.sc-zonos-checkout-h .zonos--wrapper.sc-zonos-checkout{overflow:auto;max-height:100%;position:relative}.sc-zonos-checkout-h .flex--wrapper.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-height:100%}.sc-zonos-checkout-h .zonos--logo.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.sc-zonos-checkout-h .zonos--checkout-default-message.sc-zonos-checkout{margin-left:var(--amino-space-76);margin-bottom:var(--amino-space-8)}.preview.sc-zonos-checkout-h{min-width:500px;margin:auto}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{border:var(--amino-border)}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{padding:var(--amino-space-32)}.mobile.sc-zonos-checkout-h{min-width:auto}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:auto;border-radius:0;max-height:100%;height:100%;border:0}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout,.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{padding:var(--amino-space-12)}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout{-ms-flex-order:2;order:2}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{-ms-flex-order:1;order:1;padding-top:var(--amino-space-16)}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--amino-space-16);margin-top:var(--amino-space-24);border:var(--amino-border);border-radius:var(--border-radius, var(--amino-radius-10));background-color:var(--amino-gray-50);padding:var(--amino-space-12);margin-top:var(--amino-space-32)}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{max-height:100%}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--footer.sc-zonos-checkout{-ms-flex-order:3;order:3}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{width:auto}.mobile.sc-zonos-checkout-h .zonos--cart-subtotal.sc-zonos-checkout{margin:0}.mobile.sc-zonos-checkout-h .zonos--footer.sc-zonos-checkout{bottom:0;left:0;padding:var(--amino-space-12);position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--amino-gray-0)}";
+const zonosCheckoutCss = ".sc-zonos-checkout-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-checkout-h *.sc-zonos-checkout{font-family:var(--font-family, Inter), Inter}.sc-zonos-checkout-h img.sc-zonos-checkout{max-width:100%}.sc-zonos-checkout-h dl.sc-zonos-checkout,.sc-zonos-checkout-h dd.sc-zonos-checkout,.sc-zonos-checkout-h h1.sc-zonos-checkout,.sc-zonos-checkout-h h2.sc-zonos-checkout,.sc-zonos-checkout-h h3.sc-zonos-checkout,.sc-zonos-checkout-h h4.sc-zonos-checkout,.sc-zonos-checkout-h h5.sc-zonos-checkout,.sc-zonos-checkout-h h6.sc-zonos-checkout,.sc-zonos-checkout-h hr.sc-zonos-checkout,.sc-zonos-checkout-h figure.sc-zonos-checkout,.sc-zonos-checkout-h p.sc-zonos-checkout,.sc-zonos-checkout-h pre.sc-zonos-checkout{margin:0}.sc-zonos-checkout-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar{width:10px}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{display:-ms-flexbox;display:flex;height:100%;overflow:hidden;border-radius:var(--border-radius, var(--amino-radius-10))}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout,.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{-ms-flex:1;flex:1;padding:var(--amino-space-48) var(--amino-space-56)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout{background-color:var(--primary-color, var(--amino-gray-0));border-right:1px solid var(--amino-gray-200)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{background-color:var(--amino-gray-0);padding-bottom:var(--amino-space-80)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{width:100%;max-height:100%;height:100%;overflow:auto;-ms-flex-direction:column;flex-direction:column;background-color:var(--amino-gray-0);-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:var(--amino-space-24);padding-bottom:50px}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--header.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;width:100%}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--header.sc-zonos-checkout img.sc-zonos-checkout{width:150px;min-width:150px}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--logo.sc-zonos-checkout{margin-bottom:0}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout zonos-checkout-finish.sc-zonos-checkout{-ms-flex:1;flex:1}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--back-button.sc-zonos-checkout{margin-bottom:var(--amino-space-24)}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{padding:0 var(--amino-space-8) var(--amino-space-8)}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--payment-error-banner.sc-zonos-checkout{margin-top:var(--amino-space-24)}.sc-zonos-checkout-h .zonos--right.sc-zonos-checkout{position:relative}.sc-zonos-checkout-h .zonos--right.sc-zonos-checkout .zonos--close-button.sc-zonos-checkout{position:absolute;right:var(--amino-space-24);top:var(--amino-space-24)}.sc-zonos-checkout-h .zonos--footer.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center;position:absolute;bottom:var(--amino-space-32);right:var(--amino-space-56);gap:var(--amino-space-8)}.sc-zonos-checkout-h .zonos--wrapper.sc-zonos-checkout{overflow:auto;max-height:100%;position:relative}.sc-zonos-checkout-h .flex--wrapper.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-height:100%}.sc-zonos-checkout-h .zonos--logo.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.sc-zonos-checkout-h .zonos--checkout-default-message.sc-zonos-checkout{margin-left:var(--amino-space-76);margin-bottom:var(--amino-space-8)}.preview.sc-zonos-checkout-h{min-width:500px;margin:auto}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{border:var(--amino-border)}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{padding:var(--amino-space-32)}.mobile.sc-zonos-checkout-h{min-width:auto}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:auto;border-radius:0;max-height:100%;height:100%;border:0}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout,.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{padding:var(--amino-space-12)}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout{-ms-flex-order:2;order:2}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{-ms-flex-order:1;order:1;padding-top:var(--amino-space-16)}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--amino-space-16);margin-top:var(--amino-space-24);border:var(--amino-border);border-radius:var(--border-radius, var(--amino-radius-10));background-color:var(--amino-gray-50);padding:var(--amino-space-12);margin-top:var(--amino-space-32)}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{max-height:100%}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--footer.sc-zonos-checkout{-ms-flex-order:3;order:3}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{width:auto}.mobile.sc-zonos-checkout-h .zonos--cart-subtotal.sc-zonos-checkout{margin:0}.mobile.sc-zonos-checkout-h .zonos--footer.sc-zonos-checkout{bottom:0;left:0;padding:var(--amino-space-12);position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--amino-gray-0)}";
 
 const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.applyStripeTheme = async () => {
-      var _a, _b, _c;
-      const theme = ((_a = this.appearanceSettingsOverride) === null || _a === void 0 ? void 0 : _a.theme) || zonosStore.appearance.theme;
-      await initStripeElements({
-        overrideBorderRaidus: (_b = this.appearanceSettingsOverride) === null || _b === void 0 ? void 0 : _b.style,
-        overridePrimaryColor: (_c = this.appearanceSettingsOverride) === null || _c === void 0 ? void 0 : _c.colorPrimary,
-        // only override theme or theme from appearance if it's mobile
-        overrideTheme: this.isMobile ? theme : undefined,
-      });
-    };
-    this.isShippableCountry = (showLog = true) => {
-      if (!localizationStore.localizationLoaded) {
-        return false;
-      }
-      // if localization is loaded and the localization is not a shippable country, keep the original click event
-      if (!localizationStore.isShippableCountry) {
-        if (showLog) {
-          log(`Checkout: not shippable country`);
-        }
-        return false;
-      }
-      return true;
-    };
-    this.getCurrentLocalePageEnum = () => {
-      switch (cartStore.step) {
-        case 'customer-info':
-          return 'checkout_customer_info';
-        case 'shipping':
-          return 'checkout_shipping_info';
-        case 'payment':
-          return 'checkout_payment_info';
-        default:
-          return null;
-      }
-    };
-    this.appearanceSettingsOverride = undefined;
-    this.preview = false;
-    this.mobile = false;
-    this.defaultAddress = null;
-    this.forceDialogOpen = false;
-    this.open = this.forceDialogOpen;
-    this.stripe = window.Zonos.stripe;
-    this.submitLoading = false;
-    this.paymentError = false;
-    this.collapseReviewMobile = false;
-    this.isAttachError = false;
-    this.isMobile = false;
-    this.zonosReviewRef = undefined;
-    this.storybookPaymentStatusOverride = undefined;
-  }
-  /**
-   * Init cart info handler event
-   */
-  async initCartInfoHandler(e) {
-    const cartItems = e.detail;
-    void cartStoreUpdateItems(cartItems);
-  }
-  /**
-   * Close dialog action
-   */
-  async closeDialogHandler() {
-    submitGtag('zonos-checkout-close');
-    this.open = this.forceDialogOpen || false;
-    if (!this.preview && cartStore.step === 'finish') {
-      // reset cart store if it's not preview mode and only when checkout is in the finish step.
-      cartStoreReset();
+    constructor() {
+        super();
+        this.__registerHost();
+        this.applyStripeTheme = async () => {
+            var _a, _b, _c;
+            const theme = ((_a = this.appearanceSettingsOverride) === null || _a === void 0 ? void 0 : _a.theme) || zonosStore.appearance.theme;
+            await initStripeElements({
+                overrideBorderRaidus: (_b = this.appearanceSettingsOverride) === null || _b === void 0 ? void 0 : _b.style,
+                overridePrimaryColor: (_c = this.appearanceSettingsOverride) === null || _c === void 0 ? void 0 : _c.colorPrimary,
+                // only override theme or theme from appearance if it's mobile
+                overrideTheme: this.isMobile ? theme : undefined,
+            });
+        };
+        this.isShippableCountry = (showLog = true) => {
+            if (!localizationStore.localizationLoaded) {
+                return false;
+            }
+            // if localization is loaded and the localization is not a shippable country, keep the original click event
+            if (!localizationStore.isShippableCountry) {
+                if (showLog) {
+                    log(`Checkout: not shippable country`);
+                }
+                return false;
+            }
+            return true;
+        };
+        this.getCurrentLocalePageEnum = () => {
+            switch (cartStore.step) {
+                case 'customer-info':
+                    return 'checkout_customer_info';
+                case 'shipping':
+                    return 'checkout_shipping_info';
+                case 'payment':
+                    return 'checkout_payment_info';
+                default:
+                    return null;
+            }
+        };
+        this.appearanceSettingsOverride = undefined;
+        this.preview = false;
+        this.mobile = false;
+        this.defaultAddress = null;
+        this.forceDialogOpen = false;
+        this.open = this.forceDialogOpen;
+        this.stripe = window.Zonos.stripe;
+        this.submitLoading = false;
+        this.paymentError = false;
+        this.collapseReviewMobile = false;
+        this.isAttachError = false;
+        this.isMobile = false;
+        this.zonosReviewRef = undefined;
+        this.storybookPaymentStatusOverride = undefined;
     }
-    // reset step to customer info
-    cartStore.step = 'customer-info';
-  }
-  async buildCartAndInit() {
-    if (zonosStore.checkoutSettings.buildCartDetail) {
-      log('build cart detail');
-      const cartItems = await zonosStore.checkoutSettings.buildCartDetail();
-      await cartStoreUpdateItems(cartItems);
+    /**
+     * Init cart info handler event
+     */
+    async initCartInfoHandler(e) {
+        const cartItems = e.detail;
+        void cartStoreUpdateItems(cartItems);
     }
-    // if client secret doesn't exist, request a new one.
-    if (!stripeStore.clientSecret) {
-      const success = await stripeStoreInitCheckoutSession();
-      log(`stripeStoreInitCheckoutSession: ${success}`);
-      if (!success) {
-        return false;
-      }
+    /**
+     * Close dialog action
+     */
+    async closeDialogHandler() {
+        submitGtag('zonos-checkout-close');
+        this.open = this.forceDialogOpen || false;
+        if (!this.preview && cartStore.step === 'finish') {
+            // reset cart store if it's not preview mode and only when checkout is in the finish step.
+            cartStoreReset();
+        }
+        // reset step to customer info
+        cartStore.step = 'customer-info';
     }
-    // apply theme to stripe elements
-    await this.applyStripeTheme();
-    return true;
-  }
-  attachCheckout() {
-    const buttonAnchorSelector = zonosStore.checkoutSettings.placeOrderButtonSelector;
-    if (!buttonAnchorSelector) {
-      // do nothing if button element is not found
-      return;
+    async buildCartAndInit() {
+        if (zonosStore.checkoutSettings.buildCartDetail) {
+            log('build cart detail');
+            const cartItems = await zonosStore.checkoutSettings.buildCartDetail();
+            await cartStoreUpdateItems(cartItems);
+        }
+        // if client secret doesn't exist, request a new one.
+        if (!stripeStore.clientSecret) {
+            const success = await stripeStoreInitCheckoutSession();
+            log(`stripeStoreInitCheckoutSession: ${success}`);
+            if (!success) {
+                return false;
+            }
+        }
+        // apply theme to stripe elements
+        await this.applyStripeTheme();
+        return true;
     }
-    const buttonAnchorElements = document.querySelectorAll(buttonAnchorSelector);
-    // only attach event once, and looping through all of the button elements
-    buttonAnchorElements.forEach(button => {
-      const isEventAttached = button.getAttribute('data-zonos-checkout-attached');
-      if (isEventAttached) {
-        // do nothing if event is already attached
-        return;
-      }
-      button.addEventListener('click', async (e) => {
-        // do nothing if it's not shippable country
-        if (!this.isShippableCountry()) {
-          return;
+    attachCheckout() {
+        const buttonAnchorSelector = zonosStore.checkoutSettings.placeOrderButtonSelector;
+        if (!buttonAnchorSelector) {
+            // do nothing if button element is not found
+            return;
         }
-        e.preventDefault();
-        e.stopPropagation();
-        log('zonos checkout button clicked');
-        // start loading
-        stripeStore.isFetchingSession = true;
-        this.open = true;
+        const buttonAnchorElements = document.querySelectorAll(buttonAnchorSelector);
+        // only attach event once, and looping through all of the button elements
+        buttonAnchorElements.forEach(button => {
+            const isEventAttached = button.getAttribute('data-zonos-checkout-attached');
+            if (isEventAttached) {
+                // do nothing if event is already attached
+                return;
+            }
+            button.addEventListener('click', async (e) => {
+                // do nothing if it's not shippable country
+                if (!this.isShippableCountry()) {
+                    return;
+                }
+                e.preventDefault();
+                e.stopPropagation();
+                log('zonos checkout button clicked');
+                // start loading
+                stripeStore.isFetchingSession = true;
+                this.open = true;
+                try {
+                    // buildCartDetail need to be catch since it may throw error
+                    const result = await this.buildCartAndInit();
+                    if (!result) {
+                        throw new Error('Error building cart');
+                    }
+                    submitGtag('zonos-checkout-start');
+                }
+                catch (err) {
+                    // stop loading
+                    stripeStore.isFetchingSession = false;
+                    cartStoreUpdateToErrorState({
+                        messages: [
+                            translate("There's been an error creating your checkout session. Please reload and try again or contact support if the error persists"),
+                        ],
+                        title: translate('Error creating Checkout'),
+                    });
+                }
+            });
+            button.setAttribute('data-zonos-checkout-attached', 'true');
+        });
+    }
+    appearanceSettingsOverrideChanged() {
+        if (!this.appearanceSettingsOverride) {
+            return;
+        }
+        // apply theme to stripe elements
+        void this.applyStripeTheme();
+    }
+    /**
+     * Setup all of the event listeners for the component on first load
+     */
+    async init() {
+        stripeStore.stripe = window.Zonos.stripe;
+        this.stripe = window.Zonos.stripe;
+        const hideInternationalOrderInterval = setInterval(() => {
+            const internationalSelector = window.Zonos.internationalHideSelector;
+            if (!internationalSelector) {
+                // cleanup right away if selector is not found
+                clearInterval(hideInternationalOrderInterval);
+                return;
+            }
+            // hide the selector if it's international
+            const isInternationalOrder = this.isShippableCountry(false);
+            const selector = document.querySelectorAll(internationalSelector);
+            if (!isInternationalOrder) {
+                // show the selector when it's domestic
+                selector === null || selector === void 0 ? void 0 : selector.forEach(el => {
+                    const element = el;
+                    const display = element.getAttribute('data-zonos-checkout-original-display') ||
+                        getComputedStyle(element).display;
+                    // fallback to initial (browser value) if "display" is not found
+                    element.style.display = display || 'initial';
+                });
+                return;
+            }
+            selector === null || selector === void 0 ? void 0 : selector.forEach(el => {
+                const element = el;
+                const display = element.style.display;
+                // save the display state so we can restore it later
+                element.setAttribute('data-zonos-checkout-original-display', display);
+                element.style.display = 'none';
+            });
+        }, 100);
+        // only init checkout if visitor's country is in the shipping zones.
+        const interval = setInterval(() => {
+            stripeStore.stripe = window.Zonos.stripe;
+            this.stripe = window.Zonos.stripe;
+            if (!this.stripe) {
+                log('waiting for stripe to be loaded');
+                return;
+            }
+            if (this.storybookPaymentStatusOverride) {
+                clearInterval(interval);
+                return;
+            }
+            log('init checkout');
+            if (this.preview || this.forceDialogOpen) {
+                void this.buildCartAndInit();
+            }
+            else {
+                this.attachCheckout();
+                // keep checking for checkout selector every 50ms just in case the selector is not loaded in the DOM yet
+                setInterval(() => {
+                    this.attachCheckout();
+                }, 50);
+            }
+            clearInterval(interval);
+        }, 50);
+        setTimeout(() => {
+            // if localization is not loaded after 10 seconds, stop the interval and don't init checkout
+            clearInterval(interval);
+        }, 10000);
+    }
+    /**
+     * For storybook to set to finish step, this is to trigger in the story for zonos-checkout-finish
+     */
+    async setToFinishStep(forcePaymentStatus) {
+        cartStore.step = 'finish';
+        this.storybookPaymentStatusOverride = forcePaymentStatus;
+    }
+    async handleCustomerInfoContinue() {
+        this.submitLoading = true;
+        // fetch landed cost data if we not fetching.
+        await stripeStorePrefetchLandedCost();
+        // keep checking landed cost data until it's ready to move to next screen
+        const interval = setInterval(() => {
+            if (cartStore.landedCostData || !stripeStore.isFetchingLandedCost) {
+                if (cartStore.landedCostData) {
+                    // only go to next step if landed cost data is ready
+                    cartStoreNextStep();
+                }
+                this.submitLoading = false;
+                clearInterval(interval);
+            }
+        }, 500);
+    }
+    async handleShippingContinue() {
+        this.submitLoading = true;
+        // show loading for the button for a bit
+        setTimeout(() => {
+            cartStoreNextStep();
+            this.submitLoading = false;
+        }, 500);
+    }
+    async handleCheckoutPaymentContinue() {
+        // reset error state
+        this.paymentError = false;
+        this.submitLoading = true;
         try {
-          // buildCartDetail need to be catch since it may throw error
-          const result = await this.buildCartAndInit();
-          if (!result) {
-            throw new Error('Error building cart');
-          }
-          submitGtag('zonos-checkout-start');
+            await stripeStoreConfirmPayment();
+            cartStoreNextStep();
         }
         catch (err) {
-          // stop loading
-          stripeStore.isFetchingSession = false;
-          cartStoreUpdateToErrorState({
-            messages: [
-              translate("There's been an error creating your checkout session. Please reload and try again or contact support if the error persists"),
-            ],
-            title: translate('Error creating Checkout'),
-          });
+            // eslint-disable-next-line no-console
+            console.error(err);
+            this.paymentError = true;
         }
-      });
-      button.setAttribute('data-zonos-checkout-attached', 'true');
-    });
-  }
-  appearanceSettingsOverrideChanged() {
-    if (!this.appearanceSettingsOverride) {
-      return;
+        this.submitLoading = false;
     }
-    // apply theme to stripe elements
-    void this.applyStripeTheme();
-  }
-  /**
-   * Setup all of the event listeners for the component on first load
-   */
-  async init() {
-    stripeStore.stripe = window.Zonos.stripe;
-    this.stripe = window.Zonos.stripe;
-    const hideInternationalOrderInterval = setInterval(() => {
-      const internationalSelector = window.Zonos.internationalHideSelector;
-      if (!internationalSelector) {
-        // cleanup right away if selector is not found
-        clearInterval(hideInternationalOrderInterval);
-        return;
-      }
-      // hide the selector if it's international
-      const isInternationalOrder = this.isShippableCountry(false);
-      const selector = document.querySelectorAll(internationalSelector);
-      if (!isInternationalOrder) {
-        // show the selector when it's domestic
-        selector === null || selector === void 0 ? void 0 : selector.forEach(el => {
-          const element = el;
-          const display = element.getAttribute('data-zonos-checkout-original-display') ||
-            getComputedStyle(element).display;
-          // fallback to initial (browser value) if "display" is not found
-          element.style.display = display || 'initial';
-        });
-        return;
-      }
-      selector === null || selector === void 0 ? void 0 : selector.forEach(el => {
-        const element = el;
-        const display = element.style.display;
-        // save the display state so we can restore it later
-        element.setAttribute('data-zonos-checkout-original-display', display);
-        element.style.display = 'none';
-      });
-    }, 100);
-    // only init checkout if visitor's country is in the shipping zones.
-    const interval = setInterval(() => {
-      stripeStore.stripe = window.Zonos.stripe;
-      this.stripe = window.Zonos.stripe;
-      if (!this.stripe) {
-        log('waiting for stripe to be loaded');
-        return;
-      }
-      if (this.storybookPaymentStatusOverride) {
-        clearInterval(interval);
-        return;
-      }
-      log('init checkout');
-      if (this.preview || this.forceDialogOpen) {
-        void this.buildCartAndInit();
-      }
-      else {
-        this.attachCheckout();
-        // keep checking for checkout selector every 50ms just in case the selector is not loaded in the DOM yet
-        setInterval(() => {
-          this.attachCheckout();
-        }, 50);
-      }
-      clearInterval(interval);
-    }, 50);
-    setTimeout(() => {
-      // if localization is not loaded after 10 seconds, stop the interval and don't init checkout
-      clearInterval(interval);
-    }, 10000);
-  }
-  /**
-   * For storybook to set to finish step, this is to trigger in the story for zonos-checkout-finish
-   */
-  async setToFinishStep(forcePaymentStatus) {
-    cartStore.step = 'finish';
-    this.storybookPaymentStatusOverride = forcePaymentStatus;
-  }
-  async handleCustomerInfoContinue() {
-    this.submitLoading = true;
-    // fetch landed cost data if we not fetching.
-    await stripeStorePrefetchLandedCost();
-    // keep checking landed cost data until it's ready to move to next screen
-    const interval = setInterval(() => {
-      if (cartStore.landedCostData || !stripeStore.isFetchingLandedCost) {
-        if (cartStore.landedCostData) {
-          // only go to next step if landed cost data is ready
-          cartStoreNextStep();
+    async handleFinishClick() {
+        // reset stripe store
+        stripeStoreReset();
+        if (this.preview) {
+            cartStore.step = 'customer-info';
+            await this.init();
+            return;
         }
-        this.submitLoading = false;
-        clearInterval(interval);
-      }
-    }, 500);
-  }
-  async handleShippingContinue() {
-    this.submitLoading = true;
-    // show loading for the button for a bit
-    setTimeout(() => {
-      cartStoreNextStep();
-      this.submitLoading = false;
-    }, 500);
-  }
-  async handleCheckoutPaymentContinue() {
-    // reset error state
-    this.paymentError = false;
-    this.submitLoading = true;
-    try {
-      await stripeStoreConfirmPayment();
-      cartStoreNextStep();
+        // reset cart store
+        cartStoreReset();
+        // reset url
+        const url = window.location.href;
+        // Remove query parameters
+        const cleanUrl = url.split('?')[0];
+        // Update the URL without query parameters
+        window.history.replaceState({}, document.title, cleanUrl);
+        this.open = false;
+        // Reload the page
+        window.location.reload();
     }
-    catch (err) {
-      // eslint-disable-next-line no-console
-      console.error(err);
-      this.paymentError = true;
+    async handleBackClick() {
+        // close the modal if back button is clicked on customer info step
+        if (cartStore.step === 'customer-info') {
+            await this.closeDialogHandler();
+            return;
+        }
+        cartStorePreviousStep();
     }
-    this.submitLoading = false;
-  }
-  async handleFinishClick() {
-    // reset stripe store
-    stripeStoreReset();
-    if (this.preview) {
-      cartStore.step = 'customer-info';
-      await this.init();
-      return;
+    handleWindowResize() {
+        this.isMobile = isCheckoutMobile(this.mobile);
+        // apply theme to stripe elements
+        void this.applyStripeTheme();
+        log(`mobile: ${this.isMobile}`);
     }
-    // reset cart store
-    cartStoreReset();
-    // reset url
-    const url = window.location.href;
-    // Remove query parameters
-    const cleanUrl = url.split('?')[0];
-    // Update the URL without query parameters
-    window.history.replaceState({}, document.title, cleanUrl);
-    this.open = false;
-  }
-  async handleBackClick() {
-    // close the modal if back button is clicked on customer info step
-    if (cartStore.step === 'customer-info') {
-      await this.closeDialogHandler();
-      return;
+    handleMobileChange() {
+        this.isMobile = isCheckoutMobile(this.mobile);
+        // apply theme to stripe elements
+        void this.applyStripeTheme();
+        log(`mobile: ${this.isMobile}`);
     }
-    cartStorePreviousStep();
-  }
-  handleWindowResize() {
-    this.isMobile = isCheckoutMobile(this.mobile);
-    // apply theme to stripe elements
-    void this.applyStripeTheme();
-    log(`mobile: ${this.isMobile}`);
-  }
-  handleMobileChange() {
-    this.isMobile = isCheckoutMobile(this.mobile);
-    // apply theme to stripe elements
-    void this.applyStripeTheme();
-    log(`mobile: ${this.isMobile}`);
-  }
-  componentWillLoad() {
-    void this.init();
-    this.isMobile = isCheckoutMobile(this.mobile);
-    log(`mobile: ${this.isMobile}`);
-  }
-  // do clean up when component is unmounted
-  disconnectedCallback() {
-    // reset stripe store
-    stripeStoreReset();
-    // reset cart store
-    cartStoreReset();
-  }
-  render() {
-    var _a;
-    const dialogLoading = 
-    // if it's last step, don't need to check stripe elements
-    (cartStore.step !== 'finish' &&
-      cartStore.step !== 'error' &&
-      !stripeStore.stripeElements) ||
-      stripeStore.isFetchingSession;
-    const { colorPrimary, colorSecondary, logoUrl, style } = mergeConfig(zonosStore.appearance, this.appearanceSettingsOverride);
-    const hasFooter = zonosStore.appearance.zonosAttribution === 'ENABLED';
-    const rightSideTheme = zonosStore.appearance.theme;
-    const themePrimaryColorBased = colorPrimary && isDarkColor(colorPrimary) ? 'DARK' : 'LIGHT';
-    // use right side theme if it's mobile, otherwise use themePrimaryColorBased
-    const leftSideTheme = this.isMobile
-      ? rightSideTheme
-      : themePrimaryColorBased;
-    // only use submit button color if it's on desktop
-    const submitButtonColor = !this.isMobile ? colorSecondary : undefined;
-    const { customMessages } = localizationStore;
-    const defaultMessage = ((_a = customMessages.find(x => x.pageName === 'checkout_default')) === null || _a === void 0 ? void 0 : _a.message) ||
-      'Know about duties and taxes before you buy. Shop with confidence!';
-    const localePageEnum = this.getCurrentLocalePageEnum();
-    const filteredMessages = customMessages.filter(x => x.pageName === localePageEnum);
-    const renderLogo = () => (h("div", { class: "zonos--logo" }, logoUrl && (h("img", { alt: `${zonosStore.organizationName} logo`, src: logoUrl, width: 100 }))));
-    const renderTopHeader = () => (h("zonos-v-stack", null, renderLogo(), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message }))), h("div", null, h("zonos-button", { class: "zonos--back-button", icon: h("zonos-icon", { content: LeftArrow }), noBackground: true, noPaddingLeft: true, noPaddingRight: true, onClick: () => this.handleBackClick(), theme: leftSideTheme }, translate('Back')))));
-    const renderFooter = () => hasFooter && (h("div", { class: "zonos--footer", "data-theme": rightSideTheme }, h("zonos-text", { type: "hintText" }, translate('Powered by')), h("zonos-logo", { theme: rightSideTheme, width: "100px" })));
-    const renderContent = () => {
-      var _a;
-      const submitBtnType = this.isMobile ? 'primary' : undefined;
-      const reviewElementSize = (_a = this.zonosReviewRef) === null || _a === void 0 ? void 0 : _a.scrollHeight;
-      return (h("div", { class: 'zonos--content', style: {
-          '--border-radius': getBorderRadius(style),
-        } }, cartStore.step !== 'finish' && cartStore.step !== 'error' && (h(Fragment, null, h("div", { class: "zonos--left", "data-theme": leftSideTheme, style: {
-          '--primary-color': !this.isMobile ? colorPrimary : '',
-        } }, !this.isMobile && renderTopHeader(), cartStore.step === 'customer-info' && (h("zonos-customer-info", { continueLoading: this.submitLoading, defaultAddress: this.defaultAddress, onContinueClicked: () => this.handleCustomerInfoContinue(), submitBtnColor: submitButtonColor, submitBtnType: submitBtnType })), cartStore.step === 'shipping' && (h("zonos-shipping", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleShippingContinue(), submitBtnColor: submitButtonColor, submitBtnType: submitBtnType })), cartStore.step === 'payment' && (h("zonos-checkout-payment", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleCheckoutPaymentContinue(), paymentError: this.paymentError, submitBtnColor: submitButtonColor, submitBtnType: submitBtnType }))), h("div", { class: "zonos--right", "data-theme": rightSideTheme }, this.isMobile && renderTopHeader(), !this.isMobile && (h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: () => this.closeDialogHandler() })), h("div", { class: "flex--wrapper" }, h("div", { class: "zonos--wrapper" }, h("zonos-collapse", { collapseSize: reviewElementSize,
-        // only collapse on mobile
-        collapsed: this.collapseReviewMobile && this.isMobile }, h("zonos-review", { collapsed: this.collapseReviewMobile, mobile: this.isMobile, onClick: () => {
-          // do nothing if it's not mobile
-          if (!this.isMobile) {
-            return;
-          }
-          this.collapseReviewMobile =
-            !this.collapseReviewMobile;
-        }, ref: el => (this.zonosReviewRef = el) }), h("zonos-cart-items", null))), h("zonos-v-stack", { spacing: 16 }, h("zonos-cart-subtotal", null), h("zonos-custom-message", { class: "zonos--checkout-default-message", icon: MessageIcon, message: defaultMessage }))), !this.isMobile && renderFooter()), this.isMobile && renderFooter())), (cartStore.step === 'finish' || cartStore.step === 'error') && (h("div", { class: "zonos--done", "data-theme": rightSideTheme }, h("div", { class: "zonos--header" }, renderLogo(), h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: () => this.handleFinishClick(), theme: rightSideTheme })), h("zonos-checkout-finish", { borderRadius: style, onCloseClick: () => this.handleFinishClick(), overrideNotification: cartStore.step === 'error' && !!cartStore.error
-          ? Object.assign(Object.assign({}, cartStore.error), { type: 'error' }) : undefined, storybookForceStatus: this.storybookPaymentStatusOverride })))));
-    };
-    return (h(Host, { class: classes([
-        'zonos--checkout zonos--elements',
-        hasFooter && 'has-footer',
-        this.preview && 'preview',
-        this.isMobile && 'mobile',
-      ]) }, this.preview ? (renderContent()) : (h("zonos-dialog", { borderStyle: style, "data-theme": rightSideTheme, height: "980px", isLoading: dialogLoading, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeDialogHandler(), open: this.open, width: "1200px" }, renderContent()))));
-  }
-  static get assetsDirs() { return ["assets"]; }
-  static get watchers() { return {
-    "appearanceSettingsOverride": ["appearanceSettingsOverrideChanged"],
-    "mobile": ["handleMobileChange"]
-  }; }
-  static get style() { return zonosCheckoutCss; }
+    componentWillLoad() {
+        void this.init();
+        this.isMobile = isCheckoutMobile(this.mobile);
+        log(`mobile: ${this.isMobile}`);
+    }
+    // do clean up when component is unmounted
+    disconnectedCallback() {
+        // reset stripe store
+        stripeStoreReset();
+        // reset cart store
+        cartStoreReset();
+    }
+    render() {
+        var _a;
+        const dialogLoading = 
+        // if it's last step, don't need to check stripe elements
+        (cartStore.step !== 'finish' &&
+            cartStore.step !== 'error' &&
+            !stripeStore.stripeElements) ||
+            stripeStore.isFetchingSession;
+        const { colorPrimary, colorSecondary, logoUrl, style } = mergeConfig(zonosStore.appearance, this.appearanceSettingsOverride);
+        const hasFooter = zonosStore.appearance.zonosAttribution === 'ENABLED';
+        const rightSideTheme = zonosStore.appearance.theme;
+        const themePrimaryColorBased = colorPrimary && isDarkColor(colorPrimary) ? 'DARK' : 'LIGHT';
+        // use right side theme if it's mobile, otherwise use themePrimaryColorBased
+        const leftSideTheme = this.isMobile
+            ? rightSideTheme
+            : themePrimaryColorBased;
+        // only use submit button color if it's on desktop
+        const submitButtonColor = !this.isMobile ? colorSecondary : undefined;
+        const { customMessages } = localizationStore;
+        const defaultMessage = ((_a = customMessages.find(x => x.pageName === 'checkout_default')) === null || _a === void 0 ? void 0 : _a.message) ||
+            'Know about duties and taxes before you buy. Shop with confidence!';
+        const localePageEnum = this.getCurrentLocalePageEnum();
+        const filteredMessages = customMessages.filter(x => x.pageName === localePageEnum);
+        const renderLogo = () => (h("div", { class: "zonos--logo" }, logoUrl && (h("img", { alt: `${zonosStore.organizationName} logo`, src: logoUrl, width: 100 }))));
+        const renderTopHeader = () => (h("zonos-v-stack", null, renderLogo(), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message }))), h("div", null, h("zonos-button", { class: "zonos--back-button", icon: h("zonos-icon", { content: LeftArrow }), noBackground: true, noPaddingLeft: true, noPaddingRight: true, onClick: () => this.handleBackClick(), theme: leftSideTheme }, translate('Back')))));
+        const renderFooter = () => hasFooter && (h("div", { class: "zonos--footer", "data-theme": rightSideTheme }, h("zonos-text", { type: "hintText" }, translate('Powered by')), h("zonos-logo", { theme: rightSideTheme, width: "100px" })));
+        const renderContent = () => {
+            var _a;
+            const submitBtnType = this.isMobile ? 'primary' : undefined;
+            const reviewElementSize = (_a = this.zonosReviewRef) === null || _a === void 0 ? void 0 : _a.scrollHeight;
+            return (h("div", { class: 'zonos--content', style: {
+                    '--border-radius': getBorderRadius(style),
+                } }, cartStore.step !== 'finish' && cartStore.step !== 'error' && (h(Fragment, null, h("div", { class: "zonos--left", "data-theme": leftSideTheme, style: {
+                    '--primary-color': !this.isMobile ? colorPrimary : '',
+                } }, !this.isMobile && renderTopHeader(), cartStore.step === 'customer-info' && (h("zonos-customer-info", { continueLoading: this.submitLoading, defaultAddress: this.defaultAddress, onContinueClicked: () => this.handleCustomerInfoContinue(), submitBtnColor: submitButtonColor, submitBtnType: submitBtnType })), cartStore.step === 'shipping' && (h("zonos-shipping", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleShippingContinue(), submitBtnColor: submitButtonColor, submitBtnType: submitBtnType })), cartStore.step === 'payment' && (h("zonos-checkout-payment", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleCheckoutPaymentContinue(), paymentError: this.paymentError, submitBtnColor: submitButtonColor, submitBtnType: submitBtnType }))), h("div", { class: "zonos--right", "data-theme": rightSideTheme }, this.isMobile && renderTopHeader(), !this.isMobile && (h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: () => this.closeDialogHandler() })), h("div", { class: "flex--wrapper" }, h("div", { class: "zonos--wrapper" }, h("zonos-collapse", { collapseSize: reviewElementSize,
+                // only collapse on mobile
+                collapsed: this.collapseReviewMobile && this.isMobile }, h("zonos-review", { collapsed: this.collapseReviewMobile, mobile: this.isMobile, onClick: () => {
+                    // do nothing if it's not mobile
+                    if (!this.isMobile) {
+                        return;
+                    }
+                    this.collapseReviewMobile =
+                        !this.collapseReviewMobile;
+                }, ref: el => (this.zonosReviewRef = el) }), h("zonos-cart-items", null))), h("zonos-v-stack", { spacing: 16 }, h("zonos-cart-subtotal", null), h("zonos-custom-message", { class: "zonos--checkout-default-message", icon: MessageIcon, message: defaultMessage }))), !this.isMobile && renderFooter()), this.isMobile && renderFooter())), (cartStore.step === 'finish' || cartStore.step === 'error') && (h("div", { class: "zonos--done", "data-theme": rightSideTheme }, h("div", { class: "zonos--header" }, renderLogo(), h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: () => this.handleFinishClick(), theme: rightSideTheme })), h("zonos-checkout-finish", { borderRadius: style, onCloseClick: () => this.handleFinishClick(), overrideNotification: cartStore.step === 'error' && !!cartStore.error
+                    ? Object.assign(Object.assign({}, cartStore.error), { type: 'error' }) : undefined, storybookForceStatus: this.storybookPaymentStatusOverride })))));
+        };
+        return (h(Host, { class: classes([
+                'zonos--checkout zonos--elements',
+                hasFooter && 'has-footer',
+                this.preview && 'preview',
+                this.isMobile && 'mobile',
+            ]) }, this.preview ? (renderContent()) : (h("zonos-dialog", { borderStyle: style, "data-theme": rightSideTheme, height: "980px", isLoading: dialogLoading, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeDialogHandler(), open: this.open, width: "1200px" }, renderContent()))));
+    }
+    static get assetsDirs() { return ["assets"]; }
+    static get watchers() { return {
+        "appearanceSettingsOverride": ["appearanceSettingsOverrideChanged"],
+        "mobile": ["handleMobileChange"]
+    }; }
+    static get style() { return zonosCheckoutCss; }
 }, [2, "zonos-checkout", {
-    "appearanceSettingsOverride": [16],
-    "preview": [4],
-    "mobile": [4],
-    "defaultAddress": [16],
-    "forceDialogOpen": [4, "force-dialog-open"],
-    "open": [32],
-    "stripe": [32],
-    "submitLoading": [32],
-    "paymentError": [32],
-    "collapseReviewMobile": [32],
-    "isAttachError": [32],
-    "isMobile": [32],
-    "zonosReviewRef": [32],
-    "storybookPaymentStatusOverride": [32],
-    "closeDialogHandler": [64],
-    "init": [64],
-    "setToFinishStep": [64]
-  }, [[16, "zonos--init-cart-info", "initCartInfoHandler"], [9, "resize", "handleWindowResize"]], {
-    "appearanceSettingsOverride": ["appearanceSettingsOverrideChanged"],
-    "mobile": ["handleMobileChange"]
-  }]);
+        "appearanceSettingsOverride": [16],
+        "preview": [4],
+        "mobile": [4],
+        "defaultAddress": [16],
+        "forceDialogOpen": [4, "force-dialog-open"],
+        "open": [32],
+        "stripe": [32],
+        "submitLoading": [32],
+        "paymentError": [32],
+        "collapseReviewMobile": [32],
+        "isAttachError": [32],
+        "isMobile": [32],
+        "zonosReviewRef": [32],
+        "storybookPaymentStatusOverride": [32],
+        "closeDialogHandler": [64],
+        "init": [64],
+        "setToFinishStep": [64]
+    }, [[16, "zonos--init-cart-info", "initCartInfoHandler"], [9, "resize", "handleWindowResize"]], {
+        "appearanceSettingsOverride": ["appearanceSettingsOverrideChanged"],
+        "mobile": ["handleMobileChange"]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["zonos-checkout", "zonos-address", "zonos-badge", "zonos-banner", "zonos-button", "zonos-card", "zonos-cart-items", "zonos-cart-subtotal", "zonos-checkout-finish", "zonos-checkout-payment", "zonos-collapse", "zonos-custom-message", "zonos-customer-info", "zonos-dialog", "zonos-icon", "zonos-link-authentication", "zonos-logo", "zonos-payment", "zonos-review", "zonos-shipping", "zonos-shipping-rich-radio", "zonos-spinner", "zonos-text", "zonos-v-stack"];
-  components.forEach(tagName => { switch (tagName) {
-    case "zonos-checkout":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ZonosCheckout$1);
-      }
-      break;
-    case "zonos-address":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$o();
-      }
-      break;
-    case "zonos-badge":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$n();
-      }
-      break;
-    case "zonos-banner":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$m();
-      }
-      break;
-    case "zonos-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$l();
-      }
-      break;
-    case "zonos-card":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$k();
-      }
-      break;
-    case "zonos-cart-items":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$j();
-      }
-      break;
-    case "zonos-cart-subtotal":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$i();
-      }
-      break;
-    case "zonos-checkout-finish":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$h();
-      }
-      break;
-    case "zonos-checkout-payment":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$g();
-      }
-      break;
-    case "zonos-collapse":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$f();
-      }
-      break;
-    case "zonos-custom-message":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$e();
-      }
-      break;
-    case "zonos-customer-info":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$d();
-      }
-      break;
-    case "zonos-dialog":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$c();
-      }
-      break;
-    case "zonos-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$b();
-      }
-      break;
-    case "zonos-link-authentication":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$a();
-      }
-      break;
-    case "zonos-logo":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$9();
-      }
-      break;
-    case "zonos-payment":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$8();
-      }
-      break;
-    case "zonos-review":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$7();
-      }
-      break;
-    case "zonos-shipping":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "zonos-shipping-rich-radio":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "zonos-spinner":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "zonos-text":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "zonos-v-stack":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zonos-checkout", "zonos-address", "zonos-badge", "zonos-banner", "zonos-button", "zonos-card", "zonos-cart-items", "zonos-cart-subtotal", "zonos-checkout-finish", "zonos-checkout-payment", "zonos-collapse", "zonos-custom-message", "zonos-customer-info", "zonos-dialog", "zonos-icon", "zonos-link-authentication", "zonos-logo", "zonos-payment", "zonos-review", "zonos-shipping", "zonos-shipping-rich-radio", "zonos-spinner", "zonos-text", "zonos-v-stack"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zonos-checkout":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZonosCheckout$1);
+            }
+            break;
+        case "zonos-address":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$o();
+            }
+            break;
+        case "zonos-badge":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$n();
+            }
+            break;
+        case "zonos-banner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$m();
+            }
+            break;
+        case "zonos-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$l();
+            }
+            break;
+        case "zonos-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$k();
+            }
+            break;
+        case "zonos-cart-items":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$j();
+            }
+            break;
+        case "zonos-cart-subtotal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$i();
+            }
+            break;
+        case "zonos-checkout-finish":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$h();
+            }
+            break;
+        case "zonos-checkout-payment":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
+        case "zonos-collapse":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
+        case "zonos-custom-message":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "zonos-customer-info":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "zonos-dialog":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "zonos-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "zonos-link-authentication":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "zonos-logo":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "zonos-payment":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "zonos-review":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "zonos-shipping":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "zonos-shipping-rich-radio":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "zonos-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "zonos-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "zonos-v-stack":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
 }
 
 const ZonosCheckout = ZonosCheckout$1;