@bytebrand/fe-ui-core 4.8.111 → 4.8.112

package/source/components/VehicleDetailedSlider/VehicleDetailedSlider.story.js

@@ -0,0 +1,120 @@
+import React from 'react';
+import i18next from 'i18next';
+import { Resizable } from 're-resizable';
+import { withNamespaces } from 'react-i18next';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import VehicleDetailedSlider from './VehicleDetailedSlider.tsx';
+
+i18next.addResourceBundle('de', 'VehicleDetailsPage', {
+  "slider": {
+    "topPrices": "Top-Preise",
+    "comingSoon": "Demnächst",
+    "firstPicture": "Erstes Bild",
+    "currentSlide": "von",
+    "fullScreen": "Vollbild",
+    "exterior": "Außen",
+    "interior": "Innen",
+    "comparableCars": "Vergleichbare Autos",
+    "comparableCarsMobile": "Vergleichbare Autos",
+    "othersLooked": "Andere haben ebenso angeschaut",
+    "saveCarAsFavorites": "{{ count }} Favoriten",
+    "customersLookingTheCar": "{{ count}} Ansichten",
+    "checked": "geprüft",
+    "easy": "einfach",
+    "safe": "sicher",
+    "toBuy": "kaufen",
+    "callForFree": "kostenfrei anrufen",
+    "save": "sparen",
+    "new": "neu"
+  },
+});
+
+const wrapperProps = {
+  border: '1px solid rgba(0,0,0,0.1)',
+  borderRadius: '2px',
+  backgroundColor: '#fff'
+};
+
+const resizableProps = {
+  minWidth: 595,
+  defaultSize: { width: 724, height: 'auto' }
+};
+
+const IMAGE_URL = 'https://picsum.photos/400/300/?random';
+const images = [];
+for (let i = 0; i <= 10; i++) {
+  images.push({
+    imageUrlSmall: `${IMAGE_URL}&tag=${Math.random()}`,
+    imageUrlLarge: `${IMAGE_URL}&tag=${Math.random()}`
+  });
+}
+
+
+const VehicleDetailedSliderStory = () => {
+  const sliderProps = {
+    showModal: action('showModal(id: string, props?: any)'),
+    hideModal: action('hideModal(id: string)'),
+    price: {
+      monthlyInstallment: 29,
+      oldMonthlyInstallment: 49,
+      isStrikeShown: true,
+      currency: "EUR",
+      currentSalesPrice: 16160,
+      historyPriceDifference: 5629.6,
+      historyPriceDifferencePerCent: 26,
+      mlCurrentSalesPriceCategory: null,
+      mlCurrentSalesPriceDiffPercent: null,
+      mlCurrentSalesPricePredicted: 100,
+      totalCurrent: 50,
+      originalSalesPrice: 13467,
+      priceDate: null,
+      priceId: null,
+      recomendedRetailPrice: null,
+      retailToCurrentPriceDifference: 0,
+      vatDeductible: null,
+      vatRate: 7,
+      wasPrice: 10000,
+      leasing: {
+        monthlyInstallment: 49,
+        oldMonthlyInstallment: 69,
+        isActive: true
+      },
+      buy: {
+        currentSalesPriceExtra: 16110,
+        highestPriceExtra: 19349
+      }
+    },
+    modificationDate: 1535760000,
+    mainImageUrl: 'http://placehold.jp/400x300.png?text=mainImage',
+    mainImageBlur: true,
+    showNewLabel: true,
+    photos: images,
+    exteriorPhotos: 'http://placehold.jp/400x300.png?text=mainImage',
+    interiorPhoto: 'http://placehold.jp/400x300.png?text=mainImage',
+    statsData: {
+      totalCarImpCount: 10,
+      totalFavCount: 20,
+    },
+    make: 'Audi',
+    model: 'A4',
+    subModel: 'Shooting Brake',
+    powerKW: 35,
+    powerPS: 120,
+    isFavorite: false,
+    onCarFavorite: action('onCarFavorite(event, id)')
+  };
+
+  return (
+    <>
+    <p>Main image on CDP with MagnifyGlass</p>
+    <div style={wrapperProps}>
+      <Resizable {...resizableProps}>
+        <VehicleDetailedSlider {...sliderProps} />
+      </Resizable>
+    </div>
+    </>
+  );
+};
+
+storiesOf('VehicleDetailedSlider', module).add('VehicleDetailedSlider', () => <VehicleDetailedSliderStory />);

package/source/components/VehicleDetailedSlider/VehicleDetailedSlider.tsx

