@bytebrand/fe-ui-core 4.6.4 → 4.6.6

package/package.json

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

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

@@ -72,7 +72,9 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
       consumptionCombined: consumption.consumptionCombined,
       consumptionPowerCombined: consumption.consumptionPowerCombined,
       wltpCombined: consumption.wltpCombined,
-      wltpPowerCombined: consumption.wltpPowerCombined
+      wltpPowerCombined: consumption.wltpPowerCombined,
+      wltpWeightedPowerCombined: consumption.wltpWeightedPowerCombined,
+      wltpWeightedCombined: consumption.wltpWeightedCombined,
     },
   };
 

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

@@ -178,3 +178,42 @@
     background-color: #AC0A13
   .auto_de_selector_energyEfficiencyClass_g::after
     border-left-color: #AC0A13
+
+
+
+
+:global
+  .auto_de_selector_energyEfficiencyClass_a_wltp
+    background-color: #4AA35A
+  .auto_de_selector_energyEfficiencyClass_a_wltp::after
+    border-left-color: #4AA35A
+
+  .auto_de_selector_energyEfficiencyClass_b_wltp
+    background-color: #6EBB4D
+  .auto_de_selector_energyEfficiencyClass_b_wltp::after
+    border-left-color: #6EBB4D
+
+  .auto_de_selector_energyEfficiencyClass_c_wltp
+    background-color: #BDDB4A
+  .auto_de_selector_energyEfficiencyClass_c_wltp::after
+    border-left-color: #BDDB4A
+
+  .auto_de_selector_energyEfficiencyClass_d_wltp
+    background-color: #FBF151
+  .auto_de_selector_energyEfficiencyClass_d_wltp::after
+    border-left-color: #FBF151
+
+  .auto_de_selector_energyEfficiencyClass_e_wltp
+    background-color: #EFB741
+  .auto_de_selector_energyEfficiencyClass_e_wltp::after
+    border-left-color: #EFB741
+
+  .auto_de_selector_energyEfficiencyClass_f_wltp
+    background-color: #E26733
+  .auto_de_selector_energyEfficiencyClass_f_wltp::after
+    border-left-color: #E26733
+
+  .auto_de_selector_energyEfficiencyClass_g_wltp
+    background-color: #DB3733
+  .auto_de_selector_energyEfficiencyClass_g_wltp::after
+    border-left-color: #DB3733

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import classnames from 'classnames';
 import { selectors } from '@bytebrand/car-schema-selectors';
+import { WLTP_ENERGY_EFFICIENCY_CLASS } from '../../../framework/constants';
 
 import styles from './CO2Efficiency.styl';
 
@@ -14,6 +15,7 @@ interface ICO2EfficiencyProps {
   levelTitle?: string;
   wltpLevelTitle?: string;
   hybridPlugin?: boolean;
+  isWltp?: boolean;
 }
 
 // TODO: pass efficiency classes as a list into props.
