@bytebrand/fe-ui-core 4.2.68 → 4.2.70

package/__tests__/components/Checkout/PaymentTypeCard/PaymentTypeCard.test.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import PaymentTypeCard from '../../../../source/components/Checkout/RadioCards/PaymentTypeCard/PaymentTypeCard';
+
+describe('PaymentTypeCard', () => {
+  it('should render correctly', () => {
+    const { getByText } = render(<PaymentTypeCard value="test-value" label="Test Label" />);
+    expect(getByText('Test Label')).toBeInTheDocument();
+  });
+
+  it('should handle onChange event correctly', () => {
+    const handleChange = jest.fn();
+    const { getByRole } = render(<PaymentTypeCard value="test-value" label="Test Label" onChange={handleChange} />);
+    fireEvent.click(getByRole('radio'));
+    expect(handleChange).toHaveBeenCalledTimes(1);
+  });
+
+  it('should handle onChange event correctly if we have checkbox="true"', () => {
+    const handleChange = jest.fn();
+    const { getByRole } = render(
+      <PaymentTypeCard
+        checkbox
+        value="test-value"
+        label="Test Label"
+        onChange={handleChange}
+      />
+    );
+    fireEvent.click(getByRole('checkbox'));
+    fireEvent.click(getByRole('checkbox'));
+    expect(handleChange).toHaveBeenCalledTimes(2);
+  })
+
+  it('should be correct classes on depend on prop "disabled, checked, error"', () => {
+    const handleChange = jest.fn();
+    const { getByTestId } = render(
+      <PaymentTypeCard
+        value="test-value"
+        label="Test Label"
+        onChange={handleChange}
+        disabled
+        checked
+        error
+      />
+    );
+    const container = getByTestId('container');
+    expect(container).toHaveClass('disabled');
+    expect(container).toHaveClass('checked');
+    expect(container).toHaveClass('error');
+  })
+});

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

