@bytebrand/fe-ui-core 4.8.46 → 4.8.47

package/media/locales/de/promoSlider.json

@@ -1,7 +1,6 @@
 {
   "consumptionCombined": "{{consumptionCombined}}l/100km (komb)*",
   "co2": "{{co2}}g CO2/km (komb)*",
-  "co2Class": "CO2-Klasse {{class}} (komb)",
   "weDeliverMagdeburg": "Wir liefern Ihr Auto zu Ihnen nach Magdeburg!",
   "weDeliverToYou": "Wir liefern Ihr Auto zu Ihnen!",
   "withoutDeposit": "ohne Anzahlung",

package/media/locales/en/promoSlider.json

@@ -1,7 +1,6 @@
 {
   "consumptionCombined": "{{consumptionCombined}}/100km (comb)*",
   "co2": "{{co2}}g CO2/km (comb)*",
-  "co2Class": "CO2-class {{class}} (comb)",
   "weDeliverMagdeburg": "We will deliver your car to Magdeburg!",
   "weDeliverToYou": "We deliver your car to you!",
   "withoutDeposit": "Without Deposit",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.8.46",
+  "version": "4.8.47",
   "description": "UI components for the auto.de project",
   "main": "index.ts",
   "module": "dist/common.js",
@@ -14,7 +14,7 @@
     "@babel/preset-typescript": "^7.21.0",
     "@bytebrand/car-schema-selectors": "^2.0.7",
     "@bytebrand/fe-histoslider": "3.0.0",
-    "@bytebrand/i18n-dictionaries": "^0.7.5",
+    "@bytebrand/i18n-dictionaries": "^1.5.2",
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
     "@mui/material": "^5.9.0",
@@ -104,7 +104,9 @@
     "@types/react": "^16.8.3"
   },
   "scripts": {
-    "prepare": "husky",
+    "build": "true",
+    "prepublishOnly": "npm run build",
+    "prepare": "npm run build",
     "storybook": "start-storybook -p 6006",
     "clean": "rm -rf ./dist/*.*",
     "build:lib": "yarn clean && webpack --config ./webpack.config.js --progress",

package/source/components/AccordionWidget/AccordionWidget.styl

@@ -191,7 +191,6 @@
   height: 45px
   border-bottom 1px solid $grey-e
   text-transform: none
-  font-size: 11px
 
   +media-tablet-landscape-down()
     padding-top: 7px;

package/source/components/AccordionWidget/AccordionWidget.tsx

@@ -36,7 +36,7 @@ class AccordionWidget extends React.Component<IAccardionSectionProps> {
               key={i}
               description={prop.description}
               classNameIcon={styles.propertyIcon}
-              icon={prop.icon === '' ? '' : (prop.icon || 'no-image')}
+              icon={prop.icon || 'no-image'}
               className={styles.accordionVehicleProp}
             />
           );
@@ -101,13 +101,9 @@ class AccordionWidget extends React.Component<IAccardionSectionProps> {
     const autoDeId = car.metaData && car.metaData.vehicleId;
     const { consumption } = car;
     const mainPropertiesList = getOverviewDetails(consumption.fuel);
-    const mainProperties = mainPropertiesList.map((prop: string) => {
-      const isConsumptionAlternateView = prop.startsWith('consumption') && prop.endsWith('AlternateView');
-      return {
-        icon: isConsumptionAlternateView ? '' : this.props.decoratedProps[prop].icon,
-        description: this.props.decoratedProps[prop].value
-      };
-    });
+    const mainProperties = mainPropertiesList.map((prop: string) => (
+      { icon: this.props.decoratedProps[prop].icon, description: this.props.decoratedProps[prop].value })
+    );
     return (
       <div>
         {this.renderPropsBlock(mainProperties)}

package/source/components/VehicleDetailedSidebar/VehicleDetailedSidebar.tsx

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

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

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

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

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

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

@@ -1,7 +1,6 @@
 /* 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';
@@ -44,8 +43,7 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
     consumption,
     location,
     offer,
-    engineData,
-    leasing
+    engineData
   } = props;
   const firstRegistrationDate = regDate && regDate !== 0 ? regDate : 'N/A';
 
@@ -67,8 +65,7 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
     },
     environmentEmissions: {
       co2: environmentEmissions.co2,
-      wltpCo2: environmentEmissions.wltpCo2,
-      wltpEnergyEfficiencyClass: environmentEmissions.wltpEnergyEfficiencyClass
+      wltpCo2: environmentEmissions.wltpCo2
     },
     consumption: {
       fuel: consumption.fuel,
@@ -83,19 +80,14 @@ 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) => {
-      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'
-      };
-    });
+    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'
+    }));
 
     return mainPropertiesList.map((property: any, index: number) => (
       <VehicleProperty {...property} key={index} />
@@ -157,12 +149,7 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
       ),
         ...routeObj,
         className: wrapClasses,
-        onClick: () => localStorage.setItem(
-          'activeTabCDP',
-          _get(leasing, 'isActive', false)
-            ? t('vehicleProps:title.leasing')
-            : t('vehicleProps:title.financing')
-        ),
+        onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
         href: url,
         target,
         rel

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

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

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

@@ -11,7 +11,7 @@
 
 .smallProp
   span
-    font-size: 9px !important
+    font-size: 10px !important
 
 .pluginVal
   span
@@ -26,8 +26,5 @@
   +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,13 +19,12 @@ class VehicleProperty extends React.Component<IVehicleProperty, {}> {
 
   render(): React.ReactNode {
     const { className, classNameIcon, icon, description, smalltext, hybridPlugin } = this.props;
-    const noIcon: boolean = !icon;
-    const propertyClass: string = `${styles.carProp} ${className ? className : ''} ${smalltext ? styles.smallProp : ''} ${hybridPlugin ? styles.pluginVal : ''} ${noIcon ? styles.noIcon : ''}`;
+    const propertyClass: string = `${styles.carProp} ${className ? className : ''} ${smalltext ? styles.smallProp : ''} ${hybridPlugin ? styles.pluginVal : ''}`;
     const propertyClassIcon: string = `${styles.carIcon} ${classNameIcon ? classNameIcon : ''}`;
 
     return (
       <div className={propertyClass}>
-        {!noIcon && <IconSVG className={propertyClassIcon} name={icon} customDimensions />}
+        <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();
-    if (onFavoriteClick) onFavoriteClick(event, id);
+    onFavoriteClick(event, id);
   };
 
   const renderFavoriteIcon = (): React.ReactNode => {

package/source/components/VehicleSmallCard/VehicleSmallCard.tsx

@@ -12,7 +12,6 @@ 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,
@@ -180,7 +179,8 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     CircularProgressbar,
     isReferenceSearch,
     isAlternative,
-    typeAlternative
+    typeAlternative,
+    showDownPayment: !!(offer as any)?.showDownPayment
   };
 
   const favoriteProps = {
@@ -260,6 +260,7 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     t,
     price,
     showNewLabel,
+    showDownPayment: !!(offer as any)?.showDownPayment,
     ...stats
   };
 
@@ -280,12 +281,7 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
           target,
           rel,
           className: `${styles.redirectClassLink} ${styles.gridAreaTitle}`,
-          onClick: () => localStorage.setItem(
-            'activeTabCDP',
-            _get(price, 'leasing.isActive', false)
-              ? t('vehicleProps:title.leasing')
-              : t('vehicleProps:title.financing')
-          ),
+          onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
           href: url
         })}
 
@@ -338,12 +334,7 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
           target,
           rel,
           className: `${styles.redirectClassLink} ${styles.gridAreaImage}`,
-          onClick: () => localStorage.setItem(
-            'activeTabCDP',
-            _get(price, 'leasing.isActive', false)
-              ? t('vehicleProps:title.leasing')
-              : t('vehicleProps:title.financing')
-          ),
+          onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
           href: url
         })}
         <VehicleInfo {...vehicleInfoProps} />
@@ -375,7 +366,7 @@ VehicleSmallCard.defaultProps = {
   baseUrl: '',
   typeAlternative: '',
   offerSource: '',
-  src: PLACEHOLDER_IMAGE_SMALL_URL,
+  src: 'https://images.auto.de/noimage/small',
   environmentEmissions: null,
   language: 'en',
   consumption: null,

package/source/components/_common/MaterialAccordionGroup/MaterialAccordionGroup.styled.tsx

@@ -1,7 +1,4 @@
-import { styled as muiStyled, createTheme } from '@mui/material/styles';
-
-// Cast to any to bypass MUI 5.9 styled() overload mismatch with strict TS in consumers (fe-landing).
-const styled: any = muiStyled;
+import { styled, createTheme } from '@mui/material/styles';
 
 export const AccordionSummaryContent = styled('div')({
   display: 'flex',

package/source/components/_common/withStats/withStats.styl

@@ -143,6 +143,27 @@ $indent = 10px
     left: 6px
     right: 6px
 
+  &.fourBadges
+    +media-tablet-landscape-up()
+      gap: 6px
+      .badgeItem
+        height: 18px
+        font-size: 10px
+        min-width: 30px
+      .badgeFull
+        display: none
+      .badgeShort
+        display: inline
+
+.badgeItem
+  // hook class for compact-mode overrides
+
+.badgeFull
+  display: inline
+
+.badgeShort
+  display: none
+
 .priceDifferencePerCent
   margin-left: auto;
 

package/source/components/_common/withStats/withStats.tsx

@@ -21,6 +21,8 @@ export type TPrice = {
   historyPriceDifference?: number;
   historyPriceDifferencePerCent?: number;
   vatRate?: number | null;
+  financing?: { firstInstallment?: number; [key: string]: any };
+  leasing?: { firstInstallment?: number; [key: string]: any };
 };
 
 export interface IStatsWrapperProps {
@@ -31,6 +33,7 @@ export interface IStatsWrapperProps {
   statsData?: IStatsData;
   imagesCount?: number;
   showNewLabel?: boolean;
+  showDownPayment?: boolean;
   onFavoriteClick?: (event: any) => void;
   getCarImagesData?: (carId: string, force?: boolean, includeAll?: boolean, type?: any, typeAlternative?: string) => Promise<any>;
   [key: string]: any;
@@ -48,6 +51,7 @@ const withStats = (WrappedComponent: any) => ({
   onSlideChange,
   classWrapPrice = '',
   showNewLabel = false,
+  showDownPayment = false,
   statsSize = 'xs',
   price: { historyPriceDifference = 0, historyPriceDifferencePerCent = 0 },
   ...props
@@ -137,20 +141,33 @@ const withStats = (WrappedComponent: any) => ({
 
   const renderPriceData = () => {
     const newText = !!t ? t('vehicleProps:promoSlider.new') : 'neu';
+    const downPaymentText = !!t ? t('vehicleProps:promoSlider.downPayment') : '0\u20AC Anzahlung';
+    const downPaymentShortText = !!t ? t('vehicleProps:promoSlider.downPaymentShort') : '0\u20AC Anz.';
     const EUR = `\u20AC`;
 
+    const allFourActive = showNewLabel
+      && !!historyPriceDifference && historyPriceDifference >= MIN_PRICE_DIFFERENCE
+      && showDownPayment
+      && !!historyPriceDifferencePerCent && historyPriceDifferencePerCent >= MIN_PERCENT;
+
     return (
-      <div className={classnames(styles.topWrapper, classWrapPrice)}>
-        {showNewLabel && <Badge type='blue' className={styles.new}>{newText}</Badge>}
+      <div className={classnames(styles.topWrapper, classWrapPrice, { [styles.fourBadges]: allFourActive })}>
+        {showNewLabel && <Badge type='blue' className={classnames(styles.new, styles.badgeItem)}>{newText}</Badge>}
         {!!historyPriceDifference && historyPriceDifference >= MIN_PRICE_DIFFERENCE && (
-          <Badge type='green'>
+          <Badge type='green' className={styles.badgeItem}>
             {`-`}
             <FormattedNumber value={historyPriceDifference} numbersAfterDot={0} />
             {` ${EUR}`}
           </Badge>
         )}
+        {showDownPayment && (
+          <Badge type='blue' className={styles.badgeItem}>
+            <span className={styles.badgeFull}>{downPaymentText}</span>
+            <span className={styles.badgeShort}>{downPaymentShortText}</span>
+          </Badge>
+        )}
         {!!historyPriceDifferencePerCent && historyPriceDifferencePerCent >= MIN_PERCENT && (
-          <Badge type='red' className={styles.priceDifferencePerCent}>-{historyPriceDifferencePerCent}%</Badge>
+          <Badge type='red' className={classnames(styles.priceDifferencePerCent, styles.badgeItem)}>-{historyPriceDifferencePerCent}%</Badge>
         )}
       </div>
     );

package/source/framework/DataTransformers.ts

@@ -69,7 +69,6 @@ export const transformDataForDecoratedCar = (car: any) => {
     bootCapacity: _get(car, 'sizeVolumeWeight.cargoCapacity', null),
     capacityLoad: _get(car, 'sizeVolumeWeight.completeCapacity', null),
     wltpCo2:  _get(car, 'environmentEmissions.wltpCo2', null),
-    wltpEnergyEfficiencyClass: _get(car, 'environmentEmissions.wltpEnergyEfficiencyClass', null),
     pluginHybrid: _get(car, 'engineData.pluginHybrid', null),
     wltpCombined: _get(car, 'consumption.wltpCombined', null),
     wltpPowerCombined: _get(car, 'consumption.wltpPowerCombined', null),

package/source/framework/constants/common.ts

@@ -1,12 +1,8 @@
-const _rawHost = typeof window !== 'undefined' ? window.location.host.replace('www.', '') : 'auto.de';
-const _isIP = /^\d+\.\d+\.\d+\.\d+(:\d+)?$/.test(_rawHost);
-const _imgBase = _isIP ? 'https://images.auto.de' : 'https://images.' + _rawHost;
+export const SITE_DOMAIN: string = 'https://www.auto.de';
 
-export const SITE_DOMAIN: string = typeof window !== 'undefined' ? 'https://' + window.location.host : 'https://www.auto.de';
-
-export const PLACEHOLDER_IMAGE: string = _imgBase + '/noimage/';
-export const PLACEHOLDER_IMAGE_SMALL_URL: string = _imgBase + '/noimage/small';
-export const PLACEHOLDER_IMAGE_LARGE_URL: string = _imgBase + '/noimage/large';
+export const PLACEHOLDER_IMAGE: string = 'https://images.auto.de/noimage/';
+export const PLACEHOLDER_IMAGE_SMALL_URL: string = `https://images.auto.de/noimage/noimage/small`;
+export const PLACEHOLDER_IMAGE_LARGE_URL: string = `https://images.auto.de/noimage/noimage/large`;
 
 export const QUOTES_SLIDES_TO_SHOW_DEFAULT = 3;
 

package/source/framework/types/types.ts

@@ -115,7 +115,6 @@ export interface IVehicleInfo {
   url?: string;
   target?: string;
   rel?: string;
-  leasing?: ILeasing;
 }
 
 export interface IVehicleTitleProps {