@bytebrand/fe-ui-core 4.8.26 → 4.8.27

package/source/components/CompactSearchWidget/CompactSearchFields/CompactSearchFields.tsx

@@ -1,477 +1,477 @@
-import * as React from 'react';
-import ReactDOM from 'react-dom';
-import _get from 'lodash/get';
-import classNames from 'classnames';
-
-import BodyTypeIcons from '../../_common/BodyTypeIcons/IconsConfigCompact';
-import FormattedNumber from '../../FormattedNumber/FormattedNumber';
-import {
-  DropDown, MultiDropDown, DropDownGroup, SingleValueWithIcon,
-  PlaceholderWithIcon, MultiValueWithBodyType
-} from '../../_common/DropDown';
-import {
-  MANUFACTURER, MODEL, FIRST_REGISTRATION, FIRST_REGISTRATION_OPTIONS, BODY_TYPE,
-  MILEAGE, MILEAGE_OPTIONS, MILEAGE_UNIT, PRICE, PRICE_OPTIONS, PRICE_UNIT, RATE, TEMP_LOCAL, TO_KEY, FROM_KEY, MAX_MOBILE_WIDTH,
-  MODAL_WRAPPER_ID, RATE_DEFAULT, RATE_DEFAULT_CONTROLS
-} from '../../../framework/constants/SearchWidget';
-import { checkRangeValuesOnEqual } from '../../../framework/utils/CommonUtils';
-// import { IDropDownProps } from '../../_common/DropDown/DropDown';
-import { IRangeGroupProps } from '../../_common/DropDown/DropDownGroup';
-
-import RadioGroup from '../../_common/Radio/RadioGroup';
-import { default as RadioButton } from '../../_common/Radio/Radio';
-import RateSearchValue from '../../RateSearchValue/RateSearchValue';
-import RateSearchWidget from '../../RateSearchWidget/RateSearchWidget';
-
-import MagnifyingGlass from '../../../components/_common/IconSVG/SVG/common/MagnifyingGlass';
-import Calendar from '../../../components/_common/IconSVG/SVG/common/Calendar';
-import Speedometer from '../../../components/_common/IconSVG/SVG/common/Speedometer';
-import EuroCurrency from '../../../components/_common/IconSVG/SVG/common/EuroCurrency';
-import CarFront from '../../../components/_common/IconSVG/SVG/common/CarFront';
-
-import styles from './CompactSearchFields.styl';
-
-const colourStyles = {
-  option: (styles: any, props: any) => {
-    const { data, isDisabled, isSelected, isFocused } = props;
-    const { isSeries = false } = data;
-
-    return {
-      ...styles,
-      fontSize: isDisabled || isSeries ? '13px' : '14px',
-      fontWeight: isDisabled || isSeries ? 'bold' : 'normal',
-      color: isDisabled || isSeries ? '#1f1f1f' : isSelected || isFocused ? '#ffffff' : '#333333',
-      textTransform: isDisabled || isSeries ? 'uppercase' : 'none',
-      backgroundColor: isDisabled || isSeries ? '#e8e8e8' : isFocused ? '#005CCB' : '#fff',
-      pointerEvents: isDisabled || data.value === 'default' ? 'none' : isSeries ? 'auto' : 'auto'
-    };
-  }
-};
-
-const t = (phrase: string, options: any = {}) => {
-  const { value } = options;
-
-  const dictionary: any = {
-    title: 'Ratendetails anpassen',
-    months: 'Monate',
-    monthlyInstallment: 'Monatsrate (€)',
-    monthlyInstallmentFrom: 'Monatsrate von (€)',
-    monthlyInstallmentTo: 'Monatsrate bis (€)',
-    firstInstallment: 'Anzahlung',
-    paybackPeriod: 'Laufzeit',
-    any: 'beliebig',
-
-    firstInstallmentPlaceholder: 'Anzahlung',
-    monthlyInstallmentFromPlaceholder: 'Monatsrate von',
-    monthlyInstallmentToPlaceholder: 'Monatsrate bis',
-    paybackPeriodPlaceholder: 'Laufzeit',
-
-    apply: 'Anwenden',
-    abort: 'abbrechen',
-
-    monthlyInstallmentLabel: 'Monatsrate:',
-    defaultValue: 'beliebig, 60 Monate',
-    monthlyInstallmentFromValue: `ab ${value} €`,
-    monthlyInstallmentToValue: `bis ${value} €`,
-    paybackPeriodValue: `${value} Monate`,
-    firstInstallmentValue: `${value} € Anzahlung`
-  };
-
-  return dictionary[phrase];
-};
-
-export interface ICompactSearchFieldsProps {
-  manufacturers?: any;
-  models?: any;
-  bodyTypes?: string[];
-  filters?: any;
-  modelsLoading?: boolean;
-  isDealerWPpage?: boolean;
-  costType?: string;
-  contrastMode: boolean;
-
-  rateWidgetIsOpened?: boolean;
-  rateWidgetPosition?: 'left' | 'right';
-  rateWidgetIsModal?: boolean;
-  rateWidgetClassName?: string;
-
-  onFilterChange?: (value: any, name: string) => void;
-  onCostTypeChange: (event: React.SyntheticEvent, value: string) => void;
-  onRateWidgetOpen: () => void;
-  onRateWidgetClose: () => void;
-}
-
-const isMobile = process.browser ? window.innerWidth < MAX_MOBILE_WIDTH : false;
-
-class CompactSearchFields extends React.Component<ICompactSearchFieldsProps, {}> {
-  private modalWrapper: HTMLElement = null;
-
-  static readonly defaultProps = {
-    rateWidgetIsModal: false,
-    isDealerWPpage: false
-  };
-
-  componentDidMount() {
-    this.modalWrapper = document.createElement('div');
-    this.modalWrapper.id = MODAL_WRAPPER_ID;
-    document.body.appendChild(this.modalWrapper);
-  }
-
-  componentDidUpdate() {
-    const { rateWidgetIsOpened, rateWidgetIsModal } = this.props;
-    if (rateWidgetIsModal) {
-      if (rateWidgetIsOpened) {
-        this.modalWrapper.classList.add(styles.modalWrapper);
-        document.body.classList.add(styles.body);
-      } else {
-        this.modalWrapper.classList.remove(styles.modalWrapper);
-        document.body.classList.remove(styles.body);
-      }
-    }
-  }
-
-  componentWillUnmount() {
-    if (!!this.modalWrapper) {
-      document.body.removeChild(this.modalWrapper);
-    }
-  }
-
-  onFilterChange = (value: any, name: string) => {
-    const { onFilterChange } = this.props;
-    onFilterChange(value, name);
-  };
-
-  onRateWidgetChange = (value: any) => {
-    const { onFilterChange } = this.props;
-
-    onFilterChange(value, RATE);
-    this.onRateWidgetClose();
-  };
-
-  onRateWidgetOpen = () => {
-    if (this.props.rateWidgetIsModal) {
-      this.modalWrapper.classList.add(styles.modalWrapper);
-    }
-
-    this.props.onRateWidgetOpen();
-  };
-
-  onRateWidgetClose = () => {
-    if (this.props.rateWidgetIsModal) {
-      this.modalWrapper.classList.remove(styles.modalWrapper);
-    }
-
-    this.props.onRateWidgetClose();
-  }
-
-  getLabel = (option: string, title: string): React.ReactNode => {
-    const Icon: any = BodyTypeIcons[option];
-    return (
-      <span className={styles.icon} key={title}>
-        <span className={styles.icon__desc}>{`${TEMP_LOCAL[title][option]}`}</span>
-        <Icon className={styles.icon__svg} />
-      </span>
-    );
-  };
-
-  getFormattedLabel = (name: string, option: number | string, unit?: string): React.ReactNode => {
-    if (name !== FIRST_REGISTRATION) {
-      return (
-        <span key={name}>
-          <FormattedNumber value={+option} numbersAfterDot={0} />
-          {unit ? ` ${unit}` : false}
-        </span>
-      );
-    }
-
-    return `${option} ${unit ? unit : ''}`;
-  };
-
-  getValue = (name: string, value: string) => ({
-    value,
-    label: name === BODY_TYPE ? `${TEMP_LOCAL[name][value]}` : value
-  });
-
-  getOptions = (name: string, options: any, unit?: string) =>
-    options.map((option: string) => ({
-      value: option,
-      label: name === BODY_TYPE ? this.getLabel(option, name) : this.getFormattedLabel(name, option, unit)
-    }));
-
-  isValidNumericOption = (inputValue: any): boolean => !!inputValue.trim() && !isNaN(inputValue.trim());
-
-  isValidTextOption = (inputValue: any): boolean => !!inputValue.trim();
-
-  renderRateWidget = () => {
-    const { filters, rateWidgetPosition, rateWidgetIsModal, rateWidgetClassName } = this.props;
-    const isRateDefault = checkRangeValuesOnEqual(RATE_DEFAULT, filters[RATE]);
-    const widgetValues = isRateDefault ? RATE_DEFAULT_CONTROLS : filters[RATE];
-
-    const rateSearchWidgetProps = {
-      ...widgetValues,
-      t,
-      onAbort: this.onRateWidgetClose,
-      onApply: this.onRateWidgetChange,
-      className: classNames(
-        styles.rateSearchWidget, rateWidgetClassName,
-        styles[rateWidgetIsModal ? 'modal' : rateWidgetPosition]
-      )
-    };
-
-    if (!rateWidgetIsModal) {
-      return <RateSearchWidget {...rateSearchWidgetProps} />;
-    }
-
-    if (this.modalWrapper) {
-      return ReactDOM.createPortal(<RateSearchWidget {...rateSearchWidgetProps} />, this.modalWrapper);
-    }
-
-    return null;
-  }
-
-  renderContent = () => {
-    const { manufacturers, models, bodyTypes, filters, modelsLoading,
-      costType, rateWidgetIsOpened, contrastMode, onCostTypeChange, onRateWidgetOpen, isDealerWPpage
-    } = this.props;
-    const isRateSelected = costType === 'rate';
-
-    const baseCompactDropdownProps = {
-      styles: colourStyles,
-      isClearable: true,
-      scrollToInputOnFocus: isMobile
-    };
-
-    const makeProps = {
-      ...baseCompactDropdownProps,
-      isCreatable: false,
-      isClearable: true,
-      name: MANUFACTURER,
-      value: filters[MANUFACTURER],
-      options: manufacturers,
-      placeholder: 'Marke auswählen',
-      components: {
-        SingleValue: SingleValueWithIcon('magnifyingGlass', MagnifyingGlass),
-        Placeholder: PlaceholderWithIcon('magnifyingGlass', MagnifyingGlass)
-      },
-      className: classNames(
-        styles.compactWidgetDropdown,
-        styles.gridAreaMake,
-        { [styles.horizontalFieldHeight]: isDealerWPpage }
-      ),
-      onChange: (value: any) => this.onFilterChange(value, MANUFACTURER)
-    };
-
-    const modelProps = {
-      ...baseCompactDropdownProps,
-      isCreatable: false,
-      isClearable: true,
-      name: MODEL,
-      value: filters[MODEL],
-      options: models,
-      placeholder: 'Modell auswählen',
-      components: {
-        SingleValue: SingleValueWithIcon('magnifyingGlass', MagnifyingGlass),
-        Placeholder: PlaceholderWithIcon('magnifyingGlass', MagnifyingGlass)
-      },
-      className: classNames(
-        styles.compactWidgetDropdown,
-        styles.gridAreaModel,
-        { [styles.horizontalFieldHeight]: isDealerWPpage }
-      ),
-      onChange: (value: any) => this.onFilterChange(value, MODEL),
-      isLoading: modelsLoading
-    };
-
-    const bodyTypeProps = {
-      ...baseCompactDropdownProps,
-      name: BODY_TYPE,
-      className: classNames(
-        styles.compactWidgetDropdown,
-        styles.gridAreaBodyType,
-        { [styles.horizontalFieldHeight]: isDealerWPpage }
-      ),
-      // value: filters[BODY_TYPE] ? filters[BODY_TYPE].map((value: any) => this.getValue(BODY_TYPE, value)) : '',
-      // double check on filters. Wrong object-array may arrive
-      value: filters[BODY_TYPE] && Array.isArray(filters[BODY_TYPE])
-        ? filters[BODY_TYPE].map((value: any) => this.getValue(BODY_TYPE, value))
-        : filters[BODY_TYPE] && filters[BODY_TYPE].value && Array.isArray(filters[BODY_TYPE].value)
-          ? filters[BODY_TYPE].value.map((value: any) => this.getValue(BODY_TYPE, value))
-          : '',
-
-      options: this.getOptions(BODY_TYPE, bodyTypes),
-      components: {
-        Placeholder: PlaceholderWithIcon('carFront', CarFront),
-        MultiValue: MultiValueWithBodyType(BodyTypeIcons)
-      },
-      placeholder: 'Karosserieform auswählen',
-      onChange: (value: any) => {
-        if (!value) {
-          this.onFilterChange(null, BODY_TYPE);
-          return;
-        }
-
-        const isMultiValue = value.map((value: any) => value.value);
-        this.onFilterChange(isMultiValue, BODY_TYPE);
-      }
-    };
-
-    const firstRegistrationProps = {
-      ...baseCompactDropdownProps,
-      isCreatable: true,
-      formatCreateLabel: (inputValue: any) => `${inputValue}`,
-      name: FIRST_REGISTRATION,
-      value: filters[FIRST_REGISTRATION],
-      options: this.getOptions(FIRST_REGISTRATION, FIRST_REGISTRATION_OPTIONS),
-      placeholder: 'EZ von',
-      components: {
-        SingleValue: SingleValueWithIcon('calendar', Calendar),
-        Placeholder: PlaceholderWithIcon('calendar', Calendar)
-      },
-      className: classNames(
-        styles.compactWidgetDropdown,
-        styles.gridAreaFirstRegistration,
-        { [styles.horizontalFieldHeight]: isDealerWPpage }
-      ),
-      onChange: (value: any) => this.onFilterChange(value, FIRST_REGISTRATION),
-      isValidNewOption: this.isValidNumericOption,
-      onBlur: (_event: React.FocusEvent<HTMLElement>, inputValue: any) => {
-        if (this.isValidNumericOption(inputValue)) {
-          this.onFilterChange({ value: inputValue, label: inputValue }, FIRST_REGISTRATION);
-        }
-      }
-    };
-
-    const millageProps = {
-      ...baseCompactDropdownProps,
-      isCreatable: true,
-      formatCreateLabel: (inputValue: any) => `${inputValue} km`,
-      name: MILEAGE,
-      value: filters[MILEAGE],
-      options: this.getOptions(MILEAGE, MILEAGE_OPTIONS, MILEAGE_UNIT),
-      placeholder: 'Kilometer bis',
-      components: {
-        SingleValue: SingleValueWithIcon('speedometer', Speedometer),
-        Placeholder: PlaceholderWithIcon('speedometer', Speedometer)
-      },
-      className: classNames(
-        styles.compactWidgetDropdown,
-        styles.gridAreaMileage,
-        { [styles.horizontalFieldHeight]: isDealerWPpage }
-      ),
-      onChange: (value: any) => {
-        this.onFilterChange(
-          value ? {
-            value: +value.value,
-            label: this.getFormattedLabel(MILEAGE, value.value, MILEAGE_UNIT)
-          } : false,
-          MILEAGE);
-      },
-      isValidNewOption: this.isValidNumericOption,
-      onBlur: (_event: React.FocusEvent<HTMLElement>, inputValue: any) => {
-        if (this.isValidNumericOption(inputValue)) {
-          this.onFilterChange(
-            { value: +inputValue, label: this.getFormattedLabel(MILEAGE, inputValue, MILEAGE_UNIT) },
-            MILEAGE
-          );
-        }
-      }
-    };
-
-    const priceProps: IRangeGroupProps = {
-      isClearable: true,
-      isCreatable: true,
-      dropdownClassName: classNames(styles.compactWidgetDropdown, styles.gridAreaPrice),
-      styles: colourStyles,
-      name: PRICE,
-      value: filters[PRICE],
-      options: PRICE_OPTIONS,
-      unit: PRICE_UNIT,
-      placeholders: ['Preis von', 'Preis bis'],
-      components: [
-        {
-          SingleValue: SingleValueWithIcon('euroCurrency', EuroCurrency),
-          Placeholder: PlaceholderWithIcon('euroCurrency', EuroCurrency)
-        },
-        {
-          SingleValue: SingleValueWithIcon('euroCurrency', EuroCurrency),
-          Placeholder: PlaceholderWithIcon('euroCurrency', EuroCurrency)
-        }
-      ],
-      fromProps: {
-        formatCreateLabel: (inputValue: any) => `${inputValue}`,
-        // only allow to create new numeric options
-        isValidNewOption: this.isValidNumericOption,
-        scrollToInputOnFocus: isMobile,
-        onBlur: (_event: React.SyntheticEvent<HTMLInputElement>, inputValue: any) => {
-          if (this.isValidNumericOption(inputValue)) {
-            this.onFilterChange({ ..._get(this, ['props', 'filters', PRICE], {}), [FROM_KEY]: inputValue }, PRICE);
-          }
-        }
-      },
-      toProps: {
-        formatCreateLabel: (inputValue: any) => `${inputValue}`,
-        // only allow to create new numeric options`
-        isValidNewOption: this.isValidNumericOption,
-        scrollToInputOnFocus: isMobile,
-        onBlur: (_event: React.SyntheticEvent<HTMLInputElement>, inputValue: any) => {
-          if (this.isValidNumericOption(inputValue)) {
-            this.onFilterChange({ ..._get(this, ['props', 'filters', PRICE], {}), [TO_KEY]: inputValue }, PRICE);
-          }
-        }
-      },
-      onChange: this.onFilterChange
-    };
-
-    const radioGroupProps = {
-      value: costType,
-      name: 'COST_TYPE',
-      containerClassName: classNames(styles.radioGroup, styles.gridAreaRadioGroup),
-      childClassName: styles.radioGroupChild,
-      wrapperClassname: classNames({ [styles.contrastMode]: contrastMode }),
-      onChange: onCostTypeChange
-    };
-
-    const RateSearchValueProps = {
-      ...filters[RATE],
-      t,
-      className: classNames(styles.rateSearchValue, styles.gridAreaRateSearchValue),
-      showLabel: true,
-      onClick: this.onRateWidgetOpen
-    };
-
-    const changeRateLinkProps = {
-      className: classNames(styles.changeRateLink, styles.gridAreaRateLink, { [styles.contrastMode]: contrastMode }),
-      onClick: onRateWidgetOpen
-    };
-
-    return (
-      <>
-        <DropDown {...makeProps} />
-        <DropDown {...modelProps} />
-        <MultiDropDown {...bodyTypeProps} />
-        <DropDown {...firstRegistrationProps} />
-        <DropDown {...millageProps} />
-        {!isDealerWPpage && (
-          <>
-            <RadioGroup {...radioGroupProps}>
-              <RadioButton label='Rate' value='rate' />
-              <RadioButton label='Preis' value='price' />
-            </RadioGroup>
-            {isRateSelected ? <span {...changeRateLinkProps}>{'ändern'}</span> : null}
-            {isRateSelected
-              ? <RateSearchValue {...RateSearchValueProps} />
-              : <DropDownGroup {...priceProps} />
-            }
-            {rateWidgetIsOpened ? this.renderRateWidget() : null}
-          </>
-        )}
-      </>
-    );
-  };
-
-  render() {
-    return this.renderContent();
-  }
-}
-
-export default CompactSearchFields;
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+import _get from 'lodash/get';
+import classNames from 'classnames';
+
+import BodyTypeIcons from '../../_common/BodyTypeIcons/IconsConfigCompact';
+import FormattedNumber from '../../FormattedNumber/FormattedNumber';
+import {
+  DropDown, MultiDropDown, DropDownGroup, SingleValueWithIcon,
+  PlaceholderWithIcon, MultiValueWithBodyType
+} from '../../_common/DropDown';
+import {
+  MANUFACTURER, MODEL, FIRST_REGISTRATION, FIRST_REGISTRATION_OPTIONS, BODY_TYPE,
+  MILEAGE, MILEAGE_OPTIONS, MILEAGE_UNIT, PRICE, PRICE_OPTIONS, PRICE_UNIT, RATE, TEMP_LOCAL, TO_KEY, FROM_KEY, MAX_MOBILE_WIDTH,
+  MODAL_WRAPPER_ID, RATE_DEFAULT, RATE_DEFAULT_CONTROLS
+} from '../../../framework/constants/SearchWidget';
+import { checkRangeValuesOnEqual } from '../../../framework/utils/CommonUtils';
+// import { IDropDownProps } from '../../_common/DropDown/DropDown';
+import { IRangeGroupProps } from '../../_common/DropDown/DropDownGroup';
+
+import RadioGroup from '../../_common/Radio/RadioGroup';
+import { default as RadioButton } from '../../_common/Radio/Radio';
+import RateSearchValue from '../../RateSearchValue/RateSearchValue';
+import RateSearchWidget from '../../RateSearchWidget/RateSearchWidget';
+
+import MagnifyingGlass from '../../../components/_common/IconSVG/SVG/common/MagnifyingGlass';
+import Calendar from '../../../components/_common/IconSVG/SVG/common/Calendar';
+import Speedometer from '../../../components/_common/IconSVG/SVG/common/Speedometer';
+import EuroCurrency from '../../../components/_common/IconSVG/SVG/common/EuroCurrency';
+import CarFront from '../../../components/_common/IconSVG/SVG/common/CarFront';
+
+import styles from './CompactSearchFields.styl';
+
+const colourStyles = {
+  option: (styles: any, props: any) => {
+    const { data, isDisabled, isSelected, isFocused } = props;
+    const { isSeries = false } = data;
+
+    return {
+      ...styles,
+      fontSize: isDisabled || isSeries ? '13px' : '14px',
+      fontWeight: isDisabled || isSeries ? 'bold' : 'normal',
+      color: isDisabled || isSeries ? '#1f1f1f' : isSelected || isFocused ? '#ffffff' : '#333333',
+      textTransform: isDisabled || isSeries ? 'uppercase' : 'none',
+      backgroundColor: isDisabled || isSeries ? '#e8e8e8' : isFocused ? '#005CCB' : '#fff',
+      pointerEvents: isDisabled || data.value === 'default' ? 'none' : isSeries ? 'auto' : 'auto'
+    };
+  }
+};
+
+const t = (phrase: string, options: any = {}) => {
+  const { value } = options;
+
+  const dictionary: any = {
+    title: 'Ratendetails anpassen',
+    months: 'Monate',
+    monthlyInstallment: 'Monatsrate (€)',
+    monthlyInstallmentFrom: 'Monatsrate von (€)',
+    monthlyInstallmentTo: 'Monatsrate bis (€)',
+    firstInstallment: 'Anzahlung',
+    paybackPeriod: 'Laufzeit',
+    any: 'beliebig',
+
+    firstInstallmentPlaceholder: 'Anzahlung',
+    monthlyInstallmentFromPlaceholder: 'Monatsrate von',
+    monthlyInstallmentToPlaceholder: 'Monatsrate bis',
+    paybackPeriodPlaceholder: 'Laufzeit',
+
+    apply: 'Anwenden',
+    abort: 'abbrechen',
+
+    monthlyInstallmentLabel: 'Monatsrate:',
+    defaultValue: 'beliebig, 60 Monate',
+    monthlyInstallmentFromValue: `ab ${value} €`,
+    monthlyInstallmentToValue: `bis ${value} €`,
+    paybackPeriodValue: `${value} Monate`,
+    firstInstallmentValue: `${value} € Anzahlung`
+  };
+
+  return dictionary[phrase];
+};
+
+export interface ICompactSearchFieldsProps {
+  manufacturers?: any;
+  models?: any;
+  bodyTypes?: string[];
+  filters?: any;
+  modelsLoading?: boolean;
+  isDealerWPpage?: boolean;
+  costType?: string;
+  contrastMode: boolean;
+
+  rateWidgetIsOpened?: boolean;
+  rateWidgetPosition?: 'left' | 'right';
+  rateWidgetIsModal?: boolean;
+  rateWidgetClassName?: string;
+
+  onFilterChange?: (value: any, name: string) => void;
+  onCostTypeChange: (event: React.SyntheticEvent, value: string) => void;
+  onRateWidgetOpen: () => void;
+  onRateWidgetClose: () => void;
+}
+
+const isMobile = process.browser ? window.innerWidth < MAX_MOBILE_WIDTH : false;
+
+class CompactSearchFields extends React.Component<ICompactSearchFieldsProps, {}> {
+  private modalWrapper: HTMLElement = null;
+
+  static readonly defaultProps = {
+    rateWidgetIsModal: false,
+    isDealerWPpage: false
+  };
+
+  componentDidMount() {
+    this.modalWrapper = document.createElement('div');
+    this.modalWrapper.id = MODAL_WRAPPER_ID;
+    document.body.appendChild(this.modalWrapper);
+  }
+
+  componentDidUpdate() {
+    const { rateWidgetIsOpened, rateWidgetIsModal } = this.props;
+    if (rateWidgetIsModal) {
+      if (rateWidgetIsOpened) {
+        this.modalWrapper.classList.add(styles.modalWrapper);
+        document.body.classList.add(styles.body);
+      } else {
+        this.modalWrapper.classList.remove(styles.modalWrapper);
+        document.body.classList.remove(styles.body);
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    if (!!this.modalWrapper) {
+      document.body.removeChild(this.modalWrapper);
+    }
+  }
+
+  onFilterChange = (value: any, name: string) => {
+    const { onFilterChange } = this.props;
+    onFilterChange(value, name);
+  };
+
+  onRateWidgetChange = (value: any) => {
+    const { onFilterChange } = this.props;
+
+    onFilterChange(value, RATE);
+    this.onRateWidgetClose();
+  };
+
+  onRateWidgetOpen = () => {
+    if (this.props.rateWidgetIsModal) {
+      this.modalWrapper.classList.add(styles.modalWrapper);
+    }
+
+    this.props.onRateWidgetOpen();
+  };
+
+  onRateWidgetClose = () => {
+    if (this.props.rateWidgetIsModal) {
+      this.modalWrapper.classList.remove(styles.modalWrapper);
+    }
+
+    this.props.onRateWidgetClose();
+  }
+
+  getLabel = (option: string, title: string): React.ReactNode => {
+    const Icon: any = BodyTypeIcons[option];
+    return (
+      <span className={styles.icon} key={title}>
+        <span className={styles.icon__desc}>{`${TEMP_LOCAL[title][option]}`}</span>
+        <Icon className={styles.icon__svg} />
+      </span>
+    );
+  };
+
+  getFormattedLabel = (name: string, option: number | string, unit?: string): React.ReactNode => {
+    if (name !== FIRST_REGISTRATION) {
+      return (
+        <span key={name}>
+          <FormattedNumber value={+option} numbersAfterDot={0} />
+          {unit ? ` ${unit}` : false}
+        </span>
+      );
+    }
+
+    return `${option} ${unit ? unit : ''}`;
+  };
+
+  getValue = (name: string, value: string) => ({
+    value,
+    label: name === BODY_TYPE ? `${TEMP_LOCAL[name][value]}` : value
+  });
+
+  getOptions = (name: string, options: any, unit?: string) =>
+    options.map((option: string) => ({
+      value: option,
+      label: name === BODY_TYPE ? this.getLabel(option, name) : this.getFormattedLabel(name, option, unit)
+    }));
+
+  isValidNumericOption = (inputValue: any): boolean => !!inputValue.trim() && !isNaN(inputValue.trim());
+
+  isValidTextOption = (inputValue: any): boolean => !!inputValue.trim();
+
+  renderRateWidget = () => {
+    const { filters, rateWidgetPosition, rateWidgetIsModal, rateWidgetClassName } = this.props;
+    const isRateDefault = checkRangeValuesOnEqual(RATE_DEFAULT, filters[RATE]);
+    const widgetValues = isRateDefault ? RATE_DEFAULT_CONTROLS : filters[RATE];
+
+    const rateSearchWidgetProps = {
+      ...widgetValues,
+      t,
+      onAbort: this.onRateWidgetClose,
+      onApply: this.onRateWidgetChange,
+      className: classNames(
+        styles.rateSearchWidget, rateWidgetClassName,
+        styles[rateWidgetIsModal ? 'modal' : rateWidgetPosition]
+      )
+    };
+
+    if (!rateWidgetIsModal) {
+      return <RateSearchWidget {...rateSearchWidgetProps} />;
+    }
+
+    if (this.modalWrapper) {
+      return ReactDOM.createPortal(<RateSearchWidget {...rateSearchWidgetProps} />, this.modalWrapper);
+    }
+
+    return null;
+  }
+
+  renderContent = () => {
+    const { manufacturers, models, bodyTypes, filters, modelsLoading,
+      costType, rateWidgetIsOpened, contrastMode, onCostTypeChange, onRateWidgetOpen, isDealerWPpage
+    } = this.props;
+    const isRateSelected = costType === 'rate';
+
+    const baseCompactDropdownProps = {
+      styles: colourStyles,
+      isClearable: true,
+      scrollToInputOnFocus: isMobile
+    };
+
+    const makeProps = {
+      ...baseCompactDropdownProps,
+      isCreatable: false,
+      isClearable: true,
+      name: MANUFACTURER,
+      value: filters[MANUFACTURER],
+      options: manufacturers,
+      placeholder: 'Marke auswählen',
+      components: {
+        SingleValue: SingleValueWithIcon('magnifyingGlass', MagnifyingGlass),
+        Placeholder: PlaceholderWithIcon('magnifyingGlass', MagnifyingGlass)
+      },
+      className: classNames(
+        styles.compactWidgetDropdown,
+        styles.gridAreaMake,
+        { [styles.horizontalFieldHeight]: isDealerWPpage }
+      ),
+      onChange: (value: any) => this.onFilterChange(value, MANUFACTURER)
+    };
+
+    const modelProps = {
+      ...baseCompactDropdownProps,
+      isCreatable: false,
+      isClearable: true,
+      name: MODEL,
+      value: filters[MODEL],
+      options: models,
+      placeholder: 'Modell auswählen',
+      components: {
+        SingleValue: SingleValueWithIcon('magnifyingGlass', MagnifyingGlass),
+        Placeholder: PlaceholderWithIcon('magnifyingGlass', MagnifyingGlass)
+      },
+      className: classNames(
+        styles.compactWidgetDropdown,
+        styles.gridAreaModel,
+        { [styles.horizontalFieldHeight]: isDealerWPpage }
+      ),
+      onChange: (value: any) => this.onFilterChange(value, MODEL),
+      isLoading: modelsLoading
+    };
+
+    const bodyTypeProps = {
+      ...baseCompactDropdownProps,
+      name: BODY_TYPE,
+      className: classNames(
+        styles.compactWidgetDropdown,
+        styles.gridAreaBodyType,
+        { [styles.horizontalFieldHeight]: isDealerWPpage }
+      ),
+      // value: filters[BODY_TYPE] ? filters[BODY_TYPE].map((value: any) => this.getValue(BODY_TYPE, value)) : '',
+      // double check on filters. Wrong object-array may arrive
+      value: filters[BODY_TYPE] && Array.isArray(filters[BODY_TYPE])
+        ? filters[BODY_TYPE].map((value: any) => this.getValue(BODY_TYPE, value))
+        : filters[BODY_TYPE] && filters[BODY_TYPE].value && Array.isArray(filters[BODY_TYPE].value)
+          ? filters[BODY_TYPE].value.map((value: any) => this.getValue(BODY_TYPE, value))
+          : '',
+
+      options: this.getOptions(BODY_TYPE, bodyTypes),
+      components: {
+        Placeholder: PlaceholderWithIcon('carFront', CarFront),
+        MultiValue: MultiValueWithBodyType(BodyTypeIcons)
+      },
+      placeholder: 'Karosserieform auswählen',
+      onChange: (value: any) => {
+        if (!value) {
+          this.onFilterChange(null, BODY_TYPE);
+          return;
+        }
+
+        const isMultiValue = value.map((value: any) => value.value);
+        this.onFilterChange(isMultiValue, BODY_TYPE);
+      }
+    };
+
+    const firstRegistrationProps = {
+      ...baseCompactDropdownProps,
+      isCreatable: true,
+      formatCreateLabel: (inputValue: any) => `${inputValue}`,
+      name: FIRST_REGISTRATION,
+      value: filters[FIRST_REGISTRATION],
+      options: this.getOptions(FIRST_REGISTRATION, FIRST_REGISTRATION_OPTIONS),
+      placeholder: 'EZ von',
+      components: {
+        SingleValue: SingleValueWithIcon('calendar', Calendar),
+        Placeholder: PlaceholderWithIcon('calendar', Calendar)
+      },
+      className: classNames(
+        styles.compactWidgetDropdown,
+        styles.gridAreaFirstRegistration,
+        { [styles.horizontalFieldHeight]: isDealerWPpage }
+      ),
+      onChange: (value: any) => this.onFilterChange(value, FIRST_REGISTRATION),
+      isValidNewOption: this.isValidNumericOption,
+      onBlur: (_event: React.FocusEvent<HTMLElement>, inputValue: any) => {
+        if (this.isValidNumericOption(inputValue)) {
+          this.onFilterChange({ value: inputValue, label: inputValue }, FIRST_REGISTRATION);
+        }
+      }
+    };
+
+    const millageProps = {
+      ...baseCompactDropdownProps,
+      isCreatable: true,
+      formatCreateLabel: (inputValue: any) => `${inputValue} km`,
+      name: MILEAGE,
+      value: filters[MILEAGE],
+      options: this.getOptions(MILEAGE, MILEAGE_OPTIONS, MILEAGE_UNIT),
+      placeholder: 'Kilometer bis',
+      components: {
+        SingleValue: SingleValueWithIcon('speedometer', Speedometer),
+        Placeholder: PlaceholderWithIcon('speedometer', Speedometer)
+      },
+      className: classNames(
+        styles.compactWidgetDropdown,
+        styles.gridAreaMileage,
+        { [styles.horizontalFieldHeight]: isDealerWPpage }
+      ),
+      onChange: (value: any) => {
+        this.onFilterChange(
+          value ? {
+            value: +value.value,
+            label: this.getFormattedLabel(MILEAGE, value.value, MILEAGE_UNIT)
+          } : false,
+          MILEAGE);
+      },
+      isValidNewOption: this.isValidNumericOption,
+      onBlur: (_event: React.FocusEvent<HTMLElement>, inputValue: any) => {
+        if (this.isValidNumericOption(inputValue)) {
+          this.onFilterChange(
+            { value: +inputValue, label: this.getFormattedLabel(MILEAGE, inputValue, MILEAGE_UNIT) },
+            MILEAGE
+          );
+        }
+      }
+    };
+
+    const priceProps: IRangeGroupProps = {
+      isClearable: true,
+      isCreatable: true,
+      dropdownClassName: classNames(styles.compactWidgetDropdown, styles.gridAreaPrice),
+      styles: colourStyles,
+      name: PRICE,
+      value: filters[PRICE],
+      options: PRICE_OPTIONS,
+      unit: PRICE_UNIT,
+      placeholders: ['Preis von', 'Preis bis'],
+      components: [
+        {
+          SingleValue: SingleValueWithIcon('euroCurrency', EuroCurrency),
+          Placeholder: PlaceholderWithIcon('euroCurrency', EuroCurrency)
+        },
+        {
+          SingleValue: SingleValueWithIcon('euroCurrency', EuroCurrency),
+          Placeholder: PlaceholderWithIcon('euroCurrency', EuroCurrency)
+        }
+      ],
+      fromProps: {
+        formatCreateLabel: (inputValue: any) => `${inputValue}`,
+        // only allow to create new numeric options
+        isValidNewOption: this.isValidNumericOption,
+        scrollToInputOnFocus: isMobile,
+        onBlur: (_event: React.SyntheticEvent<HTMLInputElement>, inputValue: any) => {
+          if (this.isValidNumericOption(inputValue)) {
+            this.onFilterChange({ ..._get(this, ['props', 'filters', PRICE], {}), [FROM_KEY]: inputValue }, PRICE);
+          }
+        }
+      },
+      toProps: {
+        formatCreateLabel: (inputValue: any) => `${inputValue}`,
+        // only allow to create new numeric options`
+        isValidNewOption: this.isValidNumericOption,
+        scrollToInputOnFocus: isMobile,
+        onBlur: (_event: React.SyntheticEvent<HTMLInputElement>, inputValue: any) => {
+          if (this.isValidNumericOption(inputValue)) {
+            this.onFilterChange({ ..._get(this, ['props', 'filters', PRICE], {}), [TO_KEY]: inputValue }, PRICE);
+          }
+        }
+      },
+      onChange: this.onFilterChange
+    };
+
+    const radioGroupProps = {
+      value: costType,
+      name: 'COST_TYPE',
+      containerClassName: classNames(styles.radioGroup, styles.gridAreaRadioGroup),
+      childClassName: styles.radioGroupChild,
+      wrapperClassname: classNames({ [styles.contrastMode]: contrastMode }),
+      onChange: onCostTypeChange
+    };
+
+    const RateSearchValueProps = {
+      ...filters[RATE],
+      t,
+      className: classNames(styles.rateSearchValue, styles.gridAreaRateSearchValue),
+      showLabel: true,
+      onClick: this.onRateWidgetOpen
+    };
+
+    const changeRateLinkProps = {
+      className: classNames(styles.changeRateLink, styles.gridAreaRateLink, { [styles.contrastMode]: contrastMode }),
+      onClick: onRateWidgetOpen
+    };
+
+    return (
+      <>
+        <DropDown {...makeProps} />
+        <DropDown {...modelProps} />
+        <MultiDropDown {...bodyTypeProps} />
+        <DropDown {...firstRegistrationProps} />
+        <DropDown {...millageProps} />
+        {!isDealerWPpage && (
+          <>
+            <RadioGroup {...radioGroupProps}>
+              <RadioButton label='Rate' value='rate' />
+              <RadioButton label='Preis' value='price' />
+            </RadioGroup>
+            {isRateSelected ? <span {...changeRateLinkProps}>{'ändern'}</span> : null}
+            {isRateSelected
+              ? <RateSearchValue {...RateSearchValueProps} />
+              : <DropDownGroup {...priceProps} />
+            }
+            {rateWidgetIsOpened ? this.renderRateWidget() : null}
+          </>
+        )}
+      </>
+    );
+  };
+
+  render() {
+    return this.renderContent();
+  }
+}
+
+export default CompactSearchFields;