@qite/tide-booking-component 1.4.123 → 1.4.125

package/src/search-results/components/flight/flight-selection/independent-flight-option.tsx

@@ -1,168 +0,0 @@
-import React, { useContext, useState } from 'react';
-import { durationTicksInHoursString, formatPrice, getTranslations, longFormatDate, timeFromDateTime } from '../../../../shared/utils/localization-util';
-import Icon from '../../../../shared/components/icon';
-import SearchResultsConfigurationContext from '../../../search-results-configuration-context';
-import { getArrivalSegment, getDepartureSegment, getFlightSegments, getNumberOfStopsLabel } from '../../../utils/flight-utils';
-import { FlightSearchResponseFlight } from '@qite/tide-client';
-
-interface IndependentFlightOptionProps {
-  item: FlightSearchResponseFlight;
-  onSelect?: () => void;
-  guid: string | null;
-  selectedGuid?: string | null;
-  isOutward: boolean;
-  showSelectedState?: boolean;
-  currentSelectedPrice?: number;
-  price?: number;
-}
-
-const IndependentFlightOption: React.FC<IndependentFlightOptionProps> = ({
-  item,
-  onSelect,
-  guid,
-  selectedGuid,
-  isOutward,
-  showSelectedState,
-  currentSelectedPrice,
-  price
-}) => {
-  const context = useContext(SearchResultsConfigurationContext);
-  const language = context?.languageCode ?? 'en-GB';
-  const translations = getTranslations(language);
-
-  const [detailsOpen, setDetailsOpen] = useState(false);
-
-  const priceDifference = price && currentSelectedPrice ? price - currentSelectedPrice : null;
-
-  return (
-    <div className="search__result-card" key={`flight-${item.code}`}>
-      <div className={`flight ${showSelectedState && selectedGuid === guid ? 'flight--selected' : ''}`}>
-        <div className="flight__option">
-          <div className="flight__content">
-            <div className="flight__flights">
-              <div className="flight__flight">
-                <div className="flight__flight__header">
-                  <div className="flight__status__container"></div>
-                  <div className="flight__price">
-                    {price != null &&
-                      price > 0 &&
-                      (isOutward ? (
-                        <span className="price">
-                          {translations.QSM.ROUNDTRIP + ' ' + translations.SRP.PRICE}&nbsp;{formatPrice(price, 'EUR', context?.languageCode ?? 'en-GB')}
-                        </span>
-                      ) : (
-                        priceDifference != null &&
-                        Math.abs(priceDifference) > 0 && (
-                          <span className="price">
-                            {priceDifference > 0 ? '+' : '-'}&nbsp;{formatPrice(Math.abs(priceDifference), 'EUR', context?.languageCode ?? 'en-GB')}
-                          </span>
-                        )
-                      ))}
-                    <button type="button" className={`cta ${selectedGuid === guid ? 'cta--selected' : 'cta--select'}`} onClick={() => onSelect?.()}>
-                      {selectedGuid === guid ? 'Selected' : 'Select'}
-                    </button>
-                  </div>
-                </div>
-              </div>
-              <div className="flight__flight">
-                <div className="flight__flight__container">
-                  <div className="flight__flight__wrapper">
-                    <div className="flight__logo__wrapper">
-                      <img
-                        src={`https://media.tidesoftware.be/media/shared/Airlines/${getDepartureSegment(item)?.marketingAirlineCode}.png?height=256`}
-                        alt=""
-                        className="flight__logo"
-                      />
-                      <span>{getDepartureSegment(item)?.marketingAirlineName}</span>
-                    </div>
-                    <div className="flight__info">
-                      <div className="flight__info__times">
-                        <strong>
-                          {timeFromDateTime(getDepartureSegment(item)?.departureDateTime)} {getDepartureSegment(item)?.departureAirportCode}
-                        </strong>
-                        <p>{longFormatDate(getDepartureSegment(item)?.departureDateTime, language)}</p>
-                      </div>
-                      <div className="flight__info__duration">
-                        <p>{durationTicksInHoursString(item.durationInTicks)}</p>
-                        <div className="flight__info__duration__stops">
-                          <div className="flight__info__duration__stop" />
-                        </div>
-                        <span>{getNumberOfStopsLabel(item, translations.SRP.DIRECT, translations.SRP.STOPS, translations.SRP.STOP)}</span>
-                      </div>
-                      <div className="flight__info__times flight__info__times--arrival">
-                        <strong>
-                          {timeFromDateTime(getArrivalSegment(item)?.arrivalDateTime)} {getArrivalSegment(item)?.arrivalAirportCode}
-                        </strong>
-                        <p>{longFormatDate(getArrivalSegment(item)?.arrivalDateTime, language)}</p>
-                        {/* <span className="flight__info__times__days">+1 day</span> */}
-                      </div>
-                    </div>
-                  </div>
-
-                  <div className="flight__detail__btn__wrapper">
-                    <div className={`flight__detail__btn ${detailsOpen ? 'flight__detail__btn--active' : ''}`} onClick={() => setDetailsOpen((prev) => !prev)}>
-                      <Icon name="ui-chevron" className="flight__detail__btn__arrow" width={16} height={16} />
-                    </div>
-                  </div>
-                </div>
-
-                <div className={`flight__detail ${detailsOpen ? 'flight__detail--active' : ''}`}>
-                  {getFlightSegments(item)?.map((segment, index) => (
-                    <React.Fragment key={`outward-segment-${index}-${segment.flightNumber}`}>
-                      <div className="flight__info">
-                        <div className="flight__info__times__wrapper">
-                          <div className="flight__info__times">
-                            <p>{timeFromDateTime(segment.departureDateTime)}</p>
-                            <strong>{segment.departureAirportCode}</strong>
-                            <p>{longFormatDate(segment.departureDateTime, language)}</p>
-                          </div>
-                          <div>
-                            <Icon name="ui-plane-depart" width={30} height={20} />
-                          </div>
-                        </div>
-                        <div className="flight__info__duration">
-                          <p>{durationTicksInHoursString(segment.durationInTicks)}</p>
-                          <div className="flight__info__duration__stops" />
-                          <span>{segment.marketingAirlineName}</span>
-                          <strong>{segment.operatingFlightNumber}</strong>
-                        </div>
-                        <div className="flight__info__times__wrapper flight__info__times__wrapper--arrival">
-                          <div>
-                            <Icon name="ui-plane-arrive" width={30} height={20} />
-                          </div>
-                          <div className="flight__info__times flight__info__times--arrival">
-                            <p>{timeFromDateTime(segment.arrivalDateTime)}</p>
-                            <strong>{segment.arrivalAirportCode}</strong>
-                            <p>{longFormatDate(segment.arrivalDateTime, language)}</p>
-                          </div>
-                        </div>
-                      </div>
-
-                      {segment.transferTimeInTicks && (
-                        <div className="flight__info">
-                          <div className="flight__info__times" />
-                          <div className="flight__info__duration flight__info__duration--waittime">
-                            <div className="flight__info__duration__stops flight__info__duration__stops--stoptime">
-                              <Icon name="ui-clock" width={24} height={24} />
-                            </div>
-                            <div className="flight__info__duration__stoptime">
-                              <span>Stop time</span>
-                              <strong>{durationTicksInHoursString(segment.transferTimeInTicks)}</strong>
-                            </div>
-                          </div>
-                          <div className="flight__info__times flight__info__times--arrival" />
-                        </div>
-                      )}
-                    </React.Fragment>
-                  ))}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default IndependentFlightOption;

package/src/search-results/components/flight/flight-selection/independent-flight-selection.tsx

@@ -1,184 +0,0 @@
-import React, { useContext, useEffect, useState } from 'react';
-import Icon from '../../../../shared/components/icon';
-import { ExtendedFlightSearchResponseItem } from '../../../types';
-import SearchResultsConfigurationContext from '../../../search-results-configuration-context';
-import { getTranslations } from '../../../../shared/utils/localization-util';
-import IndependentFlightOption from './independent-flight-option';
-import { useDispatch } from 'react-redux';
-import { setFlyInIsOpen, setSelectedFlight } from '../../../store/search-results-slice';
-import { useFlightSearch } from '../flight-search-context';
-import { getFlightKey } from '../../../utils/flight-utils';
-import { format } from 'date-fns';
-
-interface IndependentFlightSelectionProps {
-  searchResults: ExtendedFlightSearchResponseItem[];
-}
-
-const IndependentFlightSelection: React.FC<IndependentFlightSelectionProps> = ({ searchResults }) => {
-  const dispatch = useDispatch();
-
-  const context = useContext(SearchResultsConfigurationContext);
-  const translations = getTranslations(context?.languageCode ?? 'en-GB');
-
-  const { onFlightSearch } = useFlightSearch();
-
-  const [selectedOutwardKey, setSelectedOutwardKey] = useState<string | null>(null);
-  const [selectedReturnKey, setSelectedReturnKey] = useState<string | null>(null);
-
-  const uniqueOutwardFlights: ExtendedFlightSearchResponseItem[] = React.useMemo(() => {
-    const map = new Map();
-
-    searchResults.forEach((flight) => {
-      const key = getFlightKey(flight.outward.segments);
-
-      if (!map.has(key)) {
-        map.set(key, flight);
-      }
-    });
-
-    return Array.from(map.values());
-  }, [searchResults]);
-
-  const [uniqueReturnFlights, setUniqueReturnFlights] = useState<ExtendedFlightSearchResponseItem[]>([]);
-
-  useEffect(() => {
-    if (!selectedOutwardKey) {
-      setUniqueReturnFlights([]);
-      setSelectedReturnKey(null);
-      return;
-    }
-
-    // Filter combinations that match selected outward fare
-    const matchingCombinations = searchResults.filter((flight) => getFlightKey(flight.outward.segments) === selectedOutwardKey);
-    const returnMap = new Map();
-
-    matchingCombinations.forEach((flight) => {
-      const key = getFlightKey(flight.return.segments);
-
-      if (!returnMap.has(key)) {
-        returnMap.set(key, flight);
-      }
-    });
-
-    const returns = Array.from(returnMap.values());
-
-    setUniqueReturnFlights(returns);
-  }, [selectedOutwardKey, searchResults]);
-
-  const selectedCombinationFlight = React.useMemo(() => {
-    if (!selectedOutwardKey || !selectedReturnKey) return undefined;
-
-    return searchResults.find(
-      (flight) => getFlightKey(flight.outward.segments) === selectedOutwardKey && getFlightKey(flight.return.segments) === selectedReturnKey
-    );
-  }, [searchResults, selectedOutwardKey, selectedReturnKey]);
-
-  useEffect(() => {
-    if (!selectedCombinationFlight) return;
-
-    dispatch(setSelectedFlight(selectedCombinationFlight));
-    onFlightSearch(selectedCombinationFlight); // Trigger search to update accommodation options based on selected flight
-    dispatch(setFlyInIsOpen(true));
-  }, [selectedCombinationFlight, dispatch]);
-
-  const selectedOutward = React.useMemo(() => {
-    if (!selectedOutwardKey) return null;
-
-    return searchResults.find((flight) => getFlightKey(flight.outward.segments) === selectedOutwardKey) || null;
-  }, [searchResults, selectedOutwardKey]);
-
-  const selectedReturn = React.useMemo(() => {
-    if (!selectedReturnKey) return null;
-
-    return searchResults.find((flight) => getFlightKey(flight.return.segments) === selectedReturnKey) || null;
-  }, [searchResults, selectedReturnKey]);
-
-  const firstResultDate = uniqueOutwardFlights.length > 0 ? uniqueOutwardFlights[0].outward.segments[0].departureDateTime : null;
-  const firstResultReturnDate = uniqueReturnFlights.length > 0 ? uniqueReturnFlights[0].return.segments[0].departureDateTime : null;
-
-  const firstResultDay = firstResultDate ? format(firstResultDate, 'd') : null;
-  const firstResultMonth = firstResultDate ? format(firstResultDate, 'MMM') : null;
-  const firstResultReturnDay = firstResultReturnDate ? format(firstResultReturnDate, 'd') : null;
-  const firstResultReturnMonth = firstResultReturnDate ? format(firstResultReturnDate, 'MMM') : null;
-
-  return (
-    <>
-      <div className="search__results__label search__results__label--secondary">
-        <div className="search__results__label__date">
-          <p className="search__results__label__date-date">{firstResultDay}</p>
-          <p>{firstResultMonth}</p>
-        </div>
-        <div className="search__results__label__text">
-          <Icon name="ui-flight" height={16} fill="white" />
-          <h3>
-            {translations.SRP.SELECT} <strong> {translations.SRP.DEPARTURE}</strong>
-          </h3>
-        </div>
-      </div>
-
-      <div className="search__results__cards search__results__cards--extended">
-        {selectedOutwardKey && selectedOutward ? (
-          <IndependentFlightOption
-            key={`flight-${selectedOutwardKey}`}
-            item={selectedOutward.outward}
-            guid={selectedOutward.guid}
-            onSelect={() => setSelectedOutwardKey(null)}
-            selectedGuid={selectedOutward.guid}
-            isOutward={true}
-            price={selectedOutward.price}
-          />
-        ) : (
-          uniqueOutwardFlights.map((result) => (
-            <IndependentFlightOption
-              key={`flight-${result.guid}`}
-              item={result.outward}
-              onSelect={() => setSelectedOutwardKey(getFlightKey(result.outward.segments))}
-              guid={result.guid}
-              isOutward={true}
-              price={result.price}
-            />
-          ))
-        )}
-      </div>
-
-      <div className="search__results__label search__results__label--secondary">
-        <div className="search__results__label__date">
-          <p className="search__results__label__date-date">{firstResultReturnDay}</p>
-          <p>{firstResultReturnMonth}</p>
-        </div>
-        <div className="search__results__label__text">
-          <Icon name="ui-flight" height={16} fill="white" />
-          <h3>
-            {translations.SRP.SELECT} <strong> {translations.SRP.RETURN}</strong>
-          </h3>
-        </div>
-      </div>
-
-      <div className="search__results__cards search__results__cards--extended">
-        {selectedReturnKey && selectedReturn ? (
-          <IndependentFlightOption
-            key={`flight-${selectedReturnKey}`}
-            item={selectedReturn.return}
-            guid={selectedReturn.guid}
-            selectedGuid={selectedReturn.guid}
-            isOutward={false}
-            price={selectedReturn.price}
-          />
-        ) : (
-          uniqueReturnFlights.map((result) => (
-            <IndependentFlightOption
-              key={`flight-${result.guid}`}
-              item={result.return}
-              onSelect={() => setSelectedReturnKey(getFlightKey(result.return.segments))}
-              guid={result.guid}
-              isOutward={false}
-              price={result.price}
-            />
-          ))
-        )}
-      </div>
-    </>
-  );
-};
-
-export default IndependentFlightSelection;

package/src/search-results/components/flight/flight-selection/index.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import { ExtendedFlightSearchResponseItem, FlightSelectionMode } from '../../../types';
-import PairedFlightSelection from './paired-flight-selection';
-import IndependentFlightSelection from './independent-flight-selection';
-
-interface FlightSelectionProps {
-  searchResults: ExtendedFlightSearchResponseItem[];
-  flightSelectionType: FlightSelectionMode;
-}
-
-const FlightSelection: React.FC<FlightSelectionProps> = ({ searchResults, flightSelectionType }) => {
-  return flightSelectionType === 'paired' ? (
-    <PairedFlightSelection searchResults={searchResults} />
-  ) : (
-    <IndependentFlightSelection searchResults={searchResults} />
-  );
-};
-
-export default FlightSelection;

package/src/search-results/components/flight/flight-selection/paired-flight-option.tsx

@@ -1,255 +0,0 @@
-import React, { useContext, useState } from 'react';
-import { durationTicksInHoursString, formatPrice, getTranslations, longFormatDate, timeFromDateTime } from '../../../../shared/utils/localization-util';
-import Icon from '../../../../shared/components/icon';
-import { ExtendedFlightSearchResponseItem } from '../../../types';
-import SearchResultsConfigurationContext from '../../../search-results-configuration-context';
-import { getArrivalSegment, getDepartureSegment, getFlightSegments, getNumberOfStopsLabel } from '../../../utils/flight-utils';
-import { useDispatch, useSelector } from 'react-redux';
-import { setFlyInIsOpen, setSelectedFlight } from '../../../store/search-results-slice';
-import { SearchResultsRootState } from '../../../store/search-results-store';
-import { useFlightSearch } from '../flight-search-context';
-
-interface PairedFlightOptionProps {
-  item: ExtendedFlightSearchResponseItem;
-}
-
-const PairedFlightOption: React.FC<PairedFlightOptionProps> = ({ item }) => {
-  const dispatch = useDispatch();
-  const { selectedFlight } = useSelector((state: SearchResultsRootState) => state.searchResults);
-  const context = useContext(SearchResultsConfigurationContext);
-  const { onFlightSearch } = useFlightSearch();
-  const language = context?.languageCode ?? 'en-GB';
-  const translations = getTranslations(language);
-
-  const [isOutwardOpen, setIsOutwardOpen] = useState(false);
-  const [isReturnOpen, setIsReturnOpen] = useState(false);
-
-  const handleSelect = (flight: ExtendedFlightSearchResponseItem) => {
-    dispatch(setSelectedFlight(flight));
-    onFlightSearch(flight); // Trigger search to update accommodation options based on selected flight
-    dispatch(setFlyInIsOpen(true));
-  };
-
-  return (
-    <div className="search__result-card" key={`flight-${item.guid}`}>
-      <div className="flight">
-        <div className="flight__option">
-          <div className="flight__content">
-            <div className="flight__flights">
-              <div className="flight__flight">
-                <div className="flight__flight__header">
-                  <div className="flight__status__container"></div>
-                  <div className="flight__price">
-                    <span className="price">{formatPrice(item.price, 'EUR', context?.languageCode ?? 'en-GB')}</span>
-                    <button
-                      type="button"
-                      className={`cta ${selectedFlight?.guid === item.guid ? 'cta--selected' : 'cta--select'}`}
-                      onClick={() => handleSelect(item)}>
-                      {selectedFlight?.guid === item.guid ? 'Selected' : 'Select'}
-                    </button>
-                  </div>
-                </div>
-              </div>
-              {item.outward && (
-                <div className="flight__flight">
-                  <div className="flight__flight__container">
-                    <div className="flight__flight__wrapper">
-                      <div className="flight__logo__wrapper">
-                        <img
-                          src={`https://media.tidesoftware.be/media/shared/Airlines/${getDepartureSegment(item.outward)?.marketingAirlineCode}.png?height=256`}
-                          alt=""
-                          className="flight__logo"
-                        />
-                        <span>{getDepartureSegment(item.outward)?.marketingAirlineName}</span>
-                      </div>
-                      <div className="flight__info">
-                        <div className="flight__info__times">
-                          <strong>
-                            {timeFromDateTime(getDepartureSegment(item.outward)?.departureDateTime)} {getDepartureSegment(item.outward)?.departureAirportCode}
-                          </strong>
-                          <p>{longFormatDate(getDepartureSegment(item.outward)?.departureDateTime, language)}</p>
-                        </div>
-                        <div className="flight__info__duration">
-                          <p>{durationTicksInHoursString(item.outward.durationInTicks)}</p>
-                          <div className="flight__info__duration__stops">
-                            <div className="flight__info__duration__stop" />
-                          </div>
-                          <span>{getNumberOfStopsLabel(item.outward, translations.SRP.DIRECT, translations.SRP.STOPS, translations.SRP.STOP)}</span>
-                        </div>
-                        <div className="flight__info__times flight__info__times--arrival">
-                          <strong>
-                            {timeFromDateTime(getArrivalSegment(item.outward)?.arrivalDateTime)} {getArrivalSegment(item.outward)?.arrivalAirportCode}
-                          </strong>
-                          <p>{longFormatDate(getArrivalSegment(item.outward)?.arrivalDateTime, language)}</p>
-                          {/* <span className="flight__info__times__days">+1 day</span> */}
-                        </div>
-                      </div>
-                    </div>
-
-                    <div className="flight__detail__btn__wrapper">
-                      <div
-                        className={`flight__detail__btn ${isOutwardOpen ? 'flight__detail__btn--active' : ''}`}
-                        onClick={() => setIsOutwardOpen((prev) => !prev)}>
-                        <Icon name="ui-chevron" className="flight__detail__btn__arrow" width={16} height={16} />
-                      </div>
-                    </div>
-                  </div>
-
-                  <div className={`flight__detail ${isOutwardOpen ? 'flight__detail--active' : ''}`}>
-                    {getFlightSegments(item.outward).map((segment, index) => (
-                      <React.Fragment key={`outward-segment-${index}-${segment.flightNumber}`}>
-                        <div className="flight__info">
-                          <div className="flight__info__times__wrapper">
-                            <div className="flight__info__times">
-                              <p>{timeFromDateTime(segment.departureDateTime)}</p>
-                              <strong>{segment.departureAirportCode}</strong>
-                              <p>{longFormatDate(segment.departureDateTime, language)}</p>
-                            </div>
-                            <div>
-                              <Icon name="ui-plane-depart" width={30} height={20} />
-                            </div>
-                          </div>
-                          <div className="flight__info__duration">
-                            <p>{durationTicksInHoursString(segment.durationInTicks)}</p>
-                            <div className="flight__info__duration__stops" />
-                            <span>{segment.marketingAirlineName}</span>
-                            <strong>{segment.operatingFlightNumber}</strong>
-                          </div>
-                          <div className="flight__info__times__wrapper flight__info__times__wrapper--arrival">
-                            <div>
-                              <Icon name="ui-plane-arrive" width={30} height={20} />
-                            </div>
-                            <div className="flight__info__times flight__info__times--arrival">
-                              <p>{timeFromDateTime(segment.arrivalDateTime)}</p>
-                              <strong>{segment.arrivalAirportCode}</strong>
-                              <p>{longFormatDate(segment.arrivalDateTime, language)}</p>
-                            </div>
-                          </div>
-                        </div>
-
-                        {segment.transferTimeInTicks && (
-                          <div className="flight__info">
-                            <div className="flight__info__times" />
-                            <div className="flight__info__duration flight__info__duration--waittime">
-                              <div className="flight__info__duration__stops flight__info__duration__stops--stoptime">
-                                <Icon name="ui-clock" width={24} height={24} />
-                              </div>
-                              <div className="flight__info__duration__stoptime">
-                                <span>Stop time</span>
-                                <strong>{durationTicksInHoursString(segment.transferTimeInTicks)}</strong>
-                              </div>
-                            </div>
-                            <div className="flight__info__times flight__info__times--arrival" />
-                          </div>
-                        )}
-                      </React.Fragment>
-                    ))}
-                  </div>
-                </div>
-              )}
-              {item.return && (
-                <div className="flight__flight">
-                  <div className="flight__flight__container">
-                    <div className="flight__flight__wrapper">
-                      <div className="flight__logo__wrapper">
-                        <img
-                          src={`https://media.tidesoftware.be/media/shared/Airlines/${getDepartureSegment(item.return)?.marketingAirlineCode}.png?height=256`}
-                          alt=""
-                          className="flight__logo"
-                        />
-                        <span>{getDepartureSegment(item.return)?.marketingAirlineName}</span>
-                      </div>
-                      <div className="flight__info">
-                        <div className="flight__info__times">
-                          <strong>
-                            {timeFromDateTime(getDepartureSegment(item.return)?.departureDateTime)} {getDepartureSegment(item.return)?.departureAirportCode}
-                          </strong>
-                          <p>{longFormatDate(getDepartureSegment(item.return)?.departureDateTime, language)}</p>
-                        </div>
-                        <div className="flight__info__duration">
-                          <p>{durationTicksInHoursString(item.return.durationInTicks)}</p>
-                          <div className="flight__info__duration__stops">
-                            <div className="flight__info__duration__stop" />
-                          </div>
-                          <span>{getNumberOfStopsLabel(item.return, translations.SRP.DIRECT, translations.SRP.STOPS, translations.SRP.STOP)}</span>
-                        </div>
-                        <div className="flight__info__times flight__info__times--arrival">
-                          <strong>
-                            {timeFromDateTime(getArrivalSegment(item.return)?.arrivalDateTime)} {getArrivalSegment(item.return)?.arrivalAirportCode}
-                          </strong>
-                          <p>{longFormatDate(getArrivalSegment(item.return)?.arrivalDateTime, language)}</p>
-                          {/* <span className="flight__info__times__days">+1 day</span> */}
-                        </div>
-                      </div>
-                    </div>
-
-                    <div className="flight__detail__btn__wrapper">
-                      <div
-                        className={`flight__detail__btn ${isReturnOpen ? 'flight__detail__btn--active' : ''}`}
-                        onClick={() => setIsReturnOpen((prev) => !prev)}>
-                        <Icon name="ui-chevron" className="flight__detail__btn__arrow" width={16} height={16} />
-                      </div>
-                    </div>
-                  </div>
-
-                  <div className={`flight__detail ${isReturnOpen ? 'flight__detail--active' : ''}`}>
-                    {getFlightSegments(item.return).map((segment, index) => (
-                      <React.Fragment key={`return-segment-${index}-${segment.flightNumber}`}>
-                        <div className="flight__info">
-                          <div className="flight__info__times__wrapper">
-                            <div className="flight__info__times">
-                              <p>{timeFromDateTime(segment.departureDateTime)}</p>
-                              <strong>{segment.departureAirportCode}</strong>
-                              <p>{longFormatDate(segment.departureDateTime, language)}</p>
-                            </div>
-                            <div>
-                              <Icon name="ui-plane-depart" width={30} height={20} />
-                            </div>
-                          </div>
-                          <div className="flight__info__duration">
-                            <p>{durationTicksInHoursString(segment.durationInTicks)}</p>
-                            <div className="flight__info__duration__stops" />
-                            <span>{segment.marketingAirlineName}</span>
-                            <strong>{segment.operatingFlightNumber}</strong>
-                          </div>
-                          <div className="flight__info__times__wrapper flight__info__times__wrapper--arrival">
-                            <div>
-                              <Icon name="ui-plane-arrive" width={30} height={20} />
-                            </div>
-                            <div className="flight__info__times flight__info__times--arrival">
-                              <p>{timeFromDateTime(segment.arrivalDateTime)}</p>
-                              <strong>{segment.arrivalAirportCode}</strong>
-                              <p>{longFormatDate(segment.arrivalDateTime, language)}</p>
-                            </div>
-                          </div>
-                        </div>
-
-                        {segment.transferTimeInTicks && (
-                          <div className="flight__info">
-                            <div className="flight__info__times" />
-                            <div className="flight__info__duration flight__info__duration--waittime">
-                              <div className="flight__info__duration__stops flight__info__duration__stops--stoptime">
-                                <Icon name="ui-clock" width={24} height={24} />
-                              </div>
-                              <div className="flight__info__duration__stoptime">
-                                <span>Stop time</span>
-                                <strong>{durationTicksInHoursString(segment.transferTimeInTicks)}</strong>
-                              </div>
-                            </div>
-                            <div className="flight__info__times flight__info__times--arrival" />
-                          </div>
-                        )}
-                      </React.Fragment>
-                    ))}
-                  </div>
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default PairedFlightOption;