@bytebrand/fe-ui-core 4.2.111 → 4.2.112

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.2.111",
+  "version": "4.2.112",
   "description": "UI components for the auto.de project",
   "main": "index.ts",
   "module": "dist/common.js",
@@ -14,7 +14,7 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.0",
     "@bytebrand/car-schema-selectors": "^2.0.7",
-    "@bytebrand/fe-histoslider": "^2.1.3",
+    "@bytebrand/fe-histoslider": "^2.1.5",
     "@bytebrand/i18n-dictionaries": "^0.7.5",
     "@date-io/date-fns": "1.3.13",
     "@emotion/react": "^11.9.3",
@@ -53,7 +53,7 @@
     "react": "^17.0.2",
     "react-device-detect": "^2.1.2",
     "react-dom": "^17.0.2",
-    "react-grid-system": "^5.0.2",
+    "react-grid-system": "^8.1.9",
     "react-i18next": "9.0.4",
     "react-lazyload": "3.2.0",
     "react-scroll": "^1.7.13",

package/source/components/OfferPanel/MuiOfferPeriod/MuiOfferPeriod.theme.tsx

@@ -22,4 +22,4 @@ export const theme = createTheme({
       }
     }
   }
-});
+});

package/source/components/OfferPanel/MuiOfferPeriod/MuiOfferPeriod.tsx

@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import _get from 'lodash/get';
 import styles from '../OfferPanel.styl';
 import { modalsTranslate } from '../../../locales/data';
-import ToggleButton, { ToggleButtonProps } from '@mui/material/ToggleButton';
+import ToggleButton, { ToggleButtonProps as IToggleButtonProps } from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import { ThemeProvider } from '@mui/material/styles';
 import { theme } from './MuiOfferPeriod.theme';
@@ -14,17 +14,17 @@ export interface IOfferPeriod {
   onChange: (key: string, value: number) => void;
 }
 
-type ToggleButtonVariant =
+type IToggleButtonVariant =
   | 'text'
   | 'outlined'
   | 'contained'
   | 'sidebar';
 
