@bytebrand/fe-ui-core 4.3.0 → 4.4.0

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

@@ -0,0 +1,335 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import FavoriteSection from '../../../../../source/components/UserDashboardPage/sections/FavoriteSection/FavoriteSection';
+import { observable } from 'mobx';
+import qs from 'qs';
+
+const t = (phrase: string | string[], options: object) => {
+  if (options) {
+    const value = Object.values(options).map((option) => option);
+    return `${phrase} ${value}`;
+  }
+  return phrase;
+};
+
+interface IWithRouter {
+  children?: JSX.Element;
+  link?: string;
+}
+const LinkRouter = ({ children, link }: IWithRouter) => {
+  return (
+    <a href={link} >
+      {children}
+    </a>
+  );
+};
+const favoriteCars = [
+  {
+    parkedFor: 'N/A',
+    id: 'c4c9141a-5e4c-4d75-9d0f-c2f1b8f31241',
+    mainImageId: ' ',
+    imagesCount: ' ',
+    hasInteriorExteriorPhoto: ' ',
+    title: {
+      make: 'Volkswagen',
+      model: 'Polo',
+      subModel: '1.0 TSI Style',
+      option: '',
+      to: ''
+    },
+    showNewLabel: false,
+    info: {
+      regDate: ' ',
+      mileage: 0,
+      gearbox: 'selector_gearbox_manualShift',
+      numberOfPreviousOwners: 0,
+      usageType: 'selector_unknown',
+      condition: 'selector_condition_new',
+      damaged: false,
+      driveType: 'selector_driveType_frontWheelDrive'
+    },
+    location: {
+      city: 't',
+      street: 't',
+      zipCode: 12345
+    },
+    consumption: {
+      fuel: 'selector_fuel_petrol',
+      consumptionCombined: 5.2,
+      consumptionPowerCombined: ' '
+    },
+    engineData: {
+      powerKW: 70,
+      powerPS: 70
+    },
+    environmentEmissions: {
+      co2: 118
+    },
+    offer: {
+      offerId: ' ',
+      autoDeOfferId: ' ',
+      offerFrom: 'selector_unknown',
+      offerSource: ' ',
+      offerAvailability: 'selector_unknown',
+      offerDescription: '',
+      deliveryDate: 1698969600,
+      deliveryPeriod: 'selector_deliveryPeriod_days270',
+      dealerHomepage: ' ',
+      closedDomain: ' ',
+      export: ' ',
+      commercial: ' ',
+      warranty: false,
+      rentingPossible: ' ',
+      newHuAu: true,
+      internalNumber: '118_92436S/3243',
+      availabilityMode: 'selector_availabilityMode_fromDate',
+      mobileDeOfferId: ' ',
+      as24DeOfferId: ' ',
+      elnOfferId: 'bd11b00a8d643e16b69c308360e5236b'
+    },
+    price: {
+      offerIndex: 0,
+      isStrike: false,
+      comparable: {
+        annualMileage: 10000,
+        firstInstallment: ' ',
+        paybackPeriod: 48,
+        withAddServices: ' ',
+        withTransportation: ' '
+      },
+      checkout: {
+        warrantyRates: [
+          0,
+          0,
+          0
+        ],
+        warrantyPackage: 0,
+        warrantyPeriod: 1,
+        admissionService: 0,
+        licensePlateFee: 0
+      },
+      common: {
+        firstRegistration: ' ',
+        mileage: 0,
+        currentSalesPrice: 30666,
+        highestPrice: 34232,
+        isStrikeShown: true,
+        isHybridOrElectric: false
+      },
+      financing: {
+        grossLoanAmountWithoutFinalInstallment: 0,
+        purchasePrice: 0,
+        hasPaymentProtection: false,
+        paymentProtectionInsurance: 0,
+        monthlyInstallment: 142,
+        oldMonthlyInstallment: 180,
+        annualMileage: 25000,
+        firstInstallment: 11900,
+        withTransportation: false,
+        withAddServices: true,
+        addServicesCostRaw: 799,
+        addServicesCost: 799,
+        transportationCostRaw: 499,
+        transportationCost: 499,
+        withFinalInstallment: true,
+        paybackPeriod: 72,
+        rawPaybackPeriod: 72,
+        nominalInterestRate: 3.92,
+        annualPercentageRate: 6.99,
+        financialInstitution: 'Santander Consumer Bank AG, Santander-Platz 1, 41061 Mönchengladbach',
+        periodInterestRate: [
+          {
+            duration: 12,
+            recommended: 70,
+            current: 88,
+            inEUR: ' ',
+            value: 18766,
+            highestValue: 30124.16
+          },
+          {
+            duration: 24,
+            recommended: 66,
+            current: 77,
+            inEUR: ' ',
+            value: 18766,
+            highestValue: 26358.64
+          },
+          {
+            duration: 36,
+            recommended: 60,
+            current: 66,
+            inEUR: ' ',
+            value: 18766,
+            highestValue: 22593.12
+          },
+          {
+            duration: 48,
+            recommended: 50,
+            current: 60,
+            inEUR: ' ',
+            value: 17920.2,
+            highestValue: 20539.2
+          },
+          {
+            duration: 60,
+            recommended: 40,
+            current: 50,
+            inEUR: ' ',
+            value: 14933.5,
+            highestValue: 17116
+          },
+          {
+            duration: 72,
+            recommended: 30,
+            current: 40,
+            inEUR: ' ',
+            value: 11946.8,
+            highestValue: 13692.8
+          },
+          {
+            duration: 84,
+            recommended: 20,
+            current: 30,
+            inEUR: ' ',
+            value: 8960.1,
+            highestValue: 10269.6
+          },
+          {
+            duration: 96,
+            recommended: 10,
+            current: 20,
+            inEUR: ' ',
+            value: 5973.4,
+            highestValue: 6846.4
+          }
+        ],
+        closingCosts: 0,
+        offersFinancing: true,
+        rateMode: 'dealer'
+      },
+      buy: {
+        withTransportation: false,
+        withAddServices: true,
+        withoutAddServices: true,
+        transportationCost: 499,
+        addServicesCost: 799,
+        currentSalesPriceExtra: 30666,
+        highestPriceExtra: 34232,
+        extraCost: 0
+      },
+      leasing: {
+        RWG: 7,
+        maxAge: 24,
+        maxMileage: 1000000,
+        isActive: true,
+        withTransportation: false,
+        withAddServices: false,
+        addServicesCostRaw: 799,
+        transportationCostRaw: 499,
+        addServicesCost: 799,
+        transportationCost: 499,
+        monthlyAddServices: 0,
+        monthlyTransportation: 0,
+        monthlyInstallment: 441,
+        oldMonthlyInstallment: 526,
+        firstInstallment: 20,
+        firstInstallmentMax: 2000,
+        annualMileage: 10000,
+        paybackPeriodRange: [
+          30,
+          36,
+          42,
+          48,
+          54,
+          60
+        ],
+        paybackPeriod: 48,
+        santanderPayBackMin: 250,
+        nominalInterestRate: 6.78,
+        financialInstitution: 'Santander Consumer Bank AG, Santander-Platz 1, 41061 Mönchengladbach',
+        grossLoanAmountWithoutFinalInstallment: 0,
+        hasPaymentProtection: false,
+        paymentProtectionInsurance: 1100,
+        leasingMode: 'default',
+        currentSalesPrice: 30666
+      },
+      abo: {
+        paybackPeriod: 6,
+        annualMileage: 10000
+      },
+      firstRegistration: ' ',
+      mileage: 0,
+      currentSalesPrice: 30666,
+      highestPrice: 34232,
+      isStrikeShown: true,
+      carId: 'c4c9141a-5e4c-4d75-9d0f-c2f1b8f31241',
+      offerName: 'financing',
+      vehicleId: 'c4c9141a-5e4c-4d75-9d0f-c2f1b8f31241',
+      vatRate: 19,
+      mlCurrentSalesPricePredicted: ' ',
+      historyPriceDifference: 3566,
+      historyPriceDifferencePerCent: 10,
+      margin: 30666,
+      toRound: false
+    },
+    internalNumber: '118_92436S/3243',
+    vin: '',
+    isOnline: true,
+    firstIsOnline: 1675668230,
+    url: '/search/vehicle/c4c9141a-5e4c-4d75-9d0f-c2f1b8f31241',
+    relativeScore: 0,
+    baseUrl: '',
+    offerSource: '',
+    crawledAt: '',
+    ownerName: 'Guardian of Auto.de',
+    modificationDate: '18.05.2023',
+    seoText: ''
+  }
+];
+const favoritesIDs = [
+  'b359d74f-bb96-4fca-9539-579792fe7c36'
+];
+const getFavoriteCarsMock = jest.fn();
+
+const aggStatsData = observable({
+  'b359d74f-bb96-4fca-9539-579792fe7c36': {
+    carId: 'b359d74f-bb96-4fca-9539-579792fe7c36',
+    totalFavCount: 3,
+    totalCarImpCount: 7399,
+    slidingCarImpCount: 10
+  },
+  get() {
+    return {
+      'b359d74f-bb96-4fca-9539-579792fe7c36': {
+        carId: 'b359d74f-bb96-4fca-9539-579792fe7c36',
+        totalFavCount: 3,
+        totalCarImpCount: 7399,
+        slidingCarImpCount: 10
+      }
+    };
+  }
+});
+const mockProps = {
+  t,
+  LinkRouter,
+  favoriteCars,
+  PLACEHOLDER_IMAGE_SMALL_URL: 'PLACEHOLDER_IMAGE_SMALL_URL',
+  favoriteStore: { favoriteCars, favoritesIDs, showList: true, getFavouriteCars: getFavoriteCarsMock, getFavoritesIDs: jest.fn() },
+  appStore: {},
+  carsStore: { aggStatsData, getAggStatsData: jest.fn() },
+  imagesStore: { getSupportedImageFormat: jest.fn() }
+};
+
+describe('FavoriteSection', () => {
+  test('calls getFavouriteCars when component is mounted', () => {
+    const { container } = render(<FavoriteSection {...mockProps as any} />);
+    expect(container).toBeInTheDocument();
+    // expect(mockProps.favoriteStore.getFavouriteCars).toHaveBeenCalledTimes(1);
+  });
+  test('should display correct car data', () => {
+    const { container } = render(<FavoriteSection {...mockProps as any} />);
+    mockProps.favoriteCars.forEach((element:any) => {
+      expect(container).toHaveTextContent(element.title.make);
+    });
+  });
+});

