@bytebrand/fe-ui-core 4.8.54 → 4.8.56

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

@@ -0,0 +1,243 @@
+import React, {useState} from 'react';
+import { Resizable } from 're-resizable';
+import { storiesOf } from '@storybook/react';
+import styles from './OrderOverviewItem.story.styl';
+import {
+  Accordion, AccordionSummary, AccordionDetails, Divider
+} from '@mui/material';
+import { makeStyles } from '@mui/styles';
+
+// Components
+import OrderOverviewItem from './OrderOverviewItem';
+import IconSVG from '../../_common/IconSVG/IconSVG';
+import VehicleFormattedPrice from '../../Vehicle/VehicleFormattedPrice/VehicleFormattedPrice';
+import PaymentTypeCard from '../RadioCards/PaymentTypeCard/PaymentTypeCard';
+
+const resizableProps = {
+  defaultSize: { width: 360, height: 700 }
+};
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    minWidth: 275
+  },
+  bullet: {
+    display: 'inline-block',
+    margin: '0 2px',
+    transform: 'scale(0.8)'
+  },
+  title: {
+    fontSize: 14
+  },
+  pos: {
+    marginBottom: 12
+  },
+  accordionSummary: {
+    flexDirection: 'row-reverse'
+  },
+  iconPlus: {
+    '&.MuiIconButton-root': {
+      // paddingLeft: 0,
+      paddingLeft: '100px',
+      marginRight: '10px'
+    },
+    '&.MuiIconButton-edgeEnd': {
+      marginRight: 0,
+      paddingLeft: '100px'
+    }
+  },
+  iconMinus: {
+    '&.MuiIconButton-label': {
+      // paddingLeft: 0,
+      marginLeft: '10px'
+    }
+  },
+  heading: {
+    '&.MuiTypography-body1': {
+      marginLeft: '10px'
+    }
+  },
+  accordionWrapper: {
+    '&.MuiAccordionDetails-root': {
+      display: 'block',
+      padding: 0
+    }
+  },
+  accordion: {
+    '& .MuiAccordionSummary-root' : {
+      padding: 0
+    },
+    '& .MuiAccordionSummary-content.Mui-expanded' : {
+      margin: 0
+    },
+    '&.MuiAccordion-root.Mui-expanded' : {
+      margin: 0,
+      marginTop: '20px'
+    },
+    '& .MuiAccordionSummary-root.Mui-expanded' : {
+      minHeight: '52px'
+    },
+    '&.MuiAccordion-root' : {
+      boxShadow: 'none'
+    },
+    '&.MuiAccordion-root:before' : {
+      height: 0
+    },
+    '&.MuiAccordion-root.Mui-expanded:before' : {
+      opacity: 1,
+      height: '1px'
+    }
+  }
+}));
+const OrderOverviewItemWrapper = () => {
+const classes = useStyles();
+
+const fields = [
+    [
+      'Hannes Käther',
+      'Wittenberger Str. 81, 04129 Leipzig'
+    ],
+    [
+      'Wittenberger Str. 81, 04129 Leipzig'
+    ]
+  ];
+
+const titles = [
+  'Billing address',
+  'Vehicle delivery',
+  'Down payment'
+]
+
+const intoAccordionTitles = [
+  'Financing',
+  'Additional services'
+]
+
+const intoAccordionField = [
+  [
+    'Financing rate',
+    '2. Borrower'
+  ],
+  [
+    'Silver guarantee package',
+    'Admissions Service',
+    'Desired license plate',
+    'Vehicle delivery'
+  ]
+]
+
+const intoAccordionFieldRight = [
+  [
+    '194 € per month',
+    'Papa Käther'
+  ],
+  [
+    '10 € per month',
+    '2 € per month',
+    '0,5 € per month',
+    '7 € per month'
+  ]
+]
+
+const iconNames = [
+  'financingIcon',
+  'leasingIcon',
+  'aboIcon'
+]
+
+const fieldLine = '€ 1,000 (transfer)'
+
+const [open, setOpen] = useState(false);
+
+const handleAccordion = () => {
+    setOpen(!open);
+  };
+{/* delete */}
+  const [checkedBox, setCheckedBox] = useState({
+    0: true,
+    1: false,
+    2: true,
+    3: false,
+    4: true,
+    5: false,
+    6: true
+  });
+
+  const onChange = (e, checked) => {
+    const updatedValue = !checkedBox[e.target.value]
+    // setCheckedBox({...checkedBox, [e.target.value]: updatedValue});
+    // checked = checkedBox[e.target.value];
+    if (e.target.value === '2') {
+      setCheckedBox({0: false, 1: false, 2: true});  
+    }
+    else {
+      setCheckedBox({...checkedBox, [e.target.value]: updatedValue, 2: false})
+    }
+  }
+
+  const renderCheckout = (index) => {
+    const financing = ['Financing', 'Leasing', 'Buy', 'Abo'];
+
+    return (
+      <div className={styles.equipment}>
+        <div className={styles.column}>
+          <span className={styles.titleCheckout}>
+            {financing[index]}
+          </span>
+        </div>
+      </div>
+    );
+  };
+
+  const paymentTypeProps = {
+    labelClassName: styles.checkoutLabel,
+  }
+
+  const paymentinfoContent = [
+    '81% of our customers find the perfect financing through auto.de',
+    'Lease your car with ease',
+    'Subscribe to your dream car flexibly',
+    'Buy your car now'
+    ];
+{/* delete */}
+  return (
+    <Resizable {...resizableProps}>
+      <OrderOverviewItem title={titles[0]} fields={fields[0]}/>
+      <OrderOverviewItem title={titles[1]} fields={fields[1]}/>
+      <OrderOverviewItem title={titles[2]} fieldLine={fieldLine}/>
+      <Accordion className={`${classes.accordion} ${styles.accordion}`}>
+        <AccordionSummary
+          onClick={handleAccordion}
+          className={classes.accordionSummary}
+          // expandIcon={open ? <IconSVG className={classes.iconMinus} name='minusIcon' /> : <IconSVG className={classes.iconPlus} name='plusIcon' />}
+          aria-controls='panel1a-content'
+          id='panel1a-header'
+        >
+          <span className={styles.summaryWrapper}>
+            <span>Your overall rate</span>
+            <span className={styles.priceWrapper}>
+              <VehicleFormattedPrice monthly='monthly' className={styles.price} numbersAfterDot={0} toRound price={213} unit='€' size='medium' isNew={true}/>
+              <IconSVG name='arrowDownBlue' className={open ? styles.arrowUp : styles.arrowDown}/>
+              {/* <SvgIcon component={SvgArrowDownBlue} viewBox='-100 -100 400 400' /> */}
+            </span>
+          </span>
+        </AccordionSummary>
+        <Divider />
+        <AccordionDetails className={classes.accordionWrapper}>
+          {/* <Typography> */}
+          <OrderOverviewItem fieldRight={intoAccordionFieldRight[0]} fields={intoAccordionField[0]} title={intoAccordionTitles[0]}/>
+          <Divider/>
+          <OrderOverviewItem fieldRight={intoAccordionFieldRight[1]} fields={intoAccordionField[1]} title={intoAccordionTitles[1]}/>
+        </AccordionDetails>
+      </Accordion>
+      {/* delete */}
+      {iconNames.map((iconName, index) => (
+          <PaymentTypeCard squareRadioClassname={index < 2 && true} checked={checkedBox[index]} checkbox={true} onChange={onChange} monthly='week' price={2} key={index} label={renderCheckout(index)} infoContent={paymentinfoContent[index]} iconName={iconName} value={index} {...paymentTypeProps} />
+        ))}
+      {/* delete */}
+    </Resizable>
+  )
+}
+
+storiesOf('Checkout', module)
+  .add('OrderOverviewItem', () => <OrderOverviewItemWrapper />)

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

