@bytebrand/fe-ui-core 4.1.65 → 4.1.67

package/package.json

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

package/source/components/SearchFilters/common/RangeControlled/RangeControlled.tsx

@@ -116,15 +116,15 @@ const RangeControlled = ({
 
   const fromProps = {
     size: 'custom',
-    value:from ? numberWithDot(from):null,
+    value:from ? numberWithDot(from) : null,
     label: `${t('filters.from')} ${unit ? unit : '€'}`,
     onChange: (value: any) => onDropDownChange('from', value),
-    items: getOptions(sliceLessThan(getDropdownRange(name), to)),
+    items: getOptions(sliceLessThan(getDropdownRange(name), to))
   };
 
   const toProps = {
     size: 'custom',
-    value:to ? numberWithDot(to):null,
+    value:to ? numberWithDot(to) : null,
     label: `${t('filters.to')} ${unit ? unit : '€'}`,
     onChange: (value: any) => onDropDownChange('to', value),
     items: getOptions(sliceMoreThan(getDropdownRange(name), from))

package/source/components/_common/IconSVG/IconSVGConfig.tsx

@@ -284,6 +284,11 @@ import DealersIcon from './SVG/common/DealersIcon';
 import ImageSettingsIcon from './SVG/common/ImageSettingsIcon';
 import SupportCallbackIcon from './SVG/common/SupportCallbackIcon';
 import LogoutIcon from './SVG/common/LogoutIcon';
+
+// mobile header
+import SearchGrey from './SVG/common/SearchGrey';
+import PhoneGrey from './SVG/common/PhoneGrey';
+import UserGrey from './SVG/common/UserGrey';
 interface IComponentsProp {
   [key: string]: (props: any) => React.ReactNode;
 }
@@ -659,7 +664,12 @@ const components: IComponentsProp = {
   dealersIcon: DealersIcon,
   imageSettingsIcon: ImageSettingsIcon,
   supportCallbackIcon: SupportCallbackIcon,
-  logoutIcon: LogoutIcon
+  logoutIcon: LogoutIcon,
+
+  // header mobile
+  searchGrey: SearchGrey,
+  phoneGrey: PhoneGrey,
+  userGrey: UserGrey
 };
 
 export default components;

package/source/components/_common/IconSVG/SVG/common/PhoneGrey.tsx

@@ -0,0 +1,22 @@
+/* tslint:disable */
+import React from 'react';
+
+const PhoneGrey = (
+  props: any
+) => {
+  return (
+    <svg
+      width="19"
+      height="19"
+      viewBox="0 0 19 19"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M17.6995 18.9331C15.5495 18.9331 13.4538 18.4538 11.4125 17.4951C9.37051 16.5371 7.56218 15.2704 5.98751 13.6951C4.41218 12.1204 3.14551 10.3121 2.18751 8.27011C1.22885 6.22877 0.749512 4.13311 0.749512 1.98311C0.749512 1.68311 0.849512 1.43311 1.04951 1.23311C1.24951 1.03311 1.49951 0.933105 1.79951 0.933105H5.84951C6.08285 0.933105 6.29118 1.00811 6.47451 1.15811C6.65785 1.30811 6.76618 1.49977 6.79951 1.73311L7.44951 5.23311C7.48284 5.46644 7.47884 5.67877 7.43751 5.87011C7.39551 6.06211 7.29951 6.23311 7.14951 6.38311L4.74951 8.83311C5.44951 10.0331 6.32451 11.1581 7.37451 12.2081C8.42451 13.2581 9.58285 14.1664 10.8495 14.9331L13.1995 12.5831C13.3495 12.4331 13.5455 12.3204 13.7875 12.2451C14.0288 12.1704 14.2662 12.1498 14.4995 12.1831L17.9495 12.8831C18.1828 12.9331 18.3745 13.0454 18.5245 13.2201C18.6745 13.3954 18.7495 13.5998 18.7495 13.8331V17.8831C18.7495 18.1831 18.6495 18.4331 18.4495 18.6331C18.2495 18.8331 17.9995 18.9331 17.6995 18.9331Z" fill="#4C4E64" fillOpacity="0.87"/>
+    </svg>
+  )
+}
+
+export default PhoneGrey;
+/* tslint:enable */

package/source/components/_common/IconSVG/SVG/common/SearchGrey.tsx

@@ -0,0 +1,22 @@
+/* tslint:disable */
+import React from 'react';
+
+const SearchGrey = (
+  props: any
+) => {
+  return (
+    <svg
+      width="19"
+      height="19"
+      viewBox="0 0 19 19"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M16.6495 18.2331L11.0495 12.6331C10.5495 13.0331 9.97451 13.3498 9.32451 13.5831C8.67451 13.8164 7.98285 13.9331 7.24951 13.9331C5.43284 13.9331 3.89551 13.3041 2.63751 12.0461C1.37885 10.7874 0.749512 9.24977 0.749512 7.43311C0.749512 5.61644 1.37885 4.07877 2.63751 2.82011C3.89551 1.56211 5.43284 0.933105 7.24951 0.933105C9.06618 0.933105 10.6038 1.56211 11.8625 2.82011C13.1205 4.07877 13.7495 5.61644 13.7495 7.43311C13.7495 8.16644 13.6328 8.85811 13.3995 9.50811C13.1662 10.1581 12.8495 10.7331 12.4495 11.2331L18.0745 16.8581C18.2578 17.0414 18.3495 17.2664 18.3495 17.5331C18.3495 17.7998 18.2495 18.0331 18.0495 18.2331C17.8662 18.4164 17.6328 18.5081 17.3495 18.5081C17.0662 18.5081 16.8328 18.4164 16.6495 18.2331ZM7.24951 11.9331C8.49951 11.9331 9.56218 11.4958 10.4375 10.6211C11.3122 9.74577 11.7495 8.68311 11.7495 7.43311C11.7495 6.18311 11.3122 5.12044 10.4375 4.24511C9.56218 3.37044 8.49951 2.93311 7.24951 2.93311C5.99951 2.93311 4.93684 3.37044 4.06151 4.24511C3.18684 5.12044 2.74951 6.18311 2.74951 7.43311C2.74951 8.68311 3.18684 9.74577 4.06151 10.6211C4.93684 11.4958 5.99951 11.9331 7.24951 11.9331Z" fill="#4C4E64" fillOpacity="0.87"/>
+    </svg>
+  )
+}
+
+export default SearchGrey;
+/* tslint:enable */

package/source/components/_common/IconSVG/SVG/common/UserGrey.tsx

@@ -0,0 +1,22 @@
+/* tslint:disable */
+import React from 'react';
+
+const UserGrey = (
+  props: any
+) => {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M8.96437 8.93312C7.75302 8.93312 6.71603 8.50181 5.8534 7.63918C4.99077 6.77655 4.55946 5.73956 4.55946 4.52821C4.55946 3.31685 4.99077 2.27986 5.8534 1.41723C6.71603 0.554606 7.75302 0.123291 8.96437 0.123291C10.1757 0.123291 11.2127 0.554606 12.0753 1.41723C12.938 2.27986 13.3693 3.31685 13.3693 4.52821C13.3693 5.73956 12.938 6.77655 12.0753 7.63918C11.2127 8.50181 10.1757 8.93312 8.96437 8.93312ZM2.357 17.743C1.75132 17.743 1.23301 17.5275 0.802063 17.0965C0.370382 16.6648 0.154541 16.1462 0.154541 15.5405V14.6595C0.154541 14.0355 0.315321 13.4617 0.636879 12.9383C0.957704 12.4156 1.38425 12.0166 1.91651 11.7413C3.05444 11.1723 4.21073 10.7454 5.38538 10.4605C6.56002 10.1764 7.75302 10.0343 8.96437 10.0343C10.1757 10.0343 11.3687 10.1764 12.5434 10.4605C13.718 10.7454 14.8743 11.1723 16.0122 11.7413C16.5445 12.0166 16.971 12.4156 17.2919 12.9383C17.6134 13.4617 17.7742 14.0355 17.7742 14.6595V15.5405C17.7742 16.1462 17.5587 16.6648 17.1278 17.0965C16.6961 17.5275 16.1774 17.743 15.5717 17.743H2.357Z" fill="#4C4E64" fillOpacity="0.87"/>
+    </svg>
+  )
+}
+
+export default UserGrey;
+/* tslint:enable */

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

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

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

@@ -1,15 +1,15 @@
 import React, { useEffect, useState } from 'react';
 import _merge from 'lodash/merge';
-import styles from './ManageCookieModal.styl';
+import classNames from 'classnames';
 
 import IconSVG from '../../../IconSVG/IconSVG';
 import Button from '../../../Button/Button';
 import MaterialAccordionGroup from '../../../MaterialAccordionGroup/MaterialAccordionGroup';
-import classNames from 'classnames';
 import MaterialSwitch from '../../../MaterialSwitch/MaterialSwitch';
 import { COOKIE_SCHEMA } from '../../../../../framework/constants/common';
-import Cookies from 'js-cookie';
-import { config } from '../../../../../framework/constants/app';
+import { updateCookieList } from '../../../../../framework/utils/CommonUtils';
+
+import styles from './ManageCookieModal.styl';
 
 const ManageCookieModal = ({ onClearModalState }) => {
   const [analytcisMasterSwitch, setAnalyticsMasterSwitch] = useState(true);
@@ -43,6 +43,7 @@ const ManageCookieModal = ({ onClearModalState }) => {
     value: marketingMasterSwitch,
     onChange: onHandleMarketingSwitchValue
   };
+  
   const analyticsSwitchProps = {
     value: analytcisMasterSwitch,
     onChange: onHandleAnalyticsSwitchValue
@@ -60,12 +61,7 @@ const ManageCookieModal = ({ onClearModalState }) => {
       analytics: Object.keys(analyticsSwitches).filter(i => !analyticsSwitches[i]) || []
     };
     localStorage.setItem('cookieConfig', JSON.stringify(cookieConfig));
-    
-    Object.keys(cookieConfig).forEach(group => {
-      cookieConfig[group].forEach((cookie: string) => {
-        Cookies.remove(cookie, { path: '/' });
-      })
-    })
+    updateCookieList();
     onClearModalState();
   };
 
@@ -139,8 +135,8 @@ const ManageCookieModal = ({ onClearModalState }) => {
         </MaterialAccordionGroup>
       </div>
       <div className={styles.buttonsContainer}>
-        <Button onClick={() => onAccept()}className={classNames(styles.modalBtn, styles.outlinedBtn)} variant='outlined'>Cookie-Einstellungen</Button>
-        <Button onClick={() => onAccept({})} className={styles.modalBtn}>zustimmen</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/UserMenu/MaterialMenu.tsx

@@ -4,6 +4,7 @@ import ListItem from './MaterialMenuItem';
 import { ThemeProvider } from '@mui/material/styles';
 import { Theme, FlexContainer, HeaderComponent } from './MaterialMenu.styled';
 import IconSVG from '../IconSVG/IconSVG';
+import { isMobileOnly } from 'react-device-detect';
 
 export interface ILoggedInUserInfoProps {
   profileName?: string;
@@ -53,8 +54,8 @@ const MaterialMenu = ({ menuItems, headerComponent, onChange, isLang, containerC
             <FlexContainer>
               <IconSVG
                 customDimensions
-                width='42px'
-                height='27px'
+                width={isMobileOnly ? '28px' : '42px'}
+                height={isMobileOnly ? '18px' : '27px'}
                 name={`new_lang_${value}`}
               />
             </FlexContainer>
@@ -73,11 +74,11 @@ const MaterialMenu = ({ menuItems, headerComponent, onChange, isLang, containerC
           {menuItems.map((listItemProps: any, index: number) => {
             return !!listItemProps &&
               <ListItem
-                key={listItemProps.text}
+                key={index}
                 selected={index === selectedIndex}
                 onClick={() => {
                   onHandleChange(listItemProps.value, index);
-                  handleClose();  
+                  handleClose();
                 }}
                 isSelect={isSelect}
                 Link={Link}

package/source/framework/utils/CommonUtils.ts

@@ -529,4 +529,13 @@ export function setUtmParameters() {
   expiresDate.setDate(expiresDate.getDate() + 1);
 
   document.cookie = `marketing=${JSON.stringify(marketing)};expires=${expiresDate};domain=.${config.DOMAIN};path=/`;
-}
+};
+
+export const updateCookieList = () => {
+  const cookieConfig = JSON.parse(localStorage.getItem('cookieConfig')) || {};
+  Object.keys(cookieConfig).forEach((group: string) => {
+    cookieConfig[group].forEach((cookie: string) => {
+      Cookies.remove(cookie, { path: '/', domain: config[process.env.NODE_ENV].DOMAIN });
+    })
+  });
+};