@bytebrand/fe-ui-core 4.8.48 → 4.8.50

package/source/components/UserDashboardPage/sections/RequestedCarsSection/RequestedCarsSection.story.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import RequestedCarsSection from './RequestedCarsSection';
+
+const requestedCars = [
+  {
+    car: {
+      _id: '1234567892',
+      mainData: {
+        make: 'Volvo',
+        model: 'CX90',
+        subModel: 'sub model',
+      },
+      metaData: {
+        mainImageId: 'main image id'
+      }
+    },
+    buyingType: 'leasing',
+    selfPickup: true,
+    paybackPeriod: 24,
+    monthlyInstallment: 1000,
+    status: 'selector_status_preparation',
+    request: '010203',
+    registration: true,
+    currentSalesPrice: 20000
+  },
+  {
+    car: {
+      _id: '1234567890',
+      mainData: {
+        make: 'Volvo',
+        model: 'CX90',
+        subModel: 'sub model',
+      },
+      metaData: {
+        mainImageId: 'main image id'
+      }
+    },
+    buyingType: 'financing',
+    selfPickup: false,
+    paybackPeriod: 24,
+    monthlyInstallment: 1000,
+    status: 'selector_status_registration',
+    request: '010203',
+    registration: false,
+    currentSalesPrice: 20000
+  }
+];
+
+const translates = {
+  'DealerDashboardPage:buyingType.buy': 'buy',
+  'DealerDashboardPage:buyingType.leasing': 'leasing',
+  'DealerDashboardPage:buyingType.financing': 'financing',
+  'DealerDashboardPage:paybackPeriod': 'payback period',
+  'DealerDashboardPage:currentSalesPrice': 'current sales price',
+  'DealerDashboardPage:monthlyInstallment': 'monthly installment',
+  'DealerDashboardPage:requestedCars.requestedCarsTitle':'Requested cars',
+  'DealerDashboardPage:requestedCars.toOffer': 'To offer',
+  'DealerDashboardPage:requestedCars.customerService':'Support',
+  'DealerDashboardPage:requestedCars.customerServiceText':'Do you have questions about your desired vehicle or about car financing, delivery or registration? Please use the contact form and let us know your question. We will get back to you as soon as possible. Thank you very much.',
+  'DealerDashboardPage:requestedCars.contact':'Contact'
+}
+
+const t = (phrase, options) => {
+  if (options) {
+    console.log('qqqq options ====', options);
+    const value = Object.values(options).map((option) => option)
+    return `${translates[phrase]} ${value}`;
+  }
+  return translates[phrase];
+}
+const LinkRouter = ({ children, link }) => {
+  return (
+    <a href={link} >
+      { children }
+    </a>
+  );
+};
+const initHotjar = () => {
+  console.log('Hotjar works')
+};
+
+const props = {
+  t,
+  redirectToCar: (id) => console.log(`redirect to car with id: ${id}`),
+  getSupportedImageFormat: (id, mainImageId, size) => 'https://images.autode-dev.de/carimage/28121b1a-398c-4e9c-9097-51be545817c5/RQ_mHNek5hIk/small-cached.webp',
+  requestedCars,
+  LinkRouter,
+  initHotjar
+};
+
+
+storiesOf('userDashboard', module)
+  .add('RequestedCarsSection', () => (
+    <RequestedCarsSection {...props} />
+  ));

package/source/components/Vehicle/VehicleConsumption/VehicleConsumption.story.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import VehicleConsumption from './VehicleConsumption';
+
+// Stateful container for testing interaction
+class VehicleConsumptionContainer extends React.Component {
+  render() {
+    const props = {
+      t: key => key,
+      consumption: {
+        consumptionCombined: 5.6
+      },
+      environmentEmissions: {
+        co2: 127
+      }
+    };
+
+    return (
+      <div>
+        <VehicleConsumption {...props} />
+      </div>
+    );
+  }
+}
+
+storiesOf('VehicleConsumption', module).add('Default', () => (
+  <div>
+    <VehicleConsumptionContainer />
+  </div>
+));

package/source/components/Vehicle/VehicleFormattedPrice/VehicleFormattedPrice.story.js

