@bytebrand/fe-ui-core 4.8.48 → 4.8.50

package/source/components/VehicleDetailedSlider/partials/PriceData.tsx

@@ -1,45 +1,48 @@
-import * as React from 'react';
-import FormattedNumber from '../../FormattedNumber/FormattedNumber';
-import Badge from '../../_common/Badge/Badge';
-
-import styles from './PriceData.styl';
-
-interface IProps {
-  t: (phrase: string, config?: any) => string;
-  showNewLabel: boolean;
-  historyPriceDifference: number;
-  historyPriceDifferencePerCent: number;
-  activeTab?: number;
-  showDownPayment: boolean;
-  financingFirstInstallment?: number | null;
-  leasingFirstInstallment?: number | null;
-}
-
-const MIN_PERCENT = 5;
-const MIN_PRICE_DIFFERENCE = 500;
-const EUR = `\u20AC`;
-
-const PriceData: React.FunctionComponent<IProps> = ({ t, showDownPayment, showNewLabel, historyPriceDifference, historyPriceDifferencePerCent, activeTab, financingFirstInstallment, leasingFirstInstallment }) => {
-  const relevantFirstInstallment = activeTab === 0 ? financingFirstInstallment : activeTab === 1 ? leasingFirstInstallment : null;
-  const showZeroDownPayment = showDownPayment && relevantFirstInstallment === 0;
-  return (
-    <div className={styles.topWrapper}>
-      {showNewLabel && <Badge type='blue' className={styles.new}>{t('slider.new')}</Badge>}
-      {!!historyPriceDifference && historyPriceDifference >= MIN_PRICE_DIFFERENCE && (
-        <Badge type='green' className={styles.priceDifference}>
-          <FormattedNumber value={historyPriceDifference} numbersAfterDot={0}/>
-          {` ${EUR} ${t('slider.save')}`}
-        </Badge>
-      )}
-      {showZeroDownPayment &&
-        <Badge type='lightBlue' className={styles.percentageOfFirstInstallment}>{`0${EUR} ${t('slider.firstInstallment')}`}</Badge>}
-      {historyPriceDifferencePerCent >= MIN_PERCENT && (
-        <Badge type='red' className={styles.priceDifferencePerCent}>
-          -{historyPriceDifferencePerCent}%
-        </Badge>
-      )}
-    </div>
-  );
-};
-
-export default PriceData;
+import * as React from 'react';
+import FormattedNumber from '../../FormattedNumber/FormattedNumber';
+import Badge from '../../_common/Badge/Badge';
+
+import styles from './PriceData.styl';
+
+interface IProps {
+  t: (phrase: string, config?: any) => string;
+  showNewLabel: boolean;
+  historyPriceDifference: number;
+  historyPriceDifferencePerCent: number;
+  financingConfig?: any;
+  activeTab?: number;
+  showDownPayment: boolean;
+  financingFirstInstallment?: number | null;
+  leasingFirstInstallment?: number | null;
+}
+
+const MIN_PERCENT = 5;
+const MIN_PRICE_DIFFERENCE = 500;
+const EUR = `€`;
+
+const PriceData: React.FunctionComponent<IProps> = ({ t, showDownPayment, showNewLabel, historyPriceDifference, historyPriceDifferencePerCent, activeTab, financingFirstInstallment, leasingFirstInstallment }) => {
+  const showDownPaymentBadge = showDownPayment && (
+    (activeTab === 0 && financingFirstInstallment === 0) ||
+    (activeTab === 1 && leasingFirstInstallment === 0)
+  );
+  return (
+    <div className={styles.topWrapper}>
+      {showNewLabel && <Badge type='blue' className={styles.new}>{t('slider.new')}</Badge>}
+      {!!historyPriceDifference && historyPriceDifference >= MIN_PRICE_DIFFERENCE && (
+        <Badge type='green' className={styles.priceDifference}>
+          <FormattedNumber value={historyPriceDifference} numbersAfterDot={0}/>
+          {` ${EUR} ${t('slider.save')}`}
+        </Badge>
+      )}
+      {showDownPaymentBadge &&
+        <Badge type='lightBlue' className={styles.percentageOfFirstInstallment}>{`0${EUR} ${t('slider.firstInstallment')}`}</Badge>}
+      {historyPriceDifferencePerCent >= MIN_PERCENT && (
+        <Badge type='red' className={styles.priceDifferencePerCent}>
+          -{historyPriceDifferencePerCent}%
+        </Badge>
+      )}
+    </div>
+  );
+};
+
+export default PriceData;

