@bytebrand/fe-ui-core 4.2.48 → 4.2.50

package/package.json

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

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

@@ -49,10 +49,6 @@ export interface IVehiclePriceSectionProps {
   typeAlternative?: string;
 }
 
-export interface IPriceItemsProps {
-  priceItemsProp: IVehiclePriceSectionProps[];
-}
-
 interface IPriceData {
   tooltipDescription?: string;
   perMonthOld?: any;
@@ -71,235 +67,217 @@ interface IPriceData {
   totalCurrent: number;
 }
 
-class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
+const VehiclePrice: React.FC<IVehiclePriceSectionProps> = (props: IVehiclePriceSectionProps) => {
 
-  onAddOfferClick = (event: any) => {
-    const { id, mainImageId, buy: { currentSalesPriceExtra } } = this.props;
+  const onAddOfferClick = (event: any) => {
+    const { id, mainImageId, buy: { currentSalesPriceExtra } } = props;
     event.stopPropagation();
     event.preventDefault();
-    this.props.onAddOfferToMainSlideClick(id, mainImageId, currentSalesPriceExtra, this.props);
+    props.onAddOfferToMainSlideClick(id, mainImageId, currentSalesPriceExtra, props);
   };
 
-  onDetailsClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    const { id, onDetailsClick } = this.props;
+  const onDetailsClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    const { id, onDetailsClick } = props;
     event.preventDefault();
     event.stopPropagation();
     onDetailsClick(id);
   };
 
-  render(): React.ReactNode {
-    const {
-      t,
-      combineRefAlternative,
-      url,
-      target,
-      rel,
-      isDealerSuperAdmin,
-      linkTag,
-      showOfferBtn,
-      routeObj,
-      toggleCarToCompare,
-      toCompare,
-      priceSubMtl,
-      classButton,
-      onRemoveClick,
-      showCompareCheckboxes,
-      vatRate,
-      iconName,
-      vehicleComponentName,
-      financing: { monthlyInstallment, oldMonthlyInstallment },
-      leasing: {
-        monthlyInstallment: lMonthlyInstallment,
-        oldMonthlyInstallment: lOldMonthlyInstallment,
-        isActive: isLeasingActive
-      },
-      buy: {
-        currentSalesPriceExtra = 0,
-        highestPriceExtra = 0
-      } = {},
-      common: { isStrikeShown },
-      typeAlternative,
-      margin
-    } = this.props;
+  const {
+    t,
+    combineRefAlternative,
+    url,
+    target,
+    rel,
+    isDealerSuperAdmin,
+    linkTag,
+    showOfferBtn,
+    routeObj,
+    toggleCarToCompare,
+    toCompare,
+    priceSubMtl,
+    classButton,
+    onRemoveClick,
+    showCompareCheckboxes,
+    vatRate,
+    iconName,
+    vehicleComponentName,
+    financing: { monthlyInstallment, oldMonthlyInstallment },
+    leasing: {
+      monthlyInstallment: lMonthlyInstallment,
+      oldMonthlyInstallment: lOldMonthlyInstallment,
+      isActive: isLeasingActive
+    },
+    buy: {
+      currentSalesPriceExtra = 0,
+      highestPriceExtra = 0
+    } = {},
+    common: { isStrikeShown },
+    typeAlternative,
+    margin
+  } = props;
+
+  const vehiclePriceSectionClassName = classnames(
+    styles.vehiclePriceSection,
+    { [styles.vehiclePriceSectionSearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' },
+    { [styles.vehiclePriceSectionFavorite]: vehicleComponentName === 'favorite' },
+    { [styles.vehiclePriceSectionRecently]: vehicleComponentName === 'recently' || vehicleComponentName === 'landing' },
+    { [styles.vehiclePriceTitleMain]: vehicleComponentName === 'main' }
+  );
+
+  const vehiclePriceTitleClassName = classnames(
+    styles.vehiclePriceTitle,
+    { [styles.vehiclePriceTitleFavorite]: vehicleComponentName === 'favorite' },
+    { [styles.vehiclePriceTitleRecently]: vehicleComponentName === 'recently' },
+    { [styles.vehiclePriceTitleLanding]: vehicleComponentName === 'landing' || vehicleComponentName === 'main' },
+    { [styles.vehiclePriceTitleSearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' }
+  );
 
-    const vehiclePriceSectionClassName = classnames(
-      styles.vehiclePriceSection,
-      { [styles.vehiclePriceSectionSearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' },
-      { [styles.vehiclePriceSectionFavorite]: vehicleComponentName === 'favorite' },
-      { [styles.vehiclePriceSectionRecently]: vehicleComponentName === 'recently' || vehicleComponentName === 'landing' },
-      { [styles.vehiclePriceTitleMain]: vehicleComponentName === 'main' }
-    );
+  const buttonClassNames = classnames(
+    classButton,
+    styles.buttonDetails,
+    { [styles.isAlternativeButton]: typeAlternative }
+  );
 
-    const vehiclePriceTitleClassName = classnames(
-      styles.vehiclePriceTitle,
-      { [styles.vehiclePriceTitleFavorite]: vehicleComponentName === 'favorite' },
-      { [styles.vehiclePriceTitleRecently]: vehicleComponentName === 'recently' },
-      { [styles.vehiclePriceTitleLanding]: vehicleComponentName === 'landing' || vehicleComponentName === 'main' },
-      { [styles.vehiclePriceTitleSearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' }
-    );
+  const offerBtnVariantCondition = vehicleComponentName === 'recently' ||
+                                   vehicleComponentName === 'landing' ||
+                                   vehicleComponentName === 'main' ? 'outlined' : 'contained';
 
-    const priceItemsGlobal = [
-      {
-        perMonthOld: oldMonthlyInstallment,
-        perMonthCurrent: monthlyInstallment,
-        title: t('vehicleProps:title.financing'),
-        prefixOldPrice: vehicleComponentName === 'search' && !isMobileOnly && t('vehicleProps:value.prefixOldPrice'),
-        postfix: '3',
-        priceSub: priceSubMtl,
-        tooltipDescription: !combineRefAlternative && t('vehicleProps:title.financingDescription')
-      },
-      {
-        perMonthOld: lOldMonthlyInstallment,
-        perMonthCurrent: lMonthlyInstallment,
-        prefixOldPrice: vehicleComponentName === 'search' && !isMobileOnly && t('vehicleProps:value.prefixOldPrice'),
-        postfix: '1,3',
-        isPriceDisable: !isLeasingActive,
-        title: t('vehicleProps:title.leasing'),
-        priceSub: priceSubMtl,
-        tooltipDescription: !combineRefAlternative && t('vehicleProps:title.leasingDescription')
-      }
-    ];
 
-    // const showAboCondition = vehicleComponentName !== 'favorite' &&
-    //                          vehicleComponentName !== 'recently' &&
-    //                          vehicleComponentName !== 'search';
-    const showAboCondition = false;
+  const priceItemsGlobal = [
+    {
+      perMonthOld: oldMonthlyInstallment,
+      perMonthCurrent: monthlyInstallment,
+      title: t('vehicleProps:title.financing'),
+      prefixOldPrice: vehicleComponentName === 'search' && !isMobileOnly && t('vehicleProps:value.prefixOldPrice'),
+      postfix: '3',
+      priceSub: priceSubMtl,
+      tooltipDescription: !combineRefAlternative && t('vehicleProps:title.financingDescription')
+    },
+    {
+      perMonthOld: lOldMonthlyInstallment,
+      perMonthCurrent: lMonthlyInstallment,
+      prefixOldPrice: vehicleComponentName === 'search' && !isMobileOnly && t('vehicleProps:value.prefixOldPrice'),
+      postfix: '1,3',
+      isPriceDisable: !isLeasingActive,
+      title: t('vehicleProps:title.leasing'),
+      priceSub: priceSubMtl,
+      tooltipDescription: !combineRefAlternative && t('vehicleProps:title.leasingDescription')
+    }
+  ];
 
-    const Abo = showAboCondition ? [
-      {
-        perMonthOld: oldMonthlyInstallment,
-        perMonthCurrent: monthlyInstallment,
-        isNewPriceCategory: true,
-        showAboIcon: true,
-        isPriceDisable: true,
-        positionY: 'top',
-        title: t('vehicleProps:title.abo'),
-        tooltipDescription: t('vehicleProps:title.aboDescription')
-      }
-    ] : '';
+  // const showAboCondition = vehicleComponentName !== 'favorite' &&
+  //                          vehicleComponentName !== 'recently' &&
+  //                          vehicleComponentName !== 'search';
+  const showAboCondition = false;
 
-    const priceData: IPriceData[] = combineRefAlternative ? [
-      ...priceItemsGlobal,
-      {
-        isTotal: true,
-        totalCurrent: currentSalesPriceExtra,
-        postfix: !!vatRate ? '1' : '',
-        title: t('vehicleProps:title.buy'),
-        isAlternativeText: t('vehicleProps:title.margeInkl')
-      },
-      {
-        isTotal: true,
-        totalCurrent: margin ? margin : currentSalesPriceExtra,
-        title: t('vehicleProps:title.marge')
-      }
-    ] : [
-      ...priceItemsGlobal,
-      ...Abo,
-      {
-        isTotal: true,
-        totalCurrent: currentSalesPriceExtra,
-        positionY: 'top',
-        postfix: !!vatRate ? '1' : '',
-        title: t('vehicleProps:title.buy'),
-        tooltipDescription: t('vehicleProps:title.buyDescription')
-      }
-    ];
+  const Abo = showAboCondition ? [
+    {
+      perMonthOld: oldMonthlyInstallment,
+      perMonthCurrent: monthlyInstallment,
+      isNewPriceCategory: true,
+      showAboIcon: true,
+      isPriceDisable: true,
+      positionY: 'top',
+      title: t('vehicleProps:title.abo'),
+      tooltipDescription: t('vehicleProps:title.aboDescription')
+    }
+  ] : '';
 
-    const ListPrices = priceData.map((
+  const priceData = combineRefAlternative ? [
+    ...priceItemsGlobal,
+    {
+      isTotal: true,
+      totalCurrent: currentSalesPriceExtra,
+      postfix: !!vatRate ? '1' : '',
+      title: t('vehicleProps:title.buy'),
+      isAlternativeText: t('vehicleProps:title.margeInkl')
+    },
     {
-      title,
-      priceSub,
-      prefixOldPrice,
-      totalCurrent,
-      tooltipDescription,
-      perMonthOld,
-      isAlternativeText,
-      perMonthCurrent,
-      showAboIcon,
-      isPriceDisable,
-      isTotal,
-      isNewPriceCategory,
-      positionY,
-      postfix
-    }) => {
-      return (
+      isTotal: true,
+      totalCurrent: margin ? margin : currentSalesPriceExtra,
+      title: t('vehicleProps:title.marge')
+    }
+  ] : [
+    ...priceItemsGlobal,
+    ...Abo,
+    {
+      isTotal: true,
+      totalCurrent: currentSalesPriceExtra,
+
+      postfix: !!vatRate ? '1' : '',
+      title: t('vehicleProps:title.buy'),
+      tooltipDescription: t('vehicleProps:title.buyDescription')
+    }
+  ];
+
+  return (
+    <section className={vehiclePriceSectionClassName}>
+      {vehicleComponentName === 'favorite' && showCompareCheckboxes && (
+        <CheckboxMaterial
+          checked={toCompare}
+          onChange={toggleCarToCompare}
+          labelPlacement='start'
+          label={t('FavoritesPage:toCompare')}
+          formControlClassName={styles.wrapCheckbox}
+        />
+      )}
+      {vehicleComponentName !== 'favorite' && vehicleComponentName !== 'search' && !isMobileOnly && (
+        <span className={vehiclePriceTitleClassName}>{t('vehicleProps:title.monthlyFrom')}</span>
+      )}
+      {isMobileOnly && !showCompareCheckboxes && (
+        <span className={vehiclePriceTitleClassName}>{t('vehicleProps:title.monthlyFrom')}</span>
+      )}
+      {priceData.map((props: any) => (
         <VehiclePriceItem
-          tooltipDescription={tooltipDescription}
-          key={title}
-          priceTitle={title}
-          isPriceDisable={isPriceDisable}
-          perMonthOld={perMonthOld}
-          perMonthCurrent={perMonthCurrent}
-          isNewPriceCategory={isNewPriceCategory}
-          isAlternativeText={isAlternativeText}
-          showAboIcon={showAboIcon}
+          tooltipDescription={props.tooltipDescription}
+          key={props.title}
+          priceTitle={props.title}
+          isPriceDisable={props.isPriceDisable}
+          perMonthOld={props.perMonthOld}
+          perMonthCurrent={props.perMonthCurrent}
+          isNewPriceCategory={props.isNewPriceCategory}
+          isAlternativeText={props.isAlternativeText}
+          showAboIcon={props.showAboIcon}
           totalOld={highestPriceExtra}
-          isTotal={isTotal}
-          priceSub={priceSub}
-          positionY={positionY}
+          isTotal={props.isTotal}
+          priceSub={props.priceSub}
+          positionY={props.positionY}
           url={url}
           target={target}
           rel={rel}
           isStrikeShown={isStrikeShown}
           iconName={iconName}
-          prefixOldPrice={prefixOldPrice}
-          totalCurrent={totalCurrent}
-          postfix={postfix}
+          prefixOldPrice={props.prefixOldPrice}
+          totalCurrent={props.totalCurrent}
+          postfix={props.postfix}
           linkTag={linkTag}
           routeObj={routeObj}
           vehicleComponentName={vehicleComponentName}
           combineRefAlternative={combineRefAlternative}
         />
-      );
-    });
-    const buttonClassNames = classnames(
-      classButton,
-      styles.buttonDetails,
-      { [styles.isAlternativeButton]: typeAlternative }
-    );
-
-    const offerBtnVariantCondition = vehicleComponentName === 'recently' ||
-                                     vehicleComponentName === 'landing' ||
-                                     vehicleComponentName === 'main' ? 'outlined' : 'contained';
-    return (
-      <section className={vehiclePriceSectionClassName}>
-        {vehicleComponentName === 'favorite' && showCompareCheckboxes && (
-          <CheckboxMaterial
-            checked={toCompare}
-            onChange={toggleCarToCompare}
-            labelPlacement='start'
-            label={t('FavoritesPage:toCompare')}
-            formControlClassName={styles.wrapCheckbox}
-          />
-        )}
-        {vehicleComponentName !== 'favorite' && vehicleComponentName !== 'search' && !isMobileOnly && (
-          <span className={vehiclePriceTitleClassName}>{t('vehicleProps:title.monthlyFrom')}</span>
-        )}
-        {isMobileOnly && !showCompareCheckboxes && (
-          <span className={vehiclePriceTitleClassName}>{t('vehicleProps:title.monthlyFrom')}</span>
-        )}
-        {ListPrices}
-        {vehicleComponentName === 'favorite' && showCompareCheckboxes && (
-          <div className={styles.wrapHandleCompare}>
-            <Button variant='outlined' onClick={onRemoveClick} className={styles.btnCompareRemove} color='error'>
-              <IconSVG className={styles.removeIcon} name='trashRed' customDimensions />
-            </Button>
-            <Button className={styles.btnCarToCompare} variant='outlined' onClick={toggleCarToCompare}>
-              <span className={styles.btnPlusIcon}>{!toCompare ? '+' : '-'}</span>
-              {t('FavoritesPage:compare')}
-            </Button>
-          </div>
-        )}
-        {isDealerSuperAdmin && !typeAlternative ? (
-          <Button className={styles.addOfferButton} onClick={this.onAddOfferClick}>
-            {t('vehicleProps:title.addOfferToMainSlide')}
+      ))}
+      {vehicleComponentName === 'favorite' && showCompareCheckboxes && (
+        <div className={styles.wrapHandleCompare}>
+          <Button variant='outlined' onClick={onRemoveClick} className={styles.btnCompareRemove} color='error'>
+            <IconSVG className={styles.removeIcon} name='trashRed' customDimensions />
           </Button>
-        ) : null}
-        {showOfferBtn ? (
-          <Button variant={offerBtnVariantCondition} className={buttonClassNames} onClick={this.onDetailsClick}>{t('vehicleProps:title.toOffer')}</Button>
-        ) : ''}
-      </section>
-    );
-  }
-}
-export default VehiclePrice;
+          <Button className={styles.btnCarToCompare} variant='outlined' onClick={toggleCarToCompare}>
+            <span className={styles.btnPlusIcon}>{!toCompare ? '+' : '-'}</span>
+            {t('FavoritesPage:compare')}
+          </Button>
+        </div>
+      )}
+      {isDealerSuperAdmin && !typeAlternative ? (
+        <Button className={styles.addOfferButton} onClick={onAddOfferClick}>
+          {t('vehicleProps:title.addOfferToMainSlide')}
+        </Button>
+      ) : null}
+      {showOfferBtn ? (
+        <Button variant={offerBtnVariantCondition} className={buttonClassNames} onClick={onDetailsClick}>{t('vehicleProps:title.toOffer')}</Button>
+      ) : ''}
+    </section>
+  );
+};
+
+export default VehiclePrice;

package/source/components/VehicleSmallCard/VehicleSmallCard.tsx

@@ -55,6 +55,8 @@ interface IVehicleSmallCardProps {
   seoText?: string;
   classButton?: string;
   mainImageId?: string;
+  target?: string;
+  rel?: string;
   crawledAt?: string;
   modificationDate?: string;
   baseUrl?: string;
@@ -62,7 +64,6 @@ interface IVehicleSmallCardProps {
   priceSubMtl?: string | null;
   ownerName?: string;
   className?: string;
-  percentage?: number;
   id?: string;
   linkTag?: string;
   src?: string;
@@ -136,7 +137,6 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     children,
     iconName,
     showSlider,
-    percentage,
     classButton,
     hasInteriorExteriorPhoto,
     dashboardButtonText,
@@ -180,12 +180,12 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     ...slider,
     price,
     showNewLabel,
-    percentage,
     CircularProgressbar,
     isReferenceSearch,
     isAlternative,
     typeAlternative
   };
+
   const favoriteProps = {
     ...title,
     id,
@@ -276,77 +276,79 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
                                   vehicleComponentName === 'recently';
   return (
     <section className={wrapperClassName} onClick={onContainerClick} id={id}>
-      {createElement(linkTag, {
-        children: <VehicleTitle {...favoriteProps} />,
-        ...routeObj,
-        target,
-        rel,
-        className: `${styles.redirectClassLink} ${styles.gridAreaTitle}`,
-        onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
-        href: url
-      })}
+      <>      
+        {createElement(linkTag, {
+          children: <VehicleTitle {...favoriteProps} />,
+          ...routeObj,
+          target,
+          rel,
+          className: `${styles.redirectClassLink} ${styles.gridAreaTitle}`,
+          onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
+          href: url
+        })}
 
-      {createElement(linkTag, {
-        children: (
-          <>
-            {showSlider ? (
-              <>
-                {showComponentLikeSlider ? (
-                  <>
-                    <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}`)}
+        {createElement(linkTag, {
+          children: (
+            <>
+              {showSlider ? (
+                <>
+                  {showComponentLikeSlider ? (
+                    <>
+                      <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>
-                        {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}`,
-        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}
+                      )}
+                    </>
+                  ) : (
+                    <figure className={styles.figure}>
+                      <DecoratedSlider {...decoratedSliderProps} />
+                    </figure>
+                  )}
+                </>
+              ) : (
+                <LazyLoad {...lazyLoadProps}>
+                  <ImageWithStats {...imageProps} {...statsProps} />
+                </LazyLoad>
+              )}
+            </>
+          ),
+          ...routeObj,
+          target,
+          rel,
+          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>
   );
 };
@@ -364,6 +366,7 @@ VehicleSmallCard.defaultProps = {
   info: {},
   crawledAt: 'N/A',
   baseUrl: '',
+  typeAlternative: '',
   offerSource: '',
   src: 'https://images.auto.de/noimage/small',
   environmentEmissions: null,

package/source/components/_common/VehicleSlider/VehicleSliderForSRL.tsx

@@ -11,61 +11,53 @@ import { preloadNearbyImages } from '../../../framework/utils/CommonUtils';
 import { IVehicleSliderForSRLProps } from '../../../framework/types/types';
 import styles from './VehicleSlider.styl';
 
-interface IVehicleSliderForSRLState {
-  noImagesLoaded: boolean;
-  activeSlide: number;
-}
 
-const SlickButtonFix: React.FunctionComponent = ({ currentSlide, slideCount, children, ...props }: any) => (
+const SlickButtonFix: React.FC = ({ currentSlide, slideCount, children, ...props }: any) => (
   <div {...props} tabIndex={-1}>{children}</div>
 );
 
-class VehicleSliderForSRL extends React.Component<IVehicleSliderForSRLProps, IVehicleSliderForSRLState> {
-  readonly state = {
-    noImagesLoaded: false,
-    activeSlide: 0
-  };
-
-  static readonly defaultProps: IVehicleSliderForSRLProps = {
-    mainImageId: '',
-    imagesCount: 0,
-    imageSize: 'small',
-    isAlternative: false,
-    typeAlternative: '',
-    images: [],
-    getCarImagesData: () => null
-  };
-
-  beforeChange = () => {
-    const { carId, images, getCarImagesData, type, typeAlternative } = this.props;
-    const { activeSlide } = this.state;
+const VehicleSliderForSRL: React.FC<IVehicleSliderForSRLProps> = ({
+  id,
+  src,
+  className,
+  images,
+  imagesCount,
+  imageSize,
+  mainImageId,
+  getCarImagesData,
+  type,
+  isAlternative,
+  typeAlternative,
+  isReferenceSearch,
+  CircularProgressbar,
+  onSlideChange
+}: IVehicleSliderForSRLProps) => {
+  const [ noImagesLoaded, setNoImagesLoaded ] = React.useState<boolean>(false);
+  const [ activeSlide, setActiveSlide ] = React.useState<number>(0);
+
+  const beforeChange = () => {
 
     const isMyVehicle: boolean = type === 'myVehicle';
 
     if (_isLength(images)) return false;
-    getCarImagesData(carId, true, isMyVehicle, type, typeAlternative).then((data) => {
+    getCarImagesData(id, true, isMyVehicle, type, typeAlternative).then((data) => {
       // a case when all images are in_postprocessing
 
       if (!data || data.length === 0) {
-        this.setState({ noImagesLoaded: true });
+        setNoImagesLoaded(true);
       }
 
       preloadNearbyImages(data, activeSlide, 'imageUrlSmall');
     });
   };
 
-  onSlideChange = (index: number): void => {
-    const { images } = this.props;
-
-    this.setState({ activeSlide: index });
-
-    this.props.onSlideChange(index);
+  const onHandleSlideChange = (index: number): void => {
+    setActiveSlide(index);
+    onSlideChange(index);
     preloadNearbyImages(images, index, 'imageUrlSmall');
   };
 
-  renderSliderImages = () => {
-    const { carId, mainImageId, images, imagesCount, imageSize, src, isAlternative } = this.props;
-    const { activeSlide } = this.state;
+  const renderSliderImages = () => {
 
     const imageProps = {
       isAlternative,
@@ -106,11 +98,11 @@ class VehicleSliderForSRL extends React.Component<IVehicleSliderForSRLProps, IVe
 
     if (mainImageId && !!imagesCount) {
       const mainImage = (
-        <LazyLoad {...lazyLoadProps} key={carId}>
+        <LazyLoad {...lazyLoadProps} key={id}>
           <Image src={src} {...imageProps} />
         </LazyLoad>
       );
-      const spinner = !this.state.noImagesLoaded ? (
+      const spinner = !noImagesLoaded ? (
         <div className={styles.spinnerWrap} key='spinnerWrap'>
           <Loader className={styles.spinner} size='medium' key='small_slider_loader' />
         </div>
@@ -121,18 +113,18 @@ class VehicleSliderForSRL extends React.Component<IVehicleSliderForSRLProps, IVe
 
     return (
       <LazyLoad {...lazyLoadProps}>
-        <Image src={`${PLACEHOLDER_IMAGE}${imageSize}`} key={carId} {...imageProps} />
+        <Image src={`${PLACEHOLDER_IMAGE}${imageSize}`} key={id} {...imageProps} />
       </LazyLoad>
     );
   };
 
-  renderSlider = () => {
+  const renderSlider = () => {
     const settings = {
+      beforeChange,
       autoPlay: false,
       speed: 300,
       infinite: true,
       dots: false,
-      beforeChange: this.beforeChange,
       className: styles.slider,
       accessibility: false,
       draggable: true,
@@ -140,31 +132,37 @@ class VehicleSliderForSRL extends React.Component<IVehicleSliderForSRLProps, IVe
       prevArrow: <SlickButtonFix />,
       swipeToSlide: true,
       focusOnSelect: true,
-      afterChange: this.onSlideChange,
-      key: `${this.state.noImagesLoaded}`
+      afterChange: onHandleSlideChange,
+      key: `${noImagesLoaded}`
     };
 
     return (
-      <div className={styles.wrapper} onMouseEnter={this.beforeChange}>
-        <Slider {...settings}>{this.renderSliderImages()}</Slider>
+      <div className={styles.wrapper} onMouseEnter={beforeChange}>
+        <Slider {...settings}>{renderSliderImages()}</Slider>
       </div>
     );
   };
 
-  render(): JSX.Element {
-    const { images, className, type, isReferenceSearch, CircularProgressbar } = this.props;
-
-    const containerClassName = classnames(styles.imageContainer, className, {
-      [styles[type]]: !!type
-    });
-
-    return (
-      <div className={containerClassName}>
-        {isReferenceSearch && <CircularProgressbar />}
-        {images ? this.renderSlider() : false}
-      </div>
-    );
-  }
+  const containerClassName = classnames(styles.imageContainer, className, {
+    [styles[type]]: !!type
+  });
+
+  return (
+    <div className={containerClassName}>
+      {isReferenceSearch && <CircularProgressbar />}
+      {images ? renderSlider() : false}
+    </div>
+  );
+};
+
+VehicleSliderForSRL.defaultProps = {
+  mainImageId: '',
+  imagesCount: 0,
+  imageSize: 'small',
+  isAlternative: false,
+  typeAlternative: '',
+  images: [],
+  getCarImagesData: () => null
 }
 
 export default VehicleSliderForSRL;

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

@@ -32,154 +32,148 @@ export interface IStatsWrapperProps {
   imagesCount?: number;
   showNewLabel?: boolean;
   onFavoriteClick?: (event: any) => void;
-
+  getCarImagesData?: (carId: string, force?: boolean, includeAll?: boolean, type?: any, typeAlternative?: string) => Promise<any>;
   [key: string]: any;
 }
 
-export interface IStatsWrapperState {
-  activeSlide: number;
-}
-
-const MIN_PERCENT = 5;
-const MIN_PRICE_DIFFERENCE = 500;
-
-export default function withStats(WrappedComponent: any) {
-  return class extends React.Component<IStatsWrapperProps, IStatsWrapperState> {
-    static defaultProps = {
-      classWrapPrice: '',
-      statsSize: 'xs',
-      showNewLabel: false,
-      price: {
-        historyPriceDifference: 0,
-        historyPriceDifferencePerCent: 0
-      }
-    };
-
-    state = {
-      activeSlide: 0
-    };
-
-    onSlideChange = (activeSlide: number) => {
-      this.setState(() => ({ activeSlide }));
-
-      if (typeof this.props.onSlideChange === 'function') {
-        this.props.onSlideChange(activeSlide);
-      }
-    };
-
-    renderImagesData = (): JSX.Element => {
-      const { imagesCount, statsSize } = this.props;
-      if (!Number.isFinite(imagesCount)) return null;
-
-      const { activeSlide } = this.state;
-      const delimiters = { xs: '|', sm: '|', md: 'von' };
-
-      return (
-        <div className={styles.section}>
-          {statsSize === 'md' ? <IconSVG name='common_camera' customDimensions className={styles.cameraIcon} /> : null}
-          {!!imagesCount && <span>{`${activeSlide + 1} ${delimiters[statsSize]} ${imagesCount}`}</span>}
-        </div>
-      );
-    };
-
-    renderRotateSvg = (): JSX.Element => {
-      const { hasInteriorExteriorPhoto, images } = this.props;
-      const hasExteriorPhotos = hasInteriorExteriorPhoto && Array.isArray(images) && images.length > 0;
-      if (!hasExteriorPhotos) return null;
-      return (
-        <div className={styles.section}>
-          {hasExteriorPhotos ? (
-            <IconSVG name='rotate360New' customDimensions className={styles.statsEyeIcon} />
-          ) : null}
-        </div>
-      );
-    };
-
-    renderStarButton = () => {
-      const { isFavoured, onFavoriteClick } = this.props;
-      if (!onFavoriteClick) return null;
-
-      return (
-        <IconSVG
-          name='common_StarRoundedCorners'
-          customDimensions
-          className={classnames(styles.starButton, { [styles.starButtonFavored]: isFavoured })}
-          onClick={onFavoriteClick}
-        />
-      );
-    };
-
-    renderStatsData = (): JSX.Element => {
-      const { statsData, isFavoured, onFavoriteClick } = this.props;
-      if (!statsData) return null;
-      const { totalCarImpCount, totalFavCount } = statsData;
-      const favoritesClassName = classnames(
-        styles.statsFavoritesCount,
-        {
-          [styles.accented]: isFavoured,
-          [styles.clickable]: typeof onFavoriteClick === 'function'
-        });
-      const favoritesIconClassName = classnames(styles.statsStarIcon, { [styles.accented]: isFavoured });
-
-      return (
-        <div className={styles.section}>
-          {!!totalCarImpCount ? <div className={styles.statsViewsCount}>
-            <IconSVG name='common_SliderEye' customDimensions className={styles.statsEyeIcon} />
-            <span>
-              {totalCarImpCount}
-            </span>
-          </div> : null}
-          {!!totalFavCount ? <div className={favoritesClassName} onClick={onFavoriteClick}>
-            <IconSVG name='star' customDimensions className={favoritesIconClassName} />
-            <span>
-              {totalFavCount}
-            </span>
-          </div> : null}
-        </div>
-      );
-    };
-
-    renderPriceData = () => {
-      const { price: { historyPriceDifference, historyPriceDifferencePerCent }, showNewLabel, classWrapPrice, t } = this.props;
-
-      const newText = !!t ? t('vehicleProps:promoSlider.new') : 'neu';
-      const EUR = `\u20AC`;
-
-      return (
-        <div className={classnames(styles.topWrapper, classWrapPrice)}>
-          {showNewLabel && <Badge type='blue' className={styles.new}>{newText}</Badge>}
-          {!!historyPriceDifference && historyPriceDifference >= MIN_PRICE_DIFFERENCE && (
-            <Badge type='green'>
-              {`-`}
-              <FormattedNumber value={historyPriceDifference} numbersAfterDot={0} />
-              {` ${EUR}`}
-            </Badge>
-          )}
-          {!!historyPriceDifferencePerCent && historyPriceDifferencePerCent >= MIN_PERCENT && (
-            <Badge type='red' className={styles.priceDifferencePerCent}>-{historyPriceDifferencePerCent}%</Badge>
-          )}
-        </div>
-      );
-    };
-
-    render() {
-      const {
-        statsSize, isFavoured, onFavoriteClick, statsData, isReferenceSearch,
-        ...wrappedComponentProps
-      } = this.props;
-
-      return (
-        <div className={styles.wrapper}>
-          {!isReferenceSearch && this.renderPriceData()}
-          <WrappedComponent {...wrappedComponentProps} onSlideChange={this.onSlideChange} isReferenceSearch={isReferenceSearch} />
-          <div className={classnames(styles.controls, styles[statsSize])}>
-            {this.renderImagesData()}
-            {this.renderRotateSvg()}
-            {this.renderStarButton()}
-            {this.renderStatsData()}
-          </div>
-        </div>
-      );
+const withStats = (WrappedComponent: any) => ({
+  t,
+  images,
+  hasInteriorExteriorPhoto,
+  imagesCount,
+  statsData,
+  isFavoured,
+  onFavoriteClick,
+  isReferenceSearch,
+  onSlideChange,
+  classWrapPrice = '',
+  showNewLabel = false,
+  statsSize = 'xs',
+  price: { historyPriceDifference = 0, historyPriceDifferencePerCent = 0 },
+  ...props
+}: IStatsWrapperProps) => {
+  const [ activeSlide, setActiveSlide ] = React.useState<number>(0);
+
+  const MIN_PERCENT = 5;
+  const MIN_PRICE_DIFFERENCE = 500;
+
+  const onHandleSlideChange = (activeSlide: number) => {
+    setActiveSlide(activeSlide);
+
+    if (typeof onSlideChange === 'function') {
+      onSlideChange(activeSlide);
     }
   };
-}
+
+  const renderImagesData = (): JSX.Element => {
+    if (!Number.isFinite(imagesCount)) return null;
+
+    const delimiters = { xs: '|', sm: '|', md: 'von' };
+
+    return (
+      <div className={styles.section}>
+        {statsSize === 'md' ? <IconSVG name='common_camera' customDimensions className={styles.cameraIcon} /> : null}
+        {!!imagesCount && <span>{`${activeSlide + 1} ${delimiters[statsSize]} ${imagesCount}`}</span>}
+      </div>
+    );
+  };
+
+  const renderRotateSvg = (): JSX.Element => {
+    const hasExteriorPhotos = hasInteriorExteriorPhoto && Array.isArray(images) && images.length > 0;
+    if (!hasExteriorPhotos) return null;
+    return (
+      <div className={styles.section}>
+        {hasExteriorPhotos ? (
+          <IconSVG name='rotate360New' customDimensions className={styles.statsEyeIcon} />
+        ) : null}
+      </div>
+    );
+  };
+
+  const renderStarButton = () => {
+    if (!onFavoriteClick) return null;
+
+    return (
+      <IconSVG
+        name='common_StarRoundedCorners'
+        customDimensions
+        className={classnames(styles.starButton, { [styles.starButtonFavored]: isFavoured })}
+        onClick={onFavoriteClick}
+      />
+    );
+  };
+
+  const renderStatsData = (): JSX.Element => {
+    if (!statsData) return null;
+    const { totalCarImpCount, totalFavCount } = statsData;
+    const favoritesClassName = classnames(
+      styles.statsFavoritesCount,
+      {
+        [styles.accented]: isFavoured,
+        [styles.clickable]: typeof onFavoriteClick === 'function'
+      });
+    const favoritesIconClassName = classnames(styles.statsStarIcon, { [styles.accented]: isFavoured });
+
+    return (
+      <div className={styles.section}>
+        {!!totalCarImpCount ? <div className={styles.statsViewsCount}>
+          <IconSVG name='common_SliderEye' customDimensions className={styles.statsEyeIcon} />
+          <span>
+            {totalCarImpCount}
+          </span>
+        </div> : null}
+        {!!totalFavCount ? <div className={favoritesClassName} onClick={onFavoriteClick}>
+          <IconSVG name='star' customDimensions className={favoritesIconClassName} />
+          <span>
+            {totalFavCount}
+          </span>
+        </div> : null}
+      </div>
+    );
+  };
+
+  const renderPriceData = () => {
+    const newText = !!t ? t('vehicleProps:promoSlider.new') : 'neu';
+    const EUR = `\u20AC`;
+
+    return (
+      <div className={classnames(styles.topWrapper, classWrapPrice)}>
+        {showNewLabel && <Badge type='blue' className={styles.new}>{newText}</Badge>}
+        {!!historyPriceDifference && historyPriceDifference >= MIN_PRICE_DIFFERENCE && (
+          <Badge type='green'>
+            {`-`}
+            <FormattedNumber value={historyPriceDifference} numbersAfterDot={0} />
+            {` ${EUR}`}
+          </Badge>
+        )}
+        {!!historyPriceDifferencePerCent && historyPriceDifferencePerCent >= MIN_PERCENT && (
+          <Badge type='red' className={styles.priceDifferencePerCent}>-{historyPriceDifferencePerCent}%</Badge>
+        )}
+      </div>
+    );
+  };
+
+  const wrappedComponentProps = {
+    t,
+    images,
+    hasInteriorExteriorPhoto,
+    imagesCount,
+    classWrapPrice,
+    ...props
+  }
+
+  return (
+    <div className={styles.wrapper}>
+      {!isReferenceSearch && renderPriceData()}
+      <WrappedComponent onSlideChange={onHandleSlideChange} isReferenceSearch={isReferenceSearch} {...wrappedComponentProps} />
+      <div className={classnames(styles.controls, styles[statsSize])}>
+        {renderImagesData()}
+        {renderRotateSvg()}
+        {renderStarButton()}
+        {renderStatsData()}
+      </div>
+    </div>
+  );
+};
+
+export default withStats;

package/source/framework/types/types.ts

@@ -141,8 +141,10 @@ export interface IVehicleSliderProps extends Settings {
 }
 
 export interface IVehicleSliderForSRLProps {
-  carId?: string;
+  t?: (key: string, options?: object) => string;
+  id?: string;
   mainImageId?: string;
+  hasInteriorExteriorPhoto?: boolean;
   imageSize?: 'small' | 'medium' | 'large';
   imagesCount?: number;
   images?: ICarImage[];

package/source/framework/vehiclesProps/decoratedProps.tsx

@@ -688,7 +688,7 @@ const getDecoratedProps = (
           ? t('vehicleProps:value.co2Combined', { co2: co2.toLocaleString(language) })
           : t('vehicleProps:value.na');
 
-        return <>{consumptionValue} <br /> {co2Value}</>;
+        return <>{wrapValue(consumptionValue)} <br /> {wrapValue(co2Value)}</>;
       }
     },
     consumptionPowerCombinedAlternateView: {
@@ -708,7 +708,7 @@ const getDecoratedProps = (
           ? t('vehicleProps:value.co2Combined', { co2: co2.toLocaleString(language) })
           : t('vehicleProps:value.na');
 
-        return <>{consumptionValue} <br /> {co2Value}</>;
+        return <>{wrapValue(consumptionValue)} <br /> {wrapValue(co2Value)}</>;
       }
     },
     consumptionHydrogenCombinedAlternateView: {
@@ -728,7 +728,7 @@ const getDecoratedProps = (
           ? t('vehicleProps:value.co2Combined', { co2: co2.toLocaleString(language) })
           : t('vehicleProps:value.na');
 
-        return <>{consumptionValue} <br /> {co2Value}</>;
+        return <>{wrapValue(consumptionValue)} <br /> {wrapValue(co2Value)}</>;
       }
     },
     consumptionGasCombinedAlternateView: {
@@ -749,7 +749,7 @@ const getDecoratedProps = (
           ? t('vehicleProps:value.co2Combined', { co2: co2.toLocaleString(language) })
           : t('vehicleProps:value.na');
 
-        return <>{consumptionValue} <br /> {co2Value}</>;
+        return <>{wrapValue(consumptionValue)} <br /> {wrapValue(co2Value)}</>;
       }
     },