@zonos/elements 1.3.12-alpha.7 → 1.3.12-alpha.9

package/dist/esm/zonos-hello-dialog.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-dd40cc85.js';
-import { B as currencyFormat, l as localizationStore, t as translate } from './cart-53f5c10c.js';
+import { B as currencyFormat, l as localizationStore, t as translate } from './cart-7961927b.js';
 import { z as zonosStore } from './zonosStore-c4c45591.js';
 import { c as classes } from './classes-0d95c529.js';
 import { f as formatStringWithLinks } from './formatStringWithLinks-9e819405.js';
@@ -19,6 +19,12 @@ const BagIcon = `<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xml
 </svg>
 `;
 
+const ImportIcon = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.35028 11.5744C9.05738 11.2815 8.58251 11.2815 8.28962 11.5744C7.99672 11.8673 7.99672 12.3422 8.28962 12.635L11.2917 15.6372C11.6823 16.0277 12.3154 16.0277 12.7059 15.6372L15.708 12.6351C16.0009 12.3422 16.0009 11.8674 15.708 11.5745C15.4151 11.2816 14.9402 11.2816 14.6473 11.5745L12.7488 13.4729V4.68005C12.7488 4.26584 12.413 3.93005 11.9988 3.93005C11.5846 3.93005 11.2488 4.26584 11.2488 4.68005L11.2488 13.4729L9.35028 11.5744Z" fill="#4D505A"/>
+<path d="M20 14C20 13.5858 19.6642 13.25 19.25 13.25C18.8358 13.25 18.5 13.5858 18.5 14L18.5 17.25C18.5 17.9404 17.9404 18.5 17.25 18.5L6.75 18.5C6.05964 18.5 5.5 17.9404 5.5 17.25L5.5 14C5.5 13.5858 5.16421 13.25 4.75 13.25C4.33579 13.25 4 13.5858 4 14V17.25C4 18.7688 5.23122 20 6.75 20H17.25C18.7688 20 20 18.7688 20 17.25L20 14Z" fill="#4D505A"/>
+</svg>
+`;
+
 const MessageIcon = `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="https://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 4.5C2.25 3.25736 3.25736 2.25 4.5 2.25H13.5C14.7426 2.25 15.75 3.25736 15.75 4.5V10.5C15.75 11.7426 14.7426 12.75 13.5 12.75H8.25C8.01393 12.75 7.79164 12.8611 7.65 13.05L6.3 14.85C5.87508 15.4166 5.2082 15.75 4.5 15.75C3.25736 15.75 2.25 14.7426 2.25 13.5V4.5ZM4.5 3.75C4.08579 3.75 3.75 4.08579 3.75 4.5V13.5C3.75 13.9142 4.08579 14.25 4.5 14.25C4.73607 14.25 4.95836 14.1389 5.1 13.95L6.45 12.15C6.87492 11.5834 7.5418 11.25 8.25 11.25H13.5C13.9142 11.25 14.25 10.9142 14.25 10.5V4.5C14.25 4.08579 13.9142 3.75 13.5 3.75H4.5ZM5.25 6C5.25 5.58579 5.58579 5.25 6 5.25H12C12.4142 5.25 12.75 5.58579 12.75 6C12.75 6.41421 12.4142 6.75 12 6.75H6C5.58579 6.75 5.25 6.41421 5.25 6ZM5.25 9C5.25 8.58579 5.58579 8.25 6 8.25H8.25C8.66421 8.25 9 8.58579 9 9C9 9.41421 8.66421 9.75 8.25 9.75H6C5.58579 9.75 5.25 9.41421 5.25 9Z" fill="#4D505A"/>
 </svg>
