@bytebrand/fe-ui-core 4.1.21 → 4.1.23

package/package.json

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

package/source/components/SearchFilters/filters/Cost.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { useEffect, useState, SyntheticEvent } from 'react';
 import classnames from 'classnames';
 
 import RangeControlled from '../common/RangeControlled/RangeControlled';
@@ -6,7 +6,7 @@ import Rate from './Rate';
 import { RadioGroup } from '@mui/material';
 import CheckboxMaterial from '../../_common/CheckboxMaterial/CheckboxMaterial';
 
-import { COST_TYPE_OPTIONS, COST_TYPE_DEFAULT } from '../../../framework/constants/Search';
+import { COST_TYPE_OPTIONS } from '../../../framework/constants/Search';
 
 import styles from './Cost.styl';
 
@@ -18,48 +18,39 @@ interface ICostProps {
   onChangeControls: (name: string, value: any) => void;
 }
 
-interface ICostState {
-  costType: string;
-  isRateWidgetOpened: boolean;
-}
 
-class Cost extends React.Component<ICostProps, ICostState> {
-  constructor(props: ICostProps) {
-    super(props);
-    this.state = {
-      costType: COST_TYPE_DEFAULT,
-      isRateWidgetOpened: false
-    };
-  }
+const Cost = ({ t, onChange, onChangeControls, RATE, PRICE }: ICostProps) => {
+  const [costType, setCostType] = useState(null);
+  const [isRateWidgetOpened, setRateWidgetOpened] = useState(false);
 
-  onTypeChange = (_event: React.SyntheticEvent, value: string) => {
-    this.setState({ costType: value });
-  };
+  useEffect(() => {
+    // if rate is not assigned and price is set - choose initial 'price' radio
+    if (!costType && (PRICE.controls.to || PRICE.controls.from))
+      setCostType(
+        (!!PRICE.controls.from || !!PRICE.controls.to)
+        && RATE.controls.monthlyInstallmentFrom === 'any'
+        && RATE.controls.monthlyInstallmentTo === 'any'
+          ? COST_TYPE_OPTIONS[1]
+          : COST_TYPE_OPTIONS[0]);
+  }, [PRICE.controls.to, PRICE.controls.from])
 
-  onRateWidgetOpen = () => {
-    this.setState({ isRateWidgetOpened: true });
-  }
+  const onTypeChange = (_event: SyntheticEvent, value: string) => { setCostType(value) };
 
-  onRateWidgetClose = () => {
-    this.setState({ isRateWidgetOpened: false });
-  }
+  const onRateWidgetOpen = () => { setRateWidgetOpened(true) }
 
-  onRateChange = (value: any) => {
-    const { onChange } = this.props;
+  const onRateWidgetClose = () => { setRateWidgetOpened(false) }
 
+  const onRateChange = (value: any) => {
     onChange('RATE', value);
-    this.onRateWidgetClose();
+    onRateWidgetClose();
   };
 
-  renderRadioGroup = () => {
-    const { t } = this.props;
-    const { costType } = this.state;
-
+  const renderRadioGroup = () => {
     const radioGroupProps = {
       value: costType,
       name: 'COST_TYPE',
       className: styles.radioGroup,
-      onChange: this.onTypeChange
+      onChange: onTypeChange
     };
 
     return (
@@ -71,23 +62,21 @@ class Cost extends React.Component<ICostProps, ICostState> {
     );
   };
 
-  renderRate = () => {
-    const { t, RATE } = this.props;
+  const renderRate = () => {
     const rateProps = {
       t,
       values: RATE.values,
       controls: RATE.controls,
-      isRateWidgetOpened: this.state.isRateWidgetOpened,
-      onRateWidgetOpen: this.onRateWidgetOpen,
-      onRateWidgetClose: this.onRateWidgetClose,
-      onRateChange: this.onRateChange
+      isRateWidgetOpened,
+      onRateWidgetOpen,
+      onRateWidgetClose,
+      onRateChange
     };
 
     return <Rate {...rateProps} />;
   };
 
-  renderPrice = () => {
-    const { t, PRICE, onChange, onChangeControls } = this.props;
+  const renderPrice = () => {
 
     const priceProps = {
       t,
@@ -100,26 +89,22 @@ class Cost extends React.Component<ICostProps, ICostState> {
       controls: PRICE.controls,
       isNumberWithDot: true
     };
-
     return <RangeControlled {...priceProps} />;
   };
 
-  render(): JSX.Element {
-    const { t } = this.props;
-    const { costType } = this.state;
-    const containerClassName = classnames(styles.cost, { [styles.overlay]: this.state.isRateWidgetOpened });
+    const containerClassName = classnames(styles.cost, { [styles.overlay]: isRateWidgetOpened });
     const title = costType === 'price' ? t('filters.priceTitle', { currency: '€' }) : t('filters.rateTitle');
 
     return (
       <div className={containerClassName}>
         <div className={styles.title}>
           <h3 className={styles.titleText}>{title}</h3>
-          {this.renderRadioGroup()}
+          {renderRadioGroup()}
         </div>
-        {costType === 'price' ? this.renderPrice() : this.renderRate()}
+        {costType === 'price' ? renderPrice() : renderRate()}
       </div>
     );
-  }
+  
 }
 
 export default Cost;

package/source/framework/vehiclesProps/decoratedLightProps.tsx

@@ -278,8 +278,10 @@ const getDecoratedLightProps = (
 
             if (moment.utc(offerAvailabilityTimestamp, 'X').isBefore()) {
               offerAvailability = t('cbd:selector_availabilityMode_always');
-            } else {
+            } else if (!!offerAvailabilityTimestamp) {
               offerAvailability = t('vehicleProps:value.fromDate', { date: humanViewTime });
+            } else {
+              offerAvailability = t('vehicleProps:value.onRequest'); // case when "availabilityFrom" is undefined
             }
             break;