@bytebrand/fe-ui-core 4.8.49 → 4.8.50

package/source/components/Checkout/Switcher/Switcher.story.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import Switcher from './Switcher';
+
+import styles from './Switcher.story.styl';
+export class SwitcherGroup extends React.Component {
+  state = {
+    value: 0
+  };
+
+  action = action('change');
+  onChange = (event, value) => {
+    this.action(event, value);
+    this.setState(() => ({ value }));
+  };
+
+  onChange = (e, value, name) => {
+    this.setState({ value: value });
+  }
+
+  render() {
+    const warrantyPeriodOptions = ['1 Jahr', '2 Jahre'];
+    return (
+      <Switcher
+        options={warrantyPeriodOptions}
+        value={this.state.value}
+        onChange={this.onChange}
+        name={'warrantyPeriod'}
+      />
+    );
+  }
+}
+
+storiesOf('checkout', module)
+.add('switcherGroup', () => (
+  <div>
+    <SwitcherGroup />
+  </div>
+));

package/source/components/Checkout/Switcher/Switcher.story.styl

@@ -0,0 +1,2 @@
+.containerClassName
+  display: flex

package/source/components/CompactSearchWidget/CompactSearchWidget.story.js

@@ -0,0 +1,187 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+// Components
+import CompactSearchWidget from './CompactSearchWidget';
+
+// utils
+import { getRequestOptions } from '../../framework/utils/RequestUtils';
+import { buildBodyForRequest, buildQueryForSearch, changeLocation } from '../../framework/utils/CommonUtils';
+import { transformManufacturers, transformModelsGeneral } from '../../framework/DataTransformers';
+import { MANUFACTURER, MODEL, THROTTLE_DELAY, RATE_DEFAULT } from '../../framework/constants/SearchWidget';
+import { BODY_TYPES } from '../../framework/constants/selectors';
+
+const containerStyles = {
+  position: 'relative',
+  width: '600px',
+  height: '550px',
+  backgroundImage: 'url("https://dev.autode-static.de/wp-content/uploads/2019/02/startseite_br_tor_AXEL.png")'
+};
+
+const widget = {
+  position: 'absolute',
+  top: '5%',
+  left: '50%',
+  transform: 'translateX(-50%)',
+  padding: '15px'
+};
+
+const getCarsCounterUrl = 'https://www.autode-dev.de/service/car-search-endpoint/api/v1/count/car';
+const getManufacturersUrl = 'https://www.autode-dev.de/service/car-makemodel-mapping/api/v1/information/makers';
+const getModelsUrl = 'https://www.autode-dev.de/service/car-makemodel-mapping/api/v1/information/models?maker=';
+
+let timeout = null;
+
+class CompactWidgetContainer extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      counter: 0,
+      counterLoading: false,
+      manufacturers: [],
+      models: [],
+      bodyTypes: [],
+      filters: {
+        MANUFACTURER: '',
+        MODEL: '',
+        BODY_TYPE: [],
+        FIRST_REGISTRATION: '',
+        MILEAGE: '',
+        PRICE: { from: '', to: '' },
+        RATE: RATE_DEFAULT
+      }
+    };
+  }
+
+  componentDidMount() {
+    this.getCarsCounter();
+    this.getManufacturers();
+  }
+
+  componentWillUnmount() {
+    timeout = null;
+  }
+
+  onFilterChange = (value, name) => {
+    if (!name) return false;
+    const newState = Object.assign({}, this.state);
+    newState.filters[name] = value;
+
+    if (name === MANUFACTURER) {
+      newState.filters[MODEL] = '';
+      this.getModels(value.value);
+    }
+
+    this.setState(() => (newState), () => {
+      clearTimeout(timeout);
+      timeout = setTimeout(this.getCarsCounter, THROTTLE_DELAY);
+    });
+  };
+
+  onSearchButtonClick = () => {
+    const { filters } = this.state;
+    const query = buildQueryForSearch(filters);
+    const resolvePrefix = query ? `search?${query}` : 'search';
+    this.onChangeLocation(resolvePrefix);
+  };
+
+  onChangeLocation = (path) =>
+    changeLocation(path);
+
+  onBrandPanelClick = () => {
+    console.log(this.state.filters[MANUFACTURER]);
+  };
+
+  getManufacturers = () =>
+    fetch(getManufacturersUrl, getRequestOptions('get'))
+      .then((res) => res.json())
+      .then((res) => {
+        const manufacturers = transformManufacturers(res.data);
+        this.updateManufacturersList(manufacturers);
+      })
+      .catch((error) => {
+        throw error;
+      });
+
+  getModels = (maker) =>
+    fetch(`${getModelsUrl}${maker}`, getRequestOptions('get'))
+      .then((res) => res.json())
+      .then((res) => {
+        const models = transformModelsGeneral(res.data);
+        this.setState(() => ({
+          models
+        }));
+      })
+      .catch((error) => {
+        throw error;
+      });
+
+  getCarsCounter = () => {
+    const { filters } = this.state;
+    const data = buildBodyForRequest(filters);
+    const obj = getRequestOptions('post', data);
+    this.setState(() => ({ counterLoading: true }));
+
+    fetch(getCarsCounterUrl, obj)
+      .then((res) => res.json())
+      .then((res) => {
+        this.updateCarCounter(res.count);
+        this.setState(() => ({ counterLoading: false }));
+      })
+      .catch((error) => {
+        this.setState(() => ({ counterLoading: false }));
+        throw error;
+      });
+  };
+
+  updateManufacturersList = (manufacturers) =>
+    this.setState(() => ({
+      manufacturers
+    }));
+
+  updateCarCounter = (counter) =>
+    this.setState(() => ({
+      counter,
+      counterLoading: false
+    }));
+
+  render() {
+    const { counter, counterLoading, manufacturers, models, filters } = this.state;
+    const query = buildQueryForSearch(filters);
+
+    const searchWidgetProps = {
+      counter,
+      counterLoading,
+      manufacturers,
+      models,
+      bodyTypes: BODY_TYPES,
+      filters,
+      contrastMode: true,
+      onFilterChange: this.onFilterChange,
+      rateWidgetModalSizes: ['xs', 'sm', 'md', 'lg'],
+      searchButtonLink: `search?${query}`,
+      detailedSearchLink: `search/detailed?${query}`,
+      onDetailedSearchClick: () => console.log('detailed'),
+      onBrandPanelClick: this.onBrandPanelClick
+    };
+
+    return (
+      <div>
+        <CompactSearchWidget {...searchWidgetProps} />
+      </div>
+    )
+  }
+}
+
+// For testing with api you need run storybook with custom port and host
+// to prevent CORS issues for carCounter and manufacturer list requests:
+// yarn storybook -p 8080 -h local.autode-dev.de
+storiesOf('CompactSearchWidget', module)
+  .add('default', () => (
+    <div style={containerStyles}>
+      <div style={widget}>
+        <CompactWidgetContainer />
+      </div>
+    </div>
+  ));

