@qite/tide-booking-component 1.4.95 → 1.4.97

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

@@ -1,1101 +1,1101 @@
-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,
-  selectCountries,
-  selectHasMounted,
-  selectIsFetching,
-  selectIsUnavailable,
-  selectTravelersFirstStep
-} from '../booking/selectors';
-import { selectFormRooms, selectTravelersFormValues, setFormValues } from './travelers-form-slice';
-
-import { Link, useNavigate } from 'react-router-dom';
-import { format, parse } from 'date-fns';
-import flat from 'flat';
-import { useFormik } from 'formik';
-import produce from 'immer';
-import { buildClassName } from '../../../shared/utils/class-util';
-import LabeledInput from '../../components/labeled-input';
-import LabeledSelect from '../../components/labeled-select';
-import SettingsContext from '../../settings-context';
-import { useAppDispatch } from '../../store';
-import { RoomTraveler, Traveler, TravelersFormValues } from '../../types';
-import { setBookingType } from '../booking/booking-slice';
-import { FLIGHT_OPTIONS_FORM_STEP, OPTIONS_FORM_STEP, SUMMARY_STEP } from '../booking/constants';
-import { selectAgentAdressId, selectAgents, selectBookingQueryString, selectBookingType, selectStartDate, selectTranslations } from '../booking/selectors';
-import { fetchPriceDetails } from '../price-details/price-details-slice';
-import GenderControl from './controls/gender-control';
-import TypeAheadInput from './type-ahead-input';
-import validateForm from './validate-form';
-import PhoneInput from '../../components/phone-input';
-
-interface TravelersFormProps {}
-
-function createTraveler(traveler: RoomTraveler, followNumber: { number: number }, personTranslation?: string, isCompact?: boolean) {
-  if (isCompact) {
-    return {
-      id: traveler.id,
-      firstName: personTranslation,
-      lastName: `${followNumber.number++}`,
-      birthDate: '',
-      gender: '',
-      age: traveler.age || 30
-    } as Traveler;
-  } else {
-    return {
-      id: traveler.id,
-      firstName: '',
-      lastName: '',
-      birthDate: '',
-      gender: ''
-    } as Traveler;
-  }
-}
-
-function createInitialValues(
-  formRooms: { adults: RoomTraveler[]; children: RoomTraveler[] }[],
-  startDate?: string,
-  agentAdressId?: number,
-  personTranslation?: string,
-  isCompact?: boolean
-) {
-  let followNumber = { number: 1 };
-
-  const initialValues = {
-    startDate: startDate,
-    rooms: formRooms.map((r) => ({
-      adults: r.adults.map((x) => createTraveler(x, followNumber, personTranslation, isCompact)),
-      children: r.children.map((x) => createTraveler(x, followNumber, personTranslation, isCompact))
-    })),
-    mainBookerId: -1,
-    street: '',
-    houseNumber: '',
-    box: '',
-    zipCode: '',
-    place: '',
-    country: '',
-    phone: '',
-    email: '',
-    emailConfirmation: '',
-    travelAgentId: agentAdressId ?? 0,
-    travelAgentName: ''
-  };
-
-  if (initialValues.rooms && initialValues.rooms.length && initialValues.rooms[0].adults && initialValues.rooms[0].adults.length) {
-    initialValues.mainBookerId = initialValues.rooms[0].adults[0].id;
-  }
-
-  return initialValues;
-}
-
-const TravelersForm: React.FC<TravelersFormProps> = () => {
-  const dispatch = useAppDispatch();
-  const settings = useContext(SettingsContext);
-  const navigate = settings.skipRouter ? () => {} : useNavigate();
-  const bookingQueryString = useSelector(selectBookingQueryString);
-  const startDate = useSelector(selectStartDate);
-  const formRooms = useSelector(selectFormRooms);
-  const bookingType = useSelector(selectBookingType);
-  const agents = useSelector(selectAgents);
-  const agentAdressId = useSelector(selectAgentAdressId);
-  const translations = useSelector(selectTranslations);
-  const travelersFirstStep = useSelector(selectTravelersFirstStep);
-  const isUnavailable = useSelector(selectIsUnavailable);
-  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);
-
-  const [showAgents, setShowAgents] = useState<boolean>(settings.agentRequired ?? false);
-  const [showAgentSelection, setShowAgentSelection] = useState<boolean>(!settings.agentAdressId && !settings.hideAgentSelection);
-
-  const typeaheadAgents =
-    sortBy(
-      agents?.map((x) => ({
-        key: `${x.id}`,
-        value: `${x.name} (${x.postalCode} ${x.location})`,
-        text: `${x.name} (${x.postalCode} ${x.location})`
-      })),
-      'value'
-    ) ?? [];
-
-  const [filteredAgents, setFilteredAgents] = useState<{ key: string; value: string; text: string }[]>(typeaheadAgents);
-
-  const formik = useCompactForm
-    ? useFormik<TravelersFormValues>({
-        initialValues,
-        validate: (values) => {},
-        onSubmit: (values) => {
-          dispatch(setFormValues(values));
-          dispatch(fetchPriceDetails());
-
-          if (settings.skipRouter) {
-            dispatch(setCurrentStep(SUMMARY_STEP));
-          } else {
-            navigate(`${!settings.skipBasePathInRouting ? settings.basePath : ''}${settings.summary.pathSuffix}?${bookingQueryString}`);
-          }
-        }
-      })
-    : useFormik<TravelersFormValues>({
-        initialValues,
-        validate: (values) =>
-          validateForm(values, settings.agentRequired, bookingType, translations, settings.travellers.formFields, settings.travellers.mainBookerFormFields),
-        onSubmit: (values) => {
-          dispatch(setFormValues(values));
-          dispatch(fetchPackage());
-
-          if (settings.skipRouter) {
-            if (travelersFirstStep) {
-              dispatch(setCurrentStep(FLIGHT_OPTIONS_FORM_STEP));
-            } else {
-              dispatch(setCurrentStep(SUMMARY_STEP));
-            }
-          } else {
-            if (travelersFirstStep) {
-              navigate(`${!settings.skipBasePathInRouting ? settings.basePath : ''}${settings.flightOptions.pathSuffix}?${bookingQueryString}`);
-            } else {
-              navigate(`${!settings.skipBasePathInRouting ? settings.basePath : ''}${settings.summary.pathSuffix}?${bookingQueryString}`);
-            }
-          }
-        }
-      });
-
-  useEffect(() => {
-    dispatch(fetchPriceDetails());
-  }, []);
-
-  useEffect(() => {
-    if (!bookingAttributes?.rooms?.length || isFetching) return;
-
-    if (!hasMounted) {
-      dispatch(setHasMounted(true));
-      return;
-    }
-
-    const fetchAll = async () => {
-      dispatch(setIsFetching(true));
-
-      try {
-        await dispatch(fetchPackage());
-        await dispatch(fetchPriceDetails());
-      } finally {
-        dispatch(setIsFetching(false));
-      }
-    };
-
-    fetchAll();
-  }, [bookingAttributes?.rooms]);
-
-  // Update URL querystring when form data changes
-  useEffect(() => {
-    if (settings.skipRouter || !travelersFirstStep) return;
-    const params = new URLSearchParams(bookingQueryString);
-    params.delete('rooms');
-    const roomsString = formik.values.rooms
-      .map((room) => {
-        const adults = room.adults ? room.adults.length : 0;
-        const childAges = room.children && room.children.length ? room.children.map((c) => c.age).join(',') : '';
-        return `adults:${adults},childAges:(${childAges})`;
-      })
-      .map((s) => `(${s})`)
-      .join(',');
-    let query = params.toString();
-    if (query) {
-      query += `&rooms=(${roomsString})`;
-    } else {
-      query = `rooms=(${roomsString})`;
-    }
-    const newUrl = `${window.location.pathname}?${query}`;
-    navigate(newUrl, { replace: true });
-  }, [formik.values]);
-
-  useEffect(() => {
-    if (agents && settings.affiliateSlug) {
-      const agent = agents.find((x) => x.affiliateSlug && x.affiliateSlug === settings.affiliateSlug);
-      if (!agent) return;
-
-      const formValues = produce(formik.values, (values) => {
-        (values.travelAgentId = Number(agent.id)), (values.travelAgentName = agent.name);
-      });
-      formik.setValues(formValues, false);
-      dispatch(setFormValues(formValues));
-      setShowAgentSelection(false);
-    }
-  }, [agents, settings.affiliateSlug]);
-
-  const handleMainBookerChange: React.FormEventHandler<HTMLInputElement> = (e) => {
-    const id = parseInt(e.currentTarget.value);
-
-    formik.setFieldValue('mainBookerId', id);
-  };
-
-  const mainBooker = formik.values.rooms
-    .find((r) => r.adults.find((traveler) => traveler.id === formik.values.mainBookerId))
-    ?.adults.find((traveler) => traveler.id === formik.values.mainBookerId);
-
-  const handleAgentChange = (value: string) => {
-    const filteredAgents = typeaheadAgents.filter((x) => x.value.toLocaleLowerCase().indexOf(value.toLocaleLowerCase()) > -1);
-
-    setFilteredAgents(filteredAgents);
-    formik.setFieldValue('travelAgentName', value);
-  };
-
-  const handleAgentSelect = (key: string) => {
-    const agent = typeaheadAgents.find((x) => x.key === key);
-
-    formik.setValues({
-      ...formik.values,
-      travelAgentId: Number(agent?.key),
-      travelAgentName: agent?.value ?? ''
-    });
-
-    let bookingType = 'b2b2c';
-    if (agentAdressId && agentAdressId != 0) {
-      bookingType = 'b2b';
-    }
-    dispatch(setBookingType(bookingType));
-  };
-
-  const handleAgentClear = () => {
-    formik.setValues({
-      ...formik.values,
-      travelAgentId: 0,
-      travelAgentName: ''
-    });
-
-    dispatch(setBookingType('b2c'));
-  };
-
-  const handleAddTraveler = (roomIndex: number) => {
-    const rooms = [...formik.values.rooms];
-    const newAdult = {
-      id: Date.now(),
-      firstName: '',
-      lastName: '',
-      birthDate: '',
-      gender: ''
-    };
-    rooms[roomIndex] = {
-      ...rooms[roomIndex],
-      adults: [...rooms[roomIndex].adults, newAdult]
-    };
-    formik.setFieldValue('rooms', rooms);
-  };
-
-  const handleRemoveTraveler = (roomIndex: number, travelerIndex: number) => {
-    const rooms = [...formik.values.rooms];
-    const adults = [...rooms[roomIndex].adults];
-    if (adults.length <= 1) {
-      return;
-    }
-    adults.splice(travelerIndex, 1);
-    rooms[roomIndex] = {
-      ...rooms[roomIndex],
-      adults
-    };
-    formik.setFieldValue('rooms', rooms);
-  };
-
-  const handleAddRoom = () => {
-    const rooms = [...formik.values.rooms];
-    const newAdult = {
-      id: Date.now(),
-      firstName: '',
-      lastName: '',
-      birthDate: '',
-      gender: ''
-    };
-    rooms.push({ adults: [newAdult], children: [] });
-    formik.setFieldValue('rooms', rooms);
-  };
-
-  const handleRemoveRoom = (roomIndex: number) => {
-    const rooms = [...formik.values.rooms];
-    rooms.splice(roomIndex, 1);
-    formik.setFieldValue('rooms', rooms);
-  };
-
-  const toggleAgent = (value: boolean) => {
-    setShowAgents(value);
-
-    if (!value) {
-      handleAgentClear();
-      setFilteredAgents([]);
-    }
-  };
-
-  const goPrevious = () => {
-    dispatch(setCurrentStep(OPTIONS_FORM_STEP));
-  };
-
-  const flatErrors: Record<string, string> = flat(formik.errors);
-  const errorKeys = Object.keys(flatErrors).filter((key) => get(formik.touched, key));
-
-  const hasVisibleError = (key: string) => get(formik.errors, key) && get(formik.touched, key);
-
-  const getControl = (type: string, value: Traveler, name: string) => {
-    switch (type) {
-      case 'gender': {
-        return <GenderControl translations={translations} value={value} formik={formik} name={name} />;
-      }
-      case 'firstName': {
-        return (
-          <LabeledInput
-            hasError={hasVisibleError(name)}
-            extraClassName="form__group--md-33"
-            label={translations.TRAVELERS_FORM.FIRST_NAME}
-            required
-            name={name}
-            onChange={formik.handleChange}
-            onBlur={formik.handleBlur}
-            value={value.firstName}
-          />
-        );
-      }
-      case 'lastName': {
-        return (
-          <LabeledInput
-            hasError={hasVisibleError(name)}
-            extraClassName="form__group--md-33"
-            label={translations.TRAVELERS_FORM.LAST_NAME}
-            required
-            name={name}
-            onChange={formik.handleChange}
-            onBlur={formik.handleBlur}
-            value={value.lastName}
-          />
-        );
-      }
-      case 'birthDate': {
-        return (
-          <LabeledInput
-            type="date"
-            hasError={hasVisibleError(name)}
-            extraClassName="form__group--md-33"
-            label={translations.TRAVELERS_FORM.BIRTHDATE}
-            required
-            name={name}
-            onChange={formik.handleChange}
-            onBlur={formik.handleBlur}
-            value={value.birthDate}
-          />
-        );
-      }
-      case 'country': {
-        return (
-          <LabeledSelect
-            hasError={hasVisibleError('country')}
-            label={translations.TRAVELERS_FORM.COUNTRY}
-            required
-            name="country"
-            onChange={formik.handleChange}
-            onBlur={formik.handleBlur}
-            value={formik.values.country}
-            options={[
-              {
-                key: 'empty',
-                value: undefined,
-                label: translations.TRAVELERS_FORM.SELECT_COUNTRY
-              },
-              ...(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
-                  })) ?? [])
-            ]}
-          />
-        );
-      }
-      case 'phone': {
-        return (
-          <PhoneInput
-            countries={settings.travellers?.countries ?? []}
-            countryIso2={formik.values.country}
-            hasError={hasVisibleError('phone')}
-            label={translations.TRAVELERS_FORM.PHONE}
-            required
-            name="phone"
-            onChange={formik.handleChange}
-            onBlur={formik.handleBlur}
-            value={formik.values.phone}
-          />
-        );
-      }
-      case 'email': {
-        return (
-          <>
-            <LabeledInput
-              type="email"
-              hasError={hasVisibleError('email')}
-              extraClassName="form__group--md-33"
-              label={translations.TRAVELERS_FORM.EMAIL}
-              required
-              name="email"
-              onChange={formik.handleChange}
-              onBlur={formik.handleBlur}
-              value={formik.values.email}
-            />
-            <LabeledInput
-              type="email"
-              hasError={hasVisibleError('emailConfirmation')}
-              extraClassName="form__group--md-33"
-              label={translations.TRAVELERS_FORM.REPEAT_EMAIL}
-              required
-              name="emailConfirmation"
-              onChange={formik.handleChange}
-              onBlur={formik.handleBlur}
-              value={formik.values.emailConfirmation}
-            />
-          </>
-        );
-      }
-    }
-  };
-
-  return (
-    <form
-      className="form form__travelers"
-      name="booking--travellers"
-      id="booking--travellers"
-      noValidate
-      onSubmit={formik.handleSubmit}
-      onReset={formik.handleReset}>
-      {useCompactForm ? (
-        <div className="form__travelers__wrapper">
-          {formik.values.rooms.map((room, rIndex) => (
-            <div key={rIndex}>
-              {formik.values.rooms.length > 1 && (
-                <div className="form__region">
-                  <div className="form__region-header">
-                    <h5 className="form__region-heading">
-                      {translations.SHARED.ROOM} {rIndex + 1}
-                    </h5>
-                    <p className="form__region-label">
-                      {compact([
-                        room.adults.length,
-                        room.adults.length === 1 && ` ${translations.TRAVELERS_FORM.ADULT}`,
-                        room.adults.length > 1 && ` ${translations.TRAVELERS_FORM.ADULTS}`,
-                        room.adults && room.adults.length && room.children && room.children.length && ', ',
-                        room.children.length,
-                        room.children.length === 1 && ` ${translations.TRAVELERS_FORM.CHILD}`,
-                        room.children.length > 1 && ` ${translations.TRAVELERS_FORM.CHILDREN}`
-                      ]).join('')}
-                    </p>
-                  </div>
-                </div>
-              )}
-              {room.adults.map((travelerValues, index) => (
-                <div className="form__region" key={travelerValues.id}>
-                  <div className="form__region-header">
-                    <h5 className="form__region-heading">
-                      {translations.TRAVELERS_FORM.TRAVELER} {index + 1}
-                    </h5>
-                    <p className="form__region-label">{translations.TRAVELERS_FORM.ADULT}</p>
-
-                    <div className="radiobutton">
-                      <label className="radiobutton__label">
-                        <input
-                          type="radio"
-                          name="mainBookerId"
-                          onChange={handleMainBookerChange}
-                          onBlur={formik.handleBlur}
-                          value={travelerValues.id}
-                          checked={formik.values.mainBookerId === travelerValues.id}
-                          className="radiobutton__input"
-                        />
-                        {translations.TRAVELERS_FORM.MAIN_BOOKER}
-                      </label>
-                    </div>
-                  </div>
-                  <div className="form__row">
-                    <LabeledInput
-                      hasError={hasVisibleError(`rooms[${rIndex}].adults[${index}].age`)}
-                      extraClassName="form__group--md-33"
-                      label={translations.TRAVELERS_FORM.AGE}
-                      required
-                      name={`rooms[${rIndex}].adults[${index}].age`}
-                      onChange={formik.handleChange}
-                      onBlur={formik.handleBlur}
-                      value={travelerValues.age}
-                    />
-                  </div>
-                </div>
-              ))}
-              {room.children.map((travelerValues, index) => (
-                <div className="form__region" key={travelerValues.id}>
-                  <div className="form__region-header">
-                    <h5 className="form__region-heading">
-                      {translations.TRAVELERS_FORM.TRAVELER} {room.adults.length + index + 1}
-                    </h5>
-                    <p className="form__region-label">{translations.TRAVELERS_FORM.CHILD}</p>
-                  </div>
-                  <div className="form__row">
-                    <LabeledInput
-                      hasError={hasVisibleError(`rooms[${rIndex}].children[${index}].age`)}
-                      extraClassName="form__group--md-33"
-                      label={translations.TRAVELERS_FORM.AGE}
-                      required
-                      name={`rooms[${rIndex}].children[${index}].age`}
-                      onChange={formik.handleChange}
-                      onBlur={formik.handleBlur}
-                      value={travelerValues.age}
-                    />
-                  </div>
-                </div>
-              ))}
-            </div>
-          ))}
-        </div>
-      ) : (
-        <>
-          <div className="form__travelers__wrapper">
-            {/* map each room */}
-            {formik.values.rooms.map((room, rIndex) => (
-              <div key={rIndex}>
-                {formik.values.rooms.length > 1 && (
-                  <div className="form__region">
-                    <div className="form__region-header">
-                      <h5 className="form__region-heading">
-                        {translations.SHARED.ROOM} {rIndex + 1}
-                      </h5>
-                      <p className="form__region-label">
-                        {compact([
-                          room.adults.length,
-                          room.adults.length === 1 && ` ${translations.TRAVELERS_FORM.ADULT}`,
-                          room.adults.length > 1 && ` ${translations.TRAVELERS_FORM.ADULTS}`,
-                          room.adults && room.adults.length && room.children && room.children.length && ', ',
-                          room.children.length,
-                          room.children.length === 1 && ` ${translations.TRAVELERS_FORM.CHILD}`,
-                          room.children.length > 1 && ` ${translations.TRAVELERS_FORM.CHILDREN}`
-                        ]).join('')}
-                      </p>
-                    </div>
-                    {travelersFirstStep && formik.values.rooms.length > 1 && (
-                      <button type="button" className="cta cta--secondary" onClick={() => handleRemoveRoom(rIndex)}>
-                        Verwijder reisgezelschap
-                      </button>
-                    )}
-                  </div>
-                )}
-                {/* map adults here for the room */}
-                {room.adults.map((travelerValues, index) => (
-                  <div className="form__region" key={travelerValues.id}>
-                    <div className="form__region-header">
-                      <h5 className="form__region-heading">
-                        {translations.TRAVELERS_FORM.TRAVELER} {index + 1}
-                      </h5>
-                      <p className="form__region-label">{translations.TRAVELERS_FORM.ADULT}</p>
-
-                      <div className="radiobutton">
-                        <label className="radiobutton__label">
-                          <input
-                            type="radio"
-                            name="mainBookerId"
-                            onChange={handleMainBookerChange}
-                            onBlur={formik.handleBlur}
-                            value={travelerValues.id}
-                            checked={formik.values.mainBookerId === travelerValues.id}
-                            className="radiobutton__input"
-                          />
-                          {translations.TRAVELERS_FORM.MAIN_BOOKER}
-                        </label>
-                      </div>
-                    </div>
-                    {settings.travellers.formFields?.length ? (
-                      <>
-                        <div className="travelers-form__grid">
-                          {settings.travellers.formFields.map((field, fIndex) => (
-                            <div key={fIndex} className={`control control--${field.type}`}>
-                              {getControl(field.type, travelerValues, `rooms[${rIndex}].adults[${index}].${field.type}`)}
-                            </div>
-                          ))}
-                        </div>
-                      </>
-                    ) : (
-                      <>
-                        <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_ID} *</label>
-                            <div className="radiobutton-group">
-                              <div className="radiobutton">
-                                <label className="radiobutton__label">
-                                  <input
-                                    type="radio"
-                                    className="radiobutton__input"
-                                    name={`rooms[${rIndex}].adults[${index}].gender`}
-                                    onChange={formik.handleChange}
-                                    onBlur={formik.handleBlur}
-                                    value="m"
-                                    checked={travelerValues.gender === 'm'}
-                                  />
-                                  {translations.TRAVELERS_FORM.MALE_GENDER}
-                                </label>
-                              </div>
-
-                              <div className="radiobutton">
-                                <label className="radiobutton__label">
-                                  <input
-                                    type="radio"
-                                    className="radiobutton__input"
-                                    name={`rooms[${rIndex}].adults[${index}].gender`}
-                                    onChange={formik.handleChange}
-                                    onBlur={formik.handleBlur}
-                                    value="f"
-                                    checked={travelerValues.gender === 'f'}
-                                  />
-                                  {translations.TRAVELERS_FORM.FEMALE_GENDER}
-                                </label>
-                              </div>
-
-                              {/* <div className="radiobutton">
-                                <label className="radiobutton__label">
-                                  <input
-                                    type="radio"
-                                    className="radiobutton__input"
-                                    name={`rooms[${rIndex}].adults[${index}].gender`}
-                                    onChange={formik.handleChange}
-                                    onBlur={formik.handleBlur}
-                                    value="x"
-                                    checked={travelerValues.gender === 'x'}
-                                  />
-                                  {translations.TRAVELERS_FORM.OTHER}
-                                </label>
-                              </div> */}
-                            </div>
-                          </div>
-                        </div>
-                        <div className="form__row">
-                          <LabeledInput
-                            hasError={hasVisibleError(`rooms[${rIndex}].adults[${index}].firstName`)}
-                            extraClassName="form__group--md-33"
-                            label={translations.TRAVELERS_FORM.FIRST_NAME}
-                            required
-                            name={`rooms[${rIndex}].adults[${index}].firstName`}
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
-                            value={travelerValues.firstName}
-                          />
-                          <LabeledInput
-                            hasError={hasVisibleError(`rooms[${rIndex}].adults[${index}].lastName`)}
-                            extraClassName="form__group--md-33"
-                            label={translations.TRAVELERS_FORM.LAST_NAME}
-                            required
-                            name={`rooms[${rIndex}].adults[${index}].lastName`}
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
-                            value={travelerValues.lastName}
-                          />
-                          <LabeledInput
-                            type="date"
-                            hasError={hasVisibleError(`rooms[${rIndex}].adults[${index}].birthDate`)}
-                            extraClassName="form__group--md-33"
-                            label={translations.TRAVELERS_FORM.BIRTHDATE}
-                            required
-                            name={`rooms[${rIndex}].adults[${index}].birthDate`}
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
-                            value={travelerValues.birthDate}
-                          />
-                        </div>
-                        {travelersFirstStep && room.adults.length > 1 && (
-                          <button type="button" className="cta cta--secondary" onClick={() => handleRemoveTraveler(rIndex, index)}>
-                            {translations.TRAVELERS_FORM.REMOVE_TRAVELER}
-                          </button>
-                        )}
-                      </>
-                    )}
-                  </div>
-                ))}
-                {room.children.map((travelerValues, index) => (
-                  <div className="form__region" key={travelerValues.id}>
-                    <div className="form__region-header">
-                      <h5 className="form__region-heading">
-                        {translations.TRAVELERS_FORM.TRAVELER} {room.adults.length + index + 1}
-                      </h5>
-                      <p className="form__region-label">{translations.TRAVELERS_FORM.CHILD}</p>
-                    </div>
-                    {settings.travellers.formFields?.length ? (
-                      <>
-                        <div className="travelers-form__grid">
-                          {settings.travellers.formFields.map((field, fIndex) => (
-                            <div key={fIndex} className={`control control--${field.type}`}>
-                              {getControl(field.type, travelerValues, `rooms[${rIndex}].children[${index}].${field.type}`)}
-                            </div>
-                          ))}
-                        </div>
-                      </>
-                    ) : (
-                      <>
-                        <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_ID} *</label>
-                            <div className="radiobutton-group">
-                              <div className="radiobutton">
-                                <label className="radiobutton__label">
-                                  <input
-                                    type="radio"
-                                    className="radiobutton__input"
-                                    name={`rooms[${rIndex}].children[${index}].gender`}
-                                    onChange={formik.handleChange}
-                                    onBlur={formik.handleBlur}
-                                    value="m"
-                                    checked={travelerValues.gender === 'm'}
-                                  />
-                                  {translations.TRAVELERS_FORM.MALE_GENDER}
-                                </label>
-                              </div>
-
-                              <div className="radiobutton">
-                                <label className="radiobutton__label">
-                                  <input
-                                    type="radio"
-                                    className="radiobutton__input"
-                                    name={`rooms[${rIndex}].children[${index}].gender`}
-                                    onChange={formik.handleChange}
-                                    onBlur={formik.handleBlur}
-                                    value="f"
-                                    checked={travelerValues.gender === 'f'}
-                                  />
-                                  {translations.TRAVELERS_FORM.FEMALE_GENDER}
-                                </label>
-                              </div>
-
-                              {/* <div className="radiobutton">
-                                <label className="radiobutton__label">
-                                  <input
-                                    type="radio"
-                                    className="radiobutton__input"
-                                    name={`rooms[${rIndex}].children[${index}].gender`}
-                                    onChange={formik.handleChange}
-                                    onBlur={formik.handleBlur}
-                                    value="x"
-                                    checked={travelerValues.gender === 'x'}
-                                  />
-                                  {translations.TRAVELERS_FORM.OTHER}
-                                </label>
-                              </div> */}
-                            </div>
-                          </div>
-                        </div>
-                        <div className="form__row">
-                          <LabeledInput
-                            hasError={hasVisibleError(`rooms[${rIndex}].children[${index}].firstName`)}
-                            extraClassName="form__group--md-33"
-                            label={translations.TRAVELERS_FORM.FIRST_NAME}
-                            required
-                            name={`rooms[${rIndex}].children[${index}].firstName`}
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
-                            value={travelerValues.firstName}
-                          />
-                          <LabeledInput
-                            hasError={hasVisibleError(`rooms[${rIndex}].children[${index}].lastName`)}
-                            extraClassName="form__group--md-33"
-                            label={translations.TRAVELERS_FORM.LAST_NAME}
-                            required
-                            name={`rooms[${rIndex}].children[${index}].lastName`}
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
-                            value={travelerValues.lastName}
-                          />
-                          <LabeledInput
-                            type="date"
-                            hasError={hasVisibleError(`rooms[${rIndex}].children[${index}].birthDate`)}
-                            extraClassName="form__group--md-33"
-                            label={translations.TRAVELERS_FORM.BIRTHDATE}
-                            required
-                            name={`rooms[${rIndex}].children[${index}].birthDate`}
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
-                            value={travelerValues.birthDate}
-                          />
-                        </div>
-                      </>
-                    )}
-                  </div>
-                ))}
-                {travelersFirstStep && (
-                  <div className="form__region">
-                    <button type="button" className="cta cta--select" onClick={() => handleAddTraveler(rIndex)}>
-                      {translations.TRAVELERS_FORM.ADD_TRAVELER}
-                    </button>
-                  </div>
-                )}
-              </div>
-            ))}
-
-            {bookingType != 'b2b' || settings.travellers?.mainBookerFormFields?.length ? (
-              <div className="form__region">
-                <div className="form__region-header">
-                  <h5 className="form__region-heading">{translations.TRAVELERS_FORM.MAIN_BOOKER}</h5>
-                  <p className="form__region-label">
-                    {compact([
-                      compact([mainBooker?.firstName, mainBooker?.lastName]).join(' '),
-                      mainBooker?.birthDate && format(parse(mainBooker.birthDate, 'yyyy-MM-dd', new Date()), 'dd-MM-yyyy')
-                    ]).join(', ')}
-                  </p>
-                </div>
-                <>
-                  {settings.travellers?.mainBookerFormFields?.length ? (
-                    <>
-                      <div className="main-booker-form__grid">
-                        {settings.travellers.mainBookerFormFields.map((field, fIndex) => (
-                          <div key={fIndex} className={`control control--${field.type}`}>
-                            {getControl(field.type, {} as Traveler, field.type)}
-                          </div>
-                        ))}
-                      </div>
-                    </>
-                  ) : (
-                    <>
-                      <div className="form__twocolumn">
-                        <div className="form__twocolumn-column">
-                          <div className="form__row">
-                            <LabeledInput
-                              hasError={hasVisibleError('street')}
-                              extraClassName="form__group--50 form__group--sm-60"
-                              label={translations.TRAVELERS_FORM.STREET}
-                              required
-                              name="street"
-                              onChange={formik.handleChange}
-                              onBlur={formik.handleBlur}
-                              value={formik.values.street}
-                            />
-                            <LabeledInput
-                              hasError={hasVisibleError('houseNumber')}
-                              extraClassName="form__group--30 form__group--sm-20"
-                              label={translations.TRAVELERS_FORM.HOUSE_NUMBER}
-                              required
-                              name="houseNumber"
-                              onChange={formik.handleChange}
-                              onBlur={formik.handleBlur}
-                              value={formik.values.houseNumber}
-                            />
-                            <LabeledInput
-                              hasError={hasVisibleError('box')}
-                              extraClassName="form__group--20"
-                              label={translations.TRAVELERS_FORM.POST_BOX}
-                              name="box"
-                              onChange={formik.handleChange}
-                              onBlur={formik.handleBlur}
-                              value={formik.values.box}
-                            />
-                          </div>
-                        </div>
-                        <div className="form__twocolumn-column">
-                          <div className="form__row">
-                            <LabeledInput
-                              hasError={hasVisibleError('zipCode')}
-                              extraClassName="form__group--40 form__group--sm-20"
-                              label={translations.TRAVELERS_FORM.ZIPCODE}
-                              required
-                              name="zipCode"
-                              onChange={formik.handleChange}
-                              onBlur={formik.handleBlur}
-                              value={formik.values.zipCode}
-                            />
-                            <LabeledInput
-                              hasError={hasVisibleError('place')}
-                              extraClassName="form__group--60 form__group--sm-40"
-                              label={translations.TRAVELERS_FORM.CITY}
-                              required
-                              name="place"
-                              onChange={formik.handleChange}
-                              onBlur={formik.handleBlur}
-                              value={formik.values.place}
-                            />
-                            <LabeledSelect
-                              hasError={hasVisibleError('country')}
-                              extraClassName="form__group--sm-40"
-                              label={translations.TRAVELERS_FORM.COUNTRY}
-                              required
-                              name="country"
-                              onChange={formik.handleChange}
-                              onBlur={formik.handleBlur}
-                              value={formik.values.country}
-                              options={[
-                                {
-                                  key: 'empty',
-                                  value: undefined,
-                                  label: translations.TRAVELERS_FORM.SELECT_COUNTRY
-                                },
-                                ...(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>
-                        </div>
-                      </div>
-                      <div className="form__row">
-                        <LabeledInput
-                          hasError={hasVisibleError('phone')}
-                          extraClassName="form__group--md-33"
-                          label={translations.TRAVELERS_FORM.PHONE}
-                          required
-                          name="phone"
-                          onChange={formik.handleChange}
-                          onBlur={formik.handleBlur}
-                          value={formik.values.phone}
-                        />
-                        <LabeledInput
-                          type="email"
-                          hasError={hasVisibleError('email')}
-                          extraClassName="form__group--md-33"
-                          label={translations.TRAVELERS_FORM.EMAIL}
-                          required
-                          name="email"
-                          onChange={formik.handleChange}
-                          onBlur={formik.handleBlur}
-                          value={formik.values.email}
-                        />
-                        <LabeledInput
-                          type="email"
-                          hasError={hasVisibleError('emailConfirmation')}
-                          extraClassName="form__group--md-33"
-                          label={translations.TRAVELERS_FORM.REPEAT_EMAIL}
-                          required
-                          name="emailConfirmation"
-                          onChange={formik.handleChange}
-                          onBlur={formik.handleBlur}
-                          value={formik.values.emailConfirmation}
-                        />
-                      </div>
-                    </>
-                  )}
-                </>
-              </div>
-            ) : (
-              <div className="form__region">
-                <div className="form__row">
-                  <LabeledInput
-                    hasError={hasVisibleError('phone')}
-                    extraClassName="form__group--md-33"
-                    label={translations.TRAVELERS_FORM.PHONE}
-                    required
-                    name="phone"
-                    onChange={formik.handleChange}
-                    onBlur={formik.handleBlur}
-                    value={formik.values.phone}
-                  />
-                </div>
-              </div>
-            )}
-
-            {showAgentSelection && (
-              <div className="form__region">
-                <div className="form__region-header">
-                  <h5 className="form__region-heading">{translations.TRAVELERS_FORM.BOOK_WITH_AGENT}</h5>
-                  <div className="checkbox" id="cbxChooseOffice">
-                    <label className="checkbox__label">
-                      <input
-                        type="checkbox"
-                        name="booking--mainbooker"
-                        defaultChecked={showAgents}
-                        onClick={() => toggleAgent(!showAgents)}
-                        className="checkbox__input"
-                      />
-                      {translations.TRAVELERS_FORM.CHOOSE_OFFICE}
-                    </label>
-                  </div>
-                </div>
-                {showAgents && (
-                  <div className="form__row form__row--choose-office">
-                    <div className={buildClassName(['form__group', 'form__group--icon', hasVisibleError('travelAgentId') && 'form__group--error'])}>
-                      <TypeAheadInput
-                        value={formik.values.travelAgentName}
-                        options={filteredAgents}
-                        onChange={handleAgentChange}
-                        onSelect={handleAgentSelect}
-                        onClear={handleAgentClear}
-                        name="travelAgentName"
-                        placeholder={translations.TRAVELERS_FORM.CHOOSE_AGENT_PLACEHOLDER}
-                      />
-                    </div>
-                  </div>
-                )}
-              </div>
-            )}
-          </div>
-          {errorKeys.length > 0 && (
-            <div className="form__region form__region--errors">
-              <div className="form__row">
-                <div className="form__group">
-                  <p className="form__error-heading">{translations.TRAVELERS_FORM.VALIDATION_MESSAGE}:</p>
-                  <ul className="list">
-                    {errorKeys.map((key) => (
-                      <li key={key}>{get(flatErrors, key)}</li>
-                    ))}
-                  </ul>
-                </div>
-              </div>
-            </div>
-          )}
-        </>
-      )}
-      {travelersFirstStep && (
-        <div className="booking__navigator">
-          <button type="button" className="cta cta--select" onClick={handleAddRoom}>
-            {translations.TRAVELERS_FORM.ADD_ROOM}
-          </button>
-        </div>
-      )}
-
-      <div className="booking__navigator">
-        {!travelersFirstStep && settings.skipRouter ? (
-          <button type="button" title={translations.STEPS.PREVIOUS} onClick={() => goPrevious()} className="cta cta--secondary">
-            {translations.STEPS.PREVIOUS}
-          </button>
-        ) : !travelersFirstStep ? (
-          <Link
-            to={`${!settings.skipBasePathInRouting ? settings.basePath : ''}${settings.options.pathSuffix}?${bookingQueryString}`}
-            title={translations.STEPS.PREVIOUS}
-            className="cta cta--secondary">
-            {translations.STEPS.PREVIOUS}
-          </Link>
-        ) : null}
-        <button type="submit" title={translations.STEPS.NEXT} className={'cta' + (isUnavailable ? ' cta--disabled' : '')}>
-          {translations.STEPS.NEXT}
-        </button>
-      </div>
-    </form>
-  );
-};
-
-export default TravelersForm;
+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,
+  selectCountries,
+  selectHasMounted,
+  selectIsFetching,
+  selectIsUnavailable,
+  selectTravelersFirstStep
+} from '../booking/selectors';
+import { selectFormRooms, selectTravelersFormValues, setFormValues } from './travelers-form-slice';
+
+import { Link, useNavigate } from 'react-router-dom';
+import { format, parse } from 'date-fns';
+import flat from 'flat';
+import { useFormik } from 'formik';
+import produce from 'immer';
+import { buildClassName } from '../../../shared/utils/class-util';
+import LabeledInput from '../../components/labeled-input';
+import LabeledSelect from '../../components/labeled-select';
+import SettingsContext from '../../settings-context';
+import { useAppDispatch } from '../../store';
+import { RoomTraveler, Traveler, TravelersFormValues } from '../../types';
+import { setBookingType } from '../booking/booking-slice';
+import { FLIGHT_OPTIONS_FORM_STEP, OPTIONS_FORM_STEP, SUMMARY_STEP } from '../booking/constants';
+import { selectAgentAdressId, selectAgents, selectBookingQueryString, selectBookingType, selectStartDate, selectTranslations } from '../booking/selectors';
+import { fetchPriceDetails } from '../price-details/price-details-slice';
+import GenderControl from './controls/gender-control';
+import TypeAheadInput from './type-ahead-input';
+import validateForm from './validate-form';
+import PhoneInput from '../../components/phone-input';
+
+interface TravelersFormProps {}
+
+function createTraveler(traveler: RoomTraveler, followNumber: { number: number }, personTranslation?: string, isCompact?: boolean) {
+  if (isCompact) {
+    return {
+      id: traveler.id,
+      firstName: personTranslation,
+      lastName: `${followNumber.number++}`,
+      birthDate: '',
+      gender: '',
+      age: traveler.age || 30
+    } as Traveler;
+  } else {
+    return {
+      id: traveler.id,
+      firstName: '',
+      lastName: '',
+      birthDate: '',
+      gender: ''
+    } as Traveler;
+  }
+}
+
+function createInitialValues(
+  formRooms: { adults: RoomTraveler[]; children: RoomTraveler[] }[],
+  startDate?: string,
+  agentAdressId?: number,
+  personTranslation?: string,
+  isCompact?: boolean
+) {
+  let followNumber = { number: 1 };
+
+  const initialValues = {
+    startDate: startDate,
+    rooms: formRooms.map((r) => ({
+      adults: r.adults.map((x) => createTraveler(x, followNumber, personTranslation, isCompact)),
+      children: r.children.map((x) => createTraveler(x, followNumber, personTranslation, isCompact))
+    })),
+    mainBookerId: -1,
+    street: '',
+    houseNumber: '',
+    box: '',
+    zipCode: '',
+    place: '',
+    country: '',
+    phone: '',
+    email: '',
+    emailConfirmation: '',
+    travelAgentId: agentAdressId ?? 0,
+    travelAgentName: ''
+  };
+
+  if (initialValues.rooms && initialValues.rooms.length && initialValues.rooms[0].adults && initialValues.rooms[0].adults.length) {
+    initialValues.mainBookerId = initialValues.rooms[0].adults[0].id;
+  }
+
+  return initialValues;
+}
+
+const TravelersForm: React.FC<TravelersFormProps> = () => {
+  const dispatch = useAppDispatch();
+  const settings = useContext(SettingsContext);
+  const navigate = settings.skipRouter ? () => {} : useNavigate();
+  const bookingQueryString = useSelector(selectBookingQueryString);
+  const startDate = useSelector(selectStartDate);
+  const formRooms = useSelector(selectFormRooms);
+  const bookingType = useSelector(selectBookingType);
+  const agents = useSelector(selectAgents);
+  const agentAdressId = useSelector(selectAgentAdressId);
+  const translations = useSelector(selectTranslations);
+  const travelersFirstStep = useSelector(selectTravelersFirstStep);
+  const isUnavailable = useSelector(selectIsUnavailable);
+  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);
+
+  const [showAgents, setShowAgents] = useState<boolean>(settings.agentRequired ?? false);
+  const [showAgentSelection, setShowAgentSelection] = useState<boolean>(!settings.agentAdressId && !settings.hideAgentSelection);
+
+  const typeaheadAgents =
+    sortBy(
+      agents?.map((x) => ({
+        key: `${x.id}`,
+        value: `${x.name} (${x.postalCode} ${x.location})`,
+        text: `${x.name} (${x.postalCode} ${x.location})`
+      })),
+      'value'
+    ) ?? [];
+
+  const [filteredAgents, setFilteredAgents] = useState<{ key: string; value: string; text: string }[]>(typeaheadAgents);
+
+  const formik = useCompactForm
+    ? useFormik<TravelersFormValues>({
+        initialValues,
+        validate: (values) => {},
+        onSubmit: (values) => {
+          dispatch(setFormValues(values));
+          dispatch(fetchPriceDetails());
+
+          if (settings.skipRouter) {
+            dispatch(setCurrentStep(SUMMARY_STEP));
+          } else {
+            navigate(`${!settings.skipBasePathInRouting ? settings.basePath : ''}${settings.summary.pathSuffix}?${bookingQueryString}`);
+          }
+        }
+      })
+    : useFormik<TravelersFormValues>({
+        initialValues,
+        validate: (values) =>
+          validateForm(values, settings.agentRequired, bookingType, translations, settings.travellers.formFields, settings.travellers.mainBookerFormFields),
+        onSubmit: (values) => {
+          dispatch(setFormValues(values));
+          dispatch(fetchPackage());
+
+          if (settings.skipRouter) {
+            if (travelersFirstStep) {
+              dispatch(setCurrentStep(FLIGHT_OPTIONS_FORM_STEP));
+            } else {
+              dispatch(setCurrentStep(SUMMARY_STEP));
+            }
+          } else {
+            if (travelersFirstStep) {
+              navigate(`${!settings.skipBasePathInRouting ? settings.basePath : ''}${settings.flightOptions.pathSuffix}?${bookingQueryString}`);
+            } else {
+              navigate(`${!settings.skipBasePathInRouting ? settings.basePath : ''}${settings.summary.pathSuffix}?${bookingQueryString}`);
+            }
+          }
+        }
+      });
+
+  useEffect(() => {
+    dispatch(fetchPriceDetails());
+  }, []);
+
+  useEffect(() => {
+    if (!bookingAttributes?.rooms?.length || isFetching) return;
+
+    if (!hasMounted) {
+      dispatch(setHasMounted(true));
+      return;
+    }
+
+    const fetchAll = async () => {
+      dispatch(setIsFetching(true));
+
+      try {
+        await dispatch(fetchPackage());
+        await dispatch(fetchPriceDetails());
+      } finally {
+        dispatch(setIsFetching(false));
+      }
+    };
+
+    fetchAll();
+  }, [bookingAttributes?.rooms]);
+
+  // Update URL querystring when form data changes
+  useEffect(() => {
+    if (settings.skipRouter || !travelersFirstStep) return;
+    const params = new URLSearchParams(bookingQueryString);
+    params.delete('rooms');
+    const roomsString = formik.values.rooms
+      .map((room) => {
+        const adults = room.adults ? room.adults.length : 0;
+        const childAges = room.children && room.children.length ? room.children.map((c) => c.age).join(',') : '';
+        return `adults:${adults},childAges:(${childAges})`;
+      })
+      .map((s) => `(${s})`)
+      .join(',');
+    let query = params.toString();
+    if (query) {
+      query += `&rooms=(${roomsString})`;
+    } else {
+      query = `rooms=(${roomsString})`;
+    }
+    const newUrl = `${window.location.pathname}?${query}`;
+    navigate(newUrl, { replace: true });
+  }, [formik.values]);
+
+  useEffect(() => {
+    if (agents && settings.affiliateSlug) {
+      const agent = agents.find((x) => x.affiliateSlug && x.affiliateSlug === settings.affiliateSlug);
+      if (!agent) return;
+
+      const formValues = produce(formik.values, (values) => {
+        (values.travelAgentId = Number(agent.id)), (values.travelAgentName = agent.name);
+      });
+      formik.setValues(formValues, false);
+      dispatch(setFormValues(formValues));
+      setShowAgentSelection(false);
+    }
+  }, [agents, settings.affiliateSlug]);
+
+  const handleMainBookerChange: React.FormEventHandler<HTMLInputElement> = (e) => {
+    const id = parseInt(e.currentTarget.value);
+
+    formik.setFieldValue('mainBookerId', id);
+  };
+
+  const mainBooker = formik.values.rooms
+    .find((r) => r.adults.find((traveler) => traveler.id === formik.values.mainBookerId))
+    ?.adults.find((traveler) => traveler.id === formik.values.mainBookerId);
+
+  const handleAgentChange = (value: string) => {
+    const filteredAgents = typeaheadAgents.filter((x) => x.value.toLocaleLowerCase().indexOf(value.toLocaleLowerCase()) > -1);
+
+    setFilteredAgents(filteredAgents);
+    formik.setFieldValue('travelAgentName', value);
+  };
+
+  const handleAgentSelect = (key: string) => {
+    const agent = typeaheadAgents.find((x) => x.key === key);
+
+    formik.setValues({
+      ...formik.values,
+      travelAgentId: Number(agent?.key),
+      travelAgentName: agent?.value ?? ''
+    });
+
+    let bookingType = 'b2b2c';
+    if (agentAdressId && agentAdressId != 0) {
+      bookingType = 'b2b';
+    }
+    dispatch(setBookingType(bookingType));
+  };
+
+  const handleAgentClear = () => {
+    formik.setValues({
+      ...formik.values,
+      travelAgentId: 0,
+      travelAgentName: ''
+    });
+
+    dispatch(setBookingType('b2c'));
+  };
+
+  const handleAddTraveler = (roomIndex: number) => {
+    const rooms = [...formik.values.rooms];
+    const newAdult = {
+      id: Date.now(),
+      firstName: '',
+      lastName: '',
+      birthDate: '',
+      gender: ''
+    };
+    rooms[roomIndex] = {
+      ...rooms[roomIndex],
+      adults: [...rooms[roomIndex].adults, newAdult]
+    };
+    formik.setFieldValue('rooms', rooms);
+  };
+
+  const handleRemoveTraveler = (roomIndex: number, travelerIndex: number) => {
+    const rooms = [...formik.values.rooms];
+    const adults = [...rooms[roomIndex].adults];
+    if (adults.length <= 1) {
+      return;
+    }
+    adults.splice(travelerIndex, 1);
+    rooms[roomIndex] = {
+      ...rooms[roomIndex],
+      adults
+    };
+    formik.setFieldValue('rooms', rooms);
+  };
+
+  const handleAddRoom = () => {
+    const rooms = [...formik.values.rooms];
+    const newAdult = {
+      id: Date.now(),
+      firstName: '',
+      lastName: '',
+      birthDate: '',
+      gender: ''
+    };
+    rooms.push({ adults: [newAdult], children: [] });
+    formik.setFieldValue('rooms', rooms);
+  };
+
+  const handleRemoveRoom = (roomIndex: number) => {
+    const rooms = [...formik.values.rooms];
+    rooms.splice(roomIndex, 1);
+    formik.setFieldValue('rooms', rooms);
+  };
+
+  const toggleAgent = (value: boolean) => {
+    setShowAgents(value);
+
+    if (!value) {
+      handleAgentClear();
+      setFilteredAgents([]);
+    }
+  };
+
+  const goPrevious = () => {
+    dispatch(setCurrentStep(OPTIONS_FORM_STEP));
+  };
+
+  const flatErrors: Record<string, string> = flat(formik.errors);
+  const errorKeys = Object.keys(flatErrors).filter((key) => get(formik.touched, key));
+
+  const hasVisibleError = (key: string) => get(formik.errors, key) && get(formik.touched, key);
+
+  const getControl = (type: string, value: Traveler, name: string) => {
+    switch (type) {
+      case 'gender': {
+        return <GenderControl translations={translations} value={value} formik={formik} name={name} />;
+      }
+      case 'firstName': {
+        return (
+          <LabeledInput
+            hasError={hasVisibleError(name)}
+            extraClassName="form__group--md-33"
+            label={translations.TRAVELERS_FORM.FIRST_NAME}
+            required
+            name={name}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            value={value.firstName}
+          />
+        );
+      }
+      case 'lastName': {
+        return (
+          <LabeledInput
+            hasError={hasVisibleError(name)}
+            extraClassName="form__group--md-33"
+            label={translations.TRAVELERS_FORM.LAST_NAME}
+            required
+            name={name}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            value={value.lastName}
+          />
+        );
+      }
+      case 'birthDate': {
+        return (
+          <LabeledInput
+            type="date"
+            hasError={hasVisibleError(name)}
+            extraClassName="form__group--md-33"
+            label={translations.TRAVELERS_FORM.BIRTHDATE}
+            required
+            name={name}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            value={value.birthDate}
+          />
+        );
+      }
+      case 'country': {
+        return (
+          <LabeledSelect
+            hasError={hasVisibleError('country')}
+            label={translations.TRAVELERS_FORM.COUNTRY}
+            required
+            name="country"
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            value={formik.values.country}
+            options={[
+              {
+                key: 'empty',
+                value: undefined,
+                label: translations.TRAVELERS_FORM.SELECT_COUNTRY
+              },
+              ...(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
+                  })) ?? [])
+            ]}
+          />
+        );
+      }
+      case 'phone': {
+        return (
+          <PhoneInput
+            countries={settings.travellers?.countries ?? []}
+            countryIso2={formik.values.country}
+            hasError={hasVisibleError('phone')}
+            label={translations.TRAVELERS_FORM.PHONE}
+            required
+            name="phone"
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            value={formik.values.phone}
+          />
+        );
+      }
+      case 'email': {
+        return (
+          <>
+            <LabeledInput
+              type="email"
+              hasError={hasVisibleError('email')}
+              extraClassName="form__group--md-33"
+              label={translations.TRAVELERS_FORM.EMAIL}
+              required
+              name="email"
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              value={formik.values.email}
+            />
+            <LabeledInput
+              type="email"
+              hasError={hasVisibleError('emailConfirmation')}
+              extraClassName="form__group--md-33"
+              label={translations.TRAVELERS_FORM.REPEAT_EMAIL}
+              required
+              name="emailConfirmation"
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              value={formik.values.emailConfirmation}
+            />
+          </>
+        );
+      }
+    }
+  };
+
+  return (
+    <form
+      className="form form__travelers"
+      name="booking--travellers"
+      id="booking--travellers"
+      noValidate
+      onSubmit={formik.handleSubmit}
+      onReset={formik.handleReset}>
+      {useCompactForm ? (
+        <div className="form__travelers__wrapper">
+          {formik.values.rooms.map((room, rIndex) => (
+            <div key={rIndex}>
+              {formik.values.rooms.length > 1 && (
+                <div className="form__region">
+                  <div className="form__region-header">
+                    <h5 className="form__region-heading">
+                      {translations.SHARED.ROOM} {rIndex + 1}
+                    </h5>
+                    <p className="form__region-label">
+                      {compact([
+                        room.adults.length,
+                        room.adults.length === 1 && ` ${translations.TRAVELERS_FORM.ADULT}`,
+                        room.adults.length > 1 && ` ${translations.TRAVELERS_FORM.ADULTS}`,
+                        room.adults && room.adults.length && room.children && room.children.length && ', ',
+                        room.children.length,
+                        room.children.length === 1 && ` ${translations.TRAVELERS_FORM.CHILD}`,
+                        room.children.length > 1 && ` ${translations.TRAVELERS_FORM.CHILDREN}`
+                      ]).join('')}
+                    </p>
+                  </div>
+                </div>
+              )}
+              {room.adults.map((travelerValues, index) => (
+                <div className="form__region" key={travelerValues.id}>
+                  <div className="form__region-header">
+                    <h5 className="form__region-heading">
+                      {translations.TRAVELERS_FORM.TRAVELER} {index + 1}
+                    </h5>
+                    <p className="form__region-label">{translations.TRAVELERS_FORM.ADULT}</p>
+
+                    <div className="radiobutton">
+                      <label className="radiobutton__label">
+                        <input
+                          type="radio"
+                          name="mainBookerId"
+                          onChange={handleMainBookerChange}
+                          onBlur={formik.handleBlur}
+                          value={travelerValues.id}
+                          checked={formik.values.mainBookerId === travelerValues.id}
+                          className="radiobutton__input"
+                        />
+                        {translations.TRAVELERS_FORM.MAIN_BOOKER}
+                      </label>
+                    </div>
+                  </div>
+                  <div className="form__row">
+                    <LabeledInput
+                      hasError={hasVisibleError(`rooms[${rIndex}].adults[${index}].age`)}
+                      extraClassName="form__group--md-33"
+                      label={translations.TRAVELERS_FORM.AGE}
+                      required
+                      name={`rooms[${rIndex}].adults[${index}].age`}
+                      onChange={formik.handleChange}
+                      onBlur={formik.handleBlur}
+                      value={travelerValues.age}
+                    />
+                  </div>
+                </div>
+              ))}
+              {room.children.map((travelerValues, index) => (
+                <div className="form__region" key={travelerValues.id}>
+                  <div className="form__region-header">
+                    <h5 className="form__region-heading">
+                      {translations.TRAVELERS_FORM.TRAVELER} {room.adults.length + index + 1}
+                    </h5>
+                    <p className="form__region-label">{translations.TRAVELERS_FORM.CHILD}</p>
+                  </div>
+                  <div className="form__row">
+                    <LabeledInput
+                      hasError={hasVisibleError(`rooms[${rIndex}].children[${index}].age`)}
+                      extraClassName="form__group--md-33"
+                      label={translations.TRAVELERS_FORM.AGE}
+                      required
+                      name={`rooms[${rIndex}].children[${index}].age`}
+                      onChange={formik.handleChange}
+                      onBlur={formik.handleBlur}
+                      value={travelerValues.age}
+                    />
+                  </div>
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      ) : (
+        <>
+          <div className="form__travelers__wrapper">
+            {/* map each room */}
+            {formik.values.rooms.map((room, rIndex) => (
+              <div key={rIndex}>
+                {formik.values.rooms.length > 1 && (
+                  <div className="form__region">
+                    <div className="form__region-header">
+                      <h5 className="form__region-heading">
+                        {translations.SHARED.ROOM} {rIndex + 1}
+                      </h5>
+                      <p className="form__region-label">
+                        {compact([
+                          room.adults.length,
+                          room.adults.length === 1 && ` ${translations.TRAVELERS_FORM.ADULT}`,
+                          room.adults.length > 1 && ` ${translations.TRAVELERS_FORM.ADULTS}`,
+                          room.adults && room.adults.length && room.children && room.children.length && ', ',
+                          room.children.length,
+                          room.children.length === 1 && ` ${translations.TRAVELERS_FORM.CHILD}`,
+                          room.children.length > 1 && ` ${translations.TRAVELERS_FORM.CHILDREN}`
+                        ]).join('')}
+                      </p>
+                    </div>
+                    {travelersFirstStep && formik.values.rooms.length > 1 && (
+                      <button type="button" className="cta cta--secondary" onClick={() => handleRemoveRoom(rIndex)}>
+                        Verwijder reisgezelschap
+                      </button>
+                    )}
+                  </div>
+                )}
+                {/* map adults here for the room */}
+                {room.adults.map((travelerValues, index) => (
+                  <div className="form__region" key={travelerValues.id}>
+                    <div className="form__region-header">
+                      <h5 className="form__region-heading">
+                        {translations.TRAVELERS_FORM.TRAVELER} {index + 1}
+                      </h5>
+                      <p className="form__region-label">{translations.TRAVELERS_FORM.ADULT}</p>
+
+                      <div className="radiobutton">
+                        <label className="radiobutton__label">
+                          <input
+                            type="radio"
+                            name="mainBookerId"
+                            onChange={handleMainBookerChange}
+                            onBlur={formik.handleBlur}
+                            value={travelerValues.id}
+                            checked={formik.values.mainBookerId === travelerValues.id}
+                            className="radiobutton__input"
+                          />
+                          {translations.TRAVELERS_FORM.MAIN_BOOKER}
+                        </label>
+                      </div>
+                    </div>
+                    {settings.travellers.formFields?.length ? (
+                      <>
+                        <div className="travelers-form__grid">
+                          {settings.travellers.formFields.map((field, fIndex) => (
+                            <div key={fIndex} className={`control control--${field.type}`}>
+                              {getControl(field.type, travelerValues, `rooms[${rIndex}].adults[${index}].${field.type}`)}
+                            </div>
+                          ))}
+                        </div>
+                      </>
+                    ) : (
+                      <>
+                        <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_ID} *</label>
+                            <div className="radiobutton-group">
+                              <div className="radiobutton">
+                                <label className="radiobutton__label">
+                                  <input
+                                    type="radio"
+                                    className="radiobutton__input"
+                                    name={`rooms[${rIndex}].adults[${index}].gender`}
+                                    onChange={formik.handleChange}
+                                    onBlur={formik.handleBlur}
+                                    value="m"
+                                    checked={travelerValues.gender === 'm'}
+                                  />
+                                  {translations.TRAVELERS_FORM.MALE_GENDER}
+                                </label>
+                              </div>
+
+                              <div className="radiobutton">
+                                <label className="radiobutton__label">
+                                  <input
+                                    type="radio"
+                                    className="radiobutton__input"
+                                    name={`rooms[${rIndex}].adults[${index}].gender`}
+                                    onChange={formik.handleChange}
+                                    onBlur={formik.handleBlur}
+                                    value="f"
+                                    checked={travelerValues.gender === 'f'}
+                                  />
+                                  {translations.TRAVELERS_FORM.FEMALE_GENDER}
+                                </label>
+                              </div>
+
+                              {/* <div className="radiobutton">
+                                <label className="radiobutton__label">
+                                  <input
+                                    type="radio"
+                                    className="radiobutton__input"
+                                    name={`rooms[${rIndex}].adults[${index}].gender`}
+                                    onChange={formik.handleChange}
+                                    onBlur={formik.handleBlur}
+                                    value="x"
+                                    checked={travelerValues.gender === 'x'}
+                                  />
+                                  {translations.TRAVELERS_FORM.OTHER}
+                                </label>
+                              </div> */}
+                            </div>
+                          </div>
+                        </div>
+                        <div className="form__row">
+                          <LabeledInput
+                            hasError={hasVisibleError(`rooms[${rIndex}].adults[${index}].firstName`)}
+                            extraClassName="form__group--md-33"
+                            label={translations.TRAVELERS_FORM.FIRST_NAME}
+                            required
+                            name={`rooms[${rIndex}].adults[${index}].firstName`}
+                            onChange={formik.handleChange}
+                            onBlur={formik.handleBlur}
+                            value={travelerValues.firstName}
+                          />
+                          <LabeledInput
+                            hasError={hasVisibleError(`rooms[${rIndex}].adults[${index}].lastName`)}
+                            extraClassName="form__group--md-33"
+                            label={translations.TRAVELERS_FORM.LAST_NAME}
+                            required
+                            name={`rooms[${rIndex}].adults[${index}].lastName`}
+                            onChange={formik.handleChange}
+                            onBlur={formik.handleBlur}
+                            value={travelerValues.lastName}
+                          />
+                          <LabeledInput
+                            type="date"
+                            hasError={hasVisibleError(`rooms[${rIndex}].adults[${index}].birthDate`)}
+                            extraClassName="form__group--md-33"
+                            label={translations.TRAVELERS_FORM.BIRTHDATE}
+                            required
+                            name={`rooms[${rIndex}].adults[${index}].birthDate`}
+                            onChange={formik.handleChange}
+                            onBlur={formik.handleBlur}
+                            value={travelerValues.birthDate}
+                          />
+                        </div>
+                        {travelersFirstStep && room.adults.length > 1 && (
+                          <button type="button" className="cta cta--secondary" onClick={() => handleRemoveTraveler(rIndex, index)}>
+                            {translations.TRAVELERS_FORM.REMOVE_TRAVELER}
+                          </button>
+                        )}
+                      </>
+                    )}
+                  </div>
+                ))}
+                {room.children.map((travelerValues, index) => (
+                  <div className="form__region" key={travelerValues.id}>
+                    <div className="form__region-header">
+                      <h5 className="form__region-heading">
+                        {translations.TRAVELERS_FORM.TRAVELER} {room.adults.length + index + 1}
+                      </h5>
+                      <p className="form__region-label">{translations.TRAVELERS_FORM.CHILD}</p>
+                    </div>
+                    {settings.travellers.formFields?.length ? (
+                      <>
+                        <div className="travelers-form__grid">
+                          {settings.travellers.formFields.map((field, fIndex) => (
+                            <div key={fIndex} className={`control control--${field.type}`}>
+                              {getControl(field.type, travelerValues, `rooms[${rIndex}].children[${index}].${field.type}`)}
+                            </div>
+                          ))}
+                        </div>
+                      </>
+                    ) : (
+                      <>
+                        <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_ID} *</label>
+                            <div className="radiobutton-group">
+                              <div className="radiobutton">
+                                <label className="radiobutton__label">
+                                  <input
+                                    type="radio"
+                                    className="radiobutton__input"
+                                    name={`rooms[${rIndex}].children[${index}].gender`}
+                                    onChange={formik.handleChange}
+                                    onBlur={formik.handleBlur}
+                                    value="m"
+                                    checked={travelerValues.gender === 'm'}
+                                  />
+                                  {translations.TRAVELERS_FORM.MALE_GENDER}
+                                </label>
+                              </div>
+
+                              <div className="radiobutton">
+                                <label className="radiobutton__label">
+                                  <input
+                                    type="radio"
+                                    className="radiobutton__input"
+                                    name={`rooms[${rIndex}].children[${index}].gender`}
+                                    onChange={formik.handleChange}
+                                    onBlur={formik.handleBlur}
+                                    value="f"
+                                    checked={travelerValues.gender === 'f'}
+                                  />
+                                  {translations.TRAVELERS_FORM.FEMALE_GENDER}
+                                </label>
+                              </div>
+
+                              {/* <div className="radiobutton">
+                                <label className="radiobutton__label">
+                                  <input
+                                    type="radio"
+                                    className="radiobutton__input"
+                                    name={`rooms[${rIndex}].children[${index}].gender`}
+                                    onChange={formik.handleChange}
+                                    onBlur={formik.handleBlur}
+                                    value="x"
+                                    checked={travelerValues.gender === 'x'}
+                                  />
+                                  {translations.TRAVELERS_FORM.OTHER}
+                                </label>
+                              </div> */}
+                            </div>
+                          </div>
+                        </div>
+                        <div className="form__row">
+                          <LabeledInput
+                            hasError={hasVisibleError(`rooms[${rIndex}].children[${index}].firstName`)}
+                            extraClassName="form__group--md-33"
+                            label={translations.TRAVELERS_FORM.FIRST_NAME}
+                            required
+                            name={`rooms[${rIndex}].children[${index}].firstName`}
+                            onChange={formik.handleChange}
+                            onBlur={formik.handleBlur}
+                            value={travelerValues.firstName}
+                          />
+                          <LabeledInput
+                            hasError={hasVisibleError(`rooms[${rIndex}].children[${index}].lastName`)}
+                            extraClassName="form__group--md-33"
+                            label={translations.TRAVELERS_FORM.LAST_NAME}
+                            required
+                            name={`rooms[${rIndex}].children[${index}].lastName`}
+                            onChange={formik.handleChange}
+                            onBlur={formik.handleBlur}
+                            value={travelerValues.lastName}
+                          />
+                          <LabeledInput
+                            type="date"
+                            hasError={hasVisibleError(`rooms[${rIndex}].children[${index}].birthDate`)}
+                            extraClassName="form__group--md-33"
+                            label={translations.TRAVELERS_FORM.BIRTHDATE}
+                            required
+                            name={`rooms[${rIndex}].children[${index}].birthDate`}
+                            onChange={formik.handleChange}
+                            onBlur={formik.handleBlur}
+                            value={travelerValues.birthDate}
+                          />
+                        </div>
+                      </>
+                    )}
+                  </div>
+                ))}
+                {travelersFirstStep && (
+                  <div className="form__region">
+                    <button type="button" className="cta cta--select" onClick={() => handleAddTraveler(rIndex)}>
+                      {translations.TRAVELERS_FORM.ADD_TRAVELER}
+                    </button>
+                  </div>
+                )}
+              </div>
+            ))}
+
+            {bookingType != 'b2b' || settings.travellers?.mainBookerFormFields?.length ? (
+              <div className="form__region">
+                <div className="form__region-header">
+                  <h5 className="form__region-heading">{translations.TRAVELERS_FORM.MAIN_BOOKER}</h5>
+                  <p className="form__region-label">
+                    {compact([
+                      compact([mainBooker?.firstName, mainBooker?.lastName]).join(' '),
+                      mainBooker?.birthDate && format(parse(mainBooker.birthDate, 'yyyy-MM-dd', new Date()), 'dd-MM-yyyy')
+                    ]).join(', ')}
+                  </p>
+                </div>
+                <>
+                  {settings.travellers?.mainBookerFormFields?.length ? (
+                    <>
+                      <div className="main-booker-form__grid">
+                        {settings.travellers.mainBookerFormFields.map((field, fIndex) => (
+                          <div key={fIndex} className={`control control--${field.type}`}>
+                            {getControl(field.type, {} as Traveler, field.type)}
+                          </div>
+                        ))}
+                      </div>
+                    </>
+                  ) : (
+                    <>
+                      <div className="form__twocolumn">
+                        <div className="form__twocolumn-column">
+                          <div className="form__row">
+                            <LabeledInput
+                              hasError={hasVisibleError('street')}
+                              extraClassName="form__group--50 form__group--sm-60"
+                              label={translations.TRAVELERS_FORM.STREET}
+                              required
+                              name="street"
+                              onChange={formik.handleChange}
+                              onBlur={formik.handleBlur}
+                              value={formik.values.street}
+                            />
+                            <LabeledInput
+                              hasError={hasVisibleError('houseNumber')}
+                              extraClassName="form__group--30 form__group--sm-20"
+                              label={translations.TRAVELERS_FORM.HOUSE_NUMBER}
+                              required
+                              name="houseNumber"
+                              onChange={formik.handleChange}
+                              onBlur={formik.handleBlur}
+                              value={formik.values.houseNumber}
+                            />
+                            <LabeledInput
+                              hasError={hasVisibleError('box')}
+                              extraClassName="form__group--20"
+                              label={translations.TRAVELERS_FORM.POST_BOX}
+                              name="box"
+                              onChange={formik.handleChange}
+                              onBlur={formik.handleBlur}
+                              value={formik.values.box}
+                            />
+                          </div>
+                        </div>
+                        <div className="form__twocolumn-column">
+                          <div className="form__row">
+                            <LabeledInput
+                              hasError={hasVisibleError('zipCode')}
+                              extraClassName="form__group--40 form__group--sm-20"
+                              label={translations.TRAVELERS_FORM.ZIPCODE}
+                              required
+                              name="zipCode"
+                              onChange={formik.handleChange}
+                              onBlur={formik.handleBlur}
+                              value={formik.values.zipCode}
+                            />
+                            <LabeledInput
+                              hasError={hasVisibleError('place')}
+                              extraClassName="form__group--60 form__group--sm-40"
+                              label={translations.TRAVELERS_FORM.CITY}
+                              required
+                              name="place"
+                              onChange={formik.handleChange}
+                              onBlur={formik.handleBlur}
+                              value={formik.values.place}
+                            />
+                            <LabeledSelect
+                              hasError={hasVisibleError('country')}
+                              extraClassName="form__group--sm-40"
+                              label={translations.TRAVELERS_FORM.COUNTRY}
+                              required
+                              name="country"
+                              onChange={formik.handleChange}
+                              onBlur={formik.handleBlur}
+                              value={formik.values.country}
+                              options={[
+                                {
+                                  key: 'empty',
+                                  value: undefined,
+                                  label: translations.TRAVELERS_FORM.SELECT_COUNTRY
+                                },
+                                ...(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>
+                        </div>
+                      </div>
+                      <div className="form__row">
+                        <LabeledInput
+                          hasError={hasVisibleError('phone')}
+                          extraClassName="form__group--md-33"
+                          label={translations.TRAVELERS_FORM.PHONE}
+                          required
+                          name="phone"
+                          onChange={formik.handleChange}
+                          onBlur={formik.handleBlur}
+                          value={formik.values.phone}
+                        />
+                        <LabeledInput
+                          type="email"
+                          hasError={hasVisibleError('email')}
+                          extraClassName="form__group--md-33"
+                          label={translations.TRAVELERS_FORM.EMAIL}
+                          required
+                          name="email"
+                          onChange={formik.handleChange}
+                          onBlur={formik.handleBlur}
+                          value={formik.values.email}
+                        />
+                        <LabeledInput
+                          type="email"
+                          hasError={hasVisibleError('emailConfirmation')}
+                          extraClassName="form__group--md-33"
+                          label={translations.TRAVELERS_FORM.REPEAT_EMAIL}
+                          required
+                          name="emailConfirmation"
+                          onChange={formik.handleChange}
+                          onBlur={formik.handleBlur}
+                          value={formik.values.emailConfirmation}
+                        />
+                      </div>
+                    </>
+                  )}
+                </>
+              </div>
+            ) : (
+              <div className="form__region">
+                <div className="form__row">
+                  <LabeledInput
+                    hasError={hasVisibleError('phone')}
+                    extraClassName="form__group--md-33"
+                    label={translations.TRAVELERS_FORM.PHONE}
+                    required
+                    name="phone"
+                    onChange={formik.handleChange}
+                    onBlur={formik.handleBlur}
+                    value={formik.values.phone}
+                  />
+                </div>
+              </div>
+            )}
+
+            {showAgentSelection && (
+              <div className="form__region">
+                <div className="form__region-header">
+                  <h5 className="form__region-heading">{translations.TRAVELERS_FORM.BOOK_WITH_AGENT}</h5>
+                  <div className="checkbox" id="cbxChooseOffice">
+                    <label className="checkbox__label">
+                      <input
+                        type="checkbox"
+                        name="booking--mainbooker"
+                        defaultChecked={showAgents}
+                        onClick={() => toggleAgent(!showAgents)}
+                        className="checkbox__input"
+                      />
+                      {translations.TRAVELERS_FORM.CHOOSE_OFFICE}
+                    </label>
+                  </div>
+                </div>
+                {showAgents && (
+                  <div className="form__row form__row--choose-office">
+                    <div className={buildClassName(['form__group', 'form__group--icon', hasVisibleError('travelAgentId') && 'form__group--error'])}>
+                      <TypeAheadInput
+                        value={formik.values.travelAgentName}
+                        options={filteredAgents}
+                        onChange={handleAgentChange}
+                        onSelect={handleAgentSelect}
+                        onClear={handleAgentClear}
+                        name="travelAgentName"
+                        placeholder={translations.TRAVELERS_FORM.CHOOSE_AGENT_PLACEHOLDER}
+                      />
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+          {errorKeys.length > 0 && (
+            <div className="form__region form__region--errors">
+              <div className="form__row">
+                <div className="form__group">
+                  <p className="form__error-heading">{translations.TRAVELERS_FORM.VALIDATION_MESSAGE}:</p>
+                  <ul className="list">
+                    {errorKeys.map((key) => (
+                      <li key={key}>{get(flatErrors, key)}</li>
+                    ))}
+                  </ul>
+                </div>
+              </div>
+            </div>
+          )}
+        </>
+      )}
+      {travelersFirstStep && (
+        <div className="booking__navigator">
+          <button type="button" className="cta cta--select" onClick={handleAddRoom}>
+            {translations.TRAVELERS_FORM.ADD_ROOM}
+          </button>
+        </div>
+      )}
+
+      <div className="booking__navigator">
+        {!travelersFirstStep && settings.skipRouter ? (
+          <button type="button" title={translations.STEPS.PREVIOUS} onClick={() => goPrevious()} className="cta cta--secondary">
+            {translations.STEPS.PREVIOUS}
+          </button>
+        ) : !travelersFirstStep ? (
+          <Link
+            to={`${!settings.skipBasePathInRouting ? settings.basePath : ''}${settings.options.pathSuffix}?${bookingQueryString}`}
+            title={translations.STEPS.PREVIOUS}
+            className="cta cta--secondary">
+            {translations.STEPS.PREVIOUS}
+          </Link>
+        ) : null}
+        <button type="submit" title={translations.STEPS.NEXT} className={'cta' + (isUnavailable ? ' cta--disabled' : '')}>
+          {translations.STEPS.NEXT}
+        </button>
+      </div>
+    </form>
+  );
+};
+
+export default TravelersForm;