@bytebrand/fe-ui-core 4.4.0 → 4.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.4.0",
+  "version": "4.4.2",
   "description": "UI components for the auto.de project",
   "main": "index.ts",
   "module": "dist/common.js",

package/source/components/AccordionWidget/AccordionWidget.tsx

@@ -4,7 +4,7 @@ import { Visible } from 'react-grid-system';
 import _get from 'lodash/get';
 
 import { getPowerLabel } from '../../framework/vehiclesProps/decoratedProps';
-import { getVehicleDetails, getOverviewDetails, dimensionDetails, availAbilityDetails, colorAndMaterialDetails } from '../../framework/vehiclesProps/vehicleDetails';
+import { getVehicleDetails, getOverviewDetails, dimensionDetails, availAbilityDetails, colorAndMaterialDetails, getWltpValues } from '../../framework/vehiclesProps/vehicleDetails';
 
 import {
   IEquipmentProps,
@@ -64,11 +64,11 @@ class AccordionWidget extends React.Component<IAccardionSectionProps, IAccardion
           {propsList.map((prop, i) => {
             const { title, subTitle, value, isVisible = true, isLongTitle = false } = decoratedProps[prop];
             return isVisible && (
-              <div key={i} className={styles.tr}>
-                <div className={classnames(styles.th, isLongTitle ? styles.longTitle : '')}>
+              <div key={i} className={title ? styles.tr : ''}>
+                {title && <div className={classnames(styles.th, isLongTitle ? styles.longTitle : '')}>
                   <span className={styles.title}>{title}</span>
                   {subTitle ? <p className={styles.subTitle}>{subTitle}</p> : null}
-                </div>
+                </div>}
                 <div className={styles.td}>{value}</div>
               </div>
             );
@@ -136,6 +136,7 @@ class AccordionWidget extends React.Component<IAccardionSectionProps, IAccardion
     const { t, car: { consumption, engineData }, decoratedProps, carEquipment } = this.props;
     const engineProps = getVehicleDetails(consumption.fuel, 'engineData', engineData.hybridPlugin);
     const environmentProps = getVehicleDetails(consumption.fuel, 'environment', engineData.hybridPlugin);
+    const wltpProps = getWltpValues(consumption.fuel, engineData.hybridPlugin);
     const dimensionProps = dimensionDetails;
     const availAbilityProps = availAbilityDetails;
     const colorAndMaterialProps = colorAndMaterialDetails;
@@ -144,6 +145,7 @@ class AccordionWidget extends React.Component<IAccardionSectionProps, IAccardion
       <div className={styles.wrapGrid}>
         {this.renderTable(decoratedProps, engineProps, t('accordion.tableEngine'))}
         {this.renderTable(decoratedProps, dimensionProps, t('accordion.tableDimensions'))}
+        {this.renderTable(decoratedProps, wltpProps, t('accordion.tableEnvironmentWLTP'))}
         {this.renderTable(decoratedProps, environmentProps, t('accordion.tableEnvironment'))}
         {this.renderTable(decoratedProps, availAbilityProps, t('accordion.tableAvailability'))}
         {this.renderTable(decoratedProps, colorAndMaterialProps, t('accordion.tableMaterial'))}

package/source/components/VehicleDetailedSidebar/VehicleDetailedSidebar.tsx

@@ -1,7 +1,6 @@
-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 { isMobileOnly } from 'react-device-detect';
 import PriceContent from './partials/PriceContent';
 import Title from './partials/Title';
 import Price from './partials/Price';
@@ -13,11 +12,6 @@ import DealerInfo from '../Alternative/DealerInfo';
 import { Skeleton } from '@mui/material';
 
 declare global {
-  // interface Window {
-  //   Trustpilot?: {
-  //     loadFromElement: (element: HTMLElement, autoload?: boolean) => void;
-  //   };
-  // }
 }
 
 const VehicleDetailedSidebar: FunctionComponent<IVehicleDetailedSidebarProps> = (props) => {
@@ -34,12 +28,10 @@ const VehicleDetailedSidebar: FunctionComponent<IVehicleDetailedSidebarProps> =
     setActiveTab,
     carLoaded,
     originUrl,
-    // isAlternative,
     infoSections,
     onCurrentSalesPriceChange,
     isFetching
   } = props;
-  // const ref = useRef(null);
   const [offerBlockOpen, setOfferBlockOpen] = useState(false);
   const onAdjustRateClick = () => setOfferBlockOpen(!offerBlockOpen);
 
@@ -112,12 +104,6 @@ const VehicleDetailedSidebar: FunctionComponent<IVehicleDetailedSidebarProps> =
     }
   ];
 
-  // useEffect(() => {
-  //   if (window.Trustpilot) {
-  //     window.Trustpilot.loadFromElement(ref.current, true);
-  //   }
-  // }, []);
-
   useEffect(() => {
     const getlocalStorageActiveTabCDP = localStorage.getItem('activeTabCDP');
     if (!getlocalStorageActiveTabCDP) return;
@@ -151,26 +137,7 @@ const VehicleDetailedSidebar: FunctionComponent<IVehicleDetailedSidebarProps> =
           <Title {...titleProps} />
           <Price {...priceProps} />
           <Price {...priceProps} isSticky={true} />
-          {/* {isMobileOnly && (
-            <div
-              ref={ref}
-              data-locale='de-DE'
-              data-template-id='5419b6a8b0d04a076446a9ad'
-              data-businessunit-id='46edfd1c0000640005017f22'
-              data-style-height='32px'
-              data-style-width='100%'
-              data-theme='light'
-              data-style-alignment='center'
-            >
-              <a
-                href='https://de.trustpilot.com/review/www.auto.de'
-                target='_blank'
-                rel='noopener noreferrer'
-              >
-                Trustpilot
-              </a>
-            </div>
-          )} */}
+          {}
           {props.children}
         </div> : <div className={styles.skeletonInfoContainer}><Skeleton /></div>
       }

package/source/components/_common/Co2Widget/CO2Efficiency.styl

@@ -17,7 +17,7 @@
 .classContainer
   position: relative
   width 100%
-  height 10px
+  height 14px
 
 .classContainer:not(:last-child)
   margin-bottom: 3px
@@ -25,7 +25,7 @@
 .class
   position: relative
   display: block
-  height 10px
+  height 14px
   color white
   font-size 7px
   line-height 10px
@@ -41,9 +41,28 @@
   width 0
   height 0
   border-style solid
-  border-width 5px 0 5px 5px
+  border-width 8px 0 5px 5px
   border-color transparent
 
+.title
+  font-size: 15px
+  font-weight: 700
+  color: #000000DE
+
+.subTitle
+  font-size: 12px
+  margin: 5px 0 24px
+  font-weight: 400
+  color: #000000DE
+
+.divider
+  position: absolute
+  width: 1px
+  background-color: black
+  top: 0
+  left: 161px
+  height: 127px
+
 .activeClass
   @extends .class
   position: absolute
@@ -51,6 +70,8 @@
   right -20px
   padding 0 5px
   background-color $grey-3
+  display: flex
+  align-items: center
 .activeClass::before
   content ''
   position absolute
@@ -59,9 +80,54 @@
   width 0
   height 0
   border-style solid
-  border-width 5px 5px 5px 0
+  border-width 7px 5px 6px 0
   border-color transparent $grey-3 transparent transparent
 
+.secondActiveClass
+  @extends .class
+  position: absolute
+  top: 0
+  right -60px
+  padding 0 5px
+  background-color $grey-3
+  display: flex
+  align-items: center
+.secondActiveClass::before
+  content ''
+  position absolute
+  top 0
+  left -5px
+  width 0
+  height 0
+  border-style solid
+  border-width 7px 5px 6px 0
+  border-color transparent $grey-3 transparent transparent
+
+.levelsContainer
+  position relative
+
+.container
+  position relative
+
+.levelTitle
+  top: -21px;
+  left: 78px;
+  position: absolute;
+  width: 74px;
+  font-size: 9px;
+  text-align: right;
+
+.wltpLevelTitle
+  width: 80px;
+  top: -21px
+  left: 172px
+  position: absolute
+  font-size: 9px
+
+.wltpLevelsContainer
+  padding: 13.5px 7.5px
+  border-top: 1px solid #e8e8e8;
+
 :global
   .auto_de_selector_energyEfficiencyClass_appp
     background-color: #1D9453

package/source/components/_common/Co2Widget/CO2Efficiency.tsx

@@ -6,8 +6,14 @@ import styles from './CO2Efficiency.styl';
 
 interface ICO2EfficiencyProps {
   level: string;
+  wltpLevel?: string;
   className?: string;
+  title?: string;
+  subTitle?: string;
   t?: (key: string, options?: object) => string;
+  levelTitle?: string;
+  wltpLevelTitle?: string;
+  hybridPlugin?: boolean;
 }
 
 // TODO: pass efficiency classes as a list into props.
@@ -18,11 +24,12 @@ class CO2Efficiency extends React.Component<ICO2EfficiencyProps> {
   };
 
   renderLevels = () => {
-    const { level, t } = this.props;
+    const { level, wltpLevel, t, hybridPlugin } = this.props;
 
     return selectors.energyEfficiencyClass.map((key: string, i: number) => {
       const width: string = `${(i + 1) * 10 + 10}px`; // tslint:disable-line
       const isActive: boolean = key === level;
+      const isWltpActive: boolean = key === wltpLevel;
       const className: string = classnames(styles.class, `auto_de_${key}`);
       const translatedKey: string = t(`cbd:${key}`);
 
@@ -32,15 +39,30 @@ class CO2Efficiency extends React.Component<ICO2EfficiencyProps> {
             {translatedKey}
           </span>
           {isActive && <span className={styles.activeClass}>{translatedKey}</span>}
+          {isWltpActive && hybridPlugin && <span className={styles.secondActiveClass}>{translatedKey}</span>}
         </div>
       ) : false;
-    });
-  };
+    })}
 
   render(): JSX.Element {
+    const { title, subTitle, wltpLevel, levelTitle, wltpLevelTitle, hybridPlugin } = this.props;
+    const wltpLevelsContainerClassNames = classnames(
+      { [styles.wltpLevelsContainer]: wltpLevel }
+    )
     return (
-      <div className={styles.co2Efficiency}>
-        {this.renderLevels()}
+      <div className={wltpLevelsContainerClassNames}>
+        {wltpLevel && <div className={styles.title}>{title}</div>}
+        {wltpLevel && <div className={styles.subTitle}>{subTitle}</div>}
+        <div className={styles.container}>
+          {wltpLevel && hybridPlugin && <div className={styles.levelTitle}>{levelTitle}</div>}
+          {wltpLevel && hybridPlugin && <div className={styles.wltpLevelTitle}>{wltpLevelTitle}</div>}
+        </div>
+        <div className={styles.levelsContainer}>
+          <div className={styles.co2Efficiency}>
+            {this.renderLevels()}
+          </div>
+          {wltpLevel && hybridPlugin && <div className={styles.divider}></div>}
+        </div>
       </div>
     );
   }

