@zonos/elements 1.3.230 → 1.3.231

package/dist/cjs/{cart-ad82a680.js → cart-9b519566.js}

@@ -1,8 +1,8 @@
 'use strict';
 
 const zonosStore = require('./zonosStore-5d489c65.js');
-const localization = require('./localization-31e3dfe3.js');
-const translationStore = require('./translationStore-b8b25e9d.js');
+const localization = require('./localization-38af974b.js');
+const translationStore = require('./translationStore-f2d5eae9.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
 const VarianceTest = require('./VarianceTest-bec00ea8.js');
 const isDarkColor = require('./isDarkColor-994c38e4.js');
@@ -75,6 +75,7 @@ const prepCartCalculateLandedCost = (cartId) => {
     const { firstName: billingFirstName, lastName: billingLastName } = extractName({
         name: translatedBillingAddress.name,
     });
+    const checkoutSessionCountry = localization.getOverridenZCountry() || 'US';
     return {
         billingAddress: {
             addressLine1: translatedBillingAddress.line1,
@@ -94,6 +95,9 @@ const prepCartCalculateLandedCost = (cartId) => {
         // Use the first item's currency code
         cartCurrencyCode: (_a = cartStore.items[0]) === null || _a === void 0 ? void 0 : _a.currencyCode,
         cartId,
+        checkoutSessionCountry: checkoutSessionCountry ||
+            localization.localizationStore.selectedCountryCode ||
+            undefined,
         checkoutSessionId: localization.storageStore.checkoutSessionId || '',
         contact: {
             companyName: stripeStore.companyName,

package/dist/cjs/hasInclusivePrice-12605be9.js

@@ -0,0 +1,24 @@
+'use strict';
+
+const localization = require('./localization-38af974b.js');
+
+/**
+ * Since the backend and the frontend are using the same keys,
+ * make sure to not change the key value below since if it changes
+ * and the frontend script is cached, the formula may not work as expected.
+ */
+const DUTY_KEY = 'gkjqw123';
+const TAXES_KEY = 'Kq93wqw3';
+
+const hasInclusivePrice = () => {
+    var _a;
+    return (_a = localization.localizationStore.inclusivePricingConfigurations) === null || _a === void 0 ? void 0 : _a.some(x => {
+        var _a, _b;
+        return ((_a = x.configurations[DUTY_KEY]) === null || _a === void 0 ? void 0 : _a.status) === 'ENABLED' ||
+            ((_b = x.configurations[TAXES_KEY]) === null || _b === void 0 ? void 0 : _b.status) === 'ENABLED';
+    });
+};
+
+exports.DUTY_KEY = DUTY_KEY;
+exports.TAXES_KEY = TAXES_KEY;
+exports.hasInclusivePrice = hasInclusivePrice;

package/dist/cjs/index.cjs.js

@@ -132,7 +132,7 @@ const getZonosQaUrl = () => {
         return null;
     }
     const qaUrl = extractZonosQaUrl(window.location.href);
-    const cdnUrl = "https://v1.3.230.js.zonos.com";
+    const cdnUrl = "https://v1.3.231.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.') ||
@@ -380,10 +380,10 @@ const zonosLoadUrl = (() => {
     return null;
 })();
 const startLoadTime = Date.now();
-const ZONOS_URL = "https://v1.3.230.js.zonos.com";
-const JS_DELIVR_ZONOS_URL = zonosLoadUrl || "https://cdn.jsdelivr.net/npm/@zonos/elements@1.3.230";
-const UNPKG_ZONOS_URL = "https://unpkg.com/@zonos/elements@1.3.230";
-const CDNJS_ZONOS_URL = "https://cdnjs.cloudflare.com/ajax/libs/zonos-elements/1.3.230";
+const ZONOS_URL = "https://v1.3.231.js.zonos.com";
+const JS_DELIVR_ZONOS_URL = zonosLoadUrl || "https://cdn.jsdelivr.net/npm/@zonos/elements@1.3.231";
+const UNPKG_ZONOS_URL = "https://unpkg.com/@zonos/elements@1.3.231";
+const CDNJS_ZONOS_URL = "https://cdnjs.cloudflare.com/ajax/libs/zonos-elements/1.3.231";
 const GOOGLE_FONT_URL = 'https://fonts.googleapis.com';
 const GOOGLE_FONT_REGEX = /^https:\/\/fonts\.googleapis\.com/;
 class Zonos {
@@ -401,7 +401,7 @@ Zonos.iframeLogType = typeof window !== 'undefined'
     ? new URLSearchParams(window.location.search).get('iframeLogType')
     : null;
 Zonos.isBigCommerce = false;
-Zonos.releaseDate = "1754428639201";
+Zonos.releaseDate = "1754944720824";
 Zonos.isLegacyCheckout = false;
 Zonos.startLoadTime = startLoadTime;
 Zonos.domain = typeof window !== 'undefined'
@@ -421,7 +421,7 @@ Zonos.isNpm = true;
 Zonos.zonosQaUrl = null;
 Zonos.zonosQaUrlApi = null;
 Zonos.trackEventLogs = [];
-Zonos.version = `v${"1.3.230"}`;
+Zonos.version = `v${"1.3.231"}`;
 Zonos.modeAlerted = false;
 Zonos.cartData = null;
 Zonos.paypal = null;

package/dist/cjs/{localization-31e3dfe3.js → localization-38af974b.js}

@@ -3,7 +3,7 @@
 const zonosStore = require('./zonosStore-5d489c65.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
 const VarianceTest = require('./VarianceTest-bec00ea8.js');
-const translationStore = require('./translationStore-b8b25e9d.js');
+const translationStore = require('./translationStore-f2d5eae9.js');
 
 /**
  * Check if the response contains at least one available test key that we support
@@ -137,7 +137,7 @@ const getExchangeRate = async ({ country, isGuaranteed, sourceCurrency, targetCu
     return defaultUsExchangeRate;
 };
 
-const getInclusivePricing = async (countryCode) => {
+const getInclusivePriceConfigurations = async (countryCode) => {
     var _a;
     if (!countryCode) {
         return null;
@@ -188,12 +188,20 @@ const getZCountryUrlParam = (urlParams) => {
     return zCountry || fallback || secondFallback;
 };
 
+/**
+ * Retrieve the zCountry from the URL or session storage.
+ */
+const getOverridenZCountry = () => {
+    const currentUrl = new URL(window.location.href);
+    // load and use country from session storage when zCountry query param is not present
+    const countryLoadedSession = window.sessionStorage.getItem('zonos--country');
+    const zCountry = getZCountryUrlParam(currentUrl.searchParams) || countryLoadedSession;
+    return zCountry;
+};
+
 const getLocalization = async () => {
     try {
-        const currentUrl = new URL(window.location.href);
-        // load and use country from session storage when zCountry query param is not present
-        const countryLoadedSession = window.sessionStorage.getItem('zonos--country');
-        const zCountry = getZCountryUrlParam(currentUrl.searchParams) || countryLoadedSession;
+        const zCountry = getOverridenZCountry();
         const searchParams = new URLSearchParams();
         if (zCountry) {
             searchParams.set('zCountry', zCountry);
@@ -228,6 +236,16 @@ const getShippingZones = async () => {
     return shippingZones || null;
 };
 
+const applyInclusiveEffectiveRate = (amount) => {
+    const inclusivePrice = localizationStore.inclusivePricingConfigurations.find(x => x.shipToCountry === localizationStore.selectedCountryCode);
+    if (!inclusivePrice) {
+        return amount;
+    }
+    const effectiveRate = inclusivePrice.effectiveRate;
+    // Just multiply the amount by the effective rate to get the new amount for inclusive pricing
+    return amount * (1 + effectiveRate);
+};
+
 const currencyConvert = (value) => {
     // TODO(potentially): Bring over the code for vanity checks
     const { exchangeRate } = localizationStore;
@@ -391,15 +409,48 @@ const removeBlurCurrency = async () => {
     });
     window.zonosBlurCurrencyOnInitIntervalId = undefined;
 };
-const blurCurrencyElements = ({ currencySelector, }) => {
+/**
+ * This function is used to remove the blur effect from a specific element. (combined with performBlurSpecificElement)
+ * @returns void
+ */
+const removeBlurSpecificElement = async ({ specificSelector, timeoutId, }) => {
+    // Wait a bit to make sure price is fully rendered in DOM
+    await new Promise(resolve => setTimeout(resolve, 500));
+    if (timeoutId) {
+        clearTimeout(timeoutId);
+    }
+    specificSelector.classList.remove(BLUR_CURRENCY_CLASSNAME);
+};
+const blurCurrencyElements = ({ currencySelector, specificSelector, }) => {
     // Do nothing if the currency selector is not provided or blurCurrencyOnInit is false
-    if (!currencySelector) {
+    if (!currencySelector && !specificSelector) {
         return;
     }
-    const currencyElements = document.querySelectorAll([currencySelector].filter(Boolean).join(','));
-    currencyElements.forEach(element => {
-        element.classList.add(BLUR_CURRENCY_CLASSNAME);
+    if (specificSelector) {
+        specificSelector.classList.add(BLUR_CURRENCY_CLASSNAME);
+    }
+    else {
+        const currencyElements = document.querySelectorAll([currencySelector].filter(Boolean).join(','));
+        currencyElements.forEach(element => {
+            element.classList.add(BLUR_CURRENCY_CLASSNAME);
+        });
+    }
+};
+const performBlurSpecificElement = (specificSelector) => {
+    if (typeof window === 'undefined') {
+        return;
+    }
+    blurCurrencyElements({
+        specificSelector,
     });
+    // The blur will be removed as soon as we got the exchange rate back. But if the exchange rate is not available for some reason, the blur effect will be automatically removed after 10 seconds
+    const timeoutId = setTimeout(() => {
+        void removeBlurSpecificElement({
+            specificSelector,
+            timeoutId,
+        });
+    }, BLUR_CURRENCY_DURATION);
+    return timeoutId;
 };
 const performBlurCurrency = () => {
     if (typeof window === 'undefined') {
@@ -449,18 +500,20 @@ const convertCurrency = (element) => {
             // Update currency when the country code changes
             currentCountryValue !== localizationStore.selectedCountryCode)) {
         // Hide the currency until DOM is ready to display the new value
-        performBlurCurrency();
+        const timeoutId = performBlurSpecificElement(element);
+        const appliedInclusivePrice = applyInclusiveEffectiveRate(amount);
         const customizedCurrencyFormat = typeof zonosStore.zonosStore.currencyConverter === 'function' &&
             zonosStore.zonosStore.currencyConverter({
                 convert: currencyConvert,
                 convertAndFormat: currencyConvertAndFormat,
                 currencyCode: localizationStore.targetCurrency,
                 format: (value) => currencyFormat({ amount: value }),
-                originalAmount: amount,
+                originalAmount: appliedInclusivePrice,
                 selector: element,
             });
         // default to the currencyConvertAndFormat if the currencyConverter function does not return a value, or invalid value. This is to make sure we don't break the merchant's price.
-        const observedFormattedValue = customizedCurrencyFormat || currencyConvertAndFormat(amount);
+        const observedFormattedValue = customizedCurrencyFormat ||
+            currencyConvertAndFormat(appliedInclusivePrice);
         if (observedFormattedValue !== element.textContent) {
             // Only set textContent if the value has changed, this is to prevent it redrawing the element if the value is the same
             element.textContent = observedFormattedValue;
@@ -470,9 +523,11 @@ const convertCurrency = (element) => {
         // save the new value to the data-zintl attribute
         element.setAttribute('data-zintl', observedFormattedValue);
         element.setAttribute('data-zcountry-code', localizationStore.selectedCountryCode || '');
+        void removeBlurSpecificElement({
+            specificSelector: element,
+            timeoutId,
+        });
     }
-    // Remove blur effect after the currency is converted
-    void removeBlurCurrency();
 };
 const defaultCurrencyConverter = () => {
     const { currencyElementSelector } = zonosStore.zonosStore.helloSettings;
@@ -534,7 +589,8 @@ const { dispose: localizationDispose, onChange: localizationStoreOnChange, state
     customMessages: [],
     exchangeRate: null,
     helloCountryList: null,
-    inclusivePricing: null,
+    inclusivePricingConfigurations: [],
+    inclusivePricingIsFetching: false,
     isDisabledCountry: true,
     isShippableCountry: false,
     localizationLoaded: false,
@@ -568,6 +624,17 @@ const getFallbackDefaultCountryCode = (allowedCountries) => {
     // Don't check if it is allowed. If it is not allowed it will fallback to Albania (first option).
     return DEFAULT_COUNTRY_CODE_LEGACY_CHECKOUT;
 };
+const refreshInclusivePricingConfigurations = async (countryCode) => {
+    if (!countryCode) {
+        return;
+    }
+    // These requests are only needed for Hello, so we can skip them for legacy checkout
+    localizationStore.inclusivePricingIsFetching = true;
+    const inclusivePricingConfigurations = await getInclusivePriceConfigurations(countryCode);
+    localizationStore.inclusivePricingConfigurations =
+        inclusivePricingConfigurations || [];
+    localizationStore.inclusivePricingIsFetching = false;
+};
 // This recursive function is for users who step away from their computer and come back needing a new exchange rate
 const startExchangeRateTimeout = ({ isGuaranteed, maxAge, }) => {
     if (localizationStore.exchangeRateTimeout) {
@@ -578,12 +645,14 @@ const startExchangeRateTimeout = ({ isGuaranteed, maxAge, }) => {
     const maxAgeToUse = maxAge || defaultMaxAge;
     // Recursively set timeouts to get new exchange rates when the current one expires
     localizationStore.exchangeRateTimeout = setTimeout(async () => {
+        // Refresh inclusive pricing configurations before getting a new exchange rate, so hello can use the new effective rate
+        await refreshInclusivePricingConfigurations(localizationStore.selectedCountryCode);
         const { maxAge: newMaxAge } = await triggerGetExchangeRate(isGuaranteed);
         startExchangeRateTimeout({ isGuaranteed, maxAge: newMaxAge });
     }, maxAgeToUse * 1000);
 };
-const getNewLocalization = async () => {
-    var _a;
+const getNewLocalization = async ({ isInitializing, }) => {
+    var _a, _b;
     VarianceTest.log('get new localization store');
     const { isDisabledCountry, isShippableCountry, selectedCountryCode } = localizationStore;
     if (zonosStore.zonosStore.helloSettings.currencyBehavior === 'DISABLED' ||
@@ -597,14 +666,22 @@ const getNewLocalization = async () => {
     performBlurCurrency();
     const { maxAge } = await triggerGetExchangeRate(isGuaranteed);
     startExchangeRateTimeout({ isGuaranteed, maxAge });
+    if (isInitializing &&
+        ((_a = window.Zonos.cartSettings) === null || _a === void 0 ? void 0 : _a.inclusivePriceConfigurations)) {
+        localizationStore.inclusivePricingConfigurations =
+            ((_b = window.Zonos.cartSettings) === null || _b === void 0 ? void 0 : _b.inclusivePriceConfigurations) || [];
+        void removeBlurCurrency();
+    }
+    // These requests are only needed for Hello, so we can skip them for legacy checkout
     if (!window.Zonos.isLegacyCheckout) {
-        // These requests are only needed for Hello, so we can skip them for legacy checkout
-        localizationStore.countryLandedCost = await getCountryLandedCost(localizationStore.selectedCountryCode);
-        localizationStore.inclusivePricing =
-            ((_a = (await getInclusivePricing(selectedCountryCode))) === null || _a === void 0 ? void 0 : _a.setting) || null;
-        if (localizationStore.inclusivePricing) {
-            VarianceTest.log(`Inclusive price setting found for this country (${selectedCountryCode}) ${JSON.stringify(localizationStore.inclusivePricing, null, 2)}`);
-        }
+        localizationStore.inclusivePricingIsFetching = true;
+        const [countryLandedCost] = await Promise.all([
+            getCountryLandedCost(localizationStore.selectedCountryCode),
+            refreshInclusivePricingConfigurations(localizationStore.selectedCountryCode),
+        ]);
+        localizationStore.countryLandedCost = countryLandedCost;
+        // Remove blur effect after the currency is converted
+        void removeBlurCurrency();
     }
     else {
         VarianceTest.log('Skipping country landed cost and inclusive pricing requests, because this is a legacy checkout');
@@ -649,7 +726,7 @@ const getValidCountryCode = (countryCode) => {
     }
     return countryCode;
 };
-const localizationStoreUpdateSelectedCountryCode = (newSelectedCountryCode) => {
+const localizationStoreUpdateSelectedCountryCode = ({ isInitializing, newSelectedCountryCode, }) => {
     var _a, _b;
     VarianceTest.log(`Updating selected country code to ${newSelectedCountryCode}`);
     const isFirstTime = !localizationStore.selectedCountryCode;
@@ -685,7 +762,7 @@ const localizationStoreUpdateSelectedCountryCode = (newSelectedCountryCode) => {
         return;
     }
     localizationStore.targetCurrency = currencyCode;
-    void getNewLocalization();
+    void getNewLocalization({ isInitializing: isInitializing });
     // Save the country code to session storage for later use
     window.sessionStorage.setItem('zonos--country', selectedCountryCode);
     // Update the URL query param with the new country code
@@ -742,6 +819,7 @@ const localizationStoreUpdateSelectedLocale = (newSelectedLocale) => {
     void getCustomMessages();
 };
 const initLocalizationStore = async () => {
+    var _a;
     // all countries from countries.json, shipping zone and localization
     const [allCountries, shippingZoneCountries, localization] = await Promise.all([getCountries(), getShippingZones(), getLocalization()]);
     // Filter countries to only include countries in the shipping zone
@@ -751,13 +829,18 @@ const initLocalizationStore = async () => {
             ? Object.assign(Object.assign({}, acc), { [countryCode]: countryInfo }) : acc;
     }, {});
     localizationStore.shippingZoneCountries = filteredCountries || null;
+    localizationStore.inclusivePricingConfigurations =
+        ((_a = window.Zonos.cartSettings) === null || _a === void 0 ? void 0 : _a.inclusivePriceConfigurations) || [];
     // Initialize the country list for the hello widget
     initHelloCountryList(allCountries || {});
     const { country, locale } = localization;
     VarianceTest.log(`Country code from localization: ${country}`);
     VarianceTest.log(`Locale from localization: ${locale}`);
     // update selected country code in store
-    localizationStoreUpdateSelectedCountryCode(country);
+    localizationStoreUpdateSelectedCountryCode({
+        isInitializing: true,
+        newSelectedCountryCode: country || null,
+    });
     // use locale from params if it exists, otherwise use locale from localization
     const overrideLocale = getOverrideLocale();
     localizationStoreUpdateSelectedLocale(overrideLocale || locale || 'en');
@@ -771,18 +854,23 @@ const initLocalizationStore = async () => {
     if (!localizationStore.selectedCountryCode &&
         devSites.some(site => window.location.origin.includes(site))) {
         // update selected country code in store
-        localizationStoreUpdateSelectedCountryCode('CA');
+        localizationStoreUpdateSelectedCountryCode({
+            isInitializing: true,
+            newSelectedCountryCode: 'CA',
+        });
     }
     localizationStore.localizationLoaded = true;
 };
 
 exports.VARIANT_TEST_KEY_EXPIRATION = VARIANT_TEST_KEY_EXPIRATION;
+exports.applyInclusiveEffectiveRate = applyInclusiveEffectiveRate;
 exports.currencyConvert = currencyConvert;
 exports.currencyConvertAndFormat = currencyConvertAndFormat;
 exports.currencyDisplay = currencyDisplay;
 exports.currencyFormat = currencyFormat;
 exports.filterValidTests = filterValidTests;
 exports.getFallbackDefaultCountryCode = getFallbackDefaultCountryCode;
+exports.getOverridenZCountry = getOverridenZCountry;
 exports.getZCountryUrlParam = getZCountryUrlParam;
 exports.initLocalizationStore = initLocalizationStore;
 exports.isValidSelector = isValidSelector;

package/dist/cjs/{paypal-88b5e878.js → paypal-e8fa2302.js}

@@ -1,9 +1,9 @@
 'use strict';
 
 const zonosStore = require('./zonosStore-5d489c65.js');
-const cart = require('./cart-ad82a680.js');
-const localization = require('./localization-31e3dfe3.js');
-const translationStore = require('./translationStore-b8b25e9d.js');
+const cart = require('./cart-9b519566.js');
+const localization = require('./localization-38af974b.js');
+const translationStore = require('./translationStore-f2d5eae9.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
 const isDarkColor = require('./isDarkColor-994c38e4.js');
 const VarianceTest = require('./VarianceTest-bec00ea8.js');

package/dist/cjs/{placeTestOrder-6aefbf9c.js → placeTestOrder-6388881f.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const cart = require('./cart-ad82a680.js');
-const localization = require('./localization-31e3dfe3.js');
+const cart = require('./cart-9b519566.js');
+const localization = require('./localization-38af974b.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
 
 const getDisplayCurrency = () => {
@@ -20,12 +20,16 @@ const getDisplayCurrency = () => {
 const renderCheckoutCurrency = ({ amount, isForeign }) => {
     var _a, _b;
     const targetRate = ((_a = cart.cartStore.exchangeRate) === null || _a === void 0 ? void 0 : _a.rate) || 1;
+    // If the amount already in foreign currency, no need to apply the inclusive effective rate since it's already has the inclusive effective rate applied
+    const appliedAmount = isForeign
+        ? amount
+        : localization.applyInclusiveEffectiveRate(amount);
     const presentmentCurrency = cart.cartStore.currency;
     const itemCurrency = (_b = cart.cartStore.items[0]) === null || _b === void 0 ? void 0 : _b.currencyCode;
     // If the item currency is the same as the presentment currency, we can just return the amount in the presentment currency in the same format
     if (itemCurrency === presentmentCurrency) {
         return localization.currencyFormat({
-            amount,
+            amount: appliedAmount,
             currency: presentmentCurrency,
         });
     }
@@ -34,8 +38,8 @@ const renderCheckoutCurrency = ({ amount, isForeign }) => {
     if (isForeign) {
         // Amount is in foreign currency, divide by the rate to convert it to the base currency if displaying in base currency
         const displayAmount = shouldDisplayBaseCurrency
-            ? amount / targetRate
-            : amount;
+            ? appliedAmount / targetRate
+            : appliedAmount;
         return localization.currencyFormat({
             amount: displayAmount,
             currency: displayCurrency,
@@ -43,8 +47,8 @@ const renderCheckoutCurrency = ({ amount, isForeign }) => {
     }
     // Amount is already in base currency, need to multiply rate to convert to foreign currency if display in foreign currency
     const displayAmount = shouldDisplayBaseCurrency
-        ? amount
-        : amount * targetRate;
+        ? appliedAmount
+        : appliedAmount * targetRate;
     return localization.currencyFormat({
         amount: displayAmount,
         currency: displayCurrency,

package/dist/cjs/{renderFallback-87c908ad.js → renderFallback-bb2c4bce.js}

@@ -1,8 +1,8 @@
 'use strict';
 
 const zonosStore = require('./zonosStore-5d489c65.js');
-const cart = require('./cart-ad82a680.js');
-const localization = require('./localization-31e3dfe3.js');
+const cart = require('./cart-9b519566.js');
+const localization = require('./localization-38af974b.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
 const VarianceTest = require('./VarianceTest-bec00ea8.js');
 const index = require('./index-1c710d00.js');