@bytebrand/fe-ui-core-autobahn 1.0.0

package/compat/VehicleDetailedSlider/partials/PriceData.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import FormattedNumber from '../../FormattedNumber/FormattedNumber';
+import Badge from '../../Badge/Badge';
+
+import styles from './PriceData.styl';
+
+interface IProps {
+  t: (phrase: string, config?: any) => string;
+  showNewLabel: boolean;
+  historyPriceDifference: number;
+  historyPriceDifferencePerCent: number;
+  activeTab?: number;
+  showDownPayment: boolean;
+  financingFirstInstallment?: number | null;
+  leasingFirstInstallment?: number | null;
+}
+
+const MIN_PERCENT = 5;
+const MIN_PRICE_DIFFERENCE = 500;
+const EUR = `\u20AC`;
+
+const PriceData: React.FunctionComponent<IProps> = ({ t, showDownPayment, showNewLabel, historyPriceDifference, historyPriceDifferencePerCent, activeTab, financingFirstInstallment, leasingFirstInstallment }) => {
+  const [lsFinancingFirst, setLsFinancingFirst] = React.useState<number | undefined>(undefined);
+  const [lsLeasingFirst, setLsLeasingFirst] = React.useState<number | undefined>(undefined);
+
+  React.useEffect(() => {
+    const readFromStorage = () => {
+      const raw = localStorage.getItem('financing_store');
+      const parsed = raw ? JSON.parse(raw) : null;
+      const fin = parsed?.userCommonConfig?.financing?.firstInstallment;
+      const lea = parsed?.userCommonConfig?.leasing?.firstInstallment;
+      setLsFinancingFirst(fin);
+      setLsLeasingFirst(lea);
+    };
+
+    readFromStorage();
+    window.addEventListener('storage', readFromStorage);
+    return () => window.removeEventListener('storage', readFromStorage);
+  }, []);
+
+  const rawFirstInstallment = activeTab === 0 ? financingFirstInstallment : activeTab === 1 ? leasingFirstInstallment : null;
+  const firstInstallment = rawFirstInstallment ?? 0;
+  const lsActiveValue = activeTab === 0 ? lsFinancingFirst : activeTab === 1 ? lsLeasingFirst : undefined;
+  const showByLocalStorage = lsActiveValue === 0;
+  const showByBackend = showDownPayment && (activeTab === 0 || activeTab === 1) && firstInstallment === 0 && (lsActiveValue === undefined || lsActiveValue === null);
+  const showZeroDownPayment = showByLocalStorage || showByBackend;
+  return (
+    <div className={styles.topWrapper}>
+      {showNewLabel && <Badge type='blue' className={styles.new}>{t('slider.new')}</Badge>}
+      {!!historyPriceDifference && historyPriceDifference >= MIN_PRICE_DIFFERENCE && (
+        <Badge type='green' className={styles.priceDifference}>
+          <FormattedNumber value={historyPriceDifference} numbersAfterDot={0}/>
+          {` ${EUR} ${t('slider.save')}`}
+        </Badge>
+      )}
+      {showZeroDownPayment &&
+        <Badge type='lightBlue' className={styles.percentageOfFirstInstallment}>{`0${EUR} ${t('slider.firstInstallment')}`}</Badge>}
+      {historyPriceDifferencePerCent >= MIN_PERCENT && (
+        <Badge type='red' className={styles.priceDifferencePerCent}>
+          -{historyPriceDifferencePerCent}%
+        </Badge>
+      )}
+    </div>
+  );
+};
+
+export default PriceData;

package/compat/VehicleDetailedSlider/partials/Stats.styl

