@bytebrand/fe-ui-core 4.6.4 → 4.6.5

package/package.json

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

package/source/components/_common/Co2Widget/CO2Efficiency.styl

@@ -178,3 +178,42 @@
     background-color: #AC0A13
   .auto_de_selector_energyEfficiencyClass_g::after
     border-left-color: #AC0A13
+
+
+
+
+:global
+  .auto_de_selector_energyEfficiencyClass_a_wltp
+    background-color: #4AA35A
+  .auto_de_selector_energyEfficiencyClass_a_wltp::after
+    border-left-color: #4AA35A
+
+  .auto_de_selector_energyEfficiencyClass_b_wltp
+    background-color: #6EBB4D
+  .auto_de_selector_energyEfficiencyClass_b_wltp::after
+    border-left-color: #6EBB4D
+
+  .auto_de_selector_energyEfficiencyClass_c_wltp
+    background-color: #BDDB4A
+  .auto_de_selector_energyEfficiencyClass_c_wltp::after
+    border-left-color: #BDDB4A
+
+  .auto_de_selector_energyEfficiencyClass_d_wltp
+    background-color: #FBF151
+  .auto_de_selector_energyEfficiencyClass_d_wltp::after
+    border-left-color: #FBF151
+
+  .auto_de_selector_energyEfficiencyClass_e_wltp
+    background-color: #EFB741
+  .auto_de_selector_energyEfficiencyClass_e_wltp::after
+    border-left-color: #EFB741
+
+  .auto_de_selector_energyEfficiencyClass_f_wltp
+    background-color: #E26733
+  .auto_de_selector_energyEfficiencyClass_f_wltp::after
+    border-left-color: #E26733
+
+  .auto_de_selector_energyEfficiencyClass_g_wltp
+    background-color: #DB3733
+  .auto_de_selector_energyEfficiencyClass_g_wltp::after
+    border-left-color: #DB3733

package/source/components/_common/Co2Widget/CO2Efficiency.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import classnames from 'classnames';
 import { selectors } from '@bytebrand/car-schema-selectors';
+import { WLTP_ENERGY_EFFICIENCY_CLASS } from '../../../framework/constants';
 
 import styles from './CO2Efficiency.styl';
 
@@ -14,6 +15,7 @@ interface ICO2EfficiencyProps {
   levelTitle?: string;
   wltpLevelTitle?: string;
   hybridPlugin?: boolean;
+  isWltp?: boolean;
 }
 
 // TODO: pass efficiency classes as a list into props.
