@bytebrand/fe-ui-core 4.2.142 → 4.2.144

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

@@ -0,0 +1,373 @@
+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/__tests__/utils/CommonUtils/getOfferSliders.test.ts

@@ -10,7 +10,8 @@ const expectedResultCDP = [
     max: 21666,
     value: 16100,
     unitName: 'modals:financing.euro',
-    caption: 'modals:financing.firstInstallment'
+    caption: 'modals:financing.firstInstallment',
+    withRangeLimit: true
   },
   {
     name: 'annualMileage',
@@ -33,7 +34,8 @@ const expectedResultCheckout = [
     max: 21666,
     value: 16100,
     unitName: 'modals:financing.euro',
-    caption: 'modals:financing.firstInstallment'
+    caption: 'modals:financing.firstInstallment',
+    withRangeLimit: true
   }
 ]
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.2.142",
+  "version": "4.2.144",
   "description": "UI components for the auto.de project",
   "main": "index.ts",
   "module": "dist/common.js",
@@ -82,6 +82,7 @@
     "@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/UserDashboardPage/sections/FavoriteSection/FavoriteSection.styl

@@ -0,0 +1,22 @@
+@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

@@ -0,0 +1,112 @@
+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;

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) {
+        if (car && car.car.mainData && car.car.metaData) {
           const { car: { mainData: { make, model, subModel } } } = car;
           const { car: { _id, metaData: { mainImageId } } } = car;
           const { buyingType, paybackPeriod, monthlyInstallment, request, currentSalesPrice } = car;
@@ -120,4 +120,5 @@ 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 = combineRefAlternative ? [
+  const priceData:any = combineRefAlternative ? [
     ...priceItemsGlobal,
     {
       isTotal: true,

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 { isEqual } from 'lodash';
+import { isArray, 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);
+        setActiveSorting(activeSort as string);
       }
 
       clearSearchState(!activeSort);
-      search(filters, pageNumber || 1, true);
+      search(filters, Number(pageNumber) || 1, true);
     }
 
     this.updateFinancingSearchConfig();
@@ -194,41 +194,46 @@ 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
-          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);
-                });
+          if (isArray(paramValue)) {
+            const stringParamValue: string[] = paramValue as string[];
+            stringParamValue.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);
+                  });
+                }
+              });
             });
-          });
+          }
         } else if (filter === MM_GROUPS_EXCLUDE_KEY) {
-          paramValue.map((group: any, index: number) => {
-            if (index >= 1) {
-              addMmExcludeGroup();
-            }
+          if (isArray(paramValue)) {
+            const stringParamValue: string[] = paramValue as string[];
+            stringParamValue.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, { ignoreQueryPrefix: true }) : paramValue;
-          changeFilterValue(filter, valueToSend);
+          const valueToSend = isRange ? qs.parse(paramValue as string, { ignoreQueryPrefix: true }) : paramValue;
+          changeFilterValue(filter, valueToSend as string);
           if (isRange || isObject) { changeRangeFilterControls(filter, valueToSend); }
         }
       });
@@ -383,7 +388,7 @@ class FiltersContainer extends React.Component<IFiltersContainerProps, {}> {
     const alternativeIDProps = {
       t,
       successTransition,
-      autoDeId: paramsFromQuery.autoDeId,
+      autoDeId: paramsFromQuery.autoDeId as string,
       error: isErrorAlternativeField,
       onChange: onAlternativeRedirect
     };
@@ -394,7 +399,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>
@@ -405,7 +410,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>
     );
   }
@@ -420,8 +425,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);
 });