@bytebrand/fe-ui-core-autobahn 1.0.0

package/compat/legacy-theme/theme.styl

@@ -0,0 +1,136 @@
+/*** FONTS VARIABLES START ***/
+// font styles
+$font-style-arial = Arial, Helvetica, sans-serif
+$font-style-arial-black = "Arial Black", Gadget, sans-serif
+
+$font-weight-default = 400
+$font-size-default = 12px
+
+// font sizes
+$font-size-paragraph = $font-size-default
+$font-size-h6 = 14px
+$font-size-h5 = 16px
+$font-size-h4 = 18px
+$font-size-h3 = 20px
+$font-size-h2 = 22px
+$font-size-h1 = 24px
+
+// font weight
+$font-weight-thin    = 300
+$font-weight-normal  = $font-weight-default
+$font-weight-medium  = 500
+$font-weight-bold    = 600
+$font-weight-bolder  = 800
+/*** FONT VARIABLES END ***/
+
+
+// Color scheme
+$grey-1  = #1F1F1F
+$grey-1e = #1E1E1E
+$grey-3  = #333333
+$grey-32 = #323232
+$grey-3a = #3A3A3A
+$grey-6  = #666666
+$grey-7  = #797979
+$grey-70 = #707070
+$grey-74 = #747474
+$grey-75 = #757575
+$grey-9  = #999999
+$grey-b  = #B0B0B0
+$grey-c  = #CCCCCC
+$grey-d  = #D7D7D7
+$grey-d3 = #D3D3D3
+$grey-e  = #E8E8E8
+$grey-f2 = #F2F2F2
+$grey-f5 = #F5F5F5
+$grey-f8 = #F8F8F8
+$grey-52 = #525252
+$grey-54 = #545454
+$grey-e3 = #e3e3e3
+$grey-e9 = #E9E9E9
+$grey-ef = #efefef
+$grey-ae = #aeaeae
+$grey-d3 = #d3d3d3
+$grey-a3 = #a3a3a3
+$grey-74 = #747474
+$grey-75 = #757575
+$grey-a7 = #a7a7a7
+
+// used mostly for borders and dividers
+$grey-trans   = rgba($grey-d, 0.5)
+
+$skyBlue      = #005CCB
+$blue-10      = #104EC9
+$darkBlue     = #37508f
+$spaceGrey    = #60605F
+
+$primary      = $skyBlue
+$primary70    = rgba($primary, 70%)
+$primary40    = rgba($primary, 40%)
+$primary15    = rgba($primary, 15%)
+$primary8    = rgba($primary, 8%)
+
+$secondary    = $spaceGrey
+$secondary70  = rgba($spaceGrey, 70%)
+$secondary40  = rgba($spaceGrey, 40%)
+$secondary15  = rgba($spaceGrey, 15%)
+
+$blue-eaeef4  = #EAEEF4
+
+$alternative = #00B800
+
+$lightBlue    = #9DA9CC
+$primaryLight = $lightBlue
+$grayBlue     = #C2CEE1
+
+$carrotOrange = #E89F1F
+$yellow       = #CDDC39
+$red          = red
+$darkRed      = #C80000
+$fireRed      = #F50B05
+$orangeText   = #FFCE00
+$orange-fd    = #FD5A1C
+$darkOrange   = #ff0b00
+$white        = #ffffff  
+
+$aqua         = #336666
+$green        = green
+$grassGreen   = #4CAF50
+$wasabiGreen  = #6D9636
+$mantisGreen  = #91C153
+$lightGreen   = #00B800
+$green-2      = #257A05
+
+$yellow-f1    = #F1C40A
+$yellow-ff    = #FFDF4D
+
+$paleViolet   = #DBE1EA
+
+$black        = #000000
+$black30      = rgba($black, 38%)
+$black38      = rgba($black, 38%)
+$black50      = rgba($black, 50%)
+$black60      = rgba($black, 60%)
+$black80      = rgba($black, 87%)
+
+// Z-index master list
+//
+$zIndex-icon           = 99
+$zIndex-dropdown       = 111
+$zIndex-sticky         = 222
+$zIndex-fixed          = 333
+$zIndex-modal-backdrop = 444
+$zIndex-modal          = 555
+$zIndex-popover        = 666
+$zIndex-tooltip        = 777
+
+// media breakpoints
+// with idea of mobile first
+// i.e @media screen and (min-width: $tablet)
+$phoneMax           = 576px
+$tablet             = 768px
+$phoneMaxLandscape  = 992px
+$tabletLandscape    = 992px
+$desktop            = 1200px
+$desktopBig         = 1800px
+$smStart            = 575px

