@bytebrand/fe-ui-core 4.6.3 → 4.6.5

package/package.json

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

package/source/components/AccordionWidget/AccordionWidget.tsx

@@ -137,6 +137,7 @@ class AccordionWidget extends React.Component<IAccardionSectionProps, IAccardion
     const engineProps = getVehicleDetails(consumption.fuel, 'engineData', engineData.hybridPlugin);
     const environmentProps = getVehicleDetails(consumption.fuel, 'environment', engineData.hybridPlugin);
     const wltpProps = getWltpValues(consumption.fuel, engineData.hybridPlugin);
+    // const costModelProps = getCostModelValues();
     const dimensionProps = dimensionDetails;
     const availAbilityProps = availAbilityDetails;
     const colorAndMaterialProps = colorAndMaterialDetails;

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

@@ -137,7 +137,7 @@ const getDecoratedLightProps = (
           : t('vehicleProps:value.na');
 
         if (wltpConsumptionValue && wltpCo2Value) {
-          return <>{wltpConsumptionValue} - {wltpCo2Value}</>;
+          return <>{wltpConsumptionValue}, {wltpCo2Value}</>;
         }
 
         return <>{consumptionValue} <br /> {co2Value}</>;
@@ -153,7 +153,7 @@ const getDecoratedLightProps = (
         const translatedUnit = t(`cbd:${consumptionUnit}`);
         const co2 = car.environmentEmissions.co2;
         const wltpConsumptionPowerCombined = car.consumption.wltpPowerCombined;
-        const wltpCo2 = car.consumption.wltpCo2;
+        const wltpCo2 = car.consumption.wltpCo2 || car.environmentEmissions.wltpCo2;
 
         const wltpConsumptionValue = Number.isFinite(wltpConsumptionPowerCombined)
           ? t('vehicleProps:value.consumptionPower', { consumption: wltpConsumptionPowerCombined.toLocaleString(language), unit: translatedUnit })
@@ -172,7 +172,7 @@ const getDecoratedLightProps = (
           : t('vehicleProps:value.na');
 
         if (wltpConsumptionValue && wltpCo2Value) {
-          return <>{wltpConsumptionValue} - {wltpCo2Value}</>;
+          return <>{wltpConsumptionValue}, {wltpCo2Value}</>;
         }
 
         return <>{consumptionValue} <br /> {co2Value} </>;
@@ -201,7 +201,7 @@ const getDecoratedLightProps = (
           : null;
 
         const co2 = car.environmentEmissions.co2;
-        const wltpCo2 = car.consumption.wltpCo2;
+        const wltpCo2 = car.consumption.wltpCo2 || car.environmentEmissions.wltpCo2;
 
         const co2Value = Number.isFinite(co2)
         ? t('vehicleProps:value.co2Combined', { co2: co2.toLocaleString(language) })
@@ -215,7 +215,7 @@ const getDecoratedLightProps = (
 
         if (wltpConsumptionCombinedContent && wltpCo2Value) {
           return <React.Fragment>
-            {wltpConsumptionPowerCombinedContent && hybridPlugin ? `${wltpConsumptionPowerCombinedContent} - ` : ''}
+            {wltpConsumptionPowerCombinedContent && hybridPlugin ? `${wltpConsumptionPowerCombinedContent}, ` : ''}
             {wltpConsumptionCombinedContent}, {wltpCo2Value}
           </React.Fragment>
         }
@@ -238,7 +238,7 @@ const getDecoratedLightProps = (
         const translatedUnit = t(`cbd:${consumptionUnit}`);
         const co2 = car.environmentEmissions.co2;
         const wltpConsumptionCombined = car.consumption.wltpCombined;
-        const wltpCo2 = car.consumption.wltpCo2;
+        const wltpCo2 = car.consumption.wltpCo2 || car.environmentEmissions.wltpCo2;
 
         const consumptionValue = Number.isFinite(consumptionHydrogenCombined)
           ? t('vehicleProps:value.consumptionGas', { consumption: consumptionHydrogenCombined.toLocaleString(language), unit: translatedUnit })
@@ -256,7 +256,7 @@ const getDecoratedLightProps = (
           : null;
 
         if (wltpConsumptionValue && wltpCo2Value) {
-          return <>{wltpConsumptionValue} - {wltpCo2Value}</>;
+          return <>{wltpConsumptionValue}, {wltpCo2Value}</>;
         }
 
         return <>{consumptionValue} <br /> {co2Value}</>;
@@ -272,7 +272,7 @@ const getDecoratedLightProps = (
         const translatedUnit = t(`cbd:${consumptionUnit}`);
         const co2 = car.environmentEmissions.co2;
         const wltpConsumptionCombined = car.consumption.wltpCombined;
-        const wltpCo2 = car.consumption.wltpCo2;
+        const wltpCo2 = car.consumption.wltpCo2 || car.environmentEmissions.wltpCo2;
 
         const consumptionValue = Number.isFinite(consumptionGasCombined)
           ? t('vehicleProps:value.consumptionGas', { consumption: consumptionGasCombined.toLocaleString(language), unit: translatedUnit })
@@ -291,7 +291,7 @@ const getDecoratedLightProps = (
           : null;
 
         if (wltpConsumptionValue && wltpCo2Value) {
-          return <>{wltpConsumptionValue} - {wltpCo2Value}</>;
+          return <>{wltpConsumptionValue}, {wltpCo2Value}</>;
         }
 
         return <>{consumptionValue} <br /> {co2Value}</>;

package/source/framework/vehiclesProps/decoratedProps.tsx

@@ -8,6 +8,7 @@ import { formatMileage } from '../utils/CommonUtils';
 import { EMISSION_STICKERS_ICONS, WP_EMISSION_STICKERS_ICONS } from '../constants/Search';
 import { DELIVERY_PERIODS_EXTRA } from '../constants';
 import { IDecoratedProp, ICar } from '../types/types';
+import { getFormattedPrice } from '../utils/CommonUtils';
 
 const formatDeliveryPeriod = (t: (key: string, options?: object) => string, deliveryPeriod: string) => {
   const count: number = +DELIVERY_PERIODS_EXTRA.find((period: any) => period.value === deliveryPeriod).label;
@@ -699,7 +700,7 @@ const getDecoratedProps = (
           : t('vehicleProps:value.na');
 
         if (wltpConsumptionValue && wltpCo2Value) {
-          return <>{wrapValue(wltpConsumptionValue)} - {wrapValue(wltpCo2Value)}</>;
+          return <>{wrapValue(wltpConsumptionValue)}, {wrapValue(wltpCo2Value)}</>;
         }
 
         return <>{wrapValue(consumptionValue)} <br /> {wrapValue(co2Value)}</>;
@@ -733,7 +734,7 @@ const getDecoratedProps = (
           : t('vehicleProps:value.na');
 
         if (wltpConsumptionValue && wltpCo2Value) {
-          return <>{wrapValue(wltpConsumptionValue)} - {wrapValue(wltpCo2Value)}</>;
+          return <>{wrapValue(wltpConsumptionValue)}, {wrapValue(wltpCo2Value)}</>;
         }
 
         return <>{wrapValue(consumptionValue)} <br /> {wrapValue(co2Value)}</>;
@@ -767,7 +768,7 @@ const getDecoratedProps = (
           : null;
 
         if (wltpConsumptionValue && wltpCo2Value) {
-          return <>{wrapValue(wltpConsumptionValue)} - {wrapValue(wltpCo2Value)}</>;
+          return <>{wrapValue(wltpConsumptionValue)}, {wrapValue(wltpCo2Value)}</>;
         }
 
         return <>{wrapValue(consumptionValue)} <br /> {wrapValue(co2Value)}</>;
@@ -802,7 +803,7 @@ const getDecoratedProps = (
           : null;
 
         if (wltpConsumptionValue && wltpCo2Value) {
-          return <>{wrapValue(wltpConsumptionValue)} - {wrapValue(wltpCo2Value)}</>;
+          return <>{wrapValue(wltpConsumptionValue)}, {wrapValue(wltpCo2Value)}</>;
         }
 
         return <>{wrapValue(consumptionValue)} <br /> {wrapValue(co2Value)}</>;
@@ -1138,10 +1139,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');
@@ -1165,6 +1175,7 @@ const getDecoratedProps = (
             levelTitle={t('vehicleProps:title.wltpCO2WidgetComb')}
             wltpLevelTitle={t('vehicleProps:title.wltpCO2WidgetDischargedBattery')}
             hybridPlugin={hybridPlugin}
+            isWltp
           /> : t('vehicleProps:value.na');
       }
     },
@@ -1173,7 +1184,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: {
@@ -1216,7 +1227,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');
@@ -1233,6 +1244,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() {
@@ -1244,6 +1266,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() {
@@ -1255,6 +1288,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() {
@@ -1266,6 +1310,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() {
@@ -1277,6 +1332,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() {
@@ -1343,78 +1409,140 @@ const getDecoratedProps = (
           : t('vehicleProps:value.na');
       }
     },
-    fuelPrice: {
-      title: '',
+    wltpPowerCombinedPlugin: {
+      title: t('vehicleProps:title.wltpPowerCombinedPlugin'),
       get value() {
-        return ''
+        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');
       }
     },
-    powerPrice: {
-      title: '',
+    wltpPowerSlowPlugin: {
+      title: t('vehicleProps:title.wltpPowerSlowPlugin'),
       get value() {
-        return ''
+        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');
       }
     },
-    consumptionPriceYear: {
-      title: '',
+    wltpPowerMediumPlugin: {
+      title: t('vehicleProps:title.wltpPowerMediumPlugin'),
       get value() {
-        return ''
+        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');
       }
     },
-    co2CostLowBasePrice: {
-      title: '',
+    wltpPowerFastPlugin: {
+      title: t('vehicleProps:title.wltpPowerFastPlugin'),
       get value() {
-        return ''
+        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');
       }
     },
-    co2CostMiddleBasePrice: {
-      title: '',
+    wltpPowerVeryFastPlugin: {
+      title: t('vehicleProps:title.wltpPowerVeryFastPlugin'),
       get value() {
-        return ''
+        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');
       }
     },
-    co2CostHighBasePrice: {
-      title: '',
+    // wltpEnergyCosts: {
+    //   title: t('vehicleProps:title.wltpEnergyCosts'),
+    //   get value() {
+    //     const { fuel } = car.consumption;
+    //     const { wltpCombined, wltpPowerCombined, wltpWeightedCombined, wltpWeightedPowerCombined } = car.consumption;
+    //     const { hybridPlugin } = car.engineData;
+    //     const consumption = {
+    //       wltpCombined, wltpPowerCombined, wltpWeightedCombined, wltpWeightedPowerCombined
+    //     }
+    //     const fuelCost = getFuelPrice(fuel, consumption, hybridPlugin);
+    //     return Number.isFinite(fuelCost)
+    //       ? t('vehicleProps:value.price', { price: getFormattedPrice(fuelCost, '$,.2f') })
+    //       : t('vehicleProps:value.na');
+    //   }
+    // },
+    wltpCo2CostsLow: {
+      title: t('vehicleProps:title.wltpCo2LowPrice'),
       get value() {
-        return ''
+        const { basePrice } = car.costModel.co2Costs.low;
+        return Number.isFinite(basePrice)
+          ? t('vehicleProps:value.price', { price: getFormattedPrice(basePrice, '$,.2f') })
+          : t('vehicleProps:value.na');
       }
     },
-    co2CostLowAccumulatedPrice: {
-      title: '',
+    wltpCo2CostsMiddle: {
+      title: t('vehicleProps:title.wltpCo2MidPrice'),
       get value() {
-        return ''
+        const { basePrice } = car.costModel.co2Costs.middle;
+        return Number.isFinite(basePrice)
+          ? t('vehicleProps:value.price', { price: getFormattedPrice(basePrice, '$,.2f') })
+          : t('vehicleProps:value.na');
       }
     },
-    co2CostMiddleAccumulatedPrice: {
-      title: '',
+    wltpCo2CostsHigh: {
+      title: t('vehicleProps:title.wltpCo2HighPrice'),
       get value() {
-        return ''
+        const { basePrice } = car.costModel.co2Costs.high;
+        return Number.isFinite(basePrice)
+          ? t('vehicleProps:value.price', { price: getFormattedPrice(basePrice, '$,.2f') })
+          : t('vehicleProps:value.na');
       }
     },
-    co2CostHighAccumulatedPrice: {
-      title: '',
+    powerPrice: {
+      title: t('vehicleProps:title.powerPrice'),
       get value() {
-        return ''
+        const { powerPrice } = car.costModel;
+        return Number.isFinite(powerPrice)
+          ? t('vehicleProps:value.price', { price: getFormattedPrice(powerPrice, '$,.2f') })
+          : t('vehicleProps:value.na');
       }
     },
-    timeFrameFrom: {
-      title: '',
+    fuelPrice: {
+      title: t('vehicleProps:title.fuelPrice'),
       get value() {
-        return ''
+        const { fuelPrice } = car.costModel;
+        return Number.isFinite(fuelPrice)
+          ? t('vehicleProps:value.price', { price: getFormattedPrice(fuelPrice, '$,.2f') })
+          : t('vehicleProps:value.na');
       }
     },
-    timeFrameT0: {
-      title: '',
+    consumptionPriceYear: {
+      title: t('vehicleProps:title.consumptionPriceYear'),
       get value() {
-        return ''
+        const { consumptionPriceYear } = car.costModel;
+        return Number.isFinite(consumptionPriceYear)
+          ? t('vehicleProps:value.price', { price: getFormattedPrice(consumptionPriceYear, '$,.2f') })
+          : t('vehicleProps:value.na');
       }
     },
-    consumptionCosts: {
-      title: '',
+    wltpCostModelTax: {
+      title: t('vehicleProps:title.wltpVehicleTax'),
       get value() {
-        return ''
+        const { tax } = car.costModel;
+        return Number.isFinite(tax)
+          ? t('vehicleProps:value.price', { price: getFormattedPrice(tax, '$,.2f') })
+          : t('vehicleProps:value.na');
       }
     }
+
   };
   return props;
 };

package/source/framework/vehiclesProps/vehicleDetails.ts

@@ -47,9 +47,7 @@ const environmentPluginHybridWLTP = ['wltpWeightedCombined', 'wltpTotalRange', '
   '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'];
-const costModel = ['fuelPrice', 'powerPrice', 'consumptionPriceYear', 'co2CostLowBasePrice', 'co2CostMiddleBasePrice',
-  'co2CostHighBasePrice', 'co2CostLowAccumulatedPrice', 'co2CostMiddleAccumulatedPrice', 'co2CostHighAccumulatedPrice',
-  'timeFrameFrom', 'timeFrameT0', 'consumptionCosts',]
+// const costModel = ['wltpEnergyCosts', 'wltpCo2CostsLow',, 'wltpCo2CostsMiddle', 'wltpCo2CostsHigh', 'wltpCostModelTax'];
 
 export const engineDetails: IEngineDetails = [
   {
@@ -357,9 +355,9 @@ export const getWltpValues = (selector: any, hybridPlugin: any = false) => {
   }, []);
 };
 
-export const getCostModelValues = () => {
-  return costModel;
-}
+// export const getCostModelValues = () => {
+//   return costModel;
+// }
 
 export const getOverviewDetails = (selector: any) => {
   if (Object.keys(filtered(selector)).length === 0) {