@bytebrand/fe-ui-core-autobahn 1.0.0

package/compat/VehicleSlider/VehicleSlider.tsx

@@ -0,0 +1,125 @@
+import * as React from 'react';
+import classnames from 'classnames';
+import LazyLoad from 'react-lazyload';
+import Slider from 'react-slick';
+
+import Image from '../Image/Image';
+import Loader from '../Loader/Loader';
+import { PLACEHOLDER_IMAGE } from '../../constants/common';
+import { IVehicleSliderProps, ICarImage } from '../../types/types';
+import styles from './VehicleSlider.styl';
+
+class VehicleSlider extends React.Component<IVehicleSliderProps, {}> {
+  static readonly defaultProps: IVehicleSliderProps = {
+    autoplay: false,
+    speed: 300,
+    infinite: true,
+    dots: false,
+    accessibility: false,
+    draggable: true,
+    lazyLoad: 'ondemand',
+    slidesToShow: 1,
+    rows: 1,
+    images: [] as ICarImage[],
+    arrowsSize: 'md',
+    imageSize: 'small',
+    onFirstChange: () => { },
+    onSlideChange: () => { }
+  };
+
+  private isSliderChanged = false;
+  slider: React.RefObject<any> = React.createRef();
+
+  onBeforeChange = (currentSlide: number, nextSlide: number) => {
+    const { onFirstChange, beforeChange } = this.props;
+    const imagesLoadingDelay = 4000;
+
+    if (typeof beforeChange === 'function') {
+      beforeChange(currentSlide, nextSlide);
+    }
+
+    if (!this.isSliderChanged && typeof onFirstChange === 'function') {
+      this.isSliderChanged = true;
+      onFirstChange();
+
+      setTimeout(() => {
+        const images = this.props.images;
+
+        if (!images || !Array.isArray(images) || images.length <= 1) {
+          this.isSliderChanged = false;
+          this.slider.current.slickGoTo(0);
+        }
+      }, imagesLoadingDelay); // tslint:disable-line
+
+      return;
+    }
+  };
+
+  renderImages = () => {
+    const { images, mainImageUrl, imagesCount, imageSize } = this.props;
+    const ratio = { ratioW: 4, ratioH: 3 };
+    const lazyLoadProps = {
+      once: true,
+      offset: 500
+    };
+
+    if (Array.isArray(images) && images.length) {
+      return this.props.images.map((image: ICarImage, key: number) => (
+        <LazyLoad key={key} {...lazyLoadProps}>
+          <Image src={image.url} withAnimation={false} width='100%' {...ratio} />
+        </LazyLoad>
+      ));
+    }
+
+    if (mainImageUrl) {
+      const mainImage = (
+        <LazyLoad key='slider_image' {...lazyLoadProps}>
+          <Image
+            className={styles.photo}
+            src={mainImageUrl}
+            withAnimation={false}
+            width='100%'
+            {...ratio}
+          />
+        </LazyLoad>
+      );
+      const spinner = <Loader className={styles.spinner} size='medium' key='slider_loader' />;
+
+      return (imagesCount === 1) ? mainImage : [mainImage, spinner];
+    }
+
+    return (
+      <LazyLoad key='placeholder_slider_image' {...lazyLoadProps}>
+        <Image
+          className={styles.photo}
+          src={`${PLACEHOLDER_IMAGE}${imageSize}`}
+          withAnimation={false}
+          width='100%'
+          {...ratio}
+        />
+      </LazyLoad>
+    );
+  };
+
+  render() {
+    const { images, arrowsSize, onFirstChange, wrapperClassName, ...settings } = this.props;
+
+    const className = classnames(styles.wrapper, styles[arrowsSize], wrapperClassName);
+
+    const sliderProps = {
+      ...settings,
+      ref: this.slider,
+      beforeChange: this.onBeforeChange,
+      afterChange: typeof this.props.afterChange === 'function'
+        ? this.props.afterChange : this.props.onSlideChange
+    };
+
+    return (
+      <div className={className}>
+        <Slider {...sliderProps} lazyLoad='ondemand'>{this.renderImages()}</Slider>
+      </div>
+    );
+  }
+}
+
+export default VehicleSlider;

