@bytebrand/fe-ui-core 4.6.7 → 4.6.9

package/package.json

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

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

@@ -84,7 +84,8 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
       icon: decoratedProps[prop].icon,
       description: decoratedProps[prop].value,
       className: styles[decoratedProps[prop].name],
-      classNameIcon: (vehicleComponentName === 'search' || 'myVehicles' || 'favorite' || 'recently') && styles.carIconSearch
+      classNameIcon: (vehicleComponentName === 'search' || 'myVehicles' || 'favorite' || 'recently') && styles.carIconSearch,
+      hybridPlugin: engineData.hybridPlugin && prop === 'consumptionCombinedAlternateView' && vehicleComponentName === 'landing'
     }));
 
     return mainPropertiesList.map((property: any, index: number) => (

package/source/components/VehicleSmallCard/VehicleData/VehicleProperty/VehicleProperty.styl

@@ -9,6 +9,10 @@
   align-items: center;
   border-bottom: 1px solid rgba(76, 78, 100, 0.12);
 
+.smallProp
+  span
+    font-size: 9px !important
+
 .carIcon
   width: 28px;
   height: 30px;

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

@@ -5,6 +5,7 @@ import styles from './VehicleProperty.styl';
 export interface IVehicleProperty {
   className?: string;
   classNameIcon?: string;
+  hybridPlugin?: boolean;
   icon: string;
   description: React.ReactNode;
 }
@@ -16,8 +17,8 @@ class VehicleProperty extends React.Component<IVehicleProperty, {}> {
   };
 
   render(): React.ReactNode {
-    const { className, classNameIcon, icon, description } = this.props;
-    const propertyClass: string = `${styles.carProp} ${className ? className : ''}`;
+    const { className, classNameIcon, icon, description, hybridPlugin } = this.props;
+    const propertyClass: string = `${styles.carProp} ${className ? className : ''} ${hybridPlugin ? styles.smallProp : ''}`;
     const propertyClassIcon: string = `${styles.carIcon} ${classNameIcon ? classNameIcon : ''}`;
 
     return (

package/source/framework/vehiclesProps/decoratedLightProps.tsx

@@ -125,7 +125,7 @@ const getDecoratedLightProps = (
           : null;
 
         const wltpCo2PluginValue = Number.isFinite(wltpCo2)
-          ? t('vehicleProps:value.wltpCo2WtdCombined', { co2: wltpCo2.toLocaleString(language) })
+          ? t('vehicleProps:value.wltpCo2WtdCombined', { co2: wltpCo2.toLocaleString(language), unit: translatedUnit })
           : null;
 
         const wltpCo2Value = Number.isFinite(wltpCo2)
@@ -148,10 +148,10 @@ const getDecoratedLightProps = (
         const wltpWeightedCombinedContent = wltpWeightedCombined ? t('vehicleProps:value.consumptionCombined', { consumption: wltpWeightedCombined.toLocaleString(language), unit: translatedUnit }) : null;
 
         if (hybridPlugin) {
-            return <React.Fragment>
-              {`${wltpWeightedPowerCombinedContent}, `}
-              {wltpWeightedCombinedContent}, {wltpCo2PluginValue}
-            </React.Fragment>
+          return <React.Fragment>
+            {`${wltpWeightedPowerCombinedContent}, `}
+            {wltpWeightedCombinedContent}, {wltpCo2PluginValue}
+          </React.Fragment>
         }
 
         if (wltpConsumptionValue && wltpCo2Value) {

package/source/framework/vehiclesProps/decoratedProps.tsx

@@ -1137,7 +1137,7 @@ const getDecoratedProps = (
       get value() {
         const c02 = car.environmentEmissions.wltpCo2;
         return Number.isFinite(c02)
-          ? t('vehicleProps:value.co2', { co2: c02.toLocaleString(language) })
+          ? t('vehicleProps:value.wltpCo2', { co2: c02.toLocaleString(language) })
           : t('vehicleProps:value.na');
       }
     },
@@ -1146,7 +1146,7 @@ const getDecoratedProps = (
       get value() {
         const c02 = car.environmentEmissions.wltpCo2;
         return Number.isFinite(c02)
-          ? t('vehicleProps:value.co2', { co2: c02.toLocaleString(language) })
+          ? t('vehicleProps:value.wltpCo2', { co2: c02.toLocaleString(language) })
           : t('vehicleProps:value.na');
       }
     },
@@ -1154,8 +1154,10 @@ const getDecoratedProps = (
       title: t('vehicleProps:title.wltpCo2Discharged'),
       get value() {
         const wltpCo2 = car.environmentEmissions.wltpCo2Discharged;
+        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
+        const translatedUnit = t(`cbd:${consumptionUnit}`);
         return Number.isFinite(wltpCo2)
-          ? t('vehicleProps:value.co2', { co2: wltpCo2.toLocaleString(language) })
+          ? t('vehicleProps:value.wltpCo2', { co2: wltpCo2.toLocaleString(language), unit: translatedUnit })
           : t('vehicleProps:value.na');
       }
     },
@@ -1246,6 +1248,17 @@ const getDecoratedProps = (
           : t('vehicleProps:value.na');
       }
     },
+    wltpCombinedGas: {
+      title: t('vehicleProps:title.wltpCombined'),
+      get value() {
+        const wltpCombined = car.consumption.wltpCombined;
+        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
+        const translatedUnit = t(`cbd:${consumptionUnit}`);
+        return Number.isFinite(wltpCombined)
+          ? t('vehicleProps:value.consumptionGas', { consumption: wltpCombined.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+      }
+    },
     wltpCombinedPlugin: {
       title: t('vehicleProps:title.wltpCombinedPlugin'),
       get value() {
@@ -1268,6 +1281,17 @@ const getDecoratedProps = (
           : t('vehicleProps:value.na');
       }
     },
+    wltpSlowGas: {
+      title: t('vehicleProps:title.wltpSlow'),
+      get value() {
+        const wltpSlow = car.consumption.wltpSlow;
+        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
+        const translatedUnit = t(`cbd:${consumptionUnit}`);
+        return Number.isFinite(wltpSlow)
+          ? t('vehicleProps:value.consumptionGas', { consumption: wltpSlow.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+      }
+    },
     wltpSlowPlugin: {
       title: t('vehicleProps:title.wltpSlowPlugin'),
       get value() {
@@ -1290,6 +1314,17 @@ const getDecoratedProps = (
           : t('vehicleProps:value.na');
       }
     },
+    wltpMediumGas: {
+      title: t('vehicleProps:title.wltpMedium'),
+      get value() {
+        const wltpMedium = car.consumption.wltpMedium;
+        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
+        const translatedUnit = t(`cbd:${consumptionUnit}`);
+        return Number.isFinite(wltpMedium)
+          ? t('vehicleProps:value.consumptionGas', { consumption: wltpMedium.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+      }
+    },
     wltpMediumPlugin: {
       title: t('vehicleProps:title.wltpMediumPlugin'),
       get value() {
@@ -1312,6 +1347,17 @@ const getDecoratedProps = (
           : t('vehicleProps:value.na');
       }
     },
+    wltpFastGas: {
+      title: t('vehicleProps:title.wltpFast'),
+      get value() {
+        const wltpFast = car.consumption.wltpFast;
+        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
+        const translatedUnit = t(`cbd:${consumptionUnit}`);
+        return Number.isFinite(wltpFast)
+          ? t('vehicleProps:value.consumptionGas', { consumption: wltpFast.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+      }
+    },
     wltpFastPlugin: {
       title: t('vehicleProps:title.wltpFastPlugin'),
       get value() {
@@ -1334,6 +1380,17 @@ const getDecoratedProps = (
           : t('vehicleProps:value.na');
       }
     },
+    wltpVeryFastGas: {
+      title: t('vehicleProps:title.wltpVeryFast'),
+      get value() {
+        const wltpVeryFast = car.consumption.wltpVeryFast;
+        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
+        const translatedUnit = t(`cbd:${consumptionUnit}`);
+        return Number.isFinite(wltpVeryFast)
+          ? t('vehicleProps:value.consumptionGas', { consumption: wltpVeryFast.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+      }
+    },
     wltpVeryFastPlugin: {
       title: t('vehicleProps:title.wltpVeryFastPlugin'),
       get value() {
@@ -1513,7 +1570,7 @@ const getDecoratedProps = (
       get value() {
         const { powerPrice } = car.costModel;
         return Number.isFinite(powerPrice)
-          ? t('vehicleProps:value.price', { price: getFormattedPrice(powerPrice, '$,.2f') })
+          ? t('vehicleProps:value.powerPrice', { price: getFormattedPrice(powerPrice, '$,.2f') })
           : t('vehicleProps:value.na');
       }
     },
@@ -1522,7 +1579,7 @@ const getDecoratedProps = (
       get value() {
         const { fuelPrice } = car.costModel;
         return Number.isFinite(fuelPrice)
-          ? t('vehicleProps:value.price', { price: getFormattedPrice(fuelPrice, '$,.2f') })
+          ? t('vehicleProps:value.fuelPrice', { price: getFormattedPrice(fuelPrice, '$,.2f') })
           : t('vehicleProps:value.na');
       }
     },

package/source/framework/vehiclesProps/vehicleDetails.ts

@@ -41,13 +41,13 @@ const consumptionCombinedHybridAlternateView = ['consumptionCombinedHybridAltern
 const consumptionGasCombinedAlternateView = ['consumptionGasCombinedAlternateView'];
 const consumptionHydrogenCombinedAlternateView = ['consumptionHydrogenCombinedAlternateView'];
 const environmentElectroWLTP = ['wltpPowerCombined', 'wltpCo2', 'wltpRange', 'wltpPowerSlow', 'wltpPowerMedium',
-  'wltpPowerFast', 'wltpPowerVeryFast', 'wltpEnergyEfficiencyClass'];
-const environmentPluginHybridWLTP = ['wltpWeightedCombined', 'wltpTotalRange', 'wltpWeightedPowerCombined', 'wltpCo2',
+  'wltpPowerFast', 'wltpPowerVeryFast', 'powerPrice', 'consumptionPriceYear', 'wltpEnergyEfficiencyClass'];
+const environmentPluginHybridWLTP = ['wltpWeightedCombined', 'wltpTotalRange', 'wltpWeightedPowerCombined', 'wltpCo2Plugin',
   'wltpCo2Discharged', 'wltpPowerCombined', 'wltpPowerSlow', 'wltpPowerMedium', 'wltpPowerFast', 'wltpPowerVeryFast',
   'wltpPowerCombinedPlugin', 'wltpPowerSlowPlugin', 'wltpPowerMediumPlugin', 'wltpPowerFastPlugin',
   'fuelPrice', 'powerPrice', 'consumptionPriceYear', 'wltpEnergyEfficiencyClass'];
 const environmentElectroBenzinDieselEthanolHybridWLTP = ['wltpCombined', 'wltpCo2', 'wltpSlow', 'wltpMedium', 'wltpFast', 'wltpVeryFast', 'fuelPrice', 'consumptionPriceYear', 'wltpEnergyEfficiencyClass'];
-const environmentHydrogenWLTP = ['wltpCombined', 'wltpCo2', 'wltpSlow', 'wltpMedium', 'wltpFast', 'wltpVeryFast', 'wltpEnergyEfficiencyClass'];
+const environmentHydrogenWLTP = ['wltpCombinedGas', 'wltpCo2', 'wltpSlowGas', 'wltpMediumGas', 'wltpFastGas', 'wltpVeryFastGas', 'fuelPrice', 'consumptionPriceYear', 'wltpEnergyEfficiencyClass'];
 // const costModel = ['wltpEnergyCosts', 'wltpCo2CostsLow',, 'wltpCo2CostsMiddle', 'wltpCo2CostsHigh', 'wltpCostModelTax'];
 
 export const engineDetails: IEngineDetails = [

package/source/locales/data.ts

@@ -46,7 +46,7 @@ export const vehicleProps = (car?: any, isOfferAvailable: boolean = true) => {
         mileage: `${vehicleOption.mileage} km`,
         consumption: `${vehicleOption.consumptionCombined}l/100km`,
         consumptionPower: `${vehicleOption.consumptionPowerCombined}kWh/100km`,
-        consumptionPowerCombined: `${vehicleOption.consumptionPowerCombined}kWh/100km (komb)*`,
+        consumptionPowerCombined: `${vehicleOption.consumptionPowerCombined}kWh/100km`,
         consumptionGas: `${vehicleOption.consumptionCombined}kg/100km`,
         consumptionCombined: `${vehicleOption.consumptionCombined}l/100km`,
         power: `${vehicleOption.powerKW}\u00A0kW (${vehicleOption.powerPS}\u00A0PS)`,
@@ -83,8 +83,8 @@ export const vehicleProps = (car?: any, isOfferAvailable: boolean = true) => {
         no: 'Nein',
         yes: 'Ja',
         batteryCapacity: `${vehicleOption.batteryCapacity} kWh`,
-        wltpCo2Combined: `${vehicleOption.wltpCo2}g CO2/km (WLTP, comb)*`,
-        wltpCo2WtdCombined: `${vehicleOption.wltpCo2}g CO2/km (WLTP, gew., comb)*`
+        wltpCo2Combined: `${vehicleOption.wltpCo2}g CO2/km (WLTP, komb)*`,
+        wltpCo2WtdCombined: `${vehicleOption.wltpCo2}g CO2/km (WLTP, gew., komb)*`
 
       },
       title: {