@qite/tide-booking-component 1.4.104 → 1.4.106

package/src/search-results/components/itinerary/full-itinerary.tsx

@@ -1,10 +1,13 @@
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { useContext, useEffect, useMemo, useRef } from 'react';
 import { useSelector } from 'react-redux';
 import { SearchResultsRootState } from '../../store/search-results-store';
-import { ClientPortalItinerary } from '@qite/tide-client';
+import { ClientPortalItinerary, ClientPortalItineraryItem, ClientPortalItineraryNode } from '@qite/tide-client';
 import Spinner from '../spinner/spinner';
+import SearchResultsConfigurationContext from '../../search-results-configuration-context';
+import { getTranslations } from '../../../shared/utils/localization-util';
+import { format } from 'date-fns';
 
-const formatNodeDate = (date?: Date | null) => {
+const formatNodeDate = (date?: Date | string | null) => {
   if (!date) return '';
 
   try {
@@ -13,7 +16,7 @@ const formatNodeDate = (date?: Date | null) => {
       day: '2-digit',
       month: '2-digit',
       year: 'numeric'
-    }).format(date);
+    }).format(new Date(date));
   } catch {
     return '';
   }
@@ -25,7 +28,79 @@ const escapeHtml = (value?: string | null) => {
   return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
 };
 