@@ -3,7 +3,7 @@ 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) => {
+const t = (phrase: string | string[], options?: object): string | string[] => {
   if (options) {
     const value = Object.values(options).map((option) => option)
     return `${phrase} ${value}`;
@@ -40,12 +40,11 @@ const additionalOrderData = (buyingType: 'buy' | 'leasing' | 'financing', object
       { label: 'vehicle registration', value: getFormattedPrice(registrationCost, '$,.2f', ' €') },
       { label: 'license plates', value: getFormattedPrice(licensePlateCost, '$,.2f', ' €') },
       { label: 'Delivery', value: getFormattedPrice(transportationCost, '$,.2f', ' €') },
-      buyingType !== 'buy' &&
+      ...(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',

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

@@ -2,7 +2,7 @@ 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) => {
+const t = (phrase: string | string[], options?: object): string | string[] => {
   if (options) {
     const value = Object.values(options).map((option) => option)
     return `${phrase} ${value}`;

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import { render } from '@testing-library/react'
 import OrderStatusSection from '../../../../../source/components/UserDashboardPage/sections/OrderStatusSection/OrderStatusSection';
-import { car } from './mockedPendingRequestedCar';
+import { car } from '../../../../mockedData/mockedPendingRequestedCar';
 
-const t = (phrase: string | string[], options: object) => {
+const t = (phrase: string | string[], options?: object): string | string[] => {
   if (options) {
     const value = Object.values(options).map((option) => option)
     return `${phrase} ${value}`;

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

@@ -68,7 +68,6 @@ const mockProps = {
   requestedCars,
   getSupportedImageFormat: jest.fn(),
   redirectToCar: jest.fn(),
-  initHotjar: jest.fn(),
   // tslint:disable-next-line:object-shorthand-properties-first
   LinkRouter
 };

package/package.json

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

package/source/components/Checkout/RadioCards/PaymentTypeCard/PaymentTypeCard.tsx

@@ -12,8 +12,6 @@ type PaymentTypeCardProps = {
   checked?: boolean;
 
   onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean, value: any) => void;
-  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
-  onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
   onCheckoutModalClick?: (modalContent: object) => void;
 
   // Custom radio button props
@@ -51,8 +49,6 @@ const PaymentTypeCard = ({
   checkbox,
   squareRadioClassname,
   onChange,
-  // onBlur,
-  // onFocus,
   onCheckoutModalClick,
   paymentClassName
 }: PaymentTypeCardProps) => {
@@ -93,16 +89,7 @@ const PaymentTypeCard = ({
 
     onChange(event, checked, value);
   };
-  const onKeyPress = (event: any) => {
-    const checked = input.checked;
-    const value = input.value;
 
-    if (disabled) {
-      return false;
-    }
-
-    onChange(event, checked, value);
-  };
   const containerClasses = classnames(
     styles.container,
     paymentClassName,
@@ -132,63 +119,62 @@ const PaymentTypeCard = ({
   };
 
   return (
-    <div className={containerClasses} tabIndex={1}>
+    <div data-testid='container' className={containerClasses} tabIndex={1}>
       <CardActionArea>
-      <label className={labelClasses}>
-        {/* Visual representation of the radio button */}
-        <div className={styles.radioContentBlock}>
-          {iconName && <span className={styles.payTypeIcon}><IconSVG name={iconName} /></span>}
-          <div className={styles.payTypeRadioWrapper}>
-            <div className={styles.radioLabelWrapper}>
-              <span className={styles.labelContent}>
-                <span ref={inputRef}>{label}</span>
-              </span>
-              {price != null &&
-                <span>
-                  <VehicleFormattedPrice
-                    className={styles.price}
-                    monthly={monthly}
-                    toRound={false}
-                    numbersAfterDot={Math.round(price) === price ? 0 : 2}
-                    price={price}
-                    unit='€'
-                    size='medium'
-                    isNew={true}
-                    numberContainerClassName={styles.numberContainer}
-                    unitWrapperClassName={styles.unitWrapper}
-                    unitClassName={monthly ? styles.unit : styles.buyUnit}
-                    monthlyClassName={styles.monthly}
-                    afterCommaClassName={styles.afterComma}
-                    disablePrice={disabled}
-                  />
-                </span>}
-              <span className={radioClasses}>{checked && <IconSVG name='common_CheckBlue' className={styles.checkBlueIcon} />}
-              </span>
-              {/* Hidden radio input for SEO and HTML semantics */}
-              <input
-                className={styles.input}
-                type={checkbox ? 'checkbox' : 'radio'}
-                name={name}
-                checked={checked}
-                value={value}
-                disabled={disabled}
-                tabIndex={-1}
-                onChange={checkbox ? onChangeCheckbox : onChangeRadio}
-                ref={setInputRef}
-              />
+        <label className={labelClasses}>
+          {/* Visual representation of the radio button */}
+          <div className={styles.radioContentBlock}>
+            {iconName && <span className={styles.payTypeIcon}><IconSVG name={iconName} /></span>}
+            <div className={styles.payTypeRadioWrapper}>
+              <div className={styles.radioLabelWrapper}>
+                <span className={styles.labelContent}>
+                  <span ref={inputRef}>{label}</span>
+                </span>
+                {price != null &&
+                  <span>
+                    <VehicleFormattedPrice
+                      className={styles.price}
+                      monthly={monthly}
+                      toRound={false}
+                      numbersAfterDot={Math.round(price) === price ? 0 : 2}
+                      price={price}
+                      unit='€'
+                      size='medium'
+                      isNew={true}
+                      numberContainerClassName={styles.numberContainer}
+                      unitWrapperClassName={styles.unitWrapper}
+                      unitClassName={monthly ? styles.unit : styles.buyUnit}
+                      monthlyClassName={styles.monthly}
+                      afterCommaClassName={styles.afterComma}
+                      disablePrice={disabled}
+                    />
+                  </span>}
+                <span className={radioClasses}>{checked && <IconSVG name='common_CheckBlue' className={styles.checkBlueIcon} />}
+                </span>
+                {/* Hidden radio input for SEO and HTML semantics */}
+                <input
+                  className={styles.input}
+                  type={checkbox ? 'checkbox' : 'radio'}
+                  name={name}
+                  checked={checked}
+                  value={value}
+                  disabled={disabled}
+                  tabIndex={-1}
+                  onChange={checkbox ? onChangeCheckbox : onChangeRadio}
+                  ref={setInputRef}
+                />
+              </div>
+              <span className={styles.infoContent}>{infoContent}</span>
             </div>
-            <span className={styles.infoContent}>{infoContent}</span>
           </div>
-        </div>
-      </label>
-      {tooltip &&
-        <span style={{ position: 'absolute', left: titleWidth + 16, top: 25 }}>
-          <IconSVG customDimensions className={styles.infoTransparent} onClick={() => onCheckoutModalClick(modalProps)} name='infoIcon' />
-        </span>
-      }
+        </label>
+        {tooltip &&
+          <span style={{ position: 'absolute', left: titleWidth + 16, top: 25 }}>
+            <IconSVG customDimensions className={styles.infoTransparent} onClick={() => onCheckoutModalClick(modalProps)} name='infoIcon' />
+          </span>
+        }
       </CardActionArea>
     </div>
-
   );
 };
 

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

@@ -1,24 +1,16 @@
 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';
 
+import { TFunction } from '../../../../framework/types/types';
+
 interface IAdditionalOrderData {
   addressData: { label: string, value: string }[];
   carPriceData: { label: string, value: string | number }[];
-  overallRate: {
-    label: string,
-    value: number
-  };
-}
-
-interface TFunction {
-  <T = string>(key: string, options?: object): T;
-  <T = string>(keys: string[], options?: object): T;
+  overallRate: { label: string, value: number };
 }
 
 interface IAdditionalOrderInfo {

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

@@ -130,7 +130,7 @@
         background-size: cover
 
       .slick-next::after
-        left: 10px
+        left: 0px
 
       .slick-prev::after
         transform: rotate(180deg) translateY(-50%)
@@ -142,6 +142,4 @@
 
       .slick-next
         right: -5px!important
-        top:50%!important
-
-
+        top:50%!important

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

@@ -4,8 +4,6 @@ import styles from './RequestedCarsSection.styl';
 import Slider from 'react-slick';
 import DashboardSection from '../../../containers/DasboardSection/DashboardSection';
 import SupportSection from './SupportSection';
-import i18next from 'i18next';
-import { translate } from 'react-i18next';
 import Image from '../../../_common/Image/Image';
 import { Hidden, Visible } from 'react-grid-system';
 import { getFormattedPrice } from '../../../../framework/utils/CommonUtils';
@@ -30,10 +28,7 @@ interface IRequestedCarsSection {
   initHotjar:() => void;
 }
 
-const RequestedCarsSection = ({ t, getSupportedImageFormat, requestedCars, redirectToCar, LinkRouter, initHotjar }: IRequestedCarsSection) => {
-  useEffect(() => {
-    initHotjar();
-  },        []);
+const RequestedCarsSection = ({ t, getSupportedImageFormat, requestedCars, redirectToCar, LinkRouter }: IRequestedCarsSection) => {
   const onDetailsClick = (event: React.MouseEvent, carId: string) => {
     redirectToCar(carId);
     event.preventDefault();

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

@@ -21,7 +21,7 @@ const SupportSection: React.FunctionComponent<IProps> = ({ t , Link }) => {
             <div className={styles.text}>
                 {t('DealerDashboardPage:requestedCars.customerServiceText')}</div>
             <div className={styles.contactButton}>
-                <Link link='/account/kontakt'>
+                <Link to='/account/kontakt'>
                     <Button size='small' color='success' variant='contained'>{t('DealerDashboardPage:requestedCars.contact')}</Button>
                 </Link>
             </div>

package/source/framework/types/types.ts

@@ -338,3 +338,8 @@ export interface IVehicleCompareProps {
   toCompare: boolean;
   onRemoveClick: () => void;
 }
+
+export interface TFunction {
+  <T = string>(key: string, options?: object): T;
+  <T = string>(keys: string[], options?: object): T;
+}