@bytebrand/fe-ui-core 4.2.178 → 4.2.180

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

@@ -15,6 +15,8 @@ interface IWithRouter {
   children?: JSX.Element;
   link?: string;
 }
+const getCheckoutCarListMock = jest.fn();
+
 const checkoutCars = [
   {
     parkedFor: 'N/A',
@@ -541,7 +543,7 @@ const checkoutCars = [
     seoText: ''
   }
 ];
-const getCarList = () => {
+const getCheckoutCarList = () => {
   return new Promise((resolve) => {
     resolve(checkoutCars);
   });
@@ -580,34 +582,35 @@ const mockProps = {
   appStore: { language:'en' },
   carsStore: { aggStatsData },
   imagesStore: { getSupportedImageFormat: jest.fn() },
-  UserActionsAPI:{ getCheckoutCarList:getCarList }
+  checkoutStore:{ checkoutCars, getCheckoutCarList:getCheckoutCarListMock }
 };
 
 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.UserActionsAPI.getCheckoutCarList()
-    .then((savedCheckoutDataList: any) => {
-      checkoutCarList = savedCheckoutDataList;
-      checkoutCarList.forEach((element:any) => {
-        expect(container).toHaveTextContent(element.title.make);
-      });
+    // let checkoutCarList:[] = [];
+    // mockProps.checkoutStore.getCheckoutCarList()
+    // .then((savedCheckoutDataList: any) => {
+    // checkoutCarList = mockProps.checkoutStore.checkoutCars;
+    mockProps.checkoutStore.checkoutCars.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.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'));
-    });
+    // 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'));
+  // });
   });
 
 });

package/package.json

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

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

@@ -4,17 +4,16 @@ 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 {
-  steps: [];
-  activeStep?: number;
-  handleStep?: (index: number) => () => void;
-  completed?: any;
+  checkoutStore: any;
   t?: (phrase: string) => {};
 }
 
