@bytebrand/fe-ui-core 4.8.49 → 4.8.51

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

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

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

@@ -0,0 +1,46 @@
+@import '../../theme/mixins.styl'
+
+.serviceBlockItemWrapper
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 50px;
+  +media-phone-only()
+    grid-template-columns: repeat(1, 1fr);
+    grid-gap: 0;
+
+.linkContainer
+  width: 100%
+  box-sizing border-box
+  background-color white
+  display block
+
+.itext
+  font-size: 14px
+  color:  $grey-54
+  line-height: 30px;
+  list-style: none;
+  margin 0;
+  padding: 0
+
+  +media-phone-only()
+    font-size: 12px
+    color: rgba(0, 0, 0, 0.63);
+    line-height: 14px;
+    text-align: justify;
+
+  & > li
+    position relative;
+    padding-left: 40px;
+
+    +media-phone-only()
+      margin-top: 10px
+
+    &::before
+      content: ''
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 24px;
+      height: 24px;
+      background-image: url('../../../media/svg/common/insurance.svg');

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

@@ -0,0 +1,97 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+// import { aboFaq } from '../../../../framework/constants';
+import AboFaq from './AboFaq';
+
+
+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('Abo FAQ', module)
+  .add('default', () => (
+    <div>
+      <AboFaq />
+      {/* {aboFaq.map((item, index) =>
+        <span
+          className={styles.faqItem}
+          onClick={() => onShowFinancingDetailsClick('faqDetails', index)}
+          key={item}
+          >
+          {item}
+        </span>
+      )} */}
+    </div>
+  ));
+

package/source/components/OfferPanel/OfferCheckboxGroup/CheckboxContainer.tsx

@@ -21,7 +21,7 @@ export interface ICheckboxProps {
   checkboxClassName?: string;
   labelClassName?: string;
   labelPlacement?: 'end' | 'start' | 'top' | 'bottom';
-  tooltipDescription?: string;
+  tooltipDescription?: React.ReactNode;
   checkboxPriceValue: any;
   tooltipPosX?: string;
   error?: boolean;

package/source/components/OfferPanel/OfferCheckboxGroup/OfferCheckboxGroup.styl

@@ -111,6 +111,30 @@
     max-height: inherit;
     width: inherit !important
 
+  :global
+    .MuiTooltip-tooltip
+      max-width: 360px !important
+      font-size: 11px
+      line-height: 1.45
+      color: #4C4E64AD
+      text-align: left
+
+      b
+        display: block
+        margin-bottom: 6px
+        font-size: 12px
+        color: #1a1a1a
+
+      p
+        margin: 0 0 6px
+
+      ul
+        margin: 4px 0 0
+        padding-left: 16px
+
+      li
+        margin-bottom: 3px
+
 .checkboxPrice
   align-self: center;
   color: rgba(#000000, .63);

package/source/components/OfferPanel/OfferCheckboxGroup/OfferCheckboxGroup.tsx

@@ -16,7 +16,7 @@ const OfferCheckboxGroup: FC<IOfferPeriod> = ({ additionalService, transferInsta
   return (
     <div className={offerGroupClass}>
       {isAboAccordionExpanded0 && <CheckboxContainer {...additionalService } />}
-      <CheckboxContainer {...{ ...transferInstallments, isAboAccordionExpanded0 }} />
+      {priceTabIndex === 2 && <CheckboxContainer {...{ ...transferInstallments, isAboAccordionExpanded0 }} />}
     </div>
   );
 };

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