@qite/tide-booking-component 1.4.109 → 1.4.111

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

@@ -1,100 +1,37 @@
-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 { Link, useNavigate } from 'react-router-dom';
+import produce from 'immer';
+import { useFormik } from 'formik';
+import SettingsContext from '../../settings-context';
+import { useAppDispatch } from '../../store';
+import { TravelersFormValues } from '../../types';
+import { fetchPackage, setBookingType, setCurrentStep, setHasMounted, setIsFetching } from '../booking/booking-slice';
+import { FLIGHT_OPTIONS_FORM_STEP, OPTIONS_FORM_STEP, SUMMARY_STEP } from '../booking/constants';
 import {
+  selectAgentAdressId,
+  selectAgents,
   selectBookingAttributes,
+  selectBookingQueryString,
+  selectBookingType,
   selectCountries,
   selectHasMounted,
   selectIsFetching,
   selectIsUnavailable,
+  selectStartDate,
+  selectTranslations,
   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 { selectFormRooms, selectTravelersFormValues, setFormValues } from './travelers-form-slice';
 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 };
+import SharedTravelersForm, { createInitialValuesFromRooms } from '../../../shared/booking/travelers-form';
 
-  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 TravelersForm: React.FC = () => {
   const dispatch = useAppDispatch();
   const settings = useContext(SettingsContext);
   const navigate = settings.skipRouter ? () => {} : useNavigate();
+
   const bookingQueryString = useSelector(selectBookingQueryString);
   const startDate = useSelector(selectStartDate);
   const formRooms = useSelector(selectFormRooms);
@@ -111,71 +48,45 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
 
   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);
+    useSelector(selectTravelersFormValues) ??
+    createInitialValuesFromRooms(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) =>
+  const formik = useFormik<TravelersFormValues>({
+    initialValues,
+    validate: useCompactForm
+      ? () => {}
+      : (values) =>
           validateForm(values, settings.agentRequired, bookingType, translations, settings.travellers.formFields, settings.travellers.mainBookerFormFields),
-        onSubmit: (values) => {
-          dispatch(setFormValues(values));
-          dispatch(fetchPackage());
+    onSubmit: (values) => {
+      dispatch(setFormValues(values));
+
+      if (useCompactForm) {
+        dispatch(fetchPriceDetails());
+        if (settings.skipRouter) dispatch(setCurrentStep(SUMMARY_STEP));
+        else navigate(`${!settings.skipBasePathInRouting ? settings.basePath : ''}${settings.summary.pathSuffix}?${bookingQueryString}`);
+        return;
+      }
 
-          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}`);
-            }
-          }
-        }
-      });
+      dispatch(fetchPackage());
+      if (settings.skipRouter) dispatch(setCurrentStep(travelersFirstStep ? FLIGHT_OPTIONS_FORM_STEP : SUMMARY_STEP));
+      else
+        navigate(
+          `${!settings.skipBasePathInRouting ? settings.basePath : ''}${
+            travelersFirstStep ? settings.flightOptions.pathSuffix : settings.summary.pathSuffix
+          }?${bookingQueryString}`
+        );
+    }
+  });
 
   useEffect(() => {
     dispatch(fetchPriceDetails());
-  }, []);
+  }, [dispatch]);
 
   useEffect(() => {
     if (!bookingAttributes?.rooms?.length || isFetching) return;
-
     if (!hasMounted) {
       dispatch(setHasMounted(true));
       return;
@@ -183,7 +94,6 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
 
     const fetchAll = async () => {
       dispatch(setIsFetching(true));
-
       try {
         await dispatch(fetchPackage());
         await dispatch(fetchPriceDetails());
@@ -193,893 +103,60 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
     };
 
     fetchAll();
-  }, [bookingAttributes?.rooms]);
+  }, [bookingAttributes?.rooms, dispatch, hasMounted, isFetching]);
 
-  // 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(',') : '';
+        const childAges = room.children?.length ? room.children.map((child) => child.age).join(',') : '';
         return `adults:${adults},childAges:(${childAges})`;
       })
-      .map((s) => `(${s})`)
+      .map((room) => `(${room})`)
       .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 ?? ''
-    });
+    const nextQuery = `${params.toString()}${params.toString() ? '&' : ''}rooms=(${roomsString})`;
+    navigate(`${window.location.pathname}?${nextQuery}`, { replace: true });
+  }, [formik.values.rooms, bookingQueryString, navigate, settings.skipRouter, travelersFirstStep]);
 
-    let bookingType = 'b2b2c';
-    if (agentAdressId && agentAdressId != 0) {
-      bookingType = 'b2b';
-    }
-    dispatch(setBookingType(bookingType));
-  };
+  useEffect(() => {
+    if (!agents || !settings.affiliateSlug) return;
+    const agent = agents.find((x) => x.affiliateSlug && x.affiliateSlug === settings.affiliateSlug);
+    if (!agent) return;
 
-  const handleAgentClear = () => {
-    formik.setValues({
-      ...formik.values,
-      travelAgentId: 0,
-      travelAgentName: ''
+    const formValues = produce(formik.values, (values) => {
+      values.travelAgentId = Number(agent.id);
+      values.travelAgentName = agent.name;
     });
 
-    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}
-            />
-          </>
-        );
-      }
-    }
-  };
+    formik.setValues(formValues, false);
+    dispatch(setFormValues(formValues));
+    setShowAgentSelection(false);
+  }, [agents, settings.affiliateSlug]);
 
   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">
+    <SharedTravelersForm
+      formik={formik}
+      translations={translations}
+      travellersSettings={settings.travellers}
+      countries={countries}
+      agents={agents}
+      bookingType={bookingType}
+      agentAdressId={agentAdressId}
+      travelersFirstStep={travelersFirstStep}
+      isUnavailable={isUnavailable}
+      useCompactForm={useCompactForm}
+      showAllCountries={showAllCountries}
+      showAgentSelection={showAgentSelection}
+      initialShowAgents={settings.agentRequired ?? false}
+      onBookingTypeChange={(nextBookingType) => dispatch(setBookingType(nextBookingType))}
+      renderPreviousButton={() =>
+        !travelersFirstStep && settings.skipRouter ? (
+          <button type="button" title={translations.STEPS.PREVIOUS} onClick={() => dispatch(setCurrentStep(OPTIONS_FORM_STEP))} className="cta cta--secondary">
             {translations.STEPS.PREVIOUS}
           </button>
         ) : !travelersFirstStep ? (
@@ -1089,12 +166,9 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
             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>
+        ) : null
+      }
+    />
   );
 };