@@ -46,8 +46,6 @@ interface IProps {
   showDownPayment: boolean;
   financingFirstInstallment?: number | null;
   leasingFirstInstallment?: number | null;
-  sliderFinancingFirstInstallment?: number | null;
-  sliderLeasingFirstInstallment?: number | null;
   handleSentryInit?: () => void;
 }
 
@@ -314,12 +312,11 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
       showDownPayment,
       financingFirstInstallment,
       leasingFirstInstallment,
-      sliderFinancingFirstInstallment,
-      sliderLeasingFirstInstallment,
       subModel,
       powerKW,
       powerPS,
       activeTab,
+      financingConfig,
       onCarFavorite
     } = this.props;
     const { activeSlide } = this.state;
@@ -341,12 +338,11 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
 
     const priceProps = {
       t,
+      financingConfig,
       showNewLabel,
       showDownPayment,
       financingFirstInstallment,
       leasingFirstInstallment,
-      sliderFinancingFirstInstallment,
-      sliderLeasingFirstInstallment,
       historyPriceDifference: price ? price.historyPriceDifference : 0,
       historyPriceDifferencePerCent: price ? price.historyPriceDifferencePerCent : 0,
       activeTab

package/source/components/VehiclePromoSlider/VehiclePromoInfo/VehiclePromoInfo.story.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import VehiclePromoInfo from './VehiclePromoInfo';
+
+// Stateful container for testing interaction
+class VehiclePromoInfoContainer extends React.Component {
+  render() {
+    const { t } = this.props;
+
+    const props = {
+      t: key => key,
+      price: {
+        wasPrice: 18660,
+        currentSalesPrice: 18440,
+        historyPriceDifferencePerCent: 2,
+        purchasePrice: 0,
+        vatRate: 19
+      },
+      consumption: { consumptionCombined: 6.1 },
+      environmentEmissions: { co2: 159 },
+      monthlyInstallment: 269.8,
+      oldMonthlyInstallment: 259.8,
+      onButtonClick: action('offer button click'),
+      onFinancingDetailsClick: action('financing button click')
+    };
+
+    return (
+      <div style={{ marginTop: 100 }}>
+        <VehiclePromoInfo {...props} />
+      </div>
+    );
+  }
+}
+
+storiesOf('VehiclePromoInfo', module)
+  .add('Default', () => (
+    <div>
+      <VehiclePromoInfoContainer />
+    </div>
+  ));

package/source/components/VehiclePromoSlider/VehiclePromoSlide/VehiclePromoSlide.story.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import VehiclePromoSlide from './VehiclePromoSlide';
+
+// Stateful container for testing interaction
+class VehiclePromoSlideContainer extends React.Component {
+  render() {
+    const { t } = this.props;
+
+    const props = {
+      t: key => key,
+      _id: 'e18efa30-a4d2-48d7-b0d7-d1701731af2a',
+      title: 'BMW 114',
+      showNewLabel: true,
+      vehicleLink:
+        '',
+      src:
+        'https://images.auto.de/carimage/858c5bae-12d2-4180-ad01-6576c2160dc0/WF-8oH7LX-iw/medium-transparent',
+      environmentEmissions:
+        { energyEfficiencyClass: 'energyEff',
+          co2: 115,
+          emissionClass: 'emissionClass',
+          emissionSticker: 'emissionSticker' },
+      consumption:
+        { consumptionUnit: 'unit',
+          fuel: 'petrol',
+          consumptionCombined: 4.9 },
+      price:
+        { currency: 'EUR',
+          wasPrice: 14789,
+          currentSalesPrice: 100000,
+          vatRate: 19,
+          recomendedRetailPrice: 120000,
+          retailToCurrentPriceDifference: -20000,
+          historyPriceDifferencePerCent: 17,
+          historyPriceDifference: 20000,
+          mlCurrentSalesPricePredicted: 98000,
+          mlCurrentSalesPriceDiffPercent: 2.0408163265306145 },
+      monthlyInstallment: 714.69,
+      oldMonthlyInstallment: 1082.29,
+      bubblesColor: '#fd5a1c',
+      bubbleContent: 'Super Angebot!',
+      onButtonClick: action('offer button click'),
+      onFinancingDetailsClick: action('financing button click')
+    };
+
+    return (
+      <div style={{ marginTop: 100 }}>
+        <VehiclePromoSlide {...props} />
+      </div>
+    );
+  }
+}
+
+storiesOf('VehiclePromoSlide', module)
+  .add('Default', () => (
+    <div>
+      <VehiclePromoSlideContainer />
+    </div>
+  ));

package/source/components/VehiclePromoSlider/VehiclePromoSlider.story.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import cars from './cars'; // fake data from top api request
+
+import VehiclePromoSlider from './VehiclePromoSlider';
+
+const defaultSliderStateProps = {
+  t: key => key,
+  cars
+};
+
+const withHandlersSliderStateProps = {
+  t: key => key,
+  cars,
+  onButtonClick: action('offer button click'),
+  onFinancingDetailsClick: action('financing button click')
+};
+
+// Stateful container for testing interaction
+class VehiclePromoSliderContainer extends React.Component {
+  render() {
+    return (
+      <div style={{ marginTop: 100 }}>
+        <VehiclePromoSlider {...this.props} />
+      </div>
+    );
+  }
+}
+
+storiesOf('VehiclePromoSlider', module)
+  .add('Default', () => (
+    <div style={{ width: '90vw', height: '75vh' }}>
+      <VehiclePromoSliderContainer {...defaultSliderStateProps} />
+    </div>
+  ))
+  .add('With Handlers', () => (
+    <div style={{ width: '90vw', height: '75vh' }}>
+      <VehiclePromoSliderContainer {...withHandlersSliderStateProps} />
+    </div>
+  ));

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

@@ -70,6 +70,11 @@
     +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);
 
