@bytebrand/fe-ui-core 4.3.0 → 4.4.0

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

@@ -0,0 +1,38 @@
+@import '../../../../theme/mixins.styl'
+
+.checkoutSection
+  padding: 0;
+  box-sizing: border-box;
+  max-width: calc(100vw - 32px);
+  // padding: 16px 16px 16px 22px;
+
+  +media-tablet-landscape-up()
+    max-width: 1100px;
+    padding: 0;
+
+  [class*='RecentlySection__wrapVehicleSmallCard']
+    max-width: calc(100vw - 32px);
+    box-sizing: border-box;
+
+    +media-tablet-up()
+      max-width: calc(50vw - 64px);
+
+    +media-tablet-landscape-up()
+      max-width: 346px;
+
+.checkoutWrapItem
+  & + &
+    border-top: 1px solid rgba(76,78,100,0.12);
+
+.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;

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

@@ -0,0 +1,120 @@
+import * as React from 'react';
+import _get from 'lodash/get';
+import DashboardSection from '../../../containers/DasboardSection/DashboardSection';
+import styles from './CheckoutSection.styl';
+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;
+  <T = string>(keys: string[], options?: object): T;
+}
+
+interface ICheckoutSectionProps {
+  carsStore: any;
+  appStore: any;
+  imagesStore: any;
+  t?: ITFunction;
+  LinkRouter: any;
+  PLACEHOLDER_IMAGE_SMALL_URL:string;
+  checkoutCars?:any;
+}
+
+class CheckoutSection extends React.Component<ICheckoutSectionProps, {}> {
+  onCarSelectCheckout = (carId?: string) => {
+    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');
+  };
+
+  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,
+        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 (
+          <div key={`checkoutCar${carId}`} className={styles.checkoutWrapItem}>
+            <VehicleSmallCard {...vehicleProps} />
+          </div>
+      );
+    });
+  };
+
+  render(): JSX.Element {
+    const { t, checkoutCars } = this.props;
+
+    const sliderProps = {
+      slidesToShow: 3,
+      slidesToScroll: 1,
+      initialSlide: 2,
+      dots: false,
+      arrow: false,
+      mobileFirst: true,
+      responsive: [
+        {
+          breakpoint: 991,
+          settings: { slidesToShow: 3 }
+        },
+        {
+          breakpoint: 767,
+          settings: { slidesToShow: 2 }
+        },
+        {
+          breakpoint: 574,
+          settings: { slidesToShow: 1 }
+        }
+      ]
+    };
+
+    return (
+      <>
+        {checkoutCars?.length !== 0   ?
+          <DashboardSection className={styles.checkoutSection} title={t('DashboardPage:checkoutTitle')}>
+            {!isMobileOnly ?
+              this.renderCheckouts()
+              : <Slider {...sliderProps}>
+                  {this.renderCheckouts()}
+                </Slider>
+            }
+          </DashboardSection>
+          : false
+        }
+      </>
+    );
+  }
+}
+
+export default CheckoutSection;

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,84 @@
+import * as React from 'react';
+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;
+  LinkRouter: any;
+  favoriteCars:any;
+}
+
+class FavoriteSection extends React.Component<IFavoriteSectionProps, {}> {
+
+  onCarSelectFavorite = (url: string) => window.open(`/search/vehicle/${url}`, '_blank');
+
+  private renderFavorites = () => {
+    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');
+      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/OrderStatusSection/AdditionalOrderInfo.styl

@@ -2,7 +2,7 @@
 @import '../../../../theme/mixins.styl'
 
 .container
-  padding: 8px 8px 16px
+  padding: 8px 8px 0px
   border-top: 1px solid rgba(76,78,100,0.12);
 
   +media-tablet-landscape-up()
@@ -28,6 +28,10 @@
     top: 0;
     left: -16px;
 
+  .overallRate
+    border-top: 1px solid rgba(76,78,100,0.12)
+    padding-top: 15px
+
 .labelText
   color: $black50
   font-size: 14px
@@ -40,6 +44,7 @@
   padding-bottom: 8px
   grid-area: addresses
   display: grid
+  row-gap: 12px
 
 .orderPriceSection
   grid-area: orderPrice
@@ -88,4 +93,8 @@
   font-size: 14px
 
 .montlyUnit
-  font-size: 8px
+  font-size: 8px
+
+.priceValue
+  text-align: right
+  min-width 100px

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

@@ -5,7 +5,7 @@ import VehicleFormattedPrice from '../../../Vehicle/VehicleFormattedPrice/Vehicl
 import Button from '../../../_common/Button/Button';
 import classNames from 'classnames';
 
-import { TFunction } from '../../../../framework/types/types';
+import { ITFunction } from '../../../../framework/types/types';
 
 interface IAdditionalOrderData {
   addressData: ({ value: string; label: string; })[];
@@ -14,7 +14,7 @@ interface IAdditionalOrderData {
 }
 
 interface IAdditionalOrderInfo {
-  t: TFunction;
+  t: ITFunction;
   additionalOrderData: IAdditionalOrderData;
   redirectToUrl: (url: string) => void;
   buyingType: string;
@@ -29,8 +29,8 @@ const AdditionalOrderInfo = ({ t, additionalOrderData, redirectToUrl, buyingType
 
   const supportSectionClassnames = classNames(
     styles.customerSuport,
-    {[styles.supportSectionBorder]: addressData.length > 0}
-  )
+    { [styles.supportSectionBorder]: addressData.length > 0 }
+  );
 
   return (
     <div className={styles.container}>
@@ -55,7 +55,7 @@ const AdditionalOrderInfo = ({ t, additionalOrderData, redirectToUrl, buyingType
               return (
                 <div key={label} className={styles.flexContainer}>
                   <div className={styles.labelText}>{label}</div>
-                  <div className={styles.labelText}>{value}</div>
+                  <div className={classNames(styles.labelText, styles.priceValue)}>{value}</div>
                 </div>
               );
             }

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

@@ -1,11 +1,12 @@
 import React, { useRef, useEffect, useState } from 'react';
 import styles from './OrderStatusSection.styl';
 import OrderStatusCard from './OrderStatusCard';
-import Image from '../../../_common/Image/Image';
+// import Image from '../../../_common/Image/Image';
 import { getFormattedPrice } from '../../../../framework/utils/CommonUtils';
+import AdditionalOrderInfo from './AdditionalOrderInfo';
 
 // tslint:disable-next-line:interface-name
-interface TFunction {
+interface ITFunction {
   <T = string>(key: string, options?: object): T;
   <T = string>(keys: string[], options?: object): T;
 }
@@ -20,11 +21,16 @@ interface IOrderStatusCar {
   paybackPeriod?: number;
   monthlyInstallment?: number;
   status?: string;
-  t: TFunction;
+  t: ITFunction;
   request: string;
   registration: boolean;
   currentSalesPrice: number;
   onClick: () => void;
+  isFinishedOrder?: boolean;
+  additionalOrderInfoProps?: any;
+  wonStatus?: string;
+  transformedDeliveryDate?: string | null;
+  delivery?: boolean;
 }
 
 const OrderStatusCar = ({
@@ -41,7 +47,11 @@ const OrderStatusCar = ({
   request,
   registration,
   currentSalesPrice,
-  onClick
+  onClick,
+  additionalOrderInfoProps,
+  wonStatus,
+  transformedDeliveryDate,
+  delivery
 }: IOrderStatusCar) => {
   const ref = useRef(null);
   const [activeStep, setActiveStep] = useState(0); // 0 - when we have no active steps
@@ -50,11 +60,16 @@ const OrderStatusCar = ({
     { icon: 'orderReceivedDashboard', selector: 'selector_status_order_received' },
     { icon: 'preparaionDashboard', selector: 'selector_status_preparation' },
     { icon: 'registrationDashboard', selector: 'selector_status_registration' },
-    selfPickup ? { icon: 'pickupDashboard', selector: 'selector_status_pick_up' }
+    selfPickup || !delivery ? { icon: 'pickupDashboard', selector: 'selector_status_pick_up' }
     : { icon: 'deliveryDashboard', selector: 'selector_status_delivery' },
     { icon: 'handingOverDashboard', selector: 'selector_status_handing_over' }
   ];
 
+  const steps = cardItems.map((step) => {
+    const { selector } = step;
+    return selector;
+  })
+
   useEffect(
     () => {
       cardItems.map((step, index) => {
@@ -63,13 +78,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 && typeof ref.current.scrollBy === 'function') {
+        ref.current.scrollBy({
+          behavior: 'smooth',
+          left: 156 * steps.indexOf(status)
+        })
+      }
     },
     []
   );
@@ -90,38 +104,43 @@ const OrderStatusCar = ({
               <img data-testid='car-image' src={imageUrl}/>
             </div>
             <div className={styles.requestId}>{request}</div>
-            <div className={styles.carPayment} >
-              {t(`buyingType.${buyingType}`)},&nbsp;
-              {buyingType !== 'buy' && `${t('paybackPeriod', { paybackPeriod })},`}&nbsp;
-              {buyingType === 'buy' ?
-                t('currentSalesPrice', { currentSalesPrice: getFormattedPrice(currentSalesPrice) })
-                : t('monthlyInstallment', { monthlyInstallment: getFormattedPrice(monthlyInstallment, '$,.2f') })
+            <div className={styles.carPayment}>
+              {wonStatus === 'won' && !!transformedDeliveryDate ? transformedDeliveryDate
+              : <>
+                  {t(`buyingType.${buyingType}`)},&nbsp;
+                  {buyingType !== 'buy' && `${t('paybackPeriod', { paybackPeriod })},`}&nbsp;
+                  {buyingType === 'buy' ?
+                    t('currentSalesPrice', { currentSalesPrice: getFormattedPrice(currentSalesPrice) })
+                    : t('monthlyInstallment', { monthlyInstallment: getFormattedPrice(monthlyInstallment, '$,.2f') })
+                  }
+                </>
               }
             </div>
           </div>
         </div>
-        <div className={styles.cardsSection}>
-          {cardItems.map((card, index) => {
-            const { icon, selector } = card;
+        {wonStatus === 'won' ? <AdditionalOrderInfo { ...additionalOrderInfoProps } />
+          : <div className={styles.cardsSection} ref={ref}>
+              {cardItems.map((card, index) => {
+                const { icon, selector } = card;
 
-            const statusDescription = !registration && index === 2 ?
-                                      t('orderStatus.independentRegistration') :
-                                      t(`orderStatus.${selector}_desc`);
+                const statusDescription = !registration && index === 2 ?
+                                          t('orderStatus.independentRegistration') :
+                                          t(`orderStatus.${selector}_desc`);
 
-            return (
-              <OrderStatusCard
-                cardRef={selector === status ? ref : null}
-                title={t(`orderStatus.${selector}`)}
-                description={statusDescription}
-                icon={icon}
-                key={index}
-                isActive={index + 1 === activeStep}
-                isDisabled={index + 1 > activeStep}
-                isDone={index + 1 < activeStep}
-              />
-            );
-          })}
-        </div>
+                return (
+                  <OrderStatusCard
+                    title={t(`orderStatus.${selector}`)}
+                    description={statusDescription}
+                    icon={icon}
+                    key={index}
+                    isActive={index + 1 === activeStep}
+                    isDisabled={index + 1 > activeStep}
+                    isDone={index + 1 < activeStep}
+                  />
+                );
+              })}
+            </div>
+        }
       </div>
     </div>
   );

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

@@ -13,7 +13,7 @@ interface IOrderStatusCard {
   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 +27,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>