@bytebrand/fe-ui-core 4.8.111 → 4.8.113

package/source/components/_common/withPopover/withPopover.story.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import classnames from 'classnames';
+import { storiesOf } from '@storybook/react';
+import withPopover from './withPopover';
+import styles from './withPopover.story.styl'
+
+const Target = ({ isPopoverShown, text }) => {
+  const className = classnames(styles.target, { [styles.targetOpen]: isPopoverShown });
+  return <div className={className}>{text}</div>;
+};
+
+const Popover = ({ isPopoverShown, text }) => {
+  const className = classnames(styles.popover, { [styles.popoverOpen]: isPopoverShown });
+  return <div className={className}>{text}</div>;
+};
+
+const TargetWithPopover = withPopover(Target, Popover);
+
+export class WithPopoverContainer extends React.Component {
+  state = {
+    type: 'click'
+  };
+
+  onCheckboxChange = () => {
+    this.setState({ type: this.state.type === 'click' ? 'hover' : 'click' });
+  };
+
+  render() {
+    const targetWithPopoverProps = {
+      targetProps: { text: 'Target' },
+      popoverProps: { text: 'Popover' },
+      type: this.state.type
+    };
+
+    return (
+      <React.Fragment>
+        <label className={styles.label}>
+          <input type='checkbox' value={this.state.showOnHover} onChange={this.onCheckboxChange} />
+          <span>Open on hover</span>
+        </label>
+        <TargetWithPopover {...targetWithPopoverProps} />
+      </React.Fragment>
+    );
+  }
+}
+
+storiesOf('_Common_UI', module)
+  .add('withPopover', () => <WithPopoverContainer />);

package/source/components/_common/withPopover/withPopover.story.styl

@@ -0,0 +1,54 @@
+@import '../../../theme/theme.styl'
+
+.label
+  display: block
+  font-family: $font-style-arial
+  margin-bottom: 20px
+
+.target
+  position: relative
+  font-family: $font-style-arial
+  width: 150px
+  height: 30px
+  line-height: 30px
+  text-align: center
+  border 1px solid $grey-b
+  border-radius: 3px
+  transition: all 0.2s ease-in-out
+  cursor: pointer
+  &:hover
+    background-color: $grey-f2
+
+.targetOpen
+  color: $primary
+  font-weight: bold
+  border-color: $primary
+  &:after
+    content: ''
+    position: absolute
+    display: block
+    width: 100%
+    height: 15px
+
+.popover
+  position: relative
+  box-sizing: border-box
+  color: white
+  font-size: 25px
+  font-weight: bold
+  border 3px solid $yellow-f1
+  position: absolute
+  top: 45px
+  width: 250px
+  height: 100px
+  line-height: 100px
+  text-align: center
+  border-radius: 3px
+  background-color: $grassGreen
+  visibility: hidden
+  opacity: 0
+  transition: all 0.2s ease-in-out
+
+.popoverOpen
+  visibility: visible
+  opacity: 1

