@bytebrand/fe-ui-core 4.2.183 → 4.2.185

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

@@ -578,6 +578,7 @@ const aggStatsData = observable({
 const mockProps = {
   t,
   LinkRouter,
+  checkoutCars,
   PLACEHOLDER_IMAGE_SMALL_URL: 'PLACEHOLDER_IMAGE_SMALL_URL',
   appStore: { language:'en' },
   carsStore: { aggStatsData },
@@ -588,16 +589,12 @@ const mockProps = {
 describe('CheckoutSection', () => {
   it('renders correctly', () => {
     const { container } = render(<CheckoutSection {...mockProps as any} />);
-    expect(mockProps.checkoutStore.getCheckoutCarList).toHaveBeenCalledTimes(1);
+    // expect(mockProps.checkoutStore.getCheckoutCarList).toHaveBeenCalledTimes(1);
     expect(container).toBeInTheDocument();
   });
   it('should display correct car data', () => {
     const { container } = render(<CheckoutSection {...mockProps as any} />);
-    // let checkoutCarList:[] = [];
-    // mockProps.checkoutStore.getCheckoutCarList()
-    // .then((savedCheckoutDataList: any) => {
-    // checkoutCarList = mockProps.checkoutStore.checkoutCars;
-    mockProps.checkoutStore.checkoutCars.forEach((element:any) => {
+    mockProps.checkoutCars.forEach((element:any) => {
       expect(container).toHaveTextContent(element.title.make);
     });
     // });
@@ -608,7 +605,7 @@ describe('CheckoutSection', () => {
     // .then((savedCheckoutDataList: any) => {
     const checkoutButton = getAllByRole('link')[0];
     fireEvent.click(checkoutButton);
-    const expectedUrl = `/checkout/contact-information?carId=${mockProps.checkoutStore.checkoutCars[0].id}&isSavedCheckout=true&mainImageId=${mockProps.checkoutStore.checkoutCars[0].mainImageId}&model=${mockProps.checkoutStore.checkoutCars[0].title.model}&subModel=${mockProps.checkoutStore.checkoutCars[0].title.subModel}&make=${mockProps.checkoutStore.checkoutCars[0].title.make}`;
+    const expectedUrl = `/checkout/contact-information?carId=${mockProps.checkoutCars[0].id}&isSavedCheckout=true&mainImageId=${mockProps.checkoutCars[0].mainImageId}&model=${mockProps.checkoutCars[0].title.model}&subModel=${mockProps.checkoutCars[0].title.subModel}&make=${mockProps.checkoutCars[0].title.make}`;
     waitFor(() => expect(window.open).toHaveBeenCalledWith(expectedUrl, '_blank'));
   // });
   });

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

@@ -312,8 +312,8 @@ const aggStatsData = observable({
 const mockProps = {
   t,
   LinkRouter,
+  favoriteCars,
   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() },
@@ -322,52 +322,14 @@ const mockProps = {
 
 describe('FavoriteSection', () => {
   test('calls getFavouriteCars when component is mounted', () => {
-    render(<FavoriteSection {...mockProps} />);
-    expect(mockProps.favoriteStore.getFavouriteCars).toHaveBeenCalledTimes(1);
+    const { container } = render(<FavoriteSection {...mockProps as any} />);
+    expect(container).toBeInTheDocument();
+    // 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);
+  test('should display correct car data', () => {
+    const { container } = render(<FavoriteSection {...mockProps as any} />);
+    mockProps.favoriteCars.forEach((element:any) => {
+      expect(container).toHaveTextContent(element.title.make);
+    });
   });
-
 });

package/package.json

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

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

@@ -6,6 +6,7 @@ import { isMobileOnly } from 'react-device-detect';
 import Slider from 'react-slick';
 import { VehicleSmallCard } from '../../../../../common';
 import { toJS } from 'mobx';
+// import { toJS } from 'mobx';
 
 interface ITFunction {
   <T = string>(key: string, options?: object): T;
@@ -19,71 +20,62 @@ interface ICheckoutSectionProps {
   t?: ITFunction;
   LinkRouter: any;
   PLACEHOLDER_IMAGE_SMALL_URL:string;
-  UserActionsAPI:any;
-  checkoutStore:any;
+  checkoutCars?:any;
 }
 
 class CheckoutSection extends React.Component<ICheckoutSectionProps, {}> {
-  componentDidMount() {
-    const { checkoutStore } = this.props;
-    checkoutStore.getCheckoutCarList();
-  }
-
   onCarSelectCheckout = (carId?: string) => {
-
-    const checkoutCars = toJS(this.props.checkoutStore.checkoutCars);
+    const checkoutCars = this.props.checkoutCars;
     const car = checkoutCars.find((item: any) => item.id === carId);
     const { mainImageId, title: { model, subModel, make } } = car;
     window.open(`/checkout/contact-information?carId=${carId}&isSavedCheckout=true&mainImageId=${mainImageId}&model=${model}&subModel=${subModel}&make=${make}`, '_blank');
   };
 
-  private renderCheckouts = () => {
-    const { t, appStore: { language }, carsStore, imagesStore , PLACEHOLDER_IMAGE_SMALL_URL, checkoutStore } = this.props;
-    const checkoutCars = toJS(checkoutStore.checkoutCars);
-    if (!checkoutStore.isFetching) {
-      return checkoutCars.map((car: any) => {
-        const carId = _get(car, 'id');
-        const { mainImageId, title: { model, subModel, make } } = car;
-        const src = !!mainImageId && !!car.imagesCount
+  renderCheckouts = () => {
+    const { t, appStore: { language }, carsStore, imagesStore , PLACEHOLDER_IMAGE_SMALL_URL, checkoutCars } = this.props;
+    return checkoutCars.map((car: any) => {
+      const carId = _get(car, 'id');
+      const { mainImageId, title: { model, subModel, make } } = car;
+      const src = !!mainImageId && !!car.imagesCount
         ? imagesStore.getSupportedImageFormat(carId, mainImageId, 'small')
         : PLACEHOLDER_IMAGE_SMALL_URL;
-        const vehicleProps = {
-          ...car,
-          t,
-          language,
-          url: `/checkout/contact-information?carId=${carId}&isSavedCheckout=true&mainImageId=${mainImageId}&model=${model}&subModel=${subModel}&make=${make}`,
-          id: carId,
-          target: '_blank',
-          rel: 'noopener noreferrer',
-          showSlider: false,
-          showOfferBtn: true,
-          showFavoriteStar: false,
-          mainImageId,
-          priceSubMtl: !isMobileOnly ? t('vehicleProps:value.priceSub') : null,
-          src,
-          stats: {
-            imagesCount: _get(car, 'imagesCount'),
-            statsData: carsStore.aggStatsData.get(car.id)
-          },
-          dashboardButtonText: t('vehicleProps:title.toCheckoutCar'),
-          i18nPrefixForPriceRating: 'common:',
-          className: styles.wrapFavorites,
-          classButton: styles.favoriteBtn,
-          onDetailsClick: this.onCarSelectCheckout,
-          vehicleComponentName: 'favorite'
-        };
+      const vehicleProps = {
+        ...car,
+        t,
+        language,
+        mainImageId,
+        src,
+        url: `/checkout/contact-information?carId=${carId}&isSavedCheckout=true&mainImageId=${mainImageId}&model=${model}&subModel=${subModel}&make=${make}`,
+        id: carId,
+        target: '_blank',
+        rel: 'noopener noreferrer',
+        showSlider: false,
+        showOfferBtn: true,
+        showFavoriteStar: false,
+        priceSubMtl: !isMobileOnly ? t('vehicleProps:value.priceSub') : null,
+        stats: {
+          imagesCount: _get(car, 'imagesCount'),
+          statsData: carsStore.aggStatsData.get(car.id)
+        },
+        dashboardButtonText: t('vehicleProps:title.toCheckoutCar'),
+        i18nPrefixForPriceRating: 'common:',
+        className: styles.wrapFavorites,
+        classButton: styles.favoriteBtn,
+        onDetailsClick: this.onCarSelectCheckout,
+        vehicleComponentName: 'favorite'
+      };
 
-        return (
+      return (
           <div key={`checkoutCar${carId}`} className={styles.checkoutWrapItem}>
             <VehicleSmallCard {...vehicleProps} />
           </div>
-        );
-      });
-    }
+      );
+    });
   };
 
   render(): JSX.Element {
-    const { t, checkoutStore:{ checkoutCars, isFetching } } = this.props;
+    const { t, checkoutCars } = this.props;
+
     const sliderProps = {
       slidesToShow: 3,
       slidesToScroll: 1,
@@ -109,7 +101,7 @@ class CheckoutSection extends React.Component<ICheckoutSectionProps, {}> {
 
     return (
       <>
-        {!isFetching  ?
+        {checkoutCars?.length !== 0   ?
           <DashboardSection className={styles.checkoutSection} title={t('DashboardPage:checkoutTitle')}>
             {!isMobileOnly ?
               this.renderCheckouts()

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

@@ -1,6 +1,4 @@
 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';
@@ -19,42 +17,16 @@ interface IFavoriteSectionProps {
   imagesStore: any;
   t?: ITFunction;
   PLACEHOLDER_IMAGE_SMALL_URL: string;
-  pageNumberKey: any;
   LinkRouter: any;
+  favoriteCars: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);
+    const { t, appStore: { language }, carsStore, imagesStore, PLACEHOLDER_IMAGE_SMALL_URL, LinkRouter,favoriteCars } = this.props;
     return favoriteCars.map((car: any, key: any) => {
       const carId = _get(car, 'id');
       const mainImageId = _get(car, 'mainImageId');

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

@@ -1,8 +1,8 @@
-import React, { useState, useEffect, useMemo } from 'react';
-import debounce from 'lodash/debounce';
+import React, { useState, useEffect } from 'react';
 import FormattedNumber from '../../FormattedNumber/FormattedNumber';
 import { Slider } from '@mui/material';
 import { isMobileOnly } from 'react-device-detect';
+import { iOS } from '../../../framework/utils/CommonUtils';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 
 interface IRangeProps {
@@ -41,6 +41,7 @@ const Range: React.FC<IRangeProps> = ({
   maxFinancingFirstInstallment
 }: IRangeProps) => {
   const [rangeValue, setRangeValue] = useState<number | number[]>(0);
+  const isIOS = iOS();
 
   useEffect(
     () => {
@@ -50,13 +51,13 @@ const Range: React.FC<IRangeProps> = ({
   )
 
   const onChangeRange = (event: Event, value: number | number[]) => {
+    if (isIOS && event.type === 'mousedown') {
+      return;
+    }
     setRangeValue(value);
     onChange(event, value)
   }
 
-  // Debounced onChange event handler
-  const debouncedOnChange = useMemo(() => debounce(onChangeRange, 0), [onChangeRange]);
-
   const formttedValue = (value: number) => {
     return (
       <>
@@ -75,7 +76,7 @@ const Range: React.FC<IRangeProps> = ({
         valueLabelDisplay='auto'
         valueLabelFormat={formttedValue}
         value={rangeValue}
-        onChange={debouncedOnChange}
+        onChange={onChangeRange}
         sx={{
           color: '#005CCB'
         }}

package/source/framework/utils/CommonUtils.ts

@@ -463,9 +463,7 @@ export function getChipFilterValue(
     case 'SEATS':
     case 'CUBIC_CAPACITY':
       title = t(`SearchPage:filters.${chipFilterKey.toLocaleLowerCase()}`);
-      const from = !!chipFilterValue.from ? `${t('SearchPage:filters.from')} ${chipFilterValue.from}` : '';
-      const to = !!chipFilterValue.to ? `${t('SearchPage:filters.to')} ${chipFilterValue.to}` : '';
-      const fromTo = (from && to) ? `${chipFilterValue.from} - ${chipFilterValue.to}` : `${from || to}`;
+      const fromTo = `${chipFilterValue.from} - ${chipFilterValue.to}`;
       filterValue = `${title} ${fromTo}`;
       break;
 
@@ -620,3 +618,16 @@ export const convertUnixTimestampToDays = (unixTimestamp: number) => {
 export const priceParse = (value: any) => {
   return !!value ? Number.parseFloat(value) : null;
 };
+
+// iPad on iOS 13 detection
+export const iOS = () => {
+  return [
+    'iPad Simulator',
+    'iPhone Simulator',
+    'iPod Simulator',
+    'iPad',
+    'iPhone',
+    'iPod'
+  ].includes(navigator.platform)
+  || (navigator.userAgent.includes("Mac") && "ontouchend" in document)
+}