@@ -0,0 +1,21 @@
+@import '../../../theme/theme.styl'
+
+.arrowUp
+  transform: rotate(180deg)
+  transition: .4s
+
+.arrowDown
+  transition: .4s
+
+.summaryWrapper
+  width: 100%
+  display: flex
+  justify-content: space-between
+
+.price
+  margin-right: 10px
+
+.accordion
+  display: block
+  margin-top: 20px
+  

package/source/components/Checkout/RadioCards/RadioGroupCheckout.story.js

@@ -0,0 +1,105 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import PaymentTypeCard from './PaymentTypeCard/PaymentTypeCard';
+import ServiceCardWrapper from './AdditionalServiceCard/ServiceCardWrapper';
+import RadioGroup from '../../_common/Radio/RadioGroup';
+
+import styles from './RadioGroupCheckout.story.styl';
+export class RadioGroupCheckoutVertical extends React.Component {
+  state = {
+    value: 0
+  };
+
+  action = action('change');
+  onChange = (event, value) => {
+    this.action(event, value);
+    this.setState(() => ({ value }));
+  };
+
+  renderCheckout = (index) => {
+    const financing = ['Financing', 'Leasing', 'Buy', 'Abo'];
+
+    return (
+      <div className={styles.equipment}>
+        <div className={styles.column}>
+          <span className={styles.titleCheckout}>
+            {financing[index]}
+          </span>
+        </div>
+      </div>
+    );
+  };
+
+  render() {
+    const radioProps = {
+      labelClassName: styles.checkoutLabel
+    }
+
+    const paymentTypeProps = {
+      labelClassName: styles.checkoutLabel,
+    }
+
+    const infoContent = [
+    'Zulassung bei Ihrer Zulassungsstelle vor Ort',
+    'Zulassung vor Ort inkl. Wunschkennzeichen',
+    'Sie organisieren die Zulassung selbst'
+    ];
+
+    const paymentinfoContent = [
+    '81% of our customers find the perfect financing through auto.de',
+    'Lease your car with ease',
+    'Subscribe to your dream car flexibly',
+    'Buy your car now'
+    ];
+
+    const iconNames = [
+      'financingIcon',
+      'leasingIcon',
+      'buyIcon',
+      'aboIcon',
+    ]
+
+    const values = [0, 1, 2]
+
+    const vehicleDeliveryProps = {
+      additionalOptions: infoContent,
+      price: 0,
+      labelClassName: styles.checkoutLabel,
+      monthly: 'week'
+    }
+
+    const onCheckoutModalClick = (modalContent) => {
+      alert('modalWindow');
+    }
+
+    return (
+      <>
+      <RadioGroup name='sub_model' containerClassName={styles.vertical} childClassName={styles.verticalChild} value={this.state.value} onChange={this.onChange}>
+        {iconNames.map((iconName, index) => (
+          <PaymentTypeCard onCheckoutModalClick={onCheckoutModalClick} tooltip={true} monthly='week' key={index} disabled={index === 1 && true} label={this.renderCheckout(index)} infoContent={paymentinfoContent[index]} value={index} {...paymentTypeProps} />
+        ))}
+      </RadioGroup>
+      <RadioGroup name='name' containerClassName={styles.vertical} childClassName={styles.verticalChild} value={this.state.value} onChange={this.onChange}>
+        {values.map((value, index) => (
+        <ServiceCardWrapper onCheckoutModalClick={onCheckoutModalClick} warrantyCard={true} key={index} additionalOptions={infoContent} index={index} price={2} label={this.renderCheckout(0)} infoContent={infoContent[value]} value={value} {...radioProps} additional={true} footerText='Komplette Leistungsübersicht'/>
+        ))}
+      </RadioGroup>
+      <RadioGroup name='name' containerClassName={styles.vertical} childClassName={styles.verticalChild} value={this.state.value} onChange={this.onChange}>
+        <ServiceCardWrapper tooltip={true} deliveryCard={true} deliveryIcon='delivery' label={this.renderCheckout(0)} infoContent={infoContent[1]} value={0} {...vehicleDeliveryProps} delivery={true}>
+          <input type='text'></input>
+        </ServiceCardWrapper>
+        <ServiceCardWrapper content='delivery content' tooltip={true} deliveryCard={true} deliveryIcon='pickYourself' label={this.renderCheckout(1)} value={1} distance={500} {...vehicleDeliveryProps} />
+      </RadioGroup>
+      </>
+    );
+  }
+}
+
+storiesOf('checkout', module)
+.add('RadioGroupCheckout', () => (
+  <div>
+    <RadioGroupCheckoutVertical />
+  </div>
+));

package/source/components/Checkout/RadioCards/RadioGroupCheckout.story.styl

@@ -0,0 +1,37 @@
+.default
+  padding: 10px
+  border-radius: 5px
+  margin-bottom: 20px
+  display: flex
+  flex-direction: row
+  align-items: center
+  justify-content: space-between
+
+.vertical
+  composes: default
+  display: flex
+  flex-direction: column
+  align-items: center
+  padding: 10px
+  max-width: 500px
+
+.verticalChild:not(:last-of-type)
+  margin-bottom: 10px
+
+.equipment
+  display: flex
+  flex-direction: row
+  align-items: center
+  justify-content: space-between
+
+.column
+  display: flex
+  flex-direction: column
+  align-items: stretch
+
+.title
+  font-size: 10px
+
+.value
+  font-size: 14px
+

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>
+  ));