@bytebrand/fe-ui-core 4.4.2 → 4.6.2

package/package.json

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

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

@@ -64,12 +64,15 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
       driveType
     },
     environmentEmissions: {
-      co2: environmentEmissions.co2
+      co2: environmentEmissions.co2,
+      wltpCo2: environmentEmissions.wltpCo2 || consumption.wltpCo2
     },
     consumption: {
       fuel: consumption.fuel,
       consumptionCombined: consumption.consumptionCombined,
       consumptionPowerCombined: consumption.consumptionPowerCombined,
+      wltpCombined: consumption.wltpCombined,
+      wltpPowerCombined: consumption.wltpPowerCombined
     },
   };
 

package/source/framework/vehiclesProps/decoratedLightProps.tsx

@@ -115,9 +115,19 @@ const getDecoratedLightProps = (
         const consumptionCombined = car.consumption.consumptionCombined;
         const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
         const translatedUnit = t(`cbd:${consumptionUnit}`);
+        const wltpConsumptionCombined = car.consumption.wltpCombined;
+        const wltpCo2 = car.environmentEmissions.wltpCo2 || car.consumption.wltpCo2;
 
         const co2 = car.environmentEmissions.co2;
 
+        const wltpConsumptionValue = Number.isFinite(wltpConsumptionCombined)
+          ? t('vehicleProps:value.consumptionCombined', { consumption: wltpConsumptionCombined.toLocaleString(language), unit: translatedUnit })
+          : null;
+
+        const wltpCo2Value = Number.isFinite(wltpCo2)
+          ? t('vehicleProps:value.wltpCo2Combined', { co2: wltpCo2.toLocaleString(language) })
+          : null;
+
         const consumptionValue = Number.isFinite(consumptionCombined)
           ? t('vehicleProps:value.consumptionCombined', { consumption: consumptionCombined.toLocaleString(language), unit: translatedUnit })
           : t('vehicleProps:value.na');
@@ -126,6 +136,10 @@ const getDecoratedLightProps = (
           ? t('vehicleProps:value.co2Combined', { co2: co2.toLocaleString(language) })
           : t('vehicleProps:value.na');
 
+        if (wltpConsumptionValue && wltpCo2Value) {
+          return <>{wltpConsumptionValue} - {wltpCo2Value}</>;
+        }
+
         return <>{consumptionValue} <br /> {co2Value}</>;
       }
     },
@@ -138,6 +152,16 @@ const getDecoratedLightProps = (
         const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
         const translatedUnit = t(`cbd:${consumptionUnit}`);
         const co2 = car.environmentEmissions.co2;
+        const wltpConsumptionPowerCombined = car.consumption.wltpPowerCombined;
+        const wltpCo2 = car.consumption.wltpCo2;
+
+        const wltpConsumptionValue = Number.isFinite(wltpConsumptionPowerCombined)
+          ? t('vehicleProps:value.consumptionPower', { consumption: wltpConsumptionPowerCombined.toLocaleString(language), unit: translatedUnit })
+          : null;
+
+        const wltpCo2Value = Number.isFinite(wltpCo2)
+          ? t('vehicleProps:value.wltpCo2Combined', { co2: wltpCo2.toLocaleString(language) })
+          : null;
 
         const consumptionValue = Number.isFinite(consumptionPowerCombined)
           ? t('vehicleProps:value.consumptionPower', { consumption: consumptionPowerCombined.toLocaleString(language), unit: translatedUnit })
@@ -147,6 +171,10 @@ const getDecoratedLightProps = (
           ? t('vehicleProps:value.co2Combined', { co2: co2.toLocaleString(language) })
           : t('vehicleProps:value.na');
 
+        if (wltpConsumptionValue && wltpCo2Value) {
+          return <>{wltpConsumptionValue} - {wltpCo2Value}</>;
+        }
+
         return <>{consumptionValue} <br /> {co2Value} </>;
       }
     },