package/compat/VehicleSlider/VehicleSliderForSRL.tsx

@@ -0,0 +1,175 @@
+import * as React from 'react';
+import Slider from 'react-slick';
+import classnames from 'classnames';
+import _isLength from 'lodash/isLength';
+import Image from '../Image/Image';
+import Loader from '../Loader/Loader';
+import LazyLoad from 'react-lazyload';
+
+import { PLACEHOLDER_IMAGE } from '../../constants/common';
+import { preloadNearbyImages } from '../../utils/CommonUtils';
+import { IVehicleSliderForSRLProps } from '../../types/types';
+import styles from './VehicleSlider.styl';
+
+const SlickButtonFix: React.FC = ({ currentSlide, slideCount, children, ...props }: any) => (
+  <div {...props} tabIndex={-1}>{children}</div>
+);
+
+const VehicleSliderForSRL: React.FC<IVehicleSliderForSRLProps> = ({
+  id,
+  src,
+  className,
+  images,
+  imagesCount,
+  imageSize,
+  mainImageId,
+  getCarImagesData,
+  type,
+  isAlternative,
+  typeAlternative,
+  isReferenceSearch,
+  CircularProgressbar,
+  onSlideChange
+}: IVehicleSliderForSRLProps) => {
+  const [noImagesLoaded, setNoImagesLoaded] = React.useState<boolean>(false);
+  const [activeSlide, setActiveSlide] = React.useState<number>(0);
+  const [entered, setEntered] = React.useState(false);
+
+  const beforeChange = () => {
+
+    const isMyVehicle: boolean = type === 'myVehicle';
+
+    if (_isLength(images)) return false;
+    getCarImagesData(id, true, isMyVehicle, type, typeAlternative).then((data) => {
+      // a case when all images are in_postprocessing
+
+      if (!data || data.length === 0) {
+        setNoImagesLoaded(true);
+      }
+
+      preloadNearbyImages(data, activeSlide, 'imageUrlSmall');
+    });
+  };
+
+  const handleMouseEnter = () => {
+    if (!entered) {
+      setEntered(true);
+      beforeChange();
+    }
+  };
+
+  const onHandleSlideChange = (index: number): void => {
+    setActiveSlide(index);
+    onSlideChange(index);
+    preloadNearbyImages(images, index, 'imageUrlSmall');
+  };
+
+  const renderSliderImages = () => {
+
+    const imageProps = {
+      isAlternative,
+      ratioW: 4,
+      ratioH: 3,
+      width: '100%',
+      className: styles.photo,
+      withAnimation: false
+    };
+
+    const lazyLoadProps = {
+      once: true,
+      offset: 500
+    };
+
+    const imagesCache: string[] = [];
+    const currentSlide = activeSlide;
+    const prevSlide = (activeSlide - 1 % imagesCount + imagesCount) % imagesCount;
+    const nextSlide = (activeSlide + 1 % imagesCount + imagesCount) % imagesCount;
+
+    if (images.length) {
+      return images.map((image: any, index: number) => {
+        const showImage = index === currentSlide || index === prevSlide || index === nextSlide || imagesCache[index] !== undefined;
+
+        imagesCache[currentSlide] = image.imageUrlSmall;
+        imagesCache[prevSlide] = image.imageUrlSmall;
+        imagesCache[nextSlide] = image.imageUrlSmall;
+
+        return (
+          showImage ? (
+            <LazyLoad {...lazyLoadProps} key={image.imageUrl}>
+              <Image src={image.imageUrlSmall} {...imageProps} />
+            </LazyLoad>
+            ) : <div key={image.imageUrl} />
+        );
+      });
+    }
+
+    if (mainImageId && !!imagesCount) {
+      const mainImage = (
+        <LazyLoad {...lazyLoadProps} key={id}>
+          <Image src={src} {...imageProps} />
+        </LazyLoad>
+      );
+      const spinner = !noImagesLoaded ? (
+        <div className={styles.spinnerWrap} key='spinnerWrap'>
+          <Loader className={styles.spinner} size='medium' key='small_slider_loader' />
+        </div>
+      ) : null;
+
+      return (imagesCount === 1) ? mainImage : [mainImage, spinner];
+    }
+
+    return (
+      <LazyLoad {...lazyLoadProps}>
+        <Image src={`${PLACEHOLDER_IMAGE}${imageSize}`} key={id} {...imageProps} />
+      </LazyLoad>
+    );
+  };
+
+  const renderSlider = () => {
+    const settings = {
+      beforeChange,
+      autoPlay: false,
+      speed: 300,
+      infinite: true,
+      dots: false,
+      className: styles.slider,
+      accessibility: false,
+      draggable: true,
+      nextArrow: <SlickButtonFix />,
+      prevArrow: <SlickButtonFix />,
+      swipeToSlide: true,
+      focusOnSelect: true,
+      afterChange: onHandleSlideChange,
+      key: `${noImagesLoaded}`
+    };
+
+    return (
+      <div className={styles.wrapper} onMouseEnter={handleMouseEnter}>
+        <Slider {...settings} >{renderSliderImages()}</Slider>
+      </div>
+    );
+  };
+
+  const containerClassName = classnames(styles.imageContainer, className, {
+    [styles[type]]: !!type
+  });
+
+  return (
+    <div className={containerClassName}>
+      {isReferenceSearch && <CircularProgressbar />}
+      {images ? renderSlider() : false}
+    </div>
+  );
+};
+
+VehicleSliderForSRL.defaultProps = {
+  mainImageId: '',
+  imagesCount: 0,
+  imageSize: 'small',
+  isAlternative: false,
+  typeAlternative: '',
+  images: [],
+  getCarImagesData: () => null
+};
+
+export default VehicleSliderForSRL;

