@bytebrand/fe-ui-core 4.2.67 → 4.2.69

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react'
+import { render, fireEvent } from '@testing-library/react';
 import OrderStatusCar from '../../../../../source/components/UserDashboardPage/sections/OrderStatusSection/OrderStatusCar';
 
 const t = (phrase: string | string[], options: object) => {
@@ -8,7 +8,7 @@ const t = (phrase: string | string[], options: object) => {
     return `${phrase} ${value}`;
   }
   return phrase;
-}
+};
 
 const mockProps = {
   t,
@@ -25,7 +25,7 @@ const mockProps = {
   registration: false,
   currentSalesPrice: 30000,
   onClick: jest.fn()
-}
+};
 
 describe('OrderStatusCar', () => {
   it('renders OrderStatusCar component without error', () => {
@@ -45,7 +45,7 @@ describe('OrderStatusCar', () => {
 
   it('should display correct car image', () => {
     const { getByTestId } = render(<OrderStatusCar {...mockProps}/>);
-    const carImage = getByTestId('car-image')
+    const carImage = getByTestId('car-image');
     expect(carImage).toHaveAttribute('src', mockProps.imageUrl);
   });
 

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

@@ -0,0 +1,116 @@
+import { fireEvent, getByTestId, render, screen } from '@testing-library/react';
+// import userEvent from '@testing-library/user-event';
+import React from 'react';
+import RequestedCarsSection from '../../../../../source/components/UserDashboardPage/sections/RequestedCarsSection/RequestedCarsSection';
+
+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 requestedCars = [
+  {
+    car: {
+      _id: '28121b1a-398c-4e9c-9097-51be545817c5',
+      mainData: {
+        make: 'Volvo',
+        model: 'CX95',
+        subModel: 'Test123'
+      },
+      metaData: {
+        mainImageId: 'RQ_mHNek5hIk'
+      }
+    },
+    buyingType: 'leasing',
+    selfPickup: true,
+    paybackPeriod: 24,
+    monthlyInstallment: 2000,
+    request: '010203555',
+    currentSalesPrice: 50000
+  },
+  {
+    car: {
+      _id: '1234567890',
+      mainData: {
+        make: 'Volvo',
+        model: 'CX90',
+        subModel: 'Test155'
+      },
+      metaData: {
+        mainImageId: 'main image id'
+      }
+    },
+    buyingType: 'financing',
+    selfPickup: false,
+    paybackPeriod: 24,
+    monthlyInstallment: 1000,
+    request: '010203123',
+    currentSalesPrice: 20000
+  }
+];
+
+const mockProps = {
+  t,
+  requestedCars,
+  getSupportedImageFormat: jest.fn(),
+  redirectToCar: jest.fn(),
+  // tslint:disable-next-line:object-shorthand-properties-first
+  LinkRouter
+};
+
+describe('RequestedCarsSection', () => {
+  it('renders correctly', () => {
+    const { container } = render(<RequestedCarsSection {...mockProps} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('should display correct car data', () => {
+    const { container } = render(<RequestedCarsSection {...mockProps} />);
+    const requestedCars = mockProps.requestedCars;
+    requestedCars.forEach((element) => {
+      expect(container).toHaveTextContent(element.buyingType);
+    });
+  });
+  it('should display correct car make and model', () => {
+    const { getByText } = render(<RequestedCarsSection {...mockProps} />);
+    const requestedCars = mockProps.requestedCars;
+    requestedCars.forEach((element) => {
+      expect(getByText(`${element.car.mainData.make} ${element.car.mainData.model}`)).toBeInTheDocument();
+    });
+  });
+  it('should display correct car subModel', () => {
+    const { getByText } = render(<RequestedCarsSection {...mockProps} />);
+    const requestedCars = mockProps.requestedCars;
+    requestedCars.forEach((element) => {
+      expect(getByText(`${element.car.mainData.subModel}`)).toBeInTheDocument();
+    });
+  });
+  it('should display correct car request number', () => {
+    const { getByText } = render(<RequestedCarsSection {...mockProps} />);
+    const requestedCars = mockProps.requestedCars;
+    requestedCars.forEach((element) => {
+      expect(getByText(`${element.request}`)).toBeInTheDocument();
+    });
+  });
+  it('calls redirectToCar with car ID on button click', () => {
+    const { getByTestId } = render(<RequestedCarsSection {...mockProps} />);
+    const carWrapper = getByTestId(mockProps.requestedCars[0].car._id);
+    fireEvent.click(carWrapper);
+    expect(mockProps.redirectToCar).toHaveBeenCalledTimes(1);
+    expect(mockProps.redirectToCar).toHaveBeenCalledWith(mockProps.requestedCars[0].car._id); // assert the correct car ID
+  });
+});

package/package.json

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

package/setupTests.js

@@ -1 +1,8 @@
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom/extend-expect';
+global.matchMedia = global.matchMedia || function() {
+    return {
+        matches : false,
+        addListener : function() {},
+        removeListener: function() {}
+    }
+}

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

@@ -4,10 +4,12 @@ import OrderStatusCard from './OrderStatusCard';
 import Image from '../../../_common/Image/Image';
 import { getFormattedPrice } from '../../../../framework/utils/CommonUtils';
 
+// tslint:disable-next-line:interface-name
 interface TFunction {
   <T = string>(key: string, options?: object): T;
   <T = string>(keys: string[], options?: object): T;
 }
+// tslint:disable-next-line:interface-name
 interface IOrderStatusCar {
   make?: string;
   model?: string;

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

@@ -0,0 +1,97 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import RequestedCarsSection from './RequestedCarsSection';
+
+const requestedCars = [
+  {
+    car: {
+      _id: '1234567892',
+      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: 'financing',
+    selfPickup: false,
+    paybackPeriod: 24,
+    monthlyInstallment: 1000,
+    status: 'selector_status_registration',
+    request: '010203',
+    registration: false,
+    currentSalesPrice: 20000
+  }
+];
+
+const translates = {
+  'DealerDashboardPage:buyingType.buy': 'buy',
+  'DealerDashboardPage:buyingType.leasing': 'leasing',
+  'DealerDashboardPage:buyingType.financing': 'financing',
+  'DealerDashboardPage:paybackPeriod': 'payback period',
+  'DealerDashboardPage:currentSalesPrice': 'current sales price',
+  'DealerDashboardPage:monthlyInstallment': 'monthly installment',
+  'DealerDashboardPage:requestedCars.requestedCarsTitle':'Requested cars',
+  'DealerDashboardPage:requestedCars.toOffer': 'To offer',
+  'DealerDashboardPage:requestedCars.customerService':'Support',
+  'DealerDashboardPage:requestedCars.customerServiceText':'Do you have questions about your desired vehicle or about car financing, delivery or registration? Please use the contact form and let us know your question. We will get back to you as soon as possible. Thank you very much.',
+  'DealerDashboardPage:requestedCars.contact':'Contact'
+}
+
+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 LinkRouter = ({ children, link }) => {
+  return (
+    <a href={link} >
+      { children }
+    </a>
+  );
+};
+const initHotjar = () => {
+  console.log('Hotjar works')
+};
+
+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',
+  requestedCars,
+  LinkRouter,
+  initHotjar
+};
+
+
+storiesOf('userDashboard', module)
+  .add('RequestedCarsSection', () => (
+    <RequestedCarsSection {...props} />
+  ));

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

@@ -0,0 +1,145 @@
+@import '../../../../theme/mixins.styl'
+
+.requestedCarsSectionWrapper
+    border-right: 1px solid rgba(76, 78, 100, 0.12)
+    width: 219px!important
+    padding: 28px 10px 21px
+    cursor: pointer
+    display: flex!important;
+    flex-direction: column;
+    height: 305px;
+    justify-content: space-between;
+    +media-tablet-landscape-down()
+      width: 100% !important;
+      padding: 28px 10px 21px;
+
+ .carsContainer 
+  display: flex;
+  +media-tablet-landscape-down()
+      width: 93vw;
+      overflow-x: scroll;
+
+
+.model
+    font-style: normal;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 24px;
+    text-align: center;
+    letter-spacing: 0.15px;
+    color: rgba(76, 78, 100, 0.87);
+    max-height: 48px
+    display: flex
+    justify-content: center
+    -webkit-line-clamp: 1;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    height: 26px;
+
+.subModel
+    font-style: normal;
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 16px;
+    text-align: center;
+    letter-spacing: 0.15px;
+    color: rgba(76, 78, 100, 0.87);
+    width: 100%;
+    -webkit-line-clamp: 1;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    height: 16px;
+
+.payment
+    height: 20px;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 20px;
+    text-align: center;
+    letter-spacing: 0.15px;
+    color: rgba(76, 78, 100, 0.87);
+    +media-tablet-landscape-down()
+      height: 40px;
+    
+.req
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 16px;
+    text-align: center;
+    letter-spacing: 0.4px;
+    color: rgba(76, 78, 100, 0.87);
+
+.offerButton
+    display: flex;
+    justify-content: center;
+    margin-top: 8px;
+    [class*='MuiButtonBase-root']
+        width: 187px
+        
+.container
+  display: flex
+  flex-direction: row
+
+.defaultLayout
+  display: flex
+  flex-direction: row
+  justify-content: space-around
+  +media-tablet-landscape-down()
+    width: 100% !important;
+
+.image
+  max-height: 164px;
+  overflow: hidden;
+
+.sliderContainer
+   width: 720px;
+   +media-tablet-landscape-down()
+        width: 90vw;
+  :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: 0px
+
+      .slick-prev::after
+        transform: rotate(180deg) translateY(-50%)
+        right: 0
+
+      .slick-prev
+        left: -5px!important
+        top:50%!important
+
+      .slick-next
+        right: -5px!important
+        top:50%!important

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

@@ -0,0 +1,126 @@
+import React, { useEffect } from 'react';
+import styles from './RequestedCarsSection.styl';
+
+import Slider from 'react-slick';
+import DashboardSection from '../../../containers/DasboardSection/DashboardSection';
+import SupportSection from './SupportSection';
+import Image from '../../../_common/Image/Image';
+import { Hidden, Visible } from 'react-grid-system';
+import { getFormattedPrice } from '../../../../framework/utils/CommonUtils';
+// import { history } from '../../../../../AppRouter';
+import Button from '../../../_common/Button/Button';
+
+interface IWithRouter {
+  children?: JSX.Element;
+}
+// tslint:disable-next-line:interface-name
+interface TFunction {
+  <T = string>(key: string, options?: object): T;
+  <T = string>(keys: string[], options?: object): T;
+}
+
+interface IRequestedCarsSection {
+  redirectToCar: (id: string) => void;
+  getSupportedImageFormat: (id: string, mainImageId: string, size: 'small' | 'medium' | 'large') => string;
+  requestedCars: any[];
+  t: TFunction;
+  LinkRouter:any;
+  initHotjar:() => void;
+}
+
+const RequestedCarsSection = ({ t, getSupportedImageFormat, requestedCars, redirectToCar, LinkRouter }: IRequestedCarsSection) => {
+  const onDetailsClick = (event: React.MouseEvent, carId: string) => {
+    redirectToCar(carId);
+    event.preventDefault();
+    event.stopPropagation();
+    // history.push(`/search/vehicle/${carId}`);
+  };
+
+  const renderItems = () => {
+    if (requestedCars && requestedCars.length > 0) {
+      const carsCard = requestedCars.map((car) => {
+        if (car && car.car) {
+          const { car: { mainData: { make, model, subModel } } } = car;
+          const { car: { _id, metaData: { mainImageId } } } = car;
+          const { buyingType, paybackPeriod, monthlyInstallment, request, currentSalesPrice } = car;
+          const imageUrl = getSupportedImageFormat(_id, mainImageId, 'small');
+          return (
+            <div key={_id} className={styles.requestedCarsSectionWrapper} data-testid={_id} onClick={(e: React.MouseEvent<HTMLDivElement>) => onDetailsClick(e, _id)}>
+              <div className={styles.model}>{make} {model}</div>
+              <div className={styles.subModel}>{subModel}</div>
+              <Image className={styles.image} width='100%' ratioW={4} ratioH={3} data-testid='car-image' src={imageUrl} />
+              <div className={styles.req}>{request}</div>
+              {
+                (buyingType !== 'buy')
+                ? (<div className={styles.payment}> {t(`DealerDashboardPage:buyingType.${buyingType}`)}, {t('DealerDashboardPage:paybackPeriod', { paybackPeriod })}, {t('DealerDashboardPage:monthlyInstallment', { monthlyInstallment: getFormattedPrice(monthlyInstallment, '$,.2f') })}</div>)
+                : (<div className={styles.payment}>
+                  {t(`DealerDashboardPage:buyingType.${buyingType}`)}, {t('DealerDashboardPage:currentSalesPrice', { currentSalesPrice: getFormattedPrice(currentSalesPrice) })}
+                  </div>)
+              }
+              <div></div>
+              <div className={styles.offerButton}>
+                <Button variant='outlined' size='small' onClick={(e: React.MouseEvent<HTMLButtonElement>) => { onDetailsClick(e, _id); }}>{t('DealerDashboardPage:requestedCars.toOffer')}</Button>
+              </div>
+            </div>
+          );
+        }
+      });
+      return carsCard.reverse();
+    }
+  };
+
+  const renderSlider = () => {
+    const sliderProps = {
+      className: 'react-slider-container',
+      slidesToShow: 3,
+      slidesToScroll: 1,
+      dots: false,
+      arrow: false,
+      rows: 1,
+      infinity: false
+    };
+    return (
+      <>
+        <Visible xs sm md>
+          <div className={styles.defaultLayout}>
+            {renderItems()}
+          </div>
+        </Visible>
+        <Hidden xs sm md>
+          {(requestedCars.length >= 3) ? (
+            <div className={styles.sliderContainer}>
+              <Slider {...sliderProps}>
+                {renderItems()}
+              </Slider>
+            </div>) :
+            (<div className={styles.defaultLayout}>
+              {renderItems()}
+            </div>)
+          }
+        </Hidden>
+      </>
+    );
+  };
+  const SupportSectionProps = {
+    t,
+    Link:LinkRouter
+  };
+
+  return (
+    <>
+      {requestedCars.length > 0 ? (
+        <DashboardSection title={t('DealerDashboardPage:requestedCars.requestedCarsTitle')}>
+          <div className={styles.carsContainer}>
+            <div className={styles.wrapper}>
+              {renderSlider()}
+            </div>
+            <SupportSection {...SupportSectionProps} />
+          </div>
+        </DashboardSection>
+      ) : (
+        null
+      )}
+    </>
+  );
+};
+export default RequestedCarsSection;

package/source/components/UserDashboardPage/sections/RequestedCarsSection/SupportSection.styl

@@ -0,0 +1,47 @@
+@import '../../../../theme/mixins.styl'
+.supportSection
+    padding: 22px 20px
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    +media-tablet-landscape-down()
+        padding: 22px 10px;
+
+.circle
+    width: 56px;
+    height: 56px;
+    background: linear-gradient(0deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)), #666CFF;
+    border-radius: 56px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0px auto;
+.title
+    font-style: normal;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 32px;
+    text-align: center;
+    letter-spacing: 0.15px;
+    color: rgba(76, 78, 100, 0.87);
+
+.text
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 20px;
+    text-align: center;
+    letter-spacing: 0.15px;
+    color: rgba(76, 78, 100, 0.68);
+    +media-tablet-landscape-down()
+        width: 88vw
+
+
+.contactButton
+    display: flex;
+    justify-content: center;
+    margin-top: 8px;
+    [class*='MuiButtonBase-root']
+        background-color: rgba(0, 184, 0, 1);
+        width: 111px;
+        height: 42px;

package/source/components/UserDashboardPage/sections/RequestedCarsSection/SupportSection.tsx

@@ -0,0 +1,32 @@
+// import { Button, IconSVG } from '@bytebrand/fe-ui-core/common';
+import i18next from 'i18next';
+import IconSVG from '../../../_common/IconSVG/IconSVG';
+import Button from '../../../_common/Button/Button';
+import React from 'react';
+import styles from './SupportSection.styl';
+
+export interface IProps {
+  t: i18next.TFunction;
+  Link?: any;
+}
+const SupportSection: React.FunctionComponent<IProps> = ({ t , Link }) => {
+  return (
+        <div className={styles.supportSection}>
+            <div className={styles.circle}>
+                <IconSVG className={styles.icon} name='dashboardQuestionMark' customDimensions />
+            </div>
+            <div className={styles.title}>
+                {t('DealerDashboardPage:requestedCars.customerService')}
+            </div>
+            <div className={styles.text}>
+                {t('DealerDashboardPage:requestedCars.customerServiceText')}</div>
+            <div className={styles.contactButton}>
+                <Link to='/account/kontakt'>
+                    <Button size='small' color='success' variant='contained'>{t('DealerDashboardPage:requestedCars.contact')}</Button>
+                </Link>
+            </div>
+        </div>
+  );
+};
+
+export default SupportSection;

package/source/components/_common/Modal/modals/PreviewCookieModal/PreviewCookieModal.tsx

@@ -12,7 +12,7 @@ interface IPreviewCookieModal {
 
 const PreviewCookieModal = ({ toggleModal, setModal }: IPreviewCookieModal) => {
   const onAcceptAll = () => {
-  localStorage.setItem('cookieConfig', JSON.stringify({}));
+    localStorage.setItem('cookieConfig', JSON.stringify({}));
     updateCookieList();
     toggleModal();
   };

package/source/components/_common/OfferRequestButtonWrapper/OfferRequestButtonWrapper.tsx

@@ -54,6 +54,7 @@ const OfferRequestBtnWrapper: React.FunctionComponent<IOfferRequestButtonWrapper
 
             const getRequestButtonTitle = () => {
               if (isSale) return t('sidebar.requestOfferSale');
+              // tslint:disable-next-line:no-else-after-return
               else if (isAlternativeType) return t('sidebar.importRequest');
               else if (hasCheckout) return t('vehicleProps:title.toCheckoutCar');
               else if (isOfferRequested) return t('CheckoutPage:onlineCheckoutModal.redirectBtn');

package/source/framework/utils/CommonUtils.ts

@@ -15,6 +15,7 @@ import { SearchPage as SearchPageTranslate } from '../../locales/data';
 const PRICE_DEFAULT = DROP_DOWN_GROUP[PRICE].defaultValue;
 
 declare global {
+  // tslint:disable-next-line:interface-name
   interface Window {
     grantHotjarCookieConsent?: () => void;
     grantCookieConsent?: (list: string[]) => void;