@bytebrand/fe-ui-core 4.6.2 → 4.6.4

package/package.json

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

package/source/components/AccordionWidget/AccordionWidget.tsx

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

package/source/framework/DataTransformers.ts

@@ -67,7 +67,11 @@ export const transformDataForDecoratedCar = (car: any) => {
     maximumWeightCapacity: _get(car, 'sizeVolumeWeight.cargoCapacity', null),
     tareWeight: _get(car, 'sizeVolumeWeight.emptyWeight', null),
     bootCapacity: _get(car, 'sizeVolumeWeight.cargoCapacity', null),
-    capacityLoad: _get(car, 'sizeVolumeWeight.completeCapacity', null)
+    capacityLoad: _get(car, 'sizeVolumeWeight.completeCapacity', null),
+    wltpCombined: _get(car, 'consumption.wltpCombined', null),
+    wltpPowerCombined: _get(car, 'consumption.wltpPowerCombined', null),
+    wltpCo2: _get(car, 'consumption.wltpCo2', _get(car, 'environmentEmissions.wltpCo2')),
+    pluginHybrid: _get(car, 'engineData.pluginHybrid', null)
   };
 };
 

package/source/framework/vehiclesProps/decoratedLightProps.tsx

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

package/source/framework/vehiclesProps/decoratedProps.tsx

@@ -8,6 +8,7 @@ import { formatMileage } from '../utils/CommonUtils';
 import { EMISSION_STICKERS_ICONS, WP_EMISSION_STICKERS_ICONS } from '../constants/Search';
 import { DELIVERY_PERIODS_EXTRA } from '../constants';
 import { IDecoratedProp, ICar } from '../types/types';
