npm - @qite/tide-booking-component - Versions diffs - 1.4.122 → 1.4.124 - Mend

@qite/tide-booking-component 1.4.122 → 1.4.124

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (706) hide show

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

@@ -1,1764 +1,1764 @@
-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,
-  setFlyInIsOpen,
-  setFilteredResults,
-  setPackagingAccoResults,
-  setFilteredPackagingAccoResults,
-  setPackagingAccoSearchDetails,
-  setEditablePackagingEntry,
-  setTransactionId,
-  setFlyInType,
-  setPriceDetails,
-  setItinerary,
-  setFlightsLoading,
-  setPackagingFlightResults,
-  setSelectedPackagingFlight,
-  setSelectedPackagingAccoResult,
-  setSelectedOutwardKey,
-  setSelectedReturnKey,
-  setFilteredPackagingFlightResults,
-  setInitialFlightFilters,
-  resetFlightFilters,
-  setFilters,
-  setInitialFilters,
-  setBookPackagingEntry
-} from '../../store/search-results-slice';
-import { FlyInType, SearchSeed, SortByType } from '../../types';
-import useMediaQuery from '../../../shared/utils/use-media-query-util';
-import ItemPicker from '../item-picker';
-import {
-  TideClientConfig,
-  details,
-  search,
-  searchPackagingAccommodations,
-  BookingPackageDestination,
-  BookingPackageDetailsRequest,
-  BookingPackagePax,
-  BookingPackageRequest,
-  BookingPackageRequestRoom,
-  BookingPackageSearchRequest,
-  PackagingAccommodationRequest,
-  PackagingDestination,
-  PortalQsmType,
-  PackagingEntry,
-  startTransaction,
-  PackagingEntryLine,
-  getPriceDetails,
-  getItinerary,
-  FlightSearchRequest,
-  searchPackagingFlights,
-  PackagingFlightResponse,
-  PackagingAccommodationResponse,
-  FlightSearchResponseFlightSegment,
-  PackagingEntryLineFlightLine,
-  PackagingEntryAddress,
-  PackagingEntryPax,
-  PackagingEntryRoom,
-  PackagingRequestBase
-} from '@qite/tide-client';
-import { getDateFromParams, getNumberFromParams, getRoomsFromParams, getStringFromParams } from '../../../shared/utils/query-string-util';
-import { concat, first, isEmpty, last, range } from 'lodash';
-import { Room } from '../../../booking-wizard/types';
-import Icon from '../../../shared/components/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 { dateToDateStruct, 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,
-  applyFiltersToPackageFlightResults,
-  enrichFiltersWithPackageAccoResults,
-  enrichFiltersWithPackageFlightResults,
-  enrichFiltersWithResults
-} from '../../utils/search-results-utils';
-import {
-  ACCOMMODATION_SERVICE_TYPE,
-  EXCURSION_SERVICE_TYPE,
-  FLIGHT_SERVICE_TYPE,
-  getDepartureAirportFromEntry,
-  getDestinationAirportFromEntry,
-  getPackagingRequestRoomsFromBookingRooms,
-  getRequestRoomsFromPackagingEntry,
-  GROUP_TOUR_SERVICE_TYPE,
-  parseHotelId,
-  toDateOnlyString
-} from '../../utils/query-utils';
-import { getRequestRoomsFromPackagingSegments, getSelectedOptionsPerRoom } from '../../utils/packaging-utils';
-import FullItinerary from '../itinerary/full-itinerary';
-import { getFlightKey } from '../../utils/flight-utils';
-import IndependentFlightOption from '../flight/flight-selection/independent-flight-option';
-import { Spinner } from '../../..';
-import {
-  selectSelectedCombinationFlight,
-  selectSelectedOutward,
-  selectSelectedOutwardKey,
-  selectSelectedReturn,
-  selectSelectedReturnKey,
-  selectUniqueOutwardFlights,
-  selectUniqueReturnFlights
-} from '../../store/search-results-selectors';
-import DayByDayExcursions from '../excursions/day-by-day-excursions';
-import BookPackagingEntry from '../book-packaging-entry';
-import { format } from 'date-fns';
-type BuildPackagingEntryPartialArgs = {
-  sourceEntry: PackagingEntry | null | undefined;
-  selectedHotelCode: string | null | undefined;
-  accommodationResults: PackagingAccommodationResponse[];
-  selectedFlight: PackagingFlightResponse | null;
-  confirmedExcursionsByDay: Record<string, PackagingAccommodationResponse[]>;
-  seed: SearchSeed;
-  transactionId: string;
-  language: string;
-};
-interface SearchResultsContainerProps {
-  onBookingStarted?: () => void;
-}
-const SearchResultsContainer: React.FC<SearchResultsContainerProps> = ({ onBookingStarted }) => {
-  const currentSearch = typeof window !== 'undefined' ? window.location.search : '';
-  const dispatch = useDispatch();
-  const context = useContext(SearchResultsConfigurationContext);
-  const translations = getTranslations(context?.languageCode ?? 'en-GB');
-  const {
-    results,
-    filteredResults,
-    packagingAccoResults,
-    filteredPackagingAccoResults,
-    isLoading,
-    flightsLoading,
-    initialFilters,
-    filters,
-    flightFilters,
-    selectedSortType,
-    selectedFlightSortType,
-    selectedSearchResult,
-    selectedPackagingAccoResultCode,
-    flyInIsOpen,
-    packagingAccoSearchDetails,
-    editablePackagingEntry,
-    transactionId,
-    flyInType,
-    packagingFlightResults,
-    confirmedExcursionsByDay,
-    bookPackagingEntry
-  } = useSelector((state: SearchResultsRootState) => state.searchResults);
-  const isMobile = useMediaQuery('(max-width: 1200px)');
-  const [initialFiltersSet, setInitialFiltersSet] = useState(false);
-  const [initialFlightFiltersSet, setInitialFlightFiltersSet] = useState(false);
-  const [filtersOpen, setFiltersOpen] = useState(false);
-  const [detailsIsLoading, setDetailsIsLoading] = useState(false);
-  const [pricesAreLoading, setPricesAreLoading] = useState(false);
-  const [itineraryIsLoading, setItineraryIsLoading] = useState(false);
-  const [itineraryOpen, setItineraryOpen] = useState(false);
-  const [isBookingConfirmation, setIsBookingConfirmation] = useState(false);
-  const [selectedAccommodationSeed, setSelectedAccommodationSeed] = useState<SearchSeed | null>(null);
-  const skipInitialPackagingAccoDetailsRef = useRef(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 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 buildSearchFromSeed = (seed: SearchSeed): BookingPackageRequest<BookingPackageSearchRequest> => {
-    const country = seed.country;
-    const region = seed.region;
-    const oord = seed.oord;
-    const city = seed.location;
-    const hotel = seed.hotel;
-    const tagId = seed.tagId;
-    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;
-    }
-    return {
-      officeId: 1,
-      agentId: context?.agentId,
-      payload: {
-        catalogueIds: context!.searchConfiguration.defaultCatalogueId
-          ? [context!.searchConfiguration.defaultCatalogueId]
-          : context?.tideConnection?.catalogueIds ?? [1],
-        serviceType:
-          context!.searchConfiguration.qsmType === PortalQsmType.Accommodation || context!.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight
-            ? ACCOMMODATION_SERVICE_TYPE
-            : context!.searchConfiguration.qsmType === PortalQsmType.Flight
-            ? FLIGHT_SERVICE_TYPE
-            : context!.searchConfiguration.qsmType === PortalQsmType.RoundTrip
-            ? GROUP_TOUR_SERVICE_TYPE
-            : undefined,
-        searchType: context!.searchConfiguration.qsmType === PortalQsmType.GroupTour ? 1 : 0,
-        destination: {
-          id: Number(destinationId),
-          isCountry: destinationIsCountry,
-          isRegion: destinationIsRegion,
-          isOord: destinationIsOord,
-          isLocation: destinationIsLocation
-        } as BookingPackageDestination,
-        rooms: seed.rooms,
-        fromDate: seed.fromDate,
-        toDate: seed.toDate,
-        earliestFromOffset: 0,
-        latestToOffset: 0,
-        includeFlights: context!.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight,
-        useExactDates: context?.searchConfiguration.qsmType === PortalQsmType.GroupTour ? false : true,
-        onlyCachedResults: false,
-        includeAllAllotments: true,
-        productIds: hotel ? [hotel] : [],
-        productTagIds: tagId ? [tagId] : []
-      }
-    };
-  };
-  const buildPackagingAccommodationRequestFromSeed = (seed: SearchSeed, currentTransactionId: string): PackagingAccommodationRequest => {
-    const country = seed.country;
-    const region = seed.region;
-    const oord = seed.oord;
-    const city = seed.location;
-    const hotelCode = seed.hotelCode ?? (seed.hotel ? seed.hotel.toString() : '');
-    const tagId = seed.tagId;
-    const destinationAirport = seed.destinationAirport;
-    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 (city) {
-      destinationId = city;
-      destinationIsLocation = true;
-    } else if (oord) {
-      destinationId = oord;
-      destinationIsOord = true;
-    } else if (region) {
-      destinationId = region;
-      destinationIsRegion = true;
-    } else if (country) {
-      destinationId = country;
-      destinationIsCountry = true;
-    } else if (destinationAirport) {
-      destinationCode = destinationAirport;
-      destinationIsAirport = true;
-    }
-    return {
-      transactionId: currentTransactionId,
-      officeId: context?.tideConnection?.officeId ?? 1,
-      agentId: context?.agentId ?? null,
-      catalogueId: context!.searchConfiguration.defaultCatalogueId ?? first(context?.tideConnection?.catalogueIds) ?? 1,
-      searchConfigurationId: context!.searchConfiguration.id,
-      language: context!.languageCode ?? 'en-GB',
-      serviceType: ACCOMMODATION_SERVICE_TYPE,
-      fromDate: seed.fromDate,
-      toDate: seed.toDate,
-      destination: {
-        id: Number(destinationId),
-        isCountry: destinationIsCountry,
-        isRegion: destinationIsRegion,
-        isOord: destinationIsOord,
-        isLocation: destinationIsLocation,
-        isAirport: destinationIsAirport,
-        code: destinationCode
-      } as PackagingDestination,
-      productCode: '',
-      rooms: getPackagingRequestRoomsFromBookingRooms(seed.rooms),
-      tagIds: tagId ? [tagId] : []
-    };
-  };
-  const buildPackagingFlightRequestFromSeed = (seed: SearchSeed, currentTransactionId: string): FlightSearchRequest => {
-    if (typeof window !== 'undefined') {
-      window.scrollTo(0, 0);
-    }
-    var adults = seed.rooms.flatMap((x) => x.pax).filter((x) => x.age! >= 12).length;
-    var kids = seed.rooms.flatMap((x) => x.pax).filter((x) => x.age! >= 2 && x.age! < 12).length;
-    var babies = seed.rooms.flatMap((x) => x.pax).filter((x) => x.age! < 2).length;
-    return {
-      transactionId: currentTransactionId,
-      officeId: context?.tideConnection?.officeId ?? 1,
-      catalogueId: context!.searchConfiguration.defaultCatalogueId ?? first(context?.tideConnection?.catalogueIds) ?? 1,
-      departureAirportCode: seed.departureAirport,
-      arrivalAirportCode: seed.destinationAirport,
-      returnAirportCode: seed.returnAirport,
-      luggageIncluded: null,
-      maxStops: null,
-      travelClass: seed.travelClass,
-      pax: concat(
-        Array.from({ length: adults ?? 0 }, (_, index) => ({
-          id: index,
-          age: 31
-        })),
-        Array.from({ length: kids ?? 0 }, (_, index) => ({
-          id: index + (adults ?? 0),
-          age: 8
-        })),
-        Array.from({ length: babies ?? 0 }, (_, index) => ({
-          id: index + (adults ?? 0) + (kids ?? 0),
-          age: 1
-        }))
-      ),
-      outward: seed.fromDate ? { date: dateToDateStruct(new Date(seed.fromDate)) } : null,
-      return: seed.toDate ? { date: dateToDateStruct(new Date(seed.toDate)) } : null
-    } as FlightSearchRequest;
-  };
-  const buildSearchSeedFromQueryParams = (params: URLSearchParams): SearchSeed | null => {
-    const from = getDateFromParams(params, 'fromDate');
-    const to = getDateFromParams(params, 'toDate');
-    const rooms = getRoomsFromParams(params, 'rooms');
-    const country = getNumberFromParams(params, 'country');
-    const region = getNumberFromParams(params, 'region');
-    const oord = getNumberFromParams(params, 'oord');
-    const city = getNumberFromParams(params, 'location');
-    const hotel = getNumberFromParams(params, 'hotel');
-    const tagId = getNumberFromParams(params, 'tagId');
-    const destinationAirport = getStringFromParams(params, 'destinationAirport');
-    const departureAirport = getStringFromParams(params, 'departureAirport');
-    const travelClass = getStringFromParams(params, 'travelClass');
-    const nationality = getStringFromParams(params, 'nationality');
-    if (!from || !to) {
-      return null;
-    }
-    return {
-      fromDate: from,
-      toDate: to,
-      country,
-      region,
-      oord,
-      location: city,
-      hotel,
-      hotelCode: hotel ? hotel.toString() : null,
-      tagId,
-      destinationAirport,
-      departureAirport,
-      travelClass,
-      nationality,
-      rooms: getRequestRooms(rooms)
-    };
-  };
-  const buildSearchSeedFromAccommodationSegments = (entry: PackagingEntry, segments: PackagingEntryLine[]): SearchSeed | null => {
-    if (!segments?.length) return null;
-    const sortedSegments = [...segments].sort((a, b) => new Date(a.from).getTime() - new Date(b.from).getTime());
-    const firstSegment = first(sortedSegments);
-    const lastSegment = last(sortedSegments);
-    if (!firstSegment || !lastSegment) return null;
-    return {
-      fromDate: toDateOnlyString(firstSegment.from),
-      toDate: toDateOnlyString(lastSegment.to),
-      country: firstSegment.country?.id ?? null,
-      region: firstSegment.region?.id ?? null,
-      oord: firstSegment.oord?.id ?? null,
-      location: firstSegment.location?.id ?? null,
-      hotel: parseHotelId(firstSegment),
-      hotelCode: firstSegment.productCode ?? null,
-      tagId: null,
-      destinationAirport: getDestinationAirportFromEntry(entry.lines ?? []),
-      departureAirport: getDepartureAirportFromEntry(entry.lines ?? []),
-      rooms: getRequestRoomsFromPackagingSegments(entry, sortedSegments)
-    };
-  };
-  const handleEditAccommodation = async (segments: PackagingEntryLine[]) => {
-    const sourceEntry = editablePackagingEntry ?? context?.packagingEntry;
-    if (!sourceEntry) return;
-    const seed = buildSearchSeedFromAccommodationSegments(sourceEntry, segments);
-    if (!seed) return;
-    setDetailsIsLoading(true);
-    setSelectedAccommodationSeed(seed);
-    dispatch(setFlyInType('acco-results'));
-    handleFlyInToggle(true);
-    const currentTransactionId = await getOrCreateTransactionId();
-    await runAccommodationFlow(seed, currentTransactionId ?? '');
-    setDetailsIsLoading(false);
-  };
-  const handleConfirmHotelSwap = () => {
-    const updatedEntry = swapHotelInPackagingEntry();
-    if (!updatedEntry) return;
-    dispatch(setEditablePackagingEntry(updatedEntry));
-    handleFlyInToggle(false);
-  };
-  const swapHotelInPackagingEntry = (): PackagingEntry | null => {
-    const sourceEntry = editablePackagingEntry ?? context?.packagingEntry;
-    const details = packagingAccoSearchDetails;
-    if (!sourceEntry || !details?.length) return null;
-    const selectedOptionsPerRoom = getSelectedOptionsPerRoom(details);
-    if (!selectedOptionsPerRoom.length) return null;
-    const selectedHotel = details[0];
-    let roomIndex = 0;
-    const updatedLines = sourceEntry.lines.map((line) => {
-      if (line.serviceType !== ACCOMMODATION_SERVICE_TYPE) {
-        return line;
-      }
-      const selectedRoom = selectedOptionsPerRoom.find((x) => x.roomIndex === roomIndex);
-      const selectedOption = selectedRoom?.option;
-      roomIndex++;
-      if (!selectedOption) {
-        return line;
-      }
-      return {
-        ...line,
-        guid: selectedOption.guid,
-        productName: selectedHotel.name,
-        productCode: selectedHotel.code,
-        accommodationName: selectedOption.accommodationName,
-        accommodationCode: selectedOption.accommodationCode,
-        regimeName: selectedOption.regimeName,
-        regimeCode: selectedOption.regimeCode,
-        country: line.country
-          ? { ...line.country, id: selectedHotel.countryId ?? line.country.id, name: selectedHotel.countryName ?? line.country.name }
-          : selectedHotel.countryId
-          ? { id: selectedHotel.countryId, name: selectedHotel.countryName, localizations: [] }
-          : line.country,
-        region: line.region
-          ? { ...line.region, id: selectedHotel.regionId ?? line.region.id, name: selectedHotel.regionName ?? line.region.name }
-          : selectedHotel.regionId
-          ? { id: selectedHotel.regionId, name: selectedHotel.regionName, localizations: [] }
-          : line.region,
-        oord: line.oord
-          ? { ...line.oord, id: selectedHotel.oordId ?? line.oord.id, name: selectedHotel.oordName ?? line.oord.name }
-          : selectedHotel.oordId
-          ? { id: selectedHotel.oordId, name: selectedHotel.oordName, localizations: [] }
-          : line.oord,
-        location: line.location
-          ? { ...line.location, id: selectedHotel.locationId ?? line.location.id, name: selectedHotel.locationName ?? line.location.name }
-          : selectedHotel.locationId
-          ? { id: selectedHotel.locationId, name: selectedHotel.locationName, localizations: [] }
-          : line.location,
-        latitude: selectedHotel.latitude ?? line.latitude,
-        longitude: selectedHotel.longitude ?? line.longitude,
-        from: selectedHotel.fromDate ?? line.from,
-        to: selectedHotel.toDate ?? line.to,
-        isChanged: true
-      };
-    });
-    return {
-      ...sourceEntry,
-      lines: updatedLines
-    };
-  };
-  const activeSearchSeed = React.useMemo(() => {
-    if (selectedAccommodationSeed) {
-      return selectedAccommodationSeed;
-    }
-    if (typeof window === 'undefined') return null;
-    const params = new URLSearchParams(window.location.search);
-    return buildSearchSeedFromQueryParams(params);
-  }, [selectedAccommodationSeed, currentSearch]);
-  useEffect(() => {
-    if (typeof document !== 'undefined') {
-      document.body.classList.toggle('has-overlay', filtersOpen);
-    }
-  }, [filtersOpen]);
-  const getOrCreateTransactionId = async (): Promise<string | null> => {
-    if (context?.packagingEntry?.transactionId) {
-      return context.packagingEntry.transactionId;
-    }
-    if (transactionId) {
-      return transactionId;
-    }
-    return await runStartTransaction();
-  };
-  const runSearch = async () => {
-    try {
-      if (!context) return;
-      dispatch(setIsLoading(true));
-      const config: TideClientConfig = {
-        host: context.tideConnection.host,
-        apiKey: context.tideConnection.apiKey
-      };
-      const seed = activeSearchSeed;
-      if (!seed) {
-        throw new Error('Invalid search parameters');
-      }
-      const searchRequest = buildSearchFromSeed(seed);
-      const packageSearchResults = await search(config, searchRequest);
-      const enrichedFilters = enrichFiltersWithResults(packageSearchResults, context.filters, context.tags ?? []);
-      if (!initialFiltersSet) {
-        dispatch(resetFilters(enrichedFilters));
-        dispatch(setInitialFilters(enrichedFilters));
-        setInitialFiltersSet(true);
-      }
-      dispatch(setResults(packageSearchResults));
-      const initialFilteredResults = applyFilters(packageSearchResults, filters, null);
-      dispatch(setFilteredResults(initialFilteredResults));
-      if (packageSearchResults?.length > 0) {
-        if (context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight) {
-          dispatch(setSelectedSearchResult(packageSearchResults[0]));
-        }
-      }
-    } catch (err) {
-      console.error('Search failed', err);
-    } finally {
-      dispatch(setIsLoading(false));
-    }
-  };
-  const runStartTransaction = async (): Promise<string | null> => {
-    try {
-      if (!context) return null;
-      dispatch(setIsLoading(true));
-      const config: TideClientConfig = {
-        host: context.tideConnection.host,
-        apiKey: context.tideConnection.apiKey
-      };
-      const transaction = await startTransaction(config);
-      dispatch(setTransactionId(transaction.transactionId));
-      dispatch(setIsLoading(false));
-      return transaction.transactionId;
-    } catch (err) {
-      console.error('Transaction failed', err);
-      dispatch(setIsLoading(false));
-      return null;
-    }
-  };
-  const runHotelSearch = async (currentTransactionId: string, seed: SearchSeed) => {
-    try {
-      if (!context) return;
-      dispatch(setIsLoading(true));
-      const config: TideClientConfig = {
-        host: context.tideConnection.host,
-        apiKey: context.tideConnection.apiKey
-      };
-      let searchRequest: PackagingAccommodationRequest = buildPackagingAccommodationRequestFromSeed(seed, currentTransactionId);
-      searchRequest.portalId = context.portalId;
-      searchRequest.agentId = context.agentId;
-      const packageAccoSearchResults = await searchPackagingAccommodations(config, searchRequest);
-      const enrichedFilters = enrichFiltersWithPackageAccoResults(packageAccoSearchResults, context.tags ?? []);
-      if (!initialFiltersSet) {
-        dispatch(resetFilters(enrichedFilters));
-        setInitialFilters(enrichedFilters);
-        setInitialFiltersSet(true);
-      }
-      dispatch(setPackagingAccoResults(packageAccoSearchResults));
-      const initialFilteredResults = applyFiltersToPackageAccoResults(packageAccoSearchResults, filters, null);
-      dispatch(setFilteredPackagingAccoResults(initialFilteredResults));
-      if (initialFilteredResults.length > 0) {
-        skipInitialPackagingAccoDetailsRef.current = true;
-        dispatch(setSelectedPackagingAccoResult(first(initialFilteredResults)?.code ?? null));
-      }
-      dispatch(setIsLoading(false));
-    } catch (err) {
-      console.error('HotelSearch failed', err);
-      dispatch(setIsLoading(false));
-    }
-  };
-  const runAccommodationFlow = async (seed: SearchSeed, currentTransactionId: string) => {
-    if (!context || context.showMockup) return;
-    await runHotelSearch(currentTransactionId, seed);
-  };
-  const runFlightSearch = async (currentTransactionId: string, seed: SearchSeed) => {
-    try {
-      if (!context) return;
-      dispatch(setFlightsLoading(true));
-      const config: TideClientConfig = {
-        host: context.tideConnection.host,
-        apiKey: context.tideConnection.apiKey
-      };
-      let searchRequest: FlightSearchRequest = buildPackagingFlightRequestFromSeed(seed, currentTransactionId);
-      searchRequest.agentId = context.agentId;
-      const packageFlightSearchResults = await searchPackagingFlights(config, searchRequest);
-      const enrichedFilters = enrichFiltersWithPackageFlightResults(packageFlightSearchResults, context.tags ?? [], translations);
-      if (!initialFlightFiltersSet) {
-        dispatch(resetFlightFilters(enrichedFilters));
-        dispatch(setInitialFlightFilters(enrichedFilters));
-        setInitialFlightFiltersSet(true);
-      }
-      dispatch(setPackagingFlightResults(packageFlightSearchResults));
-      const initialFilteredResults = applyFiltersToPackageFlightResults(packageFlightSearchResults, filters, null);
-      dispatch(setFilteredPackagingFlightResults(initialFilteredResults));
-      if (initialFilteredResults.length > 0) {
-        const firstResult = first(packageFlightSearchResults);
-        if (firstResult) {
-          dispatch(setSelectedOutwardKey(getFlightKey(firstResult.outward.segments)));
-          dispatch(setSelectedReturnKey(getFlightKey(firstResult.return.segments)));
-        }
-      }
-      dispatch(setFlightsLoading(false));
-    } catch (err) {
-      console.error('FlightSearch failed', err);
-      dispatch(setFlightsLoading(false));
-    }
-  };
-  const runFlightFlow = async (seed: SearchSeed, currentTransactionId: string) => {
-    if (!context || context.showMockup) return;
-    await runFlightSearch(currentTransactionId, seed);
-  };
-  // separate Search
-  useEffect(() => {
-    if (
-      context?.searchConfiguration.qsmType === PortalQsmType.GroupTour ||
-      (context?.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && !context.searchConfiguration.enableManualPackaging)
-    ) {
-      runSearch();
-    }
-    if (context?.searchConfiguration.qsmType === PortalQsmType.Accommodation) {
-      const seed = activeSearchSeed;
-      if (seed) {
-        (async () => {
-          const transactionId = await getOrCreateTransactionId();
-          if (!transactionId) return;
-          await runAccommodationFlow(seed, transactionId);
-        })();
-      }
-    }
-    if (
-      context?.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight &&
-      context.searchConfiguration.enableManualPackaging &&
-      !context?.packagingEntry
-    ) {
-      const seed = activeSearchSeed;
-      if (seed) {
-        (async () => {
-          const sharedTransactionId = await getOrCreateTransactionId();
-          if (!sharedTransactionId) return;
-          const tasks: Promise<void>[] = [];
-          if (context.searchConfiguration.allowAccommodations) {
-            tasks.push(runAccommodationFlow(seed, sharedTransactionId));
-          }
-          if (context.searchConfiguration.allowFlights) {
-            tasks.push(runFlightFlow(seed, sharedTransactionId));
-          }
-          await Promise.all(tasks);
-        })();
-      }
-    }
-  }, [
-    location.search,
-    context?.showMockup,
-    context?.searchConfiguration.qsmType,
-    context?.searchConfiguration.enableManualPackaging,
-    context?.searchConfiguration.allowAccommodations,
-    context?.packagingEntry?.transactionId,
-    activeSearchSeed
-  ]);
-  useEffect(() => {
-    if (context?.packagingEntry) {
-      dispatch(setEditablePackagingEntry(structuredClone(context.packagingEntry)));
-      dispatch(setTransactionId(context.packagingEntry.transactionId));
-      const params = new URLSearchParams(location.search);
-      const bookingConfirmation = getStringFromParams(params, 'bookingConfirmation');
-      console.log('bookingConfirmation', bookingConfirmation);
-      if (bookingConfirmation == 'true') {
-        setIsBookingConfirmation(true);
-        dispatch(setBookPackagingEntry(true));
-      }
-    }
-  }, [context?.packagingEntry]);
-  useEffect(() => {
-    if (bookPackagingEntry && onBookingStarted) {
-      onBookingStarted();
-    }
-  }, [bookPackagingEntry, onBookingStarted]);
-  // separate detailsCall
-  useEffect(() => {
-    const fetchDetails = async () => {
-      if (!selectedSearchResult || !context) return;
-      setDetailsIsLoading(true);
-      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;
-        }
-        let requestRooms: BookingPackageRequestRoom[];
-        if (context?.packagingEntry) {
-          requestRooms = getRequestRoomsFromPackagingEntry(context.packagingEntry);
-        } else {
-          const seed = activeSearchSeed;
-          requestRooms = seed?.rooms?.length ? seed.rooms : getRequestRooms(null);
-        }
-        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
-        };
-        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 (skipInitialPackagingAccoDetailsRef.current) {
-        skipInitialPackagingAccoDetailsRef.current = false;
-        return;
-      }
-      setDetailsIsLoading(true);
-      if (
-        context?.searchConfiguration.qsmType === PortalQsmType.Accommodation ||
-        context?.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight ||
-        context?.searchConfiguration.qsmType === PortalQsmType.GroupTour
-      ) {
-        handleFlyInToggle(true);
-        dispatch(setFlyInType('acco-details'));
-      }
-      try {
-        const config: TideClientConfig = {
-          host: context.tideConnection.host,
-          apiKey: context.tideConnection.apiKey
-        };
-        const selectedItem = packagingAccoResults.find((r) => r.code === selectedPackagingAccoResultCode);
-        if (!selectedItem) {
-          // TODO: handle this case better, show an error message to the user
-          return;
-        }
-        const seed = activeSearchSeed;
-        const tagId = seed?.tagId ?? null;
-        const destinationAirport = seed?.destinationAirport ?? null;
-        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 = {
-          transactionId: transactionId ?? '',
-          officeId: 1,
-          portalId: context.portalId,
-          agentId: context.agentId,
-          catalogueId: context!.searchConfiguration.defaultCatalogueId ?? first(context?.tideConnection?.catalogueIds) ?? 1,
-          searchConfigurationId: context!.searchConfiguration.id,
-          vendorConfigurationId: selectedItem.vendorId,
-          language: context!.languageCode ?? 'en-GB',
-          serviceType: ACCOMMODATION_SERVICE_TYPE,
-          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: getPackagingRequestRoomsFromBookingRooms(seed?.rooms ?? null),
-          tagIds: tagId ? [tagId] : []
-        };
-        const packageAccoSearchDetails = await searchPackagingAccommodations(config, detailSearchRequest);
-        dispatch(setPackagingAccoSearchDetails(packageAccoSearchDetails));
-        setDetailsIsLoading(false);
-      } catch (err) {
-        console.error('Failed to fetch package details', err);
-        setDetailsIsLoading(false);
-      }
-    };
-    if (selectedSearchResult) {
-      fetchDetails();
-    }
-    if (selectedPackagingAccoResultCode) {
-      fetchPackagingAccoSearchDetails();
-    }
-  }, [selectedSearchResult, selectedPackagingAccoResultCode]);
-  useEffect(() => {
-    if (context?.searchConfiguration.qsmType === PortalQsmType.Accommodation || context?.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight) {
-      const filteredPackageAccoResults = applyFiltersToPackageAccoResults(packagingAccoResults, filters, selectedSortType);
-      dispatch(setFilteredPackagingAccoResults(filteredPackageAccoResults));
-    } else {
-      const filteredResults = applyFilters(results, filters, selectedSortType);
-      dispatch(setFilteredResults(filteredResults));
-    }
-  }, [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]);
-  useEffect(() => {
-    const fetchPriceDetails = async () => {
-      if (!context || !editablePackagingEntry || isEmpty(editablePackagingEntry.lines)) return;
-      setPricesAreLoading(true);
-      try {
-        const config: TideClientConfig = {
-          host: context.tideConnection.host,
-          apiKey: context.tideConnection.apiKey
-        };
-        const request = {
-          language: context.languageCode ?? 'en-GB',
-          officeId: context.tideConnection.officeId,
-          catalogueId: context!.searchConfiguration.defaultCatalogueId ?? first(context?.tideConnection?.catalogueIds) ?? 1,
-          agentId: context.agentId,
-          payload: editablePackagingEntry
-        } as PackagingRequestBase<PackagingEntry>;
-        const priceDetails = await getPriceDetails(config, request);
-        dispatch(setPriceDetails(priceDetails));
-        setPricesAreLoading(false);
-      } catch (err) {
-        console.error('Error fetching price details', err);
-        setPricesAreLoading(false);
-      }
-    };
-    const fetchItinerary = async () => {
-      if (!context || !context.packagingEntry || !editablePackagingEntry || isEmpty(editablePackagingEntry.lines)) return;
-      setItineraryIsLoading(true);
-      try {
-        const config: TideClientConfig = {
-          host: context.tideConnection.host,
-          apiKey: context.tideConnection.apiKey
-        };
-        const request = {
-          language: context.languageCode ?? 'en-GB',
-          officeId: context.tideConnection.officeId,
-          catalogueId: context!.searchConfiguration.defaultCatalogueId ?? first(context?.tideConnection?.catalogueIds) ?? 1,
-          agentId: context.agentId,
-          payload: editablePackagingEntry
-        } as PackagingRequestBase<PackagingEntry>;
-        const itinerary = await getItinerary(config, request);
-        dispatch(setItinerary(itinerary));
-        setItineraryIsLoading(false);
-      } catch (err) {
-        console.error('Error fetching itinerary', err);
-        setItineraryIsLoading(false);
-      }
-    };
-    fetchPriceDetails();
-    fetchItinerary();
-  }, [editablePackagingEntry]);
-  // Flight selection
-  // 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) {
-      dispatch(setSelectedReturnKey(null));
-      return;
-    }
-    const matchingCombinations = packagingFlightResults.filter((flight) => getFlightKey(flight.outward.segments) === selectedOutwardKey);
-    const returnMap = new Map<string, PackagingFlightResponse>();
-    matchingCombinations.forEach((flight) => {
-      const key = getFlightKey(flight.return.segments);
-      if (!returnMap.has(key)) {
-        returnMap.set(key, flight);
-      }
-    });
-    const returns = Array.from(returnMap.values());
-    const segments = first(returns)?.return.segments;
-    const firstReturnKey = returns.length > 0 && segments ? getFlightKey(segments) : null;
-    if (!returns.some((x) => getFlightKey(x.return.segments) === selectedReturnKey)) {
-      dispatch(setSelectedReturnKey(firstReturnKey));
-    }
-  }, [selectedOutwardKey, packagingFlightResults, selectedReturnKey, dispatch]);
-  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(() => {
-  //   if (!selectedCombinationFlight) return;
-  //   dispatch(setSelectedPackagingFlight(selectedCombinationFlight));
-  //   // onFlightSearch(selectedCombinationFlight); // Trigger search to update accommodation options based on selected flight
-  //   dispatch(setFlyInIsOpen(true));
-  // }, [selectedCombinationFlight, dispatch]);
-  // Build packagingEntry
-  useEffect(() => {
-    if (!context) return;
-    const seed = activeSearchSeed;
-    if (!seed) return;
-    const nextEntry = buildOrUpdatePackagingEntryPartial({
-      sourceEntry: editablePackagingEntry ?? context.packagingEntry ?? null,
-      selectedHotelCode: selectedPackagingAccoResultCode,
-      accommodationResults: packagingAccoResults,
-      selectedFlight: selectedCombinationFlight ?? null,
-      confirmedExcursionsByDay,
-      seed,
-      transactionId: transactionId ?? context.packagingEntry?.transactionId ?? '',
-      language: context.languageCode ?? 'en-GB'
-    });
-    if (!nextEntry) return;
-    dispatch(setEditablePackagingEntry(nextEntry));
-    if (selectedCombinationFlight) {
-      dispatch(setSelectedPackagingFlight(selectedCombinationFlight));
-    }
-  }, [
-    context,
-    activeSearchSeed,
-    selectedPackagingAccoResultCode,
-    packagingAccoResults,
-    packagingAccoSearchDetails,
-    selectedCombinationFlight,
-    confirmedExcursionsByDay,
-    transactionId,
-    dispatch
-  ]);
-  const removeAccommodationLines = (lines: PackagingEntryLine[]) => lines.filter((line) => line.serviceType !== ACCOMMODATION_SERVICE_TYPE);
-  const removeFlightLines = (lines: PackagingEntryLine[]) => lines.filter((line) => line.serviceType !== FLIGHT_SERVICE_TYPE);
-  const removeExcursionLines = (lines: PackagingEntryLine[]) => lines.filter((line) => line.serviceType !== EXCURSION_SERVICE_TYPE);
-  const buildAccommodationLinesFromSelection = (selectedHotel: PackagingAccommodationResponse, seed: SearchSeed): PackagingEntryLine[] => {
-    return buildPackagingAccommodationLines(selectedHotel, seed, ACCOMMODATION_SERVICE_TYPE);
-  };
-  const buildExcursionLinesFromConfirmedDays = (confirmedExcursionsByDay: Record<string, PackagingAccommodationResponse[]>): PackagingEntryLine[] => {
-    return Object.values(confirmedExcursionsByDay)
-      .flat()
-      .flatMap((excursion) => {
-        const selectedOptions = excursion.rooms.flatMap((room) => room.options.filter((option) => option.isSelected));
-        const parentGuid = crypto.randomUUID();
-        return selectedOptions.map(
-          (option, index) =>
-            ({
-              guid: option.guid ?? crypto.randomUUID(),
-              moment: '',
-              parentGuid: index === 0 ? null : parentGuid,
-              order: index,
-              isChanged: true,
-              from: excursion.fromDate,
-              to: excursion.toDate,
-              serviceType: EXCURSION_SERVICE_TYPE,
-              productName: excursion.name,
-              productCode: excursion.code,
-              accommodationName: option.accommodationName,
-              accommodationCode: option.accommodationCode,
-              regimeName: option.regimeName,
-              regimeCode: option.regimeCode,
-              country: excursion.countryId ? { id: excursion.countryId, name: excursion.countryName, localizations: [] } : null,
-              region: excursion.regionId ? { id: excursion.regionId, name: excursion.regionName, localizations: [] } : null,
-              oord: excursion.oordId ? { id: excursion.oordId, name: excursion.oordName, localizations: [] } : null,
-              location: excursion.locationId ? { id: excursion.locationId, name: excursion.locationName, localizations: [] } : null,
-              longitude: excursion.longitude ?? null,
-              latitude: excursion.latitude ?? null,
-              pax: Array.isArray(option.paxIds)
-                ? option.paxIds.map((paxId, paxIndex) => ({
-                    paxId: paxId,
-                    room: 0,
-                    order: paxIndex
-                  }))
-                : [],
-              flightInformation: null
-            } satisfies PackagingEntryLine)
-        );
-      });
-  };
-  const buildPackagingAccommodationLines = (selectedItem: PackagingAccommodationResponse, seed: SearchSeed, serviceType: number): PackagingEntryLine[] => {
-    if (!selectedItem) return [];
-    const parentGuid = crypto.randomUUID();
-    return selectedItem.rooms
-      .filter((room) => room.options.some((o) => o.isSelected))
-      .map((room, index) => {
-        const option = room.options.find((o) => o.isSelected)!;
-        const pax = option.paxIds.map((p, paxIndex) => ({
-          paxId: p,
-          room: index,
-          order: paxIndex
-        }));
-        return {
-          guid: option.guid ?? crypto.randomUUID(),
-          moment: '',
-          parentGuid: index === 0 ? null : parentGuid,
-          order: index,
-          isChanged: true,
-          from: selectedItem.fromDate,
-          to: selectedItem.toDate,
-          serviceType: serviceType,
-          productName: selectedItem.name,
-          productCode: selectedItem.code,
-          accommodationName: option.accommodationName,
-          accommodationCode: option.accommodationCode,
-          regimeName: option.regimeName,
-          regimeCode: option.regimeCode,
-          country: selectedItem.countryId ? { id: selectedItem.countryId, name: selectedItem.countryName, localizations: [] } : null,
-          region: selectedItem.regionId ? { id: selectedItem.regionId, name: selectedItem.regionName, localizations: [] } : null,
-          oord: selectedItem.oordId ? { id: selectedItem.oordId, name: selectedItem.oordName, localizations: [] } : null,
-          location: selectedItem.locationId ? { id: selectedItem.locationId, name: selectedItem.locationName, localizations: [] } : null,
-          longitude: selectedItem.longitude ?? null,
-          latitude: selectedItem.latitude ?? null,
-          pax,
-          flightInformation: null
-        } satisfies PackagingEntryLine;
-      });
-  };
-  const toDateOnlyUtcString = (value: string | Date): string => {
-    const date = new Date(value);
-    return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate())).toISOString();
-  };
-  const toTimeOnlyString = (value: string | Date): string => {
-    const date = new Date(value);
-    const hh = String(date.getUTCHours()).padStart(2, '0');
-    const mm = String(date.getUTCMinutes()).padStart(2, '0');
-    const ss = String(date.getUTCSeconds()).padStart(2, '0');
-    return `${hh}:${mm}:${ss}`;
-  };
-  const mapFlightSegmentsToFlightLines = (segments: FlightSearchResponseFlightSegment[]): PackagingEntryLineFlightLine[] =>
-    segments.map((segment) => ({
-      airlineCode: segment.marketingAirlineCode,
-      airlineDescription: segment.marketingAirlineName,
-      operatingAirlineCode: segment.operatingAirlineCode,
-      operatingAirlineDescription: segment.operatingAirlineName,
-      flightNumber: segment.flightNumber,
-      operatingFlightNumber: segment.operatingFlightNumber ?? null,
-      departureDate: toDateOnlyUtcString(segment.departureDateTime),
-      departureTime: toTimeOnlyString(segment.departureDateTime),
-      departureAirportCode: segment.departureAirportCode,
-      departureAirportDescription: segment.departureAirportName,
-      arrivalDate: toDateOnlyUtcString(segment.arrivalDateTime),
-      arrivalTime: toTimeOnlyString(segment.arrivalDateTime),
-      arrivalAirportCode: segment.arrivalAirportCode,
-      arrivalAirportDescription: segment.arrivalAirportName,
-      durationInTicks: segment.durationInTicks
-    }));
-  const buildFlightLabel = (segments: FlightSearchResponseFlightSegment[]) => {
-    const firstSegment = first(segments);
-    const lastSegment = last(segments);
-    if (!firstSegment || !lastSegment) {
-      return { productName: 'Flight', productCode: 'FLIGHT' };
-    }
-    return {
-      productName: `${firstSegment.departureAirportName} - ${lastSegment.arrivalAirportName} (${firstSegment.marketingAirlineName})`,
-      productCode: `${firstSegment.departureAirportCode} ${lastSegment.arrivalAirportCode}/${firstSegment.marketingAirlineCode}`
-    };
-  };
-  const buildFlightLinesFromSelection = (selectedFlight: PackagingFlightResponse): PackagingEntryLine[] => {
-    if (!selectedFlight) return [];
-    const outwardSegments = selectedFlight.outward?.segments ?? [];
-    const returnSegments = selectedFlight.return?.segments ?? [];
-    if (!outwardSegments.length || !returnSegments.length) return [];
-    const outwardLabel = buildFlightLabel(outwardSegments);
-    const returnLabel = buildFlightLabel(returnSegments);
-    const outwardFirst = first(outwardSegments);
-    const outwardLast = last(outwardSegments);
-    const returnFirst = first(returnSegments);
-    const returnLast = last(returnSegments);
-    const outwardLine = {
-      guid: selectedFlight.outwardGuid,
-      parentGuid: null,
-      order: 0,
-      isChanged: true,
-      from: outwardFirst?.departureDateTime.toString() ?? '',
-      to: outwardLast?.arrivalDateTime.toString() ?? '',
-      serviceType: FLIGHT_SERVICE_TYPE,
-      productName: outwardLabel.productName,
-      productCode: outwardLabel.productCode,
-      accommodationName: outwardFirst?.metaData?.farePriceClassName,
-      accommodationCode: outwardFirst?.metaData?.fareCode,
-      regimeName: null,
-      regimeCode: null,
-      country: null,
-      region: null,
-      oord: null,
-      location: null,
-      longitude: null,
-      latitude: null,
-      // pax: allPaxAssignments,
-      flightInformation: {
-        pnr: '',
-        flightLines: mapFlightSegmentsToFlightLines(outwardSegments)
-      }
-    } as PackagingEntryLine;
-    const returnLine = {
-      guid: selectedFlight.returnGuid,
-      parentGuid: selectedFlight.outwardGuid,
-      order: 1,
-      isChanged: true,
-      from: returnFirst?.departureDateTime.toString() ?? '',
-      to: returnLast?.departureDateTime.toString() ?? '',
-      serviceType: FLIGHT_SERVICE_TYPE,
-      productName: returnLabel.productName,
-      productCode: returnLabel.productCode,
-      accommodationName: returnFirst?.metaData?.farePriceClassName,
-      accommodationCode: returnFirst?.metaData?.fareCode,
-      regimeName: null,
-      regimeCode: null,
-      country: null,
-      region: null,
-      oord: null,
-      location: null,
-      longitude: null,
-      latitude: null,
-      // pax: allPaxAssignments,
-      flightInformation: {
-        pnr: '',
-        flightLines: mapFlightSegmentsToFlightLines(returnSegments)
-      }
-    } as PackagingEntryLine;
-    return [outwardLine, returnLine];
-  };
-  const buildOrUpdatePackagingEntryPartial = ({
-    sourceEntry,
-    selectedHotelCode,
-    accommodationResults,
-    selectedFlight,
-    confirmedExcursionsByDay,
-    seed,
-    transactionId,
-    language
-  }: BuildPackagingEntryPartialArgs): PackagingEntry | null => {
-    if (!seed?.rooms?.length) return null;
-    const entry = buildBasePackagingEntry(sourceEntry, seed, transactionId, language);
-    let nextLines = [...(entry.lines ?? [])];
-    const selectedHotel = selectedHotelCode ? accommodationResults.find((r) => r.code === selectedHotelCode) : null;
-    // Update accommodation only when enough data exists
-    if (selectedHotel) {
-      const accommodationLines = buildAccommodationLinesFromSelection(selectedHotel, seed);
-      if (accommodationLines.length) {
-        nextLines = removeAccommodationLines(nextLines);
-        nextLines = [...nextLines, ...accommodationLines];
-      }
-    }
-    // Update flights only when full selected combination exists
-    if (selectedFlight) {
-      const flightLines = buildFlightLinesFromSelection(selectedFlight);
-      if (flightLines.length) {
-        nextLines = removeFlightLines(nextLines);
-        nextLines = [...nextLines, ...flightLines];
-      }
-    }
-    // excursions
-    const excursionLines = buildExcursionLinesFromConfirmedDays(confirmedExcursionsByDay);
-    nextLines = removeExcursionLines(nextLines);
-    if (excursionLines.length) {
-      nextLines = [...nextLines, ...excursionLines];
-    }
-    nextLines = nextLines.map((line, index) => ({
-      ...line,
-      order: index
-    }));
-    return {
-      ...entry,
-      language,
-      transactionId,
-      pax: entry.pax,
-      lines: nextLines
-    };
-  };
-  const buildBasePackagingEntry = (
-    sourceEntry: PackagingEntry | null | undefined,
-    seed: SearchSeed,
-    transactionId: string,
-    language: string
-  ): PackagingEntry => {
-    if (sourceEntry) {
-      return structuredClone(sourceEntry);
-    }
-    let paxId = 0;
-    const pax: PackagingEntryPax[] = [];
-    const rooms: PackagingEntryRoom[] = [];
-    seed.rooms?.forEach((room, roomIndex) => {
-      const paxIds = room.pax.map((_, paxIndex) => {
-        const id = paxId++;
-        pax.push({
-          id,
-          firstName: _.firstName || '',
-          lastName: _.lastName || '',
-          dateOfBirth: _.dateOfBirth || null,
-          age: _.age || null,
-          isMainBooker: roomIndex === 0 && paxIndex === 0
-        });
-        return id;
-      });
-      rooms.push({
-        id: roomIndex,
-        paxIds
-      });
-    });
-    return {
-      language,
-      transactionId,
-      dossierNumber: '',
-      status: context?.entryStatus,
-      customStatusId: context?.customEntryStatusId,
-      bookingDate: null,
-      price: 0,
-      depositAmount: 0,
-      pax,
-      rooms,
-      lines: [],
-      address: {} as PackagingEntryAddress
-    } as PackagingEntry;
-  };
-  const handleShowMoreFlights = (flyInType: FlyInType) => {
-    dispatch(setFlyInType(flyInType));
-    dispatch(setFlyInIsOpen(true));
-  };
-  return (
-    <div id="tide-booking" className="search__bg">
-      {context && (
-        <div className="search">
-          {bookPackagingEntry ? (
-            <BookPackagingEntry
-              activeSearchSeed={activeSearchSeed}
-              isLoading={itineraryIsLoading || pricesAreLoading}
-              isConfirmationPage={isBookingConfirmation}
-            />
-          ) : (
-            <div className="search__container">
-              {context.searchConfiguration.qsmType === PortalQsmType.Flight && (
-                <FlightSearchProvider tideConnection={context.tideConnection}>
-                  <FlightResultsContainer isMobile={isMobile} />
-                  <FlyIn
-                    srpType={context.searchConfiguration.qsmType}
-                    isOpen={flyInIsOpen}
-                    setIsOpen={handleFlyInToggle}
-                    onPanelRef={(el) => (panelRef.current = el)}
-                    detailsLoading={detailsIsLoading}
-                    filtersOpen={filtersOpen}
-                  />
-                </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}
-                      setFilters={(filters) => dispatch(setFilters(filters))}
-                      resetFilters={(filters) => dispatch(resetFilters(filters))}
-                    />
-                  )}
-                  {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && (
-                    <Itinerary
-                      isOpen={itineraryOpen}
-                      handleSetIsOpen={() => setItineraryOpen(!itineraryOpen)}
-                      isLoading={isLoading || pricesAreLoading || flightsLoading || itineraryIsLoading}
-                      onEditAccommodation={handleEditAccommodation}
-                    />
-                  )}
-                  {/* ---------------- 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-shopping-cart" className="mobile-filters-button__icon" height={16} />
-                              {translations.SRP.VIEW_BOOKING}
-                            </div>
-                          )}
-                        </div>
-                        {context.searchConfiguration.qsmType !== PortalQsmType.AccommodationAndFlight && 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>
-                    )}
-                    {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>
-                        )}
-                      </div>
-                    )}
-                    <div className="search__results__wrapper">
-                      {context.showTabViews &&
-                        (context.searchConfiguration.qsmType === PortalQsmType.GroupTour ||
-                          context.searchConfiguration.qsmType === PortalQsmType.Accommodation) && <TabViews />}
-                      {context.showRoundTripResults && context.showMockup && <RoundTripResults />}
-                      {context.searchConfiguration.qsmType === PortalQsmType.GroupTour && <GroupTourResults isLoading={isLoading} />}
-                      {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && !context.packagingEntry && context.showFlightResults && (
-                        <>
-                          <div className="search__results__label search__results__label--secondary">
-                            <div className="search__results__label__date">
-                              {(() => {
-                                const firstResultDate = uniqueOutwardFlights.length > 0 ? uniqueOutwardFlights[0].outward.segments[0].departureDateTime : null;
-                                const firstResultDay = firstResultDate ? format(firstResultDate, 'd') : null;
-                                const firstResultMonth = firstResultDate ? format(firstResultDate, 'MMM') : null;
-                                return (
-                                  <>
-                                    <p className="search__results__label__date-date">{firstResultDay}</p>
-                                    <p>{firstResultMonth}</p>
-                                  </>
-                                );
-                              })()}
-                            </div>
-                            <div className="search__results__label__text">
-                              <Icon name="ui-flight" height={16} />
-                              <h3>
-                                {translations.SRP.SELECT} <strong> {translations.SRP.DEPARTURE}</strong>
-                              </h3>
-                            </div>
-                          </div>
-                          {flightsLoading ? (
-                            <Spinner label={translations.SRP.LOADING_FLIGHTS} />
-                          ) : (
-                            <>
-                              <div className="search__results__cards search__results__cards--extended">
-                                {selectedOutwardKey && selectedOutward && (
-                                  <IndependentFlightOption
-                                    key={`flight-${selectedOutwardKey}`}
-                                    item={selectedOutward.outward}
-                                    guid={selectedOutward.outwardGuid}
-                                    onSelect={() => dispatch(setSelectedOutwardKey(null))}
-                                    selectedGuid={selectedOutward.outwardGuid}
-                                    isOutward={true}
-                                    showSelectedState={true}
-                                    price={selectedOutward.price}
-                                  />
-                                )}
-                                {visibleOutwardFlights.map((result) => (
-                                  <IndependentFlightOption
-                                    key={`flight-${result.outwardGuid}`}
-                                    item={result.outward}
-                                    onSelect={() => dispatch(setSelectedOutwardKey(getFlightKey(result.outward.segments)))}
-                                    guid={result.outwardGuid}
-                                    isOutward={true}
-                                    price={result.price}
-                                    currentSelectedPrice={selectedOutward?.price}
-                                  />
-                                ))}
-                              </div>
-                              {uniqueOutwardFlights && uniqueOutwardFlights.length > 3 && (
-                                <div className="search__results__cards__actions">
-                                  <button className="cta cta--secondary" onClick={() => handleShowMoreFlights('flight-outward-results')}>
-                                    {translations.SRP.SHOW_MORE}
-                                  </button>
-                                </div>
-                              )}
-                            </>
-                          )}
-                        </>
-                      )}
-                      {context.showHotelAccommodationResults && !context.packagingEntry && <HotelAccommodationResults isLoading={isLoading} />}
-                      {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && !context.packagingEntry && <DayByDayExcursions />}
-                      {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && !context.packagingEntry && context.showFlightResults && (
-                        <>
-                          <div className="search__results__label search__results__label--secondary">
-                            <div className="search__results__label__date">
-                              {(() => {
-                                const firstResultDate = uniqueReturnFlights.length > 0 ? uniqueReturnFlights[0].return.segments[0].departureDateTime : null;
-                                const firstResultDay = firstResultDate ? format(firstResultDate, 'd') : null;
-                                const firstResultMonth = firstResultDate ? format(firstResultDate, 'MMM') : null;
-                                return (
-                                  <>
-                                    <p className="search__results__label__date-date">{firstResultDay}</p>
-                                    <p>{firstResultMonth}</p>
-                                  </>
-                                );
-                              })()}
-                            </div>
-                            <div className="search__results__label__text">
-                              <Icon name="ui-flight" height={16} />
-                              <h3>
-                                {translations.SRP.SELECT} <strong> {translations.SRP.RETURN}</strong>
-                              </h3>
-                            </div>
-                          </div>
-                          <div className="search__results__cards search__results__cards--extended">
-                            {selectedReturnKey && selectedReturn && (
-                              <IndependentFlightOption
-                                key={`flight-${selectedReturnKey}`}
-                                item={selectedReturn.return}
-                                guid={selectedReturn.outwardGuid}
-                                selectedGuid={selectedReturn.outwardGuid}
-                                isOutward={false}
-                                showSelectedState={true}
-                                price={selectedReturn.price}
-                              />
-                            )}
-                            {uniqueReturnFlights.map((result) => (
-                              <IndependentFlightOption
-                                key={`flight-${result.outwardGuid}`}
-                                item={result.return}
-                                onSelect={() => dispatch(setSelectedReturnKey(getFlightKey(result.return.segments)))}
-                                guid={result.outwardGuid}
-                                isOutward={false}
-                                currentSelectedPrice={selectedReturn?.price}
-                                price={result.price}
-                              />
-                            ))}
-                          </div>
-                        </>
-                      )}
-                      {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && context.packagingEntry && (
-                        <FullItinerary isLoading={itineraryIsLoading} />
-                      )}
-                    </div>
-                  </div>
-                  {/* <button onClick={() => handleFlyInToggle(!flyInIsOpen)}>Toggle FlyIn</button> */}
-                  <FlyIn
-                    srpType={context.searchConfiguration.qsmType}
-                    isOpen={flyInIsOpen}
-                    setIsOpen={handleFlyInToggle}
-                    handleConfirm={() => handleConfirmHotelSwap()}
-                    onPanelRef={(el) => (panelRef.current = el)}
-                    detailsLoading={detailsIsLoading}
-                    flyInType={flyInType}
-                    isPackageEditFlow={!!context.packagingEntry}
-                    sortByTypes={sortByTypes}
-                    activeSearchSeed={activeSearchSeed}
-                    toggleFilters={() => setFiltersOpen(!filtersOpen)}
-                    filtersOpen={filtersOpen}
-                  />
-                </>
-              )}
-            </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,
+  setFlyInIsOpen,
+  setFilteredResults,
+  setPackagingAccoResults,
+  setFilteredPackagingAccoResults,
+  setPackagingAccoSearchDetails,
+  setEditablePackagingEntry,
+  setTransactionId,
+  setFlyInType,
+  setPriceDetails,
+  setItinerary,
+  setFlightsLoading,
+  setPackagingFlightResults,
+  setSelectedPackagingFlight,
+  setSelectedPackagingAccoResult,
+  setSelectedOutwardKey,
+  setSelectedReturnKey,
+  setFilteredPackagingFlightResults,
+  setInitialFlightFilters,
+  resetFlightFilters,
+  setFilters,
+  setInitialFilters,
+  setBookPackagingEntry
+} from '../../store/search-results-slice';
+import { FlyInType, SearchSeed, SortByType } from '../../types';
+import useMediaQuery from '../../../shared/utils/use-media-query-util';
+import ItemPicker from '../item-picker';
+import {
+  TideClientConfig,
+  details,
+  search,
+  searchPackagingAccommodations,
+  BookingPackageDestination,
+  BookingPackageDetailsRequest,
+  BookingPackagePax,
+  BookingPackageRequest,
+  BookingPackageRequestRoom,
+  BookingPackageSearchRequest,
+  PackagingAccommodationRequest,
+  PackagingDestination,
+  PortalQsmType,
+  PackagingEntry,
+  startTransaction,
+  PackagingEntryLine,
+  getPriceDetails,
+  getItinerary,
+  FlightSearchRequest,
+  searchPackagingFlights,
+  PackagingFlightResponse,
+  PackagingAccommodationResponse,
+  FlightSearchResponseFlightSegment,
+  PackagingEntryLineFlightLine,
+  PackagingEntryAddress,
+  PackagingEntryPax,
+  PackagingEntryRoom,
+  PackagingRequestBase
+} from '@qite/tide-client';
+import { getDateFromParams, getNumberFromParams, getRoomsFromParams, getStringFromParams } from '../../../shared/utils/query-string-util';
+import { concat, first, isEmpty, last, range } from 'lodash';
+import { Room } from '../../../booking-wizard/types';
+import Icon from '../../../shared/components/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 { dateToDateStruct, 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,
+  applyFiltersToPackageFlightResults,
+  enrichFiltersWithPackageAccoResults,
+  enrichFiltersWithPackageFlightResults,
+  enrichFiltersWithResults
+} from '../../utils/search-results-utils';
+import {
+  ACCOMMODATION_SERVICE_TYPE,
+  EXCURSION_SERVICE_TYPE,
+  FLIGHT_SERVICE_TYPE,
+  getDepartureAirportFromEntry,
+  getDestinationAirportFromEntry,
+  getPackagingRequestRoomsFromBookingRooms,
+  getRequestRoomsFromPackagingEntry,
+  GROUP_TOUR_SERVICE_TYPE,
+  parseHotelId,
+  toDateOnlyString
+} from '../../utils/query-utils';
+import { getRequestRoomsFromPackagingSegments, getSelectedOptionsPerRoom } from '../../utils/packaging-utils';
+import FullItinerary from '../itinerary/full-itinerary';
+import { getFlightKey } from '../../utils/flight-utils';
+import IndependentFlightOption from '../flight/flight-selection/independent-flight-option';
+import { Spinner } from '../../..';
+import {
+  selectSelectedCombinationFlight,
+  selectSelectedOutward,
+  selectSelectedOutwardKey,
+  selectSelectedReturn,
+  selectSelectedReturnKey,
+  selectUniqueOutwardFlights,
+  selectUniqueReturnFlights
+} from '../../store/search-results-selectors';
+import DayByDayExcursions from '../excursions/day-by-day-excursions';
+import BookPackagingEntry from '../book-packaging-entry';
+import { format } from 'date-fns';
+type BuildPackagingEntryPartialArgs = {
+  sourceEntry: PackagingEntry | null | undefined;
+  selectedHotelCode: string | null | undefined;
+  accommodationResults: PackagingAccommodationResponse[];
+  selectedFlight: PackagingFlightResponse | null;
+  confirmedExcursionsByDay: Record<string, PackagingAccommodationResponse[]>;
+  seed: SearchSeed;
+  transactionId: string;
+  language: string;
+};
+interface SearchResultsContainerProps {
+  onBookingStarted?: () => void;
+}
+const SearchResultsContainer: React.FC<SearchResultsContainerProps> = ({ onBookingStarted }) => {
+  const currentSearch = typeof window !== 'undefined' ? window.location.search : '';
+  const dispatch = useDispatch();
+  const context = useContext(SearchResultsConfigurationContext);
+  const translations = getTranslations(context?.languageCode ?? 'en-GB');
+  const {
+    results,
+    filteredResults,
+    packagingAccoResults,
+    filteredPackagingAccoResults,
+    isLoading,
+    flightsLoading,
+    initialFilters,
+    filters,
+    flightFilters,
+    selectedSortType,
+    selectedFlightSortType,
+    selectedSearchResult,
+    selectedPackagingAccoResultCode,
+    flyInIsOpen,
+    packagingAccoSearchDetails,
+    editablePackagingEntry,
+    transactionId,
+    flyInType,
+    packagingFlightResults,
+    confirmedExcursionsByDay,
+    bookPackagingEntry
+  } = useSelector((state: SearchResultsRootState) => state.searchResults);
+  const isMobile = useMediaQuery('(max-width: 1200px)');
+  const [initialFiltersSet, setInitialFiltersSet] = useState(false);
+  const [initialFlightFiltersSet, setInitialFlightFiltersSet] = useState(false);
+  const [filtersOpen, setFiltersOpen] = useState(false);
+  const [detailsIsLoading, setDetailsIsLoading] = useState(false);
+  const [pricesAreLoading, setPricesAreLoading] = useState(false);
+  const [itineraryIsLoading, setItineraryIsLoading] = useState(false);
+  const [itineraryOpen, setItineraryOpen] = useState(false);
+  const [isBookingConfirmation, setIsBookingConfirmation] = useState(false);
+  const [selectedAccommodationSeed, setSelectedAccommodationSeed] = useState<SearchSeed | null>(null);
+  const skipInitialPackagingAccoDetailsRef = useRef(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 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 buildSearchFromSeed = (seed: SearchSeed): BookingPackageRequest<BookingPackageSearchRequest> => {
+    const country = seed.country;
+    const region = seed.region;
+    const oord = seed.oord;
+    const city = seed.location;
+    const hotel = seed.hotel;
+    const tagId = seed.tagId;
+    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;
+    }
+    return {
+      officeId: 1,
+      agentId: context?.agentId,
+      payload: {
+        catalogueIds: context!.searchConfiguration.defaultCatalogueId
+          ? [context!.searchConfiguration.defaultCatalogueId]
+          : context?.tideConnection?.catalogueIds ?? [1],
+        serviceType:
+          context!.searchConfiguration.qsmType === PortalQsmType.Accommodation || context!.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight
+            ? ACCOMMODATION_SERVICE_TYPE
+            : context!.searchConfiguration.qsmType === PortalQsmType.Flight
+            ? FLIGHT_SERVICE_TYPE
+            : context!.searchConfiguration.qsmType === PortalQsmType.RoundTrip
+            ? GROUP_TOUR_SERVICE_TYPE
+            : undefined,
+        searchType: context!.searchConfiguration.qsmType === PortalQsmType.GroupTour ? 1 : 0,
+        destination: {
+          id: Number(destinationId),
+          isCountry: destinationIsCountry,
+          isRegion: destinationIsRegion,
+          isOord: destinationIsOord,
+          isLocation: destinationIsLocation
+        } as BookingPackageDestination,
+        rooms: seed.rooms,
+        fromDate: seed.fromDate,
+        toDate: seed.toDate,
+        earliestFromOffset: 0,
+        latestToOffset: 0,
+        includeFlights: context!.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight,
+        useExactDates: context?.searchConfiguration.qsmType === PortalQsmType.GroupTour ? false : true,
+        onlyCachedResults: false,
+        includeAllAllotments: true,
+        productIds: hotel ? [hotel] : [],
+        productTagIds: tagId ? [tagId] : []
+      }
+    };
+  };
+  const buildPackagingAccommodationRequestFromSeed = (seed: SearchSeed, currentTransactionId: string): PackagingAccommodationRequest => {
+    const country = seed.country;
+    const region = seed.region;
+    const oord = seed.oord;
+    const city = seed.location;
+    const hotelCode = seed.hotelCode ?? (seed.hotel ? seed.hotel.toString() : '');
+    const tagId = seed.tagId;
+    const destinationAirport = seed.destinationAirport;
+    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 (city) {
+      destinationId = city;
+      destinationIsLocation = true;
+    } else if (oord) {
+      destinationId = oord;
+      destinationIsOord = true;
+    } else if (region) {
+      destinationId = region;
+      destinationIsRegion = true;
+    } else if (country) {
+      destinationId = country;
+      destinationIsCountry = true;
+    } else if (destinationAirport) {
+      destinationCode = destinationAirport;
+      destinationIsAirport = true;
+    }
+    return {
+      transactionId: currentTransactionId,
+      officeId: context?.tideConnection?.officeId ?? 1,
+      agentId: context?.agentId ?? null,
+      catalogueId: context!.searchConfiguration.defaultCatalogueId ?? first(context?.tideConnection?.catalogueIds) ?? 1,
+      searchConfigurationId: context!.searchConfiguration.id,
+      language: context!.languageCode ?? 'en-GB',
+      serviceType: ACCOMMODATION_SERVICE_TYPE,
+      fromDate: seed.fromDate,
+      toDate: seed.toDate,
+      destination: {
+        id: Number(destinationId),
+        isCountry: destinationIsCountry,
+        isRegion: destinationIsRegion,
+        isOord: destinationIsOord,
+        isLocation: destinationIsLocation,
+        isAirport: destinationIsAirport,
+        code: destinationCode
+      } as PackagingDestination,
+      productCode: '',
+      rooms: getPackagingRequestRoomsFromBookingRooms(seed.rooms),
+      tagIds: tagId ? [tagId] : []
+    };
+  };
+  const buildPackagingFlightRequestFromSeed = (seed: SearchSeed, currentTransactionId: string): FlightSearchRequest => {
+    if (typeof window !== 'undefined') {
+      window.scrollTo(0, 0);
+    }
+    var adults = seed.rooms.flatMap((x) => x.pax).filter((x) => x.age! >= 12).length;
+    var kids = seed.rooms.flatMap((x) => x.pax).filter((x) => x.age! >= 2 && x.age! < 12).length;
+    var babies = seed.rooms.flatMap((x) => x.pax).filter((x) => x.age! < 2).length;
+    return {
+      transactionId: currentTransactionId,
+      officeId: context?.tideConnection?.officeId ?? 1,
+      catalogueId: context!.searchConfiguration.defaultCatalogueId ?? first(context?.tideConnection?.catalogueIds) ?? 1,
+      departureAirportCode: seed.departureAirport,
+      arrivalAirportCode: seed.destinationAirport,
+      returnAirportCode: seed.returnAirport,
+      luggageIncluded: null,
+      maxStops: null,
+      travelClass: seed.travelClass,
+      pax: concat(
+        Array.from({ length: adults ?? 0 }, (_, index) => ({
+          id: index,
+          age: 31
+        })),
+        Array.from({ length: kids ?? 0 }, (_, index) => ({
+          id: index + (adults ?? 0),
+          age: 8
+        })),
+        Array.from({ length: babies ?? 0 }, (_, index) => ({
+          id: index + (adults ?? 0) + (kids ?? 0),
+          age: 1
+        }))
+      ),
+      outward: seed.fromDate ? { date: dateToDateStruct(new Date(seed.fromDate)) } : null,
+      return: seed.toDate ? { date: dateToDateStruct(new Date(seed.toDate)) } : null
+    } as FlightSearchRequest;
+  };
+  const buildSearchSeedFromQueryParams = (params: URLSearchParams): SearchSeed | null => {
+    const from = getDateFromParams(params, 'fromDate');
+    const to = getDateFromParams(params, 'toDate');
+    const rooms = getRoomsFromParams(params, 'rooms');
+    const country = getNumberFromParams(params, 'country');
+    const region = getNumberFromParams(params, 'region');
+    const oord = getNumberFromParams(params, 'oord');
+    const city = getNumberFromParams(params, 'location');
+    const hotel = getNumberFromParams(params, 'hotel');
+    const tagId = getNumberFromParams(params, 'tagId');
+    const destinationAirport = getStringFromParams(params, 'destinationAirport');
+    const departureAirport = getStringFromParams(params, 'departureAirport');
+    const travelClass = getStringFromParams(params, 'travelClass');
+    const nationality = getStringFromParams(params, 'nationality');
+    if (!from || !to) {
+      return null;
+    }
+    return {
+      fromDate: from,
+      toDate: to,
+      country,
+      region,
+      oord,
+      location: city,
+      hotel,
+      hotelCode: hotel ? hotel.toString() : null,
+      tagId,
+      destinationAirport,
+      departureAirport,
+      travelClass,
+      nationality,
+      rooms: getRequestRooms(rooms)
+    };
+  };
+  const buildSearchSeedFromAccommodationSegments = (entry: PackagingEntry, segments: PackagingEntryLine[]): SearchSeed | null => {
+    if (!segments?.length) return null;
+    const sortedSegments = [...segments].sort((a, b) => new Date(a.from).getTime() - new Date(b.from).getTime());
+    const firstSegment = first(sortedSegments);
+    const lastSegment = last(sortedSegments);
+    if (!firstSegment || !lastSegment) return null;
+    return {
+      fromDate: toDateOnlyString(firstSegment.from),
+      toDate: toDateOnlyString(lastSegment.to),
+      country: firstSegment.country?.id ?? null,
+      region: firstSegment.region?.id ?? null,
+      oord: firstSegment.oord?.id ?? null,
+      location: firstSegment.location?.id ?? null,
+      hotel: parseHotelId(firstSegment),
+      hotelCode: firstSegment.productCode ?? null,
+      tagId: null,
+      destinationAirport: getDestinationAirportFromEntry(entry.lines ?? []),
+      departureAirport: getDepartureAirportFromEntry(entry.lines ?? []),
+      rooms: getRequestRoomsFromPackagingSegments(entry, sortedSegments)
+    };
+  };
+  const handleEditAccommodation = async (segments: PackagingEntryLine[]) => {
+    const sourceEntry = editablePackagingEntry ?? context?.packagingEntry;
+    if (!sourceEntry) return;
+    const seed = buildSearchSeedFromAccommodationSegments(sourceEntry, segments);
+    if (!seed) return;
+    setDetailsIsLoading(true);
+    setSelectedAccommodationSeed(seed);
+    dispatch(setFlyInType('acco-results'));
+    handleFlyInToggle(true);
+    const currentTransactionId = await getOrCreateTransactionId();
+    await runAccommodationFlow(seed, currentTransactionId ?? '');
+    setDetailsIsLoading(false);
+  };
+  const handleConfirmHotelSwap = () => {
+    const updatedEntry = swapHotelInPackagingEntry();
+    if (!updatedEntry) return;
+    dispatch(setEditablePackagingEntry(updatedEntry));
+    handleFlyInToggle(false);
+  };
+  const swapHotelInPackagingEntry = (): PackagingEntry | null => {
+    const sourceEntry = editablePackagingEntry ?? context?.packagingEntry;
+    const details = packagingAccoSearchDetails;
+    if (!sourceEntry || !details?.length) return null;
+    const selectedOptionsPerRoom = getSelectedOptionsPerRoom(details);
+    if (!selectedOptionsPerRoom.length) return null;
+    const selectedHotel = details[0];
+    let roomIndex = 0;
+    const updatedLines = sourceEntry.lines.map((line) => {
+      if (line.serviceType !== ACCOMMODATION_SERVICE_TYPE) {
+        return line;
+      }
+      const selectedRoom = selectedOptionsPerRoom.find((x) => x.roomIndex === roomIndex);
+      const selectedOption = selectedRoom?.option;
+      roomIndex++;
+      if (!selectedOption) {
+        return line;
+      }
+      return {
+        ...line,
+        guid: selectedOption.guid,
+        productName: selectedHotel.name,
+        productCode: selectedHotel.code,
+        accommodationName: selectedOption.accommodationName,
+        accommodationCode: selectedOption.accommodationCode,
+        regimeName: selectedOption.regimeName,
+        regimeCode: selectedOption.regimeCode,
+        country: line.country
+          ? { ...line.country, id: selectedHotel.countryId ?? line.country.id, name: selectedHotel.countryName ?? line.country.name }
+          : selectedHotel.countryId
+          ? { id: selectedHotel.countryId, name: selectedHotel.countryName, localizations: [] }
+          : line.country,
+        region: line.region
+          ? { ...line.region, id: selectedHotel.regionId ?? line.region.id, name: selectedHotel.regionName ?? line.region.name }
+          : selectedHotel.regionId
+          ? { id: selectedHotel.regionId, name: selectedHotel.regionName, localizations: [] }
+          : line.region,
+        oord: line.oord
+          ? { ...line.oord, id: selectedHotel.oordId ?? line.oord.id, name: selectedHotel.oordName ?? line.oord.name }
+          : selectedHotel.oordId
+          ? { id: selectedHotel.oordId, name: selectedHotel.oordName, localizations: [] }
+          : line.oord,
+        location: line.location
+          ? { ...line.location, id: selectedHotel.locationId ?? line.location.id, name: selectedHotel.locationName ?? line.location.name }
+          : selectedHotel.locationId
+          ? { id: selectedHotel.locationId, name: selectedHotel.locationName, localizations: [] }
+          : line.location,
+        latitude: selectedHotel.latitude ?? line.latitude,
+        longitude: selectedHotel.longitude ?? line.longitude,
+        from: selectedHotel.fromDate ?? line.from,
+        to: selectedHotel.toDate ?? line.to,
+        isChanged: true
+      };
+    });
+    return {
+      ...sourceEntry,
+      lines: updatedLines
+    };
+  };
+  const activeSearchSeed = React.useMemo(() => {
+    if (selectedAccommodationSeed) {
+      return selectedAccommodationSeed;
+    }
+    if (typeof window === 'undefined') return null;
+    const params = new URLSearchParams(window.location.search);
+    return buildSearchSeedFromQueryParams(params);
+  }, [selectedAccommodationSeed, currentSearch]);
+  useEffect(() => {
+    if (typeof document !== 'undefined') {
+      document.body.classList.toggle('has-overlay', filtersOpen);
+    }
+  }, [filtersOpen]);
+  const getOrCreateTransactionId = async (): Promise<string | null> => {
+    if (context?.packagingEntry?.transactionId) {
+      return context.packagingEntry.transactionId;
+    }
+    if (transactionId) {
+      return transactionId;
+    }
+    return await runStartTransaction();
+  };
+  const runSearch = async () => {
+    try {
+      if (!context) return;
+      dispatch(setIsLoading(true));
+      const config: TideClientConfig = {
+        host: context.tideConnection.host,
+        apiKey: context.tideConnection.apiKey
+      };
+      const seed = activeSearchSeed;
+      if (!seed) {
+        throw new Error('Invalid search parameters');
+      }
+      const searchRequest = buildSearchFromSeed(seed);
+      const packageSearchResults = await search(config, searchRequest);
+      const enrichedFilters = enrichFiltersWithResults(packageSearchResults, context.filters, context.tags ?? []);
+      if (!initialFiltersSet) {
+        dispatch(resetFilters(enrichedFilters));
+        dispatch(setInitialFilters(enrichedFilters));
+        setInitialFiltersSet(true);
+      }
+      dispatch(setResults(packageSearchResults));
+      const initialFilteredResults = applyFilters(packageSearchResults, filters, null);
+      dispatch(setFilteredResults(initialFilteredResults));
+      if (packageSearchResults?.length > 0) {
+        if (context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight) {
+          dispatch(setSelectedSearchResult(packageSearchResults[0]));
+        }
+      }
+    } catch (err) {
+      console.error('Search failed', err);
+    } finally {
+      dispatch(setIsLoading(false));
+    }
+  };
+  const runStartTransaction = async (): Promise<string | null> => {
+    try {
+      if (!context) return null;
+      dispatch(setIsLoading(true));
+      const config: TideClientConfig = {
+        host: context.tideConnection.host,
+        apiKey: context.tideConnection.apiKey
+      };
+      const transaction = await startTransaction(config);
+      dispatch(setTransactionId(transaction.transactionId));
+      dispatch(setIsLoading(false));
+      return transaction.transactionId;
+    } catch (err) {
+      console.error('Transaction failed', err);
+      dispatch(setIsLoading(false));
+      return null;
+    }
+  };
+  const runHotelSearch = async (currentTransactionId: string, seed: SearchSeed) => {
+    try {
+      if (!context) return;
+      dispatch(setIsLoading(true));
+      const config: TideClientConfig = {
+        host: context.tideConnection.host,
+        apiKey: context.tideConnection.apiKey
+      };
+      let searchRequest: PackagingAccommodationRequest = buildPackagingAccommodationRequestFromSeed(seed, currentTransactionId);
+      searchRequest.portalId = context.portalId;
+      searchRequest.agentId = context.agentId;
+      const packageAccoSearchResults = await searchPackagingAccommodations(config, searchRequest);
+      const enrichedFilters = enrichFiltersWithPackageAccoResults(packageAccoSearchResults, context.tags ?? []);
+      if (!initialFiltersSet) {
+        dispatch(resetFilters(enrichedFilters));
+        setInitialFilters(enrichedFilters);
+        setInitialFiltersSet(true);
+      }
+      dispatch(setPackagingAccoResults(packageAccoSearchResults));
+      const initialFilteredResults = applyFiltersToPackageAccoResults(packageAccoSearchResults, filters, null);
+      dispatch(setFilteredPackagingAccoResults(initialFilteredResults));
+      if (initialFilteredResults.length > 0) {
+        skipInitialPackagingAccoDetailsRef.current = true;
+        dispatch(setSelectedPackagingAccoResult(first(initialFilteredResults)?.code ?? null));
+      }
+      dispatch(setIsLoading(false));
+    } catch (err) {
+      console.error('HotelSearch failed', err);
+      dispatch(setIsLoading(false));
+    }
+  };
+  const runAccommodationFlow = async (seed: SearchSeed, currentTransactionId: string) => {
+    if (!context || context.showMockup) return;
+    await runHotelSearch(currentTransactionId, seed);
+  };
+  const runFlightSearch = async (currentTransactionId: string, seed: SearchSeed) => {
+    try {
+      if (!context) return;
+      dispatch(setFlightsLoading(true));
+      const config: TideClientConfig = {
+        host: context.tideConnection.host,
+        apiKey: context.tideConnection.apiKey
+      };
+      let searchRequest: FlightSearchRequest = buildPackagingFlightRequestFromSeed(seed, currentTransactionId);
+      searchRequest.agentId = context.agentId;
+      const packageFlightSearchResults = await searchPackagingFlights(config, searchRequest);
+      const enrichedFilters = enrichFiltersWithPackageFlightResults(packageFlightSearchResults, context.tags ?? [], translations);
+      if (!initialFlightFiltersSet) {
+        dispatch(resetFlightFilters(enrichedFilters));
+        dispatch(setInitialFlightFilters(enrichedFilters));
+        setInitialFlightFiltersSet(true);
+      }
+      dispatch(setPackagingFlightResults(packageFlightSearchResults));
+      const initialFilteredResults = applyFiltersToPackageFlightResults(packageFlightSearchResults, filters, null);
+      dispatch(setFilteredPackagingFlightResults(initialFilteredResults));
+      if (initialFilteredResults.length > 0) {
+        const firstResult = first(packageFlightSearchResults);
+        if (firstResult) {
+          dispatch(setSelectedOutwardKey(getFlightKey(firstResult.outward.segments)));
+          dispatch(setSelectedReturnKey(getFlightKey(firstResult.return.segments)));
+        }
+      }
+      dispatch(setFlightsLoading(false));
+    } catch (err) {
+      console.error('FlightSearch failed', err);
+      dispatch(setFlightsLoading(false));
+    }
+  };
+  const runFlightFlow = async (seed: SearchSeed, currentTransactionId: string) => {
+    if (!context || context.showMockup) return;
+    await runFlightSearch(currentTransactionId, seed);
+  };
+  // separate Search
+  useEffect(() => {
+    if (
+      context?.searchConfiguration.qsmType === PortalQsmType.GroupTour ||
+      (context?.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && !context.searchConfiguration.enableManualPackaging)
+    ) {
+      runSearch();
+    }
+    if (context?.searchConfiguration.qsmType === PortalQsmType.Accommodation) {
+      const seed = activeSearchSeed;
+      if (seed) {
+        (async () => {
+          const transactionId = await getOrCreateTransactionId();
+          if (!transactionId) return;
+          await runAccommodationFlow(seed, transactionId);
+        })();
+      }
+    }
+    if (
+      context?.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight &&
+      context.searchConfiguration.enableManualPackaging &&
+      !context?.packagingEntry
+    ) {
+      const seed = activeSearchSeed;
+      if (seed) {
+        (async () => {
+          const sharedTransactionId = await getOrCreateTransactionId();
+          if (!sharedTransactionId) return;
+          const tasks: Promise<void>[] = [];
+          if (context.searchConfiguration.allowAccommodations) {
+            tasks.push(runAccommodationFlow(seed, sharedTransactionId));
+          }
+          if (context.searchConfiguration.allowFlights) {
+            tasks.push(runFlightFlow(seed, sharedTransactionId));
+          }
+          await Promise.all(tasks);
+        })();
+      }
+    }
+  }, [
+    location.search,
+    context?.showMockup,
+    context?.searchConfiguration.qsmType,
+    context?.searchConfiguration.enableManualPackaging,
+    context?.searchConfiguration.allowAccommodations,
+    context?.packagingEntry?.transactionId,
+    activeSearchSeed
+  ]);
+  useEffect(() => {
+    if (context?.packagingEntry) {
+      dispatch(setEditablePackagingEntry(structuredClone(context.packagingEntry)));
+      dispatch(setTransactionId(context.packagingEntry.transactionId));
+      const params = new URLSearchParams(location.search);
+      const bookingConfirmation = getStringFromParams(params, 'bookingConfirmation');
+      console.log('bookingConfirmation', bookingConfirmation);
+      if (bookingConfirmation == 'true') {
+        setIsBookingConfirmation(true);
+        dispatch(setBookPackagingEntry(true));
+      }
+    }
+  }, [context?.packagingEntry]);
+  useEffect(() => {
+    if (bookPackagingEntry && onBookingStarted) {
+      onBookingStarted();
+    }
+  }, [bookPackagingEntry, onBookingStarted]);
+  // separate detailsCall
+  useEffect(() => {
+    const fetchDetails = async () => {
+      if (!selectedSearchResult || !context) return;
+      setDetailsIsLoading(true);
+      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;
+        }
+        let requestRooms: BookingPackageRequestRoom[];
+        if (context?.packagingEntry) {
+          requestRooms = getRequestRoomsFromPackagingEntry(context.packagingEntry);
+        } else {
+          const seed = activeSearchSeed;
+          requestRooms = seed?.rooms?.length ? seed.rooms : getRequestRooms(null);
+        }
+        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
+        };
+        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 (skipInitialPackagingAccoDetailsRef.current) {
+        skipInitialPackagingAccoDetailsRef.current = false;
+        return;
+      }
+      setDetailsIsLoading(true);
+      if (
+        context?.searchConfiguration.qsmType === PortalQsmType.Accommodation ||
+        context?.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight ||
+        context?.searchConfiguration.qsmType === PortalQsmType.GroupTour
+      ) {
+        handleFlyInToggle(true);
+        dispatch(setFlyInType('acco-details'));
+      }
+      try {
+        const config: TideClientConfig = {
+          host: context.tideConnection.host,
+          apiKey: context.tideConnection.apiKey
+        };
+        const selectedItem = packagingAccoResults.find((r) => r.code === selectedPackagingAccoResultCode);
+        if (!selectedItem) {
+          // TODO: handle this case better, show an error message to the user
+          return;
+        }
+        const seed = activeSearchSeed;
+        const tagId = seed?.tagId ?? null;
+        const destinationAirport = seed?.destinationAirport ?? null;
+        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 = {
+          transactionId: transactionId ?? '',
+          officeId: 1,
+          portalId: context.portalId,
+          agentId: context.agentId,
+          catalogueId: context!.searchConfiguration.defaultCatalogueId ?? first(context?.tideConnection?.catalogueIds) ?? 1,
+          searchConfigurationId: context!.searchConfiguration.id,
+          vendorConfigurationId: selectedItem.vendorId,
+          language: context!.languageCode ?? 'en-GB',
+          serviceType: ACCOMMODATION_SERVICE_TYPE,
+          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: getPackagingRequestRoomsFromBookingRooms(seed?.rooms ?? null),
+          tagIds: tagId ? [tagId] : []
+        };
+        const packageAccoSearchDetails = await searchPackagingAccommodations(config, detailSearchRequest);
+        dispatch(setPackagingAccoSearchDetails(packageAccoSearchDetails));
+        setDetailsIsLoading(false);
+      } catch (err) {
+        console.error('Failed to fetch package details', err);
+        setDetailsIsLoading(false);
+      }
+    };
+    if (selectedSearchResult) {
+      fetchDetails();
+    }
+    if (selectedPackagingAccoResultCode) {
+      fetchPackagingAccoSearchDetails();
+    }
+  }, [selectedSearchResult, selectedPackagingAccoResultCode]);
+  useEffect(() => {
+    if (context?.searchConfiguration.qsmType === PortalQsmType.Accommodation || context?.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight) {
+      const filteredPackageAccoResults = applyFiltersToPackageAccoResults(packagingAccoResults, filters, selectedSortType);
+      dispatch(setFilteredPackagingAccoResults(filteredPackageAccoResults));
+    } else {
+      const filteredResults = applyFilters(results, filters, selectedSortType);
+      dispatch(setFilteredResults(filteredResults));
+    }
+  }, [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]);
+  useEffect(() => {
+    const fetchPriceDetails = async () => {
+      if (!context || !editablePackagingEntry || isEmpty(editablePackagingEntry.lines)) return;
+      setPricesAreLoading(true);
+      try {
+        const config: TideClientConfig = {
+          host: context.tideConnection.host,
+          apiKey: context.tideConnection.apiKey
+        };
+        const request = {
+          language: context.languageCode ?? 'en-GB',
+          officeId: context.tideConnection.officeId,
+          catalogueId: context!.searchConfiguration.defaultCatalogueId ?? first(context?.tideConnection?.catalogueIds) ?? 1,
+          agentId: context.agentId,
+          payload: editablePackagingEntry
+        } as PackagingRequestBase<PackagingEntry>;
+        const priceDetails = await getPriceDetails(config, request);
+        dispatch(setPriceDetails(priceDetails));
+        setPricesAreLoading(false);
+      } catch (err) {
+        console.error('Error fetching price details', err);
+        setPricesAreLoading(false);
+      }
+    };
+    const fetchItinerary = async () => {
+      if (!context || !context.packagingEntry || !editablePackagingEntry || isEmpty(editablePackagingEntry.lines)) return;
+      setItineraryIsLoading(true);
+      try {
+        const config: TideClientConfig = {
+          host: context.tideConnection.host,
+          apiKey: context.tideConnection.apiKey
+        };
+        const request = {
+          language: context.languageCode ?? 'en-GB',
+          officeId: context.tideConnection.officeId,
+          catalogueId: context!.searchConfiguration.defaultCatalogueId ?? first(context?.tideConnection?.catalogueIds) ?? 1,
+          agentId: context.agentId,
+          payload: editablePackagingEntry
+        } as PackagingRequestBase<PackagingEntry>;
+        const itinerary = await getItinerary(config, request);
+        dispatch(setItinerary(itinerary));
+        setItineraryIsLoading(false);
+      } catch (err) {
+        console.error('Error fetching itinerary', err);
+        setItineraryIsLoading(false);
+      }
+    };
+    fetchPriceDetails();
+    fetchItinerary();
+  }, [editablePackagingEntry]);
+  // Flight selection
+  // 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) {
+      dispatch(setSelectedReturnKey(null));
+      return;
+    }
+    const matchingCombinations = packagingFlightResults.filter((flight) => getFlightKey(flight.outward.segments) === selectedOutwardKey);
+    const returnMap = new Map<string, PackagingFlightResponse>();
+    matchingCombinations.forEach((flight) => {
+      const key = getFlightKey(flight.return.segments);
+      if (!returnMap.has(key)) {
+        returnMap.set(key, flight);
+      }
+    });
+    const returns = Array.from(returnMap.values());
+    const segments = first(returns)?.return.segments;
+    const firstReturnKey = returns.length > 0 && segments ? getFlightKey(segments) : null;
+    if (!returns.some((x) => getFlightKey(x.return.segments) === selectedReturnKey)) {
+      dispatch(setSelectedReturnKey(firstReturnKey));
+    }
+  }, [selectedOutwardKey, packagingFlightResults, selectedReturnKey, dispatch]);
+  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(() => {
+  //   if (!selectedCombinationFlight) return;
+  //   dispatch(setSelectedPackagingFlight(selectedCombinationFlight));
+  //   // onFlightSearch(selectedCombinationFlight); // Trigger search to update accommodation options based on selected flight
+  //   dispatch(setFlyInIsOpen(true));
+  // }, [selectedCombinationFlight, dispatch]);
+  // Build packagingEntry
+  useEffect(() => {
+    if (!context) return;
+    const seed = activeSearchSeed;
+    if (!seed) return;
+    const nextEntry = buildOrUpdatePackagingEntryPartial({
+      sourceEntry: editablePackagingEntry ?? context.packagingEntry ?? null,
+      selectedHotelCode: selectedPackagingAccoResultCode,
+      accommodationResults: packagingAccoResults,
+      selectedFlight: selectedCombinationFlight ?? null,
+      confirmedExcursionsByDay,
+      seed,
+      transactionId: transactionId ?? context.packagingEntry?.transactionId ?? '',
+      language: context.languageCode ?? 'en-GB'
+    });
+    if (!nextEntry) return;
+    dispatch(setEditablePackagingEntry(nextEntry));
+    if (selectedCombinationFlight) {
+      dispatch(setSelectedPackagingFlight(selectedCombinationFlight));
+    }
+  }, [
+    context,
+    activeSearchSeed,
+    selectedPackagingAccoResultCode,
+    packagingAccoResults,
+    packagingAccoSearchDetails,
+    selectedCombinationFlight,
+    confirmedExcursionsByDay,
+    transactionId,
+    dispatch
+  ]);
+  const removeAccommodationLines = (lines: PackagingEntryLine[]) => lines.filter((line) => line.serviceType !== ACCOMMODATION_SERVICE_TYPE);
+  const removeFlightLines = (lines: PackagingEntryLine[]) => lines.filter((line) => line.serviceType !== FLIGHT_SERVICE_TYPE);
+  const removeExcursionLines = (lines: PackagingEntryLine[]) => lines.filter((line) => line.serviceType !== EXCURSION_SERVICE_TYPE);
+  const buildAccommodationLinesFromSelection = (selectedHotel: PackagingAccommodationResponse, seed: SearchSeed): PackagingEntryLine[] => {
+    return buildPackagingAccommodationLines(selectedHotel, seed, ACCOMMODATION_SERVICE_TYPE);
+  };
+  const buildExcursionLinesFromConfirmedDays = (confirmedExcursionsByDay: Record<string, PackagingAccommodationResponse[]>): PackagingEntryLine[] => {
+    return Object.values(confirmedExcursionsByDay)
+      .flat()
+      .flatMap((excursion) => {
+        const selectedOptions = excursion.rooms.flatMap((room) => room.options.filter((option) => option.isSelected));
+        const parentGuid = crypto.randomUUID();
+        return selectedOptions.map(
+          (option, index) =>
+            ({
+              guid: option.guid ?? crypto.randomUUID(),
+              moment: '',
+              parentGuid: index === 0 ? null : parentGuid,
+              order: index,
+              isChanged: true,
+              from: excursion.fromDate,
+              to: excursion.toDate,
+              serviceType: EXCURSION_SERVICE_TYPE,
+              productName: excursion.name,
+              productCode: excursion.code,
+              accommodationName: option.accommodationName,
+              accommodationCode: option.accommodationCode,
+              regimeName: option.regimeName,
+              regimeCode: option.regimeCode,
+              country: excursion.countryId ? { id: excursion.countryId, name: excursion.countryName, localizations: [] } : null,
+              region: excursion.regionId ? { id: excursion.regionId, name: excursion.regionName, localizations: [] } : null,
+              oord: excursion.oordId ? { id: excursion.oordId, name: excursion.oordName, localizations: [] } : null,
+              location: excursion.locationId ? { id: excursion.locationId, name: excursion.locationName, localizations: [] } : null,
+              longitude: excursion.longitude ?? null,
+              latitude: excursion.latitude ?? null,
+              pax: Array.isArray(option.paxIds)
+                ? option.paxIds.map((paxId, paxIndex) => ({
+                    paxId: paxId,
+                    room: 0,
+                    order: paxIndex
+                  }))
+                : [],
+              flightInformation: null
+            } satisfies PackagingEntryLine)
+        );
+      });
+  };
+  const buildPackagingAccommodationLines = (selectedItem: PackagingAccommodationResponse, seed: SearchSeed, serviceType: number): PackagingEntryLine[] => {
+    if (!selectedItem) return [];
+    const parentGuid = crypto.randomUUID();
+    return selectedItem.rooms
+      .filter((room) => room.options.some((o) => o.isSelected))
+      .map((room, index) => {
+        const option = room.options.find((o) => o.isSelected)!;
+        const pax = option.paxIds.map((p, paxIndex) => ({
+          paxId: p,
+          room: index,
+          order: paxIndex
+        }));
+        return {
+          guid: option.guid ?? crypto.randomUUID(),
+          moment: '',
+          parentGuid: index === 0 ? null : parentGuid,
+          order: index,
+          isChanged: true,
+          from: selectedItem.fromDate,
+          to: selectedItem.toDate,
+          serviceType: serviceType,
+          productName: selectedItem.name,
+          productCode: selectedItem.code,
+          accommodationName: option.accommodationName,
+          accommodationCode: option.accommodationCode,
+          regimeName: option.regimeName,
+          regimeCode: option.regimeCode,
+          country: selectedItem.countryId ? { id: selectedItem.countryId, name: selectedItem.countryName, localizations: [] } : null,
+          region: selectedItem.regionId ? { id: selectedItem.regionId, name: selectedItem.regionName, localizations: [] } : null,
+          oord: selectedItem.oordId ? { id: selectedItem.oordId, name: selectedItem.oordName, localizations: [] } : null,
+          location: selectedItem.locationId ? { id: selectedItem.locationId, name: selectedItem.locationName, localizations: [] } : null,
+          longitude: selectedItem.longitude ?? null,
+          latitude: selectedItem.latitude ?? null,
+          pax,
+          flightInformation: null
+        } satisfies PackagingEntryLine;
+      });
+  };
+  const toDateOnlyUtcString = (value: string | Date): string => {
+    const date = new Date(value);
+    return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate())).toISOString();
+  };
+  const toTimeOnlyString = (value: string | Date): string => {
+    const date = new Date(value);
+    const hh = String(date.getUTCHours()).padStart(2, '0');
+    const mm = String(date.getUTCMinutes()).padStart(2, '0');
+    const ss = String(date.getUTCSeconds()).padStart(2, '0');
+    return `${hh}:${mm}:${ss}`;
+  };
+  const mapFlightSegmentsToFlightLines = (segments: FlightSearchResponseFlightSegment[]): PackagingEntryLineFlightLine[] =>
+    segments.map((segment) => ({
+      airlineCode: segment.marketingAirlineCode,
+      airlineDescription: segment.marketingAirlineName,
+      operatingAirlineCode: segment.operatingAirlineCode,
+      operatingAirlineDescription: segment.operatingAirlineName,
+      flightNumber: segment.flightNumber,
+      operatingFlightNumber: segment.operatingFlightNumber ?? null,
+      departureDate: toDateOnlyUtcString(segment.departureDateTime),
+      departureTime: toTimeOnlyString(segment.departureDateTime),
+      departureAirportCode: segment.departureAirportCode,
+      departureAirportDescription: segment.departureAirportName,
+      arrivalDate: toDateOnlyUtcString(segment.arrivalDateTime),
+      arrivalTime: toTimeOnlyString(segment.arrivalDateTime),
+      arrivalAirportCode: segment.arrivalAirportCode,
+      arrivalAirportDescription: segment.arrivalAirportName,
+      durationInTicks: segment.durationInTicks
+    }));
+  const buildFlightLabel = (segments: FlightSearchResponseFlightSegment[]) => {
+    const firstSegment = first(segments);
+    const lastSegment = last(segments);
+    if (!firstSegment || !lastSegment) {
+      return { productName: 'Flight', productCode: 'FLIGHT' };
+    }
+    return {
+      productName: `${firstSegment.departureAirportName} - ${lastSegment.arrivalAirportName} (${firstSegment.marketingAirlineName})`,
+      productCode: `${firstSegment.departureAirportCode} ${lastSegment.arrivalAirportCode}/${firstSegment.marketingAirlineCode}`
+    };
+  };
+  const buildFlightLinesFromSelection = (selectedFlight: PackagingFlightResponse): PackagingEntryLine[] => {
+    if (!selectedFlight) return [];
+    const outwardSegments = selectedFlight.outward?.segments ?? [];
+    const returnSegments = selectedFlight.return?.segments ?? [];
+    if (!outwardSegments.length || !returnSegments.length) return [];
+    const outwardLabel = buildFlightLabel(outwardSegments);
+    const returnLabel = buildFlightLabel(returnSegments);
+    const outwardFirst = first(outwardSegments);
+    const outwardLast = last(outwardSegments);
+    const returnFirst = first(returnSegments);
+    const returnLast = last(returnSegments);
+    const outwardLine = {
+      guid: selectedFlight.outwardGuid,
+      parentGuid: null,
+      order: 0,
+      isChanged: true,
+      from: outwardFirst?.departureDateTime.toString() ?? '',
+      to: outwardLast?.arrivalDateTime.toString() ?? '',
+      serviceType: FLIGHT_SERVICE_TYPE,
+      productName: outwardLabel.productName,
+      productCode: outwardLabel.productCode,
+      accommodationName: outwardFirst?.metaData?.farePriceClassName,
+      accommodationCode: outwardFirst?.metaData?.fareCode,
+      regimeName: null,
+      regimeCode: null,
+      country: null,
+      region: null,
+      oord: null,
+      location: null,
+      longitude: null,
+      latitude: null,
+      // pax: allPaxAssignments,
+      flightInformation: {
+        pnr: '',
+        flightLines: mapFlightSegmentsToFlightLines(outwardSegments)
+      }
+    } as PackagingEntryLine;
+    const returnLine = {
+      guid: selectedFlight.returnGuid,
+      parentGuid: selectedFlight.outwardGuid,
+      order: 1,
+      isChanged: true,
+      from: returnFirst?.departureDateTime.toString() ?? '',
+      to: returnLast?.departureDateTime.toString() ?? '',
+      serviceType: FLIGHT_SERVICE_TYPE,
+      productName: returnLabel.productName,
+      productCode: returnLabel.productCode,
+      accommodationName: returnFirst?.metaData?.farePriceClassName,
+      accommodationCode: returnFirst?.metaData?.fareCode,
+      regimeName: null,
+      regimeCode: null,
+      country: null,
+      region: null,
+      oord: null,
+      location: null,
+      longitude: null,
+      latitude: null,
+      // pax: allPaxAssignments,
+      flightInformation: {
+        pnr: '',
+        flightLines: mapFlightSegmentsToFlightLines(returnSegments)
+      }
+    } as PackagingEntryLine;
+    return [outwardLine, returnLine];
+  };
+  const buildOrUpdatePackagingEntryPartial = ({
+    sourceEntry,
+    selectedHotelCode,
+    accommodationResults,
+    selectedFlight,
+    confirmedExcursionsByDay,
+    seed,
+    transactionId,
+    language
+  }: BuildPackagingEntryPartialArgs): PackagingEntry | null => {
+    if (!seed?.rooms?.length) return null;
+    const entry = buildBasePackagingEntry(sourceEntry, seed, transactionId, language);
+    let nextLines = [...(entry.lines ?? [])];
+    const selectedHotel = selectedHotelCode ? accommodationResults.find((r) => r.code === selectedHotelCode) : null;
+    // Update accommodation only when enough data exists
+    if (selectedHotel) {
+      const accommodationLines = buildAccommodationLinesFromSelection(selectedHotel, seed);
+      if (accommodationLines.length) {
+        nextLines = removeAccommodationLines(nextLines);
+        nextLines = [...nextLines, ...accommodationLines];
+      }
+    }
+    // Update flights only when full selected combination exists
+    if (selectedFlight) {
+      const flightLines = buildFlightLinesFromSelection(selectedFlight);
+      if (flightLines.length) {
+        nextLines = removeFlightLines(nextLines);
+        nextLines = [...nextLines, ...flightLines];
+      }
+    }
+    // excursions
+    const excursionLines = buildExcursionLinesFromConfirmedDays(confirmedExcursionsByDay);
+    nextLines = removeExcursionLines(nextLines);
+    if (excursionLines.length) {
+      nextLines = [...nextLines, ...excursionLines];
+    }
+    nextLines = nextLines.map((line, index) => ({
+      ...line,
+      order: index
+    }));
+    return {
+      ...entry,
+      language,
+      transactionId,
+      pax: entry.pax,
+      lines: nextLines
+    };
+  };
+  const buildBasePackagingEntry = (
+    sourceEntry: PackagingEntry | null | undefined,
+    seed: SearchSeed,
+    transactionId: string,
+    language: string
+  ): PackagingEntry => {
+    if (sourceEntry) {
+      return structuredClone(sourceEntry);
+    }
+    let paxId = 0;
+    const pax: PackagingEntryPax[] = [];
+    const rooms: PackagingEntryRoom[] = [];
+    seed.rooms?.forEach((room, roomIndex) => {
+      const paxIds = room.pax.map((_, paxIndex) => {
+        const id = paxId++;
+        pax.push({
+          id,
+          firstName: _.firstName || '',
+          lastName: _.lastName || '',
+          dateOfBirth: _.dateOfBirth || null,
+          age: _.age || null,
+          isMainBooker: roomIndex === 0 && paxIndex === 0
+        });
+        return id;
+      });
+      rooms.push({
+        id: roomIndex,
+        paxIds
+      });
+    });
+    return {
+      language,
+      transactionId,
+      dossierNumber: '',
+      status: context?.entryStatus,
+      customStatusId: context?.customEntryStatusId,
+      bookingDate: null,
+      price: 0,
+      depositAmount: 0,
+      pax,
+      rooms,
+      lines: [],
+      address: {} as PackagingEntryAddress
+    } as PackagingEntry;
+  };
+  const handleShowMoreFlights = (flyInType: FlyInType) => {
+    dispatch(setFlyInType(flyInType));
+    dispatch(setFlyInIsOpen(true));
+  };
+  return (
+    <div id="tide-booking" className="search__bg">
+      {context && (
+        <div className="search">
+          {bookPackagingEntry ? (
+            <BookPackagingEntry
+              activeSearchSeed={activeSearchSeed}
+              isLoading={itineraryIsLoading || pricesAreLoading}
+              isConfirmationPage={isBookingConfirmation}
+            />
+          ) : (
+            <div className="search__container">
+              {context.searchConfiguration.qsmType === PortalQsmType.Flight && (
+                <FlightSearchProvider tideConnection={context.tideConnection}>
+                  <FlightResultsContainer isMobile={isMobile} />
+                  <FlyIn
+                    srpType={context.searchConfiguration.qsmType}
+                    isOpen={flyInIsOpen}
+                    setIsOpen={handleFlyInToggle}
+                    onPanelRef={(el) => (panelRef.current = el)}
+                    detailsLoading={detailsIsLoading}
+                    filtersOpen={filtersOpen}
+                  />
+                </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}
+                      setFilters={(filters) => dispatch(setFilters(filters))}
+                      resetFilters={(filters) => dispatch(resetFilters(filters))}
+                    />
+                  )}
+                  {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && (
+                    <Itinerary
+                      isOpen={itineraryOpen}
+                      handleSetIsOpen={() => setItineraryOpen(!itineraryOpen)}
+                      isLoading={isLoading || pricesAreLoading || flightsLoading || itineraryIsLoading}
+                      onEditAccommodation={handleEditAccommodation}
+                    />
+                  )}
+                  {/* ---------------- 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-shopping-cart" className="mobile-filters-button__icon" height={16} />
+                              {translations.SRP.VIEW_BOOKING}
+                            </div>
+                          )}
+                        </div>
+                        {context.searchConfiguration.qsmType !== PortalQsmType.AccommodationAndFlight && 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>
+                    )}
+                    {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>
+                        )}
+                      </div>
+                    )}
+                    <div className="search__results__wrapper">
+                      {context.showTabViews &&
+                        (context.searchConfiguration.qsmType === PortalQsmType.GroupTour ||
+                          context.searchConfiguration.qsmType === PortalQsmType.Accommodation) && <TabViews />}
+                      {context.showRoundTripResults && context.showMockup && <RoundTripResults />}
+                      {context.searchConfiguration.qsmType === PortalQsmType.GroupTour && <GroupTourResults isLoading={isLoading} />}
+                      {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && !context.packagingEntry && context.showFlightResults && (
+                        <>
+                          <div className="search__results__label search__results__label--secondary">
+                            <div className="search__results__label__date">
+                              {(() => {
+                                const firstResultDate = uniqueOutwardFlights.length > 0 ? uniqueOutwardFlights[0].outward.segments[0].departureDateTime : null;
+                                const firstResultDay = firstResultDate ? format(firstResultDate, 'd') : null;
+                                const firstResultMonth = firstResultDate ? format(firstResultDate, 'MMM') : null;
+                                return (
+                                  <>
+                                    <p className="search__results__label__date-date">{firstResultDay}</p>
+                                    <p>{firstResultMonth}</p>
+                                  </>
+                                );
+                              })()}
+                            </div>
+                            <div className="search__results__label__text">
+                              <Icon name="ui-flight" height={16} />
+                              <h3>
+                                {translations.SRP.SELECT} <strong> {translations.SRP.DEPARTURE}</strong>
+                              </h3>
+                            </div>
+                          </div>
+                          {flightsLoading ? (
+                            <Spinner label={translations.SRP.LOADING_FLIGHTS} />
+                          ) : (
+                            <>
+                              <div className="search__results__cards search__results__cards--extended">
+                                {selectedOutwardKey && selectedOutward && (
+                                  <IndependentFlightOption
+                                    key={`flight-${selectedOutwardKey}`}
+                                    item={selectedOutward.outward}
+                                    guid={selectedOutward.outwardGuid}
+                                    onSelect={() => dispatch(setSelectedOutwardKey(null))}
+                                    selectedGuid={selectedOutward.outwardGuid}
+                                    isOutward={true}
+                                    showSelectedState={true}
+                                    price={selectedOutward.price}
+                                  />
+                                )}
+                                {visibleOutwardFlights.map((result) => (
+                                  <IndependentFlightOption
+                                    key={`flight-${result.outwardGuid}`}
+                                    item={result.outward}
+                                    onSelect={() => dispatch(setSelectedOutwardKey(getFlightKey(result.outward.segments)))}
+                                    guid={result.outwardGuid}
+                                    isOutward={true}
+                                    price={result.price}
+                                    currentSelectedPrice={selectedOutward?.price}
+                                  />
+                                ))}
+                              </div>
+                              {uniqueOutwardFlights && uniqueOutwardFlights.length > 3 && (
+                                <div className="search__results__cards__actions">
+                                  <button className="cta cta--secondary" onClick={() => handleShowMoreFlights('flight-outward-results')}>
+                                    {translations.SRP.SHOW_MORE}
+                                  </button>
+                                </div>
+                              )}
+                            </>
+                          )}
+                        </>
+                      )}
+                      {context.showHotelAccommodationResults && !context.packagingEntry && <HotelAccommodationResults isLoading={isLoading} />}
+                      {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && !context.packagingEntry && <DayByDayExcursions />}
+                      {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && !context.packagingEntry && context.showFlightResults && (
+                        <>
+                          <div className="search__results__label search__results__label--secondary">
+                            <div className="search__results__label__date">
+                              {(() => {
+                                const firstResultDate = uniqueReturnFlights.length > 0 ? uniqueReturnFlights[0].return.segments[0].departureDateTime : null;
+                                const firstResultDay = firstResultDate ? format(firstResultDate, 'd') : null;
+                                const firstResultMonth = firstResultDate ? format(firstResultDate, 'MMM') : null;
+                                return (
+                                  <>
+                                    <p className="search__results__label__date-date">{firstResultDay}</p>
+                                    <p>{firstResultMonth}</p>
+                                  </>
+                                );
+                              })()}
+                            </div>
+                            <div className="search__results__label__text">
+                              <Icon name="ui-flight" height={16} />
+                              <h3>
+                                {translations.SRP.SELECT} <strong> {translations.SRP.RETURN}</strong>
+                              </h3>
+                            </div>
+                          </div>
+                          <div className="search__results__cards search__results__cards--extended">
+                            {selectedReturnKey && selectedReturn && (
+                              <IndependentFlightOption
+                                key={`flight-${selectedReturnKey}`}
+                                item={selectedReturn.return}
+                                guid={selectedReturn.outwardGuid}
+                                selectedGuid={selectedReturn.outwardGuid}
+                                isOutward={false}
+                                showSelectedState={true}
+                                price={selectedReturn.price}
+                              />
+                            )}
+                            {uniqueReturnFlights.map((result) => (
+                              <IndependentFlightOption
+                                key={`flight-${result.outwardGuid}`}
+                                item={result.return}
+                                onSelect={() => dispatch(setSelectedReturnKey(getFlightKey(result.return.segments)))}
+                                guid={result.outwardGuid}
+                                isOutward={false}
+                                currentSelectedPrice={selectedReturn?.price}
+                                price={result.price}
+                              />
+                            ))}
+                          </div>
+                        </>
+                      )}
+                      {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && context.packagingEntry && (
+                        <FullItinerary isLoading={itineraryIsLoading} />
+                      )}
+                    </div>
+                  </div>
+                  {/* <button onClick={() => handleFlyInToggle(!flyInIsOpen)}>Toggle FlyIn</button> */}
+                  <FlyIn
+                    srpType={context.searchConfiguration.qsmType}
+                    isOpen={flyInIsOpen}
+                    setIsOpen={handleFlyInToggle}
+                    handleConfirm={() => handleConfirmHotelSwap()}
+                    onPanelRef={(el) => (panelRef.current = el)}
+                    detailsLoading={detailsIsLoading}
+                    flyInType={flyInType}
+                    isPackageEditFlow={!!context.packagingEntry}
+                    sortByTypes={sortByTypes}
+                    activeSearchSeed={activeSearchSeed}
+                    toggleFilters={() => setFiltersOpen(!filtersOpen)}
+                    filtersOpen={filtersOpen}
+                  />
+                </>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+export default SearchResultsContainer;