@bytebrand/fe-ui-core 4.2.250 → 4.3.0

package/source/components/OfferPanel/OfferPanel.tsx

@@ -11,7 +11,7 @@ import CheckboxMaterial from '../_common/CheckboxMaterial/CheckboxMaterial';
 interface IFinalAdvice {
   checked: boolean;
   label: string;
-  onChange?: (event?: React.ChangeEvent<HTMLInputElement>, checked?: boolean | string,  value?: any) => void;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean, value: any) => void;
   reversed?: boolean;
   value: string;
 }

package/source/components/OfferPanel/OfferPeriod/OfferPeriod.tsx

@@ -1,5 +1,6 @@
 import React, { FC, ChangeEvent } from 'react';
 import _get from 'lodash/get';
+import classNames from 'classnames';
 import styles from './OfferPeriod.styl';
 import { modalsTranslate } from '../../../locales/data';
 import CheckboxMaterial from '../../_common/CheckboxMaterial/CheckboxMaterial';
@@ -21,6 +22,9 @@ const OfferPeriod: FC<IOfferPeriod> = ({ paybackPeriod, periods, t, onChange })
       <div className={styles.periods}>
         {periods.map((period: number) => {
           const isChecked = paybackPeriod === period;
+          const labelClassName = classNames(
+            { [styles.checked]: isChecked }
+          );
           const inputProps = {
             type: 'period',
             name: 'duration',

package/source/components/OfferPanel/RangeGroup/RangeGroup.tsx

@@ -9,18 +9,16 @@ export interface IRangeGroup {
   onChange: (event: Event, value: number | number[]) => void;
   className?: string;
   isAlternative?: boolean;
-  maxFinancingFirstInstallment?: number;
 }
 
-const RangeGroup: FC<IRangeGroup> = ({ sliders, onChange, isAlternative, maxFinancingFirstInstallment }) => <>
-  {sliders.length && sliders.map(({ name, min, max, step, caption, value, unitName, withRangeLimit }) => {
+const RangeGroup: FC<IRangeGroup> = ({ sliders, onChange, isAlternative }) => <>
+  {sliders.length && sliders.map(({ name, min, max, step, caption, value, unitName }) => {
     const rangeProps = {
       min, max, step, value,
-      isAlternative, withRangeLimit,
+      isAlternative,
       units: value ? ` ${unitName}` : '',
       onAfterChange: () => {},
-      onChange: (_: Event, value: number | number[]) => onChange(name, value),
-      maxFinancingFirstInstallment
+      onChange: (_: Event, value: number | number[]) => onChange(name, value)
     };
     return (
       <Fragment key={name}>

package/source/components/PriceRatingDetailed/PriceRatingDetailed.tsx

@@ -157,12 +157,8 @@ class PriceRatingDetailed extends React.Component<IPriceRatingDetailedProps, IPr
     const MIN_PRICE = 500;
     const MARGIN_OFFSET = price >= MIN_PRICE ? MIN_PRICE : (price / 2);
     const strings = {
-      general: `${getFormattedPrice((marginToLeft ? price - MARGIN_OFFSET : min) as number)} – ${getFormattedPrice((marginToRight ? price + MARGIN_OFFSET : max) as number)}\u00A0€`,
-      compact: <>
-          {getFormattedPrice((marginToLeft ? price - MARGIN_OFFSET : min) as number)}
-          <br />
-          {t(`${i18nPrefix}priceTo`)} {getFormattedPrice((marginToRight ? price + MARGIN_OFFSET : max) as number)} €
-        </>
+      general: `${getFormattedPrice(marginToLeft ? price - MARGIN_OFFSET : min)} – ${getFormattedPrice(marginToRight ? price + MARGIN_OFFSET : max)}\u00A0€`,
+      compact: <>{getFormattedPrice(marginToLeft ? price - MARGIN_OFFSET : min)}<br />{t(`${i18nPrefix}priceTo`)} {getFormattedPrice(marginToRight ? price + MARGIN_OFFSET : max)} €</>
     };
 
     return (

package/source/components/SearchFilters/filters/AlternativeID.tsx

@@ -1,4 +1,4 @@
-import React, { useState, KeyboardEvent } from 'react';
+import * as React from 'react';
 import TextField from '../../_common/TextField/TextField';
 import Button from '../../_common/Button/Button';
 import classNames from 'classnames';
@@ -11,58 +11,69 @@ interface IAlternativeIDProps {
   error: boolean;
   successTransition: boolean;
   autoDeId?: string;
-  onChange: (value: string) => void;
+  onChange: (value: any) => void;
   onKeyPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
 }
 
-const AlternativeID: React.FC<IAlternativeIDProps> = ({
-  t,
-  name,
-  successTransition,
-  autoDeId,
-  onChange,
-  error = false
-}) => {
-  const [value, setValue] = useState<string>(autoDeId || '');
+interface IAlternativeIDState {
+  value: string;
+}
 
-  const onFilterChange = (value: string) => {
-    setValue(value);
+class AlternativeID extends React.Component<IAlternativeIDProps, IAlternativeIDState> {
+  static defaultProps = {
+    error: false
   };
 
-  const handleSearchClick = () => {
-    onChange(value);
+  state = {
+    value: ''
   };
 
-  const onKeyAlternativeRedirect = (event: React.KeyboardEvent<HTMLInputElement>) => {
+  componentDidMount() { this.setState({ value: this.props.autoDeId }); }
+
+  onFilterChange = (value: string) => {
+    this.setState({ value });
+  };
+
+  handleSearchClick = () => {
+    const { value } = this.state;
+
+    this.props.onChange(value);
+  }
+
+  onKeyAlternativeRedirect = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    const { value } = this.state;
     if (event.key === 'Enter') {
-      onChange(value);
+      this.props.onChange(value);
     }
-  };
+  }
 
-  const inputProps = {
-    name,
-    placeholder: 'z.B: FCEE67',
-    value,
-    onChange: onFilterChange,
-    onKeyPress: (event: KeyboardEvent<HTMLInputElement>) => onKeyAlternativeRedirect(event)
-  };
+  render(): JSX.Element {
+    const { t, name, error, successTransition } = this.props;
+    const inputProps = {
+      name,
+      placeholder: 'z.B: FCEE67',
+      value: this.state.value,
+      onChange: this.onFilterChange,
+      onKeyPress: (event: React.KeyboardEvent<HTMLInputElement>) => this.onKeyAlternativeRedirect(event)
+    };
 
-  const buttonProps = {
-    onClick: handleSearchClick,
-    className: classNames(
-      styles.button,
-      { [styles.buttonWithError]: error },
-      { [styles.buttonIsFetching]: successTransition }
-      )
-  };
+    const buttonProps = {
+      onClick: this.handleSearchClick,
+      className: classNames(
+        styles.button,
+        { [styles.buttonWithError]: error },
+        { [styles.buttonIsFetching]: successTransition }
+        )
+    };
 
-  return (
-    <div>
-      <TextField {...inputProps} />
-      {error && <span className={styles.errorText}>{t('filters.alternativeErrorText')}</span>}
-      <Button {...buttonProps}>{t('filters.alternativeBtn')}</Button>
-    </div>
-  );
-};
+    return (
+      <div>
+        <TextField {...inputProps} />
+        {error && <span className={styles.errorText}>{t('filters.alternativeErrorText')}</span>}
+        <Button {...buttonProps}>{t('filters.alternativeBtn')}</Button>
+      </div>
+    );
+  }
+}
 
-export default AlternativeID;
+export default AlternativeID;

package/source/components/SearchFilters/filters/DriveType.tsx

@@ -14,7 +14,7 @@ export interface IDriveTypeProps {
 }
 
 class DriveType extends React.Component<IDriveTypeProps, {}> {
-  onDriveTypeChange = (event?: React.ChangeEvent<HTMLInputElement>, checked?: boolean | string,  value?: any): void => {
+  onDriveTypeChange = (event: React.ChangeEvent<HTMLInputElement>, checked: boolean, value: any): void => {
     const { values } = this.props;
     event.stopPropagation();
     event.nativeEvent.stopImmediatePropagation();

package/source/components/SearchFilters/filters/EmissionSticker.tsx

@@ -11,7 +11,7 @@ export interface IEmissionStickerProps {
 }
 
 class EmissionSticker extends React.Component<IEmissionStickerProps, {}> {
-  onFilterChange = (_event?: React.ChangeEvent<HTMLInputElement>, value?: any) => {
+  onFilterChange = (_event: any, value: string[]) => {
     this.props.onChange('OWNERS_OPTIONS', value);
   };
 

package/source/components/SearchFilters/filters/FirstRegistration.tsx

@@ -1,6 +1,7 @@
 import React, { memo } from 'react';
 import Slider from '../../_common/Slider/Slider';
 import _get from 'lodash/get';
+import { RANGE_FILTERS_DEFAULT_CONTROLS } from '../../../framework/constants/Search';
 import { sliceLessThan, sliceMoreThan } from '../../../framework/utils/CommonUtils';
 import { getSearchYears } from '../../../framework/utils/DateUtils';
 import MaterialAutocomplete from '../../_common/MaterialAutocomplete/MaterialAutocomplete';

package/source/components/SearchFilters/filters/InteriorColor.tsx

@@ -16,7 +16,7 @@ export interface IInteriorColorProps {
 }
 
 const InteriorColor = ({ onChange, values, options, aggregation, t, className }: IInteriorColorProps) => {
-  const onColorChange = (event?: React.ChangeEvent<HTMLInputElement>, checked?: boolean | string,  value?: any): void => {
+  const onColorChange = (event: React.ChangeEvent<HTMLInputElement>, checked: boolean, value: any): void => {
     event.stopPropagation();
     event.nativeEvent.stopImmediatePropagation();
     let _value = value;

package/source/components/SearchFilters/filters/InteriorMaterial.tsx

@@ -11,13 +11,12 @@ interface IInteriorMaterialProps {
   values: any[];
   aggregation?: any;
   t: (key: string) => string;
-  isHorizontal?: boolean;
 
   onChange?: (event: any, value: string[]) => void;
 }
 
 const InteriorMaterial = ({ options, values, aggregation, t, onChange }: IInteriorMaterialProps) => {
-  const onTypeChange = (event?: React.ChangeEvent<HTMLInputElement>, checked?: boolean | string,  value?: any): void => {
+  const onTypeChange = (event: React.ChangeEvent<HTMLInputElement>, checked: boolean, value: any): void => {
     event.stopPropagation();
     event.nativeEvent.stopImmediatePropagation();
     let _value = value;

package/source/components/SearchFilters/filters/Mileage.tsx

@@ -2,7 +2,7 @@ import React, { memo } from 'react';
 import _get from 'lodash/get';
 import { isEqual } from 'lodash';
 import Slider from '../../_common/Slider/Slider';
-import { MILLAGE_FIX } from '../../../framework/constants/Search';
+import { MILLAGE_FIX, RANGE_FILTERS_DEFAULT_CONTROLS } from '../../../framework/constants/Search';
 import { sliceLessThan, sliceMoreThan, numberWithDot } from '../../../framework/utils/CommonUtils';
 import styles from './commonFilters.styl';
 import MaterialAutocomplete from '../../_common/MaterialAutocomplete/MaterialAutocomplete';

package/source/components/SearchFilters/filters/Power.tsx

@@ -2,10 +2,10 @@ import React, { memo } from 'react';
 import Slider from '../../_common/Slider/Slider';
 import MaterialAutocomplete from '../../_common/MaterialAutocomplete/MaterialAutocomplete';
 import styles from './commonFilters.styl';
-import { isEqual, isNil } from 'lodash';
+import { isEqual } from 'lodash';
 import { RadioGroup } from '@mui/material';
 import CheckboxMaterial from '../../_common/CheckboxMaterial/CheckboxMaterial';
-import { POWER_FIX } from '../../../framework/constants/Search';
+import { POWER_FIX, RANGE_FILTERS_DEFAULT_CONTROLS } from '../../../framework/constants/Search';
 import { sliceLessThan, sliceMoreThan } from '../../../framework/utils/CommonUtils';
 
 interface IPowerProps {
@@ -17,18 +17,12 @@ interface IPowerProps {
   onChangeControls?: (name: string, value: any) => void;
   t?: any;
 }
-interface ITypeState {
-  type: string;
-}
 
-class Power extends React.Component<IPowerProps, ITypeState> {
+class Power extends React.Component<IPowerProps, {}> {
   constructor(props: IPowerProps) {
     super(props);
 
     this.name = 'POWER';
-    this.state = {
-      type: props.controls.type
-    };
   }
 
   private readonly name: string;
@@ -36,13 +30,10 @@ class Power extends React.Component<IPowerProps, ITypeState> {
 
   onDropDownChange = (name: string, value: any) => {
     const { controls, onChange, onChangeControls } = this.props;
-    const { type } = this.state;
-    const { from, to }: any = { ...controls, [name]: value };
+    const { from, to, type }: any = { ...controls, [name]: value };
     const controlsObj = { from, to, type };
     this.tempValues = { from, to };
-    if ((controlsObj.from === '' && controlsObj.to === '') || (!controlsObj.to && !controlsObj.from)) {
-      controlsObj.type = null;
-    }
+
     onChangeControls(this.name, controlsObj);
     onChange(this.name, controlsObj);
   };
@@ -50,16 +41,9 @@ class Power extends React.Component<IPowerProps, ITypeState> {
   onTypeChange = (_event: React.SyntheticEvent, value: any) => {
     const { controls, onChange, onChangeControls } = this.props;
     const values = this.tempValues ? this.tempValues : controls;
-    // this.type=value;
-    this.setState(() => ({
-      type: value
-    }));
-    if (!isNil(values.from) && !isNil(values.to)) {
-      if (values.from !== '' || values.to !== '') {
-        onChangeControls(this.name, { ...values, type: value });
-        onChange(this.name, { ...values, type: value });
-      }
-    }
+
+    onChangeControls(this.name, { ...values, type: value });
+    onChange(this.name, { ...values, type: value });
   };
 
   getOptions = (options: any) => options.map((option: string) => ({
@@ -78,9 +62,7 @@ class Power extends React.Component<IPowerProps, ITypeState> {
   };
 
   renderSlider = () => {
-    const { type } = this.state;
-
-    const { values, options, onChange, onChangeControls } = this.props;
+    const { values, options, onChange, onChangeControls, controls: { type } } = this.props;
     const sliderProps = {
       options,
       name: this.name,
@@ -88,6 +70,7 @@ class Power extends React.Component<IPowerProps, ITypeState> {
       values: this.transformValues(values),
       onChange: (value: any, name: string) => {
         this.tempValues = value;
+
         onChange(name, { ...value, type });
         onChangeControls(this.name, { ...value, type });
         // onChangeControls(this.name, { ...RANGE_FILTERS_DEFAULT_CONTROLS, type });
@@ -98,8 +81,8 @@ class Power extends React.Component<IPowerProps, ITypeState> {
   };
 
   renderRadioGroup = () => {
-    const { typeOptions } = this.props;
-    const { type } = this.state;
+    const { typeOptions, controls } = this.props;
+    const { type } = controls;
     const radioGroupProps = {
       value: type,
       name: 'POWER_TYPE',
@@ -123,16 +106,15 @@ class Power extends React.Component<IPowerProps, ITypeState> {
 
   render(): JSX.Element {
     const { t, controls } = this.props;
-    const { type } = this.state;
-    const { from = 0, to = 0 } = controls;
+    const { from = 0, to = 0, type } = controls;
     const commonProps = {
       size: 'custom'
     };
 
     const fromProps = {
       ...commonProps,
-      value: (from !== 0 ? `${from}` :0) || null,
-      label: this.getLabel('filters.from', type),
+      value: from || null,
+      label: this.getLabel('filters.from', controls.type),
       type: 'number',
       onChange: (value: any) => this.onDropDownChange('from', value),
       items: this.getOptions(sliceLessThan(POWER_FIX, to))
@@ -140,9 +122,9 @@ class Power extends React.Component<IPowerProps, ITypeState> {
 
     const toProps = {
       ...commonProps,
-      value: (to !== 0 ? `${to}` :0) || null,
+      value: to || null,
       type: 'number',
-      label: this.getLabel('filters.to', type),
+      label: this.getLabel('filters.to', controls.type),
       onChange: (value: any) => this.onDropDownChange('to', value),
       items: this.getOptions(sliceMoreThan(POWER_FIX, from))
     };
@@ -168,7 +150,6 @@ class Power extends React.Component<IPowerProps, ITypeState> {
 export default memo(Power, (prevProps: any, nextProps: any) => {
   return prevProps.controls.from === nextProps.controls.from &&
          prevProps.controls.to === nextProps.controls.to &&
-         prevProps.t === nextProps.t &&
          prevProps.controls.type === nextProps.controls.type &&
          prevProps.values.from === nextProps.values.from &&
          prevProps.values.to === nextProps.values.to &&

package/source/components/SearchFilters/filters/StateOptions.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import Checkbox from '../../_common/Checkbox/Checkbox';
 import styles from './StateOptions.styl';
 import FilterLabel from '../../_common/FilterLabel/FilterLabel';
 import CheckboxMaterial from '../../_common/CheckboxMaterial/CheckboxMaterial';

package/source/components/SearchFilters/filters/Transmission.tsx

@@ -14,7 +14,7 @@ export interface ITransmissionProps {
 }
 
 class Transmission extends React.Component<ITransmissionProps, {}> {
-  onTransmissionChange = (event?: React.ChangeEvent<HTMLInputElement>, checked?: boolean | string,  value?: any): void => {
+  onTransmissionChange = (event: React.ChangeEvent<HTMLInputElement>, checked: boolean, value: any): void => {
     const { values } = this.props;
     event.stopPropagation();
     event.nativeEvent.stopImmediatePropagation();

package/source/components/SearchPage/SearchChips/SearchChips.tsx

@@ -5,7 +5,7 @@ import ChipFilter from '../ChipFilter/ChipFilter';
 import { SearchPage as SearchPageTranslate } from '../../../locales/data';
 import Chip from '@mui/material/Chip';
 
-import { getChipFilterValue } from '../../../framework/utils/CommonUtils';
+import { getChipFilterValue, getFormattedPrice } from '../../../framework/utils/CommonUtils';
 
 export interface ISearchChipsProps {
   chips: any[];

package/source/components/SearchPageMobile/FiltersDetailed/BodyType.tsx

@@ -21,9 +21,9 @@ class BodyType extends React.Component<IBodyTypeBlock> {
       || !_isEqual(aggregation, nextProps.aggregation)
       || t !== nextProps.t;
   }
-  onBodyTypeCheckboxChange = (option: any) => (_event?: React.ChangeEvent<HTMLInputElement>, checked?: boolean | string) => this.onFilterChange(checked, option);
+  onBodyTypeCheckboxChange = (option: any) => (_: React.ChangeEvent<HTMLInputElement>, checked: boolean) => this.onFilterChange(checked, option);
 
-  onFilterChange = (_: boolean | string, fieldName: string): void => {
+  onFilterChange = (_: boolean, fieldName: string): void => {
     const { BODY_TYPE, onChange } = this.props;
     const bodyTypeField = 'BODY_TYPE';
     const values = [...BODY_TYPE.values];
@@ -37,7 +37,7 @@ class BodyType extends React.Component<IBodyTypeBlock> {
     onChange(bodyTypeField, values);
   };
 
-  renderLabel = (option: string, isChecked: boolean): JSX.Element => {
+  renderLabel = (option: string, isChecked: boolean): React.ReactNode => {
     const { t, aggregation } = this.props;
     // const agg = aggregation && aggregation[option] || 0;
     const agg = aggregation && aggregation[option] ? aggregation[option] : 0;

package/source/components/SearchPageMobile/FiltersDetailed/Consumption.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import _get from 'lodash/get';
 
 import styles from './Consumption.styl';
@@ -8,7 +8,7 @@ import { CONSUMPTION_FIX } from '../../../framework/constants/Search';
 export interface IConsumptionProps {
   values: any;
   options: any;
-  controls?: any;
+  controls: any;
   shortTitle?: boolean;
   onChange: (fieldName: string, fieldValue: any) => void;
   t?: (phrase: string) => string;

package/source/components/SearchPageMobile/FiltersDetailed/Doors.tsx

@@ -25,7 +25,7 @@ class Doors extends React.Component<IDoorsProps, IDoorsState> {
     };
   }
 
-  onFilterChange = (_:React.ChangeEvent<HTMLInputElement> | boolean, _checked?: string | boolean, fieldName?: any): void => {
+  onFilterChange = (_: boolean, checked?: boolean, fieldName?: string): void => {
     const { fieldValues } = this.props;
     let newValue: string[] = [...fieldValues];
 

package/source/components/SearchPageMobile/FiltersDetailed/MakeModel.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import _get from 'lodash/get';
 import styles from './MakeModel.styl';
 import MaterialSelect from '../../_common/MaterialSelect/MaterialSelect';

package/source/components/SearchWidget/ColorWidget/BodyColorWidget.tsx

@@ -39,7 +39,7 @@ const BodyColorWidget = ({
 
 }: IBodyColorWidgetProps) => {
 
-  const onColorChange = (event?: React.ChangeEvent<HTMLInputElement>, checked?: string | boolean, value?: any): void => {
+  const onColorChange = (event: React.ChangeEvent<HTMLInputElement>, checked: boolean, value: any): void => {
     event.stopPropagation();
     event.nativeEvent.stopImmediatePropagation();
     let _value = value;
@@ -55,7 +55,7 @@ const BodyColorWidget = ({
     onFilterChange('BODY_COLOR', _value);
   };
 
-  const onCheckboxClick = (_event?: React.ChangeEvent<HTMLInputElement>, value?: string | boolean): void => {
+  const onCheckboxClick = (_: React.ChangeEvent<HTMLInputElement>, value: boolean): void => {
     onFilterChange('METALLIC', value ? 'exterior_metallic' : '');
   };
 
@@ -72,7 +72,7 @@ const BodyColorWidget = ({
         content: option,
         value: option,
         className: styles.color,
-        labelPlacement: 'bottom' as 'bottom',
+        labelPlacement: 'bottom',
         checked: isChecked,
         label: <FilterLabel text={t(`cbd:${option}`)} agg={agg} isVertical={true}/>,
         onChange: onColorChange

package/source/components/SearchWidget/EnvironmentWidget/EnvironmentWidget.tsx

@@ -50,7 +50,7 @@ const EnvironmentWidget: React.FC<IEnvironmentWidgetProps> = ({
   const getConsumption = _get(CONSUMPTION, 'values.to');
   const getEmissionClass = _get(EMISSION_CLASS, 'values');
 
-  const onEmissionStickersChange = (event?: React.ChangeEvent<HTMLInputElement>, _checked?: string | boolean, value?: any) => {
+  const onEmissionStickersChange = (event: React.ChangeEvent<HTMLInputElement>, checked: boolean, value: any) => {
     event.stopPropagation();
     event.nativeEvent.stopImmediatePropagation();
     const { values } = EMISSION_STICKER;
@@ -63,7 +63,7 @@ const EnvironmentWidget: React.FC<IEnvironmentWidgetProps> = ({
     onFilterChange(EMISSION_STICKER_KEY, value);
   };
 
-  const onCheckboxClick = (_: React.ChangeEvent<HTMLElement>, value?: boolean | string): void => {
+  const onCheckboxClick = (_: React.ChangeEvent<HTMLElement>, value: boolean): void => {
     onFilterChange(PARTICULATE_FILTER_KEY, value ? 'engineData_particulateFilterDiesel' : '');
   };
 
@@ -132,7 +132,7 @@ const EnvironmentWidget: React.FC<IEnvironmentWidgetProps> = ({
           <MaterialAutocomplete
             size='custom'
             value={getConsumption ? getValue(getConsumption) : null}
-            onChange={(value: string) => onFilterChange(CONSUMPTION_KEY, { from: void 0, to: value } as any)}
+            onChange={(value: string) => onFilterChange(CONSUMPTION_KEY, { from: void 0, to: value })}
             label={t('filters.consumption')}
             unit='l/100 km'
             items={getOptions(CONSUMPTION_FIX)}

package/source/components/SearchWidget/HighlightsWidget/HighlightsWidget.tsx

@@ -29,7 +29,7 @@ export interface IHighlightsWidgetProps {
 
 class HighlightsWidget extends React.Component<IHighlightsWidgetProps, {}> {
 
-  onFilterChange = (event: React.ChangeEvent<HTMLInputElement>, checked?: boolean | string, value?: any) => {
+  onFilterChange = (event: React.ChangeEvent<HTMLInputElement>, checked: boolean, value: any) => {
     event.stopPropagation();
     event.nativeEvent.stopImmediatePropagation();
 
@@ -75,7 +75,7 @@ class HighlightsWidget extends React.Component<IHighlightsWidgetProps, {}> {
   };
 
   render(): JSX.Element {
-    const { t, Link } = this.props;
+    const { t, HIGHLIGHTS, Link } = this.props;
 
     return (
       <div className={styles.highlights}>

package/source/components/SearchWidget/StateWidget/StateWidget.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import Owners from '../../SearchFilters/filters/Owners';
 import MaterialSelect from '../../_common/MaterialSelect/MaterialSelect';
+import StateOptions from '../../SearchFilters/filters/StateOptions';
 import StateOptionsNew from '../../SearchFilters/filters/StateOptionsNew';
 import { VEHICLE_CONDITION_KEY, STATE_OPTIONS_KEY } from '../../../framework/constants/Search';
 import FilterLabel from '../../_common/FilterLabel/FilterLabel';
@@ -47,7 +48,7 @@ const StateWidget = (props: IStateWidgetProps) => {
     labelContainerClassName: styles.labelWrapper
   };
 
-  const getCheckboxClickHandler = (name: string) => (_: React.ChangeEvent<HTMLInputElement>, value?: boolean | string): void => {
+  const getCheckboxClickHandler = (name: string) => (_: React.ChangeEvent<HTMLInputElement>, value: boolean): void => {
     const { VEHICLE_CONDITION: { values, options } } = props;
     const currentValues: any = {};
     options.forEach((key: string) => { currentValues[key] = values.includes(key); });

package/source/components/SearchWidgetsMobile/BasicDataWidgetMobile/BasicDataWidgetMobile.tsx

@@ -12,7 +12,7 @@ import Mileage from '../../SearchPageMobile/FiltersDetailed/Mileage';
 import Consumption from '../../SearchPageMobile/FiltersDetailed/Consumption';
 import FirstRegistration from '../../SearchPageMobile/FiltersDetailed/FirstRegistration';
 import MakeModel, { IMakeModelProps } from '../../SearchPageMobile/FiltersDetailed/MakeModel';
-import { IMakeModelExcludeProps } from '../../SearchPageMobile/FiltersDetailed/MakeModelExclude';
+import MakeModelExclude, { IMakeModelExcludeProps } from '../../SearchPageMobile/FiltersDetailed/MakeModelExclude';
 import { COST_TYPE_DEFAULT, COST_TYPE_OPTIONS, RANGE_FILTERS, RANGE_FILTERS_DEFAULT_CONTROLS } from '../../../framework/constants/Search';
 import { OBJECT_FILTERS, RATE_DEFAULT_CONTROLS } from '../../../framework/constants/SearchWidget';
 
@@ -32,7 +32,7 @@ class BasicDataWidgetMobile extends React.Component<IMakeModelProps & IMakeModel
   };
 
   shouldComponentUpdate(nextProps: any, nextState: any) {
-    const { MMS_GROUPS, BODY_TYPE, FIRST_REGISTRATION, MILEAGE, POWER, RATE, PRICE, CONSUMPTION, SEATS, DOORS, FUEL, t } = this.props;
+    const { MMS_GROUPS, BODY_TYPE, FIRST_REGISTRATION, MILEAGE, POWER, RATE, PRICE, CONSUMPTION, SEATS, DOORS, FUEL, t, isNotDetailed } = this.props;
 
     const dataBlocks = {
       MMS_GROUPS, BODY_TYPE, FIRST_REGISTRATION, MILEAGE, POWER, RATE, PRICE, CONSUMPTION, SEATS, DOORS, FUEL
@@ -66,8 +66,8 @@ class BasicDataWidgetMobile extends React.Component<IMakeModelProps & IMakeModel
   render(): React.ReactNode {
     const {
       MMS_GROUPS, BODY_TYPE, FIRST_REGISTRATION, MILEAGE, POWER, RATE, PRICE, CONSUMPTION, SEATS, DOORS, FUEL,
-      onFilterChange, onChangeFilterControls, onRemoveMmsGroup, onDropDownFocus,
-      t, showModal, hideModal, onAddMmsGroupClick, isNotDetailed
+      onFilterChange, onChangeFilterControls, onAddMmsGroup, onRemoveMmsGroup, onDropDownFocus,
+      MM_GROUPS_EXCLUDE, onAddMmExcludeGroup, onRemoveMmExcludeGroup, t, showModal, hideModal, onAddMmsGroupClick, isNotDetailed
     } = this.props;
     const commonProps = { t, onChange: onFilterChange };
 

package/source/components/SearchWidgetsMobile/EquipmentsWidget/EquipmentsWidget.tsx

@@ -39,7 +39,7 @@ const EquipmentsWidget = (props: IEquipmentsWidget) => {
     CLIMATISATION, HEATER, MULTIMEDIA, SEATS_OPTIONS, WHEEL, LIGHTS, DOORS_OPTIONS, WINDOW_OPTIONS,
     MIRRORS_OPTIONS, LANDING_GEAR, EXTRAS_OPTIONS, DRIVER_SEATS, CO_DRIVER_SEATS, BACK_SEATS, HIGHLIGHTS,
     onFilterChange,
-    // onDropDownFocus,
+    onDropDownFocus,
     onCategoryFocus,
     t } = props;
   const onCheckboxClick = (fieldName: string, categoryName: string, values: string[]): void => {
@@ -116,11 +116,11 @@ const EquipmentsWidget = (props: IEquipmentsWidget) => {
     return onFilterChange(categoryName, values);
   };
 
-  // const onDropdownFocus = (fieldName: string) => {
-  //   if (onDropDownFocus) {
-  //     onDropDownFocus(fieldName);
-  //   }
-  // };
+  const onDropdownFocus = (fieldName: string) => {
+    if (onDropDownFocus) {
+      onDropDownFocus(fieldName);
+    }
+  };
 
   const getOptions = (options: any, categoryName?: string) => {
     const { [categoryName]: { aggregation } } = props;
@@ -134,16 +134,16 @@ const EquipmentsWidget = (props: IEquipmentsWidget) => {
     });
   };
 
-  // const isDropDown = (name: string) => {
-  //   switch (name) {
-  //     case 'DRIVER_SEATS':
-  //     case 'CO_DRIVER_SEATS':
-  //     case 'BACK_SEATS':
-  //       return true;
-  //     default:
-  //       return false;
-  //   }
-  // };
+  const isDropDown = (name: string) => {
+    switch (name) {
+      case 'DRIVER_SEATS':
+      case 'CO_DRIVER_SEATS':
+      case 'BACK_SEATS':
+        return true;
+      default:
+        return false;
+    }
+  };
 
   const renderDropDown = (index: number, categoryName?: string, data?: any, isMobile?: boolean): React.ReactNode => {
     const { options, values } = data;