@bytebrand/fe-ui-core 4.8.54 → 4.8.55

package/source/components/_common/TimePicker/TimePicker.story.js

@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+
+import { storiesOf } from '@storybook/react';
+import TimePicker from './TimePicker';
+
+const TimePickerStory = () => {
+  const [time, setTime] = useState(0);
+  const [day, setDay] = useState(0);
+  const [timestamp, setTimestamp] = useState('');
+
+  const onHandleTimeChange = (value) => {
+    setTime(value)
+    };
+  const onHandleDayChange = (value) => {
+    setDay(value)
+    };
+  const onHandleTimestampChange = (value) => {
+    setTimestamp(new Date(value))
+    };
+  return (
+      <TimePicker
+        style={{ background: '#fff', display: 'flex', justifyContent: 'space-between', width: '800px' }}
+        time={time}
+        day={day}
+        onHandleTimeChange={onHandleTimeChange}
+        onHandleDayChange={onHandleDayChange}
+        onHandleTimestampChange={onHandleTimestampChange}
+        lang='de'
+        t={phrase => phrase}
+      />
+  )
+}
+
+storiesOf('_Common_UI', module)
+  .add('TimePicker', () => (
+    <div style={{ background: '#fff', width: '350px', height: '100%' }}><TimePickerStory /></div>
+  ));

package/source/components/_common/Tooltip/Tooltip.story.js

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import Tooltip from './Tooltip';
+
+
+const description = {
+    financing: `Bei der Finanzierung zahlen Sie lediglich die Zinsen des Darlehens und einen geringen Tilgungsanteil. Zum Vertragsende können Sie entscheiden, ob Sie den Restbetrag ablösen oder weiter finanzieren wollen.`,
+    leasing: `Beim Leasing zahlen Sie lediglich die Zinsen des Darlehens und einen geringen Tilgungsanteil. Zum Vertragsende geben Sie das Auto einfach wieder zurück.`,
+    abo: `Bei diesem Auto-Abo ist bereits alles an Bord. Teil-und Vollkasko sowie Haftpflicht sind inklusive, ebenso wie Wartungs- und Verschleißreparaturen. Sie zahlen also nur Ihre Rate und Kraftstoff.`,
+    kaufen: `Nach Kaufabschluss haben Sie die sofortigen Eigentumsrechte und keine Finanzierungskosten. Als Eigentümer können Sie Ihr Fahrzeug zueigenen Konditionen weiter verkaufen und Änderungen vornehmen.`,
+};
+
+storiesOf('_Common_UI', module).add('Tooltip', () => (
+    <div>
+      <Tooltip description={description.financing} />
+      <br />
+      <Tooltip description={description.leasing} positionX='left' />
+      <br />
+      <Tooltip description={description.abo} positionX='center' />
+      <br />
+      <Tooltip description={description.kaufen} positionY='top' positionX='right' />
+      <br />
+      <Tooltip description={description.kaufen} positionY='top' positionX='center' />
+      <br />
+      <Tooltip description={description.kaufen} positionY='top' positionX='left' />
+    </div>
+));

package/source/components/_common/UserMenu/MaterialMenu.story.js

@@ -0,0 +1,73 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import MaterialMenu from './MaterialMenu';
+
+const superAdmin = false;
+
+const userMenuItems = [
+  {
+    icon: 'dashboardIcon',
+    label: 'Dashboard'
+  },
+  {
+    icon: 'userProfileIcon',
+    label: 'Profile'
+  },
+  {
+    icon: 'addressIcon',
+    label: 'Address'
+  },
+  {
+    icon: 'myVehiclesIcon',
+    label: 'My Vehicles'
+  },
+  {
+    icon: 'savedSearchsIcon',
+    label: 'Saved searchs'
+  },
+  {
+    icon: 'favoritesIcon',
+    label: 'Favorites',
+    amount: 0
+  },
+  !superAdmin && {
+    icon: 'dealersIcon',
+    label: 'Dealers',
+    amount: 1234,
+    divider: true,
+    nestedItems: [
+      {
+        icon: 'supportCallbackIcon',
+        label: 'Support & Call back',
+        divider: true,
+      },
+      {
+        icon: 'supportCallbackIcon',
+        label: 'Support & Call back',
+        divider: true,
+      },
+      {
+        icon: 'supportCallbackIcon',
+        label: 'Support & Call back',
+        divider: true,
+      }
+    ]
+  },
+  {
+    icon: 'imageSettingsIcon',
+    label: 'Image Settings'
+  },
+  !superAdmin && {
+    icon: 'supportCallbackIcon',
+    label: 'Support & Call back',
+    divider: true
+  },
+  {
+    icon: 'logoutIcon',
+    label: 'Logout'
+  },
+
+];
+
+storiesOf('_Common_UI', module).add('UserMenu', () => <MaterialMenu menuItems={userMenuItems} headerComponent='Firstname Lastname' />);

