@qite/tide-booking-component 1.4.102 → 1.4.104

package/src/search-results/components/search-results-container/search-results-container.tsx

@@ -16,15 +16,22 @@ import {
   setPackagingAccoSearchDetails,
   setEditablePackagingEntry,
   setTransactionId,
-  setAccommodationFlyInStep,
+  setFlyInType,
   setPriceDetails,
   setItinerary,
   setFlightsLoading,
   setPackagingFlightResults,
   setSelectedPackagingFlight,
-  setSelectedPackagingAccoResult
+  setSelectedPackagingAccoResult,
+  setSelectedOutwardKey,
+  setSelectedReturnKey,
+  setFilteredPackagingFlightResults,
+  setInitialFlightFilters,
+  resetFlightFilters,
+  setFilters,
+  setInitialFilters
 } from '../../store/search-results-slice';
-import { AccommodationFlyInStep, Filter, SearchSeed, SortByType } from '../../types';
+import { FlyInType, Filter, SearchSeed, SortByType } from '../../types';
 import useMediaQuery from '../../../shared/utils/use-media-query-util';
 import ItemPicker from '../item-picker';
 import {
@@ -71,7 +78,9 @@ import GroupTourResults from '../group-tour/group-tour-results';
 import {
   applyFilters,
   applyFiltersToPackageAccoResults,
+  applyFiltersToPackageFlightResults,
   enrichFiltersWithPackageAccoResults,
+  enrichFiltersWithPackageFlightResults,
   enrichFiltersWithResults
 } from '../../utils/search-results-utils';
 import {
@@ -89,6 +98,17 @@ import { getRequestRoomsFromPackagingSegments, getRoomIndexFromLine, getSelected
 import FullItinerary from '../itinerary/full-itinerary';
 import { getFlightKey } from '../../utils/flight-utils';
 import IndependentFlightOption from '../flight/flight-selection/independent-flight-option';
+import { Spinner } from '../../..';
+import { PackagingRequestBase } from '@qite/tide-client/build/types/booking-v2/request/packaging/packaging-request-base';
+import {
+  selectSelectedCombinationFlight,
+  selectSelectedOutward,
+  selectSelectedOutwardKey,
+  selectSelectedReturn,
+  selectSelectedReturnKey,
+  selectUniqueOutwardFlights,
+  selectUniqueReturnFlights
+} from '../../store/search-results-selectors';
 
 type BuildPackagingEntryPartialArgs = {
   sourceEntry: PackagingEntry | null | undefined;
@@ -113,17 +133,20 @@ const SearchResultsContainer: React.FC = () => {
     filteredResults,
     packagingAccoResults,
     filteredPackagingAccoResults,
-    bookingPackageDetails,
     isLoading,
+    flightsLoading,
+    initialFilters,
     filters,
+    flightFilters,
     selectedSortType,
+    selectedFlightSortType,
     selectedSearchResult,
     selectedPackagingAccoResultCode,
     flyInIsOpen,
     packagingAccoSearchDetails,
     editablePackagingEntry,
     transactionId,
-    accommodationFlyInStep,
+    flyInType,
     itinerary,
     packagingFlightResults
   } = useSelector((state: SearchResultsRootState) => state.searchResults);
@@ -131,7 +154,7 @@ const SearchResultsContainer: React.FC = () => {
   const isMobile = useMediaQuery('(max-width: 1200px)');
 
   const [initialFiltersSet, setInitialFiltersSet] = useState(false);
-  const [initialFilters, setInitialFilters] = useState<Filter[]>([]);
+  const [initialFlightFiltersSet, setInitialFlightFiltersSet] = useState(false);
   const [filtersOpen, setFiltersOpen] = useState(false);
 
   const [detailsIsLoading, setDetailsIsLoading] = useState(false);
@@ -434,7 +457,7 @@ const SearchResultsContainer: React.FC = () => {
     setDetailsIsLoading(true);
 
     setSelectedAccommodationSeed(seed);
-    dispatch(setAccommodationFlyInStep('results'));
+    dispatch(setFlyInType('acco-results'));
     handleFlyInToggle(true);
     const currentTransactionId = await getOrCreateTransactionId();
     await runAccommodationFlow(seed, currentTransactionId ?? '');
@@ -573,7 +596,7 @@ const SearchResultsContainer: React.FC = () => {
       const enrichedFilters = enrichFiltersWithResults(packageSearchResults, context.filters, context.tags ?? []);
       if (!initialFiltersSet) {
         dispatch(resetFilters(enrichedFilters));
-        setInitialFilters(enrichedFilters);
+        dispatch(setInitialFilters(enrichedFilters));
         setInitialFiltersSet(true);
       }
 
@@ -597,19 +620,21 @@ const SearchResultsContainer: React.FC = () => {
     try {
       if (!context) return null;
 
+      dispatch(setIsLoading(true));
+
       const config: TideClientConfig = {
         host: context.tideConnection.host,
         apiKey: context.tideConnection.apiKey
       };
 
       const transaction = await startTransaction(config);
-      console.log('Transaction started', transaction);
 
       dispatch(setTransactionId(transaction.transactionId));
-
+      dispatch(setIsLoading(false));
       return transaction.transactionId;
     } catch (err) {
       console.error('Transaction failed', err);
+      dispatch(setIsLoading(false));
       return null;
     }
   };
@@ -630,7 +655,7 @@ const SearchResultsContainer: React.FC = () => {
 
       const packageAccoSearchResults = await searchPackagingAccommodations(config, searchRequest);
 
-      const enrichedFilters = enrichFiltersWithPackageAccoResults(packageAccoSearchResults, context.filters, context.tags ?? []);
+      const enrichedFilters = enrichFiltersWithPackageAccoResults(packageAccoSearchResults, context.tags ?? []);
       if (!initialFiltersSet) {
         dispatch(resetFilters(enrichedFilters));
         setInitialFilters(enrichedFilters);
@@ -673,8 +698,26 @@ const SearchResultsContainer: React.FC = () => {
 
       const packageFlightSearchResults = await searchPackagingFlights(config, searchRequest);
 
+      const enrichedFilters = enrichFiltersWithPackageFlightResults(packageFlightSearchResults, context.tags ?? [], translations);
+      if (!initialFlightFiltersSet) {
+        dispatch(resetFlightFilters(enrichedFilters));
+        dispatch(setInitialFlightFilters(enrichedFilters));
+        setInitialFlightFiltersSet(true);
+      }
+
       dispatch(setPackagingFlightResults(packageFlightSearchResults));
 
+      const initialFilteredResults = applyFiltersToPackageFlightResults(packageFlightSearchResults, filters, null);
+      dispatch(setFilteredPackagingFlightResults(initialFilteredResults));
+
+      if (initialFilteredResults.length > 0) {
+        const firstResult = first(packageFlightSearchResults);
+        if (firstResult) {
+          dispatch(setSelectedOutwardKey(getFlightKey(firstResult.outward.segments)));
+          dispatch(setSelectedReturnKey(getFlightKey(firstResult.return.segments)));
+        }
+      }
+
       dispatch(setFlightsLoading(false));
     } catch (err) {
       console.error('FlightSearch failed', err);
@@ -746,9 +789,7 @@ const SearchResultsContainer: React.FC = () => {
   ]);
 
   useEffect(() => {
-    console.log('packaging entry from context', context?.packagingEntry);
     if (context?.packagingEntry) {
-      console.log('original packaging entry from context', context.packagingEntry);
       dispatch(setEditablePackagingEntry(structuredClone(context.packagingEntry)));
       dispatch(setTransactionId(context.packagingEntry.transactionId));
     }
@@ -829,6 +870,7 @@ const SearchResultsContainer: React.FC = () => {
         context?.searchConfiguration.qsmType === PortalQsmType.GroupTour
       ) {
         handleFlyInToggle(true);
+        dispatch(setFlyInType('acco-details'));
       }
 
       try {
@@ -913,11 +955,10 @@ const SearchResultsContainer: React.FC = () => {
     if (selectedPackagingAccoResultCode) {
       fetchPackagingAccoSearchDetails();
     }
-    dispatch(setAccommodationFlyInStep('details'));
   }, [selectedSearchResult, selectedPackagingAccoResultCode]);
 
   useEffect(() => {
-    if (context?.searchConfiguration.qsmType === PortalQsmType.Accommodation) {
+    if (context?.searchConfiguration.qsmType === PortalQsmType.Accommodation || context?.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight) {
       const filteredPackageAccoResults = applyFiltersToPackageAccoResults(packagingAccoResults, filters, selectedSortType);
       dispatch(setFilteredPackagingAccoResults(filteredPackageAccoResults));
     } else {
@@ -926,6 +967,13 @@ const SearchResultsContainer: React.FC = () => {
     }
   }, [filters, results, packagingAccoResults, selectedSortType]);
 
+  useEffect(() => {
+    if (context?.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight) {
+      const filteredPackageFlightResults = applyFiltersToPackageFlightResults(packagingFlightResults, flightFilters, selectedFlightSortType);
+      dispatch(setFilteredPackagingFlightResults(filteredPackageFlightResults));
+    }
+  }, [flightFilters, packagingFlightResults, selectedFlightSortType]);
+
   useEffect(() => {
     setInitialFiltersSet(false);
   }, [activeSearchSeed]);
@@ -940,7 +988,15 @@ const SearchResultsContainer: React.FC = () => {
           apiKey: context.tideConnection.apiKey
         };
 
-        const priceDetails = await getPriceDetails(config, editablePackagingEntry);
+        const request = {
+          language: context.languageCode ?? 'en-GB',
+          officeId: context.tideConnection.officeId,
+          catalogueId: context.searchConfiguration.defaultCatalogueId ?? 0,
+          agentId: context.agentId,
+          payload: editablePackagingEntry
+        } as PackagingRequestBase<PackagingEntry>;
+
+        const priceDetails = await getPriceDetails(config, request);
         dispatch(setPriceDetails(priceDetails));
         setPricesAreLoading(false);
       } catch (err) {
@@ -950,8 +1006,7 @@ const SearchResultsContainer: React.FC = () => {
     };
 
     const fetchItinerary = async () => {
-      console.log('Fetching itinerary for entry', editablePackagingEntry);
-      if (!context || !editablePackagingEntry || isEmpty(editablePackagingEntry.lines)) return;
+      if (!context || !context.packagingEntry || !editablePackagingEntry || isEmpty(editablePackagingEntry.lines)) return;
       setItineraryIsLoading(true);
       try {
         const config: TideClientConfig = {
@@ -959,8 +1014,15 @@ const SearchResultsContainer: React.FC = () => {
           apiKey: context.tideConnection.apiKey
         };
 
-        const itinerary = await getItinerary(config, editablePackagingEntry);
-        console.log('Fetched itinerary', itinerary);
+        const request = {
+          language: context.languageCode ?? 'en-GB',
+          officeId: context.tideConnection.officeId,
+          catalogueId: context.searchConfiguration.defaultCatalogueId ?? 0,
+          agentId: context.agentId,
+          payload: editablePackagingEntry
+        } as PackagingRequestBase<PackagingEntry>;
+
+        const itinerary = await getItinerary(config, request);
         dispatch(setItinerary(itinerary));
         setItineraryIsLoading(false);
       } catch (err) {
@@ -974,35 +1036,25 @@ const SearchResultsContainer: React.FC = () => {
   }, [editablePackagingEntry]);
 
   // Flight selection
-  const [selectedOutwardKey, setSelectedOutwardKey] = useState<string | null>(null);
-  const [selectedReturnKey, setSelectedReturnKey] = useState<string | null>(null);
-
-  const uniqueOutwardFlights: PackagingFlightResponse[] = React.useMemo(() => {
-    const map = new Map();
-
-    packagingFlightResults.forEach((flight) => {
-      const key = getFlightKey(flight.outward.segments);
-
-      if (!map.has(key)) {
-        map.set(key, flight);
-      }
-    });
-
-    return Array.from(map.values());
-  }, [packagingFlightResults]);
-
-  const [uniqueReturnFlights, setUniqueReturnFlights] = useState<PackagingFlightResponse[]>([]);
+  // const [selectedOutwardKey, setSelectedOutwardKey] = useState<string | null>(null);
+  // const [selectedReturnKey, setSelectedReturnKey] = useState<string | null>(null);
+  const selectedOutwardKey = useSelector(selectSelectedOutwardKey);
+  const selectedReturnKey = useSelector(selectSelectedReturnKey);
+  const uniqueOutwardFlights = useSelector(selectUniqueOutwardFlights);
+  const uniqueReturnFlights = useSelector(selectUniqueReturnFlights);
+  const selectedOutward = useSelector(selectSelectedOutward);
+  const selectedReturn = useSelector(selectSelectedReturn);
+  const selectedCombinationFlight = useSelector(selectSelectedCombinationFlight);
 
   useEffect(() => {
     if (!selectedOutwardKey) {
-      setUniqueReturnFlights([]);
-      setSelectedReturnKey(null);
+      dispatch(setSelectedReturnKey(null));
       return;
     }
 
-    // Filter combinations that match selected outward fare
     const matchingCombinations = packagingFlightResults.filter((flight) => getFlightKey(flight.outward.segments) === selectedOutwardKey);
-    const returnMap = new Map();
+
+    const returnMap = new Map<string, PackagingFlightResponse>();
 
     matchingCombinations.forEach((flight) => {
       const key = getFlightKey(flight.return.segments);
@@ -1013,29 +1065,18 @@ const SearchResultsContainer: React.FC = () => {
     });
 
     const returns = Array.from(returnMap.values());
+    const segments = first(returns)?.return.segments;
+    const firstReturnKey = returns.length > 0 && segments ? getFlightKey(segments) : null;
 
-    setUniqueReturnFlights(returns);
-  }, [selectedOutwardKey, packagingFlightResults]);
-
-  const selectedOutward = React.useMemo(() => {
-    if (!selectedOutwardKey) return null;
-
-    return packagingFlightResults.find((flight) => getFlightKey(flight.outward.segments) === selectedOutwardKey) || null;
-  }, [packagingFlightResults, selectedOutwardKey]);
-
-  const selectedReturn = React.useMemo(() => {
-    if (!selectedReturnKey) return null;
-
-    return packagingFlightResults.find((flight) => getFlightKey(flight.return.segments) === selectedReturnKey) || null;
-  }, [packagingFlightResults, selectedReturnKey]);
-
-  const selectedCombinationFlight = React.useMemo(() => {
-    if (!selectedOutwardKey || !selectedReturnKey) return undefined;
+    if (!returns.some((x) => getFlightKey(x.return.segments) === selectedReturnKey)) {
+      dispatch(setSelectedReturnKey(firstReturnKey));
+    }
+  }, [selectedOutwardKey, packagingFlightResults, selectedReturnKey, dispatch]);
 
-    return packagingFlightResults.find(
-      (flight) => getFlightKey(flight.outward.segments) === selectedOutwardKey && getFlightKey(flight.return.segments) === selectedReturnKey
-    );
-  }, [packagingFlightResults, selectedOutwardKey, selectedReturnKey]);
+  const visibleOutwardFlights = React.useMemo(() => {
+    const withoutSelected = uniqueOutwardFlights.filter((x) => getFlightKey(x.outward.segments) !== selectedOutwardKey);
+    return withoutSelected.slice(0, 3);
+  }, [uniqueOutwardFlights, selectedOutwardKey]);
 
   // TODO: get details for selected combination flight and show in fly-in
   // useEffect(() => {
@@ -1046,6 +1087,7 @@ const SearchResultsContainer: React.FC = () => {
   //   dispatch(setFlyInIsOpen(true));
   // }, [selectedCombinationFlight, dispatch]);
 
+  // Build packagingEntry
   useEffect(() => {
     if (!context) return;
 
@@ -1062,7 +1104,6 @@ const SearchResultsContainer: React.FC = () => {
       language: context.languageCode ?? 'en-GB'
     });
 
-    console.log('Built next packaging entry', nextEntry);
     if (!nextEntry) return;
 
     dispatch(setEditablePackagingEntry(nextEntry));
@@ -1269,8 +1310,6 @@ const SearchResultsContainer: React.FC = () => {
 
     const selectedHotel = selectedHotelCode ? accommodationResults.find((r) => r.code === selectedHotelCode) : null;
 
-    console.log('Selected hotel for packaging entry', selectedHotel);
-
     // Update accommodation only when enough data exists
     if (selectedHotel) {
       const accommodationLines = buildAccommodationLinesFromSelection(selectedHotel, seed);
@@ -1284,8 +1323,6 @@ const SearchResultsContainer: React.FC = () => {
     // Update flights only when full selected combination exists
     if (selectedFlight) {
       const flightLines = buildFlightLinesFromSelection(selectedFlight);
-      console.log('selectedFlight', selectedFlight);
-      console.log('Built flight lines from selection', flightLines);
       if (flightLines.length) {
         nextLines = removeFlightLines(nextLines);
         nextLines = [...nextLines, ...flightLines];
@@ -1342,6 +1379,11 @@ const SearchResultsContainer: React.FC = () => {
     } as PackagingEntry;
   };
 
+  const handleShowMoreFlights = (flyInType: FlyInType) => {
+    dispatch(setFlyInType(flyInType));
+    dispatch(setFlyInIsOpen(true));
+  };
+
   return (
     <div id="tide-booking" className="search__bg">
       {context && (
@@ -1351,7 +1393,6 @@ const SearchResultsContainer: React.FC = () => {
               <FlightSearchProvider tideConnection={context.tideConnection}>
                 <FlightResultsContainer isMobile={isMobile} />
                 <FlyIn
-                  title="Select your fare"
                   srpType={context.searchConfiguration.qsmType}
                   isOpen={flyInIsOpen}
                   setIsOpen={handleFlyInToggle}
@@ -1373,6 +1414,8 @@ const SearchResultsContainer: React.FC = () => {
                     handleSetIsOpen={() => setFiltersOpen(!filtersOpen)}
                     // handleApplyFilters={() => setSearchTrigger((prev) => prev + 1)}
                     isLoading={isLoading}
+                    setFilters={(filters) => dispatch(setFilters(filters))}
+                    resetFilters={(filters) => dispatch(resetFilters(filters))}
                   />
                 )}
                 {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && (
@@ -1415,33 +1458,35 @@ const SearchResultsContainer: React.FC = () => {
                       )}
                     </div>
                   )}
-                  <div className="search__result-row">
-                    <span className="search__result-row-text">
-                      {!isLoading && context.searchConfiguration.qsmType !== PortalQsmType.AccommodationAndFlight && (
-                        <>
-                          {context.searchConfiguration.qsmType === PortalQsmType.Accommodation &&
-                            filteredPackagingAccoResults?.length &&
-                            filteredPackagingAccoResults?.length}
-                          {context.searchConfiguration.qsmType !== PortalQsmType.Accommodation && filteredResults?.length && filteredResults.length}
-                          &nbsp;{translations.SRP.TOTAL_RESULTS_LABEL}
-                        </>
+                  {context.searchConfiguration.qsmType !== PortalQsmType.AccommodationAndFlight && (
+                    <div className="search__result-row">
+                      <span className="search__result-row-text">
+                        {!isLoading && (
+                          <>
+                            {context.searchConfiguration.qsmType === PortalQsmType.Accommodation &&
+                              filteredPackagingAccoResults?.length &&
+                              filteredPackagingAccoResults?.length}
+                            {context.searchConfiguration.qsmType !== PortalQsmType.Accommodation && filteredResults?.length && filteredResults.length}
+                            &nbsp;{translations.SRP.TOTAL_RESULTS_LABEL}
+                          </>
+                        )}
+                      </span>
+                      {!context.packagingEntry && !isMobile && sortByTypes && sortByTypes.length > 0 && (
+                        <div className="search__result-row-filter">
+                          <ItemPicker
+                            items={sortByTypes}
+                            selection={selectedSortType?.label || undefined}
+                            selectedSortByType={selectedSortType}
+                            label={translations.SRP.SORTBY}
+                            placeholder={translations.SRP.SORTBY}
+                            classModifier="travel-class-picker__items"
+                            valueFormatter={(value, direction) => getSortingName(translations, findSortByType(sortByTypes, value, direction ?? 'asc'))}
+                            onPick={(newSortKey, direction) => handleSortChange(newSortKey, direction)}
+                          />
+                        </div>
                       )}
-                    </span>
-                    {!context.packagingEntry && !isMobile && sortByTypes && sortByTypes.length > 0 && (
-                      <div className="search__result-row-filter">
-                        <ItemPicker
-                          items={sortByTypes}
-                          selection={selectedSortType?.label || undefined}
-                          selectedSortByType={selectedSortType}
-                          label={translations.SRP.SORTBY}
-                          placeholder={translations.SRP.SORTBY}
-                          classModifier="travel-class-picker__items"
-                          valueFormatter={(value, direction) => getSortingName(translations, findSortByType(sortByTypes, value, direction ?? 'asc'))}
-                          onPick={(newSortKey, direction) => handleSortChange(newSortKey, direction)}
-                        />
-                      </div>
-                    )}
-                  </div>
+                    </div>
+                  )}
 
                   <div className="search__results__wrapper">
                     {context.showTabViews &&
@@ -1467,28 +1512,44 @@ const SearchResultsContainer: React.FC = () => {
                           </div>
                         </div>
 
-                        <div className="search__results__cards search__results__cards--extended">
-                          {selectedOutwardKey && selectedOutward ? (
-                            <IndependentFlightOption
-                              key={`flight-${selectedOutwardKey}`}
-                              item={selectedOutward.outward}
-                              guid={selectedOutward.outwardGuid}
-                              onSelect={() => setSelectedOutwardKey(null)}
-                              selectedGuid={selectedOutward.outwardGuid}
-                              isOutward={true}
-                            />
-                          ) : (
-                            uniqueOutwardFlights.map((result) => (
-                              <IndependentFlightOption
-                                key={`flight-${result.outwardGuid}`}
-                                item={result.outward}
-                                onSelect={() => setSelectedOutwardKey(getFlightKey(result.outward.segments))}
-                                guid={result.outwardGuid}
-                                isOutward={true}
-                              />
-                            ))
-                          )}
-                        </div>
+                        {flightsLoading ? (
+                          <Spinner />
+                        ) : (
+                          <>
+                            <div className="search__results__cards search__results__cards--extended">
+                              {selectedOutwardKey && selectedOutward && (
+                                <IndependentFlightOption
+                                  key={`flight-${selectedOutwardKey}`}
+                                  item={selectedOutward.outward}
+                                  guid={selectedOutward.outwardGuid}
+                                  onSelect={() => dispatch(setSelectedOutwardKey(null))}
+                                  selectedGuid={selectedOutward.outwardGuid}
+                                  isOutward={true}
+                                  showSelectedState={true}
+                                  price={selectedOutward.price}
+                                />
+                              )}
+                              {visibleOutwardFlights.map((result) => (
+                                <IndependentFlightOption
+                                  key={`flight-${result.outwardGuid}`}
+                                  item={result.outward}
+                                  onSelect={() => dispatch(setSelectedOutwardKey(getFlightKey(result.outward.segments)))}
+                                  guid={result.outwardGuid}
+                                  isOutward={true}
+                                  price={result.price}
+                                  currentSelectedPrice={selectedOutward?.price}
+                                />
+                              ))}
+                            </div>
+                            {uniqueOutwardFlights && uniqueOutwardFlights.length > 3 && (
+                              <div className="search__results__cards__actions">
+                                <button className="cta cta--secondary" onClick={() => handleShowMoreFlights('flight-outward-results')}>
+                                  {translations.SRP.SHOW_MORE}
+                                </button>
+                              </div>
+                            )}
+                          </>
+                        )}
                       </>
                     )}
 
@@ -1510,25 +1571,28 @@ const SearchResultsContainer: React.FC = () => {
                         </div>
 
                         <div className="search__results__cards search__results__cards--extended">
-                          {selectedReturnKey && selectedReturn ? (
+                          {selectedReturnKey && selectedReturn && (
                             <IndependentFlightOption
                               key={`flight-${selectedReturnKey}`}
                               item={selectedReturn.return}
                               guid={selectedReturn.outwardGuid}
                               selectedGuid={selectedReturn.outwardGuid}
                               isOutward={false}
+                              showSelectedState={true}
+                              price={selectedReturn.price}
                             />
-                          ) : (
-                            uniqueReturnFlights.map((result) => (
-                              <IndependentFlightOption
-                                key={`flight-${result.outwardGuid}`}
-                                item={result.return}
-                                onSelect={() => setSelectedReturnKey(getFlightKey(result.return.segments))}
-                                guid={result.outwardGuid}
-                                isOutward={false}
-                              />
-                            ))
                           )}
+                          {uniqueReturnFlights.map((result) => (
+                            <IndependentFlightOption
+                              key={`flight-${result.outwardGuid}`}
+                              item={result.return}
+                              onSelect={() => dispatch(setSelectedReturnKey(getFlightKey(result.return.segments)))}
+                              guid={result.outwardGuid}
+                              isOutward={false}
+                              currentSelectedPrice={selectedReturn?.price}
+                              price={result.price}
+                            />
+                          ))}
                         </div>
                       </>
                     )}
@@ -1540,15 +1604,15 @@ const SearchResultsContainer: React.FC = () => {
                 </div>
                 {/* <button onClick={() => handleFlyInToggle(!flyInIsOpen)}>Toggle FlyIn</button> */}
                 <FlyIn
-                  title={`${translations.SRP.SELECT} ${translations.SRP.ACCOMMODATION}`}
                   srpType={context.searchConfiguration.qsmType}
                   isOpen={flyInIsOpen}
                   setIsOpen={handleFlyInToggle}
                   handleConfirm={() => handleConfirmHotelSwap()}
                   onPanelRef={(el) => (panelRef.current = el)}
                   detailsLoading={detailsIsLoading}
-                  accommodationStep={accommodationFlyInStep}
+                  flyInType={flyInType}
                   isPackageEditFlow={!!context.packagingEntry}
+                  sortByTypes={sortByTypes}
                 />
               </>
             )}

package/src/search-results/store/search-results-selectors.ts

@@ -0,0 +1,73 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { SearchResultsRootState } from './search-results-store';
+import { getFlightKey } from '../utils/flight-utils';
+import { PackagingFlightResponse } from '@qite/tide-client';
+
+const selectSearchResultsState = (state: SearchResultsRootState) => state.searchResults;
+
+export const selectPackagingFlightResults = createSelector([selectSearchResultsState], (state) => state.packagingFlightResults);
+export const selectFilteredPackagingFlightResults = createSelector([selectSearchResultsState], (state) => state.filteredPackagingFlightResults);
+
+export const selectSelectedOutwardKey = createSelector([selectSearchResultsState], (state) => state.selectedOutwardKey);
+
+export const selectSelectedReturnKey = createSelector([selectSearchResultsState], (state) => state.selectedReturnKey);
+
+export const selectUniqueOutwardFlights = createSelector([selectFilteredPackagingFlightResults], (packagingFlightResults): PackagingFlightResponse[] => {
+  const map = new Map<string, PackagingFlightResponse>();
+
+  packagingFlightResults.forEach((flight) => {
+    const key = getFlightKey(flight.outward.segments);
+
+    if (!map.has(key)) {
+      map.set(key, flight);
+    }
+  });
+
+  return Array.from(map.values());
+});
+
+export const selectUniqueReturnFlights = createSelector(
+  [selectFilteredPackagingFlightResults, selectSelectedOutwardKey],
+  (packagingFlightResults, selectedOutwardKey): PackagingFlightResponse[] => {
+    if (!selectedOutwardKey) return [];
+
+    const matchingCombinations = packagingFlightResults.filter((flight) => getFlightKey(flight.outward.segments) === selectedOutwardKey);
+
+    const map = new Map<string, PackagingFlightResponse>();
+
+    matchingCombinations.forEach((flight) => {
+      const key = getFlightKey(flight.return.segments);
+
+      if (!map.has(key)) {
+        map.set(key, flight);
+      }
+    });
+
+    return Array.from(map.values());
+  }
+);
+
+export const selectSelectedOutward = createSelector([selectPackagingFlightResults, selectSelectedOutwardKey], (packagingFlightResults, selectedOutwardKey) => {
+  if (!selectedOutwardKey) return null;
+
+  return packagingFlightResults.find((flight) => getFlightKey(flight.outward.segments) === selectedOutwardKey) ?? null;
+});
+
+export const selectSelectedReturn = createSelector([selectPackagingFlightResults, selectSelectedReturnKey], (packagingFlightResults, selectedReturnKey) => {
+  if (!selectedReturnKey) return null;
+
+  return packagingFlightResults.find((flight) => getFlightKey(flight.return.segments) === selectedReturnKey) ?? null;
+});
+
+export const selectSelectedCombinationFlight = createSelector(
+  [selectPackagingFlightResults, selectSelectedOutwardKey, selectSelectedReturnKey],
+  (packagingFlightResults, selectedOutwardKey, selectedReturnKey) => {
+    if (!selectedOutwardKey || !selectedReturnKey) return null;
+
+    return (
+      packagingFlightResults.find(
+        (flight) => getFlightKey(flight.outward.segments) === selectedOutwardKey && getFlightKey(flight.return.segments) === selectedReturnKey
+      ) ?? null
+    );
+  }
+);