-interface CustomToggleButtonProps extends Omit<ToggleButtonProps, 'variant'> {
-  variant: ToggleButtonVariant;
+interface ICustomToggleButtonProps extends Omit<IToggleButtonProps, 'variant'> {
+  variant: IToggleButtonVariant;
 }
 
-const MyCustomToggleButton: FC<CustomToggleButtonProps> = (props) => {
+const MyCustomToggleButton: FC<ICustomToggleButtonProps> = (props) => {
   return (
     <ToggleButton {...props}>
       {props.children}

package/source/components/OfferPanel/OfferCheckboxGroup/CheckboxContainer.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import styles from './OfferCheckboxGroup.styl';
 import classnames from 'classnames';
-// import FormattedNumber from '../../FormattedNumber/FormattedNumber';
-// import Tooltip from '../../_common/Tooltip/Tooltip';
 import CheckboxMaterial from '../../_common/CheckboxMaterial/CheckboxMaterial';
 import MaterialTooltip from '../../_common/MaterialTooltip/MaterialTooltip';
 
@@ -22,7 +20,7 @@ export interface ICheckboxProps {
   containerClassName?: string;
   checkboxClassName?: string;
   labelClassName?: string;
-  labelPlacement?: "end" | "start" | "top" | "bottom";
+  labelPlacement?: 'end' | 'start' | 'top' | 'bottom';
   tooltipDescription?: string;
   checkboxPriceValue: any;
   tooltipPosX?: string;

package/source/components/PriceRatingDetailed/PriceRatingDetailed.tsx

@@ -158,7 +158,11 @@ class PriceRatingDetailed extends React.Component<IPriceRatingDetailedProps, IPr
     const MARGIN_OFFSET = price >= MIN_PRICE ? MIN_PRICE : (price / 2);
     const strings = {
       general: `${getFormattedPrice((marginToLeft ? price - MARGIN_OFFSET : min) as number)} – ${getFormattedPrice((marginToRight ? price + MARGIN_OFFSET : max) as number)}\u00A0€`,
-      compact: <>{getFormattedPrice((marginToLeft ? price - MARGIN_OFFSET : min) as number)}<br />{t(`${i18nPrefix}priceTo`)} {getFormattedPrice((marginToRight ? price + MARGIN_OFFSET : max) as number)} €</>
+      compact: <>
+          {getFormattedPrice((marginToLeft ? price - MARGIN_OFFSET : min) as number)}
+          <br />
+          {t(`${i18nPrefix}priceTo`)} {getFormattedPrice((marginToRight ? price + MARGIN_OFFSET : max) as number)} €
+        </>
     };
 
     return (

package/source/components/UserDashboardPage/sections/OrderStatusSection/AdditionalOrderInfo.tsx

@@ -5,7 +5,7 @@ import VehicleFormattedPrice from '../../../Vehicle/VehicleFormattedPrice/Vehicl
 import Button from '../../../_common/Button/Button';
 import classNames from 'classnames';
 
-import { TFunction } from '../../../../framework/types/types';
+import { ITFunction } from '../../../../framework/types/types';
 
 interface IAdditionalOrderData {
   addressData: ({ value: string; label: string; })[];
@@ -14,7 +14,7 @@ interface IAdditionalOrderData {
 }
 
 interface IAdditionalOrderInfo {
-  t: TFunction;
+  t: ITFunction;
   additionalOrderData: IAdditionalOrderData;
   redirectToUrl: (url: string) => void;
   buyingType: string;
@@ -29,8 +29,8 @@ const AdditionalOrderInfo = ({ t, additionalOrderData, redirectToUrl, buyingType
 
   const supportSectionClassnames = classNames(
     styles.customerSuport,
-    {[styles.supportSectionBorder]: addressData.length > 0}
-  )
+    { [styles.supportSectionBorder]: addressData.length > 0 }
+  );
 
   return (
     <div className={styles.container}>

package/source/components/UserDashboardPage/sections/OrderStatusSection/OrderStatusCar.tsx

@@ -5,7 +5,7 @@ import OrderStatusCard from './OrderStatusCard';
 import { getFormattedPrice } from '../../../../framework/utils/CommonUtils';
 
 // tslint:disable-next-line:interface-name
-interface TFunction {
+interface ITFunction {
   <T = string>(key: string, options?: object): T;
   <T = string>(keys: string[], options?: object): T;
 }
@@ -20,7 +20,7 @@ interface IOrderStatusCar {
   paybackPeriod?: number;
   monthlyInstallment?: number;
   status?: string;
-  t: TFunction;
+  t: ITFunction;
   request: string;
   registration: boolean;
   currentSalesPrice: number;

package/source/components/UserDashboardPage/sections/OrderStatusSection/OrderStatusSection.tsx

@@ -8,7 +8,7 @@ import { Skeleton } from '@mui/material';
 
 import { getFormattedPrice } from '../../../../framework/utils/CommonUtils';
 
-interface TFunction {
+interface ITFunction {
   <T = string>(key: string, options?: object): T;
   <T = string>(keys: string[], options?: object): T;
 }
@@ -16,7 +16,7 @@ interface TFunction {
 interface IOrderStatusSection {
   getSupportedImageFormat: (id: string, mainImageId: string, size: 'small' | 'medium' | 'large') => string;
   redirectToUrl: (url: string) => void;
-  t: TFunction;
+  t: ITFunction;
   isFetching: boolean;
   withAdditionalInfo?: boolean; // for using on /account/my-order.
   orderedCars: any[]; // TODO: create interface for orderedCars, when the object is formatted by the backend
@@ -25,7 +25,7 @@ interface IOrderStatusSection {
 const OrderStatusSection = ({
   getSupportedImageFormat,
   t,
-  redirectToUrl, 
+  redirectToUrl,
   orderedCars,
   isFetching,
   withAdditionalInfo = false
@@ -60,17 +60,18 @@ const OrderStatusSection = ({
           case 'deliveryCity':
             addressString = `${addressString} ${addressObj[key]}`;
             break;
+          default: addressString = `${addressString} ${addressObj[key]}`;
         }
-      })
+      });
     }
     return addressString;
   };
 
   const getDataPriceItem = (value: number, label: string): {value: string, label: string} | [] => {
     if (!!value && value !== 0) {
-      return { value: getFormattedPrice(value, '$,.2f', ' €'), label };
+      return { label, value: getFormattedPrice(value, '$,.2f', ' €') };
     }
-  }
+  };
 
   const renderRequestedCars = () => {
     return (
@@ -78,7 +79,7 @@ const OrderStatusSection = ({
         {!!orderedCars && orderedCars.map((orderedCar: any, index: number) => {
           const { car: { _id } } = orderedCar;
           const { car: { mainData: { make, model, subModel } } } = orderedCar;
-          const { car: { metaData: { mainImageId } }} = orderedCar;
+          const { car: { metaData: { mainImageId } } } = orderedCar;
           const {
             buyingType,
             selfPickup,
@@ -110,11 +111,11 @@ const OrderStatusSection = ({
               ...transportationCost ? [getDataPriceItem(transportationCost, t('MyOrderPage:delivery'))] : [],
               ...buyingType !== 'buy' ? [
                 ...monthlyInstallment ? [
-                  { 
+                  {
                     label: t(`MyOrderPage:${buyingType}Rate`),
                     value: t('MyOrderPage:monthlyInstallment', { monthlyInstallment: getFormattedPrice(monthlyInstallment, '$,.2f', '', '€') })
                   }] : [],
-                ...paybackPeriod ? [{ label: t('MyOrderPage:runningTime'), value: t('MyOrderPage:paybackPeriod', { paybackPeriod })}] : [],
+                ...paybackPeriod ? [{ label: t('MyOrderPage:runningTime'), value: t('MyOrderPage:paybackPeriod', { paybackPeriod }) }] : [],
                 ...deposit ? [getDataPriceItem(deposit, t('MyOrderPage:deposit'))] : []
               ] : []
             ],
@@ -168,7 +169,7 @@ const OrderStatusSection = ({
 
   return (
     <>
-      {isFetching ? 
+      {isFetching ?
         <div className={styles.skeletonBlock}>
           <Skeleton animation='wave' variant='rectangular' width='100%' />
         </div>

package/source/components/UserDashboardPage/sections/RequestedCarsSection/RequestedCarsSection.tsx

@@ -11,7 +11,7 @@ import { getFormattedPrice } from '../../../../framework/utils/CommonUtils';
 import Button from '../../../_common/Button/Button';
 
 // tslint:disable-next-line:interface-name
-interface TFunction {
+interface ITFunction {
   <T = string>(key: string, options?: object): T;
   <T = string>(keys: string[], options?: object): T;
 }
@@ -20,7 +20,7 @@ interface IRequestedCarsSection {
   redirectToCar: (id: string) => void;
   getSupportedImageFormat: (id: string, mainImageId: string, size: 'small' | 'medium' | 'large') => string;
   requestedCars: any[];
-  t: TFunction;
+  t: ITFunction;
   LinkRouter:any;
   // initHotjar:() => void;
 }

package/source/components/_common/Checkbox/FormCheckbox.tsx

@@ -21,7 +21,7 @@ interface IFormCheckboxState {
     checked?: boolean;
     error?: boolean;
     disabled?: boolean
-  }
+  };
 }
 
 class FormCheckbox extends React.Component<IFormCheckboxProps, IFormCheckboxState> {
@@ -68,11 +68,11 @@ class FormCheckbox extends React.Component<IFormCheckboxProps, IFormCheckboxStat
       checked,
       name,
       disabled,
-      onChange: this.handleChange,
-      error: customError,
       label,
       checkboxClassName,
-      labelClassName
+      labelClassName,
+      onChange: this.handleChange,
+      error: customError
     };
 
     return (

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

@@ -3,7 +3,6 @@ import useModal from '../../../framework/hooks/useModal';
 import { updateCookieList } from '../../../framework/utils/CommonUtils';
 import Modal from './Modal';
 
-
 export interface ICookieModal {
   handleSentryInit?: () => void;
 }
@@ -43,9 +42,8 @@ const CookieModal = ({ handleSentryInit }: ICookieModal) => {
     : <></>;
 };
 
-
 CookieModal.defaultProps = {
-  handleSentryInit: () => {},
+  handleSentryInit: () => {}
 };
 
 export default CookieModal;

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

@@ -4,11 +4,11 @@ import TestModal from './modals/TestModal';
 import PreviewCookieModal from './modals/PreviewCookieModal/PreviewCookieModal';
 import ManageCookieModal from './modals/ManageCookieModal/ManageCookieModal';
 
-interface ModalConfigProps { 
-  [key: string]: (props: any) => JSX.Element; 
+interface IModalConfigProps {
+  [key: string]: (props: any) => JSX.Element;
 }
 
-const ModalsConfig: ModalConfigProps = {
+const ModalsConfig: IModalConfigProps = {
   TEST_MODAL: (props: any) => {
     return <TestModal { ...props } />;
   },

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

@@ -23,11 +23,11 @@ const PreviewCookieModal = ({ toggleModal, setModal, handleSentryInit } : IPrevi
       <IconSVG name='autodeLogo' customDimensions />
       <div className={styles.modalTitle}>Nach den Cookies geht die Fahrt weiter.</div>
       <div className={styles.modalContent}>
-        Wenn Sie auf "Zustimmen" klicken, ermöglichen Sie uns über Cookies das Nutzerverhalten 
-        für alle User zu optimieren und Ihnen individuelle Empfehlungen auch auf Drittseiten anzuzeigen. 
-        Durch die Zustimmung erteilen Sie uns Ihre ausdrückliche Einwilligung. 
-        Über "Anpassen" können Sie Ihre Einwilligungen individuell anpassen. 
-        Dies ist auch später jederzeit im Bereich "Cookie-Richtlinie" möglich. 
+        Wenn Sie auf "Zustimmen" klicken, ermöglichen Sie uns über Cookies das Nutzerverhalten
+        für alle User zu optimieren und Ihnen individuelle Empfehlungen auch auf Drittseiten anzuzeigen.
+        Durch die Zustimmung erteilen Sie uns Ihre ausdrückliche Einwilligung.
+        Über "Anpassen" können Sie Ihre Einwilligungen individuell anpassen.
+        Dies ist auch später jederzeit im Bereich "Cookie-Richtlinie" möglich.
         Die relevante Datenschutzerklärung finden Sie&nbsp;
         <a href={`${environment}/datenschutz/`} target='_blank' style={{ textDecoration: 'underline', color: 'rgba(76,78,100,0.87)' }}>hier</a>.
         <a href={`${environment}/impressum/`} target='_blank' className={styles.outlinedBtnLeft}>Impressum</a>

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

@@ -24,7 +24,7 @@ const ListItem = ({ icon, label, amount, divider, onClick, href, isComponent, Li
   const onMenuItemClick = (e: React.MouseEvent<HTMLLIElement>) => {
     onClick(e);
     handleClose();
-  }
+  };
 
   return !!href ? (
     <Link color='#4C4E64DE' variant='caption' to={href} underline='none' onClick={onClick}>

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

@@ -423,5 +423,5 @@ export default React.memo(FiltersContainer, (props, nextProps) => {
   return t        === nextProps.t &&
   location.search === nextProps.location.search &&
   isEqual(aggregation, nextProps.aggregation) &&
-  isEqual(filters.MMS_GROUPS, nextProps.filters.MMS_GROUPS)
-});
+  isEqual(filters.MMS_GROUPS, nextProps.filters.MMS_GROUPS);
+});

package/source/framework/types/types.ts

@@ -343,7 +343,7 @@ export interface IVehicleCompareProps {
   onRemoveClick: () => void;
 }
 
-export interface TFunction {
+export interface ITFunction {
   <T = string>(key: string, options?: object): T;
   <T = string>(keys: string[], options?: object): T;
-}
+}

package/source/framework/utils/CommonUtils.ts

@@ -567,12 +567,17 @@ export const updateCookieList = (handleSentryInit: () => void) => {
         cookieConsentList = cookieConsentList.filter(i => i !== cookie);  // deny google cookie consent for _gcl_au, _ga, _gid, _gat_UA-31842-13, etc
 
         isHomeGoogleGranted = false;
+      } else if (cookie === 'hotjar') {
+        isHotjarGranted = false;
+      } else if (cookie === '_uetvid' || cookie === '_uetsid') {
+        isMicrosoftGranted = false;
+      } else if (cookie === '_clck' || cookie === '_clsk') {
+        isMicrosoftClarity = false;
+      } else if (cookie === '_fbp') {
+        isFacebookGranted = false;
+      } else if (cookie === 'sentry') {
+        isSentryGranted = false;
       }
-      else if (cookie === 'hotjar') isHotjarGranted = false;
-      else if (cookie === '_uetvid' || cookie === '_uetsid') isMicrosoftGranted = false;
-      else if (cookie === '_clck' || cookie === '_clsk') isMicrosoftClarity = false;
-      else if (cookie === '_fbp') isFacebookGranted = false;
-      else if (cookie === 'sentry') isSentryGranted = false;
     });
   });
 

package/source/framework/utils/DateUtils.ts

@@ -11,7 +11,7 @@ export const timestampToDate = (timestamp: number) => {
   const date = new Date(timestamp * 1000);
   const year = date.getFullYear();
   const month = date.getMonth() + 1;
-  const monthFormatted = month < 10 ? '0' + month : month;
+  const monthFormatted = month < 10 ? `0${month}` : month;
   return (`${monthFormatted}/${year}`);
 };
 

package/tslint.json

@@ -13,7 +13,7 @@
     "match-default-export-name": false,
     "import-name": false,
     "no-boolean-literal-compare": false,
-    "max-line-length": [true, 200],
+    "max-line-length": [false],
     "semicolon": [true, "always", "ignore-bound-class-methods"],
     "variable-name": [true, "allow-pascal-case", "allow-leading-underscore", "allow-trailing-underscore"],
     "trailing-comma": [true, {"multiline": "never", "singleline": "never"}],
@@ -32,7 +32,6 @@
     "interface-name": [true, "always-prefix"],
     "class-name": true,
     "prefer-function-over-method": false,
-    "prefer-switch": [true, {"min-cases": 2}],
     "switch-final-break": true
   },
   "rulesDirectory": []