@bytebrand/fe-ui-core 4.3.0 → 4.4.0

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

@@ -30,193 +30,5 @@
 [class*='MuiPickersToolbar-toolbar']
 	background-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;
+[class*='MuiStepIcon-root'][class*='Mui-active']
+	color: #005CCB !important;

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

@@ -4,17 +4,16 @@ 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 {
-  steps: [];
-  activeStep?: number;
-  handleStep?: (index: number) => () => void;
-  completed?: any;
+  checkoutStore: any;
   t?: (phrase: string) => {};
 }
 
-const CheckoutStepper: FunctionComponent<ICheckoutStepper> = ({ steps, activeStep, completed, handleStep, t }) => {
+const CheckoutStepper: FunctionComponent<ICheckoutStepper> = ({ checkoutStore, t }) => {
   const classes = useStyles();
+  const steps = toJS(checkoutStore.steps);
   return (
     <div className={`${classes.root} ${styles.stepperWrapper}`}>
       <Stepper
@@ -22,34 +21,34 @@ const CheckoutStepper: FunctionComponent<ICheckoutStepper> = ({ steps, activeSte
         nonLinear
         orientation={isMobileOnly ? 'horizontal' : 'vertical'}
         alternativeLabel={isMobileOnly}
-        activeStep={activeStep}>
+        activeStep={checkoutStore.activeStep}>
         {steps.map(({ title, pathname }, index) => {
           const labelRep = !!title && !isMobileOnly ? title.replace('-', '') : title;
           return (
             <Step key={pathname}
-              className={`${completed.has(steps[index].pathname) ? classes.isCompleted : ''}
-              ${completed.has(steps[index].pathname) ? classes.completeLine : ''}
-              ${activeStep === index && classes.activeLine}
+              className={`${checkoutStore.completed.has(steps[index].pathname) ? classes.isCompleted : ''}
+              ${checkoutStore.completed.has(steps[index].pathname) ? classes.completeLine : ''}
+              ${checkoutStore.activeStep === index && classes.activeLine}
               `}
-              >
+            >
               <StepButton
-                onClick={handleStep(index)}
+                onClick={checkoutStore.handleStep(index)}
                 classes={{
                   root: classes.buttonItem,
                   horizontal: classes.labelWrap,
                   vertical: classes.verticalWrap
                 }}
                 className={`
-                  ${activeStep === index ? classes.active : classes.default}
-                  ${completed.has(steps[index].pathname) && activeStep !== index && classes.completeStep}`}>
+                  ${checkoutStore.activeStep === index ? classes.active : classes.default}
+                  ${checkoutStore.completed.has(steps[index].pathname) && checkoutStore.activeStep !== index && classes.completeStep}`}>
                 <span>{labelRep}</span>
                 <Hidden xs sm md>
-                  {activeStep !== index && <IconSVG name='menuArrow' className={styles.menuArrow} customDimensions={false}/>}
-                  {!completed.has(steps[index].pathname) &&
+                  {checkoutStore.activeStep !== index && <IconSVG name='menuArrow' className={styles.menuArrow} customDimensions={false} />}
+                  {!checkoutStore.completed.has(steps[index].pathname) &&
                     <span
                       className={`
                         ${classes.minutes}
-                        ${completed.has(steps[index].pathname) && activeStep !== index && classes.completeStep}`}
+                        ${checkoutStore.completed.has(steps[index].pathname) && checkoutStore.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: 16px
+  margin-top: 10px
 
 .header 
   display: flex
@@ -12,7 +12,7 @@
 .field
   display: flex
   justify-content: space-between
-  margin-top: 16px
+  margin-top: 10px
   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> = ({ fields, handleStep, activeStep, titleClassName, fieldClassName, fieldWrapperClassName }) => {
+const OrderOverviewItem: FC<IOrderOverviewItem> = ({ dontShowEdit, 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> = ({ fields, handleStep, activeS
         <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>}
-          {!fieldWrapperClassName && <span className={styles.editIcon}><IconSVG name='editIcon'/></span >}
+          {!dontShowEdit &&!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 * as React from 'react';
+import React from 'react';
 import styles from './FormattedNumber.styl';
 
 import classnames from 'classnames';
@@ -16,11 +16,10 @@ 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: 44px;
+    grid-column-gap: 9px;
     padding: 17px 0
 
     & + &
@@ -33,7 +33,7 @@
   align-items: center;
 
 .icon
-  margin-right: 22px
+  margin-right: 0
   width: 64px
   height: 64px
   display block;
@@ -42,18 +42,16 @@
   +media-phone-only()
     width: 82px
     height: 82px
-    margin-right: 0
     grid-column: 2;
     grid-row: 1 / span 3;
 
 .title
-  font-size: 18px
+  font-size: 16px;
   margin-bottom: 5px
   color: $grey-3a;
   +media-phone-only()
-    font-size: 16px;
     grid-row: 1 / span 1;
-    text-align: justify;
+    text-align: start;
     color: $grey-32;
 
 .textContent

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

@@ -23,8 +23,6 @@ const PanelConfig: React.FunctionComponent<IPanelConfigProps> = ({
   OfferBlockComponent,
   offerBlockProps,
   postfix,
-  isOpenDetails,
-  onToggleDetailsClick,
   isAlternative
 }) => {
   const requestOfferProps = {
@@ -53,7 +51,6 @@ 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.js → MuiOfferPeriod.theme.tsx}

@@ -3,11 +3,9 @@ import { createTheme } from '@mui/material/styles';
 export const theme = createTheme({
   components: {
     MuiToggleButton: {
-      variants: [
-        {
-          props: { variant: 'sidebar' },
-          style: {
-            width: 40,
+      styleOverrides: {
+        root: ({ ownerState: { variant } }) => ({
+          ...(variant === 'sidebar' && {
             height: 41,
             color: '#333',
             width: '100%',
@@ -18,13 +16,10 @@ 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 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,6 +14,24 @@ 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 (
@@ -27,13 +45,19 @@ const OfferPeriod: FC<IOfferPeriod> = ({ paybackPeriod, periods, t, onChange })
           color='primary'
           value={paybackPeriod}
           exclusive
-          onChange={(e) => {
-            onChange('paybackPeriod', +e.target.value);
+          onChange={(event) => {
+            onChange('paybackPeriod', +(event.target as HTMLInputElement).value);
           }}
         >
           {periods.map((period) => {
             return (
-              <ToggleButton variant='sidebar' key={period} value={period}>{period}</ToggleButton>
+              <MyCustomToggleButton
+                variant={'sidebar'}
+                key={period}
+                value={period}
+              >
+                {period}
+              </MyCustomToggleButton>
             );
           })}
         </ToggleButtonGroup>

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

@@ -1,8 +1,6 @@
-import React, { ReactNode } from 'react';
+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,11 +20,13 @@ export interface ICheckboxProps {
   containerClassName?: string;
   checkboxClassName?: string;
   labelClassName?: string;
+  labelPlacement?: 'end' | 'start' | 'top' | 'bottom';
   tooltipDescription?: string;
   checkboxPriceValue: any;
   tooltipPosX?: string;
   error?: boolean;
-  label?: JSX.Element | string | null | ReactNode;
+  description?: string;
+  label?: JSX.Element | string | null;
 }
 
 class CheckboxContainer extends React.Component<ICheckboxProps, {}> {
@@ -87,8 +87,8 @@ class CheckboxContainer extends React.Component<ICheckboxProps, {}> {
 
   render() {
     const {
-      containerClassName, checkboxClassName, labelClassName, reversed,
-      checked, disabled, value, error, label, tooltipDescription, checkboxPriceValue, tooltipPosX, labelPlacement,
+      containerClassName, labelClassName, reversed,
+      checked, disabled, error, label, tooltipDescription, labelPlacement,
       description
     } = this.props;
 
@@ -105,12 +105,6 @@ 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, labelClassname }) => {
+const OfferCheckboxGroup: FC<IOfferPeriod> = ({ additionalService, transferInstallments, isAboAccordionExpanded0 = true, priceTabIndex }) => {
   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, value: any) => void;
+  onChange?: (event?: React.ChangeEvent<HTMLInputElement>, checked?: boolean | string,  value?: any) => void;
   reversed?: boolean;
   value: string;
 }

package/source/components/OfferPanel/OfferPeriod/OfferPeriod.tsx

@@ -1,6 +1,5 @@
 import React, { FC, ChangeEvent } from 'react';
 import _get from 'lodash/get';
-import classNames from 'classnames';
 import styles from './OfferPeriod.styl';
 import { modalsTranslate } from '../../../locales/data';
 import CheckboxMaterial from '../../_common/CheckboxMaterial/CheckboxMaterial';
@@ -22,9 +21,6 @@ const OfferPeriod: FC<IOfferPeriod> = ({ paybackPeriod, periods, t, onChange })
       <div className={styles.periods}>
         {periods.map((period: number) => {
           const isChecked = paybackPeriod === period;
-          const labelClassName = classNames(
-            { [styles.checked]: isChecked }
-          );
           const inputProps = {
             type: 'period',
             name: 'duration',

package/source/components/OfferPanel/RangeGroup/RangeGroup.tsx

@@ -9,16 +9,18 @@ export interface IRangeGroup {
   onChange: (event: Event, value: number | number[]) => void;
   className?: string;
   isAlternative?: boolean;
+  maxFinancingFirstInstallment?: number;
 }
 
-const RangeGroup: FC<IRangeGroup> = ({ sliders, onChange, isAlternative }) => <>
-  {sliders.length && sliders.map(({ name, min, max, step, caption, value, unitName }) => {
+const RangeGroup: FC<IRangeGroup> = ({ sliders, onChange, isAlternative, maxFinancingFirstInstallment }) => <>
+  {sliders.length && sliders.map(({ name, min, max, step, caption, value, unitName, withRangeLimit }) => {
     const rangeProps = {
       min, max, step, value,
-      isAlternative,
+      isAlternative, withRangeLimit,
       units: value ? ` ${unitName}` : '',
       onAfterChange: () => {},
-      onChange: (_: Event, value: number | number[]) => onChange(name, value)
+      onChange: (_: Event, value: number | number[]) => onChange(name, value),
+      maxFinancingFirstInstallment
     };
     return (
       <Fragment key={name}>

package/source/components/PriceRatingDetailed/PriceRatingDetailed.tsx

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