@bytebrand/fe-ui-core 4.2.79 → 4.2.81

package/source/framework/utils/CommonUtils.ts

@@ -1,596 +1,605 @@
-import qs from 'qs';
-import _get from 'lodash/get';
-import { formatLocale as d3formatLocale } from 'd3-format';
-import Cookies from 'js-cookie';
-import {
-  FIRST_REGISTRATION, MANUFACTURER, MILEAGE, MODEL, BODY_TYPE, PRICE, RATE,
-  DROP_DOWN_GROUP, RATE_DEFAULT, MMS_GROUPS_KEY, MMS_GROUP_FIELDS
-} from '../constants/SearchWidget';
-import { priceRatings, priceRatingConfig } from '../constants/price';
-import { GOOGLE_BUNDLE_COOKIES, HUNDRED } from '../constants/common';
-import { offers } from '../constants';
-import { FILTERS_IN_TITLE, MANUFACTURER_KEY, MAX_FILTERS_IN_TITLE, MODEL_KEY } from '../constants/Search';
-import { SearchPage as SearchPageTranslate } from '../../locales/data';
-
-const PRICE_DEFAULT = DROP_DOWN_GROUP[PRICE].defaultValue;
-
-declare global {
-  // tslint:disable-next-line:interface-name
-  interface Window {
-    grantHotjarCookieConsent?: () => void;
-    grantCookieConsent?: (list: string[]) => void;
-    allowGoogle?: () => void;
-  }
-}
-
-export const formatMileage = (millage: number | string) => {
-  return millage.toLocaleString('en-US').replace(/,/g, '.');
-};
-
-export const getFormattedNumber = (num: number) => Number.isFinite(num) ? num.toLocaleString('de-DE') : null;
-
-export const numberWithDot = (value: number | string) => {
-  switch (value) {
-    case 'any':
-      return value;
-    case 'beliebig':
-      return value;
-    default: return getFormattedNumber(+value);
-  }
-};
-
-export const arrToObj = (arr: string[]): { [key: string]: boolean } => {
-  if (!Array.isArray(arr)) return {};
-  return arr.reduce(
-    (obj: { [key: string]: boolean }, el: string) => { obj[el] = true; return obj; }, {}
-  );
-};
-
-export const addPrefixToKeys = (obj: { [key: string]: any }, prefix: string) => {
-  const result: { [key: string]: any } = {};
-  Object.keys(obj).reduce((_, key) => {
-    result[`${prefix}_${key}`] = obj[key];
-    return result;
-  }, result); // tslint:disable-line:align
-  return result;
-};
-
-// function return list of filter for inject in title
-export const filtersInTitle = (filters: any) => {
-  const result: any[] = [];
-  const pushInResult = (value: any) => {
-    if (result.length < MAX_FILTERS_IN_TITLE && value) {
-      result.push(value);
-    }
-  };
-
-  FILTERS_IN_TITLE.forEach((filter: string) => {
-    if (filter === MMS_GROUPS_KEY) {
-      filters.get(filter).forEach((MmsObject: any) => {
-        pushInResult(MmsObject[MANUFACTURER_KEY].value);
-        pushInResult(MmsObject[MODEL_KEY].value);
-      });
-    } else {
-      filters.get(filter).value.forEach((value: string) => {
-        pushInResult(value);
-      });
-    }
-  });
-  return result;
-};
-
-export const changeLocation = (path: string) =>
-  window.location.href = `${window.location.origin}/${path}`;
-
-export const checkRangeValuesOnEqual = (defaultValues: any, filterValues: any) => {
-  const keys = Object.keys(defaultValues);
-  let valuesIsEqual = true;
-  for (let i = 0; i < keys.length; i += 1) {
-    const period = keys[i];
-
-    if (filterValues[period] !== defaultValues[period]) {
-      valuesIsEqual = false;
-      break;
-    }
-  }
-
-  return valuesIsEqual;
-};
-
-export interface ICarImage {
-  url?: string;
-  imageUrlSmall?: string;
-  imageUrlMedium?: string;
-  imageUrlLarge?: string;
-}
-
-export const preloadNearbyImages = (images: ICarImage[], activeIndex: number, imageUrlSize: 'imageUrlSmall' | 'imageUrlMedium' | 'imageUrlLarge') => {
-  const imagesCount = Array.isArray(images) ? images.length : 0;
-  const imageSize = imageUrlSize;
-
-  const inMemoryPrevImage = new Image();
-  const inMemoryNextImage = new Image();
-
-  if (!!imagesCount) {
-    const prevIndex = (activeIndex - 1 % imagesCount + imagesCount) % imagesCount;
-    const nextIndex = (activeIndex + 1 % imagesCount + imagesCount) % imagesCount;
-
-    inMemoryPrevImage.src = images[prevIndex][imageSize];
-    inMemoryNextImage.src = images[nextIndex][imageSize];
-  }
-};
-
-export const getGroupValuesForQuery = (groups: any) => {
-  const arr: any = [];
-  groups.map((group: any) => {
-    const groupObj: any = {};
-
-    Object.keys(group).forEach((key: string) => {
-      const item = group[key];
-      if (item.value) {
-        groupObj[key] = item.value;
-      }
-    });
-    if (Object.keys(groupObj).length) {
-      arr.push(groupObj);
-    }
-  });
-  return arr;
-};
-
-export const buildBodyForRequest = (state: any) => {
-  const query: any = {
-    filters: {
-      absolutValues: {
-        mmsGroup0: {}
-      },
-      noAbsolutValues: {},
-      rangeValues: {}
-    }
-  };
-
-  Object.keys(state).sort().forEach((key: string) => {
-    const value = state[key];
-
-    if (!value) return;
-
-    if (key === MANUFACTURER && value.value) {
-      query.filters.absolutValues.mmsGroup0.mainData_make = value.value;
-    }
-
-    if (key === MODEL && value.value) {
-      if (value.isSeries) {
-        query.filters.absolutValues.mmsGroup0.mainData_series = value.value;
-      } else {
-        query.filters.absolutValues.mmsGroup0.mainData_model = value.value;
-      }
-    }
-
-    if (key === BODY_TYPE && value.length) {
-      query.filters.noAbsolutValues[BODY_TYPE] = value;
-    }
-
-    if (key === FIRST_REGISTRATION && value.value) {
-      query.filters.rangeValues['mainData_firstRegistrationYear'] = { from: value.value };
-    }
-
-    if (key === MILEAGE && value.value) {
-      query.filters.rangeValues['mainData_mileage'] = { to: value.value };
-    }
-
-    if (key === PRICE) {
-      const valueIsEqual = checkRangeValuesOnEqual(PRICE_DEFAULT, value);
-
-      if (!valueIsEqual) {
-        // check value in from / to. If we have - add it
-        Object.keys(value).map((key: string) => {
-          if (value[key]) {
-            if (!query.filters.rangeValues['price_currentSalesPrice']) {
-              query.filters.rangeValues['price_currentSalesPrice'] = {};
-            }
-
-            query.filters.rangeValues['price_currentSalesPrice'][key] = value[key];
-          }
-        });
-      }
-    }
-
-    if (key === RATE) {
-      const isRateDefault = checkRangeValuesOnEqual(RATE_DEFAULT, value);
-
-      if (!isRateDefault) {
-        query.filters.rangeValues['price_currentSalesPrice'] = { from: 1000, to: 2000 };
-      }
-    }
-  });
-
-  return query;
-};
-
-export const buildQueryForSearch = (filters: any) => {
-  const query: { [key: string]: any } = {};
-  const MMS_GROUP: any = {};
-
-  Object.keys(filters).forEach((filter: string) => {
-    const filterValue = filters[filter];
-
-    if (filterValue && filterValue.value) {
-      if (MMS_GROUP_FIELDS.indexOf(filter) !== -1) {
-        MMS_GROUP[filter] = filterValue.value;
-
-        if (filterValue.isSeries) {
-          MMS_GROUP.SERIES = filterValue.value;
-        }
-      }
-    }
-
-    if (filterValue === PRICE) {
-      const defaultValue = DROP_DOWN_GROUP[filter].defaultValue;
-      const valueIsDefault = filter === PRICE ? checkRangeValuesOnEqual(defaultValue, filterValue) : filterValue === defaultValue;
-
-      if (!valueIsDefault) {// check value in from / to. If we have - add it
-        Object.keys(filterValue).map((key: string) => {
-          if (filterValue[key]) {
-            if (!query.filters.rangeValues['price_currentSalesPrice']) {
-              query.filters.rangeValues['price_currentSalesPrice'] = {};
-            }
-
-            query.filters.rangeValues['price_currentSalesPrice'][key] = filterValue[key];
-          }
-        });
-      }
-    }
-
-    if (filter === PRICE) {
-      const valueIsDefault = checkRangeValuesOnEqual(PRICE_DEFAULT, filterValue);
-
-      if (!valueIsDefault) {
-        query[PRICE] = { from: '', to: '' };
-        query[PRICE].from = _get(filterValue, 'from', '');
-        query[PRICE].to = _get(filterValue, 'to', '');
-      }
-    }
-
-    if (filter === RATE) {
-      const isRateDefault = checkRangeValuesOnEqual(RATE_DEFAULT, filterValue);
-
-      if (!isRateDefault) {
-        query[RATE] = filterValue;
-      }
-    }
-
-    if (filter === MILEAGE) {
-      const defaultValue = DROP_DOWN_GROUP[filter].defaultValue;
-      if (filterValue !== defaultValue) {
-        query[MILEAGE] = { from: '', to: '' };
-        query[MILEAGE].from = _get(filterValue, 'from', '');
-        query[MILEAGE].to = _get(filterValue, 'to', '') || _get(filterValue, 'value', '');
-      }
-    }
-
-    if (filter === FIRST_REGISTRATION) {
-      const defaultValue = DROP_DOWN_GROUP[filter].defaultValue;
-      if (filterValue !== defaultValue) {
-        query[FIRST_REGISTRATION] = { from: '', to: '' };
-        query[FIRST_REGISTRATION].from = _get(filterValue, 'from', '') || _get(filterValue, 'value', '');
-        query[FIRST_REGISTRATION].to = _get(filterValue, 'to', '');
-      }
-    }
-
-    if (filter === BODY_TYPE) {
-      const defaultValue = DROP_DOWN_GROUP[filter].defaultValue;
-
-      if (filterValue.length && filterValue !== defaultValue) {
-        query[BODY_TYPE] = [];
-
-        filterValue.map((bodyTypeSelector: string) => {
-          query[BODY_TYPE].push(bodyTypeSelector);
-        });
-      }
-    }
-  });
-
-  if (Object.keys(MMS_GROUP).length) {
-    query[MMS_GROUPS_KEY] = [];
-    query[MMS_GROUPS_KEY].push(MMS_GROUP);
-  }
-
-  return qs.stringify(query, { encode: false });
-};
-
-export const sliceLessThan = (array: number[], to: any): number[] => {
-  const value = Number(to);
-  return value && Number.isFinite(value)
-    ? array.filter((val: number) => val <= value)
-    : array;
-};
-
-export const sliceMoreThan = (array: number[], from: any): number[] => {
-  const value = Number(from);
-  return value && Number.isFinite(value)
-    ? array.filter((val: number) => val >= value)
-    : array;
-};
-
-export const getFormattedPrice = (price: number, format = '$,.0f', currency = '', currencyPrefix = ''): string => {
-  if (!Number.isFinite(price)) return '-';
-  const groupingNum = 3;
-  return d3formatLocale({
-    decimal: ',',
-    thousands: '.',
-    currency: [currencyPrefix, currency],
-    grouping: [groupingNum]
-  }).format(format)(price);
-};
-
-
-export const getPriceRatingConfig = (currentPrice: number, pricePredicted: number) => { // tslint:disable-line
-  const round = (value: number) => {
-    return Number.isFinite(pricePredicted)
-      ? Math.round((pricePredicted * (1 + (value / 100))) / 100) * 100 // tslint:disable-line
-      : '???';
-  };
-
-  if (currentPrice === 0) {
-    console.log('Empty current price');
-  }
-
-  return Object.keys(priceRatingConfig).reduce((acc: any, key: any) => {
-    const { min, max } = priceRatingConfig[key];
-    return { ...acc, [key]: { min: round(min), max: round(max) } };
-  }, {}); // tslint:disable-line
-};
-
-export const getPriceRating = (currentSalesPrice: number, predictablePrice: number) => {
-  const isCorrectCurrentSalesPrice = Number.isFinite(Number.parseFloat(`${currentSalesPrice}`));
-  const isCorrectPredictablePrice = Number.isFinite(Number.parseFloat(`${predictablePrice}`));
-
-  if (!isCorrectCurrentSalesPrice || !isCorrectPredictablePrice) return 0;
-
-  const ratingConfig = getPriceRatingConfig(currentSalesPrice, predictablePrice);
-
-  for (const key of Object.keys(ratingConfig)) {
-    const { min, max } = ratingConfig[key];
-    const TOP_PRICE = 5;
-    if (key === 'highPrice' && currentSalesPrice === max) return 1;
-    if (key === 'topPrice' && currentSalesPrice <= min) return TOP_PRICE;
-    if (currentSalesPrice >= min && currentSalesPrice < max) return priceRatings.indexOf(key);
-  }
-
-  return 0;
-};
-
-export const fixNumber = (num: number | string) => {
-  const isNum = typeof num === 'number' ? num : parseFloat(num);
-  return Math.round(isNum * HUNDRED) / HUNDRED;
-};
-
-export const getOfferSliders = (financingConfig: any, t: (key: string, options?: object) => string, priceTabIndex: null | number, componentType: string) => {
-  const offerObj = offers[+priceTabIndex];
-  const offerConfig = financingConfig[offerObj.name];
-  const currentSalesPrice =
-    financingConfig.common ?
-    financingConfig.common.currentSalesPrice :
-    financingConfig.currentSalesPrice; // TODO: fix deprecated. Correct is "financingConfig.common.currentSalesPrice"
-  return offerObj.sliders
-    .map((slider: any, index) => {
-      if (componentType === 'checkout' && index === 1 && priceTabIndex === 0) return; // remove checkout annual mileage for financing
-      if (slider.name === 'firstInstallment') slider.max = offerConfig.firstInstallmentMax || currentSalesPrice;
-      slider.value = offerConfig[slider.name];
-      slider.unitName = t(`modals:financing.${slider.unit}`);
-      slider.caption = t(`modals:financing.${slider.name}`);
-      return slider;
-    }).filter(Boolean);
-};
-
-export const checkWebpFeature = async () => {
-  // If the browser doesn't has the method createImageBitmap, you can't display webp format
-  if (!self.createImageBitmap) return false;
-
-  // Base64 representation of a white point image
-  const webpData = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoCAAEAAQAcJaQAA3AA/v3AgAA=';
-
-  // Retrieve the Image in Blob Format
-  const blob = await fetch(webpData).then(r => r.blob());
-
-  // If the createImageBitmap method succeeds, return true, otherwise false
-  return createImageBitmap(blob).then(() => true, () => false);
-};
-
-export const getSupportedImageFormat = (IMAGE_URL: string, vehicleID: string, imageIdentifier: string, size: 'small' | 'medium' | 'large', webpFeature: boolean) => {
-  if (!imageIdentifier) return null;
-
-  const vehicleImageURL = `${IMAGE_URL}/${vehicleID}/${imageIdentifier}`;
-
-  return webpFeature ? `${vehicleImageURL}/${size}-cached.webp` : `${vehicleImageURL}/${size}-cached.jpeg`;
-};
-
-export function getChipFilterValue(
-  chip: any,
-  t: (key: string, options?: object) => string = (phrase: string, _?: object) => _get(SearchPageTranslate(chip), phrase.replace(':', '.'), phrase),
-  language: string = 'de'
-) {
-  let filterValue: string;
-  let title: string;
-  let from: string;
-  let to: string;
-  const chipFilterKey = chip.filterKey || chip.key; // we may have different key naming for landing or main
-  const chipFilterValue = chip.filterValue || chip.value; // we may have different key naming for landing or main
-  switch (chipFilterKey) {
-    case 'MANUFACTURER':
-    case 'MODEL':
-    case 'SUB_MODEL':
-    case 'SERIES':
-      filterValue = chipFilterValue;
-      break;
-
-    case 'MANUFACTURER_EXCLUDE':
-    case 'MODEL_EXCLUDE':
-      title = t(`SearchPage:filters.${chipFilterKey.toLocaleLowerCase()}`);
-      filterValue = `${title} ${chipFilterValue}`;
-      break;
-
-    case 'FIRST_REGISTRATION':
-      title = t(`SearchPage:filters.${chipFilterKey.toLocaleLowerCase()}`);
-      from = chipFilterValue.from ? `${t('SearchPage:filters.from')} ${chipFilterValue.from} ` : '';
-      to = chipFilterValue.to ? `${t('SearchPage:filters.to')} ${chipFilterValue.to}` : '';
-      filterValue = `${title} ${from} ${to}`;
-      break;
-
-    case 'PRICE':
-    case 'PRICE_DIFFERENCE':
-    case 'MILEAGE':
-    case 'EMISSION_CO2':
-    case 'POWER':
-    case 'IMAGES_COUNT':
-      title = t(`SearchPage:filters.${chipFilterKey.toLocaleLowerCase()}`);
-      from = chipFilterValue.from ? `${t('SearchPage:filters.from')} ${getFormattedPrice(+chipFilterValue.from)} ` : '';
-      to = chipFilterValue.to ? `${t('SearchPage:filters.to')} ${getFormattedPrice(+chipFilterValue.to)}` : '';
-      const type = chipFilterValue.type ? ` ${chipFilterValue.type}` : '';
-      filterValue = `${title} ${from} ${to}${type}`;
-      break;
-
-    case 'DOORS':
-    case 'OWNERS':
-      filterValue = t(`SearchPage:filters.${chipFilterValue}`);
-      break;
-
-    case 'SEATS':
-    case 'CUBIC_CAPACITY':
-      title = t(`SearchPage:filters.${chipFilterKey.toLocaleLowerCase()}`);
-      const fromTo = `${chipFilterValue.from} - ${chipFilterValue.to}`;
-      filterValue = `${title} ${fromTo}`;
-      break;
-
-    case 'CONSUMPTION':
-      const fromValue = Number(chipFilterValue.from).toLocaleString(language);
-      const toValue = Number(chipFilterValue.to).toLocaleString(language);
-      const newFromValue: any = (fromValue === 'NaN') ? '1' : fromValue;
-      const newToValue: any = (toValue === 'NaN') ? '18' : toValue;
-      const fromToWithInfo = `${newFromValue} - ${newToValue}`;
-      filterValue = t(`SearchPage:filtersChips.${chipFilterKey.toLocaleLowerCase()}`, { value: fromToWithInfo });
-      break;
-
-    case 'ONLINE_SINCE':
-      filterValue = t(`SearchPage:filters.${chipFilterValue}`);
-      break;
-
-    case 'GENERAL_INSPECTION':
-      filterValue = t(`SearchPage:filtersChips.generalInspection`, { month: t(`SearchPage:filters.${chipFilterValue}`) });
-      break;
-
-    case 'RATE':
-      const { monthlyInstallmentFrom, monthlyInstallmentTo, firstInstallment, paybackPeriod } = chipFilterValue;
-      const rowValues: any = { monthlyInstallmentFrom, monthlyInstallmentTo, firstInstallment, paybackPeriod };
-      const values: string[][] = [
-        ['monthlyInstallmentFrom', 'monthlyInstallmentTo'],
-        ['firstInstallment', 'paybackPeriod']
-      ].map((fields: string[]) => fields
-        .map((field: string) => {
-          const rowValue = rowValues[field];
-          const value = Number.isFinite(+rowValue) ? getFormattedPrice(+rowValue) : rowValue;
-          return +rowValue ? t(`SearchPage:filtersChips.${field}Chip`, { value }) : null;
-        })
-        .filter((item: any) => !!item)
-      );
-      const rateValue = `${t('SearchPage:filtersChips.rateChip')} ${values[0].length ? values[0].join(' ') : t('SearchPage:filtersChips.any')}`;
-      filterValue = `${rateValue}, ${values[1].join(', ')}`;
-      break;
-
-    default:
-      filterValue = t(`cbd:${chipFilterValue}`);
-  }
-  return filterValue;
-}
-
-function getUtmQueryParameter() {
-  const query = window.location.search;
-
-  if (!query) { return; }
-
-  const queryString = /^[?]/.test(query) ? query.slice(1) : query;
-
-  const result = queryString.split('&').reduce(
-    (params: any, param: string) => {
-      const [key, value] = param.split('=');
-
-      if (!/^source|^campaign|^medium|^content|^term|^reference|^gclid|^adgroupid|^keyword/.test(key)) { return params; }
-
-      params[key] = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : '';
-
-      return params;
-    },
-    {}
-  ); // eslint-disable-line indent,@typescript-eslint/indent
-
-  return result;
-}
-
-export function setUtmParameters() {
-  const marketing = getUtmQueryParameter();
-
-  if (!marketing) return;
-
-  if (!Object.keys(marketing).length) { return; }
-
-  const expiresDate = new Date();
-  expiresDate.setDate(expiresDate.getDate() + 1);
-
-  const parsedUrl = new URL(window.location.href);
-  const domain = parsedUrl.hostname.split('.').slice(-2).join('.');
-
-  document.cookie = `marketing=${JSON.stringify(marketing)};expires=${expiresDate};domain=.${domain};path=/`;
-}
-
-export const updateCookieList = () => {
-  let cookieConsentList = Object.keys(GOOGLE_BUNDLE_COOKIES);
-  let isHomeGoogleGranted = true; // home page google cookie
-  let isHotjarGranted = true;
-  const cookieConfig = JSON.parse(localStorage.getItem('cookieConfig')) || {};
-
-  const parsedUrl = new URL(window.location.href);
-  const domain = parsedUrl.hostname.split('.').slice(-2).join('.');
-  Object.keys(cookieConfig).forEach((group: string) => {
-    cookieConfig[group].forEach((cookie: string) => {
-      Cookies.remove(cookie, { domain, path: '/' }); // manually remove selected cookies
-      // google
-      if (cookieConsentList.includes(cookie)) {
-        cookieConsentList = cookieConsentList.filter(i => i !== cookie);  // deny google cookie consent for _gcl_au, _ga, _gid, _gat_UA-31842-13, etc
-
-        isHomeGoogleGranted = false;
-      } else if (cookie === 'hotjar') isHotjarGranted = false;
-    });
-  });
-  // grant google cookies
-  if (typeof window.grantCookieConsent === 'function') {
-    // const { marketing, analytics } = cookieConfig;
-
-    // if (marketing && marketing.length) { // if marketing disable then enable analytics_storage
-    //   cookieConsentList = [...cookieConsentList, 'analytics_storage'];
-    // }
-
-    // if (analytics && analytics.length) {  // if analytics disable then enable ad_storage
-    //   cookieConsentList = [...cookieConsentList, 'ad_storage'];
-    // }
-
-    window.grantCookieConsent(cookieConsentList);
-  };
-  if (isHomeGoogleGranted && typeof window.allowGoogle === 'function') {
-    window.allowGoogle();
-  }
-
-  // grant Hotjar cookies
-  if (isHotjarGranted && typeof window.grantHotjarCookieConsent === 'function') window.grantHotjarCookieConsent();
-};
-
-// function returns decimal part of number with 2 digits
-export const getCents = (value: number, prefix?: string, postfix?: string): string => {
-  if (!Number.isFinite(value)) return '';
-  const roundedValue = Math.floor(value);
-  const result = value.toFixed(2).toString().replace(`${roundedValue}.`, '');
-  return `${prefix}${result}${postfix}`;
-};
-
-export const priceParse = (value: any) => {
-  return !!value ? Number.parseFloat(value) : null;
+import qs from 'qs';
+import _get from 'lodash/get';
+import { formatLocale as d3formatLocale } from 'd3-format';
+import Cookies from 'js-cookie';
+import {
+  FIRST_REGISTRATION, MANUFACTURER, MILEAGE, MODEL, BODY_TYPE, PRICE, RATE,
+  DROP_DOWN_GROUP, RATE_DEFAULT, MMS_GROUPS_KEY, MMS_GROUP_FIELDS
+} from '../constants/SearchWidget';
+import { priceRatings, priceRatingConfig } from '../constants/price';
+import { GOOGLE_BUNDLE_COOKIES, HUNDRED } from '../constants/common';
+import { offers } from '../constants';
+import { FILTERS_IN_TITLE, MANUFACTURER_KEY, MAX_FILTERS_IN_TITLE, MODEL_KEY } from '../constants/Search';
+import { SearchPage as SearchPageTranslate } from '../../locales/data';
+
+const PRICE_DEFAULT = DROP_DOWN_GROUP[PRICE].defaultValue;
+
+declare global {
+  // tslint:disable-next-line:interface-name
+  interface Window {
+    grantHotjarCookieConsent?: () => void;
+    grantCookieConsentClarity?: () => void;
+    grantCookieConsentMicrosoft?: () => void;
+    grantCookieConsent?: (list: string[]) => void;
+    allowGoogle?: () => void;
+  }
+}
+
+export const formatMileage = (millage: number | string) => {
+  return millage.toLocaleString('en-US').replace(/,/g, '.');
+};
+
+export const getFormattedNumber = (num: number) => Number.isFinite(num) ? num.toLocaleString('de-DE') : null;
+
+export const numberWithDot = (value: number | string) => {
+  switch (value) {
+    case 'any':
+      return value;
+    case 'beliebig':
+      return value;
+    default: return getFormattedNumber(+value);
+  }
+};
+
+export const arrToObj = (arr: string[]): { [key: string]: boolean } => {
+  if (!Array.isArray(arr)) return {};
+  return arr.reduce(
+    (obj: { [key: string]: boolean }, el: string) => { obj[el] = true; return obj; }, {}
+  );
+};
+
+export const addPrefixToKeys = (obj: { [key: string]: any }, prefix: string) => {
+  const result: { [key: string]: any } = {};
+  Object.keys(obj).reduce((_, key) => {
+    result[`${prefix}_${key}`] = obj[key];
+    return result;
+  }, result); // tslint:disable-line:align
+  return result;
+};
+
+// function return list of filter for inject in title
+export const filtersInTitle = (filters: any) => {
+  const result: any[] = [];
+  const pushInResult = (value: any) => {
+    if (result.length < MAX_FILTERS_IN_TITLE && value) {
+      result.push(value);
+    }
+  };
+
+  FILTERS_IN_TITLE.forEach((filter: string) => {
+    if (filter === MMS_GROUPS_KEY) {
+      filters.get(filter).forEach((MmsObject: any) => {
+        pushInResult(MmsObject[MANUFACTURER_KEY].value);
+        pushInResult(MmsObject[MODEL_KEY].value);
+      });
+    } else {
+      filters.get(filter).value.forEach((value: string) => {
+        pushInResult(value);
+      });
+    }
+  });
+  return result;
+};
+
+export const changeLocation = (path: string) =>
+  window.location.href = `${window.location.origin}/${path}`;
+
+export const checkRangeValuesOnEqual = (defaultValues: any, filterValues: any) => {
+  const keys = Object.keys(defaultValues);
+  let valuesIsEqual = true;
+  for (let i = 0; i < keys.length; i += 1) {
+    const period = keys[i];
+
+    if (filterValues[period] !== defaultValues[period]) {
+      valuesIsEqual = false;
+      break;
+    }
+  }
+
+  return valuesIsEqual;
+};
+
+export interface ICarImage {
+  url?: string;
+  imageUrlSmall?: string;
+  imageUrlMedium?: string;
+  imageUrlLarge?: string;
+}
+
+export const preloadNearbyImages = (images: ICarImage[], activeIndex: number, imageUrlSize: 'imageUrlSmall' | 'imageUrlMedium' | 'imageUrlLarge') => {
+  const imagesCount = Array.isArray(images) ? images.length : 0;
+  const imageSize = imageUrlSize;
+
+  const inMemoryPrevImage = new Image();
+  const inMemoryNextImage = new Image();
+
+  if (!!imagesCount) {
+    const prevIndex = (activeIndex - 1 % imagesCount + imagesCount) % imagesCount;
+    const nextIndex = (activeIndex + 1 % imagesCount + imagesCount) % imagesCount;
+
+    inMemoryPrevImage.src = images[prevIndex][imageSize];
+    inMemoryNextImage.src = images[nextIndex][imageSize];
+  }
+};
+
+export const getGroupValuesForQuery = (groups: any) => {
+  const arr: any = [];
+  groups.map((group: any) => {
+    const groupObj: any = {};
+
+    Object.keys(group).forEach((key: string) => {
+      const item = group[key];
+      if (item.value) {
+        groupObj[key] = item.value;
+      }
+    });
+    if (Object.keys(groupObj).length) {
+      arr.push(groupObj);
+    }
+  });
+  return arr;
+};
+
+export const buildBodyForRequest = (state: any) => {
+  const query: any = {
+    filters: {
+      absolutValues: {
+        mmsGroup0: {}
+      },
+      noAbsolutValues: {},
+      rangeValues: {}
+    }
+  };
+
+  Object.keys(state).sort().forEach((key: string) => {
+    const value = state[key];
+
+    if (!value) return;
+
+    if (key === MANUFACTURER && value.value) {
+      query.filters.absolutValues.mmsGroup0.mainData_make = value.value;
+    }
+
+    if (key === MODEL && value.value) {
+      if (value.isSeries) {
+        query.filters.absolutValues.mmsGroup0.mainData_series = value.value;
+      } else {
+        query.filters.absolutValues.mmsGroup0.mainData_model = value.value;
+      }
+    }
+
+    if (key === BODY_TYPE && value.length) {
+      query.filters.noAbsolutValues[BODY_TYPE] = value;
+    }
+
+    if (key === FIRST_REGISTRATION && value.value) {
+      query.filters.rangeValues['mainData_firstRegistrationYear'] = { from: value.value };
+    }
+
+    if (key === MILEAGE && value.value) {
+      query.filters.rangeValues['mainData_mileage'] = { to: value.value };
+    }
+
+    if (key === PRICE) {
+      const valueIsEqual = checkRangeValuesOnEqual(PRICE_DEFAULT, value);
+
+      if (!valueIsEqual) {
+        // check value in from / to. If we have - add it
+        Object.keys(value).map((key: string) => {
+          if (value[key]) {
+            if (!query.filters.rangeValues['price_currentSalesPrice']) {
+              query.filters.rangeValues['price_currentSalesPrice'] = {};
+            }
+
+            query.filters.rangeValues['price_currentSalesPrice'][key] = value[key];
+          }
+        });
+      }
+    }
+
+    if (key === RATE) {
+      const isRateDefault = checkRangeValuesOnEqual(RATE_DEFAULT, value);
+
+      if (!isRateDefault) {
+        query.filters.rangeValues['price_currentSalesPrice'] = { from: 1000, to: 2000 };
+      }
+    }
+  });
+
+  return query;
+};
+
+export const buildQueryForSearch = (filters: any) => {
+  const query: { [key: string]: any } = {};
+  const MMS_GROUP: any = {};
+
+  Object.keys(filters).forEach((filter: string) => {
+    const filterValue = filters[filter];
+
+    if (filterValue && filterValue.value) {
+      if (MMS_GROUP_FIELDS.indexOf(filter) !== -1) {
+        MMS_GROUP[filter] = filterValue.value;
+
+        if (filterValue.isSeries) {
+          MMS_GROUP.SERIES = filterValue.value;
+        }
+      }
+    }
+
+    if (filterValue === PRICE) {
+      const defaultValue = DROP_DOWN_GROUP[filter].defaultValue;
+      const valueIsDefault = filter === PRICE ? checkRangeValuesOnEqual(defaultValue, filterValue) : filterValue === defaultValue;
+
+      if (!valueIsDefault) {// check value in from / to. If we have - add it
+        Object.keys(filterValue).map((key: string) => {
+          if (filterValue[key]) {
+            if (!query.filters.rangeValues['price_currentSalesPrice']) {
+              query.filters.rangeValues['price_currentSalesPrice'] = {};
+            }
+
+            query.filters.rangeValues['price_currentSalesPrice'][key] = filterValue[key];
+          }
+        });
+      }
+    }
+
+    if (filter === PRICE) {
+      const valueIsDefault = checkRangeValuesOnEqual(PRICE_DEFAULT, filterValue);
+
+      if (!valueIsDefault) {
+        query[PRICE] = { from: '', to: '' };
+        query[PRICE].from = _get(filterValue, 'from', '');
+        query[PRICE].to = _get(filterValue, 'to', '');
+      }
+    }
+
+    if (filter === RATE) {
+      const isRateDefault = checkRangeValuesOnEqual(RATE_DEFAULT, filterValue);
+
+      if (!isRateDefault) {
+        query[RATE] = filterValue;
+      }
+    }
+
+    if (filter === MILEAGE) {
+      const defaultValue = DROP_DOWN_GROUP[filter].defaultValue;
+      if (filterValue !== defaultValue) {
+        query[MILEAGE] = { from: '', to: '' };
+        query[MILEAGE].from = _get(filterValue, 'from', '');
+        query[MILEAGE].to = _get(filterValue, 'to', '') || _get(filterValue, 'value', '');
+      }
+    }
+
+    if (filter === FIRST_REGISTRATION) {
+      const defaultValue = DROP_DOWN_GROUP[filter].defaultValue;
+      if (filterValue !== defaultValue) {
+        query[FIRST_REGISTRATION] = { from: '', to: '' };
+        query[FIRST_REGISTRATION].from = _get(filterValue, 'from', '') || _get(filterValue, 'value', '');
+        query[FIRST_REGISTRATION].to = _get(filterValue, 'to', '');
+      }
+    }
+
+    if (filter === BODY_TYPE) {
+      const defaultValue = DROP_DOWN_GROUP[filter].defaultValue;
+
+      if (filterValue.length && filterValue !== defaultValue) {
+        query[BODY_TYPE] = [];
+
+        filterValue.map((bodyTypeSelector: string) => {
+          query[BODY_TYPE].push(bodyTypeSelector);
+        });
+      }
+    }
+  });
+
+  if (Object.keys(MMS_GROUP).length) {
+    query[MMS_GROUPS_KEY] = [];
+    query[MMS_GROUPS_KEY].push(MMS_GROUP);
+  }
+
+  return qs.stringify(query, { encode: false });
+};
+
+export const sliceLessThan = (array: number[], to: any): number[] => {
+  const value = Number(to);
+  return value && Number.isFinite(value)
+    ? array.filter((val: number) => val <= value)
+    : array;
+};
+
+export const sliceMoreThan = (array: number[], from: any): number[] => {
+  const value = Number(from);
+  return value && Number.isFinite(value)
+    ? array.filter((val: number) => val >= value)
+    : array;
+};
+
+export const getFormattedPrice = (price: number, format = '$,.0f', currency = '', currencyPrefix = ''): string => {
+  if (!Number.isFinite(price)) return '-';
+  const groupingNum = 3;
+  return d3formatLocale({
+    decimal: ',',
+    thousands: '.',
+    currency: [currencyPrefix, currency],
+    grouping: [groupingNum]
+  }).format(format)(price);
+};
+
+
+export const getPriceRatingConfig = (currentPrice: number, pricePredicted: number) => { // tslint:disable-line
+  const round = (value: number) => {
+    return Number.isFinite(pricePredicted)
+      ? Math.round((pricePredicted * (1 + (value / 100))) / 100) * 100 // tslint:disable-line
+      : '???';
+  };
+
+  if (currentPrice === 0) {
+    console.log('Empty current price');
+  }
+
+  return Object.keys(priceRatingConfig).reduce((acc: any, key: any) => {
+    const { min, max } = priceRatingConfig[key];
+    return { ...acc, [key]: { min: round(min), max: round(max) } };
+  }, {}); // tslint:disable-line
+};
+
+export const getPriceRating = (currentSalesPrice: number, predictablePrice: number) => {
+  const isCorrectCurrentSalesPrice = Number.isFinite(Number.parseFloat(`${currentSalesPrice}`));
+  const isCorrectPredictablePrice = Number.isFinite(Number.parseFloat(`${predictablePrice}`));
+
+  if (!isCorrectCurrentSalesPrice || !isCorrectPredictablePrice) return 0;
+
+  const ratingConfig = getPriceRatingConfig(currentSalesPrice, predictablePrice);
+
+  for (const key of Object.keys(ratingConfig)) {
+    const { min, max } = ratingConfig[key];
+    const TOP_PRICE = 5;
+    if (key === 'highPrice' && currentSalesPrice === max) return 1;
+    if (key === 'topPrice' && currentSalesPrice <= min) return TOP_PRICE;
+    if (currentSalesPrice >= min && currentSalesPrice < max) return priceRatings.indexOf(key);
+  }
+
+  return 0;
+};
+
+export const fixNumber = (num: number | string) => {
+  const isNum = typeof num === 'number' ? num : parseFloat(num);
+  return Math.round(isNum * HUNDRED) / HUNDRED;
+};
+
+export const getOfferSliders = (financingConfig: any, t: (key: string, options?: object) => string, priceTabIndex: null | number, componentType: string) => {
+  const offerObj = offers[+priceTabIndex];
+  const offerConfig = financingConfig[offerObj.name];
+  const currentSalesPrice =
+    financingConfig.common ?
+    financingConfig.common.currentSalesPrice :
+    financingConfig.currentSalesPrice; // TODO: fix deprecated. Correct is "financingConfig.common.currentSalesPrice"
+  return offerObj.sliders
+    .map((slider: any, index) => {
+      if (componentType === 'checkout' && index === 1 && priceTabIndex === 0) return; // remove checkout annual mileage for financing
+      if (slider.name === 'firstInstallment') slider.max = offerConfig.firstInstallmentMax || currentSalesPrice;
+      slider.value = offerConfig[slider.name];
+      slider.unitName = t(`modals:financing.${slider.unit}`);
+      slider.caption = t(`modals:financing.${slider.name}`);
+      return slider;
+    }).filter(Boolean);
+};
+
+export const checkWebpFeature = async () => {
+  // If the browser doesn't has the method createImageBitmap, you can't display webp format
+  if (!self.createImageBitmap) return false;
+
+  // Base64 representation of a white point image
+  const webpData = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoCAAEAAQAcJaQAA3AA/v3AgAA=';
+
+  // Retrieve the Image in Blob Format
+  const blob = await fetch(webpData).then(r => r.blob());
+
+  // If the createImageBitmap method succeeds, return true, otherwise false
+  return createImageBitmap(blob).then(() => true, () => false);
+};
+
+export const getSupportedImageFormat = (IMAGE_URL: string, vehicleID: string, imageIdentifier: string, size: 'small' | 'medium' | 'large', webpFeature: boolean) => {
+  if (!imageIdentifier) return null;
+
+  const vehicleImageURL = `${IMAGE_URL}/${vehicleID}/${imageIdentifier}`;
+
+  return webpFeature ? `${vehicleImageURL}/${size}-cached.webp` : `${vehicleImageURL}/${size}-cached.jpeg`;
+};
+
+export function getChipFilterValue(
+  chip: any,
+  t: (key: string, options?: object) => string = (phrase: string, _?: object) => _get(SearchPageTranslate(chip), phrase.replace(':', '.'), phrase),
+  language: string = 'de'
+) {
+  let filterValue: string;
+  let title: string;
+  let from: string;
+  let to: string;
+  const chipFilterKey = chip.filterKey || chip.key; // we may have different key naming for landing or main
+  const chipFilterValue = chip.filterValue || chip.value; // we may have different key naming for landing or main
+  switch (chipFilterKey) {
+    case 'MANUFACTURER':
+    case 'MODEL':
+    case 'SUB_MODEL':
+    case 'SERIES':
+      filterValue = chipFilterValue;
+      break;
+
+    case 'MANUFACTURER_EXCLUDE':
+    case 'MODEL_EXCLUDE':
+      title = t(`SearchPage:filters.${chipFilterKey.toLocaleLowerCase()}`);
+      filterValue = `${title} ${chipFilterValue}`;
+      break;
+
+    case 'FIRST_REGISTRATION':
+      title = t(`SearchPage:filters.${chipFilterKey.toLocaleLowerCase()}`);
+      from = chipFilterValue.from ? `${t('SearchPage:filters.from')} ${chipFilterValue.from} ` : '';
+      to = chipFilterValue.to ? `${t('SearchPage:filters.to')} ${chipFilterValue.to}` : '';
+      filterValue = `${title} ${from} ${to}`;
+      break;
+
+    case 'PRICE':
+    case 'PRICE_DIFFERENCE':
+    case 'MILEAGE':
+    case 'EMISSION_CO2':
+    case 'POWER':
+    case 'IMAGES_COUNT':
+      title = t(`SearchPage:filters.${chipFilterKey.toLocaleLowerCase()}`);
+      from = chipFilterValue.from ? `${t('SearchPage:filters.from')} ${getFormattedPrice(+chipFilterValue.from)} ` : '';
+      to = chipFilterValue.to ? `${t('SearchPage:filters.to')} ${getFormattedPrice(+chipFilterValue.to)}` : '';
+      const type = chipFilterValue.type ? ` ${chipFilterValue.type}` : '';
+      filterValue = `${title} ${from} ${to}${type}`;
+      break;
+
+    case 'DOORS':
+    case 'OWNERS':
+      filterValue = t(`SearchPage:filters.${chipFilterValue}`);
+      break;
+
+    case 'SEATS':
+    case 'CUBIC_CAPACITY':
+      title = t(`SearchPage:filters.${chipFilterKey.toLocaleLowerCase()}`);
+      const fromTo = `${chipFilterValue.from} - ${chipFilterValue.to}`;
+      filterValue = `${title} ${fromTo}`;
+      break;
+
+    case 'CONSUMPTION':
+      const fromValue = Number(chipFilterValue.from).toLocaleString(language);
+      const toValue = Number(chipFilterValue.to).toLocaleString(language);
+      const newFromValue: any = (fromValue === 'NaN') ? '1' : fromValue;
+      const newToValue: any = (toValue === 'NaN') ? '18' : toValue;
+      const fromToWithInfo = `${newFromValue} - ${newToValue}`;
+      filterValue = t(`SearchPage:filtersChips.${chipFilterKey.toLocaleLowerCase()}`, { value: fromToWithInfo });
+      break;
+
+    case 'ONLINE_SINCE':
+      filterValue = t(`SearchPage:filters.${chipFilterValue}`);
+      break;
+
+    case 'GENERAL_INSPECTION':
+      filterValue = t(`SearchPage:filtersChips.generalInspection`, { month: t(`SearchPage:filters.${chipFilterValue}`) });
+      break;
+
+    case 'RATE':
+      const { monthlyInstallmentFrom, monthlyInstallmentTo, firstInstallment, paybackPeriod } = chipFilterValue;
+      const rowValues: any = { monthlyInstallmentFrom, monthlyInstallmentTo, firstInstallment, paybackPeriod };
+      const values: string[][] = [
+        ['monthlyInstallmentFrom', 'monthlyInstallmentTo'],
+        ['firstInstallment', 'paybackPeriod']
+      ].map((fields: string[]) => fields
+        .map((field: string) => {
+          const rowValue = rowValues[field];
+          const value = Number.isFinite(+rowValue) ? getFormattedPrice(+rowValue) : rowValue;
+          return +rowValue ? t(`SearchPage:filtersChips.${field}Chip`, { value }) : null;
+        })
+        .filter((item: any) => !!item)
+      );
+      const rateValue = `${t('SearchPage:filtersChips.rateChip')} ${values[0].length ? values[0].join(' ') : t('SearchPage:filtersChips.any')}`;
+      filterValue = `${rateValue}, ${values[1].join(', ')}`;
+      break;
+
+    default:
+      filterValue = t(`cbd:${chipFilterValue}`);
+  }
+  return filterValue;
+}
+
+function getUtmQueryParameter() {
+  const query = window.location.search;
+
+  if (!query) { return; }
+
+  const queryString = /^[?]/.test(query) ? query.slice(1) : query;
+
+  const result = queryString.split('&').reduce(
+    (params: any, param: string) => {
+      const [key, value] = param.split('=');
+
+      if (!/^source|^campaign|^medium|^content|^term|^reference|^gclid|^adgroupid|^keyword/.test(key)) { return params; }
+
+      params[key] = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : '';
+
+      return params;
+    },
+    {}
+  ); // eslint-disable-line indent,@typescript-eslint/indent
+
+  return result;
+}
+
+export function setUtmParameters() {
+  const marketing = getUtmQueryParameter();
+
+  if (!marketing) return;
+
+  if (!Object.keys(marketing).length) { return; }
+
+  const expiresDate = new Date();
+  expiresDate.setDate(expiresDate.getDate() + 1);
+
+  const parsedUrl = new URL(window.location.href);
+  const domain = parsedUrl.hostname.split('.').slice(-2).join('.');
+
+  document.cookie = `marketing=${JSON.stringify(marketing)};expires=${expiresDate};domain=.${domain};path=/`;
+}
+
+export const updateCookieList = () => {
+  let cookieConsentList = Object.keys(GOOGLE_BUNDLE_COOKIES);
+  let isHomeGoogleGranted = true; // home page google cookie
+  let isMicrosoftGranted = true; // Microsoft _uetvid _uetsid
+  let isMicrosoftClarity = true; // Microsoft Clarity _clck _clsk
+  let isHotjarGranted = true;
+  const cookieConfig = JSON.parse(localStorage.getItem('cookieConfig')) || {};
+
+  const parsedUrl = new URL(window.location.href);
+  const domain = parsedUrl.hostname.split('.').slice(-2).join('.');
+  Object.keys(cookieConfig).forEach((group: string) => {
+    cookieConfig[group].forEach((cookie: string) => {
+      Cookies.remove(cookie, { domain, path: '/' }); // manually remove selected cookies
+      // google
+      if (cookieConsentList.includes(cookie)) {
+        cookieConsentList = cookieConsentList.filter(i => i !== cookie);  // deny google cookie consent for _gcl_au, _ga, _gid, _gat_UA-31842-13, etc
+
+        isHomeGoogleGranted = false;
+      }
+      else if (cookie === 'hotjar') isHotjarGranted = false;
+      else if (cookie === '_uetvid' || cookie === '_uetsid') isMicrosoftGranted = false;
+      else if (cookie === '_clck' || cookie === '_clsk') isMicrosoftClarity = false;
+    });
+  });
+  // grant google cookies
+  if (typeof window.grantCookieConsent === 'function')
+    window.grantCookieConsent(cookieConsentList);
+
+  // grant Microsoft cookies
+  if (isMicrosoftGranted && typeof window.grantCookieConsentMicrosoft === 'function') {
+    window.grantCookieConsentMicrosoft();
+  }
+
+  // grant Microsoft Clarity cookies
+  if (isMicrosoftClarity && typeof window.grantCookieConsentClarity === 'function') {
+    window.grantCookieConsentClarity();
+  }
+
+  if (isHomeGoogleGranted && typeof window.allowGoogle === 'function') {
+    window.allowGoogle();
+  }
+
+  // grant Hotjar cookies
+  if (isHotjarGranted && typeof window.grantHotjarCookieConsent === 'function') {
+    window.grantHotjarCookieConsent();
+  }
+};
+
+// function returns decimal part of number with 2 digits
+export const getCents = (value: number, prefix?: string, postfix?: string): string => {
+  if (!Number.isFinite(value)) return '';
+  const roundedValue = Math.floor(value);
+  const result = value.toFixed(2).toString().replace(`${roundedValue}.`, '');
+  return `${prefix}${result}${postfix}`;
+};
+
+export const priceParse = (value: any) => {
+  return !!value ? Number.parseFloat(value) : null;
 };