@qite/tide-booking-component 1.4.123 → 1.4.125

package/src/search-results/components/book-packaging-entry/wl-sidebar.tsx

@@ -1,173 +0,0 @@
-import React, { useContext, useMemo } from 'react';
-import { formatDate, getDateOnlyTime, getTranslations } from '../../../shared/utils/localization-util';
-import { SearchResultsRootState } from '../../store/search-results-store';
-import { useSelector } from 'react-redux';
-import SearchResultsConfigurationContext from '../../search-results-configuration-context';
-
-import { ACCOMMODATION_SERVICE_TYPE, FLIGHT_SERVICE_TYPE } from '../../utils/query-utils';
-import { first, last, sum } from 'lodash';
-import { SearchSeed } from '../../types';
-import { getTravelersText } from '../../../booking-wizard/features/sidebar/sidebar-util';
-import { RoomTraveler } from '../../../booking-wizard/types';
-
-import { BookingPackageFlightMetaData, BookingPriceDetail, PackagingAccommodationResponse, PackagingEntryLine, PortalQsmType } from '@qite/tide-client';
-import Spinner from '../spinner/spinner';
-import SharedSidebar from '../../../shared/booking/shared-sidebar';
-import { getImageSrcFromHtml } from '../../../shared/utils/booking-summary';
-
-interface WLSidebarProps {
-  activeSearchSeed: SearchSeed | null;
-  packagingAccoResult: PackagingAccommodationResponse | null;
-}
-
-const mapToSidebarFlightMetaData = (entryLine: PackagingEntryLine) => {
-  return {
-    flightLines: entryLine.flightInformation?.flightLines.map((f) => ({
-      number: f.flightNumber,
-      departureDate: f.departureDate,
-      departureAirport: f.departureAirportCode,
-      departureAirportDescription: f.departureAirportDescription,
-      departureTime: f.departureTime,
-      arrivalDate: f.arrivalDate,
-      arrivalAirport: f.arrivalAirportCode,
-      arrivalAirportDescription: f.arrivalAirportDescription,
-      arrivalTime: f.arrivalTime,
-      flightClass: '',
-      travelClass: '',
-      airline: f.airlineDescription,
-      airlineCode: f.airlineCode,
-      operatingAirlineCode: f.operatingAirlineCode,
-      operatingAirlineDescription: f.operatingAirlineDescription,
-      durationInTicks: f.durationInTicks
-    })),
-    luggageIncluded: false, // Not present in editablePackagingEntry, set default
-    bagageAllowed: false, // Not present in editablePackagingEntry, set default
-    bagage: '', // Not present in editablePackagingEntry, set default
-    mealIncluded: false, // Not present in editablePackagingEntry, set default
-    meal: '', // Not present in editablePackagingEntry, set default
-    durationInTicks: entryLine.flightInformation?.flightLines.reduce((s, { durationInTicks }) => s + (durationInTicks ?? 0), 0)
-  } as BookingPackageFlightMetaData;
-};
-
-const selectSeparatePackagePriceDetails = (priceDetails: BookingPriceDetail[]) => {
-  const result: BookingPriceDetail[] = [];
-  const filteredPriceDetails = priceDetails.filter((priceDetail) => priceDetail.isSeparate);
-
-  filteredPriceDetails.forEach((priceDetail) => {
-    const priceDetailToMerge = result.find(
-      (x) => x.productCode === priceDetail.productCode && x.accommodationCode === priceDetail.accommodationCode && x.productType === priceDetail.productType
-    );
-    if (priceDetailToMerge) {
-      priceDetailToMerge.total += priceDetail.total;
-      priceDetailToMerge.price += priceDetail.price;
-    } else {
-      result.push(Object.assign({}, priceDetail));
-    }
-  });
-
-  return result;
-};
-
-const WLSidebar: React.FC<WLSidebarProps> = ({ activeSearchSeed, packagingAccoResult }) => {
-  const context = useContext(SearchResultsConfigurationContext);
-
-  const { editablePackagingEntry, priceDetails } = useSelector((state: SearchResultsRootState) => state.searchResults);
-
-  const translations = getTranslations(context?.languageCode ?? 'en-GB');
-
-  const sortedLines = useMemo(() => {
-    return [...(editablePackagingEntry?.lines ?? [])].sort((a, b) => {
-      const dateA = getDateOnlyTime(a.from);
-      const dateB = getDateOnlyTime(b.from);
-
-      if (dateA !== dateB) {
-        return dateA - dateB;
-      }
-
-      return (a.order ?? Infinity) - (b.order ?? Infinity);
-    });
-  }, [editablePackagingEntry]);
-
-  const accoImage = useMemo(() => {
-    return getImageSrcFromHtml(packagingAccoResult?.contents);
-  }, [packagingAccoResult?.contents]);
-
-  if (!context || !editablePackagingEntry) {
-    return null;
-  }
-
-  const firstEntryLine = first(sortedLines);
-  const accommodationLines = editablePackagingEntry.lines.filter((line) => line.serviceType === ACCOMMODATION_SERVICE_TYPE);
-  const accommodationLine = first(accommodationLines) ?? firstEntryLine;
-
-  const location =
-    context.searchConfiguration.qsmType === PortalQsmType.Accommodation
-      ? packagingAccoResult?.name ??
-        accommodationLine?.location?.name ??
-        accommodationLine?.oord?.name ??
-        accommodationLine?.region?.name ??
-        accommodationLine?.country?.name ??
-        firstEntryLine?.location?.name
-      : accommodationLine?.location?.name ??
-        accommodationLine?.oord?.name ??
-        accommodationLine?.region?.name ??
-        accommodationLine?.country?.name ??
-        firstEntryLine?.location?.name;
-
-  const rooms =
-    activeSearchSeed?.rooms.map((room) => {
-      const adults = room.pax
-        .filter((p) => p.age && p.age >= 18)
-        .map((p) => {
-          return { id: p.id, age: p.age } as RoomTraveler;
-        });
-      const children = room.pax
-        .filter((p) => p.age && p.age < 18)
-        .map((p) => {
-          return { id: p.id, age: p.age } as RoomTraveler;
-        });
-      return { adults, children };
-    }) || [];
-
-  const travelerRooms = getTravelersText(rooms, translations);
-
-  const flightSegments = sortedLines.filter(
-    (line) => line.serviceType === FLIGHT_SERVICE_TYPE && line.flightInformation && Array.isArray(line.flightInformation.flightLines)
-  );
-  const outboundFlight = first(flightSegments);
-  const returnFlight = flightSegments.length > 1 ? last(flightSegments) : undefined;
-  const outboundFlightMetaData = outboundFlight ? mapToSidebarFlightMetaData(outboundFlight) : undefined;
-  const returnFlightMetaData = returnFlight ? mapToSidebarFlightMetaData(returnFlight) : undefined;
-
-  const basePrice = sum(priceDetails?.details.filter((pd) => pd.isInPackage).map((pd) => pd.price * pd.amount) ?? []);
-  const separateExtraPriceDetails = priceDetails?.details.filter((pd) => !pd.isInPackage && pd.isSeparate) ?? [];
-  const totalPrice = sum([basePrice, ...separateExtraPriceDetails.map((priceDetail) => priceDetail.price * priceDetail.amount)]);
-
-  const includedCosts = selectSeparatePackagePriceDetails(priceDetails?.details.filter((pd) => pd.isInPackage) ?? []);
-  return (
-    <SharedSidebar
-      productName={location ?? ''}
-      thumbnailUrl={accoImage ?? context.destinationImage?.url}
-      translations={translations}
-      travelerRooms={travelerRooms}
-      startDateText={first(sortedLines)?.from && formatDate(new Date(first(sortedLines)!.from))}
-      endDateText={last(sortedLines)?.to && formatDate(new Date(last(sortedLines)!.to))}
-      isLoading={!editablePackagingEntry || !priceDetails}
-      loaderComponent={<Spinner />}
-      departureFlightMetaData={outboundFlightMetaData}
-      returnFlightMetaData={returnFlightMetaData}
-      includedServiceTypes={editablePackagingEntry.lines.map((line) => line.serviceType)}
-      packagingAccommodations={accommodationLines}
-      basePrice={basePrice}
-      commission={priceDetails?.commission}
-      totalPrice={totalPrice}
-      includedCosts={includedCosts}
-      extraCosts={separateExtraPriceDetails}
-      deposit={priceDetails?.deposit}
-      isUnavailable={false}
-      agent={context.agentId}
-    />
-  );
-};
-
-export default WLSidebar;

