@bytebrand/fe-ui-core 4.2.250 → 4.3.0

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

@@ -1,12 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import _merge from 'lodash/merge';
 import classNames from 'classnames';
-import _get from 'lodash/get';
+
 import IconSVG from '../../../IconSVG/IconSVG';
 import Button from '../../../Button/Button';
 import MaterialAccordionGroup from '../../../MaterialAccordionGroup/MaterialAccordionGroup';
 import MaterialSwitch from '../../../MaterialSwitch/MaterialSwitch';
-import { COOKIE_SCHEMA, COOKIE_SCHEMA_LINKS } from '../../../../../framework/constants/common';
+import { COOKIE_SCHEMA } from '../../../../../framework/constants/common';
 import { updateCookieList } from '../../../../../framework/utils/CommonUtils';
 
 import styles from './ManageCookieModal.styl';
@@ -16,25 +16,16 @@ interface IManageCookieModal {
   handleSentryInit?: () => void;
 }
 
-interface IMarketingSwitches {
-  [key: string]: any;
-}
-
 const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModal) => {
-  const [analytcisMasterSwitch, setAnalyticsMasterSwitch] = useState(false);
-  const [marketingMasterSwitch, setMarketingMasterSwitch] = useState(false);
-  const [analyticsSwitches, setAnalyticsSwitches] = useState<IMarketingSwitches>({});
-  const [marketingSwitches, setMarketingSwitches] = useState<IMarketingSwitches>({});
+  const [analytcisMasterSwitch, setAnalyticsMasterSwitch] = useState(true);
+  const [marketingMasterSwitch, setMarketingMasterSwitch] = useState(true);
+  const [analyticsSwitches, setAnalyticsSwitches] = useState({});
+  const [marketingSwitches, setMarketingSwitches] = useState({});
 
   useEffect(
     () => {
-      const newAnalyticsSwitches = Object.values(COOKIE_SCHEMA.analytics)
-        .reduce((acc, val) => acc.concat(val), [])
-        .reduce((acc, item) => ({ ...acc, [item]: false }), {});
-
-      const newMarketingSwitches = Object.values(COOKIE_SCHEMA.marketing)
-        .reduce((acc, val) => acc.concat(val), [])
-        .reduce((acc, item) => ({ ...acc, [item]: false }), {});
+      const newAnalyticsSwitches = Object.keys(COOKIE_SCHEMA.analytics).reduce((acc, item) => ({ ...acc, [item]: true }), {});
+      const newMarketingSwitches = Object.keys(COOKIE_SCHEMA.marketing).reduce((acc, item) => ({ ...acc, [item]: true }), {});
       setAnalyticsSwitches(newAnalyticsSwitches);
       setMarketingSwitches(newMarketingSwitches);
     },
@@ -42,18 +33,13 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
   );
 
   const onHandleAnalyticsSwitchValue = (value: boolean) => {
-    const newAnalyticsSwitches = Object.values(COOKIE_SCHEMA.analytics)
-    .reduce((acc, val) => acc.concat(val), [])
-    .reduce((acc, item) => ({ ...acc, [item]: value }), {});
-
+    const newAnalyticsSwitches = Object.keys(analyticsSwitches).reduce((acc, item) => ({ ...acc, [item]: value }), {});
     setAnalyticsSwitches(newAnalyticsSwitches);
     setAnalyticsMasterSwitch(value);
   };
 
   const onHandleMarketingSwitchValue = (value: boolean) => {
-    const newMarketingSwitches = Object.values(COOKIE_SCHEMA.marketing)
-    .reduce((acc, val) => acc.concat(val), [])
-    .reduce((acc, item) => ({ ...acc, [item]: value }), {});
+    const newMarketingSwitches = Object.keys(marketingSwitches).reduce((acc, item) => ({ ...acc, [item]: value }), {});
     setMarketingSwitches(newMarketingSwitches);
     setMarketingMasterSwitch(value);
   };
@@ -74,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]) || []
@@ -83,22 +69,6 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
     updateCookieList(handleSentryInit);
     toggleModal();
   };
