@qite/tide-booking-component 1.0.0 → 1.0.2

package/build/build-esm/index.js

@@ -7238,22 +7238,12 @@ var selectRequestRooms = function (state) {
 var selectOfficeId = function (state) {
   return state.booking.officeId;
 };
-var selectEntryStatus = function (state) {
-  return state.booking.entryStatus;
-};
-var selectCustomEntryStatusId = function (state) {
-  return state.booking.customEntryStatusId;
-};
 var selectBookingOptions = function (state) {
   return state.booking.bookingOptions;
 };
 var selectBookingType = function (state) {
   return state.booking.bookingType;
 };
-// export const selectB2BEntryStatus = (state: RootState) =>
-//   state.booking.b2bEntryStatus;
-// export const selectB2BCustomEntryStatusId = (state: RootState) =>
-//   state.booking.b2bCustomEntryStatusId;
 var selectTagIds = function (state) {
   return state.booking.tagIds;
 };
@@ -7449,12 +7439,8 @@ var selectBookingPackageRequest = createSelector(
 );
 var selectBookingPackageBookRequest = createSelector(
   selectBookingPackageRequest,
-  selectEntryStatus,
-  selectCustomEntryStatusId,
   selectBookingOptions,
   selectBookingType,
-  // selectB2BEntryStatus,
-  // selectB2BCustomEntryStatusId,
   selectBookingPackagePax,
   selectBookingAddress,
   selectPackageDetails,
@@ -7468,12 +7454,8 @@ var selectBookingPackageBookRequest = createSelector(
   selectVoucherCodes,
   function (
     bookingPackageRequest,
-    entryStatus,
-    customEntryStatusId,
     bookingOptions,
     bookingType,
-    // b2bEntryStatus,
-    // b2bCustomEntryStatusId,
     pax,
     address,
     packageDetails,
@@ -7486,32 +7468,7 @@ var selectBookingPackageBookRequest = createSelector(
     remarks,
     voucherCodes
   ) {
-    var _a,
-      _b,
-      _c,
-      _d,
-      _e,
-      _f,
-      _g,
-      _h,
-      _j,
-      _k,
-      _l,
-      _m,
-      _o,
-      _p,
-      _q,
-      _r,
-      _s,
-      _t,
-      _u,
-      _v,
-      _w;
-    if (
-      !packageDetails ||
-      (pax === null || pax === void 0 ? void 0 : pax.length) == 0
-    )
-      return null;
+    if (!packageDetails) return null;
     var returnPaymentUrl = false;
     if (
       generatePaymentUrl &&
@@ -7520,188 +7477,52 @@ var selectBookingPackageBookRequest = createSelector(
     ) {
       returnPaymentUrl = true;
     }
-    console.log("bookingType", bookingType);
-    console.log("bookingPackageRequest.agentId", bookingPackageRequest.agentId);
-    console.log("bookingOptions", bookingOptions);
+    var entryStatus = 0;
+    var customEntryStatusId = undefined;
     switch (bookingType) {
-      case "b2c":
-        if (
-          ((_a =
-            bookingOptions === null || bookingOptions === void 0
-              ? void 0
-              : bookingOptions.b2c) === null || _a === void 0
-            ? void 0
-            : _a.tagIds) &&
-          ((_b =
-            bookingOptions === null || bookingOptions === void 0
-              ? void 0
-              : bookingOptions.b2c) === null || _b === void 0
-            ? void 0
-            : _b.tagIds.length) > 0
-        ) {
+      case "b2b":
+        if (bookingOptions.b2b.tagIds && bookingOptions.b2b.tagIds.length > 0) {
           tagIds =
             tagIds === null || tagIds === void 0
               ? void 0
-              : tagIds.concat(
-                  (_c =
-                    bookingOptions === null || bookingOptions === void 0
-                      ? void 0
-                      : bookingOptions.b2c) === null || _c === void 0
-                    ? void 0
-                    : _c.tagIds
-                );
+              : tagIds.concat(bookingOptions.b2b.tagIds);
         }
-        if (
-          (_d =
-            bookingOptions === null || bookingOptions === void 0
-              ? void 0
-              : bookingOptions.b2c) === null || _d === void 0
-            ? void 0
-            : _d.entryStatus
-        ) {
-          entryStatus =
-            (_e =
-              bookingOptions === null || bookingOptions === void 0
-                ? void 0
-                : bookingOptions.b2c) === null || _e === void 0
-              ? void 0
-              : _e.entryStatus;
+        if (bookingOptions.b2b.entryStatus) {
+          entryStatus = bookingOptions.b2b.entryStatus;
         }
-        if (
-          (_f =
-            bookingOptions === null || bookingOptions === void 0
-              ? void 0
-              : bookingOptions.b2c) === null || _f === void 0
-            ? void 0
-            : _f.customEntryStatusId
-        ) {
-          customEntryStatusId =
-            (_g =
-              bookingOptions === null || bookingOptions === void 0
-                ? void 0
-                : bookingOptions.b2c) === null || _g === void 0
-              ? void 0
-              : _g.customEntryStatusId;
+        if (bookingOptions.b2b.customEntryStatusId) {
+          customEntryStatusId = bookingOptions.b2b.customEntryStatusId;
         }
         break;
-      case "b2b":
+      case "b2b2c":
         if (
-          ((_h =
-            bookingOptions === null || bookingOptions === void 0
-              ? void 0
-              : bookingOptions.b2b) === null || _h === void 0
-            ? void 0
-            : _h.tagIds) &&
-          ((_j =
-            bookingOptions === null || bookingOptions === void 0
-              ? void 0
-              : bookingOptions.b2b) === null || _j === void 0
-            ? void 0
-            : _j.tagIds.length) > 0
+          bookingOptions.b2b2c.tagIds &&
+          bookingOptions.b2b2c.tagIds.length > 0
         ) {
           tagIds =
             tagIds === null || tagIds === void 0
               ? void 0
-              : tagIds.concat(
-                  (_k =
-                    bookingOptions === null || bookingOptions === void 0
-                      ? void 0
-                      : bookingOptions.b2b) === null || _k === void 0
-                    ? void 0
-                    : _k.tagIds
-                );
+              : tagIds.concat(bookingOptions.b2b2c.tagIds);
         }
-        if (
-          (_l =
-            bookingOptions === null || bookingOptions === void 0
-              ? void 0
-              : bookingOptions.b2b) === null || _l === void 0
-            ? void 0
-            : _l.entryStatus
-        ) {
-          entryStatus =
-            (_m =
-              bookingOptions === null || bookingOptions === void 0
-                ? void 0
-                : bookingOptions.b2b) === null || _m === void 0
-              ? void 0
-              : _m.entryStatus;
+        if (bookingOptions.b2b2c.entryStatus) {
+          entryStatus = bookingOptions.b2b2c.entryStatus;
         }
-        if (
-          (_o =
-            bookingOptions === null || bookingOptions === void 0
-              ? void 0
-              : bookingOptions.b2b) === null || _o === void 0
-            ? void 0
-            : _o.customEntryStatusId
-        ) {
-          customEntryStatusId =
-            (_p =
-              bookingOptions === null || bookingOptions === void 0
-                ? void 0
-                : bookingOptions.b2b) === null || _p === void 0
-              ? void 0
-              : _p.customEntryStatusId;
+        if (bookingOptions.b2b2c.customEntryStatusId) {
+          customEntryStatusId = bookingOptions.b2b2c.customEntryStatusId;
         }
         break;
-      case "b2b2c":
-        if (
-          ((_q =
-            bookingOptions === null || bookingOptions === void 0
-              ? void 0
-              : bookingOptions.b2b2c) === null || _q === void 0
-            ? void 0
-            : _q.tagIds) &&
-          ((_r =
-            bookingOptions === null || bookingOptions === void 0
-              ? void 0
-              : bookingOptions.b2b2c) === null || _r === void 0
-            ? void 0
-            : _r.tagIds.length) > 0
-        ) {
+      default:
+        if (bookingOptions.b2c.tagIds && bookingOptions.b2c.tagIds.length > 0) {
           tagIds =
             tagIds === null || tagIds === void 0
               ? void 0
-              : tagIds.concat(
-                  (_s =
-                    bookingOptions === null || bookingOptions === void 0
-                      ? void 0
-                      : bookingOptions.b2b2c) === null || _s === void 0
-                    ? void 0
-                    : _s.tagIds
-                );
+              : tagIds.concat(bookingOptions.b2c.tagIds);
         }
-        if (
-          (_t =
-            bookingOptions === null || bookingOptions === void 0
-              ? void 0
-              : bookingOptions.b2b2c) === null || _t === void 0
-            ? void 0
-            : _t.entryStatus
-        ) {
-          entryStatus =
-            (_u =
-              bookingOptions === null || bookingOptions === void 0
-                ? void 0
-                : bookingOptions.b2b2c) === null || _u === void 0
-              ? void 0
-              : _u.entryStatus;
+        if (bookingOptions.b2c.entryStatus) {
+          entryStatus = bookingOptions.b2c.entryStatus;
         }
-        if (
-          (_v =
-            bookingOptions === null || bookingOptions === void 0
-              ? void 0
-              : bookingOptions.b2b2c) === null || _v === void 0
-            ? void 0
-            : _v.customEntryStatusId
-        ) {
-          customEntryStatusId =
-            (_w =
-              bookingOptions === null || bookingOptions === void 0
-                ? void 0
-                : bookingOptions.b2b2c) === null || _w === void 0
-              ? void 0
-              : _w.customEntryStatusId;
+        if (bookingOptions.b2c.customEntryStatusId) {
+          customEntryStatusId = bookingOptions.b2c.customEntryStatusId;
         }
         break;
     }
@@ -7710,7 +7531,12 @@ var selectBookingPackageBookRequest = createSelector(
       status: entryStatus,
       customStatusId: customEntryStatusId,
       address: address,
-      pax: pax,
+      pax:
+        (pax === null || pax === void 0 ? void 0 : pax.length) != 0
+          ? pax
+          : packageDetails.options[0].requestRooms.flatMap(function (x) {
+              return x.pax;
+            }),
       nonTravelPax: [],
       calculateDeposit: calculateDeposit,
       returnPaymentUrl: returnPaymentUrl,
@@ -7719,7 +7545,6 @@ var selectBookingPackageBookRequest = createSelector(
       remarks: remarks,
       voucherCodes: voucherCodes,
     };
-    console.log("bookingPackageRequest", bookingPackageRequest);
     return bookingPackageRequest;
   }
 );
@@ -7799,28 +7624,24 @@ var packageApi = {
 var _a;
 var initialState$1 = {
   officeId: 1,
-  entryStatus: 0,
-  customEntryStatusId: undefined,
   bookingOptions: {
     b2b: {
-      tagIds: [9],
+      tagIds: [],
       entryStatus: 2,
       customEntryStatusId: undefined,
     },
     b2b2c: {
-      tagIds: [11],
+      tagIds: [],
       entryStatus: 2,
       customEntryStatusId: undefined,
     },
     b2c: {
-      tagIds: [10],
+      tagIds: [],
       entryStatus: 0,
       customEntryStatusId: undefined,
     },
   },
   bookingType: "b2c",
-  // b2bEntryStatus: 2,
-  // b2bCustomEntryStatusId: undefined,
   productAttributes: undefined,
   bookingAttributes: undefined,
   calculateDeposit: false,
@@ -7962,27 +7783,12 @@ var bookingSlice = createSlice({
     setOfficeId: function (state, action) {
       state.officeId = action.payload;
     },
-    setEntryStatus: function (state, action) {
-      state.entryStatus = action.payload;
-    },
-    setCustomEntryStatusId: function (state, action) {
-      state.customEntryStatusId = action.payload;
-    },
     setBookingOptions: function (state, action) {
       state.bookingOptions = action.payload;
     },
     setBookingType: function (state, action) {
       state.bookingType = action.payload;
     },
-    // setB2BEntryStatus(state, action: PayloadAction<number>) {
-    //   state.b2bEntryStatus = action.payload;
-    // },
-    // setB2BCustomEntryStatusId(
-    //   state,
-    //   action: PayloadAction<number | undefined>
-    // ) {
-    //   state.b2bCustomEntryStatusId = action.payload;
-    // },
     setProductAttributes: function (state, action) {
       state.productAttributes = action.payload;
     },
@@ -8097,12 +7903,8 @@ var bookingSlice = createSlice({
   },
 });
 var setOfficeId = ((_a = bookingSlice.actions), _a.setOfficeId),
-  setEntryStatus = _a.setEntryStatus,
-  setCustomEntryStatusId = _a.setCustomEntryStatusId,
   setBookingOptions = _a.setBookingOptions,
   setBookingType = _a.setBookingType,
-  // setB2BEntryStatus,
-  // setB2BCustomEntryStatusId,
   setProductAttributes = _a.setProductAttributes,
   setBookingAttributes = _a.setBookingAttributes,
   setCalculateDeposit = _a.setCalculateDeposit,
@@ -8157,10 +7959,6 @@ var SettingsContext = React.createContext({
   generatePaymentUrl: false,
   currency: "EUR",
   officeId: 1,
-  entryStatus: 0,
-  customEntryStatusId: null,
-  // b2bEntryStatus: 2,
-  // b2bCustomEntryStatusId: null,
   tagIds: [],
   hideAgentSelection: false,
   agentAdressId: undefined,
@@ -8168,7 +7966,10 @@ var SettingsContext = React.createContext({
   productPath: "/",
   basePath: "/boeken",
   options: {
-    pathSuffix: "/opties",
+    pathSuffix: "/",
+  },
+  travellers: {
+    pathSuffix: "/travellers",
   },
   summary: {
     pathSuffix: "/samenvatting",
@@ -8189,9 +7990,15 @@ var SettingsContext = React.createContext({
   loaderComponent: null,
   icons: null,
   bookingOptions: {
-    b2b: undefined,
-    b2b2c: undefined,
-    b2c: undefined,
+    b2b: {
+      entryStatus: 0,
+    },
+    b2b2c: {
+      entryStatus: 0,
+    },
+    b2c: {
+      entryStatus: 0,
+    },
   },
 });
 
@@ -8754,6 +8561,7 @@ var OptionRoom = function (_a) {
   var _b, _c, _d, _e, _f;
   var packageRoom = _a.packageRoom,
     pax = _a.pax,
+    optionPax = _a.optionPax,
     onRoomChange = _a.onRoomChange;
   var selectedOption =
     packageRoom === null || packageRoom === void 0
@@ -8942,6 +8750,28 @@ var OptionRoom = function (_a) {
       return "";
     }
   };
+  var getPaxName = function (id) {
+    var item = pax.find(function (x) {
+      return x.id === id;
+    });
+    if (
+      !(item === null || item === void 0 ? void 0 : item.firstName) &&
+      !(item === null || item === void 0 ? void 0 : item.lastName)
+    ) {
+      var optionPaxItem =
+        optionPax === null || optionPax === void 0
+          ? void 0
+          : optionPax.find(function (x) {
+              return x.id === id;
+            });
+      return optionPaxItem === null || optionPaxItem === void 0
+        ? void 0
+        : optionPaxItem.paxName;
+    }
+    return ""
+      .concat(item === null || item === void 0 ? void 0 : item.firstName, " ")
+      .concat(item === null || item === void 0 ? void 0 : item.lastName[0]);
+  };
   return React.createElement(
     "tr",
     null,
@@ -9043,10 +8873,7 @@ var OptionRoom = function (_a) {
                                 },
                                 i > 0 && ", ",
                                 " ",
-                                p.firstName,
-                                " ",
-                                p.lastName[0],
-                                "."
+                                getPaxName(p.id)
                               );
                             })
                           )
@@ -9792,6 +9619,7 @@ var OptionPaxGroup = function (_a) {
 
 var OptionPaxCard = function (_a) {
   var pax = _a.pax,
+    requestRoomsPax = _a.requestRoomsPax,
     parentIndex = _a.parentIndex,
     onPaxChange = _a.onPaxChange;
   var _b = useState(),
@@ -9810,10 +9638,18 @@ var OptionPaxCard = function (_a) {
     [pax, toggleStates, setToggleStates]
   );
   var bookingPax = useSelector(selectBookingPackagePax);
-  var getPaxName = function (id) {
+  var getPaxName = function (bookingOptionPax) {
     var item = bookingPax.find(function (x) {
-      return x.id === id;
+      return x.id === bookingOptionPax.id;
     });
+    if (
+      !(item === null || item === void 0 ? void 0 : item.firstName) &&
+      !(item === null || item === void 0 ? void 0 : item.lastName)
+    ) {
+      return bookingOptionPax === null || bookingOptionPax === void 0
+        ? void 0
+        : bookingOptionPax.paxName;
+    }
     return ""
       .concat(item === null || item === void 0 ? void 0 : item.firstName, " ")
       .concat(item === null || item === void 0 ? void 0 : item.lastName);
@@ -9834,6 +9670,7 @@ var OptionPaxCard = function (_a) {
     React.Fragment,
     null,
     pax.map(function (p, i) {
+      var _a, _b;
       return React.createElement(
         "div",
         {
@@ -9849,8 +9686,27 @@ var OptionPaxCard = function (_a) {
           React.createElement(
             "h3",
             { className: "booking-card__body-heading" },
-            getPaxName(p.id)
+            getPaxName(p)
           ),
+          ((_a =
+            requestRoomsPax === null || requestRoomsPax === void 0
+              ? void 0
+              : requestRoomsPax.find(function (x) {
+                  return x.id == p.id;
+                })) === null || _a === void 0
+            ? void 0
+            : _a.age) &&
+            React.createElement(
+              "p",
+              { className: "form__region-label" },
+              ((_b = requestRoomsPax.find(function (x) {
+                return x.id == p.id;
+              })) === null || _b === void 0
+                ? void 0
+                : _b.age) > CHILD_MAX_AGE
+                ? translations.TRAVELERS_FORM.ADULT
+                : translations.TRAVELERS_FORM.CHILD
+            ),
           React.createElement(
             "div",
             { className: "booking-card__actions" },
@@ -10349,11 +10205,16 @@ var OptionBookingGroup = function (_a) {
 var OptionsForm = function () {
   var _a = useContext(SettingsContext),
     basePath = _a.basePath,
-    summary = _a.summary,
+    travellers = _a.travellers,
     loaderComponent = _a.loaderComponent;
   var dispatch = useAppDispatch();
-  var travelerFormValues = useSelector(selectTravelersFormValues);
   var requestRooms = useSelector(selectRequestRooms);
+  var requestRoomsPax =
+    requestRooms === null || requestRooms === void 0
+      ? void 0
+      : requestRooms.flatMap(function (x) {
+          return x.pax;
+        });
   var pax = useSelector(selectBookingPackagePax);
   var packageRooms = useSelector(selectPackageRooms);
   var bookingQueryString = useSelector(selectBookingQueryString);
@@ -10361,29 +10222,36 @@ var OptionsForm = function () {
   var groups = useSelector(selectPackageGroups);
   var optionUnits = useSelector(selectPackageOptionUnits);
   var optionPax = useSelector(selectPackageOptionPax);
-  if (!travelerFormValues || !packageRooms) {
+  if (!packageRooms) {
     navigate("".concat(basePath, "?").concat(bookingQueryString));
   }
   var getRoomPax = function (index) {
+    var _a;
     var room =
       requestRooms === null || requestRooms === void 0
         ? void 0
         : requestRooms.find(function (x) {
             return x.index == index;
           });
-    return pax.filter(function (x) {
+    var bookingPackagePax = pax.filter(function (x) {
       return room === null || room === void 0
         ? void 0
         : room.pax.some(function (y) {
             return y.id == x.id;
           });
     });
+    return bookingPackagePax.length > 0
+      ? bookingPackagePax
+      : (_a = room === null || room === void 0 ? void 0 : room.pax) !== null &&
+        _a !== void 0
+      ? _a
+      : [];
   };
   var handleSubmit = function (e) {
     navigate(
       ""
         .concat(basePath)
-        .concat(summary.pathSuffix, "?")
+        .concat(travellers.pathSuffix, "?")
         .concat(bookingQueryString)
     );
     e.preventDefault();
@@ -10479,6 +10347,7 @@ var OptionsForm = function () {
                               key: room.index,
                               packageRoom: room,
                               pax: getRoomPax(room.index),
+                              optionPax: optionPax,
                               onRoomChange: handleOnRoomChange,
                             });
                           })
@@ -10539,6 +10408,7 @@ var OptionsForm = function () {
                   React.createElement(OptionPaxCard, {
                     pax: optionPax,
                     onPaxChange: handleOnPaxChange,
+                    requestRoomsPax: requestRoomsPax,
                   })
                 )
               )
@@ -11304,7 +11174,7 @@ var StepIndicators = function (_a) {
     React.createElement(
       "div",
       { className: "step-indicators__items" },
-      ["Persoonlijke gegevens", "Samenstellen", "Overzicht", "Bevestiging"].map(
+      ["Samenstellen", "Persoonlijke gegevens", "Overzicht", "Bevestiging"].map(
         function (stepName, index) {
           return React.createElement(
             "div",
@@ -12698,7 +12568,7 @@ var validateForm = function (values, agentRequired) {
         set(
           errors,
           "children[".concat(index, "].birthDate"),
-          "Reiziger ".concat(index + 1, ": is geen kind")
+          "Reiziger ".concat(values.adults.length + index + 1, ": is geen kind")
         );
       }
     }
@@ -12888,7 +12758,6 @@ var TravelersForm = function () {
   var childIds = useSelector(selectChildIds);
   var agents = useSelector(selectAgents);
   var agentAdressId = useSelector(selectAgentAdressId);
-  console.log("agentAdressId", agentAdressId);
   var initialValues =
     (_a = useSelector(selectTravelersFormValues)) !== null && _a !== void 0
       ? _a
@@ -12936,7 +12805,7 @@ var TravelersForm = function () {
       navigate(
         ""
           .concat(settings.basePath)
-          .concat(settings.options.pathSuffix, "?")
+          .concat(settings.summary.pathSuffix, "?")
           .concat(bookingQueryString)
       );
     },
@@ -13037,6 +12906,7 @@ var TravelersForm = function () {
   var handleAgentClear = function () {
     formik.setFieldValue("travelAgentId", 0);
     formik.setFieldValue("travelAgentName", "");
+    dispatch(setBookingType("b2c"));
   };
   var toggleAgent = function (value) {
     setShowAgents(value);
@@ -13654,13 +13524,10 @@ var Booking = function (_a) {
     thumbnailUrl = _a.thumbnailUrl;
   var _b = useContext(SettingsContext),
     officeId = _b.officeId,
-    entryStatus = _b.entryStatus,
-    customEntryStatusId = _b.customEntryStatusId,
     bookingOptions = _b.bookingOptions,
-    // b2bEntryStatus,
-    // b2bCustomEntryStatusId,
     basePath = _b.basePath,
     options = _b.options,
+    travellers = _b.travellers,
     summary = _b.summary,
     confirmation = _b.confirmation,
     error = _b.error,
@@ -13795,23 +13662,7 @@ var Booking = function (_a) {
   useEffect(
     function () {
       dispatch(setOfficeId(officeId));
-      dispatch(setEntryStatus(entryStatus));
-      dispatch(
-        setCustomEntryStatusId(
-          customEntryStatusId !== null && customEntryStatusId !== void 0
-            ? customEntryStatusId
-            : undefined
-        )
-      );
-      dispatch(
-        setBookingOptions(
-          bookingOptions !== null && bookingOptions !== void 0
-            ? bookingOptions
-            : undefined
-        )
-      );
-      // dispatch(setB2BEntryStatus(b2bEntryStatus));
-      // dispatch(setB2BCustomEntryStatusId(b2bCustomEntryStatusId ?? undefined));
+      dispatch(setBookingOptions(bookingOptions));
       dispatch(setCalculateDeposit(showSidebarDeposit));
       dispatch(
         setTagIds(tagIds !== null && tagIds !== void 0 ? tagIds : undefined)
@@ -13829,15 +13680,9 @@ var Booking = function (_a) {
     },
     [
       officeId,
-      entryStatus,
-      customEntryStatusId,
       bookingOptions,
-      // b2bEntryStatus,
-      // b2bCustomEntryStatusId,
       showSidebarDeposit,
       setOfficeId,
-      setEntryStatus,
-      setCustomEntryStatusId,
       setCalculateDeposit,
       tagIds,
       agentAdressId,
@@ -13880,16 +13725,16 @@ var Booking = function (_a) {
               Router,
               { basepath: basePath },
               React.createElement(StepRoute, {
-                path: "/",
+                path: options.pathSuffix,
                 number: 1,
-                title: translations.STEPS.PERSONAL_DETAILS,
-                component: React.createElement(TravelersForm, null),
+                title: translations.STEPS.TRAVEL_OPTIONS,
+                component: React.createElement(OptionsForm, null),
               }),
               React.createElement(StepRoute, {
-                path: options.pathSuffix,
+                path: travellers.pathSuffix,
                 number: 2,
-                title: translations.STEPS.TRAVEL_OPTIONS,
-                component: React.createElement(OptionsForm, null),
+                title: translations.STEPS.PERSONAL_DETAILS,
+                component: React.createElement(TravelersForm, null),
               }),
               React.createElement(StepRoute, {
                 path: summary.pathSuffix,