-const buildItineraryHtml = (itinerary?: ClientPortalItinerary | null) => {
+const getNodeDayRange = (node: ClientPortalItineraryNode) => {
+  const startDay = Number(node.startDay ?? 0);
+  const endDay = Number(node.endDay ?? startDay);
+
+  return { startDay, endDay };
+};
+
+const getItemDuration = (item: ClientPortalItineraryItem) => {
+  const duration = Number(item.productDuration ?? 0);
+
+  return Number.isFinite(duration) && duration > 0 ? duration : 0;
+};
+
+const isAccommodationItem = (item: ClientPortalItineraryItem) => {
+  return getItemDuration(item) > 1 && item.templateName?.toLowerCase().includes('hotel');
+};
+
+const getAccommodationName = (item: ClientPortalItineraryItem) => {
+  return item.title || 'Onbekende accommodatie';
+};
+
+const getItemDeduplicationKey = (item: ClientPortalItineraryItem) => {
+  const templateName = item.templateName?.toLowerCase();
+
+  // if (templateName === 'hotel') {
+  //   return [item.templateName, item.productCode, item.accommodationCode, item.regimeCode].filter(Boolean).join('|');
+  // }
+
+  // if (templateName === 'excursion') {
+  //   return [item.templateName, item.productCode].filter(Boolean).join('|');
+  // }
+
+  return [item.templateName, item.productCode, item.title].filter(Boolean).join('|');
+};
+
+const getUniqueItems = (items: ClientPortalItineraryItem[] = []) => {
+  const seen = new Set<string>();
+
+  return items.filter((item) => {
+    const key = getItemDeduplicationKey(item) || item.itemGuid;
+
+    if (seen.has(key)) {
+      return false;
+    }
+
+    seen.add(key);
+    return true;
+  });
+};
+
+const findAccommodationForDay = (nodes: ClientPortalItineraryNode[], currentDay: number) => {
+  for (const node of nodes ?? []) {
+    const { startDay } = getNodeDayRange(node);
+    const uniqueItems = getUniqueItems(node.items ?? []);
+
+    for (const item of uniqueItems) {
+      if (!isAccommodationItem(item)) {
+        continue;
+      }
+
+      const duration = getItemDuration(item);
+      const accommodationEndDay = startDay + duration - 1;
+
+      if (currentDay >= startDay && currentDay <= accommodationEndDay) {
+        return item;
+      }
+    }
+  }
+
+  return null;
+};
+
+const buildItineraryHtml = (itinerary: ClientPortalItinerary | null, translations: any) => {
   if (!itinerary) {
     return `
       <div class="itinerary-shell">
@@ -34,12 +109,30 @@ const buildItineraryHtml = (itinerary?: ClientPortalItinerary | null) => {
     `;
   }
 
-  const nodesHtml = (itinerary.nodes ?? [])
+  const allNodes = itinerary.nodes ?? [];
+
+  const nodesHtml = allNodes
     .map((node) => {
-      const hasItems = Array.isArray(node.items) && node.items.length > 0;
+      const { startDay } = getNodeDayRange(node);
+      const day = node.startDate ? format(node.startDate, 'd') : null;
+      const month = node.startDate ? format(node.startDate, 'MMM') : null;
+      const uniqueItems = getUniqueItems(node.items ?? []);
+
+      const hasItems = uniqueItems.length > 0;
+      const hasAccommodationInCurrentNode = uniqueItems.some(isAccommodationItem);
+      const activeAccommodation = findAccommodationForDay(allNodes, startDay);
+
+      const accommodationBanner =
+        !hasAccommodationInCurrentNode && activeAccommodation
+          ? `
+            <div class="itinerary-node__accommodation-banner">
+              Accommodatie voor deze dag: <strong>${escapeHtml(getAccommodationName(activeAccommodation))}</strong>
+            </div>
+          `
+          : '';
 
       const itemsHtml = hasItems
-        ? node.items
+        ? uniqueItems
             .map(
               (item) => `
                 <article class="itinerary-item" data-template="${escapeHtml(item.templateName)}">
@@ -48,19 +141,24 @@ const buildItineraryHtml = (itinerary?: ClientPortalItinerary | null) => {
               `
             )
             .join('')
-        : `<div class="itinerary-node__empty">Geen items voor deze dag.</div>`;
+        : `<div class="itinerary-node__empty">${translations.ITINERARY.NO_ITEMS}</div>`;
 
       return `
         <section class="itinerary-node">
           <header class="itinerary-node__header">
-            <div class="itinerary-node__day">Dag ${node.startDay}${node.endDay > node.startDay ? ` - ${node.endDay}` : ''}</div>
-            <div class="itinerary-node__meta">
+            
+          <div class="itinerary-node__day">
+            <p class="itinerary-node__day-day">${day}</p>
+            <p class="itinerary-node__day-month">${month}</p>
+          </div>
+
+            <div>
               <h2 class="itinerary-node__title">${escapeHtml(node.title)}</h2>
-              <div class="itinerary-node__date">${escapeHtml(formatNodeDate(node.startDate))}</div>
             </div>
           </header>
 
           <div class="itinerary-node__content">
+            ${accommodationBanner}
             ${itemsHtml}
           </div>
         </section>
@@ -73,7 +171,7 @@ const buildItineraryHtml = (itinerary?: ClientPortalItinerary | null) => {
       ? `
         <section class="itinerary-default-items">
           <h2 class="itinerary-default-items__title">Algemene info</h2>
-          ${itinerary.defaultItems
+          ${getUniqueItems(itinerary.defaultItems)
             .map(
               (item) => `
                 <article class="itinerary-item" data-template="${escapeHtml(item.templateName)}">
@@ -103,31 +201,36 @@ interface FullItineraryProps {
 }
 
 const FullItinerary: React.FC<FullItineraryProps> = ({ isLoading }) => {
-  if (isLoading) {
-    return <Spinner />;
-  }
-
   const { itinerary } = useSelector((state: SearchResultsRootState) => state.searchResults);
+  const context = useContext(SearchResultsConfigurationContext);
+  const translations = getTranslations(context?.languageCode ?? 'en-GB');
+
   const hostRef = useRef<HTMLDivElement | null>(null);
   const shadowRootRef = useRef<ShadowRoot | null>(null);
 
-  const html = useMemo(() => buildItineraryHtml(itinerary as ClientPortalItinerary | null), [itinerary]);
+  const html = useMemo(() => buildItineraryHtml(itinerary as ClientPortalItinerary | null, translations), [itinerary, translations]);
 
   useEffect(() => {
-    if (!hostRef.current) {
+    if (isLoading) {
       return;
     }
 
-    if (!shadowRootRef.current) {
-      shadowRootRef.current = hostRef.current.attachShadow({ mode: 'open' });
+    const host = hostRef.current;
+
+    if (!host) {
+      return;
     }
 
-    const shadowRoot = shadowRootRef.current;
+    const shadowRoot = host.shadowRoot ?? host.attachShadow({ mode: 'open' });
+
+    shadowRootRef.current = shadowRoot;
 
     shadowRoot.innerHTML = `
       <style>
         :host {
           all: initial;
+          display: block;
+          width: 100%;
         }
 
         *,
@@ -169,27 +272,31 @@ const FullItinerary: React.FC<FullItineraryProps> = ({ isLoading }) => {
         .itinerary-node__header {
           display: flex;
           gap: 16px;
-          align-items: flex-start;
-          padding: 20px 20px 16px;
+          align-items: center;
           border-bottom: 1px solid #eef0f2;
           background: #fafafa;
         }
 
         .itinerary-node__day {
-          flex: 0 0 auto;
-          min-width: 72px;
-          padding: 8px 12px;
-          border-radius: 999px;
-          font-size: 14px;
-          font-weight: 700;
-          line-height: 1;
-          background: #111827;
-          color: #fff;
-          text-align: center;
+          flex: 50px 0 0;
+          display: flex;
+          flex-flow: column;
+          align-items: center;
+          justify-content: center;
+          background: #1f9470;
+          color: white;
+          border: 1.5px solid var(--tide-booking-color-secondary);
         }
 
-        .itinerary-node__meta {
-          min-width: 0;
+        .itinerary-node__day-month {
+          margin: 0px;
+        }
+
+        .itinerary-node__day-day {
+          margin: 0px;
+          font-weight: var(--tide-booking-search-results-label-date-month-font-weight);
+          color: var(--tide-booking-search-results-label-date-month-color);
+          font-size: 24px;
         }
 
         .itinerary-node__title {
@@ -198,18 +305,22 @@ const FullItinerary: React.FC<FullItineraryProps> = ({ isLoading }) => {
           line-height: 1.25;
         }
 
-        .itinerary-node__date {
-          margin-top: 6px;
-          font-size: 14px;
-          color: #6b7280;
-        }
-
         .itinerary-node__content {
           display: grid;
           gap: 20px;
           padding: 20px;
         }
 
+        .itinerary-node__accommodation-banner {
+          padding: 12px 16px;
+          border: 1px solid #dbeafe;
+          border-radius: 12px;
+          background: #eff6ff;
+          color: #1e3a8a;
+          font-size: 14px;
+          line-height: 1.4;
+        }
+
         .itinerary-item {
           display: block;
           border-radius: 12px;
@@ -243,14 +354,6 @@ const FullItinerary: React.FC<FullItineraryProps> = ({ isLoading }) => {
           .itinerary-shell {
             padding: 16px;
           }
-
-          .itinerary-node__header {
-            flex-direction: column;
-          }
-
-          .itinerary-node__day {
-            min-width: auto;
-          }
         }
 
         ${itinerary?.styleSheetBody ?? ''}
@@ -258,9 +361,14 @@ const FullItinerary: React.FC<FullItineraryProps> = ({ isLoading }) => {
 
       ${html}
     `;
-  }, [html, itinerary?.styleSheetBody]);
-
-  return <div ref={hostRef} />;
+  }, [html, itinerary?.styleSheetBody, isLoading]);
+
+  return (
+    <>
+      {isLoading && <Spinner />}
+      <div ref={hostRef} style={{ display: isLoading ? 'none' : 'block' }} />
+    </>
+  );
 };
 
 export default FullItinerary;

package/src/search-results/components/itinerary/index.tsx

@@ -102,6 +102,25 @@ const getSegmentTitle = (segment: PackagingEntryLine) => {
   return segment.productName ?? segment.accommodationName;
 };
 
+const SERVICE_TYPE_PRIORITY: Record<number, number> = {
+  7: 0, // Flight
+  13: 1, // Transfer
+  3: 2, // Hotel
+  4: 3 // Excursion
+};
+
+const getServiceTypePriority = (serviceType?: number) => {
+  return SERVICE_TYPE_PRIORITY[serviceType ?? -1] ?? 2;
+};
+
+const getDateOnlyTime = (date?: string | Date | null) => {
+  if (!date) return 0;
+
+  const parsedDate = new Date(date);
+
+  return new Date(parsedDate.getFullYear(), parsedDate.getMonth(), parsedDate.getDate()).getTime();
+};
+
 const Itinerary: React.FC<ItineraryProps> = ({ isOpen, handleSetIsOpen, isLoading, onEditAccommodation }) => {
   const context = useContext(SearchResultsConfigurationContext);
   const translations = getTranslations(context?.languageCode ?? 'en-GB');
@@ -111,16 +130,21 @@ const Itinerary: React.FC<ItineraryProps> = ({ isOpen, handleSetIsOpen, isLoadin
 
   const sortedLines = useMemo(() => {
     return [...(packagingEntry?.lines ?? [])].sort((a, b) => {
-      const orderA = a.order ?? Infinity;
-      const orderB = b.order ?? Infinity;
+      const dateA = getDateOnlyTime(a.from);
+      const dateB = getDateOnlyTime(b.from);
+
+      if (dateA !== dateB) {
+        return dateA - dateB;
+      }
+
+      const priorityA = getServiceTypePriority(a.serviceType);
+      const priorityB = getServiceTypePriority(b.serviceType);
 
-      // First sort by order
-      if (orderA !== orderB) {
-        return orderA - orderB;
+      if (priorityA !== priorityB) {
+        return priorityA - priorityB;
       }
 
-      // Fallback to date
-      return new Date(a.from).getTime() - new Date(b.from).getTime();
+      return (a.order ?? Infinity) - (b.order ?? Infinity);
     });
   }, [packagingEntry]);
 

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

@@ -85,6 +85,7 @@ import {
 } from '../../utils/search-results-utils';
 import {
   ACCOMMODATION_SERVICE_TYPE,
+  EXCURSION_SERVICE_TYPE,
   FLIGHT_SERVICE_TYPE,
   getDepartureAirportFromEntry,
   getDestinationAirportFromEntry,
@@ -109,12 +110,14 @@ import {
   selectUniqueOutwardFlights,
   selectUniqueReturnFlights
 } from '../../store/search-results-selectors';
+import DayByDayExcursions from '../excursions/day-by-day-excursions';
 
 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;
@@ -148,7 +151,8 @@ const SearchResultsContainer: React.FC = () => {
     transactionId,
     flyInType,
     itinerary,
-    packagingFlightResults
+    packagingFlightResults,
+    confirmedExcursionsByDay
   } = useSelector((state: SearchResultsRootState) => state.searchResults);
 
   const isMobile = useMediaQuery('(max-width: 1200px)');
@@ -1099,6 +1103,7 @@ const SearchResultsContainer: React.FC = () => {
       selectedHotelCode: selectedPackagingAccoResultCode,
       accommodationResults: packagingAccoResults,
       selectedFlight: selectedCombinationFlight ?? null,
+      confirmedExcursionsByDay,
       seed,
       transactionId: transactionId ?? context.packagingEntry?.transactionId ?? '',
       language: context.languageCode ?? 'en-GB'
@@ -1118,6 +1123,7 @@ const SearchResultsContainer: React.FC = () => {
     packagingAccoResults,
     packagingAccoSearchDetails,
     selectedCombinationFlight,
+    confirmedExcursionsByDay,
     transactionId,
     dispatch
   ]);
@@ -1126,23 +1132,70 @@ const SearchResultsContainer: React.FC = () => {
 
   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[] => {
-    if (!selectedHotel) return [];
+    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 selectedHotel.rooms
+    return selectedItem.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
-            }))
-          ) ?? [];
+        const pax = option.paxIds.map((p, paxIndex) => ({
+          paxId: p,
+          room: index,
+          order: paxIndex
+        }));
 
         return {
           guid: option.guid ?? crypto.randomUUID(),
@@ -1150,21 +1203,21 @@ const SearchResultsContainer: React.FC = () => {
           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,
+          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: 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,
+          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;
@@ -1298,6 +1351,7 @@ const SearchResultsContainer: React.FC = () => {
     selectedHotelCode,
     accommodationResults,
     selectedFlight,
+    confirmedExcursionsByDay,
     seed,
     transactionId,
     language
@@ -1329,6 +1383,15 @@ const SearchResultsContainer: React.FC = () => {
       }
     }
 
+    // excursions
+    const excursionLines = buildExcursionLinesFromConfirmedDays(confirmedExcursionsByDay);
+
+    nextLines = removeExcursionLines(nextLines);
+
+    if (excursionLines.length) {
+      nextLines = [...nextLines, ...excursionLines];
+    }
+
     nextLines = nextLines.map((line, index) => ({
       ...line,
       order: index
@@ -1353,7 +1416,7 @@ const SearchResultsContainer: React.FC = () => {
       return structuredClone(sourceEntry);
     }
 
-    let paxId = 1;
+    let paxId = 0;
 
     const pax =
       seed.rooms?.flatMap((room, roomIndex) =>
@@ -1498,8 +1561,6 @@ 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} />
                       <>
                         <div className="search__results__label search__results__label--secondary">
                           <div className="search__results__label__date">
@@ -1555,9 +1616,9 @@ const SearchResultsContainer: React.FC = () => {
 
                     {context.showHotelAccommodationResults && !context.packagingEntry && <HotelAccommodationResults isLoading={isLoading} />}
 
+                    {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && !context.packagingEntry && <DayByDayExcursions />}
+
                     {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">
@@ -1597,7 +1658,7 @@ const SearchResultsContainer: React.FC = () => {
                       </>
                     )}
 
-                    {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && context.packagingEntry && itinerary && (
+                    {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && context.packagingEntry && (
                       <FullItinerary isLoading={itineraryIsLoading} />
                     )}
                   </div>
@@ -1613,6 +1674,7 @@ const SearchResultsContainer: React.FC = () => {
                   flyInType={flyInType}
                   isPackageEditFlow={!!context.packagingEntry}
                   sortByTypes={sortByTypes}
+                  activeSearchSeed={activeSearchSeed}
                 />
               </>
             )}

package/src/search-results/store/search-results-selectors.ts

@@ -5,6 +5,17 @@ import { PackagingFlightResponse } from '@qite/tide-client';
 
 const selectSearchResultsState = (state: SearchResultsRootState) => state.searchResults;
 
+export const selectPackagingAccoResults = createSelector([selectSearchResultsState], (state) => state.packagingAccoResults);
+export const selectSelectedPackagingAccoResultCode = createSelector([selectSearchResultsState], (state) => state.selectedPackagingAccoResultCode);
+export const selectSelectedPackagingAccoResult = createSelector(
+  [selectPackagingAccoResults, selectSelectedPackagingAccoResultCode],
+  (packagingAccoResults, selectedPackagingAccoResultCode) => {
+    if (!selectedPackagingAccoResultCode) return null;
+
+    return packagingAccoResults.find((accoResult) => accoResult.code === selectedPackagingAccoResultCode) ?? null;
+  }
+);
+
 export const selectPackagingFlightResults = createSelector([selectSearchResultsState], (state) => state.packagingFlightResults);
 export const selectFilteredPackagingFlightResults = createSelector([selectSearchResultsState], (state) => state.filteredPackagingFlightResults);