package/source/components/ContactForm/ContactForm.story.js

@@ -0,0 +1,94 @@
+import React, { useState } from 'react';
+import ContactForm from "./ContactForm";
+import { storiesOf } from "@storybook/react";
+import styles from './ContactForm.story.styl';
+
+const ContactFormContainer = () => {
+
+    const [contactFormValues, setContactFormValues] = useState({
+        firstName: {
+            value: 'firstname',
+            type: 'text',
+            hasError: 'true',
+            error: 'this field is required',
+            name: 'firstName'
+          },
+          lastName: {
+            value: 'lastName',
+            type: 'text',
+            hasError: 'true',
+            error: 'this field is required',
+            name: 'lastName'
+          },
+          email: {
+            value: 'email',
+            type: 'text',
+            hasError: 'true',
+            error: 'this field is required',
+            name: 'email'
+          },
+          countryCode: {
+            value: 'countryCode',
+            type: 'text',
+            hasError: 'true',
+            error: 'this field is required',
+            name: 'countryCode',
+            extra: [10, 20, 30]
+          },
+          areaCode: {
+            value: 'areaCode',
+            type: 'text',
+            hasError: 'true',
+            error: 'this field is required',
+            name: 'areaCode'
+          },
+          phoneNumber: {
+            value: 'phoneNumber',
+            type: 'text',
+            hasError: 'true',
+            error: 'this field is required',
+            name: 'phoneNumber'
+          },
+          message: {
+            value: 'message',
+            type: 'text',
+            hasError: 'true',
+            error: 'this field is required',
+            name: 'message',
+            placeHolder: 'placeHolder'
+          },
+          checkBox: {
+            error: null,
+            hasError: true,
+            name: 'terms',
+            placeHolder: '',
+            type: 'checkbox',
+            value: false,
+            bind: () => {}
+          },
+          formIsValid: true
+    })
+
+    const config = {
+        recaptchaSiteKey: '6LdunNEaAAAAAB1DazkKJFN2CbCT7YbMfUZ80R6C'
+    }
+  
+    const contactFormProps = {
+        t: () => {},
+        carStore: {
+            formStatus: 'done'
+        },
+        contactFormValues,
+        config
+    }
+    return (
+        <ContactForm { ...contactFormProps }/>
+    )
+}
+
+storiesOf('ContactForm', module)
+  .add('ContactForm', () => (
+    <>
+      <ContactFormContainer/>
+    </>
+  ));

