@zonos/elements 1.3.218 → 1.3.219

package/dist/collection/components/checkout/zonos-collect/zonos-collect-subtotal/zonos-collect-subtotal.css

@@ -0,0 +1,78 @@
+: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 {
+  position: sticky;
+  bottom: 60px;
+}
+:host .zonos--collect-table {
+  width: 100%;
+  border: none;
+  border-collapse: collapse;
+  overflow: auto;
+  font-size: var(--zonos-elements-font-size-base);
+}
+:host .zonos--collect-table .zonos--column {
+  padding: 8px 8px;
+  vertical-align: top;
+}
+:host .zonos--collect-table .zonos--column:last-child {
+  text-align: right;
+  padding-right: 0;
+}
+:host .zonos--collect-table .zonos--column:first-child {
+  width: 60px;
+  max-width: 100px;
+}
+:host .zonos--title-with-icon {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+:host .zonos--collect-subtotal-price {
+  text-align: right;
+}
+:host .zonos--collect-subtotal-price zonos-text {
+  white-space: nowrap;
+}
+:host .zonos--collect-total .zonos--column {
+  padding: 16px 0;
+}
+:host .zonos--collect-total-subtotal .zonos--collect-subtotal-title,
+:host .zonos--collect-total-subtotal .zonos--collect-subtotal-price {
+  border-bottom: 1px solid var(--zonos-elements-gray-200);
+}
+:host .zonos--collect-subtotal-price zonos-text,
+:host .zonos--collect-pay-total zonos-text {
+  white-space: nowrap;
+}

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

@@ -0,0 +1,115 @@
+import { h, Host } from "@stencil/core";
+import { cartStore, cartStoreOnChange, } from "../../../store/checkout/cart";
+import { collectStore } from "../../../store/checkout/collect";
+import { translate, translationStoreOnChange, } from "../../../store/translationStore";
+import { renderCheckoutCurrency } from "../../../utils/checkout/renderCheckoutCurrency";
+import { renderFallback } from "../../../utils/renderFallback";
+export class ZonosCollectSubtotal {
+    constructor() {
+        this.storeUnsubscribeList = [];
+        this.subtotals = {};
+        this.initSubtotalData = () => {
+            var _a, _b;
+            const cartLandedCostSubtotal = (_b = (_a = cartStore.checkoutSession) === null || _a === void 0 ? void 0 : _a.landedCost) === null || _b === void 0 ? void 0 : _b.amountSubtotals;
+            if (!cartLandedCostSubtotal) {
+                return;
+            }
+            // Some countries have same name for duties, taxes and fees in their language. If that happens, we need to group their values by name
+            const translatedDutyLabel = translate('Duties');
+            const translatedTaxLabel = translate('Taxes');
+            const translatedFeeLabel = translate('Fees');
+            const subtotalMap = {
+                [translatedDutyLabel]: 0,
+                [translatedFeeLabel]: 0,
+                [translatedTaxLabel]: 0,
+            };
+            const duties = cartLandedCostSubtotal.duties;
+            const taxes = cartLandedCostSubtotal.taxes;
+            const fees = cartLandedCostSubtotal.fees;
+            if (duties !== undefined) {
+                subtotalMap[translatedDutyLabel] || (subtotalMap[translatedDutyLabel] = 0);
+                subtotalMap[translatedDutyLabel] += duties;
+            }
+            if (taxes !== undefined) {
+                subtotalMap[translatedTaxLabel] || (subtotalMap[translatedTaxLabel] = 0);
+                subtotalMap[translatedTaxLabel] += taxes;
+            }
+            if (fees !== undefined) {
+                subtotalMap[translatedFeeLabel] || (subtotalMap[translatedFeeLabel] = 0);
+                subtotalMap[translatedFeeLabel] += fees;
+            }
+            this.subtotals = subtotalMap;
+        };
+    }
+    disconnectedCallback() {
+        this.storeUnsubscribeList.forEach(unsubscribe => unsubscribe());
+    }
+    componentWillLoad() {
+        this.storeUnsubscribeList = [
+            cartStoreOnChange('checkoutSession', this.initSubtotalData),
+            translationStoreOnChange('translatedChunks', this.initSubtotalData),
+        ];
+    }
+    render() {
+        this.initSubtotalData();
+        return (h(Host, { key: '802f3c4e95ac387e1635fda8c60650baa6c2a921', class: "zonos--collect-subtotal zonos--elements" }, h("table", { key: '5fb1bc3eea8cb032df0073797a03f29aad0c6a4a', class: "zonos--collect-table" }, !!this.subtotals[translate('Duties')] && (h("tr", { key: 'f0c9c76e23a98f2638132530bf162f17d1c4d369', class: "zonos--row zonos--collect-duty" }, h("td", { key: '3563ad4d3ebe19d70701dd6d846ce93f81fb620b', class: "zonos--column zonos--collect-subtotal-title" }, h("zonos-text", { key: 'a181f357c9ed0a51fd2edf6a321718e859a001b6', type: "semiBoldLabel" }, translate('Duties'))), h("td", { key: '1e35333b4f2768f52084f1ed8044b20b8ef6dcdd', class: "zonos--column" }), h("td", { key: 'd810adf7cb68dbe4abd7a50a3f136b1c8de6927c', class: "zonos--column zonos--collect-subtotal-price" }, renderFallback({
+            content: (h("zonos-text", { type: "label" }, renderCheckoutCurrency({
+                amount: this.subtotals[translate('Duties')] || 0,
+                isForeign: true,
+            }))),
+            isLoading: collectStore.isFetchingShippingInfo,
+            skeletonHeight: '14px',
+            skeletonWidth: '150px',
+        })))), !!this.subtotals[translate('Taxes')] && (h("tr", { key: 'b6bf34665036c13663685f5d88f030663478d013', class: "zonos--row zonos--collect-tax" }, h("td", { key: '6595bd3da49f934a560b215774a977db6ee054f4', class: "zonos--column zonos--collect-subtotal-title" }, h("zonos-text", { key: 'b707928fc729029e601b03b1a07d00782bc805be', type: "semiBoldLabel" }, translate('Taxes'))), h("td", { key: '198d8a22daaac2b96a86ff831b40cefb8d6be057', class: "zonos--column" }), h("td", { key: '6f673d2bd36b3cc17d83732c37c21080358961b5', class: "zonos--column zonos--collect-subtotal-price" }, renderFallback({
+            content: (h("zonos-text", { type: "label" }, renderCheckoutCurrency({
+                amount: this.subtotals[translate('Taxes')] || 0,
+                isForeign: true,
+            }))),
+            isLoading: collectStore.isFetchingShippingInfo,
+            skeletonHeight: '14px',
+            skeletonWidth: '150px',
+        })))), !!this.subtotals[translate('Fees')] && (h("tr", { key: 'b3392d88def450ba48cf35a7209a3f987ba2513a', class: "zonos--row zonos--collect-fee" }, h("td", { key: 'b37890202522d65bb307bf7490cafb9686ed0d83', class: "zonos--column zonos--collect-subtotal-title" }, h("zonos-text", { key: '1248245b912e6a0f7b5236c2fae13f4d33b84805', type: "semiBoldLabel" }, translate('Fees'))), h("td", { key: '47e9ad0b21ad389f1eb029ef7f8f805388f529b0', class: "zonos--column" }), h("td", { key: '6fd116a562463aa95a21f6f1635d9b33d8b9c577', class: "zonos--column zonos--collect-subtotal-price" }, renderFallback({
+            content: (h("zonos-text", { type: "label" }, renderCheckoutCurrency({
+                amount: this.subtotals[translate('Fees')] || 0,
+                isForeign: true,
+            }))),
+            isLoading: collectStore.isFetchingShippingInfo,
+            skeletonHeight: '14px',
+            skeletonWidth: '150px',
+        })))), h("tr", { key: '76c57539723bd54d09a45a8d0051240ecb39db03', class: "zonos--row zonos--collect-spacing" }, h("td", { key: 'b26e8493902267d9ab81907b976af59d961a792a', class: "zonos--column", colSpan: 3 })), h("tr", { key: '20110aaeccafea4372d91e79062ec5344353e4bc', class: "zonos--row zonos--collect-total zonos--collect-total-subtotal" }, h("td", { key: 'a6463d8923e162864002121e63decb286b3a0fc8', class: "zonos--column" }), h("td", { key: '49b504de5994357d849e38c0156c5192cdad07db', class: "zonos--column zonos--collect-subtotal-title" }, h("zonos-text", { key: 'c76f8e4fba2ea9025b009ae400b5b89d30b14997', type: "label" }, translate('Subtotal'))), h("td", { key: '6568a8e64b3e1b426bb8fdf4aff9354bb1ac4b18', class: "zonos--column zonos--collect-subtotal-price" }, renderFallback({
+            content: (h("zonos-text", { type: "label" }, renderCheckoutCurrency({
+                amount: collectStore.amountDutyTaxFeeTotal || 0,
+                isForeign: true,
+            }))),
+            isLoading: collectStore.isFetchingShippingInfo,
+            skeletonHeight: '14px',
+            skeletonWidth: '150px',
+        }))), h("tr", { key: 'ff9ffa08886829765a5c5c5120fdf450dab78d70', class: "zonos--row zonos--collect-total" }, h("td", { key: '1d3169797facacf6824badd69996a8d4671fa21f', class: "zonos--column" }), h("td", { key: '559350e976dae25212dab5dc3bd4a3c27ddb50e3', class: "zonos--column zonos--collect-subtotal-title" }, h("zonos-text", { key: '926be9acc7b9bc06755319a2af594a76ddc0ab2e', type: "semiBoldLabel" }, translate('Customs fees total'))), h("td", { key: '22d88d0f09b37aaf521b6e535b31fdcb00b18faa', class: "zonos--column zonos--collect-subtotal-price" }, renderFallback({
+            content: (h("zonos-text", { type: "semiBoldLabel" }, renderCheckoutCurrency({
+                amount: collectStore.amountDutyTaxFeeTotal || 0,
+                isForeign: true,
+            }))),
+            isLoading: collectStore.isFetchingShippingInfo,
+            skeletonHeight: '14px',
+            skeletonWidth: '150px',
+        }))))));
+    }
+    static get is() { return "zonos-collect-subtotal"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-collect-subtotal.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-collect-subtotal.css"]
+        };
+    }
+    static get assetsDirs() { return ["assets"]; }
+    static get states() {
+        return {
+            "subtotals": {}
+        };
+    }
+}

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

