@bytebrand/fe-ui-core 4.7.0 → 4.8.0

package/package.json

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

package/source/components/AccordionWidget/AccordionWidget.tsx

@@ -4,7 +4,7 @@ import { Visible } from 'react-grid-system';
 import _get from 'lodash/get';
 
 import { getPowerLabel } from '../../framework/vehiclesProps/decoratedProps';
-import { getVehicleDetails, getOverviewDetails, dimensionDetails, availAbilityDetails, colorAndMaterialDetails, getWltpValues } from '../../framework/vehiclesProps/vehicleDetails';
+import { getVehicleDetails, getOverviewDetails, dimensionDetails, availAbilityDetails, colorAndMaterialDetails, getWltpValues, getCostModelValues } from '../../framework/vehiclesProps/vehicleDetails';
 
 import {
   IEquipmentProps,
@@ -137,7 +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 costModelProps = getCostModelValues();
     const dimensionProps = dimensionDetails;
     const availAbilityProps = availAbilityDetails;
     const colorAndMaterialProps = colorAndMaterialDetails;
@@ -148,6 +148,7 @@ class AccordionWidget extends React.Component<IAccardionSectionProps, IAccardion
         {this.renderTable(decoratedProps, dimensionProps, t('accordion.tableDimensions'))}
         {this.renderTable(decoratedProps, wltpProps, t('accordion.tableEnvironmentWLTP'))}
         {this.renderTable(decoratedProps, environmentProps, t('accordion.tableEnvironment'))}
+        {this.renderTable(decoratedProps, costModelProps, t('accordion.tableCostsPerYear'))}
         {this.renderTable(decoratedProps, availAbilityProps, t('accordion.tableAvailability'))}
         {this.renderTable(decoratedProps, colorAndMaterialProps, t('accordion.tableMaterial'))}
         {this.renderExtendTable(carEquipment, t('accordion.tableEqipment'))}

package/source/framework/types/types.ts

@@ -349,3 +349,10 @@ export interface ITFunction {
   <T = string>(key: string, options?: object): T;
   <T = string>(keys: string[], options?: object): T;
 }
+
+export interface IWltpConsumption {
+  wltpCombined?: number;
+  wltpPowerCombined?: number;
+  wltpWeightedCombined?: number;
+  wltpWeightedPowerCombined?: number;
+}

package/source/framework/vehiclesProps/decoratedProps.tsx

@@ -9,6 +9,7 @@ import { EMISSION_STICKERS_ICONS, WP_EMISSION_STICKERS_ICONS } from '../constant
 import { DELIVERY_PERIODS_EXTRA } from '../constants';
 import { IDecoratedProp, ICar } from '../types/types';
 import { getFormattedPrice } from '../utils/CommonUtils';
+import { IWltpConsumption } 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;
@@ -71,7 +72,9 @@ 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')
+  simplifiedLabels: boolean = false, // shortened labels for repsonsive layout (see 'power'),
+  getFuelPrice?: (fuelSelector: string, consumption: IWltpConsumption, hybridPlugin?: boolean) => number,
+  getVehicleTax?: (fuelType: string, cubicCapacity: number, co2: number, firstRegistration: number) => number
 ): IDecoratedProp => {
   const {
     offer = {},
@@ -1538,25 +1541,25 @@ const getDecoratedProps = (
           : t('vehicleProps:value.na');
       }
     },
-    // 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');
-    //   }
-    // },
+    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() {
-        const { basePrice } = car.costModel.co2Costs.low;
+        const basePrice = car.costModel.co2Costs.low.basePrice || 30;
         return Number.isFinite(basePrice)
           ? t('vehicleProps:value.price', { price: getFormattedPrice(basePrice, '$,.2f') })
           : t('vehicleProps:value.na');
@@ -1565,7 +1568,7 @@ const getDecoratedProps = (
     wltpCo2CostsMiddle: {
       title: t('vehicleProps:title.wltpCo2MidPrice'),
       get value() {
-        const { basePrice } = car.costModel.co2Costs.middle;
+        const basePrice = car.costModel.co2Costs.middle.basePrice || 50;
         return Number.isFinite(basePrice)
           ? t('vehicleProps:value.price', { price: getFormattedPrice(basePrice, '$,.2f') })
           : t('vehicleProps:value.na');
@@ -1574,7 +1577,7 @@ const getDecoratedProps = (
     wltpCo2CostsHigh: {
       title: t('vehicleProps:title.wltpCo2HighPrice'),
       get value() {
-        const { basePrice } = car.costModel.co2Costs.high;
+        const basePrice = car.costModel.co2Costs.high.basePrice || 70;
         return Number.isFinite(basePrice)
           ? t('vehicleProps:value.price', { price: getFormattedPrice(basePrice, '$,.2f') })
           : t('vehicleProps:value.na');
@@ -1592,7 +1595,22 @@ const getDecoratedProps = (
     fuelPrice: {
       title: t('vehicleProps:title.fuelPrice'),
       get value() {
-        const { fuelPrice } = car.costModel;
+        const fuel = car.consumption.fuel;
+        const wltpCombined = car.consumption.wltpCombined || car.consumption.wltpWeightedCombined;
+        const wltpPowerCombined = car.consumption.wltpPowerCombined || car.consumption.wltpWeightedPowerCombined;
+        const wltpWeightedCombined = car.consumption.wltpWeightedCombined;
+        const wltpWeightedPowerCombined = car.consumption.wltpWeightedPowerCombined;
+
+        const wltpConsumption = {
+          wltpCombined,
+          wltpPowerCombined,
+          wltpWeightedCombined,
+          wltpWeightedPowerCombined
+        };
+
+        const { hybridPlugin } = car.engineData;
+
+        const fuelPrice = car.costModel.fuelPrice ? car.costModel.fuelPrice : getFuelPrice(fuel, wltpConsumption, hybridPlugin);
         return Number.isFinite(fuelPrice)
           ? t('vehicleProps:value.fuelPrice', { price: getFormattedPrice(fuelPrice, '$,.2f') })
           : t('vehicleProps:value.na');
@@ -1610,7 +1628,10 @@ const getDecoratedProps = (
     wltpCostModelTax: {
       title: t('vehicleProps:title.wltpVehicleTax'),
       get value() {
-        const { tax } = car.costModel;
+        const cubicCapacity = car.engineData.cubicCapacity;
+        const fuel = car.consumption.fuel;
+        const wltpCo2 = car.environmentEmissions.wltpCo2;
+        const tax = car.costModel.tax ? car.costModel.tax : getVehicleTax(fuel, cubicCapacity, wltpCo2, firstRegistration);
         return Number.isFinite(tax)
           ? t('vehicleProps:value.price', { price: getFormattedPrice(tax, '$,.2f') })
           : t('vehicleProps:value.na');

package/source/framework/vehiclesProps/vehicleDetails.ts

@@ -48,7 +48,7 @@ const environmentPluginHybridWLTP = ['wltpWeightedCombined', 'wltpTotalRange', '
   'fuelPrice', 'powerPrice', 'consumptionPriceYear', 'wltpEnergyEfficiencyClass'];
 const environmentElectroBenzinDieselEthanolHybridWLTP = ['wltpCombined', 'wltpCo2', 'wltpSlow', 'wltpMedium', 'wltpFast', 'wltpVeryFast', 'fuelPrice', 'consumptionPriceYear', 'wltpEnergyEfficiencyClass'];
 const environmentHydrogenWLTP = ['wltpCombinedGas', 'wltpCo2', 'wltpSlowGas', 'wltpMediumGas', 'wltpFastGas', 'wltpVeryFastGas', 'fuelPrice', 'consumptionPriceYear', 'wltpEnergyEfficiencyClass'];
-// const costModel = ['wltpEnergyCosts', 'wltpCo2CostsLow',, 'wltpCo2CostsMiddle', 'wltpCo2CostsHigh', 'wltpCostModelTax'];
+const costModel = ['wltpEnergyCosts', 'wltpCo2CostsLow', 'wltpCo2CostsMiddle', 'wltpCo2CostsHigh', 'wltpCostModelTax'];
 
 export const engineDetails: IEngineDetails = [
   {
@@ -356,9 +356,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) {