@bytebrand/fe-ui-core 4.8.32 → 4.8.33

package/media/locales/de/promoSlider.json

@@ -1,6 +1,7 @@
 {
   "consumptionCombined": "{{consumptionCombined}}l/100km (komb)*",
   "co2": "{{co2}}g CO2/km (komb)*",
+  "co2Class": "CO2-Klasse {{class}} (komb)",
   "weDeliverMagdeburg": "Wir liefern Ihr Auto zu Ihnen nach Magdeburg!",
   "weDeliverToYou": "Wir liefern Ihr Auto zu Ihnen!",
   "withoutDeposit": "ohne Anzahlung",

package/media/locales/en/promoSlider.json

@@ -1,6 +1,7 @@
 {
   "consumptionCombined": "{{consumptionCombined}}/100km (comb)*",
   "co2": "{{co2}}g CO2/km (comb)*",
+  "co2Class": "CO2-class {{class}} (comb)",
   "weDeliverMagdeburg": "We will deliver your car to Magdeburg!",
   "weDeliverToYou": "We deliver your car to you!",
   "withoutDeposit": "Without Deposit",

package/package.json

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

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

@@ -82,14 +82,19 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
 
   const decoratedProps = getDecoratedProps(dataDecoratedProps, t, language);
   const renderProperty = (renderProperties: any, vehicleComponentName?: any) => {
-    const mainPropertiesList = renderProperties(dataDecoratedProps.consumption.fuel, combineRefAlternative).map((prop: string) => ({
-      icon: decoratedProps[prop].icon,
-      description: decoratedProps[prop].value,
-      className: styles[decoratedProps[prop].name],
-      classNameIcon: (vehicleComponentName === 'search' || 'myVehicles' || 'favorite' || 'recently') && styles.carIconSearch,
-      smalltext: (decoratedProps[prop].name === 'consumptionCombined') && (vehicleComponentName !== 'search'),
-      hybridPlugin: engineData.hybridPlugin && decoratedProps[prop].name === 'consumptionCombined' && vehicleComponentName !== 'search'
-    }));
+    const mainPropertiesList = renderProperties(dataDecoratedProps.consumption.fuel, combineRefAlternative).map((prop: string) => {
+      const isConsumption = decoratedProps[prop].name === 'consumptionCombined';
+      // On non-SRL cards drop the fuel-pump icon next to the consumption row to free up space for the CO2-class line.
+      const hideConsumptionIcon = isConsumption && vehicleComponentName !== 'search';
+      return {
+        icon: hideConsumptionIcon ? '' : decoratedProps[prop].icon,
+        description: decoratedProps[prop].value,
+        className: styles[decoratedProps[prop].name],
+        classNameIcon: (vehicleComponentName === 'search' || 'myVehicles' || 'favorite' || 'recently') && styles.carIconSearch,
+        smalltext: isConsumption && (vehicleComponentName !== 'search'),
+        hybridPlugin: engineData.hybridPlugin && isConsumption && vehicleComponentName !== 'search'
+      };
+    });
 
     return mainPropertiesList.map((property: any, index: number) => (
       <VehicleProperty {...property} key={index} />

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

@@ -26,5 +26,8 @@
   +media-tablet-landscape-up()
     margin-right: 10px
 
+.noIcon
+  padding-left: 10px
+
 [class*='smallText']
   font-size:10px;

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

@@ -19,12 +19,13 @@ class VehicleProperty extends React.Component<IVehicleProperty, {}> {
 
   render(): React.ReactNode {
     const { className, classNameIcon, icon, description, smalltext, hybridPlugin } = this.props;
-    const propertyClass: string = `${styles.carProp} ${className ? className : ''} ${smalltext ? styles.smallProp : ''} ${hybridPlugin ? styles.pluginVal : ''}`;
+    const noIcon: boolean = !icon;
+    const propertyClass: string = `${styles.carProp} ${className ? className : ''} ${smalltext ? styles.smallProp : ''} ${hybridPlugin ? styles.pluginVal : ''} ${noIcon ? styles.noIcon : ''}`;
     const propertyClassIcon: string = `${styles.carIcon} ${classNameIcon ? classNameIcon : ''}`;
 
     return (
       <div className={propertyClass}>
-        <IconSVG className={propertyClassIcon} name={icon} customDimensions />
+        {!noIcon && <IconSVG className={propertyClassIcon} name={icon} customDimensions />}
         <span>{description}</span>
       </div>
     );

package/source/framework/DataTransformers.ts

@@ -69,6 +69,7 @@ export const transformDataForDecoratedCar = (car: any) => {
     bootCapacity: _get(car, 'sizeVolumeWeight.cargoCapacity', null),
     capacityLoad: _get(car, 'sizeVolumeWeight.completeCapacity', null),
     wltpCo2:  _get(car, 'environmentEmissions.wltpCo2', null),
+    wltpEnergyEfficiencyClass: _get(car, 'environmentEmissions.wltpEnergyEfficiencyClass', null),
     pluginHybrid: _get(car, 'engineData.pluginHybrid', null),
     wltpCombined: _get(car, 'consumption.wltpCombined', null),
     wltpPowerCombined: _get(car, 'consumption.wltpPowerCombined', null),

package/source/framework/vehiclesProps/decoratedLightProps.tsx

@@ -124,6 +124,10 @@ const getDecoratedLightProps = (
         const wltpConsumptionCombined = car.consumption.wltpCombined;
         const wltpCo2 = car.environmentEmissions.wltpCo2;
         const consumptionPowerCombined = car.consumption.consumptionCombined;
+        const wltpEnergyEfficiencyClass = car.environmentEmissions.wltpEnergyEfficiencyClass;
+        const co2ClassValue = isPropDefined(wltpEnergyEfficiencyClass)
+          ? t('vehicleProps:value.co2Class', { class: wltpEnergyEfficiencyClass })
+          : null;
 
         const co2 = car.environmentEmissions.co2;
 
@@ -164,22 +168,24 @@ const getDecoratedLightProps = (
                 {`${wltpWeightedPowerCombinedContent}, `}
                 {`${wltpWeightedCombinedContent}, `}
                 {wltpCo2PluginValue}
+                {co2ClassValue && <><br />{co2ClassValue}</>}
               </React.Fragment>
           }
 
           return Number.isFinite(consumptionCombined) || Number.isFinite(consumptionPowerCombined)
             ? <React.Fragment>
               {consumptionPowerCombined ? consumptionPowerCombinedContent : t('vehicleProps:value.na')} <br />{consumptionValue} <br /> {co2Value}
+              {co2ClassValue && <><br />{co2ClassValue}</>}
             </React.Fragment>
             : t('vehicleProps:value.na');
 
         }
 
         if (wltpConsumptionValue && wltpCo2Value) {
-          return <>{wltpConsumptionValue}, {wltpCo2Value}</>;
+          return <>{wltpConsumptionValue}, {wltpCo2Value}{co2ClassValue && <><br />{co2ClassValue}</>}</>;
         }
 
-        return <>{consumptionValue} <br /> {co2Value}</>;
+        return <>{consumptionValue} <br /> {co2Value}{co2ClassValue && <><br />{co2ClassValue}</>}</>;
       }
     },
     consumptionPowerCombinedAlternateView: {
@@ -193,6 +199,10 @@ const getDecoratedLightProps = (
         const co2 = car.environmentEmissions.co2;
         const wltpConsumptionPowerCombined = car.consumption.wltpPowerCombined;
         const wltpCo2 = car.environmentEmissions.wltpCo2;
+        const wltpEnergyEfficiencyClass = car.environmentEmissions.wltpEnergyEfficiencyClass;
+        const co2ClassValue = isPropDefined(wltpEnergyEfficiencyClass)
+          ? t('vehicleProps:value.co2Class', { class: wltpEnergyEfficiencyClass })
+          : null;
 
         const wltpConsumptionValue = Number.isFinite(wltpConsumptionPowerCombined)
           ? t('vehicleProps:value.wltpPowerCombined', { consumption: wltpConsumptionPowerCombined.toLocaleString(language), unit: translatedUnit })
@@ -211,10 +221,10 @@ const getDecoratedLightProps = (
           : t('vehicleProps:value.na');
 
         if (wltpConsumptionValue && wltpCo2Value) {
-          return <>{wltpConsumptionValue}, {wltpCo2Value}</>;
+          return <>{wltpConsumptionValue}, {wltpCo2Value}{co2ClassValue && <><br />{co2ClassValue}</>}</>;
         }
 
-        return <>{consumptionValue} <br /> {co2Value} </>;
+        return <>{consumptionValue} <br /> {co2Value} {co2ClassValue && <><br />{co2ClassValue}</>}</>;
       }
     },
 
@@ -251,6 +261,10 @@ const getDecoratedLightProps = (
 
         const co2 = car.environmentEmissions.co2;
         const wltpCo2 = car.environmentEmissions.wltpCo2;
+        const wltpEnergyEfficiencyClass = car.environmentEmissions.wltpEnergyEfficiencyClass;
+        const co2ClassValue = isPropDefined(wltpEnergyEfficiencyClass)
+          ? t('vehicleProps:value.co2Class', { class: wltpEnergyEfficiencyClass })
+          : null;
 
         const co2Value = Number.isFinite(co2)
         ? t('vehicleProps:value.co2Combined', { co2: co2.toLocaleString(language) })
@@ -272,6 +286,7 @@ const getDecoratedLightProps = (
                 {`${wltpWeightedPowerCombinedContent}, `}
                 {`${wltpWeightedCombinedContent}, `}
                 {wltpCo2PluginValue}
+                {co2ClassValue && <><br />{co2ClassValue}</>}
               </React.Fragment>
           }
         }
@@ -281,12 +296,14 @@ const getDecoratedLightProps = (
               {`${wltpConsumptionPowerCombinedContent}, `}
               {`${wltpWeightedCombinedContent}, `}
               {wltpCo2PluginValue}
+              {co2ClassValue && <><br />{co2ClassValue}</>}
             </React.Fragment>
         }
 
         return Number.isFinite(consumptionCombined) || Number.isFinite(consumptionPowerCombined)
           ? <React.Fragment>
             {consumptionPowerCombined ? consumptionPowerCombinedContent : t('vehicleProps:value.na')} <br />{consumptionCombinedContent} <br /> {co2Value}
+            {co2ClassValue && <><br />{co2ClassValue}</>}
           </React.Fragment>
           : t('vehicleProps:value.na');
       }
@@ -303,6 +320,10 @@ const getDecoratedLightProps = (
         const co2 = car.environmentEmissions.co2;
         const wltpConsumptionCombined = car.consumption.wltpCombined;
         const wltpCo2 = car.environmentEmissions.wltpCo2;
+        const wltpEnergyEfficiencyClass = car.environmentEmissions.wltpEnergyEfficiencyClass;
+        const co2ClassValue = isPropDefined(wltpEnergyEfficiencyClass)
+          ? t('vehicleProps:value.co2Class', { class: wltpEnergyEfficiencyClass })
+          : null;
 
         const consumptionValue = Number.isFinite(consumptionHydrogenCombined)
           ? t('vehicleProps:value.consumptionGas', { consumption: consumptionHydrogenCombined.toLocaleString(language), unit: translatedUnit })
@@ -320,10 +341,10 @@ const getDecoratedLightProps = (
           : null;
 
         if (wltpConsumptionValue && wltpCo2Value) {
-          return <>{wltpConsumptionValue}, {wltpCo2Value}</>;
+          return <>{wltpConsumptionValue}, {wltpCo2Value}{co2ClassValue && <><br />{co2ClassValue}</>}</>;
         }
 
-        return <>{consumptionValue} <br /> {co2Value}</>;
+        return <>{consumptionValue} <br /> {co2Value}{co2ClassValue && <><br />{co2ClassValue}</>}</>;
       }
     },
     consumptionGasCombinedAlternateView: {
@@ -337,6 +358,10 @@ const getDecoratedLightProps = (
         const co2 = car.environmentEmissions.co2;
         const wltpConsumptionCombined = car.consumption.wltpCombined;
         const wltpCo2 = car.environmentEmissions.wltpCo2;
+        const wltpEnergyEfficiencyClass = car.environmentEmissions.wltpEnergyEfficiencyClass;
+        const co2ClassValue = isPropDefined(wltpEnergyEfficiencyClass)
+          ? t('vehicleProps:value.co2Class', { class: wltpEnergyEfficiencyClass })
+          : null;
 
         const consumptionValue = Number.isFinite(consumptionGasCombined)
           ? t('vehicleProps:value.consumptionGas', { consumption: consumptionGasCombined.toLocaleString(language), unit: translatedUnit })
@@ -355,10 +380,10 @@ const getDecoratedLightProps = (
           : null;
 
         if (wltpConsumptionValue && wltpCo2Value) {
-          return <>{wltpConsumptionValue}, {wltpCo2Value}</>;
+          return <>{wltpConsumptionValue}, {wltpCo2Value}{co2ClassValue && <><br />{co2ClassValue}</>}</>;
         }
 
-        return <>{consumptionValue} <br /> {co2Value}</>;
+        return <>{consumptionValue} <br /> {co2Value}{co2ClassValue && <><br />{co2ClassValue}</>}</>;
       }
     },
     consumptionCombinedDealer: {
@@ -370,6 +395,7 @@ const getDecoratedLightProps = (
         const translatedUnit = t(`cbd:${consumptionUnit}`);
 
         const co2 = car.environmentEmissions.co2;
+        const wltpEnergyEfficiencyClass = car.environmentEmissions.wltpEnergyEfficiencyClass;
 
         const consumptionValue = Number.isFinite(consumptionCombined)
           ? t('vehicleProps:value.consumptionCombined', { consumption: consumptionCombined.toLocaleString(language), unit: translatedUnit })
@@ -379,7 +405,11 @@ const getDecoratedLightProps = (
           ? t('vehicleProps:value.co2Combined', { co2: co2.toLocaleString(language) })
           : t('vehicleProps:value.na');
 
-        return <>{consumptionValue} | {co2Value}</>;
+        const co2ClassValue = isPropDefined(wltpEnergyEfficiencyClass)
+          ? t('vehicleProps:value.co2Class', { class: wltpEnergyEfficiencyClass })
+          : null;
+
+        return <>{consumptionValue} | {co2Value}{co2ClassValue ? <> | {co2ClassValue}</> : null}</>;
       }
     },
     gearbox: {

package/source/locales/data.ts

@@ -38,6 +38,7 @@ export const vehicleProps = (car?: any, isOfferAvailable: boolean = true) => {
       promoSlider: {
         consumptionCombined: `${vehicleOption.consumptionCombined}l/100km (komb)*`,
         co2: `${vehicleOption.co2} g CO2/km (komb)*`,
+        co2Class: `CO2-Klasse ${vehicleOption.wltpEnergyEfficiencyClass} (komb)`,
         new: 'neu',
         wltpCo2: `${vehicleOption.wltpCo2}g CO2/km (WLTP, komb.)*`,
         wltpConsumptionCombined: `${vehicleOption.consumptionCombined}l/100km`
@@ -57,6 +58,7 @@ export const vehicleProps = (car?: any, isOfferAvailable: boolean = true) => {
         deliveryPeriodMonths: `${Math.round(monthsTo)} Monat\nab Bestellung`,
         deliveryPeriodDays: `${count} Tag\nab Bestellung`,
         co2Combined: `${vehicleOption.co2}g CO2/km (komb)*`,
+        co2Class: `CO2-Klasse ${vehicleOption.wltpEnergyEfficiencyClass} (komb)`,
         co2: `${vehicleOption.co2} g/km `,
         na: 'N/A',
         priceSub: '/mtl.',