@bytebrand/fe-ui-core 4.8.54 → 4.8.55

package/source/components/OfferPanel/OfferPanel.story.js

@@ -0,0 +1,139 @@
+import React, { useReducer, useState } from 'react';
+import { Resizable } from 're-resizable';
+import { storiesOf } from '@storybook/react';
+// Components
+import OfferPanel from './OfferPanel';
+
+const resizableProps = {
+  minWidth: 250,
+  defaultSize: { width: 320, height: 400 }
+};
+
+const slidersConfig = {
+  financing_purchasePrice: {
+    caption: 'Anzahlung und PKW-Ankauf',
+    min: 0, max: 1500, step: 100, unit: '€'
+  },
+  financing_firstInstallment: {
+    caption: 'Laufleistung / Jahr',
+    min: 0, max: 10000, step: 100, unit: 'km'
+  },
+  financing_annualMileage: {
+    caption: 'Laufleistung / Jahr',
+    min: 10000, max: 50000, step: 5000, unit: 'km'
+  },
+  financingPaybackPeriod: {
+    caption: 'duration',
+    min: 30, max: 60, step: 6, unit: 'months'
+  },
+  leasing_firstInstallment: {
+    caption: 'Laufleistung / Jahr',
+    min: 0, max: 10000, step: 100, unit: 'km'
+  },
+  leasing_annualMileage: {
+    caption: 'Laufleistung / Jahr',
+    min: 10000, max: 50000, step: 5000, unit: 'km'
+  },
+  leasingPaybackPeriod: {
+    caption: 'duration',
+    min: 30, max: 60, step: 6, unit: 'months'
+  },
+  abo_firstInstallment: {
+    caption: 'Laufleistung / Jahr',
+    min: 0, max: 10000, step: 100, unit: 'km'
+  },
+  abo_annualMileage: {
+    caption: 'Laufleistung / Jahr',
+    min: 10000, max: 50000, step: 5000, unit: 'km'
+  },
+  aboPaybackPeriod: {
+    caption: 'duration',
+    min: 30, max: 60, step: 6, unit: 'months'
+  }
+};
+
+const initialSlidersState = {
+  transportationCost: '499',
+  hasFinalInstallment: true,
+  purchasePrice: 1000,
+  firstInstallment: 2000,
+  paybackPeriod: 24,
+  finalAdvice: false,
+  transferInstallments: true,
+  additionalService: false,
+  finTransportation: '20.79',
+  finAddServices: '499',
+  // financingProps: {
+  priceTabIndex: 0,
+  // firstInstallment,
+  // annualMileage,
+  // paybackPeriod,
+  // priceTabIndex,
+  // finAddServices,
+  // finTransportation,
+  // finWithAddServices,
+  // finWithTransportation,
+  // withFinalInstallment,
+  // transportationCost: 499,
+  addServicesCost: 799,
+  buy: {
+    transportationCost: 499,
+    addServicesCost: 799
+  },
+  leasing: {
+    annualMileage: 25000,
+    firstInstallment: 3000,
+    paybackPeriod: 60,
+    transportationCost: 499,
+    addServicesCost: 799,
+    transferInstallments: false,
+    additionalService: true,
+  },
+  abo: {
+    annualMileage: 25000,
+    firstInstallment: 3000,
+    paybackPeriod: 9,
+    transportationCost: 499,
+    addServicesCost: 799,
+    transferInstallments: false,
+    additionalService: true,
+  }
+  // }
+};
+
+const reducer = (state, action) => ({ ...state, [action.type]: action.payload });
+
+const t = phrase => ({
+  'modals:financing.financingModel': 'Financing model',
+  'modals:financing.withFinalRate': 'with final rate',
+  'modals:financing.withoutFinalRate': 'without final rate',
+  'modals:financing.runningTime': 'Laufzeit',
+  'modals:financing.runningTimeSub': '(Monate)',
+  'modals:financing.finalAdvice': 'Mit Schlussrate',
+  'modals:financing.transferInstallments': 'Überführungskosten in Rate einberechnen',
+  'modals:financing.transferInstallmentsTooltip': 'Die Kosten für die Überführung Ihres Fahrzeugs wird in die zu zahlenden Raten mit einberechnet.',
+  'modals:financing.additionalServiceRate': 'Lieferung nach Hause',
+  'modals:financing.additionalServiceTooltip': 'The recurring costs for the transfer of your car will be calculated in the monthly rate.'
+}[phrase]);
+
+const OfferPanelWrapper = () => {
+  const [state, dispatch] = useReducer(reducer, initialSlidersState);
+  
+  
+  const props = {
+    t,
+    slidersConfig,
+    financingProps: state,
+    priceTabIndex: 3,
+    onChange: (value, name) => dispatch({ type: name, payload: value })
+  };
+  
+  return (
+    <Resizable {...resizableProps}>
+      <OfferPanel {...props} />
+    </Resizable>
+  );
+}
+
+storiesOf('OfferPanel', module)
+  .add('OfferPanel', () => <OfferPanelWrapper />);

