@qite/tide-booking-component 1.4.29 → 1.4.31

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

@@ -4,28 +4,20 @@ import { SearchResultsRootState } from '../../store/search-results-store';
 import SearchResultsConfigurationContext from '../../search-results-configuration-context';
 
 import { resetFilters, setSortKey, setResults, setIsLoading } from '../../store/search-results-slice';
-import { Filter, Sort } from '../../types';
+import { Filter, SortingOption } from '../../types';
 import useMediaQuery from '../../../shared/utils/use-media-query-util';
 import Filters from '../filters/filters';
 import ItemPicker from '../item-picker';
 
 import { TideClientConfig, search } from '@qite/tide-client';
-import {
-  BookingPackageDestination,
-  BookingPackageItem,
-  BookingPackagePax,
-  BookingPackageRequestRoom,
-  BookingPackageSearchRequest
-} from '@qite/tide-client/build/types';
+import { BookingPackageDestination, BookingPackagePax, BookingPackageRequestRoom, BookingPackageSearchRequest } from '@qite/tide-client/build/types';
 import { getDateFromParams, getNumberFromParams, getRoomsFromParams } from '../../../shared/utils/query-string-util';
 import { range } from 'lodash';
 import { Room } from '../../../booking-wizard/types';
 import Icon from '../icon';
 import Itinerary from '../itinerary';
 import TabViews from '../tab-views';
-import FlightResults from '../flight/flight-results';
 import HotelAccommodationResults from '../hotel/hotel-accommodation-results';
-import FlightAccommodationResults from '../flight/flight-accommodation-results';
 import RoundTripResults from '../round-trip/round-trip-results';
 import { enrichFiltersWithResults } from '../filters/utility';
 
@@ -48,20 +40,32 @@ const SearchResultsContainer: React.FC = () => {
         }
 
         const params = new URLSearchParams(location.search);
-        const from = getDateFromParams(params, 'from');
-        const to = getDateFromParams(params, 'to');
+        let from = getDateFromParams(params, 'from');
+        let to = getDateFromParams(params, 'to');
         const rooms = getRoomsFromParams(params, 'rooms');
-        const country = getNumberFromParams(params, 'country');
-        const region = getNumberFromParams(params, 'region');
+        let country = getNumberFromParams(params, 'country');
+        let region = getNumberFromParams(params, 'region');
+        let oord = getNumberFromParams(params, 'oord');
+        let city = getNumberFromParams(params, 'location');
+
+        // temp hardcoded params
+        if (!from || !to) {
+          from = '2026-04-07';
+          to = '2026-04-13';
+        }
+        if (!country && !region && !oord && !city) {
+          region = 1;
+        }
 
         if (typeof window !== 'undefined') {
           window.scrollTo(0, 0);
         }
 
-        // Determine destination
         let destinationId: number | null = null;
         let destinationIsCountry = false;
         let destinationIsRegion = false;
