@qite/tide-booking-component 1.4.103 → 1.4.105

package/build/build-esm/src/search-results/store/search-results-slice.d.ts

@@ -1,4 +1,4 @@
-import { AccommodationFlyInStep, ExtendedFlightSearchResponseItem, Filter, SortByType } from '../types';
+import { ExcursionSearchParams, ExtendedFlightSearchResponseItem, Filter, FlyInType, SortByType } from '../types';
 import {
   BookingPackage,
   BookingPackageItem,
@@ -17,22 +17,32 @@ export interface SearchResultsState {
   packagingAccoSearchDetails: PackagingAccommodationResponse[];
   selectedPackagingAccoResultCode: string | null;
   packagingFlightResults: PackagingFlightResponse[];
+  filteredPackagingFlightResults: PackagingFlightResponse[];
   selectedPackagingFlight: PackagingFlightResponse | null;
+  selectedOutwardKey: string | null;
+  selectedReturnKey: string | null;
   selectedFlight: ExtendedFlightSearchResponseItem | null;
   selectedFlightDetails: ExtendedFlightSearchResponseItem | null;
   bookingPackageDetails: BookingPackage | null;
+  priceDetails: BookingPriceDetails | null;
   isLoading: boolean;
   flightsLoading: boolean;
-  filters: Filter[];
   selectedSortType: SortByType | null;
+  selectedFlightSortType: SortByType | null;
+  filters: Filter[];
+  initialFilters: Filter[];
+  flightFilters: Filter[];
+  initialFlightFilters: Filter[];
   activeTab: string | null;
   currentPage: number;
-  flyInIsOpen: boolean;
-  editablePackagingEntry: PackagingEntry | null;
   transactionId: string | null;
-  accommodationFlyInStep: AccommodationFlyInStep;
-  priceDetails: BookingPriceDetails | null;
+  flyInIsOpen: boolean;
+  flyInType: FlyInType | null;
   itinerary: ClientPortalItinerary | null;
+  editablePackagingEntry: PackagingEntry | null;
+  excursionSearchParams: ExcursionSearchParams | null;
+  selectedExcursionSearchResult: PackagingAccommodationResponse | null;
+  confirmedExcursionsByDay: Record<string, PackagingAccommodationResponse[]>;
 }
 export declare const setResults: import('@reduxjs/toolkit').ActionCreatorWithPayload<BookingPackageItem[], 'searchResults/setResults'>,
   setFilteredResults: import('@reduxjs/toolkit').ActionCreatorWithPayload<BookingPackageItem[], 'searchResults/setFilteredResults'>,
@@ -42,6 +52,10 @@ export declare const setResults: import('@reduxjs/toolkit').ActionCreatorWithPay
     PackagingAccommodationResponse[],
     'searchResults/setFilteredPackagingAccoResults'
   >,
+  setFilteredPackagingFlightResults: import('@reduxjs/toolkit').ActionCreatorWithPayload<
+    PackagingFlightResponse[],
+    'searchResults/setFilteredPackagingFlightResults'
+  >,
   setPackagingAccoSearchDetails: import('@reduxjs/toolkit').ActionCreatorWithPayload<
     PackagingAccommodationResponse[],
     'searchResults/setPackagingAccoSearchDetails'
@@ -69,17 +83,50 @@ export declare const setResults: import('@reduxjs/toolkit').ActionCreatorWithPay
   >,
   setIsLoading: import('@reduxjs/toolkit').ActionCreatorWithPayload<boolean, 'searchResults/setIsLoading'>,
   setFlightsLoading: import('@reduxjs/toolkit').ActionCreatorWithPayload<boolean, 'searchResults/setFlightsLoading'>,
+  setInitialFilters: import('@reduxjs/toolkit').ActionCreatorWithPayload<Filter[], 'searchResults/setInitialFilters'>,
   setFilters: import('@reduxjs/toolkit').ActionCreatorWithPayload<Filter[], 'searchResults/setFilters'>,
   resetFilters: import('@reduxjs/toolkit').ActionCreatorWithPayload<Filter[], 'searchResults/resetFilters'>,
+  setInitialFlightFilters: import('@reduxjs/toolkit').ActionCreatorWithPayload<Filter[], 'searchResults/setInitialFlightFilters'>,
+  setFlightFilters: import('@reduxjs/toolkit').ActionCreatorWithPayload<Filter[], 'searchResults/setFlightFilters'>,
+  resetFlightFilters: import('@reduxjs/toolkit').ActionCreatorWithPayload<Filter[], 'searchResults/resetFlightFilters'>,
   setSortType: import('@reduxjs/toolkit').ActionCreatorWithPayload<SortByType | null, 'searchResults/setSortType'>,
+  setFlightSortType: import('@reduxjs/toolkit').ActionCreatorWithPayload<SortByType | null, 'searchResults/setFlightSortType'>,
   setActiveTab: import('@reduxjs/toolkit').ActionCreatorWithPayload<string | null, 'searchResults/setActiveTab'>,
   setCurrentPage: import('@reduxjs/toolkit').ActionCreatorWithPayload<number, 'searchResults/setCurrentPage'>,
   resetSearchState: import('@reduxjs/toolkit').ActionCreatorWithoutPayload<'searchResults/resetSearchState'>,
   setFlyInIsOpen: import('@reduxjs/toolkit').ActionCreatorWithPayload<boolean, 'searchResults/setFlyInIsOpen'>,
   setEditablePackagingEntry: import('@reduxjs/toolkit').ActionCreatorWithPayload<PackagingEntry | null, 'searchResults/setEditablePackagingEntry'>,
   setTransactionId: import('@reduxjs/toolkit').ActionCreatorWithPayload<string | null, 'searchResults/setTransactionId'>,
-  setAccommodationFlyInStep: import('@reduxjs/toolkit').ActionCreatorWithPayload<AccommodationFlyInStep, 'searchResults/setAccommodationFlyInStep'>,
+  setFlyInType: import('@reduxjs/toolkit').ActionCreatorWithPayload<FlyInType | null, 'searchResults/setFlyInType'>,
   setPriceDetails: import('@reduxjs/toolkit').ActionCreatorWithPayload<BookingPriceDetails | null, 'searchResults/setPriceDetails'>,
-  setItinerary: import('@reduxjs/toolkit').ActionCreatorWithPayload<ClientPortalItinerary | null, 'searchResults/setItinerary'>;
+  setItinerary: import('@reduxjs/toolkit').ActionCreatorWithPayload<ClientPortalItinerary | null, 'searchResults/setItinerary'>,
+  setSelectedOutwardKey: import('@reduxjs/toolkit').ActionCreatorWithPayload<string | null, 'searchResults/setSelectedOutwardKey'>,
+  setSelectedReturnKey: import('@reduxjs/toolkit').ActionCreatorWithPayload<string | null, 'searchResults/setSelectedReturnKey'>,
+  resetFlightSelection: import('@reduxjs/toolkit').ActionCreatorWithoutPayload<'searchResults/resetFlightSelection'>,
+  setExcursionSearchParams: import('@reduxjs/toolkit').ActionCreatorWithPayload<ExcursionSearchParams, 'searchResults/setExcursionSearchParams'>,
+  setSelectedExcursionSearchResult: import('@reduxjs/toolkit').ActionCreatorWithPayload<
+    PackagingAccommodationResponse | null,
+    'searchResults/setSelectedExcursionSearchResult'
+  >,
+  confirmExcursionForDay: import('@reduxjs/toolkit').ActionCreatorWithPayload<
+    {
+      dayKey: string;
+      excursion: PackagingAccommodationResponse;
+    },
+    'searchResults/confirmExcursionForDay'
+  >,
+  removeConfirmedExcursionForDay: import('@reduxjs/toolkit').ActionCreatorWithPayload<
+    {
+      dayKey: string;
+      excursionCode: string;
+    },
+    'searchResults/removeConfirmedExcursionForDay'
+  >,
+  clearConfirmedExcursionsForDay: import('@reduxjs/toolkit').ActionCreatorWithPayload<
+    {
+      dayKey: string;
+    },
+    'searchResults/clearConfirmedExcursionsForDay'
+  >;
 declare const _default: import('@reduxjs/toolkit').Reducer<SearchResultsState>;
 export default _default;

package/build/build-esm/src/search-results/types.d.ts

@@ -2,6 +2,7 @@ import {
   BookingPackage,
   BookingPackageRequestRoom,
   FlightSearchResponseItem,
+  PackageMainRoom,
   PackagingEntry,
   WebsiteConfigurationSearchConfiguration
 } from '@qite/tide-client';
@@ -45,7 +46,19 @@ export interface SearchResultsConfiguration {
   packagingEntry?: PackagingEntry | null;
 }
 export type FilterType = 'checkbox' | 'toggle' | 'slider' | 'star-rating';
-export type FilterProperty = 'regime' | 'accommodation' | 'max-duration' | 'price' | 'rating' | 'theme';
+export type FilterProperty =
+  | 'regime'
+  | 'accommodation'
+  | 'max-duration'
+  | 'price'
+  | 'rating'
+  | 'theme'
+  | 'airline'
+  | 'numberOfStops'
+  | 'departureRange'
+  | 'departureAirport'
+  | 'arrivalAirport'
+  | 'travelDuration';
 export interface FilterOption {
   label: string;
   value: string | number | string[] | number[];
@@ -166,4 +179,29 @@ export type SearchSeed = {
   destinationAirport?: string | null;
   rooms: BookingPackageRequestRoom[];
 };
-export type AccommodationFlyInStep = 'results' | 'details';
+export type FlyInType =
+  | 'flight-outward-results'
+  | 'flight-return-results'
+  | 'flight-details'
+  | 'acco-results'
+  | 'acco-details'
+  | 'excursion-results'
+  | 'excursion-details';
+export interface ExcursionSearchParams {
+  date: string;
+  fromDate: string;
+  toDate: string;
+  countryId?: number | null;
+  regionId?: number | null;
+  oordId?: number | null;
+  locationId?: number | null;
+  locationName?: string;
+  hotelCode: string;
+  hotelName: string;
+  accommodationCode: string | null;
+  accommodationName: string | null;
+  rooms?: PackageMainRoom[];
+  currencyCode?: string;
+  languageCode?: string;
+  source?: 'day-by-day-excursions';
+}

package/build/build-esm/src/search-results/utils/query-utils.d.ts

@@ -1,6 +1,7 @@
 import { PackagingEntryLine, PackagingEntry, BookingPackageRequestRoom, PackagingRoom } from '@qite/tide-client';
 export declare const GROUP_TOUR_SERVICE_TYPE = 1;
 export declare const ACCOMMODATION_SERVICE_TYPE = 3;
+export declare const EXCURSION_SERVICE_TYPE = 4;
 export declare const FLIGHT_SERVICE_TYPE = 7;
 export declare const toDateOnlyString: (value: string | Date) => string;
 export declare const getPrimaryAccommodationLine: (lines: PackagingEntryLine[]) => PackagingEntryLine | undefined;

package/build/build-esm/src/search-results/utils/search-results-utils.d.ts

@@ -1,14 +1,16 @@
-import { BookingPackageItem, PackagingAccommodationResponse } from '@qite/tide-client';
+import { BookingPackageItem, PackagingAccommodationResponse, PackagingFlightResponse } from '@qite/tide-client';
 import { Filter, SortByType, TideTag } from '../types';
 export declare const enrichFiltersWithResults: (results: BookingPackageItem[], filters: Filter[] | undefined, tags: TideTag[]) => Filter[];
-export declare const enrichFiltersWithPackageAccoResults: (
-  results: PackagingAccommodationResponse[],
-  filters: Filter[] | undefined,
-  tags: TideTag[]
-) => Filter[];
+export declare const enrichFiltersWithPackageAccoResults: (results: PackagingAccommodationResponse[], tags: TideTag[]) => Filter[];
+export declare const enrichFiltersWithPackageFlightResults: (results: PackagingFlightResponse[], tags: TideTag[], translations: any) => Filter[];
 export declare const applyFilters: (results: BookingPackageItem[], filters: Filter[], sortBy: SortByType | null) => BookingPackageItem[];
 export declare const applyFiltersToPackageAccoResults: (
   results: PackagingAccommodationResponse[],
   filters: Filter[],
   sortBy: SortByType | null
 ) => PackagingAccommodationResponse[];
+export declare const applyFiltersToPackageFlightResults: (
+  results: PackagingFlightResponse[],
+  filters: Filter[],
+  sortBy: SortByType | null
+) => PackagingFlightResponse[];

package/build/build-esm/src/shared/components/flyin/flyin.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
 import { PortalQsmType } from '@qite/tide-client';
-import { AccommodationFlyInStep } from '../../../search-results/types';
+import { FlyInType, SearchSeed, SortByType } from '../../../search-results/types';
 type FlyInProps = {
-  title: string;
   srpType: PortalQsmType;
   isOpen: boolean;
   setIsOpen: (open: boolean) => void;
@@ -10,8 +9,10 @@ type FlyInProps = {
   onPanelRef?: (el: HTMLDivElement | null) => void;
   detailsLoading: boolean;
   handleConfirm?: () => void;
-  accommodationStep?: AccommodationFlyInStep;
+  flyInType?: FlyInType | null;
   isPackageEditFlow?: boolean;
+  sortByTypes?: SortByType[];
+  activeSearchSeed?: SearchSeed | null;
 };
 declare const FlyIn: React.FC<FlyInProps>;
 export default FlyIn;

package/build/build-esm/src/shared/components/flyin/packaging-flights-flyin.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type FlightsFlyInProps = {
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+};
+declare const PackageingFlightsFlyIn: React.FC<FlightsFlyInProps>;
+export default PackageingFlightsFlyIn;

package/build/build-esm/src/shared/utils/localization-util.d.ts

@@ -335,6 +335,7 @@ export declare const getTranslations: (language: string) => {
     CONFIRM: string;
     TRAVELERS: string;
     GROUP_TOUR: string;
+    ALL_TRAVELERS: string;
   };
   SRP: {
     SHOW_MORE: string;
@@ -386,6 +387,7 @@ export declare const getTranslations: (language: string) => {
     DURATION_ASC: string;
     DURATION_DESC: string;
     TRAVEL_GROUP: string;
+    EXCURSION: string;
   };
 };
 export declare const locales: {
@@ -422,3 +424,4 @@ export declare const calculateNights: (fromDate: Date, toDate: Date) => number;
 export declare const calculateDays: (fromDate: Date, toDate: Date) => number;
 export declare const getSortingName: (translations: any, sortByType: SortByType) => string;
 export declare const findSortByType: (sortByTypes: SortByType[], sortKey: string, direction: string) => SortByType;
+export declare const getDatesBetween: (fromDate: string, toDate: string) => Date[];

package/build/build-esm/src/shared/utils/tide-api-utils.d.ts

@@ -1,4 +1,10 @@
 import { TideClientConfig } from '@qite/tide-client';
 import { ApiSettingsState } from '../types';
+export declare const tideConnection: {
+  host: string;
+  apiKey: string;
+  catalogueIds: number[];
+  officeId: number;
+};
 export declare function buildTideClientConfig(settings?: ApiSettingsState): TideClientConfig;
 export declare const selectAgentToken: () => string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.4.103",
+  "version": "1.4.105",
   "description": "React Booking wizard & Booking product component for Tide",
   "main": "build/build-cjs/index.js",
   "types": "build/build-cjs/src/index.d.ts",
@@ -29,7 +29,7 @@
   "devDependencies": {
     "@jsonurl/jsonurl": "^1.1.4",
     "@popperjs/core": "^2.10.2",
-    "@qite/tide-client": "^1.1.163",
+    "@qite/tide-client": "^1.1.166",
     "@reduxjs/toolkit": "^2.8.2",
     "@rollup/plugin-commonjs": "^19.0.1",
     "@rollup/plugin-json": "^4.1.0",

package/src/booking-wizard/features/flight-options/index.tsx

@@ -8,7 +8,7 @@ import SettingsContext from '../../settings-context';
 import { useAppDispatch } from '../../store';
 import { FlightFilterOptions, GroupedFlights } from '../../types';
 import { setCurrentStep, setFlights, setPackage } from '../booking/booking-slice';
-import { ROOM_OPTIONS_FORM_STEP, TRAVELERS_FORM_STEP } from '../booking/constants';
+import { OPTIONS_FORM_STEP, ROOM_OPTIONS_FORM_STEP, TRAVELERS_FORM_STEP } from '../booking/constants';
 import {
   selectBookingQueryString,
   selectIsFetchingProductOptions,
@@ -43,7 +43,11 @@ const FlightOptionsForm: React.FC<FlightOptionsFormProps> = () => {
 
   const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
     if (settings.skipRouter) {
-      dispatch(setCurrentStep(ROOM_OPTIONS_FORM_STEP));
+      if (settings.roomOptions.isHidden) {
+        dispatch(setCurrentStep(OPTIONS_FORM_STEP));
+      } else {
+        dispatch(setCurrentStep(ROOM_OPTIONS_FORM_STEP));
+      }
     } else {
       if (settings.roomOptions.isHidden) {
         navigate(`${!settings.skipBasePathInRouting ? settings.basePath : ''}${settings.options.pathSuffix}?${bookingQueryString}`);

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

@@ -0,0 +1,169 @@
+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, 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 '../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 formattedDay = format(day, 'd');
+        const formattedMonth = format(day, 'MMM');
+        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">{formattedDay}</p>
+                <p>{formattedMonth}</p>
+              </div>
+              <div className="search__results__label__text">
+                <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;