@bytebrand/fe-ui-core 4.8.26 → 4.8.27

package/source/components/containers/SearchPage/FiltersContainer/FiltersContainer.tsx

@@ -1,463 +1,463 @@
-import * as React from 'react';
-import _get from 'lodash/get';
-import _startsWith from 'lodash/startsWith';
-import _debounce from 'lodash/debounce';
-import qs from 'qs';
-import { isArray, isEqual } from 'lodash';
-import { checkRangeValuesOnEqual, getGroupValuesForQuery } from '../../../../framework/utils/CommonUtils';
-import { FilterBlockFactory } from '../../../SearchFilters/common/FilterBlock/FilterBlockFactory';
-import { FilterGroups, IFilters } from '../../../SearchFilters/FiltersFactory';
-import { MANUFACTURER_KEY, MM_GROUPS_EXCLUDE_KEY, MODEL_KEY, RANGE_FILTERS, SERIES_KEY, SUPER_ADMIN_FILTER_NAME } from '../../../../framework/constants/Search';
-import { MMS_GROUPS_KEY, OBJECT_FILTERS } from '../../../../framework/constants/SearchWidget';
-import { resolveMmsValue } from '../../../../framework/utils/FiltersUtils';
-import FilterBlock from '../../../SearchFilters/common/FilterBlock/FilterBlock';
-import styles from './FiltersContainer.styl';
-import AlternativeID from '../../../SearchFilters/filters/AlternativeID';
-import MaterialField from '../../../_common/MaterialField/MaterialField';
-
-type PathParamsType = {
-  location?: any;
-  [key: string]: string;
-};
-
-interface IRouteComponentProps<Params extends { [K in keyof Params]?: string } = {}> {
-  history: any;
-  location: any;
-  match: any;
-  staticContext?: any;
-}
-
-interface IFiltersContainerProps extends IRouteComponentProps<PathParamsType> {
-  filters: IFilters;
-  activeSorting: string;
-  locationSearch: string;
-  aggregation: {};
-  setActiveSorting: (newActiveSorting: string) => void;
-  setLastSearchString: (filters: IFilters, query: string) => void;
-  search: (filters: any, page?: number, getStats?: boolean, vehicleID?: string|null) => void;
-  resetFiltersToDefault: () => void;
-  clearSearchState: (clearSorting?: boolean) => void;
-  addMmsGroup: () => void;
-  onFilterChange?: () => void;
-  addMmExcludeGroup: () => void;
-  clearSearchConfig: () => void;
-  setSearchConfig: (config: {}) => void;
-  removeMmsGroup: (index: number) => boolean;
-  addModelsToFilters: (models: any, index: number) => void;
-  getManufacturers: (onlyWithOnlineCars?: boolean) => Promise<any>;
-  changeRangeFilterControls: (filterKey: string, value: any) => void;
-  changeSeries: (field: string, filterValue: string, index: number) => void;
-  addManufacturersToFilters: (brands: any, clearModelValue?: boolean) => void;
-  changeFilterValue: (filterKey: string, filterValue: string, index?: number) => void;
-  onAlternativeRedirect: (value: string) => void;
-  getModelsInfoByMaker: (maker: string, onlyWithOnlineCars?: boolean) => Promise<any>;
-  readonly isDealerSuperAdmin: boolean;
-  t?: (phrase: string) => string;
-  isDealerPage?: boolean;
-  isAlternative?: boolean;
-  vehicleID?: string;
-  successTransition?: boolean;
-  isErrorAlternativeField: boolean;
-  Link?: any;
-}
-
-class FiltersContainer extends React.Component<IFiltersContainerProps, {}> {
-  componentDidMount() {
-    this.getFiltersFromQuery();
-    this.updateFinancingSearchConfig();
-  }
-
-  componentDidUpdate(prevProps: IFiltersContainerProps) {
-    const { location, filters, resetFiltersToDefault, clearSearchState, search, activeSorting, setActiveSorting, vehicleID } = this.props;
-    console.log('vehicleID', vehicleID);
-    if (
-        (prevProps.location.search !== location.search) && 
-        !_startsWith(location.search, '?pageNumber'))
-      {
-      const queryFromFilters = this.getQueryFromFilters();
-      const prevQueryFromFilters = ['pageNumber', 'activeSort'].reduce((url, param) => url.replace(new RegExp(`(^${param}=\\w*&|&${param}=\\w*)`), ''), prevProps.location.search.slice(1));
-      const paramsFromQuery = qs.parse(location.search, { ignoreQueryPrefix: true });
-      const pageNumber = paramsFromQuery.pageNumber;
-      const activeSort = paramsFromQuery.activeSort;
-
-      // if we get url from another place
-      // for example from Navigation
-      if (queryFromFilters !== prevQueryFromFilters) {
-        resetFiltersToDefault();
-        this.getFiltersFromQuery();
-      }
-
-      if (activeSort !== activeSorting) {
-        // activeSorting = activeSort; // TODO make a function to change at searchStore
-        setActiveSorting(activeSort as string);
-      }
-
-      clearSearchState(!activeSort);
-      search(filters, Number(pageNumber) || 1, true, vehicleID);
-    }
-
-    this.updateFinancingSearchConfig();
-  }
-
-  componentWillUnmount(): void {
-    const { location, filters, setLastSearchString, resetFiltersToDefault } = this.props;
-    setLastSearchString(filters, location.search);
-    resetFiltersToDefault();
-  }
-
-  onFilterChange = (field: string, value: any, index?: number, isSeries?: boolean) => {
-    const { addModelsToFilters, changeFilterValue, changeSeries, getModelsInfoByMaker } = this.props;
-    let newValue = _get(value, 'value') || value;
-
-    if (newValue && newValue.from === 0) {
-      newValue.from = '0';
-    }
-
-    if (newValue && newValue.to === 0) {
-      newValue.to = '0';
-    }
-
-    if (field === MANUFACTURER_KEY || field === MODEL_KEY) { //tslint:disable-line
-      newValue = resolveMmsValue(newValue);
-    }
-
-    if (field === MANUFACTURER_KEY) {
-      changeFilterValue(MODEL_KEY, '', index);
-      changeFilterValue(SERIES_KEY, '', index);
-
-      if (newValue) {
-        getModelsInfoByMaker(newValue, true).then((response: any) => {
-          const models = response || [];
-          addModelsToFilters(models, index);
-        });
-      } else {
-        addModelsToFilters([], index);
-      }
-    }
-
-    if (field === MODEL_KEY) {
-      const seriesValue = isSeries ? newValue : '';
-      newValue = isSeries ? '' : newValue;
-      changeSeries(field, seriesValue, index);
-    }
-
-    changeFilterValue(field, newValue, index);
-    this.props.onFilterChange();
-  };
-
-  onChangeFilterControls = (field: string, value: any) => {
-    const { changeRangeFilterControls } = this.props;
-    changeRangeFilterControls(field, value);
-    this.props.onFilterChange();
-  };
-
-  onAddMmsGroupClick = () => {
-    const { getManufacturers, addMmsGroup, addManufacturersToFilters } = this.props;
-    getManufacturers(true).then((manufacturers: any) => {
-      addMmsGroup();
-      addManufacturersToFilters(manufacturers, false);
-    });
-  };
-
-  onRemoveMmsGroup = (index: number) => {
-    const { filters, removeMmsGroup, clearSearchState, search, onFilterChange } = this.props;
-
-    const needToRefreshPage = removeMmsGroup(index);
-
-    if (needToRefreshPage) {
-      onFilterChange();
-      clearSearchState();
-      search(filters, 1, true);
-    }
-  };
-
-  updateFinancingSearchConfig = () => {
-    const { setSearchConfig, clearSearchConfig, location } = this.props;
-    const paramsFromQuery = qs.parse(location.search, { ignoreQueryPrefix: true });
-    if ('RATE' in paramsFromQuery && typeof paramsFromQuery.RATE === 'object') {
-      setSearchConfig(paramsFromQuery.RATE);
-    } else {
-      clearSearchConfig();
-    }
-  }
-
-  getFiltersFromQuery = () => {
-    const { location, changeFilterValue,
-      addModelsToFilters,
-      addMmsGroup,
-      addMmExcludeGroup,
-      changeRangeFilterControls, getModelsInfoByMaker,
-      getManufacturers,
-      addManufacturersToFilters
-    } = this.props;
-
-    const paramsFromQuery = qs.parse(location.search, { ignoreQueryPrefix: true });
-    const paramsKeys = Object.keys(paramsFromQuery);
-    const clearModelValue = !paramsKeys.length;
-    const rangeFiltersStrings = Object.keys(RANGE_FILTERS);
-    const objectFiltersStrings = Object.keys(OBJECT_FILTERS);
-
-    if (paramsKeys.length) {
-      paramsKeys.forEach((filter: string) => {
-        const paramValue = paramsFromQuery[filter];
-        if (filter === MMS_GROUPS_KEY) { //tslint:disable-line
-          if (isArray(paramValue)) {
-            const stringParamValue: string[] = paramValue as string[];
-            stringParamValue.map((group: any, index: number) => {
-              if (index >= 1) {
-                if (filter === MMS_GROUPS_KEY) addMmsGroup();
-              }
-
-              Object.keys(group).forEach((key: string) => {
-                changeFilterValue(key, group[key], index);
-                if (key === MANUFACTURER_KEY) {
-                  getModelsInfoByMaker(group[key], true).then((response: any) => {
-                    const models = response || [];
-                    addModelsToFilters(models, index);
-                  });
-                }
-              });
-            });
-          }
-        } else if (filter === MM_GROUPS_EXCLUDE_KEY) {
-          if (isArray(paramValue)) {
-            const stringParamValue: string[] = paramValue as string[];
-            stringParamValue.map((group: any, index: number) => {
-              if (index >= 1) {
-                addMmExcludeGroup();
-              }
-
-              Object.keys(group).forEach((key: string) => {
-                changeFilterValue(key, group[key], index);
-              });
-            });
-          }
-        } else {
-          // Defines whether filter is range or not.
-          const isRange = rangeFiltersStrings.indexOf(filter) !== -1;
-          const isObject = objectFiltersStrings.indexOf(filter) !== -1;
-
-          // Transform url encoded param into range filter object.
-          const valueToSend = isRange ? qs.parse(paramValue as string, { ignoreQueryPrefix: true }) : paramValue;
-          changeFilterValue(filter, valueToSend as string);
-          if (isRange || isObject) { changeRangeFilterControls(filter, valueToSend); }
-        }
-      });
-    }
-
-    getManufacturers(true).then((response: any) => {
-      addManufacturersToFilters(response, clearModelValue);
-    });
-  };
-
-  getQueryFromFilters = () => {
-    const { filters } = this.props;
-    const filtersKeys = Object.keys(filters);
-    const query: { [key: string]: any } = {};
-
-    filtersKeys.forEach((filter: string) => {
-      const filterObj = filters[filter];
-      const filterValue = filter === MMS_GROUPS_KEY ? getGroupValuesForQuery(filterObj) : filterObj.value;
-      const isRangeFilter = typeof filterValue === 'object' && filterObj.isRange;
-      const isRateFilter = typeof filterValue === 'object' && filterObj.isRate;
-
-      if (filterValue && (filterValue.length || isRateFilter)) {
-        query[filter] = filterValue;
-      }
-
-      if (isRangeFilter) {
-        const defaultValue = RANGE_FILTERS[filter].defaultValue;
-        const valueIsDefault = checkRangeValuesOnEqual(defaultValue, filterValue);
-
-        if (!valueIsDefault) {
-          query[filter] = filterValue;
-        }
-      }
-    });
-
-    return qs.stringify(query, { encode: false });
-  };
-
-  getMmsGroupsProps = (filter: string) => {
-    const { filters } = this.props;
-    const mmsGroups = filters[filter];
-    return mmsGroups.map((filterGroup: any, index: number) => {
-      const group: any = {};
-
-      Object.keys(filterGroup).forEach((fl: string) => {
-
-        group[fl] = {
-          values: filters[filter][index][fl].value,
-          options: filters[filter][index][fl].options
-        };
-      });
-
-      return group;
-    });
-  };
-
-  getDefaultFilterProps = (filter: string) => {
-    const { filters, aggregation } = this.props;
-    const agg: any = aggregation;
-    const controls = filters[filter].controls;
-    const controlsType = _get(controls, 'type', '');
-    const filterField = `${filters[filter].field}${controlsType}`;
-    const histograms = agg['HISTOGRAM'] || {};
-    const isHistogram = Object.keys(histograms).indexOf(filterField) !== -1;
-
-    const typeOptions = filters[filter].typeOptions;
-    let filterProps = {
-      ...(controls && Object.keys(controls).length && { controls }),
-      ...(typeOptions && Object.keys(typeOptions).length && { typeOptions })
-    };
-
-    if (isHistogram) {
-      const histogramData = histograms[filterField].length ? histograms[filterField] : RANGE_FILTERS[filter].options;
-      const actualValues = {
-        from: filters[filter].value.from ? filters[filter].value.from : histogramData[0].from,
-        to: histogramData[histogramData.length - 1].to
-      };
-
-      filterProps = Object.assign({}, filterProps, {
-        values: { ...actualValues, type: controlsType },
-        options: histogramData
-      });
-    } else {
-      const values = filters[filter].value;
-      const options = filters[filter].options;
-      const optionsWithoutUnknown = removeUnknownOptions(options);
-
-      filterProps = Object.assign({}, filterProps, {
-        values,
-        options: optionsWithoutUnknown,
-        ...(agg[filter] && { aggregation: agg[filter] })
-      });
-    }
-
-    return filterProps;
-  };
-
-  renderFilters = () => {
-    const { t, isDealerSuperAdmin, Link, isDealerPage, isAlternative } = this.props;
-    // const { isDealerSuperAdmin } = authStore;
-
-    return Object.keys(FilterGroups).map((groupKey: string, index: number) => {
-      const basicDataProps = {
-        onAddMmsGroup: this.onAddMmsGroupClick,
-        onRemoveMmsGroup: this.onRemoveMmsGroup
-      };
-
-      const baseProps = {
-        t,
-        onFilterChange: this.onFilterChange,
-        onChangeFilterControls: this.onChangeFilterControls,
-        ...(groupKey === 'BASIC_DATA' && basicDataProps),
-        ...(groupKey === 'EQUIPMENTS' && { Link }),
-        isDealerPage
-      };
-
-      const compProps: any = {};
-
-      FilterGroups[groupKey].filters.forEach((filter: string) => {
-        if (filter === MMS_GROUPS_KEY) {
-          compProps[filter] = this.getMmsGroupsProps(filter);
-        } else {
-          compProps[filter] = this.getDefaultFilterProps(filter);
-        }
-      });
-
-      const _props = Object.assign({}, baseProps, compProps);
-      const component = FilterBlockFactory[groupKey](_props);
-      const title = FilterGroups[groupKey].title;
-
-      // TODO: find better way to exclude super admin filters
-      // Specific case for additional super admin widgets.
-      // We do not need to show them to normal customer.
-      if ((!isDealerSuperAdmin || isAlternative) && title === SUPER_ADMIN_FILTER_NAME) return null;
-
-      return (
-        <FilterBlock
-          isAdminPanel={title === SUPER_ADMIN_FILTER_NAME}
-          key={index} title={t(`SearchPage:filterGroups.${title}`)}
-          expand={index === (isDealerSuperAdmin && !isAlternative ? 0 : 1)}
-          className={title}
-        >
-          {component}
-        </FilterBlock>
-      );
-    });
-  };
-
-  onVehicleIdChange = (value: string) => {
-    const { filters, changeFilterValue, search } = this.props;
-    const upperCaseValue = value.toLocaleUpperCase().trim();
-    if (upperCaseValue.length === 6 || !value) {
-      this.onFilterChange('VEHICLE_ID', upperCaseValue);
-      changeFilterValue('VEHICLE_ID', upperCaseValue);
-      search(filters, 1, true);
-    }
-  };
-
-  render() {
-    const { t, onAlternativeRedirect, isAlternative, isErrorAlternativeField, Link, locationSearch, successTransition, filters } = this.props;
-    const paramsFromQuery = qs.parse(location.search, { ignoreQueryPrefix: true });
-
-    const { VEHICLE_ID } = filters;
-
-    const alternativeIDProps = {
-      t,
-      successTransition,
-      autoDeId: paramsFromQuery.autoDeId as string,
-      error: isErrorAlternativeField,
-      onChange: onAlternativeRedirect
-    };
-    console.log('isErrorAlternativeField', isErrorAlternativeField);
-    return (
-      <div className={styles.filters}>
-        {isAlternative ? (
-          <div className={styles.titleAlternative}>
-            <div className={styles.titleWrap}>
-              <h3 className={styles.titleTextAlternative}>auto.de-ID</h3>
-              <Link to={`/alternative/detailed${locationSearch}`} className={styles.titleLink}>
-                {this.props.t('SearchPage:detailedSearch')}
-              </Link>
-            </div>
-            <AlternativeID {...alternativeIDProps} />
-          </div>
-        ) : ''}
-        <div className={styles.title}>
-          <h3 className={styles.titleText}>{this.props.t('SearchPage:filterBy')}</h3>
-        </div>
-        {!isAlternative ? (
-          <div className={styles.vehicleId}>
-            <div className={styles.vehicleIdLabel}>auto.de-ID</div>
-            <MaterialField
-              value={VEHICLE_ID.value}
-              onChange={this.onVehicleIdChange}
-              size='custom'
-              placeholder={t('SearchPage:vehicleIdexample')}
-            />
-          </div>
-        ) : ''}
-        {this.renderFilters()}
-        <Link className={styles.linkToDetailed} to={`/${isAlternative ? 'alternative' : 'search'}/detailed${locationSearch}`}>{t('SearchPage:detailedSearch')}</Link>
-      </div>
-    );
-  }
-}
-
-const removeUnknownOptions = (options: any) => {
-  if (!options || !options.length || typeof options[0] !== 'string') return options;
-  return options.filter((o: string) => o !== 'selector_unknown');
-};
-
-// export default React.memo(FiltersContainer);
-
-export default React.memo(FiltersContainer, (props, nextProps) => {
-  const { t, location, filters, aggregation, isErrorAlternativeField } = props;
-  return t === nextProps.t &&
-    location.search === nextProps.location.search &&
-    isErrorAlternativeField === nextProps.isErrorAlternativeField &&
-    isEqual(aggregation, nextProps.aggregation) &&
-    isEqual(filters.MMS_GROUPS, nextProps.filters.MMS_GROUPS);
-});
+import * as React from 'react';
+import _get from 'lodash/get';
+import _startsWith from 'lodash/startsWith';
+import _debounce from 'lodash/debounce';
+import qs from 'qs';
+import { isArray, isEqual } from 'lodash';
+import { checkRangeValuesOnEqual, getGroupValuesForQuery } from '../../../../framework/utils/CommonUtils';
+import { FilterBlockFactory } from '../../../SearchFilters/common/FilterBlock/FilterBlockFactory';
+import { FilterGroups, IFilters } from '../../../SearchFilters/FiltersFactory';
+import { MANUFACTURER_KEY, MM_GROUPS_EXCLUDE_KEY, MODEL_KEY, RANGE_FILTERS, SERIES_KEY, SUPER_ADMIN_FILTER_NAME } from '../../../../framework/constants/Search';
+import { MMS_GROUPS_KEY, OBJECT_FILTERS } from '../../../../framework/constants/SearchWidget';
+import { resolveMmsValue } from '../../../../framework/utils/FiltersUtils';
+import FilterBlock from '../../../SearchFilters/common/FilterBlock/FilterBlock';
+import styles from './FiltersContainer.styl';
+import AlternativeID from '../../../SearchFilters/filters/AlternativeID';
+import MaterialField from '../../../_common/MaterialField/MaterialField';
+
+type PathParamsType = {
+  location?: any;
+  [key: string]: string;
+};
+
+interface IRouteComponentProps<Params extends { [K in keyof Params]?: string } = {}> {
+  history: any;
+  location: any;
+  match: any;
+  staticContext?: any;
+}
+
+interface IFiltersContainerProps extends IRouteComponentProps<PathParamsType> {
+  filters: IFilters;
+  activeSorting: string;
+  locationSearch: string;
+  aggregation: {};
+  setActiveSorting: (newActiveSorting: string) => void;
+  setLastSearchString: (filters: IFilters, query: string) => void;
+  search: (filters: any, page?: number, getStats?: boolean, vehicleID?: string|null) => void;
+  resetFiltersToDefault: () => void;
+  clearSearchState: (clearSorting?: boolean) => void;
+  addMmsGroup: () => void;
+  onFilterChange?: () => void;
+  addMmExcludeGroup: () => void;
+  clearSearchConfig: () => void;
+  setSearchConfig: (config: {}) => void;
+  removeMmsGroup: (index: number) => boolean;
+  addModelsToFilters: (models: any, index: number) => void;
+  getManufacturers: (onlyWithOnlineCars?: boolean) => Promise<any>;
+  changeRangeFilterControls: (filterKey: string, value: any) => void;
+  changeSeries: (field: string, filterValue: string, index: number) => void;
+  addManufacturersToFilters: (brands: any, clearModelValue?: boolean) => void;
+  changeFilterValue: (filterKey: string, filterValue: string, index?: number) => void;
+  onAlternativeRedirect: (value: string) => void;
+  getModelsInfoByMaker: (maker: string, onlyWithOnlineCars?: boolean) => Promise<any>;
+  readonly isDealerSuperAdmin: boolean;
+  t?: (phrase: string) => string;
+  isDealerPage?: boolean;
+  isAlternative?: boolean;
+  vehicleID?: string;
+  successTransition?: boolean;
+  isErrorAlternativeField: boolean;
+  Link?: any;
+}
+
+class FiltersContainer extends React.Component<IFiltersContainerProps, {}> {
+  componentDidMount() {
+    this.getFiltersFromQuery();
+    this.updateFinancingSearchConfig();
+  }
+
+  componentDidUpdate(prevProps: IFiltersContainerProps) {
+    const { location, filters, resetFiltersToDefault, clearSearchState, search, activeSorting, setActiveSorting, vehicleID } = this.props;
+    console.log('vehicleID', vehicleID);
+    if (
+        (prevProps.location.search !== location.search) && 
+        !_startsWith(location.search, '?pageNumber'))
+      {
+      const queryFromFilters = this.getQueryFromFilters();
+      const prevQueryFromFilters = ['pageNumber', 'activeSort'].reduce((url, param) => url.replace(new RegExp(`(^${param}=\\w*&|&${param}=\\w*)`), ''), prevProps.location.search.slice(1));
+      const paramsFromQuery = qs.parse(location.search, { ignoreQueryPrefix: true });
+      const pageNumber = paramsFromQuery.pageNumber;
+      const activeSort = paramsFromQuery.activeSort;
+
+      // if we get url from another place
+      // for example from Navigation
+      if (queryFromFilters !== prevQueryFromFilters) {
+        resetFiltersToDefault();
+        this.getFiltersFromQuery();
+      }
+
+      if (activeSort !== activeSorting) {
+        // activeSorting = activeSort; // TODO make a function to change at searchStore
+        setActiveSorting(activeSort as string);
+      }
+
+      clearSearchState(!activeSort);
+      search(filters, Number(pageNumber) || 1, true, vehicleID);
+    }
+
+    this.updateFinancingSearchConfig();
+  }
+
+  componentWillUnmount(): void {
+    const { location, filters, setLastSearchString, resetFiltersToDefault } = this.props;
+    setLastSearchString(filters, location.search);
+    resetFiltersToDefault();
+  }
+
+  onFilterChange = (field: string, value: any, index?: number, isSeries?: boolean) => {
+    const { addModelsToFilters, changeFilterValue, changeSeries, getModelsInfoByMaker } = this.props;
+    let newValue = _get(value, 'value') || value;
+
+    if (newValue && newValue.from === 0) {
+      newValue.from = '0';
+    }
+
+    if (newValue && newValue.to === 0) {
+      newValue.to = '0';
+    }
+
+    if (field === MANUFACTURER_KEY || field === MODEL_KEY) { //tslint:disable-line
+      newValue = resolveMmsValue(newValue);
+    }
+
+    if (field === MANUFACTURER_KEY) {
+      changeFilterValue(MODEL_KEY, '', index);
+      changeFilterValue(SERIES_KEY, '', index);
+
+      if (newValue) {
+        getModelsInfoByMaker(newValue, true).then((response: any) => {
+          const models = response || [];
+          addModelsToFilters(models, index);
+        });
+      } else {
+        addModelsToFilters([], index);
+      }
+    }
+
+    if (field === MODEL_KEY) {
+      const seriesValue = isSeries ? newValue : '';
+      newValue = isSeries ? '' : newValue;
+      changeSeries(field, seriesValue, index);
+    }
+
+    changeFilterValue(field, newValue, index);
+    this.props.onFilterChange();
+  };
+
+  onChangeFilterControls = (field: string, value: any) => {
+    const { changeRangeFilterControls } = this.props;
+    changeRangeFilterControls(field, value);
+    this.props.onFilterChange();
+  };
+
+  onAddMmsGroupClick = () => {
+    const { getManufacturers, addMmsGroup, addManufacturersToFilters } = this.props;
+    getManufacturers(true).then((manufacturers: any) => {
+      addMmsGroup();
+      addManufacturersToFilters(manufacturers, false);
+    });
+  };
+
+  onRemoveMmsGroup = (index: number) => {
+    const { filters, removeMmsGroup, clearSearchState, search, onFilterChange } = this.props;
+
+    const needToRefreshPage = removeMmsGroup(index);
+
+    if (needToRefreshPage) {
+      onFilterChange();
+      clearSearchState();
+      search(filters, 1, true);
+    }
+  };
+
+  updateFinancingSearchConfig = () => {
+    const { setSearchConfig, clearSearchConfig, location } = this.props;
+    const paramsFromQuery = qs.parse(location.search, { ignoreQueryPrefix: true });
+    if ('RATE' in paramsFromQuery && typeof paramsFromQuery.RATE === 'object') {
+      setSearchConfig(paramsFromQuery.RATE);
+    } else {
+      clearSearchConfig();
+    }
+  }
+
+  getFiltersFromQuery = () => {
+    const { location, changeFilterValue,
+      addModelsToFilters,
+      addMmsGroup,
+      addMmExcludeGroup,
+      changeRangeFilterControls, getModelsInfoByMaker,
+      getManufacturers,
+      addManufacturersToFilters
+    } = this.props;
+
+    const paramsFromQuery = qs.parse(location.search, { ignoreQueryPrefix: true });
+    const paramsKeys = Object.keys(paramsFromQuery);
+    const clearModelValue = !paramsKeys.length;
+    const rangeFiltersStrings = Object.keys(RANGE_FILTERS);
+    const objectFiltersStrings = Object.keys(OBJECT_FILTERS);
+
+    if (paramsKeys.length) {
+      paramsKeys.forEach((filter: string) => {
+        const paramValue = paramsFromQuery[filter];
+        if (filter === MMS_GROUPS_KEY) { //tslint:disable-line
+          if (isArray(paramValue)) {
+            const stringParamValue: string[] = paramValue as string[];
+            stringParamValue.map((group: any, index: number) => {
+              if (index >= 1) {
+                if (filter === MMS_GROUPS_KEY) addMmsGroup();
+              }
+
+              Object.keys(group).forEach((key: string) => {
+                changeFilterValue(key, group[key], index);
+                if (key === MANUFACTURER_KEY) {
+                  getModelsInfoByMaker(group[key], true).then((response: any) => {
+                    const models = response || [];
+                    addModelsToFilters(models, index);
+                  });
+                }
+              });
+            });
+          }
+        } else if (filter === MM_GROUPS_EXCLUDE_KEY) {
+          if (isArray(paramValue)) {
+            const stringParamValue: string[] = paramValue as string[];
+            stringParamValue.map((group: any, index: number) => {
+              if (index >= 1) {
+                addMmExcludeGroup();
+              }
+
+              Object.keys(group).forEach((key: string) => {
+                changeFilterValue(key, group[key], index);
+              });
+            });
+          }
+        } else {
+          // Defines whether filter is range or not.
+          const isRange = rangeFiltersStrings.indexOf(filter) !== -1;
+          const isObject = objectFiltersStrings.indexOf(filter) !== -1;
+
+          // Transform url encoded param into range filter object.
+          const valueToSend = isRange ? qs.parse(paramValue as string, { ignoreQueryPrefix: true }) : paramValue;
+          changeFilterValue(filter, valueToSend as string);
+          if (isRange || isObject) { changeRangeFilterControls(filter, valueToSend); }
+        }
+      });
+    }
+
+    getManufacturers(true).then((response: any) => {
+      addManufacturersToFilters(response, clearModelValue);
+    });
+  };
+
+  getQueryFromFilters = () => {
+    const { filters } = this.props;
+    const filtersKeys = Object.keys(filters);
+    const query: { [key: string]: any } = {};
+
+    filtersKeys.forEach((filter: string) => {
+      const filterObj = filters[filter];
+      const filterValue = filter === MMS_GROUPS_KEY ? getGroupValuesForQuery(filterObj) : filterObj.value;
+      const isRangeFilter = typeof filterValue === 'object' && filterObj.isRange;
+      const isRateFilter = typeof filterValue === 'object' && filterObj.isRate;
+
+      if (filterValue && (filterValue.length || isRateFilter)) {
+        query[filter] = filterValue;
+      }
+
+      if (isRangeFilter) {
+        const defaultValue = RANGE_FILTERS[filter].defaultValue;
+        const valueIsDefault = checkRangeValuesOnEqual(defaultValue, filterValue);
+
+        if (!valueIsDefault) {
+          query[filter] = filterValue;
+        }
+      }
+    });
+
+    return qs.stringify(query, { encode: false });
+  };
+
+  getMmsGroupsProps = (filter: string) => {
+    const { filters } = this.props;
+    const mmsGroups = filters[filter];
+    return mmsGroups.map((filterGroup: any, index: number) => {
+      const group: any = {};
+
+      Object.keys(filterGroup).forEach((fl: string) => {
+
+        group[fl] = {
+          values: filters[filter][index][fl].value,
+          options: filters[filter][index][fl].options
+        };
+      });
+
+      return group;
+    });
+  };
+
+  getDefaultFilterProps = (filter: string) => {
+    const { filters, aggregation } = this.props;
+    const agg: any = aggregation;
+    const controls = filters[filter].controls;
+    const controlsType = _get(controls, 'type', '');
+    const filterField = `${filters[filter].field}${controlsType}`;
+    const histograms = agg['HISTOGRAM'] || {};
+    const isHistogram = Object.keys(histograms).indexOf(filterField) !== -1;
+
+    const typeOptions = filters[filter].typeOptions;
+    let filterProps = {
+      ...(controls && Object.keys(controls).length && { controls }),
+      ...(typeOptions && Object.keys(typeOptions).length && { typeOptions })
+    };
+
+    if (isHistogram) {
+      const histogramData = histograms[filterField].length ? histograms[filterField] : RANGE_FILTERS[filter].options;
+      const actualValues = {
+        from: filters[filter].value.from ? filters[filter].value.from : histogramData[0].from,
+        to: histogramData[histogramData.length - 1].to
+      };
+
+      filterProps = Object.assign({}, filterProps, {
+        values: { ...actualValues, type: controlsType },
+        options: histogramData
+      });
+    } else {
+      const values = filters[filter].value;
+      const options = filters[filter].options;
+      const optionsWithoutUnknown = removeUnknownOptions(options);
+
+      filterProps = Object.assign({}, filterProps, {
+        values,
+        options: optionsWithoutUnknown,
+        ...(agg[filter] && { aggregation: agg[filter] })
+      });
+    }
+
+    return filterProps;
+  };
+
+  renderFilters = () => {
+    const { t, isDealerSuperAdmin, Link, isDealerPage, isAlternative } = this.props;
+    // const { isDealerSuperAdmin } = authStore;
+
+    return Object.keys(FilterGroups).map((groupKey: string, index: number) => {
+      const basicDataProps = {
+        onAddMmsGroup: this.onAddMmsGroupClick,
+        onRemoveMmsGroup: this.onRemoveMmsGroup
+      };
+
+      const baseProps = {
+        t,
+        onFilterChange: this.onFilterChange,
+        onChangeFilterControls: this.onChangeFilterControls,
+        ...(groupKey === 'BASIC_DATA' && basicDataProps),
+        ...(groupKey === 'EQUIPMENTS' && { Link }),
+        isDealerPage
+      };
+
+      const compProps: any = {};
+
+      FilterGroups[groupKey].filters.forEach((filter: string) => {
+        if (filter === MMS_GROUPS_KEY) {
+          compProps[filter] = this.getMmsGroupsProps(filter);
+        } else {
+          compProps[filter] = this.getDefaultFilterProps(filter);
+        }
+      });
+
+      const _props = Object.assign({}, baseProps, compProps);
+      const component = FilterBlockFactory[groupKey](_props);
+      const title = FilterGroups[groupKey].title;
+
+      // TODO: find better way to exclude super admin filters
+      // Specific case for additional super admin widgets.
+      // We do not need to show them to normal customer.
+      if ((!isDealerSuperAdmin || isAlternative) && title === SUPER_ADMIN_FILTER_NAME) return null;
+
+      return (
+        <FilterBlock
+          isAdminPanel={title === SUPER_ADMIN_FILTER_NAME}
+          key={index} title={t(`SearchPage:filterGroups.${title}`)}
+          expand={index === (isDealerSuperAdmin && !isAlternative ? 0 : 1)}
+          className={title}
+        >
+          {component}
+        </FilterBlock>
+      );
+    });
+  };
+
+  onVehicleIdChange = (value: string) => {
+    const { filters, changeFilterValue, search } = this.props;
+    const upperCaseValue = value.toLocaleUpperCase().trim();
+    if (upperCaseValue.length === 6 || !value) {
+      this.onFilterChange('VEHICLE_ID', upperCaseValue);
+      changeFilterValue('VEHICLE_ID', upperCaseValue);
+      search(filters, 1, true);
+    }
+  };
+
+  render() {
+    const { t, onAlternativeRedirect, isAlternative, isErrorAlternativeField, Link, locationSearch, successTransition, filters } = this.props;
+    const paramsFromQuery = qs.parse(location.search, { ignoreQueryPrefix: true });
+
+    const { VEHICLE_ID } = filters;
+
+    const alternativeIDProps = {
+      t,
+      successTransition,
+      autoDeId: paramsFromQuery.autoDeId as string,
+      error: isErrorAlternativeField,
+      onChange: onAlternativeRedirect
+    };
+    console.log('isErrorAlternativeField', isErrorAlternativeField);
+    return (
+      <div className={styles.filters}>
+        {isAlternative ? (
+          <div className={styles.titleAlternative}>
+            <div className={styles.titleWrap}>
+              <h3 className={styles.titleTextAlternative}>auto.de-ID</h3>
+              <Link to={`/alternative/detailed${locationSearch}`} className={styles.titleLink}>
+                {this.props.t('SearchPage:detailedSearch')}
+              </Link>
+            </div>
+            <AlternativeID {...alternativeIDProps} />
+          </div>
+        ) : ''}
+        <div className={styles.title}>
+          <h3 className={styles.titleText}>{this.props.t('SearchPage:filterBy')}</h3>
+        </div>
+        {!isAlternative ? (
+          <div className={styles.vehicleId}>
+            <div className={styles.vehicleIdLabel}>auto.de-ID</div>
+            <MaterialField
+              value={VEHICLE_ID.value}
+              onChange={this.onVehicleIdChange}
+              size='custom'
+              placeholder={t('SearchPage:vehicleIdexample')}
+            />
+          </div>
+        ) : ''}
+        {this.renderFilters()}
+        <Link className={styles.linkToDetailed} to={`/${isAlternative ? 'alternative' : 'search'}/detailed${locationSearch}`}>{t('SearchPage:detailedSearch')}</Link>
+      </div>
+    );
+  }
+}
+
+const removeUnknownOptions = (options: any) => {
+  if (!options || !options.length || typeof options[0] !== 'string') return options;
+  return options.filter((o: string) => o !== 'selector_unknown');
+};
+
+// export default React.memo(FiltersContainer);
+
+export default React.memo(FiltersContainer, (props, nextProps) => {
+  const { t, location, filters, aggregation, isErrorAlternativeField } = props;
+  return t === nextProps.t &&
+    location.search === nextProps.location.search &&
+    isErrorAlternativeField === nextProps.isErrorAlternativeField &&
+    isEqual(aggregation, nextProps.aggregation) &&
+    isEqual(filters.MMS_GROUPS, nextProps.filters.MMS_GROUPS);
+});