@bytebrand/fe-ui-core 4.2.69 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.2.69",
+  "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/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;
+}