package/source/components/OfferPanel/OfferPanel.tsx

@@ -71,7 +71,7 @@ const OfferPanel: FC<IFinancingPanel> = ({
 
           {priceTabIndex === THREE
             ? <div className={styles.aboAccordionWrapper}><AboAccordion /></div>
-            : <div className={styles.offerCheckboxGroup}><OfferCheckboxGroup {...{ transferInstallments, additionalService }} /></div>}
+            : <div className={styles.offerCheckboxGroup}><OfferCheckboxGroup {...{ transferInstallments, additionalService, priceTabIndex }} /></div>}
         </>
       }
     </form>

package/source/components/OfferPanel/RangeGroup/RangeGroup.story.js

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import RangeGroup from './RangeGroup';
+
+import styles from './RangeGroup.story.styl';
+
+const RangeGroupWrapper = () => {
+  const [value, setValue] = useState(300);
+
+  const onChange = (value) => {    
+    
+    setValue(value);
+    action('onChange');
+  };
+
+  const props = {
+    value,
+    onChange,
+    min: 0,
+    max: 10000,
+    step: 100,
+    onAfterChange: action('onAfterChange')
+  };
+
+  return (
+    <div className={styles.container}>
+      <RangeGroup {...props} />
+    </div>
+  );
+};
+
+storiesOf('_Common_UI', module)
+  .add('RangeGroup', () => <RangeGroupWrapper />);

package/source/components/OfferPanel/RangeGroup/RangeGroup.story.styl

@@ -0,0 +1,3 @@
+.container
+  width: 300px
+  height: 100px

package/source/components/PriceRating/PriceRating.story.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import PriceRating from './PriceRating';
+
+import styles from './PriceRating.story.styl';
+
+const t = (phrase) => {
+  const dict = {
+    noRating: 'No rating',
+    highPrice: 'High price',
+    increasedPrice: 'Increased price',
+    fairPrice: 'Fair price',
+    goodPrice: 'Good price',
+    topPrice: 'Top price'
+  };
+
+  return dict[phrase];
+}
+
+const props = {
+  t,
+  className: styles.item,
+  onClick: action('click')
+};
+
+storiesOf('Price review', module)
+  .add('PriceRating', () => (
+    <div>
+      <PriceRating className={styles.item} t={t} />
+      <PriceRating { ...props } darkBackground={true} />
+      <PriceRating { ...props } rating={1} />
+      <PriceRating { ...props } rating={2} />
+      <PriceRating { ...props } rating={3} />
+      <PriceRating { ...props } rating={4} />
+      <PriceRating { ...props } rating={5} />
+    </div>
+  ));

package/source/components/PriceRating/PriceRating.story.styl

@@ -0,0 +1,2 @@
+.item
+  margin-bottom: 10px

package/source/components/PriceRatingDetailed/PriceRatingDetailed.story.js

@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+import { Resizable } from 're-resizable';
+import { storiesOf } from '@storybook/react';
+
+import PriceRatingDetailed from './PriceRatingDetailed';
+import { getPriceRatingConfig, getPriceRating } from '../../framework/utils/CommonUtils';
+
+import styles from './PriceRatingDetailed.story.styl';
+
+const resizableProps = {
+  minWidth: 150,
+  defaultSize: { width: 550, height: 500 }
+};
+
+const t = (phrase) => {
+  const dict = {
+    noRating: 'No rating',
+    highPrice: 'High',
+    increasedPrice: 'Increased price',
+    fairPrice: 'Fair price',
+    goodPrice: 'Good price',
+    topPrice: 'Top price',
+
+    noRatingCompact: 'No rating',
+    highPriceCompact: 'High',
+    increasedPriceCompact: 'Increased',
+    fairPriceCompact: 'Fair',
+    goodPriceCompact: 'Good',
+    topPriceCompact: 'Top',
+
+    priceTo: 'to'
+  };
+
+  return dict[phrase];
+}
+
+const Wrapper = () => {
+  const [currentSalesPrice, changeCurrentSalesPrice] = useState(9000);
+  const [predictablePrice, changePredictablePrice] = useState(12000);
+
+  const priceProps = {
+    t,
+    className: styles.item,
+    price: +currentSalesPrice,
+    ratingConfig: getPriceRatingConfig(+currentSalesPrice, +predictablePrice),
+    rating: getPriceRating(+currentSalesPrice, +predictablePrice)
+  };
+
+  return (
+    <div>
+      <div className={styles.dropdownSection}>
+        <label>
+          <h3>Current Sails Price:</h3>
+          <input
+            type="number"
+            value={currentSalesPrice}
+            onChange={(event) => changeCurrentSalesPrice(event.target.value)}
+          />
+        </label>
+        <label>
+          <h3>Predictable Price:</h3>
+          <input
+            type="number"
+            value={predictablePrice}
+            onChange={(event) => changePredictablePrice(event.target.value)}
+          />
+        </label>
+      </div>
+      <Resizable {...resizableProps}>
+        <PriceRatingDetailed {...priceProps} mode={'general'} />
+        <PriceRatingDetailed {...priceProps} mode={'compact'} />
+      </Resizable>
+    </div>
+  );
+};
+
+storiesOf('Price review', module)
+  .add('PriceRatingDetailed', () => <Wrapper />);