package/src/search-results/components/excursions/day-by-day-excursions.tsx

@@ -1,168 +0,0 @@
-import React, { useContext, useMemo } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { SearchResultsRootState } from '../../store/search-results-store';
-import SearchResultsConfigurationContext from '../../search-results-configuration-context';
-import { getDatesBetween, getLocale, getTranslations } from '../../../shared/utils/localization-util';
-import { selectSelectedPackagingAccoResult } from '../../store/search-results-selectors';
-import { removeConfirmedExcursionForDay, setExcursionSearchParams, setFlyInIsOpen, setFlyInType } from '../../store/search-results-slice';
-import { ExcursionSearchParams } from '../../types';
-import { format } from 'date-fns';
-import he from 'he';
-import Icon from '../../../shared/components/icon';
-import { PackagingAccommodationResponse } from '@qite/tide-client';
-
-interface DayByDayExcursionsProps {}
-
-const getExcursionContentWithUpdatedPrice = (contents: string | null | undefined, totalPrice: number, currencyCode?: string | null) => {
-  if (!contents) return '';
-
-  const decodedHtml = he.decode(contents);
-  const parser = new DOMParser();
-  const doc = parser.parseFromString(decodedHtml, 'text/html');
-
-  const priceElement = doc.querySelector('[data-excursion-price]');
-
-  if (priceElement) {
-    priceElement.textContent = new Intl.NumberFormat('nl-BE', {
-      style: 'currency',
-      currency: currencyCode ?? 'EUR'
-    }).format(totalPrice);
-  }
-
-  return doc.body.innerHTML;
-};
-
-const DayByDayExcursions: React.FC<DayByDayExcursionsProps> = () => {
-  const context = useContext(SearchResultsConfigurationContext);
-  const translations = getTranslations(context?.languageCode ?? 'en-GB');
-  const dispatch = useDispatch();
-
-  const { confirmedExcursionsByDay } = useSelector((state: SearchResultsRootState) => state.searchResults);
-  const selectedPackagingAccoResult = useSelector(selectSelectedPackagingAccoResult);
-
-  const stayDates = useMemo(() => {
-    if (!selectedPackagingAccoResult?.fromDate || !selectedPackagingAccoResult?.toDate) {
-      return [];
-    }
-
-    return getDatesBetween(selectedPackagingAccoResult.fromDate, selectedPackagingAccoResult.toDate);
-  }, [selectedPackagingAccoResult?.fromDate, selectedPackagingAccoResult?.toDate]);
-
-  const handleSearchExcursions = (day: Date) => {
-    if (!selectedPackagingAccoResult) {
-      return;
-    }
-
-    const searchParams: ExcursionSearchParams = {
-      date: day.toISOString(),
-      fromDate: day.toISOString(),
-      toDate: day.toISOString(),
-      countryId: selectedPackagingAccoResult.countryId,
-      regionId: selectedPackagingAccoResult.regionId,
-      oordId: selectedPackagingAccoResult.oordId,
-      locationId: selectedPackagingAccoResult.locationId,
-      locationName: selectedPackagingAccoResult.locationName,
-      accommodationCode: selectedPackagingAccoResult.rooms?.[0]?.options?.find((option) => option.isSelected)?.accommodationCode ?? null,
-      accommodationName: selectedPackagingAccoResult.rooms?.[0]?.options?.find((option) => option.isSelected)?.accommodationName ?? null,
-      hotelCode: selectedPackagingAccoResult.code,
-      hotelName: selectedPackagingAccoResult.name,
-      rooms: selectedPackagingAccoResult?.rooms ?? []
-    };
-
-    dispatch(setExcursionSearchParams(searchParams));
-    dispatch(setFlyInIsOpen(true));
-    dispatch(setFlyInType('excursion-results'));
-  };
-
-  const getSelectedOptionsSummary = (excursion: PackagingAccommodationResponse) => {
-    const options = excursion.rooms.flatMap((room) => room.options ?? []);
-    return options.filter((option) => option.isSelected);
-  };
-
-  if (!selectedPackagingAccoResult || stayDates.length === 0) {
-    return null;
-  }
-
-  return (
-    <>
-      {stayDates.map((day) => {
-        const dayKey = format(day, 'yyyy-MM-dd');
-        const confirmedExcursions = confirmedExcursionsByDay[dayKey] ?? [];
-
-        return (
-          <React.Fragment key={dayKey}>
-            <div className="search__results__label search__results__label--secondary">
-              <div className="search__results__label__date">
-                <p className="search__results__label__date-date">{format(day, 'd', { locale: getLocale(context?.languageCode ?? 'en-GB') })}</p>
-                <p>{format(day, 'MMM', { locale: getLocale(context?.languageCode ?? 'en-GB') })}</p>
-              </div>
-              <div className="search__results__label__text">
-                <Icon name="ui-excursion" height={16} />
-                <h3>
-                  {translations.SRP.SELECT} <strong>{translations.SRP.EXCURSION}</strong>
-                </h3>
-              </div>
-            </div>
-
-            <div className="search__results__cards__actions">
-              <span>Accommodation for this day: {selectedPackagingAccoResult.name}</span>
-
-              <button type="button" className="cta cta--secondary" onClick={() => handleSearchExcursions(day)}>
-                {confirmedExcursions.length > 0 ? 'Add another excursion' : `${translations.SRP.SELECT} ${translations.SRP.EXCURSION}`}
-              </button>
-            </div>
-
-            <div className="search__results__cards search__results__cards--compact">
-              {confirmedExcursions &&
-                confirmedExcursions.length > 0 &&
-                confirmedExcursions.map((excursion) => {
-                  const selectedOptions = getSelectedOptionsSummary(excursion);
-                  const totalPrice = selectedOptions.reduce((sum: number, option: any) => sum + (option.price || 0), 0);
-                  const updatedContents = getExcursionContentWithUpdatedPrice(excursion.contents, totalPrice, excursion.currencyCode);
-                  return (
-                    <div
-                      key={excursion.code}
-                      className="search__result-card__wrapper search__result-card__wrapper--custom"
-                      onMouseEnter={(e) => (e.currentTarget.style.transform = 'scale(1.02)')}
-                      onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}>
-                      <div dangerouslySetInnerHTML={{ __html: updatedContents }}></div>
-                      <div className="search__result-card__content--extra">
-                        <div className="search__result-card__content__wrapper">
-                          <div className="search__result-card__options">
-                            {selectedOptions.length > 0 &&
-                              selectedOptions.map((option) => (
-                                <div className="search__result-card__option" key={option.guid}>
-                                  <Icon name="ui-ticket" width={14} height={14} aria-hidden="true" />
-                                  <span>
-                                    {option.accommodationName}
-                                    {/* {option.paxIds?.length > 0 && (
-                                    <>
-                                      {' '}(Traveller{option.paxIds.length > 1 ? 's' : ''}{' '}{option.paxIds.map((id) => id + 1).join(', ')})
-                                    </>
-                                  )} */}
-                                  </span>
-                                </div>
-                              ))}
-                          </div>
-                        </div>
-                      </div>
-                      <div className="search__result-card__footer">
-                        <button
-                          type="button"
-                          className="cta cta--remove"
-                          onClick={() => dispatch(removeConfirmedExcursionForDay({ dayKey, excursionCode: excursion.code }))}>
-                          Remove
-                        </button>
-                      </div>
-                    </div>
-                  );
-                })}
-            </div>
-          </React.Fragment>
-        );
-      })}
-    </>
-  );
-};
-
-export default DayByDayExcursions;

