@bytebrand/fe-ui-core 4.3.0 → 4.4.0

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

@@ -1,7 +1,7 @@
 @import '../../../theme/mixins.styl';
 
 .newFinancingPriceWrapper
-  width: 100%
+  width: 159px
   display: flex
   align-items: flex-start;
   color: $lightGreen;
@@ -10,7 +10,7 @@
     font-size: 60px;
     display flex;
     line-height: .8;
-    margin 8px 0 0 16px;
+    margin 8px 0 0 10px;
   [class^="VehicleFormattedPrice__decimals"], [class^="VehicleFormattedPrice__unit"]
     font-size: 16px !important;
     transform: none !important;
@@ -18,13 +18,14 @@
 .tabContentPaddingForBuy
   .newFinancingPriceWrapper
     [class*="VehicleFormattedPrice__large"]
-      font-size: 40px;
       margin-left: 0;
     +media-phone-only()
       [class*="VehicleFormattedPrice__large"]
-        font-size: 45px;
         margin-left: 3px;
 
+
+
+
 .tabContentPadding
   padding: 10px 10px 10px 10px;
   flex-direction: row
@@ -110,4 +111,14 @@
   transform: rotate(180deg);
 
 .wrapper
-  padding-right: 15px;
+  +media-tablet-landscape-up()
+   padding-right: 15px;
+
+.priceFontSizeSmall
+  .priceInfoLabel
+    margin-top:8px!important 
+  
+
+.tabContentPaddingForBuy.priceFontSizeSmall
+  .financingPriceItem
+      display: flex;

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

@@ -7,6 +7,7 @@ import styles from './PriceContent.styl';
 import VehicleFormattedPrice from '../../Vehicle/VehicleFormattedPrice/VehicleFormattedPrice';
 import PriceRating from '../../PriceRating/PriceRating';
 import RequestOffer from '../../_common/OfferRequestButtonWrapper/OfferRequestButtonWrapper';
+import { getFormattedPrice } from '../../../../utils';
 
 const PriceContent: React.FunctionComponent<IPriceContentProps> = ({
   t,
@@ -45,11 +46,14 @@ const PriceContent: React.FunctionComponent<IPriceContentProps> = ({
     isAdditionalOption: true,
     onShowOfferDetails: offerBlockProps.onShowOfferDetails
   };
+  const priceFontSize: string = monthlyInstallment ? (getFormattedPrice(monthlyInstallment)?.toString().match(/\d/g).length >= 4 ? 'small' : 'large') : '';
 
   const tabContentPaddingClassName = classnames(
     styles.tabContentPadding,
-    { [styles.tabContentPaddingForBuy]: isBuy }
+    { [styles.tabContentPaddingForBuy]: isBuy },
+    { [styles.priceFontSizeSmall]: priceFontSize === 'small' }
   );
+
   return (
     <>
       <div className={tabContentPaddingClassName}>
@@ -90,11 +94,12 @@ const PriceContent: React.FunctionComponent<IPriceContentProps> = ({
                 postfix={postfix}
                 numbersAfterDot={0}
                 size='large'
+                dynamicFontSize={tabContentPaddingClassName.includes('tabContentPaddingForBuy') ? 'large' : 'small'}
               />
             </div>
           ) : null}
         </span>
-        <div>
+        <div className={styles.wrapper}>
           <PriceRating {...priceRatingProps} />
           <span className={styles.priceInfo}>
             <span className={styles.priceInfoLabel} onClick={onAdjustRateClick}>
@@ -103,13 +108,13 @@ 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>
         </div>
       </div>
-      {offerBlockOpen && <OfferBlockComponent {...{ ...offerBlockProps, priceTabIndex: activeTab }} /> }
+      {offerBlockOpen && <OfferBlockComponent {...{ ...offerBlockProps, priceTabIndex: activeTab }} />}
       <RequestOffer {...requestOfferProps} />
     </>
   );

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

@@ -82,7 +82,7 @@ const Properties: React.FunctionComponent<IPropertiesProps> = ({ t, car, decorat
 
   const tabsTitles = [
     {
-      title: 'overview',
+      title: `${t(`sidebar.overview`)}`,
       children: (
         <div className={`${styles.tabContentPadding} ${styles.tabContentOverviewPadding}`}>
           {mainProperties.map((property: any, index: number) => (

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,28 +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;
   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 {
@@ -43,6 +53,8 @@ interface IState {
   smallLoaded: boolean;
   largeLoaded1: boolean;
   largeLoaded01: boolean;
+  videoSrc: string;
+  showYoutube: boolean;
 }
 
 const MagnifyGlassImage = withMagnifyGlassImage(Image);
@@ -59,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
     };
   }
 
@@ -77,8 +93,10 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
     this.slider.slickGoTo(0);
   };
 
-  componentDidUpdate(prevProps: IProps) {
-    console.log('VehicleDetailedSlider-works!');
+
+  componentDidUpdate(prevProps: IProps, prevState: IState) {
+    const cookieConfig = JSON.parse(localStorage.getItem('cookieConfig')) || {};
+    const showYoutube = !cookieConfig?.marketing?.includes('youtube');
     if (prevProps.photos.length !== this.props.photos.length && this.props.photos.length === 0) {
       this.setState(() => ({
         largeLoaded: false,
@@ -87,10 +105,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', {
@@ -106,12 +129,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 = {
@@ -121,6 +154,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;
@@ -145,27 +179,41 @@ 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(({ imageUrlLarge, imageUrlSmall }: IImage, index: number) => {
+      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);
+        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={handleMouseUp}
+            onMouseUp={this.state.showYoutube ? handleMouseUp : null}
           >
-            {showImage && (
+            {showImage && !item.videoUrl && (
               <MagnifyGlassImage
                 src={index !== 0 ? imageUrlLarge : null}
                 srcSmall={index === 0 ? imageUrlSmall : null}
@@ -173,54 +221,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} />
     );
   };
 
@@ -236,13 +307,15 @@ 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,
@@ -251,6 +324,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
@@ -260,9 +334,12 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
 
     const priceProps = {
       t,
+      financingConfig,
       showNewLabel,
+      showDownPayment,
       historyPriceDifference: price ? price.historyPriceDifference : 0,
-      historyPriceDifferencePerCent: price ? price.historyPriceDifferencePerCent : 0
+      historyPriceDifferencePerCent: price ? price.historyPriceDifferencePerCent : 0,
+      activeTab
     };
 
     const statsProps = {
@@ -280,14 +357,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/PriceData.styl

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

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

@@ -3,19 +3,24 @@ 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, showNewLabel, historyPriceDifference, historyPriceDifferencePerCent }) => {
+const PriceData: React.FunctionComponent<IProps> = ({ t, showDownPayment,showNewLabel, historyPriceDifference, historyPriceDifferencePerCent, financingConfig, activeTab }) => {
+  const percentageOfFirstInstallment = activeTab === 0 ? financingConfig!.financing.percentageOfFirstInstallment : financingConfig!.leasing.percentageOfFirstInstallment;
   return (
     <div className={styles.topWrapper}>
       {showNewLabel && <Badge type='blue' className={styles.new}>{t('slider.new')}</Badge>}
@@ -25,6 +30,8 @@ const PriceData: React.FunctionComponent<IProps> = ({ t, showNewLabel, historyPr
           {` ${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>
-      <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 = () => {
@@ -54,15 +55,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,
@@ -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;