package/source/components/ContactInfo/ContactInfo.story.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import { Container, Row, Col } from 'react-grid-system';
+
+import ContactInfo from './ContactInfo';
+
+const colStyle = {
+  outline: 'silver solid 1px'
+};
+
+const props = {
+  t: key => key,
+
+  title: 1,
+  gender: 2,
+  street: 'Musterstraße',
+  number: '14',
+  streetAddition: 'A',
+  city: 'Musterstadt',
+  zip: '01234',
+  countryName: 'Deutschland',
+  firstName: 'Peter',
+  lastName: 'Mustermann',
+  company: 'Company',
+  email: 'email@email.com',
+
+  phoneMain: '(+49) 123 456789',
+  phoneMobile: '(+49) 341 456789',
+
+  ustIdNr: '122134',
+
+  website: 'www.mustermann.ag',
+};
+
+storiesOf('ContactInfo', module)
+  .add('default', () => (
+    <div style={{ width: 992 }}>
+      <Container fluid>
+        <Row>
+          <Col sm={6} style={colStyle}>
+            <ContactInfo {...props}/>
+          </Col>
+          <Col sm={6} style={colStyle}>
+            <ContactInfo {...props} company={undefined} phoneMain={undefined}/>
+          </Col>
+        </Row>
+        <Row>
+          <Col sm={6} style={colStyle}>
+            <ContactInfo {...props} ustIdNr={undefined} website={undefined} company={undefined}/>
+          </Col>
+          <Col sm={6} style={colStyle}>
+            <ContactInfo {...props} phones={undefined} streetAddress={undefined}/>
+          </Col>
+        </Row>
+      </Container>
+    </div>
+  ));

package/source/components/CustomerQuote/CustomerQuote.story.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+// import { action } from '@storybook/addon-actions';
+
+import CustomerQuote from './CustomerQuote';
+
+const vertical = {
+  margin: '10px 0',
+  width: '220px',
+  backgroundColor: 'white'
+};
+
+const horizontal = {
+  width: '375px',
+  backgroundColor: 'white'
+};
+
+const verticalProps = {
+  image: 'http://placekitten.com/200/200',
+  name: 'First Last',
+  source: 'Kundenbewertung via Google',
+  review: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, aperiam autem, culpa doloribus eum nesciunt nihil nulla officia quo ratione velit, vitae voluptatem. Consequuntur distinctio facilis minus necessitatibus possimus quisquam!'
+};
+
+const horizontalProps = {
+  ...verticalProps,
+  isHorizontal: true
+};
+
+storiesOf('CustomerQuote', module)
+  .add('CustomerQuote', () => (
+    <div>
+      <div style={vertical}>
+        <CustomerQuote {...verticalProps} />
+      </div>
+
+      <div style={horizontal}>
+        <CustomerQuote {...horizontalProps} />
+      </div>
+    </div>
+  ));