@@ -24,7 +26,27 @@ class CO2Efficiency extends React.Component<ICO2EfficiencyProps> {
   };
 
   renderLevels = () => {
-    const { level, wltpLevel, t, hybridPlugin } = this.props;
+    const { level, wltpLevel, t, hybridPlugin, isWltp = false } = this.props;
+
+    if (isWltp) {
+      return WLTP_ENERGY_EFFICIENCY_CLASS.map((key: string, i: number) => {
+        const width: string = `${(i + 1) * 10 + 13}px`; // tslint:disable-line
+        const isActive: boolean = key === level;
+        const isWltpActive: boolean = key === wltpLevel;
+        const className: string = classnames(styles.class, `auto_de_${key}_wltp`);
+        const translatedKey: string = t(`cbd:${key}`);
+  
+        return key !== 'selector_unknown' ? (
+          <div key={key} className={styles.classContainer}>
+            <span className={className} style={{ width }}>
+              {translatedKey}
+            </span>
+            {isActive && <span className={styles.activeClass}>{translatedKey}</span>}
+            {isWltpActive && hybridPlugin && <span className={styles.secondActiveClass}>{translatedKey}</span>}
+          </div>
+        ) : false;
+      });
+    };
 
     return selectors.energyEfficiencyClass.map((key: string, i: number) => {
       const width: string = `${(i + 1) * 10 + 10}px`; // tslint:disable-line

package/source/framework/constants.ts

@@ -54,6 +54,17 @@ export const DELIVERY_PERIODS_EXTRA = DELIVERY_PERIODS.map((val: string) => ({
   value: val
 }));
 
+
+export const WLTP_ENERGY_EFFICIENCY_CLASS = [
+  "selector_energyEfficiencyClass_a",
+  "selector_energyEfficiencyClass_b",
+  "selector_energyEfficiencyClass_c",
+  "selector_energyEfficiencyClass_d",
+  "selector_energyEfficiencyClass_e",
+  "selector_energyEfficiencyClass_f",
+  "selector_energyEfficiencyClass_g"
+];
+
 export const offers = [
   {
     name: 'financing',

package/source/framework/vehiclesProps/decoratedProps.tsx

@@ -1139,10 +1139,19 @@ const getDecoratedProps = (
           : t('vehicleProps:value.na');
       }
     },
+    wltpCo2Plugin: {
+      title: t('vehicleProps:title.wltpCo2Plugin'),
+      get value() {
+        const c02 = car.environmentEmissions.wltpCo2;
+        return Number.isFinite(c02)
+          ? t('vehicleProps:value.co2', { co2: c02.toLocaleString(language) })
+          : t('vehicleProps:value.na');
+      }
+    },
     wltpCo2Discharged: {
       title: t('vehicleProps:title.wltpCo2Discharged'),
       get value() {
-        const wltpCo2 = car.environmentEmissions.wltpCo2;
+        const wltpCo2 = car.environmentEmissions.wltpCo2Discharged;
         return Number.isFinite(wltpCo2)
           ? t('vehicleProps:value.co2', { co2: wltpCo2.toLocaleString(language) })
           : t('vehicleProps:value.na');
@@ -1166,6 +1175,7 @@ const getDecoratedProps = (
             levelTitle={t('vehicleProps:title.wltpCO2WidgetComb')}
             wltpLevelTitle={t('vehicleProps:title.wltpCO2WidgetDischargedBattery')}
             hybridPlugin={hybridPlugin}
+            isWltp
           /> : t('vehicleProps:value.na');
       }
     },
@@ -1174,7 +1184,7 @@ const getDecoratedProps = (
       subTitle: t('vehicleProps:title.subTitle'),
       get value() {
         const level = car.environmentEmissions.wltpDischargedEnergyEfficiencyClass;
-        return isPropDefined(level) ? <CO2Efficiency level={level} t={t} /> : t('vehicleProps:value.na');
+        return isPropDefined(level) ? <CO2Efficiency level={level} isWltp t={t} /> : t('vehicleProps:value.na');
       }
     },
     wltpRange: {
@@ -1217,7 +1227,7 @@ const getDecoratedProps = (
     wltpWeightedCombined: {
       title: t('vehicleProps:title.wltpWeightedCombined'),
       get value() {
-        const wltpWeightedCombined = car.consumption && car.consumption.wltpTotalRangeCity;
+        const wltpWeightedCombined = car.consumption.wltpWeightedCombined;
         return Number.isFinite(wltpWeightedCombined)
           ? t('vehicleProps:value.consumptionCombined', { consumption: wltpWeightedCombined.toLocaleString(language) })
           : t('vehicleProps:value.na');
@@ -1234,6 +1244,17 @@ const getDecoratedProps = (
           : t('vehicleProps:value.na');
       }
     },
+    wltpCombinedPlugin: {
+      title: t('vehicleProps:title.wltpCombinedPlugin'),
+      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.consumption', { consumption: wltpCombined.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+      }
+    },
     wltpSlow: {
       title: t('vehicleProps:title.wltpSlow'),
       get value() {
@@ -1245,6 +1266,17 @@ const getDecoratedProps = (
           : t('vehicleProps:value.na');
       }
     },
+    wltpSlowPlugin: {
+      title: t('vehicleProps:title.wltpSlowPlugin'),
+      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.consumption', { consumption: wltpSlow.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+      }
+    },
     wltpMedium: {
       title: t('vehicleProps:title.wltpMedium'),
       get value() {
@@ -1256,6 +1288,17 @@ const getDecoratedProps = (
           : t('vehicleProps:value.na');
       }
     },
+    wltpMediumPlugin: {
+      title: t('vehicleProps:title.wltpMediumPlugin'),
+      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.consumption', { consumption: wltpMedium.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+      }
+    },
     wltpFast: {
       title: t('vehicleProps:title.wltpFast'),
       get value() {
@@ -1267,6 +1310,17 @@ const getDecoratedProps = (
           : t('vehicleProps:value.na');
       }
     },
+    wltpFastPlugin: {
+      title: t('vehicleProps:title.wltpFastPlugin'),
+      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.consumption', { consumption: wltpFast.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+      }
+    },
     wltpVeryFast: {
       title: t('vehicleProps:title.wltpVeryFast'),
       get value() {
@@ -1278,6 +1332,17 @@ const getDecoratedProps = (
           : t('vehicleProps:value.na');
       }
     },
+    wltpVeryFastPlugin: {
+      title: t('vehicleProps:title.wltpVeryFastPlugin'),
+      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.consumption', { consumption: wltpVeryFast.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+      }
+    },
     wltpWeightedPowerCombined: {
       title: t('vehicleProps:title.wltpWeightedPowerCombined'),
       get value() {
@@ -1344,6 +1409,61 @@ const getDecoratedProps = (
           : t('vehicleProps:value.na');
       }
     },
+    wltpPowerCombinedPlugin: {
+      title: t('vehicleProps:title.wltpPowerCombinedPlugin'),
+      get value() {
+        const wltpPowerCombined = car.consumption.wltpPowerCombined;
+        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
+        const translatedUnit = t(`cbd:${consumptionUnit}`);
+        return Number.isFinite(wltpPowerCombined)
+          ? t('vehicleProps:value.consumptionPower', { consumption: wltpPowerCombined.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+      }
+    },
+    wltpPowerSlowPlugin: {
+      title: t('vehicleProps:title.wltpPowerSlowPlugin'),
+      get value() {
+        const wltpPowerSlow = car.consumption.wltpPowerSlow;
+        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
+        const translatedUnit = t(`cbd:${consumptionUnit}`);
+        return Number.isFinite(wltpPowerSlow)
+          ? t('vehicleProps:value.consumptionPower', { consumption: wltpPowerSlow.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+      }
+    },
+    wltpPowerMediumPlugin: {
+      title: t('vehicleProps:title.wltpPowerMediumPlugin'),
+      get value() {
+        const wltpPowerMedium = car.consumption.wltpPowerMedium;
+        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
+        const translatedUnit = t(`cbd:${consumptionUnit}`);
+        return Number.isFinite(wltpPowerMedium)
+          ? t('vehicleProps:value.consumptionPower', { consumption: wltpPowerMedium.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+      }
+    },
+    wltpPowerFastPlugin: {
+      title: t('vehicleProps:title.wltpPowerFastPlugin'),
+      get value() {
+        const wltpPowerFast = car.consumption.wltpPowerFast;
+        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
+        const translatedUnit = t(`cbd:${consumptionUnit}`);
+        return Number.isFinite(wltpPowerFast)
+          ? t('vehicleProps:value.consumptionPower', { consumption: wltpPowerFast.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+      }
+    },
+    wltpPowerVeryFastPlugin: {
+      title: t('vehicleProps:title.wltpPowerVeryFastPlugin'),
+      get value() {
+        const wltpPowerVeryFast = car.consumption.wltpPowerVeryFast;
+        const consumptionUnit = car.consumption.consumptionUnit || 'consumption_consumptionUnit_l';
+        const translatedUnit = t(`cbd:${consumptionUnit}`);
+        return Number.isFinite(wltpPowerVeryFast)
+          ? t('vehicleProps:value.consumptionPower', { consumption: wltpPowerVeryFast.toLocaleString(language), unit: translatedUnit })
+          : t('vehicleProps:value.na');
+      }
+    },
     // wltpEnergyCosts: {
     //   title: t('vehicleProps:title.wltpEnergyCosts'),
     //   get value() {
@@ -1386,6 +1506,33 @@ const getDecoratedProps = (
           : t('vehicleProps:value.na');
       }
     },
+    powerPrice: {
+      title: t('vehicleProps:title.powerPrice'),
+      get value() {
+        const { powerPrice } = car.costModel;
+        return Number.isFinite(powerPrice)
+          ? t('vehicleProps:value.price', { price: getFormattedPrice(powerPrice, '$,.2f') })
+          : t('vehicleProps:value.na');
+      }
+    },
+    fuelPrice: {
+      title: t('vehicleProps:title.fuelPrice'),
+      get value() {
+        const { fuelPrice } = car.costModel;
+        return Number.isFinite(fuelPrice)
+          ? t('vehicleProps:value.price', { price: getFormattedPrice(fuelPrice, '$,.2f') })
+          : t('vehicleProps:value.na');
+      }
+    },
+    consumptionPriceYear: {
+      title: t('vehicleProps:title.consumptionPriceYear'),
+      get value() {
+        const { consumptionPriceYear } = car.costModel;
+        return Number.isFinite(consumptionPriceYear)
+          ? t('vehicleProps:value.price', { price: getFormattedPrice(consumptionPriceYear, '$,.2f') })
+          : t('vehicleProps:value.na');
+      }
+    },
     wltpCostModelTax: {
       title: t('vehicleProps:title.wltpVehicleTax'),
       get value() {