@bytebrand/fe-ui-core 4.1.23 → 4.1.25

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

@@ -11,17 +11,17 @@ export const Theme = createTheme({
           top: 'calc(50% - 12px)'
         },
         popupIndicator: {
-          padding: 4,
+          padding: 4
         },
         root: ({ ownerState }) => ({
-          ['&.Mui-focused + [data-popper-placement*="bottom"] .MuiOutlinedInput-root']: {
+          ['&.Mui-focused + [data-popper-placement*=`bottom`] .MuiOutlinedInput-root']: {
             borderTopRightRadius: 0,
             borderTopLeftRadius: 0
           },
           ['&.Mui-focused + [data-popper-placement*="bottom"] .MuiOutlinedInput-notchedOutline']: {
             ...(ownerState.name === 'mobileSearch' && { // tslint:disable-line
               borderTop: isMobileOnly ? '2px solid #1976d2' : 0
-            }),
+            })
           },
           ['&.Mui-focused .MuiInputLabel-root']: {
             zIndex: 9999
@@ -32,7 +32,7 @@ export const Theme = createTheme({
             borderLeft: '1px solid rgba(0, 0, 0, 0.23)',
             borderRight: '1px solid rgba(0, 0, 0, 0.23)',
             borderTop: '1px solid rgba(0, 0, 0, 0.23)',
-            marginLeft: 0,
+            marginLeft: 0
           },
           ['&.Mui-focused + [data-popper-placement*="top"] > .MuiPaper-root']: {
             borderBottomLeftRadius: 0,
@@ -135,10 +135,10 @@ export const Theme = createTheme({
               backgroundColor: '#e8e8e8'
             },
             ['& > .MuiChip-root > span:after']: {
-              content: "','"
+              content: `','`
             },
             ['& > .MuiChip-root + .MuiChip-root > span:after']: {
-              content: "''"
+              content: `''`
             },
             ['&.Mui-disabled']: {
               pointerEvents: 'none',
@@ -150,36 +150,36 @@ export const Theme = createTheme({
           },
           ['& .MuiAutocomplete-input']: {
             ...(ownerState.name === 'mobileSearch' && {
-              textAlign: isMobileOnly ? 'right !important' : 'left',
+              textAlign: isMobileOnly ? 'right !important' : 'left'
             })
           },
           ...(ownerState.size === 'custom' && {
-              height: isMobileOnly ? 56 : 48,
-              boxSizing: 'border-box',
-              backgroundColor: '#fff',
-              paddingRight: '42px !important',
+            height: isMobileOnly ? 56 : 48,
+            boxSizing: 'border-box',
+            backgroundColor: '#fff',
+            paddingRight: '42px !important',
 
-              ['& .MuiOutlinedInput-input']: {
-                padding: '5.5px 4px 7.5px 6px !important'
-              }
+            ['& .MuiOutlinedInput-input']: {
+              padding: '5.5px 4px 7.5px 6px !important'
+            }
           }),
           ...(ownerState.name === 'mobileSearch' && {
-              color: isMobileOnly ? '#005ccb' : 'rgba(0, 0, 0, 0.87)',
-              backgroundColor: isMobileOnly ? 'transparent' : '#fff',
-              paddingRight: isMobileOnly ? '33px !important' : '42px !important',
-              textAlign: isMobileOnly ? 'right !important' : 'left',
-              ['& .MuiOutlinedInput-notchedOutline']: {
-                borderWidth: isMobileOnly ? 0 : 1
-              },
-              'input': {
-                ['&::placeholder']: {
-                  color: isMobileOnly ? '#005ccb !important' : 'rgba(0, 0, 0, 0.87) !important'
-                },
-              },
-              ['&.Mui-focused .MuiOutlinedInput-notchedOutline']: {
-                borderWidth: isMobileOnly ? 0 : 1
+            color: isMobileOnly ? '#005ccb' : 'rgba(0, 0, 0, 0.87)',
+            backgroundColor: isMobileOnly ? 'transparent' : '#fff',
+            paddingRight: isMobileOnly ? '33px !important' : '42px !important',
+            textAlign: isMobileOnly ? 'right !important' : 'left',
+            ['& .MuiOutlinedInput-notchedOutline']: {
+              borderWidth: isMobileOnly ? 0 : 1
+            },
+            input: {
+              ['&::placeholder']: {
+                color: isMobileOnly ? '#005ccb !important' : 'rgba(0, 0, 0, 0.87) !important'
               }
-        })
+            },
+            ['&.Mui-focused .MuiOutlinedInput-notchedOutline']: {
+              borderWidth: isMobileOnly ? 0 : 1
+            }
+          })
         })
       }
     }
@@ -197,5 +197,5 @@ export const FlexWrap = styled('div')({
 });
 
 export const CheckboxLabel = styled('span')({
-  whiteSpace: 'pre-line' 
-})
+  whiteSpace: 'pre-line'
+});

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

@@ -11,12 +11,12 @@ import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
 import { Theme, ArrowSelect, CheckboxLabel } from './MaterialAutocomplete.styled';
 import isEqual from 'lodash/isEqual';
 
-export interface Items {
+export interface IItems {
   value: string | number;
   label: string;
   isDisabled?: boolean;
   isSeries?: boolean;
-};
+}
 
 interface IFilmOptionType {
   inputValue?: string;
@@ -79,7 +79,7 @@ const MaterialAutocomplete: React.FC<IMaterialAutocompleteProps> = ({
   placeholder
 }: IMaterialAutocompleteProps) => {
   const filter = createFilterOptions<IFilmOptionType>();
-  
+
   return (
     <ThemeProvider theme={Theme}>
       <Autocomplete
@@ -101,10 +101,10 @@ const MaterialAutocomplete: React.FC<IMaterialAutocompleteProps> = ({
             onChange(newValue);
           } else if (newValue && newValue.inputValue) {
             onChange(newValue.inputValue);
-          } else { 
+          } else {
             if (multiple) {
               if (_indexOf(value, details.option) !== -1) {
-                onChange(_filter(newValue, (value) => details.option !== value));
+                onChange(_filter(newValue, value => details.option !== value));
               } else {
                 onChange(newValue);
               }
@@ -115,15 +115,15 @@ const MaterialAutocomplete: React.FC<IMaterialAutocompleteProps> = ({
             }
           }
         }}
-        getOptionDisabled={(option) => option.isDisabled || option.label === 'default'}
+        getOptionDisabled={option => option.isDisabled || option.label === 'default'}
         filterOptions={(options, params) => {
 
           const filtered = filter(options, params);
-  
+
           const { inputValue } = params;
           // Suggest the creation of a new value
 
-          const isExisting = options.some((option) => inputValue === option.label);
+          const isExisting = options.some(option => inputValue === option.label);
           if (inputValue !== '' && !isExisting && freeSolo) {
             filtered.push({
               value: inputValue,
@@ -158,26 +158,25 @@ const MaterialAutocomplete: React.FC<IMaterialAutocompleteProps> = ({
                 <Checkbox checked={_indexOf(value, props.key) !== -1} />
                 <CheckboxLabel>{t(`cbd:${option}`)}</CheckboxLabel>
               </li>
-            )
-          } else {
-            const isSeries = (option.isDisabled && option.label !== 'No options') || option.isSeries;
-            const label = isSeries ? option.label.toUpperCase() : option.label;
-            return (
-              <li
-                {...props}
-                key={_uniqueId(option.label)}
-                style={isSeries ? {
-                  backgroundColor: 'rgba(58, 53, 65, 0.08)',
-                  color: 'rgba(76, 78, 100, 0.87)',
-                  fontWeight: 600
-                } : null}
-              >
-                {label}
-              </li>
-            )
+            );
           }
+          const isSeries = (option.isDisabled && option.label !== 'No options') || option.isSeries;
+          const label = isSeries ? option.label.toUpperCase() : option.label;
+          return (
+            <li
+              {...props}
+              key={_uniqueId(option.label)}
+              style={isSeries ? {
+                backgroundColor: 'rgba(58, 53, 65, 0.08)',
+                color: 'rgba(76, 78, 100, 0.87)',
+                fontWeight: 600
+              } : null}
+            >
+              {label}
+            </li>
+          );
         }}
-        renderInput={(params) => (
+        renderInput={params => (
           <TextField
             {...params}
             type={type}
@@ -222,5 +221,5 @@ export default memo(MaterialAutocomplete, (prevProps: any, nextProps: any) => {
          prevProps.error === nextProps.error &&
          prevProps.label === nextProps.label &&
          isEqual(prevProps.items, nextProps.items) &&
-         (!_isEmpty(prevProps.items) ? prevProps.items[0].label === nextProps.items[0].label : false) // condition for radioButtons KW PS
+         (!_isEmpty(prevProps.items) ? prevProps.items[0].label === nextProps.items[0].label : false); // condition for radioButtons KW PS
 });

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

@@ -5,17 +5,17 @@ export const Theme = createTheme({
     MuiOutlinedInput: {
       styleOverrides: {
         input: ({ ownerState }) => ({
-          ...(ownerState.size === "smaller" && {
+          ...(ownerState.size === 'smaller' && {
             // tslint:disable-line
             height: 28,
             boxSizing: 'border-box'
           }),
-          ...(ownerState.size === "custom" && {
+          ...(ownerState.size === 'custom' && {
             height: isMobileOnly ? 56 : 48,
             boxSizing: 'border-box'
-          }),
-        }),
-      },
-    },
-  },
+          })
+        })
+      }
+    }
+  }
 });

package/source/components/_common/MaterialField/MaterialField.tsx

@@ -83,12 +83,12 @@ const MaterialField: React.FC<IVehicleModalProps> = ({
         placeholder={placeholder}
         InputProps={{
           endAdornment: type === 'password' ? (
-            <InputAdornment position="end">
+            <InputAdornment position='end'>
               <IconButton
-                aria-label="toggle password visibility"
+                aria-label='toggle password visibility'
                 onClick={handleClickShowPassword}
                 onMouseDown={handleMouseDownPassword}
-                edge="end"
+                edge='end'
               >
                 {showPassword ? <IconSVG name='removeEyeIcon' customDimensions /> : <IconSVG name='removeEyeIcon' customDimensions />}
               </IconButton>

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

@@ -65,7 +65,7 @@ export const Theme = createTheme({
           },
           ['::-webkit-scrollbar-thumb:hover']: {
             backgroundColor: 'grey'
-          },
+          }
         }
       }
     },
@@ -124,10 +124,10 @@ export const FlexWrap = styled('div')({
 
   ['& > span:after']: {
     position: 'relative',
-    content: "', '"
+    content: `', '`
   },
   ['& > span:last-of-type:after']: {
     position: 'relative',
-    content: "''"
+    content: `''`
   }
 });

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

@@ -7,12 +7,12 @@ import _isEmpty from 'lodash/isEmpty';
 import { Theme, ArrowSelect, CloseButton, FlexWrap } from './MaterialSelect.styled';
 import { isMobileOnly } from 'react-device-detect';
 
-export interface Items {
+export interface IItems {
   value: string | number;
   label: string;
   isDisabled?: boolean;
   isSeries?: boolean;
-};
+}
 
 export interface IVehicleModalProps {
   t?: (key: string, options?: object) => string;
@@ -32,7 +32,7 @@ export interface IVehicleModalProps {
   icon?: string;
   children?: JSX.Element | JSX.Element[];
   onChange: (value: any) => void;
-  items: Items[];
+  items: IItems[];
   selectClassName?: string;
 }
 
@@ -59,19 +59,22 @@ const MaterialSelect: React.FC<IVehicleModalProps> = ({
   selectClassName,
   required,
   items,
-  icon,
+  icon
 }: IVehicleModalProps) => {
-  const [ newValue, setValue ] = useState('');
-  const [ multipleValue, setMultipleValue ] = React.useState([]);
+  const [newValue, setValue] = useState('');
+  const [multipleValue, setMultipleValue] = React.useState([]);
 
-  useEffect(() => {
-    setValue(value);
-    setMultipleValue(value);
-  }, [value]);
+  useEffect(
+    () => {
+      setValue(value);
+      setMultipleValue(value);
+    },
+    [value]
+  );
 
   const handleChange = (event: SelectChangeEvent<any>) => {
     const {
-      target: { value },
+      target: { value }
     } = event;
 
     if (multiple) {
@@ -96,9 +99,9 @@ const MaterialSelect: React.FC<IVehicleModalProps> = ({
     classNameIcon
   );
 
-  const renderItems = (items: Items[]) => {
-    if (_isEmpty(items)) return <MenuItem disabled>No options</MenuItem>
-    return items.map(({ value, label, isDisabled = false, isSeries = false } : Items, index: number) => {
+  const renderItems = (items: IItems[]) => {
+    if (_isEmpty(items)) return <MenuItem disabled>No options</MenuItem>;
+    return items.map(({ value, label, isDisabled = false, isSeries = false } : IItems, index: number) => {
       const setDisabled = isDisabled || isSeries;
       if (multiple) {
         return (
@@ -106,23 +109,22 @@ const MaterialSelect: React.FC<IVehicleModalProps> = ({
             <Checkbox checked={multipleValue.indexOf(value) > -1} />
             <ListItemText primary={label} />
           </MenuItem>
-        )
-      } else {
-        return (
-          <MenuItem
-            key={`${value}_${index}`}
-            value={value}
-            disabled={setDisabled}
-            sx={setDisabled ? {
-              backgroundColor: '#e8e8e8',
-              color: '#333',
-              opacity: '1 !important' 
-            } : null}
-          >
-            {!!t ? t(`${namespace}${cbd ? ':' : '.'}${label}`) : getLabel(label, setDisabled)}
-          </MenuItem>
-        )
+        );
       }
+      return (
+        <MenuItem
+          key={`${value}_${index}`}
+          value={value}
+          disabled={setDisabled}
+          sx={setDisabled ? {
+            backgroundColor: '#e8e8e8',
+            color: '#333',
+            opacity: '1 !important'
+          } : null}
+        >
+          {!!t ? t(`${namespace}${cbd ? ':' : '.'}${label}`) : getLabel(label, setDisabled)}
+        </MenuItem>
+      );
     });
   };
 
@@ -156,7 +158,7 @@ const MaterialSelect: React.FC<IVehicleModalProps> = ({
             <>
               {isClearable && (
                 // tslint-disable-next-line
-                <CloseButton sx={{ display: !!isValueEmpty ? 'block' : 'none'}} onClick={handleClearClick}>
+                <CloseButton sx={{ display: !!isValueEmpty ? 'block' : 'none' }} onClick={handleClearClick}>
                   <IconSVG name='close' customDimensions />
                 </CloseButton>
               )}
@@ -171,7 +173,7 @@ const MaterialSelect: React.FC<IVehicleModalProps> = ({
             disableAutoFocus: true,
             elevation: 0,
             style: {
-              position: "absolute",
+              position: 'absolute',
               marginTop: 'auto'
             },
             PaperProps: {

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

@@ -12,16 +12,12 @@ export const StyledButton = styled(Button)({
   alignItems: 'center',
   justifyContent: 'center',
   ['@media all and (min-width: 992px)'] :// and (min-height: $tablet)// -- set mobile layout for high resolution in a landscape mode ACF-3974
-    {textTransform: 'uppercase'}
+    { textTransform: 'uppercase' }
 });
 
 export const StyledIconSVG = styled(IconSVG)({
   marginRight: 10,
   fill: 'white',
   width: '1.5em',
-
-  path: {
-    fill: ({color}) => (color ? color: '#fff')
-  }
-  
-});
+  path: { fill: ({ color }) => (color ? color : '#fff') }
+});

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

@@ -8,7 +8,6 @@ import styles from './OfferRequestButtonWrapper.styl';
 import { supportPhoneLink } from '../../../framework/constants/app';
 import { StyledButton, StyledIconSVG } from './OfferRequestButtonWrapper.styled';
 
-
 const OfferRequestBtnWrapper: React.FunctionComponent<IOfferRequestButtonWrapperProps> = ({
   t,
   car,
@@ -86,7 +85,7 @@ const OfferRequestBtnWrapper: React.FunctionComponent<IOfferRequestButtonWrapper
 
         {isAdditionalOption ? (
           <Visible xs sm md>
-            <StyledButton onClick={() => location.href=`tel:${supportPhoneLink}`} variant='outlined' color='primary' className={classnames(styles.controlButton, styles.phoneButton)}>
+            <StyledButton onClick={() => location.href = `tel:${supportPhoneLink}`} variant='outlined' color='primary' className={classnames(styles.controlButton, styles.phoneButton)}>
               <StyledIconSVG name='popoverPhone' className={styles.phoneIcon} customDimensions />
               {t('sidebar.callUp')}
             </StyledButton>

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import FormattedNumber from '../../FormattedNumber/FormattedNumber';
-import { Slider} from '@mui/material';
+import { Slider } from '@mui/material';
 import { isMobileOnly } from 'react-device-detect';
 import { ThemeProvider } from '@mui/material/styles';
 

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

@@ -0,0 +1,11 @@
+import { styled } from '@mui/system';
+
+export const AmountBlock = styled('span')({
+  backgroundColor: '#5C88FF',
+  color: '#fff',
+  borderRadius: '64px',
+  padding: '0 6px',
+  lineHeight: '20px',
+  fontSize: '12px',
+  fontWeight: 'bold'
+});

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import IconSVG from '../IconSVG/IconSVG';
+import ListItemText from '@mui/material/ListItemText';
+import { AmountBlock } from './MenuItem.styled';
+import { Link } from '@mui/material';
+
+interface IListItem {
+  icon: string;
+  text: string;
+  amount?: number;
+  divider?: boolean;
+  onClick?: () => void;
+  href?: string;
+}
+
+const ListItem = ({ icon, text, amount, divider, onClick, href }: IListItem) => {
+  return (
+    <Link color='#4C4E64DE' variant='caption' href={href} underline='none' onClick={onClick}>
+      <MenuItem
+        sx={{ height: 44 }}
+        divider={divider}
+      >
+        <ListItemIcon>
+          <IconSVG name={icon} />
+        </ListItemIcon>
+        <ListItemText>{text}</ListItemText>
+        {amount && <AmountBlock>{amount}</AmountBlock>}
+      </MenuItem>
+    </Link>
+  );
+};
+
+export default ListItem;

package/source/components/_common/UserMenu/UserMenu.story.js

@@ -0,0 +1,60 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import UserMenu from './UserMenu';
+
+const superAdmin = true;
+
+const userMenuItems = [
+  {
+    icon: 'dashboardIcon',
+    text: 'Dashboard'
+  },
+  {
+    icon: 'userProfileIcon',
+    text: 'Profile'
+  },
+  {
+    icon: 'addressIcon',
+    text: 'Address'
+  },
+  {
+    icon: 'myVehiclesIcon',
+    text: 'My Vehicles'
+  },
+  {
+    icon: 'savedSearchsIcon',
+    text: 'Saved searchs'
+  },
+  {
+    icon: 'favoritesIcon',
+    text: 'Favorites',
+    amount: 122
+  },
+  {
+    icon: 'dealersIcon',
+    text: 'Dealers',
+    amount: 1234,
+    divider: true
+  },
+  {
+    icon: 'imageSettingsIcon',
+    text: 'Image Settings'
+  },
+  superAdmin && {
+    icon: 'supportCallbackIcon',
+    text: 'Support & Call back',
+    divider: true
+  },
+  {
+    icon: 'logoutIcon',
+    text: 'Logout'
+  },
+
+];
+
+storiesOf('_Common_UI', module).add('UserMenu', () => (
+  <div>
+      <UserMenu userMenuItems={userMenuItems} profileName='Firstname Lastname' />
+  </div>
+));

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

@@ -0,0 +1,79 @@
+import React, { useState, useRef } from 'react';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Typography from '@mui/material/Typography';
+import Tooltip from '@mui/material/Tooltip';
+import ListItem from './MenuItem';
+
+export interface ILoggedInUserInfoProps {
+  profileName: string;
+  userMenuItems: any;
+}
+
+const LoggedInUserInfo = ({ profileName, userMenuItems }: ILoggedInUserInfoProps) => {
+
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const containerRef = useRef(null);
+
+  return (
+    <>
+      <div
+        ref={containerRef}
+        onMouseEnter={handleClick}
+      >
+        <div>
+          <Tooltip title='Account settings'>
+            <Typography sx={{ minWidth: 100 }} onClick={handleClick}>{profileName}</Typography>
+          </Tooltip>
+        </div>
+        <Menu
+          anchorEl={anchorEl}
+          id='account-menu'
+          open={open}
+          onClose={handleClose}
+          onClick={handleClose}
+          PaperProps={{
+            elevation: 0,
+            sx: {
+              overflow: 'visible',
+              filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
+              mt: 1.5,
+              width: '230px',
+              borderRadius: '10px',
+              '& .MuiAvatar-root': {
+                width: 32,
+                height: 32,
+                ml: -0.5,
+                mr: 1
+              }
+            }
+          }}
+          transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+          anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+        >
+          <MenuItem
+            divider={true}
+            sx={{ justifyContent: 'center', height: 48 }}
+            disableRipple={true}
+          >
+            {profileName}
+          </MenuItem>
+
+          {userMenuItems.map((listItemProps: any) => {
+            return !!listItemProps && <ListItem key={listItemProps.text} { ...listItemProps } />;
+          })}
+        </Menu>
+      </div>
+    </>
+  );
+};
+
+export default LoggedInUserInfo;

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

@@ -103,7 +103,7 @@ class FiltersContainer extends React.Component<IFiltersContainerProps, {}> {
   onFilterChange = (field: string, value: any, index?: number, isSeries?: boolean) => {
     const { addModelsToFilters, changeFilterValue, changeSeries, getModelsInfoByMaker } = this.props;
     let newValue = _get(value, 'value') || value;
-    
+
     if (newValue && newValue.from === 0) {
       newValue.from = '0';
     }
@@ -370,7 +370,12 @@ class FiltersContainer extends React.Component<IFiltersContainerProps, {}> {
       if ((!isDealerSuperAdmin || isAlternative) && title === SUPER_ADMIN_FILTER_NAME) return null;
 
       return (
-        <FilterBlock isAdminPanel={title === SUPER_ADMIN_FILTER_NAME} key={index} title={t(`SearchPage:filterGroups.${title}`)} expand={index === (isDealerSuperAdmin && !isAlternative ? 0 : 1)} className={title}>
+        <FilterBlock
+          isAdminPanel={title === SUPER_ADMIN_FILTER_NAME}
+          key={index} title={t(`SearchPage:filterGroups.${title}`)}
+          expand={index === (isDealerSuperAdmin && !isAlternative ? 0 : 1)}
+          className={title}
+        >
           {component}
         </FilterBlock>
       );

package/source/framework/constants/app.ts

@@ -16,7 +16,7 @@ export const config: IConfig = {
   },
 
   production: {
-    DOMAIN: productionDomain,
+    DOMAIN: productionDomain
   }
 };