@zonos/elements 1.0.16

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

@@ -0,0 +1,53 @@
+import { Fragment, h, Host } from "@stencil/core";
+import { cartStore } from "../../../store/checkout/cart";
+import { translate } from "../../../store/translationStore";
+import { formatCurrency } from "../../../utils/formatCurrency";
+// 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 InfoIcon from "./assets/InfoIcon.svg";
+export class ZonosCartSubtotal {
+  render() {
+    const totalWithoutTaxes = cartStore.total - cartStore.dutiesTaxFees;
+    const renderShippingInfo = () => {
+      if (!cartStore.selectedShippingOption) {
+        return (h(Fragment, null, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Shipping')), h("zonos-text", { class: "zonos--caption", type: "caption" }, translate('No shipping method selected'))));
+      }
+      return (h(Fragment, null, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, cartStore.selectedShippingOption.displayName), cartStore.selectedShippingOptionTransitTime && (h("zonos-text", { class: "zonos--caption", type: "caption" }, cartStore.selectedShippingOptionTransitTime, ' ', translate('business days')))));
+    };
+    return (h(Host, { class: "zonos--cart-subtotal zonos--elements" }, h("table", { class: "zonos--cart-table" }, h("tr", { class: "zonos--row zonos--cart-subtotal" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column zonos--cart-subtotal-title" }, h("zonos-text", { type: "semiBoldLabel" }, translate('Cart subtotal'))), h("td", { class: "zonos--column zonos--cart-subtotal-price" }, h("zonos-text", { type: "semiBoldLabel" }, formatCurrency({
+      amount: cartStore.subtotal,
+      currency: cartStore.currency,
+    })))), h("tr", { class: "zonos--row zonos--cart-shipping" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column zonos--cart-subtotal-title" }, renderShippingInfo()), h("td", { class: "zonos--column zonos--cart-subtotal-price" }, cartStore.shipping
+      ? formatCurrency({
+        amount: cartStore.shipping,
+        currency: cartStore.currency,
+      })
+      : '-')), cartStore.step === 'payment' && (h("tr", { class: "zonos--row zonos--cart-duties" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column zonos--cart-subtotal-title" }, h("div", { class: "zonos--title-with-icon" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Duties, taxes, and fees')), h("zonos-icon", { content: InfoIcon, size: 16 })), !!cartStore.isSelectedShippingAboveDeminimis && (h("zonos-text", { color: "gray-800", type: "body" }, translate('Order is over the de minimis threshold for both duty and tax')))), h("td", { class: "zonos--column zonos--cart-subtotal-price" }, cartStore.dutiesTaxFees
+      ? formatCurrency({
+        amount: cartStore.dutiesTaxFees,
+        currency: cartStore.currency,
+      })
+      : '-', cartStore.isSelectedShippingGuarantee && (h("zonos-badge", null, translate('Guaranteed')))))), h("tr", { class: "zonos--row zonos--cart-pay-total" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Order total'))), h("td", { class: "zonos--column" }, h("zonos-text", { type: "semiBoldLabel" }, formatCurrency({
+      amount: 
+      // show total without taxes when step is shipping, show total with taxes when step is payment
+      cartStore.step === 'shipping'
+        ? totalWithoutTaxes
+        : cartStore.total,
+      currency: cartStore.currency,
+    })))))));
+  }
+  static get is() { return "zonos-cart-subtotal"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["zonos-cart-subtotal.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["zonos-cart-subtotal.css"]
+    };
+  }
+  static get assetsDirs() { return ["assets"]; }
+}
+//# sourceMappingURL=zonos-cart-subtotal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"zonos-cart-subtotal.js","sourceRoot":"","sources":["../../../../../src/components/checkout/zonos-checkout/zonos-cart-subtotal/zonos-cart-subtotal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Fragment, h, Host } from '@stencil/core';\n\nimport { cartStore } from 'src/components/store/checkout/cart';\nimport { translate } from 'src/components/store/translationStore';\nimport { formatCurrency } from 'src/components/utils/formatCurrency';\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 InfoIcon from './assets/InfoIcon.svg';\n@Component({\n  assetsDirs: ['assets'],\n  shadow: true,\n  styleUrl: 'zonos-cart-subtotal.scss',\n  tag: 'zonos-cart-subtotal',\n})\nexport class ZonosCartSubtotal {\n  render() {\n    const totalWithoutTaxes = cartStore.total - cartStore.dutiesTaxFees;\n    const renderShippingInfo = () => {\n      if (!cartStore.selectedShippingOption) {\n        return (\n          <>\n            <zonos-text class=\"zonos--title\" type=\"semiBoldLabel\">\n              {translate('Shipping')}\n            </zonos-text>\n            <zonos-text class=\"zonos--caption\" type=\"caption\">\n              {translate('No shipping method selected')}\n            </zonos-text>\n          </>\n        );\n      }\n      return (\n        <>\n          <zonos-text class=\"zonos--title\" type=\"semiBoldLabel\">\n            {cartStore.selectedShippingOption.displayName}\n          </zonos-text>\n          {cartStore.selectedShippingOptionTransitTime && (\n            <zonos-text class=\"zonos--caption\" type=\"caption\">\n              {cartStore.selectedShippingOptionTransitTime}{' '}\n              {translate('business days')}\n            </zonos-text>\n          )}\n        </>\n      );\n    };\n    return (\n      <Host class=\"zonos--cart-subtotal zonos--elements\">\n        <table class=\"zonos--cart-table\">\n          <tr class=\"zonos--row zonos--cart-subtotal\">\n            <td class=\"zonos--column\"></td>\n            <td class=\"zonos--column zonos--cart-subtotal-title\">\n              <zonos-text type=\"semiBoldLabel\">\n                {translate('Cart subtotal')}\n              </zonos-text>\n            </td>\n            <td class=\"zonos--column zonos--cart-subtotal-price\">\n              <zonos-text type=\"semiBoldLabel\">\n                {formatCurrency({\n                  amount: cartStore.subtotal,\n                  currency: cartStore.currency,\n                })}\n              </zonos-text>\n            </td>\n          </tr>\n          <tr class=\"zonos--row zonos--cart-shipping\">\n            <td class=\"zonos--column\"></td>\n            <td class=\"zonos--column zonos--cart-subtotal-title\">\n              {renderShippingInfo()}\n            </td>\n            <td class=\"zonos--column zonos--cart-subtotal-price\">\n              {cartStore.shipping\n                ? formatCurrency({\n                    amount: cartStore.shipping,\n                    currency: cartStore.currency,\n                  })\n                : '-'}\n            </td>\n          </tr>\n          {/* Only show fee row when step is payment */}\n          {cartStore.step === 'payment' && (\n            <tr class=\"zonos--row zonos--cart-duties\">\n              <td class=\"zonos--column\"></td>\n              <td class=\"zonos--column zonos--cart-subtotal-title\">\n                <div class=\"zonos--title-with-icon\">\n                  <zonos-text class=\"zonos--title\" type=\"semiBoldLabel\">\n                    {translate('Duties, taxes, and fees')}\n                  </zonos-text>\n                  <zonos-icon content={InfoIcon} size={16}></zonos-icon>\n                </div>\n                {!!cartStore.isSelectedShippingAboveDeminimis && (\n                  <zonos-text color=\"gray-800\" type=\"body\">\n                    {translate(\n                      'Order is over the de minimis threshold for both duty and tax',\n                    )}\n                  </zonos-text>\n                )}\n              </td>\n              <td class=\"zonos--column zonos--cart-subtotal-price\">\n                {cartStore.dutiesTaxFees\n                  ? formatCurrency({\n                      amount: cartStore.dutiesTaxFees,\n                      currency: cartStore.currency,\n                    })\n                  : '-'}\n                {cartStore.isSelectedShippingGuarantee && (\n                  <zonos-badge>{translate('Guaranteed')}</zonos-badge>\n                )}\n              </td>\n            </tr>\n          )}\n          <tr class=\"zonos--row zonos--cart-pay-total\">\n            <td class=\"zonos--column\"></td>\n            <td class=\"zonos--column\">\n              <zonos-text class=\"zonos--title\" type=\"semiBoldLabel\">\n                {translate('Order total')}\n              </zonos-text>\n            </td>\n            <td class=\"zonos--column\">\n              <zonos-text type=\"semiBoldLabel\">\n                {formatCurrency({\n                  amount:\n                    // show total without taxes when step is shipping, show total with taxes when step is payment\n                    cartStore.step === 'shipping'\n                      ? totalWithoutTaxes\n                      : cartStore.total,\n                  currency: cartStore.currency,\n                })}\n              </zonos-text>\n            </td>\n          </tr>\n        </table>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout-finish/assets/RemoveIcon.svg