@@ -122,6 +127,43 @@
   &.priceMtlActive
     transform: translateX(6px);
 
+// ADV-70: monthly label rendered before the rate (small, top-left of the number).
+.priceCurrentWrap
+  display: inline-flex
+  align-items: flex-start
+
+.priceMtlPrefix
+  font-size: 10px
+  line-height: 1.2
+  margin-right: 3px
+  color: rgba(76, 78, 100, 0.6)
+  align-self: flex-start
+  white-space: nowrap
+
+// ADV-88 (Marco): the monthly "mtl."/"mth." label sits INLINE to the LEFT of the rate (top-
+// aligned), not stacked above. NOTE: on the narrowest 4-up landing/main card (~256px) the
+// inline label can graze the card edge at full font; the wide comparable/CDP card fits with
+// room. (Marco asked to keep the rate/category fonts untouched — only the label moved.)
+.priceItemComparable
+  .priceCurrentWrap
+    flex-direction: row
+    align-items: flex-start
+  .priceMtlPrefix
+    font-size: 8px
+    line-height: 1
+    margin-right: 2px
+    align-self: flex-start
+
+// landing (/angebot): on desktop the cards are a narrow 4-up grid where the inline label would
+// overflow the price column — stack "mtl."/"mth." above the rate there (mobile stays inline above).
+.priceItemLanding
+  +media-tablet-landscape-up()
+    .priceCurrentWrap
+      flex-direction: column
+      align-items: flex-end
+    .priceMtlPrefix
+      margin-right: 0
+
 .priceNewBlock
   flex-shrink: 0;
   width: 18px

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

@@ -39,7 +39,10 @@ export interface IVehiclePriceItemProps {
   isMarge?: boolean;
 }
 class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
