@qite/tide-booking-component 1.4.103 → 1.4.105

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,11 +78,14 @@ import GroupTourResults from '../group-tour/group-tour-results';
 import {
   applyFilters,
   applyFiltersToPackageAccoResults,
+  applyFiltersToPackageFlightResults,
   enrichFiltersWithPackageAccoResults,
+  enrichFiltersWithPackageFlightResults,
   enrichFiltersWithResults
 } from '../../utils/search-results-utils';
 import {
   ACCOMMODATION_SERVICE_TYPE,
+  EXCURSION_SERVICE_TYPE,
   FLIGHT_SERVICE_TYPE,
   getDepartureAirportFromEntry,
   getDestinationAirportFromEntry,
@@ -91,12 +101,23 @@ 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';
+import DayByDayExcursions from '../excursions/day-by-day-excursions';
 
 type BuildPackagingEntryPartialArgs = {
   sourceEntry: PackagingEntry | null | undefined;
   selectedHotelCode: string | null | undefined;
   accommodationResults: PackagingAccommodationResponse[];
   selectedFlight: PackagingFlightResponse | null;
+  confirmedExcursionsByDay: Record<string, PackagingAccommodationResponse[]>;
   seed: SearchSeed;
   transactionId: string;
   language: string;
@@ -115,26 +136,29 @@ 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
+    packagingFlightResults,
+    confirmedExcursionsByDay
   } = useSelector((state: SearchResultsRootState) => state.searchResults);
 
   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);
@@ -147,8 +171,6 @@ const SearchResultsContainer: React.FC = () => {
 
   const skipInitialPackagingAccoDetailsRef = useRef(false);
 
-  const [showAllOutwardFlights, setShowAllOutwardFlights] = useState(false);
-
   const panelRef = useRef<HTMLDivElement | null>(null);
 
   const sortByTypes: SortByType[] = [
@@ -439,7 +461,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 ?? '');
@@ -578,7 +600,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);
       }
 
@@ -637,7 +659,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);
@@ -680,11 +702,24 @@ 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 firstResult = first(packageFlightSearchResults);
-      if (firstResult) {
-        setSelectedOutwardKey(getFlightKey(firstResult.outward.segments));
-        setSelectedReturnKey(getFlightKey(firstResult.return.segments));
+
+      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));
@@ -839,6 +874,7 @@ const SearchResultsContainer: React.FC = () => {
         context?.searchConfiguration.qsmType === PortalQsmType.GroupTour
       ) {
         handleFlyInToggle(true);
+        dispatch(setFlyInType('acco-details'));
       }
 
       try {
@@ -923,11 +959,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 {
@@ -936,6 +971,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]);
@@ -985,7 +1027,6 @@ const SearchResultsContainer: React.FC = () => {
         } as PackagingRequestBase<PackagingEntry>;
 
         const itinerary = await getItinerary(config, request);
-        console.log('Fetched itinerary', itinerary);
         dispatch(setItinerary(itinerary));
         setItineraryIsLoading(false);
       } catch (err) {
@@ -999,35 +1040,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);
@@ -1038,34 +1069,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);
-    const firstReturnKey = returns.length > 0 ? getFlightKey(first(returns)?.return.segments) : null;
-
-    if (firstReturnKey) {
-      setSelectedReturnKey(firstReturnKey);
+    if (!returns.some((x) => getFlightKey(x.return.segments) === selectedReturnKey)) {
+      dispatch(setSelectedReturnKey(firstReturnKey));
     }
-  }, [selectedOutwardKey, packagingFlightResults]);
-
-  const selectedOutward = React.useMemo(() => {
-    if (!selectedOutwardKey) return null;
-
-    return packagingFlightResults.find((flight) => getFlightKey(flight.outward.segments) === selectedOutwardKey) || null;
-  }, [packagingFlightResults, selectedOutwardKey]);
+  }, [selectedOutwardKey, packagingFlightResults, selectedReturnKey, dispatch]);
 
