@bytebrand/fe-ui-core-autobahn 1.0.1 → 1.0.3

package/compat/VehicleDetailedSlider/VehicleDetailedSlider.tsx

@@ -1,382 +1,382 @@
-import React, { MouseEvent, Component } from 'react';
-import Slider from 'react-slick';
-import classnames from 'classnames';
-import Image from '../Image/Image';
-import _get from 'lodash/get';
-import { isMobileOnly } from 'react-device-detect';
-
-import Stats from './partials/Stats';
-import Title from './partials/Title';
-import PriceData from './partials/PriceData';
-import MobileStats from './partials/MobileStast';
-import withMagnifyGlassImage from '../MagnifyGlass/MagnifyGlass';
-import { IImage, IPrice, SliderType } from '../../types/types';
-import { PLACEHOLDER_IMAGE_SMALL_URL } from '../../constants/common';
-import { VehicleDetailedSliderTranslate } from '../../locales/legacy/data';
-import SvgYoutubeButton from '../../iconsvg/SVG/slider/YoutubeButton';
-import Button from '../Button/Button';
-import { updateCookieList } from '../../utils/CommonUtils';
-
-
-
-import styles from './VehicleDetailedSlider.styl';
-
-interface IProps {
-  t: (phrase: string, config?: any) => string;
-  price: IPrice;
-  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;
-  financingFirstInstallment?: number | null;
-  leasingFirstInstallment?: number | null;
-  handleSentryInit?: () => void;
-}
-
-interface IState {
-  activeSlide: number;
-  largeLoaded: boolean;
-  smallLoaded: boolean;
-  largeLoaded1: boolean;
-  largeLoaded01: boolean;
-  videoSrc: string;
-  showYoutube: boolean;
-}
-
-const MagnifyGlassImage = withMagnifyGlassImage(Image);
-
-class VehicleDetailedSlider extends Component<IProps, IState> {
-
-  static readonly defaultProps = {
-    mainImageBlur: true,
-    showNewLabel: false,
-    price: {
-      historyPriceDifferencePrecCent: 0,
-      historyPriceDifference: 0
-    }
-  };
-
-  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
-    };
-  }
-
-  handleSetFirstSlide = () => {
-    this.slider.slickGoTo(0);
-  };
-
-
-  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,
-        smallLoaded: false,
-        largeLoaded1: false,
-        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 { activeSlide } = this.state;
-
-    showModal('VEHICLE_DETAILED_SLIDER_MODAL', {
-      t,
-      photos,
-      exteriorPhotos,
-      interiorPhoto,
-      activeSlide,
-      sliderType,
-      showCloseButton: false,
-      className: styles.sliderModal,
-      overlayClassName: styles.overlayModal,
-      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 { activeSlide, largeLoaded, smallLoaded, largeLoaded1, largeLoaded01 } = this.state;
-
-    const imageProps = {
-      ratioW: 4,
-      ratioH: 3,
-      width: '100%',
-      className: styles.image,
-      withLoader: false
-    };
-
-    if (Array.isArray(photos) && photos.length > 0 && largeLoaded && smallLoaded && largeLoaded1 && largeLoaded01) {
-      let isMouseDown = false;
-      let isDragging = false;
-
-      const handleMouseDown = () => {
-        isDragging = false;
-        isMouseDown = true;
-      };
-
-      const handleMouseMove = () => {
-        if (isMouseDown) {
-          isDragging = true;
-        }
-      };
-
-      const handleMouseUp = () => {
-        if (!isDragging) {
-          this.handleOpenSliderModal(SliderType.DEFAULT);
-        }
-
-        isMouseDown = false;
-        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);
-        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}
-          >
-            {showImage && !item.videoUrl && (
-              <MagnifyGlassImage
-                src={index !== 0 ? imageUrlLarge : null}
-                srcSmall={index === 0 ? imageUrlSmall : null}
-                srcLarge={index === 0 ? imageUrlLarge : null}
-                {...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} />}
-
-          {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 })}
-            {...imageProps}
-          />
-          }
-
-          {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 })}
-            {...imageProps}
-          />
-          }
-        </div>
-      );
-
-    }
-
-    return (
-      <div className={styles.noPhoto} />
-    );
-  };
-
-  render() {
-    const {
-      t = (phrase: string) => _get(VehicleDetailedSliderTranslate(statsData), phrase, phrase),
-      price,
-      photos,
-      exteriorPhotos,
-      interiorPhoto,
-      statsData,
-      isFavorite,
-      showNewLabel,
-      make,
-      model,
-      showDownPayment,
-      financingFirstInstallment,
-      leasingFirstInstallment,
-      subModel,
-      powerKW,
-      powerPS,
-      activeTab,
-      financingConfig,
-      onCarFavorite
-    } = this.props;
-    const { activeSlide } = this.state;
-    const sliderProps = {
-      autoPlay: false,
-      speed: 300,
-      infinite: true,
-      dots: false,
-      arrows: Array.isArray(photos) && photos.length > 0,
-      slidesToShow: 1,
-      slidesToScroll: 1,
-      beforeChange: this.handleSlideChange,
-      afterChange: (index: number) => {
-        this.setState({
-          activeSlide: index
-        });
-      }
-    };
-
-    const priceProps = {
-      t,
-      financingConfig,
-      showNewLabel,
-      showDownPayment,
-      financingFirstInstallment,
-      leasingFirstInstallment,
-      historyPriceDifference: price ? price.historyPriceDifference : 0,
-      historyPriceDifferencePerCent: price ? price.historyPriceDifferencePerCent : 0,
-      activeTab
-    };
-
-    const statsProps = {
-      t,
-      activeSlide,
-      totalFavCount: statsData && statsData.totalFavCount,
-      totalCarImpCount: statsData && statsData.totalCarImpCount,
-      photosLength: Array.isArray(photos) && photos.length,
-      hasExteriorPhotos: Array.isArray(exteriorPhotos) && exteriorPhotos.length > 0,
-      hasInteriorPhoto: !!interiorPhoto,
-      onSetFirstSlide: this.handleSetFirstSlide,
-      onOpenSliderModal: this.handleOpenSliderModal
-    };
-
-    return (
-      <div className={styles.sliderWrap}>
-        {isMobileOnly &&
-          <Title {...{ t, make, model, subModel, powerKW, powerPS, onCarFavorite, isFavorite }} />
-        }
-        <div className={styles.slider}>
-          {!photos[activeSlide]?.videoUrl && <PriceData {...priceProps} />}
-          <Slider ref={slider => { this.slider = slider; }} {...sliderProps}>
-            {this.getImages()}
-          </Slider>
-          {!photos[activeSlide]?.videoUrl ? (
-            isMobileOnly ? <MobileStats {...statsProps} /> : <Stats {...statsProps} />
-          ) : null}
-        </div>
-      </div>
-    );
-  }
-}
-
-export default VehicleDetailedSlider;
+import React, { MouseEvent, Component } from 'react';
+import Slider from 'react-slick';
+import classnames from 'classnames';
+import Image from '../Image/Image';
+import _get from 'lodash/get';
+import { isMobileOnly } from 'react-device-detect';
+
+import Stats from './partials/Stats';
+import Title from './partials/Title';
+import PriceData from './partials/PriceData';
+import MobileStats from './partials/MobileStast';
+import withMagnifyGlassImage from '../MagnifyGlass/MagnifyGlass';
+import { IImage, IPrice, SliderType } from '../../types/types';
+import { PLACEHOLDER_IMAGE_SMALL_URL } from '../../constants/common';
+import { VehicleDetailedSliderTranslate } from '../../locales/legacy/data';
+import SvgYoutubeButton from '../../iconsvg/SVG/slider/YoutubeButton';
+import Button from '../Button/Button';
+import { updateCookieList } from '../../utils/CommonUtils';
+
+
+
+import styles from './VehicleDetailedSlider.styl';
+
+interface IProps {
+  t: (phrase: string, config?: any) => string;
+  price: IPrice;
+  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;
+  financingFirstInstallment?: number | null;
+  leasingFirstInstallment?: number | null;
+  handleSentryInit?: () => void;
+}
+
+interface IState {
+  activeSlide: number;
+  largeLoaded: boolean;
+  smallLoaded: boolean;
+  largeLoaded1: boolean;
+  largeLoaded01: boolean;
+  videoSrc: string;
+  showYoutube: boolean;
+}
+
+const MagnifyGlassImage = withMagnifyGlassImage(Image);
+
+class VehicleDetailedSlider extends Component<IProps, IState> {
+
+  static readonly defaultProps = {
+    mainImageBlur: true,
+    showNewLabel: false,
+    price: {
+      historyPriceDifferencePrecCent: 0,
+      historyPriceDifference: 0
+    }
+  };
+
+  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
+    };
+  }
+
+  handleSetFirstSlide = () => {
+    this.slider.slickGoTo(0);
+  };
+
+
+  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,
+        smallLoaded: false,
+        largeLoaded1: false,
+        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 { activeSlide } = this.state;
+
+    showModal('VEHICLE_DETAILED_SLIDER_MODAL', {
+      t,
+      photos,
+      exteriorPhotos,
+      interiorPhoto,
+      activeSlide,
+      sliderType,
+      showCloseButton: false,
+      className: styles.sliderModal,
+      overlayClassName: styles.overlayModal,
+      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 { activeSlide, largeLoaded, smallLoaded, largeLoaded1, largeLoaded01 } = this.state;
+
+    const imageProps = {
+      ratioW: 4,
+      ratioH: 3,
+      width: '100%',
+      className: styles.image,
+      withLoader: false
+    };
+
+    if (Array.isArray(photos) && photos.length > 0 && largeLoaded && smallLoaded && largeLoaded1 && largeLoaded01) {
+      let isMouseDown = false;
+      let isDragging = false;
+
+      const handleMouseDown = () => {
+        isDragging = false;
+        isMouseDown = true;
+      };
+
+      const handleMouseMove = () => {
+        if (isMouseDown) {
+          isDragging = true;
+        }
+      };
+
+      const handleMouseUp = () => {
+        if (!isDragging) {
+          this.handleOpenSliderModal(SliderType.DEFAULT);
+        }
+
+        isMouseDown = false;
+        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);
+        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}
+          >
+            {showImage && !item.videoUrl && (
+              <MagnifyGlassImage
+                src={index !== 0 ? imageUrlLarge : null}
+                srcSmall={index === 0 ? imageUrlSmall : null}
+                srcLarge={index === 0 ? imageUrlLarge : null}
+                {...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} />}
+
+          {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 })}
+            {...imageProps}
+          />
+          }
+
+          {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 })}
+            {...imageProps}
+          />
+          }
+        </div>
+      );
+
+    }
+
+    return (
+      <div className={styles.noPhoto} />
+    );
+  };
+
+  render() {
+    const {
+      t = (phrase: string) => _get(VehicleDetailedSliderTranslate(statsData), phrase, phrase),
+      price,
+      photos,
+      exteriorPhotos,
+      interiorPhoto,
+      statsData,
+      isFavorite,
+      showNewLabel,
+      make,
+      model,
+      showDownPayment,
+      financingFirstInstallment,
+      leasingFirstInstallment,
+      subModel,
+      powerKW,
+      powerPS,
+      activeTab,
+      financingConfig,
+      onCarFavorite
+    } = this.props;
+    const { activeSlide } = this.state;
+    const sliderProps = {
+      autoPlay: false,
+      speed: 300,
+      infinite: true,
+      dots: false,
+      arrows: Array.isArray(photos) && photos.length > 0,
+      slidesToShow: 1,
+      slidesToScroll: 1,
+      beforeChange: this.handleSlideChange,
+      afterChange: (index: number) => {
+        this.setState({
+          activeSlide: index
+        });
+      }
+    };
+
+    const priceProps = {
+      t,
+      financingConfig,
+      showNewLabel,
+      showDownPayment,
+      financingFirstInstallment,
+      leasingFirstInstallment,
+      historyPriceDifference: price ? price.historyPriceDifference : 0,
+      historyPriceDifferencePerCent: price ? price.historyPriceDifferencePerCent : 0,
+      activeTab
+    };
+
+    const statsProps = {
+      t,
+      activeSlide,
+      totalFavCount: statsData && statsData.totalFavCount,
+      totalCarImpCount: statsData && statsData.totalCarImpCount,
+      photosLength: Array.isArray(photos) && photos.length,
+      hasExteriorPhotos: Array.isArray(exteriorPhotos) && exteriorPhotos.length > 0,
+      hasInteriorPhoto: !!interiorPhoto,
+      onSetFirstSlide: this.handleSetFirstSlide,
+      onOpenSliderModal: this.handleOpenSliderModal
+    };
+
+    return (
+      <div className={styles.sliderWrap}>
+        {isMobileOnly &&
+          <Title {...{ t, make, model, subModel, powerKW, powerPS, onCarFavorite, isFavorite }} />
+        }
+        <div className={styles.slider}>
+          {!photos[activeSlide]?.videoUrl && <PriceData {...priceProps} />}
+          <Slider ref={slider => { this.slider = slider; }} {...sliderProps}>
+            {this.getImages()}
+          </Slider>
+          {!photos[activeSlide]?.videoUrl ? (
+            isMobileOnly ? <MobileStats {...statsProps} /> : <Stats {...statsProps} />
+          ) : null}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default VehicleDetailedSlider;