@qite/tide-booking-component 1.4.103 → 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/filters/filters.tsx

@@ -1,9 +1,7 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { Filter, FilterOption } from '../../types';
 import MultiRangeFilter from '../multi-range-filter';
 import SearchResultsConfigurationContext from '../../search-results-configuration-context';
-import { resetFilters, setFilters } from '../../store/search-results-slice';
-import { useDispatch } from 'react-redux';
 import Spinner from '../spinner/spinner';
 import Icon from '../icon';
 import { getTranslations } from '../../../shared/utils/localization-util';
@@ -14,10 +12,13 @@ interface FiltersProps {
   isOpen: boolean;
   handleSetIsOpen: () => void;
   isLoading?: boolean;
+  setFilters: (filters: Filter[]) => void;
+  resetFilters: (filters: Filter[]) => void;
 }
 
-const Filters: React.FC<FiltersProps> = ({ initialFilters, filters, isOpen, handleSetIsOpen, isLoading }) => {
+const Filters: React.FC<FiltersProps> = ({ initialFilters, filters, isOpen, handleSetIsOpen, isLoading, setFilters, resetFilters }) => {
   const context = useContext(SearchResultsConfigurationContext);
+
   if (!context || !context.showFilters) {
     return null;
   }
@@ -25,8 +26,6 @@ const Filters: React.FC<FiltersProps> = ({ initialFilters, filters, isOpen, hand
   const translations = getTranslations(context?.languageCode ?? 'en-GB');
   const [visibleFilters, setVisibleFilters] = useState<Record<string, boolean>>({});
 
-  const dispatch = useDispatch();
-
   const toggleFilterVisibility = (filterId: string) => {
     setVisibleFilters((prev) => ({
       ...prev,
@@ -44,7 +43,7 @@ const Filters: React.FC<FiltersProps> = ({ initialFilters, filters, isOpen, hand
       };
     });
 
-    dispatch(setFilters(updated));
+    setFilters(updated);
   };
 
   const handleSliderChange = (filter: Filter, newMin: number, newMax: number) => {
@@ -58,12 +57,12 @@ const Filters: React.FC<FiltersProps> = ({ initialFilters, filters, isOpen, hand
       };
     });
 
-    dispatch(setFilters(updated));
+    setFilters(updated);
   };
 
   const handleFullReset = () => {
     if (!isLoading) {
-      dispatch(resetFilters(initialFilters));
+      resetFilters(initialFilters);
     }
   };