@qite/tide-booking-component 1.4.104 → 1.4.105

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

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

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

@@ -0,0 +1,186 @@
+import React, { useContext, useEffect, useState } from 'react';
+import Spinner from '../spinner/spinner';
+import { useDispatch, useSelector } from 'react-redux';
+import { SearchResultsRootState } from '../../store/search-results-store';
+import { getTranslations } from '../../../shared/utils/localization-util';
+import SearchResultsConfigurationContext from '../../search-results-configuration-context';
+import {
+  PackagingAccommodationRequest,
+  PackagingAccommodationResponse,
+  PackagingDestination,
+  searchPackagingExcursions,
+  TideClientConfig
+} from '@qite/tide-client';
+import { EXCURSION_SERVICE_TYPE } from '../../utils/query-utils';
+import { SearchSeed } from '../../types';
+import he from 'he';
+import { setFlyInType, setSelectedExcursionSearchResult } from '../../store/search-results-slice';
+
+interface ExcursionResultsProps {
+  isFlyIn?: boolean;
+  activeSearchSeed?: SearchSeed | null;
+}
+
+const ExcursionResults: React.FC<ExcursionResultsProps> = ({ isFlyIn, activeSearchSeed }) => {
+  const context = useContext(SearchResultsConfigurationContext);
+  const dispatch = useDispatch();
+  const [isLoading, setIsLoading] = useState(false);
+  const [excursions, setExcursions] = useState<PackagingAccommodationResponse[] | null>(null);
+
+  const { flyInIsOpen, flyInType, excursionSearchParams, transactionId } = useSelector((state: SearchResultsRootState) => state.searchResults);
+
+  useEffect(() => {
+    if (!context || !activeSearchSeed || !excursionSearchParams) return;
+
+    (async () => {
+      try {
+        setIsLoading(true);
+        console.log('Excursion search params changed, fetching excursions...', excursionSearchParams);
+
+        const config: TideClientConfig = {
+          host: context.tideConnection.host,
+          apiKey: context.tideConnection.apiKey
+        };
+
+        const destination = excursionSearchParams.locationId
+          ? { id: Number(excursionSearchParams.locationId), type: 'location' }
+          : excursionSearchParams.oordId
+          ? { id: Number(excursionSearchParams.oordId), type: 'oord' }
+          : excursionSearchParams.regionId
+          ? { id: Number(excursionSearchParams.regionId), type: 'region' }
+          : excursionSearchParams.countryId
+          ? { id: Number(excursionSearchParams.countryId), type: 'country' }
+          : { id: 0, type: null };
+
+        const allPax = activeSearchSeed.rooms.flatMap((room) => room.pax);
+
+        const searchRequest: PackagingAccommodationRequest = {
+          transactionId: transactionId ?? '',
+          officeId: context.tideConnection.officeId ?? 1,
+          agentId: context.agentId ?? null,
+          portalId: context.portalId ?? null,
+          catalogueId: context.searchConfiguration.defaultCatalogueId ?? 0,
+          searchConfigurationId: context.searchConfiguration.id,
+          language: context.languageCode ?? 'en-GB',
+          serviceType: EXCURSION_SERVICE_TYPE,
+          fromDate: excursionSearchParams.fromDate,
+          toDate: excursionSearchParams.toDate,
+          destination: {
+            id: destination.id,
+            isCountry: destination.type === 'country',
+            isRegion: destination.type === 'region',
+            isOord: destination.type === 'oord',
+            isLocation: destination.type === 'location',
+            isAirport: false,
+            code: ''
+          } as PackagingDestination,
+          productCode: '',
+          // rooms: activeSearchSeed.rooms.map((room) => ({
+          //   travellers: room.pax.map((pax) => ({
+          //     id: pax.id,
+          //     age: pax.age,
+          //     dateOfBirth: pax.dateOfBirth
+          //   }))
+          // })),
+          rooms: [
+            {
+              travellers: allPax.map((pax) => ({
+                id: pax.id,
+                age: pax.age,
+                dateOfBirth: pax.dateOfBirth
+              }))
+            }
+          ],
+          tagIds: []
+        };
+
+        const packageExcursionSearchResults = await searchPackagingExcursions(config, searchRequest);
+        console.log('Excursion search results', packageExcursionSearchResults);
+        setExcursions(packageExcursionSearchResults);
+      } catch (err) {
+        console.error('Excursion search failed', err);
+      } finally {
+        setIsLoading(false);
+      }
+    })();
+  }, [context, activeSearchSeed, excursionSearchParams, transactionId]);
+
+  if (!context || !activeSearchSeed) {
+    return null;
+  }
+
+  if (!flyInIsOpen || flyInType !== 'excursion-results') {
+    return null;
+  }
+
+  const translations = getTranslations(context.languageCode ?? 'en-GB');
+
+  const handleChange = (excursion: PackagingAccommodationResponse): void => {
+    console.log('Selected excursion', excursion);
+    dispatch(setFlyInType('excursion-details'));
+    dispatch(setSelectedExcursionSearchResult(excursion));
+  };
+
+  return isLoading ? (
+    <Spinner />
+  ) : (
+    <div className="flyin__content flyin__content--columns">
+      {/* <Filters
+                initialFilters={initialFilters}
+                filters={filters}
+                isOpen={false}
+                handleSetIsOpen={() => { }}
+                // handleApplyFilters={() => setSearchTrigger((prev) => prev + 1)}
+                isLoading={isLoading}
+                setFilters={(filters) => dispatch(setFilters(filters))}
+                resetFilters={(filters) => dispatch(resetFilters(filters))}
+              /> */}
+      <div className="search__results__wrapper">
+        <div className="search__result-row">
+          <span className="search__result-row-text">
+            {!isLoading && (
+              <>
+                {excursions?.length && excursions.length}
+                &nbsp;{translations.SRP.TOTAL_RESULTS_LABEL}
+              </>
+            )}
+          </span>
+          {/* {sortByTypes && sortByTypes.length > 0 && (
+                    <div className="search__result-row-filter">
+                      <ItemPicker
+                        items={sortByTypes}
+                        selection={selectedSortType?.label || undefined}
+                        selectedSortByType={selectedSortType}
+                        label={translations.SRP.SORTBY}
+                        placeholder={translations.SRP.SORTBY}
+                        classModifier="travel-class-picker__items"
+                        valueFormatter={(value, direction) => getSortingName(translations, findSortByType(sortByTypes, value, direction ?? 'asc'))}
+                        onPick={(newSortKey, direction) => handleSortChange(newSortKey, direction)}
+                      />
+                    </div>
+                  )} */}
+        </div>
+        <div className="search__results__cards search__results__cards--compact">
+          {excursions &&
+            excursions.length > 0 &&
+            excursions.map((excursion) => (
+              <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)')}>
+                {excursion.contents ? <div dangerouslySetInnerHTML={{ __html: he.decode(excursion.contents) }}></div> : 'no contents'}
+                <div className="search__result-card__footer">
+                  <button type="button" className="cta cta--select" onClick={() => handleChange(excursion)}>
+                    {translations?.SHARED.SELECT}
+                  </button>
+                </div>
+              </div>
+            ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ExcursionResults;

package/src/search-results/components/hotel/hotel-card.tsx

@@ -34,9 +34,6 @@ const HotelCard: React.FC<HotelCardProps> = ({ result, translations }) => {
             onClick={() => handleChange(result.code)}>
             {selectedPackagingAccoResultCode === result.code ? translations?.SHARED.SELECTED : translations?.SHARED.SELECT}
           </button>
-          {/* <button type="button" className="cta cta--select" onClick={() => console.log('Clicked on customCard with id:', result.id)}>
-            {translations?.SRP.VIEW_DETAILS}
-          </button> */}
         </div>
       </div>
     );

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

@@ -315,10 +315,7 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height, fill
           fill={fill ?? 'currentColor'}>
           <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
           {title && <title>{title}</title>}
-          <path
-            d="M64 64C28.7 64 0 92.7 0 128l0 64C0 200.8 7.4 207.7 15.7 210.6 34.5 217.1 48 235 48 256s-13.5 38.9-32.3 45.4C7.4 304.3 0 311.2 0 320l0 64c0 35.3 28.7 64 64 64l448 0c35.3 0 64-28.7 64-64l0-64c0-8.8-7.4-15.7-15.7-18.6-18.8-6.5-32.3-24.4-32.3-45.4s13.5-38.9 32.3-45.4c8.3-2.9 15.7-9.8 15.7-18.6l0-64c0-35.3-28.7-64-64-64L64 64zM416 336l0-160-256 0 0 160 256 0zM112 160c0-17.7 14.3-32 32-32l288 0c17.7 0 32 14.3 32 32l0 192c0 17.7-14.3 32-32 32l-288 0c-17.7 0-32-14.3-32-32l0-192z"
-            fill="currentColor"
-          />
+          <path d="M64 64C28.7 64 0 92.7 0 128l0 64C0 200.8 7.4 207.7 15.7 210.6 34.5 217.1 48 235 48 256s-13.5 38.9-32.3 45.4C7.4 304.3 0 311.2 0 320l0 64c0 35.3 28.7 64 64 64l448 0c35.3 0 64-28.7 64-64l0-64c0-8.8-7.4-15.7-15.7-18.6-18.8-6.5-32.3-24.4-32.3-45.4s13.5-38.9 32.3-45.4c8.3-2.9 15.7-9.8 15.7-18.6l0-64c0-35.3-28.7-64-64-64L64 64zM416 336l0-160-256 0 0 160 256 0zM112 160c0-17.7 14.3-32 32-32l288 0c17.7 0 32 14.3 32 32l0 192c0 17.7-14.3 32-32 32l-288 0c-17.7 0-32-14.3-32-32l0-192z" />
         </svg>
       );