@zonos/elements 1.3.100 → 1.3.101

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

@@ -109,11 +109,13 @@
 :host .zonos--right {
   position: relative;
 }
-:host .zonos--right .zonos--close-button {
+:host .zonos--right .zonos--right-actions {
   position: absolute;
   right: 24px;
   top: 24px;
   z-index: 2;
+  display: flex;
+  align-items: center;
 }
 :host .zonos--wrapper {
   overflow: auto;

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

@@ -606,7 +606,7 @@ export class ZonosCheckout {
                     '--primary-color': !this.isMobile ? colorPrimary : '',
                 } }, !this.isMobile && renderTopHeader(), cartStore.step === 'customer-info' && (h("zonos-customer-info", { continueLoading: this.submitLoading, defaultAddress: this.defaultAddress, isMobile: this.isMobile, onContinueClicked: () => this.handleCustomerInfoContinue(), submitBtnColor: submitButtonColor })), cartStore.step === 'shipping' && (h("zonos-shipping", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleShippingContinue(), submitBtnColor: submitButtonColor })), cartStore.step === 'payment' && (h("zonos-checkout-payment", { continueLoading: this.submitLoading, onContinueClicked: async () => {
                     await this.handleStripePaymentContinue();
-                }, submitBtnColor: submitButtonColor }))), h("div", { class: "zonos--right", "data-theme": rightSideTheme }, this.isMobile && renderTopHeader(), !this.isLegacyCheckout && (h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.closeDialogHandler() })), h("div", { class: "flex--wrapper" }, h("div", { class: "zonos--wrapper" }, h("zonos-review", { collapsed: this.collapseReviewMobile, mobile: this.isMobile, onClick: () => {
+                }, submitBtnColor: submitButtonColor }))), h("div", { class: "zonos--right", "data-theme": rightSideTheme }, this.isMobile && renderTopHeader(), h("div", { class: "zonos--right-actions" }, window.Zonos.showBaseForeign && (h("zonos-currency-toggle", null)), !this.isLegacyCheckout && (h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.closeDialogHandler() }))), h("div", { class: "flex--wrapper" }, h("div", { class: "zonos--wrapper" }, h("zonos-review", { collapsed: this.collapseReviewMobile, mobile: this.isMobile, onClick: () => {
                     // do nothing if it's not mobile
                     if (!this.isMobile) {
                         return;

package/dist/collection/components/checkout/zonos-checkout/zonos-currency-toggle/zonos-currency-toggle.js

@@ -0,0 +1,41 @@
+import { h, Host } from "@stencil/core";
+import { cartStore } from "../../../store/checkout/cart";
+export class ZonosCurrencyToggle {
+    constructor() {
+        this.errorImages = [];
+    }
+    async handleToggleChanged(changedValue) {
+        var _a;
+        const targetCurrency = (_a = cartStore.exchangeRate) === null || _a === void 0 ? void 0 : _a.targetCurrencyCode;
+        cartStore.displayBaseCurrency = targetCurrency !== changedValue;
+    }
+    render() {
+        const { exchangeRate } = cartStore;
+        const options = exchangeRate &&
+            exchangeRate.sourceCurrencyCode !== exchangeRate.targetCurrencyCode
+            ? ([
+                {
+                    label: exchangeRate.sourceCurrencyCode,
+                    value: exchangeRate.sourceCurrencyCode,
+                },
+                {
+                    label: exchangeRate.targetCurrencyCode,
+                    value: exchangeRate.targetCurrencyCode,
+                },
+            ])
+            : [];
+        // If there is only one currency, don't show the toggle
+        if (!options.length) {
+            return null;
+        }
+        return (h(Host, { class: "zonos--currency-toggle zonos--elements" }, h("zonos-toggle", { onToggleChanged: e => this.handleToggleChanged(e.detail), options: options, value: cartStore.displayBaseCurrency ? options[0].value : options[1].value })));
+    }
+    static get is() { return "zonos-currency-toggle"; }
+    static get encapsulation() { return "shadow"; }
+    static get assetsDirs() { return ["assets"]; }
+    static get states() {
+        return {
+            "errorImages": {}
+        };
+    }
+}

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

@@ -3,8 +3,8 @@ import { cartStore, cartStoreHasOneEligibleItem, } from "../../../store/checkout
 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";
-import { currencyFormat } from "../../../utils/hello/currencyConversion/currencyFormat";
 /** 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";
@@ -44,9 +44,9 @@ export class ZonosReview {
                 this.isMobile && 'mobile',
             ]) }, h("div", { class: "zonos--title" }, h("zonos-text", { textColor: titleTextColor, type: titleTextType }, translate('Pay [organizationName]', {
             organizationName: zonosStore.organizationName,
-        })), renderCollapseIcon()), h("div", { class: "zonos--total-pay" }, h("zonos-text", { type: totalTextType }, currencyFormat({
+        })), renderCollapseIcon()), h("div", { class: "zonos--total-pay" }, h("zonos-text", { type: totalTextType }, renderCheckoutCurrency({
             amount: total,
-            currency: cartStore.currency,
+            isForeign: true,
         })))));
     }
     static get is() { return "zonos-review"; }

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

@@ -2,9 +2,9 @@ import { h, Host, } from "@stencil/core";
 import { cartStore, cartStoreGetShippingTransitInfo, cartStoreUpdateSelectedShippingOption, } from "../../../store/checkout/cart";
 import { translate } from "../../../store/translationStore";
 import { trackConversionEvent } from "../../../utils/api/trackConversionEvent";
+import { renderCheckoutCurrency } from "../../../utils/checkout/renderCheckoutCurrency";
 import { sortServiceLevelOptionsByAmount } from "../../../utils/checkout/sortServiceLevelOptionsByAmount";
 import { classes } from "../../../utils/classes";
-import { currencyFormat } from "../../../utils/hello/currencyConversion/currencyFormat";
 import { submitGtag } from "../../../utils/submitGtag";
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
 import ChevronUpIcon from "./assets/ChevronUpIcon.svg";
@@ -84,9 +84,9 @@ export class ZonosShipping {
                         label: `${item.displayName}${this.getLandedCostMethodLabelSuffix(landedCost.landedCost.method)}`,
                         landedCostId: landedCost.landedCostId,
                         method: landedCost.landedCost.method,
-                        price: currencyFormat({
+                        price: renderCheckoutCurrency({
                             amount: shippingAmount,
-                            currency: cartStore.currency,
+                            isForeign: true,
                         }),
                         shipmentRatingId: item.id,
                         sublabel,
@@ -116,6 +116,13 @@ export class ZonosShipping {
                 this.collapsedDAPOptions = false;
             }
         };
+        this.isCurrencyToggled = () => {
+            if (this.displayBaseCurrency !== cartStore.displayBaseCurrency) {
+                this.displayBaseCurrency = cartStore.displayBaseCurrency;
+                return true;
+            }
+            return false;
+        };
         this.preselectFirstShippingMethod = () => {
             this.initServiceLevels();
             const selectedServiceLevel = this.serviceLevelsAll.find(item => { var _a; return item.shipmentRatingId === ((_a = cartStore.selectedShippingOption) === null || _a === void 0 ? void 0 : _a.id); }) || null;
@@ -143,6 +150,7 @@ export class ZonosShipping {
         this.serviceLevelsDAP = [];
         this.serviceLevelsOther = [];
         this.serviceLevelsAll = [];
+        this.displayBaseCurrency = false;
     }
     componentWillLoad() {
         this.preselectFirstShippingMethod();
@@ -152,6 +160,10 @@ export class ZonosShipping {
             // re-init service levels if the shipping data is outdated (promo code applied)
             this.preselectFirstShippingMethod();
         }
+        // re-init service levels if the currency is toggled
+        else if (this.isCurrencyToggled()) {
+            this.initServiceLevels();
+        }
         const defaultShownServiceLevels = [
             ...this.serviceLevelsDDP,
             ...this.serviceLevelsOther,
@@ -160,13 +172,13 @@ export class ZonosShipping {
         if (this.showErrorBanner) {
             this.showErrorBanner = !this.handleValidate();
         }
-        return (h(Host, { key: '0c895b18d357ef8eabe669c08abb04a7875c4a3b', class: "zonos--shipping zonos--elements" }, h("div", { key: 'aafe4e7717db89817ba05faecbde40264c664877', class: "zonos--group" }, h("zonos-text", { key: '4a9aa32cef9e0579e51c621de75554ba4f1f045c', class: "zonos--title", type: "semiBoldSubheader" }, translate('Delivery options')), this.showErrorBanner && !!this.serviceLevelsAll.length && (h("zonos-banner", { key: '2e0c46959285fbc6119a432f93839048e297b1cb', class: "zonos--error-banner", intent: "error" }, translate('No shipping method selected'))), h("zonos-text", { key: 'ca9d17180a9503f4cd1eaad0c8d2a525b62a0cfd', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !this.serviceLevelsAll.length ? (h("zonos-banner", { bannerTitle: translate('No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.'), class: "zonos--shipping-method-error", intent: "error" })) : (h("div", { class: "zonos--shipping-options-wrapper" }, h("zonos-shipping-rich-radio", { items: defaultShownServiceLevels, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod }), !!defaultShownServiceLevels.length &&
+        return (h(Host, { key: '186cd73af5a86fdeafd0213f8923907d43167a66', class: "zonos--shipping zonos--elements" }, h("div", { key: '88681a6f08bdde1788a546cb1311ace4f065d408', class: "zonos--group" }, h("zonos-text", { key: '75deb5b42546d7b8d615d5613f687f9b0778377d', class: "zonos--title", type: "semiBoldSubheader" }, translate('Delivery options')), this.showErrorBanner && !!this.serviceLevelsAll.length && (h("zonos-banner", { key: '07669e8782f210132e8d170729a430035c7d6d7c', class: "zonos--error-banner", intent: "error" }, translate('No shipping method selected'))), h("zonos-text", { key: '869c3df8762f6c704bfac40c0b9a7a16e845045e', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !this.serviceLevelsAll.length ? (h("zonos-banner", { bannerTitle: translate('No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.'), class: "zonos--shipping-method-error", intent: "error" })) : (h("div", { class: "zonos--shipping-options-wrapper" }, h("zonos-shipping-rich-radio", { items: defaultShownServiceLevels, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod }), !!defaultShownServiceLevels.length &&
             !!this.serviceLevelsDAP.length && (h("button", { class: classes([
                 'zonos--shipping-options-collapse-trigger',
                 this.collapsedDAPOptions && 'collapsed',
             ]), onClick: () => {
                 this.collapsedDAPOptions = !this.collapsedDAPOptions;
-            } }, h("div", { class: "zonos--title-wrapper" }, h("zonos-text", { type: "label" }, `${translate(this.collapsedDAPOptions ? 'Show non-prepaid options' : 'Hide non-prepaid options')} `), h("zonos-icon", { content: ChevronUpIcon })))), h("zonos-collapse", { collapsed: this.collapsedDAPOptions }, h("div", { class: "zonos--dap-wrapper" }, h("zonos-banner", { bannerTitle: translate('Duties and taxes will be charged upon delivery.'), intent: "warning" }, translate('You may incur additional fees from the shipping carrier by not prepaying.')), h("zonos-shipping-rich-radio", { items: this.serviceLevelsDAP, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod }))))), h("div", { key: '389883f40d9b184b7476de15c5f8350ff982e084', class: "zonos--group-btn" }, h("zonos-button", { key: '4d100db1ba55e74051e427c716881e0e73b69bbd', backgroundColor: this.submitBtnColor, loading: this.continueLoading || this.isSelecting, onClick: () => this.continueClickHandler(), size: "lg",
+            } }, h("div", { class: "zonos--title-wrapper" }, h("zonos-text", { type: "label" }, `${translate(this.collapsedDAPOptions ? 'Show non-prepaid options' : 'Hide non-prepaid options')} `), h("zonos-icon", { content: ChevronUpIcon })))), h("zonos-collapse", { collapsed: this.collapsedDAPOptions }, h("div", { class: "zonos--dap-wrapper" }, h("zonos-banner", { bannerTitle: translate('Duties and taxes will be charged upon delivery.'), intent: "warning" }, translate('You may incur additional fees from the shipping carrier by not prepaying.')), h("zonos-shipping-rich-radio", { items: this.serviceLevelsDAP, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod }))))), h("div", { key: '571b9856c2dc767b082adb154c3f75f49366199d', class: "zonos--group-btn" }, h("zonos-button", { key: '4153a317ffa612867cf55763f586a58abda0473b', backgroundColor: this.submitBtnColor, loading: this.continueLoading || this.isSelecting, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode
             variant: this.submitBtnType }, translate('Go to payment'))))));
     }
@@ -252,7 +264,8 @@ export class ZonosShipping {
             "serviceLevelsDDP": {},
             "serviceLevelsDAP": {},
             "serviceLevelsOther": {},
-            "serviceLevelsAll": {}
+            "serviceLevelsAll": {},
+            "displayBaseCurrency": {}
         };
     }
     static get events() {

package/dist/collection/components/common/zonos-button/zonos-button.css

@@ -69,7 +69,7 @@
   cursor: pointer;
   white-space: nowrap;
   padding: 8px 24px;
-  color: var(--color, var(--zonos-elements-gray-1200));
+  color: var(--color, var(--zonos-elements-gray-1000));
   margin: 1px;
   /** Button size */
 }
@@ -139,7 +139,7 @@
 }
 :host button.override-background {
   background-color: var(--background-color, var(--zonos-elements-gray-0));
-  color: var(--color, var(--zonos-elements-gray-1200));
+  color: var(--color, var(--zonos-elements-gray-1000));
   outline: 1px solid var(--background-color, var(--zonos-elements-gray-0));
 }
 :host button.override-background:disabled {

package/dist/collection/components/common/zonos-toggle/zonos-toggle.css

@@ -0,0 +1,79 @@
+:host {
+  font-family: var(--font-family, Inter), Inter;
+  display: block;
+  white-space: normal;
+}
+:host * {
+  font-family: var(--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: inline-flex;
+}
+:host .wrapper {
+  position: relative;
+  border-radius: 6px;
+  background-color: var(--zonos-elements-gray-50);
+  display: flex;
+}
+:host .zonos--toggle-selected-slider {
+  z-index: 1;
+  position: absolute;
+  background-color: var(--zonos-elements-raised-surface-color);
+  height: 100%;
+  /* Light/Shadows/Button */
+  box-shadow: var(--zonos-elements-shadow-button-standard);
+  border-radius: 6px;
+  animation: translate 0.3s ease-in-out;
+}
+:host .zonos--option {
+  background: transparent;
+  border: 0;
+  z-index: 2;
+  cursor: pointer;
+  padding: 4px 12px;
+  border-radius: 6px;
+  transition: var(--zonos-elements-transition);
+  font-size: var(--zonos-elements-font-size-base);
+  font-weight: 500;
+  color: var(--zonos-elements-text-color-secondary);
+}
+:host .zonos--option:focus {
+  outline: none;
+}
+:host .zonos--option:hover:not(.selected) {
+  color: var(--zonos-elements-text-color);
+}
+:host .zonos--option.selected {
+  color: var(--zonos-elements-text-color);
+  background-color: var(--zonos-elements-raised-surface-color);
+  height: 100%;
+  /* Light/Shadows/Button */
+  box-shadow: var(--zonos-elements-shadow-button-standard);
+  border-radius: 6px;
+  animation: translate 0.3s ease-in-out;
+}

package/dist/collection/components/common/zonos-toggle/zonos-toggle.js

@@ -0,0 +1,92 @@
+import { h, Host, } from "@stencil/core";
+import { zonosStoreFontFamily } from "../../store/zonosStore";
+import { classes } from "../../utils/classes";
+export class ZonosToggle {
+    constructor() {
+        this.options = [];
+        this.value = undefined;
+    }
+    render() {
+        return (h(Host, { key: '6af4c4574aed8e5a8d12e20d403f0e681429ce45', class: classes(['zonos--elements zonos--toggle']), style: {
+                '--font-family': zonosStoreFontFamily(),
+            } }, h("div", { key: '8535f709cb6f2a2ad30cbaf782fc6d20363ca1dc', class: "wrapper" }, this.options.map(option => {
+            const selected = option.value === this.value;
+            return (h("button", { class: classes(['zonos--option', selected && 'selected']), key: option.value, onClick: () => {
+                    this.toggleChanged.emit(option.value);
+                } }, option.label));
+        }))));
+    }
+    static get is() { return "zonos-toggle"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-toggle.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-toggle.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "options": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ToggleItem<string>[]",
+                    "resolved": "ToggleItem<string>[]",
+                    "references": {
+                        "ToggleItem": {
+                            "location": "import",
+                            "path": "src/types/common-ui/Toggle",
+                            "id": "src/types/common-ui/Toggle.ts::ToggleItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Options for the toggle"
+                },
+                "defaultValue": "[]"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected option"
+                },
+                "attribute": "value",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "toggleChanged",
+                "name": "toggleChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the toggle changes"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/common/zonos-tooltip/zonos-tooltip.css

@@ -40,7 +40,7 @@
   left: 0;
   width: max-content;
   padding: 12px;
-  background-color: var(--zonos-elements-gray-1200);
+  background-color: var(--zonos-elements-gray-1000);
   opacity: 0;
   transform: scale(0);
   transition: all 0.2s ease-in-out;

package/dist/collection/components/common/zonos-tooltip/zonos-tooltip.js

@@ -7,10 +7,10 @@ export class ZonosTooltip {
         this.showTooltip = false;
     }
     render() {
-        return (h(Host, { key: '091516a0a68f8b4ab2580a8118900c34b39e931c', class: "zonos--elements" }, h("div", { key: '77769b18201f87d601d5bdb860a4bc8c84bb4e90', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '139c1de415b94e12b8d575e3662cba9faf56cb2f' }), h("div", { key: '60c38adf74e9b776001844c2205ac87a4562b525', class: classes([
+        return (h(Host, { key: '214a19120cd770e0477c82fc9b25bd813bf05463', class: "zonos--elements" }, h("div", { key: 'cccee37a2e9a41dcb34427a652a83241277a54fd', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '67a0541e0bce6f73655b240973d51f9b6acca46b' }), h("div", { key: '6ce5cd0b9ecb34c4542d5ca9463e26347cf13a5a', class: classes([
                 this.showTooltip && 'zonos--show-tooltip',
                 'zonos--tooltip-content',
-            ]) }, h("zonos-text", { key: 'bb87c44ee7831c24b47c43b17d2b04c79112e900', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: '5d114d284a15a1661e926bfe5fae9251513c7370', size: "xs", textColor: "gray-0" }, this.subtitle)))));
+            ]) }, h("zonos-text", { key: '377287cc5ea7cd6840203dfef0e1cbee64621b98', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: 'a7f46dedc27427fced022bbbd33f65428cb98f82', size: "xs", textColor: "gray-0" }, this.subtitle)))));
     }
     static get is() { return "zonos-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-v-stack/zonos-v-stack.js

@@ -7,9 +7,9 @@ export class VStack {
         this.spacing = 24;
     }
     render() {
-        return (h(Host, { key: 'fca41f57f80879bf7cb32fa7858777a26a36755d', style: {
+        return (h(Host, { key: 'b8c901920bc5f0822e1a14d68fceb4b0a71de8d0', style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '8b608328327817a540c56dca58ad32ebe622d48e', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: 'c29eeb4c2d0f781bdca44d355d2da75e15576d86' }))));
+            } }, h("div", { key: '64db301d73963c2df229737bfa8c5d680ca748f2', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: '9381e547ba984aac20197e309c1893c95f817986' }))));
     }
     static get is() { return "zonos-v-stack"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-virtual-scroll/zonos-virtual-scroll.js

@@ -56,12 +56,12 @@ export class ZonosVirtualScroll {
                 } }, this.renderItem(i)));
             accHeight += itemHeight;
         }
-        return (h(Host, { key: '1aa49d98976b0856f960a6fc67ee7d04e1dd5317' }, h("div", { key: 'ede653037499e0b925e1cab13a632f8a6da6b9f4',
+        return (h(Host, { key: 'f04bc43b1784b031c065bf4b2730bd84d0be7d01' }, h("div", { key: 'c852f9ea58489bf33e33d5b60ab39083d041861e',
             // to capture scroll action
             class: "scroller", style: {
                 height: `${this.totalHeight}px`,
                 width: `${W}px`,
-            } }), h("div", { key: 'da2fb9c529a96b9f31c3604235e3a6913a145743',
+            } }), h("div", { key: 'd2c5b796c4f83e6532c237c67434f14fcc435a5d',
             // to display items
             class: "item-container", ref: el => (this.container = el), style: {
                 height: `${this.totalHeight}px`,

package/dist/collection/components/component-template/zonos-component/zonos-component.js

@@ -10,7 +10,7 @@ export class ZonosComponent {
         return format(this.first, this.middle, this.last);
     }
     render() {
-        return h("div", { key: '4781e3197d34a39d600c1eebc8ed97e801791c81' }, "Hello, World! I'm ", this.getText());
+        return h("div", { key: '680750af83db9bbfb563fe37d1dc631e6ec60e32' }, "Hello, World! I'm ", this.getText());
     }
     static get is() { return "zonos-component"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/hello/zonos-hello-dialog/zonos-hello-dialog-footer/zonos-hello-dialog-footer.js

@@ -18,9 +18,9 @@ export class ZonosHelloDialogFooter {
         const language = (_b = languages.find(x => x.code === localizationStore.selectedLocale)) === null || _b === void 0 ? void 0 : _b.translatedLabel;
         // Only use gray-0 (white) when the background color is dark (apply inverted color if the element is using dark theme variable)
         const mainColor = primaryColor && isDarkColor(primaryColor) ? 'white' : 'black';
-        return (h(Host, { key: '3ec3d830c3818a9f3661eefe7da50520919e7800', class: "zonos--elements" }, h("div", { key: 'c67564b69ce94116285cf28b9c4d8158f1d732cc', class: "zonos--hello-dialog-footer", style: {
+        return (h(Host, { key: '10507bbc2c86294a173c72bbc963e6b6a6150ab8', class: "zonos--elements" }, h("div", { key: '9be6b8d019954c89d5ee1611495bc31e37c737f0', class: "zonos--hello-dialog-footer", style: {
                 '--primary-color': primaryColor,
-            } }, h("a", { key: 'fcb17ee52dc72b107a0c43c27103bc6ebd400ee1', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: 'f73ba904c41c936d020d5c61d087deaedf9d4708', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: mainColor, size: 108 })), h("div", { key: '6b3909844a290b1a76a0f77d2371ba1aba72a536', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: 'd1cc73adf8c92a97b656b6054613caa71d742afa', buttonColor: mainColor, icon: h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: mainColor }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), h("zonos-button", { key: 'f9497df1d84e9c18ac02b614c43449f9ffd311ed', buttonColor: mainColor, icon: h("zonos-country-flag", { "aria-label": "Open country select", class: "zonos--footer-country-flag", countryCode: localizationStore.selectedCountryCode }), onClick: () => this.setShowCountrySelect(true), variant: "subtle" }, localizationStore.selectedCountryCode)))));
+            } }, h("a", { key: 'e0f0a04cdfcfb8e6e3639818e7a0950e81930b93', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '4f39f90ead546f871b97e47e27965eca56ca927b', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: mainColor, size: 108 })), h("div", { key: 'dc0e8be893d1ed5038272e7311276e81f62f0c57', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: '7a969188a4026505639a86ffbc077d1a8ae6d069', buttonColor: mainColor, icon: h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: mainColor }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), h("zonos-button", { key: 'fd46f01bcfd1c03599998f3c6844d0395d263004', buttonColor: mainColor, icon: h("zonos-country-flag", { "aria-label": "Open country select", class: "zonos--footer-country-flag", countryCode: localizationStore.selectedCountryCode }), onClick: () => this.setShowCountrySelect(true), variant: "subtle" }, localizationStore.selectedCountryCode)))));
     }
     static get is() { return "zonos-hello-dialog-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/hello/zonos-hello-dialog/zonos-hello-dialog.js

@@ -232,18 +232,18 @@ export class ZonosHelloDialog {
         const defaultMessage = formatStringWithLinks(defaultMessageStr);
         const currentPage = this.getCurrentPageEnum();
         const filteredMessages = customMessages.filter(x => x.pageName === currentPage);
-        return (h(Host, { key: '7ff123654399aee05fd295c108e01d924a8964e5', class: "zonos--elements" }, h("div", { key: '316720cc18d1b9fbbf86cbfcde1f25106b1197e8', class: classes([
+        return (h(Host, { key: 'e14037c6b8c7f2799647175dbddc66d65d0325f8', class: "zonos--elements" }, h("div", { key: 'fda45028c0c2023f84eef20303c5b62dc07eb889', class: classes([
                 'zonos--hello-dialog',
                 animateLeft && 'zonos--hello-dialog-animate-from-left',
                 animateFromBottom && 'zonos--hello-dialog-animate-from-bottom',
                 !!this.mobileLocationOverride &&
                     'zonos--hello-dialog-mobile-override',
                 this.isOpen && 'zonos--hello-dialog-open',
-            ]), inert: !this.isOpen, ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (h("div", { key: '29a0018c2c8eb7fdde938e432ea783517d364ea8' }, h("div", { key: 'a882452996503ddb4feb3e431eaf9cc14dc2ff34', class: "zonos--hello-dialog-content" }, h("zonos-button", { key: '2c656e792daa59c0ce5770d71a779de270a8adc8', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close Zonos Hello dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), h("zonos-v-stack", { key: '1dd3473645c5581fee41da086a478b6eb6f3104e', spacing: 24 }, h("zonos-country-flag", { key: '57bdcb6b5e2044b65868a53e91220b7eea5c389e', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { key: '8f01898edbd5c30771a2c8d12e0919f6b41cc96c', class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { key: '75728fcc40efe82ff58e767b3c3c9f60f96f37b2', type: "boldSubheader" }, welcomeMessage), h("zonos-text", { key: 'b82ebf2adacbb72637064b04957846ee79f10bd5', innerHTML: defaultMessage, textColor: "gray-800" })), h("zonos-v-stack", { key: '7a0ae96961883e1a55248d4163da3bed2e76d077', spacing: 8 }, this.restrictedItems.map(item => {
+            ]), inert: !this.isOpen, ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (h("div", { key: 'bb483bbb96679486f9a624fe42f322c2d2e0c94c' }, h("div", { key: '58e5d779f0958ddcd1f36bc172c656fc99e34607', class: "zonos--hello-dialog-content" }, h("zonos-button", { key: '69c8e383ebd2c2571114235e1e5e03e97af3899b', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close Zonos Hello dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), h("zonos-v-stack", { key: '88655783f3891bb7148ea49e5eaa36746c49ff4b', spacing: 24 }, h("zonos-country-flag", { key: 'c63cf9ef2a435ea28cddf0dcb89d51594bf45047', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { key: '2c0ef7490b12996cf18229ad12e293be2feeb737', class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { key: '869918eac5dc67eb6c6e148966bf46eaa1922a14', type: "boldSubheader" }, welcomeMessage), h("zonos-text", { key: '8ab9d963ed850824ffa8431e1335d7dc61d1208e', innerHTML: defaultMessage, textColor: "gray-800" })), h("zonos-v-stack", { key: '944a27a00bd4f617656be97f31e6cf8f3933e45f', spacing: 8 }, this.restrictedItems.map(item => {
             var _a;
             return item && (h("zonos-banner", { bannerTitle: item.name, intent: "error" }, (_a = item.itemRestrictions) === null || _a === void 0 ? void 0 : _a.map(x => (h("zonos-text", { textColor: "red-800" }, x === null || x === void 0 ? void 0 : x.note)))));
-        }), h("zonos-card", { key: 'd6a1f8270f3b6c69febc04224e6a0fa7ada5e07a', spacing: "12px" }, h("zonos-v-stack", { key: '209eac48b847c3ac4c7e8eb9df35c95416d89536', spacing: 12 }, hasInclusivePrices ? (h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Duty de minimis", content: InclusivePricingIcon }), h("zonos-text", null, inclusivePriceMessage))) : (h(Fragment, null, h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Duty de minimis", content: ImportIcon }), h("zonos-text", null, dutyDeMinimisMessage)), h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Tax de minimis", content: MoneyIcon }), h("zonos-text", null, taxDeMinimisMessage)))), additionalInformation === null || additionalInformation === void 0 ? void 0 :
-            additionalInformation.map(info => (h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Additional information for buying goods from selected country", content: BagIcon }), h("zonos-text", { innerHTML: info })))))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), h("zonos-hello-dialog-footer", { key: 'e9444ec1c3c3616712faeba92734b4275d373da1', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", { key: 'a612e3daa6de5e5f73422ed8ebed8b3a682c3c46' }, h("zonos-country-select", { key: 'b45c18d7feaf95e74da6e0540ea28325a24d287b', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", { key: 'e50779d3c0e3c83587ae445e9ded8e108f893e31' }, h("zonos-language-select", { key: 'b502cef6095a0e9a57b3c81fa354ca3614060878', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
+        }), h("zonos-card", { key: '0e348230d4455b63292f91a2de0294bfcf9d192b', spacing: "12px" }, h("zonos-v-stack", { key: '9ccc2ab76764f1a369731854c15959c60c8646e3', spacing: 12 }, hasInclusivePrices ? (h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Duty de minimis", content: InclusivePricingIcon }), h("zonos-text", null, inclusivePriceMessage))) : (h(Fragment, null, h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Duty de minimis", content: ImportIcon }), h("zonos-text", null, dutyDeMinimisMessage)), h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Tax de minimis", content: MoneyIcon }), h("zonos-text", null, taxDeMinimisMessage)))), additionalInformation === null || additionalInformation === void 0 ? void 0 :
+            additionalInformation.map(info => (h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Additional information for buying goods from selected country", content: BagIcon }), h("zonos-text", { innerHTML: info })))))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), h("zonos-hello-dialog-footer", { key: 'ea448dda0303f72ba039f19d961dfcde9bb3d0d0', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", { key: 'ff7c4495a0688f94a9b88ed7fe1c4a52715fbd40' }, h("zonos-country-select", { key: '11f8b9f49c1ca945dcc97263c9163d23ee78482e', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", { key: '5e6a458a658c33e1dd68a519efa489b5445fb358' }, h("zonos-language-select", { key: 'd319a4e87bd669f10e8b337561804ff73ca097ac', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
     }
     static get is() { return "zonos-hello-dialog"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/main/zonos-controller.js

@@ -204,7 +204,7 @@ export class ZonosController {
         zonosStore.organizationName = organizationName;
     }
     render() {
-        return h(Host, { key: '9ce30001769cc193eb206f99c7b8503aec7b738d', class: "zonos--elements" });
+        return h(Host, { key: '4fbe37aa73ee16150bf40bdcc3bf5d0d0c092482', class: "zonos--elements" });
     }
     static get is() { return "zonos-controller"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/paypal/zonos-paypal-payment.js

@@ -41,7 +41,7 @@ export class ZonosPaypalPayment {
         void this.loadPaypal();
     }
     render() {
-        return (h(Host, { key: '6bfc962de500edbb105b7eb899711e48def78167', class: "zonos--paypal-payment zonos--elements" }, h("div", { key: '92d1b1c416f5e233c54e50d47129be375ef0a68b', class: "zonos--payment-paypal-container" })));
+        return (h(Host, { key: '23a85e68d356392c530adc7d006cbe4ffc5ff87c', class: "zonos--paypal-payment zonos--elements" }, h("div", { key: '1488f9507505eaea91141c09265295acff6ca085', class: "zonos--payment-paypal-container" })));
     }
     static get is() { return "zonos-paypal-payment"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/store/checkout/cart.js

@@ -12,7 +12,7 @@ const { onChange, reset, state: cartStore, } = createStore(() => ({
     checkoutSessionTimeoutShow: false,
     checkoutTimeoutInterval: null,
     currency: 'USD',
-    doneSteps: [],
+    displayBaseCurrency: false,
     dutiesTaxesFees: null,
     dutiesTaxesFeesEstimate: null,
     error: null,

package/dist/collection/components/stripe/zonos-address/zonos-address.js

@@ -138,7 +138,7 @@ export class ZonosAddress {
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: '15074e6cf5021e2d583838eb866f92cb8dad0c1e', class: "zonos--address zonos--elements" }, h("zonos-text", { key: '4203a4dffc101ba0667e975ff2ebe6125e023509', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: '66add8724cb61193252e44b7a8179fbabc34d3d2', class: "zonos--address-component" })));
+        return (h(Host, { key: '23c06d9f7740b43f58f946f92a5357931e6fe256', class: "zonos--address zonos--elements" }, h("zonos-text", { key: '7eed670aa6fbb3eba5a25394f7e02d9cb7aa3bd8', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: '61e461713bebb42c8f989a7e08e7bc62a572ace8', class: "zonos--address-component" })));
     }
     static get is() { return "zonos-address"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/stripe/zonos-link-authentication/zonos-link-authentication.js

@@ -42,7 +42,7 @@ export class ZonosLinkAuthentication {
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: '7c110f013b4e24c92a4194045dc084fb795d0f91', class: "zonos--link-authentication zonos--elements" }, h("zonos-text", { key: 'dcbbd48a47c696641fbd64cdfff16946824ffc46', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: 'a77b5cb13e7e15b2a69efaa179abacc52061e9d0', class: "zonos--link-authentication-component" })));
+        return (h(Host, { key: '0aaba985027ef855e981049783641b38ec1b1afd', class: "zonos--link-authentication zonos--elements" }, h("zonos-text", { key: '8fbb7a2f95c02d975f4b94c70e68be764d53d76e', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: 'adc585cf1fa7ea763e9c5ae4e5be623b2d8f6627', class: "zonos--link-authentication-component" })));
     }
     static get is() { return "zonos-link-authentication"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/stripe/zonos-payment/zonos-payment.js

@@ -36,7 +36,7 @@ export class ZonosPayment {
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: 'cf616ec959fd1b7396ed86b23561f459e0da8722', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { key: 'e5564db71ba2c0d67d372cb1804d6d462cdf1b33', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: '3ea47f2c0a541590210d181bc73ecb3fb27e7783', class: "zonos--payment-component" }), h("div", { key: 'd3a46a127448568caf4309806e88556594075c12', class: "zonos--payment-paypal-container" })));
+        return (h(Host, { key: 'b0f902ab028fc148e5ac2e6b6620844aa88329f0', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { key: '826ddc56d763a6064e4ba5bd331853950d68a8b5', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: '4f987cfa5d2d1d2b0db48f435f9119095b1a7373', class: "zonos--payment-component" }), h("div", { key: 'bbdfdeee14b9a919b896bbe525763d850739cb4a', class: "zonos--payment-paypal-container" })));
     }
     static get is() { return "zonos-payment"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/utils/checkout/getDisplayCurrency.js

@@ -0,0 +1,9 @@
+import { cartStore } from "../../store/checkout/cart";
+export const getDisplayCurrency = () => {
+    var _a, _b;
+    const shouldDisplayBaseCurrency = cartStore.displayBaseCurrency;
+    const displayCurrency = shouldDisplayBaseCurrency && ((_a = cartStore.exchangeRate) === null || _a === void 0 ? void 0 : _a.sourceCurrencyCode)
+        ? (_b = cartStore.exchangeRate) === null || _b === void 0 ? void 0 : _b.sourceCurrencyCode
+        : cartStore.currency;
+    return displayCurrency;
+};

package/dist/collection/components/utils/checkout/renderCheckoutCurrency.js

@@ -0,0 +1,31 @@
+import { cartStore } from "../../store/checkout/cart";
+import { getDisplayCurrency } from "./getDisplayCurrency";
+import { currencyFormat } from "../hello/currencyConversion/currencyFormat";
+/**
+ * Unified currency rendering for checkout amounts.
+ * @note This is only to display, not for calculations.
+ */
+export const renderCheckoutCurrency = ({ amount, isForeign }) => {
+    var _a;
+    const targetRate = ((_a = cartStore.exchangeRate) === null || _a === void 0 ? void 0 : _a.rate) || 1;
+    const shouldDisplayBaseCurrency = cartStore.displayBaseCurrency;
+    const displayCurrency = getDisplayCurrency();
+    if (isForeign) {
+        // Amount is in foreign currency, divide by the rate to convert it to the base currency if displaying in base currency
+        const displayAmount = shouldDisplayBaseCurrency
+            ? amount / targetRate
+            : amount;
+        return currencyFormat({
+            amount: displayAmount,
+            currency: displayCurrency,
+        });
+    }
+    // Amount is already in base currency, need to multiply rate to convert to foreign currency if display in foreign currency
+    const displayAmount = shouldDisplayBaseCurrency
+        ? amount
+        : amount * targetRate;
+    return currencyFormat({
+        amount: displayAmount,
+        currency: displayCurrency,
+    });
+};

package/dist/collection/scripts/_zonosBase.js

@@ -44,6 +44,8 @@ Zonos._paypalMockResponse = null;
 Zonos.isBigCommerce = false;
 Zonos.releaseDate = process.env.NEXT_PUBLIC_RELEASE_DATE;
 Zonos.isLegacyCheckout = false;
+Zonos.showBaseForeign = typeof window !== 'undefined' &&
+    window.location.search.includes('zonosShowBaseForeign');
 /**
  * By default, the package will load from npm
  */

package/dist/collection/types/common-ui/Toggle.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/{cart-b7bbf95b.js → cart-3ea28cb4.js}

@@ -9684,7 +9684,7 @@ const { onChange, reset, state: cartStore, } = createStore(() => ({
     checkoutSessionTimeoutShow: false,
     checkoutTimeoutInterval: null,
     currency: 'USD',
-    doneSteps: [],
+    displayBaseCurrency: false,
     dutiesTaxesFees: null,
     dutiesTaxesFeesEstimate: null,
     error: null,