@qite/tide-booking-component 1.4.79 → 1.4.81

package/build/build-esm/src/booking-wizard/features/booking/api.d.ts

@@ -22,5 +22,9 @@ declare const packageApi: {
   ) => Promise<{
     [key: string]: string;
   }>;
+  fetchCountries: (
+    signal: AbortSignal,
+    apiSettings?: ApiSettingsState
+  ) => Promise<import('@qite/tide-client').PageResult<import('@qite/tide-client').CountryItem>>;
 };
 export default packageApi;

package/build/build-esm/src/booking-wizard/features/booking/booking-slice.d.ts

@@ -10,6 +10,7 @@ import {
   BookingPackage,
   BookingPackageRoom,
   BookingTravelAgent,
+  CountryItem,
   PerBookingPackageOption
 } from '@qite/tide-client/build/types';
 import { BookingStep } from './constants';
@@ -46,6 +47,7 @@ export interface BookingState {
   travelersFirstStep: boolean;
   isFetching?: boolean;
   hasMounted: boolean;
+  countries?: CountryItem[];
 }
 export declare const fetchPackage: import('@reduxjs/toolkit').AsyncThunk<
   void,
@@ -61,6 +63,20 @@ export declare const fetchPackage: import('@reduxjs/toolkit').AsyncThunk<
     rejectedMeta?: unknown;
   }
 >;
+export declare const fetchCountries: import('@reduxjs/toolkit').AsyncThunk<
+  import('@qite/tide-client/build/types').PageResult<CountryItem>,
+  void,
+  {
+    state?: unknown;
+    dispatch?: import('@reduxjs/toolkit').ThunkDispatch<unknown, unknown, import('@reduxjs/toolkit').UnknownAction>;
+    extra?: unknown;
+    rejectValue?: unknown;
+    serializedErrorType?: unknown;
+    pendingMeta?: unknown;
+    fulfilledMeta?: unknown;
+    rejectedMeta?: unknown;
+  }
+>;
 export declare const setOfficeId: import('@reduxjs/toolkit').ActionCreatorWithPayload<number, 'booking/setOfficeId'>,
   setLanguageCode: import('@reduxjs/toolkit').ActionCreatorWithPayload<string, 'booking/setLanguageCode'>,
   setTranslations: import('@reduxjs/toolkit').ActionCreatorWithPayload<any, 'booking/setTranslations'>,

package/build/build-esm/src/booking-wizard/features/booking/selectors.d.ts

@@ -336,6 +336,7 @@ export declare const selectCalculateDeposit: (state: RootState) => boolean;
 export declare const selectIsRetry: (state: RootState) => boolean;
 export declare const selectStartDate: (state: RootState) => string | undefined;
 export declare const selectAgents: (state: RootState) => import('@qite/tide-client').BookingTravelAgent[] | undefined;
+export declare const selectCountries: (state: RootState) => import('@qite/tide-client').CountryItem[] | undefined;
 export declare const selectProductCode: (state: RootState) => string | undefined;
 export declare const selectAccommodationCodes: (state: RootState) => string[];
 export declare const selectAccommodationViews: (state: RootState) =>

package/build/build-esm/src/booking-wizard/types.d.ts

