@bytebrand/fe-ui-core 4.8.49 → 4.8.51

package/source/components/VehicleSmallCard/VehicleSmallCard.story.js

@@ -0,0 +1,412 @@
+import React from 'react';
+import i18next from 'i18next';
+import { Resizable } from 're-resizable';
+import classnames from 'classnames';
+// import * as CheckboxTree from 'react-checkbox-tree';
+import { withNamespaces } from 'react-i18next';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+// import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
+import VehicleSmallCard from './VehicleSmallCard.tsx';
+import styles from './VehicleSmallCard.story.styl';
+
+
+i18next.addResourceBundle('de', 'vehicleProps', {
+  value: {
+    mileage: "{{mileage}} km",
+    consumption: "{{consumption}}l/100km",
+    consumptionPower: "{{consumption}}kWh/100km",
+    consumptionPowerCombined: "{{consumption}}kWh/100km (komb)*",
+    consumptionGas: "{{consumption}}kg/100km",
+    consumptionCombined: "{{consumption}}l/100km",
+    power: "{{powerKW}}\u00A0kW ({{powerPS}}\u00A0PS)",
+    powerPS: "{{powerPS}} PS",
+    deliveryPeriodMonths: "{{count}} Monat\nab Bestellung",
+    deliveryPeriodDays: "{{count}} Tag\nab Bestellung",
+    co2Combined: "{{co2}}g CO2/km (komb)*",
+    co2: "{{co2}} g/km ",
+    na: "N/A"
+  },
+  priceRating: {
+    noRating: 'KEINE BEWERTUNG',
+    highPrice: 'HOHER PREIS',
+    increasedPrice: 'ERHÖHTER PREIS',
+    fairPrice: 'FAIRER PREIS',
+    goodPrice: 'GUTER PREIS',
+    topPrice: 'TOP PREIS'
+  },
+  promoSlider: {
+    consumptionCombined: `{{consumptionCombined}} l/100km (komb)*`,
+    co2: `{{co2}} g CO2/km (komb)*`,
+    new: 'neu'
+  },
+  title: {
+    addOfferToMainSlide: 'Zum Schieberegler hinzufügen',
+    toOffer: 'zum Angebot',
+    monthlyFrom: 'monatlich ab',
+    financing: 'Finanzierung',
+    leasing: 'Leasing',
+    abo: 'Abo',
+    buy: 'Kaufen',
+    margeInkl: "inkl. Marge",
+    marge: "Unsere Marge",
+    financingDescription: `Bei der Finanzierung zahlen Sie lediglich die Zinsen des Darlehens und einen geringen Tilgungsanteil.
+    Zum Vertragsende können Sie entscheiden, ob Sie den Restbetrag ablösen oder weiter finanzieren wollen.`,
+    leasingDescription: `Beim Leasing zahlen Sie lediglich die Zinsen des Darlehens und einen geringen
+    Tilgungsanteil. Zum Vertragsende geben Sie das Auto einfach wieder zurück.`,
+    aboDescription: `Bei diesem Auto-Abo ist bereits alles an Bord. Teil- und
+    Vollkasko sowie Haftpflicht sind inklusive, ebenso wie Wartungs- und Verschleißreparaturen.
+    Sie zahlen also nur Ihre Rate und Kraftstoff.`,
+    buyDescription: `Nach Kaufabschluss haben Sie die sofortigen
+    Eigentumsrechte und keine Finanzierungskosten. Als Eigentümer können Sie Ihr Fahrzeug zu
+    eigenen Konditionen weiter verkaufen und Änderungen vornehmen.`
+  }
+});
+
+const resizablePropsSlider = {
+  minWidth: 150,
+  defaultSize: { width: 360, height: 'auto' }
+};
+const resizableProps = {
+  className: styles.resizable,
+  minWidth: 150,
+  defaultSize: { width: 360, height: 'auto' }
+};
+
+const resizablePropsComparable = {
+  className: styles.resizable,
+  minWidth: 150,
+  defaultSize: { width: 230, height: 'auto' }
+};
+
+const resizablePropsSearch = {
+  className: styles.resizable,
+  defaultSize: { width: 803, height: 283 }
+};
+
+const resizablePropsAlternative = {
+  className: styles.resizable,
+  defaultSize: { width: 803 } // height: 265
+};
+
+const IMAGE_URL = 'https://picsum.photos/400/300/?random';
+const images = [];
+for (let i = 0; i <= 10; i++) {
+  images.push({ url: `${IMAGE_URL}&tag=${Math.random()}`, description: '' });
+}
+
+
+
+
+const VehicleSmallCardStory = withNamespaces('vehicleProps')(({ t }) => {
+
+  const renderCircularProgressbar = (percentage) => {
+    const checkPercentage = percentage < 50 ?
+    '#EE0202' :
+    (percentage >= 50 && percentage < 80) ?
+    '#00B800' :
+    '#005CCB';
+    return (
+      <div className={
+        classnames(
+          styles.progressWrap,
+          { [styles.progressWrapFull]: percentage === 100 },
+          { [styles.progressWrapMin]: percentage < 10 }
+        )
+      }>
+        <CircularProgressbar
+          value={percentage}
+          text={`${percentage}`}
+          styles={buildStyles({
+            textSize: '32px',
+            pathColor: checkPercentage,
+            textColor: checkPercentage,
+            trailColor: '#D5D5D5'
+          })}
+        />
+      </div>
+    );
+  };
+
+  const cardPropsSlider = {
+    t,
+    language: 'de',
+    vehicleComponentName: 'landing',
+    isAlternative: false,
+    showSlider: true,
+    showNewLabel: true,
+    slider: {
+      mainImageUrl: 'http://placehold.jp/400x300.png?text=mainImage',
+      images,
+      arrowsSize: 'md',
+      onFirstChange: action('first change')
+    },
+    stats: {
+      imagesCount: 100,
+      isFavoured: true,
+      statsData: {
+        totalCarImpCount: 10,
+        totalFavCount: 20,
+      },
+      statsSize: 'xs'
+    },
+    title: {
+      make: 'Audi',
+      model: 'A4',
+    },
+    info: {
+      mileage: 10464,
+      regDate: 1535760000,
+      gearbox: 'selector_gearbox_automatic'
+    },
+    environmentEmissions: {
+      co2: 8.7
+    },
+    consumption: {
+      consumptionCombined: 9.6,
+      consumptionPowerCombined: 3.6,
+      fuel: 'selector_fuel_electrical'
+    },
+    engineData: {
+      cubicCapacity: 1968,
+      cylinders: 0,
+      particulateFilterDiesel: true,
+      powerKW: 140,
+      powerPS: 190,
+      startStopSystem: true,
+    },
+    offer : {
+      availabilityFrom: null,
+      availabilityMode: "selector_availabilityMode_always",
+      deliveryPeriod: "selector_unknown"
+    },
+    financing: {
+      annualPercentageRate: "",
+      bank: "",
+      closingCosts: null,
+      conditions: null,
+      finalInstallment: null,
+      financingBank: "",
+      firstInstallment: 0,
+      grossLoanAmount: "",
+      monthlyInstallment: 108,
+      netLoanAmount: "",
+      nominalInterestRate: "",
+      paybackPeriod: "24",
+      paymentProtectionInsurance: "",
+      platformFinancingId: null,
+      transportationCosts: "",
+      typeOfNominalInterestRate: null
+    },
+    leasing: {
+      RWG: 10,
+      addServicesCost: 799,
+      annualMileage: null,
+      closingCosts: null,
+      financialInstitution: null,
+      firstInstallment: null,
+      leasingMode: "default",
+      maxAge: null,
+      maxMileage: null,
+      nominalInterestRate: null,
+      paybackPeriod: null,
+      paymentProtectionInsurance: null,
+      purchasePrice: null,
+      santanderPayBackMin: 250,
+      transportationCost: null
+    },
+    price: {
+      common: {
+        isStrikeShown: true
+      },
+      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,
+      financing: {
+        monthlyInstallment: 49,
+        oldMonthlyInstallment: 69,
+        isActive: true
+      },
+      leasing: {
+        monthlyInstallment: 49,
+        oldMonthlyInstallment: 69,
+        isActive: true
+      },
+      buy: {
+        currentSalesPriceExtra: 16110,
+        highestPriceExtra: 19349
+      }
+    },
+    seoText: 'Small Car, Diesel, Manual, Gear Box, HU 06/2008, Small Car, Diesel, Manual, Gear Box, HU 06/2008, Small Car, Diesel, Manual, Gear Box, HU 06/2008, Small Car, Diesel, Manual, Gear Box, HU 06/2008, Diesel, Manual, Gear Box, HU 06/2008, Diesel, Manual, Gear Box, HU 06/2008, Diesel, Manual, Gear Box, HU 06/2008,Small Car, Diesel, Manual, Gear Box, HU 06/2008, Small Car, Diesel, Manual, Gear Box, HU 06/2008, Small Car, Diesel, Manual, Gear Box, HU 06/2008, Small Car, Diesel, Manual, Gear Box, HU 06/2008, Diesel, Manual, Gear Box, HU 06/2008, Diesel, Manual, Gear Box, HU 06/2008, Diesel, Manual, Gear Box, HU 06/2008',
+    onFinancingClick: action('financing click'),
+    onContainerClick: action('container click'),
+    onFavoriteClick: action('favorite click'),
+  };
+
+  const cardProps = {
+    ...cardPropsSlider,
+    vehicleComponentName: 'main',
+    seoText: '',
+    slider: {},
+    info: {
+      mileage: 10464,
+      regDate: 1535760000,
+      gearbox: 'selector_gearbox_automatic'
+    },
+    environmentEmissions: {
+      co2: 8.7
+    },
+    consumption: {
+      consumptionCombined: 9.6,
+      consumptionPowerCombined: 3.6,
+      fuel: 'selector_fuel_hybridElectricalPetrol'
+    },
+  };
+
+  const cardPropsComparable = {
+    ...cardPropsSlider,
+    slider: {},
+    vehicleComponentName: 'comparable',
+    seoText: ''
+  };
+
+  const cardPropsSearch = {
+    ...cardPropsSlider,
+    vehicleComponentName: 'search',
+    seoText: '',
+    showSlider: true,
+    title: {
+      ...cardPropsSlider.title,
+      option: '110 kW (150 PS)',
+      isSponsored: true
+    },
+    slider: {
+      mainImageUrl: 'http://placehold.jp/400x300.png?text=mainImage',
+      images,
+      arrowsSize: 'md',
+      getCarImagesData: () => new Promise(resolve => resolve(images)),
+      onFirstChange: action('first change')
+    },
+    isDealerSuperAdmin: true
+  };
+
+  const cardPropsAlternative = {
+    ...cardPropsSlider,
+    vehicleComponentName: 'search',
+    seoText: '',
+    showSlider: true,
+    isAlternative: true,
+    title: {
+      ...cardPropsSlider.title,
+      option: '110 kW (150 PS)',
+      isSponsored: true
+    },
+    info: {
+      ...cardPropsSlider.info,
+      location: {
+        city: 'Lviv',
+        countryCode: 'UA',
+        street: 'Stepana Bandery',
+        zipCode: 64380
+      }
+    },
+    slider: {
+      mainImageUrl: 'http://placehold.jp/400x300.png?text=mainImage',
+      images,
+      arrowsSize: 'md',
+      onFirstChange: action('first change')
+    },
+    isDealerSuperAdmin: true
+  };
+
+  const cardPropsReference = {
+    ...cardPropsSlider,
+    vehicleComponentName: 'search',
+    seoText: '',
+    showSlider: true,
+    isAlternative: true,
+    isReferenceSearch: true,
+    CircularProgressbar: () => renderCircularProgressbar(8),
+    title: {
+      ...cardPropsSlider.title,
+      option: '110 kW (150 PS)',
+      isSponsored: true
+    },
+    info: {
+      ...cardPropsSlider.info,
+      location: {
+        city: 'Lviv',
+        countryCode: 'UA',
+        street: 'Stepana Bandery',
+        zipCode: 64380
+      }
+    },
+    slider: {
+      mainImageUrl: 'http://placehold.jp/400x300.png?text=mainImage',
+      images,
+      arrowsSize: 'md',
+      onFirstChange: action('first change')
+    },
+    isDealerSuperAdmin: false
+  };
+
+  return (
+    <>
+      <div className={styles.wrapper}>
+        <p>Landing with slider</p>
+        <Resizable {...resizablePropsSlider}>
+          <VehicleSmallCard {...cardPropsSlider} />
+        </Resizable>
+      </div>
+      <div className={styles.wrapper}>
+        <p>Main without slider</p>
+        <Resizable {...resizableProps}>
+          <VehicleSmallCard {...cardProps} />
+        </Resizable>
+      </div>
+      <div className={styles.wrapper}>
+        <Resizable {...resizablePropsComparable}>
+          <p>Comparable cars</p>
+          <VehicleSmallCard {...cardPropsComparable} />
+        </Resizable>
+      </div>
+      <div className={styles.wrapper}>
+        <p>Search cars</p>
+        <Resizable {...resizablePropsSearch}>
+          <VehicleSmallCard {...cardPropsSearch} />
+        </Resizable>
+      </div>
+      <div className={styles.wrapper}>
+        <p>Alternative cars</p>
+        <Resizable {...resizablePropsAlternative}>
+          <VehicleSmallCard {...cardPropsAlternative} />
+        </Resizable>
+      </div>
+      <div className={styles.wrapper}>
+        <p>Reference search cars</p>
+        <Resizable {...resizablePropsAlternative}>
+          <VehicleSmallCard {...cardPropsReference} />
+        </Resizable>
+      </div>
+    </>
+  );
+
+});
+
+storiesOf('VehicleSmallCard', module).add('VehicleSmallCard', () => <VehicleSmallCardStory />);