@@ -0,0 +1,80 @@
+@import '../../legacy-theme/mixins.styl';
+
+.statsContainer
+  background-color: rgba(255, 255, 255, 0.75);
+  border-radius: 4px;
+  display: flex
+  padding: 0 16px;
+  margin-right: 16px;
+
+.statsBlock
+  font-size: 12px
+  display: flex
+  color: #646464;
+  box-sizing: border-box
+  justify-content: space-between
+  align-items: center;
+  
+  & + &
+    margin-left: 20px;
+
+  &:before
+    content: '';
+    width: 28px;
+    height: 25px;
+    flex-shrink: 0;
+    margin-right: 9px;
+    display inline-flex;
+    background-repeat no-repeat;
+
+.customersLookingTheCar
+  margin-left: -10px;
+  &:before
+    background-image: url('../../../media/svg/common/star.svg');
+
+.saveCarAsFavorites
+  &:before
+    height: 15px;
+    background-image: url('../../../media/svg/common/eye.svg');
+
+.controls
+  display flex;
+  align-items: center
+  color: $grey-75;
+  font-weight bold
+  box-sizing: border-box
+  font-size: 20px
+  margin-right: 10px
+
+.controlsEl
+  position: relative
+  margin-left: 16px;
+  background-color: rgba(255, 255, 255, 0.75);
+  border-radius: 4px
+  height: 40px;
+  width: 66px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+.icon
+  fill: $grey-75
+  cursor pointer;
+
+.icon360
+  composes icon
+  width: 45px
+  height: auto
+  padding-top: 3px;
+
+.infoBlock
+  position: absolute
+  bottom: 0
+  left: 0
+  right: 0
+  padding: 16px 0 16px
+  display: flex
+  flex-wrap: wrap
+  height: 40px;
+  box-sizing: content-box;
+  justify-content: space-between

package/compat/VehicleDetailedSlider/partials/Stats.tsx

@@ -0,0 +1,62 @@
+import React, { FunctionComponent } from 'react';
+import IconSVG from '../../../iconsvg/IconSVG';
+import styles from './Stats.styl';
+import { SliderType } from '../../../types/types';
+
+interface IProps {
+  t: (phrase: string, config?: any) => string;
+  activeSlide: number;
+  hasExteriorPhotos: boolean;
+  hasInteriorPhoto: boolean;
+  photosLength: number;
+  totalFavCount: number;
+  totalCarImpCount: number;
+  onSetFirstSlide: () => void;
+  onOpenSliderModal?: (sliderType: SliderType) => void;
+}
+
+const Stats: FunctionComponent<IProps> = (props) => {
+  const {
+    t, activeSlide, hasExteriorPhotos, hasInteriorPhoto, photosLength, totalFavCount, totalCarImpCount,
+    // onSetFirstSlide,
+    onOpenSliderModal
+  } = props;
+  return (
+    <div className={styles.infoBlock}>
+      <div>
+        {!!photosLength && (
+          <div className={styles.controls}>
+            {/* <div className={`${styles.controlsEl} ${styles.isButton}`} onClick={onSetFirstSlide}>
+              &#60;&#60; {t('slider.firstPicture')}
+            </div> */}
+            <div className={styles.controlsEl}>
+              {activeSlide + 1} {`${photosLength > 0 ? `| ${photosLength}` : ''}`}
+            </div>
+            {(hasExteriorPhotos || hasInteriorPhoto) && (
+              <div className={styles.controlsEl} onClick={() => onOpenSliderModal(hasExteriorPhotos ? SliderType.EXTERIOR : SliderType.INTERIOR)}>
+                <IconSVG name='rotate360' className={styles.icon360} customDimensions/>
+              </div>
+            )}
+            <div className={styles.controlsEl} onClick={() => onOpenSliderModal(SliderType.DEFAULT)}>
+              <IconSVG name='fullscreenWindow' className={styles.icon} customDimensions/>
+            </div>
+          </div>
+        )}
+      </div>
+      {(totalCarImpCount > 0 || totalFavCount > 0) && <div className={styles.statsContainer}>
+        {totalCarImpCount > 0 && (
+          <div className={`${styles.statsBlock} ${styles.saveCarAsFavorites}`}>
+            <span>{t('slider.customersLookingTheCar', { count: totalCarImpCount })}</span>
+          </div>
+        )}
+        {totalFavCount > 0 && (
+          <div className={`${styles.statsBlock} ${styles.customersLookingTheCar}`}>
+            <span>{t('slider.saveCarAsFavorites', { count: totalFavCount })}</span>
+          </div>
+        )}
+      </div>}
+    </div>
+  );
+};
+
+export default Stats;

