@bytebrand/fe-ui-core-autobahn 1.0.0

package/compat/TimePicker/TimePicker.tsx

@@ -0,0 +1,156 @@
+import React, { useState, useEffect } from 'react';
+// md3: the two selects render via the MdSelect adapter (md3 Dropdown) instead of MUI MaterialSelect
+import MaterialSelect from '../MdSelect/MdSelect';
+import styles from './TimePicker.styl';
+
+interface ITimePickerProps {
+  onHandleTimestampChange: (value: number) => void;
+  onDayChange: (value: number) => void;
+  onTimeChange: (value: number) => void;
+  className: string;
+  lang: string;
+  time: number;
+  day: number;
+  t: (phrase: string) => string;
+  size?: string;
+}
+
+const TimePicker = ({
+  onHandleTimestampChange,
+  onDayChange,
+  onTimeChange,
+  day,
+  time,
+  className,
+  lang,
+  t,
+  size = 'custom'
+ }: ITimePickerProps) => {
+  const date: any = new Date();
+  const [currentDay, setCurrentDay] = useState(date.getDay());
+  const onHandleDayChange = (value: number) => {
+    onDayChange(value);
+  };
+  const onHandleTimeChange = (value: number) => {
+    onTimeChange(value);
+  };
+  const format: { hour: 'numeric' | '2-digit', minute: 'numeric' | '2-digit' } = {
+    hour: 'numeric',
+    minute: 'numeric'
+  };
+
+  const endOfTheDayTime = currentDay > 5 || currentDay < 1 ? '17:30:00' : '19:30:00';
+  const startOfTheDayTime = currentDay > 5 || currentDay < 1 ? '09:00:00' : '08:30:00';
+  const setNewDay = new Date(`${date.toDateString()} ${endOfTheDayTime}`) > date ? 0 : 86400000;
+  const interval = 30 * 60 * 1000;
+  const roundedTime = new Date(Math.ceil(date / interval) * interval);
+  const nextWeekDays = [...Array(7).keys()].map((days, index) => (
+  {
+    value: index,
+    label: new Date(Date.now() + setNewDay + 86400000 * days).toLocaleString(lang, { weekday: 'short', day: 'numeric', month: '2-digit' }).replace(',', ''),
+    day: new Date(Date.now() + setNewDay + 86400000 * days).toLocaleString(lang, { weekday: 'short', day: 'numeric', month: '2-digit' }).replace(',', '')
+  }
+  ));
+  const nextWeekDaysFull = [...Array(7).keys()].map(days => new Date(Date.now() + setNewDay + 86400000 * days));
+  const currentDayFull = new Date(nextWeekDaysFull[0]).toDateString();
+
+  const currentTime = new Date(`${currentDayFull} ${new Date().toLocaleTimeString()}`);
+  const endOfTheDay = new Date(`${currentDayFull} ${endOfTheDayTime}`);
+  const startOfTheDay = new Date(`${currentDayFull} ${startOfTheDayTime}`);
+
+  const isWorkingHours = () => (endOfTheDay > currentTime) && (startOfTheDay <= currentTime) && currentDay === new Date().getDay();
+  const isAfterWorkingHours = () => endOfTheDay < currentTime;
+
+  const ranges = currentDay > 5 || currentDay < 1 ? 8 : 12;
+  const currentDayRanges: { value: number, label: string, time: string }[] = [];
+  const dayRanges: { value: number, label: string, time: string }[] = [];
+  const ammountRanges = currentDay > 5 || currentDay < 1 ? (ranges - (roundedTime.getHours() - 9)) : (ranges - (roundedTime.getHours() - 8));
+
+  const startTime = (currentDay > 5) || (currentDay < 1) ? 9 : 8;
+
+  const getTimeRanges = () => {
+    for (let minutes = roundedTime.getMinutes(); minutes < ammountRanges * 60; minutes = minutes + 30) {
+      date.setHours(roundedTime.getHours());
+      date.setMinutes(minutes);
+      const time = date.toLocaleTimeString('de', format);
+      const rangeTime = new Date(getHours(time).getTime() + 30 * 60000).toLocaleString('de', format);
+      currentDayRanges.push({ time, value: currentDayRanges.length, label: `${time} - ${rangeTime}` });
+    } // time ranges for current day and from current time
+
+    const startOfTheDayMinutes = currentDay > 5 || currentDay < 1 ? 0 : 30; // from monday to friday we need to start from 08:30:00
+
+    for (let minutes = startOfTheDayMinutes; minutes < ranges * 60; minutes = minutes + 30) {
+      date.setHours(startTime);
+      date.setMinutes(minutes);
+      const time = date.toLocaleTimeString('de', format);
+      const rangeTime = new Date(getHours(time).getTime() + 30 * 60000).toLocaleString('de', format);
+      dayRanges.push({ time, value: dayRanges.length, label: `${time} - ${rangeTime}` });
+    } // time ranges for full day
+
+    return currentDay === new Date().getDay() && isWorkingHours() ? currentDayRanges : dayRanges;
+  };
+
+  useEffect(
+    () => {
+      setCurrentDay(new Date(nextWeekDaysFull[day]).getDay());
+      if (isAfterWorkingHours() && date.getDay() === 0) {
+        setCurrentDay(1);
+      }
+      onHandleTimestampChange(+new Date(`${new Date(nextWeekDaysFull[day]).toDateString()} ${getTimeRanges()[time].time}`) / 1000);
+    },
+    [day, time]
+  );
+
+  useEffect(
+    () => {
+      onHandleTimestampChange(+new Date(`${new Date(nextWeekDaysFull[day]).toDateString()} ${getTimeRanges()[time].time}`) / 1000);
+    },
+    [currentDay]
+  );
+
+  const getHours = (time: string) => {
+    const date = new Date(`${new Date().toDateString()}, ${time}:00`);
+    return date;
+  };
+
+  const dayOnchange = (value: number) => {
+    onHandleDayChange(value);
+    onHandleTimeChange(0);
+  };
+
+  const timeChange = (value: number) => {
+    onHandleTimeChange(value);
+  };
+
+  return (
+    <div className={`${className} ${styles.wrapper}`}>
+      <MaterialSelect
+        onChange={(value: any) => dayOnchange(value)}
+        label={t('CheckoutPage:onlineCheckoutModal.date')}
+        value={day}
+        size={size}
+        icon='timetable'
+        className={styles.dayForm}
+        classNameIcon={styles.selectIcon}
+        items={nextWeekDays}
+        amountOfItems={6}
+        customDimensionsIcon
+      />
+      <MaterialSelect
+        onChange={(value: any) => timeChange(value)}
+        label={t('CheckoutPage:onlineCheckoutModal.time')}
+        value={time}
+        size={size}
+        icon='clock'
+        className={styles.timeForm}
+        selectClassName={styles.select}
+        classNameIcon={styles.selectIcon}
+        items={getTimeRanges()}
+        amountOfItems={6}
+        customDimensionsIcon
+      />
+    </div>
+  );
+};
+
+export default TimePicker;