package/source/components/VehicleSmallCard/VehicleSmallCard.story.styl

@@ -0,0 +1,56 @@
+@import '../../theme/theme.styl';
+
+.wrapper
+  // position: fixed
+  width: 100%
+  height: 100%
+  left: 0px
+  top: 0px
+  display: flex
+  flex-direction: column;
+  background-color #fff
+  font-family: $font-style-arial
+  padding 0 10px;
+  // &>:first-child
+  //   border-right: 1px solid $grey-e
+  //   margin-right: 10px
+
+.propsContainer
+  overflow-y: auto
+
+.title
+  text-align: center
+  font-size: 22px
+  font-weight: bold
+
+.input
+  display: inline-block !important
+  margin-left: 10px
+  position: absolute
+  right: 0
+
+:global
+  .react-checkbox-tree
+    width: 550px
+    margin-right: 10px
+    padding-right: 10px
+  .rct-node
+    margin: 10px 0
+    position: relative
+
+.progressWrap
+  width: 30px;
+  height: 30px;
+  position: absolute;
+  top: 0;
+  z-index: 2;
+
+  & [class*='CircularProgressbar-text']
+    transform: translate(-18%, 10px);
+
+  &.progressWrapFull
+    & [class*='CircularProgressbar-text']
+      transform: translate(-27%, 10px);
+  &.progressWrapMin
+    & [class*='CircularProgressbar-text']
+      transform: translate(-10%, 10px);

