@bytebrand/fe-ui-core 4.1.170 → 4.1.172

package/source/components/_common/MaterialAutocomplete/MaterialAutocomplete.tsx

@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import { TextField, Checkbox, Box, Divider } from '@mui/material';
+import { TextField, Checkbox } from '@mui/material';
 import { ThemeProvider } from '@mui/material/styles';
 import _isEmpty from 'lodash/isEmpty';
 import _indexOf from 'lodash/indexOf';
@@ -10,7 +10,6 @@ import _get from 'lodash/get';
 import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
 import { Theme, ArrowSelect, CheckboxLabel } from './MaterialAutocomplete.styled';
 import isEqual from 'lodash/isEqual';
-import IconSVG from '../IconSVG/IconSVG';
 
 export interface IItems {
   value: string | number;
@@ -51,8 +50,6 @@ export interface IMaterialAutocompleteProps {
   disableIcon?: boolean;
   name?: string;
   placeholder?: string;
-  readOnly?:boolean,
-  listWithImage?:boolean
 }
 
 const ITEM_HEIGHT = 36;
@@ -79,10 +76,7 @@ const MaterialAutocomplete: React.FC<IMaterialAutocompleteProps> = ({
   items,
   disableIcon,
   name,
-  placeholder,
-  readOnly,
-  listWithImage
-
+  placeholder
 }: IMaterialAutocompleteProps) => {
   const filter = createFilterOptions<IFilmOptionType>();
 
@@ -101,9 +95,7 @@ const MaterialAutocomplete: React.FC<IMaterialAutocompleteProps> = ({
         handleHomeEndKeys
         value={value}
         name={name}
-        error={error.toString()}
-        readOnly={readOnly}
-        listwithimage={listWithImage}
+        error={error}
         onChange={(e, newValue, reason: string, details?: { option: any }) => {
           if (typeof newValue === 'string') {
             onChange(newValue);
@@ -168,22 +160,6 @@ const MaterialAutocomplete: React.FC<IMaterialAutocompleteProps> = ({
               </li>
             );
           }
-          if (listWithImage){
-            return(
-            <><Box component='li'
-                sx={{ '& > svg': { mr: 2, flexShrink: 0 } }}
-                {...props}
-                key={_uniqueId(option.label)}>
-                <IconSVG
-                  customDimensions
-                  width='26px'
-                  height='16px'
-                  name={option.icon} />
-                {option.value}
-              </Box>
-              {option.isDivider ? <Divider /> : null}</>
-            );
-          }
           const isSeries = (option.isDisabled && option.label !== 'No options') || option.isSeries;
           const label = isSeries ? option.label.toUpperCase() : option.label;
           return (
@@ -213,7 +189,6 @@ const MaterialAutocomplete: React.FC<IMaterialAutocompleteProps> = ({
             label={label}
             name={name}
             placeholder={placeholder}
-            InputProps={{ ...params.InputProps, readOnly }}
           />
         )}
       >

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

@@ -26,6 +26,13 @@ export const Theme = createTheme({
         })
       }
     },
+    MuiMenuItem: {
+      styleOverrides: {
+        root: {
+          padding: '0 6px'
+        }
+      }
+    },
     MuiPaper: {
       styleOverrides: {
         root: {

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

@@ -34,8 +34,6 @@ export interface IVehicleModalProps {
   onChange: (value: any) => void;
   items: IItems[];
   selectClassName?: string;
-  amountOfItems?: number;
-  customDimensionsIcon?: boolean;
 }
 
 const ITEM_HEIGHT = isMobileOnly ? 56 : 48;
@@ -61,9 +59,7 @@ const MaterialSelect: React.FC<IVehicleModalProps> = ({
   selectClassName,
   required,
   items,
-  icon,
-  customDimensionsIcon,
-  amountOfItems = MENU_ITEMS
+  icon
 }: IVehicleModalProps) => {
   const [newValue, setValue] = useState('');
   const [multipleValue, setMultipleValue] = React.useState([]);
@@ -120,14 +116,11 @@ const MaterialSelect: React.FC<IVehicleModalProps> = ({
           key={`${value}_${index}`}
           value={value}
           disabled={setDisabled}
-          // sx={setDisabled ? {
-          //   backgroundColor: '#e8e8e8',
-          //   color: '#333',
-          //   opacity: '1 !important'
-          // } : null}
-          sx={{
-            height: ITEM_HEIGHT
-          }}
+          sx={setDisabled ? {
+            backgroundColor: '#e8e8e8',
+            color: '#333',
+            opacity: '1 !important'
+          } : null}
         >
           {!!t ? t(`${namespace}${cbd ? ':' : '.'}${label}`) : getLabel(label, setDisabled)}
         </MenuItem>
@@ -174,7 +167,7 @@ const MaterialSelect: React.FC<IVehicleModalProps> = ({
           inputProps={{
             className: selectClassName
           }}
-          IconComponent={() => <ArrowSelect customDimensions={customDimensionsIcon} className={IconClassNames} name={!!icon ? icon : 'arrowSelect'} />}
+          IconComponent={() => <ArrowSelect className={IconClassNames} name={!!icon ? icon : 'arrowSelect'} />}
           MenuProps={{
             disablePortal: true,
             disableAutoFocus: true,
@@ -186,8 +179,8 @@ const MaterialSelect: React.FC<IVehicleModalProps> = ({
             PaperProps: {
               sx: {
                 maxHeight: {
-                  xs: MOBILE_ITEM_HEIGHT * amountOfItems + ITEM_PADDING_TOP,
-                  sm: ITEM_HEIGHT * amountOfItems + ITEM_PADDING_TOP
+                  xs: MOBILE_ITEM_HEIGHT * MENU_ITEMS + ITEM_PADDING_TOP,
+                  sm: ITEM_HEIGHT * MENU_ITEMS + ITEM_PADDING_TOP
                 }
               }
             },

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

@@ -7,16 +7,13 @@ const CookieModal = () => {
   const { isVisible, toggleModal } = useModal();
   const [modal, setModal] = useState('');
 
-  useEffect(
-    () => {
-      const cookieConfig = localStorage.getItem('cookieConfig');
-      if (!cookieConfig) {
-        setModal('PREVIEW_COOKIE_MODAL');
-        toggleModal();
-      } else setTimeout(() => { updateCookieList(); }, 3000);
-    },
-    []
-  );
+  useEffect(() => {
+    const cookieConfig = localStorage.getItem('cookieConfig');
+    if (!cookieConfig) {
+      setModal('PREVIEW_COOKIE_MODAL');
+      toggleModal();
+    } else setTimeout(() => { updateCookieList(); }, 3000);
+  }, []);
 
   const onClearModalState = () => {
     setModal('');

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

@@ -8,6 +8,5 @@ export const BaseModalWrapper = styled('div')({
   width: 'fit-content',
   backgroundColor: '#fff',
   boxShadow: '0px 0px 20px rgba(76, 78, 100, 0.4)',
-  borderRadius: '10px',
-  maxWidth: '93%'
+  borderRadius: '10px'
 });

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

@@ -1,5 +1,3 @@
-@import '../../../../../theme/mixins.styl';
-
 .modalWrapper
   padding: 16px 10px 25px 25px
   text-align: center
@@ -16,7 +14,7 @@
 
 .modalContent
   font-family: sans-serif
-  font-size: 14px;
+  font-size: 16px;
   line-height: 24px;
   text-align: justify;
   letter-spacing: 0.15px;
@@ -45,24 +43,14 @@
   display: flex
   justify-content: center
   column-gap: 20px
-  +media-phone-only()
-    column-gap: 0
 
 .modalBtn
   height: 38px
-  text-transform: capitalize !important
-  +media-phone-only()
-    font-size: 11px !important
+  text-transform: uppercase !important
 
 .outlinedBtn
   border: none !important
 
 .switchBlock
   display: flex
-  justify-content: space-between
-  align-items: center
-  font-size: 12px
-  line-height: 15px
-  letter-spacing: 1px
-  color: rgba(76, 78, 100, 0.87)
-  text-align: left
+  justify-content: space-between

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

@@ -43,7 +43,7 @@ const ManageCookieModal = ({ toggleModal }) => {
     value: marketingMasterSwitch,
     onChange: onHandleMarketingSwitchValue
   };
-
+  
   const analyticsSwitchProps = {
     value: analytcisMasterSwitch,
     onChange: onHandleAnalyticsSwitchValue
@@ -55,7 +55,7 @@ const ManageCookieModal = ({ toggleModal }) => {
     onChange: () => {}
   };
 
-  const onAccept = (value?: object) => {
+  const onAccept = (value?: object) => {    
     const cookieConfig = value || {
       marketing: Object.keys(marketingSwitches).filter(i => !marketingSwitches[i]) || [],
       analytics: Object.keys(analyticsSwitches).filter(i => !analyticsSwitches[i]) || []
@@ -73,7 +73,7 @@ const ManageCookieModal = ({ toggleModal }) => {
       <div className={styles.accordions}>
         <MaterialAccordionGroup
           title='Notwendig'
-          tooltipText='Notwendig'
+          tooltipText='tooltip text'
           withSwitch
           switchProps={necessarySwitchProps}
         >
@@ -94,7 +94,6 @@ const ManageCookieModal = ({ toggleModal }) => {
         <MaterialAccordionGroup
           title='Analytisch'
           withSwitch
-          tooltipText='Analytisch'
           switchProps={analyticsSwitchProps}
         >
           <span>
@@ -116,7 +115,6 @@ const ManageCookieModal = ({ toggleModal }) => {
         <MaterialAccordionGroup
           title='Marketing'
           withSwitch
-          tooltipText='Marketing'
           switchProps={marketingSwitchProps}
         >
           <span>

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

@@ -1,12 +1,8 @@
-@import '../../../../../theme/mixins.styl';
-
 .modalWrapper
   padding: 26px 60px 56px
   text-align: center
   box-sizing: border-box
   max-width: 600px
-  +media-phone-only()
-    padding: 13px 15px 28px
 
 .modalTitle
   font-family: sans-serif
@@ -24,22 +20,16 @@
   letter-spacing: 0.15px;
   color: rgba(76, 78, 100, 0.87);
   margin-top: 20px
-  +media-phone-only()
-    column-gap: 0
 
 .buttonsContainer
   margin-top: 20px
   display: flex
   justify-content: center
   column-gap: 20px
-  +media-phone-only()
-    column-gap: 0
 
 .modalBtn
   height: 38px
-  text-transform: capitalize !important
-  +media-phone-only()
-    font-size: 11px !important
+  text-transform: uppercase !important
 
 .outlinedBtn
   border: none !important

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

@@ -3,7 +3,6 @@ import IconSVG from '../../../IconSVG/IconSVG';
 import Button from '../../../Button/Button';
 import styles from './PreviewCookieModal.styl';
 import classNames from 'classnames';
-import { updateCookieList } from '../../../../../framework/utils/CommonUtils';
 
 interface IPreviewCookieModal {
   toggleModal: () => void;
@@ -13,7 +12,6 @@ interface IPreviewCookieModal {
 const PreviewCookieModal = ({ toggleModal, setModal }: IPreviewCookieModal) => {
   const onAcceptAll = () => {
     localStorage.setItem('cookieConfig', JSON.stringify([]));
-    updateCookieList();
     toggleModal();
   };
 

package/source/components/_common/TimePicker/TimePicker.styl

@@ -17,7 +17,5 @@
         padding-right: 0 !important
 
 .selectIcon
-    width: 21px
-    height: auto
-    max-width: none !important
+    width: 30px
     padding-right: 10px

package/source/components/_common/TimePicker/TimePicker.tsx

@@ -46,8 +46,8 @@ const TimePicker = ({
   const nextWeekDays = [...Array(7).keys()].map((days, index) => (
   {
     value: index,
-    label: new Date(Date.now() + setNewDay + 86400000 * days).toLocaleString(lang, { day: '2-digit', month: '2-digit', year: 'numeric' }),
-    day: new Date(Date.now() + setNewDay + 86400000 * days).toLocaleString(lang, { day: '2-digit', month: '2-digit', year: 'numeric' })
+    label: new Date(Date.now() + setNewDay + 86400000 * days).toLocaleString(lang, { weekday: 'short', day: 'numeric', month: '2-digit' }),
+    day: new Date(Date.now() + setNewDay + 86400000 * days).toLocaleString(lang, { weekday: 'short', day: 'numeric', month: '2-digit' })
   }
   ));
   const nextWeekDaysFull = [...Array(7).keys()].map(days => new Date(Date.now() + setNewDay + 86400000 * days));
@@ -123,8 +123,6 @@ const TimePicker = ({
         className={styles.dayForm}
         classNameIcon={styles.selectIcon}
         items={nextWeekDays}
-        amountOfItems={6}
-        customDimensionsIcon
       />
       <MaterialSelect
         onChange={(value: any) => timeChange(value)}
@@ -136,8 +134,6 @@ const TimePicker = ({
         selectClassName={styles.select}
         classNameIcon={styles.selectIcon}
         items={getTimeRanges()}
-        amountOfItems={6}
-        customDimensionsIcon
       />
     </div>
   );

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

@@ -58,8 +58,7 @@ export const AmountBlock = styled('span')({
   padding: '0 6px',
   lineHeight: '20px',
   fontSize: '12px',
-  fontWeight: 'bold',
-  marginLeft: '10px'
+  fontWeight: 'bold'
 });
 
 export const HeaderComponent = styled('div')({

package/source/components/_common/withStats/withStats.styl

@@ -1,6 +1,7 @@
+@import '../../../theme/theme.styl'
 @import '../../../theme/mixins.styl'
 
-$xs-height = 24px
+$xs-height = 20px
 $sm-height = 30px
 $md-height = 34px
 $indent = 10px
@@ -11,39 +12,31 @@ $indent = 10px
 .controls
   position: absolute
   right: 0
-  bottom: $indent;
+  bottom: 0
   width: 100%
   display: flex
   flex-wrap: wrap
   justify-content: flex-start
+  align-items: center
+  font-family: $font-style-arial
   font-size: $font-size-default
-  padding: 0 16px
-  box-sizing: border-box;
-  gap: 0.6em;
-  user-select: none;
-
-  +media-tablet-landscape-up()
-    padding: 0 6px
-
-  &::after
-    position: absolute;
-    width: calc(100% - 20px);
-    height: 1px;
-    left: 10px;
-    bottom: -10px;
-    background-color: rgba(76,78,100,0.12);
+  padding: 0 $indent
+  box-sizing: border-box
+  user-select: none
 
 .section
-  background-color: rgba(255, 255, 255, 0.75);
-  border-radius: 2px
+  height: 100%
+  background-color: rgba(#fff, .6);
+  border-radius: 3px
   display: flex
-  line-height: 1;
   align-items: center
-  justify-content: space-around;
-  height: inherit;
-
-  &:last-of-type
+  justify-content: space-arround
+  flex-shrink: 0
+  margin-bottom: $indent
+  margin-right: 0.6em
+  &:last-child
     margin-left: auto
+    margin-right: 0
 
 .starButton
   cursor: pointer
@@ -71,38 +64,40 @@ $indent = 10px
   cursor: pointer
 
 .statsEyeIcon
-  margin-right: 5px
+  margin-right: 0.1em
   width: 1.5em
   height: 1.5em
 
 .statsStarIcon
-  margin-right: 5px
-  margin-bottom: 3px
-  width: 20px
-  height: 20px
-  fill: rgb(100, 100, 100)
-  transform:scale(0.8)
+  margin-right: 0.1em
+  width: 1.1em
+  height: 1.1em
+  stroke: #333;
 
 .accented
   color: $primary
   fill: $primary
+  stroke: $primary;
 
 .xs
-  height: $xs-height
+  min-height: $xs-height
+
   .section
     padding: 0 5px
     font-size: 12px
-    color: rgba(51, 51, 51, 0.8);
+    line-height: $xs-height
+    color: $grey-3;
 
   .starButton
     width: 1.5em
     height: 1.5em
 
 .sm
-  height: $sm-height
+  min-height: $sm-height
   .section
     padding: 0 6px
     font-size: 16px
+    line-height: $sm-height
 
   .cameraIcon
     width: 24px
@@ -114,11 +109,12 @@ $indent = 10px
     height: 2.3em
 
 .md
-  height: $md-height
+  min-height: $md-height
 
   .section
     padding: 0 6px
     font-size: 16px
+    line-height: $md-height
 
   .cameraIcon
     width: 24px
@@ -128,23 +124,71 @@ $indent = 10px
   .starButton
     width: 2.4em
     height: 2.3em
+    
 
 .topWrapper
   position: absolute
-  left: 16px
-  right: 16px
+  left: 5px
+  right: 5px
   top: 5px
   user-select: none
   z-index: 1
-  display: flex;
-  gap: 10px;
+  font-size: 14px
+  font-weight: bold
+
+  +media-tablet-down()
+    font-size: 16px
 
-  +media-tablet-landscape-up()
-    left: 6px
-    right: 6px
+.priceDifference
+  background: $lightGreen
+  float: left
+  font-size: 12px
+  padding-top: 1px;
+  font-weight: bold
+
+  +media-tablet-down()
+    font-size: 16px
+    padding: 0 10px
+    line-height: 24px
+    height: 24px
 
 .priceDifferencePerCent
-  margin-left: auto;
+  color: white
+  float: right
+  position relative;
+  z-index: 1;
+  padding: 5px 7px 0 0
+  box-sizing: border-box;
+  text-align: center
+  white-space: nowrap;
+  line-height: 1;
+  font-size: 16px;
+
+  +media-tablet-up()
+    padding: 4px 4px 0 0px
+    font-size: 12px;
+
+
+.perCentIcon
+  position: absolute
+  top: 0
+  right: 0
+  z-index: -1
+
+  +media-tablet-up()
+    transform: scale(.71);
+    right: -9px;
+    top: -3px;
 
 .new
+  margin-right: 10px
+  float: left
+  font-size: 12px
+  font-weight: bold
   text-transform: uppercase
+
+  +media-tablet-down()
+    font-size: 16px
+    padding: 0 10px
+    line-height: 24px
+    height: 24px

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

@@ -82,19 +82,6 @@ export default function withStats(WrappedComponent: any) {
       );
     };
 
-    renderRotateSvg = (): JSX.Element => {
-      const { hasInteriorExteriorPhoto, images } = this.props;
-      const hasExteriorPhotos = hasInteriorExteriorPhoto && Array.isArray(images) && images.length > 0;
-      if (!hasExteriorPhotos) return null;
-      return (
-        <div className={styles.section}>
-          {hasExteriorPhotos ? (
-            <IconSVG name='rotate360New' customDimensions className={styles.statsEyeIcon} />
-          ) : null}
-        </div>
-      );
-    };
-
     renderStarButton = () => {
       const { isFavoured, onFavoriteClick } = this.props;
       if (!onFavoriteClick) return null;
@@ -112,7 +99,9 @@ export default function withStats(WrappedComponent: any) {
     renderStatsData = (): JSX.Element => {
       const { statsData, isFavoured, onFavoriteClick } = this.props;
       if (!statsData) return null;
+
       const { totalCarImpCount, totalFavCount } = statsData;
+
       const favoritesClassName = classnames(
         styles.statsFavoritesCount,
         {
@@ -130,7 +119,7 @@ export default function withStats(WrappedComponent: any) {
             </span>
           </div> : null}
           {!!totalFavCount ? <div className={favoritesClassName} onClick={onFavoriteClick}>
-            <IconSVG name='star' customDimensions className={favoritesIconClassName} />
+            <IconSVG name='common_StarRoundedCorners' customDimensions className={favoritesIconClassName} />
             <span>
               {totalFavCount}
             </span>
@@ -149,14 +138,17 @@ export default function withStats(WrappedComponent: any) {
         <div className={classnames(styles.topWrapper, classWrapPrice)}>
           {showNewLabel && <Badge type='blue' className={styles.new}>{newText}</Badge>}
           {!!historyPriceDifference && historyPriceDifference >= MIN_PRICE_DIFFERENCE && (
-            <Badge type='green'>
+            <Badge type='green' className={styles.priceDifference}>
               {`-`}
               <FormattedNumber value={historyPriceDifference} numbersAfterDot={0} />
               {` ${EUR}`}
             </Badge>
           )}
           {!!historyPriceDifferencePerCent && historyPriceDifferencePerCent >= MIN_PERCENT && (
-            <Badge type='red' className={styles.priceDifferencePerCent}>-{historyPriceDifferencePerCent}%</Badge>
+            <div className={styles.priceDifferencePerCent}>
+              <IconSVG name='discountRibbonNew' className={styles.perCentIcon} customDimensions />
+              -{historyPriceDifferencePerCent}%
+            </div>
           )}
         </div>
       );
@@ -174,7 +166,6 @@ export default function withStats(WrappedComponent: any) {
           <WrappedComponent {...wrappedComponentProps} onSlideChange={this.onSlideChange} isReferenceSearch={isReferenceSearch} />
           <div className={classnames(styles.controls, styles[statsSize])}>
             {this.renderImagesData()}
-            {this.renderRotateSvg()}
             {this.renderStarButton()}
             {this.renderStatsData()}
           </div>

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

@@ -6,8 +6,8 @@
   width: 100%;
   // background-color: #fff;
   align-self: flex-start;
-  border: 1px solid rgba(76, 78, 100, 0.12);
-  border-radius: 10px;
+  border: 1px solid $grey-e
+  border-radius: 3px
   box-sizing: border-box;
   
 
@@ -40,8 +40,6 @@
   line-height: 40px
   padding: 0 10px
   background-color: #fff;
-  border-top-left-radius: 10px;
-  border-top-right-radius: 10px;
 
 .linkToDetailed
   display: block
@@ -50,6 +48,4 @@
   background-color: #fff
   color: $skyBlue
   font-weight: 700
-  font-size: 14px
-  border-bottom-left-radius: 10px;
-  border-bottom-right-radius: 10px;
+  font-size: 14px