@@ -0,0 +1 @@
+<svg color="var(--amino-red-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://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-red-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>

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout-finish/assets/SuccessIcon.svg

@@ -0,0 +1 @@
+<svg color="var(--amino-blue-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Z" data-is-secondary-color="true" fill="var(--amino-blue-100)" fill-rule="evenodd"></path><path clip-rule="evenodd" d="M15.707 9.293a1 1 0 0 1 0 1.414l-3.646 3.647a1.5 1.5 0 0 1-2.122 0l-1.646-1.647a1 1 0 1 1 1.414-1.414L11 12.586l3.293-3.293a1 1 0 0 1 1.414 0Z" fill="currentColor" fill-rule="evenodd"></path></svg>

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout-finish/zonos-checkout-finish.css

@@ -0,0 +1,57 @@
+:host {
+  font-family: Inter;
+  display: block;
+}
+:host img {
+  max-width: 100%;
+}
+:host dl,
+:host dd,
+:host h1,
+:host h2,
+:host h3,
+:host h4,
+:host h5,
+:host h6,
+:host hr,
+:host figure,
+:host p,
+:host pre {
+  margin: 0;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host {
+  display: flex;
+  flex-direction: column;
+}
+:host .zonos--group {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: var(--amino-space-24);
+  border-radius: var(--border-radius, 10px);
+  gap: var(--amino-space-24);
+  max-width: 360px;
+  width: auto;
+  margin: auto;
+  margin-top: var(--amino-space-24);
+  background-color: var(--amino-gray-50);
+  padding: var(--amino-space-20);
+}
+:host zonos-button {
+  width: 100%;
+}
+:host .loading-wrapper {
+  min-height: 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

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

@@ -0,0 +1,173 @@
+import { Fragment, h, Host, } from "@stencil/core";
+import { stripeStore, stripeStoreReset, stripeStoreRetrievePayment, } from "../../../store/checkout/stripe";
+import { translate } from "../../../store/translationStore";
+import { getBorderRadius } from "../../../utils/getBorderRadius";
+import { submitGtag } from "../../../utils/submitGtag";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import RemoveIcon from "./assets/RemoveIcon.svg";
+/* Need to use relative import because inline-svg-stencil couldn't resolve absolute path */
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import SuccessIcon from "./assets/SuccessIcon.svg";
+export class ZonosCheckoutFinish {
+  constructor() {
+    this.checkPaymentStatus = async () => {
+      this.isLoading = true;
+      const clientSecret = new URLSearchParams(window.location.search).get('payment_intent_client_secret') || stripeStore.clientSecret;
+      if (clientSecret) {
+        const { error, messages } = await stripeStoreRetrievePayment({
+          clientSecret,
+          storybookForceStatus: this.storybookForceStatus,
+        });
+        this.notificationType = error ? 'error' : 'success';
+        this.notificationMessages = messages || [];
+        this.notificationTitle = error
+          ? translate('Payment failed')
+          : translate("You're all set!");
+        if (error) {
+          submitGtag('zonos-checkout-payment-fail');
+        }
+        else {
+          submitGtag('zonos-checkout-success');
+        }
+      }
+      stripeStoreReset();
+      this.isLoading = false;
+    };
+    this.closeClickHandler = () => {
+      this.closeClick.emit();
+    };
+    this.borderRadius = 'ROUNDED';
+    this.storybookForceStatus = undefined;
+    this.overrideNotification = undefined;
+    this.isLoading = true;
+    this.notificationType = 'success';
+    this.notificationTitle = '';
+    this.notificationMessages = [];
+  }
+  componentDidLoad() {
+    if (this.overrideNotification) {
+      // just show the notification and don't check any of the payment status
+      this.notificationType = this.overrideNotification.type;
+      this.notificationTitle = this.overrideNotification.title;
+      this.notificationMessages = this.overrideNotification.messages;
+      return;
+    }
+    void this.checkPaymentStatus();
+  }
+  render() {
+    return (h(Host, { class: "zonos--checkout-finish zonos--elements", style: {
+        '--border-radius': getBorderRadius(this.borderRadius),
+      } }, this.isLoading && (h("div", { class: "loading-wrapper" }, h("zonos-spinner", null))), !this.isLoading && (h("div", { class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { color: 'blue-800', content: SuccessIcon, size: 50 })) : (h("zonos-icon", { color: 'red-800', content: RemoveIcon, size: 50 })), h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", null, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), h("zonos-button", { onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, translate('Keep shopping'))))));
+  }
+  static get is() { return "zonos-checkout-finish"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["zonos-checkout-finish.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["zonos-checkout-finish.css"]
+    };
+  }
+  static get assetsDirs() { return ["assets"]; }
+  static get properties() {
+    return {
+      "borderRadius": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ElementsUiStyle",
+          "resolved": "\"ROUNDED\" | \"SHARP\"",
+          "references": {
+            "ElementsUiStyle": {
+              "location": "import",
+              "path": "src/types",
+              "id": "src/types/index.ts::ElementsUiStyle"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The border radius style of the dialog"
+        },
+        "attribute": "border-radius",
+        "reflect": false,
+        "defaultValue": "'ROUNDED'"
+      },
+      "storybookForceStatus": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "PaymentIntent['status']",
+          "resolved": "\"canceled\" | \"processing\" | \"requires_action\" | \"requires_capture\" | \"requires_confirmation\" | \"requires_payment_method\" | \"succeeded\" | undefined",
+          "references": {
+            "PaymentIntent": {
+              "location": "import",
+              "path": "@stripe/stripe-js",
+              "id": ""
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Force status to test the UI for storybook"
+        },
+        "attribute": "storybook-force-status",
+        "reflect": false
+      },
+      "overrideNotification": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "OverrideNotification",
+          "resolved": "undefined | { messages: string[]; title: string; type: \"error\" | \"success\"; }",
+          "references": {
+            "OverrideNotification": {
+              "location": "global",
+              "id": "global::OverrideNotification"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Override the notification message and title, bypass checking stripe payment status"
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isLoading": {},
+      "notificationType": {},
+      "notificationTitle": {},
+      "notificationMessages": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "closeClick",
+        "name": "closeClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event to emit when the continue button is clicked"
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+}
+//# sourceMappingURL=zonos-checkout-finish.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"zonos-checkout-finish.js","sourceRoot":"","sources":["../../../../../src/components/checkout/zonos-checkout/zonos-checkout-finish/zonos-checkout-finish.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  type EventEmitter,\n  Component,\n  Event,\n  Fragment,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport type { PaymentIntent } from '@stripe/stripe-js';\n\nimport {\n  stripeStore,\n  stripeStoreReset,\n  stripeStoreRetrievePayment,\n} from 'src/components/store/checkout/stripe';\nimport { translate } from 'src/components/store/translationStore';\nimport { getBorderRadius } from 'src/components/utils/getBorderRadius';\nimport { submitGtag } from 'src/components/utils/submitGtag';\nimport type { ElementsUiStyle } from 'src/types';\n\n// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths\nimport RemoveIcon from './assets/RemoveIcon.svg';\n/* Need to use relative import because inline-svg-stencil couldn't resolve absolute path */\n// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths\nimport SuccessIcon from './assets/SuccessIcon.svg';\n\ntype OverrideNotification = {\n  messages: string[];\n  title: string;\n  type: 'success' | 'error';\n};\n\n@Component({\n  assetsDirs: ['assets'],\n  shadow: true,\n  styleUrl: 'zonos-checkout-finish.scss',\n  tag: 'zonos-checkout-finish',\n})\nexport class ZonosCheckoutFinish {\n  /**\n   * The border radius style of the dialog\n   */\n  @Prop() borderRadius: ElementsUiStyle = 'ROUNDED';\n\n  /**\n   * Force status to test the UI for storybook\n   */\n  @Prop() storybookForceStatus?: PaymentIntent['status'];\n\n  /**\n   * Override the notification message and title, bypass checking stripe payment status\n   *\n   */\n  @Prop() overrideNotification?: OverrideNotification;\n\n  /**\n   * Event to emit when the continue button is clicked\n   */\n  @Event() closeClick!: EventEmitter<void>;\n\n  @State() isLoading: boolean = true;\n  @State() notificationType: 'success' | 'error' = 'success';\n  @State() notificationTitle: string = '';\n  @State() notificationMessages: string[] = [];\n\n  private checkPaymentStatus = async () => {\n    this.isLoading = true;\n    const clientSecret =\n      new URLSearchParams(window.location.search).get(\n        'payment_intent_client_secret',\n      ) || stripeStore.clientSecret;\n    if (clientSecret) {\n      const { error, messages } = await stripeStoreRetrievePayment({\n        clientSecret,\n        storybookForceStatus: this.storybookForceStatus,\n      });\n      this.notificationType = error ? 'error' : 'success';\n      this.notificationMessages = messages || [];\n      this.notificationTitle = error\n        ? translate('Payment failed')\n        : translate(\"You're all set!\");\n\n      if (error) {\n        submitGtag('zonos-checkout-payment-fail');\n      } else {\n        submitGtag('zonos-checkout-success');\n      }\n    }\n    stripeStoreReset();\n    this.isLoading = false;\n  };\n\n  private closeClickHandler = () => {\n    this.closeClick.emit();\n  };\n\n  componentDidLoad() {\n    if (this.overrideNotification) {\n      // just show the notification and don't check any of the payment status\n      this.notificationType = this.overrideNotification.type;\n      this.notificationTitle = this.overrideNotification.title;\n      this.notificationMessages = this.overrideNotification.messages;\n      return;\n    }\n    void this.checkPaymentStatus();\n  }\n\n  render() {\n    return (\n      <Host\n        class=\"zonos--checkout-finish zonos--elements\"\n        style={{\n          '--border-radius': getBorderRadius(this.borderRadius),\n        }}\n      >\n        {this.isLoading && (\n          <div class=\"loading-wrapper\">\n            <zonos-spinner></zonos-spinner>\n          </div>\n        )}\n        {!this.isLoading && (\n          <div class=\"zonos--group\">\n            {this.notificationType === 'success' ? (\n              <zonos-icon\n                color={'blue-800'}\n                content={SuccessIcon}\n                size={50}\n              ></zonos-icon>\n            ) : (\n              <zonos-icon\n                color={'red-800'}\n                content={RemoveIcon}\n                size={50}\n              ></zonos-icon>\n            )}\n            <zonos-text class=\"zonos--title\" type=\"semiBoldSubheader\">\n              {this.notificationTitle}\n            </zonos-text>\n            <zonos-text>\n              {this.notificationMessages.map(message => (\n                <>\n                  {message}\n                  <br />\n                </>\n              ))}\n            </zonos-text>\n            <zonos-button\n              onClick={() => this.closeClickHandler()}\n              size=\"md\"\n              variant=\"primary\"\n            >\n              {translate('Keep shopping')}\n            </zonos-button>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,63 @@
+:host {
+  font-family: Inter;
+  display: block;
+}
+:host img {
+  max-width: 100%;
+}
+:host dl,
+:host dd,
+:host h1,
+:host h2,
+:host h3,
+:host h4,
+:host h5,
+:host h6,
+:host hr,
+:host figure,
+:host p,
+:host pre {
+  margin: 0;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+:host .zonos--title {
+  margin-bottom: var(--amino-space-24);
+}
+:host .zonos--group {
+  margin-bottom: var(--amino-space-20);
+  overflow: auto;
+  padding: 0 5px;
+}
+:host .zonos--group::-webkit-scrollbar {
+  width: 10px;
+}
+:host .zonos--group::-webkit-scrollbar-track {
+  background: var(--amino-gray-50);
+}
+:host .zonos--group::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background: #cccccc;
+  border: 3px solid transparent;
+  background-clip: content-box;
+}
+:host .zonos--group::-webkit-scrollbar-thumb:hover {
+  background: #d6d6d6;
+}
+:host .zonos--payment-error-banner {
+  margin-bottom: var(--amino-space-8);
+}
+:host zonos-button {
+  width: 100%;
+}

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

@@ -0,0 +1,161 @@
+import { h, Host, } from "@stencil/core";
+import { cartStore } from "../../../store/checkout/cart";
+import { stripeStore } from "../../../store/checkout/stripe";
+import { translate } from "../../../store/translationStore";
+import { formatCurrency } from "../../../utils/formatCurrency";
+import { submitGtag } from "../../../utils/submitGtag";
+export class ZonosCheckoutPayment {
+  constructor() {
+    /**
+     * handler for continue button click
+     */
+    this.continueClickHandler = () => {
+      this.continueClicked.emit();
+    };
+    this.paymentError = false;
+    this.submitBtnType = undefined;
+    this.continueLoading = false;
+    this.submitBtnColor = undefined;
+    this.disabled = true;
+  }
+  watchFormComplete() {
+    if (!this.disabled) {
+      // submit google tag when the form is complete
+      submitGtag('zonos-checkout-payment-info');
+    }
+  }
+  render() {
+    var _a;
+    if (!stripeStore.stripeElements) {
+      return null;
+    }
+    this.disabled = !((_a = stripeStore.stripePaymentEventData) === null || _a === void 0 ? void 0 : _a.complete);
+    return (h(Host, { class: "zonos--checkout-payment zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Payment method')), this.paymentError && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, translate("We couldn't complete your payment. Please verify the payment details and try again."))), h("zonos-payment", null)), h("zonos-button", { backgroundColor: this.submitBtnColor, "is-disabled": this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
+      // use primary type when on mobile mode
+      variant: this.submitBtnType }, "Pay", ' ', formatCurrency({
+      amount: cartStore.total,
+      currency: cartStore.currency,
+    }))));
+  }
+  static get is() { return "zonos-checkout-payment"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["zonos-checkout-payment.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["zonos-checkout-payment.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "paymentError": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Error occurred during payment"
+        },
+        "attribute": "payment-error",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "submitBtnType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "HTMLZonosButtonElement['variant']",
+          "resolved": "\"danger\" | \"outline\" | \"primary\" | \"standard\" | \"subtle\" | \"success\" | \"warning\" | undefined",
+          "references": {
+            "HTMLZonosButtonElement": {
+              "location": "global",
+              "id": "global::HTMLZonosButtonElement"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Whether or not the checkout is in mobile mode"
+        },
+        "attribute": "submit-btn-type",
+        "reflect": false
+      },
+      "continueLoading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether or not the continue button is loading"
+        },
+        "attribute": "continue-loading",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "submitBtnColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Submit button main color"
+        },
+        "attribute": "submit-btn-color",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "disabled": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "continueClicked",
+        "name": "continueClicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event to emit when the continue button is clicked"
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get watchers() {
+    return [{
+        "propName": "disabled",
+        "methodName": "watchFormComplete"
+      }];
+  }
+}
+//# sourceMappingURL=zonos-checkout-payment.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"zonos-checkout-payment.js","sourceRoot":"","sources":["../../../../../src/components/checkout/zonos-checkout/zonos-checkout-payment/zonos-checkout-payment.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,SAAS,EACT,KAAK,EACL,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAW7D,MAAM,OAAO,oBAAoB;;IAwC/B;;OAEG;IACK,yBAAoB,GAAG,GAAG,EAAE;MAClC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;IAC9B,CAAC,CAAC;wBAzC8B,KAAK;;2BAUF,KAAK;;oBAgBX,IAAI;;EAGjC,iBAAiB;IACf,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,8CAA8C;MAC9C,UAAU,CAAC,6BAA6B,CAAC,CAAC;KAC3C;EACH,CAAC;EASD,MAAM;;IACJ,IAAI,CAAC,WAAW,CAAC,cAAc,EAAE;MAC/B,OAAO,IAAI,CAAC;KACb;IAED,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAA,MAAA,WAAW,CAAC,sBAAsB,0CAAE,QAAQ,CAAA,CAAC;IAE9D,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAC,yCAAyC;MACnD,WAAK,KAAK,EAAC,cAAc;QACvB,kBAAY,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,mBAAmB,IACtD,SAAS,CAAC,gBAAgB,CAAC,CACjB;QACZ,IAAI,CAAC,YAAY,IAAI,CACpB,oBAAc,KAAK,EAAC,6BAA6B,EAAC,MAAM,EAAC,OAAO,IAC7D,SAAS,CACR,qFAAqF,CACtF,CACY,CAChB;QACD,wBAA+B,CAC3B;MACN,oBACE,eAAe,EAAE,IAAI,CAAC,cAAc,iBACvB,IAAI,CAAC,QAAQ,EAC1B,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,EAC1C,IAAI,EAAC,IAAI;QACT,uCAAuC;QACvC,OAAO,EAAE,IAAI,CAAC,aAAa;;QAEvB,GAAG;QACN,cAAc,CAAC;UACd,MAAM,EAAE,SAAS,CAAC,KAAK;UACvB,QAAQ,EAAE,SAAS,CAAC,QAAQ;SAC7B,CAAC,CACW,CACV,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  type EventEmitter,\n  Component,\n  Event,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\nimport { cartStore } from 'src/components/store/checkout/cart';\nimport { stripeStore } from 'src/components/store/checkout/stripe';\nimport { translate } from 'src/components/store/translationStore';\nimport { formatCurrency } from 'src/components/utils/formatCurrency';\nimport { submitGtag } from 'src/components/utils/submitGtag';\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  scoped: true,\n  styleUrl: 'zonos-checkout-payment.scss',\n  tag: 'zonos-checkout-payment',\n})\nexport class ZonosCheckoutPayment {\n  /**\n   * Error occurred during payment\n   */\n  @Prop() paymentError: boolean = false;\n\n  /**\n   * Whether or not the checkout is in mobile mode\n   */\n  @Prop() submitBtnType?: HTMLZonosButtonElement['variant'];\n\n  /**\n   * Whether or not the continue button is loading\n   */\n  @Prop() continueLoading: boolean = false;\n\n  /**\n   * Submit button main color\n   */\n  @Prop() submitBtnColor?: string;\n\n  /**\n   * Event to emit when the continue button is clicked\n   */\n  @Event() continueClicked!: EventEmitter<void>;\n\n  /**\n   * Whether or not the continue button is disabled\n   * @default true\n   */\n  @State() disabled: boolean = true;\n\n  @Watch('disabled')\n  watchFormComplete() {\n    if (!this.disabled) {\n      // submit google tag when the form is complete\n      submitGtag('zonos-checkout-payment-info');\n    }\n  }\n\n  /**\n   * handler for continue button click\n   */\n  private continueClickHandler = () => {\n    this.continueClicked.emit();\n  };\n\n  render() {\n    if (!stripeStore.stripeElements) {\n      return null;\n    }\n\n    this.disabled = !stripeStore.stripePaymentEventData?.complete;\n\n    return (\n      <Host class=\"zonos--checkout-payment zonos--elements\">\n        <div class=\"zonos--group\">\n          <zonos-text class=\"zonos--title\" type=\"semiBoldSubheader\">\n            {translate('Payment method')}\n          </zonos-text>\n          {this.paymentError && (\n            <zonos-banner class=\"zonos--payment-error-banner\" intent=\"error\">\n              {translate(\n                \"We couldn't complete your payment. Please verify the payment details and try again.\",\n              )}\n            </zonos-banner>\n          )}\n          <zonos-payment></zonos-payment>\n        </div>\n        <zonos-button\n          backgroundColor={this.submitBtnColor}\n          is-disabled={this.disabled}\n          loading={this.continueLoading}\n          onClick={() => this.continueClickHandler()}\n          size=\"lg\"\n          // use primary type when on mobile mode\n          variant={this.submitBtnType}\n        >\n          Pay{' '}\n          {formatCurrency({\n            amount: cartStore.total,\n            currency: cartStore.currency,\n          })}\n        </zonos-button>\n      </Host>\n    );\n  }\n}\n"]}