@zonos/elements 1.0.16

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

@@ -0,0 +1,562 @@
+import { Fragment, h, Host, } from "@stencil/core";
+import { cartStore, cartStoreNextStep, cartStorePreviousStep, cartStoreReset, cartStoreUpdateItems, cartStoreUpdateToErrorState, } from "../../store/checkout/cart";
+import { initStripeElements, stripeStore, stripeStoreConfirmPayment, stripeStoreInitCheckoutSession, stripeStorePrefetchLandedCost, stripeStoreReset, } from "../../store/checkout/stripe";
+import { localizationStore } from "../../store/hello/localization";
+import { translate } from "../../store/translationStore";
+import { zonosStore, } from "../../store/zonosStore";
+import { isCheckoutMobile } from "../../utils/checkout/isCheckoutMobile";
+import { classes } from "../../utils/classes";
+import { getBorderRadius } from "../../utils/getBorderRadius";
+import { isDarkColor } from "../../utils/isDarkColor";
+import { log } from "../../utils/logging/log";
+import { mergeConfig } from "../../utils/mergeConfig";
+import { submitGtag } from "../../utils/submitGtag";
+/** These assets neet to be in relative path as https://www.npmjs.com/package/stencil-inline-svg suggested */
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import LeftArrow from "./assets/LeftArrow.svg";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import MessageIcon from "./assets/MessageIcon.svg";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import RemoveIcon from "./assets/RemoveIcon.svg";
+export class ZonosCheckout {
+  constructor() {
+    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.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.buttonAnchorElements = null;
+    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();
+    }
+    // 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);
+    }
+    // if client secret doesn't exist, request a new one.
+    if (!stripeStore.clientSecret) {
+      const success = await stripeStoreInitCheckoutSession();
+      if (!success) {
+        return false;
+      }
+    }
+    // apply theme to stripe elements
+    await this.applyStripeTheme();
+    return true;
+  }
+  attachCheckout() {
+    if (!this.buttonAnchorElements) {
+      // do nothing if button element is not found
+      return;
+    }
+    // only attach event once, and looping through all of the button elements
+    this.buttonAnchorElements.forEach(button => {
+      const isEventAttached = button.getAttribute('data-zonos-checkout-attached');
+      if (!isEventAttached) {
+        button.addEventListener('click', async (e) => {
+          if (!localizationStore.localizationLoaded) {
+            return;
+          }
+          // if localization is loaded and the localization is not a shippable country, keep the original click event
+          if (!localizationStore.isShippableCountry) {
+            log(`not shippable country`);
+            return;
+          }
+          e.preventDefault();
+          e.stopPropagation();
+          log('zonos checkout button clicked');
+          this.open = true;
+          const result = await this.buildCartAndInit();
+          if (!result) {
+            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'),
+            });
+            return;
+          }
+          submitGtag('zonos-checkout-start');
+        });
+        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;
+    // 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 (!localizationStore.localizationLoaded) {
+        return;
+      }
+      // if localization is loaded and the localization is not a shippable country, stop the interval and don't init checkout
+      // No need to check localization if it's preview mode
+      if (!localizationStore.isShippableCountry && !this.preview) {
+        log('not shippable country');
+        clearInterval(interval);
+        return;
+      }
+      if (!this.stripe) {
+        log('waiting for stripe to be loaded');
+        return;
+      }
+      log('init checkout');
+      if (this.preview || this.forceDialogOpen) {
+        void this.buildCartAndInit();
+      }
+      else {
+        this.attachCheckout();
+      }
+      clearInterval(interval);
+    }, 100);
+    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 {
+      await stripeStoreConfirmPayment();
+      cartStoreNextStep();
+    }
+    catch (err) {
+      // eslint-disable-next-line no-console
+      console.error(err);
+      this.paymentError = true;
+    }
+    this.submitLoading = false;
+  }
+  async handleFinishClick() {
+    // reset stripe store
+    stripeStoreReset();
+    if (this.preview) {
+      cartStore.step = 'customer-info';
+      await this.init();
+      return;
+    }
+    // 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;
+    }
+    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' && !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' && (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, collapsed: this.collapseReviewMobile }, h("zonos-review", { collapsed: this.collapseReviewMobile, mobile: this.isMobile, onClick: () => {
+          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 is() { return "zonos-checkout"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["zonos-checkout.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["zonos-checkout.css"]
+    };
+  }
+  static get assetsDirs() { return ["assets"]; }
+  static get properties() {
+    return {
+      "appearanceSettingsOverride": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Partial<AppearanceConfig>",
+          "resolved": "undefined | { colorPrimary?: string | undefined; colorSecondary?: string | undefined; fontFamily?: string | undefined; logoUrl?: string | undefined; style?: ElementsUiStyle | undefined; theme?: ElementsUiTheme | undefined; zonosAttribution?: ZonosAttribution | null | undefined; }",
+          "references": {
+            "Partial": {
+              "location": "global",
+              "id": "global::Partial"
+            },
+            "AppearanceConfig": {
+              "location": "import",
+              "path": "src/components/store/zonosStore",
+              "id": "src/components/store/zonosStore.ts::AppearanceConfig"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Override appearance config"
+        }
+      },
+      "preview": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Preview checkout without needing to click on the button. This would be useful for demo purpose"
+        },
+        "attribute": "preview",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "mobile": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Flag to determine if the checkout is on mobile"
+        },
+        "attribute": "mobile",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "buttonAnchorElements": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "HTMLElement[] | null",
+          "resolved": "HTMLElement[] | null",
+          "references": {
+            "HTMLElement": {
+              "location": "global",
+              "id": "global::HTMLElement"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The button element that will open the dialog"
+        },
+        "defaultValue": "null"
+      },
+      "defaultAddress": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ContactOption | null",
+          "resolved": "null | { address: { city: string; country: string; line1: string; line2?: string | undefined; postal_code: string; state: string; }; name: string; phone?: string | undefined; }",
+          "references": {
+            "ContactOption": {
+              "location": "import",
+              "path": "src/components/store/checkout/stripe",
+              "id": "src/components/store/checkout/stripe.ts::ContactOption"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Default address to use for the checkout (preview mode)"
+        },
+        "defaultValue": "null"
+      },
+      "forceDialogOpen": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Force dialog to be open"
+        },
+        "attribute": "force-dialog-open",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "open": {},
+      "stripe": {},
+      "submitLoading": {},
+      "paymentError": {},
+      "collapseReviewMobile": {},
+      "isAttachError": {},
+      "isMobile": {},
+      "zonosReviewRef": {},
+      "storybookPaymentStatusOverride": {}
+    };
+  }
+  static get methods() {
+    return {
+      "closeDialogHandler": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Close dialog action",
+          "tags": []
+        }
+      },
+      "init": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Setup all of the event listeners for the component on first load",
+          "tags": []
+        }
+      },
+      "setToFinishStep": {
+        "complexType": {
+          "signature": "(forcePaymentStatus?: PaymentIntent['status']) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            },
+            "PaymentIntent": {
+              "location": "import",
+              "path": "@stripe/stripe-js",
+              "id": ""
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "For storybook to set to finish step, this is to trigger in the story for zonos-checkout-finish",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "appearanceSettingsOverride",
+        "methodName": "appearanceSettingsOverrideChanged"
+      }, {
+        "propName": "mobile",
+        "methodName": "handleMobileChange"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "zonos--init-cart-info",
+        "method": "initCartInfoHandler",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "resize",
+        "method": "handleWindowResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}
+//# sourceMappingURL=zonos-checkout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"zonos-checkout.js","sourceRoot":"","sources":["../../../../src/components/checkout/zonos-checkout/zonos-checkout.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Fragment,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport type { PaymentIntent, Stripe } from '@stripe/stripe-js';\n\nimport {\n  type CartItem,\n  cartStore,\n  cartStoreNextStep,\n  cartStorePreviousStep,\n  cartStoreReset,\n  cartStoreUpdateItems,\n  cartStoreUpdateToErrorState,\n} from 'src/components/store/checkout/cart';\nimport {\n  type ContactOption,\n  initStripeElements,\n  stripeStore,\n  stripeStoreConfirmPayment,\n  stripeStoreInitCheckoutSession,\n  stripeStorePrefetchLandedCost,\n  stripeStoreReset,\n} from 'src/components/store/checkout/stripe';\nimport { localizationStore } from 'src/components/store/hello/localization';\nimport { translate } from 'src/components/store/translationStore';\nimport {\n  type AppearanceConfig,\n  zonosStore,\n} from 'src/components/store/zonosStore';\nimport { isCheckoutMobile } from 'src/components/utils/checkout/isCheckoutMobile';\nimport { classes } from 'src/components/utils/classes';\nimport { getBorderRadius } from 'src/components/utils/getBorderRadius';\nimport { isDarkColor } from 'src/components/utils/isDarkColor';\nimport { log } from 'src/components/utils/logging/log';\nimport { mergeConfig } from 'src/components/utils/mergeConfig';\nimport { submitGtag } from 'src/components/utils/submitGtag';\nimport type { ElementsUiTheme } from 'src/types/generated/graphql.customer.types';\nimport type { Locale_PageName_Enum } from 'src/types/generated/graphql.frontend.types';\n\n/** These assets neet to be in relative path as https://www.npmjs.com/package/stencil-inline-svg suggested */\n// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths\nimport LeftArrow from './assets/LeftArrow.svg';\n// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths\nimport MessageIcon from './assets/MessageIcon.svg';\n// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths\nimport RemoveIcon from './assets/RemoveIcon.svg';\n\n@Component({\n  /**\n   * Use `scope` here just because this component is `zonos-address` which is using stripe elements and stripe\n   * need to be able to inject iframe into this component from the DOM\n   */\n  assetsDirs: ['assets'],\n  scoped: true,\n  styleUrl: 'zonos-checkout.scss',\n  tag: 'zonos-checkout',\n})\nexport class ZonosCheckout {\n  /**\n   * Override appearance config\n   */\n  @Prop() appearanceSettingsOverride?: Partial<AppearanceConfig>;\n  /**\n   * Preview checkout without needing to click on the button. This would be useful for demo purpose\n   */\n  @Prop() preview: boolean = false;\n\n  /**\n   * Flag to determine if the checkout is on mobile\n   */\n  @Prop() mobile: boolean = false;\n\n  /**\n   * The button element that will open the dialog\n   */\n  @Prop() buttonAnchorElements: HTMLElement[] | null = null;\n\n  /**\n   * Default address to use for the checkout (preview mode)\n   */\n  @Prop() defaultAddress: ContactOption | null = null;\n\n  /**\n   * Force dialog to be open\n   */\n  @Prop() forceDialogOpen: boolean = false;\n\n  /**\n   * Whether or not the dialog is open\n   */\n  @State() open: boolean = this.forceDialogOpen;\n\n  /**\n   * The stripe instance\n   */\n  @State() stripe: Stripe | null = window.Zonos.stripe;\n\n  /**\n   * Whether or not the submit button is loading in `step` component\n   */\n  @State() submitLoading: boolean = false;\n\n  /**\n   * Error when submitting payment\n   */\n  @State() paymentError: boolean = false;\n\n  @State() collapseReviewMobile: boolean = false;\n\n  /**\n   * Determine if we should skip and not hijack the Checkout button click event\n   * Sometimes stripe or our api has error, we don't want to hijack the click event.\n   */\n  @State() isAttachError = false;\n\n  @State() isMobile: boolean = false;\n\n  @State() zonosReviewRef?: HTMLZonosReviewElement;\n\n  @State() storybookPaymentStatusOverride?: PaymentIntent['status'];\n\n  /**\n   * Init cart info handler event\n   */\n  @Listen('zonos--init-cart-info', { target: 'body' })\n  async initCartInfoHandler(e: CustomEvent<CartItem[]>) {\n    const cartItems = e.detail;\n    void cartStoreUpdateItems(cartItems);\n  }\n\n  /**\n   * Close dialog action\n   */\n  @Method()\n  async closeDialogHandler() {\n    submitGtag('zonos-checkout-close');\n    this.open = this.forceDialogOpen || false;\n\n    if (!this.preview && cartStore.step === 'finish') {\n      // reset cart store if it's not preview mode and only when checkout is in the finish step.\n      cartStoreReset();\n    }\n    // reset step to customer info\n    cartStore.step = 'customer-info';\n  }\n\n  private applyStripeTheme = async () => {\n    const theme =\n      this.appearanceSettingsOverride?.theme || zonosStore.appearance.theme;\n\n    await initStripeElements({\n      overrideBorderRaidus: this.appearanceSettingsOverride?.style,\n      overridePrimaryColor: this.appearanceSettingsOverride?.colorPrimary,\n      // only override theme or theme from appearance if it's mobile\n      overrideTheme: this.isMobile ? theme : undefined,\n    });\n  };\n\n  private async buildCartAndInit() {\n    if (zonosStore.checkoutSettings.buildCartDetail) {\n      log('build cart detail');\n      const cartItems = await zonosStore.checkoutSettings.buildCartDetail();\n      await cartStoreUpdateItems(cartItems);\n    }\n\n    // if client secret doesn't exist, request a new one.\n    if (!stripeStore.clientSecret) {\n      const success = await stripeStoreInitCheckoutSession();\n      if (!success) {\n        return false;\n      }\n    }\n\n    // apply theme to stripe elements\n    await this.applyStripeTheme();\n    return true;\n  }\n\n  private attachCheckout() {\n    if (!this.buttonAnchorElements) {\n      // do nothing if button element is not found\n      return;\n    }\n    // only attach event once, and looping through all of the button elements\n    this.buttonAnchorElements.forEach(button => {\n      const isEventAttached = button.getAttribute(\n        'data-zonos-checkout-attached',\n      );\n      if (!isEventAttached) {\n        button.addEventListener('click', async e => {\n          if (!localizationStore.localizationLoaded) {\n            return;\n          }\n          // if localization is loaded and the localization is not a shippable country, keep the original click event\n          if (!localizationStore.isShippableCountry) {\n            log(`not shippable country`);\n            return;\n          }\n          e.preventDefault();\n          e.stopPropagation();\n          log('zonos checkout button clicked');\n          this.open = true;\n\n          const result = await this.buildCartAndInit();\n          if (!result) {\n            cartStoreUpdateToErrorState({\n              messages: [\n                translate(\n                  \"There's been an error creating your checkout session. Please reload and try again or contact support if the error persists\",\n                ),\n              ],\n              title: translate('Error creating Checkout'),\n            });\n            return;\n          }\n          submitGtag('zonos-checkout-start');\n        });\n        button.setAttribute('data-zonos-checkout-attached', 'true');\n      }\n    });\n  }\n\n  @Watch('appearanceSettingsOverride')\n  appearanceSettingsOverrideChanged() {\n    if (!this.appearanceSettingsOverride) {\n      return;\n    }\n\n    // apply theme to stripe elements\n    void this.applyStripeTheme();\n  }\n\n  /**\n   * Setup all of the event listeners for the component on first load\n   */\n  @Method()\n  public async init() {\n    stripeStore.stripe = window.Zonos.stripe;\n    this.stripe = window.Zonos.stripe;\n\n    // only init checkout if visitor's country is in the shipping zones.\n    const interval = setInterval(() => {\n      stripeStore.stripe = window.Zonos.stripe;\n      this.stripe = window.Zonos.stripe;\n\n      if (!localizationStore.localizationLoaded) {\n        return;\n      }\n      // if localization is loaded and the localization is not a shippable country, stop the interval and don't init checkout\n      // No need to check localization if it's preview mode\n      if (!localizationStore.isShippableCountry && !this.preview) {\n        log('not shippable country');\n        clearInterval(interval);\n        return;\n      }\n\n      if (!this.stripe) {\n        log('waiting for stripe to be loaded');\n        return;\n      }\n\n      log('init checkout');\n      if (this.preview || this.forceDialogOpen) {\n        void this.buildCartAndInit();\n      } else {\n        this.attachCheckout();\n      }\n      clearInterval(interval);\n    }, 100);\n\n    setTimeout(() => {\n      // if localization is not loaded after 10 seconds, stop the interval and don't init checkout\n      clearInterval(interval);\n    }, 10_000);\n  }\n\n  /**\n   * For storybook to set to finish step, this is to trigger in the story for zonos-checkout-finish\n   */\n  @Method()\n  public async setToFinishStep(forcePaymentStatus?: PaymentIntent['status']) {\n    cartStore.step = 'finish';\n    this.storybookPaymentStatusOverride = forcePaymentStatus;\n  }\n\n  private async handleCustomerInfoContinue() {\n    this.submitLoading = true;\n\n    // fetch landed cost data if we not fetching.\n    await stripeStorePrefetchLandedCost();\n\n    // keep checking landed cost data until it's ready to move to next screen\n    const interval = setInterval(() => {\n      if (cartStore.landedCostData || !stripeStore.isFetchingLandedCost) {\n        if (cartStore.landedCostData) {\n          // only go to next step if landed cost data is ready\n          cartStoreNextStep();\n        }\n        this.submitLoading = false;\n        clearInterval(interval);\n      }\n    }, 500);\n  }\n\n  private async handleShippingContinue() {\n    this.submitLoading = true;\n    // show loading for the button for a bit\n    setTimeout(() => {\n      cartStoreNextStep();\n      this.submitLoading = false;\n    }, 500);\n  }\n\n  private async handleCheckoutPaymentContinue() {\n    // reset error state\n    this.paymentError = false;\n    this.submitLoading = true;\n    try {\n      await stripeStoreConfirmPayment();\n      cartStoreNextStep();\n    } catch (err) {\n      // eslint-disable-next-line no-console\n      console.error(err);\n      this.paymentError = true;\n    }\n    this.submitLoading = false;\n  }\n\n  private async handleFinishClick() {\n    // reset stripe store\n    stripeStoreReset();\n\n    if (this.preview) {\n      cartStore.step = 'customer-info';\n      await this.init();\n      return;\n    }\n    // reset cart store\n    cartStoreReset();\n\n    // reset url\n    const url = window.location.href;\n\n    // Remove query parameters\n    const cleanUrl = url.split('?')[0];\n\n    // Update the URL without query parameters\n    window.history.replaceState({}, document.title, cleanUrl);\n    this.open = false;\n  }\n\n  private async handleBackClick() {\n    // close the modal if back button is clicked on customer info step\n    if (cartStore.step === 'customer-info') {\n      await this.closeDialogHandler();\n      return;\n    }\n    cartStorePreviousStep();\n  }\n\n  private getCurrentLocalePageEnum = (): Locale_PageName_Enum | null => {\n    switch (cartStore.step) {\n      case 'customer-info':\n        return 'checkout_customer_info';\n      case 'shipping':\n        return 'checkout_shipping_info';\n      case 'payment':\n        return 'checkout_payment_info';\n\n      default:\n        return null;\n    }\n  };\n\n  @Listen('resize', { target: 'window' })\n  handleWindowResize() {\n    this.isMobile = isCheckoutMobile(this.mobile);\n    // apply theme to stripe elements\n    void this.applyStripeTheme();\n    log(`mobile: ${this.isMobile}`);\n  }\n\n  @Watch('mobile')\n  handleMobileChange() {\n    this.isMobile = isCheckoutMobile(this.mobile);\n    // apply theme to stripe elements\n    void this.applyStripeTheme();\n    log(`mobile: ${this.isMobile}`);\n  }\n\n  componentWillLoad() {\n    void this.init();\n    this.isMobile = isCheckoutMobile(this.mobile);\n    log(`mobile: ${this.isMobile}`);\n  }\n\n  // do clean up when component is unmounted\n  disconnectedCallback() {\n    // reset stripe store\n    stripeStoreReset();\n    // reset cart store\n    cartStoreReset();\n  }\n\n  render() {\n    const dialogLoading =\n      // if it's last step, don't need to check stripe elements\n      (cartStore.step !== 'finish' && !stripeStore.stripeElements) ||\n      stripeStore.isFetchingSession;\n\n    const { colorPrimary, colorSecondary, logoUrl, style } = mergeConfig(\n      zonosStore.appearance,\n      this.appearanceSettingsOverride,\n    );\n\n    const hasFooter = zonosStore.appearance.zonosAttribution === 'ENABLED';\n\n    const rightSideTheme = zonosStore.appearance.theme;\n\n    const themePrimaryColorBased: ElementsUiTheme =\n      colorPrimary && isDarkColor(colorPrimary) ? 'DARK' : 'LIGHT';\n\n    // use right side theme if it's mobile, otherwise use themePrimaryColorBased\n    const leftSideTheme: ElementsUiTheme = this.isMobile\n      ? rightSideTheme\n      : themePrimaryColorBased;\n\n    // only use submit button color if it's on desktop\n    const submitButtonColor = !this.isMobile ? colorSecondary : undefined;\n\n    const { customMessages } = localizationStore;\n    const defaultMessage =\n      customMessages.find(x => x.pageName === 'checkout_default')?.message ||\n      'Know about duties and taxes before you buy. Shop with confidence!';\n\n    const localePageEnum = this.getCurrentLocalePageEnum();\n    const filteredMessages = customMessages.filter(\n      x => x.pageName === localePageEnum,\n    );\n\n    const renderLogo = () => (\n      <div class=\"zonos--logo\">\n        {logoUrl && (\n          <img\n            alt={`${zonosStore.organizationName} logo`}\n            src={logoUrl}\n            width={100}\n          />\n        )}\n      </div>\n    );\n\n    const renderTopHeader = () => (\n      <zonos-v-stack>\n        {renderLogo()}\n\n        {filteredMessages.map(x => (\n          <zonos-custom-message\n            icon={MessageIcon}\n            message={x.message}\n          ></zonos-custom-message>\n        ))}\n\n        <div>\n          <zonos-button\n            class=\"zonos--back-button\"\n            icon={<zonos-icon content={LeftArrow}></zonos-icon>}\n            noBackground\n            noPaddingLeft\n            noPaddingRight\n            onClick={() => this.handleBackClick()}\n            theme={leftSideTheme}\n          >\n            {translate('Back')}\n          </zonos-button>\n        </div>\n      </zonos-v-stack>\n    );\n\n    const renderFooter = () =>\n      hasFooter && (\n        <div class=\"zonos--footer\" data-theme={rightSideTheme}>\n          <zonos-text type=\"hintText\">{translate('Powered by')}</zonos-text>\n          <zonos-logo theme={rightSideTheme} width=\"100px\"></zonos-logo>\n        </div>\n      );\n\n    const renderContent = () => {\n      const submitBtnType = this.isMobile ? 'primary' : undefined;\n      const reviewElementSize = this.zonosReviewRef?.scrollHeight;\n      return (\n        <div\n          class={'zonos--content'}\n          style={{\n            '--border-radius': getBorderRadius(style),\n          }}\n        >\n          {cartStore.step !== 'finish' && (\n            <>\n              <div\n                class=\"zonos--left\"\n                data-theme={leftSideTheme}\n                style={{\n                  '--primary-color': !this.isMobile ? colorPrimary : '',\n                }}\n              >\n                {!this.isMobile && renderTopHeader()}\n                {cartStore.step === 'customer-info' && (\n                  <zonos-customer-info\n                    continueLoading={this.submitLoading}\n                    defaultAddress={this.defaultAddress}\n                    onContinueClicked={() => this.handleCustomerInfoContinue()}\n                    submitBtnColor={submitButtonColor}\n                    submitBtnType={submitBtnType}\n                  ></zonos-customer-info>\n                )}\n                {cartStore.step === 'shipping' && (\n                  <zonos-shipping\n                    continueLoading={this.submitLoading}\n                    onContinueClicked={() => this.handleShippingContinue()}\n                    submitBtnColor={submitButtonColor}\n                    submitBtnType={submitBtnType}\n                  ></zonos-shipping>\n                )}\n                {cartStore.step === 'payment' && (\n                  <zonos-checkout-payment\n                    continueLoading={this.submitLoading}\n                    onContinueClicked={() =>\n                      this.handleCheckoutPaymentContinue()\n                    }\n                    paymentError={this.paymentError}\n                    submitBtnColor={submitButtonColor}\n                    submitBtnType={submitBtnType}\n                  ></zonos-checkout-payment>\n                )}\n              </div>\n              <div class=\"zonos--right\" data-theme={rightSideTheme}>\n                {this.isMobile && renderTopHeader()}\n                {!this.isMobile && (\n                  <zonos-button\n                    class=\"zonos--close-button\"\n                    icon={<zonos-icon content={RemoveIcon}></zonos-icon>}\n                    noBackground\n                    onClick={() => this.closeDialogHandler()}\n                  ></zonos-button>\n                )}\n                <div class=\"flex--wrapper\">\n                  <div class=\"zonos--wrapper\">\n                    <zonos-collapse\n                      collapseSize={reviewElementSize}\n                      collapsed={this.collapseReviewMobile}\n                    >\n                      <zonos-review\n                        collapsed={this.collapseReviewMobile}\n                        mobile={this.isMobile}\n                        onClick={() => {\n                          this.collapseReviewMobile =\n                            !this.collapseReviewMobile;\n                        }}\n                        ref={el => (this.zonosReviewRef = el)}\n                      ></zonos-review>\n                      {/* Cart item rows */}\n                      <zonos-cart-items></zonos-cart-items>\n                    </zonos-collapse>\n                  </div>\n\n                  <zonos-v-stack spacing={16}>\n                    {/* Cart subtotal row */}\n                    <zonos-cart-subtotal></zonos-cart-subtotal>\n\n                    <zonos-custom-message\n                      class=\"zonos--checkout-default-message\"\n                      icon={MessageIcon}\n                      message={defaultMessage}\n                    ></zonos-custom-message>\n                  </zonos-v-stack>\n                </div>\n\n                {/* Only show footer on desktop */}\n                {!this.isMobile && renderFooter()}\n              </div>\n              {/* Only show footer on mobile */}\n              {this.isMobile && renderFooter()}\n            </>\n          )}\n\n          {(cartStore.step === 'finish' || cartStore.step === 'error') && (\n            <div class=\"zonos--done\" data-theme={rightSideTheme}>\n              <div class=\"zonos--header\">\n                {renderLogo()}\n                <zonos-button\n                  class=\"zonos--close-button\"\n                  icon={<zonos-icon content={RemoveIcon}></zonos-icon>}\n                  noBackground\n                  onClick={() => this.handleFinishClick()}\n                  theme={rightSideTheme}\n                ></zonos-button>\n              </div>\n              <zonos-checkout-finish\n                borderRadius={style}\n                onCloseClick={() => this.handleFinishClick()}\n                overrideNotification={\n                  cartStore.step === 'error' && !!cartStore.error\n                    ? {\n                        ...cartStore.error,\n                        type: 'error',\n                      }\n                    : undefined\n                }\n                storybookForceStatus={this.storybookPaymentStatusOverride}\n              ></zonos-checkout-finish>\n            </div>\n          )}\n        </div>\n      );\n    };\n\n    return (\n      <Host\n        class={classes([\n          'zonos--checkout zonos--elements',\n          hasFooter && 'has-footer',\n          this.preview && 'preview',\n          this.isMobile && 'mobile',\n        ])}\n      >\n        {this.preview ? (\n          renderContent()\n        ) : (\n          <zonos-dialog\n            borderStyle={style}\n            data-theme={rightSideTheme}\n            height=\"980px\"\n            isLoading={dialogLoading}\n            mobile={this.isMobile}\n            noBodyPadding\n            noBorder\n            noClickOutside\n            noCloseButton\n            onCloseDialog={() => this.closeDialogHandler()}\n            open={this.open}\n            width=\"1200px\"\n          >\n            {renderContent()}\n          </zonos-dialog>\n        )}\n      </Host>\n    );\n  }\n}\n"]}