@bytebrand/fe-ui-core 4.8.109 → 4.8.111

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

@@ -12,23 +12,7 @@
   grid-area: info;
 
   & > .consumptionCombined
-    font-size: 9px
-
-  // ADV-88: new plug-in hybrid consumption line — full-width row at the very bottom of the
-  // card on every breakpoint. `order` pushes it past the price-rating strip so the long text
-  // never overlaps it; overrides the per-variant desktop reset to grid-column/grid-row: auto.
-  & > .pluginFullWidth
-    grid-column: 1 / -1 !important
-    grid-row: auto !important
-    order: 99
-    height: auto !important
-    align-items: flex-start
-    white-space: normal
-    border-bottom: none
-    padding-top: 4px
-    span
-      font-size: 9px
-      line-height: 1.35
+    font-size: 10px
 
   +media-tablet-landscape-down()
     padding: 0 10px;
@@ -43,7 +27,7 @@
     background-color rgba(76, 78, 100, 0.12);
 
   &.vehiclePropertiesLanding
-    grid-auto-rows: minmax(44px, auto);
+    grid-auto-rows: 44px;
     grid-template-columns: 1fr 1fr;
     padding: 0 3px;
 
@@ -57,7 +41,7 @@
 
     +media-tablet-landscape-up()
       padding-top: 2px;
-      grid-auto-rows: minmax(38px, auto);
+      grid-auto-rows: 38px;
       grid-template-columns: 100%;
 
       span
@@ -79,7 +63,7 @@
         margin-bottom: 2px;
 
   &.vehiclePropertiesMain
-    grid-auto-rows: minmax(44px, auto);
+    grid-auto-rows: 44px;
     grid-template-columns: 100%;
     padding: 0 6px;
 
@@ -87,14 +71,8 @@
       white-space: pre-line;
       grid-row: 4;
 
-    // mobile (home top-offer / CDP comparable): vertically centre the "good price" block.
-    +media-tablet-landscape-down()
-      & > .priceRating
-        align-self: center
-        margin: auto 0
-
     +media-tablet-landscape-up()
-      grid-auto-rows: minmax(38px, auto);
+      grid-auto-rows: 38px;
 
       span
         font-size: 11px;
@@ -152,16 +130,6 @@
     grid-template-columns: 1fr 1fr;
     grid-auto-rows: 44px;
 
-    // ADV-70: underline the price-rating ("GUTER PREIS") cell like the spec rows above it —
-    // stretch it to fill the grid cell so the border sits at the same baseline.
-    & > .priceRating
-      margin: 0
-      align-self: stretch
-      display: flex
-      flex-direction: column
-      justify-content: center
-      border-bottom: 1px solid rgba(76, 78, 100, 0.12)
-
     & > .consumptionCombined
       white-space: pre-line;
       grid-column: 1 / span 2;
@@ -248,26 +216,3 @@
 .priceRating
   margin: auto;
   box-sizing: border-box;
-
-// ADV-88: SRL DESKTOP — hide the availability ("Sofort"/"from {date}") cell ONLY for NEW plug-in
-// hybrids (engineData.hybridPlugin + mainData.condition selector_condition_new) so the price-rating
-// flows up into its place. All other cards keep availability; mobile keeps it for everyone.
-.vehiclePropertiesSearch.searchPluginInfo
-  +media-tablet-landscape-up()
-    & > .offerAvailability
-      display: none
-
-// SRL MOBILE — centre the "good price" cell (horizontally + vertically) on ALL search cards.
-.vehicleInfo.vehiclePropertiesSearch
-  +media-tablet-landscape-down()
-    & > .priceRating
-      align-items: center
-      justify-content: center
-
-// SRL MOBILE — drop the "good price" underline ONLY for NEW plug-in hybrids (engineData.hybridPlugin
-// + mainData.condition selector_condition_new). The extra .searchPluginInfo makes this (0,4,0) so it
-// beats the base (0,3,0) border-bottom; non-plug-in cards keep the underline.
-.vehicleInfo.vehiclePropertiesSearch.searchPluginInfo
-  +media-tablet-landscape-down()
-    & > .priceRating
-      border-bottom: none

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,10 +43,8 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
     consumption,
     location,
     offer,