package/source/components/VehicleSmallCard/VehicleSmallCard.tsx

@@ -12,6 +12,7 @@ import VehicleTitle from './VehicleData/VehicleTitle/VehicleTitle';
 import SeoText from './SeoText/SeoText';
 import VehicleInfo from './VehicleData/VehicleInfo/VehicleInfo';
 import VehiclePrice from './VehicleData/VehiclePrice/VehiclePrice';
+import { PLACEHOLDER_IMAGE_SMALL_URL } from '../../framework/constants/common';
 import {
   IVehicleInfo,
   IPrice,
@@ -281,7 +282,12 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
           target,
           rel,
           className: `${styles.redirectClassLink} ${styles.gridAreaTitle}`,
-          onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
+          onClick: () => localStorage.setItem(
+            'activeTabCDP',
+            _get(price, 'leasing.isActive', false)
+              ? t('vehicleProps:title.leasing')
+              : t('vehicleProps:title.financing')
+          ),
           href: url
         })}
 
@@ -334,7 +340,12 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
           target,
           rel,
           className: `${styles.redirectClassLink} ${styles.gridAreaImage}`,
-          onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
+          onClick: () => localStorage.setItem(
+            'activeTabCDP',
+            _get(price, 'leasing.isActive', false)
+              ? t('vehicleProps:title.leasing')
+              : t('vehicleProps:title.financing')
+          ),
           href: url
         })}
         <VehicleInfo {...vehicleInfoProps} />
