@bytebrand/fe-ui-core 4.2.53 → 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

@@ -6,6 +6,17 @@ 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
@@ -23,7 +34,7 @@ describe('OrderStatusCard', () => {
     expect(svgElement).toBeInTheDocument();
   });
 
-  it('adds "isDisabled" class when isDisabled prop is set', () => {
+  it('adds "notReachedTitle" class for title when "isDisabled" prop is set', () => {
     const { getByTestId, debug } = render(
       <OrderStatusCard
         icon={icon}
@@ -36,4 +47,32 @@ describe('OrderStatusCard', () => {
     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/package.json

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

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

@@ -1,10 +1,13 @@
 import React, { useRef, useEffect, useState } from 'react';
 import styles from './OrderStatusSection.styl';
 import OrderStatusCard from './OrderStatusCard';
-import i18n from 'i18next';
 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;
@@ -15,7 +18,7 @@ interface IOrderStatusCar {
   paybackPeriod?: number;
   monthlyInstallment?: number;
   status?: string;
-  t: i18n.TFunction;
+  t: TFunction;
   request: string;
   registration: boolean;
   currentSalesPrice: number;
@@ -58,13 +61,13 @@ const OrderStatusCar = ({
           setActiveStep(index + 1);
         }
       });
-      if (ref && ref.current) {
-        ref.current.parentElement.scrollBy({
-          top: 0,
-          left: 156 * activeStep,
-          behavior: 'smooth'
-        });
-      }
+      // if (!!ref && !!ref.current) { TODO: fix scroll for active element for mobile
+      //   ref.current.scrollBy({
+      //     top: 0,
+      //     left: 156 * activeStep,
+      //     behavior: 'smooth'
+      //   });
+      // }
     },
     []
   );
@@ -72,7 +75,7 @@ const OrderStatusCar = ({
   return (
     <div className={styles.orderedCar}>
       <div className={styles.orderReceivedSection}>
-        <div className={styles.carCardWrapper} onClick={onClick}>
+        <div className={styles.carCardWrapper} data-testid='car-card' onClick={onClick}>
           <div className={styles.carCard}>
             <div className={styles.carMarke}>
               {make} {model}
@@ -82,7 +85,7 @@ const OrderStatusCar = ({
             </div>
             <div className={styles.carImg}>
               {/* <Image className={styles.carImg} width='100%' ratioW={4} ratioH={3} src={imageUrl} /> */}
-              <img src={imageUrl}/>
+              <img data-testid='car-image' src={imageUrl}/>
             </div>
             <div className={styles.requestId}>{request}</div>
             <div className={styles.carPayment} >

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

@@ -27,7 +27,7 @@ const OrderStatusCard = ({ icon, title, description, isDisabled, cardRef, isActi
 
   return (
     <div className={styles.orderReceivedCardContainer}>
-      <div className={orderReceivedCardClasses} ref={cardRef}>
+      <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.story.js

@@ -41,15 +41,47 @@ const orderedCars = [
     selfPickup: false,
     paybackPeriod: 24,
     monthlyInstallment: 1000,
-    status: 'selector_status_preparation',
+    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: (phrase) => phrase,
+  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,

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, '.');
 };