@@ -157,17 +185,41 @@ const getDecoratedLightProps = (
       get value() {
         const consumptionCombined = +car.consumption.consumptionCombined;
         const consumptionPowerCombined = +car.consumption.consumptionPowerCombined;
+        const wltpConsumptionPowerCombined = car.consumption.wltpPowerCombined;
+        const wltpConsumptionCombined = car.consumption.wltpCombined;
         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 wltpConsumptionPowerCombinedContent = wltpConsumptionPowerCombined
+          ? t('vehicleProps:value.consumptionPowerCombined', { consumption: wltpConsumptionPowerCombined.toLocaleString(language), unit: translatedUnit })
+          : null;
+        const wltpConsumptionCombinedContent = wltpConsumptionCombined ?
+          t('vehicleProps:value.consumptionCombined', { consumption: wltpConsumptionCombined.toLocaleString(language), unit: translatedUnit })
+          : null;
+
         const co2 = car.environmentEmissions.co2;
+        const wltpCo2 = car.consumption.wltpCo2;
+
         const co2Value = Number.isFinite(co2)
         ? t('vehicleProps:value.co2Combined', { co2: co2.toLocaleString(language) })
         : t('vehicleProps:value.na');
 
+        const wltpCo2Value = Number.isFinite(co2)
+        ? t('vehicleProps:value.wltpCo2WtdCombined', { co2: wltpCo2.toLocaleString(language) })
+        : null;
+
+        const hybridPlugin = car.engineData.hybridPlugin;
+
+        if (wltpConsumptionCombinedContent && wltpCo2Value) {
+          return <React.Fragment>
+            {wltpConsumptionPowerCombinedContent && hybridPlugin ? `${wltpConsumptionPowerCombinedContent} - ` : ''}
+            {wltpConsumptionCombinedContent}, {wltpCo2Value}
+          </React.Fragment>
+        }
+
         return Number.isFinite(consumptionCombined) || Number.isFinite(consumptionPowerCombined)
           ? <React.Fragment>
             {consumptionPowerCombined ? consumptionPowerCombinedContent : t('vehicleProps:value.na')} <br />{consumptionCombinedContent} <br /> {co2Value}
@@ -185,6 +237,8 @@ const getDecoratedLightProps = (
         const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
         const translatedUnit = t(`cbd:${consumptionUnit}`);
         const co2 = car.environmentEmissions.co2;
+        const wltpConsumptionCombined = car.consumption.wltpCombined;
+        const wltpCo2 = car.consumption.wltpCo2;
 
         const consumptionValue = Number.isFinite(consumptionHydrogenCombined)
           ? t('vehicleProps:value.consumptionGas', { consumption: consumptionHydrogenCombined.toLocaleString(language), unit: translatedUnit })
@@ -194,6 +248,17 @@ const getDecoratedLightProps = (
           ? t('vehicleProps:value.co2Combined', { co2: co2.toLocaleString(language) })
           : t('vehicleProps:value.na');
 
+        const wltpConsumptionValue = Number.isFinite(wltpConsumptionCombined)
+          ? t('vehicleProps:value.consumptionGas', { consumption: wltpConsumptionCombined.toLocaleString(language), unit: translatedUnit })
+          : null;
+        const wltpCo2Value = Number.isFinite(wltpCo2)
+          ? t('vehicleProps:value.wltpCo2Combined', { co2: wltpCo2.toLocaleString(language) })
+          : null;
+
+        if (wltpConsumptionValue && wltpCo2Value) {
+          return <>{wltpConsumptionValue} - {wltpCo2Value}</>;
+        }
+
         return <>{consumptionValue} <br /> {co2Value}</>;
       }
     },
@@ -206,6 +271,8 @@ const getDecoratedLightProps = (
         const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
         const translatedUnit = t(`cbd:${consumptionUnit}`);
         const co2 = car.environmentEmissions.co2;
+        const wltpConsumptionCombined = car.consumption.wltpCombined;
+        const wltpCo2 = car.consumption.wltpCo2;
 
         const consumptionValue = Number.isFinite(consumptionGasCombined)
           ? t('vehicleProps:value.consumptionGas', { consumption: consumptionGasCombined.toLocaleString(language), unit: translatedUnit })
@@ -215,6 +282,18 @@ const getDecoratedLightProps = (
           ? t('vehicleProps:value.co2Combined', { co2: co2.toLocaleString(language) })
           : t('vehicleProps:value.na');
 
+        const wltpConsumptionValue = Number.isFinite(wltpConsumptionCombined)
+          ? t('vehicleProps:value.consumptionGas', { consumption: wltpConsumptionCombined.toLocaleString(language), unit: translatedUnit })
+          : null;
+
+        const wltpCo2Value = Number.isFinite(wltpCo2)
+          ? t('vehicleProps:value.wltpCo2Combined', { co2: wltpCo2.toLocaleString(language) })
+          : null;
+
+        if (wltpConsumptionValue && wltpCo2Value) {
+          return <>{wltpConsumptionValue} - {wltpCo2Value}</>;
+        }
+
         return <>{consumptionValue} <br /> {co2Value}</>;
       }
     },

package/source/framework/vehiclesProps/decoratedProps.tsx

@@ -677,9 +677,19 @@ const getDecoratedProps = (
         const consumptionCombined = car.consumption.consumptionCombined;
         const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
         const translatedUnit = t(`cbd:${consumptionUnit}`);
+        const wltpConsumptionCombined = car.consumption.wltpCombined;
+        const wltpCo2 = car.environmentEmissions.wltpCo2;
 
         const co2 = car.environmentEmissions.co2;
 
+        const wltpConsumptionValue = Number.isFinite(wltpConsumptionCombined)
+          ? t('vehicleProps:value.consumptionCombined', { consumption: wltpConsumptionCombined.toLocaleString(language), unit: translatedUnit })
+          : null;
+
+        const wltpCo2Value = Number.isFinite(wltpCo2)
+          ? t('vehicleProps:value.wltpCo2Combined', { co2: wltpCo2.toLocaleString(language) })
+          : null;
+
         const consumptionValue = Number.isFinite(consumptionCombined)
           ? t('vehicleProps:value.consumptionCombined', { consumption: consumptionCombined.toLocaleString(language), unit: translatedUnit })
           : t('vehicleProps:value.na');
@@ -688,6 +698,10 @@ const getDecoratedProps = (
           ? t('vehicleProps:value.co2Combined', { co2: co2.toLocaleString(language) })
           : t('vehicleProps:value.na');
 
+        if (wltpConsumptionValue && wltpCo2Value) {
+          return <>{wrapValue(wltpConsumptionValue)} - {wrapValue(wltpCo2Value)}</>;
+        }
+
         return <>{wrapValue(consumptionValue)} <br /> {wrapValue(co2Value)}</>;
       }
     },
@@ -699,6 +713,16 @@ const getDecoratedProps = (
         const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
         const translatedUnit = t(`cbd:${consumptionUnit}`);
         const co2 = car.environmentEmissions.co2;
+        const wltpConsumptionPowerCombined = car.consumption.wltpPowerCombined;
+        const wltpCo2 = car.environmentEmissions.wltpCo2;
+
+        const wltpConsumptionValue = Number.isFinite(wltpConsumptionPowerCombined)
+          ? t('vehicleProps:value.consumptionPower', { consumption: wltpConsumptionPowerCombined.toLocaleString(language), unit: translatedUnit })
+          : null;
+
+        const wltpCo2Value = Number.isFinite(wltpCo2)
+          ? t('vehicleProps:value.wltpCo2Combined', { co2: wltpCo2.toLocaleString(language) })
+          : null;
 
         const consumptionValue = Number.isFinite(consumptionPowerCombined)
           ? t('vehicleProps:value.consumptionPower', { consumption: consumptionPowerCombined.toLocaleString(language), unit: translatedUnit })
@@ -708,6 +732,10 @@ const getDecoratedProps = (
           ? t('vehicleProps:value.co2Combined', { co2: co2.toLocaleString(language) })
           : t('vehicleProps:value.na');
 
+        if (wltpConsumptionValue && wltpCo2Value) {
+          return <>{wrapValue(wltpConsumptionValue)} - {wrapValue(wltpCo2Value)}</>;
+        }
+
         return <>{wrapValue(consumptionValue)} <br /> {wrapValue(co2Value)}</>;
       }
     },
@@ -716,18 +744,32 @@ const getDecoratedProps = (
       title: t('vehicleProps:title.consumptionHydrogenCombined'),
       get value() {
         const consumptionHydrogenCombined = car.consumption.consumptionCombined;
+        const wltpConsumptionCombined = car.consumption.wltpCombined;
         const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
         const translatedUnit = t(`cbd:${consumptionUnit}`);
         const co2 = car.environmentEmissions.co2;
+        const wltpCo2 = car.environmentEmissions.wltpCo2;
 
         const consumptionValue = Number.isFinite(consumptionHydrogenCombined)
           ? t('vehicleProps:value.consumptionGas', { consumption: consumptionHydrogenCombined.toLocaleString(language), unit: translatedUnit })
           : t('vehicleProps:value.na');
 
+        const wltpConsumptionValue = Number.isFinite(wltpConsumptionCombined)
+          ? t('vehicleProps:value.consumptionGas', { consumption: wltpConsumptionCombined.toLocaleString(language), unit: translatedUnit })
+          : null;
+
         const co2Value = Number.isFinite(co2)
           ? t('vehicleProps:value.co2Combined', { co2: co2.toLocaleString(language) })
           : t('vehicleProps:value.na');
 
+        const wltpCo2Value = Number.isFinite(wltpCo2)
+          ? t('vehicleProps:value.wltpCo2Combined', { co2: wltpCo2.toLocaleString(language) })
+          : null;
+
+        if (wltpConsumptionValue && wltpCo2Value) {
+          return <>{wrapValue(wltpConsumptionValue)} - {wrapValue(wltpCo2Value)}</>;
+        }
+
         return <>{wrapValue(consumptionValue)} <br /> {wrapValue(co2Value)}</>;
       }
     },
@@ -736,10 +778,12 @@ const getDecoratedProps = (
       title: t('vehicleProps:title.consumptionGasCombined'),
       get value() {
         const consumptionGasCombined = car.consumption.consumptionCombined;
+        const wltpConsumptionCombined = car.consumption.wltpCombined;
         const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
         const translatedUnit = t(`cbd:${consumptionUnit}`);
 
         const co2 = car.environmentEmissions.co2;
+        const wltpCo2 = car.environmentEmissions.wltpCo2;
 
         const consumptionValue = Number.isFinite(consumptionGasCombined)
           ? t('vehicleProps:value.consumptionGas', { consumption: consumptionGasCombined.toLocaleString(language), unit: translatedUnit })
@@ -749,6 +793,18 @@ const getDecoratedProps = (
           ? t('vehicleProps:value.co2Combined', { co2: co2.toLocaleString(language) })
           : t('vehicleProps:value.na');
 
+        const wltpConsumptionValue = Number.isFinite(wltpConsumptionCombined)
+          ? t('vehicleProps:value.consumptionGas', { consumption: wltpConsumptionCombined.toLocaleString(language), unit: translatedUnit })
+          : null;
+
+        const wltpCo2Value = Number.isFinite(wltpCo2)
+          ? t('vehicleProps:value.wltpCo2Combined', { co2: wltpCo2.toLocaleString(language) })
+          : null;
+
+        if (wltpConsumptionValue && wltpCo2Value) {
+          return <>{wrapValue(wltpConsumptionValue)} - {wrapValue(wltpCo2Value)}</>;
+        }
+
         return <>{wrapValue(consumptionValue)} <br /> {wrapValue(co2Value)}</>;
       }
     },
@@ -758,17 +814,40 @@ const getDecoratedProps = (
       get value() {
         const consumptionCombined = +car.consumption.consumptionCombined;
         const consumptionPowerCombined = +car.consumption.consumptionPowerCombined;
+        const wltpConsumptionPowerCombined = car.consumption.wltpPowerCombined;
+        const wltpConsumptionCombined = car.consumption.wltpCombined;
+
         const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
         const translatedUnit = t(`cbd:${consumptionUnit}`);
 
         const consumptionPowerCombinedContent = t('vehicleProps:value.consumptionPowerCombined', { consumption: consumptionPowerCombined.toLocaleString(language), unit: translatedUnit });
+        const wltpConsumptionPowerCombinedContent = wltpConsumptionPowerCombined
+          ? t('vehicleProps:value.consumptionPowerCombined', { consumption: wltpConsumptionPowerCombined.toLocaleString(language), unit: translatedUnit })
+          : null;
         const consumptionCombinedContent = t('vehicleProps:value.consumptionCombined', { consumption: consumptionCombined.toLocaleString(language), unit: translatedUnit });
+        const wltpConsumptionCombinedContent = wltpConsumptionCombined ?
+          t('vehicleProps:value.consumptionCombined', { consumption: wltpConsumptionCombined.toLocaleString(language), unit: translatedUnit })
+          : null;
 
         const co2 = car.environmentEmissions.co2;
+        const wltpCo2 = car.environmentEmissions.wltpCo2;
         const co2Value = Number.isFinite(co2)
         ? t('vehicleProps:value.co2Combined', { co2: co2.toLocaleString(language) })
         : t('vehicleProps:value.na');
+        const wltpCo2Value = Number.isFinite(co2)
+        ? t('vehicleProps:value.wltpCo2WtdCombined', { co2: wltpCo2.toLocaleString(language) })
+        : null;
         const hybridPlugin = car.engineData.hybridPlugin;
+
+        if (wltpConsumptionCombinedContent && wltpCo2Value) {
+          return <React.Fragment>
+            {wltpConsumptionPowerCombinedContent && hybridPlugin ? wrapValue(wltpConsumptionPowerCombinedContent) : ''}
+            {wltpConsumptionPowerCombinedContent && hybridPlugin ? <br /> : ''}
+            {wrapValue(wltpConsumptionCombinedContent)} <br />
+            {wrapValue(wltpCo2Value)}
+          </React.Fragment>
+        }
+
         return Number.isFinite(consumptionCombined) && Number.isFinite(consumptionPowerCombined)
           ? <React.Fragment>
             {consumptionPowerCombined && hybridPlugin ? wrapValue(consumptionPowerCombinedContent) : ''}
@@ -1263,6 +1342,78 @@ const getDecoratedProps = (
           ? t('vehicleProps:value.consumptionPower', { consumption: wltpPowerVeryFast.toLocaleString(language), unit: translatedUnit })
           : t('vehicleProps:value.na');
       }
+    },
+    fuelPrice: {
+      title: '',
+      get value() {
+        return ''
+      }
+    },
+    powerPrice: {
+      title: '',
+      get value() {
+        return ''
+      }
+    },
+    consumptionPriceYear: {
+      title: '',
+      get value() {
+        return ''
+      }
+    },
+    co2CostLowBasePrice: {
+      title: '',
+      get value() {
+        return ''
+      }
+    },
+    co2CostMiddleBasePrice: {
+      title: '',
+      get value() {
+        return ''
+      }
+    },
+    co2CostHighBasePrice: {
+      title: '',
+      get value() {
+        return ''
+      }
+    },
+    co2CostLowAccumulatedPrice: {
+      title: '',
+      get value() {
+        return ''
+      }
+    },
+    co2CostMiddleAccumulatedPrice: {
+      title: '',
+      get value() {
+        return ''
+      }
+    },
+    co2CostHighAccumulatedPrice: {
+      title: '',
+      get value() {
+        return ''
+      }
+    },
+    timeFrameFrom: {
+      title: '',
+      get value() {
+        return ''
+      }
+    },
+    timeFrameT0: {
+      title: '',
+      get value() {
+        return ''
+      }
+    },
+    consumptionCosts: {
+      title: '',
+      get value() {
+        return ''
+      }
     }
   };
   return props;

package/source/framework/vehiclesProps/vehicleDetails.ts

@@ -47,6 +47,9 @@ const environmentPluginHybridWLTP = ['wltpWeightedCombined', 'wltpTotalRange', '
   'wltpCombined', 'wltpSlow', 'wltpMedium', 'wltpFast', 'wltpVeryFast', 'wltpEnergyEfficiencyClass', 'wltpDischargedEnergyEfficiencyClass'];
 const environmentElectroBenzinDieselEthanolHybridWLTP = ['wltpCombined', 'wltpCo2', 'wltpSlow', 'wltpMedium', 'wltpFast', 'wltpVeryFast', 'wltpEnergyEfficiencyClass'];
 const environmentHydrogenWLTP = ['wltpCombined', 'wltpCo2', 'wltpSlow', 'wltpMedium', 'wltpFast', 'wltpVeryFast', 'wltpEnergyEfficiencyClass'];
+const costModel = ['fuelPrice', 'powerPrice', 'consumptionPriceYear', 'co2CostLowBasePrice', 'co2CostMiddleBasePrice',
+  'co2CostHighBasePrice', 'co2CostLowAccumulatedPrice', 'co2CostMiddleAccumulatedPrice', 'co2CostHighAccumulatedPrice',
+  'timeFrameFrom', 'timeFrameT0', 'consumptionCosts',]
 
 export const engineDetails: IEngineDetails = [
   {
@@ -354,6 +357,10 @@ export const getWltpValues = (selector: any, hybridPlugin: any = false) => {
   }, []);
 };
 
+export const getCostModelValues = () => {
+  return costModel;
+}
+
 export const getOverviewDetails = (selector: any) => {
   if (Object.keys(filtered(selector)).length === 0) {
     return [...mainPropertiesList, ...consumptionCombinedAlternateView];

package/source/locales/data.ts

@@ -80,6 +80,8 @@ export const vehicleProps = (car?: any, isOfferAvailable: boolean = true) => {
         no: 'Nein',
         yes: 'Ja',
         batteryCapacity: `${vehicleOption.batteryCapacity} kWh`,
+        wltpCo2Combined: `${vehicleOption}g CO2/km (WLTP, comb)*`,
+        wltpCo2WtdCombined: `${vehicleOption}g CO2/km (WLTP, gew., comb)*`
 
       },
       title: {