package/compat/VehicleSmallCard/SeoText/SeoText.styl

@@ -0,0 +1,8 @@
+@import '../../legacy-theme/theme.styl';
+
+.wrapper
+  font-size: 10px
+  color: $grey-a3
+  max-height: 66px;
+  overflow: hidden;
+  height: 100vh;

package/compat/VehicleSmallCard/SeoText/SeoText.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import styles from './SeoText.styl';
+
+interface ISeoTextProps {
+  seoText: string;
+}
+
+const SeoText: React.FC<ISeoTextProps> = ({ seoText }) => {
+  return (
+    <div className={styles.wrapper}>
+      {seoText}
+    </div>
+  );
+};
+
+export default SeoText;

package/compat/VehicleSmallCard/VehicleData/VechiclePriceItem/VechiclePriceItem.styl

@@ -0,0 +1,204 @@
+@import '../../../legacy-theme/mixins.styl'
+
+.priceItem
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  position relative
+  flex-shrink: 0;
+  height: 46px;
+  box-sizing: border-box;
+
+  &.priceItemSearch
+    height: 44px;
+    +media-tablet-landscape-up()
+      height: 51px;
+    &.priceItemBuy
+      border-top: none;
+      border-bottom: 1px solid rgba(76, 78, 100, 0.12);
+      +media-tablet-landscape-up()
+        border: none;
+
+  &.priceItemFavorite
+    height: 44px;
+    +media-tablet-landscape-up()
+      height: 46px;
+      &.priceItemBuy
+        height: 52px;
+
+  &.priceItemRecently
+    height: 44px;
+
+    &.priceItemBuy
+      border-bottom: 1px solid rgba(76, 78, 100, 0.12);
+
+  &.priceItemComparable
+    &.priceItemBuy
+      border-bottom: 1px solid rgba(76, 78, 100, 0.12);
+    +media-tablet-landscape-up()
+      height: 38px;
+      [class*='semimedium__']
+        font-size: 16px;
+
+  &:nth-of-type(3), &:last-of-type
+    .tooltipWrap
+      &__block
+        top: auto;
+        bottom: calc(100% + 3px);
+        &::before, &::after
+          bottom: auto;
+          top: 100%;
+          transform: rotate(180deg);
+        &::after
+          transform: rotate(180deg) translateX(3px);
+
+.priceItemBuy
+  border-top: 1px solid rgba(76, 78, 100, 0.12);
+
+.priceItemCategory
+  font-size: 12px
+  color: rgba(76, 78, 100, 0.87);
+  box-sizing: border-box
+  padding 3px 0;
+  cursor pointer;
+  text-decoration none;
+  margin-right: 2px
+  flex-shrink: 0;
+  position relative;
+
+  &.priceItemCategoryComparable
+    +media-tablet-landscape-up()
+      font-size: 9px;
+
+  &.priceItemCategoryLanding,
+  &.priceItemCategoryMain
+    +media-tablet-landscape-up()
+      font-size: 10px;
+
+  & > span:hover
+    background: rgba(196, 196, 196, 0.6);
+
+  +media-tablet-landscape-up()
+    font-size: 13px
+
+.priceItemDisable
+  pointer-events: none;
+  .priceItemCategory
+    color: $grey-9;
+
+  .priceNewBlock
+    background-color $grey-9;
+
+.noPrice
+  color: $grey-9;
+  font-size: 11px;
+  padding-right: 7px;
+
+.priceItemPrice
+  margin-left: auto;
+  display flex
+  flex-shrink: 0;
+  flex-direction: column;
+  text-decoration none;
+  justify-content: center;
+  align-items: flex-end;
+  color: inherit;
+  padding-right: 5px;
+
+.oldPriceWrap
+  display: flex;
+  font-size: 10px;
+  align-items: center;
+  width: 100%;
+  justify-content: space-between;
+
+.prefixOldPrice
+  margin: 0 8px;
+  color: rgba(51, 51, 51, 0.83);
+
+.oldPrice
+  margin-left: auto;
+  & > span:last-of-type
+    font-size: 8px;
+    transform: translateY(-2px);
+    display: inline-flex;
+
+.priceMtl
+  &.priceMtlActive
+    transform: translateX(6px);
+
+// ADV-70: monthly label rendered before the rate (small, top-left of the number).
+.priceCurrentWrap
+  display: inline-flex
+  align-items: flex-start
+
+.priceMtlPrefix
+  font-size: 10px
+  line-height: 1.2
+  margin-right: 3px
+  color: rgba(76, 78, 100, 0.6)
+  align-self: flex-start
+  white-space: nowrap
+
+// ADV-88 (Marco): the monthly "mtl."/"mth." label sits INLINE to the LEFT of the rate (top-
+// aligned), not stacked above. NOTE: on the narrowest 4-up landing/main card (~256px) the
+// inline label can graze the card edge at full font; the wide comparable/CDP card fits with
+// room. (Marco asked to keep the rate/category fonts untouched — only the label moved.)
+.priceItemComparable
+  .priceCurrentWrap
+    flex-direction: row
+    align-items: flex-start
+  .priceMtlPrefix
+    font-size: 8px
+    line-height: 1
+    margin-right: 2px
+    align-self: flex-start
+
+// landing (/angebot): on desktop the cards are a narrow 4-up grid where the inline label would
+// overflow the price column — stack "mtl."/"mth." above the rate there (mobile stays inline above).
+.priceItemLanding
+  +media-tablet-landscape-up()
+    .priceCurrentWrap
+      flex-direction: column
+      align-items: flex-end
+    .priceMtlPrefix
+      margin-right: 0
+
+.priceNewBlock
+  flex-shrink: 0;
+  width: 18px
+  margin-left: 15px;
+  margin-right: 5px;
+  background-color $lightGreen;
+  border-radius: 2px
+  box-sizing: border-box
+  font-weight: bold;
+  height: 11px
+  line-height: 11px;
+  text-transform uppercase
+  font-size: 7px
+  letter-spacing: -0.1px;
+  text-align: center
+  color: #fff;
+
+  +media-phone-up()
+    margin-left: 10px;
+
+.priceAfterComma
+  font-size: 16px !important
+  transform: none !important;
+  position static !important;
+
+.aboPartnerIcon
+  margin-left: 5px;
+  margin-right: 5px;
+  max-width: 10px;
+
+.isAlternativeText
+  position: absolute;
+  font-size: 8px;
+  bottom: 5px;
+
+.tooltipWrapFavorites
+  transform: translateY(0px);
+  margin-left: 5px;