@bytebrand/fe-ui-core 4.2.251 → 4.3.1

package/source/components/SearchWidgetsMobile/InteriorWidget/InteriorWidget.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import InteriorColor from '../../SearchFilters/filters/InteriorColor';
 import InteriorMaterial from '../../SearchFilters/filters/InteriorMaterial';
 

package/source/components/SearchWidgetsMobile/SafetyWidget/SafetyWidget.tsx

@@ -22,7 +22,7 @@ export interface ISafetyWidget {
 const AIRBAG_KEY = 'AIRBAG';
 
 const SafetyWidget = (props: ISafetyWidget) => {
-  const { ASSISTANTS, AIRBAG, PARKING_ASSISTANTS, THEFT_PROTECTION, HIGHLIGHTS, onFilterChange, t } = props;
+  const { ASSISTANTS, AIRBAG, PARKING_ASSISTANTS, THEFT_PROTECTION, HIGHLIGHTS, onFilterChange, onDropDownFocus, t } = props;
   const onCheckboxClick = (fieldName: string, categoryName: string, values: string[]) => {
     const index = values.indexOf(fieldName);
 
@@ -40,11 +40,11 @@ const SafetyWidget = (props: ISafetyWidget) => {
     return onFilterChange(AIRBAG_KEY, values);
   };
 
-  // const onDropdownFocus = () => {
-  //   if (onDropDownFocus) {
-  //     onDropDownFocus(AIRBAG_KEY);
-  //   }
-  // };
+  const onDropdownFocus = () => {
+    if (onDropDownFocus) {
+      onDropDownFocus(AIRBAG_KEY);
+    }
+  };
 
   const getOptions = (_: string, options: any) => {
     const { aggregation } = AIRBAG;

package/source/components/Stepper/Stepper.tsx

@@ -12,15 +12,14 @@ export interface IProps {
   children: React.ReactElement<IStepProps>[];
   onStepChange?: (nextStep: number) => void;
   className?: string;
-  completed?: boolean;
 }
 
 const defaultStepsDivider: React.ReactElement<IStepsDividerProps> = <StepsDivider/>;
 
 const Stepper: React.FunctionComponent<IProps> = ({ currentStep, nonLinear, stepsDivider = defaultStepsDivider, onStepChange, children, className }) => {
-  const childrenArray: any | { props: IStepProps }[] = React.Children.toArray(children);
-  const steps = childrenArray.map((child: { props: IStepProps }, index: number) => {
-    if (!React.isValidElement<IStepProps>(child)) {
+  const childrenArray: React.ReactElement<IStepProps>[] = React.Children.toArray<React.ReactElement<IStepProps>>(children);
+  const steps = childrenArray.map((child, index) => {
+    if (!React.isValidElement(child)) {
       throw new Error('Stepper component has invalid child');
     }
 

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

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

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 { ITFunction } from '../../../../framework/types/types';
+import { TFunction } from '../../../../framework/types/types';
 
 interface IAdditionalOrderData {
   addressData: ({ value: string; label: string; })[];
@@ -14,7 +14,7 @@ interface IAdditionalOrderData {
 }
 
 interface IAdditionalOrderInfo {
-  t: ITFunction;
+  t: TFunction;
   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={classNames(styles.labelText, styles.priceValue)}>{value}</div>
+                  <div className={styles.labelText}>{value}</div>
                 </div>
               );
             }

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

@@ -1,12 +1,11 @@
 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 ITFunction {
+interface TFunction {
   <T = string>(key: string, options?: object): T;
   <T = string>(keys: string[], options?: object): T;
 }
@@ -21,16 +20,11 @@ interface IOrderStatusCar {
   paybackPeriod?: number;
   monthlyInstallment?: number;
   status?: string;
-  t: ITFunction;
+  t: TFunction;
   request: string;
   registration: boolean;
   currentSalesPrice: number;
   onClick: () => void;
-  isFinishedOrder?: boolean;
-  additionalOrderInfoProps?: any;
-  wonStatus?: string;
-  transformedDeliveryDate?: string | null;
-  delivery?: boolean;
 }
 
 const OrderStatusCar = ({
@@ -47,11 +41,7 @@ const OrderStatusCar = ({
   request,
   registration,
   currentSalesPrice,
-  onClick,
-  additionalOrderInfoProps,
-  wonStatus,
-  transformedDeliveryDate,
-  delivery
+  onClick
 }: IOrderStatusCar) => {
   const ref = useRef(null);
   const [activeStep, setActiveStep] = useState(0); // 0 - when we have no active steps
@@ -60,16 +50,11 @@ const OrderStatusCar = ({
     { icon: 'orderReceivedDashboard', selector: 'selector_status_order_received' },
     { icon: 'preparaionDashboard', selector: 'selector_status_preparation' },
     { icon: 'registrationDashboard', selector: 'selector_status_registration' },
-    selfPickup || !delivery ? { icon: 'pickupDashboard', selector: 'selector_status_pick_up' }
+    selfPickup ? { 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) => {
@@ -78,12 +63,13 @@ const OrderStatusCar = ({
           setActiveStep(index + 1);
         }
       });
-      if (!!ref && !!ref.current && typeof ref.current.scrollBy === 'function') {
-        ref.current.scrollBy({
-          behavior: 'smooth',
-          left: 156 * steps.indexOf(status)
-        })
-      }
+      // if (!!ref && !!ref.current) { TODO: fix scroll for active element for mobile
+      //   ref.current.scrollBy({
+      //     top: 0,
+      //     left: 156 * activeStep,
+      //     behavior: 'smooth'
+      //   });
+      // }
     },
     []
   );
@@ -104,43 +90,38 @@ const OrderStatusCar = ({
               <img data-testid='car-image' src={imageUrl}/>
             </div>
             <div className={styles.requestId}>{request}</div>
-            <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 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>
           </div>
         </div>
-        {wonStatus === 'won' ? <AdditionalOrderInfo { ...additionalOrderInfoProps } />
-          : <div className={styles.cardsSection} ref={ref}>
-              {cardItems.map((card, index) => {
-                const { icon, selector } = card;
+        <div className={styles.cardsSection}>
+          {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
-                    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
+                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>
       </div>
     </div>
   );

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

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

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

@@ -7,9 +7,8 @@ import styles from './OrderStatusSection.styl';
 import { Skeleton } from '@mui/material';
 
 import { getFormattedPrice } from '../../../../framework/utils/CommonUtils';
-import { fromUTCToDateString } from '../../../../framework/utils/DateUtils';
 
-interface ITFunction {
+interface TFunction {
   <T = string>(key: string, options?: object): T;
   <T = string>(keys: string[], options?: object): T;
 }
@@ -17,19 +16,17 @@ interface ITFunction {
 interface IOrderStatusSection {
   getSupportedImageFormat: (id: string, mainImageId: string, size: 'small' | 'medium' | 'large') => string;
   redirectToUrl: (url: string) => void;
-  t: ITFunction;
+  t: TFunction;
   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) => {
@@ -44,202 +41,126 @@ const OrderStatusSection = ({
     if (!!addressObj) {
       Object.keys(addressObj).forEach((key) => {
         switch (key) {
-          case 'firstname':
-          case 'lastname':
+          case 'customerFirstname':
+          case 'customerLastname':
             addressString = `${addressString} ${addressObj[key]}`;
             break;
-          case 'partner':
-          case 'street':
-          case 'zip':
-          case 'number':
+          case 'deliveryPartner':
+          case 'customerStreet':
+          case 'deliveryStreet':
+          case 'customerZip':
+          case 'deliveryZip':
             if (!!addressString) {
               addressString = `${addressString}, ${addressObj[key]}`;
             } else {
               addressString = `${addressString} ${addressObj[key]}`;
             }
             break;
-          case 'city':
+          case 'customerCity':
+          case 'deliveryCity':
             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 { 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: ''
+      return { value: getFormattedPrice(value, '$,.2f', ' €'), label };
     }
   }
 
-  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[] = []) => {
+  const renderRequestedCars = () => {
     return (
       <>
-        {!!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;
+        {!!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)
+          };
 
-            const transformedDeliveryDate = !!deliveryDate ? `${t('MyOrderPage:deliveredOn')} ${fromUTCToDateString(deliveryDate)}` : null;
+          const title = <span>
+            {t('orderStatus.title')}:&nbsp;
+            <span className={styles.orderStatus}>{t(`orderStatus.${status}`)}</span>
+          </span>;
 
-            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>
-            );  
-          }
+          return (
+            <DashboardSection key={index} title={title}>
+              <OrderStatusCar  { ...orderStatusCarProps } />
+              {withAdditionalInfo ? <AdditionalOrderInfo { ...additionalOrderInfoProps } /> : null}
+            </DashboardSection>
+          );
         })}
       </>
     );
@@ -247,14 +168,11 @@ const OrderStatusSection = ({
 
   return (
     <>
-      {isFetching ?
+      {isFetching ? 
         <div className={styles.skeletonBlock}>
           <Skeleton animation='wave' variant='rectangular' width='100%' />
         </div>
-        : <>
-          {renderRequestedCars(orderedCars)}
-          {renderRequestedCars(wonCars)}
-        </>
+        : renderRequestedCars()
       }
     </>
   );