@bytebrand/fe-ui-core 4.2.251 → 4.3.0

package/source/components/VehicleDetailedSlider/VehicleDetailedSlider.tsx

@@ -13,38 +13,28 @@ import withMagnifyGlassImage from '../_common/MagnifyGlass/MagnifyGlass';
 import { IImage, IPrice, SliderType } from '../../framework/types/types';
 import { PLACEHOLDER_IMAGE_SMALL_URL } from '../../framework/constants/common';
 import { VehicleDetailedSliderTranslate } from '../../locales/data';
-import SvgYoutubeButton from '../_common/IconSVG/SVG/slider/YoutubeButton';
-import Button from '../_common/Button/Button';
-import { updateCookieList } from '../../framework/utils/CommonUtils';
-
-
 
 import styles from './VehicleDetailedSlider.styl';
 
 interface IProps {
   t: (phrase: string, config?: any) => string;
   price: IPrice;
-  photos: IImage[];
-  exteriorPhotos: IImage[];
+  photos: IImage [];
+  exteriorPhotos: IImage [];
   interiorPhoto: IImage;
   mainImageUrl: string;
   mainImageBlur: boolean;
   statsData: any;
   isFavorite: boolean;
   showNewLabel: boolean;
-  activeTab: number;
   make: string;
   model: string;
   subModel: string;
   powerKW: number;
   powerPS: number;
-  financingConfig: any;
-  youtubeId: string;
   showModal?: (id: string, props?: any) => void;
   hideModal: (id: string) => void;
   onCarFavorite: (event: MouseEvent<HTMLElement>) => void;
-  showDownPayment: boolean;
-  handleSentryInit?: () => void;
 }
 
 interface IState {
@@ -53,8 +43,6 @@ interface IState {
   smallLoaded: boolean;
   largeLoaded1: boolean;
   largeLoaded01: boolean;
-  videoSrc: string;
-  showYoutube: boolean;
 }
 
 const MagnifyGlassImage = withMagnifyGlassImage(Image);
@@ -71,21 +59,17 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
   };
 
   private slider: any;
-
   private imagesCache: string[] = [];
 
   constructor(props: IProps) {
     super(props);
-    const cookieConfig = JSON.parse(localStorage.getItem('cookieConfig')) || {};
-    const youtubeConfig = !cookieConfig?.marketing?.includes('youtube');
+
     this.state = {
       activeSlide: 0,
       largeLoaded: false,
       smallLoaded: false,
       largeLoaded1: false,
-      largeLoaded01: false,
-      videoSrc: '',
-      showYoutube: youtubeConfig
+      largeLoaded01: false
     };
   }
 
@@ -93,10 +77,8 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
     this.slider.slickGoTo(0);
   };
 
-
-  componentDidUpdate(prevProps: IProps, prevState: IState) {
-    const cookieConfig = JSON.parse(localStorage.getItem('cookieConfig')) || {};
-    const showYoutube = !cookieConfig?.marketing?.includes('youtube');
+  componentDidUpdate(prevProps: IProps) {
+    console.log('VehicleDetailedSlider-works!');
     if (prevProps.photos.length !== this.props.photos.length && this.props.photos.length === 0) {
       this.setState(() => ({
         largeLoaded: false,
@@ -105,15 +87,10 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
         largeLoaded01: false
       }));
     }
-    if (showYoutube !== prevState.showYoutube) {
-      this.setState(() => ({
-        showYoutube: showYoutube
-      }));
-    }
   }
 
   handleOpenSliderModal = (sliderType: SliderType) => {
-    const { t = (phrase: string) => _get(VehicleDetailedSliderTranslate(statsData), phrase, phrase), photos, exteriorPhotos, interiorPhoto, showModal, hideModal, statsData, handleSentryInit } = this.props;
+    const { t = (phrase: string) => _get(VehicleDetailedSliderTranslate(statsData), phrase, phrase), photos, exteriorPhotos, interiorPhoto, showModal, hideModal, statsData } = this.props;
     const { activeSlide } = this.state;
 
     showModal('VEHICLE_DETAILED_SLIDER_MODAL', {
@@ -129,22 +106,12 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
       onClose: (index: number) => {
         this.slider.slickGoTo(index, true);
         hideModal('VEHICLE_DETAILED_SLIDER_MODAL');
-      },
-      handleSentryInit: handleSentryInit
+      }
     });
   };
 