@@ -0,0 +1,247 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import VehicleFormattedPrice from './VehicleFormattedPrice';
+
+const container = {
+  width: 400,
+};
+
+const item = {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center'
+};
+
+const storiesDefault = [
+  {
+    title: 'simple case',
+    props: {
+      price: 176,
+      isOld: true
+    }
+  },
+  {
+    title: 'falsie value',
+    props: {
+      price: 0,
+      isOld: true,
+      toRound: false
+    }
+  },
+  {
+    title: 'large number',
+    props: {
+      price: 6500000,
+      isOld: true
+    }
+  },
+  {
+    title: 'not rounded',
+    props: {
+      price: 19689.23,
+      toRound: false
+    }
+  },
+  {
+    title: 'type "new"',
+    props: {
+      price: 19689.23,
+      isNew: true
+    }
+  },
+  {
+    title: 'type "old"',
+    props: {
+      price: 19689.23,
+      isOld: true
+    }
+  }
+  // {
+  //   title: 'short',
+  //   props: {
+  //     price: 42
+  //   }
+  // },
+  // {
+  //   title: 'short grouped',
+  //   props: {
+  //     price: 42069
+  //   }
+  // },
+  // {
+  //   title: 'long',
+  //   props: {
+  //     price: 69000000,
+  //     unit: '₴'
+  //   }
+  // },
+  // {
+  //   title: 'very long',
+  //   props: {
+  //     price: 419999999999999
+  //   }
+  // },
+  // {
+  //   title: 'postfixed',
+  //   props: {
+  //     price: 12345,
+  //     postfix: 1
+  //   }
+  // }
+];
+
+const storiesLarge= [
+  {
+    title: 'simple case',
+    props: {
+      price: 176,
+      size: 'large'
+    }
+  },
+  {
+    title: 'large number',
+    props: {
+      price: 6500000,
+      size: 'large'
+    }
+  },
+  {
+    title: 'not rounded',
+    props: {
+      price: 19689.23,
+      toRound: false,
+      size: 'large'
+    }
+  },
+  {
+    title: 'type "new"',
+    props: {
+      price: 19689.23,
+      isNew: true,
+      size: 'large'
+    }
+  },
+  {
+    title: 'type "old"',
+    props: {
+      price: 19689.23,
+      isOld: true,
+      size: 'large'
+    }
+  }
+];
+
+const storiesSmall= [
+  {
+    title: 'simple case',
+    props: {
+      price: 176,
+      size: 'small'
+    }
+  },
+  {
+    title: 'large number',
+    props: {
+      price: 6500000,
+      size: 'small'
+    }
+  },
+  {
+    title: 'not rounded',
+    props: {
+      price: 19689.23,
+      toRound: false,
+      size: 'small'
+    }
+  },
+  {
+    title: 'type "new"',
+    props: {
+      price: 19689.23,
+      isNew: true,
+      size: 'small'
+    }
+  },
+  {
+    title: 'type "old"',
+    props: {
+      price: 19689.23,
+      isOld: true,
+      size: 'small'
+    }
+  }
+];
+
+const otherCases = [
+  {
+    title: 'old',
+    props: {
+      price: 19689.23,
+      disableStyles: true,
+      toRound: false,
+      isOld: true
+    }
+  },
+  {
+    title: 'disable unit and not rounded',
+    props: {
+      price: 19689.23,
+      unit: '',
+      disableStyles: true,
+      toRound: false
+    }
+  },
+  {
+    title: 'disable formatting',
+    props: {
+      price: 19689.23,
+      unit: '',
+      disableStyles: true,
+      toRound: false,
+      disableFormatting: true
+    }
+  }
+];
+
+storiesOf('FormattedPrice', module)
+  .add('default', () => (
+    <div style={container}>
+      {storiesDefault.map(({ title, props }, index) => (
+        <div style={item} key={index}>
+          <p>{title} ({props.price})</p>
+          <VehicleFormattedPrice {...props} />
+        </div>
+      ))}
+    </div>
+  ))
+  .add('large', () => (
+    <div style={container}>
+      {storiesLarge.map(({ title, props }, index) => (
+        <div style={item} key={index}>
+          <p>{title} ({props.price})</p>
+          <VehicleFormattedPrice {...props} />
+        </div>
+      ))}
+    </div>
+  ))
+  .add('small', () => (
+    <div style={container}>
+      {storiesSmall.map(({ title, props }, index) => (
+        <div style={item} key={index}>
+          <p>{title} ({props.price})</p>
+          <VehicleFormattedPrice {...props} />
+        </div>
+      ))}
+    </div>
+  ))
+  .add('other cases (without styles)', () => (
+    <div style={container}>
+      {otherCases.map(({ title, props }, index) => (
+        <div style={item} key={index}>
+          <p>{title} ({props.price})</p>
+          <VehicleFormattedPrice  {...props} />
+        </div>
+      ))}
+    </div>
+  ));

