@zonos/elements 1.0.16

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

@@ -0,0 +1,119 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
+import { s as stripeStore, l as stripeStoreRetrievePayment, j as stripeStoreReset } from './stripe.js';
+import { t as translate } from './localization.js';
+import { g as getBorderRadius } from './getBorderRadius.js';
+import { s as submitGtag } from './submitGtag.js';
+import { d as defineCustomElement$4 } from './zonos-button2.js';
+import { d as defineCustomElement$3 } from './zonos-icon2.js';
+import { d as defineCustomElement$2 } from './zonos-spinner2.js';
+import { d as defineCustomElement$1 } from './zonos-text2.js';
+
+const RemoveIcon = `<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>`;
+
+const SuccessIcon = `<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>`;
+
+const zonosCheckoutFinishCss = ":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}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .zonos--group{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align: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:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}";
+
+const ZonosCheckoutFinish = /*@__PURE__*/ proxyCustomElement(class ZonosCheckoutFinish extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.closeClick = createEvent(this, "closeClick", 7);
+    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 assetsDirs() { return ["assets"]; }
+  static get style() { return zonosCheckoutFinishCss; }
+}, [1, "zonos-checkout-finish", {
+    "borderRadius": [1, "border-radius"],
+    "storybookForceStatus": [1, "storybook-force-status"],
+    "overrideNotification": [16],
+    "isLoading": [32],
+    "notificationType": [32],
+    "notificationTitle": [32],
+    "notificationMessages": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["zonos-checkout-finish", "zonos-button", "zonos-icon", "zonos-spinner", "zonos-text"];
+  components.forEach(tagName => { switch (tagName) {
+    case "zonos-checkout-finish":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ZonosCheckoutFinish);
+      }
+      break;
+    case "zonos-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "zonos-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "zonos-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "zonos-text":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { ZonosCheckoutFinish as Z, defineCustomElement as d };
+
+//# sourceMappingURL=zonos-checkout-finish2.js.map

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

@@ -0,0 +1 @@
+{"file":"zonos-checkout-finish2.js","mappings":";;;;;;;;;;;;;;AAAA,MAAM,sBAAsB,GAAG,q8BAAq8B;;MCwCv9B,mBAAmB;;;;;;IA2BtB,uBAAkB,GAAG;MAC3B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;MACtB,MAAM,YAAY,GAChB,IAAI,eAAe,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,CAC7C,8BAA8B,CAC/B,IAAI,WAAW,CAAC,YAAY,CAAC;MAChC,IAAI,YAAY,EAAE;QAChB,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,MAAM,0BAA0B,CAAC;UAC3D,YAAY;UACZ,oBAAoB,EAAE,IAAI,CAAC,oBAAoB;SAChD,CAAC,CAAC;QACH,IAAI,CAAC,gBAAgB,GAAG,KAAK,GAAG,OAAO,GAAG,SAAS,CAAC;QACpD,IAAI,CAAC,oBAAoB,GAAG,QAAQ,IAAI,EAAE,CAAC;QAC3C,IAAI,CAAC,iBAAiB,GAAG,KAAK;YAC1B,SAAS,CAAC,gBAAgB,CAAC;YAC3B,SAAS,CAAC,iBAAiB,CAAC,CAAC;QAEjC,IAAI,KAAK,EAAE;UACT,UAAU,CAAC,6BAA6B,CAAC,CAAC;SAC3C;aAAM;UACL,UAAU,CAAC,wBAAwB,CAAC,CAAC;SACtC;OACF;MACD,gBAAgB,EAAE,CAAC;MACnB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;KACxB,CAAC;IAEM,sBAAiB,GAAG;MAC1B,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;KACxB,CAAC;wBApDsC,SAAS;;;qBAkBnB,IAAI;4BACe,SAAS;6BACrB,EAAE;gCACG,EAAE;;EAiC5C,gBAAgB;IACd,IAAI,IAAI,CAAC,oBAAoB,EAAE;;MAE7B,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC;MACvD,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC;MACzD,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC;MAC/D,OAAO;KACR;IACD,KAAK,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAChC;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAC,wCAAwC,EAC9C,KAAK,EAAE;QACL,iBAAiB,EAAE,eAAe,CAAC,IAAI,CAAC,YAAY,CAAC;OACtD,IAEA,IAAI,CAAC,SAAS,KACb,WAAK,KAAK,EAAC,iBAAiB,IAC1B,wBAA+B,CAC3B,CACP,EACA,CAAC,IAAI,CAAC,SAAS,KACd,WAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,gBAAgB,KAAK,SAAS,IAClC,kBACE,KAAK,EAAE,UAAU,EACjB,OAAO,EAAE,WAAW,EACpB,IAAI,EAAE,EAAE,GACI,KAEd,kBACE,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,UAAU,EACnB,IAAI,EAAE,EAAE,GACI,CACf,EACD,kBAAY,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,mBAAmB,IACtD,IAAI,CAAC,iBAAiB,CACZ,EACb,sBACG,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,OAAO,KACpC,kBACG,OAAO,EACR,aAAM,CACL,CACJ,CAAC,CACS,EACb,oBACE,OAAO,EAAE,MAAM,IAAI,CAAC,iBAAiB,EAAE,EACvC,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,SAAS,IAEhB,SAAS,CAAC,eAAe,CAAC,CACd,CACX,CACP,CACI,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/checkout/zonos-checkout/zonos-checkout-finish/zonos-checkout-finish.scss?tag=zonos-checkout-finish&encapsulation=shadow","src/components/checkout/zonos-checkout/zonos-checkout-finish/zonos-checkout-finish.tsx"],"sourcesContent":["$border-radius: var(--border-radius, 10px);\n\n:host {\n  display: flex;\n  flex-direction: column;\n  .zonos--group {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin-bottom: $amino-space-24;\n    border-radius: $border-radius;\n    gap: $amino-space-24;\n    max-width: 360px;\n    width: auto;\n    margin: auto;\n    margin-top: $amino-space-24;\n    background-color: $amino-gray-50;\n    padding: $amino-space-20;\n  }\n  zonos-button {\n    width: 100%;\n  }\n  .loading-wrapper {\n    min-height: 300px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n}\n","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"],"version":3}

package/dist/components/zonos-checkout-payment.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ZonosCheckoutPayment extends Components.ZonosCheckoutPayment, HTMLElement {}
+export const ZonosCheckoutPayment: {
+  prototype: ZonosCheckoutPayment;
+  new (): ZonosCheckoutPayment;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,8 @@
+import { Z as ZonosCheckoutPayment$1, d as defineCustomElement$1 } from './zonos-checkout-payment2.js';
+
+const ZonosCheckoutPayment = ZonosCheckoutPayment$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZonosCheckoutPayment, defineCustomElement };
+
+//# sourceMappingURL=zonos-checkout-payment.js.map

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

@@ -0,0 +1 @@
+{"file":"zonos-checkout-payment.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

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

@@ -0,0 +1,104 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { s as stripeStore, c as cartStore } from './stripe.js';
+import { t as translate } from './localization.js';
+import { f as formatCurrency } from './formatCurrency.js';
+import { s as submitGtag } from './submitGtag.js';
+import { d as defineCustomElement$5 } from './zonos-banner2.js';
+import { d as defineCustomElement$4 } from './zonos-button2.js';
+import { d as defineCustomElement$3 } from './zonos-payment2.js';
+import { d as defineCustomElement$2 } from './zonos-spinner2.js';
+import { d as defineCustomElement$1 } from './zonos-text2.js';
+
+const zonosCheckoutPaymentCss = ".sc-zonos-checkout-payment-h{font-family:Inter;display:block}.sc-zonos-checkout-payment-h img.sc-zonos-checkout-payment{max-width:100%}.sc-zonos-checkout-payment-h dl.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h dd.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h1.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h2.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h3.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h4.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h5.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h6.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h hr.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h figure.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h p.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h pre.sc-zonos-checkout-payment{margin:0}.sc-zonos-checkout-payment-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-checkout-payment-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-checkout-payment-h .zonos--title.sc-zonos-checkout-payment{margin-bottom:var(--amino-space-24)}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment{margin-bottom:var(--amino-space-20);overflow:auto;padding:0 5px}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar{width:10px}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-checkout-payment-h .zonos--payment-error-banner.sc-zonos-checkout-payment{margin-bottom:var(--amino-space-8)}.sc-zonos-checkout-payment-h zonos-button.sc-zonos-checkout-payment{width:100%}";
+
+const ZonosCheckoutPayment = /*@__PURE__*/ proxyCustomElement(class ZonosCheckoutPayment extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.continueClicked = createEvent(this, "continueClicked", 7);
+    /**
+     * 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 watchers() { return {
+    "disabled": ["watchFormComplete"]
+  }; }
+  static get style() { return zonosCheckoutPaymentCss; }
+}, [2, "zonos-checkout-payment", {
+    "paymentError": [4, "payment-error"],
+    "submitBtnType": [1, "submit-btn-type"],
+    "continueLoading": [4, "continue-loading"],
+    "submitBtnColor": [1, "submit-btn-color"],
+    "disabled": [32]
+  }, undefined, {
+    "disabled": ["watchFormComplete"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["zonos-checkout-payment", "zonos-banner", "zonos-button", "zonos-payment", "zonos-spinner", "zonos-text"];
+  components.forEach(tagName => { switch (tagName) {
+    case "zonos-checkout-payment":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ZonosCheckoutPayment);
+      }
+      break;
+    case "zonos-banner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "zonos-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "zonos-payment":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "zonos-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "zonos-text":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { ZonosCheckoutPayment as Z, defineCustomElement as d };
+
+//# sourceMappingURL=zonos-checkout-payment2.js.map

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

@@ -0,0 +1 @@
+{"file":"zonos-checkout-payment2.js","mappings":";;;;;;;;;;;AAAA,MAAM,uBAAuB,GAAG,u/DAAu/D;;MC0B1gE,oBAAoB;;;;;;;;IA2CvB,yBAAoB,GAAG;MAC7B,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;KAC7B,CAAC;wBAzC8B,KAAK;;2BAUF,KAAK;;oBAgBX,IAAI;;EAGjC,iBAAiB;IACf,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;;MAElB,UAAU,CAAC,6BAA6B,CAAC,CAAC;KAC3C;GACF;EASD,MAAM;;IACJ,IAAI,CAAC,WAAW,CAAC,cAAc,EAAE;MAC/B,OAAO,IAAI,CAAC;KACb;IAED,IAAI,CAAC,QAAQ,GAAG,EAAC,MAAA,WAAW,CAAC,sBAAsB,0CAAE,QAAQ,CAAA,CAAC;IAE9D,QACE,EAAC,IAAI,IAAC,KAAK,EAAC,yCAAyC,IACnD,WAAK,KAAK,EAAC,cAAc,IACvB,kBAAY,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,mBAAmB,IACtD,SAAS,CAAC,gBAAgB,CAAC,CACjB,EACZ,IAAI,CAAC,YAAY,KAChB,oBAAc,KAAK,EAAC,6BAA6B,EAAC,MAAM,EAAC,OAAO,IAC7D,SAAS,CACR,qFAAqF,CACtF,CACY,CAChB,EACD,wBAA+B,CAC3B,EACN,oBACE,eAAe,EAAE,IAAI,CAAC,cAAc,iBACvB,IAAI,CAAC,QAAQ,EAC1B,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,OAAO,EAAE,MAAM,IAAI,CAAC,oBAAoB,EAAE,EAC1C,IAAI,EAAC,IAAI;;MAET,OAAO,EAAE,IAAI,CAAC,aAAa,WAEvB,GAAG,EACN,cAAc,CAAC;MACd,MAAM,EAAE,SAAS,CAAC,KAAK;MACvB,QAAQ,EAAE,SAAS,CAAC,QAAQ;KAC7B,CAAC,CACW,CACV,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/checkout/zonos-checkout/zonos-checkout-payment/zonos-checkout-payment.scss?tag=zonos-checkout-payment&encapsulation=scoped","src/components/checkout/zonos-checkout/zonos-checkout-payment/zonos-checkout-payment.tsx"],"sourcesContent":[":host {\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  .zonos--title {\n    margin-bottom: $amino-space-24;\n  }\n  .zonos--group {\n    margin-bottom: $amino-space-20;\n    overflow: auto;\n    padding: 0 5px;\n\n    @include zonos--scrollbar;\n  }\n\n  .zonos--payment-error-banner {\n    margin-bottom: $amino-space-8;\n  }\n\n  zonos-button {\n    width: 100%;\n  }\n}\n","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"],"version":3}

package/dist/components/zonos-checkout.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ZonosCheckout extends Components.ZonosCheckout, HTMLElement {}
+export const ZonosCheckout: {
+  prototype: ZonosCheckout;
+  new (): ZonosCheckout;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;