package/compat/Tooltip/Tooltip.styl

@@ -0,0 +1,117 @@
+@import '../legacy-theme/mixins.styl'
+
+// tooltip
+.tooltipWrap
+  position relative;
+  transform: translateY(-4px);
+  padding: 0;
+  border: 0;
+  cursor: pointer;
+  background-color: transparent;
+  text-align: left;
+  z-index: 2;
+
+  &:hover
+    [class*='Tooltip__tooltipWrap__icon']
+      path
+        fill: #005ccb;
+        fill-opacity: 1
+
+  &.tooltipWrapIndex
+    z-index: 3;
+
+  &:focus
+    outline: 0;
+
+  &__icon
+    pointer-events: none;
+    max-width: 11px;
+
+    path
+      fill: #4C4E64;
+      fill-opacity: 0.54
+
+  &__block
+    position absolute;
+    width: 190px;
+    box-sizing: border-box;
+    padding 8px 10px;
+    background-color #fff;
+    border-radius: 3px;
+    font-size: 10.5px;
+    white-space: normal;
+    font-weight: normal;
+    border: 2px solid $skyBlue;
+
+    &_right
+      right: -38px;
+
+      &::before, &::after
+        right: 35px;
+
+      &:after
+        transform: translateX(-3px);
+
+    &_left
+      left: -38px;
+
+      &::before, &::after
+        left: 35px;
+
+      &:after
+        transform: translateX(3px);
+
+    &_center
+      left: 50%;
+      transform: translateX(-50%);
+
+      &::before, &::after
+        left: inherit;
+        transform: inherit;
+
+    &_top
+      bottom: 20px;
+
+      &::before, &::after
+        top: 100%;
+        transform: rotate(180deg);
+
+      &.tooltipWrap__block_left
+        &:after
+          transform: rotate(180deg) translateX(-3px);
+
+      &.tooltipWrap__block_center
+        &::before, &::after
+          transform: rotate(180deg) translateX(50%);
+
+      &.tooltipWrap__block_right
+        &:after
+          transform: rotate(180deg) translateX(3px);
+
+    &_bottom
+      top: 20px;
+
+      &::before, &::after
+        bottom: 100%;
+
+    &::before, &::after
+      border: solid transparent;
+      content: '';
+      height: 0;
+      width: 0;
+      position: absolute;
+      pointer-events: none;
+
+    &::before
+      border-bottom-color: $skyBlue;
+      border-top-width: 10px;
+      border-left-width: 6px;
+      border-right-width: 6px;
+      border-bottom-width: 10px;
+
+    &::after
+      border-bottom-color: #fff;
+      border-top-width: 7px;
+      border-left-width: 3px;
+      border-right-width: 3px;
+      border-bottom-width: 7px;

