@qite/tide-booking-component 1.3.4 → 1.3.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/build/build-cjs/booking-wizard/features/sidebar/sidebar-util.d.ts +3 -3
  2. package/build/build-cjs/booking-wizard/features/travelers-form/travelers-form-slice.d.ts +5 -5
  3. package/build/build-cjs/booking-wizard/types.d.ts +6 -0
  4. package/build/build-cjs/index.js +223 -147
  5. package/build/build-cjs/shared/utils/localization-util.d.ts +2 -0
  6. package/build/build-esm/booking-wizard/features/sidebar/sidebar-util.d.ts +3 -3
  7. package/build/build-esm/booking-wizard/features/travelers-form/travelers-form-slice.d.ts +5 -5
  8. package/build/build-esm/booking-wizard/types.d.ts +6 -0
  9. package/build/build-esm/index.js +223 -147
  10. package/build/build-esm/shared/utils/localization-util.d.ts +2 -0
  11. package/package.json +75 -75
  12. package/src/booking-wizard/components/print-offer-button.tsx +63 -63
  13. package/src/booking-wizard/features/booking/booking-self-contained.tsx +389 -389
  14. package/src/booking-wizard/features/booking/booking-slice.ts +663 -663
  15. package/src/booking-wizard/features/booking/booking.tsx +361 -361
  16. package/src/booking-wizard/features/flight-options/flight-utils.ts +522 -522
  17. package/src/booking-wizard/features/product-options/options-form.tsx +481 -481
  18. package/src/booking-wizard/features/sidebar/sidebar-util.ts +177 -177
  19. package/src/booking-wizard/features/summary/summary-booking-option-pax.tsx +25 -25
  20. package/src/booking-wizard/features/summary/summary.tsx +674 -674
  21. package/src/booking-wizard/features/travelers-form/travelers-form-slice.ts +164 -164
  22. package/src/booking-wizard/features/travelers-form/travelers-form.tsx +888 -754
  23. package/src/booking-wizard/settings-context.ts +62 -62
  24. package/src/booking-wizard/types.ts +286 -279
  25. package/src/booking-wizard/use-offer-printer.ts +117 -117
  26. package/src/shared/translations/en-GB.json +239 -237
  27. package/src/shared/translations/fr-BE.json +239 -238
  28. package/src/shared/translations/nl-BE.json +239 -237
  29. package/src/shared/utils/tide-api-utils.ts +36 -36
  30. package/styles/booking-wizard-variables.scss +873 -873
  31. package/styles/components/_booking.scss +879 -879
  32. package/styles/components/_dropdown.scss +72 -72
  33. package/styles/components/_form.scss +1583 -1583
@@ -1,5 +1,5 @@
1
1
  import { RootState } from "../../store";
2
- import { TravelersFormValues } from "../../types";
2
+ import { TravelersFormValues, RoomTraveler } from "../../types";
3
3
  export interface TravelersFormState {
4
4
  formValues?: TravelersFormValues;
5
5
  }
