@qite/tide-booking-component 1.4.122 → 1.4.124

package/src/search-results/components/filters/flight-filters.tsx

@@ -1,671 +1,671 @@
-import React, { useContext, useEffect, useState } from 'react';
-import { ExtendedFlightSearchResponseItem, FilterValue } from '../../types';
-import MultiRangeFilter from '../multi-range-filter';
-import SearchResultsConfigurationContext from '../../search-results-configuration-context';
-import Icon from '../../../shared/components/icon';
-import { durationInTicksInMinutes, getTranslations, minutesToHoursString, rangeFromDateTimeInMinutes } from '../../../shared/utils/localization-util';
-import { useFlightSearch } from '../flight/flight-search-context';
-import { first, isEmpty, last, orderBy } from 'lodash';
-import { getArrivalSegment, getDepartureRangeName, getDepartureSegment, getNumberOfStops } from '../../utils/flight-utils';
-import { DepartureRange } from '../../../shared/types';
-
-interface FiltersProps {
-  isOpen: boolean;
-  handleSetIsOpen: () => void;
-  isLoading?: boolean;
-}
-
-const FlightFilters: React.FC<FiltersProps> = ({ isOpen, handleSetIsOpen, isLoading }) => {
-  const context = useContext(SearchResultsConfigurationContext);
-  const translations = getTranslations(context?.languageCode ?? 'en-GB');
-  const {
-    flightSearchResults,
-    filteredResults,
-    searchRequestId,
-    filters,
-    setFilters,
-    resetFilters,
-    airlineResults,
-    numberOfStopsResults,
-    departureRangeResults,
-    departureAirportsResults,
-    arrivalAirportsResults,
-    valuesManuallyChanged,
-    setValuesManuallyChanged
-  } = useFlightSearch();
-
-  const [airlineFilterExpanded, setAirlineFilterExpanded] = useState<boolean>(true);
-  const [airlineFilter, setAirlineFilter] = useState<FilterValue[]>([]);
-
-  const [stopFilterExpanded, setStopFilterExpanded] = useState<boolean>(true);
-  const [numberOfStopsFilter, setNumberOfStopsFilter] = useState<FilterValue[]>([]);
-
-  const [departureFilterExpanded, setDepartureFilterExpanded] = useState<boolean>(true);
-  const [departureRangeFilter, setDepartureRangeFilter] = useState<FilterValue[]>([]);
-
-  const [departureAirportFilterExpanded, setDepartureAirportFilterExpanded] = useState<boolean>(true);
-  const [departureAirportFilter, setDepartureAirportFilter] = useState<FilterValue[]>([]);
-
-  const [arrivalAirportFilterExpanded, setArrivalAirportFilterExpanded] = useState<boolean>(true);
-  const [arrivalAirportFilter, setArrivalAirportFilter] = useState<FilterValue[]>([]);
-
-  const [durationFilterExpanded, setDurationFilterExpanded] = useState<boolean>(true);
-  const [minTravelTime, setMinTravelTime] = useState<number>(0);
-  const [maxTravelTime, setMaxTravelTime] = useState<number>(0);
-  const [travelTimeRangeValues, setTravelTimeRangeValues] = useState<number[]>([]);
-
-  const [priceFilterExpanded, setPriceFilterExpanded] = useState<boolean>(true);
-  const [minPrice, setMinPrice] = useState<number>(0);
-  const [maxPrice, setMaxPrice] = useState<number>(0);
-  const [priceRangeValues, setPriceRangeValues] = useState<number[]>([]);
-
-  useEffect(() => {
-    const results = filteredResults.filter((item) => item.requestId === searchRequestId);
-    if (!isEmpty(results)) {
-      // airlines
-      const airlinesMap = new Map<string, ExtendedFlightSearchResponseItem>();
-      if (!isEmpty(airlineResults)) {
-        airlineResults.map((result) => {
-          const airline = result.airlineCode;
-
-          if (!airlinesMap.has(airline) || result.price < airlinesMap.get(airline)!.price) {
-            airlinesMap.set(airline, result);
-          }
-        });
-
-        // check if filters.airlines has values, if so, make sure all selected filters are present in the airlinesMap
-        const validAirlines = filters.airlines.filter((filter) => airlinesMap.has(filter.id.toString()));
-        if (validAirlines.length !== filters.airlines.length) {
-          setFilters({
-            ...filters,
-            airlines: validAirlines
-          });
-        }
-      }
-      // Convert the Map to an array of FilterValue
-      const uniqueAirlines = Array.from(airlinesMap.entries()).map(
-        ([airlineCode, flightItem]) =>
-          ({
-            id: airlineCode,
-            name: flightItem.airlineName, // Use the airline name directly
-            lowestPrice: flightItem.price
-          } as FilterValue)
-      );
-      setAirlineFilter(orderBy(uniqueAirlines, ['name'], ['asc']));
-
-      // number of stops
-      // Group by numberOfStops and find the lowest price
-      const stopsMap = new Map<number, number>();
-      if (!isEmpty(numberOfStopsResults)) {
-        numberOfStopsResults.map((result) => {
-          let numberOfStops = getNumberOfStops(result.outward);
-          if (numberOfStops > 2) {
-            numberOfStops = 2;
-          }
-
-          if (!stopsMap.has(numberOfStops) || result.price < stopsMap.get(numberOfStops)!) {
-            stopsMap.set(numberOfStops, result.price);
-          }
-        });
-        // check if filters.numberOfStops has values, if so, make sure all selected filters are present in the stopsMap
-        const validNumberOfStops = filters.numberOfStops.filter((filter) => stopsMap.has(Number(filter.id)));
-        if (validNumberOfStops.length !== filters.numberOfStops.length) {
-          setFilters({
-            ...filters,
-            numberOfStops: validNumberOfStops
-          });
-        }
-      }
-      // Convert the Map to an array of FilterValue
-      const uniqueStops = Array.from(stopsMap.entries()).map(
-        ([id, lowestPrice]) =>
-          ({
-            id: id,
-            name: id.toString(), // Format the name
-            lowestPrice: lowestPrice
-          } as FilterValue)
-      );
-      setNumberOfStopsFilter(orderBy(uniqueStops, ['id'], ['asc']));
-
-      // departureRange
-      const departureRangeMap = new Map<DepartureRange, number>();
-      if (!isEmpty(departureRangeResults)) {
-        departureRangeResults.map((result) => {
-          const departureRange = rangeFromDateTimeInMinutes(getDepartureSegment(result.outward)?.departureDateTime);
-          if (!departureRangeMap.has(departureRange) || result.price < departureRangeMap.get(departureRange)!) {
-            departureRangeMap.set(departureRange, result.price);
-          }
-        });
-        // check if filters.departureRanges has values, if so, make sure all selected filters are present in the departureRangeMap
-        const validDepartureRanges = filters.departureRanges.filter((filter) => departureRangeMap.has(Number(filter.id)));
-        if (validDepartureRanges.length !== filters.departureRanges.length) {
-          setFilters({
-            ...filters,
-            departureRanges: validDepartureRanges
-          });
-        }
-      }
-      // Convert the Map to an array of FilterValue
-      const uniqueDepartureRanges = Array.from(departureRangeMap.entries()).map(
-        ([range, lowestPrice]) =>
-          ({
-            id: range,
-            name: getDepartureRangeName(translations, range),
-            lowestPrice: lowestPrice
-          } as FilterValue)
-      );
-      setDepartureRangeFilter(orderBy(uniqueDepartureRanges, ['id'], ['asc']));
-
-      // departureAirports
-      const departureAirportsMap = new Map<string, ExtendedFlightSearchResponseItem>();
-      if (!isEmpty(departureAirportsResults)) {
-        departureAirportsResults.map((result) => {
-          const departureAirport = getDepartureSegment(result.outward)?.departureAirportCode;
-
-          if (departureAirport) {
-            if (!departureAirportsMap.has(departureAirport) || result.price < departureAirportsMap.get(departureAirport)!.price) {
-              departureAirportsMap.set(departureAirport, result);
-            }
-          }
-        });
-
-        // check if filters.departureAirports has values, if so, make sure all selected filters are present in the departureAirportsMap
-        const validDepartureAirports = filters.departureAirports.filter((filter) => departureAirportsMap.has(filter.id.toString()));
-        if (validDepartureAirports.length !== filters.departureAirports.length) {
-          setFilters({
-            ...filters,
-            departureAirports: validDepartureAirports
-          });
-        }
-      }
-      // Convert the Map to an array of FilterValue
-      const uniqueDepartureAirports = Array.from(departureAirportsMap.entries()).map(
-        ([departureAirport, flightItem]) =>
-          ({
-            id: departureAirport,
-            name: getDepartureSegment(flightItem.outward)?.departureAirportName + ' (' + departureAirport + ')', // Use the departure airport name directly
-            lowestPrice: flightItem.price
-          } as FilterValue)
-      );
-      setDepartureAirportFilter(orderBy(uniqueDepartureAirports, ['name'], ['asc']));
-
-      // arrivalAirports
-      const arrivalAirportsMap = new Map<string, ExtendedFlightSearchResponseItem>();
-      if (!isEmpty(arrivalAirportsResults)) {
-        arrivalAirportsResults.map((result) => {
-          const arrivalAirport = getArrivalSegment(result.outward)?.arrivalAirportCode;
-
-          if (arrivalAirport) {
-            if (!arrivalAirportsMap.has(arrivalAirport) || result.price < arrivalAirportsMap.get(arrivalAirport)!.price) {
-              arrivalAirportsMap.set(arrivalAirport, result);
-            }
-          }
-        });
-
-        // check if filters.arrivalAirports has values, if so, make sure all selected filters are present in the arrivalAirportsMap
-        const validArrivalAirports = filters.arrivalAirports.filter((filter) => arrivalAirportsMap.has(filter.id.toString()));
-        if (validArrivalAirports.length !== filters.arrivalAirports.length) {
-          setFilters({
-            ...filters,
-            arrivalAirports: validArrivalAirports
-          });
-        }
-      }
-      // Convert the Map to an array of FilterValue
-      const uniqueArrivalAirports = Array.from(arrivalAirportsMap.entries()).map(
-        ([arrivalAirport, flightItem]) =>
-          ({
-            id: arrivalAirport,
-            name: getArrivalSegment(flightItem.outward)?.arrivalAirportName + ' (' + arrivalAirport + ')', // Use the arrival airport name directly
-            lowestPrice: flightItem.price
-          } as FilterValue)
-      );
-      setArrivalAirportFilter(orderBy(uniqueArrivalAirports, ['name'], ['asc']));
-    } else {
-      setNumberOfStopsFilter([]);
-      setDepartureRangeFilter([]);
-      setAirlineFilter([]);
-      setDepartureAirportFilter([]);
-    }
-  }, [filteredResults, searchRequestId]);
-
-  useEffect(() => {
-    const results = flightSearchResults.filter((item) => item.requestId === searchRequestId);
-    if (!isEmpty(results)) {
-      // Travel time filter
-      const minTravelTimeDuration = Math.min(...results.map((result) => result.outward.durationInTicks));
-      const maxTravelTimeDuration = Math.max(...results.map((result) => result.outward.durationInTicks));
-      const minTravelTimeValue = durationInTicksInMinutes(minTravelTimeDuration);
-      const maxTravelTimeValue = durationInTicksInMinutes(maxTravelTimeDuration);
-      setMinTravelTime(minTravelTimeValue);
-      setMaxTravelTime(maxTravelTimeValue);
-      if (!valuesManuallyChanged) {
-        setTravelTimeRangeValues([minTravelTimeValue, maxTravelTimeValue]);
-      }
-      // price filter
-      const minPriceValue = Math.min(...results.map((result) => result.price));
-      const maxPriceValue = Math.max(...results.map((result) => result.price));
-      setMinPrice(minPriceValue);
-      setMaxPrice(maxPriceValue);
-      if (!valuesManuallyChanged) {
-        setPriceRangeValues([minPriceValue, maxPriceValue]);
-      }
-    }
-  }, [flightSearchResults]);
-
-  const adjustFilters = (type: string, value: FilterValue, checked: boolean) => {
-    switch (type) {
-      case 'Airlines':
-        setFilters({
-          ...filters,
-          airlines: checked ? [...filters.airlines, value] : filters.airlines.filter((n) => n.id !== value.id)
-        });
-        return;
-      case 'NumberOfStops':
-        setFilters({
-          ...filters,
-          numberOfStops: checked ? [...filters.numberOfStops, value] : filters.numberOfStops.filter((n) => n.id !== value.id)
-        });
-        return;
-      case 'DepartureRange':
-        setFilters({
-          ...filters,
-          departureRanges: checked ? [...filters.departureRanges, value] : filters.departureRanges.filter((n) => n.id !== value.id)
-        });
-        return;
-      case 'DepartureAirports':
-        setFilters({
-          ...filters,
-          departureAirports: checked ? [...filters.departureAirports, value] : filters.departureAirports.filter((n) => n.id !== value.id)
-        });
-        return;
-      case 'ArrivalAirports':
-        setFilters({
-          ...filters,
-          arrivalAirports: checked ? [...filters.arrivalAirports, value] : filters.arrivalAirports.filter((n) => n.id !== value.id)
-        });
-        return;
-    }
-  };
-
-  const changeCheckbox = (type: string, value: FilterValue, event: React.ChangeEvent<HTMLInputElement>) => {
-    adjustFilters(type, value, event.target.checked);
-  };
-
-  const handleTravelTimeSliderChange = (values: number[] | number) => {
-    setTravelTimeRangeValues(Array.isArray(values) ? values : [values, values]);
-    setValuesManuallyChanged(true);
-
-    onCompleteTravelTimeSliderChange(values);
-  };
-
-  const onCompleteTravelTimeSliderChange = (values: number[] | number) => {
-    const ranges = Array.isArray(values) ? values : [values, values];
-    const rangeFilters = ranges.map((value, index) => {
-      return {
-        id: index,
-        name: 'travelTime',
-        lowestPrice: value
-      } as FilterValue;
-    });
-    setFilters({
-      ...filters,
-      travelTimes: rangeFilters
-    });
-  };
-
-  const handlePriceSliderChange = (values: number[] | number) => {
-    setPriceRangeValues(Array.isArray(values) ? values : [values, values]);
-    setValuesManuallyChanged(true);
-
-    onCompletePriceSliderChange(values);
-  };
-
-  const onCompletePriceSliderChange = (values: number[] | number) => {
-    const ranges = Array.isArray(values) ? values : [values, values];
-    const rangeFilters = ranges.map((value, index) => {
-      return {
-        id: index,
-        name: 'price',
-        lowestPrice: value
-      } as FilterValue;
-    });
-    setFilters({
-      ...filters,
-      prices: rangeFilters
-    });
-  };
-
-  const handleResetFilters = () => {
-    resetFilters();
-    setValuesManuallyChanged(false);
-    setTravelTimeRangeValues([minTravelTime, maxTravelTime]);
-    setPriceRangeValues([minPrice, maxPrice]);
-  };
-
-  return (
-    <div className={`search__filters--modal ${isOpen ? 'is-open' : ''}`}>
-      <div className="search__filters--background" onClick={() => handleSetIsOpen()}></div>
-      <button className="search__filters--close" onClick={() => handleSetIsOpen()}>
-        <Icon name="ui-close" height={24} />
-      </button>
-      <div className="search__filters">
-        <div className="search__filter-row search__filter__header">
-          <div className="search__filter-row-flex-title">
-            <p className="search__filter-small-title">{translations.SRP.FILTERS}</p>
-          </div>
-          {!isLoading && (
-            <a className="search__filter-reset" onClick={() => handleResetFilters()}>
-              {translations.SRP.RESET}
-            </a>
-          )}
-        </div>
-        <>
-          <div className="search__filters__group-container">
-            {/* Airlines */}
-            <div className="search__filter-group">
-              <div
-                className="search__filter-row search__filter-row--underline"
-                onClick={() => setAirlineFilterExpanded(!airlineFilterExpanded)}
-                role="button"
-                tabIndex={0}>
-                <h6 className="search__filter-large-title">{translations.FLIGHTS_FORM.AIRLINES}</h6>
-                <svg
-                  id="search-chevron-up-icon"
-                  className={`search__filter-chevron-icon ${airlineFilterExpanded ? 'search__filter-chevron-icon--flipped' : ''} `}
-                  viewBox="0 0 10 6.063"
-                  width={10}
-                  height={6.063}>
-                  <path
-                    id="Path_62"
-                    data-name="Path 62"
-                    d="M245-617.937l-5-5L241.063-624,245-620.062,248.938-624,250-622.937Z"
-                    transform="translate(-240 624)"
-                    fill="#707070"
-                  />
-                </svg>
-              </div>
-              {airlineFilterExpanded && (
-                <div className="search__filter-rows">
-                  {airlineFilter.map((airline, airlineIndex) => (
-                    <div className="search__filter-row search__filter-row--checkbox" key={`${airline.name}-${airlineIndex}`}>
-                      <div className="checkbox">
-                        <label className="checkbox__label">
-                          <input
-                            type="checkbox"
-                            className="checkbox__input checkbox__input--parent"
-                            checked={filters.airlines?.map((a) => a.id).includes(airline.id)}
-                            onChange={(event) => changeCheckbox('Airlines', airline, event)}
-                          />
-                          <span className="radiobutton__label-text">{airline.name}</span>
-                        </label>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-            {/* NumberOfStops */}
-            <div className="search__filter-group">
-              <div
-                className="search__filter-row search__filter-row--underline"
-                onClick={() => setStopFilterExpanded(!stopFilterExpanded)}
-                role="button"
-                tabIndex={0}>
-                <h6 className="search__filter-large-title">{translations.FLIGHTS_FORM.NUMBER_OF_STOPS}</h6>
-                <svg
-                  id="search-chevron-up-icon"
-                  className={`search__filter-chevron-icon ${stopFilterExpanded ? 'search__filter-chevron-icon--flipped' : ''} `}
-                  viewBox="0 0 10 6.063"
-                  width={10}
-                  height={6.063}>
-                  <path
-                    id="Path_62"
-                    data-name="Path 62"
-                    d="M245-617.937l-5-5L241.063-624,245-620.062,248.938-624,250-622.937Z"
-                    transform="translate(-240 624)"
-                    fill="#707070"
-                  />
-                </svg>
-              </div>
-              {stopFilterExpanded && (
-                <div className="search__filter-rows">
-                  {numberOfStopsFilter.map((numberOfStops, stopIndex) => (
-                    <div className="search__filter-row search__filter-row--checkbox" key={`${numberOfStops.name}-${stopIndex}`}>
-                      <div className="checkbox">
-                        <label className="checkbox__label">
-                          <input
-                            type="checkbox"
-                            className="checkbox__input checkbox__input--parent"
-                            checked={filters.numberOfStops?.map((s) => s.id).includes(numberOfStops.id)}
-                            onChange={(event) => changeCheckbox('NumberOfStops', numberOfStops, event)}
-                          />
-                          <span className="radiobutton__label-text">{Number(numberOfStops.name) > 0 ? `${numberOfStops.name} Stop(s)` : 'Direct'}</span>
-                        </label>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-            {/* DepartureRange */}
-            <div className="search__filter-group">
-              <div
-                className="search__filter-row search__filter-row--underline"
-                onClick={() => setDepartureFilterExpanded(!departureFilterExpanded)}
-                role="button"
-                tabIndex={0}>
-                <h6 className="search__filter-large-title">{translations.SRP.DEPARTURE_RANGE}</h6>
-                <svg
-                  id="search-chevron-up-icon"
-                  className={`search__filter-chevron-icon ${departureFilterExpanded ? 'search__filter-chevron-icon--flipped' : ''} `}
-                  viewBox="0 0 10 6.063"
-                  width={10}
-                  height={6.063}>
-                  <path
-                    id="Path_62"
-                    data-name="Path 62"
-                    d="M245-617.937l-5-5L241.063-624,245-620.062,248.938-624,250-622.937Z"
-                    transform="translate(-240 624)"
-                    fill="#707070"
-                  />
-                </svg>
-              </div>
-              {departureFilterExpanded && (
-                <div className="search__filter-rows">
-                  {departureRangeFilter.map((departureRange, rangeIndex) => (
-                    <div className="search__filter-row search__filter-row--checkbox" key={`${departureRange.name}-${rangeIndex}`}>
-                      <div className="checkbox">
-                        <label className="checkbox__label">
-                          <input
-                            type="checkbox"
-                            className="checkbox__input checkbox__input--parent"
-                            checked={filters.departureRanges?.map((s) => s.id).includes(departureRange.id)}
-                            onChange={(event) => changeCheckbox('DepartureRange', departureRange, event)}
-                          />
-                          <span className="radiobutton__label-text">{departureRange.name}</span>
-                        </label>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-            {/* DepartureAirport */}
-            <div className="search__filter-group">
-              <div
-                className="search__filter-row search__filter-row--underline"
-                onClick={() => setDepartureAirportFilterExpanded(!departureAirportFilterExpanded)}
-                role="button"
-                tabIndex={0}>
-                <h6 className="search__filter-large-title">{translations.SRP.DEPARTURE_AIRPORTS}</h6>
-                <svg
-                  id="search-chevron-up-icon"
-                  className={`search__filter-chevron-icon ${departureAirportFilterExpanded ? 'search__filter-chevron-icon--flipped' : ''} `}
-                  viewBox="0 0 10 6.063"
-                  width={10}
-                  height={6.063}>
-                  <path
-                    id="Path_62"
-                    data-name="Path 62"
-                    d="M245-617.937l-5-5L241.063-624,245-620.062,248.938-624,250-622.937Z"
-                    transform="translate(-240 624)"
-                    fill="#707070"
-                  />
-                </svg>
-              </div>
-              {departureAirportFilterExpanded && (
-                <div className="search__filter-rows">
-                  {departureAirportFilter.map((departureAirport, airportIndex) => (
-                    <div className="search__filter-row search__filter-row--checkbox" key={`${departureAirport.name}-${airportIndex}`}>
-                      <div className="checkbox">
-                        <label className="checkbox__label">
-                          <input
-                            type="checkbox"
-                            className="checkbox__input checkbox__input--parent"
-                            checked={filters.departureAirports?.map((s) => s.id).includes(departureAirport.id)}
-                            onChange={(event) => changeCheckbox('DepartureAirports', departureAirport, event)}
-                          />
-                          <span className="radiobutton__label-text">{departureAirport.name}</span>
-                        </label>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-            {/* ArrivalAirport */}
-            <div className="search__filter-group">
-              <div
-                className="search__filter-row search__filter-row--underline"
-                onClick={() => setArrivalAirportFilterExpanded(!arrivalAirportFilterExpanded)}
-                role="button"
-                tabIndex={0}>
-                <h6 className="search__filter-large-title">{translations.SRP.ARRIVAL_AIRPORTS}</h6>
-                <svg
-                  id="search-chevron-up-icon"
-                  className={`search__filter-chevron-icon ${arrivalAirportFilterExpanded ? 'search__filter-chevron-icon--flipped' : ''} `}
-                  viewBox="0 0 10 6.063"
-                  width={10}
-                  height={6.063}>
-                  <path
-                    id="Path_62"
-                    data-name="Path 62"
-                    d="M245-617.937l-5-5L241.063-624,245-620.062,248.938-624,250-622.937Z"
-                    transform="translate(-240 624)"
-                    fill="#707070"
-                  />
-                </svg>
-              </div>
-              {arrivalAirportFilterExpanded && (
-                <div className="search__filter-rows">
-                  {arrivalAirportFilter.map((arrivalAirport, airportIndex) => (
-                    <div className="search__filter-row search__filter-row--checkbox" key={`${arrivalAirport.name}-${airportIndex}`}>
-                      <div className="checkbox">
-                        <label className="checkbox__label">
-                          <input
-                            type="checkbox"
-                            className="checkbox__input checkbox__input--parent"
-                            checked={filters.arrivalAirports?.map((s) => s.id).includes(arrivalAirport.id)}
-                            onChange={(event) => changeCheckbox('ArrivalAirports', arrivalAirport, event)}
-                          />
-                          <span className="radiobutton__label-text">{arrivalAirport.name}</span>
-                        </label>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-            {/* Duration */}
-            <div className="search__filter-group">
-              <div
-                className="search__filter-row search__filter-row--underline"
-                onClick={() => setDurationFilterExpanded(!durationFilterExpanded)}
-                role="button"
-                tabIndex={0}>
-                <h6 className="search__filter-large-title">{translations.FLIGHTS_FORM.TRAVEL_DURATION}</h6>
-                <svg
-                  id="search-chevron-up-icon"
-                  className={`search__filter-chevron-icon ${durationFilterExpanded ? 'search__filter-chevron-icon--flipped' : ''} `}
-                  viewBox="0 0 10 6.063"
-                  width={10}
-                  height={6.063}>
-                  <path
-                    id="Path_62"
-                    data-name="Path 62"
-                    d="M245-617.937l-5-5L241.063-624,245-620.062,248.938-624,250-622.937Z"
-                    transform="translate(-240 624)"
-                    fill="#707070"
-                  />
-                </svg>
-              </div>
-              {durationFilterExpanded &&
-                !isEmpty(travelTimeRangeValues) &&
-                (() => {
-                  return (
-                    <div className="search__filter-rows">
-                      <MultiRangeFilter
-                        min={minTravelTime}
-                        max={maxTravelTime}
-                        selectedMin={first(travelTimeRangeValues) ?? minTravelTime}
-                        selectedMax={last(travelTimeRangeValues) ?? maxTravelTime}
-                        valueFormatter={(value) => `${minutesToHoursString(value)}`}
-                        onChange={(newMin, newMax) => {
-                          handleTravelTimeSliderChange([newMin, newMax]);
-                        }}
-                      />
-                    </div>
-                  );
-                })()}
-            </div>
-            {/* Price */}
-            <div className="search__filter-group">
-              <div
-                className="search__filter-row search__filter-row--underline"
-                onClick={() => setPriceFilterExpanded(!priceFilterExpanded)}
-                role="button"
-                tabIndex={0}>
-                <h6 className="search__filter-large-title">{translations.SRP.PRICE}</h6>
-                <svg
-                  id="search-chevron-up-icon"
-                  className={`search__filter-chevron-icon ${priceFilterExpanded ? 'search__filter-chevron-icon--flipped' : ''} `}
-                  viewBox="0 0 10 6.063"
-                  width={10}
-                  height={6.063}>
-                  <path
-                    id="Path_62"
-                    data-name="Path 62"
-                    d="M245-617.937l-5-5L241.063-624,245-620.062,248.938-624,250-622.937Z"
-                    transform="translate(-240 624)"
-                    fill="#707070"
-                  />
-                </svg>
-              </div>
-              {priceFilterExpanded &&
-                !isEmpty(priceRangeValues) &&
-                (() => {
-                  return (
-                    <div className="search__filter-rows">
-                      <MultiRangeFilter
-                        min={minPrice}
-                        max={maxPrice}
-                        selectedMin={first(priceRangeValues) ?? minPrice}
-                        selectedMax={last(priceRangeValues) ?? maxPrice}
-                        valueFormatter={(value) => `€${value}`}
-                        onChange={(newMin, newMax) => {
-                          handlePriceSliderChange([newMin, newMax]);
-                        }}
-                      />
-                    </div>
-                  );
-                })()}
-            </div>
-          </div>
-        </>
-      </div>
-    </div>
-  );
-};
-
-export default FlightFilters;
+import React, { useContext, useEffect, useState } from 'react';
+import { ExtendedFlightSearchResponseItem, FilterValue } from '../../types';
+import MultiRangeFilter from '../multi-range-filter';
+import SearchResultsConfigurationContext from '../../search-results-configuration-context';
+import Icon from '../../../shared/components/icon';
+import { durationInTicksInMinutes, getTranslations, minutesToHoursString, rangeFromDateTimeInMinutes } from '../../../shared/utils/localization-util';
+import { useFlightSearch } from '../flight/flight-search-context';
+import { first, isEmpty, last, orderBy } from 'lodash';
+import { getArrivalSegment, getDepartureRangeName, getDepartureSegment, getNumberOfStops } from '../../utils/flight-utils';
+import { DepartureRange } from '../../../shared/types';
+
+interface FiltersProps {
+  isOpen: boolean;
+  handleSetIsOpen: () => void;
+  isLoading?: boolean;
+}
+
+const FlightFilters: React.FC<FiltersProps> = ({ isOpen, handleSetIsOpen, isLoading }) => {
+  const context = useContext(SearchResultsConfigurationContext);
+  const translations = getTranslations(context?.languageCode ?? 'en-GB');
+  const {
+    flightSearchResults,
+    filteredResults,
+    searchRequestId,
+    filters,
+    setFilters,
+    resetFilters,
+    airlineResults,
+    numberOfStopsResults,
+    departureRangeResults,
+    departureAirportsResults,
+    arrivalAirportsResults,
+    valuesManuallyChanged,
+    setValuesManuallyChanged
+  } = useFlightSearch();
+
+  const [airlineFilterExpanded, setAirlineFilterExpanded] = useState<boolean>(true);
+  const [airlineFilter, setAirlineFilter] = useState<FilterValue[]>([]);
+
+  const [stopFilterExpanded, setStopFilterExpanded] = useState<boolean>(true);
+  const [numberOfStopsFilter, setNumberOfStopsFilter] = useState<FilterValue[]>([]);
+
+  const [departureFilterExpanded, setDepartureFilterExpanded] = useState<boolean>(true);
+  const [departureRangeFilter, setDepartureRangeFilter] = useState<FilterValue[]>([]);
+
+  const [departureAirportFilterExpanded, setDepartureAirportFilterExpanded] = useState<boolean>(true);
+  const [departureAirportFilter, setDepartureAirportFilter] = useState<FilterValue[]>([]);
+
+  const [arrivalAirportFilterExpanded, setArrivalAirportFilterExpanded] = useState<boolean>(true);
+  const [arrivalAirportFilter, setArrivalAirportFilter] = useState<FilterValue[]>([]);
+
+  const [durationFilterExpanded, setDurationFilterExpanded] = useState<boolean>(true);
+  const [minTravelTime, setMinTravelTime] = useState<number>(0);
+  const [maxTravelTime, setMaxTravelTime] = useState<number>(0);
+  const [travelTimeRangeValues, setTravelTimeRangeValues] = useState<number[]>([]);
+
+  const [priceFilterExpanded, setPriceFilterExpanded] = useState<boolean>(true);
+  const [minPrice, setMinPrice] = useState<number>(0);
+  const [maxPrice, setMaxPrice] = useState<number>(0);
+  const [priceRangeValues, setPriceRangeValues] = useState<number[]>([]);
+
+  useEffect(() => {
+    const results = filteredResults.filter((item) => item.requestId === searchRequestId);
+    if (!isEmpty(results)) {
+      // airlines
+      const airlinesMap = new Map<string, ExtendedFlightSearchResponseItem>();
+      if (!isEmpty(airlineResults)) {
+        airlineResults.map((result) => {
+          const airline = result.airlineCode;
+
+          if (!airlinesMap.has(airline) || result.price < airlinesMap.get(airline)!.price) {
+            airlinesMap.set(airline, result);
+          }
+        });
+
+        // check if filters.airlines has values, if so, make sure all selected filters are present in the airlinesMap
+        const validAirlines = filters.airlines.filter((filter) => airlinesMap.has(filter.id.toString()));
+        if (validAirlines.length !== filters.airlines.length) {
+          setFilters({
+            ...filters,
+            airlines: validAirlines
+          });
+        }
+      }
+      // Convert the Map to an array of FilterValue
+      const uniqueAirlines = Array.from(airlinesMap.entries()).map(
+        ([airlineCode, flightItem]) =>
+          ({
+            id: airlineCode,
+            name: flightItem.airlineName, // Use the airline name directly
+            lowestPrice: flightItem.price
+          } as FilterValue)
+      );
+      setAirlineFilter(orderBy(uniqueAirlines, ['name'], ['asc']));
+
+      // number of stops
+      // Group by numberOfStops and find the lowest price
+      const stopsMap = new Map<number, number>();
+      if (!isEmpty(numberOfStopsResults)) {
+        numberOfStopsResults.map((result) => {
+          let numberOfStops = getNumberOfStops(result.outward);
+          if (numberOfStops > 2) {
+            numberOfStops = 2;
+          }
+
+          if (!stopsMap.has(numberOfStops) || result.price < stopsMap.get(numberOfStops)!) {
+            stopsMap.set(numberOfStops, result.price);
+          }
+        });
+        // check if filters.numberOfStops has values, if so, make sure all selected filters are present in the stopsMap
+        const validNumberOfStops = filters.numberOfStops.filter((filter) => stopsMap.has(Number(filter.id)));
+        if (validNumberOfStops.length !== filters.numberOfStops.length) {
+          setFilters({
+            ...filters,
+            numberOfStops: validNumberOfStops
+          });
+        }
+      }
+      // Convert the Map to an array of FilterValue
+      const uniqueStops = Array.from(stopsMap.entries()).map(
+        ([id, lowestPrice]) =>
+          ({
+            id: id,
+            name: id.toString(), // Format the name
+            lowestPrice: lowestPrice
+          } as FilterValue)
+      );
+      setNumberOfStopsFilter(orderBy(uniqueStops, ['id'], ['asc']));
+
+      // departureRange
+      const departureRangeMap = new Map<DepartureRange, number>();
+      if (!isEmpty(departureRangeResults)) {
+        departureRangeResults.map((result) => {
+          const departureRange = rangeFromDateTimeInMinutes(getDepartureSegment(result.outward)?.departureDateTime);
+          if (!departureRangeMap.has(departureRange) || result.price < departureRangeMap.get(departureRange)!) {
+            departureRangeMap.set(departureRange, result.price);
+          }
+        });
+        // check if filters.departureRanges has values, if so, make sure all selected filters are present in the departureRangeMap
+        const validDepartureRanges = filters.departureRanges.filter((filter) => departureRangeMap.has(Number(filter.id)));
+        if (validDepartureRanges.length !== filters.departureRanges.length) {
+          setFilters({
+            ...filters,
+            departureRanges: validDepartureRanges
+          });
+        }
+      }
+      // Convert the Map to an array of FilterValue
+      const uniqueDepartureRanges = Array.from(departureRangeMap.entries()).map(
+        ([range, lowestPrice]) =>
+          ({
+            id: range,
+            name: getDepartureRangeName(translations, range),
+            lowestPrice: lowestPrice
+          } as FilterValue)
+      );
+      setDepartureRangeFilter(orderBy(uniqueDepartureRanges, ['id'], ['asc']));
+
+      // departureAirports
+      const departureAirportsMap = new Map<string, ExtendedFlightSearchResponseItem>();
+      if (!isEmpty(departureAirportsResults)) {
+        departureAirportsResults.map((result) => {
+          const departureAirport = getDepartureSegment(result.outward)?.departureAirportCode;
+
+          if (departureAirport) {
+            if (!departureAirportsMap.has(departureAirport) || result.price < departureAirportsMap.get(departureAirport)!.price) {
+              departureAirportsMap.set(departureAirport, result);
+            }
+          }
+        });
+
+        // check if filters.departureAirports has values, if so, make sure all selected filters are present in the departureAirportsMap
+        const validDepartureAirports = filters.departureAirports.filter((filter) => departureAirportsMap.has(filter.id.toString()));
+        if (validDepartureAirports.length !== filters.departureAirports.length) {
+          setFilters({
+            ...filters,
+            departureAirports: validDepartureAirports
+          });
+        }
+      }
+      // Convert the Map to an array of FilterValue
+      const uniqueDepartureAirports = Array.from(departureAirportsMap.entries()).map(
+        ([departureAirport, flightItem]) =>
+          ({
+            id: departureAirport,
+            name: getDepartureSegment(flightItem.outward)?.departureAirportName + ' (' + departureAirport + ')', // Use the departure airport name directly
+            lowestPrice: flightItem.price
+          } as FilterValue)
+      );
+      setDepartureAirportFilter(orderBy(uniqueDepartureAirports, ['name'], ['asc']));
+
+      // arrivalAirports
+      const arrivalAirportsMap = new Map<string, ExtendedFlightSearchResponseItem>();
+      if (!isEmpty(arrivalAirportsResults)) {
+        arrivalAirportsResults.map((result) => {
+          const arrivalAirport = getArrivalSegment(result.outward)?.arrivalAirportCode;
+
+          if (arrivalAirport) {
+            if (!arrivalAirportsMap.has(arrivalAirport) || result.price < arrivalAirportsMap.get(arrivalAirport)!.price) {
+              arrivalAirportsMap.set(arrivalAirport, result);
+            }
+          }
+        });
+
+        // check if filters.arrivalAirports has values, if so, make sure all selected filters are present in the arrivalAirportsMap
+        const validArrivalAirports = filters.arrivalAirports.filter((filter) => arrivalAirportsMap.has(filter.id.toString()));
+        if (validArrivalAirports.length !== filters.arrivalAirports.length) {
+          setFilters({
+            ...filters,
+            arrivalAirports: validArrivalAirports
+          });
+        }
+      }
+      // Convert the Map to an array of FilterValue
+      const uniqueArrivalAirports = Array.from(arrivalAirportsMap.entries()).map(
+        ([arrivalAirport, flightItem]) =>
+          ({
+            id: arrivalAirport,
+            name: getArrivalSegment(flightItem.outward)?.arrivalAirportName + ' (' + arrivalAirport + ')', // Use the arrival airport name directly
+            lowestPrice: flightItem.price
+          } as FilterValue)
+      );
+      setArrivalAirportFilter(orderBy(uniqueArrivalAirports, ['name'], ['asc']));
+    } else {
+      setNumberOfStopsFilter([]);
+      setDepartureRangeFilter([]);
+      setAirlineFilter([]);
+      setDepartureAirportFilter([]);
+    }
+  }, [filteredResults, searchRequestId]);
+
+  useEffect(() => {
+    const results = flightSearchResults.filter((item) => item.requestId === searchRequestId);
+    if (!isEmpty(results)) {
+      // Travel time filter
+      const minTravelTimeDuration = Math.min(...results.map((result) => result.outward.durationInTicks));
+      const maxTravelTimeDuration = Math.max(...results.map((result) => result.outward.durationInTicks));
+      const minTravelTimeValue = durationInTicksInMinutes(minTravelTimeDuration);
+      const maxTravelTimeValue = durationInTicksInMinutes(maxTravelTimeDuration);
+      setMinTravelTime(minTravelTimeValue);
+      setMaxTravelTime(maxTravelTimeValue);
+      if (!valuesManuallyChanged) {
+        setTravelTimeRangeValues([minTravelTimeValue, maxTravelTimeValue]);
+      }
+      // price filter
+      const minPriceValue = Math.min(...results.map((result) => result.price));
+      const maxPriceValue = Math.max(...results.map((result) => result.price));
+      setMinPrice(minPriceValue);
+      setMaxPrice(maxPriceValue);
+      if (!valuesManuallyChanged) {
+        setPriceRangeValues([minPriceValue, maxPriceValue]);
+      }
+    }
+  }, [flightSearchResults]);
+
+  const adjustFilters = (type: string, value: FilterValue, checked: boolean) => {
+    switch (type) {
+      case 'Airlines':
+        setFilters({
+          ...filters,
+          airlines: checked ? [...filters.airlines, value] : filters.airlines.filter((n) => n.id !== value.id)
+        });
+        return;
+      case 'NumberOfStops':
+        setFilters({
+          ...filters,
+          numberOfStops: checked ? [...filters.numberOfStops, value] : filters.numberOfStops.filter((n) => n.id !== value.id)
+        });
+        return;
+      case 'DepartureRange':
+        setFilters({
+          ...filters,
+          departureRanges: checked ? [...filters.departureRanges, value] : filters.departureRanges.filter((n) => n.id !== value.id)
+        });
+        return;
+      case 'DepartureAirports':
+        setFilters({
+          ...filters,
+          departureAirports: checked ? [...filters.departureAirports, value] : filters.departureAirports.filter((n) => n.id !== value.id)
+        });
+        return;
+      case 'ArrivalAirports':
+        setFilters({
+          ...filters,
+          arrivalAirports: checked ? [...filters.arrivalAirports, value] : filters.arrivalAirports.filter((n) => n.id !== value.id)
+        });
+        return;
+    }
+  };
+
+  const changeCheckbox = (type: string, value: FilterValue, event: React.ChangeEvent<HTMLInputElement>) => {
+    adjustFilters(type, value, event.target.checked);
+  };
+
+  const handleTravelTimeSliderChange = (values: number[] | number) => {
+    setTravelTimeRangeValues(Array.isArray(values) ? values : [values, values]);
+    setValuesManuallyChanged(true);
+
+    onCompleteTravelTimeSliderChange(values);
+  };
+
+  const onCompleteTravelTimeSliderChange = (values: number[] | number) => {
+    const ranges = Array.isArray(values) ? values : [values, values];
+    const rangeFilters = ranges.map((value, index) => {
+      return {
+        id: index,
+        name: 'travelTime',
+        lowestPrice: value
+      } as FilterValue;
+    });
+    setFilters({
+      ...filters,
+      travelTimes: rangeFilters
+    });
+  };
+
+  const handlePriceSliderChange = (values: number[] | number) => {
+    setPriceRangeValues(Array.isArray(values) ? values : [values, values]);
+    setValuesManuallyChanged(true);
+
+    onCompletePriceSliderChange(values);
+  };
+
+  const onCompletePriceSliderChange = (values: number[] | number) => {
+    const ranges = Array.isArray(values) ? values : [values, values];
+    const rangeFilters = ranges.map((value, index) => {
+      return {
+        id: index,
+        name: 'price',
+        lowestPrice: value
+      } as FilterValue;
+    });
+    setFilters({
+      ...filters,
+      prices: rangeFilters
+    });
+  };
+
+  const handleResetFilters = () => {
+    resetFilters();
+    setValuesManuallyChanged(false);
+    setTravelTimeRangeValues([minTravelTime, maxTravelTime]);
+    setPriceRangeValues([minPrice, maxPrice]);
+  };
+
+  return (
+    <div className={`search__filters--modal ${isOpen ? 'is-open' : ''}`}>
+      <div className="search__filters--background" onClick={() => handleSetIsOpen()}></div>
+      <button className="search__filters--close" onClick={() => handleSetIsOpen()}>
+        <Icon name="ui-close" height={24} />
+      </button>
+      <div className="search__filters">
+        <div className="search__filter-row search__filter__header">
+          <div className="search__filter-row-flex-title">
+            <p className="search__filter-small-title">{translations.SRP.FILTERS}</p>
+          </div>
+          {!isLoading && (
+            <a className="search__filter-reset" onClick={() => handleResetFilters()}>
+              {translations.SRP.RESET}
+            </a>
+          )}
+        </div>
+        <>
+          <div className="search__filters__group-container">
+            {/* Airlines */}
+            <div className="search__filter-group">
+              <div
+                className="search__filter-row search__filter-row--underline"
+                onClick={() => setAirlineFilterExpanded(!airlineFilterExpanded)}
+                role="button"
+                tabIndex={0}>
+                <h6 className="search__filter-large-title">{translations.FLIGHTS_FORM.AIRLINES}</h6>
+                <svg
+                  id="search-chevron-up-icon"
+                  className={`search__filter-chevron-icon ${airlineFilterExpanded ? 'search__filter-chevron-icon--flipped' : ''} `}
+                  viewBox="0 0 10 6.063"
+                  width={10}
+                  height={6.063}>
+                  <path
+                    id="Path_62"
+                    data-name="Path 62"
+                    d="M245-617.937l-5-5L241.063-624,245-620.062,248.938-624,250-622.937Z"
+                    transform="translate(-240 624)"
+                    fill="#707070"
+                  />
+                </svg>
+              </div>
+              {airlineFilterExpanded && (
+                <div className="search__filter-rows">
+                  {airlineFilter.map((airline, airlineIndex) => (
+                    <div className="search__filter-row search__filter-row--checkbox" key={`${airline.name}-${airlineIndex}`}>
+                      <div className="checkbox">
+                        <label className="checkbox__label">
+                          <input
+                            type="checkbox"
+                            className="checkbox__input checkbox__input--parent"
+                            checked={filters.airlines?.map((a) => a.id).includes(airline.id)}
+                            onChange={(event) => changeCheckbox('Airlines', airline, event)}
+                          />
+                          <span className="radiobutton__label-text">{airline.name}</span>
+                        </label>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+            {/* NumberOfStops */}
+            <div className="search__filter-group">
+              <div
+                className="search__filter-row search__filter-row--underline"
+                onClick={() => setStopFilterExpanded(!stopFilterExpanded)}
+                role="button"
+                tabIndex={0}>
+                <h6 className="search__filter-large-title">{translations.FLIGHTS_FORM.NUMBER_OF_STOPS}</h6>
+                <svg
+                  id="search-chevron-up-icon"
+                  className={`search__filter-chevron-icon ${stopFilterExpanded ? 'search__filter-chevron-icon--flipped' : ''} `}
+                  viewBox="0 0 10 6.063"
+                  width={10}
+                  height={6.063}>
+                  <path
+                    id="Path_62"
+                    data-name="Path 62"
+                    d="M245-617.937l-5-5L241.063-624,245-620.062,248.938-624,250-622.937Z"
+                    transform="translate(-240 624)"
+                    fill="#707070"
+                  />
+                </svg>
+              </div>
+              {stopFilterExpanded && (
+                <div className="search__filter-rows">
+                  {numberOfStopsFilter.map((numberOfStops, stopIndex) => (
+                    <div className="search__filter-row search__filter-row--checkbox" key={`${numberOfStops.name}-${stopIndex}`}>
+                      <div className="checkbox">
+                        <label className="checkbox__label">
+                          <input
+                            type="checkbox"
+                            className="checkbox__input checkbox__input--parent"
+                            checked={filters.numberOfStops?.map((s) => s.id).includes(numberOfStops.id)}
+                            onChange={(event) => changeCheckbox('NumberOfStops', numberOfStops, event)}
+                          />
+                          <span className="radiobutton__label-text">{Number(numberOfStops.name) > 0 ? `${numberOfStops.name} Stop(s)` : 'Direct'}</span>
+                        </label>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+            {/* DepartureRange */}
+            <div className="search__filter-group">
+              <div
+                className="search__filter-row search__filter-row--underline"
+                onClick={() => setDepartureFilterExpanded(!departureFilterExpanded)}
+                role="button"
+                tabIndex={0}>
+                <h6 className="search__filter-large-title">{translations.SRP.DEPARTURE_RANGE}</h6>
+                <svg
+                  id="search-chevron-up-icon"
+                  className={`search__filter-chevron-icon ${departureFilterExpanded ? 'search__filter-chevron-icon--flipped' : ''} `}
+                  viewBox="0 0 10 6.063"
+                  width={10}
+                  height={6.063}>
+                  <path
+                    id="Path_62"
+                    data-name="Path 62"
+                    d="M245-617.937l-5-5L241.063-624,245-620.062,248.938-624,250-622.937Z"
+                    transform="translate(-240 624)"
+                    fill="#707070"
+                  />
+                </svg>
+              </div>
+              {departureFilterExpanded && (
+                <div className="search__filter-rows">
+                  {departureRangeFilter.map((departureRange, rangeIndex) => (
+                    <div className="search__filter-row search__filter-row--checkbox" key={`${departureRange.name}-${rangeIndex}`}>
+                      <div className="checkbox">
+                        <label className="checkbox__label">
+                          <input
+                            type="checkbox"
+                            className="checkbox__input checkbox__input--parent"
+                            checked={filters.departureRanges?.map((s) => s.id).includes(departureRange.id)}
+                            onChange={(event) => changeCheckbox('DepartureRange', departureRange, event)}
+                          />
+                          <span className="radiobutton__label-text">{departureRange.name}</span>
+                        </label>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+            {/* DepartureAirport */}
+            <div className="search__filter-group">
+              <div
+                className="search__filter-row search__filter-row--underline"
+                onClick={() => setDepartureAirportFilterExpanded(!departureAirportFilterExpanded)}
+                role="button"
+                tabIndex={0}>
+                <h6 className="search__filter-large-title">{translations.SRP.DEPARTURE_AIRPORTS}</h6>
+                <svg
+                  id="search-chevron-up-icon"
+                  className={`search__filter-chevron-icon ${departureAirportFilterExpanded ? 'search__filter-chevron-icon--flipped' : ''} `}
+                  viewBox="0 0 10 6.063"
+                  width={10}
+                  height={6.063}>
+                  <path
+                    id="Path_62"
+                    data-name="Path 62"
+                    d="M245-617.937l-5-5L241.063-624,245-620.062,248.938-624,250-622.937Z"
+                    transform="translate(-240 624)"
+                    fill="#707070"
+                  />
+                </svg>
+              </div>
+              {departureAirportFilterExpanded && (
+                <div className="search__filter-rows">
+                  {departureAirportFilter.map((departureAirport, airportIndex) => (
+                    <div className="search__filter-row search__filter-row--checkbox" key={`${departureAirport.name}-${airportIndex}`}>
+                      <div className="checkbox">
+                        <label className="checkbox__label">
+                          <input
+                            type="checkbox"
+                            className="checkbox__input checkbox__input--parent"
+                            checked={filters.departureAirports?.map((s) => s.id).includes(departureAirport.id)}
+                            onChange={(event) => changeCheckbox('DepartureAirports', departureAirport, event)}
+                          />
+                          <span className="radiobutton__label-text">{departureAirport.name}</span>
+                        </label>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+            {/* ArrivalAirport */}
+            <div className="search__filter-group">
+              <div
+                className="search__filter-row search__filter-row--underline"
+                onClick={() => setArrivalAirportFilterExpanded(!arrivalAirportFilterExpanded)}
+                role="button"
+                tabIndex={0}>
+                <h6 className="search__filter-large-title">{translations.SRP.ARRIVAL_AIRPORTS}</h6>
+                <svg
+                  id="search-chevron-up-icon"
+                  className={`search__filter-chevron-icon ${arrivalAirportFilterExpanded ? 'search__filter-chevron-icon--flipped' : ''} `}
+                  viewBox="0 0 10 6.063"
+                  width={10}
+                  height={6.063}>
+                  <path
+                    id="Path_62"
+                    data-name="Path 62"
+                    d="M245-617.937l-5-5L241.063-624,245-620.062,248.938-624,250-622.937Z"
+                    transform="translate(-240 624)"
+                    fill="#707070"
+                  />
+                </svg>
+              </div>
+              {arrivalAirportFilterExpanded && (
+                <div className="search__filter-rows">
+                  {arrivalAirportFilter.map((arrivalAirport, airportIndex) => (
+                    <div className="search__filter-row search__filter-row--checkbox" key={`${arrivalAirport.name}-${airportIndex}`}>
+                      <div className="checkbox">
+                        <label className="checkbox__label">
+                          <input
+                            type="checkbox"
+                            className="checkbox__input checkbox__input--parent"
+                            checked={filters.arrivalAirports?.map((s) => s.id).includes(arrivalAirport.id)}
+                            onChange={(event) => changeCheckbox('ArrivalAirports', arrivalAirport, event)}
+                          />
+                          <span className="radiobutton__label-text">{arrivalAirport.name}</span>
+                        </label>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+            {/* Duration */}
+            <div className="search__filter-group">
+              <div
+                className="search__filter-row search__filter-row--underline"
+                onClick={() => setDurationFilterExpanded(!durationFilterExpanded)}
+                role="button"
+                tabIndex={0}>
+                <h6 className="search__filter-large-title">{translations.FLIGHTS_FORM.TRAVEL_DURATION}</h6>
+                <svg
+                  id="search-chevron-up-icon"
+                  className={`search__filter-chevron-icon ${durationFilterExpanded ? 'search__filter-chevron-icon--flipped' : ''} `}
+                  viewBox="0 0 10 6.063"
+                  width={10}
+                  height={6.063}>
+                  <path
+                    id="Path_62"
+                    data-name="Path 62"
+                    d="M245-617.937l-5-5L241.063-624,245-620.062,248.938-624,250-622.937Z"
+                    transform="translate(-240 624)"
+                    fill="#707070"
+                  />
+                </svg>
+              </div>
+              {durationFilterExpanded &&
+                !isEmpty(travelTimeRangeValues) &&
+                (() => {
+                  return (
+                    <div className="search__filter-rows">
+                      <MultiRangeFilter
+                        min={minTravelTime}
+                        max={maxTravelTime}
+                        selectedMin={first(travelTimeRangeValues) ?? minTravelTime}
+                        selectedMax={last(travelTimeRangeValues) ?? maxTravelTime}
+                        valueFormatter={(value) => `${minutesToHoursString(value)}`}
+                        onChange={(newMin, newMax) => {
+                          handleTravelTimeSliderChange([newMin, newMax]);
+                        }}
+                      />
+                    </div>
+                  );
+                })()}
+            </div>
+            {/* Price */}
+            <div className="search__filter-group">
+              <div
+                className="search__filter-row search__filter-row--underline"
+                onClick={() => setPriceFilterExpanded(!priceFilterExpanded)}
+                role="button"
+                tabIndex={0}>
+                <h6 className="search__filter-large-title">{translations.SRP.PRICE}</h6>
+                <svg
+                  id="search-chevron-up-icon"
+                  className={`search__filter-chevron-icon ${priceFilterExpanded ? 'search__filter-chevron-icon--flipped' : ''} `}
+                  viewBox="0 0 10 6.063"
+                  width={10}
+                  height={6.063}>
+                  <path
+                    id="Path_62"
+                    data-name="Path 62"
+                    d="M245-617.937l-5-5L241.063-624,245-620.062,248.938-624,250-622.937Z"
+                    transform="translate(-240 624)"
+                    fill="#707070"
+                  />
+                </svg>
+              </div>
+              {priceFilterExpanded &&
+                !isEmpty(priceRangeValues) &&
+                (() => {
+                  return (
+                    <div className="search__filter-rows">
+                      <MultiRangeFilter
+                        min={minPrice}
+                        max={maxPrice}
+                        selectedMin={first(priceRangeValues) ?? minPrice}
+                        selectedMax={last(priceRangeValues) ?? maxPrice}
+                        valueFormatter={(value) => `€${value}`}
+                        onChange={(newMin, newMax) => {
+                          handlePriceSliderChange([newMin, newMax]);
+                        }}
+                      />
+                    </div>
+                  );
+                })()}
+            </div>
+          </div>
+        </>
+      </div>
+    </div>
+  );
+};
+
+export default FlightFilters;