@qite/tide-booking-component 1.4.101 → 1.4.103

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

@@ -18,7 +18,11 @@ import {
   setTransactionId,
   setAccommodationFlyInStep,
   setPriceDetails,
-  setItinerary
+  setItinerary,
+  setFlightsLoading,
+  setPackagingFlightResults,
+  setSelectedPackagingFlight,
+  setSelectedPackagingAccoResult
 } from '../../store/search-results-slice';
 import { AccommodationFlyInStep, Filter, SearchSeed, SortByType } from '../../types';
 import useMediaQuery from '../../../shared/utils/use-media-query-util';
@@ -41,10 +45,16 @@ import {
   startTransaction,
   PackagingEntryLine,
   getPriceDetails,
-  getItinerary
+  getItinerary,
+  FlightSearchRequest,
+  searchPackagingFlights,
+  PackagingFlightResponse,
+  PackagingAccommodationResponse,
+  FlightSearchResponseFlightSegment,
+  PackagingEntryLineFlightLine
 } from '@qite/tide-client';
 import { getDateFromParams, getNumberFromParams, getRoomsFromParams, getStringFromParams } from '../../../shared/utils/query-string-util';
-import { first, last, range } from 'lodash';
+import { concat, first, isEmpty, last, range } from 'lodash';
 import { Room } from '../../../booking-wizard/types';
 import Icon from '../icon';
 import Itinerary from '../itinerary';
@@ -53,7 +63,7 @@ import FlyIn from '../../../shared/components/flyin/flyin';
 import HotelAccommodationResults from '../hotel/hotel-accommodation-results';
 import RoundTripResults from '../round-trip/round-trip-results';
 import FlightResults from '../flight/flight-results';