package/source/components/VehicleCompared/CompareGeneral/CompareGeneral.story.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import CompareGeneral from './CompareGeneral.tsx';
+
+const props = {
+  imageURL: 'http://87.118.82.201/carimage/c8374aa8-8266-4b40-81ca-f5fb0c71f993/swiJg18-76KK/small',
+  title: {
+    manufacturer: 'bmw',
+    model: '320',
+    subModel: 'Sport V6 HSE',
+    powerKW: 120,
+    powerPS: 100
+  },
+  price: {
+    currentPrice: 29000,
+    perMonthPrice: 1000,
+    currency: '€',
+    months: 20
+  },
+  onDeleteClick: action('click')
+};
+
+storiesOf('Compared vehicle', module)
+.add('Compare general', () => (
+  <div style={{ width: 300 }}>
+    <CompareGeneral {...props} />
+  </div>
+));

package/source/components/VehicleCompared/ComparePrice/ComparePrice.story.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import ComparePrice from './ComparePrice.tsx';
+
+const props = {
+  currentPrice: 29000,
+  perMonthPrice: 1000,
+  currency: '€',
+  months: 29
+};
+
+storiesOf('Compared vehicle', module)
+  .add('Compare price', () => (
+    <div style={{ background: 'lightgray', width: 300 }}>
+      <ComparePrice {...props} />
+    </div>
+));

package/source/components/VehicleCompared/CompareTitle/CompareTitle.story.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import CompareTitle from './CompareTitle.tsx';
+
+const props = {
+  manufacturer: 'bmw',
+  model: '320',
+  subModel: 'Sport V6 HSE',
+  powerKW: 120,
+  powerPS: 100
+};
+
+storiesOf('Compared vehicle', module)
+.add('Compare title', () => (
+  <div style={{ background: 'lightgray', width: 300 }}>
+    <CompareTitle {...props} />
+  </div>
+));

package/source/components/VehicleDetailedSidebar/VehicleDetailedSidebar.story.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Resizable } from 're-resizable';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import VehicleDetailedSidebar from './VehicleDetailedSidebar.tsx';
+
+
+const wrapperProps = {
+  border: '1px solid rgba(0,0,0,0.1)',
+  borderRadius: '2px',
+  backgroundColor: '#fff'
+};
+
+const resizableProps = {
+  minWidth: 595,
+  defaultSize: { width: 724, height: 'auto' }
+};
+
+const VehicleDetailedSidebarStory = () => {
+  const sidebarProps = {
+    title: {
+      make: 'BMW',
+      model: '218',
+      subModel: '218i Advantage',
+      powerKW: 100,
+      powerPS: 136,
+      isCarInFavorite: true,
+      onCarFavorite: action('onCarFavorite(event, id)')
+    }
+  };
+
+  return (
+    <>
+    <p>Sidebar on CDP</p>
+    <div style={wrapperProps}>
+      <Resizable {...resizableProps}>
+        <VehicleDetailedSidebar {...sidebarProps} />
+      </Resizable>
+    </div>
+    </>
+  );
+};
+
+storiesOf('VehicleDetailedSidebar', module).add('VehicleDetailedSidebar', () => <VehicleDetailedSidebarStory />);

package/source/components/VehicleDetailedSidebar/VehicleDetailedSidebar.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, FunctionComponent } from 'react';
+import React, { useState, useEffect, useRef, FunctionComponent } from 'react';
 import _get from 'lodash/get';
 import { Hidden } from 'react-grid-system';
 import PriceContent from './partials/PriceContent';
@@ -104,19 +104,31 @@ const VehicleDetailedSidebar: FunctionComponent<IVehicleDetailedSidebarProps> =
     }
   ];
 