@@ -366,7 +377,7 @@ VehicleSmallCard.defaultProps = {
   baseUrl: '',
   typeAlternative: '',
   offerSource: '',
-  src: 'https://images.auto.de/noimage/small',
+  src: PLACEHOLDER_IMAGE_SMALL_URL,
   environmentEmissions: null,
   language: 'en',
   consumption: null,

package/source/components/VehicleSmallCardForDealerships/VehicleSmallCardForDealerships.story.js

@@ -0,0 +1,199 @@
+import React from 'react';
+import i18next from 'i18next';
+import { Resizable } from 're-resizable';
+// import * as CheckboxTree from 'react-checkbox-tree';
+import { withNamespaces } from 'react-i18next';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import VehicleSmallCardForDealerships from './VehicleSmallCardForDealerships.tsx';
+import styles from './VehicleSmallCardForDealerships.story.styl';
+
+
+i18next.addResourceBundle('de', 'vehicleProps', {
+  value: {
+    mileage: "{{mileage}} km",
+    consumption: "{{consumption}}l/100km",
+    consumptionPower: "{{consumption}}kWh/100km",
+    consumptionPowerCombined: "{{consumption}}kWh/100km (komb)*",
+    consumptionGas: "{{consumption}}kg/100km",
+    consumptionCombined: "{{consumption}}l/100km",
+    power: "{{powerKW}}\u00A0kW ({{powerPS}}\u00A0PS)",
+    powerPS: "{{powerPS}} PS",
+    deliveryPeriodMonths: "{{count}} Monat\nab Bestellung",
+    deliveryPeriodDays: "{{count}} Tag\nab Bestellung",
+    co2Combined: "{{co2}}g CO2/km (komb)*",
+    co2: "{{co2}} g/km ",
+    na: "N/A"
+  },
+  priceRating: {
+    noRating: 'KEINE BEWERTUNG',
+    highPrice: 'HOHER PREIS',
+    increasedPrice: 'ERHÖHTER PREIS',
+    fairPrice: 'FAIRER PREIS',
+    goodPrice: 'GUTER PREIS',
+    topPrice: 'TOP PREIS'
+  },
+  promoSlider: {
+    consumptionCombined: `{{consumptionCombined}} l/100km (komb)*`,
+    co2: `{{co2}} g CO2/km (komb)*`,
+    new: 'neu'
+  },
+  title: {
+    addOfferToMainSlide: 'Zum Schieberegler hinzufügen',
+    toOffer: 'zum Angebot',
+    monthlyFrom: 'monatlich ab',
+    financing: 'Finanzierung',
+    leasing: 'Leasing',
+    abo: 'Abo',
+    buy: 'Kaufen',
+    financingDescription: `Bei der Finanzierung zahlen Sie lediglich die Zinsen des Darlehens und einen geringen Tilgungsanteil.
+    Zum Vertragsende können Sie entscheiden, ob Sie den Restbetrag ablösen oder weiter finanzieren wollen.`,
+    leasingDescription: `Beim Leasing zahlen Sie lediglich die Zinsen des Darlehens und einen geringen
+    Tilgungsanteil. Zum Vertragsende geben Sie das Auto einfach wieder zurück.`,
+    aboDescription: `Bei diesem Auto-Abo ist bereits alles an Bord. Teil- und
+    Vollkasko sowie Haftpflicht sind inklusive, ebenso wie Wartungs- und Verschleißreparaturen.
+    Sie zahlen also nur Ihre Rate und Kraftstoff.`,
+    buyDescription: `Nach Kaufabschluss haben Sie die sofortigen
+    Eigentumsrechte und keine Finanzierungskosten. Als Eigentümer können Sie Ihr Fahrzeug zu
+    eigenen Konditionen weiter verkaufen und Änderungen vornehmen.`
+  }
+});
+
+const resizableProps = {
+  minWidth: 150,
+  defaultSize: { width: 360, height: 'auto' }
+};
+
+const IMAGE_URL = 'https://picsum.photos/400/300/?random';
+const images = [];
+for (let i = 0; i <= 10; i++) {
+  images.push({ url: `${IMAGE_URL}&tag=${Math.random()}`, description: '' });
+}
+
+const VehicleSmallCardStory = withNamespaces('vehicleProps')(({ t }) => {
+  const dealershipsProps = {
+    language: 'de',
+    vehicleComponentName: 'landing',
+    showSlider: true,
+    showNewLabel: true,
+    src: 'http://placehold.jp/400x300.png?text=mainImage',
+    stats: {
+      imagesCount: 100,
+      isFavoured: true,
+      statsData: {
+        totalCarImpCount: 10,
+        totalFavCount: 20,
+      },
+      statsSize: 'xs'
+    },
+    title: {
+      make: 'Audi',
+      model: 'A4',
+      subModel: 'Shooting Brake',
+    },
+    info: {
+      mileage: 10464,
+      regDate: 1535760000,
+      gearbox: 'selector_gearbox_automatic'
+    },
+    environmentEmissions: {
+      co2: 8.7
+    },
+    consumption: {
+      consumptionCombined: 9.6,
+      consumptionPowerCombined: null,
+      fuel: 'selector_fuel_hybridElectricalDiesel'
+    },
+    engineData: {
+      cubicCapacity: 1968,
+      cylinders: 0,
+      particulateFilterDiesel: true,
+      powerKW: 140,
+      powerPS: 190,
+      startStopSystem: true,
+    },
+    offer : {
+      availabilityFrom: null,
+      availabilityMode: "selector_availabilityMode_always",
+      deliveryPeriod: "selector_unknown"
+    },
+    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,
+      financing: {
+        annualPercentageRate: "",
+        bank: "",
+        closingCosts: null,
+        conditions: null,
+        finalInstallment: null,
+        financingBank: "",
+        firstInstallment: 0,
+        grossLoanAmount: "",
+        monthlyInstallment: 108,
+        netLoanAmount: "",
+        nominalInterestRate: "",
+        paybackPeriod: "24",
+        paymentProtectionInsurance: "",
+        platformFinancingId: null,
+        transportationCosts: "",
+        typeOfNominalInterestRate: null
+      },
+      leasing: {
+        RWG: 10,
+        addServicesCost: 799,
+        annualMileage: null,
+        closingCosts: null,
+        financialInstitution: null,
+        firstInstallment: null,
+        leasingMode: "default",
+        maxAge: null,
+        maxMileage: null,
+        nominalInterestRate: null,
+        paybackPeriod: null,
+        paymentProtectionInsurance: null,
+        purchasePrice: null,
+        santanderPayBackMin: 250,
+        transportationCost: null
+      },
+      buy: {
+        currentSalesPriceExtra: 16110,
+        highestPriceExtra: 19349
+      }
+    },
+    seoText: 'Small Car, Diesel, Manual, Gear Box, HU 06/2008, Small Car, Diesel, Manual, Gear Box, HU 06/2008, Small Car, Diesel, Manual, Gear Box, HU 06/2008, Small Car, Diesel, Manual, Gear Box, HU 06/2008, Diesel, Manual, Gear Box, HU 06/2008, Diesel, Manual, Gear Box, HU 06/2008, Diesel, Manual, Gear Box, HU 06/2008,Small Car, Diesel, Manual, Gear Box, HU 06/2008, Small Car, Diesel, Manual, Gear Box, HU 06/2008, Small Car, Diesel, Manual, Gear Box, HU 06/2008, Small Car, Diesel, Manual, Gear Box, HU 06/2008, Diesel, Manual, Gear Box, HU 06/2008, Diesel, Manual, Gear Box, HU 06/2008, Diesel, Manual, Gear Box, HU 06/2008',
+    onFinancingClick: action('financing click'),
+    onContainerClick: action('container click'),
+    onFavoriteClick: action('favorite click'),
+  };
+
+  return (
+    <>
+      <div className={styles.wrapper}>
+        <Resizable {...resizableProps}>
+          <VehicleSmallCardForDealerships {...dealershipsProps} />
+        </Resizable>
+      </div>
+    </>
+  );
+
+});
+
+storiesOf('VehicleSmallCardForDealerships', module).add('VehicleSmallCardForDealerships', () => <VehicleSmallCardStory />);