@zonos/elements 1.3.83 → 1.3.85

package/dist/cjs/{createCustomEvent-65331eae.js → createCustomEvent-354c8e63.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const cart = require('./cart-4de3faca.js');
+const cart = require('./cart-fc426d98.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.83.js.zonos.com";
+    const cdnUrl = "https://v1.3.85.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.83.js.zonos.com";
-const JS_DELIVR_ZONOS_URL = zonosLoadUrl || "https://cdn.jsdelivr.net/npm/@zonos/elements@1.3.83";
-const UNPKG_ZONOS_URL = "https://unpkg.com/@zonos/elements@1.3.83";
-const CDNJS_ZONOS_URL = "https://cdnjs.cloudflare.com/ajax/libs/zonos-elements/1.3.83";
+const ZONOS_URL = "https://v1.3.85.js.zonos.com";
+const JS_DELIVR_ZONOS_URL = zonosLoadUrl || "https://cdn.jsdelivr.net/npm/@zonos/elements@1.3.85";
+const UNPKG_ZONOS_URL = "https://unpkg.com/@zonos/elements@1.3.85";
+const CDNJS_ZONOS_URL = "https://cdnjs.cloudflare.com/ajax/libs/zonos-elements/1.3.85";
 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 = "1728684691259";
+Zonos.releaseDate = "1728761799096";
 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.83"}`;
+Zonos.version = `v${"1.3.85"}`;
 Zonos.modeAlerted = false;
 Zonos.cartData = null;
 Zonos.paypal = null;

package/dist/cjs/{paypal-370b3a10.js → paypal-1fe5ed0c.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const zonosStore = require('./zonosStore-a4395972.js');
-const cart = require('./cart-4de3faca.js');
+const cart = require('./cart-fc426d98.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-4de3faca.js');
+const cart = require('./cart-fc426d98.js');
 const isCheckoutMobile = require('./isCheckoutMobile-f491ca7c.js');
 const handleFetch = require('./handleFetch-45e76490.js');
 const containsNonLatinChars = require('./containsNonLatinChars-2be5129b.js');
@@ -84,7 +84,7 @@ const ZonosAddress = class {
             defaultValues: {
                 address: Object.assign(Object.assign({}, stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address), { country: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.country) ||
                         cart.localizationStore.selectedCountryCode ||
-                        'AL' }),
+                        cart.DEFAULT_COUNTRY_CODE_LEGACY_CHECKOUT }),
                 firstName: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.firstName,
                 lastName: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.lastName,
                 phone: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.phone,
@@ -147,7 +147,7 @@ const ZonosAddress = 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: 'c8d513bc9890590db622ec8f26d4e9b0694c33e5', class: "zonos--address zonos--elements" }, index.h("zonos-text", { key: '775b454620360bed4186a23371bc3867a5745155', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), index.h("div", { key: '4844b5379a33a3668cae0036c1a952cd42229efb', class: "zonos--address-component" })));
+        return (index.h(index.Host, { key: 'aa9a569b302099681082cd4219b553f9c70842ea', class: "zonos--address zonos--elements" }, index.h("zonos-text", { key: '60050e9f8f0b80dde9acc9ffbd868333fdabf2b3', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), index.h("div", { key: '5af7ee4f23d75fc877cdde7babe0edaefef14da8', class: "zonos--address-component" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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-4de3faca.js');
+const cart = require('./cart-fc426d98.js');
 const classes = require('./classes-b7918f56.js');
-const paypal = require('./paypal-370b3a10.js');
+const paypal = require('./paypal-1fe5ed0c.js');
 const zonosStore = require('./zonosStore-a4395972.js');
-const createCustomEvent = require('./createCustomEvent-65331eae.js');
+const createCustomEvent = require('./createCustomEvent-354c8e63.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,
             })))));
