@bytebrand/fe-ui-core 4.3.1 → 4.4.1

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

@@ -7,8 +7,9 @@ import styles from './OrderStatusSection.styl';
 import { Skeleton } from '@mui/material';
 
 import { getFormattedPrice } from '../../../../framework/utils/CommonUtils';
+import { fromUTCToDateString } from '../../../../framework/utils/DateUtils';
 
-interface TFunction {
+interface ITFunction {
   <T = string>(key: string, options?: object): T;
   <T = string>(keys: string[], options?: object): T;
 }
@@ -16,17 +17,19 @@ interface TFunction {
 interface IOrderStatusSection {
   getSupportedImageFormat: (id: string, mainImageId: string, size: 'small' | 'medium' | 'large') => string;
   redirectToUrl: (url: string) => void;
-  t: TFunction;
+  t: ITFunction;
   isFetching: boolean;
   withAdditionalInfo?: boolean; // for using on /account/my-order.
   orderedCars: any[]; // TODO: create interface for orderedCars, when the object is formatted by the backend
+  wonCars?: any[];
 }
 
 const OrderStatusSection = ({
   getSupportedImageFormat,
   t,
-  redirectToUrl, 
+  redirectToUrl,
   orderedCars,
+  wonCars,
   isFetching,
   withAdditionalInfo = false
 }: IOrderStatusSection) => {
@@ -41,126 +44,202 @@ const OrderStatusSection = ({
     if (!!addressObj) {
       Object.keys(addressObj).forEach((key) => {
         switch (key) {
-          case 'customerFirstname':
-          case 'customerLastname':
+          case 'firstname':
+          case 'lastname':
             addressString = `${addressString} ${addressObj[key]}`;
             break;
-          case 'deliveryPartner':
-          case 'customerStreet':
-          case 'deliveryStreet':
-          case 'customerZip':
-          case 'deliveryZip':
+          case 'partner':
+          case 'street':
+          case 'zip':
+          case 'number':
             if (!!addressString) {
               addressString = `${addressString}, ${addressObj[key]}`;
             } else {
               addressString = `${addressString} ${addressObj[key]}`;
             }
             break;
-          case 'customerCity':
-          case 'deliveryCity':
+          case 'city':
             addressString = `${addressString} ${addressObj[key]}`;
             break;
+          default: addressString = `${addressString} ${addressObj[key]}`;
         }
-      })
+      });
     }
     return addressString;
   };
 
   const getDataPriceItem = (value: number, label: string): {value: string, label: string} | [] => {
     if (!!value && value !== 0) {
-      return { value: getFormattedPrice(value, '$,.2f', ' €'), label };
+      return { label, value: getFormattedPrice(value, '$,.2f', ' €') };
+    }
+  };
+
+  const defaultCarProps = {
+    car: {
+      _id: '',
+      mainData: {
+        make: '',
+        model: '',
+        subModel: ''
+      },
+      metaData: {
+        mainImageId: ''
+      }
+    },
+    buyingType: '',
+    selfPickup: false,
+    paybackPeriod: 0,
+    monthlyInstallment: 0,
+    status: '',
+    request: '',
+    registration: false,
+    currentSalesPrice: 0,
+    deposit: 0,
+    preparationCost: 0,
+    licensePlateCost: 0,
+    registrationCost: 0,
+    transportationCost: 0,
+    customerAddress: {
+      customerFirstname: '',
+      customerLastname: '',
+      customerStreet: '',
+      customerZip: ''
+    },
+    deliveryAddress: {
+      deliveryPartner: '',
+      deliveryStreet: '',
+      deliveryZip: '',
+      deliveryCity: ''
     }
   }
 
-  const renderRequestedCars = () => {
+  const carPriceWithWarrantyTitle = (warranty: { warrantyPackage: string, warrantyCost: number, warrantyPeriod: number }) => {
+    if (!warranty || !warranty.warrantyCost) {
+      return t('MyOrderPage:carPrice');
+    }
+    const warrantyPackage = t(`MyOrderPage:${warranty.warrantyPackage}`);
+    const warrantyPeriod = t(`MyOrderPage:${warranty.warrantyPeriod}year`, { warrantyPeriod: warranty.warrantyPeriod });
+    const carPriceIncWarrantyTitle =
+      `${t('MyOrderPage:carPrice')} ${t('MyOrderPage:incWarranty', { warrantyPackage, warrantyPeriod })}`;
+    return carPriceIncWarrantyTitle;
+  };
+
+  const renderRequestedCars = (cars: any[] = []) => {
     return (
       <>
-        {!!orderedCars && orderedCars.map((orderedCar: any, index: number) => {
-          const { car: { _id } } = orderedCar;
-          const { car: { mainData: { make, model, subModel } } } = orderedCar;
-          const { car: { metaData: { mainImageId } }} = orderedCar;
-          const {
-            buyingType,
-            selfPickup,
-            paybackPeriod,
-            monthlyInstallment,
-            status,
-            request,
-            registration,
-            currentSalesPrice,
-            deposit,
-            preparationCost,
-            licensePlateCost,
-            registrationCost,
-            transportationCost,
-            customerAddress,
-            deliveryAddress
-          } = orderedCar;
-
-          const additionalOrderData = {
-            addressData: [
-              ...customerAddress ? [{ label: t('MyOrderPage:billingAddress'), value: getTransformAddressToString(customerAddress) }] : [],
-              ...deliveryAddress ? [{ label: t('MyOrderPage:vehicleDelivery'), value: getTransformAddressToString(deliveryAddress) }] : []
-            ],
-            carPriceData: [
-              ...currentSalesPrice ? [getDataPriceItem(currentSalesPrice, t('MyOrderPage:carPrice'))] : [],
-              ...preparationCost ? [getDataPriceItem(preparationCost, t('MyOrderPage:preparationCost'))] : [],
-              ...registrationCost ? [getDataPriceItem(registrationCost, t('MyOrderPage:vehicleRegistration'))] : [],
-              ...licensePlateCost ? [getDataPriceItem(licensePlateCost, t('MyOrderPage:licensePlates'))] : [],
-              ...transportationCost ? [getDataPriceItem(transportationCost, t('MyOrderPage:delivery'))] : [],
-              ...buyingType !== 'buy' ? [
-                ...monthlyInstallment ? [
-                  { 
-                    label: t(`MyOrderPage:${buyingType}Rate`),
-                    value: t('MyOrderPage:monthlyInstallment', { monthlyInstallment: getFormattedPrice(monthlyInstallment, '$,.2f', '', '€') })
-                  }] : [],
-                ...paybackPeriod ? [{ label: t('MyOrderPage:runningTime'), value: t('MyOrderPage:paybackPeriod', { paybackPeriod })}] : [],
-                ...deposit ? [getDataPriceItem(deposit, t('MyOrderPage:deposit'))] : []
-              ] : []
-            ],
-            overallRate: {
-              label: t('MyOrderPage:yourOverallRate'),
-              value: buyingType === 'buy' ? currentSalesPrice : monthlyInstallment
-            }
-          };
-
-          const additionalOrderInfoProps = {
-            t,
-            additionalOrderData,
-            redirectToUrl,
-            buyingType
-          };
-
-          const imageUrl = getSupportedImageFormat(_id, mainImageId, 'small');
-
-          const orderStatusCarProps = {
-            make,
-            model,
-            subModel,
-            buyingType,
-            imageUrl,
-            selfPickup,
-            paybackPeriod,
-            monthlyInstallment,
-            status,
-            t,
-            request,
-            registration,
-            currentSalesPrice,
-            onClick: () => onDetailsClick(_id)
-          };
+        {!!cars && cars.map((orderedCarData: any, index: number) => {
+          if (orderedCarData && typeof orderedCarData.car === 'object') {
+            const orderedCar = { ...defaultCarProps, ...orderedCarData };
+            const { car: { _id } } = orderedCar;
+            const { car: { mainData: { make, model, subModel } } } = orderedCar;
+            const { car: { metaData: { mainImageId } } } = orderedCar;
+            const {
+              buyingType,
+              selfPickup,
+              paybackPeriod,
+              monthlyInstallment,
+              status,
+              request,
+              registration,
+              currentSalesPrice,
+              totalPrice,
+              deposit,
+              preparationCost,
+              licensePlateCost,
+              registrationCost,
+              transportationCost,
+              customerAddress,
+              deliveryAddress,
+              firstRate,
+              paymentProtectionInsuranceCost,
+              wonStatus,
+              warranty,
+              deliveryDate,
+              isLicensePlateFee,
+              delivery,
+              extrasSumCost
+            } = orderedCar;
 
-          const title = <span>
-            {t('orderStatus.title')}:&nbsp;
-            <span className={styles.orderStatus}>{t(`orderStatus.${status}`)}</span>
-          </span>;
+            const transformedDeliveryDate = !!deliveryDate ? `${t('MyOrderPage:deliveredOn')} ${fromUTCToDateString(deliveryDate)}` : null;
 
-          return (
-            <DashboardSection key={index} title={title}>
-              <OrderStatusCar  { ...orderStatusCarProps } />
-              {withAdditionalInfo ? <AdditionalOrderInfo { ...additionalOrderInfoProps } /> : null}
-            </DashboardSection>
-          );
+            const currentSalesPriceWithWarranty = !!warranty && !!warranty.warrantyCost ? currentSalesPrice + warranty.warrantyCost : currentSalesPrice;
+  
+            const additionalOrderData = {
+              addressData: [
+                ...customerAddress ? [{ label: t('MyOrderPage:billingAddress'), value: getTransformAddressToString(customerAddress) }] : [],
+                ...deliveryAddress ? [{ label: t('MyOrderPage:vehicleDelivery'), value: selfPickup ? t('MyOrderPage:selfPickup') : getTransformAddressToString(deliveryAddress) }] : []
+              ],
+              carPriceData: [
+                ...currentSalesPrice ? [getDataPriceItem(currentSalesPriceWithWarranty, carPriceWithWarrantyTitle(warranty))] : [],
+                ...preparationCost ? [getDataPriceItem(preparationCost, t('MyOrderPage:preparationCost'))] : [],
+                ...extrasSumCost ? [getDataPriceItem(extrasSumCost, t('MyOrderPage:extrasSumCost'))] : [],
+                ...registrationCost && registration ? [getDataPriceItem(registrationCost, t('MyOrderPage:vehicleRegistration'))] : [],
+                ...licensePlateCost && isLicensePlateFee ? [getDataPriceItem(licensePlateCost, t('MyOrderPage:licensePlates'))] : [],
+                ...!!transportationCost && delivery ? [getDataPriceItem(transportationCost, t('MyOrderPage:delivery'))] : [],
+                ...paymentProtectionInsuranceCost ? [getDataPriceItem(paymentProtectionInsuranceCost, t('MyOrderPage:paymentProtectionInsuranceCost'))]: [],
+                ...firstRate ? [getDataPriceItem(firstRate, t('MyOrderPage:firstRate'))] : [],
+                ...buyingType !== 'buy' ? [
+                  ...monthlyInstallment ? [
+                    {
+                      label: t(`MyOrderPage:${buyingType}Rate`),
+                      value: t('MyOrderPage:monthlyInstallment', { monthlyInstallment: getFormattedPrice(monthlyInstallment, '$,.2f', '', '€') })
+                    }] : [],
+                  ...paybackPeriod ? [{ label: t('MyOrderPage:runningTime'), value: t('MyOrderPage:paybackPeriod', { paybackPeriod }) }] : [],
+                  ...deposit ? [getDataPriceItem(deposit, t('MyOrderPage:deposit'))] : []
+                ] : []
+              ],
+              overallRate: {
+                label: (buyingType === 'buy' || wonStatus === 'won') ? t('MyOrderPage:yourOverallPrice') : t('MyOrderPage:yourOverallRate'),
+                value: buyingType === 'buy' || wonStatus === 'won' ? totalPrice : monthlyInstallment
+              }
+            };
+  
+            const additionalOrderInfoProps = {
+              t,
+              additionalOrderData,
+              redirectToUrl,
+              buyingType
+            };
+  
+            const imageUrl = getSupportedImageFormat(_id, mainImageId, 'small');
+  
+            const orderStatusCarProps = {
+              make,
+              model,
+              subModel,
+              buyingType,
+              imageUrl,
+              selfPickup,
+              paybackPeriod,
+              monthlyInstallment,
+              status,
+              t,
+              request,
+              registration,
+              currentSalesPrice,
+              onClick: () => onDetailsClick(_id),
+              additionalOrderInfoProps,
+              wonStatus,
+              transformedDeliveryDate,
+              delivery
+            };
+  
+            const title = wonStatus === 'pending' ? <span>
+                {t('orderStatus.title')}:&nbsp;
+                <span className={styles.orderStatus}>{t(`orderStatus.${status}`)}</span>
+              </span>
+              : <span>{t('orderStatus.myOrder')}</span>;
+  
+            return (
+              <DashboardSection key={index} title={title}>
+                <OrderStatusCar { ...orderStatusCarProps } />
+                {withAdditionalInfo && wonStatus === 'pending' ?
+                  <AdditionalOrderInfo { ...additionalOrderInfoProps } />
+                  : null
+                }
+              </DashboardSection>
+            );  
+          }
         })}
       </>
     );
@@ -168,11 +247,14 @@ const OrderStatusSection = ({
 
   return (
     <>
-      {isFetching ? 
+      {isFetching ?
         <div className={styles.skeletonBlock}>
           <Skeleton animation='wave' variant='rectangular' width='100%' />
         </div>
-        : renderRequestedCars()
+        : <>
+          {renderRequestedCars(orderedCars)}
+          {renderRequestedCars(wonCars)}
+        </>
       }
     </>
   );

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

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import styles from './RequestedCarsSection.styl';
 
 import Slider from 'react-slick';
@@ -10,11 +10,8 @@ import { getFormattedPrice } from '../../../../framework/utils/CommonUtils';
 // import { history } from '../../../../../AppRouter';
 import Button from '../../../_common/Button/Button';
 
-interface IWithRouter {
-  children?: JSX.Element;
-}
 // tslint:disable-next-line:interface-name
-interface TFunction {
+interface ITFunction {
   <T = string>(key: string, options?: object): T;
   <T = string>(keys: string[], options?: object): T;
 }
@@ -23,7 +20,7 @@ interface IRequestedCarsSection {
   redirectToCar: (id: string) => void;
   getSupportedImageFormat: (id: string, mainImageId: string, size: 'small' | 'medium' | 'large') => string;
   requestedCars: any[];
-  t: TFunction;
+  t: ITFunction;
   LinkRouter:any;
   // initHotjar:() => void;
 }
@@ -39,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;
@@ -123,4 +120,5 @@ const RequestedCarsSection = ({ t, getSupportedImageFormat, requestedCars, redir
     </>
   );
 };
+
 export default RequestedCarsSection;

package/source/components/Vehicle/VehicleFormattedPrice/VehicleFormattedPrice.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { useEffect, useRef, useCallback } from 'react';
 import classnames from 'classnames';
 import FormattedNumber from '../../FormattedNumber/FormattedNumber';
 import styles from './VehicleFormattedPrice.styl';
@@ -23,6 +23,7 @@ export interface IVehiclePriceProps {
   size?: 'small' | 'semimedium' | 'medium' | 'large';
   disableStyles?: boolean;
   disablePrice?: boolean;
+  dynamicFontSize?: string;
 
   // FormattedNumber props
   toRound?: boolean;
@@ -34,13 +35,36 @@ export interface IVehiclePriceProps {
 }
 
 const VehicleFormattedPrice: React.FunctionComponent<IVehiclePriceProps> = (props) => {
+  const textRef = useRef(null);
+
+  const updateFontSize = useCallback(() => {
+    if (price && dynamicFontSize && textRef.current) {
+      const textWidth = textRef.current.getBoundingClientRect().width;
+      const priceLength = Math.round(price).toString().length;
+      if (textWidth > 110) {
+        if (dynamicFontSize === 'small') {
+          const newSize = Math.min(60, 165 / priceLength);
+          textRef.current.style.fontSize = `${newSize}px`;
+        } else {
+          const newSize = Math.min(60, (165 / priceLength) + 6);
+          textRef.current.style.fontSize = `${newSize}px`;
+        }
+
+      }
+    }
+  }, [props.price, props.dynamicFontSize]);
+
+  useEffect(() => {
+    updateFontSize();
+  }, [updateFontSize]);
+
   function renderUnit(): React.ReactNode {
     const { postfix, unit, unitClassName } = props;
     return (
-    <span className={classnames(styles.unit, unitClassName)}>
-      &nbsp;{unit}
-      {postfix ? renderPostfix() : ''}
-    </span>);
+      <span className={classnames(styles.unit, unitClassName)}>
+        &nbsp;{unit}
+        {postfix ? renderPostfix() : ''}
+      </span>);
   }
 
   function renderUnitMonthly(): React.ReactNode {
@@ -78,7 +102,7 @@ const VehicleFormattedPrice: React.FunctionComponent<IVehiclePriceProps> = (prop
   // FormattedNumber props
   const {
     unit, sub, numbersAfterDot, toRound, numberContainerClassName,
-    afterCommaClassName, beforeCommaClassName, disableFormatting, disablePrice
+    afterCommaClassName, beforeCommaClassName, disableFormatting, disablePrice, dynamicFontSize
   } = props;
 
   const decimalsClass = classnames(afterCommaClassName, styles.decimals);
@@ -94,6 +118,7 @@ const VehicleFormattedPrice: React.FunctionComponent<IVehiclePriceProps> = (prop
     disableFormatting,
     numbersAfterDot,
     toRound,
+    dynamicFontSize,
     beforeCommaClassName,
     value: price,
     className: numberContainerClassName,
@@ -101,7 +126,7 @@ const VehicleFormattedPrice: React.FunctionComponent<IVehiclePriceProps> = (prop
   };
 
   return (
-    <span className={containerClass}>
+    <span className={containerClass} ref={textRef}>
       {<FormattedNumber {...formattedNumberProps} />}
       {(unit && !monthly) && renderUnit()}
       {(monthly && unit) && renderUnitMonthly()}
@@ -125,6 +150,7 @@ VehicleFormattedPrice.defaultProps = {
   unitClassName: '',
   postfixClassName: '',
   subClassName: '',
+  dynamicFontSize: '',
   sub: '',
   // FormattedNumber props
   toRound: false,

package/source/components/VehicleDetailedSidebar/VehicleDetailedSidebar.styl

@@ -1,7 +1,7 @@
 @import '../../theme/mixins.styl'
 
 .detailedInfo
-  padding: 15px 15px 7px 15px
+  padding: 15px 15px 0px 15px
   width: 100%
   position: relative
   background-color: white
@@ -26,4 +26,12 @@
 
 .highlights
   padding-top: 0;
-  margin-top: 6px;
+  margin-top: 6px;
+
+.skeletonInfoContainer:not(:first-child)
+  margin-top: 6px
+
+.skeletonInfoContainer
+  [class*='MuiSkeleton-root']
+    transform: none
+    height: 309px

package/source/components/VehicleDetailedSidebar/VehicleDetailedSidebar.tsx

@@ -9,6 +9,10 @@ import styles from './VehicleDetailedSidebar.styl';
 import { vehicleProps } from '../../locales/data';
 import { IVehicleDetailedSidebarProps } from '../../framework/types/types';
 import DealerInfo from '../Alternative/DealerInfo';
+import { Skeleton } from '@mui/material';
+
+declare global {
+}
 
 const VehicleDetailedSidebar: FunctionComponent<IVehicleDetailedSidebarProps> = (props) => {
   const {
@@ -24,9 +28,9 @@ const VehicleDetailedSidebar: FunctionComponent<IVehicleDetailedSidebarProps> =
     setActiveTab,
     carLoaded,
     originUrl,
-    // isAlternative,
     infoSections,
-    onCurrentSalesPriceChange
+    onCurrentSalesPriceChange,
+    isFetching
   } = props;
   const [offerBlockOpen, setOfferBlockOpen] = useState(false);
   const onAdjustRateClick = () => setOfferBlockOpen(!offerBlockOpen);
@@ -129,14 +133,15 @@ const VehicleDetailedSidebar: FunctionComponent<IVehicleDetailedSidebarProps> =
 
   return (
     <>
-      <div className={styles.detailedInfo}>
-        <Title {...titleProps} />
-        <Price {...priceProps} />
-        <Price {...priceProps} isSticky={true} />
-        {props.children}
-      </div>
-      <div>
-        {isAlternativeType &&
+      {!isFetching ? <div className={styles.detailedInfo}>
+          <Title {...titleProps} />
+          <Price {...priceProps} />
+          <Price {...priceProps} isSticky={true} />
+          {}
+          {props.children}
+        </div> : <div className={styles.skeletonInfoContainer}><Skeleton /></div>
+      }
+      {!isFetching ? <div>{isAlternativeType &&
           <DealerInfo
             t={t}
             infoSections={infoSections}
@@ -146,10 +151,12 @@ const VehicleDetailedSidebar: FunctionComponent<IVehicleDetailedSidebarProps> =
             currentSalesPrice={currentSalesPrice}
             onCurrentSalesPriceChange={onCurrentSalesPriceChange}
           />}
-      </div>
-      <Hidden xs sm md>
-        <div className={`${styles.detailedInfo} ${styles.highlights}`}>{carLoaded && <Properties {...propertiesProps} />}</div>
-      </Hidden>
+        </div> : <div className={styles.skeletonInfoContainer}><Skeleton /></div>
+      }
+      {!isFetching ? <Hidden xs sm md>
+          <div className={`${styles.detailedInfo} ${styles.highlights}`}>{carLoaded && <Properties {...propertiesProps} />}</div>
+        </Hidden> : <div className={styles.skeletonInfoContainer}><Skeleton /></div>
+      }
     </>
   );
 };

package/source/components/VehicleDetailedSidebar/partials/Price.styl

@@ -20,4 +20,8 @@
   transition: 0.45s;
   transition-timing-function: ease-out;
   transform: translateY(0);
-  opacity: 1;
+  opacity: 1;
+  box-shadow: 0px 5px 12px #4c4e64d1;
+
+.tabContent
+  padding-bottom: 7px

package/source/components/VehicleDetailedSidebar/partials/Price.tsx

@@ -21,7 +21,8 @@ const Price: React.FunctionComponent<IVehicleDetailedSidebarPriceProps> = ({
   const tabsProps = {
     tabsTitles,
     onTabPriceSelect,
-    priceTabActiveIndex
+    priceTabActiveIndex,
+    tabContentClassName: styles.tabContent
   };
 
   return (

package/source/components/VehicleDetailedSidebar/partials/PriceContent.styl

@@ -1,7 +1,7 @@
 @import '../../../theme/mixins.styl';
 
 .newFinancingPriceWrapper
-  width: 100%
+  width: 159px
   display: flex
   align-items: flex-start;
   color: $lightGreen;
@@ -10,7 +10,7 @@
     font-size: 60px;
     display flex;
     line-height: .8;
-    margin 8px 0 0 16px;
+    margin 8px 0 0 10px;
   [class^="VehicleFormattedPrice__decimals"], [class^="VehicleFormattedPrice__unit"]
     font-size: 16px !important;
     transform: none !important;
@@ -18,13 +18,14 @@
 .tabContentPaddingForBuy
   .newFinancingPriceWrapper
     [class*="VehicleFormattedPrice__large"]
-      font-size: 40px;
       margin-left: 0;
     +media-phone-only()
       [class*="VehicleFormattedPrice__large"]
-        font-size: 45px;
         margin-left: 3px;
 
+
+
+
 .tabContentPadding
   padding: 10px 10px 10px 10px;
   flex-direction: row
@@ -110,4 +111,14 @@
   transform: rotate(180deg);
 
 .wrapper
-  padding-right: 15px;
+  +media-tablet-landscape-up()
+   padding-right: 15px;
+
+.priceFontSizeSmall
+  .priceInfoLabel
+    margin-top:8px!important 
+  
+
+.tabContentPaddingForBuy.priceFontSizeSmall
+  .financingPriceItem
+      display: flex;