@qite/tide-booking-component 1.4.45 → 1.4.46

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

@@ -0,0 +1,147 @@
+import React, { useContext, useState } from 'react';
+import { durationTicksInHoursString, formatPrice, getTranslations, longFormatDate, timeFromDateTime } from '../../../../shared/utils/localization-util';
+import Icon from '../../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';
+import { FlightSearchResponseFlight } from '@qite/tide-client';
+
+interface IndependentFlightOptionProps {
+  item: FlightSearchResponseFlight;
+  onSelect?: () => void;
+  guid: string | null;
+  selectedGuid?: string | null;
+  isOutward: boolean;
+}
+
+const IndependentFlightOption: React.FC<IndependentFlightOptionProps> = ({ item, onSelect, guid, selectedGuid, isOutward }) => {
+  const dispatch = useDispatch();
+  const context = useContext(SearchResultsConfigurationContext);
+  const language = context?.languageCode ?? 'en-GB';
+  const translations = getTranslations(language);
+
+  const [detailsOpen, setDetailsOpen] = useState(false);
+
+  return (
+    <div className="search__result-card" key={`flight-${item.code}`}>
+      <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 ${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

@@ -0,0 +1,172 @@
+import React, { useContext, useEffect, useState } from 'react';
+import Icon from '../../icon';
+import { ExtendedFlightSearchResponseItem } from '../../../types';
+import SearchResultsConfigurationContext from '../../../search-results-configuration-context';
+import { getTranslations } from '../../../../shared/utils/localization-util';
+import { FlightSearchResponseFlightSegment } from '@qite/tide-client';
+import IndependentFlightOption from './independent-flight-option';
+import PairedFlightOption from './paired-flight-option';
+import { useDispatch } from 'react-redux';
+import { setFlyInIsOpen, setSelectedFlight } from '../../../store/search-results-slice';
+import { useFlightSearch } from '../flight-search-context';
+
+interface IndependentFlightSelectionProps {
+  searchResults: ExtendedFlightSearchResponseItem[];
+}
+
+const getFlightKey = (segments: FlightSearchResponseFlightSegment[]) => {
+  if (!segments || segments.length === 0) return '';
+  return segments.map((s) => `${s.marketingAirlineCode}${s.flightNumber}_${s.departureDateTime}`).join('_');
+};
+
+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]);
+
+  return (
+    <>
+      <div className="search__results__label search__results__label--secondary">
+        <div className="search__results__label__date">
+          <Icon name="ui-flight" height={16} fill="white" />
+        </div>
+        <div className="search__results__label__text">
+          <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}
+          />
+        ) : (
+          uniqueOutwardFlights.map((result) => (
+            <IndependentFlightOption
+              key={`flight-${result.guid}`}
+              item={result.outward}
+              onSelect={() => setSelectedOutwardKey(getFlightKey(result.outward.segments))}
+              guid={result.guid}
+              isOutward={true}
+            />
+          ))
+        )}
+      </div>
+      <div className="search__results__label search__results__label--secondary">
+        <div className="search__results__label__date">
+          <Icon name="ui-flight" height={16} fill="white" />
+        </div>
+        <div className="search__results__label__text">
+          <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}
+          />
+        ) : (
+          uniqueReturnFlights.map((result) => (
+            <IndependentFlightOption
+              key={`flight-${result.guid}`}
+              item={result.return}
+              onSelect={() => setSelectedReturnKey(getFlightKey(result.return.segments))}
+              guid={result.guid}
+              isOutward={false}
+            />
+          ))
+        )}
+      </div>
+    </>
+  );
+};
+
+export default IndependentFlightSelection;

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

@@ -0,0 +1,19 @@
+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-option.tsx → flight-selection/paired-flight-option.tsx}

@@ -1,33 +1,37 @@
 import React, { useContext, useState } from 'react';
-import { durationTicksInHoursString, formatPrice, getTranslations, longFormatDate, timeFromDateTime } from '../../../shared/utils/localization-util';
-import Icon from '../icon';
-import { ExtendedFlightSearchResponseItem } from '../../types';
-import SearchResultsConfigurationContext from '../../search-results-configuration-context';
-import { getArrivalSegment, getDepartureSegment, getFlightSegments, getNumberOfStopsLabel } from '../../utils/flight-utils';
+import { durationTicksInHoursString, formatPrice, getTranslations, longFormatDate, timeFromDateTime } from '../../../../shared/utils/localization-util';
+import Icon from '../../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 { setSelectedFlight } from '../../store/search-results-slice';
-import { SearchResultsRootState } from '../../store/search-results-store';
+import { setFlyInIsOpen, setSelectedFlight } from '../../../store/search-results-slice';
+import { SearchResultsRootState } from '../../../store/search-results-store';
+import { useFlightSearch } from '../flight-search-context';
 