package/source/components/_common/withStats/withStats.story.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import styles from '../Image/Image.story.styl'
+
+import { storiesOf } from '@storybook/react';
+
+import Image from '../Image/Image.tsx';
+import withStats from './withStats.tsx'
+import { COLUMN_STYLES, CONTAINER_STYLES, ROW_STYLES } from '../../../framework/constants';
+
+const SRC_HORIZONTAL = 'https://placekitten.com/400/300';
+
+const ImageWithStats = withStats(Image);
+
+export class ImageWithStatsContainer extends React.Component {
+  state = {
+    isFavoured: false
+  };
+
+  onFavoriteClick = () => {
+    this.setState({ isFavoured: !this.state.isFavoured })
+  };
+
+  render() {
+    const basicProps = {
+      isFavoured: this.state.isFavoured,
+      imagesCount: 10,
+      statsData: {
+        totalCarImpCount: 15,
+        totalFavCount: 20
+      },
+      statsSize: 'xs',
+      showNewLabel: true,
+      price: {
+        historyPriceDifference: 500,
+        historyPriceDifferencePerCent: 25
+      },
+      onFavoriteClick: this.onFavoriteClick
+    };
+
+    const xsProps = { ...basicProps, ...{ statsSize: 'xs' } };
+    const mdProps = { ...basicProps, ...{ statsSize: 'md', price: { historyPriceDifference: 499, historyPriceDifferencePerCent: 25 } } };
+
+    return (
+      <div style={CONTAINER_STYLES}>
+        <div style={COLUMN_STYLES}>
+          <div style={ROW_STYLES}>
+            <div className={styles.row}>
+              <div className={styles.col}>
+                <h2 className={styles.title}>XS Size</h2>
+                <div className={styles.row}>
+                  <div className={styles.col} style={{ width: '300px', maxWidth: '100%', margin: '0 auto' }}>
+                    <ImageWithStats src={SRC_HORIZONTAL} width='100%' ratioW={4} ratioH={3} {...xsProps} />
+                  </div>
+                </div>
+              </div>
+              <div className={styles.col}>
+                <h2 className={styles.title}>MD Size ({'price difference < 500'})</h2>
+                <div className={styles.row}>
+                  <div className={styles.col} style={{ width: '300px', maxWidth: '100%', margin: '0 auto' }}>
+                    <ImageWithStats src={SRC_HORIZONTAL} width='100%' ratioW={4} ratioH={3} {...mdProps} />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+storiesOf('_Common_UI', module)
+  .add('withStats', () => (
+    <ImageWithStatsContainer />
+  ));

package/source/components/_common/withStats/withStats.styl

@@ -150,10 +150,20 @@ $indent = 10px
         height: 18px
         font-size: 10px
         min-width: 30px
+      .badgeFull
+        display: none
+      .badgeShort
+        display: inline
 
 .badgeItem
   // hook class for compact-mode overrides
 
+.badgeFull
+  display: inline
+
+.badgeShort
+  display: none
+
 .priceDifferencePerCent
   margin-left: auto;
 

package/source/framework/DataTransformers.ts

@@ -69,6 +69,8 @@ export const transformDataForDecoratedCar = (car: any) => {
     bootCapacity: _get(car, 'sizeVolumeWeight.cargoCapacity', null),
     capacityLoad: _get(car, 'sizeVolumeWeight.completeCapacity', null),
     wltpCo2:  _get(car, 'environmentEmissions.wltpCo2', null),
+    wltpEnergyEfficiencyClass: _get(car, 'environmentEmissions.wltpEnergyEfficiencyClass', null),
+    wltpDischargedEnergyEfficiencyClass: _get(car, 'environmentEmissions.wltpDischargedEnergyEfficiencyClass', null),
     pluginHybrid: _get(car, 'engineData.pluginHybrid', null),
     wltpCombined: _get(car, 'consumption.wltpCombined', null),
     wltpPowerCombined: _get(car, 'consumption.wltpPowerCombined', null),

package/source/framework/constants/common.ts

@@ -1,8 +1,12 @@
-export const SITE_DOMAIN: string = 'https://www.auto.de';
+const _rawHost = typeof window !== 'undefined' ? window.location.host.replace('www.', '') : 'auto.de';
+const _isIP = /^\d+\.\d+\.\d+\.\d+(:\d+)?$/.test(_rawHost);
+const _imgBase = _isIP ? 'https://images.auto.de' : 'https://images.' + _rawHost;
 
-export const PLACEHOLDER_IMAGE: string = 'https://images.auto.de/noimage/';
-export const PLACEHOLDER_IMAGE_SMALL_URL: string = `https://images.auto.de/noimage/noimage/small`;
-export const PLACEHOLDER_IMAGE_LARGE_URL: string = `https://images.auto.de/noimage/noimage/large`;
+export const SITE_DOMAIN: string = typeof window !== 'undefined' ? 'https://' + window.location.host : 'https://www.auto.de';
+
+export const PLACEHOLDER_IMAGE: string = _imgBase + '/noimage/';
+export const PLACEHOLDER_IMAGE_SMALL_URL: string = _imgBase + '/noimage/small';
+export const PLACEHOLDER_IMAGE_LARGE_URL: string = _imgBase + '/noimage/large';
 
 export const QUOTES_SLIDES_TO_SHOW_DEFAULT = 3;
 

package/source/framework/types/types.ts

@@ -115,6 +115,7 @@ export interface IVehicleInfo {
   url?: string;
   target?: string;
   rel?: string;
+  leasing?: ILeasing;
 }
 
 export interface IVehicleTitleProps {

package/source/framework/vehiclesProps/decoratedLightProps.tsx

@@ -123,7 +123,10 @@ const getDecoratedLightProps = (
         const translatedUnit = t(`cbd:${consumptionUnit}`);
         const wltpConsumptionCombined = car.consumption.wltpCombined;
         const wltpCo2 = car.environmentEmissions.wltpCo2;
-        const consumptionPowerCombined = car.consumption.consumptionCombined;
+        const wltpEnergyEfficiencyClass = car.environmentEmissions.wltpEnergyEfficiencyClass;
+        const co2ClassValue = isPropDefined(wltpEnergyEfficiencyClass)
+          ? t('vehicleProps:value.co2Class', { class: t(`cbd:${wltpEnergyEfficiencyClass}`) })
+          : null;
 
         const co2 = car.environmentEmissions.co2;
 
@@ -143,41 +146,74 @@ const getDecoratedLightProps = (
           ? t('vehicleProps:value.consumptionCombined', { consumption: consumptionCombined.toLocaleString(language), unit: translatedUnit })
           : t('vehicleProps:value.na');
 
-        const consumptionPowerCombinedContent = t('vehicleProps:value.consumptionPowerCombined', { consumption: consumptionPowerCombined.toLocaleString(language), unit: translatedUnit });
-
         const co2Value = Number.isFinite(co2)
           ? t('vehicleProps:value.co2Combined', { co2: co2.toLocaleString(language) })
           : t('vehicleProps:value.na');
 
-        const hybridPlugin = car.engineData.hybridPlugin;
+        // ADV-88: "is a hybrid car" is now determined by fuel type (hybrid electric + diesel/petrol),
+        // not engineData.hybridPlugin.
+        const hybridPlugin = car.consumption.fuel === 'selector_fuel_hybridElectricalDiesel'
+          || car.consumption.fuel === 'selector_fuel_hybridElectricalPetrol';
         const wltpWeightedPowerCombined = car.consumption.wltpWeightedPowerCombined;
         const wltpWeightedCombined = car.consumption.wltpWeightedCombined;
 
         const wltpWeightedPowerCombinedContent = wltpWeightedPowerCombined ? t('vehicleProps:value.wltpWeightedPowerCombined', { consumption: wltpWeightedPowerCombined.toLocaleString(language), unit: translatedUnit }) : null;
         const wltpWeightedCombinedContent = wltpWeightedCombined ? t('vehicleProps:value.wltpWeightedCombined', { consumption: wltpWeightedCombined.toLocaleString(language), unit: translatedUnit }) : null;
 
+        // ADV-88: the weighted+discharged (entladen) consumption treatment is shown for ANY plug-in
+        // hybrid (new or used) — gated on hybridPlugin only, no condition check.
         if (hybridPlugin) {
+          if (wltpWeightedPowerCombinedContent && wltpWeightedCombinedContent) {
+            const dischargedCombined = Number.isFinite(wltpConsumptionCombined) ? wltpConsumptionCombined : 19.9;
+            const dischargedClass = car.environmentEmissions.wltpDischargedEnergyEfficiencyClass || 'selector_energyEfficiencyClass_g';
+            const weightedCombinedLabeled = t('vehicleProps:value.wltpWeightedCombinedLabel', { consumption: wltpWeightedCombined.toLocaleString(language), unit: translatedUnit });
+            const dischargedCombinedLabeled = t('vehicleProps:value.wltpDischargedCombinedLabel', { consumption: dischargedCombined.toLocaleString(language), unit: translatedUnit });
+            const co2WeightedContent = Number.isFinite(wltpCo2)
+              ? t('vehicleProps:value.wltpCo2WtdCombinedShort', { co2: wltpCo2.toLocaleString(language) })
+              : null;
+            const co2ClassWeighted = isPropDefined(wltpEnergyEfficiencyClass)
+              ? t('vehicleProps:value.co2ClassWeighted', { class: t(`cbd:${wltpEnergyEfficiencyClass}`) })
+              : null;
+            const co2ClassDischarged = t('vehicleProps:value.co2ClassDischarged', { class: t(`cbd:${dischargedClass}`) });
+            return <React.Fragment>
+                {`${wltpWeightedPowerCombinedContent} + `}
+                {`${weightedCombinedLabeled}, `}
+                {`${dischargedCombinedLabeled}`}
+                {co2WeightedContent && <>, {co2WeightedContent}</>}
+                {co2ClassWeighted && <>, {co2ClassWeighted}</>}
+                {<>, {co2ClassDischarged}</>}
+              </React.Fragment>
+          }
+
           if (wltpWeightedPowerCombinedContent && wltpWeightedCombinedContent && wltpCo2PluginValue) {
             return <React.Fragment>
                 {`${wltpWeightedPowerCombinedContent}, `}
                 {`${wltpWeightedCombinedContent}, `}
                 {wltpCo2PluginValue}
+                {co2ClassValue && <>, {co2ClassValue}</>}
               </React.Fragment>
           }
 
-          return Number.isFinite(consumptionCombined) || Number.isFinite(consumptionPowerCombined)
+          // ADV-88: only render the electric (kWh) line when the car actually has a combined
+          // power consumption — otherwise we printed "nullkWh/100km" for plug-ins lacking it.
+          const realPowerCombined = car.consumption.consumptionPowerCombined;
+          const powerCombinedLine = Number.isFinite(realPowerCombined)
+            ? t('vehicleProps:value.consumptionPowerCombined', { consumption: realPowerCombined.toLocaleString(language), unit: translatedUnit })
+            : null;
+          return Number.isFinite(consumptionCombined) || Number.isFinite(realPowerCombined)
             ? <React.Fragment>
-              {consumptionPowerCombined ? consumptionPowerCombinedContent : t('vehicleProps:value.na')} <br />{consumptionValue} <br /> {co2Value}
+              {powerCombinedLine && <>{powerCombinedLine} <br /></>}{consumptionValue} <br /> {co2Value}
+              {co2ClassValue && <>, {co2ClassValue}</>}
             </React.Fragment>
             : t('vehicleProps:value.na');
 
         }
 
         if (wltpConsumptionValue && wltpCo2Value) {
-          return <>{wltpConsumptionValue}, {wltpCo2Value}</>;
+          return <>{wltpConsumptionValue}, {wltpCo2Value}{co2ClassValue && <>, {co2ClassValue}</>}</>;
         }
 
-        return <>{consumptionValue} <br /> {co2Value}</>;
+        return <>{consumptionValue} <br /> {co2Value}{co2ClassValue && <>, {co2ClassValue}</>}</>;
       }
     },
     consumptionPowerCombinedAlternateView: {
@@ -191,6 +227,10 @@ const getDecoratedLightProps = (
         const co2 = car.environmentEmissions.co2;
         const wltpConsumptionPowerCombined = car.consumption.wltpPowerCombined;
         const wltpCo2 = car.environmentEmissions.wltpCo2;
+        const wltpEnergyEfficiencyClass = car.environmentEmissions.wltpEnergyEfficiencyClass;
+        const co2ClassValue = isPropDefined(wltpEnergyEfficiencyClass)
+          ? t('vehicleProps:value.co2Class', { class: t(`cbd:${wltpEnergyEfficiencyClass}`) })
+          : null;
 
         const wltpConsumptionValue = Number.isFinite(wltpConsumptionPowerCombined)
           ? t('vehicleProps:value.wltpPowerCombined', { consumption: wltpConsumptionPowerCombined.toLocaleString(language), unit: translatedUnit })
@@ -209,10 +249,10 @@ const getDecoratedLightProps = (
           : t('vehicleProps:value.na');
 
         if (wltpConsumptionValue && wltpCo2Value) {
-          return <>{wltpConsumptionValue}, {wltpCo2Value}</>;
+          return <>{wltpConsumptionValue}, {wltpCo2Value}{co2ClassValue && <>, {co2ClassValue}</>}</>;
         }
 
-        return <>{consumptionValue} <br /> {co2Value} </>;
+        return <>{consumptionValue} <br /> {co2Value} {co2ClassValue && <>, {co2ClassValue}</>}</>;
       }
     },
 
@@ -233,8 +273,12 @@ const getDecoratedLightProps = (
 
         const consumptionPowerCombinedContent = t('vehicleProps:value.consumptionPowerCombined', { consumption: consumptionPowerCombined.toLocaleString(language), unit: translatedUnit });
         const consumptionCombinedContent = t('vehicleProps:value.consumptionCombined', { consumption: consumptionCombined.toLocaleString(language), unit: translatedUnit });        
-        const wltpWeightedPowerCombinedContent = t('vehicleProps:value.wltpWeightedPowerCombined', { consumption: wltpWeightedPowerCombined.toLocaleString(language), unit: translatedUnit });
-        const wltpWeightedCombinedContent = t('vehicleProps:value.wltpWeightedCombined', { consumption: wltpWeightedCombined.toLocaleString(language), unit: translatedUnit });
+        const wltpWeightedPowerCombinedContent = Number.isFinite(wltpWeightedPowerCombined)
+          ? t('vehicleProps:value.wltpWeightedPowerCombined', { consumption: wltpWeightedPowerCombined.toLocaleString(language), unit: translatedUnit })
+          : null;
+        const wltpWeightedCombinedContent = Number.isFinite(wltpWeightedCombined)
+          ? t('vehicleProps:value.wltpWeightedCombined', { consumption: wltpWeightedCombined.toLocaleString(language), unit: translatedUnit })
+          : null;
         const wltpConsumptionPowerCombinedContent = wltpConsumptionPowerCombined
           ? t('vehicleProps:value.wltpPowerCombined', { consumption: wltpConsumptionPowerCombined.toLocaleString(language), unit: translatedUnit })
           : null;
@@ -245,6 +289,10 @@ const getDecoratedLightProps = (
 
         const co2 = car.environmentEmissions.co2;
         const wltpCo2 = car.environmentEmissions.wltpCo2;
+        const wltpEnergyEfficiencyClass = car.environmentEmissions.wltpEnergyEfficiencyClass;
+        const co2ClassValue = isPropDefined(wltpEnergyEfficiencyClass)
+          ? t('vehicleProps:value.co2Class', { class: t(`cbd:${wltpEnergyEfficiencyClass}`) })
+          : null;
 
         const co2Value = Number.isFinite(co2)
         ? t('vehicleProps:value.co2Combined', { co2: co2.toLocaleString(language) })
@@ -258,14 +306,42 @@ const getDecoratedLightProps = (
           ? t('vehicleProps:value.wltpCo2WtdCombined', { co2: wltpCo2.toLocaleString(language), unit: translatedUnit })
           : null;
 
-        const hybridPlugin = car.engineData.hybridPlugin;
+        // ADV-88: "is a hybrid car" is now determined by fuel type (hybrid electric + diesel/petrol),
+        // not engineData.hybridPlugin.
+        const hybridPlugin = car.consumption.fuel === 'selector_fuel_hybridElectricalDiesel'
+          || car.consumption.fuel === 'selector_fuel_hybridElectricalPetrol';
 
+        // ADV-88: the weighted+discharged (entladen) consumption treatment is shown for ANY plug-in
+        // hybrid (new or used) — gated on hybridPlugin only, no condition check.
         if (hybridPlugin) {
+          if (wltpWeightedPowerCombinedContent && wltpWeightedCombinedContent) {
+            const dischargedCombined = Number.isFinite(wltpConsumptionCombined) ? wltpConsumptionCombined : 19.9;
+            const dischargedClass = car.environmentEmissions.wltpDischargedEnergyEfficiencyClass || 'selector_energyEfficiencyClass_g';
+            const weightedCombinedLabeled = t('vehicleProps:value.wltpWeightedCombinedLabel', { consumption: wltpWeightedCombined.toLocaleString(language), unit: translatedUnit });
+            const dischargedCombinedLabeled = t('vehicleProps:value.wltpDischargedCombinedLabel', { consumption: dischargedCombined.toLocaleString(language), unit: translatedUnit });
+            const co2WeightedContent = Number.isFinite(wltpCo2)
+              ? t('vehicleProps:value.wltpCo2WtdCombinedShort', { co2: wltpCo2.toLocaleString(language) })
+              : null;
+            const co2ClassWeighted = isPropDefined(wltpEnergyEfficiencyClass)
+              ? t('vehicleProps:value.co2ClassWeighted', { class: t(`cbd:${wltpEnergyEfficiencyClass}`) })
+              : null;
+            const co2ClassDischarged = t('vehicleProps:value.co2ClassDischarged', { class: t(`cbd:${dischargedClass}`) });
+            return <React.Fragment>
+                {`${wltpWeightedPowerCombinedContent} + `}
+                {`${weightedCombinedLabeled}, `}
+                {`${dischargedCombinedLabeled}`}
+                {co2WeightedContent && <>, {co2WeightedContent}</>}
+                {co2ClassWeighted && <>, {co2ClassWeighted}</>}
+                {<>, {co2ClassDischarged}</>}
+              </React.Fragment>
+          }
+
           if (wltpWeightedPowerCombinedContent && wltpWeightedCombinedContent && wltpCo2PluginValue) {
             return <React.Fragment>
                 {`${wltpWeightedPowerCombinedContent}, `}
                 {`${wltpWeightedCombinedContent}, `}
                 {wltpCo2PluginValue}
+                {co2ClassValue && <>, {co2ClassValue}</>}
               </React.Fragment>
           }
         }
@@ -275,12 +351,14 @@ const getDecoratedLightProps = (
               {`${wltpConsumptionPowerCombinedContent}, `}
               {`${wltpWeightedCombinedContent}, `}
               {wltpCo2PluginValue}
+              {co2ClassValue && <>, {co2ClassValue}</>}
             </React.Fragment>
         }
 
         return Number.isFinite(consumptionCombined) || Number.isFinite(consumptionPowerCombined)
           ? <React.Fragment>
             {consumptionPowerCombined ? consumptionPowerCombinedContent : t('vehicleProps:value.na')} <br />{consumptionCombinedContent} <br /> {co2Value}
+            {co2ClassValue && <>, {co2ClassValue}</>}
           </React.Fragment>
           : t('vehicleProps:value.na');
       }
@@ -297,6 +375,10 @@ const getDecoratedLightProps = (
         const co2 = car.environmentEmissions.co2;
         const wltpConsumptionCombined = car.consumption.wltpCombined;
         const wltpCo2 = car.environmentEmissions.wltpCo2;
+        const wltpEnergyEfficiencyClass = car.environmentEmissions.wltpEnergyEfficiencyClass;
+        const co2ClassValue = isPropDefined(wltpEnergyEfficiencyClass)
+          ? t('vehicleProps:value.co2Class', { class: t(`cbd:${wltpEnergyEfficiencyClass}`) })
+          : null;
 
         const consumptionValue = Number.isFinite(consumptionHydrogenCombined)
           ? t('vehicleProps:value.consumptionGas', { consumption: consumptionHydrogenCombined.toLocaleString(language), unit: translatedUnit })
@@ -314,10 +396,10 @@ const getDecoratedLightProps = (
           : null;
 
         if (wltpConsumptionValue && wltpCo2Value) {
-          return <>{wltpConsumptionValue}, {wltpCo2Value}</>;
+          return <>{wltpConsumptionValue}, {wltpCo2Value}{co2ClassValue && <>, {co2ClassValue}</>}</>;
         }
 
-        return <>{consumptionValue} <br /> {co2Value}</>;
+        return <>{consumptionValue} <br /> {co2Value}{co2ClassValue && <>, {co2ClassValue}</>}</>;
       }
     },
     consumptionGasCombinedAlternateView: {
@@ -331,6 +413,10 @@ const getDecoratedLightProps = (
         const co2 = car.environmentEmissions.co2;
         const wltpConsumptionCombined = car.consumption.wltpCombined;
         const wltpCo2 = car.environmentEmissions.wltpCo2;
+        const wltpEnergyEfficiencyClass = car.environmentEmissions.wltpEnergyEfficiencyClass;
+        const co2ClassValue = isPropDefined(wltpEnergyEfficiencyClass)
+          ? t('vehicleProps:value.co2Class', { class: t(`cbd:${wltpEnergyEfficiencyClass}`) })
+          : null;
 
         const consumptionValue = Number.isFinite(consumptionGasCombined)
           ? t('vehicleProps:value.consumptionGas', { consumption: consumptionGasCombined.toLocaleString(language), unit: translatedUnit })
@@ -349,10 +435,10 @@ const getDecoratedLightProps = (
           : null;
 
         if (wltpConsumptionValue && wltpCo2Value) {
-          return <>{wltpConsumptionValue}, {wltpCo2Value}</>;
+          return <>{wltpConsumptionValue}, {wltpCo2Value}{co2ClassValue && <>, {co2ClassValue}</>}</>;
         }
 
-        return <>{consumptionValue} <br /> {co2Value}</>;
+        return <>{consumptionValue} <br /> {co2Value}{co2ClassValue && <>, {co2ClassValue}</>}</>;
       }
     },
     consumptionCombinedDealer: {
@@ -364,6 +450,7 @@ const getDecoratedLightProps = (
         const translatedUnit = t(`cbd:${consumptionUnit}`);
 
         const co2 = car.environmentEmissions.co2;
+        const wltpEnergyEfficiencyClass = car.environmentEmissions.wltpEnergyEfficiencyClass;
 
         const consumptionValue = Number.isFinite(consumptionCombined)
           ? t('vehicleProps:value.consumptionCombined', { consumption: consumptionCombined.toLocaleString(language), unit: translatedUnit })
@@ -373,7 +460,11 @@ const getDecoratedLightProps = (
           ? t('vehicleProps:value.co2Combined', { co2: co2.toLocaleString(language) })
           : t('vehicleProps:value.na');
 
-        return <>{consumptionValue} | {co2Value}</>;
+        const co2ClassValue = isPropDefined(wltpEnergyEfficiencyClass)
+          ? t('vehicleProps:value.co2Class', { class: t(`cbd:${wltpEnergyEfficiencyClass}`) })
+          : null;
+
+        return <>{consumptionValue} | {co2Value}{co2ClassValue ? <> | {co2ClassValue}</> : null}</>;
       }
     },
     gearbox: {