@zonos/elements 1.3.68 → 1.3.70

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

@@ -1,9 +1,9 @@
 import { r as registerInstance, h, H as Host, a as getAssetPath, F as Fragment, c as createEvent, d as getElement } from './index-86b8247e.js';
 import { d as zonosStoreFontFamily, z as zonosStore, g as getZonosStoreTheme } from './zonosStore-0dc7a947.js';
 import { c as classes } from './classes-0d95c529.js';
-import { d as cartStore, E as currencyFormat, F as cartStoreHasOneEligibleItem, t as translate, v as stripeStoreReset, j as stripeStore, G as stripeStoreRetrievePayment, H as stripeStoreMessageBasedOnStatus, l as localizationStore, I as stripeStoreTranslateAddressToLatin, J as cartStoreUpdateSelectedShippingOption, K as cartStoreGetShippingTransitInfo } from './cart-53bd48de.js';
-import { s as submitGtag, a as paypalStore, b as paypalStoreReset, c as paypalStoreHasPaypalEnabled, i as isContrastColor } from './paypal-09ebeb63.js';
-import { t as trackConversionEvent, c as createCustomEvent, g as getIsTestMode } from './createCustomEvent-0376082a.js';
+import { d as cartStore, E as currencyFormat, F as cartStoreHasOneEligibleItem, t as translate, v as stripeStoreReset, j as stripeStore, G as stripeStoreRetrievePayment, H as stripeStoreMessageBasedOnStatus, l as localizationStore, I as stripeStoreTranslateAddressToLatin, J as cartStoreUpdateSelectedShippingOption, K as cartStoreGetShippingTransitInfo } from './cart-7f82d6bf.js';
+import { s as submitGtag, a as paypalStore, b as paypalStoreReset, c as paypalStoreHasPaypalEnabled, i as isContrastColor } from './paypal-91a34d75.js';
+import { t as trackConversionEvent, c as createCustomEvent, g as getIsTestMode } from './createCustomEvent-3a894453.js';
 import { g as getBorderRadius } from './getBorderRadius-cff1e39b.js';
 import { h as handleFetch, s as sendErrorLog } from './handleFetch-80ecfb91.js';
 import { i as isCheckoutMobile } from './isCheckoutMobile-8846dccb.js';