package/source/components/PriceRatingDetailed/PriceRatingDetailed.story.styl

@@ -0,0 +1,11 @@
+.item
+  margin-bottom: 70px
+
+.dropdownSection
+  display: flex
+  margin-bottom: 50px
+  &>label
+    flex: 1
+    padding: 0 5px
+    &>input
+      width: 100%

package/source/components/RateSearchValue/RateSearchValue.story.js

@@ -0,0 +1,78 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import RateSearchValue from './RateSearchValue';
+
+import styles from './RateSearchValue.story.styl';
+
+const t = (phrase, options = {}) => {
+  const { value } = options;
+  const dictionary = {
+    monthlyInstallmentLabel: 'Monatsrate:',
+    monthlyInstallmentFromValue: `ab ${value} €`,
+    monthlyInstallmentToValue: `bis ${value} €`,
+    paybackPeriodValue: `${value} Monate`,
+    firstInstallmentValue: `${value} € Anzahlung`,
+    defaultValue: 'beliebig, 60 Monate'
+  };
+
+  return dictionary[phrase];
+};
+
+const RateSearchWidgetWrapper = () => {
+
+  const propsWithLabel = {
+    t,
+    className: styles.item,
+    monthlyInstallmentFrom: 1000,
+    monthlyInstallmentTo: 1500,
+    firstInstallment: 3000,
+    paybackPeriod: 60,
+    onClick: action('click'),
+  };
+
+  const propsWithoutLabel = {
+    t,
+    className: styles.item,
+    showLabel: false,
+    monthlyInstallmentFrom: 1000,
+    monthlyInstallmentTo: 1500,
+    firstInstallment: 3000,
+    paybackPeriod: 60,
+    onClick: action('click'),
+  };
+
+
+  const props_1 = {
+    t,
+    className: styles.item,
+    monthlyInstallmentFrom: null,
+    monthlyInstallmentTo: 'any',
+    firstInstallment: null,
+    paybackPeriod: null,
+    onClick: action('click')
+  };
+
+  const props_2 = {
+    t,
+    className: styles.item,
+    monthlyInstallmentFrom: 1000,
+    firstInstallment: '0',
+    paybackPeriod: 60,
+    onClick: action('click')
+  };
+
+  return (
+    <div>
+      <RateSearchValue {...propsWithLabel} />
+      <RateSearchValue {...propsWithoutLabel} />
+      <RateSearchValue {...props_1} />
+      <RateSearchValue {...props_2} />
+    </div>
+  );
+};
+
+storiesOf('RateSearchValue', module)
+  .add('RateSearchValue', () => <RateSearchWidgetWrapper />);

package/source/components/RateSearchValue/RateSearchValue.story.styl

@@ -0,0 +1,2 @@
+.item
+  margin: 10px

package/source/components/RateSearchWidget/RateSearchWidget.story.js

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import RateSearchWidget from './RateSearchWidget';
+
+import styles from './RateSearchWidget.story.styl';
+
+const t = (phrase) => {
+  const dictionary = {
+    title: 'Adjust rate details',
+    months: 'Months',
+    monthlyInstallment: 'Monthly rate (€)',
+    monthlyInstallmentFrom: 'Monthly rate from (€)',
+    monthlyInstallmentTo: 'Monthly rate up to (€)',
+    firstInstallment: 'Deposit',
+    paybackPeriod: 'Running time',
+    any: 'any',
+
+    firstInstallmentPlaceholder: 'Deposit',
+    monthlyInstallmentFromPlaceholder: 'Rate from',
+    monthlyInstallmentToPlaceholder: 'Rate to',
+    paybackPeriodPlaceholder: 'Period',
+
+    apply: 'Apply',
+    abort: 'abort'
+  };
+
+  return dictionary[phrase];
+};
+
+const RateSearchWidgetWrapper = () => {
+
+  const props = {
+    t,
+    className: styles.item,
+
+    monthlyInstallmentFrom: 'any',
+    monthlyInstallmentTo: 'any',
+    firstInstallment: 0,
+    paybackPeriod: 60,
+
+    onAbort: action('abort'),
+    onApply: action('apply')
+  };
+
+  return (
+    <div className={styles.wrapper}>
+      <RateSearchWidget {...props} simpleMode={true} className={styles.accentClassName} />
+      <RateSearchWidget {...props} simpleMode={false} />
+    </div>
+  );
+};
+
+storiesOf('RateSearchWidget', module)
+  .add('RateSearchWidget', () => <RateSearchWidgetWrapper />);

package/source/components/RateSearchWidget/RateSearchWidget.story.styl

@@ -0,0 +1,12 @@
+@import '../../theme/theme.styl';
+
+.wrapper
+  display: flex
+  align-items: flex-start
+
+.item
+  max-width: 280px
+  margin: 10px
+
+.accentClassName
+  background-color: $grey-f2