@qite/tide-booking-component 1.4.92 → 1.4.93

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

@@ -1,893 +1,893 @@
-import React, { useContext, useEffect, useRef, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { SearchResultsRootState } from '../../store/search-results-store';
-import SearchResultsConfigurationContext from '../../search-results-configuration-context';
-import {
-  resetFilters,
-  setSortType,
-  setResults,
-  setIsLoading,
-  setSelectedSearchResult,
-  setBookingPackageDetails,
-  setEntry,
-  setFlyInIsOpen,
-  setFilteredResults,
-  setPackagingAccoResults,
-  setFilteredPackagingAccoResults,
-  setPackagingAccoSearchDetails
-} from '../../store/search-results-slice';
-import { Filter, SortByType } from '../../types';
-import useMediaQuery from '../../../shared/utils/use-media-query-util';
-import ItemPicker from '../item-picker';
-import {
-  TideClientConfig,
-  details,
-  detailsWL,
-  getEntryLight,
-  search,
-  searchPackagingAccommodations,
-  BookingPackageDestination,
-  BookingPackageDetailsRequest,
-  BookingPackagePax,
-  BookingPackageRequest,
-  BookingPackageRequestRoom,
-  BookingPackageSearchRequest,
-  EntryLight,
-  EntryRoom,
-  PackagingAccommodationRequest,
-  PackagingDestination,
-  PackagingRoom,
-  PackagingTraveller,
-  PortalQsmType
-} from '@qite/tide-client';
-import { getDateFromParams, getNumberFromParams, getRoomsFromParams, getStringFromParams } from '../../../shared/utils/query-string-util';
-import { range } from 'lodash';
-import { Room } from '../../../booking-wizard/types';
-import Icon from '../icon';
-import Itinerary from '../itinerary';
-import TabViews from '../tab-views';
-import FlyIn from '../../../shared/components/flyin/flyin';
-import HotelAccommodationResults from '../hotel/hotel-accommodation-results';
-import RoundTripResults from '../round-trip/round-trip-results';
-import FlightResults from '../flight/flight-results';
-import { findSortByType, getSortingName, getTranslations } from '../../../shared/utils/localization-util';
-import { FlightSearchProvider } from '../flight/flight-search-context';
-import FlightResultsContainer from './flight-search-results';
-import Filters from '../filters/filters';
-import GroupTourResults from '../group-tour/group-tour-results';
-import {
-  applyFilters,
-  applyFiltersToPackageAccoResults,
-  enrichFiltersWithPackageAccoResults,
-  enrichFiltersWithResults
-} from '../../utils/search-results-utils';
-
-const SearchResultsContainer: React.FC = () => {
-  const dispatch = useDispatch();
-
-  const context = useContext(SearchResultsConfigurationContext);
-  const translations = getTranslations(context?.languageCode ?? 'en-GB');
-
-  const {
-    results,
-    filteredResults,
-    packagingAccoResults,
-    filteredPackagingAccoResults,
-    bookingPackageDetails,
-    entry,
-    isLoading,
-    filters,
-    selectedSortType,
-    selectedSearchResult,
-    selectedPackagingAccoResultCode,
-    flyInIsOpen
-  } = useSelector((state: SearchResultsRootState) => state.searchResults);
-
-  const isMobile = useMediaQuery('(max-width: 1200px)');
-
-  const [initialFiltersSet, setInitialFiltersSet] = useState(false);
-  const [initialFilters, setInitialFilters] = useState<Filter[]>([]);
-  const [filtersOpen, setFiltersOpen] = useState(false);
-
-  const [detailsIsLoading, setDetailsIsLoading] = useState(false);
-
-  const [itineraryOpen, setItineraryOpen] = useState(false);
-
-  const panelRef = useRef<HTMLDivElement | null>(null);
-
-  const sortByTypes: SortByType[] = [
-    { direction: 'asc', label: 'default' } as SortByType,
-    { direction: 'asc', label: 'price' } as SortByType,
-    { direction: 'desc', label: 'price' } as SortByType
-  ];
-
-  const handleFlyInToggle = (isOpen: boolean) => {
-    dispatch(setFlyInIsOpen(isOpen));
-  };
-
-  const handleSortChange = (newSortKey: string, direction?: string) => {
-    const newSortByType = findSortByType(sortByTypes, newSortKey, direction ?? 'asc');
-    if (newSortByType) {
-      dispatch(setSortType(newSortByType));
-    }
-  };
-
-  const buildSearchFromEntry = (entry: EntryLight): BookingPackageRequest<BookingPackageSearchRequest> => {
-    const from = new Date(Math.min(...entry.items.map((i) => i.startDate.getTime()))).toISOString();
-    const to = new Date(Math.max(...entry.items.map((i) => i.endDate.getTime()))).toISOString();
-    const rooms = entry.rooms;
-
-    const hotelItem = entry.items.find((i) => i.productType === 3);
-
-    let country = hotelItem ? hotelItem.countryId : null;
-    let region = hotelItem ? hotelItem.regionId : null;
-    let oord = hotelItem ? hotelItem.oordId : null;
-    let city = hotelItem ? hotelItem.locationId : null;
-    let hotel = hotelItem ? hotelItem.productCode : null;
-
-    if (typeof window !== 'undefined') {
-      window.scrollTo(0, 0);
-    }
-
-    let destinationId: number | null = null;
-    let destinationIsCountry = false;
-    let destinationIsRegion = false;
-    let destinationIsOord = false;
-    let destinationIsLocation = false;
-
-    if (country) {
-      destinationId = country;
-      destinationIsCountry = true;
-    } else if (region) {
-      destinationId = region;
-      destinationIsRegion = true;
-    } else if (oord) {
-      destinationId = oord;
-      destinationIsOord = true;
-    } else if (city) {
-      destinationId = city;
-      destinationIsLocation = true;
-    }
-
-    var searchRequest = {
-      officeId: 1,
-      payload: {
-        catalogueIds: context!.tideConnection.catalogueIds ?? [],
-        serviceType:
-          context!.searchConfiguration.qsmType === PortalQsmType.Accommodation || context!.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight
-            ? 3
-            : context!.searchConfiguration.qsmType === PortalQsmType.Flight
-            ? 7
-            : context!.searchConfiguration.qsmType === PortalQsmType.RoundTrip
-            ? 1
-            : 0,
-        searchType: 0,
-        destination: {
-          id: Number(destinationId),
-          isCountry: destinationIsCountry,
-          isRegion: destinationIsRegion,
-          isOord: destinationIsOord,
-          isLocation: destinationIsLocation
-        } as BookingPackageDestination,
-        rooms: getRequestRoomsFromEntry(rooms),
-        fromDate: from,
-        toDate: to,
-        earliestFromOffset: 0,
-        latestToOffset: 0,
-        includeFlights: true,
-        regimeCodes: entry.items.map((i) => i.regimeCode) || [],
-        useExactDates: true,
-        onlyCachedResults: false,
-        includeAllAllotments: true,
-        productCodes: hotel ? [hotel] : []
-      }
-    };
-
-    return searchRequest;
-  };
-
-  const buildSearchFromQueryParams = (params: URLSearchParams): BookingPackageRequest<BookingPackageSearchRequest> | null => {
-    let from = getDateFromParams(params, 'fromDate');
-    let to = getDateFromParams(params, 'toDate');
-    const rooms = getRoomsFromParams(params, 'rooms');
-    let country = getNumberFromParams(params, 'country');
-    let region = getNumberFromParams(params, 'region');
-    let oord = getNumberFromParams(params, 'oord');
-    let city = getNumberFromParams(params, 'location');
-    let hotel = getNumberFromParams(params, 'hotel');
-    let tagId = getNumberFromParams(params, 'tagId');
-
-    if (!from || !to) {
-      console.error('Missing fromDate or toDate in query params, using default values');
-      return null;
-    }
-
-    if (typeof window !== 'undefined') {
-      window.scrollTo(0, 0);
-    }
-
-    let destinationId: number | null = null;
-    let destinationIsCountry = false;
-    let destinationIsRegion = false;
-    let destinationIsOord = false;
-    let destinationIsLocation = false;
-
-    if (country) {
-      destinationId = country;
-      destinationIsCountry = true;
-    } else if (region) {
-      destinationId = region;
-      destinationIsRegion = true;
-    } else if (oord) {
-      destinationId = oord;
-      destinationIsOord = true;
-    } else if (city) {
-      destinationId = city;
-      destinationIsLocation = true;
-    }
-
-    var searchRequest = {
-      officeId: 1,
-      payload: {
-        catalogueIds: context!.tideConnection.catalogueIds ?? [],
-        serviceType:
-          context!.searchConfiguration.qsmType === PortalQsmType.Accommodation || context!.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight
-            ? 3
-            : context!.searchConfiguration.qsmType === PortalQsmType.Flight
-            ? 7
-            : context!.searchConfiguration.qsmType === PortalQsmType.RoundTrip
-            ? 1
-            : undefined,
-        searchType: context!.searchConfiguration.qsmType === PortalQsmType.GroupTour ? 1 : 0,
-        destination: {
-          id: Number(destinationId),
-          isCountry: destinationIsCountry,
-          isRegion: destinationIsRegion,
-          isOord: destinationIsOord,
-          isLocation: destinationIsLocation
-        } as BookingPackageDestination,
-        rooms: getRequestRooms(rooms),
-        fromDate: from,
-        toDate: to,
-        earliestFromOffset: 0,
-        latestToOffset: 0,
-        includeFlights: context!.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight ? true : false,
-        // regimeCodes:
-        //   filters
-        //     .find((f) => f.property === 'regime')
-        //     ?.options?.filter((o) => o.isChecked)
-        //     .flatMap((o) => o.value.toString()) || [],
-        // minPrice: filters.find((f) => f.property === 'price')?.selectedMin,
-        // maxPrice: filters.find((f) => f.property === 'price')?.selectedMax,
-        useExactDates: context?.searchConfiguration.qsmType === PortalQsmType.GroupTour ? false : true,
-        onlyCachedResults: false,
-        includeAllAllotments: true,
-        productIds: hotel ? [hotel] : [],
-        productTagIds: tagId ? [tagId] : []
-      }
-    };
-
-    console.log('Built search request from query params', searchRequest);
-
-    return searchRequest;
-  };
-
-  const getRequestRoomsFromEntry = (rooms: EntryRoom[] | null) => {
-    if (!rooms) {
-      // Fall back to 2 adults
-      var room = { index: 0, pax: [] } as BookingPackageRequestRoom;
-      range(0, 2).forEach(() => {
-        room.pax.push({
-          age: 30
-        } as BookingPackagePax);
-      });
-      return [room];
-    }
-
-    const requestRooms = rooms?.map((x, i) => {
-      var room = { index: i, pax: [] } as BookingPackageRequestRoom;
-      x.travellers.forEach((p) => {
-        room.pax.push({
-          age: p.age,
-          dateOfBirth: p.dateOfBirth
-        } as BookingPackagePax);
-      });
-
-      return room;
-    });
-
-    return requestRooms;
-  };
-
-  const getRequestRooms = (rooms: Room[] | null) => {
-    if (!rooms) {
-      // Fall back to 2 adults
-      var room = { index: 0, pax: [] } as BookingPackageRequestRoom;
-      range(0, 2).forEach(() => {
-        room.pax.push({
-          age: 30
-        } as BookingPackagePax);
-      });
-      return [room];
-    }
-
-    const requestRooms = rooms?.map((x, i) => {
-      var room = { index: i, pax: [] } as BookingPackageRequestRoom;
-      range(0, x.adults).forEach(() => {
-        room.pax.push({
-          age: 30
-        } as BookingPackagePax);
-      });
-      x.childAges.forEach((x) => {
-        room.pax.push({
-          age: x
-        } as BookingPackagePax);
-      });
-      return room;
-    });
-
-    return requestRooms;
-  };
-
-  const buildPackagingAccommodationRequestFromQueryParams = (params: URLSearchParams): PackagingAccommodationRequest | null => {
-    let from = getDateFromParams(params, 'fromDate');
-    let to = getDateFromParams(params, 'toDate');
-    const rooms = getRoomsFromParams(params, 'rooms');
-    let country = getNumberFromParams(params, 'country');
-    let region = getNumberFromParams(params, 'region');
-    let oord = getNumberFromParams(params, 'oord');
-    let city = getNumberFromParams(params, 'location');
-    let hotel = getNumberFromParams(params, 'hotel');
-    let tagId = getNumberFromParams(params, 'tagId');
-    let agentId = getNumberFromParams(params, 'agentId');
-    let destinationAirport = getStringFromParams(params, 'destinationAirport');
-
-    if (!from || !to) {
-      console.error('Missing fromDate or toDate in query params, using default values');
-      return null;
-    }
-
-    if (typeof window !== 'undefined') {
-      window.scrollTo(0, 0);
-    }
-
-    let destinationId: number | null = null;
-    let destinationIsCountry = false;
-    let destinationIsRegion = false;
-    let destinationIsOord = false;
-    let destinationIsLocation = false;
-    let destinationCode: string | null = null;
-    let destinationIsAirport = false;
-
-    if (country) {
-      destinationId = country;
-      destinationIsCountry = true;
-    } else if (region) {
-      destinationId = region;
-      destinationIsRegion = true;
-    } else if (oord) {
-      destinationId = oord;
-      destinationIsOord = true;
-    } else if (city) {
-      destinationId = city;
-      destinationIsLocation = true;
-    } else if (destinationAirport) {
-      destinationCode = destinationAirport;
-      destinationIsAirport = true;
-    }
-
-    var searchRequest = {
-      officeId: 1,
-      agentId: agentId ?? null,
-      catalogueId: context!.searchConfiguration.defaultCatalogueId ?? 0,
-      searchConfigurationId: context!.searchConfiguration.id,
-      language: context!.languageCode ?? 'en-GB',
-      servicesType: 3, // accommodation
-      fromDate: from,
-      toDate: to,
-      destination: {
-        id: Number(destinationId),
-        isCountry: destinationIsCountry,
-        isRegion: destinationIsRegion,
-        isOord: destinationIsOord,
-        isLocation: destinationIsLocation,
-        isAirport: destinationIsAirport,
-        code: destinationCode
-      } as PackagingDestination,
-      productCode: hotel ? hotel.toString() : '',
-      rooms: getPackagingRequestRooms(rooms),
-      tagIds: tagId ? [tagId] : []
-    };
-
-    console.log('Search request for packaging accommodation from query params', searchRequest);
-
-    return searchRequest;
-  };
-
-  const getPackagingRequestRooms = (rooms: Room[] | null) => {
-    if (!rooms) {
-      // Fall back to 2 adults
-      var room = { index: 0, travellers: [] } as PackagingRoom;
-      range(0, 2).forEach(() => {
-        room.travellers.push({
-          age: 30
-        } as PackagingTraveller);
-      });
-      return [room];
-    }
-
-    const requestRooms = rooms?.map((x, i) => {
-      var room = { index: i, travellers: [] } as PackagingRoom;
-      range(0, x.adults).forEach(() => {
-        room.travellers.push({
-          age: 30
-        } as PackagingTraveller);
-      });
-      x.childAges.forEach((x) => {
-        room.travellers.push({
-          age: x
-        } as PackagingTraveller);
-      });
-      return room;
-    });
-
-    return requestRooms;
-  };
-
-  useEffect(() => {
-    if (typeof document !== 'undefined') {
-      document.body.classList.toggle('has-overlay', filtersOpen);
-    }
-  }, [filtersOpen]);
-
-  // seperate Search
-  useEffect(() => {
-    const runSearch = async () => {
-      dispatch(setIsLoading(true));
-      try {
-        if (!context) {
-          return;
-        }
-
-        const config: TideClientConfig = {
-          host: context.tideConnection.host,
-          apiKey: context.tideConnection.apiKey
-        };
-
-        const params = new URLSearchParams(location.search);
-        let entryId = getStringFromParams(params, 'entryId');
-        let entryLight: EntryLight | null = null;
-        // If entryId is present, we want to fetch the details of that entry and use the details to populate the search results, instead of running a search with the other query params
-
-        let searchRequest: BookingPackageRequest<BookingPackageSearchRequest>;
-
-        if (entryId) {
-          entryLight = await getEntryLight(config, entryId);
-          // populate itinerary store
-          dispatch(setEntry({ entry: entryLight }));
-          searchRequest = buildSearchFromEntry(entryLight);
-        } else {
-          const rq = buildSearchFromQueryParams(params);
-          if (!rq) {
-            throw new Error('Invalid search parameters');
-          }
-
-          searchRequest = rq;
-        }
-
-        searchRequest.agentId = context.agentId;
-        const packageSearchResults = await search(config, searchRequest);
-
-        console.log('Search results', packageSearchResults);
-
-        const enrichedFilters = enrichFiltersWithResults(packageSearchResults, context.filters, context.tags ?? []);
-        if (!initialFiltersSet) {
-          dispatch(resetFilters(enrichedFilters));
-          setInitialFilters(enrichedFilters);
-          setInitialFiltersSet(true);
-        }
-
-        dispatch(setResults(packageSearchResults));
-        const initialFilteredResults = applyFilters(packageSearchResults, filters, null);
-        dispatch(setFilteredResults(initialFilteredResults));
-
-        if (packageSearchResults?.length > 0) {
-          if (entryId) {
-            const matching = packageSearchResults.find((r) => r.productId === entry?.id);
-
-            if (matching) {
-              dispatch(setSelectedSearchResult(matching));
-            }
-          } else {
-            if (context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight) {
-              dispatch(setSelectedSearchResult(packageSearchResults[0]));
-            }
-          }
-        }
-
-        dispatch(setIsLoading(false));
-      } catch (err) {
-        console.error('Search failed', err);
-        dispatch(setIsLoading(false));
-      }
-    };
-
-    const runHotelSearch = async () => {
-      dispatch(setIsLoading(true));
-      try {
-        if (!context) {
-          return;
-        }
-
-        const config: TideClientConfig = {
-          host: context.tideConnection.host,
-          apiKey: context.tideConnection.apiKey
-        };
-
-        const params = new URLSearchParams(location.search);
-
-        let searchRequest: PackagingAccommodationRequest;
-
-        const rq = buildPackagingAccommodationRequestFromQueryParams(params);
-        if (!rq) {
-          throw new Error('Invalid search parameters');
-        }
-
-        searchRequest = rq;
-        searchRequest.portalId = context.portalId;
-        searchRequest.agentId = context.agentId;
-
-        const packageAccoSearchResults = await searchPackagingAccommodations(config, searchRequest);
-
-        console.log('package Acco SearchResults', packageAccoSearchResults);
-
-        const enrichedFilters = enrichFiltersWithPackageAccoResults(packageAccoSearchResults, context.filters, context.tags ?? []);
-        if (!initialFiltersSet) {
-          dispatch(resetFilters(enrichedFilters));
-          setInitialFilters(enrichedFilters);
-          setInitialFiltersSet(true);
-        }
-
-        dispatch(setPackagingAccoResults(packageAccoSearchResults));
-        const initialFilteredResults = applyFiltersToPackageAccoResults(packageAccoSearchResults, filters, null);
-        dispatch(setFilteredPackagingAccoResults(initialFilteredResults));
-
-        dispatch(setIsLoading(false));
-      } catch (err) {
-        console.error('Search failed', err);
-        dispatch(setIsLoading(false));
-      }
-    };
-
-    if (!context?.showMockup) {
-      if (
-        context?.searchConfiguration.qsmType === PortalQsmType.GroupTour ||
-        (context?.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && !context.searchConfiguration.enableManualPackaging)
-      ) {
-        runSearch();
-      }
-      if (context?.searchConfiguration.qsmType === PortalQsmType.Accommodation) {
-        runHotelSearch();
-      }
-      if (context?.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && context.searchConfiguration.enableManualPackaging) {
-        // Manual packaging flow.
-        if (context.searchConfiguration.allowAccommodations) {
-          runHotelSearch();
-        }
-      }
-    }
-  }, [location.search]);
-
-  // Seperate detailsCall
-  useEffect(() => {
-    const fetchDetails = async () => {
-      setDetailsIsLoading(true);
-      console.log('Fetching details for selected search result', selectedSearchResult);
-      if (!selectedSearchResult || !context) return;
-      if (context?.searchConfiguration.qsmType === PortalQsmType.Accommodation || context?.searchConfiguration.qsmType === PortalQsmType.GroupTour) {
-        handleFlyInToggle(true);
-      }
-
-      try {
-        const config: TideClientConfig = {
-          host: context.tideConnection.host,
-          apiKey: context.tideConnection.apiKey
-        };
-
-        const selectedItem = results.find((r) => r.productId === selectedSearchResult.productId);
-        if (!selectedItem) {
-          // TODO: handle this case better, show an error message to the user
-          return;
-        }
-
-        const params = new URLSearchParams(location.search);
-        let entryId = getStringFromParams(params, 'entryId');
-
-        let requestRooms;
-        if (entry && entryId) {
-          requestRooms = getRequestRoomsFromEntry(entry.rooms);
-        } else {
-          const rooms = getRoomsFromParams(params, 'rooms');
-          requestRooms = getRequestRooms(rooms);
-        }
-
-        const detailsRequest: BookingPackageRequest<BookingPackageDetailsRequest> = {
-          officeId: 1,
-          payload: {
-            catalogueId: selectedItem.catalogueId,
-            rooms: requestRooms,
-            searchType: 0, // same as search
-            productCode: selectedItem.code,
-            fromDate: selectedItem.fromDate,
-            toDate: selectedItem.toDate,
-            includeFlights: context!.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight ? true : false,
-            includeHotels: true,
-            includePaxTypes: true,
-            checkExternalAvailability: true,
-            expectedPrice: selectedItem.price,
-            duration: null,
-            preNights: null,
-            postNights: null
-          },
-          agentId: context.agentId
-        };
-
-        if (entry && entryId) {
-          requestRooms = getRequestRoomsFromEntry(entry.rooms);
-          const detailsResponse = await details(config, detailsRequest);
-          console.log('Details:', detailsResponse);
-          dispatch(setBookingPackageDetails({ details: detailsResponse?.payload }));
-        } else {
-          // const detailsWLResponse = await detailsWL(config, detailsRequest);
-          // console.log('Details with entryLight:', detailsWLResponse);
-          // dispatch(setBookingPackageDetails({ details: detailsWLResponse?.payload?.bookingPackage }));
-          // dispatch(setEntry({ entry: detailsWLResponse?.payload?.entry }));
-
-          const detailsResponse = await details(config, detailsRequest);
-          dispatch(setBookingPackageDetails({ details: detailsResponse?.payload }));
-          setDetailsIsLoading(false);
-        }
-      } catch (err) {
-        console.error('Failed to fetch package details', err);
-        setDetailsIsLoading(false);
-      }
-    };
-
-    const fetchPackagingAccoSearchDetails = async () => {
-      if (!selectedPackagingAccoResultCode || !context) return;
-
-      if (context?.searchConfiguration.qsmType === PortalQsmType.Accommodation || context?.searchConfiguration.qsmType === PortalQsmType.GroupTour) {
-        handleFlyInToggle(true);
-      }
-
-      try {
-        const config: TideClientConfig = {
-          host: context.tideConnection.host,
-          apiKey: context.tideConnection.apiKey
-        };
-
-        console.log('selectedPackagingAccoResultCode', selectedPackagingAccoResultCode);
-        const selectedItem = packagingAccoResults.find((r) => r.code === selectedPackagingAccoResultCode);
-        console.log('Selected packaging acco item', selectedItem);
-        if (!selectedItem) {
-          // TODO: handle this case better, show an error message to the user
-          return;
-        }
-
-        const params = new URLSearchParams(location.search);
-        const rooms = getRoomsFromParams(params, 'rooms');
-        let tagId = getNumberFromParams(params, 'tagId');
-
-        let destinationAirport = getStringFromParams(params, 'destinationAirport');
-
-        let destinationId: number | null = null;
-        let destinationIsCountry = false;
-        let destinationIsRegion = false;
-        let destinationIsOord = false;
-        let destinationIsLocation = false;
-        let destinationCode: string | null = null;
-        let destinationIsAirport = false;
-
-        if (selectedItem.countryId) {
-          destinationId = selectedItem.countryId;
-          destinationIsCountry = true;
-        } else if (selectedItem.regionId) {
-          destinationId = selectedItem.regionId;
-          destinationIsRegion = true;
-        } else if (selectedItem.oordId) {
-          destinationId = selectedItem.oordId;
-          destinationIsOord = true;
-        } else if (selectedItem.locationId) {
-          destinationId = selectedItem.locationId;
-          destinationIsLocation = true;
-        } else if (destinationAirport) {
-          destinationCode = destinationAirport;
-          destinationIsAirport = true;
-        }
-
-        const detailSearchRequest: PackagingAccommodationRequest = {
-          officeId: 1,
-          portalId: context.portalId,
-          agentId: context.agentId,
-          catalogueId: context!.searchConfiguration.defaultCatalogueId ?? 0,
-          searchConfigurationId: context!.searchConfiguration.id,
-          vendorConfigurationId: selectedItem.vendorId,
-          language: context!.languageCode ?? 'en-GB',
-          serviceType: 3,
-          fromDate: selectedItem.fromDate,
-          toDate: selectedItem.toDate,
-          destination: {
-            id: Number(destinationId),
-            isCountry: destinationIsCountry,
-            isRegion: destinationIsRegion,
-            isOord: destinationIsOord,
-            isLocation: destinationIsLocation,
-            isAirport: destinationIsAirport,
-            code: destinationCode
-          } as PackagingDestination,
-          productCode: selectedItem.code ? selectedItem.code : '',
-          rooms: getPackagingRequestRooms(rooms),
-          tagIds: tagId ? [tagId] : []
-        };
-
-        const packageAccoSearchDetails = await searchPackagingAccommodations(config, detailSearchRequest);
-        console.log('Packaging Acco Search details', packageAccoSearchDetails);
-        dispatch(setPackagingAccoSearchDetails(packageAccoSearchDetails));
-      } catch (err) {
-        console.error('Failed to fetch package details', err);
-      }
-    };
-
-    if (selectedSearchResult) {
-      fetchDetails();
-    }
-    if (selectedPackagingAccoResultCode) {
-      fetchPackagingAccoSearchDetails();
-    }
-  }, [selectedSearchResult, selectedPackagingAccoResultCode]);
-
-  useEffect(() => {
-    if (context?.searchConfiguration.qsmType === PortalQsmType.Accommodation) {
-      const filteredPackageAccoResults = applyFiltersToPackageAccoResults(packagingAccoResults, filters, selectedSortType);
-      dispatch(setFilteredPackagingAccoResults(filteredPackageAccoResults));
-    } else {
-      const filteredResults = applyFilters(results, filters, selectedSortType);
-      dispatch(setFilteredResults(filteredResults));
-    }
-  }, [filters, results, packagingAccoResults, selectedSortType]);
-
-  return (
-    <div id="tide-booking" className="search__bg">
-      {context && (
-        <div className="search">
-          <div className="search__container">
-            {context.searchConfiguration.qsmType === PortalQsmType.Flight && (
-              <FlightSearchProvider tideConnection={context.tideConnection}>
-                <FlightResultsContainer isMobile={isMobile} />
-                <FlyIn
-                  title="Select your fare"
-                  srpType={context.searchConfiguration.qsmType}
-                  isOpen={flyInIsOpen}
-                  setIsOpen={handleFlyInToggle}
-                  onPanelRef={(el) => (panelRef.current = el)}
-                  detailsLoading={detailsIsLoading}
-                />
-              </FlightSearchProvider>
-            )}
-            {(context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight ||
-              context.searchConfiguration.qsmType === PortalQsmType.Accommodation ||
-              context.searchConfiguration.qsmType === PortalQsmType.GroupTour ||
-              context.searchConfiguration.qsmType === PortalQsmType.RoundTrip) && (
-              <>
-                {context.searchConfiguration.qsmType != PortalQsmType.AccommodationAndFlight && context.showFilters && (
-                  <Filters
-                    initialFilters={initialFilters}
-                    filters={filters}
-                    isOpen={filtersOpen}
-                    handleSetIsOpen={() => setFiltersOpen(!filtersOpen)}
-                    // handleApplyFilters={() => setSearchTrigger((prev) => prev + 1)}
-                    isLoading={isLoading}
-                  />
-                )}
-                {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && (
-                  <Itinerary isOpen={itineraryOpen} handleSetIsOpen={() => setItineraryOpen(!itineraryOpen)} isLoading={isLoading} />
-                )}
-                {/* ---------------- Results ---------------- */}
-                <div className="search__results">
-                  {isMobile && (
-                    <div className="search__result-row">
-                      <div className="search__results__actions">
-                        {context.searchConfiguration.qsmType != PortalQsmType.AccommodationAndFlight && context.showFilters && (
-                          <div className="cta cta--filter" onClick={() => setFiltersOpen(true)}>
-                            <Icon name="ui-filter" className="mobile-filters-button__icon" height={16} />
-                            {translations.SRP.FILTERS}
-                          </div>
-                        )}
-                        {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && (
-                          <div className="cta cta--filter" onClick={() => setItineraryOpen(true)}>
-                            <Icon name="ui-calendar" className="mobile-filters-button__icon" height={16} />
-                            {translations.SRP.SHOW_ITINERARY}
-                          </div>
-                        )}
-                      </div>
-                      {sortByTypes && sortByTypes.length > 0 && (
-                        <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 className="search__result-row">
-                    <span className="search__result-row-text">
-                      {!isLoading && (
-                        <>
-                          {((context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight &&
-                            context.searchConfiguration.enableManualPackaging) ||
-                            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>
-                    {!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 className="search__results__wrapper">
-                    {context.showTabViews && <TabViews />}
-
-                    {context.showRoundTripResults && context.showMockup && <RoundTripResults />}
-
-                    {context.searchConfiguration.qsmType === PortalQsmType.GroupTour && <GroupTourResults isLoading={isLoading} />}
-
-                    {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight &&
-                      context.showFlightResults &&
-                      bookingPackageDetails?.outwardFlights && <FlightResults flights={bookingPackageDetails?.outwardFlights} isDeparture={true} />}
-
-                    {context.showHotelAccommodationResults && <HotelAccommodationResults isLoading={isLoading} />}
-
-                    {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight &&
-                      context.showFlightResults &&
-                      bookingPackageDetails?.returnFlights && <FlightResults flights={bookingPackageDetails?.returnFlights} isDeparture={false} />}
-                  </div>
-                </div>
-                {/* <button onClick={() => handleFlyInToggle(!flyInIsOpen)}>Toggle FlyIn</button> */}
-                <FlyIn
-                  title={`${translations.SRP.SELECT} ${translations.SRP.ACCOMMODATION}`}
-                  srpType={context.searchConfiguration.qsmType}
-                  isOpen={flyInIsOpen}
-                  setIsOpen={handleFlyInToggle}
-                  onPanelRef={(el) => (panelRef.current = el)}
-                  detailsLoading={detailsIsLoading}
-                />
-              </>
-            )}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default SearchResultsContainer;
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { SearchResultsRootState } from '../../store/search-results-store';
+import SearchResultsConfigurationContext from '../../search-results-configuration-context';
+import {
+  resetFilters,
+  setSortType,
+  setResults,
+  setIsLoading,
+  setSelectedSearchResult,
+  setBookingPackageDetails,
+  setEntry,
+  setFlyInIsOpen,
+  setFilteredResults,
+  setPackagingAccoResults,
+  setFilteredPackagingAccoResults,
+  setPackagingAccoSearchDetails
+} from '../../store/search-results-slice';
+import { Filter, SortByType } from '../../types';
+import useMediaQuery from '../../../shared/utils/use-media-query-util';
+import ItemPicker from '../item-picker';
+import {
+  TideClientConfig,
+  details,
+  detailsWL,
+  getEntryLight,
+  search,
+  searchPackagingAccommodations,
+  BookingPackageDestination,
+  BookingPackageDetailsRequest,
+  BookingPackagePax,
+  BookingPackageRequest,
+  BookingPackageRequestRoom,
+  BookingPackageSearchRequest,
+  EntryLight,
+  EntryRoom,
+  PackagingAccommodationRequest,
+  PackagingDestination,
+  PackagingRoom,
+  PackagingTraveller,
+  PortalQsmType
+} from '@qite/tide-client';
+import { getDateFromParams, getNumberFromParams, getRoomsFromParams, getStringFromParams } from '../../../shared/utils/query-string-util';
+import { range } from 'lodash';
+import { Room } from '../../../booking-wizard/types';
+import Icon from '../icon';
+import Itinerary from '../itinerary';
+import TabViews from '../tab-views';
+import FlyIn from '../../../shared/components/flyin/flyin';
+import HotelAccommodationResults from '../hotel/hotel-accommodation-results';
+import RoundTripResults from '../round-trip/round-trip-results';
+import FlightResults from '../flight/flight-results';
+import { findSortByType, getSortingName, getTranslations } from '../../../shared/utils/localization-util';
+import { FlightSearchProvider } from '../flight/flight-search-context';
+import FlightResultsContainer from './flight-search-results';
+import Filters from '../filters/filters';
+import GroupTourResults from '../group-tour/group-tour-results';
+import {
+  applyFilters,
+  applyFiltersToPackageAccoResults,
+  enrichFiltersWithPackageAccoResults,
+  enrichFiltersWithResults
+} from '../../utils/search-results-utils';
+
+const SearchResultsContainer: React.FC = () => {
+  const dispatch = useDispatch();
+
+  const context = useContext(SearchResultsConfigurationContext);
+  const translations = getTranslations(context?.languageCode ?? 'en-GB');
+
+  const {
+    results,
+    filteredResults,
+    packagingAccoResults,
+    filteredPackagingAccoResults,
+    bookingPackageDetails,
+    entry,
+    isLoading,
+    filters,
+    selectedSortType,
+    selectedSearchResult,
+    selectedPackagingAccoResultCode,
+    flyInIsOpen
+  } = useSelector((state: SearchResultsRootState) => state.searchResults);
+
+  const isMobile = useMediaQuery('(max-width: 1200px)');
+
+  const [initialFiltersSet, setInitialFiltersSet] = useState(false);
+  const [initialFilters, setInitialFilters] = useState<Filter[]>([]);
+  const [filtersOpen, setFiltersOpen] = useState(false);
+
+  const [detailsIsLoading, setDetailsIsLoading] = useState(false);
+
+  const [itineraryOpen, setItineraryOpen] = useState(false);
+
+  const panelRef = useRef<HTMLDivElement | null>(null);
+
+  const sortByTypes: SortByType[] = [
+    { direction: 'asc', label: 'default' } as SortByType,
+    { direction: 'asc', label: 'price' } as SortByType,
+    { direction: 'desc', label: 'price' } as SortByType
+  ];
+
+  const handleFlyInToggle = (isOpen: boolean) => {
+    dispatch(setFlyInIsOpen(isOpen));
+  };
+
+  const handleSortChange = (newSortKey: string, direction?: string) => {
+    const newSortByType = findSortByType(sortByTypes, newSortKey, direction ?? 'asc');
+    if (newSortByType) {
+      dispatch(setSortType(newSortByType));
+    }
+  };
+
+  const buildSearchFromEntry = (entry: EntryLight): BookingPackageRequest<BookingPackageSearchRequest> => {
+    const from = new Date(Math.min(...entry.items.map((i) => i.startDate.getTime()))).toISOString();
+    const to = new Date(Math.max(...entry.items.map((i) => i.endDate.getTime()))).toISOString();
+    const rooms = entry.rooms;
+
+    const hotelItem = entry.items.find((i) => i.productType === 3);
+
+    let country = hotelItem ? hotelItem.countryId : null;
+    let region = hotelItem ? hotelItem.regionId : null;
+    let oord = hotelItem ? hotelItem.oordId : null;
+    let city = hotelItem ? hotelItem.locationId : null;
+    let hotel = hotelItem ? hotelItem.productCode : null;
+
+    if (typeof window !== 'undefined') {
+      window.scrollTo(0, 0);
+    }
+
+    let destinationId: number | null = null;
+    let destinationIsCountry = false;
+    let destinationIsRegion = false;
+    let destinationIsOord = false;
+    let destinationIsLocation = false;
+
+    if (country) {
+      destinationId = country;
+      destinationIsCountry = true;
+    } else if (region) {
+      destinationId = region;
+      destinationIsRegion = true;
+    } else if (oord) {
+      destinationId = oord;
+      destinationIsOord = true;
+    } else if (city) {
+      destinationId = city;
+      destinationIsLocation = true;
+    }
+
+    var searchRequest = {
+      officeId: 1,
+      payload: {
+        catalogueIds: context!.tideConnection.catalogueIds ?? [],
+        serviceType:
+          context!.searchConfiguration.qsmType === PortalQsmType.Accommodation || context!.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight
+            ? 3
+            : context!.searchConfiguration.qsmType === PortalQsmType.Flight
+            ? 7
+            : context!.searchConfiguration.qsmType === PortalQsmType.RoundTrip
+            ? 1
+            : 0,
+        searchType: 0,
+        destination: {
+          id: Number(destinationId),
+          isCountry: destinationIsCountry,
+          isRegion: destinationIsRegion,
+          isOord: destinationIsOord,
+          isLocation: destinationIsLocation
+        } as BookingPackageDestination,
+        rooms: getRequestRoomsFromEntry(rooms),
+        fromDate: from,
+        toDate: to,
+        earliestFromOffset: 0,
+        latestToOffset: 0,
+        includeFlights: true,
+        regimeCodes: entry.items.map((i) => i.regimeCode) || [],
+        useExactDates: true,
+        onlyCachedResults: false,
+        includeAllAllotments: true,
+        productCodes: hotel ? [hotel] : []
+      }
+    };
+
+    return searchRequest;
+  };
+
+  const buildSearchFromQueryParams = (params: URLSearchParams): BookingPackageRequest<BookingPackageSearchRequest> | null => {
+    let from = getDateFromParams(params, 'fromDate');
+    let to = getDateFromParams(params, 'toDate');
+    const rooms = getRoomsFromParams(params, 'rooms');
+    let country = getNumberFromParams(params, 'country');
+    let region = getNumberFromParams(params, 'region');
+    let oord = getNumberFromParams(params, 'oord');
+    let city = getNumberFromParams(params, 'location');
+    let hotel = getNumberFromParams(params, 'hotel');
+    let tagId = getNumberFromParams(params, 'tagId');
+
+    if (!from || !to) {
+      console.error('Missing fromDate or toDate in query params, using default values');
+      return null;
+    }
+
+    if (typeof window !== 'undefined') {
+      window.scrollTo(0, 0);
+    }
+
+    let destinationId: number | null = null;
+    let destinationIsCountry = false;
+    let destinationIsRegion = false;
+    let destinationIsOord = false;
+    let destinationIsLocation = false;
+
+    if (country) {
+      destinationId = country;
+      destinationIsCountry = true;
+    } else if (region) {
+      destinationId = region;
+      destinationIsRegion = true;
+    } else if (oord) {
+      destinationId = oord;
+      destinationIsOord = true;
+    } else if (city) {
+      destinationId = city;
+      destinationIsLocation = true;
+    }
+
+    var searchRequest = {
+      officeId: 1,
+      payload: {
+        catalogueIds: context!.tideConnection.catalogueIds ?? [],
+        serviceType:
+          context!.searchConfiguration.qsmType === PortalQsmType.Accommodation || context!.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight
+            ? 3
+            : context!.searchConfiguration.qsmType === PortalQsmType.Flight
+            ? 7
+            : context!.searchConfiguration.qsmType === PortalQsmType.RoundTrip
+            ? 1
+            : undefined,
+        searchType: context!.searchConfiguration.qsmType === PortalQsmType.GroupTour ? 1 : 0,
+        destination: {
+          id: Number(destinationId),
+          isCountry: destinationIsCountry,
+          isRegion: destinationIsRegion,
+          isOord: destinationIsOord,
+          isLocation: destinationIsLocation
+        } as BookingPackageDestination,
+        rooms: getRequestRooms(rooms),
+        fromDate: from,
+        toDate: to,
+        earliestFromOffset: 0,
+        latestToOffset: 0,
+        includeFlights: context!.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight ? true : false,
+        // regimeCodes:
+        //   filters
+        //     .find((f) => f.property === 'regime')
+        //     ?.options?.filter((o) => o.isChecked)
+        //     .flatMap((o) => o.value.toString()) || [],
+        // minPrice: filters.find((f) => f.property === 'price')?.selectedMin,
+        // maxPrice: filters.find((f) => f.property === 'price')?.selectedMax,
+        useExactDates: context?.searchConfiguration.qsmType === PortalQsmType.GroupTour ? false : true,
+        onlyCachedResults: false,
+        includeAllAllotments: true,
+        productIds: hotel ? [hotel] : [],
+        productTagIds: tagId ? [tagId] : []
+      }
+    };
+
+    console.log('Built search request from query params', searchRequest);
+
+    return searchRequest;
+  };
+
+  const getRequestRoomsFromEntry = (rooms: EntryRoom[] | null) => {
+    if (!rooms) {
+      // Fall back to 2 adults
+      var room = { index: 0, pax: [] } as BookingPackageRequestRoom;
+      range(0, 2).forEach(() => {
+        room.pax.push({
+          age: 30
+        } as BookingPackagePax);
+      });
+      return [room];
+    }
+
+    const requestRooms = rooms?.map((x, i) => {
+      var room = { index: i, pax: [] } as BookingPackageRequestRoom;
+      x.travellers.forEach((p) => {
+        room.pax.push({
+          age: p.age,
+          dateOfBirth: p.dateOfBirth
+        } as BookingPackagePax);
+      });
+
+      return room;
+    });
+
+    return requestRooms;
+  };
+
+  const getRequestRooms = (rooms: Room[] | null) => {
+    if (!rooms) {
+      // Fall back to 2 adults
+      var room = { index: 0, pax: [] } as BookingPackageRequestRoom;
+      range(0, 2).forEach(() => {
+        room.pax.push({
+          age: 30
+        } as BookingPackagePax);
+      });
+      return [room];
+    }
+
+    const requestRooms = rooms?.map((x, i) => {
+      var room = { index: i, pax: [] } as BookingPackageRequestRoom;
+      range(0, x.adults).forEach(() => {
+        room.pax.push({
+          age: 30
+        } as BookingPackagePax);
+      });
+      x.childAges.forEach((x) => {
+        room.pax.push({
+          age: x
+        } as BookingPackagePax);
+      });
+      return room;
+    });
+
+    return requestRooms;
+  };
+
+  const buildPackagingAccommodationRequestFromQueryParams = (params: URLSearchParams): PackagingAccommodationRequest | null => {
+    let from = getDateFromParams(params, 'fromDate');
+    let to = getDateFromParams(params, 'toDate');
+    const rooms = getRoomsFromParams(params, 'rooms');
+    let country = getNumberFromParams(params, 'country');
+    let region = getNumberFromParams(params, 'region');
+    let oord = getNumberFromParams(params, 'oord');
+    let city = getNumberFromParams(params, 'location');
+    let hotel = getNumberFromParams(params, 'hotel');
+    let tagId = getNumberFromParams(params, 'tagId');
+    let agentId = getNumberFromParams(params, 'agentId');
+    let destinationAirport = getStringFromParams(params, 'destinationAirport');
+
+    if (!from || !to) {
+      console.error('Missing fromDate or toDate in query params, using default values');
+      return null;
+    }
+
+    if (typeof window !== 'undefined') {
+      window.scrollTo(0, 0);
+    }
+
+    let destinationId: number | null = null;
+    let destinationIsCountry = false;
+    let destinationIsRegion = false;
+    let destinationIsOord = false;
+    let destinationIsLocation = false;
+    let destinationCode: string | null = null;
+    let destinationIsAirport = false;
+
+    if (country) {
+      destinationId = country;
+      destinationIsCountry = true;
+    } else if (region) {
+      destinationId = region;
+      destinationIsRegion = true;
+    } else if (oord) {
+      destinationId = oord;
+      destinationIsOord = true;
+    } else if (city) {
+      destinationId = city;
+      destinationIsLocation = true;
+    } else if (destinationAirport) {
+      destinationCode = destinationAirport;
+      destinationIsAirport = true;
+    }
+
+    var searchRequest = {
+      officeId: 1,
+      agentId: agentId ?? null,
+      catalogueId: context!.searchConfiguration.defaultCatalogueId ?? 0,
+      searchConfigurationId: context!.searchConfiguration.id,
+      language: context!.languageCode ?? 'en-GB',
+      servicesType: 3, // accommodation
+      fromDate: from,
+      toDate: to,
+      destination: {
+        id: Number(destinationId),
+        isCountry: destinationIsCountry,
+        isRegion: destinationIsRegion,
+        isOord: destinationIsOord,
+        isLocation: destinationIsLocation,
+        isAirport: destinationIsAirport,
+        code: destinationCode
+      } as PackagingDestination,
+      productCode: hotel ? hotel.toString() : '',
+      rooms: getPackagingRequestRooms(rooms),
+      tagIds: tagId ? [tagId] : []
+    };
+
+    console.log('Search request for packaging accommodation from query params', searchRequest);
+
+    return searchRequest;
+  };
+
+  const getPackagingRequestRooms = (rooms: Room[] | null) => {
+    if (!rooms) {
+      // Fall back to 2 adults
+      var room = { index: 0, travellers: [] } as PackagingRoom;
+      range(0, 2).forEach(() => {
+        room.travellers.push({
+          age: 30
+        } as PackagingTraveller);
+      });
+      return [room];
+    }
+
+    const requestRooms = rooms?.map((x, i) => {
+      var room = { index: i, travellers: [] } as PackagingRoom;
+      range(0, x.adults).forEach(() => {
+        room.travellers.push({
+          age: 30
+        } as PackagingTraveller);
+      });
+      x.childAges.forEach((x) => {
+        room.travellers.push({
+          age: x
+        } as PackagingTraveller);
+      });
+      return room;
+    });
+
+    return requestRooms;
+  };
+
+  useEffect(() => {
+    if (typeof document !== 'undefined') {
+      document.body.classList.toggle('has-overlay', filtersOpen);
+    }
+  }, [filtersOpen]);
+
+  // seperate Search
+  useEffect(() => {
+    const runSearch = async () => {
+      dispatch(setIsLoading(true));
+      try {
+        if (!context) {
+          return;
+        }
+
+        const config: TideClientConfig = {
+          host: context.tideConnection.host,
+          apiKey: context.tideConnection.apiKey
+        };
+
+        const params = new URLSearchParams(location.search);
+        let entryId = getStringFromParams(params, 'entryId');
+        let entryLight: EntryLight | null = null;
+        // If entryId is present, we want to fetch the details of that entry and use the details to populate the search results, instead of running a search with the other query params
+
+        let searchRequest: BookingPackageRequest<BookingPackageSearchRequest>;
+
+        if (entryId) {
+          entryLight = await getEntryLight(config, entryId);
+          // populate itinerary store
+          dispatch(setEntry({ entry: entryLight }));
+          searchRequest = buildSearchFromEntry(entryLight);
+        } else {
+          const rq = buildSearchFromQueryParams(params);
+          if (!rq) {
+            throw new Error('Invalid search parameters');
+          }
+
+          searchRequest = rq;
+        }
+
+        searchRequest.agentId = context.agentId;
+        const packageSearchResults = await search(config, searchRequest);
+
+        console.log('Search results', packageSearchResults);
+
+        const enrichedFilters = enrichFiltersWithResults(packageSearchResults, context.filters, context.tags ?? []);
+        if (!initialFiltersSet) {
+          dispatch(resetFilters(enrichedFilters));
+          setInitialFilters(enrichedFilters);
+          setInitialFiltersSet(true);
+        }
+
+        dispatch(setResults(packageSearchResults));
+        const initialFilteredResults = applyFilters(packageSearchResults, filters, null);
+        dispatch(setFilteredResults(initialFilteredResults));
+
+        if (packageSearchResults?.length > 0) {
+          if (entryId) {
+            const matching = packageSearchResults.find((r) => r.productId === entry?.id);
+
+            if (matching) {
+              dispatch(setSelectedSearchResult(matching));
+            }
+          } else {
+            if (context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight) {
+              dispatch(setSelectedSearchResult(packageSearchResults[0]));
+            }
+          }
+        }
+
+        dispatch(setIsLoading(false));
+      } catch (err) {
+        console.error('Search failed', err);
+        dispatch(setIsLoading(false));
+      }
+    };
+
+    const runHotelSearch = async () => {
+      dispatch(setIsLoading(true));
+      try {
+        if (!context) {
+          return;
+        }
+
+        const config: TideClientConfig = {
+          host: context.tideConnection.host,
+          apiKey: context.tideConnection.apiKey
+        };
+
+        const params = new URLSearchParams(location.search);
+
+        let searchRequest: PackagingAccommodationRequest;
+
+        const rq = buildPackagingAccommodationRequestFromQueryParams(params);
+        if (!rq) {
+          throw new Error('Invalid search parameters');
+        }
+
+        searchRequest = rq;
+        searchRequest.portalId = context.portalId;
+        searchRequest.agentId = context.agentId;
+
+        const packageAccoSearchResults = await searchPackagingAccommodations(config, searchRequest);
+
+        console.log('package Acco SearchResults', packageAccoSearchResults);
+
+        const enrichedFilters = enrichFiltersWithPackageAccoResults(packageAccoSearchResults, context.filters, context.tags ?? []);
+        if (!initialFiltersSet) {
+          dispatch(resetFilters(enrichedFilters));
+          setInitialFilters(enrichedFilters);
+          setInitialFiltersSet(true);
+        }
+
+        dispatch(setPackagingAccoResults(packageAccoSearchResults));
+        const initialFilteredResults = applyFiltersToPackageAccoResults(packageAccoSearchResults, filters, null);
+        dispatch(setFilteredPackagingAccoResults(initialFilteredResults));
+
+        dispatch(setIsLoading(false));
+      } catch (err) {
+        console.error('Search failed', err);
+        dispatch(setIsLoading(false));
+      }
+    };
+
+    if (!context?.showMockup) {
+      if (
+        context?.searchConfiguration.qsmType === PortalQsmType.GroupTour ||
+        (context?.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && !context.searchConfiguration.enableManualPackaging)
+      ) {
+        runSearch();
+      }
+      if (context?.searchConfiguration.qsmType === PortalQsmType.Accommodation) {
+        runHotelSearch();
+      }
+      if (context?.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && context.searchConfiguration.enableManualPackaging) {
+        // Manual packaging flow.
+        if (context.searchConfiguration.allowAccommodations) {
+          runHotelSearch();
+        }
+      }
+    }
+  }, [location.search]);
+
+  // Seperate detailsCall
+  useEffect(() => {
+    const fetchDetails = async () => {
+      setDetailsIsLoading(true);
+      console.log('Fetching details for selected search result', selectedSearchResult);
+      if (!selectedSearchResult || !context) return;
+      if (context?.searchConfiguration.qsmType === PortalQsmType.Accommodation || context?.searchConfiguration.qsmType === PortalQsmType.GroupTour) {
+        handleFlyInToggle(true);
+      }
+
+      try {
+        const config: TideClientConfig = {
+          host: context.tideConnection.host,
+          apiKey: context.tideConnection.apiKey
+        };
+
+        const selectedItem = results.find((r) => r.productId === selectedSearchResult.productId);
+        if (!selectedItem) {
+          // TODO: handle this case better, show an error message to the user
+          return;
+        }
+
+        const params = new URLSearchParams(location.search);
+        let entryId = getStringFromParams(params, 'entryId');
+
+        let requestRooms;
+        if (entry && entryId) {
+          requestRooms = getRequestRoomsFromEntry(entry.rooms);
+        } else {
+          const rooms = getRoomsFromParams(params, 'rooms');
+          requestRooms = getRequestRooms(rooms);
+        }
+
+        const detailsRequest: BookingPackageRequest<BookingPackageDetailsRequest> = {
+          officeId: 1,
+          payload: {
+            catalogueId: selectedItem.catalogueId,
+            rooms: requestRooms,
+            searchType: 0, // same as search
+            productCode: selectedItem.code,
+            fromDate: selectedItem.fromDate,
+            toDate: selectedItem.toDate,
+            includeFlights: context!.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight ? true : false,
+            includeHotels: true,
+            includePaxTypes: true,
+            checkExternalAvailability: true,
+            expectedPrice: selectedItem.price,
+            duration: null,
+            preNights: null,
+            postNights: null
+          },
+          agentId: context.agentId
+        };
+
+        if (entry && entryId) {
+          requestRooms = getRequestRoomsFromEntry(entry.rooms);
+          const detailsResponse = await details(config, detailsRequest);
+          console.log('Details:', detailsResponse);
+          dispatch(setBookingPackageDetails({ details: detailsResponse?.payload }));
+        } else {
+          // const detailsWLResponse = await detailsWL(config, detailsRequest);
+          // console.log('Details with entryLight:', detailsWLResponse);
+          // dispatch(setBookingPackageDetails({ details: detailsWLResponse?.payload?.bookingPackage }));
+          // dispatch(setEntry({ entry: detailsWLResponse?.payload?.entry }));
+
+          const detailsResponse = await details(config, detailsRequest);
+          dispatch(setBookingPackageDetails({ details: detailsResponse?.payload }));
+          setDetailsIsLoading(false);
+        }
+      } catch (err) {
+        console.error('Failed to fetch package details', err);
+        setDetailsIsLoading(false);
+      }
+    };
+
+    const fetchPackagingAccoSearchDetails = async () => {
+      if (!selectedPackagingAccoResultCode || !context) return;
+
+      if (context?.searchConfiguration.qsmType === PortalQsmType.Accommodation || context?.searchConfiguration.qsmType === PortalQsmType.GroupTour) {
+        handleFlyInToggle(true);
+      }
+
+      try {
+        const config: TideClientConfig = {
+          host: context.tideConnection.host,
+          apiKey: context.tideConnection.apiKey
+        };
+
+        console.log('selectedPackagingAccoResultCode', selectedPackagingAccoResultCode);
+        const selectedItem = packagingAccoResults.find((r) => r.code === selectedPackagingAccoResultCode);
+        console.log('Selected packaging acco item', selectedItem);
+        if (!selectedItem) {
+          // TODO: handle this case better, show an error message to the user
+          return;
+        }
+
+        const params = new URLSearchParams(location.search);
+        const rooms = getRoomsFromParams(params, 'rooms');
+        let tagId = getNumberFromParams(params, 'tagId');
+
+        let destinationAirport = getStringFromParams(params, 'destinationAirport');
+
+        let destinationId: number | null = null;
+        let destinationIsCountry = false;
+        let destinationIsRegion = false;
+        let destinationIsOord = false;
+        let destinationIsLocation = false;
+        let destinationCode: string | null = null;
+        let destinationIsAirport = false;
+
+        if (selectedItem.countryId) {
+          destinationId = selectedItem.countryId;
+          destinationIsCountry = true;
+        } else if (selectedItem.regionId) {
+          destinationId = selectedItem.regionId;
+          destinationIsRegion = true;
+        } else if (selectedItem.oordId) {
+          destinationId = selectedItem.oordId;
+          destinationIsOord = true;
+        } else if (selectedItem.locationId) {
+          destinationId = selectedItem.locationId;
+          destinationIsLocation = true;
+        } else if (destinationAirport) {
+          destinationCode = destinationAirport;
+          destinationIsAirport = true;
+        }
+
+        const detailSearchRequest: PackagingAccommodationRequest = {
+          officeId: 1,
+          portalId: context.portalId,
+          agentId: context.agentId,
+          catalogueId: context!.searchConfiguration.defaultCatalogueId ?? 0,
+          searchConfigurationId: context!.searchConfiguration.id,
+          vendorConfigurationId: selectedItem.vendorId,
+          language: context!.languageCode ?? 'en-GB',
+          serviceType: 3,
+          fromDate: selectedItem.fromDate,
+          toDate: selectedItem.toDate,
+          destination: {
+            id: Number(destinationId),
+            isCountry: destinationIsCountry,
+            isRegion: destinationIsRegion,
+            isOord: destinationIsOord,
+            isLocation: destinationIsLocation,
+            isAirport: destinationIsAirport,
+            code: destinationCode
+          } as PackagingDestination,
+          productCode: selectedItem.code ? selectedItem.code : '',
+          rooms: getPackagingRequestRooms(rooms),
+          tagIds: tagId ? [tagId] : []
+        };
+
+        const packageAccoSearchDetails = await searchPackagingAccommodations(config, detailSearchRequest);
+        console.log('Packaging Acco Search details', packageAccoSearchDetails);
+        dispatch(setPackagingAccoSearchDetails(packageAccoSearchDetails));
+      } catch (err) {
+        console.error('Failed to fetch package details', err);
+      }
+    };
+
+    if (selectedSearchResult) {
+      fetchDetails();
+    }
+    if (selectedPackagingAccoResultCode) {
+      fetchPackagingAccoSearchDetails();
+    }
+  }, [selectedSearchResult, selectedPackagingAccoResultCode]);
+
+  useEffect(() => {
+    if (context?.searchConfiguration.qsmType === PortalQsmType.Accommodation) {
+      const filteredPackageAccoResults = applyFiltersToPackageAccoResults(packagingAccoResults, filters, selectedSortType);
+      dispatch(setFilteredPackagingAccoResults(filteredPackageAccoResults));
+    } else {
+      const filteredResults = applyFilters(results, filters, selectedSortType);
+      dispatch(setFilteredResults(filteredResults));
+    }
+  }, [filters, results, packagingAccoResults, selectedSortType]);
+
+  return (
+    <div id="tide-booking" className="search__bg">
+      {context && (
+        <div className="search">
+          <div className="search__container">
+            {context.searchConfiguration.qsmType === PortalQsmType.Flight && (
+              <FlightSearchProvider tideConnection={context.tideConnection}>
+                <FlightResultsContainer isMobile={isMobile} />
+                <FlyIn
+                  title="Select your fare"
+                  srpType={context.searchConfiguration.qsmType}
+                  isOpen={flyInIsOpen}
+                  setIsOpen={handleFlyInToggle}
+                  onPanelRef={(el) => (panelRef.current = el)}
+                  detailsLoading={detailsIsLoading}
+                />
+              </FlightSearchProvider>
+            )}
+            {(context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight ||
+              context.searchConfiguration.qsmType === PortalQsmType.Accommodation ||
+              context.searchConfiguration.qsmType === PortalQsmType.GroupTour ||
+              context.searchConfiguration.qsmType === PortalQsmType.RoundTrip) && (
+              <>
+                {context.searchConfiguration.qsmType != PortalQsmType.AccommodationAndFlight && context.showFilters && (
+                  <Filters
+                    initialFilters={initialFilters}
+                    filters={filters}
+                    isOpen={filtersOpen}
+                    handleSetIsOpen={() => setFiltersOpen(!filtersOpen)}
+                    // handleApplyFilters={() => setSearchTrigger((prev) => prev + 1)}
+                    isLoading={isLoading}
+                  />
+                )}
+                {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && (
+                  <Itinerary isOpen={itineraryOpen} handleSetIsOpen={() => setItineraryOpen(!itineraryOpen)} isLoading={isLoading} />
+                )}
+                {/* ---------------- Results ---------------- */}
+                <div className="search__results">
+                  {isMobile && (
+                    <div className="search__result-row">
+                      <div className="search__results__actions">
+                        {context.searchConfiguration.qsmType != PortalQsmType.AccommodationAndFlight && context.showFilters && (
+                          <div className="cta cta--filter" onClick={() => setFiltersOpen(true)}>
+                            <Icon name="ui-filter" className="mobile-filters-button__icon" height={16} />
+                            {translations.SRP.FILTERS}
+                          </div>
+                        )}
+                        {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && (
+                          <div className="cta cta--filter" onClick={() => setItineraryOpen(true)}>
+                            <Icon name="ui-calendar" className="mobile-filters-button__icon" height={16} />
+                            {translations.SRP.SHOW_ITINERARY}
+                          </div>
+                        )}
+                      </div>
+                      {sortByTypes && sortByTypes.length > 0 && (
+                        <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 className="search__result-row">
+                    <span className="search__result-row-text">
+                      {!isLoading && (
+                        <>
+                          {((context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight &&
+                            context.searchConfiguration.enableManualPackaging) ||
+                            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>
+                    {!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 className="search__results__wrapper">
+                    {context.showTabViews && <TabViews />}
+
+                    {context.showRoundTripResults && context.showMockup && <RoundTripResults />}
+
+                    {context.searchConfiguration.qsmType === PortalQsmType.GroupTour && <GroupTourResults isLoading={isLoading} />}
+
+                    {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight &&
+                      context.showFlightResults &&
+                      bookingPackageDetails?.outwardFlights && <FlightResults flights={bookingPackageDetails?.outwardFlights} isDeparture={true} />}
+
+                    {context.showHotelAccommodationResults && <HotelAccommodationResults isLoading={isLoading} />}
+
+                    {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight &&
+                      context.showFlightResults &&
+                      bookingPackageDetails?.returnFlights && <FlightResults flights={bookingPackageDetails?.returnFlights} isDeparture={false} />}
+                  </div>
+                </div>
+                {/* <button onClick={() => handleFlyInToggle(!flyInIsOpen)}>Toggle FlyIn</button> */}
+                <FlyIn
+                  title={`${translations.SRP.SELECT} ${translations.SRP.ACCOMMODATION}`}
+                  srpType={context.searchConfiguration.qsmType}
+                  isOpen={flyInIsOpen}
+                  setIsOpen={handleFlyInToggle}
+                  onPanelRef={(el) => (panelRef.current = el)}
+                  detailsLoading={detailsIsLoading}
+                />
+              </>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SearchResultsContainer;