@@ -24,7 +26,27 @@ class CO2Efficiency extends React.Component<ICO2EfficiencyProps> {
   };
 
   renderLevels = () => {
-    const { level, wltpLevel, t, hybridPlugin } = this.props;
+    const { level, wltpLevel, t, hybridPlugin, isWltp = false } = this.props;
+
+    if (isWltp) {
+      return WLTP_ENERGY_EFFICIENCY_CLASS.map((key: string, i: number) => {
+        const width: string = `${(i + 1) * 10 + 13}px`; // tslint:disable-line
+        const isActive: boolean = key === level;
+        const isWltpActive: boolean = key === wltpLevel;
+        const className: string = classnames(styles.class, `auto_de_${key}_wltp`);
+        const translatedKey: string = t(`cbd:${key}`);
+  
+        return key !== 'selector_unknown' ? (
+          <div key={key} className={styles.classContainer}>
+            <span className={className} style={{ width }}>
+              {translatedKey}
+            </span>
+            {isActive && <span className={styles.activeClass}>{translatedKey}</span>}
+            {isWltpActive && hybridPlugin && <span className={styles.secondActiveClass}>{translatedKey}</span>}
+          </div>
+        ) : false;
+      });
+    };
 
     return selectors.energyEfficiencyClass.map((key: string, i: number) => {
       const width: string = `${(i + 1) * 10 + 10}px`; // tslint:disable-line

package/source/framework/constants.ts

@@ -54,6 +54,17 @@ export const DELIVERY_PERIODS_EXTRA = DELIVERY_PERIODS.map((val: string) => ({
   value: val
 }));
 
+
+export const WLTP_ENERGY_EFFICIENCY_CLASS = [
+  "selector_energyEfficiencyClass_a",
+  "selector_energyEfficiencyClass_b",
+  "selector_energyEfficiencyClass_c",
+  "selector_energyEfficiencyClass_d",
+  "selector_energyEfficiencyClass_e",
+  "selector_energyEfficiencyClass_f",
+  "selector_energyEfficiencyClass_g"
+];
+
 export const offers = [
   {
     name: 'financing',

package/source/framework/vehiclesProps/decoratedLightProps.tsx

@@ -125,7 +125,7 @@ const getDecoratedLightProps = (
           : null;
 
         const wltpCo2Value = Number.isFinite(wltpCo2)
-          ? t('vehicleProps:value.wltpCo2Combined', { co2: wltpCo2.toLocaleString(language) })
+          ? t('vehicleProps:value.wltpCo2WtdCombined', { co2: wltpCo2.toLocaleString(language) })
           : null;
 
         const consumptionValue = Number.isFinite(consumptionCombined)
@@ -136,6 +136,20 @@ const getDecoratedLightProps = (
           ? t('vehicleProps:value.co2Combined', { co2: co2.toLocaleString(language) })
           : t('vehicleProps:value.na');
 
+        const hybridPlugin = car.engineData.hybridPlugin;
+        const wltpWeightedPowerCombined = car.consumption.wltpWeightedPowerCombined;
+        const wltpWeightedCombined = car.consumption.wltpWeightedCombined;
+
+        const wltpWeightedPowerCombinedContent = wltpWeightedPowerCombined ? t('vehicleProps:value.consumptionPowerCombined', { consumption: wltpWeightedPowerCombined.toLocaleString(language), unit: translatedUnit }) : null;
+        const wltpWeightedCombinedContent = wltpWeightedCombined ? t('vehicleProps:value.consumptionCombined', { consumption: wltpWeightedCombined.toLocaleString(language), unit: translatedUnit }) : null;
+
+        if (hybridPlugin) {
+            return <React.Fragment>
+              {`${wltpWeightedPowerCombinedContent}, `}
+              {wltpWeightedCombinedContent}, {wltpCo2Value}
+            </React.Fragment>
+        }
+
         if (wltpConsumptionValue && wltpCo2Value) {
           return <>{wltpConsumptionValue}, {wltpCo2Value}</>;
         }
@@ -189,13 +203,17 @@ const getDecoratedLightProps = (
         const wltpConsumptionCombined = car.consumption.wltpCombined;
         const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
         const translatedUnit = t(`cbd:${consumptionUnit}`);
+        const wltpWeightedPowerCombined = car.consumption.wltpWeightedPowerCombined;
+        const wltpWeightedCombined = car.consumption.wltpWeightedCombined;
 
         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 consumptionCombinedContent = t('vehicleProps:value.consumptionCombined', { consumption: consumptionCombined.toLocaleString(language), unit: translatedUnit });        
+        const wltpWeightedPowerCombinedContent = t('vehicleProps:value.consumptionPowerCombined', { consumption: wltpWeightedPowerCombined.toLocaleString(language), unit: translatedUnit });
+        const wltpWeightedCombinedContent = t('vehicleProps:value.consumptionCombined', { consumption: wltpWeightedCombined.toLocaleString(language), unit: translatedUnit });
         const wltpConsumptionPowerCombinedContent = wltpConsumptionPowerCombined
           ? t('vehicleProps:value.consumptionPowerCombined', { consumption: wltpConsumptionPowerCombined.toLocaleString(language), unit: translatedUnit })
           : null;
+
         const wltpConsumptionCombinedContent = wltpConsumptionCombined ?
           t('vehicleProps:value.consumptionCombined', { consumption: wltpConsumptionCombined.toLocaleString(language), unit: translatedUnit })
           : null;
@@ -214,7 +232,15 @@ const getDecoratedLightProps = (
         const hybridPlugin = car.engineData.hybridPlugin;
 
         if (wltpConsumptionCombinedContent && wltpCo2Value) {
+          if (hybridPlugin) {
+              return <React.Fragment>
+              {`${wltpWeightedPowerCombinedContent}, `}
+              {`${wltpWeightedCombinedContent}, `}
+              {wltpConsumptionCombinedContent}, {wltpCo2Value}
+            </React.Fragment>
+          }
           return <React.Fragment>
+            {wltpConsumptionPowerCombinedContent && hybridPlugin ? `${wltpConsumptionPowerCombinedContent}, ` : ''}
             {wltpConsumptionPowerCombinedContent && hybridPlugin ? `${wltpConsumptionPowerCombinedContent}, ` : ''}
             {wltpConsumptionCombinedContent}, {wltpCo2Value}
           </React.Fragment>

package/source/framework/vehiclesProps/decoratedProps.tsx

@@ -610,10 +610,9 @@ const getDecoratedProps = (
       icon: 'fuelConsumption',
       title: t('vehicleProps:title.сonsumptionCombined'),
       get value() {
-        const consumptionCombined = car.consumption.wltpCombined || car.consumption.consumptionCombined;
+        const consumptionCombined = 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');
@@ -815,19 +814,19 @@ const getDecoratedProps = (
       get value() {
         const consumptionCombined = +car.consumption.consumptionCombined;
         const consumptionPowerCombined = +car.consumption.consumptionPowerCombined;
-        const wltpConsumptionPowerCombined = car.consumption.wltpPowerCombined;
-        const wltpConsumptionCombined = car.consumption.wltpCombined;
+        const wltpWeightedPowerCombined = car.consumption.wltpWeightedPowerCombined;
+        const wltpWeightedCombined = car.consumption.wltpWeightedCombined;
 
         const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
         const translatedUnit = t(`cbd:${consumptionUnit}`);
 
         const consumptionPowerCombinedContent = t('vehicleProps:value.consumptionPowerCombined', { consumption: consumptionPowerCombined.toLocaleString(language), unit: translatedUnit });
-        const wltpConsumptionPowerCombinedContent = wltpConsumptionPowerCombined
-          ? t('vehicleProps:value.consumptionPowerCombined', { consumption: wltpConsumptionPowerCombined.toLocaleString(language), unit: translatedUnit })
+        const wltpConsumptionPowerCombinedContent = wltpWeightedPowerCombined
+          ? t('vehicleProps:value.consumptionPowerCombined', { consumption: wltpWeightedPowerCombined.toLocaleString(language), unit: translatedUnit })
           : null;
         const consumptionCombinedContent = t('vehicleProps:value.consumptionCombined', { consumption: consumptionCombined.toLocaleString(language), unit: translatedUnit });
-        const wltpConsumptionCombinedContent = wltpConsumptionCombined ?
-          t('vehicleProps:value.consumptionCombined', { consumption: wltpConsumptionCombined.toLocaleString(language), unit: translatedUnit })
+        const wltpConsumptionCombinedContent = wltpWeightedCombined ?
+          t('vehicleProps:value.consumptionCombined', { consumption: wltpWeightedCombined.toLocaleString(language), unit: translatedUnit })
           : null;
 
         const co2 = car.environmentEmissions.co2;
@@ -835,17 +834,20 @@ const getDecoratedProps = (
         const co2Value = Number.isFinite(co2)
         ? t('vehicleProps:value.co2Combined', { co2: co2.toLocaleString(language) })
         : t('vehicleProps:value.na');
-        const wltpCo2Value = Number.isFinite(co2)
-        ? t('vehicleProps:value.wltpCo2WtdCombined', { co2: wltpCo2.toLocaleString(language) })
+        const wltpCo2Value = Number.isFinite(wltpCo2)
+        ? t('vehicleProps:value.wltpCo2Combined', { co2: wltpCo2.toLocaleString(language) })
+        : null;
+        const wltpCo2PluginValue = Number.isFinite(wltpCo2)
+        ? t('vehicleProps:value.wltpCo2Combined', { co2: wltpCo2.toLocaleString(language) })
         : null;
         const hybridPlugin = car.engineData.hybridPlugin;
 
         if (wltpConsumptionCombinedContent && wltpCo2Value) {
           return <React.Fragment>
             {wltpConsumptionPowerCombinedContent && hybridPlugin ? wrapValue(wltpConsumptionPowerCombinedContent) : ''}
-            {wltpConsumptionPowerCombinedContent && hybridPlugin ? <br /> : ''}
-            {wrapValue(wltpConsumptionCombinedContent)} <br />
-            {wrapValue(wltpCo2Value)}
+            {wltpConsumptionPowerCombinedContent && hybridPlugin ? ', ' : ''}
+            {wrapValue(wltpConsumptionCombinedContent)}{', '}
+            {hybridPlugin ? wrapValue(wltpCo2PluginValue) : wrapValue(wltpCo2Value)}
           </React.Fragment>
         }
 
@@ -1139,10 +1141,19 @@ const getDecoratedProps = (
           : t('vehicleProps:value.na');
       }
     },
+    wltpCo2Plugin: {
+      title: t('vehicleProps:title.wltpCo2Plugin'),
+      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;
+        const wltpCo2 = car.environmentEmissions.wltpCo2Discharged;
         return Number.isFinite(wltpCo2)
           ? t('vehicleProps:value.co2', { co2: wltpCo2.toLocaleString(language) })
           : t('vehicleProps:value.na');
@@ -1166,6 +1177,7 @@ const getDecoratedProps = (
             levelTitle={t('vehicleProps:title.wltpCO2WidgetComb')}
             wltpLevelTitle={t('vehicleProps:title.wltpCO2WidgetDischargedBattery')}
             hybridPlugin={hybridPlugin}
+            isWltp
           /> : t('vehicleProps:value.na');
       }
     },
@@ -1174,7 +1186,7 @@ const getDecoratedProps = (
       subTitle: t('vehicleProps:title.subTitle'),
       get value() {
         const level = car.environmentEmissions.wltpDischargedEnergyEfficiencyClass;
-        return isPropDefined(level) ? <CO2Efficiency level={level} t={t} /> : t('vehicleProps:value.na');
+        return isPropDefined(level) ? <CO2Efficiency level={level} isWltp t={t} /> : t('vehicleProps:value.na');
       }
     },
     wltpRange: {
@@ -1217,7 +1229,7 @@ const getDecoratedProps = (
     wltpWeightedCombined: {
       title: t('vehicleProps:title.wltpWeightedCombined'),
       get value() {
-        const wltpWeightedCombined = car.consumption && car.consumption.wltpTotalRangeCity;
+        const wltpWeightedCombined = car.consumption.wltpWeightedCombined;
         return Number.isFinite(wltpWeightedCombined)
           ? t('vehicleProps:value.consumptionCombined', { consumption: wltpWeightedCombined.toLocaleString(language) })
           : t('vehicleProps:value.na');
@@ -1234,6 +1246,17 @@ const getDecoratedProps = (
           : t('vehicleProps:value.na');
       }
     },
+    wltpCombinedPlugin: {
+      title: t('vehicleProps:title.wltpCombinedPlugin'),
+      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() {
@@ -1245,6 +1268,17 @@ const getDecoratedProps = (
           : t('vehicleProps:value.na');
       }
     },
+    wltpSlowPlugin: {
+      title: t('vehicleProps:title.wltpSlowPlugin'),
+      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() {
@@ -1256,6 +1290,17 @@ const getDecoratedProps = (
           : t('vehicleProps:value.na');
       }
     },
+    wltpMediumPlugin: {
+      title: t('vehicleProps:title.wltpMediumPlugin'),
+      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() {
@@ -1267,6 +1312,17 @@ const getDecoratedProps = (
           : t('vehicleProps:value.na');
       }
     },
+    wltpFastPlugin: {
+      title: t('vehicleProps:title.wltpFastPlugin'),
+      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() {
@@ -1278,6 +1334,17 @@ const getDecoratedProps = (
           : t('vehicleProps:value.na');
       }
     },
+    wltpVeryFastPlugin: {
+      title: t('vehicleProps:title.wltpVeryFastPlugin'),
+      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() {
@@ -1344,6 +1411,61 @@ const getDecoratedProps = (
           : t('vehicleProps:value.na');
       }
     },
+    wltpPowerCombinedPlugin: {
+      title: t('vehicleProps:title.wltpPowerCombinedPlugin'),
+      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');
+      }
+    },
+    wltpPowerSlowPlugin: {
+      title: t('vehicleProps:title.wltpPowerSlowPlugin'),
+      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');
+      }
+    },
+    wltpPowerMediumPlugin: {
+      title: t('vehicleProps:title.wltpPowerMediumPlugin'),
+      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');
+      }
+    },
+    wltpPowerFastPlugin: {
+      title: t('vehicleProps:title.wltpPowerFastPlugin'),
+      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');
+      }
+    },
+    wltpPowerVeryFastPlugin: {
+      title: t('vehicleProps:title.wltpPowerVeryFastPlugin'),
+      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');
+      }
+    },
     // wltpEnergyCosts: {
     //   title: t('vehicleProps:title.wltpEnergyCosts'),
     //   get value() {
@@ -1386,6 +1508,33 @@ const getDecoratedProps = (
           : t('vehicleProps:value.na');
       }
     },
+    powerPrice: {
+      title: t('vehicleProps:title.powerPrice'),
+      get value() {
+        const { powerPrice } = car.costModel;
+        return Number.isFinite(powerPrice)
+          ? t('vehicleProps:value.price', { price: getFormattedPrice(powerPrice, '$,.2f') })
+          : t('vehicleProps:value.na');
+      }
+    },
+    fuelPrice: {
+      title: t('vehicleProps:title.fuelPrice'),
+      get value() {
+        const { fuelPrice } = car.costModel;
+        return Number.isFinite(fuelPrice)
+          ? t('vehicleProps:value.price', { price: getFormattedPrice(fuelPrice, '$,.2f') })
+          : t('vehicleProps:value.na');
+      }
+    },
+    consumptionPriceYear: {
+      title: t('vehicleProps:title.consumptionPriceYear'),
+      get value() {
+        const { consumptionPriceYear } = car.costModel;
+        return Number.isFinite(consumptionPriceYear)
+          ? consumptionPriceYear
+          : t('vehicleProps:value.na');
+      }
+    },
     wltpCostModelTax: {
       title: t('vehicleProps:title.wltpVehicleTax'),
       get value() {

package/source/framework/vehiclesProps/vehicleDetails.ts

@@ -43,9 +43,10 @@ const consumptionHydrogenCombinedAlternateView = ['consumptionHydrogenCombinedAl
 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'];
+  'wltpCo2Discharged', 'wltpPowerCombined', 'wltpPowerSlow', 'wltpPowerMedium', 'wltpPowerFast', 'wltpPowerVeryFast',
+  'wltpPowerCombinedPlugin', 'wltpPowerSlowPlugin', 'wltpPowerMediumPlugin', 'wltpPowerFastPlugin',
+  'fuelPrice', 'powerPrice', 'consumptionPriceYear', 'wltpEnergyEfficiencyClass'];
+const environmentElectroBenzinDieselEthanolHybridWLTP = ['wltpCombined', 'wltpCo2', 'wltpSlow', 'wltpMedium', 'wltpFast', 'wltpVeryFast', 'fuelPrice', 'consumptionPriceYear', 'wltpEnergyEfficiencyClass'];
 const environmentHydrogenWLTP = ['wltpCombined', 'wltpCo2', 'wltpSlow', 'wltpMedium', 'wltpFast', 'wltpVeryFast', 'wltpEnergyEfficiencyClass'];
 // const costModel = ['wltpEnergyCosts', 'wltpCo2CostsLow',, 'wltpCo2CostsMiddle', 'wltpCo2CostsHigh', 'wltpCostModelTax'];