package/__tests__/utils/CommonUtils/getOfferSliders.test.ts

@@ -10,7 +10,8 @@ const expectedResultCDP = [
     max: 21666,
     value: 16100,
     unitName: 'modals:financing.euro',
-    caption: 'modals:financing.firstInstallment'
+    caption: 'modals:financing.firstInstallment',
+    withRangeLimit: true
   },
   {
     name: 'annualMileage',
@@ -33,7 +34,8 @@ const expectedResultCheckout = [
     max: 21666,
     value: 16100,
     unitName: 'modals:financing.euro',
-    caption: 'modals:financing.firstInstallment'
+    caption: 'modals:financing.firstInstallment',
+    withRangeLimit: true
   }
 ]
 

package/common.ts

@@ -136,7 +136,9 @@ import {
   StepButton,
   Accordion as MIAccordion,
   AccordionSummary,
-  AccordionDetails
+  AccordionDetails,
+  ListItemButton,
+  RadioGroup as MUIRadioGroup
 } from '@mui/material';
 import { createTheme } from '@mui/material/styles';
 
@@ -156,5 +158,7 @@ export {
   MIAccordion,
   AccordionSummary,
   AccordionDetails,
-  StyledComponent
+  StyledComponent,
+  ListItemButton,
+  MUIRadioGroup
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "description": "UI components for the auto.de project",
   "main": "index.ts",
   "module": "dist/common.js",
@@ -9,46 +9,25 @@
     "@babel/plugin-proposal-class-properties": "^7.16.7",
     "@babel/plugin-proposal-decorators": "^7.17.8",
     "@babel/plugin-transform-react-constant-elements": "^7.17.6",
-    "@babel/plugin-transform-runtime": "^7.17.0",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.0",
     "@bytebrand/car-schema-selectors": "^2.0.7",
-    "@bytebrand/fe-histoslider": "^2.1.3",
+    "@bytebrand/fe-histoslider": "3.0.0",
     "@bytebrand/i18n-dictionaries": "^0.7.5",
-    "@date-io/date-fns": "1.3.13",
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
-    "@mui/lab": "^5.0.0-alpha.90",
     "@mui/material": "^5.9.0",
     "@mui/styles": "^5.9.0",
     "@mui/x-date-pickers": "^5.0.0-beta.1",
-    "@testing-library/dom": "^9.0.1",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^11.2.6",
-    "@types/jest": "^29.4.0",
-    "@types/js-cookie": "^2.1.0",
-    "@types/uuid": "^8.3.1",
-    "axios": "^0.24.0",
-    "babel-jest": "^26.0.0",
     "classnames": "2.2.6",
-    "core-js": "2.5.7",
-    "d3-array": "^2.2.0",
-    "d3-format": "^1.3.2",
-    "d3-scale": "^2.1.0",
+    "d3-format": "1.4.5",
+    "d3-scale": "^2.2.2",
     "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-transform-stub": "^2.0.0",
     "js-cookie": "^2.2.0",
     "moment": "^2.29.1",
-    "moment-range": "^4.0.2",
     "rc-slider": "^8.6.13",
     "react": "^17.0.2",
     "react-device-detect": "^2.1.2",
@@ -59,10 +38,7 @@
     "react-scroll": "^1.7.13",
     "react-select": "^3.0.4",
     "react-slick": "^0.29.0",
-    "react-test-renderer": "^18.2.0",
-    "react-testing-library": "^8.0.1",
     "slick-carousel": "1.8.1",
-    "ts-jest": "^26.0.0",
     "uuid": "^8.3.2"
   },
   "devDependencies": {
@@ -73,23 +49,37 @@
     "@storybook/addon-links": "^5.1.11",
     "@storybook/addons": "^5.1.11",
     "@storybook/react": "^5.3.21",
+    "@testing-library/dom": "^9.0.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^11.2.6",
     "@types/classnames": "2.2.6",
     "@types/d3-format": "^1.3.1",
     "@types/i18next": "^12.1.0",
+    "@types/jest": "^29.4.0",
+    "@types/js-cookie": "^2.1.0",
     "@types/lodash": "^4.14.134",
     "@types/qs": "^6.9.7",
     "@types/rc-slider": "^9.3.1",
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.2",
     "@types/react-lazyload": "^2.5.0",
+    "@types/react-scroll": "^1.8.7",
     "@types/react-select": "^3.0.2",
     "@types/react-slick": "^0.23.4 ",
+    "@types/uuid": "^8.3.1",
     "autoprefixer": "^9.6.0",
     "babel-loader": "^8.0.6",
     "babel-plugin-minify-dead-code-elimination": "^0.5.0",
     "babel-plugin-transform-imports": "^2.0.0",
     "css-loader": "^3.2.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-junit": "^15.0.0",
+    "jest-stylus": "^0.1.2",
+    "jest-svg-transformer": "^1.0.0",
+    "jest-transform-stub": "^2.0.0",
     "lodash": "^4.17.15",
     "mobx": "4.6.0",
     "mobx-react": "5.4.3",
@@ -102,6 +92,7 @@
     "style-loader": "^1.0.0",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",
+    "ts-jest": "^26.0.0",
     "tslint": "^5.17.0",
     "tslint-config-airbnb": "^5.11.1",
     "tslint-loader": "^3.5.4",

package/source/components/AccordionWidget/AccordionWidget.tsx

@@ -15,7 +15,6 @@ import {
 
 import ExpansionPanel from '../_common/ExpansionPanel/ExpansionPanel';
 import Accordion from '../_common/AccordionWrapper/AccordionWrapper';
-// import AccordionItem from '../_common/AccordionWrapper/AccordionItem/AccordionItem';
 import VehicleProperty from '../VehicleSmallCard/VehicleData/VehicleProperty/VehicleProperty';
 import IconSVG from '../_common/IconSVG/IconSVG';
 import { getActualHighlights } from '../../framework/constants/highlights';
@@ -35,7 +34,7 @@ class AccordionWidget extends React.Component<IAccardionSectionProps, IAccardion
   }
 
   handleChange =
-      (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
+      (panel: string) => (_: React.SyntheticEvent, isExpanded: boolean) => {
         this.setState({ expanded: isExpanded ? panel : false });
       };
 
@@ -210,7 +209,6 @@ class AccordionWidget extends React.Component<IAccardionSectionProps, IAccardion
                 onChange={this.handleChange}
                 expanded={this.state.expanded}
                 defaultExpanded={section.expanded}
-                // titleClassName={styles.titleClassName}
               >
                 {section.component}
               </ExpansionPanel>

package/source/components/Breadcrumbs/Breadcrumbs.tsx

@@ -12,6 +12,7 @@ type LinkItem = { link: string, title: string };
 interface IBreadcrumbsProps {
   page: string;
   pageProps: any;
+  Link: any;
   infoBlockData: { contentMobile: string, title: string }[];
   t?: (key: string, options?: object) => string;
 }
@@ -32,7 +33,7 @@ class Breadcrumbs extends React.PureComponent<IBreadcrumbsProps> {
   };
 
   renderList = (list: LinkItem[]) => {
-    const { t = (phrase: string) => _get(breadcrumbsTranslate(), phrase.replace(':', '.'), phrase), page } = this.props;
+    const {t = (phrase: string) => _get(breadcrumbsTranslate(), phrase.replace(':', '.'), phrase), page, Link } = this.props;
 
     return list.map((item, index): React.ReactElement<any> => {
       const isLastItem: boolean = list.length - 1 === index;
@@ -43,7 +44,7 @@ class Breadcrumbs extends React.PureComponent<IBreadcrumbsProps> {
 
       return item.link
         ? <span className={linkClassName} onClick={this.props.pageProps.onBreadCrumbClick} key={index}>
-            <a href={page !== 'REFERENCE_VEHICLE_DETAILS' && item.link}>{item.title}</a>
+            <Link to={page !== 'REFERENCE_VEHICLE_DETAILS' && item.link}>{item.title}</Link>
           </span>
         : <span className={textClassName} key={index}>
             {bigItem}
@@ -90,4 +91,3 @@ class Breadcrumbs extends React.PureComponent<IBreadcrumbsProps> {
 }
 
 export default Breadcrumbs;
-// export default withRouter(translate(['common'])(Breadcrumbs));