package/source/components/_common/VehicleSlider/VehicleSlider.story.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import styles from './VehicleSlider.story.styl'
+import { storiesOf } from '@storybook/react';
+
+import VehicleSlider from './VehicleSlider.tsx';
+import VehicleSliderForSRL from './VehicleSliderForSRL.tsx';
+
+import withStats from '../withStats/withStats.tsx';
+import withLabel from '../withLabel/withLabel.tsx';
+
+import { COLUMN_STYLES, CONTAINER_STYLES, ROW_STYLES } from '../../../framework/constants';
+
+const IMAGE_URL = 'https://picsum.photos/400/300/?random';
+const images = [];
+const imagesForSRL = [];
+
+for (let i = 0; i <= 10; i++) {
+  images.push({ url: `${IMAGE_URL}&tag=${Math.random()}`, description: '' });
+}
+
+for (let i = 0; i <= 10; i++) {
+  imagesForSRL.push({ imageUrlSmall: `${IMAGE_URL}&tag=${Math.random()}` });
+}
+
+const DecoratedSlider = withLabel(withStats(VehicleSlider));
+const DecoratedSliderForSRL = withLabel(withStats(VehicleSliderForSRL));
+
+export class ImageWithStatsContainer extends React.Component {
+  state = {
+    isFavoured: false
+  };
+
+  onFavoriteClick = () => {
+    this.setState({ isFavoured: !this.state.isFavoured })
+  };
+
+  render() {
+    const statsProps = {
+      isFavoured: this.state.isFavoured,
+      imagesCount: images.length,
+      statsData: {
+        totalCarImpCount: 15,
+        totalFavCount: 20
+      },
+      statsSize: 'xs',
+      onFavoriteClick: this.onFavoriteClick,
+    };
+
+    const sliderProps = {
+      images,
+      wrapperClassName: styles.slider
+    };
+
+    const sliderSRLProps = {
+      images: imagesForSRL,
+      wrapperClassName: styles.slider
+    };
+
+    return (
+      <div style={CONTAINER_STYLES}>
+        <div style={COLUMN_STYLES}>
+          <div style={ROW_STYLES}>
+            <div className={styles.row}>
+              <div className={styles.col}>
+                <h2 className={styles.title}>{'Slider props: { isLarge: true }'}</h2>
+                <div className={styles.row}>
+                  <div className={styles.col} style={{ width: '300px', maxWidth: '100%', margin: '0 auto' }}>
+                    <VehicleSlider images={images} wrapperClassName={styles.slider} size='lg' />
+                  </div>
+                </div>
+              </div>
+              <div className={styles.col}>
+                <h2 className={styles.title}>Slider with Stats</h2>
+                <div className={styles.row}>
+                  <div className={styles.col} style={{ width: '300px', maxWidth: '100%', margin: '0 auto' }}>
+                    <DecoratedSlider {...statsProps} {...sliderProps} />
+                  </div>
+                </div>
+              </div>
+              <div className={styles.col}>
+                <h2 className={styles.title}>Slider with Stats for SRL</h2>
+                <div className={styles.row}>
+                  <div className={styles.col} style={{ width: '300px', maxWidth: '100%', margin: '0 auto' }}>
+                    <DecoratedSliderForSRL {...statsProps} {...sliderSRLProps} />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+storiesOf('_Common_UI', module)
+  .add('VehicleSlider', () => (
+    <ImageWithStatsContainer />
+  ));

package/source/components/_common/withLabel/withLabel.story.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import styles from '../Image/Image.story.styl'
+import { storiesOf } from '@storybook/react';
+
+import Image from '../Image/Image.tsx';
+import withLabel from './withLabel.tsx'
+import withStats from '../withStats/withStats.tsx'
+import { COLUMN_STYLES, CONTAINER_STYLES, ROW_STYLES } from '../../../framework/constants';
+
+const SRC_HORIZONTAL = 'https://placekitten.com/400/300';
+
+const ImageWithLabel = withLabel(Image);
+const DecoratedImage = withLabel(withStats(Image));
+
+export class ImageWithLabelContainer extends React.Component {
+  state = {
+    isFavoured: false
+  };
+
+  onFavoriteClick = () => {
+    this.setState({ isFavoured: !this.state.isFavoured })
+  };
+
+  render() {
+    const statsProps = {
+      isFavoured: this.state.isFavoured,
+      imagesCount: 10,
+      statsData: {
+        totalCarImpCount: 15,
+        totalFavCount: 20
+      },
+      statsSize: 'xs',
+      onFavoriteClick: this.onFavoriteClick
+    };
+
+    return (
+      <div className={styles.row}>
+        <div className={styles.col}>
+          <h2 className={styles.title}>XS Size</h2>
+          <div className={styles.row}>
+            <div className={styles.col} style={{ width: '300px', maxWidth: '100%', margin: '0 auto' }}>
+              <ImageWithLabel labelVisible={true} src={SRC_HORIZONTAL} width='100%' ratioW={4} ratioH={3} />
+            </div>
+          </div>
+        </div>
+        <div className={styles.col}>
+          <h2 className={styles.title}>MD Size</h2>
+          <div className={styles.row}>
+            <div className={styles.col} style={{ width: '300px', maxWidth: '100%', margin: '0 auto' }}>
+              <DecoratedImage src={SRC_HORIZONTAL} width='100%' ratioW={4} ratioH={3} {...statsProps} />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+storiesOf('_Common_UI', module)
+  .add('withLabel', () => (
+    <ImageWithLabelContainer />
+  ));

package/source/components/_common/withPopover/withPopover.story.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import classnames from 'classnames';
+import { storiesOf } from '@storybook/react';
+import withPopover from './withPopover';
+import styles from './withPopover.story.styl'
+
+const Target = ({ isPopoverShown, text }) => {
+  const className = classnames(styles.target, { [styles.targetOpen]: isPopoverShown });
+  return <div className={className}>{text}</div>;
+};
+
+const Popover = ({ isPopoverShown, text }) => {
+  const className = classnames(styles.popover, { [styles.popoverOpen]: isPopoverShown });
+  return <div className={className}>{text}</div>;
+};
+
+const TargetWithPopover = withPopover(Target, Popover);
+
+export class WithPopoverContainer extends React.Component {
+  state = {
+    type: 'click'
+  };
+
+  onCheckboxChange = () => {
+    this.setState({ type: this.state.type === 'click' ? 'hover' : 'click' });
+  };
+
+  render() {
+    const targetWithPopoverProps = {
+      targetProps: { text: 'Target' },
+      popoverProps: { text: 'Popover' },
+      type: this.state.type
+    };
+
+    return (
+      <React.Fragment>
+        <label className={styles.label}>
+          <input type='checkbox' value={this.state.showOnHover} onChange={this.onCheckboxChange} />
+          <span>Open on hover</span>
+        </label>
+        <TargetWithPopover {...targetWithPopoverProps} />
+      </React.Fragment>
+    );
+  }
+}
+
+storiesOf('_Common_UI', module)
+  .add('withPopover', () => <WithPopoverContainer />);

package/source/components/_common/withPopover/withPopover.story.styl

@@ -0,0 +1,54 @@
+@import '../../../theme/theme.styl'
+
+.label
+  display: block
+  font-family: $font-style-arial
+  margin-bottom: 20px
+
+.target
+  position: relative
+  font-family: $font-style-arial
+  width: 150px
+  height: 30px
+  line-height: 30px
+  text-align: center
+  border 1px solid $grey-b
+  border-radius: 3px
+  transition: all 0.2s ease-in-out
+  cursor: pointer
+  &:hover
+    background-color: $grey-f2
+
+.targetOpen
+  color: $primary
+  font-weight: bold
+  border-color: $primary
+  &:after
+    content: ''
+    position: absolute
+    display: block
+    width: 100%
+    height: 15px
+
+.popover
+  position: relative
+  box-sizing: border-box
+  color: white
+  font-size: 25px
+  font-weight: bold
+  border 3px solid $yellow-f1
+  position: absolute
+  top: 45px
+  width: 250px
+  height: 100px
+  line-height: 100px
+  text-align: center
+  border-radius: 3px
+  background-color: $grassGreen
+  visibility: hidden
+  opacity: 0
+  transition: all 0.2s ease-in-out
+
+.popoverOpen
+  visibility: visible
+  opacity: 1

package/source/components/_common/withStats/withStats.story.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import styles from '../Image/Image.story.styl'
+
+import { storiesOf } from '@storybook/react';
+
+import Image from '../Image/Image.tsx';
+import withStats from './withStats.tsx'
+import { COLUMN_STYLES, CONTAINER_STYLES, ROW_STYLES } from '../../../framework/constants';
+
+const SRC_HORIZONTAL = 'https://placekitten.com/400/300';
+
+const ImageWithStats = withStats(Image);
+
+export class ImageWithStatsContainer extends React.Component {
+  state = {
+    isFavoured: false
+  };
+
+  onFavoriteClick = () => {
+    this.setState({ isFavoured: !this.state.isFavoured })
+  };
+
+  render() {
+    const basicProps = {
+      isFavoured: this.state.isFavoured,
+      imagesCount: 10,
+      statsData: {
+        totalCarImpCount: 15,
+        totalFavCount: 20
+      },
+      statsSize: 'xs',
+      showNewLabel: true,
+      price: {
+        historyPriceDifference: 500,
+        historyPriceDifferencePerCent: 25
+      },
+      onFavoriteClick: this.onFavoriteClick
+    };
+
+    const xsProps = { ...basicProps, ...{ statsSize: 'xs' } };
+    const mdProps = { ...basicProps, ...{ statsSize: 'md', price: { historyPriceDifference: 499, historyPriceDifferencePerCent: 25 } } };
+
+    return (
+      <div style={CONTAINER_STYLES}>
+        <div style={COLUMN_STYLES}>
+          <div style={ROW_STYLES}>
+            <div className={styles.row}>
+              <div className={styles.col}>
+                <h2 className={styles.title}>XS Size</h2>
+                <div className={styles.row}>
+                  <div className={styles.col} style={{ width: '300px', maxWidth: '100%', margin: '0 auto' }}>
+                    <ImageWithStats src={SRC_HORIZONTAL} width='100%' ratioW={4} ratioH={3} {...xsProps} />
+                  </div>
+                </div>
+              </div>
+              <div className={styles.col}>
+                <h2 className={styles.title}>MD Size ({'price difference < 500'})</h2>
+                <div className={styles.row}>
+                  <div className={styles.col} style={{ width: '300px', maxWidth: '100%', margin: '0 auto' }}>
+                    <ImageWithStats src={SRC_HORIZONTAL} width='100%' ratioW={4} ratioH={3} {...mdProps} />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+storiesOf('_Common_UI', module)
+  .add('withStats', () => (
+    <ImageWithStatsContainer />
+  ));

package/source/components/_common/withStats/withStats.styl

@@ -150,10 +150,20 @@ $indent = 10px
         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;
 

package/source/components/_common/withStats/withStats.tsx

@@ -57,16 +57,6 @@ const withStats = (WrappedComponent: any) => ({
   ...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;
@@ -172,7 +162,8 @@ const withStats = (WrappedComponent: any) => ({
         )}
         {showDownPayment && (
           <Badge type='lightBlue' className={styles.badgeItem}>
-            {allFourActive && isWideScreen ? downPaymentShortText : downPaymentText}
+            <span className={styles.badgeFull}>{downPaymentText}</span>
+            <span className={styles.badgeShort}>{downPaymentShortText}</span>
           </Badge>
         )}
         {!!historyPriceDifferencePerCent && historyPriceDifferencePerCent >= MIN_PERCENT && (

package/source/framework/DataTransformers.ts

@@ -69,6 +69,7 @@ export const transformDataForDecoratedCar = (car: any) => {
     bootCapacity: _get(car, 'sizeVolumeWeight.cargoCapacity', null),
     capacityLoad: _get(car, 'sizeVolumeWeight.completeCapacity', null),
     wltpCo2:  _get(car, 'environmentEmissions.wltpCo2', null),
+    wltpEnergyEfficiencyClass: _get(car, 'environmentEmissions.wltpEnergyEfficiencyClass', null),
     pluginHybrid: _get(car, 'engineData.pluginHybrid', null),
     wltpCombined: _get(car, 'consumption.wltpCombined', null),
     wltpPowerCombined: _get(car, 'consumption.wltpPowerCombined', null),

package/source/framework/constants/common.ts

@@ -1,8 +1,12 @@
-export const SITE_DOMAIN: string = 'https://www.auto.de';
+const _rawHost = typeof window !== 'undefined' ? window.location.host.replace('www.', '') : 'auto.de';
+const _isIP = /^\d+\.\d+\.\d+\.\d+(:\d+)?$/.test(_rawHost);
+const _imgBase = _isIP ? 'https://images.auto.de' : 'https://images.' + _rawHost;
 
-export const PLACEHOLDER_IMAGE: string = 'https://images.auto.de/noimage/';
-export const PLACEHOLDER_IMAGE_SMALL_URL: string = `https://images.auto.de/noimage/noimage/small`;
-export const PLACEHOLDER_IMAGE_LARGE_URL: string = `https://images.auto.de/noimage/noimage/large`;
+export const SITE_DOMAIN: string = typeof window !== 'undefined' ? 'https://' + window.location.host : 'https://www.auto.de';
+
+export const PLACEHOLDER_IMAGE: string = _imgBase + '/noimage/';
+export const PLACEHOLDER_IMAGE_SMALL_URL: string = _imgBase + '/noimage/small';
+export const PLACEHOLDER_IMAGE_LARGE_URL: string = _imgBase + '/noimage/large';
 
 export const QUOTES_SLIDES_TO_SHOW_DEFAULT = 3;
 

package/source/framework/types/types.ts

@@ -115,6 +115,7 @@ export interface IVehicleInfo {
   url?: string;
   target?: string;
   rel?: string;
+  leasing?: ILeasing;
 }
 
 export interface IVehicleTitleProps {