+        let destinationIsOord = false;
+        let destinationIsLocation = false;
 
         if (country) {
           destinationId = country;
@@ -69,20 +73,27 @@ const SearchResultsContainer: React.FC = () => {
         } else if (region) {
           destinationId = region;
           destinationIsRegion = true;
+        } else if (oord) {
+          destinationId = oord;
+          destinationIsOord = true;
+        } else if (city) {
+          destinationId = city;
+          destinationIsLocation = true;
         }
 
         const searchRequest = {
           officeId: 1,
           payload: {
             catalogueIds: context.tideConnection.catalogueIds,
-            serviceType: context?.type === 'hotel' ? 3 : context?.type === 'flight' ? 7 : context?.type === 'roundTrip' ? 1 : 0,
+            serviceType:
+              context?.type === 'hotel' || context?.type === 'hotel-flight' ? 3 : context?.type === 'flight' ? 7 : context?.type === 'roundTrip' ? 1 : 0,
             searchType: 0,
             destination: {
               id: Number(destinationId),
               isCountry: destinationIsCountry,
               isRegion: destinationIsRegion,
-              isOord: false,
-              isLocation: false
+              isOord: destinationIsOord,
+              isLocation: destinationIsLocation
             } as BookingPackageDestination,
             rooms: getRequestRooms(rooms),
             fromDate: from,
@@ -110,7 +121,8 @@ const SearchResultsContainer: React.FC = () => {
 
         const packageSearchResults = await search(config, searchRequest);
 
-        const finalResults = createSearchResults(packageSearchResults);
+        console.log('Search results', packageSearchResults);
+
         const enrichedFilters = enrichFiltersWithResults(packageSearchResults, context.filters);
         if (!initialFiltersSet) {
           dispatch(resetFilters(enrichedFilters));
@@ -118,7 +130,7 @@ const SearchResultsContainer: React.FC = () => {
           setInitialFiltersSet(true);
         }
 
-        dispatch(setResults({ results: finalResults }));
+        dispatch(setResults({ results: packageSearchResults }));
         dispatch(setIsLoading(false));
       } catch (err) {
         console.error('Search failed', err);
@@ -126,9 +138,8 @@ const SearchResultsContainer: React.FC = () => {
       }
     };
 
-    // nog statisch werken voorlopig
-    // runSearch();
-  }, [location.search, searchTrigger, sortKey]);
+    runSearch();
+  }, [location.search, searchTrigger]);
 
   const getRequestRooms = (rooms: Room[] | null) => {
     if (!rooms) {
@@ -160,53 +171,11 @@ const SearchResultsContainer: React.FC = () => {
     return requestRooms;
   };
 
-  const createSearchResults = (searchResults: BookingPackageItem[]) => {
-    return searchResults.map((searchResult) => {
-      return {
-        type: context?.type,
-        id: searchResult.code,
-        title: searchResult.name,
-        image: getPlaceholderImage(), // TODO: We should not be using a placeholder image, but a result-specific image
-        description: `${searchResult.accommodationName}`,
-        location: `${searchResult.locationName}, ${searchResult.countryName}`,
-        price: formatPrice(searchResult.price),
-        ctaText: context?.translations?.searchResultCTA,
-        days: calculateNights(searchResult.stayFromDate, searchResult.stayToDate),
-        flightInfo: searchResult.flightDescription || null,
-        accommodation: searchResult.accommodationName || null,
-        regime: searchResult.regimeCode || null,
-        stars: searchResult.hotelStars
-      };
-    });
-  };
-
-  const getPlaceholderImage = () => {
-    // Placeholder image URL
-    return 'https://images.unsplash.com/photo-1573790387438-4da905039392?q=80&w=1925&auto=format&fit=crop';
-  };
-
-  const formatPrice = (price: number) => {
-    if (!price) {
-      return 'Price unavailable';
-    }
-    return `$${Math.round(price).toLocaleString()}`;
-  };
-
-  const calculateNights = (fromDate: Date, toDate: Date): string => {
-    const from = new Date(fromDate).getTime(); // returns a number
-    const to = new Date(toDate).getTime(); // returns a number
-    const diffTime = Math.abs(to - from);
-    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
-    return `${diffDays} nights`;
-  };
-
   const [isMobileFiltersOpen, setIsMobileFiltersOpen] = useState(false);
 
   const handleSortChange = (newSortKey: string) => {
+    console.log('Sort changed to:', newSortKey);
     dispatch(setSortKey(newSortKey));
-    if (context) {
-      context.onSortChange?.(newSortKey);
-    }
   };
 
   const handleSetIsMobileFiltersOpen = () => {
@@ -219,31 +188,32 @@ const SearchResultsContainer: React.FC = () => {
     }
   }, [isMobileFiltersOpen]);
 
-  const getFilteredResults = () => {
-    const filteredResults = results.filter((result) => {
-      // Apply frontend filters here
+  // const getFilteredResults = () => {
+  //   const filteredResults = results.filter((result) => {
+  //     // Apply frontend filters here
 
-      const ratingFilter = filters.find((f) => f.property === 'rating' && f.selectedRating != null);
-      if (ratingFilter) {
-        const minRating = ratingFilter.selectedRating!;
-        const hotelStars = result.stars ?? 0;
-        if (hotelStars < minRating) {
-          return false;
-        }
-      }
-
-      // Add more frontend filters if needed
-      return true;
-    });
+  //     const ratingFilter = filters.find((f) => f.property === 'rating' && f.selectedRating != null);
+  //     if (ratingFilter) {
+  //       const minRating = ratingFilter.selectedRating!;
+  //       const hotelStars = result.stars ?? 0;
+  //       if (hotelStars < minRating) {
+  //         return false;
+  //       }
+  //     }
 
-    return filteredResults;
-  };
+  //     // Add more frontend filters if needed
+  //     return true;
+  //   });
 
-  const Sorts: Sort[] = [{ label: 'Price: low to high' }, { label: 'Price: high to low' }, { label: 'Top rated' }];
+  //   return filteredResults;
+  // };
 
-  const [selectedTravelClass, setSelectedTravelClass] = useState<string | undefined>(undefined);
+  const sortingOptions: SortingOption[] = [
+    { key: 'price-asc', label: 'Price: Low to High' },
+    { key: 'price-desc', label: 'Price: High to Low' },
+    { key: 'departure-date', label: 'Departure Date' }
+  ];
 
-  console.log('SearchResultsContainer render', context);
   return (
     <div id="tide-booking" className="search__bg">
       {context && (
@@ -269,21 +239,14 @@ const SearchResultsContainer: React.FC = () => {
                     <Icon name="ui-filter" className="mobile-filters-button__icon" height={16} />
                     {context.translations?.filters}
                   </div>
-                  {context.sortingOptions && context.sortingOptions.length > 0 && (
-                    // <select className="search__result-row-button" value={sortKey ?? ''} onChange={(e) => handleSortChange(e.target.value)}>
-                    //   {context.sortingOptions.map((opt) => (
-                    //     <option key={opt.key} value={opt.key}>
-                    //       {opt.label}
-                    //     </option>
-                    //   ))}
-                    // </select>
+                  {sortingOptions && sortingOptions.length > 0 && (
                     <ItemPicker
-                      items={Sorts}
-                      selection={selectedTravelClass}
-                      label="Sorteren op"
-                      placeholder="Sorteer"
+                      items={sortingOptions}
+                      selection={sortKey || undefined}
+                      label="Sort by"
+                      placeholder="Sort by"
                       classModifier="travel-class-picker__items"
-                      onPick={setSelectedTravelClass}
+                      onPick={handleSortChange}
                     />
                   )}
                 </div>
@@ -293,27 +256,19 @@ const SearchResultsContainer: React.FC = () => {
                 <span className="search__result-row-text">
                   {!isLoading && (
                     <>
-                      {getFilteredResults()?.length ?? 4} {context.translations?.totalResultsLabel}
+                      {results?.length ?? 4} {context.translations?.totalResultsLabel}
                     </>
                   )}
                 </span>
-                {!isMobile && context.sortingOptions && context.sortingOptions.length > 0 && (
+                {!isMobile && sortingOptions && sortingOptions.length > 0 && (
                   <div className="search__result-row-filter">
-                    {/* <span className="search__result-row-text">{context.translations?.sortBy}</span>
-                    <select className="search__result-row-button" value={sortKey ?? ''} onChange={(e) => handleSortChange(e.target.value)}>
-                      {context.sortingOptions.map((opt) => (
-                        <option key={opt.key} value={opt.key}>
-                          {opt.label}
-                        </option>
-                      ))}
-                    </select> */}
                     <ItemPicker
-                      items={Sorts}
-                      selection={selectedTravelClass}
-                      label="Sorteren op"
-                      placeholder="Sorteer"
+                      items={sortingOptions}
+                      selection={sortKey || undefined}
+                      label="Sort by"
+                      placeholder="Sort by"
                       classModifier="travel-class-picker__items"
-                      onPick={setSelectedTravelClass}
+                      onPick={handleSortChange}
                     />
                   </div>
                 )}
@@ -324,12 +279,12 @@ const SearchResultsContainer: React.FC = () => {
 
                 {context.showRoundTripResults && <RoundTripResults />}
 
-                {context.showFlightResults && <FlightResults isDeparture={true} />}
+                {/* {context.showFlightResults && <FlightResults isDeparture={true} />} */}
 
                 {context.showHotelAccommodationResults && <HotelAccommodationResults isLoading={isLoading} context={context} />}
-                {context.showFlightAccommodationResults && <FlightAccommodationResults />}
+                {/* {context.showFlightAccommodationResults && <FlightAccommodationResults />} */}
 
-                {context.showFlightResults && <FlightResults isDeparture={false} />}
+                {/* {context.showFlightResults && <FlightResults isDeparture={false} />} */}
               </div>
             </div>
           </div>

package/src/search-results/components/tab-views/index.tsx

@@ -1,20 +1,39 @@
 import React from 'react';
 import Icon from '../icon';
+import { useDispatch, useSelector } from 'react-redux';
+import { SearchResultsRootState } from '../../store/search-results-store';
+import { setActiveTab } from '../../store/search-results-slice';
 
 interface TabViewsProps {}
 
 const TabViews: React.FC<TabViewsProps> = () => {
+  const dispatch = useDispatch();
+  const { activeTab } = useSelector((state: SearchResultsRootState) => state.searchResults);
+
+  const handleSortChange = (tab: string) => {
+    dispatch(setActiveTab(tab));
+  };
+
   return (
     <div className="search__results__tab-views">
-      <button type="button" className="search__results__tab-view search__results__tab-view--active">
+      <button
+        type="button"
+        className={`search__results__tab-view ${activeTab === 'extended' ? 'search__results__tab-view--active' : ''}`}
+        onClick={() => handleSortChange('extended')}>
         <Icon name="ui-extended" height={16} />
         Extended
       </button>
-      <button type="button" className="search__results__tab-view">
+      <button
+        type="button"
+        className={`search__results__tab-view ${activeTab === 'compact' ? 'search__results__tab-view--active' : ''}`}
+        onClick={() => handleSortChange('compact')}>
         <Icon name="ui-compact" height={16} />
         Compact
       </button>
-      <button type="button" className="search__results__tab-view">
+      <button
+        type="button"
+        className={`search__results__tab-view ${activeTab === 'comparator' ? 'search__results__tab-view--active' : ''}`}
+        onClick={() => handleSortChange('comparator')}>
         <Icon name="ui-comparator" height={16} />
         Comparator
       </button>

package/src/search-results/features/flights/flight-search-results-self-contained.tsx

@@ -48,14 +48,6 @@ const FlightSearchResultsSelfContained: React.FC<FlightSearchResultsSelfContaine
     }
   ];
 
-  // Sorting options
-  const sortingOptions: SortingOption[] = [
-    { key: 'price-asc', label: 'Prijs oplopend' },
-    { key: 'price-desc', label: 'Prijs aflopend' }
-    // { key: 'departuretime-desc', label: 'Vertrektijd oplopend' },
-    // { key: 'departuretime-desc', label: 'Vertrektijd aflopend' }
-  ];
-
   const customCardRenderer = (result: SearchResult): ReactNode => {
     switch (result.type) {
       case 'flight':
@@ -248,12 +240,7 @@ const FlightSearchResultsSelfContained: React.FC<FlightSearchResultsSelfContaine
       console.log('Clicked on card with id:', id);
     },
 
-    // Sorting
-    sortingOptions,
     filters,
-    onSortChange: (sortKey) => {
-      console.log('Sort changed to:', sortKey);
-    },
 
     // Map View
     showMapView: false,

package/src/search-results/features/hotels/hotel-flight-search-results-self-contained.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { SearchResult, SearchResultsConfiguration, SortingOption } from '../../types';
+import { SearchResult, SearchResultsConfiguration } from '../../types';
 import SearchResults from '../..';
 import { Navbar, Footer } from '../../../../src';
 import { TideLogo, language, languages, topLinks, navItems } from '../../../../src/content/navbar/placeholderData';
@@ -8,12 +8,6 @@ import Icon from '../../components/icon';
 interface HotelFlightSearchResultsSelfContainedProps {}
 
 const HotelFlightSearchResultsSelfContained: React.FC<HotelFlightSearchResultsSelfContainedProps> = () => {
-  const sortingOptions: SortingOption[] = [
-    { key: 'price-asc', label: 'Price: Low to High' },
-    { key: 'price-desc', label: 'Price: High to Low' },
-    { key: 'rating-desc', label: 'Top Rated' }
-  ];
-
   const customCardRenderer = (result: SearchResult): ReactNode => {
     switch (result.type) {
       case 'hotel':
@@ -99,7 +93,6 @@ const HotelFlightSearchResultsSelfContained: React.FC<HotelFlightSearchResultsSe
       apiKey: 'e9b95d79-de4c-41d6-ab7e-3dd429873058',
       catalogueIds: [1, 2]
     },
-    sortingOptions: sortingOptions,
     showTabViews: true,
     showFlightResults: true,
     showHotelAccommodationResults: true,

package/src/search-results/features/hotels/hotel-search-results-self-contained.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { Filter, SearchResult, SearchResultsConfiguration, SortingOption } from '../../types';
+import { Filter, SearchResult, SearchResultsConfiguration } from '../../types';
 import SearchResults from '../..';
 import { Navbar, Footer } from '../../../../src';
 import { TideLogo, language, languages, topLinks, navItems } from '../../../../src/content/navbar/placeholderData';
@@ -48,13 +48,6 @@ const HotelSearchResultsSelfContained: React.FC<HotelSearchResultsSelfContainedP
     }
   ];
 
-  // Sorting options
-  const sortingOptions: SortingOption[] = [
-    { key: 'price-asc', label: 'Price: Low to High' },
-    { key: 'price-desc', label: 'Price: High to Low' },
-    { key: 'rating-desc', label: 'Top Rated' }
-  ];
-
   const customCardRenderer = (result: SearchResult): ReactNode => {
     switch (result.type) {
       case 'hotel':
@@ -168,12 +161,6 @@ const HotelSearchResultsSelfContained: React.FC<HotelSearchResultsSelfContainedP
     },
     customCardRenderer,
 
-    // Sorting
-    sortingOptions,
-    onSortChange: (sortKey) => {
-      console.log('Sort changed to:', sortKey);
-    },
-
     // Map View
     showMapView: false,
 

package/src/search-results/features/roundtrips/roundtrip-search-results-self-contained.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SearchResultsConfiguration, SortingOption } from '../../types';
+import { SearchResultsConfiguration } from '../../types';
 import SearchResults from '../..';
 import { Navbar, Footer } from '../../../../src';
 import { TideLogo, language, languages, topLinks, navItems } from '../../../../src/content/navbar/placeholderData';
@@ -7,13 +7,6 @@ import { TideLogo, language, languages, topLinks, navItems } from '../../../../s
 interface RoundtripSearchResultsSelfContainedProps {}
 
 const RoundtripSearchResultsSelfContained: React.FC<RoundtripSearchResultsSelfContainedProps> = () => {
-  // Sorting options
-  const sortingOptions: SortingOption[] = [
-    { key: 'price-asc', label: 'Price: Low to High' },
-    { key: 'price-desc', label: 'Price: High to Low' },
-    { key: 'rating-desc', label: 'Top Rated' }
-  ];
-
   const configuration: SearchResultsConfiguration = {
     type: 'roundTrip',
     showFilters: true,
@@ -22,7 +15,6 @@ const RoundtripSearchResultsSelfContained: React.FC<RoundtripSearchResultsSelfCo
       apiKey: 'e9b95d79-de4c-41d6-ab7e-3dd429873058',
       catalogueIds: [1, 2]
     },
-    sortingOptions: sortingOptions,
     showTabViews: false,
     showFlightResults: false,
     showHotelAccommodationResults: false,

package/src/search-results/store/search-results-slice.ts

@@ -1,11 +1,13 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { Filter, SearchResult } from '../types';
+import { Filter } from '../types';
+import { BookingPackageItem } from '@qite/tide-client/build/types';
 
 export interface SearchResultsState {
-  results: SearchResult[];
+  results: BookingPackageItem[];
   isLoading: boolean;
   filters: Filter[];
   sortKey: string | null;
+  activeTab: string | null;
   currentPage: number;
 }
 
@@ -14,6 +16,7 @@ const initialState: SearchResultsState = {
   isLoading: false,
   filters: [],
   sortKey: null,
+  activeTab: 'compact',
   currentPage: 1
 };
 
@@ -21,7 +24,7 @@ const searchResultsSlice = createSlice({
   name: 'searchResults',
   initialState,
   reducers: {
-    setResults(state, action: PayloadAction<{ results: any[] }>) {
+    setResults(state, action: PayloadAction<{ results: BookingPackageItem[] }>) {
       state.results = action.payload.results;
     },
     setIsLoading(state, action: PayloadAction<boolean>) {
@@ -45,6 +48,9 @@ const searchResultsSlice = createSlice({
     setSortKey(state, action: PayloadAction<string | null>) {
       state.sortKey = action.payload;
     },
+    setActiveTab(state, action: PayloadAction<string | null>) {
+      state.activeTab = action.payload;
+    },
     setCurrentPage(state, action: PayloadAction<number>) {
       state.currentPage = action.payload;
     },
@@ -53,11 +59,12 @@ const searchResultsSlice = createSlice({
       state.isLoading = false;
       state.filters = [];
       state.sortKey = null;
+      state.activeTab = 'compact';
       state.currentPage = 1;
     }
   }
 });
 
-export const { setResults, setIsLoading, setFilters, resetFilters, setSortKey, setCurrentPage, resetSearchState } = searchResultsSlice.actions;
+export const { setResults, setIsLoading, setFilters, resetFilters, setSortKey, setActiveTab, setCurrentPage, resetSearchState } = searchResultsSlice.actions;
 
 export default searchResultsSlice.reducer;

package/src/search-results/types.ts

@@ -29,10 +29,6 @@ export interface SearchResultsConfiguration {
   customCardRenderer?: (result: SearchResult) => ReactNode;
   onResultClick?: (id: string) => void;
 
-  // Sorting
-  sortingOptions?: SortingOption[];
-  onSortChange?: (sortKey: string) => void;
-
   // Map view
   // not supported for now
   showMapView?: boolean;
@@ -59,6 +55,8 @@ export interface SearchResultsConfiguration {
     loading?: string;
     searchResultCTA?: string;
   };
+
+  cmsHotelData?: any[];
 }
 
 export type FilterType = 'checkbox' | 'toggle' | 'slider' | 'star-rating';
@@ -86,17 +84,6 @@ export interface Filter {
   selectedRating?: number; // For star-rating type
 }
 
-export interface Sort {
-  label: string;
-  icon?: ReactNode;
-}
-
-export interface SortingOption {
-  key: 'price-asc' | 'price-desc' | 'duration-asc' | 'duration-desc' | 'rating-asc' | 'rating-desc';
-  label: string;
-  icon?: ReactNode;
-}
-
 export interface PaginationConfig {
   totalResults: number;
   currentPage: number;
@@ -112,9 +99,11 @@ export interface BaseSearchResult {
   description?: string;
   location?: string;
   tags?: Tag[];
-  price: string;
+  price: string | number;
   ctaText: string;
   stars?: number;
+  accommodation?: string;
+  regime?: string;
 }
 
 export interface HotelResult extends BaseSearchResult {
@@ -159,3 +148,9 @@ export interface TravelClass {
   label: string;
   icon?: ReactNode;
 }
+
+export interface SortingOption {
+  key: 'price-asc' | 'price-desc' | 'departure-date' | 'duration-asc' | 'duration-desc' | 'rating-asc' | 'rating-desc';
+  label: string;
+  icon?: ReactNode;
+}

package/src/shared/translations/en-GB.json

@@ -122,7 +122,8 @@
     "FLIGHT_DEPARTURE": "Departure",
     "FLIGHT_ARRIVAL": "Arrival",
     "ON_REQUEST": "On request",
-    "CHANGES": "transfers"
+    "CHANGES": "transfers",
+    "PACKAGE_NOT_AVAILABLE": "Package not available"
   },
   "TRAVELERS_FORM": {
     "AGE": "Age",
@@ -155,6 +156,9 @@
     "BOOK_WITH_AGENT": "I want to book through my local travel agent",
     "CHOOSE_OFFICE": "I choose an office",
     "PERSON": "Person",
+    "REMOVE_TRAVELER": "Remove traveler",
+    "ADD_TRAVELER": "Add traveler",
+    "ADD_ROOM": "Add travel party",
     "COUNTRIES": {
       "BELGIUM": "Belgium",
       "NETHERLANDS": "Netherlands",

package/src/shared/translations/fr-BE.json

@@ -122,7 +122,8 @@
     "FLIGHT_DEPARTURE": "Départ",
     "FLIGHT_ARRIVAL": "Arrivée",
     "ON_REQUEST": "Sur demande",
-    "CHANGES": "correspondances"
+    "CHANGES": "correspondances",
+    "PACKAGE_NOT_AVAILABLE": "Forfait non disponible"
   },
   "TRAVELERS_FORM": {
     "AGE": "Age",
@@ -155,6 +156,9 @@
     "BOOK_WITH_AGENT": "Je souhaite réserver auprès de mon agent de voyage local",
     "CHOOSE_OFFICE": "Je choisis une agence",
     "PERSON": "Personne",
+    "REMOVE_TRAVELER": "Supprimer le voyageur",
+    "ADD_TRAVELER": "Ajouter un voyageur",
+    "ADD_ROOM": "Ajouter un groupe de voyageurs",
     "COUNTRIES": {
       "BELGIUM": "Belgique",
       "NETHERLANDS": "Pays-Bas",

package/src/shared/translations/nl-BE.json

@@ -122,7 +122,8 @@
     "FLIGHT_DEPARTURE": "Vertrek",
     "FLIGHT_ARRIVAL": "Aankomst",
     "ON_REQUEST": "Op aanvraag",
-    "CHANGES": "overstappen"
+    "CHANGES": "overstappen",
+    "PACKAGE_NOT_AVAILABLE": "Pakket niet beschikbaar"
   },
   "TRAVELERS_FORM": {
     "AGE": "Leeftijd",
@@ -155,6 +156,9 @@
     "BOOK_WITH_AGENT": "Ik wens te boeken bij mijn lokale reisagent",
     "CHOOSE_OFFICE": "Ik kies een kantoor",
     "PERSON": "Persoon",
+    "REMOVE_TRAVELER": "Verwijder reiziger",
+    "ADD_TRAVELER": "Voeg reiziger toe",
+    "ADD_ROOM": "Voeg reisgezelschap toe",
     "COUNTRIES": {
       "BELGIUM": "België",
       "NETHERLANDS": "Nederland",