@bytebrand/fe-ui-core 4.2.97 → 4.2.98

package/source/components/Stepper/Stepper.tsx

@@ -12,15 +12,14 @@ 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: any | { props: IStepProps }[] = React.Children.toArray(children);
-  const steps = childrenArray.map((child: { props: IStepProps }, index: number) => {
-    if (!React.isValidElement<IStepProps>(child)) {
+  const childrenArray: React.ReactElement<IStepProps>[] = React.Children.toArray<React.ReactElement<IStepProps>>(children);
+  const steps = childrenArray.map((child, index) => {
+    if (!React.isValidElement(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 from 'react';
+import React, { useEffect } from 'react';
 import styles from './RequestedCarsSection.styl';
 
 import Slider from 'react-slick';
@@ -10,6 +10,9 @@ 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/VehicleSmallCard/VehicleData/VehiclePrice/VehiclePrice.tsx

@@ -41,7 +41,7 @@ export interface IVehiclePriceSectionProps {
   common: ICommonFinancing;
   vatRate?: number;
   onDetailsClick(id: string): void;
-  toggleCarToCompare?(carId: string): void;
+  toggleCarToCompare?(carId?: React.ChangeEvent<HTMLInputElement>): void;
   onRemoveClick?(carId: string): void;
   toCompare?: boolean;
   onAddOfferToMainSlideClick?: (id: string, mainImageId: string, price: number, financingConfig: any) => void;
@@ -49,23 +49,23 @@ export interface IVehiclePriceSectionProps {
   typeAlternative?: string;
 }
 
-interface IPriceData {
-  tooltipDescription?: string;
-  perMonthOld?: any;
-  isAlternativeText?: string;
-  perMonthCurrent?: any;
-  showAboIcon?: boolean;
-  isPriceDisable?: boolean;
-  isTotal?: boolean;
-  isNewPriceCategory?: boolean;
-  positionY?: any;
-  priceSub?: string | null;
-  prefixOldPrice?: string | null;
-  postfix?: any;
-  title?: string;
-  margin?: number;
-  totalCurrent: number;
-}
+// interface IPriceData {
+//   tooltipDescription?: string;
+//   perMonthOld?: any;
+//   isAlternativeText?: string;
+//   perMonthCurrent?: any;
+//   showAboIcon?: boolean;
+//   isPriceDisable?: boolean;
+//   isTotal?: boolean;
+//   isNewPriceCategory?: boolean;
+//   positionY?: any;
+//   priceSub?: string | null;
+//   prefixOldPrice?: string | null;
+//   postfix?: any;
+//   title?: string;
+//   margin?: number;
+//   totalCurrent: number;
+// }
 
 const VehiclePrice: React.FC<IVehiclePriceSectionProps> = (props: IVehiclePriceSectionProps) => {
 

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

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

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

@@ -7,12 +7,13 @@ 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, onClick, onDelete }) => {
+const ChipLanding: React.FunctionComponent<IChipProps> = ({ chip, className, onClick, onDelete }) => {
   const { key, value } = chip;
   const onDeleteHandler = (event: any) => { event.stopPropagation(); onDelete(event, chip); };
   const onClickHandler = (event: any) => { event.stopPropagation(); onClick(event, chip); };
@@ -30,6 +31,7 @@ const ChipLanding: React.FunctionComponent<IChipProps> = ({ chip, onClick, onDel
 };
 
 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;
+  title?: string | JSX.Element;
   subTitle?: string;
   defaultExpanded?: boolean;
-  onChange?: any; // TODO: understand how this onchange works and where it is used and write the correct types
+  onChange?: (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => void;
   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 && typeof expanded === 'boolean') ? expanded : expanded && (expanded === reactScrollName)}
+            expanded={isCompare ? expanded : expanded && (expanded === reactScrollName)}
             className={accordionClassName}
           >
             <AccordionSummary

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

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

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

@@ -3,7 +3,8 @@ import { Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
 import IconSVG from '../IconSVG/IconSVG';
 import {
   ThemeProvider,
-  createTheme
+  createTheme,
+  experimental_sx as sx
 } from '@mui/material/styles';
 
 export interface IItem {
@@ -17,9 +18,7 @@ export interface IAccordionProps {
 
   defaultOpened?: number;
 
-  variant?: any;
-
-  expandedDefault?: string;
+  variant?: string;
 }
 
 declare module '@mui/material/AccordionSummary' {
@@ -47,9 +46,10 @@ const MaterialAccordion = (
   const theme = createTheme({
     components: {
       MuiAccordion: {
-        styleOverrides: {
-          root: () => ({
-            ...(variant === 'searchDetailed' && {
+        variants: [
+          {
+            props: { variant: 'searchDetailed' },
+            style: {
               margin: 0,
               '&.Mui-expanded': {
                 margin: 0
@@ -57,8 +57,11 @@ const MaterialAccordion = (
               '&.MuiAccordion-root:before': {
                 opacity: 0
               }
-            }),
-            ...(variant === 'searchDetailedSmall' && {
+            }
+          },
+          {
+            props: { variant: 'searchDetailedSmall' },
+            style: {
               margin: 0,
               boxShadow: 'none',
               '&.Mui-expanded': {
@@ -67,28 +70,32 @@ const MaterialAccordion = (
               '&.MuiAccordion-root:before': {
                 opacity: 0
               }
-            })
-          })
-        }
+            }
+          }
+        ]
       },
       MuiAccordionSummary: {
-        styleOverrides: {
-          root: () => ({
-            ...(variant === 'searchDetailed' && {
+        variants: [
+          {
+            props: { variant: 'searchDetailed' },
+            style: {
               color: '#005ccb',
               fontWeight: 'bold',
               fontSize: 14,
               '&.Mui-expanded': {
                 borderBottom: '1px solid #e8e8e8'
               }
-            }),
-            ...(variant === 'searchDetailedSmall' && {
+            }
+          },
+          {
+            props: { variant: 'searchDetailedSmall' },
+            style: {
               color: '1f1f1f',
               fontWeight: 'bold',
               fontSize: 14
-            })
-          })
-        }
+            }
+          }
+        ]
       }
     }
   });
@@ -97,10 +104,10 @@ const MaterialAccordion = (
     const [expanded, setExpanded] = useState(expandedDefault || false);
 
     const handleChange =
-      (panel: string) => (_: React.SyntheticEvent, isExpanded: boolean) => {
+      (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
         setExpanded(isExpanded ? panel : false);
       };
-    return items.map((item: { title: string, content: any }, index: number) => {
+    return items.map((item: any, index: number) => {
       return (
         <ThemeProvider theme={theme}>
           <Accordion
@@ -113,6 +120,7 @@ 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,6 +6,7 @@ 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 { styled } from '@mui/system';
+import { padding, 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: { size } }: { ownerState: { size?: 'smaller' | 'custom' | 'normal' | 'small' | 'medium' } }) => ({
+        root: ({ ownerState }) => ({
           maxWidth: 'calc(100% - 38px)',
-          ...(size === 'custom' && {
+          ...(ownerState.size === 'custom' && { // tslint:disable-line
             marginTop: isMobileOnly ? '0px' :'-4px',
             ['&.MuiInputLabel-shrink, &.Mui-focused']: {
               marginTop: 0
@@ -64,19 +64,22 @@ export const Theme = createTheme({
     },
     MuiOutlinedInput: {
       styleOverrides: {
-        root: ({ ownerState: { size } }: { ownerState: { size?: 'smaller' | 'custom' | 'normal' | 'small' | 'medium' } }) => ({
-          ...(size === 'small' && {
+        root: ({ ownerState }) => ({
+          ...(ownerState.size === 'small' && {
             paddingRight: '0 !important',
-            flexWrap: 'nowrap !important'
+            flexWrap: 'nowrap !important',
+            ['.Mui-disabled']: {
+              // backgroundColor: '#e8e8e8'
+            }
           }),
-          ...(size === 'custom' && {
+          ...(ownerState.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 | JSX.Element;
+  label: string;
   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 | JSX.Element, disabled: boolean) => disabled ? <span>{(label as string).toUpperCase()}</span> : label;
+  const getLabel = (label: string, disabled: boolean) => disabled ? <span>{label.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 }} />
-))(({ zindex }: { zindex: number }) => ({
-  zIndex: zindex ? zindex : 9996,
+))(props => ({
+  zIndex: props.zindex ? props.zindex : 9996,
   [`& .${tooltipClasses.tooltip}`]: {
     backgroundColor: '#fff',
     color: '#4C4E64AD',
@@ -46,7 +46,7 @@ const MaterialTooltip = ({ text, placement, className, disabled, zindex }: IMate
   };
 
   const onHandleMenuToggle = debounce(
-    (_: any) => {
+    (event: any) => {
       setIsOpen(() => !isOpen);
     },
     50

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

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

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

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

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

@@ -16,15 +16,11 @@ 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<IMarketingSwitches>({});
-  const [marketingSwitches, setMarketingSwitches] = useState<IMarketingSwitches>({});
+  const [analyticsSwitches, setAnalyticsSwitches] = useState({});
+  const [marketingSwitches, setMarketingSwitches] = useState({});
 
   useEffect(
     () => {
@@ -64,7 +60,7 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
     onChange: () => {}
   };
 
-  const onAccept = (value?: Record<string, any>) => {
+  const onAccept = (value?: object) => {
     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,5 +1,6 @@
 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, MouseEvent } from 'react';
+import React, { useState } 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: MouseEvent<HTMLDivElement>) => {
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
     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: MouseEvent<HTMLDivElement>) => {
+          onClick={(e) => {
             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<HTMLLIElement>) => void;
+  onClick?: (e: React.MouseEvent<HTMLSpanElement>) => void;
   href?: string;
   isComponent?: boolean;
   isSelect?: boolean;
@@ -20,12 +20,6 @@ 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
@@ -40,10 +34,13 @@ const ListItem = ({ icon, label, amount, divider, onClick, href, isComponent, Li
     </Link>
   ) : (
     <MenuItem
-      onClick={onMenuItemClick}
+      onClick={(e: React.MouseEvent<HTMLSpanElement>) => {
+        onClick(e);
+        handleClose();
+      }}
       divider={divider}
       disableRipple={isComponent ? true : false}
-      selected={!!isActive ? isActive : false}
+      isactive={!!isActive ? isActive.toString() : '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<HTMLLIElement>) => {
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
     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 } from '../../../../framework/constants/Search';
+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 { 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,15 +17,7 @@ export const GOOGLE_BUNDLE_COOKIES = {
 };
 
 /* tslint:disable */
-export interface INecessaryCookieSchema {
-  [key: string]: {
-    [key: string]: {
-      name: string;
-    }
-  };
-}
-
-export const COOKIE_SCHEMA: INecessaryCookieSchema = {
+export const COOKIE_SCHEMA = {
   necessary: {
     __cfruid: { name: 'Cloudflare' },
     cf_chl_2: { name: 'Cloudflare für Webverkehr zu identifizieren' },

package/source/framework/types/types.ts

@@ -98,6 +98,7 @@ export interface IVehicleInfo {
   location?: IVehicleLocation;
   common: {
     currentSalesPrice?: number;
+    isStrikeShown?: boolean;
   };
   mileage?: string;
   environmentEmissions?: any;
@@ -186,9 +187,7 @@ export interface IVehicleDetailedSidebarPriceProps {
   isAlternative?: boolean;
   // currentSalesPrice?: number;
   originalSalesPrice?: number;
-  common?: { isStrikeShown?: boolean, currentSalesPrice?: number };
-  financing?: any;
-  currentSalesPrice?: number;
+  common: { isStrikeShown?: boolean, 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);
+  const date = new Date(timestamp * 1000);// tslint:disable-line
   const year = date.getFullYear();
   const month = date.getMonth() + 1;
-  const monthFormatted = month < 10 ? '0' + month : month;
+  const monthFormatted = month < 10 ? '0' + month : month;// tslint:disable-line
   return (`${monthFormatted}/${year}`);
 };