@bytebrand/fe-ui-core 4.1.89 → 4.1.90

package/source/components/VehicleSmallCard/VehicleSmallCard.tsx

@@ -1,367 +1,367 @@
-import React, { memo, FunctionComponent, ReactNode, MouseEvent, createElement } from 'react';
-import classnames from 'classnames';
-import _get from 'lodash/get';
-import LazyLoad from 'react-lazyload';
-import withLabel from '../_common/withLabel/withLabel';
-import withStats, { IStatsWrapperProps, IStatsData } from '../_common/withStats/withStats';
-import Image from '../_common/Image/Image';
-import IconSVG from '../_common/IconSVG/IconSVG';
-import VehicleSlider from '../_common/VehicleSlider/VehicleSlider';
-import VehicleSliderForSRL from '../_common/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 {
-  IVehicleInfo,
-  IPrice,
-  IVehicleLocation,
-  IVehicleTitleProps,
-  IVehicleSliderProps,
-  IVehicleSliderForSRLProps,
-  IVehicleCompareProps
-} from '../../framework/types/types';
-import { vehicleProps } from '../../locales/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';
-  isTop?: boolean;
-  isDealer?: boolean;
-  isDealerSuperAdmin?: boolean;
-  isReferenceSearch?: boolean;
-  showNewLabel?: boolean;
-  CircularProgressbar?: any;
-  slider?: IVehicleSliderProps | IVehicleSliderForSRLProps;
-  stats?: IStatsWrapperProps;
-  statsData?: IStatsData;
-  title?: IVehicleTitleProps;
-  info?: IVehicleInfo;
-  location?: IVehicleLocation;
-  compareProps?: IVehicleCompareProps;
-  environmentEmissions?: object;
-  consumption?: object;
-  engineData?: object;
-  isCarInFavorite?: boolean;
-  offer?: object;
-  price?: IPrice;
-  seoText?: string;
-  mainImageId?: string;
-  crawledAt?: string;
-  modificationDate?: string;
-  baseUrl?: string;
-  offerSource?: string;
-  ownerName?: string;
-  className?: string;
-  percentage?: number;
-  id?: string;
-  linkTag?: string;
-  src?: string;
-  url?: string;
-  iconName?: string;
-  children?: ReactNode;
-  showSlider?: boolean;
-  showOfferBtn?: boolean;
-  showFavoriteStar?: boolean;
-  minimizeData?: boolean;
-  onContainerClick?: (event?: any) => void;
-  renderIDInfo?: () => void;
-  renderVehicleStatus?: () => void;
-  onFavoriteClick?: (event?: any) => void;
-  onDetailsClick(id: string): void;
-  onAddOfferToMainSlideClick?: (id: string, mainImageId: string, price: number, financingConfig: any) => void;
-  isAlternative?: boolean;
-  typeAlternative?: string;
-  index?: number;
-  currentPage?: number;
-}
-
-const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
-  const {
-    t = (phrase: string) => _get(vehicleProps(props), phrase.replace(':', '.'), phrase),
-    isTop,
-    slider,
-    vehicleComponentName,
-    i18nPrefixForPriceRating,
-    stats,
-    statsData,
-    compareProps,
-    title,
-    info,
-    location,
-    consumption,
-    environmentEmissions,
-    isReferenceSearch,
-    CircularProgressbar,
-    engineData,
-    offer,
-    price,
-    seoText,
-    showNewLabel,
-    linkTag = 'a',
-    language,
-    className,
-    url,
-    onContainerClick,
-    onAddOfferToMainSlideClick,
-    isDealer,
-    isDealerSuperAdmin,
-    mainImageId,
-    onFavoriteClick,
-    isCarInFavorite,
-    onDetailsClick,
-    renderIDInfo,
-    renderVehicleStatus,
-    src,
-    crawledAt,
-    modificationDate,
-    baseUrl,
-    offerSource,
-    ownerName,
-    id,
-    children,
-    iconName,
-    showSlider,
-    percentage,
-    showOfferBtn = false,
-    showFavoriteStar = true,
-    minimizeData = false,
-    isAlternative = false,
-    typeAlternative,
-    index,
-    currentPage
-  } = props;
-
-  const combineRefAlternative = isAlternative || isReferenceSearch;
-
-  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.topVehicle]: isTop },
-    { [styles.disableBorder]: minimizeData },
-    { [styles.isFirstReferenceCar]: isReferenceSearch && index === 0 && currentPage === 1 },
-    className
-  );
-
-  const decoratedSliderProps = {
-    t,
-    id,
-    ...label,
-    ...stats,
-    ...slider,
-    price,
-    showNewLabel,
-    percentage,
-    CircularProgressbar,
-    isReferenceSearch,
-    isAlternative,
-    typeAlternative
-  };
-  const favoriteProps = {
-    ...title,
-    id,
-    vehicleComponentName,
-    renderVehicleStatus,
-    isCarInFavorite,
-    onFavoriteClick,
-    showFavoriteStar,
-    combineRefAlternative
-  };
-
-  const routeObj = linkTag !== 'a' ? { to: { pathname: url, state: { mainImageUrl: src } } } : '';
-
-  const vehicleInfoProps = {
-    t,
-    combineRefAlternative,
-    environmentEmissions,
-    i18nPrefixForPriceRating,
-    vehicleComponentName,
-    location,
-    consumption,
-    offer,
-    language,
-    linkTag,
-    routeObj,
-    url,
-    engineData,
-    ...price,
-    ...info
-  };
-
-  const vehiclePriceProps = {
-    t,
-    id,
-    url,
-    iconName,
-    vehicleComponentName,
-    linkTag,
-    onAddOfferToMainSlideClick,
-    isDealerSuperAdmin,
-    onDetailsClick,
-    mainImageId,
-    routeObj,
-    showOfferBtn,
-    combineRefAlternative,
-    typeAlternative,
-    isAlternative,
-    ...price,
-    ...compareProps
-  };
-
-  const lazyLoadProps = {
-    once: true,
-    offset: 500
-  };
-
-  const imageProps = {
-    src,
-    width: '100%',
-    ratioW: 4,
-    ratioH: 3
-  };
-
-  const statsProps = {
-    t,
-    price,
-    showNewLabel,
-    statsData
-  };
-
-  const linkBaseUrl = (e: MouseEvent<HTMLImageElement>) => {
-    e.preventDefault();
-    if (baseUrl) window.open(baseUrl, '_blank');
-  };
-  return (
-    <section className={wrapperClassName} onClick={onContainerClick} id={id}>
-      {createElement(linkTag, {
-        children: <VehicleTitle {...favoriteProps} />,
-        ...routeObj,
-        className: `${styles.redirectClassLink} ${styles.gridAreaTitle}`,
-        onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
-        href: url
-      })}
-
-      {createElement(linkTag, {
-        children: (
-          <>
-            {showSlider ? (
-              <>
-                {vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' || vehicleComponentName === 'favorite' ? (
-                  <>
-                    <DecoratedSliderForSRL {...decoratedSliderProps} />
-                    {renderIDInfo && isDealer ? 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,
-        className: `${styles.redirectClassLink} ${styles.gridAreaImage}`,
-        onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
-        href: url
-      })}
-      <VehicleInfo {...vehicleInfoProps} />
-      <VehiclePrice {...vehiclePriceProps} />
-      {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,
-  slider: {},
-  stats: {},
-  title: {},
-  info: {},
-  crawledAt: 'N/A',
-  baseUrl: '',
-  offerSource: '',
-  src: 'https://images.auto.de/noimage/small',
-  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 }
-    },
-    isCarInFavorite,
-    compareProps,
-    children
-  } = 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
-    && _get(compareProps, 'toCompare') === _get(compareProps, 'nextProps.toCompare')
-    && children               === nextProps.children;
-});
+import React, { memo, FunctionComponent, ReactNode, MouseEvent, createElement } from 'react';
+import classnames from 'classnames';
+import _get from 'lodash/get';
+import LazyLoad from 'react-lazyload';
+import withLabel from '../_common/withLabel/withLabel';
+import withStats, { IStatsWrapperProps, IStatsData } from '../_common/withStats/withStats';
+import Image from '../_common/Image/Image';
+import IconSVG from '../_common/IconSVG/IconSVG';
+import VehicleSlider from '../_common/VehicleSlider/VehicleSlider';
+import VehicleSliderForSRL from '../_common/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 {
+  IVehicleInfo,
+  IPrice,
+  IVehicleLocation,
+  IVehicleTitleProps,
+  IVehicleSliderProps,
+  IVehicleSliderForSRLProps,
+  IVehicleCompareProps
+} from '../../framework/types/types';
+import { vehicleProps } from '../../locales/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';
+  isTop?: boolean;
+  isDealer?: boolean;
+  isDealerSuperAdmin?: boolean;
+  isReferenceSearch?: boolean;
+  showNewLabel?: boolean;
+  CircularProgressbar?: any;
+  slider?: IVehicleSliderProps | IVehicleSliderForSRLProps;
+  stats?: IStatsWrapperProps;
+  statsData?: IStatsData;
+  title?: IVehicleTitleProps;
+  info?: IVehicleInfo;
+  location?: IVehicleLocation;
+  compareProps?: IVehicleCompareProps;
+  environmentEmissions?: object;
+  consumption?: object;
+  engineData?: object;
+  isCarInFavorite?: boolean;
+  offer?: object;
+  price?: IPrice;
+  seoText?: string;
+  mainImageId?: string;
+  crawledAt?: string;
+  modificationDate?: string;
+  baseUrl?: string;
+  offerSource?: string;
+  ownerName?: string;
+  className?: string;
+  percentage?: number;
+  id?: string;
+  linkTag?: string;
+  src?: string;
+  url?: string;
+  iconName?: string;
+  children?: ReactNode;
+  showSlider?: boolean;
+  showOfferBtn?: boolean;
+  showFavoriteStar?: boolean;
+  minimizeData?: boolean;
+  onContainerClick?: (event?: any) => void;
+  renderIDInfo?: () => void;
+  renderVehicleStatus?: () => void;
+  onFavoriteClick?: (event?: any) => void;
+  onDetailsClick(id: string): void;
+  onAddOfferToMainSlideClick?: (id: string, mainImageId: string, price: number, financingConfig: any) => void;
+  isAlternative?: boolean;
+  typeAlternative?: string;
+  index?: number;
+  currentPage?: number;
+}
+
+const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
+  const {
+    t = (phrase: string) => _get(vehicleProps(props), phrase.replace(':', '.'), phrase),
+    isTop,
+    slider,
+    vehicleComponentName,
+    i18nPrefixForPriceRating,
+    stats,
+    statsData,
+    compareProps,
+    title,
+    info,
+    location,
+    consumption,
+    environmentEmissions,
+    isReferenceSearch,
+    CircularProgressbar,
+    engineData,
+    offer,
+    price,
+    seoText,
+    showNewLabel,
+    linkTag = 'a',
+    language,
+    className,
+    url,
+    onContainerClick,
+    onAddOfferToMainSlideClick,
+    isDealer,
+    isDealerSuperAdmin,
+    mainImageId,
+    onFavoriteClick,
+    isCarInFavorite,
+    onDetailsClick,
+    renderIDInfo,
+    renderVehicleStatus,
+    src,
+    crawledAt,
+    modificationDate,
+    baseUrl,
+    offerSource,
+    ownerName,
+    id,
+    children,
+    iconName,
+    showSlider,
+    percentage,
+    showOfferBtn = false,
+    showFavoriteStar = true,
+    minimizeData = false,
+    isAlternative = false,
+    typeAlternative,
+    index,
+    currentPage
+  } = props;
+
+  const combineRefAlternative = isAlternative || isReferenceSearch;
+
+  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.topVehicle]: isTop },
+    { [styles.disableBorder]: minimizeData },
+    { [styles.isFirstReferenceCar]: isReferenceSearch && index === 0 && currentPage === 1 },
+    className
+  );
+
+  const decoratedSliderProps = {
+    t,
+    id,
+    ...label,
+    ...stats,
+    ...slider,
+    price,
+    showNewLabel,
+    percentage,
+    CircularProgressbar,
+    isReferenceSearch,
+    isAlternative,
+    typeAlternative
+  };
+  const favoriteProps = {
+    ...title,
+    id,
+    vehicleComponentName,
+    renderVehicleStatus,
+    isCarInFavorite,
+    onFavoriteClick,
+    showFavoriteStar,
+    combineRefAlternative
+  };
+
+  const routeObj = linkTag !== 'a' ? { to: { pathname: url, state: { mainImageUrl: src } } } : '';
+
+  const vehicleInfoProps = {
+    t,
+    combineRefAlternative,
+    environmentEmissions,
+    i18nPrefixForPriceRating,
+    vehicleComponentName,
+    location,
+    consumption,
+    offer,
+    language,
+    linkTag,
+    routeObj,
+    url,
+    engineData,
+    ...price,
+    ...info
+  };
+
+  const vehiclePriceProps = {
+    t,
+    id,
+    url,
+    iconName,
+    vehicleComponentName,
+    linkTag,
+    onAddOfferToMainSlideClick,
+    isDealerSuperAdmin,
+    onDetailsClick,
+    mainImageId,
+    routeObj,
+    showOfferBtn,
+    combineRefAlternative,
+    typeAlternative,
+    isAlternative,
+    ...price,
+    ...compareProps
+  };
+
+  const lazyLoadProps = {
+    once: true,
+    offset: 500
+  };
+
+  const imageProps = {
+    src,
+    width: '100%',
+    ratioW: 4,
+    ratioH: 3
+  };
+
+  const statsProps = {
+    t,
+    price,
+    showNewLabel,
+    statsData
+  };
+
+  const linkBaseUrl = (e: MouseEvent<HTMLImageElement>) => {
+    e.preventDefault();
+    if (baseUrl) window.open(baseUrl, '_blank');
+  };
+  return (
+    <section className={wrapperClassName} onClick={onContainerClick} id={id}>
+      {createElement(linkTag, {
+        children: <VehicleTitle {...favoriteProps} />,
+        ...routeObj,
+        className: `${styles.redirectClassLink} ${styles.gridAreaTitle}`,
+        onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
+        href: url
+      })}
+
+      {createElement(linkTag, {
+        children: (
+          <>
+            {showSlider ? (
+              <>
+                {vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' || vehicleComponentName === 'favorite' ? (
+                  <>
+                    <DecoratedSliderForSRL {...decoratedSliderProps} />
+                    {renderIDInfo && isDealer ? 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,
+        className: `${styles.redirectClassLink} ${styles.gridAreaImage}`,
+        onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
+        href: url
+      })}
+      <VehicleInfo {...vehicleInfoProps} />
+      <VehiclePrice {...vehiclePriceProps} />
+      {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,
+  slider: {},
+  stats: {},
+  title: {},
+  info: {},
+  crawledAt: 'N/A',
+  baseUrl: '',
+  offerSource: '',
+  src: 'https://images.auto.de/noimage/small',
+  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 }
+    },
+    isCarInFavorite,
+    compareProps,
+    children
+  } = 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
+    && _get(compareProps, 'toCompare') === _get(compareProps, 'nextProps.toCompare')
+    && children               === nextProps.children;
+});