package/compat/VehicleDetailedSlider/partials/Title.styl

@@ -0,0 +1,45 @@
+@import '../../legacy-theme/mixins.styl';
+
+.titleSection
+  // color: $blue-10
+  text-transform uppercase
+  position relative
+  display flex
+  align-items: center;
+
+.titleOwerflow
+  +media-tablet-down()
+    truncate()
+    padding: 15px 15px 0
+    display: flex
+    flex-direction: column
+
+.makeModel
+  font-weight: bold
+  font-size: 16px
+  margin-right: 10px
+
+.otherParam
+  font-size: 12px;
+  text-transform none
+  overflow: hidden;
+  display: inline-block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-top: 3px;
+
+.userButton
+  cursor: pointer
+  margin-left: auto;
+
+.favorite
+  stroke: $skyBlue
+  font-size: 21px
+  margin-right: 15px;
+  flex-shrink: 0;
+
+.active
+  fill: $skyBlue
+
+  &:hover
+    stroke: $skyBlue

package/compat/VehicleDetailedSlider/partials/Title.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { getPowerLabel } from '../../../vehiclesProps/decoratedProps';
+import classnames from 'classnames';
+import IconSVG from '../../../iconsvg/IconSVG';
+import styles from './Title.styl';
+
+interface IProps {
+  make: string;
+  model: string;
+  subModel: string;
+  powerKW: number;
+  powerPS: number;
+  isFavorite: boolean;
+  onCarFavorite: (event: React.MouseEvent<HTMLElement>) => void;
+}
+
+const Title: React.FunctionComponent<IProps> = ({ make, model, subModel, powerKW, powerPS, onCarFavorite, isFavorite }) => {
+  const powerKWpowerPS = getPowerLabel(powerKW, powerPS);
+
+  return (
+    <div className={styles.titleSection}>
+      <div className={styles.titleOwerflow}>
+        <span className={styles.makeModel}>{make} {model}</span>
+        <span className={styles.otherParam}>{subModel} {powerKWpowerPS}</span>
+      </div>
+      <IconSVG
+        name='star'
+        className={classnames(styles.userButton, styles.favorite, { [styles.active]: isFavorite })}
+        onClick={(event: any) => onCarFavorite(event)}
+        customDimensions
+      />
+    </div>
+  );
+};
+
+export default Title;

package/compat/VehicleFormattedPrice/VehicleFormattedPrice.styl

