@bytebrand/fe-ui-core 4.2.242 → 4.2.244

package/source/components/VehicleDetailedSidebar/VehicleDetailedSidebar.tsx

@@ -10,6 +10,7 @@ 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 {
@@ -35,7 +36,8 @@ const VehicleDetailedSidebar: FunctionComponent<IVehicleDetailedSidebarProps> =
     originUrl,
     // isAlternative,
     infoSections,
-    onCurrentSalesPriceChange
+    onCurrentSalesPriceChange,
+    isFetching
   } = props;
   const ref = useRef(null);
   const [offerBlockOpen, setOfferBlockOpen] = useState(false);
@@ -145,34 +147,34 @@ const VehicleDetailedSidebar: FunctionComponent<IVehicleDetailedSidebarProps> =
 
   return (
     <>
-      <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'
+      {!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'
             >
-              Trustpilot
-            </a>
-          </div>
-        )}
-        {props.children}
-      </div>
-      <div>
-        {isAlternativeType &&
+              <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 &&
           <DealerInfo
             t={t}
             infoSections={infoSections}
@@ -182,10 +184,12 @@ const VehicleDetailedSidebar: FunctionComponent<IVehicleDetailedSidebarProps> =
             currentSalesPrice={currentSalesPrice}
             onCurrentSalesPriceChange={onCurrentSalesPriceChange}
           />}
-      </div>
-      <Hidden xs sm md>
-        <div className={`${styles.detailedInfo} ${styles.highlights}`}>{carLoaded && <Properties {...propertiesProps} />}</div>
-      </Hidden>
+        </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>
+      }
     </>
   );
 };

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

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

package/source/components/VehicleDetailedSlider/VehicleDetailedSlider.styl

@@ -100,3 +100,48 @@
 
 .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,31 +13,38 @@ 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;
+  financingConfig: any;
+  youtubeId: string;
   showModal?: (id: string, props?: any) => void;
   hideModal: (id: string) => void;
   onCarFavorite: (event: MouseEvent<HTMLElement>) => void;
-  showDownPayment:boolean;
+  showDownPayment: boolean;
+  handleSentryInit?: () => void;
 }
 
 interface IState {
@@ -46,6 +53,8 @@ interface IState {
   smallLoaded: boolean;
   largeLoaded1: boolean;
   largeLoaded01: boolean;
+  videoSrc: string;
+  showYoutube: boolean;
 }
 
 const MagnifyGlassImage = withMagnifyGlassImage(Image);
@@ -62,17 +71,21 @@ 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
+      largeLoaded01: false,
+      videoSrc: '',
+      showYoutube: youtubeConfig
     };
   }
 
@@ -80,7 +93,11 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
     this.slider.slickGoTo(0);
   };
 
