@bytebrand/fe-ui-core-autobahn 1.0.1 → 1.0.3

package/compat/VehicleSmallCard/VehicleSmallCard.tsx

@@ -1,448 +1,448 @@
-import React, { memo, FunctionComponent, ReactNode, MouseEvent, createElement } from 'react';
-import classnames from 'classnames';
-import _get from 'lodash/get';
-import getCardDecoratedProps from '../../vehiclesProps/decoratedLightProps';
-import LazyLoad from 'react-lazyload';
-import withLabel from '../withLabel/withLabel';
-import withStats, { IStatsWrapperProps } from '../withStats/withStats';
-import Image from '../Image/Image';
-import IconSVG from '../../iconsvg/IconSVG';
-import VehicleSlider from '../VehicleSlider/VehicleSlider';
-import VehicleSliderForSRL from '../VehicleSlider/VehicleSliderForSRL';
-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 '../../constants/common';
-import {
-  IVehicleInfo,
-  IPrice,
-  IVehicleLocation,
-  IVehicleTitleProps,
-  IVehicleSliderProps,
-  IVehicleSliderForSRLProps,
-  IVehicleCompareProps
-} from '../../types/types';
-import { vehicleProps } from '../../locales/legacy/data';
-import styles from './VehicleSmallCard.styl';
-
-const DecoratedSlider = withLabel(withStats(VehicleSlider));
-const DecoratedSliderForSRL = withStats(VehicleSliderForSRL);
-const ImageWithStats = withStats(Image);
-
-interface IVehicleSmallCardProps {
-  t?: (key: string, options?: object) => string;
-  i18nPrefixForPriceRating?: string;
-  language?: string;
-  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite' | 'recently';
-  isTop?: boolean;
-  isDealerSuperAdmin?: boolean;
-  isReferenceSearch?: boolean;
-  dashboardButtonText?: string;
-  showNewLabel?: boolean;
-  disableDownPaymentLocalStorage?: boolean;
-  CircularProgressbar?: any;
-  slider?: IVehicleSliderProps | IVehicleSliderForSRLProps;
-  stats?: IStatsWrapperProps;
-  title?: IVehicleTitleProps;
-  info?: IVehicleInfo;
-  location?: IVehicleLocation;
-  compareProps?: IVehicleCompareProps;
-  environmentEmissions?: object;
-  consumption?: object;
-  engineData?: object;
-  isCarInFavorite?: boolean;
-  offer?: object;
-  price?: IPrice;
-  seoText?: string;
-  classButton?: string;
-  mainImageId?: string;
-  target?: string;
-  rel?: string;
-  crawledAt?: string;
-  modificationDate?: string;
-  baseUrl?: string;
-  offerSource?: string;
-  priceSubMtl?: string | null;
-  ownerName?: string;
-  className?: string;
-  id?: string;
-  linkTag?: string;
-  src?: string;
-  url?: string;
-  iconName?: string;
-  children?: ReactNode;
-  showSlider?: boolean;
-  showOfferBtn?: boolean;
-  hasInteriorExteriorPhoto?: boolean;
-  showCompareCheckboxes?: boolean;
-  showFavoriteStar?: boolean;
-  minimizeData?: boolean;
-  onContainerClick?: (event?: any) => void;
-  renderIDInfo?: () => React.ReactNode;
-  renderVehicleStatus?: () => React.ReactNode;
-  onFavoriteClick?: (event?: any) => void;
-  onDetailsClick(id: string): void;
-  onAddOfferToMainSlideClick?: (id: string, mainImageId: string, price: number, financingConfig: any) => void;
-  isAlternative?: boolean;
-  typeAlternative?: string;
-  index?: number;
-}
-
-const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
-  const {
-    t = (phrase: string) => _get(vehicleProps(props), phrase.replace(':', '.'), phrase),
-    isTop,
-    slider,
-    vehicleComponentName,
-    i18nPrefixForPriceRating,
-    stats,
-    compareProps,
-    title,
-    info,
-    location,
-    consumption,
-    environmentEmissions,
-    isReferenceSearch,
-    showCompareCheckboxes,
-    CircularProgressbar,
-    engineData,
-    offer,
-    price,
-    seoText,
-    showNewLabel,
-    disableDownPaymentLocalStorage,
-    linkTag = 'a',
-    language,
-    className,
-    url,
-    target,
-    rel,
-    priceSubMtl,
-    onContainerClick,
-    onAddOfferToMainSlideClick,
-    isDealerSuperAdmin,
-    mainImageId,
-    onFavoriteClick,
-    isCarInFavorite,
-    onDetailsClick,
-    renderIDInfo,
-    renderVehicleStatus,
-    src,
-    crawledAt,
-    modificationDate,
-    baseUrl,
-    offerSource,
-    ownerName,
-    id,
-    children,
-    iconName,
-    showSlider,
-    classButton,
-    hasInteriorExteriorPhoto,
-    dashboardButtonText,
-    showOfferBtn = false,
-    showFavoriteStar = true,
-    minimizeData = false,
-    isAlternative = false,
-    typeAlternative,
-    index
-  } = 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
-  };
-
-  const wrapperClassName = classnames(
-    styles.vehicle,
-    { [styles.vehicleWrapLanding]: vehicleComponentName === 'landing' },
-    { [styles.vehicleWrapMain]: vehicleComponentName === 'main' },
-    { [styles.vehicleWrapSearch]: vehicleComponentName === 'search' },
-    { [styles.vehicleWrapComparable]: vehicleComponentName === 'comparable' },
-    { [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 },
-    className
-  );
-
-  const decoratedSliderProps = {
-    t,
-    id,
-    hasInteriorExteriorPhoto,
-    ...label,
-    ...stats,
-    ...slider,
-    price,
-    showNewLabel,
-    CircularProgressbar,
-    isReferenceSearch,
-    isAlternative,
-    typeAlternative,
-    showDownPayment: !!(offer as any)?.showDownPayment,
-    disableDownPaymentLocalStorage,
-  };
-
-  const favoriteProps = {
-    ...title,
-    id,
-    vehicleComponentName,
-    renderVehicleStatus,
-    isCarInFavorite,
-    onFavoriteClick,
-    showFavoriteStar,
-    combineRefAlternative
-  };
-
-  const routeObj = linkTag !== 'a'
-    ? { to: { pathname: url, state: { mainImageId, mainImageUrl: src, carId: id, isSavedCheckout: showOfferBtn, ...title } } }
-    : '';
-
-  const vehicleInfoProps = {
-    t,
-    combineRefAlternative,
-    environmentEmissions,
-    i18nPrefixForPriceRating,
-    vehicleComponentName,
-    location,
-    consumption,
-    offer,
-    language,
-    linkTag,
-    routeObj,
-    url,
-    target,
-    rel,
-    engineData,
-    suppressConsumption: externalizeConsumption,
-    ...price,
-    ...info
-  };
-
-  const vehiclePriceProps = {
-    t,
-    id,
-    url,
-    target,
-    rel,
-    iconName,
-    dashboardButtonText,
-    vehicleComponentName,
-    classButton,
-    linkTag,
-    priceSubMtl,
-    onAddOfferToMainSlideClick,
-    isDealerSuperAdmin,
-    onDetailsClick,
-    mainImageId,
-    routeObj,
-    showOfferBtn,
-    combineRefAlternative,
-    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
-  };
-
-  const lazyLoadProps = {
-    once: true,
-    offset: 500
-  };
-
-  const imageProps = {
-    src,
-    width: '100%',
-    ratioW: 4,
-    ratioH: 3
-  };
-
-  const statsProps = {
-    t,
-    price,
-    showNewLabel,
-    showDownPayment: !!(offer as any)?.showDownPayment,
-    disableDownPaymentLocalStorage,
-    ...stats
-  };
-
-  const linkBaseUrl = (e: MouseEvent<HTMLImageElement>) => {
-    e.preventDefault();
-    if (baseUrl) window.open(baseUrl, '_blank');
-  };
-  const showComponentLikeSlider = vehicleComponentName === 'search' ||
-                                  vehicleComponentName === 'myVehicles' ||
-                                  vehicleComponentName === 'favorite' ||
-                                  vehicleComponentName === 'recently';
-  return (
-    <section className={wrapperClassName} onClick={onContainerClick} id={id}>
-      <>
-        {createElement(linkTag, {
-          children: <VehicleTitle {...favoriteProps} />,
-          ...routeObj,
-          target,
-          rel,
-          className: `${styles.redirectClassLink} ${styles.gridAreaTitle}`,
-          // ADV-116: opening a CDP from a card defaults to the Financing tab.
-          onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
-          href: url
-        })}
-
-        {createElement(linkTag, {
-          children: (
-            <>
-              {showSlider ? (
-                <>
-                  {showComponentLikeSlider ? (
-                    <>
-                      <DecoratedSliderForSRL {...decoratedSliderProps} />
-                      {renderIDInfo ? renderIDInfo() : null}
-                      {combineRefAlternative && (
-                        <div className={styles.wrapAlternativeData}>
-                          <div>
-                            {offerSource || ownerName ? (
-                              <>
-                                <IconSVG className={styles.svgIcon} name='linkAlternative' />
-                                <span onClick={(e: MouseEvent<HTMLImageElement>) => linkBaseUrl(e)}>
-                                  {!typeAlternative ? ownerName : t(`cbd:${offerSource}`)}
-                                </span>
-                              </>
-                            ) : ''}
-                          </div>
-                          {crawledAt || modificationDate ? (
-                            <div>
-                              <IconSVG className={styles.svgIcon} name='lastCrawledAt' />
-                              <span>
-                                {!typeAlternative ? modificationDate : crawledAt}
-                              </span>
-                            </div>
-                          ) : ''}
-                        </div>
-                      )}
-                    </>
-                  ) : (
-                    <figure className={styles.figure}>
-                      <DecoratedSlider {...decoratedSliderProps} />
-                    </figure>
-                  )}
-                </>
-              ) : (
-                <LazyLoad {...lazyLoadProps}>
-                  <ImageWithStats {...imageProps} {...statsProps} />
-                </LazyLoad>
-              )}
-            </>
-          ),
-          ...routeObj,
-          target,
-          rel,
-          className: `${styles.redirectClassLink} ${styles.gridAreaImage}`,
-          // ADV-116: opening a CDP from a card defaults to the Financing tab.
-          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} />
-          </a>
-          ) : null
-        }
-        {children}
-      </>
-    </section>
-  );
-};
-
-VehicleSmallCard.defaultProps = {
-  vehicleComponentName: 'landing',
-  isTop: false,
-  showSlider: false,
-  isDealerSuperAdmin: false,
-  showCompareCheckboxes: false,
-  priceSubMtl: null,
-  slider: {},
-  stats: {},
-  title: {},
-  info: {},
-  crawledAt: 'N/A',
-  baseUrl: '',
-  typeAlternative: '',
-  offerSource: '',
-  src: PLACEHOLDER_IMAGE_SMALL_URL,
-  environmentEmissions: null,
-  language: 'en',
-  consumption: null,
-  showNewLabel: false,
-  isCarInFavorite: false,
-  onContainerClick: () => { },
-  onDetailsClick: () => { }
-};
-
-// export default VehicleSmallCard;
-export default memo(VehicleSmallCard, (props, nextProps) => { // shouldComponentUpdate
-  const {
-    t,
-    price: {
-      financing: { monthlyInstallment, annualMileage, withFinalInstallment },
-      leasing: { monthlyInstallment: lMonthlyInstallment }
-    },
-    stats: { statsData },
-    isCarInFavorite,
-    compareProps,
-    children,
-    slider: {
-      images
-    }
-  } = props;
-
-  return t                    === nextProps.t
-    && monthlyInstallment     === nextProps.price.financing.monthlyInstallment
-    && annualMileage          === nextProps.price.financing.annualMileage
-    && withFinalInstallment   === nextProps.price.financing.withFinalInstallment
-    && lMonthlyInstallment    === nextProps.price.leasing.monthlyInstallment
-    && isCarInFavorite        === nextProps.isCarInFavorite
-    && statsData              === nextProps.stats.statsData
-    && _get(compareProps, 'toCompare') === _get(compareProps, 'nextProps.toCompare')
-    && children               === nextProps.children
-    && images                 === nextProps.slider.images;
-});
+import React, { memo, FunctionComponent, ReactNode, MouseEvent, createElement } from 'react';
+import classnames from 'classnames';
+import _get from 'lodash/get';
+import getCardDecoratedProps from '../../vehiclesProps/decoratedLightProps';
+import LazyLoad from 'react-lazyload';
+import withLabel from '../withLabel/withLabel';
+import withStats, { IStatsWrapperProps } from '../withStats/withStats';
+import Image from '../Image/Image';
+import IconSVG from '../../iconsvg/IconSVG';
+import VehicleSlider from '../VehicleSlider/VehicleSlider';
+import VehicleSliderForSRL from '../VehicleSlider/VehicleSliderForSRL';
+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 '../../constants/common';
+import {
+  IVehicleInfo,
+  IPrice,
+  IVehicleLocation,
+  IVehicleTitleProps,
+  IVehicleSliderProps,
+  IVehicleSliderForSRLProps,
+  IVehicleCompareProps
+} from '../../types/types';
+import { vehicleProps } from '../../locales/legacy/data';
+import styles from './VehicleSmallCard.styl';
+
+const DecoratedSlider = withLabel(withStats(VehicleSlider));
+const DecoratedSliderForSRL = withStats(VehicleSliderForSRL);
+const ImageWithStats = withStats(Image);
+
+interface IVehicleSmallCardProps {
+  t?: (key: string, options?: object) => string;
+  i18nPrefixForPriceRating?: string;
+  language?: string;
+  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite' | 'recently';
+  isTop?: boolean;
+  isDealerSuperAdmin?: boolean;
+  isReferenceSearch?: boolean;
+  dashboardButtonText?: string;
+  showNewLabel?: boolean;
+  disableDownPaymentLocalStorage?: boolean;
+  CircularProgressbar?: any;
+  slider?: IVehicleSliderProps | IVehicleSliderForSRLProps;
+  stats?: IStatsWrapperProps;
+  title?: IVehicleTitleProps;
+  info?: IVehicleInfo;
+  location?: IVehicleLocation;
+  compareProps?: IVehicleCompareProps;
+  environmentEmissions?: object;
+  consumption?: object;
+  engineData?: object;
+  isCarInFavorite?: boolean;
+  offer?: object;
+  price?: IPrice;
+  seoText?: string;
+  classButton?: string;
+  mainImageId?: string;
+  target?: string;
+  rel?: string;
+  crawledAt?: string;
+  modificationDate?: string;
+  baseUrl?: string;
+  offerSource?: string;
+  priceSubMtl?: string | null;
+  ownerName?: string;
+  className?: string;
+  id?: string;
+  linkTag?: string;
+  src?: string;
+  url?: string;
+  iconName?: string;
+  children?: ReactNode;
+  showSlider?: boolean;
+  showOfferBtn?: boolean;
+  hasInteriorExteriorPhoto?: boolean;
+  showCompareCheckboxes?: boolean;
+  showFavoriteStar?: boolean;
+  minimizeData?: boolean;
+  onContainerClick?: (event?: any) => void;
+  renderIDInfo?: () => React.ReactNode;
+  renderVehicleStatus?: () => React.ReactNode;
+  onFavoriteClick?: (event?: any) => void;
+  onDetailsClick(id: string): void;
+  onAddOfferToMainSlideClick?: (id: string, mainImageId: string, price: number, financingConfig: any) => void;
+  isAlternative?: boolean;
+  typeAlternative?: string;
+  index?: number;
+}
+
+const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
+  const {
+    t = (phrase: string) => _get(vehicleProps(props), phrase.replace(':', '.'), phrase),
+    isTop,
+    slider,
+    vehicleComponentName,
+    i18nPrefixForPriceRating,
+    stats,
+    compareProps,
+    title,
+    info,
+    location,
+    consumption,
+    environmentEmissions,
+    isReferenceSearch,
+    showCompareCheckboxes,
+    CircularProgressbar,
+    engineData,
+    offer,
+    price,
+    seoText,
+    showNewLabel,
+    disableDownPaymentLocalStorage,
+    linkTag = 'a',
+    language,
+    className,
+    url,
+    target,
+    rel,
+    priceSubMtl,
+    onContainerClick,
+    onAddOfferToMainSlideClick,
+    isDealerSuperAdmin,
+    mainImageId,
+    onFavoriteClick,
+    isCarInFavorite,
+    onDetailsClick,
+    renderIDInfo,
+    renderVehicleStatus,
+    src,
+    crawledAt,
+    modificationDate,
+    baseUrl,
+    offerSource,
+    ownerName,
+    id,
+    children,
+    iconName,
+    showSlider,
+    classButton,
+    hasInteriorExteriorPhoto,
+    dashboardButtonText,
+    showOfferBtn = false,
+    showFavoriteStar = true,
+    minimizeData = false,
+    isAlternative = false,
+    typeAlternative,
+    index
+  } = 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
+  };
+
+  const wrapperClassName = classnames(
+    styles.vehicle,
+    { [styles.vehicleWrapLanding]: vehicleComponentName === 'landing' },
+    { [styles.vehicleWrapMain]: vehicleComponentName === 'main' },
+    { [styles.vehicleWrapSearch]: vehicleComponentName === 'search' },
+    { [styles.vehicleWrapComparable]: vehicleComponentName === 'comparable' },
+    { [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 },
+    className
+  );
+
+  const decoratedSliderProps = {
+    t,
+    id,
+    hasInteriorExteriorPhoto,
+    ...label,
+    ...stats,
+    ...slider,
+    price,
+    showNewLabel,
+    CircularProgressbar,
+    isReferenceSearch,
+    isAlternative,
+    typeAlternative,
+    showDownPayment: !!(offer as any)?.showDownPayment,
+    disableDownPaymentLocalStorage,
+  };
+
+  const favoriteProps = {
+    ...title,
+    id,
+    vehicleComponentName,
+    renderVehicleStatus,
+    isCarInFavorite,
+    onFavoriteClick,
+    showFavoriteStar,
+    combineRefAlternative
+  };
+
+  const routeObj = linkTag !== 'a'
+    ? { to: { pathname: url, state: { mainImageId, mainImageUrl: src, carId: id, isSavedCheckout: showOfferBtn, ...title } } }
+    : '';
+
+  const vehicleInfoProps = {
+    t,
+    combineRefAlternative,
+    environmentEmissions,
+    i18nPrefixForPriceRating,
+    vehicleComponentName,
+    location,
+    consumption,
+    offer,
+    language,
+    linkTag,
+    routeObj,
+    url,
+    target,
+    rel,
+    engineData,
+    suppressConsumption: externalizeConsumption,
+    ...price,
+    ...info
+  };
+
+  const vehiclePriceProps = {
+    t,
+    id,
+    url,
+    target,
+    rel,
+    iconName,
+    dashboardButtonText,
+    vehicleComponentName,
+    classButton,
+    linkTag,
+    priceSubMtl,
+    onAddOfferToMainSlideClick,
+    isDealerSuperAdmin,
+    onDetailsClick,
+    mainImageId,
+    routeObj,
+    showOfferBtn,
+    combineRefAlternative,
+    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
+  };
+
+  const lazyLoadProps = {
+    once: true,
+    offset: 500
+  };
+
+  const imageProps = {
+    src,
+    width: '100%',
+    ratioW: 4,
+    ratioH: 3
+  };
+
+  const statsProps = {
+    t,
+    price,
+    showNewLabel,
+    showDownPayment: !!(offer as any)?.showDownPayment,
+    disableDownPaymentLocalStorage,
+    ...stats
+  };
+
+  const linkBaseUrl = (e: MouseEvent<HTMLImageElement>) => {
+    e.preventDefault();
+    if (baseUrl) window.open(baseUrl, '_blank');
+  };
+  const showComponentLikeSlider = vehicleComponentName === 'search' ||
+                                  vehicleComponentName === 'myVehicles' ||
+                                  vehicleComponentName === 'favorite' ||
+                                  vehicleComponentName === 'recently';
+  return (
+    <section className={wrapperClassName} onClick={onContainerClick} id={id}>
+      <>
+        {createElement(linkTag, {
+          children: <VehicleTitle {...favoriteProps} />,
+          ...routeObj,
+          target,
+          rel,
+          className: `${styles.redirectClassLink} ${styles.gridAreaTitle}`,
+          // ADV-116: opening a CDP from a card defaults to the Financing tab.
+          onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
+          href: url
+        })}
+
+        {createElement(linkTag, {
+          children: (
+            <>
+              {showSlider ? (
+                <>
+                  {showComponentLikeSlider ? (
+                    <>
+                      <DecoratedSliderForSRL {...decoratedSliderProps} />
+                      {renderIDInfo ? renderIDInfo() : null}
+                      {combineRefAlternative && (
+                        <div className={styles.wrapAlternativeData}>
+                          <div>
+                            {offerSource || ownerName ? (
+                              <>
+                                <IconSVG className={styles.svgIcon} name='linkAlternative' />
+                                <span onClick={(e: MouseEvent<HTMLImageElement>) => linkBaseUrl(e)}>
+                                  {!typeAlternative ? ownerName : t(`cbd:${offerSource}`)}
+                                </span>
+                              </>
+                            ) : ''}
+                          </div>
+                          {crawledAt || modificationDate ? (
+                            <div>
+                              <IconSVG className={styles.svgIcon} name='lastCrawledAt' />
+                              <span>
+                                {!typeAlternative ? modificationDate : crawledAt}
+                              </span>
+                            </div>
+                          ) : ''}
+                        </div>
+                      )}
+                    </>
+                  ) : (
+                    <figure className={styles.figure}>
+                      <DecoratedSlider {...decoratedSliderProps} />
+                    </figure>
+                  )}
+                </>
+              ) : (
+                <LazyLoad {...lazyLoadProps}>
+                  <ImageWithStats {...imageProps} {...statsProps} />
+                </LazyLoad>
+              )}
+            </>
+          ),
+          ...routeObj,
+          target,
+          rel,
+          className: `${styles.redirectClassLink} ${styles.gridAreaImage}`,
+          // ADV-116: opening a CDP from a card defaults to the Financing tab.
+          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} />
+          </a>
+          ) : null
+        }
+        {children}
+      </>
+    </section>
+  );
+};
+
+VehicleSmallCard.defaultProps = {
+  vehicleComponentName: 'landing',
+  isTop: false,
+  showSlider: false,
+  isDealerSuperAdmin: false,
+  showCompareCheckboxes: false,
+  priceSubMtl: null,
+  slider: {},
+  stats: {},
+  title: {},
+  info: {},
+  crawledAt: 'N/A',
+  baseUrl: '',
+  typeAlternative: '',
+  offerSource: '',
+  src: PLACEHOLDER_IMAGE_SMALL_URL,
+  environmentEmissions: null,
+  language: 'en',
+  consumption: null,
+  showNewLabel: false,
+  isCarInFavorite: false,
+  onContainerClick: () => { },
+  onDetailsClick: () => { }
+};
+
+// export default VehicleSmallCard;
+export default memo(VehicleSmallCard, (props, nextProps) => { // shouldComponentUpdate
+  const {
+    t,
+    price: {
+      financing: { monthlyInstallment, annualMileage, withFinalInstallment },
+      leasing: { monthlyInstallment: lMonthlyInstallment }
+    },
+    stats: { statsData },
+    isCarInFavorite,
+    compareProps,
+    children,
+    slider: {
+      images
+    }
+  } = props;
+
+  return t                    === nextProps.t
+    && monthlyInstallment     === nextProps.price.financing.monthlyInstallment
+    && annualMileage          === nextProps.price.financing.annualMileage
+    && withFinalInstallment   === nextProps.price.financing.withFinalInstallment
+    && lMonthlyInstallment    === nextProps.price.leasing.monthlyInstallment
+    && isCarInFavorite        === nextProps.isCarInFavorite
+    && statsData              === nextProps.stats.statsData
+    && _get(compareProps, 'toCompare') === _get(compareProps, 'nextProps.toCompare')
+    && children               === nextProps.children
+    && images                 === nextProps.slider.images;
+});