-const CheckoutStepper: FunctionComponent<ICheckoutStepper> = ({ steps, activeStep, completed, handleStep, t }) => {
+const CheckoutStepper: FunctionComponent<ICheckoutStepper> = ({ checkoutStore, t }) => {
   const classes = useStyles();
+  const steps = toJS(checkoutStore.steps);
   return (
     <div className={`${classes.root} ${styles.stepperWrapper}`}>
       <Stepper
@@ -22,34 +21,34 @@ const CheckoutStepper: FunctionComponent<ICheckoutStepper> = ({ steps, activeSte
         nonLinear
         orientation={isMobileOnly ? 'horizontal' : 'vertical'}
         alternativeLabel={isMobileOnly}
-        activeStep={activeStep}>
+        activeStep={checkoutStore.activeStep}>
         {steps.map(({ title, pathname }, index) => {
           const labelRep = !!title && !isMobileOnly ? title.replace('-', '') : title;
           return (
             <Step key={pathname}
-              className={`${completed.has(steps[index].pathname) ? classes.isCompleted : ''}
-              ${completed.has(steps[index].pathname) ? classes.completeLine : ''}
-              ${activeStep === index && classes.activeLine}
+              className={`${checkoutStore.completed.has(steps[index].pathname) ? classes.isCompleted : ''}
+              ${checkoutStore.completed.has(steps[index].pathname) ? classes.completeLine : ''}
+              ${checkoutStore.activeStep === index && classes.activeLine}
               `}
-              >
+            >
               <StepButton
-                onClick={handleStep(index)}
+                onClick={checkoutStore.handleStep(index)}
                 classes={{
                   root: classes.buttonItem,
                   horizontal: classes.labelWrap,
                   vertical: classes.verticalWrap
                 }}
                 className={`
-                  ${activeStep === index ? classes.active : classes.default}
-                  ${completed.has(steps[index].pathname) && activeStep !== index && classes.completeStep}`}>
+                  ${checkoutStore.activeStep === index ? classes.active : classes.default}
+                  ${checkoutStore.completed.has(steps[index].pathname) && checkoutStore.activeStep !== index && classes.completeStep}`}>
                 <span>{labelRep}</span>
                 <Hidden xs sm md>
-                  {activeStep !== index && <IconSVG name='menuArrow' className={styles.menuArrow} customDimensions={false}/>}
-                  {!completed.has(steps[index].pathname) &&
+                  {checkoutStore.activeStep !== index && <IconSVG name='menuArrow' className={styles.menuArrow} customDimensions={false} />}
+                  {!checkoutStore.completed.has(steps[index].pathname) &&
                     <span
                       className={`
                         ${classes.minutes}
-                        ${completed.has(steps[index].pathname) && activeStep !== index && classes.completeStep}`}
+                        ${checkoutStore.completed.has(steps[index].pathname) && checkoutStore.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,83 +20,70 @@ 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() {
-    try {
-      const { UserActionsAPI } = this.props;
-      UserActionsAPI.getCheckoutCarList()
-        .then((savedCheckoutDataList: any) => {
-          this.setState({ checkoutCars: Object.values(savedCheckoutDataList) });
-        });
-    } catch (err) {
-      console.log('[CheckoutSection] err = ', err);
-    }
+    const { checkoutStore } = this.props;
+    checkoutStore.getCheckoutCarList();
   }
 
   onCarSelectCheckout = (carId?: string) => {
-    const car = this.state.checkoutCars.find((item: any) => item.id === carId);
+
+    const checkoutCars = toJS(this.props.checkoutStore.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 { 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'
-      };
+    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'
+        };
 
-      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 } = this.props;
-    const { checkoutCars } = this.state;
+    const { t, checkoutStore:{ checkoutCars, isFetching } } = this.props;
     const sliderProps = {
       slidesToShow: 3,
       slidesToScroll: 1,
@@ -122,7 +109,7 @@ class CheckoutSection extends React.Component<ICheckoutSectionProps, {}> {
 
     return (
       <>
-        {Array.isArray(checkoutCars) && checkoutCars.length ?
+        {!isFetching  ?
           <DashboardSection className={styles.checkoutSection} title={t('DashboardPage:checkoutTitle')}>
             {!isMobileOnly ?
               this.renderCheckouts()

package/source/components/UserDashboardPage/sections/OrderStatusSection/OrderStatusCar.tsx

@@ -55,6 +55,11 @@ const OrderStatusCar = ({
     { icon: 'handingOverDashboard', selector: 'selector_status_handing_over' }
   ];
 
+  const steps = cardItems.map((step) => {
+    const { selector } = step;
+    return selector;
+  })
+
   useEffect(
     () => {
       cardItems.map((step, index) => {
@@ -63,13 +68,12 @@ const OrderStatusCar = ({
           setActiveStep(index + 1);
         }
       });
-      // if (!!ref && !!ref.current) { TODO: fix scroll for active element for mobile
-      //   ref.current.scrollBy({
-      //     top: 0,
-      //     left: 156 * activeStep,
-      //     behavior: 'smooth'
-      //   });
-      // }
+      if (!!ref && !!ref.current) {
+        ref.current.scrollBy({
+          behavior: 'smooth',
+          left: 156 * steps.indexOf(status)
+        })
+      }
     },
     []
   );
@@ -100,7 +104,7 @@ const OrderStatusCar = ({
             </div>
           </div>
         </div>
-        <div className={styles.cardsSection}>
+        <div className={styles.cardsSection} ref={ref}>
           {cardItems.map((card, index) => {
             const { icon, selector } = card;
 
@@ -110,7 +114,6 @@ const OrderStatusCar = ({
 
             return (
               <OrderStatusCard
-                cardRef={selector === status ? ref : null}
                 title={t(`orderStatus.${selector}`)}
                 description={statusDescription}
                 icon={icon}

package/source/components/UserDashboardPage/sections/OrderStatusSection/OrderStatusCard.tsx

@@ -8,12 +8,11 @@ interface IOrderStatusCard {
   title?: string;
   description?: string;
   isDisabled?: boolean;
-  cardRef?: any;
   isActive?: boolean;
   isDone?: boolean;
 }
 
-const OrderStatusCard = ({ icon, title, description, isDisabled, cardRef, isActive, isDone }: IOrderStatusCard) => {
+const OrderStatusCard = ({ icon, title, description, isDisabled, isActive, isDone }: IOrderStatusCard) => {
   const orderReceivedCardClasses = classnames(
     styles.orderReceivedCard,
     { [styles.cardInProgress]: isActive }
@@ -27,7 +26,7 @@ const OrderStatusCard = ({ icon, title, description, isDisabled, cardRef, isActi
 
   return (
     <div className={styles.orderReceivedCardContainer}>
-      <div data-testid='orderStatusCard' className={orderReceivedCardClasses} ref={cardRef}>
+      <div data-testid='orderStatusCard' className={orderReceivedCardClasses}>
         <div className={styles.cardIcon}>
           <IconSVG disabled={isDisabled} customDimensions name={icon} width={87}/>
         </div>