@bytebrand/fe-ui-core-autobahn 1.0.1 → 1.0.3

package/compat/VehicleSmallCard/VehicleData/VehicleInfo/VehicleInfo.tsx

@@ -1,179 +1,179 @@
-/* tslint:disable */
-import * as React from 'react';
-import classnames from 'classnames';
-import styles from './VehicleInfo.styl';
-import PriceRating from '../../../PriceRating/PriceRating';
-import { Visible, Hidden } from 'react-grid-system';
-import { getPriceRating } from '../../../../utils/CommonUtils';
-import VehicleProperty from '../VehicleProperty/VehicleProperty'
-import getDecoratedProps from '../../../../vehiclesProps/decoratedLightProps';
-import {
-  getMainPropertiesForComparableCars,
-  getMainPropertiesForLandingCars,
-  getMainPropertiesForSRL,
-  getMainPropertiesForFavorite
-} from '../../../../vehiclesProps/vehicleDetails';
-import { IVehicleInfo } from '../../../../types/types';
-
-export type IVehicleInfoProps = IVehicleInfo;
-
-const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
-  const {
-    t,
-    mlCurrentSalesPricePredicted,
-    i18nPrefixForPriceRating,
-    vehicleComponentName,
-    combineRefAlternative,
-    mileage,
-    common: { currentSalesPrice },
-    language,
-    url,
-    target,
-    rel,
-    regDate,
-    linkTag,
-    routeObj,
-    gearbox,
-    numberOfPreviousOwners,
-    usageType,
-    condition,
-    damaged,
-    driveType,
-    environmentEmissions,
-    consumption,
-    location,
-    offer,
-    engineData,
-    suppressConsumption
-  } = props as (typeof props & { suppressConsumption?: boolean });
-  const firstRegistrationDate = regDate && regDate !== 0 ? regDate : 'N/A';
-
-  const dataDecoratedProps = {
-    engineData,
-    mainData: {
-      mileage,
-      location,
-      offer,
-      numberOfPreviousOwners,
-      usageType,
-      condition,
-      damaged,
-      firstRegistration: firstRegistrationDate
-    },
-    driveSuspension: {
-      gearbox,
-      driveType
-    },
-    environmentEmissions: {
-      co2: environmentEmissions.co2,
-      wltpCo2: environmentEmissions.wltpCo2,
-      wltpEnergyEfficiencyClass: environmentEmissions.wltpEnergyEfficiencyClass
-    },
-    consumption: {
-      fuel: consumption.fuel,
-      consumptionCombined: consumption.consumptionCombined,
-      consumptionPowerCombined: consumption.consumptionPowerCombined,
-      wltpCombined: consumption.wltpCombined,
-      wltpPowerCombined: consumption.wltpPowerCombined,
-      wltpWeightedPowerCombined: consumption.wltpWeightedPowerCombined,
-      wltpWeightedCombined: consumption.wltpWeightedCombined,
-    },
-  };
-
-  // ADV-88: ANY plug-in hybrid (new or used) carries the long weighted+discharged consumption/CO2
-  // line — render it full-width. Gated on hybridPlugin only, no condition check.
-  // ADV-88: "is a hybrid car" is determined by fuel type (hybrid electric + diesel/petrol), not hybridPlugin.
-  const isPluginHybrid = consumption.fuel === 'selector_fuel_hybridElectricalDiesel'
-    || consumption.fuel === 'selector_fuel_hybridElectricalPetrol';
-  const decoratedProps = getDecoratedProps(dataDecoratedProps, t, language);
-  const renderProperty = (renderProperties: any, vehicleComponentName?: any) => {
-    const mainPropertiesList = renderProperties(dataDecoratedProps.consumption.fuel, combineRefAlternative)
-      // ADV-88: on landing/main the plug-in consumption line is rendered full-width by VehicleSmallCard.
-      .filter((prop: string) => !(suppressConsumption && decoratedProps[prop] && decoratedProps[prop].name === 'consumptionCombined'))
-      .map((prop: string) => {
-      const isConsumption = decoratedProps[prop].name === 'consumptionCombined';
-      // On non-SRL cards (and for the full-width plug-in line) drop the fuel-pump icon to free up space.
-      const hideConsumptionIcon = isConsumption && (vehicleComponentName !== 'search' || isPluginHybrid);
-      return {
-        icon: hideConsumptionIcon ? '' : decoratedProps[prop].icon,
-        description: decoratedProps[prop].value,
-        className: classnames(styles[decoratedProps[prop].name], { [styles.pluginFullWidth]: isConsumption && isPluginHybrid }),
-        classNameIcon: (vehicleComponentName === 'search' || 'myVehicles' || 'favorite' || 'recently') && styles.carIconSearch,
-        smalltext: isConsumption && (vehicleComponentName !== 'search'),
-        hybridPlugin: isPluginHybrid && isConsumption && vehicleComponentName !== 'search'
-      };
-    });
-
-    return mainPropertiesList.map((property: any, index: number) => (
-      <VehicleProperty {...property} key={index} />
-    ))
-  };
-
-  const wrapClasses = classnames(
-    styles.vehicleInfo,
-    { [styles.vehiclePropertiesComparable]: vehicleComponentName === 'comparable' },
-    { [styles.vehiclePropertiesLanding]: vehicleComponentName === 'landing' },
-    { [styles.vehiclePropertiesMain]: vehicleComponentName === 'main' },
-    { [styles.vehiclePropertiesSearch]: vehicleComponentName === 'search' },
-    // ADV-88: mark a plug-in SRL card so its "good price" underline can be dropped on mobile.
-    { [styles.searchPluginInfo]: isPluginHybrid && vehicleComponentName === 'search' },
-    { [styles.vehiclePropertiesFavorite]: vehicleComponentName === 'favorite' },
-    { [styles.vehiclePropertiesMyVehicles]: vehicleComponentName === 'myVehicles' },
-    { [styles.vehiclePropertiesRecently]: vehicleComponentName === 'recently' },
-    { [styles.vehiclePropertiesIsAlternative]: combineRefAlternative },
-  );
-
-  const conditionForRating = vehicleComponentName === 'search' || 'myVehicles' || 'favorite' || 'recently';
-
-  return (
-    <>
-      {React.createElement(linkTag, {
-        children: (
-        <>
-          {vehicleComponentName === 'comparable' || vehicleComponentName === 'recently' ? renderProperty(getMainPropertiesForComparableCars) : ''}
-          {vehicleComponentName === 'main' ? renderProperty(getMainPropertiesForLandingCars) : ''}
-          {vehicleComponentName === 'landing' ? (
-            <>
-              <Visible xs sm md>
-                {renderProperty(getMainPropertiesForSRL, vehicleComponentName)}
-              </Visible>
-              <Hidden xs sm md>
-                {renderProperty(getMainPropertiesForLandingCars, vehicleComponentName)}
-              </Hidden>
-            </>
-          ) : ''}
-          {vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' ? renderProperty(getMainPropertiesForSRL, vehicleComponentName): ''}
-          
-          {vehicleComponentName === 'favorite' ? (
-            <>
-              <Visible xs sm md>
-                {renderProperty(getMainPropertiesForComparableCars)}
-              </Visible>
-              <Hidden xs sm md>
-                {renderProperty(getMainPropertiesForFavorite, vehicleComponentName)}
-              </Hidden>
-            </>
-          ) : ''}
-          <PriceRating
-            t={t}
-            i18nPrefix={i18nPrefixForPriceRating ? `${i18nPrefixForPriceRating}priceRating.` : 'priceRating.'}
-            rating={getPriceRating(currentSalesPrice, mlCurrentSalesPricePredicted)}
-            className={`${styles.priceRating} ${conditionForRating ? styles.priceRatingSRL : ''}`}
-            classLabel={conditionForRating ? styles.priceRatingLabelSRL : ''}
-            classSegmentWrapper={conditionForRating ? styles.priceRatingSegmentWrapSRL : ''}
-          />
-        </>
-      ),
-        ...routeObj,
-        className: wrapClasses,
-        // ADV-116: opening a CDP from a card defaults to the Financing tab.
-        onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
-        href: url,
-        target,
-        rel
-      })}
-    </>
-  );
-};
-
-export default VehicleInfo;
+/* tslint:disable */
+import * as React from 'react';
+import classnames from 'classnames';
+import styles from './VehicleInfo.styl';
+import PriceRating from '../../../PriceRating/PriceRating';
+import { Visible, Hidden } from 'react-grid-system';
+import { getPriceRating } from '../../../../utils/CommonUtils';
+import VehicleProperty from '../VehicleProperty/VehicleProperty'
+import getDecoratedProps from '../../../../vehiclesProps/decoratedLightProps';
+import {
+  getMainPropertiesForComparableCars,
+  getMainPropertiesForLandingCars,
+  getMainPropertiesForSRL,
+  getMainPropertiesForFavorite
+} from '../../../../vehiclesProps/vehicleDetails';
+import { IVehicleInfo } from '../../../../types/types';
+
+export type IVehicleInfoProps = IVehicleInfo;
+
+const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
+  const {
+    t,
+    mlCurrentSalesPricePredicted,
+    i18nPrefixForPriceRating,
+    vehicleComponentName,
+    combineRefAlternative,
+    mileage,
+    common: { currentSalesPrice },
+    language,
+    url,
+    target,
+    rel,
+    regDate,
+    linkTag,
+    routeObj,
+    gearbox,
+    numberOfPreviousOwners,
+    usageType,
+    condition,
+    damaged,
+    driveType,
+    environmentEmissions,
+    consumption,
+    location,
+    offer,
+    engineData,
+    suppressConsumption
+  } = props as (typeof props & { suppressConsumption?: boolean });
+  const firstRegistrationDate = regDate && regDate !== 0 ? regDate : 'N/A';
+
+  const dataDecoratedProps = {
+    engineData,
+    mainData: {
+      mileage,
+      location,
+      offer,
+      numberOfPreviousOwners,
+      usageType,
+      condition,
+      damaged,
+      firstRegistration: firstRegistrationDate
+    },
+    driveSuspension: {
+      gearbox,
+      driveType
+    },
+    environmentEmissions: {
+      co2: environmentEmissions.co2,
+      wltpCo2: environmentEmissions.wltpCo2,
+      wltpEnergyEfficiencyClass: environmentEmissions.wltpEnergyEfficiencyClass
+    },
+    consumption: {
+      fuel: consumption.fuel,
+      consumptionCombined: consumption.consumptionCombined,
+      consumptionPowerCombined: consumption.consumptionPowerCombined,
+      wltpCombined: consumption.wltpCombined,
+      wltpPowerCombined: consumption.wltpPowerCombined,
+      wltpWeightedPowerCombined: consumption.wltpWeightedPowerCombined,
+      wltpWeightedCombined: consumption.wltpWeightedCombined,
+    },
+  };
+
+  // ADV-88: ANY plug-in hybrid (new or used) carries the long weighted+discharged consumption/CO2
+  // line — render it full-width. Gated on hybridPlugin only, no condition check.
+  // ADV-88: "is a hybrid car" is determined by fuel type (hybrid electric + diesel/petrol), not hybridPlugin.
+  const isPluginHybrid = consumption.fuel === 'selector_fuel_hybridElectricalDiesel'
+    || consumption.fuel === 'selector_fuel_hybridElectricalPetrol';
+  const decoratedProps = getDecoratedProps(dataDecoratedProps, t, language);
+  const renderProperty = (renderProperties: any, vehicleComponentName?: any) => {
+    const mainPropertiesList = renderProperties(dataDecoratedProps.consumption.fuel, combineRefAlternative)
+      // ADV-88: on landing/main the plug-in consumption line is rendered full-width by VehicleSmallCard.
+      .filter((prop: string) => !(suppressConsumption && decoratedProps[prop] && decoratedProps[prop].name === 'consumptionCombined'))
+      .map((prop: string) => {
+      const isConsumption = decoratedProps[prop].name === 'consumptionCombined';
+      // On non-SRL cards (and for the full-width plug-in line) drop the fuel-pump icon to free up space.
+      const hideConsumptionIcon = isConsumption && (vehicleComponentName !== 'search' || isPluginHybrid);
+      return {
+        icon: hideConsumptionIcon ? '' : decoratedProps[prop].icon,
+        description: decoratedProps[prop].value,
+        className: classnames(styles[decoratedProps[prop].name], { [styles.pluginFullWidth]: isConsumption && isPluginHybrid }),
+        classNameIcon: (vehicleComponentName === 'search' || 'myVehicles' || 'favorite' || 'recently') && styles.carIconSearch,
+        smalltext: isConsumption && (vehicleComponentName !== 'search'),
+        hybridPlugin: isPluginHybrid && isConsumption && vehicleComponentName !== 'search'
+      };
+    });
+
+    return mainPropertiesList.map((property: any, index: number) => (
+      <VehicleProperty {...property} key={index} />
+    ))
+  };
+
+  const wrapClasses = classnames(
+    styles.vehicleInfo,
+    { [styles.vehiclePropertiesComparable]: vehicleComponentName === 'comparable' },
+    { [styles.vehiclePropertiesLanding]: vehicleComponentName === 'landing' },
+    { [styles.vehiclePropertiesMain]: vehicleComponentName === 'main' },
+    { [styles.vehiclePropertiesSearch]: vehicleComponentName === 'search' },
+    // ADV-88: mark a plug-in SRL card so its "good price" underline can be dropped on mobile.
+    { [styles.searchPluginInfo]: isPluginHybrid && vehicleComponentName === 'search' },
+    { [styles.vehiclePropertiesFavorite]: vehicleComponentName === 'favorite' },
+    { [styles.vehiclePropertiesMyVehicles]: vehicleComponentName === 'myVehicles' },
+    { [styles.vehiclePropertiesRecently]: vehicleComponentName === 'recently' },
+    { [styles.vehiclePropertiesIsAlternative]: combineRefAlternative },
+  );
+
+  const conditionForRating = vehicleComponentName === 'search' || 'myVehicles' || 'favorite' || 'recently';
+
+  return (
+    <>
+      {React.createElement(linkTag, {
+        children: (
+        <>
+          {vehicleComponentName === 'comparable' || vehicleComponentName === 'recently' ? renderProperty(getMainPropertiesForComparableCars) : ''}
+          {vehicleComponentName === 'main' ? renderProperty(getMainPropertiesForLandingCars) : ''}
+          {vehicleComponentName === 'landing' ? (
+            <>
+              <Visible xs sm md>
+                {renderProperty(getMainPropertiesForSRL, vehicleComponentName)}
+              </Visible>
+              <Hidden xs sm md>
+                {renderProperty(getMainPropertiesForLandingCars, vehicleComponentName)}
+              </Hidden>
+            </>
+          ) : ''}
+          {vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' ? renderProperty(getMainPropertiesForSRL, vehicleComponentName): ''}
+          
+          {vehicleComponentName === 'favorite' ? (
+            <>
+              <Visible xs sm md>
+                {renderProperty(getMainPropertiesForComparableCars)}
+              </Visible>
+              <Hidden xs sm md>
+                {renderProperty(getMainPropertiesForFavorite, vehicleComponentName)}
+              </Hidden>
+            </>
+          ) : ''}
+          <PriceRating
+            t={t}
+            i18nPrefix={i18nPrefixForPriceRating ? `${i18nPrefixForPriceRating}priceRating.` : 'priceRating.'}
+            rating={getPriceRating(currentSalesPrice, mlCurrentSalesPricePredicted)}
+            className={`${styles.priceRating} ${conditionForRating ? styles.priceRatingSRL : ''}`}
+            classLabel={conditionForRating ? styles.priceRatingLabelSRL : ''}
+            classSegmentWrapper={conditionForRating ? styles.priceRatingSegmentWrapSRL : ''}
+          />
+        </>
+      ),
+        ...routeObj,
+        className: wrapClasses,
+        // ADV-116: opening a CDP from a card defaults to the Financing tab.
+        onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
+        href: url,
+        target,
+        rel
+      })}
+    </>
+  );
+};
+
+export default VehicleInfo;