@bytebrand/fe-ui-core 4.8.22 → 4.8.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.8.22",
+  "version": "4.8.24",
   "description": "UI components for the auto.de project",
   "main": "index.ts",
   "module": "dist/common.js",

package/source/components/AccardionSection/AccardionSection.tsx

@@ -1,31 +1,40 @@
 import * as React from 'react';
 import _get from 'lodash/get';
 import { Visible } from 'react-grid-system';
-import { Link } from 'react-scroll';
+import { scroller } from 'react-scroll';
 import AccordionWidget from '../AccordionWidget/AccordionWidget';
 import { IAccardionSectionProps } from '../../framework/types/types';
 import styles from './AccardionSection.styl';
 import { vehicleProps } from '../../locales/data';
 
 const AccardionSection: React.FunctionComponent<IAccardionSectionProps> = (props) => {
+  const [expanded, setExpanded] = React.useState<string | boolean>('overview')
+
+  const handleChange =
+      (panel: string) => (_: React.SyntheticEvent, isExpanded: boolean) => {
+        setExpanded(isExpanded ? panel : false);
+      };
+  
+  const handleChangeByLink = (panel: string) => {
+    setExpanded(panel);
+
+    setTimeout(() => {
+      scroller.scrollTo(panel, {
+        duration: 400,
+        offset: -50,
+        smooth: true,
+        dynamic: true
+      });
+    }, 300);
+  }
+
   const renderPropertyLinks = (): React.ReactNode => {
+    
     const links = ['overview', 'highlights', 'details'];
 
     return <div className={styles.propertyLinks}>
       {links.map((to: string) => {
-        const _props = {
-          to,
-          key: to,
-          duration: 500,
-          offset: -40,
-          activeClass: styles.active,
-          className: styles.item,
-          spy: false,
-          smooth: true,
-          isDynamic: true,
-          absolute: false
-        };
-        return <Link {..._props} className={styles.propertyLink}>{props.t(`sidebar.${to}`)}</Link>;
+        return <span onClick={() => handleChangeByLink(to)} className={styles.propertyLink}>{props.t(`sidebar.${to}`)}</span>;
       })}
     </div>;
   };
@@ -35,7 +44,7 @@ const AccardionSection: React.FunctionComponent<IAccardionSectionProps> = (props
       <Visible xs sm md>
         {renderPropertyLinks()}
       </Visible>
-      <AccordionWidget {...props} />
+      <AccordionWidget {...props} expanded={expanded} handleChange={handleChange} />
     </div>
   );
 };

package/source/components/AccordionWidget/AccordionWidget.tsx

@@ -20,24 +20,13 @@ import IconSVG from '../_common/IconSVG/IconSVG';
 import { getActualHighlights } from '../../framework/constants/highlights';
 import styles from './AccordionWidget.styl';
 