-  routeToActiveTab = () => {}
+  routeToActiveTab = () => {
+    const { priceTitle } = this.props;
+    localStorage.setItem('activeTabCDP', priceTitle);
+  }
 
   render(): React.ReactNode {
     const {
@@ -78,6 +81,9 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
       { [styles.priceItemSearch]: vehicleComponentName === 'search' },
       { [styles.priceItemRecently]: vehicleComponentName === 'recently' },
       { [styles.priceItemComparable]: vehicleComponentName === 'comparable' || vehicleComponentName === 'landing' || vehicleComponentName === 'main' },
+      // landing (/angebot) cards are a narrow 4-up grid on desktop where the inline monthly
+      // label would overflow — keep it stacked there, inline only on the wide single-column mobile.
+      { [styles.priceItemLanding]: vehicleComponentName === 'landing' },
       { [styles.priceItemDisable]: isPriceDisable },
       { [styles.priceItemBuy]: isTotal }
     );
@@ -85,7 +91,9 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
     const priceItemCategoryClassName = classnames(
       styles.priceItemCategory,
       { [styles.priceItemCategorySearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' },
-      { [styles.priceItemCategoryComparable]: vehicleComponentName === 'comparable' || vehicleComponentName === 'landing' || vehicleComponentName === 'main' }
+      { [styles.priceItemCategoryComparable]: vehicleComponentName === 'comparable' },
+      { [styles.priceItemCategoryLanding]: vehicleComponentName === 'landing' },
+      { [styles.priceItemCategoryMain]: vehicleComponentName === 'main' }
     );
 
     return (
@@ -134,15 +142,19 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
                   )}
 
                   {perMonthCurrent && (
-                    <VehicleFormattedPrice
-                      numbersAfterDot={0}
-                      price={perMonthCurrent}
-                      postfix={postfix}
-                      className={classnames(styles.priceMtl, { [styles.priceMtlActive]: !!priceSub })}
-                      isNew={isStrikeShown}
-                      size='semimedium'
-                      sub={priceSub}
-                    />
+                    <span className={styles.priceCurrentWrap}>
+                      {/* ADV-70 (design): monthly label ("mtl."/"mth.") now sits BEFORE the rate
+                          instead of as a "/mtl." suffix after it. */}
+                      {priceSub && <span className={styles.priceMtlPrefix}>{priceSub.replace(/^\//, '')}</span>}
+                      <VehicleFormattedPrice
+                        numbersAfterDot={0}
+                        price={perMonthCurrent}
+                        postfix={postfix}
+                        className={styles.priceMtl}
+                        isNew={isStrikeShown}
+                        size='semimedium'
+                      />
+                    </span>
                   )}
                 </>
               ) : (

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

@@ -12,7 +12,23 @@
   grid-area: info;
 
   & > .consumptionCombined
-    font-size: 10px
+    font-size: 9px
+
+  // ADV-88: new plug-in hybrid consumption line — full-width row at the very bottom of the
+  // card on every breakpoint. `order` pushes it past the price-rating strip so the long text
+  // never overlaps it; overrides the per-variant desktop reset to grid-column/grid-row: auto.
+  & > .pluginFullWidth
+    grid-column: 1 / -1 !important
+    grid-row: auto !important
+    order: 99
+    height: auto !important
+    align-items: flex-start
+    white-space: normal
+    border-bottom: none
+    padding-top: 4px
+    span
+      font-size: 9px
+      line-height: 1.35
 
   +media-tablet-landscape-down()
     padding: 0 10px;
@@ -27,7 +43,7 @@
     background-color rgba(76, 78, 100, 0.12);
 
   &.vehiclePropertiesLanding
-    grid-auto-rows: 44px;
+    grid-auto-rows: minmax(44px, auto);
     grid-template-columns: 1fr 1fr;
     padding: 0 3px;
 
@@ -41,7 +57,7 @@
 
     +media-tablet-landscape-up()
       padding-top: 2px;
-      grid-auto-rows: 38px;
+      grid-auto-rows: minmax(38px, auto);
       grid-template-columns: 100%;
 
       span
@@ -63,7 +79,7 @@
         margin-bottom: 2px;
 
   &.vehiclePropertiesMain
-    grid-auto-rows: 44px;
+    grid-auto-rows: minmax(44px, auto);
     grid-template-columns: 100%;
     padding: 0 6px;
 
@@ -71,8 +87,14 @@
       white-space: pre-line;
       grid-row: 4;
 
+    // mobile (home top-offer / CDP comparable): vertically centre the "good price" block.
+    +media-tablet-landscape-down()
+      & > .priceRating
+        align-self: center
+        margin: auto 0
+
     +media-tablet-landscape-up()
-      grid-auto-rows: 38px;
+      grid-auto-rows: minmax(38px, auto);
 
       span
         font-size: 11px;
@@ -130,6 +152,16 @@
     grid-template-columns: 1fr 1fr;
     grid-auto-rows: 44px;
 
+    // ADV-70: underline the price-rating ("GUTER PREIS") cell like the spec rows above it —
+    // stretch it to fill the grid cell so the border sits at the same baseline.
+    & > .priceRating
+      margin: 0
+      align-self: stretch
+      display: flex
+      flex-direction: column
+      justify-content: center
+      border-bottom: 1px solid rgba(76, 78, 100, 0.12)
+
     & > .consumptionCombined
       white-space: pre-line;
       grid-column: 1 / span 2;
@@ -216,3 +248,26 @@
 .priceRating
   margin: auto;
   box-sizing: border-box;
+
+// ADV-88: SRL DESKTOP — hide the availability ("Sofort"/"from {date}") cell ONLY for NEW plug-in
+// hybrids (engineData.hybridPlugin + mainData.condition selector_condition_new) so the price-rating
+// flows up into its place. All other cards keep availability; mobile keeps it for everyone.
+.vehiclePropertiesSearch.searchPluginInfo
+  +media-tablet-landscape-up()
+    & > .offerAvailability
+      display: none
+
+// SRL MOBILE — centre the "good price" cell (horizontally + vertically) on ALL search cards.
+.vehicleInfo.vehiclePropertiesSearch
+  +media-tablet-landscape-down()
+    & > .priceRating
+      align-items: center
+      justify-content: center
+
+// SRL MOBILE — drop the "good price" underline ONLY for NEW plug-in hybrids (engineData.hybridPlugin
+// + mainData.condition selector_condition_new). The extra .searchPluginInfo makes this (0,4,0) so it
+// beats the base (0,3,0) border-bottom; non-plug-in cards keep the underline.
+.vehicleInfo.vehiclePropertiesSearch.searchPluginInfo
+  +media-tablet-landscape-down()
+    & > .priceRating
+      border-bottom: none

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

@@ -1,6 +1,7 @@
 /* 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';
@@ -43,8 +44,10 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
     consumption,
     location,
     offer,
-    engineData
-  } = props;
+    engineData,
+    leasing,
+    suppressConsumption
+  } = props as (typeof props & { suppressConsumption?: boolean });
   const firstRegistrationDate = regDate && regDate !== 0 ? regDate : 'N/A';
 
   const dataDecoratedProps = {
@@ -65,7 +68,8 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
     },
     environmentEmissions: {
       co2: environmentEmissions.co2,
-      wltpCo2: environmentEmissions.wltpCo2
+      wltpCo2: environmentEmissions.wltpCo2,
+      wltpEnergyEfficiencyClass: environmentEmissions.wltpEnergyEfficiencyClass
     },
     consumption: {
       fuel: consumption.fuel,
@@ -78,16 +82,29 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
     },
   };
 
+  // ADV-88: ANY plug-in hybrid (new or used) carries the long weighted+discharged consumption/CO2
+  // line — render it full-width. Gated on hybridPlugin only, no condition check.
+  // ADV-88: "is a hybrid car" is determined by fuel type (hybrid electric + diesel/petrol), not hybridPlugin.
+  const isPluginHybrid = consumption.fuel === 'selector_fuel_hybridElectricalDiesel'
+    || consumption.fuel === 'selector_fuel_hybridElectricalPetrol';
   const decoratedProps = getDecoratedProps(dataDecoratedProps, t, language);
   const renderProperty = (renderProperties: any, vehicleComponentName?: any) => {
-    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'
-    }));
+    const mainPropertiesList = renderProperties(dataDecoratedProps.consumption.fuel, combineRefAlternative)
+      // ADV-88: on landing/main the plug-in consumption line is rendered full-width by VehicleSmallCard.
+      .filter((prop: string) => !(suppressConsumption && decoratedProps[prop] && decoratedProps[prop].name === 'consumptionCombined'))
+      .map((prop: string) => {
+      const isConsumption = decoratedProps[prop].name === 'consumptionCombined';
+      // On non-SRL cards (and for the full-width plug-in line) drop the fuel-pump icon to free up space.
+      const hideConsumptionIcon = isConsumption && (vehicleComponentName !== 'search' || isPluginHybrid);
+      return {
+        icon: hideConsumptionIcon ? '' : decoratedProps[prop].icon,
+        description: decoratedProps[prop].value,
+        className: classnames(styles[decoratedProps[prop].name], { [styles.pluginFullWidth]: isConsumption && isPluginHybrid }),
+        classNameIcon: (vehicleComponentName === 'search' || 'myVehicles' || 'favorite' || 'recently') && styles.carIconSearch,
+        smalltext: isConsumption && (vehicleComponentName !== 'search'),
+        hybridPlugin: isPluginHybrid && isConsumption && vehicleComponentName !== 'search'
+      };
+    });
 
     return mainPropertiesList.map((property: any, index: number) => (
       <VehicleProperty {...property} key={index} />
@@ -100,6 +117,8 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
     { [styles.vehiclePropertiesLanding]: vehicleComponentName === 'landing' },
     { [styles.vehiclePropertiesMain]: vehicleComponentName === 'main' },
     { [styles.vehiclePropertiesSearch]: vehicleComponentName === 'search' },
+    // ADV-88: mark a plug-in SRL card so its "good price" underline can be dropped on mobile.
+    { [styles.searchPluginInfo]: isPluginHybrid && vehicleComponentName === 'search' },
     { [styles.vehiclePropertiesFavorite]: vehicleComponentName === 'favorite' },
     { [styles.vehiclePropertiesMyVehicles]: vehicleComponentName === 'myVehicles' },
     { [styles.vehiclePropertiesRecently]: vehicleComponentName === 'recently' },
@@ -149,7 +168,12 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
       ),
         ...routeObj,
         className: wrapClasses,
-        onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
+        onClick: () => localStorage.setItem(
+          'activeTabCDP',
+          _get(leasing, 'isActive', false)
+            ? t('vehicleProps:title.leasing')
+            : t('vehicleProps:title.financing')
+        ),
         href: url,
         target,
         rel

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

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