-    engineData,
-    leasing,
-    suppressConsumption
-  } = props as (typeof props & { suppressConsumption?: boolean });
+    engineData
+  } = props;
   const firstRegistrationDate = regDate && regDate !== 0 ? regDate : 'N/A';
 
   const dataDecoratedProps = {
@@ -68,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,
@@ -82,29 +78,16 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
     },
   };
 
-  // ADV-88: ANY plug-in hybrid (new or used) carries the long weighted+discharged consumption/CO2
-  // line — render it full-width. Gated on hybridPlugin only, no condition check.
-  // ADV-88: "is a hybrid car" is determined by fuel type (hybrid electric + diesel/petrol), not hybridPlugin.
-  const isPluginHybrid = consumption.fuel === 'selector_fuel_hybridElectricalDiesel'
-    || consumption.fuel === 'selector_fuel_hybridElectricalPetrol';
   const decoratedProps = getDecoratedProps(dataDecoratedProps, t, language);
   const renderProperty = (renderProperties: any, vehicleComponentName?: any) => {
-    const mainPropertiesList = renderProperties(dataDecoratedProps.consumption.fuel, combineRefAlternative)
-      // ADV-88: on landing/main the plug-in consumption line is rendered full-width by VehicleSmallCard.
-      .filter((prop: string) => !(suppressConsumption && decoratedProps[prop] && decoratedProps[prop].name === 'consumptionCombined'))
-      .map((prop: string) => {
-      const isConsumption = decoratedProps[prop].name === 'consumptionCombined';
-      // On non-SRL cards (and for the full-width plug-in line) drop the fuel-pump icon to free up space.
-      const hideConsumptionIcon = isConsumption && (vehicleComponentName !== 'search' || isPluginHybrid);
-      return {
-        icon: hideConsumptionIcon ? '' : decoratedProps[prop].icon,
-        description: decoratedProps[prop].value,
-        className: classnames(styles[decoratedProps[prop].name], { [styles.pluginFullWidth]: isConsumption && isPluginHybrid }),
-        classNameIcon: (vehicleComponentName === 'search' || 'myVehicles' || 'favorite' || 'recently') && styles.carIconSearch,
-        smalltext: isConsumption && (vehicleComponentName !== 'search'),
-        hybridPlugin: isPluginHybrid && 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} />
@@ -117,8 +100,6 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
     { [styles.vehiclePropertiesLanding]: vehicleComponentName === 'landing' },
     { [styles.vehiclePropertiesMain]: vehicleComponentName === 'main' },
     { [styles.vehiclePropertiesSearch]: vehicleComponentName === 'search' },
-    // ADV-88: mark a plug-in SRL card so its "good price" underline can be dropped on mobile.
-    { [styles.searchPluginInfo]: isPluginHybrid && vehicleComponentName === 'search' },
     { [styles.vehiclePropertiesFavorite]: vehicleComponentName === 'favorite' },
     { [styles.vehiclePropertiesMyVehicles]: vehicleComponentName === 'myVehicles' },
     { [styles.vehiclePropertiesRecently]: vehicleComponentName === 'recently' },
@@ -168,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/VehiclePrice/VehiclePrice.tsx

@@ -47,10 +47,6 @@ export interface IVehiclePriceSectionProps {
   onAddOfferToMainSlideClick?: (id: string, mainImageId: string, price: number, financingConfig: any) => void;
   combineRefAlternative?: boolean;
   typeAlternative?: string;
-  // ADV-88: hide the "monatlich z.B."/"monthly e.g." column header for the task's cars
-  // (new plug-in hybrids that get the externalised consumption row) so the price column
-  // moves up. Passed true from VehicleSmallCard only when the consumption row is shown.
-  suppressMonthlyFrom?: boolean;
 }
 
 // interface IPriceData {
@@ -99,6 +95,7 @@ const VehiclePrice: React.FC<IVehiclePriceSectionProps> = (props: IVehiclePriceS
     routeObj,
     toggleCarToCompare,
     toCompare,
+    priceSubMtl,
     classButton,
     onRemoveClick,
     showCompareCheckboxes,
@@ -117,7 +114,6 @@ const VehiclePrice: React.FC<IVehiclePriceSectionProps> = (props: IVehiclePriceS
     } = {},
     common: { isStrikeShown },
     typeAlternative,
-    suppressMonthlyFrom,
     margin
   } = props;
 
@@ -148,31 +144,24 @@ const VehiclePrice: React.FC<IVehiclePriceSectionProps> = (props: IVehiclePriceS
                                    vehicleComponentName === 'landing' ||
                                    vehicleComponentName === 'main' ? 'outlined' : 'contained';
 
-  // ADV-70 (design): the monthly label ("mtl."/"mth.") is shown BEFORE every monthly rate on
-  // all card surfaces (SRL desktop+mobile, comparable, home, landing) — derive it from the
-  // localized priceSub key instead of the consumer-passed priceSubMtl (which is null on mobile),
-  // so it renders consistently everywhere. VehiclePriceItem strips the leading "/".
-  const monthlyPrefix = (t && t('vehicleProps:value.priceSub')) || '';
-
   const priceItemsGlobal = [
     {
       perMonthOld: oldMonthlyInstallment,
       perMonthCurrent: monthlyInstallment,
       title: t('vehicleProps:title.financing'),
-      // ADV-88 (design): drop the "z.B."/"e.g." prefix on the SRL card — the monthly label carries the meaning.
-      prefixOldPrice: false,
+      prefixOldPrice: vehicleComponentName === 'search' && !isMobileOnly && t('vehicleProps:value.prefixOldPrice'),
       postfix: '3',
-      priceSub: monthlyPrefix,
+      priceSub: priceSubMtl,
       tooltipDescription: !combineRefAlternative && t('vehicleProps:title.financingDescription')
     },
     {
       perMonthOld: lOldMonthlyInstallment,
       perMonthCurrent: lMonthlyInstallment,
-      prefixOldPrice: false,
+      prefixOldPrice: vehicleComponentName === 'search' && !isMobileOnly && t('vehicleProps:value.prefixOldPrice'),
       postfix: '1,3',
       isPriceDisable: !isLeasingActive,
       title: t('vehicleProps:title.leasing'),
-      priceSub: monthlyPrefix,
+      priceSub: priceSubMtl,
       tooltipDescription: !combineRefAlternative && t('vehicleProps:title.leasingDescription')
     }
   ];
@@ -234,10 +223,10 @@ const VehiclePrice: React.FC<IVehiclePriceSectionProps> = (props: IVehiclePriceS
           formControlClassName={styles.wrapCheckbox}
         />
       )}
-      {!suppressMonthlyFrom && vehicleComponentName !== 'favorite' && vehicleComponentName !== 'search' && !isMobileOnly && (
+      {vehicleComponentName !== 'favorite' && vehicleComponentName !== 'search' && !isMobileOnly && (
         <span className={vehiclePriceTitleClassName}>{t('vehicleProps:title.monthlyFrom')}</span>
       )}
-      {!suppressMonthlyFrom && isMobileOnly && !showCompareCheckboxes && (
+      {isMobileOnly && !showCompareCheckboxes && (
         <span className={vehiclePriceTitleClassName}>{t('vehicleProps:title.monthlyFrom')}</span>
       )}
       {priceData.map((props: any) => (

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.styl

@@ -131,8 +131,7 @@
 
   &.vehicleWrapMain
     box-sizing: border-box;
-    // mobile home/comparable: equal info|price columns (was 55/45).
-    grid-template-columns: 50% 50%;
+    grid-template-columns: 55% 45%;
     border: 1px solid #DFDFDF;
     margin-bottom: 5px;
     border-radius: 10px;
@@ -146,11 +145,7 @@
       padding: 0 16px;
 
     +media-tablet-landscape-up()
-      // narrow 4-up home card (~256px): the price section (rates + "Zum Angebot" button) needs
-      // ~150px or it overflows the frame, so give the price column the larger share and the info
-      // (left) column the smaller one; minmax(0,…) keeps both tracks inside the card so nothing
-      // is clipped and the info spec text wraps instead of spilling out.
-      grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
+      grid-template-columns: 120px 1fr;
       border: 1px solid rgba(76, 78, 100, 0.12);
       border-radius: 10px;
       margin-bottom: 0;
@@ -221,66 +216,6 @@
 .gridAreaImage
   grid-area: image;
 
-// ADV-70: plug-in consumption/CO2 line — dedicated full-width row BELOW the specs table /
-// price block ("Zum Angebot") and ABOVE the equipment text, in small grey text. The
-// .vehicleWrapNewPlugin grid inserts a full-width 'consumption' row for every externalised
-// card type (search / landing / main / comparable).
-.vehicle.vehicleWrapNewPlugin
-  grid-template-areas:
-    'title title'\
-    'image image'\
-    'info price'\
-    'consumption consumption'\
-    'seoText seoText'
-
-  // SRL/search 3-column desktop: the consumption line sits in the INFO column only
-  // (starts AND ends under the spec block, not under the image and not into the price
-  // column). image + price span rows 2-3 so the "Zum Angebot" button bottom-aligns
-  // with the consumption line.
-  &.vehicleWrapSearch
-    +media-tablet-landscape-up()
-      grid-template-areas:
-        'title title price'\
-        'image info price'\
-        'image consumption price'
-      // No divider on the DESKTOP search card — the consumption sits inside the info
-      // column (button-aligned) where a top line is unwanted; keep it on mobile only.
-      & > .gridAreaConsumption
-        border-top: 0;
-        margin-top: 0;
-
-  // Favorites desktop: consumption sits in the info column between the image and the
-  // price/buttons column, button-aligned — same as the SRL card.
-  &.vehicleWrapFavorite
-    +media-tablet-landscape-up()
-      grid-template-areas:
-        'title title price'\
-        'image info price'\
-        'image consumption price'
-
-.gridAreaConsumption
-  grid-area: consumption;
-  width: 100%;
-  box-sizing: border-box;
-  // ADV-88: a divider above the externalised consumption/CO2 line on EVERY card surface
-  // it appears on (landing / main = home+CDP-comparable / search / favorite). The element
-  // only renders for new plug-in hybrids, so the line shows exactly for the task's cars;
-  // it spans the full row width where the row is full-width (mobile + main/landing), and
-  // the info-column width on the desktop search/favorite layout. Sets the line apart from
-  // the spec/price/"Zum Angebot" block above it.
-  border-top: 1px solid rgba(76, 78, 100, 0.12);
-  // a few px of space ABOVE the divider so the line doesn't hug the price/"Zum Angebot" block.
-  margin-top: 6px;
-  padding: 6px 10px 2px 10px;
-  font-size: 9px;
-  line-height: 1.4;
-  color: rgba(76, 78, 100, 0.87);
-  word-break: break-word;
-
-  span
-    font-size: 9px !important;
-    line-height: 1.4 !important;
-
 .wrapAlternativeData
   display flex
   font-size: 12px;

package/source/components/VehicleSmallCard/VehicleSmallCard.tsx

@@ -1,7 +1,6 @@
 import React, { memo, FunctionComponent, ReactNode, MouseEvent, createElement } from 'react';
 import classnames from 'classnames';
 import _get from 'lodash/get';
-import getCardDecoratedProps from '../../framework/vehiclesProps/decoratedLightProps';
 import LazyLoad from 'react-lazyload';
 import withLabel from '../_common/withLabel/withLabel';
 import withStats, { IStatsWrapperProps } from '../_common/withStats/withStats';
@@ -13,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,
@@ -40,6 +38,7 @@ interface IVehicleSmallCardProps {
   isReferenceSearch?: boolean;
   dashboardButtonText?: string;
   showNewLabel?: boolean;
+  disableDownPaymentLocalStorage?: boolean;
   CircularProgressbar?: any;
   slider?: IVehicleSliderProps | IVehicleSliderForSRLProps;
   stats?: IStatsWrapperProps;
@@ -110,6 +109,7 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     price,
     seoText,
     showNewLabel,
+    disableDownPaymentLocalStorage,
     linkTag = 'a',
     language,
     className,
@@ -149,32 +149,6 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
 
   const combineRefAlternative = isAlternative || isReferenceSearch;
 
-  // ADV-88: on the narrow landing/main recommendation cards the long plug-in consumption line
-  // doesn't fit the slim `info` column — render it as its own full-width row below the price
-  // block (under "Zum Angebot") instead, and suppress it inside VehicleInfo to avoid duplication.
-  // ADV-88: ANY plug-in hybrid (new or used) carries the long weighted+discharged consumption/CO2
-  // line — externalise it to a full-width row so it doesn't overflow the narrow info column. Gated
-  // on hybridPlugin only, no condition check.
-  // ADV-88: "is a hybrid car" is determined by fuel type (hybrid electric + diesel/petrol), not hybridPlugin.
-  const cardFuel = consumption ? (consumption as any).fuel : undefined;
-  const isPlugin = cardFuel === 'selector_fuel_hybridElectricalDiesel'
-    || cardFuel === 'selector_fuel_hybridElectricalPetrol';
-  const externalizeConsumption = isPlugin
-    && (vehicleComponentName === 'landing' || vehicleComponentName === 'main'
-      || vehicleComponentName === 'search' || vehicleComponentName === 'comparable'
-      || vehicleComponentName === 'favorite');
-  let pluginConsumptionNode: ReactNode = null;
-  if (externalizeConsumption) {
-    const decoCar = {
-      consumption,
-      environmentEmissions,
-      engineData,
-      mainData: { condition: _get(info, 'condition') }
-    };
-    const deco = getCardDecoratedProps(decoCar, t, language) as any;
-    pluginConsumptionNode = _get(deco, 'consumptionCombinedAlternateView.value', null);
-  }
-
   const label = {
     labelVisible: isTop,
     labelWrapperClassName: styles.labelWrapper
@@ -189,7 +163,6 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     { [styles.vehicleWrapMyVeicles]: vehicleComponentName === 'myVehicles' },
     { [styles.vehicleWrapFavorite]: vehicleComponentName === 'favorite' },
     { [styles.vehicleWrapRecently]: vehicleComponentName === 'recently' },
-    { [styles.vehicleWrapNewPlugin]: externalizeConsumption },
     { [styles.topVehicle]: isTop },
     { [styles.disableBorder]: minimizeData },
     { [styles.isFirstReferenceCar]: isReferenceSearch && index === 0 },
@@ -209,7 +182,8 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     isReferenceSearch,
     isAlternative,
     typeAlternative,
-    showDownPayment: !!(offer as any)?.showDownPayment
+    showDownPayment: !!(offer as any)?.showDownPayment,
+    disableDownPaymentLocalStorage,
   };
 
   const favoriteProps = {
@@ -243,7 +217,6 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     target,
     rel,
     engineData,
-    suppressConsumption: externalizeConsumption,
     ...price,
     ...info
   };
@@ -270,9 +243,6 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     typeAlternative,
     isAlternative,
     showCompareCheckboxes,
-    // ADV-88: hide the "monatlich z.B." price-column header on exactly the cards that show
-    // the externalised consumption row (new plug-in hybrids) so the price column rises.
-    suppressMonthlyFrom: externalizeConsumption && !!pluginConsumptionNode,
     ...price,
     ...compareProps
   };
@@ -294,6 +264,7 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     price,
     showNewLabel,
     showDownPayment: !!(offer as any)?.showDownPayment,
+    disableDownPaymentLocalStorage,
     ...stats
   };
 
@@ -314,12 +285,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
         })}
 
@@ -372,19 +338,11 @@ 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} />
         <VehiclePrice {...vehiclePriceProps} />
-        {externalizeConsumption && pluginConsumptionNode ? (
-          <div className={styles.gridAreaConsumption}>{pluginConsumptionNode}</div>
-        ) : null}
         {seoText ? (
           <a className={`${styles.redirectClassLink} ${styles.gridAreaSeoText}`} href={url}>
             <SeoText seoText={seoText} />
@@ -412,7 +370,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/MaterialTooltip/MaterialTooltip.tsx

@@ -7,13 +7,12 @@ import ClickAwayListener from '@mui/material/ClickAwayListener';
 import { debounce } from 'lodash';
 
 interface IMaterialTooltip {
-  text: React.ReactNode;
+  text: string;
   icon?: string;
   className?: string;
   placement?: 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top';
   disabled?: Boolean;
   zindex?: number;
-  disablePortal?: boolean;
 }
 
 const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
@@ -33,7 +32,7 @@ const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
   }
 }));
 
-const MaterialTooltip = ({ text, placement, className, disabled, zindex, disablePortal = true }: IMaterialTooltip) => {
+const MaterialTooltip = ({ text, placement, className, disabled, zindex }: IMaterialTooltip) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const onHandleMenuOpen = (event: any) => {
@@ -72,7 +71,7 @@ const MaterialTooltip = ({ text, placement, className, disabled, zindex, disable
             className={className}
             zindex={zindex}
             PopperProps={{
-              disablePortal
+              disablePortal: true
             }}
           >
             <IconButton>

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

@@ -150,20 +150,10 @@ $indent = 10px
         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;