@bytebrand/fe-ui-core 4.1.23 → 4.1.24

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/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
   }
 };
 

package/source/framework/constants/highlights.ts

@@ -66,7 +66,7 @@ export const parkingAssistants = {
     'selector_parkingAssistants_camera',
     'selector_parkingAssistants_360Camera',
     'selector_parkingAssistants_selfSteeringSystems',
-    'selector_parkingAssistants_other',
+    'selector_parkingAssistants_other'
   ],
   endpointKey: 'assistants.parkingAssistants'
 };

package/source/framework/types/types.ts

@@ -175,7 +175,7 @@ export interface IVehicleDetailedSidebarPriceProps {
   isAlternative?: boolean;
   // currentSalesPrice?: number;
   originalSalesPrice?: number;
-  common: { isStrikeShown?: boolean, currentSalesPrice?: number }
+  common: { isStrikeShown?: boolean, currentSalesPrice?: number };
 }
 export interface ITabsProps {
   t?: (key: string, options?: object) => string;

package/source/framework/utils/CommonUtils.ts

@@ -24,12 +24,18 @@ export const formatMileage = (millage: number | string) => {
 export const getFormattedNumber = (num: number) => Number.isFinite(num) ? num.toLocaleString('de-DE') : null;
 
 export const numberWithDot = (value: number | string) => {
-  if (value === 'any' || value === 'beliebig') {
-    return value;
-  } else {
-    return getFormattedNumber(+value);
+  switch (value) {
+    case 'any':
+      return value;
+    case 'beliebig':
+      return value;
+    default: return getFormattedNumber(+value);
   }
-}
+  // if (value === 'any' || value === 'beliebig') {
+  //   return value;
+  // }
+  return getFormattedNumber(+value);
+};
 
 export const arrToObj = (arr: string[]): { [key: string]: boolean } => {
   if (!Array.isArray(arr)) return {};
@@ -359,7 +365,10 @@ export const fixNumber = (num: number | string) => {
 export const getOfferSliders = (financingConfig: any, t: (key: string, options?: object) => string, priceTabIndex: null | number, componentType: string) => {
   const offerObj = offers[+priceTabIndex];
   const offerConfig = financingConfig[offerObj.name];
-  const currentSalesPrice = financingConfig.common ? financingConfig.common.currentSalesPrice : financingConfig.currentSalesPrice; // TODO: fix deprecated. Correct is "financingConfig.common.currentSalesPrice"
+  const currentSalesPrice =
+    financingConfig.common ?
+    financingConfig.common.currentSalesPrice :
+    financingConfig.currentSalesPrice; // TODO: fix deprecated. Correct is "financingConfig.common.currentSalesPrice"
   return offerObj.sliders
     .map((slider: any, index) => {
       if (componentType === 'checkout' && index === 1 && priceTabIndex === 0) return; // remove checkout annual mileage for financing
@@ -393,7 +402,7 @@ export const getSupportedImageFormat = (IMAGE_URL: string, vehicleID: string, im
   return webpFeature ? `${vehicleImageURL}/${size}-cached.webp` : `${vehicleImageURL}/${size}-cached.jpeg`;
 };
 
-export function getChipFilterValue (chip: any, t: (key: string, options?: object) => string, language: string = 'de') {
+export function getChipFilterValue(chip: any, t: (key: string, options?: object) => string, language: string = 'de') {
   let filterValue: string;
   let title: string;
   let from: string;
@@ -484,7 +493,7 @@ export function getChipFilterValue (chip: any, t: (key: string, options?: object
       filterValue = t(`cbd:${chipFilterValue}`);
   }
   return filterValue;
-};
+}
 
 function getUtmQueryParameter() {
   const query = window.location.search;
@@ -493,15 +502,18 @@ function getUtmQueryParameter() {
 
   const queryString = /^[?]/.test(query) ? query.slice(1) : query;
 
-  const result = queryString.split('&').reduce((params: any, param: string) => {
-    const [key, value] = param.split('=');
+  const result = queryString.split('&').reduce(
+    (params: any, param: string) => {
+      const [key, value] = param.split('=');
 
-    if (!/^source|^campaign|^medium|^content|^term|^reference|^gclid|^adgroupid|^keyword/.test(key)) { return params; }
+      if (!/^source|^campaign|^medium|^content|^term|^reference|^gclid|^adgroupid|^keyword/.test(key)) { return params; }
 
-    params[key] = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : '';
+      params[key] = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : '';
 
-    return params;
-  }, {}); // eslint-disable-line indent,@typescript-eslint/indent
+      return params;
+    },
+    {}
+  ); // eslint-disable-line indent,@typescript-eslint/indent
 
   return result;
 }
@@ -517,4 +529,4 @@ export function setUtmParameters() {
   expiresDate.setDate(expiresDate.getDate() + 1);
 
   document.cookie = `marketing=${JSON.stringify(marketing)};expires=${expiresDate};domain=.${config.DOMAIN};path=/`;
-}
+}