@bytebrand/fe-ui-core 4.8.52 → 4.8.54

package/media/locales/de/promoSlider.json

@@ -1,7 +1,6 @@
 {
   "consumptionCombined": "{{consumptionCombined}}l/100km (komb)*",
   "co2": "{{co2}}g CO2/km (komb)*",
-  "co2Class": "CO2-Klasse {{class}} (komb)",
   "weDeliverMagdeburg": "Wir liefern Ihr Auto zu Ihnen nach Magdeburg!",
   "weDeliverToYou": "Wir liefern Ihr Auto zu Ihnen!",
   "withoutDeposit": "ohne Anzahlung",

package/media/locales/en/promoSlider.json

@@ -1,7 +1,6 @@
 {
   "consumptionCombined": "{{consumptionCombined}}/100km (comb)*",
   "co2": "{{co2}}g CO2/km (comb)*",
-  "co2Class": "CO2-class {{class}} (comb)",
   "weDeliverMagdeburg": "We will deliver your car to Magdeburg!",
   "weDeliverToYou": "We deliver your car to you!",
   "withoutDeposit": "Without Deposit",

package/package.json

@@ -1,117 +1,120 @@
-{
-  "name": "@bytebrand/fe-ui-core",
-  "version": "4.8.52",
-  "description": "UI components for the auto.de project",
-  "main": "index.ts",
-  "module": "dist/common.js",
-  "dependencies": {
-    "@babel/core": "^7.17.8",
-    "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/plugin-proposal-decorators": "^7.17.8",
-    "@babel/plugin-transform-react-constant-elements": "^7.17.6",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.21.0",
-    "@bytebrand/car-schema-selectors": "^2.0.7",
-    "@bytebrand/fe-histoslider": "3.0.0",
-    "@bytebrand/i18n-dictionaries": "^0.7.5",
-    "@emotion/react": "^11.9.3",
-    "@emotion/styled": "^11.9.3",
-    "@mui/material": "^5.9.0",
-    "@mui/styles": "^5.9.0",
-    "@mui/x-date-pickers": "^5.0.0-beta.1",
-    "classnames": "2.2.6",
-    "d3-format": "1.4.5",
-    "d3-scale": "^2.2.2",
-    "date-fns": "2.29.1",
-    "i18next": "^15.0.4",
-    "jest": "^26.0.0",
-    "js-cookie": "^2.2.0",
-    "moment": "^2.29.1",
-    "rc-slider": "^8.6.13",
-    "react": "^17.0.2",
-    "react-device-detect": "^2.1.2",
-    "react-dom": "^17.0.2",
-    "react-grid-system": "^5.0.2",
-    "react-i18next": "9.0.4",
-    "react-lazyload": "3.2.0",
-    "react-scroll": "^1.7.13",
-    "react-select": "^3.0.4",
-    "react-slick": "^0.29.0",
-    "slick-carousel": "1.8.1",
-    "uuid": "^8.3.2"
-  },
-  "devDependencies": {
-    "@storybook/addon-actions": "^5.1.11",
-    "@storybook/addon-backgrounds": "^5.1.11",
-    "@storybook/addon-centered": "^5.1.11",
-    "@storybook/addon-info": "^5.1.11",
-    "@storybook/addon-links": "^5.1.11",
-    "@storybook/addons": "^5.1.11",
-    "@storybook/react": "^5.3.21",
-    "@testing-library/dom": "^9.0.1",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^11.2.6",
-    "@types/classnames": "2.2.6",
-    "@types/d3-format": "^1.3.1",
-    "@types/i18next": "^12.1.0",
-    "@types/jest": "^29.4.0",
-    "@types/js-cookie": "^2.1.0",
-    "@types/lodash": "^4.14.134",
-    "@types/qs": "^6.9.7",
-    "@types/rc-slider": "^9.3.1",
-    "@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 ",
-    "@types/uuid": "^8.3.1",
-    "autoprefixer": "^9.6.0",
-    "babel-loader": "^8.0.6",
-    "babel-plugin-minify-dead-code-elimination": "^0.5.0",
-    "babel-plugin-transform-imports": "^2.0.0",
-    "css-loader": "^3.2.0",
-    "jest-css-modules": "^2.1.0",
-    "jest-css-modules-transform": "^4.4.2",
-    "jest-dom": "^4.0.0",
-    "jest-environment-jsdom-sixteen": "^2.0.0",
-    "jest-junit": "^15.0.0",
-    "jest-stylus": "^0.1.2",
-    "jest-svg-transformer": "^1.0.0",
-    "jest-transform-stub": "^2.0.0",
-    "lodash": "^4.17.15",
-    "mobx": "4.6.0",
-    "mobx-react": "5.4.3",
-    "postcss-loader": "^3.0.0",
-    "qs": "6.5.1",
-    "re-resizable": "^6.0.0",
-    "react-checkbox-tree": "^1.5.1",
-    "react-circular-progressbar": "^2.0.4",
-    "storybook-addon-i18next": "^1.1.0",
-    "style-loader": "^1.0.0",
-    "stylus": "^0.54.5",
-    "stylus-loader": "^3.0.2",
-    "ts-jest": "^26.0.0",
-    "tslint": "^5.17.0",
-    "tslint-config-airbnb": "^5.11.1",
-    "tslint-loader": "^3.5.4",
-    "typescript": "^3.5.1",
-    "webpack-cli": "^3.3.6",
-    "husky": "^9.0.11"
-  },
-  "resolutions": {
-    "@types/react": "^16.8.3"
-  },
-  "scripts": {
-    "storybook": "start-storybook -p 6006",
-    "clean": "rm -rf ./dist/*.*",
-    "build:lib": "yarn clean && webpack --config ./webpack.config.js --progress",
-    "build:story": "build-storybook",
-    "test": "jest --watch",
-    "test:ci": "jest --config ./jest.config.js --collectCoverage --coverageDirectory=\"./coverage\" --ci --reporters=default --reporters=jest-junit --watchAll=false",
-    "test:coverage": "yarn run test -- --coverage --watchAll=false || exit 0"
-  },
-  "author": "Maks Okhmatenko",
-  "license": "UNLICENSED"
-}
+{
+  "name": "@bytebrand/fe-ui-core",
+  "version": "4.8.54",
+  "description": "UI components for the auto.de project",
+  "main": "index.ts",
+  "module": "dist/common.js",
+  "dependencies": {
+    "@babel/core": "^7.17.8",
+    "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@babel/plugin-proposal-decorators": "^7.17.8",
+    "@babel/plugin-transform-react-constant-elements": "^7.17.6",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.0",
+    "@bytebrand/car-schema-selectors": "^2.0.7",
+    "@bytebrand/fe-histoslider": "3.0.0",
+    "@bytebrand/i18n-dictionaries": "^1.5.2",
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
+    "@mui/material": "^5.9.0",
+    "@mui/styles": "^5.9.0",
+    "@mui/x-date-pickers": "^5.0.0-beta.1",
+    "classnames": "2.2.6",
+    "d3-format": "1.4.5",
+    "d3-scale": "^2.2.2",
+    "date-fns": "2.29.1",
+    "i18next": "^15.0.4",
+    "jest": "^26.0.0",
+    "js-cookie": "^2.2.0",
+    "moment": "^2.29.1",
+    "rc-slider": "^8.6.13",
+    "react": "^17.0.2",
+    "react-device-detect": "^2.1.2",
+    "react-dom": "^17.0.2",
+    "react-grid-system": "^5.0.2",
+    "react-i18next": "9.0.4",
+    "react-lazyload": "3.2.0",
+    "react-scroll": "^1.7.13",
+    "react-select": "^3.0.4",
+    "react-slick": "^0.29.0",
+    "slick-carousel": "1.8.1",
+    "uuid": "^8.3.2"
+  },
+  "devDependencies": {
+    "@storybook/addon-actions": "^5.1.11",
+    "@storybook/addon-backgrounds": "^5.1.11",
+    "@storybook/addon-centered": "^5.1.11",
+    "@storybook/addon-info": "^5.1.11",
+    "@storybook/addon-links": "^5.1.11",
+    "@storybook/addons": "^5.1.11",
+    "@storybook/react": "^5.3.21",
+    "@testing-library/dom": "^9.0.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^11.2.6",
+    "@types/classnames": "2.2.6",
+    "@types/d3-format": "^1.3.1",
+    "@types/i18next": "^12.1.0",
+    "@types/jest": "^29.4.0",
+    "@types/js-cookie": "^2.1.0",
+    "@types/lodash": "^4.14.134",
+    "@types/qs": "^6.9.7",
+    "@types/rc-slider": "^9.3.1",
+    "@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 ",
+    "@types/uuid": "^8.3.1",
+    "autoprefixer": "^9.6.0",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-minify-dead-code-elimination": "^0.5.0",
+    "babel-plugin-transform-imports": "^2.0.0",
+    "css-loader": "^3.2.0",
+    "jest-css-modules": "^2.1.0",
+    "jest-css-modules-transform": "^4.4.2",
+    "jest-dom": "^4.0.0",
+    "jest-environment-jsdom-sixteen": "^2.0.0",
+    "jest-junit": "^15.0.0",
+    "jest-stylus": "^0.1.2",
+    "jest-svg-transformer": "^1.0.0",
+    "jest-transform-stub": "^2.0.0",
+    "lodash": "^4.17.15",
+    "mobx": "4.6.0",
+    "mobx-react": "5.4.3",
+    "postcss-loader": "^3.0.0",
+    "qs": "6.5.1",
+    "re-resizable": "^6.0.0",
+    "react-checkbox-tree": "^1.5.1",
+    "react-circular-progressbar": "^2.0.4",
+    "storybook-addon-i18next": "^1.1.0",
+    "style-loader": "^1.0.0",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3.0.2",
+    "ts-jest": "^26.0.0",
+    "tslint": "^5.17.0",
+    "tslint-config-airbnb": "^5.11.1",
+    "tslint-loader": "^3.5.4",
+    "typescript": "^3.5.1",
+    "webpack-cli": "^3.3.6",
+    "husky": "^9.0.11"
+  },
+  "resolutions": {
+    "@types/react": "^16.8.3"
+  },
+  "scripts": {
+    "build": "true",
+    "prepublishOnly": "npm run build",
+    "prepare": "npm run build",
+    "storybook": "start-storybook -p 6006",
+    "clean": "rm -rf ./dist/*.*",
+    "build:lib": "yarn clean && webpack --config ./webpack.config.js --progress",
+    "build:story": "build-storybook",
+    "test": "jest --watch",
+    "test:ci": "jest --config ./jest.config.js --collectCoverage --coverageDirectory=\"./coverage\" --ci --reporters=default --reporters=jest-junit --watchAll=false",
+    "test:coverage": "yarn run test -- --coverage --watchAll=false || exit 0"
+  },
+  "author": "Maks Okhmatenko",
+  "license": "UNLICENSED"
+}

package/source/components/AccordionWidget/AccordionWidget.styl

@@ -191,7 +191,6 @@
   height: 45px
   border-bottom 1px solid $grey-e
   text-transform: none
-  font-size: 11px
 
   +media-tablet-landscape-down()
     padding-top: 7px;

package/source/components/AccordionWidget/AccordionWidget.tsx

@@ -36,7 +36,7 @@ class AccordionWidget extends React.Component<IAccardionSectionProps> {
               key={i}
               description={prop.description}
               classNameIcon={styles.propertyIcon}
-              icon={prop.icon === '' ? '' : (prop.icon || 'no-image')}
+              icon={prop.icon || 'no-image'}
               className={styles.accordionVehicleProp}
             />
           );
@@ -101,13 +101,9 @@ class AccordionWidget extends React.Component<IAccardionSectionProps> {
     const autoDeId = car.metaData && car.metaData.vehicleId;
     const { consumption } = car;
     const mainPropertiesList = getOverviewDetails(consumption.fuel);
-    const mainProperties = mainPropertiesList.map((prop: string) => {
-      const isConsumptionAlternateView = prop.startsWith('consumption') && prop.endsWith('AlternateView');
-      return {
-        icon: isConsumptionAlternateView ? '' : this.props.decoratedProps[prop].icon,
-        description: this.props.decoratedProps[prop].value
-      };
-    });
+    const mainProperties = mainPropertiesList.map((prop: string) => (
+      { icon: this.props.decoratedProps[prop].icon, description: this.props.decoratedProps[prop].value })
+    );
     return (
       <div>
         {this.renderPropsBlock(mainProperties)}

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

@@ -21,7 +21,7 @@ export interface ICheckboxProps {
   checkboxClassName?: string;
   labelClassName?: string;
   labelPlacement?: 'end' | 'start' | 'top' | 'bottom';
-  tooltipDescription?: React.ReactNode;
+  tooltipDescription?: string;
   checkboxPriceValue: any;
   tooltipPosX?: string;
   error?: boolean;
@@ -128,7 +128,7 @@ class CheckboxContainer extends React.Component<ICheckboxProps, {}> {
           {description ? (
             <span className={styles.labelContent}>
               {description}
-              {tooltipDescription && <MaterialTooltip zindex={10000} disablePortal={false} text={tooltipDescription} className={styles.tooltipCheckbox} icon='InfoTransparent' />}
+              {tooltipDescription && <MaterialTooltip zindex={10000} text={tooltipDescription} className={styles.tooltipCheckbox} icon='InfoTransparent' />}
             </span>
           ) : false}
         </label>

package/source/components/OfferPanel/OfferCheckboxGroup/OfferCheckboxGroup.styl

@@ -111,30 +111,6 @@
     max-height: inherit;
     width: inherit !important
 
-  :global
-    .MuiTooltip-tooltip
-      max-width: 360px !important
-      font-size: 11px
-      line-height: 1.45
-      color: #4C4E64AD
-      text-align: left
-
-      b
-        display: block
-        margin-bottom: 6px
-        font-size: 12px
-        color: #1a1a1a
-
-      p
-        margin: 0 0 6px
-
-      ul
-        margin: 4px 0 0
-        padding-left: 16px
-
-      li
-        margin-bottom: 3px
-
 .checkboxPrice
   align-self: center;
   color: rgba(#000000, .63);

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

@@ -16,7 +16,7 @@ const OfferCheckboxGroup: FC<IOfferPeriod> = ({ additionalService, transferInsta
   return (
     <div className={offerGroupClass}>
       {isAboAccordionExpanded0 && <CheckboxContainer {...additionalService } />}
-      {priceTabIndex === 2 && <CheckboxContainer {...{ ...transferInstallments, isAboAccordionExpanded0 }} />}
+      <CheckboxContainer {...{ ...transferInstallments, isAboAccordionExpanded0 }} />
     </div>
   );
 };

package/source/components/OfferPanel/OfferPanel.tsx

@@ -71,7 +71,7 @@ const OfferPanel: FC<IFinancingPanel> = ({
 
           {priceTabIndex === THREE
             ? <div className={styles.aboAccordionWrapper}><AboAccordion /></div>
-            : <div className={styles.offerCheckboxGroup}><OfferCheckboxGroup {...{ transferInstallments, additionalService, priceTabIndex }} /></div>}
+            : <div className={styles.offerCheckboxGroup}><OfferCheckboxGroup {...{ transferInstallments, additionalService }} /></div>}
         </>
       }
     </form>

package/source/components/VehicleDetailedSidebar/VehicleDetailedSidebar.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, FunctionComponent } from 'react';
+import React, { useState, useEffect, FunctionComponent } from 'react';
 import _get from 'lodash/get';
 import { Hidden } from 'react-grid-system';
 import PriceContent from './partials/PriceContent';
@@ -104,31 +104,19 @@ const VehicleDetailedSidebar: FunctionComponent<IVehicleDetailedSidebarProps> =
     }
   ];
 
-  const initialDefaultAppliedForPath = useRef<string | null>(null);
-
   useEffect(() => {
     const getlocalStorageActiveTabCDP = localStorage.getItem('activeTabCDP');
-    if (getlocalStorageActiveTabCDP) {
-      const activeTab = tabsTitles.findIndex(({ title }: { title: string }) => {
-        return title === getlocalStorageActiveTabCDP;
-      });
-      if (activeTab === -1) {
-        setActiveTab(null, 0);
-      } else {
-        setActiveTab(null, activeTab);
-      }
-      localStorage.removeItem('activeTabCDP');
-      initialDefaultAppliedForPath.current = pathname;
-      return;
-    }
-    if (
-      initialDefaultAppliedForPath.current !== pathname
-      && _get(price, 'leasing.isActive', false)
-    ) {
-      setActiveTab(null, 1);
-      initialDefaultAppliedForPath.current = pathname;
+    if (!getlocalStorageActiveTabCDP) return;
+    const activeTab = tabsTitles.findIndex(({ title }: { title: string }) => {
+      return title === getlocalStorageActiveTabCDP;
+    });
+    if (activeTab === -1) {
+      setActiveTab(null, 0);
+    } else {
+      setActiveTab(null, activeTab);
     }
-  }, [pathname, activeTab, price]); // tslint:disable-line:align
+    localStorage.removeItem('activeTabCDP');
+  }, [pathname, activeTab]); // tslint:disable-line:align
 
   const priceProps = {
     tabsTitles,

package/source/components/VehicleDetailedSlider/VehicleDetailedSlider.tsx

@@ -316,7 +316,6 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
       powerKW,
       powerPS,
       activeTab,
-      financingConfig,
       onCarFavorite
     } = this.props;
     const { activeSlide } = this.state;
@@ -338,7 +337,6 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
 
     const priceProps = {
       t,
-      financingConfig,
       showNewLabel,
       showDownPayment,
       financingFirstInstallment,

package/source/components/VehicleDetailedSlider/partials/PriceData.tsx

@@ -9,7 +9,6 @@ interface IProps {
   showNewLabel: boolean;
   historyPriceDifference: number;
   historyPriceDifferencePerCent: number;
-  financingConfig?: any;
   activeTab?: number;
   showDownPayment: boolean;
   financingFirstInstallment?: number | null;
@@ -18,13 +17,11 @@ interface IProps {
 
 const MIN_PERCENT = 5;
 const MIN_PRICE_DIFFERENCE = 500;
-const EUR = `€`;
+const EUR = `\u20AC`;
 
 const PriceData: React.FunctionComponent<IProps> = ({ t, showDownPayment, showNewLabel, historyPriceDifference, historyPriceDifferencePerCent, activeTab, financingFirstInstallment, leasingFirstInstallment }) => {
-  const showDownPaymentBadge = showDownPayment && (
-    (activeTab === 0 && financingFirstInstallment === 0) ||
-    (activeTab === 1 && leasingFirstInstallment === 0)
-  );
+  const relevantFirstInstallment = activeTab === 0 ? financingFirstInstallment : activeTab === 1 ? leasingFirstInstallment : null;
+  const showZeroDownPayment = showDownPayment && relevantFirstInstallment === 0;
   return (
     <div className={styles.topWrapper}>
       {showNewLabel && <Badge type='blue' className={styles.new}>{t('slider.new')}</Badge>}
@@ -34,7 +31,7 @@ const PriceData: React.FunctionComponent<IProps> = ({ t, showDownPayment, showNe
           {` ${EUR} ${t('slider.save')}`}
         </Badge>
       )}
-      {showDownPaymentBadge &&
+      {showZeroDownPayment &&
         <Badge type='lightBlue' className={styles.percentageOfFirstInstallment}>{`0${EUR} ${t('slider.firstInstallment')}`}</Badge>}
       {historyPriceDifferencePerCent >= MIN_PERCENT && (
         <Badge type='red' className={styles.priceDifferencePerCent}>

package/source/components/VehicleSmallCard/VehicleData/VechiclePriceItem/VechiclePriceItem.styl

@@ -70,11 +70,6 @@
     +media-tablet-landscape-up()
       font-size: 9px;
 
-  &.priceItemCategoryLanding,
-  &.priceItemCategoryMain
-    +media-tablet-landscape-up()
-      font-size: 10px;
-
   & > span:hover
     background: rgba(196, 196, 196, 0.6);
 

package/source/components/VehicleSmallCard/VehicleData/VechiclePriceItem/VechiclePriceItem.tsx

@@ -88,9 +88,7 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
     const priceItemCategoryClassName = classnames(
       styles.priceItemCategory,
       { [styles.priceItemCategorySearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' },
-      { [styles.priceItemCategoryComparable]: vehicleComponentName === 'comparable' },
-      { [styles.priceItemCategoryLanding]: vehicleComponentName === 'landing' },
-      { [styles.priceItemCategoryMain]: vehicleComponentName === 'main' }
+      { [styles.priceItemCategoryComparable]: vehicleComponentName === 'comparable' || vehicleComponentName === 'landing' || vehicleComponentName === 'main' }
     );
 
     return (

package/source/components/VehicleSmallCard/VehicleData/VehicleInfo/VehicleInfo.styl

@@ -12,7 +12,7 @@
   grid-area: info;
 
   & > .consumptionCombined
-    font-size: 9px
+    font-size: 10px
 
   +media-tablet-landscape-down()
     padding: 0 10px;

package/source/components/VehicleSmallCard/VehicleData/VehicleInfo/VehicleInfo.tsx

@@ -1,7 +1,6 @@
 /* tslint:disable */
 import * as React from 'react';
 import classnames from 'classnames';
-import _get from 'lodash/get';
 import styles from './VehicleInfo.styl';
 import PriceRating from '../../../PriceRating/PriceRating';
 import { Visible, Hidden } from 'react-grid-system';
@@ -44,8 +43,7 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
     consumption,
     location,
     offer,
-    engineData,
-    leasing
+    engineData
   } = props;
   const firstRegistrationDate = regDate && regDate !== 0 ? regDate : 'N/A';
 
@@ -67,8 +65,7 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
     },
     environmentEmissions: {
       co2: environmentEmissions.co2,
-      wltpCo2: environmentEmissions.wltpCo2,
-      wltpEnergyEfficiencyClass: environmentEmissions.wltpEnergyEfficiencyClass
+      wltpCo2: environmentEmissions.wltpCo2
     },
     consumption: {
       fuel: consumption.fuel,
@@ -83,19 +80,14 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
 
   const decoratedProps = getDecoratedProps(dataDecoratedProps, t, language);
   const renderProperty = (renderProperties: any, vehicleComponentName?: any) => {
-    const mainPropertiesList = renderProperties(dataDecoratedProps.consumption.fuel, combineRefAlternative).map((prop: string) => {
-      const isConsumption = decoratedProps[prop].name === 'consumptionCombined';
-      // On non-SRL cards drop the fuel-pump icon next to the consumption row to free up space for the CO2-class line.
-      const hideConsumptionIcon = isConsumption && vehicleComponentName !== 'search';
-      return {
-        icon: hideConsumptionIcon ? '' : decoratedProps[prop].icon,
-        description: decoratedProps[prop].value,
-        className: styles[decoratedProps[prop].name],
-        classNameIcon: (vehicleComponentName === 'search' || 'myVehicles' || 'favorite' || 'recently') && styles.carIconSearch,
-        smalltext: isConsumption && (vehicleComponentName !== 'search'),
-        hybridPlugin: engineData.hybridPlugin && isConsumption && vehicleComponentName !== 'search'
-      };
-    });
+    const mainPropertiesList = renderProperties(dataDecoratedProps.consumption.fuel, combineRefAlternative).map((prop: string) => ({
+      icon: decoratedProps[prop].icon,
+      description: decoratedProps[prop].value,
+      className: styles[decoratedProps[prop].name],
+      classNameIcon: (vehicleComponentName === 'search' || 'myVehicles' || 'favorite' || 'recently') && styles.carIconSearch,
+      smalltext: (decoratedProps[prop].name === 'consumptionCombined') && (vehicleComponentName !== 'search'),
+      hybridPlugin: engineData.hybridPlugin && decoratedProps[prop].name === 'consumptionCombined' && vehicleComponentName !== 'search'
+    }));
 
     return mainPropertiesList.map((property: any, index: number) => (
       <VehicleProperty {...property} key={index} />
@@ -157,12 +149,7 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
       ),
         ...routeObj,
         className: wrapClasses,
-        onClick: () => localStorage.setItem(
-          'activeTabCDP',
-          _get(leasing, 'isActive', false)
-            ? t('vehicleProps:title.leasing')
-            : t('vehicleProps:title.financing')
-        ),
+        onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
         href: url,
         target,
         rel

package/source/components/VehicleSmallCard/VehicleData/VehiclePrice/VehiclePrice.styl

@@ -62,9 +62,8 @@
     font-size: 12px;
     height: 42px;
 
-  &.vehiclePriceTitleLanding,
-  &.vehiclePriceTitleMain
-    font-size: 10px;
+  &.vehiclePriceTitleLanding
+    font-size: 11px;
     height: 38px;
 
 .addOfferButton

package/source/components/VehicleSmallCard/VehicleData/VehicleProperty/VehicleProperty.styl

@@ -11,7 +11,7 @@
 
 .smallProp
   span
-    font-size: 9px !important
+    font-size: 10px !important
 
 .pluginVal
   span
@@ -26,8 +26,5 @@
   +media-tablet-landscape-up()
     margin-right: 10px
 
-.noIcon
-  padding-left: 5px
-
 [class*='smallText']
   font-size:10px;

package/source/components/VehicleSmallCard/VehicleData/VehicleProperty/VehicleProperty.tsx

@@ -19,13 +19,12 @@ class VehicleProperty extends React.Component<IVehicleProperty, {}> {
 
   render(): React.ReactNode {
     const { className, classNameIcon, icon, description, smalltext, hybridPlugin } = this.props;
-    const noIcon: boolean = !icon;
-    const propertyClass: string = `${styles.carProp} ${className ? className : ''} ${smalltext ? styles.smallProp : ''} ${hybridPlugin ? styles.pluginVal : ''} ${noIcon ? styles.noIcon : ''}`;
+    const propertyClass: string = `${styles.carProp} ${className ? className : ''} ${smalltext ? styles.smallProp : ''} ${hybridPlugin ? styles.pluginVal : ''}`;
     const propertyClassIcon: string = `${styles.carIcon} ${classNameIcon ? classNameIcon : ''}`;
 
     return (
       <div className={propertyClass}>
-        {!noIcon && <IconSVG className={propertyClassIcon} name={icon} customDimensions />}
+        <IconSVG className={propertyClassIcon} name={icon} customDimensions />
         <span>{description}</span>
       </div>
     );

package/source/components/VehicleSmallCard/VehicleData/VehicleTitle/VehicleTitle.tsx

@@ -48,7 +48,7 @@ const VehicleTitle: React.FC<IVehicleTitleProps> = ({
     event.preventDefault();
     event.stopPropagation();
     event.nativeEvent.stopImmediatePropagation();
-    if (onFavoriteClick) onFavoriteClick(event, id);
+    onFavoriteClick(event, id);
   };
 
   const renderFavoriteIcon = (): React.ReactNode => {