@bytebrand/fe-ui-core 4.1.39 → 4.1.41

package/package.json

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

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

@@ -8,8 +8,14 @@
   flex-shrink: 0;
   height: 46px;
   box-sizing: border-box;
+
+  &.priceItemFavorite
+    height: 44px;
+
   +media-phone-up()
     height: 42px;
+    &.priceItemFavorite
+      height: 42px;
 
   &:first-of-type
     align-items: flex-end;
@@ -22,9 +28,6 @@
       &.priceItemCategorySearch
         +media-tablet-landscape-up()
           font-size: 12px;
-  &:last-of-type
-    border-top: 1px solid $grey-d3
-    padding-top: 12px;
   &:nth-of-type(3), &:last-of-type
     .tooltipWrap
       &__block
@@ -37,6 +40,9 @@
         &::after
           transform: rotate(180deg) translateX(3px);
 
+.priceItemBuy
+  border-top: 1px solid $grey-d3
+
 .priceItemCategory
   font-size: 12px
   font-weight bold
@@ -59,6 +65,11 @@
     +media-tablet-landscape-up()
       font-size: 12px;
 
+  &.priceItemCategoryFavorite
+    +media-tablet-landscape-up()
+      font-size: 13px !important;
+      color: rgba(76, 78, 100, 0.87);
+
 .priceItemDisable
   pointer-events: none;
   .priceItemCategory
@@ -131,4 +142,8 @@
 .isAlternativeText
   position: absolute;
   font-size: 8px;
-  bottom: 5px;
+  bottom: 5px;
+
+.tooltipWrapFavorites
+  transform: translateY(-1px);
+  margin-left: 5px;

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