@@ -35,11 +35,11 @@ export declare const selectFormRooms: ((state: {
35
35
  summary: import("../summary/summary-slice").SummaryState;
36
36
  apiSettings: import("../../../shared/types").ApiSettingsState;
37
37
  }) => {
38
- adults: number[];
39
- children: number[];
38
+ adults: RoomTraveler[];
39
+ children: RoomTraveler[];
40
40
  }[]) & import("reselect").OutputSelectorFields<(args_0: import("@qite/tide-client/build/types").BookingPackageRequestRoom[] | undefined) => {
41
- adults: number[];
42
- children: number[];
41
+ adults: RoomTraveler[];
42
+ children: RoomTraveler[];
43
43
  }[], {
44
44
  clearCache: () => void;
45
45
  }> & {
@@ -20,6 +20,7 @@ export interface Settings {
20
20
  };
21
21
  travellers: {
22
22
  pathSuffix: string;
23
+ compactForm?: boolean;
23
24
  };
24
25
  summary: {
25
26
  pathSuffix: string;
@@ -84,6 +85,7 @@ export interface Traveler {
84
85
  firstName: string;
85
86
  lastName: string;
86
87
  birthDate: string;
88
+ age?: number;
87
89
  }
88
90
  export interface Room {
89
91
  adults: number;
@@ -251,3 +253,7 @@ export interface TimeRangeFilter {
251
253
  selectedMin: number;
252
254
  selectedMax: number;
253
255
  }
256
+ export interface RoomTraveler {
257
+ id: number;
258
+ age: number;
259
+ }
@@ -215,6 +215,7 @@ var SIDEBAR$2 = {
215
215
  CHANGES: "correspondances"
216
216
  };
217
217
  var TRAVELERS_FORM$2 = {
218
+ AGE: "Age",
218
219
  TRAVELER: "Voyageur",
219
220
  ADULT: "adulte",
220
221
  ADULTS: "adultes",
@@ -243,6 +244,7 @@ var TRAVELERS_FORM$2 = {
243
244
  VALIDATION_MESSAGE: "Veuillez vérifier les champs du formulaire ci-dessous et remplissez-les correctement.",
244
245
  BOOK_WITH_AGENT: "Je souhaite réserver auprès de mon agent de voyage local",
245
246
  CHOOSE_OFFICE: "Je choisis une agence",
247
+ PERSON: "Personne",
246
248
  COUNTRIES: {
247
249
  BELGIUM: "Belgique",
248
250
  NETHERLANDS: "Pays-Bas",
@@ -467,6 +469,7 @@ var SIDEBAR$1 = {
467
469
  CHANGES: "overstappen"
468
470
  };
469
471
  var TRAVELERS_FORM$1 = {
472
+ AGE: "Leeftijd",
470
473
  TRAVELER: "Reiziger",
471
474
  ADULT: "volwassene",
472
475
  ADULTS: "volwassenen",
@@ -495,6 +498,7 @@ var TRAVELERS_FORM$1 = {
495
498
  VALIDATION_MESSAGE: "Controleer onderstaande velden in het formulier en vul deze correct in.",
496
499
  BOOK_WITH_AGENT: "Ik wens te boeken bij mijn lokale reisagent",
497
500
  CHOOSE_OFFICE: "Ik kies een kantoor",
501
+ PERSON: "Persoon",
498
502
  COUNTRIES: {
499
503
  BELGIUM: "België",
500
504
  NETHERLANDS: "Nederland",
@@ -719,6 +723,7 @@ var SIDEBAR = {
719
723
  CHANGES: "transfers"
720
724
  };
721
725
  var TRAVELERS_FORM = {
726
+ AGE: "Age",
722
727
  TRAVELER: "Traveler",
723
728
  ADULT: "adult",
724
729
  ADULTS: "adults",
@@ -747,6 +752,7 @@ var TRAVELERS_FORM = {
747
752
  VALIDATION_MESSAGE: "Please check the fields below and fill them in correctly.",
748
753
  BOOK_WITH_AGENT: "I want to book through my local travel agent",
749
754
  CHOOSE_OFFICE: "I choose an office",
755
+ PERSON: "Person",
750
756
  COUNTRIES: {
751
757
  BELGIUM: "Belgium",
752
758
  NETHERLANDS: "Netherlands",
@@ -9769,18 +9775,18 @@ var selectFormRooms = createSelector(selectRequestRooms$1, function (rooms) {
9769
9775
  };
9770
9776
  x.pax.forEach(function (p) {
9771
9777
  if (p.age && p.age > CHILD_MAX_AGE) {
9772
- formRoom.adults.push(p.id);
9778
+ formRoom.adults.push({ id: p.id, age: 30 });
9773
9779
  }
9774
9780
  else if (p.age && p.age <= CHILD_MAX_AGE) {
9775
- formRoom.children.push(p.id);
9781
+ formRoom.children.push({ id: p.id, age: p.age });
9776
9782
  }
9777
9783
  else if (p.dateOfBirth) {
9778
- var diff = differenceInYears(new Date(), new Date(p.dateOfBirth));
9779
- if (diff > CHILD_MAX_AGE) {
9780
- formRoom.adults.push(p.id);
9784
+ var age = differenceInYears(new Date(), new Date(p.dateOfBirth));
9785
+ if (age > CHILD_MAX_AGE) {
9786
+ formRoom.adults.push({ id: p.id, age: 30 });
9781
9787
  }
9782
9788
  else {
9783
- formRoom.children.push(p.id);
9789
+ formRoom.children.push({ id: p.id, age: age });
9784
9790
  }
9785
9791
  }
9786
9792
  });
@@ -13852,11 +13858,11 @@ var SummaryPerPaxOptionGroup = function (_a) {
13852
13858
 
13853
13859
  var SummaryBookingOptionPax = function (_a) {
13854
13860
  var pax = _a.pax;
13855
- return (React.createElement(React.Fragment, null, pax.groups.map(function (y) {
13861
+ return (React.createElement(React.Fragment, null, pax.groups.map(function (y, i) {
13856
13862
  var paxOptions = y.options.filter(function (y) { return y.isSelected; });
13857
13863
  if (isEmpty(paxOptions))
13858
13864
  return;
13859
- return React.createElement(SummaryPerPaxOptionGroup, { group: y });
13865
+ return React.createElement(SummaryPerPaxOptionGroup, { key: i, group: y });
13860
13866
  })));
13861
13867
  };
13862
13868
 
@@ -14178,7 +14184,7 @@ var Summary = function () {
14178
14184
  translations.SUMMARY.MAIN_BOOKER,
14179
14185
  ")"))),
14180
14186
  React.createElement("li", { className: "list__item" }, traveler.birthDate.split("-").reverse().join("/")),
14181
- isMainBooker && (React.createElement(React.Fragment, null,
14187
+ isMainBooker && (travelerFormValues === null || travelerFormValues === void 0 ? void 0 : travelerFormValues.street) && (React.createElement(React.Fragment, null,
14182
14188
  React.createElement("li", { className: "list__item" }, "".concat(travelerFormValues === null || travelerFormValues === void 0 ? void 0 : travelerFormValues.street, " ").concat(compact([
14183
14189
  travelerFormValues === null || travelerFormValues === void 0 ? void 0 : travelerFormValues.houseNumber,
14184
14190
  travelerFormValues === null || travelerFormValues === void 0 ? void 0 : travelerFormValues.box,
@@ -14217,9 +14223,9 @@ var Summary = function () {
14217
14223
  return React.createElement(SummaryPerBookingOptionGroup, { key: i, group: x });
14218
14224
  })),
14219
14225
  !isEmpty(activeOption === null || activeOption === void 0 ? void 0 : activeOption.optionUnits) &&
14220
- (activeOption === null || activeOption === void 0 ? void 0 : activeOption.optionUnits.map(function (x) { return (React.createElement(SummaryBookingOptionUnit, { unit: x })); })),
14226
+ (activeOption === null || activeOption === void 0 ? void 0 : activeOption.optionUnits.map(function (x, i) { return (React.createElement(SummaryBookingOptionUnit, { key: i, unit: x })); })),
14221
14227
  !isEmpty(activeOption === null || activeOption === void 0 ? void 0 : activeOption.optionPax) &&
14222
- (activeOption === null || activeOption === void 0 ? void 0 : activeOption.optionPax.map(function (x) { return (React.createElement(SummaryBookingOptionPax, { pax: x })); })),
14228
+ (activeOption === null || activeOption === void 0 ? void 0 : activeOption.optionPax.map(function (x, i) { return (React.createElement(SummaryBookingOptionPax, { key: i, pax: x })); })),
14223
14229
  (packageDetails === null || packageDetails === void 0 ? void 0 : packageDetails.outwardFlights) &&
14224
14230
  packageDetails.outwardFlights
14225
14231
  .filter(function (x) { return x.isSelected; })
@@ -14248,7 +14254,7 @@ var Summary = function () {
14248
14254
  !voucher.isValid && voucher.isValidated && (React.createElement("div", { className: "info-message--error" }, translations.SUMMARY.VOUCHER_INVALID)))),
14249
14255
  React.createElement("div", { className: "form__row" },
14250
14256
  React.createElement("ul", { className: "info-message__voucher" }, !isEmpty(bookRequest === null || bookRequest === void 0 ? void 0 : bookRequest.payload.voucherCodes) &&
14251
- ((_b = bookRequest === null || bookRequest === void 0 ? void 0 : bookRequest.payload.voucherCodes) === null || _b === void 0 ? void 0 : _b.map(function (y) { return (React.createElement("li", null,
14257
+ ((_b = bookRequest === null || bookRequest === void 0 ? void 0 : bookRequest.payload.voucherCodes) === null || _b === void 0 ? void 0 : _b.map(function (y, i) { return (React.createElement("li", { key: i },
14252
14258
  React.createElement("div", { className: "info-message__voucher__list" },
14253
14259
  y,
14254
14260
  " ",
@@ -14519,15 +14525,21 @@ var validateForm = function (values, agentRequired, bookingType, translations) {
14519
14525
  return errors;
14520
14526
  };
14521
14527
 
14522
- function createTraveler(id) {
14523
- return { id: id, firstName: "", lastName: "", birthDate: "", gender: "" };
14528
+ function createTraveler(traveler, followNumber, personTranslation, isCompact) {
14529
+ if (isCompact) {
14530
+ return { id: traveler.id, firstName: personTranslation, lastName: "".concat(followNumber.number++), birthDate: "", gender: "", age: traveler.age };
14531
+ }
14532
+ else {
14533
+ return { id: traveler.id, firstName: "", lastName: "", birthDate: "", gender: "" };
14534
+ }
14524
14535
  }
14525
- function createInitialValues(formRooms, startDate, agentAdressId) {
14536
+ function createInitialValues(formRooms, startDate, agentAdressId, personTranslation, isCompact) {
14537
+ var followNumber = { number: 0 };
14526
14538
  var initialValues = {
14527
14539
  startDate: startDate,
14528
14540
  rooms: formRooms.map(function (r) { return ({
14529
- adults: r.adults.map(function (id) { return createTraveler(id); }),
14530
- children: r.children.map(function (id) { return createTraveler(id); }),
14541
+ adults: r.adults.map(function (x) { return createTraveler(x, followNumber, personTranslation, isCompact); }),
14542
+ children: r.children.map(function (x) { return createTraveler(x, followNumber, personTranslation, isCompact); }),
14531
14543
  }); }),
14532
14544
  mainBookerId: -1,
14533
14545
  street: "",
@@ -14561,7 +14573,8 @@ var TravelersForm = function () {
14561
14573
  var agents = useSelector(selectAgents);
14562
14574
  var agentAdressId = useSelector(selectAgentAdressId);
14563
14575
  var translations = useSelector(selectTranslations);
14564
- var initialValues = (_a = useSelector(selectTravelersFormValues)) !== null && _a !== void 0 ? _a : createInitialValues(formRooms, startDate, agentAdressId);
14576
+ var useCompactForm = !!settings.travellers.compactForm && !!settings.agentAdressId;
14577
+ var initialValues = (_a = useSelector(selectTravelersFormValues)) !== null && _a !== void 0 ? _a : createInitialValues(formRooms, startDate, agentAdressId, translations.TRAVELERS_FORM.PERSON, useCompactForm);
14565
14578
  var _e = useState((_b = settings.agentRequired) !== null && _b !== void 0 ? _b : false), showAgents = _e[0], setShowAgents = _e[1];
14566
14579
  var _f = useState(!settings.agentAdressId && !settings.hideAgentSelection), showAgentSelection = _f[0], setShowAgentSelection = _f[1];
14567
14580
  var typeaheadAgents = (_c = sortBy(agents === null || agents === void 0 ? void 0 : agents.map(function (x) { return ({
@@ -14570,22 +14583,37 @@ var TravelersForm = function () {
14570
14583
  text: "".concat(x.name, " (").concat(x.postalCode, " ").concat(x.location, ")"),
14571
14584
  }); }), "value")) !== null && _c !== void 0 ? _c : [];
14572
14585
  var _g = useState(typeaheadAgents), filteredAgents = _g[0], setFilteredAgents = _g[1];
14573
- var formik = useFormik({
14574
- initialValues: initialValues,
14575
- validate: function (values) {
14576
- return validateForm(values, settings.agentRequired, bookingType, translations);
14577
- },
14578
- onSubmit: function (values) {
14579
- dispatch(setFormValues(values));
14580
- dispatch(fetchPriceDetails());
14581
- if (settings.skipRouter) {
14582
- dispatch(setCurrentStep(SUMMARY_STEP));
14583
- }
14584
- else {
14585
- navigate("".concat(settings.basePath).concat(settings.summary.pathSuffix, "?").concat(bookingQueryString));
14586
- }
14587
- },
14588
- });
14586
+ var formik = useCompactForm
14587
+ ? useFormik({
14588
+ initialValues: initialValues,
14589
+ validate: function (values) { },
14590
+ onSubmit: function (values) {
14591
+ dispatch(setFormValues(values));
14592
+ dispatch(fetchPriceDetails());
14593
+ if (settings.skipRouter) {
14594
+ dispatch(setCurrentStep(SUMMARY_STEP));
14595
+ }
14596
+ else {
14597
+ navigate("".concat(settings.basePath).concat(settings.summary.pathSuffix, "?").concat(bookingQueryString));
14598
+ }
14599
+ },
14600
+ })
14601
+ : useFormik({
14602
+ initialValues: initialValues,
14603
+ validate: function (values) {
14604
+ return validateForm(values, settings.agentRequired, bookingType, translations);
14605
+ },
14606
+ onSubmit: function (values) {
14607
+ dispatch(setFormValues(values));
14608
+ dispatch(fetchPriceDetails());
14609
+ if (settings.skipRouter) {
14610
+ dispatch(setCurrentStep(SUMMARY_STEP));
14611
+ }
14612
+ else {
14613
+ navigate("".concat(settings.basePath).concat(settings.summary.pathSuffix, "?").concat(bookingQueryString));
14614
+ }
14615
+ },
14616
+ });
14589
14617
  useEffect(function () {
14590
14618
  dispatch(fetchPriceDetails());
14591
14619
  }, []);
@@ -14645,8 +14673,8 @@ var TravelersForm = function () {
14645
14673
  return get$2(formik.errors, key) && get$2(formik.touched, key);
14646
14674
  };
14647
14675
  return (React.createElement("form", { className: "form form__travelers", name: "booking--travellers", id: "booking--travellers", noValidate: true, onSubmit: formik.handleSubmit, onReset: formik.handleReset },
14648
- React.createElement("div", { className: "form__travelers__wrapper" },
14649
- formik.values.rooms.map(function (room, rIndex) { return (React.createElement("div", { key: rIndex },
14676
+ useCompactForm
14677
+ ? (React.createElement("div", { className: "form__travelers__wrapper" }, formik.values.rooms.map(function (room, rIndex) { return (React.createElement("div", { key: rIndex },
14650
14678
  React.createElement("div", { className: "form__region" },
14651
14679
  React.createElement("div", { className: "form__region-header" },
14652
14680
  React.createElement("h5", { className: "form__region-heading" },
@@ -14682,30 +14710,7 @@ var TravelersForm = function () {
14682
14710
  React.createElement("input", { type: "radio", name: "mainBookerId", onChange: handleMainBookerChange, onBlur: formik.handleBlur, value: travelerValues.id, checked: formik.values.mainBookerId === travelerValues.id, className: "radiobutton__input" }),
14683
14711
  translations.TRAVELERS_FORM.MAIN_BOOKER))),
14684
14712
  React.createElement("div", { className: "form__row" },
14685
- React.createElement("div", { className: buildClassName([
14686
- "form__group",
14687
- hasVisibleError("rooms[".concat(rIndex, "].adults[").concat(index, "].gender")) && "form__group--error",
14688
- ]) },
14689
- React.createElement("label", { className: "form__label" },
14690
- translations.TRAVELERS_FORM.GENDER,
14691
- " *"),
14692
- React.createElement("div", { className: "radiobutton-group" },
14693
- React.createElement("div", { className: "radiobutton" },
14694
- React.createElement("label", { className: "radiobutton__label" },
14695
- React.createElement("input", { type: "radio", className: "radiobutton__input", name: "rooms[".concat(rIndex, "].adults[").concat(index, "].gender"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: "m", checked: travelerValues.gender === "m" }),
14696
- translations.TRAVELERS_FORM.MALE)),
14697
- React.createElement("div", { className: "radiobutton" },
14698
- React.createElement("label", { className: "radiobutton__label" },
14699
- React.createElement("input", { type: "radio", className: "radiobutton__input", name: "rooms[".concat(rIndex, "].adults[").concat(index, "].gender"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: "f", checked: travelerValues.gender === "f" }),
14700
- translations.TRAVELERS_FORM.FEMALE)),
14701
- React.createElement("div", { className: "radiobutton" },
14702
- React.createElement("label", { className: "radiobutton__label" },
14703
- React.createElement("input", { type: "radio", className: "radiobutton__input", name: "rooms[".concat(rIndex, "].adults[").concat(index, "].gender"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: "x", checked: travelerValues.gender === "x" }),
14704
- translations.TRAVELERS_FORM.OTHER))))),
14705
- React.createElement("div", { className: "form__row" },
14706
- React.createElement(LabeledInput, { hasError: hasVisibleError("rooms[".concat(rIndex, "].adults[").concat(index, "].firstName")), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.FIRST_NAME, required: true, name: "rooms[".concat(rIndex, "].adults[").concat(index, "].firstName"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: travelerValues.firstName }),
14707
- React.createElement(LabeledInput, { hasError: hasVisibleError("rooms[".concat(rIndex, "].adults[").concat(index, "].lastName")), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.LAST_NAME, required: true, name: "rooms[".concat(rIndex, "].adults[").concat(index, "].lastName"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: travelerValues.lastName }),
14708
- React.createElement(LabeledInput, { type: "date", hasError: hasVisibleError("rooms[".concat(rIndex, "].adults[").concat(index, "].birthDate")), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.BIRTHDATE, required: true, name: "rooms[".concat(rIndex, "].adults[").concat(index, "].birthDate"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: travelerValues.birthDate })))); }),
14713
+ React.createElement(LabeledInput, { hasError: hasVisibleError("rooms[".concat(rIndex, "].children[").concat(index, "].age")), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.AGE, required: true, name: "rooms[".concat(rIndex, "].children[").concat(index, "].age"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: travelerValues.age })))); }),
14709
14714
  room.children.map(function (travelerValues, index) { return (React.createElement("div", { className: "form__region", key: travelerValues.id },
14710
14715
  React.createElement("div", { className: "form__region-header" },
14711
14716
  React.createElement("h5", { className: "form__region-heading" },
@@ -14714,98 +14719,169 @@ var TravelersForm = function () {
14714
14719
  room.adults.length + index + 1),
14715
14720
  React.createElement("p", { className: "form__region-label" }, translations.TRAVELERS_FORM.CHILD)),
14716
14721
  React.createElement("div", { className: "form__row" },
14717
- React.createElement("div", { className: buildClassName([
14718
- "form__group",
14719
- hasVisibleError("rooms[".concat(rIndex, "].children[").concat(index, "].gender")) && "form__group--error",
14720
- ]) },
14721
- React.createElement("label", { className: "form__label" },
14722
- translations.TRAVELERS_FORM.GENDER,
14723
- " *"),
14724
- React.createElement("div", { className: "radiobutton-group" },
14725
- React.createElement("div", { className: "radiobutton" },
14726
- React.createElement("label", { className: "radiobutton__label" },
14727
- React.createElement("input", { type: "radio", className: "radiobutton__input", name: "rooms[".concat(rIndex, "].children[").concat(index, "].gender"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: "m", checked: travelerValues.gender === "m" }),
14728
- translations.TRAVELERS_FORM.MALE)),
14729
- React.createElement("div", { className: "radiobutton" },
14730
- React.createElement("label", { className: "radiobutton__label" },
14731
- React.createElement("input", { type: "radio", className: "radiobutton__input", name: "rooms[".concat(rIndex, "].children[").concat(index, "].gender"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: "f", checked: travelerValues.gender === "f" }),
14732
- translations.TRAVELERS_FORM.FEMALE)),
14722
+ React.createElement(LabeledInput, { hasError: hasVisibleError("rooms[".concat(rIndex, "].children[").concat(index, "].age")), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.AGE, required: true, name: "rooms[".concat(rIndex, "].children[").concat(index, "].age"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: travelerValues.age })))); }))); })))
14723
+ : (React.createElement(React.Fragment, null,
14724
+ React.createElement("div", { className: "form__travelers__wrapper" },
14725
+ formik.values.rooms.map(function (room, rIndex) { return (React.createElement("div", { key: rIndex },
14726
+ React.createElement("div", { className: "form__region" },
14727
+ React.createElement("div", { className: "form__region-header" },
14728
+ React.createElement("h5", { className: "form__region-heading" },
14729
+ translations.SHARED.ROOM,
14730
+ " ",
14731
+ rIndex + 1),
14732
+ React.createElement("p", { className: "form__region-label" }, compact([
14733
+ room.adults.length,
14734
+ room.adults.length === 1 &&
14735
+ " ".concat(translations.TRAVELERS_FORM.ADULT),
14736
+ room.adults.length > 1 &&
14737
+ " ".concat(translations.TRAVELERS_FORM.ADULTS),
14738
+ room.adults &&
14739
+ room.adults.length &&
14740
+ room.children &&
14741
+ room.children.length &&
14742
+ ", ",
14743
+ room.children.length,
14744
+ room.children.length === 1 &&
14745
+ " ".concat(translations.TRAVELERS_FORM.CHILD),
14746
+ room.children.length > 1 &&
14747
+ " ".concat(translations.TRAVELERS_FORM.CHILDREN),
14748
+ ]).join("")))),
14749
+ room.adults.map(function (travelerValues, index) { return (React.createElement("div", { className: "form__region", key: travelerValues.id },
14750
+ React.createElement("div", { className: "form__region-header" },
14751
+ React.createElement("h5", { className: "form__region-heading" },
14752
+ translations.TRAVELERS_FORM.TRAVELER,
14753
+ " ",
14754
+ index + 1),
14755
+ React.createElement("p", { className: "form__region-label" }, translations.TRAVELERS_FORM.ADULT),
14733
14756
  React.createElement("div", { className: "radiobutton" },
14734
14757
  React.createElement("label", { className: "radiobutton__label" },
14735
- React.createElement("input", { type: "radio", className: "radiobutton__input", name: "rooms[".concat(rIndex, "].children[").concat(index, "].gender"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: "x", checked: travelerValues.gender === "x" }),
14736
- translations.TRAVELERS_FORM.OTHER))))),
14737
- React.createElement("div", { className: "form__row" },
14738
- React.createElement(LabeledInput, { hasError: hasVisibleError("rooms[".concat(rIndex, "].children[").concat(index, "].firstName")), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.FIRST_NAME, required: true, name: "rooms[".concat(rIndex, "].children[").concat(index, "].firstName"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: travelerValues.firstName }),
14739
- React.createElement(LabeledInput, { hasError: hasVisibleError("rooms[".concat(rIndex, "].children[").concat(index, "].lastName")), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.LAST_NAME, required: true, name: "rooms[".concat(rIndex, "].children[").concat(index, "].lastName"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: travelerValues.lastName }),
14740
- React.createElement(LabeledInput, { type: "date", hasError: hasVisibleError("rooms[".concat(rIndex, "].children[").concat(index, "].birthDate")), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.BIRTHDATE, required: true, name: "rooms[".concat(rIndex, "].children[").concat(index, "].birthDate"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: travelerValues.birthDate })))); }))); }),
14741
- bookingType != "b2b" ? (React.createElement("div", { className: "form__region" },
14742
- React.createElement("div", { className: "form__region-header" },
14743
- React.createElement("h5", { className: "form__region-heading" }, translations.TRAVELERS_FORM.MAIN_BOOKER),
14744
- React.createElement("p", { className: "form__region-label" }, compact([
14745
- compact([mainBooker === null || mainBooker === void 0 ? void 0 : mainBooker.firstName, mainBooker === null || mainBooker === void 0 ? void 0 : mainBooker.lastName]).join(" "),
14746
- (mainBooker === null || mainBooker === void 0 ? void 0 : mainBooker.birthDate) &&
14747
- format$1(parse(mainBooker.birthDate, "yyyy-MM-dd", new Date()), "dd-MM-yyyy"),
14748
- ]).join(", "))),
14749
- React.createElement(React.Fragment, null,
14750
- React.createElement("div", { className: "form__twocolumn" },
14751
- React.createElement("div", { className: "form__twocolumn-column" },
14758
+ React.createElement("input", { type: "radio", name: "mainBookerId", onChange: handleMainBookerChange, onBlur: formik.handleBlur, value: travelerValues.id, checked: formik.values.mainBookerId === travelerValues.id, className: "radiobutton__input" }),
14759
+ translations.TRAVELERS_FORM.MAIN_BOOKER))),
14760
+ React.createElement("div", { className: "form__row" },
14761
+ React.createElement("div", { className: buildClassName([
14762
+ "form__group",
14763
+ hasVisibleError("rooms[".concat(rIndex, "].adults[").concat(index, "].gender")) && "form__group--error",
14764
+ ]) },
14765
+ React.createElement("label", { className: "form__label" },
14766
+ translations.TRAVELERS_FORM.GENDER,
14767
+ " *"),
14768
+ React.createElement("div", { className: "radiobutton-group" },
14769
+ React.createElement("div", { className: "radiobutton" },
14770
+ React.createElement("label", { className: "radiobutton__label" },
14771
+ React.createElement("input", { type: "radio", className: "radiobutton__input", name: "rooms[".concat(rIndex, "].adults[").concat(index, "].gender"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: "m", checked: travelerValues.gender === "m" }),
14772
+ translations.TRAVELERS_FORM.MALE)),
14773
+ React.createElement("div", { className: "radiobutton" },
14774
+ React.createElement("label", { className: "radiobutton__label" },
14775
+ React.createElement("input", { type: "radio", className: "radiobutton__input", name: "rooms[".concat(rIndex, "].adults[").concat(index, "].gender"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: "f", checked: travelerValues.gender === "f" }),
14776
+ translations.TRAVELERS_FORM.FEMALE)),
14777
+ React.createElement("div", { className: "radiobutton" },
14778
+ React.createElement("label", { className: "radiobutton__label" },
14779
+ React.createElement("input", { type: "radio", className: "radiobutton__input", name: "rooms[".concat(rIndex, "].adults[").concat(index, "].gender"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: "x", checked: travelerValues.gender === "x" }),
14780
+ translations.TRAVELERS_FORM.OTHER))))),
14781
+ React.createElement("div", { className: "form__row" },
14782
+ React.createElement(LabeledInput, { hasError: hasVisibleError("rooms[".concat(rIndex, "].adults[").concat(index, "].firstName")), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.FIRST_NAME, required: true, name: "rooms[".concat(rIndex, "].adults[").concat(index, "].firstName"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: travelerValues.firstName }),
14783
+ React.createElement(LabeledInput, { hasError: hasVisibleError("rooms[".concat(rIndex, "].adults[").concat(index, "].lastName")), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.LAST_NAME, required: true, name: "rooms[".concat(rIndex, "].adults[").concat(index, "].lastName"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: travelerValues.lastName }),
14784
+ React.createElement(LabeledInput, { type: "date", hasError: hasVisibleError("rooms[".concat(rIndex, "].adults[").concat(index, "].birthDate")), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.BIRTHDATE, required: true, name: "rooms[".concat(rIndex, "].adults[").concat(index, "].birthDate"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: travelerValues.birthDate })))); }),
14785
+ room.children.map(function (travelerValues, index) { return (React.createElement("div", { className: "form__region", key: travelerValues.id },
14786
+ React.createElement("div", { className: "form__region-header" },
14787
+ React.createElement("h5", { className: "form__region-heading" },
14788
+ translations.TRAVELERS_FORM.TRAVELER,
14789
+ " ",
14790
+ room.adults.length + index + 1),
14791
+ React.createElement("p", { className: "form__region-label" }, translations.TRAVELERS_FORM.CHILD)),
14792
+ React.createElement("div", { className: "form__row" },
14793
+ React.createElement("div", { className: buildClassName([
14794
+ "form__group",
14795
+ hasVisibleError("rooms[".concat(rIndex, "].children[").concat(index, "].gender")) && "form__group--error",
14796
+ ]) },
14797
+ React.createElement("label", { className: "form__label" },
14798
+ translations.TRAVELERS_FORM.GENDER,
14799
+ " *"),
14800
+ React.createElement("div", { className: "radiobutton-group" },
14801
+ React.createElement("div", { className: "radiobutton" },
14802
+ React.createElement("label", { className: "radiobutton__label" },
14803
+ React.createElement("input", { type: "radio", className: "radiobutton__input", name: "rooms[".concat(rIndex, "].children[").concat(index, "].gender"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: "m", checked: travelerValues.gender === "m" }),
14804
+ translations.TRAVELERS_FORM.MALE)),
14805
+ React.createElement("div", { className: "radiobutton" },
14806
+ React.createElement("label", { className: "radiobutton__label" },
14807
+ React.createElement("input", { type: "radio", className: "radiobutton__input", name: "rooms[".concat(rIndex, "].children[").concat(index, "].gender"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: "f", checked: travelerValues.gender === "f" }),
14808
+ translations.TRAVELERS_FORM.FEMALE)),
14809
+ React.createElement("div", { className: "radiobutton" },
14810
+ React.createElement("label", { className: "radiobutton__label" },
14811
+ React.createElement("input", { type: "radio", className: "radiobutton__input", name: "rooms[".concat(rIndex, "].children[").concat(index, "].gender"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: "x", checked: travelerValues.gender === "x" }),
14812
+ translations.TRAVELERS_FORM.OTHER))))),
14752
14813
  React.createElement("div", { className: "form__row" },
14753
- React.createElement(LabeledInput, { hasError: hasVisibleError("street"), extraClassName: "form__group--50 form__group--sm-60", label: translations.TRAVELERS_FORM.STREET, required: true, name: "street", onChange: formik.handleChange, onBlur: formik.handleBlur, value: formik.values.street }),
14754
- React.createElement(LabeledInput, { hasError: hasVisibleError("houseNumber"), extraClassName: "form__group--30 form__group--sm-20", label: translations.TRAVELERS_FORM.HOUSE_NUMBER, required: true, name: "houseNumber", onChange: formik.handleChange, onBlur: formik.handleBlur, value: formik.values.houseNumber }),
14755
- React.createElement(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 }))),
14756
- React.createElement("div", { className: "form__twocolumn-column" },
14814
+ React.createElement(LabeledInput, { hasError: hasVisibleError("rooms[".concat(rIndex, "].children[").concat(index, "].firstName")), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.FIRST_NAME, required: true, name: "rooms[".concat(rIndex, "].children[").concat(index, "].firstName"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: travelerValues.firstName }),
14815
+ React.createElement(LabeledInput, { hasError: hasVisibleError("rooms[".concat(rIndex, "].children[").concat(index, "].lastName")), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.LAST_NAME, required: true, name: "rooms[".concat(rIndex, "].children[").concat(index, "].lastName"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: travelerValues.lastName }),
14816
+ React.createElement(LabeledInput, { type: "date", hasError: hasVisibleError("rooms[".concat(rIndex, "].children[").concat(index, "].birthDate")), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.BIRTHDATE, required: true, name: "rooms[".concat(rIndex, "].children[").concat(index, "].birthDate"), onChange: formik.handleChange, onBlur: formik.handleBlur, value: travelerValues.birthDate })))); }))); }),
14817
+ bookingType != "b2b" ? (React.createElement("div", { className: "form__region" },
14818
+ React.createElement("div", { className: "form__region-header" },
14819
+ React.createElement("h5", { className: "form__region-heading" }, translations.TRAVELERS_FORM.MAIN_BOOKER),
14820
+ React.createElement("p", { className: "form__region-label" }, compact([
14821
+ compact([mainBooker === null || mainBooker === void 0 ? void 0 : mainBooker.firstName, mainBooker === null || mainBooker === void 0 ? void 0 : mainBooker.lastName]).join(" "),
14822
+ (mainBooker === null || mainBooker === void 0 ? void 0 : mainBooker.birthDate) &&
14823
+ format$1(parse(mainBooker.birthDate, "yyyy-MM-dd", new Date()), "dd-MM-yyyy"),
14824
+ ]).join(", "))),
14825
+ React.createElement(React.Fragment, null,
14826
+ React.createElement("div", { className: "form__twocolumn" },
14827
+ React.createElement("div", { className: "form__twocolumn-column" },
14828
+ React.createElement("div", { className: "form__row" },
14829
+ React.createElement(LabeledInput, { hasError: hasVisibleError("street"), extraClassName: "form__group--50 form__group--sm-60", label: translations.TRAVELERS_FORM.STREET, required: true, name: "street", onChange: formik.handleChange, onBlur: formik.handleBlur, value: formik.values.street }),
14830
+ React.createElement(LabeledInput, { hasError: hasVisibleError("houseNumber"), extraClassName: "form__group--30 form__group--sm-20", label: translations.TRAVELERS_FORM.HOUSE_NUMBER, required: true, name: "houseNumber", onChange: formik.handleChange, onBlur: formik.handleBlur, value: formik.values.houseNumber }),
14831
+ React.createElement(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 }))),
14832
+ React.createElement("div", { className: "form__twocolumn-column" },
14833
+ React.createElement("div", { className: "form__row" },
14834
+ React.createElement(LabeledInput, { hasError: hasVisibleError("zipCode"), extraClassName: "form__group--40 form__group--sm-20", label: translations.TRAVELERS_FORM.ZIPCODE, required: true, name: "zipCode", onChange: formik.handleChange, onBlur: formik.handleBlur, value: formik.values.zipCode }),
14835
+ React.createElement(LabeledInput, { hasError: hasVisibleError("place"), extraClassName: "form__group--60 form__group--sm-40", label: translations.TRAVELERS_FORM.CITY, required: true, name: "place", onChange: formik.handleChange, onBlur: formik.handleBlur, value: formik.values.place }),
14836
+ React.createElement(LabeledSelect, { hasError: hasVisibleError("country"), extraClassName: "form__group--sm-40", label: translations.TRAVELERS_FORM.COUNTRY, required: true, name: "country", onChange: formik.handleChange, onBlur: formik.handleBlur, value: formik.values.country, options: [
14837
+ {
14838
+ key: "empty",
14839
+ label: translations.TRAVELERS_FORM.SELECT_COUNTRY,
14840
+ value: undefined,
14841
+ },
14842
+ {
14843
+ key: "be",
14844
+ value: "be",
14845
+ label: translations.TRAVELERS_FORM.COUNTRIES.BELGIUM,
14846
+ },
14847
+ {
14848
+ key: "nl",
14849
+ value: "nl",
14850
+ label: translations.TRAVELERS_FORM.COUNTRIES.NETHERLANDS,
14851
+ },
14852
+ {
14853
+ key: "fr",
14854
+ value: "fr",
14855
+ label: translations.TRAVELERS_FORM.COUNTRIES.FRANCE,
14856
+ },
14857
+ ] })))),
14757
14858
  React.createElement("div", { className: "form__row" },
14758
- React.createElement(LabeledInput, { hasError: hasVisibleError("zipCode"), extraClassName: "form__group--40 form__group--sm-20", label: translations.TRAVELERS_FORM.ZIPCODE, required: true, name: "zipCode", onChange: formik.handleChange, onBlur: formik.handleBlur, value: formik.values.zipCode }),
14759
- React.createElement(LabeledInput, { hasError: hasVisibleError("place"), extraClassName: "form__group--60 form__group--sm-40", label: translations.TRAVELERS_FORM.CITY, required: true, name: "place", onChange: formik.handleChange, onBlur: formik.handleBlur, value: formik.values.place }),
14760
- React.createElement(LabeledSelect, { hasError: hasVisibleError("country"), extraClassName: "form__group--sm-40", label: translations.TRAVELERS_FORM.COUNTRY, required: true, name: "country", onChange: formik.handleChange, onBlur: formik.handleBlur, value: formik.values.country, options: [
14761
- {
14762
- key: "empty",
14763
- label: translations.TRAVELERS_FORM.SELECT_COUNTRY,
14764
- value: undefined,
14765
- },
14766
- {
14767
- key: "be",
14768
- value: "be",
14769
- label: translations.TRAVELERS_FORM.COUNTRIES.BELGIUM,
14770
- },
14771
- {
14772
- key: "nl",
14773
- value: "nl",
14774
- label: translations.TRAVELERS_FORM.COUNTRIES.NETHERLANDS,
14775
- },
14776
- {
14777
- key: "fr",
14778
- value: "fr",
14779
- label: translations.TRAVELERS_FORM.COUNTRIES.FRANCE,
14780
- },
14781
- ] })))),
14859
+ React.createElement(LabeledInput, { hasError: hasVisibleError("phone"), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.PHONE, required: true, name: "phone", onChange: formik.handleChange, onBlur: formik.handleBlur, value: formik.values.phone }),
14860
+ React.createElement(LabeledInput, { type: "email", hasError: hasVisibleError("email"), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.EMAIL, required: true, name: "email", onChange: formik.handleChange, onBlur: formik.handleBlur, value: formik.values.email }),
14861
+ React.createElement(LabeledInput, { type: "email", hasError: hasVisibleError("emailConfirmation"), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.REPEAT_EMAIL, required: true, name: "emailConfirmation", onChange: formik.handleChange, onBlur: formik.handleBlur, value: formik.values.emailConfirmation }))))) : (React.createElement("div", { className: "form__region" },
14862
+ React.createElement("div", { className: "form__row" },
14863
+ React.createElement(LabeledInput, { hasError: hasVisibleError("phone"), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.PHONE, required: true, name: "phone", onChange: formik.handleChange, onBlur: formik.handleBlur, value: formik.values.phone })))),
14864
+ showAgentSelection && (React.createElement("div", { className: "form__region" },
14865
+ React.createElement("div", { className: "form__region-header" },
14866
+ React.createElement("h5", { className: "form__region-heading" }, translations.TRAVELERS_FORM.BOOK_WITH_AGENT),
14867
+ React.createElement("div", { className: "checkbox", id: "cbxChooseOffice" },
14868
+ React.createElement("label", { className: "checkbox__label" },
14869
+ React.createElement("input", { type: "checkbox", name: "booking--mainbooker", defaultChecked: showAgents, onClick: function () { return toggleAgent(!showAgents); }, className: "checkbox__input" }),
14870
+ translations.TRAVELERS_FORM.CHOOSE_OFFICE))),
14871
+ showAgents && (React.createElement("div", { className: "form__row form__row--choose-office" },
14872
+ React.createElement("div", { className: buildClassName([
14873
+ "form__group",
14874
+ "form__group--icon",
14875
+ hasVisibleError("travelAgentId") && "form__group--error",
14876
+ ]) },
14877
+ React.createElement(TypeAheadInput, { value: formik.values.travelAgentName, options: filteredAgents, onChange: handleAgentChange, onSelect: handleAgentSelect, onClear: handleAgentClear, name: "travelAgentName", placeholder: translations.TRAVELERS_FORM.CHOOSE_AGENT_PLACEHOLDER }))))))),
14878
+ Object.keys(flatErrors).length > 0 && (React.createElement("div", { className: "form__region form__region--errors" },
14782
14879
  React.createElement("div", { className: "form__row" },
14783
- React.createElement(LabeledInput, { hasError: hasVisibleError("phone"), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.PHONE, required: true, name: "phone", onChange: formik.handleChange, onBlur: formik.handleBlur, value: formik.values.phone }),
14784
- React.createElement(LabeledInput, { type: "email", hasError: hasVisibleError("email"), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.EMAIL, required: true, name: "email", onChange: formik.handleChange, onBlur: formik.handleBlur, value: formik.values.email }),
14785
- React.createElement(LabeledInput, { type: "email", hasError: hasVisibleError("emailConfirmation"), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.REPEAT_EMAIL, required: true, name: "emailConfirmation", onChange: formik.handleChange, onBlur: formik.handleBlur, value: formik.values.emailConfirmation }))))) : (React.createElement("div", { className: "form__region" },
14786
- React.createElement("div", { className: "form__row" },
14787
- React.createElement(LabeledInput, { hasError: hasVisibleError("phone"), extraClassName: "form__group--md-33", label: translations.TRAVELERS_FORM.PHONE, required: true, name: "phone", onChange: formik.handleChange, onBlur: formik.handleBlur, value: formik.values.phone })))),
14788
- showAgentSelection && (React.createElement("div", { className: "form__region" },
14789
- React.createElement("div", { className: "form__region-header" },
14790
- React.createElement("h5", { className: "form__region-heading" }, translations.TRAVELERS_FORM.BOOK_WITH_AGENT),
14791
- React.createElement("div", { className: "checkbox", id: "cbxChooseOffice" },
14792
- React.createElement("label", { className: "checkbox__label" },
14793
- React.createElement("input", { type: "checkbox", name: "booking--mainbooker", defaultChecked: showAgents, onClick: function () { return toggleAgent(!showAgents); }, className: "checkbox__input" }),
14794
- translations.TRAVELERS_FORM.CHOOSE_OFFICE))),
14795
- showAgents && (React.createElement("div", { className: "form__row form__row--choose-office" },
14796
- React.createElement("div", { className: buildClassName([
14797
- "form__group",
14798
- "form__group--icon",
14799
- hasVisibleError("travelAgentId") && "form__group--error",
14800
- ]) },
14801
- React.createElement(TypeAheadInput, { value: formik.values.travelAgentName, options: filteredAgents, onChange: handleAgentChange, onSelect: handleAgentSelect, onClear: handleAgentClear, name: "travelAgentName", placeholder: translations.TRAVELERS_FORM.CHOOSE_AGENT_PLACEHOLDER }))))))),
14802
- Object.keys(flatErrors).length > 0 && (React.createElement("div", { className: "form__region form__region--errors" },
14803
- React.createElement("div", { className: "form__row" },
14804
- React.createElement("div", { className: "form__group" },
14805
- React.createElement("p", { className: "form__error-heading" },
14806
- translations.TRAVELERS_FORM.VALIDATION_MESSAGE,
14807
- ":"),
14808
- React.createElement("ul", { className: "list" }, Object.keys(flatErrors).map(function (key) { return (React.createElement("li", { key: key }, get$2(flatErrors, key))); })))))),
14880
+ React.createElement("div", { className: "form__group" },
14881
+ React.createElement("p", { className: "form__error-heading" },
14882
+ translations.TRAVELERS_FORM.VALIDATION_MESSAGE,
14883
+ ":"),
14884
+ React.createElement("ul", { className: "list" }, Object.keys(flatErrors).map(function (key) { return (React.createElement("li", { key: key }, get$2(flatErrors, key))); })))))))),
14809
14885
  React.createElement("div", { className: "booking__navigator" },
14810
14886
  settings.skipRouter ? (React.createElement("button", { type: "button", title: translations.STEPS.PREVIOUS, onClick: function () { return goPrevious(); }, className: "cta cta--secondary" }, translations.STEPS.PREVIOUS)) : (React.createElement(Link, { to: "".concat(settings.basePath).concat(settings.options.pathSuffix, "?").concat(bookingQueryString), title: translations.STEPS.PREVIOUS, className: "cta cta--secondary" }, translations.STEPS.PREVIOUS)),
14811
14887
  React.createElement("button", { type: "submit", title: translations.STEPS.NEXT, className: "cta" }, translations.STEPS.NEXT))));
@@ -126,6 +126,7 @@ export declare const getTranslations: (language: string) => {
126
126
  CHANGES: string;
127
127
  };
128
128
  TRAVELERS_FORM: {
129
+ AGE: string;
129
130
  TRAVELER: string;
130
131
  ADULT: string;
131
132
  ADULTS: string;
@@ -154,6 +155,7 @@ export declare const getTranslations: (language: string) => {
154
155
  VALIDATION_MESSAGE: string;
155
156
  BOOK_WITH_AGENT: string;
156
157
  CHOOSE_OFFICE: string;
158
+ PERSON: string;
157
159
  COUNTRIES: {
158
160
  BELGIUM: string;
159
161
  NETHERLANDS: string;