@zonos/elements 1.2.2 → 1.2.4-alpha.1

package/dist/collection/components/utils/addDays.js

@@ -3,9 +3,9 @@
  * @ref https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
  */
 export const addDays = ({ days, formatOptions = { day: 'numeric', weekday: 'long', year: 'numeric' }, }) => {
-  const currentDate = new Date();
-  const futureDate = new Date(currentDate);
-  futureDate.setDate(currentDate.getDate() + days);
-  const formattedDate = new Intl.DateTimeFormat('en-US', formatOptions).format(futureDate);
-  return formattedDate;
+    const currentDate = new Date();
+    const futureDate = new Date(currentDate);
+    futureDate.setDate(currentDate.getDate() + days);
+    const formattedDate = new Intl.DateTimeFormat('en-US', formatOptions).format(futureDate);
+    return formattedDate;
 };

package/dist/collection/components/utils/api/calculateLandedCost.js

@@ -1,15 +1,15 @@
 import { prepCalculateLandedCost } from "./prepCalculateLandedCost";
 import { handleFetch } from "../handleFetch";
 export const calculateLandedCost = async (abortController) => {
-  // request to get landed cost info
-  const url = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/calculate-landed-cost`;
-  const { errors, json } = await handleFetch(url, {
-    body: prepCalculateLandedCost(),
-    method: 'POST',
-    signal: abortController === null || abortController === void 0 ? void 0 : abortController.signal,
-  });
-  if (errors.length || !json) {
-    throw new Error('Failed to calculate landed cost');
-  }
-  return json;
+    // request to get landed cost info
+    const url = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/calculate-landed-cost`;
+    const { errors, json } = await handleFetch(url, {
+        body: prepCalculateLandedCost(),
+        method: 'POST',
+        signal: abortController === null || abortController === void 0 ? void 0 : abortController.signal,
+    });
+    if (errors.length || !json) {
+        throw new Error('Failed to calculate landed cost');
+    }
+    return json;
 };

package/dist/collection/components/utils/api/checkItemRestrictions.js

@@ -1,17 +1,17 @@
 import { handleFetch } from "../handleFetch";
 import { logError } from "../logging/logError";
 export const checkItemRestrictions = async ({ items, shipFrom, shipTo, }) => {
-  var _a;
-  const url = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/check-item-restrictions`;
-  const body = {
-    items,
-    shipFrom,
-    shipTo,
-  };
-  const { errors, json } = await handleFetch(url, { body, method: 'POST' });
-  if (errors.length || !json) {
-    logError(`Error fetching item restrictions: ${(_a = errors.find(Boolean)) === null || _a === void 0 ? void 0 : _a.message}`);
-    return [];
-  }
-  return json.filter(Boolean);
+    var _a;
+    const url = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/check-item-restrictions`;
+    const body = {
+        items,
+        shipFrom,
+        shipTo,
+    };
+    const { errors, json } = await handleFetch(url, { body, method: 'POST' });
+    if (errors.length || !json) {
+        logError(`Error fetching item restrictions: ${(_a = errors.find(Boolean)) === null || _a === void 0 ? void 0 : _a.message}`);
+        return [];
+    }
+    return json.filter(Boolean);
 };

package/dist/collection/components/utils/api/getCountries.js