@@ -16,7 +16,7 @@ export interface IVehiclePriceItemProps {
   showAboIcon: Boolean;
   isPriceDisable: Boolean;
   isAlternativeText?: string;
-  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles';
+  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite';
   perMonthCurrent?: number;
   iconName?: string;
   perMonthOld?: number;
@@ -66,12 +66,15 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
 
     const stylesItem = classnames(
       styles.priceItem,
-      { [styles.priceItemDisable]: isPriceDisable }
+      { [styles.priceItemFavorite]: vehicleComponentName === 'favorite' },
+      { [styles.priceItemDisable]: isPriceDisable },
+      { [styles.priceItemBuy]: isTotal },
     );
 
     const priceItemCategoryClassName = classnames(
       styles.priceItemCategory,
-      { [styles.priceItemCategorySearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' }
+      { [styles.priceItemCategorySearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' },
+      { [styles.priceItemCategoryFavorite]: vehicleComponentName === 'favorite' }
     );
     return (
       <div className={stylesItem}>
@@ -82,7 +85,15 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
           className: priceItemCategoryClassName,
           href: url
         })}
-        {tooltipDescription && <Tooltip description={tooltipDescription} positionX={positionX} positionY={positionY} iconName={iconName} />}
+        {tooltipDescription && (
+          <Tooltip
+            tooltipClassName={vehicleComponentName === 'favorite' ? styles.tooltipWrapFavorites : ''}
+            description={tooltipDescription}
+            positionX={positionX}
+            positionY={positionY}
+            iconName={vehicleComponentName === 'favorite' ? 'infoIcon' : iconName}
+          />
+        )}
         {isNewPriceCategory && (
           <span className={styles.priceNewBlock}>neu</span>
         )}

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

@@ -152,6 +152,50 @@
         height: 16px;
         max-width: 25%;
 
+  &.vehiclePropertiesFavorite
+    grid-template-columns: 1fr;
+    display: grid;
+    grid-auto-rows: 44px;
+
+    & > .consumptionCombined
+      white-space: pre-line;
+      grid-row: 4;
+
+    +media-tablet-landscape-up()
+      grid-template-columns: 1fr 1fr 1fr;
+      margin-top: -13px;
+      padding: 0;
+      grid-auto-rows: 52px;
+
+      &:after
+        display none
+
+      & > .consumptionCombined,
+      & > div:last-of-type
+        grid-column: auto;
+        grid-row: auto;
+
+      & > .offerAvailability
+        border: none;
+        & + div
+          border: none;
+
+      & .carIconSearch
+        width: 23px;
+        height: 23px;
+        max-width: 23px;
+
+      & .priceRatingLabelSRL
+        font-size: 10px;
+
+      & .priceRatingSRL
+        margin: auto;
+
+      & .priceRatingSegmentWrapSRL > div
+        width: 24px
+        height: 16px;
+        max-width: 25%;
+
   &.vehiclePropertiesMyVehicles
     &::after
       +media-tablet-landscape-down()

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

@@ -10,7 +10,8 @@ import getDecoratedProps from '../../../../framework/vehiclesProps/decoratedLigh
 import {
   getMainPropertiesForComparableCars,
   getMainPropertiesForLandingCars,
-  getMainPropertiesForSRL
+  getMainPropertiesForSRL,
+  getMainPropertiesForFavorite
 } from '../../../../framework/vehiclesProps/vehicleDetails';
 import { IVehicleInfo } from '../../../../framework/types/types';
 
@@ -31,6 +32,11 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
     routeObj,
     mileage,
     gearbox,
+    numberOfPreviousOwners,
+    usageType,
+    condition,
+    damaged,
+    driveType,
     environmentEmissions,
     consumption,
     location,
@@ -46,10 +52,15 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
       mileage,
       location,
       offer,
+      numberOfPreviousOwners,
+      usageType,
+      condition,
+      damaged,
       firstRegistration: firstRegistrationDate
     },
     driveSuspension: {
-      gearbox
+      gearbox,
+      driveType
     },
     environmentEmissions: {
       co2: environmentEmissions.co2
@@ -67,7 +78,7 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
       icon: decoratedProps[prop].icon,
       description: decoratedProps[prop].value,
       className: styles[decoratedProps[prop].name],
-      classNameIcon: (vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles') && styles.carIconSearch
+      classNameIcon: (vehicleComponentName === 'search' || 'myVehicles' || 'favorite') && styles.carIconSearch
     }));
 
     return mainPropertiesList.map((property: any, index: number) => (
@@ -81,6 +92,7 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
     { [styles.vehiclePropertiesLanding]: vehicleComponentName === 'landing' },
     { [styles.vehiclePropertiesMain]: vehicleComponentName === 'main' },
     { [styles.vehiclePropertiesSearch]: vehicleComponentName === 'search' },
+    { [styles.vehiclePropertiesFavorite]: vehicleComponentName === 'favorite' },
     { [styles.vehiclePropertiesMyVehicles]: vehicleComponentName === 'myVehicles' },
     { [styles.vehiclePropertiesIsAlternative]: combineRefAlternative },
   );
@@ -103,13 +115,24 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
             </>
           ) : ''}
           {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} ${vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' ? styles.priceRatingSRL : ''}`}
-            classLabel={vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' ? styles.priceRatingLabelSRL : ''}
-            classSegmentWrapper={vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' ? styles.priceRatingSegmentWrapSRL : ''}
+            className={`${styles.priceRating} ${vehicleComponentName === 'search' || 'myVehicles' || 'favorite' ? styles.priceRatingSRL : ''}`}
+            classLabel={vehicleComponentName === 'search' || 'myVehicles' || 'favorite' ? styles.priceRatingLabelSRL : ''}
+            classSegmentWrapper={vehicleComponentName === 'search' || 'myVehicles' || 'favorite' ? styles.priceRatingSegmentWrapSRL : ''}
           />
         </>
       ),

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

@@ -18,6 +18,14 @@
       padding: 0 5px 0 15px;
       border-left: 1px solid $grey-d
 
+  &.vehiclePriceSectionFavorite
+    padding: 0 10px 0 10px
+    +media-tablet-landscape-up()
+      flex-shrink: 0;
+      padding: 0 5px 0 15px;
+      border-left: 1px solid $grey-d
+      gap: 3px;
+
 .vehiclePriceTitle
   color: $grey-3
   display block;
@@ -49,4 +57,46 @@
   text-transform: uppercase !important
 
 .isAlternativeButton
-  background-color: $alternative !important
+  background-color: $alternative !important
+
+.wrapCheckbox
+  height: 42px;
+  & > div
+    order: 1;
+  & span
+    margin: 0 !important;
+    color: rgba(76, 78, 100, 0.87);
+
+.wrapHandleCompare
+  display: flex;
+  gap: 8px;
+  border-top: 1px solid $grey-d3;
+  padding-top: 15px;
+
+  +media-tablet-landscape-up()
+    margin-top: 20px;
+    padding-top: 0;
+    border: none;
+
+.btnCompareRemove
+  min-width: 50px !important;
+  height: 34px;
+  border: 1px solid #BA1A1A !important;
+
+.btnCarToCompare
+  display: flex;
+  height: 34px;
+  align-items: center;
+  text-transform uppercase !important
+  width: 100%;
+  min-width: auto !important;
+  max-width: 100% !important;
+
+.btnPlusIcon
+  font-size: 26px;
+  margin-right: 10px;
+  line-height: 32px;
+
+.btnText
+  position: relative;
+  top: -4px;

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

@@ -5,6 +5,8 @@ import VehiclePriceItem from '../VechiclePriceItem/VechiclePriceItem';
 import { IBuy, ILeasing, IFinancing, ICommonFinancing } from '../../../../framework/types/types';
 import { Hidden } from 'react-grid-system';
 import Button from '../../../../components/_common/Button/Button';
+import Checkbox from '../../../../components/_common/Checkbox/Checkbox';
+import IconSVG from '../../../_common/IconSVG/IconSVG';
 
 export interface IVehiclePriceSectionProps {
   t?: (key: string, options?: object) => string;
@@ -18,7 +20,7 @@ export interface IVehiclePriceSectionProps {
   linkTag?: string;
   showAboIcon?: boolean;
   isNewPriceCategory?: boolean;
-  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles';
+  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite';
   monthlyInstallment?: number;
   oldMonthlyInstallment?: number;
   positionY?: string;
@@ -27,12 +29,16 @@ export interface IVehiclePriceSectionProps {
   mainImageId?: string;
   toRound?: boolean;
   showOfferBtn?: boolean;
+  margin?: number;
   leasing?: ILeasing;
   financing?: IFinancing;
   buy?: IBuy;
   common: ICommonFinancing;
   vatRate?: number;
   onDetailsClick(id: string): void;
+  toggleCarToCompare?(carId: string): void;
+  onRemoveClick?(carId: string): void;
+  toCompare?: boolean;
   onAddOfferToMainSlideClick?: (id: string, mainImageId: string, price: number, financingConfig: any) => void;
   combineRefAlternative?: boolean;
   typeAlternative?: string;
@@ -82,6 +88,9 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
       linkTag,
       showOfferBtn,
       routeObj,
+      toggleCarToCompare,
+      toCompare,
+      onRemoveClick,
       vatRate,
       iconName,
       vehicleComponentName,
@@ -102,12 +111,13 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
 
     const vehiclePriceSectionClassName = classnames(
       styles.vehiclePriceSection,
-      { [styles.vehiclePriceSectionSearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' }
+      { [styles.vehiclePriceSectionSearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' },
+      { [styles.vehiclePriceSectionFavorite]: vehicleComponentName === 'favorite' }
     );
 
     const vehiclePriceTitleClassName = classnames(
       styles.vehiclePriceTitle,
-      { [styles.vehiclePriceTitleSearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' }
+      { [styles.vehiclePriceTitleSearch]: vehicleComponentName === 'search' || 'myVehicles' || 'favorite' }
     );
     const priceItemsGlobal = [
       {
@@ -128,6 +138,19 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
       }
     ];
 
+    const Abo = vehicleComponentName !== 'favorite' ? [
+      {
+        perMonthOld: oldMonthlyInstallment,
+        perMonthCurrent: monthlyInstallment,
+        isNewPriceCategory: true,
+        showAboIcon: true,
+        isPriceDisable: true,
+        positionY: 'top',
+        title: t('vehicleProps:title.abo'),
+        tooltipDescription: t('vehicleProps:title.aboDescription')
+      }
+    ] : '';
+
     const priceData: IPriceData[] = combineRefAlternative ? [
       ...priceItemsGlobal,
       {
@@ -144,16 +167,7 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
       }
     ] : [
       ...priceItemsGlobal,
-      {
-        perMonthOld: oldMonthlyInstallment,
-        perMonthCurrent: monthlyInstallment,
-        isNewPriceCategory: true,
-        showAboIcon: true,
-        isPriceDisable: true,
-        positionY: 'top',
-        title: t('vehicleProps:title.abo'),
-        tooltipDescription: t('vehicleProps:title.aboDescription')
-      },
+      ...Abo,
       {
         isTotal: true,
         totalCurrent: currentSalesPriceExtra,
@@ -211,8 +225,26 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
     );
     return (
       <section className={vehiclePriceSectionClassName}>
-        <span className={vehiclePriceTitleClassName}>{t('vehicleProps:title.monthlyFrom')}</span>
+        {vehicleComponentName === 'favorite' ? (
+          <Checkbox
+            checked={toCompare}
+            onChange={toggleCarToCompare}
+            label={t('FavoritesPage:toCompare')}
+            labelClassName={styles.wrapCheckbox}
+          />
+        ) : <span className={vehiclePriceTitleClassName}>{t('vehicleProps:title.monthlyFrom')}</span>}
         {ListPrices}
+        {vehicleComponentName === 'favorite' && (
+          <div className={styles.wrapHandleCompare}>
+            <Button variant='text' onClick={onRemoveClick} className={styles.btnCompareRemove} color='secondary'>
+              <IconSVG className={styles.removeIcon} name='trashIcon' customDimensions />
+            </Button>
+            <Button className={styles.btnCarToCompare} variant='outlined' onClick={toggleCarToCompare}>
+              <span className={styles.btnPlusIcon}>{!toCompare ? '+' : '-'}</span>
+              <span className={styles.btnText}>{t('FavoritesPage:compare')}</span>
+            </Button>
+          </div>
+        )}
         {isDealerSuperAdmin && !typeAlternative ? (
           <Button className={styles.addOfferButton} onClick={this.onAddOfferClick}>
             {t('vehicleProps:title.addOfferToMainSlide')}

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

@@ -24,17 +24,17 @@ const VehicleTitle: React.FC<IVehicleTitleProps> = ({
 
   const infoSectionClassName = classnames(
     styles.infoSection,
-    { [styles.infoSectionSearch]: vehicleComponentName === 'search' },
+    { [styles.infoSectionSearch]: vehicleComponentName === 'search' || 'favorite' },
     { [styles.infoSectionMyVehicles]: vehicleComponentName === 'myVehicles' }
   );
 
   const wrapTitlesClassName = classnames(
     styles.wrapTitles,
-    { [styles.wrapTitlesSearch]: vehicleComponentName === 'search' || 'myVehicles'  }
+    { [styles.wrapTitlesSearch]: vehicleComponentName === 'search' || 'myVehicles' || 'favorite' }
   );
   const optionTitleClassName = classnames(
     styles.optionTitle,
-    { [styles.optionTitleSearch]: vehicleComponentName === 'search' || 'myVehicles' },
+    { [styles.optionTitleSearch]: vehicleComponentName === 'search' || 'myVehicles' || 'favorite' },
     { [styles.optionTitleIsAlternative]: combineRefAlternative }
   );
 

package/source/components/VehicleSmallCard/VehicleSmallCard.styl

@@ -72,6 +72,27 @@
         'title title price'\
         'image info price'
 
+  &.vehicleWrapFavorite
+    grid-template-areas:
+      'title title'\
+      'image image'\
+      'info price'\
+      'seoText seoText'
+    grid-template-columns: 155px 1fr;
+    border: 1px solid $grey-e;
+    border-radius: 10px;
+    // border-bottom: 6px solid $skyBlue;
+    margin: 10px;
+    padding-bottom: 15px;
+    +media-tablet-landscape-up()
+      border: 1px solid $grey-e;
+      padding: 10px;
+      grid-gap: 10px 15px;
+      grid-template-columns: 260px 1fr 245px;
+      grid-template-areas:
+        'title title price'\
+        'image info price'
+
   &.vehicleWrapMyVeicles
     grid-template-areas:
       'title title'\

package/source/components/VehicleSmallCard/VehicleSmallCard.tsx

@@ -18,7 +18,8 @@ import {
   IVehicleLocation,
   IVehicleTitleProps,
   IVehicleSliderProps,
-  IVehicleSliderForSRLProps
+  IVehicleSliderForSRLProps,
+  IVehicleCompareProps
 } from '../../framework/types/types';
 import { vehicleProps } from '../../locales/data';
 import styles from './VehicleSmallCard.styl';
@@ -31,7 +32,7 @@ interface IVehicleSmallCardProps {
   t?: (key: string, options?: object) => string;
   i18nPrefixForPriceRating?: string;
   language?: string;
-  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles';
+  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite';
   isTop?: boolean;
   isDealer?: boolean;
   isDealerSuperAdmin?: boolean;
@@ -44,6 +45,7 @@ interface IVehicleSmallCardProps {
   title?: IVehicleTitleProps;
   info?: IVehicleInfo;
   location?: IVehicleLocation;
+  compareProps?: IVehicleCompareProps;
   environmentEmissions?: object;
   consumption?: object;
   engineData?: object;
@@ -90,6 +92,7 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     i18nPrefixForPriceRating,
     stats,
     statsData,
+    compareProps,
     title,
     info,
     location,
@@ -150,6 +153,7 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     { [styles.vehicleWrapSearch]: vehicleComponentName === 'search' },
     { [styles.vehicleWrapComparable]: vehicleComponentName === 'comparable' },
     { [styles.vehicleWrapMyVeicles]: vehicleComponentName === 'myVehicles' },
+    { [styles.vehicleWrapFavorite]: vehicleComponentName === 'favorite' },
     { [styles.topVehicle]: isTop },
     { [styles.disableBorder]: minimizeData },
     { [styles.isFirstReferenceCar]: isReferenceSearch && index === 0 && currentPage === 1 },
@@ -217,7 +221,8 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     combineRefAlternative,
     typeAlternative,
     isAlternative,
-    ...price
+    ...price,
+    ...compareProps
   };
 
   const lazyLoadProps = {
@@ -258,7 +263,7 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
           <>
             {showSlider ? (
               <>
-                {vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' ? (
+                {vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' || vehicleComponentName === 'favorite' ? (
                   <>
                     <DecoratedSliderForSRL {...decoratedSliderProps} />
                     {renderIDInfo && isDealer ? renderIDInfo() : null}
@@ -347,6 +352,7 @@ export default memo(VehicleSmallCard, (props, nextProps) => { // shouldComponent
       leasing: { monthlyInstallment: lMonthlyInstallment }
     },
     isCarInFavorite,
+    compareProps,
     children
   } = props;
 
@@ -356,5 +362,6 @@ export default memo(VehicleSmallCard, (props, nextProps) => { // shouldComponent
     && withFinalInstallment   === nextProps.price.financing.withFinalInstallment
     && lMonthlyInstallment    === nextProps.price.leasing.monthlyInstallment
     && isCarInFavorite        === nextProps.isCarInFavorite
+    && _get(compareProps, 'toCompare') === _get(compareProps, 'nextProps.toCompare')
     && children               === nextProps.children;
 });

package/source/components/_common/Checkbox/Checkbox.tsx

@@ -13,7 +13,7 @@ export interface ICheckboxProps {
   disabled?: boolean;
   reversed?: boolean;
   isAboAccordionExpanded0?: boolean;
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean, value: any) => void;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked?: boolean, value?: any) => void;
   onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
   onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
 

package/source/framework/types/types.ts

@@ -89,7 +89,7 @@ export interface IVehicleInfo {
   i18nPrefixForPriceRating?: string;
   gearbox?: string;
   regDate?: number;
-  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles';
+  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite';
   language?: string;
   combineRefAlternative?: boolean;
   routeObj?: any;
@@ -102,6 +102,11 @@ export interface IVehicleInfo {
   engineData?: any;
   offer?: any;
   consumption?: any;
+  numberOfPreviousOwners?: any;
+  usageType?: any;
+  condition?: any;
+  damaged?: any;
+  driveType?: any;
   url?: string;
 }
 
@@ -110,7 +115,7 @@ export interface IVehicleTitleProps {
   model?: string;
   subModel?: string;
   option?: string;
-  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles';
+  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite';
   isSponsored?: boolean;
   showFavoriteStar?: boolean;
   id?: string;
@@ -321,3 +326,9 @@ export interface IPanelConfigProps {
   isAlternative?: boolean;
   onToggleDetailsClick: () => void;
 }
+
+export interface IVehicleCompareProps {
+  toggleCarToCompare: () => void;
+  toCompare: boolean;
+  onRemoveClick: () => void;
+}

package/source/framework/vehiclesProps/decoratedLightProps.tsx

@@ -38,7 +38,16 @@ const getDecoratedLightProps = (
     simplifiedLabels: boolean = false // shortened labels for repsonsive layout (see 'power')
   ): IDecoratedProps => {
   const {
-    mainData: { offer = {}, mileage, firstRegistration, location }
+    mainData: {
+      offer = {},
+      mileage,
+      firstRegistration,
+      location,
+      numberOfPreviousOwners = '',
+      usageType = '',
+      condition = '',
+      damaged = ''
+    }
   } = car;
   return {
     mileage: {
@@ -242,6 +251,40 @@ const getDecoratedLightProps = (
         return isPropDefined(gearbox) ? t(`cbd:${gearbox}`) : 'N/A';
       }
     },
+    numberOfPreviousOwners: {
+      title: t('vehicleProps:title.numberOfPreviousOwners'),
+      icon: 'owner',
+      get value() {
+        return Number.isFinite(numberOfPreviousOwners)
+          ? t('vehicleProps:value.vehicleOwners', { count: numberOfPreviousOwners })
+          : t('vehicleProps:value.na');
+      }
+    },
+    usageType: {
+      icon: 'new',
+      get value() {
+        if (condition === 'selector_condition_new') return t('vehicleProps:value.newCar');
+        return isPropDefined(usageType) ? t(`cbd:${usageType}`) : t('cbd:selector_condition_used');
+      }
+    },
+    driveType: {
+      title: t('vehicleProps:title.driveType'),
+      get icon() {
+        const driveType = car.driveSuspension.driveType;
+        return isPropDefined(driveType) ? car.driveSuspension.driveType : 'selector_driveType_frontWheelDrive';
+      },
+      get value() {
+        const driveType = car.driveSuspension.driveType;
+        return isPropDefined(driveType) ? t(`cbd:${driveType}`) : t('vehicleProps:value.na');
+      }
+    },
+    accidentDamaged: {
+      title: t('cbd:mainData_accidentDamaged'),
+      icon: 'wrench',
+      get value() {
+        return damaged ? t('vehicleProps:value.damaged') : t('vehicleProps:value.accidentFree');
+      }
+    },
     fuel: {
       name: 'fuel',
       title: 'Kraftstoffe',

package/source/framework/vehiclesProps/vehicleDetails.ts

@@ -34,6 +34,7 @@ const comparableList = ['firstRegistration', 'mileage', 'gearbox'];
 const landingList = ['mileage', 'gearbox', 'fuel'];
 const location = ['location'];
 const searchResultList = ['mileage', 'firstRegistration', 'gearbox', 'fuel', 'power'];
+const searchFavoriteList = ['mileage', 'firstRegistration', 'numberOfPreviousOwners', 'gearbox', 'usageType', 'fuel', 'power', 'driveType'];
 const consumptionCombinedAlternateView = ['consumptionCombinedAlternateView'];
 const consumptionPowerCombinedAlternateView = ['consumptionPowerCombinedAlternateView'];
 const consumptionCombinedHybridAlternateView = ['consumptionCombinedHybridAlternateView'];
@@ -307,3 +308,23 @@ export const getMainPropertiesForSRL = (selector: any, isAlternative?: boolean)
     return mainArraySRL;
   }, []); //tslint:disable-line
 };
+
+
+export const getMainPropertiesForFavorite = (selector: any, isAlternative?: boolean) => {
+  if (Object.keys(filtered(selector)).length === 0) {
+
+    const mainArrayFavorite = [...searchFavoriteList, ...consumptionCombinedAlternateView, ...offerAvailability,  'accidentDamaged'];
+    if (isAlternative) {
+      mainArrayFavorite.unshift(...location);
+    }
+
+    return mainArrayFavorite;
+  }
+  return filtered(selector).reduce((_selector, item) => {
+    const mainArrayFavorite = [...searchFavoriteList, ...item.consumptionCombined, ...offerAvailability, 'accidentDamaged'];
+    if (isAlternative) {
+      mainArrayFavorite.unshift(...location);
+    }
+    return mainArrayFavorite;
+  }, []); //tslint:disable-line
+};