@bytebrand/fe-ui-core 4.1.27 → 4.1.29

package/package.json

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

package/source/components/SearchWidget/EnvironmentWidget/EnvironmentWidget.tsx

@@ -132,7 +132,7 @@ const EnvironmentWidget: React.FC<IEnvironmentWidgetProps> = ({
           <MaterialAutocomplete
             size='custom'
             value={getConsumption ? getValue(getConsumption) : null}
-            onChange={(value: string) => onFilterChange(CONSUMPTION_KEY, { from: void value, to: value })}
+            // onChange={(value: string) => onFilterChange(CONSUMPTION_KEY, { from: void value, to: value })}
             label={t('filters.consumption')}
             unit='l/100 km'
             items={getOptions(CONSUMPTION_FIX)}

package/source/components/_common/UserMenu/{UserMenu.story.js → MaterialMenu.story.js}

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { storiesOf } from '@storybook/react';
-import UserMenu from './UserMenu';
+import MaterialMenu from './MaterialMenu';
 
 const superAdmin = true;
 
@@ -29,7 +29,7 @@ const userMenuItems = [
   {
     icon: 'favoritesIcon',
     content: 'Favorites',
-    amount: 122
+    amount: 0
   },
   {
     icon: 'dealersIcon',
@@ -41,7 +41,7 @@ const userMenuItems = [
     icon: 'imageSettingsIcon',
     content: 'Image Settings'
   },
-  superAdmin && {
+  !superAdmin && {
     icon: 'supportCallbackIcon',
     content: 'Support & Call back',
     divider: true
@@ -53,4 +53,4 @@ const userMenuItems = [
 
 ];
 
-storiesOf('_Common_UI', module).add('UserMenu', () => <UserMenu userMenuItems={userMenuItems} headerComponent='Firstname Lastname' />);
+storiesOf('_Common_UI', module).add('UserMenu', () => <MaterialMenu menuItems={userMenuItems} headerComponent='Firstname Lastname' />);

package/source/components/_common/UserMenu/{UserMenu.styled.tsx → MaterialMenu.styled.tsx}

@@ -21,9 +21,8 @@ export const Theme = createTheme({
       styleOverrides: {
         root: {
           overflow: 'visible',
-          filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
+          boxShadow: '0px 2px 8px rgba(0,0,0,0.32)',
           marginTop: 1.5,
-          width: '230px',
           borderRadius: '10px'
         }
       }
@@ -61,3 +60,7 @@ export const AmountBlock = styled('span')({
   fontSize: '12px',
   fontWeight: 'bold'
 });
+
+export const FlexContainer = styled('div')({
+  display: 'flex'
+});

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

@@ -0,0 +1,78 @@
+import React, { useState, useRef } from 'react';
+import Menu from '@mui/material/Menu';
+import ListItem from './MaterialMenuItem';
+import { ThemeProvider } from '@mui/material/styles';
+import { Theme, FlexContainer } from './MaterialMenu.styled';
+import IconSVG from '../IconSVG/IconSVG';
+
+export interface ILoggedInUserInfoProps {
+  profileName?: string;
+  menuItems: any;
+  headerComponent?: any;
+  isLang?: boolean;
+  onChange?: (value: string) => void;
+  containerClassname?: string;
+}
+
+const MaterialMenu = ({ menuItems, headerComponent, onChange, isLang, containerClassname }: ILoggedInUserInfoProps) => {
+
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [selectedIndex, setSelectedIndex] = React.useState(1);
+  const open = Boolean(anchorEl);
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const onHandleChange = (value: any, index: number) => {
+    setSelectedIndex(index);
+    onChange(value);
+  };
+
+  const containerRef = useRef(null);
+
+  return (
+    <ThemeProvider theme={Theme}>
+      <div className={containerClassname} ref={containerRef} onMouseEnter={handleClick}>
+        {headerComponent && headerComponent}
+        {isLang &&
+          <FlexContainer>
+            <IconSVG
+              customDimensions
+              width='42px'
+              height='27px'
+              name={`new_lang_${menuItems[selectedIndex].value}`}
+            />
+          </FlexContainer>
+        }
+        <Menu
+          anchorEl={anchorEl}
+          open={open}
+          onClose={handleClose}
+          onClick={handleClose}
+          PaperProps={{
+            onMouseLeave: handleClose,
+            elevation: 0
+          }}
+          transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+          anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+        >
+          {menuItems.map((listItemProps: any, index: number) => {
+            const { value } = listItemProps;
+            return !!listItemProps &&
+              <ListItem
+                key={listItemProps.text}
+                selected={index === selectedIndex}
+                onClick={() => onHandleChange(value, index)}
+                { ...listItemProps }
+              />;
+          })}
+        </Menu>
+      </div>
+    </ThemeProvider>
+  );
+};
+
+export default MaterialMenu;

package/source/components/_common/UserMenu/{MenuItem.tsx → MaterialMenuItem.tsx}

@@ -3,7 +3,7 @@ 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 './UserMenu.styled';
+import { AmountBlock } from './MaterialMenu.styled';
 import { Link } from '@mui/material';
 
 interface IListItem {
@@ -26,7 +26,7 @@ const ListItem = ({ icon, content, amount, divider, onClick, href, isComponent }
       >
         {icon && <ListItemIcon><IconSVG customDimensions name={icon} /></ListItemIcon>}
         <ListItemText>{content}</ListItemText>
-        {amount && <AmountBlock>{amount}</AmountBlock>}
+        {(amount || amount === 0) && <AmountBlock>{amount}</AmountBlock>}
       </MenuItem>
     </Link>
   );

package/source/framework/factories/BreadcrumbsFactory.tsx

@@ -71,6 +71,20 @@ const BreadcrumbsFactory: IBreadcrumbsFactoryConfig = {
     ]
   }),
 
+  ADDRESSES_SETTINGS: (props: any) => ({
+    list: [
+      { link: '/account/addresses', title: props.t('common:breadcrumbs.DashboardNew') },
+      { link: '', title: props.t('common:breadcrumbs.Address') }
+    ]
+  }),
+
+  KONTAKT_SETTINGS: (props: any) => ({
+    list: [
+      { link: '/account/kontakt', title: props.t('common:breadcrumbs.DashboardNew') },
+      { link: '', title: props.t('common:breadcrumbs.Kontakt') }
+    ]
+  }),
+
   IMAGE_SETTINGS: (props: any) => ({
     list: [
       { link: '', title: props.t('common:breadcrumbs.ImageSettings') }

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

@@ -1,53 +0,0 @@
-import React, { useState, useRef } from 'react';
-import Menu from '@mui/material/Menu';
-import ListItem from './MenuItem';
-import { ThemeProvider } from '@mui/material/styles';
-import { Theme } from './UserMenu.styled';
-
-export interface ILoggedInUserInfoProps {
-  profileName?: string;
-  userMenuItems: any;
-  headerComponent?: any;
-}
-
-const LoggedInUserInfo = ({ userMenuItems, headerComponent }: 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 (
-    <ThemeProvider theme={Theme}>
-      <div ref={containerRef} onMouseEnter={handleClick}>
-        <div>
-          {headerComponent}
-        </div>
-        <Menu
-          anchorEl={anchorEl}
-          open={open}
-          onClose={handleClose}
-          onClick={handleClose}
-          PaperProps={{
-            onMouseLeave: handleClose,
-            elevation: 0
-          }}
-          transformOrigin={{ horizontal: 'right', vertical: 'top' }}
-          anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
-        >
-          {userMenuItems.map((listItemProps: any) => {
-            return !!listItemProps && <ListItem key={listItemProps.text} { ...listItemProps } />;
-          })}
-        </Menu>
-      </div>
-    </ThemeProvider>
-  );
-};
-
-export default LoggedInUserInfo;