-  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;
-
-    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(() => {
@@ -1076,6 +1091,7 @@ const SearchResultsContainer: React.FC = () => {
   //   dispatch(setFlyInIsOpen(true));
   // }, [selectedCombinationFlight, dispatch]);
 
+  // Build packagingEntry
   useEffect(() => {
     if (!context) return;
 
@@ -1087,11 +1103,12 @@ const SearchResultsContainer: React.FC = () => {
       selectedHotelCode: selectedPackagingAccoResultCode,
       accommodationResults: packagingAccoResults,
       selectedFlight: selectedCombinationFlight ?? null,
+      confirmedExcursionsByDay,
       seed,
       transactionId: transactionId ?? context.packagingEntry?.transactionId ?? '',
       language: context.languageCode ?? 'en-GB'
     });
-
+    console.log('Built nextEntry', nextEntry);
     if (!nextEntry) return;
 
     dispatch(setEditablePackagingEntry(nextEntry));
@@ -1106,6 +1123,7 @@ const SearchResultsContainer: React.FC = () => {
     packagingAccoResults,
     packagingAccoSearchDetails,
     selectedCombinationFlight,
+    confirmedExcursionsByDay,
     transactionId,
     dispatch
   ]);
@@ -1114,23 +1132,70 @@ const SearchResultsContainer: React.FC = () => {
 
   const removeFlightLines = (lines: PackagingEntryLine[]) => lines.filter((line) => line.serviceType !== FLIGHT_SERVICE_TYPE);
 
+  const removeExcursionLines = (lines: PackagingEntryLine[]) => lines.filter((line) => line.serviceType !== EXCURSION_SERVICE_TYPE);
+
   const buildAccommodationLinesFromSelection = (selectedHotel: PackagingAccommodationResponse, seed: SearchSeed): PackagingEntryLine[] => {
-    if (!selectedHotel) return [];
+    return buildPackagingAccommodationLines(selectedHotel, seed, ACCOMMODATION_SERVICE_TYPE);
+  };
+
+  const buildExcursionLinesFromConfirmedDays = (confirmedExcursionsByDay: Record<string, PackagingAccommodationResponse[]>): PackagingEntryLine[] => {
+    return Object.values(confirmedExcursionsByDay)
+      .flat()
+      .flatMap((excursion) => {
+        const selectedOptions = excursion.rooms.flatMap((room) => room.options.filter((option) => option.isSelected));
+
+        const parentGuid = crypto.randomUUID();
+
+        return selectedOptions.map(
+          (option, index) =>
+            ({
+              guid: option.guid ?? crypto.randomUUID(),
+              moment: '',
+              parentGuid: index === 0 ? null : parentGuid,
+              order: index,
+              isChanged: true,
+              from: excursion.fromDate,
+              to: excursion.toDate,
+              serviceType: EXCURSION_SERVICE_TYPE,
+              productName: excursion.name,
+              productCode: excursion.code,
+              accommodationName: option.accommodationName,
+              accommodationCode: option.accommodationCode,
+              regimeName: option.regimeName,
+              regimeCode: option.regimeCode,
+              country: excursion.countryId ? { id: excursion.countryId, name: excursion.countryName, localizations: [] } : null,
+              region: excursion.regionId ? { id: excursion.regionId, name: excursion.regionName, localizations: [] } : null,
+              oord: excursion.oordId ? { id: excursion.oordId, name: excursion.oordName, localizations: [] } : null,
+              location: excursion.locationId ? { id: excursion.locationId, name: excursion.locationName, localizations: [] } : null,
+              longitude: excursion.longitude ?? null,
+              latitude: excursion.latitude ?? null,
+              pax: Array.isArray(option.paxIds)
+                ? option.paxIds.map((paxId, paxIndex) => ({
+                    paxId: paxId,
+                    room: 0,
+                    order: paxIndex
+                  }))
+                : [],
+              flightInformation: null
+            } satisfies PackagingEntryLine)
+        );
+      });
+  };
+
+  const buildPackagingAccommodationLines = (selectedItem: PackagingAccommodationResponse, seed: SearchSeed, serviceType: number): PackagingEntryLine[] => {
+    if (!selectedItem) return [];
     const parentGuid = crypto.randomUUID();
 
-    return selectedHotel.rooms
+    return selectedItem.rooms
       .filter((room) => room.options.some((o) => o.isSelected))
       .map((room, index) => {
         const option = room.options.find((o) => o.isSelected)!;
 
-        const pax =
-          seed.rooms?.flatMap((room, roomIndex) =>
-            room.pax.map((p, paxIndex) => ({
-              paxId: p.id,
-              room: roomIndex,
-              order: paxIndex
-            }))
-          ) ?? [];
+        const pax = option.paxIds.map((p, paxIndex) => ({
+          paxId: p,
+          room: index,
+          order: paxIndex
+        }));
 
         return {
           guid: option.guid ?? crypto.randomUUID(),
@@ -1138,21 +1203,21 @@ const SearchResultsContainer: React.FC = () => {
           parentGuid: index === 0 ? null : parentGuid,
           order: index,
           isChanged: true,
-          from: selectedHotel.fromDate,
-          to: selectedHotel.toDate,
-          serviceType: ACCOMMODATION_SERVICE_TYPE,
-          productName: selectedHotel.name,
-          productCode: selectedHotel.code,
+          from: selectedItem.fromDate,
+          to: selectedItem.toDate,
+          serviceType: serviceType,
+          productName: selectedItem.name,
+          productCode: selectedItem.code,
           accommodationName: option.accommodationName,
           accommodationCode: option.accommodationCode,
           regimeName: option.regimeName,
           regimeCode: option.regimeCode,
-          country: selectedHotel.countryId ? { id: selectedHotel.countryId, name: selectedHotel.countryName, localizations: [] } : null,
-          region: selectedHotel.regionId ? { id: selectedHotel.regionId, name: selectedHotel.regionName, localizations: [] } : null,
-          oord: selectedHotel.oordId ? { id: selectedHotel.oordId, name: selectedHotel.oordName, localizations: [] } : null,
-          location: selectedHotel.locationId ? { id: selectedHotel.locationId, name: selectedHotel.locationName, localizations: [] } : null,
-          longitude: selectedHotel.longitude ?? null,
-          latitude: selectedHotel.latitude ?? null,
+          country: selectedItem.countryId ? { id: selectedItem.countryId, name: selectedItem.countryName, localizations: [] } : null,
+          region: selectedItem.regionId ? { id: selectedItem.regionId, name: selectedItem.regionName, localizations: [] } : null,
+          oord: selectedItem.oordId ? { id: selectedItem.oordId, name: selectedItem.oordName, localizations: [] } : null,
+          location: selectedItem.locationId ? { id: selectedItem.locationId, name: selectedItem.locationName, localizations: [] } : null,
+          longitude: selectedItem.longitude ?? null,
+          latitude: selectedItem.latitude ?? null,
           pax,
           flightInformation: null
         } satisfies PackagingEntryLine;
@@ -1286,6 +1351,7 @@ const SearchResultsContainer: React.FC = () => {
     selectedHotelCode,
     accommodationResults,
     selectedFlight,
+    confirmedExcursionsByDay,
     seed,
     transactionId,
     language
@@ -1317,6 +1383,15 @@ const SearchResultsContainer: React.FC = () => {
       }
     }
 
+    // excursions
+    const excursionLines = buildExcursionLinesFromConfirmedDays(confirmedExcursionsByDay);
+
+    nextLines = removeExcursionLines(nextLines);
+
+    if (excursionLines.length) {
+      nextLines = [...nextLines, ...excursionLines];
+    }
+
     nextLines = nextLines.map((line, index) => ({
       ...line,
       order: index
@@ -1341,7 +1416,7 @@ const SearchResultsContainer: React.FC = () => {
       return structuredClone(sourceEntry);
     }
 
-    let paxId = 1;
+    let paxId = 0;
 
     const pax =
       seed.rooms?.flatMap((room, roomIndex) =>
@@ -1367,9 +1442,10 @@ const SearchResultsContainer: React.FC = () => {
     } as PackagingEntry;
   };
 
-  const visibleOutwardFlights = React.useMemo(() => {
-    return showAllOutwardFlights ? uniqueOutwardFlights : uniqueOutwardFlights.slice(0, 3);
-  }, [showAllOutwardFlights, uniqueOutwardFlights]);
+  const handleShowMoreFlights = (flyInType: FlyInType) => {
+    dispatch(setFlyInType(flyInType));
+    dispatch(setFlyInIsOpen(true));
+  };
 
   return (
     <div id="tide-booking" className="search__bg">
@@ -1380,7 +1456,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}
@@ -1402,6 +1477,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 && (
@@ -1444,33 +1521,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 &&
@@ -1482,8 +1561,6 @@ const SearchResultsContainer: React.FC = () => {
                     {context.searchConfiguration.qsmType === PortalQsmType.GroupTour && <GroupTourResults isLoading={isLoading} />}
 
                     {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && !context.packagingEntry && context.showFlightResults && (
-                      // bookingPackageDetails?.outwardFlights &&
-                      // <FlightResults flights={bookingPackageDetails?.outwardFlights} isDeparture={true} />
                       <>
                         <div className="search__results__label search__results__label--secondary">
                           <div className="search__results__label__date">
@@ -1506,7 +1583,7 @@ const SearchResultsContainer: React.FC = () => {
                                   key={`flight-${selectedOutwardKey}`}
                                   item={selectedOutward.outward}
                                   guid={selectedOutward.outwardGuid}
-                                  onSelect={() => setSelectedOutwardKey(null)}
+                                  onSelect={() => dispatch(setSelectedOutwardKey(null))}
                                   selectedGuid={selectedOutward.outwardGuid}
                                   isOutward={true}
                                   showSelectedState={true}
@@ -1517,7 +1594,7 @@ const SearchResultsContainer: React.FC = () => {
                                 <IndependentFlightOption
                                   key={`flight-${result.outwardGuid}`}
                                   item={result.outward}
-                                  onSelect={() => setSelectedOutwardKey(getFlightKey(result.outward.segments))}
+                                  onSelect={() => dispatch(setSelectedOutwardKey(getFlightKey(result.outward.segments)))}
                                   guid={result.outwardGuid}
                                   isOutward={true}
                                   price={result.price}
@@ -1527,8 +1604,8 @@ const SearchResultsContainer: React.FC = () => {
                             </div>
                             {uniqueOutwardFlights && uniqueOutwardFlights.length > 3 && (
                               <div className="search__results__cards__actions">
-                                <button className="cta cta--secondary" onClick={() => setShowAllOutwardFlights(!showAllOutwardFlights)}>
-                                  {showAllOutwardFlights ? translations.SRP.SHOW_LESS : translations.SRP.SHOW_MORE}
+                                <button className="cta cta--secondary" onClick={() => handleShowMoreFlights('flight-outward-results')}>
+                                  {translations.SRP.SHOW_MORE}
                                 </button>
                               </div>
                             )}
@@ -1539,9 +1616,9 @@ const SearchResultsContainer: React.FC = () => {
 
                     {context.showHotelAccommodationResults && !context.packagingEntry && <HotelAccommodationResults isLoading={isLoading} />}
 
+                    {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && !context.packagingEntry && <DayByDayExcursions />}
+
                     {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && !context.packagingEntry && context.showFlightResults && (
-                      // bookingPackageDetails?.returnFlights &&
-                      // <FlightResults flights={bookingPackageDetails?.returnFlights} isDeparture={false} />
                       <>
                         <div className="search__results__label search__results__label--secondary">
                           <div className="search__results__label__date">
@@ -1570,7 +1647,7 @@ const SearchResultsContainer: React.FC = () => {
                             <IndependentFlightOption
                               key={`flight-${result.outwardGuid}`}
                               item={result.return}
-                              onSelect={() => setSelectedReturnKey(getFlightKey(result.return.segments))}
+                              onSelect={() => dispatch(setSelectedReturnKey(getFlightKey(result.return.segments)))}
                               guid={result.outwardGuid}
                               isOutward={false}
                               currentSelectedPrice={selectedReturn?.price}
@@ -1588,15 +1665,16 @@ 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}
+                  activeSearchSeed={activeSearchSeed}
                 />
               </>
             )}