@bytebrand/fe-ui-core 4.2.96 → 4.2.97

package/package.json

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

package/source/components/AccordionWidget/AccordionWidget.tsx

@@ -15,7 +15,6 @@ 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';
@@ -35,7 +34,7 @@ class AccordionWidget extends React.Component<IAccardionSectionProps, IAccardion
   }
 
   handleChange =
-      (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
+      (panel: string) => (_: React.SyntheticEvent, isExpanded: boolean) => {
         this.setState({ expanded: isExpanded ? panel : false });
       };
 
@@ -210,7 +209,6 @@ 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,8 +23,6 @@ const PanelConfig: React.FunctionComponent<IPanelConfigProps> = ({
   OfferBlockComponent,
   offerBlockProps,
   postfix,
-  isOpenDetails,
-  onToggleDetailsClick,
   isAlternative
 }) => {
   const requestOfferProps = {

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

@@ -3,11 +3,9 @@ import { createTheme } from '@mui/material/styles';
 export const theme = createTheme({
   components: {
     MuiToggleButton: {
-      variants: [
-        {
-          props: { variant: 'sidebar' },
-          style: {
-            width: 40,
+      styleOverrides: {
+        root: ({ ownerState: { variant } }) => ({
+          ...(variant === 'sidebar' && {
             height: 41,
             color: '#333',
             width: '100%',
@@ -18,13 +16,10 @@ 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 from '@mui/material/ToggleButton';
+import ToggleButton, { ToggleButtonProps } from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import { ThemeProvider } from '@mui/material/styles';
 import { theme } from './MuiOfferPeriod.theme';
@@ -14,6 +14,24 @@ 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 (
@@ -27,13 +45,19 @@ const OfferPeriod: FC<IOfferPeriod> = ({ paybackPeriod, periods, t, onChange })
           color='primary'
           value={paybackPeriod}
           exclusive
-          onChange={(e) => {
-            onChange('paybackPeriod', +e.target.value);
+          onChange={(event) => {
+            onChange('paybackPeriod', +(event.target as HTMLInputElement).value);
           }}
         >
           {periods.map((period) => {
             return (
-              <ToggleButton variant='sidebar' key={period} value={period}>{period}</ToggleButton>
+              <MyCustomToggleButton
+                variant={'sidebar'}
+                key={period}
+                value={period}
+              >
+                {period}
+              </MyCustomToggleButton>
             );
           })}
         </ToggleButtonGroup>

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

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import styles from './OfferCheckboxGroup.styl';
 import classnames from 'classnames';
 // import FormattedNumber from '../../FormattedNumber/FormattedNumber';
@@ -22,11 +22,13 @@ export interface ICheckboxProps {
   containerClassName?: string;
   checkboxClassName?: string;
   labelClassName?: string;
+  labelPlacement?: "end" | "start" | "top" | "bottom";
   tooltipDescription?: string;
   checkboxPriceValue: any;
   tooltipPosX?: string;
   error?: boolean;
-  label?: JSX.Element | string | null | ReactNode;
+  description?: string;
+  label?: JSX.Element | string | null;
 }
 
 class CheckboxContainer extends React.Component<ICheckboxProps, {}> {
@@ -87,8 +89,8 @@ class CheckboxContainer extends React.Component<ICheckboxProps, {}> {
 
   render() {
     const {
-      containerClassName, checkboxClassName, labelClassName, reversed,
-      checked, disabled, value, error, label, tooltipDescription, checkboxPriceValue, tooltipPosX, labelPlacement,
+      containerClassName, labelClassName, reversed,
+      checked, disabled, error, label, tooltipDescription, labelPlacement,
       description
     } = this.props;
 
@@ -105,12 +107,6 @@ 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, labelClassname }) => {
+const OfferCheckboxGroup: FC<IOfferPeriod> = ({ additionalService, transferInstallments, isAboAccordionExpanded0 = true, priceTabIndex }) => {
   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, value: any) => void;
+  onChange?: (event?: React.ChangeEvent<HTMLInputElement>, checked?: boolean | string,  value?: any) => void;
   reversed?: boolean;
   value: string;
 }

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

@@ -1,6 +1,5 @@
 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';
@@ -22,9 +21,6 @@ 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)} – ${getFormattedPrice(marginToRight ? price + MARGIN_OFFSET : max)}\u00A0€`,
-      compact: <>{getFormattedPrice(marginToLeft ? price - MARGIN_OFFSET : min)}<br />{t(`${i18nPrefix}priceTo`)} {getFormattedPrice(marginToRight ? price + MARGIN_OFFSET : max)} €</>
+      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)} €</>
     };
 
     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, value: any): void => {
+  onDriveTypeChange = (event?: React.ChangeEvent<HTMLInputElement>, checked?: boolean | string,  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: any, value: string[]) => {
+  onFilterChange = (_event?: React.ChangeEvent<HTMLInputElement>, value?: any) => {
     this.props.onChange('OWNERS_OPTIONS', value);
   };
 

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

@@ -1,7 +1,6 @@
 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, value: any): void => {
+  const onColorChange = (event?: React.ChangeEvent<HTMLInputElement>, checked?: boolean | string,  value?: any): void => {
     event.stopPropagation();
     event.nativeEvent.stopImmediatePropagation();
     let _value = value;

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

@@ -11,12 +11,13 @@ 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, value: any): void => {
+  const onTypeChange = (event?: React.ChangeEvent<HTMLInputElement>, checked?: boolean | string,  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, RANGE_FILTERS_DEFAULT_CONTROLS } from '../../../framework/constants/Search';
+import { MILLAGE_FIX } 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, RANGE_FILTERS_DEFAULT_CONTROLS } from '../../../framework/constants/Search';
+import { POWER_FIX } from '../../../framework/constants/Search';
 import { sliceLessThan, sliceMoreThan } from '../../../framework/utils/CommonUtils';
 
 interface IPowerProps {

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

@@ -1,6 +1,5 @@
 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, value: any): void => {
+  onTransmissionChange = (event?: React.ChangeEvent<HTMLInputElement>, checked?: boolean | string,  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, getFormattedPrice } from '../../../framework/utils/CommonUtils';
+import { getChipFilterValue } 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) => (_: React.ChangeEvent<HTMLInputElement>, checked: boolean) => this.onFilterChange(checked, option);
+  onBodyTypeCheckboxChange = (option: any) => (_event?: React.ChangeEvent<HTMLInputElement>, checked?: boolean | string) => this.onFilterChange(checked, option);
 
-  onFilterChange = (_: boolean, fieldName: string): void => {
+  onFilterChange = (_: boolean | string, 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): React.ReactNode => {
+  renderLabel = (option: string, isChecked: boolean): JSX.Element => {
     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, { memo } from 'react';
+import React 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 = (_: boolean, checked?: boolean, fieldName?: string): void => {
+  onFilterChange = (_:React.ChangeEvent<HTMLInputElement> | boolean, _checked?: string | boolean, fieldName?: any): void => {
     const { fieldValues } = this.props;
     let newValue: string[] = [...fieldValues];
 

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

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React 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: boolean, value: any): void => {
+  const onColorChange = (event?: React.ChangeEvent<HTMLInputElement>, checked?: string | boolean, value?: any): void => {
     event.stopPropagation();
     event.nativeEvent.stopImmediatePropagation();
     let _value = value;
@@ -55,7 +55,7 @@ const BodyColorWidget = ({
     onFilterChange('BODY_COLOR', _value);
   };
 
-  const onCheckboxClick = (_: React.ChangeEvent<HTMLInputElement>, value: boolean): void => {
+  const onCheckboxClick = (_event?: React.ChangeEvent<HTMLInputElement>, value?: string | boolean): void => {
     onFilterChange('METALLIC', value ? 'exterior_metallic' : '');
   };
 
@@ -72,7 +72,7 @@ const BodyColorWidget = ({
         content: option,
         value: option,
         className: styles.color,
-        labelPlacement: 'bottom',
+        labelPlacement: 'bottom' as '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: boolean, value: any) => {
+  const onEmissionStickersChange = (event?: React.ChangeEvent<HTMLInputElement>, _checked?: string | 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): void => {
+  const onCheckboxClick = (_: React.ChangeEvent<HTMLElement>, value?: boolean | string): 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 })}
+            onChange={(value: string) => onFilterChange(CONSUMPTION_KEY, { from: void 0, to: value } as any)}
             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, value: any) => {
+  onFilterChange = (event: React.ChangeEvent<HTMLInputElement>, checked?: boolean | string, value?: any) => {
     event.stopPropagation();
     event.nativeEvent.stopImmediatePropagation();
 
@@ -75,7 +75,7 @@ class HighlightsWidget extends React.Component<IHighlightsWidgetProps, {}> {
   };
 
   render(): JSX.Element {
-    const { t, HIGHLIGHTS, Link } = this.props;
+    const { t, Link } = this.props;
 
     return (
       <div className={styles.highlights}>

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

@@ -1,7 +1,6 @@
 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';
@@ -48,7 +47,7 @@ const StateWidget = (props: IStateWidgetProps) => {
     labelContainerClassName: styles.labelWrapper
   };
 
-  const getCheckboxClickHandler = (name: string) => (_: React.ChangeEvent<HTMLInputElement>, value: boolean): void => {
+  const getCheckboxClickHandler = (name: string) => (_: React.ChangeEvent<HTMLInputElement>, value?: boolean | string): 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 MakeModelExclude, { IMakeModelExcludeProps } from '../../SearchPageMobile/FiltersDetailed/MakeModelExclude';
+import { 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, isNotDetailed } = this.props;
+    const { MMS_GROUPS, BODY_TYPE, FIRST_REGISTRATION, MILEAGE, POWER, RATE, PRICE, CONSUMPTION, SEATS, DOORS, FUEL, t } = 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, onAddMmsGroup, onRemoveMmsGroup, onDropDownFocus,
-      MM_GROUPS_EXCLUDE, onAddMmExcludeGroup, onRemoveMmExcludeGroup, t, showModal, hideModal, onAddMmsGroupClick, isNotDetailed
+      onFilterChange, onChangeFilterControls, onRemoveMmsGroup, onDropDownFocus,
+      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, value: any): void => {
+  const onHighlightsChange = (event: React.ChangeEvent<HTMLInputElement>, checked?: boolean | string, value?: any): void => {
     const { values } = HIGHLIGHTS;
     event.stopPropagation();
     event.nativeEvent.stopImmediatePropagation();

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

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React 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, onDropDownFocus, t } = props;
+  const { ASSISTANTS, AIRBAG, PARKING_ASSISTANTS, THEFT_PROTECTION, HIGHLIGHTS, onFilterChange, 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;

package/source/components/Stepper/Stepper.tsx

@@ -12,14 +12,15 @@ export interface IProps {
   children: React.ReactElement<IStepProps>[];
   onStepChange?: (nextStep: number) => void;
   className?: string;
+  completed?: boolean;
 }
 
 const defaultStepsDivider: React.ReactElement<IStepsDividerProps> = <StepsDivider/>;
 
 const Stepper: React.FunctionComponent<IProps> = ({ currentStep, nonLinear, stepsDivider = defaultStepsDivider, onStepChange, children, className }) => {
-  const childrenArray: React.ReactElement<IStepProps>[] = React.Children.toArray<React.ReactElement<IStepProps>>(children);
-  const steps = childrenArray.map((child, index) => {
-    if (!React.isValidElement(child)) {
+  const childrenArray: any | { props: IStepProps }[] = React.Children.toArray(children);
+  const steps = childrenArray.map((child: { props: IStepProps }, index: number) => {
+    if (!React.isValidElement<IStepProps>(child)) {
       throw new Error('Stepper component has invalid child');
     }
 

package/source/components/UserDashboardPage/sections/OrderStatusSection/OrderStatusCar.tsx

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect, useState } from 'react';
 import styles from './OrderStatusSection.styl';
 import OrderStatusCard from './OrderStatusCard';
-import Image from '../../../_common/Image/Image';
+// import Image from '../../../_common/Image/Image';
 import { getFormattedPrice } from '../../../../framework/utils/CommonUtils';
 
 // tslint:disable-next-line:interface-name

package/source/components/UserDashboardPage/sections/RequestedCarsSection/RequestedCarsSection.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import styles from './RequestedCarsSection.styl';
 
 import Slider from 'react-slick';
@@ -10,9 +10,6 @@ import { getFormattedPrice } from '../../../../framework/utils/CommonUtils';
 // import { history } from '../../../../../AppRouter';
 import Button from '../../../_common/Button/Button';
 
-interface IWithRouter {
-  children?: JSX.Element;
-}
 // tslint:disable-next-line:interface-name
 interface TFunction {
   <T = string>(key: string, options?: object): T;

package/source/components/_common/CheckboxMaterial/CheckboxMaterial.tsx

@@ -26,7 +26,7 @@ export interface ICheckboxProps {
   checkedIcon?: any;
   className?: string;
   type?: string;
-  content?: string;
+  content?: string | JSX.Element;
   radio?: boolean;
   formControlClassName?: string;
   contentType?: string;

package/source/components/_common/Chip/Chip.tsx

@@ -7,13 +7,12 @@ export interface IChip {
 }
 
 export interface IChipProps {
-  className?: string;
   chip: IChip;
   onClick?: (event: React.MouseEvent, chip: IChip) => void;
   onDelete?: (event: React.MouseEvent, chip: IChip) => void;
 }
 
-const ChipLanding: React.FunctionComponent<IChipProps> = ({ chip, className, onClick, onDelete }) => {
+const ChipLanding: React.FunctionComponent<IChipProps> = ({ chip, onClick, onDelete }) => {
   const { key, value } = chip;
   const onDeleteHandler = (event: any) => { event.stopPropagation(); onDelete(event, chip); };
   const onClickHandler = (event: any) => { event.stopPropagation(); onClick(event, chip); };
@@ -31,7 +30,6 @@ const ChipLanding: React.FunctionComponent<IChipProps> = ({ chip, className, onC
 };
 
 ChipLanding.defaultProps = {
-  className: '',
   chip: { key: '', value: '' },
   onClick: () => {},
   onDelete: () => {}

package/source/components/_common/ExpansionPanel/ExpansionPanel.tsx

@@ -8,10 +8,10 @@ import { ThemeProvider } from '@mui/material/styles';
 import { Theme } from './ExpansionPanel.styled';
 
 export interface IExpansionPanelProps {
-  title?: string | JSX.Element;
+  title?: string;
   subTitle?: string;
   defaultExpanded?: boolean;
-  onChange?: (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => void;
+  onChange?: any; // TODO: understand how this onchange works and where it is used and write the correct types
   className?: string;
   children?: any;
   reactScrollName?: string; // property "name" for "Element" component of "react-scroll" library
@@ -71,7 +71,7 @@ class ExpansionPanel extends React.Component<IExpansionPanelProps> {
           <Accordion
             defaultExpanded={defaultExpanded}
             onChange={isCompare ? onChange : onChange && onChange(reactScrollName)}
-            expanded={isCompare ? expanded : expanded && (expanded === reactScrollName)}
+            expanded={(isCompare && typeof expanded === 'boolean') ? expanded : expanded && (expanded === reactScrollName)}
             className={accordionClassName}
           >
             <AccordionSummary

package/source/components/_common/IconSVG/SVG/flags/SK.tsx

@@ -1,5 +1,4 @@
 /* tslint:disable */
-import { fill } from "lodash";
 import * as React from "react";
 
 const SK = (props: any) => (

package/source/components/_common/MaterialAccordion/MaterialAccordion.tsx

@@ -3,8 +3,7 @@ import { Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
 import IconSVG from '../IconSVG/IconSVG';
 import {
   ThemeProvider,
-  createTheme,
-  experimental_sx as sx
+  createTheme
 } from '@mui/material/styles';
 
 export interface IItem {
@@ -18,7 +17,9 @@ export interface IAccordionProps {
 
   defaultOpened?: number;
 
-  variant?: string;
+  variant?: any;
+
+  expandedDefault?: string;
 }
 
 declare module '@mui/material/AccordionSummary' {
@@ -46,10 +47,9 @@ const MaterialAccordion = (
   const theme = createTheme({
     components: {
       MuiAccordion: {
-        variants: [
-          {
-            props: { variant: 'searchDetailed' },
-            style: {
+        styleOverrides: {
+          root: () => ({
+            ...(variant === 'searchDetailed' && {
               margin: 0,
               '&.Mui-expanded': {
                 margin: 0
@@ -57,11 +57,8 @@ const MaterialAccordion = (
               '&.MuiAccordion-root:before': {
                 opacity: 0
               }
-            }
-          },
-          {
-            props: { variant: 'searchDetailedSmall' },
-            style: {
+            }),
+            ...(variant === 'searchDetailedSmall' && {
               margin: 0,
               boxShadow: 'none',
               '&.Mui-expanded': {
@@ -70,32 +67,28 @@ const MaterialAccordion = (
               '&.MuiAccordion-root:before': {
                 opacity: 0
               }
-            }
-          }
-        ]
+            })
+          })
+        }
       },
       MuiAccordionSummary: {
-        variants: [
-          {
-            props: { variant: 'searchDetailed' },
-            style: {
+        styleOverrides: {
+          root: () => ({
+            ...(variant === 'searchDetailed' && {
               color: '#005ccb',
               fontWeight: 'bold',
               fontSize: 14,
               '&.Mui-expanded': {
                 borderBottom: '1px solid #e8e8e8'
               }
-            }
-          },
-          {
-            props: { variant: 'searchDetailedSmall' },
-            style: {
+            }),
+            ...(variant === 'searchDetailedSmall' && {
               color: '1f1f1f',
               fontWeight: 'bold',
               fontSize: 14
-            }
-          }
-        ]
+            })
+          })
+        }
       }
     }
   });
@@ -104,10 +97,10 @@ const MaterialAccordion = (
     const [expanded, setExpanded] = useState(expandedDefault || false);
 
     const handleChange =
-      (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
+      (panel: string) => (_: React.SyntheticEvent, isExpanded: boolean) => {
         setExpanded(isExpanded ? panel : false);
       };
-    return items.map((item: any, index: number) => {
+    return items.map((item: { title: string, content: any }, index: number) => {
       return (
         <ThemeProvider theme={theme}>
           <Accordion
@@ -120,7 +113,6 @@ const MaterialAccordion = (
               expandIcon={<IconSVG name={'arrowSelect'} customDimensions />}
               aria-controls={item.title}
               id={item.title}
-              variant={variant}
               sx={{
                 borderBottom: '1px solid #e8e8e8',
                 borderImageWidth: 0

package/source/components/_common/MaterialDatePicker/MaterialDatePicker.styled.tsx

@@ -6,7 +6,6 @@ export const Theme = createTheme({
       styleOverrides: {
         input: ({ ownerState: { size } }: { ownerState: { size?: 'smaller' | 'custom' | 'normal' | 'small' | 'medium' } }) => ({
           ...(size === 'smaller' && {
-            // tslint:disable-line
             height: 28,
             boxSizing: 'border-box'
           }),

package/source/components/_common/MaterialSelect/MaterialSelect.styled.tsx

@@ -1,6 +1,6 @@
 import { createTheme } from '@mui/material/styles';
 import { IconButton } from '@mui/material';
-import { padding, styled } from '@mui/system';
+import { styled } from '@mui/system';
 import IconSVG from '../IconSVG/IconSVG';
 import { isMobileOnly } from 'react-device-detect';
 
@@ -15,9 +15,9 @@ export const Theme = createTheme({
     },
     MuiInputLabel: {
       styleOverrides: {
-        root: ({ ownerState }) => ({
+        root: ({ ownerState: { size } }: { ownerState: { size?: 'smaller' | 'custom' | 'normal' | 'small' | 'medium' } }) => ({
           maxWidth: 'calc(100% - 38px)',
-          ...(ownerState.size === 'custom' && { // tslint:disable-line
+          ...(size === 'custom' && {
             marginTop: isMobileOnly ? '0px' :'-4px',
             ['&.MuiInputLabel-shrink, &.Mui-focused']: {
               marginTop: 0
@@ -64,22 +64,19 @@ export const Theme = createTheme({
     },
     MuiOutlinedInput: {
       styleOverrides: {
-        root: ({ ownerState }) => ({
-          ...(ownerState.size === 'small' && {
+        root: ({ ownerState: { size } }: { ownerState: { size?: 'smaller' | 'custom' | 'normal' | 'small' | 'medium' } }) => ({
+          ...(size === 'small' && {
             paddingRight: '0 !important',
-            flexWrap: 'nowrap !important',
-            ['.Mui-disabled']: {
-              // backgroundColor: '#e8e8e8'
-            }
+            flexWrap: 'nowrap !important'
           }),
-          ...(ownerState.size === 'custom' && {
+          ...(size === 'custom' && {
             height: isMobileOnly ? 56 : 48,
             boxSizing: 'border-box'
           }),
           ['&.Mui-disabled svg']: {
             opacity:'0.38'
           }
-        })
+        } as any)
       }
     },
     MuiListItemText: {

package/source/components/_common/MaterialSelect/MaterialSelect.tsx

@@ -9,7 +9,7 @@ import { isMobileOnly } from 'react-device-detect';
 
 export interface IItems {
   value: string | number;
-  label: string;
+  label: string | JSX.Element;
   isDisabled?: boolean;
   isSeries?: boolean;
 }
@@ -32,7 +32,7 @@ export interface IVehicleModalProps {
   icon?: string;
   children?: JSX.Element | JSX.Element[];
   onChange: (value: any) => void;
-  items: IItems[];
+  items?: IItems[];
   selectClassName?: string;
   amountOfItems?: number;
   customDimensionsIcon?: boolean;
@@ -99,7 +99,7 @@ const MaterialSelect: React.FC<IVehicleModalProps> = ({
     onChange('' as string);
   };
 
-  const getLabel = (label: string, disabled: boolean) => disabled ? <span>{label.toUpperCase()}</span> : label;
+  const getLabel = (label: string | JSX.Element, disabled: boolean) => disabled ? <span>{(label as string).toUpperCase()}</span> : label;
 
   const IconClassNames = classnames(
     classNameIcon

package/source/components/_common/MaterialTooltip/MaterialTooltip.tsx

@@ -17,8 +17,8 @@ interface IMaterialTooltip {
 
 const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
   <Tooltip {...props} classes={{ popper: className }} />
-))(props => ({
-  zIndex: props.zindex ? props.zindex : 9996,
+))(({ zindex }: { zindex: number }) => ({
+  zIndex: zindex ? zindex : 9996,
   [`& .${tooltipClasses.tooltip}`]: {
     backgroundColor: '#fff',
     color: '#4C4E64AD',
@@ -46,7 +46,7 @@ const MaterialTooltip = ({ text, placement, className, disabled, zindex }: IMate
   };
 
   const onHandleMenuToggle = debounce(
-    (event: any) => {
+    (_: any) => {
       setIsOpen(() => !isOpen);
     },
     50

package/source/components/_common/Modal/Modal.tsx

@@ -12,12 +12,9 @@ interface IBasicModal {
 }
 
 const BasicModal = ({ isVisible, toggleModal, name, modalProps, handleSentryInit }: IBasicModal) => {
-  const { onClearModalState } = modalProps;
+  // const { onClearModalState } = modalProps;
   return (
-    <Modal open={isVisible} onClose={() => {
-      // toggleModal();
-      // onClearModalState();
-    }}>
+    <Modal open={isVisible}>
       <BaseModalWrapper>
         {ModalsConfig[name] && ModalsConfig[name]({ ...modalProps, toggleModal, handleSentryInit })}
       </BaseModalWrapper>

package/source/components/_common/Modal/ModalsConfig.tsx

@@ -4,7 +4,11 @@ import TestModal from './modals/TestModal';
 import PreviewCookieModal from './modals/PreviewCookieModal/PreviewCookieModal';
 import ManageCookieModal from './modals/ManageCookieModal/ManageCookieModal';
 
-const ModalsConfig = {
+interface ModalConfigProps { 
+  [key: string]: (props: any) => JSX.Element; 
+}
+
+const ModalsConfig: ModalConfigProps = {
   TEST_MODAL: (props: any) => {
     return <TestModal { ...props } />;
   },

package/source/components/_common/Modal/modals/ManageCookieModal/ManageCookieModal.tsx

@@ -16,11 +16,15 @@ interface IManageCookieModal {
   handleSentryInit?: () => void;
 }
 
+interface IMarketingSwitches {
+  [key: string]: any;
+}
+
 const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModal) => {
   const [analytcisMasterSwitch, setAnalyticsMasterSwitch] = useState(true);
   const [marketingMasterSwitch, setMarketingMasterSwitch] = useState(true);
-  const [analyticsSwitches, setAnalyticsSwitches] = useState({});
-  const [marketingSwitches, setMarketingSwitches] = useState({});
+  const [analyticsSwitches, setAnalyticsSwitches] = useState<IMarketingSwitches>({});
+  const [marketingSwitches, setMarketingSwitches] = useState<IMarketingSwitches>({});
 
   useEffect(
     () => {
@@ -60,7 +64,7 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
     onChange: () => {}
   };
 
-  const onAccept = (value?: object) => {
+  const onAccept = (value?: Record<string, any>) => {
     const cookieConfig = value || {
       marketing: Object.keys(marketingSwitches).filter(i => !marketingSwitches[i]) || [],
       analytics: Object.keys(analyticsSwitches).filter(i => !analyticsSwitches[i]) || []

package/source/components/_common/UserMenu/MaterialMenu.styled.tsx

@@ -1,6 +1,5 @@
 import { styled } from '@mui/system';
 import { createTheme } from '@mui/material/styles';
-import zIndex from '@mui/material/styles/zIndex';
 
 export const Theme = createTheme({
   components: {

package/source/components/_common/UserMenu/MaterialMenu.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, MouseEvent } from 'react';
 import Menu from '@mui/material/Menu';
 import ListItem from './MaterialMenuItem';
 import { ThemeProvider } from '@mui/material/styles';
@@ -24,7 +24,7 @@ const MaterialMenu = ({ menuItems, headerComponent, onChange, isLang, containerC
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [selectedIndex, setSelectedIndex] = React.useState(1);
   const open = Boolean(anchorEl);
-  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+  const handleClick = (event: MouseEvent<HTMLDivElement>) => {
     setAnchorEl(event.currentTarget);
   };
   const handleClose = () => {
@@ -42,7 +42,7 @@ const MaterialMenu = ({ menuItems, headerComponent, onChange, isLang, containerC
     <ThemeProvider theme={Theme}>
       <div className={containerClassname}>
         <HeaderComponent
-          onClick={(e) => {
+          onClick={(e: MouseEvent<HTMLDivElement>) => {
             if (anchorEl) {
               handleClose();
             } else {

package/source/components/_common/UserMenu/MaterialMenuItem.tsx

@@ -10,7 +10,7 @@ interface IListItem {
   label: any;
   amount?: number;
   divider?: boolean;
-  onClick?: (e: React.MouseEvent<HTMLSpanElement>) => void;
+  onClick?: (e: React.MouseEvent<HTMLLIElement>) => void;
   href?: string;
   isComponent?: boolean;
   isSelect?: boolean;
@@ -20,6 +20,12 @@ interface IListItem {
 }
 
 const ListItem = ({ icon, label, amount, divider, onClick, href, isComponent, Link, handleClose, isActive }: IListItem) => {
+
+  const onMenuItemClick = (e: React.MouseEvent<HTMLLIElement>) => {
+    onClick(e);
+    handleClose();
+  }
+
   return !!href ? (
     <Link color='#4C4E64DE' variant='caption' to={href} underline='none' onClick={onClick}>
       <MenuItem
@@ -34,13 +40,10 @@ const ListItem = ({ icon, label, amount, divider, onClick, href, isComponent, Li
     </Link>
   ) : (
     <MenuItem
-      onClick={(e: React.MouseEvent<HTMLSpanElement>) => {
-        onClick(e);
-        handleClose();
-      }}
+      onClick={onMenuItemClick}
       divider={divider}
       disableRipple={isComponent ? true : false}
-      isactive={!!isActive ? isActive.toString() : 'false'}
+      selected={!!isActive ? isActive : false}
     >
       {icon && <ListItemIcon><IconSVG customDimensions name={icon} /></ListItemIcon>}
       <ListItemText>

package/source/components/_common/UserMenu/NestedMenu.tsx

@@ -17,7 +17,7 @@ export interface INestedMenuProps {
 const NestedMenu = ({ nestedItems, label, icon, amount }: INestedMenuProps) => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
-  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+  const handleClick = (event: React.MouseEvent<HTMLLIElement>) => {
     setAnchorEl(event.currentTarget);
   };
   const handleClose = () => {

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

@@ -7,7 +7,7 @@ import { 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, SUB_MODEL_KEY } from '../../../../framework/constants/Search';
+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';

package/source/framework/constants/common.ts

@@ -17,7 +17,15 @@ export const GOOGLE_BUNDLE_COOKIES = {
 };
 
 /* tslint:disable */
-export const COOKIE_SCHEMA = {
+export interface INecessaryCookieSchema {
+  [key: string]: {
+    [key: string]: {
+      name: string;
+    }
+  };
+}
+
+export const COOKIE_SCHEMA: INecessaryCookieSchema = {
   necessary: {
     __cfruid: { name: 'Cloudflare' },
     cf_chl_2: { name: 'Cloudflare für Webverkehr zu identifizieren' },

package/source/framework/types/types.ts

@@ -186,7 +186,9 @@ export interface IVehicleDetailedSidebarPriceProps {
   isAlternative?: boolean;
   // currentSalesPrice?: number;
   originalSalesPrice?: number;
-  common: { isStrikeShown?: boolean, currentSalesPrice?: number };
+  common?: { isStrikeShown?: boolean, currentSalesPrice?: number };
+  financing?: any;
+  currentSalesPrice?: number;
 }
 export interface ITabsProps {
   t?: (key: string, options?: object) => string;

package/source/framework/utils/DateUtils.ts

@@ -8,10 +8,10 @@ export interface IFormatTimestamp {
 
 export const timestampToDate = (timestamp: number) => {
   if (!timestamp) return 'N/A';
-  const date = new Date(timestamp * 1000);// tslint:disable-line
+  const date = new Date(timestamp * 1000);
   const year = date.getFullYear();
   const month = date.getMonth() + 1;
-  const monthFormatted = month < 10 ? '0' + month : month;// tslint:disable-line
+  const monthFormatted = month < 10 ? '0' + month : month;
   return (`${monthFormatted}/${year}`);
 };