package/compat/withLabel/withLabel.styl

@@ -0,0 +1,33 @@
+@import '../legacy-theme/theme.styl'
+
+.wrapper
+  position: relative
+  border: 1px solid $mantisGreen
+  box-sizing: border-box
+  overflow: hidden
+.wrapper::after
+  content: ''
+
+.label
+  position: absolute
+  top: -32px
+  left: -32px
+  z-index: $zIndex-dropdown
+  display: flex
+  justify-content: center
+  align-items: flex-end
+  box-sizing: border-box
+  width: 65px
+  height: 65px
+  padding-bottom: 5px
+  transform: rotate(-45deg)
+  color: white
+  background-color: $mantisGreen
+  text-transform uppercase
+  font-family: $font-style-arial
+  font-weight: bold
+  font-size: 12px
+
+
+
+

package/compat/withLabel/withLabel.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import classnames from 'classnames';
+
+import styles from './withLabel.styl';
+
+export interface IWithLabelProps {
+  labelVisible?: boolean;
+  labelText?: string;
+
+  labelWrapperClassName?: string;
+  labelClassName?: string;
+  [key: string]: any;
+}
+
+// TODO: Correct types from WrappedComponent
+// TODO: Correct default props for WrappedComponent
+
+// This component adds TOP label(left-top corner) and green border.
+// But actual purpose of this components should be
+// adding the labels over the Image and ImageSlider with price quality texts,
+// with vehicle condition texts
+
+// TODO: Re-work component to fit requirements described above.
+export default function withLabel(WrappedComponent: any) {
+  const WithLabel: React.FunctionComponent<IWithLabelProps> = (props) => {
+    const { labelVisible, labelText, labelWrapperClassName, labelClassName, ...rest } = props;
+
+    if (!labelVisible) return <WrappedComponent {...rest} />;
+
+    return (
+      <div className={classnames(styles.wrapper, labelWrapperClassName)}>
+        <strong className={classnames(styles.label, labelClassName)}>{labelText}</strong>
+        <WrappedComponent {...rest} />
+      </div>
+    );
+  };
+
+  WithLabel.defaultProps = {
+    visible: true,
+    labelText: 'top'
+  };
+
+  return WithLabel;
+}

package/compat/withStats/withStats.styl