@@ -0,0 +1,149 @@
+@import '../legacy-theme/mixins.styl'
+
+$color-price-default = $grey-3
+$color-price-line = $darkOrange
+$color-price-new = $lightGreen
+
+.container
+  position: relative
+  font-family: $font-style-arial
+  font-size: 12px
+
+.old
+  color: $grey-3;
+  font-size: 8px;
+  margin-bottom: 1px;
+
+  &::after
+    content: ''
+    position: absolute
+    top: 0
+    bottom: 0
+    left: 0
+    right: 0
+    background: linear-gradient(to bottom right, transparent calc(50% - 1px), $color-price-line, transparent calc(50% + 1px) )
+
+// styles for MS Edge
+_:-ms-lang(x), _:-webkit-full-screen, .old::after
+  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path stroke='#fd5a1c' stroke-width='2' d='M0 98 L96 0 L100 1 L1 100' fill='#fd5a1c' /></svg>")
+
+// styles for IE 11
+_:-ms-fullscreen, :root .old::after
+  background: linear-gradient(to bottom right, transparent 48%, $darkOrange , transparent 52% )
+
+.unit
+  position relative;
+  line-height: 1;
+
+.postfix
+  margin-left: 2px;
+  font-size: 65%;
+  line-height: 1;
+
+.price
+  display: inline-block
+
+.price.default
+  color: $color-price-default
+
+.price.new
+  color: $lightGreen
+  line-height: 1
+
+.price.disabled
+  color: rgba($lightGreen, 15%)
+
+.price.large
+  font-size: 32px
+  font-weight: 700
+
+.price.medium
+  font-size: 24px
+  font-weight: 700
+
+.price.semimedium
+  font-size: 20px
+  font-weight: 700
+
+.price.small
+  font-size: 16px
+  font-weight: 700
+  +media-phone-only()
+    font-size: 18px
+
+.price.large .decimals,
+.price.medium .decimals,
+.price.semimedium .decimals,
+.price.small .decimals,
+.price.large .unit,
+.price.medium .unit,
+.price.semimedium .unit,
+.price.small .unit
+  display: inline-block
+  position: relative
+  transform: translateY(-7px)
+  font-size: 9px
+
+.price.semimedium .decimals,
+.price.semimedium .unit
+  display: inline-block
+  position: relative
+  transform: translateY(-9px)
+  font-size: 8px
+
+.price.medium .decimals,
+.price.medium .unit
+  top: 3px
+
+.price.small .decimals,
+.price.small .unit
+  top: 2px
+
+.price.semimedium .decimals,
+.price.semimedium .unit,
+.price.semimedium .sub,
+  // top: 1px
+  font-weight: 400
+
+.price.semimedium .postfix,
+.old .postfix
+  position: absolute;
+  top: 0;
+  left: auto;
+
+.old .postfix
+  transform: translateX(7px);
+
+.price.large .decimals
+.price.large .unitMonthly
+  top: 4px
+
+.price.medium .decimals
+.price.medium .unitMonthly
+  top: 3px
+
+.price.small .decimals,
+.price.small .unitMonthly,
+.price.semimedium .decimals,
+.price.semimedium .unitMonthly
+  top: 2px
+
+.unitMonthly
+  display: flex
+  flex-direction: column
+  justify-content: space-between
+
+.monthly
+  width: auto
+  display: block
+
+.unitItem
+  display: block
+
+.price .sub
+  font-size: 9px;
+  display: inline-block;
+  position: relative;
+  bottom: 0;
+  left: -5px
+  vertical-align: baseline;

package/compat/VehicleFormattedPrice/VehicleFormattedPrice.tsx