@@ -1,15 +1,15 @@
 import { handleFetch } from "../handleFetch";
 export const getCountries = async () => {
-  try {
-    const { errors, json } = await handleFetch(`${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/get-countries`, {
-      method: 'GET',
-    });
-    if (errors.length || !json) {
-      return null;
+    try {
+        const { errors, json } = await handleFetch(`${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/get-countries`, {
+            method: 'GET',
+        });
+        if (errors.length || !json) {
+            return null;
+        }
+        return json;
+    }
+    catch (error) {
+        return null;
     }
-    return json;
-  }
-  catch (error) {
-    return null;
-  }
 };

package/dist/collection/components/utils/api/getCountryLandedCost.js

@@ -1,15 +1,15 @@
 import { handleFetch } from "../handleFetch";
 import { logError } from "../logging/logError";
 export const getCountryLandedCost = async (countryCode) => {
-  var _a;
-  if (!countryCode) {
-    return null;
-  }
-  const url = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/country-landed-cost/${countryCode}`;
-  const { errors, json } = await handleFetch(url);
-  if (errors.length || !json) {
-    logError(`Error fetching country landed cost: ${(_a = errors.find(Boolean)) === null || _a === void 0 ? void 0 : _a.message}`);
-    return null;
-  }
-  return json || null;
+    var _a;
+    if (!countryCode) {
+        return null;
+    }
+    const url = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/country-landed-cost/${countryCode}`;
+    const { errors, json } = await handleFetch(url);
+    if (errors.length || !json) {
+        logError(`Error fetching country landed cost: ${(_a = errors.find(Boolean)) === null || _a === void 0 ? void 0 : _a.message}`);
+        return null;
+    }
+    return json || null;
 };

package/dist/collection/components/utils/api/getExchangeRate.js

@@ -1,22 +1,22 @@
 import { handleFetch } from "../handleFetch";
 import { logError } from "../logging/logError";
 export const getExchangeRate = async ({ country, isGuaranteed, sourceCurrency, targetCurrency, }) => {
-  var _a;
-  // If source currency matches target currency (US -> US) and is not a guaranteed rate, return null
-  if (sourceCurrency === targetCurrency && !isGuaranteed) {
+    var _a;
+    // If source currency matches target currency (US -> US) and is not a guaranteed rate, return null
+    if (sourceCurrency === targetCurrency && !isGuaranteed) {
+        return { exchangeRate: null, maxAge: null };
+    }
+    const url = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/exchange-rates?sourceCurrency=${sourceCurrency}&targetCurrency=${targetCurrency}&isGuaranteed=${isGuaranteed}&country=${country}}`;
+    const { errors, json } = await handleFetch(url);
+    if (errors.length || !json) {
+        logError(`Error fetching country landed cost: ${(_a = errors.find(Boolean)) === null || _a === void 0 ? void 0 : _a.message}`);
+        return { exchangeRate: null, maxAge: null };
+    }
+    const { maxAge, rate, targetFormat } = json.exchangeRateCreate;
+    if (rate) {
+        sessionStorage.setItem(country + '_rate', JSON.stringify(rate));
+        const exchangeRate = { rate, targetFormat };
+        return { exchangeRate, maxAge };
+    }
     return { exchangeRate: null, maxAge: null };
-  }
-  const url = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/exchange-rates?sourceCurrency=${sourceCurrency}&targetCurrency=${targetCurrency}&isGuaranteed=${isGuaranteed}&country=${country}}`;
-  const { errors, json } = await handleFetch(url);
-  if (errors.length || !json) {
-    logError(`Error fetching country landed cost: ${(_a = errors.find(Boolean)) === null || _a === void 0 ? void 0 : _a.message}`);
-    return { exchangeRate: null, maxAge: null };
-  }
-  const { maxAge, rate, targetFormat } = json.exchangeRateCreate;
-  if (rate) {
-    sessionStorage.setItem(country + '_rate', JSON.stringify(rate));
-    const exchangeRate = { rate, targetFormat };
-    return { exchangeRate, maxAge };
-  }
-  return { exchangeRate: null, maxAge: null };
 };

package/dist/collection/components/utils/api/getLocaleMessages.js

@@ -1,12 +1,12 @@
 import { handleFetch } from "../handleFetch";
 export const getLocaleMessages = async ({ countryCode, localeTo, storeId, }) => {
-  var _a;
-  const url = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/locale-messages?countryCode=${countryCode}&storeId=${storeId}&localeTo=${localeTo}`;
-  const { errors, json } = await handleFetch(url);
-  if (errors.length || !json) {
-    // eslint-disable-next-line no-console
-    console.error('Error fetching exchange rate', (_a = errors.find(Boolean)) === null || _a === void 0 ? void 0 : _a.message);
-    return [];
-  }
-  return json.locale_countryCodesPage;
+    var _a;
+    const url = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/locale-messages?countryCode=${countryCode}&storeId=${storeId}&localeTo=${localeTo}`;
+    const { errors, json } = await handleFetch(url);
+    if (errors.length || !json) {
+        // eslint-disable-next-line no-console
+        console.error('Error fetching exchange rate', (_a = errors.find(Boolean)) === null || _a === void 0 ? void 0 : _a.message);
+        return [];
+    }
+    return json.locale_countryCodesPage;
 };

package/dist/collection/components/utils/api/getLocalization.js

@@ -1,23 +1,28 @@
 import { handleFetch } from "../handleFetch";
+import { getZCountryUrlParam } from "../hello/getZCountryUrlParam";
 export const getLocalization = async () => {
-  try {
-    const currentUrl = new URL(window.location.href);
-    // load and use country from session storage when zonosCountry query param is not present
-    const countryLoadedSession = window.sessionStorage.getItem('zonos--country');
-    const zonosCountry = currentUrl.searchParams.get('zonosCountry') || countryLoadedSession;
-    const fetchUrl = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/localization${zonosCountry ? `?zonosCountry=${zonosCountry}` : ''}`;
-    const { errors, json } = await handleFetch(fetchUrl, {
-      method: 'GET',
-    });
-    if (errors.length || !json) {
-      return { country: null, locale: null };
+    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 localizationUrl = new URL(`${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/localization`);
+        if (zCountry) {
+            localizationUrl.searchParams.set('zCountry', zCountry);
+        }
+        const fetchUrl = localizationUrl.href;
+        const { errors, json } = await handleFetch(fetchUrl, {
+            method: 'GET',
+        });
+        if (errors.length || !json) {
+            return { country: null, locale: null };
+        }
+        return {
+            country: json.country,
+            locale: json.locale,
+        };
+    }
+    catch (error) {
+        return { country: null, locale: null };
     }
-    return {
-      country: json.country,
-      locale: json.locale,
-    };
-  }
-  catch (error) {
-    return { country: null, locale: null };
-  }
 };

package/dist/collection/components/utils/api/getShippingZones.js

@@ -1,13 +1,13 @@
 import { handleFetch } from "../handleFetch";
 import { logError } from "../logging/logError";
 export const getShippingZones = async () => {
-  var _a, _b;
-  const url = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/shipping-zones`;
-  const { errors, json } = await handleFetch(url);
-  if (errors.length || !json) {
-    logError(`Error fetching shipping zones: ${(_a = errors.find(Boolean)) === null || _a === void 0 ? void 0 : _a.message}`);
-    return null;
-  }
-  const shippingZones = (_b = json === null || json === void 0 ? void 0 : json.shippingZones) === null || _b === void 0 ? void 0 : _b.flatMap(zone => zone === null || zone === void 0 ? void 0 : zone.countryCodes).filter(Boolean);
-  return shippingZones || null;
+    var _a, _b;
+    const url = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/shipping-zones`;
+    const { errors, json } = await handleFetch(url);
+    if (errors.length || !json) {
+        logError(`Error fetching shipping zones: ${(_a = errors.find(Boolean)) === null || _a === void 0 ? void 0 : _a.message}`);
+        return null;
+    }
+    const shippingZones = (_b = json === null || json === void 0 ? void 0 : json.shippingZones) === null || _b === void 0 ? void 0 : _b.flatMap(zone => zone === null || zone === void 0 ? void 0 : zone.countryCodes).filter(Boolean);
+    return shippingZones || null;
 };

package/dist/collection/components/utils/api/getZonosSetting.js

@@ -1,11 +1,11 @@
 import { handleFetch } from "../handleFetch";
 import { logError } from "../logging/logError";
 export const getZonosSetting = async () => {
-  const url = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-setting`;
-  const { errors, json } = await handleFetch(url);
-  if (errors.length) {
-    logError(`Error occurs when getting zonos settings. If this is not an unauthorized error, it will use user setting or default setting`);
-    return { errors, json: null };
-  }
-  return { errors: [], json };
+    const url = `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-setting`;
+    const { errors, json } = await handleFetch(url);
+    if (errors.length) {
+        logError(`Error occurs when getting zonos settings. If this is not an unauthorized error, it will use user setting or default setting`);
+        return { errors, json: null };
+    }
+    return { errors: [], json };
 };

package/dist/collection/components/utils/api/prepCalculateLandedCost.js

@@ -1,30 +1,30 @@
 import { cartStore } from "../../store/checkout/cart";
 import { stripeStore } from "../../store/checkout/stripe";
 export const prepCalculateLandedCost = () => {
-  // maybe we don't need email now for prefetch the landed cost
-  const stripeLinkData = stripeStore.stripeLinkEventData;
-  const stripeAddressData = stripeStore.stripeAddressEventData;
-  if (!stripeAddressData || !stripeAddressData.complete) {
-    throw new Error('Missing stripe address data');
-  }
-  return {
-    checkoutSessionId: cartStore.checkoutSessionId || '',
-    contact: {
-      email: (stripeLinkData === null || stripeLinkData === void 0 ? void 0 : stripeLinkData.value.email) || '',
-      // firstName and lastName should be valid now since stripe only mark
-      // the address as complete when both fields are filled.
-      firstName: stripeAddressData.value.firstName || '',
-      lastName: stripeAddressData.value.lastName || '',
-      phone: stripeAddressData.value.phone || '',
-    },
-    items: cartStore.items.map(item => item),
-    shippingAddress: {
-      addressLine1: stripeAddressData.value.address.line1,
-      addressLine2: stripeAddressData.value.address.line2 || '',
-      city: stripeAddressData.value.address.city,
-      country: stripeAddressData.value.address.country,
-      postalCode: stripeAddressData.value.address.postal_code,
-      state: stripeAddressData.value.address.state,
-    },
-  };
+    // maybe we don't need email now for prefetch the landed cost
+    const stripeLinkData = stripeStore.stripeLinkEventData;
+    const stripeAddressData = stripeStore.stripeAddressEventData;
+    if (!stripeAddressData || !stripeAddressData.complete) {
+        throw new Error('Missing stripe address data');
+    }
+    return {
+        checkoutSessionId: cartStore.checkoutSessionId || '',
+        contact: {
+            email: (stripeLinkData === null || stripeLinkData === void 0 ? void 0 : stripeLinkData.value.email) || '',
+            // firstName and lastName should be valid now since stripe only mark
+            // the address as complete when both fields are filled.
+            firstName: stripeAddressData.value.firstName || '',
+            lastName: stripeAddressData.value.lastName || '',
+            phone: stripeAddressData.value.phone || '',
+        },
+        items: cartStore.items.map(item => item),
+        shippingAddress: {
+            addressLine1: stripeAddressData.value.address.line1,
+            addressLine2: stripeAddressData.value.address.line2 || '',
+            city: stripeAddressData.value.address.city,
+            country: stripeAddressData.value.address.country,
+            postalCode: stripeAddressData.value.address.postal_code,
+            state: stripeAddressData.value.address.state,
+        },
+    };
 };

package/dist/collection/components/utils/checkout/initCheckout.js

@@ -1,22 +1,22 @@
 import { isValidSelector } from "../isValidSelector";
 import { logError } from "../logging/logError";
 const injectCheckoutElement = () => {
-  // append checkout component if doesn't exist
-  const checkoutElement = document.querySelector('zonos-checkout');
-  if (!checkoutElement) {
-    const newCheckoutElement = document.createElement('zonos-checkout');
-    document.body.appendChild(newCheckoutElement);
-  }
+    // append checkout component if doesn't exist
+    const checkoutElement = document.querySelector('zonos-checkout');
+    if (!checkoutElement) {
+        const newCheckoutElement = document.createElement('zonos-checkout');
+        document.body.appendChild(newCheckoutElement);
+    }
 };
-export const initCheckout = async (config) => {
-  if (!config.placeOrderButtonSelector) {
-    // do nothing if checkout button anchor is not set
-    return;
-  }
-  // check if checkout button anchor selector user pass in is valid
-  if (!isValidSelector(config.placeOrderButtonSelector)) {
-    logError(`Selector checkoutButtonAnchor "${config.placeOrderButtonSelector}" is not a valid selector`);
-    return;
-  }
-  injectCheckoutElement();
+export const initCheckout = (config) => {
+    if (!config.placeOrderButtonSelector) {
+        // do nothing if checkout button anchor is not set
+        return;
+    }
+    // check if checkout button anchor selector user pass in is valid
+    if (!isValidSelector(config.placeOrderButtonSelector)) {
+        logError(`Selector checkoutButtonAnchor "${config.placeOrderButtonSelector}" is not a valid selector`);
+        return;
+    }
+    injectCheckoutElement();
 };

package/dist/collection/components/utils/checkout/isCheckoutMobile.js

@@ -1,4 +1,4 @@
 export const checkoutBreakpoint = 890;
 export const isCheckoutMobile = (isMobile) => {
-  return isMobile || window.innerWidth < checkoutBreakpoint;
+    return isMobile || window.innerWidth < checkoutBreakpoint;
 };

package/dist/collection/components/utils/darkenColor.js

@@ -1,7 +1,7 @@
 import tinycolor from "tinycolor2";
 export const darkenColor = ({ amount = 10, color, }) => {
-  // if color is a css variable, don't lighten it
-  return color && !color.includes('var(--')
-    ? tinycolor(color).darken(amount).toString()
-    : undefined;
+    // if color is a css variable, don't lighten it
+    return color && !color.includes('var(--')
+        ? tinycolor(color).darken(amount).toString()
+        : undefined;
 };

package/dist/collection/components/utils/formatCurrency.js

@@ -1,9 +1,9 @@
 export const formatCurrency = ({ amount, currency, showCurrencyText, }) => showCurrencyText
-  ? `${new Intl.NumberFormat('en-US', {
-    currency,
-    style: 'currency',
-  }).format(amount)} ${currency}`
-  : new Intl.NumberFormat('en-US', {
-    currency,
-    style: 'currency',
-  }).format(amount);
+    ? `${new Intl.NumberFormat('en-US', {
+        currency,
+        style: 'currency',
+    }).format(amount)} ${currency}`
+    : new Intl.NumberFormat('en-US', {
+        currency,
+        style: 'currency',
+    }).format(amount);

package/dist/collection/components/utils/formatDate.js

@@ -1,4 +1,4 @@
 export const formatDate = ({ date, formatOptions = { day: 'numeric', weekday: 'long', year: 'numeric' }, }) => {
-  // format date to Thursday 3, 2023
-  return new Intl.DateTimeFormat('en-US', formatOptions).format(date);
+    // format date to Thursday 3, 2023
+    return new Intl.DateTimeFormat('en-US', formatOptions).format(date);
 };

package/dist/collection/components/utils/getBorderRadius.js

@@ -5,9 +5,9 @@ import { zonosStore } from "../store/zonosStore";
  * @returns
  */
 export const getBorderRadius = (overrideBorderStyle) => {
-  if (overrideBorderStyle) {
-    // If the override is set, use that, otherwise use the default radius style
-    return overrideBorderStyle === 'SHARP' ? '0px' : '10px';
-  }
-  return zonosStore.appearance.style === 'SHARP' ? '0px' : '10px';
+    if (overrideBorderStyle) {
+        // If the override is set, use that, otherwise use the default radius style
+        return overrideBorderStyle === 'SHARP' ? '0px' : '10px';
+    }
+    return zonosStore.appearance.style === 'SHARP' ? '0px' : '10px';
 };

package/dist/collection/components/utils/getButtonTheme.js

@@ -5,12 +5,12 @@ import { isDarkColor } from "./isDarkColor";
  * Get theme for button text based on background color
  */
 export const getButtonTheme = (overrideBackground) => {
-  // use override background if it exists, otherwise use color from setting
-  const background = overrideBackground || zonosStore.appearance.colorSecondary;
-  const backgroundColor = background && isColorVariable(background)
-    ? `var(--amino-${background})`
-    : background;
-  // determine theme based on background color (to change button text color if needed)
-  const buttonTheme = backgroundColor && isDarkColor(backgroundColor) ? 'DARK' : 'LIGHT';
-  return buttonTheme;
+    // use override background if it exists, otherwise use color from setting
+    const background = overrideBackground || zonosStore.appearance.colorSecondary;
+    const backgroundColor = background && isColorVariable(background)
+        ? `var(--amino-${background})`
+        : background;
+    // determine theme based on background color (to change button text color if needed)
+    const buttonTheme = backgroundColor && isDarkColor(backgroundColor) ? 'DARK' : 'LIGHT';
+    return buttonTheme;
 };

package/dist/collection/components/utils/getDaysDifference.js

@@ -1,6 +1,6 @@
 export const getDaysDifference = (targetDate) => {
-  const currentDate = new Date();
-  const timeDifference = targetDate.getTime() - currentDate.getTime();
-  const daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24)); // Convert milliseconds to days
-  return daysDifference;
+    const currentDate = new Date();
+    const timeDifference = targetDate.getTime() - currentDate.getTime();
+    const daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24)); // Convert milliseconds to days
+    return daysDifference;
 };