package/compat/Tooltip/Tooltip.tsx

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import styles from './Tooltip.styl';
+import classnames from 'classnames';
+import IconSVG from '../../iconsvg/IconSVG';
+
+export interface ITooltipProps {
+  // widened from string: MdTooltip (ex-MaterialTooltip) forwards ReactNode text
+  description?: React.ReactNode;
+  tooltipClassName?: string;
+  iconName?: string;
+  positionX?: 'left' | 'right' | 'center' | any;
+  positionY?: 'top' | 'bottom' | any;
+}
+
+const Tooltip: React.FC<ITooltipProps> = ({ description, positionX, positionY, tooltipClassName, iconName }: ITooltipProps) => {
+  const [tooltip, setTooltip] = useState<boolean>(false);
+
+  const showTooltip = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    setTooltip(prevTooltip => !prevTooltip);
+  };
+
+  const onMouseEnterTooltip = () => setTooltip(true);
+  const onMouseLeaveTooltip = () => setTooltip(false);
+
+  const tooltipClasses = classnames(
+    styles.tooltipWrap,
+    tooltipClassName,
+    { [styles.tooltipWrapIndex]: tooltip }
+  );
+
+  const stylesTooltipWrap = `
+      ${styles.tooltipWrap__block}
+      ${positionX === 'left' ? styles.tooltipWrap__block_left : positionX === 'center' ? styles.tooltipWrap__block_center : styles.tooltipWrap__block_right}
+      ${positionY === 'bottom' ? styles.tooltipWrap__block_bottom : styles.tooltipWrap__block_top}
+  `;
+  return (
+    <button
+      className={tooltipClasses}
+      onClick={showTooltip}
+      onMouseEnter={onMouseEnterTooltip}
+      onMouseLeave={onMouseLeaveTooltip}
+    >
+      <IconSVG className={styles.tooltipWrap__icon} name={iconName ? iconName : 'info'} />
+      {tooltip && (
+        <div className={stylesTooltipWrap}>
+          <span>{description}</span>
+        </div>
+      )}
+    </button>
+  );
+};
+
+Tooltip.defaultProps = {
+  description: '',
+  tooltipClassName: '',
+  positionX: 'right',
+  positionY: 'bottom'
+};
+
+export default Tooltip;

