@zonos/elements 1.3.68 → 1.3.70

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

@@ -5,9 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-d56e0a8b.js');
 const zonosStore = require('./zonosStore-a4395972.js');
 const classes = require('./classes-b7918f56.js');
-const cart = require('./cart-8a585d9b.js');
-const paypal = require('./paypal-81274880.js');
-const createCustomEvent = require('./createCustomEvent-1ad96183.js');
+const cart = require('./cart-11d066b2.js');
+const paypal = require('./paypal-aa0570f4.js');
+const createCustomEvent = require('./createCustomEvent-68af46cb.js');
 const getBorderRadius = require('./getBorderRadius-5a64574c.js');
 const handleFetch = require('./handleFetch-661a8225.js');
 const isCheckoutMobile = require('./isCheckoutMobile-f491ca7c.js');
@@ -179,7 +179,7 @@ const ZonosCartSubtotal = class {
             if (!cart.cartStore.selectedShippingOption) {
                 return (index.h(index.Fragment, null, index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, cart.translate('Shipping')), index.h("zonos-text", { class: "zonos--caption", type: "caption" }, cart.translate('No shipping method selected'))));
             }
-            return (index.h(index.Fragment, null, index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, cart.cartStore.selectedShippingOption.displayName), cart.cartStore.selectedShippingOptionTransitTime && (index.h("zonos-text", { class: "zonos--caption", type: "caption" }, cart.cartStore.selectedShippingOptionTransitTime, ' ', cart.translate('business days')))));
+            return (index.h(index.Fragment, null, index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, cart.cartStore.selectedShippingOption.displayName), cart.cartStore.selectedShippingOptionTransitTime && (index.h("zonos-text", { class: "zonos--caption", type: "caption" }, cart.cartStore.selectedShippingOptionTransitTime))));
         };
         return (index.h(index.Host, { class: "zonos--cart-subtotal zonos--elements" }, index.h("table", { class: "zonos--cart-table" }, index.h("tr", { class: "zonos--row zonos--cart-subtotal" }, index.h("td", { class: "zonos--column" }), index.h("td", { class: "zonos--column zonos--cart-subtotal-title" }, index.h("zonos-text", { type: "semiBoldLabel" }, cart.translate('Cart subtotal'))), index.h("td", { class: "zonos--column zonos--cart-subtotal-price" }, index.h("zonos-text", { type: "semiBoldLabel" }, cart.currencyFormat({
             amount: subtotal,
@@ -1101,24 +1101,22 @@ const ZonosShipping = class {
         };
         this.initServiceLevels = () => {
             var _a;
-            const serviceLevels = ((_a = cart.cartStore.shippingData) === null || _a === void 0 ? void 0 : _a.map((item) => {
+            const serviceLevels = ((_a = cart.cartStore.shippingData) === null || _a === void 0 ? void 0 : _a.flatMap(item => {
                 var _a;
-                const { expectedDate, maxTransit, minTransit } = cart.cartStoreGetShippingTransitInfo(item);
-                const sublabel = expectedDate
-                    ? `${cart.translate('Expected delivery')} ${expectedDate}`
-                    : '';
-                const caption = minTransit && maxTransit
-                    ? `(${minTransit}-${maxTransit} ${cart.translate('business days')})`
-                    : '';
+                const transitData = cart.cartStoreGetShippingTransitInfo(item);
+                if (!transitData) {
+                    return [];
+                }
+                const { maxTransit, minTransit, unit } = transitData;
+                const sublabel = minTransit && maxTransit ? `${minTransit}-${maxTransit} ${unit}` : '';
                 const foundShipmentRating = (_a = cart.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: cart.currencyFormat({
                         amount: shippingAmount,
@@ -1127,7 +1125,7 @@ const ZonosShipping = class {
                     sublabel,
                     value: item.id,
                 };
-            }).filter(Boolean)) || [];
+            })) || [];
             // sort service level by price
             this.serviceLevels = sortServiceLevelOptions(serviceLevels);
         };
@@ -1161,7 +1159,7 @@ const ZonosShipping = class {
         if (this.showErrorBanner) {
             this.showErrorBanner = !this.handleValidate();
         }
-        return (index.h(index.Host, { key: 'a00e5aa3844a5df009db0b2364d56700f37c2d20', class: "zonos--shipping zonos--elements" }, index.h("div", { key: 'b9037a08517557f2a5eb7d85fde9d8b551c196a5', class: "zonos--group" }, index.h("zonos-text", { key: '68fa391e9df29791eacff17af55d319bd5faafcf', class: "zonos--title", type: "semiBoldSubheader" }, cart.translate('Delivery options')), this.showErrorBanner && !!((_a = this.serviceLevels) === null || _a === void 0 ? void 0 : _a.length) && (index.h("zonos-banner", { key: '9bf0e9b1131c4412e5883c1706ae3152e7cdb13b', class: "zonos--error-banner", intent: "error" }, cart.translate('No shipping method selected'))), index.h("zonos-text", { key: '32dcef256412bb41d6a05b579d0d2ce38b8bdf6a', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, cart.translate('Shipping method')), !((_b = this.serviceLevels) === null || _b === void 0 ? void 0 : _b.length) ? (index.h("zonos-banner", { bannerTitle: cart.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" })) : (index.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) })), index.h("div", { key: '47dda4f3f44377fba5ae58dd704e9858b6b9c606', class: "zonos--group-btn" }, index.h("zonos-button", { key: 'ca4dca0f3f14926af5864fb935cb758f54238a00', backgroundColor: this.submitBtnColor, loading: this.continueLoading || this.isSelecting, onClick: () => this.continueClickHandler(), size: "lg",
+        return (index.h(index.Host, { key: '44917386c8ec8a19f8eacb9d4e76b479adc2cd54', class: "zonos--shipping zonos--elements" }, index.h("div", { key: '9de59b5b3e7c8fe2f8b1e9a83c1ef6119106c2ca', class: "zonos--group" }, index.h("zonos-text", { key: '7ef2d5c73659c625e60197c3789ff8517a1f0d57', class: "zonos--title", type: "semiBoldSubheader" }, cart.translate('Delivery options')), this.showErrorBanner && !!((_a = this.serviceLevels) === null || _a === void 0 ? void 0 : _a.length) && (index.h("zonos-banner", { key: '9242f584733edb0af000a403a5f578e2859d5bd8', class: "zonos--error-banner", intent: "error" }, cart.translate('No shipping method selected'))), index.h("zonos-text", { key: '1436b0da67bb61146af2bfbd72d9aea613114e69', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, cart.translate('Shipping method')), !((_b = this.serviceLevels) === null || _b === void 0 ? void 0 : _b.length) ? (index.h("zonos-banner", { bannerTitle: cart.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" })) : (index.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) })), index.h("div", { key: '856d1e0d7ce8d85617774edd4e2bcc7e78cf29c7', class: "zonos--group-btn" }, index.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 }, cart.translate('Go to payment'))))));
     }

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

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d56e0a8b.js');
-const cart = require('./cart-8a585d9b.js');
-const paypal = require('./paypal-81274880.js');
+const cart = require('./cart-11d066b2.js');
+const paypal = require('./paypal-aa0570f4.js');
 const zonosStore = require('./zonosStore-a4395972.js');
-const createCustomEvent = require('./createCustomEvent-1ad96183.js');
+const createCustomEvent = require('./createCustomEvent-68af46cb.js');
 const isCheckoutMobile = require('./isCheckoutMobile-f491ca7c.js');
 const handleFetch = require('./handleFetch-661a8225.js');
 const classes = require('./classes-b7918f56.js');
@@ -182,7 +182,7 @@ const ZonosCheckout = class {
             var _a, _b, _c, _d;
             const theme = ((_a = this.appearanceSettingsOverride) === null || _a === void 0 ? void 0 : _a.theme) || zonosStore.zonosStore.appearance.theme;
             await cart.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
@@ -314,7 +314,7 @@ const ZonosCheckout = class {
     attachCheckout() {
         const buttonAnchorSelector = zonosStore.zonosStore.checkoutSettings.placeOrderButtonSelector;
         handleFetch.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;
@@ -350,7 +350,7 @@ const ZonosCheckout = class {
                 cart.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');
@@ -474,12 +474,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(() => {
             cart.stripeStore.stripe = window.Zonos.stripe;
             this.stripe = window.Zonos.stripe;
@@ -495,7 +495,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(() => {
@@ -748,7 +752,7 @@ const ZonosCheckout = class {
             onConfirmClicked: () => this.closeDialogHandler({ confirmed: true }) }), index.h("zonos-confirm-dialog", { class: "zonos--inventory-check-failure-dialog", dialogConfirmBtnText: cart.translate('Return to cart'), dialogIntent: "danger",
             // Show dialog if inventory check error message is not null
             dialogOpen: !!cart.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: cart.cartStore.inventoryCheckErrorMessage, dialogTitle: cart.translate("Couldn't place order"), dialogType: "alert", onCancelClicked: () => {
                 this.handleInventoryCheckDialogCancel();
             },

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d56e0a8b.js');
-const cart = require('./cart-8a585d9b.js');
+const cart = require('./cart-11d066b2.js');
 const zonosStore = require('./zonosStore-a4395972.js');
 const handleFetch = require('./handleFetch-661a8225.js');
 require('./isDarkColor-5efc8367.js');
@@ -86,6 +86,10 @@ const injectDefaultWrapper = ({ position = 'bottom-right', }) => {
     return mobileAnchorSelector;
 };
 const initHello = async (helloSettings) => {
+    if (window.Zonos.isLegacyCheckout) {
+        handleFetch.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/cjs/zonos-country-flag.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d56e0a8b.js');
-const cart = require('./cart-8a585d9b.js');
+const cart = require('./cart-11d066b2.js');
 const zonosStore = require('./zonosStore-a4395972.js');
 const classes = require('./classes-b7918f56.js');
 require('./handleFetch-661a8225.js');

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d56e0a8b.js');
-const cart = require('./cart-8a585d9b.js');
+const cart = require('./cart-11d066b2.js');
 const zonosStore = require('./zonosStore-a4395972.js');
 const formatStringWithLinks = require('./formatStringWithLinks-52341fc7.js');
 const isDarkColor = require('./isDarkColor-5efc8367.js');

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d56e0a8b.js');
-const cart = require('./cart-8a585d9b.js');
+const cart = require('./cart-11d066b2.js');
 const zonosStore = require('./zonosStore-a4395972.js');
 const classes = require('./classes-b7918f56.js');
 const formatStringWithLinks = require('./formatStringWithLinks-52341fc7.js');

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d56e0a8b.js');
 const zonosStore = require('./zonosStore-a4395972.js');
-const cart = require('./cart-8a585d9b.js');
+const cart = require('./cart-11d066b2.js');
 const classes = require('./classes-b7918f56.js');
 const handleFetch = require('./handleFetch-661a8225.js');
 const getHasMoreSpaceOnRight = require('./getHasMoreSpaceOnRight-4c94667f.js');

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d56e0a8b.js');
-const cart = require('./cart-8a585d9b.js');
+const cart = require('./cart-11d066b2.js');
 const zonosStore = require('./zonosStore-a4395972.js');
 const ILanguage = require('./ILanguage-98b04442.js');
 require('./handleFetch-661a8225.js');

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

@@ -5,9 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-d56e0a8b.js');
 const zonosStore = require('./zonosStore-a4395972.js');
 const classes = require('./classes-b7918f56.js');
-const cart = require('./cart-8a585d9b.js');
+const cart = require('./cart-11d066b2.js');
 const handleFetch = require('./handleFetch-661a8225.js');
-const paypal = require('./paypal-81274880.js');
+const paypal = require('./paypal-aa0570f4.js');
 require('./isDarkColor-5efc8367.js');
 require('./getBorderRadius-5a64574c.js');
 

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

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

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

@@ -15,7 +15,7 @@ export class ZonosCartSubtotal {
             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,

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

@@ -38,7 +38,7 @@ export class ZonosCheckout {
             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
@@ -170,7 +170,7 @@ export class ZonosCheckout {
     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;
@@ -206,7 +206,7 @@ export class ZonosCheckout {
                 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');
@@ -330,12 +330,12 @@ export class ZonosCheckout {
             },
         });
         /**
-         * 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;
@@ -351,7 +351,11 @@ export class ZonosCheckout {
             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(() => {
@@ -604,7 +608,7 @@ export class ZonosCheckout {
             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/collection/components/checkout/zonos-checkout/zonos-shipping/zonos-shipping.js

@@ -48,24 +48,22 @@ export class ZonosShipping {
         };
         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,
@@ -74,7 +72,7 @@ export class ZonosShipping {
                     sublabel,
                     value: item.id,
                 };
-            }).filter(Boolean)) || [];
+            })) || [];
             // sort service level by price
             this.serviceLevels = sortServiceLevelOptions(serviceLevels);
         };
@@ -108,7 +106,7 @@ export class ZonosShipping {
         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/collection/components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio.js

@@ -45,7 +45,7 @@ export class ZonosShippingRichRadio {
             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))));
         })));
     }
     static get is() { return "zonos-shipping-rich-radio"; }

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

@@ -2,8 +2,6 @@ import { createStore } from "@stencil/store";
 import { stripeStore, stripeStoreReset, stripeStoreUpdateCheckoutSession, } from "./stripe";
 import { localizationStore } from "../hello/localization";
 import { translate } from "../translationStore";
-import { formatDate } from "../../utils/formatDate";
-import { getDaysDifference } from "../../utils/getDaysDifference";
 import { log } from "../../utils/logging/log";
 import { logError } from "../../utils/logging/logError";
 const { onChange, reset, state: cartStore, } = createStore(() => ({
@@ -56,6 +54,17 @@ const { onChange, reset, state: cartStore, } = createStore(() => ({
     },
     total: 0,
 }));
+const getTransitUnit = (type) => {
+    switch (type) {
+        case 'DAYS':
+            return translate('days');
+        case 'WEEKS':
+            return translate('weeks');
+        case 'BUSINESS_DAYS':
+        default:
+            return translate('business days');
+    }
+};
 /**
  * Format shipping transit info to be displayed on UI
  * @returns
@@ -64,21 +73,16 @@ const { onChange, reset, state: cartStore, } = createStore(() => ({
  * - minTransit: 3
  */
 const cartStoreGetShippingTransitInfo = (item) => {
-    const minTransit = item.minTransitAt
-        ? getDaysDifference(new Date(item.minTransitAt))
-        : '';
-    const maxTransit = item.maxTransitAt
-        ? getDaysDifference(new Date(item.maxTransitAt))
-        : '';
-    const expectedDate = item.minTransitAt
-        ? formatDate({
-            date: new Date(item.minTransitAt),
-        })
-        : '';
+    var _a;
+    const transitTime = (_a = item.shippingProfile) === null || _a === void 0 ? void 0 : _a.transitTime;
+    // Don't care about falsy 0 values because this is international shipping and 0 days is not feasible
+    if (!(transitTime === null || transitTime === void 0 ? void 0 : transitTime.min) || !(transitTime === null || transitTime === void 0 ? void 0 : transitTime.max) || !(transitTime === null || transitTime === void 0 ? void 0 : transitTime.type)) {
+        return null;
+    }
     return {
-        expectedDate,
-        maxTransit,
-        minTransit,
+        maxTransit: transitTime.max,
+        minTransit: transitTime.min,
+        unit: getTransitUnit(transitTime.type),
     };
 };
 const getMatchItem = ({ item1, item2, }) => {
@@ -191,7 +195,7 @@ const cartStoreReCalculateTotal = async ({ adjustmentAmount, cartId, currency, i
         return false;
     }
     if (!landedCostId) {
-        // This is when first open the checkout modal and we just want to get info from the old cart session.
+        // This is when we first open the checkout modal and we just want to get info from the old cart session.
         // use subtotals from checkout session to update cart total
         cartStoreApplySubtotals(json.checkoutSessionUpdate.subtotals);
         log('Exchange rate updated for cart items (checkout session update)', 'info', cartStore.exchangeRate);
@@ -203,12 +207,11 @@ const cartStoreUpdateSelectedShippingOption = async (selectedShippingOption) =>
     var _a, _b, _c, _d, _e;
     cartStore.selectedShippingOption = selectedShippingOption;
     // update shipping transit info
-    const { expectedDate, maxTransit, minTransit } = cartStoreGetShippingTransitInfo(cartStore.selectedShippingOption);
-    cartStore.selectedShippingOptionExpectedDate = expectedDate;
-    cartStore.selectedShippingOptionTransitTime =
-        minTransit && maxTransit
-            ? `${minTransit}-${maxTransit}`
-            : `${minTransit || maxTransit}`;
+    const transitData = cartStoreGetShippingTransitInfo(cartStore.selectedShippingOption);
+    if (transitData) {
+        const { maxTransit, minTransit, unit } = transitData;
+        cartStore.selectedShippingOptionTransitTime = `${minTransit}-${maxTransit} ${unit}`;
+    }
     const selectedLandedCost = (_a = cartStore.landedCostData) === null || _a === void 0 ? void 0 : _a.find(checkoutSessionPresentment => {
         var _a, _b, _c;
         return ((_b = (_a = checkoutSessionPresentment.landedCost) === null || _a === void 0 ? void 0 : _a.shipmentRating) === null || _b === void 0 ? void 0 : _b.id) ===
@@ -229,12 +232,12 @@ const cartStoreUpdateSelectedShippingOption = async (selectedShippingOption) =>
     cartStore.isSelectedShippingAboveDeminimis = isAboveDeminimis;
     cartStore.isSelectedShippingGuarantee = isGuarantee;
     // update session with selected landed cost
-    const updateCalulateStatus = await cartStoreReCalculateTotal({
+    const updateCalculateStatus = await cartStoreReCalculateTotal({
         adjustmentAmount: cartStore.adjustmentTotal,
         cartId: window.Zonos.cartId,
         landedCostId: (_e = selectedLandedCost.landedCost) === null || _e === void 0 ? void 0 : _e.id,
     });
-    return updateCalulateStatus;
+    return updateCalculateStatus;
 };
 onChange('checkoutSessionId', () => {
     if (!cartStore.checkoutSessionId) {
@@ -280,16 +283,16 @@ const cartStoreUpdateItems = async ({ adjustments, cartItems, }) => {
     const total = cartItems.reduce((amt, item) => {
         return amt + item.amount * item.quantity;
     }, 0);
-    const adjustmenTotal = adjustments.reduce((amt, adjustment) => amt + adjustment.amount, 0);
+    const adjustmentTotal = adjustments.reduce((amt, adjustment) => amt + adjustment.amount, 0);
     if (!currency || !total) {
         // do nothing if we can't get currency or total
         return;
     }
     cartStore.currency = currency;
-    // set loading state here because this is first load checkout session when we already have checkout session id stored
+    // set loading state here because this is the first load checkout session when we already have checkout session id stored
     stripeStore.isFetchingSession = true;
     await cartStoreReCalculateTotal({
-        adjustmentAmount: adjustmenTotal,
+        adjustmentAmount: adjustmentTotal,
         cartId: window.Zonos.cartId,
         currency: currency,
         itemsAmount: total,
@@ -300,7 +303,6 @@ const cartStoreResetSelectedShippingOption = () => {
     cartStore.selectedShippingOption = null;
     cartStore.isSelectedShippingAboveDeminimis = false;
     cartStore.isSelectedShippingGuarantee = false;
-    cartStore.selectedShippingOptionExpectedDate = '';
     cartStore.selectedShippingOptionTransitTime = '';
     cartStore.dutiesTaxFees = 0;
     cartStore.shipping = 0;

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

@@ -14,7 +14,7 @@ import { addressRuleStyle } from "../../../styles/stripe/addressRuleStyle";
 import { defaultVariable } from "../../../styles/stripe/defaultVariable";
 const { onChange, reset, state: stripeStore, } = createStore(() => ({
     clientSecret: sessionStorage.getItem('zonos--client-secret') || null,
-    fetchingLandedCostAbordController: null,
+    fetchingLandedCostAbortController: null,
     hasPaymentError: false,
     isFetchingLandedCost: false,
     isFetchingSession: false,
@@ -44,7 +44,7 @@ const { onChange, reset, state: stripeStore, } = createStore(() => ({
         name: {},
     },
 }));
-const getStripeOptions = ({ clientSecret, overrideBorderRaidus, overridePrimaryColor, overrideSecondaryColor, overrideTheme, }) => {
+const getStripeOptions = ({ clientSecret, overrideBorderRadius, overridePrimaryColor, overrideSecondaryColor, overrideTheme, }) => {
     const primaryColor = overridePrimaryColor || zonosStore.appearance.colorPrimary;
     const secondaryColor = overrideSecondaryColor || zonosStore.appearance.colorSecondary;
     const themeBasedColor = primaryColor && isDarkColor(primaryColor) ? 'night' : 'flat';
@@ -57,7 +57,7 @@ const getStripeOptions = ({ clientSecret, overrideBorderRaidus, overridePrimaryC
             // get contrast theme color base on primary color
             theme: overrideTheme ? theme : themeBasedColor,
             variables: Object.assign(Object.assign({}, defaultVariable({
-                borderStyle: overrideBorderRaidus,
+                borderStyle: overrideBorderRadius,
                 theme: 'LIGHT',
             })), {
                 // use the button background color for input glow color
@@ -89,7 +89,7 @@ const initStripeElements = async (props) => {
     if (clientSecret) {
         const stripeOptions = getStripeOptions({
             clientSecret,
-            overrideBorderRaidus: props === null || props === void 0 ? void 0 : props.overrideBorderRaidus,
+            overrideBorderRadius: props === null || props === void 0 ? void 0 : props.overrideBorderRadius,
             overridePrimaryColor: props === null || props === void 0 ? void 0 : props.overridePrimaryColor,
             overrideSecondaryColor: props === null || props === void 0 ? void 0 : props.overrideSecondaryColor,
             overrideTheme: props === null || props === void 0 ? void 0 : props.overrideTheme,
@@ -173,8 +173,8 @@ const stripeStorePrefetchLandedCost = async () => {
     const shouldRefetch = isPrefetchInfoOutdated();
     if (shouldRefetch) {
         // if the info used when fetching landed cost is different from the current info, abort the previous request
-        (_e = stripeStore.fetchingLandedCostAbordController) === null || _e === void 0 ? void 0 : _e.abort();
-        stripeStore.fetchingLandedCostAbordController = null;
+        (_e = stripeStore.fetchingLandedCostAbortController) === null || _e === void 0 ? void 0 : _e.abort();
+        stripeStore.fetchingLandedCostAbortController = null;
     }
     // only fetch if we are not fetching or we need to refetch
     if (stripeAddressReady &&
@@ -193,12 +193,12 @@ const stripeStorePrefetchLandedCost = async () => {
         }
         try {
             const abortController = new AbortController();
-            stripeStore.fetchingLandedCostAbordController = abortController;
+            stripeStore.fetchingLandedCostAbortController = abortController;
             // Reset cart items to non-restricted state and restricted item list
             cartStoreResetCartItems();
             const { checkoutSessionWorkflow, itemCreateWorkflow, landedCostCalculateWorkflow, shipmentRatingCalculateWorkflow, } = await calculateLandedCostNormalized(abortController);
             // reset abort controller after we are done
-            stripeStore.fetchingLandedCostAbordController = null;
+            stripeStore.fetchingLandedCostAbortController = null;
             // update cart store with landed cost info
             cartStore.landedCostData =
                 (checkoutSessionWorkflow === null || checkoutSessionWorkflow === void 0 ? void 0 : checkoutSessionWorkflow.map(checkoutSession => {
@@ -321,7 +321,7 @@ const stripeStoreConfirmPayment = async () => {
     const stripe = stripeStore.stripe;
     const stripeClientSecret = stripeStore.clientSecret;
     if (!((_b = cartStore.selectedLandedCost) === null || _b === void 0 ? void 0 : _b.landedCost.id)) {
-        throw new Error('Attemped to confirm the payment when no landed cost is found in store');
+        throw new Error('Attempted to confirm the payment when no landed cost is found in store');
     }
     if (stripe && stripeElements && stripePaymentReady && stripeClientSecret) {
         const { error } = await stripe.confirmPayment({

package/dist/collection/components/store/translationStore/strings.arabic.js

@@ -344,10 +344,16 @@ export const stringsArabic = {
     'click to learn more': {
         value: 'انقر لمعرفة المزيد',
     },
+    days: {
+        value: 'أيام',
+    },
     or: {
         value: 'أو',
     },
     'restricted items': {
         value: 'عناصر مقيدة',
     },
+    weeks: {
+        value: 'أسابيع',
+    },
 };