package/source/components/VehiclePromoSlider/VehiclePromoInfo/VehiclePromoInfo.story.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import VehiclePromoInfo from './VehiclePromoInfo';
+
+// Stateful container for testing interaction
+class VehiclePromoInfoContainer extends React.Component {
+  render() {
+    const { t } = this.props;
+
+    const props = {
+      t: key => key,
+      price: {
+        wasPrice: 18660,
+        currentSalesPrice: 18440,
+        historyPriceDifferencePerCent: 2,
+        purchasePrice: 0,
+        vatRate: 19
+      },
+      consumption: { consumptionCombined: 6.1 },
+      environmentEmissions: { co2: 159 },
+      monthlyInstallment: 269.8,
+      oldMonthlyInstallment: 259.8,
+      onButtonClick: action('offer button click'),
+      onFinancingDetailsClick: action('financing button click')
+    };
+
+    return (
+      <div style={{ marginTop: 100 }}>
+        <VehiclePromoInfo {...props} />
+      </div>
+    );
+  }
+}
+
+storiesOf('VehiclePromoInfo', module)
+  .add('Default', () => (
+    <div>
+      <VehiclePromoInfoContainer />
+    </div>
+  ));

package/source/components/VehiclePromoSlider/VehiclePromoSlide/VehiclePromoSlide.story.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import VehiclePromoSlide from './VehiclePromoSlide';
+
+// Stateful container for testing interaction
+class VehiclePromoSlideContainer extends React.Component {
+  render() {
+    const { t } = this.props;
+
+    const props = {
+      t: key => key,
+      _id: 'e18efa30-a4d2-48d7-b0d7-d1701731af2a',
+      title: 'BMW 114',
+      showNewLabel: true,
+      vehicleLink:
+        '',
+      src:
+        'https://images.auto.de/carimage/858c5bae-12d2-4180-ad01-6576c2160dc0/WF-8oH7LX-iw/medium-transparent',
+      environmentEmissions:
+        { energyEfficiencyClass: 'energyEff',
+          co2: 115,
+          emissionClass: 'emissionClass',
+          emissionSticker: 'emissionSticker' },
+      consumption:
+        { consumptionUnit: 'unit',
+          fuel: 'petrol',
+          consumptionCombined: 4.9 },
+      price:
+        { currency: 'EUR',
+          wasPrice: 14789,
+          currentSalesPrice: 100000,
+          vatRate: 19,
+          recomendedRetailPrice: 120000,
+          retailToCurrentPriceDifference: -20000,
+          historyPriceDifferencePerCent: 17,
+          historyPriceDifference: 20000,
+          mlCurrentSalesPricePredicted: 98000,
+          mlCurrentSalesPriceDiffPercent: 2.0408163265306145 },
+      monthlyInstallment: 714.69,
+      oldMonthlyInstallment: 1082.29,
+      bubblesColor: '#fd5a1c',
+      bubbleContent: 'Super Angebot!',
+      onButtonClick: action('offer button click'),
+      onFinancingDetailsClick: action('financing button click')
+    };
+
+    return (
+      <div style={{ marginTop: 100 }}>
+        <VehiclePromoSlide {...props} />
+      </div>
+    );
+  }
+}
+
+storiesOf('VehiclePromoSlide', module)
+  .add('Default', () => (
+    <div>
+      <VehiclePromoSlideContainer />
+    </div>
+  ));