-  componentDidUpdate(prevProps: IProps) {
+
+  componentDidUpdate(prevProps: IProps, prevState: IState) {
+    const cookieConfig = JSON.parse(localStorage.getItem('cookieConfig')) || {};
+    const showYoutube = !cookieConfig?.marketing?.includes('youtube');
+    console.log('showYoutube', showYoutube);
     if (prevProps.photos.length !== this.props.photos.length && this.props.photos.length === 0) {
       this.setState(() => ({
         largeLoaded: false,
@@ -89,10 +106,15 @@ 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 } = this.props;
+    const { t = (phrase: string) => _get(VehicleDetailedSliderTranslate(statsData), phrase, phrase), photos, exteriorPhotos, interiorPhoto, showModal, hideModal, statsData, handleSentryInit } = this.props;
     const { activeSlide } = this.state;
 
     showModal('VEHICLE_DETAILED_SLIDER_MODAL', {
@@ -108,12 +130,22 @@ 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 } = this.props;
+    const { photos, mainImageUrl, mainImageBlur, t, handleSentryInit } = this.props;
     const { activeSlide, largeLoaded, smallLoaded, largeLoaded1, largeLoaded01 } = this.state;
 
     const imageProps = {
@@ -123,6 +155,7 @@ 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;
@@ -147,11 +180,24 @@ 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);
@@ -160,16 +206,15 @@ 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={handleMouseUp}
+            onMouseUp={this.state.showYoutube ? handleMouseUp : null}
           >
-            {showImage && (
+            {showImage && !item.videoUrl && (
               <MagnifyGlassImage
                 src={index !== 0 ? imageUrlLarge : null}
                 srcSmall={index === 0 ? imageUrlSmall : null}
@@ -177,54 +222,77 @@ 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} />
     );
   };
 
@@ -249,7 +317,6 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
       onCarFavorite
     } = this.props;
     const { activeSlide } = this.state;
-
     const sliderProps = {
       autoPlay: false,
       speed: 300,
@@ -258,6 +325,7 @@ 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
@@ -290,14 +358,16 @@ 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}>
-          <PriceData {...priceProps}/>
+          {!photos[activeSlide]?.videoUrl && <PriceData {...priceProps} />}
           <Slider ref={slider => (this.slider = slider)} {...sliderProps}>
             {this.getImages()}
           </Slider>
-          {isMobileOnly ? <MobileStats {...statsProps} /> : <Stats {...statsProps}/>}
+          {!photos[activeSlide]?.videoUrl ? (
+            isMobileOnly ? <MobileStats {...statsProps} /> : <Stats {...statsProps} />
+          ) : null}
         </div>
       </div>
     );

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

@@ -43,7 +43,7 @@ const Stats: FunctionComponent<IProps> = (props) => {
           </div>
         )}
       </div>
-      <div className={styles.statsContainer}>
+      {(totalCarImpCount > 0 || totalFavCount > 0) && <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,6 +36,7 @@ export interface IVehiclePriceItemProps {
   combineRefAlternative?: boolean;
   postfix?: string;
   margin?: number;
+  isMarge?: boolean;
 }
 class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
   routeToActiveTab = () => {
@@ -70,7 +71,8 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
       showAboIcon = false,
       isPriceDisable = false,
       isNewPriceCategory = false,
-      isStrikeShown = false
+      isStrikeShown = false,
+      isMarge
     } = this.props;
 
     const stylesItem = classnames(
@@ -150,7 +152,7 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
                 <span className={styles.noPrice}>---</span>
               )}
 
-              {isStrikeShown && isTotal &&  (
+              {isStrikeShown && isTotal && !isMarge && (
                 <VehicleFormattedPrice
                   numbersAfterDot={0}
                   className={styles.oldPrice}

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

@@ -127,4 +127,38 @@
   margin-right: 5px;
 
   +media-tablet-landscape-up()
-    margin-right: 10px;
+    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;

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

@@ -136,6 +136,7 @@ const VehiclePrice: React.FC<IVehiclePriceSectionProps> = (props: IVehiclePriceS
   const buttonClassNames = classnames(
     classButton,
     styles.buttonDetails,
+    { [styles.landingButton]: vehicleComponentName === 'landing' },
     { [styles.isAlternativeButton]: typeAlternative }
   );
 
@@ -195,7 +196,8 @@ const VehiclePrice: React.FC<IVehiclePriceSectionProps> = (props: IVehiclePriceS
     {
       isTotal: true,
       totalCurrent: margin ? margin : currentSalesPriceExtra,
-      title: t('vehicleProps:title.marge')
+      title: t('vehicleProps:title.marge'),
+      isMarge: true
     }
   ] : [
     ...priceItemsGlobal,
@@ -254,6 +256,7 @@ const VehiclePrice: React.FC<IVehiclePriceSectionProps> = (props: IVehiclePriceS
           routeObj={routeObj}
           vehicleComponentName={vehicleComponentName}
           combineRefAlternative={combineRefAlternative}
+          isMarge={props.isMarge}
         />
       ))}
       {vehicleComponentName === 'favorite' && showCompareCheckboxes && (
@@ -273,7 +276,10 @@ const VehiclePrice: React.FC<IVehiclePriceSectionProps> = (props: IVehiclePriceS
         </Button>
       ) : null}
       {showOfferBtn ? (
-        <Button variant={offerBtnVariantCondition} className={buttonClassNames} onClick={onDetailsClick}>{t('vehicleProps:title.toOffer')}</Button>
+        vehicleComponentName === 'landing' ? (
+          <button 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,6 +28,9 @@
     display block
     +media-tablet-landscape-up()
       display flex
+  &.wrapTitlesAlternative
+    +media-tablet-landscape-up()
+      flex-wrap: wrap
   &.wrapTitlesFavorite
     display: flex;
     +media-tablet-landscape-up()
@@ -57,7 +60,7 @@
 
   +media-tablet-landscape-up()
     margin: 0 0 -1px 3px
-    max-width: 100%;
+    overflow: hidden
 
 .optionTitle
   display: flex
@@ -72,6 +75,7 @@
     margin-top: 3px;
     +media-tablet-landscape-up()
       margin-left: 8px;
+      width: 100%
       margin-top: 0;
   &.optionTitleFavorite
     font-size: 12px;
@@ -83,7 +87,12 @@
     margin-left: 8px;
   &.optionTitleIsAlternative
     overflow: hidden;
-    max-width: 260px;
+    .subModel
+      margin: 5px 0 0 0
+      +media-tablet-landscape-up()
+        max-width: 260px;
+    +media-tablet-landscape-up()
+      margin-left: 0
 
 .sponsored
   font-weight: 700

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

@@ -33,7 +33,8 @@ 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.wrapTitlesSearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' },
+    { [styles.wrapTitlesAlternative]: combineRefAlternative }
   );
   const optionTitleClassName = classnames(
     styles.optionTitle,

package/source/components/VehicleSmallCard/VehicleSmallCard.tsx

@@ -34,7 +34,6 @@ interface IVehicleSmallCardProps {
   language?: string;
   vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite' | 'recently';
   isTop?: boolean;
-  isDealer?: boolean;
   isDealerSuperAdmin?: boolean;
   isReferenceSearch?: boolean;
   dashboardButtonText?: string;