@bytebrand/fe-ui-core 4.2.97 → 4.2.99

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.2.97",
+  "version": "4.2.99",
   "description": "UI components for the auto.de project",
   "main": "index.ts",
   "module": "dist/common.js",

package/source/components/AccordionWidget/AccordionWidget.tsx

@@ -15,6 +15,7 @@ import {
 
 import ExpansionPanel from '../_common/ExpansionPanel/ExpansionPanel';
 import Accordion from '../_common/AccordionWrapper/AccordionWrapper';
+// import AccordionItem from '../_common/AccordionWrapper/AccordionItem/AccordionItem';
 import VehicleProperty from '../VehicleSmallCard/VehicleData/VehicleProperty/VehicleProperty';
 import IconSVG from '../_common/IconSVG/IconSVG';
 import { getActualHighlights } from '../../framework/constants/highlights';
@@ -34,7 +35,7 @@ class AccordionWidget extends React.Component<IAccardionSectionProps, IAccardion
   }
 
   handleChange =
-      (panel: string) => (_: React.SyntheticEvent, isExpanded: boolean) => {
+      (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
         this.setState({ expanded: isExpanded ? panel : false });
       };
 
@@ -209,6 +210,7 @@ class AccordionWidget extends React.Component<IAccardionSectionProps, IAccardion
                 onChange={this.handleChange}
                 expanded={this.state.expanded}
                 defaultExpanded={section.expanded}
+                // titleClassName={styles.titleClassName}
               >
                 {section.component}
               </ExpansionPanel>

package/source/components/OfferDetailedSection/partials/PanelConfig.tsx

@@ -23,6 +23,8 @@ const PanelConfig: React.FunctionComponent<IPanelConfigProps> = ({
   OfferBlockComponent,
   offerBlockProps,
   postfix,
+  isOpenDetails,
+  onToggleDetailsClick,
   isAlternative
 }) => {
   const requestOfferProps = {

package/source/components/OfferPanel/MuiOfferPeriod/{MuiOfferPeriod.theme.jsx → MuiOfferPeriod.theme.js}

@@ -3,9 +3,11 @@ import { createTheme } from '@mui/material/styles';
 export const theme = createTheme({
   components: {
     MuiToggleButton: {
-      styleOverrides: {
-        root: ({ ownerState: { variant } }) => ({
-          ...(variant === 'sidebar' && {
+      variants: [
+        {
+          props: { variant: 'sidebar' },
+          style: {
+            width: 40,
             height: 41,
             color: '#333',
             width: '100%',
@@ -16,10 +18,13 @@ export const theme = createTheme({
             '&.Mui-selected:hover': {
               backgroundColor: '#005ccb',
               color: '#fff'
-            }
-          })
-        })
-      }
+            },
+            // '&:hover': {
+            //   backgroundColor: 'transparent'
+            // }
+          }
+        }
+      ]
     }
   }
 });

package/source/components/OfferPanel/MuiOfferPeriod/MuiOfferPeriod.tsx

@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import _get from 'lodash/get';
 import styles from '../OfferPanel.styl';
 import { modalsTranslate } from '../../../locales/data';
-import ToggleButton, { ToggleButtonProps } from '@mui/material/ToggleButton';
+import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import { ThemeProvider } from '@mui/material/styles';
 import { theme } from './MuiOfferPeriod.theme';
@@ -14,24 +14,6 @@ export interface IOfferPeriod {
   onChange: (key: string, value: number) => void;
 }
 
-type ToggleButtonVariant =
-  | 'text'
-  | 'outlined'
-  | 'contained'
-  | 'sidebar';
-
-interface CustomToggleButtonProps extends Omit<ToggleButtonProps, 'variant'> {
-  variant: ToggleButtonVariant;
-}
-
-const MyCustomToggleButton: FC<CustomToggleButtonProps> = (props) => {
-  return (
-    <ToggleButton {...props}>
-      {props.children}
-    </ToggleButton>
-  );
-};
-
 const OfferPeriod: FC<IOfferPeriod> = ({ paybackPeriod, periods, t, onChange }) => {
 
   return (
@@ -45,19 +27,13 @@ const OfferPeriod: FC<IOfferPeriod> = ({ paybackPeriod, periods, t, onChange })
           color='primary'
           value={paybackPeriod}
           exclusive
-          onChange={(event) => {
-            onChange('paybackPeriod', +(event.target as HTMLInputElement).value);
+          onChange={(e) => {
+            onChange('paybackPeriod', +e.target.value);
           }}
         >
           {periods.map((period) => {
             return (
-              <MyCustomToggleButton
-                variant={'sidebar'}
-                key={period}
-                value={period}
-              >
-                {period}
-              </MyCustomToggleButton>
+              <ToggleButton variant='sidebar' key={period} value={period}>{period}</ToggleButton>
             );
           })}
         </ToggleButtonGroup>

package/source/components/OfferPanel/OfferCheckboxGroup/CheckboxContainer.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import styles from './OfferCheckboxGroup.styl';
 import classnames from 'classnames';
 // import FormattedNumber from '../../FormattedNumber/FormattedNumber';
@@ -22,13 +22,11 @@ export interface ICheckboxProps {
   containerClassName?: string;
   checkboxClassName?: string;
   labelClassName?: string;
-  labelPlacement?: "end" | "start" | "top" | "bottom";
   tooltipDescription?: string;
   checkboxPriceValue: any;
   tooltipPosX?: string;
   error?: boolean;
-  description?: string;
-  label?: JSX.Element | string | null;
+  label?: JSX.Element | string | null | ReactNode;
 }
 
 class CheckboxContainer extends React.Component<ICheckboxProps, {}> {
@@ -89,8 +87,8 @@ class CheckboxContainer extends React.Component<ICheckboxProps, {}> {
 
   render() {
     const {
-      containerClassName, labelClassName, reversed,
-      checked, disabled, error, label, tooltipDescription, labelPlacement,
+      containerClassName, checkboxClassName, labelClassName, reversed,
+      checked, disabled, value, error, label, tooltipDescription, checkboxPriceValue, tooltipPosX, labelPlacement,
       description
     } = this.props;
 
@@ -107,6 +105,12 @@ class CheckboxContainer extends React.Component<ICheckboxProps, {}> {
       labelClassName
     );
 
+    const checkboxClasses = classnames(
+      styles.checkbox,
+      checkboxClassName,
+      { [styles.withLabel]: !!label }
+    );
+
     const wrapInputClasses = classnames(
       styles.wrapInput,
       { [styles.reversed]: reversed }

package/source/components/OfferPanel/OfferCheckboxGroup/OfferCheckboxGroup.tsx

@@ -11,7 +11,7 @@ interface IOfferPeriod {
   transferInstallments?: any;
 }
 
-const OfferCheckboxGroup: FC<IOfferPeriod> = ({ additionalService, transferInstallments, isAboAccordionExpanded0 = true, priceTabIndex }) => {
+const OfferCheckboxGroup: FC<IOfferPeriod> = ({ additionalService, transferInstallments, isAboAccordionExpanded0 = true, priceTabIndex, labelClassname }) => {
   const offerGroupClass = classNames(styles.checkboxWrapped, { [styles.checkBoxGroup]: priceTabIndex !== THREE });
   return (
     <div className={offerGroupClass}>

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/PriceRatingDetailed/PriceRatingDetailed.tsx

@@ -157,8 +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/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/Fuel.tsx

@@ -10,7 +10,7 @@ interface IFuelProps {
   values: any[];
   aggregation?: any;
   t?: any;
-  isNotDetailed:boolean;
+  isNotDetailed?: boolean;
   onChange: (fieldName: string, fieldValue: string[]) => void;
 }
 

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

@@ -5,7 +5,7 @@ import styles from './commonFilters.styl';
 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 {

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;

package/source/components/SearchWidgetsMobile/HighlightsWidgetMobile/HighlightsWidgetMobile.tsx

@@ -36,7 +36,7 @@ const HighlightsWidgetMobile = ({ onFilterChange, HIGHLIGHTS, t }: IHighlightsWi
     onFilterChange(HIGHLIGHTS_KEY, value);
   };
 
-  const onHighlightsChange = (event: React.ChangeEvent<HTMLInputElement>, checked?: boolean | string, value?: any): void => {
+  const onHighlightsChange = (event: React.ChangeEvent<HTMLInputElement>, checked: boolean, value: any): void => {
     const { values } = HIGHLIGHTS;
     event.stopPropagation();
     event.nativeEvent.stopImmediatePropagation();

package/source/components/SearchWidgetsMobile/InteriorWidget/InteriorWidget.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import InteriorColor from '../../SearchFilters/filters/InteriorColor';
 import InteriorMaterial from '../../SearchFilters/filters/InteriorMaterial';
 

package/source/components/SearchWidgetsMobile/SafetyWidget/SafetyWidget.tsx

@@ -22,7 +22,7 @@ export interface ISafetyWidget {
 const AIRBAG_KEY = 'AIRBAG';
 
 const SafetyWidget = (props: ISafetyWidget) => {
-  const { ASSISTANTS, AIRBAG, PARKING_ASSISTANTS, THEFT_PROTECTION, HIGHLIGHTS, onFilterChange, t } = props;
+  const { ASSISTANTS, AIRBAG, PARKING_ASSISTANTS, THEFT_PROTECTION, HIGHLIGHTS, onFilterChange, onDropDownFocus, t } = props;
   const onCheckboxClick = (fieldName: string, categoryName: string, values: string[]) => {
     const index = values.indexOf(fieldName);
 
@@ -40,11 +40,11 @@ const SafetyWidget = (props: ISafetyWidget) => {
     return onFilterChange(AIRBAG_KEY, values);
   };
 
-  // const onDropdownFocus = () => {
-  //   if (onDropDownFocus) {
-  //     onDropDownFocus(AIRBAG_KEY);
-  //   }
-  // };
+  const onDropdownFocus = () => {
+    if (onDropDownFocus) {
+      onDropDownFocus(AIRBAG_KEY);
+    }
+  };
 
   const getOptions = (_: string, options: any) => {
     const { aggregation } = AIRBAG;