@@ -0,0 +1,174 @@
+@import '../legacy-theme/mixins.styl'
+
+$xs-height = 24px
+$sm-height = 30px
+$md-height = 34px
+$indent = 10px
+
+.wrapper
+  position: relative
+
+.controls
+  position: absolute
+  right: 0
+  bottom: $indent;
+  width: 100%
+  display: flex
+  flex-wrap: wrap
+  justify-content: flex-start
+  font-size: $font-size-default
+  padding: 0 16px
+  box-sizing: border-box;
+  gap: 0.6em;
+  user-select: none;
+
+  +media-tablet-landscape-up()
+    padding: 0 6px
+
+  &::after
+    position: absolute;
+    width: calc(100% - 20px);
+    height: 1px;
+    left: 10px;
+    bottom: -10px;
+    background-color: rgba(76,78,100,0.12);
+
+.section
+  background-color: rgba(255, 255, 255, 0.75);
+  border-radius: 2px
+  display: flex
+  line-height: 1;
+  align-items: center
+  justify-content: space-around;
+  height: inherit;
+
+  &:last-of-type
+    margin-left: auto
+
+.starButton
+  cursor: pointer
+  fill: white
+  margin-right: .6em
+  flex-shrink: 0
+  margin-bottom: $indent
+  z-index: 1
+  path
+    stroke: $skyBlue
+  &.starButtonFavored
+    fill: $skyBlue
+    path
+      stroke: white
+
+.statsViewsCount
+.statsFavoritesCount
+  display: flex
+  align-items: center
+
+.statsFavoritesCount
+  padding-left: 0.8em
+
+.clickable
+  cursor: pointer
+
+.statsEyeIcon
+  margin-right: 5px
+  width: 1.5em
+  height: 1.5em
+
+.statsStarIcon
+  margin-right: 5px
+  margin-bottom: 3px
+  width: 20px
+  height: 20px
+  fill: rgb(100, 100, 100)
+  transform:scale(0.8)
+
+.accented
+  color: $primary
+  fill: $primary
+
+.xs
+  height: $xs-height
+  .section
+    padding: 0 5px
+    font-size: 12px
+    color: rgba(51, 51, 51, 0.8);
+
+  .starButton
+    width: 1.5em
+    height: 1.5em
+
+.sm
+  height: $sm-height
+  .section
+    padding: 0 6px
+    font-size: 16px
+
+  .cameraIcon
+    width: 24px
+    height: 18px
+    margin-right: 5px
+
+  .starButton
+    width: 2.4em
+    height: 2.3em
+
+.md
+  height: $md-height
+
+  .section
+    padding: 0 6px
+    font-size: 16px
+
+  .cameraIcon
+    width: 24px
+    height: 18px
+    margin-right: 5px
+
+  .starButton
+    width: 2.4em
+    height: 2.3em
+
+.topWrapper
+  position: absolute
+  left: 16px
+  right: 16px
+  top: 5px
+  user-select: none
+  z-index: 1
+  display: flex;
+  gap: 10px;
+
+  +media-tablet-landscape-up()
+    left: 6px
+    right: 6px
+
+  &.fourBadges
+    +media-tablet-landscape-up()
+      gap: 6px
+      .badgeItem
+        height: 18px
+        font-size: 10px
+        min-width: 30px
+      .badgeFull
+        display: none
+      .badgeShort
+        display: inline
+
+.badgeItem
+  // hook class for compact-mode overrides
+
+.badgeFull
+  display: inline
+
+.badgeShort
+  display: none
+
+.priceDifferencePerCent
+  margin-left: auto;
+
+.new
+  text-transform: uppercase
+
+.imagesCount
+  margin-left: 0 !important

package/compat/withStats/withStats.tsx

