@zonos/elements 1.2.3 → 1.2.4-alpha.10

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

@@ -1,88 +1,118 @@
 var __rest = (this && this.__rest) || function (s, e) {
-  var t = {};
-  for (var p in s)
-    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-      t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function")
-    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-        t[p[i]] = s[p[i]];
-    }
-  return t;
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
 };
 const getResponseBody = async ({ response, shouldLog = true, shouldThrow = false, }) => {
-  try {
-    const json = await response.json();
-    return json;
-  }
-  catch (e) {
-    if (shouldThrow) {
-      throw e;
+    try {
+        const json = await response.json();
+        return json;
     }
-    if (shouldLog) {
-      // eslint-disable-next-line
-      console.error(e);
+    catch (e) {
+        if (shouldThrow) {
+            throw e;
+        }
+        if (shouldLog) {
+            // eslint-disable-next-line
+            console.error(e);
+        }
+        return null;
     }
-    return null;
-  }
 };
 const handleRequest = async (url, options) => {
-  let response;
-  try {
-    response = await fetch(url, options);
-  }
-  catch (e) {
-    if (e instanceof Error) {
-      return {
-        errors: [{ message: e.message, type: 'unknown' }],
-        json: null,
-        response: null,
-      };
+    let response;
+    try {
+        response = await fetch(url, options);
+    }
+    catch (e) {
+        if (e instanceof Error) {
+            return {
+                errors: [{ message: e.message, type: 'unknown' }],
+                json: null,
+                response: null,
+            };
+        }
+        const message = 'Fail to fetch';
+        return {
+            errors: [{ message, type: 'unknown' }],
+            json: null,
+            response: null,
+        };
+    }
+    const zonosMode = response.headers.get('Zonos-Mode');
+    const usingZonosPreview = window.Zonos.zonosQaUrl;
+    // We only want to alert once if the user is in preview mode and it's also using production environment
+    if (!window.Zonos.modeAlerted && zonosMode && usingZonosPreview) {
+        if (zonosMode === 'production') {
+            alert(`Please be aware that you are currently operating in the production environment. Any interactions with the customer store, including payments, will be processed as real transactions!`);
+        }
+        if (zonosMode === 'test') {
+            alert(`For testing payments, you can utilize the test payment information provided at this link: https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements#web-test-the-integration`);
+        }
+        window.Zonos.modeAlerted = true;
+    }
+    if (response.ok) {
+        const data = await getResponseBody({ response });
+        return {
+            errors: [],
+            json: data,
+            response,
+        };
+    }
+    const status = response.status.toString();
+    try {
+        const data = await getResponseBody({
+            response,
+            shouldThrow: true,
+        });
+        const message = JSON.stringify(data);
+        return {
+            errors: [{ message: `${status}: ${message}`, type: status }],
+            json: null,
+            response,
+        };
+    }
+    catch (e) {
+        const message = 'Unknown error';
+        return {
+            errors: [{ message: `${status}: ${message}`, type: status }],
+            json: null,
+            response: null,
+        };
     }
-    const message = 'Fail to fetch';
-    return {
-      errors: [{ message, type: 'unknown' }],
-      json: null,
-      response: null,
-    };
-  }
-  if (response.ok) {
-    const data = await getResponseBody({ response });
-    return {
-      errors: [],
-      json: data,
-      response,
-    };
-  }
-  const status = response.status.toString();
-  try {
-    const data = await getResponseBody({
-      response,
-      shouldThrow: true,
-    });
-    const message = JSON.stringify(data);
-    return {
-      errors: [{ message: `${status}: ${message}`, type: status }],
-      json: null,
-      response,
-    };
-  }
-  catch (e) {
-    const message = 'Unknown error';
-    return {
-      errors: [{ message: `${status}: ${message}`, type: status }],
-      json: null,
-      response: null,
-    };
-  }
 };
+function encodeString(text) {
+    try {
+        // encode the string, remove the "=" at the end of the encoded string
+        const encodedString = btoa(text).replace(/=/g, '');
+        return encodedString;
+    }
+    catch (error) {
+        // return the reverse string if the encoding failed
+        return text
+            .replace(/[^A-Za-z0-9]/g, '')
+            .split('')
+            .reverse()
+            .join('');
+    }
+}
 export const handleFetch = async (url, _opts) => {
-  const opts = __rest(_opts || {}, []);
-  const body = opts.body ? JSON.stringify(opts.body) : undefined;
-  const method = opts.method || 'GET';
-  // headers content type
-  const headers = Object.assign({ 'Content-Type': 'application/json', 'Zonos-Is-BigCommerce': window.Zonos.isBigCommerce.toString(), 'Zonos-Referer': window.location.hostname, 'Zonos-Version': window.Zonos.version, credentialtoken: window.Zonos.zonosApiKey }, opts.headers);
-  const options = Object.assign(Object.assign({}, opts), { body: method === 'GET' ? undefined : body, headers,
-    method });
-  return handleRequest(url, options);
+    const opts = __rest(_opts || {}, []);
+    const body = opts.body ? JSON.stringify(opts.body) : undefined;
+    const method = opts.method || 'GET';
+    // adding credentialtoken to the url so that the request will be cached differently for each store
+    const modifiedUrl = new URL(url);
+    modifiedUrl.searchParams.set('zToken', encodeString(window.location.hostname));
+    // headers content type
+    const headers = Object.assign({ 'Content-Type': 'application/json', 'Zonos-Is-BigCommerce': window.Zonos.isBigCommerce.toString(), 'Zonos-Referer': window.location.hostname, 'Zonos-Version': window.Zonos.version, credentialtoken: window.Zonos.zonosApiKey }, opts.headers);
+    const options = Object.assign(Object.assign({}, opts), { body: method === 'GET' ? undefined : body, headers,
+        method });
+    return handleRequest(modifiedUrl.toString(), options);
 };

package/dist/collection/components/utils/hello/currencyConversion/currencyConvert.js

@@ -1,12 +1,12 @@
 import { localizationStore } from "../../../store/hello/localization";
 export const currencyConvert = (value) => {
-  // TODO(potentially): Bring over the code for vanity checks
-  const { exchangeRate } = localizationStore;
-  if (!exchangeRate || !value || isNaN(value)) {
-    return value;
-  }
-  const minimumFractionDigits = (exchangeRate === null || exchangeRate === void 0 ? void 0 : exchangeRate.targetFormat.scale) || 2;
-  const convertedValue = value * exchangeRate.rate;
-  const fixedValue = convertedValue.toFixed(minimumFractionDigits);
-  return Number(fixedValue);
+    // TODO(potentially): Bring over the code for vanity checks
+    const { exchangeRate } = localizationStore;
+    if (!exchangeRate || !value || isNaN(value)) {
+        return value;
+    }
+    const minimumFractionDigits = (exchangeRate === null || exchangeRate === void 0 ? void 0 : exchangeRate.targetFormat.scale) || 2;
+    const convertedValue = value * exchangeRate.rate;
+    const fixedValue = convertedValue.toFixed(minimumFractionDigits);
+    return Number(fixedValue);
 };

package/dist/collection/components/utils/hello/currencyConversion/currencyConvertAndFormat.js

@@ -1,7 +1,7 @@
 import { currencyConvert } from "./currencyConvert";
 import { currencyFormat } from "./currencyFormat";
 export const currencyConvertAndFormat = (value) => {
-  const convertedValue = currencyConvert(value);
-  const formattedValue = currencyFormat(convertedValue);
-  return formattedValue;
+    const convertedValue = currencyConvert(value);
+    const formattedValue = currencyFormat(convertedValue);
+    return formattedValue;
 };

package/dist/collection/components/utils/hello/currencyConversion/currencyDisplay.js

@@ -4,14 +4,14 @@ import { currencyConvertAndFormat } from "./currencyConvertAndFormat";
 import { currencyFormat } from "./currencyFormat";
 import { defaultCurrencyConverter } from "./defaultCurrencyConverter";
 export const currencyDisplay = () => {
-  if (zonosStore.helloSettings.currencyBehavior === 'DISABLED') {
-    return;
-  }
-  const { currencyElementSelector } = zonosStore.helloSettings;
-  if (zonosStore.currencyConverter) {
-    zonosStore.currencyConverter(currencyConvertAndFormat, currencyConvert, currencyFormat, currencyElementSelector);
-  }
-  else {
-    defaultCurrencyConverter();
-  }
+    if (zonosStore.helloSettings.currencyBehavior === 'DISABLED') {
+        return;
+    }
+    const { currencyElementSelector } = zonosStore.helloSettings;
+    if (zonosStore.currencyConverter) {
+        zonosStore.currencyConverter(currencyConvertAndFormat, currencyConvert, currencyFormat, currencyElementSelector);
+    }
+    else {
+        defaultCurrencyConverter();
+    }
 };

package/dist/collection/components/utils/hello/currencyConversion/currencyFormat.js

@@ -1,32 +1,32 @@
 import { localizationStore } from "../../../store/hello/localization";
 export const currencyFormat = (value) => {
-  if (!value || isNaN(value)) {
-    return '';
-  }
-  const { exchangeRate } = localizationStore;
-  const { targetFormat } = exchangeRate || {};
-  if (!targetFormat) {
-    return value.toString();
-  }
-  const minimumFractionDigits = (exchangeRate === null || exchangeRate === void 0 ? void 0 : exchangeRate.targetFormat.scale) || 2;
-  // browsers can autoformat the currency based on the users language setting
-  // unless the browser is Internet Explorer, because Internet Explorer is stupid
-  const isIE = window.navigator.userAgent.indexOf('MSIE ') !== -1;
-  const numberFormatExists = typeof Intl === 'object' && Intl && typeof Intl.NumberFormat === 'function';
-  if (!isIE && numberFormatExists) {
-    return new Intl.NumberFormat(window.navigator.language, {
-      currency: targetFormat.currencyCode,
-      minimumFractionDigits: minimumFractionDigits,
-      style: 'currency',
-    }).format(value);
-  }
-  else {
-    let formattedNumber = Number(value)
-      .toFixed(minimumFractionDigits)
-      .replace('.', '|dec|')
-      .replace(',', targetFormat.thousandsDelimiter || '')
-      .replace('|dec|', targetFormat.decimalDelimiter || '');
-    const result = `${targetFormat.symbol}${formattedNumber}${targetFormat.currencyCode !== 'USD' ? ` ${targetFormat.currencyCode}` : ''}`;
-    return result;
-  }
+    if (!value || isNaN(value)) {
+        return '';
+    }
+    const { exchangeRate } = localizationStore;
+    const { targetFormat } = exchangeRate || {};
+    if (!targetFormat) {
+        return value.toString();
+    }
+    const minimumFractionDigits = (exchangeRate === null || exchangeRate === void 0 ? void 0 : exchangeRate.targetFormat.scale) || 2;
+    // browsers can autoformat the currency based on the users language setting
+    // unless the browser is Internet Explorer, because Internet Explorer is stupid
+    const isIE = window.navigator.userAgent.indexOf('MSIE ') !== -1;
+    const numberFormatExists = typeof Intl === 'object' && Intl && typeof Intl.NumberFormat === 'function';
+    if (!isIE && numberFormatExists) {
+        return new Intl.NumberFormat(window.navigator.language, {
+            currency: targetFormat.currencyCode,
+            minimumFractionDigits: minimumFractionDigits,
+            style: 'currency',
+        }).format(value);
+    }
+    else {
+        let formattedNumber = Number(value)
+            .toFixed(minimumFractionDigits)
+            .replace('.', '|dec|')
+            .replace(',', targetFormat.thousandsDelimiter || '')
+            .replace('|dec|', targetFormat.decimalDelimiter || '');
+        const result = `${targetFormat.symbol}${formattedNumber}${targetFormat.currencyCode !== 'USD' ? ` ${targetFormat.currencyCode}` : ''}`;
+        return result;
+    }
 };

package/dist/collection/components/utils/hello/currencyConversion/defaultCurrencyConverter.js

@@ -6,42 +6,42 @@ import { getCurrencyElements } from "./getCurrencyElements";
 import { getInitialElementAmount } from "./getInitialElementAmount";
 import { logError } from "../../logging/logError";
 export const defaultCurrencyConverter = () => {
-  const { currencyElementSelector } = zonosStore.helloSettings;
-  const currencyElements = getCurrencyElements(currencyElementSelector);
-  if (!(currencyElements === null || currencyElements === void 0 ? void 0 : currencyElements.length)) {
-    return;
-  }
-  if (!localizationStore.exchangeRate) {
-    logError('Could not display currency. Exchange rate and format data is not available.');
-    return;
-  }
-  currencyElements.forEach((element) => {
-    const amount = getInitialElementAmount(element);
-    if (!amount || isNaN(amount)) {
-      return;
+    const { currencyElementSelector } = zonosStore.helloSettings;
+    const currencyElements = getCurrencyElements(currencyElementSelector);
+    if (!(currencyElements === null || currencyElements === void 0 ? void 0 : currencyElements.length)) {
+        return;
     }
-    element.setAttribute('data-zintl', currencyConvert(amount).toString());
-    // Check if an observer is already attached to the element
-    let observer = element._mutationObserver;
-    if (!observer) {
-      observer = new MutationObserver(() => {
-        const observedFormattedValue = currencyConvertAndFormat(amount);
-        element.textContent = observedFormattedValue;
-      });
-      observer.observe(element, {
-        characterData: true,
-        childList: true,
-      });
-      element._mutationObserver = observer;
+    if (!localizationStore.exchangeRate) {
+        logError('Could not display currency. Exchange rate and format data is not available.');
+        return;
     }
-    // Temporarily disconnect the observer to prevent an infinite loop
-    observer.disconnect();
-    const formattedValue = currencyConvertAndFormat(amount);
-    element.textContent = formattedValue;
-    // Reconnect the observer after the update is complete
-    observer.observe(element, {
-      characterData: true,
-      childList: true,
+    currencyElements.forEach((element) => {
+        const amount = getInitialElementAmount(element);
+        if (!amount || isNaN(amount)) {
+            return;
+        }
+        element.setAttribute('data-zintl', currencyConvert(amount).toString());
+        // Check if an observer is already attached to the element
+        let observer = element._mutationObserver;
+        if (!observer) {
+            observer = new MutationObserver(() => {
+                const observedFormattedValue = currencyConvertAndFormat(amount);
+                element.textContent = observedFormattedValue;
+            });
+            observer.observe(element, {
+                characterData: true,
+                childList: true,
+            });
+            element._mutationObserver = observer;
+        }
+        // Temporarily disconnect the observer to prevent an infinite loop
+        observer.disconnect();
+        const formattedValue = currencyConvertAndFormat(amount);
+        element.textContent = formattedValue;
+        // Reconnect the observer after the update is complete
+        observer.observe(element, {
+            characterData: true,
+            childList: true,
+        });
     });
-  });
 };

package/dist/collection/components/utils/hello/currencyConversion/getCurrencyCode.js

@@ -1,9 +1,9 @@
 import { localizationStore } from "../../../store/hello/localization";
 export const getCurrencyCode = (code) => {
-  var _a;
-  const countryInShippingZone = (_a = localizationStore.shippingZoneCountries) === null || _a === void 0 ? void 0 : _a[code];
-  if (countryInShippingZone) {
-    return countryInShippingZone.currencyCode;
-  }
-  return null;
+    var _a;
+    const countryInShippingZone = (_a = localizationStore.shippingZoneCountries) === null || _a === void 0 ? void 0 : _a[code];
+    if (countryInShippingZone) {
+        return countryInShippingZone.currencyCode;
+    }
+    return null;
 };

package/dist/collection/components/utils/hello/currencyConversion/getCurrencyElements.js

@@ -2,17 +2,17 @@ import { isValidSelector } from "../../isValidSelector";
 import { log } from "../../logging/log";
 import { logError } from "../../logging/logError";
 export const getCurrencyElements = (selector) => {
-  const currencySelector = selector || '.money';
-  if (!isValidSelector(currencySelector)) {
-    // eslint-disable-next-line no-console
-    logError(`Currency element selector "${currencySelector}" is not valid.`);
-    return null;
-  }
-  const currencyElements = document.querySelectorAll(currencySelector);
-  if (!currencyElements.length) {
-    // eslint-disable-next-line no-console
-    log(`No currency elements found with selector "${currencySelector}"`, 'warn');
-    return null;
-  }
-  return currencyElements;
+    const currencySelector = selector || '.money';
+    if (!isValidSelector(currencySelector)) {
+        // eslint-disable-next-line no-console
+        logError(`Currency element selector "${currencySelector}" is not valid.`);
+        return null;
+    }
+    const currencyElements = document.querySelectorAll(currencySelector);
+    if (!currencyElements.length) {
+        // eslint-disable-next-line no-console
+        log(`No currency elements found with selector "${currencySelector}"`, 'warn');
+        return null;
+    }
+    return currencyElements;
 };

package/dist/collection/components/utils/hello/currencyConversion/getInitialElementAmount.js

@@ -1,15 +1,15 @@
 export const getInitialElementAmount = (element) => {
-  var _a;
-  const domesticValue = element.getAttribute('data-domestic');
-  if (!domesticValue) {
-    // Only keep numbers, decimal, and hyphens
-    const cleanedText = (_a = element.textContent) === null || _a === void 0 ? void 0 : _a.replace(/[^\d.-]/g, '');
-    if (!cleanedText) {
-      return null;
+    var _a;
+    const domesticValue = element.getAttribute('data-domestic');
+    if (!domesticValue) {
+        // Only keep numbers, decimal, and hyphens
+        const cleanedText = (_a = element.textContent) === null || _a === void 0 ? void 0 : _a.replace(/[^\d.-]/g, '');
+        if (!cleanedText) {
+            return null;
+        }
+        // Store the original value on the element once, and international on every new conversion
+        element.setAttribute('data-domestic', cleanedText);
+        return parseFloat(cleanedText);
     }
-    // Store the original value on the element once, and international on every new conversion
-    element.setAttribute('data-domestic', cleanedText);
-    return parseFloat(cleanedText);
-  }
-  return parseFloat(domesticValue);
+    return parseFloat(domesticValue);
 };

package/dist/collection/components/utils/hello/currencyConversion/getLanguageCode.js

@@ -1,9 +1,9 @@
 import { localizationStore } from "../../../store/hello/localization";
 export const getLanguageCode = (code) => {
-  var _a;
-  const countryInShippingZone = (_a = localizationStore.shippingZoneCountries) === null || _a === void 0 ? void 0 : _a[code];
-  if (countryInShippingZone) {
-    return countryInShippingZone.languageCode;
-  }
-  return null;
+    var _a;
+    const countryInShippingZone = (_a = localizationStore.shippingZoneCountries) === null || _a === void 0 ? void 0 : _a[code];
+    if (countryInShippingZone) {
+        return countryInShippingZone.languageCode;
+    }
+    return null;
 };

package/dist/collection/components/utils/hello/detectItemRestrictions.js

@@ -2,27 +2,27 @@ import { localizationStore } from "../../store/hello/localization";
 import { checkItemRestrictions } from "../api/checkItemRestrictions";
 import { logError } from "../logging/logError";
 export const detectItemRestrictions = async (newProducts) => {
-  if (!newProducts.length) {
-    return [];
-  }
-  const { selectedCountryCode } = localizationStore;
-  if (!selectedCountryCode) {
-    logError('Hello Could not check item restrictions - No country code selected');
-    return [];
-  }
-  const items = newProducts.map(product => ({
-    description: product.description,
-    name: product.title,
-  }));
-  const restrictedItems = await checkItemRestrictions({
-    items: items,
-    shipFrom: 'AD',
-    shipTo: selectedCountryCode,
-  });
-  const restrictedItemsWithName = restrictedItems.map(item => {
-    var _a;
-    const name = ((_a = items.filter(x => x.description === item.itemDescription).find(Boolean)) === null || _a === void 0 ? void 0 : _a.name) || '';
-    return Object.assign(Object.assign({}, item), { name });
-  });
-  return restrictedItemsWithName;
+    if (!newProducts.length) {
+        return [];
+    }
+    const { selectedCountryCode } = localizationStore;
+    if (!selectedCountryCode) {
+        logError('Hello Could not check item restrictions - No country code selected');
+        return [];
+    }
+    const items = newProducts.map(product => ({
+        description: product.description,
+        name: product.title,
+    }));
+    const restrictedItems = await checkItemRestrictions({
+        items: items,
+        shipFrom: 'AD',
+        shipTo: selectedCountryCode,
+    });
+    const restrictedItemsWithName = restrictedItems.map(item => {
+        var _a;
+        const name = ((_a = items.filter(x => x.description === item.itemDescription).find(Boolean)) === null || _a === void 0 ? void 0 : _a.name) || '';
+        return Object.assign(Object.assign({}, item), { name });
+    });
+    return restrictedItemsWithName;
 };

package/dist/collection/components/utils/hello/getCurrentHelloLocalePage.js

@@ -1,20 +1,20 @@
 import { zonosStore } from "../../store/zonosStore";
 export const getCurrentHelloLocalePage = () => {
-  const { href } = window.location;
-  const { cartUrlPattern, homepageUrlPattern, productDetailUrlPattern, productListUrlPattern, } = zonosStore.helloSettings;
-  // The 'if' statements are sorted by most specific to least specific to help with regex matching
-  if (cartUrlPattern && new RegExp(cartUrlPattern).test(href)) {
-    return 'cart';
-  }
-  if (productDetailUrlPattern &&
-    new RegExp(productDetailUrlPattern).test(href)) {
-    return 'productDetail';
-  }
-  if (productListUrlPattern && new RegExp(productListUrlPattern).test(href)) {
-    return 'productList';
-  }
-  if (homepageUrlPattern && new RegExp(homepageUrlPattern).test(href)) {
-    return 'home';
-  }
-  return '';
+    const { href } = window.location;
+    const { cartUrlPattern, homepageUrlPattern, productDetailUrlPattern, productListUrlPattern, } = zonosStore.helloSettings;
+    // The 'if' statements are sorted by most specific to least specific to help with regex matching
+    if (cartUrlPattern && new RegExp(cartUrlPattern).test(href)) {
+        return 'cart';
+    }
+    if (productDetailUrlPattern &&
+        new RegExp(productDetailUrlPattern).test(href)) {
+        return 'productDetail';
+    }
+    if (productListUrlPattern && new RegExp(productListUrlPattern).test(href)) {
+        return 'productList';
+    }
+    if (homepageUrlPattern && new RegExp(homepageUrlPattern).test(href)) {
+        return 'home';
+    }
+    return '';
 };

package/dist/collection/components/utils/hello/getHasMoreSpaceAbove.js

@@ -1,9 +1,9 @@
 {
-  /** @description determines if the element has more space above than below. Helpful for determining animation direction */
+    /** @description determines if the element has more space above than below. Helpful for determining animation direction */
 }
 export const getHasMoreSpaceAbove = (ref) => {
-  const componentRect = ref.getBoundingClientRect();
-  const availableSpaceAbove = componentRect.top;
-  const availableSpaceBelow = window.innerHeight - componentRect.bottom;
-  return availableSpaceAbove >= availableSpaceBelow;
+    const componentRect = ref.getBoundingClientRect();
+    const availableSpaceAbove = componentRect.top;
+    const availableSpaceBelow = window.innerHeight - componentRect.bottom;
+    return availableSpaceAbove >= availableSpaceBelow;
 };

package/dist/collection/components/utils/hello/getHasMoreSpaceOnRight.js

@@ -1,9 +1,9 @@
 {
-  /** @description determines if the element has more space on the right than the left. Helpful for determining animation direction */
+    /** @description determines if the element has more space on the right than the left. Helpful for determining animation direction */
 }
 export const getHasMoreSpaceOnRight = (ref) => {
-  const componentRect = ref.getBoundingClientRect();
-  const availableSpaceLeft = componentRect.left;
-  const availableSpaceRight = window.innerWidth - componentRect.right;
-  return availableSpaceLeft <= availableSpaceRight;
+    const componentRect = ref.getBoundingClientRect();
+    const availableSpaceLeft = componentRect.left;
+    const availableSpaceRight = window.innerWidth - componentRect.right;
+    return availableSpaceLeft <= availableSpaceRight;
 };