@qite/tide-booking-component 1.4.34 → 1.4.36

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

@@ -35,7 +35,6 @@ export interface QSMConfiguration {
     maxChildAge?: number;
     maxInfantAge?: number;
     onSubmit: (data: any) => void;
-    submitLabel: string;
     submitIcon: ReactNode;
     nationalities: Nationality[];
     languageCode?: string;

package/build/build-esm/search-results/components/filters/filters.d.ts

@@ -2,8 +2,8 @@ import React from 'react';
 import { Filter } from '../../types';
 interface FiltersProps {
     filters: Filter[];
-    isMobileFiltersOpen: boolean;
-    handleSetIsMobileFiltersOpen: () => void;
+    isOpen: boolean;
+    handleSetIsOpen: () => void;
     handleApplyFilters: () => void;
     isLoading?: boolean;
 }

package/build/build-esm/search-results/components/flight/flight-results.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
+import { BookingPackageFlight } from '@qite/tide-client';
 interface FlightResultsProps {
+    flights: BookingPackageFlight[];
     isDeparture?: boolean;
 }
 declare const FlightResults: React.FC<FlightResultsProps>;

package/build/build-esm/search-results/components/hotel/hotel-card.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { HotelResult } from '../../types';
 interface HotelCardProps {
     result: HotelResult;
+    translations?: any;
 }
 declare const HotelCard: React.FC<HotelCardProps>;
 export default HotelCard;

package/build/build-esm/search-results/components/itinerary/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 interface ItineraryProps {
-    isMobileFiltersOpen: boolean;
-    handleSetIsMobileFiltersOpen: () => void;
+    isOpen: boolean;
+    handleSetIsOpen: () => void;
     isLoading?: boolean;
 }
 declare const Itinerary: React.FC<ItineraryProps>;

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

@@ -1,8 +1,10 @@
 import { Filter } from '../types';
-import { BookingPackageItem } from '@qite/tide-client/build/types';
+import { BookingPackage, BookingPackageItem, EntryLight } from '@qite/tide-client/build/types';
 export interface SearchResultsState {
     results: BookingPackageItem[];
     selectedHotelId: number | null;
+    bookingPackageDetails: BookingPackage | null;
+    entry: EntryLight | null;
     isLoading: boolean;
     filters: Filter[];
     sortKey: string | null;
@@ -11,6 +13,13 @@ export interface SearchResultsState {
 }
 export declare const setResults: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
     results: BookingPackageItem[];
-}, "searchResults/setResults">, setSelectedHotel: import("@reduxjs/toolkit").ActionCreatorWithPayload<number | null, "searchResults/setSelectedHotel">, setIsLoading: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "searchResults/setIsLoading">, setFilters: import("@reduxjs/toolkit").ActionCreatorWithPayload<Filter[], "searchResults/setFilters">, resetFilters: import("@reduxjs/toolkit").ActionCreatorWithPayload<Filter[], "searchResults/resetFilters">, setSortKey: import("@reduxjs/toolkit").ActionCreatorWithPayload<string | null, "searchResults/setSortKey">, setActiveTab: import("@reduxjs/toolkit").ActionCreatorWithPayload<string | null, "searchResults/setActiveTab">, setCurrentPage: import("@reduxjs/toolkit").ActionCreatorWithPayload<number, "searchResults/setCurrentPage">, resetSearchState: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"searchResults/resetSearchState">;
+}, "searchResults/setResults">, setSelectedHotel: import("@reduxjs/toolkit").ActionCreatorWithPayload<number | null, "searchResults/setSelectedHotel">, setBookingPackageDetails: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+    details: BookingPackage;
+}, "searchResults/setBookingPackageDetails">, setEntry: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+    entry: EntryLight;
+}, "searchResults/setEntry">, selectFlight: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+    flightOptionId: string;
+    isDeparture: boolean;
+}, "searchResults/selectFlight">, setIsLoading: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "searchResults/setIsLoading">, setFilters: import("@reduxjs/toolkit").ActionCreatorWithPayload<Filter[], "searchResults/setFilters">, resetFilters: import("@reduxjs/toolkit").ActionCreatorWithPayload<Filter[], "searchResults/resetFilters">, setSortKey: import("@reduxjs/toolkit").ActionCreatorWithPayload<string | null, "searchResults/setSortKey">, setActiveTab: import("@reduxjs/toolkit").ActionCreatorWithPayload<string | null, "searchResults/setActiveTab">, setCurrentPage: import("@reduxjs/toolkit").ActionCreatorWithPayload<number, "searchResults/setCurrentPage">, resetSearchState: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"searchResults/resetSearchState">;
 declare const _default: import("redux").Reducer<SearchResultsState, import("redux").AnyAction>;
 export default _default;

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

