@zonos/elements 1.3.232 → 1.3.234

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

@@ -0,0 +1,165 @@
+import { h, Host, } from "@stencil/core";
+import { localizationStore } from "../../../store/hello/localization";
+import { translate } from "../../../store/translationStore";
+import { isInvoiceMobile, isInvoiceTablet, } from "../../../utils/checkout/isInvoiceMobileTablet";
+import { classes } from "../../../utils/classes";
+import { languages } from "../../../../types/ILanguage";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import Globe from "./assets/globe.svg";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import ZonosWordmark from "./assets/zonosWordmark.svg";
+export class ZonosInvoiceFooter {
+    constructor() {
+        /**
+         * Override mobile mode
+         */
+        this.mobile = false;
+        /**
+         * Override tablet mode
+         */
+        this.tablet = false;
+        this.showLanguageDialog = false;
+        this.isMobile = false;
+        this.isTablet = false;
+    }
+    handleGlobalClick(e) {
+        if (!this.el.contains(e.target) && this.showLanguageDialog) {
+            this.showLanguageDialog = false;
+        }
+    }
+    toggleLanguageDialog() {
+        this.showLanguageDialog = !this.showLanguageDialog;
+    }
+    handleMobileChange() {
+        this.isMobile = isInvoiceMobile(this.mobile);
+    }
+    handleTabletChange() {
+        this.isTablet = isInvoiceTablet(this.tablet);
+    }
+    componentWillLoad() {
+        this.isMobile = isInvoiceMobile(this.mobile);
+        this.isTablet = isInvoiceTablet(this.tablet);
+    }
+    render() {
+        var _a;
+        const languageLabel = (_a = languages.find(x => x.code === localizationStore.selectedLocale)) === null || _a === void 0 ? void 0 : _a.label;
+        // reverse color when on desktop. With the coversheet backdrop, the color should be white
+        const colorDesktop = 'gray-1000';
+        return (h(Host, { key: 'c84163fd8ab0bc0f2c791028b6896379a4ae6a27', class: classes([
+                'zonos--elements',
+                this.isMobile && 'mobile',
+                this.isTablet && 'tablet',
+            ]) }, h("div", { key: '099a3be332fa52c5e7551bdd2a618041c4a6eb22', class: "zonos--invoice-footer" }, h("div", { key: 'ab727f45f3a67bcdd51eb29b392462f15eb5fedd', class: "zonos--invoice-locale-wrapper" }, h("zonos-button", { key: '3d8431c78d54e0fe630677d0dd4ae2c975a208fa', buttonColor: colorDesktop, class: "zonos--invoice-footer-language-button", icon: h("zonos-icon", { "aria-label": "Language select", content: Globe, iconColor: colorDesktop }), onClick: () => this.toggleLanguageDialog(), variant: "subtle" }, languageLabel), h("div", { key: '2920b4105b6209c4177fc91651dc5d9397d6abf2', class: classes([
+                'zonos--invoice-language-dialog',
+                this.showLanguageDialog &&
+                    'zonos--invoice-language-dialog-open',
+            ]) }, h("zonos-language-select", { key: '705e1a4243dc7ebc73c522a82f93c3d833240a95', handleOnClose: () => this.toggleLanguageDialog() }))), h("div", { key: '49c2d0ae1f587079b48f12d62d10eb422991255e', class: "zonos--invoice-footer-icon-wrapper" }, h("div", { key: '58a4da788527ddf4abd759b5e305e747aa96d540', class: "zonos--invoice-footer-logo" }, h("zonos-text", { key: '45bf1af64ec0f0a2e11e8d23361b71f4b4189881', textColor: colorDesktop }, translate('Powered by')), h("a", { key: '1dd7224f3e126bcabe60a42c9529ab65c64f0063', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '7dc21ce09b72bf37efd30e2c17b6d8b9328e8c3d', autoHeight: true, content: ZonosWordmark, size: 42 }))), h("div", { key: 'a0d053e6745733cd61868c109628a1835f4fe3ed', class: "dot" }), h("a", { key: 'fd467e88aa2ed10b707f88ed0d1a5af80af35539', href: "https://zonos.com/docs/legal/zonos-privacy-policy", target: "_blank" }, h("zonos-text", { key: '35db684368ff8abc05c2c7fab22500270b0b7e21', textColor: colorDesktop }, translate('Privacy policy')))))));
+    }
+    static get is() { return "zonos-invoice-footer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-invoice-footer.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-invoice-footer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "mobile": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Override mobile mode"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "mobile",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "tablet": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Override tablet mode"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "tablet",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dataTheme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ElementsUiTheme",
+                    "resolved": "\"DARK\" | \"LIGHT\" | \"SYSTEM\" | undefined",
+                    "references": {
+                        "ElementsUiTheme": {
+                            "location": "import",
+                            "path": "src/types/generated/graphql.internal.types",
+                            "id": "src/types/generated/graphql.internal.types.ts::ElementsUiTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme to change the color of the logo"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "data-theme",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "showLanguageDialog": {},
+            "isMobile": {},
+            "isTablet": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "mobile",
+                "methodName": "handleMobileChange"
+            }, {
+                "propName": "tablet",
+                "methodName": "handleTabletChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleGlobalClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/checkout/zonos-invoice/zonos-invoice-order-details/assets/ChevronDownIcon.svg

@@ -0,0 +1 @@
+<svg color="var(--zonos-elements-gray-400)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://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-invoice/zonos-invoice-order-details/assets/ChevronUpIcon.svg

@@ -0,0 +1 @@
+<svg color="var(--zonos-elements-gray-400)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://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-invoice/zonos-invoice-order-details/zonos-invoice-order-details.css

@@ -0,0 +1,117 @@
+:host {
+  font-family: var(--zonos--font-family, Inter), Inter;
+  display: block;
+  white-space: normal;
+}
+:host * {
+  font-family: var(--zonos--font-family, Inter), Inter;
+}
+: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 {
+  height: 100%;
+}
+:host * {
+  overscroll-behavior: contain;
+}
+:host *::-webkit-scrollbar {
+  width: 10px;
+}
+:host *::-webkit-scrollbar-track {
+  background: var(--zonos-elements-gray-50);
+}
+:host *::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background: #cccccc;
+  border: 3px solid transparent;
+  background-clip: content-box;
+}
+:host *::-webkit-scrollbar-thumb:hover {
+  background: #d6d6d6;
+}
+:host .zonos--order-details-header-text {
+  display: flex;
+}
+:host .zonos--wrapper {
+  overflow: auto;
+  background-color: var(--zonos-elements-gray-50);
+  border-radius: 16px;
+  height: 100%;
+  min-height: 56px;
+}
+:host .zonos--order-details-header-text {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+:host .zonos--order-details-header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  appearance: none;
+  background-color: var(--zonos-elements-gray-50);
+  border: none;
+  display: flex;
+  padding: 16px 16px 0 16px;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+}
+:host .zonos--order-details-header:focus-visible {
+  outline: none;
+}
+:host .zonos--order-details-wrapper {
+  position: relative;
+  padding: 0 16px 16px 16px;
+}
+:host .zonos--invoice-order-details-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+:host .zonos--invoice-order-info {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+:host .zonos--invoice-order-info .zonos--invoice-order-details-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+:host .zonos--invoice-order-info .zonos--invoice-order-details-row > * {
+  flex: 1 1 150px;
+}
+:host .zonos--invoice-order-info .zonos--invoice-order-details-column {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+:host .zonos--invoice-order-info .zonos--invoice-order-shipping-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}

package/dist/collection/components/checkout/zonos-invoice/zonos-invoice-order-details/zonos-invoice-order-details.js

@@ -0,0 +1,175 @@
+import { h, Host, } from "@stencil/core";
+import { invoiceStore } from "../../../store/checkout/invoice";
+import { translate } from "../../../store/translationStore";
+import { zonosStore } from "../../../store/zonosStore";
+import { isCheckoutMobile } from "../../../utils/checkout/isCheckoutMobile";
+import { renderCheckoutCurrency } from "../../../utils/checkout/renderCheckoutCurrency";
+import { classes } from "../../../utils/classes";
+/** These assets need 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 ZonosInvoiceOrderDetails {
+    constructor() {
+        /**
+         * Whether or not the component is being rendered with mobile styles
+         */
+        this.mobile = true;
+        /**
+         * The landed cost id that is used to fetch the shipping address
+         */
+        this.landedCostId = '';
+        this.isMobile = false;
+        this.collapseState = this.collapsed;
+    }
+    handleCollapseChangeFromProp(collapsed) {
+        this.collapseState = collapsed;
+    }
+    handleCollapseChange(collapsed) {
+        this.collapseClicked.emit(collapsed);
+    }
+    handleWindowResize() {
+        this.isMobile = isCheckoutMobile(this.mobile);
+    }
+    componentWillLoad() {
+        this.handleWindowResize();
+    }
+    render() {
+        const renderCollapseIcon = () => {
+            if (this.collapseState) {
+                return (h("zonos-icon", { "aria-label": "Collapse expanded section", content: ChevronDownIcon, iconColor: "gray-1200" }));
+            }
+            return (h("zonos-icon", { "aria-label": "Expand collapsed section", content: ChevronUpIcon, iconColor: "gray-1200" }));
+        };
+        return (h(Host, { class: classes([
+                'zonos--invoice-order-details zonos--elements',
+                this.isMobile && 'mobile',
+            ]) }, h("div", { class: "zonos--wrapper" }, h("button", { class: "zonos--order-details-header", onClick: () => {
+                this.collapseState = !this.collapseState;
+            }, type: "button" }, h("div", { class: "zonos--order-details-header-text" }, h("zonos-text", { type: "boldSubheader" }, translate('Pay [organizationName]', {
+            organizationName: zonosStore.organizationName,
+        })), renderCollapseIcon()), h("zonos-text", { type: "boldSubheader" }, renderCheckoutCurrency({
+            amount: invoiceStore.amountTotalDue || 0,
+            isForeign: true,
+        }))), h("div", { class: "zonos--order-details-wrapper" }, h("zonos-collapse", { collapsed: this.collapseState }, h("div", { class: "zonos--invoice-order-details-content" }, h("zonos-invoice-cart-items", { isMobile: this.isMobile }), h("zonos-invoice-subtotal", { isMobile: this.isMobile })))))));
+    }
+    static get is() { return "zonos-invoice-order-details"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-invoice-order-details.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-invoice-order-details.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"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "mobile",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "collapsed": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": true,
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "collapsed",
+                "reflect": false
+            },
+            "landedCostId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The landed cost id that is used to fetch the shipping address"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "landed-cost-id",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isMobile": {},
+            "collapseState": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "collapseClicked",
+                "name": "collapseClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits the collapsed state of the zonos-collapse component"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "collapsed",
+                "methodName": "handleCollapseChangeFromProp"
+            }, {
+                "propName": "collapseState",
+                "methodName": "handleCollapseChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "handleWindowResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}

package/dist/collection/components/checkout/zonos-invoice/zonos-invoice-payment/assets/CheckmarkLineIcon.svg

@@ -0,0 +1 @@
+<svg color="var(--zonos-elements-gray-1000)" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="var(--zonos-elements-gray-1000)" d="M15.342 10.21a.75.75 0 0 0-1.184-.92l-2.978 3.829-1.4-1.4a.75.75 0 1 0-1.06 1.061l1.8 1.8a1 1 0 0 0 1.496-.093l3.326-4.277Z"/><path fill="var(--zonos-elements-gray-1000)" fill-rule="evenodd" d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-6.5 8a6.5 6.5 0 1 1 13 0 6.5 6.5 0 0 1-13 0Z" clip-rule="evenodd"/></svg>

package/dist/collection/components/checkout/zonos-invoice/zonos-invoice-payment/assets/RemoveLineIcon.svg

@@ -0,0 +1 @@
+<svg color="var(--zonos-elements-gray-1000)" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="var(--zonos-elements-gray-1000)" d="M14.475 10.586a.75.75 0 1 0-1.06-1.06L12 10.938l-1.414-1.414a.75.75 0 0 0-1.06 1.06L10.938 12l-1.414 1.414a.75.75 0 1 0 1.06 1.06L12 13.062l1.414 1.414a.75.75 0 0 0 1.06-1.06L13.062 12l1.414-1.414Z"/><path fill="var(--zonos-elements-gray-1000)" fill-rule="evenodd" d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-6.5 8a6.5 6.5 0 1 1 13 0 6.5 6.5 0 0 1-13 0Z" clip-rule="evenodd"/></svg>

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

@@ -0,0 +1,98 @@
+:host {
+  font-family: var(--zonos--font-family, Inter), Inter;
+  display: block;
+  white-space: normal;
+}
+:host * {
+  font-family: var(--zonos--font-family, Inter), Inter;
+}
+: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;
+  flex: 1;
+}
+:host .zonos--title {
+  margin-bottom: 24px;
+}
+:host .zonos--group {
+  margin-bottom: 20px;
+  overflow: auto;
+  padding: 5px;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overscroll-behavior: contain;
+}
+:host .zonos--group::-webkit-scrollbar {
+  width: 10px;
+}
+:host .zonos--group::-webkit-scrollbar-track {
+  background: var(--zonos-elements-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: 8px;
+}
+:host .zonos--error-banner {
+  margin-bottom: 16px;
+}
+:host zonos-button {
+  box-shadow: 0 0 1px 0 var(--zonos-elements-gray-600);
+}
+:host .zonos--pay-in-base-currency-btn {
+  box-shadow: none;
+}
+:host .zonos--group-btn {
+  position: sticky;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  gap: 12px;
+  bottom: -5px;
+  padding-top: 12px;
+  background: var(--zonos--primary-color, var(--zonos-elements-gray-0));
+}
+:host .zonos--group-btn zonos-text {
+  text-align: center;
+}
+:host .zonos--group-btn zonos-button {
+  width: 100%;
+}
+:host .zonos--test-cards {
+  margin-top: auto;
+  padding-top: 16px;
+}