@zonos/elements 1.3.84 → 1.3.86

package/dist/cjs/{createCustomEvent-8d9cf9ac.js → createCustomEvent-557f8120.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const cart = require('./cart-a06f18e2.js');
+const cart = require('./cart-c5152dfc.js');
 const zonosStore = require('./zonosStore-a4395972.js');
 const handleFetch = require('./handleFetch-45e76490.js');
 

package/dist/cjs/index.cjs.js

@@ -97,7 +97,7 @@ const getZonosQaUrl = () => {
         return null;
     }
     const qaUrl = extractZonosQaUrl(window.location.href);
-    const cdnUrl = "https://v1.3.84.js.zonos.com";
+    const cdnUrl = "https://v1.3.86.js.zonos.com";
     // when the qaUrl is not set and the built URL is from the test domain, use the test domain for testing
     if (!qaUrl &&
         (cdnUrl.includes('test.') ||
@@ -281,10 +281,10 @@ const zonosLoadUrl = (() => {
     }
     return null;
 })();
-const ZONOS_URL = "https://v1.3.84.js.zonos.com";
-const JS_DELIVR_ZONOS_URL = zonosLoadUrl || "https://cdn.jsdelivr.net/npm/@zonos/elements@1.3.84";
-const UNPKG_ZONOS_URL = "https://unpkg.com/@zonos/elements@1.3.84";
-const CDNJS_ZONOS_URL = "https://cdnjs.cloudflare.com/ajax/libs/zonos-elements/1.3.84";
+const ZONOS_URL = "https://v1.3.86.js.zonos.com";
+const JS_DELIVR_ZONOS_URL = zonosLoadUrl || "https://cdn.jsdelivr.net/npm/@zonos/elements@1.3.86";
+const UNPKG_ZONOS_URL = "https://unpkg.com/@zonos/elements@1.3.86";
+const CDNJS_ZONOS_URL = "https://cdnjs.cloudflare.com/ajax/libs/zonos-elements/1.3.86";
 const INTER_FONT_URL = 'https://rsms.me';
 const GOOGLE_FONT_URL = 'https://fonts.googleapis.com';
 const INTER_FONT_REGEX = /^https:\/\/rsms\.me\/inter\/inter\.css(.*)$/;
@@ -299,7 +299,7 @@ Zonos.zonosConversionTest = typeof window !== 'undefined' &&
     !!window.location.search.match(/\?.*(&*)zonosConversionTest/);
 Zonos._paypalMockResponse = null;
 Zonos.isBigCommerce = false;
-Zonos.releaseDate = "1728756182320";
+Zonos.releaseDate = "1728763184534";
 Zonos.isLegacyCheckout = false;
 /**
  * By default, the package will load from npm
@@ -307,7 +307,7 @@ Zonos.isLegacyCheckout = false;
 Zonos.isNpm = true;
 Zonos.zonosQaUrl = null;
 Zonos.zonosQaUrlApi = null;
-Zonos.version = `v${"1.3.84"}`;
+Zonos.version = `v${"1.3.86"}`;
 Zonos.modeAlerted = false;
 Zonos.cartData = null;
 Zonos.paypal = null;

package/dist/cjs/{paypal-078f3cef.js → paypal-922c7e45.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const zonosStore = require('./zonosStore-a4395972.js');
-const cart = require('./cart-a06f18e2.js');
+const cart = require('./cart-c5152dfc.js');
 const handleFetch = require('./handleFetch-45e76490.js');
 const isDarkColor = require('./isDarkColor-5efc8367.js');
 

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d56e0a8b.js');
-const cart = require('./cart-a06f18e2.js');
+const cart = require('./cart-c5152dfc.js');
 const isCheckoutMobile = require('./isCheckoutMobile-f491ca7c.js');
 const handleFetch = require('./handleFetch-45e76490.js');
 const containsNonLatinChars = require('./containsNonLatinChars-2be5129b.js');

package/dist/cjs/zonos-cart-items_12.cjs.entry.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d56e0a8b.js');
-const cart = require('./cart-a06f18e2.js');
+const cart = require('./cart-c5152dfc.js');
 const classes = require('./classes-b7918f56.js');
-const paypal = require('./paypal-078f3cef.js');
+const paypal = require('./paypal-922c7e45.js');
 const zonosStore = require('./zonosStore-a4395972.js');
-const createCustomEvent = require('./createCustomEvent-8d9cf9ac.js');
+const createCustomEvent = require('./createCustomEvent-557f8120.js');
 const getBorderRadius = require('./getBorderRadius-5a64574c.js');
 const handleFetch = require('./handleFetch-45e76490.js');
 const isCheckoutMobile = require('./isCheckoutMobile-f491ca7c.js');
@@ -31,11 +31,13 @@ const ZonosCartItems = class {
         const nonRestrictedItems = cart.cartStore.items.filter(item => !item.isRestricted);
         return (index.h(index.Host, { key: '7bdf8d1972edb2d11669441b3d8ec6643fca1f4b', class: "zonos--cart-items zonos--elements" }, index.h("table", { key: '1c2fe6d444ea93e40b981a8935d16192bf61928c', class: "zonos--cart-table" }, index.h("tbody", { key: '84279bea6821077bf117a7a13ca497155276c622' }, nonRestrictedItems.map(item => {
             const itemImg = item.imageUrl;
+            // Split the name by <br> tag
+            const namesWithNewLine = item.name.split(/<br\s*\/*>/);
             return (index.h("tr", { class: "zonos--cart-item" }, index.h("td", { class: "zonos--column zonos--cart-item-image" }, itemImg && !this.errorImages.includes(itemImg) ? (index.h("img", { alt: item.name, onError: () => {
                     this.errorImages = [...this.errorImages, itemImg];
                 }, src: item.imageUrl, style: {
                     'min-width': '40px',
-                }, width: 40 })) : (index.h("img", { alt: item.name, src: emptyItemImg, width: 40 }))), index.h("td", { class: "zonos--column zonos--cart-item-name" }, index.h("zonos-text", { type: "label" }, item.name), index.h("zonos-text", { textColor: "gray-600", type: "caption" }, cart.translate('Quantity'), ": ", item.quantity)), index.h("td", { class: "zonos--column zonos--cart-item-price" }, index.h("zonos-text", { type: "semiBoldLabel", weight: 600 }, cart.currencyFormat({
+                }, width: 40 })) : (index.h("img", { alt: item.name, src: emptyItemImg, width: 40 }))), index.h("td", { class: "zonos--column zonos--cart-item-name" }, index.h("div", null, namesWithNewLine.map(name => (index.h("zonos-text", { type: "label" }, name)))), index.h("zonos-text", { textColor: "gray-600", type: "caption" }, cart.translate('Quantity'), ": ", item.quantity)), index.h("td", { class: "zonos--column zonos--cart-item-price" }, index.h("zonos-text", { type: "semiBoldLabel", weight: 600 }, cart.currencyFormat({
                 amount: item.amount * rate * item.quantity,
                 currency: cart.cartStore.currency,
             })))));
@@ -170,14 +172,14 @@ const ZonosCartSubtotal = class {
         };
         const renderLandedCost = () => {
             if (cart.cartStore.landedCostMethod === 'DAP') {
-                return (index.h(index.Fragment, null, index.h("td", { class: "zonos--column zonos--cart-subtotal-title" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, cart.translate('Duties, taxes, and fees')), cart.cartStore.dutiesTaxesFeesEstimate
+                return (index.h(index.Fragment, null, index.h("td", { class: "zonos--column zonos--cart-subtotal-title" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, cart.translate('Duties, taxes, and fees')), cart.cartStore.dutiesTaxesFeesEstimate !== null
                     ? `${cart.translate('Estimated')} ${cart.currencyFormat({
                         amount: cart.cartStore.dutiesTaxesFeesEstimate,
                         currency: cart.cartStore.currency,
                     })}`
                     : '-'), index.h("td", { class: "zonos--column zonos--cart-subtotal-price" }, index.h("div", { class: "zonos--cart-duty-tax-price" }, cart.translate('Due at delivery')))));
             }
-            return (index.h(index.Fragment, null, index.h("td", { class: "zonos--column zonos--cart-subtotal-title" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, cart.translate('Duties, taxes, and fees')), index.h("zonos-text", { class: "zonos--caption", type: "caption" }, cart.translate('Nothing due at the door'))), index.h("td", { class: "zonos--column zonos--cart-subtotal-price" }, index.h("div", { class: "zonos--cart-duty-tax-price" }, cart.cartStore.dutiesTaxesFees
+            return (index.h(index.Fragment, null, index.h("td", { class: "zonos--column zonos--cart-subtotal-title" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, cart.translate('Duties, taxes, and fees')), index.h("zonos-text", { class: "zonos--caption", type: "caption" }, cart.translate('Nothing due at the door'))), index.h("td", { class: "zonos--column zonos--cart-subtotal-price" }, index.h("div", { class: "zonos--cart-duty-tax-price" }, cart.cartStore.dutiesTaxesFees !== null
                 ? cart.currencyFormat({
                     amount: cart.cartStore.dutiesTaxesFees,
                     currency: cart.cartStore.currency,
@@ -540,6 +542,7 @@ const ZonosCheckoutPayment = class {
         this.showErrorBanner = false;
     }
     render() {
+        var _a;
         if (!cart.stripeStore.stripeElements) {
             return null;
         }
@@ -549,16 +552,24 @@ const ZonosCheckoutPayment = class {
         }
         const isTestMode = createCustomEvent.getIsTestMode();
         const hasPaypalEnabled = paypal.paypalStoreHasPaypalEnabled();
-        return (index.h(index.Host, { class: "zonos--checkout-payment zonos--elements" }, index.h("div", { class: "zonos--group" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, cart.translate('Payment method')), this.showErrorBanner && (index.h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, cart.translate('Missing required fields. Make sure all fields are completed.'))), cart.stripeStore.hasPaymentError && (index.h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, cart.translate("We couldn't complete your payment. Please verify the payment details and try again."))), paypal.paypalStore.paypalErrorMessage && (index.h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, paypal.paypalStore.paypalErrorMessage)), index.h("zonos-payment", null), index.h("div", { class: "zonos--group-btn" }, index.h("zonos-button", { backgroundColor: this.submitBtnColor, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
+        const isPaypalTabSelected = ((_a = cart.stripeStore.stripePaymentEventData) === null || _a === void 0 ? void 0 : _a.value.type) === 'external_paypal';
+        return (index.h(index.Host, { class: "zonos--checkout-payment zonos--elements" }, index.h("div", { class: "zonos--group" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, cart.translate('Payment method')), this.showErrorBanner && (index.h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, cart.translate('Missing required fields. Make sure all fields are completed.'))), cart.stripeStore.hasPaymentError && (index.h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, cart.translate("We couldn't complete your payment. Please verify the payment details and try again."))), paypal.paypalStore.paypalErrorMessage && (index.h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, paypal.paypalStore.paypalErrorMessage)), index.h("zonos-payment", null), index.h("div", { class: "zonos--group-btn" }, !isPaypalTabSelected && (index.h("zonos-button", { backgroundColor: this.submitBtnColor, loading: this.continueLoading, onClick: () => {
+                if (!hasPaypalEnabled) {
+                    return;
+                }
+                this.continueClickHandler();
+            }, size: "lg",
             // use primary type when on mobile mode
             variant: this.submitBtnType }, cart.translate('Pay [orderTotal]', {
             orderTotal: cart.currencyFormat({
                 amount: cart.cartStore.total,
                 currency: cart.cartStore.currency,
             }),
-        })), hasPaypalEnabled && (index.h("zonos-text", { type: "smallHeader" }, cart.translate('or'))), index.h("zonos-paypal-payment", { onPaypalSessionDone: ({ detail: { orderId } }) => {
+        }))), index.h("zonos-paypal-payment", { onPaypalSessionDone: ({ detail: { orderId } }) => {
                 this.paypalSessionDone.emit(orderId);
-            }, onPaypalSessionFail: () => this.paypalSessionFailed.emit() })), isTestMode && (index.h("zonos-card", { backgroundColor: "gray-100", borderRadius: 12, class: "zonos--test-cards" }, index.h("zonos-v-stack", { spacing: 16 }, index.h("div", null, index.h("zonos-text", { type: "semiBoldLabel" }, cart.translate('Test cards')), index.h("zonos-text", { textColor: "gray-700" }, cart.translate('Click to copy the card number. Use any future expiration date and three number CVC.'))), index.h("zonos-button", { icon: index.h("zonos-icon", { content: CheckmarkLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4242424242424242') }, cart.translate('Success'), " (****4242)"), index.h("zonos-button", { icon: index.h("zonos-icon", { content: RemoveLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4000000000000002') }, cart.translate('Failure'), " (****0002)")), index.h("zonos-notification", null))))));
+            }, onPaypalSessionFail: () => this.paypalSessionFailed.emit(), style: {
+                display: isPaypalTabSelected ? 'block' : 'none',
+            } })), isTestMode && (index.h("zonos-card", { backgroundColor: "gray-100", borderRadius: 12, class: "zonos--test-cards" }, index.h("zonos-v-stack", { spacing: 16 }, index.h("div", null, index.h("zonos-text", { type: "semiBoldLabel" }, cart.translate('Test cards')), index.h("zonos-text", { textColor: "gray-700" }, cart.translate('Click to copy the card number. Use any future expiration date and three number CVC.'))), index.h("zonos-button", { icon: index.h("zonos-icon", { content: CheckmarkLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4242424242424242') }, cart.translate('Success'), " (****4242)"), index.h("zonos-button", { icon: index.h("zonos-icon", { content: RemoveLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4000000000000002') }, cart.translate('Failure'), " (****0002)")), index.h("zonos-notification", null))))));
     }
 };
 ZonosCheckoutPayment.style = ZonosCheckoutPaymentStyle0;
@@ -576,9 +587,14 @@ const getContrastColor = ({ backgroundColor, color, }) => {
     if (isDarkColor.isDarkColor(color)) {
         return '#ffffff';
     }
-    else {
-        return isDarkColor.tinycolor(color).darken(25).toHexString();
-    }
+    const newDarkerColor = isDarkColor.tinycolor(color).darken(25).toHexString();
+    const newLigherColor = isDarkColor.tinycolor(color).lighten(25).toHexString();
+    // get readibility of the color
+    const isNewColorContrastEnough = paypal.isContrastColor({
+        backgroundColor1: backgroundColor,
+        backgroundColor2: newDarkerColor,
+    });
+    return isNewColorContrastEnough ? newDarkerColor : newLigherColor;
 };
 
 const TabCheckmark = `<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -1069,7 +1085,7 @@ const ChevronUpIcon = `<svg width="25" height="24" viewBox="0 0 25 24" fill="non
 </svg>
 `;
 
-const zonosShippingCss = ".sc-zonos-shipping-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-shipping-h *.sc-zonos-shipping{font-family:var(--font-family, Inter), Inter}.sc-zonos-shipping-h img.sc-zonos-shipping{max-width:100%}.sc-zonos-shipping-h dl.sc-zonos-shipping,.sc-zonos-shipping-h dd.sc-zonos-shipping,.sc-zonos-shipping-h h1.sc-zonos-shipping,.sc-zonos-shipping-h h2.sc-zonos-shipping,.sc-zonos-shipping-h h3.sc-zonos-shipping,.sc-zonos-shipping-h h4.sc-zonos-shipping,.sc-zonos-shipping-h h5.sc-zonos-shipping,.sc-zonos-shipping-h h6.sc-zonos-shipping,.sc-zonos-shipping-h hr.sc-zonos-shipping,.sc-zonos-shipping-h figure.sc-zonos-shipping,.sc-zonos-shipping-h p.sc-zonos-shipping,.sc-zonos-shipping-h pre.sc-zonos-shipping{margin:0}.sc-zonos-shipping-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-shipping-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-shipping-h .zonos--shipping-method-title.sc-zonos-shipping{margin-bottom:-16px}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping{margin-bottom:20px;overflow:auto;padding:5px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:24px;-ms-scroll-chaining:none;overscroll-behavior:contain}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar{width:10px}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-track{background:var(--zonos-elements-gray-50)}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-shipping-h .zonos--error-banner.sc-zonos-shipping{margin-bottom:16px}.sc-zonos-shipping-h .zonos--shipping-method-error.sc-zonos-shipping{margin-top:24px}.sc-zonos-shipping-h zonos-button.sc-zonos-shipping{-webkit-box-shadow:0 0 1px 0 var(--zonos-elements-gray-600);box-shadow:0 0 1px 0 var(--zonos-elements-gray-600)}.sc-zonos-shipping-h .zonos--group-btn.sc-zonos-shipping{position:-webkit-sticky;position:sticky;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;bottom:0;margin-top:12px;background:var(--primary-color, var(--zonos-elements-gray-0))}.sc-zonos-shipping-h .zonos--group-btn.sc-zonos-shipping zonos-button.sc-zonos-shipping{width:100%}.sc-zonos-shipping-h .zonos--shipping-options-wrapper.sc-zonos-shipping{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:24px}.sc-zonos-shipping-h .zonos--shipping-options-collapse-trigger.sc-zonos-shipping{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:24px;-ms-flex-align:center;align-items:center;background:var(--zonos-elements-gray-0);width:100%;border:none;cursor:pointer;position:-webkit-sticky;position:sticky;top:0;z-index:1;-webkit-transition:0.5s all ease;transition:0.5s all ease}.sc-zonos-shipping-h .zonos--shipping-options-collapse-trigger.sc-zonos-shipping zonos-icon.sc-zonos-shipping{-webkit-transition:-webkit-transform 0.3s ease;transition:-webkit-transform 0.3s ease;transition:transform 0.3s ease;transition:transform 0.3s ease, -webkit-transform 0.3s ease}.sc-zonos-shipping-h .zonos--shipping-options-collapse-trigger.collapsed.sc-zonos-shipping{margin-bottom:0}.sc-zonos-shipping-h .zonos--shipping-options-collapse-trigger.collapsed.sc-zonos-shipping zonos-icon.sc-zonos-shipping{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.sc-zonos-shipping-h .zonos--shipping-options-collapse-trigger.sc-zonos-shipping::before,.sc-zonos-shipping-h .zonos--shipping-options-collapse-trigger.sc-zonos-shipping::after{content:\"\";display:block;width:80%;height:1px;background-color:var(--zonos-elements-border-color);-ms-flex-negative:1;flex-shrink:1}.sc-zonos-shipping-h .zonos--shipping-options-collapse-trigger.sc-zonos-shipping .zonos--title-wrapper.sc-zonos-shipping{-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:row;flex-direction:row;gap:8px;-ms-flex-align:center;align-items:center}.sc-zonos-shipping-h .zonos--dap-wrapper.sc-zonos-shipping{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:24px}";
+const zonosShippingCss = ".sc-zonos-shipping-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-shipping-h *.sc-zonos-shipping{font-family:var(--font-family, Inter), Inter}.sc-zonos-shipping-h img.sc-zonos-shipping{max-width:100%}.sc-zonos-shipping-h dl.sc-zonos-shipping,.sc-zonos-shipping-h dd.sc-zonos-shipping,.sc-zonos-shipping-h h1.sc-zonos-shipping,.sc-zonos-shipping-h h2.sc-zonos-shipping,.sc-zonos-shipping-h h3.sc-zonos-shipping,.sc-zonos-shipping-h h4.sc-zonos-shipping,.sc-zonos-shipping-h h5.sc-zonos-shipping,.sc-zonos-shipping-h h6.sc-zonos-shipping,.sc-zonos-shipping-h hr.sc-zonos-shipping,.sc-zonos-shipping-h figure.sc-zonos-shipping,.sc-zonos-shipping-h p.sc-zonos-shipping,.sc-zonos-shipping-h pre.sc-zonos-shipping{margin:0}.sc-zonos-shipping-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-shipping-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-shipping-h .zonos--shipping-method-title.sc-zonos-shipping{margin-bottom:-16px}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping{margin-bottom:20px;overflow:auto;padding:5px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:24px;-ms-scroll-chaining:none;overscroll-behavior:contain}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar{width:10px}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-track{background:var(--zonos-elements-gray-50)}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-shipping-h .zonos--error-banner.sc-zonos-shipping{margin-bottom:16px}.sc-zonos-shipping-h .zonos--shipping-method-error.sc-zonos-shipping{margin-top:24px}.sc-zonos-shipping-h zonos-button.sc-zonos-shipping{-webkit-box-shadow:0 0 1px 0 var(--zonos-elements-gray-600);box-shadow:0 0 1px 0 var(--zonos-elements-gray-600)}.sc-zonos-shipping-h .zonos--group-btn.sc-zonos-shipping{position:-webkit-sticky;position:sticky;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;bottom:0;z-index:1;margin-top:12px;background:var(--primary-color, var(--zonos-elements-gray-0))}.sc-zonos-shipping-h .zonos--group-btn.sc-zonos-shipping zonos-button.sc-zonos-shipping{width:100%}.sc-zonos-shipping-h .zonos--shipping-options-wrapper.sc-zonos-shipping{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:24px}.sc-zonos-shipping-h .zonos--shipping-options-collapse-trigger.sc-zonos-shipping{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:24px;-ms-flex-align:center;align-items:center;background:transparent;width:100%;border:none;cursor:pointer;position:-webkit-sticky;position:sticky;top:0;z-index:1;-webkit-transition:0.5s all ease;transition:0.5s all ease}.sc-zonos-shipping-h .zonos--shipping-options-collapse-trigger.sc-zonos-shipping zonos-icon.sc-zonos-shipping{-webkit-transition:-webkit-transform 0.3s ease;transition:-webkit-transform 0.3s ease;transition:transform 0.3s ease;transition:transform 0.3s ease, -webkit-transform 0.3s ease}.sc-zonos-shipping-h .zonos--shipping-options-collapse-trigger.collapsed.sc-zonos-shipping{margin-bottom:0}.sc-zonos-shipping-h .zonos--shipping-options-collapse-trigger.collapsed.sc-zonos-shipping zonos-icon.sc-zonos-shipping{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.sc-zonos-shipping-h .zonos--shipping-options-collapse-trigger.sc-zonos-shipping::before,.sc-zonos-shipping-h .zonos--shipping-options-collapse-trigger.sc-zonos-shipping::after{content:\"\";display:block;width:80%;height:1px;background-color:var(--zonos-elements-border-color);-ms-flex-negative:1;flex-shrink:1}.sc-zonos-shipping-h .zonos--shipping-options-collapse-trigger.sc-zonos-shipping .zonos--title-wrapper.sc-zonos-shipping{-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:row;flex-direction:row;gap:8px;-ms-flex-align:center;align-items:center}.sc-zonos-shipping-h .zonos--dap-wrapper.sc-zonos-shipping{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:24px}";
 const ZonosShippingStyle0 = zonosShippingCss;
 
 const ZonosShipping = class {
@@ -1212,12 +1228,13 @@ const ZonosShipping = class {
         if (this.showErrorBanner) {
             this.showErrorBanner = !this.handleValidate();
         }
-        return (index.h(index.Host, { key: 'e376545666893a373bca1591083a868892804fb1', class: "zonos--shipping zonos--elements" }, index.h("div", { key: 'f8901d3d8fbeb6a285a7a33b9cea940476413c68', class: "zonos--group" }, index.h("zonos-text", { key: '83e02010c5e11647064ebf28468def163dd3395a', class: "zonos--title", type: "semiBoldSubheader" }, cart.translate('Delivery options')), this.showErrorBanner && !!allServiceLevels.length && (index.h("zonos-banner", { key: 'e65f0ce2e968612bd7c1efeca8309e69a03a8c65', class: "zonos--error-banner", intent: "error" }, cart.translate('No shipping method selected'))), index.h("zonos-text", { key: 'cdae794614c6879477e96de435d5c4e59f469fe9', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, cart.translate('Shipping method')), !allServiceLevels.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.'), class: "zonos--shipping-method-error", intent: "error" })) : (index.h("div", { class: "zonos--shipping-options-wrapper" }, index.h("zonos-shipping-rich-radio", { items: defaultShownServiceLevels, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod }), !defaultShownServiceLevels.length && (index.h("button", { class: classes.classes([
+        return (index.h(index.Host, { key: 'e376545666893a373bca1591083a868892804fb1', class: "zonos--shipping zonos--elements" }, index.h("div", { key: 'f8901d3d8fbeb6a285a7a33b9cea940476413c68', class: "zonos--group" }, index.h("zonos-text", { key: '83e02010c5e11647064ebf28468def163dd3395a', class: "zonos--title", type: "semiBoldSubheader" }, cart.translate('Delivery options')), this.showErrorBanner && !!allServiceLevels.length && (index.h("zonos-banner", { key: 'e65f0ce2e968612bd7c1efeca8309e69a03a8c65', class: "zonos--error-banner", intent: "error" }, cart.translate('No shipping method selected'))), index.h("zonos-text", { key: 'cdae794614c6879477e96de435d5c4e59f469fe9', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, cart.translate('Shipping method')), !allServiceLevels.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.'), class: "zonos--shipping-method-error", intent: "error" })) : (index.h("div", { class: "zonos--shipping-options-wrapper" }, index.h("zonos-shipping-rich-radio", { items: defaultShownServiceLevels, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod }), !!defaultShownServiceLevels.length &&
+            !!this.serviceLevelsDAP.length && (index.h("button", { class: classes.classes([
                 'zonos--shipping-options-collapse-trigger',
                 this.collapsedDAPOptions && 'collapsed',
             ]), onClick: () => {
                 this.collapsedDAPOptions = !this.collapsedDAPOptions;
-            } }, index.h("div", { class: "zonos--title-wrapper" }, index.h("zonos-text", { type: "label" }, `${cart.translate(this.collapsedDAPOptions ? 'Show non prepaid methods' : 'Hide non prepaid methods')} `), index.h("zonos-icon", { content: ChevronUpIcon })))), index.h("zonos-collapse", { collapsed: this.collapsedDAPOptions }, index.h("div", { class: "zonos--dap-wrapper" }, index.h("zonos-banner", { bannerTitle: cart.translate('Duties and taxes will be charged upon delivery.'), intent: "warning" }, cart.translate('You may incur additional fees from the shipping carrier by not prepaying.')), index.h("zonos-shipping-rich-radio", { items: this.serviceLevelsDAP, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod }))))), index.h("div", { key: 'e6ec0a7cc6d2e4930fbca92337670962d2d0cff8', class: "zonos--group-btn" }, index.h("zonos-button", { key: '8586e3fd283e11c1928ccd17e4ef59bf191138e7', backgroundColor: this.submitBtnColor, loading: this.continueLoading || this.isSelecting, onClick: () => this.continueClickHandler(), size: "lg",
+            } }, index.h("div", { class: "zonos--title-wrapper" }, index.h("zonos-text", { type: "label" }, `${cart.translate(this.collapsedDAPOptions ? 'Show non-prepaid options' : 'Hide non-prepaid options')} `), index.h("zonos-icon", { content: ChevronUpIcon })))), index.h("zonos-collapse", { collapsed: this.collapsedDAPOptions }, index.h("div", { class: "zonos--dap-wrapper" }, index.h("zonos-banner", { bannerTitle: cart.translate('Duties and taxes will be charged upon delivery.'), intent: "warning" }, cart.translate('You may incur additional fees from the shipping carrier by not prepaying.')), index.h("zonos-shipping-rich-radio", { items: this.serviceLevelsDAP, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod }))))), index.h("div", { key: '2dded1f7168a16ed6432ea0b147b8ec78fd774a6', class: "zonos--group-btn" }, index.h("zonos-button", { key: '54c05db9336209c34a7c7c518bbdf859e97b51f1', 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-a06f18e2.js');
-const paypal = require('./paypal-078f3cef.js');
+const cart = require('./cart-c5152dfc.js');
+const paypal = require('./paypal-922c7e45.js');
 const zonosStore = require('./zonosStore-a4395972.js');
-const createCustomEvent = require('./createCustomEvent-8d9cf9ac.js');
+const createCustomEvent = require('./createCustomEvent-557f8120.js');
 const isCheckoutMobile = require('./isCheckoutMobile-f491ca7c.js');
 const handleFetch = require('./handleFetch-45e76490.js');
 const classes = require('./classes-b7918f56.js');

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-a06f18e2.js');
+const cart = require('./cart-c5152dfc.js');
 const zonosStore = require('./zonosStore-a4395972.js');
 const handleFetch = require('./handleFetch-45e76490.js');
 require('./isDarkColor-5efc8367.js');

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-a06f18e2.js');
+const cart = require('./cart-c5152dfc.js');
 const zonosStore = require('./zonosStore-a4395972.js');
 const classes = require('./classes-b7918f56.js');
 require('./handleFetch-45e76490.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-a06f18e2.js');
+const cart = require('./cart-c5152dfc.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-a06f18e2.js');
+const cart = require('./cart-c5152dfc.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-a06f18e2.js');
+const cart = require('./cart-c5152dfc.js');
 const classes = require('./classes-b7918f56.js');
 const handleFetch = require('./handleFetch-45e76490.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-a06f18e2.js');
+const cart = require('./cart-c5152dfc.js');
 const zonosStore = require('./zonosStore-a4395972.js');
 const ILanguage = require('./ILanguage-98b04442.js');
 require('./handleFetch-45e76490.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-a06f18e2.js');
+const cart = require('./cart-c5152dfc.js');
 const handleFetch = require('./handleFetch-45e76490.js');
-const paypal = require('./paypal-078f3cef.js');
+const paypal = require('./paypal-922c7e45.js');
 require('./isDarkColor-5efc8367.js');
 require('./getBorderRadius-5a64574c.js');
 
@@ -91,7 +91,7 @@ const ZonosPayment = class {
         // Create and mount the Authentication Element in ${type} mode
         const paymentElement = cart.stripeStore.stripePaymentElement ||
             this.stripeElements.create('payment', {
-                layout: 'accordion',
+                layout: 'tabs',
             });
         const paymentElementContainer = this.el.querySelector('.zonos--payment-component');
         if (!paymentElementContainer) {
@@ -110,7 +110,7 @@ const ZonosPayment = class {
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (index.h(index.Host, { key: 'c461a967d00b2d96fa70aaaf1651b435cdcd84bd', class: "zonos--payment zonos--elements" }, this.titleText && (index.h("zonos-text", { key: '44da1d89ce19f7174cad1214ab9463f0b1174c0d', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), index.h("div", { key: 'b9e3491b48d9ede19a5cdef639bd47e6bf0ba742', class: "zonos--payment-component" }), index.h("div", { key: '578516ce1ca1dc01eebb2268bb5449613e14298f', class: "zonos--payment-paypal-container" })));
+        return (index.h(index.Host, { key: 'cf616ec959fd1b7396ed86b23561f459e0da8722', class: "zonos--payment zonos--elements" }, this.titleText && (index.h("zonos-text", { key: 'e5564db71ba2c0d67d372cb1804d6d462cdf1b33', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), index.h("div", { key: '3ea47f2c0a541590210d181bc73ecb3fb27e7783', class: "zonos--payment-component" }), index.h("div", { key: 'd3a46a127448568caf4309806e88556594075c12', class: "zonos--payment-paypal-container" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -13,11 +13,13 @@ export class ZonosCartItems {
         const nonRestrictedItems = cartStore.items.filter(item => !item.isRestricted);
         return (h(Host, { key: '7bdf8d1972edb2d11669441b3d8ec6643fca1f4b', class: "zonos--cart-items zonos--elements" }, h("table", { key: '1c2fe6d444ea93e40b981a8935d16192bf61928c', class: "zonos--cart-table" }, h("tbody", { key: '84279bea6821077bf117a7a13ca497155276c622' }, nonRestrictedItems.map(item => {
             const itemImg = item.imageUrl;
+            // Split the name by <br> tag
+            const namesWithNewLine = item.name.split(/<br\s*\/*>/);
             return (h("tr", { class: "zonos--cart-item" }, h("td", { class: "zonos--column zonos--cart-item-image" }, itemImg && !this.errorImages.includes(itemImg) ? (h("img", { alt: item.name, onError: () => {
                     this.errorImages = [...this.errorImages, itemImg];
                 }, src: item.imageUrl, style: {
                     'min-width': '40px',
-                }, width: 40 })) : (h("img", { alt: item.name, src: emptyItemImg, width: 40 }))), h("td", { class: "zonos--column zonos--cart-item-name" }, h("zonos-text", { type: "label" }, item.name), h("zonos-text", { textColor: "gray-600", type: "caption" }, translate('Quantity'), ": ", item.quantity)), h("td", { class: "zonos--column zonos--cart-item-price" }, h("zonos-text", { type: "semiBoldLabel", weight: 600 }, currencyFormat({
+                }, width: 40 })) : (h("img", { alt: item.name, src: emptyItemImg, width: 40 }))), h("td", { class: "zonos--column zonos--cart-item-name" }, h("div", null, namesWithNewLine.map(name => (h("zonos-text", { type: "label" }, name)))), h("zonos-text", { textColor: "gray-600", type: "caption" }, translate('Quantity'), ": ", item.quantity)), h("td", { class: "zonos--column zonos--cart-item-price" }, h("zonos-text", { type: "semiBoldLabel", weight: 600 }, currencyFormat({
                 amount: item.amount * rate * item.quantity,
                 currency: cartStore.currency,
             })))));

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

@@ -40,14 +40,14 @@ export class ZonosCartSubtotal {
         };
         const renderLandedCost = () => {
             if (cartStore.landedCostMethod === 'DAP') {
-                return (h(Fragment, null, h("td", { class: "zonos--column zonos--cart-subtotal-title" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Duties, taxes, and fees')), cartStore.dutiesTaxesFeesEstimate
+                return (h(Fragment, null, h("td", { class: "zonos--column zonos--cart-subtotal-title" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Duties, taxes, and fees')), cartStore.dutiesTaxesFeesEstimate !== null
                     ? `${translate('Estimated')} ${currencyFormat({
                         amount: cartStore.dutiesTaxesFeesEstimate,
                         currency: cartStore.currency,
                     })}`
                     : '-'), h("td", { class: "zonos--column zonos--cart-subtotal-price" }, h("div", { class: "zonos--cart-duty-tax-price" }, translate('Due at delivery')))));
             }
-            return (h(Fragment, null, h("td", { class: "zonos--column zonos--cart-subtotal-title" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Duties, taxes, and fees')), h("zonos-text", { class: "zonos--caption", type: "caption" }, translate('Nothing due at the door'))), h("td", { class: "zonos--column zonos--cart-subtotal-price" }, h("div", { class: "zonos--cart-duty-tax-price" }, cartStore.dutiesTaxesFees
+            return (h(Fragment, null, h("td", { class: "zonos--column zonos--cart-subtotal-title" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Duties, taxes, and fees')), h("zonos-text", { class: "zonos--caption", type: "caption" }, translate('Nothing due at the door'))), h("td", { class: "zonos--column zonos--cart-subtotal-price" }, h("div", { class: "zonos--cart-duty-tax-price" }, cartStore.dutiesTaxesFees !== null
                 ? currencyFormat({
                     amount: cartStore.dutiesTaxesFees,
                     currency: cartStore.currency,

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

@@ -42,6 +42,7 @@ export class ZonosCheckoutPayment {
         this.showErrorBanner = false;
     }
     render() {
+        var _a;
         if (!stripeStore.stripeElements) {
             return null;
         }
@@ -51,16 +52,24 @@ export class ZonosCheckoutPayment {
         }
         const isTestMode = getIsTestMode();
         const hasPaypalEnabled = paypalStoreHasPaypalEnabled();
-        return (h(Host, { class: "zonos--checkout-payment zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Payment method')), this.showErrorBanner && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('Missing required fields. Make sure all fields are completed.'))), stripeStore.hasPaymentError && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, translate("We couldn't complete your payment. Please verify the payment details and try again."))), paypalStore.paypalErrorMessage && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, paypalStore.paypalErrorMessage)), h("zonos-payment", null), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
+        const isPaypalTabSelected = ((_a = stripeStore.stripePaymentEventData) === null || _a === void 0 ? void 0 : _a.value.type) === 'external_paypal';
+        return (h(Host, { class: "zonos--checkout-payment zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Payment method')), this.showErrorBanner && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('Missing required fields. Make sure all fields are completed.'))), stripeStore.hasPaymentError && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, translate("We couldn't complete your payment. Please verify the payment details and try again."))), paypalStore.paypalErrorMessage && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, paypalStore.paypalErrorMessage)), h("zonos-payment", null), h("div", { class: "zonos--group-btn" }, !isPaypalTabSelected && (h("zonos-button", { backgroundColor: this.submitBtnColor, loading: this.continueLoading, onClick: () => {
+                if (!hasPaypalEnabled) {
+                    return;
+                }
+                this.continueClickHandler();
+            }, size: "lg",
             // use primary type when on mobile mode
             variant: this.submitBtnType }, translate('Pay [orderTotal]', {
             orderTotal: currencyFormat({
                 amount: cartStore.total,
                 currency: cartStore.currency,
             }),
-        })), hasPaypalEnabled && (h("zonos-text", { type: "smallHeader" }, translate('or'))), h("zonos-paypal-payment", { onPaypalSessionDone: ({ detail: { orderId } }) => {
+        }))), h("zonos-paypal-payment", { onPaypalSessionDone: ({ detail: { orderId } }) => {
                 this.paypalSessionDone.emit(orderId);
-            }, onPaypalSessionFail: () => this.paypalSessionFailed.emit() })), isTestMode && (h("zonos-card", { backgroundColor: "gray-100", borderRadius: 12, class: "zonos--test-cards" }, h("zonos-v-stack", { spacing: 16 }, h("div", null, h("zonos-text", { type: "semiBoldLabel" }, translate('Test cards')), h("zonos-text", { textColor: "gray-700" }, translate('Click to copy the card number. Use any future expiration date and three number CVC.'))), h("zonos-button", { icon: h("zonos-icon", { content: CheckmarkLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4242424242424242') }, translate('Success'), " (****4242)"), h("zonos-button", { icon: h("zonos-icon", { content: RemoveLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4000000000000002') }, translate('Failure'), " (****0002)")), h("zonos-notification", null))))));
+            }, onPaypalSessionFail: () => this.paypalSessionFailed.emit(), style: {
+                display: isPaypalTabSelected ? 'block' : 'none',
+            } })), isTestMode && (h("zonos-card", { backgroundColor: "gray-100", borderRadius: 12, class: "zonos--test-cards" }, h("zonos-v-stack", { spacing: 16 }, h("div", null, h("zonos-text", { type: "semiBoldLabel" }, translate('Test cards')), h("zonos-text", { textColor: "gray-700" }, translate('Click to copy the card number. Use any future expiration date and three number CVC.'))), h("zonos-button", { icon: h("zonos-icon", { content: CheckmarkLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4242424242424242') }, translate('Success'), " (****4242)"), h("zonos-button", { icon: h("zonos-icon", { content: RemoveLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4000000000000002') }, translate('Failure'), " (****0002)")), h("zonos-notification", null))))));
     }
     static get is() { return "zonos-checkout-payment"; }
     static get encapsulation() { return "scoped"; }

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

@@ -77,6 +77,7 @@
   display: flex;
   justify-content: center;
   bottom: 0;
+  z-index: 1;
   margin-top: 12px;
   background: var(--primary-color, var(--zonos-elements-gray-0));
 }
@@ -93,7 +94,7 @@
   flex-direction: row;
   gap: 24px;
   align-items: center;
-  background: var(--zonos-elements-gray-0);
+  background: transparent;
   width: 100%;
   border: none;
   cursor: pointer;

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

@@ -146,12 +146,13 @@ export class ZonosShipping {
         if (this.showErrorBanner) {
             this.showErrorBanner = !this.handleValidate();
         }
-        return (h(Host, { key: 'e376545666893a373bca1591083a868892804fb1', class: "zonos--shipping zonos--elements" }, h("div", { key: 'f8901d3d8fbeb6a285a7a33b9cea940476413c68', class: "zonos--group" }, h("zonos-text", { key: '83e02010c5e11647064ebf28468def163dd3395a', class: "zonos--title", type: "semiBoldSubheader" }, translate('Delivery options')), this.showErrorBanner && !!allServiceLevels.length && (h("zonos-banner", { key: 'e65f0ce2e968612bd7c1efeca8309e69a03a8c65', class: "zonos--error-banner", intent: "error" }, translate('No shipping method selected'))), h("zonos-text", { key: 'cdae794614c6879477e96de435d5c4e59f469fe9', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !allServiceLevels.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 && (h("button", { class: classes([
+        return (h(Host, { key: 'e376545666893a373bca1591083a868892804fb1', class: "zonos--shipping zonos--elements" }, h("div", { key: 'f8901d3d8fbeb6a285a7a33b9cea940476413c68', class: "zonos--group" }, h("zonos-text", { key: '83e02010c5e11647064ebf28468def163dd3395a', class: "zonos--title", type: "semiBoldSubheader" }, translate('Delivery options')), this.showErrorBanner && !!allServiceLevels.length && (h("zonos-banner", { key: 'e65f0ce2e968612bd7c1efeca8309e69a03a8c65', class: "zonos--error-banner", intent: "error" }, translate('No shipping method selected'))), h("zonos-text", { key: 'cdae794614c6879477e96de435d5c4e59f469fe9', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !allServiceLevels.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 methods' : 'Hide non prepaid methods')} `), 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: 'e6ec0a7cc6d2e4930fbca92337670962d2d0cff8', class: "zonos--group-btn" }, h("zonos-button", { key: '8586e3fd283e11c1928ccd17e4ef59bf191138e7', 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: '2dded1f7168a16ed6432ea0b147b8ec78fd774a6', class: "zonos--group-btn" }, h("zonos-button", { key: '54c05db9336209c34a7c7c518bbdf859e97b51f1', 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/store/checkout/cart.js

@@ -13,8 +13,8 @@ const { onChange, reset, state: cartStore, } = createStore(() => ({
     checkoutTimeoutInterval: null,
     currency: 'USD',
     doneSteps: [],
-    dutiesTaxesFees: 0,
-    dutiesTaxesFeesEstimate: 0,
+    dutiesTaxesFees: null,
+    dutiesTaxesFeesEstimate: null,
     error: null,
     exchangeRate: null,
     externalConfirmationPageURL: null,
@@ -138,15 +138,16 @@ const cartStoreUpdateToErrorState = ({ messages, title, }) => {
         title,
     };
 };
-const cartStoreApplySubtotals = (subtotals, dutiesTaxesFeesEstimate) => {
+const cartStoreApplySubtotals = ({ dutiesTaxesFeesEstimate, method, subtotals, }) => {
     // update exchange rate so we can use it to display cart items
     cartStore.exchangeRate = subtotals.exchangeRate;
     cartStore.adjustmentTotal = subtotals.adjustments;
-    cartStore.dutiesTaxesFees = subtotals.landedCostTotal;
+    cartStore.dutiesTaxesFees =
+        method === 'DAP' ? null : subtotals.landedCostTotal;
     cartStore.subtotal = subtotals.items;
     cartStore.total = subtotals.total;
     cartStore.currency = subtotals.presentmentCurrencyCode;
-    cartStore.dutiesTaxesFeesEstimate = dutiesTaxesFeesEstimate || 0;
+    cartStore.dutiesTaxesFeesEstimate = dutiesTaxesFeesEstimate || null;
 };
 /**
  * Detect if there are any items in cart that are not restricted and have positive amount, exclude negative amount items
@@ -170,10 +171,15 @@ const cartStoreSetCheckoutSession = (checkoutSession) => {
     }
 };
 const cartStoreReCalculateTotal = async ({ adjustmentsAmount, cartId, currency, dutiesTaxesFeesEstimate, itemsAmount, landedCostId, }) => {
+    var _a;
     if (landedCostId && cartStore.selectedLandedCost) {
         // update cart total right away if we have landed cost id to avoid order total flickering
         const subtotals = cartStore.selectedLandedCost.subtotals;
-        cartStoreApplySubtotals(subtotals, dutiesTaxesFeesEstimate);
+        cartStoreApplySubtotals({
+            dutiesTaxesFeesEstimate,
+            method: cartStore.landedCostMethod,
+            subtotals,
+        });
         log('Exchange rate updated for cart items (landed cost subtotal)', 'info', cartStore.exchangeRate);
     }
     // update checkout session
@@ -204,7 +210,10 @@ const cartStoreReCalculateTotal = async ({ adjustmentsAmount, cartId, currency,
     if (!landedCostId) {
         // 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);
+        cartStoreApplySubtotals({
+            method: ((_a = json.checkoutSessionUpdate.landedCost) === null || _a === void 0 ? void 0 : _a.method) || 'DDP',
+            subtotals: json.checkoutSessionUpdate.subtotals,
+        });
         log('Exchange rate updated for cart items (checkout session update)', 'info', cartStore.exchangeRate);
     }
     cartStoreSetCheckoutSession(json.checkoutSessionUpdate);
@@ -229,12 +238,13 @@ const cartStoreUpdateSelectedShippingOption = async (selectedShippingOption, lan
         // do nothing if we can't find landed cost for selected shipping option
         return false;
     }
-    // If the quote is DAP, get the estimate from the corresponding DDP quote if available
-    const correspondingDdpQuote = (_b = cartStore.landedCostData) === null || _b === void 0 ? void 0 : _b.find(x => x.landedCost.shipmentRating.id === selectedShippingOption.id &&
-        x.landedCost.method === 'DDP');
-    const dutiesTaxesFeesEstimate = correspondingDdpQuote === null || correspondingDdpQuote === void 0 ? void 0 : correspondingDdpQuote.subtotals.landedCostTotal;
+    // If the quote is DAP, then convert manually.
+    const landedCostAmount = ((_b = selectedLandedCost.landedCost.amountSubtotals) === null || _b === void 0 ? void 0 : _b.landedCostTotal) || 0;
+    // Convert using checkout presentment exchange rate
+    const exchangeRate = selectedLandedCost.subtotals.exchangeRate.rate;
+    const dutiesTaxesFeesEstimate = landedCostAmount * exchangeRate;
     if (dutiesTaxesFeesEstimate) {
-        log(`DAP quote, using estimate from DDP quote: ${dutiesTaxesFeesEstimate}`, 'info');
+        log(`DAP quote, using estimate: ${dutiesTaxesFeesEstimate}`, 'info');
     }
     cartStore.landedCostMethod = selectedLandedCost.landedCost.method || 'DDP';
     // update shipping value and dutiesTaxFees on selectedShippingOption change

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

@@ -66,6 +66,7 @@ const getStripeOptions = ({ clientSecret, overrideBorderRadius, overridePrimaryC
             }),
         },
         clientSecret,
+        externalPaymentMethodTypes: ['external_paypal'],
         locale: localizationStore.selectedLocale,
     };
 };
@@ -242,13 +243,16 @@ const stripeStorePrefetchLandedCost = async (params) => {
         if (subtotals) {
             // prefetch landed cost will not update shipping and taxes since we haven't selected shipping method yet
             cartStoreApplySubtotals({
-                adjustments: subtotals.adjustments,
-                exchangeRate: subtotals.exchangeRate,
-                items: subtotals.items,
-                landedCostTotal: subtotals.landedCostTotal,
-                presentmentCurrencyCode: subtotals.presentmentCurrencyCode,
-                shipping: subtotals.shipping,
-                total: subtotals.total,
+                method: (matchLandedCost === null || matchLandedCost === void 0 ? void 0 : matchLandedCost.landedCost.method) || 'DDP',
+                subtotals: {
+                    adjustments: subtotals.adjustments,
+                    exchangeRate: subtotals.exchangeRate,
+                    items: subtotals.items,
+                    landedCostTotal: subtotals.landedCostTotal,
+                    presentmentCurrencyCode: subtotals.presentmentCurrencyCode,
+                    shipping: subtotals.shipping,
+                    total: subtotals.total,
+                },
             });
         }
     }
@@ -406,7 +410,7 @@ const stripeStoreConfirmPayment = async () => {
  * @returns {boolean} whether or not the checkout session is successfully created
  */
 const stripeStoreInitCheckoutSession = async () => {
-    var _a;
+    var _a, _b;
     const total = cartStore.items.reduce((amount, item) => amount + item.amount * item.quantity, 0);
     if (!total || !localizationStore.targetCurrency) {
         logError('Failed to create checkout session - invalid total or currency');
@@ -434,7 +438,10 @@ const stripeStoreInitCheckoutSession = async () => {
     // update cart store with updated information
     cartStoreSetCheckoutSession(result);
     stripeStore.clientSecret = result.clientSecret;
-    cartStoreApplySubtotals(Object.assign(Object.assign({}, result.subtotals), { landedCostTotal: 0, shipping: 0, total: result.subtotals.items }));
+    cartStoreApplySubtotals({
+        method: ((_b = result.landedCost) === null || _b === void 0 ? void 0 : _b.method) || 'DDP',
+        subtotals: Object.assign(Object.assign({}, result.subtotals), { landedCostTotal: 0, shipping: 0, total: result.subtotals.items }),
+    });
     log('Exchange rate updated for cart items (checkout session create)', 'info', cartStore.exchangeRate);
     log('done-init-checkout-session');
     return true;