@qite/tide-booking-component 1.4.123 → 1.4.125

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

@@ -1,374 +0,0 @@
-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;