@qite/tide-booking-component 1.4.80 → 1.4.82

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/types.d.ts

@@ -3,6 +3,7 @@ import { ReactNode } from 'react';
 export type FlightSelectionMode = 'paired' | 'independent';
 export interface SearchResultsConfiguration {
   searchConfiguration: WebsiteConfigurationSearchConfiguration;
+  portalId?: number;
   tideConnection: {
     host: string;
     apiKey: string;

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.80",
+  "version": "1.4.82",
   "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.148",
+    "@qite/tide-client": "^1.1.150",
     "@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/featured-trips/featured-trip-card.tsx

@@ -10,24 +10,26 @@ const FeaturedTripCard: React.FC<FeaturedTrip> = ({ imageSrc, imageAlt, title, l
     <div className="image-card">
       <img src={imageSrc} alt={imageAlt} className="image-card__image" />
       <div className="image-card__content">
-        <h3 className="image-card__title">{title}</h3>
-        <div className="image-card__options">
-          <div className="image-card__option">
-            <Icon name="ui-location" width={16} height={16} />
-            <span>{location}</span>
+        <div className="image-card__top">
+          <h3 className="image-card__title">{title}</h3>
+          <div className="image-card__options">
+            <div className="image-card__option">
+              <Icon name="ui-location" width={16} height={16} />
+              <span>{location}</span>
+            </div>
+            {/* <div className="image-card__option">
+              <Icon name="ui-moon" width={16} height={16} />
+              <span>2 nights</span>
+            </div>
+            <div className="image-card__option">
+              <Icon name="ui-plane" width={16} height={16} />
+              <span>3 transports</span>
+            </div> */}
           </div>
-          {/* <div className="image-card__option">
-            <Icon name="ui-moon" width={16} height={16} />
-            <span>2 nights</span>
-          </div>
-          <div className="image-card__option">
-            <Icon name="ui-plane" width={16} height={16} />
-            <span>3 transports</span>
-          </div> */}
+          {/* <p className="image__card__description">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat nulla aliquam, quis accusantium quae inventore, accusamus cumque culpa, quasi officia magnam suscipit laboriosam. Velit eveniet, id modi aperiam natus veritatis.
+          </p> */}
         </div>
-        {/* <p className="image__card__description">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat nulla aliquam, quis accusantium quae inventore, accusamus cumque culpa, quasi officia magnam suscipit laboriosam. Velit eveniet, id modi aperiam natus veritatis.
-        </p> */}
         <div className="image-card__bottom">
           {/* <div className="image-card__price">
             From

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;

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

@@ -17,8 +17,7 @@ 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 = () => {

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;

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

@@ -20,7 +20,11 @@ const HotelCard: React.FC<HotelCardProps> = ({ result, translations }) => {
 
   if (result.contents?.length) {
     return (
-      <div className="search__result-card__wrapper">
+      <div
+        key={result.id}
+        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: result.contents

package/src/search-results/components/round-trip/round-trip-results.tsx

@@ -3,11 +3,16 @@ import Icon from '../icon';
 
 interface RoundTripResultsProps {}
 
+// search__results__cards--list
+
 const RoundTripResults: React.FC<RoundTripResultsProps> = () => {
   return (
     <div className="search__results__cards search__results__cards--list">
       <div className="search__result-card">
         <div className="search__result-card__allotment">
+          <div className="search__result-card__allotment__img-wrapper">
+            <img src="https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg" alt="river" className="search__result-card__allotment__img" />
+          </div>
           <div className="search__result-card__allotment__title__wrapper">
             <h3 className="search__result-card__allotment__title">
               Rondreis Noord-India: Rajasthan
@@ -64,6 +69,9 @@ const RoundTripResults: React.FC<RoundTripResultsProps> = () => {
       </div>
       <div className="search__result-card">
         <div className="search__result-card__allotment">
+          <div className="search__result-card__allotment__img-wrapper">
+            <img src="https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg" alt="river" className="search__result-card__allotment__img" />
+          </div>
           <div className="search__result-card__allotment__title__wrapper">
             <h3 className="search__result-card__allotment__title">
               Rondreis Thailand
@@ -72,7 +80,10 @@ const RoundTripResults: React.FC<RoundTripResultsProps> = () => {
                 BIJNA GAR
               </span>
             </h3>
-
+            <p className="search__result-card__allotment__description">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod quis explicabo, animi illum expedita molestias quae atque laboriosam consequatur
+              nulla error non delectus nesciunt id voluptatem quia nobis? Debitis, rerum!
+            </p>
             <div className="search__result-card__allotment__container">
               <div className="search__result-card__allotment__header">
                 <div className="search__result-card__allotment__wrapper">
@@ -120,6 +131,9 @@ const RoundTripResults: React.FC<RoundTripResultsProps> = () => {
       </div>
       <div className="search__result-card">
         <div className="search__result-card__allotment">
+          <div className="search__result-card__allotment__img-wrapper">
+            <img src="https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg" alt="river" className="search__result-card__allotment__img" />
+          </div>
           <div className="search__result-card__allotment__title__wrapper">
             <h3 className="search__result-card__allotment__title">Rondreis Timboektoe</h3>
 

package/src/search-results/components/search-results-container/flight-search-results.tsx

@@ -11,7 +11,7 @@ import FlightFilters from '../filters/flight-filters';
 import { ExtendedFlightSearchResponseItem, FlightSelectionMode } from '../../types';
 import { getSortingName } from '../../utils/flight-utils';
 import Spinner from '../spinner/spinner';
-import { PortalQsmType } from '../../../shared/types';
+import { PortalQsmType } from '@qite/tide-client';
 
 interface FlightResultsContainerProps {
   isMobile: boolean;