@bytebrand/fe-ui-core 4.2.177 → 4.2.178

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

@@ -15,8 +15,6 @@ interface IWithRouter {
   children?: JSX.Element;
   link?: string;
 }
-const getCheckoutCarListMock = jest.fn();
-
 const checkoutCars = [
   {
     parkedFor: 'N/A',
@@ -543,7 +541,7 @@ const checkoutCars = [
     seoText: ''
   }
 ];
-const getCheckoutCarList = () => {
+const getCarList = () => {
   return new Promise((resolve) => {
     resolve(checkoutCars);
   });
@@ -582,35 +580,34 @@ const mockProps = {
   appStore: { language:'en' },
   carsStore: { aggStatsData },
   imagesStore: { getSupportedImageFormat: jest.fn() },
-  checkoutStore:{ checkoutCars, getCheckoutCarList:getCheckoutCarListMock }
+  UserActionsAPI:{ getCheckoutCarList:getCarList }
 };
 
 describe('CheckoutSection', () => {
   it('renders correctly', () => {
     const { container } = render(<CheckoutSection {...mockProps as any} />);
-    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) => {
-      expect(container).toHaveTextContent(element.title.make);
+    let checkoutCarList:[] = [];
+    mockProps.UserActionsAPI.getCheckoutCarList()
+    .then((savedCheckoutDataList: any) => {
+      checkoutCarList = savedCheckoutDataList;
+      checkoutCarList.forEach((element:any) => {
+        expect(container).toHaveTextContent(element.title.make);
+      });
     });
-    // });
   });
   it('should open checkout page with correct URL on car select', () => {
     const { getAllByRole } = render(<CheckoutSection {...mockProps as any} />);
-    // mockProps.checkoutStore.getCheckoutCarList()
-    // .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}`;
-    waitFor(() => expect(window.open).toHaveBeenCalledWith(expectedUrl, '_blank'));
-  // });
+    mockProps.UserActionsAPI.getCheckoutCarList()
+    .then((savedCheckoutDataList: any) => {
+      const checkoutButton = getAllByRole('link')[0];
+      fireEvent.click(checkoutButton);
+      const expectedUrl = `/checkout/contact-information?carId=${savedCheckoutDataList[0].id}&isSavedCheckout=true&mainImageId=${savedCheckoutDataList[0].mainImageId}&model=${savedCheckoutDataList[0].title.model}&subModel=${savedCheckoutDataList[0].title.subModel}&make=${savedCheckoutDataList[0].title.make}`;
+      waitFor(() => expect(window.open).toHaveBeenCalledWith(expectedUrl, '_blank'));
+    });
   });
 
 });

package/package.json

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

package/source/components/Checkout/CheckoutStepper/CheckoutStepper.tsx

@@ -4,16 +4,17 @@ import { useStyles } from './CheckoutStepperClasses';
 import styles from './CheckoutStepper.styl';
 import { Hidden } from 'react-grid-system';
 import { Stepper, Step, StepButton, IconSVG } from '../../../../common';
-import { toJS } from 'mobx';
 
 interface ICheckoutStepper {
-  checkoutStore: any;
+  steps: [];
+  activeStep?: number;
+  handleStep?: (index: number) => () => void;
+  completed?: any;
   t?: (phrase: string) => {};
 }
 
-const CheckoutStepper: FunctionComponent<ICheckoutStepper> = ({ checkoutStore, t }) => {
+const CheckoutStepper: FunctionComponent<ICheckoutStepper> = ({ steps, activeStep, completed, handleStep, t }) => {
   const classes = useStyles();
-  const steps = toJS(checkoutStore.steps);
   return (
     <div className={`${classes.root} ${styles.stepperWrapper}`}>
       <Stepper
@@ -21,34 +22,34 @@ const CheckoutStepper: FunctionComponent<ICheckoutStepper> = ({ checkoutStore, t
         nonLinear
         orientation={isMobileOnly ? 'horizontal' : 'vertical'}
         alternativeLabel={isMobileOnly}
-        activeStep={checkoutStore.activeStep}>
+        activeStep={activeStep}>
         {steps.map(({ title, pathname }, index) => {
           const labelRep = !!title && !isMobileOnly ? title.replace('-', '') : title;
           return (
             <Step key={pathname}
-              className={`${checkoutStore.completed.has(steps[index].pathname) ? classes.isCompleted : ''}
-              ${checkoutStore.completed.has(steps[index].pathname) ? classes.completeLine : ''}
-              ${checkoutStore.activeStep === index && classes.activeLine}
+              className={`${completed.has(steps[index].pathname) ? classes.isCompleted : ''}
+              ${completed.has(steps[index].pathname) ? classes.completeLine : ''}
+              ${activeStep === index && classes.activeLine}
               `}
-            >
+              >
               <StepButton
-                onClick={checkoutStore.handleStep(index)}
+                onClick={handleStep(index)}
                 classes={{
                   root: classes.buttonItem,
                   horizontal: classes.labelWrap,
                   vertical: classes.verticalWrap
                 }}
                 className={`
-                  ${checkoutStore.activeStep === index ? classes.active : classes.default}
-                  ${checkoutStore.completed.has(steps[index].pathname) && checkoutStore.activeStep !== index && classes.completeStep}`}>
+                  ${activeStep === index ? classes.active : classes.default}
+                  ${completed.has(steps[index].pathname) && activeStep !== index && classes.completeStep}`}>
                 <span>{labelRep}</span>
                 <Hidden xs sm md>
-                  {checkoutStore.activeStep !== index && <IconSVG name='menuArrow' className={styles.menuArrow} customDimensions={false} />}
-                  {!checkoutStore.completed.has(steps[index].pathname) &&
+                  {activeStep !== index && <IconSVG name='menuArrow' className={styles.menuArrow} customDimensions={false}/>}
+                  {!completed.has(steps[index].pathname) &&
                     <span
                       className={`
                         ${classes.minutes}
-                        ${checkoutStore.completed.has(steps[index].pathname) && checkoutStore.activeStep !== index && classes.completeStep}`}
+                        ${completed.has(steps[index].pathname) && activeStep !== index && classes.completeStep}`}
                     >
                       {steps[index].minutes}
                       &nbsp;

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

@@ -5,7 +5,7 @@ import styles from './CheckoutSection.styl';
 import { isMobileOnly } from 'react-device-detect';
 import Slider from 'react-slick';
 import { VehicleSmallCard } from '../../../../../common';
-import { toJS } from 'mobx';
+
 
 interface ITFunction {
   <T = string>(key: string, options?: object): T;
@@ -20,70 +20,83 @@ interface ICheckoutSectionProps {
   LinkRouter: any;
   PLACEHOLDER_IMAGE_SMALL_URL:string;
   UserActionsAPI:any;
-  checkoutStore:any;
 }
 
 class CheckoutSection extends React.Component<ICheckoutSectionProps, {}> {
+  state: {
+    checkoutCars: any[];
+  };
+
+  constructor(props: ICheckoutSectionProps) {
+    super(props);
+    this.state = {
+      checkoutCars: []
+    };
+  }
   componentDidMount() {
-    const { checkoutStore } = this.props;
-    checkoutStore.getCheckoutCarList();
+    try {
+      const { UserActionsAPI } = this.props;
+      UserActionsAPI.getCheckoutCarList()
+        .then((savedCheckoutDataList: any) => {
+          this.setState({ checkoutCars: Object.values(savedCheckoutDataList) });
+        });
+    } catch (err) {
+      console.log('[CheckoutSection] err = ', err);
+    }
   }
 
   onCarSelectCheckout = (carId?: string) => {
-
-    const checkoutCars = toJS(this.props.checkoutStore.checkoutCars);
-    const car = checkoutCars.find((item: any) => item.id === carId);
+    const car = this.state.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
-        ? 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 { checkoutCars } = this.state;
+    const { t, appStore: { language }, carsStore, imagesStore , PLACEHOLDER_IMAGE_SMALL_URL } = 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'
+      };
 
-        return (
-          <div key={`checkoutCar${carId}`} className={styles.checkoutWrapItem}>
-            <VehicleSmallCard {...vehicleProps} />
-          </div>
-        );
-      });
-    }
+      return (
+        <div key={`checkoutCar${carId}`} className={styles.checkoutWrapItem}>
+          <VehicleSmallCard {...vehicleProps} />
+        </div>
+      );
+    });
   };
 
   render(): JSX.Element {
-    const { t, checkoutStore:{ checkoutCars, isFetching } } = this.props;
+    const { t } = this.props;
+    const { checkoutCars } = this.state;
     const sliderProps = {
       slidesToShow: 3,
       slidesToScroll: 1,
@@ -109,7 +122,7 @@ class CheckoutSection extends React.Component<ICheckoutSectionProps, {}> {
 
     return (
       <>
-        {!isFetching  ?
+        {Array.isArray(checkoutCars) && checkoutCars.length ?
           <DashboardSection className={styles.checkoutSection} title={t('DashboardPage:checkoutTitle')}>
             {!isMobileOnly ?
               this.renderCheckouts()

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

@@ -390,8 +390,8 @@ class FiltersContainer extends React.Component<IFiltersContainerProps, {}> {
 
   onVehicleIdChange = (value: string) => {
     const { filters, changeFilterValue, search } = this.props;
-    const upperCaseValue = value.toLocaleUpperCase();
-    if (value.length === 6 || !value) {
+    const upperCaseValue = value.toLocaleUpperCase().trim();
+    if (upperCaseValue.length === 6 || !value) {
       this.onFilterChange('VEHICLE_ID', upperCaseValue);
       changeFilterValue('VEHICLE_ID', upperCaseValue);
       search(filters, 1, true);
@@ -434,7 +434,7 @@ class FiltersContainer extends React.Component<IFiltersContainerProps, {}> {
             value={VEHICLE_ID.value}
             onChange={this.onVehicleIdChange}
             size='custom'
-            placeholder='z.B: FCEE67'
+            placeholder={t('SearchPage:vehicleIdexample')}
           />
         </div>
         {this.renderFilters()}