@@ -0,0 +1,163 @@
+import React, { useEffect, useRef, useCallback } from 'react';
+import classnames from 'classnames';
+import FormattedNumber from '../FormattedNumber/FormattedNumber';
+import styles from './VehicleFormattedPrice.styl';
+
+export interface IVehiclePriceProps {
+  price: number;
+  unit?: string;
+  postfix?: string;
+  sub?: string;
+
+  className?: string;
+  unitClassName?: string;
+  postfixClassName?: string;
+  subClassName?: string;
+  monthlyClassName?: string;
+  unitWrapperClassName?: string;
+
+  monthly?: string;
+  isNew?: boolean;
+  isOld?: boolean;
+  // type: 'normal | old | new';
+  size?: 'small' | 'semimedium' | 'medium' | 'large';
+  disableStyles?: boolean;
+  disablePrice?: boolean;
+  dynamicFontSize?: string;
+
+  // FormattedNumber props
+  toRound?: boolean;
+  disableFormatting?: boolean;
+  numbersAfterDot?: number;
+  numberContainerClassName?: string;
+  afterCommaClassName?: string;
+  beforeCommaClassName?: string;
+}
+
+const VehicleFormattedPrice: React.FunctionComponent<IVehiclePriceProps> = (props) => {
+  const textRef = useRef(null);
+
+  const updateFontSize = useCallback(() => {
+    if (price && dynamicFontSize && textRef.current) {
+      const textWidth = textRef.current.getBoundingClientRect().width;
+      const priceLength = Math.round(price).toString().length;
+      if (textWidth > 110) {
+        if (dynamicFontSize === 'small') {
+          const newSize = Math.min(60, 165 / priceLength);
+          textRef.current.style.fontSize = `${newSize}px`;
+        } else {
+          const newSize = Math.min(60, (165 / priceLength) + 6);
+          textRef.current.style.fontSize = `${newSize}px`;
+        }
+
+      }
+    }
+  }, [props.price, props.dynamicFontSize]);
+
+  useEffect(() => {
+    updateFontSize();
+  }, [updateFontSize]);
+
+  function renderUnit(): React.ReactNode {
+    const { postfix, unit, unitClassName } = props;
+    return (
+      <span className={classnames(styles.unit, unitClassName)}>
+        &nbsp;{unit}
+        {postfix ? renderPostfix() : ''}
+      </span>);
+  }
+
+  function renderUnitMonthly(): React.ReactNode {
+    const { unit, unitClassName, monthly, monthlyClassName, unitWrapperClassName } = props;
+
+    const unitMonthlyClasses = classnames(
+      styles.unitMonthly,
+      unitClassName
+    );
+
+    return (
+      <span className={unitMonthlyClasses}>
+        <span className={classnames(styles.unitItem, unitWrapperClassName)}>
+          &nbsp;{unit}
+        </span>
+        <span className={classnames(styles.monthly, monthlyClassName)}>
+          &nbsp;{`/${monthly}`}
+        </span>
+      </span>
+    );
+  }
+
+  function renderPostfix(): React.ReactNode {
+    const { postfix, postfixClassName } = props;
+    return (<sup className={classnames(styles.postfix, postfixClassName)}>{postfix}</sup>);
+  }
+
+  function renderSub(): React.ReactNode {
+    const { sub, subClassName } = props;
+    return (<sub className={classnames(styles.sub, subClassName)}>{sub}</sub>);
+  }
+
+  const { className, price, /*type,*/ isNew, isOld, size, disableStyles, monthly } = props;
+
+  // FormattedNumber props
+  const {
+    unit, sub, numbersAfterDot, toRound, numberContainerClassName,
+    afterCommaClassName, beforeCommaClassName, disableFormatting, disablePrice, dynamicFontSize
+  } = props;
+
+  const decimalsClass = classnames(afterCommaClassName, styles.decimals);
+  const containerStyles = classnames(styles.price, styles[size]);
+  const containerClass = classnames(className, styles.container, {
+    [styles.new]: isNew,
+    [styles.old]: isOld,
+    [containerStyles]: !disableStyles,
+    [styles.disabled]: disablePrice
+  });
+
+  const formattedNumberProps = {
+    disableFormatting,
+    numbersAfterDot,
+    toRound,
+    dynamicFontSize,
+    beforeCommaClassName,
+    value: price,
+    className: numberContainerClassName,
+    afterCommaClassName: decimalsClass
+  };
+
+  return (
+    <span className={containerClass} ref={textRef}>
+      {<FormattedNumber {...formattedNumberProps} />}
+      {(unit && !monthly) && renderUnit()}
+      {(monthly && unit) && renderUnitMonthly()}
+      {sub && renderSub()}
+    </span>
+  );
+};
+
+VehicleFormattedPrice.defaultProps = {
+  unit: '€', // put empty string if you don't need unit
+  postfix: '', // postfix value
+
+  isNew: false,
+  isOld: false,
+  // type: 'normal', // normal || old || new
+  size: 'medium', // small || medium || large
+  disableStyles: false, // if you need provide your custom styles put true
+
+  // classes
+  className: '',
+  unitClassName: '',
+  postfixClassName: '',
+  subClassName: '',
+  dynamicFontSize: '',
+  sub: '',
+  // FormattedNumber props
+  toRound: false,
+  numbersAfterDot: 2,
+  numberContainerClassName: '',
+  afterCommaClassName: '',
+  beforeCommaClassName: ''
+};
+
+export default VehicleFormattedPrice;

package/compat/VehicleSlider/VehicleSlider.styl

@@ -0,0 +1,63 @@
+@import '../legacy-theme/mixins.styl';
+
+.imageContainer
+  position: relative;
+.spinner
+  position: absolute
+  top: calc(50% - 30px)
+  left: calc(50% - 30px)
+.wrapper
+  position: relative
+  :global
+    .slick-slider
+      overflow: hidden
+      position relative
+      height 0
+      padding-top 75%
+      width 100%
+
+      .slick-list
+        position absolute
+        top 0
+        left 0
+        right 0
+        bottom 0
+
+      .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
+      .slick-arrow::before
+        display: none
+
+      .slick-arrow::after
+        position: absolute
+        content: ''
+        display: inline-block
+        top: 50%
+        width: inherit
+        height: inherit
+        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
+
+      .slick-next
+        right: 0
+
+.photo
+  background-color: white