@bytebrand/fe-ui-core 4.1.172 → 4.1.174

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

@@ -4,8 +4,9 @@ import classnames from 'classnames';
 import VehiclePriceItem from '../VechiclePriceItem/VechiclePriceItem';
 import { IBuy, ILeasing, IFinancing, ICommonFinancing } from '../../../../framework/types/types';
 import { Hidden } from 'react-grid-system';
+import { isMobileOnly } from 'react-device-detect';
 import Button from '../../../../components/_common/Button/Button';
-import Checkbox from '../../../../components/_common/Checkbox/Checkbox';
+import CheckboxMaterial from '../../../../components/_common/CheckboxMaterial/CheckboxMaterial';
 import IconSVG from '../../../_common/IconSVG/IconSVG';
 
 export interface IVehiclePriceSectionProps {
@@ -18,15 +19,20 @@ export interface IVehiclePriceSectionProps {
   isDealerSuperAdmin?: boolean;
   routeObj?: any;
   linkTag?: string;
+  classButton?: string;
   showAboIcon?: boolean;
+  dashboardButtonText?: string;
   isNewPriceCategory?: boolean;
-  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite';
+  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite' | 'recently';
   monthlyInstallment?: number;
   oldMonthlyInstallment?: number;
   positionY?: string;
   url?: string;
+  target?: string;
+  rel?: string;
   iconName?: string;
   mainImageId?: string;
+  showCompareCheckboxes?: boolean;
   toRound?: boolean;
   showOfferBtn?: boolean;
   margin?: number;
@@ -74,9 +80,10 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
   };
 
   onDetailsClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    const { id, onDetailsClick } = this.props;
     event.preventDefault();
     event.stopPropagation();
-    this.props.onDetailsClick(this.props.url);
+    onDetailsClick(id);
   };
 
   render(): React.ReactNode {
@@ -84,13 +91,18 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
       t,
       combineRefAlternative,
       url,
+      target,
+      rel,
       isDealerSuperAdmin,
       linkTag,
       showOfferBtn,
       routeObj,
       toggleCarToCompare,
       toCompare,
+      dashboardButtonText,
+      classButton,
       onRemoveClick,
+      showCompareCheckboxes,
       vatRate,
       iconName,
       vehicleComponentName,
@@ -112,33 +124,43 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
     const vehiclePriceSectionClassName = classnames(
       styles.vehiclePriceSection,
       { [styles.vehiclePriceSectionSearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' },
-      { [styles.vehiclePriceSectionFavorite]: vehicleComponentName === 'favorite' }
+      { [styles.vehiclePriceSectionFavorite]: vehicleComponentName === 'favorite' },
+      { [styles.vehiclePriceSectionRecently]: vehicleComponentName === 'recently' }
     );
 
     const vehiclePriceTitleClassName = classnames(
       styles.vehiclePriceTitle,
-      { [styles.vehiclePriceTitleSearch]: vehicleComponentName === 'search' || 'myVehicles' || 'favorite' }
+      { [styles.vehiclePriceTitleFavorite]: vehicleComponentName === 'favorite' },
+      { [styles.vehiclePriceTitleRecently]: vehicleComponentName === 'recently' },
+      { [styles.vehiclePriceTitleSearch]: vehicleComponentName === 'search' || 'myVehicles' }
     );
     const priceItemsGlobal = [
       {
         perMonthOld: oldMonthlyInstallment,
         perMonthCurrent: monthlyInstallment,
         title: t('vehicleProps:title.financing'),
+        prefixOldPrice: vehicleComponentName === 'search' && !isMobileOnly && t('vehicleProps:value.prefixOldPrice'),
         postfix: '3',
+        priceSub: t('vehicleProps:value.priceSub'),
         tooltipDescription: !combineRefAlternative && t('vehicleProps:title.financingDescription')
       },
       {
         perMonthOld: lOldMonthlyInstallment,
         perMonthCurrent: lMonthlyInstallment,
-        isNewPriceCategory: true,
+        prefixOldPrice: vehicleComponentName === 'search' && !isMobileOnly && t('vehicleProps:value.prefixOldPrice'),
         postfix: '1,3',
         isPriceDisable: !isLeasingActive,
         title: t('vehicleProps:title.leasing'),
+        priceSub: t('vehicleProps:value.priceSub'),
         tooltipDescription: !combineRefAlternative && t('vehicleProps:title.leasingDescription')
       }
     ];
 
-    const Abo = vehicleComponentName !== 'favorite' ? [
+    const showAboCondition = vehicleComponentName !== 'favorite' &&
+                             vehicleComponentName !== 'recently' &&
+                             vehicleComponentName !== 'search';
+
+    const Abo = showAboCondition ? [
       {
         perMonthOld: oldMonthlyInstallment,
         perMonthCurrent: monthlyInstallment,
@@ -181,6 +203,8 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
     const ListPrices = priceData.map((
     {
       title,
+      priceSub,
+      prefixOldPrice,
       totalCurrent,
       tooltipDescription,
       perMonthOld,
@@ -206,10 +230,14 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
           showAboIcon={showAboIcon}
           totalOld={highestPriceExtra}
           isTotal={isTotal}
+          priceSub={priceSub}
           positionY={positionY}
           url={url}
+          target={target}
+          rel={rel}
           isStrikeShown={isStrikeShown}
           iconName={iconName}
+          prefixOldPrice={prefixOldPrice}
           totalCurrent={totalCurrent}
           postfix={postfix}
           linkTag={linkTag}
@@ -220,28 +248,36 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
       );
     });
     const buttonClassNames = classnames(
+      classButton,
       styles.buttonDetails,
       { [styles.isAlternativeButton]: typeAlternative }
     );
     return (
       <section className={vehiclePriceSectionClassName}>
-        {vehicleComponentName === 'favorite' ? (
-          <Checkbox
+        {vehicleComponentName === 'favorite' && showCompareCheckboxes && (
+          <CheckboxMaterial
             checked={toCompare}
             onChange={toggleCarToCompare}
+            labelPlacement='start'
             label={t('FavoritesPage:toCompare')}
-            labelClassName={styles.wrapCheckbox}
+            formControlClassName={styles.wrapCheckbox}
           />
-        ) : <span className={vehiclePriceTitleClassName}>{t('vehicleProps:title.monthlyFrom')}</span>}
+        )}
+        {vehicleComponentName !== 'favorite' && vehicleComponentName !== 'search' && (
+          <span className={vehiclePriceTitleClassName}>{t('vehicleProps:title.monthlyFrom')}</span>
+        )}
+        {vehicleComponentName === 'search' && isMobileOnly && (
+          <span className={vehiclePriceTitleClassName}>{t('vehicleProps:title.monthlyFrom')}</span>
+        )}
         {ListPrices}
-        {vehicleComponentName === 'favorite' && (
+        {vehicleComponentName === 'favorite' && showCompareCheckboxes && (
           <div className={styles.wrapHandleCompare}>
             <Button variant='outlined' onClick={onRemoveClick} className={styles.btnCompareRemove} color='error'>
               <IconSVG className={styles.removeIcon} name='trashRed' customDimensions />
             </Button>
             <Button className={styles.btnCarToCompare} variant='outlined' onClick={toggleCarToCompare}>
               <span className={styles.btnPlusIcon}>{!toCompare ? '+' : '-'}</span>
-              <span className={styles.btnText}>{t('FavoritesPage:compare')}</span>
+              {t('FavoritesPage:compare')}
             </Button>
           </div>
         )}
@@ -251,9 +287,7 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
           </Button>
         ) : null}
         {showOfferBtn ? (
-          <Hidden xs>
-            <Button color='primary' className={buttonClassNames} onClick={this.onDetailsClick}>{t('vehicleProps:title.toOffer')}</Button>
-          </Hidden>
+          <Button color='primary' className={buttonClassNames} onClick={this.onDetailsClick}>{t('vehicleProps:title.toOffer')}</Button>
         ) : ''}
       </section>
     );

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

@@ -5,17 +5,15 @@
   box-sizing: border-box;
   font-size: 12px
   line-height: 1;
-  color: $grey-3
+  color: rgba(76, 78, 100, 0.87);
   align-items: center;
-  border-bottom: 1px solid $grey-d
-
-  +media-phone-up()
-    font-size: 11px
+  border-bottom: 1px solid rgba(76, 78, 100, 0.12);
 
 .carIcon
-  max-width: 16px;
-  margin-right: 6px
+  width: 28px;
+  height: 30px;
+  margin-right: 5px
   flex-shrink: 0
 
-  +media-phone-up()
+  +media-tablet-landscape-up()
     margin-right: 10px

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

@@ -2,21 +2,22 @@
 
 .infoSection
   position: relative
-  display: flex
   align-items: center;
   box-sizing: border-box
-  padding: 7px 6px;
-
-  +media-phone-only()
-    display: block
-    padding: 10px 30px 10px 10px
-
+  display: block
+  padding: 10px 30px 10px 16px
+  +media-tablet-landscape-up()
+    padding: 6px;
+    display: flex
   &.infoSectionSearch
     +media-tablet-landscape-up()
       padding 0;
   &.infoSectionMyVehicles
     +media-phone-only()
       display: flex
+  &.infoSectionRecently
+    +media-tablet-landscape-down()
+      padding: 12px 30px 12px 16px
 
 .wrapTitles
   display flex;
@@ -25,8 +26,14 @@
     display block
   &.wrapTitlesSearch
     display block
-    & p
-      margin: 0;
+    +media-tablet-landscape-up()
+      display flex
+  &.wrapTitlesFavorite
+    display: flex;
+    +media-tablet-landscape-up()
+      display: block;
+  &.wrapTitlesRecently
+    display: flex;
 
 .manufacturerModel
   font-size: 16px
@@ -48,7 +55,7 @@
   margin 0
   max-width: 88vw
 
-  +media-phone-up()
+  +media-tablet-landscape-up()
     margin: 0 0 -1px 3px
     max-width: 100%;
 
@@ -61,13 +68,25 @@
   truncate();
 
   &.optionTitleSearch
-    font-size: 14px;
+    font-size: 12px;
+    margin-top: 3px;
+    +media-tablet-landscape-up()
+      margin-left: 8px;
+      margin-top: 0;
+  &.optionTitleFavorite
+    font-size: 12px;
+    margin-left: 8px;
+    +media-tablet-landscape-up()
+      margin-left: -3px;
+      margin-top: 3px;
+  &.optionTitleRecently
+    font-size: 12px;
+    margin-left: 8px;
   &.optionTitleIsAlternative
     overflow: hidden;
     max-width: 260px;
 
 .sponsored
-  font-family: 'Arial Fett', 'Arial Standard', 'Arial'
   font-weight: 700
   font-style: normal
   font-size: 10px

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

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

package/source/components/VehicleSmallCard/VehicleSmallCard.styl

@@ -7,8 +7,8 @@
   display: grid;
 
   +media-tablet-landscape-up()
-    border-radius: 3px;
-    border: 1px solid $grey-e
+    border-radius: 10px;
+    border: 1px solid rgba(76, 78, 100, 0.12)
 
   &.disableBorder
      border-bottom: 0;
@@ -27,14 +27,14 @@
     border-bottom: 6px solid $skyBlue;
 
     +media-tablet-landscape-up()
-      border: 1px solid $grey-e;
+      border: 1px solid rgba(76, 78, 100, 0.12);
       grid-template-columns: 112px 1fr;
 
   &.vehicleWrapComparable
     min-width: 230px
     margin: 0 4px
     border-radius 3px
-    border: 1px solid $grey-e
+    border: 1px solid rgba(76, 78, 100, 0.12);
     grid-template-columns: 100px 1fr;
 
     +media-tablet-down()
@@ -50,7 +50,7 @@
   &.vehicleWrapMain
     grid-template-columns: 112px 1fr;
     border-radius 3px
-    border: 1px solid $grey-e
+    border: 1px solid rgba(76, 78, 100, 0.12);
 
     +media-phone-only()
       grid-template-columns: 155px 1fr;
@@ -61,13 +61,18 @@
       'image image'\
       'info price'\
       'seoText seoText'
-    grid-template-columns: 50% 50%;
-    border-bottom: 6px solid $skyBlue;
+    grid-template-columns: 55% 45%;
+    border-bottom: 1px solid #DFDFDF;
+    border-top: 1px solid #DFDFDF;
+    margin-bottom: 5px;
+    padding-bottom: 8px;
     +media-tablet-landscape-up()
-      border: 1px solid $grey-e;
+      height: 252px;
+      box-sizing: border-box;
+      border: 1px solid rgba(76, 78, 100, 0.12);
       padding: 10px;
       grid-gap: 10px 15px;
-      grid-template-columns: 260px 1fr 169px;
+      grid-template-columns: 260px 1fr 189px;
       grid-template-areas:
         'title title price'\
         'image info price'
@@ -78,12 +83,11 @@
       'image image'\
       'info price'\
       'seoText seoText'
-    grid-template-columns: 155px 1fr;
-    border: 1px solid $grey-e;
+    grid-template-columns: 160px 1fr;
+    border: 1px solid rgba(76, 78, 100, 0.12);
     border-radius: 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;
@@ -91,6 +95,30 @@
         'title title price'\
         'image info price'
 
+  &.vehicleWrapRecently
+    box-sizing: border-box;
+    grid-template-areas:
+      'title title'\
+      'image image'\
+      'info price'\
+      'seoText seoText'
+    grid-template-columns: 160px 1fr;
+    border: 1px solid rgba(76, 78, 100, 0.12);
+    border-radius: 10px;
+    padding-bottom: 15px;
+
+    & [class*='withStats__topWrapper']
+      left: 16px;
+      right: 16px;
+      
+    & [class*='withStats__controls']
+      padding: 0 16px;
+
+    +media-tablet-up()
+      max-width: 98%;
+    +media-tablet-landscape-up()
+      max-width: 346px;
+
   &.vehicleWrapMyVeicles
     grid-template-areas:
       'title title'\
@@ -102,7 +130,7 @@
     grid-template-columns: 50% 50%;
     border-bottom: 6px solid $skyBlue;
     +media-tablet-landscape-up()
-      border: 1px solid $grey-e;
+      border: 1px solid rgba(76, 78, 100, 0.12);
       padding: 10px;
       grid-gap: 0 15px;
       grid-template-columns: 260px 1fr 169px 236px;
@@ -143,8 +171,6 @@
   text-decoration: none;
   display: block;
 
-.gridAreaImage
-
 .gridAreaTitle
   grid-area: title;
   max-width: 100%;
@@ -172,9 +198,15 @@
     &:first-of-type
       color: $skyBlue;
 
-.svgIcon
-  margin-right: 10px;
-
 .isFirstReferenceCar
   border: 1px solid $skyBlue !important;
-  background-color: #005CCB0D;
+  background-color: #005CCB0D;
+  justify-content: space-between;
+  margin-top: 5px;
+
+  & > div
+    display flex
+    align-items: center
+
+    &:first-of-type
+      color: $skyBlue;

package/source/components/VehicleSmallCard/VehicleSmallCard.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames';
 import _get from 'lodash/get';
 import LazyLoad from 'react-lazyload';
 import withLabel from '../_common/withLabel/withLabel';
-import withStats, { IStatsWrapperProps, IStatsData } from '../_common/withStats/withStats';
+import withStats, { IStatsWrapperProps } from '../_common/withStats/withStats';
 import Image from '../_common/Image/Image';
 import IconSVG from '../_common/IconSVG/IconSVG';
 import VehicleSlider from '../_common/VehicleSlider/VehicleSlider';
@@ -32,16 +32,16 @@ interface IVehicleSmallCardProps {
   t?: (key: string, options?: object) => string;
   i18nPrefixForPriceRating?: string;
   language?: string;
-  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite';
+  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite' | 'recently';
   isTop?: boolean;
   isDealer?: boolean;
   isDealerSuperAdmin?: boolean;
   isReferenceSearch?: boolean;
+  dashboardButtonText?: string;
   showNewLabel?: boolean;
   CircularProgressbar?: any;
   slider?: IVehicleSliderProps | IVehicleSliderForSRLProps;
   stats?: IStatsWrapperProps;
-  statsData?: IStatsData;
   title?: IVehicleTitleProps;
   info?: IVehicleInfo;
   location?: IVehicleLocation;
@@ -53,6 +53,7 @@ interface IVehicleSmallCardProps {
   offer?: object;
   price?: IPrice;
   seoText?: string;
+  classButton?: string;
   mainImageId?: string;
   crawledAt?: string;
   modificationDate?: string;
@@ -69,6 +70,8 @@ interface IVehicleSmallCardProps {
   children?: ReactNode;
   showSlider?: boolean;
   showOfferBtn?: boolean;
+  hasInteriorExteriorPhoto?: boolean;
+  showCompareCheckboxes?: boolean;
   showFavoriteStar?: boolean;
   minimizeData?: boolean;
   onContainerClick?: (event?: any) => void;
@@ -91,7 +94,6 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     vehicleComponentName,
     i18nPrefixForPriceRating,
     stats,
-    statsData,
     compareProps,
     title,
     info,
@@ -99,6 +101,7 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     consumption,
     environmentEmissions,
     isReferenceSearch,
+    showCompareCheckboxes,
     CircularProgressbar,
     engineData,
     offer,
@@ -109,6 +112,8 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     language,
     className,
     url,
+    target,
+    rel,
     onContainerClick,
     onAddOfferToMainSlideClick,
     isDealer,
@@ -130,6 +135,9 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     iconName,
     showSlider,
     percentage,
+    classButton,
+    hasInteriorExteriorPhoto,
+    dashboardButtonText,
     showOfferBtn = false,
     showFavoriteStar = true,
     minimizeData = false,
@@ -154,6 +162,7 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     { [styles.vehicleWrapComparable]: vehicleComponentName === 'comparable' },
     { [styles.vehicleWrapMyVeicles]: vehicleComponentName === 'myVehicles' },
     { [styles.vehicleWrapFavorite]: vehicleComponentName === 'favorite' },
+    { [styles.vehicleWrapRecently]: vehicleComponentName === 'recently' },
     { [styles.topVehicle]: isTop },
     { [styles.disableBorder]: minimizeData },
     { [styles.isFirstReferenceCar]: isReferenceSearch && index === 0 && currentPage === 1 },
@@ -163,6 +172,7 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
   const decoratedSliderProps = {
     t,
     id,
+    hasInteriorExteriorPhoto,
     ...label,
     ...stats,
     ...slider,
@@ -185,7 +195,9 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     combineRefAlternative
   };
 
-  const routeObj = linkTag !== 'a' ? { to: { pathname: url, state: { mainImageUrl: src } } } : '';
+  const routeObj = linkTag !== 'a'
+    ? { to: { pathname: url, state: { mainImageId, mainImageUrl: src, carId: id, isSavedCheckout: showOfferBtn, ...title } } }
+    : '';
 
   const vehicleInfoProps = {
     t,
@@ -200,6 +212,8 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     linkTag,
     routeObj,
     url,
+    target,
+    rel,
     engineData,
     ...price,
     ...info
@@ -209,8 +223,12 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     t,
     id,
     url,
+    target,
+    rel,
     iconName,
+    dashboardButtonText,
     vehicleComponentName,
+    classButton,
     linkTag,
     onAddOfferToMainSlideClick,
     isDealerSuperAdmin,
@@ -221,6 +239,7 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     combineRefAlternative,
     typeAlternative,
     isAlternative,
+    showCompareCheckboxes,
     ...price,
     ...compareProps
   };
@@ -241,13 +260,17 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     t,
     price,
     showNewLabel,
-    statsData
+    ...stats
   };
 
   const linkBaseUrl = (e: MouseEvent<HTMLImageElement>) => {
     e.preventDefault();
     if (baseUrl) window.open(baseUrl, '_blank');
   };
+  const showComponentLikeSlider = vehicleComponentName === 'search' ||
+                                  vehicleComponentName === 'myVehicles' ||
+                                  vehicleComponentName === 'favorite' ||
+                                  vehicleComponentName === 'recently';
   return (
     <section className={wrapperClassName} onClick={onContainerClick} id={id}>
       {createElement(linkTag, {
@@ -255,7 +278,9 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
         ...routeObj,
         className: `${styles.redirectClassLink} ${styles.gridAreaTitle}`,
         onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
-        href: url
+        href: url,
+        target,
+        rel
       })}
 
       {createElement(linkTag, {
@@ -263,7 +288,7 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
           <>
             {showSlider ? (
               <>
-                {vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' || vehicleComponentName === 'favorite' ? (
+                {showComponentLikeSlider ? (
                   <>
                     <DecoratedSliderForSRL {...decoratedSliderProps} />
                     {renderIDInfo && isDealer ? renderIDInfo() : null}
@@ -306,7 +331,9 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
         ...routeObj,
         className: `${styles.redirectClassLink} ${styles.gridAreaImage}`,
         onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
-        href: url
+        href: url,
+        target,
+        rel
       })}
       <VehicleInfo {...vehicleInfoProps} />
       <VehiclePrice {...vehiclePriceProps} />
@@ -326,6 +353,7 @@ VehicleSmallCard.defaultProps = {
   isTop: false,
   showSlider: false,
   isDealerSuperAdmin: false,
+  showCompareCheckboxes: false,
   slider: {},
   stats: {},
   title: {},
@@ -351,6 +379,7 @@ export default memo(VehicleSmallCard, (props, nextProps) => { // shouldComponent
       financing: { monthlyInstallment, annualMileage, withFinalInstallment },
       leasing: { monthlyInstallment: lMonthlyInstallment }
     },
+    stats: { statsData },
     isCarInFavorite,
     compareProps,
     children
@@ -362,6 +391,7 @@ export default memo(VehicleSmallCard, (props, nextProps) => { // shouldComponent
     && withFinalInstallment   === nextProps.price.financing.withFinalInstallment
     && lMonthlyInstallment    === nextProps.price.leasing.monthlyInstallment
     && isCarInFavorite        === nextProps.isCarInFavorite
+    && statsData              === nextProps.stats.statsData
     && _get(compareProps, 'toCompare') === _get(compareProps, 'nextProps.toCompare')
     && children               === nextProps.children;
 });