package/src/search-results/components/excursions/excursion-details.tsx

@@ -1,340 +0,0 @@
-import React, { useContext, useMemo } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { first } from 'lodash';
-import { SearchResultsRootState } from '../../store/search-results-store';
-import { getTranslations } from '../../../shared/utils/localization-util';
-import SearchResultsConfigurationContext from '../../search-results-configuration-context';
-import { PackagingAccommodationResponse } from '@qite/tide-client';
-import { confirmExcursionForDay, setFlyInIsOpen, setSelectedExcursionSearchResult } from '../../store/search-results-slice';
-import { format, parseISO } from 'date-fns';
-
-type ExcursionOption = PackagingAccommodationResponse['rooms'][number]['options'][number];
-
-type GroupedExcursion = {
-  accommodationCode: string;
-  accommodationName: string;
-  options: ExcursionOption[];
-};
-
-const formatPrice = (price?: number, currencyCode?: string | null) => {
-  if (typeof price !== 'number') return '';
-
-  return new Intl.NumberFormat('nl-BE', {
-    style: 'currency',
-    currency: currencyCode ?? 'EUR'
-  }).format(price);
-};
-
-const getExcursionDayKey = (date: string | Date) => {
-  const parsed = typeof date === 'string' ? parseISO(date) : date;
-  return format(parsed, 'yyyy-MM-dd');
-};
-
-const getOptionPaxIds = (option: ExcursionOption): number[] => {
-  return Array.isArray(option.paxIds) ? Array.from(new Set(option.paxIds)).sort((a, b) => a - b) : [];
-};
-
-const optionAppliesToPax = (option: ExcursionOption, paxId: number) => {
-  return getOptionPaxIds(option).includes(paxId);
-};
-
-const optionAppliesToAllTravellers = (option: ExcursionOption, travellerCount: number) => {
-  const paxIds = getOptionPaxIds(option);
-  const expected = Array.from({ length: travellerCount }, (_, i) => i);
-
-  return paxIds.length === expected.length && paxIds.every((id, index) => id === expected[index]);
-};
-
-const groupOptionsByExcursion = (options: ExcursionOption[]): GroupedExcursion[] => {
-  const groupedMap = new Map<string, GroupedExcursion>();
-
-  options.forEach((option) => {
-    const key = option.accommodationCode;
-
-    if (!groupedMap.has(key)) {
-      groupedMap.set(key, {
-        accommodationCode: option.accommodationCode,
-        accommodationName: option.accommodationName,
-        options: []
-      });
-    }
-
-    groupedMap.get(key)!.options.push(option);
-  });
-
-  return Array.from(groupedMap.values());
-};
-
-const ExcursionDetails: React.FC = () => {
-  const context = useContext(SearchResultsConfigurationContext);
-  const dispatch = useDispatch();
-
-  const { selectedExcursionSearchResult, editablePackagingEntry, excursionSearchParams } = useSelector((state: SearchResultsRootState) => state.searchResults);
-
-  if (!context || !selectedExcursionSearchResult || !editablePackagingEntry || !excursionSearchParams?.date) {
-    return null;
-  }
-
-  const translations = getTranslations(context.languageCode ?? 'en-GB');
-  const travellerCount = editablePackagingEntry.pax.length;
-
-  const allOptions = useMemo(() => {
-    return selectedExcursionSearchResult.rooms.flatMap((room) => room.options ?? []);
-  }, [selectedExcursionSearchResult]);
-
-  const sharedOptions = useMemo(() => {
-    return allOptions.filter((option) => optionAppliesToAllTravellers(option, travellerCount));
-  }, [allOptions, travellerCount]);
-
-  const sharedExcursions = useMemo(() => {
-    return groupOptionsByExcursion(sharedOptions);
-  }, [sharedOptions]);
-
-  const paxGroups = useMemo(() => {
-    return editablePackagingEntry.pax.map((pax) => {
-      const paxOptions = allOptions.filter((option) => optionAppliesToPax(option, pax.id) && !optionAppliesToAllTravellers(option, travellerCount));
-
-      return {
-        pax,
-        paxId: pax.id,
-        excursions: groupOptionsByExcursion(paxOptions)
-      };
-    });
-  }, [editablePackagingEntry.pax, allOptions, travellerCount]);
-
-  const getSelectedSharedOption = () => {
-    return sharedOptions.find((option) => option.isSelected);
-  };
-
-  const getSelectedSharedOptionForExcursion = (accommodationCode: string) => {
-    return sharedOptions.find((option) => option.accommodationCode === accommodationCode && option.isSelected);
-  };
-
-  const getSelectedOptionForPax = (paxId: number) => {
-    return allOptions.find((option) => optionAppliesToPax(option, paxId) && !optionAppliesToAllTravellers(option, travellerCount) && option.isSelected);
-  };
-
-  const getSelectedOptionForExcursion = (paxId: number, accommodationCode: string) => {
-    return allOptions.find(
-      (option) =>
-        optionAppliesToPax(option, paxId) &&
-        !optionAppliesToAllTravellers(option, travellerCount) &&
-        option.accommodationCode === accommodationCode &&
-        option.isSelected
-    );
-  };
-
-  const handlePick = (selectedGuid?: string, paxId?: number) => {
-    const updatedExcursionSearchResult: PackagingAccommodationResponse = {
-      ...selectedExcursionSearchResult,
-      rooms: selectedExcursionSearchResult.rooms.map((room) => ({
-        ...room,
-        options: room.options.map((option) => {
-          const isSharedOption = optionAppliesToAllTravellers(option, travellerCount);
-
-          if (paxId === undefined) {
-            if (!isSharedOption) {
-              return option;
-            }
-
-            return {
-              ...option,
-              isSelected: option.guid === selectedGuid
-            };
-          }
-
-          if (isSharedOption || !optionAppliesToPax(option, paxId)) {
-            return option;
-          }
-
-          return {
-            ...option,
-            isSelected: option.guid === selectedGuid
-          };
-        })
-      }))
-    };
-
-    dispatch(setSelectedExcursionSearchResult(updatedExcursionSearchResult));
-  };
-
-  const calculateTotalPrice = () => {
-    const selectedOptions = allOptions.filter((option) => option.isSelected);
-    const totalPrice = selectedOptions.reduce((total, option) => total + (option.price || 0), 0);
-
-    return formatPrice(totalPrice, selectedExcursionSearchResult.currencyCode);
-  };
-
-  const getSharedPriceDifference = (accommodationCode: string) => {
-    const currentSelectedShared = getSelectedSharedOption();
-
-    let targetPrice = 0;
-
-    const selectedOption = getSelectedSharedOptionForExcursion(accommodationCode);
-
-    if (selectedOption?.price) {
-      targetPrice = selectedOption.price;
-    } else {
-      const firstOption = sharedOptions.find((option) => option.accommodationCode === accommodationCode);
-      targetPrice = firstOption?.price || 0;
-    }
-
-    return targetPrice - (currentSelectedShared?.price || 0);
-  };
-
-  const getPriceDifference = (currentSelectedPrice: number | undefined, paxId: number, accommodationCode: string) => {
-    let targetPrice = 0;
-
-    const selectedOption = getSelectedOptionForExcursion(paxId, accommodationCode);
-
-    if (selectedOption?.price) {
-      targetPrice = selectedOption.price;
-    } else {
-      const firstOption = allOptions.find(
-        (option) => optionAppliesToPax(option, paxId) && !optionAppliesToAllTravellers(option, travellerCount) && option.accommodationCode === accommodationCode
-      );
-
-      targetPrice = firstOption?.price || 0;
-    }
-
-    return targetPrice - (currentSelectedPrice || 0);
-  };
-
-  const formatPriceDifference = (difference: number, currencyCode: string) => {
-    if (difference === 0) {
-      return null;
-    }
-
-    const formattedAbsoluteValue = formatPrice(Math.abs(difference), currencyCode);
-    return `${difference > 0 ? '+' : '-'} ${formattedAbsoluteValue}`;
-  };
-
-  const getPriceDifferenceClassName = (difference: number) => {
-    if (difference < 0) {
-      return 'flyin__acco__price flyin__acco__price--decrease';
-    }
-
-    if (difference > 0) {
-      return 'flyin__acco__price flyin__acco__price--increase';
-    }
-
-    return 'flyin__acco__price';
-  };
-
-  const handleConfirm = () => {
-    const dayKey = getExcursionDayKey(excursionSearchParams.date);
-
-    dispatch(
-      confirmExcursionForDay({
-        dayKey,
-        excursion: selectedExcursionSearchResult
-      })
-    );
-
-    dispatch(setFlyInIsOpen(false));
-  };
-
-  return (
-    <>
-      <div className="flyin__content">
-        {sharedExcursions.length > 0 && (
-          <div className="flyin__acco">
-            <h3 className="flyin__acco__room-title">{translations.QSM.ALL_TRAVELERS}</h3>
-
-            <div className="flyin__acco__cards">
-              {sharedExcursions.map((excursion) => {
-                const selectedOption = getSelectedSharedOptionForExcursion(excursion.accommodationCode);
-                const priceDifference = getSharedPriceDifference(excursion.accommodationCode);
-
-                return (
-                  <div className="flyin__acco__card" key={`all-${excursion.accommodationCode}`}>
-                    <div className="flyin__acco__content">
-                      <h4 className="flyin__acco__title">{excursion.accommodationName}</h4>
-                    </div>
-
-                    <div className="flyin__acco__footer">
-                      <div className="flyin__acco__footer__actions">
-                        <button
-                          className={selectedOption ? 'cta cta--select cta--selected' : 'cta cta--select'}
-                          onClick={() => handlePick(selectedOption ? selectedOption.guid : first(excursion.options)?.guid)}>
-                          {selectedOption ? translations?.SHARED.SELECTED : translations?.SHARED.SELECT}
-                        </button>
-
-                        <div className="flyin__acco__price__wrapper">
-                          <span className={getPriceDifferenceClassName(priceDifference)}>
-                            {formatPriceDifference(priceDifference, selectedExcursionSearchResult.currencyCode)}
-                          </span>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-        )}
-
-        {paxGroups.map(({ pax, paxId, excursions }) => {
-          if (excursions.length === 0) {
-            return null;
-          }
-
-          const selectedPaxOption = getSelectedOptionForPax(paxId);
-
-          return (
-            <div className="flyin__acco" key={`pax-${pax.id}`}>
-              <h3 className="flyin__acco__room-title">
-                {translations.SUMMARY.TRAVELER} {pax.id + 1}
-              </h3>
-
-              <div className="flyin__acco__cards">
-                {excursions.map((excursion) => {
-                  const selectedOption = getSelectedOptionForExcursion(paxId, excursion.accommodationCode);
-                  const priceDifference = getPriceDifference(selectedPaxOption?.price, paxId, excursion.accommodationCode);
-
-                  return (
-                    <div className="flyin__acco__card" key={`${pax.id}-${excursion.accommodationCode}`}>
-                      <div className="flyin__acco__content">
-                        <h4 className="flyin__acco__title">{excursion.accommodationName}</h4>
-                      </div>
-
-                      <div className="flyin__acco__footer">
-                        <div className="flyin__acco__footer__actions">
-                          <button
-                            className={
-                              selectedPaxOption?.accommodationCode === excursion.accommodationCode ? 'cta cta--select cta--selected' : 'cta cta--select'
-                            }
-                            onClick={() => handlePick(selectedOption ? selectedOption.guid : first(excursion.options)?.guid, paxId)}>
-                            {selectedPaxOption?.accommodationCode === excursion.accommodationCode ? translations?.SHARED.SELECTED : translations?.SHARED.SELECT}
-                          </button>
-
-                          <div className="flyin__acco__price__wrapper">
-                            <span className={getPriceDifferenceClassName(priceDifference)}>
-                              {formatPriceDifference(priceDifference, selectedExcursionSearchResult.currencyCode)}
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  );
-                })}
-              </div>
-            </div>
-          );
-        })}
-      </div>
-
-      <div className="flyin__footer">
-        <div className="flyin__footer__price">
-          {translations.SHARED.TOTAL_PRICE}: {calculateTotalPrice()}
-        </div>
-
-        <button type="button" className="cta cta--primary" onClick={handleConfirm}>
-          {translations?.QSM.CONFIRM}
-        </button>
-      </div>
-    </>
-  );
-};
-
-export default ExcursionDetails;