@@ -26,6 +26,7 @@ export interface Settings {
     mainBookerFormFields?: FormField[];
     countries?: Country[];
     travelersFirstStep?: boolean;
+    showAllCountries?: boolean;
   };
   summary: {
     pathSuffix: string;

package/build/build-esm/src/qsm/store/qsm-slice.d.ts

@@ -1,6 +1,7 @@
 import { MobileFilterType, Room, TravelerType, TypeaheadOption } from '../types';
 import { ReactNode } from 'react';
-import { TravelType, TravelClass, PortalQsmType } from '../../shared/types';
+import { TravelType, TravelClass } from '../../shared/types';
+import { PortalQsmType } from '@qite/tide-client';
 export interface QSMState {
   qsmType?: PortalQsmType;
   selectedOrigin?: string;

package/build/build-esm/src/qsm/types.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { PortalQsmType, TravelClass, TravelType } from '../shared/types';
-import { WebsiteConfigurationSearchConfiguration } from '@qite/tide-client';
+import { TravelClass, TravelType } from '../shared/types';
+import { WebsiteConfigurationSearchConfiguration, PortalQsmType } from '@qite/tide-client';
 export interface QSMConfiguration {
   type?: PortalQsmType;
   searchConfigurations: WebsiteConfigurationSearchConfiguration[];

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

@@ -1,9 +1,12 @@
 import { ExtendedFlightSearchResponseItem, Filter } from '../types';
-import { BookingPackage, BookingPackageItem, EntryLight } from '@qite/tide-client/build/types';
+import { BookingPackage, BookingPackageItem, EntryLight, PackagingAccommodationResponse } from '@qite/tide-client/build/types';
 export interface SearchResultsState {
   results: BookingPackageItem[];
   filteredResults: BookingPackageItem[];
   selectedSearchResultId: number | null;
+  packagingAccoResults: PackagingAccommodationResponse[];
+  filteredPackagingAccoResults: PackagingAccommodationResponse[];
+  selectedPackagingAccoResultCode: string | null;
   selectedFlight: ExtendedFlightSearchResponseItem | null;
   selectedFlightDetails: ExtendedFlightSearchResponseItem | null;
   bookingPackageDetails: BookingPackage | null;
@@ -18,6 +21,12 @@ export interface SearchResultsState {
 export declare const setResults: import('@reduxjs/toolkit').ActionCreatorWithPayload<BookingPackageItem[], 'searchResults/setResults'>,
   setFilteredResults: import('@reduxjs/toolkit').ActionCreatorWithPayload<BookingPackageItem[], 'searchResults/setFilteredResults'>,
   setSelectedSearchResult: import('@reduxjs/toolkit').ActionCreatorWithPayload<number | null, 'searchResults/setSelectedSearchResult'>,
+  setPackagingAccoResults: import('@reduxjs/toolkit').ActionCreatorWithPayload<PackagingAccommodationResponse[], 'searchResults/setPackagingAccoResults'>,
+  setFilteredPackagingAccoResults: import('@reduxjs/toolkit').ActionCreatorWithPayload<
+    PackagingAccommodationResponse[],
+    'searchResults/setFilteredPackagingAccoResults'
+  >,
+  setSelectedPackagingAccoResult: import('@reduxjs/toolkit').ActionCreatorWithPayload<string | null, 'searchResults/setSelectedPackagingAccoResult'>,
   setSelectedFlight: import('@reduxjs/toolkit').ActionCreatorWithPayload<ExtendedFlightSearchResponseItem | null, 'searchResults/setSelectedFlight'>,
   setSelectedFlightDetails: import('@reduxjs/toolkit').ActionCreatorWithPayload<
     ExtendedFlightSearchResponseItem | null,

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

@@ -1,9 +1,8 @@
-import { FlightSearchResponseItem } from '@qite/tide-client';
+import { FlightSearchResponseItem, WebsiteConfigurationSearchConfiguration } from '@qite/tide-client';
 import { ReactNode } from 'react';
-import { PortalQsmType } from '../shared/types';
 export type FlightSelectionMode = 'paired' | 'independent';
 export interface SearchResultsConfiguration {
-  type: PortalQsmType;
+  searchConfiguration: WebsiteConfigurationSearchConfiguration;
   tideConnection: {
     host: string;
     apiKey: string;
@@ -61,7 +60,8 @@ export interface PaginationConfig {
 }
 export type SearchResult = HotelResult | FlightResult | RoundTripResult;
 export interface BaseSearchResult {
-  id: number;
+  id?: number;
+  code: string;
   title: string;
   image: string;
   description?: string;
@@ -76,6 +76,7 @@ export interface BaseSearchResult {
 export interface HotelResult extends BaseSearchResult {
   type: 'hotel';
   days: string;
+  contents?: string;
 }
 export interface RoundTripResult extends BaseSearchResult {
   type: 'roundTrip';

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

@@ -1,3 +1,10 @@
-import { BookingPackageItem } from '@qite/tide-client';
-import { Filter } from '../types';
+import { BookingPackageItem, PackagingAccommodationResponse } from '@qite/tide-client';
+import { Filter, 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 applyFilters: (results: BookingPackageItem[], filters: Filter[]) => BookingPackageItem[];
+export declare const applyFiltersToPackageAccoResults: (results: PackagingAccommodationResponse[], filters: Filter[]) => PackagingAccommodationResponse[];

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PortalQsmType } from '../../types';
+import { PortalQsmType } from '@qite/tide-client';
 type FlyInProps = {
   title: string;
   srpType: PortalQsmType;

package/build/build-esm/src/shared/types.d.ts

@@ -1,17 +1,4 @@
 import { ReactNode } from 'react';
-export declare enum PortalQsmType {
-  Multidestination = 0,
-  Accommodation = 1,
-  AccommodationAndFlight = 2,
-  Flight = 3,
-  RoundTrip = 4,
-  GroupTour = 5,
-  Package = 6,
-  Ticket = 7,
-  Car = 8,
-  Transfer = 9,
-  Cruise = 10
-}
 export interface ApiSettingsState {
   apiUrl: string;
   apiKey: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.4.79",
+  "version": "1.4.81",
   "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.146",
+    "@qite/tide-client": "^1.1.148",
     "@reduxjs/toolkit": "^2.8.2",
     "@rollup/plugin-commonjs": "^19.0.1",
     "@rollup/plugin-json": "^4.1.0",

package/src/booking-wizard/features/booking/api.ts

@@ -1,4 +1,4 @@
-import { agents, details, generateBookingAccommodations } from '@qite/tide-client';
+import { agents, details, generateBookingAccommodations, getCountries } from '@qite/tide-client';
 import {
   BookingPackage,
   BookingPackageDetailsRequest,
@@ -30,9 +30,15 @@ const fetchAccommodationViews = async (request: GenerateBookingAccommodationRequ
   return await generateBookingAccommodations(tideClientConfig, request, signal);
 };
 
+const fetchCountries = async (signal: AbortSignal, apiSettings?: ApiSettingsState) => {
+  const tideClientConfig = buildTideClientConfig(apiSettings);
+  return await getCountries(tideClientConfig, signal);
+};
+
 const packageApi = {
   fetchDetails,
   fetchAgents,
-  fetchAccommodationViews
+  fetchAccommodationViews,
+  fetchCountries
 };
 export default packageApi;

package/src/booking-wizard/features/booking/booking-slice.ts

@@ -17,6 +17,7 @@ import {
   BookingPackageRequestRoom,
   BookingPackageRoom,
   BookingTravelAgent,
+  CountryItem,
   GenerateBookingAccommodationRequest,
   PerBookingPackageOption,
   SelectedFlight
@@ -67,6 +68,7 @@ export interface BookingState {
   travelersFirstStep: boolean;
   isFetching?: boolean;
   hasMounted: boolean;
+  countries?: CountryItem[];
 }
 
 const initialState: BookingState = {
@@ -105,17 +107,24 @@ const initialState: BookingState = {
   translations: undefined,
   travelersFirstStep: false,
   isFetching: false,
-  hasMounted: false
+  hasMounted: false,
+  countries: undefined
 };
 
 export const fetchPackage = createAsyncThunk('booking/fetchPackage', async (_, { dispatch }) => {
   dispatch(setFetchingPackage(true));
   await dispatch(fetchAgents());
+  await dispatch(fetchCountries());
   await dispatch(fetchPackageDetails());
   await dispatch(fetchAccommodationViews());
   dispatch(setFetchingPackage(false));
 });
 
+export const fetchCountries = createAsyncThunk('booking/countries', async (_, { dispatch, getState, signal }) => {
+  const settings = getState() as RootState;
+  return await packageApi.fetchCountries(signal, settings.apiSettings);
+});
+
 const fetchAgents = createAsyncThunk('booking/agents', async (_, { dispatch, getState, signal }) => {
   const settings = getState() as RootState;
   return await packageApi.fetchAgents(signal, settings.apiSettings);
@@ -570,6 +579,11 @@ const bookingSlice = createSlice({
         state.accommodationViews = action.payload;
       }
     });
+    builder.addCase(fetchCountries.fulfilled, (state, action) => {
+      if (action.payload.items) {
+        state.countries = action.payload.items;
+      }
+    });
   }
 });
 

package/src/booking-wizard/features/booking/selectors.ts

@@ -157,6 +157,8 @@ export const selectStartDate = (state: RootState) => state.booking.package?.opti
 
 export const selectAgents = (state: RootState) => state.booking.agents;
 
+export const selectCountries = (state: RootState) => state.booking.countries;
+
 export const selectProductCode = (state: RootState) => state.booking.productAttributes?.productCode;
 
 export const selectAccommodationCodes = (state: RootState) => {

package/src/booking-wizard/features/travelers-form/travelers-form.tsx

@@ -2,7 +2,14 @@ import { compact, get, sortBy } from 'lodash';
 import React, { useContext, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { fetchPackage, setCurrentStep, setHasMounted, setIsFetching } from '../booking/booking-slice';
-import { selectBookingAttributes, selectHasMounted, selectIsFetching, selectIsUnavailable, selectTravelersFirstStep } from '../booking/selectors';
+import {
+  selectBookingAttributes,
+  selectCountries,
+  selectHasMounted,
+  selectIsFetching,
+  selectIsUnavailable,
+  selectTravelersFirstStep
+} from '../booking/selectors';
 import { selectFormRooms, selectTravelersFormValues, setFormValues } from './travelers-form-slice';
 
 import { Link, useNavigate } from 'react-router-dom';
@@ -100,8 +107,10 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
   const bookingAttributes = useSelector(selectBookingAttributes);
   const isFetching = useSelector(selectIsFetching);
   const hasMounted = useSelector(selectHasMounted);
+  const countries = useSelector(selectCountries);
 
   const useCompactForm = !!settings.travellers.compactForm && !!settings.agentAdressId;
+  const showAllCountries = !!settings.travellers.showAllCountries;
 
   const initialValues =
     useSelector(selectTravelersFormValues) ?? createInitialValues(formRooms, startDate, agentAdressId, translations.TRAVELERS_FORM.PERSON, useCompactForm);
@@ -397,11 +406,17 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
                 value: undefined,
                 label: translations.TRAVELERS_FORM.SELECT_COUNTRY
               },
-              ...(settings.travellers?.countries?.map((country) => ({
-                key: country.iso2,
-                value: country.iso2,
-                label: country.name
-              })) ?? [])
+              ...(showAllCountries
+                ? countries?.map((country) => ({
+                    key: country.iso2,
+                    value: country.iso2,
+                    label: country.name
+                  })) ?? []
+                : settings.travellers?.countries?.map((country) => ({
+                    key: country.iso2,
+                    value: country.iso2,
+                    label: country.name
+                  })) ?? [])
             ]}
           />
         );
@@ -917,24 +932,32 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
                               options={[
                                 {
                                   key: 'empty',
-                                  label: translations.TRAVELERS_FORM.SELECT_COUNTRY,
-                                  value: undefined
+                                  value: undefined,
+                                  label: translations.TRAVELERS_FORM.SELECT_COUNTRY
                                 },
-                                {
-                                  key: 'be',
-                                  value: 'be',
-                                  label: translations.TRAVELERS_FORM.COUNTRIES.BELGIUM
-                                },
-                                {
-                                  key: 'nl',
-                                  value: 'nl',
-                                  label: translations.TRAVELERS_FORM.COUNTRIES.NETHERLANDS
-                                },
-                                {
-                                  key: 'fr',
-                                  value: 'fr',
-                                  label: translations.TRAVELERS_FORM.COUNTRIES.FRANCE
-                                }
+                                ...(showAllCountries
+                                  ? countries?.map((country) => ({
+                                      key: country.iso2,
+                                      value: country.iso2,
+                                      label: country.name
+                                    })) ?? []
+                                  : [
+                                      {
+                                        key: 'be',
+                                        value: 'be',
+                                        label: translations.TRAVELERS_FORM.COUNTRIES.BELGIUM
+                                      },
+                                      {
+                                        key: 'nl',
+                                        value: 'nl',
+                                        label: translations.TRAVELERS_FORM.COUNTRIES.NETHERLANDS
+                                      },
+                                      {
+                                        key: 'fr',
+                                        value: 'fr',
+                                        label: translations.TRAVELERS_FORM.COUNTRIES.FRANCE
+                                      }
+                                    ])
                               ]}
                             />
                           </div>

package/src/booking-wizard/settings-context.ts

@@ -27,7 +27,8 @@ const SettingsContext = React.createContext<WizardSettingsContextProps>({
   },
   travellers: {
     pathSuffix: '/reizigers',
-    travelersFirstStep: false
+    travelersFirstStep: false,
+    showAllCountries: false
   },
   summary: {
     pathSuffix: '/samenvatting',

package/src/booking-wizard/types.ts

@@ -27,6 +27,7 @@ export interface Settings {
     mainBookerFormFields?: FormField[];
     countries?: Country[];
     travelersFirstStep?: boolean;
+    showAllCountries?: boolean;
   };
   summary: {
     pathSuffix: string;

package/src/content/features/content-page/content-page-self-contained.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import { Navbar, PortalQsmType } from '../../../../src';
+import { Navbar } from '../../../../src';
 import { TideLogo, language, languages, topLinks, navItems } from '../../../../src/content/navbar/placeholderData';
 import Icon from '../../components/icon';
 import ContactForm from '../../components/contact';
 import Slider from '../../components/slider';
 import { Nationality, QSMConfiguration, TypeaheadOption } from '../../../qsm/types';
 import QSM from '../../../qsm';
-import { WebsiteConfigurationSearchConfiguration } from '@qite/tide-client';
+import { PortalQsmType, WebsiteConfigurationSearchConfiguration } from '@qite/tide-client';
 
 interface ContentPageSelfContainedProps {
   path: string;
@@ -60,7 +60,7 @@ const searchConfigurations: WebsiteConfigurationSearchConfiguration[] = [
     icon: '',
     defaultSearchType: 1,
     serviceTypes: [0],
-    defaultCatalogueId: undefined,
+    defaultCatalogueId: 1,
     defaultDuration: undefined,
     fromDateAmount: 0,
     fromDateAmountType: 0,
@@ -80,7 +80,7 @@ const searchConfigurations: WebsiteConfigurationSearchConfiguration[] = [
     icon: '',
     defaultSearchType: 0,
     serviceTypes: [3],
-    defaultCatalogueId: undefined,
+    defaultCatalogueId: 1,
     defaultDuration: undefined,
     fromDateAmount: 1,
     fromDateAmountType: 1,
@@ -100,7 +100,7 @@ const searchConfigurations: WebsiteConfigurationSearchConfiguration[] = [
     icon: '',
     defaultSearchType: 3,
     serviceTypes: [7],
-    defaultCatalogueId: undefined,
+    defaultCatalogueId: 1,
     defaultDuration: undefined,
     fromDateAmount: 1,
     fromDateAmountType: 1,
@@ -120,7 +120,7 @@ const searchConfigurations: WebsiteConfigurationSearchConfiguration[] = [
     icon: '',
     defaultSearchType: 0,
     serviceTypes: [0],
-    defaultCatalogueId: undefined,
+    defaultCatalogueId: 1,
     defaultDuration: undefined,
     fromDateAmount: 1,
     fromDateAmountType: 1,

package/src/qsm/components/QSMContainer/qsm-container.tsx

@@ -17,8 +17,8 @@ import { DateRange } from '../../../booking-product/types';
 import { QSMState, setFromDate, setSelectedQsmType, setToDate, setTripType } from '../../store/qsm-slice';
 import { BaseFieldConfig, DoubleFieldConfig } from '../../types';
 import { getTranslations } from '../../../shared/utils/localization-util';
-import { PortalQsmType } from '../../../shared/types';
-import { DateAmountType } from '@qite/tide-client';
+import { DateAmountType, PortalQsmType } from '@qite/tide-client';
+import { first } from 'lodash';
 
 const QSMContainer: React.FC = () => {
   const dispatch = useDispatch();
@@ -46,6 +46,14 @@ const QSMContainer: React.FC = () => {
   } = useContext(QSMConfigurationContext);
   const translations = getTranslations(languageCode ?? 'en-GB');
 
+  useEffect(() => {
+    const defaultQsmType = first(searchConfigurations)?.qsmType;
+    console.log('Available search configurations:', searchConfigurations);
+    if (!defaultQsmType) return;
+    console.log('set default qsmType:', defaultQsmType);
+    handleQsmTypeChange(defaultQsmType);
+  }, [searchConfigurations]);
+
   useEffect(() => {
     if (fromDate || toDate) return;
 

package/src/qsm/components/travel-input/index.tsx

@@ -7,7 +7,7 @@ import { getTranslations } from '../../../shared/utils/localization-util';
 import TravelClassPicker from '../travel-class-picker';
 import TravelTypePicker from '../travel-type-picker';
 import Icon from '../icon';
-import { PortalQsmType } from '../../../shared/types';
+import { PortalQsmType } from '@qite/tide-client';
 
 const TravelInput: React.FC = () => {
   const dispatch = useDispatch();

package/src/qsm/components/travel-input-group/index.tsx

@@ -7,7 +7,7 @@ import { QSMRootState } from '../../store/qsm-store';
 import QSMConfigurationContext from '../../qsm-configuration-context';
 import Icon from '../icon';
 import { getTranslations } from '../../../shared/utils/localization-util';
-import { PortalQsmType } from '../../../shared/types';
+import { PortalQsmType } from '@qite/tide-client';
 
 const selectTravelerSummary = (state: QSMRootState, areTravelersInRooms: boolean | undefined) => {
   const { adults, kids, babies, rooms, selectedTravelType } = state.qsm;

package/src/qsm/qsm-configuration-context.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { QSMConfiguration } from './types';
-import { PortalQsmType } from '../shared/types';
+import { PortalQsmType } from '@qite/tide-client';
 
 const QSMConfigurationContext = React.createContext<QSMConfiguration>({
   type: PortalQsmType.Accommodation,

package/src/qsm/store/qsm-slice.ts

@@ -2,7 +2,8 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 
 import { MobileFilterType, Room, TravelerType, TypeaheadOption } from '../types';
 import { ReactNode } from 'react';
-import { TravelType, TravelClass, PortalQsmType } from '../../shared/types';
+import { TravelType, TravelClass } from '../../shared/types';
+import { PortalQsmType } from '@qite/tide-client';
 
 export interface QSMState {
   qsmType?: PortalQsmType;

package/src/qsm/types.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { PortalQsmType, TravelClass, TravelType } from '../shared/types';
-import { WebsiteConfigurationSearchConfiguration } from '@qite/tide-client';
+import { TravelClass, TravelType } from '../shared/types';
+import { WebsiteConfigurationSearchConfiguration, PortalQsmType } from '@qite/tide-client';
 
 export interface QSMConfiguration {
   type?: PortalQsmType;