package/source/components/VehiclePromoSlider/VehiclePromoSlider.story.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import cars from './cars'; // fake data from top api request
+
+import VehiclePromoSlider from './VehiclePromoSlider';
+
+const defaultSliderStateProps = {
+  t: key => key,
+  cars
+};
+
+const withHandlersSliderStateProps = {
+  t: key => key,
+  cars,
+  onButtonClick: action('offer button click'),
+  onFinancingDetailsClick: action('financing button click')
+};
+
+// Stateful container for testing interaction
+class VehiclePromoSliderContainer extends React.Component {
+  render() {
+    return (
+      <div style={{ marginTop: 100 }}>
+        <VehiclePromoSlider {...this.props} />
+      </div>
+    );
+  }
+}
+
+storiesOf('VehiclePromoSlider', module)
+  .add('Default', () => (
+    <div style={{ width: '90vw', height: '75vh' }}>
+      <VehiclePromoSliderContainer {...defaultSliderStateProps} />
+    </div>
+  ))
+  .add('With Handlers', () => (
+    <div style={{ width: '90vw', height: '75vh' }}>
+      <VehiclePromoSliderContainer {...withHandlersSliderStateProps} />
+    </div>
+  ));

package/source/components/VehicleSmallCard/VehicleData/VechiclePriceItem/VechiclePriceItem.styl

@@ -70,6 +70,11 @@
     +media-tablet-landscape-up()
       font-size: 9px;
 
+  &.priceItemCategoryLanding,
+  &.priceItemCategoryMain
+    +media-tablet-landscape-up()
+      font-size: 10px;
+
   & > span:hover
     background: rgba(196, 196, 196, 0.6);
 

package/source/components/VehicleSmallCard/VehicleData/VechiclePriceItem/VechiclePriceItem.tsx