@@ -0,0 +1,349 @@
+: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 {
+  z-index: 2147483647;
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  background-color: var(--zonos-elements-gray-0);
+}
+: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--content {
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+  width: 100%;
+  justify-content: center;
+}
+:host .zonos--content .zonos--left,
+:host .zonos--content .zonos--right {
+  flex: 1;
+  padding: 56px 80px 60px;
+  max-width: 800px;
+}
+:host .zonos--content .zonos--left {
+  background-color: var(--zonos--primary-color, var(--zonos-elements-gray-0));
+  border-right: 1px solid var(--zonos-elements-gray-200);
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+:host .zonos--content .zonos--right {
+  background-color: var(--zonos-elements-gray-0);
+}
+:host .zonos--content .zonos--done {
+  width: 100%;
+  max-width: 1400px;
+  max-height: 100%;
+  height: calc(100% - 100px);
+  overflow: hidden;
+  flex-direction: column;
+  background-color: var(--zonos-elements-gray-0);
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  padding-bottom: 50px;
+}
+:host .zonos--content .zonos--done .zonos--header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+:host .zonos--content .zonos--done .zonos--logo {
+  margin-bottom: 0;
+}
+:host .zonos--content .zonos--done zonos-checkout-finish {
+  flex: 1;
+}
+:host .zonos--header-title,
+:host .zonos--header-wrapper {
+  max-width: 800px;
+}
+:host .zonos--left {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+:host .zonos--left .zonos--wrapper {
+  padding: 0 8px 8px;
+}
+:host .zonos--left .zonos--payment-error-banner {
+  margin-top: 24px;
+}
+:host .zonos--right {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+:host .zonos--right .zonos--order-details-container {
+  overflow: hidden;
+}
+:host .zonos--wrapper {
+  overflow: auto;
+  max-height: 100%;
+  position: relative;
+}
+:host .flex--wrapper {
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  margin-top: 32px;
+}
+:host .zonos--logo-wrapper {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  flex: 1;
+}
+:host .zonos--logo-wrapper > * {
+  height: fit-content;
+}
+:host .zonos--header-right {
+  display: none;
+}
+:host .zonos--logo {
+  display: flex;
+  align-items: center;
+}
+:host .zonos--logo img {
+  max-height: 72px;
+}
+:host .zonos--collect-container {
+  overflow: visible;
+}
+
+:host(.mobile),
+:host(.tablet) {
+  min-width: auto;
+}
+:host(.mobile) .zonos--content,
+:host(.tablet) .zonos--content {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  border-radius: 0;
+  max-height: 100%;
+  height: 100%;
+  border: 0;
+}
+:host(.mobile) .zonos--content .zonos--left,
+:host(.mobile) .zonos--content .zonos--right,
+:host(.tablet) .zonos--content .zonos--left,
+:host(.tablet) .zonos--content .zonos--right {
+  padding: 12px;
+  padding-bottom: 76px;
+}
+@media (max-width: 768px) {
+  :host(.mobile) .zonos--content .zonos--left,
+  :host(.mobile) .zonos--content .zonos--right,
+  :host(.tablet) .zonos--content .zonos--left,
+  :host(.tablet) .zonos--content .zonos--right {
+    padding-bottom: 0;
+  }
+}
+:host(.mobile) .zonos--content .zonos--left,
+:host(.tablet) .zonos--content .zonos--left {
+  order: 2;
+  border-right: none;
+}
+:host(.mobile) .zonos--content .zonos--right,
+:host(.tablet) .zonos--content .zonos--right {
+  order: 1;
+  padding-top: 16px;
+}
+:host(.mobile) .zonos--content .zonos--right .zonos--wrapper,
+:host(.tablet) .zonos--content .zonos--right .zonos--wrapper {
+  display: flex;
+  flex-direction: column;
+  border: var(--zonos-elements-border);
+  border-radius: var(--zonos--border-radius, var(--zonos-elements-radius-10));
+  background-color: var(--zonos-elements-gray-50);
+  padding: 12px;
+  margin-top: 32px;
+}
+:host(.mobile) .zonos--content .zonos--right .zonos--review,
+:host(.tablet) .zonos--content .zonos--right .zonos--review {
+  margin-bottom: 0;
+}
+:host(.mobile) .zonos--content .zonos--right .zonos--cart-items,
+:host(.tablet) .zonos--content .zonos--right .zonos--cart-items {
+  margin-top: 8px;
+}
+:host(.mobile) .zonos--content zonos-checkout-footer,
+:host(.tablet) .zonos--content zonos-checkout-footer {
+  order: 3;
+}
+:host(.mobile) .zonos--content .zonos--wrapper,
+:host(.tablet) .zonos--content .zonos--wrapper {
+  max-height: 100%;
+}
+:host(.mobile) .zonos--content .zonos--footer,
+:host(.tablet) .zonos--content .zonos--footer {
+  order: 3;
+}
+:host(.mobile) .zonos--content .zonos--done,
+:host(.tablet) .zonos--content .zonos--done {
+  width: auto;
+}
+:host(.mobile) .zonos--cart-subtotal,
+:host(.tablet) .zonos--cart-subtotal {
+  margin: 0;
+}
+:host(.mobile) .zonos--header-wrapper,
+:host(.tablet) .zonos--header-wrapper {
+  position: sticky;
+  top: 0;
+  width: 100%;
+  padding: 16px;
+  background-color: var(--zonos-elements-gray-0);
+  z-index: 3;
+}
+:host(.mobile) .zonos--header-title,
+:host(.mobile) .zonos--header-wrapper,
+:host(.tablet) .zonos--header-title,
+:host(.tablet) .zonos--header-wrapper {
+  max-width: 800px;
+  padding: 0 16px;
+}
+:host(.mobile) .zonos--content,
+:host(.tablet) .zonos--content {
+  overflow: auto;
+  justify-content: unset;
+  align-items: center;
+  gap: 24px;
+}
+:host(.mobile) .zonos--content .zonos--left,
+:host(.mobile) .zonos--content .zonos--right,
+:host(.tablet) .zonos--content .zonos--left,
+:host(.tablet) .zonos--content .zonos--right {
+  overflow: visible;
+  width: 100%;
+}
+:host(.mobile) .zonos--content .zonos--right,
+:host(.tablet) .zonos--content .zonos--right {
+  gap: 32px;
+}
+:host(.mobile) .flex--wrapper,
+:host(.tablet) .flex--wrapper {
+  margin-top: 0;
+}
+:host(.mobile) zonos-collect-footer,
+:host(.tablet) zonos-collect-footer {
+  order: 3;
+  left: 0;
+}
+
+:host(.tablet) .zonos--header-wrapper {
+  padding-top: 56px;
+  top: -56px;
+}
+
+:host(.mobile) .zonos--content .zonos--header-right {
+  display: flex;
+  align-items: center;
+}
+:host(.mobile) .zonos--header-wrapper {
+  padding-top: 28px;
+  top: -28px;
+}
+:host(.mobile) .zonos--collect-language-dialog {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  transform-origin: bottom center;
+  width: 100vw;
+  background: var(--zonos-elements-surface-color);
+  box-shadow: var(--zonos-elements-v3-shadow-xl);
+  border-radius: var(--zonos-elements-radius-12);
+  max-width: 100vw;
+  max-height: 500px;
+  z-index: 2147483011;
+  overflow: auto;
+  transform: scale(0);
+  opacity: 0;
+  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
+  overscroll-behavior: contain;
+}
+:host(.mobile) .zonos--collect-language-dialog::-webkit-scrollbar {
+  width: 10px;
+}
+:host(.mobile) .zonos--collect-language-dialog::-webkit-scrollbar-track {
+  background: var(--zonos-elements-gray-50);
+}
+:host(.mobile) .zonos--collect-language-dialog::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background: #cccccc;
+  border: 3px solid transparent;
+  background-clip: content-box;
+}
+:host(.mobile) .zonos--collect-language-dialog::-webkit-scrollbar-thumb:hover {
+  background: #d6d6d6;
+}
+:host(.mobile) .zonos--collect-language-dialog::-webkit-scrollbar-track {
+  border-top-right-radius: var(--zonos-elements-radius-12);
+  border-bottom-right-radius: var(--zonos-elements-radius-12);
+}
+:host(.mobile) .zonos--collect-language-dialog.zonos--collect-language-dialog-open {
+  opacity: 1;
+  transform: scale(1);
+}
+
+:host(.iframed) .zonos--content {
+  overscroll-behavior: auto;
+}