@@ -63,6 +69,81 @@ const ZonosHelloDialog = class {
         this.setShowLanguageSelect = async (value) => {
             this.showLanguageSelect = value;
         };
+        this.getDutyMessage = () => {
+            const { countryLandedCost } = localizationStore;
+            // Our Robby API spells deminimis wrong here
+            const dutyDeminimis = (countryLandedCost === null || countryLandedCost === void 0 ? void 0 : countryLandedCost.dutyDeminimus)
+                ? currencyFormat(countryLandedCost.dutyDeminimus)
+                : null;
+            // If Canada, use 40 CAD (courier duty de minimis)
+            const dutyDeminimisToUse = localizationStore.selectedCountryCode === 'CA'
+                ? currencyFormat(40)
+                : dutyDeminimis;
+            // If deminimis is undefined or null, assume it's $0
+            return dutyDeminimisToUse
+                ? `${translate('Spend')} ${dutyDeminimisToUse} ${translate('duty free')}`
+                : translate('Duties will apply to all orders');
+        };
+        this.getTaxMessage = () => {
+            const { countryLandedCost } = localizationStore;
+            // Our Robby API spells deminimis wrong here
+            const taxDeminimis = (countryLandedCost === null || countryLandedCost === void 0 ? void 0 : countryLandedCost.vatTaxDeminimus)
+                ? currencyFormat(countryLandedCost.vatTaxDeminimus)
+                : null;
+            // If Canada, use 150 CAD (courier tax de minimis)
+            const taxDeminimisToUse = localizationStore.selectedCountryCode === 'CA'
+                ? currencyFormat(150)
+                : taxDeminimis;
+            return taxDeminimisToUse
+                ? `${translate('Spend')} ${taxDeminimisToUse} ${translate('tax free')}`
+                : translate('Taxes will apply to all orders');
+        };
+        this.getUkDutyTaxMessage = (landedCost) => {
+            if (landedCost.allowLowValueOrders) {
+                // show nothing if low value orders are allowed
+                return null;
+            }
+            const dutyDeminimis = landedCost.dutyDeminimus;
+            return translate('Orders to ${countryName} must be over ${threshold} to ship.', {
+                countryName: 'United Kingdom',
+                threshold: currencyFormat(dutyDeminimis),
+            });
+        };
+        this.getAustraliaDutyTaxMessage = (landedCost) => {
+            return translate('${percentage} GST due on any order above ${threshold}.', {
+                percentage: `${landedCost.vatTaxRate * 100}%`,
+                threshold: currencyFormat(landedCost.vatTaxDeminimus),
+            });
+        };
+        this.getNewZealandDutyTaxMessge = (landedCost) => {
+            return translate('${percentage} GST due on any order above ${threshold} along with an import entry transaction fee and MPI levy.', {
+                percentage: `${landedCost.vatTaxRate * 100}%`,
+                threshold: currencyFormat(landedCost.vatTaxDeminimus),
+            });
+        };
+        /**
+         * Get additional duty tax message if selected country has tax id
+         */
+        this.getAdditionalDutyTaxMessage = () => {
+            if (!localizationStore.countryLandedCost) {
+                return null;
+            }
+            // only show the message if the store has a tax id for selected country
+            if (!localizationStore.countryLandedCost.hasTaxId) {
+                return null;
+            }
+            switch (localizationStore.countryLandedCost.countryCode) {
+                case 'GB':
+                    return this.getUkDutyTaxMessage(localizationStore.countryLandedCost);
+                case 'AU':
+                    return this.getAustraliaDutyTaxMessage(localizationStore.countryLandedCost);
+                case 'NZ':
+                    return this.getNewZealandDutyTaxMessge(localizationStore.countryLandedCost);
+                default:
+                    // show nothing
+                    return null;
+            }
+        };
         this.isOpen = false;
         this.setIsOpen = () => { };
         this.mobileLocationOverride = undefined;
@@ -84,30 +165,13 @@ const ZonosHelloDialog = class {
     }
     render() {
         var _a;
-        const { countryLandedCost, selectedCountryCode } = localizationStore;
-        // Our Robby API spells deminimis wrong here
-        const dutyDeminimis = (countryLandedCost === null || countryLandedCost === void 0 ? void 0 : countryLandedCost.dutyDeminimus)
-            ? currencyFormat(countryLandedCost.dutyDeminimus)
-            : null;
-        // If Canada, use 40 CAD (courier duty de minimis)
-        const dutyDeminimisToUse = localizationStore.selectedCountryCode === 'CA'
-            ? currencyFormat(40)
-            : dutyDeminimis;
+        const { selectedCountryCode } = localizationStore;
+        // If deminimis is undefined or null, assume it's $0
+        const dutyDeMinimisMessage = this.getDutyMessage();
         // If deminimis is undefined or null, assume it's $0
-        const dutyDeMinimisMessage = dutyDeminimisToUse
-            ? `${translate('Spend')} ${dutyDeminimisToUse} ${translate('duty free')}`
-            : translate('Duties will apply to all orders');
-        // Our Robby API spells deminimis wrong here
-        const taxDeminimis = (countryLandedCost === null || countryLandedCost === void 0 ? void 0 : countryLandedCost.vatTaxDeminimus)
-            ? currencyFormat(countryLandedCost.vatTaxDeminimus)
-            : null;
-        // If Canada, use 150 CAD (courier tax de minimis)
-        const taxDeminimisToUse = localizationStore.selectedCountryCode === 'CA'
-            ? currencyFormat(150)
-            : taxDeminimis;
-        const taxDeMinimisMessage = taxDeminimisToUse
-            ? `${translate('Spend')} ${taxDeminimisToUse} ${translate('tax free')}`
-            : translate('Taxes will apply to all orders');
+        const taxDeMinimisMessage = this.getTaxMessage();
+        // Show additional information if selected country has tax id
+        const additionalInformation = this.getAdditionalDutyTaxMessage();
         const animateLeft = this.animateFromLeftOverride ||
             (this.dialogRef && getHasMoreSpaceOnRight(this.dialogRef));
         const animateFromBottom = this.dialogRef && getHasMoreSpaceAbove(this.dialogRef);
@@ -118,7 +182,7 @@ const ZonosHelloDialog = class {
         const defaultMessage = formatStringWithLinks(defaultMessageStr);
         const currentPage = this.getCurrentPageEnum();
         const filteredMessages = customMessages.filter(x => x.pageName === currentPage);
-        return (h(Host, { key: 'dcd4c055999375785e289cc273c37e50c358d594', class: "zonos--elements" }, h("div", { key: 'a8921afb921ee0b4c0adb31dca0da646c91bdecc', "aria-hidden": "true", class: classes([
+        return (h(Host, { key: 'ccabd686943b009ed6bb9c0ec64a6a4e7cc917f5', class: "zonos--elements" }, h("div", { key: '6bfbae15f5b43413fc76d21b94d0d56a2ce48f4d', "aria-hidden": "true", class: classes([
                 'zonos--hello-dialog',
                 animateLeft && 'zonos--hello-dialog-animate-from-left',
                 animateFromBottom && 'zonos--hello-dialog-animate-from-bottom',
@@ -128,7 +192,7 @@ const ZonosHelloDialog = class {
             ]), ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (h("div", null, h("div", { class: "zonos--hello-dialog-content" }, h("zonos-button", { 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", { spacing: 24 }, h("zonos-country-flag", { class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { type: "boldSubheader" }, welcomeMessage), h("zonos-text", { innerHTML: defaultMessage, textColor: "gray-800" })), h("zonos-v-stack", { 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", { spacing: "12px" }, h("zonos-v-stack", { spacing: 12 }, h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Duty de minimis", content: BagIcon }), 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)))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), h("zonos-hello-dialog-footer", { appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", null, h("zonos-country-select", { handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", null, h("zonos-language-select", { handleOnClose: () => this.setShowLanguageSelect(false) }))))));
+        }), h("zonos-card", { spacing: "12px" }, h("zonos-v-stack", { spacing: 12 }, 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 && (h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Low value order shipping restriction", content: BagIcon }), h("zonos-text", null, additionalInformation))))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), h("zonos-hello-dialog-footer", { appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", null, h("zonos-country-select", { handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", null, h("zonos-language-select", { handleOnClose: () => this.setShowLanguageSelect(false) }))))));
     }
     static get assetsDirs() { return ["assets"]; }
     static get watchers() { return {

package/dist/esm/zonos-hello.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host } from './index-dd40cc85.js';
 import { _ as _root, e as _baseGetTag, i as isObjectLike_1, f as isObject_1, z as zonosStore, g as getZonosStoreTheme, m as mergeConfig } from './zonosStore-c4c45591.js';
-import { r as handleFetch, d as logError, l as localizationStore, u as isValidSelector, t as translate, w as getZCountryUrlParam, x as setZCountryUrlParam, a as log, y as currencyDisplay, z as currencyConvertAndFormat, A as currencyConvert, B as currencyFormat } from './cart-53f5c10c.js';
+import { r as handleFetch, d as logError, l as localizationStore, u as isValidSelector, t as translate, w as getZCountryUrlParam, x as setZCountryUrlParam, a as log, y as currencyDisplay, z as currencyConvertAndFormat, A as currencyConvert, B as currencyFormat } from './cart-7961927b.js';
 import { c as classes } from './classes-0d95c529.js';
 import { g as getHasMoreSpaceOnRight } from './getHasMoreSpaceOnRight-70eb913a.js';
 import './isDarkColor-6bf71e51.js';

package/dist/esm/zonos-payment.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, d as getElement } from './index-dd40cc85.js';
-import { j as stripeStore, d as logError } from './cart-53f5c10c.js';
+import { j as stripeStore, d as logError } from './cart-7961927b.js';
 import './zonosStore-c4c45591.js';
 import './isDarkColor-6bf71e51.js';
 import './getBorderRadius-a89e45fb.js';