@bytebrand/fe-ui-core 4.2.52 → 4.2.54

package/__tests__/components/UserDasboardPage/sections/OrderStatusSection/OrderStatusCar.test.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react'
+import OrderStatusCar from '../../../../../source/components/UserDashboardPage/sections/OrderStatusSection/OrderStatusCar';
+
+const t = (phrase: string | string[], options: object) => {
+  if (options) {
+    const value = Object.values(options).map((option) => option)
+    return `${phrase} ${value}`;
+  }
+  return phrase;
+}
+
+const mockProps = {
+  t,
+  make: 'Test Make',
+  model: 'Test Model',
+  subModel: 'test car',
+  buyingType: 'buy',
+  imageUrl: 'https://images.autode-dev.de/carimage/28121b1a-398c-4e9c-9097-51be545817c5/RQ_mHNek5hIk/small-cached.webp',
+  selfPickup: false,
+  paybackPeriod: 12,
+  monthlyInstallment: 2000,
+  status: 'selector_status_order_received',
+  request: '1234abcd',
+  registration: false,
+  currentSalesPrice: 30000,
+  onClick: jest.fn()
+}
+
+describe('OrderStatusCar', () => {
+  it('renders OrderStatusCar component without error', () => {
+    const { container } = render(<OrderStatusCar {...mockProps} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('should display correct car make and model', () => {
+    const { getByText } = render(<OrderStatusCar {...mockProps} />);
+    expect(getByText(`${mockProps.make} ${mockProps.model}`)).toBeInTheDocument();
+  });
+
+  it('should display correct car characteristics', () => {
+    const { getByText } = render(<OrderStatusCar {...mockProps} />);
+    expect(getByText(mockProps.subModel)).toBeInTheDocument();
+  });
+
+  it('should display correct car image', () => {
+    const { getByTestId } = render(<OrderStatusCar {...mockProps}/>);
+    const carImage = getByTestId('car-image')
+    expect(carImage).toHaveAttribute('src', mockProps.imageUrl);
+  });
+
+  it('should call onClick function when user clicks on the car card', () => {
+    const { getByTestId } = render(<OrderStatusCar {...mockProps} />);
+    const carCard = getByTestId('car-card');
+    fireEvent.click(carCard);
+    expect(mockProps.onClick).toHaveBeenCalled();
+  });
+});

package/__tests__/components/UserDasboardPage/sections/OrderStatusSection/OrderStatusCard.test.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import OrderStatusCard from '../../../../../source/components/UserDashboardPage/sections/OrderStatusSection/OrderStatusCard';
+
+describe('OrderStatusCard', () => {
+  const icon = 'orderReceivedDashboard';
+  const title = 'Test title';
+  const description = 'Test description';
+  it('render container without errors', () => {
+    const { container } = render(
+      <OrderStatusCard
+        icon={icon}
+        title={title}
+        description={description}
+      />
+    );
+    expect(container).toBeInTheDocument();
+  });
+
+  it('renders a card with title, description, and icon', () => {
+    const { getByText, container, debug } = render(
+      <OrderStatusCard
+        icon={icon}
+        title={title}
+        description={description}
+      />
+    );
+    debug();
+    const cardTitle = getByText(title);
+    expect(cardTitle).toBeInTheDocument();
+    const cardDescription = getByText(description);
+    expect(cardDescription).toBeInTheDocument();
+    const svgElement = container.querySelector('svg');
+    expect(svgElement).toBeInTheDocument();
+  });
+
+  it('adds "notReachedTitle" class for title when "isDisabled" prop is set', () => {
+    const { getByTestId, debug } = render(
+      <OrderStatusCard
+        icon={icon}
+        title={title}
+        description={description}
+        isDisabled={true}
+      />
+    );
+    debug();
+    const cardTitle = getByTestId('cardTitle');
+    expect(cardTitle).toHaveClass('notReachedTitle');
+  });
+
+  it('adds "isDoneTitle" class for title when "isDone" prop is set', () => {
+    const { getByTestId, debug } = render(
+      <OrderStatusCard
+        icon={icon}
+        title={title}
+        description={description}
+        isDone={true}
+      />
+    );
+    debug();
+    const cardTitle = getByTestId('cardTitle');
+    expect(cardTitle).toHaveClass('isDoneTitle');
+  });
+
+  it('adds "cardInProgress" class for card when "isActive" prop is set', () => {
+    const { getByTestId, debug } = render(
+      <OrderStatusCard
+        icon={icon}
+        title={title}
+        description={description}
+        isActive={true}
+      />
+    );
+    debug();
+    const orderStatusCard = getByTestId('orderStatusCard');
+    expect(orderStatusCard).toHaveClass('cardInProgress');
+  });
+});

package/__tests__/components/_common/{Badge.test.tsx → Badge/Badge.test.tsx}

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Badge from '../../../source/components/_common/Badge/Badge';
+import Badge from '../../../../source/components/_common/Badge/Badge';
 
 describe('Badge', () => {
   const textToRender = 'Test Text';

package/jest.config.js

@@ -8,8 +8,9 @@ module.exports = {
   ],
   transform: {
     "^.+\.(ts|tsx)?$": "ts-jest",
-    ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
-    "^.+\\.svg$": "jest-svg-transformer"
+    ".+\\.(css|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
+    "^.+\\.svg$": "jest-svg-transformer",
+    '\\.(styl)$': '<rootDir>/node_modules/jest-stylus',
   },
   transformIgnorePatterns: [
     "node_modules/(?!@ngrx|(?!deck.gl)|ng-dynamic)",
@@ -23,9 +24,9 @@ module.exports = {
     "/public/"
   ],
   moduleNameMapper: {
-    "^.+.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
+    "^.+.(css|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
     "^.+\\.svg$": "jest-svg-transformer",
-    "\\.(css|less|scss|sss|styl)$": "<rootDir>/node_modules/jest-css-modules",
+    '\\.(styl)$': 'identity-obj-proxy',
     'react-dom/client': 'react-dom'
   },
   moduleFileExtensions: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.2.52",
+  "version": "4.2.54",
   "description": "UI components for the auto.de project",
   "main": "index.ts",
   "module": "dist/common.js",
@@ -39,9 +39,12 @@
     "date-fns": "2.29.1",
     "i18next": "^15.0.4",
     "jest": "^26.0.0",
+    "jest-css-modules": "^2.1.0",
+    "jest-css-modules-transform": "^4.4.2",
+    "jest-dom": "^4.0.0",
     "jest-environment-jsdom-sixteen": "^2.0.0",
+    "jest-stylus": "^0.1.2",
     "jest-svg-transformer": "^1.0.0",
-    "jest-dom": "^4.0.0",
     "jest-transform-stub": "^2.0.0",
     "js-cookie": "^2.2.0",
     "moment": "^2.29.1",

package/source/components/SearchPage/Filters/MakeModel/MakeModel.tsx

@@ -59,7 +59,7 @@ class MakeModel extends React.Component<IMakeModelProps> {
 
   debaunceOnFilterChange = _debounce( // is used for the text field to add a delay and not make a search request for each key stroke
     (name: string, value: string, index: number) => {
-      this.props.onChange(name, value, index)
+      this.props.onChange(name, value, index);
     },
     DEBOUNCE_TIME
   );

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

@@ -0,0 +1,73 @@
+@import '../../../../theme/theme.styl'
+@import '../../../../theme/mixins.styl'
+
+.container
+  padding: 8px 8px 16px
+  border-top: 1px solid rgba(76,78,100,0.12)
+  +media-tablet-landscape-up()
+    padding: 12px 16px
+    display: grid
+    grid-template-columns: 1fr 1fr
+    column-gap: 32px
+
++media-tablet-landscape-up()
+  .orderInfoSection:first-child 
+    position: relative  
+
+  .orderInfoSection:first-child:after
+    content: ''
+    width: 1px
+    height: 100%
+    background-color: rgba(76,78,100,0.12)
+    display: block;
+    position: absolute;
+    top: 0;
+    right: -16px;
+
+.labelText
+  color: $black50
+  font-size: 14px
+  line-height: 20px
+
+.orderInfoAddresses
+  padding-bottom: 8px
+
+.orderInfoPrice
+  border-top: 1px solid rgba(76,78,100,0.12)
+
+.overallRateLabel
+  @extend .labelText
+  font-weight: bold
+
+.flexContainer
+  display: flex
+  justify-content: space-between
+  align-items: center
+  margin-top: 8px
+
+.customerSuport
+  @extend .labelText
+  text-align: center
+  margin-top: 8px
+  padding: 16px 24px
+  border-top: 1px solid rgba(76,78,100,0.12)
+
+.customerSuportButton
+  margin-top: 8px
+  color: #26C6F9 !important
+  border-color: #26C6F9 !important
+  border-radius: 8px !important
+
+.totalPrice
+  font-size: 24px
+  display: flex
+
+.decimals
+  font-size: 24px !important
+  top: 7px !important
+
+.unit
+  font-size: 14px
+
+.montlyUnit
+  font-size: 8px

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

@@ -0,0 +1,89 @@
+import React from 'react';
+import styles from './AdditionalOrderInfo.styl';
+
+import i18n from 'i18next';
+
+import VehicleFormattedPrice from '../../../Vehicle/VehicleFormattedPrice/VehicleFormattedPrice';
+import Button from '../../../_common/Button/Button';
+import classNames from 'classnames';
+
+interface IAdditionalOrderData {
+  addressData: { label: string, value: string }[];
+  carPriceData: { label: string, value: string }[];
+  financingData: { label: string, value: string }[];
+  overallRate: {
+    label: string,
+    value: number
+  };
+}
+
+interface IAdditionalOrderInfo {
+  t: i18n.TFunction;
+  additionalOrderData: IAdditionalOrderData;
+}
+
+const AdditionalOrderInfo = ({ t, additionalOrderData }: IAdditionalOrderInfo) => {
+  const { addressData, carPriceData, financingData, overallRate } = additionalOrderData;
+  return (
+    <div className={styles.container}>
+      <div className={styles.orderInfoSection}>
+        <div className={styles.orderInfoAddresses}>
+          {addressData.map((data) => {
+            const { value, label } = data;
+            return (
+              <div key={label}>
+                <div className={styles.labelText}>{label}</div>
+                <div className={styles.labelText}>{value}</div>
+              </div>
+            );
+          })}
+        </div>
+        <div className={styles.orderInfoPrice}>
+          {carPriceData.map((data) => {
+            const { value, label } = data;
+            return (
+              <div className={styles.flexContainer} key={label}>
+                <div className={styles.labelText}>{label}</div>
+                <div className={styles.labelText}>{value}</div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+      <div className={styles.orderInfoSection}>
+        <div className={styles.orderInfoFinancing}>
+          {financingData.map((data) => {
+            const { value, label } = data;
+            return (
+              <div className={styles.flexContainer} key={label}>
+                <div className={styles.labelText}>{label}</div>
+                <div className={styles.labelText}>{value}</div>
+              </div>
+            );
+          })}
+          <div className={classNames(styles.flexContainer, styles.overallRate)}>
+            <div className={styles.overallRateLabel}>{overallRate.label}</div>
+            <div>
+              <VehicleFormattedPrice
+                price={overallRate.value}
+                numbersAfterDot={2}
+                isNew
+                monthly='mtl'
+                className={styles.totalPrice}
+                afterCommaClassName={styles.decimals}
+                unitClassName={styles.unit}
+                monthlyClassName={styles.montlyUnit}
+              />
+            </div>
+          </div>
+        </div>
+        <div className={styles.customerSuport}>
+          <div>{t('customerSupportText')}</div>
+          <Button className={styles.customerSuportButton} variant='outlined'>{t('customerSupport')}</Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AdditionalOrderInfo;

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

@@ -0,0 +1,128 @@
+import React, { useRef, useEffect, useState } from 'react';
+import styles from './OrderStatusSection.styl';
+import OrderStatusCard from './OrderStatusCard';
+import Image from '../../../_common/Image/Image';
+import { getFormattedPrice } from '../../../../framework/utils/CommonUtils';
+
+interface TFunction {
+  <T = string>(key: string, options?: object): T;
+  <T = string>(keys: string[], options?: object): T;
+}
+interface IOrderStatusCar {
+  make?: string;
+  model?: string;
+  subModel?: string;
+  buyingType?: string;
+  imageUrl?: string;
+  selfPickup?: boolean;
+  paybackPeriod?: number;
+  monthlyInstallment?: number;
+  status?: string;
+  t: TFunction;
+  request: string;
+  registration: boolean;
+  currentSalesPrice: number;
+  onClick: () => void;
+}
+
+const OrderStatusCar = ({
+  make,
+  model,
+  subModel,
+  buyingType,
+  selfPickup,
+  paybackPeriod,
+  monthlyInstallment,
+  imageUrl,
+  status,
+  t,
+  request,
+  registration,
+  currentSalesPrice,
+  onClick
+}: IOrderStatusCar) => {
+  const ref = useRef(null);
+  const [activeStep, setActiveStep] = useState(0); // 0 - when we have no active steps
+
+  const cardItems = [
+    { 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' }
+    : { icon: 'deliveryDashboard', selector: 'selector_status_delivery' },
+    { icon: 'handingOverDashboard', selector: 'selector_status_handing_over' }
+  ];
+
+  useEffect(
+    () => {
+      cardItems.map((step, index) => {
+        const { selector } = step;
+        if (selector === status) {
+          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'
+      //   });
+      // }
+    },
+    []
+  );
+
+  return (
+    <div className={styles.orderedCar}>
+      <div className={styles.orderReceivedSection}>
+        <div className={styles.carCardWrapper} data-testid='car-card' onClick={onClick}>
+          <div className={styles.carCard}>
+            <div className={styles.carMarke}>
+              {make} {model}
+            </div>
+            <div className={styles.carCharacteristics}>
+              {subModel}
+            </div>
+            <div className={styles.carImg}>
+              {/* <Image className={styles.carImg} width='100%' ratioW={4} ratioH={3} src={imageUrl} /> */}
+              <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>
+          </div>
+        </div>
+        <div className={styles.cardsSection}>
+          {cardItems.map((card, index) => {
+            const { icon, selector } = card;
+
+            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>
+      </div>
+    </div>
+  );
+};
+
+export default OrderStatusCar;

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

@@ -0,0 +1,54 @@
+@import '../../../../theme/mixins.styl'
+
+.orderReceivedCardContainer
+  display: flex
+  align-items: center
+  border: 1px solid rgba(102, 108, 255, 0)
+
+.orderReceivedCard
+  width: 156px
+  text-align: center
+  display: grid
+  grid-template-rows: 132px 25px 60px
+  grid-row-gap: 5px
+  justify-content: center
+  align-items: center
+  border-radius: 8px
+  padding: 5px 10px 0
+  box-sizing: border-box
+  height: fit-content
+
+.cardInProgress
+  border: 1px solid rgba(102, 108, 255, 0.5)
+
+.orderStatusTitle
+  display: inline-block
+  font-size: 12px
+  line-height: 20px
+  letter-spacing: 0.14px
+  color: #005CCB;
+  background: linear-gradient(0deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)), #666CFF
+  background-color:#666CFF
+  border-radius: 64px
+  padding: 0 6.5px
+  width: max-content
+  margin: 0 auto
+
+.orderStatusDesc
+  font-size: 12px
+  line-height: 20px
+  text-align: left
+  color: rgba(76, 78, 100, 0.87)
+  margin: 0 auto
+  height: 100%
+
+.cardIcon
+  display: block
+
+.isDoneTitle
+  background: #00B800
+  color: #fff
+
+.notReachedTitle
+  background: linear-gradient(0deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)), #26C6F9
+  color: #26C6F9

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import IconSVG from '../../../_common/IconSVG/IconSVG';
+import styles from './OrderStatusCard.styl';
+import classnames from 'classnames';
+
+interface IOrderStatusCard {
+  icon?: string;
+  title?: string;
+  description?: string;
+  isDisabled?: boolean;
+  cardRef?: any;
+  isActive?: boolean;
+  isDone?: boolean;
+}
+
+const OrderStatusCard = ({ icon, title, description, isDisabled, cardRef, isActive, isDone }: IOrderStatusCard) => {
+  const orderReceivedCardClasses = classnames(
+    styles.orderReceivedCard,
+    { [styles.cardInProgress]: isActive }
+  );
+
+  const orderStatusTitleClasses = classnames(
+    styles.orderStatusTitle,
+    { [styles.isDoneTitle]: isDone },
+    { [styles.notReachedTitle]: isDisabled  }
+  );
+
+  return (
+    <div className={styles.orderReceivedCardContainer}>
+      <div data-testid='orderStatusCard' className={orderReceivedCardClasses} ref={cardRef}>
+        <div className={styles.cardIcon}>
+          <IconSVG disabled={isDisabled} customDimensions name={icon} width={87}/>
+        </div>
+        <div data-testid='cardTitle' className={orderStatusTitleClasses}>{title}</div>
+        <div className={styles.orderStatusDesc}>{description}</div>
+      </div>
+    </div>
+  );
+};
+
+export default OrderStatusCard;

package/source/components/UserDashboardPage/sections/OrderStatusSection/OrderStatusSection.story.js

@@ -0,0 +1,95 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import OrderStatusSection from './OrderStatusSection';
+
+const orderedCars = [
+  {
+    car: {
+      _id: '1234567890',
+      mainData: {
+        make: 'Volvo',
+        model: 'CX90',
+        subModel: 'sub model',
+      },
+      metaData: {
+        mainImageId: 'main image id'
+      }
+    },
+    buyingType: 'leasing',
+    selfPickup: true,
+    paybackPeriod: 24,
+    monthlyInstallment: 1000,
+    status: 'selector_status_preparation',
+    request: '010203',
+    registration: true,
+    currentSalesPrice: 20000
+  },
+  {
+    car: {
+      _id: '1234567890',
+      mainData: {
+        make: 'Volvo',
+        model: 'CX90',
+        subModel: 'sub model',
+      },
+      metaData: {
+        mainImageId: 'main image id'
+      }
+    },
+    buyingType: 'leasing',
+    selfPickup: false,
+    paybackPeriod: 24,
+    monthlyInstallment: 1000,
+    status: 'selector_status_registration',
+    request: '010203',
+    registration: false,
+    currentSalesPrice: 20000
+  }
+];
+
+const translates = {
+  'orderStatus.title': 'Order status',
+  'orderStatus.selector_status_order_received': 'order received',
+  'orderStatus.selector_status_preparation': 'preparation',
+  'orderStatus.selector_status_registration': 'registration',
+  'orderStatus.selector_status_pick_up': 'pickup',
+  'orderStatus.selector_status_handing_over': 'handing over',
+  'orderStatus.selector_status_delivery': 'delivery',
+  'orderStatus.independentRegistration': 'independent registration',
+  'orderStatus.selector_status_order_received_desc': 'order received description',
+  'orderStatus.selector_status_preparation_desc': 'preparation description',
+  'orderStatus.selector_status_registration_desc': 'registration description',
+  'orderStatus.selector_status_pick_up_desc': 'pickup description',
+  'orderStatus.selector_status_handing_over_desc': 'handing over description',
+  'orderStatus.selector_status_delivery_desc': 'delivery description',
+  'buyingType.buy': 'buy',
+  'buyingType.leasing': 'leasing',
+  'buyingType.financing': 'financing',
+  'paybackPeriod': 'payback period',
+  'currentSalesPrice': 'current sales price',
+  'monthlyInstallment': 'monthly installment'
+}
+
+const t = (phrase, options) => {
+  if (options) {
+    console.log('qqqq options ====', options);
+    const value = Object.values(options).map((option) => option)
+    return `${translates[phrase]} ${value}`;
+  }
+  return translates[phrase];
+}
+
+const props = {
+  t,
+  redirectToCar: (id) => console.log(`redirect to car with id: ${id}`),
+  getSupportedImageFormat: (id, mainImageId, size) => 'https://images.autode-dev.de/carimage/28121b1a-398c-4e9c-9097-51be545817c5/RQ_mHNek5hIk/small-cached.webp',
+  isFetching: false,
+  withAdditionalInfo: false,
+  orderedCars
+};
+
+storiesOf('userDashboard', module)
+  .add('OrderStatusSection', () => (
+    <OrderStatusSection {...props} />
+  ));

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

@@ -0,0 +1,167 @@
+@import '../../../../theme/mixins.styl'
+
+.orderedCar:not(:first-child)
+  border-top: 1px solid rgba(76, 78, 100, 0.12)
+
+.orderReceivedSection
+  display: grid
+  grid-template-areas: 'car cards'
+  +media-tablet-landscape-down()
+    grid-template-areas:
+      'cards'\
+      'car'
+
+
+.orderStatus
+  font-weight: bold
+
+.cardsSection
+  display: grid
+  grid-template-columns: repeat(5, auto)
+  box-sizing: border-box
+  padding: 12px
+  justify-content: space-between
+  grid-area: cards
+  +media-tablet-landscape-down()
+    overflow: scroll
+
+
+.carCardWrapper
+  grid-area: car
+  width: 271px
+  cursor: pointer
+  border-right: 1px solid rgba(76, 78, 100, 0.12)
+  +media-tablet-landscape-down()
+    width: 100%
+    border-top: 1px solid rgba(76, 78, 100, 0.12)
+    border-right: none
+    max-width: none
+
+.carCard
+  padding: 16px
+  display: grid
+  grid-template-areas:
+    'marke'\
+    'characteristics'\
+    'carImage'\
+    'requestId'\
+    'paymentCar'
+
+  +media-tablet-landscape-down()
+    border-right: none
+    padding: 16px 20px 12px
+    grid-column-gap: 10px
+    max-width: 100%
+    justify-content: space-around
+    grid-template-areas:
+      'marke carImage'\
+      'characteristics carImage'\
+      'requestId carImage'\
+      'paymentCar paymentCar'
+
+.carMarke
+  font-size: 20px;
+  line-height: 23px;
+  text-align: center;
+  letter-spacing: 0.15px;
+  font-weight: bold
+  color: rgba(76, 78, 100, 0.87);
+  grid-area: marke
+
+.carCharacteristics
+  @extend .carMarke
+  font-size: 12px
+  line-height: 14px
+  grid-area: characteristics
+  max-width: 227px
+  letter-spacing: 0.15px
+  font-weight: bold
+  -webkit-line-clamp: 1
+  display: -webkit-box
+  -webkit-box-orient: vertical
+  overflow: hidden
+  height: fit-content
+  margin: 0 auto
+
+.requestId
+  @extend .carCharacteristics
+  font-weight: normal
+  grid-area: requestId
+
+.carImg
+  grid-area: carImage
+  width: 192px
+  margin: 0 auto
+  +media-tablet-landscape-down()
+    width: 117px
+    height: auto
+  img
+    width: 100%
+
+.carPayment
+  font-size: 12px;
+  line-height: 20px;
+  text-align: center;
+  letter-spacing: 0.15px;
+  color: rgba(76, 78, 100, 0.87);
+  grid-area: paymentCar
+  +media-tablet-landscape-down()
+    padding: 16px 5px 0
+    border-top: 1px solid rgba(76, 78, 100, 0.12)
+    font-size: 14px
+
+.react-slider-container
+  width: 100%
+
+// .sliderContainer
+//    max-width: 1090px;
+//    +media-tablet-landscape-down()
+//       width: calc(100vw - 32px)
+//       box-sizing: border-box
+//   :global
+//     .slick-slider
+//       overflow: hidden
+//       +media-tablet-landscape-down()
+//         padding 0;
+//       .slick-arrow,
+//       .slick-arrow:focus,
+//       .slick-arrow:hover
+//         display: inline-block
+//         width: 25px
+//         height: 50px
+//         z-index: 1
+//         transition: all 0.2s ease-in-out
+//       .slick-arrow::before
+//         display: none
+//       .click-arrow::before:hover
+//         background-color: black
+
+//       .slick-arrow::after
+//         position: absolute
+//         content: ''
+//         display: inline-block
+//         width: inherit
+//         height: inherit
+//         top: 50%
+//         transform: translateY(-50%)
+//         transform-origin: top center
+//         background-image: url('../../../../../../media/images/slider-arrow-new.svg')
+//         background-size: cover
+
+//       .slick-next::after
+//         left: 0
+
+//       .slick-prev::after
+//         transform: rotate(180deg) translateY(-50%)
+//         right: 0
+
+//       .slick-prev
+//         left: 5px
+//         top: 75%
+
+//       .slick-next
+//         right: 5px
+//         top: 75%
+
+.skeletonBlock
+  height: 330px

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

@@ -0,0 +1,128 @@
+import React from 'react';
+
+import DashboardSection from '../../../containers/DasboardSection/DashboardSection';
+// import AdditionalOrderInfo from './AdditionalOrderInfo';
+import OrderStatusCar from './OrderStatusCar';
+import styles from './OrderStatusSection.styl';
+// import { history } from '../../../../../AppRouter';
+import { Skeleton } from '@mui/material';
+import i18next from 'i18next';
+
+interface IOrderStatusSection {
+  redirectToCar: (id: string) => void;
+  getSupportedImageFormat: (id: string, mainImageId: string, size: 'small' | 'medium' | 'large') => string;
+  t: i18next.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
+}
+
+const OrderStatusSection = ({
+  getSupportedImageFormat,
+  t,
+  orderedCars,
+  isFetching,
+  withAdditionalInfo = false,
+  redirectToCar
+}: IOrderStatusSection) => {
+  const onDetailsClick = (carId: string) => {
+    redirectToCar(carId);
+  };
+
+  const renderRequestedCars = () => {
+    return (
+      <>
+        {!!orderedCars && orderedCars.map((orderedCar, index) => {
+          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
+          } = orderedCar;
+
+          // ---- data for testing additionalInfo ----
+
+          // const additionalOrderData = {
+          //   addressData: [
+          //     { label: 'Billing address:', value: 'Hannes Käther, Wittenberger Str. 81, 04129 Leipzig' },
+          //     { label: 'Vehicle delivery:', value: 'Hannes Käther, Wittenberger Str. 81, 04129 Leipzig' }
+          //   ],
+          //   carPriceData: [
+          //     { label: 'Car price', value: '22.799,00 €' },
+          //     { label: 'Preparation cost', value: '799,00 €' },
+          //     { label: 'vehicle registration', value: '399,00 €' },
+          //     { label: 'Silver Guarantee Pack (2 years)', value: '1.099,00 €' },
+          //     { label: 'license plates', value: '140,66 €' },
+          //     { label: 'Delivery', value: '799,36 €' }
+          //   ],
+          //   financingData: [
+          //     { label: 'Leasing rate', value: '€194.00 per month' },
+          //     { label: 'Running time (months)', value: '72 months' },
+          //     { label: 'Deposit', value: '1.000,99 €' }
+          //   ],
+          //   overallRate: {
+          //     label: 'Your overall rate',
+          //     value: 599
+          //   }
+          // };
+
+          // const additionalOrderInfoProps = {
+          //   t,
+          //   additionalOrderData
+          // };
+
+          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 title = <span>
+            {t('orderStatus.title')}:&nbsp;
+            <span className={styles.orderStatus}>{t(`orderStatus.${status}`)}</span>
+          </span>;
+
+          return (
+            <DashboardSection key={index} title={title}>
+              <OrderStatusCar  { ...orderStatusCarProps } />
+              {/* {withAdditionalInfo ? <AdditionalOrderInfo { ...additionalOrderInfoProps } /> : null} */}
+            </DashboardSection>
+          );
+        })}
+      </>
+    );
+  };
+
+  return (
+    <>
+      {isFetching ?
+        <div className={styles.skeletonBlock}>
+          <Skeleton animation='wave' variant='rectangular' width='100%' />
+        </div>
+        : renderRequestedCars()
+      }
+    </>
+  );
+};
+
+export default OrderStatusSection;

package/source/components/VehicleSmallCard/VehicleData/VehiclePrice/VehiclePrice.tsx

@@ -143,7 +143,6 @@ const VehiclePrice: React.FC<IVehiclePriceSectionProps> = (props: IVehiclePriceS
                                    vehicleComponentName === 'landing' ||
                                    vehicleComponentName === 'main' ? 'outlined' : 'contained';
 
-
   const priceItemsGlobal = [
     {
       perMonthOld: oldMonthlyInstallment,
@@ -280,4 +279,4 @@ const VehiclePrice: React.FC<IVehiclePriceSectionProps> = (props: IVehiclePriceS
   );
 };
 
-export default VehiclePrice;
+export default VehiclePrice;

package/source/components/VehicleSmallCard/VehicleSmallCard.tsx

@@ -276,7 +276,7 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
                                   vehicleComponentName === 'recently';
   return (
     <section className={wrapperClassName} onClick={onContainerClick} id={id}>
-      <>      
+      <>
         {createElement(linkTag, {
           children: <VehicleTitle {...favoriteProps} />,
           ...routeObj,

package/source/components/_common/MaterialField/MaterialField.tsx

@@ -45,9 +45,12 @@ const MaterialField: React.FC<IVehicleModalProps> = ({
   const [showPassword, setShowPassword] = React.useState(false);
   const [enteredValue, setEnteredValue] = useState(value);
 
-  useEffect(() => {
-    setEnteredValue(value);
-  }, [value])
+  useEffect(
+    () => {
+      setEnteredValue(value);
+    },
+    [value]
+  );
 
   const onHandleChange = (event?: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     const value = event.currentTarget.value;

package/source/components/_common/VehicleSlider/VehicleSliderForSRL.tsx

@@ -11,7 +11,6 @@ import { preloadNearbyImages } from '../../../framework/utils/CommonUtils';
 import { IVehicleSliderForSRLProps } from '../../../framework/types/types';
 import styles from './VehicleSlider.styl';
 
-
 const SlickButtonFix: React.FC = ({ currentSlide, slideCount, children, ...props }: any) => (
   <div {...props} tabIndex={-1}>{children}</div>
 );
@@ -32,8 +31,8 @@ const VehicleSliderForSRL: React.FC<IVehicleSliderForSRLProps> = ({
   CircularProgressbar,
   onSlideChange
 }: IVehicleSliderForSRLProps) => {
-  const [ noImagesLoaded, setNoImagesLoaded ] = React.useState<boolean>(false);
-  const [ activeSlide, setActiveSlide ] = React.useState<number>(0);
+  const [noImagesLoaded, setNoImagesLoaded] = React.useState<boolean>(false);
+  const [activeSlide, setActiveSlide] = React.useState<number>(0);
 
   const beforeChange = () => {
 
@@ -163,6 +162,6 @@ VehicleSliderForSRL.defaultProps = {
   typeAlternative: '',
   images: [],
   getCarImagesData: () => null
-}
+};
 
 export default VehicleSliderForSRL;

package/source/components/_common/withStats/withStats.tsx

@@ -52,7 +52,7 @@ const withStats = (WrappedComponent: any) => ({
   price: { historyPriceDifference = 0, historyPriceDifferencePerCent = 0 },
   ...props
 }: IStatsWrapperProps) => {
-  const [ activeSlide, setActiveSlide ] = React.useState<number>(0);
+  const [activeSlide, setActiveSlide] = React.useState<number>(0);
 
   const MIN_PERCENT = 5;
   const MIN_PRICE_DIFFERENCE = 500;
@@ -160,7 +160,7 @@ const withStats = (WrappedComponent: any) => ({
     imagesCount,
     classWrapPrice,
     ...props
-  }
+  };
 
   return (
     <div className={styles.wrapper}>
@@ -176,4 +176,4 @@ const withStats = (WrappedComponent: any) => ({
   );
 };
 
-export default withStats;
+export default withStats;

package/source/components/containers/DasboardSection/DashboardSection.styl

@@ -0,0 +1,15 @@
+.dashboardSectionWrapper
+  border: 1px solid rgba(76, 78, 100, 0.12)
+  border-radius: 8px
+  background-color: #fff
+  box-sizing: border-box
+
+.title
+  border-bottom: 1px solid rgba(76, 78, 100, 0.12)
+  padding: 16px 16px 8px
+  font-size: 20px
+  line-height: 32px
+  letter-spacing: 0.15px
+  color: rgba(76, 78, 100, 0.87)
+  display: flex;
+  justify-content: space-between;

package/source/components/containers/DasboardSection/DashboardSection.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import styles from './DashboardSection.styl';
+
+interface IRecentlySectionProps {
+  className?: string;
+  title: any;
+  children: any;
+  link?: any;
+}
+
+const DashboardSection = ({ children, title, className, link }: IRecentlySectionProps) => {
+  return (
+    <div className={styles.dashboardSectionWrapper}>
+      <div className={styles.title}>
+        <span>{title}</span>
+        {link}
+      </div>
+      <div className={className}>{children}</div>
+    </div>
+  );
+};
+
+export default DashboardSection;

package/source/framework/utils/CommonUtils.ts

@@ -14,6 +14,15 @@ import { SearchPage as SearchPageTranslate } from '../../locales/data';
 
 const PRICE_DEFAULT = DROP_DOWN_GROUP[PRICE].defaultValue;
 
+declare global {
+  interface Window {
+    grantHotjarCookieConsent?: () => void;
+    grantCookieConsent?: (list: string[]) => void;
+    allowGoogle?: () => void;
+    fbq?: (option1: string, option2: string) => void;
+  }
+}
+
 export const formatMileage = (millage: number | string) => {
   return millage.toLocaleString('en-US').replace(/,/g, '.');
 };