package/source/components/CustomerQuotesSlider/CustomerQuotesSlider.story.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import styles from './CustomerQuotesSlider.story.styl';
+import CustomerQuotesSlider from './CustomerQuotesSlider';
+
+const quotes = [
+  {
+    id: Date.now().toString(),
+    image: 'http://placekitten.com/200/200',
+    name: 'First Last',
+    source: 'Kundenbewertung via Google',
+    review: '“BRückfragen wurden innerhalb kurzer Zeit telefonisch oder per Mail'
+  },
+  {
+    id: Date.now().toString(),
+    image: 'http://placekitten.com/200/200',
+    name: 'Klaus Andres',
+    source: 'Google Kundenbevertung',
+    review: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, aperiam autem, culpa doloribus eum nesciunt nihil nulla officia quo ratione velit, vitae voluptatem.'
+  },
+  {
+    id: Date.now().toString(),
+    image: 'http://placekitten.com/200/200',
+    name: 'First Last',
+    source: 'Kundenbewertung via Google',
+    review: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, aperiam autem, culpa doloribus eum nesciunt nihil nulla officia quo ratione velit, vitae voluptatem.'
+  },
+  {
+    id: Date.now().toString(),
+    image: 'http://placekitten.com/200/200',
+    name: 'First Last',
+    source: 'Kundenbewertung via Google',
+    review: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, aperiam autem, culpa doloribus eum nesciunt nihil nulla officia quo ratione velit, vitae voluptatem.'
+  },
+  {
+    id: Date.now().toString(),
+    image: 'http://placekitten.com/200/200',
+    name: 'First Last',
+    source: 'Kundenbewertung via Google',
+    review: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, aperiam autem, culpa doloribus eum nesciunt nihil nulla officia quo ratione velit, vitae voluptatem.'
+  },
+  {
+    id: Date.now().toString(),
+    image: 'http://placekitten.com/200/200',
+    name: 'First Last',
+    source: 'Kundenbewertung via Google',
+    review: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, aperiam autem, culpa doloribus eum nesciunt nihil nulla officia quo ratione velit, vitae voluptatem.'
+  }
+];
+
+const props = {
+  quotes,
+  className: styles.multiContainer,
+};
+
+const singleQuote = {
+  quotes,
+  className: styles.singleContainer,
+  slidesToShow: 1
+};
+
+storiesOf('CustomerQuotesSlider', module)
+  .add('CustomerQuotesSlider', () => (
+    <>
+      <div style={{ width: '100%', maxWidth: '716px', backgroundColor: 'white' }}>
+        <CustomerQuotesSlider {...props} />
+      </div>
+
+      <div style={{ width: '100%', maxWidth: '380px', marginTop: '50px', backgroundColor: 'white' }}>
+        <CustomerQuotesSlider {...singleQuote} />
+      </div>
+    </>
+  ));

package/source/components/CustomerQuotesSlider/CustomerQuotesSlider.story.styl

@@ -0,0 +1,5 @@
+.singleContainer
+  padding: 12px 32px;
+
+.multiContainer
+  padding: 15px 25px;

package/source/components/FormattedNumber/FormattedNumber.story.js

@@ -0,0 +1,114 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import FormattedNumber from './FormattedNumber';
+
+const container = {
+  textAlign: 'left'
+};
+
+const item = {
+  margin: '5px 0',
+  width: '500px',
+  display: 'flex',
+  justifyContent: 'space-between'
+};
+
+const numbers = {
+  display: 'inline-flex',
+  flexDirection: 'row'
+};
+
+const simpleStories = [
+  {
+    title: 'simple number, rounded',
+    props: {
+      value: 33.25
+    }
+  },
+  {
+    title: 'simple number, formatted, not rounded (small)',
+    props: {
+      value: 33.25,
+      toRound: false
+    }
+  },
+  {
+    title: 'simple number, formatted, not rounded (big)',
+    props: {
+      value: 55476.36,
+      toRound: false
+    }
+  },
+  {
+    title: 'simple number',
+    props: {
+      value: 123
+    }
+  },
+  {
+    title: 'fixed after two digits',
+    props: {
+      value: 325.54
+    }
+  },
+  {
+    title: 'big number, formatted',
+    props: {
+      value: 65800000
+    }
+  }
+];
+
+const specialCases = [
+  {
+    title: 'without props',
+    props: {}
+  },
+  {
+    title: 'return original but formatted',
+    props: {
+      value: 3.99,
+      numbersAfterDot: 2,
+      toRound: false
+    }
+  },
+  {
+    title: 'return original number',
+    props: {
+      value: 325.59,
+      disableFormatting: true
+    }
+  }
+];
+
+storiesOf('Formatted Number', module)
+  .add('default', () => (
+    <div style={container}>
+      <div>
+        <h4>Simple cases</h4>
+        {simpleStories.map(({ title, props }, index) => (
+          <div style={item} key={index}>
+            <span>{title}</span>
+            <div style={numbers}>
+              <i>{props.value}&nbsp;>>>&nbsp;</i>
+              <FormattedNumber { ...props } />
+            </div>
+          </div>
+        ))}
+      </div>
+      <div>
+        <h4>Special cases</h4>
+        {specialCases.map(({ title, props }, index) => (
+          <div style={item} key={index}>
+            <span>{title}</span>
+            <div style={numbers}>
+              <i>{props.value}&nbsp;>>>&nbsp;</i>
+              <FormattedNumber { ...props } />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  ));
+