@bytebrand/fe-ui-core 4.2.60 → 4.2.62

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

@@ -0,0 +1,128 @@
+import React from 'react';
+import { render } from '@testing-library/react'
+import AdditionalOrderInfo from '../../../../../source/components/UserDashboardPage/sections/OrderStatusSection/AdditionalOrderInfo';
+import { getFormattedPrice } from '../../../../../source/framework/utils/CommonUtils';
+
+const t = (phrase: string | string[], options: object) => {
+  if (options) {
+    const value = Object.values(options).map((option) => option)
+    return `${phrase} ${value}`;
+  }
+  return phrase;
+}
+
+const commonProps = {
+  t,
+  redirectToUrl: () => {},
+}
+
+const additionalOrderData = (buyingType: 'buy' | 'leasing' | 'financing', objectData: any) => {
+  const {
+    customerFirstname,
+    customerLastname,
+    currentSalesPrice,
+    preparationCost,
+    registrationCost,
+    licensePlateCost,
+    transportationCost,
+    monthlyInstallment,
+    paybackPeriod,
+    deposit
+  } = objectData;
+  return {
+    addressData: [
+      { label: 'Billing address:', value: `${customerFirstname} ${customerLastname}` },
+      { label: 'Vehicle delivery:', value: 'Hannes Käther, Wittenberger Str. 81, 04129 Leipzig' }
+    ],
+    carPriceData: [
+      { label: 'Car price', value: getFormattedPrice(currentSalesPrice, '$,.2f', ' €') },
+      { label: 'Preparation cost', value: getFormattedPrice(preparationCost, '$,.2f', ' €')},
+      { label: 'vehicle registration', value: getFormattedPrice(registrationCost, '$,.2f', ' €') },
+      { label: 'license plates', value: getFormattedPrice(licensePlateCost, '$,.2f', ' €') },
+      { label: 'Delivery', value: getFormattedPrice(transportationCost, '$,.2f', ' €') },
+      buyingType !== 'buy' &&
+        { label: `${buyingType} rate`, value: `${getFormattedPrice(monthlyInstallment, '$,.2f', '', '€')} per month` },
+      buyingType !== 'buy' &&
+        { label: 'Running time (months)', value: `${paybackPeriod} months` },
+      buyingType !== 'buy' &&
+        { label: 'Deposit', value: getFormattedPrice(deposit, '$,.2f', ' €') }
+    ],
+    overallRate: {
+      label: 'Your overall rate',
+      value: buyingType === 'buy' ? currentSalesPrice : monthlyInstallment
+    }
+  };
+}
+
+describe('AdditionalOrderInfo', () => {
+  it('renders AdditionalOrderInfo component without error', () => {
+    const objectData = {
+      customerFirstname: 'firstName',
+      customerLastname: 'lastName',
+      currentSalesPrice: 12000,
+      preparationCost: 1200,
+      registrationCost: 1000,
+      licensePlateCost: 1200,
+      transportationCost: 3000,
+      monthlyInstallment: 1000,
+      paybackPeriod: 48,
+      deposit: 5000
+    }
+
+    const additionalOrderInfoProps = {
+      ...commonProps,
+      buyingType: 'leasing',
+      additionalOrderData: additionalOrderData('leasing', objectData)
+    }
+    const { container } = render(<AdditionalOrderInfo {...additionalOrderInfoProps} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('renders AdditionalOrderInfo component without some data', () => {
+    const objectData = {
+      customerFirstname: 'firstName',
+      customerLastname: 'lastName',
+      currentSalesPrice: 12000,
+      preparationCost: 1200,
+      registrationCost: 1000
+    }
+
+    const additionalOrderInfoProps = {
+      ...commonProps,
+      buyingType: 'leasing',
+      additionalOrderData: additionalOrderData('leasing', objectData)
+    }
+    const { container } = render(<AdditionalOrderInfo {...additionalOrderInfoProps} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('renders AdditionalOrderInfo component with "buy" buying type', () => {
+    const objectData = {
+      customerFirstname: 'firstName',
+      customerLastname: 'lastName',
+      currentSalesPrice: 12000,
+      preparationCost: 1200,
+      registrationCost: 1000
+    }
+
+    const additionalOrderInfoProps = {
+      ...commonProps,
+      buyingType: 'buy',
+      additionalOrderData: additionalOrderData('buy', objectData)
+    }
+    const { container } = render(<AdditionalOrderInfo {...additionalOrderInfoProps} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('renders AdditionalOrderInfo component without any data', () => {
+    const objectData = {};
+
+    const additionalOrderInfoProps = {
+      ...commonProps,
+      buyingType: 'leasing',
+      additionalOrderData: additionalOrderData('leasing', objectData)
+    }
+    const { container } = render(<AdditionalOrderInfo {...additionalOrderInfoProps} />);
+    expect(container).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import { render } from '@testing-library/react'
+import OrderStatusSection from '../../../../../source/components/UserDashboardPage/sections/OrderStatusSection/OrderStatusSection';
+import { car } from './mockedPendingRequestedCar';
+
+const t = (phrase: string | string[], options: object) => {
+  if (options) {
+    const value = Object.values(options).map((option) => option)
+    return `${phrase} ${value}`;
+  }
+  return phrase;
+}
+const leasingCar = car;
+const financingCar = { ...car, buyingType: 'financing' };
+const buyCar = { ...car, buyingType: 'buy' };
+
+const commonProps = {
+  t,
+  isFetching: false,
+  getSupportedImageFormat: () => {
+    return 'https://images.autode-dev.de/carimage/28121b1a-398c-4e9c-9097-51be545817c5/RQ_mHNek5hIk/small-cached.webp'
+  },
+  redirectToUrl: () => {},
+}
+
+describe('OrderStatusSection', () => {
+  it('renders OrderStatusSection component without error', () => {
+    const orderStatusSectionProps = {
+      ...commonProps,
+      orderedCars: [
+        leasingCar,
+        financingCar,
+        buyCar
+      ]
+    }
+    const { container } = render(<OrderStatusSection {...orderStatusSectionProps} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('renders OrderStatusSection component without cars', () => {
+    const orderStatusSectionProps = {
+      ...commonProps,
+      orderedCars: [] as any[]
+    }
+    const { container } = render(<OrderStatusSection {...orderStatusSectionProps} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('renders OrderStatusSection component with additional data', () => {
+    const orderStatusSectionProps = {
+      ...commonProps,
+      withAdditionalData: true,
+      orderedCars: [
+        leasingCar,
+        financingCar,
+        buyCar
+      ]
+    }
+    const { container } = render(<OrderStatusSection {...orderStatusSectionProps} />);
+    expect(container).toBeInTheDocument();
+  });
+});

package/__tests__/components/UserDasboardPage/sections/OrderStatusSection/mockedPendingRequestedCar.js

@@ -0,0 +1,69 @@
+export const car = {
+  _id: '63e12296aeb426dad4af5e5c',
+  odooLead: 213907,
+  buyingType: 'leasing',
+  car: {
+    _id: '30b7bdeb-c193-4dc3-9f92-86680c9fcf59',
+    metaData: {
+      creationDate: 1675668285,
+      modificationDate: 1676979836,
+      ownerId: 'ZdHm8pCH0nWnIDdky6rm37JouFv1',
+      tsn: null,
+      codeKBA: null,
+      codeDAT: null,
+      codeSchwacke: null,
+      codeJato: null,
+      mainImageId: 'HekeLJ2ehJ9R',
+      secImageId: 'CdhVrQF7kXgP',
+      thirdImageId: 'oYLuytuZTBSb',
+      vehicleId: 'F6DF54',
+      imagesCount: 0,
+      allImagesCount: 13,
+      postProcessingConfigurationId: null,
+      imagePackageID: null,
+      imagesByApp: false,
+      ownerName: 'Guardian of Auto.de',
+      imagesRemovedBg: true
+    },
+    mainData: {
+      make: 'Fiat',
+      model: '500',
+      subModel: '1,0 GSE HYBRID PIU DOLCEVITA MJ22',
+      series: '500',
+      trimLine: null,
+      vehicleClass: 'selector_vehicleClass_car',
+      category: 'selector_category_convertible',
+      modelDescription: '',
+      condition: 'selector_condition_new',
+      usageType: 'selector_unknown',
+      firstRegistration: null,
+      mileage: 15,
+      doors: 3,
+      seats: 4,
+      constructionYear: null,
+      constructionDate: null,
+      firstModelsProductionDate: null,
+      countryVersion: null,
+      numberOfPreviousOwners: 0,
+      nonSmokerVehicle: null,
+      damageUnrepaired: null,
+      accidentDamaged: false,
+      roadworthy: true,
+      damageByHail: null,
+      taxi: null,
+      damaged: false
+    },
+    createdAt: '2023-02-06T15:53:58.836Z',
+    currentSalesPrice: 30666,
+    delivery: true,
+    monthlyInstallment: 401.28,
+    paybackPeriod: 36,
+    registration: true,
+    request: 'REQ228794',
+    selfPickup: false,
+    status: 'selector_status_handing_over',
+    updatedAt: '2023-02-10T09:31:31.859Z',
+    user: 'eGWQxSdo97UPkTlYmJrNZVNQCdy1',
+    wonStatus: 'pending'
+  }
+}

package/package.json

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

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

@@ -1,9 +1,10 @@
-@import '../../../../../theme/theme.styl'
-@import '../../../../../theme/mixins.styl'
+@import '../../../../theme/theme.styl'
+@import '../../../../theme/mixins.styl'
 
 .container
   padding: 8px 8px 16px
-  border-top: 1px solid rgba(76,78,100,0.12)
+  border-top: 1px solid rgba(76,78,100,0.12);
+
   +media-tablet-landscape-up()
     padding: 12px 16px
     display: grid

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

@@ -16,13 +16,19 @@ interface IAdditionalOrderData {
   };
 }
 
+interface TFunction {
+  <T = string>(key: string, options?: object): T;
+  <T = string>(keys: string[], options?: object): T;
+}
+
 interface IAdditionalOrderInfo {
-  t: i18n.TFunction;
+  t: TFunction;
   additionalOrderData: IAdditionalOrderData;
   redirectToUrl: (url: string) => void;
+  buyingType: string;
 }
 
-const AdditionalOrderInfo = ({ t, additionalOrderData, redirectToUrl }: IAdditionalOrderInfo) => {
+const AdditionalOrderInfo = ({ t, additionalOrderData, redirectToUrl, buyingType }: IAdditionalOrderInfo) => {
   const { addressData, carPriceData, overallRate } = additionalOrderData;
 
   const redirectToContactPage = () => {
@@ -47,7 +53,7 @@ const AdditionalOrderInfo = ({ t, additionalOrderData, redirectToUrl }: IAdditio
           {carPriceData.map((data) => {
             const { value, label } = data;
             return (
-              <div className={styles.flexContainer} key={label}>
+              <div key={label} className={styles.flexContainer}>
                 <div className={styles.labelText}>{label}</div>
                 <div className={styles.labelText}>{value}</div>
               </div>
@@ -62,7 +68,7 @@ const AdditionalOrderInfo = ({ t, additionalOrderData, redirectToUrl }: IAdditio
                 price={overallRate.value}
                 numbersAfterDot={2}
                 isNew
-                monthly='mtl'
+                monthly={buyingType !== 'buy' ? 'mtl' : ''}
                 className={styles.totalPrice}
                 afterCommaClassName={styles.decimals}
                 unitClassName={styles.unit}

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

@@ -8,12 +8,15 @@ import { Skeleton } from '@mui/material';
 
 import { getFormattedPrice } from '../../../../framework/utils/CommonUtils';
 
-import i18n from 'i18next';
+interface TFunction {
+  <T = string>(key: string, options?: object): T;
+  <T = string>(keys: string[], options?: object): T;
+}
 
 interface IOrderStatusSection {
   getSupportedImageFormat: (id: string, mainImageId: string, size: 'small' | 'medium' | 'large') => string;
   redirectToUrl: (url: string) => void;
-  t: i18n.TFunction;
+  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
@@ -35,7 +38,7 @@ const OrderStatusSection = ({
   const renderRequestedCars = () => {
     return (
       <>
-        {!!orderedCars && orderedCars.map((orderedCar, index) => {
+        {!!orderedCars && orderedCars.map((orderedCar: any, index: number) => {
           const { car: { _id } } = orderedCar;
           const { car: { mainData: { make, model, subModel } } } = orderedCar;
           const { car: { metaData: { mainImageId } }} = orderedCar;
@@ -54,9 +57,9 @@ const OrderStatusSection = ({
             registrationCost,
             transportationCost,
             customerAddress: {
-              customerFirstname,
-              customerLastname
-            }
+              customerFirstname = '',
+              customerLastname = ''
+            } = {}
           } = orderedCar;
 
           const additionalOrderData = {
@@ -70,20 +73,24 @@ const OrderStatusSection = ({
               { label: 'vehicle registration', value: getFormattedPrice(registrationCost, '$,.2f', ' €') },
               { label: 'license plates', value: getFormattedPrice(licensePlateCost, '$,.2f', ' €') },
               { label: 'Delivery', value: getFormattedPrice(transportationCost, '$,.2f', ' €') },
-              { label: `${buyingType} rate`, value: buyingType !== 'buy' ? `${getFormattedPrice(monthlyInstallment, '$,.2f', '', '€')} per month` : getFormattedPrice(monthlyInstallment, '$,.2f', ' €') },
-              { label: 'Running time (months)', value: `${paybackPeriod} months` },
-              { label: 'Deposit', value: getFormattedPrice(deposit, '$,.2f', ' €') }
+              buyingType !== 'buy' &&
+                { label: `${buyingType} rate`, value: `${getFormattedPrice(monthlyInstallment, '$,.2f', '', '€')} per month` },
+              buyingType !== 'buy' &&
+                { label: 'Running time (months)', value: `${paybackPeriod} months` },
+              buyingType !== 'buy' &&
+                { label: 'Deposit', value: getFormattedPrice(deposit, '$,.2f', ' €') }
             ],
             overallRate: {
               label: 'Your overall rate',
-              value: monthlyInstallment
+              value: buyingType === 'buy' ? currentSalesPrice : monthlyInstallment
             }
           };
 
           const additionalOrderInfoProps = {
             t,
             additionalOrderData,
-            redirectToUrl
+            redirectToUrl,
+            buyingType
           };
 
           const imageUrl = getSupportedImageFormat(_id, mainImageId, 'small');