@bytebrand/fe-ui-core 4.2.245 → 4.2.247

package/source/framework/vehiclesProps/decoratedProps.tsx

@@ -1,1057 +1,1057 @@
-import * as React from 'react';
-import { isNull } from 'util';
-import moment from 'moment';
-
-import Icon from '../../components/_common/IconContainer/IconContainer';
-import CO2Efficiency from '../../components/_common/Co2Widget/CO2Efficiency';
-import { formatTimestamp } from '../utils/DateUtils';
-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';
-
-const formatDeliveryPeriod = (t: (key: string, options?: object) => string, deliveryPeriod: string) => {
-  const count: number = +DELIVERY_PERIODS_EXTRA.find((period: any) => period.value === deliveryPeriod).label;
-  // months until delivery date unrounded (float)
-  const monthsTo: number = moment.utc().diff(moment.utc().subtract(count, 'd'), 'M', true);
-  return Math.round(monthsTo) > 1
-    ? t('vehicleProps:value.deliveryPeriodMonths', { count: Math.round(monthsTo) })
-    : t('vehicleProps:value.deliveryPeriodDays', { count });
-};
-
-const isPropDefined = (prop: any) => {
-  const type = typeof prop;
-  if (type === 'string') {
-    return prop.indexOf('other') === -1
-      && prop.indexOf('unknown') === -1;
-  }
-  return !isNull(prop) && type !== 'undefined';
-};
-
-const isCheckedBatteryTime = (prop: any, t: (key: string, options?: object) => string) => {
-  switch (prop) {
-    case 'selector_batteryCharchingDurationMinutes':
-      return 'min';
-      break;
-    case 'selector_batteryCharchingDurationHours':
-      return 'h';
-      break;
-    default:
-      return t('vehicleProps:value.na');
-  }
-};
-
-export const getPowerLabel = (powerKW: number, powerPS: number): string => {
-  const powerKWlabel = !!powerKW ? `${powerKW} kW ` : '';
-  const powerPSlabel = !!powerPS ? `${!!powerKW ? '(' : ''}${powerPS} PS${!!powerKW ? ')' : ''}` : '';
-  const powerKWpowerPS = `${powerKWlabel}${powerPSlabel}`;
-
-  return powerKWpowerPS;
-};
-const wrapValue = (value:string): React.ReactNode => {
-  const regex = /-?\d+(\,\d+)?/; // match any digit
-  const matches = value.match(regex); // get an array of all digits found
-
-  if (matches && matches.length > 0) { // If at least one number is found in the input string
-    const index = value.indexOf(matches[0]) + matches[0].length;
-    const beforeText = value.slice(0, index);
-    const afterText = value.slice(index);
-
-    return (
-      <>
-        {beforeText}
-        <span className='smallText'>{afterText}</span>
-      </>
-    ); // Return a JSX element with a span wrapper around the text after the number
-  }
-  return <>{value}</>; // If no numbers are found in the input string, return the original string without any modification
-};
-
-const getDecoratedProps = (
-  car: ICar, // @TODO should have a proper interface
-  t: (key: string, options?: object) => string,
-  language: string = 'en',
-  simplifiedLabels: boolean = false // shortened labels for repsonsive layout (see 'power')
-): IDecoratedProp => {
-  const {
-    offer = {},
-    // countryName,
-    mainData: {
-      firstRegistration = '',
-      mileage = '',
-      numberOfPreviousOwners = '',
-      doors = '',
-      usageType = '',
-      countryVersion = '',
-      condition = '',
-      damaged = '',
-      category = '',
-      seats = '',
-      nonSmokerVehicle = '',
-      make = '',
-      model = ''
-    } = {}
-  } = car;
-  const props: any = {
-    makeModel: {
-      title: t('vehicleProps:title.makeModel'),
-      get value() { return `${make} ${model}`; }
-    },
-    mileage: {
-      title: t('vehicleProps:title.mileage'),
-      icon: 'speed',
-      get value() {
-        return Number.isFinite(parseInt(mileage, 10))
-          ? t('vehicleProps:value.mileage', { mileage: formatMileage(mileage) })
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    firstRegistration: {
-      title: t('vehicleProps:title.firstRegistration'),
-      icon: 'date',
-      get value() {
-        return Number.isFinite(firstRegistration)
-          ? formatTimestamp({ timestamp: firstRegistration, format: 'MM/YYYY' })
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    numberOfPreviousOwners: {
-      title: t('vehicleProps:title.numberOfPreviousOwners'),
-      icon: 'owner',
-      get value() {
-        return Number.isFinite(numberOfPreviousOwners)
-          ? t('vehicleProps:value.vehicleOwners', { count: numberOfPreviousOwners })
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    doorsOnly: {
-      icon: 'door',
-      get value() {
-        if (doors > 0) {
-          return t('vehicleProps:value.doorsOnly', { doors });
-        }
-
-        return t('vehicleProps:value.na');
-      }
-    },
-
-    usageType: {
-      icon: 'new',
-      get value() {
-        if (condition === 'selector_condition_new') return t('vehicleProps:value.newCar');
-        return isPropDefined(usageType) ? t(`cbd:${usageType}`) : t('cbd:selector_condition_used');
-      }
-    },
-
-    gearbox: {
-      get icon() {
-        const gearbox = car.driveSuspension.gearbox;
-        return isPropDefined(gearbox) ? car.driveSuspension.gearbox : 'selector_gearbox_manualShift';
-      },
-      get value() {
-        const gearbox = car.driveSuspension.gearbox;
-        return isPropDefined(gearbox) ? t(`cbd:${gearbox}`) : t('vehicleProps:value.na');
-      }
-    },
-
-    power: {
-      title: t('vehicleProps:title.power'),
-      icon: 'ps',
-      get value() {
-        const { powerKW, powerPS } = car.engineData;
-
-        if (Number.isFinite(powerKW) && Number.isFinite(powerPS)) {
-          return simplifiedLabels
-            ? t('vehicleProps:value.powerPS', { powerPS })
-            : t('vehicleProps:value.power', { powerKW, powerPS });
-        }
-
-        return t('vehicleProps:value.na');
-      }
-    },
-
-    powerAlternateView: {
-      title: t('vehicleProps:title.power'),
-      icon: 'kw',
-      get value() {
-        const { powerKW, powerPS } = car.engineData;
-        return Number.isFinite(powerKW) && Number.isFinite(powerPS)
-          ? t('vehicleProps:value.powerAlternateView', { powerKW, powerPS })
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    fuel: {
-      title: t('vehicleProps:title.fuel'),
-      get icon() { return car.consumption.fuel; },
-      get value() {
-        const fuel = car.consumption.fuel;
-        return isPropDefined(fuel) ? t(`cbd:${fuel}`) : t('vehicleProps:value.na');
-      }
-    },
-
-    accidentDamaged: {
-      title: t('cbd:mainData_accidentDamaged'),
-      icon: 'wrench',
-      get value() {
-        return damaged ? t('vehicleProps:value.damaged') : t('vehicleProps:value.accidentFree');
-      }
-    },
-
-    co2: {
-      icon: 'co2',
-      get value() {
-        const co2 = car.environmentEmissions.co2;
-        return Number.isFinite(co2)
-          ? t('vehicleProps:value.co2Combined', { co2: co2.toLocaleString(language) })
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    cylinders: {
-      title: t('vehicleProps:title.cylinders'),
-      get value() {
-        const { engineLocation } = car.engineData;
-        const cylinders = parseInt(car.engineData.cylinders, 10);
-        return Number.isFinite(cylinders)
-          ? (engineLocation ? `${cylinders} / ${t(`cbd:${engineLocation}`)}` : cylinders)
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    plugIn: {
-      title: 'Plug-In',
-      get value() {
-        const { hybridPlugin } = car.engineData;
-        return hybridPlugin ? t(`cbd:selector_hybridPlugin_yes`) : t('cbd:selector_hybridPlugin_no');
-      }
-    },
-
-    cubicCapacity: {
-      title: t('vehicleProps:title.cubicCapacity'),
-      get value() {
-        const cubicCapacity = car.engineData.cubicCapacity;
-        return Number.isFinite(cubicCapacity)
-          ? t('vehicleProps:value.cubicCapacity', { cubicCapacity: cubicCapacity.toLocaleString(language) })
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    torque: {
-      title: t('vehicleProps:title.torque'),
-      get value() {
-        const torque = car.engineData.torque;
-        return torque
-          ? t('vehicleProps:value.torque', { torque })
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    acceleration: {
-      title: t('vehicleProps:title.acceleration'),
-      get value() {
-        const acceleration = car.engineData.acceleration100;
-        return isPropDefined(acceleration)
-          ? (t('vehicleProps:value.acceleration', { seconds: acceleration }))
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    topSpeed: {
-      title: t('vehicleProps:title.topSpeed'),
-      get value() {
-        const topSpeed = car.engineData.highSpeed;
-        return isPropDefined(topSpeed)
-          ? (t('vehicleProps:value.topSpeed', { mileage: topSpeed }))
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    transmission: {
-      title: t('vehicleProps:title.transmission'),
-      get value() {
-        const gearbox = car.driveSuspension.gearbox;
-        return isPropDefined(gearbox) ? t(`cbd:${gearbox}`) : t('vehicleProps:value.na');
-      }
-    },
-
-    driveType: {
-      title: t('vehicleProps:title.driveType'),
-      get icon() {
-        const driveType = car.driveSuspension.driveType;
-        return isPropDefined(driveType) ? car.driveSuspension.driveType : 'selector_driveType_frontWheelDrive';
-      },
-      get value() {
-        const driveType = car.driveSuspension.driveType;
-        return isPropDefined(driveType) ? t(`cbd:${driveType}`) : t('vehicleProps:value.na');
-      }
-    },
-
-    fuelCapacity: {
-      title: t('vehicleProps:title.fuelCapacity'),
-      get value() {
-        const fuelCapacity = car.sizeVolumeWeight && car.sizeVolumeWeight.fuelCapacity;
-        return Number.isFinite(fuelCapacity)
-          ? t('vehicleProps:value.fuelCapacity', { capacity: fuelCapacity.toLocaleString(language) })
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    batteryCapacity: {
-      title: t('vehicleProps:title.batteryCapacityTitle'),
-      get value() {
-        const batteryCapacity = car.battery && car.battery.batteryCapacity;
-        return batteryCapacity && Number.isFinite(batteryCapacity)
-          ? t('vehicleProps:value.batteryCapacity', { batteryCapacity: batteryCapacity.toLocaleString(language) })
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    chargingDuration230V: {
-      title: t('vehicleProps:title.chargingDuration230V'),
-      get value() {
-        const batteryChargingDuration230VSelect = car.battery && car.battery.batteryChargingDuration230VSelect;
-        const batteryChargingDuration230VHour = car.battery && car.battery.batteryChargingDuration230VHour;
-        const batteryCharchingDuration230VMinutesHours = car.battery && car.battery.batteryCharchingDuration230VMinutesHours;
-
-        return batteryChargingDuration230VSelect
-          ? `${batteryChargingDuration230VHour ? `${batteryChargingDuration230VHour} ${isCheckedBatteryTime(batteryCharchingDuration230VMinutesHours, t)}` : ''} ${batteryChargingDuration230VSelect}`
-          : t('vehicleProps:value.na');
-      }
-    },
-    chargingDurationMaxSpeed: {
-      title: t('vehicleProps:title.chargingDurationMaxSpeed'),
-      get value() {
-        const batteryChargingDurationMaxSelect = car.battery && car.battery.batteryChargingDurationMaxSelect;
-        const batteryChargingDurationMaxHour = car.battery && car.battery.batteryChargingDurationMaxHour;
-        const batteryCharchingDurationMaxSelectMinutesHours = car.battery && car.battery.batteryCharchingDurationMaxSelectMinutesHours;
-
-        return batteryChargingDurationMaxSelect
-          ? `${batteryChargingDurationMaxHour ? `${batteryChargingDurationMaxHour} ${isCheckedBatteryTime(batteryCharchingDurationMaxSelectMinutesHours, t)}` : ''} ${batteryChargingDurationMaxSelect}`
-          : t('vehicleProps:value.na');
-      }
-    },
-    batteryChargerType: {
-      title: t('vehicleProps:title.batteryChargerType'),
-      get value() {
-        const batteryChargerType = car.battery && car.battery.batteryChargerType;
-
-        return isPropDefined(batteryChargerType)
-          ? batteryChargerType.map((item: any) => t(`cbd:${item}`)).join('\n')
-          : t('vehicleProps:value.na');
-      }
-    },
-    hsn: {
-      title: 'HSN',
-      get value() {
-        const hsn = car.metaData.hsn;
-        return isPropDefined(hsn) ? hsn : t('vehicleProps:value.na');
-      }
-    },
-
-    tsn: {
-      title: 'TSN',
-      get value() {
-        const tsn = car.metaData.tsn;
-        return isPropDefined(tsn) ? tsn : t('vehicleProps:value.na');
-      }
-    },
-
-    category: {
-      title: t('vehicleProps:title.category'),
-      get value() {
-        return isPropDefined(category) ? t(`cbd:${category}`) : t('vehicleProps:value.na');
-      }
-    },
-
-    length: {
-      title: t('vehicleProps:title.length'),
-      get value() {
-        const length = car.sizeVolumeWeight && car.sizeVolumeWeight.length;
-        return Number.isFinite(length)
-          ? t('vehicleProps:value.length', { size: length.toLocaleString(language) })
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    width: {
-      title: t('vehicleProps:title.width'),
-      get value() {
-        const width = car.sizeVolumeWeight && car.sizeVolumeWeight.width;
-        return Number.isFinite(width)
-          ? t('vehicleProps:value.width', { size: width.toLocaleString(language) })
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    height: {
-      title: t('vehicleProps:title.height'),
-      get value() {
-        const height = car.sizeVolumeWeight && car.sizeVolumeWeight.height;
-        return Number.isFinite(height)
-          ? t('vehicleProps:value.height', { size: height.toLocaleString(language) })
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    base: {
-      title: t('vehicleProps:title.base'),
-      get value() {
-        const wheelBase = car.driveSuspension.wheelBase;
-        return Number.isFinite(wheelBase)
-          ? t('vehicleProps:value.base', { size: wheelBase.toLocaleString(language) })
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    capacityLoad: {
-      title: t('vehicleProps:title.loadingVolume'),
-      get value() {
-        const completeCapacity = car.sizeVolumeWeight && car.sizeVolumeWeight.completeCapacity;
-        return Number.isFinite(completeCapacity)
-          ? t('vehicleProps:value.capacityLoad', { capacity: completeCapacity.toLocaleString(language) })
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    bootCapacity: {
-      title: t('vehicleProps:title.bootCapacity'),
-      get value() {
-        const cargoCapacity = car.sizeVolumeWeight && car.sizeVolumeWeight.cargoCapacity;
-        return Number.isFinite(cargoCapacity)
-          ? t('vehicleProps:value.bootCapacity', { capacity: cargoCapacity.toLocaleString(language) })
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    doors: {
-      title: t('vehicleProps:title.doors'),
-      get value() { return doors > 0 ? doors : t('vehicleProps:value.na'); }
-    },
-
-    seats: {
-      title: t('vehicleProps:title.seats'),
-      get value() { return seats > 0 ? seats : t('vehicleProps:value.na'); }
-    },
-
-    tare: {
-      title: t('vehicleProps:title.tare'),
-      get value() {
-        const emptyWeight = car.sizeVolumeWeight && car.sizeVolumeWeight.emptyWeight;
-        return Number.isFinite(emptyWeight)
-          ? t('vehicleProps:value.tareWeight', { weight: (emptyWeight).toLocaleString(language) })
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    maximumWeight: {
-      title: t('vehicleProps:title.maximumWeight'),
-      get value() {
-        const cargoCapacity = car.sizeVolumeWeight && car.sizeVolumeWeight.cargoCapacity;
-        return Number.isFinite(cargoCapacity)
-          ? t('vehicleProps:value.maximumWeightCapacity', { capacity: cargoCapacity.toLocaleString(language) })
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    trailerWeightBraked: {
-      title: t('vehicleProps:title.trailerLoadBraked'),
-      get value() {
-        const trailerWeightBraked = car.sizeVolumeWeight && car.sizeVolumeWeight.trailerWeightBraked;
-        return Number.isFinite(trailerWeightBraked)
-          ? t('vehicleProps:value.weight', { weight: trailerWeightBraked.toLocaleString(language) })
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    trailerWeightUnbraked: {
-      title: t('vehicleProps:title.trailerLoadUnbraked'),
-      get value() {
-        const trailerWeightUnbraked = car.sizeVolumeWeight && car.sizeVolumeWeight.trailerWeightUnbraked;
-        return Number.isFinite(trailerWeightUnbraked)
-          ? t('vehicleProps:value.weight', { weight: trailerWeightUnbraked.toLocaleString(language) })
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    consumptionInner: {
-      icon: 'fuelConsumption',
-      title: t('vehicleProps:title.consumptionInner'),
-      get value() {
-        const consumptionInner = car.consumption.consumptionInner;
-        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
-        const translatedUnit = t(`cbd:${consumptionUnit}`);
-        return Number.isFinite(consumptionInner)
-          ? t('vehicleProps:value.consumption', { consumption: consumptionInner.toLocaleString(language), unit: translatedUnit })
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    consumptionPowerInner: {
-      icon: 'fuelConsumption',
-      title: t('vehicleProps:title.consumptionPowerInner'),
-      get value() {
-        const consumptionPowerInner = car.consumption.consumptionInner;
-        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
-        const translatedUnit = t(`cbd:${consumptionUnit}`);
-        return Number.isFinite(consumptionPowerInner)
-          ? t('vehicleProps:value.consumptionPower', { consumption: consumptionPowerInner.toLocaleString(language), unit: translatedUnit })
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    consumptionPowerHybridInner: {
-      icon: 'fuelConsumption',
-      title: t('vehicleProps:title.consumptionPowerInner'),
-      get value() {
-        const consumptionPowerInner = car.consumption.consumptionPowerInner;
-        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
-        const translatedUnit = t(`cbd:${consumptionUnit}`);
-        return Number.isFinite(consumptionPowerInner)
-          ? t('vehicleProps:value.consumptionPower', { consumption: consumptionPowerInner.toLocaleString(language), unit: translatedUnit })
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    consumptionHydrogenInner: {
-      icon: 'fuelConsumption',
-      title: t('vehicleProps:title.consumptionHydrogenInner'),
-      get value() {
-        const consumptionHydrogenInner = car.consumption.consumptionInner;
-        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
-        const translatedUnit = t(`cbd:${consumptionUnit}`);
-        return Number.isFinite(consumptionHydrogenInner)
-          ? t('vehicleProps:value.consumptionGas', { consumption: consumptionHydrogenInner.toLocaleString(language), unit: translatedUnit })
-          : t('vehicleProps:value.na');
-      }
-    },
-    consumptionGasInner: {
-      icon: 'fuelConsumption',
-      title: t('vehicleProps:title.consumptionGasInner'),
-      get value() {
-        const consumptionGasInner = car.consumption.consumptionInner;
-        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
-        const translatedUnit = t(`cbd:${consumptionUnit}`);
-        return Number.isFinite(consumptionGasInner)
-          ? t('vehicleProps:value.consumptionGas', { consumption: consumptionGasInner.toLocaleString(language), unit: translatedUnit })
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    consumptionOuter: {
-      icon: 'fuelConsumption',
-      title: t('vehicleProps:title.consumptionOuter'),
-      get value() {
-        const consumptionOuter = car.consumption.consumptionOuter;
-        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
-        const translatedUnit = t(`cbd:${consumptionUnit}`);
-        return Number.isFinite(consumptionOuter)
-          ? t('vehicleProps:value.consumption', { consumption: consumptionOuter.toLocaleString(language), unit: translatedUnit })
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    consumptionPowerOuter: {
-      icon: 'fuelConsumption',
-      title: t('vehicleProps:title.consumptionPowerOuter'),
-      get value() {
-        const consumptionPowerOuter = car.consumption.consumptionOuter;
-        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
-        const translatedUnit = t(`cbd:${consumptionUnit}`);
-        return Number.isFinite(consumptionPowerOuter)
-          ? t('vehicleProps:value.consumptionPower', { consumption: consumptionPowerOuter.toLocaleString(language), unit: translatedUnit })
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    consumptionPowerHybridOuter: {
-      icon: 'fuelConsumption',
-      title: t('vehicleProps:title.consumptionPowerOuter'),
-      get value() {
-        const consumptionPowerOuter = car.consumption.consumptionPowerOuter;
-        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
-        const translatedUnit = t(`cbd:${consumptionUnit}`);
-        return Number.isFinite(consumptionPowerOuter)
-          ? t('vehicleProps:value.consumptionPower', { consumption: consumptionPowerOuter.toLocaleString(language), unit: translatedUnit })
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    consumptionHydrogenOuter: {
-      icon: 'fuelConsumption',
-      title: t('vehicleProps:title.consumptionHydrogenOuter'),
-      get value() {
-        const consumptionHydrogenOuter = car.consumption.consumptionOuter;
-        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
-        const translatedUnit = t(`cbd:${consumptionUnit}`);
-        return Number.isFinite(consumptionHydrogenOuter)
-          ? t('vehicleProps:value.consumptionGas', { consumption: consumptionHydrogenOuter.toLocaleString(language), unit: translatedUnit })
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    consumptionGasOuter: {
-      icon: 'fuelConsumption',
-      title: t('vehicleProps:title.consumptionGasOuter'),
-      get value() {
-        const consumptionGasOuter = car.consumption.consumptionOuter;
-        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
-        const translatedUnit = t(`cbd:${consumptionUnit}`);
-        return Number.isFinite(consumptionGasOuter)
-          ? t('vehicleProps:value.consumptionGas', { consumption: consumptionGasOuter.toLocaleString(language), unit: translatedUnit })
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    consumptionCombined: {
-      icon: 'fuelConsumption',
-      title: t('vehicleProps:title.сonsumptionCombined'),
-      get value() {
-        const consumptionCombined = car.consumption.consumptionCombined;
-        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
-        const translatedUnit = t(`cbd:${consumptionUnit}`);
-        return Number.isFinite(consumptionCombined)
-          ? t('vehicleProps:value.consumption', { consumption: consumptionCombined.toLocaleString(language), unit: translatedUnit })
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    consumptionPowerCombined: {
-      icon: 'fuelConsumption',
-      title: t('vehicleProps:title.consumptionPowerCombined'),
-      get value() {
-        const consumptionPowerCombined = car.consumption.consumptionCombined;
-        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
-        const translatedUnit = t(`cbd:${consumptionUnit}`);
-        return Number.isFinite(consumptionPowerCombined)
-          ? t('vehicleProps:value.consumptionPower', { consumption: consumptionPowerCombined.toLocaleString(language), unit: translatedUnit })
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    consumptionPowerHybridCombined: {
-      icon: 'fuelConsumption',
-      title: t('vehicleProps:title.consumptionPowerCombined'),
-      get value() {
-        const consumptionPowerCombined = car.consumption.consumptionPowerCombined;
-        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
-        const translatedUnit = t(`cbd:${consumptionUnit}`);
-        return Number.isFinite(consumptionPowerCombined)
-          ? t('vehicleProps:value.consumptionPower', { consumption: consumptionPowerCombined.toLocaleString(language), unit: translatedUnit })
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    consumptionHydrogenCombined: {
-      icon: 'fuelConsumption',
-      title: t('vehicleProps:title.consumptionHydrogenCombined'),
-      get value() {
-        const consumptionHydrogenCombined = car.consumption.consumptionCombined;
-        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
-        const translatedUnit = t(`cbd:${consumptionUnit}`);
-        return Number.isFinite(consumptionHydrogenCombined)
-          ? t('vehicleProps:value.consumptionGas', { consumption: consumptionHydrogenCombined.toLocaleString(language), unit: translatedUnit })
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    consumptionGasCombined: {
-      icon: 'fuelConsumption',
-      title: t('vehicleProps:title.consumptionGasCombined'),
-      get value() {
-        const consumptionGasCombined = car.consumption.consumptionCombined;
-        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
-        const translatedUnit = t(`cbd:${consumptionUnit}`);
-        return Number.isFinite(consumptionGasCombined)
-          ? t('vehicleProps:value.consumptionGas', { consumption: consumptionGasCombined.toLocaleString(language), unit: translatedUnit })
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    consumptionCombinedAlternateView: {
-      icon: 'fuelConsumption',
-      get value() {
-        const consumptionCombined = car.consumption.consumptionCombined;
-        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
-        const translatedUnit = t(`cbd:${consumptionUnit}`);
-
-        const co2 = car.environmentEmissions.co2;
-
-        const consumptionValue = Number.isFinite(consumptionCombined)
-          ? t('vehicleProps:value.consumptionCombined', { consumption: consumptionCombined.toLocaleString(language), unit: translatedUnit })
-          : t('vehicleProps:value.na');
-
-        const co2Value = Number.isFinite(co2)
-          ? t('vehicleProps:value.co2Combined', { co2: co2.toLocaleString(language) })
-          : t('vehicleProps:value.na');
-
-        return <>{wrapValue(consumptionValue)} <br /> {wrapValue(co2Value)}</>;
-      }
-    },
-    consumptionPowerCombinedAlternateView: {
-      icon: 'fuelConsumption',
-      title: t('vehicleProps:title.consumptionPowerCombined'),
-      get value() {
-        const consumptionPowerCombined = car.consumption.consumptionCombined;
-        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
-        const translatedUnit = t(`cbd:${consumptionUnit}`);
-        const co2 = car.environmentEmissions.co2;
-
-        const consumptionValue = Number.isFinite(consumptionPowerCombined)
-          ? t('vehicleProps:value.consumptionPower', { consumption: consumptionPowerCombined.toLocaleString(language), unit: translatedUnit })
-          : t('vehicleProps:value.na');
-
-        const co2Value = Number.isFinite(co2)
-          ? t('vehicleProps:value.co2Combined', { co2: co2.toLocaleString(language) })
-          : t('vehicleProps:value.na');
-
-        return <>{wrapValue(consumptionValue)} <br /> {wrapValue(co2Value)}</>;
-      }
-    },
-    consumptionHydrogenCombinedAlternateView: {
-      icon: 'fuelConsumption',
-      title: t('vehicleProps:title.consumptionHydrogenCombined'),
-      get value() {
-        const consumptionHydrogenCombined = car.consumption.consumptionCombined;
-        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
-        const translatedUnit = t(`cbd:${consumptionUnit}`);
-        const co2 = car.environmentEmissions.co2;
-
-        const consumptionValue = Number.isFinite(consumptionHydrogenCombined)
-          ? t('vehicleProps:value.consumptionGas', { consumption: consumptionHydrogenCombined.toLocaleString(language), unit: translatedUnit })
-          : t('vehicleProps:value.na');
-
-        const co2Value = Number.isFinite(co2)
-          ? t('vehicleProps:value.co2Combined', { co2: co2.toLocaleString(language) })
-          : t('vehicleProps:value.na');
-
-        return <>{wrapValue(consumptionValue)} <br /> {wrapValue(co2Value)}</>;
-      }
-    },
-    consumptionGasCombinedAlternateView: {
-      icon: 'fuelConsumption',
-      title: t('vehicleProps:title.consumptionGasCombined'),
-      get value() {
-        const consumptionGasCombined = car.consumption.consumptionCombined;
-        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
-        const translatedUnit = t(`cbd:${consumptionUnit}`);
-
-        const co2 = car.environmentEmissions.co2;
-
-        const consumptionValue = Number.isFinite(consumptionGasCombined)
-          ? t('vehicleProps:value.consumptionGas', { consumption: consumptionGasCombined.toLocaleString(language), unit: translatedUnit })
-          : t('vehicleProps:value.na');
-
-        const co2Value = Number.isFinite(co2)
-          ? t('vehicleProps:value.co2Combined', { co2: co2.toLocaleString(language) })
-          : t('vehicleProps:value.na');
-
-        return <>{wrapValue(consumptionValue)} <br /> {wrapValue(co2Value)}</>;
-      }
-    },
-
-    consumptionCombinedHybridAlternateView: {
-      icon: 'fuelConsumption',
-      get value() {
-        const consumptionCombined = +car.consumption.consumptionCombined;
-        const consumptionPowerCombined = +car.consumption.consumptionPowerCombined;
-        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 consumptionCombinedContent = t('vehicleProps:value.consumptionCombined', { consumption: consumptionCombined.toLocaleString(language), unit: translatedUnit });
-
-        const co2 = car.environmentEmissions.co2;
-        const co2Value = Number.isFinite(co2)
-        ? t('vehicleProps:value.co2Combined', { co2: co2.toLocaleString(language) })
-        : t('vehicleProps:value.na');
-        const hybridPlugin = car.engineData.hybridPlugin;
-        return Number.isFinite(consumptionCombined) && Number.isFinite(consumptionPowerCombined)
-          ? <React.Fragment>
-            {consumptionPowerCombined && hybridPlugin ? wrapValue(consumptionPowerCombinedContent) : ''}
-            {consumptionPowerCombined && hybridPlugin ? <br /> : ''}
-            {wrapValue(consumptionCombinedContent)} <br />
-            {wrapValue(co2Value)}
-          </React.Fragment>
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    rangeHydrogen: {
-      title: t('vehicleProps:title.rangeHydrogen'),
-      get value() {
-        const { rangeHydrogen } = car.engineData;
-        return Number.isFinite(rangeHydrogen)
-          ? t('vehicleProps:value.batteryRangeElectric', { consumption: rangeHydrogen.toLocaleString(language) })
-          : t('vehicleProps:value.na');
-      }
-    },
-    batteryRangeElectric: {
-      title: t('vehicleProps:title.batteryRangeElectric'),
-      get value() {
-        const batteryRangeElectric = car.battery && car.battery.batteryRangeElectric;
-        return Number.isFinite(batteryRangeElectric)
-          ? t('vehicleProps:value.batteryRangeElectric', { consumption: batteryRangeElectric.toLocaleString(language) })
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    c02: {
-      title: t('vehicleProps:title.co2'),
-      get value() {
-        const c02 = car.environmentEmissions.co2;
-        return Number.isFinite(c02)
-          ? t('vehicleProps:value.co2', { co2: c02.toLocaleString(language) })
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    consumptionAndCo2: {
-      title: t('vehicleProps:title.consumptionAndCo2'),
-      get value() {
-        const consumptionPowerCombined = car.consumption.consumptionCombined;
-        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
-        const translatedUnit = t(`cbd:${consumptionUnit}`);
-        const co2 = car.environmentEmissions.co2;
-        const consumptionValue = Number.isFinite(consumptionPowerCombined)
-          ? t('vehicleProps:value.consumptionCombined', { consumption: consumptionPowerCombined.toLocaleString(language), unit: translatedUnit })
-          : t('vehicleProps:value.na');
-        const co2Value = Number.isFinite(co2)
-          ? t('vehicleProps:value.co2Combined', { co2: co2.toLocaleString(language) })
-          : t('vehicleProps:value.na');
-
-        return `${consumptionValue} | ${co2Value}`;
-      }
-    },
-    emissionClass: {
-      title: t('vehicleProps:title.emissionClass'),
-      get value() {
-        const emissionClass = car.environmentEmissions.emissionClass;
-        return isPropDefined(emissionClass) ? t(`cbd:${emissionClass}`) : t('vehicleProps:value.na');
-      }
-    },
-
-    emissionSticker: {
-      title: t('vehicleProps:title.emissionsSticker'),
-      get value() {
-        const emissionSticker = car.environmentEmissions.emissionSticker;
-        let icon = null;
-        const size = 25;
-
-        if (emissionSticker !== 'selector_emissionSticker_no') {
-          icon = EMISSION_STICKERS_ICONS[emissionSticker];
-        }
-
-        return icon ? <Icon src={icon} width={size} height={size} /> : t('vehicleProps:value.na');
-      }
-    },
-
-    wpEmissionSticker: {
-      title: t('vehicleProps:title.emissionsSticker'),
-      get value() {
-        const emissionSticker = car.environmentEmissions.emissionSticker;
-        let icon = null;
-        const size = 25;
-
-        if (emissionSticker !== 'selector_emissionSticker_no') {
-          icon = WP_EMISSION_STICKERS_ICONS[emissionSticker];
-        }
-
-        return icon ? <Icon src={icon} width={size} height={size} /> : t('vehicleProps:value.na');
-      }
-    },
-
-    energyEfficiencyClass: {
-      title: t('vehicleProps:title.energyEfficiencyClass'),
-      subTitle: t('vehicleProps:title.subTitle'),
-      get value() {
-        const level = car.environmentEmissions.energyEfficiencyClass;
-        return isPropDefined(level) ? <CO2Efficiency level={level} t={t} /> : t('vehicleProps:value.na');
-      }
-    },
-
-    offerAvailability: {
-      title: t('vehicleProps:title.offerAvailability'),
-      icon: 'carAvailability',
-      get value() {
-        const offerAvailabilityMode = offer.availabilityMode;
-        const offerAvailabilityTimestamp = offer.availabilityFrom;
-        const humanViewTime = moment.unix(offerAvailabilityTimestamp).format('DD.MM.YYYY');
-        let offerAvailability: string;
-
-        switch (offerAvailabilityMode) {
-          case 'selector_availabilityMode_always':
-            offerAvailability = t(`cbd:${offerAvailabilityMode}`);
-            break;
-
-          case 'selector_availabilityMode_fromDate':
-            if (offer.deliveryPeriod != null && offer.deliveryPeriod !== 'selector_unknown') {
-              offerAvailability = formatDeliveryPeriod(t, offer.deliveryPeriod);
-              break;
-            }
-
-            if (moment.utc(offerAvailabilityTimestamp, 'X').isBefore()) {
-              offerAvailability = t('cbd:selector_availabilityMode_always');
-            } else {
-              offerAvailability = t('vehicleProps:value.fromDate', { date: humanViewTime });
-            }
-            break;
-
-          default:
-            if (!offerAvailabilityMode && !firstRegistration && !mileage) offerAvailability = t('vehicleProps:value.onRequest');
-            else offerAvailability = null;
-        }
-        return isPropDefined(offerAvailability) ? offerAvailability : t('vehicleProps:value.na');
-      }
-    },
-
-    lastTechnicalService: {
-      title: t('vehicleProps:title.lastTechnicalService'),
-      get value() {
-        const lastTechnicalService = car.careService.lastTechnicalService;
-        return Number.isFinite(lastTechnicalService)
-          ? formatTimestamp({ timestamp: lastTechnicalService, format: 'MM/YYYY' })
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    generalInspection: {
-      title: t('vehicleProps:title.generalInspection'),
-      get value() {
-        const generalInspection = car.careService.generalInspection;
-        if (car.offer.newHuAu) {
-          return t('vehicleProps:value.new');
-        // tslint:disable-next-line:no-else-after-return
-        }else {
-          return Number.isFinite(generalInspection)
-          ? formatTimestamp({ timestamp: generalInspection, format: 'MM/YYYY' })
-          : t('vehicleProps:value.na');
-        }
-      }
-    },
-
-    condition: {
-      title: t('vehicleProps:title.сondition'),
-      get value() {
-        return isPropDefined(condition)
-          ? t(`cbd:${condition}`)
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    numberOfPreviousOwnersSimple: {
-      title: t('vehicleProps:title.numberOfPreviousOwners'),
-      get value() {
-        return Number.isFinite(numberOfPreviousOwners)
-          ? numberOfPreviousOwners
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    guarantee: {
-      title: t('vehicleProps:title.guarantee'),
-      get value() {
-        const guarantee = car.offer.warranty;
-        return isPropDefined(guarantee)
-          ? (guarantee ? t('vehicleProps:value.yes') : t('vehicleProps:value.no'))
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    maintenanceGuide: {
-      title: t('vehicleProps:title.maintenanceGuide'),
-      get value() {
-        const fullserviceHistory = car.careService.fullServiceHistory;
-        return isPropDefined(fullserviceHistory)
-          ? (fullserviceHistory ? t('vehicleProps:value.yes') : t('vehicleProps:value.no'))
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    nonSmokerVehicle: {
-      title: t('vehicleProps:title.nonSmokingVehicle'),
-      get value() {
-        return isPropDefined(nonSmokerVehicle)
-          ? (nonSmokerVehicle ? t('vehicleProps:value.yes') : t('vehicleProps:value.no'))
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    manufacturerColorName: {
-      title: t('vehicleProps:title.manufacturerColorName'),
-      get value() {
-        const color = car.exterior.manufacturerColorName;
-
-        if (typeof color !== 'string' || color === '') {
-          return t('vehicleProps:value.na');
-        }
-
-        return color[0].toUpperCase() + color.slice(1);
-      }
-    },
-
-    exteriorColor: {
-      title: t('vehicleProps:title.colour'),
-      get value() {
-        const exteriorColor = car.exterior.exteriorColor;
-        return isPropDefined(exteriorColor)
-          ? t(`cbd:${exteriorColor.replace('exterior_', '')}`)
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    appointmentsColor: {
-      title: t('vehicleProps:title.appointmentsColor'),
-      get value() {
-        const interiorColor = car.interior.interiorColor;
-        return isPropDefined(interiorColor)
-          ? t(`cbd:${interiorColor.replace('interior_', '')}`)
-          : t('vehicleProps:value.na');
-      }
-    },
-
-    interiorType: {
-      title: t('vehicleProps:title.interiorType'),
-      get value() {
-        const interiorType = car.interior.interiorType;
-        return isPropDefined(interiorType)
-          ? t(`cbd:${interiorType}`)
-          : t('vehicleProps:value.na');
-      }
-    },
-    signOfUse : {
-      title: t('vehicleProps:title.signsOfUse'),
-      isVisible: mileage > 100, // tslint:disable-line
-      isLongTitle: true,
-      get value() {
-        return t('vehicleProps:value.yes');
-      }
-    },
-    countryVersion : {
-      title: t('vehicleProps:title.countryVersion'),
-      get value() {
-        const countryName = car.countryActive[language];
-        if (!countryVersion) return t('vehicleProps:value.na');
-        switch (countryVersion) {
-          case 'de':
-            return t('vehicleProps:value.countryDEversion');
-            break;
-          case 'eu':
-            return t('vehicleProps:value.countryEUversion');
-            break;
-          case 'at':
-            return t('vehicleProps:value.countryATversion');
-            break;
-          default:
-            return t('vehicleProps:value.countryVersionName', { countryName });
-        }
-      }
-    }
-  };
-  return props;
-};
-
-export default getDecoratedProps;
+import * as React from 'react';
+import { isNull } from 'util';
+import moment from 'moment';
+
+import Icon from '../../components/_common/IconContainer/IconContainer';
+import CO2Efficiency from '../../components/_common/Co2Widget/CO2Efficiency';
+import { formatTimestamp } from '../utils/DateUtils';
+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';
+
+const formatDeliveryPeriod = (t: (key: string, options?: object) => string, deliveryPeriod: string) => {
+  const count: number = +DELIVERY_PERIODS_EXTRA.find((period: any) => period.value === deliveryPeriod).label;
+  // months until delivery date unrounded (float)
+  const monthsTo: number = moment.utc().diff(moment.utc().subtract(count, 'd'), 'M', true);
+  return Math.round(monthsTo) > 1
+    ? t('vehicleProps:value.deliveryPeriodMonths', { count: Math.round(monthsTo) })
+    : t('vehicleProps:value.deliveryPeriodDays', { count });
+};
+
+const isPropDefined = (prop: any) => {
+  const type = typeof prop;
+  if (type === 'string') {
+    return prop.indexOf('other') === -1
+      && prop.indexOf('unknown') === -1;
+  }
+  return !isNull(prop) && type !== 'undefined';
+};
+
+const isCheckedBatteryTime = (prop: any, t: (key: string, options?: object) => string) => {
+  switch (prop) {
+    case 'selector_batteryCharchingDurationMinutes':
+      return 'min';
+      break;
+    case 'selector_batteryCharchingDurationHours':
+      return 'h';
+      break;
+    default:
+      return t('vehicleProps:value.na');
+  }
+};
+
+export const getPowerLabel = (powerKW: number, powerPS: number): string => {
+  const powerKWlabel = !!powerKW ? `${powerKW} kW ` : '';
+  const powerPSlabel = !!powerPS ? `${!!powerKW ? '(' : ''}${powerPS} PS${!!powerKW ? ')' : ''}` : '';
+  const powerKWpowerPS = `${powerKWlabel}${powerPSlabel}`;
+
+  return powerKWpowerPS;
+};
+const wrapValue = (value:string): React.ReactNode => {
+  const regex = /-?\d+(\,\d+)?/; // match any digit
+  const matches = value.match(regex); // get an array of all digits found
+
+  if (matches && matches.length > 0) { // If at least one number is found in the input string
+    const index = value.indexOf(matches[0]) + matches[0].length;
+    const beforeText = value.slice(0, index);
+    const afterText = value.slice(index);
+
+    return (
+      <>
+        {beforeText}
+        <span className='smallText'>{afterText}</span>
+      </>
+    ); // Return a JSX element with a span wrapper around the text after the number
+  }
+  return <>{value}</>; // If no numbers are found in the input string, return the original string without any modification
+};
+
+const getDecoratedProps = (
+  car: ICar, // @TODO should have a proper interface
+  t: (key: string, options?: object) => string,
+  language: string = 'en',
+  simplifiedLabels: boolean = false // shortened labels for repsonsive layout (see 'power')
+): IDecoratedProp => {
+  const {
+    offer = {},
+    // countryName,
+    mainData: {
+      firstRegistration = '',
+      mileage = '',
+      numberOfPreviousOwners = '',
+      doors = '',
+      usageType = '',
+      countryVersion = '',
+      condition = '',
+      damaged = '',
+      category = '',
+      seats = '',
+      nonSmokerVehicle = '',
+      make = '',
+      model = ''
+    } = {}
+  } = car;
+  const props: any = {
+    makeModel: {
+      title: t('vehicleProps:title.makeModel'),
+      get value() { return `${make} ${model}`; }
+    },
+    mileage: {
+      title: t('vehicleProps:title.mileage'),
+      icon: 'speed',
+      get value() {
+        return Number.isFinite(parseInt(mileage, 10))
+          ? t('vehicleProps:value.mileage', { mileage: formatMileage(mileage) })
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    firstRegistration: {
+      title: t('vehicleProps:title.firstRegistration'),
+      icon: 'date',
+      get value() {
+        return Number.isFinite(firstRegistration)
+          ? formatTimestamp({ timestamp: firstRegistration, format: 'MM/YYYY' })
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    numberOfPreviousOwners: {
+      title: t('vehicleProps:title.numberOfPreviousOwners'),
+      icon: 'owner',
+      get value() {
+        return Number.isFinite(numberOfPreviousOwners)
+          ? t('vehicleProps:value.vehicleOwners', { count: numberOfPreviousOwners })
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    doorsOnly: {
+      icon: 'door',
+      get value() {
+        if (doors > 0) {
+          return t('vehicleProps:value.doorsOnly', { doors });
+        }
+
+        return t('vehicleProps:value.na');
+      }
+    },
+
+    usageType: {
+      icon: 'new',
+      get value() {
+        if (condition === 'selector_condition_new') return t('vehicleProps:value.newCar');
+        return isPropDefined(usageType) ? t(`cbd:${usageType}`) : t('cbd:selector_condition_used');
+      }
+    },
+
+    gearbox: {
+      get icon() {
+        const gearbox = car.driveSuspension.gearbox;
+        return isPropDefined(gearbox) ? car.driveSuspension.gearbox : 'selector_gearbox_manualShift';
+      },
+      get value() {
+        const gearbox = car.driveSuspension.gearbox;
+        return isPropDefined(gearbox) ? t(`cbd:${gearbox}`) : t('vehicleProps:value.na');
+      }
+    },
+
+    power: {
+      title: t('vehicleProps:title.power'),
+      icon: 'ps',
+      get value() {
+        const { powerKW, powerPS } = car.engineData;
+
+        if (Number.isFinite(powerKW) && Number.isFinite(powerPS)) {
+          return simplifiedLabels
+            ? t('vehicleProps:value.powerPS', { powerPS })
+            : t('vehicleProps:value.power', { powerKW, powerPS });
+        }
+
+        return t('vehicleProps:value.na');
+      }
+    },
+
+    powerAlternateView: {
+      title: t('vehicleProps:title.power'),
+      icon: 'kw',
+      get value() {
+        const { powerKW, powerPS } = car.engineData;
+        return Number.isFinite(powerKW) && Number.isFinite(powerPS)
+          ? t('vehicleProps:value.powerAlternateView', { powerKW, powerPS })
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    fuel: {
+      title: t('vehicleProps:title.fuel'),
+      get icon() { return car.consumption.fuel; },
+      get value() {
+        const fuel = car.consumption.fuel;
+        return isPropDefined(fuel) ? t(`cbd:${fuel}`) : t('vehicleProps:value.na');
+      }
+    },
+
+    accidentDamaged: {
+      title: t('cbd:mainData_accidentDamaged'),
+      icon: 'wrench',
+      get value() {
+        return damaged ? t('vehicleProps:value.damaged') : t('vehicleProps:value.accidentFree');
+      }
+    },
+
+    co2: {
+      icon: 'co2',
+      get value() {
+        const co2 = car.environmentEmissions.co2;
+        return Number.isFinite(co2)
+          ? t('vehicleProps:value.co2Combined', { co2: co2.toLocaleString(language) })
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    cylinders: {
+      title: t('vehicleProps:title.cylinders'),
+      get value() {
+        const { engineLocation } = car.engineData;
+        const cylinders = parseInt(car.engineData.cylinders, 10);
+        return Number.isFinite(cylinders)
+          ? (engineLocation ? `${cylinders} / ${t(`cbd:${engineLocation}`)}` : cylinders)
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    plugIn: {
+      title: 'Plug-In',
+      get value() {
+        const { hybridPlugin } = car.engineData;
+        return hybridPlugin ? t(`cbd:selector_hybridPlugin_yes`) : t('cbd:selector_hybridPlugin_no');
+      }
+    },
+
+    cubicCapacity: {
+      title: t('vehicleProps:title.cubicCapacity'),
+      get value() {
+        const cubicCapacity = car.engineData.cubicCapacity;
+        return Number.isFinite(cubicCapacity)
+          ? t('vehicleProps:value.cubicCapacity', { cubicCapacity: cubicCapacity.toLocaleString(language) })
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    torque: {
+      title: t('vehicleProps:title.torque'),
+      get value() {
+        const torque = car.engineData.torque;
+        return torque
+          ? t('vehicleProps:value.torque', { torque })
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    acceleration: {
+      title: t('vehicleProps:title.acceleration'),
+      get value() {
+        const acceleration = car.engineData.acceleration100;
+        return isPropDefined(acceleration)
+          ? (t('vehicleProps:value.acceleration', { seconds: acceleration }))
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    topSpeed: {
+      title: t('vehicleProps:title.topSpeed'),
+      get value() {
+        const topSpeed = car.engineData.highSpeed;
+        return isPropDefined(topSpeed)
+          ? (t('vehicleProps:value.topSpeed', { mileage: topSpeed }))
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    transmission: {
+      title: t('vehicleProps:title.transmission'),
+      get value() {
+        const gearbox = car.driveSuspension.gearbox;
+        return isPropDefined(gearbox) ? t(`cbd:${gearbox}`) : t('vehicleProps:value.na');
+      }
+    },
+
+    driveType: {
+      title: t('vehicleProps:title.driveType'),
+      get icon() {
+        const driveType = car.driveSuspension.driveType;
+        return isPropDefined(driveType) ? car.driveSuspension.driveType : 'selector_driveType_frontWheelDrive';
+      },
+      get value() {
+        const driveType = car.driveSuspension.driveType;
+        return isPropDefined(driveType) ? t(`cbd:${driveType}`) : t('vehicleProps:value.na');
+      }
+    },
+
+    fuelCapacity: {
+      title: t('vehicleProps:title.fuelCapacity'),
+      get value() {
+        const fuelCapacity = car.sizeVolumeWeight && car.sizeVolumeWeight.fuelCapacity;
+        return Number.isFinite(fuelCapacity)
+          ? t('vehicleProps:value.fuelCapacity', { capacity: fuelCapacity.toLocaleString(language) })
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    batteryCapacity: {
+      title: t('vehicleProps:title.batteryCapacityTitle'),
+      get value() {
+        const batteryCapacity = car.battery && car.battery.batteryCapacity;
+        return batteryCapacity && Number.isFinite(batteryCapacity)
+          ? t('vehicleProps:value.batteryCapacity', { batteryCapacity: batteryCapacity.toLocaleString(language) })
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    chargingDuration230V: {
+      title: t('vehicleProps:title.chargingDuration230V'),
+      get value() {
+        const batteryChargingDuration230VSelect = car.battery && car.battery.batteryChargingDuration230VSelect;
+        const batteryChargingDuration230VHour = car.battery && car.battery.batteryChargingDuration230VHour;
+        const batteryCharchingDuration230VMinutesHours = car.battery && car.battery.batteryCharchingDuration230VMinutesHours;
+
+        return batteryChargingDuration230VSelect
+          ? `${batteryChargingDuration230VHour ? `${batteryChargingDuration230VHour} ${isCheckedBatteryTime(batteryCharchingDuration230VMinutesHours, t)}` : ''} ${batteryChargingDuration230VSelect}`
+          : t('vehicleProps:value.na');
+      }
+    },
+    chargingDurationMaxSpeed: {
+      title: t('vehicleProps:title.chargingDurationMaxSpeed'),
+      get value() {
+        const batteryChargingDurationMaxSelect = car.battery && car.battery.batteryChargingDurationMaxSelect;
+        const batteryChargingDurationMaxHour = car.battery && car.battery.batteryChargingDurationMaxHour;
+        const batteryCharchingDurationMaxSelectMinutesHours = car.battery && car.battery.batteryCharchingDurationMaxSelectMinutesHours;
+
+        return batteryChargingDurationMaxSelect
+          ? `${batteryChargingDurationMaxHour ? `${batteryChargingDurationMaxHour} ${isCheckedBatteryTime(batteryCharchingDurationMaxSelectMinutesHours, t)}` : ''} ${batteryChargingDurationMaxSelect}`
+          : t('vehicleProps:value.na');
+      }
+    },
+    batteryChargerType: {
+      title: t('vehicleProps:title.batteryChargerType'),
+      get value() {
+        const batteryChargerType = car.battery && car.battery.batteryChargerType;
+
+        return isPropDefined(batteryChargerType)
+          ? batteryChargerType.map((item: any) => t(`cbd:${item}`)).join('\n')
+          : t('vehicleProps:value.na');
+      }
+    },
+    hsn: {
+      title: 'HSN',
+      get value() {
+        const hsn = car.metaData.hsn;
+        return isPropDefined(hsn) ? hsn : t('vehicleProps:value.na');
+      }
+    },
+
+    tsn: {
+      title: 'TSN',
+      get value() {
+        const tsn = car.metaData.tsn;
+        return isPropDefined(tsn) ? tsn : t('vehicleProps:value.na');
+      }
+    },
+
+    category: {
+      title: t('vehicleProps:title.category'),
+      get value() {
+        return isPropDefined(category) ? t(`cbd:${category}`) : t('vehicleProps:value.na');
+      }
+    },
+
+    length: {
+      title: t('vehicleProps:title.length'),
+      get value() {
+        const length = car.sizeVolumeWeight && car.sizeVolumeWeight.length;
+        return Number.isFinite(length)
+          ? t('vehicleProps:value.length', { size: length.toLocaleString(language) })
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    width: {
+      title: t('vehicleProps:title.width'),
+      get value() {
+        const width = car.sizeVolumeWeight && car.sizeVolumeWeight.width;
+        return Number.isFinite(width)
+          ? t('vehicleProps:value.width', { size: width.toLocaleString(language) })
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    height: {
+      title: t('vehicleProps:title.height'),
+      get value() {
+        const height = car.sizeVolumeWeight && car.sizeVolumeWeight.height;
+        return Number.isFinite(height)
+          ? t('vehicleProps:value.height', { size: height.toLocaleString(language) })
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    base: {
+      title: t('vehicleProps:title.base'),
+      get value() {
+        const wheelBase = car.driveSuspension.wheelBase;
+        return Number.isFinite(wheelBase)
+          ? t('vehicleProps:value.base', { size: wheelBase.toLocaleString(language) })
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    capacityLoad: {
+      title: t('vehicleProps:title.loadingVolume'),
+      get value() {
+        const completeCapacity = car.sizeVolumeWeight && car.sizeVolumeWeight.completeCapacity;
+        return Number.isFinite(completeCapacity)
+          ? t('vehicleProps:value.capacityLoad', { capacity: completeCapacity.toLocaleString(language) })
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    bootCapacity: {
+      title: t('vehicleProps:title.bootCapacity'),
+      get value() {
+        const cargoCapacity = car.sizeVolumeWeight && car.sizeVolumeWeight.cargoCapacity;
+        return Number.isFinite(cargoCapacity)
+          ? t('vehicleProps:value.bootCapacity', { capacity: cargoCapacity.toLocaleString(language) })
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    doors: {
+      title: t('vehicleProps:title.doors'),
+      get value() { return doors > 0 ? doors : t('vehicleProps:value.na'); }
+    },
+
+    seats: {
+      title: t('vehicleProps:title.seats'),
+      get value() { return seats > 0 ? seats : t('vehicleProps:value.na'); }
+    },
+
+    tare: {
+      title: t('vehicleProps:title.tare'),
+      get value() {
+        const emptyWeight = car.sizeVolumeWeight && car.sizeVolumeWeight.emptyWeight;
+        return Number.isFinite(emptyWeight)
+          ? t('vehicleProps:value.tareWeight', { weight: (emptyWeight).toLocaleString(language) })
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    maximumWeight: {
+      title: t('vehicleProps:title.maximumWeight'),
+      get value() {
+        const cargoCapacity = car.sizeVolumeWeight && car.sizeVolumeWeight.cargoCapacity;
+        return Number.isFinite(cargoCapacity)
+          ? t('vehicleProps:value.maximumWeightCapacity', { capacity: cargoCapacity.toLocaleString(language) })
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    trailerWeightBraked: {
+      title: t('vehicleProps:title.trailerLoadBraked'),
+      get value() {
+        const trailerWeightBraked = car.sizeVolumeWeight && car.sizeVolumeWeight.trailerWeightBraked;
+        return Number.isFinite(trailerWeightBraked)
+          ? t('vehicleProps:value.weight', { weight: trailerWeightBraked.toLocaleString(language) })
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    trailerWeightUnbraked: {
+      title: t('vehicleProps:title.trailerLoadUnbraked'),
+      get value() {
+        const trailerWeightUnbraked = car.sizeVolumeWeight && car.sizeVolumeWeight.trailerWeightUnbraked;
+        return Number.isFinite(trailerWeightUnbraked)
+          ? t('vehicleProps:value.weight', { weight: trailerWeightUnbraked.toLocaleString(language) })
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    consumptionInner: {
+      icon: 'fuelConsumption',
+      title: t('vehicleProps:title.consumptionInner'),
+      get value() {
+        const consumptionInner = car.consumption.consumptionInner;
+        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
+        const translatedUnit = t(`cbd:${consumptionUnit}`);
+        return Number.isFinite(consumptionInner)
+          ? t('vehicleProps:value.consumption', { consumption: consumptionInner.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    consumptionPowerInner: {
+      icon: 'fuelConsumption',
+      title: t('vehicleProps:title.consumptionPowerInner'),
+      get value() {
+        const consumptionPowerInner = car.consumption.consumptionInner;
+        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
+        const translatedUnit = t(`cbd:${consumptionUnit}`);
+        return Number.isFinite(consumptionPowerInner)
+          ? t('vehicleProps:value.consumptionPower', { consumption: consumptionPowerInner.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    consumptionPowerHybridInner: {
+      icon: 'fuelConsumption',
+      title: t('vehicleProps:title.consumptionPowerInner'),
+      get value() {
+        const consumptionPowerInner = car.consumption.consumptionPowerInner;
+        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
+        const translatedUnit = t(`cbd:${consumptionUnit}`);
+        return Number.isFinite(consumptionPowerInner)
+          ? t('vehicleProps:value.consumptionPower', { consumption: consumptionPowerInner.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    consumptionHydrogenInner: {
+      icon: 'fuelConsumption',
+      title: t('vehicleProps:title.consumptionHydrogenInner'),
+      get value() {
+        const consumptionHydrogenInner = car.consumption.consumptionInner;
+        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
+        const translatedUnit = t(`cbd:${consumptionUnit}`);
+        return Number.isFinite(consumptionHydrogenInner)
+          ? t('vehicleProps:value.consumptionGas', { consumption: consumptionHydrogenInner.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+      }
+    },
+    consumptionGasInner: {
+      icon: 'fuelConsumption',
+      title: t('vehicleProps:title.consumptionGasInner'),
+      get value() {
+        const consumptionGasInner = car.consumption.consumptionInner;
+        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
+        const translatedUnit = t(`cbd:${consumptionUnit}`);
+        return Number.isFinite(consumptionGasInner)
+          ? t('vehicleProps:value.consumptionGas', { consumption: consumptionGasInner.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    consumptionOuter: {
+      icon: 'fuelConsumption',
+      title: t('vehicleProps:title.consumptionOuter'),
+      get value() {
+        const consumptionOuter = car.consumption.consumptionOuter;
+        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
+        const translatedUnit = t(`cbd:${consumptionUnit}`);
+        return Number.isFinite(consumptionOuter)
+          ? t('vehicleProps:value.consumption', { consumption: consumptionOuter.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    consumptionPowerOuter: {
+      icon: 'fuelConsumption',
+      title: t('vehicleProps:title.consumptionPowerOuter'),
+      get value() {
+        const consumptionPowerOuter = car.consumption.consumptionOuter;
+        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
+        const translatedUnit = t(`cbd:${consumptionUnit}`);
+        return Number.isFinite(consumptionPowerOuter)
+          ? t('vehicleProps:value.consumptionPower', { consumption: consumptionPowerOuter.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    consumptionPowerHybridOuter: {
+      icon: 'fuelConsumption',
+      title: t('vehicleProps:title.consumptionPowerOuter'),
+      get value() {
+        const consumptionPowerOuter = car.consumption.consumptionPowerOuter;
+        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
+        const translatedUnit = t(`cbd:${consumptionUnit}`);
+        return Number.isFinite(consumptionPowerOuter)
+          ? t('vehicleProps:value.consumptionPower', { consumption: consumptionPowerOuter.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    consumptionHydrogenOuter: {
+      icon: 'fuelConsumption',
+      title: t('vehicleProps:title.consumptionHydrogenOuter'),
+      get value() {
+        const consumptionHydrogenOuter = car.consumption.consumptionOuter;
+        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
+        const translatedUnit = t(`cbd:${consumptionUnit}`);
+        return Number.isFinite(consumptionHydrogenOuter)
+          ? t('vehicleProps:value.consumptionGas', { consumption: consumptionHydrogenOuter.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    consumptionGasOuter: {
+      icon: 'fuelConsumption',
+      title: t('vehicleProps:title.consumptionGasOuter'),
+      get value() {
+        const consumptionGasOuter = car.consumption.consumptionOuter;
+        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
+        const translatedUnit = t(`cbd:${consumptionUnit}`);
+        return Number.isFinite(consumptionGasOuter)
+          ? t('vehicleProps:value.consumptionGas', { consumption: consumptionGasOuter.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    consumptionCombined: {
+      icon: 'fuelConsumption',
+      title: t('vehicleProps:title.сonsumptionCombined'),
+      get value() {
+        const consumptionCombined = car.consumption.consumptionCombined;
+        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
+        const translatedUnit = t(`cbd:${consumptionUnit}`);
+        return Number.isFinite(consumptionCombined)
+          ? t('vehicleProps:value.consumption', { consumption: consumptionCombined.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    consumptionPowerCombined: {
+      icon: 'fuelConsumption',
+      title: t('vehicleProps:title.consumptionPowerCombined'),
+      get value() {
+        const consumptionPowerCombined = car.consumption.consumptionCombined;
+        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
+        const translatedUnit = t(`cbd:${consumptionUnit}`);
+        return Number.isFinite(consumptionPowerCombined)
+          ? t('vehicleProps:value.consumptionPower', { consumption: consumptionPowerCombined.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    consumptionPowerHybridCombined: {
+      icon: 'fuelConsumption',
+      title: t('vehicleProps:title.consumptionPowerCombined'),
+      get value() {
+        const consumptionPowerCombined = car.consumption.consumptionPowerCombined;
+        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
+        const translatedUnit = t(`cbd:${consumptionUnit}`);
+        return Number.isFinite(consumptionPowerCombined)
+          ? t('vehicleProps:value.consumptionPower', { consumption: consumptionPowerCombined.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    consumptionHydrogenCombined: {
+      icon: 'fuelConsumption',
+      title: t('vehicleProps:title.consumptionHydrogenCombined'),
+      get value() {
+        const consumptionHydrogenCombined = car.consumption.consumptionCombined;
+        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
+        const translatedUnit = t(`cbd:${consumptionUnit}`);
+        return Number.isFinite(consumptionHydrogenCombined)
+          ? t('vehicleProps:value.consumptionGas', { consumption: consumptionHydrogenCombined.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    consumptionGasCombined: {
+      icon: 'fuelConsumption',
+      title: t('vehicleProps:title.consumptionGasCombined'),
+      get value() {
+        const consumptionGasCombined = car.consumption.consumptionCombined;
+        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
+        const translatedUnit = t(`cbd:${consumptionUnit}`);
+        return Number.isFinite(consumptionGasCombined)
+          ? t('vehicleProps:value.consumptionGas', { consumption: consumptionGasCombined.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    consumptionCombinedAlternateView: {
+      icon: 'fuelConsumption',
+      get value() {
+        const consumptionCombined = car.consumption.consumptionCombined;
+        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
+        const translatedUnit = t(`cbd:${consumptionUnit}`);
+
+        const co2 = car.environmentEmissions.co2;
+
+        const consumptionValue = Number.isFinite(consumptionCombined)
+          ? t('vehicleProps:value.consumptionCombined', { consumption: consumptionCombined.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+
+        const co2Value = Number.isFinite(co2)
+          ? t('vehicleProps:value.co2Combined', { co2: co2.toLocaleString(language) })
+          : t('vehicleProps:value.na');
+
+        return <>{wrapValue(consumptionValue)} <br /> {wrapValue(co2Value)}</>;
+      }
+    },
+    consumptionPowerCombinedAlternateView: {
+      icon: 'fuelConsumption',
+      title: t('vehicleProps:title.consumptionPowerCombined'),
+      get value() {
+        const consumptionPowerCombined = car.consumption.consumptionCombined;
+        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
+        const translatedUnit = t(`cbd:${consumptionUnit}`);
+        const co2 = car.environmentEmissions.co2;
+
+        const consumptionValue = Number.isFinite(consumptionPowerCombined)
+          ? t('vehicleProps:value.consumptionPower', { consumption: consumptionPowerCombined.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+
+        const co2Value = Number.isFinite(co2)
+          ? t('vehicleProps:value.co2Combined', { co2: co2.toLocaleString(language) })
+          : t('vehicleProps:value.na');
+
+        return <>{wrapValue(consumptionValue)} <br /> {wrapValue(co2Value)}</>;
+      }
+    },
+    consumptionHydrogenCombinedAlternateView: {
+      icon: 'fuelConsumption',
+      title: t('vehicleProps:title.consumptionHydrogenCombined'),
+      get value() {
+        const consumptionHydrogenCombined = car.consumption.consumptionCombined;
+        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
+        const translatedUnit = t(`cbd:${consumptionUnit}`);
+        const co2 = car.environmentEmissions.co2;
+
+        const consumptionValue = Number.isFinite(consumptionHydrogenCombined)
+          ? t('vehicleProps:value.consumptionGas', { consumption: consumptionHydrogenCombined.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+
+        const co2Value = Number.isFinite(co2)
+          ? t('vehicleProps:value.co2Combined', { co2: co2.toLocaleString(language) })
+          : t('vehicleProps:value.na');
+
+        return <>{wrapValue(consumptionValue)} <br /> {wrapValue(co2Value)}</>;
+      }
+    },
+    consumptionGasCombinedAlternateView: {
+      icon: 'fuelConsumption',
+      title: t('vehicleProps:title.consumptionGasCombined'),
+      get value() {
+        const consumptionGasCombined = car.consumption.consumptionCombined;
+        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
+        const translatedUnit = t(`cbd:${consumptionUnit}`);
+
+        const co2 = car.environmentEmissions.co2;
+
+        const consumptionValue = Number.isFinite(consumptionGasCombined)
+          ? t('vehicleProps:value.consumptionGas', { consumption: consumptionGasCombined.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+
+        const co2Value = Number.isFinite(co2)
+          ? t('vehicleProps:value.co2Combined', { co2: co2.toLocaleString(language) })
+          : t('vehicleProps:value.na');
+
+        return <>{wrapValue(consumptionValue)} <br /> {wrapValue(co2Value)}</>;
+      }
+    },
+
+    consumptionCombinedHybridAlternateView: {
+      icon: 'fuelConsumption',
+      get value() {
+        const consumptionCombined = +car.consumption.consumptionCombined;
+        const consumptionPowerCombined = +car.consumption.consumptionPowerCombined;
+        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 consumptionCombinedContent = t('vehicleProps:value.consumptionCombined', { consumption: consumptionCombined.toLocaleString(language), unit: translatedUnit });
+
+        const co2 = car.environmentEmissions.co2;
+        const co2Value = Number.isFinite(co2)
+        ? t('vehicleProps:value.co2Combined', { co2: co2.toLocaleString(language) })
+        : t('vehicleProps:value.na');
+        const hybridPlugin = car.engineData.hybridPlugin;
+        return Number.isFinite(consumptionCombined) && Number.isFinite(consumptionPowerCombined)
+          ? <React.Fragment>
+            {consumptionPowerCombined && hybridPlugin ? wrapValue(consumptionPowerCombinedContent) : ''}
+            {consumptionPowerCombined && hybridPlugin ? <br /> : ''}
+            {wrapValue(consumptionCombinedContent)} <br />
+            {wrapValue(co2Value)}
+          </React.Fragment>
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    rangeHydrogen: {
+      title: t('vehicleProps:title.rangeHydrogen'),
+      get value() {
+        const { rangeHydrogen } = car.engineData;
+        return Number.isFinite(rangeHydrogen)
+          ? t('vehicleProps:value.batteryRangeElectric', { consumption: rangeHydrogen.toLocaleString(language) })
+          : t('vehicleProps:value.na');
+      }
+    },
+    batteryRangeElectric: {
+      title: t('vehicleProps:title.batteryRangeElectric'),
+      get value() {
+        const batteryRangeElectric = car.battery && car.battery.batteryRangeElectric;
+        return Number.isFinite(batteryRangeElectric)
+          ? t('vehicleProps:value.batteryRangeElectric', { consumption: batteryRangeElectric.toLocaleString(language) })
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    c02: {
+      title: t('vehicleProps:title.co2'),
+      get value() {
+        const c02 = car.environmentEmissions.co2;
+        return Number.isFinite(c02)
+          ? t('vehicleProps:value.co2', { co2: c02.toLocaleString(language) })
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    consumptionAndCo2: {
+      title: t('vehicleProps:title.consumptionAndCo2'),
+      get value() {
+        const consumptionPowerCombined = car.consumption.consumptionCombined;
+        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
+        const translatedUnit = t(`cbd:${consumptionUnit}`);
+        const co2 = car.environmentEmissions.co2;
+        const consumptionValue = Number.isFinite(consumptionPowerCombined)
+          ? t('vehicleProps:value.consumptionCombined', { consumption: consumptionPowerCombined.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+        const co2Value = Number.isFinite(co2)
+          ? t('vehicleProps:value.co2Combined', { co2: co2.toLocaleString(language) })
+          : t('vehicleProps:value.na');
+
+        return `${consumptionValue} | ${co2Value}`;
+      }
+    },
+    emissionClass: {
+      title: t('vehicleProps:title.emissionClass'),
+      get value() {
+        const emissionClass = car.environmentEmissions.emissionClass;
+        return isPropDefined(emissionClass) ? t(`cbd:${emissionClass}`) : t('vehicleProps:value.na');
+      }
+    },
+
+    emissionSticker: {
+      title: t('vehicleProps:title.emissionsSticker'),
+      get value() {
+        const emissionSticker = car.environmentEmissions.emissionSticker;
+        let icon = null;
+        const size = 25;
+
+        if (emissionSticker !== 'selector_emissionSticker_no') {
+          icon = EMISSION_STICKERS_ICONS[emissionSticker];
+        }
+
+        return icon ? <Icon src={icon} width={size} height={size} /> : t('vehicleProps:value.na');
+      }
+    },
+
+    wpEmissionSticker: {
+      title: t('vehicleProps:title.emissionsSticker'),
+      get value() {
+        const emissionSticker = car.environmentEmissions.emissionSticker;
+        let icon = null;
+        const size = 25;
+
+        if (emissionSticker !== 'selector_emissionSticker_no') {
+          icon = WP_EMISSION_STICKERS_ICONS[emissionSticker];
+        }
+
+        return icon ? <Icon src={icon} width={size} height={size} /> : t('vehicleProps:value.na');
+      }
+    },
+
+    energyEfficiencyClass: {
+      title: t('vehicleProps:title.energyEfficiencyClass'),
+      subTitle: t('vehicleProps:title.subTitle'),
+      get value() {
+        const level = car.environmentEmissions.energyEfficiencyClass;
+        return isPropDefined(level) ? <CO2Efficiency level={level} t={t} /> : t('vehicleProps:value.na');
+      }
+    },
+
+    offerAvailability: {
+      title: t('vehicleProps:title.offerAvailability'),
+      icon: 'carAvailability',
+      get value() {
+        const offerAvailabilityMode = offer.availabilityMode;
+        const offerAvailabilityTimestamp = offer.availabilityFrom;
+        const humanViewTime = moment.unix(offerAvailabilityTimestamp).format('DD.MM.YYYY');
+        let offerAvailability: string;
+
+        switch (offerAvailabilityMode) {
+          case 'selector_availabilityMode_always':
+            offerAvailability = t(`cbd:${offerAvailabilityMode}`);
+            break;
+
+          case 'selector_availabilityMode_fromDate':
+            if (offer.deliveryPeriod != null && offer.deliveryPeriod !== 'selector_unknown') {
+              offerAvailability = formatDeliveryPeriod(t, offer.deliveryPeriod);
+              break;
+            }
+
+            if (moment.utc(offerAvailabilityTimestamp, 'X').isBefore()) {
+              offerAvailability = t('cbd:selector_availabilityMode_always');
+            } else {
+              offerAvailability = t('vehicleProps:value.fromDate', { date: humanViewTime });
+            }
+            break;
+
+          default:
+            if (!offerAvailabilityMode && !firstRegistration && !mileage) offerAvailability = t('vehicleProps:value.onRequest');
+            else offerAvailability = null;
+        }
+        return isPropDefined(offerAvailability) ? offerAvailability : t('vehicleProps:value.na');
+      }
+    },
+
+    lastTechnicalService: {
+      title: t('vehicleProps:title.lastTechnicalService'),
+      get value() {
+        const lastTechnicalService = car.careService.lastTechnicalService;
+        return Number.isFinite(lastTechnicalService)
+          ? formatTimestamp({ timestamp: lastTechnicalService, format: 'MM/YYYY' })
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    generalInspection: {
+      title: t('vehicleProps:title.generalInspection'),
+      get value() {
+        const generalInspection = car.careService.generalInspection;
+        if (car.offer.newHuAu) {
+          return t('vehicleProps:value.new');
+        // tslint:disable-next-line:no-else-after-return
+        }else {
+          return Number.isFinite(generalInspection)
+          ? formatTimestamp({ timestamp: generalInspection, format: 'MM/YYYY' })
+          : t('vehicleProps:value.na');
+        }
+      }
+    },
+
+    condition: {
+      title: t('vehicleProps:title.сondition'),
+      get value() {
+        return isPropDefined(condition)
+          ? t(`cbd:${condition}`)
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    numberOfPreviousOwnersSimple: {
+      title: t('vehicleProps:title.numberOfPreviousOwners'),
+      get value() {
+        return Number.isFinite(numberOfPreviousOwners)
+          ? numberOfPreviousOwners
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    guarantee: {
+      title: t('vehicleProps:title.guarantee'),
+      get value() {
+        const guarantee = car.offer.warranty;
+        return isPropDefined(guarantee)
+          ? (guarantee ? t('vehicleProps:value.yes') : t('vehicleProps:value.no'))
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    maintenanceGuide: {
+      title: t('vehicleProps:title.maintenanceGuide'),
+      get value() {
+        const fullserviceHistory = car.careService.fullServiceHistory;
+        return isPropDefined(fullserviceHistory)
+          ? (fullserviceHistory ? t('vehicleProps:value.yes') : t('vehicleProps:value.no'))
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    nonSmokerVehicle: {
+      title: t('vehicleProps:title.nonSmokingVehicle'),
+      get value() {
+        return isPropDefined(nonSmokerVehicle)
+          ? (nonSmokerVehicle ? t('vehicleProps:value.yes') : t('vehicleProps:value.no'))
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    manufacturerColorName: {
+      title: t('vehicleProps:title.manufacturerColorName'),
+      get value() {
+        const color = car.exterior.manufacturerColorName;
+
+        if (typeof color !== 'string' || color === '') {
+          return t('vehicleProps:value.na');
+        }
+
+        return color[0].toUpperCase() + color.slice(1);
+      }
+    },
+
+    exteriorColor: {
+      title: t('vehicleProps:title.colour'),
+      get value() {
+        const exteriorColor = car.exterior.exteriorColor;
+        return isPropDefined(exteriorColor)
+          ? t(`cbd:${exteriorColor.replace('exterior_', '')}`)
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    appointmentsColor: {
+      title: t('vehicleProps:title.appointmentsColor'),
+      get value() {
+        const interiorColor = car.interior.interiorColor;
+        return isPropDefined(interiorColor)
+          ? t(`cbd:${interiorColor.replace('interior_', '')}`)
+          : t('vehicleProps:value.na');
+      }
+    },
+
+    interiorType: {
+      title: t('vehicleProps:title.interiorType'),
+      get value() {
+        const interiorType = car.interior.interiorType;
+        return isPropDefined(interiorType)
+          ? t(`cbd:${interiorType}`)
+          : t('vehicleProps:value.na');
+      }
+    },
+    signOfUse : {
+      title: t('vehicleProps:title.signsOfUse'),
+      isVisible: mileage > 100, // tslint:disable-line
+      isLongTitle: true,
+      get value() {
+        return t('vehicleProps:value.yes');
+      }
+    },
+    countryVersion : {
+      title: t('vehicleProps:title.countryVersion'),
+      get value() {
+        const countryName = car.countryActive[language];
+        if (!countryVersion) return t('vehicleProps:value.na');
+        switch (countryVersion) {
+          case 'de':
+            return t('vehicleProps:value.countryDEversion');
+            break;
+          case 'eu':
+            return t('vehicleProps:value.countryEUversion');
+            break;
+          case 'at':
+            return t('vehicleProps:value.countryATversion');
+            break;
+          default:
+            return t('vehicleProps:value.countryVersionName', { countryName });
+        }
+      }
+    }
+  };
+  return props;
+};
+
+export default getDecoratedProps;