@bytebrand/fe-ui-core 4.8.46 → 4.8.48

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

@@ -1,187 +0,0 @@
-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

@@ -1,94 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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

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

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

@@ -1,114 +0,0 @@
-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>
-  ));
-

package/source/components/InfoBlocks/InfoBlockWrapper.story.js

@@ -1,101 +0,0 @@
-import { storiesOf } from '@storybook/react';
-import { InfoBlockWrapper } from '../../..';
-import React from 'react';
-import ServiceBlockItem from './ServicesBlock/ServiceBlockItem';
-// import PricingTool from './PricingToolBlock/PricingToolBlock';
-import styles from './InfoBlockWrapper.story.styl';
-import PricingToolBlock from './PricingToolBlock/PricingToolBlock';
-import { getPriceRatingConfig } from '../../framework/utils/CommonUtils';
-import _get from 'lodash/get';
-import FirstInfoBlock from '../InfoBlocks/FirstInfoBlock/FirstInfoBlock';
-import { firstInfoBlockTranslate } from '../../locales/data';
-
-
-const infoBlockData2 = [
-    {
-      src: 'orderWhite',
-      title: 'order',
-      content: 'orderText'
-    },
-    {
-      src: 'customerServiceWhite',
-      title: 'customerService',
-      content: 'customerServiceText'
-    },
-    {
-      src: 'priceGuaranteeWhite',
-      title: 'pay',
-      content: 'payText'
-    },
-    {
-      src: 'transportAndDelivery',
-      title: 'transport',
-      content: 'transportText'
-    }
-  ];
-
-const pricingToolBlockProps = {
-  showModal: () => {},
-  hideModal: () => {},
-  decoratedProps: { min: 20 },
-  currentSalesPrice: 500,
-  make: 'opel',
-  model: 'omega',
-  currentSalesPricePredicted: 100,
-  rating: 1,
-  ratingConfig: getPriceRatingConfig(10000, 1000),
-  equipmentCount: 3,
-  priceTabActiveIndex: 2
-}
-
-const onDetailsClick = () => {
-    alert('details click')
-}
-
-const InfoBlockWrapperContainer = () => {
-    const environment = window.location.origin;
-    const link = `${environment}/versichern/`;
-    return (
-        <div>
-            <InfoBlockWrapper title='It works so easy'>
-                <span className={styles.serviceBlockItemWrapper}>
-                    {infoBlockData2.map((item, index) => {
-                        return <ServiceBlockItem
-                                    iconSrc={item.src}
-                                    iconBgColor={true}
-                                    title={`${index + 1}. ${item.title}`}
-                                    content={item.content}
-                                    key={index} />;
-                    })}
-                </span>
-            </InfoBlockWrapper>
-            {/* <InfoBlockWrapper title='Price review' titleDetails='Details on the price evaluation' onDetailsClick={onDetailsClick}> */}
-            <PricingToolBlock { ...pricingToolBlockProps } />
-            {/* </InfoBlockWrapper> */}
-            <InfoBlockWrapper title='Car insurance' titleDetails='Compare now' onDetailsClick={onDetailsClick}>
-                No meaningful price information for this car is possible because too many different factors affect the value.
-            </InfoBlockWrapper>
-            <a href={link} className={styles.linkContainer}>
-                <InfoBlockWrapper title='ititle' titleDetails='ibutton'>
-                        <ul className={styles.itext}>
-                            <li>itext1</li>
-                            <li>itext2</li>
-                            <li>itext3</li>
-                        </ul>
-                </InfoBlockWrapper>
-            </a>
-            <FirstInfoBlock t={phrase => _get(firstInfoBlockTranslate(), phrase.replace(':', '.'), phrase)}/>
-        </div>
-    )
-}
-
-storiesOf('InfoBlockWrapper', module)
-  .add('InfoBlockWrapper', () => (
-    <div>
-      <div>
-        <InfoBlockWrapperContainer />
-      </div>
-    </div>
-  ));
-
-export default InfoBlockWrapperContainer;