@bytebrand/fe-ui-core-autobahn 1.0.0

package/compat/VehicleDetailedSlider/VehicleDetailedSlider.styl

@@ -0,0 +1,147 @@
+@import '../legacy-theme/mixins.styl';
+
+.sliderWrap
+  borderRadius()
+  grid-area: slider
+  background-color: #fff;
+
+.slider
+  position: relative
+
+  :global
+    .slick-slider
+      overflow: hidden
+
+      .slick-arrow,
+      .slick-arrow:focus,
+      .slick-arrow:hover
+        display: inline-block
+        width: 25px
+        height: 50px
+        z-index: 1
+        transition: all 0.2s ease-in-out
+
+        +media-phone-up()
+          width: 25px
+          height: 50px
+
+      .slick-arrow::before
+        display: none
+
+      .click-arrow::before:hover
+        background-color: black
+
+      .slick-arrow::after
+        position: absolute
+        content: ''
+        display: inline-block
+        width: inherit
+        height: inherit
+        top: 50%
+        transform: translateY(-50%)
+        transform-origin: top center
+        background-image: url('../../media/images/slider-arrow-new.svg')
+        background-size: cover
+
+      .slick-next::after
+        left: 0
+
+      .slick-prev::after
+        transform: rotate(180deg) translateY(-50%)
+        right: 0
+
+      .slick-prev
+        left: 0
+
+        +media-phone-up()
+          left: 0
+          left: 10px
+
+      .slick-next
+        right: 0
+        +media-phone-up()
+          right: 10px
+
+.sliderModal
+  padding: 0 !important
+  margin: 0 !important
+  background: none !important
+  display: flex !important
+  align-items: center
+  justify-content: center
+  align-self: center
+  flex-direction: column
+  width: 100%
+  box-shadow: none !important
+
+  +media-tablet-landscape-down()
+    +media-landscape()
+      height: 100% !important
+
+.overlayModal
+  background-color: $grey-7 !important
+  display: flex
+  justify-content: center
+
+.photo
+  display: block !important
+  width: 100%
+  position: relative
+
+.noPhoto
+  display: block !important
+  width: 100%
+  padding-bottom 75%
+  position: relative
+  background-color: white
+
+.image
+  background-color: white
+
+.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/compat/VehicleDetailedSlider/VehicleDetailedSlider.tsx

@@ -0,0 +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;

package/compat/VehicleDetailedSlider/partials/MobileStast.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+
+import IconSVG from '../../../iconsvg/IconSVG';
+import styles from './MobileStats.styl';
+import { SliderType } from '../../../types/types';
+
+interface IProps {
+  activeSlide: number;
+  hasExteriorPhotos: boolean;
+  hasInteriorPhoto: boolean;
+  photosLength: number;
+  totalFavCount: number;
+  totalCarImpCount: number;
+  onOpenSliderModal: (sliderType: SliderType) => void;
+}
+
+const MobileStats: React.FunctionComponent<IProps> = (props) => {
+  const { activeSlide, hasExteriorPhotos, hasInteriorPhoto, photosLength, totalFavCount, totalCarImpCount, onOpenSliderModal } = props;
+  return (
+    <div className={styles.mobileStatsBlock}>
+      {!!photosLength && (
+        <div className={styles.mobileStatsItem}>
+          <div className={styles.mobileStatsEl}>
+            {activeSlide + 1} {`${photosLength > 0 ? `| ${photosLength}` : ''}`}
+          </div>
+          {(hasExteriorPhotos || hasInteriorPhoto) && (
+            <div className={styles.mobileStatsEl}>
+              <IconSVG
+                customDimensions
+                name='rotate360'
+                className={styles.icon360}
+                onClick={() => onOpenSliderModal(hasExteriorPhotos ? SliderType.EXTERIOR : SliderType.INTERIOR)}
+              />
+            </div>
+          )}
+          <div className={styles.mobileStatsEl} onClick={() => onOpenSliderModal(SliderType.DEFAULT)}>
+            <IconSVG name='fullscreenWindow' className={styles.icon} customDimensions/>
+          </div>
+        </div>
+      )}
+      {(totalCarImpCount || totalFavCount) && (
+        <div className={styles.mobileStatsEl}>
+          {totalCarImpCount > 0 && (
+            <>
+              <IconSVG name='sliderEye' customDimensions className={styles.eyeIcon}/>
+              <span className={styles.mobileStatsText}>{totalCarImpCount}</span>
+            </>
+          )}
+          {totalFavCount > 0 && (
+            <>
+              <IconSVG name='starNew' customDimensions className={styles.starIcon}/>
+              <span className={styles.mobileStatsText}>{totalFavCount}</span>
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MobileStats;

package/compat/VehicleDetailedSlider/partials/MobileStats.styl

@@ -0,0 +1,71 @@
+@import '../../legacy-theme/mixins.styl';
+
+.icon
+  fill: rgba($grey-3, 0.8)
+  stroke: #fff !important
+  width: 20px
+  height: 20px
+  padding-top: 2px;
+
+.icon360
+  composes icon
+  width: 37px
+  height: auto
+ 
+
+.mobileStatsBlock
+  display: flex
+  justify-content: space-between
+  position: absolute
+  bottom: 0
+  padding: 10px 15px
+  box-sizing: border-box
+  width: 100%
+  font-size: 12px
+  align-items: center
+
+.mobileStatsItem
+  display: flex
+  align-items: center
+
+.mobileStatsEl
+  display: flex
+  justify-content: center
+  align-items: center
+  background-color: rgba(255, 255, 255, 0.75);
+  border-radius: 3px
+  padding: 0 4px;
+  height: 24px;
+  color: rgba($grey-3, .80);
+
+  & + &
+    margin-left: 7px
+
+.mobileStatsText
+  padding-left: 5px
+
+.starIcon
+  font-size: 21px;
+  margin-left: 10px
+  position: relative
+  bottom: 1px
+  fill: rgba(51, 51, 51, 0.8);
+
+.eyeIcon
+  font-size: 17px;
+
+.favorite
+  stroke: $skyBlue
+  fill: white
+  stroke-width: 4px
+  font-size: 20px
+  margin-left: 10px
+  margin-right: 10px
+  cursor: pointer
+
+  &:hover
+    stroke: $grey-1
+
+.favoriteActive
+  fill: $skyBlue
+  stroke: white

package/compat/VehicleDetailedSlider/partials/PriceData.styl

@@ -0,0 +1,51 @@
+@import '../../legacy-theme/mixins.styl';
+
+.topWrapper
+  position: absolute
+  left: 16px
+  right: 16px
+  top: 16px
+  user-select: none
+  z-index: 1
+  font-size: 20px
+  font-weight: bold
+  line-height: 50px
+
+  +media-phone-only()
+    left: 15px
+    right: 15px
+    top: 6px
+
+  +media-tablet-landscape-down()
+    font-size: 16px
+    line-height: 24px;
+
+.priceDifference
+  color: white
+  padding: 0 15px
+  float: left
+  border-radius: 33px
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 50px;
+  height: auto
+
+  +media-tablet-landscape-down()
+    padding: 0 10px
+    border-radius: 16px
+    line-height: 24px
+    font-size: 13px
+
+.priceDifferencePerCent
+  @extend .priceDifference
+  float: right
+  position: relative
+  z-index: 1
+
+.new
+  @extend .priceDifference
+  margin-right: 12px
+  
+.percentageOfFirstInstallment
+  @extend .priceDifference
+  margin-left: 12px