@@ -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 }), (!!this.serviceLevelsDAP.length ||
+            !defaultShownServiceLevels.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: '43619b89b2274e38683ade860402ff026ddcdd9a', class: "zonos--group-btn" }, index.h("zonos-button", { key: 'fff71598501c5a83ea415a72f3bc64ee004cbeae', 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: 'fdc7807bc26ec718cb51e23dbb9e4ccf286e6d91', class: "zonos--group-btn" }, index.h("zonos-button", { key: '7f1f43317f4734333df48bd244d0bf44f4cd252e', 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-4de3faca.js');
-const paypal = require('./paypal-370b3a10.js');
+const cart = require('./cart-fc426d98.js');
+const paypal = require('./paypal-1fe5ed0c.js');
 const zonosStore = require('./zonosStore-a4395972.js');
-const createCustomEvent = require('./createCustomEvent-65331eae.js');
+const createCustomEvent = require('./createCustomEvent-354c8e63.js');
 const isCheckoutMobile = require('./isCheckoutMobile-f491ca7c.js');
 const handleFetch = require('./handleFetch-45e76490.js');
 const classes = require('./classes-b7918f56.js');
@@ -45,7 +45,6 @@ const isDisabledCountry = (showLog = true) => {
         return true;
     }
     if (cart.localizationStore.isDisabledCountry) {
-        document.dispatchEvent(createCustomEvent.createCustomEvent('legacyCheckoutError', 'Unable to initiate checkout process in a country that has been disabled for checkout'));
         if (showLog) {
             handleFetch.log(`Checkout: disabled country`);
         }
@@ -60,7 +59,6 @@ const isShippableCountry = (showLog = true) => {
     }
     // if localization is loaded and the localization is not a shippable country, keep the original click event
     if (!cart.localizationStore.isShippableCountry) {
-        document.dispatchEvent(createCustomEvent.createCustomEvent('legacyCheckoutError', 'Unable to initiate checkout process in a country where shipping is not available'));
         if (showLog) {
             handleFetch.log(`Checkout: not shippable country`);
         }
@@ -354,7 +352,9 @@ const ZonosCheckout = class {
             });
             button.addEventListener('click', async (e) => {
                 var _a;
-                if (!isShippableCountry() || isDisabledCountry()) {
+                // Allow no country set for legacy facades. Otherwise enforce it being a shippable country and not disabled.
+                if (!window.Zonos.isLegacyCheckout &&
+                    (!isShippableCountry() || isDisabledCountry())) {
                     return;
                 }
                 e.preventDefault();
@@ -438,7 +438,9 @@ const ZonosCheckout = class {
         const legacyShippingInfo = {
             country: 
             // fallback to selected country code if country is not provided
-            urlParams.get('country') || cart.localizationStore.selectedCountryCode,
+            urlParams.get('country') ||
+                cart.localizationStore.selectedCountryCode ||
+                cart.DEFAULT_COUNTRY_CODE_LEGACY_CHECKOUT,
             customerAddress1: urlParams.get('customerAddress1'),
             customerAddress2: urlParams.get('customerAddress2'),
             customerCity: urlParams.get('customerCity'),

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-4de3faca.js');
+const cart = require('./cart-fc426d98.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-4de3faca.js');
+const cart = require('./cart-fc426d98.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-4de3faca.js');
+const cart = require('./cart-fc426d98.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-4de3faca.js');
+const cart = require('./cart-fc426d98.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-4de3faca.js');
+const cart = require('./cart-fc426d98.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-4de3faca.js');
+const cart = require('./cart-fc426d98.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-4de3faca.js');
+const cart = require('./cart-fc426d98.js');
 const handleFetch = require('./handleFetch-45e76490.js');
-const paypal = require('./paypal-370b3a10.js');
+const paypal = require('./paypal-1fe5ed0c.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-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-checkout.js

@@ -2,7 +2,7 @@ import { Fragment, h, Host, } from "@stencil/core";
 import { cartStore, cartStoreClearCheckoutInterval, cartStoreNextStep, cartStoreReset, cartStoreResetTabItems, cartStoreSetCheckoutSession, cartStoreStartCheckoutInterval, cartStoreUpdateItems, cartStoreUpdateToErrorState, } from "../../store/checkout/cart";
 import { paypalInitScript } from "../../store/checkout/paypal";
 import { initStripeElements, stripeStore, stripeStoreCleanupDomesticShippingSession, stripeStoreConfirmPayment, stripeStoreHandleInventoryCheck, stripeStoreInitCheckoutSession, stripeStorePrefetchLandedCost, stripeStoreReset, } from "../../store/checkout/stripe";
-import { localizationStore, localizationStoreOnUpdate, } from "../../store/hello/localization";
+import { DEFAULT_COUNTRY_CODE_LEGACY_CHECKOUT, localizationStore, localizationStoreOnUpdate, } from "../../store/hello/localization";
 import { translate } from "../../store/translationStore";
 import { getZonosStoreTheme, zonosStore, } from "../../store/zonosStore";
 import { buildCartItemsByTempCart } from "../../utils/api/buildCartItemsByTempCart";
@@ -198,7 +198,9 @@ export class ZonosCheckout {
             });
             button.addEventListener('click', async (e) => {
                 var _a;
-                if (!isShippableCountry() || isDisabledCountry()) {
+                // Allow no country set for legacy facades. Otherwise enforce it being a shippable country and not disabled.
+                if (!window.Zonos.isLegacyCheckout &&
+                    (!isShippableCountry() || isDisabledCountry())) {
                     return;
                 }
                 e.preventDefault();
@@ -282,7 +284,9 @@ export class ZonosCheckout {
         const legacyShippingInfo = {
             country: 
             // fallback to selected country code if country is not provided
-            urlParams.get('country') || localizationStore.selectedCountryCode,
+            urlParams.get('country') ||
+                localizationStore.selectedCountryCode ||
+                DEFAULT_COUNTRY_CODE_LEGACY_CHECKOUT,
             customerAddress1: urlParams.get('customerAddress1'),
             customerAddress2: urlParams.get('customerAddress2'),
             customerCity: urlParams.get('customerCity'),

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 }), (!!this.serviceLevelsDAP.length ||
+            !defaultShownServiceLevels.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: '43619b89b2274e38683ade860402ff026ddcdd9a', class: "zonos--group-btn" }, h("zonos-button", { key: 'fff71598501c5a83ea415a72f3bc64ee004cbeae', 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: 'fdc7807bc26ec718cb51e23dbb9e4ccf286e6d91', class: "zonos--group-btn" }, h("zonos-button", { key: '7f1f43317f4734333df48bd244d0bf44f4cd252e', 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

@@ -310,7 +310,6 @@ const cartStoreUpdateItems = async ({ adjustments, cartItems, }) => {
         adjustmentsAmount: adjustmentTotal,
         cartId: window.Zonos.cartId,
         currency: currency,
-        // TEMP: test
         dutiesTaxesFeesEstimate: 0,
         itemsAmount: total,
     });

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

@@ -1,6 +1,6 @@
 import { createStore } from "@stencil/store";
 import { cartStore, cartStoreApplySubtotals, cartStoreCheckItemRestrictions, cartStorePreviousStep, cartStoreResetCartItems, cartStoreSetCheckoutSession, cartStoreUpdateSelectedShippingOption, } from "./cart";
-import { localizationStore } from "../hello/localization";
+import { DEFAULT_COUNTRY_CODE_LEGACY_CHECKOUT, localizationStore, } from "../hello/localization";
 import { translate } from "../translationStore";
 import { zonosStore } from "../zonosStore";
 import { calculateLandedCostNormalized } from "../../utils/api/calculateLandedCostNormaliz";
@@ -66,6 +66,7 @@ const getStripeOptions = ({ clientSecret, overrideBorderRadius, overridePrimaryC
             }),
         },
         clientSecret,
+        externalPaymentMethodTypes: ['external_paypal'],
         locale: localizationStore.selectedLocale,
     };
 };
@@ -420,7 +421,8 @@ const stripeStoreInitCheckoutSession = async () => {
             currency: ((_a = cartStore.items.find(Boolean)) === null || _a === void 0 ? void 0 : _a.currencyCode) || '',
             itemsAmount: total,
             metadata: [{ key: 'language', value: localizationStore.selectedLocale }],
-            presentmentCountryCode: localizationStore.selectedCountryCode || null,
+            presentmentCountryCode: localizationStore.selectedCountryCode ||
+                DEFAULT_COUNTRY_CODE_LEGACY_CHECKOUT,
         },
         method: 'POST',
     });

package/dist/collection/components/store/hello/localization.js

@@ -15,6 +15,10 @@ import { getCurrencyCode } from "../../utils/hello/currencyConversion/getCurrenc
 import { setZCountryUrlParam } from "../../utils/hello/setZCountryUrlParam";
 import { log } from "../../utils/logging/log";
 import { logError } from "../../utils/logging/logError";
+/**
+ * CHORE: This is mostly for legacy checkout as the country param is not guaranteed.
+ */
+export const DEFAULT_COUNTRY_CODE_LEGACY_CHECKOUT = 'CA';
 const { dispose: localizationDispose, onChange: localizationStoreOnUpdate, state: localizationStore, } = createStore({
     countryLandedCost: null,
     customMessages: [],
@@ -128,7 +132,7 @@ const localizationStoreUpdateSelectedCountryCode = (newSelectedCountryCode) => {
     // update shippable country
     localizationStore.isShippableCountry = isShippableCountry;
     log(`${localizationStore.selectedCountryCode} is a shippable country: ${localizationStore.isShippableCountry}`);
-    const isDisabledCountry = !selectedCountryCode ||
+    const isDisabledCountry = !!selectedCountryCode &&
         zonosStore.disabledCountries.includes(selectedCountryCode);
     localizationStore.isDisabledCountry = isDisabledCountry;
     log(`${localizationStore.selectedCountryCode} is a disabled country: ${localizationStore.isDisabledCountry}`);
@@ -206,7 +210,7 @@ const initLocalizationStore = async () => {
     if (!localizationStore.selectedCountryCode &&
         devSites.some(site => window.location.origin.includes(site))) {
         // update selected country code in store
-        localizationStoreUpdateSelectedCountryCode('US');
+        localizationStoreUpdateSelectedCountryCode('CA');
     }
     localizationStore.localizationLoaded = true;
 };