package/source/framework/vehiclesProps/decoratedProps.tsx

@@ -609,9 +609,10 @@ const getDecoratedProps = (
       icon: 'fuelConsumption',
       title: t('vehicleProps:title.сonsumptionCombined'),
       get value() {
-        const consumptionCombined = car.consumption.consumptionCombined;
+        const consumptionCombined = car.consumption.wltpCombined || car.consumption.consumptionCombined;
         const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
         const translatedUnit = t(`cbd:${consumptionUnit}`);
+        console.log('qqqqq consumptionCombined =====', t('vehicleProps:value.consumption', { consumption: consumptionCombined.toLocaleString(language), unit: translatedUnit }));
         return Number.isFinite(consumptionCombined)
           ? t('vehicleProps:value.consumption', { consumption: consumptionCombined.toLocaleString(language), unit: translatedUnit })
           : t('vehicleProps:value.na');
@@ -1048,6 +1049,220 @@ const getDecoratedProps = (
             return t('vehicleProps:value.countryVersionName', { countryName });
         }
       }
+    },
+    wltpCo2: {
+      title: t('vehicleProps:title.wltpCo2'),
+      get value() {
+        const c02 = car.environmentEmissions.wltpCo2;
+        return Number.isFinite(c02)
+          ? t('vehicleProps:value.co2', { co2: c02.toLocaleString(language) })
+          : t('vehicleProps:value.na');
+      }
+    },
+    wltpCo2Discharged: {
+      title: t('vehicleProps:title.wltpCo2Discharged'),
+      get value() {
+        const wltpCo2 = car.environmentEmissions.wltpCo2;
+        return Number.isFinite(wltpCo2)
+          ? t('vehicleProps:value.co2', { co2: wltpCo2.toLocaleString(language) })
+          : t('vehicleProps:value.na');
+      }
+    },
+    wltpEnergyEfficiencyClass: {
+      // title: t('vehicleProps:title.wltpEnergyEfficiencyClass'),
+      // subTitle: t('vehicleProps:title.subTitle'),
+      get value() {
+        const level = car.environmentEmissions.wltpEnergyEfficiencyClass;
+        const wltpLevel = car.environmentEmissions.wltpDischargedEnergyEfficiencyClass;
+        const { hybridPlugin } = car.engineData;
+        const subtitle = hybridPlugin ? t('vehicleProps:title.wltpCO2SubTitle') : t('vehicleProps:title.wltpCO2SubTitleComb');
+        return isPropDefined(level) ? 
+          <CO2Efficiency
+            title={t('vehicleProps:title.wltpCO2Title')}
+            subTitle={subtitle}
+            wltpLevel={wltpLevel}
+            level={level}
+            t={t}
+            levelTitle={t('vehicleProps:title.wltpCO2WidgetComb')}
+            wltpLevelTitle={t('vehicleProps:title.wltpCO2WidgetDischargedBattery')}
+            hybridPlugin={hybridPlugin}
+          /> : t('vehicleProps:value.na');
+      }
+    },
+    wltpDischargedEnergyEfficiencyClass: {
+      title: t('vehicleProps:title.wltpDischargedEnergyEfficiencyClass'),
+      subTitle: t('vehicleProps:title.subTitle'),
+      get value() {
+        const level = car.environmentEmissions.wltpDischargedEnergyEfficiencyClass;
+        return isPropDefined(level) ? <CO2Efficiency level={level} t={t} /> : t('vehicleProps:value.na');
+      }
+    },
+    wltpRange: {
+      title: t('vehicleProps:title.wltpRange'),
+      get value() {
+        const wltpRange = car.battery && car.battery.wltpRange;
+        return Number.isFinite(wltpRange)
+          ? t('vehicleProps:value.batteryRangeElectric', { consumption: wltpRange.toLocaleString(language) })
+          : t('vehicleProps:value.na');
+      }
+    },
+    wltpTotalRange: {
+      title: t('vehicleProps:title.wltpTotalRange'),
+      get value() {
+        const wltpTotalRange = car.battery && car.battery.wltpTotalRange;
+        return Number.isFinite(wltpTotalRange)
+          ? t('vehicleProps:value.batteryRangeElectric', { consumption: wltpTotalRange.toLocaleString(language) })
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    wltpRangeCity: {
+      title: t('vehicleProps:title.wltpRangeCity'),
+      get value() {
+        const wltpRangeCity = car.battery && car.battery.wltpRangeCity;
+        return Number.isFinite(wltpRangeCity)
+          ? t('vehicleProps:value.batteryRangeElectric', { consumption: wltpRangeCity.toLocaleString(language) })
+          : t('vehicleProps:value.na');
+      }
+    },
+    wltpTotalRangeCity: {
+      title: t('vehicleProps:title.wltpTotalRangeCity'),
+      get value() {
+        const wltpTotalRangeCity = car.battery && car.battery.wltpTotalRangeCity;
+        return Number.isFinite(wltpTotalRangeCity)
+          ? t('vehicleProps:value.batteryRangeElectric', { consumption: wltpTotalRangeCity.toLocaleString(language) })
+          : t('vehicleProps:value.na');
+      }
+    },
+    wltpWeightedCombined: {
+      title: t('vehicleProps:title.wltpWeightedCombined'),
+      get value() {
+        const wltpWeightedCombined = car.consumption && car.consumption.wltpTotalRangeCity;
+        return Number.isFinite(wltpWeightedCombined)
+          ? t('vehicleProps:value.consumptionCombined', { consumption: wltpWeightedCombined.toLocaleString(language) })
+          : t('vehicleProps:value.na');
+      }
+    },
+    wltpCombined: {
+      title: t('vehicleProps:title.wltpCombined'),
+      get value() {
+        const wltpCombined = car.consumption.wltpCombined;
+        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
+        const translatedUnit = t(`cbd:${consumptionUnit}`);
+        return Number.isFinite(wltpCombined)
+          ? t('vehicleProps:value.consumption', { consumption: wltpCombined.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+      }
+    },
+    wltpSlow: {
+      title: t('vehicleProps:title.wltpSlow'),
+      get value() {
+        const wltpSlow = car.consumption.wltpSlow;
+        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
+        const translatedUnit = t(`cbd:${consumptionUnit}`);
+        return Number.isFinite(wltpSlow)
+          ? t('vehicleProps:value.consumption', { consumption: wltpSlow.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+      }
+    },
+    wltpMedium: {
+      title: t('vehicleProps:title.wltpMedium'),
+      get value() {
+        const wltpMedium = car.consumption.wltpMedium;
+        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
+        const translatedUnit = t(`cbd:${consumptionUnit}`);
+        return Number.isFinite(wltpMedium)
+          ? t('vehicleProps:value.consumption', { consumption: wltpMedium.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+      }
+    },
+    wltpFast: {
+      title: t('vehicleProps:title.wltpFast'),
+      get value() {
+        const wltpFast = car.consumption.wltpFast;
+        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
+        const translatedUnit = t(`cbd:${consumptionUnit}`);
+        return Number.isFinite(wltpFast)
+          ? t('vehicleProps:value.consumption', { consumption: wltpFast.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+      }
+    },
+    wltpVeryFast: {
+      title: t('vehicleProps:title.wltpVeryFast'),
+      get value() {
+        const wltpVeryFast = car.consumption.wltpVeryFast;
+        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
+        const translatedUnit = t(`cbd:${consumptionUnit}`);
+        return Number.isFinite(wltpVeryFast)
+          ? t('vehicleProps:value.consumption', { consumption: wltpVeryFast.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+      }
+    },
+    wltpWeightedPowerCombined: {
+      title: t('vehicleProps:title.wltpWeightedPowerCombined'),
+      get value() {
+        const wltpWeightedPowerCombined = car.consumption.wltpWeightedPowerCombined;
+        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
+        const translatedUnit = t(`cbd:${consumptionUnit}`);
+        return Number.isFinite(wltpWeightedPowerCombined)
+          ? t('vehicleProps:value.consumptionPower', { consumption: wltpWeightedPowerCombined.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+      }
+    },
+    wltpPowerCombined: {
+      title: t('vehicleProps:title.wltpPowerCombined'),
+      get value() {
+        const wltpPowerCombined = car.consumption.wltpPowerCombined;
+        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
+        const translatedUnit = t(`cbd:${consumptionUnit}`);
+        return Number.isFinite(wltpPowerCombined)
+          ? t('vehicleProps:value.consumptionPower', { consumption: wltpPowerCombined.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+      }
+    },
+    wltpPowerSlow: {
+      title: t('vehicleProps:title.wltpPowerSlow'),
+      get value() {
+        const wltpPowerSlow = car.consumption.wltpPowerSlow;
+        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
+        const translatedUnit = t(`cbd:${consumptionUnit}`);
+        return Number.isFinite(wltpPowerSlow)
+          ? t('vehicleProps:value.consumptionPower', { consumption: wltpPowerSlow.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+      }
+    },
+    wltpPowerMedium: {
+      title: t('vehicleProps:title.wltpPowerMedium'),
+      get value() {
+        const wltpPowerMedium = car.consumption.wltpPowerMedium;
+        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
+        const translatedUnit = t(`cbd:${consumptionUnit}`);
+        return Number.isFinite(wltpPowerMedium)
+          ? t('vehicleProps:value.consumptionPower', { consumption: wltpPowerMedium.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+      }
+    },
+    wltpPowerFast: {
+      title: t('vehicleProps:title.wltpPowerFast'),
+      get value() {
+        const wltpPowerFast = car.consumption.wltpPowerFast;
+        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
+        const translatedUnit = t(`cbd:${consumptionUnit}`);
+        return Number.isFinite(wltpPowerFast)
+          ? t('vehicleProps:value.consumptionPower', { consumption: wltpPowerFast.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+      }
+    },
+    wltpPowerVeryFast: {
+      title: t('vehicleProps:title.wltpPowerVeryFast'),
+      get value() {
+        const wltpPowerVeryFast = car.consumption.wltpPowerVeryFast;
+        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
+        const translatedUnit = t(`cbd:${consumptionUnit}`);
+        return Number.isFinite(wltpPowerVeryFast)
+          ? t('vehicleProps:value.consumptionPower', { consumption: wltpPowerVeryFast.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+      }
     }
   };
   return props;

package/source/framework/vehiclesProps/vehicleDetails.ts

@@ -40,6 +40,13 @@ const consumptionPowerCombinedAlternateView = ['consumptionPowerCombinedAlternat
 const consumptionCombinedHybridAlternateView = ['consumptionCombinedHybridAlternateView'];
 const consumptionGasCombinedAlternateView = ['consumptionGasCombinedAlternateView'];
 const consumptionHydrogenCombinedAlternateView = ['consumptionHydrogenCombinedAlternateView'];
+const environmentElectroWLTP = ['wltpPowerCombined', 'wltpCo2', 'wltpRange', 'wltpPowerSlow', 'wltpPowerMedium',
+  'wltpPowerFast', 'wltpPowerVeryFast', 'wltpEnergyEfficiencyClass'];
+const environmentPluginHybridWLTP = ['wltpWeightedCombined', 'wltpTotalRange', 'wltpWeightedPowerCombined', 'wltpCo2',
+  'wltpCo2Discharged', 'wltpPowerSlow', 'wltpPowerMedium', 'wltpPowerFast', 'wltpPowerCombined', 'wltpPowerVeryFast',
+  'wltpCombined', 'wltpSlow', 'wltpMedium', 'wltpFast', 'wltpVeryFast', 'wltpEnergyEfficiencyClass', 'wltpDischargedEnergyEfficiencyClass'];
+const environmentElectroBenzinDieselEthanolHybridWLTP = ['wltpCombined', 'wltpCo2', 'wltpSlow', 'wltpMedium', 'wltpFast', 'wltpVeryFast', 'wltpEnergyEfficiencyClass'];
+const environmentHydrogenWLTP = ['wltpCombined', 'wltpCo2', 'wltpSlow', 'wltpMedium', 'wltpFast', 'wltpVeryFast', 'wltpEnergyEfficiencyClass'];
 
 export const engineDetails: IEngineDetails = [
   {
@@ -67,6 +74,9 @@ export const engineDetails: IEngineDetails = [
     ],
     consumptionCombined: [
       ...consumptionPowerCombinedAlternateView
+    ],
+    wltp: [
+      ...environmentElectroWLTP
     ]
   },
   {
@@ -108,6 +118,9 @@ export const engineDetails: IEngineDetails = [
     ],
     consumptionCombined: [
       ...consumptionCombinedAlternateView
+    ],
+    wltp: [
+      ...environmentElectroBenzinDieselEthanolHybridWLTP
     ]
   },
   {
@@ -149,6 +162,9 @@ export const engineDetails: IEngineDetails = [
     ],
     consumptionCombined: [
       ...consumptionCombinedAlternateView
+    ],
+    wltp: [
+      ...environmentElectroBenzinDieselEthanolHybridWLTP
     ]
   },
   {
@@ -175,6 +191,9 @@ export const engineDetails: IEngineDetails = [
     ],
     consumptionCombined: [
       ...consumptionHydrogenCombinedAlternateView
+    ],
+    wltp: [
+      ...environmentHydrogenWLTP
     ]
   },
   {
@@ -203,6 +222,9 @@ export const engineDetails: IEngineDetails = [
     ],
     consumptionCombined: [
       ...consumptionGasCombinedAlternateView
+    ],
+    wltp: [
+      ...environmentHydrogenWLTP
     ]
   },
   {
@@ -231,10 +253,70 @@ export const engineDetails: IEngineDetails = [
     ],
     consumptionCombined: [
       ...consumptionGasCombinedAlternateView
+    ],
+    wltp: [
+      ...environmentHydrogenWLTP
     ]
   }
 ];
 
+export const wltpDetails = [
+  {
+    selector: 'selector_fuel_diesel',
+    wltp: [
+      ...environmentElectroBenzinDieselEthanolHybridWLTP
+    ]
+  },
+  {
+    selector: 'selector_fuel_electrical',
+    wltp: [
+      ...environmentElectroWLTP
+    ]
+  },
+  {
+    selector: 'selector_fuel_electrical',
+    wltp: [
+      ...environmentElectroWLTP
+    ]
+  },
+  {
+    selector: 'selector_fuel_hybridElectricalPetrol',
+    wltp: [
+      ...environmentElectroBenzinDieselEthanolHybridWLTP
+    ]
+  },
+  {
+    selector: 'selector_fuel_naturalGas',
+    wltp: [
+      ...environmentHydrogenWLTP
+    ]
+  },
+  {
+    selector: 'selector_fuel_carGas',
+    wltp: [
+      ...environmentHydrogenWLTP
+    ]
+  },
+  {
+    selector: 'selector_fuel_petrol',
+    wltp: [
+      ...environmentElectroBenzinDieselEthanolHybridWLTP
+    ]
+  },
+  {
+    selector: 'selector_fuel_ethanol',
+    wltp: [
+      ...environmentElectroBenzinDieselEthanolHybridWLTP
+    ]
+  },
+  {
+    selector: 'selector_fuel_hydrogen',
+    wltp: [
+      ...environmentHydrogenWLTP
+    ]
+  }
+]
+
 export const dimensionDetails = [
   'category', 'length', 'width', 'height', 'base', 'capacityLoad', 'bootCapacity',
   'doors', 'seats', 'tare', 'maximumWeight', 'trailerWeightBraked', 'trailerWeightUnbraked'
@@ -263,6 +345,15 @@ export const getVehicleDetails = (selector: any, dataType: string, hybridPlugin:
   }, []); //tslint:disable-line
 };
 
+export const getWltpValues = (selector: any, hybridPlugin: any = false) => {
+  if (hybridPlugin) {
+    return [...environmentPluginHybridWLTP];
+  }
+  return _filter(wltpDetails, key => key.selector === selector).reduce((_selector, item) => {
+    return item.wltp;
+  }, []);
+};
+
 export const getOverviewDetails = (selector: any) => {
   if (Object.keys(filtered(selector)).length === 0) {
     return [...mainPropertiesList, ...consumptionCombinedAlternateView];

package/source/locales/data.ts

@@ -169,7 +169,30 @@ export const vehicleProps = (car?: any, isOfferAvailable: boolean = true) => {
         'financingDescription': 'Bei der Finanzierung zahlen Sie lediglich die Zinsen des Darlehens und einen geringen Tilgungsanteil. Zum Vertragsende können Sie entscheiden, ob Sie den Restbetrag ablösen oder weiter finanzieren wollen.',
         'leasingDescription': 'Beim Leasing zahlen Sie lediglich die Zinsen des Darlehens und einen geringen Tilgungsanteil. Zum Vertragsende geben Sie das Auto einfach wieder zurück.',
         'aboDescription': 'Bei diesem Auto-Abo ist bereits alles an Bord. Teil- und Vollkasko sowie Haftpflicht sind inklusive, ebenso wie Wartungs- und Verschleißreparaturen. Sie zahlen also nur Ihre Rate und Kraftstoff.',
-        'buyDescription': 'Nach Kaufabschluss haben Sie die sofortigen Eigentumsrechte und keine Finanzierungskosten. Als Eigentümer können Sie Ihr Fahrzeug zu eigenen Konditionen weiter verkaufen und Änderungen vornehmen.'
+        'buyDescription': 'Nach Kaufabschluss haben Sie die sofortigen Eigentumsrechte und keine Finanzierungskosten. Als Eigentümer können Sie Ihr Fahrzeug zu eigenen Konditionen weiter verkaufen und Änderungen vornehmen.',
+        'wltpCo2': 'CO2-Ausstoß (WLTP, komb.)',
+        'wltpCo2Discharged': 'CO2-Ausstoß (WLTP, bei entladener Batterie)',
+        'wltpEnergyEfficiencyClass': 'CO2-Klasse *Auf der Grundlage der CO-2 Emissionen (kombiniert)',
+        'wltpDischargedEnergyEfficiencyClass': 'CO2-Klasse *Auf der Grundlage der CO-2 Emissionen (bei entladener Batterie)',
+        'wltpTotalRange': 'Reichweite (EAER) (WLTP, rein elektrisch)',
+        'wltpRange': 'Reichweite (WLTP, rein elektrisch)',
+        'wltpWeightedCombined': 'Verbrauch (WLTP, gew., komb.)',
+        'wltpCombined': 'Verbrauch (WLTP, komb.)',
+        'wltpSlow': 'Verbrauch Innenstadt (WLTP)',
+        'wltpMedium': 'Verbrauch Stadtrand(WLTP)',
+        'wltpFast': 'Verbrauch Landstraße(WLTP)',
+        'wltpVeryFast': 'Verbrauch Autobahn (WLTP)',
+        'wltpWeightedPowerCombined': 'Electricity consumption (WLTP, wtd. comb.)',
+        'wltpPowerCombined': 'Stromverbrauch (WLTP, gew., komb.)',
+        'wltpPowerSlow': 'Stromverbrauch Innenstadt(WLTP)',
+        'wltpPowerMedium': 'Stromverbrauch Stadtrand(WLTP)',
+        'wltpPowerFast': 'Stromverbrauch Landstraße(WLTP)',
+        'wltpPowerVeryFast': 'Stromverbrauch Autobahn (WLTP)',
+        'wltpCO2Title': 'CO2-Klasse',
+        'wltpCO2SubTitle': '*Auf der Grundlage der CO-2 Emissionen',
+        'wltpCO2WidgetDischargedBattery': 'bei entladener Batterie',
+        'wltpCO2WidgetComb': 'gewichtet kombiniert',
+        'wltpCO2SubTitleComb': '*Auf der Grundlage der CO-2 Emissionen (kombiniert)'
       }
     },
     sidebar: {