@zonos/elements 1.3.233 → 1.3.234

package/dist/cjs/zonos-v-stack.cjs.entry.js

@@ -20,9 +20,9 @@ const VStack = class {
         this.spacing = 24;
     }
     render() {
-        return (index.h(index.Host, { key: 'd65f235ba8ffaefff1ec5e5bbd8bba1313e97a83', style: {
+        return (index.h(index.Host, { key: '2046d921010e03f983caf7abbe167e97910e932c', style: {
                 '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: '31806036975f9640fdccafcc11053596dd17f4ef', class: classes.classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, index.h("slot", { key: 'a3c5a3f592f86cfd9ebb810c72e2e22011ec4758' }))));
+            } }, index.h("div", { key: 'a3d2a596527254b44be7841bf3d1c8a8c0f85af4', class: classes.classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, index.h("slot", { key: '3b56e670f953ce24f7d4a96789ffdf51ede94b85' }))));
     }
 };
 VStack.style = ZonosVStackStyle0;

package/dist/collection/collection-manifest.json

@@ -27,6 +27,14 @@
     "components/checkout/zonos-collect/zonos-collect-payment/zonos-collect-payment.js",
     "components/checkout/zonos-collect/zonos-collect-review/zonos-collect-review.js",
     "components/checkout/zonos-collect/zonos-collect-subtotal/zonos-collect-subtotal.js",
+    "components/checkout/zonos-invoice/zonos-invoice.js",
+    "components/checkout/zonos-invoice/zonos-invoice-cart-items/zonos-invoice-cart-items.js",
+    "components/checkout/zonos-invoice/zonos-invoice-finish/zonos-invoice-finish.js",
+    "components/checkout/zonos-invoice/zonos-invoice-footer/zonos-invoice-footer.js",
+    "components/checkout/zonos-invoice/zonos-invoice-order-details/zonos-invoice-order-details.js",
+    "components/checkout/zonos-invoice/zonos-invoice-payment/zonos-invoice-payment.js",
+    "components/checkout/zonos-invoice/zonos-invoice-review/zonos-invoice-review.js",
+    "components/checkout/zonos-invoice/zonos-invoice-subtotal/zonos-invoice-subtotal.js",
     "components/common/zonos-badge/zonos-badge.js",
     "components/common/zonos-button/zonos-button.js",
     "components/common/zonos-card/zonos-card.js",

package/dist/collection/components/checkout/zonos-invoice/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-cart-items/zonos-invoice-cart-items.css

@@ -0,0 +1,72 @@
+: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 .zonos--cart-table {
+  width: 100%;
+  border: none;
+  border-collapse: collapse;
+  overflow: auto;
+  font-size: var(--zonos-elements-font-size-base);
+}
+:host .zonos--cart-table .zonos--column {
+  padding: 8px;
+  padding-left: 0;
+  font-size: var(--zonos-elements-font-size-base);
+}
+:host .zonos--cart-table .zonos--column:last-child {
+  text-align: right;
+  padding-right: 0;
+}
+:host .zonos--cart-table .zonos--column:first-child {
+  padding-left: 0;
+  width: 50px;
+}
+:host .zonos--cart-table .zonos--cart-item-link {
+  text-align: left;
+}
+:host .zonos--cart-table .zonos--cart-item-created-at {
+  text-align: right;
+}
+:host .zonos--cart-table td {
+  vertical-align: middle;
+}
+:host .zonos--cart-item-price zonos-text {
+  white-space: nowrap;
+}
+
+:host(.mobile) table {
+  margin-top: 16px;
+}
+:host(.mobile) table td {
+  vertical-align: top;
+}

package/dist/collection/components/checkout/zonos-invoice/zonos-invoice-cart-items/zonos-invoice-cart-items.js

@@ -0,0 +1,87 @@
+import { h, Host } from "@stencil/core";
+import { cartStore } from "../../../store/checkout/cart";
+import { translate } from "../../../store/translationStore";
+import { renderCheckoutCurrency } from "../../../utils/checkout/renderCheckoutCurrency";
+import { classes } from "../../../utils/classes";
+export class ZonosInvoiceCartItems {
+    constructor() {
+        /**
+         * Whether the component is mobile
+         */
+        this.isMobile = false;
+        this.errorImages = [];
+        this.locale = null;
+    }
+    componentWillLoad() {
+        const locale = navigator.language;
+        this.locale = locale;
+    }
+    render() {
+        const nonRestrictedItems = cartStore.items.filter(item => !item.isRestricted);
+        return (h(Host, { key: '33a10486833e881dd8405984cfc59611b064bef5', class: classes([
+                'zonos--invoice-cart-items zonos--elements',
+                this.isMobile && 'mobile',
+            ]) }, h("table", { key: 'c6c3a6017050cc385bc5944e83ca8db1f2564884', class: "zonos--cart-table" }, h("tbody", { key: '6a232dbdf2e6e6c58b65d6360c9190d720c7dc1f' }, nonRestrictedItems.map(item => {
+            var _a, _b, _c, _d;
+            const invoiceId = (_b = (_a = item.attributes) === null || _a === void 0 ? void 0 : _a.find(metadata => metadata.key === 'invoiceId' || metadata.key === 'INVOICE_ID')) === null || _b === void 0 ? void 0 : _b.value;
+            const invoiceCreatedAt = (_d = (_c = item.attributes) === null || _c === void 0 ? void 0 : _c.find(metadata => metadata.key === 'invoiceCreatedAt')) === null || _d === void 0 ? void 0 : _d.value;
+            const invoiceCreatedAtDate = invoiceCreatedAt && this.locale
+                ? new Date(invoiceCreatedAt).toLocaleDateString(this.locale, {
+                    day: 'numeric',
+                    month: 'long',
+                    year: 'numeric',
+                })
+                : null;
+            const invoiceLink = invoiceId
+                ? `https://dashboard.zonos.com/billing/invoices/${invoiceId}`
+                : null;
+            return (h("tr", { class: "zonos--invoice-cart-item" }, h("td", { class: "zonos--column zonos--cart-item-title" }, h("zonos-text", { type: "semiBoldLabel" }, translate('Invoice:'))), h("td", { class: "zonos--column zonos--cart-item-link" }, invoiceLink && invoiceId && (h("zonos-link", { href: invoiceLink }, invoiceId)), this.isMobile && (h("zonos-text", { type: "caption" }, invoiceCreatedAtDate))), h("td", { class: "zonos--column zonos--cart-item-created-at" }, !this.isMobile && (h("zonos-text", { type: "label" }, invoiceCreatedAtDate))), h("td", { class: "zonos--column zonos--cart-item-price" }, h("zonos-text", { type: "label" }, renderCheckoutCurrency({
+                amount: item.amount,
+                isForeign: false,
+            })))));
+        })))));
+    }
+    static get is() { return "zonos-invoice-cart-items"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-invoice-cart-items.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-invoice-cart-items.css"]
+        };
+    }
+    static get assetsDirs() { return ["assets"]; }
+    static get properties() {
+        return {
+            "isMobile": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the component is mobile"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "is-mobile",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "errorImages": {},
+            "locale": {}
+        };
+    }
+}

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

@@ -0,0 +1 @@
+<svg color="var(--zonos-elements-red-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://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(--zonos-elements-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-invoice/zonos-invoice-finish/assets/SuccessIcon.svg

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

@@ -0,0 +1,90 @@
+: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 {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+:host .zonos--group {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 24px;
+  border-radius: var(--zonos--border-radius, 10px);
+  gap: 24px;
+  margin-top: 24px;
+  background-color: var(--zonos-elements-gray-50);
+  padding: 48px;
+}
+:host .zonos--finish-details {
+  max-width: 640px;
+  min-width: 300px;
+  line-height: 24px;
+  width: 0 auto;
+  margin: auto;
+}
+:host zonos-button {
+  width: 100%;
+}
+:host .loading-wrapper {
+  min-height: 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+:host .zonos--finish-button-wrapper {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+  margin: 0 auto;
+  margin-top: 48px;
+  max-width: 300px;
+}
+:host .zonos--button-container {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+  margin: 0 auto;
+}
+:host .zonos--subtitle {
+  text-align: center;
+}
+:host .zonos--order-number {
+  background-color: var(--zonos-elements-gray-0);
+  border: 1px solid var(--zonos-elements-gray-200);
+  color: var(--zonos-elements-gray-800);
+  border-radius: var(--zonos-elements-radius-6);
+  padding: 4px 8px;
+}