@qite/tide-booking-component 1.4.105 → 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

@@ -1108,7 +1108,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 +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>

package/src/shared/translations/ar-SA.json

@@ -382,5 +382,9 @@
     "DURATION_DESC": "المدة تنازلياً",
     "TRAVEL_GROUP": "مجموعة المسافرين",
     "EXCURSION": "رحلة"
+  },
+  "ITINERARY": {
+    "DAY": "اليوم",
+    "NO_ITEMS": "لا توجد عناصر لهذا اليوم."
   }
 }

package/src/shared/translations/da-DK.json

@@ -382,5 +382,9 @@
     "DURATION_DESC": "Varighed faldende",
     "TRAVEL_GROUP": "Rejseselskab",
     "EXCURSION": "Udflugt"
+  },
+  "ITINERARY": {
+    "DAY": "Dag",
+    "NO_ITEMS": "Ingen elementer for denne dag."
   }
 }

package/src/shared/translations/de-DE.json

@@ -382,5 +382,9 @@
     "PRICE": "Preis",
     "TRAVEL_GROUP": "Reisegruppe",
     "EXCURSION": "Ausflug"
+  },
+  "ITINERARY": {
+    "DAY": "Tag",
+    "NO_ITEMS": "Keine Elemente für diesen Tag."
   }
 }

package/src/shared/translations/en-GB.json

@@ -386,5 +386,9 @@
     "ARRIVAL_AIRPORTS": "Arrival airports",
     "TRAVEL_GROUP": "Travel group",
     "EXCURSION": "Excursion"
+  },
+  "ITINERARY": {
+    "DAY": "Day",
+    "NO_ITEMS": "No items for this day."
   }
 }

package/src/shared/translations/es-ES.json

@@ -382,5 +382,9 @@
     "PRICE": "Precio",
     "TRAVEL_GROUP": "Grupo de viaje",
     "EXCURSION": "Excursión"
+  },
+  "ITINERARY": {
+    "DAY": "Día",
+    "NO_ITEMS": "No hay elementos para este día."
   }
 }

package/src/shared/translations/fr-BE.json

@@ -386,5 +386,9 @@
     "PRICE": "Prix",
     "TRAVEL_GROUP": "Groupe de voyageurs",
     "EXCURSION": "Excursion"
+  },
+  "ITINERARY": {
+    "DAY": "Jour",
+    "NO_ITEMS": "Aucun élément pour ce jour."
   }
 }

package/src/shared/translations/fr-FR.json

@@ -382,5 +382,9 @@
     "PRICE": "Prix",
     "TRAVEL_GROUP": "Groupe de voyageurs",
     "EXCURSION": "Excursion"
+  },
+  "ITINERARY": {
+    "DAY": "Jour",
+    "NO_ITEMS": "Aucun élément pour ce jour."
   }
 }

package/src/shared/translations/is-IS.json

@@ -382,5 +382,9 @@
     "PRICE": "Verð",
     "TRAVEL_GROUP": "Ferðahópur",
     "EXCURSION": "Útflutningur"
+  },
+  "ITINERARY": {
+    "DAY": "Dagur",
+    "NO_ITEMS": "Engar upplýsingar fyrir þennan dag."
   }
 }

package/src/shared/translations/it-IT.json

@@ -382,5 +382,9 @@
     "PRICE": "Prezzo",
     "TRAVEL_GROUP": "Gruppo di viaggio",
     "EXCURSION": "Escursione"
+  },
+  "ITINERARY": {
+    "DAY": "Giorno",
+    "NO_ITEMS": "Nessun elemento per questo giorno."
   }
 }

package/src/shared/translations/ja-JP.json

@@ -382,5 +382,9 @@
     "PRICE": "価格",
     "TRAVEL_GROUP": "旅行グループ",
     "EXCURSION": "エクスカーション"
+  },
+  "ITINERARY": {
+    "DAY": "日",
+    "NO_ITEMS": "この日のアイテムはありません。"
   }
 }

package/src/shared/translations/nl-BE.json

@@ -386,5 +386,9 @@
     "PRICE": "Prijs",
     "TRAVEL_GROUP": "Reisgezelschap",
     "EXCURSION": "Excursie"
+  },
+  "ITINERARY": {
+    "DAY": "Dag",
+    "NO_ITEMS": "Geen elementen voor deze dag."
   }
 }

package/src/shared/translations/nl-NL.json

@@ -382,5 +382,9 @@
     "PRICE": "Prijs",
     "TRAVEL_GROUP": "Reisgezelschap",
     "EXCURSION": "Excursie"
+  },
+  "ITINERARY": {
+    "DAY": "Dag",
+    "NO_ITEMS": "Geen elementen voor deze dag."
   }
 }

package/src/shared/translations/no-NO.json

@@ -382,5 +382,9 @@
     "PRICE": "Pris",
     "TRAVEL_GROUP": "Reisefølge",
     "EXCURSION": "Utflukt"
+  },
+  "ITINERARY": {
+    "DAY": "Dag",
+    "NO_ITEMS": "Ingen elementer for denne dagen."
   }
 }

package/src/shared/translations/pl-PL.json

@@ -382,5 +382,9 @@
     "PRICE": "Cena",
     "TRAVEL_GROUP": "Grupa podróżnych",
     "EXCURSION": "Wycieczka"
+  },
+  "ITINERARY": {
+    "DAY": "Dzień",
+    "NO_ITEMS": "Brak elementów dla tego dnia."
   }
 }

package/src/shared/translations/pt-PT.json

@@ -382,5 +382,9 @@
     "PRICE": "Preço",
     "TRAVEL_GROUP": "Grupo de viajantes",
     "EXCURSION": "Excursão"
+  },
+  "ITINERARY": {
+    "DAY": "Dia",
+    "NO_ITEMS": "Nenhum item para este dia."
   }
 }

package/src/shared/translations/sv-SE.json

@@ -382,5 +382,9 @@
     "PRICE": "Pris",
     "TRAVEL_GROUP": "Resesällskap",
     "EXCURSION": "Utflykt"
+  },
+  "ITINERARY": {
+    "DAY": "Dag",
+    "NO_ITEMS": "Inga element för denna dag."
   }
 }