@bytebrand/fe-ui-core 4.2.251 → 4.3.0

package/__tests__/utils/CommonUtils/getOfferSliders.test.ts

@@ -10,8 +10,7 @@ const expectedResultCDP = [
     max: 21666,
     value: 16100,
     unitName: 'modals:financing.euro',
-    caption: 'modals:financing.firstInstallment',
-    withRangeLimit: true
+    caption: 'modals:financing.firstInstallment'
   },
   {
     name: 'annualMileage',
@@ -34,8 +33,7 @@ const expectedResultCheckout = [
     max: 21666,
     value: 16100,
     unitName: 'modals:financing.euro',
-    caption: 'modals:financing.firstInstallment',
-    withRangeLimit: true
+    caption: 'modals:financing.firstInstallment'
   }
 ]
 

package/common.ts

@@ -136,9 +136,7 @@ import {
   StepButton,
   Accordion as MIAccordion,
   AccordionSummary,
-  AccordionDetails,
-  ListItemButton,
-  RadioGroup as MUIRadioGroup
+  AccordionDetails
 } from '@mui/material';
 import { createTheme } from '@mui/material/styles';
 
@@ -158,7 +156,5 @@ export {
   MIAccordion,
   AccordionSummary,
   AccordionDetails,
-  StyledComponent,
-  ListItemButton,
-  MUIRadioGroup
+  StyledComponent
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.2.251",
+  "version": "4.3.0",
   "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.6",
+    "@bytebrand/fe-histoslider": "^2.1.3",
     "@bytebrand/i18n-dictionaries": "^0.7.5",
     "@date-io/date-fns": "1.3.13",
     "@emotion/react": "^11.9.3",
@@ -82,7 +82,6 @@
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.2",
     "@types/react-lazyload": "^2.5.0",
-    "@types/react-scroll": "^1.8.7",
     "@types/react-select": "^3.0.2",
     "@types/react-slick": "^0.23.4 ",
     "autoprefixer": "^9.6.0",

package/source/components/AccordionWidget/AccordionWidget.tsx

@@ -15,6 +15,7 @@ import {
 
 import ExpansionPanel from '../_common/ExpansionPanel/ExpansionPanel';
 import Accordion from '../_common/AccordionWrapper/AccordionWrapper';
+// import AccordionItem from '../_common/AccordionWrapper/AccordionItem/AccordionItem';
 import VehicleProperty from '../VehicleSmallCard/VehicleData/VehicleProperty/VehicleProperty';
 import IconSVG from '../_common/IconSVG/IconSVG';
 import { getActualHighlights } from '../../framework/constants/highlights';
@@ -34,7 +35,7 @@ class AccordionWidget extends React.Component<IAccardionSectionProps, IAccardion
   }
 
   handleChange =
-      (panel: string) => (_: React.SyntheticEvent, isExpanded: boolean) => {
+      (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
         this.setState({ expanded: isExpanded ? panel : false });
       };
 
@@ -209,6 +210,7 @@ class AccordionWidget extends React.Component<IAccardionSectionProps, IAccardion
                 onChange={this.handleChange}
                 expanded={this.state.expanded}
                 defaultExpanded={section.expanded}
+                // titleClassName={styles.titleClassName}
               >
                 {section.component}
               </ExpansionPanel>

package/source/components/Breadcrumbs/Breadcrumbs.tsx

@@ -12,7 +12,6 @@ type LinkItem = { link: string, title: string };
 interface IBreadcrumbsProps {
   page: string;
   pageProps: any;
-  Link: any;
   infoBlockData: { contentMobile: string, title: string }[];
   t?: (key: string, options?: object) => string;
 }
@@ -33,7 +32,7 @@ class Breadcrumbs extends React.PureComponent<IBreadcrumbsProps> {
   };
 
   renderList = (list: LinkItem[]) => {
-    const {t = (phrase: string) => _get(breadcrumbsTranslate(), phrase.replace(':', '.'), phrase), page, Link } = this.props;
+    const { t = (phrase: string) => _get(breadcrumbsTranslate(), phrase.replace(':', '.'), phrase), page } = this.props;
 
     return list.map((item, index): React.ReactElement<any> => {
       const isLastItem: boolean = list.length - 1 === index;
@@ -44,7 +43,7 @@ class Breadcrumbs extends React.PureComponent<IBreadcrumbsProps> {
 
       return item.link
         ? <span className={linkClassName} onClick={this.props.pageProps.onBreadCrumbClick} key={index}>
-            <Link to={page !== 'REFERENCE_VEHICLE_DETAILS' && item.link}>{item.title}</Link>
+            <a href={page !== 'REFERENCE_VEHICLE_DETAILS' && item.link}>{item.title}</a>
           </span>
         : <span className={textClassName} key={index}>
             {bigItem}
@@ -91,3 +90,4 @@ class Breadcrumbs extends React.PureComponent<IBreadcrumbsProps> {
 }
 
 export default Breadcrumbs;
+// export default withRouter(translate(['common'])(Breadcrumbs));

package/source/components/Checkout/CheckoutStepper/CheckoutStepper.styl

@@ -30,5 +30,193 @@
 [class*='MuiPickersToolbar-toolbar']
 	background-color: #005CCB !important;
 
-[class*='MuiStepIcon-root'][class*='Mui-active']
-	color: #005CCB !important;
+
+// @import '../../../theme/mixins.styl'
+
+// .root
+// 	& [class*='MuiStepLabel-label'][class*='MuiStepLabel-alternativeLabel']
+// 		fontSize: 10
+// 		maxWidth: 56
+
+// 	& [class*='MuiStepLabel-label'][class*='MuiStepLabel-active']
+// 		fontWeight: bold
+
+// 	& [class*='MuiSvgIcon-root']
+// 		width: 24
+// 		height: 24
+
+// 	& [class*='MuiStepConnector-line']
+// 		borderWidth: 2px
+	
+// 	& [class*='MuiStepConnector-vertical']
+// 		marginLeft: 50,
+// 		padding: 12px 0 16px
+
+// .active
+//   @media (min-width: 992px):
+// 		backgroundColor: rgba(0, 92, 203, 0.08)
+
+// 	& [class*='MuiStepIcon-text']
+//     fill: white !important
+
+// 	& [class*='MuiStepIcon-active']
+// 		color: #005CCB
+// 		fontWeight: bold
+// 	& [class*='MuiStepConnector-line']
+// 		borderColor: #005CCB
+// 		borderTopWidth: 2px
+
+// .isCompleted
+// 	& [class*='MuiStep-vertical'] + [class*='MuiStepConnector-vertical']
+//     & [class*='MuiStepConnector-line']
+// 			borderColor: #005CCB
+
+// .stepper
+//   & [class*='MuiStepper-root']
+// 		padding: 0
+// 		// overflow: 'scroll'
+
+// .labelWrap
+//   & [class*='MuiStepLabel-label']
+// 		marginTop: 7
+// 		lineHeight: 11px
+
+// .verticalWrap
+// 	padding: 14px 0 14px 26px
+// 	borderRadius: 0px 38px 38px 0px
+// 	boxSizing: border-box
+
+// 	& [class*='MuiStepLabel-iconContainer']
+// 		paddingRight: 17
+
+// 	& [class*='MuiSvgIcon-root']
+// 		width: 48
+// 		height: 48
+
+// 	& [class*='MuiStepLabel-label']
+// 		color: rgba(0, 0, 0, 0.83)
+// 		fontWeight: bold
+// 		fontSize: 22
+
+// .default
+// 	& [class*='MuiStepIcon-text']
+// 		fill: grey
+
+// 	& [class*='MuiStepIcon-root']
+// 		color: transparent
+// 		border: 1px solid grey
+// 		boxSizing: border-box
+// 		borderRadius: 50%
+
+// 	& [class*='MuiStepLabel-label']
+// 		color: rgba(0, 0, 0, 0.38)
+// 		fontWeight: 400
+
+// .completeStep
+// 	color: #005CCB
+// 	& [class*='MuiStepIcon-root']
+// 		borderColor: #005CCB
+// 		borderWidth: 2px
+
+// 	& [class*='MuiStepIcon-text']
+// 		fill: #005CCB
+// 		fontWeight: bold
+		
+// 	& [class*='MuiStepLabel-label'][class*='MuiStepLabel-alternativeLabel']
+// 		color: #005CCB
+
+//   & [class*='MuiStepLabel-label']
+// 		color: #005CCB
+
+//   & [class*='MuiStepConnector-lineVertical']
+// 		borderColor: #005CCB
+
+// .completeLine
+//   & [class*='MuiStepConnector-line']
+// 		borderColor: #005CCB
+// 		borderTopWidth: 2px
+
+// 	& [class*='MuiStepConnector-line'][class*='MuiStepConnector-lineVertical']
+// 		borderColor: #005CCB
+
+// .activeLine
+// 	& [class*='MuiStepConnector-line']
+// 		borderColor: #005CCB
+// 		borderTopWidth: 2px
+
+// .minutes
+// 	fontSize: 14
+// 	color: rgba(0, 0, 0, 0.63)
+// 	display: block
+// 	textAlign: left
+// 	fontWeight: 400
+
+// .buttonItem
+// 	margin: 0
+// 	padding: 0
+
+// // .checkoutFooter:
+// // 	display: 'block'
+// // 	width: '100%'
+// // 	textAlign: 'center'
+// // 	background: '#f2f2f2'
+// // 	color: '#757575'
+// // 	fontSize: '7px'
+
+// // .checkoutFooterItem:
+// // 	margin: '0 4px'
+
+// // .buttonWeiter
+// // 	width: '328px'
+// // 	margin: '16px auto'
+// // 	display: 'block'
+// // 	height: '44px'
+// // 	textTransform: 'none'
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// .stepperWrapper
+// 	width: 100%
+// 	overflow: hidden
+
+// +media-tablet-landscape-up()
+// 	.stepperWrapper
+// 		box-sizing: border-box
+// 		background-color: #fff
+// 		width: 376px
+// 		box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.15);
+// 		position fixed
+// 		z-index: 1;
+// 		padding: 35px 8px 35px
+// 		height: 100%
+
+// 	.menuArrow
+// 		position: absolute;
+// 		right: 0;
+// 		top: 50%;
+// 		max-width: 17px;
+// 		transform: rotate(-90deg) translateY(-50%);
+// 		transform-origin: 0 center;
+// 		path
+// 			fill: rgba(0, 0, 0, 0.38);
+
+
+
+// [class*='MuiPickersToolbar-toolbar']
+// 	background-color: #005CCB !important;

package/source/components/Checkout/CheckoutStepper/CheckoutStepper.tsx

@@ -4,16 +4,17 @@ import { useStyles } from './CheckoutStepperClasses';
 import styles from './CheckoutStepper.styl';
 import { Hidden } from 'react-grid-system';
 import { Stepper, Step, StepButton, IconSVG } from '../../../../common';
-import { toJS } from 'mobx';
 
 interface ICheckoutStepper {
-  checkoutStore: any;
+  steps: [];
+  activeStep?: number;
+  handleStep?: (index: number) => () => void;
+  completed?: any;
   t?: (phrase: string) => {};
 }
 
-const CheckoutStepper: FunctionComponent<ICheckoutStepper> = ({ checkoutStore, t }) => {
+const CheckoutStepper: FunctionComponent<ICheckoutStepper> = ({ steps, activeStep, completed, handleStep, t }) => {
   const classes = useStyles();
-  const steps = toJS(checkoutStore.steps);
   return (
     <div className={`${classes.root} ${styles.stepperWrapper}`}>
       <Stepper
@@ -21,34 +22,34 @@ const CheckoutStepper: FunctionComponent<ICheckoutStepper> = ({ checkoutStore, t
         nonLinear
         orientation={isMobileOnly ? 'horizontal' : 'vertical'}
         alternativeLabel={isMobileOnly}
-        activeStep={checkoutStore.activeStep}>
+        activeStep={activeStep}>
         {steps.map(({ title, pathname }, index) => {
           const labelRep = !!title && !isMobileOnly ? title.replace('-', '') : title;
           return (
             <Step key={pathname}
-              className={`${checkoutStore.completed.has(steps[index].pathname) ? classes.isCompleted : ''}
-              ${checkoutStore.completed.has(steps[index].pathname) ? classes.completeLine : ''}
-              ${checkoutStore.activeStep === index && classes.activeLine}
+              className={`${completed.has(steps[index].pathname) ? classes.isCompleted : ''}
+              ${completed.has(steps[index].pathname) ? classes.completeLine : ''}
+              ${activeStep === index && classes.activeLine}
               `}
-            >
+              >
               <StepButton
-                onClick={checkoutStore.handleStep(index)}
+                onClick={handleStep(index)}
                 classes={{
                   root: classes.buttonItem,
                   horizontal: classes.labelWrap,
                   vertical: classes.verticalWrap
                 }}
                 className={`
-                  ${checkoutStore.activeStep === index ? classes.active : classes.default}
-                  ${checkoutStore.completed.has(steps[index].pathname) && checkoutStore.activeStep !== index && classes.completeStep}`}>
+                  ${activeStep === index ? classes.active : classes.default}
+                  ${completed.has(steps[index].pathname) && activeStep !== index && classes.completeStep}`}>
                 <span>{labelRep}</span>
                 <Hidden xs sm md>
-                  {checkoutStore.activeStep !== index && <IconSVG name='menuArrow' className={styles.menuArrow} customDimensions={false} />}
-                  {!checkoutStore.completed.has(steps[index].pathname) &&
+                  {activeStep !== index && <IconSVG name='menuArrow' className={styles.menuArrow} customDimensions={false}/>}
+                  {!completed.has(steps[index].pathname) &&
                     <span
                       className={`
                         ${classes.minutes}
-                        ${checkoutStore.completed.has(steps[index].pathname) && checkoutStore.activeStep !== index && classes.completeStep}`}
+                        ${completed.has(steps[index].pathname) && activeStep !== index && classes.completeStep}`}
                     >
                       {steps[index].minutes}
                       &nbsp;

package/source/components/Checkout/OrderOverviewItem/OrderOverviewItem.styl

@@ -2,7 +2,7 @@
 
 .editableFieldWrapper
   font-family: $font-style-arial
-  margin-top: 10px
+  margin-top: 16px
 
 .header 
   display: flex
@@ -12,7 +12,7 @@
 .field
   display: flex
   justify-content: space-between
-  margin-top: 10px
+  margin-top: 16px
   color: $black60
   font-size: 14px
 

package/source/components/Checkout/OrderOverviewItem/OrderOverviewItem.tsx

@@ -15,18 +15,18 @@ interface IOrderOverviewItem {
     rate?: string;
   };
   activeStep: number;
-  dontShowEdit?:boolean;
   handleStep: (index: number) => () => void;
   titleClassName?: string;
   fieldClassName?: string;
   fieldWrapperClassName?: string;
 }
 
-const OrderOverviewItem: FC<IOrderOverviewItem> = ({ dontShowEdit, fields, handleStep, activeStep, titleClassName, fieldClassName, fieldWrapperClassName }) => {
+const OrderOverviewItem: FC<IOrderOverviewItem> = ({ fields, handleStep, activeStep, titleClassName, fieldClassName, fieldWrapperClassName }) => {
   const wrapperClasses = classnames(
     styles.editableFieldWrapper,
     { [fieldWrapperClassName]: fieldWrapperClassName }
   );
+
   return (
     <div className={wrapperClasses}>
       <div>
@@ -34,7 +34,7 @@ const OrderOverviewItem: FC<IOrderOverviewItem> = ({ dontShowEdit, fields, handl
         <span className={titleClassName}>{fields.title} {fields.additionalTitle && <span className={styles.additionalTitle}>{fields.additionalTitle}</span>}</span>
         <span className={styles.fieldLineWrapper} data-testid='editIcon' onClick={() => handleStep(activeStep)()}>
           {fields.oneLineRate && <span className={classnames(styles.fieldLine, fieldClassName)}>{fields.oneLineRate}</span>}
-          {!dontShowEdit &&!fieldWrapperClassName && <span className={styles.editIcon}><IconSVG name='editIcon'/></span >}
+          {!fieldWrapperClassName && <span className={styles.editIcon}><IconSVG name='editIcon'/></span >}
         </span>
       </div>
       {fields.content && fields.content.map((fields, index) => (

package/source/components/FormattedNumber/FormattedNumber.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import styles from './FormattedNumber.styl';
 
 import classnames from 'classnames';
@@ -16,10 +16,11 @@ export interface IFormattedPriceProps {
 
 // const breakpointForRound = 10000;
 const separatorCounter = 3;
+
 const FormattedNumber: React.FunctionComponent<IFormattedPriceProps> = ({ className, value, disableFormatting, toRound, numbersAfterDot, beforeCommaClassName, afterCommaClassName }) => {
+
   function getFormattedNumber() {
     // First we need to check if value is actual number;
-
     const notFalsieValue = !!value ? value : 0;
 
     const rounded = toRound ? Math.round(notFalsieValue) : notFalsieValue;

package/source/components/InfoBlocks/FirstInfoBlock/FirstInfoBlockItem/FirstInfoBlockItem.styl

@@ -22,7 +22,7 @@
     align-items: center;
     width: 100%;
     grid-template-columns: 1fr 82px;
-    grid-column-gap: 9px;
+    grid-column-gap: 44px;
     padding: 17px 0
 
     & + &
@@ -33,7 +33,7 @@
   align-items: center;
 
 .icon
-  margin-right: 0
+  margin-right: 22px
   width: 64px
   height: 64px
   display block;
@@ -42,16 +42,18 @@
   +media-phone-only()
     width: 82px
     height: 82px
+    margin-right: 0
     grid-column: 2;
     grid-row: 1 / span 3;
 
 .title
-  font-size: 16px;
+  font-size: 18px
   margin-bottom: 5px
   color: $grey-3a;
   +media-phone-only()
+    font-size: 16px;
     grid-row: 1 / span 1;
-    text-align: start;
+    text-align: justify;
     color: $grey-32;
 
 .textContent

package/source/components/OfferDetailedSection/partials/PanelConfig.tsx

@@ -23,6 +23,8 @@ const PanelConfig: React.FunctionComponent<IPanelConfigProps> = ({
   OfferBlockComponent,
   offerBlockProps,
   postfix,
+  isOpenDetails,
+  onToggleDetailsClick,
   isAlternative
 }) => {
   const requestOfferProps = {
@@ -51,6 +53,7 @@ const PanelConfig: React.FunctionComponent<IPanelConfigProps> = ({
       ] : [];
 
     const wrapperClassName = classnames(styles.wrapConfigDetails, { [styles.wrapConfigDetailsMobile]: mobileMode });
+
     return (
       <div className={wrapperClassName}>
         <Hidden xs sm md>

package/source/components/OfferPanel/MuiOfferPeriod/{MuiOfferPeriod.theme.tsx → MuiOfferPeriod.theme.js}

@@ -3,9 +3,11 @@ import { createTheme } from '@mui/material/styles';
 export const theme = createTheme({
   components: {
     MuiToggleButton: {
-      styleOverrides: {
-        root: ({ ownerState: { variant } }) => ({
-          ...(variant === 'sidebar' && {
+      variants: [
+        {
+          props: { variant: 'sidebar' },
+          style: {
+            width: 40,
             height: 41,
             color: '#333',
             width: '100%',
@@ -16,10 +18,13 @@ export const theme = createTheme({
             '&.Mui-selected:hover': {
               backgroundColor: '#005ccb',
               color: '#fff'
-            }
-          })
-        })
-      }
+            },
+            // '&:hover': {
+            //   backgroundColor: 'transparent'
+            // }
+          }
+        }
+      ]
     }
   }
-});
+});

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 as IToggleButtonProps } from '@mui/material/ToggleButton';
+import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import { ThemeProvider } from '@mui/material/styles';
 import { theme } from './MuiOfferPeriod.theme';
@@ -14,24 +14,6 @@ export interface IOfferPeriod {
   onChange: (key: string, value: number) => void;
 }
 
-type IToggleButtonVariant =
-  | 'text'
-  | 'outlined'
-  | 'contained'
-  | 'sidebar';
-
-interface ICustomToggleButtonProps extends Omit<IToggleButtonProps, 'variant'> {
-  variant: IToggleButtonVariant;
-}
-
-const MyCustomToggleButton: FC<ICustomToggleButtonProps> = (props) => {
-  return (
-    <ToggleButton {...props}>
-      {props.children}
-    </ToggleButton>
-  );
-};
-
 const OfferPeriod: FC<IOfferPeriod> = ({ paybackPeriod, periods, t, onChange }) => {
 
   return (
@@ -45,19 +27,13 @@ const OfferPeriod: FC<IOfferPeriod> = ({ paybackPeriod, periods, t, onChange })
           color='primary'
           value={paybackPeriod}
           exclusive
-          onChange={(event) => {
-            onChange('paybackPeriod', +(event.target as HTMLInputElement).value);
+          onChange={(e) => {
+            onChange('paybackPeriod', +e.target.value);
           }}
         >
           {periods.map((period) => {
             return (
-              <MyCustomToggleButton
-                variant={'sidebar'}
-                key={period}
-                value={period}
-              >
-                {period}
-              </MyCustomToggleButton>
+              <ToggleButton variant='sidebar' key={period} value={period}>{period}</ToggleButton>
             );
           })}
         </ToggleButtonGroup>

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

@@ -1,6 +1,8 @@
-import React from 'react';
+import React, { ReactNode } 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';
 
@@ -20,13 +22,11 @@ export interface ICheckboxProps {
   containerClassName?: string;
   checkboxClassName?: string;
   labelClassName?: string;
-  labelPlacement?: 'end' | 'start' | 'top' | 'bottom';
   tooltipDescription?: string;
   checkboxPriceValue: any;
   tooltipPosX?: string;
   error?: boolean;
-  description?: string;
-  label?: JSX.Element | string | null;
+  label?: JSX.Element | string | null | ReactNode;
 }
 
 class CheckboxContainer extends React.Component<ICheckboxProps, {}> {
@@ -87,8 +87,8 @@ class CheckboxContainer extends React.Component<ICheckboxProps, {}> {
 
   render() {
     const {
-      containerClassName, labelClassName, reversed,
-      checked, disabled, error, label, tooltipDescription, labelPlacement,
+      containerClassName, checkboxClassName, labelClassName, reversed,
+      checked, disabled, value, error, label, tooltipDescription, checkboxPriceValue, tooltipPosX, labelPlacement,
       description
     } = this.props;
 
@@ -105,6 +105,12 @@ class CheckboxContainer extends React.Component<ICheckboxProps, {}> {
       labelClassName
     );
 
+    const checkboxClasses = classnames(
+      styles.checkbox,
+      checkboxClassName,
+      { [styles.withLabel]: !!label }
+    );
+
     const wrapInputClasses = classnames(
       styles.wrapInput,
       { [styles.reversed]: reversed }

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

@@ -11,7 +11,7 @@ interface IOfferPeriod {
   transferInstallments?: any;
 }
 
-const OfferCheckboxGroup: FC<IOfferPeriod> = ({ additionalService, transferInstallments, isAboAccordionExpanded0 = true, priceTabIndex }) => {
+const OfferCheckboxGroup: FC<IOfferPeriod> = ({ additionalService, transferInstallments, isAboAccordionExpanded0 = true, priceTabIndex, labelClassname }) => {
   const offerGroupClass = classNames(styles.checkboxWrapped, { [styles.checkBoxGroup]: priceTabIndex !== THREE });
   return (
     <div className={offerGroupClass}>

package/source/components/OfferPanel/OfferPanel.tsx

@@ -11,7 +11,7 @@ import CheckboxMaterial from '../_common/CheckboxMaterial/CheckboxMaterial';
 interface IFinalAdvice {
   checked: boolean;
   label: string;
-  onChange?: (event?: React.ChangeEvent<HTMLInputElement>, checked?: boolean | string,  value?: any) => void;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean, value: any) => void;
   reversed?: boolean;
   value: string;
 }