+import { getFormattedPrice } from '../utils/CommonUtils';
 
 const formatDeliveryPeriod = (t: (key: string, options?: object) => string, deliveryPeriod: string) => {
   const count: number = +DELIVERY_PERIODS_EXTRA.find((period: any) => period.value === deliveryPeriod).label;
@@ -699,7 +700,7 @@ const getDecoratedProps = (
           : t('vehicleProps:value.na');
 
         if (wltpConsumptionValue && wltpCo2Value) {
-          return <>{wrapValue(wltpConsumptionValue)} - {wrapValue(wltpCo2Value)}</>;
+          return <>{wrapValue(wltpConsumptionValue)}, {wrapValue(wltpCo2Value)}</>;
         }
 
         return <>{wrapValue(consumptionValue)} <br /> {wrapValue(co2Value)}</>;
@@ -733,7 +734,7 @@ const getDecoratedProps = (
           : t('vehicleProps:value.na');
 
         if (wltpConsumptionValue && wltpCo2Value) {
-          return <>{wrapValue(wltpConsumptionValue)} - {wrapValue(wltpCo2Value)}</>;
+          return <>{wrapValue(wltpConsumptionValue)}, {wrapValue(wltpCo2Value)}</>;
         }
 
         return <>{wrapValue(consumptionValue)} <br /> {wrapValue(co2Value)}</>;
@@ -767,7 +768,7 @@ const getDecoratedProps = (
           : null;
 
         if (wltpConsumptionValue && wltpCo2Value) {
-          return <>{wrapValue(wltpConsumptionValue)} - {wrapValue(wltpCo2Value)}</>;
+          return <>{wrapValue(wltpConsumptionValue)}, {wrapValue(wltpCo2Value)}</>;
         }
 
         return <>{wrapValue(consumptionValue)} <br /> {wrapValue(co2Value)}</>;
@@ -802,7 +803,7 @@ const getDecoratedProps = (
           : null;
 
         if (wltpConsumptionValue && wltpCo2Value) {
-          return <>{wrapValue(wltpConsumptionValue)} - {wrapValue(wltpCo2Value)}</>;
+          return <>{wrapValue(wltpConsumptionValue)}, {wrapValue(wltpCo2Value)}</>;
         }
 
         return <>{wrapValue(consumptionValue)} <br /> {wrapValue(co2Value)}</>;
@@ -1343,78 +1344,58 @@ const getDecoratedProps = (
           : t('vehicleProps:value.na');
       }
     },
-    fuelPrice: {
-      title: '',
+    // wltpEnergyCosts: {
+    //   title: t('vehicleProps:title.wltpEnergyCosts'),
+    //   get value() {
+    //     const { fuel } = car.consumption;
+    //     const { wltpCombined, wltpPowerCombined, wltpWeightedCombined, wltpWeightedPowerCombined } = car.consumption;
+    //     const { hybridPlugin } = car.engineData;
+    //     const consumption = {
+    //       wltpCombined, wltpPowerCombined, wltpWeightedCombined, wltpWeightedPowerCombined
+    //     }
+    //     const fuelCost = getFuelPrice(fuel, consumption, hybridPlugin);
+    //     return Number.isFinite(fuelCost)
+    //       ? t('vehicleProps:value.price', { price: getFormattedPrice(fuelCost, '$,.2f') })
+    //       : t('vehicleProps:value.na');
+    //   }
+    // },
+    wltpCo2CostsLow: {
+      title: t('vehicleProps:title.wltpCo2LowPrice'),
       get value() {
-        return ''
-      }
-    },
-    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 ''
+        const { basePrice } = car.costModel.co2Costs.low;
+        return Number.isFinite(basePrice)
+          ? t('vehicleProps:value.price', { price: getFormattedPrice(basePrice, '$,.2f') })
+          : t('vehicleProps:value.na');
       }
     },
-    timeFrameFrom: {
-      title: '',
+    wltpCo2CostsMiddle: {
+      title: t('vehicleProps:title.wltpCo2MidPrice'),
       get value() {
-        return ''
+        const { basePrice } = car.costModel.co2Costs.middle;
+        return Number.isFinite(basePrice)
+          ? t('vehicleProps:value.price', { price: getFormattedPrice(basePrice, '$,.2f') })
+          : t('vehicleProps:value.na');
       }
     },
-    timeFrameT0: {
-      title: '',
+    wltpCo2CostsHigh: {
+      title: t('vehicleProps:title.wltpCo2HighPrice'),
       get value() {
-        return ''
+        const { basePrice } = car.costModel.co2Costs.high;
+        return Number.isFinite(basePrice)
+          ? t('vehicleProps:value.price', { price: getFormattedPrice(basePrice, '$,.2f') })
+          : t('vehicleProps:value.na');
       }
     },
-    consumptionCosts: {
-      title: '',
+    wltpCostModelTax: {
+      title: t('vehicleProps:title.wltpVehicleTax'),
       get value() {
-        return ''
+        const { tax } = car.costModel;
+        return Number.isFinite(tax)
+          ? t('vehicleProps:value.price', { price: getFormattedPrice(tax, '$,.2f') })
+          : t('vehicleProps:value.na');
       }
     }
+
   };
   return props;
 };

package/source/framework/vehiclesProps/vehicleDetails.ts

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

package/source/locales/data.ts

@@ -16,6 +16,7 @@ export const vehicleProps = (car?: any, isOfferAvailable: boolean = true) => {
   const count: number = vehicleOption.deliveryPeriod &&
                         isOfferAvailable &&
                         vehicleOption.deliveryPeriod !== 'selector_unknown' ? +DELIVERY_PERIODS_EXTRA.find((period: any) => period.value === vehicleOption.deliveryPeriod).label : 0;
+
   const monthsTo: number = moment.utc().diff(moment.utc().subtract(count, 'd'), 'M', true);
   return {
     ...cbd,
@@ -37,7 +38,9 @@ export const vehicleProps = (car?: any, isOfferAvailable: boolean = true) => {
       promoSlider: {
         consumptionCombined: `${vehicleOption.consumptionCombined}l/100km (komb)*`,
         co2: `${vehicleOption.co2} g CO2/km (komb)*`,
-        new: 'neu'
+        new: 'neu',
+        wltpCo2: `${vehicleOption.wltpCo2}g CO2/km (WLTP, komb.)*`,
+        wltpConsumptionCombined: `${vehicleOption.consumptionCombined}l/100km`
       },
       value: {
         mileage: `${vehicleOption.mileage} km`,
@@ -80,8 +83,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)*`
+        wltpCo2Combined: `${vehicleOption.wltpCo2}g CO2/km (WLTP, comb)*`,
+        wltpCo2WtdCombined: `${vehicleOption.wltpCo2}g CO2/km (WLTP, gew., comb)*`
 
       },
       title: {