package/compat/Usp/Usp.styl

@@ -0,0 +1,78 @@
+@import '../legacy-theme/mixins.styl'
+
+animationFunction()
+  animation-name: fadeIn;
+  animation-duration: 12s
+  animation-delay: 0s
+  animation-iteration-count: infinite
+  animation-timing-function: ease-in-out
+
+.sectionUsp
+  height: 27px
+  display: grid;
+  background-color $grey-f8;
+  list-style: none;
+  padding: 0;
+  justify-content: center;
+  grid-template-columns: 1fr; 
+  align-items: center;
+  margin: 0;
+
+  &__item
+    grid-column: 1 / 1;
+    grid-row: 1 / 1;
+    background-position center left;
+    background-repeat no-repeat
+    color: rgba(0, 0, 0, 0.7);
+    font-size: 12.3768px;
+    line-height: 14px;
+    position: relative
+    box-sizing: border-box;
+    margin 0 auto;
+    opacity: 0;
+    display flex
+    align-items: center;
+    text-align: center;
+    white-space: nowrap;
+    animationFunction();
+  
+    &::before
+      content: '';
+      display inline-flex;
+      margin-right: 12px;
+      background-repeat no-repeat;
+      flex-shrink: 0
+
+    &:nth-of-type(1)
+      animation-delay: 0s
+      &::before
+        width: 16px;
+        height: 20px;
+        background-image: url('../../media/svg/usp/icon1.svg');
+    &:nth-of-type(2)
+      animation-delay: 3s
+      &::before
+        width: 30px;
+        height: 14px;
+        background-image: url('../../media/svg/usp/icon2.svg');
+    &:nth-of-type(3)
+      animation-delay: 6s
+      &::before
+        width: 16px;
+        height: 19px;
+        background-image: url('../../media/svg/usp/icon3.svg');
+    &:nth-of-type(4)
+      animation-delay: 9s
+      &::before
+        width: 20px;
+        height: 19px;
+        background-image: url('../../media/svg/usp/icon4.svg');
+
+        
+
+@keyframes fadeIn {
+  0% { opacity: 0; }
+  5% { opacity: 1; }
+  15% { opacity: 1; }
+  25% { opacity: 0; }
+}

package/compat/Usp/Usp.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import _get from 'lodash/get';
+import { Visible } from 'react-grid-system';
+import styles from './Usp.styl';
+import { uspTranslate } from './uspTranslate';
+
+interface IUspInterface {
+  t: (key: string, options?: object) => string;
+}
+
+class Usp extends React.Component<IUspInterface> {
+
+  render() {
+    const {
+      t = (phrase: string) => _get(uspTranslate(), phrase, phrase)
+    } = this.props;
+    return (
+      <Visible xs sm md>
+        <ul className={styles.sectionUsp}>
+          <li className={styles.sectionUsp__item}>{t('usp.qualityCars')}</li>
+          <li className={styles.sectionUsp__item}>{t('usp.guarantee')}</li>
+          <li className={styles.sectionUsp__item}>{t('usp.moneyBack')}</li>
+          <li className={styles.sectionUsp__item}>{t('usp.yearGuaraty')}</li>
+        </ul>
+      </Visible>
+    );
+  }
+}
+
+export default Usp;

package/compat/Usp/uspTranslate.ts

@@ -0,0 +1,12 @@
+// Extracted verbatim from fe-ui-core source/locales/data.ts (its only consumer
+// is the Usp compat component below); data.ts re-exports it as a shim.
+export const uspTranslate = () => {
+  return {
+    usp: {
+      qualityCars: 'Top Qualität',
+      guarantee: 'Günstige Finanzierung',
+      yearGuaraty: '1 Jahr auto.de-Garantie',
+      moneyBack: '14 Tage Probefahrt'
+    }
+  };
+};

package/compat/VehicleDetailedSidebar/VehicleDetailedSidebar.styl