-interface FlightOptionProps {
+interface PairedFlightOptionProps {
   item: ExtendedFlightSearchResponseItem;
 }
 
-const FlightOption: React.FC<FlightOptionProps> = ({ item }) => {
+const PairedFlightOption: React.FC<PairedFlightOptionProps> = ({ item }) => {
   const dispatch = useDispatch();
-  const { selectedFlightId } = useSelector((state: SearchResultsRootState) => state.searchResults);
+  const { selectedFlight } = useSelector((state: SearchResultsRootState) => state.searchResults);
   const context = useContext(SearchResultsConfigurationContext);
+  const { onFlightSearch } = useFlightSearch();
   const language = context?.languageCode ?? 'en-GB';
-  const translations = getTranslations(context?.languageCode ?? 'en-GB');
+  const translations = getTranslations(language);
 
   const [isOutwardOpen, setIsOutwardOpen] = useState(false);
   const [isReturnOpen, setIsReturnOpen] = useState(false);
 
-  const handleSelect = (flightGuid: string) => {
-    dispatch(setSelectedFlight(flightGuid));
+  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">
+    <div className="search__result-card" key={`flight-${item.guid}`}>
       <div className="flight">
         <div className="flight__option">
           <div className="flight__content">
@@ -39,9 +43,9 @@ const FlightOption: React.FC<FlightOptionProps> = ({ item }) => {
                     <span className="price">{formatPrice(item.price, 'EUR', context?.languageCode ?? 'en-GB')}</span>
                     <button
                       type="button"
-                      className={`cta ${selectedFlightId === item.guid ? 'cta--selected' : 'cta--select'}`}
-                      onClick={() => handleSelect(item.guid)}>
-                      {selectedFlightId === item.guid ? 'Selected' : 'Select'}
+                      className={`cta ${selectedFlight?.guid === item.guid ? 'cta--selected' : 'cta--select'}`}
+                      onClick={() => handleSelect(item)}>
+                      {selectedFlight?.guid === item.guid ? 'Selected' : 'Select'}
                     </button>
                   </div>
                 </div>
@@ -51,8 +55,12 @@ const FlightOption: React.FC<FlightOptionProps> = ({ item }) => {
                   <div className="flight__flight__container">
                     <div className="flight__flight__wrapper">
                       <div className="flight__logo__wrapper">
-                        <img src={`https://media.tidesoftware.be/media/shared/Airlines/${item.airlineCode}.png?height=256`} alt="" className="flight__logo" />
-                        <span>{item.airlineName}</span>
+                        <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">
@@ -88,9 +96,9 @@ const FlightOption: React.FC<FlightOptionProps> = ({ item }) => {
                   </div>
 
                   <div className={`flight__detail ${isOutwardOpen ? 'flight__detail--active' : ''}`}>
-                    {getFlightSegments(item.outward).map((segment) => (
-                      <>
-                        <div key={segment.flightNumber} className="flight__info">
+                    {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>
@@ -134,7 +142,7 @@ const FlightOption: React.FC<FlightOptionProps> = ({ item }) => {
                             <div className="flight__info__times flight__info__times--arrival" />
                           </div>
                         )}
-                      </>
+                      </React.Fragment>
                     ))}
                   </div>
                 </div>
@@ -144,8 +152,12 @@ const FlightOption: React.FC<FlightOptionProps> = ({ item }) => {
                   <div className="flight__flight__container">
                     <div className="flight__flight__wrapper">
                       <div className="flight__logo__wrapper">
-                        <img src={`https://media.tidesoftware.be/media/shared/Airlines/${item.airlineCode}.png?height=256`} alt="" className="flight__logo" />
-                        <span>{item.airlineName}</span>
+                        <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">
@@ -181,9 +193,9 @@ const FlightOption: React.FC<FlightOptionProps> = ({ item }) => {
                   </div>
 
                   <div className={`flight__detail ${isReturnOpen ? 'flight__detail--active' : ''}`}>
-                    {getFlightSegments(item.return).map((segment) => (
-                      <>
-                        <div key={segment.flightNumber} className="flight__info">
+                    {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>
@@ -227,7 +239,7 @@ const FlightOption: React.FC<FlightOptionProps> = ({ item }) => {
                             <div className="flight__info__times flight__info__times--arrival" />
                           </div>
                         )}
-                      </>
+                      </React.Fragment>
                     ))}
                   </div>
                 </div>
@@ -240,4 +252,4 @@ const FlightOption: React.FC<FlightOptionProps> = ({ item }) => {
   );
 };
 
-export default FlightOption;
+export default PairedFlightOption;

package/src/search-results/components/flight/{flight-accommodation-results.tsx → flight-selection/paired-flight-selection.tsx}

@@ -1,17 +1,15 @@
 import React, { useContext } from 'react';
-import Icon from '../icon';
-import { ExtendedFlightSearchResponseItem } from '../../types';
-import SearchResultsConfigurationContext from '../../search-results-configuration-context';
-import { getTranslations } from '../../../shared/utils/localization-util';
-import FlightOption from './flight-option';
-import { groupBy } from 'lodash';
+import Icon from '../../icon';
+import { ExtendedFlightSearchResponseItem } from '../../../types';
+import SearchResultsConfigurationContext from '../../../search-results-configuration-context';
+import { getTranslations } from '../../../../shared/utils/localization-util';
+import PairedFlightOption from './paired-flight-option';
 
-interface FlightAccommodationResultsProps {
+interface PairedFlightSelectionProps {
   searchResults: ExtendedFlightSearchResponseItem[];
 }
 
-const FlightAccommodationResults: React.FC<FlightAccommodationResultsProps> = ({ searchResults }) => {
-  const groupedSearchResults = groupBy(searchResults, (result) => result.flightRouteId);
+const PairedFlightSelection: React.FC<PairedFlightSelectionProps> = ({ searchResults }) => {
   const context = useContext(SearchResultsConfigurationContext);
   const translations = getTranslations(context?.languageCode ?? 'en-GB');
 
@@ -30,11 +28,11 @@ const FlightAccommodationResults: React.FC<FlightAccommodationResultsProps> = ({
 
       <div className="search__results__cards search__results__cards--extended">
         {searchResults.map((result) => (
-          <FlightOption key={`flight-${result.guid}`} item={result} />
+          <PairedFlightOption key={`flight-${result.guid}`} item={result} />
         ))}
       </div>
     </>
   );
 };
 
-export default FlightAccommodationResults;
+export default PairedFlightSelection;