-interface IAccardionSectionState {
-  expanded: boolean | string;
-}
-class AccordionWidget extends React.Component<IAccardionSectionProps, IAccardionSectionState> {
+class AccordionWidget extends React.Component<IAccardionSectionProps> {
 
   constructor(props: any) {
     super(props);
 
-    this.state = {
-      expanded: 'overview'
-    };
   }
 
-  handleChange =
-      (panel: string) => (_: React.SyntheticEvent, isExpanded: boolean) => {
-        this.setState({ expanded: isExpanded ? panel : false });
-      };
-
   renderPropsBlock = (data: ICarPropElement[]): React.ReactNode => {
     return (
       <div className={styles.propertyContainer}>
@@ -157,7 +146,7 @@ class AccordionWidget extends React.Component<IAccardionSectionProps, IAccardion
   };
 
   render(): React.ReactNode {
-    const { car, activeIndex, onItemClick, t } = this.props;
+    const { car, activeIndex, onItemClick, t, expanded, handleChange } = this.props;
 
     if (!car || !('_id' in car)) return null;
     const {
@@ -195,8 +184,8 @@ class AccordionWidget extends React.Component<IAccardionSectionProps, IAccardion
               key={section.name}
               title={t(`accordion.${section.title}`)}
               reactScrollName={section.name}
-              onChange={this.handleChange}
-              expanded={this.state.expanded}
+              onChange={handleChange}
+              expanded={expanded}
             >
               {section.component}
             </ExpansionPanel>
@@ -210,8 +199,8 @@ class AccordionWidget extends React.Component<IAccardionSectionProps, IAccardion
                 key={section.title}
                 title={t(`accordion.${section.title}`)}
                 reactScrollName={section.name}
-                onChange={this.handleChange}
-                expanded={this.state.expanded}
+                onChange={handleChange}
+                expanded={expanded}
                 defaultExpanded={section.expanded}
               >
                 {section.component}

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

@@ -67,7 +67,7 @@ const VehicleTitle: React.FC<IVehicleTitleProps> = ({
   return (
     <div className={infoSectionClassName}>
       <div className={wrapTitlesClassName}>
-        <h4 className={styles.manufacturerModel}>{make || model ? `${makeText} ${modelText}` : 'n/a'}</h4>
+        <h2 className={styles.manufacturerModel}>{make || model ? `${makeText} ${modelText}` : 'n/a'}</h2>
         <div className={optionTitleClassName}>
           <p className={styles.subModel}>{subModelText}&nbsp;</p>
           <span className={styles.option}>{option}</span>

package/source/framework/DataTransformers.ts

@@ -64,7 +64,7 @@ export const transformDataForDecoratedCar = (car: any) => {
     length: _get(car, 'sizeVolumeWeight.length', null),
     base: _get(car, 'driveSuspension.wheelBase', null),
     fuelCapacity: _get(car, 'sizeVolumeWeight.fuelCapacity', null),
-    maximumWeightCapacity: _get(car, 'sizeVolumeWeight.cargoCapacity', null),
+    maximumWeightCapacity: _get(car, 'sizeVolumeWeight.maxWeight', null),
     tareWeight: _get(car, 'sizeVolumeWeight.emptyWeight', null),
     bootCapacity: _get(car, 'sizeVolumeWeight.cargoCapacity', null),
     capacityLoad: _get(car, 'sizeVolumeWeight.completeCapacity', null),

package/source/framework/types/types.ts

@@ -287,6 +287,8 @@ export interface IAccardionSectionProps {
   detailsText?: string | null;
   OfferRequestButtonWrapper?: React.ComponentType<IOfferRequestButtonWrapper>;
   onShowOfferDetails?(event?: React.ChangeEvent<{}>, car?: any, priceTabActiveIndex?: number): void;
+  expanded?: boolean | string;
+  handleChange?: any;
 }
 
 export interface ICar {

package/source/framework/vehiclesProps/decoratedProps.tsx

@@ -848,7 +848,7 @@ const getDecoratedProps = (
         ? t('vehicleProps:value.wltpCo2Combined', { co2: wltpCo2.toLocaleString(language) })
         : null;
         const wltpCo2PluginValue = Number.isFinite(wltpCo2)
-        ? t('vehicleProps:value.wltpCo2Combined', { co2: wltpCo2.toLocaleString(language) })
+        ? t('vehicleProps:value.wltpCo2WtdCombined', { co2: wltpCo2.toLocaleString(language) })
         : null;
         const hybridPlugin = car.engineData.hybridPlugin;
 
@@ -993,8 +993,10 @@ const getDecoratedProps = (
 
             if (moment.utc(offerAvailabilityTimestamp, 'X').isBefore()) {
               offerAvailability = t('cbd:selector_availabilityMode_always');
-            } else {
+            } else if (!!offerAvailabilityTimestamp) {
               offerAvailability = t('vehicleProps:value.fromDate', { date: humanViewTime });
+            } else {
+              offerAvailability = t('vehicleProps:value.onRequest'); // case when "availabilityFrom" is undefined
             }
             break;
 

package/source/locales/data.ts

@@ -78,7 +78,7 @@ export const vehicleProps = (car?: any, isOfferAvailable: boolean = true) => {
         base: `${getFormattedPrice(vehicleOption.base)} mm`,
         topSpeed: `${vehicleOption.topSpeed} km/h`,
         fuelCapacity: `${getFormattedPrice(vehicleOption.fuelCapacity)} l`,
-        maximumWeightCapacity: `${getFormattedPrice(vehicleOption.maximumWeightCapacity)} l`,
+        maximumWeightCapacity: `${getFormattedPrice(vehicleOption.maximumWeightCapacity)} kg`,
         tareWeight: `${getFormattedPrice(vehicleOption.tareWeight)} kg`,
         bootCapacity: `${vehicleOption.bootCapacity} l`,
         capacityLoad: `${vehicleOption.capacityLoad} l`,
@@ -1050,7 +1050,7 @@ export const modalsTranslate = () => {
         annualMileage: 'Laufleistung / Jahr',
         requestOffer: 'Angebot anfragen',
         successfullyRequested: 'Erfolgreich angefragt',
-        info: 'Für Ihre Finanzierungswünsche stellen wir eine Bonitätsanfrage. Bonität vorausgesetzt, dies ist ein Berechnungsbeispiel gem. Ihrer Angaben, welches 2/3 aller Kunden erhalten. Dieses freibleibende Angebot der {{financialInstitution}} wird vermittelt durch die auto.de Media GmbH, Thomaskirchhof 20, 04109 Leipzig, die als ungebundener Vermittler nicht beratend tätig ist. Irrtümer vorbehalten. Preise ggf. inkl. MwSt.'
+        info: 'Für Ihre Finanzierungswünsche stellen wir eine Bonitätsanfrage. Bonität vorausgesetzt, dies ist ein Berechnungsbeispiel gem. Ihrer Angaben, welches 2/3 aller Kunden erhalten. Dieses freibleibende Angebot der {{financialInstitution}} wird vermittelt durch die auto.de Media GmbH, Zwickauer Str. 127 b, 04279 Leipzig, die als ungebundener Vermittler nicht beratend tätig ist. Irrtümer vorbehalten. Preise ggf. inkl. MwSt.'
       }
     }
   };