@@ -0,0 +1,37 @@
+@import '../legacy-theme/mixins.styl'
+
+.detailedInfo
+  padding: 15px 15px 0px 15px
+  width: 100%
+  position: relative
+  background-color: white
+  box-sizing: border-box
+  height: auto
+  borderRadius()
+
+  [class*="MuiTabs-indicator"]
+    border-radius: 3px 3px 0px 0px;
+    background-color: $primary;
+    height: 3px
+
+  [class*="MuiButtonBase-root"]
+    min-height: auto;
+  // [class*="Mui-selected"]
+  //   color: $primary !important;
+  //   font-weight bold !important
+
+  +media-tablet-down()
+    padding-bottom: 0
+    padding-top: 0;
+
+.highlights
+  padding-top: 0;
+  margin-top: 6px;
+
+.skeletonInfoContainer:not(:first-child)
+  margin-top: 6px
+
+.skeletonInfoContainer
+  [class*='MuiSkeleton-root']
+    transform: none
+    height: 309px

package/compat/VehicleDetailedSidebar/VehicleDetailedSidebar.tsx

@@ -0,0 +1,178 @@
+import React, { useState, useEffect, FunctionComponent } from 'react';
+import _get from 'lodash/get';
+import { Hidden } from 'react-grid-system';
+import PriceContent from './partials/PriceContent';
+import Title from './partials/Title';
+import Price from './partials/Price';
+import Properties from './partials/Properties';
+import styles from './VehicleDetailedSidebar.styl';
+import { vehicleProps } from '../../locales/legacy/data';
+import { IVehicleDetailedSidebarProps } from '../../types/types';
+import DealerInfo from '../Alternative/DealerInfo';
+import Skeleton from '../../ui/Skeleton';
+
+declare global {
+}
+
+const VehicleDetailedSidebar: FunctionComponent<IVehicleDetailedSidebarProps> = (props) => {
+  const {
+    t = (phrase: string) => _get(vehicleProps(car), phrase.replace(':', '.'), phrase),
+    title,
+    decoratedProps,
+    price,
+    car,
+    isPriceSticky,
+    language,
+    pathname,
+    activeTab,
+    setActiveTab,
+    carLoaded,
+    originUrl,
+    infoSections,
+    onCurrentSalesPriceChange,
+    isFetching
+  } = props;
+  const [offerBlockOpen, setOfferBlockOpen] = useState(false);
+  const onAdjustRateClick = () => setOfferBlockOpen(!offerBlockOpen);
+
+  const titleProps = { ...title };
+
+  const propertiesProps = {
+    t,
+    decoratedProps,
+    language,
+    car
+  };
+
+  const mainConfig = {
+    t,
+    car,
+    activeTab,
+    offerBlockOpen,
+    onAdjustRateClick,
+    isStrikeShown: price.common ? price.common.isStrikeShown : price.financing.isStrikeShown,
+    ...price
+  };
+
+  const financingConfig = {
+    ...mainConfig,
+    ..._get(price, 'financing', {}),
+    priceTabActiveIndex: 0,
+    postfix: '3',
+    prefixPrice: 'prefixPrice',
+    detailsText: 'financingDetalis'
+  };
+
+  const leasingConfig = {
+    ...mainConfig,
+    ..._get(price, 'leasing', {}),
+    priceTabActiveIndex: 1,
+    postfix: '1,3',
+    prefixPrice: 'prefixPrice',
+    detailsText: 'leasingDetalis'
+  };
+
+  const getBuyConfig = _get(price, 'buy', {});
+  const buyConfig = {
+    ...mainConfig,
+    ...getBuyConfig,
+    isBuy: true,
+    postfix: !!_get(price, 'vatRate') ? '1' : '',
+    priceTabActiveIndex: 2,
+    oldMonthlyInstallment: _get(getBuyConfig, 'highestPriceExtra', 0),
+    monthlyInstallment: _get(getBuyConfig, 'currentSalesPriceExtra', 0),
+    detailsText: null as string | null
+  };
+
+  const tabsTitles = [
+    {
+      title: t('vehicleProps:title.financing'),
+      children: <PriceContent {...financingConfig} />
+    },
+    {
+      title: t('vehicleProps:title.leasing'),
+      children: <PriceContent { ...leasingConfig} />,
+      isDisable: !_get(price, 'leasing.isActive', false)
+    },
+    {
+      title: t('vehicleProps:title.buy'),
+      children: <PriceContent { ...buyConfig} />
+    },
+    {
+      title: t('vehicleProps:title.abo'),
+      isDisable: true
+    }
+  ];
+
+  // ADV-116: the default CDP tab is driven solely by `activeTabCDP` (set to Financing by the
+  // originating card, or to the exact tab when a payment type is clicked directly). No
+  // leasing-based default override.
+  useEffect(() => {
+    const getlocalStorageActiveTabCDP = localStorage.getItem('activeTabCDP');
+    if (!getlocalStorageActiveTabCDP) return;
+    const activeTab = tabsTitles.findIndex(({ title }: { title: string }) => {
+      return title === getlocalStorageActiveTabCDP;
+    });
+    if (activeTab === -1) {
+      setActiveTab(null, 0);
+    } else {
+      setActiveTab(null, activeTab);
+    }
+    localStorage.removeItem('activeTabCDP');
+  }, [pathname, activeTab]); // tslint:disable-line:align
+
+  const priceProps = {
+    tabsTitles,
+    isPriceSticky,
+    onTabPriceSelect: setActiveTab,
+    priceTabActiveIndex: activeTab
+  };
+  const { price: { originalSalesPrice = 0 } = {} } = car;
+  const { currentSalesPrice = 0 } = price;
+  const dealerDomain = !!originUrl ? `${originUrl.split('/')[2]}` : '';
+  const dealerPrice = originalSalesPrice;
+
+  const isAlternativeType = !!car.metaData && !!car.metaData.type;
+
+  return (
+    <>
+      {!isFetching ? <div className={styles.detailedInfo}>
+          <Title {...titleProps} />
+          <Price {...priceProps} />
+          <Price {...priceProps} isSticky={true} />
+          {}
+          {props.children}
+        </div> : <div className={styles.skeletonInfoContainer}><Skeleton /></div>
+      }
+      {!isFetching ? <div>{isAlternativeType &&
+          <DealerInfo
+            t={t}
+            infoSections={infoSections}
+            dealerPrice={dealerPrice}
+            link={originUrl}
+            linkName={dealerDomain}
+            currentSalesPrice={currentSalesPrice}
+            onCurrentSalesPriceChange={onCurrentSalesPriceChange}
+          />}
+        </div> : <div className={styles.skeletonInfoContainer}><Skeleton /></div>
+      }
+      {!isFetching ? <Hidden xs sm md>
+          <div className={`${styles.detailedInfo} ${styles.highlights}`}>{carLoaded && <Properties {...propertiesProps} />}</div>
+        </Hidden> : <div className={styles.skeletonInfoContainer}><Skeleton /></div>
+      }
+    </>
+  );
+};
+
+VehicleDetailedSidebar.defaultProps = {
+  title: {
+    make: 'N/A',
+    model: 'N/A',
+    subModel: 'N/A',
+    powerKW: 0,
+    powerPS: 0,
+    isCarInFavorite: false
+  }
+};
+
+export default VehicleDetailedSidebar;

package/compat/VehicleDetailedSidebar/partials/Price.styl

@@ -0,0 +1,27 @@
+@import '../../legacy-theme/mixins.styl';
+
+.priceFixed
+  background-color: white
+  border-top: 1px solid $grey-e
+  position: fixed
+  width: 100%
+  bottom: 0;
+  left: 0
+  z-index: $zIndex-sticky
+  transition-timing-function: ease-in;
+  transition: 0.6s;
+  transform: translateY(100%);
+  opacity: 0;
+
+  & [role*='tabpanel']
+    padding 0 10px;
+
+.stickyShow
+  transition: 0.45s;
+  transition-timing-function: ease-out;
+  transform: translateY(0);
+  opacity: 1;
+  box-shadow: 0px 5px 12px #4c4e64d1;
+
+.tabContent
+  padding-bottom: 7px