@@ -88,7 +88,9 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
     const priceItemCategoryClassName = classnames(
       styles.priceItemCategory,
       { [styles.priceItemCategorySearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' },
-      { [styles.priceItemCategoryComparable]: vehicleComponentName === 'comparable' || vehicleComponentName === 'landing' || vehicleComponentName === 'main' }
+      { [styles.priceItemCategoryComparable]: vehicleComponentName === 'comparable' },
+      { [styles.priceItemCategoryLanding]: vehicleComponentName === 'landing' },
+      { [styles.priceItemCategoryMain]: vehicleComponentName === 'main' }
     );
 
     return (

package/source/components/VehicleSmallCard/VehicleData/VehicleInfo/VehicleInfo.styl

@@ -12,7 +12,7 @@
   grid-area: info;
 
   & > .consumptionCombined
-    font-size: 10px
+    font-size: 9px
 
   +media-tablet-landscape-down()
     padding: 0 10px;

package/source/components/VehicleSmallCard/VehicleData/VehicleInfo/VehicleInfo.tsx

@@ -1,6 +1,7 @@
 /* tslint:disable */
 import * as React from 'react';
 import classnames from 'classnames';
+import _get from 'lodash/get';
 import styles from './VehicleInfo.styl';
 import PriceRating from '../../../PriceRating/PriceRating';
 import { Visible, Hidden } from 'react-grid-system';
@@ -43,7 +44,8 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
     consumption,
     location,
     offer,
-    engineData
+    engineData,
+    leasing
   } = props;
   const firstRegistrationDate = regDate && regDate !== 0 ? regDate : 'N/A';
 
@@ -65,7 +67,8 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
     },
     environmentEmissions: {
       co2: environmentEmissions.co2,
-      wltpCo2: environmentEmissions.wltpCo2
+      wltpCo2: environmentEmissions.wltpCo2,
+      wltpEnergyEfficiencyClass: environmentEmissions.wltpEnergyEfficiencyClass
     },
     consumption: {
       fuel: consumption.fuel,
@@ -80,14 +83,19 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
 
   const decoratedProps = getDecoratedProps(dataDecoratedProps, t, language);
   const renderProperty = (renderProperties: any, vehicleComponentName?: any) => {
-    const mainPropertiesList = renderProperties(dataDecoratedProps.consumption.fuel, combineRefAlternative).map((prop: string) => ({
-      icon: decoratedProps[prop].icon,
-      description: decoratedProps[prop].value,
-      className: styles[decoratedProps[prop].name],
-      classNameIcon: (vehicleComponentName === 'search' || 'myVehicles' || 'favorite' || 'recently') && styles.carIconSearch,
-      smalltext: (decoratedProps[prop].name === 'consumptionCombined') && (vehicleComponentName !== 'search'),
-      hybridPlugin: engineData.hybridPlugin && decoratedProps[prop].name === 'consumptionCombined' && vehicleComponentName !== 'search'
-    }));
+    const mainPropertiesList = renderProperties(dataDecoratedProps.consumption.fuel, combineRefAlternative).map((prop: string) => {
+      const isConsumption = decoratedProps[prop].name === 'consumptionCombined';
+      // On non-SRL cards drop the fuel-pump icon next to the consumption row to free up space for the CO2-class line.
+      const hideConsumptionIcon = isConsumption && vehicleComponentName !== 'search';
+      return {
+        icon: hideConsumptionIcon ? '' : decoratedProps[prop].icon,
+        description: decoratedProps[prop].value,
+        className: styles[decoratedProps[prop].name],
+        classNameIcon: (vehicleComponentName === 'search' || 'myVehicles' || 'favorite' || 'recently') && styles.carIconSearch,
+        smalltext: isConsumption && (vehicleComponentName !== 'search'),
+        hybridPlugin: engineData.hybridPlugin && isConsumption && vehicleComponentName !== 'search'
+      };
+    });
 
     return mainPropertiesList.map((property: any, index: number) => (
       <VehicleProperty {...property} key={index} />
@@ -149,7 +157,12 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
       ),
         ...routeObj,
         className: wrapClasses,
-        onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
+        onClick: () => localStorage.setItem(
+          'activeTabCDP',
+          _get(leasing, 'isActive', false)
+            ? t('vehicleProps:title.leasing')
+            : t('vehicleProps:title.financing')
+        ),
         href: url,
         target,
         rel

package/source/components/VehicleSmallCard/VehicleData/VehiclePrice/VehiclePrice.styl

@@ -62,8 +62,9 @@
     font-size: 12px;
     height: 42px;
 
-  &.vehiclePriceTitleLanding
-    font-size: 11px;
+  &.vehiclePriceTitleLanding,
+  &.vehiclePriceTitleMain
+    font-size: 10px;
     height: 38px;
 
 .addOfferButton

package/source/components/VehicleSmallCard/VehicleData/VehicleProperty/VehicleProperty.styl

@@ -11,7 +11,7 @@
 
 .smallProp
   span
-    font-size: 10px !important
+    font-size: 9px !important
 
 .pluginVal
   span
@@ -26,5 +26,8 @@
   +media-tablet-landscape-up()
     margin-right: 10px
 
+.noIcon
+  padding-left: 5px
+
 [class*='smallText']
   font-size:10px;

package/source/components/VehicleSmallCard/VehicleData/VehicleProperty/VehicleProperty.tsx

@@ -19,12 +19,13 @@ class VehicleProperty extends React.Component<IVehicleProperty, {}> {
 
   render(): React.ReactNode {
     const { className, classNameIcon, icon, description, smalltext, hybridPlugin } = this.props;
-    const propertyClass: string = `${styles.carProp} ${className ? className : ''} ${smalltext ? styles.smallProp : ''} ${hybridPlugin ? styles.pluginVal : ''}`;
+    const noIcon: boolean = !icon;
+    const propertyClass: string = `${styles.carProp} ${className ? className : ''} ${smalltext ? styles.smallProp : ''} ${hybridPlugin ? styles.pluginVal : ''} ${noIcon ? styles.noIcon : ''}`;
     const propertyClassIcon: string = `${styles.carIcon} ${classNameIcon ? classNameIcon : ''}`;
 
     return (
       <div className={propertyClass}>
-        <IconSVG className={propertyClassIcon} name={icon} customDimensions />
+        {!noIcon && <IconSVG className={propertyClassIcon} name={icon} customDimensions />}
         <span>{description}</span>
       </div>
     );

package/source/components/VehicleSmallCard/VehicleData/VehicleTitle/VehicleTitle.tsx

@@ -48,7 +48,7 @@ const VehicleTitle: React.FC<IVehicleTitleProps> = ({
     event.preventDefault();
     event.stopPropagation();
     event.nativeEvent.stopImmediatePropagation();
-    onFavoriteClick(event, id);
+    if (onFavoriteClick) onFavoriteClick(event, id);
   };
 
   const renderFavoriteIcon = (): React.ReactNode => {