@zonos/elements 1.0.16

package/dist/collection/components/checkout/zonos-checkout/zonos-customer-info/zonos-customer-info.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-20);
+}
+:host .zonos--link-authentication {
+  margin-bottom: var(--amino-space-32);
+}
+: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-button {
+  width: 100%;
+}

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

@@ -0,0 +1,163 @@
+import { h, Host, } from "@stencil/core";
+import { stripeStore, } from "../../../store/checkout/stripe";
+import { translate } from "../../../store/translationStore";
+import { submitGtag } from "../../../utils/submitGtag";
+export class ZonosCustomerInfo {
+  constructor() {
+    /**
+     * handler for continue button click
+     */
+    this.continueClickHandler = () => {
+      this.continueClicked.emit();
+    };
+    this.continueLoading = false;
+    this.submitBtnType = undefined;
+    this.submitBtnColor = undefined;
+    this.defaultAddress = null;
+    this.disabled = true;
+  }
+  watchFormComplete() {
+    if (!this.disabled) {
+      // submit google tag when the form is complete
+      submitGtag('zonos-checkout-customer-info');
+    }
+  }
+  render() {
+    var _a, _b;
+    if (!stripeStore.stripeElements) {
+      return null;
+    }
+    // make sure data is valid
+    this.disabled =
+      !((_a = stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.complete) ||
+        !((_b = stripeStore.stripeLinkEventData) === null || _b === void 0 ? void 0 : _b.complete);
+    return (h(Host, { class: "zonos--customer-info zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Customer information')), h("zonos-link-authentication", { titleText: translate('Contact') }), h("zonos-address", { defaultAddress: this.defaultAddress, titleText: translate('Address'), type: "shipping" })), h("zonos-button", { backgroundColor: this.submitBtnColor, isDisabled: this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
+      // use primary type when on mobile mode
+      variant: this.submitBtnType }, translate('Continue to shipping'))));
+  }
+  static get is() { return "zonos-customer-info"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["zonos-customer-info.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["zonos-customer-info.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "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"
+      },
+      "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
+      },
+      "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
+      },
+      "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"
+      }
+    };
+  }
+  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-customer-info.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"zonos-customer-info.js","sourceRoot":"","sources":["../../../../../src/components/checkout/zonos-checkout/zonos-customer-info/zonos-customer-info.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,EAEL,WAAW,GACZ,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAW7D,MAAM,OAAO,iBAAiB;;IAwC5B;;OAEG;IACK,yBAAoB,GAAG,GAAG,EAAE;MAClC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;IAC9B,CAAC,CAAC;2BAzCiC,KAAK;;;0BAeO,IAAI;oBAWtB,IAAI;;EAGjC,iBAAiB;IACf,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,8CAA8C;MAC9C,UAAU,CAAC,8BAA8B,CAAC,CAAC;KAC5C;EACH,CAAC;EASD,MAAM;;IACJ,IAAI,CAAC,WAAW,CAAC,cAAc,EAAE;MAC/B,OAAO,IAAI,CAAC;KACb;IACD,0BAA0B;IAC1B,IAAI,CAAC,QAAQ;MACX,CAAC,CAAA,MAAA,WAAW,CAAC,sBAAsB,0CAAE,QAAQ,CAAA;QAC7C,CAAC,CAAA,MAAA,WAAW,CAAC,mBAAmB,0CAAE,QAAQ,CAAA,CAAC;IAE7C,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAC,sCAAsC;MAChD,WAAK,KAAK,EAAC,cAAc;QACvB,kBAAY,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,mBAAmB,IACtD,SAAS,CAAC,sBAAsB,CAAC,CACvB;QACb,iCACE,SAAS,EAAE,SAAS,CAAC,SAAS,CAAC,GACJ;QAC7B,qBACE,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,SAAS,EAAE,SAAS,CAAC,SAAS,CAAC,EAC/B,IAAI,EAAC,UAAU,GACA,CACb;MACN,oBACE,eAAe,EAAE,IAAI,CAAC,cAAc,EACpC,UAAU,EAAE,IAAI,CAAC,QAAQ,EACzB,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,IAE1B,SAAS,CAAC,sBAAsB,CAAC,CACrB,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 {\n  type ContactOption,\n  stripeStore,\n} from 'src/components/store/checkout/stripe';\nimport { translate } from 'src/components/store/translationStore';\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-customer-info.scss',\n  tag: 'zonos-customer-info',\n})\nexport class ZonosCustomerInfo {\n  /**\n   * Whether or not the continue button is loading\n   */\n  @Prop() continueLoading: boolean = false;\n\n  /**\n   * Whether or not the checkout is in mobile mode\n   */\n  @Prop() submitBtnType?: HTMLZonosButtonElement['variant'];\n\n  /**\n   * Submit button main color\n   */\n  @Prop() submitBtnColor?: string;\n\n  /**\n   * Default address to use for the checkout (preview mode)\n   */\n  @Prop() defaultAddress: ContactOption | null = null;\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-customer-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    // make sure data is valid\n    this.disabled =\n      !stripeStore.stripeAddressEventData?.complete ||\n      !stripeStore.stripeLinkEventData?.complete;\n\n    return (\n      <Host class=\"zonos--customer-info zonos--elements\">\n        <div class=\"zonos--group\">\n          <zonos-text class=\"zonos--title\" type=\"semiBoldSubheader\">\n            {translate('Customer information')}\n          </zonos-text>\n          <zonos-link-authentication\n            titleText={translate('Contact')}\n          ></zonos-link-authentication>\n          <zonos-address\n            defaultAddress={this.defaultAddress}\n            titleText={translate('Address')}\n            type=\"shipping\"\n          ></zonos-address>\n        </div>\n        <zonos-button\n          backgroundColor={this.submitBtnColor}\n          isDisabled={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          {translate('Continue to shipping')}\n        </zonos-button>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/checkout/zonos-checkout/zonos-review/assets/ChevronDownIcon.svg

@@ -0,0 +1 @@
+<svg color="var(--amino-gray-400)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M6.293 9.293a1 1 0 0 1 1.414 0L12 13.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-4.93 4.93a1.1 1.1 0 0 1-1.555 0l-4.93-4.93a1 1 0 0 1 0-1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>

package/dist/collection/components/checkout/zonos-checkout/zonos-review/assets/ChevronUpIcon.svg

@@ -0,0 +1 @@
+<svg color="var(--amino-gray-400)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M17.707 14.707a1 1 0 0 1-1.414 0L12 10.414l-4.293 4.293a1 1 0 0 1-1.414-1.414l4.93-4.93a1.1 1.1 0 0 1 1.555 0l4.93 4.93a1 1 0 0 1 0 1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>

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

@@ -0,0 +1,49 @@
+: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 .zonos--total-pay {
+  margin: var(--amino-space-16) 0 var(--amino-space-32);
+}
+
+:host(.mobile) {
+  display: flex;
+  flex-direction: row;
+  gap: var(--amino-space-24);
+  justify-content: space-between;
+  padding: var(--amino-space-4) 0;
+  margin-bottom: var(--amino-space-8);
+}
+:host(.mobile) .zonos--title {
+  display: flex;
+  align-self: center;
+  gap: var(--amino-space-8);
+}
+:host(.mobile) .zonos--total-pay {
+  margin: 0;
+}

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

@@ -0,0 +1,122 @@
+import { h, Host } from "@stencil/core";
+import { cartStore } from "../../../store/checkout/cart";
+import { translate } from "../../../store/translationStore";
+import { zonosStore } from "../../../store/zonosStore";
+import { isCheckoutMobile } from "../../../utils/checkout/isCheckoutMobile";
+import { classes } from "../../../utils/classes";
+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 ChevronDownIcon from "./assets/ChevronDownIcon.svg";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import ChevronUpIcon from "./assets/ChevronUpIcon.svg";
+export class ZonosReview {
+  constructor() {
+    this.mobile = false;
+    this.collapsed = false;
+    this.isMobile = false;
+  }
+  handleWindowResize() {
+    this.isMobile = isCheckoutMobile(this.mobile);
+  }
+  componentWillLoad() {
+    this.isMobile = isCheckoutMobile(this.mobile);
+  }
+  render() {
+    const titleTextType = this.isMobile ? 'boldSubheader' : 'semiBoldLabel';
+    const totalTextType = this.isMobile
+      ? 'boldSubheader'
+      : 'secondaryPageHeader';
+    const titleTextColor = this.isMobile ? 'gray-1200' : 'gray-800';
+    const totalWithoutTaxes = cartStore.total - cartStore.dutiesTaxFees;
+    const renderCollapseIcon = () => {
+      // only display the collapse icon if the component is being rendered with mobile styles
+      if (!this.isMobile) {
+        return null;
+      }
+      if (!this.collapsed) {
+        return (h("zonos-icon", { color: "gray-1200", content: ChevronDownIcon }));
+      }
+      return (h("zonos-icon", { color: "gray-1200", content: ChevronUpIcon }));
+    };
+    return (h(Host, { class: classes([
+        'zonos--review zonos--elements',
+        this.isMobile && 'mobile',
+      ]) }, h("div", { class: "zonos--title" }, h("zonos-text", { color: titleTextColor, type: titleTextType }, translate('Pay'), " ", zonosStore.organizationName), renderCollapseIcon()), h("div", { class: "zonos--total-pay" }, h("zonos-text", { type: totalTextType }, 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-review"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["zonos-review.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["zonos-review.css"]
+    };
+  }
+  static get assetsDirs() { return ["assets"]; }
+  static get properties() {
+    return {
+      "mobile": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether or not the component is being rendered with mobile styles"
+        },
+        "attribute": "mobile",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "collapsed": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether or not to show the collapse icon\nThis is controled from the collapsed state of the zonos-collapse component\nto show the collapse icon"
+        },
+        "attribute": "collapsed",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isMobile": {}
+    };
+  }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "handleWindowResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}
+//# sourceMappingURL=zonos-review.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"zonos-review.js","sourceRoot":"","sources":["../../../../../src/components/checkout/zonos-checkout/zonos-review/zonos-review.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAExE,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,gDAAgD,CAAC;AAClF,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AAErE,6GAA6G;AAC7G,6EAA6E;AAC7E,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAC3D,6EAA6E;AAC7E,OAAO,aAAa,MAAM,4BAA4B,CAAC;AAOvD,MAAM,OAAO,WAAW;;kBAII,KAAK;qBAOF,KAAK;oBAEL,KAAK;;EAGlC,kBAAkB;IAChB,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;EAChD,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;EAChD,CAAC;EAED,MAAM;IACJ,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC;IACxE,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ;MACjC,CAAC,CAAC,eAAe;MACjB,CAAC,CAAC,qBAAqB,CAAC;IAE1B,MAAM,cAAc,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC;IAChE,MAAM,iBAAiB,GAAG,SAAS,CAAC,KAAK,GAAG,SAAS,CAAC,aAAa,CAAC;IACpE,MAAM,kBAAkB,GAAG,GAAG,EAAE;MAC9B,uFAAuF;MACvF,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QAClB,OAAO,IAAI,CAAC;OACb;MAED,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;QACnB,OAAO,CACL,kBAAY,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,eAAe,GAAe,CACtE,CAAC;OACH;MACD,OAAO,CACL,kBAAY,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,aAAa,GAAe,CACpE,CAAC;IACJ,CAAC,CAAC;IACF,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE,OAAO,CAAC;QACb,+BAA+B;QAC/B,IAAI,CAAC,QAAQ,IAAI,QAAQ;OAC1B,CAAC;MAEF,WAAK,KAAK,EAAC,cAAc;QACvB,kBAAY,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,aAAa;UACnD,SAAS,CAAC,KAAK,CAAC;;UAAG,UAAU,CAAC,gBAAgB,CACpC;QACZ,kBAAkB,EAAE,CACjB;MACN,WAAK,KAAK,EAAC,kBAAkB;QAC3B,kBAAY,IAAI,EAAE,aAAa,IAC5B,cAAc,CAAC;UACd,MAAM;UACJ,6FAA6F;UAC7F,SAAS,CAAC,IAAI,KAAK,UAAU;YAC3B,CAAC,CAAC,iBAAiB;YACnB,CAAC,CAAC,SAAS,CAAC,KAAK;UACrB,QAAQ,EAAE,SAAS,CAAC,QAAQ;SAC7B,CAAC,CACS,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Listen, Prop, State } from '@stencil/core';\n\nimport { cartStore } from 'src/components/store/checkout/cart';\nimport { translate } from 'src/components/store/translationStore';\nimport { zonosStore } from 'src/components/store/zonosStore';\nimport { isCheckoutMobile } from 'src/components/utils/checkout/isCheckoutMobile';\nimport { classes } from 'src/components/utils/classes';\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 ChevronDownIcon from './assets/ChevronDownIcon.svg';\n// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths\nimport ChevronUpIcon from './assets/ChevronUpIcon.svg';\n@Component({\n  assetsDirs: ['assets'],\n  shadow: true,\n  styleUrl: 'zonos-review.scss',\n  tag: 'zonos-review',\n})\nexport class ZonosReview {\n  /**\n   * Whether or not the component is being rendered with mobile styles\n   */\n  @Prop() mobile: boolean = false;\n\n  /**\n   * Whether or not to show the collapse icon\n   * This is controled from the collapsed state of the zonos-collapse component\n   * to show the collapse icon\n   */\n  @Prop() collapsed: boolean = false;\n\n  @State() isMobile: boolean = false;\n\n  @Listen('resize', { target: 'window' })\n  handleWindowResize() {\n    this.isMobile = isCheckoutMobile(this.mobile);\n  }\n\n  componentWillLoad() {\n    this.isMobile = isCheckoutMobile(this.mobile);\n  }\n\n  render() {\n    const titleTextType = this.isMobile ? 'boldSubheader' : 'semiBoldLabel';\n    const totalTextType = this.isMobile\n      ? 'boldSubheader'\n      : 'secondaryPageHeader';\n\n    const titleTextColor = this.isMobile ? 'gray-1200' : 'gray-800';\n    const totalWithoutTaxes = cartStore.total - cartStore.dutiesTaxFees;\n    const renderCollapseIcon = () => {\n      // only display the collapse icon if the component is being rendered with mobile styles\n      if (!this.isMobile) {\n        return null;\n      }\n\n      if (!this.collapsed) {\n        return (\n          <zonos-icon color=\"gray-1200\" content={ChevronDownIcon}></zonos-icon>\n        );\n      }\n      return (\n        <zonos-icon color=\"gray-1200\" content={ChevronUpIcon}></zonos-icon>\n      );\n    };\n    return (\n      <Host\n        class={classes([\n          'zonos--review zonos--elements',\n          this.isMobile && 'mobile',\n        ])}\n      >\n        <div class=\"zonos--title\">\n          <zonos-text color={titleTextColor} type={titleTextType}>\n            {translate('Pay')} {zonosStore.organizationName}\n          </zonos-text>\n          {renderCollapseIcon()}\n        </div>\n        <div class=\"zonos--total-pay\">\n          <zonos-text type={totalTextType}>\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        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,69 @@
+: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--shipping-method-title {
+  margin-bottom: var(--amino-space-16);
+}
+:host .zonos-shipping-rich-radio {
+  margin-bottom: var(--amino-space-24);
+}
+:host .zonos--group {
+  margin-bottom: var(--amino-space-20);
+  overflow: auto;
+  padding-right: 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-button {
+  width: 100%;
+}
+:host zonos-banner {
+  margin-top: var(--amino-space-24);
+}

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

@@ -0,0 +1,176 @@
+import { h, Host, } from "@stencil/core";
+import { cartStore, cartStoreGetShippingTransitInfo, cartStoreUpdateSelectedShippingOption, } 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 ZonosShipping {
+  constructor() {
+    this.handleRadioSelected = async (e) => {
+      var _a;
+      this.selectedShippingMethod = e.detail;
+      if (!this.selectedShippingMethod) {
+        return;
+      }
+      const selectedShippingOption = ((_a = cartStore.shippingData) === null || _a === void 0 ? void 0 : _a.find(item => { var _a; return item.id === ((_a = this.selectedShippingMethod) === null || _a === void 0 ? void 0 : _a.value); })) || null;
+      if (!selectedShippingOption) {
+        return;
+      }
+      // save selected shipping option to store
+      const updateStatus = await cartStoreUpdateSelectedShippingOption(selectedShippingOption);
+      if (!updateStatus) {
+        return;
+      }
+      this.disabled = false;
+    };
+    /**
+     * handler for continue button click
+     */
+    this.continueClickHandler = () => {
+      this.continueClicked.emit();
+    };
+    this.continueLoading = false;
+    this.submitBtnColor = undefined;
+    this.submitBtnType = undefined;
+    this.selectedShippingMethod = null;
+    this.disabled = true;
+  }
+  watchFormComplete() {
+    if (!this.disabled) {
+      // submit google tag when the form is complete
+      submitGtag('zonos-checkout-shipping-info');
+    }
+  }
+  render() {
+    var _a, _b;
+    const shipToCountry = (_a = stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.value.address.country;
+    const serviceLevels = (_b = cartStore.shippingData) === null || _b === void 0 ? void 0 : _b.flatMap((item) => {
+      var _a, _b;
+      const { expectedDate, maxTransit, minTransit } = cartStoreGetShippingTransitInfo(item);
+      const sublabel = expectedDate
+        ? `${translate('Expected delivery')} ${expectedDate}`
+        : '';
+      const caption = minTransit && maxTransit
+        ? `(${minTransit}-${maxTransit} ${translate('business days')})`
+        : '';
+      const shippingAmount = ((_b = (_a = cartStore.landedCostData) === null || _a === void 0 ? void 0 : _a.find(landedCostItem => { var _a; return ((_a = landedCostItem.landedCost) === null || _a === void 0 ? void 0 : _a.shipmentRating.id) === item.id; })) === null || _b === void 0 ? void 0 : _b.subtotals.shipping) || 0;
+      return {
+        caption,
+        label: item.displayName,
+        price: formatCurrency({
+          amount: shippingAmount,
+          currency: cartStore.currency,
+        }),
+        sublabel,
+        value: item.id,
+      };
+    });
+    return (h(Host, { class: "zonos--shipping zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Shipping information')), h("zonos-text", { class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !(serviceLevels === null || serviceLevels === void 0 ? void 0 : serviceLevels.length) ? (h("zonos-banner", { bannerTitle: "No shipping methods found - try editing your address or contacting support if the error persists", intent: "error" })) : (h("zonos-shipping-rich-radio", { items: serviceLevels || [], onRadioSelected: e => this.handleRadioSelected(e) })), cartStore.isSelectedShippingAboveDeminimis && (h("zonos-banner", { intent: "warning" }, translate('Above de minimis threshold for'), " ", shipToCountry, ".", ' ', translate('Duties and taxes will be applied to items and shipping.')))), 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 }, translate('Go to payment'))));
+  }
+  static get is() { return "zonos-shipping"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["zonos-shipping.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["zonos-shipping.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "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
+      },
+      "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
+      }
+    };
+  }
+  static get states() {
+    return {
+      "selectedShippingMethod": {},
+      "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-shipping.js.map