@bytebrand/fe-ui-core 4.8.111 → 4.8.112

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/VehicleDetailedSidebar/partials/Properties.styl

@@ -15,6 +15,11 @@
   &:nth-child(2)
     border-top-color: transparent;
 
+// ADV-70: full-width consumption/CO2 row in the sidebar Overview tab.
+.propertyFull
+  flex-basis: 100%
+  width: 100%
+
 .details
   display: flex
   flex-direction: row

package/source/components/VehicleDetailedSidebar/partials/Properties.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import classNames from 'classnames';
 import _get from 'lodash/get';
 import { IPropertiesProps, ICarPropElement } from '../../../framework/types/types';
 import { getActualHighlights } from '../../../framework/constants/highlights';
@@ -40,18 +41,19 @@ const Properties: React.FunctionComponent<IPropertiesProps> = ({ t, car, decorat
     : <div className={styles.empty}>{t(`sidebar.empty`)}</div>;
   };
 
-  const renderDetails = (): React.ReactNode => {
-    const sectionNames = [
-      t(`sidebar.dataEngine`),
-      t(`sidebar.dimensions`),
-      t(`sidebar.generalData`),
-      t(`sidebar.equipments`)
-    ];
-    const detailPropertiesList = ['cubicCapacity', 'torque', 'length', 'width', 'doors', 'fuel'];
-    const detailProperties = detailPropertiesList.map(
-      (prop: string) => (`${decoratedProps[prop].title}: ${decoratedProps[prop].value}`)
-    );
+  // ADV-70: hide a spec line whose value is "N/A", a zero ("0 mm", "0 kWh", "0 g CO2/km", ...),
+  // null or empty — mirrors AccordionWidget.isHiddenSpecValue. de-DE thousands "." / decimal ","
+  // are normalised so only a true zero magnitude hides; codes like HSN "0588" stay visible.
+  const isHiddenSpecValue = (value: any): boolean => {
+    if (value === null || value === undefined) return true;
+    if (typeof value !== 'string') return false; // JSX / non-string content → always keep
+    const trimmed = value.trim();
+    if (trimmed === '' || trimmed === t('vehicleProps:value.na')) return true;
+    const numeric = parseFloat(trimmed.replace(/\./g, '').replace(',', '.'));
+    return numeric === 0;
+  };
 
+  const renderDetails = (): React.ReactNode => {
     const equipmentsObj = {
       ...addPrefixToKeys(car.lights, 'lights'),
       ...addPrefixToKeys(car.multimedia, 'multimedia'),
@@ -63,14 +65,41 @@ const Properties: React.FunctionComponent<IPropertiesProps> = ({ t, car, decorat
       .slice(0, 2)
       .map(prop => t(`cbd:${prop}`));
 
-    detailProperties.push(equipmentsArr.join(', '));
+    // ADV-70: build each section's visible lines, dropping N/A/0 values. A section that loses
+    // all its lines (e.g. "Maße & Abmessungen" when length+width are both N/A) is removed and
+    // the next section flows up so there is no gap in the 2-column grid.
+    const sectionsConfig: Array<{ title: string; props?: string[]; lines?: string[] }> = [
+      { title: t(`sidebar.dataEngine`), props: ['cubicCapacity', 'torque'] },
+      { title: t(`sidebar.dimensions`), props: ['length', 'width'] },
+      { title: t(`sidebar.generalData`), props: ['doors', 'fuel'] },
+      { title: t(`sidebar.equipments`), lines: equipmentsArr.length ? [equipmentsArr.join(', ')] : [] }
+    ];
+
+    const visibleSections = sectionsConfig
+      .map(({ title, props, lines }) => ({
+        title,
+        lines: props
+          ? props
+              .filter(prop => decoratedProps[prop] && !isHiddenSpecValue(decoratedProps[prop].value))
+              .map(prop => `${decoratedProps[prop].title}: ${decoratedProps[prop].value}`)
+          : (lines || [])
+      }))
+      .filter(section => section.lines.length > 0);
+
+    if (!visibleSections.length) return null;
+
+    // Class by VISIBLE position, not original index: the first two sections form the top row
+    // (detailsItemFirstLine — padding-top 7px), the rest the bottom row (detailsItemLastLine —
+    // padding-top 20px). So a section promoted into the top row drops its 20px top padding,
+    // while a section that stays in the bottom row keeps it.
     return (
       <div className={styles.details}>
-        {sectionNames.map((title, i) => (
+        {visibleSections.map(({ title, lines }, i) => (
           <div key={i} className={i > 1 ? styles.detailsItemLastLine : styles.detailsItemFirstLine}>
             <h4 className={styles.detailsTitle}>{title}</h4>
-            <span className={styles.detailsContent}>{detailProperties[0 + i * 2]}</span>
-            <span className={styles.detailsContent}>{detailProperties[1 + i * 2]}</span>
+            {lines.map((line, j) => (
+              <span key={j} className={styles.detailsContent}>{line}</span>
+            ))}
           </div>
         ))}
       </div>
@@ -78,15 +107,24 @@ const Properties: React.FunctionComponent<IPropertiesProps> = ({ t, car, decorat
   };
 
   const mainPropertiesList = getOverviewDetails(car.consumption.fuel);
-  const mainProperties = mainPropertiesList.map((prop: string) => ({ icon: decoratedProps[prop].icon, description: decoratedProps[prop].value }));
+  // ADV-70: the consumption/CO2 line is long — let it span the full sidebar width on its own
+  // row (and drop the fuel icon) instead of being squeezed into one 50% column.
+  const mainProperties = mainPropertiesList.map((prop: string) => {
+    const isConsumptionAlternateView = prop.startsWith('consumption') && prop.endsWith('AlternateView');
+    return {
+      icon: isConsumptionAlternateView ? '' : decoratedProps[prop].icon,
+      description: decoratedProps[prop].value,
+      fullWidth: isConsumptionAlternateView
+    };
+  });
 
   const tabsTitles = [
     {
       title: `${t(`sidebar.overview`)}`,
       children: (
         <div className={`${styles.tabContentPadding} ${styles.tabContentOverviewPadding}`}>
-          {mainProperties.map((property: any, index: number) => (
-            <VehicleProperty {...property} className={styles.property} key={index} />
+          {mainProperties.map(({ fullWidth, ...property }: any, index: number) => (
+            <VehicleProperty {...property} className={classNames(styles.property, fullWidth ? styles.propertyFull : '')} key={index} />
           ))}
         </div>
       )