@qite/tide-booking-component 0.0.2-preview.58 → 0.0.2-preview.60

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

@@ -1,650 +1,659 @@
-import React, { useContext, useEffect, useState } from "react";
-import { compact, get, sortBy } from "lodash";
-import {
-  selectAdultIds,
-  selectChildIds,
-  selectTravelersFormValues,
-  setFormValues,
-} from "./travelers-form-slice";
-import { useSelector } from "react-redux";
-
-import LabeledInput from "../../components/labeled-input";
-import LabeledSelect from "../../components/labeled-select";
-import SettingsContext from "../../settings-context";
-import { TravelersFormValues } from "../../types";
-import { buildClassName } from "../../utils/class-util";
-import { fetchPriceDetails } from "../price-details/price-details-slice";
-import flat from "flat";
-import { navigate } from "@reach/router";
-import produce from "immer";
-import {
-  selectAgents,
-  selectBookingQueryString,
-  selectStartDate,
-} from "../booking/selectors";
-import translations from "../../translations/translations.json";
-import { useFormik } from "formik";
-import validateForm from "./validate-form";
-import { format, parse } from "date-fns";
-import { useAppDispatch } from "../../store";
-import TypeAheadInput from "./type-ahead-input";
-
-interface TravelersFormProps {}
-
-function createTraveler(id: number) {
-  return { id, firstName: "", lastName: "", birthDate: "", gender: "" };
-}
-
-function createInitialValues(
-  adultIds: number[],
-  childIds: number[],
-  startDate?: string
-) {
-  const initialValues = {
-    startDate: startDate,
-    adults: adultIds.map((id) => createTraveler(id)),
-    children: childIds.map((id) => createTraveler(id)),
-    mainBookerId: -1,
-    street: "",
-    houseNumber: "",
-    box: "",
-    zipCode: "",
-    place: "",
-    country: "",
-    phone: "",
-    email: "",
-    emailConfirmation: "",
-    travelAgentId: 0,
-    travelAgentName: "",
-  };
-
-  if (initialValues.adults && initialValues.adults.length) {
-    initialValues.mainBookerId = initialValues.adults[0].id;
-  }
-
-  return initialValues;
-}
-
-const TravelersForm: React.FC<TravelersFormProps> = () => {
-  const dispatch = useAppDispatch();
-
-  const settings = useContext(SettingsContext);
-  const bookingQueryString = useSelector(selectBookingQueryString);
-  const startDate = useSelector(selectStartDate);
-  const adultIds = useSelector(selectAdultIds);
-  const childIds = useSelector(selectChildIds);
-  const agents = useSelector(selectAgents);
-
-  const initialValues =
-    useSelector(selectTravelersFormValues) ??
-    createInitialValues(adultIds, childIds, startDate);
-
-  const [showAgents, setShowAgents] = useState<boolean>(
-    initialValues.travelAgentId > 0
-  );
-
-  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 = useFormik<TravelersFormValues>({
-    initialValues,
-    validate: validateForm,
-    onSubmit: (values) => {
-      dispatch(setFormValues(values));
-      dispatch(fetchPriceDetails());
-
-      navigate(
-        `${settings.basePath}${settings.options.pathSuffix}?${bookingQueryString}`
-      );
-    },
-  });
-
-  useEffect(() => {
-    const formValues = produce(formik.values, (values) => {
-      values.adults = adultIds.map(
-        (id) => values.adults[id] ?? createTraveler(id)
-      );
-
-      if (
-        values.adults.findIndex(
-          (traveler) => traveler.id === values.mainBookerId
-        ) === -1 &&
-        values.adults.length
-      ) {
-        values.mainBookerId = values.adults[0].id;
-      }
-    });
-
-    formik.setValues(formValues, false);
-    dispatch(setFormValues(formValues));
-  }, [adultIds]);
-
-  useEffect(() => {
-    const formValues = produce(formik.values, (values) => {
-      values.children = childIds.map(
-        (id) => values.children[id] ?? createTraveler(id)
-      );
-    });
-    formik.setValues(formValues, false);
-    dispatch(setFormValues(formValues));
-  }, [childIds]);
-
-  useEffect(() => {
-    dispatch(fetchPriceDetails());
-  }, []);
-
-  const handleMainBookerChange: React.FormEventHandler<HTMLInputElement> = (
-    e
-  ) => {
-    const id = parseInt(e.currentTarget.value);
-
-    formik.setFieldValue("mainBookerId", id);
-  };
-
-  const mainBooker = formik.values.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.setFieldValue("travelAgentId", Number(agent?.key));
-    formik.setFieldValue("travelAgentName", agent?.value);
-  };
-
-  const handleAgentClear = () => {
-    formik.setFieldValue("travelAgentId", 0);
-    formik.setFieldValue("travelAgentName", "");
-  };
-
-  const toggleAgent = (value: boolean) => {
-    setShowAgents(value);
-
-    if (!value) {
-      handleAgentClear();
-      setFilteredAgents([]);
-    }
-  };
-
-  const flatErrors: Record<string, string> = flat(formik.errors);
-  const hasVisibleError = (key: string) =>
-    get(formik.errors, key) && get(formik.touched, key);
-
-  return (
-    <form
-      className="form"
-      noValidate
-      onSubmit={formik.handleSubmit}
-      onReset={formik.handleReset}
-    >
-      <div className="form__region">
-        <div className="form__region-header">
-          <h5 className="form__region-heading">
-            {translations.TRAVELERS_FORM.PERSONS}
-          </h5>
-          <p className="form__region-label">
-            {compact([
-              adultIds.length,
-              adultIds.length === 1 && ` ${translations.TRAVELERS_FORM.ADULT}`,
-              adultIds.length > 1 && ` ${translations.TRAVELERS_FORM.ADULTS}`,
-              adultIds &&
-                adultIds.length &&
-                childIds &&
-                childIds.length &&
-                ", ",
-              childIds.length,
-              childIds.length === 1 && ` ${translations.TRAVELERS_FORM.CHILD}`,
-              childIds.length > 1 && ` ${translations.TRAVELERS_FORM.CHILDREN}`,
-            ]).join("")}
-          </p>
-        </div>
-      </div>
-      {formik.values.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">
-            <div
-              className={buildClassName([
-                "form__group",
-                hasVisibleError(`adults[${index}].gender`) &&
-                  "form__group--error",
-              ])}
-            >
-              <label className="form__label">
-                {translations.TRAVELERS_FORM.GENDER} *
-              </label>
-              <div className="radiobutton-group">
-                <div className="radiobutton">
-                  <label className="radiobutton__label">
-                    <input
-                      type="radio"
-                      className="radiobutton__input"
-                      name={`adults[${index}].gender`}
-                      onChange={formik.handleChange}
-                      onBlur={formik.handleBlur}
-                      value="m"
-                      checked={travelerValues.gender === "m"}
-                    />
-                    {translations.TRAVELERS_FORM.MALE}
-                  </label>
-                </div>
-
-                <div className="radiobutton">
-                  <label className="radiobutton__label">
-                    <input
-                      type="radio"
-                      className="radiobutton__input"
-                      name={`adults[${index}].gender`}
-                      onChange={formik.handleChange}
-                      onBlur={formik.handleBlur}
-                      value="f"
-                      checked={travelerValues.gender === "f"}
-                    />
-                    {translations.TRAVELERS_FORM.FEMALE}
-                  </label>
-                </div>
-
-                <div className="radiobutton">
-                  <label className="radiobutton__label">
-                    <input
-                      type="radio"
-                      className="radiobutton__input"
-                      name={`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(`adults[${index}].firstName`)}
-              extraClassName="form__group--md-33"
-              label={translations.TRAVELERS_FORM.FIRST_NAME}
-              required
-              name={`adults[${index}].firstName`}
-              onChange={formik.handleChange}
-              onBlur={formik.handleBlur}
-              value={travelerValues.firstName}
-            />
-            <LabeledInput
-              hasError={hasVisibleError(`adults[${index}].lastName`)}
-              extraClassName="form__group--md-33"
-              label={translations.TRAVELERS_FORM.LAST_NAME}
-              required
-              name={`adults[${index}].lastName`}
-              onChange={formik.handleChange}
-              onBlur={formik.handleBlur}
-              value={travelerValues.lastName}
-            />
-            <LabeledInput
-              type="date"
-              hasError={hasVisibleError(`adults[${index}].birthDate`)}
-              extraClassName="form__group--md-33"
-              label={translations.TRAVELERS_FORM.BIRTHDATE}
-              required
-              name={`adults[${index}].birthDate`}
-              onChange={formik.handleChange}
-              onBlur={formik.handleBlur}
-              value={travelerValues.birthDate}
-            />
-          </div>
-        </div>
-      ))}
-      {formik.values.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}{" "}
-              {formik.values.adults.length + index + 1}
-            </h5>
-            <p className="form__region-label">
-              {translations.TRAVELERS_FORM.CHILD}
-            </p>
-          </div>
-          <div className="form__row">
-            <div
-              className={buildClassName([
-                "form__group",
-                hasVisibleError(`children[${index}].gender`) &&
-                  "form__group--error",
-              ])}
-            >
-              <label className="form__label">
-                {translations.TRAVELERS_FORM.GENDER} *
-              </label>
-              <div className="radiobutton-group">
-                <div className="radiobutton">
-                  <label className="radiobutton__label">
-                    <input
-                      type="radio"
-                      className="radiobutton__input"
-                      name={`children[${index}].gender`}
-                      onChange={formik.handleChange}
-                      onBlur={formik.handleBlur}
-                      value="m"
-                      checked={travelerValues.gender === "m"}
-                    />
-                    {translations.TRAVELERS_FORM.MALE}
-                  </label>
-                </div>
-
-                <div className="radiobutton">
-                  <label className="radiobutton__label">
-                    <input
-                      type="radio"
-                      className="radiobutton__input"
-                      name={`children[${index}].gender`}
-                      onChange={formik.handleChange}
-                      onBlur={formik.handleBlur}
-                      value="f"
-                      checked={travelerValues.gender === "f"}
-                    />
-                    {translations.TRAVELERS_FORM.FEMALE}
-                  </label>
-                </div>
-
-                <div className="radiobutton">
-                  <label className="radiobutton__label">
-                    <input
-                      type="radio"
-                      className="radiobutton__input"
-                      name={`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(`children[${index}].firstName`)}
-              extraClassName="form__group--md-33"
-              label={translations.TRAVELERS_FORM.FIRST_NAME}
-              required
-              name={`children[${index}].firstName`}
-              onChange={formik.handleChange}
-              onBlur={formik.handleBlur}
-              value={travelerValues.firstName}
-            />
-            <LabeledInput
-              hasError={hasVisibleError(`children[${index}].lastName`)}
-              extraClassName="form__group--md-33"
-              label={translations.TRAVELERS_FORM.LAST_NAME}
-              required
-              name={`children[${index}].lastName`}
-              onChange={formik.handleChange}
-              onBlur={formik.handleBlur}
-              value={travelerValues.lastName}
-            />
-            <LabeledInput
-              type="date"
-              hasError={hasVisibleError(`children[${index}].birthDate`)}
-              extraClassName="form__group--md-33"
-              label={translations.TRAVELERS_FORM.BIRTHDATE}
-              required
-              name={`children[${index}].birthDate`}
-              onChange={formik.handleChange}
-              onBlur={formik.handleBlur}
-              value={travelerValues.birthDate}
-            />
-          </div>
-        </div>
-      ))}
-      <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>
-
-        <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}
-                placeholder={translations.TRAVELERS_FORM.STREET_PLACEHOLDER}
-                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"
-                placeholder={translations.TRAVELERS_FORM.CITY_PLACEHOLDER}
-                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",
-                    label: translations.TRAVELERS_FORM.SELECT_COUNTRY,
-                    value: undefined,
-                  },
-                  {
-                    key: "be",
-                    value: "be",
-                    label: "België",
-                  },
-                  {
-                    key: "nl",
-                    value: "nl",
-                    label: "Nederland",
-                  },
-                  {
-                    key: "fr",
-                    value: "fr",
-                    label: "Frankrijk",
-                  },
-                ]}
-              />
-            </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__region-header">
-          <h5 className="form__region-heading">
-            Ik wens te boeken bij mijn lokale reisagent
-          </h5>
-          <div className="checkbox" id="cbxChooseOffice">
-            <label className="checkbox__label">
-              <input
-                type="checkbox"
-                name="booking--mainbooker"
-                defaultChecked={showAgents}
-                onClick={() => toggleAgent(!showAgents)}
-                className="checkbox__input"
-              />
-              Ik kies een kantoor
-            </label>
-          </div>
-        </div>
-        {showAgents && (
-          <div className="form__row form__row--choose-office">
-            <div className="form__group form__group--icon">
-              <TypeAheadInput
-                value={formik.values.travelAgentName}
-                options={filteredAgents}
-                onChange={handleAgentChange}
-                onSelect={handleAgentSelect}
-                onClear={handleAgentClear}
-                name="travelAgentName"
-                placeholder="Kies uw reisagent"
-              />
-            </div>
-          </div>
-        )}
-      </div>
-      {Object.keys(flatErrors).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">
-                {Object.keys(flatErrors).map((key) => (
-                  <li key={key}>{get(flatErrors, key)}</li>
-                ))}
-              </ul>
-            </div>
-          </div>
-        </div>
-      )}
-      <div className="booking__navigator">
-        <button type="submit" title={translations.STEPS.NEXT} className="cta">
-          {translations.STEPS.NEXT}
-        </button>
-      </div>
-    </form>
-  );
-};
-
-export default TravelersForm;
+import React, { useContext, useEffect, useState } from "react";
+import { compact, get, sortBy } from "lodash";
+import {
+  selectAdultIds,
+  selectChildIds,
+  selectTravelersFormValues,
+  setFormValues,
+} from "./travelers-form-slice";
+import { useSelector } from "react-redux";
+
+import LabeledInput from "../../components/labeled-input";
+import LabeledSelect from "../../components/labeled-select";
+import SettingsContext from "../../settings-context";
+import { TravelersFormValues } from "../../types";
+import { buildClassName } from "../../utils/class-util";
+import { fetchPriceDetails } from "../price-details/price-details-slice";
+import flat from "flat";
+import { navigate } from "@reach/router";
+import produce from "immer";
+import {
+  selectAgentAdressId,
+  selectAgents,
+  selectBookingQueryString,
+  selectStartDate,
+} from "../booking/selectors";
+import translations from "../../translations/translations.json";
+import { useFormik } from "formik";
+import validateForm from "./validate-form";
+import { format, parse } from "date-fns";
+import { useAppDispatch } from "../../store";
+import TypeAheadInput from "./type-ahead-input";
+
+interface TravelersFormProps {}
+
+function createTraveler(id: number) {
+  return { id, firstName: "", lastName: "", birthDate: "", gender: "" };
+}
+
+function createInitialValues(
+  adultIds: number[],
+  childIds: number[],
+  startDate?: string
+) {
+  const initialValues = {
+    startDate: startDate,
+    adults: adultIds.map((id) => createTraveler(id)),
+    children: childIds.map((id) => createTraveler(id)),
+    mainBookerId: -1,
+    street: "",
+    houseNumber: "",
+    box: "",
+    zipCode: "",
+    place: "",
+    country: "",
+    phone: "",
+    email: "",
+    emailConfirmation: "",
+    travelAgentId: 0,
+    travelAgentName: "",
+  };
+
+  if (initialValues.adults && initialValues.adults.length) {
+    initialValues.mainBookerId = initialValues.adults[0].id;
+  }
+
+  return initialValues;
+}
+
+const TravelersForm: React.FC<TravelersFormProps> = () => {
+  const dispatch = useAppDispatch();
+
+  const settings = useContext(SettingsContext);
+  const bookingQueryString = useSelector(selectBookingQueryString);
+  const startDate = useSelector(selectStartDate);
+  const adultIds = useSelector(selectAdultIds);
+  const childIds = useSelector(selectChildIds);
+  const agents = useSelector(selectAgents);
+  const agentAdressId = useSelector(selectAgentAdressId);
+
+  console.log("agentAdressId", agentAdressId);
+  useEffect(() => {
+    if (agentAdressId) {
+      formik.setFieldValue("travelAgentId", agentAdressId);
+    }
+  }, [agentAdressId]);
+
+  const initialValues =
+    useSelector(selectTravelersFormValues) ??
+    createInitialValues(adultIds, childIds, startDate);
+
+  const [showAgents, setShowAgents] = useState<boolean>(
+    initialValues.travelAgentId > 0 || agentAdressId != undefined
+  );
+
+  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 = useFormik<TravelersFormValues>({
+    initialValues,
+    validate: validateForm,
+    onSubmit: (values) => {
+      dispatch(setFormValues(values));
+      dispatch(fetchPriceDetails());
+
+      navigate(
+        `${settings.basePath}${settings.options.pathSuffix}?${bookingQueryString}`
+      );
+    },
+  });
+
+  useEffect(() => {
+    const formValues = produce(formik.values, (values) => {
+      values.adults = adultIds.map(
+        (id) => values.adults[id] ?? createTraveler(id)
+      );
+
+      if (
+        values.adults.findIndex(
+          (traveler) => traveler.id === values.mainBookerId
+        ) === -1 &&
+        values.adults.length
+      ) {
+        values.mainBookerId = values.adults[0].id;
+      }
+    });
+
+    formik.setValues(formValues, false);
+    dispatch(setFormValues(formValues));
+  }, [adultIds]);
+
+  useEffect(() => {
+    const formValues = produce(formik.values, (values) => {
+      values.children = childIds.map(
+        (id) => values.children[id] ?? createTraveler(id)
+      );
+    });
+    formik.setValues(formValues, false);
+    dispatch(setFormValues(formValues));
+  }, [childIds]);
+
+  useEffect(() => {
+    dispatch(fetchPriceDetails());
+  }, []);
+
+  const handleMainBookerChange: React.FormEventHandler<HTMLInputElement> = (
+    e
+  ) => {
+    const id = parseInt(e.currentTarget.value);
+
+    formik.setFieldValue("mainBookerId", id);
+  };
+
+  const mainBooker = formik.values.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.setFieldValue("travelAgentId", Number(agent?.key));
+    formik.setFieldValue("travelAgentName", agent?.value);
+  };
+
+  const handleAgentClear = () => {
+    formik.setFieldValue("travelAgentId", 0);
+    formik.setFieldValue("travelAgentName", "");
+  };
+
+  const toggleAgent = (value: boolean) => {
+    setShowAgents(value);
+
+    if (!value) {
+      handleAgentClear();
+      setFilteredAgents([]);
+    }
+  };
+
+  const flatErrors: Record<string, string> = flat(formik.errors);
+  const hasVisibleError = (key: string) =>
+    get(formik.errors, key) && get(formik.touched, key);
+
+  return (
+    <form
+      className="form"
+      noValidate
+      onSubmit={formik.handleSubmit}
+      onReset={formik.handleReset}
+    >
+      <div className="form__region">
+        <div className="form__region-header">
+          <h5 className="form__region-heading">
+            {translations.TRAVELERS_FORM.PERSONS}
+          </h5>
+          <p className="form__region-label">
+            {compact([
+              adultIds.length,
+              adultIds.length === 1 && ` ${translations.TRAVELERS_FORM.ADULT}`,
+              adultIds.length > 1 && ` ${translations.TRAVELERS_FORM.ADULTS}`,
+              adultIds &&
+                adultIds.length &&
+                childIds &&
+                childIds.length &&
+                ", ",
+              childIds.length,
+              childIds.length === 1 && ` ${translations.TRAVELERS_FORM.CHILD}`,
+              childIds.length > 1 && ` ${translations.TRAVELERS_FORM.CHILDREN}`,
+            ]).join("")}
+          </p>
+        </div>
+      </div>
+      {formik.values.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">
+            <div
+              className={buildClassName([
+                "form__group",
+                hasVisibleError(`adults[${index}].gender`) &&
+                  "form__group--error",
+              ])}
+            >
+              <label className="form__label">
+                {translations.TRAVELERS_FORM.GENDER} *
+              </label>
+              <div className="radiobutton-group">
+                <div className="radiobutton">
+                  <label className="radiobutton__label">
+                    <input
+                      type="radio"
+                      className="radiobutton__input"
+                      name={`adults[${index}].gender`}
+                      onChange={formik.handleChange}
+                      onBlur={formik.handleBlur}
+                      value="m"
+                      checked={travelerValues.gender === "m"}
+                    />
+                    {translations.TRAVELERS_FORM.MALE}
+                  </label>
+                </div>
+
+                <div className="radiobutton">
+                  <label className="radiobutton__label">
+                    <input
+                      type="radio"
+                      className="radiobutton__input"
+                      name={`adults[${index}].gender`}
+                      onChange={formik.handleChange}
+                      onBlur={formik.handleBlur}
+                      value="f"
+                      checked={travelerValues.gender === "f"}
+                    />
+                    {translations.TRAVELERS_FORM.FEMALE}
+                  </label>
+                </div>
+
+                <div className="radiobutton">
+                  <label className="radiobutton__label">
+                    <input
+                      type="radio"
+                      className="radiobutton__input"
+                      name={`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(`adults[${index}].firstName`)}
+              extraClassName="form__group--md-33"
+              label={translations.TRAVELERS_FORM.FIRST_NAME}
+              required
+              name={`adults[${index}].firstName`}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              value={travelerValues.firstName}
+            />
+            <LabeledInput
+              hasError={hasVisibleError(`adults[${index}].lastName`)}
+              extraClassName="form__group--md-33"
+              label={translations.TRAVELERS_FORM.LAST_NAME}
+              required
+              name={`adults[${index}].lastName`}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              value={travelerValues.lastName}
+            />
+            <LabeledInput
+              type="date"
+              hasError={hasVisibleError(`adults[${index}].birthDate`)}
+              extraClassName="form__group--md-33"
+              label={translations.TRAVELERS_FORM.BIRTHDATE}
+              required
+              name={`adults[${index}].birthDate`}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              value={travelerValues.birthDate}
+            />
+          </div>
+        </div>
+      ))}
+      {formik.values.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}{" "}
+              {formik.values.adults.length + index + 1}
+            </h5>
+            <p className="form__region-label">
+              {translations.TRAVELERS_FORM.CHILD}
+            </p>
+          </div>
+          <div className="form__row">
+            <div
+              className={buildClassName([
+                "form__group",
+                hasVisibleError(`children[${index}].gender`) &&
+                  "form__group--error",
+              ])}
+            >
+              <label className="form__label">
+                {translations.TRAVELERS_FORM.GENDER} *
+              </label>
+              <div className="radiobutton-group">
+                <div className="radiobutton">
+                  <label className="radiobutton__label">
+                    <input
+                      type="radio"
+                      className="radiobutton__input"
+                      name={`children[${index}].gender`}
+                      onChange={formik.handleChange}
+                      onBlur={formik.handleBlur}
+                      value="m"
+                      checked={travelerValues.gender === "m"}
+                    />
+                    {translations.TRAVELERS_FORM.MALE}
+                  </label>
+                </div>
+
+                <div className="radiobutton">
+                  <label className="radiobutton__label">
+                    <input
+                      type="radio"
+                      className="radiobutton__input"
+                      name={`children[${index}].gender`}
+                      onChange={formik.handleChange}
+                      onBlur={formik.handleBlur}
+                      value="f"
+                      checked={travelerValues.gender === "f"}
+                    />
+                    {translations.TRAVELERS_FORM.FEMALE}
+                  </label>
+                </div>
+
+                <div className="radiobutton">
+                  <label className="radiobutton__label">
+                    <input
+                      type="radio"
+                      className="radiobutton__input"
+                      name={`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(`children[${index}].firstName`)}
+              extraClassName="form__group--md-33"
+              label={translations.TRAVELERS_FORM.FIRST_NAME}
+              required
+              name={`children[${index}].firstName`}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              value={travelerValues.firstName}
+            />
+            <LabeledInput
+              hasError={hasVisibleError(`children[${index}].lastName`)}
+              extraClassName="form__group--md-33"
+              label={translations.TRAVELERS_FORM.LAST_NAME}
+              required
+              name={`children[${index}].lastName`}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              value={travelerValues.lastName}
+            />
+            <LabeledInput
+              type="date"
+              hasError={hasVisibleError(`children[${index}].birthDate`)}
+              extraClassName="form__group--md-33"
+              label={translations.TRAVELERS_FORM.BIRTHDATE}
+              required
+              name={`children[${index}].birthDate`}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              value={travelerValues.birthDate}
+            />
+          </div>
+        </div>
+      ))}
+      <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>
+
+        <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}
+                placeholder={translations.TRAVELERS_FORM.STREET_PLACEHOLDER}
+                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"
+                placeholder={translations.TRAVELERS_FORM.CITY_PLACEHOLDER}
+                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",
+                    label: translations.TRAVELERS_FORM.SELECT_COUNTRY,
+                    value: undefined,
+                  },
+                  {
+                    key: "be",
+                    value: "be",
+                    label: "België",
+                  },
+                  {
+                    key: "nl",
+                    value: "nl",
+                    label: "Nederland",
+                  },
+                  {
+                    key: "fr",
+                    value: "fr",
+                    label: "Frankrijk",
+                  },
+                ]}
+              />
+            </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__region-header">
+          <h5 className="form__region-heading">
+            Ik wens te boeken bij mijn lokale reisagent
+          </h5>
+          <div className="checkbox" id="cbxChooseOffice">
+            <label className="checkbox__label">
+              <input
+                type="checkbox"
+                name="booking--mainbooker"
+                defaultChecked={showAgents}
+                onClick={() => toggleAgent(!showAgents)}
+                className="checkbox__input"
+              />
+              Ik kies een kantoor
+            </label>
+          </div>
+        </div>
+        {showAgents && (
+          <div className="form__row form__row--choose-office">
+            <div className="form__group form__group--icon">
+              <TypeAheadInput
+                value={formik.values.travelAgentName}
+                options={filteredAgents}
+                onChange={handleAgentChange}
+                onSelect={handleAgentSelect}
+                onClear={handleAgentClear}
+                name="travelAgentName"
+                placeholder="Kies uw reisagent"
+              />
+            </div>
+          </div>
+        )}
+      </div>
+      {Object.keys(flatErrors).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">
+                {Object.keys(flatErrors).map((key) => (
+                  <li key={key}>{get(flatErrors, key)}</li>
+                ))}
+              </ul>
+            </div>
+          </div>
+        </div>
+      )}
+      <div className="booking__navigator">
+        <button type="submit" title={translations.STEPS.NEXT} className="cta">
+          {translations.STEPS.NEXT}
+        </button>
+      </div>
+    </form>
+  );
+};
+
+export default TravelersForm;