@@ -175,7 +175,7 @@ const ZonosCartSubtotal = class {
             if (!cartStore.selectedShippingOption) {
                 return (h(Fragment, null, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Shipping')), h("zonos-text", { class: "zonos--caption", type: "caption" }, translate('No shipping method selected'))));
             }
-            return (h(Fragment, null, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, cartStore.selectedShippingOption.displayName), cartStore.selectedShippingOptionTransitTime && (h("zonos-text", { class: "zonos--caption", type: "caption" }, cartStore.selectedShippingOptionTransitTime, ' ', translate('business days')))));
+            return (h(Fragment, null, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, cartStore.selectedShippingOption.displayName), cartStore.selectedShippingOptionTransitTime && (h("zonos-text", { class: "zonos--caption", type: "caption" }, cartStore.selectedShippingOptionTransitTime))));
         };
         return (h(Host, { class: "zonos--cart-subtotal zonos--elements" }, h("table", { class: "zonos--cart-table" }, h("tr", { class: "zonos--row zonos--cart-subtotal" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column zonos--cart-subtotal-title" }, h("zonos-text", { type: "semiBoldLabel" }, translate('Cart subtotal'))), h("td", { class: "zonos--column zonos--cart-subtotal-price" }, h("zonos-text", { type: "semiBoldLabel" }, currencyFormat({
             amount: subtotal,
@@ -1097,24 +1097,22 @@ const ZonosShipping = class {
         };
         this.initServiceLevels = () => {
             var _a;
-            const serviceLevels = ((_a = cartStore.shippingData) === null || _a === void 0 ? void 0 : _a.map((item) => {
+            const serviceLevels = ((_a = cartStore.shippingData) === null || _a === void 0 ? void 0 : _a.flatMap(item => {
                 var _a;
-                const { expectedDate, maxTransit, minTransit } = cartStoreGetShippingTransitInfo(item);
-                const sublabel = expectedDate
-                    ? `${translate('Expected delivery')} ${expectedDate}`
-                    : '';
-                const caption = minTransit && maxTransit
-                    ? `(${minTransit}-${maxTransit} ${translate('business days')})`
-                    : '';
+                const transitData = cartStoreGetShippingTransitInfo(item);
+                if (!transitData) {
+                    return [];
+                }
+                const { maxTransit, minTransit, unit } = transitData;
+                const sublabel = minTransit && maxTransit ? `${minTransit}-${maxTransit} ${unit}` : '';
                 const foundShipmentRating = (_a = cartStore.landedCostData) === null || _a === void 0 ? void 0 : _a.find(landedCostItem => { var _a; return ((_a = landedCostItem.landedCost) === null || _a === void 0 ? void 0 : _a.shipmentRating.id) === item.id; });
                 if (!foundShipmentRating) {
                     // exclude shipping method if there is no matching landed cost data
-                    return null;
+                    return [];
                 }
                 const shippingAmount = foundShipmentRating.subtotals.shipping;
                 return {
                     amount: shippingAmount,
-                    caption,
                     label: item.displayName,
                     price: currencyFormat({
                         amount: shippingAmount,
@@ -1123,7 +1121,7 @@ const ZonosShipping = class {
                     sublabel,
                     value: item.id,
                 };
-            }).filter(Boolean)) || [];
+            })) || [];
             // sort service level by price
             this.serviceLevels = sortServiceLevelOptions(serviceLevels);
         };
@@ -1157,7 +1155,7 @@ const ZonosShipping = class {
         if (this.showErrorBanner) {
             this.showErrorBanner = !this.handleValidate();
         }
-        return (h(Host, { key: 'a00e5aa3844a5df009db0b2364d56700f37c2d20', class: "zonos--shipping zonos--elements" }, h("div", { key: 'b9037a08517557f2a5eb7d85fde9d8b551c196a5', class: "zonos--group" }, h("zonos-text", { key: '68fa391e9df29791eacff17af55d319bd5faafcf', class: "zonos--title", type: "semiBoldSubheader" }, translate('Delivery options')), this.showErrorBanner && !!((_a = this.serviceLevels) === null || _a === void 0 ? void 0 : _a.length) && (h("zonos-banner", { key: '9bf0e9b1131c4412e5883c1706ae3152e7cdb13b', class: "zonos--error-banner", intent: "error" }, translate('No shipping method selected'))), h("zonos-text", { key: '32dcef256412bb41d6a05b579d0d2ce38b8bdf6a', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !((_b = this.serviceLevels) === null || _b === void 0 ? void 0 : _b.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.'), intent: "error" })) : (h("zonos-shipping-rich-radio", { initialSelectedValue: (_c = this.selectedShippingMethod) === null || _c === void 0 ? void 0 : _c.value, items: this.serviceLevels, onRadioSelected: e => this.handleRadioSelected(e) })), h("div", { key: '47dda4f3f44377fba5ae58dd704e9858b6b9c606', class: "zonos--group-btn" }, h("zonos-button", { key: 'ca4dca0f3f14926af5864fb935cb758f54238a00', backgroundColor: this.submitBtnColor, loading: this.continueLoading || this.isSelecting, onClick: () => this.continueClickHandler(), size: "lg",
+        return (h(Host, { key: '44917386c8ec8a19f8eacb9d4e76b479adc2cd54', class: "zonos--shipping zonos--elements" }, h("div", { key: '9de59b5b3e7c8fe2f8b1e9a83c1ef6119106c2ca', class: "zonos--group" }, h("zonos-text", { key: '7ef2d5c73659c625e60197c3789ff8517a1f0d57', class: "zonos--title", type: "semiBoldSubheader" }, translate('Delivery options')), this.showErrorBanner && !!((_a = this.serviceLevels) === null || _a === void 0 ? void 0 : _a.length) && (h("zonos-banner", { key: '9242f584733edb0af000a403a5f578e2859d5bd8', class: "zonos--error-banner", intent: "error" }, translate('No shipping method selected'))), h("zonos-text", { key: '1436b0da67bb61146af2bfbd72d9aea613114e69', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !((_b = this.serviceLevels) === null || _b === void 0 ? void 0 : _b.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.'), intent: "error" })) : (h("zonos-shipping-rich-radio", { initialSelectedValue: (_c = this.selectedShippingMethod) === null || _c === void 0 ? void 0 : _c.value, items: this.serviceLevels, onRadioSelected: e => this.handleRadioSelected(e) })), h("div", { key: '856d1e0d7ce8d85617774edd4e2bcc7e78cf29c7', class: "zonos--group-btn" }, h("zonos-button", { key: 'f89c93131977958205f60aa651a6eac19d9c102e', 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'))))));
     }

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

@@ -1,8 +1,8 @@
 import { r as registerInstance, h, H as Host, F as Fragment } from './index-86b8247e.js';
-import { l as localizationStore, s as stripeStoreGetDomesticShippingSession, a as localizationStoreUpdateSelectedCountryCode, b as stripeStoreCleanupDomesticShippingSession, c as stripeStoreSaveDomesticShippingSession, i as initStripeElements, d as cartStore, e as cartStoreUpdateItems, f as cartStoreReset, g as cartStoreResetTabItems, h as cartStoreClearCheckoutInterval, j as stripeStore, k as stripeStoreInitCheckoutSession, m as cartStoreStartCheckoutInterval, n as cartStoreUpdateToErrorState, t as translate, o as cartStoreSetCheckoutSession, p as stripeStorePrefetchLandedCost, q as cartStoreNextStep, r as stripeStoreHandleInventoryCheck, u as stripeStoreConfirmPayment, v as stripeStoreReset, w as localizationStoreOnUpdate } from './cart-53bd48de.js';
-import { s as submitGtag, p as paypalInitScript } from './paypal-09ebeb63.js';
+import { l as localizationStore, s as stripeStoreGetDomesticShippingSession, a as localizationStoreUpdateSelectedCountryCode, b as stripeStoreCleanupDomesticShippingSession, c as stripeStoreSaveDomesticShippingSession, i as initStripeElements, d as cartStore, e as cartStoreUpdateItems, f as cartStoreReset, g as cartStoreResetTabItems, h as cartStoreClearCheckoutInterval, j as stripeStore, k as stripeStoreInitCheckoutSession, m as cartStoreStartCheckoutInterval, n as cartStoreUpdateToErrorState, t as translate, o as cartStoreSetCheckoutSession, p as stripeStorePrefetchLandedCost, q as cartStoreNextStep, r as stripeStoreHandleInventoryCheck, u as stripeStoreConfirmPayment, v as stripeStoreReset, w as localizationStoreOnUpdate } from './cart-7f82d6bf.js';
+import { s as submitGtag, p as paypalInitScript } from './paypal-91a34d75.js';
 import { z as zonosStore, g as getZonosStoreTheme, m as mergeConfig } from './zonosStore-0dc7a947.js';
-import { c as createCustomEvent, t as trackConversionEvent, g as getIsTestMode } from './createCustomEvent-0376082a.js';
+import { c as createCustomEvent, t as trackConversionEvent, g as getIsTestMode } from './createCustomEvent-3a894453.js';
 import { i as isCheckoutMobile } from './isCheckoutMobile-8846dccb.js';
 import { l as log, a as logError, s as sendErrorLog } from './handleFetch-80ecfb91.js';
 import { c as classes } from './classes-0d95c529.js';
@@ -178,7 +178,7 @@ const ZonosCheckout = class {
             var _a, _b, _c, _d;
             const theme = ((_a = this.appearanceSettingsOverride) === null || _a === void 0 ? void 0 : _a.theme) || zonosStore.appearance.theme;
             await initStripeElements({
-                overrideBorderRaidus: (_b = this.appearanceSettingsOverride) === null || _b === void 0 ? void 0 : _b.style,
+                overrideBorderRadius: (_b = this.appearanceSettingsOverride) === null || _b === void 0 ? void 0 : _b.style,
                 overridePrimaryColor: (_c = this.appearanceSettingsOverride) === null || _c === void 0 ? void 0 : _c.colorPrimary,
                 overrideSecondaryColor: (_d = this.appearanceSettingsOverride) === null || _d === void 0 ? void 0 : _d.colorSecondary,
                 // only override theme or theme from appearance if it's mobile
@@ -310,7 +310,7 @@ const ZonosCheckout = class {
     attachCheckout() {
         const buttonAnchorSelector = zonosStore.checkoutSettings.placeOrderButtonSelector;
         log(`attach checkout ${buttonAnchorSelector}`);
-        // allow to load checkout if cartData is ready (Checkout can be loaded right awaiy if tempCartUUID is in the URL)
+        // allow to load checkout if cartData is ready (Checkout can be loaded right away if tempCartUUID is in the URL)
         if (!buttonAnchorSelector && !window.Zonos.cartData) {
             // do nothing if button element is not found
             return;
@@ -346,7 +346,7 @@ const ZonosCheckout = class {
                 stripeStore.isFetchingSession = true;
                 this.open = true;
                 try {
-                    // buildCartDetail need to be catch since it may throw error
+                    // buildCartDetail may throw an error
                     const result = await this.buildCartAndInit();
                     if (!result) {
                         throw new Error('Error building cart');
@@ -470,12 +470,12 @@ const ZonosCheckout = class {
             },
         });
         /**
-         * When temp cart data is available, set default address if exist
+         * When temp cart data is available, set default address if it exists
          */
         if (window.Zonos) {
             this.useLegacyQueryParam();
         }
-        // only init checkout if visitor's country is in the shipping zones.
+        // only initialize checkout if visitor's country is in the shipping zones.
         const interval = setInterval(() => {
             stripeStore.stripe = window.Zonos.stripe;
             this.stripe = window.Zonos.stripe;
@@ -491,7 +491,11 @@ const ZonosCheckout = class {
             if (this.preview || this.forceDialogOpen) {
                 void this.buildCartAndInit();
             }
-            else {
+            else if (window.Zonos.isLegacyCheckout) {
+                // With legacy checkout, avoid the mutation observer. We are using a hidden button to trigger checkout.
+                this.attachCheckout();
+            }
+            else if (window) {
                 this.attachCheckout();
                 // create a mutation observer to see if any new elements that match our selector is added to the DOM
                 const observer = new MutationObserver(() => {
@@ -744,7 +748,7 @@ const ZonosCheckout = class {
             onConfirmClicked: () => this.closeDialogHandler({ confirmed: true }) }), h("zonos-confirm-dialog", { class: "zonos--inventory-check-failure-dialog", dialogConfirmBtnText: translate('Return to cart'), dialogIntent: "danger",
             // Show dialog if inventory check error message is not null
             dialogOpen: !!cartStore.inventoryCheckErrorMessage,
-            // If diallog is in open state, the message should not be null
+            // If dialog is in open state, the message should not be null
             dialogSubtitle: cartStore.inventoryCheckErrorMessage, dialogTitle: translate("Couldn't place order"), dialogType: "alert", onCancelClicked: () => {
                 this.handleInventoryCheckDialogCancel();
             },

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-86b8247e.js';
-import { x as isValidSelector, j as stripeStore, y as initLocalizationStore, d as cartStore, a as localizationStoreUpdateSelectedCountryCode } from './cart-53bd48de.js';
+import { x as isValidSelector, j as stripeStore, y as initLocalizationStore, d as cartStore, a as localizationStoreUpdateSelectedCountryCode } from './cart-7f82d6bf.js';
 import { z as zonosStore, b as zonosStoreInitSetting, d as zonosStoreFontFamily } from './zonosStore-0dc7a947.js';
 import { h as handleFetch, a as logError, l as log } from './handleFetch-80ecfb91.js';
 import './isDarkColor-b3afa948.js';
@@ -82,6 +82,10 @@ const injectDefaultWrapper = ({ position = 'bottom-right', }) => {
     return mobileAnchorSelector;
 };
 const initHello = async (helloSettings) => {
+    if (window.Zonos.isLegacyCheckout) {
+        log('Hello is disabled when isLegacyCheckout', 'info');
+        return;
+    }
     const { anchorElementSelector } = helloSettings;
     // default to mobile anchor if anchorElementSelector is not provided
     let helloAnchor = anchorElementSelector;

package/dist/esm/zonos-country-flag.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, d as getElement } from './index-86b8247e.js';
-import { l as localizationStore } from './cart-53bd48de.js';
+import { l as localizationStore } from './cart-7f82d6bf.js';
 import { d as zonosStoreFontFamily } from './zonosStore-0dc7a947.js';
 import { c as classes } from './classes-0d95c529.js';
 import './handleFetch-80ecfb91.js';

package/dist/esm/zonos-country-select_4.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, d as getElement } from './index-86b8247e.js';
-import { a as localizationStoreUpdateSelectedCountryCode, t as translate, l as localizationStore } from './cart-53bd48de.js';
+import { a as localizationStoreUpdateSelectedCountryCode, t as translate, l as localizationStore } from './cart-7f82d6bf.js';
 import { d as zonosStoreFontFamily } from './zonosStore-0dc7a947.js';
 import { f as formatStringWithLinks } from './formatStringWithLinks-9e819405.js';
 import { i as isDarkColor } from './isDarkColor-b3afa948.js';

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host } from './index-86b8247e.js';
-import { t as translate, l as localizationStore, E as currencyFormat } from './cart-53bd48de.js';
+import { t as translate, l as localizationStore, E as currencyFormat } from './cart-7f82d6bf.js';
 import { z as zonosStore } from './zonosStore-0dc7a947.js';
 import { c as classes } from './classes-0d95c529.js';
 import { f as formatStringWithLinks } from './formatStringWithLinks-9e819405.js';

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host } from './index-86b8247e.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-0dc7a947.js';
-import { l as localizationStore, x as isValidSelector, t as translate, z as getZCountryUrlParam, A as setZCountryUrlParam, B as currencyDisplay, C as currencyConvertAndFormat, D as currencyConvert, E as currencyFormat } from './cart-53bd48de.js';
+import { l as localizationStore, x as isValidSelector, t as translate, z as getZCountryUrlParam, A as setZCountryUrlParam, B as currencyDisplay, C as currencyConvertAndFormat, D as currencyConvert, E as currencyFormat } from './cart-7f82d6bf.js';
 import { c as classes } from './classes-0d95c529.js';
 import { h as handleFetch, a as logError, l as log } from './handleFetch-80ecfb91.js';
 import { g as getHasMoreSpaceOnRight } from './getHasMoreSpaceOnRight-70eb913a.js';

package/dist/esm/zonos-language-select_2.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host } from './index-86b8247e.js';
-import { L as localizationStoreUpdateSelectedLocale, t as translate, l as localizationStore } from './cart-53bd48de.js';
+import { L as localizationStoreUpdateSelectedLocale, t as translate, l as localizationStore } from './cart-7f82d6bf.js';
 import { d as zonosStoreFontFamily } from './zonosStore-0dc7a947.js';
 import { l as languages } from './ILanguage-cd6acb72.js';
 import './handleFetch-80ecfb91.js';

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

@@ -1,9 +1,9 @@
 import { r as registerInstance, h, H as Host, d as getElement, c as createEvent } from './index-86b8247e.js';
 import { d as zonosStoreFontFamily } from './zonosStore-0dc7a947.js';
 import { c as classes } from './classes-0d95c529.js';
-import { j as stripeStore } from './cart-53bd48de.js';
+import { j as stripeStore } from './cart-7f82d6bf.js';
 import { a as logError, l as log } from './handleFetch-80ecfb91.js';
-import { d as paypalStoreInitButtons } from './paypal-09ebeb63.js';
+import { d as paypalStoreInitButtons } from './paypal-91a34d75.js';
 import './isDarkColor-b3afa948.js';
 import './getBorderRadius-cff1e39b.js';
 

package/dist/esm/zonos-shipping-rich-radio.entry.js

@@ -51,7 +51,7 @@ const ZonosShippingRichRadio = class {
             return (h("div", { "aria-hidden": "true", class: classes([
                     'zonos--shipping-rich-radio-item',
                     selected && 'selected',
-                ]), onClick: () => this.handleRichRadioSelect(item) }, h("input", { checked: selected, class: "zonos--shipping-rich-radio-input", name: "zonos--shipping-rich-radio", type: "radio", value: item.value }), h("div", { class: "zonos--shipping-info" }, h("div", { class: "zonos--shipping-detail" }, h("zonos-text", { class: "zonos--shipping-label", type: "label" }, item.label)), h("zonos-text", { type: "semiBoldLabel" }, item.price))));
+                ]), onClick: () => this.handleRichRadioSelect(item) }, h("input", { checked: selected, class: "zonos--shipping-rich-radio-input", name: "zonos--shipping-rich-radio", type: "radio", value: item.value }), h("div", { class: "zonos--shipping-info" }, h("div", { class: "zonos--shipping-detail" }, h("zonos-text", { class: "zonos--shipping-label", type: "label" }, item.label), (item.sublabel || item.caption) && (h("div", { class: "zonos--sub-detail" }, item.sublabel && (h("zonos-text", { textColor: "gray-800" }, item.sublabel)), item.caption && (h("zonos-text", { textColor: "gray-600" }, item.caption))))), h("zonos-text", { type: "semiBoldLabel" }, item.price))));
         })));
     }
 };