-  handleSlideChange = (_currentSlide: any, nextSlide: number) => {
-    const { photos } = this.props;
-    if (photos[nextSlide].videoUrl) {
-      this.setState({ videoSrc: `https://www.youtube.com/embed/${photos[nextSlide].videoUrl}` })
-    } else {
-      this.setState({ videoSrc: null })
-    }
-  }
-
   getImages = () => {
-    const { photos, mainImageUrl, mainImageBlur, t, handleSentryInit } = this.props;
+    const { photos, mainImageUrl, mainImageBlur } = this.props;
     const { activeSlide, largeLoaded, smallLoaded, largeLoaded1, largeLoaded01 } = this.state;
 
     const imageProps = {
@@ -154,7 +121,6 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
       className: styles.image,
       withLoader: false
     };
-
     if (Array.isArray(photos) && photos.length > 0 && largeLoaded && smallLoaded && largeLoaded1 && largeLoaded01) {
       let isMouseDown = false;
       let isDragging = false;
@@ -179,41 +145,27 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
         isDragging = false;
       };
 
-      const updateCookies = () => {
-        const cookieConfig = localStorage.getItem('cookieConfig');
-        const conf = JSON.parse(cookieConfig);
-        const indexToRemove = conf.marketing.indexOf('youtube');
-        if (indexToRemove !== -1) {
-          conf.marketing.splice(indexToRemove, 1);
-        }
-        const showYoutube = !conf?.marketing?.includes('youtube');
-        this.setState({ showYoutube: showYoutube })
-        localStorage.setItem('cookieConfig', JSON.stringify(conf));
-        updateCookieList(handleSentryInit);
-      }
-
-
       const imagesCount = photos.length;
       const currentSlide = activeSlide;
       const prevSlide = (activeSlide - 1 % imagesCount + imagesCount) % imagesCount;
       const nextSlide = (activeSlide + 1 % imagesCount + imagesCount) % imagesCount;
-      return photos.map((item: IImage, index: number) => {
+
+      return photos.map(({ imageUrlLarge, imageUrlSmall }: IImage, index: number) => {
         const showImage = index === currentSlide || index === prevSlide || index === nextSlide || this.imagesCache[index] !== undefined;
-        const imageUrlSmall = _get(item, 'imageUrlSmall', null);
-        const imageUrlLarge = _get(item, 'imageUrlLarge', null);
 
         this.imagesCache[currentSlide] = imageUrlLarge;
         this.imagesCache[prevSlide] = imageUrlLarge;
         this.imagesCache[nextSlide] = imageUrlLarge;
+
         return (
           <div
             className={styles.photo}
             key={imageUrlLarge}
             onMouseDown={handleMouseDown}
             onMouseMove={handleMouseMove}
-            onMouseUp={this.state.showYoutube ? handleMouseUp : null}
+            onMouseUp={handleMouseUp}
           >
-            {showImage && !item.videoUrl && (
+            {showImage && (
               <MagnifyGlassImage
                 src={index !== 0 ? imageUrlLarge : null}
                 srcSmall={index === 0 ? imageUrlSmall : null}
@@ -221,77 +173,54 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
                 {...imageProps}
               />
             )}
-            {showImage && item.videoUrl && this.state.showYoutube && (
-              <iframe
-                width='100%'
-                height='441'
-                src={this.state.videoSrc}
-                title='YouTube Video'
-                className={styles.frame}
-              ></iframe>
-            )}
-            {showImage && item.videoUrl && !this.state.showYoutube && this.state.videoSrc && (
-              <div className={styles.noYoutubeWrapper}>
-                <SvgYoutubeButton></SvgYoutubeButton>
-                <span className={styles.youtubeCookiesText}>{t('youtube.acceptCookiesText')}</span>
-                <div>
-                  <Button variant='text' className={styles.btn} onClick={() => window.open('https://www.youtube.com/howyoutubeworks/our-commitments/protecting-user-data/', '_blank')}>
-                    {t('youtube.dataProtection')}
-                  </Button>
-                  <Button color='primary' className={styles.btn} onClick={updateCookies}>{t('youtube.allow')}</Button>
-                </div>
-              </div>
-            )}
           </div>
         );
       });
     }
+
     if (mainImageUrl) {
       const imagesCount = Array.isArray(photos) && photos.length > 0 ? photos.length : 0;
       const prevSlide = (activeSlide - 1 % imagesCount + imagesCount) % imagesCount;
       const nextSlide = (activeSlide + 1 % imagesCount + imagesCount) % imagesCount;
       return (
         // preload cached photos from props
-
         <div className={classnames(styles.photo, { [styles.blurred]: (mainImageBlur && mainImageUrl !== PLACEHOLDER_IMAGE_SMALL_URL) })} key={mainImageUrl}>
-          {(!largeLoaded || !smallLoaded || !largeLoaded1 || !largeLoaded01) && <Image src={mainImageUrl} {...imageProps} />}
+          {(!largeLoaded || !smallLoaded || !largeLoaded1 || !largeLoaded01) && <Image src={mainImageUrl} {...imageProps} /> }
 
-          {Array.isArray(photos) && photos.length > 0 && <Image
-            style={{ display: 'none' }}
-            src={photos[activeSlide]?.imageUrlSmall}
-            onLoad={() => this.setState({ smallLoaded: true })}
+          { Array.isArray(photos) && photos.length > 0 && <Image
+            style={ { display: 'none' } }
+            src={ photos[activeSlide].imageUrlSmall }
+            onLoad={ () => this.setState({ smallLoaded: true }) }
             {...imageProps}
-          />
+            />
           }
-          {Array.isArray(photos) && photos.length > 0 && <Image
-            style={{ display: 'none' }}
-            src={photos[activeSlide]?.imageUrlLarge}
-            onLoad={() => this.setState({ largeLoaded: true })}
+          { Array.isArray(photos) && photos.length > 0 && <Image
+            style={ { display: 'none' } }
+            src={ photos[activeSlide].imageUrlLarge }
+            onLoad={ () => this.setState({ largeLoaded: true }) }
             {...imageProps}
-          />
+            />
           }
-
-          {Array.isArray(photos) && photos.length > 0 && <Image
-            style={{ display: 'none' }}
-            src={photos[nextSlide]?.imageUrlLarge}
-            onLoad={() => this.setState({ largeLoaded1: true })}
+          { Array.isArray(photos) && photos.length > 0 && <Image
+            style={ { display: 'none' } }
+            src={ photos[nextSlide].imageUrlLarge }
+            onLoad={ () => this.setState({ largeLoaded1: true }) }
             {...imageProps}
-          />
+            />
           }
-          {Array.isArray(photos) && photos.length > 0 && <Image
-            style={{ display: 'none' }}
-            src={photos[prevSlide]?.imageUrlLarge}
-            onLoad={() => this.setState({ largeLoaded01: true })}
+          { Array.isArray(photos) && photos.length > 0 && <Image
+            style={ { display: 'none' } }
+            src={ photos[prevSlide].imageUrlLarge }
+            onLoad={ () => this.setState({ largeLoaded01: true }) }
             {...imageProps}
-          />
+            />
           }
         </div>
       );
-
     }
 
     return (
-      <div className={styles.noPhoto} />
+      <div className={styles.noPhoto}/>
     );
   };
 
@@ -307,15 +236,13 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
       showNewLabel,
       make,
       model,
-      showDownPayment,
       subModel,
       powerKW,
       powerPS,
-      activeTab,
-      financingConfig,
       onCarFavorite
     } = this.props;
     const { activeSlide } = this.state;
+
     const sliderProps = {
       autoPlay: false,
       speed: 300,
@@ -324,7 +251,6 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
       arrows: Array.isArray(photos) && photos.length > 0,
       slidesToShow: 1,
       slidesToScroll: 1,
-      beforeChange: this.handleSlideChange,
       afterChange: (index: number) => {
         this.setState({
           activeSlide: index
@@ -334,12 +260,9 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
 
     const priceProps = {
       t,
-      financingConfig,
       showNewLabel,
-      showDownPayment,
       historyPriceDifference: price ? price.historyPriceDifference : 0,
-      historyPriceDifferencePerCent: price ? price.historyPriceDifferencePerCent : 0,
-      activeTab
+      historyPriceDifferencePerCent: price ? price.historyPriceDifferencePerCent : 0
     };
 
     const statsProps = {
@@ -357,16 +280,14 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
     return (
       <div className={styles.sliderWrap}>
         {isMobileOnly &&
-          <Title {...{ t, make, model, subModel, powerKW, powerPS, onCarFavorite, isFavorite }} />
+          <Title {...{ t, make, model, subModel, powerKW, powerPS, onCarFavorite, isFavorite }}/>
         }
         <div className={styles.slider}>
-          {!photos[activeSlide]?.videoUrl && <PriceData {...priceProps} />}
+          <PriceData {...priceProps}/>
           <Slider ref={slider => (this.slider = slider)} {...sliderProps}>
             {this.getImages()}
           </Slider>
-          {!photos[activeSlide]?.videoUrl ? (
-            isMobileOnly ? <MobileStats {...statsProps} /> : <Stats {...statsProps} />
-          ) : null}
+          {isMobileOnly ? <MobileStats {...statsProps} /> : <Stats {...statsProps}/>}
         </div>
       </div>
     );

package/source/components/VehicleDetailedSlider/partials/PriceData.styl

@@ -24,6 +24,7 @@
   color: white
   padding: 0 15px
   float: left
+  text-transform: uppercase
   border-radius: 33px
   font-weight: 700;
   font-size: 20px;
@@ -45,7 +46,3 @@
 .new
   @extend .priceDifference
   margin-right: 12px
-  
-.percentageOfFirstInstallment
-  @extend .priceDifference
-  margin-left: 12px

package/source/components/VehicleDetailedSlider/partials/PriceData.tsx

@@ -3,24 +3,19 @@ import FormattedNumber from '../../FormattedNumber/FormattedNumber';
 import Badge from '../../_common/Badge/Badge';
 
 import styles from './PriceData.styl';
-import { isNil } from 'lodash';
 
 interface IProps {
   t: (phrase: string, config?: any) => string;
   showNewLabel: boolean;
   historyPriceDifference: number;
   historyPriceDifferencePerCent: number;
-  financingConfig?:any;
-  activeTab?:number;
-  showDownPayment:boolean;
 }
 
 const MIN_PERCENT = 5;
 const MIN_PRICE_DIFFERENCE = 500;
 const EUR = `\u20AC`;
 
-const PriceData: React.FunctionComponent<IProps> = ({ t, showDownPayment,showNewLabel, historyPriceDifference, historyPriceDifferencePerCent, financingConfig, activeTab }) => {
-  const percentageOfFirstInstallment = activeTab === 0 ? financingConfig!.financing.percentageOfFirstInstallment : financingConfig!.leasing.percentageOfFirstInstallment;
+const PriceData: React.FunctionComponent<IProps> = ({ t, showNewLabel, historyPriceDifference, historyPriceDifferencePerCent }) => {
   return (
     <div className={styles.topWrapper}>
       {showNewLabel && <Badge type='blue' className={styles.new}>{t('slider.new')}</Badge>}
@@ -30,8 +25,6 @@ const PriceData: React.FunctionComponent<IProps> = ({ t, showDownPayment,showNew
           {` ${EUR} ${t('slider.save')}`}
         </Badge>
       )}
-      {(!isNil(percentageOfFirstInstallment) && activeTab !== 2 && showDownPayment) &&
-        <Badge type='lightBlue' className={styles.percentageOfFirstInstallment}>{`${percentageOfFirstInstallment}${percentageOfFirstInstallment > 0 ? '%' : EUR} ${t('slider.firstInstallment')}`}</Badge>}
       {historyPriceDifferencePerCent >= MIN_PERCENT && (
         <Badge type='red' className={styles.priceDifferencePerCent}>
           -{historyPriceDifferencePerCent}%

package/source/components/VehicleDetailedSlider/partials/Stats.tsx

@@ -43,7 +43,7 @@ const Stats: FunctionComponent<IProps> = (props) => {
           </div>
         )}
       </div>
-      {(totalCarImpCount > 0 || totalFavCount > 0) && <div className={styles.statsContainer}>
+      <div className={styles.statsContainer}>
         {totalCarImpCount > 0 && (
           <div className={`${styles.statsBlock} ${styles.saveCarAsFavorites}`}>
             <span>{t('slider.customersLookingTheCar', { count: totalCarImpCount })}</span>
@@ -54,7 +54,7 @@ const Stats: FunctionComponent<IProps> = (props) => {
             <span>{t('slider.saveCarAsFavorites', { count: totalFavCount })}</span>
           </div>
         )}
-      </div>}
+      </div>
     </div>
   );
 };

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

@@ -36,7 +36,6 @@ export interface IVehiclePriceItemProps {
   combineRefAlternative?: boolean;
   postfix?: string;
   margin?: number;
-  isMarge?: boolean;
 }
 class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
   routeToActiveTab = () => {
@@ -55,15 +54,15 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
       totalOld,
       totalCurrent,
       tooltipDescription,
-      // positionX,
-      // positionY,
-      // iconName,
+      positionX,
+      positionY,
+      iconName,
       postfix,
       linkTag,
       routeObj,
-      // combineRefAlternative,
+      combineRefAlternative,
       prefixOldPrice,
-      // margin,
+      margin,
       isAlternativeText,
       vehicleComponentName,
       priceSub,
@@ -71,8 +70,7 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
       showAboIcon = false,
       isPriceDisable = false,
       isNewPriceCategory = false,
-      isStrikeShown = false,
-      isMarge
+      isStrikeShown = false
     } = this.props;
 
     const stylesItem = classnames(
@@ -152,7 +150,7 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
                 <span className={styles.noPrice}>---</span>
               )}
 
-              {isStrikeShown && isTotal && !isMarge && (
+              {isStrikeShown && isTotal &&  (
                 <VehicleFormattedPrice
                   numbersAfterDot={0}
                   className={styles.oldPrice}

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

@@ -127,38 +127,4 @@
   margin-right: 5px;
 
   +media-tablet-landscape-up()
-    margin-right: 10px;
-
-
-.landingButton
-  position: relative;
-  padding: 0px 10px;
-  background-color: transparent; 
-  border-radius: 4px;
-  color: #005ccb; 
-  border: 1px solid #666CFF80; 
-  font-size: 16px;
-  cursor: pointer;
-  overflow: hidden;
-  z-index: 0;
-
-.landingButton::before 
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 30%;
-  height: 100%;
-  background-color: #82b1ff91;
-  border-radius: 20%;
-  opacity: 0;
-  transition: width 0.7s ease-out, height 0.7s ease-out, opacity 0.7s ease-out;
-  z-index: -1;
-
-
-.landingButton:active::before 
-  width: 200%;
-  height: 200%;
-  opacity: 1;
-  transition: width 0.7s ease-out, height 0.7s ease-out, opacity 0.7s ease-out;
+    margin-right: 10px;

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

@@ -136,7 +136,6 @@ const VehiclePrice: React.FC<IVehiclePriceSectionProps> = (props: IVehiclePriceS
   const buttonClassNames = classnames(
     classButton,
     styles.buttonDetails,
-    { [styles.landingButton]: vehicleComponentName === 'landing' },
     { [styles.isAlternativeButton]: typeAlternative }
   );
 
@@ -184,7 +183,7 @@ const VehiclePrice: React.FC<IVehiclePriceSectionProps> = (props: IVehiclePriceS
     }
   ] : '';
 
-  const priceData:any = combineRefAlternative ? [
+  const priceData = combineRefAlternative ? [
     ...priceItemsGlobal,
     {
       isTotal: true,
@@ -196,8 +195,7 @@ const VehiclePrice: React.FC<IVehiclePriceSectionProps> = (props: IVehiclePriceS
     {
       isTotal: true,
       totalCurrent: margin ? margin : currentSalesPriceExtra,
-      title: t('vehicleProps:title.marge'),
-      isMarge: true
+      title: t('vehicleProps:title.marge')
     }
   ] : [
     ...priceItemsGlobal,
@@ -256,7 +254,6 @@ const VehiclePrice: React.FC<IVehiclePriceSectionProps> = (props: IVehiclePriceS
           routeObj={routeObj}
           vehicleComponentName={vehicleComponentName}
           combineRefAlternative={combineRefAlternative}
-          isMarge={props.isMarge}
         />
       ))}
       {vehicleComponentName === 'favorite' && showCompareCheckboxes && (
@@ -276,10 +273,7 @@ const VehiclePrice: React.FC<IVehiclePriceSectionProps> = (props: IVehiclePriceS
         </Button>
       ) : null}
       {showOfferBtn ? (
-        vehicleComponentName === 'landing' ? (
-          <button className={buttonClassNames} onClick={onDetailsClick}>{t('vehicleProps:title.toOffer')}</button>
-        ) :
-          <Button variant={offerBtnVariantCondition} className={buttonClassNames} onClick={onDetailsClick}>{t('vehicleProps:title.toOffer')}</Button>
+        <Button variant={offerBtnVariantCondition} className={buttonClassNames} onClick={onDetailsClick}>{t('vehicleProps:title.toOffer')}</Button>
       ) : ''}
     </section>
   );

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

@@ -28,9 +28,6 @@
     display block
     +media-tablet-landscape-up()
       display flex
-  &.wrapTitlesAlternative
-    +media-tablet-landscape-up()
-      flex-wrap: wrap
   &.wrapTitlesFavorite
     display: flex;
     +media-tablet-landscape-up()
@@ -60,7 +57,7 @@
 
   +media-tablet-landscape-up()
     margin: 0 0 -1px 3px
-    overflow: hidden
+    max-width: 100%;
 
 .optionTitle
   display: flex
@@ -75,7 +72,6 @@
     margin-top: 3px;
     +media-tablet-landscape-up()
       margin-left: 8px;
-      width: 100%
       margin-top: 0;
   &.optionTitleFavorite
     font-size: 12px;
@@ -87,12 +83,7 @@
     margin-left: 8px;
   &.optionTitleIsAlternative
     overflow: hidden;
-    .subModel
-      margin: 5px 0 0 0
-      +media-tablet-landscape-up()
-        max-width: 260px;
-    +media-tablet-landscape-up()
-      margin-left: 0
+    max-width: 260px;
 
 .sponsored
   font-weight: 700

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

@@ -33,8 +33,7 @@ const VehicleTitle: React.FC<IVehicleTitleProps> = ({
     styles.wrapTitles,
     { [styles.wrapTitlesFavorite]: vehicleComponentName === 'favorite' },
     { [styles.wrapTitlesRecently]: vehicleComponentName === 'recently' || vehicleComponentName === 'landing' || vehicleComponentName === 'main' },
-    { [styles.wrapTitlesSearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' },
-    { [styles.wrapTitlesAlternative]: combineRefAlternative }
+    { [styles.wrapTitlesSearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' }
   );
   const optionTitleClassName = classnames(
     styles.optionTitle,

package/source/components/VehicleSmallCard/VehicleSmallCard.styl

@@ -224,12 +224,10 @@
 
   & > div
     display flex
-    align-items: center;
-    gap: 4px;
+    align-items: center
 
     &:first-of-type
       color: $skyBlue;
-      line-height: 1;
 
 .isFirstReferenceCar
   border: 1px solid $skyBlue !important;

package/source/components/VehicleSmallCard/VehicleSmallCard.tsx

@@ -34,6 +34,7 @@ interface IVehicleSmallCardProps {
   language?: string;
   vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite' | 'recently';
   isTop?: boolean;
+  isDealer?: boolean;
   isDealerSuperAdmin?: boolean;
   isReferenceSearch?: boolean;
   dashboardButtonText?: string;
@@ -84,6 +85,7 @@ interface IVehicleSmallCardProps {
   isAlternative?: boolean;
   typeAlternative?: string;
   index?: number;
+  currentPage?: number;
 }
 
 const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
@@ -117,6 +119,7 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     priceSubMtl,
     onContainerClick,
     onAddOfferToMainSlideClick,
+    isDealer,
     isDealerSuperAdmin,
     mainImageId,
     onFavoriteClick,
@@ -142,7 +145,8 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     minimizeData = false,
     isAlternative = false,
     typeAlternative,
-    index
+    index,
+    currentPage
   } = props;
 
   const combineRefAlternative = isAlternative || isReferenceSearch;
@@ -163,7 +167,7 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     { [styles.vehicleWrapRecently]: vehicleComponentName === 'recently' },
     { [styles.topVehicle]: isTop },
     { [styles.disableBorder]: minimizeData },
-    { [styles.isFirstReferenceCar]: isReferenceSearch && index === 0 },
+    { [styles.isFirstReferenceCar]: isReferenceSearch && index === 0 && currentPage === 1 },
     className
   );
 
@@ -291,7 +295,7 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
                   {showComponentLikeSlider ? (
                     <>
                       <DecoratedSliderForSRL {...decoratedSliderProps} />
-                      {renderIDInfo ? renderIDInfo() : null}
+                      {renderIDInfo && isDealer ? renderIDInfo() : null}
                       {combineRefAlternative && (
                         <div className={styles.wrapAlternativeData}>
                           <div>

package/source/components/_common/Badge/Badge.styl

@@ -35,9 +35,6 @@ $badge-border-width = 1px
 .blue
   background-color: $primary
   color: white
-.lightBlue
-  background-color: #26C6F9
-  color: white 
 
 .red
   color: #fff;