-  
-  const onHandleChangeInnerSwitchAnalytics = (cookiesFromCategory: any, isChecked: boolean) => {
-    const updatedSwitches = { ...analyticsSwitches };
-    for (const item of cookiesFromCategory) {
-      updatedSwitches[item] = !isChecked
-    }
-    setAnalyticsSwitches(updatedSwitches);
-  };
-
-  const onHandleChangeInnerSwitchMarketing = (cookiesFromCategory: any, isChecked: boolean) => {
-    const updatedSwitches = { ...marketingSwitches };
-    for (const item of cookiesFromCategory) {
-      updatedSwitches[item] = !isChecked
-    }
-    setMarketingSwitches(updatedSwitches);
-  };
 
   return (
     <div className={styles.modalWrapper}>
@@ -113,16 +83,12 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
           switchProps={necessarySwitchProps}
         >
           <span>Wir verwenden Browser-Cookies, die notwendig sind, damit die Website wie vorgesehen funktioniert. Beispiel: Wir speichern Ihre Präferenzen bei der Datenerfassung auf der Website, damit wir sie berücksichtigen können, wenn Sie auf unsere Website zurückkehren. Sie können diese Cookies in den Einstellungen Ihres Browsers deaktivieren, aber wenn Sie dies tun, funktioniert die Website möglicherweise nicht wie vorgesehen.</span>
-          {Object.keys(COOKIE_SCHEMA.necessary).map(cookie => {
-            const getLinkFromCategory = _get(COOKIE_SCHEMA_LINKS, [cookie], '');
-            return (
-              <div className={styles.switchBlock} key={cookie} >
-                <span className={styles.switchBlockTitle}>{cookie}</span>
-                <a className={styles.switchBlockLink} href={getLinkFromCategory} target='_blank'>Datenschutzbestimmungen</a>
-                <MaterialSwitch sx={{ marginLeft: 'auto' }} disabled={true} value={true} onChange={() => {}} />
-              </div>
-            );
-          })}
+          {Object.keys(COOKIE_SCHEMA.necessary).map(cookie =>
+            <div className={styles.switchBlock} key={cookie} >
+              <span>{`${COOKIE_SCHEMA.necessary[cookie].name} (${cookie})`}</span>
+              <MaterialSwitch disabled={true} value={true} onChange={() => {}} />
+            </div>
+          )}
         </MaterialAccordionGroup>
         <MaterialAccordionGroup
           title='Analytisch'
@@ -131,22 +97,15 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
           switchProps={analyticsSwitchProps}
         >
           <span>Um das Nutzerverhalten zu verstehen und Ihnen ein relevanteres Surferlebnis zu bieten oder den Inhalt unserer Website zu personalisieren. Beispiel: Wir sammeln Informationen darüber, welche Seiten Sie besuchen, damit wir Ihnen relevantere Informationen präsentieren können.</span>
-          {Object.keys(COOKIE_SCHEMA.analytics).map(cookie => {
-            const getItemsFromCategory = _get(COOKIE_SCHEMA, `analytics['${cookie}']`, null);
-            const getLinkFromCategory = _get(COOKIE_SCHEMA_LINKS, [cookie], '');
-            const isChecked = getItemsFromCategory.every((item: string) => analyticsSwitches[item] === false);
-            return (
-              <div className={styles.switchBlock} key={cookie} >
-                <span className={styles.switchBlockTitle}>{cookie}</span>
-                <a className={styles.switchBlockLink} href={getLinkFromCategory} target='_blank'>Datenschutzbestimmungen</a>
-                <MaterialSwitch
-                  sx={{ marginLeft: 'auto' }}
-                  value={analytcisMasterSwitch}
-                  onChange={() => onHandleChangeInnerSwitchAnalytics(getItemsFromCategory, isChecked)}
-                />
-              </div>
-            );
-          })}
+          {Object.keys(COOKIE_SCHEMA.analytics).map(cookie =>
+            <div className={styles.switchBlock} key={cookie} >
+              <span>{`${COOKIE_SCHEMA.analytics[cookie].name} (${cookie})`}</span>
+              <MaterialSwitch
+                value={analyticsSwitches[cookie]}
+                onChange={() => { setAnalyticsSwitches(s => ({ ...s, [cookie]: !s[cookie] })); }}
+              />
+            </div>
+          )}
         </MaterialAccordionGroup>
         <MaterialAccordionGroup
           title='Marketing'
@@ -155,26 +114,19 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
           switchProps={marketingSwitchProps}
         >
           <span>Zur Personalisierung und Messung der Effektivität von Werbung auf unserer Website und anderen Websites. Beispiel: Wir können Ihnen eine personalisierte Werbung auf der Grundlage der von Ihnen besuchten Seiten auf unserer Website anzeigen.</span>
-          {Object.keys(COOKIE_SCHEMA.marketing).map(cookie => {
-            const getItemsFromCategory = _get(COOKIE_SCHEMA, `marketing['${cookie}']`, null);
-            const getLinkFromCategory = _get(COOKIE_SCHEMA_LINKS, [cookie], '');
-            const isChecked = getItemsFromCategory.every((item: string) => marketingSwitches[item] === false);
-            return (
-              <div className={styles.switchBlock} key={cookie} >
-                <span className={styles.switchBlockTitle}>{cookie}</span>
-                <a className={styles.switchBlockLink} href={getLinkFromCategory} target='_blank'>Datenschutzbestimmungen</a>
-                <MaterialSwitch
-                  sx={{ marginLeft: 'auto' }}
-                  value={marketingMasterSwitch}
-                  onChange={() => onHandleChangeInnerSwitchMarketing(getItemsFromCategory, isChecked)}
-                />
-              </div>
-            )
-          })}
+          {Object.keys(COOKIE_SCHEMA.marketing).map(cookie =>
+            <div className={styles.switchBlock} key={cookie} >
+              <span>{`${COOKIE_SCHEMA.marketing[cookie].name} (${cookie})`}</span>
+              <MaterialSwitch
+                value={marketingSwitches[cookie]}
+                onChange={() => setMarketingSwitches(s => ({ ...s, [cookie]: !s[cookie] }))}
+              />
+            </div>
+          )}
         </MaterialAccordionGroup>
       </div>
       <div className={styles.buttonsContainer}>
-        <Button onClick={() => onAccept()} className={classNames(styles.modalBtn, styles.outlinedBtn)} >Auswahl speichern</Button>
+        <Button onClick={() => onAccept()}className={classNames(styles.modalBtn, styles.outlinedBtn)} variant='outlined'>Auswahl speichern</Button>
         <Button onClick={() => onAccept({})} className={styles.modalBtn}>Alles akzeptieren</Button>
       </div>
     </div>

package/source/components/_common/Modal/modals/PreviewCookieModal/PreviewCookieModal.styl

@@ -1,12 +1,12 @@
 @import '../../../../../theme/mixins.styl';
 
 .modalWrapper
-  padding: 28px 58px 28px
+  padding: 26px 60px 38px
   text-align: center
   box-sizing: border-box
   max-width: 600px
-  +media-tablet-down()
-    padding: 16px 15px 28px
+  +media-phone-only()
+    padding: 13px 15px 28px
 
 .modalTitle
   font-family: sans-serif
@@ -16,52 +16,37 @@
   color: rgba(76, 78, 100, 0.87)
   margin-top: 20px
 
-  +media-tablet-down()
-    font-size: 16px;
-    margin-top: 8px;
-
 .modalContent
   font-family: sans-serif
-  font-size: 14px;
-  line-height: 16px;
+  font-size: 16px;
+  line-height: 24px;
   text-align: justify;
   letter-spacing: 0.15px;
   color: rgba(76, 78, 100, 0.87);
   margin-top: 20px
-  +media-tablet-down()
-    column-gap: 0;
-    max-height: 320px;
-    overflow-y: scroll;
-    padding-right: 10px;
-    margin-right: -10px;
-    margin-top: 8px
-
-.logoContainer
-  display: flex
-  justify-content: space-between
+  +media-phone-only()
+    column-gap: 0
 
 .buttonsContainer
-  margin-top: 12px
+  margin-top: 20px
   display: flex
   justify-content: space-between
   gap: 36px;
-  +media-tablet-down()
+  +media-phone-only()
     column-gap: 0
 
 .modalBtn
   height: 38px
   text-transform: capitalize !important
   min-width: calc(50% - 18px) !important
-  +media-tablet-down()
+  +media-phone-only()
     font-size: 11px !important
 
 .outlinedBtnLeft
-  display: flex;
-  justify-content: flex-end;
+  float: right;
   color: #005CCB;
   font-size: 16px;
   text-decoration: none;
-  margin-top: 12px;
-  margin-bottom: 0;
-  margin-left: auto;
-  max-width: 80px;
+
+.clearfix
+  clear: both;

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

@@ -18,28 +18,21 @@ const PreviewCookieModal = ({ toggleModal, setModal, handleSentryInit } : IPrevi
     toggleModal();
   };
 
-  const onDisableAll = () => {
-    localStorage.setItem('cookieConfig', JSON.stringify({
-      'marketing':['cf','cip','cnac','car','test_cookie','IDE', 'bid','youtube'],
-      'analytics':['sentry','callback','locale','uid','PugT','demdex','cto_bundle','tuuid','tuuid_lu','c','CMID','CMPS','CMPRO','uuid2','um','umeh','KRTBCOOKIE_97','IDSYNC','dpm','_kuid_','visitor-id','data-c-ts','data-c','CMTS','mv_tokens','A3','mv_tokens_eu-v1','am_tokens','am_tokens_eu-v1','iteo','_fbp','_clck','_clsk','_uetsid','_uetvid','analytics_storage','ad_storage','functionality_storage','personalization_storage','security_storage','hotjar']
-    }));
-    updateCookieList(handleSentryInit);
-    toggleModal();
-  };
-
   return (
     <div className={styles.modalWrapper}>
-      <div className={styles.logoContainer}>
-        <IconSVG name='autodeLogo' customDimensions />
-        <Button onClick={onDisableAll} className={styles.modalBtn}>Nur notwendige Cookies</Button>
-      </div>
+      <IconSVG name='autodeLogo' customDimensions />
       <div className={styles.modalTitle}>Nach den Cookies geht die Fahrt weiter.</div>
       <div className={styles.modalContent}>
-        Wir verwenden Cookies und ähnliche Technologien (insg. „Cookies“). Cookies die notwendig sind, damit die Website wie vorgesehen funktioniert, werden standardmäßig gesetzt. Cookies, die dazu dienen das Nutzerverhalten zu verstehen und Ihnen ein relevantes bzw. personalisiertes Surferlebnis zu bieten, sowie Cookies zur Personalisierung und Messung der Effektivität von Werbung auf unserer und anderen Websites setzen wir nur mit Ihrer Einwilligung ein. Unsere Partner führen diese Daten möglicherweise mit weiteren Daten zusammen, die Sie ihnen bereitgestellt oder die sie im Rahmen Ihrer Nutzung gesammelt haben. Durch Klick auf "Zustimmen" akzeptieren Sie alle Cookies und die beschriebene Verarbeitung Ihrer Daten. Bevor Sie Ihre Zustimmung erteilen, beachten Sie bitte, dass wir Ihre Daten auch mit Partnern mit Sitz in den USA teilen. Die USA weisen kein mit der EU vergleichbares Datenschutzniveau auf. Es besteht das Risiko, dass US-Behörden Zugriff auf Ihre Daten haben und Sie Ihre Betroffenenrechte nicht durchsetzen können. Über "Anpassen" können Sie Ihre Einwilligungen individuell anpassen. Dies ist auch später jederzeit im Bereich&nbsp;
-        <a href={`${environment}/datenschutz/`} target='_blank' style={{ textDecoration: 'underline', color: 'rgba(76,78,100,0.87)' }}>Cookie-Richtlinie</a> möglich. Weitere Informationen finden Sie in unserer&nbsp;
-        <a href={`${environment}/datenschutz/`} target='_blank' style={{ textDecoration: 'underline', color: 'rgba(76,78,100,0.87)' }}>Datenschutzerklärung</a>.
+        Wenn Sie auf "Zustimmen" klicken, ermöglichen Sie uns über Cookies das Nutzerverhalten 
+        für alle User zu optimieren und Ihnen individuelle Empfehlungen auch auf Drittseiten anzuzeigen. 
+        Durch die Zustimmung erteilen Sie uns Ihre ausdrückliche Einwilligung. 
+        Über "Anpassen" können Sie Ihre Einwilligungen individuell anpassen. 
+        Dies ist auch später jederzeit im Bereich "Cookie-Richtlinie" möglich. 
+        Die relevante Datenschutzerklärung finden Sie&nbsp;
+        <a href={`${environment}/datenschutz/`} target='_blank' style={{ textDecoration: 'underline', color: 'rgba(76,78,100,0.87)' }}>hier</a>.
+        <a href={`${environment}/impressum/`} target='_blank' className={styles.outlinedBtnLeft}>Impressum</a>
       </div>
-      <a href={`${environment}/impressum/`} target='_blank' className={styles.outlinedBtnLeft}>Impressum</a>
+      <div className={styles.clearfix}></div>
       <div className={styles.buttonsContainer}>
         <Button onClick={() => setModal('MANAGE_COOKIE_MODAL')} className={styles.modalBtn} variant='outlined'>Anpassen</Button>
         <Button onClick={onAcceptAll} className={styles.modalBtn}>zustimmen</Button>

package/source/components/_common/OfferRequestButtonWrapper/OfferRequestButtonWrapper.tsx

@@ -23,18 +23,13 @@ const OfferRequestBtnWrapper: React.FunctionComponent<IOfferRequestButtonWrapper
   const dealerId = _get(car, 'metaData.ownerId') || null;
   const carId = _get(car, '_id', '');
   const onAutoDeIdClick = () => {
-    btnEl.current?.click();
+    btnEl.current.onClick();
   };
 
   const controlsContainerClassName = classnames(
     styles.controlsContainer,
     controlsClassContainer
   );
-
-  const getRef = (ref: HTMLButtonElement): void => {
-    btnEl.current = ref;
-  };
- 
   return (
     <>
       <div className={controlsContainerClassName}>
@@ -46,9 +41,8 @@ const OfferRequestBtnWrapper: React.FunctionComponent<IOfferRequestButtonWrapper
             _: void,
             isLoading: boolean,
             isSale: boolean,
-            isAlternative: boolean,
-            isSuccess: boolean
-          ) => {
+            isAlternative: boolean
+            ) => {
             const { metaData } = car;
             const isAlternativeType = !!metaData && !!metaData.type;
             const offerButtonClassName = classnames(
@@ -58,12 +52,10 @@ const OfferRequestBtnWrapper: React.FunctionComponent<IOfferRequestButtonWrapper
               { [styles.isAlternativeButton]: isAlternative || isSale || isAlternativeType }
             );
 
-
             const getRequestButtonTitle = () => {
               if (isSale) return t('sidebar.requestOfferSale');
               // tslint:disable-next-line:no-else-after-return
               else if (isAlternativeType) return t('sidebar.importRequest');
-              else if (isSuccess) return t('CheckoutPage:onlineCheckoutModal.toMyOrder');
               else if (hasCheckout) return t('vehicleProps:title.toCheckoutCar');
               else if (isOfferRequested) return t('CheckoutPage:onlineCheckoutModal.redirectBtn');
               else return t('sidebar.requestOffer');
@@ -71,10 +63,10 @@ const OfferRequestBtnWrapper: React.FunctionComponent<IOfferRequestButtonWrapper
 
             return (
               <StyledButton
+                refs={btnEl}
                 className={offerButtonClassName}
                 onClick={onClick}
                 loading={isLoading}
-                getRef={getRef}
               >
                 {isOfferRequested
                   ? null

package/source/components/_common/Range/Range.tsx

@@ -1,8 +1,8 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import FormattedNumber from '../../FormattedNumber/FormattedNumber';
 import { Slider } from '@mui/material';
 import { isMobileOnly } from 'react-device-detect';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { ThemeProvider } from '@mui/material/styles';
 
 interface IRangeProps {
   children?: JSX.Element;
@@ -11,12 +11,10 @@ interface IRangeProps {
   step: number;
   units: string;
   value: number;
-  withRangeLimit?: boolean;
   onChange: (event: Event, value: number | number[], activeThumb?: number) => void;
-  maxFinancingFirstInstallment?: number;
 }
 
-const Theme = createTheme({
+const Theme = {
   components: {
     MuiSlider: {
       styleOverrides: {
@@ -24,10 +22,15 @@ const Theme = createTheme({
           padding: '2px 6px',
           fontSize: 12
         }
+      },
+      palette: {
+        primary: {
+          main: '#005CCB'
+        }
       }
     }
-  }
-});
+  },
+};
 
 const Range: React.FC<IRangeProps> = ({
   min,
@@ -35,24 +38,8 @@ const Range: React.FC<IRangeProps> = ({
   step,
   value,
   units,
-  withRangeLimit,
-  onChange,
-  maxFinancingFirstInstallment
+  onChange
 }: IRangeProps) => {
-  const [rangeValue, setRangeValue] = useState<number | number[]>(0);
-
-  useEffect(
-    () => {
-      setRangeValue(value);
-    },
-    [value]
-  )
-
-  const onChangeRange = (event: Event, value: number | number[]) => {
-    setRangeValue(value);
-    onChange(event, value)
-  }
-
   const formttedValue = (value: number) => {
     return (
       <>
@@ -65,13 +52,13 @@ const Range: React.FC<IRangeProps> = ({
     <ThemeProvider theme={Theme}>
       <Slider
         min={min}
-        max={withRangeLimit ? maxFinancingFirstInstallment : max}
+        max={max}
         step={step}
         disableSwap={isMobileOnly ? true : false}
         valueLabelDisplay='auto'
         valueLabelFormat={formttedValue}
-        value={rangeValue}
-        onChange={onChangeRange}
+        value={value}
+        onChange={(event: Event, value: number | number[]) => onChange(event, value)}
         sx={{
           color: '#005CCB'
         }}

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,59 +10,37 @@ 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;
   Link?: any;
   handleClose?: () => void;
   isActive?: boolean;
-  isExternalLink?: boolean;
 }
 
-const ListItem = ({ icon, label, amount, divider, onClick, href, isComponent, Link, handleClose, isActive, isExternalLink }: IListItem) => {
-
-  const onMenuItemClick = (e: React.MouseEvent<HTMLLIElement>) => {
-    onClick(e);
-    handleClose();
-  };
-
-  const renderLink = () => {
-    return (
-      <>
-        {isExternalLink ? (
-          <a href={href}>
-            <MenuItem
-              divider={divider}
-            >
-              {icon && <ListItemIcon><IconSVG customDimensions name={icon} /></ListItemIcon>}
-              <ListItemText>
-                {label}
-              </ListItemText>
-              {(amount || amount === 0) && <AmountBlock>{amount}</AmountBlock>}
-            </MenuItem>
-          </a>
-        ) : (
-          <Link color='#4C4E64DE' variant='caption' to={href} underline='none' onClick={onClick}>
-            <MenuItem divider={divider}>
-              {icon && <ListItemIcon><IconSVG customDimensions name={icon} /></ListItemIcon>}
-              <ListItemText>
-                {label}
-              </ListItemText>
-              {(amount || amount === 0) && <AmountBlock>{amount}</AmountBlock>}
-            </MenuItem>
-          </Link>
-        )}
-      </>
-    )
-  }
-
-  return !!href ? renderLink() : (
+const ListItem = ({ icon, label, amount, divider, onClick, href, isComponent, Link, handleClose, isActive }: IListItem) => {
+  return !!href ? (
+    <Link color='#4C4E64DE' variant='caption' to={href} underline='none' onClick={onClick}>
+      <MenuItem
+        divider={divider}
+      >
+        {icon && <ListItemIcon><IconSVG customDimensions name={icon} /></ListItemIcon>}
+        <ListItemText>
+          {label}
+        </ListItemText>
+        {(amount || amount === 0) && <AmountBlock>{amount}</AmountBlock>}
+      </MenuItem>
+    </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/_common/withStats/withStats.styl

@@ -148,6 +148,3 @@ $indent = 10px
 
 .new
   text-transform: uppercase
-
-.imagesCount
-  margin-left: 0 !important

package/source/components/_common/withStats/withStats.tsx

@@ -71,7 +71,7 @@ const withStats = (WrappedComponent: any) => ({
     const delimiters = { xs: '|', sm: '|', md: 'von' };
 
     return (
-      <div className={classnames(styles.section, styles.imagesCount)}>
+      <div className={styles.section}>
         {statsSize === 'md' ? <IconSVG name='common_camera' customDimensions className={styles.cameraIcon} /> : null}
         {!!imagesCount && <span>{`${activeSlide + 1} ${delimiters[statsSize]} ${imagesCount}`}</span>}
       </div>
@@ -79,7 +79,7 @@ const withStats = (WrappedComponent: any) => ({
   };
 
   const renderRotateSvg = (): JSX.Element => {
-    const hasExteriorPhotos = hasInteriorExteriorPhoto && imagesCount > 0;
+    const hasExteriorPhotos = hasInteriorExteriorPhoto && Array.isArray(images) && images.length > 0;
     if (!hasExteriorPhotos) return null;
     return (
       <div className={styles.section}>
@@ -115,23 +115,20 @@ const withStats = (WrappedComponent: any) => ({
     const favoritesIconClassName = classnames(styles.statsStarIcon, { [styles.accented]: isFavoured });
 
     return (
-      <>
-        {(!!totalCarImpCount || !!totalFavCount) && <div className={styles.section}>
-            {!!totalCarImpCount ? <div className={styles.statsViewsCount}>
-              <IconSVG name='common_SliderEye' customDimensions className={styles.statsEyeIcon} />
-              <span>
-                {totalCarImpCount}
-              </span>
-            </div> : null}
-            {!!totalFavCount ? <div className={favoritesClassName} onClick={onFavoriteClick}>
-              <IconSVG name='star' customDimensions className={favoritesIconClassName} />
-              <span>
-                {totalFavCount}
-              </span>
-            </div> : null}
-          </div>
-        }
-      </>
+      <div className={styles.section}>
+        {!!totalCarImpCount ? <div className={styles.statsViewsCount}>
+          <IconSVG name='common_SliderEye' customDimensions className={styles.statsEyeIcon} />
+          <span>
+            {totalCarImpCount}
+          </span>
+        </div> : null}
+        {!!totalFavCount ? <div className={favoritesClassName} onClick={onFavoriteClick}>
+          <IconSVG name='star' customDimensions className={favoritesIconClassName} />
+          <span>
+            {totalFavCount}
+          </span>
+        </div> : null}
+      </div>
     );
   };