@qite/tide-booking-component 1.2.4 → 1.2.5

package/src/booking-wizard/features/flight-options/flight-filter.tsx

@@ -1,357 +1,432 @@
-import React, { useState, useEffect, useRef } from "react";
-import { useSelector } from "react-redux";
-import { buildClassName } from "../../../shared/utils/class-util";
-import Icon from "../../components/icon";
-import MultiRangeFilter from "../../components/multi-range-filter";
-import { FlightFilterOptions } from "../../types";
-import { selectTranslations } from "../booking/selectors";
-import { formatMinutes } from "./flight-utils";
-
-interface FlightFilterProps {
-  filterOptions: FlightFilterOptions;
-  resultCount: number;
-
-  applyFilter: (options: FlightFilterOptions) => void;
-}
-
-const FlightFilter: React.FC<FlightFilterProps> = ({
-  filterOptions,
-  resultCount,
-  applyFilter
-}) => {
-  const translations = useSelector(selectTranslations);
-
-  const [filtersVisible, setFiltersVisible] = useState<boolean>(false);
-  const filterRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (filterRef.current && !filterRef.current.contains(event.target as Node)) {
-        setFiltersVisible(false);
-      }
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, []);
-
-  const updateAirportFilter = (code: string) => {
-    const updatedFilterOptions = {
-      ...filterOptions,
-      airports: filterOptions.airports.map(x => {
-        if (x.value !== code) return x;
-
-        return {
-          ...x,
-          isSelected: !x.isSelected
-        }
-      })
-    };
-
-    applyFilter(updatedFilterOptions);
-  }
-
-  const updateAirlineFilter = (code: string) => {
-    const updatedFilterOptions = {
-      ...filterOptions,
-      airlines: filterOptions.airlines.map(x => {
-        if (x.value !== code) return x;
-
-        return {
-          ...x,
-          isSelected: !x.isSelected
-        }
-      })
-    };
-
-    applyFilter(updatedFilterOptions);
-  }
-
-  const updateStopsFilter = (count: string) => {
-    const updatedFilterOptions = {
-      ...filterOptions,
-      numberOfStops: filterOptions.numberOfStops.map(x => {
-        if (x.value !== count) return x;
-
-        return {
-          ...x,
-          isSelected: !x.isSelected
-        }
-      })
-    };
-
-    applyFilter(updatedFilterOptions);
-  }
-
-  const updateOutwardDeparture = (period: string) => {
-    const updatedFilterOptions = {
-      ...filterOptions,
-      outward: {
-        ...filterOptions.outward,
-        departurePeriod: filterOptions.outward.departurePeriod.map(x => {
-          if (x.value !== period) return x;
-
-          return {
-            ...x,
-            isSelected: !x.isSelected
-          }
-        })
-      }
-    };
-
-    applyFilter(updatedFilterOptions);
-  }
-
-  const updateOutwardTravelDuration = (min: number, max: number) => {
-    const updatedFilterOptions = {
-      ...filterOptions,
-      outward: {
-        ...filterOptions.outward,
-        travelDuration: {
-          ...filterOptions.outward.travelDuration,
-          selectedMin: min,
-          selectedMax: max
-        }
-      }
-    };
-
-    applyFilter(updatedFilterOptions);
-  }
-
-  const updateOutwardChangeDuration = (min: number, max: number) => {
-    const updatedFilterOptions = {
-      ...filterOptions,
-      outward: {
-        ...filterOptions.outward,
-        changeDuration: {
-          ...filterOptions.outward.changeDuration,
-          selectedMin: min,
-          selectedMax: max
-        }
-      }
-    };
-
-    applyFilter(updatedFilterOptions);
-  }
-
-  const updateReturnDeparture = (period: string) => {
-    const updatedFilterOptions = {
-      ...filterOptions,
-      return: {
-        ...filterOptions.return,
-        departurePeriod: filterOptions.return.departurePeriod.map(x => {
-          if (x.value !== period) return x;
-
-          return {
-            ...x,
-            isSelected: !x.isSelected
-          }
-        })
-      }
-    };
-
-    applyFilter(updatedFilterOptions);
-  }
-
-  const updateReturnTravelDuration = (min: number, max: number) => {
-    const updatedFilterOptions = {
-      ...filterOptions,
-      return: {
-        ...filterOptions.return,
-        travelDuration: {
-          ...filterOptions.return.travelDuration,
-          selectedMin: min,
-          selectedMax: max
-        }
-      }
-    };
-
-    applyFilter(updatedFilterOptions);
-  }
-
-  const updateReturnChangeDuration = (min: number, max: number) => {
-    const updatedFilterOptions = {
-      ...filterOptions,
-      return: {
-        ...filterOptions.return,
-        changeDuration: {
-          ...filterOptions.return.changeDuration,
-          selectedMin: min,
-          selectedMax: max
-        }
-      }
-    };
-
-    applyFilter(updatedFilterOptions);
-  }
-
-  return (
-    <>
-      <button type="button" className="cta cta--filter" onClick={() => setFiltersVisible(!filtersVisible)}>
-        <Icon name="ui-filter" width={11} height={10} />
-        <span>{translations.FLIGHTS_FORM.FILTER_OPTIONS}</span>
-        {filtersVisible}
-      </button>
-
-      <div ref={filterRef} className={buildClassName(["flight__filter", filtersVisible && "flight__filter--active"])}>
-        <div className="flight__filter__header">
-          <div className="flight__filter__header__title">
-            <h3>{translations.FLIGHTS_FORM.FILTER_OPTIONS}</h3>
-            <p>{translations.FLIGHTS_FORM.FLIGHTS_FOUND_1} <strong>{resultCount} {translations.FLIGHTS_FORM.FLIGHTS_FOUND_2}</strong> {translations.FLIGHTS_FORM.FLIGHTS_FOUND_3}</p>
-          </div>
-        </div>
-        <div className="flight__filter__body">
-          <div className="flight__filter__group">
-            <div className="flight__filter__group__title">
-              {translations.FLIGHTS_FORM.AIRLINES}
-            </div>
-            <div className="flight__filter__group__wrapper">
-              {filterOptions.airlines.map((option, k) => (
-                <div className="tree" key={k}>
-                  <div className="checkbox flight__filter__checkbox">
-                    <label htmlFor={'airline_' + option.value} className="checkbox__label">
-                      <input type="checkbox" id={'airline_' + option.value} className="checkbox__input checkbox__input--parent"
-                        onClick={() => updateAirlineFilter(option.value)} />
-                      <span className="radiobutton__label-text">
-                        {option.label} {option.count > 0 && (<span className="amount">({option.count})</span>)}
-                      </span>
-                    </label>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-          <div className="flight__filter__group">
-            <div className="flight__filter__group__title">
-              {translations.FLIGHTS_FORM.AIRPORTS}
-            </div>
-            <div className="flight__filter__group__wrapper">
-              {filterOptions.airports.map((option, k) => (
-                <div className="tree" key={k}>
-                  <div className="checkbox flight__filter__checkbox">
-                    <label htmlFor={'airport_' + option.value} className="checkbox__label">
-                      <input type="checkbox" id={'airport_' + option.value} className="checkbox__input checkbox__input--parent"
-                        onClick={() => updateAirportFilter(option.value)} />
-                      <span className="radiobutton__label-text">
-                        {option.label} {option.count > 0 && (<span className="amount">({option.count})</span>)}
-                      </span>
-                    </label>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-          <div className="flight__filter__group">
-            <div className="flight__filter__group__title">
-              {translations.FLIGHTS_FORM.NUMBER_OF_STOPS}
-            </div>
-            <div className="flight__filter__group__wrapper">
-              {filterOptions.numberOfStops.map((option, k) => (
-                <div className="tree" key={k}>
-                  <div className="checkbox flight__filter__checkbox">
-                    <label htmlFor={'stops_' + option.value} className="checkbox__label">
-                      <input type="checkbox" id={'stops_' + option.value} className="checkbox__input checkbox__input--parent"
-                        onClick={() => updateStopsFilter(option.value)} />
-                      <span className="radiobutton__label-text">
-                        {option.label} {option.count > 0 && (<span className="amount">({option.count})</span>)}
-                      </span>
-                    </label>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-          <div className="flight__filter__group">
-            <div className="flight__filter__group__title">
-              {translations.FLIGHTS_FORM.FLIGHT_OUTWARD}
-            </div>
-            <div className="flight__filter__group__wrapper">
-              <p>{translations.FLIGHTS_FORM.DEPARTURE_TIME}</p>
-              {filterOptions.outward.departurePeriod.map((option, k) => (
-                <div className="tree" key={k}>
-                  <div className="checkbox flight__filter__checkbox">
-                    <label htmlFor={'outward_time_' + option.value} className="checkbox__label">
-                      <input type="checkbox" id={'outward_time_' + option.value} className="checkbox__input checkbox__input--parent"
-                        onClick={() => updateOutwardDeparture(option.value)} />
-                      <span className="radiobutton__label-text">
-                        {option.label} {option.count > 0 && (<span className="amount">({option.count})</span>)}
-                      </span>
-                    </label>
-                  </div>
-                </div>
-              ))}
-            </div>
-            <div className="flight__filter__group__wrapper">
-              <p>{translations.FLIGHTS_FORM.TRAVEL_DURATION}</p>
-              <MultiRangeFilter
-                min={filterOptions.outward.travelDuration.min}
-                max={filterOptions.outward.travelDuration.max}
-                selectedMin={filterOptions.outward.travelDuration.selectedMin}
-                selectedMax={filterOptions.outward.travelDuration.selectedMax}
-                valueFormatter={formatMinutes}
-                onChange={updateOutwardTravelDuration}
-              />
-            </div>
-            <div className="flight__filter__group__wrapper">
-              <p>{translations.FLIGHTS_FORM.CHANGE_TIME}</p>
-              <MultiRangeFilter
-                min={filterOptions.outward.changeDuration.min}
-                max={filterOptions.outward.changeDuration.max}
-                selectedMin={filterOptions.outward.changeDuration.selectedMin}
-                selectedMax={filterOptions.outward.changeDuration.selectedMax}
-                valueFormatter={formatMinutes}
-                onChange={updateOutwardChangeDuration}
-              />
-            </div>
-          </div>
-          <div className="flight__filter__group">
-            <div className="flight__filter__group__title">
-              {translations.FLIGHTS_FORM.FLIGHT_RETURN}
-            </div>
-            <div className="flight__filter__group__wrapper">
-              <p>{translations.FLIGHTS_FORM.DEPARTURE_TIME}</p>
-              {filterOptions.return.departurePeriod.map((option, k) => (
-                <div className="tree" key={k}>
-                  <div className="checkbox flight__filter__checkbox">
-                    <label htmlFor={'return_time_' + option.value} className="checkbox__label">
-                      <input type="checkbox" id={'return_time_' + option.value} className="checkbox__input checkbox__input--parent"
-                        onClick={() => updateReturnDeparture(option.value)} />
-                      <span className="radiobutton__label-text">
-                        {option.label} {option.count > 0 && (<span className="amount">({option.count})</span>)}
-                      </span>
-                    </label>
-                  </div>
-                </div>
-              ))}
-            </div>
-            <div className="flight__filter__group__wrapper">
-              <p>{translations.FLIGHTS_FORM.TRAVEL_DURATION}</p>
-              <MultiRangeFilter
-                min={filterOptions.return.travelDuration.min}
-                max={filterOptions.return.travelDuration.max}
-                selectedMin={filterOptions.return.travelDuration.selectedMin}
-                selectedMax={filterOptions.return.travelDuration.selectedMax}
-                valueFormatter={formatMinutes}
-                onChange={updateReturnTravelDuration}
-              />
-            </div>
-            <div className="flight__filter__group__wrapper">
-              <p>{translations.FLIGHTS_FORM.CHANGE_TIME}</p>
-              <MultiRangeFilter
-                min={filterOptions.return.changeDuration.min}
-                max={filterOptions.return.changeDuration.max}
-                selectedMin={filterOptions.return.changeDuration.selectedMin}
-                selectedMax={filterOptions.return.changeDuration.selectedMax}
-                valueFormatter={formatMinutes}
-                onChange={updateReturnChangeDuration}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}
-
-export default FlightFilter;
+import React, { useState, useEffect, useRef } from "react";
+import { useSelector } from "react-redux";
+import { buildClassName } from "../../../shared/utils/class-util";
+import Icon from "../../components/icon";
+import MultiRangeFilter from "../../components/multi-range-filter";
+import { FlightFilterOptions } from "../../types";
+import { selectTranslations } from "../booking/selectors";
+import { formatMinutes } from "./flight-utils";
+
+interface FlightFilterProps {
+  filterOptions: FlightFilterOptions;
+  resultCount: number;
+
+  applyFilter: (options: FlightFilterOptions) => void;
+}
+
+const FlightFilter: React.FC<FlightFilterProps> = ({
+  filterOptions,
+  resultCount,
+  applyFilter,
+}) => {
+  const translations = useSelector(selectTranslations);
+
+  const [filtersVisible, setFiltersVisible] = useState<boolean>(false);
+  const filterRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (
+        filterRef.current &&
+        !filterRef.current.contains(event.target as Node)
+      ) {
+        setFiltersVisible(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  const updateAirportFilter = (code: string) => {
+    const updatedFilterOptions = {
+      ...filterOptions,
+      airports: filterOptions.airports.map((x) => {
+        if (x.value !== code) return x;
+
+        return {
+          ...x,
+          isSelected: !x.isSelected,
+        };
+      }),
+    };
+
+    applyFilter(updatedFilterOptions);
+  };
+
+  const updateAirlineFilter = (code: string) => {
+    const updatedFilterOptions = {
+      ...filterOptions,
+      airlines: filterOptions.airlines.map((x) => {
+        if (x.value !== code) return x;
+
+        return {
+          ...x,
+          isSelected: !x.isSelected,
+        };
+      }),
+    };
+
+    applyFilter(updatedFilterOptions);
+  };
+
+  const updateStopsFilter = (count: string) => {
+    const updatedFilterOptions = {
+      ...filterOptions,
+      numberOfStops: filterOptions.numberOfStops.map((x) => {
+        if (x.value !== count) return x;
+
+        return {
+          ...x,
+          isSelected: !x.isSelected,
+        };
+      }),
+    };
+
+    applyFilter(updatedFilterOptions);
+  };
+
+  const updateOutwardDeparture = (period: string) => {
+    const updatedFilterOptions = {
+      ...filterOptions,
+      outward: {
+        ...filterOptions.outward,
+        departurePeriod: filterOptions.outward.departurePeriod.map((x) => {
+          if (x.value !== period) return x;
+
+          return {
+            ...x,
+            isSelected: !x.isSelected,
+          };
+        }),
+      },
+    };
+
+    applyFilter(updatedFilterOptions);
+  };
+
+  const updateOutwardTravelDuration = (min: number, max: number) => {
+    const updatedFilterOptions = {
+      ...filterOptions,
+      outward: {
+        ...filterOptions.outward,
+        travelDuration: {
+          ...filterOptions.outward.travelDuration,
+          selectedMin: min,
+          selectedMax: max,
+        },
+      },
+    };
+
+    applyFilter(updatedFilterOptions);
+  };
+
+  const updateOutwardChangeDuration = (min: number, max: number) => {
+    const updatedFilterOptions = {
+      ...filterOptions,
+      outward: {
+        ...filterOptions.outward,
+        changeDuration: {
+          ...filterOptions.outward.changeDuration,
+          selectedMin: min,
+          selectedMax: max,
+        },
+      },
+    };
+
+    applyFilter(updatedFilterOptions);
+  };
+
+  const updateReturnDeparture = (period: string) => {
+    const updatedFilterOptions = {
+      ...filterOptions,
+      return: {
+        ...filterOptions.return,
+        departurePeriod: filterOptions.return.departurePeriod.map((x) => {
+          if (x.value !== period) return x;
+
+          return {
+            ...x,
+            isSelected: !x.isSelected,
+          };
+        }),
+      },
+    };
+
+    applyFilter(updatedFilterOptions);
+  };
+
+  const updateReturnTravelDuration = (min: number, max: number) => {
+    const updatedFilterOptions = {
+      ...filterOptions,
+      return: {
+        ...filterOptions.return,
+        travelDuration: {
+          ...filterOptions.return.travelDuration,
+          selectedMin: min,
+          selectedMax: max,
+        },
+      },
+    };
+
+    applyFilter(updatedFilterOptions);
+  };
+
+  const updateReturnChangeDuration = (min: number, max: number) => {
+    const updatedFilterOptions = {
+      ...filterOptions,
+      return: {
+        ...filterOptions.return,
+        changeDuration: {
+          ...filterOptions.return.changeDuration,
+          selectedMin: min,
+          selectedMax: max,
+        },
+      },
+    };
+
+    applyFilter(updatedFilterOptions);
+  };
+
+  return (
+    <>
+      <button
+        type="button"
+        className="cta cta--filter"
+        onClick={() => setFiltersVisible(!filtersVisible)}
+      >
+        <Icon name="ui-filter" width={11} height={10} />
+        <span>{translations.FLIGHTS_FORM.FILTER_OPTIONS}</span>
+      </button>
+
+      <div
+        ref={filterRef}
+        className={buildClassName([
+          "flight__filter",
+          filtersVisible && "flight__filter--active",
+        ])}
+      >
+        <div className="flight__filter__header">
+          <div className="flight__filter__header__title">
+            <h3>{translations.FLIGHTS_FORM.FILTER_OPTIONS}</h3>
+            <p>
+              {translations.FLIGHTS_FORM.FLIGHTS_FOUND_1}{" "}
+              <strong>
+                {resultCount} {translations.FLIGHTS_FORM.FLIGHTS_FOUND_2}
+              </strong>{" "}
+              {translations.FLIGHTS_FORM.FLIGHTS_FOUND_3}
+            </p>
+          </div>
+          <button
+            type="button"
+            className="cta cta--close"
+            onClick={() => setFiltersVisible(false)}
+          >
+            <Icon name="ui-close" width={25} height={25} />
+          </button>
+        </div>
+        <div className="flight__filter__body">
+          <div className="flight__filter__group">
+            <div className="flight__filter__group__title">
+              {translations.FLIGHTS_FORM.AIRLINES}
+            </div>
+            <div className="flight__filter__group__wrapper">
+              {filterOptions.airlines.map((option, k) => (
+                <div className="tree" key={k}>
+                  <div className="checkbox flight__filter__checkbox">
+                    <label
+                      htmlFor={"airline_" + option.value}
+                      className="checkbox__label"
+                    >
+                      <input
+                        type="checkbox"
+                        id={"airline_" + option.value}
+                        className="checkbox__input checkbox__input--parent"
+                        onClick={() => updateAirlineFilter(option.value)}
+                      />
+                      <span className="radiobutton__label-text">
+                        {option.label}{" "}
+                        {option.count > 0 && (
+                          <span className="amount">({option.count})</span>
+                        )}
+                      </span>
+                    </label>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className="flight__filter__group">
+            <div className="flight__filter__group__title">
+              {translations.FLIGHTS_FORM.AIRPORTS}
+            </div>
+            <div className="flight__filter__group__wrapper">
+              {filterOptions.airports.map((option, k) => (
+                <div className="tree" key={k}>
+                  <div className="checkbox flight__filter__checkbox">
+                    <label
+                      htmlFor={"airport_" + option.value}
+                      className="checkbox__label"
+                    >
+                      <input
+                        type="checkbox"
+                        id={"airport_" + option.value}
+                        className="checkbox__input checkbox__input--parent"
+                        onClick={() => updateAirportFilter(option.value)}
+                      />
+                      <span className="radiobutton__label-text">
+                        {option.label}{" "}
+                        {option.count > 0 && (
+                          <span className="amount">({option.count})</span>
+                        )}
+                      </span>
+                    </label>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className="flight__filter__group">
+            <div className="flight__filter__group__title">
+              {translations.FLIGHTS_FORM.NUMBER_OF_STOPS}
+            </div>
+            <div className="flight__filter__group__wrapper">
+              {filterOptions.numberOfStops.map((option, k) => (
+                <div className="tree" key={k}>
+                  <div className="checkbox flight__filter__checkbox">
+                    <label
+                      htmlFor={"stops_" + option.value}
+                      className="checkbox__label"
+                    >
+                      <input
+                        type="checkbox"
+                        id={"stops_" + option.value}
+                        className="checkbox__input checkbox__input--parent"
+                        onClick={() => updateStopsFilter(option.value)}
+                      />
+                      <span className="radiobutton__label-text">
+                        {option.label}{" "}
+                        {option.count > 0 && (
+                          <span className="amount">({option.count})</span>
+                        )}
+                      </span>
+                    </label>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className="flight__filter__group">
+            <div className="flight__filter__group__title">
+              {translations.FLIGHTS_FORM.FLIGHT_OUTWARD}
+            </div>
+            <div className="flight__filter__group__wrapper">
+              <p>{translations.FLIGHTS_FORM.DEPARTURE_TIME}</p>
+              {filterOptions.outward.departurePeriod.map((option, k) => (
+                <div className="tree" key={k}>
+                  <div className="checkbox flight__filter__checkbox">
+                    <label
+                      htmlFor={"outward_time_" + option.value}
+                      className="checkbox__label"
+                    >
+                      <input
+                        type="checkbox"
+                        id={"outward_time_" + option.value}
+                        className="checkbox__input checkbox__input--parent"
+                        onClick={() => updateOutwardDeparture(option.value)}
+                      />
+                      <span className="radiobutton__label-text">
+                        {option.label}{" "}
+                        {option.count > 0 && (
+                          <span className="amount">({option.count})</span>
+                        )}
+                      </span>
+                    </label>
+                  </div>
+                </div>
+              ))}
+            </div>
+            <div className="flight__filter__group__wrapper">
+              <p>{translations.FLIGHTS_FORM.TRAVEL_DURATION}</p>
+              <MultiRangeFilter
+                min={filterOptions.outward.travelDuration.min}
+                max={filterOptions.outward.travelDuration.max}
+                selectedMin={filterOptions.outward.travelDuration.selectedMin}
+                selectedMax={filterOptions.outward.travelDuration.selectedMax}
+                valueFormatter={formatMinutes}
+                onChange={updateOutwardTravelDuration}
+              />
+            </div>
+            <div className="flight__filter__group__wrapper">
+              <p>{translations.FLIGHTS_FORM.CHANGE_TIME}</p>
+              <MultiRangeFilter
+                min={filterOptions.outward.changeDuration.min}
+                max={filterOptions.outward.changeDuration.max}
+                selectedMin={filterOptions.outward.changeDuration.selectedMin}
+                selectedMax={filterOptions.outward.changeDuration.selectedMax}
+                valueFormatter={formatMinutes}
+                onChange={updateOutwardChangeDuration}
+              />
+            </div>
+          </div>
+          <div className="flight__filter__group">
+            <div className="flight__filter__group__title">
+              {translations.FLIGHTS_FORM.FLIGHT_RETURN}
+            </div>
+            <div className="flight__filter__group__wrapper">
+              <p>{translations.FLIGHTS_FORM.DEPARTURE_TIME}</p>
+              {filterOptions.return.departurePeriod.map((option, k) => (
+                <div className="tree" key={k}>
+                  <div className="checkbox flight__filter__checkbox">
+                    <label
+                      htmlFor={"return_time_" + option.value}
+                      className="checkbox__label"
+                    >
+                      <input
+                        type="checkbox"
+                        id={"return_time_" + option.value}
+                        className="checkbox__input checkbox__input--parent"
+                        onClick={() => updateReturnDeparture(option.value)}
+                      />
+                      <span className="radiobutton__label-text">
+                        {option.label}{" "}
+                        {option.count > 0 && (
+                          <span className="amount">({option.count})</span>
+                        )}
+                      </span>
+                    </label>
+                  </div>
+                </div>
+              ))}
+            </div>
+            <div className="flight__filter__group__wrapper">
+              <p>{translations.FLIGHTS_FORM.TRAVEL_DURATION}</p>
+              <MultiRangeFilter
+                min={filterOptions.return.travelDuration.min}
+                max={filterOptions.return.travelDuration.max}
+                selectedMin={filterOptions.return.travelDuration.selectedMin}
+                selectedMax={filterOptions.return.travelDuration.selectedMax}
+                valueFormatter={formatMinutes}
+                onChange={updateReturnTravelDuration}
+              />
+            </div>
+            <div className="flight__filter__group__wrapper">
+              <p>{translations.FLIGHTS_FORM.CHANGE_TIME}</p>
+              <MultiRangeFilter
+                min={filterOptions.return.changeDuration.min}
+                max={filterOptions.return.changeDuration.max}
+                selectedMin={filterOptions.return.changeDuration.selectedMin}
+                selectedMax={filterOptions.return.changeDuration.selectedMax}
+                valueFormatter={formatMinutes}
+                onChange={updateReturnChangeDuration}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default FlightFilter;