@bytebrand/fe-ui-core 4.2.240 → 4.2.241

package/source/components/VehicleDetailedSidebar/VehicleDetailedSidebar.tsx

@@ -10,7 +10,6 @@ import styles from './VehicleDetailedSidebar.styl';
 import { vehicleProps } from '../../locales/data';
 import { IVehicleDetailedSidebarProps } from '../../framework/types/types';
 import DealerInfo from '../Alternative/DealerInfo';
-import { Skeleton } from '@mui/material';
 
 declare global {
   interface Window {
@@ -36,8 +35,7 @@ const VehicleDetailedSidebar: FunctionComponent<IVehicleDetailedSidebarProps> =
     originUrl,
     // isAlternative,
     infoSections,
-    onCurrentSalesPriceChange,
-    isFetching
+    onCurrentSalesPriceChange
   } = props;
   const ref = useRef(null);
   const [offerBlockOpen, setOfferBlockOpen] = useState(false);
@@ -147,34 +145,34 @@ const VehicleDetailedSidebar: FunctionComponent<IVehicleDetailedSidebarProps> =
 
   return (
     <>
-      {!isFetching ? <div className={styles.detailedInfo}>
-          <Title {...titleProps} />
-          <Price {...priceProps} />
-          <Price {...priceProps} isSticky={true} />
-          {isMobileOnly && (
-            <div
-              ref={ref}
-              data-locale='de-DE'
-              data-template-id='5419b6a8b0d04a076446a9ad'
-              data-businessunit-id='46edfd1c0000640005017f22'
-              data-style-height='32px'
-              data-style-width='100%'
-              data-theme='light'
-              data-style-alignment='center'
+      <div className={styles.detailedInfo}>
+        <Title {...titleProps} />
+        <Price {...priceProps} />
+        <Price {...priceProps} isSticky={true} />
+        {isMobileOnly && (
+          <div
+            ref={ref}
+            data-locale='de-DE'
+            data-template-id='5419b6a8b0d04a076446a9ad'
+            data-businessunit-id='46edfd1c0000640005017f22'
+            data-style-height='32px'
+            data-style-width='100%'
+            data-theme='light'
+            data-style-alignment='center'
+          >
+            <a
+              href='https://de.trustpilot.com/review/www.auto.de'
+              target='_blank'
+              rel='noopener noreferrer'
             >
-              <a
-                href='https://de.trustpilot.com/review/www.auto.de'
-                target='_blank'
-                rel='noopener noreferrer'
-              >
-                Trustpilot
-              </a>
-            </div>
-          )}
-          {props.children}
-        </div> : <div className={styles.skeletonInfoContainer}><Skeleton /></div>
-      }
-      {!isFetching ? <div>{isAlternativeType &&
+              Trustpilot
+            </a>
+          </div>
+        )}
+        {props.children}
+      </div>
+      <div>
+        {isAlternativeType &&
           <DealerInfo
             t={t}
             infoSections={infoSections}
@@ -184,12 +182,10 @@ const VehicleDetailedSidebar: FunctionComponent<IVehicleDetailedSidebarProps> =
             currentSalesPrice={currentSalesPrice}
             onCurrentSalesPriceChange={onCurrentSalesPriceChange}
           />}
-        </div> : <div className={styles.skeletonInfoContainer}><Skeleton /></div>
-      }
-      {!isFetching ? <Hidden xs sm md>
-          <div className={`${styles.detailedInfo} ${styles.highlights}`}>{carLoaded && <Properties {...propertiesProps} />}</div>
-        </Hidden> : <div className={styles.skeletonInfoContainer}><Skeleton /></div>
-      }
+      </div>
+      <Hidden xs sm md>
+        <div className={`${styles.detailedInfo} ${styles.highlights}`}>{carLoaded && <Properties {...propertiesProps} />}</div>
+      </Hidden>
     </>
   );
 };

package/source/components/VehicleDetailedSidebar/partials/PriceContent.tsx

@@ -108,7 +108,7 @@ const PriceContent: React.FunctionComponent<IPriceContentProps> = ({
                 className={styles.infoIcon}
                 customDimensions
               />
-              <span>{priceTabActiveIndex === 2 ? t('sidebar.serviceProducts') :  t('sidebar.adjustRate')}</span>
+              <span>{t('sidebar.adjustRate')}</span>
               <IconSVG name='menuArrow' className={`${styles.arrowDownIcon} ${offerBlockOpen ? styles.arrowUpIcon : ''}`} customDimensions />
             </span>
           </span>

package/source/components/VehicleDetailedSlider/VehicleDetailedSlider.styl

@@ -100,48 +100,3 @@
 
 .blurred
   filter: blur(3px)
-
-.frame 
-  aspect-ratio:4/3     
-  height: auto;
-  border-radius: 10px;
-  display: block;
-  border: none;
-
-.noYoutubeWrapper
-  margin: 82px auto 0;
-  width: 487px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  +media-phone-only()
-    margin: 40px auto 0;
-    width: 297px;
-
-  svg
-    +media-phone-only()
-      width: 79px;
-      height: 56px;
-
-  .youtubeCookiesText
-    font-size: 28px;
-    font-weight: 400;
-    line-height: 36px; 
-    margin:62px 0px 54px;
-    display: block;
-    text-align: center;
-    +media-phone-only()
-      margin: 36px auto 39px;
-      font-size:17px;
-      line-height: 21px
-
-  .btn  
-    height: 38px!important
-    +media-phone-only()
-      height: 30px!important
-      font-size:13px;
-
-  .btn:first-child
-    margin-right:22px!important
-    +media-phone-only()
-      margin-right:5px!important

package/source/components/VehicleDetailedSlider/VehicleDetailedSlider.tsx

@@ -13,38 +13,31 @@ 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;
+  activeTab:number;
   make: string;
   model: string;
   subModel: string;
   powerKW: number;
   powerPS: number;
-  financingConfig: any;
-  youtubeId: string;
+  financingConfig:any;
   showModal?: (id: string, props?: any) => void;
   hideModal: (id: string) => void;
   onCarFavorite: (event: MouseEvent<HTMLElement>) => void;
-  showDownPayment: boolean;
-  handleSentryInit?: () => void;
+  showDownPayment:boolean;
 }
 
 interface IState {
@@ -53,8 +46,6 @@ interface IState {
   smallLoaded: boolean;
   largeLoaded1: boolean;
   largeLoaded01: boolean;
-  videoSrc: string;
-  showYoutube: boolean;
 }
 
 const MagnifyGlassImage = withMagnifyGlassImage(Image);
@@ -71,21 +62,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,11 +80,7 @@ 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');
-    console.log('showYoutube', showYoutube);
+  componentDidUpdate(prevProps: IProps) {
     if (prevProps.photos.length !== this.props.photos.length && this.props.photos.length === 0) {
       this.setState(() => ({
         largeLoaded: false,
@@ -106,15 +89,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', {
@@ -130,22 +108,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 = {
@@ -155,7 +123,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;
@@ -180,24 +147,11 @@ 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) => {
         const showImage = index === currentSlide || index === prevSlide || index === nextSlide || this.imagesCache[index] !== undefined;
         const imageUrlSmall = _get(item, 'imageUrlSmall', null);
@@ -206,15 +160,16 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
         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}
@@ -222,77 +177,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}/>
     );
   };
 
@@ -317,6 +249,7 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
       onCarFavorite
     } = this.props;
     const { activeSlide } = this.state;
+
     const sliderProps = {
       autoPlay: false,
       speed: 300,
@@ -325,7 +258,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
@@ -358,16 +290,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/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 = () => {
@@ -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 }
   );
 
@@ -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.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;
@@ -117,6 +118,7 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     priceSubMtl,
     onContainerClick,
     onAddOfferToMainSlideClick,
+    isDealer,
     isDealerSuperAdmin,
     mainImageId,
     onFavoriteClick,