@bytebrand/fe-ui-core 4.2.141 → 4.2.142

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.2.141",
+  "version": "4.2.142",
   "description": "UI components for the auto.de project",
   "main": "index.ts",
   "module": "dist/common.js",
@@ -82,7 +82,6 @@
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.2",
     "@types/react-lazyload": "^2.5.0",
-    "@types/react-scroll": "^1.8.7",
     "@types/react-select": "^3.0.2",
     "@types/react-slick": "^0.23.4 ",
     "autoprefixer": "^9.6.0",

package/source/components/OfferPanel/RangeGroup/RangeGroup.tsx

@@ -9,16 +9,18 @@ export interface IRangeGroup {
   onChange: (event: Event, value: number | number[]) => void;
   className?: string;
   isAlternative?: boolean;
+  maxFinancingFirstInstallment?: number;
 }
 
-const RangeGroup: FC<IRangeGroup> = ({ sliders, onChange, isAlternative }) => <>
-  {sliders.length && sliders.map(({ name, min, max, step, caption, value, unitName }) => {
+const RangeGroup: FC<IRangeGroup> = ({ sliders, onChange, isAlternative, maxFinancingFirstInstallment }) => <>
+  {sliders.length && sliders.map(({ name, min, max, step, caption, value, unitName, withRangeLimit }) => {
     const rangeProps = {
       min, max, step, value,
-      isAlternative,
+      isAlternative, withRangeLimit,
       units: value ? ` ${unitName}` : '',
       onAfterChange: () => {},
-      onChange: (_: Event, value: number | number[]) => onChange(name, value)
+      onChange: (_: Event, value: number | number[]) => onChange(name, value),
+      maxFinancingFirstInstallment
     };
     return (
       <Fragment key={name}>

package/source/components/UserDashboardPage/sections/RequestedCarsSection/RequestedCarsSection.tsx

@@ -36,7 +36,7 @@ const RequestedCarsSection = ({ t, getSupportedImageFormat, requestedCars, redir
   const renderItems = () => {
     if (requestedCars && requestedCars.length > 0) {
       const carsCard = requestedCars.map((car) => {
-        if (car && car.car.mainData && car.car.metaData) {
+        if (car && car.car) {
           const { car: { mainData: { make, model, subModel } } } = car;
           const { car: { _id, metaData: { mainImageId } } } = car;
           const { buyingType, paybackPeriod, monthlyInstallment, request, currentSalesPrice } = car;
@@ -120,5 +120,4 @@ const RequestedCarsSection = ({ t, getSupportedImageFormat, requestedCars, redir
     </>
   );
 };
-
 export default RequestedCarsSection;

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

@@ -183,7 +183,7 @@ const VehiclePrice: React.FC<IVehiclePriceSectionProps> = (props: IVehiclePriceS
     }
   ] : '';
 
-  const priceData:any = combineRefAlternative ? [
+  const priceData = combineRefAlternative ? [
     ...priceItemsGlobal,
     {
       isTotal: true,

package/source/components/_common/Range/Range.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import FormattedNumber from '../../FormattedNumber/FormattedNumber';
 import { Slider } from '@mui/material';
 import { isMobileOnly } from 'react-device-detect';
@@ -11,7 +11,9 @@ interface IRangeProps {
   step: number;
   units: string;
   value: number;
+  withRangeLimit?: boolean;
   onChange: (event: Event, value: number | number[], activeThumb?: number) => void;
+  maxFinancingFirstInstallment?: number;
 }
 
 const Theme = createTheme({
@@ -33,8 +35,28 @@ const Range: React.FC<IRangeProps> = ({
   step,
   value,
   units,
-  onChange
+  withRangeLimit,
+  onChange,
+  maxFinancingFirstInstallment
 }: IRangeProps) => {
+  const [rangeValue, setRangeValue] = useState<number | number[]>(0);
+
+  useEffect(
+    () => {
+      setRangeValue(value);
+    },
+    [value]
+  )
+
+  const onChangeRange = (event: Event, value: number | number[]) => {
+    if (value > maxFinancingFirstInstallment && withRangeLimit) {
+      return;
+    } else {
+      setRangeValue(value);
+      onChange(event, value)
+    }
+  }
+
   const formttedValue = (value: number) => {
     return (
       <>
@@ -52,8 +74,8 @@ const Range: React.FC<IRangeProps> = ({
         disableSwap={isMobileOnly ? true : false}
         valueLabelDisplay='auto'
         valueLabelFormat={formttedValue}
-        value={value}
-        onChange={(event: Event, value: number | number[]) => onChange(event, value)}
+        value={rangeValue}
+        onChange={onChangeRange}
         sx={{
           color: '#005CCB'
         }}

package/source/components/containers/SearchPage/FiltersContainer/FiltersContainer.tsx

@@ -3,7 +3,7 @@ import _get from 'lodash/get';
 import _startsWith from 'lodash/startsWith';
 import _debounce from 'lodash/debounce';
 import qs from 'qs';
-import { isArray, isEqual } from 'lodash';
+import { isEqual } from 'lodash';
 import { checkRangeValuesOnEqual, getGroupValuesForQuery } from '../../../../framework/utils/CommonUtils';
 import { FilterBlockFactory } from '../../../SearchFilters/common/FilterBlock/FilterBlockFactory';
 import { FilterGroups, IFilters } from '../../../SearchFilters/FiltersFactory';
@@ -83,11 +83,11 @@ class FiltersContainer extends React.Component<IFiltersContainerProps, {}> {
 
       if (activeSort !== activeSorting) {
         // activeSorting = activeSort; // TODO make a function to change at searchStore
-        setActiveSorting(activeSort as string);
+        setActiveSorting(activeSort);
       }
 
       clearSearchState(!activeSort);
-      search(filters, Number(pageNumber) || 1, true);
+      search(filters, pageNumber || 1, true);
     }
 
     this.updateFinancingSearchConfig();
@@ -194,46 +194,41 @@ class FiltersContainer extends React.Component<IFiltersContainerProps, {}> {
     if (paramsKeys.length) {
       paramsKeys.forEach((filter: string) => {
         const paramValue = paramsFromQuery[filter];
+
         if (filter === MMS_GROUPS_KEY) { //tslint:disable-line
-          if (isArray(paramValue)) {
-            const stringParamValue: string[] = paramValue as string[];
-            stringParamValue.map((group: any, index: number) => {
-              if (index >= 1) {
-                if (filter === MMS_GROUPS_KEY) addMmsGroup();
+          paramValue.map((group: any, index: number) => {
+            if (index >= 1) {
+              if (filter === MMS_GROUPS_KEY) addMmsGroup();
+            }
+
+            Object.keys(group).forEach((key: string) => {
+              changeFilterValue(key, group[key], index);
+              if (key === MANUFACTURER_KEY) {
+                getModelsInfoByMaker(group[key], true).then((response: any) => {
+                  const models = response || [];
+                  addModelsToFilters(models, index);
+                });
               }
-
-              Object.keys(group).forEach((key: string) => {
-                changeFilterValue(key, group[key], index);
-                if (key === MANUFACTURER_KEY) {
-                  getModelsInfoByMaker(group[key], true).then((response: any) => {
-                    const models = response || [];
-                    addModelsToFilters(models, index);
-                  });
-                }
-              });
             });
-          }
+          });
         } else if (filter === MM_GROUPS_EXCLUDE_KEY) {
-          if (isArray(paramValue)) {
-            const stringParamValue: string[] = paramValue as string[];
-            stringParamValue.map((group: any, index: number) => {
-              if (index >= 1) {
-                addMmExcludeGroup();
-              }
+          paramValue.map((group: any, index: number) => {
+            if (index >= 1) {
+              addMmExcludeGroup();
+            }
 
-              Object.keys(group).forEach((key: string) => {
-                changeFilterValue(key, group[key], index);
-              });
+            Object.keys(group).forEach((key: string) => {
+              changeFilterValue(key, group[key], index);
             });
-          }
+          });
         } else {
           // Defines whether filter is range or not.
           const isRange = rangeFiltersStrings.indexOf(filter) !== -1;
           const isObject = objectFiltersStrings.indexOf(filter) !== -1;
 
           // Transform url encoded param into range filter object.
-          const valueToSend = isRange ? qs.parse(paramValue as string, { ignoreQueryPrefix: true }) : paramValue;
-          changeFilterValue(filter, valueToSend as string);
+          const valueToSend = isRange ? qs.parse(paramValue, { ignoreQueryPrefix: true }) : paramValue;
+          changeFilterValue(filter, valueToSend);
           if (isRange || isObject) { changeRangeFilterControls(filter, valueToSend); }
         }
       });
@@ -388,7 +383,7 @@ class FiltersContainer extends React.Component<IFiltersContainerProps, {}> {
     const alternativeIDProps = {
       t,
       successTransition,
-      autoDeId: paramsFromQuery.autoDeId as string,
+      autoDeId: paramsFromQuery.autoDeId,
       error: isErrorAlternativeField,
       onChange: onAlternativeRedirect
     };
@@ -399,7 +394,7 @@ class FiltersContainer extends React.Component<IFiltersContainerProps, {}> {
           <div className={styles.titleAlternative}>
             <div className={styles.titleWrap}>
               <h3 className={styles.titleTextAlternative}>auto.de-ID</h3>
-              <Link to={`/alternative/detailed${locationSearch}`} className={styles.titleLink}>
+              <Link to={ `/alternative/detailed${locationSearch}` } className={styles.titleLink}>
                 {this.props.t('SearchPage:detailedSearch')}
               </Link>
             </div>
@@ -410,7 +405,7 @@ class FiltersContainer extends React.Component<IFiltersContainerProps, {}> {
           <h3 className={styles.titleText}>{this.props.t('SearchPage:filterBy')}</h3>
         </div>
         {this.renderFilters()}
-        <Link className={styles.linkToDetailed} to={`/${isAlternative ? 'alternative' : 'search'}/detailed${locationSearch}`}>{t('SearchPage:detailedSearch')}</Link>
+        <Link className={styles.linkToDetailed} to={ `/${isAlternative ? 'alternative' : 'search'}/detailed${locationSearch}` }>{t('SearchPage:detailedSearch')}</Link>
       </div>
     );
   }
@@ -425,8 +420,8 @@ const removeUnknownOptions = (options: any) => {
 
 export default React.memo(FiltersContainer, (props, nextProps) => {
   const { t, location, filters, aggregation } = props;
-  return t === nextProps.t &&
-    location.search === nextProps.location.search &&
-    isEqual(aggregation, nextProps.aggregation) &&
-    isEqual(filters.MMS_GROUPS, nextProps.filters.MMS_GROUPS);
+  return t        === nextProps.t &&
+  location.search === nextProps.location.search &&
+  isEqual(aggregation, nextProps.aggregation) &&
+  isEqual(filters.MMS_GROUPS, nextProps.filters.MMS_GROUPS);
 });

package/source/framework/constants.ts

@@ -59,7 +59,7 @@ export const offers = [
     name: 'financing',
     periods: [12, 24, 36, 48, 60, 72, 84, 96],                      // tslint:disable-line
     sliders: [
-      { name: 'firstInstallment', min: 0, step: 100, unit: 'euro' },              // tslint:disable-line
+      { name: 'firstInstallment', min: 0, step: 100, unit: 'euro', withRangeLimit: true },              // tslint:disable-line
       { name: 'annualMileage', min: 5000, max: 60000, step: 5000, unit: 'km' }  // tslint:disable-line
     ]
   },

package/__tests__/components/UserDasboardPage/sections/FavoriteSection/FavoriteSection.test.tsx

@@ -1,373 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import FavoriteSection from '../../../../../source/components/UserDashboardPage/sections/FavoriteSection/FavoriteSection';
-import { observable } from 'mobx';
-import qs from 'qs';
-
-const t = (phrase: string | string[], options: object) => {
-  if (options) {
-    const value = Object.values(options).map((option) => option);
-    return `${phrase} ${value}`;
-  }
-  return phrase;
-};
-
-interface IWithRouter {
-  children?: JSX.Element;
-  link?: string;
-}
-const LinkRouter = ({ children, link }: IWithRouter) => {
-  return (
-    <a href={link} >
-      {children}
-    </a>
-  );
-};
-const favoriteCars = [
-  {
-    parkedFor: 'N/A',
-    id: 'c4c9141a-5e4c-4d75-9d0f-c2f1b8f31241',
-    mainImageId: ' ',
-    imagesCount: ' ',
-    hasInteriorExteriorPhoto: ' ',
-    title: {
-      make: 'Volkswagen',
-      model: 'Polo',
-      subModel: '1.0 TSI Style',
-      option: '',
-      to: ''
-    },
-    showNewLabel: false,
-    info: {
-      regDate: ' ',
-      mileage: 0,
-      gearbox: 'selector_gearbox_manualShift',
-      numberOfPreviousOwners: 0,
-      usageType: 'selector_unknown',
-      condition: 'selector_condition_new',
-      damaged: false,
-      driveType: 'selector_driveType_frontWheelDrive'
-    },
-    location: {
-      city: 't',
-      street: 't',
-      zipCode: 12345
-    },
-    consumption: {
-      fuel: 'selector_fuel_petrol',
-      consumptionCombined: 5.2,
-      consumptionPowerCombined: ' '
-    },
-    engineData: {
-      powerKW: 70,
-      powerPS: 70
-    },
-    environmentEmissions: {
-      co2: 118
-    },
-    offer: {
-      offerId: ' ',
-      autoDeOfferId: ' ',
-      offerFrom: 'selector_unknown',
-      offerSource: ' ',
-      offerAvailability: 'selector_unknown',
-      offerDescription: '',
-      deliveryDate: 1698969600,
-      deliveryPeriod: 'selector_deliveryPeriod_days270',
-      dealerHomepage: ' ',
-      closedDomain: ' ',
-      export: ' ',
-      commercial: ' ',
-      warranty: false,
-      rentingPossible: ' ',
-      newHuAu: true,
-      internalNumber: '118_92436S/3243',
-      availabilityMode: 'selector_availabilityMode_fromDate',
-      mobileDeOfferId: ' ',
-      as24DeOfferId: ' ',
-      elnOfferId: 'bd11b00a8d643e16b69c308360e5236b'
-    },
-    price: {
-      offerIndex: 0,
-      isStrike: false,
-      comparable: {
-        annualMileage: 10000,
-        firstInstallment: ' ',
-        paybackPeriod: 48,
-        withAddServices: ' ',
-        withTransportation: ' '
-      },
-      checkout: {
-        warrantyRates: [
-          0,
-          0,
-          0
-        ],
-        warrantyPackage: 0,
-        warrantyPeriod: 1,
-        admissionService: 0,
-        licensePlateFee: 0
-      },
-      common: {
-        firstRegistration: ' ',
-        mileage: 0,
-        currentSalesPrice: 30666,
-        highestPrice: 34232,
-        isStrikeShown: true,
-        isHybridOrElectric: false
-      },
-      financing: {
-        grossLoanAmountWithoutFinalInstallment: 0,
-        purchasePrice: 0,
-        hasPaymentProtection: false,
-        paymentProtectionInsurance: 0,
-        monthlyInstallment: 142,
-        oldMonthlyInstallment: 180,
-        annualMileage: 25000,
-        firstInstallment: 11900,
-        withTransportation: false,
-        withAddServices: true,
-        addServicesCostRaw: 799,
-        addServicesCost: 799,
-        transportationCostRaw: 499,
-        transportationCost: 499,
-        withFinalInstallment: true,
-        paybackPeriod: 72,
-        rawPaybackPeriod: 72,
-        nominalInterestRate: 3.92,
-        annualPercentageRate: 6.99,
-        financialInstitution: 'Santander Consumer Bank AG, Santander-Platz 1, 41061 Mönchengladbach',
-        periodInterestRate: [
-          {
-            duration: 12,
-            recommended: 70,
-            current: 88,
-            inEUR: ' ',
-            value: 18766,
-            highestValue: 30124.16
-          },
-          {
-            duration: 24,
-            recommended: 66,
-            current: 77,
-            inEUR: ' ',
-            value: 18766,
-            highestValue: 26358.64
-          },
-          {
-            duration: 36,
-            recommended: 60,
-            current: 66,
-            inEUR: ' ',
-            value: 18766,
-            highestValue: 22593.12
-          },
-          {
-            duration: 48,
-            recommended: 50,
-            current: 60,
-            inEUR: ' ',
-            value: 17920.2,
-            highestValue: 20539.2
-          },
-          {
-            duration: 60,
-            recommended: 40,
-            current: 50,
-            inEUR: ' ',
-            value: 14933.5,
-            highestValue: 17116
-          },
-          {
-            duration: 72,
-            recommended: 30,
-            current: 40,
-            inEUR: ' ',
-            value: 11946.8,
-            highestValue: 13692.8
-          },
-          {
-            duration: 84,
-            recommended: 20,
-            current: 30,
-            inEUR: ' ',
-            value: 8960.1,
-            highestValue: 10269.6
-          },
-          {
-            duration: 96,
-            recommended: 10,
-            current: 20,
-            inEUR: ' ',
-            value: 5973.4,
-            highestValue: 6846.4
-          }
-        ],
-        closingCosts: 0,
-        offersFinancing: true,
-        rateMode: 'dealer'
-      },
-      buy: {
-        withTransportation: false,
-        withAddServices: true,
-        withoutAddServices: true,
-        transportationCost: 499,
-        addServicesCost: 799,
-        currentSalesPriceExtra: 30666,
-        highestPriceExtra: 34232,
-        extraCost: 0
-      },
-      leasing: {
-        RWG: 7,
-        maxAge: 24,
-        maxMileage: 1000000,
-        isActive: true,
-        withTransportation: false,
-        withAddServices: false,
-        addServicesCostRaw: 799,
-        transportationCostRaw: 499,
-        addServicesCost: 799,
-        transportationCost: 499,
-        monthlyAddServices: 0,
-        monthlyTransportation: 0,
-        monthlyInstallment: 441,
-        oldMonthlyInstallment: 526,
-        firstInstallment: 20,
-        firstInstallmentMax: 2000,
-        annualMileage: 10000,
-        paybackPeriodRange: [
-          30,
-          36,
-          42,
-          48,
-          54,
-          60
-        ],
-        paybackPeriod: 48,
-        santanderPayBackMin: 250,
-        nominalInterestRate: 6.78,
-        financialInstitution: 'Santander Consumer Bank AG, Santander-Platz 1, 41061 Mönchengladbach',
-        grossLoanAmountWithoutFinalInstallment: 0,
-        hasPaymentProtection: false,
-        paymentProtectionInsurance: 1100,
-        leasingMode: 'default',
-        currentSalesPrice: 30666
-      },
-      abo: {
-        paybackPeriod: 6,
-        annualMileage: 10000
-      },
-      firstRegistration: ' ',
-      mileage: 0,
-      currentSalesPrice: 30666,
-      highestPrice: 34232,
-      isStrikeShown: true,
-      carId: 'c4c9141a-5e4c-4d75-9d0f-c2f1b8f31241',
-      offerName: 'financing',
-      vehicleId: 'c4c9141a-5e4c-4d75-9d0f-c2f1b8f31241',
-      vatRate: 19,
-      mlCurrentSalesPricePredicted: ' ',
-      historyPriceDifference: 3566,
-      historyPriceDifferencePerCent: 10,
-      margin: 30666,
-      toRound: false
-    },
-    internalNumber: '118_92436S/3243',
-    vin: '',
-    isOnline: true,
-    firstIsOnline: 1675668230,
-    url: '/search/vehicle/c4c9141a-5e4c-4d75-9d0f-c2f1b8f31241',
-    relativeScore: 0,
-    baseUrl: '',
-    offerSource: '',
-    crawledAt: '',
-    ownerName: 'Guardian of Auto.de',
-    modificationDate: '18.05.2023',
-    seoText: ''
-  }
-];
-const favoritesIDs = [
-  'b359d74f-bb96-4fca-9539-579792fe7c36'
-];
-const getFavoriteCarsMock = jest.fn();
-
-const aggStatsData = observable({
-  'b359d74f-bb96-4fca-9539-579792fe7c36': {
-    carId: 'b359d74f-bb96-4fca-9539-579792fe7c36',
-    totalFavCount: 3,
-    totalCarImpCount: 7399,
-    slidingCarImpCount: 10
-  },
-  get() {
-    return {
-      'b359d74f-bb96-4fca-9539-579792fe7c36': {
-        carId: 'b359d74f-bb96-4fca-9539-579792fe7c36',
-        totalFavCount: 3,
-        totalCarImpCount: 7399,
-        slidingCarImpCount: 10
-      }
-    };
-  }
-});
-const mockProps = {
-  t,
-  LinkRouter,
-  PLACEHOLDER_IMAGE_SMALL_URL: 'PLACEHOLDER_IMAGE_SMALL_URL',
-  pageNumberKey: 'pageNumber',
-  favoriteStore: { favoriteCars, favoritesIDs, showList: true, getFavouriteCars: getFavoriteCarsMock, getFavoritesIDs: jest.fn() },
-  appStore: {},
-  carsStore: { aggStatsData, getAggStatsData: jest.fn() },
-  imagesStore: { getSupportedImageFormat: jest.fn() }
-};
-
-describe('FavoriteSection', () => {
-  test('calls getFavouriteCars when component is mounted', () => {
-    render(<FavoriteSection {...mockProps} />);
-    expect(mockProps.favoriteStore.getFavouriteCars).toHaveBeenCalledTimes(1);
-  });
-  test('calls getFavoritesIDs and getAggStatsData when favoritesIDs is empty', async () => {
-    const favoritesIDs: string[] = [];
-    const props = {
-      t,
-      LinkRouter,
-      PLACEHOLDER_IMAGE_SMALL_URL: 'PLACEHOLDER_IMAGE_SMALL_URL',
-      pageNumberKey: 4,
-      favoriteStore: { favoriteCars, favoritesIDs, showList: true, getFavouriteCars: getFavoriteCarsMock, getFavoritesIDs: jest.fn() },
-      appStore: {},
-      carsStore: { aggStatsData, getAggStatsData: jest.fn() },
-      imagesStore: { getSupportedImageFormat: jest.fn() }
-    };
-    props.favoriteStore.getFavoritesIDs.mockResolvedValueOnce(['b359d74f-bb96-4fca-9539-579792fe7c36']);
-
-    render(<FavoriteSection {...props} />);
-    expect(props.favoriteStore.getFavoritesIDs).toHaveBeenCalledTimes(1);
-    expect(mockProps.carsStore.getAggStatsData).toHaveBeenCalledTimes(1);
-    expect(mockProps.carsStore.getAggStatsData).toHaveBeenCalledWith(['b359d74f-bb96-4fca-9539-579792fe7c36']);
-  });
-  test('does not call getFavoritesIDs when favoritesIDs is not empty', async () => {
-    render(<FavoriteSection {...mockProps} />);
-    expect(mockProps.favoriteStore.getFavoritesIDs).not.toHaveBeenCalled();
-  });
-  test('returns the correct current page', () => {
-    const mockProps = {
-      t: jest.fn(),
-      LinkRouter: jest.fn(),
-      PLACEHOLDER_IMAGE_SMALL_URL: 'PLACEHOLDER_IMAGE_SMALL_URL',
-      pageNumberKey: 'pageNumber',
-      favoriteStore: { favoriteCars, favoritesIDs, showList: true, getFavouriteCars: getFavoriteCarsMock, getFavoritesIDs: jest.fn() },
-      appStore: {},
-      carsStore: {
-        aggStatsData: {},
-        getAggStatsData: jest.fn()
-      },
-      imagesStore: {
-        getSupportedImageFormat: jest.fn()
-      }
-    };
-    jest.spyOn(qs, 'parse').mockReturnValueOnce({ pageNumber: '3' });
-    const favoriteSectionInstance = new FavoriteSection(mockProps);
-    const currentPage = favoriteSectionInstance.getCurrentPage();
-    expect(currentPage).toBe(3);
-  });
-
-});

package/source/components/UserDashboardPage/sections/FavoriteSection/FavoriteSection.styl

@@ -1,22 +0,0 @@
-@import '../../../../theme/mixins.styl'
-
-.wrapFavorites
-  border: none !important;
-
-.favoriteBtn
-  height: 30px;
-  font-size: 13px;
-  text-transform: none !important
-  font-weight: 400 !important;
-
-  +media-tablet-landscape-up()
-    height: 38px;
-    font-size: 14px;
-
-.btnCarToFavorites
-  height: 38px;
-  min-width: 160px !important;
-  font-size: 13px !important;
-  +media-tablet-landscape-up()
-    min-width: 224px !important;
-    font-size: 14px !important;

package/source/components/UserDashboardPage/sections/FavoriteSection/FavoriteSection.tsx

@@ -1,112 +0,0 @@
-import * as React from 'react';
-import { toJS } from 'mobx';
-import qs from 'qs';
-import _get from 'lodash/get';
-import DashboardSection from '../../../containers/DasboardSection/DashboardSection';
-import styles from './FavoriteSection.styl';
-import { isMobileOnly } from 'react-device-detect';
-import { VehicleSmallCard, Button } from '../../../../../common';
-
-interface ITFunction {
-  <T = string>(key: string, options?: object): T;
-  <T = string>(keys: string[], options?: object): T;
-}
-
-interface IFavoriteSectionProps {
-  favoriteStore: any;
-  carsStore: any;
-  appStore: any;
-  imagesStore: any;
-  t?: ITFunction;
-  PLACEHOLDER_IMAGE_SMALL_URL: string;
-  pageNumberKey: any;
-  LinkRouter: any;
-}
-
-class FavoriteSection extends React.Component<IFavoriteSectionProps, {}> {
-  componentDidMount() {
-    const currentPage = this.getCurrentPage();
-    this.getCarsForPage(currentPage);
-  }
-
-  getCarsForPage = (page: number): void => {
-    const { favoriteStore, carsStore } = this.props;
-    if (page) {
-      favoriteStore.getFavouriteCars(page);
-
-      if (!favoriteStore.favoritesIDs.length) {
-        favoriteStore.getFavoritesIDs().then((favoritesIDs: any) => {
-          carsStore.getAggStatsData(favoritesIDs);
-        });
-      } else carsStore.getAggStatsData(favoriteStore.favoritesIDs);
-    }
-  };
-
-  getCurrentPage = () => {
-    const { pageNumberKey } = this.props;
-    const pageFromQuery = qs.parse(location.search, { ignoreQueryPrefix: true })[pageNumberKey];
-    if (!pageFromQuery) return 1;
-    const page = Number(pageFromQuery);
-    return page > 0 ? page : 1;
-  };
-
-  onCarSelectFavorite = (url: string) => window.open(`/search/vehicle/${url}`, '_blank');
-
-  private renderFavorites = () => {
-    const { t, appStore: { language }, carsStore, imagesStore, favoriteStore, PLACEHOLDER_IMAGE_SMALL_URL, LinkRouter } = this.props;
-    const favoriteCars = toJS(favoriteStore.favoriteCars);
-    return favoriteCars.map((car: any, key: any) => {
-      const carId = _get(car, 'id');
-      const mainImageId = _get(car, 'mainImageId');
-      const src = !!mainImageId && !!car.imagesCount
-        ? imagesStore.getSupportedImageFormat(carId, mainImageId, 'small')
-        : PLACEHOLDER_IMAGE_SMALL_URL;
-      const vehicleProps = {
-        ...car,
-        t,
-        language,
-        src,
-        linkTag: LinkRouter,
-        showSlider: false,
-        showOfferBtn: true,
-        showFavoriteStar: false,
-        priceSubMtl: !isMobileOnly ? t('vehicleProps:value.priceSub') : null,
-        stats: {
-          imagesCount: _get(car, 'imagesCount'),
-          statsData: carsStore.aggStatsData.get(car.id)
-        },
-        i18nPrefixForPriceRating: 'common:',
-        className: styles.wrapFavorites,
-        classButton: styles.favoriteBtn,
-        onDetailsClick: this.onCarSelectFavorite,
-        vehicleComponentName: 'favorite'
-      };
-
-      return (key === 0) && <VehicleSmallCard key={`favoriteCar${carId}`} {...vehicleProps} />;
-    });
-  };
-
-  render(): JSX.Element {
-    const { t, favoriteStore, LinkRouter } = this.props;
-
-    return (
-      <>
-        {favoriteStore.showList ? (
-          <DashboardSection
-            title={t('DashboardPage:favoriteTitle')}
-            link={
-              <LinkRouter to='/favourites'>
-                <Button className={styles.btnCarToFavorites} variant='outlined'>
-                  {t('vehicleProps:title.toFavoritesCar')}
-                </Button>
-              </LinkRouter>}
-          >
-            {this.renderFavorites()}
-          </DashboardSection>
-        ) : false}
-      </>
-    );
-  }
-}
-
-export default FavoriteSection;