@qite/tide-booking-component 1.4.98 → 1.4.100

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

@@ -9,21 +9,22 @@ import {
   setIsLoading,
   setSelectedSearchResult,
   setBookingPackageDetails,
-  setEntry,
   setFlyInIsOpen,
   setFilteredResults,
   setPackagingAccoResults,
   setFilteredPackagingAccoResults,
-  setPackagingAccoSearchDetails
+  setPackagingAccoSearchDetails,
+  setEditablePackagingEntry,
+  setTransactionId,
+  setAccommodationFlyInStep,
+  setPriceDetails
 } from '../../store/search-results-slice';
-import { Filter, SortByType } from '../../types';
+import { AccommodationFlyInStep, Filter, SearchSeed, SortByType } from '../../types';
 import useMediaQuery from '../../../shared/utils/use-media-query-util';
 import ItemPicker from '../item-picker';
 import {
   TideClientConfig,
   details,
-  detailsWL,
-  getEntryLight,
   search,
   searchPackagingAccommodations,
   BookingPackageDestination,
@@ -32,16 +33,16 @@ import {
   BookingPackageRequest,
   BookingPackageRequestRoom,
   BookingPackageSearchRequest,
-  EntryLight,
-  EntryRoom,
   PackagingAccommodationRequest,
   PackagingDestination,
-  PackagingRoom,
-  PackagingTraveller,
-  PortalQsmType
+  PortalQsmType,
+  PackagingEntry,
+  startTransaction,
+  PackagingEntryLine,
+  getPriceDetails
 } from '@qite/tide-client';
 import { getDateFromParams, getNumberFromParams, getRoomsFromParams, getStringFromParams } from '../../../shared/utils/query-string-util';
-import { range } from 'lodash';
+import { first, last, range } from 'lodash';
 import { Room } from '../../../booking-wizard/types';
 import Icon from '../icon';
 import Itinerary from '../itinerary';
@@ -61,8 +62,22 @@ import {
   enrichFiltersWithPackageAccoResults,
   enrichFiltersWithResults
 } from '../../utils/search-results-utils';
+import {
+  ACCOMMODATION_SERVICE_TYPE,
+  FLIGHT_SERVICE_TYPE,
+  getDepartureAirportFromEntry,
+  getDestinationAirportFromEntry,
+  getPackagingRequestRoomsFromBookingRooms,
+  getRequestRoomsFromPackagingEntry,
+  GROUP_TOUR_SERVICE_TYPE,
+  parseHotelId,
+  toDateOnlyString
+} from '../../utils/query-utils';
+import { getRequestRoomsFromPackagingSegments, getRoomIndexFromLine, getSelectedOptionsPerRoom } from '../../utils/packaging-utils';
 
 const SearchResultsContainer: React.FC = () => {
+  const currentSearch = typeof window !== 'undefined' ? window.location.search : '';
+
   const dispatch = useDispatch();
 
   const context = useContext(SearchResultsConfigurationContext);
@@ -74,13 +89,16 @@ const SearchResultsContainer: React.FC = () => {
     packagingAccoResults,
     filteredPackagingAccoResults,
     bookingPackageDetails,
-    entry,
     isLoading,
     filters,
     selectedSortType,
     selectedSearchResult,
     selectedPackagingAccoResultCode,
-    flyInIsOpen
+    flyInIsOpen,
+    packagingAccoSearchDetails,
+    editablePackagingEntry,
+    transactionId,
+    accommodationFlyInStep
   } = useSelector((state: SearchResultsRootState) => state.searchResults);
 
   const isMobile = useMediaQuery('(max-width: 1200px)');
@@ -90,9 +108,12 @@ const SearchResultsContainer: React.FC = () => {
   const [filtersOpen, setFiltersOpen] = useState(false);
 
   const [detailsIsLoading, setDetailsIsLoading] = useState(false);
+  const [pricesAreLoading, setPricesAreLoading] = useState(false);
 
   const [itineraryOpen, setItineraryOpen] = useState(false);
 
+  const [selectedAccommodationSeed, setSelectedAccommodationSeed] = useState<SearchSeed | null>(null);
+
   const panelRef = useRef<HTMLDivElement | null>(null);
 
   const sortByTypes: SortByType[] = [
@@ -112,96 +133,43 @@ const SearchResultsContainer: React.FC = () => {
     }
   };
 
-  const buildSearchFromEntry = (entry: EntryLight): BookingPackageRequest<BookingPackageSearchRequest> => {
-    const from = new Date(Math.min(...entry.items.map((i) => i.startDate.getTime()))).toISOString();
-    const to = new Date(Math.max(...entry.items.map((i) => i.endDate.getTime()))).toISOString();
-    const rooms = entry.rooms;
-
-    const hotelItem = entry.items.find((i) => i.productType === 3);
-
-    let country = hotelItem ? hotelItem.countryId : null;
-    let region = hotelItem ? hotelItem.regionId : null;
-    let oord = hotelItem ? hotelItem.oordId : null;
-    let city = hotelItem ? hotelItem.locationId : null;
-    let hotel = hotelItem ? hotelItem.productCode : null;
-
-    if (typeof window !== 'undefined') {
-      window.scrollTo(0, 0);
-    }
-
-    let destinationId: number | null = null;
-    let destinationIsCountry = false;
-    let destinationIsRegion = false;
-    let destinationIsOord = false;
-    let destinationIsLocation = false;
-
-    if (country) {
-      destinationId = country;
-      destinationIsCountry = true;
-    } else if (region) {
-      destinationId = region;
-      destinationIsRegion = true;
-    } else if (oord) {
-      destinationId = oord;
-      destinationIsOord = true;
-    } else if (city) {
-      destinationId = city;
-      destinationIsLocation = true;
+  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];
     }
 
-    var searchRequest = {
-      officeId: 1,
-      agentId: context?.agentId,
-      payload: {
-        catalogueIds: context!.tideConnection.catalogueIds ?? [],
-        serviceType:
-          context!.searchConfiguration.qsmType === PortalQsmType.Accommodation || context!.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight
-            ? 3
-            : context!.searchConfiguration.qsmType === PortalQsmType.Flight
-            ? 7
-            : context!.searchConfiguration.qsmType === PortalQsmType.RoundTrip
-            ? 1
-            : 0,
-        searchType: 0,
-        destination: {
-          id: Number(destinationId),
-          isCountry: destinationIsCountry,
-          isRegion: destinationIsRegion,
-          isOord: destinationIsOord,
-          isLocation: destinationIsLocation
-        } as BookingPackageDestination,
-        rooms: getRequestRoomsFromEntry(rooms),
-        fromDate: from,
-        toDate: to,
-        earliestFromOffset: 0,
-        latestToOffset: 0,
-        includeFlights: true,
-        regimeCodes: entry.items.map((i) => i.regimeCode) || [],
-        useExactDates: true,
-        onlyCachedResults: false,
-        includeAllAllotments: true,
-        productCodes: hotel ? [hotel] : []
-      }
-    };
+    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 searchRequest;
+    return requestRooms;
   };
 
-  const buildSearchFromQueryParams = (params: URLSearchParams): BookingPackageRequest<BookingPackageSearchRequest> | null => {
-    let from = getDateFromParams(params, 'fromDate');
-    let to = getDateFromParams(params, 'toDate');
-    const rooms = getRoomsFromParams(params, 'rooms');
-    let country = getNumberFromParams(params, 'country');
-    let region = getNumberFromParams(params, 'region');
-    let oord = getNumberFromParams(params, 'oord');
-    let city = getNumberFromParams(params, 'location');
-    let hotel = getNumberFromParams(params, 'hotel');
-    let tagId = getNumberFromParams(params, 'tagId');
-
-    if (!from || !to) {
-      console.error('Missing fromDate or toDate in query params, using default values');
-      return null;
-    }
+  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);
@@ -227,18 +195,18 @@ const SearchResultsContainer: React.FC = () => {
       destinationIsLocation = true;
     }
 
-    var searchRequest = {
+    return {
       officeId: 1,
       agentId: context?.agentId,
       payload: {
         catalogueIds: context!.tideConnection.catalogueIds ?? [],
         serviceType:
           context!.searchConfiguration.qsmType === PortalQsmType.Accommodation || context!.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight
-            ? 3
+            ? ACCOMMODATION_SERVICE_TYPE
             : context!.searchConfiguration.qsmType === PortalQsmType.Flight
-            ? 7
+            ? FLIGHT_SERVICE_TYPE
             : context!.searchConfiguration.qsmType === PortalQsmType.RoundTrip
-            ? 1
+            ? GROUP_TOUR_SERVICE_TYPE
             : undefined,
         searchType: context!.searchConfiguration.qsmType === PortalQsmType.GroupTour ? 1 : 0,
         destination: {
@@ -248,19 +216,12 @@ const SearchResultsContainer: React.FC = () => {
           isOord: destinationIsOord,
           isLocation: destinationIsLocation
         } as BookingPackageDestination,
-        rooms: getRequestRooms(rooms),
-        fromDate: from,
-        toDate: to,
+        rooms: seed.rooms,
+        fromDate: seed.fromDate,
+        toDate: seed.toDate,
         earliestFromOffset: 0,
         latestToOffset: 0,
-        includeFlights: context!.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight ? true : false,
-        // regimeCodes:
-        //   filters
-        //     .find((f) => f.property === 'regime')
-        //     ?.options?.filter((o) => o.isChecked)
-        //     .flatMap((o) => o.value.toString()) || [],
-        // minPrice: filters.find((f) => f.property === 'price')?.selectedMin,
-        // maxPrice: filters.find((f) => f.property === 'price')?.selectedMax,
+        includeFlights: context!.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight,
         useExactDates: context?.searchConfiguration.qsmType === PortalQsmType.GroupTour ? false : true,
         onlyCachedResults: false,
         includeAllAllotments: true,
@@ -268,86 +229,16 @@ const SearchResultsContainer: React.FC = () => {
         productTagIds: tagId ? [tagId] : []
       }
     };
-
-    console.log('Built search request from query params', searchRequest);
-
-    return searchRequest;
   };
 
-  const getRequestRoomsFromEntry = (rooms: EntryRoom[] | null) => {
-    if (!rooms) {
-      // Fall back to 2 adults
-      var room = { index: 0, pax: [] } as BookingPackageRequestRoom;
-      range(0, 2).forEach(() => {
-        room.pax.push({
-          age: 30
-        } as BookingPackagePax);
-      });
-      return [room];
-    }
-
-    const requestRooms = rooms?.map((x, i) => {
-      var room = { index: i, pax: [] } as BookingPackageRequestRoom;
-      x.travellers.forEach((p) => {
-        room.pax.push({
-          age: p.age,
-          dateOfBirth: p.dateOfBirth
-        } as BookingPackagePax);
-      });
-
-      return room;
-    });
-
-    return requestRooms;
-  };
-
-  const getRequestRooms = (rooms: Room[] | null) => {
-    if (!rooms) {
-      // Fall back to 2 adults
-      var room = { index: 0, pax: [] } as BookingPackageRequestRoom;
-      range(0, 2).forEach(() => {
-        room.pax.push({
-          age: 30
-        } as BookingPackagePax);
-      });
-      return [room];
-    }
-
-    const requestRooms = rooms?.map((x, i) => {
-      var room = { index: i, pax: [] } as BookingPackageRequestRoom;
-      range(0, x.adults).forEach(() => {
-        room.pax.push({
-          age: 30
-        } as BookingPackagePax);
-      });
-      x.childAges.forEach((x) => {
-        room.pax.push({
-          age: x
-        } as BookingPackagePax);
-      });
-      return room;
-    });
-
-    return requestRooms;
-  };
-
-  const buildPackagingAccommodationRequestFromQueryParams = (params: URLSearchParams): PackagingAccommodationRequest | null => {
-    let from = getDateFromParams(params, 'fromDate');
-    let to = getDateFromParams(params, 'toDate');
-    const rooms = getRoomsFromParams(params, 'rooms');
-    let country = getNumberFromParams(params, 'country');
-    let region = getNumberFromParams(params, 'region');
-    let oord = getNumberFromParams(params, 'oord');
-    let city = getNumberFromParams(params, 'location');
-    let hotel = getNumberFromParams(params, 'hotel');
-    let tagId = getNumberFromParams(params, 'tagId');
-    let agentId = getNumberFromParams(params, 'agentId');
-    let destinationAirport = getStringFromParams(params, 'destinationAirport');
-
-    if (!from || !to) {
-      console.error('Missing fromDate or toDate in query params, using default values');
-      return null;
-    }
+  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);
@@ -361,32 +252,33 @@ const SearchResultsContainer: React.FC = () => {
     let destinationCode: string | null = null;
     let destinationIsAirport = false;
 
-    if (country) {
-      destinationId = country;
-      destinationIsCountry = true;
-    } else if (region) {
-      destinationId = region;
-      destinationIsRegion = true;
+    if (city) {
+      destinationId = city;
+      destinationIsLocation = true;
     } else if (oord) {
       destinationId = oord;
       destinationIsOord = true;
-    } else if (city) {
-      destinationId = city;
-      destinationIsLocation = true;
+    } else if (region) {
+      destinationId = region;
+      destinationIsRegion = true;
+    } else if (country) {
+      destinationId = country;
+      destinationIsCountry = true;
     } else if (destinationAirport) {
       destinationCode = destinationAirport;
       destinationIsAirport = true;
     }
 
-    var searchRequest = {
+    return {
+      transactionId: currentTransactionId,
       officeId: 1,
-      agentId: agentId ?? null,
+      agentId: context?.agentId ?? null,
       catalogueId: context!.searchConfiguration.defaultCatalogueId ?? 0,
       searchConfigurationId: context!.searchConfiguration.id,
       language: context!.languageCode ?? 'en-GB',
-      servicesType: 3, // accommodation
-      fromDate: from,
-      toDate: to,
+      serviceType: ACCOMMODATION_SERVICE_TYPE,
+      fromDate: seed.fromDate,
+      toDate: seed.toDate,
       destination: {
         id: Number(destinationId),
         isCountry: destinationIsCountry,
@@ -396,194 +288,307 @@ const SearchResultsContainer: React.FC = () => {
         isAirport: destinationIsAirport,
         code: destinationCode
       } as PackagingDestination,
-      productCode: hotel ? hotel.toString() : '',
-      rooms: getPackagingRequestRooms(rooms),
+      productCode: '',
+      rooms: getPackagingRequestRoomsFromBookingRooms(seed.rooms),
       tagIds: tagId ? [tagId] : []
     };
+  };
 
-    console.log('Search request for packaging accommodation from query params', searchRequest);
+  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');
 
-    return searchRequest;
+    if (!from || !to) {
+      return null;
+    }
+
+    return {
+      fromDate: from,
+      toDate: to,
+      country,
+      region,
+      oord,
+      location: city,
+      hotel,
+      hotelCode: hotel ? hotel.toString() : null,
+      tagId,
+      destinationAirport,
+      departureAirport,
+      rooms: getRequestRooms(rooms)
+    };
   };
 
-  const getPackagingRequestRooms = (rooms: Room[] | null) => {
-    if (!rooms) {
-      // Fall back to 2 adults
-      var room = { index: 0, travellers: [] } as PackagingRoom;
-      range(0, 2).forEach(() => {
-        room.travellers.push({
-          age: 30
-        } as PackagingTraveller);
-      });
-      return [room];
-    }
+  const handleConfirmHotelSwap = () => {
+    const updatedEntry = swapHotelInPackagingEntry();
+    if (!updatedEntry) return;
 
-    const requestRooms = rooms?.map((x, i) => {
-      var room = { index: i, travellers: [] } as PackagingRoom;
-      range(0, x.adults).forEach(() => {
-        room.travellers.push({
-          age: 30
-        } as PackagingTraveller);
-      });
-      x.childAges.forEach((x) => {
-        room.travellers.push({
-          age: x
-        } as PackagingTraveller);
-      });
-      return room;
+    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 requestRooms;
+    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]);
 
-  // seperate Search
-  useEffect(() => {
-    const runSearch = async () => {
+  const runSearch = async () => {
+    try {
+      if (!context) return;
       dispatch(setIsLoading(true));
-      try {
-        if (!context) {
-          return;
-        }
 
-        const config: TideClientConfig = {
-          host: context.tideConnection.host,
-          apiKey: context.tideConnection.apiKey
-        };
+      const config: TideClientConfig = {
+        host: context.tideConnection.host,
+        apiKey: context.tideConnection.apiKey
+      };
 
-        const params = new URLSearchParams(location.search);
-        let entryId = getStringFromParams(params, 'entryId');
-        let entryLight: EntryLight | null = null;
-        // If entryId is present, we want to fetch the details of that entry and use the details to populate the search results, instead of running a search with the other query params
+      const seed = activeSearchSeed;
+      if (!seed) {
+        throw new Error('Invalid search parameters');
+      }
 
-        let searchRequest: BookingPackageRequest<BookingPackageSearchRequest>;
+      const searchRequest = buildSearchFromSeed(seed);
+      const packageSearchResults = await search(config, searchRequest);
 
-        if (entryId) {
-          entryLight = await getEntryLight(config, entryId);
-          // populate itinerary store
-          dispatch(setEntry({ entry: entryLight }));
-          searchRequest = buildSearchFromEntry(entryLight);
-        } else {
-          const rq = buildSearchFromQueryParams(params);
-          if (!rq) {
-            throw new Error('Invalid search parameters');
-          }
+      const enrichedFilters = enrichFiltersWithResults(packageSearchResults, context.filters, context.tags ?? []);
+      if (!initialFiltersSet) {
+        dispatch(resetFilters(enrichedFilters));
+        setInitialFilters(enrichedFilters);
+        setInitialFiltersSet(true);
+      }
 
-          searchRequest = rq;
+      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]));
         }
-        const packageSearchResults = await search(config, searchRequest);
+      }
+    } catch (err) {
+      console.error('Search failed', err);
+    } finally {
+      dispatch(setIsLoading(false));
+    }
+  };
 
-        console.log('Search results', packageSearchResults);
+  const runStartTransaction = async (): Promise<string | null> => {
+    try {
+      if (!context) return null;
 
-        const enrichedFilters = enrichFiltersWithResults(packageSearchResults, context.filters, context.tags ?? []);
-        if (!initialFiltersSet) {
-          dispatch(resetFilters(enrichedFilters));
-          setInitialFilters(enrichedFilters);
-          setInitialFiltersSet(true);
-        }
+      const config: TideClientConfig = {
+        host: context.tideConnection.host,
+        apiKey: context.tideConnection.apiKey
+      };
 
-        dispatch(setResults(packageSearchResults));
-        const initialFilteredResults = applyFilters(packageSearchResults, filters, null);
-        dispatch(setFilteredResults(initialFilteredResults));
-
-        if (packageSearchResults?.length > 0) {
-          if (entryId) {
-            const matching = packageSearchResults.find((r) => r.productId === entry?.id);
-
-            if (matching) {
-              dispatch(setSelectedSearchResult(matching));
-            }
-          } else {
-            if (context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight) {
-              dispatch(setSelectedSearchResult(packageSearchResults[0]));
-            }
-          }
-        }
+      const transaction = await startTransaction(config);
+      console.log('Transaction started', transaction);
 
-        dispatch(setIsLoading(false));
-      } catch (err) {
-        console.error('Search failed', err);
-        dispatch(setIsLoading(false));
-      }
-    };
+      dispatch(setTransactionId(transaction.transactionId));
+
+      return transaction.transactionId;
+    } catch (err) {
+      console.error('Transaction failed', err);
+      return null;
+    }
+  };
 
-    const runHotelSearch = async () => {
+  const runHotelSearch = async (currentTransactionId: string, seed: SearchSeed) => {
+    try {
+      if (!context) return;
       dispatch(setIsLoading(true));
-      try {
-        if (!context) {
-          return;
-        }
 
-        const config: TideClientConfig = {
-          host: context.tideConnection.host,
-          apiKey: context.tideConnection.apiKey
-        };
+      const config: TideClientConfig = {
+        host: context.tideConnection.host,
+        apiKey: context.tideConnection.apiKey
+      };
 
-        const params = new URLSearchParams(location.search);
+      let searchRequest: PackagingAccommodationRequest = buildPackagingAccommodationRequestFromSeed(seed, currentTransactionId);
+      searchRequest.portalId = context.portalId;
+      searchRequest.agentId = context.agentId;
 
-        let searchRequest: PackagingAccommodationRequest;
+      const packageAccoSearchResults = await searchPackagingAccommodations(config, searchRequest);
 
-        const rq = buildPackagingAccommodationRequestFromQueryParams(params);
-        if (!rq) {
-          throw new Error('Invalid search parameters');
-        }
+      const enrichedFilters = enrichFiltersWithPackageAccoResults(packageAccoSearchResults, context.filters, context.tags ?? []);
+      if (!initialFiltersSet) {
+        dispatch(resetFilters(enrichedFilters));
+        setInitialFilters(enrichedFilters);
+        setInitialFiltersSet(true);
+      }
 
-        searchRequest = rq;
-        searchRequest.portalId = context.portalId;
-        searchRequest.agentId = context.agentId;
+      dispatch(setPackagingAccoResults(packageAccoSearchResults));
+      const initialFilteredResults = applyFiltersToPackageAccoResults(packageAccoSearchResults, filters, null);
+      dispatch(setFilteredPackagingAccoResults(initialFilteredResults));
 
-        const packageAccoSearchResults = await searchPackagingAccommodations(config, searchRequest);
+      dispatch(setIsLoading(false));
+    } catch (err) {
+      console.error('Search failed', err);
+      dispatch(setIsLoading(false));
+    }
+  };
 
-        console.log('package Acco SearchResults', packageAccoSearchResults);
+  const runAccommodationFlow = async (seed: SearchSeed) => {
+    if (!context || context.showMockup) return;
 
-        const enrichedFilters = enrichFiltersWithPackageAccoResults(packageAccoSearchResults, context.filters, context.tags ?? []);
-        if (!initialFiltersSet) {
-          dispatch(resetFilters(enrichedFilters));
-          setInitialFilters(enrichedFilters);
-          setInitialFiltersSet(true);
-        }
+    let currentTransactionId = context?.packagingEntry?.transactionId || transactionId;
+    if (!currentTransactionId) {
+      dispatch(setIsLoading(true));
+      currentTransactionId = await runStartTransaction();
+    }
 
-        dispatch(setPackagingAccoResults(packageAccoSearchResults));
-        const initialFilteredResults = applyFiltersToPackageAccoResults(packageAccoSearchResults, filters, null);
-        dispatch(setFilteredPackagingAccoResults(initialFilteredResults));
+    if (!currentTransactionId) {
+      dispatch(setIsLoading(false));
+      return;
+    }
 
-        dispatch(setIsLoading(false));
-      } catch (err) {
-        console.error('Search failed', err);
-        dispatch(setIsLoading(false));
-      }
-    };
+    await runHotelSearch(currentTransactionId, seed);
+  };
 
-    if (!context?.showMockup) {
-      if (
-        context?.searchConfiguration.qsmType === PortalQsmType.GroupTour ||
-        (context?.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && !context.searchConfiguration.enableManualPackaging)
-      ) {
-        runSearch();
-      }
-      if (context?.searchConfiguration.qsmType === PortalQsmType.Accommodation) {
-        runHotelSearch();
+  // 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) {
+        runAccommodationFlow(seed);
       }
-      if (context?.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && context.searchConfiguration.enableManualPackaging) {
-        // Manual packaging flow.
-        if (context.searchConfiguration.allowAccommodations) {
-          runHotelSearch();
-        }
+    }
+
+    if (
+      context?.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight &&
+      context.searchConfiguration.enableManualPackaging &&
+      context.searchConfiguration.allowAccommodations &&
+      !context?.packagingEntry
+    ) {
+      const seed = activeSearchSeed;
+      if (seed) {
+        runAccommodationFlow(seed);
       }
     }
-  }, [location.search]);
+  }, [
+    location.search,
+    context?.showMockup,
+    context?.searchConfiguration.qsmType,
+    context?.searchConfiguration.enableManualPackaging,
+    context?.searchConfiguration.allowAccommodations,
+    context?.packagingEntry?.transactionId,
+    activeSearchSeed
+  ]);
 
-  // Seperate detailsCall
+  useEffect(() => {
+    if (context?.packagingEntry) {
+      console.log('original packaging entry from context', context.packagingEntry);
+      dispatch(setEditablePackagingEntry(structuredClone(context.packagingEntry)));
+      dispatch(setTransactionId(context.packagingEntry.transactionId));
+    }
+  }, [context?.packagingEntry]);
+
+  // separate detailsCall
   useEffect(() => {
     const fetchDetails = async () => {
-      setDetailsIsLoading(true);
-      console.log('Fetching details for selected search result', selectedSearchResult);
       if (!selectedSearchResult || !context) return;
+      setDetailsIsLoading(true);
       if (context?.searchConfiguration.qsmType === PortalQsmType.Accommodation || context?.searchConfiguration.qsmType === PortalQsmType.GroupTour) {
         handleFlyInToggle(true);
       }
@@ -600,15 +605,13 @@ const SearchResultsContainer: React.FC = () => {
           return;
         }
 
-        const params = new URLSearchParams(location.search);
-        let entryId = getStringFromParams(params, 'entryId');
+        let requestRooms: BookingPackageRequestRoom[];
 
-        let requestRooms;
-        if (entry && entryId) {
-          requestRooms = getRequestRoomsFromEntry(entry.rooms);
+        if (context?.packagingEntry) {
+          requestRooms = getRequestRoomsFromPackagingEntry(context.packagingEntry);
         } else {
-          const rooms = getRoomsFromParams(params, 'rooms');
-          requestRooms = getRequestRooms(rooms);
+          const seed = activeSearchSeed;
+          requestRooms = seed?.rooms?.length ? seed.rooms : getRequestRooms(null);
         }
 
         const detailsRequest: BookingPackageRequest<BookingPackageDetailsRequest> = {
@@ -632,21 +635,9 @@ const SearchResultsContainer: React.FC = () => {
           agentId: context.agentId
         };
 
-        if (entry && entryId) {
-          requestRooms = getRequestRoomsFromEntry(entry.rooms);
-          const detailsResponse = await details(config, detailsRequest);
-          console.log('Details:', detailsResponse);
-          dispatch(setBookingPackageDetails({ details: detailsResponse?.payload }));
-        } else {
-          // const detailsWLResponse = await detailsWL(config, detailsRequest);
-          // console.log('Details with entryLight:', detailsWLResponse);
-          // dispatch(setBookingPackageDetails({ details: detailsWLResponse?.payload?.bookingPackage }));
-          // dispatch(setEntry({ entry: detailsWLResponse?.payload?.entry }));
-
-          const detailsResponse = await details(config, detailsRequest);
-          dispatch(setBookingPackageDetails({ details: detailsResponse?.payload }));
-          setDetailsIsLoading(false);
-        }
+        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);
@@ -655,8 +646,12 @@ const SearchResultsContainer: React.FC = () => {
 
     const fetchPackagingAccoSearchDetails = async () => {
       if (!selectedPackagingAccoResultCode || !context) return;
-
-      if (context?.searchConfiguration.qsmType === PortalQsmType.Accommodation || context?.searchConfiguration.qsmType === PortalQsmType.GroupTour) {
+      setDetailsIsLoading(true);
+      if (
+        context?.searchConfiguration.qsmType === PortalQsmType.Accommodation ||
+        context?.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight ||
+        context?.searchConfiguration.qsmType === PortalQsmType.GroupTour
+      ) {
         handleFlyInToggle(true);
       }
 
@@ -666,19 +661,15 @@ const SearchResultsContainer: React.FC = () => {
           apiKey: context.tideConnection.apiKey
         };
 
-        console.log('selectedPackagingAccoResultCode', selectedPackagingAccoResultCode);
         const selectedItem = packagingAccoResults.find((r) => r.code === selectedPackagingAccoResultCode);
-        console.log('Selected packaging acco item', selectedItem);
         if (!selectedItem) {
           // TODO: handle this case better, show an error message to the user
           return;
         }
 
-        const params = new URLSearchParams(location.search);
-        const rooms = getRoomsFromParams(params, 'rooms');
-        let tagId = getNumberFromParams(params, 'tagId');
-
-        let destinationAirport = getStringFromParams(params, 'destinationAirport');
+        const seed = activeSearchSeed;
+        const tagId = seed?.tagId ?? null;
+        const destinationAirport = seed?.destinationAirport ?? null;
 
         let destinationId: number | null = null;
         let destinationIsCountry = false;
@@ -706,6 +697,7 @@ const SearchResultsContainer: React.FC = () => {
         }
 
         const detailSearchRequest: PackagingAccommodationRequest = {
+          transactionId: transactionId ?? '',
           officeId: 1,
           portalId: context.portalId,
           agentId: context.agentId,
@@ -713,7 +705,7 @@ const SearchResultsContainer: React.FC = () => {
           searchConfigurationId: context!.searchConfiguration.id,
           vendorConfigurationId: selectedItem.vendorId,
           language: context!.languageCode ?? 'en-GB',
-          serviceType: 3,
+          serviceType: ACCOMMODATION_SERVICE_TYPE,
           fromDate: selectedItem.fromDate,
           toDate: selectedItem.toDate,
           destination: {
@@ -726,15 +718,16 @@ const SearchResultsContainer: React.FC = () => {
             code: destinationCode
           } as PackagingDestination,
           productCode: selectedItem.code ? selectedItem.code : '',
-          rooms: getPackagingRequestRooms(rooms),
+          rooms: getPackagingRequestRoomsFromBookingRooms(seed?.rooms ?? null),
           tagIds: tagId ? [tagId] : []
         };
 
         const packageAccoSearchDetails = await searchPackagingAccommodations(config, detailSearchRequest);
-        console.log('Packaging Acco Search details', packageAccoSearchDetails);
         dispatch(setPackagingAccoSearchDetails(packageAccoSearchDetails));
+        setDetailsIsLoading(false);
       } catch (err) {
         console.error('Failed to fetch package details', err);
+        setDetailsIsLoading(false);
       }
     };
 
@@ -744,6 +737,7 @@ const SearchResultsContainer: React.FC = () => {
     if (selectedPackagingAccoResultCode) {
       fetchPackagingAccoSearchDetails();
     }
+    dispatch(setAccommodationFlyInStep('details'));
   }, [selectedSearchResult, selectedPackagingAccoResultCode]);
 
   useEffect(() => {
@@ -756,6 +750,75 @@ const SearchResultsContainer: React.FC = () => {
     }
   }, [filters, results, packagingAccoResults, selectedSortType]);
 
+  useEffect(() => {
+    setInitialFiltersSet(false);
+  }, [activeSearchSeed]);
+
+  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(setAccommodationFlyInStep('results'));
+    handleFlyInToggle(true);
+
+    await runAccommodationFlow(seed);
+    setDetailsIsLoading(false);
+  };
+
+  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)
+    };
+  };
+
+  useEffect(() => {
+    const fetchPriceDetails = async () => {
+      if (!context || !editablePackagingEntry) return;
+      setPricesAreLoading(true);
+      try {
+        const config: TideClientConfig = {
+          host: context.tideConnection.host,
+          apiKey: context.tideConnection.apiKey
+        };
+
+        const priceDetails = await getPriceDetails(config, editablePackagingEntry);
+        dispatch(setPriceDetails(priceDetails));
+        setPricesAreLoading(false);
+      } catch (err) {
+        console.error('Error fetching price details', err);
+        setPricesAreLoading(false);
+      }
+    };
+
+    fetchPriceDetails();
+  }, [editablePackagingEntry]);
+
   return (
     <div id="tide-booking" className="search__bg">
       {context && (
@@ -790,7 +853,12 @@ const SearchResultsContainer: React.FC = () => {
                   />
                 )}
                 {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && (
-                  <Itinerary isOpen={itineraryOpen} handleSetIsOpen={() => setItineraryOpen(!itineraryOpen)} isLoading={isLoading} />
+                  <Itinerary
+                    isOpen={itineraryOpen}
+                    handleSetIsOpen={() => setItineraryOpen(!itineraryOpen)}
+                    isLoading={pricesAreLoading}
+                    onEditAccommodation={handleEditAccommodation}
+                  />
                 )}
                 {/* ---------------- Results ---------------- */}
                 <div className="search__results">
@@ -826,7 +894,7 @@ const SearchResultsContainer: React.FC = () => {
                   )}
                   <div className="search__result-row">
                     <span className="search__result-row-text">
-                      {!isLoading && (
+                      {!isLoading && !context.packagingEntry && (
                         <>
                           {((context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight &&
                             context.searchConfiguration.enableManualPackaging) ||
@@ -838,7 +906,7 @@ const SearchResultsContainer: React.FC = () => {
                         </>
                       )}
                     </span>
-                    {!isMobile && sortByTypes && sortByTypes.length > 0 && (
+                    {!context.packagingEntry && !isMobile && sortByTypes && sortByTypes.length > 0 && (
                       <div className="search__result-row-filter">
                         <ItemPicker
                           items={sortByTypes}
@@ -855,21 +923,29 @@ const SearchResultsContainer: React.FC = () => {
                   </div>
 
                   <div className="search__results__wrapper">
-                    {context.showTabViews && <TabViews />}
+                    {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 &&
                       bookingPackageDetails?.outwardFlights && <FlightResults flights={bookingPackageDetails?.outwardFlights} isDeparture={true} />}
 
-                    {context.showHotelAccommodationResults && <HotelAccommodationResults isLoading={isLoading} />}
+                    {context.showHotelAccommodationResults && !context.packagingEntry && <HotelAccommodationResults isLoading={isLoading} />}
 
                     {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight &&
+                      !context.packagingEntry &&
                       context.showFlightResults &&
                       bookingPackageDetails?.returnFlights && <FlightResults flights={bookingPackageDetails?.returnFlights} isDeparture={false} />}
+
+                    {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && context.packagingEntry && (
+                      <span>TODO: Show Full Itinerary here</span>
+                    )}
                   </div>
                 </div>
                 {/* <button onClick={() => handleFlyInToggle(!flyInIsOpen)}>Toggle FlyIn</button> */}
@@ -878,8 +954,11 @@ const SearchResultsContainer: React.FC = () => {
                   srpType={context.searchConfiguration.qsmType}
                   isOpen={flyInIsOpen}
                   setIsOpen={handleFlyInToggle}
+                  handleConfirm={() => handleConfirmHotelSwap()}
                   onPanelRef={(el) => (panelRef.current = el)}
                   detailsLoading={detailsIsLoading}
+                  accommodationStep={accommodationFlyInStep}
+                  isPackageEditFlow={!!context.packagingEntry}
                 />
               </>
             )}