@qite/tide-booking-component 1.4.104 → 1.4.105

package/build/build-esm/src/search-results/components/excursions/day-by-day-excursions.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+interface DayByDayExcursionsProps {}
+declare const DayByDayExcursions: React.FC<DayByDayExcursionsProps>;
+export default DayByDayExcursions;

package/build/build-esm/src/search-results/components/excursions/excursion-details.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ExcursionDetails: React.FC;
+export default ExcursionDetails;

package/build/build-esm/src/search-results/components/excursions/excursion-results.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { SearchSeed } from '../../types';
+interface ExcursionResultsProps {
+  isFlyIn?: boolean;
+  activeSearchSeed?: SearchSeed | null;
+}
+declare const ExcursionResults: React.FC<ExcursionResultsProps>;
+export default ExcursionResults;

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

@@ -1,5 +1,127 @@
 import { SearchResultsRootState } from './search-results-store';
 import { PackagingFlightResponse } from '@qite/tide-client';
+export declare const selectPackagingAccoResults: ((state: {
+  searchResults: import('./search-results-slice').SearchResultsState;
+}) => import('@qite/tide-client').PackagingAccommodationResponse[]) & {
+  clearCache: () => void;
+  resultsCount: () => number;
+  resetResultsCount: () => void;
+} & {
+  resultFunc: (resultFuncArgs_0: import('./search-results-slice').SearchResultsState) => import('@qite/tide-client').PackagingAccommodationResponse[];
+  memoizedResultFunc: ((
+    resultFuncArgs_0: import('./search-results-slice').SearchResultsState
+  ) => import('@qite/tide-client').PackagingAccommodationResponse[]) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  };
+  lastResult: () => import('@qite/tide-client').PackagingAccommodationResponse[];
+  dependencies: [(state: SearchResultsRootState) => import('./search-results-slice').SearchResultsState];
+  recomputations: () => number;
+  resetRecomputations: () => void;
+  dependencyRecomputations: () => number;
+  resetDependencyRecomputations: () => void;
+} & {
+  memoize: typeof import('reselect').weakMapMemoize;
+  argsMemoize: typeof import('reselect').weakMapMemoize;
+};
+export declare const selectSelectedPackagingAccoResultCode: ((state: {
+  searchResults: import('./search-results-slice').SearchResultsState;
+}) => string | null) & {
+  clearCache: () => void;
+  resultsCount: () => number;
+  resetResultsCount: () => void;
+} & {
+  resultFunc: (resultFuncArgs_0: import('./search-results-slice').SearchResultsState) => string | null;
+  memoizedResultFunc: ((resultFuncArgs_0: import('./search-results-slice').SearchResultsState) => string | null) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  };
+  lastResult: () => string | null;
+  dependencies: [(state: SearchResultsRootState) => import('./search-results-slice').SearchResultsState];
+  recomputations: () => number;
+  resetRecomputations: () => void;
+  dependencyRecomputations: () => number;
+  resetDependencyRecomputations: () => void;
+} & {
+  memoize: typeof import('reselect').weakMapMemoize;
+  argsMemoize: typeof import('reselect').weakMapMemoize;
+};
+export declare const selectSelectedPackagingAccoResult: ((state: {
+  searchResults: import('./search-results-slice').SearchResultsState;
+}) => import('@qite/tide-client').PackagingAccommodationResponse | null) & {
+  clearCache: () => void;
+  resultsCount: () => number;
+  resetResultsCount: () => void;
+} & {
+  resultFunc: (
+    resultFuncArgs_0: import('@qite/tide-client').PackagingAccommodationResponse[],
+    resultFuncArgs_1: string | null
+  ) => import('@qite/tide-client').PackagingAccommodationResponse | null;
+  memoizedResultFunc: ((
+    resultFuncArgs_0: import('@qite/tide-client').PackagingAccommodationResponse[],
+    resultFuncArgs_1: string | null
+  ) => import('@qite/tide-client').PackagingAccommodationResponse | null) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  };
+  lastResult: () => import('@qite/tide-client').PackagingAccommodationResponse | null;
+  dependencies: [
+    ((state: { searchResults: import('./search-results-slice').SearchResultsState }) => import('@qite/tide-client').PackagingAccommodationResponse[]) & {
+      clearCache: () => void;
+      resultsCount: () => number;
+      resetResultsCount: () => void;
+    } & {
+      resultFunc: (resultFuncArgs_0: import('./search-results-slice').SearchResultsState) => import('@qite/tide-client').PackagingAccommodationResponse[];
+      memoizedResultFunc: ((
+        resultFuncArgs_0: import('./search-results-slice').SearchResultsState
+      ) => import('@qite/tide-client').PackagingAccommodationResponse[]) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+      };
+      lastResult: () => import('@qite/tide-client').PackagingAccommodationResponse[];
+      dependencies: [(state: SearchResultsRootState) => import('./search-results-slice').SearchResultsState];
+      recomputations: () => number;
+      resetRecomputations: () => void;
+      dependencyRecomputations: () => number;
+      resetDependencyRecomputations: () => void;
+    } & {
+      memoize: typeof import('reselect').weakMapMemoize;
+      argsMemoize: typeof import('reselect').weakMapMemoize;
+    },
+    ((state: { searchResults: import('./search-results-slice').SearchResultsState }) => string | null) & {
+      clearCache: () => void;
+      resultsCount: () => number;
+      resetResultsCount: () => void;
+    } & {
+      resultFunc: (resultFuncArgs_0: import('./search-results-slice').SearchResultsState) => string | null;
+      memoizedResultFunc: ((resultFuncArgs_0: import('./search-results-slice').SearchResultsState) => string | null) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+      };
+      lastResult: () => string | null;
+      dependencies: [(state: SearchResultsRootState) => import('./search-results-slice').SearchResultsState];
+      recomputations: () => number;
+      resetRecomputations: () => void;
+      dependencyRecomputations: () => number;
+      resetDependencyRecomputations: () => void;
+    } & {
+      memoize: typeof import('reselect').weakMapMemoize;
+      argsMemoize: typeof import('reselect').weakMapMemoize;
+    }
+  ];
+  recomputations: () => number;
+  resetRecomputations: () => void;
+  dependencyRecomputations: () => number;
+  resetDependencyRecomputations: () => void;
+} & {
+  memoize: typeof import('reselect').weakMapMemoize;
+  argsMemoize: typeof import('reselect').weakMapMemoize;
+};
 export declare const selectPackagingFlightResults: ((state: {
   searchResults: import('./search-results-slice').SearchResultsState;
 }) => PackagingFlightResponse[]) & {

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

@@ -1,4 +1,4 @@
-import { ExtendedFlightSearchResponseItem, Filter, FlyInType, SortByType } from '../types';
+import { ExcursionSearchParams, ExtendedFlightSearchResponseItem, Filter, FlyInType, SortByType } from '../types';
 import {
   BookingPackage,
   BookingPackageItem,
@@ -40,6 +40,9 @@ export interface SearchResultsState {
   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'>,
@@ -99,6 +102,31 @@ export declare const setResults: import('@reduxjs/toolkit').ActionCreatorWithPay
   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'>;
+  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';
@@ -178,4 +179,29 @@ export type SearchSeed = {
   destinationAirport?: string | null;
   rooms: BookingPackageRequestRoom[];
 };
-export type FlyInType = 'flight-outward-results' | 'flight-return-results' | 'flight-details' | 'acco-results' | 'acco-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/shared/components/flyin/flyin.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PortalQsmType } from '@qite/tide-client';
-import { FlyInType, SortByType } from '../../../search-results/types';
+import { FlyInType, SearchSeed, SortByType } from '../../../search-results/types';
 type FlyInProps = {
   srpType: PortalQsmType;
   isOpen: boolean;
@@ -12,6 +12,7 @@ type FlyInProps = {
   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/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.104",
+  "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/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;