@qite/tide-booking-component 1.4.103 → 1.4.104

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

@@ -1,9 +1,7 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { Filter, FilterOption } from '../../types';
 import MultiRangeFilter from '../multi-range-filter';
 import SearchResultsConfigurationContext from '../../search-results-configuration-context';
-import { resetFilters, setFilters } from '../../store/search-results-slice';
-import { useDispatch } from 'react-redux';
 import Spinner from '../spinner/spinner';
 import Icon from '../icon';
 import { getTranslations } from '../../../shared/utils/localization-util';
@@ -14,10 +12,13 @@ interface FiltersProps {
   isOpen: boolean;
   handleSetIsOpen: () => void;
   isLoading?: boolean;
+  setFilters: (filters: Filter[]) => void;
+  resetFilters: (filters: Filter[]) => void;
 }
 
-const Filters: React.FC<FiltersProps> = ({ initialFilters, filters, isOpen, handleSetIsOpen, isLoading }) => {
+const Filters: React.FC<FiltersProps> = ({ initialFilters, filters, isOpen, handleSetIsOpen, isLoading, setFilters, resetFilters }) => {
   const context = useContext(SearchResultsConfigurationContext);
+
   if (!context || !context.showFilters) {
     return null;
   }
@@ -25,8 +26,6 @@ const Filters: React.FC<FiltersProps> = ({ initialFilters, filters, isOpen, hand
   const translations = getTranslations(context?.languageCode ?? 'en-GB');
   const [visibleFilters, setVisibleFilters] = useState<Record<string, boolean>>({});
 
-  const dispatch = useDispatch();
-
   const toggleFilterVisibility = (filterId: string) => {
     setVisibleFilters((prev) => ({
       ...prev,
@@ -44,7 +43,7 @@ const Filters: React.FC<FiltersProps> = ({ initialFilters, filters, isOpen, hand
       };
     });
 
-    dispatch(setFilters(updated));
+    setFilters(updated);
   };
 
   const handleSliderChange = (filter: Filter, newMin: number, newMax: number) => {
@@ -58,12 +57,12 @@ const Filters: React.FC<FiltersProps> = ({ initialFilters, filters, isOpen, hand
       };
     });
 
-    dispatch(setFilters(updated));
+    setFilters(updated);
   };
 
   const handleFullReset = () => {
     if (!isLoading) {
-      dispatch(resetFilters(initialFilters));
+      resetFilters(initialFilters);
     }
   };
 

package/src/search-results/components/hotel/hotel-accommodation-results.tsx

@@ -1,8 +1,8 @@
-import React, { useContext } from 'react';
-import { HotelResult, SearchResultsConfiguration } from '../../types';
+import React, { useContext, useState } from 'react';
+import { FlyInType, HotelResult, SearchResultsConfiguration } from '../../types';
 import Spinner from '../spinner/spinner';
 import HotelCard from './hotel-card';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { SearchResultsRootState } from '../../store/search-results-store';
 import { BookingPackageItem, PackagingAccommodationResponse, PortalQsmType } from '@qite/tide-client';
 import { format, parseISO } from 'date-fns';
@@ -10,9 +10,11 @@ import { calculateNights, formatPrice, getTranslations } from '../../../shared/u
 import SearchResultsConfigurationContext from '../../search-results-configuration-context';
 import { first } from 'lodash';
 import Icon from '../icon';
+import { setFlyInIsOpen, setFlyInType } from '../../store/search-results-slice';
 
 interface HotelAccommodationResultsProps {
   isLoading: boolean;
+  isFlyIn?: boolean;
 }
 
 const getLocation = (locationName?: string, regionName?: string, countryName?: string, fallback?: string): string => {
@@ -71,7 +73,14 @@ const mapPackagingAccoResult = (searchResult: PackagingAccommodationResponse, cm
   };
 };
 
-const renderHotelResults = (results: HotelResult[], context: SearchResultsConfiguration, activeTab: string | null, translations: any) => {
+const renderHotelResults = (
+  results: HotelResult[],
+  context: SearchResultsConfiguration,
+  activeTab: string | null,
+  translations: any,
+  selectedPackagingAccoResult?: HotelResult,
+  isFlyIn?: boolean
+) => {
   const renderedResults = results.map((result, index) => {
     const key = `${result.id ?? result.code}-${index}`;
 
@@ -86,19 +95,28 @@ const renderHotelResults = (results: HotelResult[], context: SearchResultsConfig
     return <HotelCard key={key} result={result} translations={translations} />;
   });
 
-  return <div className={`search__results__cards ${activeTab ? `search__results__cards--${activeTab}` : ''}`}>{renderedResults}</div>;
+  return (
+    <div className={`search__results__cards ${activeTab ? `search__results__cards--${activeTab}` : ''}`}>
+      {selectedPackagingAccoResult && !isFlyIn && (
+        <HotelCard key={selectedPackagingAccoResult.code} result={selectedPackagingAccoResult} translations={translations} />
+      )}
+      {renderedResults}
+    </div>
+  );
 };
 
-const HotelAccommodationResults: React.FC<HotelAccommodationResultsProps> = ({ isLoading }) => {
+const HotelAccommodationResults: React.FC<HotelAccommodationResultsProps> = ({ isLoading, isFlyIn }) => {
   const context = useContext(SearchResultsConfigurationContext);
-
+  const dispatch = useDispatch();
   if (!context) {
     return null;
   }
 
   const translations = getTranslations(context.languageCode ?? 'en-GB');
 
-  const { filteredResults, filteredPackagingAccoResults, activeTab } = useSelector((state: SearchResultsRootState) => state.searchResults);
+  const { filteredResults, filteredPackagingAccoResults, packagingAccoResults, activeTab, flyInIsOpen, selectedPackagingAccoResultCode } = useSelector(
+    (state: SearchResultsRootState) => state.searchResults
+  );
 
   const cmsMap = React.useMemo(() => {
     const map = new Map();
@@ -147,26 +165,65 @@ const HotelAccommodationResults: React.FC<HotelAccommodationResultsProps> = ({ i
   const firstResultDay = firstResultDate ? format(parseISO(firstResultDate), 'd') : null;
   const firstResultMonth = firstResultDate ? format(parseISO(firstResultDate), 'MMM') : null;
 
+  const selectedPackagingAccoResult = React.useMemo(() => {
+    const selectedResult = packagingAccoResults.find((result) => result.code === selectedPackagingAccoResultCode);
+    if (selectedResult) {
+      return mapPackagingAccoResult(selectedResult, cmsMap.get(selectedResult.code), context.languageCode, translations);
+    }
+  }, [packagingAccoResults, selectedPackagingAccoResultCode, cmsMap, context.languageCode, translations]);
+
+  const visibleResults = React.useMemo(() => {
+    const shouldShowAll = context?.searchConfiguration.qsmType !== PortalQsmType.AccommodationAndFlight || isFlyIn;
+
+    if (shouldShowAll) {
+      return mappedResults;
+    }
+
+    if (selectedPackagingAccoResult) {
+      return mappedResults.filter((result) => result.code !== selectedPackagingAccoResult.code).slice(0, 2);
+    }
+
+    return mappedResults.slice(0, 3);
+  }, [context?.searchConfiguration.qsmType, mappedResults, isFlyIn, selectedPackagingAccoResult]);
+
+  const handleShowMoreHotels = (flyInType: FlyInType) => {
+    dispatch(setFlyInType(flyInType));
+    dispatch(setFlyInIsOpen(true));
+  };
+
   return (
     <>
-      <div className="search__results__label search__results__label--secondary">
-        <div className="search__results__label__date">
-          {firstResultDay && firstResultMonth ? (
-            <>
-              <p className="search__results__label__date-date">{firstResultDay}</p>
-              <p>{firstResultMonth}</p>
-            </>
-          ) : (
-            <Icon name="ui-bed" height={16} fill="white" />
-          )}
+      {!isFlyIn && (
+        <div className="search__results__label search__results__label--secondary">
+          <div className="search__results__label__date">
+            {firstResultDay && firstResultMonth ? (
+              <>
+                <p className="search__results__label__date-date">{firstResultDay}</p>
+                <p>{firstResultMonth}</p>
+              </>
+            ) : (
+              <Icon name="ui-bed" height={16} fill="white" />
+            )}
+          </div>
+          <div className="search__results__label__text">
+            <h3>
+              {translations.SRP.SELECT} <strong>{translations.SRP.ACCOMMODATION}</strong>
+            </h3>
+          </div>
         </div>
-        <div className="search__results__label__text">
-          <h3>
-            {translations.SRP.SELECT} <strong>{translations.SRP.ACCOMMODATION}</strong>
-          </h3>
+      )}
+      {isLoading ? (
+        <>{context.customSpinner ?? <Spinner />}</>
+      ) : (
+        renderHotelResults(visibleResults, context, activeTab, translations, selectedPackagingAccoResult, isFlyIn)
+      )}
+      {packagingAccoResults.length > 3 && !isFlyIn && (
+        <div className="search__results__cards__actions">
+          <button className="cta cta--secondary" onClick={() => handleShowMoreHotels('acco-results')}>
+            {translations.SRP.SHOW_MORE}
+          </button>
         </div>
-      </div>
-      {isLoading ? <>{context.customSpinner ?? <Spinner />}</> : renderHotelResults(mappedResults, context, activeTab, translations)}
+      )}
       {mappedResults.length === 0 && !isLoading && <div className="no-results">{translations.SRP.NO_RESULTS}</div>}
     </>
   );

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 {
@@ -91,6 +100,15 @@ 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;
@@ -115,18 +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);
@@ -134,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);
@@ -147,8 +167,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 +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 ?? '');
@@ -578,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);
       }
 
@@ -637,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);
@@ -680,11 +698,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 +870,7 @@ const SearchResultsContainer: React.FC = () => {
         context?.searchConfiguration.qsmType === PortalQsmType.GroupTour
       ) {
         handleFlyInToggle(true);
+        dispatch(setFlyInType('acco-details'));
       }
 
       try {
@@ -923,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 {
@@ -936,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]);
@@ -985,7 +1023,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 +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);
@@ -1038,34 +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);
-    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]);
-
-  const selectedReturn = React.useMemo(() => {
-    if (!selectedReturnKey) return null;
+  }, [selectedOutwardKey, packagingFlightResults, selectedReturnKey, dispatch]);
 
-    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 +1087,7 @@ const SearchResultsContainer: React.FC = () => {
   //   dispatch(setFlyInIsOpen(true));
   // }, [selectedCombinationFlight, dispatch]);
 
+  // Build packagingEntry
   useEffect(() => {
     if (!context) return;
 
@@ -1367,9 +1379,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 +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}
@@ -1402,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 && (
@@ -1444,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 &&
@@ -1506,7 +1522,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 +1533,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 +1543,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>
                             )}
@@ -1570,7 +1586,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 +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}
                 />
               </>
             )}