+  const initialDefaultAppliedForPath = useRef<string | null>(null);
+
   useEffect(() => {
     const getlocalStorageActiveTabCDP = localStorage.getItem('activeTabCDP');
-    if (!getlocalStorageActiveTabCDP) return;
-    const activeTab = tabsTitles.findIndex(({ title }: { title: string }) => {
-      return title === getlocalStorageActiveTabCDP;
-    });
-    if (activeTab === -1) {
-      setActiveTab(null, 0);
-    } else {
-      setActiveTab(null, activeTab);
+    if (getlocalStorageActiveTabCDP) {
+      const activeTab = tabsTitles.findIndex(({ title }: { title: string }) => {
+        return title === getlocalStorageActiveTabCDP;
+      });
+      if (activeTab === -1) {
+        setActiveTab(null, 0);
+      } else {
+        setActiveTab(null, activeTab);
+      }
+      localStorage.removeItem('activeTabCDP');
+      initialDefaultAppliedForPath.current = pathname;
+      return;
+    }
+    if (
+      initialDefaultAppliedForPath.current !== pathname
+      && _get(price, 'leasing.isActive', false)
+    ) {
+      setActiveTab(null, 1);
+      initialDefaultAppliedForPath.current = pathname;
     }
-    localStorage.removeItem('activeTabCDP');
-  }, [pathname, activeTab]); // tslint:disable-line:align
+  }, [pathname, activeTab, price]); // tslint:disable-line:align
 
   const priceProps = {
     tabsTitles,

package/source/components/VehicleDetailedSlider/VehicleDetailedSlider.story.js

@@ -0,0 +1,120 @@
+import React from 'react';
+import i18next from 'i18next';
+import { Resizable } from 're-resizable';
+import { withNamespaces } from 'react-i18next';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import VehicleDetailedSlider from './VehicleDetailedSlider.tsx';
+
+i18next.addResourceBundle('de', 'VehicleDetailsPage', {
+  "slider": {
+    "topPrices": "Top-Preise",
+    "comingSoon": "Demnächst",
+    "firstPicture": "Erstes Bild",
+    "currentSlide": "von",
+    "fullScreen": "Vollbild",
+    "exterior": "Außen",
+    "interior": "Innen",
+    "comparableCars": "Vergleichbare Autos",
+    "comparableCarsMobile": "Vergleichbare Autos",
+    "othersLooked": "Andere haben ebenso angeschaut",
+    "saveCarAsFavorites": "{{ count }} Favoriten",
+    "customersLookingTheCar": "{{ count}} Ansichten",
+    "checked": "geprüft",
+    "easy": "einfach",
+    "safe": "sicher",
+    "toBuy": "kaufen",
+    "callForFree": "kostenfrei anrufen",
+    "save": "sparen",
+    "new": "neu"
+  },
+});
+
+const wrapperProps = {
+  border: '1px solid rgba(0,0,0,0.1)',
+  borderRadius: '2px',
+  backgroundColor: '#fff'
+};
+
+const resizableProps = {
+  minWidth: 595,
+  defaultSize: { width: 724, height: 'auto' }
+};
+
+const IMAGE_URL = 'https://picsum.photos/400/300/?random';
+const images = [];
+for (let i = 0; i <= 10; i++) {
+  images.push({
+    imageUrlSmall: `${IMAGE_URL}&tag=${Math.random()}`,
+    imageUrlLarge: `${IMAGE_URL}&tag=${Math.random()}`
+  });
+}
+
+
+const VehicleDetailedSliderStory = () => {
+  const sliderProps = {
+    showModal: action('showModal(id: string, props?: any)'),
+    hideModal: action('hideModal(id: string)'),
+    price: {
+      monthlyInstallment: 29,
+      oldMonthlyInstallment: 49,
+      isStrikeShown: true,
+      currency: "EUR",
+      currentSalesPrice: 16160,
+      historyPriceDifference: 5629.6,
+      historyPriceDifferencePerCent: 26,
+      mlCurrentSalesPriceCategory: null,
+      mlCurrentSalesPriceDiffPercent: null,
+      mlCurrentSalesPricePredicted: 100,
+      totalCurrent: 50,
+      originalSalesPrice: 13467,
+      priceDate: null,
+      priceId: null,
+      recomendedRetailPrice: null,
+      retailToCurrentPriceDifference: 0,
+      vatDeductible: null,
+      vatRate: 7,
+      wasPrice: 10000,
+      leasing: {
+        monthlyInstallment: 49,
+        oldMonthlyInstallment: 69,
+        isActive: true
+      },
+      buy: {
+        currentSalesPriceExtra: 16110,
+        highestPriceExtra: 19349
+      }
+    },
+    modificationDate: 1535760000,
+    mainImageUrl: 'http://placehold.jp/400x300.png?text=mainImage',
+    mainImageBlur: true,
+    showNewLabel: true,
+    photos: images,
+    exteriorPhotos: 'http://placehold.jp/400x300.png?text=mainImage',
+    interiorPhoto: 'http://placehold.jp/400x300.png?text=mainImage',
+    statsData: {
+      totalCarImpCount: 10,
+      totalFavCount: 20,
+    },
+    make: 'Audi',
+    model: 'A4',
+    subModel: 'Shooting Brake',
+    powerKW: 35,
+    powerPS: 120,
+    isFavorite: false,
+    onCarFavorite: action('onCarFavorite(event, id)')
+  };
+
+  return (
+    <>
+    <p>Main image on CDP with MagnifyGlass</p>
+    <div style={wrapperProps}>
+      <Resizable {...resizableProps}>
+        <VehicleDetailedSlider {...sliderProps} />
+      </Resizable>
+    </div>
+    </>
+  );
+};
+
+storiesOf('VehicleDetailedSlider', module).add('VehicleDetailedSlider', () => <VehicleDetailedSliderStory />);

package/source/components/VehicleDetailedSlider/VehicleDetailedSlider.tsx

@@ -338,6 +338,7 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
 
     const priceProps = {
       t,
+      financingConfig,
       showNewLabel,
       showDownPayment,
       financingFirstInstallment,