-import { findSortByType, getSortingName, getTranslations } from '../../../shared/utils/localization-util';
+import { 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';
@@ -77,6 +87,20 @@ import {
 } from '../../utils/query-utils';
 import { getRequestRoomsFromPackagingSegments, getRoomIndexFromLine, 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 { PackagingRequestBase } from '@qite/tide-client/build/types/booking-v2/request/packaging/packaging-request-base';
+
+type BuildPackagingEntryPartialArgs = {
+  sourceEntry: PackagingEntry | null | undefined;
+  selectedHotelCode: string | null | undefined;
+  accommodationResults: PackagingAccommodationResponse[];
+  selectedFlight: PackagingFlightResponse | null;
+  seed: SearchSeed;
+  transactionId: string;
+  language: string;
+};
 
 const SearchResultsContainer: React.FC = () => {
   const currentSearch = typeof window !== 'undefined' ? window.location.search : '';
@@ -93,6 +117,7 @@ const SearchResultsContainer: React.FC = () => {
     filteredPackagingAccoResults,
     bookingPackageDetails,
     isLoading,
+    flightsLoading,
     filters,
     selectedSortType,
     selectedSearchResult,
@@ -102,7 +127,8 @@ const SearchResultsContainer: React.FC = () => {
     editablePackagingEntry,
     transactionId,
     accommodationFlyInStep,
-    itinerary
+    itinerary,
+    packagingFlightResults
   } = useSelector((state: SearchResultsRootState) => state.searchResults);
 
   const isMobile = useMediaQuery('(max-width: 1200px)');
@@ -119,6 +145,10 @@ const SearchResultsContainer: React.FC = () => {
 
   const [selectedAccommodationSeed, setSelectedAccommodationSeed] = useState<SearchSeed | null>(null);
 
+  const skipInitialPackagingAccoDetailsRef = useRef(false);
+
+  const [showAllOutwardFlights, setShowAllOutwardFlights] = useState(false);
+
   const panelRef = useRef<HTMLDivElement | null>(null);
 
   const sortByTypes: SortByType[] = [
@@ -276,7 +306,7 @@ const SearchResultsContainer: React.FC = () => {
 
     return {
       transactionId: currentTransactionId,
-      officeId: 1,
+      officeId: context?.tideConnection?.officeId ?? 1,
       agentId: context?.agentId ?? null,
       catalogueId: context!.searchConfiguration.defaultCatalogueId ?? 0,
       searchConfigurationId: context!.searchConfiguration.id,
@@ -299,6 +329,43 @@ const SearchResultsContainer: React.FC = () => {
     };
   };
 
+  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! >= 18).length;
+    var kids = seed.rooms.flatMap((x) => x.pax).filter((x) => x.age! >= 2 && x.age! < 18).length;
+    var babies = seed.rooms.flatMap((x) => x.pax).filter((x) => x.age! < 2).length;
+
+    return {
+      transactionId: currentTransactionId,
+      officeId: context?.tideConnection?.officeId ?? 1,
+      catalogueId: first(context?.tideConnection?.catalogueIds) ?? 0,
+      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');
@@ -311,6 +378,8 @@ const SearchResultsContainer: React.FC = () => {
     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;
@@ -328,10 +397,55 @@ const SearchResultsContainer: React.FC = () => {
       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(setAccommodationFlyInStep('results'));
+    handleFlyInToggle(true);
+    const currentTransactionId = await getOrCreateTransactionId();
+    await runAccommodationFlow(seed, currentTransactionId ?? '');
+    setDetailsIsLoading(false);
+  };
+
   const handleConfirmHotelSwap = () => {
     const updatedEntry = swapHotelInPackagingEntry();
     if (!updatedEntry) return;
@@ -431,6 +545,18 @@ const SearchResultsContainer: React.FC = () => {
     }
   }, [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;
@@ -476,19 +602,21 @@ const SearchResultsContainer: React.FC = () => {
     try {
       if (!context) return null;
 
+      dispatch(setIsLoading(true));
+
       const config: TideClientConfig = {
         host: context.tideConnection.host,
         apiKey: context.tideConnection.apiKey
       };
 
       const transaction = await startTransaction(config);
-      console.log('Transaction started', transaction);
 
       dispatch(setTransactionId(transaction.transactionId));
-
+      dispatch(setIsLoading(false));
       return transaction.transactionId;
     } catch (err) {
       console.error('Transaction failed', err);
+      dispatch(setIsLoading(false));
       return null;
     }
   };
@@ -520,28 +648,55 @@ const SearchResultsContainer: React.FC = () => {
       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('Search failed', err);
+      console.error('HotelSearch failed', err);
       dispatch(setIsLoading(false));
     }
   };
 
-  const runAccommodationFlow = async (seed: SearchSeed) => {
+  const runAccommodationFlow = async (seed: SearchSeed, currentTransactionId: string) => {
     if (!context || context.showMockup) return;
+    await runHotelSearch(currentTransactionId, seed);
+  };
 
-    let currentTransactionId = context?.packagingEntry?.transactionId || transactionId;
-    if (!currentTransactionId) {
-      dispatch(setIsLoading(true));
-      currentTransactionId = await runStartTransaction();
-    }
+  const runFlightSearch = async (currentTransactionId: string, seed: SearchSeed) => {
+    try {
+      if (!context) return;
+      dispatch(setFlightsLoading(true));
 
-    if (!currentTransactionId) {
-      dispatch(setIsLoading(false));
-      return;
+      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);
+
+      dispatch(setPackagingFlightResults(packageFlightSearchResults));
+      const firstResult = first(packageFlightSearchResults);
+      if (firstResult) {
+        setSelectedOutwardKey(getFlightKey(firstResult.outward.segments));
+        setSelectedReturnKey(getFlightKey(firstResult.return.segments));
+      }
+
+      dispatch(setFlightsLoading(false));
+    } catch (err) {
+      console.error('FlightSearch failed', err);
+      dispatch(setFlightsLoading(false));
     }
+  };
 
-    await runHotelSearch(currentTransactionId, seed);
+  const runFlightFlow = async (seed: SearchSeed, currentTransactionId: string) => {
+    if (!context || context.showMockup) return;
+    await runFlightSearch(currentTransactionId, seed);
   };
 
   // separate Search
@@ -555,20 +710,41 @@ const SearchResultsContainer: React.FC = () => {
 
     if (context?.searchConfiguration.qsmType === PortalQsmType.Accommodation) {
       const seed = activeSearchSeed;
+
       if (seed) {
-        runAccommodationFlow(seed);
+        (async () => {
+          const transactionId = await getOrCreateTransactionId();
+          if (!transactionId) return;
+
+          await runAccommodationFlow(seed, transactionId);
+        })();
       }
     }
 
     if (
       context?.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight &&
       context.searchConfiguration.enableManualPackaging &&
-      context.searchConfiguration.allowAccommodations &&
       !context?.packagingEntry
     ) {
       const seed = activeSearchSeed;
+
       if (seed) {
-        runAccommodationFlow(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);
+        })();
       }
     }
   }, [
@@ -583,7 +759,6 @@ const SearchResultsContainer: React.FC = () => {
 
   useEffect(() => {
     if (context?.packagingEntry) {
-      console.log('original packaging entry from context', context.packagingEntry);
       dispatch(setEditablePackagingEntry(structuredClone(context.packagingEntry)));
       dispatch(setTransactionId(context.packagingEntry.transactionId));
     }
@@ -651,6 +826,12 @@ const SearchResultsContainer: React.FC = () => {
 
     const fetchPackagingAccoSearchDetails = async () => {
       if (!selectedPackagingAccoResultCode || !context) return;
+
+      if (skipInitialPackagingAccoDetailsRef.current) {
+        skipInitialPackagingAccoDetailsRef.current = false;
+        return;
+      }
+
       setDetailsIsLoading(true);
       if (
         context?.searchConfiguration.qsmType === PortalQsmType.Accommodation ||
@@ -759,52 +940,9 @@ const SearchResultsContainer: React.FC = () => {
     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;
+      if (!context || !editablePackagingEntry || isEmpty(editablePackagingEntry.lines)) return;
       setPricesAreLoading(true);
       try {
         const config: TideClientConfig = {
@@ -812,7 +950,15 @@ const SearchResultsContainer: React.FC = () => {
           apiKey: context.tideConnection.apiKey
         };
 
-        const priceDetails = await getPriceDetails(config, editablePackagingEntry);
+        const request = {
+          language: context.languageCode ?? 'en-GB',
+          officeId: context.tideConnection.officeId,
+          catalogueId: context.searchConfiguration.defaultCatalogueId ?? 0,
+          agentId: context.agentId,
+          payload: editablePackagingEntry
+        } as PackagingRequestBase<PackagingEntry>;
+
+        const priceDetails = await getPriceDetails(config, request);
         dispatch(setPriceDetails(priceDetails));
         setPricesAreLoading(false);
       } catch (err) {
@@ -822,8 +968,7 @@ const SearchResultsContainer: React.FC = () => {
     };
 
     const fetchItinerary = async () => {
-      console.log('Fetching itinerary for entry', editablePackagingEntry);
-      if (!context || !editablePackagingEntry) return;
+      if (!context || !context.packagingEntry || !editablePackagingEntry || isEmpty(editablePackagingEntry.lines)) return;
       setItineraryIsLoading(true);
       try {
         const config: TideClientConfig = {
@@ -831,7 +976,15 @@ const SearchResultsContainer: React.FC = () => {
           apiKey: context.tideConnection.apiKey
         };
 
-        const itinerary = await getItinerary(config, editablePackagingEntry);
+        const request = {
+          language: context.languageCode ?? 'en-GB',
+          officeId: context.tideConnection.officeId,
+          catalogueId: context.searchConfiguration.defaultCatalogueId ?? 0,
+          agentId: context.agentId,
+          payload: editablePackagingEntry
+        } as PackagingRequestBase<PackagingEntry>;
+
+        const itinerary = await getItinerary(config, request);
         console.log('Fetched itinerary', itinerary);
         dispatch(setItinerary(itinerary));
         setItineraryIsLoading(false);
@@ -845,6 +998,379 @@ const SearchResultsContainer: React.FC = () => {
     fetchItinerary();
   }, [editablePackagingEntry]);
 
+  // Flight selection
+  const [selectedOutwardKey, setSelectedOutwardKey] = useState<string | null>(null);
+  const [selectedReturnKey, setSelectedReturnKey] = useState<string | null>(null);
+
+  const uniqueOutwardFlights: PackagingFlightResponse[] = React.useMemo(() => {
+    const map = new Map();
+
+    packagingFlightResults.forEach((flight) => {
+      const key = getFlightKey(flight.outward.segments);
+
+      if (!map.has(key)) {
+        map.set(key, flight);
+      }
+    });
+
+    return Array.from(map.values());
+  }, [packagingFlightResults]);
+
+  const [uniqueReturnFlights, setUniqueReturnFlights] = useState<PackagingFlightResponse[]>([]);
+
+  useEffect(() => {
+    if (!selectedOutwardKey) {
+      setUniqueReturnFlights([]);
+      setSelectedReturnKey(null);
+      return;
+    }
+
+    // Filter combinations that match selected outward fare
+    const matchingCombinations = packagingFlightResults.filter((flight) => getFlightKey(flight.outward.segments) === selectedOutwardKey);
+    const returnMap = new Map();
+
+    matchingCombinations.forEach((flight) => {
+      const key = getFlightKey(flight.return.segments);
+
+      if (!returnMap.has(key)) {
+        returnMap.set(key, flight);
+      }
+    });
+
+    const returns = Array.from(returnMap.values());
+
+    setUniqueReturnFlights(returns);
+    const firstReturnKey = returns.length > 0 ? getFlightKey(first(returns)?.return.segments) : null;
+
+    if (firstReturnKey) {
+      setSelectedReturnKey(firstReturnKey);
+    }
+  }, [selectedOutwardKey, packagingFlightResults]);
+
+  const selectedOutward = React.useMemo(() => {
+    if (!selectedOutwardKey) return null;
+
+    return packagingFlightResults.find((flight) => getFlightKey(flight.outward.segments) === selectedOutwardKey) || null;
+  }, [packagingFlightResults, selectedOutwardKey]);
+
+  const selectedReturn = React.useMemo(() => {
+    if (!selectedReturnKey) return null;
+
+    return packagingFlightResults.find((flight) => getFlightKey(flight.return.segments) === selectedReturnKey) || null;
+  }, [packagingFlightResults, selectedReturnKey]);
+
+  const selectedCombinationFlight = React.useMemo(() => {
+    if (!selectedOutwardKey || !selectedReturnKey) return undefined;
+
+    return packagingFlightResults.find(
+      (flight) => getFlightKey(flight.outward.segments) === selectedOutwardKey && getFlightKey(flight.return.segments) === selectedReturnKey
+    );
+  }, [packagingFlightResults, selectedOutwardKey, selectedReturnKey]);
+
+  // 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]);
+
+  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,
+      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,
+    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 buildAccommodationLinesFromSelection = (selectedHotel: PackagingAccommodationResponse, seed: SearchSeed): PackagingEntryLine[] => {
+    if (!selectedHotel) return [];
+    const parentGuid = crypto.randomUUID();
+
+    return selectedHotel.rooms
+      .filter((room) => room.options.some((o) => o.isSelected))
+      .map((room, index) => {
+        const option = room.options.find((o) => o.isSelected)!;
+
+        const pax =
+          seed.rooms?.flatMap((room, roomIndex) =>
+            room.pax.map((p, paxIndex) => ({
+              paxId: p.id,
+              room: roomIndex,
+              order: paxIndex
+            }))
+          ) ?? [];
+
+        return {
+          guid: option.guid ?? crypto.randomUUID(),
+          moment: '',
+          parentGuid: index === 0 ? null : parentGuid,
+          order: index,
+          isChanged: true,
+          from: selectedHotel.fromDate,
+          to: selectedHotel.toDate,
+          serviceType: ACCOMMODATION_SERVICE_TYPE,
+          productName: selectedHotel.name,
+          productCode: selectedHotel.code,
+          accommodationName: option.accommodationName,
+          accommodationCode: option.accommodationCode,
+          regimeName: option.regimeName,
+          regimeCode: option.regimeCode,
+          country: selectedHotel.countryId ? { id: selectedHotel.countryId, name: selectedHotel.countryName, localizations: [] } : null,
+          region: selectedHotel.regionId ? { id: selectedHotel.regionId, name: selectedHotel.regionName, localizations: [] } : null,
+          oord: selectedHotel.oordId ? { id: selectedHotel.oordId, name: selectedHotel.oordName, localizations: [] } : null,
+          location: selectedHotel.locationId ? { id: selectedHotel.locationId, name: selectedHotel.locationName, localizations: [] } : null,
+          longitude: selectedHotel.longitude ?? null,
+          latitude: selectedHotel.latitude ?? null,
+          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,
+    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];
+      }
+    }
+
+    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 = 1;
+
+    const pax =
+      seed.rooms?.flatMap((room, roomIndex) =>
+        room.pax.map((_, paxIndex) => ({
+          id: paxId++,
+          firstName: '',
+          lastName: '',
+          dateOfBirth: null,
+          isMainBooker: roomIndex === 0 && paxIndex === 0
+        }))
+      ) ?? [];
+
+    return {
+      language,
+      transactionId,
+      dossierNumber: '',
+      status: 0,
+      bookingDate: null,
+      price: 0,
+      depositAmount: 0,
+      pax,
+      lines: []
+    } as PackagingEntry;
+  };
+
+  const visibleOutwardFlights = React.useMemo(() => {
+    return showAllOutwardFlights ? uniqueOutwardFlights : uniqueOutwardFlights.slice(0, 3);
+  }, [showAllOutwardFlights, uniqueOutwardFlights]);
+
   return (
     <div id="tide-booking" className="search__bg">
       {context && (
@@ -920,11 +1446,9 @@ const SearchResultsContainer: React.FC = () => {
                   )}
                   <div className="search__result-row">
                     <span className="search__result-row-text">
-                      {!isLoading && !context.packagingEntry && (
+                      {!isLoading && context.searchConfiguration.qsmType !== PortalQsmType.AccommodationAndFlight && (
                         <>
-                          {((context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight &&
-                            context.searchConfiguration.enableManualPackaging) ||
-                            context.searchConfiguration.qsmType === PortalQsmType.Accommodation) &&
+                          {context.searchConfiguration.qsmType === PortalQsmType.Accommodation &&
                             filteredPackagingAccoResults?.length &&
                             filteredPackagingAccoResults?.length}
                           {context.searchConfiguration.qsmType !== PortalQsmType.Accommodation && filteredResults?.length && filteredResults.length}
@@ -957,17 +1481,105 @@ const SearchResultsContainer: React.FC = () => {
 
                     {context.searchConfiguration.qsmType === PortalQsmType.GroupTour && <GroupTourResults isLoading={isLoading} />}
 
-                    {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight &&
-                      !context.packagingEntry &&
-                      context.showFlightResults &&
-                      bookingPackageDetails?.outwardFlights && <FlightResults flights={bookingPackageDetails?.outwardFlights} isDeparture={true} />}
+                    {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && !context.packagingEntry && context.showFlightResults && (
+                      // bookingPackageDetails?.outwardFlights &&
+                      // <FlightResults flights={bookingPackageDetails?.outwardFlights} isDeparture={true} />
+                      <>
+                        <div className="search__results__label search__results__label--secondary">
+                          <div className="search__results__label__date">
+                            <Icon name="ui-flight" height={16} fill="white" />
+                          </div>
+                          <div className="search__results__label__text">
+                            <h3>
+                              {translations.SRP.SELECT} <strong> {translations.SRP.DEPARTURE}</strong>
+                            </h3>
+                          </div>
+                        </div>
+
+                        {flightsLoading ? (
+                          <Spinner />
+                        ) : (
+                          <>
+                            <div className="search__results__cards search__results__cards--extended">
+                              {selectedOutwardKey && selectedOutward && (
+                                <IndependentFlightOption
+                                  key={`flight-${selectedOutwardKey}`}
+                                  item={selectedOutward.outward}
+                                  guid={selectedOutward.outwardGuid}
+                                  onSelect={() => setSelectedOutwardKey(null)}
+                                  selectedGuid={selectedOutward.outwardGuid}
+                                  isOutward={true}
+                                  showSelectedState={true}
+                                  price={selectedOutward.price}
+                                />
+                              )}
+                              {visibleOutwardFlights.map((result) => (
+                                <IndependentFlightOption
+                                  key={`flight-${result.outwardGuid}`}
+                                  item={result.outward}
+                                  onSelect={() => 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={() => setShowAllOutwardFlights(!showAllOutwardFlights)}>
+                                  {showAllOutwardFlights ? translations.SRP.SHOW_LESS : translations.SRP.SHOW_MORE}
+                                </button>
+                              </div>
+                            )}
+                          </>
+                        )}
+                      </>
+                    )}
 
                     {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 && context.showFlightResults && (
+                      // bookingPackageDetails?.returnFlights &&
+                      // <FlightResults flights={bookingPackageDetails?.returnFlights} isDeparture={false} />
+                      <>
+                        <div className="search__results__label search__results__label--secondary">
+                          <div className="search__results__label__date">
+                            <Icon name="ui-flight" height={16} fill="white" />
+                          </div>
+                          <div className="search__results__label__text">
+                            <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={() => setSelectedReturnKey(getFlightKey(result.return.segments))}
+                              guid={result.outwardGuid}
+                              isOutward={false}
+                              currentSelectedPrice={selectedReturn?.price}
+                              price={result.price}
+                            />
+                          ))}
+                        </div>
+                      </>
+                    )}
 
                     {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && context.packagingEntry && itinerary && (
                       <FullItinerary isLoading={itineraryIsLoading} />