@qite/tide-booking-component 1.4.122 → 1.4.124

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

@@ -1,374 +1,374 @@
-import React, { useContext, useEffect, useMemo, useRef } from 'react';
-import { useSelector } from 'react-redux';
-import { SearchResultsRootState } from '../../store/search-results-store';
-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 | string | null) => {
-  if (!date) return '';
-
-  try {
-    return new Intl.DateTimeFormat('nl-BE', {
-      weekday: 'long',
-      day: '2-digit',
-      month: '2-digit',
-      year: 'numeric'
-    }).format(new Date(date));
-  } catch {
-    return '';
-  }
-};
-
-const escapeHtml = (value?: string | null) => {
-  if (!value) return '';
-
-  return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-};
-
-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">
-        <div class="itinerary-empty">Geen reisroute beschikbaar.</div>
-      </div>
-    `;
-  }
-
-  const allNodes = itinerary.nodes ?? [];
-
-  const nodesHtml = allNodes
-    .map((node) => {
-      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
-        ? uniqueItems
-            .map(
-              (item) => `
-                <article class="itinerary-item" data-template="${escapeHtml(item.templateName)}">
-                  ${item.contents ?? ''}
-                </article>
-              `
-            )
-            .join('')
-        : `<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">
-            <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>
-          </header>
-
-          <div class="itinerary-node__content">
-            ${accommodationBanner}
-            ${itemsHtml}
-          </div>
-        </section>
-      `;
-    })
-    .join('');
-
-  const defaultItemsHtml =
-    itinerary.defaultItems && itinerary.defaultItems.length > 0
-      ? `
-        <section class="itinerary-default-items">
-          <h2 class="itinerary-default-items__title">Algemene info</h2>
-          ${getUniqueItems(itinerary.defaultItems)
-            .map(
-              (item) => `
-                <article class="itinerary-item" data-template="${escapeHtml(item.templateName)}">
-                  ${item.contents ?? ''}
-                </article>
-              `
-            )
-            .join('')}
-        </section>
-      `
-      : '';
-
-  return `
-    <div class="itinerary-shell">
-      ${itinerary.title ? `<header class="itinerary-shell__header"><h1 class="itinerary-shell__title">${escapeHtml(itinerary.title)}</h1></header>` : ''}
-
-      <div class="itinerary-shell__content">
-        ${nodesHtml}
-        ${defaultItemsHtml}
-      </div>
-    </div>
-  `;
-};
-
-interface FullItineraryProps {
-  isLoading: boolean;
-}
-
-const FullItinerary: React.FC<FullItineraryProps> = ({ isLoading }) => {
-  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, translations), [itinerary, translations]);
-
-  useEffect(() => {
-    if (isLoading) {
-      return;
-    }
-
-    const host = hostRef.current;
-
-    if (!host) {
-      return;
-    }
-
-    const shadowRoot = host.shadowRoot ?? host.attachShadow({ mode: 'open' });
-
-    shadowRootRef.current = shadowRoot;
-
-    shadowRoot.innerHTML = `
-      <style>
-        :host {
-          all: initial;
-          display: block;
-          width: 100%;
-        }
-
-        *,
-        *::before,
-        *::after {
-          box-sizing: border-box;
-        }
-
-        .itinerary-shell {
-          width: 100%;
-          margin: 0 auto;
-          font-family: 'Outfit', sans-serif;
-          color: #222;
-        }
-
-        .itinerary-shell__header {
-          margin-bottom: 24px;
-        }
-
-        .itinerary-shell__title {
-          margin: 0;
-          font-size: 32px;
-          line-height: 1.2;
-        }
-
-        .itinerary-shell__content {
-          display: grid;
-          gap: 24px;
-        }
-
-        .itinerary-node {
-          border: 1px solid #e5e7eb;
-          border-radius: 16px;
-          overflow: hidden;
-          background: #fff;
-          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
-        }
-
-        .itinerary-node__header {
-          display: flex;
-          gap: 16px;
-          align-items: center;
-          border-bottom: 1px solid #eef0f2;
-          background: #fafafa;
-        }
-
-        .itinerary-node__day {
-          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__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 {
-          margin: 0;
-          font-size: 22px;
-          line-height: 1.25;
-        }
-
-        .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;
-          overflow: hidden;
-          background: #fff;
-        }
-
-        .itinerary-node__empty,
-        .itinerary-empty {
-          padding: 20px;
-          border: 1px dashed #d1d5db;
-          border-radius: 12px;
-          color: #6b7280;
-          background: #fafafa;
-        }
-
-        .itinerary-default-items {
-          border: 1px solid #e5e7eb;
-          border-radius: 16px;
-          padding: 20px;
-          background: #fff;
-          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
-        }
-
-        .itinerary-default-items__title {
-          margin: 0 0 16px;
-          font-size: 22px;
-        }
-
-        @media (max-width: 768px) {
-          .itinerary-shell {
-            padding: 16px;
-          }
-        }
-
-        ${itinerary?.styleSheetBody ?? ''}
-      </style>
-
-      ${html}
-    `;
-  }, [html, itinerary?.styleSheetBody, isLoading]);
-
-  return (
-    <>
-      {isLoading && <Spinner label={translations.SRP.LOADING_ITINERARY} />}
-      <div ref={hostRef} style={{ display: isLoading ? 'none' : 'block' }} />
-    </>
-  );
-};
-
-export default FullItinerary;
+import React, { useContext, useEffect, useMemo, useRef } from 'react';
+import { useSelector } from 'react-redux';
+import { SearchResultsRootState } from '../../store/search-results-store';
+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 | string | null) => {
+  if (!date) return '';
+
+  try {
+    return new Intl.DateTimeFormat('nl-BE', {
+      weekday: 'long',
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric'
+    }).format(new Date(date));
+  } catch {
+    return '';
+  }
+};
+
+const escapeHtml = (value?: string | null) => {
+  if (!value) return '';
+
+  return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+};
+
+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">
+        <div class="itinerary-empty">Geen reisroute beschikbaar.</div>
+      </div>
+    `;
+  }
+
+  const allNodes = itinerary.nodes ?? [];
+
+  const nodesHtml = allNodes
+    .map((node) => {
+      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
+        ? uniqueItems
+            .map(
+              (item) => `
+                <article class="itinerary-item" data-template="${escapeHtml(item.templateName)}">
+                  ${item.contents ?? ''}
+                </article>
+              `
+            )
+            .join('')
+        : `<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">
+            <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>
+          </header>
+
+          <div class="itinerary-node__content">
+            ${accommodationBanner}
+            ${itemsHtml}
+          </div>
+        </section>
+      `;
+    })
+    .join('');
+
+  const defaultItemsHtml =
+    itinerary.defaultItems && itinerary.defaultItems.length > 0
+      ? `
+        <section class="itinerary-default-items">
+          <h2 class="itinerary-default-items__title">Algemene info</h2>
+          ${getUniqueItems(itinerary.defaultItems)
+            .map(
+              (item) => `
+                <article class="itinerary-item" data-template="${escapeHtml(item.templateName)}">
+                  ${item.contents ?? ''}
+                </article>
+              `
+            )
+            .join('')}
+        </section>
+      `
+      : '';
+
+  return `
+    <div class="itinerary-shell">
+      ${itinerary.title ? `<header class="itinerary-shell__header"><h1 class="itinerary-shell__title">${escapeHtml(itinerary.title)}</h1></header>` : ''}
+
+      <div class="itinerary-shell__content">
+        ${nodesHtml}
+        ${defaultItemsHtml}
+      </div>
+    </div>
+  `;
+};
+
+interface FullItineraryProps {
+  isLoading: boolean;
+}
+
+const FullItinerary: React.FC<FullItineraryProps> = ({ isLoading }) => {
+  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, translations), [itinerary, translations]);
+
+  useEffect(() => {
+    if (isLoading) {
+      return;
+    }
+
+    const host = hostRef.current;
+
+    if (!host) {
+      return;
+    }
+
+    const shadowRoot = host.shadowRoot ?? host.attachShadow({ mode: 'open' });
+
+    shadowRootRef.current = shadowRoot;
+
+    shadowRoot.innerHTML = `
+      <style>
+        :host {
+          all: initial;
+          display: block;
+          width: 100%;
+        }
+
+        *,
+        *::before,
+        *::after {
+          box-sizing: border-box;
+        }
+
+        .itinerary-shell {
+          width: 100%;
+          margin: 0 auto;
+          font-family: 'Outfit', sans-serif;
+          color: #222;
+        }
+
+        .itinerary-shell__header {
+          margin-bottom: 24px;
+        }
+
+        .itinerary-shell__title {
+          margin: 0;
+          font-size: 32px;
+          line-height: 1.2;
+        }
+
+        .itinerary-shell__content {
+          display: grid;
+          gap: 24px;
+        }
+
+        .itinerary-node {
+          border: 1px solid #e5e7eb;
+          border-radius: 16px;
+          overflow: hidden;
+          background: #fff;
+          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
+        }
+
+        .itinerary-node__header {
+          display: flex;
+          gap: 16px;
+          align-items: center;
+          border-bottom: 1px solid #eef0f2;
+          background: #fafafa;
+        }
+
+        .itinerary-node__day {
+          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__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 {
+          margin: 0;
+          font-size: 22px;
+          line-height: 1.25;
+        }
+
+        .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;
+          overflow: hidden;
+          background: #fff;
+        }
+
+        .itinerary-node__empty,
+        .itinerary-empty {
+          padding: 20px;
+          border: 1px dashed #d1d5db;
+          border-radius: 12px;
+          color: #6b7280;
+          background: #fafafa;
+        }
+
+        .itinerary-default-items {
+          border: 1px solid #e5e7eb;
+          border-radius: 16px;
+          padding: 20px;
+          background: #fff;
+          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
+        }
+
+        .itinerary-default-items__title {
+          margin: 0 0 16px;
+          font-size: 22px;
+        }
+
+        @media (max-width: 768px) {
+          .itinerary-shell {
+            padding: 16px;
+          }
+        }
+
+        ${itinerary?.styleSheetBody ?? ''}
+      </style>
+
+      ${html}
+    `;
+  }, [html, itinerary?.styleSheetBody, isLoading]);
+
+  return (
+    <>
+      {isLoading && <Spinner label={translations.SRP.LOADING_ITINERARY} />}
+      <div ref={hostRef} style={{ display: isLoading ? 'none' : 'block' }} />
+    </>
+  );
+};
+
+export default FullItinerary;