@qite/tide-booking-component 1.4.105 → 1.4.107

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

@@ -2,7 +2,7 @@ import React, { useContext, useMemo } from 'react';
 import { differenceInCalendarDays, format } from 'date-fns';
 import { first, groupBy, isEmpty, last } from 'lodash';
 import { PackagingEntryLine, PackagingEntryLineFlightLine } from '@qite/tide-client';
-import Icon from '../icon';
+import Icon from '../../../shared/components/icon';
 import SearchResultsConfigurationContext from '../../search-results-configuration-context';
 import { formatPrice, getTranslations } from '../../../shared/utils/localization-util';
 import { useSelector } from 'react-redux';
@@ -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/round-trip/round-trip-results.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import Icon from '../icon';
+import Icon from '../../../shared/components/icon';
 import { useDispatch, useSelector } from 'react-redux';
 import { SearchResultsRootState } from '../../store/search-results-store';
 import { setActiveTab } from '../../store/search-results-slice';

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

@@ -3,7 +3,7 @@ import SearchResultsConfigurationContext from '../../search-results-configuratio
 
 import ItemPicker from '../item-picker';
 
-import Icon from '../icon';
+import Icon from '../../../shared/components/icon';
 import { findSortByType, getSortingName, getTranslations } from '../../../shared/utils/localization-util';
 import FlightSelection from '../flight/flight-selection/index';
 import { useFlightSearch } from '../flight/flight-search-context';

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

@@ -31,7 +31,7 @@ import {
   setFilters,
   setInitialFilters
 } from '../../store/search-results-slice';
-import { FlyInType, Filter, SearchSeed, SortByType } from '../../types';
+import { FlyInType, SearchSeed, SortByType } from '../../types';
 import useMediaQuery from '../../../shared/utils/use-media-query-util';
 import ItemPicker from '../item-picker';
 import {
@@ -63,13 +63,12 @@ import {
 import { getDateFromParams, getNumberFromParams, getRoomsFromParams, getStringFromParams } from '../../../shared/utils/query-string-util';
 import { concat, first, isEmpty, last, range } from 'lodash';
 import { Room } from '../../../booking-wizard/types';
-import Icon from '../icon';
+import Icon from '../../../shared/components/icon';
 import Itinerary from '../itinerary';
 import TabViews from '../tab-views';
 import FlyIn from '../../../shared/components/flyin/flyin';
 import HotelAccommodationResults from '../hotel/hotel-accommodation-results';
 import RoundTripResults from '../round-trip/round-trip-results';
-import FlightResults from '../flight/flight-results';
 import { dateToDateStruct, findSortByType, getSortingName, getTranslations } from '../../../shared/utils/localization-util';
 import { FlightSearchProvider } from '../flight/flight-search-context';
 import FlightResultsContainer from './flight-search-results';
@@ -95,7 +94,7 @@ import {
   parseHotelId,
   toDateOnlyString
 } from '../../utils/query-utils';
-import { getRequestRoomsFromPackagingSegments, getRoomIndexFromLine, getSelectedOptionsPerRoom } from '../../utils/packaging-utils';
+import { getRequestRoomsFromPackagingSegments, getSelectedOptionsPerRoom } from '../../utils/packaging-utils';
 import FullItinerary from '../itinerary/full-itinerary';
 import { getFlightKey } from '../../utils/flight-utils';
 import IndependentFlightOption from '../flight/flight-selection/independent-flight-option';
@@ -1108,7 +1107,7 @@ const SearchResultsContainer: React.FC = () => {
       transactionId: transactionId ?? context.packagingEntry?.transactionId ?? '',
       language: context.languageCode ?? 'en-GB'
     });
-    console.log('Built nextEntry', nextEntry);
+
     if (!nextEntry) return;
 
     dispatch(setEditablePackagingEntry(nextEntry));
@@ -1658,7 +1657,7 @@ const SearchResultsContainer: React.FC = () => {
                       </>
                     )}
 
-                    {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && context.packagingEntry && itinerary && (
+                    {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && context.packagingEntry && (
                       <FullItinerary isLoading={itineraryIsLoading} />
                     )}
                   </div>

package/src/search-results/components/tab-views/index.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import Icon from '../icon';
+import Icon from '../../../shared/components/icon';
 import { useDispatch, useSelector } from 'react-redux';
 import { SearchResultsRootState } from '../../store/search-results-store';
 import { setActiveTab } from '../../store/search-results-slice';

package/src/search-results/features/flights/flight-search-results-self-contained.tsx

@@ -3,7 +3,7 @@ import { Filter, SearchResult, SearchResultsConfiguration } from '../../types';
 import SearchResults from '../..';
 import { Footer, Navbar } from '../../../../src';
 import { TideLogo, language, languages, topLinks, navItems } from '../../../../src/content/navbar/placeholderData';
-import Icon from '../../components/icon';
+import Icon from '../../../shared/components/icon';
 
 interface FlightSearchResultsSelfContainedProps {}
 

package/src/search-results/features/hotels/hotel-flight-search-results-self-contained.tsx

@@ -3,7 +3,7 @@ import { SearchResult, SearchResultsConfiguration } from '../../types';
 import SearchResults from '../..';
 import { Navbar, Footer } from '../../../../src';
 import { TideLogo, language, languages, topLinks, navItems } from '../../../../src/content/navbar/placeholderData';
-import Icon from '../../components/icon';
+import Icon from '../../../shared/components/icon';
 
 interface HotelFlightSearchResultsSelfContainedProps {}
 

package/src/search-results/features/hotels/hotel-search-results-self-contained.tsx

@@ -3,7 +3,7 @@ import { Filter, SearchResult, SearchResultsConfiguration } from '../../types';
 import SearchResults from '../..';
 import { Navbar, Footer } from '../../../../src';
 import { TideLogo, language, languages, topLinks, navItems } from '../../../../src/content/navbar/placeholderData';
-import Icon from '../../components/icon';
+import Icon from '../../../shared/components/icon';
 
 interface HotelSearchResultsSelfContainedProps {}
 

package/src/shared/components/flyin/flyin.tsx

@@ -127,7 +127,7 @@ const FlyIn: React.FC<FlyInProps> = ({
         isPackageEditFlow || flyInType === 'flight-outward-results' || flyInType === 'flight-return-results' || flyInType === 'acco-results'
           ? 'flyin--large'
           : ''
-      }`}>
+      } ${flyInType === 'excursion-results' || flyInType === 'excursion-details' ? 'flyin--medium' : ''}`}>
       <div className={`flyin__panel ${isOpen ? 'flyin__panel--active' : ''}`} ref={panelRef}>
         <div className="flyin__content">
           <div className="flyin__content-title-row">