@@ -0,0 +1,238 @@
+import React from 'react';
+import classnames from 'classnames';
+
+import IconSVG from '../../iconsvg/IconSVG';
+import Badge from '../Badge/Badge';
+import FormattedNumber from '../FormattedNumber/FormattedNumber';
+
+import styles from './withStats.styl';
+
+export interface IStatsData {
+  totalCarImpCount: number;
+  totalFavCount: number;
+}
+
+type TStatsSize = 'xs' | 'sm' | 'md';
+
+export type TPrice = {
+  currency?: string;
+  amount?: number;
+  oldPrice?: number;
+  historyPriceDifference?: number;
+  historyPriceDifferencePerCent?: number;
+  vatRate?: number | null;
+  financing?: { firstInstallment?: number; [key: string]: any };
+  leasing?: { firstInstallment?: number; [key: string]: any };
+};
+
+export interface IStatsWrapperProps {
+  t?: (key: string, options?: object) => string;
+  statsSize?: TStatsSize;
+  price?: TPrice;
+  isFavoured?: boolean;
+  statsData?: IStatsData;
+  imagesCount?: number;
+  showNewLabel?: boolean;
+  showDownPayment?: boolean;
+  disableDownPaymentLocalStorage?: boolean;
+  onFavoriteClick?: (event: any) => void;
+  getCarImagesData?: (carId: string, force?: boolean, includeAll?: boolean, type?: any, typeAlternative?: string) => Promise<any>;
+  [key: string]: any;
+}
+
+const withStats = (WrappedComponent: any) => ({
+  t,
+  images,
+  hasInteriorExteriorPhoto,
+  imagesCount,
+  statsData,
+  isFavoured,
+  onFavoriteClick,
+  isReferenceSearch,
+  onSlideChange,
+  classWrapPrice = '',
+  showNewLabel = false,
+  showDownPayment = false,
+  disableDownPaymentLocalStorage = false,
+  statsSize = 'xs',
+  price: { historyPriceDifference = 0, historyPriceDifferencePerCent = 0 },
+  ...props
+}: IStatsWrapperProps) => {
+  const [activeSlide, setActiveSlide] = React.useState<number>(0);
+  const [isWideScreen, setIsWideScreen] = React.useState<boolean>(
+    typeof window !== 'undefined' ? window.matchMedia('(min-width: 992px)').matches : false
+  );
+
+  React.useEffect(() => {
+    const mq = window.matchMedia('(min-width: 992px)');
+    const handler = (e: MediaQueryListEvent) => setIsWideScreen(e.matches);
+    mq.addEventListener('change', handler);
+    return () => mq.removeEventListener('change', handler);
+  }, []);
+
+  const MIN_PERCENT = 5;
+  const MIN_PRICE_DIFFERENCE = 500;
+
+  const [showByLocalStorage, setShowByLocalStorage] = React.useState(false);
+  const [anyLsBlocked, setAnyLsBlocked] = React.useState(false);
+
+  React.useEffect(() => {
+    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;
+    const finBlocked = fin !== undefined && fin !== null && fin !== 0;
+    const leaBlocked = lea !== undefined && lea !== null && lea !== 0;
+    const anyBlocked = finBlocked || leaBlocked;
+    const hasZero = fin === 0 || lea === 0;
+    setAnyLsBlocked(anyBlocked);
+    setShowByLocalStorage(hasZero && !anyBlocked);
+  }, []);
+
+  const showByBackend = disableDownPaymentLocalStorage
+    ? !!showDownPayment
+    : showDownPayment && !anyLsBlocked;
+  const effectiveShowByLocalStorage = disableDownPaymentLocalStorage ? false : showByLocalStorage;
+
+  const onHandleSlideChange = (activeSlide: number) => {
+    setActiveSlide(activeSlide);
+
+    if (typeof onSlideChange === 'function') {
+      onSlideChange(activeSlide);
+    }
+  };
+
+  const renderImagesData = (): JSX.Element => {
+    if (!Number.isFinite(imagesCount)) return null;
+
+    const delimiters = { xs: '|', sm: '|', md: 'von' };
+
+    return (
+      <div className={classnames(styles.section, styles.imagesCount)}>
+        {statsSize === 'md' ? <IconSVG name='common_camera' customDimensions className={styles.cameraIcon} /> : null}
+        {!!imagesCount && <span>{`${activeSlide + 1} ${delimiters[statsSize]} ${imagesCount}`}</span>}
+      </div>
+    );
+  };
+
+  const renderRotateSvg = (): JSX.Element => {
+    const hasExteriorPhotos = hasInteriorExteriorPhoto && imagesCount > 0;
+    if (!hasExteriorPhotos) return null;
+    return (
+      <div className={styles.section}>
+        {hasExteriorPhotos ? (
+          <IconSVG name='rotate360New' customDimensions className={styles.statsEyeIcon} />
+        ) : null}
+      </div>
+    );
+  };
+
+  const renderStarButton = () => {
+    if (!onFavoriteClick) return null;
+
+    return (
+      <IconSVG
+        name='common_StarRoundedCorners'
+        customDimensions
+        className={classnames(styles.starButton, { [styles.starButtonFavored]: isFavoured })}
+        onClick={onFavoriteClick}
+      />
+    );
+  };
+
+  const renderStatsData = (): JSX.Element => {
+    if (!statsData) return null;
+    const { totalCarImpCount, totalFavCount } = statsData;
+    const favoritesClassName = classnames(
+      styles.statsFavoritesCount,
+      {
+        [styles.accented]: isFavoured,
+        [styles.clickable]: typeof onFavoriteClick === 'function'
+      });
+    const favoritesIconClassName = classnames(styles.statsStarIcon, { [styles.accented]: isFavoured });
+
+    return (
+      <>
+        {(!!totalCarImpCount || !!totalFavCount) && <div className={styles.section}>
+            {!!totalCarImpCount ? <div className={styles.statsViewsCount}>
+              <IconSVG name='common_SliderEye' customDimensions className={styles.statsEyeIcon} />
+              <span>
+                {totalCarImpCount}
+              </span>
+            </div> : null}
+            {!!totalFavCount ? <div className={favoritesClassName} onClick={onFavoriteClick}>
+              <IconSVG name='star' customDimensions className={favoritesIconClassName} />
+              <span>
+                {totalFavCount}
+              </span>
+            </div> : null}
+          </div>
+        }
+      </>
+    );
+  };
+
+  const renderPriceData = () => {
+    const newText = !!t ? t('vehicleProps:promoSlider.new') : 'neu';
+    const downPaymentText = !!t ? t('vehicleProps:promoSlider.downPayment') : '0\u20AC Anzahlung';
+    const downPaymentShortText = !!t ? t('vehicleProps:promoSlider.downPaymentShort') : '0\u20AC Anz.';
+    const EUR = `\u20AC`;
+
+    const allFourActive = showNewLabel
+      && !!historyPriceDifference && historyPriceDifference >= MIN_PRICE_DIFFERENCE
+      && (effectiveShowByLocalStorage || showByBackend)
+      && !!historyPriceDifferencePerCent && historyPriceDifferencePerCent >= MIN_PERCENT;
+
+    const activeBadgesCount = [
+      showNewLabel,
+      !!historyPriceDifference && historyPriceDifference >= MIN_PRICE_DIFFERENCE,
+      effectiveShowByLocalStorage || showByBackend,
+      !!historyPriceDifferencePerCent && historyPriceDifferencePerCent >= MIN_PERCENT
+    ].filter(Boolean).length;
+
+    return (
+      <div className={classnames(styles.topWrapper, classWrapPrice, { [styles.fourBadges]: allFourActive })}>
+        {showNewLabel && <Badge type='blue' className={classnames(styles.new, styles.badgeItem)}>{newText}</Badge>}
+        {!!historyPriceDifference && historyPriceDifference >= MIN_PRICE_DIFFERENCE && (
+          <Badge type='green' className={styles.badgeItem}>
+            {`-`}
+            <FormattedNumber value={historyPriceDifference} numbersAfterDot={0} />
+            {` ${EUR}`}
+          </Badge>
+        )}
+        {(effectiveShowByLocalStorage || showByBackend) && (
+          <Badge type='lightBlue' className={styles.badgeItem}>
+            {isWideScreen && activeBadgesCount >= 3 ? downPaymentShortText : downPaymentText}
+          </Badge>
+        )}
+        {!!historyPriceDifferencePerCent && historyPriceDifferencePerCent >= MIN_PERCENT && (
+          <Badge type='red' className={classnames(styles.priceDifferencePerCent, styles.badgeItem)}>-{historyPriceDifferencePerCent}%</Badge>
+        )}
+      </div>
+    );
+  };
+
+  const wrappedComponentProps = {
+    t,
+    images,
+    hasInteriorExteriorPhoto,
+    imagesCount,
+    classWrapPrice,
+    ...props
+  };
+
+  return (
+    <div className={styles.wrapper}>
+      {!isReferenceSearch && renderPriceData()}
+      <WrappedComponent onSlideChange={onHandleSlideChange} isReferenceSearch={isReferenceSearch} {...wrappedComponentProps} />
+      <div className={classnames(styles.controls, styles[statsSize])}>
+        {renderImagesData()}
+        {renderRotateSvg()}
+        {renderStarButton()}
+        {renderStatsData()}
+      </div>
+    </div>
+  );
+};
+
+export default withStats;

package/constants/RateSearchWidget.ts

@@ -0,0 +1,15 @@
+
+export const FIRST_INSTALLMENT_FIX = [
+  0, 500, 1000, 1500, 2000, 2500, 3000, 3500, 4000, 4500, 5000, // tslint:disable-line
+  6000, 7000, 8000, 9000, 10000, 11000, 12000, 13000, 14000, 15000, // tslint:disable-line
+  17500, 20000, 22500, 25000, 27500, 30000, 35000, 40000, 45000, 50000 // tslint:disable-line
+];
+
+export const MONTHLY_INSTALLMENT_FIX = [
+  'any', 50, 60, 70, 80, 90, 100, 125, 150, 175, 200, 225, 250, 275, 300, 350, 400, 450, 500, // tslint:disable-line
+  550, 600, 650, 700, 750, 800, 850, 900, 950, 1000, 1100, 1200, 1300, 1400, 1500 // tslint:disable-line
+];
+
+export const PAYBACK_PERIOD_FIX = [
+  12, 24, 36, 48, 60, 72, 84, 96 // tslint:disable-line
+];