@@ -19,24 +19,14 @@ export interface SearchResultsConfiguration {
     showCustomCards?: boolean;
     customCardRenderer?: (result: SearchResult) => ReactNode;
     showMapView?: boolean;
-    noResultsLabel?: string;
     isLoading?: boolean;
     customSpinner?: ReactNode;
-    translations?: {
-        filters?: string;
-        filterTitle?: string;
-        resetButton?: string;
-        sortBy?: string;
-        noResults?: string;
-        totalResultsLabel?: string;
-        luggageIncluded?: string;
-        cancel?: string;
-        apply?: string;
-        loading?: string;
-        searchResultCTA?: string;
-    };
     cmsHotelData?: any[];
     languageCode?: string;
+    destinationImage?: {
+        url: string;
+        alt: string;
+    };
 }
 export type FilterType = 'checkbox' | 'toggle' | 'slider' | 'star-rating';
 export type FilterProperty = 'regime' | 'max-duration' | 'price' | 'rating' | 'theme';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.4.34",
+  "version": "1.4.36",
   "description": "React Booking wizard & Booking product component for Tide",
   "main": "build/build-cjs/index.js",
   "module": "build/build-esm/index.js",
@@ -27,7 +27,7 @@
   "devDependencies": {
     "@jsonurl/jsonurl": "^1.1.4",
     "@popperjs/core": "^2.10.2",
-    "@qite/tide-client": "^1.1.123",
+    "@qite/tide-client": "^1.1.126",
     "@reach/router": "^1.3.4",
     "@reduxjs/toolkit": "^1.6.0",
     "@rollup/plugin-commonjs": "^19.0.1",

package/src/booking-wizard/features/booking/booking-self-contained.tsx

@@ -286,7 +286,6 @@ const BookingSelfContained: React.FC<BookingProps> = ({ productCode, productName
             <p className="booking__loader-text">
               {allowOption ? translations.MAIN.PREPARING_DOSSIER : isOffer ? translations.MAIN.PREPARING_OFFER : translations.MAIN.PREPARING_BOOKING}
             </p>
-            <p className="booking__loader-text">{isOffer ? translations.MAIN.PREPARING_OFFER : translations.MAIN.PREPARING_BOOKING}</p>
           </div>
         </div>
       )}

package/src/booking-wizard/features/travelers-form/controls/gender-control.tsx

@@ -6,7 +6,7 @@ import { ControlProps, hasVisibleError } from '../travelers-form-util';
 const GenderControl: React.FC<ControlProps<Traveler>> = ({ translations, value, formik, name }) => {
   return (
     <div className={buildClassName(['form__group', hasVisibleError(formik, name) && 'form__group--error'])}>
-      <label className="form__label">{translations.TRAVELERS_FORM.GENDER} *</label>
+      <label className="form__label">{translations.TRAVELERS_FORM.GENDER_ID} *</label>
       <div className="radiobutton-group">
         <div className="radiobutton">
           <label className="radiobutton__label">
@@ -19,7 +19,7 @@ const GenderControl: React.FC<ControlProps<Traveler>> = ({ translations, value,
               value="m"
               checked={value.gender === 'm'}
             />
-            {translations.TRAVELERS_FORM.MALE}
+            {translations.TRAVELERS_FORM.MALE_GENDER}
           </label>
         </div>
 
@@ -34,11 +34,11 @@ const GenderControl: React.FC<ControlProps<Traveler>> = ({ translations, value,
               value="f"
               checked={value.gender === 'f'}
             />
-            {translations.TRAVELERS_FORM.FEMALE}
+            {translations.TRAVELERS_FORM.FEMALE_GENDER}
           </label>
         </div>
 
-        <div className="radiobutton">
+        {/*  <div className="radiobutton">
           <label className="radiobutton__label">
             <input
               type="radio"
@@ -51,7 +51,7 @@ const GenderControl: React.FC<ControlProps<Traveler>> = ({ translations, value,
             />
             {translations.TRAVELERS_FORM.OTHER}
           </label>
-        </div>
+        </div> */}
       </div>
     </div>
   );

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

@@ -615,7 +615,7 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
                       <>
                         <div className="form__row">
                           <div className={buildClassName(['form__group', hasVisibleError(`rooms[${rIndex}].adults[${index}].gender`) && 'form__group--error'])}>
-                            <label className="form__label">{translations.TRAVELERS_FORM.GENDER} *</label>
+                            <label className="form__label">{translations.TRAVELERS_FORM.GENDER_ID} *</label>
                             <div className="radiobutton-group">
                               <div className="radiobutton">
                                 <label className="radiobutton__label">
@@ -628,7 +628,7 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
                                     value="m"
                                     checked={travelerValues.gender === 'm'}
                                   />
-                                  {translations.TRAVELERS_FORM.MALE}
+                                  {translations.TRAVELERS_FORM.MALE_GENDER}
                                 </label>
                               </div>
 
@@ -643,11 +643,11 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
                                     value="f"
                                     checked={travelerValues.gender === 'f'}
                                   />
-                                  {translations.TRAVELERS_FORM.FEMALE}
+                                  {translations.TRAVELERS_FORM.FEMALE_GENDER}
                                 </label>
                               </div>
 
-                              <div className="radiobutton">
+                              {/* <div className="radiobutton">
                                 <label className="radiobutton__label">
                                   <input
                                     type="radio"
@@ -660,7 +660,7 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
                                   />
                                   {translations.TRAVELERS_FORM.OTHER}
                                 </label>
-                              </div>
+                              </div> */}
                             </div>
                           </div>
                         </div>
@@ -729,7 +729,7 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
                         <div className="form__row">
                           <div
                             className={buildClassName(['form__group', hasVisibleError(`rooms[${rIndex}].children[${index}].gender`) && 'form__group--error'])}>
-                            <label className="form__label">{translations.TRAVELERS_FORM.GENDER} *</label>
+                            <label className="form__label">{translations.TRAVELERS_FORM.GENDER_ID} *</label>
                             <div className="radiobutton-group">
                               <div className="radiobutton">
                                 <label className="radiobutton__label">
@@ -742,7 +742,7 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
                                     value="m"
                                     checked={travelerValues.gender === 'm'}
                                   />
-                                  {translations.TRAVELERS_FORM.MALE}
+                                  {translations.TRAVELERS_FORM.MALE_GENDER}
                                 </label>
                               </div>
 
@@ -757,11 +757,11 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
                                     value="f"
                                     checked={travelerValues.gender === 'f'}
                                   />
-                                  {translations.TRAVELERS_FORM.FEMALE}
+                                  {translations.TRAVELERS_FORM.FEMALE_GENDER}
                                 </label>
                               </div>
 
-                              <div className="radiobutton">
+                              {/* <div className="radiobutton">
                                 <label className="radiobutton__label">
                                   <input
                                     type="radio"
@@ -774,7 +774,7 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
                                   />
                                   {translations.TRAVELERS_FORM.OTHER}
                                 </label>
-                              </div>
+                              </div> */}
                             </div>
                           </div>
                         </div>

package/src/content/components/icon.tsx

@@ -530,7 +530,7 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) =>
         </svg>
       );
 
-    case 'ui-comparator':
+    case 'ui-list':
       return (
         <svg
           className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}

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

@@ -169,7 +169,6 @@ const configuration: QSMConfiguration = {
   maxInfantAge: 2,
 
   onSubmit: () => {},
-  submitLabel: 'Zoeken',
   submitIcon: ''
 };
 

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

@@ -16,13 +16,15 @@ import { addDays, addMonths } from 'date-fns';
 import { DateRange } from '../../../booking-product/types';
 import { QSMState, setFromDate, setToDate } from '../../store/qsm-slice';
 import { FieldConfig } from '../../types';
+import { getTranslations } from '../../../shared/utils/localization-util';
 
 const QSMContainer: React.FC = () => {
   const dispatch = useDispatch();
   const isMobile = useMediaQuery('(max-width: 768px)');
   const qsmState = useSelector((state: QSMRootState) => state.qsm);
   const { mobileFilterType, fromDate, toDate } = qsmState;
-  const { searchFields, askTravelers, submitIcon, submitLabel, onSubmit, travelTypes } = useContext(QSMConfigurationContext);
+  const { searchFields, askTravelers, submitIcon, onSubmit, travelTypes, languageCode } = useContext(QSMConfigurationContext);
+  const translations = getTranslations(languageCode ?? 'en-GB');
 
   useEffect(() => {
     if (fromDate || toDate) return;
@@ -96,13 +98,13 @@ const QSMContainer: React.FC = () => {
             <span className="qsm__tab__icons">
               <Icon name="ui-location" height={16} />
             </span>
-            Multidestination
+            {translations.QSM.MULTIDESTINATION}
           </button>
           <button type="button" className="qsm__tab">
             <span className="qsm__tab__icons">
               <Icon name="ui-suitcase" height={16} />
             </span>
-            Packages
+            {translations.QSM.PACKAGES}
           </button>
           <button type="button" className="qsm__tab qsm__tab--active">
             <span className="qsm__tab__icons">
@@ -110,43 +112,43 @@ const QSMContainer: React.FC = () => {
               +
               <Icon name="ui-bed" height={14} />
             </span>
-            Transport + hotel
+            {translations.QSM.TRANSPORT_HOTEL}
           </button>
           <button type="button" className="qsm__tab">
             <span className="qsm__tab__icons">
               <Icon name="ui-bed" height={16} />
             </span>
-            Accommodation
+            {translations.QSM.ACCOMMODATION}
           </button>
           <button type="button" className="qsm__tab">
             <span className="qsm__tab__icons">
               <Icon name="ui-flight" height={16} />
             </span>
-            Transports
+            {translations.QSM.TRANSPORTS}
           </button>
           <button type="button" className="qsm__tab">
             <span className="qsm__tab__icons">
               <Icon name="ui-ticket" height={16} />
             </span>
-            Ticket Only
+            {translations.QSM.TICKET_ONLY}
           </button>
           <button type="button" className="qsm__tab">
             <span className="qsm__tab__icons">
               <Icon name="ui-car" height={16} />
             </span>
-            Rent a car
+            {translations.QSM.RENT_A_CAR}
           </button>
           <button type="button" className="qsm__tab">
             <span className="qsm__tab__icons">
               <Icon name="ui-backforward" height={16} />
             </span>
-            Transfers
+            {translations.QSM.TRANSFERS}
           </button>
           <button type="button" className="qsm__tab">
             <span className="qsm__tab__icons">
               <Icon name="ui-ship" height={16} />
             </span>
-            Cruises
+            {translations.QSM.CRUISES}
           </button>
         </div>
         <div className="qsm__filter">
@@ -164,7 +166,7 @@ const QSMContainer: React.FC = () => {
                   readOnly
                   className="radiobutton__input"
                 />
-                <span>One accommodation</span>
+                <span>{translations.QSM.ONE_ACCOMMODATION}</span>
               </label>
             </div>
             <div className="radiobutton">
@@ -179,7 +181,7 @@ const QSMContainer: React.FC = () => {
                   className="radiobutton__input"
                   disabled={true}
                 />
-                <span>Multiple accommodations</span>
+                <span>{translations.QSM.MULTIPLE_ACCOMMODATIONS}</span>
               </label>
             </div>
           </div>
@@ -203,7 +205,7 @@ const QSMContainer: React.FC = () => {
 
           <button type="button" className="cta" onClick={handleSubmit}>
             {submitIcon && submitIcon.toString().length > 0 && <span>{submitIcon}</span>}
-            <span>{submitLabel}</span>
+            <span>{translations.QSM.CONFIRM}</span>
           </button>
         </div>
       </div>

package/src/qsm/components/mobile-filter-modal/index.tsx

@@ -15,9 +15,11 @@ import TravelInput from '../travel-input';
 import { format } from 'date-fns';
 import QSMConfigurationContext from '../../qsm-configuration-context';
 import { TypeaheadOption } from '../../types';
+import { getTranslations } from '../../../shared/utils/localization-util';
 
 const MobileFilterModal: React.FC = () => {
-  const { datesIcon } = useContext(QSMConfigurationContext);
+  const { datesIcon, languageCode } = useContext(QSMConfigurationContext);
+  const translations = getTranslations(languageCode ?? 'en-GB');
   const dispatch = useDispatch();
   const { mobileFilterType, mobileDatePickerMode, activeSearchFieldProps, fromDate, toDate } = useSelector((state: QSMRootState) => state.qsm);
 
@@ -103,7 +105,7 @@ const MobileFilterModal: React.FC = () => {
         {/* header */}
         <div className="mobile-qsm-filter__modal-header">
           <div className="mobile-qsm-filter__modal-header-row">
-            <span className="mobile-qsm-filter__modal-header-title">Kies data</span>
+            <span className="mobile-qsm-filter__modal-header-title">{translations.QSM.CHOOSE_DATES}</span>
             <span className="mobile-qsm-filter__modal-header-close" onClick={closeModal}></span>
           </div>
         </div>
@@ -114,12 +116,12 @@ const MobileFilterModal: React.FC = () => {
           <div className="qsm__double-input__wrapper">
             <label className="qsm__input-wrapper">
               {datesIcon && <span className="qsm__input-icon">{datesIcon}</span>}
-              <span className="qsm__label">Vertrek</span>
+              <span className="qsm__label">{translations.QSM.DEPARTURE_DATE}</span>
               <input
                 type="text"
                 id="vertrek"
                 className="qsm__input u-ps-2"
-                placeholder="Datum"
+                placeholder={translations.QSM.DEPARTURE_DATE}
                 readOnly
                 value={fromDate ? format(new Date(fromDate), 'dd/MM/yyyy') : ''}
               />
@@ -130,12 +132,12 @@ const MobileFilterModal: React.FC = () => {
             {mobileDatePickerMode === 'range' && (
               <label className="qsm__input-wrapper">
                 {datesIcon && <span className="qsm__input-icon">{datesIcon}</span>}
-                <span className="qsm__label qsm__label--second-input-label">Retour</span>
+                <span className="qsm__label qsm__label--second-input-label">{translations.QSM.RETURN_DATE}</span>
                 <input
                   type="text"
                   id="retour"
                   className="qsm__input"
-                  placeholder="Datum"
+                  placeholder={translations.QSM.RETURN_DATE}
                   readOnly
                   value={toDate ? format(new Date(toDate), 'dd/MM/yyyy') : ''}
                 />
@@ -171,7 +173,7 @@ const MobileFilterModal: React.FC = () => {
                 closeModal();
               }
             }}>
-            Bevestigen
+            {translations.QSM.CONFIRM}
           </button>
         </div>
       </div>
@@ -215,7 +217,7 @@ const MobileFilterModal: React.FC = () => {
         </div>
         <div className="mobile-qsm-filter__modal-footer">
           <button className="cta" onClick={closeModal}>
-            Bevestigen
+            {translations.QSM.CONFIRM}
           </button>
         </div>
         {/* </div> */}
@@ -236,7 +238,7 @@ const MobileFilterModal: React.FC = () => {
       {/* header */}
       <div className="mobile-qsm-filter__modal-header">
         <div className="mobile-qsm-filter__modal-header-row">
-          <span className="mobile-qsm-filter__modal-header-title">Reizigers</span>
+          <span className="mobile-qsm-filter__modal-header-title">{translations.QSM.TRAVELERS}</span>
           <span className="mobile-qsm-filter__modal-header-close" onClick={closeModal}></span>
         </div>
       </div>
@@ -249,7 +251,7 @@ const MobileFilterModal: React.FC = () => {
 
       <div className="mobile-qsm-filter__modal-footer">
         <button className="cta" onClick={closeModal}>
-          Bevestigen
+          {translations.QSM.CONFIRM}
         </button>
       </div>
     </div>

package/src/qsm/components/travel-class-picker/index.tsx

@@ -4,17 +4,19 @@ import { QSMRootState } from '../../store/qsm-store';
 import { setSelectedTravelClass } from '../../store/qsm-slice';
 import QSMConfigurationContext from '../../qsm-configuration-context';
 import ItemPicker from '../item-picker';
+import { getTranslations } from '../../../shared/utils/localization-util';
 
 const TravelClassPicker: React.FC = () => {
-  const { travelClasses } = useContext(QSMConfigurationContext);
+  const { travelClasses, languageCode } = useContext(QSMConfigurationContext);
+  const translations = getTranslations(languageCode ?? 'en-GB');
   const { selectedTravelClass } = useSelector((state: QSMRootState) => state.qsm);
 
   return (
     <ItemPicker
       items={travelClasses}
       selection={selectedTravelClass}
-      label="Reisklasse"
-      placeholder="Selecteer reisklasse"
+      label={translations.QSM.TRAVEL_CLASS_LABEL}
+      placeholder={translations.QSM.TRAVEL_CLASS_PLACEHOLDER}
       classModifier="travel-class-picker__items"
       onPick={setSelectedTravelClass}
     />

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

@@ -3,16 +3,19 @@ import { useDispatch, useSelector } from 'react-redux';
 import { QSMRootState } from '../../store/qsm-store';
 import { setAdults, setKids, setBabies, setRooms, addRoom, removeRoom, updateRoomTraveler } from '../../store/qsm-slice';
 import QSMConfigurationContext from '../../qsm-configuration-context';
+import { getTranslations } from '../../../shared/utils/localization-util';
 import TravelClassPicker from '../travel-class-picker';
 import TravelTypePicker from '../travel-type-picker';
 import Icon from '../icon';
 
 const TravelInput: React.FC = () => {
-  const { type, askRooms, maxTravelers, defaultTravelers, maxChildAge, maxInfantAge, askTravelType, askTravelClass } = useContext(QSMConfigurationContext);
+  const { type, askRooms, maxTravelers, defaultTravelers, maxChildAge, maxInfantAge, askTravelType, askTravelClass, languageCode } =
+    useContext(QSMConfigurationContext);
   const areTravelersInRooms = type !== 'flight' && askRooms;
 
   const dispatch = useDispatch();
   const { adults, kids, babies, rooms } = useSelector((state: QSMRootState) => state.qsm);
+  const translations = getTranslations(languageCode ?? 'en-GB');
 
   const getTravelerButtonClass = (disabled: boolean) => `button button--increment ${disabled ? 'button--disabled' : ''}`;
 
@@ -67,9 +70,9 @@ const TravelInput: React.FC = () => {
 
   // Compute age labels dynamically
   const ageLabels = {
-    adults: maxChildAge ? `${maxChildAge + 1}+ jaar` : '12+ jaar',
-    kids: maxChildAge && maxInfantAge ? `${maxInfantAge + 1}-${maxChildAge} jaar` : '2-11 jaar',
-    babies: maxInfantAge !== undefined ? `0-${maxInfantAge} jaar` : '0-1 jaar'
+    adults: maxChildAge ? `${maxChildAge + 1}+ ${translations.PRODUCT.YEAR}` : `12+ ${translations.PRODUCT.YEAR}`,
+    kids: maxChildAge && maxInfantAge ? `${maxInfantAge + 1}-${maxChildAge} ${translations.PRODUCT.YEAR}` : `2-11 ${translations.PRODUCT.YEAR}`,
+    babies: maxInfantAge !== undefined ? `0-${maxInfantAge} ${translations.PRODUCT.YEAR}` : `0-1 ${translations.PRODUCT.YEAR}`
   };
 
   return (
@@ -78,7 +81,7 @@ const TravelInput: React.FC = () => {
         <div>
           <div className="passenger-picker__rooms-header">
             <h4 className="passenger-picker__rooms-header-title">
-              Kamers: <span className="passenger-picker__rooms-header-count">{rooms.length}</span>
+              {translations.SHARED.ROOMS}: <span className="passenger-picker__rooms-header-count">{rooms.length}</span>
             </h4>
             {rooms.length < 4 && (
               <div
@@ -88,7 +91,7 @@ const TravelInput: React.FC = () => {
                     handleAddRoom();
                   }
                 }}>
-                Kamer toevoegen
+                {translations.QSM.ADD_ROOM}
               </div>
             )}
           </div>
@@ -129,7 +132,7 @@ const TravelInput: React.FC = () => {
                 {rooms.length > 1 && (
                   <div className="passenger-picker__remove-room">
                     <button type="button" className="cta--remove" onClick={() => handleRemoveRoom(idx)}>
-                      Verwijder kamer
+                      {translations.QSM.REMOVE_ROOM}
                     </button>
                   </div>
                 )}
@@ -143,7 +146,7 @@ const TravelInput: React.FC = () => {
                         transform="translate(-96 864)"
                       />
                     </svg>
-                    <span className="passenger-picker__info-message-explanation">Je zit aan het maximale aantal personen</span>
+                    <span className="passenger-picker__info-message-explanation">{translations.QSM.MAX_TRAVELERS_REACHED}</span>
                   </div>
                 )}
 
@@ -158,7 +161,7 @@ const TravelInput: React.FC = () => {
             {/* Adults */}
             <div className="passenger-picker__item">
               <div className="passenger-picker__item-text">
-                <span>Volwassenen</span>
+                <span>{translations.QSM.ADULTS}</span>
                 <span className="passenger-picker__item-text-age">{ageLabels.adults}</span>
               </div>
               <div className="decrement-increment__ui">
@@ -177,7 +180,7 @@ const TravelInput: React.FC = () => {
             {/* Children */}
             <div className="passenger-picker__item">
               <div className="passenger-picker__item-text">
-                <span>Kinderen</span>
+                <span>{translations.QSM.CHILDREN}</span>
                 <span className="passenger-picker__item-text-age">{ageLabels.kids}</span>
               </div>
               <div className="decrement-increment__ui">
@@ -194,7 +197,7 @@ const TravelInput: React.FC = () => {
             {/* Babies */}
             <div className="passenger-picker__item">
               <div className="passenger-picker__item-text">
-                <span>Baby&squot;s</span>
+                <span>{translations.QSM.BABIES}</span>
                 <span className="passenger-picker__item-text-age">{ageLabels.babies}</span>
               </div>
               <div className="decrement-increment__ui">
@@ -220,7 +223,7 @@ const TravelInput: React.FC = () => {
                   transform="translate(-96 864)"
                 />
               </svg>
-              <span className="passenger-picker__info-message-explanation">Je zit aan het maximale aantal personen</span>
+              <span className="passenger-picker__info-message-explanation">{translations.QSM.MAX_TRAVELERS_REACHED}</span>
             </div>
           )}
 

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

@@ -6,6 +6,7 @@ import useMediaQuery from '../../../shared/utils/use-media-query-util';
 import { QSMRootState } from '../../store/qsm-store';
 import QSMConfigurationContext from '../../qsm-configuration-context';
 import Icon from '../icon';
+import { getTranslations } from '../../../shared/utils/localization-util';
 
 const selectTravelerSummary = (state: QSMRootState, areTravelersInRooms: boolean | undefined) => {
   const { adults, kids, babies, rooms, selectedTravelType } = state.qsm;
@@ -29,7 +30,9 @@ const TravelInputGroup: React.FC = () => {
   const isSmallScreen = useMediaQuery('(max-width: 768px)');
   const [isOpen, setIsOpen] = useState(false);
   const wrapperRef = useRef<HTMLDivElement>(null);
-  const { type, askRooms, defaultTravelers, maxTravelers } = useContext(QSMConfigurationContext);
+  const { type, askRooms, defaultTravelers, maxTravelers, languageCode } = useContext(QSMConfigurationContext);
+  const translations = getTranslations(languageCode ?? 'en-GB');
+
   const areTravelersInRooms = type !== 'flight' && askRooms;
 
   const { adults, rooms } = useSelector((s: QSMRootState) => s.qsm);
@@ -86,8 +89,16 @@ const TravelInputGroup: React.FC = () => {
     <div ref={wrapperRef} className="qsm__single-input-wrapper qsm__single-input-wrapper--travel">
       <Icon name="ui-user" height={16} />
 
-      <span className="qsm__label">Met wie ga je?</span>
-      <input type="text" id="traveler" className="qsm__input u-ps-2" placeholder="Met wie ga je?" readOnly onClick={handleClick} value={travelerSummary} />
+      <span className="qsm__label">{translations.QSM.TRAVELERS_LABEL}</span>
+      <input
+        type="text"
+        id="traveler"
+        className="qsm__input u-ps-2"
+        placeholder={translations.QSM.TRAVELERS_LABEL}
+        readOnly
+        onClick={handleClick}
+        value={travelerSummary}
+      />
 
       {!isSmallScreen && isOpen && (
         <div>