@zonos/elements 1.3.218 → 1.3.220

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;
+            const cartLandedCostSubtotal = (_a = cartStore.checkoutSession) === null || _a === void 0 ? void 0 : _a.subtotals;
+            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: 'ab687a6e1ec67f6609081036a75e9905ff34c6b1', class: "zonos--collect-subtotal zonos--elements" }, h("table", { key: '303b8c49983e9f7aea4d31400fed53d858eb078d', class: "zonos--collect-table" }, !!this.subtotals[translate('Duties')] && (h("tr", { key: 'a60fa4f1f1afacef0144b86c054f44572576f7af', class: "zonos--row zonos--collect-duty" }, h("td", { key: 'aeaf798e26bbd482196d7208eb05657a1d15dad8', class: "zonos--column zonos--collect-subtotal-title" }, h("zonos-text", { key: '835d817709ae3b7e2d888d618e0856fb2e637e4d', type: "semiBoldLabel" }, translate('Duties'))), h("td", { key: '5bb47a115ea61fa897a3f48bbd10c5f78af3703e', class: "zonos--column" }), h("td", { key: '32632c4beb855ca687c615f5e6c63c82e2e05c80', 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: '055bb237dafaea8de18b127641c8fd7e1ece563b', class: "zonos--row zonos--collect-tax" }, h("td", { key: '1e73b140c2c9090ccfb91ce4efca483e8fb56e9e', class: "zonos--column zonos--collect-subtotal-title" }, h("zonos-text", { key: 'a3375ecd77460c78c7c5f59bf7b9b8612cd53e41', type: "semiBoldLabel" }, translate('Taxes'))), h("td", { key: '20685646be29873967c2f335c775046068248ad3', class: "zonos--column" }), h("td", { key: '2e2c6af2c1a7840df03351178ddf3107fcc36494', 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: '8157aba5c6a23680b0bc681adc127747f01a2973', class: "zonos--row zonos--collect-fee" }, h("td", { key: '8266654f9e65003f297222bb935013a8b9b3b430', class: "zonos--column zonos--collect-subtotal-title" }, h("zonos-text", { key: '8399000a5f61e4737764b68b89799b409dce6034', type: "semiBoldLabel" }, translate('Fees'))), h("td", { key: '2a9763f2401967ea1bdfa2c17514d18e2a4e0db6', class: "zonos--column" }), h("td", { key: 'ac2f275312c2ba69888e6e57dde8b4b451839b86', 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: 'a293d1b9342251f7326c1ac68e2bab83eae2ed80', class: "zonos--row zonos--collect-spacing" }, h("td", { key: 'c136b1b807f32dc21c131326d70500d2e2c64efe', class: "zonos--column", colSpan: 3 })), h("tr", { key: '59747101f1a9ef7c8fad60e90ea5b8c31015438c', class: "zonos--row zonos--collect-total zonos--collect-total-subtotal" }, h("td", { key: '96d201ba6f3e571adac265127229c94cdc96be2a', class: "zonos--column" }), h("td", { key: 'f2f4cb751e35fc0ebaa803659f26a2314d8bf639', class: "zonos--column zonos--collect-subtotal-title" }, h("zonos-text", { key: 'b4f89ea1e523af8a5aead4ef007a6f0dc7e7f441', type: "label" }, translate('Subtotal'))), h("td", { key: '28b6aea6363b2bef1d072ad77f409ae77976305c', 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: 'f0072cdd200e8483421265af39a90fb655fb2ef0', class: "zonos--row zonos--collect-total" }, h("td", { key: '88a007048d33c919a6c5f87cf7cd071f83e7448b', class: "zonos--column" }), h("td", { key: '24bba9e9b81ff443dd5ca4832c3169e3605a93b8', class: "zonos--column zonos--collect-subtotal-title" }, h("zonos-text", { key: '594d4e96bec3a2153f6622c6842970ebee5bb463', type: "semiBoldLabel" }, translate('Customs fees total'))), h("td", { key: 'b3ffd6dcae747dd2ed68ae16fb60d9655f7669dc', 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;
+}